/* ==========================================================================
   Karl Chevalier — Creator Platform Design System
   v3 · pared-back homepage · mobile-first · light canvas, creator colour
   ========================================================================== */

/* ---------- 0. FONTS ----------
   Served from this website, not Google, so no visitor details go to a third party.
   Bricolage Grotesque, Inter and JetBrains Mono are all under the SIL Open Font
   License 1.1. Latin and Latin Extended only; a page downloads a file only when
   it uses a character in that file's range. The two main files are preloaded in
   each page's <head>. */
/* Bricolage Grotesque, latin-ext */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Bricolage Grotesque, latin */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Inter, latin-ext */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Inter, latin */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* JetBrains Mono, latin-ext */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* JetBrains Mono, latin */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- 1. TOKENS ---------- */
:root{
  /* ink + paper */
  --ink:        #191320;
  --ink-2:      #4A4152;
  --ink-3:      #7E7488;
  --ink-4:      #ABA2B2;
  --paper:      #FCFAF6;
  --paper-2:    #FFFFFF;
  --paper-3:    #F4F0E9;

  /* creator spectrum */
  --violet:     #5B3DF5;
  --violet-2:   #8265FF;
  --violet-ink: #3B23C4;
  --violet-mid: #9B4BF0;
  --violet-rgb: 91,61,245;       /* for tints: rgba(var(--violet-rgb),.3) */
  --violet-mid-rgb: 155,75,240;
  --coral:      #FF5C72;
  --coral-ink:  #D8304A;
  --teal:       #2FC9C0;
  --teal-ink:   #10807A;
  --amber:      #FFA84B;
  --amber-ink:  #A85B10;
  --lime:       #C9F24E;
  --sun:        #FFD166;

  /* lines + surfaces */
  --line:       rgba(25,19,32,.09);
  --line-2:     rgba(25,19,32,.14);
  --tint:       rgba(25,19,32,.035);

  /* gradients */
  --g-violet:   linear-gradient(135deg,#5B3DF5 0%,#9B4BF0 52%,#FF5C72 100%);

  /* elevation — warm-tinted; on cream a grey shadow reads as dirt */
  --sh-1: 0 1px 2px rgba(61,40,30,.04), 0 2px 10px -4px rgba(61,40,30,.07);
  --sh-2: 0 1px 2px rgba(61,40,30,.04), 0 14px 32px -12px rgba(61,40,30,.15);
  --sh-3: 0 2px 4px rgba(61,40,30,.04), 0 28px 60px -22px rgba(61,40,30,.20);

  /* geometry */
  --r-xs: 10px; --r-sm: 14px; --r: 22px; --r-lg: 30px; --r-xl: 40px; --r-pill: 999px;

  /* rhythm */
  --pad: clamp(18px, 5vw, 40px);
  --sec: clamp(76px, 11vw, 150px);
  --maxw: 1240px;

  /* type */
  --f-display: "Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-body: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.32,.72,0,1);
  --t-fast: .18s var(--e-out);
  --t: .34s var(--e-out);
}

/* ---- page colour ----
   The site's accent is violet. The Commerce and Membership pages wear their
   build's own colour instead, the one the nav gives them (coral, teal), by
   swapping the accent tokens: <body data-theme="shop|members">. Deep shades
   stand in for "violet" so white text on buttons stays readable. The brand
   mark, the primary buttons ("Get started"), the Creator build's own marks and
   the Soft example style keep violet, so every page still carries the brand. */
[data-theme="shop"]{
  --violet:#D8304A;--violet-2:#FF5C72;--violet-ink:#B01E37;--violet-mid:#F0435E;
  --violet-rgb:216,48,74;--violet-mid-rgb:255,92,114;
  --g-violet:linear-gradient(135deg,#C8243F 0%,#FF5C72 52%,#FF8A5B 100%);
}
[data-theme="members"]{
  --violet:#10807A;--violet-2:#2FC9C0;--violet-ink:#0B5F5A;--violet-mid:#14968E;
  --violet-rgb:16,128,122;--violet-mid-rgb:20,150,142;
  --g-violet:linear-gradient(135deg,#0B5F5A 0%,#10807A 45%,#1FAEA4 100%);
}
.brand,.btn--primary,[data-build="home"],.bx--soft,.flip__b[data-show="soft"]{
  --violet:#5B3DF5;--violet-2:#8265FF;--violet-ink:#3B23C4;--violet-mid:#9B4BF0;
  --violet-rgb:91,61,245;--violet-mid-rgb:155,75,240;
  --g-violet:linear-gradient(135deg,#5B3DF5 0%,#9B4BF0 52%,#FF5C72 100%);
}


/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
html{scroll-padding-top:clamp(84px,12vw,104px)}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-size:16px;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
::selection{background:var(--violet);color:#fff}

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill);
  transform:translateY(-200%);transition:transform var(--t);font-weight:600;font-size:.9rem;
}
.skip:focus{transform:none}

.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;
}

/* film grain — gives the flat light canvas a premium, printed feel */
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2}
.section{padding-block:var(--sec);position:relative}
/* the homepage runs tighter than the inner pages — it's a tour, not a read */
.home{--sec:clamp(48px,6vw,84px)}

/* ---------- 3. TYPOGRAPHY ---------- */
.h-display{
  font-family:var(--f-display);
  font-size:clamp(2.45rem,8.8vw,5rem);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:600;
  text-wrap:balance;
}
.h2{
  font-family:var(--f-display);
  font-size:clamp(2rem,5.6vw,3.5rem);
  line-height:1.03;
  letter-spacing:-.03em;
  font-weight:600;
  text-wrap:balance;
}
.h3{
  font-family:var(--f-display);
  font-size:clamp(1.35rem,3.1vw,2.1rem);
  line-height:1.15;
  letter-spacing:-.024em;
  font-weight:600;
}
.lede{
  font-size:clamp(1.02rem,1.9vw,1.2rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:33em;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex;align-items:center;gap:10px;
  margin-bottom:22px;
}
.eyebrow--on{color:var(--ink-2)}
/* the homepage's section labels ("Taking it seriously", "What it costs"…)
   lead a tour rather than sit quietly over a long read, so they're set
   bigger, bolder and darker there. Needs the 700 weight of the mono face,
   which only the homepage loads. */
.home .eyebrow,
.home .exp__label{font-size:clamp(.78rem,1.4vw,.88rem);font-weight:700;letter-spacing:.12em;color:var(--ink-2)}

.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(201,242,78,.9);
  animation:pulse 2.6s var(--e-soft) infinite;flex:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,242,78,.85)}
  60%,100%{box-shadow:0 0 0 12px rgba(201,242,78,0)}
}

.grad{
  background:var(--g-violet);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  background-size:180% 180%;
  animation:drift 9s ease-in-out infinite;
}
@keyframes drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* section headers */
.shead{max-width:820px;margin-bottom:clamp(38px,6vw,64px)}
.shead__lede{margin-top:20px;font-size:clamp(1rem,1.7vw,1.13rem);color:var(--ink-2);line-height:1.6;max-width:36em}

/* ---------- 4. BUTTONS ---------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);
  border-radius:var(--r-pill);
  font-weight:600;font-size:.97rem;letter-spacing:-.012em;
  line-height:1;
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  will-change:transform;
  position:relative;overflow:hidden;
  white-space:nowrap;
}
.btn__arrow{transition:transform .32s var(--e-out);display:inline-block}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn:active{transform:scale(.975)}

.btn--primary{--bg:var(--violet);box-shadow:0 6px 18px -8px rgba(var(--violet-rgb),.7)}
.btn--primary:hover{--bg:var(--violet-ink);box-shadow:0 14px 34px -12px rgba(var(--violet-rgb),.85)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
/* on hover it fills with the logo's violet, dark to light. Literal colours on
   purpose: it stays the brand's on the coral and teal pages too. A gradient
   can't transition, so it fades in on a layer behind the label. */
.btn--ghost::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,#4A2FE0 0%,#5B3DF5 35%,#9B4BF0 100%);
  opacity:0;transition:opacity var(--t);
}
.btn--ghost:hover{--fg:#fff;--bd:transparent;box-shadow:0 12px 28px -12px rgba(91,61,245,.7)}
.btn--ghost:hover::before{opacity:1}
.btn--light{--bg:#fff;--fg:var(--ink);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.btn--light:hover{--bg:#fff;transform:translateY(-2px)}
.btn--clear{--bg:rgba(255,255,255,.12);--fg:#fff;--bd:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.btn--clear:hover{--bg:rgba(255,255,255,.2)}
.btn--sm{padding:11px 18px;font-size:.88rem}
.btn--block{display:flex;width:100%}
/* busy: checking a referral code, or opening the Stripe page */
.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* ---------- 5. NAVIGATION ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px var(--pad);
  transition:padding var(--t);
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:9px 9px 9px 16px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:background var(--t),border-color var(--t),box-shadow var(--t),backdrop-filter var(--t);
}
.nav.is-stuck .nav__inner{
  background:rgba(252,250,246,.82);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-color:var(--line);
  box-shadow:var(--sh-2);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;font-size:1.02rem}
.brand__mark{
  width:29px;height:29px;border-radius:9px;flex:none;
  background:var(--g-violet);color:#fff;
  display:grid;place-items:center;
  font-size:.85rem;font-weight:700;letter-spacing:-.02em;
  box-shadow:0 4px 12px -4px rgba(var(--violet-rgb),.6);
  transition:transform var(--t);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}

.nav__links{display:none;gap:4px}
.nav__links a{
  padding:9px 14px;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:500;color:var(--ink-2);
  transition:color var(--t-fast),background var(--t-fast);
}
.nav__links a:hover{color:var(--ink);background:var(--tint)}
.nav__actions{display:flex;align-items:center;gap:8px}
.nav__actions .btn{display:none}


.burger{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-content:center;gap:5px;
  border:1px solid var(--line-2);background:var(--paper-2);
}
.burger span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform var(--t),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:84px 12px auto 12px;z-index:99;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:14px;
  animation:menuIn .4s var(--e-out);
}
.mobilemenu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.mobilemenu nav{display:grid;margin-bottom:12px}
.mobilemenu nav a{
  display:flex;align-items:center;gap:14px;
  padding:15px 12px;border-radius:var(--r-sm);
  font-family:var(--f-display);font-size:1.22rem;font-weight:600;letter-spacing:-.03em;
  transition:background var(--t-fast);
}
.mobilemenu nav a:hover{background:var(--tint)}
.mm__i{font-family:var(--f-mono);font-size:.68rem;color:var(--violet);letter-spacing:.1em}
.mobilemenu{max-height:calc(100dvh - 96px);overflow-y:auto}

/* -- the three builds under Websites: a dropdown on desktop (hover or keyboard
      focus opens it, Escape closes it — main.js), indented links in the mobile
      menu. Each build keeps its colour from the Websites page. -- */
[data-build="home"]{--hue:var(--violet);--hue-ink:var(--violet-ink)}
[data-build="shop"]{--hue:var(--coral);--hue-ink:var(--coral-ink)}
[data-build="members"]{--hue:var(--teal);--hue-ink:var(--teal-ink)}

.nav__drop{position:relative}
.nav__drop > a{display:inline-flex;align-items:center;gap:5px}
.nav__chev{width:11px;height:11px;margin-right:-3px;opacity:.55;transition:transform var(--t-fast)}
.nav__menu{
  position:absolute;top:calc(100% + 12px);left:50%;z-index:2;
  width:296px;padding:8px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility 0s linear .18s;
}
/* a bridge over the gap, so the pointer can travel from the link to the menu */
.nav__menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px}
.nav__drop:is(:hover,:focus-within):not(.is-shut) .nav__menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s;
}
.nav__drop:is(:hover,:focus-within):not(.is-shut) .nav__chev{transform:rotate(180deg)}
.nav__links .nav__menu a{
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;
  padding:9px 10px;border-radius:var(--r-sm);font-size:inherit;
}
.nav__menu i{
  grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  font-family:var(--f-mono);font-size:.66rem;font-style:normal;font-weight:500;letter-spacing:.04em;
  color:#fff;background:linear-gradient(135deg,var(--hue-ink),var(--hue));
  box-shadow:0 6px 14px -8px var(--hue-ink);
}
.nav__menu b{font-family:var(--f-display);font-size:.98rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.nav__menu em{font-style:normal;font-size:.8rem;line-height:1.3;color:var(--ink-3)}
.nav__links .nav__menu a[aria-current]{background:color-mix(in srgb,var(--hue) 9%,transparent)}
.nav__links .nav__menu .nav__all{
  display:flex;justify-content:space-between;margin-top:4px;padding:11px 10px 7px;
  border-top:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:.84rem;font-weight:500;color:var(--ink-2);
}
.nav__links .nav__menu .nav__all:hover{color:var(--violet);background:transparent}

.mm__sub{display:grid;margin:-6px 0 6px 38px;padding-left:12px;border-left:1px solid var(--line-2)}
.mobilemenu .mm__sub a{
  gap:10px;padding:10px 12px;
  font-family:var(--f-body);font-size:1rem;font-weight:500;letter-spacing:0;color:var(--ink-2);
}
.mobilemenu .mm__sub a::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--hue-ink),var(--hue));
}
.mobilemenu .mm__sub a[aria-current]{color:var(--ink)}

/* desktop nav: inline links, no burger */
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__actions .btn{display:inline-flex}
  .burger{display:none}
  .mobilemenu{display:none}
}
/* a label never folds onto two lines. Just above the burger's breakpoint the
   five links are a tight fit, so there they sit a little closer together */
.nav__links > a,.nav__drop > a{white-space:nowrap}
@media (min-width:900px) and (max-width:979px){
  .nav__links > a,.nav__drop > a{padding-inline:10px}
}

/* ---------- 6. HERO ----------
   The headline leads. Beside it (below it, on a phone) sits a creator's site
   on a phone, with the things that start arriving once it's live. */
.hero{
  position:relative;
  padding-top:clamp(112px,15vw,156px);
  padding-bottom:clamp(36px,5vw,60px);
  overflow:hidden;
}
/* ambient warmth only — a wash of brand light, not an illustration */
.hero__aura{
  position:absolute;top:-38%;left:50%;transform:translateX(-50%);
  width:min(1500px,190vw);aspect-ratio:1.5;
  background:
    radial-gradient(40% 44% at 26% 34%, rgba(var(--violet-rgb),.13), transparent 70%),
    radial-gradient(44% 40% at 72% 62%, rgba(255,209,102,.16), transparent 70%);
  filter:blur(26px);
  animation:aura 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes aura{
  0%{transform:translateX(-50%) scale(1)}
  100%{transform:translateX(-47%) scale(1.1)}
}
/* "We build websites for [TikTokers]" — the platform word cycles.
   .rot is an inline-grid with every word stacked in one cell, so with no JS at
   all it still sizes to the widest word and shows the first one. JS then
   animates the width to whichever word is showing. */
/* sized off the screen width on a phone so the longest word ("Instagrammers")
   still fits on the one line, rather than jumping to a second as words change */
.hero__for{
  font-family:var(--f-mono);
  font-size:clamp(.78rem,3.5vw,1.16rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:clamp(22px,3.2vw,32px);
}
.hero__for > span[aria-hidden]{display:inline-flex;align-items:center;gap:.7em;flex-wrap:wrap}
/* the live dot: blinks, and sends out a ring each beat */
.hero__for .pulse{
  width:.62em;height:.62em;background:#8CD320;
  animation:beacon 1.5s ease-in-out infinite;
}
@keyframes beacon{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(140,211,32,.6)}
  45%{opacity:.4}
  70%{box-shadow:0 0 0 .7em rgba(140,211,32,0)}
  100%{opacity:1;box-shadow:0 0 0 0 rgba(140,211,32,0)}
}
.rot{
  display:inline-grid;
  justify-items:start;          /* so each word keeps its own intrinsic width */
  vertical-align:bottom;
  transition:width .45s var(--e-out);
}
.rot b{
  grid-area:1/1;
  white-space:nowrap;
  font-weight:700;
  color:var(--violet);
  opacity:0;
  transform:translateY(.75em);  /* waiting below the line */
  transition:opacity .34s var(--e-out),transform .34s var(--e-out);
}
.rot b.is-on{opacity:1;transform:none}
.rot b.is-out{opacity:0;transform:translateY(-.75em)}

.hero__h{
  font-size:clamp(2.7rem,9.4vw,7rem);
  line-height:.92;
  letter-spacing:-.042em;
  max-width:14ch;
}
.hero__row{
  display:grid;gap:30px;
  margin-top:clamp(30px,4.4vw,48px);
}
@media (min-width:920px){
  .hero__row{grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:end}
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* everything, spelled out — the job the illustration used to do, in words.
   Plain text, each with a small icon in one of the four brand colours. */
.hero__all{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(22px,2.6vw,34px);
  margin-top:clamp(40px,6vw,68px);
  padding-top:clamp(20px,2.6vw,26px);
  border-top:1px solid var(--line);
}
.hero__all li{
  --hue-ink:var(--violet-ink);
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;font-weight:500;color:var(--ink-2);
}
.hero__all li svg{width:16px;height:16px;flex:none;color:var(--hue-ink)}
.hero__all li:nth-child(4n+2){--hue-ink:var(--coral-ink)}
.hero__all li:nth-child(4n+3){--hue-ink:var(--teal-ink)}
.hero__all li:nth-child(4n){--hue-ink:var(--amber-ink)}
/* in tidy columns until there's room for one line: two across on a phone, 4 + 3 on a tablet */
@media (max-width:959px){
  .hero__all{display:grid;grid-template-columns:repeat(4,max-content);justify-content:start}
}
@media (max-width:520px){
  .hero__all{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
}

/* two columns from 1000px: words left, phone right. The list runs under both. */
.hero__grid{display:grid;gap:clamp(36px,6vw,52px)}
.hero__grid > .hero__all{grid-column:1/-1;margin-top:0}
@media (min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(360px,.62fr);column-gap:clamp(36px,4vw,64px);align-items:center}
  .hero__grid .hero__h{font-size:clamp(3.6rem,6.3vw,6.2rem)}
  .hero__grid .hero__row{grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
}

/* ---- the phone: a creator's site, and what it brings in ----
   Two example creators (beauty, fitness) share the spot; the toggle under
   the phone switches them, and the glow behind follows in each one's colour. */
.hero__art{position:relative;display:grid;justify-items:center;gap:8px}
.hero__art .flipset{position:relative;z-index:1;width:100%}
.hero__art .flipset__slide{display:grid;place-items:center;padding-block:10px 20px}
/* each creator's slide carries its own glow, so it fades with the slide */
.hero__art .flipset__slide::before{
  content:"";position:absolute;inset:6% 4% 14%;border-radius:50%;filter:blur(30px);
  background:radial-gradient(closest-side,var(--glow-1),var(--glow-2) 60%,transparent);
}
.hero__art [data-slide="beauty"]{--glow-1:rgba(var(--violet-mid-rgb),.28);--glow-2:rgba(255,92,114,.12)}
.hero__art [data-slide="fitness"]{--glow-1:rgba(201,242,78,.34);--glow-2:rgba(47,201,192,.14)}
.hero__art [data-slide="podcast"]{--glow-1:rgba(242,181,68,.36);--glow-2:rgba(224,81,43,.14)}

/* ---- example creators: slides share one grid cell; the toggle picks one.
   The incoming slide arrives from its own side, the outgoing one leaves to
   the other. Driven by "example creators" in main.js. ---- */
.flipset{display:grid;touch-action:pan-y}
.flipset__slide{
  grid-area:1/1;position:relative;min-width:0;
  transition:opacity .5s var(--e-out),transform .6s var(--e-out),visibility 0s;
}
.flipset__slide:not(.is-on){
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-22px) scale(.985);
  transition:opacity .35s var(--e-out),transform .5s var(--e-out),visibility 0s linear .5s;
}
.flipset__slide.is-on ~ .flipset__slide{transform:translateX(22px) scale(.985)}
/* the waiting slides rest 22px to the side, which is wider than the page
   gutter on a small phone: clip the showcase sideways so they never add a
   horizontal scroll (hidden first, for browsers without overflow:clip) */
.clip-x{overflow-x:hidden;overflow-x:clip}

/* without JS there's nothing to switch, so the first creator simply shows */
.flip{
  position:relative;z-index:1;
  display:none;gap:4px;padding:4px;width:fit-content;
  border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line-2);box-shadow:var(--sh-2);
}
.js .flip{display:flex}
.flip__b{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:var(--r-pill);
  font-size:.84rem;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);
  transition:background var(--t),color var(--t),box-shadow var(--t);
}
.flip__b svg{width:14px;height:14px;flex:none}
.flip__b:hover{color:var(--ink);background:var(--tint)}
.flip__b.is-on[data-show="beauty"]{background:var(--g-violet);color:#fff;box-shadow:0 6px 16px -8px rgba(var(--violet-rgb),.85)}
.flip__b.is-on[data-show="fitness"]{background:#14161B;color:var(--lime);box-shadow:0 6px 16px -8px rgba(20,22,27,.8)}
.flip__b.is-on[data-show="podcast"]{background:linear-gradient(135deg,#B8391A,#E0512B);color:#fff;box-shadow:0 6px 16px -8px rgba(224,81,43,.85)}
.flip--site{margin:0 auto clamp(16px,2vw,22px)}
.phone{
  position:relative;width:clamp(236px,22vw,284px);aspect-ratio:9/18.4;
  padding:8px;border-radius:46px;
  background:linear-gradient(155deg,#34293f,#120d17 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 50px 90px -42px rgba(59,35,196,.6),
    0 26px 50px -30px rgba(25,19,32,.55);
  rotate:3deg;
}
.phone__screen{
  position:relative;height:100%;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  padding:40px 14px 14px;
  border-radius:38px;background:var(--paper-2);
}
.phone__screen::before{           /* the camera island */
  content:"";position:absolute;top:10px;left:50%;translate:-50% 0;z-index:3;
  width:78px;height:22px;border-radius:12px;background:#120d17;
}
.ps__nav{display:flex;align-items:center;justify-content:space-between}
.ps__nav b{font-family:var(--f-display);font-size:.62rem;font-weight:700;letter-spacing:.16em}
.ps__nav i{display:grid;gap:3px}
.ps__nav i::before,.ps__nav i::after{content:"";width:15px;height:1.6px;border-radius:2px;background:var(--ink)}
.ps__cover{
  position:relative;overflow:hidden;flex:none;
  aspect-ratio:1/1.02;border-radius:18px;
  background:var(--g-violet);
}
.ps__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ps__cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(40,16,70,.78));
}
.ps__copy{position:absolute;left:13px;right:13px;bottom:12px;z-index:2;color:#fff}
.ps__kick{font-family:var(--f-mono);font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ps__h{margin-top:5px;font-family:var(--f-display);font-size:1.08rem;font-weight:600;letter-spacing:-.035em;line-height:1.05}
.ps__btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ps__btns span{
  text-align:center;font-size:.6rem;font-weight:600;padding:8px 6px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--ink);
}
.ps__btns span:first-child{background:var(--g-violet);border-color:transparent;color:#fff;box-shadow:0 6px 14px -8px rgba(var(--violet-rgb),.9)}
.ps__reel{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ps__reel .thumb{border-radius:9px}
.ps__reel .play{width:17px;height:17px}
.ps__reel .play::after{border-width:4px 0 4px 6px;border-style:solid;border-color:transparent transparent transparent var(--ink)}

/* the fitness creator's phone: same parts, their own brand — dark, volt accent */
.phone--gym .phone__screen{background:#101216;color:#fff}
.phone--gym .ps__nav i::before,.phone--gym .ps__nav i::after{background:#fff}
.phone--gym .ps__cover{background:#1d2026}
.phone--gym .ps__cover::after{background:linear-gradient(180deg,transparent 40%,rgba(8,9,12,.86))}
.phone--gym .ps__kick{color:var(--lime);opacity:1}
.phone--gym .ps__btns span{border-color:rgba(255,255,255,.2);color:#fff}
.phone--gym .ps__btns span:first-child{background:var(--lime);color:#101216;box-shadow:0 6px 14px -8px rgba(201,242,78,.8)}

/* the podcast's phone: warm paper, tomato "on air" red, mustard */
.phone--pod .phone__screen{background:#F6F0E6}
.phone--pod .ps__cover{background:#2a1d14}
.phone--pod .ps__cover::after{background:linear-gradient(180deg,transparent 40%,rgba(38,20,10,.84))}
.phone--pod .ps__kick{color:#F2B544;opacity:1}
.phone--pod .ps__btns span{border-color:rgba(60,40,20,.2)}
.phone--pod .ps__btns span:first-child{background:#E0512B;box-shadow:0 6px 14px -8px rgba(224,81,43,.9)}

.ping{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:9px 15px 9px 9px;border-radius:18px;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--sh-3);
  font-size:.72rem;line-height:1.35;color:var(--ink-3);white-space:nowrap;
  animation:float 5.4s ease-in-out infinite;
}
.ping b{display:block;font-family:var(--f-display);font-size:.88rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ping__ic{
  width:34px;height:34px;border-radius:11px;flex:none;
  display:grid;place-items:center;color:#fff;background:var(--g-violet);
}
.ping__ic svg{width:17px;height:17px}
.ping--deal{top:9%;left:0}
.ping--order{top:31%;right:0;animation-delay:-1.8s}
.ping--order .ping__ic{background:linear-gradient(135deg,var(--coral),var(--amber))}
.ping--club{bottom:8%;left:3%;animation-delay:-3.7s}
.ping--club .ping__ic{background:linear-gradient(135deg,var(--teal-ink),var(--teal))}
@media (min-width:1000px){
  .ping--deal{left:-6%}
  .ping--order{right:-4%}
}

/* ---------- 7. THE SHOWCASE ----------
   A creator's site, shown in pieces. Every visual here is CSS — gradient
   meshes, chrome and type — so the section carries no image weight at all.
   The <figcaption> carries the meaning and the mock is aria-hidden: invented
   follower counts are noise to a screen reader. */
.shead--mid{margin-inline:auto;text-align:center}
.shead--mid .shead__lede{margin-inline:auto}
.shead--mid .eyebrow{justify-content:center}  /* flex row — text-align can't reach it */

.tour{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,54px)}
@media (min-width:980px){
  .tour{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(20px,2.2vw,30px);
    row-gap:clamp(34px,4vw,56px);
  }
  .snap--lead{grid-column:1/-1}
}

.snap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto}
.shot{position:relative;height:100%}

.snap__cap{margin-top:17px;display:grid;gap:7px}
.snap__path{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;color:var(--violet)}
.snap__line{font-size:.88rem;color:var(--ink-2);line-height:1.5;text-wrap:pretty}
.snap--lead .snap__line{font-size:.98rem;max-width:36em}
@media (min-width:980px){
  /* the enquiry hangs below the frame, so the caption steps out of its way */
  .snap--lead .snap__cap{margin-top:clamp(48px,5vw,66px)}
}
/* one column: the caption moves above its picture and introduces it, like a
   heading. Side by side, it stays underneath as a label. */
@media (max-width:979px){
  .snap{grid-template-rows:auto 1fr}
  .snap__cap{order:-1;margin-top:0;margin-bottom:16px}
  .snap__line,.snap--lead .snap__line{font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.45}
}

/* ---- browser chrome ---- */
.frame{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.frame__bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,var(--paper-3));
}
.frame__dots{display:flex;gap:5px}
.frame__dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.frame__dots i:first-child{background:#FF6058}
.frame__dots i:nth-child(2){background:#FFBE2F}
.frame__dots i:last-child{background:#2ACB42}
.frame__url{
  flex:1;text-align:center;
  font-family:var(--f-mono);font-size:.62rem;
  color:var(--ink-3);
  background:var(--paper);border:1px solid var(--line);
  padding:4px 10px;border-radius:var(--r-pill);
}
.frame__body{padding:clamp(14px,1.8vw,22px);background:var(--paper-2)}

/* ---- the site's own navigation ---- */
.sn{
  display:flex;align-items:center;gap:14px;
  padding-bottom:12px;margin-bottom:clamp(16px,2.2vw,24px);
  border-bottom:1px solid var(--line);
}
.sn__mark{font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.16em}
.sn__links{display:none;gap:clamp(12px,1.6vw,20px);margin-left:auto}
.sn__links b{font-size:.64rem;font-weight:500;color:var(--ink-3)}
.sn__links b:first-child{color:var(--ink);font-weight:600}
.sn__cta{
  margin-left:auto;flex:none;white-space:nowrap;
  font-size:.6rem;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--g-violet);color:#fff;
  box-shadow:0 4px 10px -4px rgba(var(--violet-rgb),.7);
}
@media (min-width:620px){
  .sn__links{display:flex}
  .sn__cta{margin-left:0}
}

/* ---- the site's own hero ---- */
.sh{margin-bottom:clamp(15px,2vw,20px)}
.sh__kick{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);margin-bottom:9px;
}
.sh__h{
  font-family:var(--f-display);
  font-size:clamp(1.35rem,3.6vw,2.4rem);
  font-weight:600;letter-spacing:-.042em;line-height:1.02;
}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:14px}
@media (min-width:620px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats span{
  text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:9px 4px;line-height:1.3;
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.06em;color:var(--ink-3);
}
.stats b{
  display:block;margin-bottom:2px;
  font-family:var(--f-display);font-size:.95rem;font-weight:600;
  letter-spacing:-.03em;color:var(--ink);
}

/* ---- the fitness creator's site: the same build, their own brand ---- */
.frame--gym{border-color:rgba(255,255,255,.06)}
.frame--gym .frame__bar{background:linear-gradient(180deg,#1c1f25,#15171c);border-bottom-color:rgba(255,255,255,.07)}
.frame--gym .frame__url{background:#0c0d10;border-color:rgba(255,255,255,.08);color:#8b8f98}
.frame--gym .frame__body{background:#101216;color:#fff}
.frame--gym .sn{border-bottom-color:rgba(255,255,255,.08)}
.frame--gym .sn__links b{color:#8b8f98}
.frame--gym .sn__links b:first-child{color:#fff}
.frame--gym .sn__cta{background:var(--lime);color:#101216;box-shadow:0 4px 10px -4px rgba(201,242,78,.7)}
.frame--gym .sh__kick{color:var(--lime)}
.frame--gym .stats span{background:#181b20;border-color:rgba(255,255,255,.07);color:#8b8f98}
.frame--gym .stats b{color:#fff}

/* ---- the podcast's site: warm paper, tomato "on air" red ---- */
.frame--pod .frame__bar{background:linear-gradient(180deg,#fbf6ee,#efe6d8)}
.frame--pod .frame__url{background:#fffaf2}
.frame--pod .frame__body{background:#F6F0E6}
.frame--pod .sn{border-bottom-color:rgba(60,40,20,.12)}
.frame--pod .sn__links b:first-child{color:#1F1B16}
.frame--pod .sn__cta{background:#E0512B;box-shadow:0 4px 10px -4px rgba(224,81,43,.7)}
.frame--pod .sh__kick{display:flex;align-items:center;gap:.6em;color:#B8391A}
.frame--pod .sh__kick::before{
  content:"";width:.75em;height:.75em;border-radius:50%;flex:none;
  background:#E0512B;box-shadow:0 0 0 .3em rgba(224,81,43,.2);
}
.frame--pod .stats span{background:#FFFBF4;border-color:rgba(60,40,20,.1)}

/* ---- the reel: vertical video is what says "creator" ---- */
.reel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media (min-width:620px){.reel{grid-template-columns:repeat(6,1fr)}}

.thumb{
  display:block;position:relative;overflow:hidden;font-style:normal;
  border-radius:var(--r-xs);background:var(--paper-3);
}
.t9x16{aspect-ratio:9/16}
.t1x1{aspect-ratio:1}
.g1{background:radial-gradient(120% 90% at 20% 15%,#8B5BFF,transparent 60%),radial-gradient(110% 100% at 85% 90%,#FF3D81,transparent 62%),#5B3DF5}
.g2{background:radial-gradient(120% 90% at 80% 10%,#63E3DC,transparent 62%),radial-gradient(110% 100% at 10% 95%,#5B3DF5,transparent 62%),#3E8BFF}
.g3{background:radial-gradient(120% 90% at 25% 20%,#FF97A4,transparent 62%),radial-gradient(110% 100% at 90% 85%,#FFC46B,transparent 60%),#FF5C72}
.g4{background:radial-gradient(120% 90% at 20% 85%,#C9F24E,transparent 60%),radial-gradient(110% 100% at 88% 12%,#2FC9C0,transparent 62%),#5FE0B0}
.g5{background:radial-gradient(120% 90% at 82% 18%,#FFD166,transparent 60%),radial-gradient(110% 100% at 12% 88%,#FF5C72,transparent 62%),#FF8A5B}
.g6{background:radial-gradient(120% 90% at 18% 22%,#8265FF,transparent 60%),radial-gradient(110% 100% at 90% 88%,#2FC9C0,transparent 62%),#4C8BFF}
.thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%,rgba(0,0,0,.26));
}
/* a real picture inside a thumb — the gradient class stays on as the colour
   you see while it loads */
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb:has(img)::after{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.34))}
.t1x1:has(img)::after{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 60%,rgba(0,0,0,.08))}
.play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:21px;height:21px;border-radius:50%;font-weight:400;
  background:rgba(255,255,255,.92);
}
.play::after{
  content:"";position:absolute;left:54%;top:50%;translate:-50% -50%;
  border:5px solid transparent;border-left:8px solid var(--ink);
}
.views{
  position:absolute;left:6px;bottom:5px;z-index:2;font-style:normal;
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.03em;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45);
}

/* ---- the enquiry that lands while the site does the work ---- */
.toast{
  margin-top:14px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(16px,2vw,20px);
  box-shadow:var(--sh-2);
}
@media (min-width:980px){
  .toast{
    position:absolute;right:-10px;bottom:-34px;z-index:3;
    width:262px;margin-top:0;
    box-shadow:var(--sh-3);
    animation:toastIn .75s var(--e-out) .9s both;
  }
}
@keyframes toastIn{from{opacity:0;transform:translate3d(0,18px,0) scale(.96)}}

.toast__top{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-family:var(--f-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.toast__when{margin-left:auto;letter-spacing:.04em;color:var(--ink-4);text-transform:none}
.toast__brand{
  font-family:var(--f-display);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;color:var(--ink-3);
}
/* what the brand wrote, not what they'll pay: a fee here read as the price of a website */
.toast__msg{
  margin-top:6px;
  font-family:var(--f-display);font-size:clamp(1.08rem,2.8vw,1.2rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.22;color:var(--ink);
  text-wrap:pretty;
}
.toast__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}
.toast__chips li{
  font-family:var(--f-mono);font-size:.57rem;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 9px;background:var(--paper);color:var(--ink-2);
}

/* ---- a page of the site, cropped ---- */
.pane{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(18px,2.2vw,24px);
  box-shadow:var(--sh-2);
  transition:box-shadow var(--t),transform var(--t);
}
.snap:hover .pane{box-shadow:var(--sh-3);transform:translateY(-4px)}

.pane__ttl{
  display:flex;align-items:center;gap:9px;
  padding-bottom:13px;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-size:.9rem;font-weight:600;letter-spacing:-.025em;
}
.pane__ttl::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--violet);flex:none}

.pane__big{
  font-family:var(--f-display);
  font-size:clamp(2.6rem,6vw,3.1rem);
  font-weight:600;letter-spacing:-.052em;line-height:1;margin-top:16px;
}
.pane__big em{font-style:normal;font-size:.48em;color:var(--ink-3)}
.pane__sub{
  font-family:var(--f-mono);font-size:.57rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-top:7px;
}
.pane__lbl{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:9px;
}
.pane__end{margin-top:auto;padding-top:18px}
.pane__foot{
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.04em;color:var(--ink-3);
}
.pane__stat{display:inline-flex;align-items:baseline;gap:5px}
.pane__foot b{
  font-family:var(--f-display);font-size:.82rem;font-weight:600;
  letter-spacing:-.025em;color:var(--ink);
}

/* audience split */
.split{display:grid;gap:9px;margin-top:18px}
.split li{
  display:grid;grid-template-columns:3.6em 1fr 2.4em;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.57rem;letter-spacing:.04em;color:var(--ink-3);
}
.split i{position:relative;height:5px;border-radius:var(--r-pill);background:var(--paper-3)}
.split i::after{
  content:"";position:absolute;inset:0 auto 0 0;
  width:var(--w);border-radius:var(--r-pill);background:var(--g-violet);
  animation:barGrow 1.7s var(--e-out) .35s both;
}
@keyframes barGrow{from{width:0}}
.split b{text-align:right;font-weight:500;color:var(--ink-2)}

.marks{display:flex;flex-wrap:wrap;gap:6px}
.marks li{
  font-family:var(--f-display);font-size:.58rem;font-weight:600;letter-spacing:.11em;
  color:var(--ink-3);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 10px;
}

/* the shop */
.goods{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:16px;margin-bottom:6px}
.goods li{display:grid;gap:6px;align-content:start}
.goods .thumb{border-radius:var(--r-sm);box-shadow:var(--sh-1)}
.goods b{
  font-family:var(--f-display);font-size:.74rem;font-weight:600;
  letter-spacing:-.015em;line-height:1.25;
}
.goods em{font-style:normal;font-family:var(--f-mono);font-size:.64rem;color:var(--violet)}

/* the members' area */
.tier{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--g-violet);color:#fff;
  box-shadow:0 10px 22px -12px rgba(var(--violet-rgb),.9);
}
.tier__nm{font-family:var(--f-display);font-size:.84rem;font-weight:600;letter-spacing:-.02em}
.tier__pr{font-family:var(--f-display);font-size:1.2rem;font-weight:600;letter-spacing:-.045em}
.tier__pr em{font-style:normal;font-size:.46em;font-weight:400;opacity:.78}

.locked{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px;margin-bottom:6px}
.locked li{
  display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 11px;
}
.locked .thumb{width:30px;flex:none;border-radius:8px;filter:saturate(.45)}
.locked span{
  flex:1;min-width:0;font-size:.73rem;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lock{
  position:relative;flex:none;width:13px;height:10px;
  border-radius:2.5px;background:var(--ink-4);
}
.lock::before{
  content:"";position:absolute;left:50%;bottom:8px;translate:-50% 0;
  width:9px;height:7px;
  border:2px solid var(--ink-4);border-bottom:0;border-radius:5px 5px 0 0;
}

.show__close{
  margin-top:clamp(34px,4.4vw,52px);
  text-align:center;font-size:.95rem;color:var(--ink-2);
  text-wrap:balance;
}
.show__close a{
  color:var(--violet);font-weight:600;white-space:nowrap;
  border-bottom:1px solid rgba(var(--violet-rgb),.3);
  transition:border-color var(--t-fast);
}
.show__close a:hover{border-bottom-color:var(--violet)}

/* ---------- 7b. PACKAGES ----------
   Three cards, one colour each — the same violet / coral / teal as the
   /websites cards. The coloured cap says what you're buying (a website, then
   a website with more on it); the body says what's on it. A "+" sits between
   the cards because each build contains the one before it. */
.price{position:relative;overflow:hidden}
.price::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(40% 50% at 12% 62%, rgba(var(--violet-rgb),.08), transparent 70%),
    radial-gradient(34% 44% at 52% 72%, rgba(255,92,114,.07), transparent 70%),
    radial-gradient(38% 50% at 90% 60%, rgba(47,201,192,.08), transparent 70%);
}

.pkgs{display:grid;gap:30px}
@media (min-width:900px){
  .pkgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
}
.pkg{
  --hue:var(--violet);--hue-2:var(--violet-mid);--hue-ink:var(--violet-ink);
  --cap-mid:var(--hue);   /* the cap's middle stop, deepened where white text needs it */
  position:relative;display:grid;
}
.pkg--coral{--hue:var(--coral);--hue-2:#F7844A;--hue-ink:var(--coral-ink);--cap-mid:#EC4462}
.pkg--teal{--hue:var(--teal);--hue-2:#2F78DE;--hue-ink:var(--teal-ink);--cap-mid:#139C94}

.pkg > a{
  display:flex;flex-direction:column;
  background:var(--paper-2);
  border:1px solid color-mix(in srgb,var(--hue) 24%,var(--line));
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(61,40,30,.04),0 24px 48px -30px color-mix(in srgb,var(--hue) 60%,transparent);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.pkg > a:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--hue) 48%,transparent);
  box-shadow:0 2px 4px rgba(61,40,30,.04),0 38px 70px -32px color-mix(in srgb,var(--hue) 80%,transparent);
}

/* the "+" between cards: below each card on a phone, beside it from 900px */
.pkg + .pkg::before{
  content:"+";position:absolute;z-index:4;
  top:-32px;left:50%;translate:-50% 0;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-display);font-size:1.2rem;font-weight:600;line-height:1;
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line-2);box-shadow:var(--sh-2);
}
@media (min-width:900px){
  .pkg + .pkg::before{top:74px;left:-28px;translate:0 0}
}

.pkg__cap{
  position:relative;overflow:hidden;
  display:grid;justify-items:start;gap:14px;
  padding:clamp(20px,2.4vw,26px);
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(255,255,255,.26),transparent 55%),
    linear-gradient(135deg,var(--hue-ink),var(--cap-mid) 58%,var(--hue-2));
  color:#fff;
}
.pkg__n{
  position:absolute;right:10px;bottom:-.2em;
  font-family:var(--f-display);font-size:clamp(5rem,8vw,6.6rem);font-weight:700;
  letter-spacing:-.06em;line-height:1;color:rgba(255,255,255,.2);
}
.pkg__kind{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px 6px 8px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}
.pkg__kind svg{width:14px;height:14px;flex:none}
.pkg__name{
  position:relative;
  font-family:var(--f-display);
  font-size:clamp(1.55rem,2.5vw,2rem);
  font-weight:600;letter-spacing:-.035em;line-height:1.02;
}

.pkg__body{display:flex;flex-direction:column;gap:18px;flex:1;padding:clamp(20px,2.4vw,26px)}
.pkg__pitch{font-size:.96rem;color:var(--ink-2);line-height:1.5}
.pkg__list{display:grid;gap:10px}
.pkg__list li{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;
  font-size:.92rem;line-height:1.4;color:var(--ink);
}
.pkg__list li::before{
  content:"";width:20px;height:20px;border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat,
    var(--hue-ink);
}
/* the link-in-bio page (/link-in-bio/) comes with every package, so it gets a
   gift instead of a tick and a "Free" tag. The lists hold only what's included:
   extras live in the "anything you want on it" panel under the cards */
.pkg__list .is-lib{font-weight:600;color:var(--hue-ink)}
.pkg__list .is-lib::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center/12px no-repeat,
    linear-gradient(135deg,var(--hue-ink),var(--hue-2));
}
.pkg__list .is-lib i{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:var(--r-pill);vertical-align:1px;
  font-family:var(--f-mono);font-size:.6rem;font-style:normal;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--hue-ink),var(--hue-2));
}

.pkg__foot{
  margin-top:auto;padding-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px dashed color-mix(in srgb,var(--hue) 34%,transparent);
}
.pkg__price{
  font-family:var(--f-display);font-size:.95rem;color:var(--ink-3);
  letter-spacing:-.01em;white-space:nowrap;
}
.pkg__price b{font-size:1.6rem;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.pkg__go{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--hue) 12%,var(--paper-2));
  border:1px solid color-mix(in srgb,var(--hue) 30%,transparent);
  color:var(--hue-ink);font-size:1.05rem;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.pkg > a:hover .pkg__go{
  background:var(--hue-ink);border-color:var(--hue-ink);color:#fff;transform:translateX(3px);
}

/* ---- "anything you want on it" — the point of having your own site ---- */
.anything{
  position:relative;
  display:grid;gap:clamp(18px,2.4vw,26px);
  margin-top:clamp(22px,3vw,30px);
  padding:clamp(22px,3.2vw,34px);
  border:1.5px solid transparent;border-radius:var(--r-lg);
  background:
    linear-gradient(135deg,#fff,#FFF9FB) padding-box,
    var(--g-violet) border-box;
  box-shadow:0 26px 60px -36px rgba(var(--violet-rgb),.55);
}
@media (min-width:900px){
  .anything{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(28px,4vw,56px)}
}
.anything__h{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;
}
.anything__p{margin-top:12px;font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:34em}
.anything__chips{display:flex;flex-wrap:wrap;gap:8px}
.anything__chips li{
  --c:var(--violet);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:var(--r-pill);
  font-size:.84rem;font-weight:500;color:var(--ink);
  background:color-mix(in srgb,var(--c) 8%,var(--paper-2));
  border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
}
.anything__chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.anything__chips li:nth-child(4n+2){--c:var(--coral)}
.anything__chips li:nth-child(4n+3){--c:var(--teal)}
.anything__chips li:nth-child(4n+4){--c:var(--amber)}
.anything__chips .is-more{
  background:var(--g-violet);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 8px 18px -10px rgba(var(--violet-rgb),.8);
}
.anything__chips .is-more::before{background:#fff}
@media (max-width:560px){
  .anything__chips{gap:6px}
  .anything__chips li{padding:7px 11px;font-size:.8rem;gap:7px}
}

/* the promise under the cards — left-aligned and at reading size, because
   it's the reason to pick this over a template */
.pkgs__lead{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 36px;
  margin-top:clamp(24px,3vw,32px);
  padding-left:clamp(16px,2vw,22px);
  border-left:3px solid var(--violet);
}
.pkgs__lead p{
  font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.5;
  color:var(--ink-2);max-width:40em;text-wrap:pretty;
}
.pkgs__lead b{color:var(--ink);font-weight:600}
.pkgs__lead a{font-weight:600;white-space:nowrap}

.pkgs__foot{
  margin-top:clamp(26px,3.4vw,34px);
  font-size:.88rem;color:var(--ink-3);text-align:center;text-wrap:balance;
}

/* ---------- 8. ABOUT KARL ---------- */
.karl{display:grid;gap:clamp(34px,5vw,56px)}
@media (min-width:900px){
  .karl{grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(44px,6vw,80px);align-items:center}
}
.karl__media{position:relative}
.karl__portrait{
  aspect-ratio:4/5;border-radius:var(--r-xl);
  background:
    radial-gradient(90% 70% at 25% 18%,rgba(255,255,255,.34),transparent 60%),
    var(--g-violet);
  display:grid;place-items:center;
  box-shadow:var(--sh-3);
  position:relative;overflow:hidden;
}
.karl__portrait::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 80% 100%,rgba(23,207,224,.5),transparent 62%);
  mix-blend-mode:screen;
}
.karl__portrait span{
  font-family:var(--f-display);font-size:clamp(3.4rem,9vw,5rem);font-weight:600;
  letter-spacing:-.06em;color:rgba(255,255,255,.94);position:relative;z-index:2;
}
/* with a photo: the brand gradient becomes a frame, and fades up from the
   bottom of the picture so it still reads as violet-to-pink */
.karl__portrait--photo{
  padding:6px;display:block;
  box-shadow:0 40px 80px -42px rgba(var(--violet-rgb),.7),var(--sh-3);
}
.karl__portrait--photo img{
  width:100%;height:100%;object-fit:cover;
  border-radius:calc(var(--r-xl) - 6px);
}
.karl__portrait--photo::after{
  inset:6px;border-radius:calc(var(--r-xl) - 6px);mix-blend-mode:normal;
  /* light enough that a real photo still looks like itself */
  background:
    linear-gradient(180deg,transparent 64%,rgba(var(--violet-mid-rgb),.14) 84%,rgba(255,92,114,.3)),
    linear-gradient(135deg,rgba(var(--violet-rgb),.08),transparent 45%);
}
.karl__media:has(.karl__portrait--photo)::before{
  content:"";position:absolute;inset:8% 0 -5% 8%;border-radius:var(--r-xl);
  background:var(--g-violet);opacity:.35;filter:blur(38px);
}
.karl__badge{
  position:absolute;right:-10px;bottom:-16px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 18px;
  box-shadow:var(--sh-2);
  animation:float 6.2s ease-in-out infinite;
}
.karl__badge b{display:block;font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.035em}
.karl__badge span{font-size:.7rem;color:var(--ink-3)}
.karl__lede{font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.55;letter-spacing:-.015em;margin-bottom:18px;max-width:30em}
.karl__body{font-size:1rem;color:var(--ink-2);line-height:1.62;max-width:32em}
.karl__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.karl__chips li{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.02em;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 12px;background:var(--paper-2);color:var(--ink-2);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.karl__chips li:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
.exp{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.exp__label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.exp__marks{display:flex;flex-wrap:wrap;gap:12px 26px;margin:16px 0 14px}
.exp__marks li{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.95rem,2.2vw,1.22rem);letter-spacing:-.01em;
  color:var(--ink);opacity:.42;
  transition:opacity var(--t-fast),color var(--t-fast);
}
.exp__marks li:nth-child(3){letter-spacing:.02em}
.exp__marks li:hover{opacity:1;color:var(--violet)}
.exp__note{font-size:.72rem;color:var(--ink-4);line-height:1.5}

/* ---------- 9. SEO STRIP ----------
   A coloured band, a headline at section size, and a search box that shows
   what "being found" actually looks like. */
.strip{
  background:
    radial-gradient(50% 80% at 8% 10%,rgba(var(--violet-rgb),.14),transparent 70%),
    radial-gradient(46% 80% at 96% 90%,rgba(255,92,114,.14),transparent 70%),
    linear-gradient(120deg,#F3EEFF,#FFF1F4 60%,#FFF6EA);
  border-block:1px solid rgba(var(--violet-rgb),.14);
  padding-block:clamp(56px,8vw,96px);
  position:relative;z-index:2;overflow:hidden;
}
.strip__inner{display:grid;gap:clamp(36px,5vw,44px)}
@media (min-width:960px){
  .strip__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,6vw,80px);align-items:center}
}
.strip__h{
  font-family:var(--f-display);
  font-size:clamp(1.95rem,3.9vw,2.9rem);
  font-weight:700;line-height:1.04;letter-spacing:-.035em;
  text-wrap:balance;
}
.strip__cols{display:grid;gap:16px;margin-top:clamp(22px,3vw,30px)}
@media (min-width:640px){.strip__cols{grid-template-columns:1fr 1fr;gap:28px}}
.strip__cols p{font-size:1rem;color:var(--ink-2);line-height:1.62}

/* the search box — made up, deliberately not any real search engine */
.search{
  position:relative;display:grid;gap:10px;
  padding:clamp(16px,2.2vw,22px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -40px rgba(var(--violet-rgb),.55),var(--sh-2);
}
.search__bar{
  display:flex;align-items:center;gap:11px;
  padding:13px 16px;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  font-size:.98rem;color:var(--ink);
}
.search__bar svg,.search__sug svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.search__caret{width:1.5px;height:1.1em;margin-left:1px;background:var(--violet);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.search__sug{display:grid;padding:2px 6px}
.search__sug li{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:10px;font-size:.9rem;color:var(--ink-2)}
.search__sug b{color:var(--ink);font-weight:600}
.search__sug li:first-child{background:color-mix(in srgb,var(--violet) 7%,transparent)}
.search__hit{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;
  padding:16px;border-radius:var(--r);
  background:var(--paper-2);border:1px solid rgba(var(--violet-rgb),.22);
  box-shadow:var(--sh-2);
}
.search__fav{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;color:#fff;background:var(--g-violet);
}
.search__url{font-family:var(--f-mono);font-size:.66rem;color:var(--ink-3)}
.search__t{margin-top:2px;font-family:var(--f-display);font-size:1.08rem;font-weight:600;letter-spacing:-.02em;color:var(--violet-ink)}
.search__d{margin-top:4px;font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.search__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.search__links li{
  font-size:.72rem;font-weight:500;padding:5px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--violet) 8%,transparent);color:var(--violet-ink);
}
.search__rank{
  position:absolute;top:-12px;right:18px;
  padding:6px 12px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:#fff;box-shadow:var(--sh-2);
}

/* ---------- 10. FINAL CTA ---------- */
.cta{padding-block:var(--sec)}
.cta__panel{
  position:relative;overflow:hidden;
  border-radius:clamp(var(--r-lg),4vw,44px);
  padding:clamp(40px,7vw,88px) clamp(26px,5vw,72px);
  background:var(--g-violet);
  background-size:180% 180%;
  animation:drift 14s ease-in-out infinite;
  color:#fff;
  text-align:center;
  box-shadow:0 40px 90px -40px rgba(var(--violet-rgb),.7);
}
.cta__orbit{position:absolute;inset:0;pointer-events:none}
.cta__orbit i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.cta__orbit i:nth-child(1){width:min(520px,90%);aspect-ratio:1;left:-14%;top:-40%}
.cta__orbit i:nth-child(2){width:min(680px,110%);aspect-ratio:1;right:-20%;bottom:-60%}
.cta__orbit i:nth-child(3){width:min(300px,60%);aspect-ratio:1;right:6%;top:-18%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%);border:0}
.cta__panel > *{position:relative;z-index:2}
.cta__eyebrow{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:18px;
}
.cta__h{
  font-family:var(--f-display);
  font-size:clamp(2.2rem,7.4vw,4.4rem);
  line-height:1;letter-spacing:-.035em;font-weight:600;
  text-wrap:balance;
}
.cta__lede{
  margin:22px auto 0;max-width:32em;
  font-size:clamp(.98rem,1.8vw,1.1rem);line-height:1.6;color:rgba(255,255,255,.82);
}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.cta__small{margin-top:24px;font-size:.76rem;color:rgba(255,255,255,.6)}
.cta__small a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.cta__small a:hover{text-decoration-color:#fff}

/* ---------- 11. FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(44px,6vw,64px) 30px;position:relative;z-index:2}
.foot__top{display:grid;gap:38px}
@media (min-width:860px){.foot__top{grid-template-columns:1.2fr 1.4fr;gap:60px}}
.foot__brand p{margin-top:16px;font-size:.9rem;color:var(--ink-3);line-height:1.6;max-width:30em}
/* Karl's Instagram, under the blurb */
.foot__social{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:.9rem;font-weight:500;color:var(--ink-2);transition:color var(--t-fast)}
.foot__social svg{width:18px;height:18px;flex:none}
.foot__social:hover{color:var(--violet)}
.foot__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.foot__nav h3{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:14px;font-weight:500;
}
.foot__nav div{display:grid;gap:10px;align-content:start}
.foot__nav a{font-size:.9rem;color:var(--ink-2);transition:color var(--t-fast),transform var(--t-fast);width:fit-content}
.foot__nav a:hover{color:var(--violet);transform:translateX(3px)}
.foot__bottom{
  margin-top:46px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;gap:8px;
  font-size:.74rem;color:var(--ink-4);
}
@media (min-width:860px){
  .foot__bottom{grid-template-columns:auto 1fr;gap:40px;align-items:center}
  .foot__disclaimer{text-align:right}
}

/* ---------- 12. REVEAL + MOTION ---------- */
/* only hide when JS is running, so a script failure never blanks the page */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .75s var(--e-out) var(--d,0s),transform .75s var(--e-out) var(--d,0s);
  will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .rot b{transform:none}
  .rot b.is-out{transform:none}
}

/* ==========================================================================
   13 → 22 · INNER PAGES
   Everything below here is used by /services, /hosting, /about and /contact.
   Same tokens, same voice — the homepage components are not touched.
   ========================================================================== */

/* ---------- 13. PAGE HERO ---------- */
.phero{
  position:relative;overflow:hidden;
  padding-top:clamp(112px,17vw,172px);
  padding-bottom:clamp(40px,6vw,74px);
}
.phero__aura{
  position:absolute;top:-58%;left:50%;transform:translateX(-50%);
  width:min(1300px,180vw);aspect-ratio:1.6;
  background:
    radial-gradient(40% 44% at 28% 40%, rgba(var(--violet-rgb),.12), transparent 70%),
    radial-gradient(44% 40% at 74% 58%, rgba(255,209,102,.14), transparent 70%);
  filter:blur(26px);pointer-events:none;
}
/* each page can retint the wash without a new rule */
.phero--coral .phero__aura{
  background:
    radial-gradient(40% 44% at 28% 40%, rgba(255,92,114,.13), transparent 70%),
    radial-gradient(44% 40% at 74% 58%, rgba(255,168,75,.14), transparent 70%);
}
.phero--teal .phero__aura{
  background:
    radial-gradient(40% 44% at 28% 40%, rgba(47,201,192,.15), transparent 70%),
    radial-gradient(44% 40% at 74% 58%, rgba(var(--violet-rgb),.11), transparent 70%);
}

/* the page's own label above its heading ("Build 01 · Creator"): a step up from
   other eyebrows, towards the homepage's "I build websites for" line, not as big */
.phero .eyebrow{
  font-size:clamp(.78rem,2.4vw,.98rem);letter-spacing:.1em;color:var(--ink-2);
  gap:.7em;margin-bottom:clamp(20px,2.8vw,28px);
}
.phero .eyebrow .pulse{
  width:.6em;height:.6em;background:#8CD320;
  animation:beacon 1.5s ease-in-out infinite;
}

.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:clamp(20px,3vw,28px);
}
.crumb a{color:var(--ink-3);transition:color var(--t-fast)}
.crumb a:hover{color:var(--violet)}
.crumb [aria-current]{color:var(--ink)}
.crumb i{font-style:normal;opacity:.45}

.phero__h{
  font-family:var(--f-display);
  font-size:clamp(2.2rem,7.2vw,4.3rem);
  line-height:.98;letter-spacing:-.035em;font-weight:600;text-wrap:balance;
}
.phero__lede{
  margin-top:clamp(20px,2.6vw,28px);
  font-size:clamp(1.02rem,1.9vw,1.22rem);line-height:1.58;color:var(--ink-2);
  max-width:34em;text-wrap:pretty;
}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.6vw,38px)}

/* the strip of hard facts under a service hero */
.facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;margin-top:clamp(34px,4.6vw,52px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts > li{background:var(--paper);padding:clamp(16px,2.2vw,22px)}
.facts dt{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:9px;
}
.facts dd{
  font-family:var(--f-display);font-size:clamp(1.05rem,2.3vw,1.35rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.15;
}
.facts dd em{font-style:normal;font-size:.62em;color:var(--ink-3);font-weight:500}

/* ---------- 13b. PAGE HERO PICTURES (Websites, Creator Care) ----------
   Built like the homepage phone: real photos inside UI drawn in CSS, so the
   interface is sharp on any screen. Everything inside .art__stage is sized
   in em off a font-size tied to the column's width (cqw), so on a phone the
   picture scales down whole instead of reflowing. */
.phero__grid{display:grid;gap:clamp(34px,5vw,48px)}
.phero__grid > .facts{grid-column:1/-1;margin-top:0}
@media (min-width:1000px){
  .phero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(36px,4vw,64px);align-items:center}
}
.art{container-type:inline-size;position:relative;width:100%;max-width:560px;justify-self:center}
.art::before{
  content:"";position:absolute;inset:10% 6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--violet-mid-rgb),.22),rgba(255,92,114,.1) 60%,transparent);
  filter:blur(34px);
}
.phero--teal .art::before{background:radial-gradient(closest-side,rgba(47,201,192,.26),rgba(var(--violet-rgb),.1) 60%,transparent)}
.art__stage{position:relative;font-size:2.35cqw;aspect-ratio:1/1.02}
.art__stage img{display:block;width:100%;height:100%;object-fit:cover}
.art__stage--care{aspect-ratio:1/.9}

/* -- Websites: three windows, one per build, each peeking out behind the next.
      Where a window sits comes from its slot (data-pos), not from which build it
      is, so picking one brings it to the front and the others rotate back.
      All three are the same size (a fixed width and aspect-ratio) and the same
      little site: a hero, then a row of four that stretches to fill what's
      left, so no build's window is ever shorter than another's. -- */
/* Each window is 84% of the stage wide and 1.06 times as tall as it is wide.
   The stage (1 : 1.17) leaves room for two steps of offset behind the front
   one. The type is sized so a window is ~32em across on any screen, so the
   little site inside lays out the same everywhere and only its scale changes. */
.art--builds .art__stage{aspect-ratio:1/1.17;font-size:2.6cqw}
.win3{
  position:absolute;width:84%;aspect-ratio:1/1.06;
  display:flex;flex-direction:column;
  background:var(--paper-2);border:1px solid var(--line);border-radius:1.1em;overflow:hidden;
  box-shadow:0 .2em .4em rgba(61,40,30,.05),0 2.4em 4.6em -2em rgba(61,40,30,.3);
  transition:top .7s var(--e-out),left .7s var(--e-out);
}
.win3--home{--hue:var(--violet);--hue-ink:var(--violet-ink)}
.win3--shop{--hue:var(--coral);--hue-ink:var(--coral-ink)}
.win3--members{--hue:var(--teal);--hue-ink:var(--teal-ink)}
.win3[data-pos="back"]{top:0;left:16%;z-index:1}
.win3[data-pos="middle"]{top:12%;left:8%;z-index:2}
.win3[data-pos="front"]{top:24%;left:0;z-index:3}
.js .deck .win3:not([data-pos="front"]){cursor:pointer}

/* the buttons under it, coloured like the build they bring forward */
.flip--deck{margin:clamp(14px,2vw,20px) auto 0}
.flip__b b{font-family:var(--f-mono);font-size:.72em;font-weight:500;opacity:.6}
.flip__b.is-on b{opacity:.8}
.flip__b.is-on[data-show="home"]{background:linear-gradient(135deg,var(--violet-ink),var(--violet));color:#fff;box-shadow:0 6px 16px -8px rgba(var(--violet-rgb),.85)}
.flip__b.is-on[data-show="shop"]{background:linear-gradient(135deg,var(--coral-ink),var(--coral));color:#fff;box-shadow:0 6px 16px -8px rgba(216,48,74,.8)}
.flip__b.is-on[data-show="members"]{background:linear-gradient(135deg,var(--teal-ink),var(--teal));color:#fff;box-shadow:0 6px 16px -8px rgba(16,128,122,.8)}

/* on a phone the stack is too small to read, so it becomes a row you swipe:
   one window at a time, the next peeking in from the edge */
@media (max-width:599px){
  .art--builds .art__stage.deck{
    display:flex;align-items:center;gap:12px;
    aspect-ratio:auto;font-size:2.75vw;
    margin-inline:calc(var(--pad) * -1);
    padding:6px 6vw 30px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .deck::-webkit-scrollbar{display:none}
  .deck > .win3{
    position:relative;top:auto;left:auto;width:88vw;
    flex:0 0 88vw;scroll-snap-align:center;transition:none;
    box-shadow:0 .2em .4em rgba(61,40,30,.05),0 1.2em 2.4em -1.2em rgba(61,40,30,.32);
  }
  .js .deck .win3:not([data-pos="front"]){cursor:auto}
  .flip--deck{margin-top:4px}
  .flip--deck .flip__b{padding:8px 11px;font-size:.8rem}
}
/* the browser around it: traffic lights, the address, and which build this is */
.win3__bar{
  display:flex;align-items:center;gap:.7em;padding:.55em .7em;
  background:linear-gradient(180deg,#fff,var(--paper-3));border-bottom:1px solid var(--line);
}
.win3__dots{display:flex;gap:.32em;flex:none}
.win3__dots i{width:.5em;height:.5em;border-radius:50%;background:var(--line-2)}
.win3__url{
  flex:1;min-width:0;padding:.35em .8em;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line);text-align:center;
  font-family:var(--f-mono);font-size:.6em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win3__tag{
  flex:none;padding:.4em .8em;border-radius:var(--r-pill);white-space:nowrap;
  font-family:var(--f-mono);font-size:.6em;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--hue-ink),var(--hue));
}
/* the site's own nav — each build's adds the part it brings */
.win3__nav{
  display:flex;align-items:center;gap:1.1em;padding:.7em 1.1em;
  border-bottom:1px solid var(--line);font-size:.66em;color:var(--ink-3);white-space:nowrap;
}
.win3__nav b{margin-right:auto;font-family:var(--f-display);font-size:1.15em;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.win3__nav .is-on{color:var(--ink);font-weight:600}
.win3__nav em{
  font-style:normal;font-weight:600;padding:.35em .9em;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--hue) 40%,transparent);color:var(--hue-ink);
}
.win3__body{flex:1;min-height:0;display:flex;flex-direction:column;padding:1em}

/* the top half of every window: a square picture, a line and a button */
.w3-hero{display:grid;grid-template-columns:44% 1fr;gap:1em;align-items:center}
.w3-hero > img{aspect-ratio:1;height:auto;border-radius:1em}
.w3-kick{font-family:var(--f-mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--hue-ink)}
.w3-h{
  margin-top:.45em;font-family:var(--f-display);font-size:1.45em;font-weight:600;
  letter-spacing:-.04em;line-height:1.02;
}
.w3-btn{
  display:inline-block;margin-top:.9em;padding:.55em 1.1em;border-radius:var(--r-pill);
  font-size:.72em;font-weight:600;color:#fff;background:var(--g-violet);
  box-shadow:0 .5em 1.1em -.6em rgba(var(--violet-rgb),.9);
}
.win3--shop .w3-btn{background:linear-gradient(135deg,var(--coral-ink),var(--coral));box-shadow:0 .5em 1.1em -.6em rgba(216,48,74,.9)}
.win3--members .w3-btn{background:linear-gradient(135deg,var(--teal-ink),var(--teal));box-shadow:0 .5em 1.1em -.6em rgba(16,128,122,.9)}

/* the bottom half: four tiles that stretch to the foot of the window —
   videos (Creator), products (Commerce), locked posts (Membership) */
.w3-row{
  flex:1;min-height:0;margin-top:.9em;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55em;
}
.w3-row .thumb{border-radius:.7em}
.w3-row .play{width:1.6em;height:1.6em}
.w3-row .play::after{border-width:.32em 0 .32em .5em;border-style:solid;border-color:transparent transparent transparent var(--ink)}

.w3-goods li{display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:.3em;min-height:0}
.w3-goods .thumb{height:100%}
.w3-goods .thumb::after{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 60%,rgba(0,0,0,.08))}
.w3-goods b{font-family:var(--f-display);font-size:.8em;font-weight:600;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w3-goods em{font-style:normal;font-family:var(--f-mono);font-size:.72em;color:var(--coral-ink)}

.w3-locked img{filter:saturate(.5) brightness(.82)}
.w3-lock{
  position:absolute;left:50%;top:42%;translate:-50% -50%;z-index:2;
  display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--teal-ink);
}
.w3-lock svg{width:1em;height:1em}
.w3-locked span{
  position:absolute;left:.6em;right:.6em;bottom:.55em;z-index:2;
  font-size:.7em;font-weight:600;line-height:1.2;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* -- Creator Care: the care layer sitting over a creator's site -- */
.csite{
  position:absolute;top:0;left:0;width:58%;
  border-radius:1.3em;overflow:hidden;background:#101216;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 2.4em 4.6em -2em rgba(20,22,27,.45);
}
.csite__bar{display:flex;align-items:center;gap:.7em;padding:.65em .8em;background:linear-gradient(180deg,#1c1f25,#15171c)}
.csite__dots{display:flex;gap:.35em}
.csite__dots i{width:.55em;height:.55em;border-radius:50%;background:rgba(255,255,255,.18)}
.csite__url{
  flex:1;text-align:center;padding:.3em .8em;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.62em;color:#8b8f98;background:#0c0d10;
}
.csite__body{padding:.9em .9em 1.2em;color:#fff}
.csite__body > img{aspect-ratio:4/3.3;height:auto;border-radius:.9em}
.csite__kick{margin-top:.9em;font-family:var(--f-mono);font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.csite__h{margin-top:.35em;font-family:var(--f-display);font-size:1.3em;font-weight:600;letter-spacing:-.04em;line-height:1.05}

.cpanel{
  position:absolute;top:14%;right:0;width:68%;
  padding:1.2em;border-radius:1.4em;background:var(--paper-2);
  border:1px solid var(--line);
  box-shadow:0 .2em .4em rgba(61,40,30,.05),0 2.8em 5em -2em rgba(16,128,122,.35);
}
.cpanel__hd{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding-bottom:.9em;border-bottom:1px solid var(--line)}
.cpanel__site{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-display);font-size:1em;font-weight:600;letter-spacing:-.02em}
.cpanel__ok{
  padding:.35em .8em;border-radius:var(--r-pill);white-space:nowrap;
  font-size:.7em;font-weight:600;color:var(--teal-ink);
  background:color-mix(in srgb,var(--teal) 14%,transparent);
}
.cpanel__lbl{
  display:flex;justify-content:space-between;align-items:baseline;margin-top:1em;
  font-family:var(--f-mono);font-size:.64em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.cpanel__lbl b{font-family:var(--f-display);font-size:1.9em;letter-spacing:-.04em;text-transform:none;color:var(--ink)}
.cbars{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:.2em;height:2.1em;margin-top:.5em}
.cbars i{border-radius:.2em;background:linear-gradient(180deg,var(--teal),var(--teal-ink))}
.cbars i.is-dip{background:var(--amber)}
.crows{display:grid;gap:.1em;margin-top:.9em}
.crows li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75em;
  padding:.55em 0;border-top:1px solid var(--line);font-size:.86em;color:var(--ink-2);
}
.crows li:first-child{border-top:0}
.crows__ic{
  display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.6em;
  color:var(--teal-ink);background:color-mix(in srgb,var(--teal) 12%,transparent);
}
.crows__ic svg{width:1.1em;height:1.1em}
.crows em{font-style:normal;font-weight:600;color:var(--ink)}

.aping{
  position:absolute;left:0;top:72%;z-index:2;
  display:flex;align-items:center;gap:.8em;padding:.7em 1.1em .7em .7em;
  border-radius:1.2em;background:rgba(255,255,255,.96);
  border:1px solid var(--line);box-shadow:var(--sh-3);
  font-size:.82em;line-height:1.35;color:var(--ink-3);white-space:nowrap;
  animation:float 5.4s ease-in-out infinite;
}
.aping b{display:block;font-family:var(--f-display);font-size:1.12em;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.aping__ic{
  display:grid;place-items:center;width:2.6em;height:2.6em;flex:none;border-radius:.85em;
  color:#fff;background:linear-gradient(135deg,var(--violet),var(--violet-mid));
}
.aping__ic svg{width:1.3em;height:1.3em}

.cmsg{
  position:absolute;right:3%;top:81%;z-index:2;max-width:64%;
  display:flex;align-items:flex-end;gap:.6em;
  animation:float 6.2s ease-in-out -2.3s infinite;
}
.cmsg__av{
  display:grid;place-items:center;width:2.3em;height:2.3em;flex:none;border-radius:50%;
  font-family:var(--f-display);font-size:.9em;font-weight:700;color:#fff;background:var(--g-violet);
}
.cmsg__b{
  padding:.8em 1em;border-radius:1.1em 1.1em 1.1em .3em;
  font-size:.86em;line-height:1.4;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-3);
}
.cmsg__b small{display:block;margin-top:.35em;font-size:.82em;color:var(--teal-ink);font-weight:600}

/* ---------- 13c. BUILD PAGE HERO PICTURES (Creator, Commerce, Membership) ----------
   Made like 13b. Each build page shows the build three times, for three example
   creators in three distinct styles, switched by the toggle under it (the
   homepage's [data-flip] carousel, "example creators" in main.js): their site in
   a browser window, a card for what this build brings in, and notifications of
   it working. The window chrome is the Websites deck's (.win3__*). The page wears
   its build's colour, but everything in the example (the creator's site, its
   cards, the window's tag, the dashboard and the notifications) wears its style
   (.bx--soft / --bold / --warm), the colours of the swatch that shows it. */
.phero--coral .art::before{background:radial-gradient(closest-side,rgba(255,92,114,.24),rgba(255,168,75,.12) 60%,transparent)}
.art--build{display:grid;justify-items:center;gap:clamp(14px,2vw,20px);max-width:640px}
@media (min-width:1000px){
  /* the picture's column a little wider than on other pages: the example site reads bigger.
     The heading steps down a touch to fit the narrower column without extra line breaks */
  .phero__grid--build{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .phero__grid--build .phero__h{font-size:clamp(2.6rem,4.7vw,3.95rem)}
}
.art--build .flipset{width:100%}
/* the stage grows with the window: the cards are placed over it, and the
   notifications sit in a row that overlaps its foot (.bfloats) */
.art__stage--build{aspect-ratio:auto;padding-bottom:.4em}

/* the three styles: soft (light, violet to pink), bold (dark, volt green),
   warm (paper, tomato red) — the same three as the homepage's creators */
.bx--soft{
  --s-bg:var(--paper-2);--s-bar:linear-gradient(180deg,#fff,var(--paper-3));--s-dot:var(--line-2);
  --s-url:var(--paper-2);--s-url-ink:var(--ink-3);--s-line:var(--line);
  --s-ink:var(--ink);--s-mute:var(--ink-3);--s-tile:var(--paper-3);
  --s-acc:var(--g-violet);--s-on-acc:#fff;--s-glow:rgba(var(--violet-rgb),.9);--s-pop:var(--violet-ink);--s-kick:#fff;
}
.bx--bold{
  --s-bg:#101216;--s-bar:linear-gradient(180deg,#1c1f25,#15171c);--s-dot:rgba(255,255,255,.18);
  --s-url:#0c0d10;--s-url-ink:#8b8f98;--s-line:rgba(255,255,255,.08);
  --s-ink:#fff;--s-mute:#8b8f98;--s-tile:#181b20;
  --s-acc:var(--lime);--s-on-acc:#101216;--s-glow:rgba(201,242,78,.7);--s-pop:var(--lime);--s-kick:var(--lime);
}
.bx--warm{
  --s-bg:#F6F0E6;--s-bar:linear-gradient(180deg,#fbf6ee,#efe6d8);--s-dot:rgba(60,40,20,.18);
  --s-url:#fffaf2;--s-url-ink:#8A7A66;--s-line:rgba(60,40,20,.12);
  --s-ink:#1F1B16;--s-mute:#8A7A66;--s-tile:#FFFBF4;
  --s-acc:#E0512B;--s-on-acc:#fff;--s-glow:rgba(224,81,43,.9);--s-pop:#B8391A;--s-kick:#FFD3BF;
}
/* each style's own hue for the parts around the site (the tag, the dashboard card,
   the notifications), from its swatch below. This outranks data-build, so the
   examples look the same on every build page whatever colour the page wears */
.art__stage--build.bx--soft{--hue:#5B3DF5;--hue-ink:#3B23C4}
.art__stage--build.bx--bold{--hue:#4CC04A;--hue-ink:#0B9467}
.art__stage--build.bx--warm{--hue:#E0512B;--hue-ink:#B8391A}

/* the toggle under it: just a swatch of each style, ringed in its colours when picked */
.flip--build .flip__b{padding:7px}
.flip__sw{
  width:16px;height:16px;flex:none;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(25,19,32,.12);
}
.flip__b[data-show="soft"]{--sw:var(--g-violet);--sw-glow:rgba(var(--violet-rgb),.85)}
.flip__b[data-show="bold"]{--sw:linear-gradient(135deg,#0B9467 0%,#4CC04A 52%,#C9F24E 100%);--sw-glow:rgba(11,148,103,.8)}
.flip__b[data-show="warm"]{--sw:linear-gradient(135deg,#C2361A 0%,#EF6436 52%,#FFB04F 100%);--sw-glow:rgba(224,81,43,.85)}
.flip__b[data-show] .flip__sw{background:var(--sw)}
.flip__b.is-on .flip__sw{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.flip__b.is-on[data-show="soft"],.flip__b.is-on[data-show="bold"],.flip__b.is-on[data-show="warm"]{
  background:var(--sw);color:#fff;box-shadow:0 6px 16px -8px var(--sw-glow);
}

/* the creator's site, in their style */
.bwin{
  position:relative;width:74%;
  background:var(--s-bg);border:1px solid var(--s-line);border-radius:1.1em;overflow:hidden;
  box-shadow:0 .2em .4em rgba(61,40,30,.05),0 2.4em 4.6em -2em rgba(61,40,30,.3);
}
.bx--bold .bwin{border-color:rgba(255,255,255,.06);box-shadow:0 2.4em 4.6em -2em rgba(20,22,27,.5)}
.bwin .win3__bar{background:var(--s-bar);border-bottom-color:var(--s-line)}
.bwin .win3__dots i{background:var(--s-dot)}
.bwin .win3__url{background:var(--s-url);border-color:var(--s-line);color:var(--s-url-ink)}
.bwin .win3__nav{border-bottom-color:var(--s-line);color:var(--s-mute)}
.bwin .win3__nav b,.bwin .win3__nav .is-on{color:var(--s-ink)}
.bwin .win3__nav em{border-color:color-mix(in srgb,var(--s-pop) 42%,transparent);color:var(--s-pop)}
.bwin__body{padding:1em}

/* the site's hero: a wide picture, its line laid over the foot of it */
.bhero{position:relative;aspect-ratio:16/10.4;border-radius:.9em;overflow:hidden;background:var(--s-tile)}
.bhero > img{position:absolute;inset:0}
.bhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.62))}
.bhero__txt{position:absolute;left:1.1em;right:1.1em;bottom:1em;z-index:1;color:#fff}
.bhero__kick{font-family:var(--f-mono);font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:var(--s-kick)}
.bhero__h{margin-top:.35em;font-family:var(--f-display);font-size:1.55em;font-weight:600;letter-spacing:-.04em;line-height:1}
.bhero__btn{
  display:inline-block;margin-top:.8em;padding:.5em 1.05em;border-radius:var(--r-pill);
  font-size:.7em;font-weight:600;color:var(--s-on-acc);background:var(--s-acc);
  box-shadow:0 .5em 1.1em -.6em var(--s-glow);
}

/* a row of four under it: videos (Creator), products (Commerce) */
.brow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55em;margin-top:.7em}
.brow .thumb{aspect-ratio:4/5;border-radius:.7em}
.brow .play{width:1.6em;height:1.6em}
.brow .play::after{border-width:.32em 0 .32em .5em;border-style:solid;border-color:transparent transparent transparent var(--ink)}
.brow .views{left:.5em;bottom:.4em;font-size:.55em}
.brow li{display:grid;gap:.3em;min-width:0}
.brow li b{font-family:var(--f-display);font-size:.78em;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--s-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow li em{font-style:normal;font-family:var(--f-mono);font-size:.7em;color:var(--s-pop)}
.brow--goods .thumb{aspect-ratio:1}
.brow--goods .thumb::after{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%,rgba(0,0,0,.1))}

/* the cards over it: lifted like the care panel. A card that is part of the
   creator's site (the media kit, the bag) wears their style; the dashboard
   card (Membership's income) stays white, in the build's colour */
.bcard{
  position:absolute;right:0;top:8.2em;width:46%;z-index:1;
  padding:1.1em;border-radius:1.3em;background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 .2em .4em rgba(61,40,30,.05),0 2.8em 5em -2em color-mix(in srgb,var(--hue-ink) 38%,transparent);
}
.bcard--site{background:var(--s-bg);color:var(--s-ink);border-color:var(--s-line)}
.bx--soft .bcard--site{background:var(--paper-2)}
.bx--bold .bcard--site{border-color:rgba(255,255,255,.07);box-shadow:0 2.8em 5em -2em rgba(20,22,27,.55)}
.bcard__hd{display:flex;align-items:center;gap:.7em;padding-bottom:.85em;border-bottom:1px solid var(--line)}
.bcard--site .bcard__hd{border-bottom-color:var(--s-line)}
.bcard__hd > p{flex:1;min-width:0;line-height:1.2}
.bcard__hd b{display:block;font-family:var(--f-display);font-size:1em;font-weight:600;letter-spacing:-.02em}
.bcard__hd p span{display:block;margin-top:.2em;font-family:var(--f-mono);font-size:.56em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard--site .bcard__hd p span{color:var(--s-mute)}
.bcard__pill{
  flex:none;display:inline-flex;align-items:center;gap:.45em;padding:.35em .75em;border-radius:var(--r-pill);
  font-style:normal;font-size:.66em;font-weight:600;color:var(--hue-ink);
  background:color-mix(in srgb,var(--hue) 13%,transparent);
}
.bcard__pill::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--hue)}
.bcard--site .bcard__pill{color:var(--s-pop);background:color-mix(in srgb,var(--s-pop) 13%,transparent)}
.bcard--site .bcard__pill::before{background:var(--s-pop)}
.bcard__btn{
  display:block;margin-top:1em;padding:.7em 1em;border-radius:var(--r-pill);text-align:center;
  font-size:.74em;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--hue-ink),var(--hue));
  box-shadow:0 .6em 1.2em -.7em var(--hue-ink);
}
.bcard--site .bcard__btn{color:var(--s-on-acc);background:var(--s-acc);box-shadow:0 .6em 1.2em -.7em var(--s-glow)}
.bcard__note{margin-top:.7em;text-align:center;font-size:.64em;color:var(--s-mute,var(--ink-3))}

/* the notifications: the homepage float, made bigger here so the example
   order and money read at a glance. One on the window's foot at the left,
   and a number going up a step lower at the right, clear of the shop's prices. */
.bfloats{
  position:relative;z-index:2;margin-top:-.2em;
  display:flex;justify-content:space-between;align-items:flex-start;gap:.8em;
}
/* they bob by a share of their own size, so on a phone they never rise onto the prices */
@keyframes float-em{0%,100%{transform:translateY(0)}50%{transform:translateY(-.72em)}}
.bfloats .aping{position:relative;inset:auto;font-size:1.04em;padding:.75em 1.3em .75em .75em;animation-name:float-em}
.art__stage--build .aping__ic{background:linear-gradient(135deg,var(--hue-ink),var(--hue))}
.achip{
  position:relative;margin-top:2.6em;
  display:flex;align-items:center;gap:.8em;padding:.75em 1.3em .75em .9em;
  border-radius:1.2em;background:rgba(255,255,255,.97);
  border:1px solid var(--line);box-shadow:var(--sh-3);
  font-size:1.02em;line-height:1.3;color:var(--ink-3);white-space:nowrap;
  animation:float-em 6.2s ease-in-out -2.3s infinite;
}
.achip b{display:block;font-family:var(--f-display);font-size:1.2em;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.achip__spark{display:flex;align-items:flex-end;gap:.2em;height:2.2em}
.achip__spark i{width:.42em;height:var(--h);border-radius:.15em;background:color-mix(in srgb,var(--hue) 35%,transparent)}
.achip__spark i:last-child{background:linear-gradient(180deg,var(--hue),var(--hue-ink))}

/* -- Creator: the site, the media kit brands read, an enquiry -- */
.bcard .mkit__av{width:2.6em;height:2.6em;flex:none;border-radius:50%;object-fit:cover;object-position:50% 20%}
.mkit__logo{
  display:grid;place-items:center;width:2.6em;height:2.6em;flex:none;border-radius:50%;
  font-family:var(--f-display);font-size:1em;font-weight:700;letter-spacing:-.02em;color:#fff;
  background:var(--s-acc);box-shadow:0 0 0 .2em color-mix(in srgb,var(--s-acc) 22%,transparent);
}
.mkit__stats{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-top:.9em}
.mkit__stats div{padding:.65em .75em;border-radius:.8em;background:var(--s-tile)}
.mkit__stats dt{font-family:var(--f-mono);font-size:.54em;letter-spacing:.1em;text-transform:uppercase;color:var(--s-mute)}
.mkit__stats dd{margin-top:.2em;font-family:var(--f-display);font-size:1.35em;font-weight:600;letter-spacing:-.04em;line-height:1}
.mkit__lbl{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6em;margin-top:.95em;
  font-family:var(--f-mono);font-size:.56em;letter-spacing:.1em;text-transform:uppercase;color:var(--s-mute);
}
.mkit__lbl b{font-family:var(--f-body);font-size:1.2em;letter-spacing:0;text-transform:none;color:var(--s-ink)}
.mkit__bar{height:.5em;margin-top:.45em;border-radius:var(--r-pill);background:var(--s-tile);overflow:hidden}
.mkit__bar i{display:block;height:100%;border-radius:inherit;background:var(--s-acc)}

/* -- Commerce: the shop, their own checkout, an order coming in -- */
.bbag__items{display:grid;gap:.65em;margin-top:.9em}
.bbag__items li{display:grid;grid-template-columns:2.9em 1fr auto;align-items:center;gap:.7em}
.bbag__items .thumb{aspect-ratio:1;border-radius:.6em}
.bbag__items p{min-width:0;line-height:1.25}
.bbag__items b{display:block;font-size:.76em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbag__items span{display:block;font-size:.64em;color:var(--s-mute)}
.bbag__items em{font-style:normal;font-family:var(--f-mono);font-size:.7em}
.bbag__row{
  display:flex;justify-content:space-between;margin-top:.6em;padding-top:.6em;
  border-top:1px solid var(--s-line);font-size:.72em;color:var(--s-mute);
}
.bbag__row b{color:var(--s-ink);font-weight:600}
.bbag__row + .bbag__row{margin-top:.3em;padding-top:0;border-top:0}
.bbag__total{font-size:.84em}
.bbag__total b{font-family:var(--f-display);font-size:1.15em;letter-spacing:-.02em}

/* -- Membership: the members' area, the money that comes in every month,
      a new member joining -- */
.bsplit{display:grid;grid-template-columns:44% 1fr;gap:1em;align-items:center}
.bsplit > img{aspect-ratio:1;height:auto;border-radius:.9em}
.bsplit .bhero__kick{display:flex;align-items:center;gap:.6em;color:var(--s-pop)}
.bsplit .bhero__kick::before{content:"";width:.75em;height:.75em;border-radius:50%;flex:none;background:var(--s-pop);box-shadow:0 0 0 .3em color-mix(in srgb,var(--s-pop) 22%,transparent)}
.bx--warm .bsplit .bhero__kick::before{background:#E0512B}
.bsplit .bhero__h{font-size:1.4em;color:var(--s-ink)}

.beps{display:grid;gap:.45em;margin-top:.9em}
.beps li{
  display:grid;grid-template-columns:3em 1fr;align-items:center;gap:.75em;
  padding:.45em .6em .45em .45em;border-radius:.8em;background:var(--s-tile);border:1px solid var(--s-line);
}
.bx--soft .beps li{background:var(--paper)}
.beps .thumb{aspect-ratio:1;border-radius:.55em}
.beps .thumb img{filter:saturate(.6) brightness(.9)}
.beps p{min-width:0;line-height:1.25}
.beps b{display:block;font-family:var(--f-display);font-size:.84em;font-weight:600;letter-spacing:-.01em;color:var(--s-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beps span{display:block;font-family:var(--f-mono);font-size:.56em;letter-spacing:.06em;text-transform:uppercase;color:var(--s-mute)}
/* the lock sits on the picture: the card covers the right of these rows */
.beps__lock{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;
  color:var(--hue-ink);background:rgba(255,255,255,.92);
}
.beps__lock svg{width:.8em;height:.8em}
.bcard--mrr{top:18.6em}

.bmrr__lbl{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:.6em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.bmrr__n{margin-top:.5em;font-family:var(--f-display);font-size:2.3em;font-weight:600;letter-spacing:-.05em;line-height:1}
.bmrr__n small{margin-left:.25em;font-family:var(--f-body);font-size:.32em;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.bmrr__up{margin-top:.45em;font-size:.7em;font-weight:600;color:var(--hue-ink)}
.bmrr__bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:end;gap:.35em;height:4.6em;margin-top:.9em}
.bmrr__bars i{height:var(--h);border-radius:.3em .3em .1em .1em;background:color-mix(in srgb,var(--hue) 32%,transparent)}
.bmrr__bars i:last-child{background:linear-gradient(180deg,var(--hue),var(--hue-ink))}
.bmrr__ft{display:flex;align-items:center;gap:.7em;margin-top:.95em;padding-top:.85em;border-top:1px solid var(--line);font-size:.74em;color:var(--ink-3)}
.bmrr__ft b{color:var(--ink);font-weight:600}
.bmrr__avs{display:flex}
.bmrr__avs i{
  display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;
  font-style:normal;font-size:.78em;font-weight:600;color:#fff;border:.15em solid var(--paper-2);
}
.bmrr__avs i:nth-child(1){background:var(--hue-ink)}
.bmrr__avs i:nth-child(2){background:var(--hue)}
.bmrr__avs i:nth-child(3){background:color-mix(in srgb,var(--hue-ink) 62%,#191320)}
.bmrr__avs i + i{margin-left:-.6em}

/* ---------- 14. LAYOUT HELPERS ---------- */
.section--tint{background:var(--paper-3)}
.section--tight{padding-block:clamp(52px,7vw,96px)}

.two{display:grid;gap:clamp(30px,4.6vw,54px)}
@media (min-width:900px){
  .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,6vw,86px);align-items:start}
  .two--sticky > :first-child{position:sticky;top:clamp(96px,11vw,120px)}
  .two--lead{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .two--wide{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr)}
}

.prose{max-width:34em;display:grid;gap:18px}
.prose p{font-size:1rem;line-height:1.68;color:var(--ink-2)}
.prose p strong{color:var(--ink);font-weight:600}
.prose h3{
  font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.55rem);
  letter-spacing:-.028em;font-weight:600;line-height:1.15;
  margin-top:16px;color:var(--ink);
}
.prose a:not(.btn){
  color:var(--violet);font-weight:500;
  border-bottom:1px solid rgba(var(--violet-rgb),.3);transition:border-color var(--t-fast);
}
.prose a:not(.btn):hover{border-bottom-color:var(--violet)}

/* ---------- 15. CARDS ---------- */
.cards{display:grid;gap:14px}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  --hue:var(--violet);
  display:grid;gap:11px;align-content:start;
  padding:clamp(22px,3vw,30px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.card:hover{border-color:color-mix(in srgb,var(--hue) 38%,transparent);box-shadow:var(--sh-2);transform:translateY(-3px)}
.card__i{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:color-mix(in srgb,var(--hue) 12%,transparent);
  color:var(--hue);margin-bottom:5px;
}
.card__i svg{width:19px;height:19px}
.card__n{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  color:color-mix(in srgb,var(--hue) 78%,var(--ink));
}
.card h3{font-family:var(--f-display);font-size:1.16rem;font-weight:600;letter-spacing:-.028em;line-height:1.2}
.card p{font-size:.93rem;color:var(--ink-2);line-height:1.58}
.card--flat{box-shadow:none;background:transparent}
.card--flat:hover{transform:none;box-shadow:none}

/* ---------- 16. CHECKLIST ---------- */
.incl{display:grid;gap:12px}
@media (min-width:760px){.incl--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(24px,3.4vw,44px)}}
.incl li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  font-size:.95rem;line-height:1.55;color:var(--ink-2);
}
.incl li::before{
  content:"";margin-top:2px;
  width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--violet) 13%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3DF5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.incl b{color:var(--ink);font-weight:600}
/* the "not included" variant — an honest list carries more weight than a longer one */
.incl--no li::before{
  background:rgba(25,19,32,.055);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E7488' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}

/* ---------- 17. PROCESS ---------- */
.steps{display:grid;gap:0;counter-reset:step}
.step{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px);
  padding-block:clamp(22px,3vw,30px);
  border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{
  counter-increment:step;
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;flex:none;
  border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.step__n::before{content:"0" counter(step)}
.step:hover .step__n{background:var(--violet);border-color:var(--violet);color:#fff}
.step__b{display:grid;gap:9px;align-content:start}
.step h3{font-family:var(--f-display);font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.step p{font-size:.95rem;color:var(--ink-2);line-height:1.6;max-width:44em}
.step__when{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--violet);
}
@media (min-width:900px){
  .step{grid-template-columns:auto 200px minmax(0,1fr);align-items:start}
  .step__b{display:contents}
  .step__b h3{align-self:start}
  /* inside a narrow column, stay two-up */
  .steps--slim .step{grid-template-columns:auto minmax(0,1fr)}
  .steps--slim .step__b{display:grid}
}

/* ---------- 18. PLANS (hosting) ---------- */
.plans{display:grid;gap:14px}
@media (min-width:980px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{
  --hue:var(--violet);
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(24px,3.2vw,32px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.plan:hover{border-color:color-mix(in srgb,var(--hue) 40%,transparent);box-shadow:var(--sh-2);transform:translateY(-3px)}
.plan--pick{border-color:color-mix(in srgb,var(--violet) 46%,transparent);box-shadow:var(--sh-2)}
.plan__tag{
  position:absolute;top:-11px;left:clamp(24px,3.2vw,32px);
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--violet);color:#fff;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
}
.plan__nm{font-family:var(--f-display);font-size:1.28rem;font-weight:600;letter-spacing:-.032em}
.plan__for{margin-top:7px;font-size:.87rem;color:var(--ink-3);line-height:1.5}
.plan__pr{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--f-display);font-weight:600;letter-spacing:-.045em;
  font-size:clamp(2.1rem,4.4vw,2.6rem);line-height:1;
  display:flex;align-items:baseline;gap:4px;
}
.plan__pr em{font-style:normal;font-size:.34em;font-weight:500;color:var(--ink-3);letter-spacing:-.01em}
.plan__pr s{font-size:.5em;color:var(--ink-3);text-decoration:none;font-weight:500}
.plan__note{margin-top:9px;font-size:.78rem;color:var(--ink-4);line-height:1.5}
.plan .incl{margin-top:22px;margin-bottom:26px}
.plan .incl li{font-size:.9rem}
.plan .btn{margin-top:auto;width:100%}

/* ---------- 19. COMPARISON TABLE ---------- */
.tblwrap{
  overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper-2);
  -webkit-overflow-scrolling:touch;
}
.tbl{width:100%;border-collapse:collapse;min-width:620px;font-size:.92rem}
.tbl th,.tbl td{padding:15px clamp(14px,1.8vw,20px);text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{
  position:sticky;top:0;background:var(--paper-3);
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;white-space:nowrap;
}
.tbl tbody th{font-weight:500;color:var(--ink);width:38%}
.tbl td{color:var(--ink-2);text-align:center}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--tint)}
.yes,.no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:0}
.yes{
  background:color-mix(in srgb,var(--teal) 20%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310807A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.no{
  background:rgba(25,19,32,.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA2B2' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.tblnote{margin-top:14px;font-size:.76rem;color:var(--ink-4);text-align:center}

/* ---------- 20. FAQ ---------- */
.faq{display:grid;max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:16px;
  padding-block:clamp(18px,2.4vw,24px);
  cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:clamp(1rem,2vw,1.15rem);
  font-weight:600;letter-spacing:-.024em;line-height:1.35;
  transition:color var(--t-fast);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--violet)}
.faq summary::after{
  content:"";margin-left:auto;flex:none;
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4152' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
  transition:transform var(--t),background-color var(--t);
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq__a{padding-bottom:clamp(20px,2.6vw,26px);max-width:52em}
.faq__a p{font-size:.95rem;line-height:1.66;color:var(--ink-2)}
.faq__a p + p{margin-top:12px}
.faq__a a{color:var(--violet);font-weight:500;border-bottom:1px solid rgba(var(--violet-rgb),.3)}

/* ---------- 21. FORM ---------- */
.formcard{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.6vw,40px);
  box-shadow:var(--sh-2);
}
.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field > label,.fset__lgd{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.field .req{color:var(--coral-ink)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:13px 15px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--violet);background:var(--paper-2);
  box-shadow:0 0 0 3px rgba(var(--violet-rgb),.14);
}
.field select{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4152' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px;
}
.field__hint{font-size:.78rem;color:var(--ink-4);line-height:1.5}
@media (min-width:680px){.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}

.fset{display:grid;gap:10px;border:0;padding:0;min-width:0}
.fset__opts{display:flex;flex-wrap:wrap;gap:8px}
.fset__opts label{
  position:relative;
  padding:10px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--paper);
  font-size:.89rem;cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.fset__opts label:hover{border-color:var(--ink-4)}
.fset__opts input{position:absolute;opacity:0;width:0;height:0}
.fset__opts label:has(input:checked){background:var(--violet);border-color:var(--violet);color:#fff}
.fset__opts label:has(input:focus-visible){outline:2px solid var(--violet);outline-offset:3px}

/* honeypot — a real person never sees it, a bot fills it in */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__foot{display:grid;gap:14px;padding-top:4px}
.form__small{font-size:.78rem;color:var(--ink-4);line-height:1.55}
.form__small a{color:var(--violet)}
@media (min-width:680px){.form__foot{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px}}

/* ---------- 22. ODDS AND ENDS ---------- */
/* a soft aside for a caveat, a promise or a price note */
.callout{
  display:grid;gap:9px;
  padding:clamp(20px,2.8vw,28px);
  border-radius:var(--r);
  background:var(--paper-3);
  border:1px solid var(--line);
}
.callout--on{
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.07),rgba(255,92,114,.06));
  border-color:rgba(var(--violet-rgb),.2);
}
.callout__t{font-family:var(--f-display);font-size:1.05rem;font-weight:600;letter-spacing:-.026em}
.callout p{font-size:.93rem;color:var(--ink-2);line-height:1.6}

/* contact methods / at-a-glance rows */
.rows{display:grid;gap:10px}
.row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:clamp(16px,2.2vw,20px);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
a.row:hover{border-color:rgba(var(--violet-rgb),.42);transform:translateY(-2px);box-shadow:var(--sh-1)}
.row__i{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:none;
  background:rgba(var(--violet-rgb),.1);color:var(--violet);
}
.row__i svg{width:18px;height:18px}
.row__b{display:grid;gap:3px;min-width:0}
.row__t{font-weight:600;font-size:.97rem;letter-spacing:-.012em}
.row__s{font-size:.84rem;color:var(--ink-3);line-height:1.45;overflow-wrap:anywhere}
.row__go{color:var(--ink-4);transition:transform var(--t-fast),color var(--t-fast)}
a.row:hover .row__go{color:var(--violet);transform:translateX(3px)}

/* next / other services */
.next{display:grid;gap:12px;margin-top:clamp(40px,5vw,60px)}
@media (min-width:760px){.next{grid-template-columns:repeat(2,minmax(0,1fr))}}
.next a{
  display:grid;gap:7px;
  padding:clamp(20px,2.8vw,26px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper-2);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.next a:hover{border-color:rgba(var(--violet-rgb),.42);transform:translateY(-3px);box-shadow:var(--sh-1)}
.next__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
.next__t{font-family:var(--f-display);font-size:1.18rem;font-weight:600;letter-spacing:-.03em}
.next__s{font-size:.88rem;color:var(--ink-2);line-height:1.5}

/* techy spec list — the proof that the technical side is real */
.spec{display:grid;gap:0;border-top:1px solid var(--line)}
.spec div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding-block:13px;border-bottom:1px solid var(--line);
}
.spec dt{font-size:.91rem;color:var(--ink-2)}
.spec dd{font-family:var(--f-mono);font-size:.78rem;color:var(--ink);text-align:right;white-space:nowrap}
.spec dd b{color:var(--teal-ink);font-weight:500}

/* big pull quote / statement line */
.say{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,4.2vw,2.5rem);
  line-height:1.16;letter-spacing:-.032em;font-weight:600;
  text-wrap:balance;max-width:24em;
}
.say em{font-style:normal;color:var(--violet)}

/* a labelled tally — audience, uptime, that sort of thing.
   Always two across: it lives in half-width columns (Creator Care, About),
   where four across squeezed "99.9%" out of its card. */
.tally{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.tally b{
  display:block;font-family:var(--f-display);
  font-size:clamp(1.4rem,2.4vw,1.75rem);font-weight:600;letter-spacing:-.04em;line-height:1;
}
.tally span{display:block;margin-top:8px;font-size:.84rem;color:var(--ink-3);line-height:1.45}

/* a timeline of where Karl has worked */
.cv{display:grid;gap:0;border-top:1px solid var(--line)}
.cv li{
  display:grid;gap:5px;
  padding-block:clamp(16px,2.2vw,20px);border-bottom:1px solid var(--line);
}
@media (min-width:700px){
  .cv li{grid-template-columns:130px minmax(0,1fr);gap:clamp(16px,2.4vw,30px);align-items:baseline}
}
.cv__yr{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;color:var(--violet)}
.cv__t{font-weight:600;font-size:.99rem;letter-spacing:-.015em}
.cv__s{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin-top:5px}

/* form success / error message */
.msg{
  display:none;gap:10px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--r-sm);
  font-size:.92rem;line-height:1.55;
}
.msg.is-on{display:grid;grid-template-columns:auto minmax(0,1fr)}
.msg--ok{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink);border:1px solid color-mix(in srgb,var(--teal) 32%,transparent)}
.msg--no{background:color-mix(in srgb,var(--coral) 12%,transparent);color:var(--coral-ink);border:1px solid color-mix(in srgb,var(--coral) 30%,transparent)}
.msg b{font-weight:600}
/* an action inside a message, drawn as a link */
.msg__btn{font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:0}
.msg__btn:disabled{opacity:.6;cursor:progress}
/* without JavaScript the form posts to the server, which comes back to /contact/#sent */
.msg:target{display:grid;grid-template-columns:auto minmax(0,1fr);margin-bottom:18px}

/* current page marker in the nav */
.nav__links a[aria-current],.mobilemenu nav a[aria-current]{color:var(--ink);background:var(--tint)}
.nav__links a[aria-current]{font-weight:500}

/* ---------- 23. SMALL UTILITIES (inner pages) ---------- */
/* the enquiry card hangs below the browser frame on wide screens — give it room */
@media (min-width:980px){.shot--pad{padding-bottom:48px}}
.stack{display:grid;gap:clamp(20px,2.8vw,30px);align-content:start}
.stack--sm{gap:14px}
.lead-in{font-size:1.02rem;line-height:1.64;color:var(--ink-2);max-width:36em}
.mt-l{margin-top:clamp(30px,4vw,44px)}
/* the portrait is 4:5 — unconstrained in a hero column it gets enormous.
   width: is required; auto inline margins alone cancel justify-self:stretch
   and collapse it to the width of the initials inside. */
.phero .karl__media{width:min(100%,400px);margin-inline:auto}
.mt-m{margin-top:clamp(20px,2.6vw,28px)}
.link{color:var(--violet);font-weight:500;border-bottom:1px solid rgba(var(--violet-rgb),.3);transition:border-color var(--t-fast)}
.link:hover{border-bottom-color:var(--violet)}
.sub{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

/* ==========================================================================
   24 → 31 · WEBSITES, CREATOR CARE, GET STARTED
   New pages added in the 2026 rebuild. Same tokens, same voice. The homepage
   components above are untouched — everything here is additive.
   ========================================================================== */

/* ---------- 24. PRODUCT TIERS (the /websites pricing cards) ---------- */
.tiers{display:grid;gap:16px}
/* side by side, all three cards are the same height; the buttons sit on the
   bottom edge and any spare room gathers above them */
@media (min-width:960px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
.tier-card{
  --hue:var(--violet);--hue-ink:var(--violet-ink);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(24px,3.4vw,34px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.tier-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--hue),color-mix(in srgb,var(--hue) 30%,#fff));
  opacity:.9;
}
.tier-card:hover{border-color:color-mix(in srgb,var(--hue) 44%,transparent);box-shadow:var(--sh-3);transform:translateY(-5px)}
.tier-card--pick{border-color:color-mix(in srgb,var(--hue) 50%,transparent);box-shadow:var(--sh-2)}
.tier-card__tag{
  position:absolute;top:16px;right:16px;
  padding:5px 11px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--hue) 14%,transparent);color:var(--hue-ink);
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
}
.tier-card__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--hue-ink);margin-bottom:12px}
.tier-card__name{font-family:var(--f-display);font-size:clamp(1.6rem,3.4vw,2.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.tier-card__for{margin-top:10px;font-size:.95rem;color:var(--ink-2);line-height:1.55;min-height:2.6em}
.tier-card__pr{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--f-display);font-weight:600;letter-spacing:-.045em;line-height:1;
  font-size:clamp(2.2rem,4.6vw,2.7rem);display:flex;align-items:baseline;gap:6px;
}
.tier-card__pr em{font-style:normal;font-size:.32em;font-weight:500;color:var(--ink-3);letter-spacing:0}
.tier-card__care{margin-top:11px;font-size:.82rem;color:var(--ink-3)}
.tier-card__care b{color:var(--ink);font-weight:600}
.tier-card .incl{margin-top:22px;margin-bottom:26px;gap:11px}
.tier-card .incl li{font-size:.9rem}
.tier-card__cta{margin-top:auto;display:grid;gap:9px}
.tier-card__cta .btn{width:100%}

/* small "everything in X, plus" ribbon between stacked feature groups */
.plus-line{
  display:flex;align-items:center;gap:12px;margin:2px 0 4px;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.plus-line::before,.plus-line::after{content:"";height:1px;flex:1;background:var(--line)}

/* ---------- 25. DEMO UI — checkout, orders, auth, dashboard ----------
   All CSS, no images, aria-hidden. Reuses .frame / .pane where it can. */
.ui{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,2.2vw,22px);box-shadow:var(--sh-2);
  transition:box-shadow var(--t),transform var(--t);
}
.snap:hover .ui,.shot:hover .ui{box-shadow:var(--sh-3)}
.ui__ttl{
  display:flex;align-items:center;gap:9px;
  padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-size:.9rem;font-weight:600;letter-spacing:-.025em;
}
.ui__ttl .pulse{margin-left:auto}

/* checkout */
.co__line{display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;padding:8px 0}
.co__line + .co__line{border-top:1px solid var(--line)}
.co__nm{font-size:.8rem;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.co__nm em{display:block;font-style:normal;font-family:var(--f-mono);font-size:.6rem;color:var(--ink-4);margin-top:2px}
.co__pr{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2)}
.co__sum{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.co__sum div{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.66rem;color:var(--ink-3)}
.co__sum .co__tot{font-family:var(--f-display);font-size:1rem;color:var(--ink);font-weight:600;letter-spacing:-.02em}
.co__pay{
  margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--r-sm);background:var(--ink);color:#fff;
  font-size:.78rem;font-weight:600;
}
.co__pay::before{content:"";width:14px;height:11px;border-radius:2px;background:rgba(255,255,255,.8)}
.co__badges{display:flex;gap:6px;justify-content:center;margin-top:10px}
.co__badges i{font-style:normal;font-family:var(--f-mono);font-size:.55rem;color:var(--ink-4);border:1px solid var(--line);border-radius:5px;padding:3px 7px}

/* orders list */
.ord{display:grid;gap:8px}
.ord li{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
}
.ord__id{font-family:var(--f-mono);font-size:.6rem;color:var(--ink-4)}
.ord__nm{font-size:.78rem;font-weight:500;letter-spacing:-.01em}
.ord__pr{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2)}
.ord__st{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill)}
.ord__st--paid{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink)}
.ord__st--ship{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber-ink)}
.ord__st--new{background:color-mix(in srgb,var(--violet) 15%,transparent);color:var(--violet-ink)}

/* auth / login screen */
.login{display:grid;gap:11px;max-width:280px;margin-inline:auto}
.login__h{font-family:var(--f-display);font-size:1.1rem;font-weight:600;letter-spacing:-.03em;text-align:center;margin-bottom:2px}
.login__sub{font-size:.74rem;color:var(--ink-3);text-align:center;margin-bottom:8px}
.login__f{padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);font-family:var(--f-mono);font-size:.66rem;color:var(--ink-4)}
.login__btn{padding:11px;border-radius:var(--r-sm);background:var(--g-violet);color:#fff;text-align:center;font-size:.78rem;font-weight:600;box-shadow:0 8px 18px -10px rgba(var(--violet-rgb),.8)}
.login__alt{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.58rem;color:var(--ink-4);text-transform:uppercase;letter-spacing:.1em}
.login__alt::before,.login__alt::after{content:"";height:1px;flex:1;background:var(--line)}
.login__soc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.login__soc span{padding:9px;border:1px solid var(--line-2);border-radius:var(--r-sm);text-align:center;font-size:.68rem;color:var(--ink-2)}

/* member dashboard */
.dash{display:grid;gap:10px}
.dash__hd{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dash__av{width:32px;height:32px;border-radius:50%;background:var(--g-violet);flex:none;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-size:.7rem;font-weight:700}
.dash__who{display:grid;gap:1px;min-width:0}
.dash__who b{font-size:.78rem;font-weight:600;letter-spacing:-.01em}
.dash__who span{font-family:var(--f-mono);font-size:.55rem;color:var(--teal-ink);letter-spacing:.06em}
.dash__who span.is-pro{color:var(--violet-ink)}
.dash__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dash__tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px}
.dash__tile b{display:block;font-family:var(--f-display);font-size:1.05rem;font-weight:600;letter-spacing:-.03em}
.dash__tile span{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.dash__feed{display:grid;gap:7px}
.dash__feed li{display:flex;align-items:center;gap:9px;font-size:.74rem;color:var(--ink-2);padding:8px 10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm)}
.dash__feed .thumb{width:26px;flex:none;border-radius:6px}
.dash__feed em{font-style:normal;margin-left:auto;font-family:var(--f-mono);font-size:.55rem;color:var(--ink-4)}

/* ---------- 26. CREATOR CARE — "just ask" chat + email addresses ---------- */
.ask{
  position:relative;overflow:hidden;
  border-radius:clamp(var(--r-lg),4vw,44px);
  padding:clamp(30px,5vw,64px);
  background:linear-gradient(150deg,#241a33 0%,#191320 60%,#2a1550 100%);
  color:#fff;box-shadow:var(--sh-3);
}
.ask__aura{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 48% at 82% 18%,rgba(var(--violet-rgb),.5),transparent 66%),radial-gradient(40% 44% at 8% 92%,rgba(47,201,192,.32),transparent 66%);}
.ask > *{position:relative;z-index:2}
.ask__grid{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:900px){.ask__grid{grid-template-columns:1fr minmax(0,420px);align-items:center}}
.ask__eyebrow{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.ask__h{font-family:var(--f-display);font-size:clamp(1.9rem,5.2vw,3.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.ask__p{margin-top:18px;font-size:clamp(1rem,1.8vw,1.12rem);line-height:1.6;color:rgba(255,255,255,.78);max-width:34em}
.ask__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.ask__chips li{font-family:var(--f-mono);font-size:.66rem;padding:7px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
/* the chat mock */
.chat{display:grid;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:clamp(16px,2.4vw,22px);backdrop-filter:blur(8px)}
.chat__row{display:flex;gap:10px;max-width:88%}
.chat__row--me{margin-left:auto;flex-direction:row-reverse}
.bubble{padding:11px 14px;border-radius:16px;font-size:.85rem;line-height:1.45}
.chat__row--them .bubble{background:rgba(255,255,255,.1);border-bottom-left-radius:5px;color:#fff}
.chat__row--me .bubble{background:var(--g-violet);border-bottom-right-radius:5px;color:#fff;box-shadow:0 10px 24px -14px rgba(var(--violet-rgb),.9)}
.bubble small{display:block;margin-top:6px;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;opacity:.6}
.chat__done{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;color:var(--lime);padding-top:2px}
.chat__done::before{content:"";width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--lime) 30%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9F24E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:11px;background-repeat:no-repeat;background-position:center;flex:none}

/* professional email address rows */
.mails{display:grid;gap:10px}
@media (min-width:620px){.mails{grid-template-columns:repeat(3,1fr)}}
.mails li{
  display:grid;gap:6px;padding:clamp(15px,2vw,20px);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.mails li:hover{border-color:color-mix(in srgb,var(--violet) 40%,transparent);transform:translateY(-2px);box-shadow:var(--sh-1)}
.mails__at{font-family:var(--f-mono);font-size:.84rem;color:var(--violet-ink);letter-spacing:-.01em;overflow-wrap:anywhere}
.mails__for{font-size:.8rem;color:var(--ink-3);line-height:1.45}

/* ---------- 27. GET STARTED — configurator layout ---------- */
.cfg{display:grid;gap:clamp(28px,4vw,48px);padding-bottom:clamp(90px,14vw,40px)}
@media (min-width:1000px){
  .cfg{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(36px,4vw,60px);align-items:start;padding-bottom:0}
  .cfg__aside{position:sticky;top:clamp(94px,11vw,110px)}
}
.cfg__steps{display:grid;gap:clamp(28px,4vw,44px);min-width:0}

/* a configurator step */
.qstep{scroll-margin-top:clamp(90px,12vw,110px)}
.qstep__hd{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-bottom:20px}
.qstep__n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--tint);border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);
}
.qstep.is-done .qstep__n{background:var(--violet);border-color:var(--violet);color:#fff}
.qstep__t{font-family:var(--f-display);font-size:clamp(1.2rem,2.6vw,1.55rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.qstep__s{margin-top:5px;font-size:.9rem;color:var(--ink-3);line-height:1.5}
.qstep__hint{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-left:auto;white-space:nowrap}

/* big 3-up type picker */
.picks{display:grid;gap:12px}
@media (min-width:640px){.picks{grid-template-columns:repeat(3,1fr)}}
.pick{position:relative;cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick__b{
  --hue:var(--violet);
  height:100%;display:grid;gap:7px;align-content:start;
  padding:18px;border:1.5px solid var(--line-2);border-radius:var(--r);
  background:var(--paper-2);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast),background var(--t-fast);
}
.pick:hover .pick__b{border-color:color-mix(in srgb,var(--hue) 45%,transparent);transform:translateY(-2px)}
.pick input:checked + .pick__b{border-color:var(--hue);box-shadow:0 0 0 3px color-mix(in srgb,var(--hue) 16%,transparent),var(--sh-1);background:color-mix(in srgb,var(--hue) 5%,var(--paper-2))}
.pick input:focus-visible + .pick__b{outline:2px solid var(--hue);outline-offset:3px}
.pick__k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--hue) 75%,var(--ink))}
.pick__nm{font-family:var(--f-display);font-size:1.16rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.pick__d{font-size:.82rem;color:var(--ink-2);line-height:1.45}
.pick__pr{margin-top:6px;font-family:var(--f-display);font-size:1.05rem;font-weight:600;letter-spacing:-.03em}
.pick__pr em{font-style:normal;font-size:.62em;color:var(--ink-3);font-weight:500}
.pick__tick{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);transition:all var(--t-fast)}
.pick input:checked + .pick__b .pick__tick{border-color:var(--hue);background:var(--hue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}

/* pages segmented control */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg__b{
  display:inline-flex;flex-direction:column;gap:2px;
  padding:11px 18px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper-2);transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.seg label:hover .seg__b{border-color:var(--ink-4)}
.seg input:checked + .seg__b{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 8%,var(--paper-2))}
.seg input:focus-visible + .seg__b{outline:2px solid var(--violet);outline-offset:3px}
.seg__t{font-weight:600;font-size:.9rem;letter-spacing:-.01em}
.seg__p{font-family:var(--f-mono);font-size:.62rem;color:var(--ink-3)}
.seg input:checked + .seg__b .seg__p{color:var(--violet-ink)}

/* feature checklist */
.feats{display:grid;gap:10px}
@media (min-width:640px){.feats{grid-template-columns:1fr 1fr}}
.feat{position:relative;cursor:pointer;display:block}
.feat input{position:absolute;opacity:0;width:0;height:0}
.feat__b{
  height:100%;display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;
  padding:14px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper-2);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.feat:hover .feat__b{border-color:var(--ink-4)}
.feat input:checked + .feat__b{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 6%,var(--paper-2))}
.feat input:focus-visible + .feat__b{outline:2px solid var(--violet);outline-offset:3px}
.feat__box{margin-top:1px;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2);transition:all var(--t-fast)}
.feat input:checked + .feat__b .feat__box{border-color:var(--violet);background:var(--violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:13px;background-repeat:no-repeat;background-position:center}
.feat__nm{font-weight:600;font-size:.9rem;letter-spacing:-.012em;line-height:1.25}
.feat__d{display:block;margin-top:3px;font-size:.78rem;color:var(--ink-3);line-height:1.4;font-weight:400}
.feat__pr{font-family:var(--f-mono);font-size:.7rem;color:var(--violet-ink);white-space:nowrap}
.feat__pr.is-free{color:var(--teal-ink)}
/* a quantity feature — a dropdown instead of a tick box, spans the full row */
.feat--qty{cursor:default;grid-column:1 / -1}
.feat--qty .feat__b{grid-template-columns:1fr auto}
.feat--qty .field{margin-top:10px;max-width:340px}
.feat--qty .field select{font-size:.86rem;padding:10px 38px 10px 13px}

/* referral input */
.ref{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ref .field{flex:1;min-width:200px}
.ref__btn{white-space:nowrap}
.ref__msg{margin-top:12px;font-size:.86rem;display:none;align-items:center;gap:8px}
.ref__msg.is-on{display:flex}
.ref__msg--ok{color:var(--teal-ink)}
.ref__msg--no{color:var(--coral-ink)}
.ref__msg--load{color:var(--ink-3)}
.ref__msg b{font-weight:600}

/* domain sub-panel that appears on "yes" */
.reveal-panel{display:none;margin-top:16px}
.reveal-panel.is-on{display:grid;gap:16px;animation:menuIn .4s var(--e-out)}

/* upload */
.upload{
  display:flex;align-items:center;gap:14px;
  padding:16px;border:1.5px dashed var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast);
}
.upload:hover{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 4%,var(--paper))}
.upload input{position:absolute;opacity:0;width:0;height:0}
.upload__i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(var(--violet-rgb),.1);color:var(--violet);flex:none}
.upload__t{font-weight:600;font-size:.88rem}
.upload__s{font-size:.76rem;color:var(--ink-4);margin-top:2px}

/* ---------- 28. ORDER SUMMARY ---------- */
.sum{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:clamp(20px,2.6vw,26px);
  scroll-margin-top:clamp(90px,12vw,110px);
}
.sum__ttl{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.sum__lines{display:grid;gap:11px;padding:16px 0}
.sum__line{display:grid;gap:2px}
.sum__line-t{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.025em}
.sum__line-s{font-size:.82rem;color:var(--ink-3);line-height:1.4}
.sum__feats{display:grid;gap:5px;margin-top:2px}
.sum__feats li{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--ink-2)}
.sum__feats li span:last-child{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.sum__empty{font-size:.84rem;color:var(--ink-4);line-height:1.5}
.sum__totals{display:grid;gap:9px;padding:16px 0;border-top:1px solid var(--line)}
.sum__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.9rem;color:var(--ink-2)}
.sum__row dd{font-family:var(--f-mono);font-size:.86rem;color:var(--ink)}
.sum__row--off dd{color:var(--coral-ink)}
.sum__row--total{padding-top:11px;border-top:1px solid var(--line)}
.sum__row--total dt{font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.02em}
.sum__row--total dd{font-family:var(--f-display);font-weight:600;font-size:1.5rem;color:var(--ink);letter-spacing:-.04em}
.sum__care{
  margin-top:2px;padding:15px 17px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.08),rgba(47,201,192,.07));
  border:1px solid rgba(var(--violet-rgb),.16);
}
.sum__care-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sum__care-lbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-ink)}
.sum__care-pr{font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;font-size:1.2rem;white-space:nowrap}
.sum__care-pr small{font-size:.5em;color:var(--ink-3);font-weight:500}
.sum__care-note{margin-top:7px;font-size:.75rem;color:var(--ink-3);line-height:1.45}
.sum__cta{margin-top:18px}
.sum__cta .btn{width:100%}
.sum__fine{margin-top:12px;font-size:.72rem;color:var(--ink-4);line-height:1.5;text-align:center}
.sum__msg{margin-top:12px}

/* mobile sticky total bar */
.sumbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:12px;
  padding:12px var(--pad);padding-bottom:max(12px,env(safe-area-inset-bottom));
  background:rgba(252,250,246,.9);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(61,40,30,.4);
}
.sumbar__b{display:grid;gap:1px;flex:1;min-width:0}
.sumbar__lbl{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.sumbar__pr{font-family:var(--f-display);font-weight:600;font-size:1.15rem;letter-spacing:-.035em;line-height:1}
.sumbar__care{font-size:.7rem;color:var(--ink-3)}
.sumbar__care b{color:var(--ink);font-weight:600}
.sumbar .btn{flex:none}
@media (min-width:1000px){.sumbar{display:none}}

/* ---------- 29. SUCCESS PAGE ---------- */
.win{position:relative;overflow:hidden;text-align:center;padding-top:clamp(120px,18vw,180px);padding-bottom:clamp(50px,7vw,80px)}
.win__badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;
  padding:8px 16px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal-ink);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.win__h{font-family:var(--f-display);font-size:clamp(2.4rem,8vw,5rem);line-height:.96;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.win__lede{margin:24px auto 0;max-width:34em;font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.6;color:var(--ink-2)}
.win__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
/* confetti-ish floating marks, pure CSS, calm */
.win__spark{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.win__spark i{position:absolute;width:9px;height:9px;border-radius:2px;opacity:.7;animation:floaty 7s ease-in-out infinite}
.win__spark i:nth-child(1){left:12%;top:26%;background:var(--violet);animation-delay:0s}
.win__spark i:nth-child(2){left:82%;top:20%;background:var(--coral);animation-delay:.6s;border-radius:50%}
.win__spark i:nth-child(3){left:20%;top:64%;background:var(--teal);animation-delay:1.2s}
.win__spark i:nth-child(4){left:70%;top:70%;background:var(--amber);animation-delay:1.8s;border-radius:50%}
.win__spark i:nth-child(5){left:50%;top:14%;background:var(--lime);animation-delay:2.4s}
.win__spark i:nth-child(6){left:90%;top:52%;background:var(--violet-2);animation-delay:3s;border-radius:50%}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(20deg)}}

/* the after-purchase timeline */
.track{display:grid;gap:0;counter-reset:tk;max-width:760px;margin-inline:auto}
.track__step{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding-bottom:clamp(22px,3vw,30px);
}
.track__dot{
  counter-increment:tk;position:relative;z-index:2;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--paper-2);border:1.5px solid var(--line-2);
  font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);
}
.track__dot::before{content:counter(tk,decimal-leading-zero)}
.track__step:not(:last-child) .track__dot::after{
  content:"";position:absolute;top:40px;left:50%;translate:-50% 0;
  width:1.5px;height:calc(100% + clamp(22px,3vw,30px) - 40px);background:var(--line-2);
}
.track__step--now .track__dot{background:var(--violet);border-color:var(--violet);color:#fff}
.track__step--now .track__dot::before{content:""}
.track__step--now .track__dot{background-image:none}
.track__now-mark{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.track__b{padding-top:7px;text-align:left}
.track__t{font-family:var(--f-display);font-size:clamp(1.05rem,2.2vw,1.28rem);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.track__step--now .track__t{color:var(--violet)}
.track__when{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:4px}
.track__step--now .track__when{color:var(--violet-ink)}
.track__d{margin-top:8px;font-size:.92rem;color:var(--ink-2);line-height:1.55}

/* ---------- 30. MISC (new pages) ---------- */
/* value bullets with a coloured lead-in, used on care + product pages */
.why{display:grid;gap:14px}
@media (min-width:760px){.why{grid-template-columns:repeat(2,1fr)}}
.why li{
  display:grid;gap:6px;padding:clamp(18px,2.4vw,24px);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
}
.why b{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.025em}
.why span{font-size:.9rem;color:var(--ink-2);line-height:1.55}

/* a compact price recap band */
.recap{display:grid;gap:14px;padding:clamp(22px,3vw,30px);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--sh-1)}
@media (min-width:640px){.recap{grid-template-columns:1fr 1fr;align-items:center}}
.recap__block{display:grid;gap:4px}
.recap__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.recap__v{font-family:var(--f-display);font-size:clamp(1.8rem,4vw,2.3rem);font-weight:600;letter-spacing:-.045em}
.recap__v em{font-style:normal;font-size:.4em;color:var(--ink-3);font-weight:500}
.recap__block + .recap__block{border-top:1px solid var(--line);padding-top:14px}
@media (min-width:640px){.recap__block + .recap__block{border-top:0;border-left:1px solid var(--line);padding-top:0;padding-left:26px}}

/* ---------- 31. REDUCED MOTION for new bits ---------- */
@media (prefers-reduced-motion:reduce){
  .win__spark i,.reveal-panel.is-on{animation:none}
}

/* ==========================================================================
   32 · SURFACE & EMPHASIS PASS
   --------------------------------------------------------------------------
   The components above are deliberately quiet — they were drawn for wide
   screens where whitespace and columns do the separating. This layer gives
   them real surfaces so text and (especially) PRICING hold their own, and
   so the single-column mobile view reads as distinct blocks instead of one
   long stream of paragraphs.

   Every rule here intentionally deepens a component defined earlier in this
   file. If you're changing one of these, check both places.
   ========================================================================== */

/* ---------- 32.1 PRICE BLOCKS ----------
   A price should never be loose text. Each one gets a bounded, tinted plate
   in its card's own hue, with the recurring line joined underneath it. */

/* the /websites product cards: price + care read as one connected unit */
.tier-card__pr{
  margin-top:22px;padding:16px 18px 12px;
  border:1px solid color-mix(in srgb,var(--hue) 26%,transparent);
  border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--hue) 9%,var(--paper-2)), var(--paper-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.tier-card__care{
  margin-top:0;padding:11px 18px 14px;
  border:1px solid color-mix(in srgb,var(--hue) 26%,transparent);
  border-top:1px dashed color-mix(in srgb,var(--hue) 30%,transparent);
  border-radius:0 0 var(--r) var(--r);
  background:color-mix(in srgb,var(--hue) 5%,var(--paper-2));
  font-size:.84rem;color:var(--ink-2);
}

/* the Creator Care plans: same treatment, joined to the note under it */
.plan__pr{
  margin-top:20px;padding:16px 18px 10px;
  border:1px solid color-mix(in srgb,var(--hue) 26%,transparent);
  border-bottom:0;border-top:1px solid color-mix(in srgb,var(--hue) 26%,transparent);
  border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(135deg, color-mix(in srgb,var(--hue) 9%,var(--paper-2)), var(--paper-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.plan__note{
  margin-top:0;padding:10px 18px 13px;
  border:1px solid color-mix(in srgb,var(--hue) 26%,transparent);
  border-top:1px dashed color-mix(in srgb,var(--hue) 30%,transparent);
  border-radius:0 0 var(--r) var(--r);
  background:color-mix(in srgb,var(--hue) 5%,var(--paper-2));
  color:var(--ink-3);
}

/* homepage pricing cards — the number gets a plate of its own */
.pkg__price{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:9px 15px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--hue) 8%,var(--paper));
  border:1px solid color-mix(in srgb,var(--hue) 24%,transparent);
}

/* the big two-number recap on each product page */
.recap{
  padding:clamp(20px,3vw,26px);
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.07),rgba(255,92,114,.05));
  border:1px solid rgba(var(--violet-rgb),.2);
  box-shadow:var(--sh-2);
  gap:12px;
}
.recap__block{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(18px,2.4vw,22px);
  box-shadow:var(--sh-1);
}
/* the divider rules from §30 are replaced by the cards themselves */
.recap__block + .recap__block{border-top:1px solid var(--line);padding-top:clamp(18px,2.4vw,22px)}
@media (min-width:640px){
  .recap__block + .recap__block{border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,22px)}
}
.recap__v{font-size:clamp(1.9rem,4.2vw,2.5rem);color:var(--ink)}

/* the hard-facts strip under every page hero */
.facts{
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.facts > li{background:var(--paper-2);padding:clamp(17px,2.3vw,23px)}
.facts dd{font-size:clamp(1.1rem,2.4vw,1.42rem)}

/* ---------- 32.2 TEXT SURFACES ----------
   Long lists and quotes were sitting straight on the page. Each becomes a
   bounded panel — one panel per list, rather than a box per line. */

/* checklists become a single panel (reset inside things that are already cards) */
.incl{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,26px);
  box-shadow:var(--sh-1);
  gap:14px;
}
.incl--no{background:var(--paper-3);border-color:var(--line-2)}
.tier-card .incl,.plan .incl,.card .incl{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
}
.plan .incl{margin-top:22px;margin-bottom:26px}
.tier-card .incl{margin-top:22px;margin-bottom:26px}

/* editorial prose gets a page of its own */
.prose{
  max-width:40em;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,34px);
  box-shadow:var(--sh-1);
}

/* pull quotes: tinted plate with a brand rule down the side */
.say{
  padding:clamp(20px,3vw,28px) clamp(20px,3vw,28px);
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.06),rgba(255,92,114,.04));
  border:1px solid rgba(var(--violet-rgb),.16);
  border-left:3px solid var(--violet);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  max-width:none;
}

/* spec sheets become a bounded panel, rows keep their hairlines */
.spec{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  padding:2px clamp(16px,2.2vw,20px);
  border-top:1px solid var(--line);
}
.spec div:last-child{border-bottom:0}

/* numbered tallies become individual stat cards */
.tally{gap:10px}
.tally li{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(16px,2.2vw,20px);
  box-shadow:var(--sh-1);
}

/* process steps become cards instead of hairline rows */
.steps{gap:10px}
.step{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(18px,2.6vw,24px);
  box-shadow:var(--sh-1);
  transition:border-color var(--t),box-shadow var(--t);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}

/* the experience timeline on About */
.cv{gap:10px;border-top:0}
.cv li{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(16px,2.2vw,20px);
  box-shadow:var(--sh-1);
}

/* brand marks read as chips rather than faint text */
.exp__marks{gap:9px}
.exp__marks li{
  opacity:1;color:var(--ink-2);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:8px 15px;
  box-shadow:var(--sh-1);
  font-size:clamp(.85rem,1.9vw,1rem);
}
.exp__marks li:hover{color:var(--violet);border-color:rgba(var(--violet-rgb),.4)}

/* asides get a real surface instead of a flat tint */
.callout{background:var(--paper-2);box-shadow:var(--sh-1)}
.callout--on{
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.08),rgba(255,92,114,.06));
  border-color:rgba(var(--violet-rgb),.22);
}
/* a callout that leads the column rather than sitting beside it */
.callout--lg{
  gap:12px;
  padding:clamp(26px,3.4vw,36px);
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.14),rgba(255,92,114,.1));
  border-color:rgba(var(--violet-rgb),.35);
  box-shadow:0 18px 40px -22px rgba(var(--violet-rgb),.55);
}
.callout--lg .callout__t{font-size:clamp(1.3rem,2vw,1.55rem)}
.callout--lg p{font-size:1rem}

/* FAQ rows become cards — much clearer on a phone */
.faq{gap:10px}
.faq details{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  padding-inline:clamp(16px,2.2vw,22px);
  transition:border-color var(--t),box-shadow var(--t);
}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq details:hover{border-color:var(--line-2)}
.faq details[open]{border-color:rgba(var(--violet-rgb),.3);box-shadow:var(--sh-2)}

/* comparison table + link cards carry more lift */
.tblwrap{box-shadow:var(--sh-2);border-color:var(--line-2)}
.next a,.row,.mails li{box-shadow:var(--sh-1)}

/* zebra striping so the eye can track a row across four columns */
.tbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.tbl thead th{border-bottom:1px solid var(--line-2)}
.tbl tbody th{background:var(--paper-2)}
.tbl tbody tr:nth-child(even) th{background:color-mix(in srgb,var(--ink) 2.5%,var(--paper-2))}
/* the price row at the bottom is the one people are looking for */
.tbl tbody tr:last-child{background:color-mix(in srgb,var(--violet) 7%,transparent)}
.tbl tbody tr:last-child th{background:color-mix(in srgb,var(--violet) 7%,var(--paper-2))}
.tbl tbody tr:last-child td{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1.02rem}

/* the after-purchase timeline */
.track__b{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(16px,2.2vw,20px);
  box-shadow:var(--sh-1);
}
.track__step--now .track__b{
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.06),var(--paper-2));
  border-color:rgba(var(--violet-rgb),.3);
  box-shadow:var(--sh-2);
}

/* ---------- 32.3 THE CONFIGURATOR ----------
   Each step becomes a panel so the builder reads as a real, sectioned form. */
.qstep{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(20px,3vw,28px);
  box-shadow:var(--sh-1);
}
.qstep__hd{
  padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
/* step 4 already holds a form card — flatten it inside the panel */
.qstep .formcard{background:none;border:0;box-shadow:none;padding:0}
/* inputs sit on cream so they read as wells inside the white panel */
.qstep .field input,.qstep .field select,.qstep .field textarea{background:var(--paper)}

/* option tiles lift off the panel */
.pick__b,.feat__b,.seg__b{box-shadow:var(--sh-1);background:var(--paper)}
.pick input:checked + .pick__b,
.feat input:checked + .feat__b{box-shadow:var(--sh-2)}

/* prices inside the builder are badges, not text */
.pick__pr{
  display:inline-flex;align-items:baseline;gap:6px;
  margin-top:8px;padding:7px 13px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--hue) 11%,var(--paper-2));
  border:1px solid color-mix(in srgb,var(--hue) 28%,transparent);
}
.seg__p{
  padding:3px 9px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--violet) 9%,transparent);
  border:1px solid rgba(var(--violet-rgb),.16);
  align-self:flex-start;
}
.seg input:checked + .seg__b .seg__p{
  background:var(--violet);border-color:var(--violet);color:#fff;
}
.feat__pr{
  padding:5px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--violet) 10%,transparent);
  border:1px solid rgba(var(--violet-rgb),.18);
}
.feat__pr.is-free{
  background:color-mix(in srgb,var(--teal) 15%,transparent);
  border-color:rgba(47,201,192,.32);
}

/* ---------- 32.4 ORDER SUMMARY — read it like a receipt ---------- */
.sum{box-shadow:var(--sh-3);border-color:var(--line-2)}
.sum__lines{
  padding:16px;margin:16px 0 0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.sum__totals{border-top:0;padding-top:14px}
.sum__row--total{
  margin-top:4px;padding:14px 16px;
  border-top:0;
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.1),rgba(47,201,192,.07));
  border:1px solid rgba(var(--violet-rgb),.22);
  border-radius:var(--r);
}
.sum__row--off{
  padding:9px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--coral) 9%,transparent);
  border:1px solid rgba(255,92,114,.2);
}
.sum__care{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),var(--sh-1)}

/* the mobile total bar carries the same weight as the sidebar */
.sumbar{
  box-shadow:0 -12px 34px -16px rgba(61,40,30,.5);
  border-top:1px solid var(--line-2);
}
.sumbar__pr{font-size:1.28rem}

/* ---------- 32.5 MOBILE ----------
   No hover on a phone, and no columns doing the separating — so the static
   definition has to be stronger and the type has to carry further. */
@media (max-width:760px){
  /* every surface lifts a level so blocks separate on a cream background */
  .card,.plan,.tier-card,.qstep,.sum,.formcard,.faq details,
  .step,.tally li,.cv li,.incl,.prose,.spec,.next a,.row,.mails li,
  .track__b,.callout,.recap__block{box-shadow:var(--sh-2)}
  .facts,.tblwrap,.ask{box-shadow:var(--sh-3)}

  /* prices get bigger where there's no column to anchor them */
  .tier-card__pr{font-size:clamp(2.3rem,9vw,2.8rem)}
  .plan__pr{font-size:clamp(2.2rem,8.5vw,2.6rem)}
  .recap__v{font-size:clamp(2rem,8vw,2.4rem)}
  .facts dd{font-size:1.24rem}
  .sum__row--total dd{font-size:1.6rem}

  /* a little more room inside every panel */
  .incl{padding:20px}
  .incl li{font-size:.95rem}
  .qstep{padding:20px 18px}

  /* section rhythm: tinted bands need to be felt, not guessed at */
  .section--tint{
    border-block:1px solid var(--line);
    background:var(--paper-3);
  }

  /* the sticky bar shouldn't crowd the last panel */
  .cfg{padding-bottom:104px}

  /* a comparison table scrolls sideways on a phone — pin the row label so
     you never lose track of which feature you're reading */
  .tbl tbody th{
    position:sticky;left:0;z-index:1;
    box-shadow:1px 0 0 var(--line);
  }
  .tbl th,.tbl td{padding:14px 13px}
}

/* a dropdown extra (product setup, landing pages) stacks on a phone: beside its
   price tag, the dropdown was squeezed until "None — first 25 products included"
   read "None –". The tag moves under it, where it shows the price of the amount picked. */
@media (max-width:639px){
  .feat--qty .feat__b{grid-template-columns:1fr;gap:12px}
  .feat--qty .feat__pr{justify-self:start}
}

/* very small phones: stop price plates wrapping awkwardly */
@media (max-width:380px){
  .tier-card__pr,.plan__pr{padding-inline:15px}
  .sumbar__pr{font-size:1.15rem}
  .sumbar .btn{padding:11px 14px}
}

/* ---------- 32.6 FIXES ---------- */
/* .sum__row sets display:flex, which beats the UA stylesheet's [hidden]
   rule — so the referral line stayed visible with no code applied. */
.sum__row[hidden]{display:none}

/* "from" is a qualifier, not part of the number — keep it small so the
   figure itself is what the eye lands on. */
.tier-card__pr small,.recap__v small,.pkg__price small{
  font-family:var(--f-mono);
  font-size:.34em;font-weight:500;
  color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em;
}
/* .34em suits the big /websites prices; the homepage plates are set small,
   where it came out at 5px */
.pkg__price small{font-size:.6rem}

/* ==========================================================================
   33 · LEGAL PAGES & CHECKOUT AGREEMENT
   --------------------------------------------------------------------------
   /terms and /privacy: long-form reading, so a contents rail sits beside one
   column of numbered clauses, each section on its own surface. Same tokens
   as everything above. 33.6 adds the two checkout ticks in the order summary,
   and 33.7 makes the legal pages print cleanly (the E-Commerce Regulations
   expect terms that can be stored and reproduced).
   ========================================================================== */

/* ---------- 33.1 HERO EXTRAS + AT A GLANCE ---------- */
.phero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  margin-top:clamp(24px,3vw,32px);font-size:.9rem;
}
.phero__meta a:not(.btn){color:var(--violet);font-weight:500;border-bottom:1px solid rgba(var(--violet-rgb),.3)}
.phero__meta a:not(.btn):hover{border-bottom-color:var(--violet)}
/* .btn sets its own display, which beats the UA [hidden] rule (see 32.6) */
[data-print][hidden]{display:none}

h2.eyebrow{font-weight:500}
.glance{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.glance li{
  display:grid;gap:6px;align-content:start;
  padding:18px 20px;border-radius:var(--r);
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.glance b{font-family:var(--f-display);font-size:1.04rem;font-weight:600;letter-spacing:-.022em;line-height:1.2}
.glance span{font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.glance a{
  font-family:var(--f-mono);font-size:.72rem;color:var(--violet);white-space:nowrap;
  border-bottom:1px solid rgba(var(--violet-rgb),.3);
}

/* ---------- 33.2 LAYOUT + CONTENTS RAIL ---------- */
.legal{display:grid;gap:clamp(22px,3vw,34px)}
@media (min-width:1000px){
  .legal{grid-template-columns:250px minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  .ltoc{position:sticky;top:clamp(94px,11vw,110px);max-height:calc(100vh - 130px);overflow-y:auto}
}
.ltoc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.ltoc summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:15px 18px;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
.ltoc summary::-webkit-details-marker{display:none}
.ltoc summary::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform var(--t-fast);
}
.ltoc[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ltoc ol{display:grid;gap:1px;padding:0 8px 10px}
.ltoc a{
  display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:4px;
  padding:7px 10px;border-radius:10px;
  font-size:.84rem;line-height:1.35;color:var(--ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.ltoc a span{font-family:var(--f-mono);font-size:.64rem;color:var(--ink-4);padding-top:2px}
.ltoc a:hover{background:var(--tint);color:var(--ink)}
.ltoc a.is-on{background:color-mix(in srgb,var(--violet) 9%,transparent);color:var(--violet-ink)}
.ltoc a.is-on span{color:var(--violet)}

/* ---------- 33.3 THE DOCUMENT ---------- */
.ldoc{display:grid;gap:clamp(16px,2.2vw,22px);max-width:50em;min-width:0}
.lsec{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,38px);box-shadow:var(--sh-1);
  scroll-margin-top:clamp(90px,12vw,110px);
}
.lsec > * + *{margin-top:12px}
.lsec__h{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--f-display);font-size:clamp(1.45rem,3vw,1.95rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;
}
.lsec__n{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;color:var(--violet);flex:none;transform:translateY(-3px)}
.lsec > h3{
  display:flex;align-items:baseline;gap:10px;
  margin-top:28px;
  font-family:var(--f-display);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink);
  scroll-margin-top:clamp(90px,12vw,110px);
}
.lsec > h3 + *{margin-top:8px}
.cl{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.02em;color:var(--ink-4);flex:none;min-width:2.9em}
.lsec p,.lsec li{font-size:.97rem;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.lsec strong{color:var(--ink);font-weight:600}
.lsec a:not(.btn){color:var(--violet);font-weight:500;border-bottom:1px solid rgba(var(--violet-rgb),.3);transition:border-color var(--t-fast)}
.lsec a:not(.btn):hover{border-bottom-color:var(--violet)}
.lsec ul,.lsec ol{display:grid;gap:7px}
.lsec ul li{position:relative;padding-left:22px}
.lsec ul li::before{
  content:"";position:absolute;left:5px;top:.7em;
  width:6px;height:6px;border-radius:50%;background:var(--violet);opacity:.55;
}
/* (a) (b) (c) sub-clauses */
.lalpha{counter-reset:la}
.lalpha li{position:relative;padding-left:32px;counter-increment:la}
.lalpha li::before{
  content:"(" counter(la,lower-alpha) ")";position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:.74rem;line-height:2.3;color:var(--ink-3);
}

/* a highlight for details still to be filled in before launch */
.todo{
  background:color-mix(in srgb,var(--sun) 55%,transparent);color:var(--ink);
  padding:1px 5px;border-radius:5px;font-weight:500;
}

/* ---------- 33.4 SUMMARIES, TABLES, DATA CARDS ---------- */
.lsum{
  padding:16px 20px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.07),rgba(47,201,192,.06));
  border:1px solid rgba(var(--violet-rgb),.18);
}
.lsec > .lsum{margin-top:18px}
.lsum > * + *{margin-top:8px}
.lsum__t{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-ink)}
.lsec .lsum p,.lsec .lsum li{font-size:.93rem;color:var(--ink)}

.ltbl-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper-2);-webkit-overflow-scrolling:touch}
.lsec > .ltbl-wrap{margin-top:16px}
.ltbl{width:100%;border-collapse:collapse;font-size:.9rem}
.ltbl th,.ltbl td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.ltbl thead th{
  background:var(--paper-3);font-weight:500;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.ltbl td{color:var(--ink-2)}
.ltbl td:first-child{color:var(--ink);width:50%}
.ltbl b{font-weight:600;color:var(--ink)}
.ltbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.ltbl tbody tr:last-child > *{border-bottom:0}

.ldata{display:grid;gap:14px}
.lsec > .ldata{margin-top:18px}
.ldata article{padding:clamp(16px,2.4vw,22px);border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.ldata h3{
  font-family:var(--f-display);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;
  scroll-margin-top:clamp(90px,12vw,110px);
}
.ldata dl{display:grid;gap:12px;margin-top:14px}
.ldata dl div{display:grid;gap:3px}
@media (min-width:640px){.ldata dl div{grid-template-columns:8.5em minmax(0,1fr);gap:16px}}
.ldata dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:5px}
.ldata dd{font-size:.93rem;line-height:1.62;color:var(--ink-2)}

/* the model cancellation form reads like paper, with lines to write on */
.lform{padding:clamp(18px,2.6vw,24px);border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--paper)}
.lsec > .lform{margin-top:16px}
.lform > * + *{margin-top:12px}
.lform dl{display:grid;gap:16px;margin-top:18px}
.lform dt{font-size:.86rem;color:var(--ink-2)}
.lform dd{min-height:1.9em;border-bottom:1px solid var(--ink-4)}
.lsec .lform__note{font-size:.8rem;color:var(--ink-3)}

.lend{padding:4px 6px;font-size:.88rem;color:var(--ink-3)}
.lend a{color:var(--violet);font-weight:500;border-bottom:1px solid rgba(var(--violet-rgb),.3)}

/* ---------- 33.5 FOOTER: FOUR COLUMNS ----------
   Websites · Studio · Partners · Legal. Two across on a phone, so Partners and
   Legal sit under Websites and Studio; four across from 720px. Beside the
   blurb (from 860px) the columns go back to two across until there's room for
   four without "Creator Membership" wrapping, then the blurb takes a third. */
@media (min-width:720px){.foot__nav{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:860px) and (max-width:1139px){.foot__nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1140px){.foot__top{grid-template-columns:1fr 2fr}}
.foot__nav a[aria-current]{color:var(--violet)}

/* ---------- 33.6 CHECKOUT AGREEMENT ---------- */
.sum__agree{display:grid;gap:12px;margin-top:16px}
.tick{
  position:relative;cursor:pointer;
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;
  font-size:.8rem;line-height:1.5;color:var(--ink-2);
}
.tick input{position:absolute;opacity:0;width:0;height:0}
.tick__box{
  width:20px;height:20px;margin-top:1px;border-radius:6px;
  border:1.5px solid var(--line-2);background:var(--paper-2);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.tick:hover .tick__box{border-color:var(--ink-4)}
.tick input:checked + .tick__box{
  border-color:var(--violet);background:var(--violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center;
}
.tick input:focus-visible + .tick__box{outline:2px solid var(--violet);outline-offset:3px}
.tick.is-missing .tick__box{border-color:var(--coral-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 22%,transparent)}
.tick a{color:var(--violet);font-weight:500;border-bottom:1px solid rgba(var(--violet-rgb),.3)}
.tick small{display:block;margin-top:3px;font-size:.72rem;color:var(--ink-4);line-height:1.45}
.sum__fine a{color:var(--violet)}

/* with the ticks in, the summary can outgrow a laptop screen — let the
   sticky column scroll inside itself. The padding (pulled back with a
   matching negative margin) leaves room for .sum's shadow, which the
   scroll box would otherwise clip. */
@media (min-width:1000px){
  .cfg__aside{
    max-height:calc(100vh - clamp(94px,11vw,110px) - 8px);overflow-y:auto;overscroll-behavior:contain;
    padding:0 26px 44px;margin:0 -26px -44px;scrollbar-width:thin;
  }
}

/* ---------- 33.7 PRINT ---------- */
/* UK paper: the terms PDF (README "Terms PDF") and anyone printing them */
@page{size:A4;margin:16mm 15mm 18mm}
@media print{
  .skip,.grain,.nav,.mobilemenu,.foot,.ltoc,.phero__aura,.phero__meta,.sumbar{display:none !important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .wrap{max-width:none;padding-inline:0}
  .phero{padding:0 0 14pt}
  .section,.section--tight{padding-block:0 12pt}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .legal{display:block}
  .ldoc{max-width:none;gap:10pt}
  .lsec,.glance li,.ldata article,.lform,.ltbl-wrap{box-shadow:none;border-color:#bbb;background:#fff}
  .lsum{background:#f4f4f4;border-color:#bbb}
  .lsec{padding:14pt 16pt}
  .lsec > h3,.ldata h3{break-after:avoid}
  .glance li,.ldata article,.lsum,.ltbl-wrap,.lform{break-inside:avoid}
  .lsec a:not(.btn),.glance a,.lend a{color:#000;border-bottom:0;text-decoration:underline}
  .todo{background:none;border:1px solid #000}
}

/* ==========================================================================
   34 · LAUNCH KIT & WHAT'S ALREADY INCLUDED
   --------------------------------------------------------------------------
   34.1 The Launch kit: the free extras that come with every build, shown on
   /websites/ and each build page (terms 4.1 makes what those pages describe
   part of the build). 34.2 "What's already included" on /get-started/: a
   step panel that isn't a step, so it has a tick instead of a number, and
   stays closed until opened so it shows how much comes with the build
   without making the form any longer.
   ========================================================================== */

/* ---------- 34.1 THE LAUNCH KIT ---------- */
.kit{
  margin-top:clamp(28px,4vw,44px);
  display:grid;gap:clamp(18px,2.6vw,26px);
  padding:clamp(22px,3vw,32px);
  border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--violet) 22%,var(--line));
  background:
    radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--violet) 9%,transparent),transparent 55%),
    radial-gradient(120% 140% at 100% 100%,color-mix(in srgb,var(--coral) 8%,transparent),transparent 55%),
    var(--paper-2);
  box-shadow:var(--sh-2);
}
@media (min-width:1040px){.kit{grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);align-items:center}}
.kit__eyebrow{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink)}
.kit__h{margin-top:8px;font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.kit__p{margin-top:8px;font-size:.92rem;color:var(--ink-2);line-height:1.55;max-width:30em}
.kit__list{display:grid;gap:12px}
@media (min-width:640px){.kit__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kit__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;align-content:start;
  padding:14px 16px;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.kit__i{
  grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--violet);
}
.kit__i svg{width:18px;height:18px}
.kit__list b{font-weight:600;font-size:.93rem;letter-spacing:-.012em;line-height:1.3}
.kit__list li > span:last-child{margin-top:3px;font-size:.83rem;color:var(--ink-2);line-height:1.45}

/* ---------- 34.2 WHAT'S ALREADY INCLUDED ---------- */
.incd__sum{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;align-items:start;
  cursor:pointer;list-style:none;
}
.incd__sum::-webkit-details-marker{display:none}
.incd__sum .qstep__n{grid-row:span 2}
.qstep__n--tick{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.qstep__n--tick svg{width:16px;height:16px}
.incd__sum .qstep__s{display:block;grid-column:2}
.incd__go{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--paper);
  font-size:.82rem;font-weight:600;color:var(--violet-ink);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.incd__go::after{
  content:"";width:12px;height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B23C4' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;transition:transform var(--t);
}
.incd__sum:hover .incd__go{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 6%,var(--paper))}
.incd__hide{display:none}
.incd[open] .incd__show{display:none}
.incd[open] .incd__hide{display:inline}
.incd[open] .incd__go::after{transform:rotate(180deg)}
.incd[open] .incd__sum{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.incd__grp + .incd__grp{margin-top:24px}
.incd__h{margin-bottom:12px;font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* the lists sit flat inside the panel: no card of their own, even on a phone (32.5) */
.incd .incl{padding:0;border:0;background:none;box-shadow:none;gap:10px}
.incd .incl li{font-size:.88rem;line-height:1.5}
.incd__note{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line-2);font-size:.85rem;color:var(--ink-3);line-height:1.5}
@media (max-width:520px){
  .incd__sum{grid-template-columns:auto minmax(0,1fr)}
  .incd__go{grid-column:2;grid-row:auto;justify-self:start;margin-top:12px}
}

/* the order summary: the kit line, and a way into the list above */
.sum__more{
  display:inline-block;margin:0 0 14px;font-size:.8rem;font-weight:600;color:var(--violet);
  border-bottom:1px solid rgba(var(--violet-rgb),.3);transition:border-color var(--t-fast);
}
.sum__more:hover{border-bottom-color:var(--violet)}
.sum__feats--incl li span:last-child{color:var(--teal-ink)}

/* ==========================================================================
   35 · LINK IN BIO
   --------------------------------------------------------------------------
   /link-in-bio/: the link page that comes with every build (the Launch
   kit's yourname.com/links) and the editor the creator uses on their phone.
   Drawn in CSS like 13b and sized in em, so each picture scales down whole
   on a phone. 35.1 the phone · 35.2 the editor · 35.3 the creator's link
   page, which wears the .bx--soft / --bold / --warm styles from 13c ·
   35.4 the hero, where a link is dragged to the top every six seconds and
   the page follows · 35.5 the four little screens in "How it works" ·
   35.6 the style carousel · 35.7 the builds row · 35.8 reduced motion ·
   35.9 the "Included in all packages as standard" tag · 35.10 the panel
   and summary line on /get-started/ · 35.11 the homepage section.
   ========================================================================== */

/* ---------- 35.1 THE PHONE ---------- */
.lbph{
  position:relative;flex:none;width:16em;aspect-ratio:9/18.6;
  padding:.42em;border-radius:2.45em;
  background:linear-gradient(155deg,#34293f,#120d17 60%);
  box-shadow:
    inset 0 0 0 .06em rgba(255,255,255,.08),
    0 3.2em 5.6em -2.8em rgba(59,35,196,.5),
    0 1.6em 3em -1.8em rgba(25,19,32,.5);
}
.lbph__scr{
  position:relative;height:100%;overflow:hidden;
  display:flex;flex-direction:column;
  padding:2.35em .8em .8em;line-height:1.3;
  border-radius:2.05em;background:var(--paper);color:var(--ink);
}
.lbph__scr::before{                 /* the camera island */
  content:"";position:absolute;top:.62em;left:50%;translate:-50% 0;z-index:9;
  width:4.4em;height:1.25em;border-radius:.7em;background:#120d17;
}
/* a round photo of the creator: on their page, and in their editor */
.lbav{position:relative;display:block;flex:none;overflow:hidden;width:2.2em;height:2.2em;border-radius:50%;background:var(--paper-3)}
.lbav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}

/* ---------- 35.2 THE EDITOR ----------
   The creator's side: their links as cards, each with a grip on the right,
   where a thumb finds it */
.lbed__hd{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55em;
  padding-bottom:.8em;border-bottom:1px solid var(--line);
}
.lbed__me{display:block;min-width:0}
.lbed__me b{display:block;font-family:var(--f-display);font-size:.98em;font-weight:600;letter-spacing:-.025em}
.lbed__me span{display:block;margin-top:.2em;font-family:var(--f-mono);font-size:.5em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbed__live{
  display:inline-flex;align-items:center;gap:.45em;padding:.45em .8em;border-radius:var(--r-pill);
  font-size:.56em;font-weight:600;color:var(--teal-ink);background:color-mix(in srgb,var(--teal) 15%,transparent);
}
.lbed__live::before{content:"";width:.65em;height:.65em;border-radius:50%;background:var(--teal)}
.lbed__lbl{
  display:flex;justify-content:space-between;margin:1.9em 0 1.2em;
  font-family:var(--f-mono);font-size:.5em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}

.lbed__card{
  --lb-rest:0 .1em .25em rgba(61,40,30,.06),0 0 0 0 rgba(var(--violet-rgb),0);
  --lb-lift:0 1.3em 2.2em -.9em rgba(25,19,32,.42),0 0 0 .13em rgba(var(--violet-rgb),.4);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55em;
  height:3.2em;padding:0 .3em 0 .42em;
  border-radius:.9em;background:var(--paper-2);border:1px solid var(--line);
  box-shadow:var(--lb-rest);
}
.lbed__card .thumb{width:2.3em;height:2.3em;border-radius:.6em}
.lbed__txt{display:block;min-width:0}
.lbed__txt b{display:block;font-size:.72em;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbed__txt span{display:block;margin-top:.25em;font-family:var(--f-mono);font-size:.5em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the grip: six dots to hold and drag by */
.lbgrip{display:grid;place-items:center;width:1.9em;height:2.3em;border-radius:.6em}
.lbgrip::before{
  content:"";width:.84em;height:1.26em;
  background:radial-gradient(circle,var(--ink-4) 0 .1em,transparent .115em) 0 0/.42em .42em;
}

/* the list in the hero: the cards are stacked in slots (--k), so they can
   change places without anything around them moving */
.lbed__list{position:relative;--row-h:3.2em;--row:3.7em;height:calc(3 * var(--row) + var(--row-h))}
.lbed__list > .lbed__card{position:absolute;top:0;left:0;right:0;transform:translateY(calc(var(--k) * var(--row))) scale(1) rotate(0deg)}

.lbed__add{
  display:flex;align-items:center;justify-content:center;gap:.45em;
  height:2.75em;margin-top:.9em;border-radius:var(--r-pill);
  color:#fff;background:var(--g-violet);
  box-shadow:0 .7em 1.4em -.8em rgba(var(--violet-rgb),.9);
}
.lbed__add svg{width:.9em;height:.9em}
.lbed__add b{font-size:.74em;font-weight:600}
.lbed__hint{display:flex;align-items:center;justify-content:center;gap:.3em;margin-top:.8em;color:var(--ink-3)}
.lbed__hint .lbgrip{width:1em;height:1.2em}
.lbed__hint .lbgrip::before{
  width:.5em;height:.75em;background-size:.25em .25em;
  background-image:radial-gradient(circle,var(--ink-4) 0 .06em,transparent .07em);
}
.lbed__hint span{font-size:.54em}

/* "Saved": what the editor says once a change is live */
.lbed__toast{
  position:absolute;left:.8em;right:.8em;bottom:.85em;z-index:8;
  display:flex;align-items:center;gap:.6em;padding:.6em .8em .6em .6em;border-radius:1em;
  color:#fff;background:var(--ink);
  box-shadow:0 1.2em 2.2em -1em rgba(25,19,32,.55);
  opacity:0;
}
.lbed__ok{display:grid;place-items:center;width:1.8em;height:1.8em;flex:none;border-radius:50%;color:var(--ink);background:var(--lime)}
.lbed__ok svg{width:1em;height:1em}
.lbed__toast .lbed__txt span{color:rgba(255,255,255,.66)}

/* a fingertip, over the grip of the bottom card */
.lbtap{
  position:absolute;z-index:7;right:.1em;top:calc(3 * var(--row) + var(--row-h) / 2 - 1.15em);
  width:2.3em;height:2.3em;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.55),rgba(25,19,32,.2) 70%);
  border:.12em solid rgba(255,255,255,.9);
  box-shadow:0 .35em 1em rgba(25,19,32,.3),0 0 0 .4em rgba(var(--violet-rgb),.16);
  opacity:0;
}

/* ---------- 35.3 THE CREATOR'S LINK PAGE ----------
   Their photo, name and links at yourname.com/links, in their style. The
   top link is lit in the style's colour (--s-top: a flat colour, so the
   hero can fade a link into it) */
.bx--soft{--s-top:#5B3DF5}
.bx--bold{--s-top:#C9F24E}
.bx--warm{--s-top:#E0512B}
.lbpg{
  align-items:center;text-align:center;color:var(--s-ink);
  background:
    radial-gradient(130% 40% at 50% 0%,color-mix(in srgb,var(--s-pop) 16%,transparent),transparent 72%),
    var(--s-bg);
}
.lbpg__url{
  display:flex;align-items:center;gap:.4em;margin-bottom:.95em;padding:.38em .85em;
  border-radius:var(--r-pill);color:var(--s-url-ink);background:var(--s-url);border:1px solid var(--s-line);
}
.lbpg__url svg{width:.62em;height:.62em}
.lbpg__url span{font-family:var(--f-mono);font-size:.5em}
.lbpg .lbav{width:3.3em;height:3.3em;box-shadow:0 0 0 .18em var(--s-bg),0 0 0 .3em color-mix(in srgb,var(--s-pop) 60%,transparent)}
.lbpg__nm{display:block;margin-top:.7em;font-family:var(--f-display);font-size:.92em;font-weight:700;letter-spacing:.08em}
.lbpg__bio{display:block;margin-top:.3em;font-size:.54em;color:var(--s-mute)}
.lbpg__soc{display:flex;justify-content:center;gap:.45em;margin-top:.75em}
.lbpg__soc i{display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;color:var(--s-ink);background:var(--s-tile);border:1px solid var(--s-line)}
.lbpg__soc svg{width:.85em;height:.85em}

.lbpg__links{
  --row-h:2.4em;--row:2.82em;
  position:relative;align-self:stretch;margin-top:.95em;height:calc(3 * var(--row) + var(--row-h));
}
.lbpg__link{
  --lb-flat:0 0 0 0 transparent;--lb-glow:0 .6em 1.2em -.7em var(--s-glow);
  position:absolute;top:0;left:0;right:0;height:var(--row-h);
  transform:translateY(calc(var(--k) * var(--row)));
  display:grid;grid-template-columns:2em minmax(0,1fr) 2em;align-items:center;
  padding:0 .2em;border-radius:var(--r-pill);
  color:var(--s-ink);background-color:var(--s-tile);border:1px solid var(--s-line);
}
.lbpg__link .thumb{width:2em;height:2em;border-radius:50%}
.lbpg__link b{font-size:.64em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* in the style carousel and "How it works" the links simply stack */
.lbpg__links--flow{display:grid;gap:calc(var(--row) - var(--row-h));height:auto}
.lbpg__links--flow .lbpg__link{position:relative;transform:none}
.lbpg__links--flow .is-top{color:var(--s-on-acc);background:var(--s-acc);border-color:transparent;box-shadow:var(--lb-glow)}

/* the credit at the foot of every link page */
.lbpg__by{display:flex;align-items:center;gap:.45em;margin-top:auto;padding-top:.8em;color:var(--s-mute)}
.lbpg__by i{
  display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:.42em;
  font-family:var(--f-display);font-size:.6em;font-style:normal;font-weight:700;color:#fff;background:var(--g-violet);
}
.lbpg__by span{font-size:.5em}

/* ---------- 35.4 THE HERO: EDIT ON ONE PHONE, LIVE ON THE OTHER ----------
   Every six seconds the bottom link is pressed, dragged to the top and
   dropped; "Saved" comes up and the page behind follows, its new top link
   lit in the creator's colour. Four drags bring the list back to where it
   started, so the 24-second loop never jumps. Each card runs the same
   journey (lb-edit, lb-page), a quarter of the loop apart (--k). */
.art--lb{max-width:540px}
.art--lb .art__stage{aspect-ratio:auto;height:37.4em;font-size:3.4cqw}
.lbdemo .lbph--edit{position:absolute;left:0;top:3.9em;z-index:2;rotate:-2deg}
.lbdemo .lbph--page{position:absolute;right:0;top:0;width:14.4em;z-index:1;rotate:2.5deg}

/* the two labels: which phone is which */
.lbtag{
  position:absolute;z-index:3;display:flex;align-items:center;gap:.6em;
  padding:.5em 1em .5em .5em;border-radius:1.1em;line-height:1.3;white-space:nowrap;
  background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:var(--sh-3);
}
.lbtag__ic{display:grid;place-items:center;width:2.1em;height:2.1em;flex:none;border-radius:.7em;color:#fff;background:var(--g-violet)}
.lbtag__ic svg{width:1.05em;height:1.05em}
.lbtag__t{display:block}
.lbtag__t b{display:block;font-family:var(--f-display);font-size:.82em;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lbtag__t span{display:block;font-family:var(--f-mono);font-size:.56em;color:var(--ink-3)}
.lbtag--edit{left:.4em;top:0}
.lbtag--page{right:0;top:31.4em}
.lbtag--page .lbtag__ic{background:linear-gradient(135deg,#0B9467,#4CC04A)}

.lbdemo .lbed__list > .lbed__card{animation:lb-edit 24s cubic-bezier(.45,0,.25,1) calc(var(--k) * -6s) infinite}
.lbdemo .lbpg__link{animation:lb-page 24s cubic-bezier(.45,0,.25,1) calc(var(--k) * -6s) infinite}
.lbdemo .lbtap{animation:lb-tap 6s cubic-bezier(.45,0,.25,1) infinite}
.lbdemo .lbed__toast{animation:lb-toast 6s var(--e-out) infinite}
/* nothing moves until the picture has come into view */
.js .art--lb:not(.in) .lbdemo *{animation-play-state:paused}

/* one card's 24 seconds: nudged down a slot three times as others are
   dragged past it, then lifted, dragged from the bottom to the top, dropped */
@keyframes lb-edit{
  0%,10.5%{transform:translateY(0) scale(1) rotate(0deg);z-index:1;box-shadow:var(--lb-rest)}
  12.25%,34%{transform:translateY(var(--row)) scale(1) rotate(0deg)}
  35.75%,57.5%{transform:translateY(calc(2 * var(--row))) scale(1) rotate(0deg)}
  59.25%,79.9%{transform:translateY(calc(3 * var(--row))) scale(1) rotate(0deg);z-index:1;box-shadow:var(--lb-rest)}
  80%{z-index:6}
  81.5%{transform:translateY(calc(3 * var(--row))) scale(1.05) rotate(-1.6deg);box-shadow:var(--lb-lift)}
  87.5%{transform:translateY(0) scale(1.05) rotate(-1.6deg);box-shadow:var(--lb-lift)}
  89%{transform:translateY(0) scale(1) rotate(0deg);z-index:6;box-shadow:var(--lb-rest)}
  89.1%,100%{transform:translateY(0) scale(1) rotate(0deg);z-index:1;box-shadow:var(--lb-rest)}
}
/* the same link on the page: it follows a beat after "Saved", and is lit
   while it's the top one */
@keyframes lb-page{
  0%,15%{transform:translateY(0);z-index:1;color:var(--s-on-acc);background-color:var(--s-top);border-color:transparent;box-shadow:var(--lb-glow)}
  18%,40%{transform:translateY(var(--row));color:var(--s-ink);background-color:var(--s-tile);border-color:var(--s-line);box-shadow:var(--lb-flat)}
  43%,65%{transform:translateY(calc(2 * var(--row)))}
  68%,89.9%{transform:translateY(calc(3 * var(--row)));z-index:1;color:var(--s-ink);background-color:var(--s-tile);border-color:var(--s-line);box-shadow:var(--lb-flat)}
  90%{z-index:5}
  93%{transform:translateY(0);z-index:5;color:var(--s-on-acc);background-color:var(--s-top);border-color:transparent;box-shadow:var(--lb-glow)}
  93.1%,100%{transform:translateY(0);z-index:1;color:var(--s-on-acc);background-color:var(--s-top);border-color:transparent;box-shadow:var(--lb-glow)}
}
/* every six seconds: touch down on the grip, hold, drag up with the card, let go */
@keyframes lb-tap{
  0%,14%{opacity:0;transform:translateY(0) scale(1.4)}
  20%{opacity:1;transform:translateY(0) scale(1)}
  26%{opacity:1;transform:translateY(0) scale(.84)}
  50%{opacity:1;transform:translateY(calc(-3 * var(--row))) scale(.84)}
  56%,100%{opacity:0;transform:translateY(calc(-3 * var(--row))) scale(1.3)}
}
@keyframes lb-toast{
  0%,55%{opacity:0;transform:translateY(1.2em) scale(.96)}
  61%,87%{opacity:1;transform:translateY(0) scale(1)}
  93%,100%{opacity:0;transform:translateY(.5em) scale(.98)}
}

/* ---------- 35.5 HOW IT WORKS: FOUR LITTLE SCREENS ----------
   Cards (15) with a piece of the editor on top. Spans, not <p>: ".card p"
   would set its own size on anything inside */
@media (min-width:1100px){.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lbui{
  display:grid;place-items:center;height:200px;margin-bottom:6px;padding:16px;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line);font-size:15px;line-height:1.3;
  background:
    radial-gradient(90% 80% at 12% 8%,rgba(var(--violet-rgb),.1),transparent 70%),
    radial-gradient(80% 80% at 92% 96%,rgba(255,92,114,.08),transparent 70%),
    var(--paper);
}
.lbui__in{display:grid;gap:.55em;width:100%;max-width:16.5em}
.lbui__h{display:flex;align-items:center;justify-content:center;gap:.45em;font-family:var(--f-display);font-size:.98em;font-weight:600;letter-spacing:-.02em}
.lbui__h svg{width:1em;height:1em;color:var(--violet)}
.lbf{display:grid;gap:.15em;padding:.45em .8em;border-radius:.75em;text-align:left;background:var(--paper-2);border:1px solid var(--line-2)}
.lbf small{font-family:var(--f-mono);font-size:.58em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.lbf b{display:flex;align-items:center;font-size:.8em;font-weight:500;white-space:nowrap}
.lbf--on{border-color:var(--violet);box-shadow:0 0 0 .22em rgba(var(--violet-rgb),.14)}
.lbcaret{width:1.5px;height:1.1em;margin-left:1px;background:var(--violet);animation:blink 1.1s steps(1) infinite}
.lbbtn{
  display:flex;align-items:center;justify-content:center;gap:.4em;height:2.45em;border-radius:var(--r-pill);
  font-size:.82em;font-weight:600;color:#fff;background:var(--g-violet);
  box-shadow:0 .6em 1.2em -.7em rgba(var(--violet-rgb),.9);
}
/* step 3: one link lifted off the list, a finger on its grip */
.lbui .lbed__card{position:relative}
.lbui .is-lift{z-index:2;transform:translate(-.35em,-.3em) rotate(-2deg) scale(1.04);box-shadow:var(--lb-lift)}
.lbui .lbtap{top:50%;right:.1em;translate:0 -50%;scale:.84;opacity:1}
/* step 4: saved, and the page with its new top link */
.lbui .lbed__toast{position:relative;inset:auto;opacity:1}
.lbmini{display:grid;gap:.5em;padding:.6em;border-radius:1em;background:var(--s-bg);border:1px solid var(--s-line);box-shadow:var(--sh-2)}
.lbmini__url{display:block;text-align:center;font-family:var(--f-mono);font-size:.56em;color:var(--s-mute)}
.lbmini .lbpg__links{--row-h:2.3em;--row:2.75em;margin:0}
.lbmini .lbpg__link b{font-size:.72em;text-align:center}

/* ---------- 35.6 THE STYLE CAROUSEL ----------
   The same link page in the three example styles (soft, bold, warm),
   switched by the swatches under it like the build pages' heroes (13c and
   "example creators" in main.js) */
.art--lbstyle .art__stage{aspect-ratio:auto;display:grid;justify-items:center;padding-block:.5em 1.3em;font-size:min(3.9cqw,18px)}
.art--lbstyle .lbph{width:14.4em;rotate:2deg}
/* soft's links on a lavender tint rather than the cream of its other tiles */
.lbpg.bx--soft{--s-tile:#F3EFFF}

/* ---------- 35.7 THE BUILDS, THREE ACROSS ---------- */
@media (min-width:1000px){.next--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shead + .next{margin-top:0}

/* ---------- 35.8 REDUCED MOTION ----------
   The hero holds still on the moment that explains it: the bottom link
   pressed and lifted, ready to go to the top */
@media (prefers-reduced-motion:reduce){
  .lbdemo .lbed__card,.lbdemo .lbpg__link,.lbdemo .lbtap,.lbdemo .lbed__toast{animation:none}
  .lbdemo .lbed__card.is-grab{z-index:6;transform:translateY(calc(3 * var(--row))) scale(1.05) rotate(-1.6deg);box-shadow:var(--lb-lift)}
  .lbdemo .lbtap{opacity:1;transform:scale(.84)}
  .lbdemo .lbpg__link.is-top{color:var(--s-on-acc);background-color:var(--s-top);border-color:transparent;box-shadow:var(--lb-glow)}
}

/* ---------- 35.9 "INCLUDED IN ALL PACKAGES AS STANDARD" ----------
   The tag that goes wherever the link page is offered: under the hero on
   /link-in-bio/, in its homepage section and on /get-started/ */
.inclbadge{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  padding:6px 16px 6px 6px;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink);
  border:1.5px solid transparent;
  background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,var(--g-violet) border-box;
  box-shadow:0 10px 26px -14px rgba(var(--violet-rgb),.75);
}
.inclbadge__i{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;color:#fff;background:var(--g-violet)}
.inclbadge__i svg{width:15px;height:15px}
/* one line on a phone; on the narrowest, two even lines rather than one word alone */
.inclbadge{text-wrap:balance}
@media (max-width:480px){
  .inclbadge{gap:8px;padding:5px 13px 5px 5px;font-size:.82rem}
  .inclbadge__i{width:26px;height:26px}
  .inclbadge__i svg{width:13px;height:13px}
}
.phero__lede + .inclbadge{margin-top:clamp(18px,2.4vw,24px)}

/* ---------- 35.10 GET STARTED: FREE WITH EVERY WEBSITE ----------
   A panel among the steps, but not a step (nothing to fill in): the pitch,
   and the link page on a phone rising out of the panel's foot. The order
   summary repeats it as a "Free" line (.sum__gift, drawn by main.js). Neither
   is part of the order or the price. */
.lbgift{
  position:relative;overflow:hidden;
  display:grid;gap:clamp(18px,3vw,28px);
  padding:clamp(20px,3vw,28px) clamp(20px,3vw,28px) 0;
  border-radius:var(--r-lg);border:1.5px solid transparent;
  background:
    radial-gradient(70% 90% at 100% 100%,rgba(var(--violet-rgb),.13),transparent 65%) padding-box,
    linear-gradient(135deg,#fff,#FFF9FB) padding-box,
    var(--g-violet) border-box;
  box-shadow:0 26px 60px -36px rgba(var(--violet-rgb),.55);
}
@media (min-width:640px){.lbgift{grid-template-columns:minmax(0,1fr) auto}}
.lbgift__b{display:grid;gap:10px;align-content:center;padding-bottom:clamp(20px,3vw,28px)}
.lbgift__b .inclbadge{margin-bottom:6px}
.lbgift__b .qstep__s{margin-top:0;color:var(--ink-2);line-height:1.55}
.lbgift__go{width:fit-content;font-size:.9rem;font-weight:600}
/* the phone is cut off by the panel's foot: only its top shows */
.lbgift__art{
  container-type:inline-size;align-self:end;justify-self:center;
  width:200px;height:clamp(190px,46vw,250px);overflow:hidden;
}
.lbgift__art .lbph{width:100%;font-size:6.25cqw}

.sum__gift{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(var(--violet-rgb),.1),rgba(255,92,114,.08));
  border:1px solid rgba(var(--violet-rgb),.24);
}
.sum__gift-i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;background:var(--g-violet)}
.sum__gift-i svg{width:15px;height:15px}
.sum__gift-t{display:grid;gap:1px;min-width:0;line-height:1.3}
.sum__gift-t b{font-family:var(--f-display);font-size:.92rem;font-weight:600;letter-spacing:-.02em}
.sum__gift-t span{font-family:var(--f-mono);font-size:.62rem;color:var(--ink-3)}
.sum__gift-tag{
  padding:4px 10px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--g-violet);
}

/* ---------- 35.11 THE HOMEPAGE SECTION ----------
   Creator Care's dark "Just ask" panel (26) holding the hero's two phones
   from /link-in-bio/, the page in the soft style so it shows on the dark */
@media (min-width:900px){.ask--lb .ask__grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)}}
.ask--lb .art--lb{max-width:460px}
/* the section's label and its live dot, a size up: as big as the homepage's other labels */
.ask--lb .ask__eyebrow{gap:.75em;font-size:clamp(.8rem,1.5vw,.92rem);font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.78)}
.ask--lb .ask__eyebrow .pulse{width:.72em;height:.72em}
.ask--lb .inclbadge{margin-top:24px}
.ask__go{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (max-width:599px){.ask--lb{padding:28px 20px}}

/* ==========================================================================
   36 · ABOUT
   --------------------------------------------------------------------------
   /about/: Karl's photo in the hero (the homepage's .karl__portrait) with a
   second floating badge, the band of places he's worked straight under the
   hero, and the skills card beside "My story". Everything else is shared.
   ========================================================================== */
/* a second badge, top left of the photo, bobbing out of step with the first */
.karl__badge--uk{right:auto;bottom:auto;left:-14px;top:-18px;animation-delay:-3.1s}  /* on the top edge, clear of the face */
.karl__badge--uk b{font-size:1.05rem}

/* where I've worked: the four names, set large, the first thing under the hero */
.brandband{position:relative;z-index:2;padding-block:clamp(30px,4.4vw,48px);border-block:1px solid var(--line);background:var(--paper-2)}
.brandband__in{display:grid;justify-items:center;gap:14px;text-align:center}
.brandband__lbl{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.brandband__names{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px clamp(22px,4vw,56px)}
.brandband__names li{font-family:var(--f-display);font-size:clamp(1.45rem,3.8vw,2.5rem);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.brandband__names li:nth-child(3){letter-spacing:.01em}   /* LOOKFANTASTIC is all capitals */
.brandband__note{font-size:.74rem;color:var(--ink-4)}

/* the skills card beside "My story" */
.about__skills .karl__chips{margin-top:6px}

/* ---- About: colour + motion ----
   <body class="about">. Section labels set bigger and bolder, as on the
   homepage (the page loads the mono face's 700 weight for them), each led by
   a short gradient dash that draws in as it reveals. Then: a creator-spectrum
   wash behind the places I've worked, a colour per "How I work" card, a line
   down "My story" and coloured skills that pop in one by one. The counters
   ([data-count], main.js) show their final number without JS. */
.about .section .eyebrow,
.about .brandband__lbl{font-size:clamp(.82rem,1.5vw,.92rem);font-weight:700;letter-spacing:.12em;color:var(--ink-2)}
.about .section .eyebrow{gap:12px}
.about .section .eyebrow::before,
.about .brandband__lbl::before,
.about .brandband__lbl::after{
  content:"";flex:none;width:26px;height:3px;border-radius:3px;background:var(--g-violet);
  transform-origin:left;transition:transform .8s var(--e-out) .25s;
}
.about .brandband__lbl{display:flex;align-items:center;gap:14px}
.about .brandband__lbl::after{background:linear-gradient(135deg,#FF5C72,#9B4BF0 48%,#5B3DF5);transform-origin:right}
.js .about .section .eyebrow:not(.in)::before,
.js .about .brandband__lbl:not(.in)::before,
.js .about .brandband__lbl:not(.in)::after{transform:scaleX(0)}

/* hero: the wash drifts, as on the homepage, with a little coral in it */
.about .phero__aura{
  background:
    radial-gradient(40% 44% at 28% 40%, rgba(var(--violet-rgb),.13), transparent 70%),
    radial-gradient(44% 40% at 74% 58%, rgba(255,209,102,.16), transparent 70%),
    radial-gradient(30% 34% at 88% 30%, rgba(255,92,114,.10), transparent 70%);
  animation:aura 26s ease-in-out infinite alternate;
}
/* a coloured dot on each fact */
.about .facts dt{display:flex;align-items:flex-start;gap:8px}
.about .facts dt::before{content:"";flex:none;width:7px;height:7px;margin-top:.42em;border-radius:50%;background:var(--violet)}
.about .facts li:nth-child(2) dt::before{background:var(--coral)}
.about .facts li:nth-child(3) dt::before{background:var(--teal)}
.about .facts li:nth-child(4) dt::before{background:var(--amber)}

/* where I've worked: a soft spectrum wash that drifts; the names rise in turn */
.about .brandband{
  background:linear-gradient(110deg,#F3EEFF,#FFF1F4 30%,#FFF6EA 60%,#EAFAF8 85%,#F3EEFF);
  background-size:300% 100%;
  border-block-color:rgba(var(--violet-rgb),.14);
  animation:drift 22s ease-in-out infinite;
}
.about .brandband__names li{transition:color var(--t-fast)}
.js .about .brandband__names:not(.in) li{opacity:0}
.about .brandband__names.in li{animation:nameIn .8s var(--e-out) backwards}
.about .brandband__names li:nth-child(2){animation-delay:.1s}
.about .brandband__names li:nth-child(3){animation-delay:.2s}
.about .brandband__names li:nth-child(4){animation-delay:.3s}
@keyframes nameIn{from{opacity:0;transform:translate3d(0,14px,0)}}
@media (hover:hover){
  .about .brandband__names li:hover{
    background:var(--g-violet);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

/* how I work: each card in its own colour, the icon on a gradient tile that
   pops in with its card and tilts on hover */
.about .cards > .card{
  --hue-ink:var(--violet-ink);
  background:radial-gradient(110% 70% at 0% 0%,color-mix(in srgb,var(--hue) 8%,transparent),transparent 62%),var(--paper-2);
}
.about .cards > .card:nth-child(3n+2){--hue:var(--coral);--hue-ink:var(--coral-ink)}
.about .cards > .card:nth-child(3n){--hue:var(--teal);--hue-ink:var(--teal-ink)}
.about .card__i{
  color:#fff;background:linear-gradient(135deg,var(--hue-ink),var(--hue));
  box-shadow:0 8px 18px -10px var(--hue-ink);
  transition:transform var(--t);
}
.about .card:hover .card__i{transform:rotate(-8deg) scale(1.08)}
.about .card .link{color:var(--hue-ink);border-bottom-color:color-mix(in srgb,var(--hue) 40%,transparent)}
.about .card .link:hover{border-bottom-color:var(--hue-ink)}
.about .card.in .card__i{animation:iconPop .7s var(--e-out) backwards;animation-delay:calc(var(--d,0s) + .22s)}
@keyframes iconPop{from{transform:scale(.4) rotate(-20deg);opacity:0}}

/* my story: a gradient line runs down beside the two paragraphs */
.about__story{position:relative;display:grid;gap:clamp(20px,2.8vw,30px);padding-left:clamp(18px,2.4vw,26px)}
.about__story::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--violet),var(--violet-mid) 50%,var(--coral));
  transform-origin:top;transition:transform 1.1s var(--e-out) .3s;
}
.js .about__story:not(.in)::before{transform:scaleY(0)}

/* the skills card: a gradient edge like the photo's frame, a slow glow behind
   it, and each skill in a colour of its own, popping in one after another */
.about__side{position:relative}
.about__side::before{
  content:"";position:absolute;inset:4% 2%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--violet-mid-rgb),.24),rgba(255,92,114,.12) 60%,transparent);
  filter:blur(38px);
  animation:storyGlow 10s ease-in-out infinite alternate;
}
@keyframes storyGlow{to{transform:translate3d(4%,-5%,0) scale(1.08)}}
.about__skills{
  position:relative;
  border:1.5px solid transparent;
  background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,var(--g-violet) border-box;
  box-shadow:0 30px 60px -36px rgba(var(--violet-rgb),.5),var(--sh-1);
}
.about__skills:hover{border-color:transparent}
.about__skills .karl__chips li{
  --hue:var(--violet);--hue-ink:var(--violet-ink);
  background:color-mix(in srgb,var(--hue) 8%,var(--paper-2));
  border-color:color-mix(in srgb,var(--hue) 24%,transparent);
  color:var(--hue-ink);
}
.about__skills .karl__chips li:nth-child(4n+2){--hue:var(--coral);--hue-ink:var(--coral-ink)}
.about__skills .karl__chips li:nth-child(4n+3){--hue:var(--teal);--hue-ink:var(--teal-ink)}
.about__skills .karl__chips li:nth-child(4n){--hue:var(--amber);--hue-ink:var(--amber-ink)}
.about__skills .karl__chips li:hover{border-color:var(--hue);color:var(--hue-ink);background:color-mix(in srgb,var(--hue) 14%,var(--paper-2))}
.js .about__skills:not(.in) .karl__chips li{opacity:0}
.about__skills.in .karl__chips li{animation:chipIn .55s var(--e-out) backwards;animation-delay:calc(.35s + var(--i,0) * .05s)}
.about__skills .karl__chips li:nth-child(2){--i:1}
.about__skills .karl__chips li:nth-child(3){--i:2}
.about__skills .karl__chips li:nth-child(4){--i:3}
.about__skills .karl__chips li:nth-child(5){--i:4}
.about__skills .karl__chips li:nth-child(6){--i:5}
.about__skills .karl__chips li:nth-child(7){--i:6}
.about__skills .karl__chips li:nth-child(8){--i:7}
.about__skills .karl__chips li:nth-child(9){--i:8}
.about__skills .karl__chips li:nth-child(10){--i:9}
.about__skills .karl__chips li:nth-child(11){--i:10}
.about__skills .karl__chips li:nth-child(12){--i:11}
@keyframes chipIn{from{opacity:0;transform:translate3d(0,8px,0) scale(.85)}}
/* the counting number inside "10+ yrs" keeps the badge's big type, not its caption's */
.about .karl__badge b span{font-size:inherit;color:inherit}

/* ---------- 36. COOKIE SETTINGS ----------
   A small card in the corner, opened by "Cookie settings" in the footer's Legal
   column: it says whether analytics is on and switches it (main.js). Nothing
   asks on arrival any more. It never blocks the page. */
.consent{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:110;
  max-width:400px;padding:18px 18px 16px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translate3d(0,16px,0);
  transition:opacity var(--t),transform var(--t),visibility 0s linear .34s;
}
.consent.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--t),transform var(--t),visibility 0s}
@media (min-width:600px){.consent{left:20px;right:auto;bottom:20px}}
.consent__h{font-family:var(--f-display);font-size:1.08rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.consent__p{margin-top:6px;font-size:.86rem;line-height:1.55;color:var(--ink-2)}
.consent__p a{color:var(--violet);font-weight:500;border-bottom:1px solid rgba(var(--violet-rgb),.3)}
.consent__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.foot__btn{
  font:inherit;font-size:.9rem;color:var(--ink-2);text-align:left;
  background:none;border:0;padding:0;cursor:pointer;width:fit-content;
  transition:color var(--t-fast),transform var(--t-fast);
}
.foot__btn:hover{color:var(--violet);transform:translateX(3px)}
@media print{.consent{display:none !important}}
.lsec code{font-family:var(--f-mono);font-size:.84em;padding:1px 6px;border-radius:6px;background:var(--paper-3);color:var(--ink)}

/* ---------- 37. PAGE NOT FOUND (/404.html) ----------
   The success page's centred hero, plus six places to carry on. Cards for the
   three builds wear their build's colour, like the nav. */
.lost{padding-bottom:var(--sec)}
.lost__links{
  display:grid;gap:10px;max-width:880px;margin:clamp(44px,6vw,64px) auto 0;text-align:left;
}
@media (min-width:560px){.lost__links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.lost__links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lost__links li{--hue:var(--violet);--hue-ink:var(--violet-ink)}
.lost__links a{
  position:relative;display:grid;gap:3px;height:100%;
  padding:16px 18px 16px 34px;border-radius:var(--r-sm);
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t);
}
.lost__links a::before{
  content:"";position:absolute;left:18px;top:23px;width:7px;height:7px;border-radius:50%;background:var(--hue);
}
.lost__links b{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lost__links span{font-size:.86rem;color:var(--ink-3)}
.lost__links a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--hue) 40%,transparent);box-shadow:var(--sh-2)}
.lost__links a:hover b{color:var(--hue-ink)}

/* ==========================================================================
   38 · REFERRALS & AGENCY PARTNERS
   --------------------------------------------------------------------------
   /referrals/ and /agency-partners/, linked only from the footer's Partners
   column. Mostly shared parts (.tier-card, .kit, .tbl, .faq, .cards, .two).
   New here: the sign-up card, which turns into the code once it's made
   (join.php, "joining" in main.js); the steps under the referral hero; the
   agency hero picture, made like 13b (sized in em off the column's width, so
   on a phone it scales down whole); and the price table's savings.
   ========================================================================== */

/* ---------- 38.1 SIGNING UP: the form in a card, then the code ---------- */
/* the three steps under the referral hero's words */
.hsteps{display:grid;gap:10px;margin-top:clamp(24px,3vw,32px);counter-reset:hstep}
@media (min-width:560px){.hsteps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hsteps li{
  counter-increment:hstep;display:grid;gap:3px;align-content:start;
  padding:13px 15px;border-radius:var(--r-sm);
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.hsteps li::before{content:"0" counter(hstep);font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;color:var(--violet)}
.hsteps b{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.hsteps span{font-size:.85rem;color:var(--ink-3);line-height:1.45}

/* the card: in the referral hero, and beside the agency sign-up's notes.
   .form and .joined set display, which beats the UA [hidden] rule (see 32.6) */
.joincard{
  width:100%;max-width:480px;justify-self:center;
  padding:clamp(22px,3vw,30px);border-radius:var(--r-lg);
  background:var(--paper-2);border:1px solid var(--line-2);box-shadow:var(--sh-3);
  scroll-margin-top:clamp(90px,12vw,110px);
}
.joincard .form{gap:16px}
.joincard .form[hidden],.joined[hidden]{display:none}
.joincard__hd{display:grid;gap:4px}
.joincard__t{font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.55rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.joincard__s{font-size:.9rem;color:var(--ink-3);line-height:1.5}
.joincard .tick{font-size:.84rem}
.joincard .form__small{text-align:center}

/* the code, once it's made */
.joined{display:grid;gap:14px;outline:0}
.joined__msg{
  display:grid;gap:10px;justify-items:start;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line);
}
.joined__lbl{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.joined__text{font-size:.92rem;line-height:1.55;color:var(--ink)}
.joined__text span{white-space:nowrap}
.joined__note{font-size:.84rem;color:var(--ink-3);line-height:1.5}

/* drawn as a ticket, with a notch either side where it tears. The mask cuts the
   notches, and would clip a box-shadow, so the shadow is a filter on the wrapper.
   --cut is how far down the dashed line sits: padding 1.3 + label .806 + code
   .32 + 2 + gap 1 = 5.43em */
.rcode{font-size:clamp(13px,1.2vw,15px);filter:drop-shadow(0 1em 1.4em rgba(var(--violet-rgb),.32))}
.rcode__in{
  --cut:5.43em;
  --notch:radial-gradient(circle at 0 var(--cut),transparent .62em,#000 .66em) left/51% 100% no-repeat,
          radial-gradient(circle at 100% var(--cut),transparent .62em,#000 .66em) right/51% 100% no-repeat;
  padding:1.3em 1.4em 1.25em;border-radius:1.2em;color:#fff;
  background:linear-gradient(135deg,#4A2FE0 0%,#5B3DF5 42%,#9B4BF0 100%);
  -webkit-mask:var(--notch);mask:var(--notch);
}
.rcode__k{font-family:var(--f-mono);font-size:.62em;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.74)}
.rcode__code{margin-top:.2em;font-family:var(--f-mono);font-size:1.6em;line-height:1.25;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.rcode__split{
  display:grid;grid-template-columns:1fr 1fr;margin-top:1em;padding-top:1em;
  border-top:.12em dashed rgba(255,255,255,.45);
}
.rcode__split p{display:grid;gap:.25em}
.rcode__split p + p{padding-left:1em;border-left:1px solid rgba(255,255,255,.24)}
.rcode__split b{font-family:var(--f-display);font-size:1.75em;font-weight:600;letter-spacing:-.04em;line-height:1}
.rcode__split span{font-size:.72em;line-height:1.3;color:rgba(255,255,255,.82)}

/* ---------- 38.2 WHAT A CODE GETS THEM ---------- */
/* the usual price, after the saving, on the build cards */
.tier-card__was{white-space:nowrap;color:var(--ink-3)}
.tier-card__was::before{content:"\00b7";margin:0 6px;color:var(--ink-4)}
@media (max-width:599px){.tier-card__was{display:block;margin-top:2px}.tier-card__was::before{content:none}}
/* two partnerships side by side on the agency page */
@media (min-width:860px){.tiers.tiers--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a roster deal in purple, between the brand's violet and the logo's pink */
.tier-card--roster{--hue:#9B4BF0;--hue-ink:#6E2BC2}

/* ---------- 38.3 AGENCY HERO: the roster, the partner price, what comes back ---------- */
.art--roster .art__stage{aspect-ratio:1/.8;font-size:2.5cqw}
.tcard{
  position:absolute;top:0;width:33%;margin:0;overflow:hidden;
  border-radius:1.2em;background:#15171c;border:.28em solid #fff;
  box-shadow:0 .2em .4em rgba(61,40,30,.06),0 2.2em 3.8em -1.8em rgba(61,40,30,.45);
}
.art__stage .tcard img{aspect-ratio:4/5;height:auto}
.tcard figcaption{
  position:absolute;inset:auto 0 0;display:grid;gap:.3em;
  padding:2.8em .9em .85em;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(12,10,16,.84));
}
.tcard__k{font-family:var(--f-mono);font-size:.56em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.tcard b{font-family:var(--f-display);font-size:1em;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.tcard__st{
  justify-self:start;margin-top:.25em;padding:.4em .85em;border-radius:var(--r-pill);
  font-style:normal;font-size:.6em;font-weight:600;line-height:1;white-space:nowrap;
  color:var(--ink);background:#fff;
}
.tcard__st::before{
  content:"";display:inline-block;width:.62em;height:.62em;margin-right:.5em;
  border-radius:50%;background:var(--dot,var(--teal));vertical-align:.02em;
}
.tcard--1{left:0;top:9%;transform:rotate(-5deg)}
.tcard--2{left:33.5%;top:0;z-index:2}
.tcard--3{left:67%;top:9%;transform:rotate(5deg)}
.tcard--2 .tcard__st{--dot:var(--amber)}
.tcard--3 .tcard__st{--dot:var(--violet)}

/* the partner price, on the table in front of them */
.pprice{
  position:absolute;left:2%;top:60%;width:56%;z-index:3;
  padding:1.1em 1.2em .7em;border-radius:1.3em;
  background:var(--paper-2);border:1px solid var(--line);
  box-shadow:0 .2em .4em rgba(61,40,30,.05),0 2.6em 4.6em -2em rgba(var(--violet-rgb),.38);
}
.pprice__hd{display:flex;justify-content:space-between;align-items:center;gap:1em;padding-bottom:.8em;border-bottom:1px solid var(--line)}
.pprice__hd span{font-family:var(--f-mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pprice__hd em{
  font-style:normal;padding:.4em .85em;border-radius:var(--r-pill);white-space:nowrap;
  font-size:.7em;font-weight:600;color:#fff;background:var(--g-violet);
}
.pprice li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:.8em;padding:.62em 0;font-size:.84em;color:var(--ink-2)}
.pprice li + li{border-top:1px solid var(--line)}
.pprice s{font-size:.92em;color:var(--ink-4)}
.pprice b{font-family:var(--f-display);font-size:1.22em;font-weight:600;letter-spacing:-.03em;color:var(--ink)}

/* what comes back to the agency: brand enquiries, and the commission (in teal, like money in) */
.aping__ic--cash{background:linear-gradient(135deg,var(--teal-ink),var(--teal))}
.art--roster .aping{left:auto;right:0;top:66%}
.art--roster .aping--fee{top:86%;right:0;animation-delay:-2.7s}

/* ---------- 38.4 THE PRICE TABLE ---------- */
/* each partner price with what it saves, prices set like prices */
.tbl--partners thead th:not(:first-child){text-align:center}
.tbl--partners td b{font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.tbl--partners td small{display:block;margin-top:3px;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.03em;color:var(--teal-ink)}
.tbl--partners thead th small{display:block;margin-top:3px;font-size:.92em;letter-spacing:.06em;text-transform:none;color:var(--ink-4)}

/* ---------- WHO IT'S FOR: the bar above the nav ----------
   On every creator page (since 14 October 2026). Businesses at /, creators at /creators/: two links, never a
   toggle. The fixed nav starts below the bar and moves up once it sticks. */
:root{--aud-h:40px}
.aud{position:relative;z-index:101;background:linear-gradient(90deg,#EFEAFF 0%,#F8EDF8 52%,#FFEEEE 100%);color:var(--ink-2);font-size:.82rem;padding-inline:var(--pad);border-bottom:1px solid rgba(var(--violet-rgb),.08)}
.aud__in{max-width:var(--maxw);margin-inline:auto;min-height:var(--aud-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:5px}
.aud__switch{display:flex;align-items:center;gap:2px}
.aud__switch a{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:var(--r-pill);font-weight:500;color:var(--ink-2);transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast)}
.aud__switch a[aria-current]{color:var(--ink);font-weight:600;background:#fff;box-shadow:var(--sh-1)}
.aud__switch a:not([aria-current]):hover{color:var(--violet-ink);background:rgba(255,255,255,.55)}
.aud__switch svg{width:14px;height:14px;transition:transform var(--t)}
.aud__switch a:hover svg{transform:translateX(2px)}
.aud__switch a:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.aud__note{display:none;margin:0}
@media (min-width:760px){.aud__note{display:block}}
.nav{top:var(--aud-h);transition:padding var(--t),top var(--t)}
.nav.is-stuck{top:0}
.nav:not(.is-stuck) + .mobilemenu{top:calc(84px + var(--aud-h))}
.mm__aud{margin:4px 6px 14px;font-size:.92rem;color:var(--ink-2)}
.mm__aud a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}