/* ===== Self-hosted IBM Plex (OFL-1.1) =====
 * Replaces the Google Fonts <link> that used to sit in layouts/application.html.erb.
 * Every page view handed the visitor's IP to fonts.googleapis.com and fonts.gstatic.com
 * before any consent banner could appear — see docs/dev/privacy-compliance-web-plan.md §2.7.
 *
 * Weights mirror what the Google link requested, exactly, so rendering does not change:
 * Sans 400/500 + italic 400/500, Serif 400/500 + italic 400. Google serves one file for
 * both Sans weights and declares it twice; we do the same rather than shipping it twice.
 *
 * NOTE: marketing.css sets font-weight:600 in 25 places and no 600 face is loaded — here
 * or before this change. Those render as a synthesised bold. Left alone deliberately;
 * shipping a real 600 would alter the design, which is not this change's job.
 *
 * Served from public/fonts by the static handler, matching /marketing/marketing.js.
 * Subsets: latin + latin-ext only. CJK, Korean and Arabic fall back to system faces,
 * exactly as they did before.
 */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/ibm-plex-sans-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-serif-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-serif-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-serif-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/ibm-plex-serif-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/ibm-plex-serif-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/ibm-plex-serif-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Slima marketing design system - ported verbatim from the demo (preview.css + assemble.css) */
