/* ==========================================================================
   Infoleen — public marketing site
   Standalone. Shares nothing with the app pages in /public. Safe to edit freely.
   Palette is lifted from the product chrome so the site and app feel related.

   NOTE ON GLYPHS: every decorative character in a `content:` property is written
   as a CSS escape (\2713 etc.) rather than a literal. Literals here were
   previously mangled into mojibake by an encoding round-trip; escapes are
   immune to that, whatever encoding the file is saved in.
   ========================================================================== */

:root {
  /* 2026-09-16: schools said the site looked generated, and the palette was a
     large part of why - the default SaaS blue on flat cold grey. The blue is
     now a deeper printed-ink blue, and soft surfaces are warm paper. */
  --brand:       #2f5fb3;
  --brand-dark:  #1b3c77;
  --brand-tint:  #dfe7f5;
  --ink:         #1a2233;
  --muted:       #6a7180;
  --line:        #e3dfd5;
  --bg:          #ffffff;
  --bg-soft:     #f6f4ef;
  --bg-sunk:     #ece8de;
  --good:        #15803d;
  --good-bg:     #dcfce7;
  --warn:        #8a5a00;
  --warn-bg:     #ffe9a8;
  --bad:         #c0392b;
  --bad-bg:      #fde8e6;

  /* Icon ink. Deliberately its own token rather than --brand: the icons sit on
     --brand-tint, and the brand blue is too close to that tint to read cleanly
     in light mode. This is the one colour that has to flip independently. */
  --ico:         #1b3c77;

  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 1px 2px rgba(26,34,51,.05);
  --shadow-lg:   0 2px 8px rgba(26,34,51,.07), 0 18px 44px rgba(26,34,51,.09);
  --maxw:        1180px;
  /* IBM Plex Sans, with Plex Sans Arabic immediately after it. The browser
     falls through per-glyph, so Latin renders in the Latin face and Arabic in
     the Arabic one with no lang-based rule needed — which is the point of
     picking a family that ships a real matched Arabic, rather than leaving RTL
     to whatever the OS happens to have.
     NOTE: Plex Sans has no 800 weight. Declarations asking for 800 resolve to
     Bold (700); nothing is synthesised, headings just sit a shade lighter than
     they did under Plus Jakarta Sans. */
  --font: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system,
          "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-tint: #16304f;
    --ico:        #86b6f8;
    --ink:        #e8edf6;
    --muted:      #97a3b6;
    --line:       #24324a;
    --bg:         #0d1421;
    --bg-soft:    #111a2a;
    --bg-sunk:    #17223580;
    --good:       #4ade80;
    --good-bg:    #10331f;
    --warn:       #fcd34d;
    --warn-bg:    #3a2e08;
    --bad:        #f87171;
    --bad-bg:     #3a1714;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:  0 2px 6px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Headings are set in Source Serif 4. A school's own letters, reports and
   certificates are set in a serif; every generated-looking template is not.
   Arabic falls through to Plex Sans Arabic — see --font. */
h1, h2, h3 { font-family: "Source Serif 4", "IBM Plex Sans Arabic", Georgia, "Times New Roman", serif;
             line-height: 1.16; letter-spacing: -.012em; margin: 0 0 .5em; font-weight: 600; }
h4 { line-height: 1.18; letter-spacing: -.012em; margin: 0 0 .5em; font-weight: 700; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--font); font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing: -.018em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.014em; }
h3 { font-size: 1.14rem; }
p  { margin: 0 0 1rem; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: 780px; }

section { padding: clamp(56px, 8vw, 104px) 0; }
section.soft { background: var(--bg-soft); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .735rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: .7rem;
}

.lede { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--muted); max-width: 62ch; }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------------------------------------------------------------- header */

header.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: var(--maxw); margin-inline: auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 26px;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.12rem;
        color: var(--ink); letter-spacing: -.03em; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo .mark {
  width: 29px; height: 29px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--brand), #7c5cf0);
  display: grid; place-items: center; color: #fff; font-size: .88rem; font-weight: 800;
}
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* `:not(.btn)` matters: `.nav-links a` would otherwise out-specify `.btn-primary`
   and repaint the "Book a demo" button with muted text and the wrong padding. */
