/* Bearing — site design system (drafting-table documentary).
   Tokens and components mirror the film pages; see
   docs/design/2026-07-18-relaunch-design-system.md. */

:root{
  --paper:#fafaf9; --ink:#080503; --muted:#5e534a; --line:#dad7d0; --card:#ffffff;
  --draft:#1f3a5f; --stamp:#9a4b2e; --green:#3f5c46; --noise:#a8a199;
  --ac:var(--draft);
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Instrument Sans", system-ui, sans-serif;
  --mono:"Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad:clamp(20px, 4.5vw, 64px);
  --maxw:1180px;
}
*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(31,58,95,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,58,95,.045) 1px, transparent 1px);
  background-size:96px 96px;
}
main{position:relative; z-index:1}
::selection{background:rgba(31,58,95,.16)}
a{color:inherit}
:focus-visible{outline:2px solid var(--draft); outline-offset:3px; border-radius:2px}
img, svg{max-width:100%}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper);
  padding:10px 16px; font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:26px;
  padding:12px var(--pad);
  background:rgba(250,250,249,.86);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  transition:box-shadow .3s;
}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.lockup{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.lockup svg{width:30px; height:30px; display:block}
.lockup .wm{font-family:var(--serif); font-size:22px; letter-spacing:.01em}

.site-nav{display:flex; align-items:center; gap:22px}
.nav-link, .nav-drop summary{
  font-size:15px; font-weight:500; text-decoration:none; cursor:pointer;
  color:var(--ink); opacity:.82; transition:opacity .2s;
}
.nav-link:hover, .nav-drop summary:hover{opacity:1}
.nav-drop{position:relative}
.nav-drop summary{list-style:none; display:flex; align-items:center; gap:6px}
.nav-drop summary::-webkit-details-marker{display:none}
.nav-drop summary::after{content:"▾"; font-size:10px; opacity:.6}
.drop-panel{
  position:absolute; top:calc(100% + 12px); left:-16px; min-width:230px;
  background:var(--card); border:1px solid var(--line); box-shadow:0 18px 44px rgba(8,5,3,.10);
  padding:8px; display:flex; flex-direction:column;
}
.drop-panel a{
  text-decoration:none; padding:9px 12px; font-size:14.5px;
  border-left:2px solid transparent;
}
.drop-panel a:hover{background:var(--paper); border-left-color:var(--stamp)}
.drop-panel .drop-all{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:4px; border-top:1px solid var(--line)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 22px; background:var(--ink); color:var(--paper);
  font-weight:600; font-size:15px; text-decoration:none; border:1px solid var(--ink);
  cursor:pointer; transition:background .25s, color .25s;
}
.btn:hover{background:transparent; color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}
.btn.big{width:100%; padding:16px 24px; font-size:16px}

.nav-burger{display:none}

@media (max-width:1080px){
  .site-nav{display:none}
  .head-cta{margin-left:auto}
  .lockup{margin-right:0}
  .site-head{justify-content:space-between}
  .nav-burger{display:block; position:relative}
  .nav-burger summary{list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:5px; padding:10px 2px}
  .nav-burger summary::-webkit-details-marker{display:none}
  .nav-burger summary span{display:block; width:22px; height:2px; background:var(--ink)}
  .burger-panel{
    position:fixed; top:64px; left:0; right:0; bottom:0; overflow:auto;
    background:var(--paper); border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:2px; padding:18px var(--pad) 40px;
  }
  .burger-panel a{text-decoration:none; padding:13px 4px; font-size:19px; font-family:var(--serif); border-bottom:1px solid var(--line)}
  .burger-panel a.btn{font-family:var(--sans); font-size:15px; border:1px solid var(--ink); margin-top:18px}
  .burger-panel hr{border:0; border-top:1px solid var(--line); margin:10px 0}
  .head-cta{font-size:13.5px; padding:8px 14px; min-height:40px}
  .lockup svg{width:26px; height:26px}
  .lockup .wm{font-size:19px}
}

/* ---------- page scaffold ---------- */
.blk{padding:clamp(56px,8vw,110px) var(--pad); max-width:var(--maxw); margin:0 auto; position:relative}
.blk.tight{padding-top:clamp(30px,4vw,50px)}
.rule-in{height:1px; background:var(--line); margin-bottom:26px; transform-origin:left}
.k-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ac); text-transform:uppercase; margin-bottom:14px}
h1, .h1{font-family:var(--serif); font-weight:400; font-size:clamp(38px,6vw,72px); line-height:1.02; letter-spacing:-.01em; max-width:22ch}
h2, .h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.4vw,52px); line-height:1.05; max-width:24ch}
.lead{margin-top:16px; color:var(--muted); font-size:clamp(17px,1.9vw,19.5px); max-width:62ch}
.page-hero{padding:clamp(48px,7vw,90px) var(--pad) clamp(30px,4vw,50px); max-width:var(--maxw); margin:0 auto}
.page-hero .ctas{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.page-hero .alt{font-size:15px; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.chips{margin-top:30px; display:flex; flex-wrap:wrap; gap:9px}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); background:rgba(255,255,255,.6); padding:7px 12px; color:var(--muted)}

/* em-dash bullets (the validation-kit idiom, kept) */
.dash-list{list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:14px; max-width:66ch}
.dash-list li{display:flex; gap:12px}
.dash-list li::before{content:"—"; font-family:var(--mono); color:var(--ac); flex:none}

/* ---------- cards & grids ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:38px}
.u-card{
  display:block; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--u-ac, var(--draft)); padding:22px 22px 18px; position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.u-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(8,5,3,.08)}
.u-card .t{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--u-ac, var(--draft))}
.u-card p{margin-top:9px; font-size:15.5px; line-height:1.5}
.u-card .p{margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--muted)}
.u-card .arr{position:absolute; right:18px; bottom:14px; font-family:var(--mono); color:var(--muted); transition:transform .3s}
.u-card:hover .arr{transform:translateX(4px)}

/* ---------- tiers ---------- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:38px}
.tier{background:var(--card); border:1px solid var(--line); padding:26px 24px 22px; position:relative; display:flex; flex-direction:column}
.tier.bench{border-color:var(--draft); border-width:2px}
.tier .flag{position:absolute; top:-11px; left:20px; background:var(--draft); color:var(--paper);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px}
.tier .name{font-family:var(--serif); font-size:28px; font-weight:400}
.tier .spec{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tc,var(--draft)); margin-top:6px}
.tier .price{font-family:var(--serif); font-size:44px; margin:16px 0 2px}
.tier .price sup{font-size:20px; vertical-align:22px}
.tier p{font-size:15px; color:var(--muted); margin-top:10px}
.tier .best{margin-top:auto; padding-top:16px; font-size:13.5px; color:var(--ink)}
.tier .best b{font-weight:600}
.addon{margin-top:16px; border:1px dashed var(--line); padding:16px 20px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; background:rgba(255,255,255,.55)}
.addon .n{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.addon .a-p{font-family:var(--serif); font-size:22px}
.addon .a-note{font-size:14px; color:var(--muted)}
.fine{margin-top:14px; font-size:13.5px; color:var(--muted); max-width:70ch}

/* ---------- recommended-tier selector (KTD3/U2) ---------- */
.tier-select{border:2px solid var(--ac); background:var(--card); margin-top:34px}
.ts-head{padding:22px 24px 18px}
.ts-kicker{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--ac); text-transform:uppercase}
.ts-rec{margin-top:8px; font-size:16px}
.ts-rec-name{font-family:var(--serif); font-size:26px}
.ts-rec-spec{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ts-rec-price{font-family:var(--serif); font-size:40px; margin-top:6px}
.ts-flat{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.ts-more{border-top:1px solid var(--line)}
.ts-more summary{
  list-style:none; cursor:pointer; padding:13px 24px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  display:flex; justify-content:space-between;
}
.ts-more summary::-webkit-details-marker{display:none}
.ts-more summary::after{content:"▸"}
.ts-more[open] summary::after{content:"▾"}
.ts-rows{padding:4px 12px 14px; display:flex; flex-direction:column; gap:6px}
.ts-row{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:
    "pick name price" "pick spec price" "pick tag tag";
  align-items:center; column-gap:14px; padding:12px 12px;
  border:1px solid var(--line); cursor:pointer; background:var(--paper);
}
.ts-row:has(input:checked){border-color:var(--ac); box-shadow:inset 0 0 0 1px var(--ac)}
.ts-row.disabled{cursor:default; opacity:.75}
.ts-row input{grid-area:pick; accent-color:var(--ac); width:17px; height:17px}
.ts-name{grid-area:name; font-family:var(--serif); font-size:19px}
.ts-spec{grid-area:spec; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ts-price{grid-area:price; font-family:var(--serif); font-size:22px}
.ts-tag{grid-area:tag; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-top:6px}
.ts-tag.rec{color:var(--green)}
.ts-tag.not{color:var(--stamp)}
.ts-tag.note{color:var(--muted)}

/* ---------- steps / proof / partners ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:38px}
.step{border-top:2px solid var(--ink); padding-top:18px}
.step .n{font-family:var(--serif); font-size:44px; line-height:1}
.step h3{font-size:17px; font-weight:600; margin-top:10px}
.step p{font-size:15px; color:var(--muted); margin-top:8px}
.proof-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px 34px; margin-top:38px}
.proof-grid h3{font-family:var(--serif); font-size:24px; font-weight:400}
.proof-grid p{margin-top:8px; color:var(--muted); font-size:15px}
.partners{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:38px}
.partner{display:block; text-decoration:none; border:1px solid var(--line); background:var(--card); padding:24px; transition:transform .3s, box-shadow .3s}
.partner:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(8,5,3,.08)}
.partner .t{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--draft)}
.partner p{font-family:var(--serif); font-size:23px; margin-top:10px; line-height:1.2}
.partner .arr{display:inline-block; margin-top:14px; font-family:var(--mono); color:var(--muted)}

/* ---------- guarantee / scarcity ---------- */
.gbox{border:2px solid var(--stamp); padding:clamp(24px,4vw,40px); margin-top:38px; position:relative; background:rgba(255,255,255,.6)}
.gbox .t{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--stamp); text-transform:uppercase}
.gbox p + p, .gbox p:not(.t){font-size:clamp(17px,2vw,21px); margin-top:12px; max-width:58ch}
.gbox .g-mark{position:absolute; right:18px; top:-24px; width:64px; transform:rotate(8deg); mix-blend-mode:multiply}
.scarcity{margin-top:22px; font-size:14.5px; color:var(--muted); max-width:64ch}
.scarcity b{color:var(--ink); font-weight:600}

/* ---------- FAQ ---------- */
.faq-list{margin-top:38px; border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px;
  padding:20px 2px; font-size:17px; font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .pm{font-family:var(--mono); color:var(--muted)}
.faq-list details[open] summary .pm::before{content:"–"}
.faq-list details:not([open]) summary .pm::before{content:"+"}
.faq-list .a{padding:0 2px 22px; color:var(--muted); max-width:70ch}

/* ---------- forms ---------- */
.form-card{background:var(--card); border:1px solid var(--line); padding:clamp(22px,3.5vw,36px); margin-top:38px}
.form-card h2, .form-card h3{font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,30px)}
.f-grid{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:18px}
.f-field{display:flex; flex-direction:column; gap:8px}
.f-field.full{grid-column:1 / -1}
.f-field label{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.f-field input, .f-field select, .f-field textarea{
  min-height:46px; width:100%; border:1px solid var(--line); background:var(--paper);
  padding:11px 12px; font:inherit; font-size:16px; color:var(--ink);
}
.f-field textarea{min-height:110px; resize:vertical}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{
  outline:none; border-color:var(--ac); box-shadow:0 0 0 1px var(--ac);
}
.form-card .btn{margin-top:24px}
.under-btn{margin-top:12px; text-align:center; font-size:14px; color:var(--muted)}
.hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
@media (max-width:700px){ .f-grid{grid-template-columns:1fr} }

/* ---------- close band + footer ---------- */
.close-band{text-align:center; padding:clamp(70px,10vw,130px) var(--pad)}
.close-band h2{margin:0 auto}
.close-band p{margin-top:16px; color:var(--muted)}
.close-band .btn{margin-top:30px}
.site-foot{border-top:1px solid var(--line); padding:38px var(--pad) 48px; position:relative; z-index:1;
  font-size:13.5px; color:var(--muted)}
.foot-inner{max-width:var(--maxw); margin:0 auto; display:flex; gap:34px; flex-wrap:wrap; justify-content:space-between}
.foot-brand{display:flex; gap:14px; align-items:flex-start; max-width:56ch}
.foot-brand svg{width:30px; height:30px; flex:none; color:var(--muted)}
.foot-nav{display:flex; gap:16px 20px; flex-wrap:wrap; align-items:center}
.foot-nav a{text-underline-offset:3px}

/* ---------- reveal animation (site.js adds .in; reduced-motion sees all) ---------- */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1; transform:none}
.rule-in.rv{transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.rule-in.rv.in{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  .rv, .rule-in.rv{opacity:1; transform:none; transition:none}
}

/* ---------- utility ---------- */
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.center{text-align:center}
[hidden]{display:none !important}