/* Hello Translator — public site
   Tokens copied from the Hello World Solution design system (tokens/colors.css, typography.css,
   spacing.css, effects.css). Fonts are self-hosted (SIL OFL 1.1, see fonts/OFL.txt). */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/prompt-thai-400-normal.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/prompt-thai-500-normal.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/prompt-thai-600-normal.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/prompt-latin-400-normal.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: 'Prompt'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/prompt-latin-500-normal.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: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/prompt-latin-600-normal.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: 'Sora'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/sora-latin-600-normal.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: 'Sora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/sora-latin-700-normal.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; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --hw-blue: #2563EB; --hw-purple: #7C3AED; --hw-cyan: #06B6D4;
  --hw-space-950: #04060E; --hw-space-900: #070B18; --hw-space-850: #0B1022; --hw-space-800: #0F172A; --hw-space-700: #1A2340;
  --hw-success: #10B981; --hw-warning: #F59E0B; --hw-warning-soft: rgba(245,158,11,.14);

  --grad-primary: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  --grad-secondary: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --grad-swoosh: linear-gradient(90deg, #0A6CFF 0%, #6FB0FF 35%, #C9C4F6 50%, #A665F5 70%, #7C2CF5 100%);
  --grad-text: linear-gradient(90deg, #60A5FA 0%, #A78BFA 55%, #67E8F9 100%);

  --bg-page: var(--hw-space-950);
  --surface-1: var(--hw-space-900);
  --surface-2: var(--hw-space-850);
  --surface-3: var(--hw-space-700);
  --surface-glass: rgba(255,255,255,.04);
  --border-subtle: rgba(255,255,255,.08);
  --border-default: rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.28);
  --text-1: #F5F7FF; --text-2: #A9B4D0; --text-3: #8591B0;
  --text-link: #7FB0FF; --text-link-hover: #B8A4FF;
  --focus-ring: 0 0 0 3px rgba(96,154,250,.55);

  --shadow-md: 0 8px 24px rgba(4,6,14,.32);
  --shadow-lg: 0 24px 64px rgba(4,6,14,.48);
  --glow-blue: 0 0 0 1px rgba(96,154,250,.35), 0 8px 32px rgba(37,99,235,.45);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: 150ms; --dur-base: 250ms;

  --font-display: 'Sora', 'Prompt', system-ui, sans-serif;
  --font-body: 'Prompt', 'Sora', system-ui, sans-serif;

  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px;
  --container-max: 1200px; --container-pad: 24px; --nav-height: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg-page); color: var(--text-1);
  font: 400 16px/26px var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* deep-space bloom + masked dot grid — the same composition and strengths
   as the app (ui/src/index.css "Brand signature") and the brand's cover art:
   purple/blue bloom top-right, blue/cyan glow bottom-left, blue dots masked
   to the top-right corner. Fixed, behind everything, never takes a click. */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  background:
    radial-gradient(75% 65% at 100% 0%, rgba(124,58,237,.40) 0%, rgba(37,99,235,.18) 42%, rgba(4,6,14,0) 75%),
    radial-gradient(55% 45% at 0% 100%, rgba(6,182,212,.13) 0%, rgba(37,99,235,.10) 40%, rgba(4,6,14,0) 72%);
}
body::after {
  background-image: radial-gradient(rgba(127,176,255,.16) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(90% 75% at 100% 0%, #000 0%, rgba(0,0,0,.45) 40%, transparent 72%);
          mask-image: radial-gradient(90% 75% at 100% 0%, #000 0%, rgba(0,0,0,.45) 40%, transparent 72%);
}
img, svg { max-width: 100%; }
a { color: var(--text-link); text-decoration: underline; text-decoration-color: rgba(127,176,255,.35); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
::selection { background: rgba(124,58,237,.45); color: #fff; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -0.02em; }
h1 { font-weight: 700; font-size: clamp(34px, 6vw, 60px); line-height: 1.15; }
h2 { font-weight: 700; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.25; }
h3 { font-weight: 600; font-size: 20px; line-height: 28px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 1.3em; }
li { margin-bottom: 6px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface-glass); border: 1px solid var(--border-subtle); padding: 1px 6px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--surface-3); color: var(--text-1); padding: 10px 16px; border-radius: var(--radius-pill); }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
@media (max-width: 480px) { :root { --container-pad: 16px; } }

.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.i-sm { width: 18px; height: 18px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--nav-height);
  background: rgba(4,6,14,.72); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-1); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand:hover { color: var(--text-1); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { color: var(--text-2); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text-1); background: rgba(255,255,255,.06); }
.nav .btn { margin-left: 8px; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); color: var(--text-1); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: rgba(255,255,255,.08); }
.menu-panel { position: absolute; right: 0; top: 54px; width: min(280px, calc(100vw - 32px)); padding: 8px; background: var(--surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.menu-panel a { color: var(--text-1); text-decoration: none; padding: 12px 14px; border-radius: var(--radius-md); }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: rgba(255,255,255,.06); }
@media (max-width: 820px) { .nav { display: none; } .menu { display: block; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: var(--radius-pill);
  font: 600 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--grad-primary); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.12); box-shadow: var(--glow-blue); }
.btn-secondary { background: transparent; color: var(--text-1); border-color: var(--border-strong); }
.btn-secondary:hover { color: var(--text-1); background: rgba(255,255,255,.08); }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; border-top: 1px solid var(--border-subtle); }
.section:first-of-type { border-top: 0; }
@media (max-width: 640px) { .section { padding: 64px 0; } }
/* Gradient caps, as in the app: the dash (::before) keeps its own swoosh
   background; background-clip:text only clips the span's own background.
   Every stop of --grad-text is >= 7:1 on the page. */
