/* ============================================================================
   PTM Clearwork - marketing site styles
   Design language: Lemon Squeezy inspired
     - saturated violet (#5423e7) hero / CTA blocks
     - lemon yellow (#ffc233) as the single loud accent
     - light body alternating white / smoke-white, one near-black block
     - geometric display type at light weights with tight tracking
     - full-pill buttons, generous radii, flat surfaces + hairline borders
     - a rainbow of accent hues used to index numbered content
   ========================================================================= */

:root {
  /* ---- Palette (Lemon Squeezy scales) ---- */
  --purple-50:  #f4f1fd;
  --purple-100: #e2dafb;
  --purple-200: #c6b6f7;
  --purple-300: #a991f3;
  --purple-400: #8d6cef;
  --purple-500: #7047eb;
  --purple-600: #5423e7;
  --purple-700: #4316ca;
  --purple-900: #2b0e81;

  --yellow-100: #fff3d6;
  --yellow-200: #ffe7ad;
  --yellow-300: #ffda85;
  --yellow-400: #ffce5c;
  --yellow-500: #ffc233;
  --yellow-700: #c28800;

  --green-100: #dff8ea;
  --green-400: #56d990;
  --green-500: #2dca72;
  --green-600: #26a95f;
  --green-700: #1e874c;

  --pink-100:   #fdddf8;
  --pink-500:   #f75fde;
  --pink-700:   #db0bb9;
  --orange-100: #ffe8e1;
  --orange-500: #ff7d52;
  --orange-600: #ff571f;
  --orange-700: #eb3a00;
  --blue-100:   #dbf3ff;
  --blue-200:   #ade4ff;
  --blue-500:   #00acff;
  --blue-700:   #0075ad;
  --plum-500:   #cf75ff;
  --red-500:    #f53d6b;

  --ink:      #121217;
  --ink-2:    #1c1c24;
  --grey-700: #3f3f50;
  --grey-500: #6c6c89;
  --grey-300: #a9a9bc;
  --grey-200: #d1d1db;
  --grey-100: #e8e8ed;
  --smoke:    #f7f7f8;
  --white:    #ffffff;

  /* ---- Semantic (light ground = default) ---- */
  --page:       var(--white);
  --text:       var(--ink);
  --muted:      var(--grey-500);
  --muted-2:    var(--grey-300);
  --surface:    var(--white);
  --surface-2:  var(--smoke);
  --hairline:   var(--grey-100);
  --hairline-2: var(--grey-200);
  --brand:      var(--purple-600);
  --brand-soft: var(--purple-50);
  --accent:     var(--yellow-500);
  --accent-text: var(--on-amber);
  --ok-text:    var(--on-green);

  /* Foreground for small text on the matching -100 tint. The brand -700 steps
     read fine as large shapes but land at 2.8-4.4:1 as 12-15px text, so chips
     and inline accents use these instead. Measured ratios in comments. */
  --on-purple: #4316ca;   /* 7.10 on purple-100 */
  --on-orange: #c22f00;   /* 4.83 on orange-100 */
  --on-green:  #1a7844;   /* 4.92 on green-100, 5.51 on white */
  --on-pink:   #b8089b;   /* 4.76 on pink-100  */
  --on-blue:   #006391;   /* 5.72 on blue-100  */
  --on-amber:  #8a6000;   /* 5.07 on yellow-100, 5.59 on white */
  --on-grey:   #5c5c75;   /* 5.30 on grey-100  */
  --grad:       linear-gradient(96deg, var(--purple-500), var(--purple-600) 60%, var(--purple-700));

  /* ---- Shape & depth ---- */
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --pill:      999px;
  --shadow-sm:   0 1px 2px rgba(18, 18, 23, 0.04), 0 4px 12px -6px rgba(18, 18, 23, 0.08);
  --shadow:      0 2px 4px rgba(18, 18, 23, 0.04), 0 18px 40px -24px rgba(18, 18, 23, 0.22);
  --shadow-lift: 0 4px 8px rgba(18, 18, 23, 0.05), 0 32px 64px -28px rgba(18, 18, 23, 0.28);
  --shadow-float: 0 40px 90px -40px rgba(20, 6, 74, 0.55), 0 8px 24px -12px rgba(20, 6, 74, 0.35);

  /* ---- Type scale (root = 16px). Every size below display level maps here. ---- */
  --fs-2xs:  0.6875rem;   /* 11px - dense mock labels        */
  --fs-xs:   0.75rem;     /* 12px - micro labels, pills      */
  --fs-sm:   0.8125rem;   /* 13px - meta, captions, notes    */
  --fs-md:   0.875rem;    /* 14px - secondary UI text        */
  --fs-base: 0.9375rem;   /* 15px - card + list body         */
  --fs-lg:   1rem;        /* 16px - body copy                */
  --fs-xl:   1.0625rem;   /* 17px - large buttons, sub-heads */
  --fs-2xl:  1.1875rem;   /* 19px - doc intro, panel titles  */
  --fs-3xl:  1.3125rem;   /* 21px - small headings           */
  --track-label: 0.14em;  /* every uppercase micro-label     */

  --maxw: 1180px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Ground rules: any dark block re-points the semantic tokens ---- */
.hero,
.doc-hero,
.band,
.sec-purple,
.sec-ink,
.cta,
.site-footer {
  --text:       var(--white);
  --muted:      rgba(255, 255, 255, 0.82);
  --muted-2:    rgba(255, 255, 255, 0.68);
  --surface:    rgba(255, 255, 255, 0.06);
  --surface-2:  rgba(255, 255, 255, 0.10);
  --hairline:   rgba(255, 255, 255, 0.14);
  --hairline-2: rgba(255, 255, 255, 0.24);
  --brand-soft: rgba(255, 255, 255, 0.10);
  --accent-text: var(--yellow-500);
  --ok-text:    var(--green-400);
  --grad:       linear-gradient(96deg, var(--yellow-300), var(--yellow-500));
  color: var(--text);
}

.sec-white  { background: var(--white); }
.sec-smoke  { background: var(--smoke); }
.sec-lemon  { background: var(--yellow-100); }
.sec-purple { background: var(--purple-600); }
.sec-ink    { background: var(--ink); }

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  background: var(--page);
}
body {
  font-family: var(--font-sans);
  background: var(--page);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--purple-400); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--yellow-300); color: var(--ink); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Page rhythm applies to page-level sections only. A bare `section` selector
   also caught the chat panel component and the nested .doc-section blocks. */
