/* ===================================================================
   USAVIR V45 — glass on paper, every section the size of the page.

   Phones (< 768 px): each section is one screen. Its content is a
   440 × 820 design-px composition under a 60 px slab, scaled as a whole
   by --zs = min(W / 440, (H − 60) / 820), so every phone shows exactly
   the same content per screen. Free scroll (no snapping); the footer is
   its own block, zoomed to the width. On the smallest phones the stage
   is fitted to the width instead (html.tall) so text never shrinks too far.
   Long pages use "flow": the 440 px design zoomed to the width (--zw).
   Desktop (≥ 768 px): a centred 1,160 px column, every screen at least
   the height of the viewport with its content centred.
   The slab is the logo's black with the USAVIR wordmark drawn as one piece
   (every letter built as the logo's U is built); the drawer slides OVER the
   page under a soft scrim. One metallic accent (gilt) catches the light on
   hairlines and edges. The order dialog, the Order Submitted view and the
   drawer share one easing family so the site moves with one voice.
   =================================================================== */

/* ---------- tokens ---------- */
:root{
  --paper:#f7f7f4; --ink:#070707; --muted:#565656; --line:#c8c8c3;
  --slab:#010101;                          /* sampled from usavir-u-logo.webp: 88% of its pixels are rgb(1,1,1) */
  --seal:#5a1f1f; --seal-text:#8a2a2a; --seal-soft:#a65a4a;
  --gilt-1:#b9b1a2; --gilt-2:#f3efe6; --gilt-3:#cfc6b4;
  --gilt:linear-gradient(100deg,var(--gilt-1) 0%,var(--gilt-2) 42%,var(--gilt-3) 68%,var(--gilt-1) 100%);
  --gilt-glow:rgba(185,177,162,.28);
  --glass:rgba(255,255,255,.52); --glass-solid:rgba(255,255,255,.84);
  --edge-light:rgba(255,255,255,.78); --edge-dark:rgba(7,7,7,.07);
  --shadow:0 18px 40px -24px rgba(7,7,7,.28), 0 1px 2px rgba(7,7,7,.05);
  --radius:14px;
  --t-micro:160ms; --t-standard:320ms; --t-reveal:560ms; --t-sheen:700ms; --t-drawer:560ms; --t-drawer-out:380ms;
  --e-enter:cubic-bezier(.16,1,.3,1); --e-standard:cubic-bezier(.2,0,0,1); --e-glide:cubic-bezier(.22,1,.36,1); --e-heavy:cubic-bezier(.19,1,.22,1); --t-heavy:820ms;
  --ok:#2a7f55;
  --serif:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --sans:Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --slab-h:60px; --drawer-w:280px;
  --design-w:440px; --design-h:820px; --zs:1; --zw:1; --progress:0;
  --wrap:1160px; --gutter:20px; --sec:56px; --gap:20px;
  --fs-body:16px; --fs-h1:44px; --fs-h2:30px; --fs-h3:22px;
}
@media (min-width:768px){
  :root{--slab-h:64px; --drawer-w:300px; --gutter:48px; --sec:96px; --gap:36px; --fs-body:17px; --fs-h1:72px; --fs-h2:44px; --fs-h3:26px}
  html{scrollbar-gutter:stable}
}

/* ---------- type faces (self-hosted; latin subset) ---------- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/fraunces-300_600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-400_600.woff2) format("woff2")}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:96%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--slab-h) + 16px)}
html.screens{scroll-padding-top:var(--slab-h)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100svh}
/* one static, very soft light on the sheet — nothing moves under the text */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 18% 8%,rgba(255,255,255,.9),rgba(255,255,255,0) 65%),radial-gradient(ellipse 60% 45% at 85% 70%,rgba(90,31,31,.06),rgba(90,31,31,0) 70%),radial-gradient(ellipse 50% 40% at 70% 20%,rgba(7,7,7,.04),rgba(7,7,7,0) 70%)}
main,.footer{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,dt,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gilt-1);outline-offset:3px;box-shadow:0 0 0 6px var(--gilt-glow)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
em{font-style:italic}
strong{font-weight:500}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em}
/* the viewport probe: 100vw × 100svh, read by the fit script; never visible, never inside main */
.probe{position:fixed;top:0;left:0;width:100vw;height:100svh;visibility:hidden;pointer-events:none;z-index:-1}

/* ---------- layout: the desktop column, phone screens, phone flow ---------- */
.wrap{width:min(var(--wrap),100%);margin:0 auto;padding:0 var(--gutter)}
main{padding-top:calc(var(--slab-h) + 32px);padding-bottom:var(--sec)}
.sec,main .screen{margin-top:var(--sec)}
.sec:first-child,main .screen:first-child{margin-top:0}
.sec-head{margin-bottom:var(--gap)}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--gap)}
@media (min-width:768px){
  main{padding-top:calc(var(--slab-h) + 56px)}
  /* SCREENS on desktop: every section is at least a page tall, its content centred, air around it */
  body[data-fit="screens"] main{padding-top:var(--slab-h);padding-bottom:0}
  body[data-fit="screens"] .footer{margin-top:0}
  main .screen{min-height:calc(100svh - var(--slab-h));margin-top:0;display:grid;align-content:center;padding:64px 0}
  main .screen > .stage{width:100%;min-width:0}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-2--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .grid-2--aside{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .cards.grid-2{max-width:900px}
}
.stack > * + *{margin-top:var(--gap)}
.mw-560{max-width:560px}.mw-760{max-width:760px}.mw-860{max-width:860px}
.mt-6{margin-top:6px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-22{margin-top:22px}.mt-28{margin-top:28px}.mt-gap{margin-top:var(--gap)}
.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-14{margin-bottom:14px}
.seal{color:var(--seal)}

@media (max-width:767px){
  /* V48: the hero card shows on phones too; the deck rolls through every name for sale */
  .card-name{min-height:200px}
  .grid-3 .card-name,.grid-2 .card-name{min-height:0}

  /* SCREENS: one section = one screen; its content is a 440 × 820 composition fitted to width AND height; free scroll */
  html.screens main{padding:var(--slab-h) 0 0}
  html.screens main > .wrap{width:100%;max-width:none;padding:0;margin:0}
  /* the stage is laid out at exactly 440 × 820 and then scaled as a whole (transform, not zoom), so the
     line breaks are the same on every phone — zoom would lay text out at the scaled size and could wrap differently */
  html.screens .screen{height:calc(100svh - var(--slab-h));margin:0;position:relative;overflow:hidden}
  html.screens .stage{position:absolute;left:50%;top:50%;width:var(--design-w);height:var(--design-h);transform:translate(-50%,-50%) scale(var(--zs));transform-origin:center;padding:0 20px;display:flex;flex-direction:column;justify-content:center;contain:layout paint}
  /* the comfort floor: the stage fitted to the width, the screen as tall as the stage */
  html.screens.tall .screen{height:calc(var(--design-h) * var(--zs))}
  html.screens.tall .stage{top:0;transform:translateX(-50%) scale(var(--zs));transform-origin:top center}
  /* the footer is a normal block after the last screen, zoomed to the width, its own height */
  html.screens .footer{margin:0}
  html.screens .footer > .wrap,html.flow main > .wrap,html.flow .footer > .wrap{zoom:var(--zw);width:var(--design-w);max-width:none;margin:0;padding:0 20px}
}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:12px}
.eyebrow::before{content:"";flex:0 0 28px;height:1px;background:var(--gilt);transform:scaleX(0);transform-origin:left;transition:transform 640ms var(--e-enter) 140ms}
.is-in .eyebrow::before,html:not(.js) .eyebrow::before,[data-hero] .eyebrow::before,.eyebrow[data-hero]::before{transform:none}
.h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);line-height:1;letter-spacing:-.035em;font-variation-settings:"opsz" 144}
.h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.025em;font-variation-settings:"opsz" 72}
.h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.015em}
.lead{font-size:calc(var(--fs-body) + 2px);line-height:1.55;max-width:38em}
.body{line-height:1.6;max-width:40em}
.small{font-size:14px;line-height:1.5;color:var(--muted)}
.caps{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.status{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:17px;color:var(--muted)}
.prose{max-width:42em;line-height:1.65}
.prose p + p,.prose ul + p,.prose p + ul,.prose ol + p,.prose p + ol,.prose dl + p,.prose p + dl{margin-top:1em}
.prose h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.025em;margin:0 0 .5em}
.prose h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-h3);line-height:1.15;margin:1.6em 0 .45em}
.prose > h3:first-child{margin-top:0}
@media (max-width:767px){.steps{gap:12px}.steps .step{padding:16px 18px}.steps .step p{font-size:14.5px}}
.prose ul{padding-left:1.1em;list-style:disc}
.prose ol{padding-left:1.3em;list-style:decimal}
.prose li + li{margin-top:.4em}
.prose a,.body a,.small a,.lead a,.prose button.link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.prose a:hover,.body a:hover,.small a:hover,.lead a:hover{color:var(--seal)}
button.link{appearance:none;border:0;background-color:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}