.eyebrow { display: inline-block; margin-bottom: 14px; font: 600 12px/16px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: transparent; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--grad-swoosh); border-radius: 2px; }
.lead { font-size: 18px; line-height: 30px; color: var(--text-2); max-width: 720px; }
.section-head { margin-bottom: 40px; max-width: 760px; }
.section-head h2 { margin-bottom: 12px; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--text-2); }
.nw { white-space: nowrap; }
.small { font-size: 14px; line-height: 22px; }
.caption { font-size: 12px; line-height: 16px; color: var(--text-3); }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 72px; position: relative; isolation: isolate; overflow: hidden; }
/* The brand's orbit rings and glow orb, anchored to the hero (they scroll
   away with it, as on the company site) rather than fixed to the window.
   Same ring geometry as the app and the desktop waiting page; the rings are
   an inline SVG data URI because the CSP is `img-src 'self' data:`. Mostly
   off-canvas, so only the arcs cross the top-right corner above the sample
   card, away from the headline. The mask fades them out before the hero's
   bottom edge, so a short hero (pricing, terms) never shows a clipped arc. */
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a78bfa' stop-opacity='.55'/%3E%3Cstop offset='.55' stop-color='%23609afa' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%23609afa' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23609afa' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%23a78bfa' stop-opacity='.06'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%2367e8f9'/%3E%3Cstop offset='.35' stop-color='%2367e8f9' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%2367e8f9' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-18 500 500)'%3E%3Cellipse cx='500' cy='500' rx='470' ry='300' stroke='url(%23a)' stroke-width='1.2'/%3E%3Cellipse cx='500' cy='500' rx='330' ry='200' stroke='url(%23b)' stroke-width='1'/%3E%3Ccircle cx='336.5' cy='781' r='16' fill='url(%23s)'/%3E%3Ccircle cx='336.5' cy='781' r='3.5' fill='%2367e8f9'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -470px top -420px / 1000px 1000px;  -webkit-mask-image: linear-gradient(#000 50%, transparent 95%); mask-image: linear-gradient(#000 50%, transparent 95%); }
.hero::after { background: radial-gradient(circle at calc(100% + 30px) 90px, rgba(103,232,249,.32) 0, rgba(37,99,235,.2) 70px, rgba(124,58,237,.1) 130px, rgba(124,58,237,0) 175px); }
@media (max-width: 900px) {
  .hero::before { background-size: 640px 640px; background-position: right -470px top -300px; opacity: .45; }
  .hero::after { background: radial-gradient(circle at calc(100% + 30px) 60px, rgba(103,232,249,.3) 0, rgba(37,99,235,.18) 55px, rgba(124,58,237,0) 130px); }
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 28px; }
.hero-meta { margin-top: 18px; font-size: 14px; color: var(--text-3); }
.product-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.product-mark img { width: 56px; height: 56px; border-radius: 14px; box-shadow: var(--shadow-md); }
.product-mark span { font: 600 14px/20px var(--font-display); color: var(--text-2); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 56px; } }

/* sample line pair (text, not a UI mock) */
/* Brand glass (4% white + blur 16): the blur is what keeps the hero's orbit
   rings, which pass behind this card, from running through its text. */
