/* ==========================================================================
   Quilt — design system v4
   Warm paper, black ink. Flat and restrained. Colour only where it means
   something — plus the quilt-block palette, which is the brand motif.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Paper */
  --paper:    #FBF7EE;
  --paper-1:  #F5F0E3;   /* alternating band */
  --paper-2:  #FFFFFF;   /* cards */
  --paper-3:  #EEE8DA;   /* raised / inset */

  /* Lines */
  --hair:     #E7E1D2;
  --hair-2:   #D9D2C0;
  --hair-3:   #BCB5A0;

  /* Ink */
  --tx:       #323232;
  --tx-2:     #55534B;
  --tx-3:     #7A7768;

  /* Functional colour */
  --ok:       #1E7A55;
  --info:     #2C5AA0;
  --note:     #5B47A0;
  --warn:     #96601A;
  --bad:      #A93B2C;

  /* ==== Brand ramps — mirror of BRAND-COLORS.md. That file is the source of
     truth; change it first, then mirror here. Darkest -> lightest, accent last. ==== */
  --green-1:#1E4637; --green-2:#327B50; --green-3:#5EBA83; --green-4:#5EBA83;
  --green-5:#E1F8DE; --green-accent:#5EFF83;

  --purple-1:#412850; --purple-2:#7E4B9B; --purple-3:#B38DC8; --purple-4:#DFCDEA;
  --purple-5:#F3EAF7; --purple-accent:#CA6DFA;

  --rose-1:#4B1937; --rose-2:#BA4561; --rose-3:#E48199; --rose-4:#FFC9D4;
  --rose-5:#FFE8EB; --rose-accent:#FF2995;

  --teal-1:#0F3E4D; --teal-2:#1B7B98; --teal-3:#55AAC3; --teal-4:#A8D9E6;
  --teal-5:#DEF5F8; --teal-accent:#21CBFF;

  --coral-1:#FF9070; --coral-2:#FFCBB8; --coral-3:#FEEDE2; --coral-accent:#FF5F15;

  --yellow-1:#F6D051; --yellow-2:#FCE288; --yellow-3:#FEF1C2; --yellow-accent:#EFFF32;

  /* aliases used across the site */
  --rose:#BA4561;      --rose-pale:#FFE8EB;   --rose-dark:#4B1937;
  --marigold:#F6D051;  --marigold-ink:#323232;
  --sky:#0F3E4D;       --sky-pale:#A8D9E6;
  --tangerine:#FF5F15; --tangerine-pale:#FEEDE2;
  --forest:#1E4637;    --forest-pale:#5EFF83;
  --plum:#412850;      --plum-pale:#DFCDEA;
  --q-rose:#BA4561; --q-yellow:#F6D051; --q-teal:#0F3E4D; --q-sky:#A8D9E6;
  --q-orange:#FF5F15; --q-cream:#FEEDE2; --q-forest:#1E4637; --q-plum:#412850;
  --q-lilac:#DFCDEA; --q-mint:#5EFF83;

  /* Type */
  --display: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gut: clamp(20px, 4.5vw, 48px);
  --sec: clamp(72px, 8vw, 132px);

  --r-sm: 5px;
  --r:    8px;
  --r-lg: 10px;
  --r-xl: 14px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 1px 2px rgba(26,26,23,.04), 0 12px 34px -14px rgba(26,26,23,.14);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; background:var(--paper); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--tx-2);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; color:var(--tx); font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.02; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
hr{ border:0; border-top:1px solid var(--hair); margin:0; }
[id]{ scroll-margin-top:120px; }
:focus-visible{ outline:2px solid var(--tx); outline-offset:3px; border-radius:3px; }
::selection{ background:var(--tx); color:var(--paper); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gut); }
.wrap--tight{ max-width:920px; }
.wrap--prose{ max-width:720px; }
.section{ padding-block:var(--sec); position:relative; }
.section--sm{ padding-block:clamp(48px,6vw,80px); }
.deep{ background:var(--paper); }
.tint{ background:var(--paper-1); }
.rule-top{ border-top:1px solid var(--hair); }

.grid{ display:grid; gap:clamp(16px,2vw,22px); }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .g3,.g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){ .g2,.g3,.g4{ grid-template-columns:minmax(0,1fr); } }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,5vw,84px); align-items:center; }
@media (max-width:940px){ .split{ grid-template-columns:minmax(0,1fr); align-items:start; } }

.stack{ display:grid; gap:14px; }
.stack-lg{ display:grid; gap:24px; }

/* ---------- Type ---------- */
.display{ font-size:clamp(40px,6vw,78px); line-height:1.0; letter-spacing:-.038em; }
.h1{ font-size:clamp(33px,4.4vw,56px); letter-spacing:-.034em; }
.h2{ font-size:clamp(27px,3.2vw,43px); letter-spacing:-.032em; line-height:1.06; }
.h3{ font-size:clamp(19px,1.9vw,25px); letter-spacing:-.028em; line-height:1.16; }
.h4{ font-size:17.5px; letter-spacing:-.024em; line-height:1.24; }
.lede{ font-size:clamp(16.5px,1.55vw,19px); line-height:1.58; color:var(--tx-2); }
.body{ color:var(--tx-2); }
.small{ font-size:14.5px; }
.tiny{ font-size:12.8px; line-height:1.55; }
.muted{ color:var(--tx-3); }
.mono{ font-family:var(--mono); font-size:.88em; letter-spacing:-.02em; }
.hl{ color:var(--tx); }

.eyebrow{ display:block; font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); margin:0 0 18px; }
.divider-label{ display:flex; align-items:center; gap:16px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); margin-bottom:26px; }
.divider-label::after{ content:""; flex:1; height:1px; background:var(--hair); }
.intro{ max-width:760px; margin-inline:auto; text-align:center; }
.intro .lede{ margin-top:18px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r); border:1px solid transparent;
  font-size:14.6px; font-weight:560; letter-spacing:-.01em; text-decoration:none;
  cursor:pointer; white-space:nowrap; transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn--primary{ background:var(--tx); color:var(--paper); font-weight:600; }
.btn--primary:hover{ background:#000; }
.btn--ghost{ background:transparent; color:var(--tx); border-color:var(--hair-2); }
.btn--ghost:hover{ border-color:var(--hair-3); background:rgba(26,26,23,.035); }
/* --lite is the variant for dark surfaces (.cta-band, .tier--featured), where
   --tx resolves light. Hovering to #000 turned a cream button black while its
   text stayed dark. On a dark ground the hover has to brighten. */
.btn--lite{ background:var(--tx); color:var(--paper); font-weight:600; }
.btn--lite:hover{ background:#FFFFFF; }
.btn--sm{ padding:9px 16px; font-size:14px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.arrow-link{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:540; font-size:14.6px; color:var(--tx); transition:gap .18s var(--ease); }
.arrow-link::after{ content:"→"; color:var(--tx-3); transition:color .18s; }
.arrow-link:hover{ gap:10px; }
.arrow-link:hover::after{ color:var(--tx); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.annc{ background:var(--paper-1); border-bottom:1px solid var(--hair); }
.annc a{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:9px 20px; text-decoration:none; font-size:13px; color:var(--tx-3); }
.annc a:hover{ color:var(--tx-2); }
.annc b{ font-weight:560; color:var(--tx); }
.annc .pip{ font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--forest-pale); color:var(--forest); font-weight:700; }
.annc .go{ color:var(--forest); font-weight:560; }

.hdr{ position:sticky; top:0; z-index:80; background:rgba(251,247,238,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .25s; }
.hdr.is-stuck{ border-bottom-color:var(--hair); }
.hdr__in{ display:flex; align-items:center; gap:10px; height:66px; position:relative; }

.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--tx); margin-right:30px; }
.brand__mark{ width:24px; height:24px; flex:none; }
.brand__word{ font-family:var(--display); font-size:23px; font-weight:700; letter-spacing:-.045em; line-height:1; }

.nav{ display:flex; align-items:center; gap:2px; margin-right:auto; }
.nav__item{ position:static; }
.nav__btn{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; cursor:pointer; font-size:14.4px; font-weight:450; color:var(--tx-2); padding:8px 13px; border-radius:7px; transition:color .15s; text-decoration:none; }
.nav__btn:hover, .nav__item.is-open .nav__btn{ color:var(--q-teal); }
.nav__btn[aria-current="page"]{ color:var(--q-teal); font-weight:560; }
.nav__btn svg{ width:10px; height:10px; opacity:.5; transition:transform .2s var(--ease); }
.nav__item.is-open .nav__btn svg{ transform:rotate(180deg); }

.mega{
  position:absolute; top:calc(100% + 10px); left:var(--gut); right:var(--gut);
  background:var(--paper-2); border:1px solid var(--hair-2); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:10px; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mega:not(.mega--wide){ right:auto; width:min(720px, calc(100% - var(--gut) * 2)); }
.mega__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
.mega__grid--3{ grid-template-columns:230px minmax(0,1fr) minmax(0,1fr); }
.mega__rail{ background:var(--paper-1); border:1px solid var(--hair); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:10px; }
.mega__rail h4{ font-size:15px; }
.mega__rail p{ font-size:13px; color:var(--tx-3); line-height:1.5; }
.mega__rail .arrow-link{ font-size:13.2px; margin-top:auto; }
.mega__link{ display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:center; padding:9px 12px; border-radius:7px; text-decoration:none; transition:background .14s; }
.mega__link:hover{ background:var(--paper-1); }
.mega__link .mega__ico{
  width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  background:var(--paper-1); border:1px solid var(--hair); color:var(--tx-2);
  transition:border-color .16s, background .16s;
}
.mega__ico svg{ width:19px; height:19px; display:block; }
.mega__link:hover .mega__ico{ border-color:currentColor; }
/* cycle the patchwork palette across each column */
.mega__link:nth-of-type(1) .mega__ico{ background:var(--sky);       color:var(--sky-pale);       border-color:transparent; }
.mega__link:nth-of-type(2) .mega__ico{ background:var(--forest);    color:var(--forest-pale);    border-color:transparent; }
.mega__link:nth-of-type(3) .mega__ico{ background:var(--rose);      color:var(--rose-pale);      border-color:transparent; }
.mega__link:nth-of-type(4) .mega__ico{ background:var(--tangerine); color:var(--tangerine-pale); border-color:transparent; }
.mega__link:nth-of-type(5) .mega__ico{ background:var(--plum);      color:var(--plum-pale);      border-color:transparent; }
.mega__link:hover .mega__ico{ border-color:transparent; }
.mega__link b{ line-height:1.3; }
.mega__link b{ display:block; font-size:14px; font-weight:540; color:var(--tx); letter-spacing:-.014em; }
/* scope to the description only — a bare `.mega__link span` also matches
   .mega__ico and silently overrides its display:grid */
.mega__link > span + span{ display:block; min-width:0; }
.mega__link b + span{ display:block; font-size:12.4px; color:var(--tx-3); line-height:1.42; margin-top:2px; }
.mega__head{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); padding:12px 13px 6px; font-weight:500; }
.mega__foot{ margin-top:6px; padding:13px 16px; border-top:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--tx-3); }

.hdr__cta{ display:flex; align-items:center; gap:8px; }
.hdr__cta .login{ font-size:14.4px; font-weight:450; color:var(--tx-2); text-decoration:none; padding:8px 12px; }
.hdr__cta .login:hover{ color:var(--tx); }

.burger{ display:none; width:40px; height:40px; border:1px solid var(--hair-2); border-radius:9px; background:transparent; cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:16px; height:1.5px; background:var(--tx); position:relative; transition:.2s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--tx); transition:.2s var(--ease); }
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
@media (max-width:1080px){ .nav{ display:none; } .burger{ display:flex; } .brand{ margin-right:auto; } }
@media (max-width:560px){ .hdr__cta .login{ display:none; } }

