/* ==========================================================================
   Qiwang Technology — Global Site Stylesheet
   杭州七望科技有限公司 | qiwangkj.com
   Static deployment: no build step, no external dependencies.
   ========================================================================== */

:root {
  --brand: #1466d8;
  --brand-dark: #0d4fa8;
  --brand-light: #e8f1fd;
  --brand-glow: #3d8bff;
  --accent: #14496e;
  --accent-2: #7c5cff;
  --warn: #f79009;
  --danger: #e5484d;
  --ok: #12b76a;

  --ink: #16191d;
  --ink-2: #2c3238;
  --ink-3: #5b636d;
  --line: #e4e7ec;
  --line-2: #eef1f5;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;

  --deep: #070b14;
  --deep-2: #0c1220;
  --deep-3: #131b2e;

  --radius: 2px;
  --radius-lg: 20px;
  --maxw: 1160px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px -8px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .04);
  --shadow-lg: 0 32px 64px -24px rgba(7, 11, 20, .28), 0 8px 20px -8px rgba(7, 11, 20, .12);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --paper: #fbfaf8;
  --paper-2: #f4f3f0;
  --hair: #dcdfe3;
  --hair-2: #e8eaed;
  --accent-soft: #eef2f5;}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 1px; }
/* A long URL written inside a sentence has to be able to break, otherwise it
   pushes the column wider than the viewport on a phone. */
.link-break { overflow-wrap: anywhere; }
h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.26; }
h1 { font-size: clamp(32px, 4.6vw, 50px); letter-spacing: -.028em; }
h2 { font-size: clamp(22px, 2.4vw, 29px); }
h3 { font-size: 17px; }
h4 { font-size: 16px; }
p { color: var(--ink-2); }
::selection { background: rgba(20, 102, 216, .18); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 840px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ Header ============================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px -6px rgba(16, 24, 40, .1);
}
.header-inner { display: flex; align-items: center; gap: 26px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand img, .brand svg { height: 32px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 15.5px; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--ink-3); font-weight: 500; letter-spacing: .02em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); text-decoration: none; }
.nav-cta {
  background: var(--ink); color: #fff !important; padding: 8px 16px;
  border-radius: 9px; font-weight: 600; font-size: 14.5px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav-cta:hover { background: #000; color: #fff !important; text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(13, 17, 23, .6); }

.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 3px 0; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 24px 18px; box-shadow: var(--shadow-md);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; width: 100%; }
  .nav a[aria-current="page"] { font-weight: 600; }
  .nav-cta { text-align: center; margin-top: 8px; }
  /* The language switch sits inline on desktop, so it needs its own space
     once the panel turns into a vertical list. */
  .nav .lang-switch { margin: 10px 0 4px; align-self: flex-start; }
  .nav .lang-switch a { width: auto; padding: 6px 14px; }
}

/* The disclosure button keeps a visible focus ring because it is the only
   way into the menu on a phone. */
.nav-toggle:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

/* ============================ Hero (dark) ============================ */
.hero-dark {
  position: relative; overflow: hidden;
  background: var(--deep); color: #fff;
  padding: 92px 0 104px;
  isolation: isolate;
}
.hero-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(61, 139, 255, .30), transparent 62%),
    radial-gradient(760px 480px at 12% 92%, rgba(124, 92, 255, .22), transparent 60%),
    radial-gradient(620px 420px at 52% 48%, rgba(0, 201, 167, .10), transparent 65%);
}
.hero-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 92% 74% at 50% 32%, #000 34%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 92% 74% at 50% 32%, #000 34%, transparent 78%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
@media (max-width: 1040px) {
  /* minmax(0, 1fr) rather than 1fr: a plain 1fr has an automatic minimum, so
     long English words could push the column wider than the viewport. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
.hero-dark h1 { color: #fff; }
.hero-dark .lede { color: #b9c4d6; font-size: 18px; max-width: 56ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #7fd8ff; background: rgba(61, 139, 255, .14);
  border: 1px solid rgba(127, 216, 255, .26);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 201, 167, .6); animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(0, 201, 167, .55); }
  70% { box-shadow: 0 0 0 9px rgba(0, 201, 167, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 201, 167, 0); }
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 26px -12px rgba(20, 102, 216, .9); }
.btn-primary:hover { background: var(--brand-dark); color: #fff; text-decoration: none; transform: translateY(-2px); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; transform: translateY(-2px); }
.btn-ghost {
  background: rgba(255, 255, 255, .06); color: #fff;
  border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; transform: translateY(-2px); }

.hero-stats {
  display: flex; gap: 34px; margin-top: 42px; padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .1); flex-wrap: wrap;
}
.hero-stat .n {
  font-size: 27px; font-weight: 700; color: #fff; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.hero-stat .n .unit { font-size: 15px; color: var(--accent); margin-left: 2px; }
.hero-stat .l { font-size: 12.5px; color: #8b98ad; margin-top: 3px; letter-spacing: .01em; }
/* The note under the figures explains the 365 day authorisation limit, which
   is Amazon's own rule rather than something we set. */
.hero-note {
  margin-top: 16px; font-size: 13px; line-height: 1.6; color: #8b98ad;
  max-width: 46ch;
}

/* ============================ Product mockup ============================ */
.mockup {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .16);
  padding: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: float-y 7s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}
