/* ============================================================================
   InPresentia — shared marketing site styles (about / features / pricing)

   One stylesheet across all three public pages so the topbar, footer, type
   scale and card recipes can't drift apart page to page. Page-specific
   layout stays in that page's own <style> block.

   The token set here is the app's, not a generic one: the greens, the
   surfaces and the severity colours are the same values src/style.css uses,
   so the marketing site and the product read as one thing. Each page also
   carries the same inline theme script index.html uses (it has to run before
   first paint, so it can't live in this file) — a visitor's light/dark
   choice is stored under the same localStorage key the app uses. Since the
   1.43.1 domain split the two no longer SHARE that value (the app is on its
   own origin, and localStorage is per-origin); the key stays identical
   anyway so nobody who visited before the split loses their choice.
   ========================================================================= */

:root{
  --bg:#F6F9F7; --surface:#FFFFFF; --surface-2:#ECF3EF; --surface-3:#E1EDE7;
  --ink:#122019; --ink-2:#44554E; --ink-3:#7B8B85;
  --border:#DAE6E0; --border-strong:#BFD1C9;
  --accent:#0F6E56; --accent-2:#1D9E75; --accent-ink:#FFFFFF;
  --accent-soft:#9FE1CB; --accent-tint:#E1F5EE;
  --brand-glyph:#9FE1CB; --brand-glyph-2:#E1F5EE;
  --sev-high:#B5462E; --sev-med:#B07A1E; --sev-low:#3E7A57;
  --stamp-bg:#17181A; --stamp-fg:#F2C14E;
  --shadow: 0 1px 2px rgba(18,32,25,.06), 0 8px 24px rgba(18,32,25,.06);
  --radius:14px;
  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-body:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1512; --surface:#0E1B16; --surface-2:#15261F; --surface-3:#1B3128;
    --ink:#E9F3EE; --ink-2:#AABFB6; --ink-3:#728A80;
    --border:#233A31; --border-strong:#2E4B3F;
    --accent:#2CBF8F; --accent-2:#1D9E75; --accent-ink:#06231A;
    --accent-soft:#9FE1CB; --accent-tint:#12291F;
    --sev-high:#E0755A; --sev-med:#E0A94C; --sev-low:#5FBE8B;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0A1512; --surface:#0E1B16; --surface-2:#15261F; --surface-3:#1B3128;
  --ink:#E9F3EE; --ink-2:#AABFB6; --ink-3:#728A80;
  --border:#233A31; --border-strong:#2E4B3F;
  --accent:#2CBF8F; --accent-2:#1D9E75; --accent-ink:#06231A;
  --accent-soft:#9FE1CB; --accent-tint:#12291F;
  --sev-high:#E0755A; --sev-med:#E0A94C; --sev-low:#5FBE8B;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
img{max-width:100%;}
h1,h2,h3{font-family:var(--font-display);margin:0;color:var(--ink);text-wrap:balance;}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,56px);}

.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:11.5px; color:var(--ink-3); font-weight:500; display:block;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:14px;font-weight:600;
  border-radius:999px;padding:11px 22px;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-2);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border-strong);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}

/* ---- topbar ---- */
header.topbar{border-bottom:1px solid var(--border);background:var(--bg);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;}
.word{
  font-family:var(--font-mono);font-weight:600;letter-spacing:.02em;font-size:15px;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;
}
.word .mark{
  width:30px;height:30px;border-radius:8px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none;
}
nav.pages{display:flex;align-items:center;gap:clamp(14px,3vw,26px);}
nav.pages a{font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;}
nav.pages a.current{color:var(--accent);}
nav.pages a:hover{color:var(--ink);}
.btn-login{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;
  padding:9px 18px;text-decoration:none;white-space:nowrap;
}
.btn-login:hover{background:var(--accent-2);}
@media(max-width:560px){
  nav.pages a.hide-sm{display:none;}
}

/* ---- section rhythm ---- */
.section-head{max-width:60ch;margin-bottom:34px;}
.section-head h2{font-size:clamp(24px,3.2vw,32px);font-weight:700;margin:10px 0 10px;line-height:1.08;}
.section-head p{font-size:16px;color:var(--ink-2);margin:0;}
section.ruled{border-top:1px solid var(--border);}

