/* Spearhead Stock — shared design system.
 *
 * Lifted from the landing-page comp so every page speaks the same language. Kept as a real
 * stylesheet rather than an inline <style> for two reasons: it is cacheable across the whole
 * site (speed is the brief), and Blade reads @keyframes/@media as directives when inlined.
 *
 * :root is the dark palette; [data-theme="light"] overrides it. site.js stamps the attribute.
 */
:root {
  --bg:#0E0F10; --surface:#1D1E20; --raised:#292A2D;
  --ink:#F2F3F5; --muted:rgba(255,255,255,.62); --faint:rgba(255,255,255,.56); --dim:rgba(255,255,255,.5);
  --hair:rgba(255,255,255,.12); --hair-2:rgba(255,255,255,.2);
  --accent:#3CCBB1; --fill:#21AD96; --on-fill:#04231E; --accent-media:#3CCBB1;
  --nav:rgba(14,15,16,.78);
  --scrim-a:rgba(14,15,16,.86); --scrim-b:rgba(14,15,16,.5); --scrim-c:rgba(14,15,16,.2);
  --edge:#0E0F10;
  --amb-op:.2; --amb-blur:2px;
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --display:'Instrument Serif',Georgia,serif;
  --ui:'Instrument Sans',-apple-system,'Helvetica Neue',sans-serif;
  --display-weight:400;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"] {
  --bg:#FAF9F6; --surface:#FFFFFF; --raised:#F1EFEA;
  --ink:#1A1815; --muted:rgba(26,24,21,.74); --faint:rgba(26,24,21,.64); --dim:rgba(26,24,21,.6);
  --hair:rgba(26,24,21,.12); --hair-2:rgba(26,24,21,.2);
  --accent:#0A5A4E; --fill:#21AD96; --on-fill:#04231E; --accent-media:#3CCBB1;
  --nav:rgba(250,249,246,.82);
  --scrim-a:rgba(250,249,246,.9); --scrim-b:rgba(250,249,246,.58); --scrim-c:rgba(250,249,246,.24);
  --edge:#FAF9F6;
  --amb-op:0; --amb-blur:1.5px;   /* no ghost photos in the light theme */
  --shadow:0 20px 50px rgba(26,24,21,.14);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg)}
body{color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip;
     transition:background .5s ease,color .5s ease}
a{color:var(--accent);text-decoration:none;transition:color .25s ease,opacity .25s ease}
/* A link inside running text is underlined, so it is told apart by more than color (WCAG 1.4.1). */
p a:not([class]),li a:not([class]),td a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
/* Many fields set outline:none inline for their look; a ring still shows where the keyboard is (WCAG 2.4.7). */
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 2px var(--accent)}
[aria-invalid="true"]{border-color:#D0463B!important}
a:hover{color:var(--ink)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:1400px;margin:0 auto;padding-left:clamp(18px,3vw,34px);padding-right:clamp(18px,3vw,34px)}
.sec{position:relative;z-index:2;padding-top:clamp(36px,5vw,68px);padding-bottom:clamp(36px,5vw,68px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;
          margin-bottom:clamp(28px,4vw,48px);padding-bottom:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--hair)}

/* ── type ───────────────────────────────────────────────────────────────── */
.eyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.eyebrow .num{font-family:var(--display);font-style:italic;font-size:17px;color:var(--accent)}
.eyebrow .rule{width:44px;height:1px;background:var(--hair-2);transform-origin:left;transform:scaleX(0);
               transition:transform .9s var(--ease)}
.eyebrow .lbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);font-weight:500}
.h1{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(34px,6vw,86px);
    line-height:.96;letter-spacing:-.03em;margin:0;text-wrap:balance}
.h2{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(32px,4.6vw,62px);
    line-height:.98;letter-spacing:-.026em;margin:0;text-wrap:balance}
.h3{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(21px,1.7vw,25px);
    letter-spacing:-.02em;margin:0}
