/* ── EMPATHY ── */
#empathy{display:grid;grid-template-columns:1fr 1fr;min-height:580px}
.emp-img{position:relative;overflow:hidden}
.emp-img-sizer{aspect-ratio:3/4;height:100%;min-height:580px}
.emp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.emp-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 55%,var(--bg) 100%)}
.emp-text{display:flex;flex-direction:column;justify-content:center;padding:80px 52px 80px 44px;background:var(--bg)}
.emp-h2{font-family:var(--serif);font-size:clamp(20px,3vw,28px);font-weight:300;line-height:1.75;color:var(--text);margin-bottom:28px}
.emp-list{border-left:1px solid var(--a-line);padding-left:20px;margin-bottom:28px}
.emp-list li{list-style:none;font-size:13px;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--border);display:flex;gap:10px}
.emp-list li::before{content:'—';color:var(--accent);flex-shrink:0}
.emp-p{font-size:13px;color:var(--muted);line-height:2.1}
.emp-p strong{color:var(--text);font-weight:400}

/* ── INLINE CTA BAND ── */
.icta{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 24px;text-align:center}
.icta p{font-size:13px;color:var(--muted);margin-bottom:16px;letter-spacing:.05em}
.icta a{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;color:var(--accent);border:1px solid var(--a-line);padding:12px 28px;text-decoration:none;border-radius:1px;transition:background .3s}
.icta a:hover{background:var(--a-pale)}
.icta a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── MOTTAINAI ── */
#mottainai{background:var(--bg2);padding:100px 24px;position:relative;overflow:hidden}
.mott-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(80px,18vw,180px);font-weight:300;color:rgba(196,169,109,.03);white-space:nowrap;pointer-events:none;letter-spacing:.04em;user-select:none}
#mottainai .wrap{position:relative}
.mott-h2{font-family:var(--serif);font-size:clamp(22px,4vw,36px);font-weight:300;line-height:1.65;color:var(--text);margin-bottom:12px}
.mott-sub{font-size:13px;color:var(--muted);line-height:2;margin-bottom:52px}
.loss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-bottom:52px}
.loss-cell{background:var(--bg2);padding:28px 22px;transition:background .3s}
.loss-cell:hover{background:var(--bg3)}
.loss-n{font-family:var(--display);font-size:28px;font-weight:300;color:var(--accent);opacity:.5;display:block;margin-bottom:6px}
.loss-t{font-size:14px;color:var(--text);font-weight:400;display:block;margin-bottom:6px}
.loss-d{font-size:12px;color:var(--muted);line-height:1.9}
.mott-close{font-size:15px;color:var(--muted);line-height:2.2}
.mott-close .hl{color:var(--accent);font-weight:400}

