/* ── tokens: shared with the product viewer (see out/oracle/site/index.html) ── */
 :root{
   --paper:#f7f4ec; --panel:#fdfbf5; --ink:#1d1a14; --muted:#6d675a;
   --rule:#d9d2c2; --accent:#8e1b1b; --wash:#efe9dc; --ok:#3f6b45;
   --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
   --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
 }
 @media(prefers-color-scheme:dark){
   :root{--paper:#14130f; --panel:#1c1a16; --ink:#e6e1d3; --muted:#9a9483;
         --rule:#332f26; --accent:#d1705f; --wash:#1a1814; --ok:#7fa886;}
 }
 :root[data-theme="dark"]{
   --paper:#14130f; --panel:#1c1a16; --ink:#e6e1d3; --muted:#9a9483;
   --rule:#332f26; --accent:#d1705f; --wash:#1a1814; --ok:#7fa886;
 }
 :root[data-theme="light"]{
   --paper:#f7f4ec; --panel:#fdfbf5; --ink:#1d1a14; --muted:#6d675a;
   --rule:#d9d2c2; --accent:#8e1b1b; --wash:#efe9dc; --ok:#3f6b45;
 }

 *{box-sizing:border-box;}
 html{-webkit-text-size-adjust:100%;}
 body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
   line-height:1.55;font-size:17px;overflow-x:hidden;}
 .wrap{max-width:940px;margin:0 auto;padding:0 24px;}
 .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
   color:var(--muted);}
 a{color:inherit;}

 /* ── nav ────────────────────────────────────────────────────────────────── */
 nav{border-bottom:1px solid var(--rule);}
 nav .wrap{display:flex;align-items:baseline;justify-content:space-between;
   padding-top:20px;padding-bottom:16px;gap:16px;}
 .word{font-size:19px;font-weight:600;letter-spacing:-.01em;text-decoration:none;}
 .word em{font-style:normal;color:var(--accent);}
 .navlink{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-decoration:none;
   border-bottom:1px solid var(--rule);padding-bottom:2px;}
 .navlink:hover{border-color:var(--accent);color:var(--accent);}

 /* ── hero ───────────────────────────────────────────────────────────────── */
 /* hero fills one view so the fold lands on a boundary, never mid-specimen */
 header .wrap{min-height:calc(100svh - 59px);display:flex;flex-direction:column;
   justify-content:center;position:relative;padding-top:56px;padding-bottom:96px;}
 @supports not (height:100svh){header .wrap{min-height:calc(100vh - 59px);}}
 h1{font-size:clamp(34px,4.6vw,50px);line-height:1.1;letter-spacing:-.022em;
   margin:14px 0 0;font-weight:600;}
 h1 .thin{color:var(--muted);font-weight:400;}
 h1 .hb{display:inline;} /* deterministic break above mobile; reflows below */
 @media(max-width:560px){h1 .hb{display:none;}}
 /* three tiers under the headline so the hero reads as hierarchy, not a block */
 .lede{font-size:21px;line-height:1.5;color:var(--ink);max-width:50ch;margin:30px 0 0;}
 .lede b{font-weight:600;}

 /* hero: copy left, the coverage list rendered as a stack of paper right */
 .hero-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(228px,.68fr);
   gap:48px;align-items:center;}
 .stack{position:relative;height:246px;}
 .sheet{position:absolute;left:0;right:0;background:var(--panel);border:1px solid var(--rule);
   padding:13px 16px 15px;box-shadow:0 8px 20px -16px rgba(0,0,0,.55);}
 .sheet .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
   text-transform:uppercase;font-weight:700;color:var(--ink);display:block;}
 .sheet .sub{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.45;display:block;}
 /* offsets < sheet height, so the sheets overlap and read as a stack, not a list */
 .s1{top:0;transform:rotate(-1.1deg);}
 .s2{top:38px;transform:rotate(.7deg);}
 .s3{top:76px;transform:rotate(-.5deg);}
 .s4{top:114px;transform:rotate(.9deg);}
 .s5{top:152px;transform:rotate(-.25deg);border-color:var(--ink);}
 .s5 .lab{color:var(--accent);}

 /* below the hero breakpoint the stack becomes compact chips so the hero still fits one view */
 @media(max-width:860px){
   .hero-grid{grid-template-columns:1fr;gap:30px;}
   .stack{height:auto;display:flex;flex-wrap:wrap;gap:7px;}
   .sheet{position:static;transform:none;box-shadow:none;padding:6px 11px;}
   .sheet .lab{font-size:10.5px;} .sheet .sub{display:none;}
 }
 .cta{display:inline-block;align-self:flex-start;margin-top:30px;font-family:var(--mono);font-size:13px;
   letter-spacing:.04em;text-decoration:none;background:var(--ink);color:var(--paper);
   padding:13px 22px;border:1px solid var(--ink);transition:opacity .12s;}
 .cta:hover{opacity:.84;}
 .cta.ghost{background:transparent;color:var(--ink);margin-left:10px;}
 .cta.ghost:hover{border-color:var(--accent);color:var(--accent);opacity:1;}

 /* scroll cue — replaces the old anchor button, and sets up the specimen below */
 .cue{position:absolute;bottom:30px;left:24px;right:24px;font-family:var(--mono);
   font-size:12px;letter-spacing:.03em;color:var(--muted);text-decoration:none;
   display:flex;align-items:baseline;gap:10px;}
 .cue:hover{color:var(--accent);}
 .cue .arrow{font-size:14px;}
 @media(max-height:680px){header .wrap{padding-bottom:70px;} .cue{bottom:20px;}}

 /* ── section scaffolding ────────────────────────────────────────────────── */
 section{padding:56px 0;border-top:1px solid var(--rule);margin-top:8px;}
 h2{font-size:clamp(25px,3.4vw,33px);line-height:1.2;letter-spacing:-.015em;
   margin:8px 0 0;max-width:22ch;font-weight:600;}
 .body{font-size:17px;color:var(--muted);max-width:58ch;margin:16px 0 0;}
 .body b{color:var(--ink);font-weight:600;}

 /* ── the live artifact (hero specimen) ──────────────────────────────────── */
 .specimen{margin-top:44px;background:var(--panel);border:1px solid var(--ink);
   border-top-width:3px;border-top-color:var(--accent);}
 .spec-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;
   padding:14px 20px;border-bottom:1px solid var(--rule);}
 .lane{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
   text-transform:uppercase;color:var(--accent);}
 .tick{font-family:var(--mono);font-size:12px;font-weight:600;}
 .when{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto;}
 .spec-body{padding:20px;}
 .claim{font-size:19px;line-height:1.42;margin:0;font-weight:600;letter-spacing:-.005em;}
 .why{font-size:15px;color:var(--muted);margin:14px 0 0;}

 /* provenance: the mechanic, shown — a claim resolving to its source paragraph */
 .prov{margin:22px 0 0;border-top:1px solid var(--rule);padding-top:18px;}
 .prov-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
   text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
 .quote{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:0 0 14px;
   font-size:15.5px;line-height:1.5;color:var(--ink);}
 .quote:last-of-type{margin-bottom:0;}
 .src{display:block;margin-top:7px;font-family:var(--mono);font-size:11px;color:var(--muted);
   text-decoration:none;}
 .src:hover{color:var(--accent);}
 .verified{color:var(--ok);font-weight:700;}
 .caption{font-family:var(--mono);font-size:11px;color:var(--muted);margin:12px 0 0;
   line-height:1.6;}

 /* ── two-column feature rows ────────────────────────────────────────────── */
 .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;
   align-items:start;}
 .row.flip .col-text{order:2;} .row.flip .col-shot{order:1;}
 @media(max-width:820px){.row{grid-template-columns:1fr;gap:30px;}
   .row.flip .col-text{order:0;} .row.flip .col-shot{order:1;}}

 /* ── screenshot placeholder (swap: see SCREENSHOTS block at end of file) ─── */
 .shot{position:relative;width:100%;background:var(--wash);border:1px solid var(--rule);
   display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;}
 .shot::before{content:"";position:absolute;inset:0;
   background:repeating-linear-gradient(-45deg,transparent 0 11px,var(--rule) 11px 12px);
   opacity:.28;}
 .shot img{width:100%;height:auto;display:block;border:1px solid var(--rule);}
 .shot-note{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
   text-transform:uppercase;color:var(--muted);line-height:1.9;}
 .ar-note{aspect-ratio:4/3;} .ar-wide{aspect-ratio:16/10;}

 /* ── how-it-works strip ─────────────────────────────────────────────────── */
 .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;
   border-top:1px solid var(--ink);}
 @media(max-width:760px){.steps{grid-template-columns:1fr 1fr;}}
 @media(max-width:460px){.steps{grid-template-columns:1fr;}
   .step{border-right:0;border-bottom:1px solid var(--rule);padding:14px 0 16px;}
   .step + .step{padding-left:0;}
   .step:last-child{border-bottom:0;}}
 .step{padding:16px 22px 20px 0;border-right:1px solid var(--rule);}
 .step + .step{padding-left:22px;}
 .step:last-child{border-right:0;padding-right:0;}
 .step .n{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:700;
   letter-spacing:.1em;}
 .step h3{font-size:17px;margin:8px 0 6px;font-weight:600;letter-spacing:-.005em;}
 .step p{font-size:14px;color:var(--muted);margin:0;line-height:1.5;}

 /* ── closing ────────────────────────────────────────────────────────────── */
 .close{text-align:center;padding:72px 0 76px;border-top:1px solid var(--rule);margin-top:8px;}
 .close h2{margin:0 auto;max-width:20ch;}
 .close .body{margin:16px auto 0;text-align:center;}
 footer{border-top:1px solid var(--rule);}
 footer .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;
   padding-top:22px;padding-bottom:44px;font-family:var(--mono);font-size:11.5px;
   color:var(--muted);}
 footer a{text-decoration:none;} footer a:hover{color:var(--accent);}
 .spacer{margin-left:auto;}

 /* ══ access page ════════════════════════════════════════════════════════ */
 .form-wrap{max-width:560px;margin:0 auto;padding:64px 24px 90px;}
 .form-wrap .kicker{margin-bottom:8px;}
 .form-wrap h1{font-size:clamp(30px,4.4vw,42px);margin:0 0 16px;}
 .form-wrap .body{max-width:none;margin:0 0 34px;}
 .field{margin-bottom:20px;}
 .field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
   text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
 .field .opt{text-transform:none;letter-spacing:0;font-size:11px;}
 .field input,.field textarea{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
   background:var(--panel);border:1px solid var(--rule);padding:11px 13px;border-radius:0;
   transition:border-color .12s;}
 .field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
 .field textarea{resize:vertical;min-height:78px;line-height:1.5;}
 .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
 button.cta{border:1px solid var(--ink);cursor:pointer;font-family:var(--mono);font-size:13px;
   letter-spacing:.04em;background:var(--ink);color:var(--paper);padding:13px 22px;margin-top:8px;}
 button.cta[disabled]{opacity:.5;cursor:default;}
 .note{font-size:13.5px;color:var(--muted);margin-top:18px;line-height:1.55;}
 .msg{font-size:14.5px;margin-top:18px;padding:12px 14px;border-left:2px solid var(--accent);
   background:var(--panel);}
 .msg[hidden]{display:none;}
 .done{border-top:3px solid var(--ok);border-left:1px solid var(--rule);
   border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
   background:var(--panel);padding:26px 24px;}
 .done h2{font-size:23px;margin:0 0 10px;max-width:none;}
 .done p{margin:0;color:var(--muted);font-size:15.5px;}
 .back{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:12px;
   color:var(--muted);text-decoration:none;}
 .back:hover{color:var(--accent);}