:root {
  --bg: #faf6ee;
  --surface: #f8f8f4;
  --surface-soft: #f2ede4;
  --text: #3a3a3d;
  --muted: #737379;
  --faint: #a4a4aa;
  --primary: #8fb8c8;
  --primary-deep: #668fa0;
  --sky: #a8c8e0;
  --mint: #b8d8c8;
  --butter: #f0e0a8;
  --blush: #e8c0c8;
  --lavender: #c8c0e0;
  --peach: #f0c8a8;
  --line: rgba(58, 58, 61, 0.08);
  --shadow-sm: 0 6px 18px rgba(58, 58, 61, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --shadow-md: 0 14px 36px rgba(58, 58, 61, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --shadow-lg: 0 28px 70px rgba(58, 58, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ease: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --shell: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.section { padding: 112px 0; }
.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; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--text);
  color: var(--surface);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid rgba(58, 58, 61, 0.04);
  background: rgba(250, 246, 238, 0.9);
  backdrop-filter: blur(18px);
}

.header-inner { min-height: 78px; display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 15px;
  color: #f8f8f4;
  background: var(--primary);
  box-shadow: 0 6px 14px rgba(102, 143, 160, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-weight: 800;
}

.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 17px; letter-spacing: -0.02em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav a { position: relative; color: var(--muted); font-size: 14px; font-weight: 650; }
.site-nav a::after { position: absolute; right: 50%; bottom: -9px; left: 50%; height: 3px; border-radius: 99px; background: var(--primary); content: ""; transition: right var(--ease), left var(--ease); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; left: 0; }

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 0;
  border-radius: 17px;
  color: #f8f8f4;
  background: var(--primary-deep);
  box-shadow: 0 10px 24px rgba(102, 143, 160, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 15px;
  font-weight: 750;
  transition: transform var(--ease), box-shadow var(--ease);
}

.button:hover, .button:focus-visible { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 30px rgba(102, 143, 160, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.42); }
.button:active { transform: translateY(1px) scale(0.98); }
.button-small { min-height: 42px; padding: 0 18px; border-radius: 14px; font-size: 13px; }
.button-secondary { color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }

.menu-button { display: none; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.menu-button > span:not(.sr-only) { display: block; width: 100%; height: 2px; margin: 4px 0; border-radius: 99px; background: var(--text); transition: transform 220ms ease, opacity 220ms ease; }
.menu-button[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero-section { position: relative; overflow: hidden; padding: 96px 0 112px; }
.hero-cloud { position: absolute; border-radius: 999px; filter: blur(2px); opacity: 0.45; }
.hero-cloud-one { top: 48px; left: -130px; width: 310px; height: 220px; background: var(--sky); }
.hero-cloud-two { right: -120px; bottom: 5px; width: 320px; height: 250px; background: var(--peach); }

.hero-grid { position: relative; display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 68px; }
.hero-copy { padding: 20px 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--primary-deep); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.eyebrow > span { width: 24px; height: 7px; border-radius: 99px; background: var(--butter); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.hero-copy h1 { max-width: 570px; margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.12; letter-spacing: -0.055em; }
.hero-lead { max-width: 560px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0 0; padding: 0; color: var(--muted); font-size: 12px; list-style: none; }
.hero-notes li { position: relative; padding-left: 15px; }
.hero-notes li::before { position: absolute; top: 0.55em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); content: ""; }

.product-stage { position: relative; padding: 26px 0 24px; }
.stage-dot { position: absolute; border-radius: 50%; box-shadow: var(--shadow-sm); }
.stage-dot-sky { top: 0; right: 42px; width: 64px; height: 64px; background: var(--sky); }
.stage-dot-butter { bottom: 0; left: -28px; width: 78px; height: 78px; background: var(--butter); }
.app-window { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(58, 58, 61, 0.05); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-lg); transform: rotate(1.1deg); }
.window-topbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(248, 248, 244, 0.92); }
.mini-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mini-brand > span, .avatar { display: grid; place-items: center; border-radius: 10px; font-weight: 800; }
.mini-brand > span { width: 28px; height: 28px; color: #f8f8f4; background: var(--primary); }
.avatar { width: 30px; height: 30px; color: var(--text); background: var(--butter); font-size: 11px; }
.window-hero { display: flex; min-height: 128px; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px; background: #f4efe7; }
.window-hero > div:first-child { display: grid; gap: 9px; }
.window-hero small { color: var(--primary-deep); font-size: 10px; font-weight: 800; }
.window-hero strong { max-width: 250px; font-size: 20px; line-height: 1.35; }
.focus-chip { display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); font-size: 8px; font-weight: 700; white-space: nowrap; }
.focus-chip span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.window-body { padding: 21px 22px 25px; }
.window-section-head, .window-section-head > div { display: flex; align-items: center; }
.window-section-head { justify-content: space-between; gap: 14px; margin-bottom: 16px; font-size: 10px; }
.window-section-head > div { gap: 7px; }
.window-section-head button { padding: 7px 10px; border: 0; border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: 8px; }
.mint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flow-card { min-height: 184px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.flow-card-sky { border-top: 5px solid var(--sky); }
.flow-card-peach { border-top: 5px solid var(--peach); }
.flow-card-top, .flow-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flow-card-top { color: var(--faint); font-size: 7px; }
.flow-card-top b { letter-spacing: 2px; }
.flow-card h2 { margin: 18px 0 8px; font-size: 12px; line-height: 1.4; }
.flow-card p { min-height: 34px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.progress { overflow: hidden; height: 5px; margin: 16px 0 10px; border-radius: 99px; background: rgba(58, 58, 61, 0.07); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.progress-68 { width: 68%; }
.progress-92 { width: 92%; }
.flow-card-foot { color: var(--muted); font-size: 7px; }
.stamp { padding: 4px 6px; border-radius: 6px; color: #6a5a2a; background: var(--butter); font-weight: 800; }
.stamp-approved { color: #3a5a3a; background: var(--mint); }
.floating-note { position: absolute; z-index: 3; right: -24px; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-md); transform: rotate(-2deg); }
.floating-note > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 10px; color: #3a5a3a; background: var(--mint); font-weight: 900; }
.floating-note div { display: grid; gap: 3px; }
.floating-note strong { font-size: 10px; }
.floating-note small { color: var(--muted); font-size: 8px; }

.proof-strip { border-block: 1px solid var(--line); background: rgba(248, 248, 244, 0.68); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-grid p { display: grid; gap: 7px; margin: 0; padding: 28px 32px; text-align: center; }
.proof-grid p + p { border-left: 1px solid var(--line); }
.proof-grid strong { font-size: 14px; }
.proof-grid span { color: var(--muted); font-size: 12px; }

.section-heading { max-width: 720px; margin-bottom: 52px; }
.section-heading h2, .workflow-copy h2, .feedback-copy h2, .faq-heading h2, .final-cta h2 { margin: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.22; letter-spacing: -0.045em; }
.section-heading > p:last-child, .workflow-copy > p, .feedback-copy > p, .faq-heading > p { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.section-heading-center { margin-inline: auto; text-align: center; }
.section-heading-center .eyebrow { justify-content: center; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { position: relative; overflow: hidden; min-height: 330px; padding: 34px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-sm); }
.feature-card::after { position: absolute; right: -30px; bottom: -45px; width: 150px; height: 150px; border-radius: 50%; content: ""; opacity: 0.55; }
.feature-sky::after { background: var(--sky); }
.feature-mint::after { background: var(--mint); }
.feature-butter::after { background: var(--butter); }
.feature-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; background: var(--surface-soft); box-shadow: var(--shadow-sm); color: var(--primary-deep); font-size: 12px; font-weight: 900; }
.feature-card h3 { max-width: 260px; margin: 52px 0 14px; font-size: 22px; line-height: 1.35; letter-spacing: -0.02em; }
.feature-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.feature-tag { position: absolute; z-index: 1; right: 24px; bottom: 24px; padding: 8px 11px; border-radius: 99px; color: var(--text); background: rgba(248, 248, 244, 0.75); font-size: 10px; font-weight: 800; }

.workflow-section { background: var(--surface-soft); }
.workflow-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 90px; }
.workflow-copy > p { max-width: 480px; }
.text-link { display: inline-flex; gap: 8px; margin-top: 28px; color: var(--primary-deep); font-size: 14px; font-weight: 800; }
.workflow-steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.workflow-steps li { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 112px; padding: 22px 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); }
.step-number { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 15px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 900; }
.workflow-steps div { display: grid; gap: 6px; }
.workflow-steps strong { font-size: 20px; }
.workflow-steps small { color: var(--muted); font-size: 13px; }
.step-color { position: absolute; right: -30px; width: 112px; height: 112px; border-radius: 50%; opacity: 0.65; }
.color-sky { background: var(--sky); }
.color-mint { background: var(--mint); }
.color-peach { background: var(--peach); }

.feedback-panel { display: grid; grid-template-columns: 1fr 0.9fr; align-items: center; gap: 80px; padding: 72px; overflow: hidden; border-radius: 34px; background: #e9ddd0; box-shadow: var(--shadow-md); }
.feedback-visual { position: relative; min-height: 400px; }
.feedback-form-card { position: absolute; top: 0; left: 0; z-index: 1; display: grid; width: min(360px, 88%); gap: 18px; padding: 30px; border-radius: 27px; background: var(--surface); box-shadow: var(--shadow-lg); transform: rotate(-2deg); }
.form-kicker { color: var(--primary-deep); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; }
.feedback-form-card strong { font-size: 21px; line-height: 1.4; }
.fake-input { height: 100px; padding: 15px; border-radius: 16px; color: var(--faint); background: var(--surface-soft); font-size: 12px; }
.fake-button { padding: 13px; border-radius: 14px; color: #f8f8f4; background: var(--primary-deep); text-align: center; font-size: 11px; font-weight: 800; }
.flow-result-card { position: absolute; right: 0; bottom: 18px; z-index: 2; display: grid; width: min(260px, 68%); gap: 12px; padding: 23px; border-top: 6px solid var(--mint); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); transform: rotate(3deg); }
.flow-result-card > span { color: var(--primary-deep); font-size: 9px; font-weight: 900; }
.flow-result-card strong { font-size: 14px; }
.flow-result-card div { display: flex; gap: 6px; }
.flow-result-card i { width: 9px; height: 9px; border-radius: 50%; background: var(--butter); }
.flow-result-card i:nth-child(2) { background: var(--blush); }
.flow-result-card i:nth-child(3) { background: var(--sky); }
.feedback-copy ul { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.feedback-copy li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.feedback-copy li span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 8px; color: #3a5a3a; background: var(--mint); font-size: 10px; font-weight: 900; }

.use-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.use-case-grid article { padding: 36px 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; }
.case-shape { display: grid; width: 66px; height: 66px; margin: 0 auto 28px; place-items: center; border-radius: 22px; box-shadow: var(--shadow-sm); font-size: 26px; font-weight: 700; }
.case-blush { background: var(--blush); }
.case-lavender { background: var(--lavender); }
.case-peach { background: var(--peach); }
.use-case-grid h3 { margin: 0 0 12px; font-size: 20px; }
.use-case-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

.faq-section { background: var(--surface); }
.faq-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 90px; }
.faq-heading { position: sticky; top: 120px; align-self: start; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { border: 1px solid var(--line); border-radius: 20px; background: var(--bg); box-shadow: var(--shadow-sm); }
.faq-list summary { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; cursor: pointer; font-size: 15px; font-weight: 750; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--surface-soft); transition: transform var(--ease); }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -4px 0 0; padding: 0 64px 24px 24px; color: var(--muted); font-size: 14px; line-height: 1.75; }

.final-cta-section { padding: 96px 0; }
.final-cta { position: relative; overflow: hidden; padding: 82px 40px; border-radius: 36px; background: #e1ebeb; box-shadow: var(--shadow-md); text-align: center; }
.final-cta .eyebrow { justify-content: center; }
.final-cta h2 { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.final-cta > p:not(.eyebrow) { position: relative; z-index: 1; margin: 20px auto 30px; color: var(--muted); font-size: 16px; }
.final-cta .button { position: relative; z-index: 1; }
.cta-shape { position: absolute; border-radius: 50%; opacity: 0.72; }
.cta-shape-one { top: -60px; left: -30px; width: 190px; height: 190px; background: var(--butter); }
.cta-shape-two { right: -45px; bottom: -80px; width: 240px; height: 240px; background: var(--sky); }

.site-footer { border-top: 1px solid var(--line); background: var(--surface-soft); }
.footer-main { display: grid; grid-template-columns: 1fr auto; gap: 60px; padding-block: 64px 48px; }
.footer-main > div > p { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.footer-main nav { display: flex; gap: 80px; }
.footer-main nav div { display: grid; align-content: start; gap: 12px; }
.footer-main nav strong { margin-bottom: 4px; font-size: 13px; }
.footer-main nav a { color: var(--muted); font-size: 12px; }
.footer-main nav a:hover { color: var(--primary-deep); }
.footer-bottom { display: flex; justify-content: space-between; padding-block: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }

/* ── 共用內頁 ── */
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"]::after { right: 0; left: 0; }
.subpage-hero { position: relative; overflow: hidden; padding: 92px 0 104px; }
.subpage-hero::after { position: absolute; right: -100px; bottom: -160px; width: 440px; height: 440px; border-radius: 50%; content: ""; opacity: 0.34; }
.subpage-hero-sky::after { background: var(--sky); }
.subpage-hero-peach::after { background: var(--peach); }
.subpage-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.9fr; align-items: center; gap: 80px; }
.subpage-copy { max-width: 650px; }
.breadcrumb { display: flex; gap: 8px; margin: 0 0 42px; color: var(--faint); font-size: 12px; }
.breadcrumb a:hover { color: var(--primary-deep); }
.subpage-copy h1 { margin: 0; font-size: clamp(44px, 5.5vw, 70px); line-height: 1.12; letter-spacing: -0.055em; }
.subpage-copy > p:not(.eyebrow, .breadcrumb) { margin: 26px 0 32px; color: var(--muted); font-size: 17px; line-height: 1.85; }

/* ── 功能頁 ── */
.feature-stack { position: relative; min-height: 440px; }
.stack-card { position: absolute; display: grid; gap: 8px; width: min(370px, 82%); padding: 27px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); box-shadow: var(--shadow-md); }
.stack-card > span { color: var(--primary-deep); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.stack-card strong { font-size: 17px; line-height: 1.45; }
.stack-card small { color: var(--muted); font-size: 11px; }
.stack-studio { top: 10px; right: 58px; border-top: 7px solid var(--sky); transform: rotate(3deg); }
.stack-flow { top: 145px; left: 0; z-index: 2; border-top: 7px solid var(--mint); transform: rotate(-3deg); }
.stack-canvas { right: 0; bottom: 8px; z-index: 3; border-top: 7px solid var(--peach); transform: rotate(2deg); }
.feature-detail-section { background: var(--surface); }
.feature-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.detail-card { position: relative; overflow: hidden; min-height: 420px; padding: 38px; border: 1px solid var(--line); border-radius: 28px; background: var(--bg); box-shadow: var(--shadow-sm); }
.detail-card::after { position: absolute; right: -55px; bottom: -65px; width: 190px; height: 190px; border-radius: 50%; content: ""; opacity: 0.42; }
.detail-sky::after { background: var(--sky); }
.detail-mint::after { background: var(--mint); }
.detail-butter::after { background: var(--butter); }
.detail-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 70px; }
.detail-number, .case-index { display: inline-flex; margin-bottom: 34px; padding: 7px 10px; border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; }
.detail-card h3 { position: relative; z-index: 1; margin: 0 0 14px; font-size: 26px; letter-spacing: -0.03em; }
.detail-card > p, .detail-copy > p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.check-list { position: relative; z-index: 1; display: grid; gap: 11px; margin: 24px 0 0; padding: 0; color: var(--muted); font-size: 13px; list-style: none; }
.check-list li { position: relative; padding-left: 24px; }
.check-list li::before { position: absolute; top: 1px; left: 0; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 6px; color: #3a5a3a; background: var(--mint); content: "✓"; font-size: 8px; font-weight: 900; }
.detail-demo { position: relative; z-index: 1; padding: 25px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); }
.demo-label { display: block; margin-bottom: 14px; color: var(--faint); font-size: 10px; font-weight: 800; }
.studio-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 15px; border-radius: 15px; color: var(--muted); }
.studio-row.is-selected { background: var(--surface-soft); color: var(--text); }
.studio-row i { width: 10px; height: 10px; border-radius: 50%; }
.dot-sky { background: var(--sky); }.dot-mint { background: var(--mint); }.dot-peach { background: var(--peach); }
.studio-row strong { font-size: 12px; }.studio-row small { font-size: 9px; }
.mini-flow { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 45px; padding: 24px; border-top: 6px solid var(--mint); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.mini-flow > span { color: var(--faint); font-size: 9px; }.mini-flow strong { font-size: 14px; }
.mini-progress { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }.mini-progress i { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--primary); }.mini-flow small { color: var(--muted); font-size: 10px; }
.canvas-lines { position: relative; z-index: 1; display: grid; gap: 13px; margin-top: 50px; padding: 25px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.canvas-lines span { height: 11px; border-radius: 99px; background: var(--surface-soft); }.canvas-lines .line-long { width: 92%; }.canvas-lines .line-mid { width: 67%; }.canvas-lines .line-check { width: 76%; margin-left: 24px; background: var(--butter); }.canvas-lines .line-check::before { position: absolute; left: 25px; width: 13px; height: 13px; border-radius: 4px; background: var(--surface-soft); content: ""; }.canvas-lines .line-check.is-done { width: 60%; background: var(--mint); }
.collaboration-section { background: var(--surface-soft); }
.collaboration-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.collaboration-visual { position: relative; min-height: 420px; padding: 70px 45px 40px; border-radius: 30px; background: #e2ece8; box-shadow: var(--shadow-md); }
.people-row { display: flex; justify-content: center; }
.people-row span, .team-avatars > span { display: grid; width: 58px; height: 58px; margin-left: -8px; place-items: center; border: 5px solid #e2ece8; border-radius: 50%; font-weight: 900; }
.person-one { background: var(--butter); }.person-two { background: var(--sky); }.person-three { background: var(--blush); }
.sync-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 38px 0; color: var(--primary-deep); font-size: 10px; font-weight: 900; }.sync-line i { height: 2px; background: rgba(102, 143, 160, 0.25); }
.activity-card { display: grid; gap: 8px; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md); }.activity-card span { color: var(--faint); font-size: 9px; }.activity-card strong { font-size: 14px; }.activity-card small { color: var(--muted); font-size: 11px; }
.collaboration-copy h2, .collection-copy h2, .safety-grid h2, .case-copy h2 { margin: 0; font-size: clamp(34px, 4vw, 49px); line-height: 1.22; letter-spacing: -0.045em; }.collaboration-copy > p, .collection-copy > p, .safety-grid > div > p, .case-copy > p { margin: 21px 0 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.plain-facts { display: grid; gap: 12px; margin-top: 30px; }.plain-facts p { display: grid; grid-template-columns: 110px 1fr; gap: 18px; margin: 0; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.plain-facts span { color: var(--muted); }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.tool-grid article { padding: 28px 24px; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); box-shadow: var(--shadow-sm); }.tool-shape { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 900; }.tool-blush { background: var(--blush); }.tool-sky { background: var(--sky); }.tool-mint { background: var(--mint); }.tool-butter { background: var(--butter); }.tool-grid h3 { margin: 28px 0 10px; font-size: 18px; }.tool-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.collection-feature-section { background: #ece2d8; }.collection-feature-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 85px; }.collection-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }.collection-path > div { display: grid; min-height: 180px; align-content: center; gap: 9px; padding: 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; }.collection-path > div > span { display: grid; width: 32px; height: 32px; margin: 0 auto 10px; place-items: center; border-radius: 11px; background: var(--butter); font-size: 10px; font-weight: 900; }.collection-path strong { font-size: 13px; }.collection-path small { color: var(--muted); font-size: 9px; }.collection-path > i { color: var(--primary-deep); font-style: normal; }
.safety-section { background: var(--surface); }.safety-grid { display: grid; grid-template-columns: 1fr 0.55fr; align-items: center; gap: 90px; }.trash-preview { position: relative; display: grid; justify-items: center; padding: 45px 20px 30px; }.trash-lid { width: 128px; height: 24px; border-radius: 11px; background: var(--sky); box-shadow: var(--shadow-sm); }.trash-lid::before { display: block; width: 48px; height: 14px; margin: -12px auto 0; border-radius: 9px 9px 0 0; background: var(--sky); content: ""; }.trash-body { display: flex; width: 108px; height: 120px; justify-content: center; gap: 13px; padding-top: 30px; border-radius: 8px 8px 28px 28px; background: var(--primary); box-shadow: var(--shadow-md); }.trash-body i { width: 7px; height: 52px; border-radius: 99px; background: rgba(248, 248, 244, 0.45); }.trash-preview small { margin-top: 20px; color: var(--muted); font-size: 11px; }

/* ── 使用情境頁 ── */
.case-orbit { position: relative; min-height: 440px; }.orbit-center { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: 142px; height: 142px; place-items: center; border-radius: 42px; background: var(--surface); box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); }.orbit-center span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; color: var(--surface); background: var(--primary); font-weight: 900; }.orbit-center strong { margin-top: -24px; font-size: 13px; }.orbit-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-md); font-size: 11px; }.orbit-card > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; }.orbit-feedback { top: 18px; left: 9%; transform: rotate(-3deg); }.orbit-feedback > span { background: var(--blush); }.orbit-team { top: 39%; right: 0; transform: rotate(3deg); }.orbit-team > span { background: var(--lavender); }.orbit-personal { bottom: 14px; left: 13%; transform: rotate(2deg); }.orbit-personal > span { background: var(--peach); }.case-orbit::before, .case-orbit::after { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(58, 58, 61, 0.16); border-radius: 50%; content: ""; transform: translate(-50%, -50%); }.case-orbit::before { width: 330px; height: 330px; }.case-orbit::after { width: 245px; height: 245px; }
.case-jump { position: sticky; z-index: 20; top: 78px; border-block: 1px solid var(--line); background: rgba(248, 248, 244, 0.92); backdrop-filter: blur(16px); }.case-jump > div { display: flex; justify-content: center; gap: 42px; }.case-jump a { display: flex; align-items: center; gap: 8px; padding: 20px 0; color: var(--muted); font-size: 12px; font-weight: 750; }.case-jump a:hover { color: var(--text); }.case-jump span { width: 8px; height: 8px; border-radius: 50%; }.dot-blush { background: var(--blush); }.dot-lavender { background: var(--lavender); }.dot-peach { background: var(--peach); }
.case-detail { scroll-margin-top: 140px; }.case-detail-alt { background: var(--surface-soft); }.case-detail-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; align-items: center; gap: 95px; }.reverse-grid .case-copy { order: 2; }.reverse-grid .scenario-board { order: 1; }.case-index { margin-bottom: 22px; }.case-benefits { display: grid; gap: 10px; margin-top: 30px; }.case-benefits p { display: grid; grid-template-columns: 105px 1fr; gap: 14px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.case-benefits span { color: var(--muted); }
.scenario-board { min-height: 440px; padding: 45px; border-radius: 30px; box-shadow: var(--shadow-md); }.scenario-feedback { display: grid; align-content: center; justify-items: center; background: #eee2e3; }.visitor-bubble, .result-flow { display: grid; width: min(370px, 100%); gap: 11px; padding: 23px; border-radius: 21px; background: var(--surface); box-shadow: var(--shadow-sm); }.visitor-bubble > span, .result-flow > span { color: var(--primary-deep); font-size: 9px; font-weight: 900; }.visitor-bubble strong, .result-flow strong { font-size: 13px; line-height: 1.5; }.visitor-bubble small { color: var(--muted); font-size: 9px; }.path-arrow { padding: 15px; color: var(--primary-deep); font-weight: 900; }.result-flow { border-top: 6px solid var(--mint); }.result-flow div { display: flex; flex-wrap: wrap; gap: 6px; }.result-flow i { padding: 6px 8px; border-radius: 7px; color: var(--muted); background: var(--surface-soft); font-size: 8px; font-style: normal; }
.scenario-team { display: grid; align-content: center; gap: 20px; background: #e7e3ee; }.team-studio-title { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }.team-studio-title > span { width: 11px; height: 11px; border-radius: 50%; }.team-studio-title strong { font-size: 14px; }.team-studio-title small { color: var(--muted); font-size: 9px; }.team-flow-list { display: grid; gap: 9px; }.team-flow-list p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 17px; border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 10px; }.team-flow-list strong { color: var(--primary-deep); font-size: 8px; }.team-avatars { display: flex; align-items: center; padding-top: 5px; }.team-avatars > span { width: 38px; height: 38px; margin-left: -5px; border-width: 3px; border-color: #e7e3ee; background: var(--butter); font-size: 9px; }.team-avatars > span:nth-child(2) { background: var(--sky); }.team-avatars > span:nth-child(3) { background: var(--blush); }.team-avatars small { margin-left: 12px; color: var(--muted); font-size: 9px; }
.scenario-personal { display: grid; align-content: center; gap: 18px; background: #eee1d4; }.personal-header { display: flex; align-items: center; gap: 10px; }.personal-header span { width: 11px; height: 11px; border-radius: 50%; }.personal-header strong { font-size: 14px; }.personal-canvas { display: grid; gap: 14px; padding: 25px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }.personal-canvas > strong { margin-bottom: 6px; font-size: 14px; }.personal-canvas p { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--muted); font-size: 10px; }.personal-canvas i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 5px; background: var(--surface-soft); font-size: 8px; font-style: normal; }.personal-canvas i.checked { color: #3a5a3a; background: var(--mint); }.personal-progress { height: 7px; overflow: hidden; margin-top: 5px; border-radius: 99px; background: var(--surface-soft); }.personal-progress span { display: block; width: 67%; height: 100%; border-radius: inherit; background: var(--primary); }.personal-canvas small { color: var(--muted); font-size: 9px; text-align: right; }
.fit-section { background: var(--surface); }.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.fit-grid article { padding: 38px; border: 1px solid var(--line); border-radius: 27px; box-shadow: var(--shadow-sm); }.fit-yes { background: #e7efea; }.fit-no { background: var(--surface-soft); }.fit-grid h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 20px; }.fit-grid h3 span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; background: var(--surface); font-size: 11px; }.fit-grid ul { display: grid; gap: 15px; margin: 0; padding: 0; color: var(--muted); font-size: 13px; list-style: none; }.fit-grid li { position: relative; padding-left: 20px; }.fit-grid li::before { position: absolute; top: 0.55em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); content: ""; }

/* ── 關於頁 ── */
.about-hero { position: relative; overflow: hidden; padding: 105px 0 60px; text-align: center; }
.about-hero-inner { position: relative; z-index: 2; display: grid; justify-items: center; }
.about-hero .breadcrumb, .about-hero .eyebrow { justify-content: center; }
.about-hero h1 { max-width: 880px; margin: 0; font-size: clamp(50px, 7vw, 84px); line-height: 1.08; letter-spacing: -0.06em; }
.about-hero-inner > p:not(.breadcrumb, .eyebrow) { max-width: 720px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.about-toys { position: relative; width: min(760px, 90%); height: 200px; margin: 55px auto 0; }
.about-toys span { position: absolute; bottom: 0; display: block; box-shadow: var(--shadow-md); }
.toy-sky { left: 2%; width: 120px; height: 120px; border-radius: 38px; background: var(--sky); transform: rotate(-12deg); }
.toy-mint { left: 19%; width: 145px; height: 90px; border-radius: 80px 80px 24px 24px; background: var(--mint); transform: rotate(4deg); }
.toy-butter { left: 40%; width: 105px; height: 150px; border-radius: 52px; background: var(--butter); transform: rotate(-4deg); }
.toy-blush { right: 28%; width: 118px; height: 118px; border-radius: 50%; background: var(--blush); }
.toy-lavender { right: 10%; width: 135px; height: 92px; border-radius: 25px 65px 25px 65px; background: var(--lavender); transform: rotate(10deg); }
.toy-peach { right: 0; bottom: 110px !important; width: 55px; height: 55px; border-radius: 18px; background: var(--peach); transform: rotate(20deg); }
.about-story-section, .choices-section { background: var(--surface); }
.about-story-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 90px; }
.about-story-grid h2, .choices-grid h2 { margin: 0; font-size: clamp(35px, 4vw, 50px); line-height: 1.25; letter-spacing: -0.045em; }
.story-copy { display: grid; gap: 22px; }
.story-copy p, .choices-grid > div > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.95; }
.principles-section { background: var(--surface-soft); }
.principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.principle-grid article { min-height: 280px; padding: 34px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-sm); }
.principle-grid article:nth-child(1) { border-top: 7px solid var(--sky); }.principle-grid article:nth-child(2) { border-top: 7px solid var(--mint); }.principle-grid article:nth-child(3) { border-top: 7px solid var(--butter); }.principle-grid article:nth-child(4) { border-top: 7px solid var(--blush); }
.principle-number { color: var(--faint); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; }
.principle-grid h3 { margin: 54px 0 13px; font-size: 22px; }
.principle-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.choices-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.choices-grid > div > p { margin-top: 22px; }
.choice-board { position: relative; min-height: 440px; border-radius: 30px; background: #e5ecea; box-shadow: var(--shadow-md); }
.choice-card { position: absolute; display: grid; width: min(340px, 76%); gap: 10px; padding: 28px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md); }
.choice-card > span { font-size: 10px; font-weight: 900; letter-spacing: 0.1em; }.choice-card strong { font-size: 17px; line-height: 1.45; }.choice-card small { color: var(--muted); font-size: 11px; }
.choice-keep { top: 50px; right: 38px; border-top: 7px solid var(--mint); transform: rotate(4deg); }.choice-keep > span { color: #527664; }
.choice-away { bottom: 48px; left: 35px; border-top: 7px solid var(--blush); transform: rotate(-4deg); }.choice-away > span { color: #8e6670; }

/* ── FAQ 獨立頁 ── */
.faq-page-hero { position: relative; overflow: hidden; padding: 98px 0 92px; background: #e7efec; }
.faq-page-hero::after { position: absolute; right: -90px; bottom: -180px; width: 380px; height: 380px; border-radius: 50%; background: var(--butter); content: ""; opacity: 0.6; }
.faq-page-hero .shell { position: relative; z-index: 1; }
.faq-page-hero h1 { max-width: 760px; margin: 0; font-size: clamp(48px, 6vw, 74px); line-height: 1.1; letter-spacing: -0.055em; }
.faq-page-hero .shell > p:last-child { max-width: 620px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
.faq-page-section { background: var(--surface); }
.faq-page-grid { display: grid; grid-template-columns: 220px 1fr; gap: 85px; }
.faq-categories { position: sticky; top: 118px; align-self: start; display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); box-shadow: var(--shadow-sm); }
.faq-categories strong { margin: 2px 10px 12px; font-size: 12px; }.faq-categories a { padding: 11px 10px; border-radius: 10px; color: var(--muted); font-size: 12px; }.faq-categories a:hover { color: var(--text); background: var(--surface-soft); }
.faq-groups { display: grid; gap: 78px; }.faq-groups > section { scroll-margin-top: 120px; }
.faq-group-tag { display: inline-flex; margin-bottom: 16px; padding: 7px 10px; border-radius: 10px; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; }
.tag-sky { background: var(--sky); }.tag-mint { background: var(--mint); }.tag-blush { background: var(--blush); }.tag-butter { background: var(--butter); }
.faq-groups h2 { margin: 0 0 26px; font-size: 29px; letter-spacing: -0.035em; }

/* ── 隱私與條款 ── */
.policy-main { background: var(--surface); }
.policy-hero { padding: 86px 0 74px; background: #e7efec; }.policy-hero-terms { background: #eee5dc; }
.policy-hero-inner h1 { margin: 0; font-size: clamp(48px, 6vw, 70px); line-height: 1.12; letter-spacing: -0.05em; }
.policy-hero-inner > p:not(.breadcrumb, .eyebrow) { max-width: 680px; margin: 24px 0 20px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.policy-date { color: var(--faint); font-size: 11px; }
.policy-status { display: flex; max-width: 680px; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 16px; border: 1px solid rgba(106, 90, 42, 0.1); border-radius: 15px; background: rgba(248, 248, 244, 0.58); }
.policy-status strong { flex: 0 0 auto; padding: 6px 9px; border-radius: 9px; color: #6a5a2a; background: var(--butter); font-size: 9px; letter-spacing: 0.06em; }
.policy-status span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.policy-layout { display: grid; grid-template-columns: 260px 1fr; align-items: start; gap: 85px; padding-block: 85px 120px; }
.policy-summary { position: sticky; top: 118px; padding: 24px; border: 1px solid var(--line); border-radius: 21px; background: var(--bg); box-shadow: var(--shadow-sm); }
.policy-summary > strong { display: block; margin-bottom: 18px; font-size: 13px; }
.policy-summary ul { display: grid; gap: 12px; margin: 0; padding: 0; color: var(--muted); font-size: 11px; list-style: none; }
.policy-summary li { position: relative; padding-left: 18px; line-height: 1.55; }.policy-summary li::before { position: absolute; top: 0.5em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); content: ""; }
.policy-draft-note { margin-top: 22px; padding: 13px; border-radius: 12px; color: #6a5a2a; background: rgba(240, 224, 168, 0.55); font-size: 10px; line-height: 1.55; }

.not-found-main { display: grid; min-height: calc(100vh - 212px); place-items: center; padding: 120px 0 72px; }
.not-found-card { position: relative; display: grid; max-width: 720px; padding: 64px; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; place-items: center; }
.not-found-card::before, .not-found-card::after { position: absolute; width: 180px; height: 180px; border-radius: 50%; content: ""; filter: blur(2px); opacity: 0.72; }
.not-found-card::before { top: -90px; left: -60px; background: rgba(168, 200, 224, 0.55); }
.not-found-card::after { right: -70px; bottom: -100px; background: rgba(240, 200, 168, 0.55); }
.not-found-code { position: relative; margin: 0; color: var(--primary-deep); font-size: clamp(72px, 16vw, 128px); font-weight: 800; letter-spacing: -0.08em; line-height: 0.9; }
.not-found-card h1 { position: relative; max-width: 12ch; margin: 28px 0 16px; font-size: clamp(30px, 5vw, 48px); }
.not-found-card > p:not(.not-found-code) { position: relative; max-width: 48ch; margin: 0 0 30px; color: var(--muted); line-height: 1.8; }
.not-found-card .button { position: relative; }
.policy-content { max-width: 780px; }
.policy-content section { padding-bottom: 42px; border-bottom: 1px solid var(--line); }.policy-content section + section { padding-top: 42px; }
.policy-content h2 { margin: 0 0 18px; font-size: 25px; letter-spacing: -0.025em; }.policy-content h3 { margin: 26px 0 9px; font-size: 15px; }
.policy-content p, .policy-content li { color: var(--muted); font-size: 13px; line-height: 1.9; }.policy-content p { margin: 0; }.policy-content p + p { margin-top: 14px; }.policy-content ul { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 22px; }
.policy-content a { color: var(--primary-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid rgba(143, 184, 200, 0.45); outline-offset: 4px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { max-width: 720px; }
  .product-stage { width: min(680px, 100%); margin-inline: auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 260px; }
  .workflow-grid, .feedback-panel, .faq-grid { grid-template-columns: 1fr; gap: 56px; }
  .faq-heading { position: static; }
  .feedback-panel { padding: 58px; }
  .feedback-visual { width: min(520px, 100%); margin-inline: auto; }
  .subpage-hero-inner, .collaboration-grid, .collection-feature-grid, .case-detail-grid { grid-template-columns: 1fr; gap: 56px; }
  .feature-stack, .case-orbit { width: min(560px, 100%); margin-inline: auto; }
  .detail-wide { grid-template-columns: 1fr; gap: 45px; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .collection-path { margin-top: 10px; }
  .reverse-grid .case-copy, .reverse-grid .scenario-board { order: initial; }
  .about-story-grid, .choices-grid { grid-template-columns: 1fr; gap: 52px; }
  .choice-board { width: min(560px, 100%); margin-inline: auto; }
  .faq-page-grid, .policy-layout { grid-template-columns: 1fr; gap: 50px; }
  .faq-categories, .policy-summary { position: static; }
  .faq-categories { grid-template-columns: repeat(4, 1fr); }
  .faq-categories strong { grid-column: 1 / -1; }
  .policy-summary { max-width: 680px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, var(--shell)); }
  .section { padding: 82px 0; }
  .header-inner { min-height: 68px; }
  .menu-button { display: block; margin-left: auto; }
  .header-cta { display: none; }
  .site-nav { position: fixed; top: 68px; right: 16px; left: 16px; display: grid; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateY(-16px) scale(0.98); visibility: hidden; opacity: 0; transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease; }
  .site-nav.is-open { transform: translateY(0) scale(1); visibility: visible; opacity: 1; }
  .site-nav a { padding: 15px 14px; border-radius: 12px; }
  .site-nav a:hover { background: var(--surface-soft); }
  .site-nav a::after { display: none; }
  .hero-section { padding: 72px 0 88px; }
  .hero-copy h1 { font-size: clamp(40px, 12vw, 54px); }
  .hero-lead { font-size: 16px; line-height: 1.8; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-notes { gap: 12px 18px; }
  .product-stage { padding-right: 6px; }
  .app-window { border-radius: 22px; transform: none; }
  .window-hero { min-height: 110px; padding: 20px; }
  .window-hero strong { font-size: 16px; }
  .focus-chip { display: none; }
  .window-body { padding: 18px; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-card:nth-child(2) { display: none; }
  .floating-note { right: -4px; }
  .proof-grid { grid-template-columns: 1fr; padding-block: 12px; }
  .proof-grid p { padding: 18px; }
  .proof-grid p + p { border-top: 1px solid var(--line); border-left: 0; }
  .section-heading { margin-bottom: 36px; }
  .feature-card { min-height: 310px; padding: 28px; }
  .workflow-steps li { min-height: 100px; padding: 18px; }
  .workflow-steps small { font-size: 12px; }
  .feedback-panel { width: calc(100% - 20px); padding: 42px 22px; border-radius: 28px; }
  .feedback-visual { min-height: 340px; }
  .feedback-form-card { padding: 23px; }
  .flow-result-card { right: -3px; bottom: 0; }
  .use-case-grid { grid-template-columns: 1fr; }
  .faq-list summary { min-height: 72px; padding: 0 18px; }
  .faq-list details p { padding: 0 52px 22px 18px; }
  .final-cta-section { padding: 74px 0; }
  .final-cta { padding: 62px 22px; border-radius: 28px; }
  .footer-main { grid-template-columns: 1fr; gap: 42px; }
  .footer-main nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { display: grid; gap: 7px; }
  .subpage-hero { padding: 72px 0 82px; }
  .breadcrumb { margin-bottom: 30px; }
  .subpage-copy h1 { font-size: clamp(40px, 12vw, 55px); }
  .feature-stack, .case-orbit { min-height: 360px; }
  .stack-card { padding: 20px; }
  .stack-studio { right: 20px; }.stack-flow { top: 120px; }.stack-canvas { bottom: 0; }
  .feature-detail-grid { grid-template-columns: 1fr; }
  .detail-wide { grid-column: auto; }
  .detail-card { min-height: 370px; padding: 28px; }
  .collaboration-visual { min-height: 370px; padding: 55px 22px 30px; }
  .tool-grid { grid-template-columns: 1fr; }
  .collection-path { grid-template-columns: 1fr; }
  .collection-path > div { min-height: 140px; }.collection-path > i { transform: rotate(90deg); text-align: center; }
  .safety-grid, .fit-grid { grid-template-columns: 1fr; gap: 45px; }
  .case-jump { top: 68px; overflow-x: auto; }.case-jump > div { width: max-content; min-width: 100%; justify-content: flex-start; gap: 26px; }.case-jump a { white-space: nowrap; }
  .orbit-feedback { left: 0; }.orbit-team { right: 0; }.orbit-personal { left: 3%; }
  .case-orbit::before { width: 280px; height: 280px; }.case-orbit::after { width: 210px; height: 210px; }
  .scenario-board { min-height: 390px; padding: 27px; }
  .case-benefits p { grid-template-columns: 90px 1fr; }
  .about-hero { padding: 76px 0 35px; }
  .about-hero h1 { font-size: clamp(44px, 13vw, 60px); }
  .about-toys { height: 145px; margin-top: 38px; }
  .toy-sky { width: 86px; height: 86px; }.toy-mint { width: 100px; height: 68px; }.toy-butter { width: 72px; height: 110px; }.toy-blush { right: 24%; width: 80px; height: 80px; }.toy-lavender { right: 3%; width: 92px; height: 65px; }.toy-peach { display: none !important; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article { min-height: 250px; padding: 28px; }
  .choice-board { min-height: 370px; }
  .choice-card { padding: 22px; }
  .choice-keep { top: 38px; right: 20px; }.choice-away { bottom: 38px; left: 20px; }
  .faq-page-hero { padding: 74px 0; }
  .faq-page-hero h1 { font-size: clamp(44px, 13vw, 60px); }
  .faq-categories { grid-template-columns: 1fr 1fr; }
  .faq-groups { gap: 62px; }
  .policy-hero { padding: 70px 0 62px; }
  .policy-status { display: grid; justify-items: start; }
  .policy-layout { padding-block: 60px 90px; }
  .policy-content section { padding-bottom: 34px; }.policy-content section + section { padding-top: 34px; }
  .not-found-main { min-height: calc(100vh - 160px); padding: 96px 0 48px; }
  .not-found-card { padding: 48px 24px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}