/* ?v policy: bump on EVERY change, on ALL pages at once - never per-page */
/* ============================================================================
   AMINOPEN DESIGN SYSTEM — aminopen.css (FROZEN — read-only for page builders)
   Extracted verbatim from the approved flagship (concepts/cinematic.html).
   Grounds: White #FFFFFF / Cool Mist #F1F3F6. Ink #101318. ONE accent: Cobalt
   #2742D6 (primary CTAs only; footer is Ink). Type: Archivo 600/700 display +
   headings + caps tags, Hanken Grotesk 400/600 body. Radii 6-8px. Shadows
   barely-there. No page-specific rules live here — pages compose these blocks.
   Breakpoints: 1024 (pin/nav cutoff) / 700 (grids collapse) / 390 (small).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TOKENS — every frozen value as a custom property. Use tokens, not literals.
   -------------------------------------------------------------------------- */
:root{
  /* color */
  --white:#FFFFFF;          /* primary ground */
  --mist:#F1F3F6;           /* alternate ground (Cool Mist) */
  --ink:#101318;            /* text / footer ground */
  --muted:#5A6470;          /* secondary text */
  --border:#E2E6EB;         /* hairlines, always 1px */
  --cobalt:#007ABE;         /* THE accent — medium azure (lightened from navy #123A63, toward logo cyan #00c8ff, chosen as the lightest hue in the family that still holds >=4.5:1 white-text contrast — 4.64:1 computed); primary CTA buttons + hero accent word ONLY */
  --img-placeholder:#e8e8ea;/* default dominant-tone bg behind loading photos */
  /* footer-on-ink text tones (from flagship footer) */
  --ink-soft:#a8afba;       /* footer blurb / column headings */
  --ink-link:#dfe2e7;       /* footer links */
  --ink-faint:#7d8492;      /* footer legal */
  --ink-hair:#262b33;       /* hairline on ink ground */

  /* type — 2-3 sizes, hierarchy by weight + space */
  --font-display:'Cabinet Grotesk',system-ui,sans-serif;  /* 500/700/800 only */
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-hero:clamp(42px,6.6vw,96px);           /* one per page, hero only */
  --fs-display:clamp(32px,4.2vw,64px);        /* section h2 */
  --fs-med:clamp(26px,3vw,38px);              /* sub-moment h2/h3 */
  --fs-body:17px;                              /* long body copy */
  --fs-small:15px;                             /* dense body / answers */
  --fs-tag:11px;                               /* caps spec tags 11-12px */

  /* shape + depth */
  --radius:8px;             /* cards, tiles, photos */
  --radius-sm:7px;          /* buttons, inputs, small chips */
  --radius-xs:6px;          /* tags */
  --shadow:0 1px 2px rgba(16,19,24,.06); /* barely-there — the only shadow */

  /* rhythm + layout */
  --section-pad:170px;      /* section vertical rhythm (140-180 band) */
  --container:1180px;       /* content column */
  --gutter:32px;            /* side padding */
}
@media (max-width:700px){ :root{ --section-pad:110px; --gutter:24px; } }
@media (max-width:390px){ :root{ --section-pad:90px;  --gutter:16px; } }

