/* ═══════════════════════════════════════════════════════════════════
   PRELIGHT ATLAS — prelight.ai

   Art direction: the page is a specimen sheet, not a brochure.
   Prelight's own collateral is printer's language — registration
   marks on the one-pager, a "master mark", a signature signed off
   as "Programmable Plate v1.0". A company that makes brands
   machine-readable should publish a page that reads like a
   specification: gridded, referenced, measured, labeled.

   From the brand system in the hub, held strictly:
     · Poppins carries voice. Menlo carries metadata. Never one line.
     · Color is identity, never ornament. Three hues, where they signify.
     · Cream paper, ink frame, graphite body.
   The drama is the interval between 88px and 10px.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#FAFAF7;
  --raise:#FFFFFF;
  --ink:#0E1116;
  --body:#54544E;
  --mut:#5C5C56;       /* 6.4:1 on paper  */
  --faint:#71716A;     /* 4.7:1 on paper — the Menlo layer is text, not texture */
  --hair:#E2E2DB;
  --hair-2:#EDEDE6;

  /* Master Plate 07 · the app icon family, sampled from the plate */
  --blue:#26AFFF;      /* 00 master · 01 atlas   */
  --blue-ink:#0A6EAE;  /* blue that holds up as text on cream */
  /* filled chips and pills: the label has to invert with the fill, or a
     white-on-#26AFFF chip sits at 2.4:1 in one theme and 8:1 in the other */
  --chip-bg:#0A6EAE; --chip-fg:#FFFFFF; --pill-bg:#3E4AE2; --pill-fg:#FFFFFF;
  --indigo:#3E4AE2;    /* 02 stage               */
  --purple:#B961EE;    /* 03 score               */
  --lime:#84CC16;      /* 04 insights            */
  --teal:#14B8A6;      /* 05 license             */
  --amber:#F59E0B;     /* 06 royalties           */
  --coral:#EF4444;     /* 07 stream              */
  --pink:#EC4899;      /* 08 ugc                 */
  --ok:#0E9384;
  --warn:#B4720A;
  /* text-safe accents, following the --blue-ink precedent: the hue is the
     identity, but small type needs a version that clears 4.5:1 on cream */
  --teal-ink:#0B7A6E;
  --ok-ink:#0B7A6D;
  --warn-ink:#8A5708;
  --purple-ink:#8B2FD0;
  --coral-ink:#C2352F;

  --sans:"Poppins","Helvetica Neue",Arial,sans-serif;
  --mono:"Menlo","IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  --lift:0 1px 2px rgba(14,17,22,.035), 0 22px 60px -34px rgba(14,17,22,.30);

  /* One motion idea, expressed everywhere: things REGISTER into place —
     they arrive fast, settle late, and never bounce. One curve, three
     durations. Nothing on this page moves to any other rule. */
  --reg:cubic-bezier(.16,1,.3,1);
  --t-tap:.18s;         /* response to a pointer            */
  --t-set:.5s;          /* an element settling              */
  --t-plate:1.1s;       /* a whole plate registering        */

  --rail:66px;          /* the measured margin — the sheet's edge   */
  --gut:34px;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#090B0E; --raise:#111419; --ink:#F5F5F2; --body:#ADADA7;
    --mut:#8E8E86; --faint:#868680; --hair:#20232A; --hair-2:#181B21;
    --teal-ink:#3FD3C0; --ok-ink:#3FD3C0; --warn-ink:#F2B44B; --purple-ink:#CE92F5;
    --coral-ink:#FF9A9A;
    --blue:#4FBEFF; --blue-ink:#7ACFFF; --indigo:#8B93FF; --purple:#CE92F5;
  --chip-bg:#7ACFFF; --chip-fg:#07131C; --pill-bg:#8B93FF; --pill-fg:#0B0D11;
    --chip-bg:#7ACFFF; --chip-fg:#07131C; --pill-bg:#8B93FF; --pill-fg:#0B0D11;
    --lime:#A3E635; --teal:#3FD3C0; --amber:#F2B44B; --coral:#FF7A7A; --pink:#F472B6;
    --ok:#3FD3C0; --warn:#F2B44B;
    --lift:0 1px 2px rgba(0,0,0,.6), 0 26px 64px -36px rgba(0,0,0,.95);
  }
  /* on ink ground the indigo lifts and the label goes dark, so it still reads as a button */
  :root:not([data-theme="light"]) .btn.pri{background:#8B93FF;color:#0B0D11;
    box-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -10px rgba(139,147,255,.5)}
  :root:not([data-theme="light"]) .btn.pri:hover{background:#A2A9FF}
}
:root[data-theme="dark"]{
  --btn-fg:#0B0D11;
  --paper:#090B0E; --raise:#111419; --ink:#F5F5F2; --body:#ADADA7;
  --mut:#8E8E86; --faint:#868680; --hair:#20232A; --hair-2:#181B21;
  --teal-ink:#3FD3C0; --ok-ink:#3FD3C0; --warn-ink:#F2B44B; --purple-ink:#CE92F5;
    --coral-ink:#FF9A9A;
  --blue:#4FBEFF; --blue-ink:#7ACFFF; --indigo:#8B93FF; --purple:#CE92F5;
  --chip-bg:#7ACFFF; --chip-fg:#07131C; --pill-bg:#8B93FF; --pill-fg:#0B0D11;
  --lime:#A3E635; --teal:#3FD3C0; --amber:#F2B44B; --coral:#FF7A7A; --pink:#F472B6;
  --ok:#3FD3C0; --warn:#F2B44B;
  --lift:0 1px 2px rgba(0,0,0,.6), 0 26px 64px -36px rgba(0,0,0,.95);
}
:root[data-theme="dark"] .btn.pri{background:#8B93FF;color:#0B0D11;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -10px rgba(139,147,255,.5)}
:root[data-theme="dark"] .btn.pri:hover{background:#A2A9FF}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--blue);outline-offset:4px}

.identity{height:3px;background:linear-gradient(90deg,#26AFFF 0%,#3E4AE2 52%,#B961EE 100%);
  transform-origin:left center}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ── credentials, on the CTA line ───────────────────────────────────
   No label and no rail of their own: on the same baseline as the two
   buttons they read as a masthead credit, which is what they are. A row
   headed "BACKED & AFFILIATED" was a section; two marks beside the ask
   are a signature. They were also 24px once, which is a smudge — a
   credential nobody can read is not a credential.

   NVIDIA's badge is a fixed-color lockup, so in dark mode it takes a
   white plate rather than a filter. WIPO is black on transparent and
   reverses cleanly. Never recolor either. */
.eyerow{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.creds{margin-left:auto;display:flex;align-items:center;gap:30px}
.creds .cm{display:flex;align-items:center;flex:none}
.creds .cm img{height:52px;width:auto;display:block}
.creds .cm img.mono{height:24px}
.creds .cm.wipo{flex-direction:row;align-items:center;gap:8px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .creds .cm.wht{background:#fff;padding:8px 12px;border-radius:8px}
  :root:not([data-theme="light"]) .creds .cm.wht img{height:46px}
  :root:not([data-theme="light"]) .creds .cm img.mono{filter:invert(1)}
}
:root[data-theme="dark"] .creds .cm.wht{background:#fff;padding:8px 12px;border-radius:8px}
:root[data-theme="dark"] .creds .cm.wht img{height:46px}
:root[data-theme="dark"] .creds .cm img.mono{filter:invert(1)}
/* once the row wraps, the marks take their own line at the left margin
   rather than hanging off the end of a button */
@media(max-width:860px){
  .creds{margin-left:0;width:100%;gap:30px;padding-top:6px}
  .creds .cm img{height:48px}.creds .cm img.mono{height:21px}}

/* ── proof: three jobs, before and after ────────────────────────────
   One before/after was a claim; three is a shape. The rows are a grid so
   the two figures line up in columns down the block and the eye reads
   "today" against "with the record" without being told to. */
/* ── proof: three jobs, before and after ────────────────────────────
   The first cut of this stacked the description under the "today" column
   and left the right two thirds of the block empty, so each row read as a
   fragment with a footnote hanging off the wrong word. It is now one
   horizontal statement per row — job · today → with the record · what the
   job is — which uses the full measure and can be read in a single pass.

   Hierarchy, not color, does the work: the old figure is smaller and
   muted, the new one larger and set in the interaction color, so the
   result wins even in greyscale. The arrow is the connective tissue the
   first version was missing. */
.proof3{margin-top:54px;border-top:1px solid var(--hair)}
.proof3 .ph,.proof3 .pr{display:grid;
  grid-template-columns:128px 132px 30px 168px minmax(0,1fr);
  align-items:center;gap:0 22px}
.proof3 .ph{padding:15px 0 13px;border-bottom:1px solid var(--hair)}
.proof3 .ph span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.proof3 .pr{padding:26px 0;border-bottom:1px solid var(--hair-2)}
.proof3 .pr:last-child{border-bottom:0}
.proof3 .jb{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.026em}

/* the old figure is struck and the new one lights — one gesture per row,
   260ms apart, on the page's own curve. The rule is drawn left to right
   because that is the reading direction, and it is set in the muted grey
   rather than coral: coral means a lapsed right everywhere else on this
   page, and four weeks is slow, not expired.

   Both figures are legible before anything moves, so a reader arriving
   with JS off, or with reduced motion on, sees the finished comparison
   rather than a half-played one. */
.proof3 .was{font-family:var(--mono);font-size:20px;color:var(--mut);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  position:relative;display:inline-block;justify-self:start;white-space:nowrap;
  transition:color var(--t-set) var(--reg) .34s}
.proof3 .was:after{content:"";position:absolute;left:-2px;right:-2px;top:53%;
  height:1.5px;background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left center}
.proof3 .pr.run .was:after{transform:scaleX(1);
  transition:transform var(--t-set) var(--reg)}
.proof3 .pr.run .was{color:var(--faint)}
.proof3 .arw{font-family:var(--mono);font-size:15px;color:var(--faint);
  justify-self:center;opacity:0;transform:translateX(-5px);
  transition:opacity var(--t-set) var(--reg) .38s,transform var(--t-set) var(--reg) .38s}
.proof3 .pr.run .arw{opacity:1;transform:none}
.proof3 .now{font-family:var(--mono);font-size:26px;color:var(--mut);
  letter-spacing:-.024em;font-variant-numeric:tabular-nums;font-weight:500;
  display:inline-block;justify-self:start;white-space:nowrap;
  transition:color var(--t-set) var(--reg) .46s}
.proof3 .pr.run .now{color:var(--indigo)}
@media (prefers-reduced-motion: reduce){
  .proof3 .was,.proof3 .was:after,.proof3 .now,.proof3 .arw{transition:none}
}
.proof3 .un{font-size:13.5px;color:var(--mut);line-height:1.5;
  border-left:1px solid var(--hair);padding-left:22px}

/* Below 1000px the row stacks: job, then the pair, then the description.
   The columns stay FIXED rather than auto — each .pr is its own grid, so
   auto columns resolve per row and the three arrows and three results
   land at three different x positions, which is what a loose table looks
   like. Fixed widths keep the comparison in a column. */
@media(max-width:1000px){
  .proof3 .ph{display:none}
  .proof3 .pr{grid-template-columns:126px 30px minmax(0,1fr);gap:4px 16px;
    padding:24px 0}
  .proof3 .jb{grid-column:1/-1;margin-bottom:6px}
  .proof3 .un{grid-column:1/-1;border-left:0;padding-left:0;margin-top:12px}
}
@media(max-width:520px){
  .proof3 .pr{grid-template-columns:108px 26px minmax(0,1fr);gap:4px 12px}
  .proof3 .was{font-size:17px}.proof3 .now{font-size:21px}
  .proof3 .un{margin-top:10px}
}

/* ── metadata voice ─────────────────────────────────────────────── */
.m{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.m.n{font-variant-numeric:tabular-nums;letter-spacing:.12em}

/* section reference: 01 / 10 · THE RECORD ────────────────────────── */
.ref{display:flex;align-items:center;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--hair)}
.ref .no{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--indigo);
  font-variant-numeric:tabular-nums}
/* the number is a position in a sequence, not a clause in a statute — the
   denominator is what makes it worth printing at all: a reader eight blocks
   into a long page wants to know how many are left, and "§ 07" never said. */
.ref .no i{font-style:normal;color:var(--faint);margin-left:6px;letter-spacing:.1em}
.ref .ti{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.ref .rt{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint)}
@media(max-width:560px){.ref{gap:10px}.ref .no{white-space:nowrap;flex:none}
  .ref .ti{letter-spacing:.14em}.ref .rt{display:none}}

/* ── wayfinding ─────────────────────────────────────────────────────
   A document metaphor owes the reader a document's affordances: how far
   in you are, and which part you are standing in. */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,#26AFFF 0%,#3E4AE2 52%,#B961EE 100%);
  transform:scaleX(0);transform-origin:left center;will-change:transform}
.navlinks a.on{color:var(--ink)}
.navlinks a{position:relative}
.navlinks a.on:after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1.5px;
  background:var(--indigo);transform-origin:left;animation:drawEdge var(--t-set) var(--reg) both}

/* ── mobile: a different structure, not a smaller one ───────────────
   Twenty-five screens is not a page anyone reads on a phone. The four
   sections that carry the argument stay open; the supporting ones fold
   behind their own title until asked for. */
.fold{border-top:1px solid var(--hair)}
.foldbar{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:22px 0}
.foldbar .fn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut)}
.foldbar .fx{margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--indigo);line-height:1}
.foldbar[aria-expanded="true"] .fx{transform:rotate(45deg)}
.foldbar .fx{transition:transform var(--t-tap) var(--reg);display:inline-block}
.folded > .wrap:not(.foldhead){display:none}
.folded{padding:0!important}
section.folded + section.folded{margin-top:0}

