/* ==========================================================================
   SALTSTRÖM theme — design system
   Light by default: warm paper, ink type. Dark set under [data-theme="dark"].
   ========================================================================== */
:root {
  color-scheme: light;
  --surface-0: #f3efe6; --surface-1: #ece7dc; --surface-2: #e5dfd3; --surface-3: #ddd6c9; --surface-4: #cfc7b8; --surface-5: #b8af9f; --surface-6: #a0978a;
  --fg: #1a1917; --fg-2: #3b3833; --fg-3: #6e685e;
  --silver: #7a7f87; --steel: #5f6b78; --signal: #1f7f90; --signal-dim: #5aa3b0; --brass: #8f6b2a; --brass-dim: #b08a47; --lamp: #d9701c; --air: #faf8f2;
  --fg-rgb: 26, 25, 23; --surface-rgb: 243, 239, 230; --mask-rgb: 122, 112, 98; --glow-rgb: 255, 255, 255; --vignette-rgb: 196, 186, 168;
  --particle: #7a7267; --air-rgb: 96, 118, 132; --brass-rgb: 143, 107, 42; --lamp-rgb: 217, 112, 28; --signal-rgb: 31, 127, 144;
  --shadow-strong: rgba(48, 38, 20, 0.35); --edge-highlight: rgba(255, 255, 255, 0.7); --plate-top: rgba(255, 255, 255, 0.5);
  --thumb-a: #fbf8f1; --thumb-b: #ddd6c9;
  --hairline: rgba(26, 25, 23, 0.12); --hairline-strong: rgba(26, 25, 23, 0.22);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Archivo", "Inter", ui-sans-serif, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --section-y: clamp(6rem, 12vw, 12.5rem); --gutter: clamp(1.25rem, 4vw, 4rem); --nav-h: 72px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #0a0a0b; --surface-1: #0f1012; --surface-2: #131416; --surface-3: #17181b; --surface-4: #202226; --surface-5: #2b2e33; --surface-6: #3a3e45;
  --fg: #ece7dc; --fg-2: #cfc9bc; --fg-3: #a9a498;
  --silver: #8f949c; --signal: #8fdbe8; --signal-dim: #4f8f9b; --brass: #c9a35b; --brass-dim: #8f7440; --lamp: #ff9d2e; --air: #0f1012;
  --fg-rgb: 236, 231, 220; --surface-rgb: 10, 10, 11; --mask-rgb: 10, 10, 11; --glow-rgb: 236, 231, 220; --vignette-rgb: 10, 10, 11;
  --particle: #d8d3c8; --air-rgb: 215, 228, 236; --brass-rgb: 201, 163, 91; --lamp-rgb: 255, 157, 46; --signal-rgb: 143, 219, 232;
  --shadow-strong: rgba(0, 0, 0, 0.9); --edge-highlight: rgba(255, 255, 255, 0.08); --plate-top: rgba(255, 255, 255, 0.03);
  --thumb-a: #34373d; --thumb-b: #1c1e22; --hairline: rgba(236, 231, 220, 0.10); --hairline-strong: rgba(236, 231, 220, 0.18);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { overflow-x: clip; }
body { margin: 0; background: var(--surface-0); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(31, 127, 144, 0.22); }
:focus-visible { outline: 1px solid rgba(var(--fg-rgb), .7); outline-offset: 3px; border-radius: 2px; }
/* Fields never get a ring: the field's own line turns ink instead. */
input:focus, input:focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible { outline: none !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus, textarea:focus, select:focus { border-color: var(--fg) !important; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 1px solid var(--fg) !important; outline-offset: 2px; }
.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; }
.skip-link { position: absolute; left: -999px; top: 0.75rem; z-index: 200; }
.skip-link:focus { left: 0.75rem; }

/* Type ------------------------------------------------------------------ */
.display { font-family: var(--font-display); font-stretch: 78%; font-weight: 700; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; }
.display-wide { font-family: var(--font-display); font-stretch: 100%; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.92em; color: var(--fg-2); }
.eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: 1rem; }
.eyebrow--plain { display: inline; }
.eyebrow .rule { display: inline-block; width: 2rem; height: 1px; background: rgba(var(--fg-rgb), .25); }
.eyebrow .idx { opacity: .7; }
.eyebrow--xs { font-size: 0.5625rem; }
.lede { font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.55; color: var(--fg-2); }
.muted { color: var(--fg-3); }
.small { font-size: 0.8125rem; }
.xs { font-size: 0.75rem; }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.h-section { font-size: clamp(3rem, 9vw, 10rem); margin-top: 2rem; }
.h-section--md { font-size: clamp(2.75rem, 7vw, 7.5rem); }
.h-section--sm { font-size: clamp(2.5rem, 6vw, 6rem); }
.h-sub { font-size: 1.75rem; }
@media (min-width: 768px) { .h-sub { font-size: 2.25rem; } }
.brass { color: var(--brass); } .brass-dim { color: var(--brass-dim); } .signal { color: var(--signal); } .lamp-text { color: var(--lamp); }

/* Layout ----------------------------------------------------------------- */
.container-x { padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; }
.section--overflow { overflow: hidden; }
.hairline-t { border-top: 1px solid var(--hairline); }
.grid-12 { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .col-3 { grid-column-end: span 3; } .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; } .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .col-start-9 { grid-column-start: 9; } .grid-12--center { align-items: center; } .grid-12--start { align-items: start; } }
.mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; } .mt-20 { margin-top: 5rem; }
@media (min-width: 768px) { .md\:mt-16 { margin-top: 4rem; } .md\:mt-20 { margin-top: 5rem; } .md\:mt-24 { margin-top: 6rem; } .md\:mt-32 { margin-top: 8rem; } }
.max-md { max-width: 28rem; } .max-lg { max-width: 32rem; } .max-xl { max-width: 36rem; } .max-prose { max-width: 65ch; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .wrap { flex-wrap: wrap; }
.plate { background: linear-gradient(180deg, var(--plate-top), rgba(255,255,255,0) 40%), var(--surface-2); border: 1px solid var(--hairline); border-radius: 4px; position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.28 0 0 0 0 0.25 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.frame { position: relative; overflow: hidden; border-radius: 6px; border: 1px solid var(--hairline); background: var(--surface-1); box-shadow: 0 60px 120px -40px var(--shadow-strong); }
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 var(--edge-highlight); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.ratio-unit { aspect-ratio: 1605 / 688; }
.vignette { background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(var(--vignette-rgb), .55) 100%); }
.field { position: absolute; inset: 0; pointer-events: none; }
.field canvas { width: 100%; height: 100%; display: block; }
.rel { position: relative; }

/* Buttons & inputs ------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; height: 3.25rem; padding: 0 1.625rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; border-radius: 2px; border: 1px solid transparent; white-space: nowrap; transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft), border-color .35s var(--ease-soft), box-shadow .5s var(--ease-soft); }
.btn-primary { background: var(--fg); color: var(--surface-0); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(var(--fg-rgb),.25), 0 12px 40px -12px rgba(var(--fg-rgb),.45); }
.btn-outline { border-color: var(--hairline-strong); color: var(--fg); }
.btn-outline:hover { border-color: rgba(var(--fg-rgb),.5); background: rgba(var(--fg-rgb),.05); }
.btn-ghost { color: var(--fg-2); padding: 0 .5rem; height: auto; }
.btn-ghost:hover { color: var(--fg); }
.btn-sm { height: 2.5rem; padding: 0 1.125rem; font-size: .6875rem; }
.btn-full { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn .dim { color: var(--fg-3); }
.btn-primary .dim { color: var(--surface-4); }
.input { width: 100%; height: 3.25rem; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .08em; padding: 0 .25rem; transition: border-color .3s var(--ease-soft); }
.input::placeholder { color: var(--fg-3); letter-spacing: .18em; text-transform: uppercase; font-size: .6875rem; }
.input:focus { outline: none; border-bottom-color: var(--fg); }
textarea.input { height: 8rem; padding: .75rem .25rem; resize: none; }
.fader { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.fader::-webkit-slider-runnable-track { height: 1px; background: var(--hairline-strong); }
.fader::-moz-range-track { height: 1px; background: var(--hairline-strong); }
.fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 30px; margin-top: -15px; border-radius: 2px; background: linear-gradient(180deg, var(--thumb-a), var(--thumb-b)); border: 1px solid rgba(var(--fg-rgb),.35); box-shadow: 0 6px 16px -4px var(--shadow-strong), inset 0 1px 0 var(--edge-highlight); }
.fader::-moz-range-thumb { width: 14px; height: 30px; border-radius: 2px; background: linear-gradient(180deg, var(--thumb-a), var(--thumb-b)); border: 1px solid rgba(var(--fg-rgb),.35); box-shadow: 0 6px 16px -4px var(--shadow-strong); }
.fader:focus-visible { outline: none; }
.fader:focus-visible::-webkit-slider-thumb { outline: 1px solid var(--fg); outline-offset: 3px; }
.lamp { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3a3c, #17181b 70%); box-shadow: inset 0 0 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05); transition: all .5s; flex-shrink: 0; }
.lamp.on { background: radial-gradient(circle at 40% 35%, #ffd39a, #ff9d2e 55%, #a24e0a); box-shadow: 0 0 12px 2px rgba(255,157,46,.55), inset 0 0 2px rgba(0,0,0,.6); }
.tag { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); border: 1px solid rgba(143,107,42,.4); background: rgba(var(--surface-rgb), .8); padding: .25rem .5rem; }
.tag--dim { color: var(--brass-dim); border: 0; background: none; padding: 0; margin-left: .75rem; }

/* Wordmark --------------------------------------------------------------- */
.wordmark { display: inline-flex; align-items: center; gap: .75rem; color: currentColor; user-select: none; }
.wordmark__name { display: block; height: 1em; width: auto; }  /* the logo's wordmark image: its height follows the font-size */
.wordmark__mark { display: block; width: 2.6em; height: 2.6em; flex: none; }
.wordmark--mark { gap: .55em; }
.wordmark__rail { display: inline-flex; align-items: center; }
.wordmark__rail--flip { flex-direction: row-reverse; }
.wordmark__rail::before { content: ""; display: block; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.wordmark__rail::after { content: ""; display: block; width: 2.4em; height: 1px; background: currentColor; }
@media (max-width: 767px) { .wordmark--md .wordmark__rail { display: none; } }

/* Nav -------------------------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color .5s, border-color .5s, backdrop-filter .5s; }
.nav.is-scrolled, .nav.is-open { background: rgba(var(--surface-rgb), .7); backdrop-filter: blur(12px); border-bottom-color: var(--hairline); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.nav__brand { font-size: 13px; }
@media (min-width: 768px) { .nav__brand { font-size: 14px; } }
.nav__menu { display: none; align-items: center; gap: 2.25rem; }
.nav__menu a { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2); transition: color .3s; }
.nav__menu a:hover, .nav__menu .current-menu-item a { color: var(--fg); }
.nav__cta { display: none; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .nav__menu, .nav__cta { display: flex; } .nav .nav__toggle { display: none; } }
.nav__toggle { display: flex; align-items: center; gap: .75rem; height: 44px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; }
.nav__toggle .bars { position: relative; width: 24px; height: 12px; }
.nav__toggle .bars i { position: absolute; left: 0; width: 24px; height: 1px; background: var(--fg); transition: transform .5s; }
.nav__toggle .bars i:first-child { top: 0; } .nav__toggle .bars i:last-child { bottom: 0; }
.nav.is-open .bars i:first-child { transform: translateY(6px) rotate(45deg); } .nav.is-open .bars i:last-child { transform: translateY(-6px) rotate(-45deg); }
.nav__mobile { position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; background: var(--fg); color: var(--surface-0); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateX(6%); transition: opacity .3s var(--ease-soft), transform .4s var(--ease-out-expo), visibility 0s .4s; }
.nav.is-open .nav__mobile { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--ease-soft), transform .45s var(--ease-out-expo); }
.nav.is-open { background: var(--fg) !important; color: var(--surface-0); border-bottom-color: rgba(243, 239, 230, .12) !important; backdrop-filter: none; }
.nav.is-open .nav__brand img, .nav.is-open .nav__cart-count { filter: invert(1) hue-rotate(180deg); }
.nav.is-open .nav__icon, .nav.is-open .nav__toggle { color: var(--surface-0); }
.nav.is-open .nav__toggle .bars i { background: var(--surface-0); }
.nav.is-open .nav__icon:hover { background: rgba(243, 239, 230, .1); }
body.menu-open { overflow: hidden; }
.nav__mobile-inner { padding: 1.5rem var(--gutter) 2rem; min-height: 100%; display: flex; flex-direction: column; gap: 2rem; }
.nav__mobile ul.display { counter-reset: mm; list-style: none; margin: 0; padding: 0; }
.nav__mobile ul.display li { counter-increment: mm; border-bottom: 1px solid rgba(243, 239, 230, .14); }
.nav__mobile ul.display a { display: flex; align-items: baseline; gap: 1.25rem; padding: 1.1rem 0; font-size: 2.75rem; color: var(--surface-0); text-decoration: none; transition: padding-left .3s var(--ease-soft), color .25s; }
.nav__mobile ul.display a::before { content: counter(mm, decimal-leading-zero); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--brass); font-stretch: normal; font-weight: 400; text-transform: none; }
.nav__mobile ul.display a::after { content: ""; margin-left: auto; width: 1.25rem; height: 1.25rem; align-self: center; background: currentColor; opacity: .5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav__mobile ul.display a:hover, .nav__mobile ul.display .current-menu-item a { color: var(--lamp); }
.nav__mobile ul.display .current-menu-item a::before { color: var(--lamp); }
.nav__mobile-foot { margin-top: auto; display: grid; gap: 1.25rem; }
.nav__mobile-soc { list-style: none; margin: 0; padding: 0; display: flex; gap: .6rem; }
.nav__mobile-soc a { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(243, 239, 230, .25); display: grid; place-items: center; color: var(--surface-0); }
.nav__mobile-soc svg { width: 18px; height: 18px; }
.nav__mobile-line { margin: 0; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(243, 239, 230, .45); }
.nav__mobile-cta { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; padding-bottom: 1.5rem; }
body.menu-open { overflow: hidden; }

/* Hero ------------------------------------------------------------------- */
.hero { position: relative; height: 260vh; }
.hero__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--surface-0); }
.hero__glow { position: absolute; top: -33%; left: 50%; transform: translateX(-50%); width: 120vw; height: 80vh; border-radius: 50%; opacity: .6; background: radial-gradient(closest-side, rgba(var(--glow-rgb), .35), transparent); pointer-events: none; }
.hero__vignette { position: absolute; inset: 0; pointer-events: none; }
.hero__stage { position: absolute; inset: 0; }
.hero__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1s; opacity: 0; }
.hero__stage.is-ready canvas { opacity: 1; }
.hero__fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1600px; transition: opacity 1s; }
.hero__stage.is-ready .hero__fallback { opacity: 0; pointer-events: none; }
.hero__unit { position: relative; width: min(88vw, calc(70svh * 1605 / 495)); transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(6deg); animation: unit-idle 14s ease-in-out infinite alternate; }
.hero__unit-shadow { position: absolute; left: 6%; right: 6%; bottom: -14%; height: 30%; border-radius: 50%; background: var(--shadow-strong); filter: blur(24px); transform: translateZ(-40px); }
.hero__unit-body { position: absolute; inset: 0; border-radius: 6px; background: var(--surface-4); transform: translateZ(-10px) scale(1.004); }
.hero__unit img { position: relative; border-radius: 4px; box-shadow: 0 40px 120px -30px var(--shadow-strong); }
@keyframes unit-idle { from { transform: rotateY(-16deg) rotateX(7deg) } to { transform: rotateY(-9deg) rotateX(4deg) } }
.hero__copy { position: absolute; inset: 0; pointer-events: none; }
.hero__copy-inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 2rem; }
@media (min-width: 768px) { .hero__copy-inner { padding-bottom: 3rem; } }
.hero__title { font-size: clamp(3.4rem, 10vw, 10.5rem); margin-top: 1.5rem; }
.hero__title span { display: block; }
.hero__bottom { display: grid; gap: 2rem; pointer-events: auto; }
@media (min-width: 768px) { .hero__bottom { grid-template-columns: 1fr auto; align-items: end; } .hero__lede { order: 2; text-align: right; justify-self: end; } .hero__cta { order: 1; } }
.hero__cta { display: flex; flex-direction: column; gap: 1rem; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__micro { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
.hero__micro .sep { margin: 0 .75rem; opacity: .5; }
.hero__callouts { position: absolute; inset: 0; pointer-events: none; opacity: 0; display: none; }
@media (min-width: 768px) { .hero__callouts { display: block; } }
.hero__callouts-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, calc(70svh * 1605 / 688)); aspect-ratio: 1605 / 688; }
.callout { position: absolute; }
.callout__dot { position: absolute; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(var(--signal-rgb), .7); background: rgba(var(--signal-rgb), .2); }
.callout__line { position: absolute; top: 0; height: 1px; width: 3.5rem; background: rgba(var(--signal-rgb), .4); }
.callout--left .callout__line { right: .5rem; } .callout--right .callout__line { left: .5rem; }
.callout__text { position: absolute; top: 0; transform: translateY(-50%); display: flex; flex-direction: column; white-space: nowrap; }
.callout--left .callout__text { right: 4.5rem; align-items: flex-end; text-align: right; } .callout--right .callout__text { left: 4.5rem; }
.callout__label { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg); }
.callout__note { font-size: .6875rem; color: var(--fg-3); }
.hero__scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
@media (min-width: 768px) { .hero__scroll { display: flex; } }
.hero__scroll-line { width: 1px; height: 2.5rem; background: rgba(var(--fg-rgb), .2); overflow: hidden; }
.hero__scroll-line i { display: block; width: 1px; height: 1rem; background: rgba(var(--fg-rgb), .7); animation: scroll-hint 2.4s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes scroll-hint { 0% { transform: translateY(-16px) } 60%,100% { transform: translateY(40px) } }
.hero__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 10rem; background: linear-gradient(to top, var(--surface-0), transparent); pointer-events: none; opacity: 0; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .75rem; pointer-events: none; }
@media (min-width: 1024px) { .buybar { display: none; } }
.buybar__inner { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; box-shadow: 0 20px 60px -20px var(--shadow-strong); opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
.buybar.is-visible .buybar__inner { opacity: 1; transform: none; }
.buybar.is-hidden .buybar__inner { transform: translateY(140%); }
.buybar__price { font-family: var(--font-mono); font-size: .875rem; }

/* Reveal ----------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo); }
.reveal.is-in { opacity: 1; transform: none; }
.hero .reveal { transform: translateY(28px); transition-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } .hero { height: 100svh; } .hero__unit { animation: none; } .hero__scroll-line i { animation: none; } }

/* Intro spotlight -------------------------------------------------------- */
.intro__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; font-size: .875rem; color: var(--fg-3); margin-top: 1.5rem; }
.intro__list li { display: flex; align-items: center; gap: .75rem; }
.intro__list li::before { content: ""; width: .75rem; height: 1px; background: rgba(var(--fg-rgb), .3); }
.spot { display: grid; gap: 2.5rem; margin-top: 4rem; }
@media (min-width: 1024px) { .spot { grid-template-columns: 1.35fr 1fr; gap: 4rem; margin-top: 7rem; } .spot__stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; align-items: center; } }
.spot__frame { width: 100%; }
.spot__img { position: absolute; inset: 0; transition: transform 1.4s cubic-bezier(.16,1,.3,1); transform-origin: 20% 52%; transform: scale(1.55); }
.spot__mask { position: absolute; inset: 0; pointer-events: none; transition: background 1.4s; }
.spot__legend { position: absolute; left: 1rem; bottom: .75rem; display: flex; gap: .75rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; }
.spot__legend b { color: var(--fg); font-weight: 400; } .spot__legend span { color: rgba(var(--fg-rgb), .5); }
.spot__step { padding: 2.5rem 0; border-top: 1px solid var(--hairline); transition: opacity .7s; }
@media (min-width: 1024px) { .spot__step { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; } .spot__step.is-active { opacity: 1; } }
.spot__step p { margin-top: 1rem; color: var(--fg-2); line-height: 1.6; max-width: 28rem; }
.intro__pull { font-size: clamp(2.25rem, 6vw, 6rem); color: var(--fg-2); max-width: 64rem; margin-top: 5rem; }
.intro__pull b { color: var(--fg); font-weight: inherit; }
@media (min-width: 768px) { .intro__pull { margin-top: 8rem; } }