.nav-links a:not(.btn) {
  color: var(--muted); font-weight: 550; font-size: .93rem;
  padding: 7px 12px; border-radius: 8px;
}
.nav-links a:not(.btn):hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.nav-links a:not(.btn).active { color: var(--brand); background: var(--brand-tint); }
/* Sign-in sits between the nav links and the CTA; slightly stronger than a
   plain link so returning users (students, staff, parents) can find it fast. */
.nav-links a.signin:not(.btn) { color: var(--ink); font-weight: 650; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 1.15rem; color: var(--ink); cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px 16px 16px; box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links .btn { text-align: center; margin-top: 6px; }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; font-weight: 650; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s;
  font-family: inherit;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(68,144,240,.32); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-lg { padding: 14px 26px; font-size: 1.02rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }

/* ------------------------------------------------------------------ hero */

.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 30% auto -10%; height: 620px;
  background: radial-gradient(closest-side, rgba(68,144,240,.16), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: -20% -15% auto auto; width: 640px; height: 540px;
  background: radial-gradient(closest-side, rgba(124,92,240,.14), transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero h1 { max-width: 16ch; }
.hero .lede { font-size: clamp(1.06rem, 2.1vw, 1.28rem); margin-bottom: 1.9rem; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: .84rem; color: var(--muted); font-weight: 500; margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.pill b { background: var(--brand-tint); color: var(--brand-dark); padding: 2px 9px;
          border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .02em; }
@media (prefers-color-scheme: dark) { .pill b { color: #9ec8ff; } }

/* ----------------------------------------------------------------- cards */

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35rem; }
/* Inside the grouped module sets the section h2 owns the page, the group label
   owns the h3, so the cards drop to h4 — the heading order is real, not styled
   to look real. h4 carries no size of its own in the base scale, hence this. */
.card h4 { font-size: 1.06rem; margin-bottom: .35rem; }
.card p  { color: var(--muted); font-size: .94rem; margin: 0; }

/* Icon tile. A fixed 40px square rather than an inline glyph: emoji were
   variable-height, so headings started at slightly different baselines across a
   row and the grid never quite lined up. */
.card .ico, .rolerow .ico {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--ico);
}
.card .ico { margin-bottom: 14px; }
.card .ico svg, .rolerow .ico svg { width: 21px; height: 21px; display: block; }

/* ------------------------------------------------------- module groups */
/* The nineteen modules are four labelled sets, not one nineteen-tile wall.
   Nothing was dropped — but a uniform grid that long is unreadable, and a
   reader looking for "do they do timetables" should find it by heading. */
.modset + .modset { margin-top: 46px; }
.modset-h {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.modset-h h3 { margin: 0; font-size: 1.04rem; }
.modset-n {
  font-size: .73rem; font-weight: 800; letter-spacing: .08em; flex: none;
  color: var(--brand); background: var(--brand-tint);
  padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- role rows */
/* Rows rather than a third consecutive tile grid. Three identical card grids
   stacked is the layout that makes a page read as generated. */
.rolelist { display: grid; gap: 0; }
.rolerow {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 19px 2px; border-top: 1px solid var(--line);
}
.rolerow:first-child { border-top: 0; }
.rolerow h3 { font-size: 1.06rem; margin-bottom: .2rem; }
.rolerow p  { color: var(--muted); font-size: .94rem; margin: 0; }
@media (min-width: 860px) {
  .rolelist { grid-template-columns: 1fr 1fr; column-gap: 44px; }
  /* In two columns the first *two* rows are the top row, so both lose the rule. */
  .rolerow:nth-child(-n+2) { border-top: 0; }
}

/* ----------------------------------------------------- onboarding steps */
/* A real <ol> with real numerals. The keycap emoji this replaced rendered at a
   different size in every OS and could not take the brand colour. The top rule
   on each item reads as a progress track across the four. */
.steps {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
}
.step { border-top: 2px solid var(--line); padding-top: 4px; }
.step-n {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .87rem; font-weight: 800; font-variant-numeric: tabular-nums;
  margin: 14px 0 13px;
}
.step h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.step p  { color: var(--muted); font-size: .94rem; margin: 0; }

.stat { text-align: center; padding: 20px 14px; }
.stat .n { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.035em;
           color: var(--brand); line-height: 1.1; }
.stat .l { font-size: .86rem; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------------- tables */

/* The comparison tables fit the page WITHOUT scrolling sideways on a desktop.
   nowrap on the header cells and on the verdict pills both had to go for that
   (phrases like "Exams yes; control room n/p" could not break), and
   table-layout:fixed is what makes the columns share the width predictably
   instead of the longest cell in each dictating it.

   ON A PHONE THEY SCROLL, and that is the deliberate part. The capability
   matrix is seven columns wide; at 360px that is ~45px each, which is narrower
   than the word "Infoleen". Squeezing to fit was tried and is what
   `overflow-wrap: anywhere` was for — but it splits words mid-syllable
   ("Infol / een"), and a brand name broken across two lines reads as a
   rendering fault. A table that scrolls is honest about being wide; a table
   that shreds its own words is not. Hence min-width + overflow-x below the
   breakpoint, and break-word rather than anywhere everywhere. */
.tscroll {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow); overflow: hidden;
}
table.cmp { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: .875rem; }
/* break-word, NOT anywhere: `anywhere` also lets a word count as zero-width when
   the browser measures the column, which invites the squeeze this is undoing.
   `break-word` only splits a word that genuinely cannot fit on a line of its
   own, so ordinary words wrap at spaces the way they should. `hyphens: auto` is
   gone with it — it was inserting hyphens into words that had not asked. */
table.cmp th, table.cmp td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line);
                             vertical-align: top; overflow-wrap: break-word; }

@media (max-width: 860px) {
  /* overflow-x only — overflow-y must stay hidden so the rounded corners keep
     clipping the first and last rows. */
  .tscroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  /* Enough width for the row label plus readable columns. The seven-column
     capability matrix carries its own wider floor. */
  table.cmp { min-width: 620px; }
  table.cmp.cmp-wide { min-width: 880px; }
}
table.cmp thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-soft); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 700;
  border-bottom: 2px solid var(--line);
}
/* The row-label column carries the most text, so it gets the widest share and
   the rest divide what's left evenly. */
table.cmp th:first-child, table.cmp td:first-child { width: 21%; }
table.cmp thead th.us { color: var(--brand); background: var(--brand-tint); }
table.cmp tbody td.us { background: color-mix(in srgb, var(--brand-tint) 45%, transparent); font-weight: 550; }
table.cmp tbody tr:hover td { background: var(--bg-soft); }
table.cmp tbody tr:hover td.us { background: var(--brand-tint); }
table.cmp td:first-child { font-weight: 600; color: var(--ink); }
table.cmp tr.grouprow td {
  background: var(--bg-sunk); font-weight: 700; font-size: .77rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); padding: 9px 14px;
}
table.cmp tbody tr.grouprow:hover td { background: var(--bg-sunk); }
.np { color: var(--muted); }

/* No nowrap: these carry real phrases, not just Yes/No, and forcing them onto
   one line is what pushed the table past the page width. As inline-block they
   still paint a single rounded panel when the text runs to two or three lines. */
.y, .n, .p {
  display: inline-block; font-weight: 700; font-size: .78rem;
  padding: 2px 8px; border-radius: 8px; line-height: 1.4;
}
.y { background: var(--good-bg); color: var(--good); }
.n { background: var(--bad-bg);  color: var(--bad); }
.p { background: var(--warn-bg); color: var(--warn); }

.tnote { font-size: .82rem; color: var(--muted); margin-top: 12px; }
.tnote a { color: var(--muted); text-decoration: underline; }

/* Narrow screens: a seven-column comparison can still fit without sideways
   scrolling, but only by giving up type size and padding. Dense beats truncated
   — every column stays on screen and every phrase stays readable, just small. */
@media (max-width: 900px) {
  table.cmp { font-size: .8rem; }
  table.cmp th, table.cmp td { padding: 8px 7px; }
  .y, .n, .p { font-size: .72rem; padding: 2px 6px; }
}
@media (max-width: 640px) {
  table.cmp { font-size: .72rem; }
  table.cmp th, table.cmp td { padding: 6px 5px; }
  table.cmp thead th { font-size: .66rem; letter-spacing: 0; }
  .y, .n, .p { font-size: .66rem; padding: 1px 5px; border-radius: 6px; }
  table.cmp th:first-child, table.cmp td:first-child { width: 24%; }
}

/* .swipe-hint is retained for any table that still needs to scroll; the two
   comparison tables no longer do, so compare.html doesn't render it. */
.swipe-hint {
  display: none; font-size: .8rem; color: var(--muted); margin-bottom: 8px;
}
@media (max-width: 820px) { .swipe-hint { display: block; } }

/* --------------------------------------------------------------- pricing */

/* Screen-reader-only text. The site's currencies (₹ and $) are both plain
   characters, so nothing needs it right now — it went in for the visually
   hidden "SAR" that accompanied the riyal SVG, and is kept because any hidden
   label added later will want it. The app has its own copy as .il-sr-only. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); align-items: start; }
/* Two-card layout: without a cap, auto-fit stretches each card to half a
   1180px container and the feature lists end up as short, wide ribbons. */
.plans.two { max-width: 840px; margin-inline: auto; }
.plan {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
  background: var(--bg); box-shadow: var(--shadow); position: relative; height: 100%;
  display: flex; flex-direction: column;
}
.plan.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.plan .tag {
  position: absolute; top: -12px; left: 24px; background: var(--brand); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 999px;
}
.plan h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.plan .sub { color: var(--muted); font-size: .88rem; margin-bottom: 16px; min-height: 2.9em; }
.price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 3px; flex-wrap: wrap; }
.price .amt { font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.price .per { color: var(--muted); font-size: .87rem; font-weight: 500; }
.price-note { font-size: .82rem; color: var(--muted); margin-bottom: 18px; min-height: 2.4em; }
/* The free month is the strongest thing on this card, so it gets a pill rather
   than being lost in the grey onboarding-fee line beside it. */
.free-flag {
  display: inline-block; background: var(--good-bg); color: var(--good);
  font-weight: 700; font-size: .8rem; padding: 2px 10px; border-radius: 999px;
  margin-right: 6px;
}
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; font-size: .91rem; }
.plan ul li { padding: 6px 0 6px 25px; position: relative; color: var(--ink); border-top: 1px solid var(--line); }
.plan ul li:first-child { border-top: 0; }
.plan ul li::before {
  content: "\2713"; position: absolute; left: 0; top: 6px; color: var(--brand); font-weight: 800; font-size: .88rem;
}
.plan ul li.off { color: var(--muted); }
.plan ul li.off::before { content: "\2715"; color: var(--muted); }
.plan .btn { width: 100%; margin-top: auto; }

