/* ==========================================================================
   Social Media Feather — warm paper, forest-green ink, feather-blue accent.
   Light is the default identity; [data-theme="dark"] moves to a deep forest.
   The whole page is drawn with 1px rules and serif display type: no cards
   floating on shadows, no heavy fills. Colour is spent on exactly three
   things — the brand green, the feather blue, and the network marks
   themselves, which are the only saturated pixels in the preview.
   ========================================================================== */
:root{
  --paper:#FBF8F0;
  --paper-2:#F4F0E4;
  --paper-3:#EDE8D8;
  --card:#FFFFFF;
  --ink:#132318;
  --ink-2:#3C4C41;
  --muted:#6A7A6F;
  --faint:#93A197;

  --rule:#DDD6C2;
  --rule-soft:#EAE4D4;

  --green:#13682B;          /* the badge green, straight off the mark */
  --green-deep:#0E4A1E;
  --green-ink:#FFFFFF;
  --green-text:#0F5723;     /* green as small text on paper */
  --green-wash:rgba(19,104,43,0.08);
  --green-wash-2:rgba(19,104,43,0.17);   /* a hovered, already-selected control */
  --green-hover:#0E4A1E;                 /* hover DARKENS against paper ... */
  --surface-hover:#F0EADB;

  --blue:#3F7CDD;           /* the feather */
  --blue-deep:#2D62BE;
  --blue-text:#2A5FBD;
  --blue-wash:rgba(63,124,221,0.10);

  --star:#B07B14;
  --shell:#FFFFFF;          /* the pale chrome the icon skins are made of */
  --shell-2:#E4E2DA;
  --shell-line:rgba(0,0,0,0.13);

  --code-bg:#122019;
  --code-rule:#22382B;
  --code-ink:#E7EFE7;
  --code-tag:#8FD3A2;
  --code-attr:#E9C87C;
  --code-val:#9DC0F2;

  --shadow:rgba(19,35,24,0.18);
  --hdr:74px;                /* header height: the sticky preview pins to it */

  --maxw:1160px;
  --ff-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-body:'Karla',system-ui,-apple-system,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,monospace;
}

