/* ACE — Clear Space, Clear Mind. Shared tokens and components for all routes. */
:root {
  --bg:#f7f8fa; --surface:#fff; --surface-strong:#edf4ff;
  --text:#171a20; --muted:#626a77; --line:#e0e4ea;
  --accent:#2563eb; --accent-dark:#1d4ed8; --black:#171a20; --white:#fff;
  --ice:#ddf2ff; --lilac:#ece7ff; --mint:#e5f7ef;
  --blue-soft:#e3f2ff; --blue-edge:#bedaf5; --blue-ink:#2357b7;
  --mint-soft:#e2f6ee; --mint-edge:#bce3d1; --mint-ink:#246348;
  --lilac-soft:#eee7ff; --lilac-edge:#d8c8f5; --lilac-ink:#6242a5;
  --danger:#a32920; --danger-soft:#fff2f0; --success:#176044; --success-soft:#e5f7ef;
  --warning:#765014; --warning-soft:#faf5e9;
  --glass:rgba(255,255,255,.82); --blur:24px;
  --shadow-sm:0 2px 3px rgba(25,39,60,.025),0 12px 28px -18px rgba(25,39,60,.18);
  --shadow-lg:0 2px 1px rgba(255,255,255,.95) inset,0 3px 5px rgba(32,51,78,.025),0 24px 64px -28px rgba(43,62,95,.3);
  --shadow-glass:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(180,196,216,.16),0 4px 12px rgba(23,40,61,.025),0 14px 36px -20px rgba(36,59,90,.24);
  --radius-sm:16px; --radius:24px; --radius-lg:32px; --container:1200px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px;
  --font:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; text-size-adjust:100%; scroll-padding-top:112px; }