/* ---------------------------------------------------------------------------
   BASE — scroll safety: html/body NEVER get overflow:hidden; native scroll
   only. overflow-x:clip kills horizontal scroll without a scroll container.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-weight:400;overflow-x:clip;}
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
/* tabular numerals for every figure (dial units, counts, prices) */
.tabnum{font-variant-numeric:tabular-nums;}
/* focus ring — global, cobalt, visible on both grounds */
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;}
/* on the ink footer cobalt falls under 3:1 — ring flips to white there */
.apfooter :focus-visible{outline-color:#fff;}

/* ---------------------------------------------------------------------------
   CONTAINER — the single content column. Pages never invent new widths.
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}

/* ---------------------------------------------------------------------------
   TYPE UTILITIES — headings sized by token; eyebrow is the ONLY caps heading
   device (Archivo 600, 11px, .08em). Never mono, never italic emphasis.
   -------------------------------------------------------------------------- */
.h-hero{font-size:var(--fs-hero);line-height:.98;letter-spacing:-.015em;}
.h-display{font-size:var(--fs-display);line-height:1.12;}
.h-med{font-size:var(--fs-med);line-height:1.2;}
.eyebrow{font-family:var(--font-display);font-weight:500;font-size:var(--fs-tag);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
.lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:30rem;}
.body-copy{font-size:var(--fs-body);line-height:1.55;color:var(--muted);max-width:34rem;}

/* word-reveal scaffolding for apMotion.wordReveal — lines clip, words slide.
   Pure layout: nothing is hidden without JS. */
.word-lines .line{display:block;overflow:hidden;padding-bottom:.05em;}
.word-lines .word{display:inline-block;}

/* ---------------------------------------------------------------------------
   BUTTONS — .btn is the ONLY cobalt element on a page. Quiet link for
   everything secondary. No pills, no arrow suffixes.
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--cobalt);color:#fff;font-family:var(--font-display);font-weight:500;font-size:14px;padding:11px 22px;min-height:44px;border-radius:var(--radius-sm);border:none;text-decoration:none;cursor:pointer;white-space:nowrap;}
.btn:hover{filter:brightness(1.06);}
/* quiet text link — Archivo 600, underlined, ink */
.btn-quiet{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;font-size:13px;font-weight:500;font-family:var(--font-display);color:var(--ink);text-decoration:none;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;}
@media (hover:hover) and (pointer:fine){
  .btn-quiet:hover{border-color:var(--cobalt);color:var(--cobalt);background:var(--white);}
}

/* PRESS FEEDBACK — transform/opacity only, .1s ease-out. Scoped off
   [data-magnet] buttons so this never fights motion.js's inline magnetic
   transform (magnetic buttons already get their own hover/press motion). */
.btn:not([data-magnet]),.btn-quiet{transition-property:transform,color,background,border-color;transition-duration:.1s;transition-timing-function:ease-out;}
.btn:active:not([data-magnet]),.btn-quiet:active{transform:scale(.97);}
.apnav-iconbtn,.cart-qty button,.qty-field button,.pdp-thumb,.pdp-nav{transition-property:transform,color,background,border-color;transition-duration:.1s;transition-timing-function:ease-out;}
.apnav-iconbtn:active,.cart-qty button:active,.qty-field button:active,.pdp-thumb:active,.pdp-nav:active{transform:scale(.94);}

/* ---------------------------------------------------------------------------
   HEADER — .apnav : sticky white bar, logo + links + cobalt CTA. Hairline
   appears on scroll (JS toggles .scrolled; without JS it stays borderless).
   Links hide below 1024; the menu button takes over (see .mobile-nav).
   -------------------------------------------------------------------------- */
.apnav{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid transparent;transition:border-color .25s ease;}
.apnav.scrolled{border-bottom-color:var(--border);}
.apnav-inner{max-width:var(--container);margin:0 auto;padding:14px var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;justify-self:start;}
.brand span{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);}
/* wordmark split — "Pen" in the molecule blue. On white grounds (header) that's
   cobalt #007ABE: the logo's own cyan #00c8ff reads at ~2:1 on white, well under
   AA, so cobalt is the closest brand blue that stays legible as text. On dark
   grounds (footer, --ink) cyan clears >9:1 and is the truer "same blue as the
   molecule" match, so it's used there instead. */