section { position: relative; }
main > section { padding: 104px 0; }
/* Section intros sit at the left of the container, LS style */
.section-head { max-width: 780px; margin: 0 0 64px; }
.section-head.center { margin-inline: auto; text-align: center; }
.cta .container { text-align: center; }
.grid { display: grid; gap: 24px; }

/* Eyebrow: small, wide-tracked, uppercase - Lemon Squeezy's section label */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}
.hero .eyebrow,
.doc-hero .eyebrow,
.sec-purple .eyebrow,
.sec-ink .eyebrow,
.cta .eyebrow { color: rgba(255, 255, 255, 0.8); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text);
}
h1 { font-size: clamp(2.75rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3rem); }
h3 { font-size: 1.55rem; font-weight: 400; letter-spacing: -0.022em; line-height: 1.2; }
h4 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.015em; }
p  { color: var(--muted); }
.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.012em;
}
.section-head h2 { margin-bottom: 20px; }
.section-head .lead { max-width: 62ch; }
strong, b { font-weight: 600; color: var(--text); }
.text-gold    { color: var(--accent-text); }
.text-emerald { color: var(--ok-text); }
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Buttons: full pills, medium weight, flat ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans);
  font-weight: 500; font-size: var(--fs-lg); letter-spacing: -0.012em;
  padding: 14px 28px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary: brand violet on light ground, plain white on dark ground */
.btn-primary { background: var(--purple-600); color: var(--white); }
.btn-primary:hover { background: var(--purple-700); }
.hero .btn-primary,
.doc-hero .btn-primary,
.band .btn-primary,
.sec-purple .btn-primary,
.sec-ink .btn-primary,
.cta .btn-primary,
.site-footer .btn-primary { background: var(--white); color: var(--ink); }
.hero .btn-primary:hover,
.doc-hero .btn-primary:hover,
.sec-purple .btn-primary:hover,
.sec-ink .btn-primary:hover,
.cta .btn-primary:hover { background: var(--yellow-500); color: var(--ink); }

/* Ghost: hairline chip on light, translucent fill on dark */
.btn-ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--grey-200);
}
.btn-ghost:hover { border-color: var(--purple-300); color: var(--purple-600); }
.hero .btn-ghost,
.doc-hero .btn-ghost,
.band .btn-ghost,
.sec-purple .btn-ghost,
.sec-ink .btn-ghost,
.cta .btn-ghost,
.site-footer .btn-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  border-color: transparent;
}
.hero .btn-ghost:hover,
.doc-hero .btn-ghost:hover,
.sec-purple .btn-ghost:hover,
.sec-ink .btn-ghost:hover,
.cta .btn-ghost:hover,
.site-footer .btn-ghost:hover { background: rgba(255, 255, 255, 0.24); color: var(--white); }

.btn-lg { font-size: var(--fs-xl); padding: 17px 34px; }
.btn-block { display: flex; width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--grey-100);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
/* Transparent over the violet hero, solid once scrolled (home page only) */
body:has(.hero, .doc-hero) .site-header:not(.scrolled):not(.menu-open) {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--white);
}
body:has(.hero, .doc-hero) .site-header:not(.scrolled):not(.menu-open) .nav-links a { color: rgba(255, 255, 255, 0.82); }
body:has(.hero, .doc-hero) .site-header:not(.scrolled):not(.menu-open) .nav-links a:hover { color: var(--white); }
body:has(.hero, .doc-hero) .site-header:not(.scrolled):not(.menu-open) .btn-ghost {
  background: rgba(255, 255, 255, 0.14); color: var(--white); border-color: transparent;
}
body:has(.hero, .doc-hero) .site-header:not(.scrolled):not(.menu-open) .btn-primary {
  background: var(--white); color: var(--ink);
}
.site-header.scrolled { box-shadow: 0 1px 0 var(--grey-100), 0 10px 30px -20px rgba(18, 18, 23, 0.3); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 400;
  letter-spacing: -0.03em; color: inherit;
}
.brand img { width: 32px; height: 32px; }
.brand b { font-weight: 500; }

/* The in-page mark is lemon on an open centre, so the silhouette is identical
   on every ground. Lemon (l60) is nearly invisible on white, so on light
   grounds it is deepened to a gold of the SAME hue and saturation (h42 s100,
   l60 -> l42 = #d69600). Dropping saturation instead is what made an earlier
   pass read brown. Logotypes are exempt from WCAG contrast minimums, so this
   is tuned to look right rather than to hit a ratio. */
.brand img, .ms-brand img { transition: filter .3s ease; }
.site-header.scrolled .brand img,
.site-header.menu-open .brand img,
.mock-side .ms-brand img { filter: brightness(0.78) saturate(1.35); }
/* pages with no hero (the manual) have a solid white header from the start */
body:not(:has(.hero, .doc-hero)) .site-header .brand img { filter: brightness(0.78) saturate(1.35); }
/* On a dark ground the wordmark picks up the flame's lemon, so the mark and the
   name read as one lockup instead of a violet coin next to plain white text.
   The header is a sibling of .hero, so its over-hero state needs its own rule. */