/* ---------- gilt: the one accent, used where light catches an edge ---------- */
.hairline{height:1px;background:var(--gilt);background-size:200% 100%}
.hairline--draw{transform:scaleX(0);transform-origin:left;transition:transform 640ms var(--e-enter) 120ms}
.is-in .hairline--draw,.is-in.hairline--draw{transform:none}
@keyframes shimmer{from{background-position:0% 0}to{background-position:200% 0}}
.shimmer:hover{animation:shimmer 2.4s linear infinite}
@keyframes gilt-flash{0%{box-shadow:0 0 0 0 var(--gilt-glow)}60%{box-shadow:0 0 0 8px rgba(185,177,162,0)}100%{box-shadow:none}}

/* ---------- glass ---------- */
.glass{position:relative;background:var(--glass);border:1px solid var(--edge-light);border-right-color:var(--edge-dark);border-bottom-color:var(--edge-dark);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--gap);overflow:hidden;isolation:isolate;transition:transform var(--t-standard) var(--e-enter),box-shadow var(--t-standard) var(--e-enter),border-color var(--t-standard) ease}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.glass{-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-solid)}}
/* the specular top: light caught on the glass */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 60%);z-index:-1}
/* the sheen: one diagonal reflection that sweeps across on hover */
.glass::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:45%;pointer-events:none;background:linear-gradient(100deg,rgba(243,239,230,0) 0%,rgba(243,239,230,.6) 50%,rgba(243,239,230,0) 100%);transform:translateX(-120%) skewX(-12deg);opacity:0}
.glass--hover:hover{transform:translateY(-3px);border-color:var(--gilt-3);box-shadow:0 28px 52px -26px rgba(7,7,7,.36),0 0 0 1px var(--gilt-glow),0 1px 2px rgba(7,7,7,.06)}
.glass--hover:hover::after{animation:sheen var(--t-sheen) var(--e-standard) forwards}
@keyframes sheen{from{transform:translateX(-120%) skewX(-12deg);opacity:0}15%{opacity:1}to{transform:translateX(420%) skewX(-12deg);opacity:0}}
.glass--tight{padding:20px}
/* the glossy card (V44): a brighter pane, a diagonal reflection band, a gilt rim, a sharper top edge */
.glass--gloss{background-image:linear-gradient(115deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.55) 44%,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 58%),linear-gradient(135deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.46) 48%,rgba(255,255,255,.68) 100%);background-color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.92);border-right-color:rgba(7,7,7,.06);border-bottom-color:rgba(7,7,7,.06);box-shadow:var(--shadow),0 0 0 1px var(--gilt-glow),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(7,7,7,.05)}
.glass--gloss::before{background:linear-gradient(172deg,rgba(255,255,255,.8),rgba(255,255,255,.2) 36%,rgba(255,255,255,0) 54%,rgba(255,255,255,.24) 100%)}
.glass--gloss.glass--hover:hover{box-shadow:0 30px 56px -26px rgba(7,7,7,.38),0 0 0 1px var(--gilt-1),inset 0 1px 0 rgba(255,255,255,1)}
.glass--ink{background:linear-gradient(180deg,#151515,var(--slab) 60%);color:var(--paper);border-color:rgba(255,255,255,.14);border-right-color:rgba(0,0,0,.4);border-bottom-color:rgba(0,0,0,.4)}
.glass--ink::before{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%)}
.glass--ink .muted,.glass--ink .small,.glass--ink .caps,.glass--ink .eyebrow{color:rgba(247,247,244,.68)}
a.glass{color:inherit;text-decoration:none;display:block}

/* ---------- buttons and links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1;letter-spacing:-.01em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform 120ms var(--e-standard),color var(--t-micro) ease,box-shadow var(--t-micro) ease,border-color var(--t-micro) ease}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);pointer-events:none;z-index:-1}
.btn::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:36%;background:linear-gradient(100deg,rgba(243,239,230,0),rgba(243,239,230,.45) 50%,rgba(243,239,230,0));transform:translateX(-140%) skewX(-14deg);opacity:0;pointer-events:none}
.btn:hover::after{animation:sheen var(--t-sheen) var(--e-standard) forwards}
.btn:hover{border-color:var(--gilt-1);color:var(--seal)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--primary{background:linear-gradient(180deg,#1b1b1b,var(--slab));color:var(--paper);border-color:var(--slab);box-shadow:inset 0 1px 0 rgba(243,239,230,.55),0 10px 24px -14px rgba(7,7,7,.6)}
.btn--primary:hover{color:var(--paper);box-shadow:inset 0 1px 0 rgba(243,239,230,.8),0 14px 28px -14px rgba(7,7,7,.7),0 0 0 1px var(--gilt-glow)}
.btn:disabled{opacity:.6;cursor:default}
.btn--sm{min-height:44px;padding:0 18px;font-size:16px;border-radius:10px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:767px){.actions .btn{width:100%}}
.link{color:inherit;text-decoration:none;background-image:var(--gilt);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--t-micro) var(--e-enter),color var(--t-micro) ease}
.link:hover,.link:focus-visible{background-size:100% 1px;color:var(--seal)}
.link--caps{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.back{margin-bottom:18px}
.jump{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.reg-copy{position:relative;appearance:none;border:0;background:transparent;padding:6px 0;font:inherit;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);cursor:pointer;min-width:44px;min-height:44px;border-radius:8px}
.reg-copy::after{content:"Copy"}
.reg-copy.is-copied{color:var(--seal-text);animation:gilt-flash 700ms var(--e-standard)}
.reg-copy.is-copied::after{content:"Copied ✓"}
.reg-copy-ref.is-copied{border-color:var(--gilt-1);animation:gilt-flash 700ms var(--e-standard)}

/* ---------- the slab: the U mark and SAVIR in one outline on the left, everything else on the right ---------- */
.slab{position:fixed;z-index:1000;left:0;right:0;top:0;height:var(--slab-h);display:flex;align-items:stretch;justify-content:space-between;background:var(--slab);color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px -16px rgba(1,1,1,.6)}
.slab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.08);transition:background-color var(--t-standard) ease}
.slab.is-scrolled::after{background:rgba(255,255,255,.16)}
.slab__progress{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gilt);background-size:200% 100%;transform:scaleX(var(--progress));transform-origin:left;pointer-events:none;z-index:1}
/* the wordmark: an inline SVG, every letter built as the logo's U is built (a paper band with a black
   inline). It sits where the raster U sat: the cap top at 0.25 of the slab, the cap height 0.40 of it,
   the left edge at 0.317 (the U's edge inside the old square image). */