/* ── nav ────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--hair)}
.navin{display:flex;align-items:center;gap:28px;height:70px}
.lock{display:flex;align-items:center;gap:12px}
.mark{width:32px;height:32px;border-radius:9px;border:1.75px solid var(--ink);background:var(--raise);
  display:flex;align-items:center;justify-content:center;gap:3.2px;flex:none}
.mark i{width:5px;height:5px;border-radius:50%;display:block}
.lock b{font-size:19.5px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.navlinks{display:flex;gap:2px;margin-left:16px}
.navlinks a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);padding:8px 12px;transition:color var(--t-tap) var(--reg)}
.navlinks a:hover{color:var(--ink)}
.navright{margin-left:auto;display:flex;align-items:center;gap:14px}
@media(max-width:1080px){.navlinks{display:none}}

/* ── the menu, below 1080px ─────────────────────────────────────────
   The links used to vanish and nothing replaced them, which on a phone
   and on every tablet left a 15,000px page with scrolling as its only
   navigation. The burger appears exactly where the links stop. */
.burger{display:none;width:38px;height:38px;border:1px solid var(--hair);border-radius:9px;
  background:var(--raise);cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;flex:none;
  transition:border-color var(--t-tap) var(--reg)}
.burger:hover{border-color:var(--ink)}
.burger i{width:15px;height:1.5px;background:var(--ink);display:block;
  transition:transform var(--t-tap) var(--reg),opacity var(--t-tap) var(--reg)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:1080px){.burger{display:flex}}
.menu{border-top:1px solid var(--hair);background:var(--paper);
  max-height:calc(100vh - 70px);overflow-y:auto}
.menu .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:22px}
.menu a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);padding:16px 0;border-bottom:1px solid var(--hair-2);
  transition:color var(--t-tap) var(--reg)}
.menu a:hover,.menu a:focus-visible{color:var(--ink)}
.menu .mrow{display:flex;align-items:center;gap:16px;padding-top:22px;flex-wrap:wrap}
.menu .mrow .btn{flex:none}
.menu .mrow .tgl{display:inline-flex}
@media(min-width:1081px){.menu{display:none!important}}
/* the nav CTA is redundant once the menu carries one */
@media(max-width:560px){.navin .btn.pri.sm{display:none}}
/* the header CTA must never wrap to two lines */
.navlong{display:inline}
@media(max-width:560px){.navin{gap:10px}.navright{gap:10px}
  .btn.sm{padding:9px 12px;font-size:12.5px;white-space:nowrap}
  .lock b{font-size:17px}.mark{width:28px;height:28px}
  /* the theme toggle is not a primary action — it lives in the footer here,
     so the one CTA on the page can keep its full name */
  #themeBtn{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid transparent;border-radius:10px;
  padding:15px 26px;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1;
  transition:transform var(--t-tap) var(--reg),box-shadow var(--t-tap) var(--reg),background var(--t-tap) var(--reg),border-color var(--t-tap) var(--reg);
}
.btn .ar{transition:transform var(--t-tap) var(--reg);display:inline-block}
.btn:hover .ar{transform:translateX(3px)}

/* primary — indigo, the color the brand already uses for anything actionable */
.btn.pri{background:var(--indigo);color:#fff;
  box-shadow:0 1px 2px rgba(62,74,226,.30), 0 10px 24px -9px rgba(62,74,226,.62)}
.btn.pri:hover{transform:translateY(-2px);background:#3540C9;
  box-shadow:0 2px 5px rgba(62,74,226,.34), 0 18px 36px -12px rgba(62,74,226,.70)}
.btn.pri:active{transform:translateY(0)}

/* secondary — quiet, but unmistakably pressable */
.btn.sec{background:var(--raise);color:var(--ink);border-color:var(--hair);
  box-shadow:0 1px 2px rgba(14,17,22,.05)}
.btn.sec:hover{transform:translateY(-2px);border-color:var(--ink);
  box-shadow:0 12px 26px -12px rgba(14,17,22,.34)}
.btn.sec:active{transform:translateY(0)}