/* Color switch section --------------------------------------------------- */
.color__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.5s; background: radial-gradient(60% 50% at 62% 55%, rgba(255,157,46,.16), transparent 70%); }
.color.is-on .color__glow { opacity: 1; }
.color__grid { display: grid; gap: 3rem; margin-top: 4rem; align-items: center; }
@media (min-width: 1024px) { .color__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); margin-top: 6rem; } }
.hwswitch { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; outline-offset: 8px; }
.hwswitch__label { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--fg-rgb), .45); transition: color .3s; }
.hwswitch__label.is-lit { color: var(--fg); }
.hwswitch__img { position: relative; width: 64px; height: 80px; }
.hwswitch__img img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .15s; }
.hwswitch__img .up { opacity: 0; } .hwswitch[aria-checked="true"] .up { opacity: 1; } .hwswitch[aria-checked="true"] .down { opacity: 0; }
.color__state { display: flex; flex-direction: column; gap: .25rem; }
.color__state-val { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); transition: color .5s; }
.color.is-on .color__state-val { color: var(--lamp); }
.color__effects { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-top: 2.5rem; }
.color__effects li { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--hairline); }
.color__effects li:last-child { border-bottom: 0; }
.color__effects .k { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); transition: color .5s; }
.color__effects .t { margin-left: auto; font-size: .75rem; color: var(--fg-3); opacity: .4; transition: opacity .7s; }
.color.is-on .color__effects .k { color: var(--fg); } .color.is-on .color__effects .t { opacity: 1; color: var(--fg-2); }
.color__unit img.on { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.color.is-on .color__unit img.on { opacity: 1; }
.color__unit-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s; box-shadow: inset 0 0 120px rgba(255,157,46,.10); }
.color.is-on .color__unit-glow { opacity: 1; }
.harm { margin-top: 2rem; }
.harm__head { display: flex; justify-content: space-between; margin-bottom: .75rem; }
.harm__state { color: var(--fg-3); transition: color .5s; } .color.is-on .harm__state { color: var(--lamp); }
.harm rect { transition: height 1.1s cubic-bezier(.16,1,.3,1), y 1.1s cubic-bezier(.16,1,.3,1); }
.width { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.width__track { position: relative; flex: 1; height: 1.5rem; }
.width__mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(var(--fg-rgb), .15); }
.width__l, .width__r { position: absolute; top: .25rem; bottom: .25rem; width: 1px; background: var(--signal); transition: left 1.2s cubic-bezier(.16,1,.3,1); }
.width__l { left: 44%; } .width__r { left: 56%; }
.width__bar { position: absolute; top: 50%; left: 44%; right: 44%; height: 1px; background: rgba(var(--signal-rgb), .3); transition: left 1.2s cubic-bezier(.16,1,.3,1), right 1.2s cubic-bezier(.16,1,.3,1); }
.color.is-on .width__l { left: 12%; } .color.is-on .width__r { left: 88%; } .color.is-on .width__bar { left: 12%; right: 12%; }
.width__val { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; width: 3.5rem; text-align: right; color: var(--fg-3); transition: color .5s; }
.color.is-on .width__val { color: var(--signal); }

/* A/B player ------------------------------------------------------------- */
.ab { overflow: hidden; }
.ab__grid { display: grid; }
@media (min-width: 1024px) { .ab__grid { grid-template-columns: 15rem 1fr; } }
.ab__tracks { border-bottom: 1px solid var(--hairline); padding: 1rem; }
@media (min-width: 1024px) { .ab__tracks { border-bottom: 0; border-right: 1px solid var(--hairline); padding: 1.5rem; } }
.ab__tracks .eyebrow { margin-bottom: 1rem; display: none; }
@media (min-width: 1024px) { .ab__tracks .eyebrow { display: flex; } }
.ab__list { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
.ab__list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .ab__list { flex-direction: column; margin: 0; padding: 0; } }
.ab__track { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .625rem .75rem; border-radius: 2px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); transition: color .3s, background .3s; white-space: nowrap; }
.ab__track:hover { color: var(--fg-2); }
.ab__track[aria-selected="true"] { color: var(--fg); background: rgba(var(--fg-rgb), .05); }
.ab__track i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--fg-rgb), .2); transition: all .5s; }
.ab__track[aria-selected="true"] i { background: var(--lamp); box-shadow: 0 0 10px 2px rgba(255,157,46,.5); }
.ab__panel { padding: 1.25rem; display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) { .ab__panel { padding: 2rem; } } @media (min-width: 1024px) { .ab__panel { padding: 2.5rem; } }
.ab__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; }
.ab__name { font-size: 2rem; } @media (min-width: 768px) { .ab__name { font-size: 2.75rem; } }
.ab__note { margin-top: .5rem; font-size: .875rem; color: var(--fg-3); }
.ab__time { font-family: var(--font-mono); font-size: .75rem; color: var(--fg-3); padding-top: .5rem; white-space: nowrap; }
.ab__transport { display: flex; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .ab__transport { gap: 2.5rem; } }
.ab__play { position: relative; flex-shrink: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid rgba(var(--fg-rgb), .25); display: flex; align-items: center; justify-content: center; transition: all .5s; }
@media (min-width: 768px) { .ab__play { width: 6rem; height: 6rem; } }
.ab__play:hover { border-color: rgba(var(--fg-rgb), .6); background: rgba(var(--fg-rgb), .04); }
.ab__play[aria-pressed="true"] { border-color: rgba(var(--fg-rgb), .6); background: rgba(var(--fg-rgb), .06); }
.ab__play::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(var(--fg-rgb), .1); opacity: 0; transition: opacity .7s; }
.ab__play[aria-pressed="true"]::after { opacity: 1; }
.ab__play .pause { display: none; } .ab__play[aria-pressed="true"] .play { display: none; } .ab__play[aria-pressed="true"] .pause { display: block; }
.ab__play .spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(var(--fg-rgb), .3); border-top-color: var(--fg); animation: spin 1s linear infinite; }
.ab__play.is-loading .spin { display: block; } .ab__play.is-loading .play, .ab__play.is-loading .pause { display: none; }
@keyframes spin { to { transform: rotate(360deg) } }
.ab__progress { flex: 1; }
.ab__blend { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .ab__blend { gap: 1.5rem; } }
.ab__blend button { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); transition: color .3s; }
.ab__blend button.is-active { color: var(--fg); } .ab__blend button.is-active.after { color: var(--lamp); }
.ab__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.ab__vol { display: flex; align-items: center; gap: .75rem; width: 10rem; }
.ab__error { font-family: var(--font-mono); font-size: .75rem; color: var(--brass); border: 1px solid rgba(143,107,42,.3); padding: .5rem .75rem; display: none; }
.ab__error.is-visible { display: block; }
.ab__viz { border-top: 1px solid var(--hairline); padding: 1rem 1.25rem .75rem; }
@media (min-width: 768px) { .ab__viz { padding: 1rem 2rem .75rem; } } @media (min-width: 1024px) { .ab__viz { padding: 1rem 2.5rem .75rem; } }
.ab__viz canvas { width: 100%; height: 4rem; } @media (min-width: 768px) { .ab__viz canvas { height: 5rem; } }
.ab__viz p { margin-top: .5rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--fg-rgb), .45); }

/* Before / after --------------------------------------------------------- */
.ba { user-select: none; margin-top: 4rem; }
@media (min-width: 768px) { .ba { margin-top: 6rem; } }
.ba__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1rem; }
.ba__box { position: relative; aspect-ratio: 1200 / 320; overflow: hidden; border-radius: 4px; border: 1px solid var(--hairline); background: var(--surface-1); color: var(--fg); }
.ba__box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba__raw { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ba__raw .bg { position: absolute; inset: 0; background: var(--surface-1); }
.ba__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(var(--fg-rgb), .7); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(var(--fg-rgb), .6); background: rgba(var(--surface-rgb), .85); display: flex; align-items: center; justify-content: center; gap: 4px; }
.ba__handle i { display: block; width: .5rem; height: 1px; background: var(--fg); }
.ba__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* Feature chapter -------------------------------------------------------- */
.chapter { overflow: hidden; }
.chapter--light { background: var(--air); }
.chapter--light .chapter__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 0%, rgba(var(--glow-rgb), .5), transparent 70%); }
.chapter__labels { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 1.5rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--fg-rgb), .45); }
@media (min-width: 768px) { .chapter__labels { display: flex; left: 2rem; } }
.chapter__labels li { display: flex; align-items: center; gap: .75rem; } .chapter__labels li::before { content: ""; width: 1rem; height: 1px; background: rgba(var(--fg-rgb), .2); }
.chapter__grid { position: relative; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .chapter__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } .chapter--flip .chapter__copy { order: 2; } }
.chapter__frame { box-shadow: 0 60px 140px -40px var(--shadow-strong); }
.chapter__frame img { transition: transform .1s linear; will-change: transform; transform: scale(1.18); }
.chapter__note { margin-top: 2.5rem; font-size: .75rem; color: var(--fg-3); max-width: 20rem; }
.chapter__frame--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter__badge { position: absolute; left: 1rem; bottom: .875rem; color: rgba(236,231,220,.75); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.chapter__badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp); margin-right: .6rem; box-shadow: 0 0 8px rgba(255,157,46,.7); vertical-align: middle; }

/* Harmonics slider ------------------------------------------------------- */
.hsl__glow { position: absolute; inset: 0; pointer-events: none; transition: opacity .7s; background: radial-gradient(50% 40% at 50% 60%, rgba(255,157,46,.14), transparent 70%); }
.hsl__box { margin-top: 3.5rem; overflow: hidden; } @media (min-width: 768px) { .hsl__box { margin-top: 5rem; } }
.hsl__inner { position: relative; padding: 1.25rem; } @media (min-width: 768px) { .hsl__inner { padding: 2rem; } }
.hsl__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 1rem; }
.hsl__state { transition: color .3s; }
.hsl svg { width: 100%; height: auto; color: var(--fg); }
.hsl__ctl { margin-top: 2rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
.hsl__val { font-family: var(--font-mono); font-size: 1.5rem; width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.hsl__meters { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
.meter { display: flex; flex-direction: column; gap: .5rem; }
.meter__bar { position: relative; height: 1px; background: rgba(var(--fg-rgb), .15); overflow: hidden; }
.meter__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lamp); transition: width .5s cubic-bezier(.16,1,.3,1); }
.meter--cool .meter__bar i { background: var(--signal); }
.hsl__foot { margin-top: 1rem; font-size: .75rem; color: var(--fg-3); }

/* Feature grid ----------------------------------------------------------- */
.fgrid { display: grid; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); margin-top: 3.5rem; }
@media (min-width: 768px) { .fgrid { grid-template-columns: repeat(2, 1fr); margin-top: 5rem; } } @media (min-width: 1024px) { .fgrid { grid-template-columns: repeat(3, 1fr); } }
.fgrid li { border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.fgrid__cell { height: 100%; min-height: 18rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 768px) { .fgrid__cell { padding: 2.25rem; } }
.fgrid__top { display: flex; justify-content: space-between; align-items: center; color: var(--fg-2); }
.fgrid__body { margin-top: auto; }
.fgrid h3 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; } @media (min-width: 768px) { .fgrid h3 { font-size: 1.75rem; } }
.fgrid p { margin-top: .75rem; font-size: .875rem; color: var(--fg-3); line-height: 1.6; max-width: 20rem; }
.motif .dash { stroke-dasharray: 120; stroke-dashoffset: 120; animation: dash 2.4s cubic-bezier(.16,1,.3,1) infinite alternate; }
.motif .drift { animation: drift-y 2.5s ease-in-out infinite alternate; }
@keyframes dash { to { stroke-dashoffset: 0 } } @keyframes drift-y { from { transform: translateY(0) } to { transform: translateY(-6px) } }
@media (prefers-reduced-motion: reduce) { .motif * { animation: none !important; } }

/* Studios ---------------------------------------------------------------- */
.studios__grid { display: grid; gap: 2rem; margin-top: 3.5rem; }
@media (min-width: 768px) { .studios__grid { grid-template-columns: repeat(2, 1fr); margin-top: 5rem; } } @media (min-width: 1024px) { .studios__grid { grid-template-columns: repeat(3, 1fr); } }
.studio__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; border: 1px solid var(--hairline); background: var(--surface-1); }
.studio__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.studio:hover .studio__img img { transform: scale(1.04); }
.studio__img .tag { position: absolute; left: .75rem; top: .75rem; }
.studio__meta { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.studio__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.studio h3 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .04em; }
.studio__eng { font-size: .875rem; color: var(--fg-2); }
.studio__quote { font-size: .875rem; color: var(--fg-3); line-height: 1.6; }

/* Video ------------------------------------------------------------------ */
.svideo { position: relative; height: 80svh; min-height: 32rem; overflow: hidden; background: var(--surface-1); }
.svideo img, .svideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svideo img { transition: opacity 1s; } .svideo.is-playing img { opacity: 0; }
.svideo__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--surface-0), rgba(var(--surface-rgb), .2) 50%, rgba(var(--surface-rgb), .4)); }
.svideo__bar { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 3rem; display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) { .svideo__bar { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-bottom: 4rem; } }
.svideo__bar h2 { font-size: clamp(3rem, 9vw, 9rem); }
.svideo__ctl { display: flex; align-items: center; gap: .75rem; }
.svideo .tag { position: absolute; left: 1rem; top: 1rem; } @media (min-width: 768px) { .svideo .tag { left: 2rem; top: 2rem; } }

/* Origin ----------------------------------------------------------------- */
.origin__facts { margin-top: .5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.origin__facts div { display: flex; flex-direction: column; gap: .5rem; }
.origin__facts .v { font-family: var(--font-mono); font-size: .875rem; color: var(--fg); }
.proof__list { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; }
.proof__list li { font-size: 1.25rem; color: var(--fg-2); }

/* Viewer ----------------------------------------------------------------- */
.viewer { display: flex; flex-direction: column; gap: 1rem; margin-top: 3rem; } @media (min-width: 768px) { .viewer { margin-top: 4rem; } }
.viewer__frame { cursor: default; touch-action: none; }
.viewer__frame.is-zoomed { cursor: grab; } .viewer__frame.is-dragging { cursor: grabbing; }
.viewer__layer { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.viewer__frame.is-dragging .viewer__layer { transition: none; }
.viewer__layer img { user-select: none; -webkit-user-drag: none; }
.hotspot { position: absolute; transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hotspot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--fg-rgb), .4); transform: scale(.75); transition: all .5s; }
.hotspot:hover::before { transform: scale(1); border-color: var(--fg); }
.hotspot i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); transition: background .3s; }
.hotspot[aria-expanded="true"]::before { border-color: var(--signal); transform: scale(1); background: rgba(var(--signal-rgb), .1); }
.hotspot[aria-expanded="true"] i { background: var(--signal); }
.hotspot[aria-expanded="true"]::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(var(--signal-rgb), .3); animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0 } }
.readout { min-height: 5.5rem; padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 1.5rem; }
.readout__k { flex-shrink: 0; width: 6rem; }
.readout__label { margin-top: .25rem; font-family: var(--font-mono); font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); transition: color .3s; }
.readout.is-active .readout__label { color: var(--signal); }
.readout__text { font-size: .875rem; color: var(--fg-2); line-height: 1.6; max-width: 42rem; }
.viewer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.viewer__zoom { display: flex; align-items: center; gap: .5rem; }
.viewer__zoom span { font-family: var(--font-mono); font-size: .75rem; color: var(--fg-3); width: 3rem; text-align: center; }
.viewer__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; padding: .5rem .75rem; border: 1px solid var(--hairline); border-radius: 2px; color: var(--fg-3); transition: all .3s; }
.chip:hover { color: var(--fg); } .chip.is-active { border-color: var(--signal); color: var(--signal); }

/* Specs ------------------------------------------------------------------ */
.specs { border-top: 1px solid var(--hairline); }
.specs__row { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 768px) { .specs__row { grid-template-columns: 12rem 1fr; } }
@media (max-width: 599px) { .specs__row { grid-template-columns: 1fr; gap: .3rem; padding: .85rem 0; } .specs__row dt { padding-top: 0; } }
.specs__row dt { padding-top: .25rem; }
.specs__row dd { font-family: var(--font-mono); font-size: .875rem; color: var(--fg); }
.specs__row dd.is-pending { color: var(--fg-3); }

/* Purchase --------------------------------------------------------------- */
.buy__card { padding: 2rem; display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 768px) { .buy__card { padding: 2.5rem; } }
.buy__price { font-size: 4.5rem; line-height: 1; margin-top: 1rem; } @media (min-width: 768px) { .buy__price { font-size: 5.5rem; } }
.buy__ctas { display: flex; flex-direction: column; gap: .75rem; }
.buy__facts { display: flex; flex-direction: column; gap: .5rem; font-size: .75rem; color: var(--fg-3); border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.buy__facts li { display: flex; justify-content: space-between; } .buy__facts span { color: var(--fg-2); }

/* Newsletter ------------------------------------------------------------- */
.signal { width: 100%; max-width: 36rem; } .signal--compact { max-width: 24rem; }
.signal__row { display: flex; align-items: flex-end; gap: 1rem; } .signal__row label { flex: 1; }
.signal__msg { margin-top: .75rem; font-size: .75rem; color: var(--fg-3); min-height: 1rem; }
.signal__msg:empty { display: none; }
.signal__msg.sn { font-size: .875rem; color: var(--fg); }

/* Footer ----------------------------------------------------------------- */
.footer { border-top: 1px solid var(--hairline); background: var(--surface-0); }
.footer__main { padding: 4rem var(--gutter); display: grid; gap: 3.5rem; } @media (min-width: 768px) { .footer__main { padding: 6rem var(--gutter); } } @media (min-width: 1024px) { .footer__main { grid-template-columns: 1.2fr 2fr; } }
.footer__brand { display: flex; flex-direction: column; gap: 2rem; } .footer__brand .wordmark { font-size: 15px; } .footer__brand .wordmark__name { height: 15px; }
.footer__brand p { max-width: 20rem; font-size: .875rem; line-height: 1.6; color: var(--fg-3); }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } @media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .footer__cols { grid-template-columns: repeat(5, 1fr); } }
.footer__cols .eyebrow { margin-bottom: 1.25rem; } .footer__cols ul { display: flex; flex-direction: column; gap: .75rem; } .footer__cols a { font-size: .875rem; color: var(--fg-2); transition: color .3s; } .footer__cols a:hover { color: var(--fg); }
.footer__bottom { border-top: 1px solid var(--hairline); padding: 1.5rem var(--gutter); display: flex; flex-direction: column; gap: .75rem; justify-content: space-between; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
@media (min-width: 640px) { .footer__bottom { flex-direction: row; } }

/* Inner pages ------------------------------------------------------------ */
.page-head { padding-top: calc(var(--nav-h) + 4rem); padding-bottom: 3rem; } @media (min-width: 768px) { .page-head { padding-top: calc(var(--nav-h) + 7rem); padding-bottom: 5rem; } }
.page-body { padding-bottom: var(--section-y); }
.prose { max-width: 65ch; color: var(--fg-2); line-height: 1.7; } .prose p + p, .prose h2 + p { margin-top: 1rem; } .prose h2 { margin-top: 2.5rem; font-size: 1.5rem; text-transform: uppercase; } .prose a { text-decoration: underline; text-underline-offset: 4px; } .prose ul { list-style: disc; padding-left: 1.25rem; }
.support__nav ul { display: flex; gap: 1rem; } @media (min-width: 1024px) { .support__nav ul { flex-direction: column; gap: .75rem; position: sticky; top: calc(var(--nav-h) + 2rem); } }
.support__block { padding: 2.5rem 0; border-top: 1px solid var(--hairline); scroll-margin-top: 6rem; } .support__block h2 { font-size: 1.5rem; text-transform: uppercase; } .support__block p { margin-top: 1rem; color: var(--fg-2); line-height: 1.6; max-width: 65ch; }
.values { display: grid; border-top: 1px solid var(--hairline); } @media (min-width: 640px) { .values { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
.values div { padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); } .values dt { font-size: 1.25rem; text-transform: uppercase; } .values dd { margin-top: .5rem; font-size: .875rem; color: var(--fg-3); }
.products-list { display: grid; gap: 2.5rem; border-top: 1px solid var(--hairline); padding-top: 2.5rem; }
.product-card { display: grid; gap: 2rem; align-items: center; } @media (min-width: 1024px) { .product-card { grid-template-columns: 2fr 1fr; } }
.product-card__info { display: flex; flex-direction: column; gap: 1rem; } .product-card__info h2 { font-size: 3rem; } @media (min-width: 768px) { .product-card__info h2 { font-size: 4rem; } }
.product-card .frame img { transition: transform 1.6s cubic-bezier(.16,1,.3,1); } .product-card:hover .frame img { transform: scale(1.02); }

/* WooCommerce (cart/checkout/account) kept on-brand ---------------------- */
.woocommerce-page .container-x { max-width: 1200px; margin: 0 auto; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce button.button.alt, .woocommerce a.button.alt, .wc-block-components-button { display: inline-flex !important; align-items: center; justify-content: center; height: 3.25rem; padding: 0 1.625rem !important; font-family: var(--font-mono) !important; font-size: .75rem !important; letter-spacing: .18em; text-transform: uppercase; border-radius: 2px !important; background: var(--fg) !important; color: var(--surface-0) !important; border: 0 !important; font-weight: 400 !important; line-height: 1 !important; }
.woocommerce .button:hover, .wc-block-components-button:hover { box-shadow: 0 0 0 1px rgba(var(--fg-rgb),.25), 0 12px 40px -12px rgba(var(--fg-rgb),.45); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-cart table.cart td.actions .coupon .input-text, .wc-block-components-text-input input, .wc-block-components-text-input input:focus { background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; box-shadow: none; padding: .75rem .25rem; font-family: var(--font-mono); font-size: .8125rem; }
.woocommerce table.shop_table { border: 0; border-top: 1px solid var(--hairline); border-radius: 0; font-family: var(--font-mono); font-size: .8125rem; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 0; border-bottom: 1px solid var(--hairline); padding: 1rem .5rem; }
.woocommerce-checkout h3, .woocommerce-cart h1, .woocommerce-checkout h1, .woocommerce-account h1, .woocommerce-order-received h1, .wc-block-components-checkout-step__title, .wc-block-components-title { font-family: var(--font-display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.woocommerce .woocommerce-breadcrumb { display: none; }
.wc-block-cart, .wc-block-checkout { color: var(--fg); }
.wc-block-components-sidebar-layout .wc-block-components-main, .wc-block-components-sidebar-layout .wc-block-components-sidebar { color: var(--fg); }
.woocommerce-store-notice, p.demo_store { background: var(--fg); color: var(--surface-0); font-family: var(--font-mono); font-size: .75rem; }

/* ==========================================================================
   Front page — tonal composition (experiment)
   ========================================================================== */
/* A scoped dark tone: every token flips inside the element, so buttons, hairlines and canvases adapt. */
.tone-dark {
  color-scheme: dark;
  --surface-0: #0b0b0c; --surface-1: #101113; --surface-2: #151618; --surface-3: #1a1b1e; --surface-4: #222428; --surface-5: #2d3036; --surface-6: #3c4048;
  --fg: #ece7dc; --fg-2: #cfc9bc; --fg-3: #a9a498;
  --silver: #8f949c; --signal: #8fdbe8; --signal-dim: #4f8f9b; --brass: #c9a35b; --brass-dim: #8f7440; --lamp: #ff9d2e; --air: #101113;
  --fg-rgb: 236, 231, 220; --surface-rgb: 11, 11, 12; --mask-rgb: 10, 10, 11; --glow-rgb: 236, 231, 220; --vignette-rgb: 10, 10, 11;
  --particle: #d8d3c8; --air-rgb: 215, 228, 236; --brass-rgb: 201, 163, 91; --lamp-rgb: 255, 157, 46; --signal-rgb: 143, 219, 232;
  --shadow-strong: rgba(0, 0, 0, 0.9); --edge-highlight: rgba(255, 255, 255, 0.08); --plate-top: rgba(255, 255, 255, 0.03);
  --thumb-a: #34373d; --thumb-b: #1c1e22; --hairline: rgba(236, 231, 220, 0.10); --hairline-strong: rgba(236, 231, 220, 0.18);
  background: var(--surface-0); color: var(--fg);
}
/* cursor-lit amber glow on dark sections (JS sets --mx/--my) */
[data-glow] { --mx: 50%; --my: 40%; }
[data-glow]::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .9;
  background: radial-gradient(38rem 26rem at var(--mx) var(--my), rgba(255,157,46,.14), rgba(201,163,91,.05) 45%, transparent 70%); transition: opacity 1s; }
/* content in glow sections is positioned (.rel / grids) so it paints above the ::before glow; absolute fields stay below */
@media (hover: none) { [data-glow]::before { opacity: .5; } }

/* Hero — cinema */
.hero--cinema .hero__sticky { background: #0b0b0c; }
.hero__backdrop { position: absolute; inset: -4%; background-size: cover; background-position: center 40%; opacity: .9; transform: scale(1.04); animation: backdrop-drift 30s ease-in-out infinite alternate; }
@keyframes backdrop-drift { from { transform: scale(1.04) translate3d(0,0,0) } to { transform: scale(1.09) translate3d(-1.2%, .6%, 0) } }
.hero__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.55), rgba(11,11,12,.25) 40%, rgba(11,11,12,.85) 100%); }
.hero__amber { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 70% 62%, rgba(255,157,46,.22), transparent 70%), radial-gradient(40% 40% at 20% 30%, rgba(143,219,232,.06), transparent 70%); mix-blend-mode: screen; }
.hero__grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(236,231,220,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(236,231,220,.12) 1px, transparent 1px); background-size: 100% 25%, 12.5% 100%; mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); }
.hero--cinema .hero__stage { z-index: 1; transform: translateY(-5%); }
.hero--cinema .hero__copy { z-index: 2; }
.hero__rail { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; display: none; flex-direction: column; gap: 1.1rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(236,231,220,.55); pointer-events: none; }
@media (min-width: 1280px) { .hero__rail { display: flex; } }
.hero__rail li { display: flex; align-items: center; gap: .75rem; } .hero__rail li span { color: var(--brass); } .hero__rail li::after { content: ""; width: 2.5rem; height: 1px; background: rgba(236,231,220,.18); }
.hero__rail li:first-child::after { background: var(--lamp); box-shadow: 0 0 8px rgba(255,157,46,.6); }
.hero__top { display: flex; }
.hero__bottom--cinema { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1024px) { .hero__bottom--cinema { grid-template-columns: 1.4fr 1fr; } }
.hero__title--cinema { font-size: clamp(3.2rem, 9.5vw, 10rem); margin: 0; text-shadow: 0 20px 60px rgba(0,0,0,.6); }
.hero__side { display: flex; flex-direction: column; gap: 1.25rem; max-width: 28rem; }
@media (min-width: 1024px) { .hero__side { justify-self: end; align-items: flex-end; text-align: right; } .hero__side .hero__cta-row { justify-content: flex-end; } }
.hero--cinema .hero__scrim--paper { background: linear-gradient(to top, #f3efe6, transparent); height: 14rem; }
.hero--cinema .hero__scroll { color: rgba(236,231,220,.7); }
.hero--cinema .callout__label { color: #ece7dc; } .hero--cinema .callout__note { color: rgba(236,231,220,.6); }

/* Ticker */
.ticker { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-1); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; gap: 2.5rem; padding: 1.1rem 0 1.1rem 2.5rem; font-family: var(--font-display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: .02em; color: var(--fg-2); white-space: nowrap; }
.ticker__item i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .hero__backdrop { animation: none; } }

/* Statement intro */
.intro--statement .statement { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
.statement__eyebrow { justify-content: center; }
.statement__title { font-size: clamp(2.75rem, 8vw, 9rem); max-width: 14ch; margin: 0; }
.statement__cols { display: grid; gap: 2rem; max-width: 60rem; text-align: left; margin-top: 1rem; }
@media (min-width: 768px) { .statement__cols { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.intro--statement .intro__list { margin-top: .25rem; }

/* Wipe reveal for headings */
.reveal--wipe { transform: none; transition: opacity .3s; }
.reveal--wipe .wipe { display: block; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-out-expo); }
.reveal--wipe.is-in .wipe { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .reveal--wipe .wipe { clip-path: none !important; } }

/* COLOR section flips tone when engaged */
.color--flip { transition: background-color 1s var(--ease-soft), color 1s var(--ease-soft); }
.color--flip *, .color--flip .plate { transition-property: color, background-color, border-color, box-shadow, opacity, width, left, right, transform, height, y; transition-duration: .8s; }
.color--flip.is-on { color-scheme: dark;
  --surface-0: #0b0b0c; --surface-1: #101113; --surface-2: #151618; --fg: #ece7dc; --fg-2: #cfc9bc; --fg-3: #a9a498; --brass: #c9a35b; --lamp: #ff9d2e; --signal: #8fdbe8;
  --fg-rgb: 236, 231, 220; --surface-rgb: 11, 11, 12; --hairline: rgba(236,231,220,.10); --hairline-strong: rgba(236,231,220,.18); --shadow-strong: rgba(0,0,0,.9); --edge-highlight: rgba(255,255,255,.08); --particle: #d8d3c8; --lamp-rgb: 255, 157, 46; --signal-rgb: 143, 219, 232;
  background: var(--surface-0); color: var(--fg); }
.color--flip .color__glow { background: radial-gradient(60% 50% at 62% 55%, rgba(255,157,46,.22), transparent 70%); }
.color--flip.is-on .hwswitch__label.is-lit, .color--flip.is-on .harm__head, .color--flip.is-on .color__effects .k { color: var(--fg); }
.color--flip .color__state-val { font-size: 2rem; }

/* Chapter tones */
.chapter--dark .chapter__labels { color: rgba(236,231,220,.5); }
.chapter__rays { position: absolute; inset: -20% -10%; pointer-events: none; opacity: .5; background: conic-gradient(from 200deg at 70% -10%, transparent 0deg, rgba(255,255,255,.55) 6deg, transparent 12deg, transparent 40deg, rgba(255,255,255,.35) 46deg, transparent 52deg, transparent 80deg, rgba(255,255,255,.25) 84deg, transparent 90deg); filter: blur(18px); animation: rays 18s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes rays { from { transform: rotate(-2deg) } to { transform: rotate(2deg) } }
@media (prefers-reduced-motion: reduce) { .chapter__rays { animation: none; } }

/* Feature strip (horizontal scroll-snap) */
.strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 3rem var(--gutter) 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip__card { position: relative; flex: 0 0 min(78vw, 24rem); scroll-snap-align: start; min-height: 26rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid var(--hairline); border-radius: 4px; background: linear-gradient(180deg, var(--plate-top), transparent 40%), var(--surface-1); transition: transform .6s var(--ease-out-expo), box-shadow .6s, border-color .6s; transform-style: preserve-3d; }
.strip__card:hover { border-color: rgba(var(--fg-rgb), .3); box-shadow: 0 40px 80px -40px var(--shadow-strong); }
.strip__num { font-size: 4.5rem; line-height: 1; color: rgba(var(--fg-rgb), .12); }
.strip__motif { color: var(--fg-2); }
.strip__body { margin-top: auto; } .strip__body h3 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; } .strip__body p { margin-top: .75rem; font-size: .875rem; color: var(--fg-3); line-height: 1.6; }
.strip__id { position: absolute; right: 1.5rem; top: 1.75rem; }
.strip__end { flex: 0 0 var(--gutter); }
.strip-section .lede { max-width: 22rem; }

/* Purchase — dark band */
.buy--dark .buy__card { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%), #151618; border-color: rgba(236,231,220,.14); }
.buy--dark .buy__price { color: var(--fg); text-shadow: 0 0 40px rgba(255,157,46,.15); }

/* Magnetic buttons + tilt cards */
[data-magnetic] { transition: transform .5s var(--ease-out-expo), background-color .35s, color .35s, border-color .35s, box-shadow .5s; will-change: transform; }
[data-tilt] { transition: transform .5s var(--ease-out-expo); }

/* ==========================================================================
   Front page — "Midnight" (third variant)
   ========================================================================== */
[data-theme="midnight"] {
  color-scheme: dark;
  --surface-0: #0b0e13; --surface-1: #10141b; --surface-2: #151a22; --surface-3: #1b212b; --surface-4: #232b37; --surface-5: #2f3947; --surface-6: #3e4a5a;
  --fg: #ece5d6; --fg-2: #cbc3b2; --fg-3: #948d7f;
  --silver: #8f949c; --steel: #6b7d92; --signal: #9fe0ee; --signal-dim: #5b98a6; --brass: #d1a85f; --brass-dim: #8f7440; --lamp: #ff9d2e; --air: #131924;
  --fg-rgb: 236, 229, 214; --surface-rgb: 11, 14, 19; --mask-rgb: 8, 10, 14; --glow-rgb: 236, 229, 214; --vignette-rgb: 5, 7, 10;
  --particle: #cfc7b5; --air-rgb: 200, 220, 232; --brass-rgb: 209, 168, 95; --lamp-rgb: 255, 157, 46; --signal-rgb: 159, 224, 238;
  --shadow-strong: rgba(0, 0, 0, 0.85); --edge-highlight: rgba(255, 255, 255, 0.08); --plate-top: rgba(255, 255, 255, 0.035);
  --thumb-a: #3a4350; --thumb-b: #1c222b; --hairline: rgba(236, 229, 214, 0.12); --hairline-strong: rgba(236, 229, 214, 0.22);
}
body.fp-midnight { background: radial-gradient(90% 40% at 70% -10%, rgba(209,168,95,.10), transparent 60%), radial-gradient(60% 40% at 0% 100%, rgba(159,224,238,.05), transparent 60%), var(--surface-0); }
body.fp-midnight .nav.is-scrolled { background: rgba(11,14,19,.75); }
.fp-body { position: relative; }

/* Split hero */
.split { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-top: var(--nav-h); }
@media (min-width: 1024px) { .split { grid-template-rows: none; grid-template-columns: minmax(0, 46%) minmax(0, 54%); } }
.split__copy { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding-top: 3rem; padding-bottom: 3rem; z-index: 1; }
@media (min-width: 1024px) { .split__copy { padding-top: 4rem; padding-bottom: 4rem; padding-right: 2rem; } }
.split__title { font-size: clamp(3.6rem, 9.5vw, 10.5rem); margin: .5rem 0 0; }
.split__line { display: block; }
.split__line--outline { color: transparent; -webkit-text-stroke: 1.5px var(--fg); font-family: var(--font-display); font-stretch: 78%; letter-spacing: .01em; }
.split__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.split__signal { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 1rem; opacity: .6; }
.split__signal i { flex: 1; background: var(--brass); height: 20%; transform-origin: bottom; animation: sig 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.13s); border-radius: 1px; }
.split__signal i:nth-child(3n) { background: var(--signal); }
@keyframes sig { 0%, 100% { height: 15% } 30% { height: 70% } 60% { height: 35% } 80% { height: 90% } }
.split__media { position: relative; min-height: 56vw; overflow: hidden; background: #06080b; }
@media (min-width: 1024px) { .split__media { min-height: calc(100svh - var(--nav-h)); } }
.split__media video { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 40% center; will-change: transform; }
.split__grain { position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 20% { transform: translate(-4%,3%) } 40% { transform: translate(3%,-2%) } 60% { transform: translate(-2%,-4%) } 80% { transform: translate(4%,2%) } 100% { transform: translate(0,0) } }
.split__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 2px, transparent 2px 5px); mix-blend-mode: multiply; opacity: .55; }
.split__frame { position: absolute; inset: 1.25rem; border: 1px solid rgba(236,229,214,.22); pointer-events: none; }
.split__frame::before, .split__frame::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--brass); border-style: solid; }
.split__frame::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; } .split__frame::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.split__chip { position: absolute; left: 2.25rem; top: 2.25rem; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: rgba(6,8,11,.6); backdrop-filter: blur(8px); border: 1px solid rgba(236,229,214,.18); border-radius: 2px; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg); }
.split__chip i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d3d; box-shadow: 0 0 10px rgba(255,77,61,.8); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .25 } }
.split__label { position: absolute; right: 2.25rem; bottom: 2.25rem; text-align: right; display: flex; flex-direction: column; gap: .35rem; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.split__price { font-size: 3.5rem; line-height: 1; }
@media (max-width: 1023px) { .split__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .split__grain, .split__signal i, .split__chip i { animation: none; } }

/* Chapter rail (channel-strip style scroll spy) */
.rail { position: fixed; left: 1.25rem; top: 50%; transform: translateY(-50%); z-index: 30; display: none; opacity: 0; transition: opacity .6s; pointer-events: none; }
.rail.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1280px) { .rail { display: block; } }
.rail__line { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(var(--fg-rgb), .15); }
.rail__line i { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--brass); box-shadow: 0 0 8px rgba(209,168,95,.6); transition: height .3s; }
.rail ol { display: flex; flex-direction: column; gap: 1.1rem; }
.rail a { display: flex; align-items: center; gap: .9rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--fg-rgb), .45); transition: color .3s; }
.rail a::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(var(--fg-rgb), .25); background: var(--surface-0); box-sizing: border-box; transition: all .3s; }
.rail a.is-active { color: var(--fg); } .rail a.is-active::before { border-color: var(--brass); background: var(--brass); box-shadow: 0 0 10px rgba(209,168,95,.6); }
.rail__label { opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
.rail:hover .rail__label, .rail a.is-active .rail__label { opacity: 1; transform: none; }

/* Marquee intro */
.marq { overflow: hidden; }
.marq__bg { position: absolute; right: -10%; top: 10%; width: 70%; opacity: .07; pointer-events: none; filter: blur(2px) saturate(.6); transform: rotate(-4deg); }
.marq__line { white-space: nowrap; font-size: clamp(3rem, 9vw, 9rem); color: transparent; -webkit-text-stroke: 1px rgba(var(--fg-rgb), .35); line-height: 1; margin-bottom: 4rem; will-change: transform; }
.marq__line em { font-style: normal; color: var(--brass); -webkit-text-stroke: 0; }
.marq__grid { position: relative; }
.marq__side { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .marq__side { padding-top: 4rem; } }
.marq__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1.5rem; }
.marq__list li { display: flex; gap: .75rem; align-items: baseline; font-size: .875rem; color: var(--fg-2); border-top: 1px solid var(--hairline); padding-top: .6rem; }
.marq__list li span { font-family: var(--font-mono); font-size: .625rem; color: var(--brass); }