.slab__brand{flex:0 0 auto;display:block;height:var(--slab-h);padding:calc(var(--slab-h) * .25) 18px 0 calc(var(--slab-h) * .317);color:var(--paper);text-decoration:none;-webkit-tap-highlight-color:transparent}
.wm{display:block;height:calc(var(--slab-h) * .40);width:auto;overflow:hidden;transition:opacity var(--t-micro) ease}
.wm__band{stroke:currentColor}
.wm__inline{stroke:var(--slab)}
.wm__bridge{fill:currentColor}
.slab__brand:hover .wm{opacity:.85}
.slab__right{display:flex;align-items:stretch;margin-left:auto;min-width:0}
.slab__nav{display:flex;align-items:center;gap:32px;padding:0 28px;min-width:0}
.slab__link{position:relative;display:inline-flex;align-items:center;padding:8px 0;color:rgba(247,247,244,.8);text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500;white-space:nowrap;transition:color var(--t-micro) ease}
.slab__link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gilt);background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform var(--t-micro) var(--e-standard)}
.slab__link:hover,.slab__link:focus-visible,.slab__link.is-active{color:var(--paper)}
.slab__link.is-active::after,.slab__link:hover::after{transform:scaleX(1)}
.slab__link.is-active:hover::after{animation:shimmer 2.4s linear infinite}
.slab__burger{display:grid;place-items:center;width:var(--slab-h);border:0;background:transparent;color:var(--paper);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--t-micro) ease}
.slab__burger:hover{background:rgba(255,255,255,.06)}
.burger{position:relative;width:20px;height:14px}
.burger::before,.burger::after,.burger span{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--t-standard) var(--e-standard),opacity var(--t-micro) ease}
.burger::before{top:0}.burger span{top:6.25px}.burger::after{bottom:0}
.slab__burger[aria-expanded="true"] .burger::before,.buy__x .burger::before{transform:translateY(6.25px) rotate(45deg)}
.slab__burger[aria-expanded="true"] .burger span,.buy__x .burger span{opacity:0;transform:scaleX(.2)}
.slab__burger[aria-expanded="true"] .burger::after,.buy__x .burger::after{transform:translateY(-6.25px) rotate(-45deg)}
@media (max-width:767px){.slab__nav{display:none}}

/* ---------- the overlay drawer: the page stays; a scrim softens it; the pane glides in from the right ---------- */
html.drawer-open{overflow:hidden}
html.drawer-open body{touch-action:none}
.scrim{position:fixed;inset:0;z-index:1001;background:rgba(1,1,1,.35);opacity:0;transition:opacity var(--t-drawer-out) ease}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.scrim{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
html.drawer-open .scrim{opacity:1;transition:opacity var(--t-drawer) ease}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:1002;width:var(--drawer-w);transform:translateX(104%);transition:transform var(--t-drawer-out) var(--e-standard);display:block;border-radius:18px 0 0 18px;overflow:hidden;touch-action:pan-y;overscroll-behavior:contain;color:var(--paper)}
.drawer.is-open{transform:none;transition:transform var(--t-drawer) var(--e-glide);will-change:transform}
/* the pane: the slab's black glass with one metallic edge */
.drawer__pane{position:absolute;inset:0;background:rgba(1,1,1,.92);box-shadow:-30px 0 70px -30px rgba(1,1,1,.75);overflow:hidden}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.drawer__pane{-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}}
.drawer__pane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gilt);background-size:100% 300%;opacity:.95}
.drawer__pane::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 38%)}
/* the reflection that crosses the glass once as the pane settles */
.drawer__sheen{position:absolute;top:-20%;bottom:-20%;left:-30%;width:40%;pointer-events:none;opacity:0;background:linear-gradient(100deg,rgba(243,239,230,0),rgba(243,239,230,.16) 50%,rgba(243,239,230,0));transform:translateX(-120%) skewX(-14deg)}
.drawer.is-open .drawer__sheen{animation:door-sweep 900ms var(--e-standard) 240ms forwards}
@keyframes door-sweep{0%{transform:translateX(-120%) skewX(-14deg);opacity:0}18%{opacity:1}100%{transform:translateX(380%) skewX(-14deg);opacity:0}}
/* the content follows the pane by a breath */
.drawer__body{position:relative;height:100%;display:flex;flex-direction:column;overflow:auto;transform:translateX(28px);opacity:0;transition:transform var(--t-drawer-out) var(--e-standard),opacity var(--t-drawer-out) ease}
.drawer.is-open .drawer__body{transform:none;opacity:1;transition:transform var(--t-drawer) var(--e-glide) 40ms,opacity 420ms ease 60ms}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 14px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer__title{font-family:var(--serif);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,247,244,.7)}
.drawer__close{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:10px;min-width:44px;min-height:40px;padding:0 14px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--paper);transition:border-color var(--t-micro) ease}
.drawer__close:hover{border-color:var(--gilt-1)}
.drawer__links{padding:12px 24px 8px}
.drawer__links a{display:block;font-family:var(--serif);font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--paper);text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer__links a:hover,.drawer__links a:focus-visible,.drawer__links a.is-active{color:var(--gilt-2)}
.drawer__links{padding-bottom:24px}
/* items fade and slide in, 45 ms apart, behind the pane */
.drawer__links a{opacity:0;transform:translateX(16px);transition:opacity 420ms var(--e-glide),transform 420ms var(--e-glide),color var(--t-micro) ease;transition-delay:calc(170ms + var(--i,0) * 45ms)}
.drawer.is-open .drawer__links a{opacity:1;transform:none}
.drawer:not(.is-open) .drawer__links a{transition-duration:160ms;transition-delay:0s}
.drawer__links a:nth-child(2){--i:1}.drawer__links a:nth-child(3){--i:2}