.toggle {
  display: inline-flex; padding: 4px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; gap: 3px; margin-bottom: 34px;
}
.toggle button {
  border: 0; background: none; padding: 7px 17px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .89rem; font-weight: 600; color: var(--muted);
}
.toggle button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }

/* ------------------------------------------------------------ calculator */

.calc { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }
.calc label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.calc input[type=range] { width: 100%; accent-color: var(--brand); }
.calc-out { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.calc-out .row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
                 border-top: 1px solid var(--line); font-size: .93rem; }
.calc-out .row:first-of-type { border-top: 0; }
.calc-out .row b { font-variant-numeric: tabular-nums; }
.calc-out .total { font-size: 1.5rem; font-weight: 800; color: var(--brand); letter-spacing: -.03em; }

/* ------------------------------------------------------------------ misc */

.faq details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.faq summary {
  cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 1.35rem; font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); font-size: .94rem; padding-bottom: 8px; margin: 0; max-width: 78ch; }

.cta {
  background: linear-gradient(135deg, #142033, #1e3a8a 62%, #2b6fd0);
  color: #fff; border-radius: var(--radius); padding: clamp(34px, 5vw, 58px);
  text-align: center; box-shadow: var(--shadow-lg);
}
.cta h2 { color: #fff; }
.cta p { color: #c8d8f2; max-width: 56ch; margin-inline: auto; }
.cta .btn-primary { background: #fff; color: #142033; box-shadow: none; }
.cta .btn-primary:hover { background: #e8eefb; }
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.42); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.12); }

.tick { list-style: none; padding: 0; margin: 0; }
.tick li { padding: 7px 0 7px 29px; position: relative; color: var(--muted); font-size: .95rem; }
.tick li::before {
  content: "\2713"; position: absolute; left: 0; top: 7px; color: var(--brand); font-weight: 800;
}
.tick li b { color: var(--ink); font-weight: 650; }

.quote {
  border-left: 3px solid var(--brand); padding: 4px 0 4px 20px; margin: 0;
  font-size: 1.02rem; color: var(--ink);
}
.quote footer { color: var(--muted); font-size: .87rem; margin-top: 8px; font-style: normal; }

.note {
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 15px 18px; font-size: .9rem; color: var(--muted);
}
.note b { color: var(--ink); }

/* Gold variant, used for the conflict-of-interest disclosure. Built on the
   --warn pair rather than a hard-coded gold so it stays legible in dark mode:
   a dark amber on pale gold in light, bright gold on dark brown in dark.
   A disclosure that reads like fine print is not really a disclosure. */
.note.warn {
  background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 32%, transparent);
  border-left-color: var(--warn); color: var(--warn);
}
.note.warn b { color: var(--warn); font-weight: 800; }

.disclosure-flag {
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 13px 17px; margin: 22px 0 0;
  font-size: .92rem; line-height: 1.55; font-weight: 550;
  color: var(--warn); max-width: 66ch;
}
.disclosure-flag b { font-weight: 800; letter-spacing: .01em; }
.disclosure-flag a {
  color: var(--warn); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px;
}
.disclosure-flag a:hover { opacity: .78; }

/* ------------------------------------------------------------ form bits */

.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .94rem; background: var(--bg-soft); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.field textarea { min-height: 118px; resize: vertical; }
.req { color: var(--bad); }
/* Honeypot: off-screen for bots to fill, never seen or tabbed to by a person. */
.hp { position: absolute !important; left: -9999px !important; width: 1px !important;
      height: 1px !important; overflow: hidden; }

.formnote {
  font-size: .9rem; font-weight: 500; padding: 11px 14px; border-radius: var(--radius-sm);
  margin-bottom: 16px; display: none; line-height: 1.45;
}
.formnote.show { display: block; }
.formnote.err { background: var(--bad-bg); color: var(--bad); }
.formnote.ok  { background: var(--good-bg); color: var(--good); }

.contact-cols { display: grid; gap: 42px; grid-template-columns: 1.55fr 1fr; align-items: start; }
@media (max-width: 900px) { .contact-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer */

footer.site {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 52px 0 30px; font-size: .91rem;
}
.fgrid { display: grid; gap: 30px; grid-template-columns: 1.7fr repeat(3, 1fr); }
@media (max-width: 800px) { .fgrid { grid-template-columns: 1fr 1fr; } }
footer.site h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
                 color: var(--muted); margin-bottom: 12px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site ul li { padding: 4px 0; }
footer.site ul a { color: var(--muted); }
footer.site ul a:hover { color: var(--ink); }
footer.site .about { color: var(--muted); max-width: 34ch; font-size: .9rem; }
.fbot {
  border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--muted); font-size: .85rem;
}

@media print {
  header.nav, footer.site, .cta { display: none; }
  .tscroll { overflow: visible; box-shadow: none; }
  table.cmp { min-width: 0; font-size: .72rem; }
}

/* ==========================================================================
   PRODUCT SCREENS  (index.html)
   Real screenshots of the running product. They sit on the warm sunk surface
   so the white of the app's own chrome reads as the screen rather than as the
   page, and they carry a hairline + soft shadow so they look like windows,
   not like flat images pasted in.
   ========================================================================== */
.shots { background: var(--bg-sunk); padding: 54px 0 60px; }
.shots .shot { margin: 0; }
.shots img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); background: #fff;
}
.shots figcaption {
  font-size: .92rem; color: var(--muted); line-height: 1.5;
  margin: 10px 2px 0; max-width: 62ch;
}
.shot-lead { margin-bottom: 22px; }
.shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.shots .tnote { margin-top: 26px; }
@media (max-width: 760px) {
  .shots { padding: 36px 0 40px; }
  .shot-row { grid-template-columns: 1fr; gap: 18px; }
}