/* Centered COLOR layout + pulse ring */
.color--centered .color__grid { grid-template-columns: 1fr; margin-top: 3rem; justify-items: center; text-align: center; }
.color--centered .color__grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
.color--centered .color__effects { display: grid; grid-template-columns: repeat(5, auto); gap: 0 1.75rem; border: 0; margin-top: 2rem; }
.color--centered .color__effects li { flex-direction: column; border: 0; gap: .5rem; padding: 0; }
.color--centered .color__effects .t { margin: 0; }
.color--centered .color__grid > div:last-child { width: min(100%, 64rem); }
.color--centered .hwswitch__img { width: 96px; height: 120px; }
@media (max-width: 767px) { .color--centered .color__effects { grid-template-columns: repeat(2, auto); gap: 1rem 1.5rem; } }
.hwswitch { position: relative; }
.hwswitch__ring { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 1px solid rgba(255,157,46,.8); opacity: 0; pointer-events: none; }
.hwswitch__ring.is-pulsing { animation: ring 1.1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ring { from { transform: scale(.4); opacity: .9 } to { transform: scale(6); opacity: 0 } }
.color--centered.is-on { box-shadow: inset 0 0 0 1px rgba(255,157,46,.25); }

/* Stacked chapters */
.stack { position: relative; }
.stack__panel { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--hairline); box-shadow: 0 -40px 80px -40px rgba(0,0,0,.8); }
.stack__panel--low { background: linear-gradient(180deg, #0b0e13, #11151c); }
.stack__panel--air { background: linear-gradient(180deg, #131924, #1a2230); }
.stack__inner { position: relative; width: 100%; display: grid; gap: 2.5rem; padding-top: 5rem; padding-bottom: 5rem; align-items: center; }
@media (min-width: 1024px) { .stack__inner { grid-template-columns: 1.15fr 1fr; gap: 5rem; } .stack__panel--air .stack__media { order: 2; } }
.stack__media { position: relative; aspect-ratio: 1920/1152; }
.stack__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack__labels { display: flex; gap: 1.25rem; margin-top: 2rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--fg-rgb), .5); }
.stack__labels li { display: flex; align-items: center; gap: .5rem; } .stack__labels li::before { content: ""; width: .75rem; height: 1px; background: var(--brass); }

/* Wide harmonics */
.hsl--wide .hsl__box { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
.hsl--wide svg { height: clamp(14rem, 30vw, 24rem); width: 100%; }

/* Bento features */
.bento { display: grid; gap: 1rem; margin-top: 3.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 16rem; margin-top: 5rem; } .bento__cell--low { grid-column: span 2; grid-row: span 2; } .bento__cell--air { grid-column: span 2; } .bento__cell--character { grid-column: span 2; } }
.bento__cell { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: 4px; background: linear-gradient(180deg, var(--plate-top), transparent 40%), var(--surface-1); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; min-height: 14rem; --sx: 50%; --sy: 50%; transition: border-color .5s; }
.bento__cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(18rem 12rem at var(--sx) var(--sy), rgba(209,168,95,.16), transparent 70%); }
.bento__cell:hover { border-color: rgba(var(--fg-rgb), .3); } .bento__cell:hover::after { opacity: 1; }
.bento__img { position: absolute; right: -14%; bottom: -16%; width: 66%; opacity: .38; pointer-events: none; transition: transform .8s var(--ease-out-expo), opacity .5s; mask-image: linear-gradient(180deg, transparent, #000 30%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); }
.bento__img img { border-radius: 4px; }
.bento__cell:hover .bento__img { transform: translate(-2%, -3%) scale(1.03); opacity: .6; }
.bento__img--air { width: 48%; right: 2%; bottom: -30%; }
.bento__top { position: relative; display: flex; justify-content: space-between; align-items: center; color: var(--fg-2); }
.bento__body { position: relative; margin-top: auto; } .bento__body h3 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; } .bento__body p { margin-top: .5rem; font-size: .8125rem; color: var(--fg-3); line-height: 1.6; max-width: 22rem; }
.bento__cell--low .bento__body h3 { font-size: 2.25rem; }

/* Spec sheet + purchase */
.sheet__grid { display: grid; gap: 3rem; margin-top: 3.5rem; }
@media (min-width: 1024px) { .sheet__grid { grid-template-columns: 1.3fr 1fr; gap: 5rem; align-items: start; margin-top: 5rem; } }
.sheet__specs { border-top: 1px solid var(--hairline); }
.sheet__row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
.sheet__row dd { font-size: .875rem; } .sheet__row dd.is-pending { color: var(--fg-3); }
.sheet__card { position: relative; padding: 2.5rem 2rem 2rem; border-radius: 6px; background: linear-gradient(160deg, #1a212b, #10141b); border: 1px solid rgba(209,168,95,.35); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); display: flex; flex-direction: column; gap: .5rem; transform-style: preserve-3d; }
.sheet__perf { position: absolute; left: 1rem; right: 1rem; top: 1.1rem; height: 1px; background: repeating-linear-gradient(90deg, rgba(236,229,214,.35) 0 6px, transparent 6px 12px); }
.sheet__price { font-size: 5rem; line-height: 1; margin-top: .75rem; } @media (min-width: 768px) { .sheet__price { font-size: 6rem; } }
.sheet__card .buy__facts { margin-top: 1.5rem; }

/* Custom cursor (desktop, fine pointer) */
.cursor { position: fixed; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brass); pointer-events: none; z-index: 100; mix-blend-mode: difference; transition: transform .25s var(--ease-soft), opacity .3s; opacity: 0; }
.cursor__ring { position: fixed; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(209,168,95,.7); pointer-events: none; z-index: 100; transition: transform .35s var(--ease-soft), opacity .3s, border-color .3s; opacity: 0; }
body.has-cursor .cursor, body.has-cursor .cursor__ring { opacity: 1; }
body.has-cursor.cursor-hover .cursor__ring { transform: scale(1.8); border-color: var(--signal); }
body.has-cursor.cursor-hover .cursor { transform: scale(.5); }
@media (max-width: 767px) { .bento__body h3 { font-size: 1.125rem; overflow-wrap: anywhere; } .bento__cell--low .bento__body h3 { font-size: 1.5rem; } .bento__cell { padding: 1.1rem; min-height: 12rem; } }

/* ==========================================================================
   Front page — "Daylight" (fourth variant): the Midnight structure in light
   ========================================================================== */
[data-theme="daylight"] {
  --surface-0: #f6f3ec; --surface-1: #efebe2; --surface-2: #e8e3d8; --surface-3: #dfd9cc; --surface-4: #d0c9bb; --surface-5: #b8b0a0; --surface-6: #9f978a;
  --fg: #17160f; --fg-2: #3a3731; --fg-3: #6f695e; --brass: #8f6b2a; --brass-dim: #b08a47; --signal: #1f7f90; --lamp: #d9701c; --air: #fbfaf6;
  --fg-rgb: 23, 22, 15; --surface-rgb: 246, 243, 236; --glow-rgb: 255, 255, 255; --particle: #7a7267;
  --hairline: rgba(23, 22, 15, 0.12); --hairline-strong: rgba(23, 22, 15, 0.22); --shadow-strong: rgba(60, 46, 20, 0.28);
}
body.fp-daylight { background: radial-gradient(70% 45% at 80% -5%, rgba(255,236,196,.9), transparent 60%), radial-gradient(50% 40% at 0% 30%, rgba(31,127,144,.07), transparent 60%), var(--surface-0); }
.intro__para { margin-top: 1rem; color: var(--fg-2); line-height: 1.65; max-width: 34rem; }

/* Day hero */
.day { position: relative; min-height: 100svh; display: grid; padding-top: var(--nav-h); overflow: hidden; }
@media (min-width: 1024px) { .day { grid-template-columns: minmax(0, 52%) minmax(0, 48%); align-items: center; } }
.day__sun { position: absolute; right: -10%; top: -20%; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,150,.55), rgba(255,214,150,0)); pointer-events: none; filter: blur(10px); animation: sun 18s ease-in-out infinite alternate; }
@keyframes sun { from { transform: translate(0,0) } to { transform: translate(-4%, 6%) } }
.day__media { position: relative; margin: 2rem var(--gutter) 0; aspect-ratio: 1611 / 690; border-radius: 10px; overflow: hidden; background: #e9e5dc; box-shadow: 0 50px 100px -40px var(--shadow-strong), 0 1px 0 rgba(255,255,255,.7) inset; transition: transform .6s var(--ease-out-expo); transform-style: preserve-3d; }
@media (min-width: 1024px) { .day__media { margin: 0 0 0 var(--gutter); width: calc(100% - var(--gutter)); aspect-ratio: 1611 / 690; max-height: 78svh; } }
.day__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.day__leak { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,225,180,.28) 45%, rgba(255,255,255,.35) 50%, rgba(255,225,180,.22) 55%, transparent 70%); mix-blend-mode: screen; animation: leak 9s ease-in-out infinite; }
@keyframes leak { 0% { transform: translateX(-60%) } 50% { transform: translateX(60%) } 100% { transform: translateX(-60%) } }
.day__caption { position: absolute; left: 1.25rem; bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; color: rgba(236,231,220,.85); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.day__caption .eyebrow { color: inherit; }
.day__copy { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .day__copy { padding-left: 4rem; } }
.day__title { font-size: clamp(3.4rem, 8.6vw, 9rem); margin: 0; display: flex; flex-wrap: wrap; gap: 0 .22em; }
.day__word { display: inline-block; overflow: hidden; padding-bottom: .06em; }
.day__word > span { display: inline-block; transform: translateY(110%) rotate(3deg); opacity: 0; transition: transform 1.1s var(--ease-out-expo), opacity .4s; transition-delay: calc(.15s + var(--k) * .12s); }
.day__title.is-in .day__word > span { transform: none; opacity: 1; }
.day__word.serif-italic { font-size: 1em; }
.day__facts { display: grid; grid-template-columns: repeat(3, auto); gap: 2rem; border-top: 1px solid var(--hairline); padding-top: 1.25rem; margin-top: .5rem; width: fit-content; }
.day__facts dt { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
.day__facts dd { margin-top: .35rem; font-family: var(--font-mono); font-size: .8125rem; color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .day__leak, .day__sun { animation: none; } .day__word > span { transform: none !important; opacity: 1 !important; transition: none; } }

/* Top chapter progress */
.progress { position: sticky; top: var(--nav-h); z-index: 30; background: rgba(var(--surface-rgb), .85); backdrop-filter: blur(10px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.progress__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; }
.progress__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brass), var(--signal)); transition: width .25s linear; }
.progress ol { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter); }
.progress ol::-webkit-scrollbar { display: none; }
.progress a { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem .85rem 0; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; transition: color .3s; border-bottom: 2px solid transparent; }
.progress a span { color: var(--brass); }
.progress a.is-active { color: var(--fg); }

/* Scrubbed introduction */
.scrub__text { margin-top: 3rem; max-width: 62rem; }
.scrub__lead { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.25; }
.scrub__para { margin-top: 1.5rem; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.5; max-width: 52rem; }
.scrub__text .w { color: rgba(var(--fg-rgb), .18); transition: color .25s; }
.scrub__text .w.is-lit { color: var(--fg); }
.scrub__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.scrub__chips li { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; padding: .55rem .8rem; border: 1px solid var(--hairline-strong); border-radius: 999px; color: var(--fg-2); }

/* Story: pinned text, scrolling media */
.story { position: relative; padding: 4rem 0; }
.story__grid { position: relative; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .story__grid { grid-template-columns: 1fr 1.2fr; gap: 5rem; } .story__pin { position: sticky; top: calc(var(--nav-h) + 6rem); align-self: start; min-height: 24rem; } }
.story__text { transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft); }
@media (min-width: 1024px) { .story__text { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); pointer-events: none; } .story__text.is-active { opacity: 1; transform: none; pointer-events: auto; } .story__dots { position: absolute; left: 0; bottom: -2rem; display: flex; gap: .5rem; } }
@media (max-width: 1023px) { .story__text + .story__text { margin-top: 4rem; } .story__dots { display: none; } .story__media { display: grid; gap: 2rem; } }
.story__dots i { width: 22px; height: 2px; background: rgba(var(--fg-rgb), .2); transition: background .4s; } .story__dots i.is-active { background: var(--brass); }
.story__media { display: flex; flex-direction: column; gap: 40vh; padding: 12vh 0 30vh; }
.story__item { position: relative; aspect-ratio: 1600/1180; margin: 0; }
.story__item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__item[data-mode="air"] { box-shadow: 0 60px 120px -40px rgba(31,127,144,.35); }

/* Expanding feature columns */
.cols { display: flex; flex-direction: column; gap: .5rem; margin-top: 3.5rem; }
@media (min-width: 1024px) { .cols { flex-direction: row; height: 30rem; margin-top: 5rem; gap: .5rem; } }
.cols__item { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-1); overflow: hidden; transition: flex-grow .7s var(--ease-out-expo), background-color .5s; min-width: 0; }
.cols__item.is-open { flex-grow: 3.2; background: var(--air); }
.cols__head { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; text-align: left; width: 100%; cursor: pointer; }
@media (min-width: 1024px) { .cols__head { flex-direction: column; align-items: flex-start; height: 100%; justify-content: space-between; } .cols__title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.25rem; white-space: nowrap; } .cols__item.is-open .cols__title { writing-mode: horizontal-tb; transform: none; font-size: 2rem; } }
.cols__num { font-size: 2.5rem; line-height: 1; color: rgba(var(--fg-rgb), .18); }
.cols__title { text-transform: uppercase; letter-spacing: .02em; }
.cols__body { display: none; padding: 0 1.25rem 1.5rem; gap: 1rem; flex-direction: column; color: var(--fg-2); }
.cols__item.is-open .cols__body { display: flex; }
@media (min-width: 1024px) { .cols__item.is-open .cols__head { height: auto; } .cols__body p { max-width: 24rem; line-height: 1.6; } }
.cols__motif { color: var(--fg-2); }

/* Light spec sheet */
[data-theme="daylight"] .sheet__card { background: linear-gradient(160deg, #ffffff, #efebe2); border-color: rgba(143,107,42,.35); box-shadow: 0 40px 80px -30px var(--shadow-strong), inset 0 1px 0 rgba(255,255,255,.9); }
[data-theme="daylight"] .sheet__perf { background: repeating-linear-gradient(90deg, rgba(23,22,15,.3) 0 6px, transparent 6px 12px); }
[data-theme="daylight"] .hsl--wide .hsl__box { background: #fbfaf6; }
[data-tilt-soft] { transition: transform .8s var(--ease-out-expo); }

/* Support: the installer list. */
.support__downloads { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; max-width: 65ch; }
.support__downloads li { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-1); }
.support__downloads b { font-weight: 600; }
.hero__micro s.dim, .sheet__card s.dim { opacity: .55; text-decoration-thickness: 1px; }

/* 02 COLOR, measured. */
.cm__grid { display: grid; gap: 3rem; margin-top: 3rem; align-items: start; }
@media (min-width: 1024px) { .cm__grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.cm__facts { margin: 2.5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.cm__fact { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.cm__fact dd { margin: 0; display: grid; gap: .15rem; }
.cm__fact b { font-family: var(--font-mono); font-weight: 500; font-size: .95rem; letter-spacing: .01em; }
.cm__fact span { font-size: .8125rem; color: var(--fg-3); line-height: 1.45; }
.cm__charts { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .cm__charts { grid-template-columns: 1fr 1fr; } }
.cm__chart { padding: 1rem 1.1rem .8rem; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-1); }
.cm__chart .xs { margin-top: .5rem; }
.cm .color__unit .on { opacity: 0; transition: opacity .6s var(--ease-out-expo); }
.cm.is-on .color__unit .on { opacity: 1; }
.cm .color__unit-glow { opacity: 0; transition: opacity .8s; }
.cm.is-on .color__unit-glow { opacity: 1; }

/* 03 the bands in one strip, measured. */
.bands__grid { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 900px) { .bands__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.bands__card { display: grid; gap: .75rem; align-content: start; }
.bands__module { margin: 0 0 .5rem; }
.bands__module img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(20,19,17,.22)); }
.bands__card .h-sub { margin-top: .25rem; }
.curve { padding: .9rem 1rem .7rem; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-1); }
.curve .xs { margin-top: .4rem; }
.bands__line { font-size: .9375rem; line-height: 1.55; color: var(--fg-2); margin: 0; }
.bands__thd { display: grid; gap: 2rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--hairline); align-items: center; }
@media (min-width: 900px) { .bands__thd { grid-template-columns: 5fr 7fr; gap: 4rem; } }

.sheet__notes { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.sheet__notes ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; max-width: 60ch; line-height: 1.5; }

/* Hero: the clip is a link to the product; the launch price stands on its own line. */
a.day__media { display: block; cursor: pointer; color: inherit; text-decoration: none; }
a.day__media:hover { transform: translateY(-4px); }
.day__deal { display: inline-flex; align-items: baseline; gap: .75rem; font-family: var(--font-mono); margin: -.5rem 0 0; }
.day__deal s { font-size: .8125rem; color: var(--fg-3); text-decoration-thickness: 1px; }
.day__deal-now { font-size: 1.375rem; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.day__deal-label { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); padding: .35rem .6rem; border: 1px solid var(--brass); border-radius: 999px; }
/* the italic word keeps its overhangs: the reveal mask must not clip the p */
.day__word.serif-italic { padding: 0 .12em .22em .1em; margin: 0 -.12em -.16em -.1em; }

/* Product page. */
.ph { padding-top: calc(var(--nav-h) + 4rem); padding-bottom: var(--section-y); }
.ph__top { display: grid; gap: 2.5rem; align-items: end; margin-bottom: 3rem; }
@media (min-width: 1024px) { .ph__top { grid-template-columns: 7fr 4fr; gap: 4rem; } }
.ph__title { font-size: clamp(3.4rem, 8vw, 8rem); margin: 1.25rem 0 0; }
.ph__tagline { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2.25rem); color: var(--fg-2); margin: .5rem 0 1.25rem; }
.ph__buy { padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface-1); display: grid; gap: 1.25rem; }
.ph__buy .day__deal { margin: 0; }
.ph__ctas { display: grid; gap: .6rem; }
.ph__panel { position: relative; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 50px 100px -40px var(--shadow-strong); background: #e9e5dc; aspect-ratio: 3210 / 1376; }
.ph__plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease-out-expo); }
.ph__plate.is-on { opacity: 1; }
.ph__theme { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 999px; background: rgba(20,19,17,.72); color: #f3efe6; backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: .75rem; }
.ph__theme .eyebrow { color: rgba(243,239,230,.6); margin-right: .25rem; }
.ph__theme button { font: inherit; font-weight: 600; background: none; border: 0; color: rgba(243,239,230,.5); cursor: pointer; padding: .1rem .3rem; }
.ph__theme button.is-on { color: #f3efe6; text-decoration: underline; text-underline-offset: 4px; }

.anat__grid { display: grid; gap: 2.5rem; margin-top: 3rem; align-items: start; }
@media (min-width: 1024px) { .anat__grid { grid-template-columns: 8fr 4fr; gap: 3rem; } }
.anat__panel { position: relative; margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px -30px var(--shadow-strong); }
.anat__panel img { display: block; width: 100%; height: auto; }
.anat__mark { position: absolute; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; margin: -.675rem 0 0 -.675rem; border-radius: 3px; background: rgba(20,19,17,.88); color: #f3efe6; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .04em; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(243,239,230,.55), 0 4px 10px rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.anat__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.anat__legend li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--hairline); }
.anat__num { font-family: var(--font-mono); font-size: .6875rem; color: var(--brass); letter-spacing: .1em; padding-top: .2rem; }
.anat__legend b { display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; }
.anat__legend p { margin: .25rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--fg-2); }

.ov__cols { margin-top: 2.5rem; column-gap: 3rem; max-width: 72rem; }
@media (min-width: 900px) { .ov__cols { columns: 2; } }
.ov__cols p { margin: 0 0 1.25rem; line-height: 1.6; color: var(--fg-2); break-inside: avoid; }
.ov__cols .lede { color: var(--fg); }
.ov .scrub__chips { margin-top: 1.5rem; }

.pre__grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 640px) { .pre__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pre__grid { grid-template-columns: repeat(3, 1fr); } }
.pre__cat { padding: 1.25rem 1.4rem; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-1); }
.pre__cat ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; }
.pre__cat li { font-size: .9375rem; color: var(--fg); }
.pre__cat li::before { content: "·"; color: var(--brass); margin-right: .6rem; }

.daw__grid { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 900px) { .daw__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.daw__col ul { list-style: none; margin: .75rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
.daw__col li { font-size: 1.0625rem; color: var(--fg); }
.daw__col li::before { content: "—"; color: var(--brass); margin-right: .6rem; }

/* Product page, dense. */
.single-product .section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.single-product .ph { padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 3rem; }
.ph-notices { padding-top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1rem; } .ph-notices .sn { margin: 0; } .ph-notices ~ .ph, .single-product .ph-notices + .ph { padding-top: 2rem; }
.single-product .ph__top { margin-bottom: 2rem; align-items: start; }
.single-product .ph__title { font-size: clamp(3rem, 6.5vw, 6.5rem); }
.pg__head { display: grid; gap: 1rem 3rem; align-items: end; }
@media (min-width: 900px) { .pg__head { grid-template-columns: 7fr 5fr; } }
.pg__grid { display: grid; gap: 2rem; margin-top: 2rem; align-items: start; }
@media (min-width: 1024px) { .pg__grid { grid-template-columns: 7fr 5fr; gap: 2.5rem; } }
.pg__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.5rem; }
.pg__legend li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--hairline); }
.pg__legend b { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; }
.pg__legend p { margin: .2rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--fg-2); }
.ov__cols { margin-top: 1.5rem; }
.ov__cols p { font-size: .9375rem; margin-bottom: 1rem; }
.pm__bands { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .pm__bands { grid-template-columns: repeat(3, 1fr); } }
.pm__band { display: grid; gap: .75rem; align-content: start; }
.pm__module { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(20,19,17,.2)); }
.pm__row { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .pm__row { grid-template-columns: repeat(3, 1fr); } }
.pi__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .pi__grid { grid-template-columns: 6fr 6fr; gap: 4rem; } }
.pi__presets { margin: 1.5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.pi__presets > div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.pi__presets dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
.pi__cols { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .pi__cols { grid-template-columns: repeat(3, 1fr); } }
.pi__cols .daw__col li { font-size: .9375rem; }
.pi__cols .daw__col ul { margin: .5rem 0 .75rem; }
.pd__grid { display: grid; gap: 2.5rem; margin-top: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .pd__grid { grid-template-columns: 7fr 5fr; gap: 4rem; } }

.pi__cols--wide { max-width: 72rem; }
@media (min-width: 900px) { .pi__cols--wide { gap: 3rem; } .pi__cols--wide .daw__col li { font-size: 1.0625rem; } }

/* At a glance, compact: the panel, the legend under it. */
.single-product .pg { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pg__head--tight .h-sub { margin-top: .75rem; }
.pg__grid--stack { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.pg__grid--stack .anat__panel { max-width: 62rem; }
.pg__grid--stack .pg__legend { grid-template-columns: repeat(3, 1fr); gap: 0 2rem; max-width: 72rem; }
@media (max-width: 899px) { .pg__grid--stack .pg__legend { grid-template-columns: 1fr 1fr; } }
.pg__grid--stack .pg__legend li { padding: .45rem 0; }
.pg__grid--stack .pg__legend p { font-size: .75rem; }

/* Deal + pill buttons (front page hero and the purchase card) --------------- */
.deal { display: flex; align-items: baseline; gap: .9rem; margin: 0; }
.deal s { font-family: var(--font-sans); font-size: 1.125rem; color: var(--fg-3); text-decoration-thickness: 1px; }
.deal__now { font-family: var(--font-display); font-stretch: 96%; font-weight: 600; font-size: 2.75rem; line-height: 1; letter-spacing: -.03em; color: var(--fg); }
.deal__label { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #c4181c; border: 1px solid #c4181c; border-radius: 999px; padding: .35rem .6rem; align-self: center; }
.pills { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-pill { height: 3.75rem; padding: 0 2.25rem; border-radius: 999px; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: .01em; text-transform: none; border: 1.5px solid var(--fg); }
.btn-pill.btn-primary { background: var(--fg); color: var(--surface-0); box-shadow: 0 14px 30px -12px rgba(var(--fg-rgb), .55); }
.btn-pill.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(var(--fg-rgb), .6); }
.btn-pill.btn-outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-pill.btn-outline:hover { background: rgba(var(--fg-rgb), .06); }
.day__copy .deal { margin-top: .25rem; }
.pc { border: 1px solid var(--hairline-strong); border-radius: 20px; background: var(--air); padding: 3.5rem 3.5rem 3.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 2rem; box-shadow: 0 40px 80px -40px var(--shadow-strong); }
.pc > * { min-width: 0; }
@media (max-width: 599px) { .pc { padding: 2rem 1.5rem 1.75rem; } .pc__buy .btn-pill { padding: 0 1.75rem; height: 3.75rem; font-size: 1rem; } .pc__buy .deal__now { font-size: 3rem; } }
@media (min-width: 1024px) { .pc { grid-template-columns: 1fr auto; align-items: center; gap: 4rem; padding: 4.5rem 4.5rem 4.25rem; } .pc__buy .pills { flex-wrap: nowrap; } }
.pc__title { font-family: var(--font-display); font-stretch: 96%; font-weight: 600; font-size: clamp(2.75rem, 5vw, 4.75rem); line-height: .95; letter-spacing: -.035em; margin: 1.1rem 0 1.5rem; }
.pc__title .serif-italic { font-size: 1em; color: var(--fg); }
.pc__list { list-style: none; margin: 0; padding: 0; max-width: 40rem; border-top: 1px solid var(--hairline); }
.pc__list li { display: grid; grid-template-columns: 2.5rem 8.5rem 1fr; gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--hairline); font-size: .9375rem; color: var(--fg); line-height: 1.45; }
.pc__list .n { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--brass); }
.pc__list .k { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 599px) { .pc__list li { grid-template-columns: 2rem 1fr; } .pc__list .k { grid-column: 2; } .pc__list .v { grid-column: 2; } }
.pc__buy { display: flex; flex-direction: column; gap: 1.5rem; }
.pc__buy .deal { flex-wrap: wrap; row-gap: .75rem; min-width: 0; }
.deal__label { white-space: nowrap; }
.pc__buy .deal__now { font-size: 3.75rem; }
.pc__buy s { font-size: 1.375rem; }
.pc__buy .btn-pill { height: 4.25rem; padding: 0 2.75rem; font-size: 1.125rem; }
@media (min-width: 1024px) { .pc__buy { align-items: flex-end; } .pc__buy .pills { justify-content: flex-end; } }

/* Product page: the same deal + pill buttons, in the buy card ------------------ */
.ph__buy { border-radius: 20px; border-color: var(--hairline-strong); background: var(--air); padding: 2.25rem 2.25rem 2rem; gap: 1.5rem; box-shadow: 0 40px 80px -40px var(--shadow-strong); }
.ph__buy .deal { margin: 0; flex-wrap: wrap; gap: .6rem; }
.ph__buy .deal__now { font-size: 2.875rem; }
.ph__buy s { font-size: 1.0625rem; }
.ph__buy .pills { flex-direction: column; gap: .75rem; }
.ph__buy .btn-pill { width: 100%; height: 4rem; font-size: 1.0625rem; }
.ph__buy .buy__facts { font-size: .8125rem; }

/* Nav: plain wordmark, sentence-case menu, pill buy button --------------------- */
.nav__brand .wordmark__name { height: 14px; }
.nav__brand .wordmark__mark { display: none; }
@media (max-width: 767px) { .nav__brand .wordmark__name { display: none; } .nav__brand .wordmark__mark { display: block; width: 1.7rem; height: 1.7rem; } .nav__brand .wordmark--mark { gap: 0; } }
.nav__menu { gap: .25rem; }
.nav__menu a { font-family: var(--font-sans); font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-2); padding: .5rem 1rem; border-radius: 999px; transition: color .25s, background-color .25s; }
.nav__menu a:hover { color: var(--fg); background: rgba(var(--fg-rgb), .06); }
.nav__menu .current-menu-item a, .nav__menu .current_page_parent a { color: var(--fg); background: rgba(var(--fg-rgb), .08); }
.nav__cta { gap: .5rem; }
.nav__link { font-family: var(--font-sans); font-size: .9375rem; font-weight: 500; color: var(--fg-2); padding: .5rem 1rem; border-radius: 999px; transition: color .25s, background-color .25s; }
.nav__link:hover { color: var(--fg); background: rgba(var(--fg-rgb), .06); }
.btn-pill.btn-nav { height: 2.75rem; padding: 0 1.25rem; font-size: .9375rem; box-shadow: none; }
.btn-pill.btn-nav .dim { color: var(--surface-4); font-weight: 500; }
.btn-pill.btn-nav:hover { transform: none; box-shadow: 0 10px 24px -10px rgba(var(--fg-rgb), .5); }

/* Nav: masthead. Wordmark centred, a hairline, the menu under it in small mono. ------- */
@media (min-width: 1024px) {
  :root { --nav-h: 118px; }
  .nav__inner { flex-direction: column; justify-content: center; gap: .85rem; }
  .nav__brand { font-size: 18px; }
  .nav__brand .wordmark__name { height: 15px; }
  .nav__menu { width: 100%; justify-content: center; gap: 0; border-top: 1px solid var(--hairline); padding-top: .8rem; }
  .nav__menu a { font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); padding: .25rem 1.5rem; border-radius: 0; background: none; }
  .nav__menu a:hover, .nav__menu .current-menu-item a, .nav__menu .current_page_parent a { color: var(--fg); background: none; }
  .nav.is-scrolled { background: rgba(var(--surface-rgb), .85); }
}