/* ---------- hero ---------- */
.hero{align-items:center}
.hero .h1,.hero .profile-name{margin-top:10px}
.hero .lead{margin-top:22px}
.hero .status{margin-top:18px}
.hero-card{align-self:center}
/* the headline: each line rises inside its own clip, once, on load */
.h1 .line,.profile-name .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
html.js .line__in{display:block;transform:translateY(112%);animation:line-up 820ms var(--e-enter) forwards;animation-delay:calc(120ms + var(--i,0) * 90ms)}
@keyframes line-up{to{transform:none}}
[data-hero="1"]{--i:1}[data-hero="2"]{--i:2}[data-hero="3"]{--i:3}[data-hero="4"]{--i:4}[data-hero="5"]{--i:5}[data-hero="6"]{--i:6}
html.js [data-hero]{opacity:0;animation:hero-in 640ms var(--e-enter) forwards;animation-delay:calc(260ms + var(--i,0) * 80ms)}
@keyframes hero-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;line-height:1;padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.5)}
.chip b{font-weight:500;color:var(--ink)}

/* ---------- name cards and rows ---------- */
.card-name{display:flex;flex-direction:column;gap:14px;min-height:260px}
.card-name .no{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--seal)}
.card-name__link{color:inherit;text-decoration:none;transition:color var(--t-micro) ease}
.card-name__link:hover{color:var(--seal)}
.specimen{font-family:var(--serif);font-weight:400;font-size:var(--specimen,40px);line-height:.95;letter-spacing:-.03em;white-space:nowrap;font-variation-settings:"opsz" 144;margin:4px 0 0}
.specimen .tld{color:var(--muted);font-weight:300}
@media (max-width:767px){.specimen .tld{font-weight:400}}
.facts{font-size:12px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.price{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:34px;line-height:1;letter-spacing:-.01em}
.price--lg{font-size:52px}
@media (min-width:768px){.price--lg{font-size:64px}}
.price-caption{margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.card-name .price-block{margin-top:auto;padding-top:14px;border-top:1px solid transparent;border-image:var(--gilt) 1}
.card-name__actions{display:flex;flex-wrap:wrap;gap:8px}
.card-name__actions .btn{flex:1 1 auto}
.status-tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--seal-text)}
.struck{text-decoration:line-through;color:var(--muted)}
.rows{display:grid;gap:14px}
.row-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:center;padding:18px 20px}
.row-link__main{display:block;min-width:0;color:inherit;text-decoration:none}
.row-link .rowname{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}
.row-link .facts{margin-top:6px}
.row-link .rowprice{text-align:left}
.row-link__actions{grid-column:1/-1}
.row-link__actions .btn{width:100%}
@media (min-width:768px){
  .row-link{grid-template-columns:minmax(0,1fr) auto auto;gap:8px 28px;padding:22px 28px}
  .row-link .rowname{font-size:36px}
  .row-link .rowprice{text-align:right}
  .row-link__actions{grid-column:auto}
  .row-link__actions .btn{width:auto}
}
.row-link:hover .no,.row-link:hover .price{color:var(--seal);transition:color var(--t-micro) ease}
.mark{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--seal);white-space:nowrap}
.reg-sort{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.reg-sort button{position:relative;appearance:none;border:0;background:transparent;padding:8px 0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted);cursor:pointer;min-height:44px}
.reg-sort button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:.4em;text-decoration-color:var(--seal);text-decoration-thickness:2px}
.reg-filters{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:12px}
.reg-filters label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);display:flex;gap:10px;align-items:baseline}
.reg-filters select{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.6);font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);padding:6px 10px}
.launch .h2{margin-bottom:12px}

