/* Orderball site styles — 2026-10-24 redesign per approved draft (orderball-ui).
   Design system: Apple SF stack everywhere; Titan One only on slogan graffiti
   lines; ZCOOL KuaiLe only on Chinese counterpart lines. Palette re-sampled
   from the logo board. Flat surfaces, 1px lines, soft shadows; doodle bubble
   pills only for Start free / Start with Pro. Dark = one elevation ladder on
   Seller graphite ladder (shared with the app theme: bg #14171A family)
   via html[data-theme="dark"]. */
@font-face{font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/titan-one-latin.woff2) format('woff2')}
:root{
  --bg:#FCF7EE; --surface:#FFFFFF; --alt:#FFF7ED; --ink:#17252E; --muted:#55636C; --muted2:#87939B;
  --line:#EAE3D3; --line2:#DED5C1;
  --green:#5CB531; --green-dark:#357A18; --green-soft:#F0F8E2;
  --grad:linear-gradient(135deg,#D3F06A 0%,#5CB531 100%);
  --orange:#FF7A1A; --yellow:#FFC400; --sky:#17B6E8; --lime:#A8D81E;
  --amber:#FF7A1A; --amber-bg:#FFE4D0; --blue:#17B6E8; --blue-bg:#D8F3FC;
  --radius:14px; --shadow:0 8px 30px rgba(30,42,56,.08), 0 1px 3px rgba(30,42,56,.06);
  --shadow-lg:0 20px 50px rgba(30,42,56,.12);
  --tint-green:#F4F9EC; --tint-sky:#EDF8FB; --tint-peach:#FFF3E9;
  /* legacy aliases for subpage components */
  --paper:#FFFFFF; --cream:#FFF7ED; --soft:#FFE4D0; --green-deep:#357A18;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
}
html[data-theme="dark"]{
  --bg:#14171A; --surface:#1B1F24; --alt:#20262C; --ink:#F2F5F3; --muted:#9AA5AF; --muted2:#87919B;
  --line:#262C33; --line2:#333B43; --green-soft:#22402F; --amber-bg:#3D2E1E; --blue-bg:#1E3F52;
  --tint-green:#262D20; --tint-sky:#232B36; --tint-peach:#2E2718;
  --paper:#1B1F24; --cream:#1D2126; --soft:#20262C; --green-deep:#9BD95C; --green-dark:#9BD95C;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sf);-webkit-font-smoothing:antialiased;line-height:1.55;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--sf);font-weight:700;letter-spacing:-.02em}
a{color:inherit}
::selection{background:#CDEBC0;color:#17252E}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* ---------- Header / nav (all pages) ---------- */
header{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);z-index:50}
html[data-theme="dark"] header{background:#14171A}
.nav{display:flex;align-items:center;gap:26px;max-width:1244px;margin:0 auto;padding:14px 32px;position:relative}
.ob-logo{display:inline-flex;align-items:center;line-height:1;flex-shrink:0;text-decoration:none}
.ob-logo img{display:block;width:auto;height:72px}
.ob-logo .lg-foot{height:84px}
.navlinks{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:#3D4753}
html[data-theme="dark"] .navlinks{color:#C3CED4}
.navlinks a{text-decoration:none;white-space:nowrap}
.navlinks a:hover{color:var(--green)}
.navright{margin-left:auto;display:flex;gap:10px;align-items:center}
.chip{border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:13.5px;cursor:pointer;font-family:inherit;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
.chip:hover{border-color:#B9AC8D;background:#FFFDF7}
html[data-theme="dark"] .chip:hover{background:#1B1F24;border-color:#333B43}
select.chip{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:13px}
.lang-menu{position:relative;flex:none}
.icon-btn{width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none}
.icon-btn:hover{border-color:#B9AC8D;background:#FFFDF7}
html[data-theme="dark"] .icon-btn:hover{background:#1B1F24;border-color:#333B43}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.theme-btn .icon-moon{fill:currentColor;stroke:none}
html[data-theme="dark"] .theme-btn .icon-moon{display:none}
html:not([data-theme="dark"]) .theme-btn .icon-sun{display:none}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:176px;background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 16px 38px rgba(20,35,47,.18);padding:6px;z-index:90}
.lang-dropdown[hidden]{display:none!important}
.lang-dropdown button{width:100%;border:0;border-radius:9px;background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;font:600 14px/1.25 inherit;text-align:left}
.lang-dropdown button:hover,.lang-dropdown button[aria-selected="true"]{background:var(--tint-lime)}
html[data-theme="dark"] .lang-dropdown{background:#1B1F24;border-color:#333B43;box-shadow:0 16px 38px rgba(0,0,0,.38)}
html[data-theme="dark"] .lang-dropdown button:hover,html[data-theme="dark"] .lang-dropdown button[aria-selected="true"]{background:#20262C}
.lang-check{opacity:0;color:var(--green-dark);font-weight:800}
.lang-dropdown button[aria-selected="true"] .lang-check{opacity:1}
html[data-theme="dark"] .lang-check{color:#9BD95C}
/* Mobile menu (DOM built by site.js) */
.navburger{display:none;width:42px;height:42px;border:1px solid var(--line2);border-radius:50%;background:var(--surface);cursor:pointer;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;padding:0}
.navburger span{display:block;width:18px;height:2.4px;border-radius:2px;background:var(--ink)}
.mmenu{display:none}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;line-height:1.2;border-radius:8px;padding:11px 22px;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;font-family:inherit;background:var(--green);color:#fff;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,filter .15s ease,transform .1s ease}
.btn:hover{background:var(--green-dark)}
html[data-theme="dark"] .btn:hover{background:#4C9A28}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--surface);border-color:var(--line2);color:var(--ink)}
.btn.ghost:hover{border-color:#B9AC8D;background:#FFFDF7;box-shadow:0 2px 8px rgba(30,42,56,.07)}
html[data-theme="dark"] .btn.ghost{background:transparent;color:#F2F5F3}
html[data-theme="dark"] .btn.ghost:hover{background:#1B1F24;border-color:#333B43;box-shadow:none}
.btn.green{background:linear-gradient(120deg,#A8D81E 0%,var(--green) 55%,#3E8A1F 100%);box-shadow:0 3px 0 #2F6B14;color:#fff}
.btn.green:hover{filter:brightness(1.05);background:linear-gradient(120deg,#A8D81E 0%,var(--green) 55%,#3E8A1F 100%)}
.btn.big{padding:14px 26px;font-size:15px;border-radius:9px}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid rgba(23,182,232,.55);outline-offset:2px;border-radius:6px}
/* Doodle bubble pills — ONLY Start free / Start with Pro */
.btn-doodle{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sf);font-weight:700;letter-spacing:-.01em;font-size:15.5px;line-height:1.25;color:#14232F;text-decoration:none;white-space:nowrap;background:var(--surface);border:3px solid #14232F;border-radius:999px;padding:11px 22px;box-shadow:0 5px 0 #14232F;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,filter .15s ease}
.btn-doodle.btn-lg,.btn-doodle.big{font-size:16.5px;padding:13px 28px}
.btn-doodle-free{background:linear-gradient(120deg,#A8D81E 0%,#5CB531 100%);transform:rotate(-.8deg)}
.btn-doodle-pro{background:linear-gradient(120deg,#FF7A1A 0%,#FFC400 48%,#17B6E8 100%);transform:rotate(.8deg)}
.btn-doodle:hover{filter:brightness(1.05);background:inherit}
.btn-doodle-free:hover{background:linear-gradient(120deg,#A8D81E 0%,#5CB531 100%);transform:rotate(-.8deg) translateY(2px);box-shadow:0 3px 0 #14232F}
.btn-doodle-pro:hover{background:linear-gradient(120deg,#FF7A1A 0%,#FFC400 48%,#17B6E8 100%);transform:rotate(.8deg) translateY(2px);box-shadow:0 3px 0 #14232F}
.btn-doodle-free:active{transform:rotate(-.8deg) translateY(4px);box-shadow:0 1px 0 #14232F}
.btn-doodle-pro:active{transform:rotate(.8deg) translateY(4px);box-shadow:0 1px 0 #14232F}
.btn-cap{text-transform:uppercase;letter-spacing:.02em;font-size:15px;font-weight:700}
/* Nav Start free: deliberately small (≈37px / 13.5px) beside the 72px logo */
header .navright .btn-doodle{font-size:13.5px;line-height:1.3;padding:7px 16px;box-shadow:0 4px 0 #14232F;border-width:2.5px}
/* Log in chip: never let flex squeeze it into a circle with wrapped text
   (Andy 2026-10-25 review — nav grew to 8 links and crushed the chip). */
header .navright .chip{white-space:nowrap;flex:none}
header .navright .btn-doodle-free:hover{transform:rotate(-.8deg) translateY(2px);box-shadow:0 2px 0 #14232F}
header .navright .btn-doodle-free:active{transform:rotate(-.8deg) translateY(3px);box-shadow:0 1px 0 #14232F}
/* ---------- Footer (all pages; always the deep-ink panel) ---------- */
footer.site-footer{background:#17252E;color:#AEB9C0;padding:56px 32px 30px;margin-top:0}
html[data-theme="dark"] footer.site-footer{background:#0F1113}
.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;align-items:start;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site-footer h4{color:#fff;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:2px 0 13px}
footer.site-footer a{display:block;font-size:13.5px;line-height:1.45;padding:5px 0;color:#AEB9C0;text-decoration:none}
footer.site-footer a:hover{color:#fff}
footer.site-footer a.ob-logo{display:inline-flex;padding:0}
.footer-note-p{font-size:13.5px;line-height:1.6;max-width:280px;color:#AEB9C0;margin-top:14px}
.footer-bottom{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:17px;font-size:12.5px;color:#8E9AA3}
/* ---------- Generic page components (subpages) ---------- */
section{padding:56px 0}
.hero{padding:64px 0 10px;position:relative}
.hero h1{font-size:44px;line-height:1.1;font-weight:700}
.hero .sub{font-size:18px;color:var(--muted);margin:16px 0 24px;max-width:680px;line-height:1.6}
.hero.center{text-align:center}
.hero.center .sub{margin-left:auto;margin-right:auto}
.hero h1 .roll{color:var(--green-dark)}
h2{font-size:30px;margin-bottom:8px;line-height:1.2}
.lead{color:var(--muted);font-size:16.5px;max-width:720px;line-height:1.65}
.kicker,.eyebrow{display:inline-block;font-family:var(--sf);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);margin:0 0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(30,42,56,.04);padding:22px}
.card h3{font-size:18px;margin-bottom:6px}
.card p{color:var(--muted);font-size:15px;line-height:1.6}
.card .go{display:inline-block;margin-top:10px;color:var(--green-dark);font-weight:700;text-decoration:none}
.card .go:hover{text-decoration:underline}
.stepnum{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--lime);align-items:center;justify-content:center;font-weight:700;color:#17252E;margin-bottom:10px}
.dash{border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:22px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)}
.price{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.price .card.hot{border:2px solid var(--green)}
.price ul{list-style:none;margin-top:12px;font-size:15.5px}
.price li{padding:4px 0}
.stat{font-size:40px;font-weight:800;letter-spacing:-.03em}
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:10px}
summary{font-weight:700;cursor:pointer;font-size:15.5px}
details p{color:var(--muted);margin-top:8px;font-size:15px;line-height:1.65}
.pill{display:inline-block;border:1px solid var(--line2);border-radius:999px;padding:2px 12px;font-size:13.5px;background:var(--surface);font-weight:600}
.pill.lime{background:var(--lime);color:#17252E;border-color:transparent}
.pill.soft{background:var(--amber-bg);border-color:transparent}
.pill.pink{background:#FFD6E8;color:#17252E;border-color:transparent}
.pill.sky{background:var(--blue-bg);border-color:transparent}
a.pill{text-decoration:none}
.note{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--surface);color:var(--muted);font-size:14.5px;margin-top:18px}
.mockshot{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);padding:18px;margin-top:26px}
.rowline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.rowline:last-child{border-bottom:none}
.timeline{margin-top:26px;border-left:3px solid var(--line2);padding-left:28px;display:grid;gap:18px}
.tstep{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.tstep::before{content:"";position:absolute;left:-41px;top:22px;width:20px;height:20px;border-radius:50%;background:var(--grad)}
.tstep h3{font-size:19px;margin-bottom:4px}
.tstep p{color:var(--muted);font-size:15px}
.tstep .when{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark)}
.feat-block{padding:34px 0;border-bottom:1px solid var(--line)}
.feat-block:last-of-type{border-bottom:none}
.feat-block h2{font-size:27px}
.feat-block h2 .fic{display:inline-grid;place-items:center;width:44px;height:44px;vertical-align:-10px;margin-right:12px}
.feat-block h2 .fic svg{width:44px;height:44px;display:block}
.ai-line .bot img{width:100%;height:100%;border-radius:50%;display:block}
/* --- doodle line decorations (Odoo-style big hand-drawn strokes) --- */
.decor-host{position:relative}
.doodle-decor{position:absolute;pointer-events:none;z-index:0}
.dd-arrow{right:0;top:88px;width:182px;transform:rotate(6deg)}
.dd-spark1{right:198px;top:34px;width:30px}
.dd-spark2{right:40px;top:22px;width:20px}
.dd-circle{left:-30px;top:-20px;width:128px;opacity:.85}
.doodle-squiggle{display:block;width:min(680px,88%);height:26px;margin:10px auto 0}
@media (max-width:760px){.dd-arrow,.dd-spark1,.dd-spark2,.dd-circle{display:none}}
.feat-block ul{list-style:none;margin-top:12px;display:grid;gap:7px;font-size:15.5px}
.feat-block ul li::before{content:"✓ ";color:var(--green-dark);font-weight:800}
.ai-line{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--tint-peach);padding:12px 16px;font-size:15px;display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
html[data-theme="dark"] .ai-line{background:var(--tint-peach)}
.ai-line .bot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:15px}
.gtitle{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.gtitle h2{font-size:25px;margin:0}
.gtitle .tag{font-size:13px;font-weight:700;background:var(--surface);border:1px solid var(--line2);border-radius:999px;padding:2px 12px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.pcard .top{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.pcard .tile{width:56px;height:56px;border-radius:13px;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:19px;color:#fff;flex:none;position:relative;overflow:hidden;background:var(--surface)}
.logochip{position:absolute;inset:0;background:#fff;display:grid;place-items:center}
.logochip img{max-width:100%;max-height:100%;object-fit:contain}
.pcard h3{font-size:17px}
.pcard p{color:var(--muted);font-size:13.5px}
.caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.caps span{font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted)}
.band{border:1px solid var(--line);border-radius:18px;background:var(--tint-peach);padding:24px;margin:36px 0 4px}
.band h2{font-size:24px}
.band p{color:var(--muted);margin-top:4px;max-width:760px}
.pain{border:1px dashed var(--line2);border-radius:14px;background:var(--surface);padding:13px 18px;font-size:16.5px;margin-top:16px;max-width:820px}
.pain::before{content:"💬 "}
.diagram{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:20px 18px;margin-top:20px}
.diagram svg{width:100%;height:auto;display:block}
/* Solutions step-nav strip under the loop diagram. Was class="plat" (the
   homepage logo-chip class: inline-flex + line-height:0), which collapsed
   the pills and struck a line through the labels (Andy 2026-10-25 shot). */
.stepnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;line-height:1.4}
.stepnav .pill{line-height:1.4;text-decoration:none}
.stepnav a.pill:hover{border-color:var(--green)}
svg .nd{fill:var(--surface);stroke:var(--line2);stroke-width:2}
svg .nd.hot{fill:var(--tint-peach)}
svg .conn{fill:none;stroke:var(--green-dark);stroke-width:2.5;stroke-dasharray:7 6;stroke-linecap:round}
svg .conn.orange{stroke:var(--orange)}
svg .ahead{fill:var(--green-dark)}
svg .ahead.orange{fill:var(--orange)}
svg .tl{fill:var(--ink);font-weight:700}
svg .ts{fill:var(--muted);font-weight:600}
svg .tc{fill:#fff;font-weight:700}
/* Handwritten annotations: SF semibold by default; ZCOOL KuaiLe only when the
   page language is Chinese (counterpart-line rule). */
.note-hand{font-family:var(--sf);font-weight:600;font-style:italic;font-size:16.5px;color:var(--green-dark);display:flex;align-items:center;gap:2px;line-height:1.25}
html[lang="zh"] .note-hand{font-family:"ZCOOL KuaiLe",cursive;font-style:normal}
.note-hand .nh-arrow{flex:none;width:56px;height:auto}
.note-hand .nh-arrow path{stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 30' preserveAspectRatio='none'%3E%3Cpath d='M5 18 C60 8 150 5 235 12 C237 20 190 27 110 26 C55 25 8 25 5 18 Z' fill='%235CB531' fill-opacity='.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 58%;background-position:0 90%;padding:0 .06em}
.hl-o{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 30' preserveAspectRatio='none'%3E%3Cpath d='M5 18 C60 8 150 5 235 12 C237 20 190 27 110 26 C55 25 8 25 5 18 Z' fill='%23FF7A1A' fill-opacity='.32'/%3E%3C/svg%3E")}
.wave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 7'%3E%3Cpath d='M1 4 Q7 1 13 4 T25 4' fill='none' stroke='%235CB531' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:26px 7px;background-position:0 100%;padding-bottom:9px}
.burst{width:.82em;height:.82em;vertical-align:-.06em;margin-left:.14em}
.doodle{margin:0}
.doodle svg{width:100%;height:auto;display:block}
svg .d-ol{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
svg .d-dash{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 6}
svg .d-dashm{fill:none;stroke:var(--muted);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:5 5}
svg .d-ink{fill:var(--ink)}
svg .d-wht{fill:#fff}
svg .d-eye{fill:#fff}
svg .d-pap{fill:var(--surface)}
svg .d-grn{fill:var(--green)}
svg .d-lim{fill:var(--lime)}
svg .d-org{fill:var(--orange)}
svg .d-sky{fill:var(--sky)}
svg .d-soft{fill:var(--soft)}
svg .d-box{fill:#F3C98B}
.sec-head{display:flex;gap:28px;align-items:center}
.sec-head>div{flex:1;min-width:0}
.appgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 17px 16px;transition:transform .15s ease,border-color .15s ease}
.tile:hover{transform:translateY(-2px);border-color:#B9D2A4}
html[data-theme="dark"] .tile:hover{border-color:#4C7A3A}
.tile .tic-svg{width:52px;height:52px;display:block;margin-bottom:11px}
.tile h3{font-size:17px;margin-bottom:4px}
.tile p{color:var(--muted);font-size:13.5px;line-height:1.5}

/* ================= Homepage (body.home) ================= */
/* Slogan graffiti lines — the ONLY Titan One / ZCOOL homes on the page:
   gradient fill + ink outline (paint-order stroke) + hard offset shadows.
   Hero line 2 colors are en-canonical across languages (Andy 2026-10-25):
   .slogan-b-zh mirrors .slogan-b gradient/stroke/shadow exactly (light+dark);
   only the CJK font/letter-spacing/line-height differ. .slogan-ai* (AI section
   headline) keeps its own orange zh variant — not part of the hero rule. */
.slogan-b{font-family:'Titan One',cursive;font-weight:400;letter-spacing:.012em;line-height:1;display:inline-block;background:linear-gradient(94deg,#A8D81E 0%,#5CB531 44%,#17B6E8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2.2px #14232F;paint-order:stroke fill;filter:drop-shadow(3px 3px 0 #14232F) drop-shadow(6px 7px 0 rgba(20,35,47,.14));transform:rotate(-.6deg);transform-origin:left center;padding:.05em .06em .11em .02em}
.hero-copy h1 .slogan-b{font-size:1.16em;display:block;margin-top:6px}
.slogan-b-zh{font-family:"ZCOOL KuaiLe",cursive;font-weight:400;letter-spacing:.03em;line-height:1.15;font-size:1.16em;display:block;margin-top:6px;background:linear-gradient(94deg,#A8D81E 0%,#5CB531 44%,#17B6E8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2.2px #14232F;paint-order:stroke fill;filter:drop-shadow(3px 3px 0 #14232F) drop-shadow(6px 7px 0 rgba(20,35,47,.14));transform:rotate(-.6deg);transform-origin:left center;padding:.05em .06em .11em .02em}
.slogan-ai{font-family:'Titan One',cursive;font-weight:400;letter-spacing:.012em;line-height:1.14;font-size:31px;display:inline-block;background:linear-gradient(94deg,#A8D81E 0%,#5CB531 44%,#17B6E8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #14232F;paint-order:stroke fill;filter:drop-shadow(2.5px 2.5px 0 #14232F) drop-shadow(5px 6px 0 rgba(20,35,47,.14));transform:rotate(-.6deg);transform-origin:left center;padding:.05em .06em .11em .02em}
.slogan-ai-zh{font-family:"ZCOOL KuaiLe",cursive;font-weight:400;letter-spacing:.03em;font-size:31px;line-height:1.3;display:inline-block;background:linear-gradient(94deg,#FF7A1A 0%,#FFC400 48%,#17B6E8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.6px #14232F;paint-order:stroke fill;filter:drop-shadow(2.5px 2.5px 0 #14232F) drop-shadow(5px 6px 0 rgba(20,35,47,.12));transform:rotate(-.6deg);transform-origin:left center;padding:.05em .06em .11em .02em}
html[data-theme="dark"] .slogan-b,html[data-theme="dark"] .slogan-ai{background:linear-gradient(94deg,#D8F95C 0%,#8FE33E 42%,#4FD2FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke-color:#08131B;filter:drop-shadow(3px 3px 0 #08131B) drop-shadow(6px 7px 0 rgba(0,0,0,.35))}
html[data-theme="dark"] .slogan-b-zh{background:linear-gradient(94deg,#D8F95C 0%,#8FE33E 42%,#4FD2FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke-color:#08131B;filter:drop-shadow(3px 3px 0 #08131B) drop-shadow(6px 7px 0 rgba(0,0,0,.35))}
html[data-theme="dark"] .slogan-ai-zh{background:linear-gradient(94deg,#FF9A2E 0%,#FFD23E 48%,#4FD2FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke-color:#08131B;filter:drop-shadow(2.5px 2.5px 0 #08131B) drop-shadow(5px 6px 0 rgba(0,0,0,.3))}
.eyebrow.o{color:#C2511F}
.eyebrow.s{color:#0D6E8A}
html[data-theme="dark"] .eyebrow.o{color:#FF9A5C}
html[data-theme="dark"] .eyebrow.s{color:#6FD3F2}
html[data-theme="dark"] .eyebrow{color:#9BD95C}
.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line2)}
.btn-secondary:hover{border-color:#B9AC8D;background:#FFFDF7;box-shadow:0 2px 8px rgba(30,42,56,.07)}
html[data-theme="dark"] .btn-secondary{background:transparent;color:#F2F5F3}
html[data-theme="dark"] .btn-secondary:hover{background:#1B1F24;border-color:#333B43;box-shadow:none}
.btn-ghost{background:none;color:var(--green-dark);border:none}
.btn-ghost:hover{background:none;opacity:.85}
.btn-primary{background:var(--green);color:#fff;border:none}
.btn-primary:hover{background:#4C9A28}
.hero-sec{position:relative;overflow:hidden;background:var(--tint-green);padding:72px 32px}
.deco-ring{position:absolute;border-radius:50%;border:2.5px solid #E2EFD2;pointer-events:none}
html[data-theme="dark"] .deco-ring{border-color:#333B43}
.hero-grid{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.94fr 1.26fr;gap:56px;align-items:center}
.hero-copy h1{font-size:53px;line-height:1.04;font-weight:700;margin:0 0 20px}
.hero-copy .lead{margin:0 0 26px;max-width:500px;font-size:16.5px;line-height:1.62;color:var(--muted)}
.hero-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero-note{margin:17px 0 0;font-size:13px;color:var(--muted2)}
.hero-stats{display:flex;gap:30px;margin-top:26px;padding-top:20px;border-top:1px solid #DFE8D2}
html[data-theme="dark"] .hero-stats{border-color:#262C33}
.hstat b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hstat span{font-size:12.5px;color:var(--muted)}
html[data-theme="dark"] .hstat span{color:#9AA5AF}
/* Dashboard preview mock (serious product preview) */
.dash-wrap{position:relative;padding:10px 0 14px}
.float-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px rgba(30,42,56,.08);white-space:nowrap;z-index:2}
.float-chip i{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--green)}
.float-chip.c1{bottom:0;left:28px}
.float-chip.c2{top:-4px;right:28px}
.float-chip.c2 i{background:var(--sky)}
html[data-theme="dark"] .float-chip{background:#1B1F24;border-color:#262C33;color:#F2F5F3;box-shadow:0 4px 14px rgba(0,0,0,.3)}
body.home .dash{border:1px solid #DFE5D8;border-radius:16px;box-shadow:0 10px 28px rgba(30,42,56,.07),0 1px 3px rgba(30,42,56,.05);overflow:hidden;background:#fff;padding:0;margin:0}
html[data-theme="dark"] body.home .dash{background:#1B1F24;border-color:#262C33;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.dash-top{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line);background:#fff}
html[data-theme="dark"] .dash-top{background:#1B1F24}
.dash-top strong{font-size:14.5px}
.dash-top span{font-size:12.5px;color:var(--muted)}
.dash-body{display:grid;grid-template-columns:150px 1fr;min-height:302px}
.dash-side{border-right:1px solid var(--line);background:#FFFBF2;padding:10px}
html[data-theme="dark"] .dash-side{background:#1D2126}
.dash-side div{font-size:12.5px;font-weight:500;color:#57616C;padding:6px 10px;border-radius:8px;margin-bottom:1px;border:1px solid transparent;white-space:nowrap}
.dash-side div.conn{border-top:1px solid var(--line);border-radius:0;margin-top:6px;padding-top:9px}
html[data-theme="dark"] .dash-side div{color:#9AA5AF}
.dash-side div.active{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.05);border-color:var(--line)}
html[data-theme="dark"] .dash-side div.active{background:#20262C;color:#F2F5F3;border-color:#262C33;box-shadow:none}
.side-ic{display:inline-flex;vertical-align:-3px;margin-right:8px}
.side-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-main{padding:16px 16px 10px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fff}
html[data-theme="dark"] .kpi{background:#1B1F24}
.kpi label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2)}
.kpi b{display:block;font-size:20px;margin:4px 0 2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{font-size:11.5px;font-weight:600;color:var(--green-dark)}
.kpi span.warn{color:var(--amber)}
html[data-theme="dark"] .kpi span{color:#9BD95C}
html[data-theme="dark"] .kpi span.warn{color:#FFB37A}
.orders{width:100%;border-collapse:collapse;font-size:12.8px;font-variant-numeric:tabular-nums}
.orders th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2);font-weight:700;padding:8px;border-bottom:1px solid var(--line)}
.orders td{padding:9px 8px;border-bottom:1px solid var(--line);color:#3D4753}
html[data-theme="dark"] .orders td{color:#C3CED4}
.badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.badge-green{background:var(--green-soft);color:var(--green-dark)}
.badge-amber{background:var(--amber-bg);color:#C2511F}
html[data-theme="dark"] .badge-amber{color:#FFB37A}
.badge-blue{background:var(--blue-bg);color:#0D6E8A}
.badge-gray{background:#F4F1EA;color:#6B7280}
html[data-theme="dark"] .badge-gray{background:#20262C;color:#C3CED4}
/* Platform bar */
.plat-bar{border-bottom:1px solid var(--line);background:var(--tint-sky);padding:34px 32px;text-align:center}
.plat-bar p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.12em;color:#7C8A94}
html[data-theme="dark"] .plat-bar p{color:#87919B}
.plat-ic{width:17px;height:17px;vertical-align:-3px;margin-right:7px;color:var(--green)}
.plats{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;align-items:center}
.plat{display:inline-flex;align-items:center;line-height:0}
.plat img{height:40px;width:40px;display:block}
html[data-theme="dark"] .plat{background:#fff;border-radius:9px;padding:5px}
.plat.more{color:var(--green-dark);font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap}
html[data-theme="dark"] .plat.more{background:transparent;padding:0}
/* Sections */
.block{padding:88px 32px;background:#fff}
html[data-theme="dark"] .block{background:#14171A}
.block.alt{background:#fff}
html[data-theme="dark"] .block.alt{background:#14171A}
.block-head{max-width:760px;margin-bottom:44px}
.block-head.center{margin-left:auto;margin-right:auto;text-align:center}
.block-head h2{font-size:36px;line-height:1.16;font-weight:700;letter-spacing:-.02em;margin:10px 0 12px}
html[data-theme="dark"] .block-head h2,html[data-theme="dark"] .mod h3,html[data-theme="dark"] .price-card h3{color:#F2F5F3}
.block-head .sub{font-size:16px;color:var(--muted);line-height:1.68;max-width:640px}
.block-head.center .sub{margin:0 auto}
.tint-sky{background:var(--tint-sky)}
.alt-orange{background:var(--tint-peach)}
/* Module grid: FLAT standard line icons, bare (no tile), centered cards */
.grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;max-width:1180px;margin:0 auto}
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 24px;min-height:198px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 1px 2px rgba(30,42,56,.04);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
html[data-theme="dark"] .mod{background:#1B1F24;box-shadow:none}
.mod:hover{border-color:#B9D2A4}
html[data-theme="dark"] .mod:hover{border-color:#4C7A3A}
.ic{width:64px;height:64px;display:grid;place-items:center;flex-shrink:0;margin:0 auto 12px;background:transparent;color:var(--green)}
html[data-theme="dark"] .ic{color:#9BD95C}
.ic svg{width:44px;height:44px;display:block}
body.home .ic svg{width:58px;height:58px} /* module doodle icons (D21 pack): fuller tile on homepage cards */
.mod h3{font-size:16px;margin:0 0 6px;letter-spacing:-.02em}
.mod p{font-size:13.5px;color:var(--muted);line-height:1.58;max-width:236px;margin:0 auto}
/* How it rolls — doodle flow (SVG verbatim from the approved draft) */
.flow-wrap{max-width:1180px;margin:0 auto}
.flow-svg{width:100%;height:auto;display:block}
.flow-svg .node{color:#357A18}
.flow-svg .node rect{stroke:#17252E;stroke-width:2.5}
.flow-svg .f1{fill:#EFF7E0}.flow-svg .f2{fill:#E1F3FA}.flow-svg .f3{fill:#FFEFD9}
.flow-svg .f4{fill:#FFF3C4}.flow-svg .f5{fill:#FDE9E0}.flow-svg .f6{fill:#E7F5DF}
.flow-svg .nt{font-family:'Titan One',cursive;font-size:19px;letter-spacing:.01em;fill:var(--ink)}
.flow-svg .nc{font-size:12.5px;font-weight:600;fill:var(--muted)}
.flow-svg .arr{fill:none;stroke:#357A18;stroke-width:2.5;stroke-linecap:round;marker-end:url(#ah)}
.flow-svg .arr.dash{stroke-dasharray:7 6}
.flow-svg .al{font-size:12.5px;font-weight:700;fill:#3D4753;paint-order:stroke;stroke:#EDF8FB;stroke-width:5px;stroke-linejoin:round}
html[data-theme="dark"] .flow-svg .node{color:#9BD95C}
html[data-theme="dark"] .flow-svg .node rect{stroke:#08131B}
html[data-theme="dark"] .flow-svg .f1{fill:#263A1E} html[data-theme="dark"] .flow-svg .f2{fill:#1C3E55}
html[data-theme="dark"] .flow-svg .f3{fill:#3B2E1B} html[data-theme="dark"] .flow-svg .f4{fill:#3A341C}
html[data-theme="dark"] .flow-svg .f5{fill:#38241E} html[data-theme="dark"] .flow-svg .f6{fill:#22402F}
html[data-theme="dark"] .flow-svg .arr{stroke:#8FE33E;marker-end:url(#ah-lt)}
html[data-theme="dark"] .flow-svg .al{fill:#C3CED4;stroke:#14171A}
.flow-mobile{display:none}
/* AI split + chat mock */
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;max-width:1180px;margin:0 auto}
.split .block-head{margin-bottom:0}
.split .block-head p{font-size:16px;color:var(--muted);line-height:1.68}
.checklist{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.checklist li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:#3D4753;position:relative}
html[data-theme="dark"] .checklist li{color:#C3CED4}
.checklist li::before{content:"✓";width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;font-size:12px;font-weight:800}
.checklist li::after{content:"";position:absolute;left:14px;top:0;width:8px;height:8px;border-radius:50%;background:var(--orange);border:2px solid var(--tint-peach)}
.chat{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;max-width:520px;margin-left:auto;width:100%}
html[data-theme="dark"] .chat{background:#1B1F24;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.avatar{position:relative;flex-shrink:0;width:44px;height:44px}
.avatar img{width:44px;height:44px;border-radius:50%;display:block}
.avatar .on{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:var(--orange);border:2.5px solid #fff}
html[data-theme="dark"] .avatar .on{border-color:#1B1F24}
.chat-name{font-weight:700;font-size:14px}
.chat-sub{font-size:12px;color:var(--muted)}
.chat-body{padding:16px;display:grid;gap:10px;background:var(--alt)}
.bubble{max-width:88%;padding:11px 13px;border-radius:12px;font-size:13.5px;line-height:1.55}
.bubble.user{margin-left:auto;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
html[data-theme="dark"] .bubble.user{background:#0F1113}
.bubble.ai{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
html[data-theme="dark"] .bubble.ai{background:#20262C;border-color:#262C33;color:#F2F5F3}
/* Pricing */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:0 auto;align-items:stretch}
.price-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column}
html[data-theme="dark"] .price-card{background:#1B1F24}
.price-card.featured{border:2px solid var(--green)}
.price-card h3{font-size:16px;margin:0;letter-spacing:-.02em;line-height:1.3}
.price-card .price{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:10px 0 4px;min-height:52px;display:flex;align-items:flex-end;font-variant-numeric:tabular-nums}
.price-card .price small{font-size:14px;font-weight:500;color:var(--muted);padding-bottom:7px}
.price-card .p-note{font-size:12.5px;color:var(--muted2);margin:0 0 10px}
.price-card .p-tag{color:var(--muted);font-size:14px;margin:0}
.price-card ul{list-style:none;padding:0;margin:14px 0 22px;display:grid;gap:9px;font-size:14px;line-height:1.5;color:#3D4753;flex:1}
html[data-theme="dark"] .price-card ul{color:#C3CED4}
.price-card li::before{content:"✓ ";color:var(--green-dark);font-weight:800}
.price-card .btn-doodle{width:100%}
/* Billing toggle (Andy 2026-10-25 review): doodle-green segmented switch in
   the Pro card; Annual is the default view. Behavior lives in site.js
   ([data-bill-toggle]); both the homepage card and /pricing use it. */
.bill-toggle{display:inline-flex;align-self:flex-start;gap:2px;background:var(--surface);border:2.5px solid #14232F;border-radius:999px;box-shadow:0 4px 0 #14232F;padding:3px;transform:rotate(-.6deg);margin:14px 0 2px}
.bill-toggle button{border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.2;padding:7px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.bill-toggle button.on{background:linear-gradient(120deg,#A8D81E 0%,#5CB531 100%);color:#14232F}
.bill-toggle button:not(.on):hover{color:var(--ink)}
html[data-theme="dark"] .bill-toggle{background:#1B1F24}
html[data-theme="dark"] .bill-toggle button:not(.on):hover{color:#F2F5F3}
.price .card .bill-toggle{margin-top:2px}
/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0}
html[data-theme="dark"] .faq details{background:#1B1F24}
.faq summary{font-weight:700;font-size:15px;cursor:pointer}
.faq p{color:var(--muted);line-height:1.65;font-size:14.5px;margin:10px 0 0}
/* Final CTA + sticky mobile bar */
.final-cta{background:#17252E;color:#fff;padding:88px 32px;text-align:center}
html[data-theme="dark"] .final-cta{background:#0F1113}
.final-cta h2{font-size:36px;line-height:1.2;letter-spacing:-.02em;color:#fff;margin:0 0 12px}
.final-cta p{font-size:16px;color:#CBD5E1;margin:0 auto 26px;max-width:520px;line-height:1.65}
.m-cta{display:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- Responsive: header + mobile menu ---------- */
@media (max-width:900px){
  .nav{padding:12px 14px;gap:8px}
  .navright{gap:6px}
  select.chip{padding:6px 9px;font-size:12.5px}
  header .navright .btn-doodle{font-size:13px;padding:6px 11px}
  .navburger{width:38px;height:38px}
  /* Logo shrinks a step so the bar fits FOUR controls (language, theme,
     Start free, burger) at 390px — theme toggle stays in the bar (Andy
     2026-10-25 review), Log in chip alone moves to the burger menu. */
  .ob-logo img{height:38px}
  .ob-logo .lg-foot{height:56px}
  .navlinks{display:none}
  .navright a.chip{display:none}
  .navburger{display:flex}
  .mmenu{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(20,35,47,.16);padding:8px 14px 12px}
  .mmenu.open{display:block}
  .mmenu a.mlink{display:block;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;padding:12px 6px;border-bottom:1px solid var(--line)}
  .mmenu a.mlink:last-of-type{border-bottom:none}
  .mmenu-row{display:flex;gap:10px;margin-top:10px;align-items:center}
  .mmenu-row .chip{flex:1;justify-content:center;padding:10px 13px;font-size:14px}
  .mmenu-row .lang-menu{margin-left:auto}
  .mmenu-row .lang-dropdown{right:0}
}
@media (max-width:480px){
  /* 390px 小屏：es 的 CTA 文案（Empieza gratis）比 en 长 34px，顶栏一行
     总宽溢出 6px、汉堡钮右沿被顶出视口（396px）。仅收紧顶栏左右内边距
     与间距回收宽度，不动版式结构（2026-10-25 溢出修复）。 */
  .nav{padding-left:10px;padding-right:10px;gap:6px}
}
/* ---------- Responsive: subpages ---------- */
@media (max-width:820px){
  .hero h1{font-size:31px}
  .hero{padding-top:44px}
  h2{font-size:25px}
  .grid3,.grid2,.price,.appgrid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
  .band{padding:20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  footer.site-footer{padding:44px 22px 26px}
  .footer-note-p{max-width:none}
}
/* ---------- Responsive: homepage ---------- */
@media (max-width:900px){
  .hero-sec{padding:44px 20px 48px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy h1{font-size:38px}
  .hero-copy .lead{font-size:16px}
  .hero-stats{gap:26px}
  .block{padding:64px 20px}
  .block-head h2,.split h2{font-size:27px}
  .grid8{grid-template-columns:1fr 1fr}
  .mod{min-height:0}
  .split{grid-template-columns:1fr;gap:36px}
  .chat{margin:0 auto}
  .pricing{grid-template-columns:1fr}
  .float-chip.c2{right:16px}
  .final-cta{padding:56px 22px 96px}
  .m-cta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:60}
  .m-cta .btn,.m-cta .btn-doodle{flex:1;font-size:15px}
  .m-cta .btn-doodle{padding:11px 10px}
}
@media (max-width:700px){
  .flow-desktop{display:none}
  .flow-mobile{display:block}
}
@media (max-width:700px){
  .dash-body{grid-template-columns:1fr;min-height:0}
  .dash-side{display:none}
}
@media (max-width:520px){
  .grid8{grid-template-columns:1fr}
  .plat img{height:32px;width:32px}
  .kpis{gap:7px}
  .kpi b{font-size:16px}
  .kpi{padding:9px 9px}
  .float-chip.c1{left:10px}
  .float-chip.c2{right:10px}
  .footer-grid{grid-template-columns:1fr}
}
/* ---------- Chat widget (assets/chat.js builds this DOM; behavior unchanged) ---------- */
.ob-chat-btn{position:fixed;right:18px;bottom:18px;z-index:9998;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line2);border-radius:999px;padding:7px 16px 7px 8px;cursor:pointer;box-shadow:0 10px 26px rgba(20,35,47,.16);font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink)}
.ob-chat-btn:hover{border-color:#B9AC8D}
.ob-chat-btn img{width:34px;height:34px;border-radius:50%}
.ob-chat-btn picture{display:flex;line-height:0}
.ob-chat-btn .ob-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);margin-left:-4px}
body.home .ob-chat-btn{transition:bottom .2s ease}
@media (max-width:900px){body.home .ob-chat-btn{bottom:86px}}
.ob-chat-panel{position:fixed;right:18px;bottom:82px;z-index:9999;width:372px;max-width:calc(100vw - 24px);height:540px;max-height:calc(100dvh - 110px);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden;font-family:inherit}
.ob-chat-panel.open{display:flex}
/* Chat scroll/close repair (Andy 2026-10-25 review, figs 3–4): the message
   list is the only flexible row — head/chips/form are pinned, msgs scroll.
   Without flex:1+min-height:0+overflow the list grew past the panel and the
   conversation could not be scrolled at all. */
.ob-chat-head{flex:none}
.ob-chat-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ob-chips{flex:none}
.ob-chat-form{flex:none}
.ob-chat-close{margin-left:auto;background:var(--surface);border:1px solid var(--line2);width:44px;height:44px;min-width:44px;border-radius:50%;font-size:21px;cursor:pointer;color:var(--ink);flex:none;display:grid;place-items:center;line-height:1;padding:0;font-family:inherit}
.ob-chat-close:hover{border-color:#B9AC8D;background:#FFFDF7}
html[data-theme="dark"] .ob-chat-close:hover{background:#1B1F24;border-color:#333B43}
.ob-chat-close:active{transform:translateY(1px)}
.ob-msg .rel{display:block;margin-top:7px;font-size:12.5px}
.ob-chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--tint-peach)}
html[data-theme="dark"] .ob-chat-head{background:var(--tint-peach)}
.ob-chat-head img{width:44px;height:44px;border-radius:50%;flex:none}
.ob-chat-head .ob-t{font-size:15.5px;display:block;line-height:1.25}
.ob-chat-head .ob-s{font-size:12px;color:var(--muted);display:block}
.ob-chat-x{margin-left:auto;background:var(--surface);border:1px solid var(--line2);width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;color:var(--ink);flex:none;display:grid;place-items:center;line-height:1}
.ob-chat-body{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.ob-msg{max-width:86%;padding:10px 13px;border-radius:15px;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.ob-msg.bot{background:var(--tint-peach);border-bottom-left-radius:5px;align-self:flex-start}
.ob-msg.user{background:#17252E;color:#F4F8FB;border-bottom-right-radius:5px;align-self:flex-end}
html[data-theme="dark"] .ob-msg.user{background:#0F1113}
.ob-msg a{color:var(--green-dark);font-weight:600}
.ob-msg.user a{color:#BFE3A8}
.ob-msg ul{margin:4px 0 2px 18px}
.ob-msg li{margin:2px 0}
.ob-msg b{font-weight:700}
.ob-msg .ob-src{display:block;margin-top:7px;font-size:12px}
.ob-msg .ob-src a{color:var(--green-dark);text-decoration:none}
.ob-msg .ob-src a:hover{text-decoration:underline}
.ob-msg .ob-esc{display:inline-block;margin-top:9px;background:var(--green);color:#fff;border:none;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.ob-msg .ob-esc:hover{background:var(--green-dark)}
.ob-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 14px 10px}
.ob-chip{border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink)}
.ob-chip:hover{border-color:var(--green)}
.ob-chat-form{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.ob-chat-form input{flex:1;border:1px solid var(--line2);border-radius:999px;padding:10px 15px;font-size:16px;font-family:inherit;outline:none;background:var(--surface);color:var(--ink);min-width:0}
.ob-chat-form input:focus{border-color:var(--green)}
.ob-send{background:var(--green);color:#fff;border:none;border-radius:999px;padding:10px 17px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;flex:none}
.ob-send:hover{background:var(--green-dark)}
.ob-typing{align-self:flex-start;background:var(--tint-peach);border-radius:15px;border-bottom-left-radius:5px;padding:12px 15px;display:flex;gap:5px}
.ob-typing i{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:obblink 1s infinite}
.ob-typing i:nth-child(2){animation-delay:.18s}
.ob-typing i:nth-child(3){animation-delay:.36s}
@keyframes obblink{0%,100%{opacity:.25}50%{opacity:1}}
/* ≤768px：Rollie 按钮改纯图标圆形 56px（无文字标签）——宽胶囊在手机上压住
   hero 的 Start free 等可点元素（2026-10-25 Andy 真机报障修复）；
   右/底距边 24px＋底部安全区；主页另有固定底栏 .m-cta，再抬高避让。 */
@media (max-width:768px){
  .ob-chat-btn{width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;gap:0;right:24px;bottom:calc(24px + env(safe-area-inset-bottom))}
  .ob-chat-btn .ob-icon{display:flex;line-height:0}
  .ob-chat-btn img{width:56px;height:56px}
  .ob-chat-btn .obo,.ob-chat-btn .dot{display:none}
  body.home .ob-chat-btn{bottom:calc(92px + env(safe-area-inset-bottom))}
  .ob-chat-panel{bottom:calc(92px + env(safe-area-inset-bottom))}
  body.home .ob-chat-panel{bottom:calc(156px + env(safe-area-inset-bottom))}
  /* 页脚增补底部留白：滚到底时页脚链接行能整体越过固定按钮带，不被遮挡 */
  footer.site-footer{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
  body.home footer.site-footer{padding-bottom:calc(176px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .ob-chat-btn{right:24px;bottom:calc(24px + env(safe-area-inset-bottom))}
  body.home .ob-chat-btn{bottom:calc(92px + env(safe-area-inset-bottom))}
  .ob-chat-panel{left:0;right:0;top:0;bottom:0;width:100%;max-width:100%;height:auto;max-height:none;border-radius:0;border:none}
  .ob-chat-head{padding-top:calc(14px + env(safe-area-inset-top))}
}

/* ================= Site doodle pack (D21 v1.3 · site-doodle) =================
   Light/dark diagram swap follows the site theme: .figswap holds one
   img[data-v="l"] and one img[data-v="d"]; optional img.vmob pair swaps in
   below 768px. Wide diagrams that would shrink below legibility instead
   hide below 768px and hand over to an HTML .mstack (icons + live i18n text). */
.figswap{margin:0 auto}
.figswap img{width:100%;height:auto;display:block;margin:0 auto}
.figswap img[data-v="d"]{display:none}
html[data-theme="dark"] .figswap img[data-v="d"]{display:block}
html[data-theme="dark"] .figswap img[data-v="l"]{display:none}
.figswap .vmob{display:none!important}
.dfig{margin:22px auto 0}
.dfig.onb{max-width:1120px}
.dfig.flowfig{max-width:1200px}
.diagram .figswap{max-width:1120px}
.mstack{display:none}
.cta-arrow-img{width:150px;height:auto;vertical-align:middle;margin-right:16px}
@media (max-width:767px){
  .figswap .vdsk{display:none!important}
  .figswap .vmob[data-v="l"]{display:block!important}
  html[data-theme="dark"] .figswap .vmob[data-v="l"]{display:none!important}
  html[data-theme="dark"] .figswap .vmob[data-v="d"]{display:block!important}
  .mstack{display:flex;flex-direction:column;margin-top:4px}
  .mnode{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;text-align:left}
  .mnode img{width:56px;height:56px;flex:none}
  .mnode .mt{display:block;font-weight:700;font-size:16.5px;line-height:1.3}
  .mnode .ms{display:block;color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.4}
  .mnode.plain{background:none;border:none;padding:4px 2px}
  .mconn{align-self:center;color:var(--green-dark);font-size:17px;font-weight:800;line-height:1;padding:5px 0}
  .mconn img{width:40px;height:40px;vertical-align:middle}
  .mstack .storechips{display:flex;flex-direction:column;gap:8px}
  .cta-arrow-img{display:none}
}
/* Homepage placements */
body.home .corner-spark{position:absolute;top:-74px;right:118px;width:96px;height:auto;z-index:3;pointer-events:none}
@media (max-width:767px){body.home .corner-spark{display:none}}
body.home .ic img{width:72px;height:72px;display:block}
@media (max-width:767px){body.home .ic img{width:56px;height:56px}}
/* Features heading + AI callout icons */
.feat-block h2 .fic{width:52px;height:52px;vertical-align:-15px}
.feat-block h2 .fic img{width:52px;height:52px;display:block}
.ai-line .bot{width:36px;height:36px;font-size:15px}
.ai-line .bot.icn{background:none}
.ai-line .bot.icn img{border-radius:0}
@media (max-width:767px){
  .feat-block h2 .fic{width:44px;height:44px;vertical-align:-11px}
  .feat-block h2 .fic img{width:44px;height:44px}
}
/* Solutions: quote bubble + doodle checks (page-scoped via body.sol) */
.pain::before{content:"";display:inline-block;width:28px;height:28px;margin-right:9px;vertical-align:-8px;background:url("/assets/site-doodle/icons/quote.svg") center/contain no-repeat}
body.sol .feat-block ul li::before{content:"";display:inline-block;width:18px;height:18px;margin-right:4px;vertical-align:-3px;background:url("/assets/site-doodle/icons/check.svg") center/contain no-repeat}
/* AI page */
.ai-hero{display:flex;gap:40px;align-items:center}
.ai-hero-copy{flex:0 1 52%;min-width:0}
.ai-hero-img{flex:1 1 48%;width:100%;max-width:620px;min-width:0;height:auto}
.card .card-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.card .card-top .stepnum{margin-bottom:0}
.card .card-ic{width:60px;height:60px;flex:none}
.card h3 .h-ic{width:40px;height:40px;vertical-align:-11px;margin-right:9px}
@media (max-width:767px){
  .ai-hero{flex-direction:column;align-items:stretch;gap:22px}
  .ai-hero-copy{flex:none}
  .ai-hero-img{flex:none;width:min(100%,420px);margin:0 auto}
  .card .card-ic{width:48px;height:48px}
  .card h3 .h-ic{width:32px;height:32px;vertical-align:-8px}
}
/* Platforms hero network */
.plat-net{display:block;width:100%;max-width:470px;height:auto;margin:28px 0 4px}
@media (max-width:767px){.plat-net{max-width:320px}}
/* Pricing underline + upgrade growth steps */
.price-under{display:block;width:190px;height:auto;margin:6px 0 2px}
@media (max-width:767px){.price-under{width:140px}}
.grow-flex{display:flex;gap:26px;align-items:center}
.grow-flex .grow-copy{flex:1;min-width:0}
.grow-steps{flex:none;width:220px;height:auto}
@media (max-width:767px){.grow-flex{flex-direction:column;align-items:flex-start}.grow-steps{width:180px}}
/* FAQ hero conversation */
.faq-hero{display:flex;gap:30px;align-items:center}
.faq-hero .faq-copy{flex:1;min-width:0}
.faq-conv{flex:none;width:260px;height:auto}
@media (max-width:767px){.faq-hero{flex-direction:column;align-items:flex-start;gap:14px}.faq-conv{width:180px}}
@media (max-width:767px){.hidemb{display:none!important}}

/* ---------- Legal pages (/terms, /privacy) ---------- */
.legal-hero{padding-bottom:4px}
.legal-meta{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--muted2);letter-spacing:.02em}
.legal-body{max-width:820px;padding:6px 0 54px}
.legal-body h2{font-size:20.5px;line-height:1.35;margin:32px 0 10px}
.legal-body h2:first-child{margin-top:14px}
.legal-body p{margin:0 0 12px;line-height:1.78;color:var(--muted);font-size:15.5px}