.sample { padding: 28px; border-radius: var(--radius-2xl); background: var(--surface-glass); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); border: 1px solid var(--border-subtle); position: relative; }
.sample::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-primary); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
.sample dl { margin: 0; display: grid; gap: 18px; }
.sample dt { font: 600 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.sample dd { margin: 0; }
.sample .en { font-family: var(--font-display); color: var(--text-2); }
.sample .th { font-size: 20px; line-height: 32px; font-weight: 500; }
.sample hr { border: 0; height: 1px; background: var(--border-subtle); margin: 0; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 28px; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.card h3 { margin-bottom: 10px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card-hover:hover { transform: translateY(-4px); border-color: var(--border-default); }
.card-glass { background: var(--surface-glass); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); }
.card-highlight { position: relative; border-color: transparent; }
.card-highlight::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad-primary); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.icon-chip { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; color: #fff; background: var(--grad-primary); }
.icon-chip.alt { background: var(--grad-secondary); }
.icon-chip.plain { background: rgba(255,255,255,.06); color: var(--text-1); border: 1px solid var(--border-subtle); }
.note { font-size: 14px; line-height: 22px; color: var(--text-3); margin-top: 14px; }

/* steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; }
.steps > li .num::before { content: counter(step, decimal-leading-zero); }
.num { display: block; font: 700 32px/1 var(--font-display); margin-bottom: 16px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* placeholders — neutral frames, not fake UI */
/* Real app screenshots (assets/shots/, captured from the running app) */
.hero-shot { position: relative; margin: 0; }
.hero-frame { position: relative; }
.hero-frame img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg), 0 0 80px rgba(37,99,235,.22); }
.hero-frame::before { content: ""; position: absolute; inset: -1px; border-radius: var(--radius-xl); padding: 1px; background: var(--grad-primary); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; pointer-events: none; z-index: 1; }
.hero-grid-shot { grid-template-columns: 1fr 1.05fr; }
@media (max-width: 900px) { .hero-grid-shot { grid-template-columns: 1fr; } }
.hero-shot figcaption { margin-top: 14px; font-size: 13px; line-height: 20px; color: var(--text-3); }
.shot-img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); background: var(--surface-1); }
.showcase { display: grid; gap: 64px; }
.showcase-row { display: grid; grid-template-columns: 1.45fr 1fr; gap: 48px; align-items: center; }
.showcase-row:nth-child(even) img { order: 2; }
.showcase-row h3 { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
.showcase-row p { font-size: 17px; line-height: 28px; }
@media (max-width: 860px) {
  .showcase { gap: 48px; }
  .showcase-row { grid-template-columns: 1fr; gap: 20px; }
  .showcase-row:nth-child(even) img { order: 0; }
}
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.reqs { margin-top: 56px; padding: 24px 28px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border-subtle); }
.reqs h3 { font-size: 17px; margin-bottom: 14px; }
.reqs dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.reqs dt { font: 600 13px/18px var(--font-display); color: var(--text-1); margin-bottom: 2px; }
.reqs dd { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-2); }
@media (max-width: 680px) { .reqs { padding: 20px; } .reqs dl { grid-template-columns: 1fr; } }
figure { margin: 0; }
.fig-cap { margin-top: 12px; font-size: 14px; color: var(--text-2); }