.btn.sm{padding:10px 18px;font-size:13.5px;border-radius:8px;gap:8px}
.tgl{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.tgl:hover{color:var(--ink)}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{position:relative;padding:104px 0 0}
#grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.hero .wrap{position:relative}
.hero h1{
  font-size:clamp(44px,7.4vw,90px);font-weight:600;letter-spacing:-.045em;line-height:.98;
  color:var(--ink);max-width:13ch;margin-top:26px;
}
.hero h1 .l2{display:block}
.hero .sub{font-size:18.5px;line-height:1.55;max-width:52ch;margin-top:30px}
.hero .sub b{color:var(--ink);font-weight:500}
.herocta{display:flex;gap:14px 18px;margin-top:38px;flex-wrap:wrap;align-items:center}

/* ── the marks have to greet you ────────────────────────────────────
   The whole point of putting NVIDIA and WIPO on the CTA line is that a
   visitor sees them on arrival, without scrolling. Measured, the row
   ends at y=710 — fine on a 13" MacBook and both iPad orientations,
   70px under the fold on a 1280x640 laptop and 150px under it on a
   phone. So the hero compresses when the viewport is short, rather than
   costing every reader height they had to spare. */
@media (max-height:760px) and (min-width:861px){
  .hero{padding-top:64px}
  .hero h1{font-size:clamp(40px,6.1vw,70px);margin-top:18px}
  .hero .sub{font-size:17.5px;margin-top:22px}
  .herocta{margin-top:28px}
  .creds .cm img{height:38px}.creds .cm img.mono{height:17px}
}
/* on a phone the buttons stack, so a credential line below them is
   always past the fold. It goes above them instead — still a masthead
   credit, and now actually seen. */
@media(max-width:860px){
  .herocta{flex-direction:column;align-items:flex-start}
  .herocta .creds{order:-1;padding-top:0;padding-bottom:10px}
  .herocta .btn{width:auto}
}
@media (max-width:860px) and (max-height:740px){
  .hero{padding-top:60px}
  .hero h1{margin-top:16px}
  .hero .sub{margin-top:20px;font-size:17.5px}
  .herocta{margin-top:26px;gap:12px}
}

/* the specimen: a mounted plate, not a floating card ─────────────── */
.specimen{margin-top:64px}
.spechead{display:flex;align-items:baseline;gap:16px;padding-bottom:10px;flex-wrap:wrap}
.spechead .t{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.spechead .d{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint);margin-left:auto}
.plate{border:1px solid var(--hair);background:var(--raise);box-shadow:var(--lift)}
.plate .top{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--hair-2);flex-wrap:wrap}
.who{display:flex;flex-wrap:wrap;gap:3px;background:var(--paper);border:1px solid var(--hair);
  border-radius:9px;padding:3px;max-width:100%}
.who button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);padding:8px 14px;border-radius:7px;white-space:nowrap;
  transition:background var(--t-tap) var(--reg),color var(--t-tap) var(--reg),box-shadow var(--t-tap) var(--reg)}
.who button:hover{color:var(--ink)}
/* six desks wrapping to four rows swamps a phone — swipe them instead */
@media(max-width:760px){
  .who{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .who::-webkit-scrollbar{display:none}
  .plate .top{flex-wrap:nowrap;gap:10px}
  .plate .src{display:none}
}
.who button[aria-pressed="true"]{background:var(--pill-bg);color:var(--pill-fg);
  box-shadow:0 1px 2px rgba(62,74,226,.3), 0 6px 14px -6px rgba(62,74,226,.55)}
.plate .src{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
/* the question list leads. On a phone the columns stack in DOM order, so
   with the list second the reader met an answer to a question they had not
   been shown yet. It is first in the markup and first on the left. */
.plate .body{display:grid;grid-template-columns:316px minmax(0,1fr)}
@media(max-width:920px){.plate .body{grid-template-columns:1fr}}
/* the answer column was shorter than the question list beside it, which
   left a pool of empty white under the citations and made the plate look
   unfinished. The column is now a flex stack and the citation row is
   pushed to its foot, so both columns end on the same line. */
.plate .main{padding:30px 28px 32px;min-height:266px;
  display:flex;flex-direction:column}
.plate .main .answer{flex:1;display:flex;flex-direction:column}
.plate .main .cite{margin-top:auto}
.qline{display:flex;gap:14px;align-items:flex-start}
.qline .cue{font-family:var(--mono);font-size:11px;color:var(--indigo);padding-top:7px;flex:none}
.qline .q{font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.022em;line-height:1.32}
.answer{margin-top:24px;padding-top:20px;border-top:1px solid var(--hair-2);min-height:96px}
.answer .a{font-size:16px;line-height:1.66}
.answer .a b{color:var(--ink);font-weight:500}
.answer .a .hl{color:var(--indigo);font-weight:500}
.cite{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;border-top:1px solid var(--hair-2);padding-top:14px}
.cite span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint);
  padding-right:16px;margin-right:16px;border-right:1px solid var(--hair);text-transform:uppercase}
.cite span:last-child{border-right:0;margin-right:0;padding-right:0}
.cite span.k{color:var(--indigo)}
.caret{display:inline-block;width:7px;height:16px;background:var(--indigo);vertical-align:-3px;
  animation:blink 1.05s step-end infinite;margin-left:3px}
@keyframes blink{50%{opacity:0}}
.plate .aside{border-right:1px solid var(--hair-2);padding:22px 20px}
@media(max-width:920px){.plate .aside{border-right:0;border-bottom:1px solid var(--hair-2)}}
.asklab{display:flex;align-items:center;gap:8px}
.asklab .cursor{width:13px;height:13px;color:var(--indigo);flex:none}
.chips{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.chip{
  position:relative;text-align:left;display:flex;gap:11px;align-items:flex-start;
  padding:13px 34px 13px 13px;font-size:13.5px;line-height:1.45;color:var(--body);
  background:var(--raise);border:1px solid var(--hair);border-radius:9px;cursor:pointer;
  transition:transform var(--t-tap) var(--reg),border-color var(--t-tap) var(--reg),
             box-shadow var(--t-tap) var(--reg),color var(--t-tap) var(--reg),background var(--t-tap) var(--reg);
}
.chip:before{content:attr(data-n);font-family:var(--mono);font-size:9.5px;color:var(--faint);
  padding-top:3px;flex:none;transition:color var(--t-tap) var(--reg)}
/* the arrow is the affordance: it lives in the chip and slides on hover */
.chip:after{content:"→";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--faint);opacity:0;transition:opacity var(--t-tap) var(--reg),transform var(--t-tap) var(--reg)}
.chip:hover{color:var(--ink);border-color:var(--indigo);transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(62,74,226,.45)}
.chip:hover:before{color:var(--indigo)}
.chip:hover:after{opacity:1;transform:translateY(-50%) translateX(3px)}
.chip[aria-pressed="true"]{color:var(--ink);font-weight:500;
  border-color:var(--indigo);background:color-mix(in srgb,var(--indigo) 6%,var(--raise))}
.chip[aria-pressed="true"]:before{color:var(--indigo)}
.chip[aria-pressed="true"]:after{opacity:1;color:var(--indigo)}

/* until the visitor clicks once, the first question breathes */
.chips.hint .chip:first-child{animation:beckon 2.4s var(--reg) 1.2s 3 both}
@keyframes beckon{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(62,74,226,0)}
  30%{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(62,74,226,.5)}
  100%{transform:translateY(0)}
}
}
@media (prefers-reduced-motion: reduce){.chips.hint .chip:first-child{animation:none}}

/* proof: a measured strip, tabular ──────────────────────────────── */
/* the rules need a gutter on both sides, same rule as the surfaces */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;
  border-top:1px solid var(--hair)}
.proof div{padding:30px 34px 30px 0;border-right:1px solid var(--hair-2)}
.proof div + div{padding-left:34px}
.proof div:last-child{border-right:0;padding-right:0}
@media(max-width:1100px){.proof div{padding:26px 24px 26px 0}.proof div + div{padding-left:24px}}
@media(max-width:820px){.proof{grid-template-columns:repeat(2,1fr)}
  .proof div:nth-child(even){border-right:0;padding-right:0}
  .proof div:nth-child(odd){padding-left:0}
  .proof div:nth-child(n+3){border-top:1px solid var(--hair-2)}}
/* a fixed lockup line, so a partner logo and a wordmark share one baseline */
.proof .mk{height:34px;display:flex;align-items:center}
.proof .mk img{height:30px;width:auto;max-width:100%;display:block}
/* the partner mark is supplied for light grounds only, so in dark it gets its
   own white plate rather than being recolored — the mark itself never changes */
.proof .mk .wht{display:flex;align-items:center}
/* a single-color wordmark is optically much wider than a framed badge at the
   same box height — match cap height, not bounding box */