/* Nav utility: account + cart ---------------------------------------------------- */
.nav__util { display: flex; align-items: center; gap: 1.25rem; }
.nav__util-link { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2); display: inline-flex; align-items: center; gap: .5rem; transition: color .25s; }
.nav__util-link:hover { color: var(--fg); }
.nav__cart-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--fg); color: var(--surface-0); font-size: .625rem; letter-spacing: 0; line-height: 1; }
.nav__cart-count.is-empty { background: transparent; color: var(--fg-3); border: 1px solid var(--hairline-strong); }
@media (max-width: 1023px) { .nav__util { margin-left: auto; margin-right: 1.25rem; gap: 1rem; } }
@media (min-width: 1024px) { .nav__util { position: absolute; right: 0; top: 0; height: 74px; } }
.nav__mobile-util { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: 1.5rem; }
.nav__mobile-util a { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(243, 239, 230, .75); }
.nav__mobile-util a:hover { color: var(--surface-0); }

/* WooCommerce pages: pill buttons, the full width, login / register side by side ------ */
.wc-body { max-width: 1200px; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce button.button.alt, .woocommerce a.button.alt, .wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { height: 3.5rem; padding: 0 2rem !important; border-radius: 999px !important; font-family: var(--font-sans) !important; font-size: .9375rem !important; font-weight: 600 !important; letter-spacing: .01em; text-transform: none; }
.woocommerce .button:hover, .wc-block-components-button:hover { box-shadow: 0 14px 30px -12px rgba(var(--fg-rgb), .55); }
.wc-block-components-button.outlined, .wc-block-cart__empty-cart__title + * a.button { background: transparent !important; color: var(--fg) !important; border: 1.5px solid var(--fg) !important; }
/* Cart / checkout: the proceed and place-order buttons the same 48px as the express buttons beside them */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { height: 3rem !important; min-height: 0 !important; font-size: .9375rem !important; }
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none !important; }
.wc-block-cart__empty-cart__title { font-family: var(--font-display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3rem); }
.woocommerce-account h2, .woocommerce-account h3 { font-family: var(--font-display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.75rem; margin: 0 0 1.25rem; }
.woocommerce-account .u-columns { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .u-columns > .u-column1, .woocommerce-account .u-columns > .u-column2 { float: none; width: auto; }
.woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { border: 1px solid var(--hairline-strong) !important; border-radius: 20px !important; padding: 2.5rem !important; margin: 0 !important; background: var(--air); box-shadow: 0 40px 80px -40px var(--shadow-strong); }
.woocommerce form .form-row label { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.woocommerce form .form-row .required { color: var(--brass); }
.woocommerce form.register p:last-of-type, .woocommerce form.login p:last-of-type { margin-top: 1rem; }
.woocommerce-privacy-policy-text { font-size: .8125rem; color: var(--fg-3); }
.woocommerce-LostPassword a { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.woocommerce-MyAccount-navigation { margin-bottom: 2rem; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: .6rem .9rem; border-radius: 999px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: rgba(var(--fg-rgb), .07); color: var(--fg); }
.woocommerce-account .woocommerce-MyAccount-content { font-size: .9375rem; }
.woocommerce-account .woocommerce-MyAccount-content .saltstrom-licence { border: 1px solid var(--hairline-strong); border-radius: 16px; padding: 1.5rem; background: var(--air); }
.wc-block-components-sidebar-layout .wc-block-components-sidebar .wc-block-components-panel, .wc-block-components-order-summary, .wc-block-components-totals-wrapper { border-color: var(--hairline) !important; }
.wc-block-components-checkout-step__heading .wc-block-components-title { font-size: 1.125rem; }
.wc-block-components-checkout-step__description, .wc-block-components-text-input label { font-family: var(--font-sans); }
@media (min-width: 1024px) { .footer__cols { grid-template-columns: repeat(5, 1fr); gap: 2rem; } }
.woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2 { float: none !important; width: auto !important; max-width: none !important; }
.woocommerce-account .col2-set::before, .woocommerce-account .col2-set::after { display: none; }

/* The nav's backdrop-filter makes it the containing block for fixed children, so the mobile panel is placed absolutely under it. */
.nav__mobile { position: absolute; top: 100%; bottom: auto; height: calc(100svh - var(--nav-h)); }

/* Nav icons: account and cart ------------------------------------------------------ */
.nav__util { gap: .35rem; }
.nav__icon { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; color: var(--fg-2); transition: color .25s, background-color .25s; }
.nav__icon:hover { color: var(--fg); background: rgba(var(--fg-rgb), .06); }
.nav__icon svg { display: block; }
.nav__icon .nav__cart-count { position: absolute; top: .15rem; right: .05rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; font-size: .5625rem; font-family: var(--font-mono); }
.nav__icon .nav__cart-count.is-empty { display: none; }
@media (max-width: 1023px) { .nav__util { margin-right: .75rem; } }

/* Buy form: platform switch + buttons ------------------------------------------------- */
.buyform { display: flex; flex-direction: column; gap: 1rem; }
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg__legend { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .5rem; padding: 0; }
.seg__legend span { text-transform: none; letter-spacing: .04em; opacity: .8; }
.seg__track { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hairline-strong); border-radius: 999px; background: rgba(var(--fg-rgb), .03); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding: 0 1.25rem; border-radius: 999px; font-family: var(--font-sans); font-size: .875rem; font-weight: 500; color: var(--fg-2); transition: background-color .25s, color .25s; }
.seg__opt input:checked + span { background: var(--fg); color: var(--surface-0); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.buyform .pills { margin-top: .25rem; }
.ph__buy .seg__track { display: flex; } .ph__buy .seg__opt { flex: 1; } .ph__buy .seg__opt span { width: 100%; }
.pc__buy .buyform { align-items: flex-end; } .pc__buy .seg__legend { text-align: right; } @media (max-width: 1023px) { .pc__buy .buyform { align-items: flex-start; } .pc__buy .seg__legend { text-align: left; } }

/* Reviews ------------------------------------------------------------------------------ */
.rv__summary { display: flex; align-items: center; gap: .9rem; margin: 0; }
.rv__avg { font-family: var(--font-display); font-weight: 600; font-stretch: 96%; font-size: 2.5rem; letter-spacing: -.03em; line-height: 1; }
.ph__rating { display: inline-flex; align-items: center; gap: .6rem; margin-top: .25rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.ph__rating:hover span { color: var(--fg); }
.rv .star-rating, .ph__rating .star-rating, .rv .woocommerce-product-rating .star-rating { color: var(--lamp); font-size: .9rem; }
.rv .star-rating::before { color: var(--hairline-strong); }
.rv__body { margin-top: 3rem; }
.rv #reviews { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .rv #reviews { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.rv #reviews #comments, .rv #reviews #review_form_wrapper { float: none !important; width: auto !important; }
.rv #reviews::after { display: none; }
.rv .woocommerce-Reviews-title, .rv .comment-reply-title { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); display: block; margin: 0 0 1.25rem; }
.rv .commentlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.rv .commentlist li { padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); }
.rv .commentlist .comment_container { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; }
.rv .commentlist img.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface-2); }
.rv .comment-text .meta { font-size: .8125rem; color: var(--fg-3); margin: .35rem 0 .75rem; }
.rv .comment-text .meta strong { color: var(--fg); font-weight: 600; }
.rv .comment-text .meta .verified { color: var(--brass); font-style: normal; }
.rv .comment-text .description p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
.rv .woocommerce-noreviews { font-size: .9375rem; color: var(--fg-3); margin: 0; }
.rv #review_form_wrapper { border: 1px solid var(--hairline-strong); border-radius: 20px; padding: 2.25rem; background: var(--air); box-shadow: 0 40px 80px -40px var(--shadow-strong); }
.rv .comment-form { display: grid; gap: 1.25rem; }
.rv .comment-form > p { margin: 0; }
.rv .comment-form label { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .35rem; }
.rv .comment-form input[type="text"], .rv .comment-form input[type="email"], .rv .comment-form textarea { width: 100%; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; padding: .6rem .1rem; font-family: var(--font-sans); font-size: .9375rem; }
.rv .comment-form textarea { min-height: 7rem; resize: vertical; }
.rv .comment-form-rating .stars { margin: .25rem 0 0; }
.rv .comment-form-rating .stars a { color: var(--hairline-strong); font-size: 1.25rem; width: 1.4em; }
.rv .comment-form-rating .stars:hover a, .rv .comment-form-rating .stars.selected a { color: var(--lamp); }
.rv .comment-form-rating .stars.selected a.active ~ a, .rv .comment-form-rating .stars:hover a.active ~ a { color: var(--hairline-strong); }
.rv .comment-form-rating select#rating { display: none; }
.rv .comment-form-cookies-consent { display: flex; align-items: center; gap: .6rem; }
.rv .comment-form-cookies-consent label { display: inline; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: .8125rem; }
.rv .comment-form .form-submit { margin: .25rem 0 0; }
.rv .comment-form .form-submit .submit { height: 3.5rem; padding: 0 2rem; border-radius: 999px; background: var(--fg); color: var(--surface-0); border: 0; font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.rv .comment-notes, .rv .must-log-in { font-size: .8125rem; color: var(--fg-3); }
.rv .commentlist .comment-respond, .rv nav.woocommerce-pagination { margin-top: 1.5rem; }
.pg__head .rv__summary { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.rv #reviews #comments ol.commentlist li img.avatar { position: static; float: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: var(--surface-2); border-radius: 50%; }
.rv #reviews #comments ol.commentlist li .comment-text { margin: 0; border: 0; padding: 0; border-radius: 0; }
.rv #reviews #comments ol.commentlist li .comment-text .star-rating { float: none; margin: 0 0 .5rem; }
.rv #reviews #comments ol.commentlist li .comment-text p.meta { font-size: .8125rem; }

/* Mini cart ------------------------------------------------------------------------- */
.minicart { position: relative; }
.minicart__panel { position: absolute; right: -.5rem; top: calc(100% + .6rem); width: 22rem; max-width: calc(100vw - 2rem); background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 18px; box-shadow: 0 30px 60px -20px var(--shadow-strong); padding: 1.25rem 1.25rem 1.25rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft), visibility 0s .25s; z-index: 60; }
.minicart__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.minicart.is-open .minicart__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft); }
.minicart__head { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg); }
.minicart__head .muted { color: var(--fg-3); }
.minicart__empty { margin: 0 0 1rem; font-size: .9375rem; color: var(--fg-2); }
.minicart__cta { width: 100%; height: 3rem; font-size: .875rem; }
.minicart .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.minicart .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: .25rem .9rem; padding: .9rem 1.75rem .9rem 0; border-bottom: 1px solid var(--hairline); font-size: .875rem; }
.minicart .woocommerce-mini-cart-item > a:not(.remove) { grid-column: 1 / -1; display: grid; grid-template-columns: 3.5rem 1fr; gap: .9rem; align-items: center; color: var(--fg); font-weight: 600; }
.minicart .woocommerce-mini-cart-item img { width: 3.5rem; height: auto; border-radius: 6px; background: var(--surface-2); margin: 0; }
.minicart .woocommerce-mini-cart-item .remove { position: absolute; right: 0; top: .9rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; color: var(--fg-3); font-size: 1.1rem; line-height: 1; text-decoration: none; }
.minicart .woocommerce-mini-cart-item .remove:hover { color: var(--fg); background: rgba(var(--fg-rgb), .07); }
.minicart .woocommerce-mini-cart-item dl.variation { grid-column: 2; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; font-size: .75rem; color: var(--fg-3); }
.minicart .woocommerce-mini-cart-item dl.variation dt, .minicart .woocommerce-mini-cart-item dl.variation dd { margin: 0; display: inline; }
.minicart .woocommerce-mini-cart-item dl.variation dd p { display: inline; margin: 0; }
.minicart .woocommerce-mini-cart-item .quantity { grid-column: 2; font-family: var(--font-mono); font-size: .8125rem; color: var(--fg-2); }
.minicart .woocommerce-mini-cart-item .quantity del { color: var(--fg-3); margin-right: .25rem; }
.minicart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: .9rem 0 1rem; font-size: .9375rem; }
.minicart .woocommerce-mini-cart__total strong { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; align-self: center; }
.minicart .woocommerce-mini-cart__total .amount { font-family: var(--font-display); font-weight: 600; font-stretch: 96%; font-size: 1.5rem; letter-spacing: -.02em; }
.minicart .woocommerce-mini-cart__buttons { display: grid; gap: .6rem; margin: 0; }
.minicart .woocommerce-mini-cart__buttons .btn { height: 3rem; font-size: .875rem; width: 100%; }
@media (max-width: 1023px) { .minicart__panel { position: fixed; left: 1rem; right: 1rem; top: calc(var(--nav-h) + .5rem); width: auto; } }

/* Nav search: a small panel under the icon, like the mini cart */
.navsearch { position: relative; }
.navsearch .nav__icon { border: 0; background: none; cursor: pointer; }
.navsearch .nav__icon:hover, .navsearch.is-open .nav__icon { color: var(--fg); background: rgba(var(--fg-rgb), .06); }
.navsearch__panel { position: absolute; right: -.5rem; top: calc(100% + .6rem); width: 20rem; max-width: calc(100vw - 2rem); background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 18px; box-shadow: 0 30px 60px -20px var(--shadow-strong); padding: .75rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft), visibility 0s .25s; z-index: 60; }
.navsearch.is-open .navsearch__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft); }
.navsearch__form { display: flex; align-items: center; gap: .5rem; }
.navsearch__input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--surface-0); color: var(--fg); font: inherit; font-size: .9375rem; -webkit-appearance: none; appearance: none; }
.navsearch__input::placeholder { color: var(--fg-3); }
.navsearch__input:focus { outline: none; border-color: var(--fg); }
.navsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.navsearch__go { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--fg); color: var(--surface-0); cursor: pointer; transition: transform .3s var(--ease-soft); }
.navsearch__go:hover { transform: scale(1.04); }
.products-list .lede a { color: var(--fg); text-decoration: underline; text-underline-offset: .22em; }
.navsearch__hits { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--hairline); }
.navsearch__list { list-style: none; margin: 0; padding: 0; }
.navsearch__hit { display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem; align-items: center; padding: .45rem .5rem; border-radius: 10px; color: var(--fg); transition: background-color .2s; }
.navsearch__hit:hover, .navsearch__hit.is-active { background: rgba(var(--fg-rgb), .06); }
.navsearch__hit img, .navsearch__noimg { width: 3.25rem; aspect-ratio: 7 / 3; object-fit: cover; border-radius: 4px; background: var(--surface-2); display: block; }
.navsearch__hit-t { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.navsearch__hit-t strong { font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navsearch__hit-t small { font-size: .75rem; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navsearch__all { display: block; margin-top: .25rem; padding: .55rem .5rem; border-radius: 10px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); transition: background-color .2s, color .2s; }
.navsearch__all:hover, .navsearch__all.is-active { color: var(--fg); background: rgba(var(--fg-rgb), .06); }
.navsearch__none { margin: 0; padding: .4rem .5rem .2rem; font-size: .875rem; color: var(--fg-3); }
@media (max-width: 1023px) { .navsearch__panel { position: fixed; left: 1rem; right: 1rem; top: calc(var(--nav-h) + .5rem); width: auto; } }

/* Coupon: one capsule, code in, Apply on the right ------------------------------------- */
.wc-block-components-totals-coupon .wc-block-components-panel__button { font-family: var(--font-mono) !important; font-size: .6875rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3) !important; padding: .9rem 0 !important; }
.wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color: var(--fg) !important; }
.wc-block-components-totals-coupon .wc-block-components-panel__button-icon { width: 18px; height: 18px; opacity: .6; }
.wc-block-components-totals-coupon .wc-block-components-panel__content { padding: 0 0 1rem !important; }
.wc-block-components-totals-coupon__content { padding: 0 !important; }
.wc-block-components-totals-coupon__form { display: flex !important; align-items: center; gap: .35rem; padding: .3rem .3rem .3rem 0; border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--air); transition: border-color .25s, box-shadow .25s; }
.wc-block-components-totals-coupon__form:focus-within { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(var(--fg-rgb), .06); }
.wc-block-components-totals-coupon__input { flex: 1; margin: 0 !important; position: relative; }
.wc-block-components-totals-coupon__input input { height: 2.75rem !important; padding: 0 1.25rem !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-family: var(--font-mono) !important; font-size: .8125rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--fg) !important; outline: none !important; }
.wc-block-components-totals-coupon__input label { position: absolute; left: 1.25rem; top: 50% !important; transform: translateY(-50%) !important; margin: 0; font-family: var(--font-mono) !important; font-size: .6875rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3) !important; pointer-events: none; transition: opacity .2s; }
.wc-block-components-totals-coupon__input input:not([value=""]) + label { opacity: 0; }
.wc-block-components-totals-coupon__button { height: 2.75rem !important; min-height: 0 !important; padding: 0 1.25rem !important; border-radius: 999px !important; font-size: .8125rem !important; font-weight: 600 !important; margin: 0 !important; flex: none; }
.wc-block-components-totals-coupon__button[disabled], .wc-block-components-totals-coupon__button[aria-disabled="true"] { opacity: .35 !important; background: var(--fg) !important; color: var(--surface-0) !important; }
.wc-block-components-totals-coupon .wc-block-components-validation-error { margin: .5rem 0 0; }
.wc-block-components-totals-coupon .wc-block-components-validation-error p { font-size: .8125rem; }
/* an applied code: a chip on the discount line */
.wc-block-components-totals-discount .wc-block-components-chip, .wc-block-components-totals-discount__coupon-list .wc-block-components-chip { border-radius: 999px !important; background: var(--fg) !important; color: var(--surface-0) !important; border: 0 !important; font-family: var(--font-mono) !important; font-size: .6875rem !important; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .5rem .35rem .8rem !important; }
.wc-block-components-totals-discount .wc-block-components-chip__remove { color: var(--surface-0) !important; opacity: .7; }
.wc-block-components-totals-discount .wc-block-components-chip__remove:hover { opacity: 1; }
.wc-block-components-totals-discount .wc-block-components-totals-item__label { font-size: .9375rem; }
.wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--brass); font-weight: 600; }

