/* SLAYD — sx.css · THE SYSTEM LAYER (PRISM) */
@layer reset, tokens, type, layout, components, product, motion, enhance;

/* Registered properties must sit outside a layer */
@property --sx-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --sx-p{syntax:'<percentage>';initial-value:0%;inherits:false}
@property --sx-r{syntax:'<percentage>';initial-value:0%;inherits:false}

/* §3.6 Metric-matched fallbacks — the CLS floor */
@font-face{font-family:"serif-fb";src:local("Georgia"),local("Times New Roman");size-adjust:88%;ascent-override:92%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"sans-fb";src:local("Helvetica Neue"),local("Arial");size-adjust:97%;ascent-override:96%;descent-override:24%;line-gap-override:0%}

/* TOKENS (§2) */
@layer tokens{
:root{
/* §2.1 REPAIR — five ghost tokens the portal reads 94 times */
--ink:#3a1f30; --ink2:#5A3D48; --muted:#7c6473; --soft:rgba(124,100,115,.65); --line:#EFDCE7;

/* §2.2 ground and paper */
--paper:#FFFFFF; --paper-2:#FDFAFB; --paper-3:#F6F1F4;
--cream:#fdf8f5; --card:#FFFFFF; --surface:#F5F3F4; --mid:#EBE8E9;
--wash:linear-gradient(160deg,#fdf8f5,#faf0f4 55%,#f4ecf7);
--wash-warm:linear-gradient(168deg,#FFFDFB,#FDF4F7 54%,#FBEDF3);
--wash-cool:linear-gradient(168deg,#FBFAFE,#F4F2FB 56%,#F7EDF4);
--wash-flat:#FCF8FA;
--lit-ground:radial-gradient(ellipse 48% 40% at 12% 0%,rgba(241,102,168,.15),transparent 62%),radial-gradient(ellipse 46% 42% at 90% 8%,rgba(128,146,212,.17),transparent 64%),radial-gradient(ellipse 62% 34% at 50% 100%,rgba(224,168,145,.09),transparent 72%),linear-gradient(180deg,#FFFCFD,#FDF7FA 60%,#FFFFFF);
--lit-ground-soft:radial-gradient(ellipse 54% 46% at 84% 0%,rgba(128,146,212,.12),transparent 66%),radial-gradient(ellipse 44% 40% at 6% 92%,rgba(241,102,168,.10),transparent 66%),#FFFFFF;
--veil:rgba(255,252,254,.72); --overlay:rgba(58,31,48,.45);

/* §2.3 ink */
--plum:#3a1f30; --ink-2:#5A3D48; --ink-3:#7c6473; --ink-4:rgba(124,100,115,.45); --ink-inv:#FFFFFF;
--mauve:#7c6473; --mauve-2:rgba(124,100,115,.65); --hint:rgba(124,100,115,.45);

/* §2.4 brand light — five gradients, and only five */
--pink:#F166A8; --purple:#8092D4; --peri:#A6A8D9; --peach:#E0A891;
--gradient:linear-gradient(135deg,#F166A8 0%,#8092D4 100%);
--gradient-h:linear-gradient(90deg,#F166A8 0%,#8092D4 100%);
--gradient-rev:linear-gradient(135deg,#8092D4 0%,#F166A8 100%);
--gradient-tri:linear-gradient(135deg,#F166A8 0%,#8092D4 62%,#A6A8D9 100%);
--gradient-rose:linear-gradient(90deg,#F166A8,#E0A891);
/* WHITE-TEXT-SAFE RAMP. White on --gradient-h is 2.91:1 (pink) / 3.01:1 (peri),
   both under the 4.5:1 floor (§10.1). Same hue and saturation, lightness
   solved: #E31577 4.53:1, #5A72C7 4.50:1, min across the ramp 4.50:1. Use for
   ANY white label on a gradient; --gradient-h stays right for rules, ticks and
   progress bars (no text) and for device interiors (they depict the app). */
--gradient-btn:linear-gradient(90deg,#E31577 0%,#5A72C7 100%);
--lit-pink-04:rgba(241,102,168,.04); --lit-pink-08:rgba(241,102,168,.08);
--lit-pink-14:rgba(241,102,168,.14); --lit-pink-22:rgba(241,102,168,.22);
--lit-peri-04:rgba(128,146,212,.04); --lit-peri-08:rgba(128,146,212,.08);
--lit-peri-14:rgba(128,146,212,.14); --lit-peri-22:rgba(128,146,212,.22);
--blush:#f7e4ec; --soft-pink:#fbeef4; --tint-tile:linear-gradient(135deg,#F7DCE6,#FBDCEC);
--glow-tile:0 2px 8px rgba(241,102,168,.20);

/* §2.5 dusk — one band per page, maximum */
--dusk:#2A0F1A; --dusk-2:#3A1826;
--dusk-ground:radial-gradient(ellipse 52% 46% at 10% 0%,rgba(241,102,168,.20),transparent 64%),radial-gradient(ellipse 50% 44% at 92% 96%,rgba(128,146,212,.18),transparent 66%),linear-gradient(168deg,#2A0F1A,#1C0912 78%,#25101B);
--on-dusk:#FBF6F8; --on-dusk-2:rgba(251,246,248,.70); --on-dusk-3:rgba(251,246,248,.48);
--hairline-dusk:rgba(255,255,255,.14); --hairline-dusk-2:rgba(255,255,255,.24);
--g-border-dusk:linear-gradient(135deg,rgba(241,102,168,.70),rgba(128,146,212,.60));

/* §2.6 hairlines are COLOURS; --g-* are GRADIENTS and never follow `solid` */
--hairline:#EFDCE7; --hairline-2:#E6CBDB; --hairline-ink:rgba(58,31,48,.10);
--border:#ecc2d6; --border-soft:rgba(236,194,214,.55); --border-strong:rgba(236,194,214,.85);
/* RECIPE A NEEDS AN OPAQUE FILL: the padding-box layer is what hides the
   border-box gradient. Over a translucent fill it reads through and the card
   paints as a flat brand block (Rule 1). Never point this at a translucent
   token; see the .on-dusk override. */
--card-fill:linear-gradient(var(--paper),var(--paper));
--g-border:linear-gradient(135deg,rgba(241,102,168,.42),rgba(128,146,212,.42));
--g-border-strong:linear-gradient(135deg,rgba(241,102,168,.68),rgba(128,146,212,.68));
--g-border-full:var(--gradient);
--g-rule:linear-gradient(90deg,transparent,rgba(241,102,168,.55) 28%,rgba(128,146,212,.55) 72%,transparent);

/* §2.7 glass (3 sanctioned places only) and grain (mandatory on lit areas) */
--glass-fill:rgba(255,252,254,.72); --glass-blur:saturate(1.55) blur(18px);
--glass-fill-dusk:rgba(42,15,26,.62);
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.052'/%3E%3C/svg%3E");

/* §2.8 type scale — cqi resolves against the band (§4.0) */
--fs-monument:clamp(72px,13.5cqi,190px); --lh-monument:.84; --tr-monument:-.038em;
--fs-d1:clamp(46px,8.4cqi,108px); --lh-d1:.98; --tr-d1:-.028em;
--fs-d2:clamp(34px,5.4cqi,66px); --lh-d2:1.04; --tr-d2:-.022em;
--fs-d3:clamp(26px,3.6cqi,42px); --lh-d3:1.12; --tr-d3:-.016em;
--fs-d4:clamp(21px,2.4cqi,28px); --lh-d4:1.2; --tr-d4:-.010em;
--fs-lede:clamp(17px,1.5cqi,20px); --lh-lede:1.62;
--fs-t1:19px; --fs-t2:17px; --fs-t3:15.5px;
--fs-body:16px; --lh-body:1.65; --fs-body-s:14.5px; --lh-body-s:1.6;
--fs-cap:13px; --lh-cap:1.5; --fs-micro:11.5px;
--fs-eyebrow:10.5px; --tr-eyebrow:.22em; --fs-eyebrow-s:9.5px; --tr-eyebrow-s:.18em;
--fs-tag:9px; --tr-tag:.14em;
--fs-fig-xl:clamp(40px,6.2cqi,76px); --fs-fig:28px; --fs-fig-s:20px;

/* §2.9 spacing, measure, widths */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:18px; --sp-6:22px; --sp-7:28px;
--sp-8:36px; --sp-9:48px; --sp-10:64px; --sp-11:88px; --sp-12:120px; --sp-13:160px;
--gutter:clamp(18px,4vw,44px); --band-y:clamp(72px,9vw,132px);
--band-y-lg:clamp(104px,13vw,196px); --band-y-sm:clamp(40px,5vw,64px);
--content:1180px; --content-narrow:780px; --content-wide:1440px;
--measure:62ch; --measure-tight:46ch; --content-max:1180px;

/* §2.10 radii — --r-dot is the only round-ish primitive on the site */
--r-1:8px; --r-2:10px; --r-3:12px; --r-4:14px; --r-5:16px;
--r-6:18px; --r-7:22px; --r-8:28px; --r-9:34px; --r-dot:3px;

/* §2.11 shadows — plum-tinted, never black; --lift-0 is the inset lit edge */
--lift-0:inset 0 1px 0 rgba(255,255,255,.72);
--lift-1:var(--lift-0),0 1px 3px rgba(58,31,48,.05);
--lift-2:var(--lift-0),0 4px 14px rgba(58,31,48,.07);
--lift-3:var(--lift-0),0 14px 38px rgba(58,31,48,.10);
--lift-4:var(--lift-0),0 30px 80px rgba(58,31,48,.12),0 4px 14px rgba(58,31,48,.05);
--glow-rose:0 10px 30px rgba(241,102,168,.24); --glow-rose-lg:0 18px 52px rgba(241,102,168,.30);
--glow-peri:0 14px 40px rgba(128,146,212,.22); --glow-focus:0 0 0 3px rgba(241,102,168,.28);
--shadow-subtle:0 1px 4px rgba(58,31,48,.04); --shadow-card:0 3px 8px rgba(58,31,48,.06);
--shadow-elev:0 6px 16px rgba(58,31,48,.12); --shadow-rose:0 8px 18px rgba(241,102,168,.22);

/* §2.12 z-layers — no page file writes a numeric z-index */
--z-base:0; --z-raise:10; --z-sticky:30; --z-header:50; --z-progress:60; --z-dock:70;
--z-popover:120; --z-scrim:140; --z-modal:150; --z-toast:200; --z-gate:9000;

/* §2.13 motion — five durations, four easings, and nothing else */
--dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:520ms; --dur-5:900ms;
--ease:cubic-bezier(.2,.75,.2,1); --ease-in-out:cubic-bezier(.66,0,.24,1);
--ease-exit:cubic-bezier(.4,0,.9,.4);
--spring:linear(0,.0063,.0954 6%,.4675 16%,.7492,.9245 27%,1.0113 32%,1.0402 38%,1.0186 45%,.9961 58%,1.0004 72%,1);

/* §3.1 families */
--serif-fb:"serif-fb"; --sans-fb:"sans-fb";
--serif:'Cormorant Garamond',var(--serif-fb),Georgia,serif;
--sans:'DM Sans',var(--sans-fb),-apple-system,BlinkMacSystemFont,sans-serif;
--mono:'DM Mono','SF Mono',ui-monospace,monospace;
--struct:'Archivo',var(--sans-fb),-apple-system,'Helvetica Neue',sans-serif;

/* A1 EXTENSION — values §2 assumes but does not name; more is a request to A1.
   --gold/--amber are PORTAL STATUS ONLY, never a marketing surface. */
/* #4CAF7D was 2.40:1 on its own tile; #357A57 is 4.55:1, same hue and sat. */
--gold:#B49146; --green:#357A57; --green-bg:rgba(76,175,125,.14);
/* Status inks solved for 4.5:1 on their own 14% tint (9px mono is text). */
--chip-pink:#D1136E; --chip-peri:#4E68C3;
--red:#DC2626; --red-bg:rgba(220,38,38,.1); --amber:#B45309; --amber-bg:rgba(180,83,9,.14);
--on-brand:#FFFFFF; --on-brand-2:rgba(255,255,255,.78); --on-brand-3:rgba(255,255,255,.55);
--on-brand-line:rgba(255,255,255,.32); --on-brand-fill:rgba(255,255,255,.18);
--on-brand-ghost:rgba(255,255,255,.12);
--on-brand-glow:radial-gradient(ellipse 62% 58% at 6% 0%,rgba(255,255,255,.32),transparent 64%);
--scrim-top:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,0));
--scrim-bot:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.52));
--glass-dev:rgba(255,255,255,.22);
--dev-scale:1; --dev-bezel:var(--dusk); --dev-rim:rgba(255,255,255,.16);
--dot-grid:radial-gradient(var(--hairline-2) 1px,transparent 1px);
--logo-src:url("/assets/slayd-logo.webp");
--mask2:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
}
/* §2.5 A band gets .on-dusk; every component below reads tokens, so it is
   already correct. No component ships a dark variant */
.on-dusk{--paper:rgba(255,255,255,.045); --paper-2:rgba(255,255,255,.07); --paper-3:rgba(255,255,255,.03);
--plum:var(--on-dusk); --ink-2:var(--on-dusk-2); --ink-3:var(--on-dusk-3); --ink-4:rgba(251,246,248,.30);
--hairline:var(--hairline-dusk); --hairline-2:var(--hairline-dusk-2);
--g-border:var(--g-border-dusk); --card-fill:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05));
--veil:rgba(255,255,255,.08); --glass-fill:var(--glass-fill-dusk);
--border:var(--hairline-dusk-2); --border-soft:var(--hairline-dusk); --border-strong:var(--hairline-dusk-2);
--dot-grid:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
--lift-0:inset 0 1px 0 rgba(255,255,255,.08); --lift-1:none; --lift-2:none;
--lift-3:0 24px 60px rgba(0,0,0,.35); --lift-4:0 34px 90px rgba(0,0,0,.42);
background:var(--dusk-ground); color:var(--on-dusk)}
}

/* RESET — thin: slayd.css already ships the universal reset and, unlayered,
   wins over this layer wherever the two overlap */
@layer reset{
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
:where(button,input,select,textarea){font:inherit;color:inherit}
/* One icon contract: stroke 1.5, 24-box, no fill */
:where([class*="sx-"]) svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--lit-pink-22);color:var(--plum)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:var(--r-2)}
.on-dusk :focus-visible{outline-color:var(--on-brand)}
.sx-skip{position:absolute;inset-inline-start:-9999px;top:var(--sp-2);z-index:var(--z-toast);background:var(--paper);color:var(--plum);padding:10px 16px;border-radius:var(--r-3);box-shadow:var(--lift-3);font-family:var(--sans);font-size:var(--fs-cap);font-weight:600}
.sx-skip:focus{inset-inline-start:var(--sp-4)}
[hidden]{display:none}
.sx-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}

/* TYPE (§3) */
@layer type{
body{font-optical-sizing:auto}
.sx-page,.sx-b,.sx-ui{font-family:var(--sans)}
/* §3.2 text-box-trim — scoped to system surfaces so the portal's compensating
   negative margins stay undisturbed until A6's sweep removes them */
.sx-d1,.sx-d2,.sx-d3,.sx-d4,.sx-monument,.sx-page :is(h1,h2,h3,h4),.sx-b :is(h1,h2,h3,h4){text-box:trim-both cap alphabetic;text-wrap:balance}
.sx-page :is(p,li),.sx-b :is(p,li){text-wrap:pretty;hyphenate-limit-chars:9 4 4}
.sx-monument,.sx-d1,.sx-d2,.sx-d3,.sx-d4{font-family:var(--serif);font-style:italic;color:var(--plum);margin:0}
.sx-monument{font-size:var(--fs-monument);line-height:var(--lh-monument);letter-spacing:var(--tr-monument);font-weight:500}
.sx-d1{font-size:var(--fs-d1);line-height:var(--lh-d1);letter-spacing:var(--tr-d1);font-weight:500}
.sx-d2{font-size:var(--fs-d2);line-height:var(--lh-d2);letter-spacing:var(--tr-d2);font-weight:500}
.sx-d3{font-size:var(--fs-d3);line-height:var(--lh-d3);letter-spacing:var(--tr-d3);font-weight:600}
.sx-d4{font-size:var(--fs-d4);line-height:var(--lh-d4);letter-spacing:var(--tr-d4);font-weight:600}
/* §3.4 the one non-serif display voice */
.sx-arch{font-family:var(--struct);font-style:normal;text-transform:uppercase;font-weight:700;letter-spacing:.05em;font-variation-settings:'wdth' 122,'wght' 700;font-stretch:122%}
.sx-lede{font-size:var(--fs-lede);line-height:var(--lh-lede);font-weight:500;color:var(--ink-2);max-width:var(--measure-tight);margin:0}
.sx-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);max-width:var(--measure);margin:0}
.sx-body-s{font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--ink-2);margin:0}
.sx-cap{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--ink-3);margin:0}
.sx-micro{font-size:var(--fs-micro);line-height:1.45;color:var(--ink-3);margin:0}
.sx-t1,.sx-t2,.sx-t3{font-weight:600;letter-spacing:-.006em;line-height:1.3;color:var(--plum);margin:0}
.sx-t1{font-size:var(--fs-t1)} .sx-t2{font-size:var(--fs-t2)} .sx-t3{font-size:var(--fs-t3)}
/* §3.3 The eyebrow — the brand's fingerprint */
.sx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--ink-3);padding-left:2px;line-height:1;margin:0}
.sx-eyebrow::before{content:"";width:14px;height:1.5px;background:var(--gradient-h);flex:none}
.sx-eyebrow-s{font-size:var(--fs-eyebrow-s);letter-spacing:var(--tr-eyebrow-s)}
.sx-eyebrow.sx-grad::before{display:none}
/* Structure label — 01 — DISCOVERY */
.sx-struct,.sx-mon-col h3{font-family:var(--struct);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1;font-variation-settings:'wdth' 118,'wght' 700;font-stretch:118%;margin:0}
.sx-fig-xl,.sx-fig,.sx-fig-s,.sx-ui-kpi b{font-family:var(--struct);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--plum);font-variation-settings:'wdth' 112,'wght' 700;font-stretch:112%;margin:0}
.sx-fig-xl{font-size:var(--fs-fig-xl);line-height:1}
.sx-fig{font-size:var(--fs-fig);line-height:1.1;font-weight:600}
.sx-fig-s{font-size:var(--fs-fig-s);line-height:1.1;font-weight:600}
.sx-fig-serif{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:-.02em;font-variation-settings:normal;font-stretch:normal}
/* §3.5 Gradient text — the colour fallback paints FIRST. NOT optional: this
   codebase has already shipped an invisible heading from a missing gradient. */