/* ---------- the showcase (V46): a soft gilt halo and a laid-paper texture behind the glass ---------- */
.showcase{position:relative;isolation:isolate;display:grid;gap:16px}
.showcase__halo{position:absolute;inset:-6% -4%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse 55% 50% at 50% 48%,rgba(185,177,162,.34),rgba(185,177,162,0) 70%),radial-gradient(ellipse 38% 34% at 22% 78%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(ellipse 30% 30% at 82% 18%,rgba(90,31,31,.05),rgba(90,31,31,0) 70%);opacity:0;transform:scale(.94);transition:opacity var(--t-heavy) ease,transform var(--t-heavy) var(--e-heavy)}
.showcase__halo::after{content:"";position:absolute;inset:8% 10%;background:repeating-linear-gradient(0deg,rgba(7,7,7,.028) 0 1px,transparent 1px 7px);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000,transparent 72%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000,transparent 72%)}
.is-in .showcase__halo,html:not(.js) .showcase__halo{opacity:1;transform:none}
/* the hero deck (V47): every name for sale as a card, one shown at a time, rolling on; the dots pick one; hover or focus pauses */
.deck{display:grid}
.deck>.deck__card{position:relative;grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px) scale(.985);filter:blur(10px);transition:opacity 760ms var(--e-enter),transform 760ms var(--e-enter),filter 760ms var(--e-enter),visibility 0s linear 760ms}
.deck>.deck__card.is-active{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity 760ms var(--e-enter),transform 760ms var(--e-enter),filter 760ms var(--e-enter),visibility 0s}
/* the glossy roll: a light sweeps across the card that has just arrived */
.deck>.deck__card::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;opacity:0;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.72) 50%,rgba(255,255,255,0) 60%);background-size:260% 100%;background-position:160% 0}
.deck.is-rolling>.deck__card.is-active::after{animation:deck-sheen 1100ms var(--e-enter) 160ms both}
@keyframes deck-sheen{0%{opacity:0;background-position:160% 0}18%{opacity:1}100%{opacity:0;background-position:-60% 0}}
html.reduce .deck>.deck__card{transition:none;filter:none}html.reduce .deck>.deck__card::after{animation:none!important}
.deck__dots{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;margin-top:14px}
.deck__dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--gilt-1);background:transparent;cursor:pointer;transition:background 320ms ease,transform 320ms ease}
.deck__dot[aria-selected="true"]{background:var(--gilt-1);transform:scale(1.2)}
.deck__dot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (min-width:768px){.hero-card.showcase{display:block}.showcase{gap:var(--gap)}.lots{gap:24px}.screen--tight{padding:40px 0}.grid-2--card{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
/* the large name card: a vertical card on phones and in the hero; a wide plate in the lots */
.card-name--lg{padding:18px 16px;gap:12px;min-height:0}
.card-name--lg .price-block{margin-top:0;padding-top:0;border:0}
.card-name--lg .price{font-size:40px}
.card-name__rule{display:block;margin:0}
.card-name--lg:hover .price,.card-name--lg:hover .no{color:var(--seal);transition:color var(--t-micro) ease}
@media (min-width:768px){
  .card-name--lg{padding:32px 36px;gap:14px}
  .card-name--lg .price{font-size:56px}
  .lots .card-name--lg{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"no no" "name price" "rule rule" "facts actions";column-gap:40px;row-gap:0;align-items:end;padding:28px 32px 26px}
  .lots .card-name--lg .no{grid-area:no}
  .lots .card-name--lg .specimen{grid-area:name;margin:10px 0 0;align-self:end}
  .lots .card-name--lg .price-block{grid-area:price;text-align:right;align-self:end}
  .lots .card-name--lg .card-name__rule{grid-area:rule;margin:18px 0 14px}
  .lots .card-name--lg .facts{grid-area:facts;align-self:center}
  .lots .card-name--lg .card-name__actions{grid-area:actions;justify-content:flex-end;flex-wrap:nowrap}
  .lots .card-name--lg .card-name__actions .btn{flex:0 0 auto}
  .lots .glass--hover:hover{transform:translateY(-4px)}
}
/* the hero roll (phones): the names under the buttons, each a link to its page */
/* the timeline: a gilt rail with a node over each step (desktop only; phones keep the stacked steps) */
.timeline__rail{display:none}
@media (min-width:768px){
  .timeline__rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);height:12px;margin-bottom:18px;align-items:center}
  .timeline__rail i{position:relative;display:block;height:1px;background:var(--gilt);transform:scaleX(0);transform-origin:left;transition:transform 720ms var(--e-enter)}
  .timeline__rail i::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--gilt-1);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--gilt-3);opacity:0;transition:opacity 320ms ease;transition-delay:inherit}
  .timeline__rail i:nth-child(2){transition-delay:120ms}.timeline__rail i:nth-child(3){transition-delay:240ms}.timeline__rail i:nth-child(4){transition-delay:360ms}
  .is-in .timeline__rail i,html:not(.js) .timeline__rail i{transform:none}
  .is-in .timeline__rail i::before,html:not(.js) .timeline__rail i::before{opacity:1}
}
/* questions: four glass cards, 2 × 2 on desktop, stacked on phones */
.faq-grid{display:grid;gap:10px}
.faq-card{padding:14px 16px}
.faq-card__q{display:flex;gap:10px;align-items:baseline;font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.15;letter-spacing:-.01em;margin-bottom:6px}
.faq-card__no{flex:0 0 auto;font-variant-numeric:tabular-nums lining-nums;color:var(--seal)}
.faq-card__a{font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (min-width:768px){.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}.faq-card{padding:28px 32px}.faq-card__q{font-size:22px;margin-bottom:10px}.faq-card__a{font-size:15.5px;line-height:1.55}}
/* two sections on one desktop screen; two phone screens */
.screen-pair{display:contents}
@media (min-width:768px){
  .screen-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:start;align-content:center;min-height:calc(100svh - var(--slab-h));padding:40px 0}
  .screen-pair > .screen{min-height:0;padding:0;margin:0;display:block}
}

