@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');:root {  --color-ink: #0A0A0A; --color-paper: #FAFAFA; --color-accent: #EF4444; --color-accent-hover: #DC2626; --color-accent-active: #B91C1C; --color-ink-active: #262626; --surface-page: #FAFAFA; --surface-card: #FAFAFA; --surface-aside: #F1F1EF; --surface-raised: #E5E5E5; --surface-sand: #F4F1EA; --c-red-tint: #FDECEC; --text-primary: #0A0A0A; --text-secondary: #525252; --text-tertiary: #A3A3A3; --text-inverse: #FAFAFA; --border-subtle: #E5E5E5; --border-medium: #D4D4D4; --border-strong: #0A0A0A; --success: #16A34A;  --font-display: 'Archivo Black', 'Noto Sans TC', Impact, 'Arial Black', sans-serif; --font-body: 'Work Sans', 'Noto Sans TC', -apple-system, 'Segoe UI', Helvetica, sans-serif; --font-mono: 'Space Mono', 'Noto Sans TC', 'Courier New', Consolas, monospace; --weight-display-cjk: 900; --text-display: 56px; --text-headline: 46px; --text-subhead: 24px; --text-body-lg: 20px; --text-body: 16px; --text-body-sm: 14px; --text-caption: 12px; --text-overline: 12px;  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --section-pad: 48px;  --container: 1320px;  --radius-none: 0px; --radius-full: 9999px;  --border-hair: 1px; --border-base: 2px; --border-accent: 4px;  --focus-ring: 0 0 0 2px #FAFAFA, 0 0 0 4px #0A0A0A;}@media (min-width: 768px) { :root { --section-pad: 64px; } }@media (min-width: 1080px) { :root { --section-pad: 96px; } }*, *::before, *::after { box-sizing: border-box; }* { margin: 0; padding: 0; }html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }html:focus-within { scroll-padding-top: 96px; }body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.7; color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}img { max-width: 100%; height: auto; display: block; }a { color: inherit; text-decoration: none; }ul, ol { list-style: none; }h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;}:lang(zh-Hant) h1,:lang(zh-Hant) h2,:lang(zh-Hant) h3,:lang(zh-Hant) .display { letter-spacing: 0; font-weight: var(--weight-display-cjk); line-height: 1.2;}:lang(zh-Hant) p,:lang(zh-Hant) li,:lang(zh-Hant) blockquote { line-height: 1.85; }:lang(zh-Hant) .overline { letter-spacing: 0.08em; }.skip-link { position: absolute; left: var(--space-3); top: -64px; z-index: 200; background: var(--color-ink); color: var(--text-inverse); padding: var(--space-2) var(--space-4); font-weight: 700; font-size: var(--text-body-sm); transition: top 120ms;}.skip-link:focus { top: var(--space-3); }:focus-visible { outline: none; box-shadow: var(--focus-ring);}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4);}@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }.section { padding-block: var(--section-pad); }.section--tight { padding-block: var(--space-6); }.section--dark { background: var(--color-ink); color: var(--text-inverse);}.section--aside { background: var(--surface-aside); }.section-head { max-width: 780px; margin-bottom: var(--space-6); }.section-head--center { margin-inline: auto; text-align: center; }.overline { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: var(--text-overline); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary);}.overline--accent { color: var(--color-accent); }.overline--inverse { color: var(--text-tertiary); }.display { font-family: var(--font-display); font-size: clamp(34px, 7vw, var(--text-display)); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance;}.headline { font-family: var(--font-display); font-size: clamp(30px, 4.6vw, var(--text-headline)); line-height: 1.1;}.subhead { font-family: var(--font-display); font-size: clamp(20px, 3vw, var(--text-subhead)); line-height: 1.2;}.lead { font-size: var(--text-body-lg); line-height: 1.7; color: var(--text-secondary);}.muted { color: var(--text-secondary); }.faint { color: var(--text-tertiary); }.mono { font-family: var(--font-mono); }.dot { color: var(--color-accent); } .measure { max-width: 65ch; }.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--text-body-sm); letter-spacing: 0.06em; text-transform: uppercase; padding: 14px var(--space-4); border: var(--border-base) solid var(--color-ink); background: var(--color-ink); color: var(--text-inverse); cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms; min-height: 48px;}.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--text-inverse); }.btn:active { background: var(--color-accent-active); border-color: var(--color-accent-active); }.btn--secondary { background: transparent; color: var(--color-ink);}.btn--secondary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--text-inverse); }.btn--ghost { background: transparent; border-color: transparent; color: var(--color-ink); padding-inline: 0;}.btn--ghost:hover { background: transparent; color: var(--color-accent); border-color: transparent; }.btn--inverse { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink);}.btn--inverse:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--text-inverse); }.btn--lg { font-size: var(--text-body); padding: 18px var(--space-5); min-height: 56px; }.btn .arrow { font-family: var(--font-body); }@media (max-width: 1079px) { .btn { font-size: 11px; padding: 10px var(--space-3); min-height: 36px; } .btn--lg { font-size: var(--text-body-sm); padding: 12px var(--space-4); min-height: 44px; }}.readmore { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-body-sm); letter-spacing: 0.04em; text-transform: uppercase; border-bottom: var(--border-base) solid var(--color-ink); padding-bottom: 2px; transition: color 140ms, border-color 140ms;}.readmore:hover { color: var(--color-accent); border-color: var(--color-accent); }.site-header { position: sticky; top: 0; z-index: 100; background: var(--surface-page); border-bottom: var(--border-base) solid var(--color-ink);}.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3);}.brand { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.03em; color: var(--color-ink); line-height: 1;}.brand .dot { font-family: var(--font-display); }.main-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);}.main-nav a { display: inline-block; font-weight: 600; font-size: var(--text-body-sm); padding: var(--space-2) var(--space-3); border-bottom: var(--border-accent) solid transparent; transition: color 140ms, border-color 140ms;}.main-nav a:hover { color: var(--color-accent); }.main-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); color: var(--color-ink);}.header-cta { display: none; }@media (min-width: 1080px) { .header-cta { display: inline-flex; } }.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 13px; border: var(--border-base) solid var(--color-ink); background: transparent; cursor: pointer; flex: none;}.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--color-ink); transition: transform 140ms ease, opacity 140ms ease;}.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }@media (min-width: 1080px) { .nav-toggle { display: none; } }@media (max-width: 1079px) { .header-inner { flex-wrap: nowrap; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--surface-page); border-top: var(--border-base) solid var(--color-ink); border-bottom: var(--border-base) solid var(--color-ink); max-height: calc(100vh - 70px); overflow-y: auto; z-index: 120; } .main-nav.is-open { display: block; } .main-nav > ul { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: var(--space-2) var(--space-4) var(--space-4); } .main-nav > ul > li { width: 100%; border-bottom: var(--border-hair) solid var(--border-subtle); } .main-nav > ul > li:last-child { border-bottom: 0; } .main-nav a { display: block; width: 100%; padding: var(--space-3) 0; font-size: var(--text-body); border-bottom: 0; } .main-nav a[aria-current="page"] { border-bottom: 0; color: var(--color-accent); } .main-nav .has-dropdown > a { justify-content: flex-start; } .main-nav .has-dropdown > a .caret { margin-left: auto; transform: rotate(180deg); } .main-nav .dropdown { position: static; opacity: 1; visibility: visible; transform: none; border: 0; min-width: 0; background: var(--surface-aside); margin-bottom: var(--space-3); } .main-nav .dropdown a { padding: var(--space-3); border-bottom: var(--border-hair) solid var(--border-subtle); } .main-nav .dropdown > li:last-child > a { border-bottom: 0; } .main-nav .has-dropdown .dropdown--2col a { border-bottom: 0; }}.hero { padding-block: var(--section-pad); }.hero-grid { display: grid; gap: var(--space-6);}@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }}.hero h1 { margin-bottom: var(--space-4); }.hero .lead { margin-bottom: var(--space-5); max-width: 52ch; }.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }.hero-aside { border: var(--border-base) solid var(--color-ink); border-top: var(--border-accent) solid var(--color-accent);}.hero-aside-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--border-hair) solid var(--border-subtle);}.hero-aside-row:last-child { border-bottom: 0; }.hero-aside .stat-num { font-family: var(--font-display); font-size: 40px; line-height: 1;}.hero-aside .stat-label { color: var(--text-secondary); font-size: var(--text-body-sm); text-align: right; }.framed { border: var(--border-base) solid var(--color-ink); background: var(--surface-raised); overflow: hidden; position: relative;}.framed img { width: 100%; height: 100%; object-fit: cover; display: block; }.ratio-4-3 { aspect-ratio: 4 / 3; }.ratio-16-9 { aspect-ratio: 16 / 9; }.ratio-1-1 { aspect-ratio: 1 / 1; }.ratio-3-2 { aspect-ratio: 3 / 2; }.grid { display: grid; gap: var(--space-4); }.grid-2 { grid-template-columns: 1fr; }.grid-3 { grid-template-columns: 1fr; }.grid-4 { grid-template-columns: 1fr 1fr; }@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; }}@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); }}.card { display: flex; flex-direction: column; background: var(--surface-card); border: var(--border-base) solid var(--border-medium); padding: var(--space-5); transition: border-color 140ms;}.card:hover { border-color: var(--color-ink); }.card--elevated { border-top: var(--border-accent) solid var(--color-accent); }.card--aside { background: var(--surface-aside); }.card h3 { font-size: var(--text-subhead); margin-bottom: var(--space-2); }.card p { color: var(--text-secondary); }.card .card-foot { margin-top: auto; padding-top: var(--space-4); }.card-num { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-tertiary); display: block; margin-bottom: var(--space-3);}.icon-tile { width: 48px; height: 48px; display: grid; place-items: center; border: var(--border-base) solid var(--color-ink); margin-bottom: var(--space-4); color: var(--color-ink);}.icon-tile svg { width: 24px; height: 24px; }.link-card { color: inherit; }.link-card:hover h3 { color: var(--color-accent); }.timeline { display: grid; gap: 0; }.timeline-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding-bottom: var(--space-6); position: relative;}.timeline-step:last-child { padding-bottom: 0; }.timeline-marker { display: flex; flex-direction: column; align-items: center;}.timeline-marker .num { width: 48px; height: 48px; display: grid; place-items: center; border: var(--border-base) solid var(--color-ink); background: var(--color-ink); color: var(--text-inverse); font-family: var(--font-display); font-size: var(--text-body-lg); flex: none;}.timeline-marker .line { width: var(--border-base); flex: 1; background: var(--border-medium); margin-top: var(--space-2);}.timeline-step:last-child .timeline-marker .line { display: none; }.timeline-body h3 { font-size: var(--text-subhead); margin-bottom: var(--space-2); }.timeline-body p { color: var(--text-secondary); }.stats { display: grid; grid-template-columns: 1fr 1fr; border: var(--border-base) solid currentColor;}@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }.stats--split { grid-template-columns: repeat(2, 1fr); }@media (min-width: 720px) { .stats--split { grid-template-columns: repeat(2, 1fr); } }.stats--split .stat { padding: var(--space-6) var(--space-5); }.stat { padding: var(--space-5); border-right: var(--border-hair) solid var(--border-subtle); border-bottom: var(--border-hair) solid var(--border-subtle);}.section--dark .stat { border-color: #2a2a2a; }.stat .stat-num { font-family: var(--font-display); font-size: clamp(36px, 6vw, 52px); line-height: 1; display: block; margin-bottom: var(--space-2);}.stat .stat-num em { color: var(--color-accent); font-style: normal; }.stat .stat-label { font-size: var(--text-body-sm); color: inherit; opacity: 0.8; }.table-wrap { width: 100%; overflow-x: auto; border: var(--border-base) solid var(--color-ink); }table.compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--text-body-sm);}table.compare caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 700; }table.compare th, table.compare td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--border-hair) solid var(--border-subtle); vertical-align: middle;}table.compare thead th { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-caption); border-bottom: var(--border-base) solid var(--color-ink);}table.compare thead th.featured { background: var(--color-ink); color: var(--text-inverse); }table.compare tbody th { font-weight: 600; color: var(--text-primary); }table.compare td.yes { color: var(--success); font-weight: 700; }table.compare td.no { color: var(--text-tertiary); }table.compare td.featured { background: var(--surface-aside); font-weight: 600; }table.compare tr:last-child td, table.compare tr:last-child th { border-bottom: 0; }.price-grid { display: grid; gap: var(--space-4); width:100% }@media (min-width: 900px) { .price-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }.price-card { display: flex; flex-direction: column; border: var(--border-base) solid var(--border-medium); background: var(--surface-card); padding: var(--space-5);}.price-card--featured { border-color: var(--color-ink); border-top: var(--border-accent) solid var(--color-accent); }.price-tier { font-family: var(--font-display); font-size: var(--text-subhead); }.price-for { color: var(--text-secondary); font-size: var(--text-body-sm); margin-bottom: var(--space-4); }.price-amount { font-family: var(--font-display); font-size: 40px; line-height: 1; margin-bottom: var(--space-1);}.price-amount .per { font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--text-secondary); font-weight: 600; }.price-note { font-size: var(--text-caption); color: var(--text-tertiary); margin-bottom: var(--space-5); }.price-features { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }.price-features li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-body-sm); color: var(--text-secondary); }.price-features li svg { flex: none; width: 18px; height: 18px; color: var(--color-ink); margin-top: 4px; }.price-card .btn { margin-top: auto; justify-content: center; }.price-badge { display: inline-block; align-self: flex-start; font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--color-accent); color: var(--text-inverse); padding: 2px var(--space-2); margin-bottom: var(--space-3);}.quote-card { border: var(--border-base) solid var(--border-medium); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);}.quote-card blockquote { font-size: var(--text-body-lg); line-height: 1.5; color: var(--text-primary);}.quote-card .who { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }.avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-ink); color: var(--text-inverse); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-body-sm); font-weight: 700; flex: none;}.who .name { font-weight: 700; font-size: var(--text-body-sm); }.who .role { color: var(--text-secondary); font-size: var(--text-caption); }.pullquote { font-family: var(--font-body); border-left: var(--border-accent) solid var(--color-accent); padding-left: var(--space-5); font-size: var(--text-body-lg); font-style: italic; line-height: 1.5; color: var(--text-primary); margin-block: var(--space-5);}.pullquote cite { display: block; font-style: normal; font-size: var(--text-body-sm); color: var(--text-secondary); margin-top: var(--space-3); }.faq { border: var(--border-base) solid var(--color-ink); width: 100%; }.faq details { border-bottom: var(--border-hair) solid var(--border-subtle); }.faq details:last-child { border-bottom: 0; }.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); cursor: pointer; font-weight: 700; font-size: var(--text-body-lg); list-style: none; transition: background 140ms;}.faq summary::-webkit-details-marker { display: none; }.faq summary:hover { background: var(--surface-aside); }.faq summary .sign { flex: none; width: 24px; height: 24px; position: relative;}.faq summary .sign::before,.faq summary .sign::after { content: ""; position: absolute; background: var(--color-ink); top: 50%; left: 50%; transform: translate(-50%, -50%);}.faq summary .sign::before { width: 16px; height: 2px; }.faq summary .sign::after { width: 2px; height: 16px; transition: transform 140ms; }.faq details[open] summary .sign::after { transform: translate(-50%, -50%) scaleY(0); }.faq details[open] summary { color: var(--color-accent); }.faq details[open] summary .sign::before { background: var(--color-accent); }.faq-answer { padding: 0 var(--space-4) var(--space-4); color: var(--text-secondary); }.beforeafter { display: grid; gap: var(--space-4); }@media (min-width: 720px) { .beforeafter { grid-template-columns: 1fr auto 1fr; align-items: center; } }.ba-col { border: var(--border-base) solid var(--border-medium); padding: var(--space-5);}.ba-col--after { border-color: var(--color-ink); border-top: var(--border-accent) solid var(--color-accent); }.ba-col .ba-label { margin-bottom: var(--space-3); }.ba-col .ba-metric { font-family: var(--font-display); font-size: 40px; line-height: 1; }.ba-col--after .ba-metric em { color: var(--color-accent); font-style: normal; }.ba-arrow { display: grid; place-items: center; color: var(--text-tertiary); }.ba-arrow svg { width: 32px; height: 32px; }@media (max-width: 719px) { .ba-arrow { transform: rotate(90deg); justify-self: center; } }.split { display: grid; gap: var(--space-6); align-items: center;}@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse > :first-child { order: 2; }}.tick-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }.tick-list li { display: flex; gap: var(--space-3); align-items: flex-start; }.tick-list li svg { flex: none; width: 22px; height: 22px; color: var(--color-accent); margin-top: 3px; }.tick-list li strong { display: block; color: var(--text-primary); }.tick-list li span { color: var(--text-secondary); font-size: var(--text-body-sm); }.service-block { scroll-margin-top: 110px; padding-block: var(--section-pad); border-top: var(--border-hair) solid var(--border-subtle); }.service-block:first-of-type { border-top: 0; }.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }.chip { font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px var(--space-3); border: var(--border-base) solid var(--color-ink); background: transparent; color: var(--color-ink);}.chip--solid { background: var(--color-ink); color: var(--text-inverse); }.cta-band { background: var(--color-ink); color: var(--text-inverse); }.cta-band .cta-inner { display: grid; gap: var(--space-5); padding-block: var(--section-pad); align-items: center;}@media (min-width: 900px) { .cta-band .cta-inner { grid-template-columns: 1.4fr 1fr; } }.cta-band h2 { margin-bottom: var(--space-3); }.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }@media (min-width: 900px) { .cta-band .actions { justify-content: flex-end; } }.midcta { display: grid; gap: var(--space-5); border: var(--border-base) solid var(--color-ink); border-top: var(--border-accent) solid var(--color-accent); padding: var(--space-6); align-items: center;}@media (min-width: 900px) { .midcta { grid-template-columns: 1.5fr 1fr; gap: var(--space-7); padding: var(--space-7); } }.midcta__action { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }@media (min-width: 900px) { .midcta__action { align-items: flex-end; text-align: right; } }.midcta__note { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-secondary); letter-spacing: 0.04em; }.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: var(--text-caption); color: var(--text-secondary);}.post-card .framed { margin-bottom: var(--space-4); }.post-card h3 { font-size: var(--text-subhead); margin-block: var(--space-2) var(--space-3); line-height: 1.2; }.post-card p { color: var(--text-secondary); font-size: var(--text-body-sm); }.post-card--flush { padding: 0; border: none; }.post-card--flush > a { display: flex; flex-direction: column; height: 100%; }.post-card--flush > a > :not(.framed) { padding-inline: var(--space-5); }.post-card--flush > a > .card-foot { padding-bottom: var(--space-5); }@media (max-width: 639px) { .post-card--flush > a { flex-direction: column; } .post-card--flush > a > .framed { width: 100%; min-width: 0; aspect-ratio: 16/9; margin-bottom: 0; } .post-card--flush > a > :not(.framed) { padding-inline: 0; } .post-card--flush > a > .card-foot { padding-bottom: 0; display: none; } .post-card--flush .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: 11px; } .post-card--flush .post-meta .chip { font-size: 10px; padding: 2px 7px; } .post-card--flush h3 { font-size: 18px; line-height: 1.25; margin-block: var(--space-2) var(--space-2); } .post-card--flush p { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: var(--space-2); } .post-card--flush .post-author { font-size: 12px; font-weight: 700; color: var(--color-accent); display: block; margin-bottom: var(--space-1); }}.blog-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-base) solid var(--border-subtle);}.blog-pagination__btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--color-ink); background: transparent; cursor: pointer; transition: background 120ms, color 120ms; color: var(--color-ink);}.blog-pagination__btn:hover:not(:disabled) { background: var(--color-ink); color: var(--color-bg); }.blog-pagination__btn:disabled { border-color: var(--border-subtle); color: var(--text-muted); cursor: default; }.blog-pagination__info { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); }.feature-post { display: grid; gap: var(--space-5); }@media (min-width: 900px) { .feature-post { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }.contact-grid { display: grid; gap: var(--space-6); }@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }.form { display: grid; gap: var(--space-4); }.field { display: grid; gap: var(--space-2); }.field label { font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary);}.field .req { color: var(--color-accent); }.field input,.field select,.field textarea { font-family: var(--font-body); font-size: var(--text-body); color: var(--text-primary); background: var(--color-paper); border: var(--border-base) solid var(--color-ink); padding: 12px var(--space-3); min-height: 48px; width: 100%;}.field textarea { min-height: 140px; resize: vertical; }.field input::placeholder, .field textarea::placeholder { color: var(--text-tertiary); }.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible { box-shadow: var(--focus-ring); }.field .hint { font-size: var(--text-caption); color: var(--text-secondary); }.checkbox-row { display: flex; gap: var(--space-3); align-items: flex-start; }.checkbox-row input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--color-ink); margin-top: 2px; }.checkbox-row label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--text-body-sm); color: var(--text-secondary); }.contact-aside { display: grid; gap: var(--space-4); align-content: start; }.contact-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-4); border: var(--border-base) solid var(--border-medium); align-items: start;}.contact-item svg { width: 24px; height: 24px; color: var(--color-ink); }.contact-item .label { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 700; }.contact-item .value { font-weight: 600; }.site-footer { background: var(--color-ink); color: var(--text-inverse); padding-block: var(--section-pad) var(--space-6);}.footer-top { display: grid; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: var(--border-hair) solid #2a2a2a;}@media (max-width: 719px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .footer-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); } .footer-brand p, .footer-brand .social { display: none; } .footer-col ul { gap: var(--space-2); } .site-footer { padding-block: var(--space-6) var(--space-5); }}@media (min-width: 720px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }@media (min-width: 1000px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }.footer-brand .brand { color: var(--text-inverse); margin-bottom: var(--space-3); display: inline-block; }.footer-brand p { color: var(--text-tertiary); font-size: var(--text-body-sm); max-width: 32ch; }.footer-col h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-4);}.footer-col ul { display: grid; gap: var(--space-3); }.footer-col a { color: var(--text-inverse); font-size: var(--text-body-sm); transition: color 140ms; }.footer-col a:hover { color: var(--color-accent); }.footer-col p { color: var(--text-tertiary); font-size: var(--text-body-sm); }.social { display: flex; gap: var(--space-2); margin-top: var(--space-4);}.social a { width: 40px; height: 40px; display: grid; place-items: center; border: var(--border-base) solid #2a2a2a; color: var(--text-inverse); transition: background 140ms, border-color 140ms, color 140ms;}.social a:hover { background: var(--color-accent); border-color: var(--color-accent); }.social svg { width: 18px; height: 18px; }.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; padding-top: var(--space-6); color: var(--text-tertiary); font-size: var(--text-caption);}.footer-bottom .mono { color: var(--text-tertiary); }.stack-sm > * + * { margin-top: var(--space-3); }.stack > * + * { margin-top: var(--space-4); }.mt-3 { margin-top: var(--space-3); }.mt-4 { margin-top: var(--space-4); }.mt-5 { margin-top: var(--space-5); }.mt-6 { margin-top: var(--space-6); }.text-center { text-align: center; }.eyebrow-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }.eyebrow-row .bar { width: 32px; height: var(--border-accent); background: var(--color-accent); flex: none; }.main-nav .has-dropdown { position: relative; }.main-nav .has-dropdown > a { display: inline-flex; align-items: center; gap: 6px; }.main-nav .caret { font-size: 9px; transition: transform 140ms; }.main-nav .has-dropdown:hover .caret,.main-nav .has-dropdown:focus-within .caret { transform: translateY(1px) rotate(180deg); }.main-nav .dropdown { position: absolute; top: calc(100% + 2px); left: 0; min-width: 268px; display: grid; gap: 0; background: var(--surface-page); border: var(--border-base) solid var(--color-ink); border-top: var(--border-accent) solid var(--color-accent); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms, transform 140ms, visibility 140ms; z-index: 130;}.main-nav .has-dropdown:hover .dropdown,.main-nav .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0);}.main-nav .dropdown li { display: block; width: 100%; }.main-nav .dropdown a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px var(--space-4); border: 0; border-bottom: var(--border-hair) solid var(--border-subtle); border-left: var(--border-accent) solid transparent; font-weight: 600; font-size: var(--text-body-sm);}.main-nav .dropdown a .en { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); text-transform: uppercase; margin-top: 1px; }.main-nav .dropdown > li:last-child > a { border-bottom: 0; }.main-nav .dropdown a:hover { background: var(--surface-aside); color: var(--color-accent); border-left-color: var(--color-accent);}.main-nav .dropdown a:hover .en { color: var(--color-accent); }.main-nav .dropdown--2col { display: flex; align-items: stretch; min-width: 460px;}.main-nav .has-dropdown .dropdown--2col a { border-bottom: 0; }.main-nav .dropdown--2col > .dropdown__col { flex: 1; display: block; border-bottom: none; width: 50%;}.main-nav .dropdown--2col > .dropdown__col + .dropdown__col { border-left: var(--border-hair) solid var(--border-subtle);}.main-nav .dropdown__heading { display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-3) var(--space-4) var(--space-2); border-bottom: var(--border-hair) solid var(--border-subtle);}.main-nav .dropdown--2col > .dropdown__col > ul { list-style: none; padding: 0; margin: 0;}.main-nav .dropdown--2col > .dropdown__col > ul > li { display: block; }.main-nav .dropdown--2col > .dropdown__col > ul > li:last-child a { border-bottom: 0; }.main-nav .dropdown .nav-icon { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.4; transition: opacity 140ms, color 140ms;}.main-nav .dropdown a:hover .nav-icon,.main-nav .dropdown a[aria-current] .nav-icon { opacity: 1; color: var(--color-accent); }.main-nav .dropdown .nav-text { display: block; }@media (prefers-reduced-motion: no-preference) { body.bricks-is-frontend .reveal { opacity: 0; transform: translateY(22px); transition: opacity 560ms ease, transform 560ms ease; } body.bricks-is-frontend .reveal.is-visible { opacity: 1; transform: none; } body.bricks-is-frontend .reveal[data-delay="1"] { transition-delay: 70ms; } body.bricks-is-frontend .reveal[data-delay="2"] { transition-delay: 140ms; } body.bricks-is-frontend .reveal[data-delay="3"] { transition-delay: 210ms; } body.bricks-is-frontend .reveal[data-delay="4"] { transition-delay: 280ms; }}body:not(.bricks-is-frontend) .reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; animation: none !important;}.marquee { overflow: hidden; background: var(--color-ink); color: var(--text-inverse); border-block: var(--border-base) solid var(--color-ink);}.marquee__track { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; width: max-content !important; min-width: max-content !important; max-width: none !important; gap: 0 !important; padding-block: var(--space-3); animation: marquee 38s linear infinite; will-change: transform;}.marquee__item { display: inline-flex !important; align-items: center; gap: var(--space-5); flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; max-width: none !important; white-space: nowrap !important; padding-right: var(--space-5); font-family: var(--font-display); font-size: var(--text-subhead); letter-spacing: 0;}.marquee__rank { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-body-sm); white-space: nowrap;}.marquee__sep { color: var(--color-accent); white-space: nowrap;}.marquee:hover .marquee__track { animation-play-state: paused;}@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); }}@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; }}.serp { border: var(--border-base) solid var(--color-ink); background: var(--color-paper); font-family: var(--font-body);}.serp__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-base) solid var(--color-ink); }.serp__dots { display: flex; gap: 6px; flex: none; }.serp__dots span { width: 10px; height: 10px; border: var(--border-base) solid var(--color-ink); display: block; }.serp__dots span:last-child { background: var(--color-accent); border-color: var(--color-accent); }.serp__input { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border: var(--border-base) solid var(--color-ink); padding: 9px var(--space-3); font-size: var(--text-body-sm); color: var(--text-primary); font-weight: 600;}.serp__input svg { width: 18px; height: 18px; flex: none; color: var(--color-accent); }.serp__results { display: grid; gap: var(--space-4); padding: var(--space-4); }.serp__result { display: grid; gap: 5px; padding-left: var(--space-3); border-left: var(--border-base) solid var(--border-subtle); }.serp__result--top { border-left: var(--border-accent) solid var(--color-accent); }.serp__result--ghost { opacity: 0.42; }.serp__rank { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-tertiary); }.serp__result--top .serp__rank { color: var(--color-accent); font-weight: 700; }.serp__pill { display: inline-block; background: var(--color-accent); color: var(--text-inverse); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 8px; }.serp__url { font-size: var(--text-caption); color: var(--text-secondary); font-family: var(--font-mono); }.serp__title { font-family: var(--font-display); font-size: var(--text-body-lg); line-height: 1.15; }.serp__result--top .serp__title { color: var(--color-ink); }.serp__snippet { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.5; }.serp__bars { display: grid; gap: 6px; margin-top: 2px; }.serp__bars i { display: block; height: 7px; background: var(--border-subtle); }.serp__bars i:nth-child(1) { width: 92%; }.serp__bars i:nth-child(2) { width: 74%; }@media (prefers-reduced-motion: no-preference) { .serp.is-visible .serp__result--top { animation: serpPop 520ms ease 240ms both; } @keyframes serpPop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }}.problem-grid { display: grid; gap: var(--space-4); }@media (min-width: 760px) { .problem-grid { grid-template-columns: 1fr 1fr; } }.problem { padding: var(--space-5); border: var(--border-base) solid var(--color-ink); background: var(--surface-card); display: flex; flex-direction: column; transition: transform 140ms;}.problem__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }.problem .icon-tile { margin: 0; flex: none; }.problem__num { font-family: var(--font-mono); font-size: var(--text-body-lg); color: var(--text-tertiary); margin-left: auto; }.problem h3 { font-size: var(--text-subhead); margin-bottom: var(--space-3); }.problem__pain { color: var(--text-secondary); margin-bottom: var(--space-4); }.problem__fix { display: flex; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: var(--border-base) solid var(--color-ink); font-weight: 600; color: var(--text-primary);}.problem__fix svg { flex: none; width: 22px; height: 22px; color: var(--color-accent); margin-top: 2px; }.problem--dark { background: var(--color-ink); color: var(--text-inverse); border-color: var(--color-ink); }.problem--dark .problem__num { color: var(--text-tertiary); }.problem--dark h3 { color: var(--text-inverse); }.problem--dark .problem__pain { color: var(--text-tertiary); }.problem--dark .icon-tile { border-color: var(--text-inverse); color: var(--text-inverse); }.problem--dark .problem__fix { color: var(--text-inverse); border-top-color: #2a2a2a; }.pillar-grid { display: grid; gap: var(--space-4); }@media (min-width: 600px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }@media (min-width: 1000px) { .pillar-grid { grid-template-columns: repeat(4, 1fr); } }.pillar { display: flex; flex-direction: column; border: var(--border-base) solid var(--border-medium); padding: var(--space-5); color: inherit; transition: border-color 140ms, background 140ms;}.pillar:hover { border-color: var(--color-ink); background: var(--surface-aside); }.pillar__no { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-accent); letter-spacing: 0.08em; }.pillar .icon-tile { margin-block: var(--space-4) var(--space-4); }.pillar h3 { font-size: var(--text-subhead); margin-bottom: var(--space-2); }.pillar p { color: var(--text-secondary); font-size: var(--text-body-sm); }.pillar .en-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }.pillar .card-foot { margin-top: auto; padding-top: var(--space-4); }.pillar:hover h3 { color: var(--color-accent); }.trust-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }.trust-avatars { display: flex; }.trust-avatars .avatar { margin-left: -10px; border: var(--border-base) solid var(--surface-page); }.trust-avatars .avatar:first-child { margin-left: 0; }.trust-row .trust-text { font-size: var(--text-body-sm); color: var(--text-secondary); }.trust-row .trust-text strong { color: var(--text-primary); }.trust-points { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); }.trust-points li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); font-weight: 600; color: var(--text-primary); }.trust-points li svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; }@media (min-width: 900px) { .hero-grid.hero-grid--visual { grid-template-columns: 1.02fr 0.98fr; } }.stat .stat-num em { will-change: contents; }.intro-grid { display: grid; gap: var(--space-4); }@media (min-width: 860px) { .intro-grid { grid-template-columns: 1fr 1fr; } }.intro-card { display: flex; flex-direction: column; border: var(--border-base) solid var(--border-medium); padding: var(--space-5); background: var(--surface-card); transition: border-color 140ms;}.intro-card:hover { border-color: var(--color-ink); }.intro-card .icon-tile { margin-bottom: var(--space-4); }.intro-card h3 { font-size: var(--text-subhead); margin-bottom: var(--space-3); }.intro-card p { color: var(--text-secondary); }.intro-card p + p { margin-top: var(--space-3); }.intro-card .chips { margin-top: var(--space-4); }.seo-formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--border-medium);}.seo-formula .plus { font-family: var(--font-display); color: var(--color-accent); }.quote-banner { background: var(--surface-aside); border-block: var(--border-base) solid var(--color-ink); }.quote-banner .container { padding-block: var(--section-pad); }.quote-banner__inner { max-width: 1000px; }.quote-banner blockquote { border-left: var(--border-accent) solid var(--color-accent); padding-left: var(--space-6); font-family: var(--font-display); font-size: clamp(26px, 4.2vw, 44px); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary);}:lang(zh-Hant) .quote-banner blockquote { letter-spacing: 0; font-weight: var(--weight-display-cjk); }.quote-banner__cite { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding-left: 0;}.quote-banner__cite .name { font-weight: 700; font-size: var(--text-body-sm); }.quote-banner__cite .role { color: var(--text-secondary); font-size: var(--text-caption); }.pillar__keys { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--border-subtle);}.pillar__keys li { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-body-sm); color: var(--text-secondary); font-weight: 600; line-height: 1.4;}.pillar__keys li::before { content: ""; width: 6px; height: 6px; background: var(--color-accent); flex: none; transform: translateY(1px);}.pillar:hover .pillar__keys li::before { background: var(--color-accent); }@media (min-width: 1000px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }@media (min-width: 1200px) { .pillar-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } .pillar { padding: var(--space-4); } .pillar h3 { font-size: var(--text-body-lg); } .pillar .icon-tile { margin-block: var(--space-3); } .pillar__keys li { font-size: var(--text-caption); }}.roadmap { display: grid; gap: var(--space-4); }@media (min-width: 720px) { .roadmap { grid-template-columns: 1fr 1fr; } }@media (min-width: 1080px) { .roadmap { grid-template-columns: repeat(4, 1fr); } }.phase { position: relative; display: flex; flex-direction: column; border: var(--border-base) solid var(--border-medium); border-top: var(--border-accent) solid var(--color-ink); padding: var(--space-5); background: var(--surface-card); transition: border-color 140ms, transform 140ms;}.phase:hover { border-color: var(--color-ink); }.phase--featured { border-top-color: var(--color-accent); }.phase__month { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); font-weight: 700;}.phase__num { width: 26px; height: 26px; display: grid; place-items: center; border: var(--border-base) solid var(--color-ink); font-family: var(--font-display); font-size: 13px; color: var(--color-ink); flex: none;}.phase--featured .phase__num { background: var(--color-accent); border-color: var(--color-accent); color: var(--text-inverse); }.phase__when { font-family: var(--font-display); font-size: var(--text-subhead); line-height: 1.1; margin-block: var(--space-3) var(--space-1); }.phase__goal { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-secondary); margin-bottom: var(--space-4); }.phase__list { display: grid; gap: var(--space-2); margin-top: auto; }.phase__list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-body-sm); color: var(--text-secondary); }.phase__list li svg { flex: none; width: 16px; height: 16px; color: var(--color-ink); margin-top: 4px; }@media (min-width: 1080px) { .phase:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: calc(var(--space-4) / -2); transform: translate(50%, -50%); font-family: var(--font-body); font-weight: 700; font-size: var(--text-body-lg); line-height: 1; color: var(--text-tertiary); pointer-events: none; z-index: 2; }}.card .icon-tile + .card-num { margin-top: 0; }.section--paper { background: var(--surface-page); }.section--aside { background: var(--surface-aside); }.section--sand { background: var(--surface-sand); }.section--raised { background: var(--surface-raised); }.section--dark { position: relative; isolation: isolate; }.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 44s; }.marquee--alt .marquee__item { font-size: var(--text-body-lg); }.marquee--alt .marquee__tag { display: inline-flex; align-items: center; gap: var(--space-2);}.marquee--alt .marquee__tag svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; }@media (max-width: 1079px) { .main-nav .has-dropdown .dropdown { position: static; opacity: 1; visibility: visible; transform: none; border: 0; min-width: 0; background: var(--surface-aside); margin: 0; display: none; } .main-nav .has-dropdown.is-open .dropdown { display: block; margin: var(--space-1) 0 var(--space-3); } .main-nav .has-dropdown > a .caret { transition: transform 160ms; } .main-nav .has-dropdown.is-open > a .caret { transform: rotate(180deg); } .main-nav .has-dropdown .dropdown a { padding: var(--space-3); border-left: var(--border-accent) solid transparent; border-bottom: var(--border-hair) solid var(--border-subtle); } .main-nav .has-dropdown .dropdown > li:last-child > a { border-bottom: 0; } .main-nav .has-dropdown .dropdown--2col a { border-bottom: 0; }}.card > .framed:first-child,.card > .illus:first-child,.intro-card > .framed:first-child { margin-bottom: var(--space-4); }.illus { border: var(--border-base) solid var(--color-ink); background: var(--surface-card); display: grid; place-items: center; overflow: hidden; position: relative;}.illus svg { width: 100%; height: 100%; display: block; }.illus--aside { background: var(--surface-aside); }.illus--sand { background: var(--surface-sand); }.illus--ink { background: var(--color-ink); }html[lang="en"] .main-nav .dropdown a .en,html[lang="en"] .pillar .en-label { display: none; }.lang-toggle { display: inline-flex; border: var(--border-base) solid var(--color-ink); flex: none;}.lang-toggle button,.lang-toggle a { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 8px 12px; background: transparent; color: var(--color-ink); border: 0; cursor: pointer; transition: background 140ms, color 140ms; min-height: 40px; line-height: 1;}.lang-toggle button + button,.lang-toggle a + a,.lang-toggle a + span,.lang-toggle span + a { border-left: var(--border-base) solid var(--color-ink); }.lang-toggle .lang-unavailable { display: inline-flex; align-items: center; padding: 0 var(--space-2); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-muted); cursor: default; user-select: none; line-height: 1;}.lang-toggle button[aria-pressed="true"],.lang-toggle a[aria-current="page"] { background: var(--color-ink); color: var(--text-inverse); }.lang-toggle button:hover[aria-pressed="false"],.lang-toggle a:not([aria-current="page"]):hover { color: var(--color-accent); }.header-tools { display: flex; align-items: center; gap: var(--space-3); flex: none; }.header-mobile-cta { display: none; }@media (max-width: 1079px) { .header-tools { order: 3; margin-left: auto; } .nav-toggle { order: 4; }  .header-tools .lang-toggle { display: none; }  .header-mobile-cta { display: inline-flex !important; }  .nav-lang-item { border-top: var(--border-base) solid var(--border-subtle); padding: var(--space-4) 0; display: flex; align-items: center; justify-content: flex-start; } .nav-lang-item .lang-toggle { display: inline-flex; }}@media (min-width: 1080px) { .nav-lang-item { display: none; }}.gsearch { border: var(--border-base) solid var(--color-ink); background: var(--color-paper); position: relative; overflow: hidden;}.gsearch__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-base) solid var(--color-ink); }.gsearch__dots { display: flex; gap: 6px; flex: none; }.gsearch__dots span { width: 10px; height: 10px; border: var(--border-base) solid var(--color-ink); display: block; }.gsearch__dots span:last-child { background: var(--color-accent); border-color: var(--color-accent); }.gsearch__brand { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-tertiary); letter-spacing: 0.08em; }.gsearch__field { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4); border: var(--border-base) solid var(--color-ink); padding: 12px var(--space-3);}.gsearch__q { flex: 1; font-weight: 700; font-size: var(--text-body-lg); color: var(--text-primary); white-space: nowrap; overflow: hidden; }.gsearch__caret { display: inline-block; width: 2px; height: 1.1em; background: var(--color-accent); vertical-align: -0.18em; margin-left: 1px; animation: caretBlink 1s steps(1) infinite; }@keyframes caretBlink { 50% { opacity: 0; } }.gsearch__go { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--color-ink); color: var(--text-inverse); transition: background 140ms; }.gsearch.is-searching .gsearch__go { background: var(--color-accent); }.gsearch__go svg { width: 18px; height: 18px; }.gsearch__results { display: grid; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); }.g-res { display: grid; gap: 5px; padding-left: var(--space-3); border-left: var(--border-base) solid var(--border-subtle); opacity: 0; transform: translateY(8px); transition: opacity 280ms ease, transform 280ms ease; }.g-res.is-in { opacity: 1; transform: none; }.g-res--top { border-left: var(--border-accent) solid var(--color-accent); }.g-res__rank { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-tertiary); }.g-res--top .g-res__rank { color: var(--color-accent); font-weight: 700; }.g-res__pill { display: inline-block; background: var(--color-accent); color: var(--text-inverse); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 8px; }.g-res__url { font-size: var(--text-caption); color: var(--text-secondary); font-family: var(--font-mono); }.g-res__title { font-family: var(--font-display); font-size: var(--text-body-lg); line-height: 1.15; }.g-res__snippet { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.5; }.g-res--ghost { opacity: 0; }.g-res--ghost.is-in { opacity: 0.4; }.g-res__bars { display: grid; gap: 6px; margin-top: 2px; }.g-res__bars i { display: block; height: 7px; background: var(--border-subtle); }.g-res__bars i:nth-child(1) { width: 92%; }.g-res__bars i:nth-child(2) { width: 74%; }.gsearch__cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; color: var(--color-ink); opacity: 0; z-index: 4; }.gsearch__cursor svg { width: 100%; height: 100%; }@media (prefers-reduced-motion: reduce) { .g-res { opacity: 1; transform: none; } .g-res--ghost { opacity: 0.4; } .gsearch__caret { animation: none; } .gsearch__cursor { display: none; }}.article-hero { padding-block: var(--section-pad) var(--space-6); border-bottom: var(--border-base) solid var(--color-ink); }.article-hero .post-meta { margin-bottom: var(--space-4); }.article-hero h1 { max-width: 22ch; margin-bottom: var(--space-4); }.article-hero .lead { max-width: 60ch; }.article-byline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }.article-byline .who-name { font-weight: 700; font-size: var(--text-body-sm); }.article-byline .who-role { color: var(--text-secondary); font-size: var(--text-caption); }.article-cover { margin-top: var(--space-6); }.article-wrap { max-width: 760px; margin-inline: auto; }.article-body { font-size: 16px; line-height: 1.85; }@media (min-width: 1024px) { .article-body { font-size: 17px; } }.article-body > * + * { margin-top: var(--space-4); }.article-body p { color: var(--text-primary); }.article-body a:not(.btn):not(.readmore) { color: var(--color-accent); border-bottom: 1px solid currentColor; transition: color 140ms; }.article-body a:not(.btn):not(.readmore):hover { color: var(--color-accent-active); }.article-body strong { font-weight: 700; }.article-body h2 { font-size: clamp(21px, 2.6vw, 26px); line-height: 1.25; margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-base) solid var(--color-ink); display: flex; gap: var(--space-3); align-items: baseline; scroll-margin-top: 88px;}.article-body h2 .n { font-family: var(--font-mono); font-size: var(--text-body); color: var(--color-accent); flex: none; font-weight: 700; }.article-body h3 { font-size: var(--text-body-lg); margin-top: var(--space-5); }.article-body ul { display: grid; gap: var(--space-2); }.article-body ul li { display: flex; gap: var(--space-3); align-items: baseline; color: var(--text-primary); }.article-body ul li::before { content: ""; width: 6px; height: 6px; background: var(--color-accent); flex: none; }.article-body blockquote { border-left: var(--border-accent) solid var(--color-accent); padding-left: var(--space-5); font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); margin-block: var(--space-6);}:lang(zh-Hant) .article-body blockquote { letter-spacing: 0; font-weight: var(--weight-display-cjk); }.article-body figure { margin-block: var(--space-6); }.article-body figcaption { font-size: var(--text-caption); color: var(--text-tertiary); margin-top: var(--space-2); font-family: var(--font-mono); }.toc { border: var(--border-base) solid var(--color-ink); border-top: var(--border-accent) solid var(--color-accent); padding: var(--space-4) var(--space-5); margin-block: var(--space-6); background: var(--surface-aside);}.toc .toc-label { font-family: var(--font-body); font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-3); display: block; }.toc ol { display: grid; gap: var(--space-2); counter-reset: toc; }.toc li { display: flex; gap: var(--space-3); align-items: baseline; }.toc li::before { content: counter(toc, decimal-leading-zero); counter-increment: toc; font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-body-sm); font-weight: 700; flex: none; }.toc a { font-weight: 600; border-bottom: 1px solid transparent; transition: color 140ms, border-color 140ms; }.toc a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }.takeaway { border: var(--border-base) solid var(--color-ink); border-left: var(--border-accent) solid var(--color-accent); padding: var(--space-4) var(--space-5); background: var(--surface-card); margin-top: var(--space-5);}.takeaway .label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }.takeaway .label svg { width: 16px; height: 16px; }.takeaway p { font-size: 16px; line-height: 1.7; color: var(--text-primary); margin: 0; }.article-author { display: flex; gap: var(--space-4); align-items: flex-start; border: var(--border-base) solid var(--border-medium); padding: var(--space-5); margin-top: var(--space-7); }.article-author .avatar { width: 56px; height: 56px; font-size: var(--text-body); }.article-author h3 { font-size: var(--text-subhead); }.article-author p { color: var(--text-secondary); font-size: var(--text-body-sm); margin-top: var(--space-2); }.article-share { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }.article-share .label { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-secondary); }.article-share .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: var(--border-base) solid var(--color-ink); color: var(--color-ink); transition: background 140ms, color 140ms; }.article-share .icon-btn:hover { background: var(--color-ink); color: var(--text-inverse); }.article-share .icon-btn svg { width: 18px; height: 18px; }.article-layout { display: grid; gap: var(--space-6); }@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 1fr) 264px; gap: var(--space-7); align-items: start; }}.article-main { min-width: 0; max-width: 740px; }@media (min-width: 1024px) { .article-main { max-width: none; } }.article-aside { display: none; min-width: 0; }@media (min-width: 1024px) { .article-aside { display: block; position: sticky; top: 88px; }}.toc--sticky { margin: 0 0 var(--space-4); }.toc--sticky ol { gap: var(--space-3); }.toc--sticky a { font-size: var(--text-body-sm); line-height: 1.4; }.toc--sticky a.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }.toc--sticky li.is-active::before { color: var(--color-accent); }.aside-cta { display: block; border: var(--border-base) solid var(--color-ink); border-top: var(--border-accent) solid var(--color-accent); background: var(--color-ink); color: var(--text-inverse); padding: var(--space-4); transition: background 140ms;}.aside-cta .k { display: block; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-2); }.aside-cta .t { display: block; font-family: var(--font-display); font-size: var(--text-body-lg); line-height: 1.2; }:lang(zh-Hant) .aside-cta .t { font-weight: var(--weight-display-cjk); }.aside-cta .go { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-weight: 700; font-size: var(--text-body-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); }.aside-cta:hover { background: var(--color-accent); }.aside-cta:hover .go, .aside-cta:hover .k { color: var(--text-inverse); }@media (min-width: 1024px) { .toc--inline { display: none; } }@media (max-width: 540px) { :root { --section-pad: 40px; }  .display { font-size: clamp(28px, 8.5vw, 44px); line-height: 1.08; } .headline { font-size: clamp(24px, 7vw, 34px); } .subhead { font-size: clamp(19px, 5.5vw, 24px); }  .hero-aside .stat-num, .price-amount, .ba-col .ba-metric { font-size: 32px; } .stat .stat-num { font-size: clamp(30px, 9vw, 44px); }  .lead { font-size: 17px; line-height: 1.6; }  .section-head { margin-bottom: var(--space-5); } .hero-grid { gap: var(--space-5); } .hero .lead { margin-bottom: var(--space-4); }  .card, .pillar, .intro-card, .problem, .price-card, .quote-card, .ba-col { padding: var(--space-4); }  .card h3, .pillar h3, .intro-card h3, .problem h3, .timeline-body h3, .post-card h3 { font-size: 19px; }  .faq summary { font-size: 17px; padding: var(--space-3) var(--space-4); }  .brand { font-size: 22px; }  .marquee__item { font-size: var(--text-body-lg); } .marquee--alt .marquee__item { font-size: var(--text-body); }  .quote-banner blockquote { font-size: clamp(19px, 5vw, 25px); line-height: 1.3; padding-left: var(--space-4); } .quote-banner__cite { padding-left: 0; }  .pullquote { font-size: clamp(20px, 5.2vw, 26px) !important; line-height: 1.35; padding-left: var(--space-4); }  .article-hero h1 { font-size: clamp(28px, 8.5vw, 40px); } .article-body h2 { font-size: clamp(20px, 5.5vw, 24px); }}