/* ==========================================================================
     Simple Follow Buttons: cool paper by default, with one blue accent.
     [data-theme="dark"] swaps to hue-neutral graphite. The token block below is the
     dark set; the light set that overrides it is the default the markup ships with.
     Deliberately restrained: a single saturated accent, a same-hue button ledge,
     and amber reserved for section marks. Every colour is a token so both themes
     stay in sync, and every text pair clears WCAG AA.

     The one place brand colour runs free is the button previews, which take the
     51 network colours straight from the plugin.
     ========================================================================== */
  :root{
    --bg:#15181D;
    --bg-deep:#0F1216;
    --surface:#1E222A;
    --surface-2:#272C35;
    --line:#333A45;
    --line-soft:#262B33;
    --text:#F3F5F8;
    --muted:#A6AEBA;

    --accent:#2F66EA;        /* blue: fills, borders, large display text */
    --accent-ink:#FFFFFF;    /* text on the accent */
    --accent-text:#8FB3FF;   /* the accent as small text on a dark ground */
    --ledge:#1B44B0;         /* deeper accent, raised-button ledge */
    --accent-2:#E8B33E;      /* amber: swash, section marks */
    --accent-2-ink:#2A1E00;
    --accent-3:#2FB47C;      /* green: pills */
    --accent-3-ink:#032418;

    --accent-wash:rgba(47,102,234,0.16);
    --glow-1:rgba(47,102,234,0.10);
    --glow-2:rgba(255,255,255,0.03);
    --hard:rgba(0,0,0,0.55);
    --tile-ring:rgba(255,255,255,0.20);

    /* Code panels stay dark in both themes: a shortcode reads as something you
       type, and inverting it with the page would make it look like body copy. */
    --code-bg:#0F1216;
    --code-line:#2A313B;
    --code-text:#E9EDF3;

    /* The preview stages read as "your page", so they stay paper-white in both
       themes: brand colours are drawn for a light content area, and a dark
       stage would misrepresent how the buttons land on a real site. */
    --stage:#FFFFFF;
    --stage-line:#D8E0EA;
    --stage-text:#131822;
    --stage-muted:#5B6675;

    --maxw:1120px;
    --ff-display:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
    --ff-body:'Plus Jakarta Sans',system-ui,sans-serif;
    --ff-mono:'JetBrains Mono',ui-monospace,monospace;
  }

  [data-theme="light"]{
    --bg:#F6F8FB;
    --bg-deep:#EAEFF6;
    --surface:#FFFFFF;
    --surface-2:#EDF2F9;
    --line:#D8E0EA;
    --line-soft:#E8EEF5;
    --text:#131822;
    --muted:#5B6675;

    --accent:#1F55D6;
    --accent-ink:#FFFFFF;
    --accent-text:#1F55D6;
    --ledge:#143C9E;
    --accent-2:#E1A62A;
    --accent-2-ink:#2A1E00;
    --accent-3:#0A7A54;
    --accent-3-ink:#FFFFFF;

    --accent-wash:rgba(31,85,214,0.10);
    --glow-1:rgba(31,85,214,0.08);
    --glow-2:rgba(0,0,0,0.02);
    --hard:rgba(19,24,34,0.16);
    --tile-ring:rgba(0,0,0,0.16);
  }

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

  body{
    margin:0;
    font-family:var(--ff-body);
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    background-image:
      radial-gradient(760px 420px at 12% -6%, var(--glow-1), transparent 70%),
      radial-gradient(620px 380px at 92% 4%, var(--glow-2), transparent 70%);
    background-repeat:no-repeat;
  }
  a{ color:inherit; }
  button{ font-family:inherit; }
  :focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
  code, .mono{ font-family:var(--ff-mono); }

  h1,h2,h3,h4{ font-family:var(--ff-display); }

  /* ---------- Logo ----------
     The mark is the logo's button-and-check, drawn as one accent-coloured
     shape; the wordmark is live text so it inherits the theme and needs no
     second asset. The two lines are tuned to the same width, as in the
     printed logo. */
  .logo{
    display:inline-flex; align-items:center; gap:11px;
    text-decoration:none; flex-shrink:0; color:var(--text);
  }
  .logo-word{ display:flex; flex-direction:column; line-height:1; }
  .logo-word span{ font-family:var(--ff-display); text-transform:uppercase; display:block; }
  .logo-top{ font-size:13.5px; font-weight:500; letter-spacing:0.055em; }
  .logo-bottom{ font-size:26px; font-weight:800; letter-spacing:-0.01em; margin-top:2px; }
  .logo-mark{ width:44px; height:44px; flex-shrink:0; color:var(--accent); }
  /* the notch between button and badge is punched in the page colour */
  .logo-mark .notch{ stroke:var(--bg); }
  header .logo-mark .notch{ stroke:var(--bg); }
  footer .logo-mark .notch{ stroke:var(--bg-deep); }
  .footer-brand .logo-top{ font-size:11.5px; }
  .footer-brand .logo-bottom{ font-size:22px; }
  .footer-brand .logo-mark{ width:38px; height:38px; }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0;
    background:var(--bg);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(12px) saturate(1.3);
    border-bottom:1px solid var(--line);
    z-index:50;
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:88px; gap:16px; }
  .nav-links{ display:flex; align-items:center; gap:8px; font-size:14.5px; }
  .nav-links a{
    text-decoration:none; color:var(--muted); font-weight:600;
    padding:8px 12px; border-radius:8px; transition:color .15s ease, background .15s ease;
  }
  .nav-links a:hover{ color:var(--text); background:var(--surface); }
  .nav-cta{
    background:var(--accent) !important; color:var(--accent-ink) !important;
    padding:10px 18px !important; border-radius:999px !important; font-weight:800 !important;
    transition:transform .15s ease, box-shadow .15s ease !important;
    box-shadow:0 3px 0 0 var(--ledge);
  }
  .nav-cta{ white-space:nowrap; }
  .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 5px 0 0 var(--ledge); }

  .theme-toggle{
    width:38px; height:38px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--line);
    border-radius:10px; cursor:pointer; color:var(--text);
    transition:border-color .15s ease, color .15s ease, transform .15s ease;
  }
  .theme-toggle:hover{ border-color:var(--accent); color:var(--accent-text); transform:rotate(-12deg); }
  .theme-toggle svg{ width:17px; height:17px; }
  .theme-toggle .icon-sun{ display:none; }
  .theme-toggle .icon-moon{ display:block; }
  [data-theme="light"] .theme-toggle .icon-sun{ display:block; }
  [data-theme="light"] .theme-toggle .icon-moon{ display:none; }
  @media (max-width:880px){ .nav-links a:not(.nav-cta){ display:none; } }

  /* ---------- Hero ---------- */
  .hero-intro{ padding:76px 0 48px; }
  .eyebrow{
    font-size:12.5px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
    color:var(--accent-text); background:var(--accent-wash);
    border:1px solid var(--accent);
    border-color:color-mix(in srgb, var(--accent) 32%, transparent);
    padding:7px 15px; border-radius:999px;
  }
  .eyebrow::before{
    content:''; width:7px; height:7px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-wash);
  }
  h1{
    font-weight:800; font-size:clamp(44px, 7.6vw, 88px); line-height:0.92;
    letter-spacing:-0.045em; margin:0 0 22px; max-width:20ch;
  }
  h1 .swash{ color:var(--accent); position:relative; white-space:nowrap; }
  h1 .swash::after{
    content:''; position:absolute; left:0; right:0; bottom:0.04em; height:0.12em;
    background:var(--accent-2); border-radius:999px;
  }
  .hero-sub{ font-size:18.5px; color:var(--muted); max-width:56ch; margin:0; font-weight:500; }
  .hero-sub strong{ color:var(--text); font-weight:800; }

  .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
  .btn-primary, .btn-ghost{
    display:inline-flex; align-items:center; gap:9px; text-decoration:none;
    padding:14px 24px; border-radius:999px; font-size:15.5px; font-weight:800;
    letter-spacing:-0.01em; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 4px 0 0 var(--ledge); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 0 0 var(--ledge); }
  .btn-ghost{ background:var(--surface); color:var(--text); border:2px solid var(--line); }
  .btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent); }
  .btn-primary svg, .btn-ghost svg{ width:15px; height:15px; }

  /* ---------- Configurator ----------
     A read-only walk through the plugin's settings screen: every control on the
     left is a field in the dashboard, and the right shows what it does.
  ------------------------------------ */
  .builder{
    display:grid; grid-template-columns:352px 1fr; gap:0;
    border:2px solid var(--line); border-radius:22px; overflow:hidden;
    margin-top:48px; background:var(--surface);
    box-shadow:0 10px 0 -2px var(--hard);
  }
  .builder-left{
    padding:30px; border-right:2px solid var(--line);
    background:var(--bg-deep);
    display:flex; flex-direction:column; gap:26px;
  }
  .builder-right{
    padding:30px 34px 34px; display:flex; flex-direction:column; gap:20px; min-width:0;
  }
  @media (max-width:900px){
    .builder{ grid-template-columns:1fr; }
    .builder-left{ border-right:none; border-bottom:2px solid var(--line); }
  }

  .control-block{ display:flex; flex-direction:column; gap:11px; }
  .control-label{
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em;
    color:var(--text); display:inline-flex; align-items:center; gap:8px;
  }
  .control-label::before{
    content:''; width:14px; height:3px; border-radius:999px; background:var(--accent-2);
  }
  .chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
  .chip{
    font-size:12.5px; font-weight:700; padding:7px 13px;
    border:1.5px solid var(--line); background:var(--surface); border-radius:999px;
    cursor:pointer; color:var(--muted);
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    display:inline-flex; align-items:center; gap:7px;
  }
  .chip:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-1px); }
  .chip.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .chip--net{ padding:5px 13px 5px 6px; gap:8px; }
  .chip-icon{
    width:19px; height:19px; flex:0 0 auto; color:#fff;
    border-radius:5px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 1px var(--tile-ring) inset;
  }
  .chip-icon svg{ display:block; width:62%; height:62%; }

  .more-row{
    display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .22s ease, opacity .18s ease, margin-top .22s ease;
    margin-top:-11px;
  }
  .more-row > .chip-row-inner{ overflow:hidden; display:flex; flex-wrap:wrap; gap:7px; }
  .more-row.expanded{ grid-template-rows:1fr; opacity:1; margin-top:0; }
  .more-toggle{
    display:inline-flex; align-items:center; gap:7px;
    font-size:12.5px; font-weight:800; color:var(--accent-text);
    background:none; border:none; padding:2px 0; cursor:pointer;
    align-self:flex-start; transition:gap .15s ease;
  }
  .more-toggle:hover{ gap:11px; }
  .more-toggle svg{ width:13px; height:13px; transition:transform .22s ease; }
  .more-toggle.expanded svg{ transform:rotate(180deg); }

  .control-note{
    font-size:12px; color:var(--muted); margin:0; line-height:1.55; font-weight:500;
    padding:10px 12px; border-radius:10px;
    background:color-mix(in srgb, var(--accent-2) 12%, transparent);
    border-left:3px solid var(--accent-2);
  }

  /* ---------- Right pane ---------- */
  .preview-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  }
  .preview-title{ font-size:20px; font-weight:800; margin:0; letter-spacing:-0.025em; }
  .preview-theme{
    font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--accent-text); background:var(--accent-wash);
    padding:5px 12px; border-radius:999px;
  }
  .preview-note{ font-size:13px; color:var(--muted); margin:0; font-weight:500; }

  .stage{
    flex:1;
    border:2px dashed var(--line); border-radius:16px; padding:26px;
    background:var(--stage); color:var(--stage-text);
    min-height:150px; display:flex; flex-direction:column;
    overflow-x:auto;
  }
  .stage-caption{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--stage-muted); margin:0 0 16px;
  }
  .preview{ display:flex; }
  .preview--left{ justify-content:flex-start; }
  .preview--center{ justify-content:center; }
  .preview--right{ justify-content:flex-end; }
  .preview-wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; }
  .preview-follow-text{
    font-family:'Indie Flower','Bradley Hand',cursive; font-size:24px;
    color:var(--stage-text); line-height:1; flex-shrink:0;
  }
  .preview-empty{ margin:0; color:var(--stage-muted); font-size:14px; font-weight:600; }

  .steps-block{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
  .steps-title{
    font-family:var(--ff-body);
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em;
    color:var(--text); display:inline-flex; align-items:center; gap:8px; margin:0;
  }
  .steps-title::before{
    content:''; width:14px; height:3px; border-radius:999px; background:var(--accent-2);
  }
  .steps{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
  .steps li{
    display:flex; gap:12px; font-size:14px; color:var(--muted);
    align-items:flex-start; font-weight:500;
  }
  .steps li .n{
    flex-shrink:0; width:24px; height:24px; border-radius:8px;
    background:var(--accent-wash); border:1.5px solid var(--accent);
    border-color:color-mix(in srgb, var(--accent) 40%, transparent);
    font-family:var(--ff-display); font-size:12px; font-weight:800; color:var(--accent-text);
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .steps li span.t{ color:var(--text); font-weight:800; }
  .steps code{
    font-size:12.5px; background:var(--surface-2); color:var(--text);
    padding:2px 6px; border-radius:5px;
  }

  /* ==========================================================================
     The buttons themselves.

     Ported from the plugin's eleven theme stylesheets plus css/theme-fixes.css,
     condensed into one rule set. Each button carries the network's brand colour
     as --fb-color and a darkened, readable version as --fb-ink; a theme decides
     which of the two it paints with. That is the same split the plugin makes,
     so a theme here behaves as it does on a real install.
     ========================================================================== */
  .fbtn-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }
  .fbtn{
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--fb-size); height:var(--fb-size);
    color:#fff; background:var(--fb-color);
    text-decoration:none; flex-shrink:0;
    transition:background-color .25s, color .25s, border-color .25s, transform .15s ease, box-shadow .15s ease;
  }
  .fbtn-icon{ display:flex; align-items:center; justify-content:center; }
  .fbtn-icon svg{
    display:block; width:var(--fb-icon-size); height:var(--fb-icon-size);
  }
  .fbtn-name{
    font-family:var(--ff-body); font-size:12px; font-weight:700; white-space:nowrap;
  }

  /* 1 Round: a circle that inverts to white on hover, glyph darkening with it */
  .fbtn-row--t1{ gap:12px; }
  .fbtn-row--t1 .fbtn{ border-radius:50%; }
  .fbtn-row--t1 .fbtn:hover{ background:#fff; color:var(--fb-ink); box-shadow:0 0 0 1px var(--fb-ink); }

  /* 2 Square: the same button with the corners left sharp, flush to its neighbour */
  .fbtn-row--t2{ gap:0; }
  .fbtn-row--t2 .fbtn:hover{ transform:scale(1.12); z-index:2; }

  /* 3 Logo Name: a solid bar carrying icon and name, buttons flush */
  .fbtn-row--t3{ gap:0; }
  .fbtn-row--t3 .fbtn{
    width:auto; height:auto; gap:.5em; padding:.5em 1em;
    text-shadow:-1px -1px rgba(0,0,0,0.2);
  }
  .fbtn-row--t3 .fbtn:hover{ filter:brightness(1.12); }

  /* 4 Rounded: soft tiles with the theme's inner highlight */
  .fbtn-row--t4 .fbtn{
    border-radius:7.5px; box-shadow:inset 0 -1.5em 2em rgba(255,255,255,0.1);
  }
  .fbtn-row--t4 .fbtn:hover{
    box-shadow:inset 0 -1.5em 2em rgba(255,255,255,0.1), inset 0 0 3.5em rgba(0,0,0,0.33);
  }

  /* 5 3D: a wide button on a ledge that presses in when clicked */
  .fbtn-row--t5 .fbtn{
    width:calc(var(--fb-size) * 1.34);
    box-shadow:0 4px 0 0 rgba(0,0,0,0.28);
  }
  .fbtn-row--t5 .fbtn:active{ transform:translateY(4px); box-shadow:none; }

  /* 6 Border Round: an outlined circle that fills in on hover */
  .fbtn-row--t6 .fbtn{
    border-radius:50%; background:transparent;
    border:2px solid currentColor; color:var(--fb-ink);
  }
  .fbtn-row--t6 .fbtn:hover{ background:var(--fb-color); border-color:var(--fb-color); color:#fff; }

  /* 7 Border Logo Name: the same outline, with the name printed underneath */
  .fbtn-row--t7{ gap:14px; }
  .fbtn-row--t7 .fbtn{
    flex-direction:column; gap:8px;
    width:auto; height:auto; min-width:calc(var(--fb-size) * 1.6);
    padding:.55em .9em; background:transparent;
    border:2px solid currentColor; color:var(--fb-ink);
  }
  .fbtn-row--t7 .fbtn:hover{ background:var(--fb-color); border-color:var(--fb-color); color:#fff; }

  /* 8 Black Border: heavy outline, inverting to black */
  .fbtn-row--t8 .fbtn{
    width:calc(var(--fb-size) * 1.34);
    background:transparent; border:3px solid #272727; color:#272727;
  }
  .fbtn-row--t8 .fbtn:hover{ background:#272727; color:#fff; }

  /* 9 Underline: no button, just the underlined glyph */
  .fbtn-row--t9{ gap:14px; }
  .fbtn-row--t9 .fbtn{
    width:auto; height:auto; padding:.4em .6em .3em;
    background:transparent; color:var(--fb-ink);
    border-bottom:2px solid currentColor;
  }
  .fbtn-row--t9 .fbtn:hover{ opacity:.66; }

  /* 10 Auto Square: flush bars that stretch to fill the width they are given */
  .fbtn-row--t10{ gap:0; width:100%; flex-wrap:nowrap; }
  .fbtn-row--t10 .fbtn{
    flex:1 1 0; min-width:0; width:auto; padding:.5em 1em;
  }
  .fbtn-row--t10 .fbtn:hover{ filter:brightness(1.12); }

  /* 11 Name: the network name on its own */
  .fbtn-row--t11{ gap:10px; }
  .fbtn-row--t11 .fbtn{
    width:auto; height:auto; padding:.6em 1em; border-radius:5px;
    text-transform:uppercase;
  }
  .fbtn-row--t11 .fbtn-name{ font-size:11px; font-weight:800; letter-spacing:0.04em; }
  .fbtn-row--t11 .fbtn:hover{ filter:brightness(1.12); }

  /* ---------- Trust line ---------- */
  .trust-line{
    padding:60px 0; text-align:center;
    border-top:2px solid var(--line); border-bottom:2px solid var(--line);
    margin-top:64px; background:var(--surface);
  }
  .trust-line p{
    font-family:var(--ff-display); font-size:clamp(24px,3.6vw,40px); font-weight:800;
    letter-spacing:-0.035em; margin:0; color:var(--text); line-height:1.1;
  }
  .trust-line span{ color:var(--muted); }
  .trust-line b{ color:var(--accent); }

  /* ---------- Section furniture ---------- */
  .section-head{ margin-bottom:44px; max-width:52ch; }
  .kicker{
    font-size:12.5px; font-weight:800; color:var(--accent-text);
    text-transform:uppercase; letter-spacing:0.09em; margin-bottom:12px;
  }
  h2{
    font-size:clamp(28px, 4.2vw, 46px); font-weight:800;
    letter-spacing:-0.04em; margin:0; line-height:1.02;
  }
  .section-head p{ color:var(--muted); font-size:16px; margin:14px 0 0; font-weight:500; }

  /* ---------- Features ---------- */
  section.features{ padding:84px 0; }
  .feature-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
  .feature{
    background:var(--surface); padding:32px 28px;
    border:2px solid var(--line); border-radius:18px;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .feature:hover{
    transform:translate(-2px,-2px);
    box-shadow:6px 6px 0 0 var(--hard);
    border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  }
  .feature-icon{
    width:46px; height:46px; border-radius:13px;
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  }
  .feature-icon svg{ width:21px; height:21px; }
  .feature:nth-child(1) .feature-icon{ background:var(--accent);   color:var(--accent-ink); }
  .feature:nth-child(2) .feature-icon{ background:var(--accent-2); color:var(--accent-2-ink); }
  .feature:nth-child(3) .feature-icon{ background:var(--accent-3); color:var(--accent-3-ink); }
  .feature:nth-child(4) .feature-icon{ background:var(--text);     color:var(--bg); }
  .feature h3{ font-size:18.5px; font-weight:800; margin:0 0 9px; letter-spacing:-0.025em; }
  .feature p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; font-weight:500; }
  .feature code{
    font-size:12.5px; background:var(--surface-2); color:var(--text);
    padding:2px 6px; border-radius:5px;
  }
  @media (max-width:760px){ .feature-grid{ grid-template-columns:1fr; } }

  /* ---------- Shortcodes ---------- */
  section.shortcodes{ padding:84px 0; }
  .sc-grid{ display:grid; grid-template-columns:1fr minmax(0,340px); gap:16px; align-items:start; }
  .sc-list{ display:grid; gap:16px; }
  .sc-item{
    background:var(--surface); border:2px solid var(--line); border-radius:18px;
    padding:26px 28px;
  }
  .sc-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; margin-bottom:14px;
  }
  .sc-head h3{ font-size:18px; font-weight:800; margin:0; letter-spacing:-0.025em; }
  .sc-tag{
    flex-shrink:0; font-size:10.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:0.08em; padding:5px 11px; border-radius:999px;
    color:var(--accent-text); background:var(--accent-wash);
  }
  .sc-code{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    border-radius:12px; background:var(--code-bg); border:1.5px solid var(--code-line);
    padding:13px 15px; margin-bottom:14px;
  }
  .sc-code code{
    font-size:14.5px; font-weight:500; color:var(--code-text);
    overflow-x:auto; white-space:nowrap; flex:1; min-width:0;
  }
  .copy-btn{
    flex-shrink:0; background:transparent; border:1.5px solid var(--code-line);
    color:var(--code-text); font-size:12.5px; font-weight:800;
    padding:7px 15px; border-radius:999px; cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .copy-btn:hover{ border-color:var(--accent); color:#8FB3FF; }
  .copy-btn.copied{ background:var(--accent-3); border-color:var(--accent-3); color:var(--accent-3-ink); }
  .sc-item p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; font-weight:500; }
  .sc-item p + p{ margin-top:10px; }
  .sc-item b{ color:var(--text); font-weight:800; }
  .sc-item code{
    font-family:var(--ff-mono); font-size:12.5px;
    background:var(--surface-2); color:var(--text);
    padding:2px 6px; border-radius:5px;
  }
  .sc-tip{
    padding:11px 13px; border-radius:10px;
    background:color-mix(in srgb, var(--accent-2) 12%, transparent);
    border-left:3px solid var(--accent-2);
    font-size:13.5px !important;
  }
  .sc-tip em{ color:var(--text); font-style:normal; font-weight:800; }

  .sc-aside{
    background:var(--bg-deep); border:2px solid var(--line); border-radius:18px;
    padding:26px 28px; position:sticky; top:112px;
  }
  .sc-aside h3{
    font-family:var(--ff-body);
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em;
    color:var(--text); display:flex; align-items:center; gap:8px; margin:0 0 18px;
  }
  .sc-aside h3::before{
    content:''; width:14px; height:3px; border-radius:999px; background:var(--accent-2);
  }
  .sc-steps{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:14px; counter-reset:sc; }
  .sc-steps li{
    display:flex; gap:12px; font-size:14px; color:var(--muted);
    align-items:flex-start; font-weight:500; line-height:1.55;
    counter-increment:sc;
  }
  .sc-steps li::before{
    content:counter(sc);
    flex-shrink:0; width:24px; height:24px; border-radius:8px;
    background:var(--accent-wash); border:1.5px solid var(--accent);
    border-color:color-mix(in srgb, var(--accent) 40%, transparent);
    font-family:var(--ff-display); font-size:12px; font-weight:800; color:var(--accent-text);
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .sc-steps .t{ color:var(--text); font-weight:800; }
  .sc-steps b{ color:var(--text); font-weight:800; }
  .sc-note{
    margin:0; padding-top:16px; border-top:2px solid var(--line);
    font-size:13.5px; color:var(--muted); line-height:1.6; font-weight:500;
  }
  .sc-note b{ color:var(--text); font-weight:800; }
  @media (max-width:860px){
    .sc-grid{ grid-template-columns:1fr; }
    .sc-aside{ position:static; }
  }

  /* ---------- Theme gallery ---------- */
  section.themes{ padding:84px 0; }
  .theme-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  .theme-card{
    border:2px solid var(--line); border-radius:18px; overflow:hidden;
    background:var(--surface); display:flex; flex-direction:column;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .theme-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--hard); }
  .theme-stage{
    background:var(--stage); border-bottom:2px solid var(--line);
    padding:26px 22px; min-height:132px;
    display:flex; align-items:center; justify-content:center;
  }
  .theme-stage .fbtn-row{ justify-content:center; }
  .theme-meta{ padding:20px 22px 22px; }
  .theme-meta h3{ font-size:16.5px; font-weight:800; margin:0 0 6px; letter-spacing:-0.02em; }
  .theme-meta p{ color:var(--muted); font-size:13.5px; margin:0; line-height:1.55; font-weight:500; }
  @media (max-width:900px){ .theme-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .theme-grid{ grid-template-columns:1fr; } }

  /* ---------- Network directory ---------- */
  section.networks{ padding:84px 0; }
  .net-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:10px;
  }
  .net{
    display:flex; align-items:center; gap:12px; min-width:0;
    background:var(--surface); border:2px solid var(--line); border-radius:14px;
    padding:11px 14px;
  }
  .net-icon{
    width:34px; height:34px; border-radius:9px; flex-shrink:0; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 1px var(--tile-ring) inset;
  }
  .net-icon svg{ display:block; width:58%; height:58%; }
  .net-body{ display:flex; flex-direction:column; min-width:0; }
  .net-name{ font-size:14px; font-weight:700; letter-spacing:-0.01em; }
  .net-hint{
    font-family:var(--ff-mono); font-size:11px; color:var(--muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* ---------- What's new ---------- */
  section.whatsnew{ padding:84px 0; }
  .release-card{
    border:2px solid var(--line); border-radius:24px;
    background:var(--surface); padding:44px 48px;
    box-shadow:10px 10px 0 -2px var(--hard);
    display:grid; grid-template-columns:minmax(0,26ch) 1fr; gap:44px; align-items:start;
  }
  .tag-pill{
    display:inline-flex; font-size:11.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:0.08em; padding:6px 14px; border-radius:999px;
    background:var(--accent-3); color:var(--accent-3-ink); margin-bottom:18px;
  }
  .release-card h2{ font-size:clamp(26px,3.4vw,38px); margin-bottom:12px; }
  .release-card .release-blurb{ color:var(--muted); font-size:15px; margin:0; font-weight:500; }
  .release-list{ margin:0; padding:0; list-style:none; display:grid; gap:14px; }
  .release-list li{
    display:flex; gap:12px; align-items:flex-start;
    font-size:14.5px; color:var(--muted); font-weight:500; line-height:1.55;
  }
  .release-list li::before{
    content:''; flex-shrink:0; margin-top:8px;
    width:8px; height:8px; border-radius:50%; background:var(--accent-2);
  }
  .release-list b{ color:var(--text); font-weight:800; }
  @media (max-width:820px){
    .release-card{ grid-template-columns:1fr; gap:28px; padding:34px; }
  }

  /* ---------- WordPress card ---------- */
  .wordpress-plugin{ padding:76px 0; }
  .wp-card{
    display:flex; align-items:center; justify-content:space-between; gap:44px;
    border:2px solid var(--line); border-radius:24px;
    background:var(--surface); padding:44px 48px;
    box-shadow:10px 10px 0 -2px var(--hard);
  }
  .wp-card-left{ max-width:46ch; }
  .wp-card-left h2{ margin-bottom:14px; }
  .wp-card-left p{ color:var(--muted); font-size:16px; margin:0 0 28px; font-weight:500; }
  .wp-btn{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--text); color:var(--bg); text-decoration:none;
    padding:14px 22px; border-radius:999px; font-size:15.5px; font-weight:800;
    letter-spacing:-0.01em;
    transition:transform .15s ease, box-shadow .15s ease;
    box-shadow:0 4px 0 0 var(--ledge);
  }
  .wp-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 0 var(--ledge); }
  .wp-btn svg{ width:15px; height:15px; }
  .wp-card-right{ display:flex; gap:36px; flex-shrink:0; }
  .wp-stat{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .wp-stat-num{
    font-family:var(--ff-display); font-size:clamp(30px,4vw,44px); font-weight:800;
    letter-spacing:-0.04em; color:var(--accent); line-height:1;
  }
  .wp-stat-label{
    font-size:11.5px; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.06em; margin-top:9px; white-space:nowrap;
  }
  @media (max-width:820px){
    .wp-card{ flex-direction:column; align-items:flex-start; padding:34px; }
    .wp-card-right{ width:100%; justify-content:space-between; gap:16px; }
  }

  /* ---------- FAQ ---------- */
  section.faq{ padding:84px 0; }
  .faq-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
  .faq-item{
    background:var(--surface); padding:28px 26px;
    border:2px solid var(--line); border-radius:18px;
  }
  .faq-item h3{
    font-size:17.5px; font-weight:800; margin:0 0 10px; letter-spacing:-0.02em;
    line-height:1.3;
  }
  .faq-item p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; font-weight:500; }
  .faq-item p + p{ margin-top:10px; }
  .faq-item code{
    font-size:12.5px; background:var(--surface-2); color:var(--text);
    padding:2px 6px; border-radius:5px;
  }
  .faq-item b{ color:var(--text); font-weight:800; }
  @media (max-width:760px){ .faq-grid{ grid-template-columns:1fr; } }

  /* ---------- Heritage ---------- */
  .heritage{ padding:64px 0; }
  .heritage .wrap{ max-width:760px; }
  .heritage p{
    font-family:var(--ff-display); color:var(--muted); font-size:clamp(17px,2.2vw,22px);
    margin:0; text-align:center; line-height:1.5; font-weight:500; letter-spacing:-0.02em;
  }
  .heritage p span{ color:var(--accent); font-weight:800; }

  /* ---------- Footer ---------- */
  footer{ padding:60px 0 34px; border-top:2px solid var(--line); background:var(--bg-deep); }
  .footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; margin-bottom:38px; }
  .footer-brand .logo{ margin-bottom:14px; }
  .footer-brand p{ color:var(--muted); font-size:14.5px; max-width:32ch; margin:0; font-weight:500; }
  .footer-links{ display:flex; gap:56px; }
  .footer-col h5{
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em;
    color:var(--accent-text); margin:0 0 16px;
  }
  .footer-col a{
    display:block; font-size:14.5px; font-weight:600; text-decoration:none;
    color:var(--text); margin-bottom:11px; transition:color .15s ease;
  }
  .footer-col a:hover{ color:var(--accent-text); }
  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding-top:26px; border-top:2px solid var(--line); font-size:13px;
    color:var(--muted); font-weight:600;
  }
  .powered-by{
    display:flex; align-items:center; gap:8px;
    text-decoration:none; color:inherit; transition:color .15s ease;
  }
  .powered-by:hover{ color:var(--text); }
  .powered-by .st-mark{
    width:16px; height:16px; border-radius:5px; background:var(--accent-3); display:inline-block;
  }
  @media (max-width:600px){ .footer-links{ gap:32px; } .footer-top{ flex-direction:column; } }

  @media (max-width:560px){
    .nav-cta{ display:none; }
    .nav{ height:72px; gap:10px; }
    .logo-top{ font-size:11px; }
    .logo-bottom{ font-size:21px; }
    .logo-mark{ width:36px; height:36px; }
    .theme-toggle{ width:34px; height:34px; }

    .wp-card-right{ flex-direction:column; align-items:flex-start; gap:22px; }
    .wp-stat{ align-items:flex-start; text-align:left; }
    .wp-stat-label{ white-space:normal; }

    .sc-item, .sc-aside{ padding:22px; }
    .sc-code{ flex-direction:column; align-items:stretch; gap:11px; }
    .copy-btn{ width:100%; }

    .builder-left{ padding:22px; }
    .builder-right{ padding:22px 20px 26px; }
    .stage{ padding:20px 16px; }
  }