body { margin:0; min-width:320px; color:var(--text); background:var(--bg); font:400 1rem/1.8 var(--font); overflow-wrap:anywhere; }
body.menu-open { overflow:hidden; }
ace-header,ace-footer { display:block; }
[hidden] { display:none!important; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px; }
button,input,select,textarea { color:inherit; font:inherit; font-size:1rem; }
button,select { cursor:pointer; }
button:disabled { cursor:not-allowed; color:#717680; background:#eceff3; border-color:#e0e4ea; box-shadow:none; transform:none; }
button:disabled:hover { transform:none; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline-offset:2px; }
::selection { color:var(--text); background:var(--ice); }
.skip-link { position:fixed; z-index:999; top:12px; left:20px; padding:12px 20px; border-radius:99px; background:var(--black); color:#fff; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.container { width:min(calc(100% - 96px),var(--container)); margin-inline:auto; }
.narrow { width:min(calc(100% - 96px),800px); margin-inline:auto; }
.section { padding-block:96px; }
.section-sm { padding-block:48px; }
.section-surface { background:#fff; }
.section-accent { background:var(--surface-strong); }
.stack>* { margin-block:0; }
.stack>*+* { margin-top:var(--stack-space,24px); }
h1,h2,h3,h4 { margin-top:0; letter-spacing:0; line-height:1.4; font-weight:600; }
h1 { max-width:1000px; margin-bottom:24px; font-size:clamp(2.5rem,4.4vw,4rem); }
h2 { margin-bottom:16px; font-size:clamp(1.75rem,3vw,2.5rem); }
h3 { margin-bottom:12px; font-size:1.25rem; }
h4 { margin-bottom:8px; font-size:1rem; }
p { margin:0 0 1em; }
strong { font-weight:600; }
.lead { max-width:690px; color:var(--muted); font-size:1.125rem; line-height:1.9; }
.muted { color:var(--muted); }
.small { font-size:.875rem; }
.eyebrow,.demo-label,.mode-badge { display:inline-flex; align-items:center; border-radius:99px; font-size:.875rem; line-height:1.65; font-weight:500; }
.eyebrow { gap:8px; min-height:34px; padding:5px 13px; margin-bottom:24px; color:var(--blue-ink); background:var(--blue-soft); border:1px solid var(--blue-edge); }
.kicker { margin:0 0 12px; color:var(--muted); font-size:.875rem; font-weight:500; }
.demo-label { padding:5px 11px; border:1px solid #dce3ed; background:#f8faff; color:#4e5d73; flex-shrink:0; }
.mode-badge { min-height:32px; padding:5px 12px; color:var(--warning); background:var(--warning-soft); }
.button-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; max-width:100%; padding:11px 22px; border:1px solid transparent; border-radius:99px; font-weight:500; text-align:center; text-decoration:none; line-height:1.65; transition:transform 160ms ease,background 160ms ease,box-shadow 160ms ease; }
.button-primary { background:var(--black); color:#fff; border-color:var(--black); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 12px -8px rgba(23,26,32,.4); }
.button-primary:hover { background:#303741; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 16px -8px rgba(23,26,32,.35); }
.button-secondary { background:#fff; border-color:#d8dee7; color:var(--text); box-shadow:0 2px 3px rgba(30,45,60,.025); }
.button-secondary:hover { background:#f4f7fc; border-color:#a8b5c8; }
.button-quiet { padding-inline:14px; background:transparent; color:var(--text); }
.button-quiet:hover { background:#edf1f7; }
.button-accent { background:var(--surface-strong); color:var(--accent-dark); }
.button:hover,.icon-button:hover { transform:translateY(-1px); }
.button:active,.icon-button:active { transform:scale(.98); }
.text-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; max-width:100%; color:var(--accent-dark); font-weight:500; }
.text-link::after { content:"↗"; text-decoration:none; font-size:1.125em; }
.icon-button { display:inline-grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#fff; transition:transform 160ms ease,background 160ms ease; }
.ui-icon,.card-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.site-header { position:fixed; z-index:100; top:20px; left:0; width:100%; pointer-events:none; }
.nav-shell { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; padding:8px 10px 8px 24px; pointer-events:auto; border-radius:99px; border:1px solid rgba(255,255,255,.95); background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow-glass); }
.brand { display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; text-decoration:none; }
.brand-logo { width:83px; height:auto; }
.desktop-nav { display:flex; align-items:center; gap:2px; }
.nav-link { display:flex; align-items:center; min-height:44px; padding:8px 13px; color:#4b5666; border-radius:99px; font-size:.9375rem; text-decoration:none; white-space:nowrap; }
.nav-link:hover { background:rgba(231,238,248,.7); color:var(--text); }
.nav-link[aria-current="page"] { background:var(--blue-soft); color:var(--blue-ink); font-weight:600; box-shadow:inset 0 1px 2px rgba(72,96,133,.035); }
.nav-cta { min-height:48px; padding-inline:20px; white-space:nowrap; font-size:.9375rem; }
.menu-toggle,.mobile-nav { display:none; }
.page-hero { padding:160px 0 64px; }
.page-hero .lead:last-child { margin-bottom:0; }
.hero-home { padding-top:132px; padding-bottom:56px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px; align-items:center; }
.hero-copy { padding-block:32px; position:relative; z-index:1; }
.hero-home h1 { font-size:clamp(2.75rem,4.55vw,4.25rem); line-height:1.32; font-weight:600; margin-bottom:24px; }
.hero-home h1 span { font-weight:700; }
.hero-home .lead { max-width:480px; }
.hero-actions { margin-top:32px; }
.hero-home .hero-actions { gap:10px; flex-direction:column; align-items:flex-start; }
.hero-note { margin:24px 0 0; color:var(--muted); font-size:.875rem; }
.hero-scene { position:relative; isolation:isolate; min-width:0; min-height:560px; display:flex; align-items:flex-end; justify-content:flex-start; padding:0 18px 38px 36px; }
.ace-loop { position:absolute; z-index:-1; width:100%; max-width:100%; height:auto; right:0; top:-38px; aspect-ratio:1; object-fit:contain; mix-blend-mode:multiply; animation:loop-arrive 1.8s ease-out both; pointer-events:none; }
.scene-caption { position:absolute; top:38px; left:0; color:#62748a; font-size:.75rem; letter-spacing:.12em; line-height:1.8; }
.reading-panel { background:#fff; border:1px solid #e0e6ef; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.hero-plan { width:100%; max-width:432px; padding:26px; transform:none; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.preview-heading .kicker { margin-bottom:4px; font-size:.8125rem; }
.preview-heading h2 { margin:0; font-size:1.25rem; }
.preview-heading .demo-label { font-size:.8125rem; padding:4px 9px; }
.preview-task { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 0; border-top:1px solid #edf0f4; font-size:.9375rem; }
.preview-task>span:last-child { color:var(--muted); white-space:nowrap; font-size:.875rem; }
.task-check { width:20px; height:20px; border:1.5px solid #b5c2d1; border-radius:6px; }
.preview-total { margin-top:12px; padding-top:18px; border-top:1px solid #e5eaf0; }
.preview-total>p:first-child { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px; font-size:.875rem; margin-bottom:12px; }
.preview-total>p:first-child>span { color:var(--muted); }
.time-track { height:6px; background:#e9edf4; border-radius:10px; overflow:hidden; }
.time-track span { display:block; width:79.1667%; height:100%; background:#6394ed; border-radius:inherit; }
.preview-total .small { margin:10px 0 0; font-size:.8125rem; }
.section-heading { max-width:750px; margin-bottom:40px; }
.section-heading p:last-child { margin:0; color:var(--muted); }
.problem-section { padding-top:56px; border-top:1px solid var(--line); }
.problem-section>.container { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; }
.problem-section .section-heading { margin:0; }
.problem-grid { display:grid; gap:0; }
.problem-item { position:relative; padding:18px 0 18px 42px; border-bottom:1px solid var(--line); }
.problem-item:first-child { padding-top:0; }
.problem-item:last-child { border:0; padding-bottom:0; }
.problem-item .number { position:absolute; left:0; top:20px; font-size:.8125rem; color:#697689; font-variant-numeric:tabular-nums; }
.problem-item:first-child .number { top:3px; }
.problem-item h3 { font-size:1.0625rem; margin-bottom:4px; }
.problem-item p { font-size:.9375rem; margin:0; }
.card-grid,.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.card { min-width:0; padding:32px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card> :last-child { margin-bottom:0; }
.card p { color:var(--muted); }
.card-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #e0e6ed; border-radius:16px; color:var(--text); background:#fff; margin-bottom:24px; }
.card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin-top:20px; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.service-grid>.card { position:relative; padding:32px; background:#fff; }
.service-grid>.card:first-child { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; column-gap:64px; background:var(--blue-soft); border-color:var(--blue-edge); padding:40px; }
.service-grid>.card:first-child>.card-icon,.service-grid>.card:first-child>.kicker,.service-grid>.card:first-child>h3,.service-grid>.card:first-child>p,.service-grid>.card:first-child>.card-actions { grid-column:1; }
.service-grid>.card:first-child .service-preview { grid-column:2; grid-row:1/span 6; margin:0; align-self:center; }
.service-grid>.card:nth-child(2) { background:var(--mint-soft); border-color:var(--mint-edge); }
.service-grid>.card:nth-child(3) { background:var(--lilac-soft); border-color:var(--lilac-edge); }
.service-grid .card-icon { margin-bottom:16px; }
.service-grid .service-preview { margin-top:24px; }
.service-preview { min-width:0; padding:24px; border:1px solid #dfe6ef; border-radius:20px; background:#fff; box-shadow:0 16px 28px -24px rgba(34,51,82,.4); }
.service-preview .demo-label { margin-bottom:16px; }
.preview-lines { list-style:none; padding:0; margin:0; }
.preview-lines li { padding:12px 0; border-top:1px solid #edf0f4; display:flex; justify-content:space-between; gap:12px; }
.preview-lines li span { color:var(--muted); font-size:.875rem; }
.preview-quote { margin:0; font-size:.9375rem; color:var(--text)!important; line-height:1.9; }
.preview-note { color:var(--muted); font-size:.875rem; margin:14px 0 0; }
.before-after { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.before-panel,.after-panel { min-width:0; padding:40px; border-radius:var(--radius-lg); }
.before-panel { border:1px solid var(--line); background:#f7f8fa; }
.after-panel { background:#fff; border:1px solid #dce5f1; box-shadow:var(--shadow-lg); }
.before-panel ul,.after-panel ul,.plain-list,.check-list { list-style:none; margin:0; padding:0; }
.before-panel li,.after-panel li,.plain-list li,.check-list li { position:relative; padding-left:23px; margin-bottom:12px; }
.before-panel li::before,.plain-list li::before { content:""; width:5px; height:5px; border-radius:50%; position:absolute; left:1px; top:.8em; background:#808b9b; }
.after-panel li::before,.check-list li::before { content:""; position:absolute; left:1px; top:.62em; width:10px; height:6px; border-left:1.7px solid #546e90; border-bottom:1.7px solid #546e90; transform:rotate(-45deg); }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; counter-reset:steps; }
.step { position:relative; padding-top:72px; }
.step::before { counter-increment:steps; content:counter(steps,decimal-leading-zero); position:absolute; top:0; left:0; width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--blue-edge); border-radius:50%; background:var(--blue-soft); color:var(--blue-ink); font-size:.875rem; }
.step:not(:last-child)::after { content:""; position:absolute; left:64px; top:24px; width:calc(100% - 48px); height:1px; background:#dce2eb; }
.step p { color:var(--muted); margin:0; }
.price-card { display:flex; flex-direction:column; }
.price-card .kicker { font-size:1rem; color:var(--text); }
.price-card h3 { font-size:1.125rem; min-height:3.2em; color:var(--muted); font-weight:400; }
.price { margin:8px 0 0; min-height:1.6em; color:var(--text)!important; font-size:clamp(1.8rem,2.5vw,2.5rem); line-height:1.5; font-weight:600; }
.price-card:last-child .price { font-size:1.75rem; }
.price-note { min-height:3.6em; font-size:.875rem; color:var(--muted); margin:8px 0 24px; }
.price-card .check-list { flex:1; margin:0 0 32px; padding-top:24px; border-top:1px solid var(--line); font-size:.9375rem; }
.price-card .button { width:100%; margin-top:auto; }
@supports (grid-template-rows:subgrid) {
 @media(min-width:761px) {
  .pricing-grid { row-gap:0; }
  .price-card { display:grid; grid-row:span 6; grid-template-rows:subgrid; }
  .price-card h3,.price-card .price,.price-card .price-note { min-height:0; }
  .price-card .button { align-self:end; }
 }
}
.notice { display:flex; gap:14px; align-items:flex-start; padding:22px 24px; border:1px solid #dde6f2; border-radius:20px; color:#43536a; background:#f4f7fc; font-size:.9375rem; }
.notice strong { display:block; color:inherit; margin-bottom:4px; }
.notice p { margin:0; }
.notice-warning { background:var(--warning-soft); color:var(--warning); border-color:#e9dfc8; }
.notice-danger { background:var(--danger-soft); color:var(--danger); border-color:#ebccc7; }
.notice-success { background:var(--success-soft); color:var(--success); border-color:#cbe3d7; }
.notice-mark { display:grid; place-items:center; flex-shrink:0; width:24px; height:24px; margin-top:2px; border:1.5px solid currentColor; border-radius:50%; font-size:.875rem; font-weight:600; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { position:relative; cursor:pointer; list-style:none; padding:24px 48px 24px 0; font-size:1.0625rem; font-weight:500; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:0; top:22px; width:28px; height:28px; line-height:28px; text-align:center; font-size:1.5rem; font-weight:400; }
.faq-list details[open] summary::after { content:"−"; }
.faq-answer { padding:0 40px 24px 0; color:var(--muted); }
.closing-cta { display:flex; flex-direction:column; align-items:center; gap:24px; padding:64px 40px; text-align:center; border:1px solid #d8e2f4; border-radius:36px; background:linear-gradient(115deg,#e3f2ff 0%,#f7f9fd 58%,#eee7ff 100%); box-shadow:inset 0 1px 0 #fff; }
.closing-cta h2 { max-width:850px; margin-inline:auto; font-size:clamp(2rem,3.7vw,3.3rem); }
.closing-cta p { max-width:650px; margin-inline:auto; margin-bottom:0; color:var(--muted); }
.closing-cta .kicker { margin-bottom:16px; }
.closing-cta .button { padding-inline:32px; }
.service-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:72px; align-items:start; padding-block:72px; border-bottom:1px solid var(--line); scroll-margin-top:104px; }
.service-detail:first-child { padding-top:0; }
.service-detail:last-child { border:0; padding-bottom:0; }
.service-detail:nth-child(even) .service-sticky { grid-column:2; grid-row:1; }
.service-detail:nth-child(even)>.stack { grid-column:1; grid-row:1; }
.service-sticky { min-width:0; }
.service-sticky .service-preview { margin-top:32px; background:#fff; }
.service-code { display:inline-block; margin-bottom:20px; color:#60738b; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.detail-block { min-width:0; }
.detail-block h3 { font-size:1rem; margin-bottom:8px; }
.detail-block p { color:var(--muted); margin:0; font-size:.9375rem; }
.detail-block.limit { padding:22px 24px; border:1px solid #e2e6ec; border-radius:20px; background:#f1f4f8; }
.timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.timeline-item { position:relative; }
.timeline-item:not(:last-child)::before { content:""; position:absolute; left:68px; top:28px; width:calc(100% - 48px); height:1px; background:#dce2eb; }
.timeline-number { display:grid; place-items:center; width:56px; height:56px; border:1px solid var(--blue-edge); border-radius:18px; background:var(--blue-soft); color:var(--blue-ink); margin-bottom:28px; }
.timeline-content h3 { font-size:1.125rem; }
.timeline-content p { color:var(--muted); font-size:.9375rem; }
.prepare-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
body[data-page="about"] .page-hero { padding-bottom:80px; }
body[data-page="about"] .page-hero h1 { max-width:1000px; }
body[data-page="about"] .card-grid { display:block; max-width:900px; margin-left:auto; }
body[data-page="about"] .card-grid .card { display:grid; grid-template-columns:64px 1fr 1.5fr; gap:24px; align-items:start; padding:32px 0; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; }
body[data-page="about"] .card-grid .card p { margin:0; }
body[data-page="about"] .card-grid .service-code { margin:4px 0 0; }
.team-placeholder { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.member-slot { padding:24px 0; border-top:1px solid var(--line); }
.member-slot strong { display:block; margin-bottom:12px; }
.member-slot p { font-size:.9375rem; }
body[data-page="demo"] .page-hero { padding:136px 0 28px; }
body[data-page="demo"] .page-hero h1 { font-size:clamp(1.875rem,3vw,2.75rem); margin-bottom:12px; }
body[data-page="demo"] .page-hero .eyebrow { margin-bottom:12px; background:var(--mint); color:var(--success); }
body[data-page="demo"] .page-hero .lead { max-width:950px; font-size:1rem; }
body[data-page="demo"] .page-hero .notice { margin-top:20px!important; padding:16px 20px; }
body[data-page="demo"] .section-surface { padding-top:16px; background:transparent; }
.demo-tabs,.glass-toolbar { display:flex; flex-wrap:wrap; gap:6px; padding:7px; width:fit-content; max-width:100%; border:1px solid #fff; border-radius:99px; background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow-glass); margin-bottom:28px; }
.demo-tab { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:11px 24px; border:1px solid transparent; border-radius:99px; background:transparent; color:var(--muted); font-weight:500; transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease; }
.demo-tab:hover { background:#f0f3f8; }
.demo-tab[aria-selected="true"] { color:var(--blue-ink); background:var(--blue-soft); border-color:var(--blue-edge); box-shadow:0 2px 4px rgba(63,87,129,.04); }
.demo-tab .ui-icon { width:20px; height:20px; }
.demo-panel { min-height:660px; }
.demo-panel>.section-heading { max-width:900px; margin-bottom:24px; }
.demo-panel>.section-heading h2 { font-size:1.25rem; margin-bottom:8px; }
.demo-panel>.section-heading .kicker { font-size:.8125rem; margin-bottom:6px; }
.demo-panel>.section-heading p:last-child { font-size:.9375rem; }
.demo-workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:20px; align-items:start; min-height:880px; padding:8px; border:1px solid #e4e9f0; border-radius:36px; background:#f0f3f7; box-shadow:inset 0 1px 0 #fff; }
.form-panel,.result-panel { min-width:0; padding:28px; border:1px solid #e2e7ee; border-radius:28px; background:#fff; }
.result-panel { min-height:480px; }
.result-panel[aria-busy="true"] { border-color:#a3bde7; }
.result-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; min-height:280px; padding:32px; border:1px dashed #d6dee9; border-radius:20px; background:#f9fbfd; color:var(--muted); text-align:center; }
.result-placeholder::before { content:""; width:36px; height:30px; border:1.5px solid #a2b2c8; border-radius:8px; background:linear-gradient(#d3ddea,#d3ddea) 8px 9px/18px 2px no-repeat,linear-gradient(#d3ddea,#d3ddea) 8px 17px/12px 2px no-repeat; }
.status-line { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; min-height:44px; margin-bottom:20px; color:#526176; background:#f2f5f9; border-radius:14px; font-size:.875rem; font-weight:500; }
.status-dot { flex-shrink:0; width:10px; height:10px; border:1.8px solid currentColor; border-radius:50%; margin-top:7px; }
.status-line[data-status="loading"] { color:var(--accent-dark); background:#edf3ff; }
.status-line[data-status="success"] { color:var(--success); background:var(--success-soft); }
.status-line[data-status="error"],.status-line[data-status="incomplete"] { color:var(--danger); background:var(--danger-soft); }
.field { min-width:0; margin-bottom:22px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label,.field legend { display:block; margin-bottom:8px; font-size:.9375rem; font-weight:500; }
.field .hint { display:block; margin-top:8px; color:var(--muted); font-size:.875rem; line-height:1.7; }
.field input,.field select,.field textarea { display:block; min-width:0; width:100%; min-height:50px; padding:12px 14px; border:1px solid #bdc7d4; border-radius:16px; background:#fff; line-height:1.6; font-size:1rem; transition:border-color 160ms ease,background 160ms ease; }
.field select { padding-right:24px; text-overflow:ellipsis; }
.field textarea { min-height:144px; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover { border-color:#8899ae; }
.field [aria-invalid="true"] { border-color:var(--danger); background:#fffafa; }
.field-error { display:none; margin:6px 0 0; color:var(--danger); font-size:.875rem; }
.field-error.show { display:block; }
.task-list { display:grid; gap:14px; margin:20px 0 24px; }
.task-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; gap:12px; align-items:end; padding:18px; border:1px solid #e2e7ef; border-radius:20px; background:#f8fafc; }
.task-item .field:first-child { grid-column:1/-1; }
.task-item .field { margin:0; }
.task-item .field label { font-size:.875rem; }
.task-item .field input,.task-item .field select { padding-inline:10px; }
.task-remove { margin-bottom:3px; background:#fff; border-color:#cdd5e0; color:#5b6472; }
.result-section+.result-section { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.result-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.metric { min-width:0; padding:16px; border-radius:16px; background:#f3f6fb; }
.metric strong { display:block; font-size:1.25rem; }
.metric span { font-size:.875rem; color:var(--muted); }
.output-list { list-style:none; margin:0; padding:0; }
.output-list li { padding:14px 0; border-bottom:1px solid var(--line); }
.output-list li:last-child { border:0; }
.output-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid #e8ecf2; }
.output-actions .button { font-size:.875rem; min-height:44px; padding:9px 16px; }
.source-summary-grid { display:grid; gap:24px; }
.source-box,.summary-box { min-width:0; padding:20px; border:1px solid #e3e8ef; border-radius:18px; background:#fff; }
.source-box { background:#f8fafc; }
.source-box h3,.summary-box h3 { font-size:1rem; }
.source-text { white-space:pre-wrap; margin:0; }
.ai-output { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; }
.editable-output { width:100%; min-height:310px; padding:20px; border:1px solid #bdc7d4; border-radius:18px; background:#fff; resize:vertical; line-height:1.9; }
.editable-output[readonly] { background:#fafbfd; }
.comparison-wrap { border:1px solid var(--line); border-radius:28px; background:#fff; overflow-x:auto; }
.comparison-table { width:100%; border-collapse:collapse; }
.comparison-table th,.comparison-table td { padding:22px 24px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.9375rem; }
.comparison-table thead th { background:#f1f4f8; font-weight:600; }
.comparison-table tbody th { width:31%; font-weight:500; }
.comparison-table td { color:var(--muted); }
.comparison-table tr:last-child>* { border-bottom:0; }
.table-mobile-hint { display:none; }
.contact-layout { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:64px; align-items:start; }
.contact-aside { min-width:0; }
.contact-aside h2 { font-size:1.75rem; }
.contact-aside .plain-list { color:var(--muted); font-size:.9375rem; }
.contact-form { min-width:0; padding:36px; border:1px solid #e0e6ee; border-radius:32px; background:#fff; box-shadow:var(--shadow-sm); }
body[data-page="contact"] .section-surface { background:transparent; padding-top:8px; }
body[data-page="contact"] .page-hero { padding-bottom:44px; }
.request-preview { margin-top:28px; padding:24px; border:1px solid #d6e3f2; border-radius:22px; background:#f4f8fd; }
.request-preview pre,.summary-pre { margin:0; font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.privacy-grid { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; }
.privacy-nav { display:grid; gap:6px; position:sticky; top:112px; align-self:start; }
.privacy-nav a { min-height:44px; padding:10px 14px; border-radius:14px; color:var(--muted); text-decoration:none; }
.privacy-nav a:hover { color:var(--accent-dark); background:#edf3fc; }
.privacy-content { background:#fff; padding:36px; border:1px solid var(--line); border-radius:28px; }
.privacy-content section { padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid var(--line); scroll-margin-top:112px; }
.privacy-content section:last-child { padding:0; margin:0; border:0; }
.privacy-content h2 { font-size:1.5rem; }
.data-facts { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.data-fact { padding:20px; background:#f5f7fa; border-radius:18px; }
.data-fact span { display:block; color:var(--muted); font-size:.875rem; }
.thank-you-card { max-width:800px; margin-inline:auto; padding:48px; border:1px solid #e0e7f0; border-radius:36px; background:#fff; box-shadow:var(--shadow-lg); }
.thank-you-card h1 { font-size:clamp(2rem,4vw,3rem); }
.divider { height:1px; border:0; background:var(--line); margin-block:32px; }
.site-footer { padding-top:72px; padding-bottom:24px; margin-top:48px; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:64px; padding-bottom:48px; }
.footer-brand { max-width:360px; }
.footer-brand .brand-logo { width:96px; }
.footer-brand .muted { margin-bottom:0; font-size:.9375rem; }
.footer-brand .small { font-size:.8125rem; }
.footer-links { display:flex; flex-direction:column; gap:0; }
.footer-links strong { margin-bottom:12px; font-size:.9375rem; }
.footer-links a { display:flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; font-size:.9375rem; }
.footer-links a:hover { color:var(--accent-dark); }
.education-note { border-top:1px solid var(--line); padding-top:24px; font-size:.8125rem; color:var(--muted); line-height:1.8; }
.education-note strong { font-weight:400; }
.effects-toggle { display:flex; align-items:center; gap:10px; width:fit-content; min-height:44px; padding:8px 14px; margin-top:20px; border:1px solid #d4dce7; border-radius:99px; background:#fff; font-size:.875rem; }
.effects-toggle::before { content:""; width:27px; height:16px; border-radius:20px; background:radial-gradient(circle at 8px 8px,#fff 5px,transparent 5.5px),#8491a4; }
.effects-toggle[aria-pressed="true"]::before { background:radial-gradient(circle at 19px 8px,#fff 5px,transparent 5.5px),#2563eb; }
.toast { position:fixed; z-index:200; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,12px); width:max-content; max-width:calc(100% - 40px); padding:14px 22px; border-radius:18px; color:#fff; background:var(--black); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity 180ms,transform 180ms; font-size:.9375rem; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.noscript { margin-top:120px; padding:20px; background:var(--warning-soft); border-radius:16px; color:var(--warning); }
@keyframes loop-arrive { from { opacity:0; transform:translateY(12px) rotate(-2deg); } to { opacity:1; transform:none; } }
/* Life overview: real 3D center with working service options around it. */
.page-hero.life-hero { padding:132px 0 48px; }
.life-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.life-heading .eyebrow { margin-bottom:12px; }
.life-heading h1 { font-size:clamp(2rem,3.15vw,2.875rem); margin:0; line-height:1.45; }
.life-heading .lead { max-width:350px; font-size:1rem; margin:0 0 6px; }
.life-dashboard { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.48fr) minmax(0,1fr); gap:24px; align-items:center; }
.life-options { min-width:0; display:grid; gap:20px; position:relative; z-index:2; }
.life-option { display:block; min-width:0; padding:24px; background:#fff; border:1px solid #e0e6ee; border-radius:28px; box-shadow:var(--shadow-sm); text-decoration:none; transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease; }
.life-option:hover { transform:translateY(-2px); border-color:#bacbe0; box-shadow:var(--shadow-lg); }
.life-option:active { transform:scale(.99); }
.life-option-ice { background:var(--blue-soft); border-color:var(--blue-edge); }
.life-option-mint { background:var(--mint-soft); border-color:var(--mint-edge); }
.life-option-lilac { background:var(--lilac-soft); border-color:var(--lilac-edge); }
.life-option-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.life-option .card-icon { margin:0; width:44px; height:44px; border-radius:14px; background:#ffffffd9; }
.life-option-index { font-size:.8125rem; color:#627188; }
.life-option h2,.life-consult h2 { font-size:1.125rem; line-height:1.6; margin-bottom:8px; }
.life-option p,.life-consult p { margin-bottom:18px; font-size:.9375rem; color:var(--muted); line-height:1.8; }
.life-option-action { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.9375rem; font-weight:500; }
.life-option-action .ui-icon { width:19px; height:19px; }
.life-consult { padding:20px 24px; }
.life-consult .button { margin-bottom:8px; }
.life-consult .text-link { display:flex; font-size:.875rem; }
.life-figure { margin:0; min-width:0; text-align:center; align-self:stretch; display:flex; flex-direction:column; justify-content:center; position:relative; isolation:isolate; }
.life-figure figcaption { display:flex; flex-direction:column; gap:7px; font-size:.875rem; color:#586779; margin-top:8px; }
.life-figure-kicker { font-size:.8125rem; letter-spacing:.10em; color:#626a77; }
.human-stage { position:relative; width:100%; aspect-ratio:.88; min-height:380px; isolation:isolate; }
.human-orbit { position:absolute; z-index:-1; width:92%; left:4%; top:12%; bottom:12%; border:1px solid #cbdaf1; border-radius:50%; background:radial-gradient(ellipse at 30% 30%,#d8edff 0,rgba(232,225,255,.6) 48%,rgba(247,248,250,0) 76%); }
.human-orbit::before { content:""; position:absolute; inset:14%; border:1px dashed #d7e1ed; border-radius:50%; }
.human-poster,.human-canvas { position:absolute; display:block; width:100%; height:100%; top:0; left:0; object-fit:contain; z-index:1; }
.human-canvas { opacity:0; pointer-events:none; }
.human-stage[data-render="3d"] .human-canvas { opacity:1; }
.human-stage[data-render="3d"] .human-poster { visibility:hidden; }
.human-ground { position:absolute; z-index:0; left:25%; width:50%; height:16px; bottom:8%; background:radial-gradient(ellipse,#91a5c249 0,#b3c1d126 40%,transparent 70%); border-radius:50%; }
.human-controls { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:-4px; position:relative; z-index:3; }
.human-controls .button { min-height:44px; padding:8px 18px; font-size:.875rem; background:#fff; box-shadow:var(--shadow-glass); }
.human-controls .ui-icon { width:18px; height:18px; }
.human-controls .small { font-size:.8125rem; min-height:24px; }
.life-today { margin-top:36px; padding:24px 32px; background:#fff; border:1px solid #dfe6ef; border-radius:28px; box-shadow:var(--shadow-sm); }
.life-today-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.life-today-heading .kicker { margin-bottom:4px; font-size:.8125rem; }
.life-today-heading h2 { margin:0; font-size:1.25rem; }
.life-today-tasks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.life-today-task { display:flex; gap:14px; align-items:center; border-right:1px solid #e5eaf1; padding-right:16px; }
.life-today-task:last-child { border:0; }
.life-today-task .task-check { flex-shrink:0; border-color:#a0b8d2; }
.life-today-task>div { display:flex; gap:16px; align-items:center; justify-content:space-between; flex:1; min-width:0; }
.life-today-task strong { font-size:.9375rem; font-weight:500; }
.life-today-task>div>span { font-size:.875rem; color:var(--muted); white-space:nowrap; }
.life-today-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding-top:16px; border-top:1px solid #e7ecf2; }
.life-today-footer p { margin:0; font-size:.875rem; color:var(--muted); }
.life-today-footer p strong { color:var(--text); }
.life-today-footer .text-link { font-size:.9375rem; white-space:nowrap; }
.life-footnote { margin:20px 0 0; font-size:.875rem; text-align:center; color:var(--muted); }
/* Small color accents: blue for planning, mint for information, lilac for writing. */
.life-option-ice,.service-grid>.card:first-child,#life-planner,#tab-planner,#panel-planner {
 --tone-soft:var(--blue-soft); --tone-edge:var(--blue-edge); --tone-ink:var(--blue-ink);
}
.life-option-mint,.service-grid>.card:nth-child(2),#organizer,#tab-summary,#panel-summary {
 --tone-soft:var(--mint-soft); --tone-edge:var(--mint-edge); --tone-ink:var(--mint-ink);
}
.life-option-lilac,.service-grid>.card:nth-child(3),#writer,#tab-writer,#panel-writer {
 --tone-soft:var(--lilac-soft); --tone-edge:var(--lilac-edge); --tone-ink:var(--lilac-ink);
}
.life-option .card-icon,.service-grid .card-icon { border-color:var(--tone-edge); }
.life-option-action,.service-grid .kicker { color:var(--tone-ink); }
.service-detail .service-code { color:var(--tone-ink); }
.service-detail .service-preview { border-color:var(--tone-edge); box-shadow:inset 0 3px 0 var(--tone-soft),var(--shadow-sm); }
.service-detail .service-preview .demo-label { background:var(--tone-soft); border-color:var(--tone-edge); color:var(--tone-ink); }
.demo-tab[aria-selected="true"] { background:var(--tone-soft); border-color:var(--tone-edge); color:var(--tone-ink); }
.demo-workspace { background:var(--tone-soft,#f0f3f7); border-color:var(--tone-edge,#e4e9f0); }
.step:nth-child(2)::before,.timeline-item:nth-child(2) .timeline-number { background:var(--lilac-soft); border-color:var(--lilac-edge); color:var(--lilac-ink); }
.step:nth-child(3)::before,.timeline-item:nth-child(3) .timeline-number { background:var(--mint-soft); border-color:var(--mint-edge); color:var(--mint-ink); }
.price-card:nth-child(1) { box-shadow:inset 0 3px 0 var(--blue-edge),var(--shadow-sm); }
.price-card:nth-child(2) { box-shadow:inset 0 3px 0 var(--lilac-edge),var(--shadow-sm); }
.price-card:nth-child(3) { box-shadow:inset 0 3px 0 var(--mint-edge),var(--shadow-sm); }
.price-card:nth-child(1) .kicker { color:var(--blue-ink); }
.price-card:nth-child(2) .kicker { color:var(--lilac-ink); }
.price-card:nth-child(3) .kicker { color:var(--mint-ink); }
.life-today-task:nth-child(1) .task-check { background:var(--blue-soft); border-color:#7a9fce; }
.life-today-task:nth-child(2) .task-check { background:var(--mint-soft); border-color:#77aa94; }
.life-today-task:nth-child(3) .task-check { background:var(--lilac-soft); border-color:#a28bc9; }
body[data-page="about"] .eyebrow { background:var(--lilac-soft); border-color:var(--lilac-edge); color:var(--lilac-ink); }
body[data-page="about"] .service-code { color:var(--lilac-ink); }
body[data-page="contact"] .eyebrow { background:var(--mint-soft); border-color:var(--mint-edge); color:var(--mint-ink); }
.contact-form { box-shadow:inset 0 3px 0 var(--mint-edge),var(--shadow-sm); }
.thank-you-card { box-shadow:inset 0 3px 0 var(--blue-edge),var(--shadow-lg); }
.data-fact:nth-child(1) { background:var(--blue-soft); }
.data-fact:nth-child(3) { background:var(--mint-soft); }
.data-fact:nth-child(4) { background:var(--lilac-soft); }
@media(max-width:1100px) {
 .life-dashboard { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); gap:16px; }
 .life-option { padding:20px; border-radius:24px; }
 .life-consult { padding:16px 20px; }
 .life-heading .lead { max-width:290px; }
 .life-heading h1 { font-size:2.2rem; }
 .human-stage { min-height:340px; }
 .life-today-task>div { align-items:flex-start; flex-direction:column; gap:0; }
 .life-today-footer p>span { display:block; }
}
@media(max-width:900px) {
 .life-heading { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:24px; }
 .life-heading .lead { max-width:620px; }
 .life-heading .lead br { display:none; }
 .life-dashboard { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:20px; }
 .life-figure { grid-column:1/-1; grid-row:1; width:100%; max-width:420px; margin:0 auto 8px; }
 .human-stage { min-height:0; height:430px; aspect-ratio:auto; }
 .life-options-left { grid-column:1; grid-row:2; }
 .life-options-right { grid-column:2; grid-row:2; }
 .life-option { padding:24px; }
 .life-consult { padding:20px 24px; }
 .life-today-tasks { gap:16px; }
 .life-today-footer { align-items:flex-start; flex-direction:column; gap:8px; }
}
@media(max-width:760px) {
 .page-hero.life-hero { padding:120px 0 32px; }
 .life-heading h1 { font-size:clamp(1.9rem,6.4vw,2.4rem); }
 .life-heading .lead { font-size:1rem; }
 .life-figure { max-width:390px; }
 .human-stage { height:380px; }
 .life-today { margin-top:24px; padding:24px; }
 .life-today-heading { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:12px; }
 .life-today-tasks { grid-template-columns:1fr; gap:0; }
 .life-today-task { border:0; border-bottom:1px solid #e5eaf1; padding:16px 0; }
 .life-today-task>div { flex-direction:row; align-items:center; gap:12px; }
 .life-today-footer { margin-top:12px; }
 .life-footnote { font-size:.8125rem; }
}
@media(max-width:560px) {
 .life-dashboard { grid-template-columns:1fr; gap:16px; }
 .life-options-left,.life-options-right { grid-column:1; grid-row:auto; }
 .life-options { gap:16px; }
 .life-figure { grid-column:1; grid-row:1; }
 .life-option { padding:22px; }
 .life-option-top { margin-bottom:12px; }
 .life-option p br { display:none; }
 .life-consult { padding:20px 22px; border:1px solid #e1e7ef; border-radius:24px; background:#edf3f9; }
 .life-consult .text-link { width:fit-content; }
 .human-stage { height:350px; }
 .life-heading { margin-bottom:18px; }
}
html[data-reduce-effects="true"] .life-option:hover,html[data-reduce-effects="true"] .life-option:active { transform:none; }
@media(prefers-reduced-motion:reduce) { .life-option:hover,.life-option:active { transform:none; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .nav-shell,.demo-tabs,.glass-toolbar { background:#fafbfd; } }
@media(min-width:1280px) { .hero-home .hero-actions { flex-direction:row; flex-wrap:nowrap; } .hero-home .hero-actions .button { padding-inline:18px; font-size:.9375rem; } }
@media(max-width:1100px) {
 .nav-link { padding-inline:9px; font-size:.875rem; }
 .nav-shell { gap:8px; }
 .hero-scene { min-height:510px; padding-left:12px; padding-right:0; }
 .hero-plan { padding:22px; }
 .scene-caption { left:12px; top:10px; }
 .service-detail { gap:40px; }
 .card { padding:24px; }
 .contact-layout { gap:40px; }
 .form-panel,.result-panel { padding:24px; }
 .task-item { padding:14px; }
 .demo-workspace { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
}
@media(max-width:980px) {
 .desktop-nav { display:none; }
 .nav-shell { justify-content:flex-end; gap:10px; padding-left:22px; }
 .nav-shell .brand { margin-right:auto; }
 .menu-toggle { display:inline-grid; border-color:transparent; background:#f0f3f7; }
 .mobile-nav { position:absolute; pointer-events:auto; right:48px; top:80px; width:min(380px,calc(100% - 96px)); max-height:calc(100dvh - 120px); overflow-y:auto; padding:16px; border:1px solid #e0e5ed; border-radius:28px; background:#fff; box-shadow:var(--shadow-lg); }
 .mobile-nav.open { display:grid; gap:4px; }
 .mobile-nav-link { min-height:48px; padding:12px 16px; border-radius:14px; text-decoration:none; }
 .mobile-nav-link[aria-current="page"] { color:var(--accent-dark); background:#edf3ff; font-weight:600; }
 .mobile-nav-link:hover { background:#f1f5fa; }
 .menu-toggle[aria-expanded="true"] .menu-line-two { opacity:0; }
 .hero-home h1 { font-size:clamp(2.5rem,5vw,3.5rem); }
 .hero-grid { gap:24px; grid-template-columns:1fr 1fr; }
 .hero-scene { min-height:485px; padding-left:0; }
 .preview-heading { gap:8px; }
 .preview-heading .demo-label { font-size:.8125rem; }
 .problem-section>.container { gap:40px; }
 .service-grid>.card:first-child { padding:28px; }
 .service-grid>.card { padding:28px; }
 .steps,.timeline { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
 .step:nth-child(2)::after,.timeline-item:nth-child(2)::before { display:none; }
 .service-detail { grid-template-columns:1fr 1fr; gap:32px; }
 .detail-grid { grid-template-columns:1fr; gap:24px; }
 .pricing-grid { gap:16px; }
 .price { font-size:1.8rem; }
 .price-card:last-child .price { font-size:1.4rem; }
 .demo-workspace { grid-template-columns:1fr; min-height:0; }
 .demo-panel { min-height:620px; }
 .result-panel { min-height:380px; }
 .task-item { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 44px; }
 .task-item .field:first-child { grid-column:auto; }
 .source-summary-grid { grid-template-columns:1fr 1fr; }
 .contact-layout { grid-template-columns:1fr 1.3fr; gap:28px; }
 .contact-form { padding:28px; }
 .contact-form .field-row { grid-template-columns:1fr; gap:0; }
 .privacy-grid { grid-template-columns:190px 1fr; gap:28px; }
 .privacy-content { padding:28px; }
 .footer-grid { gap:32px; }
}
@media(max-width:760px) {
 .container,.narrow { width:calc(100% - 48px); }
 .section { padding-block:64px; }
 .section-sm { padding-block:32px; }
 .site-header { top:16px; }
 .nav-shell { min-height:64px; padding:7px 8px 7px 20px; }
 .brand-logo { width:70px; }
 .nav-cta { min-height:44px; font-size:.875rem; padding:10px 16px; }
 .mobile-nav { right:24px; width:calc(100% - 48px); top:76px; }
 .page-hero { padding:128px 0 48px; }
 h1 { font-size:clamp(2.25rem,6vw,2.75rem); }
 h2 { font-size:1.875rem; }
 .lead { font-size:1rem; }
 .eyebrow { margin-bottom:20px; }
 .hero-home { padding:124px 0 36px; }
 .hero-grid { grid-template-columns:1fr; gap:8px; }
 .hero-copy { padding:0; }
 .hero-home h1 { font-size:clamp(2.25rem,7vw,2.75rem); line-height:1.4; margin-bottom:16px; }
 .hero-home .hero-actions { flex-direction:row; gap:12px; margin-top:24px; }
 .hero-home .hero-actions .button { font-size:.9375rem; padding-inline:18px; }
 .hero-note { margin-top:20px; }
 .hero-scene { min-height:480px; max-width:520px; width:100%; margin-inline:auto; padding:120px 0 16px; justify-content:center; }
 .ace-loop { width:100%; right:0; top:-14px; max-width:500px; }
 .scene-caption { top:36px; left:4px; font-size:.6875rem; }
 .hero-plan { max-width:400px; padding:24px; }
 .problem-section>.container { grid-template-columns:1fr; gap:32px; }
 .section-heading { margin-bottom:32px; }
 .problem-item { padding-block:16px; }
 .problem-item .number { top:19px; }
 .service-grid { grid-template-columns:1fr; gap:20px; }
 .service-grid>.card:first-child { grid-row:auto; grid-column:auto; display:block; }
 .service-grid>.card,.service-grid>.card:first-child { padding:28px; }
 .service-grid>.card:first-child .service-preview { margin-top:24px; }
 .card-grid,.pricing-grid,.prepare-grid,.before-after,.team-placeholder { grid-template-columns:1fr; gap:20px; }
 .before-panel,.after-panel { padding:28px; }
 .card { padding:28px; }
 .steps,.timeline { grid-template-columns:1fr; gap:0; }
 .step { padding:0 0 32px 72px; }
 .step:last-child { padding-bottom:0; }
 .step:not(:last-child)::after { display:block; width:1px; height:calc(100% - 64px); left:24px; top:56px; }
 .timeline-item { display:grid; grid-template-columns:48px minmax(0,1fr); gap:24px; padding-bottom:32px; }
 .timeline-item:last-child { padding-bottom:0; }
 .timeline-number { width:48px; height:48px; border-radius:16px; margin:0; }
 .timeline-item:not(:last-child)::before { display:block; left:24px; top:64px; width:1px; height:calc(100% - 80px); }
 .price-card h3,.price-note,.price { min-height:0; }
 .price-card .price { font-size:2.25rem; }
 .price-card:last-child .price { font-size:1.875rem; }
 .price-card .check-list { margin-bottom:24px; }
 .price-card .button { margin-top:0; }
 .notice { padding:20px; font-size:.9375rem; gap:12px; }
 .closing-cta { padding:48px 24px; gap:24px; border-radius:28px; }
 .closing-cta h2 { font-size:2rem; }
 .service-detail { grid-template-columns:1fr; gap:32px; padding-block:56px; }
 .service-detail:nth-child(even) .service-sticky,.service-detail:nth-child(even)>.stack { grid-column:auto; grid-row:auto; }
 .service-sticky .service-preview { margin-top:24px; }
 .detail-grid { grid-template-columns:1fr 1fr; gap:24px; }
 .service-code { margin-bottom:12px; }
 body[data-page="about"] .card-grid .card { grid-template-columns:40px 1fr; gap:12px; }
 body[data-page="about"] .card-grid .card p { grid-column:2; }
 body[data-page="about"] .page-hero { padding-bottom:48px; }
 .contact-layout { grid-template-columns:1fr; gap:32px; }
 .contact-form { padding:28px; }
 .contact-form .field-row { grid-template-columns:1fr 1fr; gap:16px; }
 .privacy-grid { grid-template-columns:1fr; gap:32px; }
 .privacy-nav { position:static; grid-template-columns:1fr 1fr; gap:4px; }
 .privacy-nav a { font-size:.875rem; padding:10px; background:#f1f4f8; }
 .privacy-content { padding:24px; }
 .data-facts { grid-template-columns:1fr; }
 .thank-you-card { padding:32px 24px; }
 body[data-page="demo"] .page-hero { padding-top:120px; }
 .demo-tabs { width:100%; border-radius:24px; padding:6px; gap:4px; flex-wrap:nowrap; }
 .demo-tab { flex:1; min-width:0; flex-direction:column; gap:6px; padding:10px 5px; font-size:.875rem; border-radius:18px; line-height:1.5; }
 .demo-workspace { padding:5px; border-radius:28px; gap:12px; }
 .demo-panel>.section-heading { margin-bottom:20px; }
 .form-panel,.result-panel { padding:22px; border-radius:24px; }
 .demo-panel { min-height:0; }
 .task-item { grid-template-columns:1fr 1fr 44px; gap:10px; padding:14px; }
 .task-item .field:first-child { grid-column:1/-1; }
 .task-item .field input,.task-item .field select { padding-inline:9px; }
 .result-placeholder { min-height:230px; padding:24px; }
 .source-summary-grid { grid-template-columns:1fr; }
 .source-box,.summary-box { padding:18px; }
 .comparison-wrap { overflow:visible; border:0; border-radius:0; background:transparent; }
 .comparison-table,.comparison-table tbody,.comparison-table tr,.comparison-table th,.comparison-table td { display:block; width:100%; }
 .comparison-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .comparison-table tbody tr { padding:20px; background:#fff; border:1px solid var(--line); border-radius:20px; margin-bottom:16px; }
 .comparison-table tbody th { width:100%; padding:0 0 12px; font-size:1rem; border-bottom:1px solid var(--line); }
 .comparison-table tbody td { padding:12px 0 0; border:0; display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; }
 .comparison-table td::before { content:attr(data-label); color:var(--text); font-weight:500; }
 .table-mobile-hint { display:none; }
 .site-footer { padding-top:48px; margin-top:32px; }
 .footer-grid { grid-template-columns:1fr 1fr; gap:32px; padding-bottom:32px; }
 .footer-brand { grid-column:1/-1; }
 .footer-brand .brand-logo { width:84px; }
 .education-note { font-size:.8125rem; }
 .toast { max-width:calc(100% - 32px); font-size:.875rem; }
}
@media(max-width:430px) {
 .container,.narrow { width:calc(100% - 40px); }
 .nav-shell { padding-left:16px; gap:6px; }
 .mobile-nav { right:20px; width:calc(100% - 40px); }
 .hero-home .hero-actions { flex-direction:column; align-items:stretch; }
 .hero-home .hero-actions .button { width:100%; }
 .hero-note { font-size:.8125rem; }
 .hero-scene { min-height:452px; padding-top:126px; }
 .scene-caption { top:20px; }
 .ace-loop { width:100%; right:0; top:-10px; }
 .hero-plan { padding:20px; }
 .preview-task { grid-template-columns:20px minmax(0,1fr) auto; gap:10px; font-size:.9375rem; }
 .preview-heading { align-items:flex-start; }
 .preview-heading h2 { font-size:1.125rem; }
 .preview-heading .demo-label { font-size:.8125rem; }
 .service-grid>.card,.service-grid>.card:first-child,.card { padding:24px; }
 .service-preview { padding:20px; }
 .detail-grid { grid-template-columns:1fr; }
 .form-panel,.result-panel { padding:18px; }
 .task-item { padding:12px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 44px; gap:8px; }
 .task-item .field label { font-size:.8125rem; }
 .task-item .field select,.task-item .field input { padding-inline:8px; }
 .contact-form { padding:22px; }
 .contact-form .field-row,.field-row { grid-template-columns:1fr; gap:0; }
 .result-metrics { gap:10px; }
 .metric { padding:14px; }
 .demo-tab { font-size:.8125rem; }
 .notice { padding:18px; }
 .notice-mark { width:22px; height:22px; }
 .comparison-table tbody td { grid-template-columns:84px minmax(0,1fr); }
 .privacy-content { padding:22px; }
 .desktop-break { display:none; }
}
html[data-reduce-effects="true"] { --glass:#fff; --blur:0px; scroll-behavior:auto; }
html[data-reduce-effects="true"] *,html[data-reduce-effects="true"] *::before,html[data-reduce-effects="true"] *::after { animation:none!important; transition:none!important; }
html[data-reduce-effects="true"] .ace-loop { transform:none!important; }
html[data-reduce-effects="true"] .button:hover,html[data-reduce-effects="true"] .button:active,html[data-reduce-effects="true"] .icon-button:hover { transform:none; }
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; --glass:#fff; --blur:0px; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
 .button:hover,.button:active,.icon-button:hover,.ace-loop { transform:none!important; }
}
@media(prefers-contrast:more) { :root { --muted:#404957; --line:#9eaaba; --glass:#fff; } .field input,.field select,.field textarea { border-color:#69788c; } }
@media print {
 .human-canvas,.human-controls { display:none!important; }
 .human-stage .human-poster { visibility:visible!important; }
 .site-header,.site-footer,.hero-actions,.demo-tabs,.output-actions,.ace-loop,.effects-toggle { display:none!important; }
 body,.section-surface { background:#fff; }
 .container,.narrow { width:100%; }
 .page-hero,.section,.section-sm { padding:20px 0; }
 .card,.reading-panel,.result-panel { box-shadow:none; break-inside:avoid; }
}