/* ── COST ── */
#cost{padding:100px 24px}
.cost-h2{font-family:var(--serif);font-size:clamp(19px,3.2vw,28px);font-weight:300;line-height:1.75;color:var(--text);margin-bottom:20px}
.cost-quote{font-family:var(--serif);font-size:clamp(14px,2.2vw,17px);font-weight:300;line-height:2;color:var(--text);border-left:1px solid var(--a-line);padding:4px 0 4px 22px;margin:36px 0 44px}
.tl-item{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.tl-item:last-child{border:none}
.tl-time{font-family:var(--display);font-size:10px;letter-spacing:.22em;color:var(--accent);padding-top:3px}
.tl-t{font-size:13px;color:var(--text);font-weight:400;margin-bottom:4px}
.tl-d{font-size:12px;color:var(--muted);line-height:1.9}
.cost-close{font-family:var(--serif);font-size:clamp(16px,2.5vw,20px);font-weight:300;color:var(--text);line-height:1.9;margin-top:48px}

/* ── FEATURES ── */
#feat{background:var(--bg2);padding:100px 0}
.feat-intro{font-size:13px;color:var(--muted);line-height:2.1;margin-bottom:52px;max-width:520px}
.feat-intro strong{color:var(--text);font-weight:400}
.feat-item{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--border);align-items:start}
.feat-item:first-of-type{border-top:1px solid var(--border)}
.feat-icon{width:36px;height:36px;border:1px solid var(--a-line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.feat-icon svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.feat-tag{display:inline-block;font-size:9px;letter-spacing:.18em;color:var(--accent);border:1px solid var(--a-line);padding:3px 10px;border-radius:20px;margin-bottom:8px}
.feat-h3{font-size:15px;color:var(--text);font-weight:400;margin-bottom:8px}
.feat-body{font-size:13px;color:var(--muted);line-height:2}

/* ── COMPARISON ── */
#comp{padding:80px 24px;background:var(--bg)}
.comp-note-pre{font-size:13px;color:var(--muted);line-height:2;margin-bottom:36px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.ct{width:100%;border-collapse:collapse;font-size:13px;min-width:380px}
table.ct th{padding:13px 18px;font-weight:400;font-size:11px;letter-spacing:.12em;background:var(--bg2);color:var(--muted);border-bottom:1px solid var(--border2);text-align:center}
table.ct th:first-child{text-align:left}
table.ct th.hi{background:var(--a-pale);color:var(--accent);border-bottom:1px solid var(--a-line)}
table.ct td{padding:13px 18px;border-bottom:1px solid var(--border);color:var(--muted);text-align:center;vertical-align:middle}
table.ct td:first-child{text-align:left;font-size:12px}
table.ct td.g{color:var(--accent);font-size:15px}
table.ct td.b{color:var(--dim)}
table.ct tr:last-child td{border-bottom:none}
.comp-footnote{font-size:10px;color:var(--dim);margin-top:14px;line-height:1.85}

/* ── VOICES ── */
#voices{padding:100px 24px;background:var(--bg2)}
.voice-item{padding:36px 0;border-bottom:1px solid var(--border)}
.voice-item:last-child{border:none}
.voice-q{font-family:var(--serif);font-size:clamp(15px,2.6vw,20px);font-weight:300;color:var(--text);line-height:1.8;margin-bottom:12px}
.voice-q::before{content:'「';color:var(--accent);opacity:.45}
.voice-q::after{content:'」';color:var(--accent);opacity:.45}
.voice-attr{font-size:10px;color:var(--dim);letter-spacing:.18em;margin-bottom:10px}
.voice-body{font-size:12px;color:var(--muted);line-height:2;padding-left:14px;border-left:1px solid var(--border2)}

/* ── FAQ ── */
#faq{padding:80px 24px;background:var(--bg)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-of-type{border-top:1px solid var(--border)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 0;gap:16px;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--text);line-height:1.6;letter-spacing:.02em}
.faq-q-prefix{color:var(--accent);font-family:var(--display);font-size:16px;flex-shrink:0}
.faq-q-text{flex:1;text-align:left}
.faq-icon{flex-shrink:0;width:20px;height:20px;position:relative}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--muted);border-radius:1px;transition:transform .35s var(--ease),opacity .35s}
.faq-icon::before{width:14px;height:1px;top:50%;left:3px;transform:translateY(-50%)}
.faq-icon::after{width:1px;height:14px;top:3px;left:50%;transform:translateX(-50%)}
.faq-item.open .faq-icon::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq-a{display:none;padding:0 0 22px;font-size:13px;color:var(--muted);line-height:2.1}
.faq-item.open .faq-a{display:block}

/* ── PRE-CTA ── */
#pre-cta{position:relative;overflow:hidden}
.pre-cta-img{width:100%;aspect-ratio:16/7}
.pre-cta-img img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
.pre-cta-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,12,.88) 0%,rgba(12,12,12,.42) 45%,rgba(12,12,12,.18) 100%),linear-gradient(to right,rgba(12,12,12,.28) 0%,transparent 60%)}
.pre-cta-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 64px 64px;z-index:2}
.pre-cta-copy{font-family:var(--serif);font-size:clamp(20px,3.5vw,32px);font-weight:300;color:var(--text);line-height:1.75;margin-bottom:14px;max-width:520px}
.pre-cta-sub{font-size:13px;color:rgba(237,233,224,.6);line-height:2;max-width:380px}