.mobnav{ display:none; border-top:1px solid var(--hair); background:var(--paper); max-height:calc(100vh - 110px); overflow-y:auto; }
.mobnav.is-open{ display:block; }
.mobnav ul{ list-style:none; padding:10px var(--gut) 26px; }
.mobnav a{ display:block; padding:12px 0; text-decoration:none; font-size:16.5px; font-family:var(--display); font-weight:600; border-bottom:1px solid var(--hair); color:var(--tx); }
.mobnav .sub{ font-size:14px; font-family:var(--sans); font-weight:400; color:var(--tx-2); padding-left:14px; }
.mobnav .btn{ width:100%; margin-top:18px; }

.skip{ position:absolute; left:-9999px; top:8px; z-index:200; background:var(--tx); color:var(--paper); padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600; }
.skip:focus{ left:12px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; padding-top:clamp(64px,8vw,116px); padding-bottom:clamp(40px,5vw,60px); }
.hero__head{ max-width:1040px; margin-inline:auto; text-align:center; }
.hero__sub{ max-width:620px; margin:22px auto 0; }
.hero .btn-row{ justify-content:center; }
.hero__bg, .hero__aura, .hero__grid{ display:none; }

.pill{ display:inline-flex; align-items:center; gap:9px; padding:5px 14px 5px 5px; border-radius:999px; border:1px solid var(--hair-2); background:var(--paper-2); font-size:12.8px; color:var(--tx-2); text-decoration:none; margin-bottom:26px; transition:border-color .18s, color .18s; }
.pill:hover{ border-color:var(--hair-3); color:var(--tx); }
.pill em{ font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--paper-3); color:var(--tx-2); font-weight:600; }
.pill b{ color:var(--tx); font-weight:520; }

/* ==========================================================================
   SURFACES
   ========================================================================== */
.card{ background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(22px,2.2vw,28px); position:relative; transition:border-color .2s var(--ease); }
.card--hover:hover{ border-color:var(--hair-3); }
.card h3{ margin-bottom:9px; }
.card__n{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); margin-bottom:14px; font-weight:500; }
.card--accent{ background:var(--paper-1); border-color:var(--hair-2); }
.card--solid{ background:var(--paper-3); border-color:var(--hair-2); }

/* Text block beside a trailing link. Stacks below 760px so the copy keeps a
   readable measure instead of squeezing into a narrow column. */
.card--split{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
@media (max-width:760px){
  .card--split{ grid-template-columns:1fr; gap:18px; align-items:start; }
}
.tint .card{ background:var(--paper-2); }

.icon-badge{ width:38px; height:38px; border-radius:9px; display:grid; place-items:center; margin-bottom:18px; background:var(--paper-1); color:var(--tx-2); border:1px solid var(--hair); font-size:13px; font-weight:600; }
.icon-badge svg{ width:18px; height:18px; }

.cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.cols > div{ padding:0 clamp(16px,2vw,28px); border-left:1px solid var(--hair); text-align:center; }
.cols > div:first-child{ border-left:0; }
.cols .n{ display:block; font-size:11px; letter-spacing:.18em; color:var(--tx-3); margin-bottom:14px; font-weight:500; }
.cols h3{ font-size:19px; letter-spacing:-.024em; margin-bottom:10px; }
.cols p{ font-size:14.2px; color:var(--tx-2); }
@media (max-width:900px){ .cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 0; } .cols > div:nth-child(odd){ border-left:0; } }
@media (max-width:520px){ .cols{ grid-template-columns:1fr; } .cols > div{ border-left:0; padding:0; } }

/* ---------- Checks ---------- */
.checks{ list-style:none; display:grid; gap:12px; }
.checks li{ position:relative; padding-left:29px; font-size:15.2px; color:var(--tx-2); }
.checks li b{ color:var(--tx); font-weight:560; }
/* brand green rgb(94,255,131) as the disc, Forest as the tick — the green reads
   at 8.1:1 this way, where a bare stroke on paper measures 1.2:1 */
.checks li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background-color:#5EFF83;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4637' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-repeat:no-repeat; background-position:center;
}
/* crosses stay a plain red mark — they must not inherit the green disc above */
.crosses li::before{
  background-color:transparent; border-radius:0; top:4px; width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A93B2C' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size:14px;
}
/* on dark surfaces the red needs to lift off the ground */
.card--dark .crosses li::before, .panel .crosses li::before, .app .crosses li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A7A' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* ---------- Chips / tags ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:7px; border:1px solid var(--hair); font-size:13px; font-weight:450; color:var(--tx-2); background:var(--paper-2); transition:border-color .18s, color .18s; }
.chip:hover{ border-color:var(--hair-2); color:var(--tx); }
.chip--accent{ color:var(--tx); border-color:var(--hair-2); background:var(--paper-1); }

.tag{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:5px; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; border:1px solid transparent; white-space:nowrap; justify-self:start; align-self:start; width:fit-content; }
/* Fills were .09 and borders .22, which read as washed out at 10px uppercase.
   The text always passed contrast; the chip itself had no presence. */
.tag--fact{    background:rgba(30,122,85,.14);  color:var(--ok);   border-color:rgba(30,122,85,.42); }
.tag--calc{    background:rgba(44,90,160,.14);  color:var(--info); border-color:rgba(44,90,160,.42); }
.tag--infer{   background:rgba(91,71,160,.14);  color:var(--note); border-color:rgba(91,71,160,.42); }
.tag--rec{     background:rgba(150,96,26,.14);  color:var(--warn); border-color:rgba(150,96,26,.42); }
.tag--unknown{ background:var(--paper-3);       color:var(--tx-2); border-color:var(--hair-2); }
.tag--deny{    background:rgba(169,59,44,.14);  color:var(--bad);  border-color:rgba(169,59,44,.42); }
.tag--allow{   background:rgba(30,122,85,.14);  color:var(--ok);   border-color:rgba(30,122,85,.42); }

/* ---------- Strip / logos ---------- */
.strip{ border-block:1px solid var(--hair); background:var(--paper); }
.strip__in{ display:flex; align-items:center; gap:10px 26px; flex-wrap:wrap; padding-block:16px; }
.strip__label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); font-weight:500; }
.strip__item{ display:inline-flex; align-items:center; gap:7px; font-size:13.4px; color:var(--tx-2); }
.strip__item svg{ width:14px; height:14px; color:var(--tx-3); flex:none; }

.logos{ display:flex; align-items:center; gap:clamp(22px,3.6vw,52px); flex-wrap:wrap; justify-content:center; }
.logos span{ font-family:var(--display); font-size:clamp(15px,1.6vw,18px); font-weight:600; letter-spacing:-.03em; color:var(--tx-3); transition:color .2s; }
.logos span:hover{ color:var(--tx-2); }

.stat b{ display:block; font-family:var(--display); font-size:clamp(36px,4.6vw,56px); font-weight:700; letter-spacing:-.045em; line-height:1; color:var(--tx); }
.stat span{ display:block; margin-top:12px; font-size:14px; color:var(--tx-3); max-width:26ch; }

/* ==========================================================================
   THE APP — dark, calm, Claude-like
   ========================================================================== */
.app, .panel, .draft, .doc{
  --paper:#141414; --paper-1:#1B1B1B; --paper-2:#141414; --paper-3:#232323;
  --hair:#262626; --hair-2:#333333; --hair-3:#484848;
  --tx:#F6F4EF; --tx-2:#A5A19A; --tx-3:#76726B;
  color:var(--tx-2);
}
.app{
  border-radius:var(--r-xl); border:1px solid #242424; background:#141414; color:var(--tx-2);
  box-shadow:0 2px 6px rgba(26,26,23,.05), 0 28px 64px -30px rgba(26,26,23,.35);
  overflow:hidden; display:grid; grid-template-columns:216px minmax(0,1fr); min-height:540px;
}
.app--bare{ grid-template-columns:minmax(0,1fr); min-height:0; }