/* Newsletter: Join as a pill, like every other button */
.signal__join { height: 3rem; padding: 0 1.75rem; font-size: .9375rem; box-shadow: none; flex: none; }
.signal__join--sm { height: 2.625rem; padding: 0 1.4rem; font-size: .875rem; }

/* Hover effects (chosen 2026-09-28) ------------------------------------------------------------
   Mini cart: a plain scale-up (the spring was dropped 2026-10-05).  Buy / Try: Shine.  Join: Check. */
.minicart .woocommerce-mini-cart__buttons .btn, .minicart .minicart__cta { box-shadow: none !important; transition: transform .3s var(--ease-soft), background-color .3s, color .3s, border-color .3s; }
.minicart .woocommerce-mini-cart__buttons .btn:hover, .minicart .minicart__cta:hover { transform: scale(1.03); box-shadow: none !important; }
.minicart .woocommerce-mini-cart__buttons .btn.btn-outline:hover, .minicart .minicart__cta:hover { background: transparent; }

.buyform .btn-pill { position: relative; overflow: hidden; isolation: isolate; }
.buyform .btn-pill::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); opacity: 0; pointer-events: none; }
.buyform .btn-pill.btn-outline::after { background: linear-gradient(90deg, transparent, rgba(var(--brass-rgb), .3), transparent); }
.buyform .btn-pill:hover::after { animation: st-shine 1s var(--ease-out-expo) forwards; }
.buyform .btn-pill.btn-primary:hover { transform: none; box-shadow: 0 14px 30px -12px rgba(var(--fg-rgb), .55); }
.buyform .btn-pill.btn-outline:hover { background: transparent; }
@keyframes st-shine { 0% { opacity: 1; transform: skewX(-20deg) translateX(0); } 100% { opacity: 1; transform: skewX(-20deg) translateX(430%); } }

.signal__join { gap: .4rem; }
.btn-pill.btn-outline.signal__join:hover { background: transparent; box-shadow: none; }
.signal__join .ck { width: 0; overflow: hidden; display: inline-flex; transition: width .4s var(--ease-out-expo); }
.signal__join .ck svg { width: 16px; height: 16px; flex: none; }
.signal__join .ck path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s .15s var(--ease-out-expo); }
.signal__join:hover .ck, .signal__join:focus-visible .ck { width: 16px; }
.signal__join:hover .ck path, .signal__join:focus-visible .ck path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .buyform .btn-pill:hover::after { animation: none; } .minicart .woocommerce-mini-cart__buttons .btn:hover { transform: none; } }

/* Sounds player (design 4A): tabs, the measured spectra, what changed, one transport row -------- */
.sp { background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 22px; overflow: hidden; }
.sp__tabs { display: flex; gap: 1.75rem; padding: 1.35rem 1.9rem 0; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
.sp__tabs::-webkit-scrollbar { display: none; }
.sp__tab { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); padding: 0 0 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .25s, border-color .25s; }
.sp__tab span { margin-right: .7em; }
.sp__tab:hover { color: var(--fg-2); }
.sp__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.sp__chart { position: relative; padding: 1.6rem 1.9rem 0; }
.sp__legend { position: absolute; right: 2.1rem; top: 1.7rem; display: flex; gap: 1.1rem; font-size: .8125rem; color: var(--fg-3); z-index: 1; }
.sp__legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: .4rem; }
.sp__legend i.b { background: rgba(var(--fg-rgb), .45); } .sp__legend i.a { background: var(--lamp); }
.sp__main { display: block; width: 100%; height: clamp(170px, 20vw, 240px); }
.sp__label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin: 1rem 0 .4rem; }
.sp__diff { display: block; width: 100%; height: 64px; }
.sp__axis { position: relative; height: 1.1rem; margin-top: .5rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; color: var(--fg-3); }
.sp__axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sp__axis span:first-child { transform: none; } .sp__axis span:last-child { transform: translateX(-100%); }
.sp__bar { display: flex; align-items: center; gap: 1.4rem; padding: 1.5rem 1.9rem 1.7rem; flex-wrap: wrap; }
.sp__play { position: relative; flex: none; width: 4rem; height: 4rem; border-radius: 50%; background: var(--fg); color: var(--surface-0); display: grid; place-items: center; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.sp__play:hover { transform: scale(1.05); } .sp__play:active { transform: scale(.95); transition-duration: .1s; }
.sp__play svg { grid-area: 1 / 1; } .sp__play .play { margin-left: 3px; }
.sp__play .pause { display: none; } .sp__play[aria-pressed="true"] .play { display: none; } .sp__play[aria-pressed="true"] .pause { display: block; }
.sp__play .spin { grid-area: 1 / 1; display: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(var(--surface-rgb), .35); border-top-color: var(--surface-0); animation: spin 1s linear infinite; }
.sp__play.is-loading .spin { display: block; } .sp__play.is-loading .play, .sp__play.is-loading .pause { display: none; }
.sp__info { flex: 1; min-width: 14rem; }
.sp__title { margin: 0; font-size: 1.0625rem; color: var(--fg); } .sp__title b { font-weight: 600; } .sp__title > span { color: var(--fg-3); font-size: .875rem; }
.sp__progress { display: block; }
.sp__seek { --p: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 18px; margin: .45rem 0 0; background: transparent; cursor: pointer; }
.sp__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--fg) var(--p), rgba(var(--fg-rgb), .12) var(--p)); }
.sp__seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(var(--fg-rgb), .12); }
.sp__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fg); }
.sp__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--fg); border: 0; opacity: 0; transition: opacity .2s; }
.sp__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--fg); border: 0; opacity: 0; }
.sp__seek:hover::-webkit-slider-thumb, .sp__seek:focus-visible::-webkit-slider-thumb { opacity: 1; } .sp__seek:hover::-moz-range-thumb { opacity: 1; }
.sp__time { font-family: var(--font-mono); font-size: .75rem; color: var(--fg-3); white-space: nowrap; }
.sp__ab { display: inline-flex; padding: 3px; border: 1px solid var(--hairline-strong); border-radius: 999px; background: rgba(var(--fg-rgb), .03); }
.sp__ab button { height: 2.4rem; padding: 0 1.2rem; border-radius: 999px; font-family: var(--font-sans); font-size: .875rem; font-weight: 500; color: var(--fg-2); transition: background-color .25s, color .25s; }
.sp__ab button.is-active { background: var(--fg); color: var(--surface-0); }
.sp .ab__error { margin: 0 1.9rem 1.5rem; }
.sp .ab__error.is-visible { display: block; }
@media (max-width: 640px) {
  .sp__tabs, .sp__chart, .sp__bar { padding-left: 1.1rem; padding-right: 1.1rem; }
  .sp__legend { position: static; margin-bottom: .6rem; }
  .sp__axis span:nth-child(even) { display: none; }
}

/* live badge: shows while the player runs */
.sp__live { display: none; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lamp); }
.sp__live em { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 0 rgba(var(--lamp-rgb), .5); animation: sp-live 1.6s ease-out infinite; }
.sp.is-live .sp__live { display: inline-flex; }
@keyframes sp-live { 0% { box-shadow: 0 0 0 0 rgba(var(--lamp-rgb), .5); } 100% { box-shadow: 0 0 0 8px rgba(var(--lamp-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .sp__live em { animation: none; } }

/* Sounds tabs: eight names fit a desktop card; a narrower one scrolls, with the active tab in view */
.sp__tabs { gap: 1.35rem; }
.sp__tab { font-size: .6875rem; letter-spacing: .15em; }
.sp__tab span { margin-right: .55em; color: var(--brass); }
@media (max-width: 1100px) { .sp__tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); padding-right: 2.5rem; } }

/* My account ---------------------------------------------------------------------------------
   Every page: the dark card, then light cards and hairline rows (the Points page's language). */
@media (min-width: 900px) {
  .woocommerce-account.logged-in .wc-body > .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.75rem; align-items: start; }  /* only with the navigation column: guests and the set-password page have none */
  .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--nav-h) + 1.5rem); margin: 0; }
}
.woocommerce-account .wc-body > .woocommerce::before, .woocommerce-account .wc-body > .woocommerce::after { display: none; }
.woocommerce-account .woocommerce-MyAccount-content { display: grid; gap: 1.4rem; align-content: start; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty { display: none; }
@media (max-width: 899px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; margin: 0 calc(var(--gutter) * -1) 1.5rem; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; gap: .35rem; width: max-content; }
  .woocommerce-account .woocommerce-MyAccount-navigation a { border: 1px solid var(--hairline-strong); white-space: nowrap; }
  .woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--fg); color: var(--surface-0); border-color: var(--fg); }
  .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
}

.ac-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; padding: 1.7rem 1.8rem; border-radius: 20px; background: var(--fg); color: var(--surface-0); }
.ac-hero__label { margin: 0; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.ac-hero__num { margin: .35rem 0 .2rem; line-height: 1.02; }
.ac-hero__num b { font-family: var(--font-display); font-stretch: 96%; font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.04em; color: #ff9d2e; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ac-hero__num span { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.94); margin-left: .35rem; }
.ac-hero__sub { margin: 0; font-size: .9rem; color: rgba(255,255,255,.94); max-width: 44rem; }
.ac-hero .ac-hero__cta { color: #fff; border-color: rgba(255,255,255,.8); height: 2.75rem; padding: 0 1.4rem; font-size: .9rem; }
.ac-hero .ac-hero__cta:hover { background: rgba(255,255,255,.14); }

.ac { display: grid; gap: 1.4rem; min-width: 0; }
.ac-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; counter-reset: ac; }
.ac-cards > li { counter-increment: ac; border-radius: 16px; background: var(--air); border: 1px solid var(--hairline); display: flex; flex-direction: column; }
.ac-cards > li { padding: 1.05rem 1.15rem 1.15rem; gap: .2rem; }
.ac-cards--links > li { padding: 0; }
.ac-cards--links > li > a { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; border-radius: inherit; transition: transform .45s cubic-bezier(.34,1.56,.64,1), background-color .25s; }
.ac-cards--links > li > a:hover { background: #fff; transform: translateY(-2px); }
.ac-cards__t::before { content: "0" counter(ac); display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; color: var(--brass); margin-bottom: .45rem; font-weight: 400; }
.ac-cards__t { font-weight: 600; font-size: .98rem; color: var(--fg); }
.ac-cards__n { font-size: .85rem; color: var(--fg-3); margin: .15rem 0 .1rem; }
.ac-cards__n b { font-family: var(--font-display); font-stretch: 96%; font-weight: 600; font-size: 2rem; letter-spacing: -.03em; color: var(--fg); margin-right: .15rem; font-variant-numeric: tabular-nums; }
.ac-cards__note { font-size: .85rem; color: var(--fg-2); line-height: 1.5; }
.ac-cards--addr { grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.ac-cards--addr address { font-style: normal; font-size: .95rem; line-height: 1.6; color: var(--fg); margin: .2rem 0 .3rem; }
.ac-cards--addr .ac-link { margin-top: .6rem; align-self: flex-start; }
.ac-link { font-size: .85rem; font-weight: 500; color: var(--fg); text-decoration: underline; text-underline-offset: .22em; }
.ac-link:hover { color: var(--brass); }
.ac-link.delete { color: var(--fg-3); }

.woocommerce-account .ac-list h3, .ac-list h3 { margin: 0 0 .3rem; font-family: var(--font-mono); font-stretch: normal; font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.ac-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--hairline); font-size: .9rem; color: var(--fg); }
a.ac-row { border-radius: 0; }
.ac-row__date { color: var(--fg-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.ac-row__what b { display: block; font-weight: 600; }
.ac-row__what small { display: block; color: var(--fg-3); font-size: .8rem; margin-top: .1rem; }
.ac-row__what p { margin: 0; }
.ac-row__total { font-family: var(--font-mono); font-size: .85rem; font-variant-numeric: tabular-nums; text-align: right; min-width: 5rem; }
.ac-row__total del { color: var(--fg-3); margin-right: .3rem; }
.ac-row__total ins { text-decoration: none; }
.ac-row__go { font-size: .8rem; font-weight: 500; border: 1px solid var(--hairline-strong); border-radius: 999px; padding: .35rem .9rem; }
a.ac-row:hover .ac-row__go { background: var(--fg); color: var(--surface-0); border-color: var(--fg); }
.ac-row__actions { display: flex; gap: 1rem; grid-column: 3 / -1; justify-self: end; }
.ac-row--note { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; }
.ac-none { margin: .6rem 0 0; color: var(--fg-3); font-size: .9rem; }
.ac-pill { display: inline-flex; align-items: center; height: 1.6rem; padding: 0 .65rem; border-radius: 999px; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ac-pill--ok { background: rgba(var(--lamp-rgb), .14); color: #8a4609; }
.ac-pill--wait { background: rgba(var(--fg-rgb), .07); color: var(--fg-2); }
.ac-pill--off { border: 1px solid var(--hairline-strong); color: var(--fg-3); }
.ac-pages { display: flex; gap: .6rem; }
.ac-pages .btn { height: 2.6rem; padding: 0 1.2rem; font-size: .875rem; }
.ac-empty { border: 1px solid var(--hairline); border-radius: 16px; background: var(--air); padding: 1.4rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.ac-empty p { margin: 0; font-size: .95rem; color: var(--fg-2); max-width: 34rem; }
.ac-empty .btn { height: 2.9rem; padding: 0 1.4rem; font-size: .9rem; }

/* a licence */
.ac-dl { border: 1px solid var(--hairline-strong); border-radius: 20px; background: var(--air); padding: 1.6rem 1.7rem 1.7rem; display: grid; gap: 1.3rem; box-shadow: 0 40px 80px -50px var(--shadow-strong); }
.ac-dl__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.woocommerce-account .ac-dl h3, .ac-dl h3 { margin: 0; font-family: var(--font-display); font-stretch: 96%; font-weight: 600; font-size: 1.7rem; letter-spacing: -.03em; text-transform: none; color: var(--fg); }
.ac-dl__head p { margin: .2rem 0 0; font-size: .85rem; color: var(--fg-3); }
.ac-dl__order { font-size: .85rem; color: var(--fg); text-decoration: underline; text-underline-offset: .22em; white-space: nowrap; }
.ac-dl__get { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.ac-dl__get .btn { height: 3.25rem; padding: 0 1.5rem; font-size: .95rem; gap: .55rem; }
.ac-dl__get .btn-primary { box-shadow: none; }
.ac-dl__note { flex-basis: 100%; margin: .1rem 0 0; font-size: .8rem; color: var(--fg-3); }
.ac-dl__lic { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.ac-dl__lic > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--hairline); }
.ac-dl__lic dt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); padding-top: .2rem; }
.ac-dl__lic dd { margin: 0; display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; min-width: 0; }
.ac-dl__lic code { font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6; color: var(--fg); background: none; padding: 0; overflow-wrap: anywhere; }
.ac-dl__wait { font-size: .875rem; color: var(--fg-3); }
.ac-copy { flex: none; height: 2rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--hairline-strong); font-size: .78rem; font-weight: 500; color: var(--fg); transition: background-color .2s, color .2s, border-color .2s; }
.ac-copy:hover, .ac-copy.is-done { background: var(--fg); color: var(--surface-0); border-color: var(--fg); }
.ac-cards--steps > li { background: var(--surface-0); }

/* forms: account details, address */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account, .woocommerce-account .woocommerce-MyAccount-content > form:not(.edit-account) { border: 1px solid var(--hairline); border-radius: 20px; background: var(--air); padding: 1.6rem 1.7rem 1.8rem; }
.woocommerce-account .woocommerce-MyAccount-content form h2, .woocommerce-account .woocommerce-MyAccount-content form h3, .woocommerce-account .woocommerce-MyAccount-content form legend { font-family: var(--font-mono); font-stretch: normal; font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 1rem; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-content form fieldset { border: 0; border-top: 1px solid var(--hairline); margin: 1.6rem 0 0; padding: 1.4rem 0 0; }
.woocommerce-account .woocommerce-MyAccount-content form .form-row { margin: 0 0 1.1rem; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-content form .form-row-first, .woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: calc(50% - .6rem); }
.woocommerce-account .woocommerce-MyAccount-content form .form-row input.input-text, .woocommerce-account .woocommerce-MyAccount-content form select, .woocommerce-account .woocommerce-MyAccount-content form .select2-selection { font-family: var(--font-sans); font-size: .95rem; }
.woocommerce-account .woocommerce-MyAccount-content form .select2-container .select2-selection--single { height: auto; border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; background: transparent; padding: .45rem 0; }
.woocommerce-account .woocommerce-MyAccount-content form em, .woocommerce-account .woocommerce-MyAccount-content form .description { display: block; font-style: normal; font-size: .8rem; color: var(--fg-3); margin-top: .35rem; }
.woocommerce-account .woocommerce-MyAccount-content form .password-input { display: block; }
.woocommerce-account .woocommerce-MyAccount-content form button.button { margin-top: .6rem; }
.woocommerce-account .woocommerce-MyAccount-content > form > h2:first-child, .woocommerce-account .woocommerce-MyAccount-content > form > h3:first-child { display: none; }

/* one order */
.ac--order .woocommerce-order-details, .ac--order .woocommerce-customer-details { margin: 0; }
.woocommerce-account .ac--order h2 { font-family: var(--font-mono); font-stretch: normal; font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 .3rem; }
.woocommerce-account .ac--order table.shop_table { margin: 0 0 1.4rem; border: 0; border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: .9rem; }
.woocommerce-account .ac--order table.shop_table thead { display: none; }
.woocommerce-account .ac--order table.shop_table td, .woocommerce-account .ac--order table.shop_table th { padding: .85rem 0; border: 0; border-bottom: 1px solid var(--hairline); font-weight: 400; text-align: left; vertical-align: top; }
.woocommerce-account .ac--order table.shop_table td:last-child { text-align: right; font-family: var(--font-mono); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.woocommerce-account .ac--order table.shop_table tbody td.product-name { font-weight: 600; }
.woocommerce-account .ac--order table.shop_table tbody td.product-name a { color: inherit; }
.woocommerce-account .ac--order table.shop_table .wc-item-meta { list-style: none; margin: .25rem 0 0; padding: 0; font-weight: 400; font-size: .8rem; color: var(--fg-3); }
.woocommerce-account .ac--order table.shop_table .wc-item-meta p { display: inline; margin: 0; }
.woocommerce-account .ac--order table.shop_table tfoot th { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.woocommerce-account .ac--order table.shop_table tfoot tr:last-child th, .woocommerce-account .ac--order table.shop_table tfoot tr:last-child td { border-bottom: 0; }
.woocommerce-account .ac--order table.shop_table tfoot tr:last-child td { font-family: var(--font-display); font-stretch: 96%; font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; color: var(--fg); }
.woocommerce-account .ac--order .saltstrom-licence { border-radius: 20px; padding: 1.5rem 1.6rem; margin: 0 0 1.4rem; background: var(--air); box-shadow: none; }
.woocommerce-account .ac--order .woocommerce-customer-details address { border: 1px solid var(--hairline); border-radius: 16px; background: var(--air); padding: 1.05rem 1.15rem; font-style: normal; font-size: .95rem; line-height: 1.6; }
.woocommerce-account .ac--order .woocommerce-customer-details address p { margin: .3rem 0 0; color: var(--fg-3); font-size: .85rem; }

/* notices inside the account: the site card (see "Notices") */
.woocommerce-account .woocommerce-MyAccount-content .sn { margin: 0; }

@media (max-width: 760px) {
  .ac-cards { grid-template-columns: 1fr; }
  .ac-row { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; }
  .ac-row__date { grid-column: 1 / -1; }
  .ac-row__go { display: none; }
  .ac-row__total { grid-column: 1 / -1; text-align: left; }
  .ac-dl { padding: 1.3rem 1.2rem; }
  .ac-dl__lic > div { grid-template-columns: 1fr; gap: .3rem; }
  .ac-dl__get .btn { width: 100%; }
  .woocommerce-account .woocommerce-MyAccount-content form .form-row-first, .woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: 100%; float: none; }
}

.ac-hero > div { flex: 1 1 18rem; min-width: 0; }
.ac-hero .ac-hero__cta { flex: none; }
.woocommerce-account .ac .ac-cards, .woocommerce-account .ac .ac-cards > li { list-style: none; }
.woocommerce-account .ac .ac-cards > li { border-radius: 16px; margin: 0; }
/* the licence block on an order page: same card, quieter */
.woocommerce-account .ac--order .saltstrom-licence p { font-size: .9rem !important; }
.woocommerce-account .ac--order .saltstrom-licence p:first-child { font-family: var(--font-mono); font-size: .7rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); font-weight: 500 !important; }
.woocommerce-account .ac--order .saltstrom-licence a { text-decoration: underline; text-underline-offset: .22em; }
.woocommerce-account .ac--order table.shop_table tfoot tr:last-child th { vertical-align: bottom; padding-bottom: 1.05rem; }

/* About ------------------------------------------------------------------ */
.ab-head { text-align: center; padding-bottom: 0 !important; }
.ab-head .eyebrow { justify-content: center; }
.ab-head .eyebrow .rule { display: none; }
.ab-head__title { font-size: clamp(2.75rem, 7.4vw, 8rem); margin-top: 2rem; }
@media (min-width: 768px) { .ab-head__title .serif-italic { display: block; } }
.ab-art { margin: 0 auto; max-width: 1180px; padding: clamp(4.5rem, 9vw, 9rem) 0 clamp(4.5rem, 9vw, 9rem); }
.ab-art img { width: 100%; height: auto; filter: drop-shadow(0 0 38px rgba(48, 38, 20, .24)) drop-shadow(0 0 9px rgba(48, 38, 20, .16)) drop-shadow(16px 30px 34px rgba(48, 38, 20, .26)); }
.ab-body { overflow: clip; }
.ab-cols { display: grid; gap: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--hairline-strong); }
.ab-cols__title { font-size: clamp(2.25rem, 4.4vw, 4.5rem); }
.ab-cols__lead .lede { margin-top: 1.5rem; max-width: 26rem; }
.ab-cols__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.ab-tl { list-style: none; margin: 0; padding: 0 0 0 3rem; position: relative; }
.ab-tl li:not(:last-child)::after { content: ""; position: absolute; left: calc(-3rem + 5px); top: .15rem; bottom: -.15rem; width: 1px; background: rgba(var(--fg-rgb), .3); }
.ab-tl li { position: relative; padding-bottom: 3rem; }
.ab-tl li:last-child { padding-bottom: 0; }
.ab-tl li::before { content: ""; position: absolute; left: -3rem; top: .15rem; width: 11px; height: 11px; border-radius: 50%; background: var(--fg); }
.ab-tl li:last-child::before { background: var(--lamp); box-shadow: 0 0 0 5px rgba(var(--lamp-rgb), .18), 0 0 18px rgba(var(--lamp-rgb), .6); }
.ab-tl__k { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.ab-tl__t { font-size: clamp(1.5rem, 2.4vw, 2.25rem); margin: .6rem 0 1rem; }
.ab-tl p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 1024px) { .ab-cols { grid-template-columns: 5fr 7fr; gap: 4rem; } .ab-cols__lead { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; } }
@media (max-width: 767px) { .ab-art img { filter: drop-shadow(0 0 16px rgba(48, 38, 20, .26)) drop-shadow(6px 12px 14px rgba(48, 38, 20, .26)); } .ab-tl { padding-left: 2.25rem; } .ab-tl li::before { left: -2.25rem; } .ab-tl li:not(:last-child)::after { left: calc(-2.25rem + 5px); } }

/* Contact ---------------------------------------------------------------- */
.ct-cards { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .ct-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ct-cards { grid-template-columns: repeat(4, 1fr); } }
.ct-card { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem 1.75rem 2.25rem; background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 20px; box-shadow: 0 40px 80px -40px var(--shadow-strong); cursor: pointer; transition: background .25s, color .25s, border-color .25s, translate .25s, opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo); }
.ct-card:hover { border-color: rgba(var(--fg-rgb), .5); }
.ct-ic { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid var(--hairline-strong); display: grid; place-items: center; flex: none; transition: border-color .25s; }
.ct-card__t { font-size: 1.5rem; margin: 1.75rem 0 .8rem; }
.ct-card__p { font-size: .9375rem; line-height: 1.6; color: var(--fg-2); transition: color .25s; }
.ct-card__p a { text-decoration: underline; text-underline-offset: .2em; }
.ct-card.is-on, .ct-card:has(input:checked) { background: var(--fg); color: var(--surface-0); border-color: var(--fg); translate: 0 -4px; }
.ct-card.is-on .ct-card__p, .ct-card:has(input:checked) .ct-card__p { color: rgba(var(--surface-rgb), .78); }
.ct-card.is-on .ct-ic, .ct-card:has(input:checked) .ct-ic { border-color: rgba(var(--surface-rgb), .3); }
.ct-card:has(input:focus-visible) { outline: 1px solid rgba(var(--fg-rgb), .7); outline-offset: 3px; }
.ct-below { display: grid; gap: 3rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--hairline-strong); scroll-margin-top: calc(var(--nav-h) + 1rem); }
@media (min-width: 1024px) { .ct-below { grid-template-columns: 4fr 7fr; gap: 4rem; } }
.ct-soc { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
.ct-soc__a { display: inline-flex; align-items: center; gap: 1rem; font-weight: 500; }
.ct-soc__a .ct-ic { transition: background .25s, color .25s, border-color .25s; }
a.ct-soc__a:hover .ct-ic { background: var(--fg); color: var(--surface-0); border-color: var(--fg); }
.ct-soc__a.is-off { color: var(--fg-3); }
.ct-form { display: grid; gap: 1.6rem; }
.ct-form label { display: block; }
.ct-two { display: grid; gap: 1.6rem; }
@media (min-width: 640px) { .ct-two { grid-template-columns: 1fr 1fr; } }
.ct-form textarea.input { height: 8.5rem; padding-top: .9rem; line-height: 1.6; resize: vertical; }
.ct-order[hidden] { display: none; }
.ct-opt { text-transform: none; letter-spacing: .04em; opacity: .75; margin-left: .5rem; }
.ct-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form .btn { justify-self: start; }

/* Footer: social icons and the newsletter line */
.footer__soc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.footer__soc-a { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--hairline-strong); display: grid; place-items: center; color: var(--fg); transition: background .25s, color .25s, border-color .25s; }
.footer__soc-a svg { width: 19px; height: 19px; }
a.footer__soc-a:hover { background: var(--fg); color: var(--surface-0); border-color: var(--fg); }
.footer__soc-a.is-off { color: var(--fg-3); }
/* The network's name under the icon, the moment the pointer arrives (no native-tooltip delay) */
.footer__soc li { position: relative; }
.footer__soc-a[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + .45rem); transform: translate(-50%, -4px); padding: .3rem .6rem; border-radius: 999px; background: var(--fg); color: var(--surface-0); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 2; }
.footer__soc-a[data-tip]:hover::after, .footer__soc-a[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.footer__join { display: flex; flex-direction: column; gap: 1rem; }
.footer__brand .footer__join p { max-width: 22rem; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.footer__brand .footer__join .signal__msg { margin-top: .75rem; font-size: .75rem; color: var(--fg-3); }

/* My account: add a card (WooCommerce's lilac box, redrawn as an account card) */
.woocommerce-account #add_payment_method #payment { background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 40px 80px -40px var(--shadow-strong); }
.woocommerce-account #add_payment_method #payment ul.payment_methods { list-style: none; margin: 0; padding: 0 0 1.75rem; border-bottom: 1px solid var(--hairline); }
.woocommerce-account #add_payment_method #payment ul.payment_methods li { margin: 0; line-height: 1.5; }
.woocommerce-account #add_payment_method #payment ul.payment_methods li + li { margin-top: 1.25rem; }
.woocommerce-account #add_payment_method #payment ul.payment_methods li input.input-radio { margin: 0 .7rem 0 0; accent-color: var(--fg); vertical-align: middle; }
.woocommerce-account #add_payment_method #payment ul.payment_methods li > label { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); vertical-align: middle; }
.woocommerce-account #add_payment_method #payment ul.payment_methods li > label img { height: 1.375rem; width: auto; margin: 0; float: none; }
.woocommerce-account #add_payment_method #payment div.payment_box { background: transparent; color: var(--fg-2); padding: 0; margin: 1.5rem 0 0; border-radius: 0; font-size: .9375rem; line-height: 1.6; }
.woocommerce-account #add_payment_method #payment div.payment_box::before { display: none; }
.woocommerce-account #add_payment_method #payment div.payment_box fieldset { border: 0; padding: 0 !important; margin: 0; }
.woocommerce-account #add_payment_method #payment div.payment_box .form-row { padding: 0; margin: 1.5rem 0 0; }
.woocommerce-account #add_payment_method #payment .woocommerce-SavedPaymentMethods-saveNew { display: flex; align-items: center; gap: .6rem; }
.woocommerce-account #add_payment_method #payment .woocommerce-SavedPaymentMethods-saveNew input { accent-color: var(--fg); margin: 0; }
.woocommerce-account #add_payment_method #payment .woocommerce-SavedPaymentMethods-saveNew label { font-family: var(--font-sans); font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.woocommerce-account #add_payment_method #payment > div.form-row { padding: 1.75rem 0 0; margin: 0; }
.woocommerce-account #add_payment_method #payment #place_order { float: none; }


/* Checkout ----------------------------------------------------------------
   Form on the left in cards, the order on a tinted panel on the right. */
.co { position: relative; padding-bottom: var(--section-y); }
.co__head { padding: calc(var(--nav-h) + 3rem) var(--gutter) 2.5rem; }
.co__head h1 { font-size: clamp(2.75rem, 5.4vw, 5.5rem); margin-top: 1.75rem; }
.co__body { padding: 0 var(--gutter); }

/* Steps as cards */
.co .wc-block-checkout__form { counter-reset: co; }
.co fieldset.wc-block-components-checkout-step { counter-increment: co; background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 20px; box-shadow: 0 40px 80px -40px var(--shadow-strong); padding: clamp(1.5rem, 3vw, 2.5rem) !important; margin: 0 0 1.25rem !important; }
.co fieldset.wc-block-components-checkout-step::before, .co fieldset.wc-block-components-checkout-step::after { display: none !important; }
.co .wc-block-components-checkout-step__container { padding: 0 !important; }
.co .wc-block-components-checkout-step__container::after { display: none !important; }
.co .wc-block-components-checkout-step__heading-container { margin: 0 0 .5rem; }
.co .wc-block-components-checkout-step__heading { display: flex; align-items: baseline; gap: 1rem; width: 100%; margin: 0 !important; }
.co .wc-block-components-checkout-step__heading .wc-block-components-title { flex: 1; font-size: 1.75rem !important; margin: 0 !important; }
.co fieldset.wc-block-components-checkout-step .wc-block-components-checkout-step__heading::after { content: counter(co, decimal-leading-zero); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--brass); order: 3; }
.co .wc-block-components-checkout-step__heading-content { font-size: .8125rem; }
.co .wc-block-components-checkout-step__heading-content a { text-decoration: underline; text-underline-offset: .2em; }
/* Contact step: "Log in" as a pill next to the title, the guest line small, "Create an account" as a switch card */
.co .wc-block-checkout__contact-fields .wc-block-components-checkout-step__heading { flex-wrap: wrap; }
.co .wc-block-checkout__contact-fields .wc-block-components-checkout-step__heading .wc-block-components-title { flex: 1 1 0; min-width: 0; }
.co fieldset.wc-block-checkout__contact-fields .wc-block-components-checkout-step__heading::after { flex: none; order: 1; }
.co .wc-block-checkout__contact-fields .wc-block-components-checkout-step__heading-content { display: none !important; }  /* the link is re-placed under the guest line by checkout.js */
.co a.wc-block-checkout__login-prompt, .co a.co-login { display: inline-flex; align-items: center; gap: 0; height: 2.375rem; padding: 0 1.1rem; border: 1.5px solid var(--fg); border-radius: 999px; color: var(--fg); font-family: var(--font-sans); font-size: .8125rem; font-weight: 600; text-decoration: none !important; transition: background-color .25s, color .25s; }
.co a.wc-block-checkout__login-prompt::before, .co a.co-login::before { content: ""; width: 14px; height: 14px; margin-right: .5rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c0-3.6 3.6-6 8-6s8 2.4 8 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c0-3.6 3.6-6 8-6s8 2.4 8 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.co a.wc-block-checkout__login-prompt::after, .co a.co-login::after { content: "to your account"; margin-left: .3em; font-weight: 500; color: var(--fg-2); }
.co a.wc-block-checkout__login-prompt:hover, .co a.co-login:hover { background: var(--fg); color: var(--surface-0); }
.co a.wc-block-checkout__login-prompt:hover::after, .co a.co-login:hover::after { color: rgba(243, 239, 230, .75); }
.co .wc-block-checkout__guest-checkout-notice, .co .wc-block-checkout__contact-fields .wc-block-components-checkout-step__content > p { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin: 1rem 0 0; }
.co a.co-login { margin: 1rem 0 0; }
.co .wc-block-components-address-form .wc-block-components-checkbox.wc-block-checkout__create-account { margin-top: 1rem !important; }
.co .wc-block-checkout__create-account { margin-top: 1rem !important; border: 1px solid var(--hairline-strong); border-radius: 14px; background: var(--surface-1); transition: border-color .25s, background-color .25s; }
.co .wc-block-checkout__create-account:has(input:checked) { border-color: var(--fg); background: var(--air); }
.co .wc-block-checkout__create-account label { display: flex !important; align-items: center; gap: 1rem; padding: 1rem 1.1rem; cursor: pointer; margin: 0; }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__mark { display: none !important; }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 2.75rem !important; height: 1.625rem !important; margin: 0 !important; border-radius: 999px !important; border: 0 !important; background: rgba(var(--fg-rgb), .18) !important; position: relative; cursor: pointer; transition: background-color .25s; order: 2; margin-left: auto !important; }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__input[type="checkbox"]::before { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.225rem; height: 1.225rem; border-radius: 50%; background: var(--air); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease-soft); }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--fg) !important; }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__input[type="checkbox"]:checked::before { transform: translateX(1.125rem); }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__input[type="checkbox"]::after { display: none !important; }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__label { flex: 1; font-size: .9375rem !important; font-weight: 600; color: var(--fg) !important; line-height: 1.35; }
.co .wc-block-checkout__create-account .wc-block-components-checkbox__label::after { content: "Keys, installers and points in one place. No extra form."; display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 400; color: var(--fg-3); }
.co .wc-block-components-checkout-step__description { font-size: .875rem; color: var(--fg-3); margin: 0 0 .5rem; }
.co .wc-block-components-checkout-step__content > :last-child { margin-bottom: 0; }

/* Underlined fields, label always above (as in the account forms) */
.co .wc-block-checkout__form .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input), .co .wc-block-checkout__form .wc-blocks-components-select { margin-top: 1.4rem !important; }
.co .wc-block-checkout__form .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input) input, .co .wc-block-checkout__form .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input).is-active input, .co .wc-block-checkout__form .wc-blocks-components-select .wc-blocks-components-select__select {
  height: 3.6rem !important; min-height: 0 !important; padding: 1.5rem .25rem .25rem !important; border: 0 !important; border-bottom: 1px solid var(--hairline-strong) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; font-family: var(--font-mono) !important; font-size: .875rem !important; letter-spacing: .04em; line-height: 1.4 !important; color: var(--fg) !important; }
.co .wc-block-checkout__form .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input) input:focus, .co .wc-block-checkout__form .wc-blocks-components-select .wc-blocks-components-select__select:focus { border-bottom-color: var(--fg) !important; }
.co .wc-block-checkout__form .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input) label, .co .wc-block-checkout__form .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input).is-active label, .co .wc-block-checkout__form .wc-blocks-components-select .wc-blocks-components-select__label {
  left: .25rem !important; top: 0 !important; transform: none !important; max-width: none !important; margin: 0 !important; font-family: var(--font-mono) !important; font-size: .6875rem !important; letter-spacing: .18em !important; line-height: 1.3 !important; text-transform: uppercase; color: var(--fg-3) !important; }
.co .wc-blocks-components-select .wc-blocks-components-select__container { height: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.co .wc-blocks-components-select .wc-blocks-components-select__expand { right: .25rem !important; top: auto !important; bottom: .9rem; }
.co .wc-block-checkout__form .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input).has-error input { border-bottom-color: #b3261e !important; }
.co .wc-block-components-address-form__address_2-toggle, .co .wc-block-components-address-form__address_2-toggle:hover { font-size: .8125rem; color: var(--fg-3); margin-top: .9rem; }
.co .wc-block-components-checkbox { margin-top: 1.25rem !important; }
.co .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border-radius: 4px; border-color: var(--hairline-strong); background: transparent; }
.co .wc-block-components-checkbox .wc-block-components-checkbox__label { font-size: .9375rem; color: var(--fg-2); }
.co .wc-block-checkout__guest-checkout-notice, .co .wc-block-components-address-form + p { font-size: .8125rem; color: var(--fg-3); }

/* Payment: one method, no box around it */
.co .wc-block-components-radio-control-accordion-option, .co .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
.co .wc-block-components-radio-control--highlight-checked::after, .co .wc-block-components-radio-control-accordion-option::after { display: none !important; }
.co .wc-block-checkout__payment-method .wc-block-components-radio-control__option { padding-left: 2rem !important; padding-right: 0 !important; margin-top: 1rem; }
.co .wc-block-checkout__payment-method .wc-block-components-radio-control__input { left: 0 !important; }
.co .wc-block-components-radio-control-accordion-content { padding: 1rem 0 0 !important; }
.co .wc-block-components-radio-control-accordion-content p { text-align: left !important; }
.co .wc-block-components-radio-control-accordion-content p + p { margin-top: .35rem; }
/* PayPal: a small ink mark in the same 38×24 slot as the card logos, flush right */
.co [for$="ppcp-gateway"] .wc-block-components-radio-control__label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.co [for$="ppcp-gateway"] .wc-block-components-payment-method-icons { flex: none; width: 38px; height: 24px; margin: 0; border-radius: 2px; background: #fff url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cpath fill=%22%231a1917%22 fill-opacity=%22.45%22 d=%22M38.914 13.35c0 5.574-5.144 12.15-12.927 12.15H18.49l-.368 2.322L16.373 39H7.056l5.605-36h15.095c5.083 0 9.082 2.833 10.555 6.77a9.7 9.7 0 0 1 .603 3.58%22/%3E%3Cpath fill=%22%231a1917%22 d=%22M44.284 23.7A12.894 12.894 0 0 1 31.53 34.5h-5.206L24.157 48H14.89l1.483-9 1.75-11.178.367-2.322h7.497c7.773 0 12.927-6.576 12.927-12.15 3.825 1.974 6.055 5.963 5.37 10.35%22/%3E%3Cpath fill=%22%231a1917%22 d=%22M38.914 13.35C37.31 12.511 35.365 12 33.248 12h-12.64L18.49 25.5h7.497c7.773 0 12.927-6.576 12.927-12.15%22/%3E%3C/svg%3E") center / 16px 16px no-repeat; box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .14); }
.co .wc-block-components-express-payment .wc-block-components-express-payment__content, .co .wc-block-components-express-payment { border-radius: 20px !important; border-color: var(--hairline-strong) !important; }
.co .wc-block-components-express-payment__title-container::before, .co .wc-block-components-express-payment__title-container::after { border-color: var(--hairline-strong) !important; border-radius: 20px 0 0 0 !important; }
.co .wc-block-components-express-payment__title-container::after { border-radius: 0 20px 0 0 !important; }
.co .wc-block-components-express-payment__content { padding: 1.25rem !important; }

/* Note, terms, button */
.co .wc-block-checkout__order-notes { padding: 0 .25rem !important; margin: 1.5rem 0 0 !important; }
.co .wc-block-checkout__terms { border-top: 0 !important; padding: 1rem .25rem 0 !important; margin: 0 !important; font-size: .8125rem; color: var(--fg-3); }
.co .wc-block-checkout__actions { padding: 1.5rem 0 0 !important; }
.co .wc-block-components-checkout-place-order-button { height: 3.75rem !important; font-size: 1.0625rem !important; }

/* The order */
.co .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { display: none; }
.co .wc-block-components-product-details { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-top: .35rem; }
.co .wc-block-components-totals-coupon { padding: .25rem 0 !important; }
.co .wc-block-components-totals-coupon:has(.wc-block-components-panel__content) .wc-block-components-panel__button { display: none !important; }
.co .wc-block-components-totals-coupon:has(.wc-block-components-panel__content)::before { content: "Discount code"; display: block; margin: .75rem 0 .75rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.co .wc-block-components-totals-footer-item { align-items: baseline; }
.co .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1.125rem; font-weight: 500; }
.co .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--font-display); font-stretch: 62%; font-weight: 800; font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: .9; letter-spacing: -.02em; }
.co-facts { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.co-facts li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--hairline); font-size: .9375rem; line-height: 1.45; }
.co-facts li:last-child { border-bottom: 1px solid var(--hairline); }
.co-facts .n { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--brass); padding-top: .2rem; }
.sp-box__how { margin: .6rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--fg-2); }