/* pills / badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font: 600 12px/18px var(--font-body); background: rgba(37,99,235,.16); color: #BFD7FE; border: 1px solid rgba(96,154,250,.25); }
.badge.purple { background: rgba(124,58,237,.18); color: #DDD6FE; border-color: rgba(167,139,250,.3); }
.badge.cyan { background: rgba(6,182,212,.14); color: #A5F3FC; border-color: rgba(103,232,249,.28); }
.badge.warn { background: var(--hw-warning-soft); color: #FCD34D; border-color: rgba(245,158,11,.35); }

/* callout */
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface-glass); border: 1px solid var(--border-default); }
.callout .i { color: var(--text-link); margin-top: 2px; }
.callout.warn { background: var(--hw-warning-soft); border-color: rgba(245,158,11,.35); }
.callout.warn .i { color: #FCD34D; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-2); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { box-shadow: var(--focus-ring); }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
caption { text-align: left; padding: 18px 20px 0; color: var(--text-2); font-size: 14px; }
th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
thead th { font: 600 13px/18px var(--font-display); color: var(--text-2); letter-spacing: .02em; background: rgba(255,255,255,.02); white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 500; color: var(--text-1); }
td.num-cell, th.num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.c, th.c { text-align: center; }
.yes { color: #6EE7B7; } .no { color: var(--text-3); }
.tbl-min { min-width: 620px; }

/* ---------- Pricing ---------- */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-subtle); margin-bottom: 28px; flex-wrap: wrap; }
.seg button { font: 600 14px/1 var(--font-body); color: var(--text-2); background: transparent; border: 0; padding: 11px 18px; border-radius: var(--radius-pill); cursor: pointer; min-height: 40px; }
.seg button[aria-pressed="true"] { background: var(--grad-primary); color: #fff; }
.seg button:hover:not([aria-pressed="true"]) { color: var(--text-1); background: rgba(255,255,255,.06); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 560px; } }
.plan { display: flex; flex-direction: column; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.plan-name { font: 700 22px/28px var(--font-display); }
.price { font: 700 44px/1.1 var(--font-display); letter-spacing: -0.02em; margin: 14px 0 4px; }
.price small { font: 500 16px/1 var(--font-body); color: var(--text-2); letter-spacing: 0; }
.price-sub { color: var(--text-2); font-size: 14px; min-height: 22px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 0; }
.plan li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 15px; line-height: 22px; }
.plan li .i { color: #6EE7B7; margin-top: 1px; }
.plan .coin-line { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-lg); background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle); font-size: 14px; line-height: 22px; }
.plan .coin-line strong { font-family: var(--font-display); font-size: 18px; color: var(--text-1); }
.plan-foot { margin-top: auto; padding-top: 22px; }

.calc { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; color: var(--text-2); }
.field input, .field select { font: 500 16px/1 var(--font-body); color: var(--text-1); background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 11px 14px; min-height: 44px; width: 180px; }
.field select { width: auto; min-width: 180px; max-width: 100%; }
.field input:focus, .field select:focus { outline: none; box-shadow: var(--focus-ring); border-color: #609AFA; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--border-subtle); }
.faq details:first-child { border-top: 1px solid var(--border-subtle); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 4px; font-weight: 500; font-size: 17px; line-height: 26px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { transition: transform var(--dur-base) var(--ease-out); color: var(--text-2); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq .answer { padding: 0 4px 22px; color: var(--text-2); max-width: 820px; }

/* ---------- Legal docs ---------- */
.doc { max-width: 820px; }
.doc h1 { font-size: clamp(30px, 4.6vw, 44px); margin-bottom: 12px; }
.doc h2 { font-size: 22px; line-height: 30px; margin: 44px 0 12px; padding-top: 8px; }
.doc h3 { font-size: 17px; margin: 24px 0 8px; }
.doc p, .doc li { color: var(--text-2); }
.doc strong { color: var(--text-1); font-weight: 600; }
.doc .table-wrap { margin: 16px 0; }
.doc table { font-size: 14px; }
.doc-meta { color: var(--text-3); font-size: 14px; margin-bottom: 24px; }
.toc { margin: 28px 0 8px; padding: 20px 24px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border-subtle); }
.toc ol { margin: 8px 0 0; columns: 2; column-gap: 32px; }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.toc li { font-size: 15px; break-inside: avoid; }
.lang-switch { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 14px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-subtle); padding: 56px 0 40px; position: relative; margin-top: 40px; }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--grad-swoosh); opacity: .7; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { width: 200px; height: auto; margin-bottom: 16px; }
.site-footer h2 { font: 600 13px/18px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text-1); }
.site-footer p { color: var(--text-2); font-size: 14px; line-height: 22px; }
.legal-line { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- Draft banner ---------- */
.draft { background: var(--hw-warning-soft); border-bottom: 1px solid rgba(245,158,11,.35); color: #FDE68A; font-size: 14px; line-height: 22px; }
.draft .container { display: flex; gap: 10px; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.draft .i { color: #FCD34D; margin-top: 1px; }

@media print {
  body::before, body::after, .site-header, .site-footer, .draft .i { display: none; }
  body { background: #fff; color: #000; }
  .doc p, .doc li { color: #222; }
}

/* Four selling points (home) */
.pillars { gap: 20px; }
.pillar { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.pillar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pillar-tag { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-family: var(--font-display); color: var(--text-2); }
.pillar h3 { font-size: 1.3rem; line-height: 1.35; margin: 4px 0 0; }
.checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; line-height: 1.6; }
.checks li svg { margin-top: 4px; color: var(--hw-cyan); }
.checks strong { color: inherit; font-weight: 600; }