.brand .brand-pen{color:var(--cobalt);}
.apnav-links{display:flex;align-items:center;gap:28px;justify-self:center;}
.apnav-links a{font-size:14px;font-weight:500;font-family:var(--font-display);text-decoration:none;color:var(--ink);}
.apnav-actions{display:flex;align-items:center;gap:14px;justify-self:end;}
/* borderless ink icon/text buttons in the bar (cart, menu) */
.apnav-iconbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:8px;cursor:pointer;color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:13px;}
.apnav-cart{position:relative;}
.cart-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 3px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none;}
.cart-badge[hidden]{display:none;}
.apnav-menu{display:none;}
@media (max-width:1023px){
  .apnav-links{display:none;}
  .apnav-menu{display:inline-flex;}
  /* the hidden links leave the 3-col grid with an empty track, and auto
     placement drops the actions into the MIDDLE column (measured: 111px of
     dead space at the right edge). Collapse to two columns so the controls
     actually sit against the right rim. */
  .apnav-inner{grid-template-columns:auto 1fr;}
  .apnav-actions{justify-self:end;}
}
/* Mobile: the Catalog CTA STAYS in the bar (owner: the shop entry must always
   be one tap away). It shrinks instead of disappearing; the wordmark drops to
   the mark + "AminoPen" wordmark only, which frees the room it needs. */
@media (max-width:700px){
  .apnav .btn{display:inline-flex;padding:9px 14px;font-size:14px;min-height:40px;align-items:center;}
  .apnav-actions{gap:8px;}
}
@media (max-width:430px){
  /* Phone: the molecule mark carries the brand alone so the bar has room for
     cart + Catalog + menu without crowding. The anchor keeps aria-label
     "AminoPen home", so the accessible name is unchanged. */
  .apnav .brand-amino,.apnav .brand-pen{display:none;}
  .apnav .brand{gap:0;}
}
@media (max-width:390px){
  .apnav .btn{padding:8px 11px;font-size:13px;}
  .apnav-actions{gap:6px;}
}

/* ---------------------------------------------------------------------------
   FOOTER — .apfooter : ink ground, white-stroke logo variant, 3 link columns
   + legal row. The one place light-on-dark is allowed.
   -------------------------------------------------------------------------- */