:root{
    --bg:#ffffff; --soft:#faf9f6; --warm:#f3f1ec; --dark:#0a0a0a;
    --ink:#0a0a0a; --ink2:#2a2a2e; --ink3:#5a5a60; --ink4:#8a8a8e;
    --line:#ececea; --line2:#f0eee9; --indigo:#6366f1; --green:#4ea87a; --amber:#d97706; --red:#d0463a;
    --serif:'IBM Plex Serif',Georgia,serif; --sans:'Inter',-apple-system,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.015em;line-height:1.06}
  h1 em,h2 em,h3 em,.head h2 em,.ftext h3 em{font-style:italic;font-weight:400}
  em{font-style:italic}
  a{text-decoration:none;color:inherit}
  .eyebrow{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink4)}
  .lead{font-size:18px;line-height:1.6;color:var(--ink3)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:14px;padding:13px 24px;border-radius:999px;transition:.2s;cursor:pointer;border:1px solid transparent}
  .btn-dark{background:var(--dark);color:#fff}.btn-dark:hover{background:#2a2a2a;transform:translateY(-2px)}
  .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{background:var(--soft);transform:translateY(-2px)}
  .btn-light{background:#fff;color:var(--ink)}.btn-light:hover{transform:translateY(-2px);background:#f1f1f1}
  section{position:relative}
  .arrow{width:14px;height:14px}

  /* NAV — scoped to the top-level site nav (direct child of body.a) so it never
     hits nested <nav> elements like pagy pagination, breadcrumbs, or sidebars. */
  .a > nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent}
  /* frosted backdrop layer: opaque white + blur at the top, fading to transparent at the bottom */
  .a > nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s ease;
    background:linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,0) 100%);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%)}
  .a > nav.scrolled::before{opacity:1}
  /* column-gap, not just space-between: when a locale fills the row the free space
     goes to zero and the wordmark ends up touching the first link. */
  .navin{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;column-gap:26px;height:68px}
  .brand{flex-shrink:0;display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:500;font-size:20px;color:var(--ink)}
  .brandlogo{height:26px;width:auto;display:block}
  .brandlogo.flip{filter:brightness(0) invert(1)}
  footer .bd .brandlogo{height:28px}
  .brand svg{height:24px;width:auto}
  .navlinks{display:flex;gap:30px;list-style:none;align-items:center}
  .navlinks a{font-size:15px;font-weight:500;color:var(--ink2);white-space:nowrap}.navlinks a:hover{color:var(--ink4)}
  .navlinks .navdd-btn{white-space:nowrap}
  /* off-site link (community/Discord): tiny arrow so it reads as leaving the site */
  .navext{display:inline-flex;align-items:center;gap:4px}
  .navext svg{width:11px;height:11px;opacity:.45;transition:opacity .15s}
  .navext:hover svg{opacity:.8}
  [dir="rtl"] .navext svg{transform:scaleX(-1)}
  /* This nav is label-width bound: the 1180px row leaves ~1116px of usable space and
     Spanish spends ~528px of it on labels alone. Shed gap and a point of type before
     the row gets tight enough to shrink the CTA into two lines. */
  @media(max-width:1080px){.navlinks{gap:18px}.navlinks a,.navlinks .navdd-btn{font-size:14px}}
  /* ja and ko write the same nav in noticeably more glyphs than en does, so they
     need the tighter spacing at every width rather than only below 1080. */
  html[lang="ja"] .a .navlinks{gap:16px}
  html[lang="ko"] .a .navlinks{gap:20px}
  html[lang="ja"] .a .navlinks a,
  html[lang="ja"] .a .navlinks .navdd-btn{font-size:14.5px}
  /* resources mega-dropdown */
  .navdd{position:relative}
  .navdd-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:15px;font-weight:500;color:var(--ink2);background:none;border:0;padding:0;cursor:pointer}
  .navdd-btn:hover{color:var(--ink4)}
  .navdd-btn .ddchev{width:12px;height:12px;transition:transform .25s}
  .navdd:hover .navdd-btn .ddchev,.navdd:focus-within .navdd-btn .ddchev{transform:rotate(180deg)}
  .navdd::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:18px}
  .navmenu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);min-width:480px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 34px 70px -34px rgba(20,20,50,.34);padding:18px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;z-index:60}
  .navdd:hover .navmenu,.navdd:focus-within .navmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .navmenu-inner{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
  .nm-col{display:flex;flex-direction:column}
  .nm-h{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);padding:6px 10px 8px}
  .navmenu a{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:11px;transition:background-color .15s}
  .navmenu a:hover{background:var(--soft)}
  .navmenu a b{font-family:var(--serif);font-weight:500;font-size:15.5px;color:var(--ink)}
  .navmenu a small{font-size:12.5px;color:var(--ink4)}
  /* The right-hand cluster must never wrap. The nav is a nowrap flex row inside a
     fixed 1180px container, so when a locale's link labels get long the browser
     shrinks whatever it can — and what it can shrink is the language button and
     the CTA, which then break onto three lines each and spill out of the bar.
     Japanese hit this at every desktop width (ライティングスタジオ / AI ベータリーダー /
     料金プラン put .navlinks at 827px on its own); ko and ar are close behind.
     Pinning the ends and letting only .navlinks give way is what keeps the bar
     one line in every locale. */
  .navright{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .navright .btn,.navright .langbtn,.navright .langcur{white-space:nowrap}
  .navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;padding:0 9px;transition-property:background-color,transform;transition-duration:.18s}
  .navtoggle:active{transform:scale(.96)}
  .navtoggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition-property:transform,opacity;transition-duration:.25s}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .navmobile{display:none;flex-direction:column;gap:2px;padding:6px 20px 18px;border-top:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(14px)}
  .navmobile a{padding:12px 8px;font-size:16px;font-weight:500;color:var(--ink2);border-radius:10px;transition-property:background-color;transition-duration:.15s}
  .navmobile a:hover{background:var(--soft)}
  .navmobile .btn{margin-top:10px;justify-content:center}
  .navmobile.open{display:flex}
  .lang{position:relative}
  .langbtn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink2);background:transparent;border:0;cursor:pointer;padding:8px 8px;border-radius:9px;transition-property:color,background-color;transition-duration:.15s}
  .langbtn:hover{color:var(--ink);background:var(--soft)}
  .langbtn svg{width:16px;height:16px}
  .langbtn .lchev{width:12px;height:12px;transition:transform .2s}
  .langbtn[aria-expanded="true"] .lchev{transform:rotate(180deg)}
  .langmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:168px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 22px 48px -26px rgba(0,0,0,.35);padding:6px;display:none;flex-direction:column;gap:1px;z-index:60}
  .langmenu.open{display:flex}
  .langmenu a{padding:10px 12px;border-radius:9px;font-size:14px;color:var(--ink2);transition-property:background-color,color;transition-duration:.14s}
  .langmenu a:hover{background:var(--soft);color:var(--ink)}
  .langmenu a.on{color:var(--indigo);font-weight:600}
  .langrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
  .langrow a{font-size:13px;font-weight:500;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
  .langrow a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  @media(max-width:860px){.navlinks{display:none}.navcta{display:none}.navright .lang{display:none}.navtoggle{display:flex}}

  /* HERO */
  .hero{position:relative;overflow:hidden;text-align:center;padding:120px 0 72px}
  .hero .wrap{position:relative;z-index:2}
  .hero-bg{position:absolute;inset:0;z-index:0;background:#ffffff;overflow:hidden}
  /* Moving gradient is pure CSS (animated blobs). The video is hidden: it would not autoplay on Safari and the frosted glass over its paused frame turned grey. */
  .hero-bg video{display:none}
  .hero-bg .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.72;will-change:transform}
  .hero-bg .b1{width:560px;height:560px;left:-6%;top:-22%;background:rgba(99,102,241,.62);animation:float 17s ease-in-out infinite}
  .hero-bg .b2{width:520px;height:520px;right:-4%;top:-12%;background:rgba(217,119,6,.5);animation:float 21s ease-in-out infinite reverse}
  .hero-bg .b3{width:600px;height:600px;left:34%;top:36%;background:rgba(168,85,247,.5);animation:float 25s ease-in-out infinite}
  /* plain white veil (NOT backdrop-filter, which renders grey on Safari) keeps it white-dominant */
  .hero-glass{position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.34)}
  .hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E")}
  .hero-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 45%,rgba(255,255,255,.45) 82%,#ffffff 100%)}
  .hero .pill,.hero h1,.hero .lead,.hero .hero-cta,.hero .trust{text-shadow:0 1px 22px rgba(255,255,255,.55)}
  @keyframes float{0%{transform:translate(0,0) scale(1)}33%{transform:translate(90px,46px) scale(1.16)}66%{transform:translate(-64px,72px) scale(.9)}100%{transform:translate(0,0) scale(1)}}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink3);background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:999px;margin-bottom:28px}
  .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
  .hero h1{font-size:clamp(40px,5.4vw,68px);max-width:22ch;margin:0 auto}
  .hero .lead{max-width:46ch;margin:22px auto 0}
  .hero-cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
  .trust{margin-top:30px;font-size:13px;color:var(--ink4)}

  /* LOGO STRIP */
  .logos{display:flex;gap:46px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 0 0;opacity:.7}
  .logos span{font-family:var(--serif);font-size:20px;color:#b4b2a9}

  /* PRODUCT MOCK */
  .shot{margin:56px auto 0;max-width:1000px;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.22);background:#fff}
  .shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
  .shot-bar i{width:10px;height:10px;border-radius:50%;background:#dcd9d2;display:inline-block}
  .shot-bar .u{margin-left:12px;font-size:12px;color:var(--ink4)}
  .shot-body{display:grid;grid-template-columns:200px 1fr 230px;min-height:300px}
  .sb-rail{border-inline-end:1px solid var(--line);padding:16px;font-size:12.5px;color:var(--ink3);background:#fff}
  .sb-rail .bk{font-family:var(--serif);font-size:14px;color:var(--ink);margin-bottom:14px}
  .sb-rail .r{padding:5px 8px;border-radius:7px;margin-bottom:2px}
  .sb-rail .r.on{background:var(--warm);color:var(--ink);font-weight:500}
  .sb-main{padding:22px 26px}
  .sb-main .tb{display:flex;gap:14px;font-size:11px;color:var(--ink4);letter-spacing:.08em;margin-bottom:16px}
  .sb-main p{font-size:13.5px;color:var(--ink2);line-height:1.7;margin-bottom:10px;max-width:46ch}
  .sb-coach{border-inline-start:1px solid var(--line);padding:18px;background:var(--soft);font-size:12px}
  .sb-coach .ch{display:flex;align-items:center;gap:9px;margin-bottom:14px}
  .sb-coach .av{width:30px;height:30px;border-radius:50%;background:var(--indigo)}
  .sb-coach .t{font-weight:600;font-size:12.5px}
  .sb-coach .st{font-size:9.5px;letter-spacing:.12em;color:var(--green)}
  .sb-coach .q{font-family:var(--serif);font-size:14px;color:var(--ink);margin-bottom:6px}
  .sb-coach .tag{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;margin:3px 4px 0 0;font-size:11px;color:var(--ink3)}
  @media(max-width:820px){.shot-body{grid-template-columns:1fr}.sb-rail,.sb-coach{display:none}}

  /* STATS */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat{text-align:center;padding:46px 24px}
  .stat+.stat{border-inline-start:1px solid var(--line)}
  .stat .n{font-family:var(--serif);font-size:clamp(38px,4vw,52px);line-height:1}
  .stat .l{font-size:13.5px;color:var(--ink3);margin-top:10px}
  @media(max-width:720px){.stats{grid-template-columns:1fr}.stat+.stat{border-inline-start:0;border-top:1px solid var(--line)}}

  /* SECTION HEAD */
  .sec{padding:104px 0}
  .sec.soft{background:var(--soft)}
  .sec.warm{background:var(--warm)}
  .sec.dark{background:var(--dark);color:#fff}
  .head{max-width:620px;margin-bottom:56px}
  .head.center{margin-left:auto;margin-right:auto;text-align:center}
  .head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
  .head .lead{margin-top:18px}
  .dark .head .lead,.dark .lead{color:rgba(255,255,255,.62)}
  .dark .eyebrow{color:rgba(255,255,255,.5)}

  /* FEATURE ROWS */
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:54px 0}
  .frow+.frow{border-top:1px solid var(--line)}
  .frow.flip .ftext{order:2}
  .ftext .k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);margin-bottom:16px}
  .ftext .k .d{width:7px;height:7px;border-radius:50%}
  .ftext h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px}
  .ftext p{font-size:16px;color:var(--ink3);max-width:42ch}
  .ftext ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px}
  .ftext li{display:flex;gap:10px;font-size:14px;color:var(--ink2)}
  .ftext li svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:2px}
  .fpanel{position:relative;border-radius:26px;padding:16px;background:linear-gradient(135deg,rgba(99,102,241,.30),rgba(168,85,247,.18) 45%,rgba(245,158,11,.20));border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);box-shadow:0 44px 90px -46px rgba(60,60,110,.6),inset 0 1px 0 rgba(255,255,255,.7)}
  .fpanel::before{content:"";position:absolute;inset:0;border-radius:26px;background:radial-gradient(70% 60% at 80% 0%,rgba(255,255,255,.5),transparent 60%);pointer-events:none}
  .fscreen{position:relative;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 22px 50px -26px rgba(20,20,50,.5)}
  .fscreen img{display:block;width:100%}
  .fscreen.sq video{width:100%;height:100%;object-fit:cover;display:block}
  .fscreen.sq img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  .fscreen .pad{padding:22px}
  .fscreen.sq{aspect-ratio:1/1}
  @media(max-width:820px){.fscreen.sq{aspect-ratio:4/3}}
  .mock{position:relative;width:100%;height:100%;padding:36px 34px;display:flex;flex-direction:column;overflow:hidden}
  .mock .m-h{font-family:var(--serif);font-size:18px;color:var(--ink)}
  .mock .m-sub{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);margin:5px 0 0}
  /* memory */
  .mem-list{display:flex;flex-direction:column;gap:7px;margin:auto 0}
  .mem-row{display:flex;align-items:center;gap:13px;padding:16px 14px;border-radius:13px;font-size:14px;color:var(--ink2);opacity:0;animation:memUp .6s ease forwards}
  .mem-row:nth-child(1){animation-delay:.15s}.mem-row:nth-child(2){animation-delay:.45s}.mem-row:nth-child(3){animation-delay:.75s}.mem-row:nth-child(4){animation-delay:1.05s}
  .mem-row.warn{background:rgba(217,119,6,.09)}
  .mem-row em{margin-inline-start:auto;font-style:normal;font-size:11px;color:var(--ink4);background:var(--soft);padding:3px 9px;border-radius:7px}
  .mem-row .d{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0;background:var(--green)}
  .mem-row .d.w{background:var(--amber)}
  .mem-beam{position:absolute;left:20px;right:20px;height:78px;border-radius:24px;background:linear-gradient(180deg,transparent,rgba(99,102,241,.13),transparent);top:72px;pointer-events:none;animation:beam 5s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes memUp{to{opacity:1;transform:none}}
  @keyframes beam{0%{transform:translateY(0)}50%{transform:translateY(240px)}100%{transform:translateY(0)}}
  /* beta */
  .bt-curve{position:relative;flex:1;min-height:130px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(99,102,241,.05),transparent);margin:18px 0}
  .bt-curve svg{position:absolute;inset:0;width:100%;height:100%}
  .bt-curve .ln{fill:none;stroke:var(--indigo);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s ease forwards}
  .bt-chip{position:absolute;left:60%;top:10px;font-size:10px;font-weight:600;color:#fff;background:var(--red);padding:3px 9px;border-radius:99px;animation:softpulse 2.4s ease-in-out infinite}
  .bt-readers{display:flex;flex-direction:column;gap:13px}
  .bt-r{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink2)}
  .bt-r .nm{width:88px;flex-shrink:0}
  .bt-r .tk{flex:1;height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
  .bt-r .fl{display:block;height:100%;border-radius:99px;background:var(--indigo);animation:grow 1.8s cubic-bezier(.3,0,.2,1) both}
  .bt-r .vv{width:30px;text-align:right;color:var(--ink4);font-size:12px}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes grow{from{width:0}}
  @keyframes softpulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
  /* version */
  .vc{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding-inline-start:8px}
  .vc-spine{position:absolute;left:7px;top:30px;bottom:30px;width:2px;background:var(--line)}
  .vc-pulse{position:absolute;left:2px;width:12px;height:12px;border-radius:50%;background:var(--indigo);filter:blur(2px);animation:vpulse 5s ease-in-out infinite}
  .vc-row{display:flex;align-items:center;gap:15px;padding:15px 0;position:relative;opacity:0;animation:memUp .6s ease forwards}
  .vc-row:nth-child(3){animation-delay:.15s}.vc-row:nth-child(4){animation-delay:.45s}.vc-row:nth-child(5){animation-delay:.75s}.vc-row:nth-child(6){animation-delay:1.05s}
  .vc-node{width:14px;height:14px;border-radius:50%;border:2px solid var(--indigo);background:#fff;flex-shrink:0;position:relative;z-index:2}
  .vc-row.main .vc-node{background:var(--indigo)}
  .vc-lbl{font-size:14px;color:var(--ink2)}
  .vc-tag{margin-inline-start:auto;font-size:10px;color:#fff;border-radius:99px;padding:3px 10px;background:var(--amber)}
  .vc-tag.main{background:var(--indigo)}.vc-tag.snap{background:#9a9aa0}
  @keyframes vpulse{0%{top:24px;opacity:0}15%{opacity:.7}85%{opacity:.7}100%{top:84%;opacity:0}}
  #features{position:relative;overflow:hidden;background:radial-gradient(46% 42% at 14% 18%,rgba(99,102,241,.12),transparent 60%),radial-gradient(46% 42% at 88% 64%,rgba(217,119,6,.10),transparent 60%),radial-gradient(50% 50% at 60% 110%,rgba(168,85,247,.10),transparent 60%),linear-gradient(180deg,#ffffff,#faf9f6)}
  @media(max-width:820px){.frow,.frow.flip .ftext{grid-template-columns:1fr;order:0;gap:30px}}

  /* mock card bits */
  .mc-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-bottom:14px}
  .mline{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line2);font-size:13px}
  .mline:first-of-type{border-top:0}
  .mline .ck{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
  .mline .mut{color:var(--ink4)}
  .reader{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line2);font-size:13px}
  .reader .ava{width:26px;height:26px;border-radius:50%;background:var(--warm)}
  .reader .sc{margin-inline-start:auto;font-size:12px;color:var(--ink4)}
  .curve{height:120px;border:1px solid var(--line);border-radius:12px;margin-top:14px;background:
     linear-gradient(180deg,rgba(99,102,241,.10),transparent);position:relative;overflow:hidden}
  .curve svg{position:absolute;inset:0;width:100%;height:100%}
  .branch{font-family:var(--sans);font-size:12.5px}
  .branch .b{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;margin-bottom:6px;border:1px solid var(--line)}
  .branch .b.cur{background:var(--soft)}
  .branch .b .tg{margin-inline-start:auto;font-size:10px;color:#fff;background:var(--amber);border-radius:999px;padding:2px 8px}
  .branch .b .tg.main{background:var(--indigo)}

  /* STUDIOS */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:820px){.grid3{grid-template-columns:1fr}}
  .scard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;transition:.2s}
  .scard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,0,0,.2)}
  .scard .ic{width:42px;height:42px;border-radius:11px;background:var(--warm);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .scard h3{font-size:21px;margin-bottom:8px}
  .scard p{font-size:14px;color:var(--ink3)}

  /* PRICING */
  .ptoggle{display:inline-flex;background:var(--warm);border-radius:999px;padding:4px;font-size:13px;margin-top:22px}
  .ptoggle span,.ptoggle button{padding:7px 16px;border-radius:999px;cursor:pointer;transition:background-color .2s,color .2s;border:0;background:transparent;font:inherit;color:inherit}.ptoggle button:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}.ptoggle .on{background:#fff;font-weight:600}
  .prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1360px;margin:0 auto}
  @media(max-width:1100px){.prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.prices{grid-template-columns:1fr}}
  .price{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px}
  .price.feat{border:2px solid var(--indigo);position:relative}
  .price .badge{position:absolute;top:-12px;inset-inline-end:24px;background:var(--indigo);color:#fff;font-size:11px;font-weight:600;padding:4px 12px;border-radius:999px}
  .price .pn{font-family:var(--serif);font-size:22px}
  .price .amt{font-family:var(--serif);font-size:40px;margin:10px 0 4px}
  .price .amt small{font-family:var(--sans);font-size:14px;color:var(--ink4);font-weight:400}
  .price .amt .yr{display:block;font-family:var(--sans);font-size:12px;color:var(--ink4);font-weight:400;margin-top:2px}
  .price ul{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:11px}
  .price li{display:flex;gap:10px;font-size:14px;color:var(--ink2)}
  .price li svg{width:17px;height:17px;color:var(--green);flex-shrink:0;margin-top:2px}
  .price .btn{width:100%;justify-content:center;margin-top:6px}

  /* TESTIMONIAL */
  .quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:720px){.quotes{grid-template-columns:1fr}}
  .quote{background:var(--warm);border-radius:18px;padding:34px}
  .quote blockquote{font-family:var(--serif);font-size:22px;line-height:1.4;letter-spacing:-.01em}
  .quote .who{display:flex;align-items:center;gap:11px;margin-top:22px;font-size:13px;color:var(--ink3)}
  .quote .who .a{width:34px;height:34px;border-radius:50%;background:#fff}

  /* FAQ */
  .faqgrid{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
  @media(max-width:820px){.faqgrid{grid-template-columns:1fr;gap:30px}}
  .fq{border-top:1px solid var(--line);padding:20px 0}
  .fq .q{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:16px;cursor:pointer}
  .fq .q span.p{color:var(--ink4)}
  .fq .a{font-size:14.5px;color:var(--ink3);margin-top:12px;max-width:60ch}
  .fq.closed .a{display:none}

  /* FINAL CTA */
  .final{background:var(--dark);color:#fff;text-align:center;padding:110px 0}
  .final h2{font-size:clamp(32px,4vw,52px)}
  .final .lead{color:rgba(255,255,255,.65);max-width:46ch;margin:20px auto 0}
  .final .btn{margin-top:32px}

  /* FOOTER */
  footer{background:var(--dark);color:rgba(255,255,255,.6);padding:64px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
  .fgrid{display:grid;grid-template-columns:1.5fr repeat(6,1fr);gap:28px 24px}
  @media(max-width:1080px){.fgrid{grid-template-columns:1.4fr repeat(3,1fr)}}
  @media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
  @media(max-width:560px){.fgrid{grid-template-columns:1fr 1fr}}
  footer .bd{display:flex;align-items:center;gap:9px;color:#fff;font-family:var(--serif);font-size:20px;margin-bottom:14px}
  footer .bd svg{height:22px;width:auto}
  footer h4{color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;margin-bottom:14px;letter-spacing:.02em}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
  footer a:hover{color:#fff}
  .fdl{display:flex;flex-direction:column;gap:9px;margin-top:18px}
  .fdl a{display:inline-flex;align-items:center;gap:9px;width:fit-content;padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;color:rgba(255,255,255,.82);font-size:13px;font-weight:500;transition-property:background-color,border-color,color;transition-duration:.18s}
  .fdl a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
  .fdl a svg{width:16px;height:16px;flex-shrink:0}
  .fmail{display:inline-block;margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:1px}
  .fmail:hover{color:#fff;border-color:#fff}
  .fbar{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px}
  .fsoc{display:flex;gap:18px}
  @media(max-width:560px){.fbar{flex-direction:column;gap:14px;align-items:flex-start}.fsoc{flex-wrap:wrap;gap:14px}}
  .star-mark{display:inline-block}


/* ui polish (make-interfaces-feel-better) */
h1,h2,h3{text-wrap:balance}
/* reveal-on-scroll (applied by site.js; absent class = visible if JS off) */
.reveal{opacity:0;transform:translateY(22px) scale(.99);transition:opacity .75s cubic-bezier(.2,0,0,1),transform .75s cubic-bezier(.2,0,0,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.lead,.head p,.ftext p,.scard p,.quote blockquote,.sub{text-wrap:pretty}
.btn{transition-property:background-color,transform,border-color,box-shadow;transition-timing-function:cubic-bezier(.2,0,0,1)}
.btn:active{transform:scale(.96)}
.scard,.fcard,.fpanel,.studio-card,.price{transition-property:transform,box-shadow}
.stat .n,.price .amt,.stat .v,.bt-r .vv,.mem-row em,.crow .ch{font-variant-numeric:tabular-nums}

/* ============ hero product shot ============ */
.shot{margin:56px auto 0;max-width:1000px;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.22);background:#fff;text-align:start}
.shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#dcd9d2;display:inline-block}
.shot-bar .u{margin-left:12px;font-size:12px;color:var(--ink4)}
.shot-body{display:grid;grid-template-columns:226px 1fr 258px;min-height:436px}
.shot-body.two{grid-template-columns:226px 1fr}
.shot-body.one{grid-template-columns:1fr}
.sb-rail{border-inline-end:1px solid var(--line);padding:14px 12px;font-size:12.5px;color:var(--ink3);background:#fcfbf9;display:flex;flex-direction:column}
.sb-rail .bk{font-family:var(--serif);font-size:13.5px;color:var(--ink);margin:2px 6px 14px;display:flex;align-items:center;gap:7px}
.sb-rail .bk .badge{margin-inline-start:auto;font-family:var(--sans);font-size:10px;color:var(--ink4);font-weight:500}
.sb-rail .r{padding:5px 8px;border-radius:7px;margin-bottom:2px}
.sb-rail .r.on{background:var(--warm);color:var(--ink);font-weight:500}
.sb-rail .r.sub{padding-inline-start:20px;color:var(--ink4)}
/* file tree */
.tr{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;margin-bottom:1px;white-space:nowrap}
.tr .ic{width:13px;text-align:center;flex-shrink:0;color:var(--ink4);font-size:11px}
.tr.f{color:var(--ink);font-weight:500}
.tr.d1{padding-inline-start:18px}
.tr.d2{padding-inline-start:32px}
.tr.on{background:var(--warm);color:var(--ink);font-weight:500}
.tr .ct{margin-inline-start:auto;font-size:10px;color:var(--ink4);font-variant-numeric:tabular-nums}
.tr.dim{color:var(--ink4)}
.sb-rail .newbtn{margin-top:auto;font-size:11.5px;color:var(--ink4);padding:8px;border:1px dashed var(--line);border-radius:9px;text-align:center}
.sb-main{padding:22px 28px;position:relative}
.sb-main .tb{display:flex;gap:12px;font-size:11px;color:var(--ink4);letter-spacing:.05em;margin-bottom:6px;flex-wrap:wrap;align-items:center}
.sb-main h4{font-family:var(--serif);font-size:22px;color:var(--ink);margin:2px 0 16px}
.sb-main p{font-size:13.5px;color:var(--ink2);line-height:1.78;margin-bottom:11px;max-width:50ch}
.sel{background:rgba(99,102,241,.15);border-radius:3px;box-shadow:0 0 0 1px rgba(99,102,241,.3)}
.aipop{display:inline-flex;gap:4px;margin-top:6px;background:var(--ink);border-radius:10px;padding:5px;box-shadow:0 16px 32px -14px rgba(0,0,0,.55)}
.aipop span{font-size:11px;color:rgba(255,255,255,.8);padding:4px 9px;border-radius:6px}
.aipop span.hot{background:rgba(255,255,255,.18);color:#fff}
.sb-status{display:flex;gap:16px;font-size:11px;color:var(--ink4);border-top:1px solid var(--line);padding-top:10px;margin-top:18px;font-variant-numeric:tabular-nums}
.sb-status .g{color:var(--green)}
.sb-coach{border-inline-start:1px solid var(--line);padding:16px;background:var(--soft);font-size:12px;display:flex;flex-direction:column}
.sb-coach .ch{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.sb-coach .av{width:30px;height:30px;border-radius:9px;background:var(--indigo);position:relative;flex-shrink:0}
.sb-coach .av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--soft)}
.sb-coach .t{font-weight:600;font-size:12.5px;color:var(--ink)}
.sb-coach .st{font-size:9px;letter-spacing:.12em;color:var(--green)}
.sb-coach .q{font-family:var(--serif);font-size:14px;color:var(--ink);margin-bottom:6px}
.cmsg{border-radius:12px;padding:9px 12px;font-size:11.5px;line-height:1.55;margin-bottom:8px}
.cmsg.cu{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;max-width:90%}
.cmsg.cc{background:#fff;border:1px solid var(--line);color:var(--ink2);border-bottom-left-radius:4px}
.cmsg.cc b{color:var(--ink);font-weight:600}
.cmsg.cc .ref{display:block;margin-top:6px;font-size:10px;color:var(--ink4)}
.sb-coach .qa{margin-top:auto;padding-top:12px}
.sb-coach .tag{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;margin:3px 4px 0 0;font-size:10.5px;color:var(--ink3)}
@media(max-width:820px){.shot-body,.shot-body.two{grid-template-columns:1fr}.sb-rail,.sb-coach{display:none}}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin-top:42px;font-size:13px;font-weight:500;color:var(--ink4);letter-spacing:.02em}
.logos span{opacity:.8}

/* mid-page CTA band */
.midcta{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:72px 0}
.midcta h2{font-size:clamp(26px,3vw,38px);margin-bottom:10px}
.midcta .lead{margin:0 auto 26px;max-width:48ch}

/* ============ studio page components ============ */
/* steps (numbered) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps.s3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.steps,.steps.s3{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition-property:transform,box-shadow;transition-duration:.2s}
.step:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,0,0,.2)}
.step .n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--indigo)}
.step h3{font-size:18px;margin:13px 0 6px}
.step p{font-size:14px;color:var(--ink3)}
.step .lab{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4)}

/* compare: two cards side by side */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.cmp{grid-template-columns:1fr}}
.cmp .card{border-radius:18px;padding:26px;border:1px solid var(--line);background:#fff}
.cmp .card.dim{background:var(--soft)}
.cmp .card.lit{border-color:rgba(99,102,241,.4);box-shadow:0 24px 50px -34px rgba(99,102,241,.5)}
.cmp .lab{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-bottom:14px}
.cmp .lab .dot{width:7px;height:7px;border-radius:50%;background:var(--ink4)}
.cmp .card.lit .lab .dot{background:var(--indigo)}
.cmp .qh{font-family:var(--serif);font-size:19px;margin-bottom:10px}
.cmp blockquote{font-size:14.5px;line-height:1.65;color:var(--ink2);margin:0}
.cmp .src{font-size:12px;color:var(--ink4);margin-top:12px}

/* chat mock */
.chatm{display:flex;flex-direction:column;gap:14px;padding:6px}
.bub{max-width:82%;padding:14px 16px;border-radius:16px;font-size:13.5px;line-height:1.6}
.bub .who{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);margin-bottom:6px;display:flex;gap:8px}
.bub.u{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.bub.u .who{color:rgba(255,255,255,.55)}
.bub.c{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink2);border-bottom-left-radius:5px}
.bub .meta{font-size:11px;color:var(--ink4);margin-top:9px;border-top:1px solid var(--line);padding-top:8px}

/* score bars (report) */
.scores{display:flex;flex-direction:column;gap:11px}
.scrow{display:flex;align-items:center;gap:13px;font-size:13px;color:var(--ink2)}
.scrow .nm{width:88px;flex-shrink:0}
.scrow .tk{flex:1;height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
.scrow .fl{display:block;height:100%;border-radius:99px;background:var(--green);animation:grow 1.8s cubic-bezier(.3,0,.2,1) both}
.scrow .vv{width:34px;text-align:right;color:var(--ink4);font-size:12px}

/* persona cards */
.persona{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.persona .av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;color:#fff}
.persona .nm{font-weight:600;font-size:14px}
.persona .ds{font-size:12.5px;color:var(--ink4)}

/* scene board (script) */
.board{display:flex;flex-direction:column;gap:9px}
.scene{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff;position:relative;overflow:hidden}
.scene .slug{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink4)}
.scene .ttl{font-size:13.5px;color:var(--ink2);margin-top:3px}
.scene .bars{display:flex;gap:5px;margin-top:9px}
.scene .bars i{height:4px;width:34px;border-radius:99px;display:block}

/* dual-format toggle */
.dual-tabs{display:inline-flex;background:var(--soft);border-radius:10px;padding:3px;gap:3px;font-size:12px;font-weight:600}
.dual-tabs span{padding:5px 13px;border-radius:8px;color:var(--ink4)}
.dual-tabs span.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px -4px rgba(0,0,0,.3)}

/* resource hub */
.searchbar{max-width:540px;margin:0 auto;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:0 10px 30px -20px rgba(0,0,0,.2)}
.searchbar svg{width:19px;height:19px;color:var(--ink4);flex-shrink:0}
.searchbar span{color:var(--ink4);font-size:15px}
.searchbar input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);min-width:0}
.searchbar input::placeholder{color:var(--ink4)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.chip{font:inherit;font-size:13.5px;font-weight:500;color:var(--ink2);background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:999px;cursor:pointer;-webkit-appearance:none;appearance:none;transition-property:background-color,color,border-color,transform;transition-duration:.15s}
.chip:active{transform:scale(.96)}
.chip:hover{border-color:var(--ink4)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;transition-property:transform,box-shadow;transition-duration:.2s}
.post:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,0,0,.2)}
.post .ptag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:14px}
.post .ptag.insights{background:rgba(99,102,241,.12);color:#4b46b7}
.post .ptag.academy{background:rgba(78,168,122,.14);color:#2f7d57}
.post .ptag.changelog{background:var(--soft);color:var(--ink4)}
.post h3{font-size:19px;line-height:1.25;margin-bottom:8px}
.post p{font-size:14px;color:var(--ink3);flex:1}
.post .pmeta{font-size:12px;color:var(--ink4);margin-top:16px;letter-spacing:.02em}

/* 4-tab workflow strip */
.tabstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
@media(max-width:720px){.tabstrip{grid-template-columns:1fr 1fr}}
.tabstrip .t{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fff}
.tabstrip .t .st{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo)}
.tabstrip .t h4{font-family:var(--serif);font-size:19px;margin:6px 0 4px}
.tabstrip .t p{font-size:12.5px;color:var(--ink4)}

/* ===== assemble.css ===== */
/* ===== Consent banner =====
 * Several of these declarations are compliance requirements, not taste:
 *
 *  - position:fixed at the block-end, never a full-viewport scrim. A backdrop makes
 *    "accept all" the fastest way to get rid of the thing, which is the definition
 *    of the dark pattern regulators name.
 *  - .cc-btn carries the size, padding and weight; the -primary/-secondary
 *    modifiers change colour only. Refusing must not be more work than accepting.
 *  - Logical properties throughout (inset-inline, margin-inline) so the Arabic
 *    build mirrors without a second ruleset.
 *  - z-index above 60, which is the highest value elsewhere in this file (.navmenu).
 *
 * Element choices are constrained by this stylesheet's own bare selectors: the root
 * cannot be <nav> (line ~27 pins those to the top) or <footer> (~298 paints them
 * dark), and the title is a <p><strong> rather than an <h*> because headings here
 * are forced into IBM Plex Serif at line-height 1.06.
 */
.cc{position:fixed;inset-inline:0;inset-block-end:0;z-index:9999;padding:16px;pointer-events:none}
.cc[hidden]{display:none}
.cc-card{pointer-events:auto;max-width:640px;margin-inline:auto;background:#fff;border:1px solid #e6e4dd;border-radius:16px;padding:20px 22px;box-shadow:0 8px 30px rgba(10,10,11,.12)}
.cc-t{font-size:15px;color:#0a0a0b;margin-bottom:6px}
.cc-b{font-size:13.5px;line-height:1.65;color:#57565a;margin-bottom:16px}
.cc-b a{color:#6366f1;text-decoration:underline;text-underline-offset:2px}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Identical geometry; only the colour differs. Do not add padding or font-size to
 * either modifier — that is the line between emphasis and a dark pattern. */
.cc-btn{font-family:inherit;font-size:14px;font-weight:500;line-height:1;padding:12px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;flex:1 1 auto;min-width:150px}
.cc-btn-primary{background:#0a0a0b;color:#fff}
.cc-btn-primary:hover{background:#26262a}
.cc-btn-secondary{background:#fff;color:#0a0a0b;border-color:#d9d7cf}
.cc-btn-secondary:hover{background:#f3f1ec}
.cc-more{margin-block-start:12px;background:none;border:0;padding:0;font-family:inherit;font-size:13px;color:#57565a;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cc-panel{margin-block-start:16px;border-block-start:1px solid #ececea;padding-block-start:14px}
.cc-panel[hidden]{display:none}
.cc-row{display:flex;gap:10px;align-items:flex-start;margin-block-end:12px;font-size:13px;line-height:1.55}
.cc-row input{margin-block-start:3px;flex:0 0 auto}
.cc-row b{display:block;font-weight:600;color:#0a0a0b}
.cc-row em{font-style:normal;color:#8e8e94}
.cc-row-locked{opacity:.7}
.cc-save{margin-block-start:4px;flex:0 0 auto}
@media(max-width:560px){
  /* Stacked, but still the same size as each other. */
  .cc-actions{flex-direction:column}
  .cc-btn{width:100%}
}
/* The footer entry point. <footer a:hover> exists in this file but there is no bare
 * button rule, so a <button> inside the footer inherits nothing and needs it all. */
.fsoc-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.fsoc-btn:hover{color:#fff}

/* ===== Per-locale CJK stacks =====
 * marketing.css previously had no [lang] rule at all, while the layout loaded the
 * Pretendard CDN for ko — so Korean pages downloaded a webfont that no selector
 * ever applied. The download is gone; this is the stack that actually applies.
 *
 * Local-first on purpose: the faces below ship with every current OS, so Korean
 * costs zero bytes. A hosted Korean or Japanese webfont is measured in hundreds of
 * KB per weight, which is not a trade worth making for a marketing page.
 * Latin glyphs still resolve to IBM Plex first; only the CJK run falls through.
 */
html[lang="ko"] body,
html[lang="ko"] .a,
html[lang="ko"] .a .navlinks,
html[lang="ko"] .a .btn,
html[lang="ko"] .a .langbtn,
html[lang="ko"] .a footer{
  font-family:'IBM Plex Sans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
}
html[lang="ko"] .a h1,
html[lang="ko"] .a h2,
html[lang="ko"] .a h3,
html[lang="ko"] .a h4{
  font-family:'IBM Plex Serif','Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',serif;
}

/* Japanese follows the same local-first rule, and for a sharper reason: Noto Sans
 * JP measures 496 KB for a single weight and 1.45 MB across three. Every current
 * OS ships a good Japanese face, so ja costs zero bytes here too.
 *
 * Note there is no `text-autospace` or manual spacing rule for ja. Japanese
 * convention does NOT insert a space around embedded Latin words the way the
 * zh-TW and ko copy here does — see docs/dev/japanese-locale-plan.md. Any future
 * brand-spacing sweep over the corpus must exclude ja.
 */
html[lang="ja"] body,
html[lang="ja"] .a,
html[lang="ja"] .a .navlinks,
html[lang="ja"] .a .btn,
html[lang="ja"] .a .langbtn,
html[lang="ja"] .a footer{
  font-family:'IBM Plex Sans','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','YuGothic','Meiryo','Noto Sans JP',system-ui,sans-serif;
}
/* Japanese headings stay gothic: mincho on screen reads as low-legibility to
   Japanese readers and Noto Serif JP would double the payload
   (docs/dev/japanese-locale-plan.md §5.3). Latin words inside a heading keep
   IBM Plex Serif because it is listed first and only covers Latin glyphs. */
html[lang="ja"] .a h1,
html[lang="ja"] .a h2,
html[lang="ja"] .a h3,
html[lang="ja"] .a h4{
  font-family:'IBM Plex Serif','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','YuGothic','Meiryo','Noto Sans JP',system-ui,sans-serif;
  letter-spacing:0;
  line-height:1.35;
}
/* Kanji and kana fill the em box; the Latin defaults (1.06 headings, 1.6 body,
   negative tracking) squeeze them (§5.4). */
html[lang="ja"] .a .a-h1{line-height:1.3;max-width:22ch}
html[lang="ja"] body,html[lang="ja"] .a{line-height:1.8;letter-spacing:0}
html[lang="ja"]{line-break:strict;word-break:normal;overflow-wrap:anywhere}
@supports (text-autospace: normal){html[lang="ja"]{text-autospace:normal}}
html[lang="ja"] code,html[lang="ja"] pre{text-autospace:no-autospace}

/* ===== Assemble-style design system (shared across all pages) ===== */
/* Requires preview.css (tokens) and <body class="a">. */
body{background:#fff;-webkit-font-smoothing:antialiased;font-family:'IBM Plex Sans',var(--sans)}
.a,.a .navlinks,.a .btn,.a .langbtn,.a footer{font-family:'IBM Plex Sans',var(--sans)}
.aw{max-width:1120px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.aw{padding:0 20px}}
/* IBM Plex Serif regular headings, italic on highlights, never bold */
.a h1,.a h2,.a h3,.a h4{font-family:'IBM Plex Serif',Georgia,serif;letter-spacing:-.01em;font-weight:400}
.a h1 em,.a h2 em,.a h3 em{font-family:'IBM Plex Serif',Georgia,serif;font-style:italic;font-weight:400}
.sec-pad{padding:clamp(80px,11vw,128px) 0}

/* reveal */
.rv{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .8s cubic-bezier(.2,0,0,1),transform .8s cubic-bezier(.2,0,0,1)}
.rv.in{opacity:1;transform:none}
.rvo{opacity:0;transition:opacity 1s cubic-bezier(.2,0,0,1)}
.rvo.in{opacity:1}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

/* eyebrow / labels */
.eb{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink3);background:#fff;border:1px solid var(--line);padding:6px 8px;border-radius:999px}
.eb .new{background:var(--ink);color:#fff;font-size:10.5px;font-weight:500;letter-spacing:.04em;padding:3px 8px;border-radius:999px}
.lab{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4)}

/* ===== HERO ===== */
.a-hero{position:relative;text-align:center;padding:110px 0 0;overflow:hidden}
.a-hero .aw{position:relative;z-index:2}
.a-h1{font-size:clamp(33px,5vw,58px);font-weight:400;line-height:1.05;color:var(--ink);margin:22px auto 18px;max-width:16ch}
.a-hero .sub{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--ink3);max-width:50ch;margin:0 auto 28px}
.a-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* hero stage with floating cards + 3D tilt */
.a-stage{position:relative;margin-top:64px;padding-bottom:30px;perspective:1600px}
.a-stage .main{position:relative;z-index:3;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.a-stage .shot{margin:0 auto;max-width:980px}
.fcard{position:absolute;z-index:4;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -24px rgba(30,30,60,.35);padding:12px 14px;font-size:12px;color:var(--ink2);text-align:start;animation:aFloat 6s ease-in-out infinite}
.fcard .ttl{font-weight:500;font-size:11px;color:var(--ink);display:flex;align-items:center;gap:7px;margin-bottom:5px}
.fcard .dotg{width:8px;height:8px;border-radius:50%;background:var(--green)}
.fcard.c1{top:60px;left:-8px;animation-delay:0s}
.fcard.c2{top:200px;right:-14px;animation-delay:1.4s}
.fcard.c3{bottom:70px;left:24px;animation-delay:.7s}
.fcard.c4{top:14px;right:60px;animation-delay:2.1s}
@media(max-width:880px){.fcard{display:none}}
@keyframes aFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* trusted bar */
.a-trust{padding:46px 0 6px;text-align:center}
.a-trust .lab{display:block;margin-bottom:22px}
.a-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 44px;font-family:var(--serif);font-size:clamp(18px,2.2vw,26px);color:var(--ink4)}
.a-logos span{opacity:.7;transition:opacity .3s,color .3s}
.a-logos span:hover{opacity:1;color:var(--ink2)}

/* section heading block */
.a-head{text-align:center;max-width:640px;margin:0 auto 56px}
.a-head h2{font-size:clamp(28px,4vw,44px);font-weight:400;line-height:1.08;color:var(--ink);margin:14px 0 14px}
.a-head h2 em{font-style:italic}
.a-head p{font-size:17px;line-height:1.55;color:var(--ink3);max-width:46ch;margin:0 auto}

/* feature card grid (bento row) */
.a-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.a-cards.c3{grid-template-columns:repeat(3,1fr)}
.a-cards.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.a-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.a-cards,.a-cards.c3,.a-cards.c2{grid-template-columns:1fr}}
.a-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;transition:transform .25s cubic-bezier(.2,0,0,1),box-shadow .25s,border-color .25s}
.a-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(30,30,60,.4);border-color:#e2e0db}
.a-card .ic{width:40px;height:40px;border-radius:11px;background:var(--warm);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:16px;transition:transform .3s}
.a-card:hover .ic{transform:scale(1.08) rotate(-4deg)}
.a-card h3{font-size:17px;font-weight:500;margin-bottom:6px;color:var(--ink);font-family:var(--sans)}
.a-card p{font-size:14px;color:var(--ink3);line-height:1.5}

/* split feature with animated screenshot */
.a-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.a-split+.a-split{margin-top:clamp(70px,9vw,110px)}
.a-split.flip .a-txt{order:2}
@media(max-width:860px){.a-split{grid-template-columns:1fr;gap:32px}.a-split.flip .a-txt{order:0}}
.a-txt h2{font-size:clamp(26px,3.4vw,40px);font-weight:400;line-height:1.1;margin:12px 0 14px;color:var(--ink)}
.a-txt h2 em{font-style:italic}
.a-txt p{font-size:16.5px;color:var(--ink3);line-height:1.6;max-width:42ch}
.a-txt ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px}
.a-txt li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2)}
.a-txt li svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:2px}
.a-vis{position:relative}
.a-vis .floaty{animation:aFloat 7s ease-in-out infinite}

/* testimonial */
.a-quote{text-align:center;max-width:820px;margin:0 auto}
.a-quote blockquote{font-family:var(--serif);font-size:clamp(24px,3.4vw,38px);line-height:1.28;color:var(--ink);margin:0 0 26px;letter-spacing:-.01em}
.a-quote .who{display:flex;align-items:center;justify-content:center;gap:12px}
.a-quote .av{width:42px;height:42px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px}
.a-quote .nm{font-weight:500;font-size:14.5px}
.a-quote .rl{font-size:13px;color:var(--ink4)}

/* big CTA */
.a-final{text-align:center}
.a-final h2{font-size:clamp(32px,5vw,60px);font-weight:400;line-height:1.04;color:var(--ink);margin-bottom:26px}
.a-final h2 em{font-style:italic}

@media(prefers-reduced-motion:reduce){
  .rv,.rvo{opacity:1;transform:none;transition:none}
  .fcard,.a-vis .floaty{animation:none}
  .a-stage .main{transform:none!important}
}

/* ===== Long-form guide / comparison prose (how-to, vs, alternative pages) =====
   preview.css resets all margins to 0 and never adds prose typography back, so
   bare <h2>/<p>/<ul> in the guide bodies render with no spacing. .gprose restores
   readable spacing for those long-form blocks. */
.gprose{font-size:17px;line-height:1.75;color:var(--ink2)}
.gprose p{margin-bottom:20px}
.gprose p:last-child{margin-bottom:0}
.gprose h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,30px);line-height:1.16;letter-spacing:-.01em;color:var(--ink);margin:46px 0 16px}
.gprose h2:first-child{margin-top:0}
.gprose h2 em{font-style:italic}
.gprose h3{font-family:var(--sans);font-weight:500;font-size:19px;line-height:1.3;color:var(--ink);margin:32px 0 10px}
.gprose h3:first-child{margin-top:0}
.gprose a{color:var(--indigo)}
.gprose a:hover{text-decoration:underline}
.gprose strong{color:var(--ink);font-weight:500}
.gprose em{font-style:italic}
.gprose ul,.gprose ol{margin:0 0 22px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.gprose ul li{position:relative;padding-left:26px;line-height:1.65}
.gprose ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--indigo)}
.gprose ol{counter-reset:gp}
.gprose ol li{counter-increment:gp;position:relative;padding-left:42px;line-height:1.65}
.gprose ol li::before{content:counter(gp);position:absolute;left:0;top:-1px;width:27px;height:27px;border-radius:8px;background:var(--warm);color:var(--ink);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center}
.gprose blockquote{margin:30px 0;padding:2px 0 2px 22px;border-left:3px solid var(--indigo);font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.4;color:var(--ink)}
/* 可照抄的骨架/範本。用 pre 是刻意的:讀者要能整塊選起來複製，而換行位置本身帶資訊。
   overflow-x:auto 讓長行在手機上自己捲，不會把整個版面撐寬。 */
.gprose pre{margin:26px 0;padding:20px 22px;background:var(--soft);border:1px solid var(--line);border-radius:14px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.85;color:var(--ink2);white-space:pre;-webkit-text-size-adjust:100%}
@media(max-width:640px){.gprose pre{padding:16px;font-size:12.5px;border-radius:12px}}
/* 阿語不要用等寬字型：等寬會把阿拉伯字母的連寫拆開，讀起來像被硬拉散的字。
   等寬原本只是為了欄位對齊，而這個骨架改成冒號式之後已經不靠對齊了。 */
[dir="rtl"] .gprose pre{direction:rtl;text-align:right;font-family:var(--sans);font-size:14px;line-height:1.95}
.gprose img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:8px 0 24px}
.gprose hr{border:0;border-top:1px solid var(--line);margin:36px 0}
/* RTL (Arabic) mirror */
[dir="rtl"] .gprose ul li,[dir="rtl"] .gprose ol li{padding-left:0;padding-right:26px}
[dir="rtl"] .gprose ul li::before{left:auto;right:4px}
[dir="rtl"] .gprose ol li{padding-right:42px}
[dir="rtl"] .gprose ol li::before{left:auto;right:0}
[dir="rtl"] .gprose blockquote{border-left:0;border-right:3px solid var(--indigo);padding:2px 22px 2px 0}

/* ===== Blog (Resources Hub) list — sidebar framework + demo cards ===== */
.bloglayout{display:grid;grid-template-columns:240px 1fr;gap:clamp(36px,5vw,60px);align-items:start}
@media(max-width:920px){.bloglayout{grid-template-columns:1fr;gap:40px}}
.blogside{position:sticky;top:96px;display:flex;flex-direction:column;gap:28px}
@media(max-width:920px){.blogside{position:static;order:2;border-top:1px solid var(--line);padding-top:32px}}
.bs-group .bs-h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);margin-bottom:13px}
.bs-list{list-style:none;display:flex;flex-direction:column;gap:2px;padding:0}
.bs-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 12px;border-radius:9px;font-size:14px;color:var(--ink2);transition:background-color .15s,color .15s}
.bs-list a:hover{background:var(--soft);color:var(--ink)}
.bs-list a.on{background:var(--ink);color:#fff}
.bs-list a .n{font-size:12px;color:var(--ink4);font-variant-numeric:tabular-nums;flex-shrink:0}
.bs-list a.on .n{color:rgba(255,255,255,.65)}
.bs-tags{display:flex;flex-wrap:wrap;gap:8px}
.bs-tags a{font-size:12.5px;color:var(--ink2);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:999px;transition:border-color .15s,color .15s}
.bs-tags a:hover{border-color:var(--ink4);color:var(--ink)}
.bs-tags a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.blogmain{min-width:0}
.blogmain-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 24px;flex-wrap:wrap}
.blogmain-head+.blogmain-head,.a-cards+.blogmain-head{margin-top:52px}
.blogmain-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.6vw,28px);line-height:1.1;color:var(--ink)}
.blogmain-head h2 em{font-style:italic}
.blogmain-head .cnt{font-size:13px;color:var(--ink4);white-space:nowrap}
.blogempty{text-align:center;color:var(--ink4);font-size:14.5px;padding:40px 0}
/* series-navigation box on the article page (combines demo read with main's series TOC) */
.seriesbox{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:#fff;max-width:680px;margin:0 auto 40px}
.seriesbox .sx-lab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:5px}
.seriesbox h3{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink);margin-bottom:14px}
.seriesbox ol{list-style:none;counter-reset:sx;display:flex;flex-direction:column;gap:2px;padding:0}
.seriesbox ol li{counter-increment:sx}
.seriesbox ol li a{display:flex;gap:11px;align-items:flex-start;padding:8px 10px;border-radius:9px;font-size:14px;color:var(--ink2);line-height:1.4}
.seriesbox ol li a:hover{background:var(--soft);color:var(--ink)}
.seriesbox ol li a .num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--ink3);font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.seriesbox ol li.cur a{background:rgba(99,102,241,.08);color:var(--ink);font-weight:500}
.seriesbox ol li.cur a .num{background:var(--indigo);color:#fff}
.seriesbox .sx-all{display:inline-block;margin-top:12px;font-size:13px;color:var(--indigo)}

/* ===== Resources Hub — series filter row + active filter + pagination ===== */
.serieschips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:0 auto 36px;max-width:840px}
.serieschips .sc-lab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4)}
.activefilter{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 16px}
.activefilter a{color:var(--ink4);font-size:13px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.activefilter a:hover{background:var(--soft);color:var(--ink)}
[dir="rtl"] .activefilter{padding:7px 16px 7px 8px}
/* pagination — styled for the marketing layout (pagy default nav is otherwise unstyled) */
.pagywrap{margin-top:52px;display:flex;justify-content:center}
.pagy.nav{display:inline-flex;align-items:center;gap:4px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px -24px rgba(0,0,0,.25)}
.pagy.nav a,.pagy.nav span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 11px;font-size:14px;font-weight:500;color:var(--ink2);background:transparent;border-radius:8px;text-decoration:none;transition:background-color .15s,color .15s;cursor:pointer}
.pagy.nav a:hover:not([aria-disabled="true"]):not(.current){background:var(--soft);color:var(--ink)}
.pagy.nav a.current,.pagy.nav a[aria-current="page"]{background:var(--ink);color:#fff;font-weight:600}
.pagy.nav a[aria-disabled="true"],.pagy.nav span[aria-disabled="true"]{color:var(--ink4);opacity:.45;cursor:default;pointer-events:none}
.pagy.nav .gap{min-width:auto;color:var(--ink4);cursor:default;padding:0 4px}
[dir="rtl"] .pagy.nav a[aria-label="Previous"] svg,[dir="rtl"] .pagy.nav a[aria-label="Next"] svg{transform:scaleX(-1)}

/* ===== Docs — documentation-manual layout (persistent section-tree sidebar) ===== */
.docwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(30px,4.5vw,56px);align-items:start;max-width:1180px;margin:0 auto}
.docwrap.with-toc{grid-template-columns:250px minmax(0,1fr) 196px}
@media(max-width:1100px){.docwrap.with-toc{grid-template-columns:250px minmax(0,1fr)}.doctoc{display:none}}
@media(max-width:880px){.docwrap,.docwrap.with-toc{grid-template-columns:1fr}.docnav{display:none}}
.docnav{position:sticky;top:90px;max-height:calc(100vh-108px);overflow-y:auto;padding-bottom:20px;font-family:'IBM Plex Sans',var(--sans)}
.docnav .dn-brand{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;font-family:var(--serif);font-size:16px;color:var(--ink)}
.docnav .dn-brand .dot{width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-family:var(--serif)}
.docnav .dn-group{margin-bottom:20px}
.docnav .dn-h{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink4);margin:0 10px 8px}
.docnav .dn-sec{list-style:none;display:flex;flex-direction:column;gap:1px;padding:0;margin:0}
.docnav .dn-sec > li > a{display:block;padding:6px 11px;border-radius:8px;font-size:14px;color:var(--ink2);transition:background-color .15s,color .15s}
.docnav .dn-sec > li > a:hover{background:var(--soft);color:var(--ink)}
.docnav .dn-sec > li > a.on{background:var(--ink);color:#fff;font-weight:500}
.docnav .dn-art{list-style:none;margin:3px 0 8px 11px;padding-left:11px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.docnav .dn-art a{display:block;padding:5px 10px;border-radius:7px;font-size:13px;line-height:1.35;color:var(--ink3);transition:background-color .15s,color .15s}
.docnav .dn-art a:hover{background:var(--soft);color:var(--ink)}
.docnav .dn-art a.on{color:var(--indigo);font-weight:500;background:rgba(99,102,241,.08)}
.docnav .dn-sub{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);padding:7px 10px 2px}
.docnav .dn-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-bottom:20px;position:relative}
.docnav .dn-search svg{width:16px;height:16px;color:var(--ink4);flex-shrink:0}
.docnav .dn-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);min-width:0}
.docnav .dn-search .dresults{top:calc(100% + 6px)}
.doctoc{position:sticky;top:90px;font-family:'IBM Plex Sans',var(--sans)}
.doctoc .tc-h{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink4);margin-bottom:12px}
.doctoc ul{list-style:none;display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--line);padding-left:13px;margin:0}
.doctoc a{font-size:13px;color:var(--ink4)}.doctoc a:hover{color:var(--ink)}
.docbody{min-width:0}
[dir="rtl"] .docnav .dn-art{margin-left:0;margin-right:11px;padding-left:0;padding-right:11px;border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .doctoc ul{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:13px}
/* docs search dropdown (shared by the landing hero + the manual sidebar) */
.dresults{position:absolute;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -30px rgba(0,0,0,.4);overflow:hidden;z-index:30;text-align:start;max-height:60vh;overflow-y:auto}
.dresults a{display:block;padding:11px 15px;border-bottom:1px solid var(--soft)}
.dresults a:last-child{border-bottom:0}
.dresults a:hover{background:var(--soft)}
.dresults .rt{font-size:14px;color:var(--ink);font-weight:500}
.dresults .rs{font-size:12px;color:var(--ink4);margin-top:2px}
.dresults .dempty{padding:13px 15px;font-size:12.5px;color:var(--ink4)}

/* ===== Homepage — creator community (Discord) invite ===== */
.a-comm{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;background:var(--dark);color:#fff;padding:clamp(38px,5vw,62px) clamp(22px,4vw,56px);text-align:center}
.comm-orb{position:absolute;z-index:-1;top:-230px;left:50%;width:560px;height:560px;transform:translateX(-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(88,101,242,.5) 0%,rgba(88,101,242,.14) 46%,rgba(88,101,242,0) 70%)}
.comm-mark{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:17px;background:#5865f2;margin-bottom:22px;box-shadow:0 20px 42px -18px rgba(88,101,242,.95)}
.comm-mark svg{width:29px;height:29px}
.a-comm .lab{display:block;color:rgba(255,255,255,.48);margin-bottom:12px}
.a-comm h2{font-size:clamp(30px,4.4vw,50px);line-height:1.06;color:#fff;margin-bottom:16px}
.comm-sub{max-width:58ch;margin:0 auto;font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.66)}
.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:40px 0 34px;text-align:start}
.comm-pt{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:22px;transition:background-color .25s,border-color .25s,transform .25s cubic-bezier(.2,0,0,1)}
.comm-pt:hover{background:rgba(255,255,255,.08);border-color:rgba(88,101,242,.55);transform:translateY(-4px)}
.comm-pt .ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);font-size:16px;margin-bottom:14px}
.comm-pt h3{font-family:var(--sans);font-size:16.5px;font-weight:500;color:#fff;margin-bottom:6px;line-height:1.35}
.comm-pt p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6)}
.comm-foot{display:flex;flex-direction:column;align-items:center;gap:13px}
.btn-discord{background:#5865f2;color:#fff;box-shadow:0 20px 44px -20px rgba(88,101,242,.95)}
.btn-discord:hover{background:#4752c4;transform:translateY(-2px)}
.btn-discord svg{width:18px;height:18px;flex-shrink:0}
.comm-note{font-size:12.5px;color:rgba(255,255,255,.42)}
@media(max-width:820px){.comm-grid{grid-template-columns:1fr;gap:12px;margin:32px 0 28px}}

/* ===== Mascot (crayon bun) — static, at most one per page; see docs/dev/mascot-on-web-plan.md ===== */
/* 還在 beta 的檔案型別，標在副檔名旁邊。刻意用 amber 而不是 indigo：indigo 在這個
   站上是「這一版新增的」，beta 要說的是另一件事——能用，但還在長。 */
.ftype .fbeta{display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:999px;
  border:1px solid rgba(217,119,6,.32);background:rgba(217,119,6,.09);color:#a25a05;
  font-size:11px;font-weight:600;letter-spacing:.04em;vertical-align:middle}

.bun-face{display:inline-block;background-repeat:no-repeat;flex-shrink:0;image-rendering:auto}
.bun-scene{display:block;max-width:100%;height:auto;object-fit:contain}
.bun-trees{display:flex;align-items:flex-end;gap:18px;justify-content:center;margin:26px auto 0}
.bun-trees img{width:auto;object-fit:contain}
.bun-side{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bun-side .bun-scene{flex:0 0 auto}
.bun-center{margin:0 auto 18px}
.bun-inset{margin-top:22px}
.dempty.bun-side{gap:12px;padding:14px 16px}