.mockup-window {
  background: #fff; border-radius: 13px; overflow: hidden;
  box-shadow: 0 20px 46px -18px rgba(0, 0, 0, .45);
}
.mockup-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #f7f8fa; border-bottom: 1px solid var(--line-2);
}
.mockup-dots { display: flex; gap: 5px; }
.mockup-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.mockup-dots i:nth-child(1) { background: #ff5f57; }
.mockup-dots i:nth-child(2) { background: #febc2e; }
.mockup-dots i:nth-child(3) { background: #28c840; }
.mockup-url {
  flex: 1; text-align: center; font-size: 11.5px; color: var(--ink-3);
  font-family: var(--mono); background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 10px; margin: 0 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mockup-body { display: grid; grid-template-columns: 132px 1fr; min-height: 328px; }
.mockup-side { background: #fafbfd; border-right: 1px solid var(--line-2); padding: 14px 10px; }
.mockup-side .sitem {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  color: var(--ink-2); padding: 6px 8px; border-radius: 6px; margin-bottom: 2px;
}
.mockup-side .sitem.on { background: #eaf2ff; color: var(--brand-dark); font-weight: 600; }
.mockup-side .sitem svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; flex-shrink: 0; }
.mockup-main { padding: 16px; }

.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 13px; }
.mk-kpi { border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 10px; background: #fff; }
.mk-kpi .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; }
.mk-kpi .v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mk-kpi .d { font-size: 10px; font-weight: 600; margin-top: 1px; }
.mk-kpi .d.up { color: var(--ok); }
.mk-kpi .d.down { color: var(--danger); }

.mk-chart { border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 11px 6px; background: #fff; }
.mk-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.mk-chart-head .t { font-size: 11px; font-weight: 600; color: var(--ink); }
.mk-legend { display: flex; gap: 10px; font-size: 9.5px; color: var(--ink-3); }
.mk-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.mk-svg { width: 100%; height: auto; display: block; }
.mk-line-a { stroke: var(--brand); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mk-line-b { stroke: var(--accent); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mk-area-a { fill: url(#mkGrad); }
.mk-grid-line { stroke: #eef1f5; stroke-width: 1; }
.mk-axis { font-size: 8px; fill: #98a2b3; font-family: var(--font); }

.mk-recs { margin-top: 13px; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.mk-rec-head {
  display: flex; justify-content: space-between; padding: 7px 11px;
  background: #fafbfd; border-bottom: 1px solid var(--line-2);
  font-size: 10px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em;
}
.mk-rec { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--line-2); font-size: 11px; }
.mk-rec:last-child { border-bottom: none; }
.mk-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .03em; flex-shrink: 0;
}
.mk-badge.up { background: #e7f8f0; color: #067647; }
.mk-badge.down { background: #fdeceb; color: #b42318; }
.mk-badge.pause { background: #fef4e6; color: #b54708; }
.mk-rec .nm { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rec .ch { color: var(--ink-3); font-family: var(--mono); font-size: 10px; white-space: nowrap; }

/* ============================ Sections ============================ */
.section { padding: 72px 0; position: relative; }
.section-tight { padding: 48px 0; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head p { color: var(--ink-2); font-size: 17px; }
.section-dark { background: var(--deep); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .section-head p { color: #a7b3c7; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; text-align: left;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d7e3f5; }
.card h3 { margin-top: 0; font-size: 17.5px; }
.card p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 0; }
.card-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--brand-light);
  display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.card-icon svg { width: 21px; height: 21px; stroke: var(--brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-num {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--brand);
  background: var(--brand-light); width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}

/* ============================ Showcase (interactive workbench) ============================ */
.showcase { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; }
@media (max-width: 940px) { .showcase { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.showcase-tabs { display: flex; flex-direction: column; gap: 6px; }
/* Below the two-column breakpoint the tabs sit in one row. English labels are
   wider than Chinese ones, so the row scrolls sideways instead of stretching
   the page. min-width:0 lets the flex container shrink inside its track. */
@media (max-width: 940px) {
  .showcase-tabs {
    flex-direction: row; overflow-x: auto; padding-bottom: 6px;
    min-width: 0; scrollbar-width: thin;
  }
  .showcase-tab { flex: 0 0 auto; white-space: nowrap; }
}
.showcase-tab {
  text-align: left; background: transparent; border: 1px solid transparent;
  border-radius: 10px; padding: 12px 14px; cursor: pointer; font-family: inherit;
  color: var(--ink-2); font-size: 14.5px; font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.showcase-tab:hover { background: #fff; color: var(--ink); }
.showcase-tab[aria-selected="true"] {
  background: #fff; color: var(--brand-dark); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.showcase-tab .tnum {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
}
.showcase-tab[aria-selected="true"] .tnum { color: var(--brand); border-color: #c9dffb; background: var(--brand-light); }
.showcase-panel { display: none; }
.showcase-panel.active { display: block; animation: panel-in .45s cubic-bezier(.2, .7, .3, 1); }
.showcase-tabs { align-self: start; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================ Interface illustration ============================ */
.video-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--deep-2); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
}
.video-frame > img {
  width: 100%; height: auto; display: block;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: #0b1120;
}
.video-caption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; padding: 22px 26px; flex-wrap: wrap;
  background: #0b1120;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.video-caption h3 { color: #fff; margin: 0 0 4px; font-size: 17px; }
.video-caption p { color: #97a5ba; margin: 0; font-size: 14px; max-width: 62ch; }
.video-caption .btn { flex-shrink: 0; }
.video-note { font-size: 13px; color: var(--ink-3); margin-top: 14px; }

/* ============================ Feature list (dark) ============================ */
.feat-list { display: grid; gap: 14px; }
.feat {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .075);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.feat:hover { background: rgba(255, 255, 255, .07); border-color: rgba(127, 216, 255, .3); transform: translateX(4px); }
.feat .fi {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(61, 139, 255, .16); border: 1px solid rgba(127, 216, 255, .2);
  display: flex; align-items: center; justify-content: center;
}
.feat .fi svg { width: 17px; height: 17px; stroke: #7fd8ff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.feat h4 { color: #fff; margin: 0 0 3px; font-size: 15.5px; }
.feat p { color: #9fb0c8; margin: 0; font-size: 14px; }

/* ============================ Timeline ============================ */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent-2), var(--accent));
  border-radius: 2px; opacity: .45;
}
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(20, 102, 216, .1);
}
.tl-item h4 { margin-bottom: 3px; }
.tl-item p { color: var(--ink-2); margin-bottom: 0; font-size: 14.5px; }

/* ============================ FAQ ============================ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 16.5px; font-weight: 600; color: var(--ink);
  padding: 20px 40px 20px 0; position: relative;
  transition: color .2s ease;
}
/* Questions are buttons, so the focus ring has to land on the whole row. */
.faq-q:focus-visible {
  outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 4px;
}
.faq-q:hover { color: var(--brand); }
.faq-q::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s ease;
}
.faq-item.open .faq-q::after { transform: translateY(-30%) rotate(-135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a .inner { padding: 0 44px 22px 0; color: var(--ink-2); font-size: 15px; }
.faq-a p:last-child { margin-bottom: 0; }

/* ============================ Tables ============================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--bg-soft); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
tbody tr:last-child td { border-bottom: none; }
td code { font-size: 13px; }

/* ============================ Prose ============================ */
.prose { max-width: 860px; }
.prose h2 { margin-top: 46px; scroll-margin-top: 92px; }
.prose h3 { scroll-margin-top: 92px; }
.prose h3 { margin-top: 32px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: 6px; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.callout {
  background: var(--brand-light); border: 1px solid #c9dffb; border-left: 4px solid var(--brand);
  border-radius: 8px; padding: 16px 18px; margin: 22px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout p { color: var(--ink-2); font-size: 14.5px; }
.callout h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.meta-list { list-style: none; padding: 0; margin: 0; }
.meta-list li {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.meta-list li:last-child { border-bottom: none; }
.meta-list strong { color: var(--ink); }
@media (max-width: 620px) { .meta-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ============================ Form ============================ */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; font-size: 15px; color: var(--ink); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 102, 216, .12);
}
.field textarea { min-height: 130px; resize: vertical; }

/* Inline validation. The message sits under the field it belongs to, so the
   reader can see which one needs attention without hunting for it. */
.field-error {
  margin: 7px 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--danger); display: flex; align-items: flex-start; gap: 6px;
}
/* The hidden attribute is how the script says "no error here", but an author
   rule that sets display beats the user agent rule for [hidden]. Without
   this the little red exclamation mark sits under every field forever. */
.field-error[hidden] { display: none; }
.field-error::before {
  content: "!"; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px;
  border-radius: 50%; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 15px; text-align: center;
}
.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color: var(--danger);
  background: #fffafa;
}
.field.has-error input:focus, .field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .14);
}

/* ============================ Wide table affordance ============================
   A table wider than its column scrolls sideways. The hint tells the reader
   that hidden columns exist, and fades once they have reached the end. */
.table-scroll-hint {
  margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3);
  display: none; align-items: center; gap: 6px;
}
.table-scroll-hint::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: .6;
}
.table-scroll-hint:empty { display: none; }
.table-wrap.is-scrollable ~ .table-scroll-hint { display: flex; }
.table-wrap.is-scrollable.at-end ~ .table-scroll-hint { opacity: .35; }

/* A visible scrollbar tells the reader the table continues. Webkit needs an
   explicit height for the thumb to show. */
.table-wrap.is-scrollable { overflow-x: scroll; scrollbar-width: thin; }
.table-wrap.is-scrollable::-webkit-scrollbar { height: 9px; }
.table-wrap.is-scrollable::-webkit-scrollbar-track {
  background: var(--bg-soft); border-radius: 9px;
}
.table-wrap.is-scrollable::-webkit-scrollbar-thumb {
  background: #c6d0de; border-radius: 9px; border: 2px solid var(--bg-soft);
}
.table-wrap.is-scrollable::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
/* The scrollbar sits below the table, so it needs the wrapper to not clip it. */
.table-wrap.is-scrollable { padding-bottom: 2px; }

/* When a table scrolls sideways, the first column holds the row label. Pinning
   it keeps the reader oriented while the remaining columns move.

   Only prose tables get this treatment. The tables inside the workbench panels
   are product illustrations: they are deliberately narrow so that they read as
   a screen, and stretching them would break the mockup. */
.prose .table-wrap table { min-width: 560px; }
/* The wrapper must stay within the column so the table scrolls inside it
   rather than stretching the page. The prose column is a grid item, and a
   grid item has min-width:auto by default, which lets the table's own
   minimum width push the column wider than its track. */
.prose .table-wrap { max-width: 100%; overflow-x: auto; }
.page-layout > .prose { min-width: 0; }
.prose .table-wrap th:first-child,
.prose .table-wrap td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: #fff;
  box-shadow: 1px 0 0 var(--line);
}
.prose .table-wrap th:first-child {
  background: var(--bg-soft);
  z-index: 2;
}
.prose .table-wrap tbody tr:hover td:first-child { background: var(--bg-soft); }
/* The first column of a table holds short labels. Without a floor the
   browser squeezes the column until the label breaks in the middle of a
   word, which is what "广告表现数据" was doing. */
.table-wrap th:first-child, .table-wrap td:first-child { min-width: 9em; }
/* The workbench preview is a picture of a screen, not a table on the page.
   It is meant to be narrow, so the floor does not apply to it. */
.showcase-panel .table-wrap th:first-child,
.showcase-panel .table-wrap td:first-child { min-width: 0; }

/* ============================ Reading progress ============================
   A thin line under the sticky header showing how far through the page the
   reader is. Decorative only. */
.reading-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.reading-progress.is-visible { opacity: 1; }
.progress-bar {
  height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .1s linear;
}

/* ============================ Footer ============================ */
.site-footer { background: var(--deep); color: #cbd5e1; padding: 58px 0 30px; font-size: 14px; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 36px; margin-bottom: 38px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand img, .footer-brand svg { height: 30px; margin-bottom: 13px; }
.footer-brand p { color: #8b98ad; font-size: 13.5px; max-width: 42ch; }
.footer-col h4 { color: #fff; font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 13px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: #8b98ad;
}
.footer-bottom p { margin: 0; }
.icp a { color: #8b98ad; }

/* ============================ Language switcher ============================ */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 2px; background: #fff; flex-shrink: 0;
}
.lang-switch a {
  padding: 4px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-3); line-height: 1.5; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.lang-switch a:hover { color: var(--brand); text-decoration: none; }
.lang-switch a.active { background: var(--brand); color: #fff; }
.lang-switch a[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", var(--font); }

/* ============================ Tags / misc ============================ */
.tag {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--ink-2); margin: 0 6px 6px 0;
}
.tag-blue { background: var(--brand-light); border-color: #c9dffb; color: var(--brand-dark); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.last-updated { font-size: 13.5px; color: var(--ink-3); margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ============================ Scroll reveal ============================
   The hidden state is applied by JS, not by CSS. If JavaScript is unavailable
   or fails to run, every element must still be fully visible, because the
   review guidelines require all site information to be readable without any
   interaction. The .reveal class alone therefore changes nothing. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* SVG line drawing */
.js .draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1); }
.js .in .draw, .js .draw.in { stroke-dashoffset: 0; }

/* Count-up */
.count { font-variant-numeric: tabular-nums; }

/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .draw { stroke-dashoffset: 0; }
  .mockup { animation: none; }
}

/* ============================ Inner page layout ============================ */
.page-layout {
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  gap: 52px; align-items: start;
}
@media (max-width: 1000px) { .page-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

.page-toc { position: sticky; top: 92px; align-self: start; }
@media (max-width: 1000px) { .page-toc { position: static; } }
.page-toc .toc-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.page-toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.page-toc li a {
  display: block; padding: 5px 0 5px 14px; margin-left: -2px;
  border-left: 2px solid transparent; color: var(--ink-2);
  font-size: 13.5px; line-height: 1.5; transition: color .2s ease, border-color .2s ease;
}
.page-toc li a:hover { color: var(--brand); text-decoration: none; }
.page-toc li a.active { color: var(--brand-dark); border-left-color: var(--brand); font-weight: 600; }

/* Page header block for inner pages */
.page-head {
  padding-bottom: 30px; margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.page-head .meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px;
  font-size: 13.5px; color: var(--ink-3);
}
.page-head .meta span { display: inline-flex; align-items: center; gap: 6px; }
.page-head .meta strong { color: var(--ink-2); font-weight: 600; }

/* Pricing comparison table */
.plan-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 900px) { .plan-compare { grid-template-columns: minmax(0, 1fr); } }
.plan-col {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; background: #fff; position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.plan-col:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan-col.featured { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20,102,216,.08); }
.plan-col .pc-tag {
  position: static; display: inline-block;
  background: none; color: var(--ink); font-size: 12px; font-weight: 600;
  padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0; letter-spacing: .04em;
}
.plan-col h3 { margin-bottom: 2px; }
.plan-col .pc-price {
  font-size: 32px; font-weight: 700; letter-spacing: -.025em; color: var(--ink);
  margin: 14px 0 2px; line-height: 1.1;
}
.plan-col .pc-price small { font-size: 13.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.plan-col .pc-note { font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; }
.plan-col ul { list-style: none; padding: 0; margin: 0 0 20px; }
.plan-col ul li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
}
.plan-col ul li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); opacity: .55;
}
.plan-col .btn { width: 100%; text-align: center; }

/* Feature checklist */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative; padding: 9px 0 9px 30px;
  border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-size: 14.5px;
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* Contact layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.contact-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm);
}

/* Stat strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 8px 0 4px;
}
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } 
body { font-size: 16px; }
.section { padding: 56px 0; }
.section-soft { padding: 48px 0; }
.hero-stat .n { font-size: 22px; }
.lede, .prose p, .card p { max-width: none; }
.mockup { max-width: 100%; }
.mockup-window { min-width: 0; }
.hero-dark { padding: 44px 0 42px; }
.hero-dark h1 { font-size: 26px; }
.mockup { display: none; }
}
.stat-strip > div { background: #fff; padding: 20px 22px; }
.stat-strip .n { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-strip .l { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

/* Numbered steps */
.step-list { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step-list > li {
  counter-increment: step; position: relative;
  padding: 0 0 26px 52px; border-bottom: 1px solid var(--line-2);
}
.step-list > li:last-child { border-bottom: none; padding-bottom: 0; }
.step-list > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--brand);
  background: var(--brand-light); width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.step-list h4 { margin: 4px 0 4px; font-size: 15.5px; }
.step-list p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* ============================ Accessibility ============================ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.hero-dark :focus-visible { outline-color: #7fd8ff; }

a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Screen-reader-only text that becomes visible when focused */
.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;
}
.sr-only:focus, .sr-only:focus-within {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}

/* Tables: readable header affordance and visible captions */
table caption {
  caption-side: top; text-align: left; font-size: 13.5px; color: var(--ink-3);
  padding: 0 0 10px; font-weight: 500;
}
th[scope="col"] { white-space: nowrap; }
th[scope="row"] { font-weight: 600; color: var(--ink); background: #fff; }

/* Prevent long code and URL strings from breaking table layout. The wrap is
   allowed inside cells, but the table itself keeps a readable minimum width
   so that Chinese text is not squeezed into a one-character-wide column. */
.table-wrap td code, .table-wrap td { overflow-wrap: anywhere; }

/* A sub-page hero carries an eyebrow, a title and one paragraph. The home
   hero can take the full padding because it holds a mockup and three figures;
   here the same padding left a void that read as an unfinished template. */
.hero-dark.hero-compact { padding: 58px 0 54px; }
strong, b { font-weight: 600; color: var(--ink); }
/* One reading measure per language. The measure belongs to the column, not
   to the paragraph: a paragraph capped inside a wider box leaves a void on
   the right, which reads as a mistake rather than as typography. */
:root { --measure: 860px; }
html[lang="en"] { --measure: 780px; }
.prose p, .callout p, .faq-a p, .section-head p { max-width: none; line-height: 1.85; }
html[lang="en"] .prose p,
html[lang="en"] .callout p,
html[lang="en"] .faq-a p,
html[lang="en"] .section-head p { max-width: 76ch; }
.prose, .callout, .section-head, .narrow { max-width: var(--measure); }
.site-header { background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--hair);
  box-shadow: none; }
.brand-name { font-weight: 600; letter-spacing: 0; }
.brand-sub { letter-spacing: .04em; text-transform: none; }
.nav a { font-weight: 500; letter-spacing: .01em; }
.btn { border-radius: var(--radius);
  box-shadow: none;
  font-weight: 600;
  letter-spacing: .015em;
  transform: none;
  transition: background-color .15s linear, border-color .15s linear, color .15s linear; }
.btn:hover { transform: none; }
.btn-primary { background: var(--ink);
  border-color: var(--ink);
  color: #fff; }
.btn-primary:hover { background: #000; border-color: #000; }
.btn-secondary, .btn-ghost { background: transparent;
  border: 1px solid var(--hair);
  color: var(--ink); }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--ink);
  color: var(--ink); }
.hero-dark { background: #14171b;
  border-bottom: 1px solid #000; }
.hero-dark::before, .hero-dark::after { display: none; }
.hero-dark h1 { color: #fff; }
.hero-dark .lede { color: #b9bfc6; }
.hero-dark .eyebrow { color: #8b939c; }
.eyebrow { display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: 18px; }
.eyebrow::before { content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .5; }
.eyebrow .dot { display: none; }
.hero-stat .n { font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.hero-stat .l { font-size: 12.5px; color: var(--ink-3); letter-spacing: .01em; }
.hero-stats { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.hero-note { font-size: 12.5px;
  line-height: 1.75;
  color: #8b939c;
  max-width: 58ch;
  margin-top: 18px; }
.section { padding: 84px 0; }
.section + .section { padding-top: 72px; }
.section-soft { background: var(--paper-2);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 72px 0; }
.section-dark { background: #14171b; }
.section-dark::before, .section-dark::after { display: none; }
.section-head { margin-bottom: 40px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--ink-3);
  font-size: 15.5px; }
.card { background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 24px 22px; }
.section-soft .card { background: var(--paper); }
.card-icon { width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  margin-bottom: 14px; }
.card-num { font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--ink-3); }
.grid { gap: 14px; }
.table-wrap { border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: #fff; }
table th { background: var(--paper-2);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--ink-3);
  font-weight: 600; }
table td, table th { padding: 12px 14px; border-bottom: 1px solid var(--hair-2); }
.callout { border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
  font-size: 14px; }
.faq-item { border: 0;
  border-top: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 20px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--hair); }
.faq-q { font-weight: 600;
  font-size: 15.5px;
  color: var(--ink); }
.faq-a p { font-size: 14.5px; color: var(--ink-3); margin-top: 8px; }
.plan-col { border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: none;
  background: #fff; }
.pc-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.showcase-panel, .mockup-window, .mockup-body { border-radius: var(--radius);
  box-shadow: none; }
.showcase-panel { border: 1px solid var(--hair); background: #fff; }
.showcase-tab { border-radius: 0; }
.mk-badge { border-radius: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: #cfd5db;
  font-weight: 500;
  letter-spacing: .04em; }
.mk-kpi, .mk-rec, .mk-recs { border-radius: 0; }
.site-footer { background: #14171b;
  border-top: 0;
  padding-top: 56px; }
.footer-col h4, .footer-col .t { letter-spacing: .06em;
  text-transform: none;
  font-size: 12.5px;
  color: #9aa2ab; }
.site-footer a { color: #c2c8cf; }
.site-footer a:hover { color: #fff; }
.page-layout { gap: 48px; }
.page-toc { border-left: 1px solid var(--hair); padding-left: 20px; }
.toc-title { letter-spacing: .06em; text-transform: none; font-size: 12.5px; color: var(--ink-3); }
.prose h2 { font-size: 20px;
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--hair-2); }
.prose h2:first-of-type { border-top: 0; padding-top: 0; }
.prose p, .prose li { font-size: 15px; color: var(--ink-2); }
.meta-list, .last-updated { font-size: 13px; color: var(--ink-3); }
.reveal, .reveal.in, .reveal.up, .reveal.vis { opacity: 1;
  transform: none;
  transition: none;
  animation: none; }
/* The primary button is filled with the ink colour, which is the page
   background on a dark section, so it disappeared. In a dark section the
   primary button has to invert: paper fill, ink text. */
.hero-dark .btn-primary, .section-dark .btn-primary {
  background: #ffffff; border-color: #ffffff; color: #14171b;
}
.hero-dark .btn-primary:hover, .section-dark .btn-primary:hover {
  background: #e6eaef; border-color: #e6eaef; color: #14171b;
}
.hero-dark .btn-secondary, .hero-dark .btn-ghost, .section-dark .btn-secondary, .section-dark .btn-ghost { background: transparent;
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff; }
.hero-dark .btn-secondary:hover, .hero-dark .btn-ghost:hover, .section-dark .btn-secondary:hover, .section-dark .btn-ghost:hover { border-color: #fff;
  color: #fff; }
.eyebrow { background: none;
  border: 0;
  padding: 0;
  border-radius: 0; }
.hero-dark .eyebrow::before { background: #8b939c; }
.lang-switch { border: 0;
  background: none;
  padding: 0;
  gap: 0;
  border-radius: 0; }
.lang-switch a { padding: 0;
  border-radius: 0;
  font-weight: 500;
  color: var(--ink-3);
  font-size: 13px; }
.lang-switch a.active { background: none;
  color: var(--ink);
  font-weight: 600; }
.lang-switch a + a::before { content: "/";
  color: #c3c8cd;
  margin: 0 7px;
  font-weight: 400; }
.hero-dark { padding: 56px 0 54px; }
.hero-dark:has(.mockup) { padding: 86px 0 94px; }
.hero-dark h1 { font-size: clamp(27px, 3vw, 36px); }
.hero-dark:has(.mockup) h1 { font-size: clamp(30px, 3.6vw, 42px); }
.page-toc { border-left: 1px solid var(--hair);
  padding-left: 18px; }
.page-toc ul { border-left: 0; }
.page-toc li a { border: 0;
  border-left: 0;
  padding: 5px 0;
  margin-left: 0;
  border-radius: 0;
  font-size: 13px;
  color: var(--ink-3); }
.page-toc li a.active { color: var(--ink); font-weight: 600; }
.page-toc .toc-title { letter-spacing: .04em; text-transform: none; }
.callout .ico, .callout .icon, .callout-icon, .callout > div > span:first-child { background: none;
  border-radius: 0; }
.feat { background: transparent;
  border-radius: 0;
  box-shadow: none; }
.fi { background: none;
  border-color: transparent;
  border-radius: 0;
  color: var(--accent); }
.fi svg { stroke: var(--accent); }

.pc-price { font-size: 34px; }
.count { font-size: 0;
  line-height: 1; }
.count::before { content: attr(data-count);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  line-height: 1.1; }
.count[data-suffix]::before { content: attr(data-count) attr(data-suffix); }
.hero-dark .count::before { font-size: 26px; }

@media print {
.site-header, .site-footer, .page-toc, .btn-row { display: none; }
body { background: #fff; }
.section, .section-soft { padding: 8pt 0; }
}

/* =====================================================================
   Design layer
   The look of the site: paper background, hairline rules, square
   corners, one accent colour, print-like spacing. Merged in from a
   separate editorial sheet so there is one stylesheet and one set of
   tokens, and no override war.
   ===================================================================== */

/* The mockup is part of the illustration, not a floating panel. */
.mockup, .mockup-window, .mockup-body, .mockup-bar,
.mk-kpis, .mk-kpi, .mk-recs, .mk-rec { border-radius: 2px; }
.mockup { box-shadow: none; border: 1px solid rgba(255, 255, 255, .14); }

/* List markers are ink, not the brand blue. */

/* ---------- A labelled statement ----------
   The label sits in its own column and the text reads across the rest,
   separated by hairlines. Used where a stack of bordered boxes would be
   too loud, and where the label and the text are worth reading together. */
.fact-list { margin: 0 0 36px; border-top: 1px solid var(--hair); }
.fact {
  display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 32px;
  padding: 22px 0; border-bottom: 1px solid var(--hair);
}
.fact dt { color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.7; }
.fact dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.85; }
.fact dd strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .fact { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
}

/* A section that opens with a heading and then explains itself. The heading
   sits in its own column so the text keeps a readable line length and the
   page does not end up with a column of empty space beside it. */
.lede-block { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
.lede-block h2 { margin: 0; }
.lede-block p { margin: 0 0 1em; }
@media (max-width: 900px) {
  .lede-block { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ---------- Last lines ----------
   A paragraph whose last line carries a single character reads as a
   mistake. `pretty` lets the browser pull a word down to avoid that, and
   `balance` evens out the lines of a heading. Both degrade quietly where
   they are not supported. */
p, li, dd, dt, td, th, figcaption { text-wrap: pretty; }
h1, h2, h3, h4, .step-list h4 { text-wrap: balance; }

/* ---------- Links ----------
   A link at the end of a sentence used to push the full stop onto a line of
   its own. Keeping an inline link whole avoids that. A long address keeps
   the .link-break class, which is allowed to break. */
.link-break, a .link-break { white-space: normal; overflow-wrap: anywhere; }

/* A link and the full stop after it move as one unit, so the stop never
   ends up alone on a line. */
.keep { white-space: nowrap; }

/* ---------- The closing block ----------
   A heading, one sentence and two buttons left a wide dark block mostly
   empty. It now also says what happens after a visitor writes, which is the
   question they are actually holding at that point. */
.closing { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.closing-lead h2 { color: #fff; }
.closing-lead .lede { color: #a7b3c7; max-width: 30em; margin: 18px 0 26px; }
.closing-steps { border: 1px solid rgba(255, 255, 255, .15); padding: 26px 28px; }
.closing-steps h3 { color: #fff; font-size: 15px; margin: 0 0 16px; }
.closing-steps ol { list-style: none; margin: 0; padding: 0; }
.closing-steps li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1);
}
.closing-steps li:first-child { border-top: 0; padding-top: 0; }
.closing-steps .n { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 3px; }
.closing-steps b { display: block; color: #fff; font-weight: 600; font-size: 14.5px; margin-bottom: 3px; }
.closing-steps div { color: #9aa6b8; font-size: 13.5px; line-height: 1.7; }

/* ---------- The features hero ----------
   The endpoint list belongs in the hero: it is what the page is about, and it
   fills the right of the first screen with something useful. */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero-ledger { border: 1px solid rgba(255, 255, 255, .15); padding: 22px 24px; }
.hero-ledger-title {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #8b939c; margin-bottom: 14px;
}
.hero-ledger ul { list-style: none; margin: 0; padding: 0; }
.hero-ledger li {
  font-family: var(--mono); font-size: 12.5px; color: #c8d1de;
  padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .09);
}
.hero-ledger li:first-child { border-top: 0; }

@media (max-width: 900px) {
  .closing { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ============================ Sub-page hero split ============================ */
/* A sub-page hero carried an eyebrow, a title and one paragraph, and nothing
   else, so the right half of the column read as an unfinished template. The
   split gives the hero a second column and fills it with the page's own
   subject, set in hairlines rather than with a picture of something else. */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px; align-items: center;
}
@media (max-width: 980px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* The panel is ruled rows, not a card: no fill, no shadow, one hairline
   between rows. The numbered steps use the same tabular figures as the
   rest of the site. */
.hero-panel { margin: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 15px; }
.hero-panel .hp-head {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #8b939c; margin-bottom: 4px;
}
/* A flow drawn as a diagram rather than a list. The lines carry the site's
   own .draw class, so they are drawn in when the section scrolls into view. */
.hp-flow { width: 100%; height: auto; display: block; overflow: visible; }
/* The connectors are horizontal lines, and a zero-height bounding box never
   satisfies the scroll-reveal observer, so they cannot use the .draw class.
   They are drawn plainly and the panel around them fades in instead: a line
   that only exists during an animation is a line that is missing from every
   screenshot and every printout. */
.hp-flow .fl-line { stroke: rgba(255, 255, 255, .30); stroke-width: 1; fill: none; }
.hp-flow .fl-node { fill: #14171b; stroke: rgba(255, 255, 255, .40); stroke-width: 1.4; }
.hp-flow .fl-node.key { fill: #7fd8ff; stroke: #7fd8ff; }
.hp-flow .fl-num { font-family: var(--mono); font-size: 9px; fill: #6f7b8b; text-anchor: middle; }
.hp-flow .fl-label { font-size: 12.5px; fill: #9aa6b8; text-anchor: middle; }
.hp-flow .fl-label.key { fill: #ffffff; font-weight: 600; }
.hp-caption { font-size: 13px; color: #8b98ad; line-height: 1.7; margin: 16px 0 0; max-width: 46ch; }

/* A worked example rather than a second copy of the plan cards further down
   the page. The numbers do the work. */
.hp-calc {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hp-calc .hp-factor { font-size: 13.5px; color: #8b98ad; }
.hp-calc .hp-factor b {
  font-size: 27px; font-weight: 600; color: #fff; margin-right: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.hp-calc .hp-op { font-size: 18px; color: #7a8593; }
.hp-calc .hp-total { font-size: 13.5px; color: #8b98ad; }
.hp-calc .hp-total b {
  font-size: 42px; font-weight: 600; color: #fff; margin-right: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

.hp-formula {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; color: #fff;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.10);
}
.hp-formula .hp-op { color: #8b98ad; font-weight: 400; }
.hp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,.10);
}
.hp-row .hp-t { font-size: 14.5px; }
.hp-row .hp-p {
  font-size: 22px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hp-row .hp-p small { font-size: 12px; font-weight: 400; color: #8b98ad; margin-left: 3px; }
.hp-note { font-size: 12.5px; color: #8b98ad; line-height: 1.7; margin: 12px 0 0; }

/* ============================ Interface gallery ============================ */
/* Six real interface renders, one at a time, with a rail to switch between
   them. Each render is cut to its own content, and the stage takes the height
   of the render it holds, so there is no empty area under the picture. */
/* The stage takes the height of the render it holds. The script sets that
   height explicitly, which is what lets the change be animated when the
   rail moves. */
.gallery-stage {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  background: #fff;
  transition: height .38s cubic-bezier(.2, .7, .3, 1);
}
.gallery-figure { margin: 0; display: none; }
.gallery-figure.is-active { display: block; animation: gallery-in .42s cubic-bezier(.2,.7,.3,1); }
.gallery-figure img { width: 100%; height: auto; display: block; }
@keyframes gallery-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.gallery-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (max-width: 1040px) { .gallery-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gallery-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery-thumb {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; background: transparent; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 8px; cursor: pointer; font-family: inherit;
  color: #97a5ba; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.gallery-thumb:hover { border-color: rgba(255,255,255,.36); color: #fff; }
.gallery-thumb[aria-current="true"] {
  border-color: rgba(127,216,255,.55); color: #fff; background: rgba(255,255,255,.07);
}
.gt-chip {
  display: block; height: 54px; overflow: hidden; background: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
}
.gt-chip img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.gt-label { display: flex; align-items: baseline; gap: 7px; }
.gt-label .tnum { font-family: var(--mono); font-size: 10.5px; color: #7fd8ff; opacity: .85; }
@media (max-width: 1040px) { .gt-chip { height: 44px; } }
.gallery-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-top: 16px;
}
.gallery-foot p { margin: 0; font-size: 13px; color: #8b98ad; max-width: 62ch; line-height: 1.7; }