.sx-grad,.sx-ui-eyebrow-g,.sx-ui-time,.sx-ui-mark{color:var(--pink)}
.sx-grad{color:var(--plum)}
.on-dusk .sx-grad{color:var(--on-dusk)}
@supports (background-clip:text) or (-webkit-background-clip:text){
.sx-grad,.sx-ui-eyebrow-g,.sx-ui-time,.sx-ui-mark{background:var(--gradient-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.sx-rule{height:1px;border:0;background:var(--g-rule);margin:0}
.sx-hair{height:1px;border:0;background:var(--hairline);margin:0}
.sx-measure{max-width:var(--measure)} .sx-measure-t{max-width:var(--measure-tight)}
.sx-drop::first-letter{initial-letter:3 3;font-family:var(--serif);font-style:italic;font-weight:600;color:var(--pink);padding-inline-end:.08em}
}

/* LAYOUT (§4) */
@layer layout{
/* §4.0 The page shell — one grid; children opt into a track by name */
.sx-page{display:grid;grid-template-columns:[full-start] var(--gutter) [wide-start] minmax(0,calc((var(--content-wide) - var(--content))/2)) [main-start] minmax(0,var(--content)) [main-end] minmax(0,calc((var(--content-wide) - var(--content))/2)) [wide-end] var(--gutter) [full-end]}
.sx-page>*{grid-column:main;min-width:0}
.sx-b-wide{grid-column:wide} .sx-b-full{grid-column:full}
/* overflow:clip, NEVER hidden — hidden makes a scroll container that silently
   kills ancestor position:sticky and every scroll-timeline lookup */
.sx-b{container-type:inline-size;padding-block:var(--band-y);position:relative;overflow:clip}
.sx-b-lg{padding-block:var(--band-y-lg)} .sx-b-sm{padding-block:var(--band-y-sm)}
.sx-in,.sx-in-wide,.sx-in-narrow{margin-inline:auto;padding-inline:var(--gutter)}
.sx-in{max-width:var(--content)}.sx-in-wide{max-width:var(--content-wide)}.sx-in-narrow{max-width:var(--content-narrow)}
/* §2.7 Grain — mandatory on every large brand-lit area */
.sx-grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:140px 140px;pointer-events:none;z-index:var(--z-base)}
.sx-grain>*{position:relative;z-index:var(--z-raise)}
.sx-head-block{display:flex;flex-direction:column;gap:var(--sp-4);max-width:var(--measure)}
.sx-head-block.is-wide{max-width:none}
.sx-b-defer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* §4.1 MASTHEAD SPLIT — asymmetric 7/5, flush left */
.sx-b-masthead{padding-block:var(--band-y-lg);background:var(--lit-ground)}
.sx-masthead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5cqi,80px);align-items:center}
.sx-masthead-copy{display:flex;flex-direction:column;gap:var(--sp-6);align-items:flex-start}
@container (max-width:900px){.sx-masthead{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}}
/* SOLO MASTHEAD — one centred column, no art. Added 2026-09-16 for the client
   home hero, which used to run the 7fr/5fr split with a .sx-rail-edge of three
   phones in the art column. That rail bleeds off the viewport by design, so
   with the launch cover gone the first thing a visitor saw was a device sliced
   in half by the window edge. Search-first and centred instead. The copy column
   keeps its flex-column rhythm and only changes its cross-axis. */
.sx-masthead-solo{grid-template-columns:minmax(0,1fr);justify-items:center}
.sx-masthead-solo .sx-masthead-copy{align-items:center;text-align:center;width:100%;max-width:840px;margin-inline:auto}
/* .sx-lede ships `margin:0` and a --measure-tight cap, so it needs the auto
   margins put back or it sits left inside a centred column. */
.sx-masthead-solo .sx-masthead-copy .sx-lede{margin-inline:auto}
.sx-masthead-solo .sx-masthead-copy .sx-search{width:100%}
.sx-masthead-solo .sx-masthead-copy .sx-chip-row{justify-content:center}

/* §4.2 DIPTYCH — the signature pattern */
.sx-b-diptych{padding-block:0}
.sx-diptych{display:grid;grid-template-columns:1fr 1px 1fr;align-items:stretch}
.sx-diptych-seam{background:var(--gradient);width:1px}
.sx-dip{position:relative;display:flex;flex-direction:column;gap:var(--sp-7);padding:var(--band-y) var(--gutter);min-width:0;container-type:inline-size}
.sx-dip-pro{background:var(--wash-cool)} .sx-dip-client{background:var(--wash-warm)}
.sx-dip-lab{align-self:flex-start}
.sx-dip-body{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}
.sx-dip-foot,.sx-slab-line,.sx-state-title,.sx-led-lab,.sx-wordmark,.sx-ribbon-item{font-family:var(--serif);font-style:italic;margin:0}
.sx-dip-foot{font-weight:500;font-size:var(--fs-d4);line-height:1.25;color:var(--plum)}
.sx-dip-client .sx-dip-lab,.sx-dip-client .sx-dip-foot{align-self:flex-end;text-align:end}
/* Mobile: a two-slide snap pair */
@container (max-width:820px){
.sx-diptych{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.sx-dip{scroll-snap-align:center} .sx-diptych-seam{display:none}}

/* §4.3 PINNED SCENE — sticky stage, named timeline (§6.4) */
.sx-b-scene{min-height:340vh;padding-block:0;timeline-scope:--sx-scene;view-timeline-name:--sx-scene;view-timeline-axis:block}
.sx-scene-sticky{position:sticky;top:0;height:100dvh;display:grid;align-content:center;padding-block:var(--band-y-sm)}
.sx-scene-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4cqi,72px);align-items:center;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.sx-scene-caps{position:relative;display:grid;min-height:16em}
.sx-beat{grid-area:1/1;display:flex;flex-direction:column;gap:var(--sp-4);align-self:center;opacity:0}
.sx-beat:first-child{opacity:1}
.sx-scene-dots{display:flex;gap:6px;margin-top:var(--sp-4)}
.sx-scene-dot{width:6px;height:6px;border-radius:var(--r-dot);background:var(--ink-4)}
.sx-scene-dot.is-on{background:var(--pink)}
.sx-scene-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
/* No scroll timelines: the beats stack as static panels, same content */
@supports not (animation-timeline:view()){
.sx-b-scene{min-height:0}
.sx-scene-sticky{position:static;height:auto;display:block}
.sx-scene-grid,.sx-scene-caps{grid-template-columns:minmax(0,1fr)}
.sx-scene-caps{display:block;min-height:0}
.sx-beat{opacity:1;padding-block:var(--sp-8)}}
@container (max-width:900px){.sx-scene-grid{grid-template-columns:minmax(0,1fr)}}

/* §4.4 BENTO FIELD — unequal tiles */
.sx-b-field{background:var(--paper)}
.sx-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6cqi,20px);grid-auto-rows:minmax(120px,auto)}
.sx-bento>*{min-width:0}
.sx-t-a{grid-column:span 5;grid-row:span 2} .sx-t-b{grid-column:span 3}
.sx-t-c{grid-column:span 4;grid-row:span 2} .sx-t-d{grid-column:span 3;grid-row:span 2}
.sx-t-e{grid-column:span 4} .sx-t-f{grid-column:span 5} .sx-t-g{grid-column:span 7}
@container (max-width:820px){
.sx-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
.sx-t-a,.sx-t-c,.sx-t-g{grid-column:span 6}
.sx-t-b,.sx-t-d,.sx-t-e,.sx-t-f{grid-column:span 3}
.sx-t-a,.sx-t-c,.sx-t-d{grid-row:span 1}}

/* §4.5 MARQUEE RIBBON — the ONE sanctioned loop */
.sx-b-ribbon{padding-block:0;border-block:1px solid var(--hairline);background:var(--paper);overflow:clip}
.sx-ribbon{display:flex;overflow:hidden;padding-block:var(--band-y-sm);mask-image:linear-gradient(90deg,transparent,var(--plum) 6%,var(--plum) 94%,transparent)}
.sx-ribbon-track{display:flex;align-items:center;gap:var(--sp-6);flex:none;padding-inline-end:var(--sp-6);will-change:transform}
.sx-ribbon-item{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:500;font-size:25px;line-height:1;color:var(--plum);text-decoration:none;white-space:nowrap;transition:color var(--dur-2) var(--ease)}
.sx-ribbon-item:hover{color:var(--pink)}
/* The separator is an ELEMENT, never a glyph character (Rule 6) */
.sx-ribbon-sep{width:3px;height:3px;border-radius:var(--r-dot);background:var(--pink);flex:none}

/* §4.6 MANIFESTO SLAB — type only */
.sx-b-slab{padding-block:var(--band-y-lg);background:var(--wash-flat)}
.sx-slab{display:flex;flex-direction:column;gap:var(--sp-8);align-items:flex-start}
.sx-slab-line{font-weight:500;font-size:var(--fs-d2);line-height:var(--lh-d2);letter-spacing:var(--tr-d2);color:var(--plum);max-width:var(--measure-tight);text-wrap:pretty}
.sx-slab-foot{display:flex;align-items:center;gap:var(--sp-5);width:100%;max-width:var(--measure)}
.sx-slab-foot .sx-rule{flex:1}