/* ---- the standard card, shared by .term and .feature ---- */
.card-surface{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---- closing CTA ---- */
section.cta{
  margin:0 0 76px;background:var(--accent);color:var(--accent-ink);
  border-radius:20px;padding:clamp(32px,5vw,52px) clamp(24px,5vw,64px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
section.cta h2{font-size:clamp(24px,3.4vw,36px);color:var(--accent-ink);max-width:16ch;line-height:1.06;}
section.cta p{margin:10px 0 0;font-size:14.5px;color:var(--accent-ink);opacity:.82;max-width:40ch;}
.cta-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px;}
section.cta .btn-primary{background:var(--accent-ink);color:var(--accent);}
section.cta .btn-primary:hover{background:#fff;}
section.cta .btn-outline{color:var(--accent-ink);border-color:rgba(255,255,255,.45);}
section.cta .btn-outline:hover{border-color:var(--accent-ink);color:var(--accent-ink);}
section.cta .note{font-size:12px;color:var(--accent-ink);opacity:.72;max-width:36ch;}

/* ---- the competitor comparison ----
   Lives here rather than in a page's own <style> because it appears on two
   pages (Features and Pricing) and has to read identically on both.

   The competitor names are blurred with a CSS filter. That is a PRESENTATION
   choice, not a secret: the names are plain text in the HTML and anyone who
   opens dev tools can read them. It is there so the chart argues about the
   shape of each product rather than picking a fight by name, and so a
   prospect who already has those tabs open recognises them anyway.

   Colour never carries a verdict on its own — every cell has a glyph and
   most have a caption under it, because red-green deficiency is common and
   the whole table would otherwise collapse into "green good, grey bad" for
   those readers. Same rule the floor-plan pins follow in the app. */
.cmp-chart{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.cmp-scroll{overflow-x:auto;}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;}
table.cmp thead th{padding:22px 16px 16px;text-align:center;border-bottom:1px solid var(--border);vertical-align:bottom;}
table.cmp thead th:first-child{text-align:left;width:32%;}
.cmp-brand{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--ink);display:block;}
.cmp-brand.us{color:var(--accent);}
.cmp-brand.blurred{filter:blur(5px);-webkit-filter:blur(5px);user-select:none;}
.cmp-who{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:7px;font-weight:500;
}
.cmp-who.us{color:var(--accent);}
table.cmp tbody th{
  text-align:left;padding:14px 16px;font-size:13.5px;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--border);vertical-align:top;
}
table.cmp tbody td{text-align:center;padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.cmp tbody tr:nth-child(even){background:var(--surface-2);}
table.cmp tbody tr:last-of-type th,table.cmp tbody tr:last-of-type td{border-bottom:none;}
.cmp-mark{font-size:16px;font-weight:700;}
.cmp-mark.yes{color:var(--accent);}
.cmp-mark.partial{color:var(--sev-med);}
.cmp-mark.no{color:var(--ink-3);}
.cmp-fine{display:block;font-size:10.5px;color:var(--ink-3);font-weight:400;margin-top:3px;line-height:1.35;}
tr.cmp-price{background:var(--surface-2);}
tr.cmp-price th{font-weight:600;}
tr.cmp-price td{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-2);
  line-height:1.5;padding-top:16px;padding-bottom:16px;
}
tr.cmp-price td.us{color:var(--ink);font-weight:600;}
.cmp-legend{display:flex;flex-wrap:wrap;gap:20px;margin:16px 2px 0;font-size:12px;color:var(--ink-2);}
.cmp-legend span{display:inline-flex;align-items:center;gap:6px;}
.cmp-legend b{font-weight:700;}
.cmp-legend .yes{color:var(--accent);}
.cmp-legend .partial{color:var(--sev-med);}
.cmp-legend .no{color:var(--ink-3);}
.cmp-note{
  margin-top:18px;padding:14px 18px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;
  font-size:12.5px;color:var(--ink-2);line-height:1.55;
}
.cmp-note strong{color:var(--ink);}

/* ---- footer ---- */
footer{border-top:1px solid var(--border);padding:28px 0 48px;}
.foot-tagline{font-size:12.5px;font-style:italic;color:var(--ink-3);max-width:56ch;margin:0 0 18px;}
.foot-row{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between;}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;}
.foot-links a{font-size:12.5px;color:var(--ink-3);text-decoration:none;}
.foot-links a:hover{color:var(--ink);}
.foot-note{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;}