.proof .mk img.mono{height:15px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .proof .mk .wht{background:#fff;padding:4px 8px;border-radius:5px}
  :root:not([data-theme="light"]) .proof .mk .wht img{height:26px}
}
:root[data-theme="dark"] .proof .mk .wht{background:#fff;padding:4px 8px;border-radius:5px}
:root[data-theme="dark"] .proof .mk .wht img{height:26px}
/* the single-color mark takes its approved reversed form instead of a plate */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .proof .mk img.mono{filter:invert(1)}
}
:root[data-theme="dark"] .proof .mk img.mono{filter:invert(1)}
.proof b{display:block;font-family:var(--mono);font-size:15px;color:var(--ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1}
.proof span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-top:11px;line-height:1.6;min-height:3.2em}

/* ── sections ───────────────────────────────────────────────────── */
section{padding:120px 0}
/* the band is the last thing in 03/10 and carries its own 88px foot —
   the section padding on top of it reads as a hole */
#s2b{padding-bottom:0}
/* ── the page's meter ───────────────────────────────────────────────
   Ten sections of cream at one value is a document. The page now runs on
   three grounds and alternates between them, so blocks are visible from
   across the room: PAPER (argument) · RAISED (evidence) · INK (mechanism).
   Value only — no colored grounds. The hues are identity; the moment they
   become wallpaper the page stops being a specimen and starts being a
   brochure. Accents never land two sections running. */
section.on-raise{background:var(--raise);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:112px 0}
section.on-ink{background:#0B0D11;padding:132px 0;
  --coral-ink:#FF9A9A;
  --paper:#0B0D11; --raise:#14171D; --ink:#F5F5F2; --body:#ADADA7;
  --indigo:#8B93FF; --ok:#3FD3C0; --blue-ink:#7ACFFF;
  --mut:#8E8E86; --faint:#868680; --hair:#252932; --hair-2:#1B1F26;
  --teal-ink:#3FD3C0; --ok-ink:#3FD3C0; --warn-ink:#F2B44B; --purple-ink:#CE92F5;
    --coral-ink:#FF9A9A;
  --lift:0 1px 2px rgba(0,0,0,.6), 0 26px 64px -36px rgba(0,0,0,.95)}
/* in the dark theme the accents invert too, so the meter survives the toggle */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) section.on-ink{background:#F3F3EE;
    --paper:#F3F3EE; --raise:#FFFFFF; --ink:#0E1116; --body:#54544E;
    --indigo:#3E4AE2; --ok:#0E9384; --blue-ink:#0A6EAE;
    --mut:#5C5C56; --faint:#6C6C65; --hair:#E2E2DB; --hair-2:#EDEDE6;
    --teal-ink:#0B7A6E; --ok-ink:#0B7A6D; --warn-ink:#8A5708; --purple-ink:#8B2FD0;
    --coral-ink:#C2352F;
    --lift:0 1px 2px rgba(14,17,22,.05), 0 22px 60px -34px rgba(14,17,22,.30)}
}
:root[data-theme="dark"] section.on-ink{background:#F3F3EE;
  --paper:#F3F3EE; --raise:#FFFFFF; --ink:#0E1116; --body:#54544E;
  --indigo:#3E4AE2; --ok:#0E9384; --blue-ink:#0A6EAE;
  --mut:#5C5C56; --faint:#6C6C65; --hair:#E2E2DB; --hair-2:#EDEDE6;
  --teal-ink:#0B7A6E; --ok-ink:#0B7A6D; --warn-ink:#8A5708; --purple-ink:#8B2FD0;
    --coral-ink:#C2352F;
  --lift:0 1px 2px rgba(14,17,22,.05), 0 22px 60px -34px rgba(14,17,22,.30)}
@media(max-width:760px){section.on-raise{padding:72px 0}section.on-ink{padding:84px 0}}
/* the record section already carries its own inverted band, so it stays paper */

@media(max-width:760px){section{padding:76px 0}}
.lede-h2{font-size:clamp(30px,4.4vw,50px);font-weight:600;letter-spacing:-.036em;line-height:1.08;
  color:var(--ink);max-width:19ch;margin-top:34px}
/* color is declared, not inherited: a token rescoped by .band or .on-ink only
   reaches an element that actually asks for it */
.lede-p{font-size:17.5px;margin-top:20px;max-width:56ch;color:var(--body)}
/* the keyword carries the identity gradient — the one place it appears in type */
em.k{
  font-style:normal;
  color:var(--indigo);                                   /* fallback if clip is unsupported */
  background:linear-gradient(96deg,#26AFFF 0%,#3E4AE2 46%,#B961EE 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-right:.04em;                                   /* the clip crops descenders otherwise */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  em.k{-webkit-text-fill-color:var(--indigo);background:none}
}

/* the file: before and after ────────────────────────────────────── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border:1px solid var(--hair)}
@media(max-width:900px){.ba{grid-template-columns:1fr}}
.ba .p{padding:32px}
.ba .p:first-child{border-right:1px solid var(--hair);background:var(--paper)}
@media(max-width:900px){.ba .p:first-child{border-right:0;border-bottom:1px solid var(--hair)}}
.ba .p:last-child{background:var(--raise)}
.ba .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.filename{font-family:var(--mono);font-size:30px;color:var(--ink);margin-top:26px;letter-spacing:-.02em}
.nothing{font-size:15px;color:var(--mut);margin-top:12px}
.sr{display:flex;gap:18px;font-family:var(--mono);font-size:12.5px;line-height:2.15;letter-spacing:.01em}
.sr .k{width:100px;flex:none;color:var(--faint)}
.sr .v{color:var(--ink)}
.sr .v.a{color:var(--indigo)}
.sr .v.g{color:var(--ok-ink)}
.aside-note{font-size:15px;margin-top:26px;max-width:66ch;color:var(--body)}
.aside-note b{color:var(--ink);font-weight:500}

/* surfaces: color as identity, one hue each ────────────────────── */
.surf{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;border-top:1px solid var(--hair)}
@media(max-width:900px){.surf{grid-template-columns:1fr}}
/* generous gutters: the tile must never sit against a rule */
.surf .s{padding:42px 40px 8px 0;border-right:1px solid var(--hair)}
.surf .s + .s{padding-left:40px}
.surf .s:last-child{border-right:0;padding-right:0}
@media(max-width:1100px){.surf .s{padding:38px 28px 32px 0}.surf .s + .s{padding-left:28px}}
@media(max-width:900px){.surf .s,.surf .s + .s{border-right:0;border-bottom:1px solid var(--hair);
  padding:32px 0 30px}}
.swatch{display:flex;align-items:center;gap:14px}
.tile{width:56px;height:56px;flex:none;display:block}
.tile img{display:block;width:100%;height:100%}
.swatch .hex{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);line-height:1.6;padding-top:1px;white-space:nowrap}
.swatch .hex b{display:block;font-weight:400;color:var(--faint);letter-spacing:.18em;margin-bottom:5px}

.surf h3{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.028em;margin-top:20px}
.surf .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px}
.surf p{font-size:15px;margin-top:14px;max-width:34ch}

/* who stands behind this — the marks are at the top for recognition;
   here is where the reader finds out what the relationships actually are */
/* handling — the spec table, two columns ────────────────────────── */
.tbl.spec table{min-width:520px}
.tbl.spec .rowlab{width:300px;padding:20px 30px 18px 0}
.tbl.spec td{font-size:15.5px;padding:18px 0;line-height:1.62}
.tbl.spec td + td{max-width:74ch}
.assure{display:flex;flex-wrap:wrap;align-items:center;gap:0 0;margin-top:26px}
.assure span{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);padding:2px 16px;border-right:1px solid var(--hair)}
.assure span:first-child{padding-left:0}
.assure span:last-child{border-right:0}
.assure a{color:var(--indigo);border-bottom:1px solid color-mix(in srgb,var(--indigo) 35%,transparent)}
.assure a:hover{border-bottom-color:var(--indigo)}

/* ladder ────────────────────────────────────────────────────────── */
.ladder{margin-top:56px;border-top:1px solid var(--hair)}
.rung{display:grid;grid-template-columns:180px 1fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--hair);
  transition:background var(--t-set) var(--reg)}
@media(max-width:800px){.rung{grid-template-columns:1fr;gap:10px}}
.rung .when{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);padding-top:7px}
.rung h3{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.022em}
.rung p{font-size:15.5px;margin-top:9px;max-width:62ch}