body:has(.hero, .doc-hero) .site-header:not(.scrolled):not(.menu-open) .brand b,
.sec-purple .brand b,
.sec-ink .brand b,
.cta .brand b,
.site-footer .brand b { color: var(--yellow-500); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: var(--fs-base); font-weight: 450; color: var(--grey-700);
  letter-spacing: -0.012em; transition: color .18s ease;
}
.nav-links a:hover { color: var(--purple-600); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 10px 22px; font-size: var(--fs-base); }
.nav-toggle { display: none; padding: 8px; border-radius: 10px; color: inherit; }
.nav-toggle svg { width: 24px; height: 24px; }

/* ---------- Hero: full violet block ---------- */
.hero {
  position: relative;
  padding: 190px 0 120px;
  background: var(--purple-600);
  overflow: hidden;
  isolation: isolate;
}
/* Hero decoration is two flat layers, no artwork: three soft colour blooms for
   depth, then a fine dot grid masked to fade before it reaches the copy. This
   replaced a large low-opacity flame watermark, which read as a smudge over the
   headline and dated the whole section. */
.hero::before {
  content: "";
  position: absolute; inset: -25% -12% auto -12%; height: 125%;
  background:
    radial-gradient(44rem 27rem at 86% -8%, rgba(255, 194, 51, 0.32), transparent 64%),
    radial-gradient(50rem 32rem at 4% 6%,  rgba(207, 117, 255, 0.34), transparent 62%),
    radial-gradient(38rem 24rem at 62% 104%, rgba(0, 172, 255, 0.20), transparent 64%);
  z-index: -2;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.20) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 78% at 88% 4%, #000 6%, transparent 62%);
  mask-image: radial-gradient(120% 78% at 88% 4%, #000 6%, transparent 62%);
  z-index: -1;
  pointer-events: none;
}
.hero .container { position: relative; }
.hero h1 { max-width: 21ch; margin-bottom: 26px; }
.hero .lead { max-width: 58ch; font-size: clamp(1.1rem, 1.5vw, 1.32rem); color: rgba(255, 255, 255, 0.78); }

/* Price strip - a lemon "sticker" on the violet */
.hero-price {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin: 34px 0 0;
  padding: 16px 24px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}
.hero-price .hp-from {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.hero-price .hp-amt {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 400;
  letter-spacing: -0.04em; line-height: 1; color: var(--yellow-500);
}
.hero-price .hp-note {
  flex: 1 1 100%; font-size: var(--fs-md); line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; }
.hero-note span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-md); color: rgba(255, 255, 255, 0.84);
}
.hero-note svg { width: 17px; height: 17px; color: var(--yellow-500); flex: 0 0 auto; }
.p-trial {
  /* standalone link, so it needs the WCAG 2.5.8 24px minimum at every width */
  display: block; margin-top: 12px; padding: 7px 0; text-align: center;
  font-size: var(--fs-md); color: var(--muted); text-decoration: underline;
  text-decoration-color: var(--grey-200); text-underline-offset: 3px;
}
.p-trial:hover { color: var(--purple-600); text-decoration-color: var(--purple-300); }

/* ---------- Product mock: a light UI floating over the colour block ------- */
.mock-wrap { margin-top: 72px; }
.browser {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-float);
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.browser:hover { transform: translateY(-6px); }
.browser-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  background: var(--smoke);
  border-bottom: 1px solid var(--grey-100);
}
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--grey-200); }
.dots i:nth-child(1) { background: #ff6058; }
.dots i:nth-child(2) { background: #ffc233; }
.dots i:nth-child(3) { background: #2dca72; }
.browser-url {
  flex: 1; max-width: 460px;
  padding: 6px 14px; border-radius: var(--pill);
  background: var(--white); border: 1px solid var(--grey-100);
  font-size: var(--fs-xs); color: var(--grey-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); background: var(--white); }
.mock-side { padding: 20px 14px; border-right: 1px solid var(--grey-100); background: var(--smoke); }
.mock-side .ms-brand {
  display: flex; align-items: center; gap: 9px; padding: 0 10px 18px;
  font-family: var(--font-display); font-size: var(--fs-base); letter-spacing: -0.02em; color: var(--ink);
}
.mock-side .ms-brand img { width: 22px; height: 22px; border-radius: 6px; }
.mock-nav {
  padding: 9px 12px; border-radius: 10px; margin-bottom: 3px;
  font-size: var(--fs-md); color: var(--grey-500);
}
.mock-nav.active { background: var(--purple-600); color: var(--white); font-weight: 500; }
.mock-nav:not(.active):hover { background: var(--grey-100); color: var(--ink); }
.mock-main { padding: 24px; display: grid; gap: 16px; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card {
  padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--grey-100);
}
.stat-card .sc-label {
  font-size: var(--fs-2xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 8px;
}
.stat-card .sc-val {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 400;
  letter-spacing: -0.04em; line-height: 1; color: var(--ink);
}
.mock-emp {
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--grey-100); background: var(--white);
}
/* Sits inside .split-media (already smoke) - keep it white so it reads as a panel */
.mock-emp-muted { background: var(--white); }
.mock-row-label {
  font-size: var(--fs-2xs) !important; font-weight: 500; letter-spacing: var(--track-label);
  color: var(--grey-500); text-transform: uppercase;
}
.emp-header-spacer { width: 28px; }
.emp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--grey-100);
  font-size: var(--fs-md); color: var(--grey-700);
}
.emp-row:first-child { border-top: none; }
.emp-av {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--purple-100); color: var(--purple-700);
  font-size: var(--fs-2xs); font-weight: 600;
}
.emp-name { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--pill);
  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
  background: var(--grey-100); color: var(--grey-500);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.on   { background: var(--green-100);  color: var(--on-green); }