.em{font-style:italic;color:var(--accent)}
.lede{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0;max-width:26em;text-wrap:pretty}
.small{font-size:13.5px;line-height:1.45;color:var(--muted)}
.nums{font-variant-numeric:tabular-nums}

/* ── surfaces ───────────────────────────────────────────────────────────── */
.card{padding:clamp(20px,2.2vw,28px);border-radius:16px;background:var(--surface);border:1px solid var(--hair)}
.card-accent{background:rgba(33,173,150,.09);border-color:rgba(33,173,150,.42)}
.tag{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--accent);font-weight:600}

/* ── controls ───────────────────────────────────────────────────────────── */
.btn{font-family:var(--ui);height:48px;padding:0 26px;border-radius:14px;background:var(--fill);color:var(--on-fill);
     display:inline-flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:600;border:0;cursor:pointer;
     transition:transform .25s var(--ease),box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.3);color:var(--on-fill)}
.btn-ghost{background:transparent;border:1px solid var(--hair-2);color:var(--ink);font-weight:500}
.btn-ghost:hover{border-color:var(--ink);box-shadow:none;color:var(--ink)}
.btn-sm{height:42px;padding:0 19px;border-radius:12px;font-size:14.5px}

/* ── reveal ─────────────────────────────────────────────────────────────── */
/* Parked state only ever applies when JS is there to un-park it; without JS the
   :root class is never set and everything renders at rest. */
.js [data-reveal]{opacity:0;transform:translateY(20px);
                  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes laneA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes laneB{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ── keyboard access ─────────────────────────────────────────────────────── */
/* The skip link, the header and the footer are in chrome.css (the layout, home and Browse load it). */
main:focus{outline:none}
/* The colour field behind the page is a fixed layer at z-index 0, so the content has to be
   positioned to sit over it. Sections carry z-index 2 already; main covers everything else. */
main{position:relative;z-index:1}

/* ---- Back office -------------------------------------------------------------------------
   The front of the site is editorial; these pages are a workbench. Smaller type, tighter
   rhythm, and no hero — the screen belongs to the batch being worked on. */
.adminhead{padding-top:16px}
.adminnav{display:flex;flex-wrap:wrap;gap:2px;align-items:center;
          border-bottom:1px solid var(--hair);padding-bottom:9px;margin-bottom:12px}
.adminnav a{font-size:12.5px;padding:4px 10px;border-radius:999px;color:var(--faint);
            transition:color .15s ease,background .15s ease}
.adminnav a:hover{color:var(--ink);background:var(--raised)}
.adminnav a.on{color:var(--ink);background:var(--raised)}
.adminbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.adminbar h1{font-family:var(--ui);font-size:19px;font-weight:600;letter-spacing:-.01em;
             color:var(--ink);margin:0}
.adminbar p{font-size:12.5px;color:var(--faint);margin:0;max-width:56ch}
.adminbar .adminacts{margin-left:auto;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.adminwrap{padding-bottom:clamp(30px,4vw,56px)}

/* ---- Forms ----------------------------------------------------------------------------------
   One control, one size. Every text field, select and textarea on a site-layout page is drawn
   from these few rules, so a select sits at the same height as the input beside it, fields that
   share a row share its width, and a button beside a field (a discount code and its Apply) is
   the field's height rather than the 48px of a call to action.

     <label class="field"><span>City</span><input …></label>
     <div class="field-row">…two fields…</div>          equal halves
     <div class="field-row cols-3">…three fields…</div> equal thirds (City / State / ZIP)
     <div class="input-group"><input class="input"><button class="btn">Apply</button></div>

   The element half of each selector sits inside :where(), so the rules weigh one class: a page
   that needs something different can still say so without !important. Checkboxes, radios and ranges are
   left out on purpose; they keep their own sizes. */
:root{--control-h:44px;--control-r:10px;--control-fs:15px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-stack{display:grid;gap:14px}
.field{display:block;min-width:0}
.field > span{display:block;font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;
              color:var(--faint);margin-bottom:6px}
/* "(optional)" and similar asides inside a label read as a note, not as more label. */
.field > span .opt{text-transform:none;letter-spacing:0;color:var(--dim)}
.field :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden]),select,textarea),.input{
  display:block;width:100%;min-width:0;height:var(--control-h);margin:0;padding:0 12px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--control-r);
  color:var(--ink);font:inherit;font-size:var(--control-fs);line-height:1.3;
  transition:border-color .2s ease,box-shadow .2s ease}
.field :where(textarea),textarea.input{height:auto;min-height:104px;padding:11px 12px;resize:vertical;line-height:1.5}
.field :where(input,textarea)::placeholder,.input::placeholder{color:var(--dim);opacity:1}
/* The browser's own select is a different height in every engine (Safari draws a shorter,
   rounder one that ignores padding), which is what made State look narrower than City and ZIP
   beside it. Drawn by hand instead, with a chevron in the text color so it follows the theme. */
.field :where(select),select.input{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field :where(select) option,select.input option{color:initial}
.field :where(input,textarea,select):focus,.input:focus{outline:none;border-color:var(--accent)}
.field :where(input,textarea,select):disabled,.input:disabled{opacity:.55;cursor:not-allowed}
.field.wide{grid-column:1/-1}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.input-group{display:flex;gap:8px;align-items:stretch}
.input-group > :where(input,.input,.field){flex:1 1 auto;min-width:0}
.input-group > .btn{flex:none;height:var(--control-h);padding:0 18px;border-radius:var(--control-r);font-size:14.5px}
@media (max-width:560px){
  /* iOS zooms the page into any field under 16px; at 16px it stays put. */
  :root{--control-fs:16px}
  .field-row{grid-template-columns:minmax(0,1fr)}
  /* City on its own line, State and ZIP as halves beneath it: still aligned, never squeezed. */
  .field-row.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-row.cols-3 > :first-child{grid-column:1/-1}
}
/* A page body split into a form and a sidebar stacks on a phone; the inline column sizes on
   those grids would otherwise hold the sidebar at its minimum and push the form off screen. */
@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr)!important}
  .split > aside[style*="sticky"]{position:static!important}
}
.hoods{display:flex;flex-wrap:wrap;gap:6px;max-height:168px;overflow:auto;padding:2px}
.hoods label{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);
             border:1px solid var(--hair);border-radius:999px;padding:0 13px;cursor:pointer;
             min-height:40px}
