/* looptend website · R11 (2026-09-27). Assembled from .context/r11/parts by assemble.py; edit the parts, not this file. */

/* ===== chrome ===== */
/* R11 base · tokens, reset, type, buttons, sections, reveal. Owned by the chrome stream.
   Token NAMES are a contract shared by every part; values may be tuned, names may not change. */

:root {
  color-scheme: light;
  --canvas: #ffffff;
  --fill: #f5f5f6;            /* soft fill: active card, FAQ card, segmented track */
  --fill-warm: #f7f6f3;       /* logo kit warm white */
  --panel: linear-gradient(160deg, #fbf8f5 0%, #f5f6fa 100%); /* pale panel behind illustrations (PaywallPro works panels, warm) */
  --ink: #141414;             /* titles and all body copy */
  --ink-2: #2e3138;           /* secondary copy: still dark, never grey */
  --line: rgba(0, 0, 0, 0.08);/* four-sided card outlines only; never a single-side divider */
  --line-2: rgba(0, 0, 0, 0.12);
  --accent: #FF6B21;          /* ember: primary button, active index, check marks, key figures */
  --accent-deep: #EA4323;
  --accent-glow: #FFB63A;
  --accent-soft: #FFF1E8;
  --good: #3DD68C;            /* App: working */
  --amber: #F5A524;           /* App: your turn / stuck / >= 80% */
  --red: #E5484D;             /* App: blocked / >= 95% */
  --r-card: 28px;
  --r-window: 18px;
  --r-pill: 999px;
  --shadow-card: 0 24px 48px -30px rgba(20, 24, 40, 0.30), 0 2px 8px rgba(20, 24, 40, 0.04);
  --shadow-lift: 0 34px 60px -30px rgba(20, 24, 40, 0.38), 0 4px 12px rgba(20, 24, 40, 0.06);
  --shadow-window: 0 40px 80px -40px rgba(20, 24, 40, 0.45), 0 12px 28px -18px rgba(20, 24, 40, 0.25);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* reveals, panels, toggles */
  --ease-spring: cubic-bezier(0.32, 1.22, 0.36, 1); /* hover lifts */
  --ease-toggle: cubic-bezier(0.22, 1, 0.36, 1); /* segmented thumbs (Vela) */
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec-pad: clamp(96px, 10vw, 150px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans", "Hiragino Sans GB", "Apple SD Gothic Neo", "Microsoft YaHei", "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
:lang(ja) { word-break: auto-phrase; }

.skip-link { position: absolute; left: 16px; top: -80px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; z-index: 60; }
.skip-link:focus { top: 16px; }

/* Layout */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sec { position: relative; padding-block: var(--sec-pad); background: var(--canvas); }
main > .sec:last-child, main.page-blog > section:last-child, main.page-post > section:last-child, main.page-faq > section:last-child, main.page-download > section:last-child { padding-bottom: calc(var(--sec-pad) * 0.6); } /* the footer's own top padding takes over */

/* Type. H1 is the hero only; every section has exactly one H2 */
.h-hero { font-size: clamp(44px, 6.2vw, 88px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
.h-section { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.14; font-weight: 700; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.h-card { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.copy { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.nowrap { white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), background-color 0.18s ease, scale 0.12s ease; }
.btn:hover { translate: 0 -2px; }
.btn:active { scale: 0.975; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(234, 67, 35, 0.7); }
.btn-primary:hover { background: var(--accent-deep); box-shadow: 0 16px 30px -14px rgba(234, 67, 35, 0.75); }
.btn-dark { background: #141414; color: #fff; }
.btn-dark:hover { background: #2a2a2a; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--fill); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* Reveal: [data-reveal] rises in once when it enters the viewport; --d sets a delay. Visible without JS and under reduced motion */
.js [data-reveal] { opacity: 0; translate: 0 32px; transition: opacity 0.8s var(--ease-out) var(--d, 0ms), translate 0.8s var(--ease-out) var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* UI replicas (App-true surfaces) opt out of the site's copy rules: small type and App greys live only inside .ui */
.ui { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ===================================================================== */
/* Header: centred floating glass capsule (Vela 700×56), hover-open menus  */
/* ===================================================================== */
.site-header { position: sticky; top: 0; z-index: 40; display: flex; justify-content: center; padding: 14px var(--gutter) 0; pointer-events: none; }
.header-pill { position: relative; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px 0 14px; border-radius: var(--r-pill); pointer-events: auto;
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(20, 24, 40, 0.05), 0 18px 50px -12px rgba(20, 24, 40, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  animation: navDrop 0.6s var(--ease-out) both; }
@keyframes navDrop { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
.wordmark { display: inline-flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); border-radius: var(--r-pill); }
.wordmark-mark { width: 28px; height: 28px; flex: none; }
.site-nav { display: flex; align-items: center; gap: 2px; margin: 0 clamp(8px, 2vw, 28px); }
.nav-item { position: relative; }
.nav-group-label { display: none; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background-color 0.22s var(--ease-out), color 0.22s var(--ease-out), scale 0.12s ease; }
.nav-trigger:hover, .nav-item.is-open .nav-trigger { background: rgba(30, 35, 50, 0.055); }
.nav-trigger:active { scale: 0.975; }
.nav-chevron { transition: rotate 0.22s var(--ease-out); }
.nav-item.is-open .nav-chevron, .lang-menu.is-open .nav-chevron { rotate: 180deg; }
.nav-panel { position: absolute; top: calc(100% + 12px); left: 50%; display: none; min-width: 208px; padding: 8px; border-radius: 17px; background: #fff; border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 28px 64px -32px rgba(22, 26, 42, 0.52), 0 8px 22px rgba(28, 32, 48, 0.09), 0 1px 0 rgba(255, 255, 255, 0.9) inset; transform: translateX(-50%); }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* invisible hover bridge across the 12px gap */
.nav-item.is-open .nav-panel { display: block; animation: navMenuIn 0.17s var(--ease-out) both; }
@keyframes navMenuIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.nav-panel a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: translate 0.22s var(--ease-out), background-color 0.22s var(--ease-out), color 0.22s var(--ease-out); }
.nav-panel a:hover, .nav-panel a:focus-visible { translate: 0 -1px; background: var(--accent-soft); color: var(--accent-deep); outline: none; }
.nav-panel a[aria-current="page"] { gap: 8px; }
.nav-panel a[aria-current="page"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.nav-download { min-height: 44px; padding: 0 22px; margin-left: 2px; }
.nav-toggle { display: none; }

/* ≤ 900: mark + download + ☰; the menu is a panel under the capsule with the two groups laid flat */
@media (max-width: 900px) {
  .site-header { padding-top: 10px; }
  .header-pill { width: 100%; gap: 6px; padding: 0 6px 0 12px; }
  .wordmark { margin-right: auto; }
  .site-nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; align-items: start; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 12px; border-radius: 24px; background: #fff;
    box-shadow: 0 0 0 1px rgba(20, 24, 40, 0.05), 0 28px 64px -32px rgba(22, 26, 42, 0.52), 0 8px 22px rgba(28, 32, 48, 0.09); }
  .site-header.is-open .site-nav { display: grid; animation: navMenuIn2 0.2s var(--ease-out) both; }
  @keyframes navMenuIn2 { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }
  .nav-trigger { display: none; }
  .nav-group-label { display: block; padding: 12px 14px 6px; font-size: 16px; font-weight: 800; color: var(--ink); }
  .nav-panel, .nav-item.is-open .nav-panel { position: static; display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; animation: none; }
  .nav-panel::before { display: none; }
  .nav-panel a { justify-content: flex-start; min-height: 48px; padding: 0 14px; border-radius: 12px; }
  .nav-download { min-height: 44px; padding: 0 18px; }
  .nav-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color 0.22s var(--ease-out); }
  .nav-toggle:hover { background: rgba(30, 35, 50, 0.055); }
  .nav-toggle span { position: relative; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: background-color 0.2s ease; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: top 0.2s var(--ease-out), rotate 0.2s var(--ease-out); }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  .site-header.is-open .nav-toggle span { background: transparent; }
  .site-header.is-open .nav-toggle span::before { top: 0; rotate: 45deg; }
  .site-header.is-open .nav-toggle span::after { top: 0; rotate: -45deg; }
}
@media (max-width: 560px) {
  .site-nav { grid-template-columns: 1fr; }
  .nav-item + .nav-item { margin-top: 10px; } /* two groups read as two blocks */
}

/* ===================================================================== */
/* Footer: white, no lines; brand block, two columns, © + language capsule  */
/* ===================================================================== */
.site-footer { position: relative; padding: clamp(40px, 5vw, 72px) 0 36px; background: var(--canvas); } /* the last section's --sec-pad carries the separation */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px 32px; }
.footer-brand .wordmark { padding: 0; }
.footer-brand p { margin-top: 16px; max-width: 360px; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.footer-col h3 { margin-bottom: 8px; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--ink); }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; font-weight: 500; color: var(--ink-2); transition: color 0.2s var(--ease-out), translate 0.32s var(--ease-spring); }
.footer-col a:hover { color: var(--accent-deep); translate: 2px 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: clamp(56px, 6vw, 88px); }
.footer-bottom p { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.lang-menu { position: relative; }
.lang-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), translate 0.32s var(--ease-spring), scale 0.12s ease; }
.lang-trigger:hover, .lang-menu.is-open .lang-trigger { background: var(--fill); border-color: rgba(0, 0, 0, 0.16); }
.lang-trigger:active { scale: 0.975; }
.lang-globe { color: var(--ink-2); }
.lang-list { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 188px; padding: 8px; border-radius: 17px; background: #fff; border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 28px 64px -32px rgba(22, 26, 42, 0.52), 0 8px 22px rgba(28, 32, 48, 0.09), 0 1px 0 rgba(255, 255, 255, 0.9) inset; animation: langIn 0.17s var(--ease-out) both; }
.lang-list[hidden] { display: none; }
@keyframes langIn { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
.lang-list a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: translate 0.22s var(--ease-out), background-color 0.22s var(--ease-out), color 0.22s var(--ease-out); }
.lang-list a:hover, .lang-list a:focus-visible { translate: 0 -1px; background: var(--accent-soft); color: var(--accent-deep); outline: none; }
.lang-list a[aria-current]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
@media (max-width: 760px) {
  .site-footer { padding-bottom: 96px; } /* no-JS fallback: keeps the © row clear of the back-to-top button */
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* Back to top: appears after a screen of scrolling; 44px round button */
.back-top { position: fixed; right: 24px; bottom: 24px; z-index: 30; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); font-size: 18px; font-weight: 700; color: var(--ink); cursor: pointer; opacity: 0; translate: 0 8px;
  transition: opacity 0.25s var(--ease-out), translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out); }
.back-top.is-visible { opacity: 1; translate: 0 0; }
.back-top.is-parked { opacity: 0; translate: 0 8px; pointer-events: none; } /* while the footer © row is on screen, so it never covers the language capsule */
.back-top:hover { translate: 0 -2px; box-shadow: var(--shadow-lift); }
.back-top[hidden] { display: none; }

/* ===================================================================== */
/* Subpages (blog index, post, faq, download): scoped to the <main> class  */
/* ===================================================================== */
main.page-blog .wrap, main.page-post .wrap, main.page-faq .wrap, main.page-download .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
main.page-blog > section, main.page-post > section, main.page-faq > section, main.page-download > section { padding: clamp(40px, 6vw, 88px) 0 var(--sec-pad); }
main.page-blog h1, main.page-post h1, main.page-faq h1, main.page-download h1 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
main.page-blog a:not(.btn), main.page-post .post-body a, main.page-faq details a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color 0.2s var(--ease-out); }
main.page-post .post-body a:hover, main.page-faq details a:hover { color: var(--accent-deep); }

/* Blog index: three cards, each topped by an App-true replica sitting on a pale panel and spilling over its edge */
main.page-blog .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
main.page-blog .blog-slot { display: grid; }
main.page-blog .blog-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 28px 28px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(20, 24, 40, 0.03);
  transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), border-color 0.2s ease; }
main.page-blog .blog-card:hover, main.page-blog .blog-card:focus-within { translate: 0 -4px; box-shadow: var(--shadow-lift); border-color: var(--line-2); }
main.page-blog .blog-art { position: relative; height: 210px; margin: 12px -16px 40px; border-radius: 20px; background: var(--panel); }
main.page-blog .blog-art .ui { position: absolute; left: 50%; bottom: -26px; width: min(300px, 100% - 40px); translate: -50% 0; text-align: left; font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; transition: translate 0.45s var(--ease-spring); }
main.page-blog .blog-art .bc-summary { width: min(320px, 100% - 32px); }
main.page-blog .blog-card:hover .blog-art .ui, main.page-blog .blog-card:focus-within .blog-art .ui { translate: -50% -6px; }
main.page-blog .blog-card h2 { font-size: clamp(22px, 2vw, 26px); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
main.page-blog .blog-card h2 a { color: inherit; text-decoration: none; font-weight: inherit; }
main.page-blog .blog-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
main.page-blog .blog-card h2 a:focus-visible { outline: none; }
main.page-blog .blog-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
main.page-blog .blog-card > p { font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
@media (max-width: 900px) { main.page-blog .blog-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

/* Replica 1 · the App's 「轮到你了」 reminder card (mirrors features .ft-reminder) */
main.page-blog .bc-reminder { padding: 16px 16px 16px 18px; border-radius: 13px; background: #1b1b1c; color: #fff; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); }
main.page-blog .bc-rm-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
main.page-blog .bc-rm-head i { position: relative; flex: none; width: 20px; height: 20px; }
main.page-blog .bc-rm-head i img { display: block; width: 100%; height: 100%; }
main.page-blog .bc-rm-head i::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1.5px #1b1b1c; }
main.page-blog .bc-rm-head time { margin-left: auto; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
main.page-blog .bc-rm-body { margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.3; }
main.page-blog .bc-rm-body span { margin-left: 6px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
main.page-blog .bc-rm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
main.page-blog .bc-rm-actions span { display: inline-grid; place-items: center; height: 27px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
main.page-blog .bc-rm-ok { background: rgba(255, 255, 255, 0.16); color: #fff; }
main.page-blog .bc-rm-open { background: #fff; color: #141414; }

/* Replica 2 · the accounts row with 「额度用尽时自动切换」 (mirrors hero .st-relay / features .ft-accounts) */
main.page-blog .bc-accounts { padding: 12px 14px 12px; border-radius: 14px; background: #fff; color: rgba(0, 0, 0, 0.92); box-shadow: 0 26px 44px -26px rgba(20, 24, 40, 0.45), 0 2px 8px rgba(20, 24, 40, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); font-size: 13.5px; }
main.page-blog .bc-ac-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
main.page-blog .bc-ac-head img { display: block; width: 18px; height: 18px; }
main.page-blog .bc-ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #f4f4f6; font-weight: 600; }
main.page-blog .bc-toggle { position: relative; flex: none; width: 34px; height: 19px; border-radius: var(--r-pill); background: #2C6CF7; }
main.page-blog .bc-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.3); }
main.page-blog .bc-ac-sub { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; white-space: nowrap; }
main.page-blog .bc-acct { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.055); font-weight: 600; }
main.page-blog .bc-acct img { width: 12px; height: 12px; }
main.page-blog .bc-acct em { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.08); }
main.page-blog .bc-acct-next { margin-left: auto; color: var(--accent); font-weight: 700; }

/* Replica 3 · the work summary card, 今日完成 (mirrors features .ft-summary) */
main.page-blog .bc-summary { padding: 16px 18px 14px; border-radius: 16px; background: #fff; color: rgba(0, 0, 0, 0.92); box-shadow: 0 30px 50px -28px rgba(20, 24, 40, 0.42), 0 2px 8px rgba(20, 24, 40, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.05); font-size: 12.5px; line-height: 1.45; }
main.page-blog .bc-sm-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
main.page-blog .bc-sm-head img { display: block; width: 16px; height: 16px; }
main.page-blog .bc-sm-head span { font-weight: 700; }
main.page-blog .bc-sm-head b { margin-left: 4px; font-weight: 700; }
main.page-blog .bc-sm-head time { margin-left: auto; font-size: 11.5px; color: rgba(0, 0, 0, 0.62); white-space: nowrap; }
main.page-blog .bc-sm-sec { margin-top: 12px; font-size: 12px; font-weight: 700; }
main.page-blog .bc-sm-list { display: grid; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
main.page-blog .bc-sm-list li { position: relative; padding-left: 18px; font-weight: 500; }
main.page-blog .bc-sm-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
main.page-blog .bc-sm-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
main.page-blog .bc-agent { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.055); font-size: 11.5px; font-weight: 600; }
main.page-blog .bc-agent img { width: 12px; height: 12px; }
main.page-blog .bc-sm-n { margin-left: auto; font-size: 11.5px; color: rgba(0, 0, 0, 0.62); white-space: nowrap; }

/* Post: centred head, 720px measure, no closing rule */
main.page-post .post-head { max-width: 820px; margin: 0 auto; text-align: center; }
main.page-post .post-body { max-width: 720px; margin: clamp(40px, 5vw, 64px) auto 0; font-size: 18px; line-height: 1.75; color: var(--ink); }
main.page-post .post-body p { text-wrap: pretty; }
main.page-post .post-body p + p, main.page-post .post-body ul + p, main.page-post .post-body p + ul { margin-top: 18px; }
main.page-post .post-body h2 { margin: 44px 0 14px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
main.page-post .post-body ul, main.page-post .post-body ol { display: grid; gap: 8px; padding-left: 0; }
main.page-post .post-body ul li { position: relative; padding-left: 28px; }
main.page-post .post-body ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
main.page-post .post-body ol { counter-reset: n; }
main.page-post .post-body ol li { position: relative; padding-left: 36px; counter-increment: n; }
main.page-post .post-body ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0; font-weight: 800; color: var(--accent); }
main.page-post .post-body strong { font-weight: 700; color: var(--ink); }
main.page-post .post-close { margin-top: 40px; padding: 24px 28px; border: 0; border-radius: 20px; background: var(--fill); font-weight: 500; }

/* FAQ page: each answer is its own card, groups separated by space only */
main.page-faq .faq-group { max-width: 880px; margin: clamp(48px, 6vw, 80px) auto 0; }
main.page-faq .faq-group h2 { margin-bottom: 20px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
main.page-faq .faq-list { display: grid; gap: 12px; }
main.page-faq details { border: 0; border-radius: 20px; background: var(--fill); overflow: hidden; scroll-margin-top: 96px; transition: background-color 0.22s var(--ease-out), box-shadow 0.32s var(--ease-out), opacity 0.8s var(--ease-out) var(--d, 0ms), translate 0.8s var(--ease-out) var(--d, 0ms); }
main.page-faq details:hover, main.page-faq details[open] { background: #f0f0f2; }
main.page-faq summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 16px 68px 16px 24px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); cursor: pointer; list-style: none; text-wrap: balance; }
main.page-faq summary::-webkit-details-marker { display: none; }
main.page-faq summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E"); background-size: 18px; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(20, 24, 40, 0.10); transition: rotate 0.3s var(--ease-toggle), background-color 0.22s ease; }
main.page-faq details[open] summary::after { rotate: 45deg; background-color: var(--accent-soft); }
main.page-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 20px; }
main.page-faq details p { max-width: 68ch; padding: 0 24px 22px; font-size: 17px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
main.page-faq details p + p { padding-top: 0; margin-top: -8px; }

/* Download: mark, title, one primary (macOS) + one ghost (Windows) button, then the real App window under the collapsed top bar */
main.page-download .download { text-align: center; }
main.page-download .download-mark { width: 96px; height: 96px; margin: 0 auto 24px; filter: drop-shadow(0 12px 24px rgba(20, 24, 40, 0.18)); }
main.page-download .platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(28px, 4vw, 40px) 0 0; font-size: 16px; color: var(--ink); }
main.page-download .platforms .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 17px; font-weight: 700; line-height: 1; white-space: nowrap;
  background: var(--accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(234, 67, 35, 0.7); transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), background-color 0.18s ease, scale 0.12s ease; }
main.page-download .platforms .btn:hover { translate: 0 -2px; background: var(--accent-deep); box-shadow: 0 16px 30px -14px rgba(234, 67, 35, 0.75); }
main.page-download .platforms .btn:active { scale: 0.975; }
main.page-download .platforms .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); box-shadow: 0 2px 8px rgba(20, 24, 40, 0.06); }
main.page-download .platforms .btn-ghost:hover { background: var(--fill); color: var(--ink); box-shadow: 0 12px 24px -14px rgba(20, 24, 40, 0.35); }
main.page-download .download-stage { position: relative; display: flow-root; max-width: 960px; margin: clamp(48px, 6vw, 72px) auto 48px; padding: 0 clamp(20px, 5vw, 64px); border-radius: var(--r-card); background: var(--panel); }
main.page-download .download-topbar { display: block; width: min(381px, 60%); height: auto; margin: 0 auto; }
main.page-download .download-window { display: block; width: 100%; height: auto; margin: clamp(8px, 2vw, 20px) auto -48px; border-radius: var(--r-window); box-shadow: var(--shadow-window); }

@media (prefers-reduced-motion: reduce) {
  .header-pill, .nav-item.is-open .nav-panel, .site-header.is-open .site-nav, .lang-list { animation: none; }
}

/* ===== hero ===== */
/* hero · 首屏 + Agent 轮播. Stage is a 1400×640 design board; --u = 1 design px. */
.sec-hero { padding-top: 56px; padding-bottom: 0; overflow: hidden; }
.sec-hero [data-reveal] { translate: 0 48px; transition-duration: 0.9s, 0.9s; }
.sec-hero [data-reveal].is-in { translate: 0 0; }

/* Copy */
.hero-copy { text-align: center; }
.hero-copy .h-hero { white-space: nowrap; }
.hero-line { margin-top: 14px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.6; color: var(--ink-2); font-weight: 500; }
.hero-ring { position: relative; display: inline-block; padding: 0 0.2em; margin: 0 0.42em; }
:lang(zh) .hero-ring { margin-right: 0.18em; }
.hero-ring-text { position: relative; z-index: 1; }
:lang(en) .hero-ring { margin: 0 0.34em; }
:lang(ja) .st-tag-topbar, :lang(ko) .st-tag-topbar { --x: 368; }
.hero-ring-svg { position: absolute; left: -9%; top: -70%; width: 118%; max-width: none; height: 240%; overflow: visible; pointer-events: none; }
.hero-ring-svg path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .hero-ring-svg path { animation: hero-draw 0.9s var(--ease-out) 0.55s forwards; }
@keyframes hero-draw { to { stroke-dashoffset: 0; } }
.hero-cta { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.hero-cta .btn { min-height: 52px; padding: 0 30px; font-size: 17px; }

/* Stage */
.hero-stage { position: relative; width: min(1400px, 100vw); margin: 32px auto 0; container-type: inline-size; }
.stage { --u: calc(100cqw / 1400); position: relative; height: calc(668 * var(--u)); }
.st { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); rotate: var(--r, 0deg); transform-origin: 50% 50%; will-change: translate, scale; }
.st > img { width: 100%; height: auto; }

.st-window { --x: 300; --y: 40; --w: 800; z-index: 3; border-radius: calc(18 * var(--u)); overflow: hidden; box-shadow: var(--shadow-window), 0 0 0 1px rgba(20, 24, 40, 0.06); background: #f2f2f4; animation: hero-swell 4s linear infinite; }
.st-window > img { aspect-ratio: 1600 / 1067; }
.st-topbar { --x: 535; --y: 40; --w: 330; z-index: 4; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22)); animation: hero-swell 4s linear infinite; }
.st-sidebar { --x: 128; --y: 178; --w: 72; --r: -8deg; z-index: 1; filter: drop-shadow(0 28px 26px rgba(20, 24, 40, 0.18)); animation: hero-swell 4s linear 0.6s infinite; }
.st-ball { --x: 1124; --y: 232; --w: 214; --r: 8deg; z-index: 1; filter: drop-shadow(0 28px 26px rgba(20, 24, 40, 0.2)); animation: hero-swell 4s linear 0.3s infinite; }

/* Floating cards: App-true replicas. Typography inside is App-sized and scales with the board */
.st-card { z-index: 5; --t: max(1px, var(--u)); font-size: calc(13 * var(--t)); line-height: 1.3; animation: hero-press 4s linear infinite; }
.st-reminder { --u: calc(100cqw / 1400 * 0.92); --x: 150; --y: 585; --w: 360; --r: 11deg; animation-delay: 1.2s; height: calc(128 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: #1e1e1f; color: #fff; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10) inset, 0 6px 28px rgba(0, 0, 0, 0.30), 0 24px 48px -24px rgba(0, 0, 0, 0.45); }
.rm-head { display: flex; align-items: center; height: calc(20 * var(--u)); gap: calc(8 * var(--u)); }
.rm-mark { position: relative; width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.rm-mark img { width: 100%; height: 100%; }
.rm-mark i { position: absolute; right: calc(-2 * var(--u)); top: calc(-2 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 calc(1.5 * var(--u)) #1e1e1f; }
.rm-title { font-size: calc(15 * var(--t)); font-weight: 600; color: rgba(255, 255, 255, 0.96); }
.rm-time { margin-left: auto; font-size: calc(12 * var(--t)); color: rgba(255, 255, 255, 0.55); }
.rm-session { margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--t)); font-weight: 500; color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-actions { display: flex; justify-content: flex-end; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.rm-btn { display: inline-flex; align-items: center; height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13 * var(--t)); font-weight: 500; }
.rm-btn-ghost { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.88); }
.rm-btn-solid { background: rgba(255, 255, 255, 0.92); color: rgba(0, 0, 0, 0.88); font-weight: 600; }

.st-relay { --u: calc(100cqw / 1400 * 1.04); --x: 985; --y: 462; --w: 336; --r: -7deg; animation-delay: 0.9s; padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; color: #1d1d1f; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 14px -8px rgba(20, 24, 40, 0.12), 0 24px 48px -20px rgba(20, 24, 40, 0.28); }
.sec-hero:lang(en) .st-relay { --u: calc(100cqw / 1400); --w: 392; --x: 966; --y: 476; width: max(calc(392 * var(--u)), 372px); left: min(calc(966 * var(--u)), calc(100cqw - 384px)); }
.sec-hero:lang(en) .rl-label { white-space: nowrap; }
.rl-head { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--t)); font-weight: 600; }
.rl-head img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.rl-row { display: flex; align-items: center; justify-content: space-between; margin-top: calc(12 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #f4f4f6; font-size: calc(13 * var(--t)); font-weight: 500; }
.rl-toggle { position: relative; width: calc(38 * var(--u)); height: calc(22 * var(--u)); border-radius: 999px; background: #1a6ef5; flex: none; }
.rl-toggle i { position: absolute; top: calc(2 * var(--u)); right: calc(2 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.rl-note { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(12.5 * var(--t)); color: #3a3d44; }
.rl-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--good); flex: none; }

/* Ink tags + hand-drawn dashed arrows */
.st-tag { z-index: 6; width: auto; }
.tag { display: inline-block; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; white-space: nowrap; }
.arrow { position: absolute; width: calc(110 * var(--u)); height: auto; overflow: visible; }
.arrow path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.arrow .head { fill: var(--ink); stroke: none; }
.st-tag-topbar { --x: 402; --y: 2; }
.arrow-topbar { left: 66px; top: 10px; }
.st-tag-sidebar { --x: 176; --y: 120; }
.arrow-sidebar { left: -34px; top: 22px; }
.st-tag-ball { --x: 1252; --y: 160; }
.arrow-ball { left: -92px; top: 24px; }

/* Heartbeat: 4 s cycle (PaywallPro's 2.5 s proportions, slowed) */
@keyframes hero-swell { 0% { scale: 1; } 20% { scale: 1.012; animation-timing-function: cubic-bezier(0.4, 0, 0.9, 1); } 40% { scale: 1; } 44% { scale: 0.999; } 55%, 100% { scale: 1; } }
@keyframes hero-press { 0% { scale: 1; } 8.3% { scale: 0.97; } 16.7%, 100% { scale: 1; } }

/* Marquee: 9 Agents in App order, two lists, 40 s per loop, pauses on hover */
.hero-marquee { position: relative; display: flex; width: min(1400px, 100vw); margin: 28px auto 0; padding: 12px 0 28px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 160px, #000 calc(100% - 160px), transparent); mask: linear-gradient(90deg, transparent, #000 160px, #000 calc(100% - 160px), transparent); }
.mq-track { display: flex; flex: none; gap: 14px; padding-right: 14px; width: max-content; animation: hero-mq 40s linear infinite; }
.hero-marquee:hover .mq-track, .hero-marquee:focus-within .mq-track { animation-play-state: paused; }
.mq-track li { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px 0 16px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px rgba(20, 24, 40, 0.28); font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mq-track li img { width: 28px; height: 28px; }
@keyframes hero-mq { to { translate: -100% 0; } }

/* Narrow: centred copy, the window alone (whole) with the reminder card on its lower-right */
@media (max-width: 900px) {
  .sec-hero { padding-top: 40px; }
  .hero-copy .h-hero { white-space: normal; font-size: clamp(38px, 10.5vw, 64px); }
  .hero-line { font-size: 18px; }
  .hero-cta { flex-wrap: wrap; }
  .hero-stage { width: calc(100% - 2 * var(--gutter)); margin-top: 32px; }
  .stage { --u: calc(100cqw / 800); height: calc(600 * var(--u)); }
  .st-window { --x: 0; --y: 30; --w: 800; }
  .st-topbar { --x: 275; --y: 30; --w: 250; }
  .st-side, .st-relay, .st-tag { display: none; }
  .st-reminder { --u: calc(100cqw / 800); --t: calc(100cqw / 800); --x: 300; --y: 452; --w: 400; --r: 4deg; height: calc(140 * var(--u)); font-size: calc(14.4 * var(--t)); }
  .st-reminder .rm-title { font-size: calc(16.6 * var(--t)); }
  .st-reminder .rm-session { font-size: calc(14.4 * var(--t)); }
  .st-reminder .rm-btn { height: calc(31 * var(--u)); font-size: calc(14.4 * var(--t)); }
  .hero-marquee { width: 100vw; margin-top: 20px; -webkit-mask: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); mask: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); }
  .mq-track li { height: 48px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .st, .st-card { animation: none !important; translate: none !important; }
  .hero-ring-svg path { stroke-dashoffset: 0; animation: none; }
  .hero-marquee { mask: none; -webkit-mask: none; flex-wrap: wrap; justify-content: center; }
  .mq-track { animation: none; flex: 1 1 100%; width: 100%; flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
  .mq-track li:nth-child(n+10) { display: none; }
  .mq-track[aria-hidden="true"] { display: none; }
}

/* ja / ko (i18n stream, 2026-09-28): longer H1 and card strings */
.sec-hero:lang(ja) .h-hero, .sec-hero:lang(ko) .h-hero { font-size: clamp(40px, 5.4vw, 76px); }
.sec-hero:lang(ja) .hero-line { word-break: auto-phrase; }
.sec-hero:lang(ko) .hero-line, .sec-hero:lang(ko) .h-hero { word-break: keep-all; overflow-wrap: anywhere; }
.sec-hero:lang(ja) .st-relay, .sec-hero:lang(ko) .st-relay { --u: calc(100cqw / 1400); --w: 392; --x: 966; --y: 476; width: max(calc(392 * var(--u)), 372px); left: min(calc(966 * var(--u)), calc(100cqw - 384px)); }
.sec-hero:lang(ja) .rl-label, .sec-hero:lang(ko) .rl-label { white-space: nowrap; }

/* ===== why ===== */
/* R11 · why (为什么选择 looptend) · PaywallPro-style sticky stepper with a damped pointer-follow grid. Scoped to .sec-why */

.sec-why { --why-top: 88px; padding-block: 0 var(--sec-pad); }
.sec-why .why-stage { height: calc(100vh + 3 * 60vh); }
.sec-why .why-pin { position: sticky; top: var(--why-top); height: calc(100vh - var(--why-top)); display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 4vh, 48px); padding-bottom: 24px; }
.sec-why .why-row { display: grid; grid-template-columns: 36% 1fr; gap: clamp(32px, 4vw, 56px); align-items: center; }

/* Cards (PaywallPro metrics: radius 30, 1px 10% line, 24/22 padding, min 112, 20/30 ink) */
.sec-why .why-cards { display: grid; gap: 18px; }
.sec-why .why-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 112px; padding: 24px 22px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 30px; background: #fff; text-align: left; cursor: pointer;
  transition: background-color 0.28s var(--ease-out), border-color 0.28s var(--ease-out), translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out); }
.sec-why .why-card:hover { translate: 0 -2px; box-shadow: var(--shadow-card); }
.sec-why .why-card[aria-selected="true"] { background: var(--fill); border-color: rgba(0, 0, 0, 0.06); }
.sec-why .why-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 30px; }
.sec-why .why-text { font-size: 20px; line-height: 30px; font-weight: 400; color: var(--ink); text-wrap: balance; }
.sec-why .why-text b { font-weight: 700; }
.sec-why .why-num { flex: 0 0 32px; height: 32px; margin: 6px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(43, 43, 43, 0.10); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  transition: background-color 0.28s var(--ease-out), color 0.28s var(--ease-out), scale 0.32s var(--ease-spring); }
.sec-why .why-card[aria-selected="true"] .why-num { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -2px rgba(234, 67, 35, 0.45); scale: 1.06; }

/* Visual panel */
/* Every visual is drawn on a fixed 700×470 canvas and scaled to the panel (JS sets --why-s / --why-ox / --why-oy), so the pixel relations never change */
.sec-why .why-visual { --why-s: 1; --why-ox: 0px; --why-oy: 0px; --why-cell: calc(44px * var(--why-s)); position: relative; aspect-ratio: 700 / 470; max-height: calc(100vh - var(--why-top) - 220px); min-height: 380px; width: 100%; }
.sec-why .why-canvas { position: absolute; left: 0; top: 0; width: 700px; height: 470px; transform-origin: 0 0; transform: translate(var(--why-ox), var(--why-oy)) scale(var(--why-s)); }
.sec-why .why-grid { position: absolute; inset: 0; overflow: hidden; border-radius: 30px; pointer-events: none;
  -webkit-mask: radial-gradient(50% 50% at 50% 50%, #000 30%, transparent 100%); mask: radial-gradient(50% 50% at 50% 50%, #000 30%, transparent 100%); }
.sec-why .why-grid-lines, .sec-why .why-grid-torch { position: absolute; inset: -32px; will-change: transform;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.065) 1px, transparent 1px) 0 0 / var(--why-cell) var(--why-cell), linear-gradient(to bottom, rgba(0, 0, 0, 0.065) 1px, transparent 1px) 0 0 / var(--why-cell) var(--why-cell);
  background-position: calc(32px + var(--why-ox)) calc(32px + var(--why-oy)); }
.sec-why .why-grid-torch { --mx: -999px; --my: -999px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 1px, transparent 1px);
  -webkit-mask: radial-gradient(90px at var(--mx) var(--my), #000 0%, transparent 100%); mask: radial-gradient(90px at var(--mx) var(--my), #000 0%, transparent 100%); }
.sec-why .why-views { position: absolute; inset: 0; will-change: transform; }
.sec-why .why-view { position: absolute; inset: 0; opacity: 0; translate: 0 8px; visibility: hidden; transition: opacity 0.24s var(--ease-out), translate 0.24s var(--ease-out), visibility 0s linear 0.24s; }
.sec-why .why-view.is-on { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }

/* 01 · nine Agent tiles snapped to grid cells (2×2 cells each), all equally present, cluster inside the radial mask */
.sec-why .why-tiles { position: absolute; inset: 0; --why-cell: 44px; }
.sec-why .why-tile { position: absolute; left: calc(var(--c) * var(--why-cell) + 1px); top: calc(var(--r) * var(--why-cell) + 1px); width: calc(2 * var(--why-cell) - 1px); height: calc(2 * var(--why-cell) - 1px); display: grid; place-items: center; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 18px; box-shadow: 0 14px 30px -18px rgba(20, 24, 40, 0.35), 0 1px 3px rgba(20, 24, 40, 0.05); cursor: default;
  transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), opacity 0.32s var(--ease-out); }
.sec-why .why-tile img { width: 46px; height: 46px; object-fit: contain; }
.sec-why .why-tile:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); z-index: 2; }
.sec-why .why-chip { position: absolute; left: calc(100% + 10px); top: 50%; translate: -6px -50%; padding: 6px 11px; border-radius: 9px; background: #2a2a2c; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s var(--ease-out), translate 0.32s var(--ease-spring); }
.sec-why .why-chip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; translate: 0 -50%; rotate: 45deg; border-radius: 2px; background: #2a2a2c; }
.sec-why .why-tile:hover .why-chip, .sec-why .why-tile:focus-within .why-chip { opacity: 1; translate: 0 -50%; }

/* Shared App-true window replica (light workspace style, cf. 02_ws_agents / 10_ws_net_deep) */
.sec-why .why-win { position: absolute; left: 6%; top: 5%; width: 74%; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(20, 24, 40, 0.40), 0 2px 10px rgba(20, 24, 40, 0.06); border: 1px solid rgba(0, 0, 0, 0.06); padding: 18px 22px 20px; font-size: 13px; color: #141414; }
.sec-why .why-win-head { display: flex; gap: 4px; margin-bottom: 16px; }
.sec-why .why-seg { padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #3a3a3c; }
.sec-why .why-seg.is-on { background: #e6e6e8; color: #141414; }
.sec-why .why-win-title { font-size: 17px; font-weight: 700; margin: 0 0 6px 4px; }
.sec-why .why-sessions { display: grid; }
.sec-why .why-sess { position: relative; display: grid; grid-template-columns: 24px 1fr auto 62px; align-items: center; gap: 12px; padding: 11px 6px 11px 4px; border-radius: 10px; }
.sec-why .why-sess.is-turn { background: #fbf7f2; }
.sec-why .why-sess-logo { width: 24px; height: 24px; object-fit: contain; }
.sec-why .why-sess-name { font-size: 14px; font-weight: 600; line-height: 1.3; display: grid; }
.sec-why .why-sess-name small { font-size: 12px; font-weight: 400; color: #6e6e73; }
.sec-why .why-sess-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 72px; }
.sec-why .why-sess-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sec-why .st-working { color: #2aa565; }
.sec-why .st-turn { color: #d98a0b; }
.sec-why .st-turn i { width: 7px; height: 7px; background: #F5A524; box-shadow: 0 0 0 1.5px #fbf7f2, 0 0 0 3px rgba(245, 165, 36, 0.55); }
.sec-why .st-wait { color: #6e6e73; }
.sec-why .st-wait i { background: transparent; border: 1.5px solid currentColor; }
.sec-why .st-done { color: #6e6e73; }
.sec-why .st-done i { width: 9px; height: 5px; border-radius: 0; background: transparent; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; translate: 0 -2px; }
.sec-why .why-sess-time { font-size: 13px; color: #6e6e73; text-align: right; font-variant-numeric: tabular-nums; }
.sec-why .why-ellipse { position: absolute; right: 52px; top: 50%; width: 128px; height: 44px; translate: 0 -50%; pointer-events: none; }
.sec-why .why-ellipse path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 0.9s var(--ease-out) 0.25s; }
.sec-why .why-view.is-on .why-ellipse path { stroke-dashoffset: 0; }

/* Reminder card replica (App 简洁卡片: 360×128, #1E1E1F, radius 16) shown at 0.86× */
.sec-why .why-reminder { position: absolute; right: -4%; bottom: -11%; width: 296px; padding: 14px 14px 14px; border-radius: 15px; background: #1e1e1f; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10) inset, 0 16px 40px -10px rgba(0, 0, 0, 0.45); color: #fff; rotate: -3deg; transition: translate 0.6s var(--ease-out) 0.2s, opacity 0.6s var(--ease-out) 0.2s; translate: 0 14px; opacity: 0; }
.sec-why .why-view.is-on .why-reminder { translate: 0 0; opacity: 1; }
.sec-why .why-rem-head { display: flex; align-items: center; gap: 8px; height: 20px; font-size: 14px; }
.sec-why .why-rem-head b { font-weight: 600; color: rgba(255, 255, 255, 0.96); }
.sec-why .why-rem-mark { position: relative; width: 20px; height: 20px; display: grid; place-items: center; }
.sec-why .why-rem-mark img { width: 18px; height: 18px; }
.sec-why .why-rem-mark i { position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 1.5px #1e1e1f; }
.sec-why .why-rem-time { margin-left: auto; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.sec-why .why-rem-title { margin-top: 10px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.92); }
.sec-why .why-rem-proj { margin-top: 3px; font-size: 11px; color: rgba(255, 255, 255, 0.62); }
.sec-why .why-rem-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sec-why .why-rem-btn { height: 26px; padding: 0 13px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.88); }
.sec-why .why-rem-btn.is-primary { background: rgba(255, 255, 255, 0.92); color: rgba(0, 0, 0, 0.88); font-weight: 600; }

/* Hand-drawn marks: cursor, dashed arrows */
.sec-why .why-cursor { position: absolute; width: 18px; height: 22px; right: 26px; bottom: 6px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.sec-why .why-cursor path { fill: #fff; stroke: #141414; stroke-width: 1.4; stroke-linejoin: round; }
.sec-why .why-arrow { position: absolute; pointer-events: none; }
.sec-why .why-arrow path { fill: none; stroke: #141414; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 6; }
.sec-why .why-arrow .why-arrow-head { stroke-dasharray: none; }
.sec-why .why-arrow-2 { right: 21%; bottom: 27%; width: 90px; height: 54px; }

/* 03 · deep network check */
.sec-why .why-win-net { top: 9%; width: 84%; }
.sec-why .why-net-chips { display: flex; gap: 8px; margin: 0 0 14px 2px; }
.sec-why .why-net-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; background: #f2f2f4; font-size: 13px; font-weight: 600; }
.sec-why .why-chain { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 14px; margin: 0 2px; white-space: nowrap; }
.sec-why .why-chain li { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 2px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #5c5c61; position: relative; }
.sec-why .why-chain li + li::before { content: "→"; position: absolute; left: -7px; top: 50%; translate: -50% -50%; font-size: 12px; color: #9a9a9e; }
.sec-why .why-chain li i { display: none; width: 12px; height: 12px; border-radius: 50%; }
.sec-why .why-chain li.ok i, .sec-why .why-chain li.warn i { display: block; }
.sec-why .why-chain li.ok { color: #141414; }
.sec-why .why-chain li.ok i { border: 0; background: #3DD68C; -webkit-mask: none; position: relative; }
.sec-why .why-chain li.ok i::after { content: ""; position: absolute; left: 3px; top: 2.5px; width: 5px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; rotate: -45deg; }
.sec-why .why-chain li.warn { padding: 0 9px 0 7px; background: #fff3dc; color: #a35d00; font-weight: 700; box-shadow: 0 0 0 1.5px #F5A524; }
.sec-why .why-chain li.warn i { border: 0; background: #F5A524; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; width: 12px; height: 11px; }
.sec-why .why-net-verdict { display: flex; align-items: center; gap: 8px; margin: 16px 2px 0; font-size: 14px; font-weight: 600; }
.sec-why .why-net-dot { width: 8px; height: 8px; border-radius: 50%; background: #F5A524; }
.sec-why .why-fix { position: absolute; right: -1%; bottom: 8%; width: 300px; padding: 16px 18px 18px; border-radius: 16px; background: #1e1e1f; color: #fff; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10) inset, 0 18px 44px -12px rgba(0, 0, 0, 0.5); rotate: 2deg; translate: 0 14px; opacity: 0; transition: translate 0.6s var(--ease-out) 0.2s, opacity 0.6s var(--ease-out) 0.2s; }
.sec-why .why-view.is-on .why-fix { translate: 0 0; opacity: 1; }
.sec-why .why-fix-label { display: inline-block; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 8px; }
.sec-why .why-fix p { font-size: 14px; line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; }
.sec-why .why-perf { position: absolute; left: 1%; bottom: 20%; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 12px 28px -14px rgba(20, 24, 40, 0.4); font-size: 13px; font-weight: 600; rotate: -2deg; translate: 0 14px; opacity: 0; transition: translate 0.6s var(--ease-out) 0.32s, opacity 0.6s var(--ease-out) 0.32s; }
.sec-why .why-view.is-on .why-perf { translate: 0 0; opacity: 1; }
.sec-why .why-perf-icon { width: 20px; height: 20px; border-radius: 50%; background: #F5A524; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.sec-why .why-arrow-3 { left: 199px; top: 214px; width: 216px; height: 110px; } /* tail sits under the 代理 pill (JS-measured 205,218 in canvas space), head lands on the fix card */

/* 04 · work summary + usage */
.sec-why .why-win-report { top: 6%; width: 66%; }
.sec-why .why-report-top { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
.sec-why .why-report-range { padding: 6px 10px; border-radius: 8px; background: #f2f2f4; font-size: 13px; font-weight: 600; }
.sec-why .why-gen { height: 30px; padding: 0 16px; border-radius: 999px; background: #141414; color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.sec-why .why-report-h { font-size: 15px; font-weight: 700; margin: 0 2px 8px; }
.sec-why .why-done { display: grid; gap: 8px; margin: 0 2px; }
.sec-why .why-done li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; }
.sec-why .why-done i { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); position: relative; }
.sec-why .why-done i::after { content: ""; position: absolute; left: 5px; top: 4.5px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; }
.sec-why .why-report-foot { display: flex; align-items: center; gap: 6px; margin: 16px 2px 0; font-size: 13px; }
.sec-why .why-export { font-weight: 600; margin-right: 4px; }
.sec-why .why-export-opt { padding: 5px 10px; border-radius: 8px; background: #f2f2f4; font-weight: 500; }
.sec-why .why-usage { position: absolute; right: 0; bottom: 6%; width: 262px; padding: 18px 20px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 26px 50px -24px rgba(20, 24, 40, 0.45); rotate: 2deg; translate: 0 14px; opacity: 0; transition: translate 0.6s var(--ease-out) 0.2s, opacity 0.6s var(--ease-out) 0.2s; }
.sec-why .why-view.is-on .why-usage { translate: 0 0; opacity: 1; }
.sec-why .why-usage-k { font-size: 12px; font-weight: 600; color: #6e6e73; }
.sec-why .why-usage-v { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin: 2px 0 12px; line-height: 1.2; }
.sec-why .why-underline { position: relative; display: inline-block; }
.sec-why .why-underline svg { position: absolute; left: -2px; right: -2px; bottom: -6px; width: calc(100% + 4px); height: 10px; }
.sec-why .why-underline path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 0.8s var(--ease-out) 0.4s; }
.sec-why .why-view.is-on .why-underline path { stroke-dashoffset: 0; }
.sec-why .why-usage-split { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; }
.sec-why .why-usage-split span { display: block; width: var(--w); border-radius: 4px; }
.sec-why .why-usage-split .codex { background: #5AA8F0; }
.sec-why .why-usage-split .claude { background: #CC785C; }
.sec-why .why-usage-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.sec-why .why-usage-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sec-why .why-cursor-4 { right: auto; left: 63.5%; top: 25%; bottom: auto; }

/* Coarse pointers: no hover, so no name chips (the logos carry alt text); nine chips at once would overlap neighbouring tiles */
@media (hover: none), (pointer: coarse) {
  .sec-why .why-chip { display: none; }
  .sec-why .why-tile:hover { translate: none; box-shadow: 0 14px 30px -18px rgba(20, 24, 40, 0.35), 0 1px 3px rgba(20, 24, 40, 0.05); }
}

/* Narrow: no pinning; each card is followed by its own visual. Only the tile view keeps the scaled 700×470 canvas (centred crop, min 0.6);
   the three App replicas lay out naturally at full width with their side cards stacked below, so App text stays ≥ 12px and nothing is cropped */
@media (max-width: 900px) {
  .sec-why { padding-block: var(--sec-pad); }
  .sec-why .why-stage { height: auto; }
  .sec-why .why-pin { position: static; height: auto; }
  .sec-why .why-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .sec-why .why-cards, .sec-why .why-visual, .sec-why .why-views { display: contents; }
  .sec-why .why-grid { display: none; }
  .sec-why .why-card { min-height: 84px; padding: 18px 18px; border-radius: 22px; }
  .sec-why .why-card:nth-child(1) { order: 1; } .sec-why .why-card:nth-child(2) { order: 3; } .sec-why .why-card:nth-child(3) { order: 5; } .sec-why .why-card:nth-child(4) { order: 7; }
  .sec-why .why-view:nth-child(1) { order: 2; } .sec-why .why-view:nth-child(2) { order: 4; } .sec-why .why-view:nth-child(3) { order: 6; } .sec-why .why-view:nth-child(4) { order: 8; }
  .sec-why .why-view { --why-s: 0.6; --why-ox: 0px; --why-oy: 0px; position: relative; inset: auto; height: auto; padding: 18px 16px 22px; opacity: 1; translate: none; visibility: visible; margin-bottom: 22px; border-radius: 24px; background: var(--panel); overflow: hidden; transition: none; }
  .sec-why .why-view .why-ellipse path, .sec-why .why-view .why-underline path { stroke-dashoffset: 0; }
  .sec-why .why-view .why-reminder, .sec-why .why-view .why-fix, .sec-why .why-view .why-perf, .sec-why .why-view .why-usage { translate: none; opacity: 1; transition: none; }
  /* 01: scaled canvas, centred crop */
  .sec-why .why-view-agents { padding: 0; height: calc(470px * var(--why-s)); }
  .sec-why .why-view-agents .why-tiles::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 44px 44px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); mask: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); }
  /* 02–04: natural flow */
  .sec-why .why-view:not(.why-view-agents) .why-canvas { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; }
  .sec-why .why-view:not(.why-view-agents) .why-win { position: relative; left: auto; top: auto; width: 100%; padding: 16px 16px 16px; }
  .sec-why .why-win-head { margin-bottom: 12px; }
  .sec-why .why-sess { grid-template-columns: 24px 1fr auto; gap: 10px; padding: 10px 6px 10px 4px; }
  .sec-why .why-sess-time { display: none; }
  .sec-why .why-sess-state { min-width: 0; }
  .sec-why .why-ellipse { right: -8px; width: 112px; }
  .sec-why .why-reminder { position: relative; right: auto; bottom: auto; width: min(296px, 100%); margin: 14px 2% 0 auto; rotate: -2deg; }
  .sec-why .why-win-net { width: 100%; }
  .sec-why .why-chain { flex-wrap: wrap; row-gap: 6px; white-space: normal; margin-left: 10px; }
  .sec-why .why-chain li { white-space: nowrap; }
  .sec-why .why-net-verdict { align-items: flex-start; line-height: 1.4; }
  .sec-why .why-net-dot { flex: 0 0 8px; margin-top: 6px; }
  .sec-why .why-fix { position: relative; right: auto; bottom: auto; width: min(300px, 94%); margin: 14px 2% 0 auto; rotate: 1.5deg; }
  .sec-why .why-perf { position: relative; left: auto; bottom: auto; height: auto; min-height: 36px; padding-block: 6px; white-space: normal; align-self: flex-start; margin: 14px 0 0 1%; rotate: -1.5deg; }
  .sec-why .why-arrow-3 { display: none; }
  .sec-why .why-win-report { width: 100%; }
  .sec-why .why-usage { position: relative; right: auto; bottom: auto; width: min(262px, 100%); margin: 14px 2% 0 auto; rotate: 1.5deg; }
  .sec-why .why-cursor-4 { left: auto; right: 22px; top: 50px; }
  .sec-why .why-seg { white-space: nowrap; padding: 7px 10px; }
  .sec-why .why-rem-time, .sec-why .why-rem-proj, .sec-why .why-fix-label { font-size: 12px; }
  html[lang="en"] .sec-why .why-view-sessions .why-seg:nth-child(3) { display: none; }
  html[lang="en"] .sec-why .why-win-net { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-why .why-ellipse path, .sec-why .why-underline path { stroke-dashoffset: 0; }
  .sec-why .why-reminder, .sec-why .why-fix, .sec-why .why-perf, .sec-why .why-usage { translate: none; opacity: 1; }
}

/* English labels are longer: keep the deep-check chain on one line */
html[lang="en"] .sec-why .why-win-net { width: 96%; }
html[lang="en"] .sec-why .why-chain { font-size: 12px; gap: 0 13px; }
html[lang="en"] .sec-why .why-chain li { font-size: 12px; padding: 0 1px; }
html[lang="en"] .sec-why .why-chain li + li::before { left: -7px; font-size: 11px; }
html[lang="en"] .sec-why .why-chain li.warn { padding: 0 8px 0 6px; }
html[lang="en"] .sec-why .why-fix { width: 332px; }
html[lang="en"] .sec-why .why-arrow-3 { width: 198px; } /* the wider en card starts further left; a shorter arrow keeps the head clear of its corner */

/* ja / ko (i18n stream, 2026-09-28) */
.sec-why:lang(ja) .h-section, .sec-why:lang(ja) .why-text, .sec-why:lang(ja) .why-fix p { word-break: auto-phrase; }
.sec-why:lang(ko) .h-section, .sec-why:lang(ko) .why-text, .sec-why:lang(ko) .why-fix p, .sec-why:lang(ko) .why-net-verdict, .sec-why:lang(ko) .why-done li { word-break: keep-all; overflow-wrap: anywhere; }
.sec-why:lang(ja) .why-chain, .sec-why:lang(ko) .why-chain { gap: 0 9px; }
.sec-why:lang(ja) .why-chain li, .sec-why:lang(ko) .why-chain li { font-size: 11.5px; gap: 4px; }
.sec-why:lang(ja) .why-chain li + li::before, .sec-why:lang(ko) .why-chain li + li::before { left: -4.5px; font-size: 11px; }
.sec-why:lang(ja) .why-win-net, .sec-why:lang(ko) .why-win-net { width: 88%; }
@media (max-width: 900px) {
  .sec-why:lang(ja) .why-text .nowrap, .sec-why:lang(ko) .why-text .nowrap { white-space: normal; }
}
.sec-why:lang(ja) .why-chain { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.sec-why:lang(ja) .why-perf, .sec-why:lang(ko) .why-perf { white-space: nowrap; }
@media (max-width: 900px) {
  .sec-why:lang(ja) .why-seg { padding: 7px 5px; font-size: 11px; }
  .sec-why:lang(ja) .why-win-head { gap: 2px; }
  .sec-why:lang(ja) .why-perf, .sec-why:lang(ko) .why-perf { font-size: 12px; padding-right: 10px; }
}

/* ===== compare ===== */
/* compare · 同一次停下，对比白等多久 — one desktop drawn twice, split by a draggable divider.
   Everything inside .cmp-desk is a UI replica: 1em = 10 design px (desk designed at 1200 × 750). */

.sec-compare .cmp { margin-top: clamp(40px, 5vw, 64px); }

/* Two labels above the screen */
.sec-compare .cmp-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-inline: 4px; }
.sec-compare .cmp-label { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.sec-compare .cmp-label i, .sec-compare .cmp-side-title i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sec-compare .cmp-side-title { display: none; }

/* The screen */
.sec-compare .cmp-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #dfe6f2; box-shadow: var(--shadow-window), inset 0 0 0 1px rgba(20, 24, 40, 0.10); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; isolation: isolate; }
.sec-compare .cmp-screen.is-dragging { cursor: grabbing; }
.sec-compare .cmp-side { position: absolute; inset: 0; isolation: isolate; }
.sec-compare .cmp-side-before { z-index: 0; }
.sec-compare .cmp-side-after { z-index: 1; }
.sec-compare .cmp-side-after { clip-path: inset(0 0 0 var(--compare-x, 50%)); }

/* Desktop ------------------------------------------------------------------------------ */
.sec-compare .cmp-desk { position: absolute; inset: 0; line-height: 1.4; color: #1d1d1f; overflow: hidden;
  background:
    radial-gradient(60% 70% at 12% 18%, rgba(255, 208, 178, 0.55) 0%, rgba(255, 208, 178, 0) 70%),
    radial-gradient(55% 60% at 88% 12%, rgba(196, 214, 255, 0.85) 0%, rgba(196, 214, 255, 0) 70%),
    radial-gradient(70% 60% at 70% 95%, rgba(232, 204, 236, 0.70) 0%, rgba(232, 204, 236, 0) 70%),
    radial-gradient(50% 50% at 25% 90%, rgba(196, 230, 233, 0.80) 0%, rgba(196, 230, 233, 0) 70%),
    linear-gradient(165deg, #eef2fb 0%, #e6ebf6 50%, #eae3f0 100%); }
.sec-compare .cmp-side { container-type: inline-size; }
.sec-compare .cmp-side > .cmp-desk { font-size: calc(100cqw / 120); }

/* Menu bar */
.sec-compare .cmp-menubar { position: absolute; inset: 0 0 auto 0; height: 2.6em; display: flex; align-items: center; gap: 1.5em; padding: 0 1.6em; font-size: 1em; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #1d1d1f; z-index: 1; }
.sec-compare .cmp-menubar > span, .sec-compare .cmp-menubar > b { font-size: 1.3em; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; flex: none; }
.sec-compare .cmp-menubar > b { font-weight: 700; margin-right: 0.4em; }
.sec-compare .cmp-apple { display: flex; }
.sec-compare .cmp-apple svg { width: 1.6em; height: 1.6em; }
.sec-compare .cmp-mb-right { margin-left: auto; display: flex; align-items: center; gap: 1.3em; }
.sec-compare .cmp-mb-ico { width: 1.6em; height: 1.6em; }
.sec-compare .cmp-mb-bat { width: 2.6em; height: 1.3em; }
.sec-compare .cmp-clock { font-size: 1.3em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Windows: 1200 × 750 design grid, positioned in em (1em = 10 px) */
.sec-compare .cmp-win { position: absolute; border-radius: 1.1em; background: #fff; box-shadow: 0 2.4em 5em -2em rgba(20, 24, 40, 0.45), 0 0.6em 1.6em -0.6em rgba(20, 24, 40, 0.25), 0 0 0 0.08em rgba(0, 0, 0, 0.10); overflow: hidden; }
.sec-compare .cmp-tl { display: flex; align-items: center; gap: 0.8em; height: 3.4em; padding: 0 1.3em; background: #f2f2f4; font-size: 1em; }
.sec-compare .cmp-tl i { width: 1.2em; height: 1.2em; border-radius: 50%; background: #fe5f57; box-shadow: inset 0 0 0 0.05em rgba(0, 0, 0, 0.12); }
.sec-compare .cmp-tl i:nth-child(2) { background: #febc2e; }
.sec-compare .cmp-tl i:nth-child(3) { background: #28c840; }
.sec-compare .cmp-tl > span { flex: 1; text-align: center; font-size: 1.25em; font-weight: 600; color: #4b4b52; margin-right: 4.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-compare .cmp-win-body { padding: 1.6em 1.8em; font-size: 1.3em; line-height: 1.45; }

/* Codex (very back): only a corner — traffic lights + the warning triangle of the request — peeks between chat and browser */
.sec-compare .cmp-win-codex { left: 37em; top: 3.2em; width: 44em; height: 42em; }
.sec-compare .cmp-cx { max-width: 88%; margin-bottom: 0.9em; padding: 0.6em 0.9em; border-radius: 0.9em; font-size: 0.96em; line-height: 1.45; }
.sec-compare .cmp-cx-u { margin-left: auto; background: #eef0f4; }
.sec-compare .cmp-cx-a { color: #2b2b30; padding-left: 0; }
.sec-compare .cmp-ask { width: 31em; margin-left: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 0.7em; row-gap: 0.8em; align-items: center; margin: 0.6em 0 0 auto; padding: 0.95em 1.1em; border-radius: 0.9em; background: #fff8ea; box-shadow: inset 0 0 0 0.08em rgba(245, 165, 36, 0.45); font-size: 0.96em; font-weight: 600; color: #1d1d1f; }
.sec-compare .cmp-ask svg { width: 1.25em; height: 1.25em; }
.sec-compare .cmp-ask code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; background: rgba(0, 0, 0, 0.06); padding: 0.05em 0.35em; border-radius: 0.3em; }
.sec-compare .cmp-ask-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.6em; }
.sec-compare .cmp-ask-btns span { padding: 0.35em 1.05em; border-radius: 0.6em; font-weight: 600; font-size: 0.95em; }
.sec-compare .cmp-ask-ok { background: #1d1d1f; color: #fff; }
.sec-compare .cmp-ask-no { background: #fff; color: #1d1d1f; box-shadow: inset 0 0 0 0.08em rgba(0, 0, 0, 0.16); }

.sec-compare .cmp-win-codex .cmp-tl > span { visibility: hidden; }   /* the Codex app has no centred title; the bare bar + lights read as "a window behind" */

/* Browser (behind the front row, centre-right) */
.sec-compare .cmp-win-browser { left: 44em; top: 6em; width: 62em; height: 52em; }
.sec-compare .cmp-win-browser .cmp-tl { height: 3.8em; }
.sec-compare .cmp-url { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; margin: 0 4em 0 0.6em; height: 2.3em; border-radius: 0.6em; background: #fff; box-shadow: inset 0 0 0 0.08em rgba(0, 0, 0, 0.08); font-size: 1.15em; font-weight: 500; color: #3a3a40; }
.sec-compare .cmp-url svg { width: 1.1em; height: 1.1em; color: #7a7a82; }
.sec-compare .cmp-tabs { display: flex; gap: 0.4em; padding: 0 1em; height: 2.9em; align-items: end; background: #f2f2f4; font-size: 1.15em; }
.sec-compare .cmp-tabs span { padding: 0.45em 1.2em; border-radius: 0.6em 0.6em 0 0; color: #6a6a72; white-space: nowrap; }
.sec-compare .cmp-tabs .on { background: #fff; color: #1d1d1f; font-weight: 600; }
.sec-compare .cmp-win-browser h4 { font-size: 1.55em; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.4em; }
.sec-compare .cmp-win-browser h4 span { color: #8a8a92; font-weight: 500; }
.sec-compare .cmp-pr-meta { display: flex; align-items: center; gap: 0.6em; color: #5c5c64; font-size: 0.95em; margin-bottom: 1em; }
.sec-compare .cmp-pr-open { width: 4.2em; height: 1.55em; border-radius: 0.5em; background: #2da44e; position: relative; flex: none; }
.sec-compare .cmp-pr-open::after { content: "Open"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 0.8em; font-weight: 700; }
.sec-compare .cmp-pr-meta code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #eef3ff; color: #2d55c8; padding: 0.05em 0.4em; border-radius: 0.3em; font-size: 0.92em; }
.sec-compare .cmp-checks { display: grid; gap: 0.5em; margin-bottom: 1.1em; font-size: 0.95em; }
.sec-compare .cmp-checks li { display: flex; align-items: center; gap: 0.6em; color: #2b2b30; }
.sec-compare .cmp-checks i { width: 1em; height: 1em; border-radius: 50%; flex: none; }
.sec-compare .cmp-checks .ck-ok i { background: #2da44e; }
.sec-compare .cmp-checks .ck-run i { background: #dbab09; }
.sec-compare .cmp-diff { display: grid; gap: 0.25em; padding: 0.8em 1em; border-radius: 0.7em; background: #f6f8fa; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em; color: #3a3a40; }
.sec-compare .cmp-diff b { font-family: inherit; color: #1d1d1f; margin-bottom: 0.2em; }
.sec-compare .cmp-diff .d-add { color: #1a7f37; background: #e6ffec; margin: 0 -1em; padding: 0.05em 1em; }

/* Chat (front-left) */
.sec-compare .cmp-win-chat { left: 7em; top: 9em; width: 30.5em; height: 46em; }
.sec-compare .cmp-win-chat .cmp-win-body { display: grid; gap: 0.7em; align-content: start; }
.sec-compare .cmp-bb { max-width: 84%; padding: 0.55em 0.9em; border-radius: 1.1em; font-size: 0.98em; line-height: 1.4; }
.sec-compare .cmp-bb-in { background: #e9e9eb; border-bottom-left-radius: 0.35em; }
.sec-compare .cmp-bb-out { margin-left: auto; background: #3478f6; color: #fff; border-bottom-right-radius: 0.35em; }

/* Editor (dark, middle) */
.sec-compare .cmp-win-editor { left: 17em; top: 22.6em; width: 60em; height: 45.5em; background: #1b1b20; }
.sec-compare .cmp-win-editor .cmp-tl { background: #26262c; }
.sec-compare .cmp-win-editor .cmp-tl > span { color: #b8b8c2; }
.sec-compare .cmp-editor { display: grid; grid-template-columns: 15em 1fr; height: calc(100% - 3.4em); }
.sec-compare .cmp-files { padding: 1em 0; background: #202026; font-size: 1.2em; color: #b0b0ba; }
.sec-compare .cmp-files li { padding: 0.28em 1.2em; white-space: nowrap; }
.sec-compare .cmp-files .f1, .sec-compare .cmp-files .f2, .sec-compare .cmp-files .f3 { padding-left: 2.2em; }
.sec-compare .cmp-files .f2, .sec-compare .cmp-files .f3 { padding-left: 3.2em; }
.sec-compare .cmp-files .f5 { padding-left: 2.2em; }
.sec-compare .cmp-files .f2 { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sec-compare .cmp-code { margin: 0; padding: 1.2em 1.6em; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.18em; line-height: 1.55; color: #d6d6de; white-space: pre; overflow: hidden; }
.sec-compare .cmp-code .c-k { color: #c792ea; }
.sec-compare .cmp-code .c-f { color: #82aaff; }
.sec-compare .cmp-code .c-n { color: #ffcb6b; }
.sec-compare .cmp-code .c-v { color: #f78c6c; }

/* Terminal (front) */
.sec-compare .cmp-win-term { left: 43em; top: 33.5em; width: 62em; height: 35em; background: #151517; }
.sec-compare .cmp-win-term .cmp-tl { background: #2a2a2e; }
.sec-compare .cmp-win-term .cmp-tl > span { color: #c4c4cc; }
.sec-compare .cmp-term { padding: 1.2em 1.6em; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.22em; line-height: 1.6; color: #d9d9e0; }
.sec-compare .cmp-term .ln { white-space: pre-wrap; }
.sec-compare .cmp-term .ln-h em { color: #CC785C; font-style: normal; }
.sec-compare .cmp-term .ln-o { color: #8e8e98; }
.sec-compare .cmp-term .ln-p { margin: 0.5em 0 0.5em; padding: 0.35em 0.7em; border-radius: 0.4em; background: rgba(255, 255, 255, 0.06); }
.sec-compare .cmp-term .ln-p b { color: #CC785C; font-weight: 700; margin-right: 0.4em; }
.sec-compare .cmp-term .ln-t i { color: #3DD68C; font-style: normal; margin-right: 0.4em; }
.sec-compare .cmp-term .ln-s { margin-top: 0.5em; color: #f0f0f4; }
.sec-compare .cmp-term .ln-s em { color: #CC785C; font-style: normal; display: inline-block; margin-right: 0.4em; }
.sec-compare .cmp-term .ln-s span { color: #8e8e98; }


/* Dock (identical on both halves): frosted pill, ten tiles, running dots, no labels */
.sec-compare .cmp-dock { position: absolute; left: 50%; bottom: 0.8em; translate: -50% 0; display: flex; align-items: flex-end; gap: 0.7em; height: 4.9em; padding: 0.55em 0.8em; border-radius: 1.5em; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: inset 0 0 0 0.08em rgba(255, 255, 255, 0.7), 0 0.4em 1.6em -0.6em rgba(20, 24, 40, 0.35); z-index: 1; }
.sec-compare .cmp-dock .dk { position: relative; display: grid; place-items: center; width: 3.8em; height: 3.8em; border-radius: 0.9em; }
.sec-compare .cmp-dock .dk svg { width: 3.8em; height: 3.8em; display: block; filter: drop-shadow(0 0.15em 0.3em rgba(20, 24, 40, 0.18)); }
.sec-compare .cmp-dock .dk > img { width: 2.3em; height: 2.3em; }
.sec-compare .cmp-dock .dk-cursor, .sec-compare .cmp-dock .dk-claude, .sec-compare .cmp-dock .dk-codex { background: #fff; box-shadow: 0 0.15em 0.3em rgba(20, 24, 40, 0.18); }
.sec-compare .cmp-dock .dk-codex { background: #1f1f22; }
.sec-compare .cmp-dock .dk-claude { background: #fff; }
.sec-compare .cmp-dock .dk-trash { margin-left: 0.9em; }
.sec-compare .cmp-dock .dk-trash::before { content: ""; position: absolute; left: -0.85em; top: 0.3em; bottom: 0.3em; width: 0.08em; background: rgba(20, 24, 40, 0.18); }
.sec-compare .cmp-dock .dk > b { position: absolute; left: 50%; bottom: -0.55em; width: 0.4em; height: 0.4em; border-radius: 50%; translate: -50% 0; background: rgba(20, 24, 40, 0.55); }

/* Site annotation: dark chip (site px, does not scale with the desk) */
.sec-compare .cmp-chip { position: absolute; top: 46px; right: 26px; padding: 8px 14px; border-radius: 12px 12px 12px 3px; background: #2a2a2c; color: #fff; font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45); z-index: 3; }
.sec-compare .cmp-chip::before { content: ""; position: absolute; right: 22px; top: -7px; border: 6px solid transparent; border-bottom-color: #2a2a2c; border-top: 0; }
.sec-compare .cmp-desk-before .cmp-chip { left: 26px; right: auto; border-radius: 12px 12px 12px 3px; }
.sec-compare .cmp-desk-before .cmp-chip::before { left: 22px; right: auto; }
.sec-compare .cmp-chip .cmp-clock { font: inherit; }
.sec-compare .cmp-desk-after .cmp-chip { border-radius: 12px 12px 3px 12px; background: var(--accent); box-shadow: 0 10px 24px -10px rgba(234, 67, 35, 0.6); }
.sec-compare .cmp-desk-after .cmp-chip::before { border-bottom-color: var(--accent); }

/* looptend layer: top bar (notch shape 316 × 30) + your-turn badge + reminder card (360 × 148) */
.sec-compare .cmp-logo { width: 2em; height: 2em; display: block; }
.sec-compare .cmp-tb-mark { position: relative; display: inline-block; width: 2em; height: 2em; }
.sec-compare .cmp-badge { position: absolute; width: 1.1em; height: 1.1em; right: -0.55em; top: -0.55em; border-radius: 50%; background: #000; }
.sec-compare .cmp-badge::after { content: ""; position: absolute; inset: 0.15em; border-radius: 50%; background: #F5A524; }
.sec-compare .cmp-reminder .cmp-badge { background: #1E1E1F; }

.sec-compare .cmp-topbar { position: absolute; left: 50%; top: 0; width: 31.6em; height: 3em; translate: -50% 0; z-index: 2; display: grid; grid-template-columns: 6.4em auto 1fr auto 6.4em; align-items: center; padding: 0 1.5em; color: #fff; font-family: ui-rounded, "SF Pro Rounded", -apple-system, "PingFang SC", sans-serif; }
.sec-compare .cmp-topbar-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: #000; z-index: -1; filter: drop-shadow(0 0.4em 1.6em rgba(255, 255, 255, 0.95)) drop-shadow(0 0.2em 0.5em rgba(40, 50, 80, 0.10)); }
.sec-compare .cmp-tb-num { font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.92); white-space: nowrap; }
.sec-compare .cmp-tb-num:last-child { text-align: right; }
.sec-compare .cmp-tb-amber { color: #F5A524; }
.sec-compare .cmp-topbar .cmp-logo-claude { grid-column: 2; margin-left: 0.6em; }
.sec-compare .cmp-topbar .cmp-tb-mark { grid-column: 4; margin-right: 0.6em; }

.sec-compare .cmp-reminder { position: absolute; left: calc(50% + 4em); top: 4.2em; width: 36em; z-index: 2; padding: 1.6em; border-radius: 1.6em; background: #1E1E1F; color: #fff; box-shadow: 0 0.6em 2.8em rgba(0, 0, 0, 0.30), inset 0 0 0 0.05em rgba(255, 255, 255, 0.10); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif; }
.sec-compare .cmp-rem-head { display: flex; align-items: center; gap: 0.8em; height: 2em; margin-bottom: 1.2em; }
.sec-compare .cmp-rem-head b { font-size: 1.5em; font-weight: 600; color: rgba(255, 255, 255, 0.96); }
.sec-compare .cmp-rem-when { margin-left: auto; font-size: 1.2em; color: rgba(255, 255, 255, 0.55); }
.sec-compare .cmp-rem-session { font-size: 1.3em; font-weight: 500; color: rgba(255, 255, 255, 0.92); line-height: 1.25; }
.sec-compare .cmp-rem-actions { display: flex; justify-content: flex-end; gap: 0.8em; margin-top: 2em; }
.sec-compare .cmp-rem-btn { display: inline-grid; place-items: center; height: 2.8em; padding: 0 1.4em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.10); font-size: 1.3em; font-weight: 500; color: rgba(255, 255, 255, 0.88); }
.sec-compare .cmp-rem-btn-primary { background: rgba(255, 255, 255, 0.92); color: rgba(0, 0, 0, 0.88); font-weight: 600; }

/* Divider handle */
.sec-compare .cmp-handle { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sec-compare .cmp-handle:focus-visible { outline: none; }
.sec-compare .cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--compare-x, 50%); width: 2px; translate: -50% 0; background: #fff; box-shadow: 0 0 0 1px rgba(20, 24, 40, 0.12), 0 0 18px rgba(20, 24, 40, 0.25); }
.sec-compare .cmp-knob { position: absolute; left: clamp(28px, var(--compare-x, 50%), calc(100% - 28px)); top: 50%; width: 48px; height: 48px; translate: -50% -50%; pointer-events: auto; cursor: grab; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 10px 24px -8px rgba(20, 24, 40, 0.45), 0 0 0 1px rgba(20, 24, 40, 0.10); transition: scale 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out); }
.sec-compare .cmp-knob svg { width: 22px; height: 22px; }
.sec-compare .cmp-handle:hover .cmp-knob { scale: 1.08; }
.sec-compare .is-dragging .cmp-knob { scale: 0.96; box-shadow: 0 6px 16px -6px rgba(20, 24, 40, 0.5), 0 0 0 1px rgba(20, 24, 40, 0.14); }
.sec-compare .cmp-handle:focus-visible .cmp-knob { box-shadow: 0 10px 24px -8px rgba(20, 24, 40, 0.45), 0 0 0 3px var(--accent); }

/* Narrow: two stacked screens, no divider, final state */
@media (max-width: 760px) {
  .sec-compare .cmp-labels { display: none; }
  .sec-compare .cmp-side-title { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 14px; }
  .sec-compare .cmp-screen { aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; cursor: default; touch-action: auto; display: grid; gap: 40px; }
  .sec-compare .cmp-side { position: static; clip-path: none !important; }
  .sec-compare .cmp-side > .cmp-desk { position: relative; width: 100%; aspect-ratio: 13 / 10; border-radius: 18px; box-shadow: var(--shadow-window), inset 0 0 0 1px rgba(20, 24, 40, 0.10); font-size: calc(100cqw / 60); }
  /* crop: show design px 200–800 of the top (menu bar, chat, the Codex corner, browser, top bar, reminder, chips) */
  .sec-compare .cmp-desk .cmp-menubar, .sec-compare .cmp-desk .cmp-win { margin-left: -20em; }
  .sec-compare .cmp-desk .cmp-menubar { width: 80em; padding: 0 1.6em 0 21.6em; }
  .sec-compare .cmp-desk .cmp-win-chat { top: 12em; }
  .sec-compare .cmp-chip { top: 26px; right: 12px; font-size: 14px; }
  .sec-compare .cmp-desk-before .cmp-chip { left: 12px; }
  .sec-compare .cmp-desk .cmp-dock { display: none; }
  .sec-compare .cmp-menubar > span:not(.cmp-apple):not(.cmp-mb-right) { display: none; }
  .sec-compare .cmp-reminder { left: auto; right: 1.6em; top: 13.5em; }
  .sec-compare .cmp-handle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-compare .cmp-knob { transition: none; }
}

/* ===== features ===== */
/* features · Agent 一停，你就知道 · three alternating scenes, each with a pale panel of real captures and App-true replicas.
   The stage is designed at 672 × 560 units; --u = one unit, derived from the visual column's width (container query units),
   so every object, offset and App font keeps its pixel relationship at any width without JS. */

.sec-features .h-section { margin-bottom: clamp(48px, 6vw, 88px); }
.sec-features .ft-scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sec-features .ft-scene + .ft-scene { margin-top: clamp(72px, 9vw, 128px); }
.sec-features .ft-scene.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sec-features .ft-scene.is-flip .ft-copy { order: 2; }
.sec-features .ft-scene.is-flip .ft-visual { order: 1; }

/* Copy column */
.sec-features .ft-title { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.28; letter-spacing: -0.015em; }
.sec-features .ft-title span { display: block; }
.sec-features .ft-caps { margin-top: 28px; display: grid; gap: 14px; }
.sec-features .ft-caps li { position: relative; padding-left: 32px; font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 500; }
.sec-features .ft-caps li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); }
.sec-features .ft-caps li::after { content: ""; position: absolute; left: 7px; top: calc(0.28em + 5px); width: 5px; height: 9px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
.sec-features .ft-pro { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; line-height: 22px; letter-spacing: 0.02em; }
.sec-features .ft-shift { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 16px; line-height: 1.3; }
.sec-features .ft-was, .sec-features .ft-now { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 100%; padding: 7px 18px 7px 7px; border-radius: 22px; color: var(--ink); font-weight: 600; }
.sec-features .ft-was > span, .sec-features .ft-now > span { padding: 5px 0; line-height: 22px; }
.sec-features .ft-was { background: var(--fill); }
.sec-features .ft-now { background: var(--accent-soft); }
.sec-features .ft-was b, .sec-features .ft-now b { flex: none; display: inline-grid; place-items: center; height: 32px; padding: 0 11px; border-radius: var(--r-pill); font-size: 16px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.sec-features .ft-was b { background: #fff; color: var(--ink-2); }
.sec-features .ft-now b { background: var(--accent); color: #fff; }
.sec-features .ft-shift-arrow { display: block; margin-left: 18px; color: var(--accent); font-size: 22px; font-weight: 700; line-height: 1; rotate: 90deg; transform-origin: center; width: 22px; height: 22px; text-align: center; }

/* Stage */
.sec-features .ft-visual { container-type: inline-size; min-width: 0; }
.sec-features .ft-stage { --u: calc(100cqw / 672); position: relative; width: 100%; aspect-ratio: 672 / 560; font-family: var(--font); transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
.sec-features .ft-stage > * { position: absolute; }
.sec-features .ft-panel { inset: calc(36 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--panel); box-shadow: inset 0 0 0 1px rgba(20, 24, 40, 0.04); }
.sec-features .ft-stage img { height: auto; }
.sec-features .ft-mark { overflow: visible; pointer-events: none; }
.sec-features .ft-mark path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease-out) var(--d, 0ms); }
.sec-features .ft-mark path + path { transition-delay: calc(var(--d, 0ms) + 700ms); transition-duration: 0.3s; }
.sec-features .ft-mark.is-in path { stroke-dashoffset: 0; }
.sec-features .ft-arrow path { stroke: var(--ink); stroke-dasharray: 1; }
.sec-features .ft-cursor path { fill: #141414; stroke: #fff; stroke-width: 1.4; stroke-dasharray: none; stroke-dashoffset: 0; }
.sec-features .ft-cursor { width: calc(20 * var(--u)); height: calc(24 * var(--u)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.sec-features .ft-chip { top: calc(14 * var(--u)); left: calc(14 * var(--u)); display: inline-flex; align-items: center; height: calc(36 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(11 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)) calc(3 * var(--u)); background: #2a2a2c; color: #fff; font-size: calc(15 * var(--u)); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(20, 24, 40, 0.6); rotate: -4deg; }
.sec-features .ft-chip::after { content: ""; position: absolute; left: 0; bottom: calc(-7 * var(--u)); border-left: calc(8 * var(--u)) solid #2a2a2c; border-bottom: calc(7 * var(--u)) solid transparent; border-right: 0 solid transparent; width: 0; height: 0; }
.sec-features .ft-chip-perf { top: auto; left: auto; right: calc(22 * var(--u)); bottom: calc(118 * var(--u)); max-width: calc(100% - 40 * var(--u)); rotate: 3deg; font-size: calc(14 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(11 * var(--u)) calc(11 * var(--u)) calc(3 * var(--u)) calc(11 * var(--u)); }
.sec-features .ft-chip-perf::after { left: auto; right: 0; border-left: 0; border-right: calc(8 * var(--u)) solid #2a2a2c; }

/* App-true shared bits (inside .ui only) */
.sec-features .ui { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.sec-features .ft-agent { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)) 0 calc(6 * var(--u)); border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.055); font-size: calc(11.5 * var(--u)); font-weight: 600; color: rgba(0, 0, 0, 0.9); }
.sec-features .ft-agent img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.sec-features .ft-btn-dark, .sec-features .ft-btn-light { display: inline-grid; place-items: center; height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; }
.sec-features .ft-btn-dark { background: #141414; color: #fff; }
.sec-features .ft-btn-light { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.9); box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.08); }

/* Scene 1 · your-turn · App-true replica of the top bar's 当前会话 page (black, 2026-09-27 build), hung from the panel's top edge */
.sec-features .ft-topbar { top: calc(36 * var(--u)); left: calc(26 * var(--u)); width: calc(620 * var(--u)); padding: 0 0 calc(6 * var(--u)); border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u)); background: linear-gradient(180deg, #000 0%, #060606 55%, #171717 100%); color: #fff; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.12); }
.sec-features .ft-tb-band { display: flex; justify-content: space-between; align-items: center; height: calc(30 * var(--u)); padding: 0 calc(14 * var(--u)); }
.sec-features .ft-tb-band img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.sec-features .ft-tb-rows { display: grid; padding: calc(6 * var(--u)) calc(30 * var(--u)) 0 calc(32 * var(--u)); }
.sec-features .ft-tb-rows li { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(40 * var(--u)); }
.sec-features .ft-tb-rows img { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.sec-features .ft-tb-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.sec-features .ft-tb-text b { display: block; font-size: calc(12.5 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-features .ft-tb-text span { display: block; margin-top: calc(1 * var(--u)); font-size: calc(10.5 * var(--u)); color: rgba(255, 255, 255, 0.55); }
.sec-features .ft-tb-status { position: relative; flex: none; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); width: calc(84 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; }
.sec-features .ft-tb-status::before { content: ""; flex: none; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; }
.sec-features .ft-tb-status.is-work { color: var(--good); }
.sec-features .ft-tb-status.is-work::before { background: var(--good); }
.sec-features .ft-tb-status.is-turn { color: var(--amber); }
.sec-features .ft-tb-status.is-turn::before { width: calc(7 * var(--u)); height: calc(7 * var(--u)); background: var(--amber); box-shadow: 0 0 0 calc(2 * var(--u)) #000, 0 0 0 calc(3 * var(--u)) var(--amber); clip-path: none; }
.sec-features .ft-tb-rows time { flex: none; width: calc(56 * var(--u)); text-align: right; font-size: calc(10.5 * var(--u)); color: rgba(255, 255, 255, 0.55); }
.sec-features .ft-tb-foot { display: flex; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(12 * var(--u)); }
.sec-features .ft-tb-gear { position: relative; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: rgba(255, 255, 255, 0.12); }
.sec-features .ft-tb-gear::before { content: ""; position: absolute; inset: calc(6 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) dotted rgba(255, 255, 255, 0.9); }
.sec-features .ft-tb-gear::after { content: ""; position: absolute; inset: calc(9.5 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.9); }
.sec-features .ft-tb-dots { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: calc(6 * var(--u)); }
.sec-features .ft-tb-dots i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.35); }
.sec-features .ft-tb-dots i.on { width: calc(14 * var(--u)); background: #fff; }
.sec-features .ft-tb-foot b { font-size: calc(11 * var(--u)); font-weight: 600; }
.sec-features .ft-ball { top: calc(392 * var(--u)); left: calc(112 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: #000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.sec-features .ft-ball img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.sec-features .ft-ball-badge { position: absolute; top: calc(-1 * var(--u)); right: calc(-1 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 calc(3 * var(--u)) #fff; }
.sec-features .ft-ball-badge::after { content: ""; position: absolute; inset: calc(-7 * var(--u)); border-radius: 50%; border: 1px solid var(--amber); opacity: 0; animation: ft-ping 2.4s ease-out infinite; }
@keyframes ft-ping { 0% { scale: 0.35; opacity: 0.7; } 40%, 100% { scale: 1.2; opacity: 0; } }
.sec-features .ft-reminder { top: calc(372 * var(--u)); left: calc(262 * var(--u)); width: calc(372 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(13 * var(--u)); background: #1b1b1c; color: #fff; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); }
.sec-features .ft-rm-head { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; }
.sec-features .ft-rm-head i { position: relative; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sec-features .ft-rm-head i img { width: 100%; height: 100%; }
.sec-features .ft-rm-head i::after { content: ""; position: absolute; top: calc(-2 * var(--u)); right: calc(-2 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 calc(1.5 * var(--u)) #1b1b1c; }
.sec-features .ft-rm-head time { margin-left: auto; font-size: calc(12 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.sec-features .ft-rm-body { margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.3; }
.sec-features .ft-rm-body span { margin-left: calc(6 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.sec-features .ft-rm-actions { display: flex; justify-content: flex-end; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.sec-features .ft-rm-actions span { display: inline-grid; place-items: center; height: calc(27 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 700; }
.sec-features .ft-rm-ok { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sec-features .ft-rm-open { position: relative; background: #fff; color: #141414; }
.sec-features .ft-ellipse-1 { position: absolute; left: -16%; top: -62%; width: 132%; height: 224%; }
.sec-features .ft-arrow-1 { top: calc(262 * var(--u)); left: calc(438 * var(--u)); width: calc(110 * var(--u)); height: calc(84 * var(--u)); }
.sec-features .ft-cursor-1 { position: absolute; right: calc(-2 * var(--u)); bottom: calc(-14 * var(--u)); }
.sec-features .ft-scene[data-scene="1"] .ft-chip { top: auto; bottom: calc(18 * var(--u)); left: calc(16 * var(--u)); rotate: -3deg; }

/* Scene 2 · deep check + accounts */
/* Scene 2 · the App's 网络 page tab row (实时监控 / 深度网络检测 / ▶ 开始检测) replicated above the deep-check result card */
.sec-features .ft-nettabs { top: calc(62 * var(--u)); left: calc(74 * var(--u)); width: calc(524 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(32 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; color: rgba(0, 0, 0, 0.9); }
.sec-features .ft-nettabs span { display: inline-grid; place-items: center; height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(9 * var(--u)); }
.sec-features .ft-nettabs span.on { background: rgba(0, 0, 0, 0.08); }
.sec-features .ft-nettabs b { margin-left: auto; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-weight: 600; }
.sec-features .ft-nettabs b i { font-style: normal; font-size: calc(9 * var(--u)); }
.sec-features .ft-result { top: calc(112 * var(--u)); left: calc(110 * var(--u)); width: calc(456 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); border-radius: calc(18 * var(--u)); background: #fff; color: rgba(0, 0, 0, 0.92); box-shadow: 0 30px 50px -28px rgba(20, 24, 40, 0.42), 0 2px 8px rgba(20, 24, 40, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.05); font-size: calc(14 * var(--u)); line-height: 1.45; }
.sec-features .ft-result-head { display: flex; align-items: center; justify-content: space-between; font-size: calc(15 * var(--u)); }
.sec-features .ft-issue { display: flex; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.sec-features .ft-issue b { display: block; font-size: calc(14.5 * var(--u)); font-weight: 600; }
.sec-features .ft-issue span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); color: rgba(0, 0, 0, 0.62); }
.sec-features .ft-warn { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(1 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(245, 165, 36, 0.16); position: relative; }
.sec-features .ft-warn::before { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--amber); font-weight: 800; font-size: calc(13 * var(--u)); }
.sec-features .ft-chain { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)) calc(2 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(12.5 * var(--u)); color: rgba(0, 0, 0, 0.7); }
.sec-features .ft-chain li { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); }
.sec-features .ft-chain li::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--good); }
.sec-features .ft-chain li:not(:last-child) { margin-right: calc(12 * var(--u)); position: relative; }
.sec-features .ft-chain li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-13 * var(--u)); color: rgba(0, 0, 0, 0.35); font-size: calc(11 * var(--u)); }
.sec-features .ft-chain li.warn { background: rgba(245, 165, 36, 0.16); color: #9a5b00; font-weight: 700; }
.sec-features .ft-chain li.warn::before { background: var(--amber); }
.sec-features .ft-fix { margin-top: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(0, 0, 0, 0.04); }
.sec-features .ft-fix-label { font-size: calc(12 * var(--u)); font-weight: 700; color: rgba(0, 0, 0, 0.62); }
.sec-features .ft-fix p { margin-top: calc(3 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; }
.sec-features .ft-fix-actions { display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.sec-features .ft-accounts { top: calc(440 * var(--u)); left: calc(10 * var(--u)); width: max-content; min-width: calc(340 * var(--u)); max-width: calc(440 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; color: rgba(0, 0, 0, 0.92); box-shadow: 0 26px 44px -26px rgba(20, 24, 40, 0.45), 0 2px 8px rgba(20, 24, 40, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); rotate: -2deg; font-size: calc(14 * var(--u)); }
.sec-features .ft-accounts-row { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); font-weight: 600; white-space: nowrap; }
.sec-features .ft-toggle { width: calc(34 * var(--u)); height: calc(19 * var(--u)); border-radius: var(--r-pill); background: #2C6CF7; position: relative; }
.sec-features .ft-toggle::after { content: ""; position: absolute; top: calc(2 * var(--u)); right: calc(2 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.3); }
.sec-features .ft-accounts-sub { display: flex; white-space: nowrap; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); }
.sec-features .ft-acct { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(6 * var(--u)); border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.055); font-weight: 600; }
.sec-features .ft-acct img { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.sec-features .ft-acct em { font-style: normal; font-size: calc(9.5 * var(--u)); font-weight: 700; padding: 0 calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(0, 0, 0, 0.08); }
.sec-features .ft-acct-next { margin-left: auto; color: var(--accent); font-weight: 700; }
.sec-features .ft-chain li.warn { position: relative; }
.sec-features .ft-ellipse-2 { position: absolute; left: -12%; top: -38%; width: 124%; height: 176%; }
.sec-features .ft-btn-light { position: relative; }
.sec-features .ft-cursor-2 { position: absolute; right: calc(-4 * var(--u)); bottom: calc(-14 * var(--u)); }

/* Scene 3 · summary + usage */
.sec-features .ft-summary { top: calc(62 * var(--u)); left: calc(70 * var(--u)); width: calc(470 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); border-radius: calc(20 * var(--u)); background: #fff; color: rgba(0, 0, 0, 0.92); box-shadow: 0 30px 50px -28px rgba(20, 24, 40, 0.42), 0 2px 8px rgba(20, 24, 40, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.05); font-size: calc(13 * var(--u)); line-height: 1.5; }
.sec-features .ft-summary-head { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(14 * var(--u)); }
.sec-features .ft-summary-head img { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.sec-features .ft-summary-head span { font-weight: 700; }
.sec-features .ft-summary-head b { margin-left: calc(4 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; }
.sec-features .ft-summary-head time { margin-left: auto; font-size: calc(12 * var(--u)); color: rgba(0, 0, 0, 0.62); }
.sec-features .ft-summary-sec { margin-top: calc(16 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 700; }
.sec-features .ft-summary-list { display: grid; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.sec-features .ft-summary-list li { position: relative; padding-left: calc(20 * var(--u)); font-weight: 500; }
.sec-features .ft-summary-list li::before { content: ""; position: absolute; left: calc(2 * var(--u)); top: calc(5 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--good); }
.sec-features .ft-summary-foot { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(14 * var(--u)); }
.sec-features .ft-summary-n { margin-left: auto; font-size: calc(11.5 * var(--u)); color: rgba(0, 0, 0, 0.62); }
.sec-features .ft-generate { top: calc(28 * var(--u)); left: calc(470 * var(--u)); display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); background: #141414; color: #fff; font-size: calc(13.5 * var(--u)); font-weight: 700; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.55); rotate: 5deg; }
.sec-features .ft-generate i { font-style: normal; font-size: calc(13 * var(--u)); }
.sec-features .ft-usage { top: calc(362 * var(--u)); left: calc(196 * var(--u)); width: calc(486 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); background: #fff; color: rgba(0, 0, 0, 0.92); box-shadow: 0 30px 50px -28px rgba(20, 24, 40, 0.42), 0 2px 8px rgba(20, 24, 40, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.05); }
.sec-features .ft-usage-head { display: flex; justify-content: space-between; font-size: calc(12.5 * var(--u)); font-weight: 700; }
.sec-features .ft-usage-head time { font-weight: 500; color: rgba(0, 0, 0, 0.62); }
.sec-features .ft-usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); margin: calc(10 * var(--u)) 0 0; }
.sec-features .ft-usage-grid dt { font-size: calc(11.5 * var(--u)); color: rgba(0, 0, 0, 0.62); }
.sec-features .ft-usage-grid dd { margin: calc(2 * var(--u)) 0 0; font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.sec-features .ft-usage-grid dd small { font-size: calc(13 * var(--u)); font-weight: 600; margin-left: calc(2 * var(--u)); }
.sec-features .ft-usage-cost { position: relative; }
.sec-features .ft-export { top: calc(394 * var(--u)); left: calc(18 * var(--u)); width: calc(150 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; color: rgba(0, 0, 0, 0.92); box-shadow: 0 26px 44px -26px rgba(20, 24, 40, 0.45), 0 2px 8px rgba(20, 24, 40, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); rotate: -3deg; font-size: calc(12.5 * var(--u)); }
.sec-features .ft-export-head { padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; color: rgba(0, 0, 0, 0.62); }
.sec-features .ft-export li { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(7 * var(--u)); font-weight: 500; }
.sec-features .ft-export li:first-child { background: rgba(0, 0, 0, 0.06); }
.sec-features .ft-export li i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(0, 0, 0, 0.72); }
.sec-features .ft-ico-img { background: linear-gradient(135deg, #5AA8F0, #3DD68C) !important; }
.sec-features .ft-ico-doc { background: #2B579A !important; }
.sec-features .ft-ico-pdf { background: #E5484D !important; }
.sec-features .ft-ellipse-3 { position: absolute; left: -9%; top: -38%; width: 118%; height: 176%; }
.sec-features .ft-cursor-3 { position: absolute; right: calc(-6 * var(--u)); bottom: calc(-16 * var(--u)); rotate: -5deg; }
.sec-features .ft-underline-3 { position: absolute; left: -2%; right: -2%; bottom: calc(-8 * var(--u)); width: 104%; height: calc(12 * var(--u)); }

/* Narrow */
@media (max-width: 900px) {
  .sec-features .ft-scene, .sec-features .ft-scene.is-flip { grid-template-columns: 1fr; gap: 36px; }
  .sec-features .ft-scene.is-flip .ft-copy { order: 1; }
  .sec-features .ft-scene.is-flip .ft-visual { order: 2; }
  .sec-features .ft-visual { margin-inline: calc(-0.5 * var(--gutter)); }
  .sec-features .ft-stage { transform: none; }
  .sec-features .ft-panel { inset: calc(28 * var(--u)) calc(18 * var(--u)); }
  .sec-features .ft-caps li { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-features .ft-mark path { stroke-dashoffset: 0; transition: none; }
  .sec-features .ft-ball-badge::after { animation: none; }
  .sec-features .ft-stage { transform: none; }
}

/* ja / ko (i18n stream, 2026-09-28) */
.sec-features:lang(ja) .h-section, .sec-features:lang(ja) .ft-title, .sec-features:lang(ja) .ft-caps li, .sec-features:lang(ja) .ft-shift span span { word-break: auto-phrase; }
.sec-features:lang(ko) .h-section, .sec-features:lang(ko) .ft-title, .sec-features:lang(ko) .ft-caps li, .sec-features:lang(ko) .ft-shift span span, .sec-features:lang(ko) .ft-summary-list li, .sec-features:lang(ko) .ft-issue { word-break: keep-all; overflow-wrap: anywhere; }
/* ja: the issue line wraps and the chain needs a third row, so the result card is taller → tighter chain, accounts card and perf chip lower */
.sec-features:lang(ja) .ft-chain { font-size: calc(12 * var(--u)); gap: calc(3 * var(--u)) calc(2 * var(--u)); }
.sec-features:lang(ja) .ft-chain li { padding: 0 calc(5 * var(--u)); height: calc(21 * var(--u)); }
.sec-features:lang(ja) .ft-chain li:not(:last-child) { margin-right: calc(11 * var(--u)); }
.sec-features:lang(ja) .ft-accounts { top: calc(478 * var(--u)); }
.sec-features:lang(ja) .ft-chip-perf { bottom: calc(80 * var(--u)); }

/* ===== forms ===== */
/* forms · 放在哪，你说了算 — App-true interactive replica of 顶部条 / 侧边栏 / 悬浮球 driven by a replica of the 显示 settings.
   Everything inside .fm-settings and .fm-screen is App UI (.ui): App sizes and App greys are allowed there. */

.sec-forms {
  --fm-open: 420ms linear(0,.0543,.1759,.3211,.4645,.5929,.7008,.7871,.8537,.9032,.9389,.9638,.9805,.9912,.9978,1.0014,1.0032,1.0039,1.0038,1.0034,1.0029,1.0023,1.0018,1.0013,1);
  --fm-close: 490ms linear(0,.0586,.1831,.3251,.4604,.5785,.6765,.7551,.8167,.864,.8998,.9267,.9466,.9613,.9721,.9799,.9856,.9897,.9927,.9948,.9963,.9974,.9982,.9987,1);
  --fm-content: 180ms cubic-bezier(0,0,.58,1) 100ms;
  --fm-select: 480ms linear(0,.0553,.179,.3265,.472,.6018,.7103,.7968,.8628,.9116,.9462,.9699,.9855,.9952,1.0008,1.0037,1.0048,1.005,1.0046,1.0039,1.0031,1.0024,1.0018,1.0013,1);
  --fm-commit: 490ms linear(0,.0741,.2387,.43,.6099,.7596,.8728,.9511,.9999,1.0263,1.037,1.0379,1.0332,1.0262,1.0189,1.0124,1.0073,1.0035,1.001,.9995,.9988,.9985,.9986,.9988,1);
  --fm-ballhover: 380ms linear(0,.0522,.172,.3188,.4668,.6015,.7157,.8075,.8778,.9293,.9652,.9888,1.0033,1.0112,1.0146,1.0151,1.014,1.012,1.0097,1.0075,1.0056,1.0039,1.0026,1.0016,1);
  --fm-cardmove: 260ms linear(0,.0338,.1141,.2168,.3265,.4336,.5324,.6201,.6958,.7597,.8125,.8556,.8901,.9174,.9388,.9553,.9678,.9773,.9843,.9895,.9932,.9958,.9976,.9989,1);
  --fm-remind: 420ms linear(0,.0544,.1766,.3228,.4673,.5968,.7054,.7923,.859,.9084,.9438,.9681,.9842,.9943,1.0003,1.0034,1.0048,1.005,1.0046,1.004,1.0032,1.0025,1.0019,1.0014,1);
  --fm-badge: 610ms linear(0,.115,.3644,.6365,.8641,1.0193,1.1017,1.1262,1.1135,1.0826,1.0481,1.0188,.9986,.9876,.9841,.9855,.9893,.9936,.9974,1,1.0015,1.002,1.0019,1.0014,1);
  --fm-swipe: 360ms cubic-bezier(.25,.82,.25,1);
  --fm-strong: 280ms cubic-bezier(.23,1,.32,1);
  --fm-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "PingFang SC", system-ui, sans-serif;
  --fm-claude: #CC785C; --fm-codex: #5AA8F0; --fm-cpu: #4FC957; --fm-gpu: #82D64F; --fm-down: #407AFA; --fm-up: #4FC2C9; --fm-coin: #F5C252;
  --fm-glow: #C7D3DF;
}

.sec-forms .fm-stage { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 56px; }
.sec-forms .ui { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", sans-serif; -webkit-font-smoothing: antialiased; }
.sec-forms .ui * { box-sizing: border-box; }
.sec-forms .ui img { display: inline-block; }
.sec-forms .ui :where(button) { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.sec-forms .ui [hidden] { display: none !important; }

/* ─── Settings strip (显示 pane, light) ─────────────────────────────────────────── */
.sec-forms .fm-settings { background: var(--fill); border-radius: 24px; padding: 22px 16px 16px; color: #141414; }
.sec-forms .fm-set-title { font-size: 22px; font-weight: 700; line-height: 1.2; padding: 0 12px; }
.sec-forms .fm-set-tabs { display: flex; gap: 6px; margin: 14px 12px 14px; }
.sec-forms .fm-set-tabs span { font-size: 11.5px; font-weight: 600; line-height: 1; padding: 8px 10px; border-radius: 8px; color: rgba(0,0,0,.72); }
.sec-forms .fm-set-tabs .is-on { background: rgba(0,0,0,.095); box-shadow: inset 0 0 0 .6px rgba(0,0,0,.10); color: rgba(0,0,0,.94); }
.sec-forms .fm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; min-height: 46px; padding: 8px 12px; border-radius: 11px; transition: background-color .15s ease-out, box-shadow .15s ease-out; }
.sec-forms .fm-row:hover { background: linear-gradient(90deg, rgba(0,0,0,.055), rgba(0,0,0,0)); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.07); }
.sec-forms .fm-row-label { font-size: 13px; font-weight: 500; line-height: 1.3; color: rgba(0,0,0,.94); white-space: nowrap; }
.sec-forms .fm-row-stack { display: block; }
.sec-forms .fm-row-stack .fm-row-label { display: block; margin-bottom: 10px; }

.sec-forms .fm-seg { position: relative; margin-left: auto; display: inline-flex; height: 28px; padding: 3px; border-radius: 999px; background: #F2F3F4; box-shadow: inset 0 0 0 1px rgba(0,0,0,.09); flex: none; }
.sec-forms .fm-seg-thumb { position: absolute; top: 3px; left: 3px; height: 22px; width: 64px; border-radius: 999px; background: rgba(0,0,0,.92); box-shadow: 0 1px 6px rgba(0,0,0,.35); transition: left var(--fm-select), width var(--fm-select); pointer-events: none; }
.sec-forms .fm-seg [role="radio"] { position: relative; z-index: 1; min-width: 64px; height: 22px; padding: 0 11px; border-radius: 999px; font-size: 11.5px; line-height: 22px; color: rgba(0,0,0,.72); white-space: nowrap; transition: color .15s ease-out, transform .12s ease-out; }
.sec-forms .fm-seg [role="radio"]:hover { color: rgba(0,0,0,.90); }
.sec-forms .fm-seg [role="radio"]:active { transform: scale(.985); }
.sec-forms .fm-seg [role="radio"][aria-checked="true"] { color: rgba(251,251,251,.92); font-weight: 600; }
.sec-forms .fm-seg [role="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sec-forms .fm-tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sec-forms .fm-tile-frame { position: absolute; top: 0; left: 0; height: 64px; border-radius: 9px; background: rgba(0,0,0,.10); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); pointer-events: none; transition: left var(--fm-select), width var(--fm-select); }
.sec-forms .fm-tiles [role="radio"] { position: relative; height: 64px; border-radius: 9px; background: rgba(0,0,0,.035); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(0,0,0,.72); font-size: 13px; font-weight: 500; transition: background-color .15s ease-out, box-shadow .15s ease-out, transform .12s ease-out; }
.sec-forms .fm-tiles [role="radio"]:hover { background: rgba(0,0,0,.06); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.sec-forms .fm-tiles [role="radio"]:active { transform: scale(.985); }
.sec-forms .fm-tiles [role="radio"][aria-checked="true"] { background: transparent; box-shadow: none; color: rgba(0,0,0,.95); font-weight: 600; }
.sec-forms .fm-tiles [role="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-forms .fm-tile-pv { height: 26px; display: flex; align-items: center; justify-content: center; }
.sec-forms .fm-tile-pv svg { display: block; }
.sec-forms .fm-tile-num { font-family: var(--fm-rounded); font-size: 15px; font-weight: 700; color: #141414; line-height: 1; }
.sec-forms .fm-tile-num i { font-style: normal; font-size: 11.5px; font-weight: 500; color: rgba(0,0,0,.5); margin-left: 1px; }
.sec-forms .fm-tile-check { position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.90); color: #fff; display: grid; place-items: center; transform: scale(.6); opacity: 0; transition: transform var(--fm-commit), opacity .12s ease-out; }
.sec-forms .fm-tiles [aria-checked="true"] .fm-tile-check { transform: scale(1); opacity: 1; }
.sec-forms .fm-tile-check svg { width: 8px; height: 8px; }
.sec-forms .ui .fm-btn { margin-left: auto; height: 30px; padding: 0 16px; border-radius: 8px; background: rgba(0,0,0,.065); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); font-size: 13px; font-weight: 500; color: rgba(0,0,0,.94); white-space: nowrap; transition: background-color .15s ease-out, transform .12s ease-out; }
.sec-forms .ui .fm-btn:hover { background: rgba(0,0,0,.10); }
.sec-forms .ui .fm-btn:active { transform: scale(.97); }
.sec-forms .ui .fm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Screen (a desktop) ───────────────────────────────────────────────────────── */
.sec-forms .fm-screen { position: relative; background: #101012; border-radius: 22px; padding: 8px; box-shadow: var(--shadow-window), inset 0 0 0 1px rgba(255,255,255,.06); }
.sec-forms .fm-view { position: relative; aspect-ratio: 1040 / 650; border-radius: 16px; overflow: hidden; background: #dfe6f2; isolation: isolate; }
.sec-forms .fm-desk { --s: 1; position: absolute; top: 0; left: 0; width: 1040px; height: 650px; transform: scale(var(--s)); transform-origin: 0 0; color: #fff; }
.sec-forms .fm-wall { position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 78% 82%, #ffd6c2 0%, rgba(255,214,194,0) 70%),
  radial-gradient(55% 60% at 18% 78%, #c9d8ff 0%, rgba(201,216,255,0) 70%),
  radial-gradient(70% 60% at 50% 20%, #eef3ff 0%, rgba(238,243,255,0) 75%),
  linear-gradient(180deg, #dbe4f5 0%, #e9eef8 45%, #f3e6e0 100%); }
.sec-forms .fm-wall::before { content: ""; position: absolute; left: 22%; top: 34%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.75), rgba(255,255,255,0) 62%); filter: blur(14px); }
.sec-forms .fm-wall::after { content: ""; position: absolute; right: -6%; top: 8%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,171,120,.45), rgba(255,171,120,0) 64%); filter: blur(18px); }
.sec-forms .fm-menubar { position: absolute; left: 0; right: 0; top: 0; height: 30px; padding: 0 16px; display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 500; color: rgba(0,0,0,.86); background: rgba(255,255,255,.42); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
.sec-forms .fm-menubar b { font-weight: 700; }
.sec-forms .fm-menubar .fm-mb-r { margin-left: auto; display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.sec-forms .fm-menubar svg { width: 16px; height: 16px; display: block; }
.sec-forms .fm-window { position: absolute; left: 236px; top: 118px; width: 600px; height: 400px; border-radius: 12px; background: rgba(255,255,255,.86); box-shadow: 0 24px 60px -20px rgba(20,24,40,.35), 0 0 0 .5px rgba(0,0,0,.08); overflow: hidden; }
.sec-forms .fm-window .fm-win-bar { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: rgba(240,241,244,.9); }
.sec-forms .fm-window .fm-win-bar i { width: 12px; height: 12px; border-radius: 50%; background: #dfe0e4; }
.sec-forms .fm-window .fm-win-bar i:nth-child(1) { background: #ff5f57; } .sec-forms .fm-window .fm-win-bar i:nth-child(2) { background: #febc2e; } .sec-forms .fm-window .fm-win-bar i:nth-child(3) { background: #28c840; }
.sec-forms .fm-window .fm-win-bar span { flex: 1; text-align: center; margin-right: 52px; font-size: 12.5px; font-weight: 500; color: rgba(0,0,0,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-forms .fm-window .fm-win-term { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 20px; color: rgba(0,0,0,.86); white-space: pre; }
.sec-forms .fm-window .fm-win-term em { font-style: normal; color: #B8552F; }
.sec-forms .fm-window .fm-win-term i { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; background: rgba(0,0,0,.72); margin-left: 1px; }
.sec-forms .fm-dock { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: flex; gap: 8px; padding: 6px; border-radius: 20px; background: rgba(255,255,255,.4); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), 0 8px 24px -12px rgba(20,24,40,.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.sec-forms .fm-dock i { width: 40px; height: 40px; border-radius: 10px; background: var(--c, #fff); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06); }

/* Only the chosen form is on screen */
.sec-forms .fm-desk[data-form="topbar"] .fm-sidebar, .sec-forms .fm-desk[data-form="topbar"] .fm-ball,
.sec-forms .fm-desk[data-form="sidebar"] .fm-topbar, .sec-forms .fm-desk[data-form="sidebar"] .fm-ball,
.sec-forms .fm-desk[data-form="ball"] .fm-topbar, .sec-forms .fm-desk[data-form="ball"] .fm-sidebar { display: none; }

/* Shared App type */
.sec-forms .fm-num { font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; }
.sec-forms .sev-amber { color: #F5A524 !important; }
.sec-forms .sev-red { color: #E5484D !important; }
.sec-forms .fm-spin { animation: fm-spin 4s linear infinite; transform-origin: 50% 50%; }
@keyframes fm-spin { to { transform: rotate(360deg); } }
.sec-forms .fm-glance { display: inline-flex; align-items: baseline; justify-content: center; white-space: nowrap; font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; line-height: 14px; }
.sec-forms .fm-glance b { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.92); }
.sec-forms .fm-glance i { font-style: normal; font-size: 8.5px; font-weight: 500; color: rgba(255,255,255,.66); }
.sec-forms .fm-glance i.fm-pre { margin-right: 3px; }
.sec-forms .fm-glance i.fm-unit { margin-left: .5px; }
.sec-forms .fm-glance i.fm-unit.fm-sp { margin-left: 3px; }

/* ─── Top bar (刘海) ───────────────────────────────────────────────────────────── */
.sec-forms .fm-topbar { position: absolute; left: 50%; top: 0; width: 812px; height: 274px; margin-left: -406px; pointer-events: none; }
.sec-forms .fm-topbar > svg { position: absolute; left: 0; top: 0; width: 812px; height: 274px; overflow: visible; }
.sec-forms .fm-tb-glow path { fill: #000; filter: drop-shadow(0 4px 26px rgb(199 211 223 / .26)); transition: filter 200ms ease-out; }
.sec-forms .fm-topbar.is-open .fm-tb-glow path { filter: drop-shadow(0 8px 40px rgba(0,0,0,.22)) drop-shadow(0 4px 26px rgb(199 211 223 / .18)); }
.sec-forms .fm-tb-glass { position: absolute; left: 0; top: 0; width: 812px; height: 274px; opacity: 0; }
.sec-forms .fm-tb-glass::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); background: rgb(51 51 52 / .739); }
.sec-forms .fm-tb-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.42) 100%); }
.sec-forms .fm-tb-body path { fill: #000; transition: opacity 330ms ease-in; }
.sec-forms .is-glass .fm-topbar.is-open .fm-tb-body path { opacity: 0; transition: opacity 300ms ease-out; }
.sec-forms .is-glass .fm-topbar.is-open .fm-tb-glass { opacity: 1; }
.sec-forms .fm-tb-rim path { fill: none; stroke: rgba(255,255,255,.12); stroke-width: .5; opacity: 0; transition: opacity 200ms ease-out; }
.sec-forms .fm-topbar.is-open .fm-tb-rim path { opacity: 1; }
.sec-forms .fm-tb-sweep { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 9px, #000 21px); mask-image: linear-gradient(to bottom, transparent 0, transparent 9px, #000 21px); }
.sec-forms .fm-tb-sweep path { fill: none; stroke: rgb(199 211 223 / .30); stroke-width: 2.4; stroke-dasharray: 160 1000; filter: blur(1.5px); animation: fm-sweep 6.9s linear infinite; }
@keyframes fm-sweep { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1160; } }
.sec-forms .fm-tb-hit { position: absolute; top: 0; pointer-events: auto; cursor: default; outline: none; }
.sec-forms .fm-tb-hit:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 0 0 14px 14px; }
.sec-forms .fm-tb-content { position: absolute; top: 0; width: 812px; height: 274px; }
.sec-forms .fm-tb-logo { position: absolute; top: 5px; width: 20px; height: 20px; }
.sec-forms .fm-tb-logo img { width: 20px; height: 20px; display: block; }
.sec-forms .fm-tb-peek { position: absolute; top: 8px; height: 14px; line-height: 14px; font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.92); white-space: nowrap; transition: opacity 180ms ease-out 330ms; }
.sec-forms .fm-topbar.is-open .fm-tb-peek { opacity: 0; transition: opacity 80ms ease-out; }
.sec-forms .fm-tb-panel { position: absolute; left: 6px; top: 30px; width: 800px; height: 244px; opacity: 0; transform: translateY(-8px) scale(.96, .92); transform-origin: 50% 0; filter: blur(6px); transition: opacity 100ms ease-out, transform 100ms ease-out, filter 100ms ease-out; pointer-events: none; }
.sec-forms .fm-topbar.is-open .fm-tb-panel { opacity: 1; transform: none; filter: none; transition: opacity var(--fm-content), transform var(--fm-content), filter var(--fm-content); pointer-events: auto; }
.sec-forms .fm-tb-viewport { position: absolute; left: 18px; top: 14px; width: 764px; height: 176px; overflow: hidden; }
.sec-forms .fm-tb-pages { display: flex; width: 2292px; height: 176px; transition: transform var(--fm-swipe); }
.sec-forms .fm-tb-page { position: relative; width: 764px; height: 176px; flex: none; }
.sec-forms .fm-tb-foot { position: absolute; left: 0; right: 0; top: 196px; height: 28px; }
.sec-forms .fm-util { position: absolute; top: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); display: grid; place-items: center; transition: background-color .15s ease-out, color .15s ease-out, transform 120ms ease-out; }
.sec-forms .fm-util:hover { background: rgba(255,255,255,.14); color: rgba(255,255,255,.95); }
.sec-forms .fm-util:active { background: rgba(255,255,255,.20); transform: scale(.94); }
.sec-forms .fm-util svg { width: 13px; height: 13px; display: block; }
.sec-forms .fm-util-l { left: 14px; } .sec-forms .fm-util-r { right: 14px; }
.sec-forms .fm-tb-all { position: absolute; right: 14px; top: 0; height: 28px; line-height: 28px; padding: 0 4px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); transition: color .15s ease-out; }
.sec-forms .fm-tb-all:hover { color: rgba(255,255,255,.92); }
.sec-forms .fm-dots { position: absolute; left: 50%; top: 2px; translate: -50% 0; display: flex; align-items: center; height: 24px; }
.sec-forms .fm-dot { width: 14px; height: 24px; display: grid; place-items: center; }
.sec-forms .fm-dot i { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.35); transition: width var(--fm-strong), background-color var(--fm-strong); }
.sec-forms .fm-dot[aria-selected="true"] { width: 22px; }
.sec-forms .fm-dot[aria-selected="true"] i { width: 14px; background: rgba(255,255,255,.90); }
.sec-forms .fm-util:focus-visible, .sec-forms .fm-dot:focus-visible, .sec-forms .fm-tb-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 8px; }

/* 用量 page */
.sec-forms .fm-usage { position: absolute; left: 22px; top: 28px; width: 720px; height: 120px; display: flex; }
.sec-forms .fm-col { position: relative; width: 360px; height: 120px; padding: 0 12px; display: flex; align-items: center; gap: 18px; }
.sec-forms .fm-col + .fm-col::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.06), transparent); }
.sec-forms .fm-tile { position: relative; width: 159px; height: 96px; display: flex; flex-direction: column; justify-content: center; }
.sec-forms .fm-tile.fm-wide { width: 336px; }
.sec-forms .fm-tile-in { transition: opacity 220ms cubic-bezier(.23,1,.32,1), filter 220ms cubic-bezier(.23,1,.32,1), transform 220ms cubic-bezier(.23,1,.32,1); }
.sec-forms .fm-tile.is-swap .fm-tile-in { opacity: 0; filter: blur(3px); transform: scale(.96); transition: none; }
.sec-forms .fm-tile-head { display: flex; align-items: baseline; justify-content: space-between; height: 22px; }
.sec-forms .fm-tile-name { position: relative; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.72); white-space: nowrap; }
.sec-forms .fm-tile-name span { transition: opacity 120ms ease-out; }
.sec-forms .fm-tile-name .fm-tile-reset { position: absolute; left: 0; top: 0; opacity: 0; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.62); }
.sec-forms .fm-tile:hover .fm-tile-name .fm-tile-reset + .fm-tile-win, .sec-forms .fm-tile:hover .fm-tile-name .fm-tile-win:has(+ .fm-tile-reset) { opacity: 0; }
.sec-forms .fm-tile:hover .fm-tile-name .fm-tile-reset { opacity: 1; }
.sec-forms .fm-tile-val { font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; color: rgba(255,255,255,.92); line-height: 22px; }
.sec-forms .fm-tile-val i { font-style: normal; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.62); margin-left: 2px; }
.sec-forms .fm-tile-meter { height: 16px; margin: 8px 0; display: flex; align-items: center; }
.sec-forms .fm-tile-meter svg { display: block; }
.sec-forms .fm-tile-foot { height: 14px; font-size: 11px; font-weight: 500; line-height: 14px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.sec-forms .fm-tile-foot:empty { visibility: hidden; }
.sec-forms .fm-tile-pie { display: flex; align-items: center; gap: 14px; }
.sec-forms .fm-tile-pie svg { width: 56px; height: 56px; flex: none; }
.sec-forms .fm-tile-side { display: flex; flex-direction: column; gap: 2px; }
.sec-forms .fm-tile-numpage { display: flex; flex-direction: column; gap: 6px; }
.sec-forms .fm-tile.fm-wide .fm-tile-numpage { align-items: center; }
.sec-forms .fm-tile-line { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.72); }
.sec-forms .fm-tile-big { font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; font-size: 38px; font-weight: 700; line-height: 1; color: rgba(255,255,255,.92); }
.sec-forms .fm-tile-big i { font-style: normal; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.62); margin-left: 2px; }

/* Token 历史 page */
.sec-forms .fm-hist { position: absolute; left: 16px; top: 4px; right: 16px; }
.sec-forms .fm-hist-sum { display: flex; align-items: flex-end; gap: 28px; height: 40px; }
.sec-forms .fm-hist-lab { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55); line-height: 14px; }
.sec-forms .fm-hist-tot { font-family: var(--fm-rounded); font-size: 18px; font-weight: 700; line-height: 22px; color: #fff; }
.sec-forms .fm-hist-split { display: flex; gap: 10px; align-items: center; height: 22px; }
.sec-forms .fm-hist-split span { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm-rounded); font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); }
.sec-forms .fm-hist-split img { width: 12px; height: 12px; }
.sec-forms .fm-heat { margin-top: 12px; display: block; width: 737px; height: 114px; }
.sec-forms .fm-heat text { font-size: 11px; font-weight: 500; fill: rgba(255,255,255,.30); font-family: inherit; }

/* 当前会话 page */
.sec-forms .fm-sessions { position: absolute; left: 22px; right: 22px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 4px; }
.sec-forms .fm-srow { display: flex; align-items: center; height: 48px; padding: 0 10px; border-radius: 10px; gap: 10px; transition: background-color .15s ease-out; }
.sec-forms .fm-srow:hover { background: rgba(255,255,255,.06); }
.sec-forms .fm-srow-logo { width: 24px; display: grid; place-items: center; flex: none; }
.sec-forms .fm-srow-logo img { width: 20px; height: 20px; }
.sec-forms .fm-srow-t { flex: 1; min-width: 0; }
.sec-forms .fm-srow-title { display: block; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.94); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-forms .fm-srow-proj { display: block; font-size: 11.5px; color: rgba(255,255,255,.62); line-height: 14px; }
.sec-forms .fm-srow-state { min-width: 76px; flex: none; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.sec-forms .fm-srow-time { width: 64px; flex: none; text-align: right; font-size: 12px; color: rgba(255,255,255,.62); position: relative; }
.sec-forms .fm-srow-time span { transition: opacity 120ms ease-out; }
.sec-forms .fm-srow-time .fm-open-s { position: absolute; right: 0; top: 0; opacity: 0; font-weight: 600; color: rgba(255,255,255,.92); white-space: nowrap; }
.sec-forms .fm-srow:hover .fm-srow-time .fm-ago { opacity: 0; }
.sec-forms .fm-srow:hover .fm-srow-time .fm-open-s { opacity: 1; }
.sec-forms .st-work { color: #3DD68C; } .sec-forms .st-turn { color: #F5A524; } .sec-forms .st-done { color: rgba(255,255,255,.72); }
.sec-forms .fm-mark { width: 12px; height: 12px; display: grid; place-items: center; flex: none; }
.sec-forms .fm-mark svg { width: 12px; height: 12px; display: block; }

/* ─── Sidebar ─────────────────────────────────────────────────────────────────── */
.sec-forms .fm-sidebar { position: absolute; inset: 0; pointer-events: none; }
.sec-forms .fm-sb-rail { position: absolute; left: 0; top: 293px; width: 10px; height: 64px; background: #000; border-radius: 0 10px 10px 0; pointer-events: auto; overflow: hidden; outline: none; transition: width var(--fm-close), height var(--fm-close), top var(--fm-close), border-radius var(--fm-close); }
.sec-forms .fm-sb-rail:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.sec-forms .fm-sb-rail.is-open { width: 72px; height: 336px; top: 157px; border-radius: 0 12px 12px 0; transition: width var(--fm-open), height var(--fm-open), top var(--fm-open), border-radius var(--fm-open); }
.sec-forms .fm-sb-mark { position: absolute; left: 3.5px; top: 25px; width: 3px; height: 14px; border-radius: 2px; background: var(--fm-claude); animation: fm-breathe 1.6s ease-in-out infinite; transition: opacity 80ms ease-out; }
.sec-forms .fm-sb-mark.is-turn { background: #F5A524; height: 20px; top: 22px; animation: none; }
@keyframes fm-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sec-forms .fm-sb-rail.is-open .fm-sb-mark { opacity: 0; animation: none; }
.sec-forms .fm-sb-cells { position: absolute; left: 0; top: 0; width: 72px; height: 336px; opacity: 0; filter: blur(6px); transform: translateX(8px) scale(.96, .92); transform-origin: 0 50%; transition: opacity 80ms ease-out, filter 80ms ease-out, transform 80ms ease-out; }
.sec-forms .fm-sb-rail.is-open .fm-sb-cells { opacity: 1; filter: none; transform: none; transition: opacity var(--fm-content), filter var(--fm-content), transform var(--fm-content); }
.sec-forms .fm-cell { position: absolute; left: 6px; width: 60px; height: 70px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background-color .15s ease-out, transform 120ms ease-out; }
.sec-forms .fm-cell:hover { background: rgba(255,255,255,.07); }
.sec-forms .fm-cell.is-pin, .sec-forms .fm-cell.is-on { background: rgba(255,255,255,.10); }
.sec-forms .fm-cell:active { transform: scale(.94); }
.sec-forms .fm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sec-forms .fm-orb { position: relative; width: 44px; height: 44px; flex: none; }
.sec-forms .fm-orb svg { position: absolute; inset: 0; width: 44px; height: 44px; }
.sec-forms .fm-orb circle { fill: none; transition: stroke-dasharray 350ms ease-out; }
.sec-forms .fm-orb .fm-orb-mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; }
.sec-forms .fm-orb .fm-orb-mark img { display: block; width: 100%; height: 100%; }
.sec-forms .fm-orb .fm-orb-mark svg { position: static; width: 13px; height: 13px; }
.sec-forms .fm-badge { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #000; display: grid; place-items: center; transform: scale(.01); transition: transform 180ms ease-in; pointer-events: none; }
.sec-forms .fm-badge::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #F5A524; }
.sec-forms .fm-badge.is-on { transform: scale(1); transition: transform var(--fm-badge); }
.sec-forms .fm-badge.fm-badge-logo { width: 11px; height: 11px; right: -3px; top: -3px; }
.sec-forms .fm-badge.fm-badge-logo::after { width: 8px; height: 8px; }
.sec-forms .fm-badge.fm-badge-ring { right: -4px; top: -4px; }
.sec-forms .fm-badge.fm-badge-ball { width: 12px; height: 12px; right: 4px; top: 4px; }
.sec-forms .fm-badge.fm-badge-ball::after { width: 9px; height: 9px; }

/* Edge cards (shared by sidebar and ball) */
.sec-forms .fm-card { position: absolute; width: 300px; padding: 14px; border-radius: 16px; background: #0E0E0F; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #fff; opacity: 0; transform: scale(.97); pointer-events: none; transition: opacity var(--fm-close), transform var(--fm-close), top var(--fm-cardmove); visibility: hidden; }
.sec-forms .fm-card[data-tail="left"] { transform-origin: 0 50%; }
.sec-forms .fm-card[data-tail="right"] { transform-origin: 100% 50%; }
.sec-forms .fm-card.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity var(--fm-open), transform var(--fm-open), top var(--fm-cardmove); }
.sec-forms .fm-card-tail { position: absolute; top: 50%; width: 12px; height: 26px; margin-top: -13px; }
.sec-forms .fm-card[data-tail="left"] .fm-card-tail { left: -11.5px; }
.sec-forms .fm-card[data-tail="right"] .fm-card-tail { right: -11.5px; transform: scaleX(-1); }
.sec-forms .fm-card-tail path { fill: #0E0E0F; }
.sec-forms .is-glass .fm-card { background: rgb(22 22 23 / .82); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.sec-forms .is-glass .fm-card-tail path { fill: rgb(22 22 23 / .92); }
.sec-forms .fm-card-in { display: flex; flex-direction: column; gap: 12px; }
.sec-forms .fm-card-head { display: flex; align-items: center; gap: 8px; height: 20px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.94); }
.sec-forms .fm-card-head img { width: 18px; height: 18px; }
.sec-forms .fm-card-head .fm-card-kind { margin-left: auto; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.66); }
.sec-forms .fm-card-head.fm-verdict { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.95); }
.sec-forms .fm-card-head .fm-glyph { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.sec-forms .fm-card-head .fm-glyph svg { width: 11px; height: 11px; }
.sec-forms .fm-card-impact { font-size: 12px; color: rgba(255,255,255,.72); line-height: 16px; margin-top: -4px; }
.sec-forms .fm-qrows { display: flex; flex-direction: column; gap: 9px; }
.sec-forms .fm-qrow { height: 26px; }
.sec-forms .fm-qrow-line { display: flex; align-items: baseline; height: 16px; gap: 8px; }
.sec-forms .fm-qrow-name { font-size: 12px; color: rgba(255,255,255,.72); }
.sec-forms .fm-qrow-reset { font-size: 11px; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.sec-forms .fm-qrow-val { margin-left: auto; font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); }
.sec-forms .fm-bar4 { margin-top: 4px; height: 6px; display: flex; align-items: center; }
.sec-forms .fm-bar4 svg { display: block; width: 272px; height: 4px; }
.sec-forms .fm-csess { display: flex; flex-direction: column; gap: 2px; }
.sec-forms .fm-cs { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; transition: background-color .15s ease-out; position: relative; }
.sec-forms .fm-cs:hover { background: rgba(255,255,255,.06); }
.sec-forms .fm-cs .fm-mark { width: 16px; }
.sec-forms .fm-cs-t { min-width: 0; flex: 1; }
.sec-forms .fm-cs-title { display: block; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.94); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-forms .fm-cs-proj { display: block; font-size: 11px; color: rgba(255,255,255,.66); line-height: 14px; }
.sec-forms .fm-cs .fm-open-s { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92); opacity: 0; transition: opacity 120ms ease-out; white-space: nowrap; }
.sec-forms .fm-cs:hover .fm-open-s { opacity: 1; }
.sec-forms .fm-card-empty { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.66); }
.sec-forms .fm-gauges { display: flex; justify-content: space-around; padding: 2px 0; }
.sec-forms .fm-gauge { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.sec-forms .fm-gauge svg { position: absolute; inset: 0; width: 96px; height: 96px; }
.sec-forms .fm-gauge svg circle { fill: none; }
.sec-forms .fm-gauge-t { text-align: center; line-height: 1.1; }
.sec-forms .fm-gauge-t small { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.72); }
.sec-forms .fm-gauge-t b { display: block; font-family: var(--fm-rounded); font-size: 20px; font-weight: 600; color: #fff; }
.sec-forms .fm-mem { display: flex; align-items: center; gap: 12px; }
.sec-forms .fm-mem svg { display: block; flex: 1; height: 16px; }
.sec-forms .fm-mem b { font-family: var(--fm-rounded); font-size: 20px; font-weight: 600; color: #3DD68C; }
.sec-forms .fm-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.sec-forms .fm-fig small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.66); }
.sec-forms .fm-fig small i { width: 10px; height: 3px; border-radius: 2px; background: var(--c); }
.sec-forms .fm-fig b { display: block; margin-top: 2px; font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: #fff; line-height: 20px; }
.sec-forms .fm-fig b.fm-fig-s { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.72); white-space: nowrap; letter-spacing: -.01em; }
.sec-forms .fm-fig b.fm-big { font-size: 20px; }
.sec-forms .fm-kv { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.72); }
.sec-forms .fm-kv b { color: rgba(255,255,255,.94); font-weight: 600; }
.sec-forms .fm-cost-rows { display: flex; flex-direction: column; gap: 8px; }
.sec-forms .fm-cost-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.94); }
.sec-forms .fm-cost-row img { width: 16px; height: 16px; }
.sec-forms .fm-cost-row b { margin-left: auto; font-family: var(--fm-rounded); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ─── Floating ball ───────────────────────────────────────────────────────────── */
.sec-forms .fm-ball { position: absolute; inset: 0; pointer-events: none; }
.sec-forms .fm-ball-anchor { position: absolute; left: 1006px; top: 325px; width: 0; height: 0; }
.sec-forms .fm-ball-small { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transform: scale(.8462); transition: transform var(--fm-ballhover), box-shadow .15s ease-out, opacity 140ms ease-out 165ms; pointer-events: auto; outline: none; }
.sec-forms .fm-ball-small:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 2px var(--accent); }
.sec-forms .fm-ball-small:hover, .sec-forms .fm-ball-small.is-hover { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.sec-forms .fm-ball-small.is-turn { box-shadow: inset 0 0 0 2px #F5A524; }
.sec-forms .fm-ball.is-open .fm-ball-small { opacity: 0; transition: opacity 100ms ease-out; pointer-events: none; }
.sec-forms .fm-ball-face { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; transition: transform var(--fm-ballhover); }
.sec-forms .fm-ball-face img { width: 20px; height: 20px; display: block; }
.sec-forms .fm-ball-small:hover .fm-ball-face, .sec-forms .fm-ball-small.is-hover .fm-ball-face { transform: translateY(-6px); }
.sec-forms .fm-ball-glance { position: absolute; left: 50%; top: 50%; width: 44px; margin-left: -22px; margin-top: 6px; text-align: center; opacity: 0; transition: opacity 150ms ease-out; }
.sec-forms .fm-ball-small:hover .fm-ball-glance, .sec-forms .fm-ball-small.is-hover .fm-ball-glance { opacity: 1; }
.sec-forms .fm-ball-big { position: absolute; left: -94px; top: -94px; width: 188px; height: 188px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transform: translateX(0) scale(.234); opacity: 0; pointer-events: none; transition: transform var(--fm-close), opacity 0s linear var(--fm-closems, 490ms); }
.sec-forms .fm-ball.is-open .fm-ball-big { transform: translateX(var(--dx, 0px)) scale(1); opacity: 1; pointer-events: auto; transition: transform var(--fm-open), opacity 0s; }
.sec-forms .is-glass .fm-ball-small, .sec-forms .is-glass .fm-ball-big { background: rgb(22 22 23 / .82); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.sec-forms .fm-ring { position: absolute; inset: 0; opacity: 0; filter: blur(6px); transform: scale(.96, .92); transition: opacity 80ms ease-out, filter 80ms ease-out, transform 80ms ease-out; }
.sec-forms .fm-ball.is-open .fm-ring { opacity: 1; filter: none; transform: none; transition: opacity var(--fm-content), filter var(--fm-content), transform var(--fm-content); }
.sec-forms .fm-rorb { position: absolute; width: 60px; height: 64px; margin: -32px 0 0 -30px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 1px; }
.sec-forms .fm-rorb::before { content: ""; position: absolute; left: 50%; top: 24px; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: transparent; transition: background-color .15s ease-out; }
.sec-forms .fm-rorb:hover::before { background: rgba(255,255,255,.07); }
.sec-forms .fm-rorb.is-pin::before, .sec-forms .fm-rorb.is-on::before { background: rgba(255,255,255,.10); }
.sec-forms .fm-rorb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.sec-forms .fm-rorb .fm-orb { z-index: 1; }
.sec-forms .fm-rorb .fm-glance { position: relative; z-index: 1; line-height: 13px; }
.sec-forms .fm-rorb .fm-glance b { font-size: 13px; }
.sec-forms .fm-rorb .fm-glance i { font-size: 9px; }
.sec-forms .fm-ball-centre { position: absolute; left: 74px; top: 74px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background-color .15s ease-out, transform 120ms ease-out; }
.sec-forms .fm-ball-centre:hover { background: rgba(255,255,255,.14); }
.sec-forms .fm-ball-centre:active { transform: scale(.94); }
.sec-forms .fm-ball-centre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-forms .fm-ball-centre img { width: 18px; height: 18px; }

/* ─── Reminder card 轮到你了 ───────────────────────────────────────────────────── */
.sec-forms .fm-remind { position: absolute; width: 360px; padding: 16px; border-radius: 16px; background: #1E1E1F; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.10), 0 6px 28px rgba(0,0,0,.30); color: #fff; opacity: 0; transform: translate(var(--rx, 0px), var(--ry, -8px)); pointer-events: none; visibility: hidden; transition: opacity 180ms ease-in, transform 180ms ease-in, visibility 0s linear 180ms; }
.sec-forms .fm-remind.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity var(--fm-remind), transform var(--fm-remind), visibility 0s; }
.sec-forms .fm-remind-head { display: flex; align-items: center; gap: 8px; height: 20px; }
.sec-forms .fm-remind-logo { position: relative; width: 20px; height: 20px; }
.sec-forms .fm-remind-logo img { width: 20px; height: 20px; display: block; }
.sec-forms .fm-remind-logo::after { content: ""; position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 1.5px #1E1E1F; }
.sec-forms .fm-remind-title { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.96); }
.sec-forms .fm-remind-ago { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.55); }
.sec-forms .fm-remind-s { margin-top: 12px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.92); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-forms .fm-remind-p { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.62); line-height: 14px; }
.sec-forms .fm-remind-btns { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
.sec-forms .fm-remind-btns button { height: 28px; padding: 0 14px; border-radius: 8px; font-size: 13px; transition: background-color .15s ease-out, transform 120ms ease-out; }
.sec-forms .fm-remind-btns button:active { transform: scale(.97); }
.sec-forms .fm-remind-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-forms .fm-remind-ok { background: rgba(255,255,255,.10); color: rgba(255,255,255,.88); font-weight: 500; }
.sec-forms .fm-remind-ok:hover { background: rgba(255,255,255,.15); }
.sec-forms .fm-remind-go { background: rgba(255,255,255,.92); color: rgba(0,0,0,.88); font-weight: 600; }
.sec-forms .fm-remind-go:hover { background: #fff; }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sec-forms .fm-stage { grid-template-columns: 1fr; gap: 24px; }
  .sec-forms .fm-settings { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; }
  .sec-forms .fm-set-title, .sec-forms .fm-set-tabs, .sec-forms .fm-row-stack { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sec-forms .fm-stage { margin-top: 36px; }
  .sec-forms .fm-settings { grid-template-columns: 1fr; padding: 18px 8px 12px; }
  .sec-forms .fm-row { flex-wrap: wrap; row-gap: 8px; }
  .sec-forms .fm-tiles { grid-template-columns: repeat(4, 1fr); }
  .sec-forms .fm-screen { padding: 6px; border-radius: 16px; }
  .sec-forms .fm-view { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-forms .fm-spin, .sec-forms .fm-sb-mark, .sec-forms .fm-tb-sweep path { animation: none; }
  .sec-forms .fm-tb-sweep { display: none; }
  .sec-forms .fm-tb-panel, .sec-forms .fm-ring, .sec-forms .fm-sb-cells, .sec-forms .fm-card, .sec-forms .fm-remind, .sec-forms .fm-tb-peek { transition-delay: 0s !important; }
}

/* ja / ko (i18n stream, 2026-09-28): longer segment labels */
.sec-forms:lang(ja) .fm-seg [role="radio"] { min-width: 52px; padding: 0 8px; }
.sec-forms:lang(ko) .h-section { word-break: keep-all; }
.sec-forms:lang(ja) .h-section { word-break: auto-phrase; }

/* ===== personas ===== */
/* personas · 叭哥说-style three-card fan. Scoped to .sec-personas */
.sec-personas { overflow: hidden; }
.sec-personas .pfan { --card-w: clamp(360px, 30.5vw, 440px); --gap: 10px; --rot-out: 7deg; --tuck: 8px; display: flex; justify-content: center; align-items: flex-start; margin-top: clamp(48px, 6vw, 84px); padding: 24px 0 40px; perspective: 1400px; }
/* Slots are layout only; the rotated card itself is the hit target, so empty white between cards never triggers hover */
.sec-personas .pfan-slot { position: relative; flex: 0 0 var(--card-w); width: var(--card-w); margin-inline: calc(var(--gap) / 2); z-index: 1; pointer-events: none; }
.sec-personas .pfan-slot-l { --rot: calc(var(--rot-out) * -1); margin-top: 30px; }
.sec-personas .pfan-slot-r { --rot: var(--rot-out); margin-top: 30px; }
.sec-personas .pfan-slot-c { --rot: -1deg; z-index: 2; }
.sec-personas .pfan-slot:has(.pcard:hover), .sec-personas .pfan-slot:has(.pcard:focus-visible) { z-index: 3; }

.sec-personas .pcard { display: flex; flex-direction: column; border-radius: 30px; background: #fff; overflow: hidden; outline: 1px solid rgba(0,0,0,.06); outline-offset: -1px; pointer-events: auto;
  box-shadow: 0 30px 60px -34px rgba(20,24,40,.36), 0 6px 18px -8px rgba(20,24,40,.10);
  rotate: var(--rot); transform: translate(var(--px, 0px), var(--py, 0px)); transition: rotate .35s cubic-bezier(.2,.8,.2,1), translate .35s cubic-bezier(.2,.8,.2,1), scale .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; will-change: transform; }
.sec-personas .pfan:has(.pcard:hover) .pcard:not(:hover), .sec-personas .pfan:has(.pcard:focus-visible) .pcard:not(:focus-visible) { scale: .98; }
.sec-personas .pcard:hover, .sec-personas .pcard:focus-visible { rotate: 0deg; translate: 0 -14px; scale: 1.03; box-shadow: 0 44px 80px -36px rgba(20,24,40,.45), 0 10px 26px -10px rgba(20,24,40,.14); }
.sec-personas .pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.sec-personas .pcard-who { padding: 32px 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.sec-personas .pcard-warm .pcard-who { background: linear-gradient(160deg, #FFF1E8 0%, #FFE4D2 100%); }
.sec-personas .pcard-cool .pcard-who { background: linear-gradient(160deg, #EEF3FF 0%, #E3ECFF 100%); }
.sec-personas .pcard-violet .pcard-who { background: linear-gradient(160deg, #F3F0FF 0%, #ECE6FF 100%); }
.sec-personas .pcard-face { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 10px 24px -10px rgba(20,24,40,.35); }
.sec-personas .pcard-quote p { font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; text-wrap: balance; }
.sec-personas .pcard-by { margin-top: 12px; font-size: 16px; font-weight: 500; color: var(--ink-2); }

.sec-personas .pcard-scene { padding: 30px 28px 34px; display: flex; flex-direction: column; gap: 20px; }
/* The rotated corner of an outer card tucks under the centre card only inside this extra padding, never under text */
.sec-personas .pfan-slot-l .pcard-who, .sec-personas .pfan-slot-l .pcard-scene { padding-right: calc(28px + var(--tuck)); }
.sec-personas .pfan-slot-r .pcard-who, .sec-personas .pfan-slot-r .pcard-scene { padding-left: calc(28px + var(--tuck)); }
.sec-personas .pcard-title { font-size: clamp(22px, 1.75vw, 26px); line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); text-wrap: initial; }
.sec-personas .pcard-title span { display: block; text-wrap: balance; }
.sec-personas .pcard-title:lang(en) { font-size: clamp(20px, 1.6vw, 23px); letter-spacing: -0.015em; }
.sec-personas .pcard-quote p:lang(en) { font-size: 18px; }
.sec-personas .pcard-list { display: flex; flex-direction: column; gap: 10px; }
.sec-personas .pcard-list li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.5; color: var(--ink-2); font-weight: 500; text-wrap: pretty; }
.sec-personas .pcard-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.sec-personas .pcard-list li::after { content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); }
.sec-personas .pcard-list li::before { z-index: 1; }

/* Flipped card (centre): scene on top, quote below */
.sec-personas .pcard-flip .pcard-scene { padding-top: 38px; }

/* Tablet: shrink cards and flatten the fan to keep it on one row */
@media (max-width: 1260px) {
  .sec-personas .pfan { --card-w: clamp(300px, 29.5vw, 396px); --rot-out: 5deg; --tuck: 6px; }
  .sec-personas .pcard-by { text-wrap: balance; }
  .sec-personas .pcard-title { font-size: clamp(21px, 1.75vw, 26px); }
  .sec-personas .pcard-title:lang(en) { font-size: clamp(19px, 1.6vw, 23px); }
  .sec-personas .pcard-quote p { font-size: 18px; }
  .sec-personas .pcard-who, .sec-personas .pcard-scene { padding-inline: 24px; }
  .sec-personas .pfan-slot-l .pcard-who, .sec-personas .pfan-slot-l .pcard-scene { padding-right: calc(24px + var(--tuck)); }
  .sec-personas .pfan-slot-r .pcard-who, .sec-personas .pfan-slot-r .pcard-scene { padding-left: calc(24px + var(--tuck)); }
  .sec-personas .pcard-list li { font-size: 16px; }
}
/* Narrow tablet: the fan may run a little past the 1200 wrap (never the gutters); flatter tilt, no tuck needed at 4° */
@media (max-width: 1100px) {
  .sec-personas .pfan { --card-w: clamp(300px, 31vw, 396px); --rot-out: 4deg; --tuck: 0px; }
  .sec-personas .pcard-who, .sec-personas .pcard-scene, .sec-personas .pfan-slot-l .pcard-who, .sec-personas .pfan-slot-l .pcard-scene, .sec-personas .pfan-slot-r .pcard-who, .sec-personas .pfan-slot-r .pcard-scene { padding-inline: 22px; }
}

/* Phone: a column, no fan */
@media (max-width: 760px) {
  .sec-personas .pfan { flex-direction: column; align-items: stretch; gap: 20px; padding: 8px 0 0; margin-top: 40px; --card-w: auto; }
  .sec-personas .pfan-slot { flex: none; width: auto; margin: 0 !important; }
  .sec-personas .pcard { transform: none !important; }
  .sec-personas .pfan-slot-l, .sec-personas .pfan-slot-c, .sec-personas .pfan-slot-r { --rot: 0deg; }
  .sec-personas .pcard:hover, .sec-personas .pcard:focus-visible { translate: 0 -4px; scale: 1; }
  .sec-personas .pfan:has(.pcard:hover) .pcard:not(:hover), .sec-personas .pfan:has(.pcard:focus-visible) .pcard:not(:focus-visible) { scale: 1; }
  .sec-personas .pcard-who, .sec-personas .pfan-slot-l .pcard-who, .sec-personas .pfan-slot-r .pcard-who { padding: 26px 22px 24px; }
  .sec-personas .pcard-scene, .sec-personas .pfan-slot-l .pcard-scene, .sec-personas .pfan-slot-r .pcard-scene { padding: 24px 22px 28px; }
  .sec-personas .pcard-title { font-size: 21px; }
  .sec-personas .pcard-title:lang(en) { font-size: 21px; }
  .sec-personas .pcard-quote p { font-size: 18px; }
  .sec-personas .pcard-list li { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-personas .pcard { transition: none; }
}

/* i18n · ja/ko line breaking */
.sec-personas:lang(ja) .h-section, .sec-personas:lang(ja) .pcard-title, .sec-personas:lang(ja) .pcard-quote p { word-break: auto-phrase; }
.sec-personas:lang(ko) .h-section, .sec-personas:lang(ko) .pcard-title, .sec-personas:lang(ko) .pcard-quote p, .sec-personas:lang(ko) .pcard-list li, .sec-personas:lang(ko) .pcard-by { word-break: keep-all; overflow-wrap: anywhere; }

/* ===== privacy ===== */
/* privacy · left title + three expandable fact cards, right a real capture on a pale panel. Scoped to .sec-privacy */
.sec-privacy .privacy-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sec-privacy .privacy-h { text-align: left; text-wrap: initial; font-size: clamp(34px, 3.6vw, 50px); }
.sec-privacy .privacy-h:lang(en) { font-size: clamp(32px, 2.7vw, 39px); }
.sec-privacy .privacy-grid:has(.privacy-h:lang(en)) { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); }
.sec-privacy .privacy-items { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }

.sec-privacy .privacy-item { border-radius: 22px; background: var(--fill); transition: background-color .25s ease, box-shadow .32s var(--ease-out), translate .32s var(--ease-spring); }
.sec-privacy .privacy-item.is-open { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -30px rgba(20,24,40,.32), 0 2px 8px rgba(20,24,40,.04); }
.sec-privacy .privacy-item:not(.is-open):hover { background: #efeff1; translate: 0 -2px; }
.sec-privacy .privacy-q { font-size: inherit; font-weight: inherit; }
.sec-privacy .privacy-btn { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 16px 20px 16px 22px; border: 0; border-radius: 22px; background: transparent; text-align: left; cursor: pointer; }
.sec-privacy .privacy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 22px; }
.sec-privacy .privacy-n { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.sec-privacy .is-open .privacy-n { color: var(--accent); }
.sec-privacy .privacy-t { font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.sec-privacy .privacy-chev { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(43,43,43,.10); transition: rotate .35s var(--ease-toggle), background-color .2s ease; }
.sec-privacy .is-open .privacy-chev { background: var(--ink); rotate: 180deg; }
.sec-privacy .privacy-chev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); translate: -50% -70%; rotate: 45deg; transition: border-color .2s ease; }
.sec-privacy .is-open .privacy-chev::before { border-color: #fff; }

.sec-privacy .privacy-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2,.9,.25,1.05); }
.sec-privacy .privacy-panel[hidden] { display: grid; }
.sec-privacy .is-open .privacy-panel { grid-template-rows: 1fr; }
.sec-privacy .privacy-panel-in { min-height: 0; overflow: hidden; visibility: visible; transition: visibility 0s; }
.sec-privacy .privacy-item:not(.is-open) .privacy-panel-in { visibility: hidden; transition: visibility 0s .42s; }
.sec-privacy .privacy-panel-in p { padding: 0 24px 22px 70px; font-size: 17px; line-height: 1.6; color: var(--ink-2); font-weight: 500; opacity: 0; translate: 0 -6px; transition: opacity .24s ease, translate .24s var(--ease-out); }
.sec-privacy .is-open .privacy-panel-in p { opacity: 1; translate: 0 0; transition-delay: .12s; }

.sec-privacy .privacy-stage { position: relative; border-radius: 30px; background: var(--panel); padding: clamp(20px, 2.6vw, 36px); overflow: visible; }
.sec-privacy .privacy-stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); pointer-events: none; }
.sec-privacy .privacy-shots { position: relative; aspect-ratio: 3 / 2; }
.sec-privacy .privacy-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; scale: .985; translate: 0 8px; filter: drop-shadow(0 30px 40px rgba(20,24,40,.22)); transition: opacity .32s ease, scale .42s var(--ease-out), translate .42s var(--ease-out); pointer-events: none; }
.sec-privacy .privacy-shot.is-on { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }

@media (max-width: 1100px) {
  .sec-privacy .privacy-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
  .sec-privacy .privacy-t { font-size: 18px; }
}
@media (max-width: 860px) {
  .sec-privacy .privacy-grid { grid-template-columns: 1fr; gap: 36px; }
  .sec-privacy .privacy-h { text-align: center; }
  .sec-privacy .privacy-items { margin-top: 28px; }
  .sec-privacy .privacy-btn { grid-template-columns: 30px 1fr 28px; padding: 14px 16px 14px 18px; min-height: 58px; }
  .sec-privacy .privacy-t { font-size: 18px; }
  .sec-privacy .privacy-panel-in p { padding: 0 18px 20px 62px; font-size: 16px; }
  .sec-privacy .privacy-stage { padding: 16px; border-radius: 22px; }
  .sec-privacy .privacy-shot { filter: drop-shadow(0 16px 24px rgba(20,24,40,.2)); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-privacy .privacy-panel, .sec-privacy .privacy-shot, .sec-privacy .privacy-chev, .sec-privacy .privacy-panel-in p { transition: none; }
}

/* i18n · ja/ko line breaking */
.sec-privacy:lang(ja) .privacy-h, .sec-privacy:lang(ja) .privacy-t { word-break: auto-phrase; }
.sec-privacy:lang(ko) .privacy-h, .sec-privacy:lang(ko) .privacy-t, .sec-privacy:lang(ko) .privacy-panel-in p { word-break: keep-all; overflow-wrap: anywhere; }

/* ===== pricing ===== */
/* pricing · 个人版 | 团队版 segmented (Vela spec) → two card groups in place; 按月 | 按年 inside 个人版 with a hand-drawn 送 4 个月 sticker */
.sec-pricing { scroll-margin-top: 88px; }
.sec-pricing .h-section { margin-bottom: 36px; }

/* Segmented toggle: 316×56, #F0F1F4 track, white thumb, 0.3s ease-toggle */
.sec-pricing .pr-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 316px; height: 56px; padding: 5px; margin: 0 auto; border-radius: 999px; background: #F0F1F4; isolation: isolate; }
.sec-pricing .pr-seg::before { content: ""; position: absolute; inset: 5px auto 5px 5px; width: calc(50% - 5px); border-radius: 999px; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05); transition: translate 0.3s var(--ease-toggle); z-index: 0; }
.sec-pricing .pr-seg[data-plan="team"]::before { translate: 100% 0; }
.sec-pricing .pr-seg-btn { position: relative; z-index: 1; height: 46px; border: 0; background: none; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: color 0.2s ease; }
.sec-pricing .pr-seg-btn[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.sec-pricing .pr-seg-btn:focus-visible { outline-offset: -3px; border-radius: 999px; }

/* Stage: both panels stacked; JS animates the height between them */
.sec-pricing .pr-stage { position: relative; margin-top: 40px; transition: height 0.42s var(--ease-out); }
.sec-pricing .pr-stage.is-animating { clip-path: inset(-40px 0 0 0); }
.sec-pricing .pr-panel { opacity: 1; translate: 0 0; transition: opacity 0.24s ease, translate 0.24s var(--ease-out); }
.sec-pricing .pr-panel.is-leaving { position: absolute; inset: 0 0 auto 0; opacity: 0; translate: 0 8px; pointer-events: none; }
.sec-pricing .pr-panel.is-entering { opacity: 0; translate: 0 8px; }

/* 按月 | 按年 with the sticker */
.sec-pricing .pr-billing-row { display: flex; justify-content: center; margin-bottom: 44px; }
.sec-pricing .pr-billing { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 208px; height: 46px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; }
.sec-pricing .pr-billing::before { content: ""; position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px); border-radius: 999px; background: #141414; transition: translate 0.3s var(--ease-toggle); }
.sec-pricing .pr-billing[data-billing="yearly"]::before { translate: 100% 0; }
.sec-pricing .pr-billing-btn { position: relative; z-index: 1; height: 36px; border: 0; background: none; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; transition: color 0.2s ease; }
.sec-pricing .pr-billing-btn[aria-pressed="true"] { color: #fff; font-weight: 700; }
.sec-pricing .pr-billing-btn:focus-visible { outline-offset: -3px; border-radius: 999px; }
.sec-pricing .pr-sticker { position: absolute; left: calc(100% - 62px); top: -12px; display: flex; align-items: flex-start; pointer-events: none; white-space: nowrap; }
.sec-pricing .pr-sticker-arrow { flex: none; width: 100px; height: 62px; }
.sec-pricing .pr-sticker-text { display: inline-block; margin: 38px 0 0 -10px; padding: 5px 12px 6px; border-radius: 12px 14px 12px 15px / 14px 12px 15px 12px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; rotate: -7deg; box-shadow: 0 8px 18px -10px rgba(234, 67, 35, 0.7); transform-origin: left center; }
.sec-pricing .pr-billing[data-billing="yearly"] .pr-sticker-text { animation: pr-sticker-pop 0.45s var(--ease-spring); }
@keyframes pr-sticker-pop { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }

/* Cards: flanks share one stretched row; Pro protrudes 28px equally above and below */
.sec-pricing .pr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.sec-pricing .pr-card { position: relative; display: flex; flex-direction: column; padding: 36px 32px 32px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(20, 24, 40, 0.03); transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .sec-pricing .pr-card:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); } }
.sec-pricing .pr-card-featured { margin-block: -28px; padding: 44px 32px 36px; background: #141414; color: #fff; border-color: #141414; background-image: radial-gradient(90% 70% at 100% 100%, rgba(255, 107, 33, 0.55), rgba(255, 107, 33, 0) 70%); box-shadow: var(--shadow-card); }
.sec-pricing .pr-badge { position: absolute; top: 22px; right: 22px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; }
.sec-pricing .pr-name { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.sec-pricing .pr-price { position: relative; display: flex; align-items: baseline; gap: 4px; margin-top: 18px; line-height: 1; }
.sec-pricing .pr-cur { font-size: 22px; font-weight: 700; align-self: flex-start; margin-top: 8px; }
.sec-pricing .pr-num { font-size: 54px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; min-width: 1.1ch; }
.sec-pricing .pr-per { margin-left: 6px; font-size: 17px; font-weight: 600; }
.sec-pricing .pr-quote { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.sec-pricing .pr-annual { height: 0; margin-top: 8px; overflow: hidden; opacity: 0; translate: 0 6px; font-size: 16px; font-weight: 700; color: var(--accent-glow); transition: height 0.3s var(--ease-out), opacity 0.3s ease, translate 0.3s var(--ease-out); }
.sec-pricing .pr-panel[data-billing="yearly"] .pr-annual { height: 22px; opacity: 1; translate: 0 0; }
.sec-pricing .pr-list { display: grid; gap: 12px; margin-top: 26px; font-size: 17px; line-height: 1.45; }
.sec-pricing .pr-list li { position: relative; padding-left: 28px; text-wrap: pretty; }
.sec-pricing .nb { white-space: nowrap; }
.sec-pricing .pr-list li::before { content: ""; position: absolute; left: 0; top: 0.22em; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23FF6B21' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l4 4 8-8.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec-pricing .pr-cta { width: 100%; margin-top: auto; }
.sec-pricing .pr-list { margin-bottom: 30px; }
.sec-pricing .pr-cta-light { background: #fff; color: #141414; }
.sec-pricing .pr-cta-light:hover { background: var(--accent-soft); }

/* Hand-drawn ember ellipse around the Pro price: draws itself when 按年 is chosen */
.sec-pricing .pr-price-ring { position: absolute; left: -16px; top: -16px; width: 132px; height: 72px; pointer-events: none; }
.sec-pricing .pr-price-ring svg { width: 100%; height: 100%; overflow: visible; }
.sec-pricing .pr-price-ring path { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 0.9s var(--ease-out) 0.1s; }
.sec-pricing .pr-panel[data-billing="yearly"] .pr-price-ring path { stroke-dashoffset: 0; }
.sec-pricing .pr-num.is-ticking { color: var(--accent-glow); transition: color 0.3s ease; }

/* Team: two large selectable cards */
.sec-pricing .pr-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin: 0 auto; }
.sec-pricing .pr-tcard { position: relative; display: flex; flex-direction: column; padding: 40px 36px 36px; border-radius: 30px; background: var(--fill); border: 1px solid transparent; cursor: pointer; transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), background-color 0.24s ease, border-color 0.24s ease; }
.sec-pricing .pr-tcard.is-selected { background: #fff; border-color: rgba(255, 107, 33, 0.7); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-card); }
@media (hover: hover) and (pointer: fine) { .sec-pricing .pr-tcard:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); } .sec-pricing .pr-tcard.is-selected:hover { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lift); } }
.sec-pricing .pr-chip { position: absolute; top: -14px; right: 28px; padding: 6px 12px 7px; background: #2a2a2c; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; border-radius: 10px 10px 10px 2px; rotate: 2deg; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.sec-pricing .pr-tcard .pr-list { font-size: 18px; }
.sec-pricing .pr-tcard .pr-cta { align-self: flex-start; width: auto; min-width: 180px; margin-top: 32px; }
.sec-pricing .pr-tcard .pr-per { font-size: 17px; }

@media (max-width: 1140px) and (min-width: 961px) {
  .sec-pricing .pr-card { padding: 32px 26px 28px; }
  .sec-pricing .pr-card-featured { padding: 40px 26px 32px; }
  .sec-pricing .pr-list { font-size: 16px; gap: 10px; }
  .sec-pricing .pr-num { font-size: 50px; }
}
@media (max-width: 960px) {
  .sec-pricing .pr-cards { grid-template-columns: 1fr; max-width: 440px; gap: 18px; }
  .sec-pricing .pr-card-featured { order: -1; margin-block: 0; }
  .sec-pricing .pr-team { grid-template-columns: 1fr; max-width: 440px; }
}
@media (max-width: 560px) {
  .sec-pricing .pr-card, .sec-pricing .pr-tcard { padding: 30px 24px 26px; border-radius: 26px; }
  .sec-pricing .pr-card-featured { padding: 34px 24px 28px; }
  .sec-pricing .pr-billing-row { margin-bottom: 64px; }
  .sec-pricing .pr-sticker { left: calc(50% + 24px); top: calc(100% - 10px); }
  .sec-pricing :lang(en) .pr-sticker, .sec-pricing .pr-sticker:lang(en) { left: calc(50% - 12px); }
  .sec-pricing .pr-sticker-arrow { width: 68px; height: 42px; }
  .sec-pricing .pr-sticker-text { margin: 24px 0 0 -8px; padding: 4px 10px 5px; font-size: 14px; }
  .sec-pricing .pr-num { font-size: 48px; }
  .sec-pricing .pr-tcard .pr-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-pricing .pr-price-ring path { transition: none; }
  .sec-pricing .pr-billing[data-billing="yearly"] .pr-sticker-text { animation: none; }
}

/* i18n · ja/ko line breaking */
.sec-pricing:lang(ja) .pr-list li { word-break: auto-phrase; }
.sec-pricing:lang(ko) .pr-list li, .sec-pricing:lang(ko) .pr-name, .sec-pricing:lang(ko) .pr-quote { word-break: keep-all; overflow-wrap: anywhere; }

/* ===== faq ===== */
/* faq · six separate cards, one open at a time, height spring, + rotates into × */
.sec-faq .h-section { margin-bottom: 40px; }
.sec-faq .faq-list { display: grid; gap: 12px; max-width: 840px; margin: 0 auto; }
.sec-faq .faq-card { border-radius: 20px; background: var(--fill); transition: background-color 0.24s ease, box-shadow 0.32s var(--ease-out), translate 0.32s var(--ease-spring); }
.sec-faq .faq-card.is-open { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
@media (hover: hover) and (pointer: fine) { .sec-faq .faq-card:not(.is-open):hover { background: #ededef; } }
.sec-faq .faq-q { font-size: inherit; font-weight: inherit; }
.sec-faq .faq-btn > span:first-child { text-wrap: pretty; }
.sec-faq .nb { white-space: nowrap; }
.sec-faq .faq-btn { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 72px; padding: 20px 24px 20px 28px; border: 0; background: none; border-radius: 20px; text-align: left; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--ink); cursor: pointer; }
.sec-faq .faq-btn:focus-visible { outline-offset: -4px; border-radius: 20px; }
.sec-faq .faq-x { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(43, 43, 43, 0.10); transition: rotate 0.36s var(--ease-spring), background-color 0.24s ease; }
.sec-faq .faq-x::before, .sec-faq .faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; border-radius: 2px; background: var(--ink); translate: -50% -50%; }
.sec-faq .faq-x::after { rotate: 90deg; }
.sec-faq .faq-card.is-open .faq-x { rotate: 45deg; background: var(--accent); }
.sec-faq .faq-card.is-open .faq-x::before, .sec-faq .faq-card.is-open .faq-x::after { background: #fff; }
.sec-faq .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease-spring); }
.sec-faq .faq-card.is-open .faq-a { grid-template-rows: 1fr; }
.sec-faq .faq-a-in { min-height: 0; overflow: hidden; opacity: 0; translate: 0 -4px; transition: opacity 0.28s ease, translate 0.36s var(--ease-out); }
.sec-faq .faq-card.is-open .faq-a-in { opacity: 1; translate: 0 0; }
.sec-faq .faq-a p { padding: 0 72px 24px 28px; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.sec-faq .faq-more { margin-top: 32px; text-align: center; }
.sec-faq .faq-more-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 18px; font-weight: 700; color: var(--ink); transition: background-color 0.2s ease, translate 0.32s var(--ease-spring); }
.sec-faq .faq-more-link span { transition: translate 0.32s var(--ease-spring); }
.sec-faq .faq-more-link:hover { background: var(--accent-soft); }
.sec-faq .faq-more-link:hover span { translate: 4px 0; }
@media (max-width: 560px) {
  .sec-faq .faq-btn { padding: 18px 18px 18px 22px; font-size: 18px; min-height: 64px; }
  .sec-faq .faq-a p { padding: 0 22px 22px 22px; font-size: 17px; }
}

/* i18n · ja/ko line breaking */
.sec-faq:lang(ja) .faq-btn > span:first-child { word-break: auto-phrase; }
.sec-faq:lang(ko) .faq-btn > span:first-child, .sec-faq:lang(ko) .faq-a-in p { word-break: keep-all; overflow-wrap: anywhere; }

/* ===== closing ===== */
/* closing · big soft-gradient card, the mark + H2 + 下载, real UI pieces floating around and following the pointer with damping */
.sec-closing { padding-top: calc(var(--sec-pad) * 0.6); }
.sec-closing .cl-card { position: relative; min-height: 600px; padding: 120px 40px; border-radius: 40px; background: linear-gradient(135deg, #FFF4EC 0%, #F9F4F2 45%, #F3F5FB 100%); overflow: visible; isolation: isolate; }
.sec-closing .cl-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 50% 100%, rgba(255, 182, 58, 0.18), rgba(255, 182, 58, 0) 70%); pointer-events: none; }
.sec-closing .cl-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-closing .cl-mark { width: 72px; height: 72px; filter: drop-shadow(0 10px 18px rgba(20, 24, 40, 0.18)); }
.sec-closing .cl-title { margin-top: 28px; }
.sec-closing .cl-btn { margin-top: 36px; min-height: 56px; padding: 0 40px; font-size: 18px; }

/* Floating pieces: outer = damped pointer parallax (JS sets --px/--py), inner = slow float loop */
.sec-closing .cl-piece { position: absolute; z-index: 1; --px: 0px; --py: 0px; translate: var(--px) var(--py); will-change: translate; pointer-events: none; }
.sec-closing .cl-float { animation: cl-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite; }
.sec-closing .cl-piece img { width: auto; height: auto; }
.sec-closing .cl-piece-topbar { left: 5%; top: -30px; }
.sec-closing .cl-piece-topbar img { width: 381px; filter: drop-shadow(0 22px 28px rgba(20, 24, 40, 0.22)); rotate: -4deg; }
.sec-closing .cl-piece-reminder { right: 4%; top: -26px; }
.sec-closing .cl-piece-reminder img { width: 340px; rotate: 6deg; }
.sec-closing .cl-piece-sidebar { left: 3.5%; bottom: -22px; }
.sec-closing .cl-piece-sidebar img { width: 300px; rotate: 5deg; filter: drop-shadow(0 26px 30px rgba(20, 24, 40, 0.24)); }
.sec-closing .cl-piece-ball { right: 3.5%; bottom: -18px; }
.sec-closing .cl-ballcard { display: flex; align-items: center; gap: 2px; rotate: -4deg; }
.sec-closing .cl-piece .cl-netcard { width: 280px; filter: drop-shadow(0 22px 28px rgba(20, 24, 40, 0.22)); }
.sec-closing .cl-piece .cl-ball { width: 72px; filter: drop-shadow(0 12px 16px rgba(20, 24, 40, 0.28)); }
@keyframes cl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--amp, 8px) * -1); } }

@media (max-width: 1100px) {
  .sec-closing .cl-piece-topbar img { width: 300px; }
  .sec-closing .cl-piece-reminder img { width: 280px; }
  .sec-closing .cl-piece-sidebar img { width: 240px; }
  .sec-closing .cl-piece .cl-netcard { width: 230px; }
  .sec-closing .cl-piece .cl-ball { width: 60px; }
}
@media (max-width: 900px) {
  .sec-closing .cl-card { min-height: 0; padding: 220px 24px 210px; border-radius: 32px; overflow: hidden; }
  .sec-closing .cl-piece-topbar { left: 50%; top: 44px; width: min(320px, 80vw); translate: calc(-50% + var(--px)) var(--py); }
  .sec-closing .cl-piece-topbar img { width: 100%; rotate: 0deg; }
  .sec-closing .cl-piece-reminder { right: auto; left: 50%; top: auto; bottom: 36px; width: min(300px, 76vw); translate: calc(-50% + var(--px)) var(--py); }
  .sec-closing .cl-piece-reminder img { width: 100%; rotate: 0deg; }
  .sec-closing .cl-piece-sidebar, .sec-closing .cl-piece-ball { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-closing .cl-float { animation: none; }
}

/* i18n · ja/ko line breaking */
.sec-closing:lang(ja) .cl-title { word-break: auto-phrase; }
.sec-closing:lang(ko) .cl-title { word-break: keep-all; }

/* ===== work ===== */
/* work · looptend Work team page. Everything scoped under body.page-work */

body.page-work .sec-work-hero { padding-top: clamp(150px, 18vw, 190px); padding-bottom: clamp(72px, 8vw, 110px); overflow: hidden; }
body.page-work .wk-hero-copy { text-align: center; }
body.page-work .wk-hero-copy .h-hero { white-space: nowrap; }
body.page-work .wk-tagline { margin-top: 20px; font-size: 21px; font-weight: 500; color: var(--ink-2); }
body.page-work .wk-hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }

/* Shared annotation pieces: dark tag with one sharp corner, hand-drawn arrows, numbered badge */
body.page-work .wk-tag { display: inline-block; padding: 7px 12px 8px; border-radius: 10px 10px 10px 3px; background: #2a2a2c; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(20, 24, 40, 0.5); }
body.page-work .wk-arrow { position: absolute; width: 120px; height: 60px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 4; pointer-events: none; }
body.page-work .wk-num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: -0.02em; box-shadow: 0 2px 6px rgba(43, 43, 43, 0.14), 0 0 0 1px var(--line); }
body.page-work .wk-role { display: inline-block; min-width: 36px; padding: 3px 8px; border-radius: 7px; background: #EDEDF0; color: #2e3138; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; white-space: nowrap; }

/* ---------- Hero stage: report in the centre, two side cards, arrows ---------- */
body.page-work .wk-stage { position: relative; width: min(1180px, 100%); margin: 72px auto 0; display: grid; grid-template-columns: minmax(280px, 1fr) 600px minmax(280px, 1fr); align-items: center; }
body.page-work .wk-report-wrap { grid-column: 2; position: relative; z-index: 2; will-change: transform; }
body.page-work .wk-side { position: relative; z-index: 3; will-change: transform; }
body.page-work .wk-side-l { grid-column: 1; justify-self: end; margin-right: -24px; align-self: center; }
body.page-work .wk-side-r { grid-column: 3; justify-self: start; margin-left: -24px; align-self: center; }
body.page-work .wk-side > .wk-tag { position: absolute; top: -18px; left: 18px; z-index: 2; }
body.page-work .wk-side-r > .wk-tag { left: auto; right: 18px; }
body.page-work .wk-arrow-l { right: 8px; top: -66px; transform: rotate(-8deg); }
body.page-work .wk-arrow-r { left: 8px; bottom: -66px; transform: rotate(-8deg); }

/* heartbeat loop (PaywallPro cadence: 2.5s ripple) */
@keyframes wk-swell { 0% { scale: 1; } 20% { scale: 1.014; } 40% { scale: 1; } 44% { scale: 0.998; } 55% { scale: 1; } 100% { scale: 1; } }
@keyframes wk-press { 0% { scale: 1; } 13% { scale: 0.965; } 26% { scale: 1; } 100% { scale: 1; } }
body.page-work .wk-report { animation: wk-swell 2.5s ease-in-out infinite; }
body.page-work .wk-side-l .wk-confirm { animation: wk-press 2.5s ease-in-out 0.9s infinite; }
body.page-work .wk-side-r .wk-chat { animation: wk-press 2.5s ease-in-out 1.3s infinite; }

/* team weekly report (light, App report card style) */
body.page-work .wk-report { position: relative; background: #fff; border-radius: 22px; box-shadow: var(--shadow-window), inset 0 0 0 1px rgba(0, 0, 0, 0.06); padding: 26px 40px 22px; color: #141414; font-size: 14px; line-height: 1.45; }
body.page-work .wk-report-head { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; margin-bottom: 18px; }
body.page-work .wk-report-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; }
body.page-work .wk-report-brand b { font-weight: 700; }
body.page-work .wk-report-brand span { font-weight: 600; color: #6b6e76; font-size: 15px; margin-left: 2px; }
body.page-work .wk-report-meta { grid-column: 1; display: flex; gap: 10px; margin-top: 4px; font-size: 13px; color: #6b6e76; font-weight: 500; }
body.page-work .wk-confirmed { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 999px; background: #EAF9F0; color: #1f8f56; font-weight: 700; font-size: 13px; }
body.page-work .wk-confirmed i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: #3DD68C; color: #fff; display: grid; place-items: center; font-size: 11px; }
body.page-work .wk-members { display: grid; gap: 10px; }
body.page-work .wk-member { display: grid; grid-template-columns: auto 1fr 24px; align-items: start; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 14px; background: #F6F6F8; }
body.page-work .wk-member-who { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
body.page-work .wk-member-label { display: block; font-size: 12px; font-weight: 600; color: #6b6e76; margin-bottom: 4px; }
body.page-work .wk-member-body ul { display: grid; gap: 3px; }
body.page-work .wk-member-body li { position: relative; padding-left: 14px; font-weight: 500; }
body.page-work .wk-member-body li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #3DD68C; }
body.page-work .wk-member-ok { width: 22px; height: 22px; border-radius: 50%; background: #EAF9F0; color: #1f8f56; font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 2px; }
body.page-work .wk-report-foot { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: #FFF1E8; }
body.page-work .wk-foot-label { font-size: 13px; font-weight: 600; color: #7a3a16; }
body.page-work .wk-foot-num { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #141414; }
body.page-work .wk-foot-bars { display: flex; gap: 4px; height: 8px; }
body.page-work .wk-foot-bars i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--accent); opacity: 0.9; }
body.page-work .wk-foot-bars i:nth-child(2) { opacity: 0.6; }
body.page-work .wk-foot-bars i:nth-child(3) { opacity: 0.35; }
body.page-work .wk-foot-token { font-size: 13px; font-weight: 600; color: #7a3a16; }

/* dark confirmation card (App reminder-card style) */
body.page-work .wk-confirm { width: 304px; padding: 16px 18px 16px; border-radius: 22px; background: #1c1c1d; color: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 6px 16px -8px rgba(0, 0, 0, 0.5); font-size: 13.5px; line-height: 1.4; }
body.page-work .wk-confirm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; }
body.page-work .wk-confirm-head b { font-weight: 700; }
body.page-work .wk-confirm-head span { margin-left: auto; color: #9a9da2; font-size: 12px; }
body.page-work .wk-confirm ul { display: grid; gap: 6px; }
body.page-work .wk-confirm li { position: relative; padding-left: 16px; color: #e8e8ea; }
body.page-work .wk-confirm li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #3DD68C; }
body.page-work .wk-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
body.page-work .wk-btn-dark, body.page-work .wk-btn-light { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: 11px; font-size: 13.5px; font-weight: 700; }
body.page-work .wk-btn-dark { background: #3a3a3c; color: #fff; }
body.page-work .wk-btn-light { background: #fff; color: #111; position: relative; }

/* team chat card */
body.page-work .wk-chat { width: 304px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(20, 24, 40, 0.45), 0 6px 16px -8px rgba(20, 24, 40, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06); display: grid; gap: 10px; font-size: 13.5px; line-height: 1.4; color: #141414; }
body.page-work .wk-chat-row { display: flex; align-items: flex-start; gap: 10px; }
body.page-work .wk-chat-row-me { justify-content: flex-end; }
body.page-work .wk-chat-avatar { flex: 0 0 34px; border-radius: 10px; background: #F6F6F8; padding: 4px; }
body.page-work .wk-chat-bubble { padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #F3F4F6; max-width: 244px; }
body.page-work .wk-chat-bubble p { white-space: nowrap; }
body.page-work .wk-chat-bubble b { display: block; font-size: 12.5px; color: #6b6e76; margin-bottom: 2px; }
body.page-work .wk-chat-bubble p { font-weight: 600; }
body.page-work .wk-chat-file { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); }
body.page-work .wk-chat-file i { width: 18px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, #FF6B21, #EA4323); }
body.page-work .wk-chat-me { background: var(--accent); color: #fff; border-radius: 14px 4px 14px 14px; font-weight: 600; }

/* ---------- Pain: three numbered cards, each with a concrete object ---------- */
body.page-work .wk-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
body.page-work .wk-pain { border: 1px solid var(--line); border-radius: 30px; padding: 26px 26px 26px; background: #fff; transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.page-work .wk-pain:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); } }
body.page-work .wk-pain-text { display: flex; align-items: center; gap: 12px; min-height: 60px; font-size: 20px; line-height: 1.5; color: var(--ink); }
body.page-work .wk-pain-text b { font-weight: 700; }
body.page-work .wk-pain-obj { position: relative; height: 230px; margin-top: 22px; border-radius: 22px; background: var(--panel); overflow: hidden; color: #141414; }

/* 01 · asking bubbles */
body.page-work .wk-ask { position: absolute; left: 22px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 14px 28px -18px rgba(20, 24, 40, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.05); font-size: 14px; font-weight: 600; white-space: nowrap; }
body.page-work .wk-ask::before { content: ""; position: absolute; left: -30px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #d9dbe0; }
body.page-work .wk-ask-1 { top: 28px; left: 58px; }
body.page-work .wk-ask-2 { top: 84px; left: 58px; }
body.page-work .wk-ask-3 { top: 140px; left: 58px; }
body.page-work .wk-ask-2::before { background: #c8cbd3; }
body.page-work .wk-ask-3::before { background: #b9bcc6; }
body.page-work .wk-ask-dots { position: absolute; left: 58px; bottom: 16px; display: flex; gap: 5px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
body.page-work .wk-ask-dots i { width: 7px; height: 7px; border-radius: 50%; background: #b9bcc6; animation: wk-dot 1.2s ease-in-out infinite; }
body.page-work .wk-ask-dots i:nth-child(2) { animation-delay: 0.2s; }
body.page-work .wk-ask-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes wk-dot { 0%, 60%, 100% { translate: 0 0; opacity: 0.5; } 30% { translate: 0 -4px; opacity: 1; } }

/* 02 · a blank weekly report with a blinking caret */
body.page-work .wk-doc { position: absolute; left: 30px; right: 30px; top: 30px; bottom: -30px; padding: 20px 22px; border-radius: 14px; background: #fff; rotate: -1.5deg; box-shadow: 0 24px 40px -26px rgba(20, 24, 40, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
body.page-work .wk-doc-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
body.page-work .wk-doc-line { height: 10px; border-radius: 5px; background: #EEEEF1; margin-bottom: 12px; }
body.page-work .wk-doc-line.short { width: 55%; }
body.page-work .wk-doc-line-cursor { background: transparent; position: relative; }
body.page-work .wk-doc-line-cursor i { position: absolute; left: 0; top: -3px; width: 2px; height: 16px; background: #141414; animation: wk-blink 1s steps(2) infinite; }
@keyframes wk-blink { to { opacity: 0; } }
body.page-work .wk-clock { position: absolute; right: 18px; top: 18px; padding: 6px 10px; border-radius: 10px; background: #2a2a2c; color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 03 · finished Agent work that never makes it into the report */
body.page-work .wk-ghost { position: absolute; left: 20px; right: 20px; top: 20px; display: grid; gap: 6px; }
body.page-work .wk-ghost-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
body.page-work .wk-ghost-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.page-work .wk-ghost-row em { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #1f8f56; font-weight: 700; }
body.page-work .wk-ghost-row:nth-child(2) { opacity: 0.8; }
body.page-work .wk-ghost-row:nth-child(3) { opacity: 0.45; }
body.page-work .wk-ghost-doc { position: absolute; right: 16px; bottom: -20px; width: 136px; height: 96px; padding: 14px 16px; border-radius: 12px 12px 0 0; background: #fff; rotate: 2deg; box-shadow: 0 20px 36px -24px rgba(20, 24, 40, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
body.page-work .wk-ghost-doc span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
body.page-work .wk-ghost-doc i { display: block; height: 9px; border-radius: 5px; background: #EEEEF1; margin-bottom: 10px; }
body.page-work .wk-ghost-doc i:last-child { width: 60%; }

/* ---------- How: sticky stepper with a workbench that switches ---------- */
body.page-work .wk-how { height: calc(100vh + 2 * 70vh); margin-top: 48px; }
body.page-work .wk-how-pin { position: sticky; top: 92px; height: calc(100vh - 92px); display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: center; }
body.page-work .wk-steps { display: grid; gap: 10px; }
body.page-work .wk-steps button { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 20px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background-color 0.24s ease, translate 0.32s var(--ease-spring); }
body.page-work .wk-step-num { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); width: 28px; }
body.page-work .wk-step-name { font-size: 22px; font-weight: 700; }
body.page-work .wk-step-go { margin-left: auto; font-size: 20px; font-weight: 700; color: var(--accent); opacity: 0; translate: -6px 0; transition: opacity 0.24s ease, translate 0.32s var(--ease-spring); }
body.page-work .wk-steps button[aria-selected="true"] { background: var(--accent-soft); }
body.page-work .wk-steps button[aria-selected="true"] .wk-step-num { color: var(--accent); }
body.page-work .wk-steps button[aria-selected="true"] .wk-step-go { opacity: 1; translate: 0 0; }
@media (hover: hover) and (pointer: fine) { body.page-work .wk-steps button:hover { background: var(--fill); } body.page-work .wk-steps button[aria-selected="true"]:hover { background: var(--accent-soft); } }

body.page-work .wk-bench { position: relative; height: min(600px, calc(100vh - 220px)); border-radius: 32px; background: var(--panel); transform-style: preserve-3d; transition: transform 0.45s var(--ease-toggle); }
body.page-work .wk-view { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; opacity: 0; translate: 0 8px; visibility: hidden; pointer-events: none; transition: opacity 0.24s var(--ease-out), translate 0.24s var(--ease-out), visibility 0s linear 0.24s; }
body.page-work .wk-view[hidden] { display: grid; }
body.page-work .wk-view.is-on { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; transition-delay: 0s; }
body.page-work .wk-tag-view { position: absolute; left: 28px; top: -16px; }

/* App window replica (light workspace, like 报告 › 工作总结) */
body.page-work .wk-win { width: 100%; max-width: 760px; height: 100%; max-height: 520px; display: grid; grid-template-columns: 168px 1fr; border-radius: 16px; overflow: hidden; background: #F5F5F7; box-shadow: var(--shadow-window), inset 0 0 0 1px rgba(0, 0, 0, 0.06); color: #141414; font-size: 13px; }
body.page-work .wk-win-side { position: relative; padding: 16px 12px 52px; background: #EDEDF0; }
body.page-work .wk-win svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
body.page-work .wk-win-foot { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; color: #2e3138; }
body.page-work .wk-win-foot span { display: flex; gap: 14px; }
body.page-work .wk-win-dots { display: flex; gap: 7px; padding: 2px 6px 18px; }
body.page-work .wk-win-dots i { width: 11px; height: 11px; border-radius: 50%; background: #C9C9CE; }
body.page-work .wk-win-brand { display: flex; align-items: center; gap: 6px; padding: 0 6px 22px; font-size: 14px; }
body.page-work .wk-win-brand b { font-weight: 700; }
body.page-work .wk-win-brand span { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: #DADBE0; }
body.page-work .wk-win-nav li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #2e3138; }
body.page-work .wk-win-nav li.on { background: #DADBE0; color: #141414; }
body.page-work .wk-win-main { padding: 18px 20px; overflow: hidden; }
body.page-work .wk-win-title { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
body.page-work .wk-win-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; }
body.page-work .wk-win-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; white-space: nowrap; }
body.page-work .wk-win-tabs span.on { background: #E3E3E7; }
body.page-work .wk-win-date { color: #141414; }
body.page-work .wk-win-date svg:last-child { margin-left: 8px; }
body.page-work .wk-win-info { color: #2e3138; padding-inline: 4px; }
body.page-work .wk-win-export { margin-left: auto; color: #141414; }
body.page-work .wk-sum { padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
body.page-work .wk-sum-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 15px; }
body.page-work .wk-sum-head b, body.page-work .wk-sum-head span, body.page-work .wk-sum-head em { white-space: nowrap; }
body.page-work .wk-sum-head b { font-weight: 700; }
body.page-work .wk-sum-head span { font-weight: 700; margin-left: 4px; }
body.page-work .wk-sum-head em { margin-left: auto; font-style: normal; font-size: 12px; color: #6b6e76; }
body.page-work .wk-sum-sec { font-size: 12px; font-weight: 700; color: #6b6e76; margin: 8px 0 6px; }
body.page-work .wk-sum-list { display: grid; gap: 5px; }
body.page-work .wk-sum-list li { display: flex; align-items: center; gap: 8px; font-weight: 500; }
body.page-work .wk-sum-list i { width: 8px; height: 8px; border-radius: 50%; background: #3DD68C; flex: 0 0 8px; }
body.page-work .wk-sum-list i.half { background: transparent; box-shadow: inset 0 0 0 2px #F5A524; }

/* big confirmation card in the bench */
body.page-work .wk-confirm-big { width: 100%; max-width: 480px; padding: 22px 24px 20px; font-size: 14px; }
body.page-work .wk-confirm-big .wk-confirm-head { font-size: 16px; margin-bottom: 14px; }
body.page-work .wk-confirm-edit li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #2a2a2c; }
body.page-work .wk-confirm-edit li::before { display: none; }
body.page-work .wk-confirm-edit li i { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 2px #6b6e76; }
body.page-work .wk-confirm-edit li i.ok { background: #3DD68C; box-shadow: none; position: relative; }
body.page-work .wk-confirm-edit li i.ok::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #0b3b22; border-width: 0 2px 2px 0; rotate: 45deg; }
body.page-work .wk-confirm-edit li span { flex: 1; color: #f2f2f3; }
body.page-work .wk-confirm-edit li s { color: #8a8d94; }
body.page-work .wk-confirm-edit li.off span { color: #8a8d94; }
body.page-work .wk-edit-mark { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: #FFF1E8; color: #b3411a; white-space: nowrap; }
body.page-work .wk-confirm-big .wk-btn-dark, body.page-work .wk-confirm-big .wk-btn-light { height: 38px; padding: 0 18px; font-size: 14px; }
body.page-work .wk-btn-light.circled::after { content: ""; position: absolute; inset: -12px -14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 62' preserveAspectRatio='none'%3E%3Cpath d='M14 30 C 10 8, 90 2, 122 14 C 146 24, 118 58, 60 56 C 20 55, 6 44, 16 26' fill='none' stroke='%23FF6B21' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }

/* team view table */
body.page-work .wk-team { width: 100%; max-width: 720px; padding: 20px 22px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-window), inset 0 0 0 1px rgba(0, 0, 0, 0.06); color: #141414; font-size: 13.5px; }
body.page-work .wk-team-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 16px; }
body.page-work .wk-team-head b { font-weight: 700; }
body.page-work .wk-team-head span { margin-left: auto; font-size: 12.5px; color: #6b6e76; font-weight: 600; }
body.page-work .wk-team-grid { display: grid; grid-template-columns: auto 1.1fr auto 1.4fr auto; row-gap: 8px; column-gap: 12px; align-items: center; }
body.page-work .wk-team-h { font-size: 12px; font-weight: 700; color: #6b6e76; padding: 0 10px; white-space: nowrap; }
body.page-work .wk-team-c { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; background: #F6F6F8; font-weight: 600; }
body.page-work .wk-team-grid .wk-team-c:nth-of-type(5n + 6) { border-radius: 12px 0 0 12px; }
body.page-work .wk-team-grid .wk-team-c:nth-of-type(5n + 10) { border-radius: 0 12px 12px 0; }
body.page-work .wk-team-c b { font-weight: 800; font-size: 15px; }
body.page-work .wk-bar { flex: 1; height: 6px; border-radius: 3px; background: #E6E7EB; position: relative; overflow: hidden; }
body.page-work .wk-bar::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 3px; background: var(--accent); }
body.page-work .wk-team-hand { font-size: 12.5px; white-space: nowrap; }
body.page-work .wk-team-r { justify-content: flex-end; text-align: right; }
body.page-work .wk-team-foot { display: flex; gap: 20px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #FFF1E8; font-size: 13px; font-weight: 600; color: #7a3a16; }
body.page-work .wk-team-foot b { color: #141414; font-weight: 800; font-size: 14px; }
body.page-work .wk-team-foot .wk-team-r { margin-left: auto; }

/* ---------- Fit: tabs + stage (TideView use-case) ---------- */
body.page-work .wk-fit { height: calc(100vh + 3 * 60vh); margin-top: 48px; }
body.page-work .wk-fit-pin { position: sticky; top: 92px; height: calc(100vh - 92px); display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
body.page-work .wk-fit-tabs { display: grid; gap: 6px; }
body.page-work .wk-fit-tabs button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border: 0; background: transparent; border-radius: 14px; color: var(--ink-2); font-size: 21px; font-weight: 600; text-align: left; cursor: pointer; transition: color 0.24s ease, translate 0.32s var(--ease-spring), background-color 0.24s ease; }
body.page-work .wk-fit-tabs button i { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #d9dbe0; transition: background-color 0.24s ease, box-shadow 0.24s ease; }
body.page-work .wk-fit-tabs button[aria-selected="true"] { color: var(--ink); translate: 4px 0; font-weight: 700; }
body.page-work .wk-fit-tabs button[aria-selected="true"] i { background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { body.page-work .wk-fit-tabs button:hover { background: var(--fill); } }
body.page-work .wk-fit-stage { position: relative; height: min(600px, calc(100vh - 220px)); border-radius: 32px; background: var(--panel); }
body.page-work .wk-fit-stage .wk-view { grid-template-columns: 1fr 1fr; gap: 40px; place-items: center stretch; padding: 56px; }
body.page-work .wk-fit-copy { align-self: center; }
body.page-work .wk-fit-title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
body.page-work .wk-fit-line { margin-top: 18px; font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--ink-2); }
body.page-work .wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
body.page-work .wk-chips li { padding: 9px 14px; border-radius: 12px; background: #fff; font-size: 16px; font-weight: 600; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
body.page-work .wk-fit-obj { position: relative; align-self: center; justify-self: center; width: 100%; max-width: 420px; }
body.page-work .wk-tag-obj { position: absolute; right: -14px; top: -16px; }
body.page-work .wk-fit-obj .ui { width: 100%; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 34px 60px -34px rgba(20, 24, 40, 0.45), 0 6px 16px -10px rgba(20, 24, 40, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.06); color: #141414; font-size: 13.5px; line-height: 1.4; }

body.page-work .wk-daily-head, body.page-work .wk-budget-head, body.page-work .wk-deploy-head, body.page-work .wk-deliver-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; }
body.page-work .wk-daily-head b, body.page-work .wk-budget-head b, body.page-work .wk-deploy-head b, body.page-work .wk-deliver-head b { font-weight: 700; }
body.page-work .wk-daily-head span, body.page-work .wk-budget-head span, body.page-work .wk-deploy-head span, body.page-work .wk-deliver-head span { margin-left: auto; font-size: 12.5px; color: #6b6e76; font-weight: 600; }
body.page-work .wk-daily-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #F6F6F8; margin-bottom: 6px; font-weight: 600; }
body.page-work .wk-daily-row p { flex: 1; }
body.page-work .wk-daily-row i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #EAF9F0; color: #1f8f56; font-size: 11px; font-weight: 800; display: grid; place-items: center; }

body.page-work .wk-budget-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
body.page-work .wk-budget-kpis div { padding: 10px 10px; border-radius: 12px; background: #F6F6F8; }
body.page-work .wk-budget-kpis em { display: block; font-style: normal; font-size: 12px; color: #6b6e76; font-weight: 600; }
body.page-work .wk-budget-kpis b { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
body.page-work .wk-budget-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #FFF1E8; font-weight: 700; font-size: 12.5px; color: #7a3a16; }
body.page-work .wk-budget-bar i { display: block; height: 8px; border-radius: 4px; background: #F9D9C6; position: relative; overflow: hidden; }
body.page-work .wk-budget-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--accent); border-radius: 4px; }
body.page-work .wk-budget-bar b { color: #141414; font-size: 14px; }
body.page-work .wk-budget-proj { display: grid; gap: 6px; margin-top: 10px; }
body.page-work .wk-budget-proj span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: #2e3138; white-space: nowrap; }
body.page-work .wk-budget-proj i { display: block; height: 6px; border-radius: 3px; background: #E6E7EB; position: relative; overflow: hidden; }
body.page-work .wk-budget-proj i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: #141414; border-radius: 3px; }

body.page-work .wk-deploy-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #F6F6F8; margin-bottom: 6px; font-weight: 700; }
body.page-work .wk-deploy-row em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #6b6e76; font-weight: 600; }
body.page-work .wk-deploy-row i { width: 34px; height: 20px; border-radius: 10px; background: #3DD68C; position: relative; }
body.page-work .wk-deploy-row i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

body.page-work .wk-deliver li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #F6F6F8; margin-bottom: 6px; font-weight: 600; }
body.page-work .wk-deliver li span { flex: 1; }
body.page-work .wk-deliver li i { font-style: normal; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #EAF9F0; color: #1f8f56; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
body.page-work .wk-deliver li i.half { background: transparent; box-shadow: inset 0 0 0 2px #F5A524; }
body.page-work .wk-deliver li em { font-style: normal; font-size: 12px; color: #6b6e76; font-weight: 600; white-space: nowrap; }
body.page-work .wk-deliver-foot { display: flex; align-items: center; gap: 16px; white-space: nowrap; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #FFF1E8; font-size: 12.5px; font-weight: 600; color: #7a3a16; }
body.page-work .wk-deliver-foot b { color: #141414; font-size: 14px; font-weight: 800; }
body.page-work .wk-deliver-by { margin-left: auto; }

/* ---------- Pricing: two selectable cards ---------- */
body.page-work .wk-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
body.page-work .wk-plan { position: relative; padding: 40px 40px 36px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: translate 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), background-color 0.3s ease; }
body.page-work .wk-plan.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px transparent, 0 10px 30px -24px rgba(234, 67, 35, 0.5); }
@media (hover: hover) and (pointer: fine) { body.page-work .wk-plan:hover { translate: 0 -4px; box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line); } body.page-work .wk-plan.is-on:hover { box-shadow: var(--shadow-lift); } }
body.page-work .wk-plan-pick { position: absolute; right: 28px; top: 28px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
body.page-work .wk-plan-pick i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); background: #fff; position: relative; transition: background-color 0.24s ease, box-shadow 0.24s ease; }
body.page-work .wk-plan-pick[aria-pressed="true"] i { background: var(--accent); box-shadow: none; }
body.page-work .wk-plan-pick[aria-pressed="true"] i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.4px 2.4px 0; rotate: 45deg; }
body.page-work .wk-plan-name { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
body.page-work .wk-price { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
body.page-work .wk-price b { font-size: clamp(40px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
body.page-work .wk-price span { font-size: 18px; font-weight: 600; color: var(--ink-2); }
body.page-work .wk-plan-list { display: grid; gap: 12px; margin-top: 28px; min-height: 152px; }
body.page-work .wk-plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; line-height: 1.5; color: var(--ink); }
body.page-work .wk-plan-list i { font-style: normal; color: var(--accent); font-weight: 800; flex: 0 0 auto; }
body.page-work .wk-plan-btn { width: 100%; margin-top: 30px; min-height: 52px; }

/* ---------- Start: closing card with the demo form ---------- */
body.page-work .wk-start { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: clamp(40px, 5vw, 72px); border-radius: 40px; background: linear-gradient(135deg, #FFF4EC 0%, #F3F5FB 100%); }
body.page-work .wk-start-copy .h-section { text-align: left; margin-top: 22px; }
body.page-work .wk-start-mark { width: 64px; height: 64px; }
body.page-work .wk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
body.page-work .wk-field { display: grid; gap: 8px; }
body.page-work .wk-field label { font-size: 16px; font-weight: 700; color: var(--ink); }
body.page-work .wk-field input, body.page-work .wk-field select { width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 17px; appearance: none; -webkit-appearance: none; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
body.page-work .wk-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
body.page-work .wk-field input:focus-visible, body.page-work .wk-field select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
body.page-work .wk-submit { grid-column: 1 / -1; min-height: 54px; margin-top: 6px; }

/* ---------- Widths ---------- */
@media (max-width: 1240px) {
  body.page-work .wk-stage { grid-template-columns: minmax(236px, 1fr) 520px minmax(236px, 1fr); }
  body.page-work .wk-report { padding-inline: 32px; }
  body.page-work .wk-report-head { grid-template-columns: 1fr auto; }
  body.page-work .wk-report-brand { grid-column: 1 / -1; white-space: nowrap; }
  body.page-work .wk-report-meta { grid-column: 1; grid-row: 2; }
  body.page-work .wk-confirmed { grid-column: 2; grid-row: 2; align-self: center; }
  body.page-work .wk-confirm, body.page-work .wk-chat { width: 256px; }
  body.page-work .wk-chat { padding: 14px; }
  body.page-work .wk-chat-bubble { max-width: 184px; }
  body.page-work .wk-chat-bubble p { white-space: normal; }
  body.page-work .wk-how-pin { grid-template-columns: 260px 1fr; gap: 28px; }
  body.page-work .wk-fit-pin { grid-template-columns: 240px 1fr; gap: 28px; }
  body.page-work .wk-fit-stage .wk-view { padding: 40px; gap: 28px; }
}
@media (max-width: 1060px) {
  body.page-work .wk-hero-copy .h-hero { white-space: normal; }
  body.page-work .wk-stage { grid-template-columns: 1fr; width: min(640px, 100%); gap: 28px; }
  body.page-work .wk-report-wrap, body.page-work .wk-side { grid-column: 1; }
  body.page-work .wk-side-l, body.page-work .wk-side-r { justify-self: center; margin: 12px 0 0; }
  body.page-work .wk-report { padding-inline: 28px; }
  body.page-work .wk-confirm, body.page-work .wk-chat { width: 304px; }
  body.page-work .wk-chat-bubble { max-width: 244px; }
  body.page-work .wk-chat-bubble p { white-space: nowrap; }
  body.page-work .wk-arrow { display: none; }
  body.page-work .wk-report, body.page-work .wk-side .wk-confirm, body.page-work .wk-side .wk-chat { animation: none; }
  body.page-work .wk-pains { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  body.page-work .wk-how, body.page-work .wk-fit { height: auto; }
  body.page-work .wk-how-pin, body.page-work .wk-fit-pin { position: static; height: auto; grid-template-columns: 1fr; gap: 20px; align-items: start; }
  body.page-work .wk-steps { display: flex; gap: 8px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
  body.page-work .wk-steps li { flex: 0 0 auto; }
  body.page-work .wk-steps button { min-height: 52px; padding: 0 16px; }
  body.page-work .wk-step-name { font-size: 18px; }
  body.page-work .wk-step-go { display: none; }
  body.page-work .wk-fit-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
  body.page-work .wk-fit-tabs button { flex: 0 0 auto; min-height: 48px; font-size: 17px; }
  body.page-work .wk-fit-tabs button i { display: none; }
  body.page-work .wk-fit-tabs button[aria-selected="true"] { translate: 0; background: var(--accent-soft); }
  body.page-work .wk-bench, body.page-work .wk-fit-stage { height: auto; min-height: 420px; margin-top: 22px; }
  body.page-work .wk-view { position: relative; }
  body.page-work .wk-view:not(.is-on) { position: absolute; }
  body.page-work .wk-fit-stage .wk-view { grid-template-columns: 1fr; padding: 32px 24px 28px; gap: 28px; }
  body.page-work .wk-tag-obj { right: 8px; }
  body.page-work .wk-fit-obj { margin-top: 10px; }
  body.page-work .wk-plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  body.page-work .wk-plan-list { min-height: 0; }
  body.page-work .wk-start { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  body.page-work .sec-work-hero { padding-top: 132px; }
  body.page-work .wk-tagline { font-size: 18px; }
  body.page-work .wk-hero-actions { flex-wrap: wrap; }
  body.page-work .wk-stage { margin-top: 52px; }
  body.page-work .wk-report { padding: 20px 18px 16px; border-radius: 18px; }
  body.page-work .wk-report-head { grid-template-columns: 1fr; }
  body.page-work .wk-confirmed { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  body.page-work .wk-member { grid-template-columns: 1fr; gap: 8px; }
  body.page-work .wk-member-ok { display: none; }
  body.page-work .wk-report-foot { grid-template-columns: 1fr auto; row-gap: 6px; }
  body.page-work .wk-foot-bars { grid-column: 1 / -1; }
  body.page-work .wk-side .wk-confirm, body.page-work .wk-side .wk-chat { width: 100%; }
  body.page-work .wk-view { padding: 24px 14px 20px; }
  body.page-work .wk-win { grid-template-columns: 1fr; max-height: none; }
  body.page-work .wk-win-side { display: none; }
  body.page-work .wk-win-main { padding: 16px 14px; }
  body.page-work .wk-win-info, body.page-work .wk-win-export { display: none; }
  body.page-work .wk-sum-head em { flex-basis: 100%; margin-left: 26px; }
  body.page-work .wk-deliver-foot { flex-wrap: wrap; gap: 6px 16px; }
  body.page-work .wk-deliver-by { margin-left: 0; flex-basis: 100%; }
  body.page-work .wk-tag-view { left: 14px; }
  body.page-work .wk-team { padding: 16px 14px 14px; }
  body.page-work .wk-team-grid { grid-template-columns: auto 1fr 1fr; column-gap: 6px; }
  body.page-work .wk-team-grid > div:nth-of-type(5n + 3), body.page-work .wk-team-grid > div:nth-of-type(5n + 4) { display: none; }
  body.page-work .wk-team-c { padding: 0 8px; }
  body.page-work .wk-team-c .wk-role { white-space: nowrap; }
  body.page-work .wk-bench, body.page-work .wk-fit-stage { margin-top: 26px; }
  body.page-work .wk-team-foot { flex-wrap: wrap; gap: 8px 16px; }
  body.page-work .wk-team-foot .wk-team-r { margin-left: 0; flex-basis: 100%; }
  body.page-work .wk-fit-stage .wk-view { padding: 28px 16px 24px; }
  body.page-work .wk-fit-line { font-size: 18px; }
  body.page-work .wk-plan { padding: 30px 24px 26px; }
  body.page-work .wk-plan-pick { right: 16px; top: 16px; }
  body.page-work .wk-start { padding: 32px 22px; border-radius: 28px; }
  body.page-work .wk-form { grid-template-columns: 1fr; }
  body.page-work .wk-steps, body.page-work .wk-fit-tabs { display: grid; gap: 6px; overflow: visible; padding: 0; }
  body.page-work .wk-steps button { min-height: 50px; }
  body.page-work .wk-step-go { display: inline; }
  body.page-work .wk-fit-tabs button { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-work .wk-report, body.page-work .wk-side .wk-confirm, body.page-work .wk-side .wk-chat, body.page-work .wk-ask-dots i, body.page-work .wk-doc-line-cursor i { animation: none; }
  body.page-work .wk-bench { transition: none; transform: none !important; }
}

/* i18n · ja/ko line breaking */
body.page-work .sec-work:lang(ja) .h-hero, body.page-work .sec-work:lang(ja) .h-section, body.page-work .sec-work:lang(ja) .wk-fit-title, body.page-work .sec-work:lang(ja) .wk-fit-line, body.page-work .sec-work:lang(ja) .wk-pain-text p, body.page-work .sec-work:lang(ja) .wk-tagline { word-break: auto-phrase; }
body.page-work .sec-work:lang(ko) .h-hero, body.page-work .sec-work:lang(ko) .h-section, body.page-work .sec-work:lang(ko) .wk-fit-title, body.page-work .sec-work:lang(ko) .wk-fit-line, body.page-work .sec-work:lang(ko) .wk-pain-text p, body.page-work .sec-work:lang(ko) .wk-tagline, body.page-work .sec-work:lang(ko) .wk-plan-list li, body.page-work .sec-work:lang(ko) .wk-chat-bubble, body.page-work .sec-work:lang(ko) .wk-sum-list li, body.page-work .sec-work:lang(ko) .wk-confirm-edit li, body.page-work .sec-work:lang(ko) .wk-chips li { word-break: keep-all; overflow-wrap: anywhere; }
body.page-work .sec-work:lang(ko) .ui { word-break: keep-all; }