/* GUAN — unified interface system: quiet light surfaces, ink typography, one jade accent. */
:root {
  --ds-canvas: #f5f6f3;
  --ds-surface: #ffffff;
  --ds-surface-raised: #fbfcfa;
  --ds-ink: #1e2926;
  --ds-muted: #68736e;
  --ds-faint: #8c9691;
  --ds-line: #e0e6e1;
  --ds-line-strong: #cbd5ce;
  --ds-accent: #27644e;
  --ds-accent-hover: #1e523f;
  --ds-accent-soft: #eaf2ed;
  --ds-warn: #8a6132;
  --ds-shadow: 0 18px 52px rgba(25, 43, 34, .075);
  --ds-radius: 18px;
  color-scheme: light;
}
html[data-theme='dark'] {
  --ds-canvas: #151a18;
  --ds-surface: #1c2320;
  --ds-surface-raised: #222a26;
  --ds-ink: #f0f4f0;
  --ds-muted: #b1bcb5;
  --ds-faint: #88958d;
  --ds-line: #333e38;
  --ds-line-strong: #46544c;
  --ds-accent: #91c6a9;
  --ds-accent-hover: #b3dfc5;
  --ds-accent-soft: #263a30;
  --ds-warn: #e0b477;
  --ds-shadow: 0 20px 52px rgba(0, 0, 0, .2);
  color-scheme: dark;
}
html, body, body.site-body { background: var(--ds-canvas); color: var(--ds-ink); }
body.site-body { background-image: none; font-family: Manrope, Inter, system-ui, sans-serif; }
body:not(.site-body) { background: var(--ds-canvas); color: var(--ds-ink); }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid color-mix(in srgb, var(--ds-accent) 52%, transparent); outline-offset: 3px; }