[data-theme="dark"]{
  --paper:#0C1A11;
  --paper-2:#112217;
  --paper-3:#162B1D;
  --card:#122419;
  --ink:#EDF3EC;
  --ink-2:#C3D2C5;
  --muted:#93A797;
  --faint:#6F8375;

  --rule:#25402C;
  --rule-soft:#1C3222;

  --green:#3FA45C;
  --green-deep:#2C8746;
  --green-ink:#06170C;
  --green-text:#6BC286;
  --green-wash:rgba(63,164,92,0.14);
  --green-wash-2:rgba(63,164,92,0.26);
  --green-hover:#5BC078;                 /* ... and LIGHTENS on the dark ground,
                                            so a hover always lifts off the page */
  --surface-hover:#1D3624;

  --blue:#6E9EEA;
  --blue-deep:#4E82D8;
  --blue-text:#8FB6F1;
  --blue-wash:rgba(110,158,234,0.14);

  --star:#E0AE3E;
  --shell:#F2F0E8;
  --shell-2:#D6D3C9;
  --shell-line:rgba(0,0,0,0.18);

  --code-bg:#08130D;
  --code-rule:#1B2E22;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
button,input,select{ font-family:inherit; font-size:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }
img,svg{ max-width:100%; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-variation-settings:'SOFT' 20,'WONK' 1;
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.08;
  margin:0;
}
.serif-em{ font-style:italic; font-weight:500; }

/* A hairline of feather barbs — the page's one decorative motif. */
.barbs{
  height:9px;
  background-image:repeating-linear-gradient(66deg, var(--rule) 0 1px, transparent 1px 7px);
  opacity:.85;
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand .mark{ width:38px; height:38px; display:block; }
.brand .word{
  font-family:var(--ff-display); font-weight:600; font-size:19.5px;
  letter-spacing:-0.02em; line-height:1.05; white-space:nowrap;
}
.brand .word i{ font-style:italic; font-weight:400; color:var(--green-text); }
.nav-right{ display:flex; align-items:center; gap:4px; }
.nav-right a:not(.btn){
  text-decoration:none; color:var(--muted); font-weight:600; font-size:14.5px;
  padding:9px 13px; border-radius:999px; white-space:nowrap;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* The header is translucent, so a neutral tint lands ~1.1:1 against it and
   reads as nothing. Hue, a ring and brand-coloured text carry the state
   instead of lightness alone. */
/* :not(.btn) matters. Without it this rule (0-2-1) outranks .btn:hover (0-2-0)
   and strips the CTA's solid fill on hover, leaving white text on the pale
   header. The CTA is an <a class="btn"> and must be governed by .btn. */
.nav-right a:not(.btn):hover{
  color:var(--green-text);
  background:var(--green-wash-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--green) 38%, transparent);
}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:700; font-size:15px; letter-spacing:.005em;
  padding:11px 21px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
  background:var(--green); color:var(--green-ink) !important;
  cursor:pointer; transition:background .16s ease, transform .16s ease;
}
/* Fill shift alone is only ~1.5:1 against the resting fill, so the halo does
   the visible work and the lift confirms it. */
.btn:hover{
  background:var(--green-hover); transform:translateY(-1px);
  box-shadow:0 0 0 3px var(--green-wash-2);
}
.btn svg{ width:15px; height:15px; flex:0 0 auto; }
.btn-ghost{
  background:transparent; color:var(--ink) !important; border-color:var(--rule);
}
.btn-ghost:hover{ background:var(--surface-hover); border-color:var(--ink-2); }
.nav-right .btn{ margin-left:6px; }
.theme-toggle{
  width:36px; height:36px; margin-left:8px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--rule); border-radius:999px;
  cursor:pointer; color:var(--ink); transition:border-color .15s ease,color .15s ease;
}
.theme-toggle:hover{ border-color:var(--green); color:var(--green-text); background:var(--green-wash-2); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .i-sun{ display:none; }
[data-theme="dark"] .theme-toggle .i-sun{ display:block; }
[data-theme="dark"] .theme-toggle .i-moon{ display:none; }
.cta-short{ display:none; }
/* Between the links disappearing and a comfortable header there is a narrow
   band where the CTA and three links only just fit. */
@media (max-width:1010px){
  .nav-right a:not(.btn){ padding:9px 9px; font-size:14px; }
  .nav-right .btn{ padding:10px 17px; }
}
@media (max-width:820px){ .nav-right a:not(.btn){ display:none; } }
@media (max-width:560px){
  :root{ --hdr:64px; }
  .nav{ height:64px; gap:10px; }
  .brand .mark{ width:32px; height:32px; }
  .brand .word{ font-size:15.5px; }
  .nav-right .btn{ padding:9px 15px; font-size:14px; }
  .theme-toggle{ width:32px; height:32px; margin-left:4px; }
  .cta-long{ display:none; }
  .cta-short{ display:inline; }
  .wrap{ padding:0 20px; }
}

/* ---------- Section furniture ---------- */
section{ scroll-margin-top:86px; }
.ledger{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:14px; margin-bottom:34px;
  border-bottom:1px solid var(--rule);
}
.ledger .idx{
  font-family:var(--ff-mono); font-size:12px; color:var(--faint);
  letter-spacing:.06em; flex:0 0 auto;
}
.ledger .lbl{
  font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-text); flex:0 0 auto;
}
.ledger .fill{ flex:1 1 auto; }
.sec-title{ font-size:clamp(30px,4.4vw,46px); max-width:19ch; margin:0 0 14px; }
.sec-lede{ color:var(--muted); max-width:60ch; margin:0; font-size:17.5px; }

/* ---------- Hero ---------- */
.hero{ padding:66px 0 10px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:38px; } }
.flag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green-text); margin-bottom:22px;
}
.flag::before{
  content:''; width:26px; height:1px; background:var(--green); flex:0 0 auto;
}
h1{
  font-size:clamp(42px,6.6vw,74px); line-height:1.02; letter-spacing:-0.032em;
  font-weight:600; margin:0 0 22px;
}
h1 em{ font-style:italic; font-weight:400; color:var(--green-text); }
.hero-sub{ font-size:19px; color:var(--ink-2); max-width:46ch; margin:0 0 28px; }
.hero-sub b{ color:var(--ink); font-weight:700; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.facts{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.fact .n{
  font-family:var(--ff-display); font-size:30px; font-weight:600;
  letter-spacing:-0.02em; display:block; line-height:1.1;
}
.fact .t{ font-size:13.5px; color:var(--muted); display:block; margin-top:2px; }
@media (max-width:520px){ .facts{ grid-template-columns:1fr 1fr; } }

/* The framed "sheet" the plugin preview sits on. */
.sheet{
  background:var(--card); border:1px solid var(--rule); border-radius:4px;
  overflow:hidden;
}
.sheet-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--rule); background:var(--paper-2);
}
.sheet-bar .t{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.post-demo{ padding:26px 28px 30px; }
.post-demo .kicker{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin:0 0 8px;
}
.post-demo h4{ font-size:25px; margin:0 0 12px; letter-spacing:-0.02em; }
.post-demo p{ color:var(--muted); font-size:15.5px; margin:0 0 8px; }
.fake-line{ height:9px; border-radius:999px; background:var(--paper-3); margin:9px 0; }
.fake-line.w80{ width:80%; } .fake-line.w62{ width:62%; } .fake-line.w92{ width:92%; }
.demo-sep{ height:1px; background:var(--rule-soft); margin:22px 0 18px; }
.demo-label{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px;
}

/* ---------- Icon skins ----------
   Every network mark is one inline SVG glyph. The "skin" is pure CSS chrome
   drawn behind it, so all nine skins ship for the weight of one icon set. */
.btn-row{ display:flex; flex-wrap:wrap; align-items:center; }
.sicon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:var(--isz,44px); height:var(--isz,44px); flex:0 0 auto;
  text-decoration:none; color:#fff;
  transition:transform .16s ease, filter .16s ease;
}
.sicon::before{ content:''; position:absolute; inset:0; z-index:1; }
.sicon svg{ position:relative; z-index:2; width:56%; height:56%; display:block; }
.sicon:hover{ transform:translateY(-3px); }
.btn-row.fx-fade .sicon{ opacity:.62; }
.btn-row.fx-fade .sicon:hover{ opacity:1; }
.btn-row.fx-gray .sicon{ filter:grayscale(1); }
.btn-row.fx-gray .sicon:hover{ filter:grayscale(0); }

/* regular: the brand colour is the tile, the glyph is knocked out white */
.sk-regular .sicon::before{ background:var(--brand); border-radius:11%; }
.sk-regular .sicon{ color:#fff; }

/* every other skin: pale chrome tile, brand-coloured glyph */
.sk-clearslate .sicon, .sk-circle .sicon, .sk-balloon .sicon,
.sk-flag .sicon, .sk-wheel .sicon, .sk-medal .sicon, .sk-shed .sicon{ color:var(--brand); }
.sk-darkslate .sicon{ color:var(--brand); }

.sk-clearslate .sicon::before{
  background:linear-gradient(158deg, var(--shell), var(--shell-2));
  border-radius:14%; box-shadow:inset 0 0 0 1px var(--shell-line);
}
.sk-darkslate .sicon::before{ background:#333333; border-radius:19%; }
.sk-circle .sicon::before{
  background:radial-gradient(120% 120% at 30% 22%, #FFFFFF, var(--shell-2));
  border-radius:50%; box-shadow:inset 0 0 0 1px var(--shell-line);
}
.sk-balloon .sicon::before{
  background:radial-gradient(120% 120% at 32% 24%, #FFFFFF, var(--shell-2));
  border-radius:50% 50% 50% 18%; box-shadow:inset 0 0 0 1px var(--shell-line);
}
.sk-flag .sicon::before{
  background:linear-gradient(128deg, #FFFFFF 42%, var(--shell-2));
  border-radius:5%; box-shadow:inset 0 0 0 1px var(--shell-line);
}
/* clip-path eats an inset ring, so these three get their edge from a shadow */
.sk-wheel .sicon::before, .sk-shed .sicon::before, .sk-medal .sicon::after{
  filter:drop-shadow(0 0 .6px rgba(0,0,0,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.14));
}
.sk-wheel .sicon::before{
  background:radial-gradient(120% 120% at 32% 24%, #FFFFFF, var(--shell-2));
  clip-path:polygon(50.0% 0.0%,60.4% 11.4%,75.0% 6.7%,78.3% 21.7%,93.3% 25.0%,88.6% 39.6%,100.0% 50.0%,88.6% 60.4%,93.3% 75.0%,78.3% 78.3%,75.0% 93.3%,60.4% 88.6%,50.0% 100.0%,39.6% 88.6%,25.0% 93.3%,21.7% 78.3%,6.7% 75.0%,11.4% 60.4%,0.0% 50.0%,11.4% 39.6%,6.7% 25.0%,21.7% 21.7%,25.0% 6.7%,39.6% 11.4%);
}
.sk-medal .sicon::before{
  background:radial-gradient(120% 120% at 32% 24%, #FFFFFF, var(--shell-2));
  border-radius:50%; inset:0 7% 14% 7%; box-shadow:inset 0 0 0 1px var(--shell-line);
}
.sk-medal .sicon::after{
  content:''; position:absolute; z-index:0; left:24%; right:24%; bottom:0; top:56%;
  background:linear-gradient(#E8E5DC,#CFCBC0);
  clip-path:polygon(0 0,100% 0,100% 100%,72% 74%,50% 100%,28% 74%,0 100%);
}
.sk-medal .sicon svg{ margin-bottom:12%; }
.sk-shed .sicon::before{
  background:linear-gradient(180deg,#B4372F 0,#A83028 31%,#F7EBC2 31%,#EFDFA8 100%);
  clip-path:polygon(50% 0,100% 31%,100% 100%,0 100%,0 31%);
}
.sk-shed .sicon svg{ margin-top:12%; width:48%; height:48%; }

/* network brand colours */
.n-facebook{--brand:#3B5998} .n-twitter{--brand:#141414} .n-reddit{--brand:#FF4500}
.n-pinterest{--brand:#CF232A} .n-linkedin{--brand:#0A66C2} .n-tumblr{--brand:#34526F}
.n-mail{--brand:#5A6B60} .n-rss{--brand:#E8811A} .n-youtube{--brand:#CF282A}
.n-instagram{--brand:#B8407C} .n-vimeo{--brand:#1AB7EA} .n-flickr{--brand:#FF0084}
.n-foursquare{--brand:#F94877} .n-chatgpt{--brand:#141414} .n-claude{--brand:#D97757}
.n-copilot{--brand:#0078D4} .n-gemini{--brand:#8E75B2} .n-grok{--brand:#141414}
.n-perplexity{--brand:#1FB8CD}
.sk-darkslate .n-twitter, .sk-darkslate .n-chatgpt, .sk-darkslate .n-grok{ --brand:#EDEDED; }
[data-theme="dark"] .sk-regular .n-twitter,
[data-theme="dark"] .sk-regular .n-chatgpt,
[data-theme="dark"] .sk-regular .n-grok{ --brand:#2A2A2A; }

/* ---------- The workbench ----------
   A spec sheet, not a sidebar: every control is a ruled row with its label in
   the left gutter, and the preview runs the full width underneath. */
.bench{ padding:56px 0 20px; }
/* No overflow:hidden here — it would make this the sticky preview's
   scrollport and the pinning would silently stop working. */
.bench-sheet{
  border:1px solid var(--rule); border-radius:5px; background:var(--card);
}
.tabs{
  display:flex; border-bottom:1px solid var(--rule); background:var(--paper-2);
  border-radius:4px 4px 0 0;
}
.tab:first-child{ border-top-left-radius:4px; }
.tab{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:17px 26px; font-weight:700; font-size:15px; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  display:inline-flex; align-items:center; gap:9px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.tab svg{ width:16px; height:16px; }
.tab:hover{ color:var(--ink); background:var(--surface-hover); }
.tab[aria-selected="true"]{ color:var(--ink); background:var(--card); border-bottom-color:var(--green); }

@media (max-width:560px){
  .tab{ padding:14px 15px; font-size:14px; gap:7px; }
  .tab svg{ width:15px; height:15px; }
}
.prereq{
  display:flex; align-items:center; gap:18px;
  padding:16px 24px; background:var(--green-wash);
  border-bottom:1px solid var(--rule); border-radius:4px 4px 0 0;
}
.prereq + .tabs{ border-radius:0; }
.prereq .pi{ width:23px; height:23px; flex:0 0 auto; color:var(--green-text); }
.prereq p{
  flex:1 1 auto; min-width:0; margin:0;
  font-size:14.5px; line-height:1.55; color:var(--muted);
}
.prereq b{ display:block; color:var(--ink); font-weight:700; font-size:15px; }
.prereq code{ font-family:var(--ff-mono); font-size:13px; color:var(--green-text); }
.prereq .btn{ flex:0 0 auto; padding:10px 17px; font-size:14.5px; }
@media (max-width:820px){
  .prereq{ flex-wrap:wrap; gap:12px 14px; padding:16px 20px; }
  .prereq p{ flex:1 1 100%; order:2; }
  .prereq .btn{ order:3; }
}

.row{
  display:grid; grid-template-columns:158px 1fr; gap:26px;
  padding:22px 26px; border-bottom:1px solid var(--rule-soft); align-items:start;
}
.row:last-child{ border-bottom:0; }
/* Without this a wide code line blows the 1fr track out past the container. */
.row > *{ min-width:0; }
.row > .rl{ padding-top:4px; }
.rl .n{
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); display:block;
}
.rl .h{ font-size:13px; color:var(--faint); display:block; margin-top:3px; line-height:1.45; }
@media (max-width:760px){
  .row{ grid-template-columns:1fr; gap:12px; padding:20px; }
  .rl .h{ display:none; }
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink-2);
  padding:7px 13px 7px 9px; border-radius:3px; font-size:14px; font-weight:600;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.chip:hover{ border-color:var(--green); color:var(--ink); background:var(--surface-hover); }
.chip .box{
  width:15px; height:15px; border:1.5px solid var(--rule); border-radius:3.5px;
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  transition:background .14s ease, border-color .14s ease;
}
/* A drawn check, centred by the flexbox. The old rotated-border trick put
   its own centre on the transform origin, so it always sat high and left. */
.chip .box svg{
  width:11px; height:11px; display:block; color:var(--green-ink);
  opacity:0; transform:scale(.55);
  transition:opacity .11s ease, transform .16s cubic-bezier(.34,1.5,.5,1);
}
.chip[aria-pressed="true"]{ background:var(--green-wash); border-color:var(--green); color:var(--ink); }
.chip[aria-pressed="true"] .box{ background:var(--green); border-color:var(--green); }
.chip[aria-pressed="true"] .box svg{ opacity:1; transform:scale(1); }
/* Same specificity as the [aria-pressed] rule above and declared later, so a
   hovered selection actually responds instead of silently losing the cascade. */
.chip[aria-pressed="true"]:hover{ background:var(--green-wash-2); }
.chip .g{ width:15px; height:15px; display:block; color:var(--brand); }
[data-theme="dark"] .chip .n-twitter, [data-theme="dark"] .chip .n-chatgpt,
[data-theme="dark"] .chip .n-grok{ --brand:#E8EFE9; }
.chip.g-off .g{ opacity:.42; }

.seg{ display:inline-flex; border:1px solid var(--rule); border-radius:3px; overflow:hidden; flex-wrap:wrap; }
.seg button{
  appearance:none; border:0; background:var(--paper); cursor:pointer;
  padding:8px 15px; font-size:14px; font-weight:600; color:var(--muted);
  border-right:1px solid var(--rule); transition:background .14s ease, color .14s ease;
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:var(--surface-hover); color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--green); color:var(--green-ink); }
.seg button[aria-pressed="true"]:hover{ background:var(--green-hover); }

.skins{ display:flex; flex-wrap:wrap; gap:10px; }
.skin{
  appearance:none; cursor:pointer; background:var(--paper); border:1px solid var(--rule);
  border-radius:3px; padding:9px 12px 8px; display:flex; flex-direction:column;
  align-items:center; gap:6px; width:82px; transition:border-color .14s ease, background .14s ease;
}
.skin:hover{ border-color:var(--green); background:var(--surface-hover); }
.skin[aria-pressed="true"]{ border-color:var(--green); background:var(--green-wash); }
.skin[aria-pressed="true"]:hover{ background:var(--green-wash-2); }
.skin .swatch{ --isz:30px; }
.skin .nm{ font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.01em; }
.skin[aria-pressed="true"] .nm{ color:var(--ink); }

/* The specimen. It rides along under the header for as long as the
   workbench is on screen, so every option change is visible where you
   are rather than somewhere below the fold. */
.row-preview{
  position:sticky; top:var(--hdr); z-index:20;
  background:var(--card);
  transition:box-shadow .2s ease;
}
.row-preview.is-stuck{ box-shadow:0 10px 16px -10px var(--shadow); }
@media (max-height:620px){
  /* On a short window a pinned strip costs more than it gives. */
  .row-preview{ position:static; box-shadow:none; }
}
.preview-wrap{ display:flex; align-items:center; gap:20px; }
.preview{
  flex:1 1 auto; min-width:0;
  background:var(--paper-2); border:1px dashed var(--rule); border-radius:4px;
  padding:17px 20px; min-height:86px; display:flex; align-items:center;
  overflow-x:auto;
}
/* One line that scrolls, never two that wrap: a pinned strip has to keep a
   predictable height or it swallows the controls it is meant to sit above. */
.preview .btn-row{ gap:var(--isp,10px); flex-wrap:nowrap; user-select:none; }
/* pan-y keeps vertical page scrolling working from on top of a button,
   while sideways movement comes to us as a reorder. */
.preview .sicon{ cursor:grab; touch-action:pan-y; }
.btn-row.is-sorting .sicon{ transition:none; }
.btn-row.is-sorting .sicon:hover{ transform:none; }
.btn-row.is-sorting .sicon:not(.is-held){ opacity:.62; }
.sicon.is-held{ z-index:5; cursor:grabbing; filter:drop-shadow(0 7px 10px var(--shadow)); }
.preview-empty{ color:var(--faint); font-size:14.5px; }
.drag-hint{
  display:block; margin-top:7px; color:var(--green-text); font-weight:700;
  font-size:11.5px; letter-spacing:.04em;
}
.preview-note{
  flex:0 0 auto; width:148px; text-align:right; margin:0;
  font-size:12.5px; line-height:1.5; color:var(--faint);
}
.preview-note b{ color:var(--muted); font-weight:700; }
@media (max-width:760px){
  .preview-wrap{ display:block; }
  .preview-note{ width:auto; text-align:left; margin-top:10px; }
}

.code{
  position:relative; background:var(--code-bg); border:1px solid var(--code-rule);
  border-radius:4px; overflow:hidden;
}
/* The snippet scrolls; the copy button and its fade stay pinned over it. */
.code-scroll{ overflow-x:auto; padding:16px 104px 16px 18px; }
.code::after{
  content:''; position:absolute; top:1px; right:1px; bottom:1px; width:118px;
  background:linear-gradient(90deg, transparent, var(--code-bg) 46%);
  pointer-events:none; z-index:1;
}
.code code{
  font-family:var(--ff-mono); font-size:13.5px; color:var(--code-ink);
  white-space:pre; display:block; line-height:1.6;
}
.code .tag{ color:var(--code-tag); } .code .attr{ color:var(--code-attr); }
.code .val{ color:var(--code-val); }
.copy{
  position:absolute; top:11px; right:11px; z-index:2; appearance:none; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  color:#E7EFE7; border-radius:3px; padding:6px 13px; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.copy:hover{ background:rgba(255,255,255,.15); }
.copy.done{ background:var(--green); border-color:var(--green); color:#fff; }
.code + .code{ margin-top:12px; }
.code-note{ font-size:13.5px; color:var(--muted); margin:0 0 10px; }
.code-note code{ font-family:var(--ff-mono); font-size:12.5px; background:var(--paper-2);
  border:1px solid var(--rule-soft); border-radius:3px; padding:1px 5px; }

.alt-ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.alt{ padding:20px 24px; border-right:1px solid var(--rule-soft); }
.alt:last-child{ border-right:0; }
.alt h4{ font-size:17px; margin:0 0 5px; letter-spacing:-0.01em; }
.alt p{ margin:0; font-size:14px; color:var(--muted); line-height:1.55; }
.alt p code{ font-family:var(--ff-mono); font-size:12.5px; color:var(--green-text); }
@media (max-width:760px){
  .alt-ways{ grid-template-columns:1fr; }
  .alt{ border-right:0; border-bottom:1px solid var(--rule-soft); }
  .alt:last-child{ border-bottom:0; }
}

/* ---------- Install strip ---------- */
.install{ padding:74px 0 0; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:8px; }
.step .k{
  font-family:var(--ff-display); font-size:44px; font-weight:400; font-style:italic;
  color:var(--green-text); line-height:1; display:block; margin-bottom:12px;
}
.step h3{ font-size:20px; margin:0 0 7px; }
.step p{ margin:0; color:var(--muted); font-size:15.5px; }
.step p a{ color:var(--green-text); text-underline-offset:3px; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:26px; } }

/* ---------- Numbers band ---------- */
.band{
  margin:78px 0 0; background:var(--green-deep); color:#EAF3EC;
  border-top:1px solid var(--green-deep); border-bottom:1px solid var(--green-deep);
}
[data-theme="dark"] .band{ background:#0A2412; }
.band-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.band-cell{ padding:36px 26px; border-right:1px solid rgba(255,255,255,.14); }
.band-cell:last-child{ border-right:0; }
.band-cell .n{
  font-family:var(--ff-display); font-size:clamp(28px,3.6vw,40px); font-weight:600;
  letter-spacing:-0.025em; display:block; line-height:1.05; color:#FFFFFF;
}
.band-cell .t{ font-size:13.5px; color:rgba(255,255,255,.72); display:block; margin-top:6px; }
.band-cell a{ color:inherit; text-decoration:none; }
.band-cell a:hover .n{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width:820px){
  .band-inner{ grid-template-columns:1fr 1fr; }
  .band-cell:nth-child(2){ border-right:0; }
  .band-cell:nth-child(1),.band-cell:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.14); }
}

/* ---------- Features ---------- */
.features{ padding:78px 0 0; }
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.feat{ background:var(--paper); padding:30px 28px 32px; }
.feat .fi{
  width:34px; height:34px; color:var(--green-text); margin-bottom:16px; display:block;
}
.feat h3{ font-size:20.5px; margin:0 0 8px; letter-spacing:-0.015em; }
.feat p{ margin:0; color:var(--muted); font-size:15.5px; }
@media (max-width:900px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .fgrid{ grid-template-columns:1fr; } }

/* ---------- AI section ---------- */
.ai{ padding:78px 0 0; }
.ai-card{
  border:1px solid var(--rule); border-radius:5px; background:var(--card);
  display:grid; grid-template-columns:1.15fr .85fr;
}
.ai-left{ padding:38px 36px; border-right:1px solid var(--rule); }
.ai-right{ padding:38px 36px; background:var(--paper-2); }
@media (max-width:860px){
  .ai-card{ grid-template-columns:1fr; }
  .ai-left{ border-right:0; border-bottom:1px solid var(--rule); }
}
.ai h2{ font-size:clamp(27px,3.6vw,38px); margin:0 0 14px; }
.ai-left > p{ color:var(--muted); margin:0 0 22px; font-size:16.5px; }
.ai-row{ display:flex; flex-wrap:wrap; gap:14px; --isz:46px; margin-bottom:24px; }
.ai-note{
  font-size:14.5px; color:var(--muted); margin:0; padding-top:18px;
  border-top:1px solid var(--rule-soft);
}
.ai-note b{ color:var(--ink); }
.prompt-demo{
  background:var(--card); border:1px solid var(--rule); border-radius:4px; padding:16px 18px;
  font-family:var(--ff-mono); font-size:13px; line-height:1.65; color:var(--ink-2);
}
.prompt-demo .cur{ color:var(--green-text); }
.ai-right h4{
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  margin:0 0 14px; font-family:var(--ff-body); font-weight:700;
}
.ai-right ul{ margin:20px 0 0; padding:0; list-style:none; }
.ai-right li{
  font-size:14.5px; color:var(--muted); padding:9px 0 9px 26px; position:relative;
  border-top:1px solid var(--rule-soft);
}
.ai-right li:first-child{ border-top:0; }
.ai-right li .tick{
  position:absolute; left:1px; top:14px; width:12px; height:12px; color:var(--green);
}
.ai-right li b{ color:var(--ink); font-weight:700; }

/* ---------- Reviews ---------- */
.reviews{ padding:78px 0 0; }
.rev-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; }
.rating{
  text-decoration:none; display:flex; align-items:baseline; gap:10px;
  border:1px solid var(--rule); border-radius:3px; padding:12px 18px; background:var(--card);
  transition:border-color .15s ease;
}
.rating:hover{ border-color:var(--green); background:var(--surface-hover); }
.rating .num{ font-family:var(--ff-display); font-size:28px; font-weight:600; letter-spacing:-0.02em; }
.rating .st{ color:var(--star); letter-spacing:1px; font-size:15px; }
.rating .lb{ font-size:13px; color:var(--muted); }
.rgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px; }
.rev{ border-top:2px solid var(--ink); padding-top:18px; }
.rev .st{ color:var(--star); letter-spacing:1.5px; font-size:13.5px; display:block; margin-bottom:9px; }
.rev p{ margin:0 0 14px; font-size:16px; color:var(--ink-2); }
.rev p::before{ content:'\201C'; } .rev p::after{ content:'\201D'; }
.rev .who{ font-size:11.5px; color:var(--faint); font-family:var(--ff-mono); letter-spacing:-.01em; }
@media (max-width:900px){ .rgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .rgrid{ grid-template-columns:1fr; } }

/* ---------- FAQ ----------
   Grid rows share a height, so the rule on top of each item lines up across
   both columns without any fixed heights. */
.faq{ padding:78px 0 0; }
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; margin-top:34px; }
.faq-item{ padding:22px 0 26px; border-top:1px solid var(--rule); }
.faq-item h3{ font-size:19.5px; margin:0 0 8px; letter-spacing:-0.015em; }
.faq-item p{ margin:0; color:var(--muted); font-size:15.5px; }
.faq-item b{ color:var(--ink); font-weight:700; }
.faq-item code{
  font-family:var(--ff-mono); font-size:13px; color:var(--green-text);
  word-break:break-word;
}
@media (max-width:760px){ .faq-grid{ grid-template-columns:1fr; } }

/* ---------- Closing ---------- */
.close{ padding:82px 0 88px; text-align:center; }
.close .mark-big{ width:60px; height:60px; margin:0 auto 24px; display:block; }
.close h2{ font-size:clamp(30px,4.6vw,50px); margin:0 auto 16px; max-width:17ch; }
.close p{ color:var(--muted); max-width:52ch; margin:0 auto 28px; font-size:17.5px; }
.close .hero-actions{ justify-content:center; }
/* Scoped to .close so it outranks `.close p` above, which would otherwise
   win on specificity and flatten the margin against the buttons. */
.close .heritage{
  max-width:58ch; margin:58px auto 0;
  padding-top:30px; border-top:1px solid var(--rule);
  font-size:15.5px; line-height:1.72; color:var(--muted);
}
.heritage em{ font-family:var(--ff-display); font-style:italic; color:var(--ink); }

/* ---------- Footer ---------- */
footer{ background:var(--paper-2); border-top:1px solid var(--rule); padding:44px 0 34px; }
.f-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; }
.f-brand p{ color:var(--muted); font-size:14.5px; margin:14px 0 0; max-width:34ch; }
.f-col h5{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  margin:0 0 12px; font-family:var(--ff-body); font-weight:700;
}
.f-col a{
  display:block; text-decoration:none; color:var(--muted); font-size:14.5px;
  padding:4px 0; transition:color .14s ease;
}
.f-col a:hover{ color:var(--green-text); }
.f-bot{
  margin-top:38px; padding-top:20px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--faint);
}
.f-bot a{ color:var(--muted); text-decoration:none; }
.f-bot a:hover{ color:var(--green-text); }
@media (max-width:820px){ .f-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .f-top{ grid-template-columns:1fr; } }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }