/* ===========================================================================
   AERO — "END TITLE"
   The page as a title sequence for one object.
   Stage is true black. Centre of every viewport stays empty for the shoe;
   measurement lives in the margins. Hierarchy comes from case, rule and
   indentation in one face. Pressed states invert to solid, never tint.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* stage */
  --void:      #000000;   /* cut-to-black bands, the stage floor */
  --ground:    #08080A;   /* page */
  --raise:     #101014;
  --raise-2:   #16161B;

  /* ink — every value below is >=4.5:1 on --ground */
  --ink:       #FAFAF8;
  --ink-2:     #A6A6A5;
  --ink-3:     #7E7E81;

  /* rules */
  --rule:      #1C1C21;
  --rule-2:    #26262C;
  --rule-lit:  #3A3A42;

  /* the only accent is white. these are functional state only. */
  --warn:      #C9A227;
  --bad:       #D2564B;
  --good:      #6FA97C;

  --gut:       20px;
  --max:       1320px;
  --bar:       52px;

  /* exponential ease-out, per the motion floor */
  --out:       cubic-bezier(.16,1,.3,1);
  --out-soft:  cubic-bezier(.33,1,.68,1);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 140px;
}
@media (min-width: 900px){ :root{ --gut: 40px; --bar: 60px; } }

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ background: var(--ground); -webkit-text-size-adjust: 100%; }

body{
  background: var(--ground);
  color: var(--ink);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (min-width:900px){ body{ font-size:17px; } }

/* --------------------------------------------------- browser surfaces ---- */
::selection{ background: var(--ink); color: var(--void); }
::-moz-selection{ background: var(--ink); color: var(--void); }
input, textarea{ caret-color: var(--ink); }
:root{ scrollbar-color: var(--rule-lit) var(--ground); scrollbar-width: thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--ground); }
::-webkit-scrollbar-thumb{ background: var(--rule-2); border:2px solid var(--ground); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--rule-lit); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:1px; }
:where(a):focus-visible{ outline-offset:4px; }

img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
     clip-path: inset(50%); white-space:nowrap; border:0; }

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.02; letter-spacing:-0.035em; }

/* display caps at 6rem per the type floor; tracking never tighter than -.04em */
.d1{
  font-size: clamp(3rem, 11vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-wrap: balance;
}
.d2{
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
.d3{ font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing:-0.02em; line-height:1.15; }

/* body measure 65-75ch */
.copy{ font-size:1.0625rem; color: var(--ink-2); line-height:1.65; max-width:68ch; }
.copy-lg{ font-size:clamp(1.125rem,1.9vw,1.375rem); color:var(--ink-2); line-height:1.55; max-width:66ch; }
.copy strong, .copy-lg strong{ color: var(--ink); font-weight:500; }
.dim{ color: var(--ink-2); }
.faint{ color: var(--ink-3); }
.tnum{ font-variant-numeric: tabular-nums; }

/* instrument voice — measurement and machine labels only, never a kicker */
.inst{
  font-family: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.inst-lit{ color: var(--ink-2); }

/* the wordmark: wide-tracked grotesque, mark optically left */
.mark-lock{ display:inline-flex; align-items:center; gap:.7em; }
.mark-lock svg{ width:1.05em; height:1.05em; flex:none; }
.wordmark{
  font-weight:600;
  letter-spacing:0.42em;
  text-transform:uppercase;
  /* trailing tracking pads the right edge; pull it back for optical centring */
  margin-right:-0.42em;
  font-variation-settings:'wdth' 112;
}

/* full-width rule as a hierarchy device, not decoration */
.rule{ border:0; border-top:1px solid var(--rule); margin:0; }
.rule-lit{ border-top-color: var(--rule-2); }

/* ---------------------------------------------------------------- top bar -- */
.bar{
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--bar);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color .45s var(--out), background .45s var(--out);
}
.bar[data-stuck="true"]{ border-bottom-color: var(--rule); background: color-mix(in srgb, var(--void) 94%, transparent); }
.bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-5); }
.bar-home{ font-size:.875rem; }
.bar-nav{ display:none; align-items:center; gap: var(--sp-6); }
.bar-nav a{ font-size:.8125rem; color:var(--ink-2); transition:color .2s var(--out); }
.bar-nav a:hover{ color:var(--ink); }
.bar-right{ display:flex; align-items:center; gap: var(--sp-2); }
@media (min-width: 940px){ .bar-nav{ display:flex; } }