@media (min-width: 1024px) {
  .co { --co-head: calc(var(--nav-h) + 13rem); --co-pad: clamp(1.5rem, 5vw, 5.5rem); }
  .co::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: var(--surface-2); }
  .co__head { position: relative; width: 50%; height: var(--co-head); padding: 0 var(--co-pad) 2.5rem var(--gutter); display: flex; flex-direction: column; justify-content: flex-end; }
  .co__body { position: relative; padding: 0; }
  .co .wc-body { max-width: none; border: 0 !important; padding: 0 !important; }
  .co .wp-block-woocommerce-checkout { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .co .wc-block-components-sidebar-layout { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 0 !important; margin: 0 !important; }
  .co .wc-block-components-main { width: 50% !important; max-width: none !important; padding: 0 var(--co-pad) 0 var(--gutter) !important; margin: 0 !important; box-sizing: border-box; }
  .co .wc-block-checkout__form { max-width: 44rem; }
  .co .wc-block-components-sidebar { width: 50% !important; max-width: none !important; padding: 0 var(--gutter) 0 var(--co-pad) !important; margin: calc(-1 * var(--co-head) + var(--nav-h) + 3rem) 0 0 !important; top: calc(var(--nav-h) + 2rem) !important; box-sizing: border-box; }
  .co .wp-block-woocommerce-checkout-order-summary-block { max-width: 34rem; border: 0 !important; background: transparent !important; }
  .co .wc-block-components-checkout-order-summary__title { display: none !important; }
  .co .wc-block-components-totals-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
  .co .wc-block-components-order-summary { padding: 0 !important; }
  .co .wc-block-components-totals-wrapper .wc-block-components-panel, .co .wc-block-components-totals-item { padding-left: 0 !important; padding-right: 0 !important; }
  .co.co--art .wp-block-woocommerce-checkout-order-summary-block::before { content: ""; display: block; aspect-ratio: 2650 / 1238; margin-bottom: 2.5rem; background: var(--co-art) center / contain no-repeat; filter: drop-shadow(0 0 30px rgba(48, 38, 20, .2)) drop-shadow(12px 24px 28px rgba(48, 38, 20, .25)); }
  .co.co--art .wc-block-components-order-summary-item__image { display: none !important; }
  .co.co--art .wc-block-components-order-summary-item__description { padding-left: 0 !important; }
  .co.co--art .wc-block-components-order-summary-item .wc-block-components-product-name { font-family: var(--font-display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: .95; letter-spacing: -.01em; }
}
.woocommerce-checkout .buybar, .woocommerce-cart .buybar { display: none !important; }
@media (max-width: 1023px) {
  .co .wc-block-components-totals-coupon { padding-left: 1rem !important; padding-right: 1rem !important; }
  .co .co-facts { margin-left: 1rem; margin-right: 1rem; }
  .co .wc-block-components-order-meta .sp-box { margin-left: 1rem; margin-right: 1rem; }
}

/* FAQ accordion (Support) */
.faq { margin-top: 1.5rem; max-width: 65ch; border-top: 1px solid var(--hairline-strong); }
.faq__item { border-bottom: 1px solid var(--hairline-strong); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.15rem 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ic { position: relative; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--hairline-strong); border-radius: 50%; transition: background .25s, border-color .25s, color .25s, transform .35s var(--ease-out-expo); }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1.5px; margin: -.75px 0 0 -.35rem; background: currentColor; transition: transform .35s var(--ease-out-expo); }
.faq__ic::after { transform: rotate(90deg); }
.faq__item summary:hover .faq__ic { border-color: rgba(var(--fg-rgb), .5); }
.faq__item[open] .faq__ic { background: var(--fg); border-color: var(--fg); color: var(--surface-0); transform: rotate(180deg); }
.faq__item[open] .faq__ic::after { transform: rotate(0deg); }
.support__block .faq__a p { margin: 0; padding: 0 3.5rem 1.4rem 0; color: var(--fg-2); line-height: 1.65; }
.faq__item[open] .faq__a { animation: faq-in .45s var(--ease-out-expo); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .faq__item[open] .faq__a { animation: none; } }

/* Long text pages (privacy, terms) */
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-family: var(--font-display); font-stretch: 78%; font-weight: 700; letter-spacing: -.01em; color: var(--fg); margin-top: 3rem; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; color: var(--fg); margin-top: 1.75rem; }
.prose h3 + p { margin-top: .5rem; }
.prose li + li { margin-top: .4rem; }
.prose em { color: var(--fg-3); }
.prose code { font-family: var(--font-mono); font-size: .85em; padding: .1em .4em; border-radius: 4px; background: rgba(var(--fg-rgb), .06); }

/* Notices: the Air card (chosen 2026-10-05) ----------------------------------------------
   One card for every message on the site: WooCommerce notices (classic and block),
   the contact form, the newsletter line, field errors. Three colours: green done,
   clay error, brass note. */
:root { --ok: #3f7a4f; --ok-rgb: 63, 122, 79; --err: #b4452a; --err-rgb: 180, 69, 42; --note: #8f6b2a; --note-rgb: 143, 107, 42; }
.sn { --c: var(--note); --c-rgb: var(--note-rgb); display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 14px; box-shadow: 0 20px 40px -30px var(--shadow-strong); color: var(--fg); font-family: var(--font-sans); font-size: .9375rem; line-height: 1.5; text-align: left; list-style: none; }
.sn--ok { --c: var(--ok); --c-rgb: var(--ok-rgb); } .sn--err { --c: var(--err); --c-rgb: var(--err-rgb); }
.sn::before, .sn::after { display: none !important; content: none !important; }
.sn:focus, .sn:focus-visible { outline: none; } /* WooCommerce focuses the error for screen readers; no ring needed */
.sn__ic { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--c-rgb), .12); color: var(--c); }
.sn__ic::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--sn-icon) center / contain no-repeat; mask: var(--sn-icon) center / contain no-repeat; }
.sn { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v6M12 7.5v.5%22/%3E%3C/svg%3E"); }
.sn--ok { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7%22/%3E%3C/svg%3E"); }
.sn--err { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7.5v5.5M12 16.5v.5%22/%3E%3C/svg%3E"); }
.sn__b { flex: 1; min-width: 0; padding-top: .2rem; }
.sn__t { margin: 0; font-weight: 600; }
.sn__p { margin: .1rem 0 0; color: var(--fg-2); }
.sn__p p { margin: 0; } .sn__p p + p { margin-top: .35rem; }
.sn__list { list-style: none; padding: 0; display: grid; gap: .25rem; }
.sn__p a { font-weight: 500; color: var(--fg); text-decoration: underline; text-underline-offset: .22em; }
.sn__p a:hover { color: var(--c); }
/* Action buttons WooCommerce puts inside a message ("View cart", "Confirm email address"): the text first, then a small outline pill on its own line, left-aligned with the title and text, whichever order the markup has them in */
.sn__p:has(> a.button, > .wc-forward) { display: flex; flex-direction: column; align-items: flex-start; }
.sn__p a.button, .sn__p .wc-forward, .woocommerce .sn a.button, .sn__p a.button.alt { order: 2; display: inline-flex !important; align-self: flex-start; height: 2.25rem !important; padding: 0 1.1rem !important; margin: .6rem 0 .1rem !important; border: 1.5px solid var(--fg) !important; border-radius: 999px !important; background: transparent !important; color: var(--fg) !important; font-family: var(--font-sans); font-size: .875rem !important; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; line-height: 1; box-shadow: none !important; float: none !important; transition: background-color .25s; }
.sn__p a.button:hover, .woocommerce .sn a.button:hover { background: rgba(var(--fg-rgb), .06) !important; color: var(--fg) !important; }
.sn__x { flex: none; width: 1.75rem; height: 1.75rem; margin: 0 -.25rem 0 auto; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--fg); opacity: .55; cursor: pointer; transition: opacity .2s, background-color .2s; }
.sn__x:hover { opacity: 1; background: rgba(var(--fg-rgb), .07); }
.sn__x::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6L6 18%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6L6 18%22/%3E%3C/svg%3E") center / contain no-repeat; }
.sn.is-gone, .wc-block-components-notice-banner.is-gone { opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft); }
.wc-block-components-notice-banner.is-hidden { display: none !important; }
/* Browser autofill: keep the field on the page's own surface, not the browser's yellow */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-text-fill-color: var(--fg) !important; caret-color: var(--fg); transition: background-color 999999s ease-out 0s, color 999999s ease-out 0s; }
.woocommerce-form input:-webkit-autofill, .woocommerce-form input:-webkit-autofill:hover, .woocommerce-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--air) inset !important; box-shadow: 0 0 0 1000px var(--air) inset !important; }
.sn--sm { padding: .8rem 1rem; gap: .75rem; font-size: .875rem; border-radius: 12px; box-shadow: none; margin: .75rem 0 0; }
.sn--sm .sn__ic { width: 1.6rem; height: 1.6rem; } .sn--sm .sn__ic::before { width: 13px; height: 13px; } .sn--sm .sn__b { padding-top: .1rem; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; width: 100%; }
.woocommerce .sn.woocommerce-error, .woocommerce .sn.woocommerce-message, .woocommerce .sn.woocommerce-info { padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; border-top: 1px solid var(--hairline-strong); background: var(--air); }

/* Block cart / checkout banners, drawn the same way */
.wc-block-components-notice-banner, .wc-block-components-notice-banner.is-error, .wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-info, .wc-block-components-notice-banner.is-warning { --c: var(--note); --c-rgb: var(--note-rgb); display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--air) !important; border: 1px solid var(--hairline-strong) !important; border-radius: 14px; box-shadow: 0 20px 40px -30px var(--shadow-strong); color: var(--fg) !important; font-size: .9375rem; line-height: 1.5; }
.wc-block-components-notice-banner.is-error { --c: var(--err); --c-rgb: var(--err-rgb); } .wc-block-components-notice-banner.is-success { --c: var(--ok); --c-rgb: var(--ok-rgb); }
.wc-block-components-notice-banner > svg { flex: none; width: 2rem !important; height: 2rem !important; padding: .5rem; margin: 0 !important; border-radius: 50%; background: rgba(var(--c-rgb), .12) !important; fill: var(--c) !important; color: var(--c); }
.wc-block-components-notice-banner__content { flex: 1; min-width: 0; padding: .2rem 0 0 !important; color: var(--fg-2); }
.wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary { color: var(--fg); font-weight: 600; margin: 0 0 .1rem; }
.wc-block-components-notice-banner__content a { color: var(--fg); text-decoration: underline; text-underline-offset: .22em; }
.wc-block-components-notice-banner__content ul { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.wc-block-components-notice-banner__content a.button, .wc-block-components-notice-banner__content .wc-block-components-button:not(.wc-block-components-notice-banner__dismiss) { display: inline-flex !important; height: 2.25rem !important; min-height: 0 !important; padding: 0 1.1rem !important; margin: .6rem 0 .1rem !important; border: 1.5px solid var(--fg) !important; border-radius: 999px !important; background: transparent !important; color: var(--fg) !important; font-size: .875rem !important; font-weight: 600; text-decoration: none; box-shadow: none !important; }
.wc-block-components-notice-banner__dismiss, .wc-block-components-notice-banner .wc-block-components-button.is-link { flex: none; width: 1.75rem !important; height: 1.75rem !important; min-height: 0 !important; margin: 0 -.25rem 0 auto !important; padding: 0 !important; border: 0; border-radius: 50%; background: none !important; color: var(--fg) !important; opacity: .55; }
.wc-block-components-notice-banner__dismiss:hover { opacity: 1; background: rgba(var(--fg-rgb), .07) !important; }
.wc-block-components-notice-banner__dismiss svg { width: 14px; height: 14px; fill: currentColor; }

/* Field errors: clay underline, a small italic line */
.woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid textarea, .ct-form .input:user-invalid, .wc-block-components-text-input.has-error input, .wc-block-components-text-input.has-error input:focus { border-color: var(--err) !important; box-shadow: none !important; }
.wc-block-components-validation-error, .wc-block-components-validation-error p, .woocommerce form .form-row .sn-field { margin: .4rem 0 0; font-size: .8125rem; font-style: italic; color: var(--err); }
.wc-block-components-validation-error svg { display: none; }
.wc-block-components-validation-error > p { padding-left: 0 !important; }

/* Support downloads: the second, quieter Windows link */
.support__alt { font-size: .8125rem; color: var(--fg-2); text-decoration: underline; text-underline-offset: .22em; }
.support__alt:hover { color: var(--fg); }

/* Lost / reset password (guests): one card, comfortable width */
.woocommerce-account form.lost_reset_password { max-width: 36rem; }
.woocommerce-account form.lost_reset_password > p:first-child { font-size: 1rem; color: var(--fg-2); margin: 0 0 1.5rem; }
.woocommerce-account form.lost_reset_password .form-row-first, .woocommerce-account form.lost_reset_password .form-row-last { width: 100%; float: none; }
.woocommerce-account form.lost_reset_password .form-row { margin: 0 0 1.1rem; }
.woocommerce-account:not(.logged-in) .woocommerce > p { max-width: 44rem; color: var(--fg-2); margin: 0 0 1.5rem; }
.woocommerce-account:not(.logged-in) .woocommerce > .sn { max-width: 44rem; }

/* Order received (design B) ------------------------------------------------------------------ */
.ty { max-width: 72rem; margin: 0 auto; }
.ty__head { margin-bottom: 2.5rem; }
.ty__head--c { text-align: center; }
.ty__head .display { font-size: clamp(3.5rem, 8vw, 7rem); margin: .75rem 0 1rem; }
.ty__head .lede { max-width: 44rem; color: var(--fg-2); }
.ty__head--c .lede { margin: 0 auto; }
.ty__pills { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.ty__art { margin: 1.5rem auto -5rem; max-width: 58rem; position: relative; z-index: 0; }
.ty__art img { width: 100%; height: auto; filter: drop-shadow(0 50px 60px rgba(48, 38, 20, .35)); }
.ty__steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .ty__steps { grid-template-columns: repeat(3, 1fr); } }
.ty__step { display: flex; flex-direction: column; gap: .75rem; min-height: 17rem; padding: 2rem; border-radius: 20px; background: var(--air); border: 1px solid var(--hairline-strong); box-shadow: 0 40px 80px -40px var(--shadow-strong); }
.ty__step.is-on { background: var(--fg); color: var(--surface-0); border-color: var(--fg); }
.ty__num { font-family: var(--font-display); font-weight: 700; font-stretch: 78%; font-size: 3.25rem; line-height: 1; opacity: .25; }
.ty__step h2 { font-size: 1.5rem; margin: 0; }
.ty__dl .btn-sm { padding: 0 1rem; }
.ty__step p { margin: 0; font-size: .9375rem; color: var(--fg-2); }
.ty__step.is-on p { color: rgba(243, 239, 230, .8); }
.ty__dl { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
.ty__key { display: grid; gap: .35rem; margin-top: .25rem; }
.ty__key + .ty__key { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(243, 239, 230, .15); }
.ty__key-p { font-weight: 600; color: var(--surface-0) !important; }
.ty__key-e { color: rgba(243, 239, 230, .55); }
.ty__key-k { display: block; font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em; line-height: 1.7; word-break: break-all; color: var(--surface-0); background: none; padding: 0; }
.ty__copy { justify-self: start; margin-top: .4rem; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--surface-0); border: 1px solid rgba(243, 239, 230, .35); border-radius: 999px; padding: .4rem .75rem; background: none; cursor: pointer; transition: background-color .2s; }
.ty__copy:hover, .ty__copy.is-done { background: rgba(243, 239, 230, .12); }
.ty__points { margin-top: 1.5rem; display: grid; gap: 1rem 1.5rem; align-items: center; padding: 1.5rem 2rem; border-radius: 20px; background: rgba(var(--lamp-rgb), .12); border: 1px solid rgba(var(--lamp-rgb), .35); }
@media (min-width: 720px) { .ty__points { grid-template-columns: auto 1fr auto; } }
.ty__points-n { margin: 0; display: flex; align-items: baseline; gap: .4rem; font-family: var(--font-display); font-weight: 700; font-stretch: 78%; font-size: 3.5rem; line-height: 1; color: var(--lamp); letter-spacing: -.01em; }
.ty__points-n small { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; }
.ty__points-t p { margin: 0; } .ty__points-t p + p { margin-top: .25rem; font-size: .9375rem; color: var(--fg-2); }
.ty__points--guest { grid-template-columns: 1fr auto; }
.ty__facts { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--hairline); font-size: .9375rem; color: var(--fg-2); }
.ty__facts a { color: var(--fg); text-decoration: underline; text-underline-offset: .22em; }
.ty__more { margin-top: 1rem; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ty__more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 0; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
.ty__more summary::-webkit-details-marker { display: none; }
.ty__more-body { padding: .5rem 0 2rem; display: grid; gap: 1.5rem; }
.ty .woocommerce-order-details, .ty .woocommerce-customer-details { border: 1px solid var(--hairline); border-radius: 20px; padding: 1.5rem 2rem; background: var(--surface-1); margin: 0; }
.ty .woocommerce-order-details__title, .ty .woocommerce-column__title, .ty .woocommerce-customer-details h2 { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; font-stretch: normal; margin: 0 0 1rem; }
.ty table.shop_table { border: 0; margin: 0; font-size: .9375rem; }
.ty table.shop_table th, .ty table.shop_table td { padding: .75rem .25rem; border-bottom: 1px solid var(--hairline); border-top: 0; }
.ty table.shop_table tfoot th { font-weight: 500; color: var(--fg-2); }
.ty table.shop_table tfoot tr:last-child th, .ty table.shop_table tfoot tr:last-child td { border-bottom: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.ty .wc-item-meta { list-style: none; padding: 0; margin: .35rem 0 0; font-size: .8125rem; color: var(--fg-3); }
.ty .wc-item-meta li { margin: 0; } .ty .wc-item-meta p { display: inline; margin: 0; }
.ty .woocommerce-customer-details address { font-style: normal; border: 0; padding: 0; line-height: 1.6; color: var(--fg-2); }
.ty .woocommerce-column--2 { margin-top: 1rem; }
.ty .woocommerce-order-downloads { display: none; }
@media (min-width: 900px) { .ty .woocommerce-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .ty .woocommerce-column--2 { margin-top: 0; } }
@media (max-width: 899px) { .ty__art { margin-bottom: -2rem; } .ty__step { min-height: 0; } }

/* Empty cart: the plug-ins themselves ------------------------------------------------------- */
.wc-block-cart__empty-cart__title, .wp-block-woocommerce-empty-cart-block > .wp-block-separator { display: none !important; }
.ec { padding: 0 0 1rem; }
.ec__title { font-size: clamp(2.75rem, 6vw, 4.5rem); margin: .75rem 0 .75rem; }
.ec__lede { max-width: 40rem; color: var(--fg-2); }
.ec__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .ec__list { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .ec--one .ec__list { grid-template-columns: 1fr; } }
.ec__card { display: grid; gap: 1.25rem; padding: 1.5rem; overflow: hidden; background: var(--air); border: 1px solid var(--hairline-strong); border-radius: 20px; box-shadow: 0 40px 80px -40px var(--shadow-strong); }
@media (min-width: 900px) { .ec--one .ec__card { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 2rem 2.5rem; gap: 2.5rem; } }
.ec__art img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(48, 38, 20, .3)); transition: transform .6s var(--ease-soft); }
.ec__card:hover .ec__art img { transform: translateY(-3px); }
.ec__info { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.ec__tag { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lamp); border: 1px solid var(--lamp); border-radius: 999px; padding: .3rem .6rem; margin-bottom: .35rem; }
.ec__name { font-size: 2.25rem; margin: 0; } .ec__name a { color: inherit; }
.ec__desc { margin: .25rem 0 0; color: var(--fg-2); font-size: 1rem; }
.ec__price { display: flex; align-items: baseline; gap: .75rem; margin: .75rem 0 1rem; font-family: var(--font-display); font-weight: 600; font-size: 2rem; letter-spacing: -.02em; }
.ec__price s { font-size: 1.1rem; color: var(--fg-3); font-weight: 400; }
.ec__pills { gap: .75rem; flex-wrap: wrap; }
.ec__pills .btn-pill { height: 3rem; padding: 0 1.5rem; font-size: .9375rem; }
@media (max-width: 599px) { .ec__name { font-size: 1.9rem; } .ec__price { font-size: 1.6rem; } }