.apfooter{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:84px 0 32px;content-visibility:auto;contain-intrinsic-size:auto 480px;}
.apfooter>.wrap{position:relative;z-index:2;}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr .8fr;gap:32px;}
.footer-brand .brand span{color:#fff;}
.footer-brand .brand .brand-pen{color:#00c8ff;}
.footer-blurb{margin:14px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.6;max-width:320px;}
.footer-col h4{font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:0 0 14px;}
.footer-col a{display:block;font-size:14px;color:var(--ink-link);text-decoration:none;margin-bottom:10px;}
.footer-legal{margin-top:64px;padding-top:24px;border-top:1px solid var(--ink-hair);font-size:12.5px;color:var(--ink-faint);}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:390px){.footer-grid{grid-template-columns:1fr;}}

/* Footer email capture — quiet row, shared hairline baseline, no pill/glow */
.footer-signup{margin-top:48px;padding-top:28px;border-top:1px solid var(--ink-hair);display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;}
.footer-signup-copy{margin:0;font-size:14px;color:var(--ink-soft);flex:1 1 220px;}
.footer-signup-form{display:flex;align-items:center;flex:1 1 300px;border-bottom:1px solid var(--ink-hair);}
.footer-signup-form input[type=email]{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-family:var(--font-body);font-size:16px;padding:13px 0;}
.footer-signup-form input[type=email]::placeholder{color:var(--ink-faint);}
.footer-signup-form input[type=email]:focus{outline:none;}
.footer-signup-btn{background:transparent;border:0;color:var(--ink-soft);font-family:var(--font-display);font-size:13px;font-weight:500;padding:13px 4px;margin:-13px 0;cursor:pointer;white-space:nowrap;}
.footer-signup-btn:hover{color:#fff;}
.footer-signup-note{margin:0;font-size:13px;color:var(--ink-soft);flex-basis:100%;}
@media (max-width:700px){.footer-signup{flex-direction:column;align-items:stretch;}.footer-signup-copy{flex-basis:auto;}}

/* ---------------------------------------------------------------------------
   SECTION SHELLS — alternate White / Mist grounds on the 140-180px rhythm.
   .section-head is the standard centered intro (eyebrow + display h2).
   -------------------------------------------------------------------------- */
.section{padding:var(--section-pad) 0;background:var(--white);}
.section--mist{background:var(--mist);}
.section-head{max-width:600px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:var(--fs-display);line-height:1.12;}
@media (max-width:700px){.section-head{margin-bottom:40px;}}

/* ---------------------------------------------------------------------------
   FULL-BLEED SECTION — viewport-height photographic moment. Image layer is
   absolute with a dominant-tone placeholder bg; copy sits over a scrim.
   Mobile (<1024): photo becomes a static 55vh band, copy flows below, no pin.
   -------------------------------------------------------------------------- */
.bleed-section{position:relative;min-height:100dvh;display:flex;align-items:center;background:var(--mist);overflow:clip;}
.bleed-img{position:absolute;inset:0;background:var(--img-placeholder);will-change:transform;}
.bleed-img img{width:100%;height:100%;max-width:none;object-fit:cover;}
.bleed-copy{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:150px var(--gutter) 110px;width:100%;}
@media (max-width:1023px){
  .bleed-section{display:block;min-height:0;background:var(--white);}
  .bleed-img{position:static;height:55vh;}
  .bleed-copy{padding:44px var(--gutter) 90px;}
}

/* JS-gated photo fade-in: opacity is ONLY lowered under html.js, so a no-JS
   load never hides an image. apMotion.fadeInImages() wires load/error. */
.bleed-img img, img.img-fade{transition:opacity .4s ease;}
html.js img.img-fade{opacity:0;}
html.js img.img-fade.loaded{opacity:1;}

/* ---------------------------------------------------------------------------
   PAGE BANNER — shared full-bleed image band for pages that used to open on
   text alone (faq, contact, about, how-to-use, calculator, needle-policy,
   privacy, shipping-returns, terms, compliance). Hard-image-seam rule: the
   fade is masked into the IMAGE's own pixels (not an overlay), long and
   many-stop, so it dissolves into the white section below with no seam. Text
   sits in the solid (unmasked) top of the photo and carries its own
   text-shadow rather than a boxed scrim. .page-banner--quiet is a shallower,
   calmer read for the legal pages (privacy/terms).
   -------------------------------------------------------------------------- */
.page-banner{position:relative;min-height:40vh;display:flex;align-items:center;overflow:clip;background:var(--white);}
.page-banner--quiet{min-height:26vh;}
.page-banner-img{position:absolute;inset:0;background:var(--img-placeholder);}
.page-banner-img img{
  width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.94) 67%,rgba(0,0,0,.82) 73%,rgba(0,0,0,.64) 79%,rgba(0,0,0,.46) 85%,rgba(0,0,0,.28) 90%,rgba(0,0,0,.13) 95%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.94) 67%,rgba(0,0,0,.82) 73%,rgba(0,0,0,.64) 79%,rgba(0,0,0,.46) 85%,rgba(0,0,0,.28) 90%,rgba(0,0,0,.13) 95%,transparent 100%);
}
.page-banner-copy{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%;}
/* the source photos are light studio-gray, so text-shadow alone under-
   contrasts wherever the pen itself isn't behind the words. A localized
   scrim sits behind the copy — but the box it paints into is deliberately
   much larger than the fade itself (extends well past the text on every
   side), and the gradient reaches full transparency long before it reaches
   that box's own edges. That is what keeps the box's rectangular boundary
   from ever being visible: by the time pixels reach the edge, the color
   value is already 0, so there is nothing there to seam against. */
.page-banner-copy::before{content:"";position:absolute;left:-30%;right:-10%;top:-140px;bottom:-140px;z-index:-1;background:radial-gradient(ellipse 42% 55% at 18% 50%, rgba(6,8,12,.5) 0%, rgba(6,8,12,.44) 12%, rgba(6,8,12,.35) 24%, rgba(6,8,12,.25) 34%, rgba(6,8,12,.16) 44%, rgba(6,8,12,.09) 54%, rgba(6,8,12,.04) 62%, rgba(6,8,12,0) 70%, rgba(6,8,12,0) 100%);}
.page-banner-copy .eyebrow{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.7);margin-bottom:12px;}
.page-banner-copy h1{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.5),0 1px 5px rgba(0,0,0,.75);margin:0;}
@media (max-width:700px){
  .page-banner{min-height:34vh;}
  .page-banner--quiet{min-height:22vh;}
}