.pill.idle { background: var(--yellow-100); color: var(--on-amber); }
.pill.off  { background: var(--grey-100);   color: var(--on-grey); }
.mock-bars { display: flex; align-items: flex-end; gap: 5px; height: 66px; margin-top: 12px; }
.mock-bars i {
  flex: 1; border-radius: 4px 4px 2px 2px;
  background: var(--purple-500);
  animation: barGrow .9s cubic-bezier(.2,.8,.3,1) backwards;
}
@keyframes barGrow { from { transform: scaleY(0.05); transform-origin: bottom; } }
.mock-bars i:nth-child(1)  { height: 46%; animation-delay: .05s; background: var(--purple-200); }
.mock-bars i:nth-child(2)  { height: 62%; animation-delay: .10s; background: var(--purple-300); }
.mock-bars i:nth-child(3)  { height: 78%; animation-delay: .15s; background: var(--purple-400); }
.mock-bars i:nth-child(4)  { height: 54%; animation-delay: .20s; background: var(--purple-300); }
.mock-bars i:nth-child(5)  { height: 88%; animation-delay: .25s; background: var(--purple-500); }
.mock-bars i:nth-child(6)  { height: 96%; animation-delay: .30s; background: var(--yellow-500); }
.mock-bars i:nth-child(7)  { height: 70%; animation-delay: .35s; background: var(--purple-400); }
.mock-bars i:nth-child(8)  { height: 40%; animation-delay: .40s; background: var(--purple-200); }
.mock-bars i:nth-child(9)  { height: 66%; animation-delay: .45s; background: var(--purple-400); }
.mock-bars i:nth-child(10) { height: 82%; animation-delay: .50s; background: var(--purple-500); }
.mock-bars i:nth-child(11) { height: 58%; animation-delay: .55s; background: var(--purple-300); }
.mock-bars i:nth-child(12) { height: 34%; animation-delay: .60s; background: var(--purple-200); }

/* ---------- Stat band: continues the violet, split by a hairline ---------- */
.band {
  background: var(--purple-600);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 56px 0;
}
.band .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  text-align: center;
}
.band .b-num {
  font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 400; letter-spacing: -0.04em; line-height: 1;
  color: var(--yellow-500); margin-bottom: 8px;
}
.band .b-lbl { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.84); }

/* ---------- Numbered feature cards ---------- */
.cards { grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: 1fr; }
.card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--purple-200); box-shadow: var(--shadow); }
.sec-ink .card:hover, .sec-purple .card:hover { border-color: rgba(255, 255, 255, 0.34); box-shadow: none; }

/* The "01 / 02 / 03" index label - each card gets its own hue */
.card-num {
  display: inline-block;
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 12px; border-radius: var(--pill);
  margin-bottom: 22px;
}
.cards > *:nth-child(6n+1) .card-num { background: var(--purple-100); color: var(--on-purple); }
.cards > *:nth-child(6n+2) .card-num { background: var(--orange-100); color: var(--on-orange); }
.cards > *:nth-child(6n+3) .card-num { background: var(--green-100);  color: var(--on-green); }
.cards > *:nth-child(6n+4) .card-num { background: var(--pink-100);   color: var(--on-pink); }
.cards > *:nth-child(6n+5) .card-num { background: var(--blue-100);   color: var(--on-blue); }
.cards > *:nth-child(6n+6) .card-num { background: var(--yellow-100); color: var(--on-amber); }
.sec-ink .card-num, .sec-purple .card-num {
  background: rgba(255, 255, 255, 0.12) !important; color: var(--white) !important;
}

.card .ic {
  width: 46px; height: 46px; margin-bottom: 20px;
  border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.sec-ink .card .ic, .sec-purple .card .ic { color: var(--yellow-500); }
.card .ic svg { width: 23px; height: 23px; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: var(--fs-base); line-height: 1.6; }

/* ---------- Steps ---------- */
.steps { grid-template-columns: repeat(3, 1fr); counter-reset: step; gap: 20px; grid-auto-rows: 1fr; }
.step {
  position: relative; padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 22px;
  border-radius: 50%;
  background: var(--purple-600); color: var(--white);
}
.sec-ink .step::before, .sec-purple .step::before { background: var(--yellow-500); color: var(--ink); }
.step h3 { margin-bottom: 12px; }
.step p { font-size: var(--fs-base); line-height: 1.6; }

/* ---------- Split feature rows ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
.split + .split { margin-top: 112px; }
.split.rev .split-media { order: -1; }
.split h2 { margin-bottom: 20px; }
.split .lead { margin-bottom: 28px; }
.feature-list { display: grid; gap: 14px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--fs-lg); color: var(--muted); line-height: 1.55;
}
.feature-list svg {
  width: 21px; height: 21px; flex: 0 0 auto; margin-top: 2px;
  color: var(--green-500);
}
.feature-list b { color: var(--text); font-weight: 600; }
.split-media {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}

/* ---------- Security grid (dark block) ---------- */
.sec-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: 1fr; }
.sec-item {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.sec-item:hover { transform: translateY(-4px); border-color: var(--hairline-2); }
.sec-item .ic {
  width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent-text);
}
.sec-item .ic svg { width: 22px; height: 22px; }
.sec-item h3 { font-size: var(--fs-3xl); margin-bottom: 10px; }
.sec-item p { font-size: var(--fs-base); line-height: 1.6; }

/* ---------- Architecture strip ---------- */
.architecture-heading { margin-top: 104px; }
.arch { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 0; }
.arch-node {
  flex: 1; min-width: 190px;
  padding: 26px 20px; text-align: center;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.arch-node .an-ic {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent-text);
}
.arch-node .an-ic svg { width: 23px; height: 23px; }
.arch-node h3 { font-size: var(--fs-xl); font-weight: 500;
  letter-spacing: -0.015em; margin-bottom: 6px; }
.arch-node p { font-size: var(--fs-md); line-height: 1.5; }
.arch-link {
  display: grid; place-items: center; gap: 2px;
  padding: 0 10px; flex: 0 0 auto;
  color: var(--accent-text);
}
.arch-link span { font-size: var(--fs-2xs); color: var(--muted-2); white-space: nowrap; }
.arch-link svg { width: 30px; height: 30px; }