/* Public site */
.site-shell { overflow: clip; }
.site-header { max-width: 1460px; margin: 12px auto 0; padding: 14px clamp(20px, 4vw, 58px); border: 1px solid var(--ds-line); border-radius: 15px; background: var(--ds-surface); box-shadow: 0 4px 20px rgba(26, 48, 36, .035); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; background: var(--ds-ink); color: var(--ds-canvas); }
.skip-link:focus { transform: none; }
.site-body .site-logo, .site-body .footer-logo { width: auto !important; height: auto !important; padding: 0; background: transparent; }
.site-body .site-logo::before, .site-body .footer-logo::before { display: none !important; }
.site-logo { min-width: 0; gap: 10px; }
.site-logo strong { color: var(--ds-ink); font: 800 17px/1 Manrope, Inter, sans-serif; letter-spacing: .12em; }
.site-logo small { color: var(--ds-muted); font: 9px/1.2 Manrope, Inter, sans-serif; letter-spacing: .08em; }
.logo-mark { width: 37px; height: 37px; border-radius: 11px; background: var(--ds-accent); color: #fff; font: 700 18px Manrope, sans-serif; }
.logo-mark::after { display: none; }
.site-nav { gap: clamp(12px, 1.8vw, 25px); color: var(--ds-muted); font-size: 12px; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ds-accent); }
.site-nav .site-more { position: relative; }
.site-more summary { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 4px; cursor: pointer; list-style: none; color: var(--ds-muted); }
.site-more summary::-webkit-details-marker { display: none; }
.site-more[open] summary, .site-more summary:hover { color: var(--ds-accent); }
.site-more-menu { position: absolute; z-index: 25; top: calc(100% + 8px); right: -18px; display: grid; gap: 3px; min-width: 190px; padding: 7px; border: 1px solid var(--ds-line); border-radius: 11px; background: var(--ds-surface); box-shadow: var(--ds-shadow); }
.site-more-menu a { padding: 10px 11px; border-radius: 7px; color: var(--ds-muted); }
.site-more-menu a:hover, .site-more-menu a.is-active { background: var(--ds-accent-soft); color: var(--ds-accent); }
.site-body .feature-available { border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-line)); background: var(--ds-accent-soft); color: var(--ds-accent); }
.site-body .account-integration > div span { border-radius: 8px; }
.nav-calculator, .theme-toggle { min-height: 38px; border: 1px solid var(--ds-line-strong); border-radius: 9px; background: var(--ds-surface); color: var(--ds-ink) !important; font: 600 11px Manrope, sans-serif; }
.nav-calculator { padding: 0 14px; }
.nav-calculator:hover, .theme-toggle:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.theme-toggle { padding: 0 11px; }
.section-frame { margin-left: clamp(20px, 5vw, 74px); margin-right: clamp(20px, 5vw, 74px); }
.site-main { max-width: 1460px; }
.hero { min-height: 590px; border-color: var(--ds-line); gap: clamp(30px, 4vw, 64px); }
.hero-copy h1, .page-hero h1, .not-found h1 { color: var(--ds-ink); font-family: Manrope, Inter, sans-serif; font-size: clamp(48px, 6.3vw, 88px); font-weight: 650; line-height: .98; letter-spacing: -.07em; }
.hero-copy h1 em, .page-hero h1 em, .not-found h1 em { color: var(--ds-accent); }
.hero-lead, .page-hero > p, .section-intro p, .audience-copy p { color: var(--ds-muted); }
.eyebrow, .micro-label, .footer-label, .visual-label { color: var(--ds-accent); }
.hero-caption { color: var(--ds-muted); }
.signal-dot { background: var(--ds-accent); box-shadow: 0 0 0 5px var(--ds-accent-soft); }
.hero-visual, .page-visual, .service-map, .request-form, .account-card, .legal-sheet, .case-placeholder, .contact-card, .about-surface, .process-board, .brief-device, .business-screen, .faq-index, .scenario-card, .scenario-aside, .calc-teaser-card, .proof-item, .access-cards article, .legal-document, .brief-paper {
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-surface); box-shadow: var(--ds-shadow);
}
.hero-visual { background: var(--ds-surface-raised); }
.hero-note { background: var(--ds-surface); border-color: var(--ds-line); color: var(--ds-ink); }
.hero-note span, .visual-caption span { color: var(--ds-muted); }
.hero-note b, .visual-caption b { color: var(--ds-ink); }
.board-top, .board-foot, .board-product, .board-flow, .process-board-row, .business-screen-grid > div { border-color: var(--ds-line); }
.product-photo, .hero-center { background: var(--ds-accent-soft); color: var(--ds-accent); }
.hero-center { box-shadow: none; }
.button { min-height: 46px; border-radius: 10px; font: 650 12px Manrope, sans-serif; }
.button-dark { background: var(--ds-accent); color: #fff; }
html[data-theme='dark'] .button-dark { color: #142019; }
.button-dark:hover { background: var(--ds-accent-hover); }
.button-acid { background: var(--ds-accent-soft); color: var(--ds-accent); }
.button-quiet { border-color: var(--ds-line-strong); color: var(--ds-ink); }
.button-quiet:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.text-link { color: var(--ds-accent); border-color: var(--ds-line-strong); font-family: Manrope, sans-serif; }
.service-card, .client-flow article, .business-grid article, .principle-grid article, .case-placeholder, .faq-list details, .private-notes > div, .process-row, .proof-item, .case-sheet, .account-integration, .contact-aside, .legal-meta, .step-card {
  border-color: var(--ds-line); border-radius: 14px; background: var(--ds-surface);
}
.service-card:hover, .client-flow article:hover, .business-grid article:hover, .principle-grid article:hover, .case-placeholder:hover { border-color: var(--ds-line-strong); box-shadow: var(--ds-shadow); }
.service-card h3, .client-flow h3, .business-grid h3, .section-intro h2, .service-map h2, .split-cta h2, .account-card h2, .contact-card h2 { color: var(--ds-ink); font-family: Manrope, sans-serif; letter-spacing: -.045em; }
.service-card p, .process-row p, .principle-grid p { color: var(--ds-muted); }
.site-body :is(input, select, textarea) { border-color: var(--ds-line-strong); border-radius: 9px; background: var(--ds-surface); color: var(--ds-ink); }
.site-body :is(input, select, textarea):focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
.request-form { padding: clamp(20px, 3vw, 34px); }
.request-form label > span { color: var(--ds-muted); }
.request-form .form-check input { accent-color: var(--ds-accent); }
.form-status, .legal-status { border-radius: 10px; }
.site-footer { border-color: var(--ds-line); background: var(--ds-surface); }
.site-footer a:hover { color: var(--ds-accent); }
.footer-bottom { border-color: var(--ds-line); color: var(--ds-muted); }
.page-hero { border-color: var(--ds-line); }
.page-hero-stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr); align-items: center; gap: clamp(26px, 4vw, 58px); max-width: 1460px; margin: 0 auto; padding: clamp(30px, 4vw, 58px) clamp(20px, 5vw, 74px) clamp(36px, 5vw, 68px); }
.page-hero-stage > .page-hero { width: 100%; min-width: 0; min-height: 350px; margin: 0; padding: 36px 0; align-content: center; border-top: 0; }
.page-hero-stage .page-hero h1 { max-width: 760px; margin-top: 22px; font-size: clamp(42px, 5.1vw, 69px); line-height: 1.02; }
.page-hero-stage .page-hero > p { max-width: 590px; font-size: 16px; line-height: 1.7; }
.page-hero-stage .page-visual { width: 100%; max-width: none; min-height: 350px; margin: 0; padding: 22px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--ds-line); border-radius: 16px; background: var(--ds-surface); box-shadow: var(--ds-shadow); }
.page-hero-stage .visual-caption { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 14px; }
.page-hero-stage .visual-caption b { font: 600 13px/1.45 Manrope, Inter, sans-serif; }
.page-hero-stage .process-board, .page-hero-stage .business-screen, .page-hero-stage .contact-card, .page-hero-stage .legal-document, .page-hero-stage .brief-device, .page-hero-stage .about-surface, .page-hero-stage .faq-index { width: 100%; max-width: none; margin: 18px 0; }
.page-hero-stage .visual-route { grid-template-columns: 1fr 18px 1fr 18px 1fr; gap: 5px; margin: 22px 0; }
.page-hero-stage .visual-route article { min-height: 110px; padding: 11px; border-radius: 10px; background: var(--ds-surface-raised); box-shadow: none; }
.page-hero-stage .visual-route article.is-active { background: var(--ds-accent-soft); border-color: var(--ds-accent); transform: none; }
.page-hero-stage .visual-route article b { color: var(--ds-ink); font: 650 15px Manrope, sans-serif; }
.page-hero-stage .visual-route article small { color: var(--ds-muted); font: 10px/1.35 Manrope, sans-serif; }
.page-hero-stage .process-board { padding: 15px; border-radius: 12px; background: var(--ds-surface-raised); color: var(--ds-ink); box-shadow: none; }
.page-hero-stage .process-board-top { color: var(--ds-muted); border-color: var(--ds-line); }
.page-hero-stage .process-board-row { color: var(--ds-ink); border-color: var(--ds-line); }
.page-hero-stage .process-board-row em { color: var(--ds-accent); }
.page-hero-stage .brief-device, .page-hero-stage .business-screen, .page-hero-stage .contact-card, .page-hero-stage .legal-document, .page-hero-stage .faq-index, .page-hero-stage .about-surface { border-color: var(--ds-line); border-radius: 12px; background: var(--ds-surface-raised); color: var(--ds-ink); box-shadow: none; }
.page-hero-stage .business-screen-grid { gap: 7px; background: transparent; border: 0; }
.page-hero-stage .business-screen-grid > div { border: 1px solid var(--ds-line); border-radius: 8px; background: var(--ds-surface); }
.page-hero-stage .business-screen-grid strong { color: var(--ds-ink); font: 600 13px/1.4 Manrope, sans-serif; }
.page-hero-stage .business-screen-grid i { background: var(--ds-accent); }
.page-hero-stage .business-screen-head, .page-hero-stage .business-screen-foot { color: var(--ds-muted); }
.page-hero-stage .business-screen-head b { color: var(--ds-accent); }
.page-hero-stage .about-seal { border-color: var(--ds-accent); color: var(--ds-accent); }
.page-hero-stage .about-coordinate span { color: var(--ds-accent); }
.page-hero-stage .about-stamp { color: var(--ds-muted); }
.page-hero-stage .brief-device-title em { color: var(--ds-accent); }
.page-hero-stage .contact-card { color: var(--ds-ink); }
.page-hero-stage .contact-card-line, .page-hero-stage .contact-card-head { border-color: var(--ds-line); }
.page-hero-stage .contact-card-progress i { background: var(--ds-line-strong); }
.page-hero-stage .contact-card-progress i:first-child { background: var(--ds-accent); }
.page-hero-stage .legal-document-head { border-color: var(--ds-line-strong); color: var(--ds-muted); }
.page-hero-stage .faq-index > div { border-color: var(--ds-line); }
.page-hero-stage .faq-index .is-open { padding-left: 9px; border-left-color: var(--ds-accent); background: var(--ds-accent-soft); }
.page-hero-stage .faq-index b, .page-hero-stage .brief-device-title, .page-hero-stage .contact-card-head b, .page-hero-stage .contact-card-line strong, .page-hero-stage .access-cards b { color: var(--ds-ink); font: 600 15px Manrope, sans-serif; }
.page-hero-stage .access-cards article { min-height: 128px; border-color: var(--ds-line); border-radius: 10px; background: var(--ds-surface-raised); box-shadow: none; }
.page-hero-stage .access-cards article.is-current { border-color: var(--ds-accent); background: var(--ds-accent-soft); transform: none; }
.page-hero-stage .access-cards small, .page-hero-stage .contact-card-head i, .page-hero-stage .about-coordinate small { color: var(--ds-muted); }
.page-hero-stage .case-stack { min-height: 190px; }
.page-hero-stage .case-sheet { border-color: var(--ds-line); border-radius: 10px; background: var(--ds-surface-raised); box-shadow: 0 8px 20px rgba(25, 43, 34, .06); }
.page-hero-stage .case-sheet.back, .page-hero-stage .case-sheet.middle { background: var(--ds-accent-soft); }
.page-hero-stage .case-sheet b { color: var(--ds-ink); font: 600 17px Manrope, sans-serif; }
.page-hero-stage .legal-document-lines i { background: var(--ds-line); }
.page-hero-stage .legal-document-status { border-color: var(--ds-line); color: var(--ds-warn); }
.page-hero-stage .visual-label { color: var(--ds-accent); }