/* ── CTA ── */
#cta{padding:88px 24px 80px;text-align:center;background:var(--bg)}
#cta .wrap::before{content:'';display:block;width:1px;height:56px;background:linear-gradient(to bottom,transparent,var(--a-line));margin:0 auto 40px}
.cta-h2{font-family:var(--serif);font-size:clamp(22px,4vw,34px);font-weight:300;color:var(--text);line-height:1.65;margin-bottom:16px}
.cta-body{font-size:14px;color:var(--muted);line-height:2.1;margin-bottom:40px}
.cta-safe{display:flex;justify-content:center;flex-wrap:wrap;border:1px solid var(--border);max-width:440px;margin:0 auto 44px}
.safe-cell{flex:1;min-width:100px;padding:16px 10px;text-align:center;border-right:1px solid var(--border)}
.safe-cell:last-child{border-right:none}
.safe-cell svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.7;margin:0 auto 6px;display:block}
.safe-cell span{font-size:10px;color:var(--muted);line-height:1.6;display:block}
.cta-btns{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px}
.btn-main{display:inline-flex;align-items:center;gap:13px;background:var(--accent);color:#0c0c0c;font-size:13px;font-weight:500;letter-spacing:.16em;padding:20px 56px;border-radius:1px;text-decoration:none;transition:background .3s,transform .2s;font-family:var(--sans);border:none;cursor:pointer;min-width:300px;justify-content:center}
.btn-main:hover{background:#d4b97d;transform:translateY(-2px)}
.btn-main svg{width:14px;height:14px;stroke:#0c0c0c;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;flex-shrink:0}
.btn-main:hover svg{transform:translateX(4px)}
.btn-sub{font-size:12px;color:var(--dim);letter-spacing:.15em;border-bottom:1px solid var(--border);padding-bottom:2px;text-decoration:none;transition:color .3s;cursor:pointer}
.btn-sub:hover{color:var(--muted)}
.cta-note{font-size:10px;color:var(--dim);line-height:2}
.cta-nums{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:52px;padding-top:40px;border-top:1px solid var(--border)}
.cta-num-item{text-align:center}
.cta-num-val{font-family:var(--display);font-size:34px;font-weight:300;color:var(--accent);display:block;line-height:1;margin-bottom:8px}
.cta-num-lbl{font-size:11px;color:var(--muted);letter-spacing:.12em}

/* ── MICRO CTA PILL ── */
.mcta{display:flex;justify-content:center;padding:24px 24px}
.mcta a{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;color:var(--muted);border:1px solid var(--border2);padding:10px 22px;border-radius:40px;text-decoration:none;transition:color .3s,border-color .3s}
.mcta a:hover{color:var(--accent);border-color:var(--a-line)}
.mcta a svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── FOOTER ── */
footer{padding:44px 40px;border-top:1px solid var(--border);max-width:780px;margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;flex-wrap:wrap;gap:20px}
.footer-logo{font-family:var(--display);font-size:12px;letter-spacing:.35em;color:var(--dim)}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{font-size:11px;color:var(--dim);text-decoration:none;letter-spacing:.1em;transition:color .3s}
.footer-links a:hover{color:var(--muted)}
.footer-copy{font-size:10px;color:var(--dim)}
.disclaimer{font-size:10px;color:var(--dim);line-height:1.95;border-top:1px solid var(--border);padding-top:20px;margin-top:0}

/* ── STICKY MOBILE CTA ── */
#sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:400;background:rgba(12,12,12,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:10px 16px 14px;transform:translateY(100%);transition:transform .5s var(--ease);display:none;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
#sticky-bar.show{transform:none}
#sticky-bar.hide{transform:translateY(100%)}
.sticky-link{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:#0c0c0c;font-size:13px;font-weight:500;letter-spacing:.14em;padding:15px;border-radius:1px;text-decoration:none;font-family:var(--sans)}
.sticky-link svg{width:14px;height:14px;stroke:#0c0c0c;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sticky-sub{font-size:10px;color:var(--dim);text-align:center;margin-top:6px;letter-spacing:.1em}

/* ── BREADCRUMB ── */
.breadcrumb{padding:72px 24px 0;max-width:680px;margin:0 auto}
.breadcrumb ol{display:flex;gap:8px;list-style:none;font-size:11px;color:var(--dim);flex-wrap:wrap}
.breadcrumb li+li::before{content:'›';color:var(--dim)}
.breadcrumb a{color:var(--dim);text-decoration:none;transition:color .3s}
.breadcrumb a:hover{color:var(--muted)}

/* ── RESPONSIVE ── */
@media(max-width:800px){
  #hd{padding:14px 20px}
  .hd-nav a:not(.hd-cta){display:none}
  .hd-cta{margin-left:0;padding:8px 16px;font-size:11px}
  .fv-body{padding:0 20px 88px}
  .fv-badge{display:none}
  .fv-cta{padding:14px 24px}
  .fv-actions{gap:16px}
  #empathy{grid-template-columns:1fr}
  .emp-img-sizer{min-height:260px;height:260px}
  .emp-img img{position:static;width:100%;height:260px;object-fit:cover}
  .emp-img::after{background:linear-gradient(to bottom,transparent 55%,var(--bg) 100%)}
  .emp-text{padding:40px 20px 56px}
  .loss-grid{grid-template-columns:repeat(2,1fr)}
  .pre-cta-img{aspect-ratio:4/3}
  .pre-cta-content{padding:0 20px 36px}
  table.ct{font-size:12px}
  table.ct th,table.ct td{padding:11px 12px}
  .btn-main{min-width:0;width:100%;padding:18px 24px}
  .cta-safe{max-width:100%}
  .cta-nums{gap:28px}
  .cta-num-val{font-size:28px}
  #sticky-bar{display:block}
  #mottainai,#cost,#feat,#voices,#faq,#cta{padding-top:72px;padding-bottom:72px}
  footer{padding:32px 20px}
  .footer-top{flex-direction:column}
}
@media(max-width:480px){
  .loss-grid{grid-template-columns:1fr}
  .fv-h1{font-size:clamp(30px,9vw,44px)}
  .pre-cta-img{aspect-ratio:3/4}
  .cta-nums{gap:20px}
}
@media print{#hd,#sticky-bar,.icta,.mcta{display:none}}
/* Section headings (WP-friendly) */
.section-h2{font-family:var(--serif);font-size:clamp(20px,4vw,32px);font-weight:300;line-height:1.7;color:var(--text);margin-bottom:20px}
.section-h2--md{font-size:clamp(18px,3.2vw,26px);line-height:1.8;margin-bottom:10px}
.section-h2--sm{font-size:clamp(18px,3vw,24px);line-height:1.8;margin-bottom:36px}
.voices-stack{margin-top:40px}
.comp-th{width:36%;text-align:left}
/* Pre-CTA uses images/cta.webp */
#pre-cta .pre-cta-img{aspect-ratio:16/7}
@media(max-width:800px){#pre-cta .pre-cta-img{aspect-ratio:4/3}}
@media(max-width:480px){#pre-cta .pre-cta-img{aspect-ratio:3/4}}
/* Tap targets (mobile CV) */
a,button{touch-action:manipulation}
.hd-cta,.fv-cta,.btn-main,.sticky-link,.faq-q{min-height:44px}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r,.fv-kicker,.fv-h1,.fv-lead,.fv-actions,.fv-badge,#sticky-bar{transition:none!important;animation:none!important}
  .r,.fv-kicker,.fv-h1,.fv-lead,.fv-actions,.fv-badge{opacity:1!important;transform:none!important}
}