/* ---------------------------------------------------------------------------
   SCRIMS — feathered white light, never a panel, never a box shadow.
   .scrim-corner : bottom-left radial feather for captions on full-bleed photos.
   .scrim-side   : left-to-right gradient for hero-style copy columns.
   Both dissolve on mobile where copy leaves the photo.
   -------------------------------------------------------------------------- */
.scrim-corner{position:absolute;left:0;bottom:0;z-index:2;max-width:680px;padding:130px 150px 60px var(--gutter);background:radial-gradient(135% 135% at 0% 100%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 40%, rgba(255,255,255,0) 75%);}
.scrim-side{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.55) 52%, rgba(255,255,255,.2) 65%, rgba(255,255,255,0) 75%);}
@media (max-width:1023px){
  .scrim-corner{position:static;margin:44px var(--gutter) 0;max-width:none;background:none;padding:0;}
  .scrim-side{display:none;}
}

/* ---------------------------------------------------------------------------
   BADGE ROW — bordered caps proof tags (Archivo 600, 10.5px, .06em). White
   chips with hairline border; translucent variant sits on photos.
   -------------------------------------------------------------------------- */
.proof-row{display:flex;flex-wrap:wrap;gap:10px;max-width:34rem;}
.proof-tag{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;font-family:var(--font-display);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.proof-row--on-photo .proof-tag{background:rgba(255,255,255,.72);}

/* ---------------------------------------------------------------------------
   PDP BUY PANEL — price treatment, per-unit descriptor line, reassurance
   checklist. Shared across all 4 PDPs so the buy experience reads as one
   system rather than four hand-tuned prices.
   -------------------------------------------------------------------------- */
.pdp-descriptor{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted);}
.price-amount{font-family:var(--font-display);font-weight:500;font-size:26px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:0;}
@media (max-width:700px){.price-amount{font-size:24px;}}
.price-perunit{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted);}
@media (max-width:700px){.price-perunit{font-size:13px;}}
.pdp-reassurance{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.pdp-reassurance li{font-size:var(--fs-small);line-height:1.5;color:var(--muted);}
.price-perunit--sub{margin-top:2px;font-size:12.5px;}
.pdp-runson{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;line-height:1.6;color:var(--muted);}
.pdp-runson .linklike{background:none;border:none;padding:8px 0;margin-left:2px;min-height:44px;color:var(--cobalt);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:12.5px;font-family:inherit;display:inline-block;}

/* sticky desktop buy panel — clears the sticky .apnav header (44px control
   row + 14px top/bottom padding = 72px) with a 24px breathing gap. */
@media (min-width:1024px){
  .pdp-buy--sticky{position:sticky;top:96px;}
}

/* ---------------------------------------------------------------------------
   SPEC CARD — product tile: mist photo well (true-ratio), title, caps tag,
   quiet view link. --cover fills the frame; --contain floats small/real
   product photos at native-ish scale on the mist ground.
   -------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* whole-card stretched link to the PDP — real <a>, accessible name = product
   name, sits under the CTAs (z-index) so Buy now / Add to cart still work. */
.spec-card-link{position:absolute;inset:0;z-index:1;}
.spec-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;height:100%;cursor:pointer;transition:border-color .15s ease-out;}
@media (hover:hover) and (pointer:fine){
  .spec-card:hover{border-color:var(--cobalt);}
}
.spec-name-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.spec-name-row h3{margin:0;}
.spec-price{position:relative;z-index:2;font-family:var(--font-display);font-weight:600;font-size:21px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
.spec-photo{aspect-ratio:4/5;background:var(--mist);overflow:hidden;}
.spec-photo img{width:100%;height:100%;object-fit:cover;}
.spec-photo--contain img{object-fit:contain;padding:20px;}
/* IMAGE-GROUND UTILITIES — these product photos carry a white/light studio
   ground; multiply melts that ground into the mist tile so every card in a
   lineup reads as one cool-toned set instead of a row of white rectangles. */
.spec-photo--contain img{mix-blend-mode:multiply;}
.spec-photo--contain img[src*="card-"]{mix-blend-mode:normal;}
/* card-*.jpg are full-bleed wide canvases (see rebuild_cards.py) — fill the
   well edge to edge instead of letterboxing inside it like the other product
   shots, which stay on contain/multiply above. */
.spec-photo--contain img[src*="card-"]{object-fit:cover;width:100%;height:100%;padding:0;}
.spec-body{padding:18px;display:flex;flex-direction:column;flex:1;}
.spec-body h3{font-size:20px;}
.spec-line{margin:8px 0 0;font-size:14px;color:var(--muted);line-height:1.5;}
/* CTA row — both controls pinned to the bottom of the card so cards of
   uneven copy length still line up (see anti-slop "misaligned parallel
   columns"); baseline row, gap 10px. */
.spec-cta{position:relative;z-index:2;margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.spec-cta .btn,.spec-cta .btn-quiet{flex:1;min-width:8.5em;}
/* the standard 4-up lineup grid for spec cards */
.lineup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:1023px){.lineup-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:390px){.lineup-grid{grid-template-columns:1fr;}}

/* caps spec tag — cobalt text is allowed here (text accent, not a button) */
.tag{display:inline-block;margin-top:10px;font-family:var(--font-display);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-xs);padding:5px 9px;}