/* ---------- Pricing ---------- */
.pricing-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 auto 44px; padding: 5px;
  border-radius: var(--pill);
  background: var(--white); border: 1px solid var(--grey-200);
}
.pricing-toggle button {
  padding: 9px 20px; border-radius: var(--pill);
  font-size: var(--fs-base); font-weight: 500; color: var(--grey-500);
}
.pricing-toggle button.active { background: var(--purple-600); color: var(--white); }
.save-badge {
  display: inline-block; margin-left: 8px;
  padding: 2px 9px; border-radius: var(--pill);
  background: var(--yellow-100); color: var(--yellow-700);
  font-size: var(--fs-xs); font-weight: 600;
}

/* No align-items:start here - the cards must stretch to a common row height,
   and .price ul { flex: 1 } then absorbs the difference so the CTAs line up. */
.prices { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price {
  position: relative;
  padding: 34px 30px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--grey-100);
  display: flex; flex-direction: column;
}
/* The highlighted plan: violet block, exactly the LS treatment */
.price.popular {
  background: var(--purple-600);
  border-color: var(--purple-600);
  box-shadow: 0 30px 70px -34px rgba(84, 35, 231, 0.55);
  --text: var(--white);
  --muted: rgba(255, 255, 255, 0.82);
  --hairline: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.price-tag {
  position: absolute; top: 20px; right: 22px;
  padding: 5px 13px; border-radius: var(--pill);
  background: var(--yellow-500); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
}
.price h3 { margin-bottom: 8px; color: var(--text); }
.price .p-desc { font-size: var(--fs-base); line-height: 1.55; color: var(--muted); min-height: 3em; }
.price .amount { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 6px; }
.price .amount .num {
  font-family: var(--font-display); font-size: 3.1rem; font-weight: 400;
  letter-spacing: -0.045em; line-height: 1; color: var(--text);
}
.price .amount .per { font-size: var(--fs-md); color: var(--muted); }
.price .p-sub { font-size: var(--fs-md); color: var(--muted); margin-bottom: 26px; }
.price ul { display: grid; gap: 12px; margin-bottom: 28px; flex: 1; }
.price li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: var(--fs-base); line-height: 1.5; color: var(--text);
}
.price li svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; color: var(--green-500); }
.price.popular li svg { color: var(--yellow-500); }
.price li.off { color: var(--muted-2); }
.price li.off svg { color: var(--grey-200); }
.price .btn { margin-top: auto; }
.price.popular .btn-primary { background: var(--white); color: var(--ink); }
.price.popular .btn-primary:hover { background: var(--yellow-500); }
.price.popular .p-trial { color: rgba(255, 255, 255, 0.72); text-decoration-color: rgba(255, 255, 255, 0.4); }
.price.popular .p-trial:hover { color: var(--white); }

.pricing-note {
  max-width: 74ch; margin: 32px auto 0;
  font-size: var(--fs-md); line-height: 1.6; color: var(--muted); text-align: center;
}

/* ---------- Managed hosting panel ---------- */
.cloud-hosting {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 28px;
  padding: 32px 34px;
  border-radius: var(--radius-lg);
  background: var(--yellow-100);
  border: 1px solid var(--yellow-200);
}
.cloud-hosting-body { flex: 1 1 24rem; min-width: 0; }
.cloud-hosting h3 { margin-bottom: 8px; color: var(--ink); }
.cloud-hosting p { margin-bottom: 16px; font-size: var(--fs-base); line-height: 1.6; color: var(--grey-700); }
.cloud-hosting .cloud-note { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--grey-500); }
.cloud-hosting .btn-ghost { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cloud-hosting .btn-ghost:hover { background: var(--purple-600); border-color: var(--purple-600); color: var(--white); }
.cloud-tiers { display: flex; flex-wrap: wrap; gap: 10px; }
.cloud-tiers li {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 15px; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-base); color: var(--grey-700);
}
.cloud-tiers li span { color: var(--grey-500); font-size: var(--fs-sm); }
.cloud-tiers li strong { color: var(--purple-600); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.faq details:first-child { border-top: 1px solid var(--hairline); }
.faq summary {
  position: relative;
  list-style: none; cursor: pointer;
  padding: 26px 52px 26px 0;
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 400;
  letter-spacing: -0.022em; color: var(--text);
  transition: color .2s ease;
}
.faq summary:hover { color: var(--purple-600); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; top: 50%; right: 6px;
  width: 13px; height: 13px; margin-top: -9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
  opacity: 0.55;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -4px; }
.faq details[open] summary { color: var(--purple-600); }
.faq .faq-body {
  padding: 0 60px 28px 0;
  font-size: var(--fs-lg); line-height: 1.65; color: var(--muted);
}
.faq .faq-body a { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Closing CTA ---------- */
.cta {
  position: relative;
  background: var(--purple-600);
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute; inset: auto -10% -60% -10%; height: 120%;
  background:
    radial-gradient(40rem 24rem at 20% 100%, rgba(255, 194, 51, 0.26), transparent 62%),
    radial-gradient(40rem 26rem at 84% 8%, rgba(207, 117, 255, 0.30), transparent 60%);
  z-index: -1;
}
.cta h2 { max-width: 22ch; margin: 0 auto 20px; }
.cta .lead { max-width: 58ch; margin: 0 auto; color: rgba(255, 255, 255, 0.78); }
.cta .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); padding: 80px 0 36px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px; padding-bottom: 48px;
}
.footer-brand .brand { color: var(--white); margin-bottom: 16px; }
.footer-brand p { font-size: var(--fs-base); line-height: 1.65; max-width: 34ch; color: rgba(255, 255, 255, 0.6); }
.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-col h3 {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58); margin-bottom: 4px;
}
.footer-col a { font-size: var(--fs-base); color: rgba(255, 255, 255, 0.72); transition: color .18s ease; }
.footer-col a:hover { color: var(--yellow-500); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-md); color: rgba(255, 255, 255, 0.5);
}
.footer-bottom-compact { padding-top: 0; border-top: none; }
.footer-home-link { color: rgba(255, 255, 255, 0.72); }
.footer-home-link:hover { color: var(--yellow-500); }