/* ---------- steps, lists, facts ---------- */
.step{display:flex;flex-direction:column;gap:10px}
.step-head{display:flex;align-items:baseline;gap:12px}
.step-no{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:34px;line-height:1;color:var(--seal)}
.step p{font-size:15px;line-height:1.55;color:var(--muted)}
@media (min-width:768px){.step-head{display:block}.step-no{font-size:40px}.step .h3{margin-top:8px}.step p{font-size:15.5px}}
.list li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:14px 0;border-top:1px solid rgba(7,7,7,.08)}
.list li:first-child{border-top:0;padding-top:0}
.list li span{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:20px;line-height:1.2;color:var(--seal)}
.list li p{font-size:15px;line-height:1.55;color:var(--muted)}
.list li p strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.15;color:var(--ink);margin-bottom:4px}
@media (min-width:768px){.list li{padding:16px 0}.list li p{font-size:15.5px}}
.list--plain li{grid-template-columns:28px minmax(0,1fr)}
.list--plain li p{color:var(--ink)}
.list--tight li{padding:8px 0}
.list--tight li p{font-size:14.5px;line-height:1.5}
.list--tight li p strong{font-size:18px}
.blocks{display:grid;gap:14px}
.block h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.15;margin-bottom:4px}
.block p{font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- key/value rows, checks, note, ledger (name pages) ---------- */
.kv-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-top:1px solid rgba(7,7,7,.08)}
.kv-row:first-child{border-top:0;padding-top:0}
@media (min-width:768px){.kv-row{grid-template-columns:3fr 7fr;column-gap:24px}}
.kv-term{font-family:var(--serif);font-size:20px;line-height:1.15}
.kv-def{font-size:15px;line-height:1.55;color:var(--muted)}
.kv-def strong{color:var(--ink);font-weight:500}
.cookie-table .kv-term{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px}
.check{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:18px 0;border-top:1px solid rgba(7,7,7,.08)}
.check:first-child{border-top:0;padding-top:0}
.check-no{font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:30px;line-height:1;color:var(--seal)}
.check h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;margin:0 0 8px}
.check p{font-size:15px;line-height:1.55;margin:0}
.check .proves{color:var(--muted);margin-top:6px}
.code{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:10px 14px;border-radius:10px;background:rgba(7,7,7,.05);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.4}
.code code{font:inherit;flex:1;min-width:0;overflow-wrap:anywhere}
.note3{display:grid;gap:var(--gap)}
@media (min-width:768px){.note3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.note3 h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.15;margin:0 0 8px}
.note3 p{font-size:15px;line-height:1.55;color:var(--muted)}
.signed{margin-top:18px;font-family:var(--serif);font-size:17px;color:var(--muted)}
.ledger .kv-row{grid-template-columns:minmax(0,1fr) auto}
@media (min-width:768px){.ledger .kv-row{grid-template-columns:2fr 5fr 3fr}}
.ledger .amount{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:20px}
@media (min-width:768px){.ledger .amount{text-align:right}}
.strip{display:grid;gap:14px;margin-top:20px}
@media (min-width:768px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.strip > div{font-size:14px;line-height:1.5;color:var(--muted)}
.strip strong{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.prevnext{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--muted)}
.suggest li span.muted{font-size:12px}

/* ---------- the sheets (forms); class names kept for v40-offer.js ---------- */
.reg-toggle{display:flex;gap:26px;margin-bottom:6px;font-family:var(--serif);font-size:20px}
.reg-toggle button{position:relative;appearance:none;border:0;background:transparent;padding:6px 0;font:inherit;color:var(--muted);cursor:pointer;min-height:44px}
.reg-toggle button[aria-pressed="true"]{color:var(--ink)}
.reg-toggle button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--seal);transform:scaleX(0);transform-origin:left;transition:transform var(--t-micro) var(--e-standard)}
.reg-toggle button[aria-pressed="true"]::after{transform:scaleX(1)}
.reg-regarding{font-size:14px;color:var(--muted);margin:6px 0 4px}
.reg-field{position:relative;display:block;padding:22px 0 8px}
.reg-field input,.reg-field textarea,.reg-field select{display:block;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;line-height:1.4;padding:8px 0 10px;outline:none;transition:border-color var(--t-micro) ease}
.reg-field::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gilt);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--e-enter);pointer-events:none}
.reg-field:focus-within::after{transform:scaleX(1)}
.reg-field:focus-within input,.reg-field:focus-within textarea,.reg-field:focus-within select{border-bottom-color:transparent}
.reg-field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:28px}
.reg-field textarea{min-height:5.5em;resize:vertical}
.reg-field .label{position:absolute;left:0;top:30px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);pointer-events:none;transition:transform var(--t-micro) var(--e-enter),color var(--t-micro) ease;transform-origin:left}
.reg-field:focus-within .label,.reg-field.has-value .label,.reg-field select ~ .label{transform:translateY(-24px)}
.reg-field:focus-within .label{color:var(--seal)}
.reg-field .reg-prefix{position:absolute;left:0;top:30px;font-family:var(--serif);font-size:17px;color:var(--muted);pointer-events:none;opacity:0;transition:opacity var(--t-micro) ease}
.reg-field:focus-within .reg-prefix,.reg-field.has-value .reg-prefix{opacity:1}
.reg-field.has-prefix input{padding-left:1.1em}
.reg-field .reg-hint{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--muted)}
.reg-field .reg-error{display:none;margin-top:6px;font-size:13px;line-height:1.4;color:var(--seal-text)}
.reg-field.is-invalid .reg-error{display:block}
.reg-field.is-invalid input,.reg-field.is-invalid textarea,.reg-field.is-invalid select{border-bottom-color:var(--seal-soft)}
.reg-fields-2{display:grid;gap:0 24px}
@media (min-width:768px){.reg-fields-2{grid-template-columns:1fr 1fr}}
.reg-turnstile{min-height:65px;margin:14px 0 4px;display:flex;align-items:center}
.reg-turnstile.is-failed::before{content:"The security check could not load. Please refresh, or write to the address on the Contact page.";font-size:13px;color:var(--seal-text)}
.reg-form-error{margin-top:14px;font-size:15px;line-height:1.5;color:var(--seal-text)}
.reg-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:767px){.reg-actions .reg-button{width:100%}}
.reg-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform 120ms var(--e-standard),color var(--t-micro) ease,box-shadow var(--t-micro) ease,border-color var(--t-micro) ease}
.reg-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);pointer-events:none;z-index:-1}
.reg-button--primary{background:linear-gradient(180deg,#1b1b1b,var(--slab));color:var(--paper);border-color:var(--slab);box-shadow:inset 0 1px 0 rgba(243,239,230,.55),0 10px 24px -14px rgba(7,7,7,.6)}
.reg-button:hover{color:var(--seal);border-color:var(--gilt-1)}
.reg-button--primary:hover{color:var(--paper)}
.reg-button:active{transform:translateY(1px) scale(.985)}
.reg-button:disabled{opacity:.6;cursor:default}
.reg-privacy{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);max-width:40em}
.reg-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.reg-receipt{display:none;padding-top:4px}
.reg-receipt.is-shown{display:block}
.reg-receipt-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.reg-receipt-ref{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;text-transform:none;font-size:22px;color:var(--ink)}
.reg-receipt p{line-height:1.55;margin-top:14px}
.reg-receipt .reg-small{font-size:14px;color:var(--muted)}
.reg-fade{transition:opacity var(--t-standard) ease}
.reg-fade.is-out{opacity:0;pointer-events:none}

/* ---------- the order dialog (V45): a centred sheet, the same on desktop and phone ---------- */
html.buy-open{overflow:hidden}
dialog.buy{border:0;padding:0;margin:auto;background:transparent;color:var(--ink);width:min(520px,calc(100% - 24px));max-height:calc(100svh - var(--kb,0px) - 24px);overflow:visible}
dialog.buy:not([open]){display:none}
dialog.buy::backdrop{background:rgba(1,1,1,.46)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){dialog.buy::backdrop{-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}}
dialog.buy[open]::backdrop{animation:fade-in 720ms ease both}
dialog.buy[open] .buy__sheet{animation:buy-sheet-in var(--t-heavy) var(--e-heavy) 40ms both}
dialog.buy.is-closing::backdrop{animation:fade-out 420ms ease both}
dialog.buy.is-closing .buy__sheet{animation:buy-sheet-out 360ms var(--e-standard) both}
@keyframes buy-sheet-in{from{opacity:0;transform:translateY(40px) scale(.965)}}
@keyframes buy-sheet-out{to{opacity:0;transform:translateY(16px) scale(.985)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
.buy__sheet{position:relative;background:var(--paper);border-radius:22px;padding:24px 22px 26px;box-shadow:0 60px 120px -40px rgba(1,1,1,.6),inset 0 1px 0 rgba(255,255,255,.8);max-height:calc(100svh - var(--kb,0px) - 24px);overflow:auto;overscroll-behavior:contain}
@media (min-width:768px){.buy__sheet{padding:30px 34px 34px}}
.buy__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.buy__kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.buy__close{width:44px;height:44px;margin:-10px -12px -10px 0;display:grid;place-items:center;border:0;background:transparent;border-radius:12px;color:var(--ink);cursor:pointer;transition:background-color var(--t-micro) ease,transform 320ms var(--e-standard)}
.buy__close:hover{background:rgba(7,7,7,.06);transform:rotate(90deg)}
.buy__close svg{width:16px;height:16px;display:block}
.buy__item{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:4px 16px;align-items:end;padding:18px 0 16px}
.buy__no{grid-column:1/-1;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--seal)}
.buy__name{font-size:var(--specimen,28px);margin:0;min-width:0}
.buy__meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.buy__price{grid-column:2;grid-row:2/4;text-align:right;font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:28px;line-height:1;white-space:nowrap}
.buy__price small{display:block;font:500 9.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px;white-space:normal;max-width:12em;margin-left:auto}
.buy__title{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin-top:20px}
.buy__lead{font-size:14px;line-height:1.5;color:var(--muted);margin-top:6px}
.buy__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.buy__grid + .buy-field{margin-top:12px}
/* the fields: the label ABOVE the box, so nothing can ever overlap what is typed */
.buy-field__label{display:block;margin:0 0 6px 2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted);transition:color var(--t-micro) ease}
.buy-field__box{position:relative;border-radius:12px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(7,7,7,.12),inset 0 1px 0 rgba(255,255,255,.9);transition:box-shadow var(--t-micro) ease,background-color var(--t-micro) ease}
.buy-field__box::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--gilt);background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--e-enter)}
.buy-field__input{display:block;width:100%;min-height:50px;border:0;background:transparent;border-radius:inherit;padding:13px 14px 12px;font:400 18px/1.3 var(--serif);color:var(--ink);outline:none;caret-color:var(--seal)}
.buy-field__input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fbfbf9 inset;-webkit-text-fill-color:var(--ink)}
.buy-field:focus-within .buy-field__label{color:var(--ink)}
.buy-field:focus-within .buy-field__box{background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px var(--gilt-1),0 0 0 4px var(--gilt-glow)}
.buy-field:focus-within .buy-field__box::after{transform:scaleX(1)}
.buy-field.is-invalid .buy-field__box{box-shadow:inset 0 0 0 1px var(--seal-soft)}
.buy-field__error{display:none;margin:6px 2px 0;font-size:12.5px;line-height:1.4;color:var(--seal-text)}
.buy-field.is-invalid .buy-field__error{display:block}
.buy__terms{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}
.buy__terms a{color:var(--ink)}
.buy__submit{width:100%;min-height:56px;margin-top:16px}
.buy__sheet .reg-turnstile{margin:10px 0 0}
.buy__sheet .reg-turnstile[hidden]{display:none}
/* the one-line summary shown instead of the facts, lead and price block on phones */
.buy__sum{display:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-top:8px}
.buy__sum b{font-weight:500;color:var(--ink)}
/* PHONES — this block must stay AFTER the general dialog rules above, or the general rules win */
@media (max-width:767px){
  dialog.buy{margin:calc(var(--vv-top,0px) + 10px) auto auto;width:calc(100% - 20px);max-height:calc(100svh - var(--kb,0px) - 20px)}
  .buy__sheet{padding:14px 16px 18px;border-radius:18px;max-height:calc(100svh - var(--kb,0px) - 20px)}
  .buy__head{min-height:32px}
  .buy__item{display:block;padding:8px 0 10px}
  .buy__meta,.buy__lead,.buy__price{display:none}
  .buy__sum{display:block}
  .buy__name{margin-top:4px;white-space:nowrap;overflow:hidden}
  .buy__title{margin-top:8px;font-size:19px}
  .buy__grid{margin-top:10px;gap:10px}
  .buy__grid + .buy-field{margin-top:10px}
  .buy-field__label{margin-bottom:4px;font-size:10.5px}
  .buy-field__input{min-height:44px;padding:10px 12px 9px;font-size:16px}
  .buy__terms{margin-top:10px;font-size:12px;line-height:1.45}
  .buy__submit{margin-top:12px;min-height:50px}
}