/* ---------------------------------------------------------------------------
   BENTO TILES — mist tiles on white ground; big tile inverts (white + border).
   No numbered 01/02 grids — tiles carry figures or facts, not indices.
   -------------------------------------------------------------------------- */
.bento-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:132px;gap:16px;}
.tile{background:var(--mist);border-radius:var(--radius);padding:26px;position:relative;transition:transform .2s ease;}
.tile:hover{transform:translateY(-2px);}
.tile-big{grid-column:span 4;grid-row:span 3;background:var(--white);border:1px solid var(--border);padding:32px;}
.tile-med{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;}
.tile-small{grid-column:span 3;grid-row:span 1;display:flex;align-items:center;}
.tile-num{font-family:var(--font-display);font-weight:700;font-size:53px;color:var(--ink);}
.tile-label{margin-top:6px;font-size:14px;color:var(--muted);}
.tile-fact{font-size:14px;color:var(--muted);}
.tile-fact b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:4px;}
@media (max-width:1023px){
  .bento-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;}
  .tile-big{grid-column:span 2;}
  .tile-med,.tile-small{grid-column:span 1;}
}
@media (max-width:700px){
  .tile-med,.tile-small{grid-column:span 2;}
}

/* ---------------------------------------------------------------------------
   COMPARISON TABLE — hairline rows, caps column heads, no zebra, no fills.
   -------------------------------------------------------------------------- */
table.cmp{width:100%;border-collapse:collapse;font-size:14px;}
table.cmp th{text-align:left;font-family:var(--font-display);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--border);}
table.cmp td{padding:13px 8px 13px 0;border-bottom:1px solid var(--border);color:var(--ink);}
table.cmp tr:last-child td{border-bottom:none;}

/* ---------------------------------------------------------------------------
   FAQ — native <details>, hairline dividers, custom rotating +/&minus; icon,
   muted answers. Fully functional and readable with zero JS (native details
   toggle, no animation); JS (see index.html) layers a smooth height
   transition + aria-expanded on top without changing the base semantics.
   -------------------------------------------------------------------------- */