/* ---------- Assistant widget ----------------------------------------------
   The launcher and the panel both carry the lemon ring, so the widget reads as
   part of the brand rather than a bolted-on chat box. Structure is three bands:
   violet header, smoke conversation, white composer.
   ------------------------------------------------------------------------- */
.chat-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--purple-600); color: var(--white);
  border: 2px solid var(--yellow-500);
  box-shadow: 0 14px 32px -12px rgba(84, 35, 231, 0.6), 0 2px 6px rgba(18, 18, 23, 0.18);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), background .2s ease, box-shadow .22s ease;
}
.chat-launch:hover {
  transform: translateY(-3px);
  background: var(--purple-700);
  box-shadow: 0 20px 40px -12px rgba(84, 35, 231, 0.7), 0 0 0 6px rgba(255, 194, 51, 0.22);
}
.chat-launch:active { transform: translateY(-1px); }
/* hidden while the panel is open - a class, not an inline style, so it does
   not depend on the page's style-src policy */
.chat-launch.is-hidden { display: none; }
.chat-launch:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 3px; }
.chat-launch svg { width: 26px; height: 26px; }
.chat-launch .badge-dot {
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--yellow-500); border: 2px solid var(--purple-600);
}

.chat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 71;
  width: min(396px, calc(100vw - 32px));
  max-height: min(660px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  border-radius: 24px;
  background: var(--white);
  border: 2px solid var(--yellow-500);
  box-shadow: 0 32px 70px -24px rgba(20, 6, 74, 0.42), 0 4px 12px rgba(18, 18, 23, 0.1);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97);
  transition: opacity .22s ease, transform .24s cubic-bezier(.2,.8,.3,1), visibility .24s;
}
.chat-panel.open { opacity: 1; visibility: visible; transform: none; }

.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  background: var(--purple-600); color: var(--white);
  flex: 0 0 auto;
}
.chat-head img { width: 34px; height: 34px; flex: 0 0 auto; }
.chat-head .ch-title {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
}
.chat-head .ch-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.82);
}
.chat-head .ch-sub::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-400); flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(86, 217, 144, 0.28);
}
.chat-close {
  margin-left: auto; flex: 0 0 auto;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; color: rgba(255, 255, 255, 0.85);
  transition: background .18s ease, color .18s ease;
}
.chat-close:hover { background: rgba(255, 255, 255, 0.18); color: var(--white); }
.chat-close:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }
.chat-close svg { width: 18px; height: 18px; }

.chat-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--smoke);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-200) transparent;
}
.chat-body::-webkit-scrollbar { width: 10px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body::-webkit-scrollbar-thumb {
  background: var(--grey-200); border-radius: var(--pill);
  border: 3px solid var(--smoke);
}
.chat-body::-webkit-scrollbar-thumb:hover { background: var(--grey-300); }

.msg {
  max-width: 88%; padding: 11px 15px;
  font-size: var(--fs-base); line-height: 1.55;
  border-radius: 18px;
  overflow-wrap: break-word;
}
.msg.bot {
  align-self: flex-start;
  background: var(--white); color: var(--grey-700);
  border: 1px solid var(--grey-100);
  border-bottom-left-radius: 6px;
}
.msg.user {
  align-self: flex-end;
  background: var(--purple-600); color: var(--white);
  border-bottom-right-radius: 6px;
}
.msg.user strong { color: var(--white); }
.msg.bot a { color: var(--purple-700); text-decoration: underline; text-underline-offset: 2px; }
.msg.bot a:hover { color: var(--purple-600); }
.msg.bot strong { color: var(--ink); }
.msg.bot ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.msg.bot ul li::marker { color: var(--purple-300); }
/* Follow-up hint appended to a bot answer by chat.js. Was an inline style
   attribute, which this site's style-src policy blocks. */
.msg-related {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--grey-100);
  font-size: var(--fs-sm);
  color: var(--grey-500);
}
.msg-related a { color: var(--purple-700); text-decoration: underline; text-underline-offset: 2px; }
.msg-related a:hover { color: var(--purple-600); }
.msg.bot code {
  font-size: 0.86em; padding: 1px 5px;
}

/* typing indicator matches a bot bubble so the column does not jump */
.chat-typing {
  align-self: flex-start;
  display: inline-flex; gap: 4px; align-items: center;
  padding: 14px 16px;
  background: var(--white); border: 1px solid var(--grey-100);
  border-radius: 18px; border-bottom-left-radius: 6px;
}
.chat-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple-300); animation: blink 1.4s infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .2s; }
.chat-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* composer: chips + input + disclaimer read as one white band */
.chat-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 12px 16px 0;
  background: var(--white);
  border-top: 1px solid var(--grey-100);
  flex: 0 0 auto;
}
.chat-chips:empty { display: none; }
.chat-chips button {
  padding: 7px 14px; border-radius: var(--pill);
  background: var(--purple-50); color: var(--purple-700);
  font-size: var(--fs-sm); font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
.chat-chips button:hover { background: var(--purple-100); }
.chat-chips button:focus-visible { outline: 2px solid var(--purple-400); outline-offset: 2px; }

.chat-input {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px 10px; background: var(--white);
  flex: 0 0 auto;
}
/* when there are no chips the composer supplies the separator instead */
.chat-chips:empty + .chat-input { border-top: 1px solid var(--grey-100); }
.chat-input input {
  flex: 1; min-width: 0;
  padding: 12px 16px; border-radius: var(--pill);
  background: var(--smoke); border: 1px solid var(--grey-100);
  font-family: inherit; font-size: var(--fs-base); color: var(--ink);
  transition: border-color .18s ease, background .18s ease;
}
.chat-input input::placeholder { color: var(--grey-500); }
.chat-input input:focus {
  outline: none; border-color: var(--purple-400); background: var(--white);
  box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.16);
}
.chat-input button {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--purple-600); color: var(--white);
  transition: background .18s ease, transform .18s ease;
}
.chat-input button:hover { background: var(--purple-700); transform: scale(1.05); }
.chat-input button:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }
.chat-input button svg { width: 18px; height: 18px; margin-left: -1px; }