.hoods input{width:17px;height:17px}
.hoods label:has(input:checked){border-color:var(--accent);color:var(--ink)}
.hoods input{accent-color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
       background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.steps > div{background:var(--bg);padding:17px 19px}
.steps b{display:block;font-family:var(--display);font-size:26px;letter-spacing:-.02em;
         color:var(--accent);margin-bottom:8px;line-height:1}
.steps h4{margin:0 0 5px;font-size:14.5px;font-weight:600;color:var(--ink)}
.steps p{margin:0;font-size:13px;line-height:1.55;color:var(--faint)}
.said-ok{border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
         border-radius:12px;padding:14px 16px;font-size:14px;color:var(--ink);margin-bottom:18px}

/* Back-office notices reused across admin screens. */
.note{border:1px solid var(--hair);border-radius:9px;padding:10px 12px;font-size:12px;
      line-height:1.55;color:var(--faint)}
.note b{color:var(--ink);font-weight:600}
.note.warn{border-color:#7a4a1e;background:color-mix(in srgb,#b8641c 9%,var(--surface))}

/* Available to assistive technology, out of the way of everyone else. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Honour a reduced-motion preference everywhere rather than per-component. Animation on this
   site is decoration; nothing depends on it to convey meaning. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- Phones: two across, not one -----------------------------------------------------------
   A single card per row turns every section into a long scroll of enormous tiles. Two across
   shows a section at a glance, which is what these grids are for. The inline
   grid-template-columns on some of these is why !important is needed. */
@media (max-width:760px){
  .plangrid,
  .feat,
  .sets,
  .grid-print,
  .steps,
  .papers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}

  .plangrid > div{padding:13px!important}
  /* Paper and step cards are text, and two columns of prose at this width is unreadable. */
  .steps,.papers{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:400px){
  .plangrid,.feat,.sets,.grid-print{gap:7px!important}
}

/* The back office is deliberately dense — it is a workbench, not a landing page — so its
   controls target WCAG 2.5.8's 24px minimum rather than the 44px the public pages use. */
.adminnav a{min-height:26px}
.adminwrap .btn-sm,
.adminwrap button,
.adminwrap select,
.adminwrap input[type=text],
.adminwrap input[type=search],
.adminwrap input[type=number]{min-height:26px}
.adminwrap input[type=checkbox]{width:16px;height:16px}

/* ---- The editor's showreel hero ------------------------------------------------------------
   Rendered only for visitors who cannot open the editor. Same treatment as the landing page's
   hero so the two read as one product, and the same diagonal wash the other heroes use. */
.edithero{position:relative;overflow:hidden;background:#000;
          min-height:clamp(320px,46vw,520px);display:flex;align-items:flex-end;
          border-radius:18px;margin:clamp(14px,2vw,24px) auto 0;max-width:1400px;
          width:calc(100% - 2 * clamp(18px,3vw,34px))}
.edithero-media{position:absolute;inset:0;background:#0A0B0C;opacity:.9;overflow:hidden}
.edithero-veil{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(6,7,8,.90) 0%,rgba(6,7,8,.78) 30%,
             rgba(6,7,8,.60) 48%,rgba(6,7,8,.22) 74%,rgba(6,7,8,.04) 100%)}
.edithero-said{position:relative;padding:clamp(22px,3.4vw,46px);max-width:34em;color:#fff}
.edithero-said h1{font-family:var(--display);font-weight:var(--display-weight);margin:0 0 12px;
  font-size:clamp(32px,5vw,64px);line-height:.98;letter-spacing:-.026em;text-wrap:balance}
.edithero-said h1 em{font-style:italic;color:var(--accent-media)}
.edithero-said p{font-size:clamp(14.5px,1.3vw,17px);line-height:1.55;
  color:rgba(255,255,255,.82);margin:0;max-width:44ch}

/* ── dialogs: the site's own confirm, alert and prompt (Ask in site.js) ──────────────────── */
.ask{border:0;padding:0;margin:auto;background:transparent;color:var(--ink);
     width:calc(100vw - 32px);max-width:440px;overflow:visible}
.ask::backdrop{background:var(--scrim-b);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ask-card{display:grid;gap:12px;padding:26px 26px 22px;font-family:var(--ui);
          background:var(--surface);border:1px solid var(--hair);border-radius:22px;box-shadow:var(--shadow)}
.ask-title{margin:0;font-family:var(--display);font-weight:var(--display-weight);font-size:27px;
           line-height:1.12;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:anywhere}
.ask-msg{margin:0;font-size:15px;line-height:1.55;color:var(--muted);white-space:pre-line;text-wrap:pretty;overflow-wrap:anywhere}
.ask-msg.ask-lead{font-size:16.5px;color:var(--ink)}
.ask-input{width:100%;height:46px;padding:0 14px;margin-top:2px;font:inherit;font-size:15.5px;color:var(--ink);
           background:var(--bg);border:1px solid var(--hair-2);border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease}
.ask-input::placeholder{color:var(--dim)}
.ask-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.ask-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:10px}
.ask[open] .ask-card{animation:ask-rise .24s var(--ease)}
.ask[open]::backdrop{animation:ask-fade .24s ease}
@keyframes ask-rise{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes ask-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.ask[open] .ask-card,.ask[open]::backdrop{animation:none}}
@media (max-width:520px){
  .ask{margin:auto auto 16px}
  .ask-actions .btn{flex:1}
}