/* Calculator workspace */
.workspace-skip { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; background: var(--ds-ink); color: var(--ds-canvas); }
.workspace-skip:focus { transform: none; }
.app.guan-shell { color: var(--ds-ink); }
.guan-shell .topbar { position: sticky; top: 8px; z-index: 20; width: calc(100% - 40px); max-width: 1460px; margin: 8px auto 0; padding: 9px clamp(12px, 2vw, 26px); border: 1px solid var(--ds-line); border-radius: 14px; background: color-mix(in srgb, var(--ds-surface) 94%, transparent); box-shadow: 0 5px 22px rgba(25, 43, 34, .05); backdrop-filter: blur(14px); }
.guan-shell .topbar-inner { gap: clamp(10px, 1.6vw, 24px); }
.guan-shell .brand-button { gap: 9px; }
.guan-shell .brand-button .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--ds-accent); color: #fff; box-shadow: none; }
.guan-shell .brandname { margin: 0; color: var(--ds-ink); font: 800 15px Manrope, sans-serif; letter-spacing: .1em; }
.guan-shell .sub { color: var(--ds-muted); font: 9px Manrope, sans-serif; letter-spacing: .08em; }
.guan-shell .global-links { gap: 4px; }
.guan-shell .global-links .nav, .guan-shell .theme-toggle { min-height: 37px; border: 1px solid transparent; border-radius: 9px; color: var(--ds-muted); }
.guan-shell .global-links .nav:hover { background: var(--ds-accent-soft); color: var(--ds-accent); }
.guan-shell .global-links .nav.active { border-color: var(--ds-line); background: var(--ds-accent-soft); color: var(--ds-accent); }
.guan-shell .global-links .nav.active b { color: var(--ds-accent); }
.guan-shell .global-links .nav.active::after { display: none; }
.guan-shell .topbar-tools { gap: 10px; }
.guan-shell .workspace-home { color: var(--ds-muted); }
.guan-shell .workspace-home:hover { color: var(--ds-accent); }
.guan-shell .theme-toggle { border-color: var(--ds-line); background: var(--ds-surface); color: var(--ds-ink); }
.guan-shell .module-chip { border-color: var(--ds-line); border-radius: 7px; color: var(--ds-muted); }
.guan-shell .profile-chip { border-left-color: var(--ds-line); }
.guan-shell .profile-chip b { color: var(--ds-ink); }
.guan-shell .profile-chip small { color: var(--ds-muted); }
.guan-shell .steps { display: flex; align-items: center; width: min(100%, 780px); margin: 0 auto 23px; padding: 0; list-style: none; }
.guan-shell .steps > .step { flex: 0 1 auto; }
.guan-shell .steps > .line { flex: 1 1 60px; width: auto; min-width: 12px; margin: 0 clamp(8px, 2vw, 22px); }
.guan-shell .steps .step b { flex: 0 0 34px; }
.guan-shell .steps .step span { font-weight: 600; }
.guan-shell main { max-width: 1340px; padding: 36px clamp(20px, 5vw, 72px) 80px; }
.guan-shell .hero-strip { align-items: end; margin-bottom: 26px; border-color: var(--ds-line); }
.guan-shell .hero-strip h1 { color: var(--ds-ink); font: 650 clamp(34px, 4vw, 52px)/1.02 Manrope, sans-serif; letter-spacing: -.06em; }
.guan-shell .hero-copy p { color: var(--ds-muted); }
.guan-shell .eyebrow, .guan-shell .section-kicker { color: var(--ds-accent); }
.guan-shell .hero-rail, .guan-shell .saved { color: var(--ds-muted); }
.guan-shell .access-badge { border-color: var(--ds-line); color: var(--ds-muted); }
.guan-shell .saved .status-dot.online { background: var(--ds-accent); }
.guan-shell :is(.panel, .visual-studio, .module-context, .workspace-visual, .historyitem, .settingcard, .visual-card, .resultcard) { border: 1px solid var(--ds-line); border-radius: 15px; background: var(--ds-surface); box-shadow: var(--ds-shadow); }
.guan-shell :is(.panel, .visual-studio, .module-context, .workspace-visual, .historyitem, .settingcard, .visual-card, .resultcard)::before { display: none; }
.guan-shell :is(.panelhead, .panel-header) { border-color: var(--ds-line); }
.guan-shell :is(h2, h3, .section-heading h2) { color: var(--ds-ink); font-family: Manrope, sans-serif; letter-spacing: -.04em; }
.guan-shell p, .guan-shell .panelhead p, .guan-shell .muted, .guan-shell .saved, .guan-shell .field > span { color: var(--ds-muted); }
.guan-shell .tag { border: 1px solid var(--ds-line); border-radius: 7px; background: var(--ds-surface-raised); color: var(--ds-muted); }
.guan-shell .tag.success { background: var(--ds-accent-soft); color: var(--ds-accent); }
.guan-shell .step { color: var(--ds-muted); }
.guan-shell .step b { border-color: var(--ds-line-strong); }
.guan-shell .step.current { color: var(--ds-accent); }
.guan-shell .step.current b { border-color: var(--ds-accent); background: var(--ds-accent); color: white; }
html[data-theme='dark'] .guan-shell .step.current b { color: #142019; }
.guan-shell .line { background: var(--ds-line); }
.guan-shell :is(.inputwrap, .sourcebox, .source-input input, .mini, textarea, .mode select, .mode input, .catalog-toolbar input, .catalog-toolbar select) { border-color: var(--ds-line-strong); border-radius: 9px; background: var(--ds-surface-raised); color: var(--ds-ink); }
.guan-shell :is(input, select, textarea):focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
.guan-shell :is(input, textarea)::placeholder { color: var(--ds-faint); }
.guan-shell .primary { border-radius: 9px; background: var(--ds-accent); color: #fff; box-shadow: none; }
html[data-theme='dark'] .guan-shell .primary { color: #142019; }
.guan-shell .primary:hover { background: var(--ds-accent-hover); transform: translateY(-1px); }
.guan-shell .secondary { border-color: var(--ds-line-strong); border-radius: 9px; background: var(--ds-surface); color: var(--ds-ink); }
.guan-shell .secondary:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.guan-shell :is(.delivery, .calcpreview, .ratebar, .manual-card, .snapshot, .empty, .recognized) { border-color: var(--ds-line); border-radius: 11px; background: var(--ds-surface-raised); color: var(--ds-ink); }
.guan-shell .deliverychoices button { border-color: var(--ds-line); border-radius: 9px; background: var(--ds-surface); color: var(--ds-ink); }
.guan-shell .deliverychoices button.chosen { border-color: var(--ds-accent); background: var(--ds-accent-soft); box-shadow: 0 0 0 1px var(--ds-accent); }
.guan-shell .costicon { border-radius: 8px; background: var(--ds-accent-soft); color: var(--ds-accent); }
.guan-shell :is(.costlist, .costrow, .breakrow, .generated, .rounding, .settingline) { border-color: var(--ds-line); }
.guan-shell .info, .guan-shell .uncertain, .guan-shell .notice { border-color: color-mix(in srgb, var(--ds-warn) 30%, var(--ds-line)); border-radius: 9px; background: color-mix(in srgb, var(--ds-warn) 9%, var(--ds-surface)); color: var(--ds-warn); }
.guan-shell .source-status.ok { border-color: var(--ds-line); border-radius: 9px; background: var(--ds-accent-soft); color: var(--ds-accent); }
.guan-shell .source-status.warn { border-radius: 9px; }
.guan-shell .profitline { border-radius: 9px; background: var(--ds-accent-soft); color: var(--ds-accent); }
.guan-shell .empty { border-style: dashed; }
.guan-shell .toast { border: 1px solid var(--ds-line); border-radius: 10px; background: var(--ds-ink); color: var(--ds-canvas); box-shadow: var(--ds-shadow); }
.guan-shell .danger { color: #a44747; }
.guan-shell .quick button, .guan-shell .rounding button { border-color: var(--ds-line); border-radius: 8px; color: var(--ds-muted); }
.guan-shell .quick button:hover, .guan-shell .rounding button.on { border-color: var(--ds-accent); background: var(--ds-accent-soft); color: var(--ds-accent); }
.guan-shell .faq-list details, .guan-shell .evidence { border-color: var(--ds-line); }
.guan-shell .service-overview, .guan-shell .faq-section { margin-top: 36px; }
.guan-shell .overview-grid article { border-color: var(--ds-line); border-radius: 12px; background: var(--ds-surface); }
.guan-shell .overview-grid article > span { color: var(--ds-accent); }
.guan-shell .overview-grid article h3 { color: var(--ds-ink); }
.guan-shell .overview-grid article p { color: var(--ds-muted); }

@media (max-width: 980px) {
  .site-header { margin-left: 12px; margin-right: 12px; }
  .site-nav { gap: 11px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); }
  .guan-shell .module-chip { display: none; }
}
@media (max-width: 1120px) and (min-width: 721px) {
  .site-header { align-items: flex-start; }
  .site-nav { justify-content: flex-end; flex-wrap: wrap; gap: 8px 13px; }
  .page-hero-stage { grid-template-columns: minmax(0, 1fr) minmax(290px, .82fr); gap: 22px; }
}
@media (max-width: 720px) {
  .site-header { margin: 8px 10px 0; padding: 11px 13px; border-radius: 12px; }
  .site-body .site-logo { width: auto !important; height: auto !important; }
  .site-logo small { font-size: 8px; }
  .menu-toggle { min-height: 38px; padding: 0 8px; color: var(--ds-ink); }
  .menu-toggle span { background: var(--ds-ink); }
  .site-nav { top: 61px; margin: 0; padding: 9px; gap: 2px; border-color: var(--ds-line); border-radius: 12px; background: var(--ds-surface); box-shadow: var(--ds-shadow); }
  .site-nav a:not(.nav-calculator), .site-nav .theme-toggle { padding: 12px 10px; border-bottom: 1px solid var(--ds-line); }
  .site-nav .nav-calculator { margin-top: 6px; }
  .site-more { width: 100%; }
  .site-more summary { width: 100%; padding: 12px 10px; border-bottom: 1px solid var(--ds-line); }
  .site-more-menu { position: static; min-width: 0; padding: 4px 0 8px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .site-more-menu a { padding: 10px; border-bottom: 1px solid var(--ds-line); }
  .section-frame { margin-left: 16px; margin-right: 16px; }
  .hero { min-height: auto; padding-top: 43px; padding-bottom: 44px; grid-template-columns: 1fr; }
  .hero-copy h1, .page-hero h1, .not-found h1 { font-size: clamp(43px, 12vw, 64px); }
  .hero-caption { margin-top: 26px; flex-wrap: wrap; }
  .hero-visual { min-height: 350px; }
  .site-body :is(.service-card, .client-flow article, .business-grid article, .principle-grid article, .case-placeholder, .request-form, .legal-sheet, .account-card, .contact-card, .scenario-card, .scenario-aside, .page-visual) { border-radius: 14px; }
  .page-hero-stage { grid-template-columns: 1fr; gap: 16px; padding: 15px 16px 34px; }
  .page-hero-stage > .page-hero { min-height: 0; padding: 28px 0 14px; }
  .page-hero-stage .page-hero h1 { font-size: clamp(40px, 11vw, 58px); }
  .page-hero-stage .page-hero > p { font-size: 15px; }
  .page-hero-stage .page-visual { min-height: 300px; padding: 17px; }
  .page-hero-stage .access-cards { gap: 6px; }
  .page-hero-stage .access-cards article { min-height: 112px; padding: 10px; }
  .page-hero-stage .visual-route article { min-height: 95px; }
  .guan-shell .topbar { position: relative; top: auto; width: calc(100% - 20px); margin-top: 8px; padding: 8px; border-radius: 12px; }
  .guan-shell .topbar-inner { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
  .guan-shell .brand-button { padding: 0 3px; }
  .guan-shell .global-links { grid-column: 1 / -1; grid-row: 2; display: flex; width: 100%; }
  .guan-shell .global-links .nav { flex: 1; min-width: 0; justify-content: center; padding: 0 5px; font-size: 11px; }
  .guan-shell .global-links .nav b { display: none; }
  .guan-shell .topbar-tools { justify-content: end; }
  .guan-shell .workspace-home, .guan-shell .profile-chip { display: none; }
  .guan-shell .theme-toggle { min-height: 34px; padding: 0 8px; font-size: 10px; }
  .guan-shell main { padding: 24px 15px 48px; }
  .guan-shell .hero-strip { gap: 14px; }
  .guan-shell .hero-strip h1 { font-size: clamp(30px, 8vw, 42px); }
  .guan-shell .hero-rail { align-items: flex-start; }
  .guan-shell .service-overview, .guan-shell .faq-section { margin-top: 26px; }
  .guan-shell .steps { margin-bottom: 18px; }
}
@media (max-width: 420px) {
  .site-logo { gap: 8px; }
  .site-logo small { max-width: 175px; overflow: hidden; text-overflow: ellipsis; }
  .hero-visual { min-height: 305px; }
  .guan-shell .hero-rail { display: none; }
  .guan-shell .step span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* Compact progress labels stay visible at phone widths. */
@media (max-width: 420px) {
  .guan-shell .steps { width: 100%; gap: 3px; }
  .guan-shell .steps > .line { margin: 0 5px; }
  .guan-shell .step { gap: 6px; font-size: 10px; }
  .guan-shell .step b { flex-basis: 28px; width: 28px; height: 28px; }
  .guan-shell .step span { display: inline; }
}
.site-body :disabled { opacity: .58; cursor: not-allowed; }
.guan-shell .steps .step { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }