/* ─────────────────────────────────────────────
   Growwly design system — single source of truth for tokens and the
   shared shell (nav, buttons, chips, forms, sections, CTA, footer, blog).
   Ported from the frontpage prototype. Pages link this and add only their
   own page-specific rules in an inline <style>.

   Light-only for now: the [data-theme=dark] block below is kept so dark can
   be switched on site-wide later, but no page ships a theme toggle and
   <html> is stamped data-theme="light", so those rules never apply.
   ───────────────────────────────────────────── */

:root{
  color-scheme:light;
  --canvas:#fafaf9;
  --canvas-2:#f5f4f2;
  --card:#fff;
  --card-2:#faf9f8;
  --bd:#e9e9e9;
  --bd-soft:#f0efee;
  --tx:#1c1917;
  --tx-2:#57534e;
  /* --tx-3 carries real copy at 9.5–13px (invite notes, captions, stat labels,
     the measured/inferred footer), so it has to clear 4.5:1 on the LIGHTEST
     surface it lands on. The prototype's stone-400 measured 2.3–2.5:1 there.
     This is the lightest value that passes on --canvas-2 (4.70) as well as on
     --card (5.16). */
  --tx-3:#736c66;
  /* near-black. Doubles as the .btn-ink fill and as the legacy --ink that the
     tool pages use for body copy and headings — one value serves both. */
  --ink:#1c1917;
  --ink-tx:#fff;
  --term:#1c1917;
  --term-tx:#d6d3d1;
  /* the terminal bar is dark in both themes, so this has to clear 4.5:1 on --term
     by itself — stone-500 landed at 3.6:1 and the log line is 11.5px mono */
  --term-dim:#8f8880;
  --accent:hsl(171 100% 32%);
  --accent-soft:hsl(171 70% 95%);
  --accent-tx:#fff;               /* text/icons sitting ON --accent */
  --warn-bg:#fffbeb; --warn-bd:#fde68a; --warn-tx:#b45309;
  --hover:#f5f5f4;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .05);
  --shadow-md:0 4px 14px rgb(0 0 0 / .08);
  --shadow-lg:0 12px 34px rgb(0 0 0 / .13);
  --shadow-xl:0 28px 70px rgb(0 0 0 / .16);
  --r:10px;
  --r-lg:16px;
  --ease:cubic-bezier(.32,.72,0,1);
  --maxw:1140px;
  --sec-y:clamp(72px,9vw,132px);

  /* ── legacy aliases ──
     The tool pages carry a lot of inline CSS written against the old token
     names. Pointing those names at the new palette restyles them without
     rewriting their stylesheets. New work should use the names above. */
  --paper:var(--canvas);
  --surface:var(--card);
  --surface-2:var(--card-2);
  --line:var(--bd);
  --line-strong:#d6d3d1;
  --muted:var(--tx-3);
  --muted-2:var(--tx-2);
  --muted-ink:var(--tx-2);
  --e1:var(--shadow-sm);
  --e2:var(--shadow-md);
  --e3:var(--shadow-lg);
  --e4:var(--shadow-xl);
  --lip:0 0 #0000;               /* the old inner-highlight lip; flat now */
  --r-md:var(--r);
  --serif:"Inter Tight","DM Sans",sans-serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --container:var(--maxw);
}

[data-theme=dark]{
  /* native: dark scrollbars, form controls and UA defaults, no CSS of our own */
  color-scheme:dark;
  --canvas:#100e0c;
  --canvas-2:#161311;
  --card:#1b1815;
  --card-2:#211d19;
  --bd:#24201b;
  --bd-soft:#262119;
  --tx:#f5f2ef;
  --tx-2:#a8a29e;
  /* light mode's stone-500 only reaches 4.0:1 here, and --tx-3 carries real
     copy (invite note, footer, captions) — lifted until it clears 4.5:1 on
     the darkest surface it lands on (--card-2) */
  --tx-3:#918980;
  --ink:#f0ece8;
  --ink-tx:#1c1917;
  --term:#16130f;
  --accent:hsl(171 65% 45%);
  --accent-soft:hsl(171 40% 14%);
  --accent-tx:#1c1917;             /* accent is bright here — white on it is 2.3:1 */
  --warn-bg:#251d0d; --warn-bd:#4a3a12; --warn-tx:#e0b44a;
  --hover:#272220;
  /* black shadows vanish on a near-black canvas; dark leans on the surface
     lightness step instead, so these only need to deepen the seam */
  --shadow-sm:0 1px 2px rgb(0 0 0 / .4);
  --shadow-md:0 4px 14px rgb(0 0 0 / .5);
  --shadow-lg:0 12px 34px rgb(0 0 0 / .6);
  --shadow-xl:0 28px 70px rgb(0 0 0 / .7);
  --line-strong:#3a332c;
}

/* ══════════ BASE ══════════ */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:var(--canvas); color:var(--tx);
  font:400 16px/1.6 "DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
main#top{background:var(--card)}
h1,h2,h3,.font-display{
  font-family:"Inter Tight","DM Sans",sans-serif;font-weight:600;letter-spacing:-.025em;
  line-height:1.08;
}
button,textarea,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}

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

.ico{width:21px;height:21px;flex:none;display:block}
.ico-sm{width:16px;height:16px}
.ico-xs{width:13px;height:13px}
.grow{flex:1;min-width:0}
.w-full{width:100%}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px}

/* ══════════ BUTTONS ══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;border-radius:var(--r);transition:opacity .15s,transform .1s,background .15s;
}
.btn-ink{background:var(--ink);color:var(--ink-tx);padding:9px 16px;font-size:14px}
.btn-ink:hover{opacity:.88}
.btn:active{transform:scale(.99)}
.btn-light{background:#fff;color:#1c1917}
.btn-light:hover{opacity:.9}
.btn-pill{border-radius:999px;padding:9px 18px}
/* Store CTAs. The marks are data URIs on ::before rather than sprite symbols —
   the sprite is inlined into every page, this lives in one cached file. */
.btn-chrome,.btn-browser{background:linear-gradient(180deg,#4a8cf7,#2f6fe0);color:#fff;font-size:14px}
.btn-chrome:hover,.btn-browser:hover{opacity:.92}
/* the bar's store CTA is a menu over two browsers, so it takes a neutral
   extension mark rather than either store's logo */
.btn-browser::before{content:"";width:17px;height:17px;flex:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M10.5 2a2.5 2.5 0 0 1 2.5 2.5V5h3a1 1 0 0 1 1 1v3h.5a2.5 2.5 0 1 1 0 5H17v3a1 1 0 0 1-1 1h-3v-.5a2.5 2.5 0 1 0-5 0V18H5a1 1 0 0 1-1-1v-3h.5a2.5 2.5 0 1 0 0-5H4V6a1 1 0 0 1 1-1h3v-.5A2.5 2.5 0 0 1 10.5 2Z'/></svg>") center/contain no-repeat}
.btn-chrome::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;
  background:#fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><defs><linearGradient id='a' x1='3.2173' y1='15' x2='44.7812' y2='15' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23d93025'/><stop offset='1' stop-color='%23ea4335'/></linearGradient><linearGradient id='b' x1='20.7219' y1='47.6791' x2='41.5039' y2='11.6837' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23fcc934'/><stop offset='1' stop-color='%23fbbc04'/></linearGradient><linearGradient id='c' x1='26.5981' y1='46.5015' x2='5.8161' y2='10.506' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%231e8e3e'/><stop offset='1' stop-color='%2334a853'/></linearGradient></defs><circle cx='24' cy='23.9947' r='12' fill='%23fff'/><path d='M24,12H44.7812a23.9939,23.9939,0,0,0-41.5639.0029L13.6079,30l.0093-.0024A11.9852,11.9852,0,0,1,24,12Z' fill='url(%23a)'/><circle cx='24' cy='24' r='9.5' fill='%231a73e8'/><path d='M34.3913,30.0029,24.0007,48A23.994,23.994,0,0,0,44.78,12.0031H23.9989l-.0025.0093A11.985,11.985,0,0,1,34.3913,30.0029Z' fill='url(%23b)'/><path d='M13.6086,30.0031,3.218,12.006A23.994,23.994,0,0,0,24.0025,48L34.3931,30.0029l-.0067-.0068a11.9852,11.9852,0,0,1-20.7778.007Z' fill='url(%23c)'/></svg>") center/15px 15px no-repeat}
/* Microsoft Edge mark, same white-disc treatment as the Chrome one. Pair it with a
   background class (.btn-browser or .btn-light) — this rule only supplies the icon. */
.btn-edge::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;
  background:#fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><defs><linearGradient id='a' x1='9' y1='33' x2='43' y2='33' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%230c59a4'/><stop offset='1' stop-color='%23114a8b'/></linearGradient><linearGradient id='b' x1='13' y1='45' x2='40' y2='10' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%2335c1f1'/><stop offset='.3' stop-color='%232bc3d2'/><stop offset='.75' stop-color='%2336c752'/></linearGradient><linearGradient id='c' x1='40' y1='14' x2='16' y2='2' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%2366eb6e'/><stop offset='1' stop-color='%2327dfa5'/></linearGradient></defs><path fill='url(%23a)' d='M43.1 33.4c-.6.3-1.2.6-1.8.8a17.6 17.6 0 0 1-6.2 1.1c-8.1 0-15.2-5.6-15.2-12.8a5.4 5.4 0 0 1 2.8-4.7c-7.4.3-9.3 8-9.3 12.5 0 12.7 11.8 14 14.3 14a20 20 0 0 0 5.2-.7l.3-.1a20.1 20.1 0 0 0 10.4-8.3.6.6 0 0 0-.5-1.8z'/><path fill='url(%23b)' d='M19.8 45.3a12.4 12.4 0 0 1-3.6-3.3 12.6 12.6 0 0 1 4.6-18.7c.5-.2 1.3-.6 2.4-.6a5 5 0 0 1 4 2 5.2 5.2 0 0 1 1 3c0-.1 4-13-13-13C12.1 14.7 6.3 21.5 6.3 27.4a20.4 20.4 0 0 0 1.9 8.8 20 20 0 0 0 24.4 10.5 11.8 11.8 0 0 1-12.8-1.4z'/><path fill='url(%23c)' d='M28.6 27.9c-.2.2-.7.4-.7 1 0 .5.3.9.9 1.4 2.8 2 8.2 1.7 8.2 1.7a11.8 11.8 0 0 0 6-1.6 12 12 0 0 0 6-10.3c0-4.4-1.6-7.3-2.2-8.6C42.9 3.4 34.7 0 24 0A24 24 0 0 0 .1 23.6c.1-5.9 6-10.7 13-10.7 1.7 0 5 0 8.4 1.8a15.5 15.5 0 0 1 5.6 5.5c1.3 2 1.5 4.4 1.5 5.4s-.5 2.4-2 2.3z'/></svg>") center/15px 15px no-repeat}
.btn-lg{padding:15px 22px;border-radius:var(--r);font-size:16px;
  font-family:"Inter Tight",sans-serif;letter-spacing:-.01em}

.icon-btn{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--tx-2);transition:background .15s,color .15s;flex:none
}
.icon-btn:hover{background:var(--hover);color:var(--tx)}

/* ══════════ CHIPS ══════════ */
.chip{font-size:10.5px;font-weight:600;font-style:normal;padding:2.5px 8px;text-align:center;border-radius:999px;white-space:nowrap;
  font-family:"DM Sans",sans-serif;letter-spacing:0}
.chip-pass{background:hsl(150 55% 94%);color:hsl(150 60% 28%)}
.chip-warn{background:#fef3c7;color:#92400e}
.chip-mute{background:var(--hover);color:var(--tx-2)}
.chip-hot{background:hsl(14 90% 94%);color:hsl(14 80% 40%)}
[data-theme=dark] .chip-pass{background:hsl(150 40% 15%);color:hsl(150 55% 65%)}
[data-theme=dark] .chip-warn{background:hsl(38 50% 15%);color:hsl(38 80% 65%)}
[data-theme=dark] .chip-hot{background:hsl(14 50% 17%);color:hsl(14 85% 68%)}

.dot-live{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:hsl(150 70% 45%);box-shadow:0 0 0 3px hsl(150 70% 45% / .18)
}

.mascot{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:#2f2a26;color:var(--accent);position:relative;flex:none
}
.mascot .dot-live{position:absolute;top:-2px;right:-2px;box-shadow:0 0 0 2px var(--term)}
.mascot-xl{width:66px;height:66px;border-radius:100%;background:#2f2a26;margin:0 auto 22px}
.mascot-xl .ico{width:34px;height:34px}

.av{
  border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,#0d9488,#0f766e);color:#fff;
  font-weight:700;font-size:11px;letter-spacing:.02em
}
.av-lg{width:32px;height:32px;font-size:12px}

/* ══════════ NAV ══════════ */
.nav{position:sticky;top:0;z-index:50;transition:background .25s,border-color .25s,box-shadow .25s;
  border-bottom:1px solid transparent}
.nav.is-stuck{
  background:color-mix(in srgb,var(--canvas) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--bd);
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:0 16px}

.brand{display:flex;align-items:center;gap:4px;flex:none}
.brand-mark{border-radius:8px;display:grid;place-items:center;color:var(--tx);flex:none}
.brand-name{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.04em}
.brand-beta{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:2.5px 4px;margin-left:2px;border-radius:5px}

.nav-links{display:flex;align-items:center;gap:4px;margin:0 auto}
/* :not(.btn) — these outrank .btn-ink/.btn-pill, so the menu's CTA must opt out */
.nav-links a:not(.btn){font-size:14.5px;color:var(--tx-2);padding:7px 12px;border-radius:8px;
  text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1.5px;
  transition:text-decoration-color .15s,color .15s}
.nav-links a:not(.btn):hover{color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:1.5px}
.nav-links a[aria-current=page]:not(.btn){color:var(--accent);font-weight:500;text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:1.5px}

.nav-right{display:flex;align-items:center;gap:6px;flex:none}

/* hamburger: three bars that fold into an X while the menu is open */
.nav-toggle,.nav-cta{display:none}
.nav-toggle span{display:block;width:17px;height:1.8px;border-radius:2px;background:currentColor;
  transition:transform .28s var(--ease),opacity .18s}
.nav-toggle span+span{margin-top:4px}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

/* ══ Free Tools dropdown — native <details>, opened on hover by JS on desktop ══ */
.submenu{position:relative}
.submenu>summary{list-style:none;cursor:pointer}
/* :not(.btn) — same opt-out as the CTAs below: the Add to Browser summary is a
   pill, so it must keep .btn's shape and colour instead of the nav link's */
.submenu>summary:not(.btn){
  display:flex;align-items:center;gap:6px;
  font-size:14.5px;color:var(--tx-2);padding:7px 12px;border-radius:8px;
  transition:background .15s,color .15s
}
.submenu>summary::-webkit-details-marker{display:none}
.submenu>summary:not(.btn):hover,.submenu[open]>summary:not(.btn){color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:1.5px}
.submenu>summary::after{
  content:"";width:5px;height:5px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s var(--ease)
}
.submenu[open]>summary::after{transform:rotate(225deg);margin-top:1px}
.submenu-panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:10;
  width:520px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg)
}
/* a short menu (Resources) doesn't need the tools panel's two 260px columns */
.submenu-panel.sm{width:300px;grid-template-columns:1fr}
/* the bar's Add to Browser panel hangs off the right edge and stays a floating
   card at every width — only the menu sheet's copy flattens into the page */
.nav-right .submenu-panel{position:absolute;left:auto;right:0;transform:none;padding:8px;
  max-width:none;background:var(--card);border:1px solid var(--bd);box-shadow:var(--shadow-lg)}
.submenu-panel a{display:block;padding:7px 13px;border-radius:9px;transition:background .15s}
.submenu-panel a:hover{background:var(--hover)}
/* the panel's entries are two-line cards, so they keep the tint rather than
   taking the nav's underline */
.nav-links .submenu-panel a:hover,
.nav-links .submenu-panel a[aria-current=page]{color:inherit;text-decoration:none}
.nav-links .submenu-panel a[aria-current=page]{background:var(--hover)}
.tool-name{display:block;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:-.015em;color:var(--tx);margin-bottom:3px}
.tool-desc{display:block;font-size:12.5px;line-height:1.45;color:var(--tx-3)}

/* ══════════ HERO ══════════ */
.hero{padding:clamp(32px,5vw,64px) 0 0}
.hero-copy{text-align:center}
/* dark loses the paper warmth the light canvas gives the fold, so put the
   light back as one accent wash behind the hero rather than lifting --canvas */
[data-theme=dark] .hero{
  background:radial-gradient(110% 60% at 50% -8%,hsl(171 45% 26% / .13),transparent 58%)
}

.tagchip{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;
  background:var(--card);border:1px solid var(--bd);border-radius:999px;
  padding:6px 14px 6px 12px;box-shadow:var(--shadow-sm);margin-bottom:28px;
  transition:border-color .15s,transform .15s
}
.tagchip:hover{border-color:var(--tx-3);transform:translateY(-1px)}
.tagchip b{font-weight:700}
.tagchip span{color:var(--tx-3)}
.tagchip .ico-xs{color:var(--tx-3)}

.hero h1{font-size:clamp(38px,6.2vw,68px);line-height:1.15;margin-bottom:22px}
.lede{font-size:clamp(16px,1.6vw,18.5px);color:var(--tx-2);max-width:720px;margin:0 auto 34px}

/* ══════════ INVITE FORM ══════════ */
.invite{max-width:520px;margin:0 auto;text-align:left}
.invite-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-3);display:flex;gap:6px
}
.field>span i{font-style:normal;color:var(--tx-3);opacity:.65;font-weight:500}
.field input{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:13px 14px;font-size:15px;width:100%;
  transition:border-color .15s,box-shadow .15s
}
.field input::placeholder{color:var(--tx-3)}
/* --accent-soft is a near-black teal in dark, so the ring disappeared there.
   Mixing off --accent instead keeps one rule readable on both canvases. */
.field input:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field input[aria-invalid=true]{border-color:hsl(0 70% 55%)}

/* Turnstile renders a fixed 300×65 iframe; centre it and hold its space so
   the button doesn't jump when the widget finishes loading. */
.invite .cf-turnstile{display:flex;justify-content:center;min-height:65px;margin-bottom:10px}

.invite-note{font-size:12.5px;color:var(--tx-3);text-align:center;margin-top:12px}
.invite-error{font-size:13px;color:hsl(0 70% 45%);text-align:center;margin-top:10px;font-weight:500}
[data-theme=dark] .invite-error{color:hsl(0 75% 68%)}

.invite-done{
  display:flex;align-items:flex-start;gap:13px;text-align:left;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:var(--r-lg);padding:20px;animation:fadeIn .45s var(--ease)
}
.invite-done .tick{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-tx)}
.invite-done b{display:block;font-family:"Inter Tight",sans-serif;font-size:17px;margin-bottom:3px}
.invite-done p{font-size:14px;color:var(--tx-2);line-height:1.5}

/* dark variant used inside the footer CTA */
.invite-dark .field>span{color:rgb(255 255 255 / .5)}
/* .16 border was a 1.3:1 edge and the placeholder 2.9:1 — both under spec on
   this slab. Lifted to 3.4:1 and 5.5:1 against the field fill. */
.invite-dark .field input{background:rgb(255 255 255 / .07);border:0;color:#fff}
.invite-dark .field input::placeholder{color:rgb(255 255 255 / .55)}
.invite-dark .field input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.invite-dark .invite-note{color:rgb(255 255 255 / .45)}
.invite-dark .invite-error{color:hsl(0 80% 74%)}
.invite-dark .invite-done{background:rgb(255 255 255 / .07);border-color:rgb(255 255 255 / .16)}
.invite-dark .invite-done p{color:rgb(255 255 255 / .62)}

/* ══════════ STATS BAND ══════════ */
.band{background:var(--canvas-2);margin-top:clamp(56px,7vw,96px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:34px;text-align:center}
.stats b{display:block;font-family:"Inter Tight",sans-serif;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.03em;line-height:1.1}
.stats span{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-3);margin-top:8px}

/* ══════════ SECTIONS ══════════ */
.sec{padding-block:var(--sec-y)}
.sec-alt{background:var(--canvas-2)}

.sec-head{max-width:660px;margin-bottom:clamp(38px,5vw,60px)}
.eyebrow{display:block;font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.sec-head h2{font-size:clamp(28px,4.2vw,44px);margin-bottom:18px}
.sec-head p{color:var(--tx-2);font-size:clamp(15px,1.5vw,17px)}

/* small uppercase label, used for panel headers across every page */
.demo-label{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:11px;display:flex;align-items:center;gap:8px
}

.ph-warning{
  background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx);
  border-radius:var(--r);padding:12px 15px;font-size:13.5px;line-height:1.5
}
.ph-warning b{font-weight:700}

/* ══ steps ══ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps li{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);padding:24px;
  display:flex;flex-direction:column;position:relative
}
.step-n{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:999px;
  padding:4px 10px;align-self:flex-start;margin-bottom:20px
}
.step-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--hover);color:var(--tx);margin-bottom:14px}
.steps h3{font-size:19px;margin-bottom:9px}
.steps p{font-size:14.5px;color:var(--tx-2);line-height:1.6}

/* ══ agent grid ══ */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.agent{
  background:color-mix(in srgb,var(--card) 55%,transparent);
  border:1px solid var(--bd);border-radius:12px;padding:20px;
  display:flex;flex-direction:column;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s
}
.agent:hover{background:var(--card);border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));
  transform:translateY(-2px);box-shadow:var(--shadow-md)}
.agent-top{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.agent-ico{width:32px;height:32px;border-radius:100%;display:grid;place-items:center;
  background:var(--ac);color:#fff;flex:none;box-shadow:0 2px 8px color-mix(in srgb,var(--ac) 35%,transparent)}
.agent h3{font-size:16px;letter-spacing:-.015em;flex:1;min-width:0}
.agent p{font-size:14px;color:var(--tx-2);line-height:1.55}
.agent-state{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)
}
.agent.is-soon{opacity:.72;border-style:dashed}
.agent.is-soon:hover{transform:none;box-shadow:none}
.agent.is-soon .agent-ico{background:var(--hover);color:var(--tx-3);box-shadow:none}
.agent-soon{background:var(--hover);color:var(--tx-2);padding:3px 8px;border-radius:999px;
  letter-spacing:.1em}

/* ══ teardown / labelled data rows (also used by the tool rate cards) ══ */
.teardown{overflow:hidden}
.td-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--bd);background:var(--card-2)}
.td-head .demo-label{margin-bottom:0}
.td-tabs{display:flex;gap:3px;margin-left:auto;padding:3px;background:var(--canvas-2);
  border:1px solid var(--bd);border-radius:9px;flex-wrap:wrap}
.td-tabs button{
  padding:6px 13px;border-radius:6px;font-size:12.5px;color:var(--tx-2);
  font-family:"JetBrains Mono",monospace;transition:background .15s,color .15s
}
.td-tabs button.is-on{background:var(--card);color:var(--tx);font-weight:500;box-shadow:var(--shadow-sm)}

.td-rows li{
  display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;
  padding:15px 20px;border-bottom:1px solid var(--bd-soft);
  animation:fadeIn .4s var(--ease) backwards
}
.td-rows li:last-child{border-bottom:0}
.td-k{font-size:14px;color:var(--tx-2)}
.td-v{font-family:"JetBrains Mono",monospace;font-size:13.5px;font-weight:500;
  text-align:right;justify-self:end}
.td-foot{padding:15px 20px;background:var(--card-2);border-top:1px solid var(--bd);
  font-size:12.5px;color:var(--tx-3);line-height:1.9}

/* ══ testimonial marquee ══
   Unused today — the homepage ships without a testimonials section until
   there are real beta quotes. Kept so the markup is a paste-in when there are. */
.marquee{
  margin-top:8px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scrollX 64s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.quote{
  width:330px;flex:none;background:var(--card);border:1px solid var(--bd);
  border-radius:12px;padding:20px;display:flex;flex-direction:column
}
.quote p{font-size:14px;color:var(--tx-2);line-height:1.6;flex:1}
.quote footer{display:flex;align-items:center;gap:9px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--bd-soft)}
.quote footer b{font-size:13.5px;font-weight:700}
.quote footer i{font-style:normal;font-size:12px;color:var(--tx-3)}

/* ══ FAQ ══ */
.faq details{border-bottom:1px solid var(--bd)}
.faq summary{
  display:flex;align-items:center;gap:14px;padding:20px 2px;cursor:pointer;
  font-family:"Inter Tight",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.015em;
  list-style:none;transition:color .15s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .ico{margin-left:auto;color:var(--tx-3);transition:transform .25s var(--ease)}
.faq details[open] summary .ico{transform:rotate(90deg)}
.faq .ans{padding:0 40px 22px 2px;color:var(--tx-2);font-size:15px;line-height:1.65;
  animation:fadeIn .3s var(--ease)}

/* ══════════ FOOTER CTA ══════════ */
.cta{background:var(--term);color:#f5f2ef;padding-block:clamp(64px,8vw,110px)}
.cta-in{text-align:center}
.cta h2{font-size:clamp(30px,4.4vw,48px);margin-bottom:16px;color:#fff;font-weight:600}
.cta>.wrap>p,.cta-in>p{color:rgb(255 255 255 / .58);font-size:17px;max-width:480px;margin:0 auto 34px}
.cta .mascot-xl{color:var(--accent);background:rgb(255 255 255 / .07)}

.cta-agents{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:38px}
.cta-agents li{
  font-size:12px;color:rgb(255 255 255 / .62);background:rgb(255 255 255 / .06);
  border:1px solid rgb(255 255 255 / .1);border-radius:999px;padding:6px 13px;
  display:flex;align-items:center;gap:7px
}
.cta-agents .swatch{width:7px;height:7px;border-radius:50%;background:var(--ac);flex:none}
.cta-agents li.soon{opacity:.5}

/* ══════════ FOOTER ══════════ */
.foot{padding-top:52px;background:var(--canvas)}
.foot-in{display:grid;grid-template-columns:1.4fr 2fr;gap:40px;padding-bottom:44px}
.foot-brand p{font-size:14px;color:var(--tx-3);margin-top:12px;max-width:250px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-cols a{display:block;font-size:14px;color:var(--tx-2);padding:5px 0;transition:color .15s}
.foot-cols a:hover{color:var(--accent)}
.foot-bot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--bd);padding-block:22px;font-size:12.5px;color:var(--tx-3)}

/* ══════════ TOOL PAGES ══════════
   The five Growwly Labs tools share one shape: a hero, a card that scenes are
   painted into, then the marketing sections below. Only the parts unique to a
   given tool (its result readout) stay in that page's own <style>. */

.tool-hero{padding:clamp(40px,6vw,76px) 0 0}
.tool-copy{text-align:center}
.tool-copy h1{font-size:clamp(34px,5.4vw,58px);margin-bottom:20px}
.tool-copy .lede{margin-bottom:clamp(30px,4vw,44px)}
.tool-tag{cursor:default}
.tool-tag .ico-xs{color:var(--accent)}
.tool-stage-wrap{max-width:760px}
.tool-cap{text-align:center;font-size:12px;color:var(--tx-3);margin-top:14px;line-height:1.6}

/* Every scene renders into here. The floor only catches the shortest scenes —
   loading and result run past it, so a taller floor just padded the entry form
   with dead space. */
#stage{
  display:grid;place-items:center;
  padding:clamp(28px,4vw,44px) clamp(20px,4vw,36px);
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg)
}
.scene{width:100%;max-width:760px}
.scene.center{text-align:center}
.scene.wide{max-width:100%}

.big{font-size:clamp(26px,3.4vw,34px);line-height:1.1}
.mid{font-size:clamp(21px,2.6vw,26px);line-height:1.15}
.sub{font-size:15px;line-height:1.6;color:var(--tx-2);margin:14px auto 0;max-width:44ch}
.scene:not(.center) .sub{margin-left:0}
.fine{font-size:12px;color:var(--tx-3);margin-top:4px}

#stage input[type=text],#stage input[type=email],#stage select{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:13px 14px;font-size:15px;width:100%;
  transition:border-color .15s,box-shadow .15s
}
#stage input::placeholder{color:var(--tx-3)}
#stage input:focus,#stage select:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

.entry-form{display:flex;gap:10px;margin:0 auto;max-width:760px}
.entry-form input{flex:1}
@media (max-width:480px){.entry-form{flex-direction:column}}
.form-msg{display:block;font-size:12.5px;min-height:18px;margin-top:12px}
.form-msg.err{color:hsl(0 70% 45%)}
.form-msg.ok{color:hsl(150 60% 28%)}

.btn-quiet{background:var(--hover);color:var(--tx-2);padding:14px 20px;font-size:14px;
  font-family:"Inter Tight",sans-serif;font-weight:600;border-radius:var(--r)}
.btn-quiet:hover{color:var(--tx)}
.link-quiet{font-size:12px;color:var(--tx-3);text-decoration:underline;text-underline-offset:3px}
.link-quiet:hover{color:var(--tx-2)}

/* the in-stage invite form is the same component as the closing CTA's */
#stage .invite{max-width:400px}

/* Recently-run gallery — rounded avatars, name/handle on hover */
.recent{margin:32px auto 0;max-width:520px}
.recent:empty{display:none}
.rr-head{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);margin:0 0 14px}
.rr-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.rr-item{position:relative;display:block;width:42px;height:42px}
.rr-img{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block;
  background:var(--hover);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.rr-item:hover .rr-img,.rr-item:focus-visible .rr-img{transform:scale(1.09);box-shadow:var(--shadow-md)}
.rr-tip{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  background:var(--term);color:#f5f2ef;padding:7px 11px;border-radius:8px;
  font-size:12px;line-height:1.35;white-space:nowrap;text-align:center;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .15s;z-index:5
}
.rr-tip b{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:400;
  color:rgb(255 255 255 / .6);margin-top:1px}
.rr-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--term)}
.rr-item:hover .rr-tip,.rr-item:focus-visible .rr-tip{opacity:1}
/* …and the gap report's gallery item, which is a matchup rather than a face:
   two avatars overlapped, "you" in front, ringed so the pair reads as two. */
.rr-pair{width:70px}
.rr-pair .rr-img{position:absolute;top:0}
.rr-pair .rr-img.a{left:0;z-index:2;box-shadow:0 0 0 2px var(--canvas),var(--shadow-sm)}
.rr-pair .rr-img.b{left:28px}

/* Loading checklist */
.checks{margin:24px auto 0;display:flex;flex-direction:column;gap:13px;max-width:300px;text-align:left}
.check{display:flex;gap:12px;align-items:center;font-size:14.5px;color:var(--tx-3);
  opacity:.5;transition:opacity .35s,color .35s}
.check.done{opacity:1;color:var(--tx)}
.check .box{width:20px;height:20px;flex:none;border:1px solid var(--bd);border-radius:6px;
  display:grid;place-items:center;font-size:12px;color:transparent;
  transition:background .3s,border-color .3s,color .3s}
.check.done .box{background:var(--accent);border-color:var(--accent);color:var(--accent-tx)}
/* The "Writing your…" note hangs off the bottom of the checklist, so it lines up
   with the list rather than with the centred scene around it. */
.checks+.fine{max-width:300px;margin:16px auto 0;text-align:left}

/* Channel identity, shown above a result */
.chan-ava{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;
  margin:0 auto 14px;background:var(--hover);box-shadow:var(--shadow-md)}
.chan{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(20px,2.6vw,26px);line-height:1.2;text-wrap:balance}
.chan-handle{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--tx-3);margin:6px 0 0}

/* Locked-feature teaser, shown before the invite ask */
.teaser-count{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-.03em;
  font-size:clamp(21px,2.8vw,27px);margin:6px 0 20px}
.teaser-count span{color:var(--accent)}
.teaser-list{margin:0 auto 22px;max-width:320px;text-align:left}
.teaser-list li{font-size:13.5px;color:var(--tx-2);padding:10px 0 10px 26px;
  border-bottom:1px solid var(--bd-soft);position:relative}
.teaser-list li:last-child{border-bottom:0}
.teaser-list li::before{
  content:"";position:absolute;left:0;top:12px;width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8,10.5 V7.5 a4,4 0 0 1 8,0 V10.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* Scene entrance */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.enter{animation:rise .45s var(--ease) both}

/* ══════════ BLOG ══════════ */
.blog-hero{padding:clamp(44px,6vw,84px) 0 clamp(34px,4.5vw,56px);text-align:center}
/* same accent wash the frontpage hero uses to put warmth back into dark */
[data-theme=dark] .blog-hero{
  background:radial-gradient(110% 70% at 50% -14%,hsl(171 45% 26% / .13),transparent 58%)
}
.blog-hero .eyebrow{margin-bottom:14px}
.blog-hero h1{font-size:clamp(34px,5.4vw,58px);margin-bottom:20px}
.blog-hero .lede{margin-bottom:0}

.sec-posts{padding-bottom:var(--sec-y)}
.posts-head{display:flex;align-items:center;gap:10px;margin:clamp(34px,4vw,52px) 0 14px}
.posts-head .demo-label{margin-bottom:0}
.posts-count{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--tx-3)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.posts.related{grid-template-columns:repeat(2,1fr)}

.post{
  background:color-mix(in srgb,var(--card) 55%,transparent);
  border:1px solid var(--bd);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s
}
.post:hover{
  background:var(--card);border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));
  transform:translateY(-2px);box-shadow:var(--shadow-md)
}

/* aspect-ratio + cover means a wrong-sized file crops instead of reflowing
   the card, so a late-loading image never shifts the grid */
.post-cover{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:8px;background:var(--hover);margin-bottom:16px
}
.post:hover .post-cover{opacity:.92}

.post-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post-date{font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--tx-3);white-space:nowrap}
.post h3{font-size:18px;line-height:1.3;letter-spacing:-.02em;margin-bottom:10px}
.post p{font-size:14px;color:var(--tx-2);line-height:1.6;flex:1}
.post-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-family:"Inter Tight",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:-.01em
}
.post-more .ico{color:var(--tx-3);transition:transform .2s var(--ease),color .2s}
.post:hover .post-more .ico{transform:translateX(3px);color:var(--ac)}

/* ══ lead post ══ */
.post-lead{
  padding:clamp(20px,2.4vw,28px);position:relative;overflow:hidden;
  background:var(--card);border-radius:var(--r-lg);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,3vw,38px);align-items:center
}
/* the wash is decorative and sits under the copy, so it must not eat clicks */
.post-lead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 130% at 88% 0%,color-mix(in srgb,var(--ac) 13%,transparent),transparent 62%)
}
.post-lead>*{position:relative}
.lead-copy{display:flex;flex-direction:column;padding:clamp(6px,1.4vw,18px) 0 0 clamp(6px,1.4vw,16px)}
.post-lead h3{font-size:clamp(24px,2.9vw,34px);line-height:1.14;margin-bottom:14px}
.post-lead p{font-size:clamp(15px,1.5vw,16.5px);flex:none}
.post-lead .post-more{margin-top:24px;font-size:15px}
.lead-cover{margin-bottom:0;border-radius:12px}
.post-latest{
  display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);
  background:var(--hover);border-radius:999px;padding:5px 11px 5px 9px
}
.post-lead .post-date{font-size:11.5px}

/* ══ article ══ */

/* scaleX off a full-width bar, so scrolling never touches layout */
.progress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:60;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%
}

/* Blog post column runs a touch wider than the shared 760px narrow wrap. */
#article .wrap-narrow{max-width:860px}

/* padding-block, not the padding shorthand — the legal pages put .art-head on
   the .wrap itself, and a shorthand here would wipe the wrap's 24px gutter. */
.art-head{padding-block:clamp(30px,4vw,52px) clamp(24px,3vw,36px)}
.back-link{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tx-2);
  margin-bottom:clamp(24px,3vw,38px);transition:color .15s
}
.back-link:hover{color:var(--accent)}
.back-link .ico{transition:transform .2s var(--ease)}
.back-link:hover .ico{transform:translateX(-3px)}

.art-head h1{font-size:clamp(30px,4.6vw,48px);margin:18px 0 18px}
.art-dek{font-size:clamp(16px,1.7vw,19px);color:var(--tx-2);line-height:1.6}
.art-sub{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--bd);
  font-size:12.5px;color:var(--tx-3)
}
.art-dot{width:3px;height:3px;border-radius:50%;background:var(--tx-3);flex:none}

.art-cover{border-radius:var(--r-lg);margin-bottom:clamp(30px,4vw,48px)}

.prose{padding-bottom:clamp(40px,5vw,64px)}
.prose p{font-size:17px;line-height:1.75;margin-bottom:22px}
.art-standfirst{font-size:19px;line-height:1.65;color:var(--tx-2)}
.prose h2{
  font-size:clamp(21px,2.6vw,27px);margin:clamp(34px,4vw,48px) 0 14px;
  padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--bd-soft)
}
.prose h3{font-size:clamp(18px,2vw,21px);margin:clamp(26px,3vw,34px) 0 12px}
.prose ul,.prose ol{margin:0 0 24px}
.prose li{position:relative;padding-left:26px;margin-bottom:10px;font-size:17px;line-height:1.7}
.prose li::before{
  content:"";position:absolute;left:5px;top:12px;
  width:6px;height:6px;border-radius:50%;background:var(--ac,var(--accent))
}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose img{border-radius:var(--r-lg);margin-bottom:22px}
.prose iframe{width:100%;border:1px solid var(--bd);border-radius:var(--r-lg);margin-bottom:22px}
.prose code{font-family:"JetBrains Mono",monospace;font-size:.85em;background:var(--hover);
  padding:2px 6px;border-radius:5px}
.prose pre{background:var(--term);color:#e7e5e4;padding:20px;border-radius:var(--r);
  overflow-x:auto;margin-bottom:22px}
.prose pre code{background:none;padding:0;font-size:13px}
.prose hr{border:0;border-top:1px solid var(--bd);margin:34px 0}
/* Headings already draw their own rule — an authored `---` right above one
   would stack a second line on top of it. */
.prose hr:has(+h2),.prose hr:has(+h3){display:none}
.prose table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bd-soft)}
.prose th{font-weight:700;color:var(--tx)}

.pull,.prose blockquote{
  margin:clamp(28px,3.4vw,40px) 0;padding:4px 0 4px 24px;
  border-left:2px solid var(--ac,var(--accent));
  font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.015em;
  font-size:clamp(19px,2.2vw,23px);line-height:1.4
}
.prose blockquote p{font-size:inherit;line-height:inherit;margin:0}

.art-next{padding-bottom:var(--sec-y)}
.art-next .posts-head{margin-top:clamp(30px,4vw,48px);
  padding-top:clamp(30px,4vw,48px);border-top:1px solid var(--bd)}

/* ══════════ REVEAL ON SCROLL ══════════ */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ══════════ ANIMATION ══════════ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1126px){
  /* flex, not the .icon-btn grid, so the bars keep their 5.8px pitch and the X meets */
  .nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .nav-in{justify-content:space-between;flex-wrap:wrap}
  /* order:1 keeps the toggle on the brand's row and drops the menu onto its own */
  .nav-links{display:none;order:1;flex-basis:100%;flex-direction:column;align-items:stretch;
    margin:12px 0 2px;padding-top:12px;border-top:1px solid var(--bd)}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:7px 10px;font-size:15px}
  /* an open menu over a transparent bar is unreadable, so borrow the stuck styling */
  .nav:has(.nav-links.open){
    background:color-mix(in srgb,var(--canvas) 92%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--bd);
  }
  /* the dropdown becomes a plain indented list inside the sheet */
  .submenu>summary:not(.btn){padding:7px 10px;font-size:15px}
  .submenu-panel{
    /* both panels keep the .sm 300px cap here so the rows match, not the sheet */
    position:static;transform:none;width:300px;max-width:100%;padding:0 0 6px 10px;
    grid-template-columns:1fr;gap:1px;background:none;border:0;box-shadow:none
  }
  .submenu-panel a{padding:9px 10px}
  .submenu-panel .tool-name{font-family:var(--sans);font-weight:500;font-size:15px;
    letter-spacing:0;color:var(--tx-2);margin:0}
  .tool-desc{display:none}
  .steps,.agents,.posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  html{scroll-padding-top:70px}
  .wrap{padding:18px}
  .invite-fields{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  /* .posts.related outranks a bare .posts, so it has to be named to stack */
  .steps,.agents,.posts,.posts.related{grid-template-columns:1fr}
  .td-rows li{grid-template-columns:1fr;gap:5px;padding:14px 16px}
  .td-v{text-align:left;justify-self:start}
  .td-head{padding:14px 16px}
  .td-tabs{margin-left:0;width:100%}
  .td-tabs button{flex:1}
  .foot-in{grid-template-columns:1fr;gap:32px}
  .foot-cols{grid-template-columns:1fr;gap:28px}
  .post-lead{grid-template-columns:1fr}
  /* copy under the cover on narrow screens, same order as the other cards */
  .lead-copy{order:2;padding:0}
  /* dot separators read as bullets once the meta stacks, so drop them */
  .art-sub{flex-direction:column;align-items:flex-start;gap:6px}
  .art-sub .art-dot{display:none}
  .prose p,.prose li{font-size:16.5px}
  .quote{width:270px}
  .brand-beta{display:none}
  /* no room for the invite pill beside the brand — the menu holds it instead */
  .nav-right .btn,.nav-right .submenu{display:none}
  .nav-cta{display:inline-flex;align-self:flex-start;margin-top:8px}
  /* the menu's copy of Add to Browser is a disclosure, so it stacks its panel */
  .submenu.nav-cta{display:block}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .rv{opacity:1;transform:none}
}