/* why now — four things already true ─────────────────────────────── */
.four{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:52px;border-top:1px solid var(--hair)}
@media(max-width:860px){.four{grid-template-columns:1fr}}
.four .it{display:grid;grid-template-columns:64px 1fr;gap:0;padding:32px 40px 32px 0;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.four .it:nth-child(even){border-right:0;padding-right:0}
.four .it:nth-child(even){padding-left:40px}
.four .it:nth-child(n+3){padding-bottom:6px;border-bottom:0}
@media(max-width:1100px){.four .it{padding:28px 26px 28px 0}.four .it:nth-child(even){padding-left:26px}}
@media(max-width:860px){.four .it,.four .it:nth-child(even){border-right:0;padding:26px 0;
  border-bottom:1px solid var(--hair);padding-left:0}
  .four .it:last-child{border-bottom:0}}
.four .n{font-family:var(--mono);font-size:23px;font-weight:500;line-height:1;letter-spacing:-.02em}
.four h3{font-size:18.5px;font-weight:600;color:var(--ink);letter-spacing:-.022em;line-height:1.3}
.four p{font-size:15px;margin-top:11px;max-width:46ch}


/* ── one break in the rhythm ──────────────────────────────────────
   Eleven sections of cream at one temperature is a document, not a
   page. The thesis — files becoming a record — takes the inverse
   ground, full bleed, once. Rescoping the tokens inside the band
   means every child adapts without a single override. */
.band{background:#0B0D11;padding:84px 0 88px;margin:64px 0 0;
  --coral-ink:#FF9A9A;
  --paper:#0B0D11; --raise:#14171D; --ink:#F5F5F2; --body:#ADADA7;
  --mut:#8E8E86; --faint:#868680; --hair:#252932; --hair-2:#1B1F26;
  --indigo:#8B93FF; --ok:#3FD3C0; --ok-ink:#3FD3C0; --blue-ink:#7ACFFF; --purple-ink:#CE92F5;
  --lift:0 1px 2px rgba(0,0,0,.6), 0 26px 64px -36px rgba(0,0,0,.95)}
.band .ba{margin-top:0;grid-template-columns:.8fr 1.2fr}
@media(max-width:900px){.band .ba{grid-template-columns:1fr}}
.bandnote{font-size:15px;line-height:1.6;color:var(--body);margin-top:26px;max-width:64ch}
@media(max-width:700px){.band{padding:52px 0 56px;margin:44px 0 52px}}
.band .bandlab{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:22px}
.band h3{font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.032em;
  color:var(--ink);line-height:1.1;max-width:26ch;margin-bottom:34px}
/* in the dark theme the page is already ink, so the band goes to paper —
   the break is always an inversion of whatever the reader is on */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band{background:#F3F3EE;
    --coral-ink:#C2352F;
    --paper:#F3F3EE; --raise:#FFFFFF; --ink:#0E1116; --body:#54544E;
    --indigo:#3E4AE2; --ok:#0E9384; --ok-ink:#0B7A6D; --blue-ink:#0A6EAE; --purple-ink:#8B2FD0;
    --mut:#5C5C56; --faint:#6C6C65; --hair:#E2E2DB; --hair-2:#EDEDE6;
    --lift:0 1px 2px rgba(14,17,22,.05), 0 22px 60px -34px rgba(14,17,22,.30)}
}
:root[data-theme="dark"] .band{background:#F3F3EE;
  --coral-ink:#C2352F;
  --paper:#F3F3EE; --raise:#FFFFFF; --ink:#0E1116; --body:#54544E;
  --indigo:#3E4AE2; --ok:#0E9384; --ok-ink:#0B7A6D; --blue-ink:#0A6EAE; --purple-ink:#8B2FD0;
  --mut:#5C5C56; --faint:#6C6C65; --hair:#E2E2DB; --hair-2:#EDEDE6;
  --lift:0 1px 2px rgba(14,17,22,.05), 0 22px 60px -34px rgba(14,17,22,.30)}
/* the journey — four steps are ours, the fifth is yours ──────────── */
.jour{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:54px}
@media(max-width:1000px){.jour{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.jour{grid-template-columns:1fr}}
.jour .st{padding:0 26px 0 0}
.jour .st:last-child{padding-right:0}
@media(max-width:1000px){.jour .st{padding:0 20px 26px 0}}
.jour .n{font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--faint);
  transition:color var(--t-set) var(--reg)}
.jour .st.lit .n{color:var(--ink)}
.jour .st.you .n{color:var(--purple-ink)}
.jour .rail{height:2px;background:var(--hair);margin-top:14px;position:relative;overflow:hidden}
.jour .rail:after{content:"";position:absolute;inset:0;background:var(--c,var(--indigo));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-plate) var(--reg)}
.jour .st.lit .rail:after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.jour .rail:after{transition:none}}
.jour .when{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-top:12px;display:block}
.jour h3{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:9px;
  line-height:1.28}
.jour .st.you h3{color:var(--purple-ink)}
.jour p{font-size:14px;margin-top:9px;max-width:26ch;color:var(--body)}
.ours{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.ours span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.ships{margin-top:40px;border-top:1px solid var(--hair);padding-top:26px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
@media(max-width:800px){.ships{grid-template-columns:1fr}}
.ships .lab{grid-column:1/-1;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.ships q{display:block;font-size:15.5px;font-style:italic;color:var(--body);
  border-left:2px solid var(--indigo);padding-left:14px;quotes:"\201C" "\201D"}

/* one connection, every tool ─────────────────────────────────────── */
.conn{display:grid;grid-template-columns:290px 1fr;gap:0;margin-top:52px;
  border-top:1px solid var(--hair)}
@media(max-width:900px){.conn{grid-template-columns:1fr}}
.conn .rec{padding:34px 40px 34px 0;border-right:1px solid var(--hair)}
@media(max-width:900px){.conn .rec{border-right:0;border-bottom:1px solid var(--hair);padding:28px 0}}
.conn .rec h3{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.026em}
.conn .rec .m{display:block;margin-bottom:10px}
.conn .mcp{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair-2)}
.conn .mcp b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--indigo);
  font-weight:500;display:block}
.conn .mcp span{font-size:14px;display:block;margin-top:8px;max-width:30ch}
.conn .cats{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:620px){.conn .cats{grid-template-columns:1fr}}
.conn .c{padding:30px 34px 30px 0;border-bottom:1px solid var(--hair);position:relative;
  cursor:default;transition:background var(--t-set) var(--reg)}
/* ── ask in plain English ───────────────────────────────────────────
   The page could say what ships; it is stronger to watch one thing get
   made. The record is consulted line by line, then the artefact renders. */
.ask{display:grid;grid-template-columns:1fr 380px;gap:0;margin-top:44px;border-top:1px solid var(--hair)}
@media(max-width:980px){.ask{grid-template-columns:1fr}}
.ask .askl{padding:30px 44px 30px 0;border-right:1px solid var(--hair)}
.ask .askr{padding:30px 0 30px 44px;display:flex;align-items:center}
@media(max-width:980px){.ask .askl{border-right:0;padding:26px 0}.ask .askr{padding:0 0 26px}}
.ask .lab{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.ask .q{font-size:21px;font-weight:500;color:var(--ink);letter-spacing:-.022em;line-height:1.35;
  margin-top:11px;max-width:30ch}
.trace{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:9px}
.trace li{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(4px);
  transition:opacity var(--t-set) var(--reg),transform var(--t-set) var(--reg)}
.ask.run .trace li{opacity:1;transform:none}
.ask.run .trace li[data-i="1"]{transition-delay:.15s}
.ask.run .trace li[data-i="2"]{transition-delay:.45s}
.ask.run .trace li[data-i="3"]{transition-delay:.75s}
.ask.run .trace li[data-i="4"]{transition-delay:1.05s}
.trace li:before{content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--indigo);transform:translateY(-1px)}
.trace li[data-i="2"]:before{background:var(--blue)}
.trace li[data-i="3"]:before{background:var(--purple-ink)}
.trace li[data-i="4"]:before{background:var(--ok-ink)}
.trace em{font-style:normal;color:var(--faint)}
.trace b{font-weight:400;color:var(--ink)}
.askout{font-size:14.5px;margin-top:26px;max-width:42ch;color:var(--body)}
.askout b{color:var(--ink);font-weight:500}
@media (prefers-reduced-motion: reduce){.trace li{opacity:1;transform:none;transition:none}}

/* the artefact itself, rendered on brand */
.sig{width:100%;background:#FFFFFF;border:1px solid #E2E2DB;border-radius:10px;padding:20px 22px;
  display:flex;gap:16px;align-items:flex-start;
  box-shadow:0 1px 2px rgba(14,17,22,.05), 0 24px 56px -30px rgba(14,17,22,.55);
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity var(--t-plate) var(--reg) 1.25s,transform var(--t-plate) var(--reg) 1.25s}
.ask.run .sig{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.sig{opacity:1;transform:none;transition:none}}
.sigmark{width:40px;height:40px;border-radius:11.25px;border:2.2px solid #0E1116;background:#fff;
  display:flex;align-items:center;justify-content:center;gap:4px;flex:none}
.sigmark i{width:6.25px;height:6.25px;border-radius:50%;display:block}
.sigbody{min-width:0;flex:1}
.signame{font-size:19px;font-weight:600;color:#0E1116;letter-spacing:-.025em;line-height:1}
.sigrole{font-size:12px;color:#54544E;margin-top:5px}
.sigrole b{color:#0E1116;font-weight:600}
.sigrow{display:flex;gap:14px;margin-top:9px;padding-top:9px;border-top:1px solid #EDEDE6;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.sigrow span{color:#63635D;width:44px;flex:none}
.sigrow a{color:#3E4AE2}
.sigrow + .sigrow{border-top:0;padding-top:0;margin-top:5px}
.sigfoot{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#6E6E68;margin-top:14px;padding-top:9px;border-top:1px solid #EDEDE6}

/* the record writes itself — the row lands, then the dot it proves lights.
   Same idea as the ingest animation: onboarding is not filing, it is the
   system writing down what it knows. */
.ba .labrow{display:flex;align-items:baseline;gap:14px}
.ba .state{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);transition:color var(--t-set) var(--reg)}
.write.done .state{color:var(--ok-ink)}
.wmark{display:flex;align-items:center;justify-content:center;gap:5.2px;width:52px;height:52px;
  margin-top:18px;border:2.8px solid var(--hair);border-radius:14.6px;
  transition:border-color var(--t-set) var(--reg)}
.write.done .wmark{border-color:var(--ink)}
.wmark i{width:8.1px;height:8.1px;border-radius:50%;background:var(--hair);display:block;
  transition:background var(--t-set) var(--reg),transform var(--t-set) var(--reg)}
.write.r1 .wmark i[data-d="1"]{background:#26AFFF}
.write.r3 .wmark i[data-d="2"]{background:#3E4AE2}
.write.r5 .wmark i[data-d="3"]{background:#B961EE}
.ba .sr{opacity:0;transform:translateY(3px);
  transition:opacity var(--t-set) var(--reg),transform var(--t-set) var(--reg)}
.write.r1 .sr[data-r="1"],.write.r2 .sr[data-r="2"],.write.r3 .sr[data-r="3"],
.write.r4 .sr[data-r="4"],.write.r5 .sr[data-r="5"]{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.ba .sr{opacity:1;transform:none;transition:none}}

/* the same catalog, seen through a license. Everything the page says about
   licensee scoping — "they see only what their license permits" — is one
   toggle away from being visible instead of claimed. */
.seat{display:flex;gap:3px;margin-left:18px;background:var(--paper);border:1px solid var(--hair);
  border-radius:8px;padding:2px}
.seat button{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);padding:6px 10px;border-radius:6px;white-space:nowrap;
  transition:background var(--t-tap) var(--reg),color var(--t-tap) var(--reg)}
.seat button[aria-pressed="true"]{background:var(--chip-bg);color:var(--chip-fg)}
@media(max-width:860px){.seat{margin-left:auto}.apptop .u{display:none}}
@media(max-width:520px){.seat button{font-size:8px;padding:5px 7px}}
.scope{display:flex;align-items:center;gap:9px;margin-top:11px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal-ink);
  max-height:0;opacity:0;overflow:hidden;transition:max-height var(--t-set) var(--reg),
  opacity var(--t-set) var(--reg),margin var(--t-set) var(--reg)}
.scope i{width:7px;height:7px;border-radius:50%;background:var(--teal-ink);flex:none}
.app.lic .scope{max-height:24px;opacity:1}
.app.lic .file:has(.nm[data-out]){opacity:.16;pointer-events:none;filter:saturate(0)}
.file{transition:opacity var(--t-set) var(--reg),filter var(--t-set) var(--reg),
  border-color var(--t-tap) var(--reg),background var(--t-tap) var(--reg)}
/* :has() is well supported, but keep a class fallback for older engines */
.app.lic .file.out{opacity:.16;pointer-events:none;filter:saturate(0)}

/* ── the rights gate ────────────────────────────────────────────────
   A page break that argues. Assets travel toward a gate; each is judged as
   it crosses. Cleared ones pass. The lapsed one dissolves at the line and
   never appears on the other side — because "it doesn't ship" should mean
   it doesn't get through, not that it gets through wearing a label.

   Built live rather than embedded as a GIF: it renders at device
   resolution, inverts with the theme, costs a fraction of the weight and
   stops for prefers-reduced-motion.

   It carries NO plate frame. The frame belongs to one block only (the
   journey); a break that borrows it competes with the block it punctuates. */
.gate{position:relative;background:#0B0D11;padding:78px 0 84px;overflow:hidden;
  --coral-ink:#FF9A9A;
  --paper:#0B0D11; --raise:#14171D; --ink:#F5F5F2; --body:#ADADA7;
  --indigo:#8B93FF; --ok:#3FD3C0; --ok-ink:#3FD3C0; --blue-ink:#7ACFFF;
  --mut:#8E8E86; --faint:#868680; --hair:#252932; --hair-2:#1B1F26}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gate{background:#F3F3EE;
    --coral-ink:#C2352F;
    --paper:#F3F3EE; --raise:#FFFFFF; --ink:#0E1116; --body:#54544E;
    --indigo:#3E4AE2; --ok:#0E9384; --ok-ink:#0B7A6D; --blue-ink:#0A6EAE;
    --mut:#5C5C56; --faint:#6C6C65; --hair:#E2E2DB; --hair-2:#EDEDE6}
}
:root[data-theme="dark"] .gate{background:#F3F3EE;
  --coral-ink:#C2352F;
  --paper:#F3F3EE; --raise:#FFFFFF; --ink:#0E1116; --body:#54544E;
  --indigo:#3E4AE2; --ok:#0E9384; --ok-ink:#0B7A6D; --blue-ink:#0A6EAE;
  --mut:#5C5C56; --faint:#6C6C65; --hair:#E2E2DB; --hair-2:#EDEDE6}
@media(max-width:700px){.gate{padding:56px 0 60px}}

.gatetop{text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint)}
.belt{position:relative;height:186px;margin-top:26px}
@media(max-width:700px){.belt{height:150px}}
/* the gate itself: a vertical scan line the assets must cross */
.belt .line{position:absolute;left:50%;top:12px;bottom:12px;width:1px;background:var(--hair);
  transform:translateX(-.5px)}
.belt .line:after{content:"";position:absolute;left:-.5px;top:34%;bottom:34%;width:2px;
  background:var(--ink);opacity:.55}
.belt .verdict{position:absolute;left:50%;top:4px;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ok-ink);opacity:0;transition:opacity .22s var(--reg);white-space:nowrap}
.belt .verdict.on{opacity:1}
.belt .verdict.no{color:var(--coral-ink)}
.tile2{position:absolute;top:50%;left:0;width:58px;height:58px;margin-top:-29px;border-radius:16.3px;
  border:3.2px solid var(--ink);background:transparent;
  display:flex;align-items:center;justify-content:center;gap:5.8px}
.tile2 i{width:9.1px;height:9.1px;border-radius:50%;display:block}
.tile2.bad{border-color:var(--coral-ink)}
@media(max-width:700px){.tile2{width:46px;height:46px;margin-top:-23px;border-radius:12.9px;
  border-width:2.5px;gap:4.6px}
  .tile2 i{width:7.2px;height:7.2px}}
/* the belt fades at both edges so tiles arrive and leave rather than pop */
.belt:before,.belt:after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;
  pointer-events:none}
/* on a phone a 120px fade would swallow the belt — narrow it */
@media(max-width:700px){.belt:before,.belt:after{width:44px}}
.belt:before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.belt:after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.gateh{text-align:center;margin-top:30px}
.gateh .rule{width:52px;height:1px;background:var(--hair);margin:0 auto 22px}
.gateh h3{font-size:clamp(26px,3.6vw,40px);font-weight:600;letter-spacing:-.034em;
  color:var(--ink);line-height:1.1}
.gateh p{font-size:15px;color:var(--body);margin-top:14px;max-width:52ch;
  margin-left:auto;margin-right:auto}

/* ── plate furniture ────────────────────────────────────────────────
   The social posts frame every statement as a plate: registration marks
   at the corners, PRELIGHT / ATLAS top-left, the operation top-right, the
   palette stated at the foot. The ink blocks are the page's plates, so
   they carry the same frame. Only there — page-wide it would be furniture. */
.pframe{position:absolute;inset:0;pointer-events:none;color:var(--faint)}
.pframe i{position:absolute;width:9px;height:9px;opacity:.62}
.pframe i:before,.pframe i:after{content:"";position:absolute;background:currentColor}
.pframe i:before{left:0;right:0;top:4px;height:1px}
.pframe i:after{top:0;bottom:0;left:4px;width:1px}
.pframe i:nth-child(1){left:26px;top:24px}
.pframe i:nth-child(2){right:26px;top:24px}
.pframe i:nth-child(3){left:26px;bottom:24px}
.pframe i:nth-child(4){right:26px;bottom:24px}
.pframe u{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;opacity:.72}
.pframe .tl{left:52px;top:20px}
.pframe .tr{right:52px;top:20px}
.pframe .bl{left:52px;bottom:20px}
.pframe .br{right:52px;bottom:20px;letter-spacing:.16em}
@media(max-width:900px){.pframe .bl,.pframe .br{display:none}
  .pframe i:nth-child(3),.pframe i:nth-child(4){display:none}}
@media(max-width:640px){.pframe u{font-size:8px;letter-spacing:.16em}
  .pframe .tl{left:40px}.pframe .tr{right:40px}
  .pframe i:nth-child(1){left:18px}.pframe i:nth-child(2){right:18px}}
section.on-ink,.band{position:relative}

/* ── one connection: hovering a tool lights the endpoint it connects to ── */
/* the top rule draws in the tool's own hue — the connection, made visible */
.conn .c:before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-set) var(--reg)}
.conn .c:hover:before,.conn .c:focus-visible:before{transform:scaleX(1)}
.conn .c:hover,.conn .c:focus-visible{background:color-mix(in srgb,var(--c) 7%,var(--raise));outline:none}
.conn .c:hover .k,.conn .c:focus-visible .k{color:var(--c)}
/* and the other end of the link answers */
.conn.live .rec{background:color-mix(in srgb,var(--live) 6%,transparent)}
.conn.live .mcp b{color:var(--live)}
.conn .rec{transition:background var(--t-set) var(--reg)}
.conn .mcp b{transition:color var(--t-set) var(--reg)}
.conn .rec .beam{display:block;height:2px;margin-top:16px;background:var(--hair);position:relative;overflow:hidden}
.conn .rec .beam:after{content:"";position:absolute;inset:0;background:var(--live,var(--indigo));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-plate) var(--reg)}
.conn.live .rec .beam:after{transform:scaleX(1)}
.conn .cats .c:nth-child(odd){padding-left:40px;border-right:1px solid var(--hair)}
.conn .cats .c:nth-child(even){padding-left:34px}
@media(max-width:900px){.conn .cats .c:nth-child(odd){padding-left:0}}
@media(max-width:620px){.conn .cats .c,.conn .cats .c:nth-child(odd){padding-left:0;border-right:0}}
.conn .c:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){.conn .c:nth-last-child(2){border-bottom:1px solid var(--hair)}}
/* the category is the heading and the vendor list is its content — an
   earlier draft had it the other way round, which put "Perplexity · Claude ·
   Cowork · Gemini" into the document outline as an <h4> */
.conn .c h4.k{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);display:block;transition:color var(--t-tap) var(--reg)}
.conn .c .tools{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:11px}
.conn .c p{font-size:14.5px;margin-top:10px;max-width:38ch}
.conn .c .tools{max-width:none}
.typed{margin-top:34px;border-top:1px solid var(--hair);padding-top:24px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
@media(max-width:800px){.typed{grid-template-columns:1fr}}
.typed .lab{grid-column:1/-1;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.typed q{display:block;font-size:15px;font-style:italic;color:var(--body);
  border-left:2px solid var(--hair);padding-left:14px;quotes:"\201C" "\201D"}

/* questions ─────────────────────────────────────────────────────── */
.qa{margin-top:48px;border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:baseline;gap:20px;
  font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:before{content:attr(data-n);font-family:var(--mono);font-size:9.5px;color:var(--faint);flex:none}
.qa summary:after{content:"+";font-family:var(--mono);font-size:16px;color:var(--indigo);margin-left:auto;
  font-weight:400}
.qa details[open] summary:after{content:"–"}
.qa .ans{padding:0 0 26px 40px;font-size:15.5px;max-width:70ch}

/* pricing as a specification table ──────────────────────────────── */
.tbl{margin-top:56px;border-top:1px solid var(--hair);overflow-x:auto}
/* five columns do not fit a phone; say so rather than leaving the reader
   to discover the third tier by accident */
.tblhint{display:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-top:14px}
@media(max-width:900px){.tblhint{display:block}}
.tbl table{width:100%;border-collapse:collapse;min-width:820px}
.tbl th,.tbl td{text-align:left;padding:18px 24px 18px 0;border-bottom:1px solid var(--hair-2);
  vertical-align:top}
.tbl thead th{border-bottom:1px solid var(--hair);padding-top:24px}
.tbl thead .n{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.022em;display:block}
.tbl thead .w{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:block;margin-top:7px;font-weight:400}
.tbl .rowlab{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);width:160px}
.tbl .price{font-family:var(--mono);font-size:22px;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.2}
.tbl .price .pv{display:block;line-height:1.2}
.tbl .price .pu{display:block;font-family:var(--sans);font-size:11.5px;font-weight:400;
  letter-spacing:.02em;color:var(--faint);margin-top:6px}
.tbl td{font-size:14.5px}
.tbl .fig{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--body)}
/* the enterprise cell is a conversation, not a number — it still has to
   sit on the price row's baseline, so it borrows its weight, not its font */
.tbl .talk{display:flex;width:-moz-fit-content;width:fit-content;align-items:center;gap:9px;line-height:1.2;
  font-family:var(--sans);font-size:17px;font-weight:600;
  color:var(--indigo);letter-spacing:-.018em;
  border-bottom:1px solid color-mix(in srgb,var(--indigo) 32%,transparent);
  transition:border-color var(--t-tap) var(--reg),transform var(--t-tap) var(--reg)}
.tbl .talk.q{font-size:15px;font-weight:500;color:var(--mut);
  border-bottom-color:color-mix(in srgb,var(--mut) 30%,transparent)}
.tbl .talk.q:hover{color:var(--indigo);border-bottom-color:var(--indigo)}
.tbl .talk:hover{border-bottom-color:var(--indigo)}
.tbl .talk:hover .ar{transform:translateX(3px)}
.tbl .talk .ar{transition:transform var(--t-tap) var(--reg);display:inline-block;font-size:14px}

/* finale ────────────────────────────────────────────────────────── */
.finale{border:1px solid var(--ink);background:var(--raise);overflow:hidden}
.finale .in{padding:64px 56px 56px}
@media(max-width:700px){.finale .in{padding:38px 26px}}
.finale h2{font-size:clamp(32px,5vw,58px);font-weight:600;letter-spacing:-.04em;color:var(--ink);
  line-height:1.02;max-width:15ch;margin-top:26px}
.finale p{font-size:17.5px;margin-top:24px;max-width:54ch}
.finale .row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}

/* ── the ask: two doors, each saying what it opens ──────────────────
   The foot of the page had four controls — choose files, clear, submit,
   book a demo — and nothing telling anyone which did what. It now has two,
   side by side, each with one line underneath saying what happens when you
   press it. Two CTAs with different consequences need one line each.

   Both point at services that already exist rather than at a form built
   into the page: an email draft for the folder, a calendar for the demo.
   That trades the in-browser drop zone for something operable on Monday. */
.asks{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:38px;
  border-top:1px solid var(--hair)}
@media(max-width:820px){.asks{grid-template-columns:1fr}}
.asks .ask2{padding:34px 44px 0 0;border-right:1px solid var(--hair)}
.asks .ask2 + .ask2{padding-left:44px}
.asks .ask2:last-child{border-right:0;padding-right:0}
@media(max-width:820px){
  .asks .ask2,.asks .ask2 + .ask2{border-right:0;padding:28px 0;
    border-bottom:1px solid var(--hair)}
  .asks .ask2:last-child{border-bottom:0;padding-bottom:0}}
.asks .ask2 p{font-size:14.5px;line-height:1.6;color:var(--body);margin-top:20px;
  max-width:42ch}
.asks .ask2 p b{color:var(--ink);font-weight:500}

.asks .ask2 .folder-note{font-size:14.5px;line-height:1.6;color:var(--body);margin-top:16px;max-width:42ch}

/* quick answers — after the ask, never before it. Six one-liners a buyer
   can check without scrolling back up; no accordion, because hiding an
   answer at the foot of a page is a cost with no benefit. */
.qk{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair)}
@media(max-width:820px){.qk{grid-template-columns:1fr}}
.qk .q{font-size:14.5px;line-height:1.6;color:var(--body);max-width:46ch;
  padding:26px 40px 26px 0;border-bottom:1px solid var(--hair)}
.qk .q:nth-child(even){padding-left:40px;border-left:1px solid var(--hair)}
@media(max-width:1100px){.qk .q{padding:22px 26px 22px 0}.qk .q:nth-child(even){padding-left:26px}}
@media(max-width:820px){.qk .q,.qk .q:nth-child(even){padding:22px 0;border-left:0}}
.qk .q:nth-last-child(-n+2){border-bottom:0}
@media(max-width:820px){.qk .q:nth-last-child(2){border-bottom:1px solid var(--hair)}}
.qk .k{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.018em;
  margin-bottom:8px}
.qk a{color:var(--indigo);border-bottom:1px solid color-mix(in srgb,var(--indigo) 34%,transparent)}
.qk a:hover{border-bottom-color:var(--indigo)}

footer{border-top:1px solid var(--hair);padding:44px 0 68px;margin-top:120px}
/* the row was overflowing its 1180px container by three pixels, so the link
   list wrapped to a second line and the auto margin flung it right. Slack,
   not a tighter fit: a footer that re-wraps when a font falls back is not
   fixed, it is postponed. */