/* ---------- after Submit Order: the Order Submitted view (V47: it rises on white; the dark veil is gone) ---------- */
html.done-open{overflow:hidden}
.done{position:fixed;inset:0;z-index:1210;overflow:auto;background:var(--paper);color:var(--ink);opacity:0;transition:opacity 520ms ease}
.done.is-on{opacity:1}
.done__in{min-height:100%;max-width:620px;margin:0 auto;padding:48px 20px;display:grid;align-content:center;justify-items:center;text-align:center}
.done__mark{position:relative;width:96px;height:96px;margin-bottom:28px}
.done__check{width:96px;height:96px;display:block}
.done__halo{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:1px solid var(--gilt-1);opacity:0;transform:scale(.6);pointer-events:none}
.done.is-on .done__halo{animation:halo 1200ms var(--e-heavy) 1300ms forwards}
@keyframes halo{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.8)}}
.done__inbox{margin-top:22px;padding:18px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;text-align:left;max-width:520px;width:100%}
.done__ico{grid-row:1/3;align-self:center;width:30px;height:30px;flex-basis:30px;color:var(--gilt-1)}
.done__ico svg{width:30px;height:30px}
.done__inbox-h{font-family:var(--serif);font-size:21px;line-height:1.15}
.done__inbox-p{font-size:15px;line-height:1.5;color:var(--muted)}
.done__ring{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-dasharray:277;stroke-dashoffset:277;transform:rotate(-90deg);transform-origin:50% 50%}
.done__tick{fill:none;stroke:var(--ok);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.done.is-on .done__ring{animation:draw 900ms var(--e-heavy) 200ms forwards}
.done.is-on .done__tick{animation:draw 520ms var(--e-heavy) 820ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done__item{opacity:0;transform:translateY(14px)}
.done.is-on .done__item{animation:hero-in 640ms var(--e-enter) forwards;animation-delay:calc(1000ms + var(--i,0) * 90ms)}
.done__title{margin-top:8px}
.done__thanks{margin-top:14px}
.done__line{margin-top:12px;max-width:34em}
.done__refblock{margin-top:26px;padding:18px 24px;display:grid;justify-items:center;gap:4px}
.done__ref{font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums;margin-top:6px}
@media (min-width:768px){.done__ref{font-size:48px}}
.done__note{margin-top:18px;max-width:38em}
.done__actions{margin-top:28px}
@media (max-width:767px){
  .done__in{padding:16px 18px}
  .done__mark{width:72px;height:72px;margin-bottom:12px}.done__check{width:72px;height:72px}.done__halo{width:72px;height:72px;margin:-36px 0 0 -36px}
  .done__title{font-size:34px;margin-top:6px}.done__thanks{margin-top:8px}.done__line{margin-top:8px}
  .done__inbox{margin-top:12px;padding:12px 14px}.done__inbox-h{font-size:19px}.done__inbox-p{font-size:14px}
  .done__refblock{margin-top:12px;padding:10px 18px}.done__ref{font-size:30px}
  .done__note{margin-top:10px;font-size:13px}.done__actions{margin-top:14px}
}

/* ---------- the consent bar (V44) ---------- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:999;padding:12px;pointer-events:none}
.consent__in{pointer-events:auto;margin:0 auto;max-width:760px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:16px 20px;transform:translateY(18px);opacity:0;transition:transform 520ms var(--e-glide),opacity 420ms ease}
.consent.is-shown .consent__in{transform:none;opacity:1}
.consent__text{font-size:14px;line-height:1.5;flex:1 1 320px;margin:0;color:var(--ink)}
.consent__actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:767px){.consent{padding:10px}.consent__actions{width:100%}.consent__actions .btn{flex:1}}

/* ---------- profile, index, contact rows, timeline ---------- */
.profile-name{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);line-height:1;letter-spacing:-.035em;font-variation-settings:"opsz" 144}
.profile-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.profile-meta b{font-weight:500;color:var(--ink)}
.index li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(7,7,7,.08);font-size:15px}
.index li:first-child{border-top:0;padding-top:0}
.index li span:first-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.index li .ico{align-self:center}
.index a{color:var(--ink);text-decoration:none;text-align:right}
.index a:hover{color:var(--seal)}
.index--tight li{padding:7px 0}
.index .sub{display:block;font-size:13px;color:var(--muted);margin-top:2px;letter-spacing:0;text-transform:none;font-weight:400}
/* brand marks in their brand colours (the fill is on each path) */
.ico{display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 18px}
.ico svg{width:18px;height:18px;display:block}
.contact-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:12px 0;border-top:1px solid rgba(7,7,7,.08);font-size:15px}
.contact-row:first-child{border-top:0;padding-top:0}
.contact-row a{color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.contact-row a:hover{color:var(--seal)}
.contact-row .reg-copy{justify-self:end}
.timeline li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0;border-top:1px solid rgba(7,7,7,.08)}
@media (min-width:768px){.timeline li{grid-template-columns:150px minmax(0,1fr);column-gap:24px}}
.timeline time{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-size:18px}
.timeline p{font-size:15px;line-height:1.5}
.archive{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* ---------- footer ---------- */
.footer{border-top:1px solid rgba(7,7,7,.1);background:rgba(255,255,255,.35);color:var(--muted);font-size:13px;line-height:1.55;padding:36px 0 40px;margin-top:var(--sec)}
.footer .wrap{display:grid;gap:14px 40px}
@media (min-width:768px){.footer .wrap{grid-template-columns:1fr auto}}
.footer-brand{color:var(--ink);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
@media (min-width:768px){.footer-nav{justify-self:end}}
.footer-nav a,.footer-btn{color:var(--ink);text-decoration:none}
.footer-btn{appearance:none;border:0;background:transparent;padding:0;font:inherit;cursor:pointer}
.footer-nav a:hover,.footer-btn:hover{color:var(--seal)}
.footer-profiles{display:flex;flex-wrap:wrap;gap:8px 18px}
@media (min-width:768px){.footer-profiles,.footer-note,.footer-copy{grid-column:1/-1}}
.footer-profiles a{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none}
.footer-profiles a:hover{color:var(--seal)}
.footer-profiles .ico{width:15px;height:15px;flex-basis:15px}.footer-profiles .ico svg{width:15px;height:15px}
.footer-note{max-width:64em}
.footer-note a{color:var(--ink)}
.footer-rule{height:1px;background:var(--gilt);opacity:.7}
@media (min-width:768px){.footer-rule{grid-column:1/-1}}

/* ---------- reveal on scroll: the index is an attribute value, never an inline style ---------- */
[data-reveal="1"]{--i:1}[data-reveal="2"]{--i:2}[data-reveal="3"]{--i:3}[data-reveal="4"]{--i:4}[data-reveal="5"]{--i:5}[data-reveal="6"]{--i:6}[data-reveal="7"]{--i:7}[data-reveal="8"]{--i:8}
html.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--e-enter),transform var(--t-reveal) var(--e-enter);transition-delay:calc(var(--i,0) * 60ms)}
html.js [data-reveal].is-in,html.js .is-in > [data-reveal],html.js .is-in [data-reveal]{opacity:1;transform:none}
html.js .is-instant [data-reveal],html.js [data-reveal].is-instant{transition-duration:0s!important;transition-delay:0s!important}