.faq-list{max-width:720px;margin:0 auto;}
.faq-list details{border-bottom:1px solid var(--border);}
.faq-list details:first-child{border-top:1px solid var(--border);}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-family:var(--font-display);font-weight:500;font-size:17px;color:var(--ink);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary:hover{color:var(--cobalt);}
.faq-list summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px;border-radius:2px;}
.faq-icon{position:relative;flex:0 0 18px;width:18px;height:18px;}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;top:50%;left:50%;background:var(--muted);border-radius:1px;transform:translate(-50%,-50%);transition:transform .28s cubic-bezier(.4,0,.2,1);}
.faq-icon::before{width:14px;height:1.5px;}
.faq-icon::after{width:1.5px;height:14px;}
.faq-list summary:hover .faq-icon::before,.faq-list summary:hover .faq-icon::after{background:var(--cobalt);}
.faq-list details[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.faq-a{overflow:hidden;}
.faq-a p{margin:0 0 22px;color:var(--muted);font-size:var(--fs-small);line-height:1.65;max-width:34rem;padding-right:38px;}
@media (prefers-reduced-motion:reduce){
  .faq-icon::before,.faq-icon::after{transition:none;}
}

/* ---------------------------------------------------------------------------
   WAITLIST CARD — centered white card on mist; labeled input + full-width CTA.
   Labels are the caps device; inputs echo button radius.
   -------------------------------------------------------------------------- */
.waitlist-card{max-width:520px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:48px;text-align:center;}
.waitlist-card h2{font-size:clamp(24px,3vw,32px);}
.waitlist-card p{margin:14px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.55;}
.wl-form{margin-top:28px;display:flex;flex-direction:column;gap:12px;text-align:left;}
.wl-form label{font-family:var(--font-display);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.wl-form input{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:16px;font-family:var(--font-body);}
.wl-form input:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;}
.wl-form .btn{margin-top:4px;width:100%;padding:13px 20px;}
@media (max-width:700px){.waitlist-card{padding:32px;}}
@media (max-width:390px){.waitlist-card{padding:24px 20px;}}

/* ---------------------------------------------------------------------------
   CAPTION BEATS — stacked headline captions for apMotion.beats(). Static and
   fully visible by default (no-JS readable). JS adds .js-beats to switch to an
   absolute crossfade stack; min-height keeps the pinned column from collapsing.
   -------------------------------------------------------------------------- */
.beats{position:relative;}
.beat{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.15;}
.beat + .beat{margin-top:12px;}
.js-beats{min-height:170px;}
.js-beats .beat{position:absolute;left:0;right:0;top:0;margin:0;opacity:0;}

/* ---------------------------------------------------------------------------
   CART DRAWER — right-hand white panel over an ink scrim. Hidden via [hidden]
   (chrome, not content — safe to hide without JS). Cobalt appears once: the
   checkout button.
   -------------------------------------------------------------------------- */
.cart-drawer{position:fixed;inset:0;z-index:200;}
.cart-drawer[hidden]{display:none;}
.cart-scrim,.mnav-scrim{position:absolute;inset:0;background:rgba(16,19,24,.32);border:none;padding:0;cursor:pointer;width:100%;}
/* drawer/mnav enter+exit symmetry — brief slide+fade both ways instead of an
   instant [hidden] pop. .closing is added by the page's chrome script for
   ~210ms before hidden=true lands (timeout always fires, so the panel is
   always fully hidden or fully shown even if a frame never runs). */
@media (prefers-reduced-motion: no-preference){
  .cart-drawer:not([hidden]) .cart-panel,
  .mobile-nav:not([hidden]) .mnav-panel{animation:drawer-in .3s cubic-bezier(.33,1,.68,1) both;}
  .cart-drawer:not([hidden]) .cart-scrim,
  .mobile-nav:not([hidden]) .mnav-scrim{animation:scrim-in .3s ease-out both;}
  .cart-drawer.closing .cart-panel,.mobile-nav.closing .mnav-panel{animation:drawer-out .2s ease-out both;}
  .cart-drawer.closing .cart-scrim,.mobile-nav.closing .mnav-scrim{animation:scrim-out .2s ease-out both;}
}
@keyframes drawer-in{from{transform:translateX(32px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes scrim-in{from{opacity:0;}to{opacity:1;}}
@keyframes drawer-out{to{transform:translateX(32px);opacity:0;}}
@keyframes scrim-out{to{opacity:0;}}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--white);border-left:1px solid var(--border);display:flex;flex-direction:column;}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border);}
.cart-head h3{font-size:18px;}
.drawer-close{background:none;border:none;cursor:pointer;padding:8px;font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.cart-body{flex:1;overflow-y:auto;padding:10px 24px;}
.cart-empty{color:var(--muted);font-size:var(--fs-small);padding:14px 0;}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);}
.cart-item:last-child{border-bottom:none;}
.cart-item-photo{width:72px;height:90px;background:var(--mist);border-radius:var(--radius-xs);overflow:hidden;}
.cart-item-photo img{width:100%;height:100%;object-fit:cover;}
.cart-item h4{font-family:var(--font-display);font-weight:500;font-size:15px;margin:0;}
.cart-item-meta{margin:4px 0 0;font-size:13px;color:var(--muted);}
.cart-item-price{font-family:var(--font-display);font-weight:500;font-size:14px;}
.cart-qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-xs);margin-top:8px;}
.cart-qty button{background:none;border:none;cursor:pointer;padding:4px 10px;font-size:14px;color:var(--ink);}
.cart-qty span{min-width:24px;text-align:center;font-size:13px;}
.cart-foot{border-top:1px solid var(--border);padding:20px 24px 24px;}
.cart-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:16px;}
.cart-shipping-note{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;font-variant-numeric:tabular-nums;}
.cart-foot .btn{width:100%;margin-top:14px;}
.cart-note{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;}