/* §4.7 LEDGER — values in cells, never checkmarks */
.sx-b-ledger{background:var(--wash-flat)}
.sx-ledger{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--hairline-2)}
.sx-led-h,.sx-led-c{padding:var(--sp-5);border-bottom:1px solid var(--hairline);display:flex;align-items:center;min-width:0}
.sx-led-h{font-family:var(--mono);font-size:var(--fs-eyebrow-s);font-weight:500;letter-spacing:var(--tr-eyebrow-s);text-transform:uppercase;color:var(--ink-3);border-bottom-color:var(--hairline-2);padding-block:var(--sp-3)}
.sx-led-lab{font-style:normal;font-weight:600;font-size:var(--fs-t2);color:var(--plum)}
.sx-led-usual{color:var(--ink-3);font-size:var(--fs-body-s)}
.sx-led-slayd{color:var(--plum);font-size:var(--fs-body-s);font-weight:600;background:var(--wash-warm);position:relative;font-variant-numeric:tabular-nums}
.sx-led-slayd::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--gradient-h)}
.sx-led-foot{padding:var(--sp-4) var(--sp-5) 0;font-size:var(--fs-cap);color:var(--ink-3)}
@container (max-width:720px){
.sx-ledger{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sx-led-lab{grid-column:1/-1;padding-block-end:var(--sp-2);border-bottom:0}
.sx-led-h:first-child{display:none}}

/* §4.8 HORIZONTAL ACT — once on the entire site */
.sx-b-act{min-height:420vh;padding-block:0;timeline-scope:--sx-act;view-timeline-name:--sx-act;view-timeline-axis:block}
.sx-act-sticky{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-7);overflow:clip}
.sx-act-track{display:flex;gap:clamp(16px,2cqi,32px);padding-inline:var(--gutter);flex:none;will-change:transform}
.sx-act-panel{flex:none;width:min(78cqi,620px);display:flex;flex-direction:column;gap:var(--sp-5)}
.sx-act-prog{height:2px;margin-inline:var(--gutter);background:var(--hairline);position:relative;overflow:clip}
.sx-act-prog::after{content:"";position:absolute;inset:0;background:var(--gradient-h);transform-origin:left center;scale:var(--sx-p,0) 1}
/* Fallback: a horizontal snap rail the visitor drags */
@supports not (animation-timeline:view()){
.sx-b-act{min-height:0;padding-block:var(--band-y)}
.sx-act-sticky{position:static;height:auto}
.sx-act-track{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.sx-act-panel{scroll-snap-align:center} .sx-act-prog{display:none}}

/* .sx-pin / .sx-pin-stage (pinned interior scrub) + adoption recipe: sx-ui.c */
/* §4.9 DEVICE STAGE — perspective on the PARENT. .sx-stage-stack + .sx-tilt:
   css/sx-ui.css */
.sx-b-stage{perspective:1600px}
.sx-stage{display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;position:relative}
.sx-stage-dev{transform-style:preserve-3d;transform:rotateY(-13deg) rotateX(5deg);will-change:transform}
.sx-stage-float{position:absolute;transform:translateZ(60px);z-index:var(--z-raise)}

/* §4.10 COUNTER-DRIFT — vertical bleed so the edges never expose */
.sx-b-drift{overflow:clip;background:var(--lit-ground-soft)}
.sx-drift{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2cqi,26px);align-items:start}
.sx-drift-col{display:flex;flex-direction:column;gap:clamp(14px,2cqi,26px);margin-block:-12%;padding-block:12%;will-change:transform}
@container (max-width:640px){.sx-drift{grid-template-columns:minmax(0,1fr)}}

/* §4.11 QUIET ROW — the anti-card band */
.sx-b-rows{background:var(--paper)}
.sx-rows{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.sx-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:var(--sp-5);padding-block:var(--sp-6);border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;transition:background-color var(--dur-2) var(--ease)}
a.sx-row:hover{background:var(--lit-pink-04)}
.sx-row-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sx-row-end{display:flex;align-items:center;gap:var(--sp-3);color:var(--ink-3)}
@container (max-width:560px){
.sx-row{grid-template-columns:24px minmax(0,1fr);row-gap:var(--sp-2)}
.sx-row-end{grid-column:2}}

/* §4.12 SEAM — arc-clipped connective band */
.sx-b-seam{min-height:clamp(120px,18vw,220px);padding-block:0;position:relative;display:flex;align-items:center;justify-content:center;clip-path:shape(from 0 0,hline to 100%,vline to 84%,curve to 0 84% with 50% 116%)}
@supports not (clip-path:shape(from 0 0,hline to 100%)){.sx-b-seam{clip-path:none}}

/* §4.13 FOOTER MONUMENT — .on-dusk, last, wordmark cropped by the viewport */
.sx-b-monument{padding-block:var(--band-y) 0;overflow:clip}
.sx-mon-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-8);padding-bottom:var(--sp-9)}
.sx-mon-col{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.sx-mon-col a{color:var(--ink-2);text-decoration:none;font-size:var(--fs-body-s);transition:color var(--dur-2) var(--ease)}
.sx-mon-col a:hover{color:var(--plum)}
.sx-mon-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);padding-block:var(--sp-5);border-top:1px solid var(--hairline);font-size:var(--fs-cap);color:var(--ink-3)}
.sx-mon-word{display:block;overflow:clip;margin-block-start:var(--sp-6)}
.sx-mon-word .sx-monument{display:block;margin-block-end:calc(var(--fs-monument) * -.24);text-align:center;font-weight:600;text-box:trim-start cap}

/* GROUND UTILITIES — last on purpose: same specificity as the band defaults,
   so order is the only thing letting them win. Never move up. */
/* Grounds */
.sx-g-lit{background:var(--lit-ground)} .sx-g-lit-soft{background:var(--lit-ground-soft)}
.sx-g-warm{background:var(--wash-warm)} .sx-g-cool{background:var(--wash-cool)}
.sx-g-flat{background:var(--wash-flat)} .sx-g-paper{background:var(--paper)}
.sx-g-wash{background:var(--wash)}

/* Snap rails (§6.9) — edge to edge, page padding INSIDE the track */
.sx-rail{display:flex;gap:clamp(12px,1.6cqi,22px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-inline:var(--gutter);scrollbar-width:thin;position:relative;container-type:scroll-state}
.sx-rail>*{scroll-snap-align:center;flex:none}
/* snapped: is answered by the snapped element and a container query cannot
   style its own container, so the container is each rail ITEM and what changes
   is its CHILD: <div class=sx-snap><div class=sx-snap-card> */
.sx-snap{container-type:scroll-state;scroll-snap-align:center;flex:none}
.sx-rail-edge{position:relative}
.sx-rail-edge::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:64px;pointer-events:none;opacity:0;transition:opacity var(--dur-2) var(--ease);background:linear-gradient(90deg,transparent,var(--paper))}
}

/* COMPONENTS (§5) */
@layer components{
/* Shared atoms — declared once so no recipe is duplicated (§10.4) */
.sx-btn,.sx-chip,.sx-tag,.sx-tile,.sx-av,.sx-bell,.sx-burger,.sx-step-btn,.sx-passfield-eye{display:inline-flex;align-items:center;justify-content:center;flex:none}
.sx-tile,.sx-ui-tile{border:1px solid transparent;color:var(--chip-pink);box-shadow:var(--glow-tile);background:var(--tint-tile) padding-box,var(--g-border-full) border-box}
.sx-tile-inv,.sx-ui-tile-inv{background:var(--gradient);border-color:transparent;color:var(--on-brand);box-shadow:var(--glow-rose)}

/* §5.1 Buttons — two verbs sitewide: Get started / See how it works */
.sx-btn{gap:8px;border-radius:var(--r-3);font-weight:600;font-size:13.5px;line-height:1;padding:13px 22px;border:0;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;white-space:nowrap;background:var(--paper);color:var(--plum);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.sx-btn svg,.sx-seg svg,.sx-field-err svg,.sx-alert svg{width:16px;height:16px;flex:none}
.sx-btn-primary{background:var(--gradient-btn);color:var(--ink-inv);box-shadow:var(--glow-rose)}
.sx-btn-primary:hover{transform:translateY(-1px);box-shadow:var(--glow-rose-lg)}
/* The shine sweep stays: it is hover-driven, not ambient (§5.1) */
.sx-btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);translate:-120% 0;transition:translate var(--dur-4) var(--ease)}
.sx-btn-primary:hover::after,.sx-btn-primary:focus-visible::after{translate:120% 0}
.sx-btn-ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline-2)}
.sx-btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--plum)}
.sx-btn-quiet{background:none;padding-inline:0;color:var(--ink-2)}
.sx-btn-quiet:hover{color:var(--plum);text-decoration:underline;text-underline-offset:4px}
/* Declared once — NOT a dark variant (§2.5) */
.sx-btn-dusk{background:var(--on-dusk);color:var(--dusk);box-shadow:none}
.sx-btn-dusk:hover{transform:translateY(-1px);box-shadow:var(--lift-3)}
.sx-btn-sm{font-size:12.5px;padding:10px 16px}
.sx-btn-lg{font-size:14.5px;padding:16px 30px}
.sx-btn-xl{font-size:15.5px;padding:19px 36px;border-radius:var(--r-4)}
.sx-btn-block{width:100%;display:flex}
.sx-btn[disabled],.sx-btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.sx-btn.is-busy{pointer-events:none}
.sx-btn.is-busy .sx-btn-lab{font-family:var(--mono);letter-spacing:.2em}

/* §5.2 Cards */
.sx-card{background:var(--paper);border-radius:var(--r-6);border:1px solid var(--hairline);box-shadow:var(--lift-1);padding:clamp(20px,2.2cqi,28px);position:relative;min-width:0}
/* Recipe A (§2.6) */
.sx-card-lit,.sx-card-price,.sx-seg,.sx-toast,.sx-search,.sx-select-pop,.sx-mega-pop,.sx-dev-chip,.sx-ui-card,.sx-ui-quick,.sx-ui-glance,.sx-ui-kpi{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box}
/* On dusk --card-fill is 5% white and recipe A paints a flat gradient block.
   Quiet glass card instead; the band is already the brand moment. */
.on-dusk :is(.sx-card-lit,.sx-card-price,.sx-seg,.sx-toast,.sx-search,.sx-select-pop,.sx-mega-pop){border:1px solid var(--hairline);background:var(--paper)}
.sx-card-lit{box-shadow:var(--lift-2);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.sx-card-lit:hover{transform:translateY(-3px);box-shadow:var(--lift-3)}
.sx-card-strong{border:1.8px solid transparent;background:var(--card-fill) padding-box,var(--g-border-full) border-box;box-shadow:var(--lift-3)}
.sx-card-quiet{background:var(--paper-3);border:0;box-shadow:none}
/* Crop and bleed (§7.4): a centred fully-visible screenshot is banned */
.sx-card-crop{overflow:clip;padding-bottom:0}
.sx-card-crop>.sx-crop-media{margin-inline-end:clamp(-64px,-6cqi,-24px);margin-block-end:clamp(-56px,-5cqi,-20px);display:block}
.sx-card-head{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.sx-card-foot{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--hairline)}
/* Gradient-border recipe B — when the fill is an image, a wash or glass */
.sx-edge{position:relative}
.sx-edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--g-border-strong);-webkit-mask:var(--mask2);-webkit-mask-composite:xor;mask:var(--mask2);mask-composite:exclude;pointer-events:none}
/* Bare gradient-stroked icon: no icon boxes on marketing */
.sx-ico,.sx-row-ico{width:24px;height:24px;color:var(--chip-pink);flex:none}
.sx-ico svg,.sx-row-ico svg{width:100%;height:100%}
.sx-tile{width:44px;height:44px;border-radius:var(--r-3)}
.sx-tile svg{width:60%;height:60%}
.sx-tile-lg{width:64px;height:64px;border-radius:var(--r-5)}
.sx-tile-sm{width:34px;height:34px;border-radius:var(--r-2)}
/* Avatars: rounded squares, radius = size/3.2 */
.sx-av,.sx-ui-av{--av:40px;width:var(--av);height:var(--av);border-radius:calc(var(--av)/3.2);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none;background:var(--gradient);color:var(--on-brand);font-family:var(--serif);font-style:italic;font-weight:600;font-size:calc(var(--av)*.4);line-height:1;letter-spacing:-.02em}
/* A photo avatar keeps the radius law (size/3.2) and object-fit:cover; the
   gradient stays behind as the fallback when there is no photo or the file
   fails, so all three data shapes still resolve (§7.5). */
.sx-av img,.sx-ui-av img{width:100%;height:100%;object-fit:cover}
.sx-av img,.sx-ui-av img{border-radius:inherit}
.sx-av.has-photo,.sx-ui-av.has-photo{box-shadow:0 0 0 1.5px var(--on-brand-line)}

/* §5.3 Pricing — two cards, both quoting SLAYD_PRO_PRICE */
.sx-card-price{border-radius:var(--r-7);padding:clamp(24px,2.6cqi,34px);box-shadow:var(--lift-2);display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;position:relative}
.sx-card-price.is-featured{border-width:1.5px;background:var(--card-fill) padding-box,var(--g-border-full) border-box;box-shadow:var(--lift-3)}
.sx-price-amt{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.sx-price-amt .sx-fig-xl{font-size:clamp(36px,4.4cqi,54px)}
.sx-price-per{font-size:var(--fs-body-s);font-weight:600;color:var(--ink-3)}
/* Bullets: an icon column or a hairline list, never a glyph */
.sx-price-list{list-style:none;margin:var(--sp-3) 0 0;padding-inline-start:0;display:flex;flex-direction:column}
.sx-price-list li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:var(--sp-3);padding-block:var(--sp-3);border-top:1px solid var(--hairline);font-size:var(--fs-body-s);color:var(--ink-2)}
.sx-price-list li:first-child{border-top:0}
.sx-price-ribbon{position:absolute;top:calc(var(--sp-4) * -1);inset-inline-end:var(--sp-6)}

/* §5.4 Fields */
.sx-field{position:relative;display:flex;flex-direction:column;min-width:0}
.sx-field-lab{font-family:var(--mono);font-size:var(--fs-eyebrow-s);font-weight:500;letter-spacing:var(--tr-eyebrow-s);text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;transition:color var(--dur-2) var(--ease)}
.sx-field :is(input,textarea,select),.sx-inp,.sx-select-btn{width:100%;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--r-3);padding:13px 15px;font-family:var(--sans);font-size:15px;color:var(--plum);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.sx-field :is(input,textarea)::placeholder{color:var(--ink-4)}
.sx-field :is(input,textarea):hover,.sx-inp:hover,.sx-select-btn:hover{border-color:var(--border)}
.sx-field :is(input,textarea):focus-visible,.sx-inp:focus-visible{border-color:var(--pink);box-shadow:var(--glow-focus);outline:none}
.sx-field.is-err :is(input,textarea),.sx-inp.is-err{border-color:var(--red)}
.sx-field-hint{font-size:var(--fs-cap);color:var(--ink-3);margin-top:6px}
.sx-field-err{font-size:var(--fs-cap);color:var(--red);margin-top:6px;display:flex;align-items:center;gap:6px}
.sx-field-row{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sx-field:has(:is(input,textarea):focus-visible) .sx-field-lab{color:var(--plum)}
.sx-select{position:relative;anchor-name:var(--sx-anchor,--sx-sel)}
.sx-select-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);text-align:start;cursor:pointer}
.sx-select-btn svg,.sx-step-btn svg,.sx-passfield-eye svg,.sx-row-end svg{width:14px;height:14px;flex:none}
.sx-select-pop{border-radius:var(--r-4);padding:var(--sp-3);box-shadow:var(--lift-3);display:flex;flex-wrap:wrap;gap:var(--sp-2);max-width:min(92vw,420px);z-index:var(--z-popover)}
.sx-select-pop:popover-open{position-anchor:var(--sx-anchor,--sx-sel);position-area:block-end span-inline-end;position-try-fallbacks:flip-block;margin-block-start:6px}
/* Squared segments and a stepper pair — this kills the fourteen native
   input[type=time] controls on the onboarding Hours grid */
.sx-datefield,.sx-timefield{display:flex;align-items:center;gap:var(--sp-2)}
.sx-dseg{width:100%;text-align:center;font-variant-numeric:tabular-nums}
.sx-datefield .sx-dseg-y{flex:1.4}
.sx-step{display:inline-flex;align-items:center;gap:var(--sp-1)}
.sx-step-btn{width:34px;height:34px;border-radius:var(--r-2);border:1px solid var(--hairline);background:var(--paper-2);color:var(--plum);cursor:pointer;transition:border-color var(--dur-2) var(--ease)}
.sx-step-btn:hover{border-color:var(--border)}
.sx-step-val{min-width:56px;text-align:center;font-weight:600;font-size:15px;color:var(--plum);font-variant-numeric:tabular-nums}
/* ONE password component with the reveal control (three inline copies die) */
.sx-passfield{position:relative}
.sx-passfield input{padding-inline-end:46px}
.sx-passfield-eye{position:absolute;inset-inline-end:6px;inset-block-start:50%;translate:0 -50%;width:34px;height:34px;border-radius:var(--r-2);border:0;background:none;color:var(--ink-3);cursor:pointer;transition:color var(--dur-2) var(--ease)}
.sx-passfield-eye:hover{color:var(--plum)}
@media (max-width:480px){.sx-select-native{display:block}.sx-select-house{display:none}}
/* Search bar — ids and the <form> are a contract (§11.7-9) */
.sx-search{display:flex;align-items:stretch;gap:var(--sp-2);border-radius:var(--r-4);box-shadow:var(--lift-2);padding:6px 6px 6px var(--sp-4);max-width:640px;width:100%}
.sx-search .sx-field{flex:1;justify-content:center}
.sx-search input{background:none;border:0;border-radius:0;padding:10px 0}
.sx-search input:focus-visible{box-shadow:none;border-color:transparent}
.sx-search-div{width:1px;background:var(--hairline);margin-block:var(--sp-2);flex:none}
/* Below 480 the fields stack and the control goes full width */
@media (max-width:480px){
.sx-search{flex-direction:column;align-items:stretch;gap:var(--sp-2);padding:var(--sp-3)}
.sx-search .sx-field{padding-inline:var(--sp-2)}
.sx-search .sx-btn{width:100%;justify-content:center}
.sx-search-div{width:auto;height:1px;margin:0 var(--sp-2)}
}

/* §5.5 Chips, tags, badges */
.sx-chip{gap:6px;font-weight:600;font-size:12.5px;line-height:1;color:var(--plum);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-1);padding:7px 14px;text-decoration:none;cursor:pointer;transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.sx-chip:hover{border-color:var(--plum);transform:translateY(-1px)}
.sx-chip.is-on{background:var(--gradient-btn);color:var(--ink-inv);border-color:transparent;box-shadow:var(--glow-rose)}
.sx-tag,.sx-badge{gap:5px;font-family:var(--mono);font-size:var(--fs-tag);font-weight:500;letter-spacing:var(--tr-tag);text-transform:uppercase;line-height:1;border-radius:var(--r-1);padding:5px 9px;color:var(--ink-3);background:var(--paper-3)}
.sx-tag-live{background:var(--green-bg);color:var(--green)}
.sx-tag-live::before{content:"";width:4px;height:4px;border-radius:var(--r-dot);background:currentColor;flex:none}
.sx-tag-soon{background:var(--paper-3);color:var(--ink-3)}
.sx-tag-grad{background:var(--gradient-btn);color:var(--ink-inv)}
.sx-badge{position:absolute;top:var(--sp-3);inset-inline-end:var(--sp-3);background:var(--gradient-btn);color:var(--ink-inv);z-index:var(--z-raise);display:inline-flex}

/* §5.6 Marketing header — six targets max, and it never grows */
.sx-head{position:sticky;top:0;z-index:var(--z-header);height:70px;container-type:scroll-state;background:transparent}
.sx-head-in{position:relative;height:70px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);padding-inline:var(--gutter);max-width:var(--content-wide);margin-inline:auto;transition:background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
/* Stuck-state glass is Chromium-only; elsewhere a header over a dusk band is
   --plum on --dusk. Other engines get it always-on. */
@supports not (container-type:scroll-state){
.sx-head-in{background:var(--glass-fill);backdrop-filter:var(--glass-blur);box-shadow:var(--lift-2)}
.sx-head-in::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--g-rule)}
}
.sx-head-nav{display:flex;align-items:center;gap:var(--sp-2)}
.sx-head-nav :is(a,button){font-size:13.5px;font-weight:600;color:var(--plum);text-decoration:none;padding:9px 12px;border-radius:var(--r-2);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background-color var(--dur-2) var(--ease)}
.sx-head-nav :is(a,button):hover{background:var(--lit-pink-08)}
.sx-head-nav svg{width:12px;height:12px}
.sx-wordmark{font-weight:600;font-size:30px;line-height:1;letter-spacing:-.03em;text-decoration:none;padding-block:2px}
.sx-bell{position:relative;width:38px;height:38px;border-radius:var(--r-2);border:0;background:none;color:var(--plum);cursor:pointer}
.sx-bell svg,.sx-burger svg{width:19px;height:19px}
.sx-bell-dot{position:absolute;top:7px;inset-inline-end:8px;min-width:6px;height:6px;border-radius:var(--r-dot);background:var(--pink)}
/* Mega-menu: popover + anchor positioning gives top layer, light dismiss, ES */
/* Same --sx-anchor ident on trigger and popover to run more than one */
.sx-mega{anchor-name:var(--sx-anchor,--sx-mega)}
.sx-mega-pop{border-radius:var(--r-7);padding:var(--sp-6);box-shadow:var(--lift-4);z-index:var(--z-popover);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-7);max-width:min(94vw,720px);opacity:0;translate:0 -8px;transition:opacity var(--dur-3) var(--ease),translate var(--dur-3) var(--ease),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete}
.sx-mega-pop:popover-open{opacity:1;translate:0 0;position-anchor:var(--sx-anchor,--sx-mega);position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin-block-start:8px}
@starting-style{.sx-mega-pop:popover-open{opacity:0;translate:0 -8px}}
.sx-mega-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.sx-mega-cols a{display:block;padding:9px 11px;border-radius:var(--r-2);font-size:var(--fs-body-s);font-weight:500;color:var(--ink-2);text-decoration:none;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.sx-mega-cols a:hover{background:var(--lit-pink-08);color:var(--plum)}
.sx-burger{width:40px;height:40px;border-radius:var(--r-2);border:0;background:none;color:var(--plum);cursor:pointer;display:none}
/* display:none when closed, NOT opacity:0 — an invisible full-width sheet
   swallows every click under it. allow-discrete keeps both ends animated. */
.sx-mnav{position:fixed;inset:70px 0 auto;z-index:var(--z-popover);background:var(--glass-fill);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--hairline);padding:var(--sp-5) var(--gutter) var(--sp-8);display:none;flex-direction:column;gap:var(--sp-2);opacity:0;translate:0 -12px;transition:opacity var(--dur-3) var(--ease),translate var(--dur-3) var(--ease),display var(--dur-3) allow-discrete}
.sx-head.is-open .sx-mnav{display:flex;opacity:1;translate:0 0}
@starting-style{.sx-head.is-open .sx-mnav{opacity:0;translate:0 -12px}}
/* Scroll lock with zero JS */
body:has(.sx-head.is-open){overflow:hidden}
@media (max-width:880px){.sx-burger{display:inline-flex}.sx-head-nav.is-desk{display:none}}

/* §5.8 Tabs — ONE segmented control, squared track, gradient active item */
.sx-seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-3)}
.sx-seg :is(button,a){display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;border-radius:var(--r-2);padding:9px 14px;font-family:var(--mono);font-size:var(--fs-eyebrow-s);font-weight:500;letter-spacing:var(--tr-eyebrow-s);text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.sx-seg svg{width:14px;height:14px}
.sx-seg [aria-selected="true"],.sx-seg .is-on{background:var(--gradient-btn);color:var(--ink-inv);box-shadow:var(--glow-rose)}

/* §5.9 Sheets — house-designed, never a native alert */
.sx-scrim{position:fixed;inset:0;background:var(--overlay);z-index:var(--z-scrim)}
.sx-sheet{opacity:0;translate:0 14px;border:0;padding:0;transition:opacity var(--dur-3) var(--ease),translate var(--dur-3) var(--ease),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete}
.sx-sheet:popover-open{opacity:1;translate:0 0}
@starting-style{.sx-sheet:popover-open{opacity:0;translate:0 14px}}
.sx-sheet::backdrop{background:var(--overlay)}
.sx-sheet-in{background:var(--paper);border-radius:var(--r-8);box-shadow:var(--lift-4);padding:clamp(24px,4vw,34px);max-width:min(94vw,440px);display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.sx-sheet-actions{display:flex;flex-direction:column;gap:var(--sp-3);width:100%;margin-top:var(--sp-3)}
.sx-sheet-actions .sx-btn-primary{border-radius:var(--r-4);padding-block:15px}

/* §5.11 Toasts, the one loading indicator, skeletons, inline alerts */
.sx-toast{border-radius:var(--r-4);box-shadow:var(--lift-3);padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:6px;max-width:380px;z-index:var(--z-toast)}
.sx-toast.is-err .sx-eyebrow{color:var(--red)}
.sx-toast.is-err .sx-eyebrow::before{background:var(--red)}
/* The conic square (pay.js:267) */
.sx-spin{width:34px;height:34px;border-radius:var(--r-3);padding:3px;flex:none;background:conic-gradient(from 0turn,rgba(0,0,0,0) 0 .04turn,var(--pink) .42turn,var(--purple) .78turn,rgba(0,0,0,0) .96turn),var(--soft-pink);-webkit-mask:var(--mask2);-webkit-mask-composite:xor;mask:var(--mask2);mask-composite:exclude;animation:sx-spin-r var(--dur-5) linear infinite}
.sx-spin-sm{width:22px;height:22px;border-radius:var(--r-1);padding:2.4px}
@keyframes sx-spin-r{to{transform:rotate(360deg)}}
/* Skeletons shaped like the real content — the default for list/card loads */
.sx-skel{background:linear-gradient(100deg,var(--paper-3) 40%,var(--soft-pink) 50%,var(--paper-3) 60%) 0 0/300% 100%;border-radius:var(--r-3);min-height:14px}
.sx-skel-line{height:12px;border-radius:var(--r-1)}
.sx-skel-card{height:180px;border-radius:var(--r-6)}
@media (prefers-reduced-motion:no-preference){.sx-skel{animation:sx-skel 1.4s linear infinite}}
@keyframes sx-skel{to{background-position:-300% 0}}
/* A toast may NEVER be the only feedback for a form failure */
.sx-alert{display:flex;gap:var(--sp-3);align-items:flex-start;border-radius:var(--r-3);padding:12px 14px;font-size:var(--fs-body-s);background:var(--red-bg);color:var(--red);border:1px solid var(--red)}
.sx-alert-ok{background:var(--green-bg);color:var(--green);border-color:var(--green)}

/* §5.12 Four states, one vocabulary */
.sx-state,.state-empty,.state-stale,.state-guard{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);text-align:center;padding:clamp(32px,5cqi,56px) var(--sp-5);border-radius:var(--r-6);border:1px solid var(--hairline);background:var(--paper)}
.state-loading{display:flex;flex-direction:column;gap:var(--sp-3)}
.sx-state-title{font-weight:600;font-size:var(--fs-d4);color:var(--plum)}
.sx-state-body{font-size:var(--fs-body-s);color:var(--ink-3);max-width:44ch;margin:0}
.sx-state .sx-tile,.state-empty .sx-tile,.state-stale .sx-tile,.state-guard .sx-tile{width:44px;height:44px}
.state-stale .sx-tile{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)}
.sx-state-quiet{background:var(--paper-3);border:0}
.sx-state-invite{background:var(--wash-warm)}
.sx-state-success .sx-tile{background:var(--green-bg);border-color:var(--green);color:var(--green)}
}

/* MOTION (§6) Motion is a function of the user's hand, or it does not exist */
@layer motion{
@keyframes sx-rise{from{opacity:0;translate:0 26px}72%{opacity:1;translate:0 -3px}to{opacity:1;translate:0 0}}
/* §6.2 `both` is mandatory or it snaps back */
@supports (animation-timeline:view()){
.sx-rise{animation:sx-rise linear both;animation-timeline:view();animation-range:entry 12% cover 38%}
.sx-rise-g>*{animation:sx-rise linear both;animation-timeline:view();animation-range:entry calc(6% + var(--i,0) * 5%) cover calc(30% + var(--i,0) * 5%)}
.sx-beat{animation:sx-beat linear both;animation-timeline:--sx-scene}
.sx-scene-4 .sx-beat:nth-child(1){animation-range:contain 0% contain 22%}
.sx-scene-4 .sx-beat:nth-child(2){animation-range:contain 22% contain 47%}
.sx-scene-4 .sx-beat:nth-child(3){animation-range:contain 47% contain 72%}
.sx-scene-4 .sx-beat:nth-child(4){animation-range:contain 72% contain 100%}
.sx-scene-3 .sx-beat:nth-child(1){animation-range:contain 0% contain 30%}
.sx-scene-3 .sx-beat:nth-child(2){animation-range:contain 30% contain 64%}
.sx-scene-3 .sx-beat:nth-child(3){animation-range:contain 64% contain 100%}
.sx-scene-stage{animation:sx-flat linear both;animation-timeline:--sx-scene;animation-range:entry 0% contain 26%}
.sx-stage-dev{animation:sx-flat linear both;animation-timeline:view();animation-range:entry 10% cover 46%}
.sx-act-track{animation:sx-act linear both;animation-timeline:--sx-act;animation-range:contain 0% contain 100%}
.sx-act-prog::after{animation:sx-actp linear both;animation-timeline:--sx-act;animation-range:contain 0% contain 100%}
.sx-drift-col:nth-child(odd){animation:sx-drift-a linear both;animation-timeline:view()}
.sx-drift-col:nth-child(even){animation:sx-drift-b linear both;animation-timeline:view()}
/* §6.6 Kinetic type, restrained: ONE element per page */
.sx-kinetic{animation:sx-kinetic linear both;animation-timeline:view();animation-range:entry 20% cover 52%}
.sx-kinetic-arch{animation:sx-kinetic-w linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
.sx-dim,.sx-wipe,.sx-head-block :is(.sx-d2,.sx-d3){animation:sx-dim linear both;animation-timeline:view();animation-range:entry 24% cover 46%;padding-block-end:.28em;mask-image:linear-gradient(90deg,#000 0 var(--sx-r),rgba(0,0,0,.20) var(--sx-r))}
}
/* Firefox and anything without scroll timelines keeps today's IO + .in class */
@supports not (animation-timeline:view()){
.sx-rise,.sx-rise-g>*{opacity:0;translate:0 26px;transition:opacity var(--dur-4) var(--ease),translate var(--dur-4) var(--ease)}
.sx-rise.in,.sx-rise-g.in>*{opacity:1;translate:0 0}
.sx-rise-g.in>*{transition-delay:calc(var(--i,0) * 60ms)}
}
/* == HERO ENTRANCE BLUR == Per-word blur(12px)->0. ONE-SHOT, on load, hero
   headline ONLY — §10.5 is amended for this case. Split words into
   <span style="--i:n" aria-hidden>, full string in aria-label. */
.sx-hero-words>*{display:inline-block;animation:sx-hero-word var(--dur-5) var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms);will-change:filter,opacity}
@keyframes sx-hero-word{from{opacity:0;translate:0 22px;filter:blur(12px)}
  70%{opacity:1;translate:0 -2px;filter:blur(0)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes sx-beat{0%{opacity:0;translate:0 12px}11%{opacity:1;translate:0 -2px}16%,86%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -12px}}
@keyframes sx-flat{from{transform:rotateY(-13deg) rotateX(5deg)}78%{transform:rotateY(1.6deg) rotateX(-.6deg)}to{transform:rotateY(0deg) rotateX(0deg)}}
@keyframes sx-kinetic{from{font-variation-settings:'wght' 400}to{font-variation-settings:'wght' 560}}
@keyframes sx-kinetic-w{from{font-variation-settings:'wdth' 96,'wght' 700}to{font-variation-settings:'wdth' 118,'wght' 700}}
@keyframes sx-dim{from{--sx-r:0%}to{--sx-r:100%}}
@keyframes sx-act{from{translate:0 0}to{translate:calc(-100% + 92cqi) 0}}
@keyframes sx-actp{from{scale:0 1}to{scale:1 1}}
@keyframes sx-drift-a{from{translate:0 7%}to{translate:0 -7%}}
@keyframes sx-drift-b{from{translate:0 -7%}to{translate:0 7%}}
/* §6.3 Editorial pagination, not a widget: scale-x, never width */
.sx-prog{position:fixed;inset:0 0 auto;height:2px;z-index:var(--z-progress);background:var(--gradient-h);transform-origin:left center;scale:0 1;pointer-events:none}
@supports (animation-timeline:scroll()){.sx-prog{animation:sx-prog linear both;animation-timeline:scroll(root block)}}
@keyframes sx-prog{from{scale:0 1}to{scale:1 1}}
/* §4.5 The ribbon — the ONE sanctioned looping animation on the site */
.sx-ribbon-track{animation:sx-marquee 46s linear infinite}
/* Hover SLOWS the one permitted loop to 2.5x; focus-within stops it dead (a
   keyboard user is reading, not browsing). Caveat: a duration change re-maps
   elapsed time, so the track steps once on hover. Pause is the jump-free half
   and the keyboard path gets it. */
.sx-ribbon:hover .sx-ribbon-track{animation-duration:115s}
.sx-ribbon:focus-within .sx-ribbon-track{animation-play-state:paused}
@keyframes sx-marquee{to{translate:-50% 0}}
/* §6.7 Aurora border — hover/focus ONLY */
@keyframes sx-spin-a{to{--sx-a:360deg}}
@media (hover:hover) and (pointer:fine){
.sx-card-lit:hover,.sx-card-lit:focus-within{background:var(--card-fill) padding-box,conic-gradient(from var(--sx-a),var(--pink),var(--purple),var(--peri),var(--pink)) border-box;animation:sx-spin-a 7s linear infinite}
}
/* §6.8 Scroll-state affordances — no listener, no class toggling, no thrash */
@container scroll-state(stuck:top){
.sx-head-in{background:var(--glass-fill);backdrop-filter:var(--glass-blur);box-shadow:var(--lift-2)}
.sx-head-in::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--g-rule)}
}
@container scroll-state(scrollable:right){.sx-rail-edge::after{opacity:1}}
.sx-snap-card{opacity:.55;transition:opacity var(--dur-3) var(--ease)}
@container scroll-state(snapped:inline){.sx-snap-card{opacity:1}}
/* §6.9 Native scroll pagination */
@supports selector(::scroll-button(right)){
.sx-rail-marks{scroll-marker-group:after;scrollbar-width:none}
.sx-rail-marks>*::scroll-marker{content:"";width:6px;height:6px;border-radius:var(--r-dot);background:var(--ink-4);margin:0 4px}
.sx-rail-marks>*::scroll-marker:target-current{background:var(--pink)}
.sx-rail-marks::scroll-marker-group{display:flex;justify-content:center;align-items:center;padding-block:var(--sp-5)}
}
/* .sx-blur-edge (progressive blur ramp) is in css/sx-ui.css */

/* == BORDER TRAIL == One 5px squared dot riding the card's border. The quiet
   alternative to the conic aurora (§6.7), same law: hover and focus ONLY.
   .sx-card-price carries it, .sx-card-lit keeps the conic, never both. */
@supports (offset-path:rect(0 auto auto 0)){
@media (hover:hover) and (pointer:fine){
.sx-trail,.sx-card-price{position:relative}
.sx-trail::after,.sx-card-price::after{content:"";position:absolute;width:5px;height:5px;
  border-radius:var(--r-dot);background:var(--pink);box-shadow:0 0 9px var(--lit-pink-22);
  offset-path:rect(0 auto auto 0 round var(--trail-r,var(--r-6)));offset-distance:0%;offset-rotate:0deg;
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
.sx-card-price::after{--trail-r:var(--r-7)}
:is(.sx-trail,.sx-card-price):hover::after,
:is(.sx-trail,.sx-card-price):focus-within::after{opacity:1;animation:sx-trail 1.8s linear infinite}
}}
@keyframes sx-trail{to{offset-distance:100%}}


/* §6.11 Reduced motion — the SAME site, standing still */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.sx-rise,.sx-rise-g>*,.sx-scene *,.sx-beat,.sx-act-track,.sx-drift-col,.sx-stage-dev,.sx-scene-stage{animation-timeline:none!important;opacity:1!important;translate:none!important;transform:none!important}
/* Beats share ONE grid area; forcing opacity:1 without unstacking paints four
   captions on top of each other. CSS-only, so home.js's JS branch can go. */
.sx-b-scene,.sx-b-act{min-height:0!important}
.sx-scene-sticky,.sx-act-sticky{position:static!important;height:auto!important;display:block!important}
.sx-scene-grid{grid-template-columns:minmax(0,1fr)!important}
.sx-scene-caps{display:block!important;min-height:0!important}
.sx-beat{padding-block:var(--sp-6)}
.sx-act-track{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory}
.sx-act-panel{scroll-snap-align:center}
.sx-act-prog{display:none!important}
.sx-ribbon-track{animation:none!important}
.sx-hero-words>*{filter:none!important}
.sx-trail::after,.sx-card-price::after{animation:none!important;opacity:0!important}
.sx-tilt-layer{transform:none!important}
.sx-cursor,.sx-skel{display:none!important}
}
}

/* ENHANCE (§2.10 squircles · §8.4 fallbacks · utilities) */
@layer enhance{
/* == FOUNDER RULE — THE MARK IS NEVER CLIPPED (overrides §4.13) ==
   text-box-trim's alphabetic edge sits on the baseline and shears the y's
   descender: the logo rendered "slavd". Marks opt out of trimming and carry
   descender room. In @layer enhance so it beats .sx-page :is(h1..h4). */
.sx-wordmark,.sx-monument,.sx-ui-mark{text-box:none}
.sx-wordmark,.sx-ui-mark{line-height:1.18;padding-block-end:.06em;overflow:visible}
.sx-mon-word,.sx-mon-word .sx-monument{overflow:visible}
.sx-mon-word .sx-monument{line-height:1.06;margin-block-end:0;padding-block-end:.09em;text-align:center}
/* the footer monument UNCROPS: the whole word sits above the band edge */
.sx-b-monument{padding-block:var(--band-y) var(--band-y-sm)}

/* == THE OFFICIAL MARK == re-coloured off its own gradient ramp so no white
   matting survives on the alpha edge: composites clean on --dusk. The box
   comes from CSS, so it costs zero CLS. Swap: --logo-src. Size: --logo-h. */
.sx-logo{display:block;height:var(--logo-h,30px);width:auto;aspect-ratio:1200/525;object-fit:contain;flex:none}
.sx-mon-logo{--logo-h:clamp(64px,17cqi,196px);margin-inline:auto}
.on-dusk .sx-logo{filter:none}
@supports (corner-shape:squircle){
.sx-card,.sx-btn,.sx-inp,.sx-chip,.sx-av,.sx-tile,.sx-card-price,.sx-panel,.sx-dev-phone,.sx-ui-card,.sx-ui-av,.sx-ui-tile,.sx-ui-quick,.sx-field :is(input,textarea){corner-shape:squircle}
}
/* §8.4 The five photo-free fallbacks */
/* FB-A · Grained field — the PRISM idea rendered directly */
.sx-fb-a{position:relative;background:var(--lit-ground);overflow:clip;aspect-ratio:3/2;border-radius:var(--r-8);clip-path:shape(from 0 0,hline to 100%,vline to 88%,curve to 0 88% with 50% 112%)}
.sx-fb-a::after,.sx-fb-b::after,.sx-fb-a::before{content:"";position:absolute;inset-inline:8%;top:58%;height:1px;background:var(--g-rule)}
.sx-fb-a-soft{background:var(--lit-ground-soft)}
@supports not (clip-path:shape(from 0 0,hline to 100%)){.sx-fb-a{clip-path:none}}
/* FB-B · Typographic plate — type as the image */
.sx-fb-b{position:relative;overflow:clip;aspect-ratio:4/5;border-radius:var(--r-8);display:flex;align-items:flex-end;padding:var(--sp-6);background:var(--dusk-ground);color:var(--on-dusk);container-type:inline-size}
.sx-fb-b .sx-monument{position:relative;color:var(--on-dusk);margin-block-end:calc(var(--fs-monument) * -.2);margin-inline-start:-.06em}
/* FB-C · UI crop — the most product-honest fallback */
.sx-fb-c{position:relative;overflow:clip;border-radius:var(--r-8);background:var(--wash-cool);padding:clamp(20px,3cqi,40px) 0 0 clamp(20px,3cqi,40px);display:flex;aspect-ratio:3/2;container-type:inline-size}
.sx-fb-c-warm{background:var(--wash-warm)}
.sx-fb-c>*{margin-block-end:-14%;margin-inline-end:-16%;flex:none}
/* FB-D · Material band — grades seven unrelated frames into one set */
.sx-fb-d{position:relative;overflow:clip;border-radius:var(--r-8);aspect-ratio:4/5;background:var(--paper-3)}
.sx-fb-d img{width:100%;height:100%;object-fit:cover;filter:saturate(.25)}
.sx-fb-d::before{content:"";position:absolute;inset:0;mix-blend-mode:multiply;background:linear-gradient(150deg,var(--lit-pink-14),var(--lit-peri-14))}
.sx-fb-d::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:140px 140px;pointer-events:none}
/* FB-E · Rule field — for quiet slots where any image would be noise */
.sx-fb-e{position:relative;overflow:clip;border-radius:var(--r-8);aspect-ratio:21/9;background-image:var(--dot-grid);background-size:26px 26px;background-color:var(--paper);display:flex;align-items:center;justify-content:center;mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 42%,transparent 88%)}
.sx-fb-e::before{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:var(--g-rule)}
.sx-fb-e .sx-eyebrow{position:relative;background:var(--paper);padding-inline:var(--sp-4)}
/* Utilities — layout only */
.sx-stack{display:flex;flex-direction:column}
.sx-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.sx-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.sx-gap-2{gap:var(--sp-2)}.sx-gap-3{gap:var(--sp-3)}.sx-gap-4{gap:var(--sp-4)}.sx-gap-5{gap:var(--sp-5)}
.sx-gap-6{gap:var(--sp-6)}.sx-gap-7{gap:var(--sp-7)}.sx-gap-8{gap:var(--sp-8)}.sx-gap-9{gap:var(--sp-9)}
.sx-center{text-align:center}
.sx-deco{pointer-events:none;user-select:none}
.sx-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2cqi,28px)}
.sx-panel{background:var(--paper);border-radius:var(--r-8);border:1px solid var(--hairline);box-shadow:var(--lift-2);padding:clamp(22px,3cqi,38px)}
}

/* == THE CASCADE GUARD — unlayered, deliberately ==
   slayd.css is unlayered, and an unlayered declaration outranks every layered
   one whatever its specificity — so its *{margin:0;padding:0}, bare button and
   input resets and `a` colour erase what sx.css declares (measured:
   .sx-b-masthead padding-top 0, .sx-search 37px tall, .sx-btn-primary
   transparent). revert-layer rolls them off the system subtree; @layer reset
   re-lays the zero baseline where sx.css outranks it. Unlayered yet it beats
   slayd.css despite loading FIRST: `.sx-wrap *` (0,1,0) vs `*` (0,0,0).
   SCOPE: .sx-wrap, .sx-auth, or .sx-sys (stamped by sx-ui.js on every frame
   and screen, so a mockup is right wherever it lands). */
.sx-wrap,.sx-auth,.sx-sys,:is(.sx-wrap,.sx-auth,.sx-sys) *{margin:revert-layer;padding:revert-layer}
:is(.sx-wrap,.sx-auth,.sx-sys) :is(a,button,input,select,textarea){color:revert-layer;background:revert-layer;border:revert-layer;font:revert-layer;text-decoration:revert-layer}
@layer reset{
:is(.sx-wrap,.sx-auth,.sx-sys) *{margin:0;padding:0}
:is(.sx-wrap,.sx-auth,.sx-sys) :is(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote){margin:0;padding:0}
:is(.sx-wrap,.sx-auth,.sx-sys) :is(button,input,select,textarea){font:inherit;color:inherit}
:is(.sx-wrap,.sx-auth,.sx-sys) button{border:0;background:none;cursor:pointer}
:is(.sx-wrap,.sx-auth,.sx-sys) a{color:inherit;text-decoration:none;cursor:pointer}
}
.sx-wrap,.sx-auth{background:var(--paper);color:var(--plum);font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* == COEXISTENCE SHIM — unlayered. slayd.css loads after, so its :root wins
   every shared token: the font stacks would lose their metric-matched
   fallbacks (§3.6) and --green its AA fix. :root:root out-specifies a bare
   :root regardless of order. */
:root:root{
--green:#357A57;
--serif:'Cormorant Garamond',var(--serif-fb),Georgia,serif;
--sans:'DM Sans',var(--sans-fb),-apple-system,BlinkMacSystemFont,sans-serif;
--mono:'DM Mono','SF Mono',ui-monospace,monospace;
}