/* ---------------------------------------------------------------- buttons -- */
.btn{
  --btn-fg: var(--ink); --btn-bg: transparent; --btn-bd: var(--rule-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding: 13px 24px; border-radius: 999px;
  font-size:.875rem; font-weight:500; letter-spacing:-0.005em; white-space:nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border:1px solid var(--btn-bd);
  transition: background .28s var(--out), color .28s var(--out),
              border-color .28s var(--out), transform .28s var(--out);
}
.btn:hover{ --btn-bd: var(--rule-lit); }
.btn:active{ transform: translateY(1px); }

/* pressed and primary invert to solid — no tinting anywhere */
.btn-solid{ --btn-fg: var(--void); --btn-bg: var(--ink); --btn-bd: var(--ink); font-weight:600; }
.btn-solid:hover{ --btn-bg: #E4E4E0; --btn-bd:#E4E4E0; }
.btn-lg{ padding:16px 32px; font-size:.9375rem; }
.btn-sm{ padding:9px 16px; font-size:.8125rem; }
.btn-bare{ border-color:transparent; padding-inline:8px; color:var(--ink-2); }
.btn-bare:hover{ color:var(--ink); border-color:transparent; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.38; cursor:not-allowed; transform:none; }
.btn[aria-busy="true"]{ cursor:progress; }

/* -------------------------------------------------------------- stage band -- */
/* true-black bands are the cut-to-black between titles */
.stage{ background: var(--void); }

section{ position: relative; }
.pad{ padding-block: var(--sp-9); }
@media (min-width:900px){ .pad{ padding-block: var(--sp-10); } }
.pad-s{ padding-block: var(--sp-8); }

/* ------------------------------------------------------------------ hero --- */
.hero{
  min-height: 100svh; background: var(--void);
  display: grid; grid-template-rows: var(--bar) 1fr auto;
  position: relative; overflow: hidden;
}
.hero-body{ padding-block: var(--sp-7) var(--sp-6); }
/* raking light, matching the studio key in the renders */
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(115% 78% at 76% 8%, rgba(255,255,255,.10), transparent 62%);
}
.hero-body{ position:relative; display:grid; align-content:center; gap: var(--sp-6); z-index:1; }
.hero-title{ position:relative; }

/* margins carry measurement; the centre stays empty for the shoe */
.hero-rails{ display:none; }
@media (min-width:1100px){
  .hero-rails{
    display:flex; justify-content:space-between; align-items:flex-end;
    width:100%; max-width:var(--max); margin-inline:auto;
    padding:0 var(--gut) var(--sp-7); z-index:2; pointer-events:none;
  }
  .rail{ display:grid; gap:6px; }
  .rail-r{ text-align:right; }
}

.hero-shoe{ position:relative; z-index:1; }
.hero-shoe{ border-radius:14px; overflow:hidden; background:var(--raise); }
.hero-shoe img{ width:100%; height:100%; aspect-ratio: 3 / 2; object-fit:cover; }

/* ---------------------------------------------------------------- 360 view -- */
.tt{ background: var(--void); position:relative; }
.tt-track{ position:relative; }
.tt-pin{
  position: sticky; top:0; height:100svh;
  display:grid; grid-template-rows: 1fr auto; align-items:center;
  overflow:hidden;
}
.tt-stage{
  position:relative; width:min(94vw, 1000px); margin-inline:auto;
  aspect-ratio: 4 / 3; touch-action: pan-y;
  cursor: grab;
}
.tt-stage[data-drag="true"]{ cursor: grabbing; }
.tt-stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain; opacity:0; will-change: opacity;
}
.tt-stage img.on{ opacity:1; }

.tt-hud{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: var(--sp-5); padding: 0 var(--gut) var(--sp-7);
}
.tt-dial{ display:flex; align-items:center; gap: var(--sp-3); }
.tt-meter{ width:clamp(90px,18vw,190px); height:1px; background:var(--rule-2); position:relative; }
.tt-meter i{ position:absolute; inset:0 auto 0 0; background:var(--ink); width:0; }
.tt-hint{ display:flex; align-items:center; gap:.5em; }