/* ---------------------------------------------------------------------------
   MOBILE NAV — right-hand white panel, big Archivo links, CTA at the bottom.
   Hidden via [hidden]; the .apnav-menu button toggles it below 1024.
   -------------------------------------------------------------------------- */
.mobile-nav{position:fixed;inset:0;z-index:200;}
.mobile-nav[hidden]{display:none;}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--white);border-left:1px solid var(--border);padding:16px 24px 24px;display:flex;flex-direction:column;}
.mnav-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;}
.mnav-panel nav{display:flex;flex-direction:column;}
.mnav-panel nav a{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--border);}
.mnav-panel .btn{margin-top:auto;width:100%;}

/* ---------------------------------------------------------------------------
   PERFORMANCE HINTS — long below-the-fold sections may add these.
   -------------------------------------------------------------------------- */
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 800px;}

/* ---------------------------------------------------------------------------
   TAP TARGETS — shared interactive controls raised to a >=44px hit area
   (WCAG 2.5.8). Vertical padding grows the clickable box; an equal negative
   margin cancels it back out of flow, so pitch, spacing, and text positions
   stay put while the hit area overflows invisibly. Fixed ONCE here so every
   page inherits one consistent treatment (no page-scoped duplicates).
   -------------------------------------------------------------------------- */
.brand{padding:9px 0;margin:-9px 0;}                     /* 26 + 18 = 44 */
.apnav-iconbtn{padding:15px 8px;margin:-8px 0;}          /* 14 + 30 = 44 */
.drawer-close{padding:16px 8px;margin:-8px 0;}           /* 12 + 32 = 44 */
.btn-quiet{padding:15px 16px;margin:-5px 0;}             /* 14 + 30 = 44 */
.cart-qty button{padding:15px 10px;margin:-11px 0;}      /* 16 + 30 = 46 */
/* footer links stack: -14 top cancels the +14 pad (text unmoved); -18 bottom
   keeps the exact 10px inter-link pitch (box 18 + 28pad - 18 = 28 advance = 18+10) */
.footer-col a{padding:14px 0;margin-top:-14px;margin-bottom:-18px;}

/* ---------------------------------------------------------------------------
   REDUCED MOTION — static + simple fades only. Kills transforms/animations;
   images still appear (transitions collapse to instant).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}