/* ==========================================================================
   PureFields — product site
   Design tokens → primitives → layout → components → sections → responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* Absans — Collletttivo, SIL Open Font License 1.1 (assets/fonts/Absans-OFL.txt).
   Single weight (400). font-synthesis is disabled everywhere it is used so no
   browser fakes a bold it does not have. */
@font-face{
  font-family:"Absans";
  src:url("../fonts/Absans-Regular.woff2") format("woff2"),
      url("../fonts/Absans-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- Brand: verified from the plugin's own admin CSS ----
     #3362FF is the dominant accent (83 uses) and the options sample's default
     primary; #5F4AFE is its secondary violet (36 uses). */
  --brand:#3362FF;
  --brand-strong:#1E4BE0;
  --brand-soft:#EEF2FF;
  --brand-violet:#5F4AFE;

  /* ---- Neutral architecture (Kirki guideline §3 / §12) ---- */
  --color-bg:#FFFFFF;
  --color-text:#0C0C0C;
  --color-text-muted:rgba(12,12,12,.64);
  --color-surface:#F1F1F1;
  --color-surface-subtle:rgba(0,0,0,.06);
  --color-border:rgba(0,0,0,.10);
  --color-border-strong:rgba(0,0,0,.18);

  /* aliases kept so existing component rules keep resolving */
  --bg:var(--color-bg);
  --bg-soft:#F7F7F8;
  --bg-muted:var(--color-surface);
  --bg-sunken:#E7E7E9;
  --ink:var(--color-text);
  --ink-900:var(--color-text);
  --ink-700:rgba(12,12,12,.80);
  --ink-500:var(--color-text-muted);
  --ink-400:rgba(12,12,12,.56);
  --ink-300:rgba(12,12,12,.40);
  --line:var(--color-border);
  --line-strong:var(--color-border-strong);
  --line-faint:var(--color-surface-subtle);
  --pf-50:var(--brand-soft);
  --pf-100:#DCE4FF;
  --pf-200:#BECCFF;
  --pf-300:#8FA8FF;
  --pf-400:#5B82FF;
  --pf-500:var(--brand);
  --pf-600:var(--brand-strong);
  --pf-700:#1739A8;
  --blue-500:var(--brand);

  /* ---- Dark surfaces ---- */
  --d-bg:#000000;
  --d-bg-2:#0B0B0C;
  --d-surface:#161617;
  --d-surface-2:#1F1F21;
  --d-line:rgba(255,255,255,.10);
  --d-line-2:rgba(255,255,255,.16);
  --d-text:#FFFFFF;
  --d-text-2:rgba(255,255,255,.68);
  --d-text-3:rgba(255,255,255,.52);

  /* ---- Syntax ---- */
  --syn-key:#A9C2FF; --syn-str:#86EFAC; --syn-fn:#93C5FD;
  --syn-var:#F0ABFC; --syn-num:#FCD34D; --syn-com:rgba(255,255,255,.46);
  --syn-punc:rgba(255,255,255,.60);

  --ok:#137A38;
  --ok-soft:#E9F7EE;

  /* Free = light yellow / black · Pro = light red / white · cross = light red */
  --free-bg:#FDE68A;      /* #0C0C0C on this = 15.71:1 */
  --free-fg:#0C0C0C;
  --free-line:rgba(120,88,0,.28);
  --pro-bg:#E03131;       /* white on this = 4.51:1 */
  --pro-fg:#FFFFFF;
  --no-bg:#FEECEC;
  --no-fg:#D93B3B;        /* icon on tint = 3.96:1 */

  /* ---- Type (guideline §2) ---- */
  --font-display:"Absans","Inter",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-sans:var(--font-body);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --text-hero:96px;
  --text-display:72px;
  --text-h2:56px;
  --text-h3:24px;
  --text-card-title:24px;
  --text-body-lg:18px;
  --text-body:16px;
  --text-small:14px;

  /* ---- Spacing ladder (guideline §5) ---- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px;  --space-10:128px; --space-11:160px;
  --s-1:var(--space-1); --s-2:var(--space-2); --s-3:var(--space-3);
  --s-4:var(--space-4); --s-5:var(--space-5); --s-6:var(--space-6);
  --s-7:var(--space-7); --s-8:var(--space-8); --s-9:var(--space-9);
  --s-10:var(--space-10);

  /* ---- Radius (guideline §4) ---- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:100px;
  --media-radius:16px;
  --r-xs:4px; --r-sm:var(--radius-sm); --r-md:var(--radius-md);
  --r-lg:var(--radius-lg); --r-xl:var(--radius-lg); --r-full:var(--radius-pill);

  /* ---- Elevation: restrained, per §8 "avoid giant fake shadows" ---- */
  --e-1:0 1px 2px rgba(0,0,0,.04);
  --e-2:0 2px 6px rgba(0,0,0,.05);
  --e-3:0 10px 30px -12px rgba(0,0,0,.12);
  --e-4:0 26px 60px -24px rgba(0,0,0,.20);
  --e-brand:0 14px 34px -14px rgba(51,98,255,.45);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.87,0,.13,1);
  --t-fast:150ms;
  --t-base:300ms;
  --t-slow:420ms;

  --nav-h:72px;
  --wrap:1200px;
}

/* Containers (guideline §7) */
.page-shell{width:min(100% - 40px,1440px);margin-inline:auto}
.content-shell{width:min(100%,1200px);margin-inline:auto}
.copy-narrow{max-width:680px}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-900);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--pf-200);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--pf-500);
  outline-offset:3px;
  border-radius:4px;
}
.dark-zone :focus-visible{outline-color:var(--pf-300)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;transition:top var(--t-base) var(--ease-out);
}
.skip-link:focus{top:var(--s-4)}

/* Grid/flex children must be allowed to shrink below their content width —
   otherwise a code block's longest line widens the whole track. */
.hero__layout > *,.pin__grid > *,.dev__inner > *,.rep > *,.fx > *,
.fx__split > *,.docs > *,.bento > *,.b-demo > *,.flow__steps > *,
.foot__top > *,.strip__item,.cmp__cell,.cmp__hcell,.wpf,.wprep__row > *{min-width:0}

/* ---------- 3. Layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
.wrap-wide{max-width:1360px}
.section{padding-block:var(--space-9)}          /* 96px — default */
.section-sm,.section-tight{padding-block:var(--space-8)}  /* 64px — supporting */
.section-lg{padding-block:var(--space-10)}      /* 128px — anchor moments */

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pf-600);
}
.eyebrow::before{
  content:"";width:16px;height:1px;background:currentColor;opacity:.5;
}
.dark-zone .eyebrow{color:var(--pf-300)}

.h1{
  font-family:var(--font-display);
  font-size:var(--text-hero);
  line-height:.94em;letter-spacing:-.015em;font-weight:400;
  font-synthesis:none;
  text-wrap:balance;
}
.h2{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  line-height:1.16em;letter-spacing:-.008em;font-weight:400;
  font-synthesis:none;
  text-wrap:balance;
}
.h3{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  line-height:1.25;letter-spacing:-.022em;font-weight:600;
}
.lede{
  font-size:var(--text-body-lg);font-weight:500;
  line-height:1.5em;letter-spacing:-.02em;
  color:var(--color-text-muted);max-width:640px;
}
.dark-zone .lede{color:var(--d-text-2)}
.muted{color:var(--ink-500)}
.grad-text{
  background:linear-gradient(96deg,var(--pf-500) 0%,var(--blue-500) 58%,var(--pf-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.section-head{max-width:44rem;margin-bottom:var(--space-7)}
.section-head .h2{margin-top:var(--space-3)}
.section-head .lede{margin-top:var(--space-4)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lede{margin-inline:auto}
.section-head--center .eyebrow::before{display:none}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border-radius:38px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:all 300ms ease-out;
}
.btn svg{flex:none}
.btn-primary{
  background:var(--pf-500);color:#fff;box-shadow:var(--e-brand);
}
.btn-primary:hover{background:var(--pf-600);box-shadow:0 22px 50px -16px rgba(51,98,255,.55)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{
  background:var(--color-surface-subtle);color:var(--color-text-muted);
  border-color:var(--color-border);box-shadow:none;
}
.btn-secondary:hover{background:#000;color:#fff;border-color:#000}
.btn-ghost{color:var(--ink-700)}
.btn-ghost:hover{color:var(--ink-900);background:var(--bg-muted)}
.dark-zone .btn-secondary{
  background:rgba(255,255,255,.06);color:var(--d-text-2);border-color:var(--d-line-2);box-shadow:none;
}
.dark-zone .btn-secondary:hover{background:#fff;color:#000;border-color:#fff}
.btn-lg{min-height:56px;padding:0 30px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

.textlink{
  display:inline-flex;align-items:center;gap:6px;min-height:24px;padding-block:2px;
  font-size:14.5px;font-weight:600;color:var(--pf-600);
  border-bottom:1px solid transparent;transition:border-color var(--t-fast) var(--ease-out);
}
.textlink:hover{border-color:currentColor}
.textlink svg{transition:transform var(--t-base) var(--ease-out)}
.textlink:hover svg{transform:translateX(3px)}
.dark-zone .textlink{color:var(--pf-300)}

/* ---------- 5. Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;border:1px solid;line-height:1.4;
  flex:none;
}
.badge-free{color:var(--free-fg);background:var(--free-bg);border-color:var(--free-line)}
.badge-pro{color:var(--pro-fg);background:var(--pro-bg);border-color:var(--pro-bg)}
.dark-zone .badge-free{color:var(--free-fg);background:var(--free-bg);border-color:var(--free-line)}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 8px 6px 6px;border-radius:var(--r-full);
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--ink-500);
}
.pill b{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--ink-900);
  padding:3px 7px;border-radius:var(--r-full);
}

/* ---------- 6. Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out),
             backdrop-filter var(--t-base) var(--ease-out);
}
.nav.is-stuck{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--s-5);
  display:flex;align-items:center;gap:var(--s-6);
}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:16px}
.brand__mark{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:linear-gradient(140deg,var(--pf-500),var(--blue-500));
  display:grid;place-items:center;box-shadow:0 4px 12px -3px rgba(51,98,255,.5);
}
.brand__mark svg{width:16px;height:16px;color:#fff}
.brand sup{
  font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  color:var(--pf-600);background:var(--pf-50);border:1px solid var(--pf-100);
  padding:2px 5px;border-radius:4px;margin-left:2px;top:-1px;position:relative;
}
.nav__links{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav__links a{
  padding:8px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;
  color:var(--ink-500);transition:color var(--t-fast),background var(--t-fast);
}
.nav__links a:hover{color:var(--ink-900);background:var(--bg-muted)}
.nav__cta{display:flex;align-items:center;gap:var(--s-2)}
.nav__toggle{
  display:none;width:44px;height:44px;place-items:center;border-radius:var(--r-sm);
  color:var(--ink-700);
}
.nav__toggle:hover{background:var(--bg-muted)}
.nav__drawer{
  position:fixed;inset:var(--nav-h) 0 auto;z-index:99;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:var(--s-4) var(--s-5) var(--s-6);
  display:none;
}
.nav__drawer[data-open="true"]{display:block}
.nav__drawer a{
  display:block;padding:14px 4px;font-size:16px;font-weight:500;
  border-bottom:1px solid var(--line-faint);
}
.nav__drawer .btn{display:flex;width:100%;margin-top:var(--s-4)}

/* ---------- 7. WP interface recreation (shared component) ---------- */
.wpbox{
  text-align:left;
  color:var(--color-text);
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--e-3);overflow:hidden;
}
.wpbox__bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FCFCFE,#F6F7FA);
}
.wpbox__title{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--color-text)}
.wpbox__hint{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);
}
.wpbox__body{padding:var(--s-5);display:grid;gap:var(--s-5)}

.wpf{display:grid;gap:7px}
.wpf__label{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--ink-700);letter-spacing:-.005em;
}
.wpf__desc{font-size:11.5px;color:var(--ink-400);line-height:1.5}
.wpf__input{
  height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;font-size:13px;color:var(--ink-900);display:flex;align-items:center;
  box-shadow:inset 0 1px 2px rgba(11,13,18,.03);
}
.wpf__input--ph{color:var(--ink-300)}
.wpf__textarea{height:74px;align-items:flex-start;padding-top:9px;line-height:1.5}

/* switch */
.wpf__switch{
  width:44px;height:24px;border-radius:var(--r-full);background:var(--bg-sunken);
  border:1px solid var(--line-strong);position:relative;flex:none;
  transition:background var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out);
}
.wpf__switch::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--e-2);
  transition:transform var(--t-base) var(--ease-snap);
}
.wpf__switch[data-on="true"]{background:var(--pf-500);border-color:var(--pf-500)}
.wpf__switch[data-on="true"]::after{transform:translateX(20px)}
.wpf__switchrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}

/* buttonset / tabs */
.wpf__set{display:inline-flex;justify-self:start;align-self:start;padding:3px;background:var(--bg-muted);border:1px solid var(--line);border-radius:var(--r-sm);gap:3px}
.wpf__set span{
  padding:6px 13px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink-500);
  transition:background var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),box-shadow var(--t-base);
}
.wpf__set span[data-sel="true"]{background:#fff;color:var(--ink-900);box-shadow:var(--e-2);font-weight:600}

/* media / image */
.wpf__media{
  display:flex;align-items:center;gap:12px;padding:10px;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--bg-soft);
}
.wpf__thumb{
  width:52px;height:40px;border-radius:6px;flex:none;
  background:linear-gradient(135deg,var(--pf-200),var(--blue-500) 130%);
  position:relative;overflow:hidden;
}
.wpf__thumb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.65),transparent 60%);
}
.wpf__mediameta{display:grid;gap:2px;min-width:0}
.wpf__mediameta b{font-size:12px;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpf__mediameta span{font-size:11px;color:var(--ink-400);font-family:var(--font-mono)}
.wpf__btn{
  margin-left:auto;padding:7px 12px;border-radius:6px;border:1px solid var(--line-strong);
  background:#fff;font-size:12px;font-weight:600;color:var(--ink-700);flex:none;
}

/* color */
.wpf__color{display:flex;align-items:center;gap:10px}
.wpf__swatch{width:30px;height:30px;border-radius:7px;border:1px solid var(--line-strong);flex:none;box-shadow:var(--e-1)}
.wpf__hex{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-700)}

/* select */
.wpf__select{
  height:38px;padding:0 34px 0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;font-size:13px;display:flex;align-items:center;position:relative;
}
.wpf__select::after{
  content:"";position:absolute;right:13px;top:calc(50% - 2px);
  border:4px solid transparent;border-top-color:var(--ink-400);
}

/* checkbox */
.wpf__checks{display:grid;gap:9px}
.wpf__check{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-700)}
.wpf__box{
  width:17px;height:17px;border-radius:4px;border:1px solid var(--line-strong);background:#fff;flex:none;
  display:grid;place-items:center;
}
.wpf__box[data-on="true"]{background:var(--pf-500);border-color:var(--pf-500)}
.wpf__box svg{width:11px;height:11px;color:#fff;opacity:0}
.wpf__box[data-on="true"] svg{opacity:1}

/* repeater */
.wprep{display:grid;gap:9px}
.wprep__row{
  display:grid;grid-template-columns:auto 1fr 1fr auto;gap:10px;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  box-shadow:var(--e-1);
}
.wprep__grab{color:var(--ink-300);cursor:grab;display:grid;place-items:center;width:16px}
.wprep__cell{
  height:32px;padding:0 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-soft);font-size:12px;display:flex;align-items:center;color:var(--ink-700);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wprep__del{color:var(--ink-300);display:grid;place-items:center;width:26px;height:26px;border-radius:6px;flex:none}
.wprep__del:hover{color:#DC2626;background:#FEF2F2}
.wprep__add{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-sm);
  border:1px dashed var(--line-strong);background:var(--bg-soft);
  font-size:12.5px;font-weight:600;color:var(--ink-700);justify-self:start;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.wprep__add:hover{border-color:var(--pf-400);color:var(--pf-600);background:var(--pf-50)}

/* ---------- 7b. Real product screenshots ---------- */
/* Framed captures of the running plugin. Distinct from .wpbox (a CSS
   recreation) so it always reads as photographic evidence, not a mock. */
.shot{
  position:relative;border-radius:var(--media-radius);overflow:hidden;
  border:1px solid var(--line-strong);background:var(--bg-muted);
  box-shadow:var(--e-4);
}
.shot img{width:100%;height:auto;display:block}
.shot--flush{border-radius:var(--r-md);box-shadow:var(--e-3)}
.shot--sm{border-radius:var(--r-sm);box-shadow:var(--e-1);border-color:var(--line)}
/* Field crops are small captures — never upscale them, only allow shrinking. */
.shot--native{display:inline-block;width:auto;max-width:100%;background:#fff}
.shot--native img{width:auto;max-width:100%;height:auto}
.shot--crop{max-height:230px}
.shot--crop img{object-fit:cover;object-position:top left}
.dark-zone .shot{border-color:var(--d-line-2);background:var(--d-surface);box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}

.shotcap{
  margin-top:var(--s-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-400);
}
.dark-zone .shotcap{color:var(--d-text-3)}
.shotcap svg{width:13px;height:13px;flex:none}

/* Hero → product overview band */
.overview{padding-block:0 var(--space-8)}
.overview__frame{position:relative;max-width:1120px;margin-inline:auto}
.overview__glow{
  position:absolute;inset:12% 6% -6%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(51,98,255,.28),transparent 72%);
  filter:blur(56px);
}
.overview .shot{position:relative;z-index:1;transform-origin:50% 0}

/* Card with a screenshot header */
.card--shot{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--shot .card__shot{
  border-bottom:1px solid var(--line);background:var(--bg-muted);
  aspect-ratio:16/8;overflow:hidden;
}
.card--shot .card__shot img{
  width:100%;height:100%;object-fit:cover;object-position:top left;
  transition:transform var(--t-slow) var(--ease-out);
}
.card--shot:hover .card__shot img{transform:scale(1.03)}
.card--shot .card__body{padding:var(--s-5);display:grid;gap:6px;align-content:start}

/* Free / Pro proof sections */
.proof{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s-8);align-items:center}
.proof--rev{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.proof--rev > *:first-child{order:2}
.proof--rev > *:last-child{order:1}
.proof__list{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
.proof__item{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55}
.proof__item svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--ok)}
.dark-zone .proof__item svg{color:#6EE7A8}
.proof__item b{font-weight:600}
.proof__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-5)}

.pro-zone{position:relative;overflow:hidden;background:var(--d-bg)}
.pro-zone__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(48% 44% at 78% 18%,rgba(51,98,255,.26),transparent 68%),
    radial-gradient(42% 40% at 14% 78%,rgba(51,98,255,.14),transparent 68%);
}
.pro-zone .wrap{position:relative;z-index:1}
.pro-zone .shot{box-shadow:0 44px 100px -34px rgba(51,98,255,.55),0 12px 30px -12px rgba(0,0,0,.6)}

/* Dialog gallery — the three captures are cropped to the dialog, so they share
   a portrait-ish aspect and tile evenly. */
.progal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-9)}
.progal__item{display:flex;flex-direction:column;background:var(--d-surface)}
.progal__item img{width:100%;height:auto;display:block}
.progal__item figcaption{
  margin-top:auto;padding:14px var(--s-4);border-top:1px solid var(--d-line);
  font-size:13px;line-height:1.5;color:var(--d-text-2);background:rgba(255,255,255,.02);
}

/* ---------- 7c. Canvas stage ---------- */
/* Structure and measurements taken from Kirki's hero canvas component:
   fluid width capped at 1360, 32px 20px 0 padding, centred flex, crosshair
   cursor. Artwork is PureFields' own — side rails and toolbar are rebuilt,
   the device is a real capture. The spec's fixed 1323x784 render size and its
   mid-animation transforms were capture artifacts and are not reproduced. */
.canvas{
  display:flex;justify-content:center;align-items:center;
  width:100%;max-width:1360px;margin-inline:auto;
  padding:32px 20px 0;
  font-family:var(--font-sans);font-size:16px;color:var(--ink);
  cursor:crosshair;
}
.canvas__inner{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,26px);width:100%;
}

/* Side rails — the panel chrome either side of the device. */
.canvas__rail{
  flex:none;align-self:center;display:grid;gap:7px;
  padding:10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(39,39,39,.94),rgba(20,20,20,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.65);
}
.canvas__rail--l{width:125px}
.canvas__rail--r{width:106px}
.canvas__railcap{
  height:8px;border-radius:4px;background:rgba(255,255,255,.16);
  width:60%;margin-bottom:3px;
}
.canvas__row{
  display:flex;align-items:center;gap:7px;
  padding:7px 8px;border-radius:8px;background:rgba(255,255,255,.045);
}
.canvas__row i{
  width:12px;height:12px;border-radius:3px;flex:none;
  background:rgba(255,255,255,.22);
}
.canvas__row span{height:6px;border-radius:3px;background:rgba(255,255,255,.16);flex:1}
.canvas__row[data-on="true"]{background:rgba(51,98,255,.30)}
.canvas__row[data-on="true"] i{background:var(--pf-300)}
.canvas__row[data-on="true"] span{background:rgba(178,168,255,.5)}
.canvas__swatches{display:flex;gap:5px;padding:7px 8px}
.canvas__swatches b{width:14px;height:14px;border-radius:4px;flex:1}

/* Device — a real product capture, sized like the spec's 1186px mockup. */
.canvas__device{position:relative;flex:1 1 auto;max-width:1186px;min-width:0;margin-bottom:26px}
.canvas__device .shot{border-radius:var(--r-lg)}
.canvas__badge{
  position:absolute;right:-14px;top:-14px;z-index:3;
  display:flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:var(--r-full);
  background:#1C1C1C;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;
}
.canvas__badge i{width:7px;height:7px;border-radius:50%;background:#FA6868;flex:none}

/* Collaborator cursors — durations and easings are from the captured spec. */
.canvas__cursors{position:absolute;inset:0;pointer-events:none;z-index:4}
.canvas__cursor{
  position:absolute;display:flex;align-items:flex-start;gap:0;
  will-change:transform;transform-style:preserve-3d;
  transition-property:transform;
}
.canvas__cursor svg{width:100%;height:auto;display:block;stroke:#fff;stroke-width:1.4;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.4))}
.canvas__cursor b{
  margin:14px 0 0 -4px;padding:3px 8px;border-radius:var(--r-full);
  font-family:var(--font-sans);font-size:11px;font-weight:600;color:#fff;
  white-space:nowrap;box-shadow:0 4px 12px -4px rgba(0,0,0,.5);
}
.canvas__cursor--a{width:26px;left:8%;top:22%;color:#FA6868;transition-duration:1331ms;transition-timing-function:linear}
.canvas__cursor--b{width:30px;left:60%;top:14%;color:#2FBF71;transition-duration:1050ms;transition-timing-function:cubic-bezier(0,0,.58,1)}
.canvas__cursor--c{width:27px;left:42%;top:64%;color:#F0912D;transition-duration:1550ms;transition-timing-function:cubic-bezier(0,0,.58,1)}
.canvas__cursor--a b{background:#FA6868}
.canvas__cursor--b b{background:#2FBF71}
.canvas__cursor--c b{background:#F0912D}

/* Floating toolbar — 296x52, r 13.6, #292929, 8% white hairline, and the
   spec's drop shadow (dy 1.7, blur 2.55, black 24%). */
.canvas__toolbar{
  position:absolute;left:50%;bottom:-26px;z-index:5;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;
  width:296px;max-width:calc(100% - 40px);height:52px;padding:0 8px;
  border-radius:13.6px;background:#292929;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1.7px 5.1px rgba(0,0,0,.24);
}
.canvas__tool{
  flex:1;height:34px;border-radius:10.2px;display:grid;place-items:center;
  color:rgba(255,255,255,.64);
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.canvas__tool svg{width:17px;height:17px}
.canvas__tool:hover{background:rgba(255,255,255,.09);color:#fff}
.canvas__tool[data-active="true"]{background:#21A6FF;color:#fff}
.canvas__tool[data-active="true"]:hover{background:#21A6FF}
.canvas__rule{width:1.7px;height:20.4px;border-radius:.85px;background:rgba(255,255,255,.12);flex:none}

@media (max-width:900px){
  .canvas{padding:24px 16px 0;cursor:default}
  .canvas__rail{display:none}
  .canvas__cursors{display:none}
  .canvas__toolbar{position:static;transform:none;margin:18px auto 0}
}
@media (prefers-reduced-motion:reduce){
  .canvas__cursor{transition:none !important}
}

/* ---------- 7d. Pillars ---------- */
/* Rebuild of Kirki's "Built differently. By design." section (.k-pwch3vvm):
   a four-item vertical accordion with an 8px progress rail, paired with a
   sticky visual that blurs between states. Measured values reproduced; the
   spec's 1323x2840 render size and its inline mid-animation styles were
   capture artifacts and are not hard-coded. */
.pillars{
  display:block;width:100%;max-width:1440px;margin-inline:auto;
  padding:0 20px;
  font-family:var(--font-sans);font-size:16px;font-weight:400;
  color:var(--ink);
  cursor:crosshair;
}
.pillars__head{max-width:44rem;margin-bottom:var(--s-8)}
.pillars__head .h2{margin-bottom:var(--s-4)}

/* The spec's header reveal: transform and opacity, both 800ms, with the two
   easings it names. */
.pillars__reveal{
  will-change:transform,opacity;
  transition-property:transform,opacity;
  transition-duration:800ms,800ms;
  transition-timing-function:cubic-bezier(0,0,.13,.99),cubic-bezier(.25,.1,.25,1);
}
.js .pillars__reveal{transform:translateY(22px);opacity:0}
.js .pillars__reveal[data-in="true"]{transform:translateY(0);opacity:1}

.pillars__grid{
  display:grid;
  grid-template-columns:minmax(0,clamp(372px,30vw,430px)) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}

/* ---- accordion ---- */
.pillars__list{display:grid}
.pillar{display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:20px;padding-block:4px}

/* 8px rail, 0% -> 100% at 500ms linear, exactly as measured. */
.pillar__rail{
  position:relative;width:8px;border-radius:4px;
  background:var(--bg-sunken);overflow:hidden;
}
.dark-zone .pillar__rail{background:rgba(255,255,255,.08)}
.pillar__rail i{
  position:absolute;inset:0 0 auto;display:block;width:8px;height:0%;
  border-radius:4px;background:var(--pf-500);
  will-change:height;transition-property:height;
  transition-duration:500ms;transition-timing-function:linear;
}
.pillar[data-open="true"] .pillar__rail i{height:100%}
/* No-JS fallback: only the open pillar's panel is expanded. JS re-drives these
   heights on first run, so this is a starting state, not a competing rule. */
.pillar[data-open="false"] .pillar__panel{height:0}

.pillar__head{
  display:flex;align-items:baseline;gap:10px;width:100%;
  padding:18px 0;text-align:left;min-height:44px;
}
.pillar__title{
  font-family:var(--font-body);
  font-size:var(--text-card-title);line-height:1.35em;
  letter-spacing:-.7px;font-weight:600;color:var(--color-text);
  /* opacity 1 active / 0.6 inactive, 500ms ease-out — from the spec. */
  opacity:.6;will-change:opacity;transition:opacity 500ms ease-out;
}
.pillar[data-open="true"] .pillar__title{opacity:1}
.pillar__head:hover .pillar__title{opacity:.85}
.pillar[data-open="true"] .pillar__head:hover .pillar__title{opacity:1}
.pillar__head .badge{opacity:.6;transition:opacity 500ms ease-out}
.pillar[data-open="true"] .pillar__head .badge{opacity:1}

/* Panel height is animated on the measured content height, not a fixed 177px. */
.pillar__panel{
  height:auto;overflow:hidden;
  will-change:height;transition-property:height;
  transition-duration:500ms;transition-timing-function:cubic-bezier(.42,0,.23,.96);
}
.pillar__inner{padding-bottom:26px}
.pillar__points{display:grid;gap:11px;margin-bottom:20px}
.pillar__point{display:flex;align-items:flex-start;gap:11px}
.pillar__dot{
  width:7px;height:7px;border-radius:50%;flex:none;margin-top:8px;
  background:var(--pf-400);
}
.pillar__point p{font-size:15px;line-height:1.5;letter-spacing:-.2px;color:var(--color-text-muted)}
.pillar__link{
  display:inline-flex;align-items:center;gap:7px;min-height:24px;
  font-size:14.5px;font-weight:600;color:var(--pf-500);
}
.pillar__link svg{width:18px;height:18px;transition:transform var(--t-base) var(--ease-out)}
.pillar__link:hover svg{transform:translateX(3px)}

/* ---- sticky visual ---- */
.pillars__stage{
  position:sticky;top:calc(var(--nav-h) + 28px);
  border-radius:var(--media-radius);overflow:hidden;
  border:1px solid var(--color-border);background:var(--color-surface);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.22);
  aspect-ratio:1400/700;
}
.pillars__frame{
  position:absolute;inset:0;opacity:0;
  /* blur transition 1000ms cubic-bezier(0,.5,.5,1) — from the spec. */
  filter:blur(10px);will-change:filter,opacity;
  transition-property:filter,opacity;
  transition-duration:1000ms,1000ms;
  transition-timing-function:cubic-bezier(0,.5,.5,1),cubic-bezier(0,.5,.5,1);
}
.pillars__frame[data-active="true"]{opacity:1;filter:blur(0)}
.pillars__frame img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}

@media (max-width:991px){:root{--text-hero:72px;--text-h2:48px}
  .h1{letter-spacing:-1px}
  .pillar__title{font-size:22px;letter-spacing:-.5px}}
@media (max-width:767px){:root{--text-hero:60px;--text-h2:40px}.h1{letter-spacing:-.5px}}
@media (max-width:575px){:root{--text-hero:48px}}
@media (max-width:400px){:root{--text-hero:42px}}
@media (max-width:1024px){:root{--media-radius:16px;--text-card-title:22px}
  .pillar__title,.card.card h3{letter-spacing:-.5px}}
@media (max-width:1080px){
  .pillars__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .pillars__stage{position:relative;top:auto;order:-1}
}
@media (max-width:760px){
  .pillars__stage{aspect-ratio:5/4}
  .pillars__frame img{object-position:top left;width:180%;max-width:none}
}
@media (max-width:760px){
  .pillars{padding:0 16px;cursor:default}
  .pillar{column-gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .js .pillars__reveal{transform:none;opacity:1}
  .pillar__panel,.pillar__rail i,.pillars__frame{transition:none !important}
  .pillars__frame{filter:none}
}

/* ---------- Narrative pivot ---------- */
/* Kirki's conceptual break: two oversized statements, the second answering the
   first. Same display scale as an h2, but set as prose rather than a heading. */
.pivot{text-align:center}
.pivot__line{
  font-family:var(--font-display);
  font-family:var(--font-display);
  font-size:var(--text-h2);line-height:1.16em;letter-spacing:-.008em;font-weight:400;
  font-synthesis:none;max-width:16ch;margin-inline:auto;text-wrap:balance;
}
.pivot__line--from{color:rgba(12,12,12,.28)}
.pivot__line--to{color:var(--color-text);margin-top:var(--space-8)}

/* The boilerplate chain — greyed, because it is the thing being removed. */
.chain{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:10px;margin:var(--space-6) auto 0;max-width:920px;
}
.chain__item{
  position:relative;display:grid;gap:2px;align-content:center;
  padding:12px 16px;border-radius:var(--radius-sm);
  border:1px dashed rgba(12,12,12,.18);background:var(--color-surface-subtle);
}
.chain__item code{
  font-family:var(--font-mono);font-size:12.5px;color:rgba(12,12,12,.52);white-space:nowrap;
}
.chain__item span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(12,12,12,.34);
}
.chain__item + .chain__item::before{
  content:"";position:absolute;left:-10px;top:50%;width:10px;height:1px;
  background:rgba(12,12,12,.18);
}
.pivot__payoff{margin-top:var(--space-7)}
.pivot__payoff .shotcap{justify-content:center;text-transform:none;letter-spacing:0;
  font-family:var(--font-body);font-size:14px}
@media (max-width:767px){
  .chain{gap:8px}
  .chain__item{padding:10px 12px}
  .chain__item + .chain__item::before{display:none}
}
.js [data-pivot]{opacity:0;transform:translateY(16px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.js [data-pivot][data-in="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-pivot]{opacity:1;transform:none}
}

/* ---------- 8. Code window ---------- */
.code{
  text-align:left;max-width:100%;
  background:var(--d-bg-2);border:1px solid var(--d-line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--e-4);
}
.code__bar{
  display:flex;align-items:center;gap:var(--s-3);
  padding:10px 14px;border-bottom:1px solid var(--d-line);background:rgba(255,255,255,.025);
}
.code__dots{display:flex;gap:6px}
.code__dots i{width:10px;height:10px;border-radius:50%;background:var(--d-text-3);opacity:.45}
.code__file{
  font-family:var(--font-mono);font-size:11.5px;color:var(--d-text-3);letter-spacing:.02em;
}
.code__tabs{display:flex;gap:2px;margin-left:auto}
.code__tab{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.02em;
  padding:5px 10px;border-radius:6px;color:var(--d-text-3);
  transition:color var(--t-fast),background var(--t-fast);
}
.code__tab:hover{color:var(--d-text-2)}
.code__tab[aria-selected="true"]{color:var(--d-text);background:rgba(255,255,255,.07)}
.code__body{
  padding:var(--s-5) var(--s-5) var(--s-5) 0;overflow-x:auto;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.85;
  color:var(--d-text);tab-size:2;
}
.code__body::-webkit-scrollbar{height:8px}
.code__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.code pre{margin:0;white-space:normal}
.code .ln{
  display:block;min-height:1.85em;padding-left:56px;position:relative;white-space:pre;
  border-left:2px solid transparent;
  transition:background var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out);
}
.code .ln::before{
  content:attr(data-n);position:absolute;left:0;width:40px;text-align:right;
  color:var(--syn-com);font-size:11px;user-select:none;
}
.code .ln.is-hot{background:rgba(51,98,255,.14);border-left-color:var(--pf-400)}
.k{color:var(--syn-key)} .s{color:var(--syn-str)} .f{color:var(--syn-fn)}
.v{color:var(--syn-var)} .n{color:var(--syn-num)} .c{color:var(--syn-com);font-style:italic}
.p{color:var(--syn-punc)}

/* ---------- 9. Hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + 56px);padding-bottom:var(--space-7);overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__grid{
  position:absolute;inset:-1px 0 auto;height:820px;
  background-image:
    linear-gradient(to right,var(--line-faint) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-faint) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(115% 68% at 50% 0%,#000 32%,transparent 78%);
  mask-image:radial-gradient(115% 68% at 50% 0%,#000 32%,transparent 78%);
}
.hero__glow{
  position:absolute;left:50%;top:-260px;width:1100px;height:660px;transform:translateX(-50%);
  background:
    radial-gradient(46% 46% at 42% 44%,rgba(51,98,255,.20),transparent 70%),
    radial-gradient(40% 40% at 66% 52%,rgba(51,98,255,.16),transparent 70%);
  filter:blur(28px);
}
.hero__inner{position:relative;z-index:1;text-align:center}
.hero .h1{margin-top:var(--s-5);margin-inline:auto;max-width:22ch}
.hero .lede{margin:var(--s-5) auto 0;text-align:center}
.hero .btn-row{justify-content:center;margin-top:var(--s-6)}
.hero__note{
  margin-top:var(--s-5);font-size:13px;color:var(--ink-400);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.hero__note i{width:3px;height:3px;border-radius:50%;background:var(--ink-300);display:block}

/* masked headline reveal */
.reveal-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.reveal-mask > span{display:block;will-change:transform}

/* hero composition */
.hero__stage{
  text-align:left;
  position:relative;z-index:1;margin-top:var(--space-7);
  max-width:1120px;margin-inline:auto;
}
.hero__layout{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s-6);align-items:start;position:relative;
}
.hero__connector{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible;
}
.hero__connector path{
  fill:none;stroke:url(#pfLine);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:var(--dash,600);stroke-dashoffset:var(--dash,600);
}
.hero__wp{position:relative;z-index:1}
.hero__code{position:relative;z-index:3}
.hero__tilt{transform-style:preserve-3d;will-change:transform}
.hero__caption{
  margin-top:var(--s-3);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);
  display:flex;align-items:center;gap:8px;
}

/* ---------- 9b. Hero copy block ---------- */
/* Rebuild of Kirki's hero copy container (.k-v5l20w2m): block, fluid width
   capped at 1360, 0 20px padding, Inter 16/400, ink #373542, crosshair.
   The spec's 1323x380.81 render size and its `transition: all` are artifacts. */
.herocopy{
  display:block;width:100%;height:auto;max-width:1360px;margin-inline:auto;
  padding:0 20px;
  font-family:var(--font-sans);font-size:16px;font-weight:400;
  color:var(--ink);
  cursor:crosshair;
}
.herocopy__eyebrow{margin-bottom:var(--s-5)}
.herocopy__title{margin-bottom:var(--s-5)}
.herocopy__body{display:grid;justify-items:center;gap:var(--s-6)}
.herocopy__body > *{margin:0 !important}
.herocopy__body .lede{margin:0 auto !important;text-align:center}

/* Primary CTA carries the spec's 20x20 arrow; secondary carries its 14x14
   play-in-circle at currentColor. */
.btn-primary .i-arrow{width:20px;height:20px;flex:none}
.btn-ghost-line{
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;padding:0 26px;border-radius:38px;
  font-size:16px;font-weight:600;color:var(--color-text-muted);
  border:1px solid var(--color-border);background:var(--color-surface-subtle);
  transition:all 300ms ease-out;
}
.btn-ghost-line .i-play{width:14px;height:14px;flex:none;color:var(--pf-500)}
.btn-ghost-line:hover{background:#000;color:#fff;border-color:#000}
.btn-ghost-line:hover .i-play{color:#fff}
.btn-ghost-line:active{transform:translateY(1px)}

@media (max-width:760px){
  .herocopy{padding:0 16px;cursor:default}
}

/* ---------- Dark hero + header ---------- */
/* Hero and showcase run dark; everything from the pivot down stays light. The
   nav is fixed across both, so it swaps theme based on what is behind it. */
.hero.dark-zone{background:var(--d-bg);color:var(--d-text)}
.hero.dark-zone .herocopy{color:var(--d-text)}
.dark-zone .h1{color:var(--d-text)}
.dark-zone .hero__note{color:var(--d-text-3)}
.dark-zone .hero__note i{background:rgba(255,255,255,.28)}
.dark-zone .hero__caption{color:var(--d-text-3)}

/* Grid and glow inverted for the dark ground. */
.hero.dark-zone .hero__grid{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
}
.hero.dark-zone .hero__glow{
  background:
    radial-gradient(46% 46% at 42% 44%,rgba(51,98,255,.42),transparent 70%),
    radial-gradient(40% 40% at 66% 52%,rgba(95,74,254,.30),transparent 70%);
  filter:blur(46px);
}
.hero.dark-zone .grad-text{
  background:linear-gradient(96deg,#8FA8FF 0%,#5B82FF 55%,#B7A8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* The outlined hero CTA needs the dark control treatment. */
.dark-zone .btn-ghost-line{
  background:rgba(255,255,255,.07);color:var(--d-text-2);border-color:var(--d-line-2);
}
.dark-zone .btn-ghost-line:hover{background:#fff;color:#000;border-color:#fff}

/* ---------- Header theming ---------- */
.nav[data-theme="dark"] .brand{color:var(--d-text)}
.nav[data-theme="dark"] .brand sup{
  background:rgba(51,98,255,.22);border-color:rgba(143,168,255,.34);color:#B7C6FF;
}
.nav[data-theme="dark"] .nav__links a{color:var(--d-text-2)}
.nav[data-theme="dark"] .nav__links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav[data-theme="dark"] .btn-secondary{
  background:rgba(255,255,255,.08);color:var(--d-text);border-color:var(--d-line-2);
}
.nav[data-theme="dark"] .btn-secondary:hover{background:#fff;color:#000;border-color:#fff}
.nav[data-theme="dark"] .nav__toggle{color:var(--d-text)}
.nav[data-theme="dark"] .nav__toggle:hover{background:rgba(255,255,255,.1)}
.nav[data-theme="dark"].is-stuck{
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom-color:var(--d-line);
}
.nav[data-theme="dark"] .nav__drawer,
.nav__drawer[data-theme="dark"]{
  background:rgba(0,0,0,.96);border-bottom-color:var(--d-line);
}
.nav__drawer[data-theme="dark"] a{color:var(--d-text);border-bottom-color:var(--d-line)}

/* ---------- 10. Value strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--bg-soft)}
.strip--inline{
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-subtle);margin-top:var(--space-6);overflow:hidden;
}
.strip--inline .strip__item{padding:var(--space-5) var(--space-4);border-color:var(--color-border)}
.strip__grid{
  display:grid;grid-template-columns:repeat(5,1fr);
}
.strip__item{
  padding:var(--s-6) var(--s-4);text-align:center;
  border-right:1px solid var(--line);
}
.strip__item:last-child{border-right:0}
.strip__n{
  font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:600;letter-spacing:-.03em;line-height:1;
}
.strip__l{margin-top:8px;font-size:12.5px;color:var(--ink-500);line-height:1.4}

/* ---------- 11. Generic cards / bento ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);transition:border-color var(--t-base) var(--ease-out),
  box-shadow var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--e-3)}
.card__ico{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--pf-50);color:var(--pf-600);border:1px solid var(--pf-100);margin-bottom:var(--s-4);
}
.card__ico svg{width:18px;height:18px}
.card h3{
  font-family:var(--font-body);font-size:var(--text-card-title);font-weight:600;
  line-height:1.33;letter-spacing:-.7px;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.card p{font-size:var(--text-body);color:var(--color-text-muted);line-height:1.5;letter-spacing:-.2px}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4)}
.bento > *{grid-column:span 2}
.bento .b-wide{grid-column:span 3}
.bento .b-full{grid-column:span 6}

.bento .b-demo{
  padding:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}
.b-demo__copy{padding:var(--s-6);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.b-demo__vis{
  background:var(--bg-soft);border-left:1px solid var(--line);
  padding:var(--s-5);display:grid;align-content:center;gap:var(--s-4);
}

/* ---------- 12. Pinned demo ---------- */
.pin{position:relative;background:var(--bg-soft);border-block:1px solid var(--line)}
.pin .section-head{margin-bottom:0}
.pin__stage{
  position:relative;min-height:min(calc(100vh - var(--nav-h)),720px);
  display:flex;align-items:flex-start;
  padding-top:50px;padding-bottom:var(--space-7);
}
.pin__grid{
  display:grid;grid-template-columns:minmax(0,250px) minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--space-6);align-items:start;width:100%;
}
.pin__steps{display:grid;gap:2px;align-content:center}
.pin__step{
  display:flex;gap:14px;align-items:flex-start;padding:16px 16px 16px 18px;
  border-radius:var(--r-md);border-left:2px solid var(--line);
  transition:border-color var(--t-slow) var(--ease-out),background var(--t-slow) var(--ease-out);
  text-align:left;width:100%;
}
.pin__step[data-active="true"]{border-left-color:var(--pf-500);background:#fff;box-shadow:var(--e-2)}
.pin__step b{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-300);padding-top:2px;flex:none;
  transition:color var(--t-slow) var(--ease-out);
}
.pin__step[data-active="true"] b{color:var(--pf-500)}
.pin__step span{display:grid;gap:3px;min-width:0}
.pin__step strong{
  font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink-400);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  transition:color var(--t-slow) var(--ease-out);
}
.pin__step[data-active="true"] strong{color:var(--ink-900)}
.pin__step em{font-style:normal;font-size:12.5px;color:var(--ink-400);line-height:1.5}

.pin__panel{position:relative;min-height:470px;padding-top:34px}
.pin__panel::before{
  content:attr(data-label);position:absolute;top:0;left:0;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);
}
.pin__panel--wp::before{color:var(--pf-600)}
.pin__slide{
  position:absolute;inset:32px 0 auto;opacity:0;visibility:hidden;
  transition:opacity var(--t-slow) var(--ease-out),
             transform var(--t-slow) var(--ease-out),
             visibility var(--t-slow);
  transform:translateY(14px);
}
.pin__slide[data-active="true"]{opacity:1;visibility:visible;transform:none}
.pin__panel--wp .pin__slide{display:grid;align-content:start;justify-items:start}
/* Real field captures are small (241x92 up to 641x255). Never upscale them —
   frame them in the WordPress panel chrome at native size instead. */
.pin__wpbox{width:100%}
.pin__capturewrap{
  display:grid;place-items:center;min-height:300px;
  padding:var(--space-6);background:var(--color-surface-subtle);
}
.pin__capture{background:#fff;border:1px solid var(--color-border);border-radius:6px;padding:var(--space-4)}
.pin__capture img{border-radius:3px}
.pin__stackitem .pin__capturewrap{min-height:0}
.pin__stackitem .pin__capture{margin-top:var(--space-2)}
.pin .wpbox__body{padding:var(--space-6);gap:var(--space-6)}
.pin .wpf__label{font-size:14px}
.pin .wpf__input{height:46px;font-size:14.5px}
.pin .wpf__desc{font-size:13px}
.pin .wprep__row{padding:13px}
.pin .wprep__cell{height:38px;font-size:13.5px}
.pin__progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);
}
.pin__progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--pf-500),var(--blue-500));
}

/* mobile fallback for pinned demo */
.pin__stack{display:none}
.pin__stackitem{
  border-top:1px solid var(--line);padding-block:var(--s-6);display:grid;gap:var(--s-4);
}
.pin__stackitem h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- 13. Field explorer ---------- */
.fx{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--space-6);align-items:start}
.fx__list{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;align-content:start;
  position:sticky;top:calc(var(--nav-h) + 24px);
}
.fx__list::-webkit-scrollbar{width:6px}
.fx__list::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.fx__btn{
  display:flex;align-items:center;gap:8px;width:100%;min-height:44px;
  padding:9px 10px;border-radius:var(--r-sm);text-align:left;
  font-size:14px;font-weight:500;color:var(--ink-500);
  border:1px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.fx__btn:hover{background:var(--bg-muted);color:var(--ink-900)}
.fx__btn[aria-selected="true"]{
  background:#fff;color:var(--ink-900);font-weight:600;
  border-color:var(--line-strong);box-shadow:var(--e-2);
}
.fx__btn code{font-family:var(--font-mono);font-size:11.5px;color:inherit;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fx__btn .badge{margin-left:auto}
.fx__panel{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  overflow:hidden;box-shadow:var(--e-2);
}
.fx__head{padding:var(--s-5) var(--s-5) var(--s-4);border-bottom:1px solid var(--line)}
.fx__head h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fx__head p{margin-top:8px;font-size:14px;color:var(--ink-500);line-height:1.6;max-width:58ch}
.fx__split{display:grid;grid-template-columns:1fr 1fr}
.fx__cell{padding:var(--s-5);min-width:0}
.fx__cell + .fx__cell{border-left:1px solid var(--line)}
.fx__cell > h4{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:var(--s-4);font-weight:500;
}
.fx__cell .code{box-shadow:none;border-radius:var(--r-sm)}
.fx__cell .code__body{padding:var(--s-4) var(--s-4) var(--s-4) 0;font-size:11.8px;line-height:1.75}
.fx__cell .code .ln{min-height:1.75em}
.pin .code__body{font-size:15px;line-height:2.05;padding:var(--space-5) var(--space-5) var(--space-5) 0}
.pin .code .ln{min-height:2.05em}
.fx__cell .code .ln{padding-left:44px}
.fx__cell .code .ln::before{width:30px}

/* ---------- 14. Repeater showcase ---------- */
.rep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:center}
.rep__panel{background:#fff}
.rep .wprep__row{transform-origin:top center}

/* ---------- 15. Dark developer section ---------- */
.dark-zone{background:var(--d-bg);color:var(--d-text)}
.dark-zone .h2,.dark-zone .h3{color:var(--d-text)}
.dark-zone .muted{color:var(--d-text-2)}
.dev{position:relative;overflow:hidden}
.dev__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 42% at 18% 0%,rgba(51,98,255,.20),transparent 66%),
    radial-gradient(44% 40% at 84% 20%,rgba(51,98,255,.13),transparent 66%);
}
.dev__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 60% at 50% 30%,#000,transparent 80%);
  mask-image:radial-gradient(90% 60% at 50% 30%,#000,transparent 80%);
}
.dev__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s-8);align-items:center}
.dev__api{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
.dev__apiitem{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--d-line);background:rgba(255,255,255,.03);
}
.dev__apiitem code{font-family:var(--font-mono);font-size:12.5px;color:var(--syn-fn)}
.dev__apiitem > span{font-size:12.5px;color:var(--d-text-3);margin-left:auto;text-align:right;display:inline-flex;align-items:center;gap:6px}

/* ---------- 16. Free vs Pro ---------- */
.cmp{border:1px solid var(--line);border-radius:var(--r-xl);overflow:clip;background:#fff;box-shadow:var(--e-3)}
.cmp__head{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  position:sticky;top:var(--nav-h);z-index:5;background:#fff;
  border-bottom:1px solid var(--color-border);
  transition:box-shadow 200ms var(--ease-out);
}
.cmp__head[data-stuck="true"]{box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}
.cmp__hcell{padding:16px var(--s-5) 18px;border-left:1px solid var(--color-border)}
.cmp__hcell:first-child{border-left:0}
.cmp__hcell--pro{background:linear-gradient(180deg,var(--pf-50),#fff)}
.cmp__plan{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.02em}
.cmp__price{margin-top:4px;font-size:12.5px;color:var(--ink-400)}
.cmp__hcell .btn{display:flex;min-height:40px;padding:0 16px;font-size:14px;margin-top:12px;width:100%}
.cmp__group{
  padding:11px var(--s-5);background:var(--color-surface);border-block:1px solid var(--color-border);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);font-weight:500;
}
.cmp__row{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  border-bottom:1px solid var(--line-faint);
  transition:background var(--t-fast);
}
.cmp__row:hover{background:var(--color-surface-subtle)}
.cmp__row:hover .cmp__cell--pro{background:rgba(51,98,255,.07)}
.cmp__row:last-child{border-bottom:0}
.cmp__cell{padding:11px var(--s-5);border-left:1px solid var(--line-faint);display:flex;align-items:center;gap:8px;min-height:48px}
.cmp__cell:first-child{border-left:0;font-size:14.5px;color:var(--color-text);letter-spacing:-.01em}
.cmp__cell:not(:first-child){justify-content:center}
.cmp__cell--pro{background:rgba(51,98,255,.04)}
/* Included / not included both render as a mark in a tinted disc, so the eye
   can scan a column without reading. */
.cmp__mark{
  display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;flex:none;
}
.cmp__mark svg{width:15px;height:15px}
.cmp__mark--yes{color:var(--ok);background:var(--ok-soft)}
.cmp__mark--no{color:var(--no-fg);background:var(--no-bg)}
.cmp__cell--pro .cmp__mark--yes{color:#fff;background:var(--brand)}
.cmp__note{font-size:11.5px;color:var(--ink-400);font-family:var(--font-mono)}
.cmp__foot{
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);background:var(--bg-soft);
  font-size:12.5px;color:var(--ink-400);
}

/* ---------- 16b. Pricing ---------- */
.price{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);
  max-width:760px;margin:0 auto;
}
.price__panel{
  background:var(--pf-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:var(--e-4);
}
.price__planname{font-size:13.5px;font-weight:600;color:var(--ink-400)}
.price__amount{font-size:40px;font-weight:800;letter-spacing:-.02em;color:var(--ink-900);margin:var(--s-3) 0 var(--s-4)}
.price__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4) var(--s-4)}
.price__license{font-size:13.5px;font-weight:600;color:var(--ink-900)}
.price__licensename{color:var(--brand)}
.price__features{list-style:none;display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.price__features li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-700)}
.price__check{
  flex:none;width:18px;height:18px;border-radius:50%;background:var(--pf-100);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
}
.price__cta{width:100%;justify-content:center;margin-top:var(--s-5)}
@media (max-width:660px){
  .price{grid-template-columns:1fr}
}

/* ---------- 17. Workflow ---------- */
.flow{position:relative}
.flow__line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow__line path{
  fill:none;stroke:var(--pf-300);stroke-width:1.5;stroke-dasharray:var(--dash,1200);
  stroke-dashoffset:var(--dash,1200);stroke-linecap:round;
}
.flow__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);position:relative;z-index:1}
.flow__step{display:grid;gap:var(--s-4);align-content:start}
.flow__num{
  width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--e-2);
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--pf-600);
}

/* ---------- 18. Docs preview ---------- */
.docs{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--e-3);display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
}
.docs__side{background:var(--bg-soft);border-right:1px solid var(--line);padding:var(--s-5)}
.docs__group{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);margin:var(--s-5) 0 var(--s-3);font-weight:500;
}
.docs__group:first-child{margin-top:0}
.docs__side ul{display:grid;gap:1px}
.docs__side li a{
  display:flex;align-items:center;min-height:26px;padding:5px 10px;border-radius:6px;font-size:13px;color:var(--ink-500);
  transition:background var(--t-fast),color var(--t-fast);
}
.docs__side li a:hover{background:var(--bg-muted);color:var(--ink-900)}
.docs__side li a[data-cur="true"]{background:var(--pf-50);color:var(--pf-700);font-weight:600}
.docs__main{padding:var(--s-6);min-width:0}
.docs__crumb{font-family:var(--font-mono);font-size:11px;color:var(--ink-400);margin-bottom:var(--s-3)}
.docs__main h3{margin-bottom:var(--s-3)}
.docs__main p{font-size:14px;color:var(--ink-500);line-height:1.65;margin-bottom:var(--s-5)}
.docs__main .code{margin-bottom:var(--s-5)}

/* ---------- 19. FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  width:100%;padding:var(--s-5) 0;text-align:left;min-height:44px;
  font-size:16.5px;font-weight:600;letter-spacing:-.018em;color:var(--ink-900);
  transition:color var(--t-fast);
}
.faq__q:hover{color:var(--pf-600)}
.faq__ico{
  width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink-500);
  transition:transform var(--t-base) var(--ease-out),background var(--t-base),
             border-color var(--t-base),color var(--t-base);
}
.faq__q[aria-expanded="true"] .faq__ico{
  transform:rotate(45deg);background:var(--pf-500);border-color:var(--pf-500);color:#fff;
}
.faq__a{overflow:hidden;height:0}
.faq__a > div{padding-bottom:var(--s-5)}
.faq__a p{font-size:15px;color:var(--ink-500);line-height:1.7;max-width:64ch}
.faq__a code{
  font-family:var(--font-mono);font-size:13px;background:var(--bg-muted);
  padding:2px 6px;border-radius:5px;color:var(--ink-700);
}

/* ---------- 20. Final CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center}
.cta__words{
  position:absolute;inset:0;display:grid;align-content:center;gap:14px;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,transparent 22%,#000 82%);
  mask-image:radial-gradient(70% 60% at 50% 50%,transparent 22%,#000 82%);
}
.cta__track{
  display:flex;gap:26px;white-space:nowrap;font-family:var(--font-mono);
  font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:500;letter-spacing:-.02em;
  color:rgba(255,255,255,.055);will-change:transform;
}
.cta__inner{position:relative;z-index:1}
.cta .h2{margin-top:var(--s-4)}
.cta .lede{margin:var(--s-5) auto 0;text-align:center}
.cta .btn-row{justify-content:center;margin-top:var(--s-6)}

/* ---------- 20b. Theme showcase ---------- */
.showcase{position:relative;overflow:hidden;background:var(--d-bg)}
.showcase__rows{display:grid;gap:clamp(14px,1.6vw,22px);margin-top:var(--s-8)}
.showcase__row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.showcase__track{display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;will-change:transform}
.showcase__card{
  position:relative;flex:none;width:clamp(230px,23vw,330px);
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--d-line);background:var(--d-surface);
  transition:border-color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.showcase__card:hover,.showcase__card:focus-visible{
  border-color:rgba(178,168,255,.45);transform:translateY(-3px);
}
.showcase__card img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;display:block;
}
.showcase__meta{
  display:flex;align-items:baseline;gap:8px;padding:11px 13px;
  border-top:1px solid var(--d-line);
}
.showcase__meta b{font-size:13.5px;font-weight:600;color:var(--d-text);letter-spacing:-.01em}
.showcase__meta span{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--d-text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.showcase__foot{
  display:flex;align-items:center;justify-content:center;gap:var(--s-4);
  flex-wrap:wrap;margin-top:var(--s-8);
}
@media (prefers-reduced-motion:reduce){
  .showcase__row{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .showcase__track{width:auto}
}
@media (max-width:760px){
  .showcase__rows{gap:12px}
}

/* ---------- 21. Footer ---------- */
.foot{border-top:1px solid var(--d-line);background:var(--d-bg)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--s-6);padding-block:var(--s-8)}
.foot__brand p{margin-top:var(--s-4);font-size:13.5px;color:var(--d-text-3);line-height:1.6;max-width:34ch}
.foot h3{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-text-3);font-weight:500;margin-bottom:var(--s-4);
}
.foot ul{display:grid;gap:10px}
.foot ul a{display:inline-flex;align-items:center;min-height:24px;font-size:13.5px;color:var(--d-text-2);transition:color var(--t-fast)}
.foot ul a:hover{color:var(--d-text)}
.foot__bar{
  border-top:1px solid var(--d-line);padding-block:var(--s-5);
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--d-text-3);
}
.foot .brand{color:var(--d-text)}
.foot .brand sup{background:rgba(51,98,255,.18);border-color:rgba(175,160,255,.3);color:var(--pf-300)}

/* ---------- 22. Reveal (JS-enhanced, safe default) ---------- */
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0}

/* ---------- 23. Responsive ---------- */
@media (max-width:1080px){
  .proof,.proof--rev{grid-template-columns:1fr;gap:var(--s-6)}
  .proof--rev > *:first-child,.proof--rev > *:last-child{order:0}
  .hero__layout{grid-template-columns:1fr;gap:var(--s-5)}
  .hero__connector{display:none}
  .dev__inner{grid-template-columns:1fr;gap:var(--s-7)}
  .rep{grid-template-columns:1fr;gap:var(--s-6)}
  .pin__grid{grid-template-columns:minmax(0,210px) minmax(0,1fr)}
  .pin__panel--code{display:none}
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento .b-wide{grid-column:span 2}
  .bento .b-full{grid-column:span 4}
}
@media (max-width:900px){
  :root{--wrap:100%}
  .nav__links{display:none}
  .nav__cta .btn-secondary{display:none}
  .nav__toggle{display:grid}
  .nav__inner{gap:var(--s-4)}
  .brand{margin-right:auto}
  .strip__grid{grid-template-columns:repeat(2,1fr)}
  .strip__item{border-bottom:1px solid var(--line)}
  .strip__item:nth-child(2n){border-right:0}
  .strip__item:last-child{grid-column:span 2;border-right:0;border-bottom:0}
  .fx{grid-template-columns:1fr}
  .fx__list{
    position:static;max-height:none;grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;gap:6px;padding-bottom:var(--s-3);
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .fx__btn{scroll-snap-align:start;white-space:nowrap}
  .fx__btn code{flex:none}
  .fx__split{grid-template-columns:1fr}
  .fx__cell + .fx__cell{border-left:0;border-top:1px solid var(--line)}
  .docs{grid-template-columns:1fr}
  .docs__side{border-right:0;border-bottom:1px solid var(--line)}
  .flow__steps{grid-template-columns:1fr;gap:var(--s-6)}
  .flow__line{display:none}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:span 2}
  .proof__grid{grid-template-columns:1fr}
  .progal{grid-template-columns:1fr;gap:var(--s-4)}
  .bento .b-demo{grid-template-columns:1fr}
  .b-demo__vis{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  :root{--media-radius:12px;--text-card-title:20px}
  .section{padding-block:var(--space-8)}
  .section-lg{padding-block:var(--space-9)}
  .pillar__title,.card.card h3{letter-spacing:-.4px}
  /* A wrapped eyebrow leaves its rule orphaned, and the note's separator dots
     end up stranded at line ends — drop both decorations at this width. */
  .eyebrow::before{display:none}
  .eyebrow{letter-spacing:.1em}
  .hero__note{flex-direction:column;gap:6px}
  .hero__note i{display:none}
  .section{padding-block:var(--s-9)}
  .section-sm{padding-block:var(--s-8)}
  .hero{padding-top:calc(var(--nav-h) + 44px)}
  .hero .h1{max-width:none}
  .pin{padding-block:var(--s-9)}
  .pin__stage{display:none}
  .pin__stack{display:block}
  .cmp__head{position:static}
  .cmp__head,.cmp__row{grid-template-columns:minmax(0,1fr) 74px 74px}
  .cmp__hcell,.cmp__cell{padding:12px var(--s-4)}
  .cmp__hcell .btn{display:none}
  /* Only the badge fits in a 74px plan column — drop the repeated product name. */
  .cmp__hcell:not(:first-child){padding:12px 8px;display:grid;place-content:center}
  .cmp__hcell:not(:first-child) .cmp__planname,
  .cmp__hcell:not(:first-child) .cmp__price{display:none}
  .cmp__hcell:not(:first-child) .cmp__plan{justify-content:center}
  .cmp__cell:first-child{font-size:13.5px}
  .bento{grid-template-columns:1fr}
  .bento > *,.bento .b-wide,.bento .b-full{grid-column:span 1}
  .wpbox__body{padding:var(--s-4);gap:var(--s-4)}
  .wprep__row{grid-template-columns:auto 1fr auto}
  .wprep__cell:nth-child(3){display:none}
  .foot__top{grid-template-columns:1fr}
  .foot__brand{grid-column:span 1}
  .code__body{font-size:11.5px}
}
@media (max-width:400px){
  .btn{padding:0 16px;font-size:14px}
  .btn-lg{padding:0 18px;font-size:15px}
  .hero__note{font-size:12px}
}

/* ---------- 24. Reduced motion ---------- */
@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 !important;transform:none !important}
  .hero__connector path,.flow__line path{stroke-dashoffset:0 !important}
  .cta__track{transform:none !important}
  .pin__slide{transform:none}
}