/* ------------------------------------------------------------------ proof -- */
/* asymmetric editorial rows, not a card grid */
.row{ display:grid; gap: var(--sp-6); align-items:center; }
@media (min-width: 940px){
  .row{ grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .row-wide{ grid-template-columns: 1.35fr 1fr; }
  .row-narrow{ grid-template-columns: 1fr 1.35fr; }
  .row-flip > :first-child{ order: 2; }
}
/* Plates own their aspect so rows stay even regardless of native render size.
   The renders are 3:2, 1:1 and 3:4; the modifier picks which crop applies. */
.plate{
  position:relative; background: var(--raise); overflow:hidden;
  border-radius:12px; aspect-ratio: 3 / 2;
}
.plate img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.plate-tall{ aspect-ratio: 3 / 4; }
.plate-sq{ aspect-ratio: 1 / 1; }
.plate-wide{ aspect-ratio: 16 / 9; }
/* the outsole and top-down are the only shots that must never be cropped */
.plate-fit{ background: var(--void); }
.plate-fit img{ object-fit: contain; }
@media (max-width: 939px){
  .plate-tall{ aspect-ratio: 4 / 5; }
}
.plate-tag{
  position:absolute; left:14px; bottom:12px;
  background: color-mix(in srgb, var(--void) 76%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding:5px 9px; border-radius:3px;
}

/* ---------------------------------------------------------------- gallery -- */
.gal{ display:grid; gap: var(--sp-3); grid-template-columns: repeat(6, 1fr); }
.gal figure{ margin:0; position:relative; overflow:hidden; background: var(--raise);
  grid-column: span 6; border-radius:10px; aspect-ratio: 3 / 2; }
.gal figure.tall{ aspect-ratio: 3 / 4; }
.gal figure.sq{ aspect-ratio: 1 / 1; }
.gal img{ width:100%; height:100%; object-fit:cover;
  transition: transform 1.4s var(--out), filter 1.4s var(--out); }
.gal figure:hover img{ transform: scale(1.035); }
.gal figcaption{ display:flex; justify-content:space-between; gap:var(--sp-4); padding-top:10px; }
@media (min-width: 760px){
  .gal{ gap: var(--sp-4); }
  .gal figure.g-6{ grid-column: span 6; }
  .gal figure.g-4{ grid-column: span 4; }
  .gal figure.g-3{ grid-column: span 3; }
  .gal figure.g-2{ grid-column: span 2; }
}

/* ------------------------------------------------------------- data table -- */
.data{ border-top:1px solid var(--rule); }
.data > div{
  display:grid; grid-template-columns: minmax(110px, 30%) 1fr;
  gap: var(--sp-4); padding: 13px 0; border-bottom:1px solid var(--rule);
  font-size:.875rem; align-items:baseline;
}
.data dt{ margin:0; color: var(--ink-3); }
.data dd{ margin:0; color: var(--ink); font-variant-numeric: tabular-nums; }
.data dd em{ font-style:normal; color: var(--ink-3); }

/* flags an unverified figure without shouting */
.unver{
  display:inline-flex; align-items:center; gap:.4em; margin-left:.5em;
  font-family:'Martian Mono', ui-monospace, monospace;
  font-size:.5625rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--warn); border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  padding:2px 5px; border-radius:2px; white-space:nowrap;
}

/* ------------------------------------------------------------- assembly ---- */
/* numbers here carry assembly order, which the reader needs */
.asm{ border-top:1px solid var(--rule); }
.asm-row{
  display:grid; grid-template-columns: 42px 1fr 20px; gap: var(--sp-4);
  padding: 18px 0; border-bottom:1px solid var(--rule);
  text-align:left; width:100%; align-items:start;
  transition: background .3s var(--out);
}
.asm-row:hover{ background: var(--raise); }
.asm-row[aria-expanded="true"]{ background: var(--raise); }
.asm-n{ padding-top:3px; }
.asm-h{ font-size:1rem; font-weight:500; margin:0 0 3px; }
.asm-sub{ margin:0; font-size:.875rem; color: var(--ink-3); }
.asm-more{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--out);
}
.asm-row[aria-expanded="true"] .asm-more{ grid-template-rows: 1fr; }
.asm-more > div{ overflow:hidden; }
.asm-more p{ margin:12px 0 0; font-size:.875rem; color: var(--ink-2); max-width:64ch; }
.asm-chev{ justify-self:end; padding-top:5px; color:var(--ink-3);
  transition: transform .4s var(--out), color .3s var(--out); }
.asm-row[aria-expanded="true"] .asm-chev{ transform: rotate(45deg); color:var(--ink); }