.footrow{display:flex;column-gap:22px;row-gap:14px;align-items:center;flex-wrap:wrap}
/* the mark above is drawn for whichever surface you are on — the readout
   says so, which is the product's own trick performed on itself */
.surfout{padding-left:26px;border-left:1px solid var(--hair)}
.surfout b{color:var(--blue-ink);font-weight:400}
@media(max-width:760px){.surfout{padding-left:0;border-left:0}}
.footrow .r{margin-left:auto;display:flex;gap:0;flex-wrap:wrap}
.footrow .r a{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);padding:0 12px;border-right:1px solid var(--hair);
  transition:color var(--t-tap) var(--reg)}
.footrow .r a:hover{color:var(--ink)}
.footrow .r a:last-of-type{border-right:0;padding-right:0}
/* the logos are the wayfinding — people scan a footer for the glyph, not for
   the word "Instagram" set in 9.5px Menlo */
.footrow .r a.soc{display:inline-flex;align-items:center;padding:0 13px}
.footrow .r a.soc svg{width:15px;height:15px;display:block}
.footgl{padding:0 0 0 14px;border-left:1px solid var(--hair);margin-left:0}
@media(min-width:561px){.footgl{display:none}}
/* six inline links in one non-wrapping row were 515px wide inside a 390px
   phone — the only thing on the page that made the document scroll
   sideways. On a phone the row becomes a left-aligned wrapping list and the
   dividers become row rhythm rather than a single rule. */
@media(max-width:640px){
  .footrow .r{margin-left:0;width:100%;row-gap:10px}
  .footrow .r a{padding:0 12px 0 0;margin-right:12px;border-right:1px solid var(--hair)}
  .footrow .r a:last-of-type{margin-right:0}
  .footgl{padding-left:0;border-left:0}
}


/* ── 03/09 · the catalog, as it actually looks ──────────────────── */
.app{margin-top:46px;border:1px solid var(--hair);border-radius:12px;overflow:hidden;
  background:var(--raise);box-shadow:var(--lift);display:grid;grid-template-columns:186px 1fr}
@media(max-width:860px){.app{grid-template-columns:1fr}.apprail{display:none}}
.apprail{background:var(--paper);border-right:1px solid var(--hair);padding:16px 12px 14px;
  display:flex;flex-direction:column;gap:14px}
.apprail .wm b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1}
.apprail .wm span{display:block;font-size:11.5px;font-weight:600;color:var(--blue-ink);letter-spacing:.06em;margin-top:2px}
.brandcard{border:1px solid var(--hair);border-radius:9px;background:var(--raise);padding:8px 10px}
.brandcard .b{font-size:9px;color:var(--mut)}
.brandcard .n{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-top:2px}
.appnav{display:flex;flex-direction:column;gap:2px}
.appnav a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  font-size:12.5px;color:var(--body)}
.appnav a.on{background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue-ink);font-weight:600}
.appnav a i{width:12px;height:12px;flex:none;opacity:.75}
.appsub{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.appsub div{display:flex;align-items:center;gap:9px;padding:6px 9px;font-size:12px;
  font-weight:600;letter-spacing:.04em;color:var(--mut)}
.apprail .foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--faint)}

.appmain{min-width:0}
.apptop{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--hair)}
.apptop .t{font-size:13px;font-weight:600;color:var(--ink)}
.apptop .u{margin-left:auto;display:flex;align-items:center;gap:8px}
.apptop .u .usr{font-size:10px;color:var(--mut);text-align:right;line-height:1.3}
.apptop .u .av{width:22px;height:22px;border-radius:50%;background:var(--pill-bg);color:var(--pill-fg);
  font-size:10px;font-weight:600;display:grid;place-items:center}
.appbody{padding:20px}
.appbar{display:flex;align-items:center;gap:14px}
/* the mock is a depiction of the product: it must not put headings into the
   page outline, or a screen reader reads a second document */
.appbar .apph3{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.025em}
.upload{margin-left:auto;background:var(--chip-bg);color:var(--chip-fg);border-radius:9px;padding:9px 15px;
  font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--blue) 60%,transparent)}
.search{margin-top:14px;border:1px solid var(--hair);border-radius:9px;background:var(--raise);
  padding:11px 14px;font-size:13px;color:var(--faint)}
.filters{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.filters span{border:1px solid var(--hair);border-radius:20px;padding:5px 12px;font-size:10.5px;
  letter-spacing:.06em;color:var(--mut);text-transform:uppercase;white-space:nowrap}
.filters span.on{background:var(--chip-bg);border-color:var(--chip-bg);color:var(--chip-fg)}
.group{margin-top:16px;border:1px solid var(--hair);border-radius:11px;padding:14px}
.group .gh{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:12px}
.group .gh b{color:var(--mut);font-weight:400}
.files{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:1080px){.files{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.files{grid-template-columns:repeat(2,1fr)}}
.file{border:1px solid var(--hair-2);border-radius:9px;overflow:hidden;background:var(--paper)}
.file .th{height:62px;display:grid;place-items:center;border-bottom:1px solid var(--hair-2);
  background:var(--raise)}
.file .th .ext{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--faint)}
.file .mt{padding:9px 10px 10px}
.file .nm{font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .ty{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--faint);margin-top:4px}
.review{display:inline-block;margin-top:6px;font-size:9px;letter-spacing:.08em;
  color:var(--coral-ink);background:color-mix(in srgb,var(--coral) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--coral) 32%,transparent);border-radius:20px;padding:2px 7px}
.dots3{display:flex;gap:2.5px}
.dots3 i{width:5px;height:5px;border-radius:50%;display:block}
.minirow{display:flex;gap:3px}
.minirow i{width:11px;height:11px;border-radius:3px;border:1.2px solid currentColor;display:block}

/* the detail drawer — the same panel the real Catalog opens on a click,
   here on hover, so the page shows what the record actually holds */
.app{position:relative}
.drawer{position:absolute;top:0;right:0;bottom:0;width:306px;background:var(--raise);
  border-left:1px solid var(--hair);padding:18px 18px 40px;overflow-y:auto;overflow-x:hidden;
  transform:translateX(101%);transition:transform var(--t-set) var(--reg);
  box-shadow:-24px 0 48px -32px rgba(14,17,22,.5)}
.app.open .drawer{transform:translateX(0)}
@media(max-width:860px){.drawer{display:none}}
@media (prefers-reduced-motion: reduce){.drawer{transition:none}}
.drawer .dn{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;word-break:break-word}
.drawer .tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.drawer .tags span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;
  padding:3px 8px;background:var(--paper);color:var(--mut);border:1px solid var(--hair)}
.drawer .tags .ok{background:color-mix(in srgb,var(--ok-ink) 12%,transparent);
  color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok-ink) 30%,transparent)}
.drawer .dl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:16px;padding-top:11px;border-top:1px solid var(--hair-2);display:block}
.drawer .sub{font-size:10px;letter-spacing:.04em;color:var(--mut);margin-top:12px;display:block}
.drawer .pal{font-size:11px;font-style:italic;color:var(--mut);margin-top:9px}
.drawer .sw{display:flex;gap:12px;margin-top:9px}
.drawer .sw i{display:block;width:26px;height:26px;border-radius:50%;margin:0 auto 5px}
.drawer .sw span{display:block;text-align:center;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.04em;color:var(--faint)}
.drawer .prov{margin-top:9px;display:grid;grid-template-columns:1fr auto;gap:7px 12px;align-items:baseline}
.drawer .prov b{font-size:10.5px;font-weight:400;color:var(--mut);line-height:1.4}
.drawer .prov em{font-style:italic;font-size:10.5px;color:var(--body);text-align:right}
.drawer .prov em.low{color:var(--warn-ink);font-style:normal}
.drawer .dd{font-size:11.5px;line-height:1.6;color:var(--body);margin-top:7px}
.drawer .chips2{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.drawer .chips2 span{font-size:9.5px;border:1px solid var(--hair);border-radius:6px;
  padding:3px 7px;color:var(--body);background:var(--paper)}
.drawer .hint{position:sticky;bottom:-40px;margin:20px -18px -40px;padding:12px 18px 14px;
  background:var(--raise);border-top:1px solid var(--hair-2);font-family:var(--mono);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.file{cursor:default;transition:border-color var(--t-tap) var(--reg),background var(--t-tap) var(--reg)}
.file:hover,.file:focus-visible{border-color:var(--blue);background:var(--raise);outline:none}
.file:hover .nm,.file:focus-visible .nm{color:var(--blue-ink)}

/* ── registration: one orchestrated load, then stillness ────────── */
@keyframes plateIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drawEdge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.identity{animation:drawEdge var(--t-plate) var(--reg) both}
.rise{opacity:0;animation:plateIn var(--t-plate) var(--reg) both}
.d1{animation-delay:.30s} .d2{animation-delay:.40s} .d3{animation-delay:.50s}
.d4{animation-delay:.62s} .d5{animation-delay:.78s} .d6{animation-delay:.94s}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1}
  .identity{transform:none}
}