/* sidebar — logo, new question, a few recents. Nothing else. */
.app__side{ border-right:1px solid var(--hair); background:#181818; padding:20px 12px; display:flex; flex-direction:column; gap:26px; }
.app__brand{ display:flex; align-items:center; gap:9px; padding:0 10px; }
.app__brand svg{ width:19px; height:19px; flex:none; }
.app__brand b{ font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.045em; color:var(--tx); }
.app__new{ display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--hair-2); border-radius:7px; font-size:13px; color:var(--tx-2); }
.app__new svg{ width:13px; height:13px; }
.app__grp{ display:grid; gap:1px; }
.app__grp h5{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3); font-weight:500; margin:0 0 9px; padding-left:11px; }
.app__conv{ display:block; padding:7px 11px; border-radius:6px; font-size:13px; color:var(--tx-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app__conv.is-on{ background:#232323; color:var(--tx); }

/* main column */
.app__main{ display:flex; flex-direction:column; min-width:0; }
.app__bar{ display:flex; align-items:center; gap:11px; padding:14px 26px; border-bottom:1px solid var(--hair); }
.app__title{ font-size:13px; color:var(--tx-2); letter-spacing:-.01em; }
.app__dots{ display:none; }
.app__who{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--tx-3); }
.avatar{ width:20px; height:20px; border-radius:50%; background:#2E2E2E; color:var(--tx-2); display:grid; place-items:center; font-size:8.5px; font-weight:700; flex:none; }

.app__body, .chat{ padding:26px clamp(20px,2.4vw,32px); flex:1; min-width:0; }
.chat{ display:grid; gap:26px; align-content:start; }

/* messages */
.msg--user{ justify-self:end; max-width:78%; background:#232323; border-radius:12px 12px 3px 12px; padding:11px 16px; }
.msg--user p{ font-size:15px; color:var(--tx); line-height:1.5; }
.msg--bot{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:15px; }
.msg__mark{ width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; background:var(--paper-3); }
.msg__mark svg,.msg__mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.msg__body{ min-width:0; display:grid; gap:16px; }

/* one quiet line instead of a box of steps */
.srcline{ display:flex; align-items:center; gap:9px; font-size:12.4px; color:var(--tx-3); }
.srcline svg{ width:13px; height:13px; flex:none; color:#5EFF83; }
.srcline b{ color:var(--tx-2); font-weight:500; }
.srcline .lbl{ margin-right:5px; }
.srcline span{ min-width:0; }
.steps{ display:none; }

/* answer — plain text, labels as small caps, no boxes */
.answer{ display:grid; gap:14px; animation:fadeIn .4s var(--ease) both; padding:0; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.answer p{ font-size:15.2px; line-height:1.65; color:var(--tx-2); }
.answer b{ color:var(--tx); font-weight:600; }
.answer ul{ list-style:none; display:grid; gap:9px; }
.answer ul li{ position:relative; padding-left:17px; font-size:14.8px; color:var(--tx-2); line-height:1.6; }
.answer ul li::before{ content:""; position:absolute; left:2px; top:9px; width:4px; height:4px; border-radius:50%; background:var(--tx-3); }

.lbl{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; margin-right:9px; }
.lbl--fact{  color:#5FD3A0; }
.lbl--calc{  color:#93B8F0; }
.lbl--infer{ color:#B6ABEF; }
.lbl--rec{   color:#E7BA63; }
.lbl--none{  color:var(--tx-3); }

.ref{ font-size:9.5px; font-weight:700; color:var(--tx-3); vertical-align:super; margin-left:2px; letter-spacing:.02em; }
.refs{ border-top:1px solid var(--hair); padding-top:13px; display:grid; gap:5px; }
.refs span{ font-size:11.4px; color:var(--tx-3); }
.refs b{ color:var(--tx-2); font-weight:500; margin-right:6px; }

.cite{ font-size:11.4px; color:var(--tx-3); text-decoration:none; border-bottom:1px solid var(--hair-2); }
.cite:hover{ color:var(--tx-2); }

.callout{ border-left:2px solid var(--hair-3); padding:2px 0 2px 16px; font-size:14.4px; color:var(--tx-2); background:none; border-radius:0; }
.callout b{ color:var(--tx); }
.callout--deny{ border-left-color:#E5645A; }
.callout--warn{ border-left-color:#E3A72F; }

/* agent attribution — one quiet line */
.byline{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12px; color:var(--tx-3); }
.byline__l{ font-size:12px; letter-spacing:0; text-transform:none; color:var(--tx-3); font-weight:400; }
.agent-chip{ display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; font-size:12px; color:var(--tx-2); }
.agent-chip svg,.agent-chip img{ width:18px; height:18px; flex:none; border-radius:50%; object-fit:cover; display:block; }
.agent-chip b{ color:var(--tx-2); font-weight:500; }

.card--dark .layer p{ color:var(--tx-2); }
.card--dark .divider-label, .panel .divider-label{ color:var(--tx-2); }

/* provenance tags stay boxed on the marketing pages, quiet inside the app */
.app .tag{ background:none; border:0; padding:0; font-size:10px; letter-spacing:.15em; font-weight:700; }
.app .tag--fact,.app .tag--allow{ color:#5FD3A0; }
.app .tag--calc{ color:#93B8F0; }
.app .tag--infer{ color:#B6ABEF; }
.app .tag--rec{ color:#E7BA63; }
.app .tag--deny{ color:#EE8F86; }
.app .tag--unknown{ color:var(--tx-3); }

/* composer */
.composer{ padding:0 clamp(20px,2.4vw,32px) 24px; margin-top:auto; }
/* the workflow list lives in the sidebar, styled as recent conversations */
.ask{ display:grid; gap:1px; }
.ask__btn{
  display:block; width:100%; text-align:left; border:0; background:none;
  padding:7px 11px; border-radius:6px; font-size:12.8px; color:var(--tx-2);
  cursor:pointer; transition:background .14s, color .14s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ask__btn:hover{ background:rgba(255,255,255,.04); color:var(--tx); }
.ask__btn[aria-selected="true"]{ background:#232323; color:var(--tx); font-weight:520; }
.composer__box{ border:1px solid var(--hair-2); border-radius:12px; padding:13px 15px; display:flex; align-items:center; gap:12px; }
.composer__in{ font-size:14.6px; color:var(--tx-3); flex:1; }
.composer__row{ display:contents; }
.composer__scope{ display:none; }
.composer__send{ width:28px; height:28px; border-radius:7px; background:#2E2E2E; color:var(--tx-2); display:grid; place-items:center; border:0; flex:none; }
.composer__send svg{ width:14px; height:14px; }

.demo-note{ display:flex; align-items:flex-start; gap:8px; margin-top:16px; font-size:12.4px; color:var(--tx-3); }
.demo-note svg{ width:13px; height:13px; flex:none; margin-top:2px; }
.float, .app-strap, .app__agent, .app__side-foot, .tooluse{ display:none; }

@media (max-width:900px){
  .app{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .app__side{ display:none; }
}

/* ---------- Role switcher ---------- */
.roles{ display:flex; flex-wrap:wrap; gap:8px; }
.role-btn{ border:1px solid var(--hair-2); background:var(--paper-2); color:var(--tx-2); border-radius:9px; padding:11px 15px; cursor:pointer; text-align:left; line-height:1.24; transition:.18s var(--ease); flex:1 1 150px; }
.role-btn b{ display:block; font-size:14px; font-weight:560; color:var(--tx); }
.role-btn span{ display:block; font-size:11.6px; color:var(--tx-3); margin-top:3px; }
.role-btn:hover{ border-color:var(--hair-3); }
.role-btn[aria-selected="true"]{ background:var(--tx); border-color:var(--tx); }
.role-btn[aria-selected="true"] b{ color:var(--paper); }
.role-btn[aria-selected="true"] span{ color:rgba(251,247,238,.62); }

/* ---------- Pipeline ---------- */
.pipe{ list-style:none; display:grid; counter-reset:p; }
.pipe li{ display:grid; grid-template-columns:38px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--hair); align-items:start; }
.pipe li:last-child{ border-bottom:0; }
.pipe li::before{ counter-increment:p; content:counter(p,decimal-leading-zero); font-size:11.5px; color:var(--tx-3); padding-top:4px; letter-spacing:.1em; font-weight:500; }
.pipe b{ display:block; font-size:15.6px; font-weight:600; margin-bottom:4px; color:var(--tx); letter-spacing:-.026em; font-family:var(--display); }
.pipe span{ font-size:14px; color:var(--tx-2); }
.pipe .who{ display:inline-block; margin-top:8px; font-size:9.8px; letter-spacing:.13em; text-transform:uppercase; padding:3px 8px; border-radius:4px; font-weight:600; }
.who.who--code{ background:var(--paper-3); color:var(--tx-2); }
.who.who--model{ background:rgba(91,71,160,.1); color:var(--note); }

/* ---------- Layers ---------- */
.layers{ display:grid; gap:8px; }
.layer{ border:1px solid var(--hair); border-radius:var(--r); padding:17px 20px; background:var(--paper-2); display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; transition:border-color .2s; }
.layer:hover{ border-color:var(--hair-3); }
.layer b{ font-size:15.2px; font-weight:600; letter-spacing:-.026em; color:var(--tx); font-family:var(--display); }
.layer p{ font-size:13.6px; color:var(--tx-3); margin-top:3px; }
.layer--foundation{ background:var(--tx); border-color:var(--tx); }
.layer--foundation b{ color:var(--paper); }
.layer--foundation p{ color:rgba(251,247,238,.66); }
.layer--foundation .arrow-link{ color:var(--paper); }
.layer--foundation .arrow-link::after{ color:rgba(251,247,238,.6); }

/* ---------- Accordion ---------- */
.acc{ border-top:1px solid var(--hair); }
.acc details{ border-bottom:1px solid var(--hair); }
.acc summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-family:var(--display); font-size:clamp(16.5px,1.7vw,19px); font-weight:600; letter-spacing:-.03em; color:var(--tx); transition:color .18s; }
.acc summary:hover{ color:var(--tx-2); }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-6px;
  background:var(--tx-3); transition:transform .25s var(--ease), background .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.acc details[open] summary::after{ transform:rotate(45deg); background:var(--tx); }
.acc .acc__body{ padding:0 8% 26px 0; color:var(--tx-2); font-size:15.2px; display:grid; gap:12px; }

/* ---------- Tables ---------- */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--paper-2); }
table{ width:100%; border-collapse:collapse; min-width:620px; }
th,td{ text-align:left; padding:15px 19px; border-bottom:1px solid var(--hair); font-size:14.2px; vertical-align:top; color:var(--tx-2); }
th{ font-size:10.4px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); font-weight:500; background:var(--paper-1); }
tr:last-child td{ border-bottom:0; }
td b{ font-weight:600; color:var(--tx); }
tbody tr:hover{ background:var(--paper-1); }

.code{ margin:0; padding:24px; font-family:var(--mono); font-size:12.4px; line-height:1.85; overflow-x:auto; color:var(--tx-2); background:var(--paper-1); }
.code .c{ color:var(--tx-3); }

.pull{ font-family:var(--display); font-size:clamp(21px,2.7vw,31px); line-height:1.18; letter-spacing:-.036em; text-wrap:balance; color:var(--tx); font-weight:600; }
.pull-meta{ margin-top:16px; font-size:13px; color:var(--tx-3); }
.cta-band{ position:relative; }

/* ---------- Forms ---------- */
.field{ display:grid; gap:7px; }
.field label{ font-size:12.8px; font-weight:560; color:var(--tx); }
.field .hint{ font-size:12.2px; color:var(--tx-3); }
.field input,.field select,.field textarea{ width:100%; padding:12px 14px; border-radius:9px; border:1px solid var(--hair-2); background:var(--paper-2); font-size:14.8px; color:var(--tx); transition:border-color .16s, box-shadow .16s; }
.field input::placeholder,.field textarea::placeholder{ color:var(--tx-3); }
.field textarea{ min-height:112px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--tx); box-shadow:0 0 0 3px rgba(26,26,23,.07); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7768' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:14px; padding-right:38px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:660px){ .form-grid{ grid-template-columns:1fr; } }
.form-note{ font-size:12.4px; color:var(--tx-3); }
.form-ok{ display:none; border:1px solid var(--hair-2); background:var(--paper-1); border-radius:var(--r-lg); padding:24px; }
.form-ok.is-on{ display:block; }

/* ---------- Footer ---------- */
.ftr{ background:var(--paper-1); border-top:1px solid var(--hair); color:var(--tx-2); padding-block:clamp(48px,6vw,72px) 30px; }
.ftr a{ color:var(--tx-3); text-decoration:none; font-size:14px; transition:color .16s; }
.ftr a:hover{ color:var(--tx); }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr)); gap:30px; padding-bottom:40px; border-bottom:1px solid var(--hair); }
@media (max-width:940px){ .ftr__top{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:600px){ .ftr__top{ grid-template-columns:1fr 1fr; } }
.ftr h4{ font-size:10.4px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); font-weight:500; margin-bottom:15px; font-family:var(--sans); }
.ftr ul{ list-style:none; display:grid; gap:10px; }
.ftr__bot{ display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; padding-top:24px; font-size:12.4px; color:var(--tx-3); }
.ftr .brand{ margin-bottom:14px; }

/* ---------- Agents ---------- */
.agents{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
@media (max-width:1280px){ .agents{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
@media (max-width:820px){ .agents{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Below 560px this used to drop to one column, which made every portrait a
   ~348px square — six of them was ~2,900px of scrolling before the section
   ended. Staying 2-up keeps the 1:1 crop exactly as rendered (the crop is
   settled; don't reshape .agent__face to save height) and halves the run. */
@media (max-width:560px){ .agents{ gap:10px; } }

.agent{
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .22s var(--ease);
}
.agent:hover{ border-color:var(--hair-3); }

.agent__face{
  aspect-ratio:1/1; background:var(--paper-1); border-bottom:1px solid var(--hair);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
/* photographic portrait — full bleed, background left solid as rendered */
.agent__face img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; }
/* geometric stand-in until a portrait exists */
.agent__face--block{ background:var(--q-cream); }
.agent__face svg{ width:100%; height:100%; display:block; }
@media (prefers-reduced-motion: reduce){ .agent:hover .agent__face svg{ transform:none; } }

.agent__badge{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2;
  background:#323232; color:#fff; border-radius:8px;
  padding:6px 11px; font-size:11.2px; font-weight:600; letter-spacing:-.012em;
  white-space:nowrap; max-width:calc(100% - 18px); overflow:hidden; text-overflow:ellipsis;
}
.agent__badge i{ font-style:normal; opacity:.45; margin:0 6px; font-weight:400; }
.agent__body{ padding:16px 17px 17px; display:flex; flex-direction:column; gap:13px; flex:1; }
.agent__body p{ font-size:13.2px; color:var(--tx-2); line-height:1.55; }
.agent__src{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--hair);
  font-family:var(--mono); font-size:9.8px; color:var(--tx-3); line-height:1.5;
}

/* ---------- Reveal + utilities ---------- */
.rv{ opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .steps li{ animation:none; opacity:1; transform:none; }
  .answer{ animation:none; }
}
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:44px; }
.nowrap{ white-space:nowrap; }
.relative{ position:relative; }

@media (max-width:760px){ .br-lg{ display:none; } .split{ gap:36px; } }
@media (max-width:580px){
  body{ font-size:15.5px; }
  .app__who{ display:none; }
  .steps li{ grid-template-columns:15px 1fr; }
  .steps .src{ display:none; }
  .msg--user{ max-width:92%; }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .code{ padding:16px; font-size:11.4px; }
  .annc__more{ display:none; }
}



/* ---------- Indexed columns (editorial, rule-topped) ---------- */
.idx{ border-top:1px solid var(--tx); padding-top:20px; display:grid; gap:11px; align-content:start; }
.idx__patch{ width:14px; height:14px; border-radius:2px; background:var(--c, var(--q-teal)); display:block; }
.idx__n{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); font-weight:500; }
.idx h3{ font-size:20px; letter-spacing:-.028em; line-height:1.14; }
.idx p{ font-size:14.6px; color:var(--tx-2); }


/* ---------- Message cards (permissions) ---------- */
.msgcard{ background:#1B1B1B; border:1px solid var(--hair); border-radius:var(--r-lg); padding:15px 17px; display:grid; gap:10px; }
.msgcard--stopped{ background:#141414; }
.msgcard__top{ display:flex; align-items:center; gap:11px; }
.msgcard__av{ width:31px; height:31px; border-radius:50%; flex:none; background:var(--paper-3); display:grid; place-items:center; font-size:10.5px; font-weight:700; color:var(--tx-2); letter-spacing:.02em; }
.msgcard__who b{ display:block; font-size:14.2px; font-weight:600; color:var(--tx); line-height:1.2; }
.msgcard__who span{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--tx-3); margin-top:3px; }
.msgcard__top .tag{ margin-left:auto; }
.msgcard p{ font-size:14.6px; color:var(--tx-2); line-height:1.55; }
.msgcard__scope{ font-family:var(--mono); font-size:10.2px; color:var(--tx-3); }

/* ---------- Labelled fact cards (sources) ---------- */
.factcard{ background:#1B1B1B; border:1px solid var(--hair); border-radius:var(--r-lg); padding:14px 17px; display:grid; gap:9px; }
.factcard__h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.factcard__meta{ font-family:var(--mono); font-size:10.2px; color:var(--tx-3); }
.factcard p{ font-size:14.8px; color:var(--tx); line-height:1.55; }

/* ---------- Draft queue mock ---------- */
.draft{ border:1px solid #242424; border-radius:var(--r-lg); overflow:hidden; background:#141414; }
.draft__bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--hair); background:var(--paper-1); font-size:13px; color:var(--tx-2); }
.draft__bar b{ color:var(--tx); font-weight:600; }
.draft__bar .mono{ font-size:10.5px; color:var(--tx-3); }
.draft__bar .right{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--tx-3); }
.draft__body{ display:grid; grid-template-columns:210px minmax(0,1fr); }
@media (max-width:760px){ .draft__body{ grid-template-columns:minmax(0,1fr); } .draft__list{ border-right:0!important; } }
.draft__list{ border-right:1px solid var(--hair); }
.draft__row{ display:flex; justify-content:space-between; gap:10px; padding:10px 17px; font-size:13px; color:var(--tx-2); border-bottom:1px solid var(--hair); }
.draft__row.is-on{ background:var(--paper-3); color:var(--tx); font-weight:520; }
.draft__row:last-child{ border-bottom:0; color:var(--tx-3); }
.draft__letter{ padding:18px 20px; display:grid; gap:14px; align-content:start; }
.draft__letter p{ font-size:14.6px; color:var(--tx-2); line-height:1.6; }
.draft__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ---------- Document mock ---------- */
.doc{ border:1px solid #262626; border-radius:var(--r); background:#1B1B1B; padding:15px 17px; display:grid; gap:8px; }
.doc b{ font-size:13.4px; color:var(--tx); font-weight:600; }
.doc span{ font-size:13px; color:var(--tx-2); }
.doc .last{ font-family:var(--mono); font-size:10.5px; color:var(--tx-3); padding-top:7px; border-top:1px solid var(--hair); margin-top:3px; }

/* ---------- Quilt tile used as a section marker ---------- */
.tile{ width:52px; height:52px; border-radius:6px; overflow:hidden; display:block; margin:0 auto 18px; border:1px solid var(--hair); }
.tile svg{ width:100%; height:100%; display:block; }

/* dark product panels sit directly on the page */
.panel{ display:grid; gap:10px; }
.panel .msgcard, .panel .factcard{ border-color:#262626; }
.panel .tag--allow, .card--dark .tag--allow{ background:rgba(94,255,131,.12); color:var(--forest-pale); border-color:rgba(94,255,131,.26); }
.panel .tag--deny,  .card--dark .tag--deny{  background:var(--rose); color:var(--rose-pale); border-color:var(--rose); }
.panel .tag--fact,  .card--dark .tag--fact{  background:rgba(94,255,131,.12); color:var(--forest-pale); border-color:rgba(94,255,131,.26); }
.panel .tag--calc,  .card--dark .tag--calc{  background:rgba(168,217,230,.14); color:var(--sky-pale);   border-color:rgba(168,217,230,.28); }
.panel .tag--infer, .card--dark .tag--infer{ background:rgba(223,205,234,.14); color:var(--plum-pale);  border-color:rgba(223,205,234,.28); }
.panel .tag--rec,   .card--dark .tag--rec{   background:rgba(246,208,81,.14);  color:var(--marigold);   border-color:rgba(246,208,81,.28); }
/* --tx-3 on a dark panel is 3.3:1; step it up. The others above are the
   brand pale partners, which already carry on a deep ground. */
.panel .tag--unknown, .card--dark .tag--unknown{ color:var(--tx-2); background:var(--paper-3); border-color:var(--hair-2); }
.draft .tag--rec{   background:rgba(246,208,81,.14);  color:var(--marigold);   border-color:rgba(246,208,81,.28); }
.draft__bar{ background:#1B1B1B; border-bottom-color:#262626; }
.draft .btn--primary{ background:var(--forest-pale); color:var(--forest); }
.draft .btn--ghost{ color:#F6F4EF; border-color:#3A3A3A; }
.msgcard__av{ font-size:16px; background:#262626; }

/* "create your own" agent tile */


/* ---------- Block strip ---------- */
/* A band of quilt blocks. Brand book: "use strips as header or footer bands."
   Reusable — drop it anywhere a horizontal band of pattern is wanted. */
.blockstrip{ display:flex; border-radius:6px; overflow:hidden; width:100%; }
.blockstrip svg{ flex:1 1 0; min-width:0; aspect-ratio:1/1; height:auto; display:block; }
.mega__rail .blockstrip{ margin-top:2px; }

/* ---------- Tile hover ---------- */
.tile{ position:relative; width:64px; height:64px; }
.tile svg{
  width:100%; height:100%; display:block;
  transition:transform .6s cubic-bezier(.34,1.4,.4,1);
}
.cols > div:hover .tile svg{ transform:rotate(90deg) scale(1.09); }
@media (prefers-reduced-motion: reduce){
  .tile svg{ transition:none; }
  .cols > div:hover .tile svg{ transform:none; }
}


/* ---------- Coloured panes — one brand pair per pane ---------- */
.pane{
  border-radius:var(--r-lg); padding:24px 22px 26px; display:flex; flex-direction:column; gap:10px;
  background:var(--pane-bg); color:var(--pane-ink); min-height:220px;
  transition:transform .25s var(--ease);
}
.pane:hover{ transform:translateY(-3px); }
.pane__n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--pane-ink); opacity:.75; }
.pane h3{ font-size:20px; letter-spacing:-.028em; line-height:1.15; color:var(--pane-accent); margin:0; }
.pane__ico{ display:block; width:24px; height:24px; color:var(--pane-accent); }
.pane__ico svg{ width:100%; height:100%; display:block; }
.pane__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.pane p{ font-size:14.4px; line-height:1.55; color:var(--pane-ink); opacity:.86; }

.pane--sky{    --pane-bg:var(--teal-1);   --pane-ink:var(--teal-4);   --pane-accent:var(--teal-accent); }
.pane--plum{   --pane-bg:var(--purple-1); --pane-ink:var(--purple-4); --pane-accent:var(--purple-accent); }
.pane--rose{   --pane-bg:var(--rose-1);   --pane-ink:var(--rose-4);   --pane-accent:var(--rose-accent); }
.pane--forest{ --pane-bg:var(--green-1);  --pane-ink:var(--green-5);  --pane-accent:var(--green-accent); }

/* ---------- Input lanes — your data / your rules / the field ---------- */
.lanes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
@media (max-width:700px){ .lanes{ grid-template-columns:minmax(0,1fr); } }
.lane{ background:#181818; padding:10px 13px; display:grid; gap:4px; }
.lane span{ font-family:var(--mono); font-size:9.4px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }
.lane b{ font-size:12.4px; font-weight:450; color:var(--tx-2); line-height:1.4; }

/* ---------- Offered action inside an answer ---------- */
/* ---------- Live source trace: the work, shown as it happens ---------- */
.trace{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
.trace__r{
  background:#181818; display:grid; grid-template-columns:20px auto minmax(0,1fr) 15px;
  align-items:center; gap:11px; padding:9px 13px;
  animation:traceIn .3s var(--ease) both;
}
.trace__r img, .trace__r svg:first-child{ width:20px; height:20px; border-radius:50%; object-fit:cover; display:block; }
.trace__r b{ font-size:12.6px; font-weight:600; color:var(--tx); letter-spacing:-.01em; white-space:nowrap; }
.trace__d{ font-family:var(--mono); font-size:10.5px; color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trace__st{ width:15px; height:15px; border-radius:50%; border:1.5px solid #3A3A3A; border-top-color:#5EFF83; display:block; }
.trace__r.is-run .trace__st{ animation:spin .62s linear infinite; }
.trace__r.is-run .trace__st svg{ display:none; }
.trace__r.is-ok .trace__st{ border-color:transparent; animation:none; color:#5EFF83; }
.trace__r.is-ok .trace__st svg{ width:15px; height:15px; display:block; }
@keyframes traceIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* the finding, stated before the evidence */
.answer__lead{
  font-family:var(--display); font-size:clamp(17.5px,1.55vw,20.5px); font-weight:650;
  letter-spacing:-.025em; line-height:1.34; color:var(--tx);
  border-left:2px solid #5EFF83; padding-left:15px;
}

.statbar{ display:flex; flex-wrap:wrap; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
.statbar__i{ background:#181818; flex:1 1 110px; padding:11px 14px; display:grid; gap:3px; }
.statbar__i b{ font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.035em; color:var(--tx); line-height:1.1; }
.statbar__i span{ font-family:var(--mono); font-size:9.4px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3); }
.statbar__k{ background:#141414; flex:1 1 100%; padding:11px 14px; font-size:12.9px; line-height:1.5; color:var(--tx-2); }

/* composer types the question before it sends */
.composer__in.is-typing{ color:var(--tx); }
.composer__in.is-typing::after{
  content:""; display:inline-block; width:1.5px; height:1em; background:#5EFF83;
  margin-left:2px; vertical-align:-2px; animation:caret .9s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

.act{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:2px; }
.act__btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:8px;
  background:var(--tx); color:#141414; font-size:13.4px; font-weight:600; white-space:nowrap;
}
.act__btn::before{
  content:""; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.act__note{ font-family:var(--mono); font-size:10.4px; color:var(--tx-3); line-height:1.5; flex:1 1 220px; }

.demo-note--center{ justify-content:center; text-align:center; max-width:70ch; margin-inline:auto; }

/* dark card on the light page */
.card--dark{
  --paper:#141414; --paper-1:#1B1B1B; --paper-2:#141414; --paper-3:#232323;
  --hair:#262626; --hair-2:#333333; --hair-3:#484848;
  --tx:#F6F4EF; --tx-2:#A5A19A; --tx-3:#76726B;
  background:#141414; border-color:#242424; color:var(--tx-2);
}
.card--dark h3,.card--dark h4{ color:var(--tx); }
.card--dark .arrow-link{ color:var(--tx); }
.card--dark .arrow-link::after{ color:var(--tx-3); }

/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */
.ig-meta{ margin-top:20px; font-size:15px; color:var(--tx-2); display:flex; align-items:center; gap:10px; }
.ig-meta b{ font-weight:600; color:var(--tx); }
.ig-meta span{ color:var(--tx-3); }

.ig-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:900px){ .ig-layout{ grid-template-columns:minmax(0,1fr); gap:26px; } }

.ig-rail{ position:sticky; top:96px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:900px){ .ig-rail{ position:static; } }

.ig-search{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--hair-2); border-radius:11px; background:var(--paper-2); padding:10px 13px;
  transition:border-color .16s, box-shadow .16s;
}
.ig-search:focus-within{ border-color:var(--tx); box-shadow:0 0 0 3px rgba(50,50,50,.07); }
.ig-search svg{ width:16px; height:16px; color:var(--tx-3); flex:none; }
.ig-search input{ border:0; background:none; outline:none; width:100%; font-size:14.6px; }
.ig-search input::placeholder{ color:var(--tx-3); }
.ig-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

.ig-cats{ display:flex; flex-direction:column; border-left:1px solid var(--hair-2); }
@media (max-width:900px){ .ig-cats{ flex-direction:row; flex-wrap:wrap; border-left:0; gap:6px; } }
.ig-filter{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  border:0; border-left:2px solid transparent; margin-left:-1px; background:none; text-align:left;
  padding:8px 12px; font-size:14.6px; color:var(--tx-2); cursor:pointer; transition:.16s var(--ease);
}
.ig-filter em{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--tx-3); }
.ig-filter:hover{ color:var(--tx); }
.ig-filter.is-on{ color:var(--tx); font-weight:600; border-left-color:var(--tx); }
.ig-filter.is-on em{ color:var(--tx-2); }
@media (max-width:900px){
  .ig-filter{ width:auto; border:1px solid var(--hair); border-radius:999px; padding:6px 13px; margin-left:0; }
  .ig-filter.is-on{ background:var(--tx); border-color:var(--tx); color:var(--paper); }
  .ig-filter.is-on em{ color:rgba(251,247,238,.6); }
}

.ig-count{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); padding-left:12px; }
.ig-empty{ color:var(--tx-2); padding:36px 0; }

.ig-body{ display:flex; flex-direction:column; gap:clamp(34px,4vw,52px); }
.ig-group[hidden]{ display:none; }
.ig-group__hd h2{
  font-family:var(--display); font-size:clamp(20px,2vw,23px); font-weight:650; letter-spacing:-.025em; color:var(--tx);
  display:flex; align-items:baseline; gap:10px;
}
.ig-group__hd h2 em{ font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--tx-3); }
.ig-group__hd p{ font-size:14.4px; color:var(--tx-2); margin-top:5px; }

.ig-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 26px; margin-top:20px; }
@media (max-width:1160px){ .ig-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ig-list{ grid-template-columns:minmax(0,1fr); } }

.ig{ display:flex; gap:12px; align-items:flex-start; }
.ig[hidden]{ display:none; }
.ig__mark{
  width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-size:15.5px; font-weight:700; letter-spacing:-.03em;
  background:var(--paper-1); color:var(--tx); border:1px solid transparent;
  transition:transform .2s var(--ease);
}
.ig:hover .ig__mark{ transform:translateY(-2px); }
.ig__id{ min-width:0; }
.ig__id b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--tx); }
.ig__id p{ font-size:13.8px; color:var(--tx-2); line-height:1.5; margin-top:2px; }

/* monograms follow the brand pattern: deep ground, its pale partner on top */
/* Four pairs, not five. The coral ramp has no deep tone (--coral-1 is #FF9070),
   so accent-ground with a pale partner measured 2.67:1. These are the same four
   the .pane--* set uses, which is why only those four exist there. */
.ig:nth-child(4n+1) .ig__mark{ background:var(--teal-1);   color:var(--teal-4); }
.ig:nth-child(4n+2) .ig__mark{ background:var(--purple-1); color:var(--purple-4); }
.ig:nth-child(4n+3) .ig__mark{ background:var(--rose-1);   color:var(--rose-4); }
.ig:nth-child(4n+4) .ig__mark{ background:var(--green-1);  color:var(--green-5); }

/* ---------- Agent rows (how it works) ---------- */
.who-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
@media (max-width:960px){ .who-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .who-grid{ grid-template-columns:minmax(0,1fr); } }
.who{
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:20px; display:flex; flex-direction:column; gap:11px;
  transition:border-color .2s var(--ease);
}
.who:hover{ border-color:var(--hair-3); }
.who__av{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 34%; background:#B9B3E4; }
.who__id b{ display:block; font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.035em; color:var(--tx); }
.who__id span{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-3); margin-top:4px; }
.who p{ font-size:14px; color:var(--tx-2); line-height:1.55; }
.who .arrow-link{ margin-top:auto; font-size:13.6px; }
.who--new{ background:var(--paper-1); }

/* ---------- Rotating word (hero) ----------
   Built the way Notion builds theirs: the pill label animates its inline-size
   with overflow hidden, so the word wipes in and out instead of the headline
   snapping. Dot is a ::before; pill text is .82em of the headline so it sits
   inside the line rather than dominating it. */
.rot{
  display:inline-flex; align-items:baseline; gap:.3em;
  padding-inline:.44em; padding-block:.18em;
  border-radius:999px; background:var(--rot-bg, var(--teal-5)); color:var(--tx);
  font-size:.82em; letter-spacing:-.028em;
  transition:background-color .3s cubic-bezier(.86,0,.07,1);
}
.rot::before{
  content:""; display:block; align-self:center; flex:none;
  inline-size:.42em; block-size:.42em; border-radius:999px;
  background:var(--rot-dot, var(--teal-1));
  transition:background-color .3s cubic-bezier(.86,0,.07,1);
}
.rot__label{
  display:inline-block; white-space:nowrap; overflow:hidden;
  inline-size:var(--rot-w, auto);
  transition:inline-size .3s cubic-bezier(.86,0,.07,1);
}
.rot__w{ display:inline-block; }
@media (prefers-reduced-motion: reduce){
  .rot, .rot::before, .rot__label{ transition:none; }
}

/* the three inputs: colour comes from the rule and the label, so the quilt
   blocks keep their own palette instead of fighting a saturated ground */
.inp{ border-top:2px solid var(--c); padding-top:22px; display:grid; gap:11px; align-content:start; }
.inp .tile{ width:60px; height:60px; margin:0 0 3px; border:1px solid var(--hair); }
.inp__n{ font-family:var(--mono); font-size:10.4px; letter-spacing:.14em; text-transform:uppercase; color:var(--c); font-weight:500; }
.inp h3{ font-size:20px; letter-spacing:-.028em; line-height:1.16; }
.inp p{ font-size:14.4px; color:var(--tx-2); line-height:1.55; }
.emoji{ display:block; font-size:24px; line-height:1; margin-bottom:14px; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.tiers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; }
@media (max-width:1200px){ .tiers{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .tiers{ grid-template-columns:minmax(0,1fr); } }

.tier{
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-xl);
  padding:28px 24px 26px; display:flex; flex-direction:column; gap:14px; position:relative;
  transition:border-color .2s var(--ease);
}
.tier:hover{ border-color:var(--hair-3); }
.tier__flag{
  position:absolute; top:-11px; left:28px;
  background:var(--green-accent); color:var(--green-1);
  font-family:var(--mono); font-size:9.6px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; padding:5px 11px; border-radius:5px;
}
.tier__name{ font-size:24px; letter-spacing:-.035em; }
.tier__who{ font-size:13.8px; color:var(--tx-2); line-height:1.5; min-height:4.4em; }
.tier__price{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--hair); margin-top:2px; }
.tier__price b{ font-family:var(--display); font-size:34px; font-weight:700; letter-spacing:-.045em; color:var(--tx); line-height:1.1; }
.tier__price span{ font-size:13.4px; color:var(--tx-3); }
.tier__note{ font-family:var(--mono); font-size:10.4px; color:var(--tx-3); margin-top:-6px; }
.tier__list{ margin-top:8px; margin-bottom:8px; }
.tier__list li{ font-size:13.8px; }
.tier .btn{ margin-top:auto; width:100%; }

/* featured tier goes dark, like the product surfaces */
.tier--featured{
  --paper:#141414; --paper-1:#1B1B1B; --paper-2:#141414; --paper-3:#232323;
  --hair:#2A2A2A; --hair-2:#363636; --hair-3:#4C4C4C;
  --tx:#F6F4EF; --tx-2:#A5A19A; --tx-3:#76726B;
  background:#141414; border-color:#242424; color:var(--tx-2);
}

/* plant motif — the tiers grow */
.tier__plant{ display:block; font-size:38px; line-height:1; margin-bottom:2px; }

/* ---------- Tools + Coaching = Transformation ---------- */
.eq{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:clamp(10px,1.6vw,20px); align-items:stretch; }
@media (max-width:860px){ .eq{ grid-template-columns:minmax(0,1fr); gap:12px; } .eq__op{ justify-self:center; } }
.eq__part{
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-xl);
  padding:30px 26px; display:flex; flex-direction:column; gap:11px;
}
.eq__part--result{
  --paper:#141414; --paper-1:#1B1B1B; --paper-2:#141414; --paper-3:#232323;
  --hair:#2A2A2A; --hair-2:#363636; --hair-3:#4C4C4C;
  --tx:#F6F4EF; --tx-2:#A5A19A; --tx-3:#76726B;
  background:#141414; border-color:#242424;
}
.eq__ico{ display:block; font-size:38px; line-height:1; }
.eq__part b{ font-family:var(--display); font-size:23px; font-weight:700; letter-spacing:-.035em; color:var(--tx); }
.eq__part p{ font-size:14.4px; color:var(--tx-2); line-height:1.55; }
.eq__op{ align-self:center; font-family:var(--display); font-size:clamp(24px,3vw,34px); font-weight:700; color:var(--tx-3); }

/* ---------- Agent hover video ---------- */
/* Injected by build.py only for agents that have an mp4 in assets/agents/.
   The still image stays underneath, so a missing or failed video is invisible. */
.agent__vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
  opacity:0; transition:opacity .1s var(--ease); z-index:1; pointer-events:none;
}
.agent:hover .agent__vid.is-playing{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .agent__vid{ display:none; } }

/* ---------- Story figures (about page) ---------- */
.story{ margin:0; }
.story img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-xl); border:1px solid var(--hair);
}
.story figcaption{
  margin-top:16px; text-align:center; font-size:13.4px; color:var(--tx-3);
  max-width:56ch; margin-inline:auto;
}

.chapter{
  font-family:var(--mono); font-size:10.6px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-3); margin:0 0 16px; font-weight:500;
}

.tile--sm{ width:52px; height:52px; margin:0 0 16px; }

/* ---------- Agent attribution on a card label ---------- */
.byagent{ display:inline-flex; align-items:center; gap:9px; }
.byagent__faces{ display:inline-flex; }
.byagent__faces img{
  width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:50% 34%;
  border:2px solid var(--paper-2); background:#B9B3E4; display:block;
}
.byagent__faces img + img{ margin-left:-9px; }
.card--dark .byagent__faces img{ border-color:#141414; }

/* ---------- People ---------- */
.people{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:860px){ .people{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .people{ grid-template-columns:minmax(0,1fr); } }
.person{
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:24px 22px 22px; display:grid; gap:9px; align-content:start;
  transition:border-color .2s var(--ease);
}
.person:hover{ border-color:var(--hair-3); }
.person__face{
  width:76px; height:76px; border-radius:50%; object-fit:cover; display:block;
  margin-bottom:6px; background:var(--paper-3);
}
.person__face--initials{
  display:grid; place-items:center; font-family:var(--display);
  font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--tx-3);
  border:1px dashed var(--hair-3);
}
.person h3{ font-size:19px; letter-spacing:-.03em; }
.person__role{ font-family:var(--mono); font-size:10.4px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3); }
.person p{ font-size:14.2px; color:var(--tx-2); line-height:1.55; }
.person__todo{ color:var(--tx-3)!important; font-style:italic; }

/* ==========================================================================
   SHOWCASE — visual panel beside copy
   ========================================================================== */
/* no wrapping card — the dark panel sits straight on the section ground,
   otherwise it reads as a box inside a box */
.showcase{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px); align-items:center;
}
@media (max-width:900px){ .showcase{ grid-template-columns:minmax(0,1fr); } }
.showcase__vis{
  border-radius:var(--r-xl); background:#141414; overflow:hidden;
  min-height:clamp(260px,26vw,360px); display:grid; place-items:center; padding:28px; position:relative;
}
.showcase__txt{ display:grid; gap:14px; align-content:center; }


/* stacked definition rows */
.deflist{ display:grid; }
.deflist > div{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; padding:18px 0; border-bottom:1px solid var(--hair); align-items:start; }
.deflist > div:last-child{ border-bottom:0; }
.deflist > div:first-child{ padding-top:0; }
@media (max-width:620px){ .deflist > div{ grid-template-columns:minmax(0,1fr); gap:6px; } }
.deflist b{ font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.028em; color:var(--tx); }
.deflist p{ font-size:14.4px; color:var(--tx-2); line-height:1.55; }

/* brand tiles inside a visual panel */
.logos-grid{ display:flex; gap:10px; flex-wrap:nowrap; justify-content:center; position:relative; z-index:1; }
/* source marks arrive with different internal padding — some full-bleed app
   icons, some logos already on white. Inset each mark by the same amount so the
   row reads as one set. NB: percentage padding resolves against the container,
   not the element, so the inset is done by sizing the image, not padding. */
.logo{
  width:clamp(52px,5.4vw,68px); aspect-ratio:1; border-radius:16px;
  background:#fff; display:grid; place-items:center; flex:none;
}
.logo img{ width:74%; height:74%; object-fit:contain; display:block; border-radius:20%; }
@media (max-width:420px){ .logos-grid{ flex-wrap:wrap; } }
.monos--label{ margin-top:20px; text-align:center; position:relative; z-index:1; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,244,239,.6); }

/* role cards with bullets */
.roles-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:820px){ .roles-grid{ grid-template-columns:minmax(0,1fr); } }
.role{
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-xl);
  padding:clamp(24px,2.4vw,30px); display:flex; flex-direction:column; gap:14px;
  transition:border-color .2s var(--ease);
}
.role:hover{ border-color:var(--hair-3); }
.role__ico{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; }
.role__ico svg{ width:19px; height:19px; }
.role h3{ font-size:21px; letter-spacing:-.03em; }
.role ul{ list-style:none; display:grid; gap:10px; }
.role li{ position:relative; padding-left:19px; font-size:14.6px; color:var(--tx-2); line-height:1.55; }
.role li::before{ content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--tx-3); }
.role .arrow-link{ margin-top:auto; padding-top:4px; }

/* ==========================================================================
   AUTH  (login)
   ========================================================================== */
.body--bare{ background:var(--paper); }
.auth{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:100vh; }
@media (max-width:940px){ .auth{ grid-template-columns:minmax(0,1fr); } }

.auth__form{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(26px,4vw,44px) clamp(22px,4vw,56px) 30px;
}
.auth__brand{ align-self:flex-start; }
.auth__card{ width:100%; max-width:410px; margin:auto; padding:clamp(30px,4vw,44px) 0; }
.auth__h{ font-family:var(--display); font-size:clamp(27px,3vw,33px); font-weight:700; letter-spacing:-.035em; line-height:1.12; color:var(--tx); }
.auth__sub{ font-size:15.2px; line-height:1.6; color:var(--tx-2); margin-top:11px; }

.sso{ display:grid; gap:9px; margin-top:26px; }
.sso__pair{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.sso__b{
  display:flex; align-items:center; gap:11px; width:100%; cursor:pointer; text-align:left;
  border:1px solid var(--hair-2); background:var(--paper-2); border-radius:10px;
  padding:12px 15px; transition:border-color .16s var(--ease), background .16s var(--ease);
}
.sso__b:hover{ border-color:var(--tx); background:var(--paper-1); }
.sso__b b{ font-size:14.4px; font-weight:550; color:var(--tx); letter-spacing:-.01em; }
.sso__b--sm{ justify-content:center; gap:9px; }
.sso__m{ width:19px; height:19px; flex:none; display:grid; place-items:center; }
.sso__m svg, .sso__m img{ width:100%; height:100%; object-fit:contain; display:block; }
.sso__m--txt{
  border-radius:5px; background:var(--teal-1); color:var(--teal-4);
  font-family:var(--display); font-size:9.5px; font-weight:700; letter-spacing:-.02em;
}

.auth__or{ display:flex; align-items:center; gap:13px; margin:24px 0 20px; }
.auth__or::before, .auth__or::after{ content:""; height:1px; background:var(--hair-2); flex:1; }
.auth__or span{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3); }

.auth__fields{ display:grid; gap:13px; }
.fld{ display:grid; gap:6px; }
.fld > span{ font-size:12.6px; font-weight:550; color:var(--tx-2); letter-spacing:-.005em; }
.fld input{
  width:100%; font:inherit; font-size:15px; color:var(--tx);
  border:1px solid var(--hair-2); background:var(--paper-2); border-radius:10px; padding:12px 14px;
  transition:border-color .16s, box-shadow .16s; outline:none;
}
.fld input::placeholder{ color:var(--tx-3); }
.fld input:focus{ border-color:var(--tx); box-shadow:0 0 0 3px rgba(50,50,50,.07); }
.btn--block{ width:100%; justify-content:center; }
.auth__err{ font-size:12.8px; color:var(--rose); }

.auth__note{
  display:grid; grid-template-columns:16px minmax(0,1fr); gap:10px; align-items:start;
  margin-top:22px; font-size:12.9px; line-height:1.55; color:var(--tx-3);
}
.auth__note svg{ width:16px; height:16px; margin-top:1px; }
.auth__note b{ color:var(--tx-2); font-weight:550; }
.linkish{ border:0; background:none; padding:0; font:inherit; color:var(--tx); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }

.auth__tick{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin-bottom:18px;
  background:var(--forest); color:var(--forest-pale);
}
.auth__tick svg{ width:18px; height:18px; }

.auth__alt{ width:100%; max-width:410px; font-size:13.6px; color:var(--tx-3); text-align:center; }
.auth__alt a{ color:var(--tx-2); text-decoration:underline; text-underline-offset:2px; }
.auth__foot{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:26px; font-size:12.2px; color:var(--tx-3); }
.auth__foot a{ color:var(--tx-3); }
.auth__foot a:hover{ color:var(--tx-2); }

/* product side */
.auth__aside{ background:var(--paper-1); border-left:1px solid var(--hair-2); display:grid; place-items:center; padding:clamp(30px,4vw,56px); }
@media (max-width:940px){ .auth__aside{ display:none; } }
.auth__pane{ width:100%; max-width:520px; }
.auth__eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3); }
.auth__hh{ font-family:var(--display); font-size:clamp(22px,2.2vw,27px); font-weight:700; letter-spacing:-.035em; line-height:1.18; color:var(--tx); margin-top:12px; max-width:19ch; }
.auth__app{ margin-top:26px; }
.auth__app .app__body{ padding:15px; }
.auth__quote{ font-size:13.4px; line-height:1.6; color:var(--tx-3); margin-top:20px; max-width:46ch; }

.qrow{ display:grid; grid-template-columns:26px minmax(0,1fr) 8px; align-items:center; gap:13px; background:#1B1B1B; border:1px solid var(--hair); border-radius:10px; padding:12px 14px; }
.qrow__av{ width:26px; height:26px; border-radius:50%; overflow:hidden; background:var(--paper-3); }
.qrow__av img{ width:100%; height:100%; object-fit:cover; display:block; }
.qrow b{ display:block; font-size:13.6px; font-weight:600; color:var(--tx); letter-spacing:-.012em; }
.qrow span{ display:block; font-size:12px; color:var(--tx-3); margin-top:2px; }
.qrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--forest-pale); }
.qrow__dot--warn{ background:#E7BA63; }

/* ==========================================================================
   IEP PACKET GENERATOR  (special-education.html)
   ========================================================================== */
.iep{ border:1px solid #242424; border-radius:var(--r-lg); overflow:hidden; background:#141414; }
.iep__bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid #262626; background:#1B1B1B; }
.iep__file{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; min-width:0; }
.iep__file b{ font-size:13.4px; font-weight:600; color:#F6F4EF; letter-spacing:-.01em; }
.iep__file .mono{ font-family:var(--mono); font-size:10.5px; color:#8A8A8A; }
.iep__tools{ margin-left:auto; display:flex; gap:8px; }
.btn--sm{ padding:7px 13px; font-size:12.6px; }
.iep .btn--ghost{ color:#F6F4EF; border-color:#3A3A3A; background:none; }
.iep .btn--ghost:hover{ border-color:#5A5A5A; }
.iep .btn--ghost[disabled]{ opacity:.4; cursor:default; }
.iep .btn--primary{ background:var(--forest-pale); color:var(--forest); }

.iep__stage{ padding:clamp(16px,2vw,22px); display:grid; gap:16px; }
.iep__idlecard{ background:#1B1B1B; border:1px solid #262626; border-radius:var(--r); padding:clamp(20px,2.4vw,28px); max-width:560px; }
.iep__idlecard .eyebrow{ color:#8A8A8A; }
.iep__idlecard h3{ color:#F6F4EF; }
.iep__idlecard .body{ color:#B8B4AC; }
.iep__idlecard .body b{ color:#F6F4EF; }
.iep__idlecard .muted{ color:#767676; }
.iep [data-iep-idle][hidden], .iep [data-iep-trace][hidden], .iep [data-iep-doc][hidden]{ display:none; }

/* the document itself — paper, so it reads as the artifact it is */
.iepdoc{
  background:#FFFDF8; color:#1F1F1F; border-radius:var(--r);
  padding:clamp(24px,3vw,42px) clamp(20px,3vw,46px);
  display:grid; gap:22px; box-shadow:0 18px 46px rgba(0,0,0,.34);
}
.iepdoc__hd{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; border-bottom:2px solid #1F1F1F; padding-bottom:14px; }
.iepdoc__dist{ font-family:var(--mono); font-size:10.4px; letter-spacing:.14em; text-transform:uppercase; color:#6A6A6A; }
.iepdoc__hd h3{ font-family:var(--display); font-size:clamp(18px,1.8vw,22px); font-weight:700; letter-spacing:-.03em; color:#1F1F1F; margin-top:5px; }
.iepdoc__stamp{
  margin-left:auto; flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:#9A2C2C; border:1.5px solid #9A2C2C; border-radius:5px; padding:5px 9px; transform:rotate(-1.5deg);
}
.iepdoc__meta{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px 22px; }
@media (max-width:720px){ .iepdoc__meta{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.iepdoc__meta > div{ display:grid; gap:2px; }
.iepdoc__meta span{ font-family:var(--mono); font-size:9.4px; letter-spacing:.13em; text-transform:uppercase; color:#6E6E6E; }
.iepdoc__meta b{ font-size:13.6px; font-weight:600; color:#1F1F1F; }
.iepdoc__meta i{ font-style:normal; font-weight:400; color:#6A6A6A; }

.iepdoc__s{ display:grid; gap:10px; border-top:1px solid #E2DDD1; padding-top:18px; opacity:0; transform:translateY(6px); transition:opacity .38s var(--ease), transform .38s var(--ease); }
.iepdoc__s.is-in{ opacity:1; transform:none; }
.iepdoc__s h4{ font-family:var(--display); font-size:14.6px; font-weight:700; letter-spacing:-.015em; color:#1F1F1F; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.iepdoc__s h4 cite{ font-family:var(--mono); font-style:normal; font-size:10.2px; color:#6E6E6E; letter-spacing:.02em; }
.iepdoc__s p{ font-size:13.9px; line-height:1.62; color:#3A3A3A; }
.iepdoc__s p b{ color:#1F1F1F; font-weight:600; }
.iepdoc__s--flag{ background:rgba(154,44,44,.045); border-radius:8px; padding:18px 16px; }

.src{ display:block; font-family:var(--mono); font-size:9.8px; letter-spacing:.09em; text-transform:uppercase; color:#6E6E6E; margin-top:5px; }
.iepdoc__goals{ display:grid; gap:12px; counter-reset:g; list-style:none; }
.iepdoc__goals li{ position:relative; padding-left:26px; font-size:13.9px; line-height:1.6; color:#3A3A3A; }
.iepdoc__goals li::before{
  counter-increment:g; content:counter(g); position:absolute; left:0; top:1px;
  width:18px; height:18px; border-radius:50%; background:#EFEADD; color:#5A5A5A;
  font-family:var(--mono); font-size:10px; display:grid; place-items:center;
}
.iepdoc__goals li b{ color:#1F1F1F; font-weight:600; }
.ok{ display:block; font-family:var(--mono); font-size:9.8px; letter-spacing:.06em; color:#2F6B47; margin-top:4px; }
.gap{ display:block; background:#FBEDEA; border-left:2.5px solid #9A2C2C; border-radius:0 5px 5px 0; padding:9px 12px; margin-top:7px; font-size:12.8px; line-height:1.55; color:#4A3230; }
.gap b{ color:#9A2C2C; font-weight:650; }
.gap--block{ margin-top:0; }

.iepdoc__t{ width:100%; border-collapse:collapse; font-size:13.2px; }
.iepdoc__t th{ text-align:left; font-family:var(--mono); font-size:9.4px; letter-spacing:.12em; text-transform:uppercase; color:#6E6E6E; font-weight:500; padding:0 12px 7px 0; border-bottom:1px solid #E2DDD1; }
.iepdoc__t td{ padding:10px 12px 10px 0; border-bottom:1px solid #EFEADD; color:#3A3A3A; vertical-align:top; }
.iepdoc__t tr.is-gap td{ padding-bottom:12px; }
.iepdoc__n{ font-size:12.6px; color:#6A6A6A; }

.iepdoc__sign{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:12px; }
@media (max-width:720px){ .iepdoc__sign{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.iepdoc__sign span{ border-top:1px solid #1F1F1F; padding-top:6px; font-family:var(--mono); font-size:9.4px; letter-spacing:.1em; text-transform:uppercase; color:#6E6E6E; }
.iepdoc__ft{ border-top:2px solid #1F1F1F; padding-top:14px; display:grid; gap:8px; }
.iepdoc__ft p{ font-size:12.6px; line-height:1.6; color:#4A4A4A; }
.iepdoc__ft b{ color:#1F1F1F; font-weight:600; }
.iepdoc__src{ font-family:var(--mono); font-size:10px; color:#6E6E6E; line-height:1.65; }

/* ---------- print: the packet, and nothing else ---------- */
@media print{
  /* the packet is reparented to <body> first, so hiding its siblings leaves it
     alone on the page — no leftover empty pages from hidden-but-laid-out content */
  body.is-printing{ background:#fff; }
  body.is-printing > *:not(.iepdoc){ display:none !important; }
  body.is-printing .iepdoc{
    display:grid; box-shadow:none; border-radius:0; padding:0; background:#fff;
  }
  body.is-printing .iepdoc__s{ opacity:1; transform:none; break-inside:avoid; }
  body.is-printing .iepdoc__hd, body.is-printing .iepdoc__ft{ break-inside:avoid; }
  body.is-printing .iepdoc__stamp{ transform:none; }
  @page{ margin:16mm; }
}

/* ---------- "why the name" definition list (about page) ---------- */
.why{ display:grid; gap:26px; }
.why > div{ display:grid; gap:7px; padding-left:20px; border-left:2px solid var(--hair-3); }
.why dt{ font-family:var(--display); font-size:clamp(17px,1.6vw,20px); font-weight:650; letter-spacing:-.025em; line-height:1.28; color:var(--tx); }
.why dd{ font-size:16.4px; line-height:1.68; color:var(--tx-2); }
@media (max-width:600px){ .why > div{ padding-left:15px; } }

/* credit price list: the free row is the point, so mark it */
.is-free td{ color:var(--green-1); }
.is-free td b{ color:var(--green-1); }

/* logo + one-word page title, on a single line */
.lockup{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.1vw,14px);
  font-family:var(--display); font-size:clamp(30px,3.6vw,44px); font-weight:800;
  letter-spacing:-.045em; line-height:1; color:var(--tx);
}
/* sized and nudged to the cap height, not the line box, so it sits on the
   same optical line as the word rather than hanging below the baseline */
.lockup svg{ width:.7em; height:.7em; flex:none; display:block; }

/* ==========================================================================
   MOBILE TAP TARGETS
   Audited at 390px inside a same-origin iframe — headless Chrome clamps
   --window-size to 500px, so a frame is the only way to measure a real phone
   width. Everything below is mobile-only; the desktop design is untouched.
   ========================================================================== */
/* The demo page carried these columns as an inline style, which outranks the
   .split mobile collapse below 940px — the whole form rendered in a 153px
   column on a phone. Same ratio, now as a class so the collapse still wins. */
@media (min-width:941px){ .split--demo{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }

/* .table-wrap was used on special-education.html but never defined, so the
   comparison table overflowed and got clipped by the ancestor overflow-x:clip.
   Same behaviour as .tbl-scroll. */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:1080px){
  /* declared 40x40 but flex-shrunk to 34 wide in the header row */
  .burger{ width:44px; height:44px; flex:none; }
  .brand{ min-height:44px; }
  .btn--sm{ min-height:44px; padding-block:0; }
}
/* 320px (iPhone SE) — the last few things that outrun their box.
   .layer's tag column and long mono identifiers are the only offenders. */
@media (max-width:420px){
  .layer{ grid-template-columns:minmax(0,1fr); }
  .layer .tag{ justify-self:start; }
  .mono, .iep__stage{ overflow-wrap:anywhere; }
  .iep__stage, .iep__stage > *{ min-width:0; }
}

@media (max-width:760px){
  .arrow-link{ min-height:44px; }
  .ig-filter{ min-height:44px; }
  .ig-search{ min-height:44px; padding-block:0; }
  .ig-search input{ min-height:44px; }
  .pill{ min-height:44px; }
  .auth__foot a{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
}

@media (max-width:420px){
  /* "Wren | Early Warning" ellipsised at 135px wide; buy the characters back */
  .agent__badge{ font-size:10.4px; padding:5px 8px; bottom:9px; }
  .agent__badge i{ margin:0 4px; }
  .agent__body{ padding:13px 13px 14px; gap:10px; }
  .agent__body p{ font-size:12.6px; }
}
@media (max-width:360px){
  .agent__badge{ font-size:10px; padding:5px 6px; letter-spacing:-.018em; }
  .agent__badge i{ margin:0 3px; }
}

/* ==========================================================================
   HERO QUILT TILES
   Decorative blocks drifting in the hero margins. Purely ornamental, so the
   container is aria-hidden and pointer-events:none. They live in the space
   either side of .hero__head (max-width 1040px), which is why they only
   appear once the viewport is wide enough to have that space to spare.
   ========================================================================== */
.hero__quilt{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:clip; }
.hero .wrap{ position:relative; z-index:1; }
.hero__tile{
  position:absolute; display:block; border-radius:8px;
  width:var(--s,64px); height:var(--s,64px);
  opacity:0; box-shadow:0 8px 24px rgba(26,26,23,.06);
  animation:tile-in .9s var(--ease) forwards, tile-float 14s ease-in-out infinite;
  animation-delay:var(--d,0s), calc(var(--d,0s) + .9s);
}
@keyframes tile-in{ from{ opacity:0; transform:translateY(14px) rotate(var(--r,0deg)) scale(.94); }
                    to{   opacity:var(--o,.5); transform:translateY(0) rotate(var(--r,0deg)) scale(1); } }
@keyframes tile-float{
  0%,100%{ transform:translateY(0)     rotate(var(--r,0deg)); }
  50%    { transform:translateY(-13px) rotate(calc(var(--r,0deg) + 3deg)); }
}
.hero__tile--a{ --s:68px; --r:-8deg;  --d:.05s; --o:.55; left:1.5%;  top:13%; }
.hero__tile--b{ --s:48px; --r:11deg;  --d:.20s; --o:.45; left:3%;    top:57%; }
.hero__tile--c{ --s:40px; --r:-14deg; --d:.35s; --o:.40; left:1%;    top:80%; }
.hero__tile--d{ --s:70px; --r:9deg;   --d:.12s; --o:.55; right:1.5%; top:17%; }
.hero__tile--e{ --s:46px; --r:-10deg; --d:.28s; --o:.45; right:3%;   top:61%; }
.hero__tile--f{ --s:40px; --r:13deg;  --d:.42s; --o:.40; right:1%;   top:84%; }

/* .hero__head is 1040px wide, so tiles only fit in the margin once the viewport
   is wide enough to have one. Below this they crowd the headline. */
@media (max-width:1240px){ .hero__quilt{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .hero__tile{ animation:none; opacity:var(--o,.5); transform:rotate(var(--r,0deg)); }
}

/* ---------- Drift variant (how-it-works) ----------
   Tiles sit closer to the headline and wander on both axes rather than only
   bobbing. Amplitude is capped at 8px horizontally, which is budgeted into the
   clearances below so a drifting tile still cannot reach the text. */
.hero__quilt--drift .hero__tile{
  animation:tile-in .9s var(--ease) forwards, tile-drift var(--dur,19s) ease-in-out infinite;
  animation-delay:var(--d,0s), calc(var(--d,0s) + .9s);
}
@keyframes tile-drift{
  0%,100%{ transform:translate(0,0)       rotate(var(--r,0deg)); }
  22%    { transform:translate(6px,-11px) rotate(calc(var(--r,0deg) + 2.5deg)); }
  48%    { transform:translate(-5px,-17px) rotate(calc(var(--r,0deg) - 2deg)); }
  74%    { transform:translate(-8px,-6px) rotate(calc(var(--r,0deg) + 1.5deg)); }
}
.hero__quilt--drift .hero__tile--a{ --s:62px; --r:-7deg;  --dur:19s; --o:.55; left:15%;  top:14%; }
.hero__quilt--drift .hero__tile--b{ --s:44px; --r:12deg;  --dur:23s; --o:.45; left:17%;   top:62%; }
.hero__quilt--drift .hero__tile--d{ --s:64px; --r:8deg;   --dur:21s; --o:.55; right:15%; top:18%; }
.hero__quilt--drift .hero__tile--e{ --s:42px; --r:-11deg; --dur:26s; --o:.45; right:17%;  top:66%; }

/* Sitting this close to a 900px headline needs more margin than the shared
   1240px rule provides, so this variant waits for a wider viewport. */
@media (max-width:1320px){ .hero__quilt--drift{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .hero__quilt--drift .hero__tile{ animation:none; opacity:var(--o,.5); transform:rotate(var(--r,0deg)); }
}



/* ==========================================================================
   STACK FIGURE — the illustrated version of the four layers
   The SVG is the whole picture and carries a <title> for screen readers. It
   needs room for six callouts either side, so below 940px it is replaced by
   the ordered list, which says the same thing in reading order.
   ========================================================================== */
.stackfig{ margin:0; }
.stackfig__svg{ display:block; width:100%; height:auto; }
.stackfig__list{ display:none; counter-reset:sf; list-style:none; padding:0; margin:0; }
.stackfig__list li{
  counter-increment:sf; position:relative; padding:16px 0 16px 46px; border-top:1px solid var(--hair);
}
.stackfig__list li::before{
  content:counter(sf); position:absolute; left:0; top:16px;
  width:28px; height:28px; border-radius:8px; background:#1B1B1B; color:#F6F4EF;
  font-family:var(--mono); font-size:12px; display:grid; place-items:center;
}
.stackfig__list b{ display:block; font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.026em; color:var(--tx); }
.stackfig__list span{ display:block; font-size:14.2px; color:var(--tx-2); line-height:1.55; margin-top:4px; }
@media (max-width:940px){
  .stackfig__svg{ display:none; }
  .stackfig__list{ display:block; }
}

/* ==========================================================================
   SYSTEM GRID (developers)
   The district-systems row was plain text pills, which carried no weight for a
   section whose whole point is breadth. Same monogram pattern as .ig on the
   integrations page: deep brand ground, its pale partner on top, cycled.
   ========================================================================== */
.sysgrid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px; list-style:none; padding:0; margin:0;
}
.sys{
  display:flex; align-items:center; gap:11px; min-width:0;
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r);
  padding:11px 13px; transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.sys:hover{ border-color:var(--hair-3); transform:translateY(-2px); }
.sys__m{
  width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-size:13.5px; font-weight:700; letter-spacing:-.03em;
}
.sys__id{ min-width:0; }
.sys__id b{ display:block; font-size:14px; font-weight:600; letter-spacing:-.015em; color:var(--tx); line-height:1.25; }
.sys__id span{ display:block; font-size:12.2px; color:var(--tx-3); line-height:1.4; margin-top:1px; }
/* deep ground, pale partner, cycled the same way .ig does */
.sys:nth-child(4n+1) .sys__m{ background:var(--teal-1);   color:var(--teal-4); }
.sys:nth-child(4n+2) .sys__m{ background:var(--purple-1); color:var(--purple-4); }
.sys:nth-child(4n+3) .sys__m{ background:var(--rose-1);   color:var(--rose-4); }
.sys:nth-child(4n+4) .sys__m{ background:var(--green-1);  color:var(--green-5); }
@media (max-width:1000px){ .sysgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){  .sysgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){  .sysgrid{ grid-template-columns:minmax(0,1fr); } }

/* ==========================================================================
   CTA AVATAR FIELD
   A faint grid of empty circles behind the closing CTA, with five agent
   portraits sitting in it. The grid is a repeating radial-gradient rather than
   markup, so the pattern costs nothing and always aligns. Decorative, so the
   container is aria-hidden and pointer-events:none, and .wrap sits above it.
   ========================================================================== */
.cta-band{ position:relative; overflow:clip; }
.cta-band > .wrap{ position:relative; z-index:1; }
.ctafield{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  /* warm tint, not neutral: a black overlay on cream always reads grey */
  background-image:radial-gradient(circle at center, rgba(150,138,104,.065) 0 30px, transparent 31px);
  background-size:88px 88px; background-position:center;
  /* fade the field out behind the text so the type never fights the pattern */
  -webkit-mask-image:radial-gradient(ellipse 46% 62% at 50% 50%, transparent 40%, #000 78%);
          mask-image:radial-gradient(ellipse 46% 62% at 50% 50%, transparent 40%, #000 78%);
}
.ctafield__a{
  position:absolute; width:var(--s,64px); height:var(--s,64px);
  border-radius:50%; object-fit:cover; object-position:50% 38%;
  box-shadow:0 6px 18px rgba(26,26,23,.10);
  opacity:0; animation:cta-pop .7s var(--ease) forwards; animation-delay:var(--d,0s);
}
@keyframes cta-pop{ from{ opacity:0; transform:scale(.86) } to{ opacity:1; transform:scale(1) } }
.ctafield__a--1{ --s:70px; --d:.05s; left:8%;  top:16%; }
.ctafield__a--2{ --s:56px; --d:.16s; left:15%; top:62%; }
.ctafield__a--3{ --s:60px; --d:.10s; right:9%; top:20%; }
.ctafield__a--4{ --s:74px; --d:.22s; right:14%; top:60%; }
.ctafield__a--5{ --s:52px; --d:.28s; left:26%; top:88%; }
/* the field needs margin either side of the copy; below this it would sit on the type */
@media (max-width:1080px){ .ctafield{ display:none; } }
@media (prefers-reduced-motion: reduce){ .ctafield__a{ animation:none; opacity:1; } }