/* ----------------------------------------------------------------- sizes --- */
.sizes{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-2); }
.size{
  border:1px solid var(--rule-2); border-radius:10px; padding:15px 10px; text-align:center;
  transition: border-color .25s var(--out), background .25s var(--out), color .25s var(--out);
}
.size:hover{ border-color: var(--rule-lit); }
.size b{ display:block; font-size:1.25rem; font-weight:600; letter-spacing:-0.02em; }
.size i{ display:block; font-style:normal; margin-top:3px; }
/* selected inverts to solid */
.size[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--void); }
.size[aria-pressed="true"] i{ color: #4A4A48; }

/* ------------------------------------------------------------------ buy ---- */
.buy-panel{ display:grid; gap: var(--sp-5); align-content:start; }
@media (min-width: 1000px){ .buy-panel{ position: sticky; top: calc(var(--bar) + var(--sp-6)); } }
.price-line{ display:flex; align-items:baseline; gap: var(--sp-3); flex-wrap:wrap; }
.price{ font-size: clamp(2rem,4vw,2.75rem); font-weight:650; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.price-strike{ font-size:1rem; color:var(--ink-3); text-decoration:line-through;
  text-decoration-thickness:1px; text-underline-offset:2px; }

.field{ display:grid; gap: var(--sp-2); }
.field > label{ font-family:'Martian Mono',ui-monospace,monospace; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.input{
  width:100%; padding:13px 15px; background: var(--raise);
  border:1px solid var(--rule-2); border-radius:9px; color:var(--ink);
  transition: border-color .25s var(--out), background .25s var(--out);
}
.input::placeholder{ color: var(--ink-3); }
.input:hover{ border-color: var(--rule-lit); }
.input:focus{ outline:none; border-color: var(--ink-3); background: var(--raise-2); }
.inline{ display:flex; gap: var(--sp-2); }
.inline .input{ flex:1; min-width:0; }

.pays{ display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; }
.pays svg{ height:16px; width:auto; color: var(--ink-3); }

.msg{ font-size:.875rem; padding:11px 14px; border-radius:8px; border:1px solid var(--rule-2); color:var(--ink-2); }
.msg[data-kind="error"]{ border-color: color-mix(in srgb, var(--bad) 45%, transparent); color:#E9A29B; }
.msg[data-kind="ok"]{ border-color: color-mix(in srgb, var(--good) 45%, transparent); color:#A5CCAF; }
.msg[hidden]{ display:none; }

/* ------------------------------------------------------------- countdown --- */
.count{ display:flex; gap: var(--sp-2); flex-wrap:wrap; }
.cell{
  min-width:72px; flex:1 1 72px; max-width:110px;
  border:1px solid var(--rule); border-radius:11px; padding:12px 8px 10px; text-align:center;
  background: var(--raise);
}
.cell b{ display:block; font-size:clamp(1.5rem,4.4vw,2.25rem); font-weight:650;
  letter-spacing:-0.04em; line-height:1; font-variant-numeric:tabular-nums; }
.cell i{ display:block; font-style:normal; margin-top:8px; }

/* ------------------------------------------------------------ sticky bar --- */
.dock{
  position: fixed; inset: auto 0 0 0; z-index: 70;
  background: color-mix(in srgb, var(--void) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top:1px solid var(--rule);
  padding: 11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  transform: translateY(115%);
  transition: transform .5s var(--out);
}
.dock[data-show="true"]{ transform:none; }
.dock-l{ display:grid; gap:2px; min-width:0; }
.dock-l b{ font-size:.9375rem; font-weight:600; font-variant-numeric:tabular-nums; }
@media (min-width: 1000px){ .dock{ display:none; } }

/* ---------------------------------------------------------------- dialog --- */
dialog.sheet{ border:0; padding:0; background:transparent; max-width:100%; max-height:100dvh; }
dialog.sheet::backdrop{ background: rgba(0,0,0,.78); backdrop-filter: blur(3px); }
.sheet-in{
  width:min(94vw, 420px); background: var(--raise);
  border:1px solid var(--rule-2); border-radius:16px; padding: var(--sp-6);
  display:grid; gap: var(--sp-4);
}
.sheet-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.seg{ display:flex; gap:3px; border:1px solid var(--rule-2); border-radius:999px; padding:3px; }
.seg button{ flex:1; padding:8px 14px; border-radius:999px; font-size:.8125rem; color:var(--ink-2);
  transition: background .25s var(--out), color .25s var(--out); }
.seg button[aria-selected="true"]{ background: var(--ink); color: var(--void); font-weight:600; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:var(--ink-2); }
.check input{ margin-top:4px; accent-color:#fff; }

/* ---------------------------------------------------------------- footer --- */
.foot{ background: var(--void); border-top:1px solid var(--rule); padding-block: var(--sp-8); }
.foot-grid{ display:grid; gap: var(--sp-7); }
@media (min-width: 760px){ .foot-grid{ grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot h5{ margin:0 0 var(--sp-4); font-family:'Martian Mono',ui-monospace,monospace;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.875rem; }
.foot a{ color:var(--ink-2); transition:color .2s var(--out); }
.foot a:hover{ color:var(--ink); }

/* ---------------------------------------------------------------- motion --- */
/* One authored entrance: content rises and unblurs as the title clears frame.
   Sections do NOT all share one identical animation — the stagger and the
   distance differ by role. */
.enter{ opacity:0; transform: translateY(18px); filter: blur(6px); }
.enter.lit{
  opacity:1; transform:none; filter:none;
  transition: opacity .9s var(--out), transform .9s var(--out), filter .9s var(--out);
}
.enter-2.lit{ transition-delay:.09s }
.enter-3.lit{ transition-delay:.18s }
.enter-4.lit{ transition-delay:.27s }
/* the shoe plates travel further and settle slower */
.enter-plate{ opacity:0; transform: translateY(34px) scale(.985); }
.enter-plate.lit{ opacity:1; transform:none;
  transition: opacity 1.15s var(--out), transform 1.15s var(--out); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .enter,.enter-plate{ opacity:1; transform:none; filter:none; }
  .tt-track{ height:auto !important; }
  .tt-pin{ position:static; height:auto; padding-block: var(--sp-8); }
  .gal figure:hover img{ transform:none; }
}

/* ------------------------------------------------------------------- cart -- */
.cart-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  border-radius:999px; background:var(--ink); color:var(--void);
  font-size:.625rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.cart-badge[hidden]{ display:none; }

.line{
  display:grid; gap:var(--sp-3); align-items:center;
  grid-template-columns:1fr auto; padding:var(--sp-5) 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:640px){
  .line{ grid-template-columns:1fr auto 84px auto; gap:var(--sp-5); }
}
.line-t{ margin:0 0 3px; font-size:1rem; font-weight:500; }
.line-p{ margin:0; font-size:1rem; text-align:right; }

.stepper{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--rule-2); border-radius:999px; padding:3px;
}
.stepper button{
  width:30px; height:30px; border-radius:999px; font-size:1rem; line-height:1;
  color:var(--ink-2); transition:background .2s var(--out), color .2s var(--out);
}
.stepper button:hover{ background:var(--raise-2); color:var(--ink); }
.stepper span{ min-width:26px; text-align:center; font-size:.875rem; }

.summary{
  border:1px solid var(--rule-2); border-radius:14px; padding:var(--sp-6);
  display:grid; gap:var(--sp-4); align-content:start;
}
@media (min-width:1000px){ .summary{ position:sticky; top:calc(var(--bar) + var(--sp-6)); } }
.sum-row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4); font-size:.875rem; }
.sum-row.total{ font-size:1.25rem; font-weight:650; letter-spacing:-.02em; padding-top:var(--sp-4); border-top:1px solid var(--rule); }

/* ------------------------------------------------------------------ share -- */
.share{ display:inline-flex; align-items:center; gap:.5em; }
.share svg{ width:15px; height:15px; }

/* --------------------------------------------------------------- prose ----- */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.375rem,2.6vw,1.75rem); margin:var(--sp-8) 0 var(--sp-3); letter-spacing:-.025em; }
.prose h3{ font-size:1.0625rem; font-weight:600; margin:var(--sp-6) 0 var(--sp-2); }
.prose p{ color:var(--ink-2); line-height:1.7; margin:0 0 var(--sp-4); }
.prose ul{ color:var(--ink-2); line-height:1.7; margin:0 0 var(--sp-4); padding-left:1.15em; }
.prose li{ margin-bottom:var(--sp-2); }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--rule-lit); transition:text-decoration-color .2s var(--out); }
.prose a:hover{ text-decoration-color:var(--ink); }
.prose strong{ color:var(--ink); font-weight:500; }
.prose hr{ border:0; border-top:1px solid var(--rule); margin:var(--sp-7) 0; }

/* ---------------------------------------------------------------- notice --- */
.notice{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  border:1px solid var(--rule-2); border-radius:12px; padding:var(--sp-5);
}
.notice p{ margin:0; }

.paychip{
  border:1px solid var(--rule-2); border-radius:6px; padding:5px 9px;
  font-family:'Martian Mono',ui-monospace,monospace; font-size:.5625rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}