/* ---------- reduced motion, reduced transparency, the lite tier ---------- */
html.reduce [data-reveal],html.reduce [data-hero],html.reduce .line__in,html.reduce .glass,html.reduce .btn,html.reduce .drawer,html.reduce .drawer__body,html.reduce .drawer__sheen,html.reduce .drawer__links a,html.reduce .scrim,html.reduce .slab,html.reduce .eyebrow::before,html.reduce .reg-field::after,html.reduce .reg-copy,html.reduce .slab__link::after,html.reduce dialog.buy,html.reduce dialog.buy::backdrop,html.reduce .buy__sheet,html.reduce .buy__close,html.reduce .buy-field__box::after,html.reduce .consent__in,html.reduce .done,html.reduce .done__item,html.reduce .done__ring,html.reduce .done__tick,html.reduce .wm{transition:none!important;animation:none!important}
html.reduce [data-reveal],html.reduce [data-hero],html.reduce .line__in,html.reduce .drawer__links a,html.reduce .done__item{opacity:1;transform:none}
html.reduce .done__ring,html.reduce .done__tick{stroke-dashoffset:0}
html.reduce .done__halo,html.reduce .showcase__halo,html.reduce .timeline__rail i,html.reduce .timeline__rail i::before{transition:none!important;animation:none!important;opacity:1;transform:none}
html.reduce .done__halo{opacity:0}
html.reduce .done.is-on{opacity:1}
html.reduce .eyebrow::before{transform:none}
html.lite .glass,html.lite .drawer__pane,html.lite .scrim,html.lite dialog.buy::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite dialog.buy::backdrop{background:rgba(1,1,1,.72)}
html.lite .glass{background:var(--glass-solid)}
html.lite .drawer__pane{background:rgba(1,1,1,.96)}
@media (prefers-reduced-transparency:reduce){.glass,.drawer__pane,.scrim,dialog.buy::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}.glass{background:var(--glass-solid)}.drawer__pane{background:rgba(1,1,1,.96)}dialog.buy::backdrop{background:rgba(1,1,1,.72)}}

/* ---------- page changes: a soft crossfade with a settle on the page, the slab persists ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
.slab{view-transition-name:slab}
::view-transition-group(slab){animation-duration:0s}
.consent{view-transition-name:consent}
::view-transition-group(consent){animation-duration:0s}
main{view-transition-name:main}
.footer{view-transition-name:footer}
.hero .h1,.hero .profile-name{view-transition-name:hero-title}
::view-transition-old(main),::view-transition-old(footer),::view-transition-old(hero-title){animation:vt-out 200ms var(--e-standard) both}
::view-transition-new(main),::view-transition-new(footer),::view-transition-new(hero-title){animation:vt-in 420ms var(--e-glide) both}
@keyframes vt-out{to{opacity:0;transform:scale(.992)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.01)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- print ---------- */
@media print{
  .slab,.drawer,.scrim,.probe,.footer-nav,.consent,body::before{display:none!important}
  html.done-open main,html.done-open .footer{display:none!important}
  main{padding-top:0;transform:none!important}
  .screen,.footer{height:auto!important;min-height:0!important;display:block!important;overflow:visible!important}
  .stage,main > .wrap,.footer > .wrap{zoom:1!important;width:auto!important;height:auto!important;position:static!important;transform:none!important}
  html.js [data-reveal],html.js [data-hero],html.js .line__in{opacity:1;transform:none;animation:none}
  .glass{box-shadow:none;background:#fff;backdrop-filter:none}
  body.receipt-shown *{visibility:hidden}
  body.receipt-shown .reg-receipt,body.receipt-shown .reg-receipt *{visibility:visible}
  body.receipt-shown .reg-receipt{position:absolute;left:0;top:0;width:100%;padding:0}
  body.receipt-shown .reg-receipt .reg-actions{display:none}
  dialog.buy{display:none!important}
  .done{position:static;opacity:1}
}