.chat-disclaimer {
  padding: 0 16px 12px; margin: 0;
  font-size: var(--fs-2xs); color: var(--grey-500); text-align: center;
  background: var(--white);
  flex: 0 0 auto;
}
/* ---------- Manual / docs ---------- */
/* Compact violet document header, so the manual reads as the same product as
   the home page rather than a bare white page. */
.doc-hero {
  position: relative;
  padding: 152px 0 72px;
  background: var(--purple-600);
  overflow: hidden;
  isolation: isolate;
}
.doc-hero::before {
  content: "";
  position: absolute; inset: -40% -12% auto -12%; height: 150%;
  background:
    radial-gradient(38rem 22rem at 88% -10%, rgba(255, 194, 51, 0.30), transparent 64%),
    radial-gradient(42rem 26rem at 2% 10%,  rgba(207, 117, 255, 0.30), transparent 62%);
  z-index: -1;
  pointer-events: none;
}
.doc-hero h1 { max-width: 22ch; margin-bottom: 18px; }
.doc-hero .lead { max-width: 62ch; color: rgba(255, 255, 255, 0.82); }
.doc-hero .hero-cta { margin-top: 28px; }
.crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 22px;
  font-size: var(--fs-md); color: rgba(255, 255, 255, 0.72);
}
.crumbs a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--white); text-decoration-color: var(--yellow-500); }
.crumbs span[aria-current] { color: var(--yellow-500); }

.doc-shell { padding: 72px 0 96px; background: var(--white); }
.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.doc-toc {
  position: sticky; top: 108px;
  max-height: calc(100vh - 140px); overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-200) transparent;
}
.doc-toc::-webkit-scrollbar { width: 8px; }
.doc-toc::-webkit-scrollbar-track { background: transparent; }
.doc-toc::-webkit-scrollbar-thumb {
  background: var(--grey-200); border-radius: var(--pill); border: 2px solid var(--white);
}
.doc-toc::-webkit-scrollbar-thumb:hover { background: var(--grey-300); }
/* The links sit inside a <nav>, so the column layout belongs on that, not on
   .doc-toc. With it on the container the anchors stayed inline and wrapped as
   running text. */
.doc-toc nav { display: grid; gap: 2px; }
.toc-label {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--grey-500); margin: 0 0 10px; padding: 0 14px;
}
.doc-toc a {
  display: block;                 /* inline anchors cannot stack or hold padding */
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: var(--fs-md); line-height: 1.4; color: var(--grey-500);
  transition: background .18s ease, color .18s ease;
}
.doc-toc a:hover, .doc-toc a.active { background: var(--purple-50); color: var(--purple-700); font-weight: 500; }
.doc-content { min-width: 0; max-width: 78ch; }
/* Pages with no table of contents (security, privacy, terms) centre the
   single column instead of hugging the left edge where the TOC would be. */
.doc-content.solo { margin-inline: auto; }
.doc-content.solo .doc-section:first-of-type { padding-top: 0; }
.doc-section { padding: 56px 0 0; }
.doc-section:first-of-type { padding-top: 0; }
.doc-section h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 18px; }
.doc-section h3 { font-size: var(--fs-3xl); margin: 34px 0 12px; }
.doc-content p { margin-bottom: 16px; line-height: 1.7; }
.doc-content ul.bullets, .doc-content ol { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 22px; color: var(--muted); line-height: 1.65; }
.doc-content ul.bullets { list-style: disc; }
.doc-content ol { list-style: decimal; }
.doc-content ul.bullets li::marker, .doc-content ol li::marker { color: var(--purple-300); }
.doc-content strong { color: var(--ink); }
.doc-content a.inline { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }
.code {
  margin: 0 0 20px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--ink); color: #e6e6f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-md); line-height: 1.7;
  overflow-x: auto; white-space: pre;
}
.code .c { color: #8b8ba7; }
.code .k { color: var(--yellow-400); }
kbd {
  display: inline-block; padding: 2px 7px;
  border-radius: 6px; border: 1px solid var(--grey-200); border-bottom-width: 2px;
  background: var(--smoke); font-family: inherit; font-size: 0.875em; color: var(--grey-700);
}
.note {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 0 0 20px; padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
}
.note svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 2px; color: var(--purple-600); }
.note.tip { background: var(--green-100); border-color: #b2eecc; }
.note.tip svg { color: var(--green-700); }
.note.warn { background: var(--yellow-100); border-color: var(--yellow-200); }
.note.warn svg { color: var(--yellow-700); }
.note p { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--grey-700); }
.doc-table {
  width: 100%; margin: 0 0 22px;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--grey-100); border-radius: var(--radius);
  overflow: hidden; font-size: var(--fs-base);
}
.doc-table th, .doc-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--grey-100); }
.doc-table tr:last-child th, .doc-table tr:last-child td { border-bottom: none; }
.doc-table th {
  background: var(--smoke); color: var(--ink);
  font-weight: 500; font-size: var(--fs-sm); letter-spacing: var(--track-label); text-transform: uppercase;
}
.doc-table td { color: var(--muted); }
/* Every inline <code>, not just the ones in a p/li/table - the FAQ puts them
   straight inside a div, and those were falling back to the browser default. */
code {
  padding: 2px 7px; border-radius: 6px;
  background: var(--purple-50); border: 1px solid var(--purple-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em; color: var(--purple-700);
}

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .mock-bars i { animation: none; }
}
/* .reveal is un-hidden by main.js; without scripting the page must not stay blank */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .doc-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 980px) {
  /* 6-item grids halve cleanly. The 3-item ones (steps, prices) would leave
     an orphan in a second row, so they hold three columns until they stack
     outright at 720. Long CTA labels wrap instead of setting the width. */
  .cards, .sec-grid { grid-template-columns: 1fr 1fr; }
  .steps, .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .btn { white-space: normal; }
  /* plan CTAs must stay one line, or a wrapped label makes one button
     taller and the three CTA rows stop lining up */
  .price .btn { white-space: nowrap; font-size: var(--fs-md); padding-inline: 14px; }
  .price { padding: 26px 20px; }
  .price .amount .num { font-size: 2.4rem; }
  .step, .card, .sec-item { padding: 26px 22px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split + .split { margin-top: 80px; }
  .split.rev .split-media { order: 0; }
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; max-height: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .band .container { grid-template-columns: 1fr 1fr; gap: 32px; }
  .arch { flex-direction: column; }
  .arch-link { transform: rotate(90deg); padding: 10px 0; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  main > section { padding: 76px 0; }
  .hero { padding: 148px 0 84px; }
  .nav { height: 68px; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
  .site-header.menu-open { background: var(--white); border-bottom-color: var(--grey-100); color: var(--ink); }
  .site-header.menu-open .nav-links {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 24px 20px;
    background: var(--white); border-bottom: 1px solid var(--grey-100);
  }
  .site-header.menu-open .nav-links a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--grey-100); }
  .cards, .steps, .sec-grid, .prices, .band .container, .footer-grid { grid-template-columns: 1fr; }
  .cards, .sec-grid, .steps { grid-auto-rows: auto; }
  .browser-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-wrap { margin-top: 48px; }
  .card, .step, .sec-item, .price { padding: 26px 22px; }
  .cloud-hosting { padding: 26px 22px; }
  .split-media { padding: 18px; }
  .architecture-heading { margin-top: 72px; }
  .faq summary { font-size: var(--fs-xl); padding-right: 40px; }
  .faq .faq-body { padding-right: 20px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .doc-shell { padding: 108px 0 72px; }
  /* the launcher hides while the panel is open, so the panel can use that space */
  .chat-launch { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .chat-launch svg { width: 23px; height: 23px; }
  .chat-panel {
    right: 10px; left: 10px; bottom: 10px; width: auto;
    max-height: calc(100vh - 20px); border-radius: 20px;
  }
  .chat-body { padding: 14px 13px; }
  .msg { max-width: 92%; }
}

/* ============================================================================
   Narrow-viewport corrections
   Three separate causes of horizontal scroll below ~400px, all real:
     1. a `1fr` grid track cannot shrink below its content's min-content size,
        so one nowrap child (a status pill, a long button label) inflated the
        whole column. minmax(0, 1fr) lets the track actually shrink.
     2. flex/grid items default to min-width:auto, same problem one level down.
     3. the header row's own min-content (brand + CTA + toggle) exceeded 320px.
   ========================================================================= */
@media (max-width: 720px) {
  .split, .cards, .steps, .sec-grid, .prices,
  .band .container, .footer-grid, .browser-body { grid-template-columns: minmax(0, 1fr); }
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .mock-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .card, .step, .sec-item, .price, .stat-card,
  .mock-emp, .split-media, .arch-node, .cloud-hosting-body { min-width: 0; }
  .stat-card { padding: 12px 13px; }
  .stat-card .sc-label { white-space: normal; }
  /* status pills sit next to a name; let the row wrap rather than widen the page */
  .emp-row { flex-wrap: wrap; row-gap: 5px; }
  .cloud-tiers li { flex: 1 1 auto; }
  /* tap targets: WCAG 2.5.8 asks 24x24 */
  .footer-col a { padding: 4px 0; }
  .nav-toggle { width: 44px; height: 44px; padding: 10px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  /* the whole header row has to fit inside 320px */
  .nav { gap: 12px; }
  .brand { font-size: var(--fs-lg); gap: 9px; }
  .brand img { width: 28px; height: 28px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 9px 15px; font-size: var(--fs-md); }
  .site-header.menu-open .nav-links { top: 60px; padding-inline: 16px; }
  /* long CTA labels wrap instead of setting the page width */
  .btn { white-space: normal; }
  .btn-lg { font-size: var(--fs-lg); padding: 14px 24px; }
  h1 { font-size: clamp(1.9rem, 8.6vw, 2.75rem); }
  h2 { font-size: clamp(1.6rem, 7.2vw, 2.1rem); }
  .hero { padding: 128px 0 68px; }
  .hero-price { padding: 14px 18px; }
  .hero-price .hp-amt { font-size: 2rem; }
  .price .amount .num { font-size: 2.5rem; }
  main > section { padding: 64px 0; }
  .faq summary { font-size: var(--fs-lg); padding-right: 34px; }
  .code { padding: 16px 14px; font-size: var(--fs-sm); }
}

/* A wide table has to scroll inside its own box. Without this the table's own
   box width (up to 599px) sets the page width on a 320px screen. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-bottom: 22px;
}
.table-scroll .doc-table { margin-bottom: 0; min-width: 28rem; }
@media (max-width: 480px) {
  .table-scroll .doc-table { min-width: 22rem; font-size: var(--fs-md); }
  .table-scroll .doc-table th, .table-scroll .doc-table td { padding: 11px 12px; }
}

/* ---------- Code Block Copy Button ---------- */
.code-wrapper {
  position: relative;
  margin: 0 0 20px;
}
.code-wrapper .code {
  margin: 0;
}
.code-wrapper .btn-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-sm);
  color: var(--grey-500);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-wrapper:hover .btn-copy {
  opacity: 1;
}
.code-wrapper .btn-copy:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--grey-300);
}
.code-wrapper .btn-copy svg {
  width: 16px;
  height: 16px;
}
.code-wrapper .btn-copy.copied {
  color: var(--green-500);
  border-color: var(--green-500);
}
/* Ensure button is visible on touch devices or smaller screens */
@media (max-width: 720px) {
  .code-wrapper .btn-copy { opacity: 1; }
}