*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{
  /* === DIRECTION E: INK + BRIGHT GRADIENT (Canva-inspired) === */
  /* Surfaces */
  --paper:        #ffffff;
  --paper-2:      #fafafa;
  --paper-3:      #f5f5fa;
  --ink:          #1a1a2e;
  --ink-2:        #4a4a5e;
  --ink-3:        #8a8a9e;
  --ink-4:        #b8b8c8;
  --line:         #e5e5ee;
  --line-2:       #f0f0f5;
  --line-strong:  #d0d0dd;

  /* Brand accent */
  --cyan:         #00C4CC;
  --cyan-soft:    rgba(0, 196, 204, 0.1);
  --purple:       #7D2AE8;
  --purple-soft:  rgba(125, 42, 232, 0.1);
  --pink:         #FF6B9D;
  --pink-soft:    rgba(255, 107, 157, 0.1);
  --gradient:     linear-gradient(135deg, #00C4CC 0%, #7D2AE8 50%, #FF6B9D 100%);
  --gradient-soft: linear-gradient(135deg, rgba(0,196,204,0.08), rgba(125,42,232,0.08), rgba(255,107,157,0.08));

  /* Legacy tokens (kept for compatibility) */
  --red:          #FF3B2F;
  --red-soft:     rgba(255, 59, 47, 0.08);
  --paper-warm:   #fafafa;
  --paper-deep:   #f5f5fa;
  --oat-cool:     #ffffff;

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', 'Noto Sans TC', sans-serif;
  --font-serif:   'Fraunces', serif;
  --font-sans:    'Inter', 'Noto Sans HK', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-cjk:     'Noto Sans HK', 'Inter', sans-serif;

  /* Font sizes (Design System v2 - unified) */
  --fs-hero:    clamp(48px, 7vw, 88px);
  --fs-h1:      clamp(40px, 5.5vw, 64px);
  --fs-h2:      clamp(32px, 4vw, 48px);
  --fs-h3:      clamp(20px, 2.5vw, 24px);
  --fs-body-lg: 18px;
  --fs-body:    15px;
  --fs-body-sm: 13px;
  --fs-mono:    12px;
  --fs-eyebrow: 12px;

  /* Spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-section: 96px;
  --s-gap:    32px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;
  --r-tag:  9999px;
  --r-0:    0px;

  /* Shadows (Canva-style subtle) */
  --shadow-sm:  0 1px 2px rgba(26,26,46,0.04);
  --shadow-md:  0 4px 16px rgba(26,26,46,0.06);
  --shadow-lg:  0 8px 32px rgba(26,26,46,0.08);
  --shadow-glow-cyan:   0 0 24px rgba(0,196,204,0.3);
  --shadow-glow-purple: 0 0 24px rgba(125,42,232,0.3);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-med:  0.4s;
  --dur-slow: 0.8s;
}
html{-webkit-font-smoothing:antialiased;color-scheme:light}body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}.mono{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}.nav{background:var(--paper);border-bottom:2px solid var(--ink);padding:20px 32px;position:sticky;top:0;z-index:70}.nav-inner{max-width:1840px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto auto;gap:48px;align-items:center;padding:0 32px}@media(max-width:767px){.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;grid-template-columns:none}.nav-burger{margin-left:auto}}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand-logo-img{height:28px;width:auto;display:block}.brand-name{display:none}.nav-links{display:flex;gap:32px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.nav-links a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}.nav-cta{font-family:var(--font-mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:12px 20px;background:var(--ink);color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;gap:8px}

/* Nav lang toggle (2026-09-25) */
.nav-lang-toggle{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:9999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:600;backdrop-filter:blur(8px)}
.nav-lang{padding:2px 6px;border-radius:6px;color:rgba(255,255,255,.7);text-decoration:none;transition:color .18s ease,background .18s ease}
.nav-lang:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-lang.active{color:var(--bg-base);background:linear-gradient(90deg,var(--pink),var(--orange));font-weight:700}
.nav-lang-sep{color:rgba(255,255,255,.3);font-size:10px}.hero{position:relative;max-width:1840px;margin:0 auto;padding:80px 32px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;border-bottom:2px solid var(--ink);min-height:680px;background:transparent;overflow:hidden}.hero>*{position:relative;z-index:2}.hero>*{position:relative;z-index:2}@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:32px;padding:48px 24px;min-height:auto;overflow:hidden}.hero::before{background:rgba(250,250,247,.82)}}.hero-text{display:flex;flex-direction:column;gap:24px;padding-bottom:32px}.hero-eyebrow{font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;color:var(--ink);display:flex;align-items:center;gap:10px;text-transform:uppercase}.hero-eyebrow .num{background:var(--ink);color:var(--paper);padding:2px 8px;font-weight:700}.hero-h1{font-family:var(--font-display);font-size:clamp(40px,5.5vw,72px);font-weight:800;line-height:.95;letter-spacing:-.04em;color:var(--ink)}.hero-h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--red)}.hero-lede{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:600px;padding-top:24px;border-top:1px solid var(--ink)}.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;padding-top:16px}.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:18px 32px;text-decoration:none;cursor:pointer;border-radius:0;transition:background .15s,color .15s;border:none}.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:var(--red)}.btn-ghost{background:0 0;color:var(--ink);border:1px solid var(--ink)}.btn-ghost:hover{background:var(--ink);color:var(--paper)}.icon{width:16px;height:16px;flex-shrink:0}.nav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;height:40px;border:none;background:0 0;color:var(--ink);cursor:pointer;padding:0;border-radius:0}.nav-burger .burger-line{display:block;width:22px;height:2px;background:var(--ink);border-radius:0;transition:transform .2s ease,opacity .2s ease}.nav-burger.is-open .burger-line:first-child{transform:translateY(7px) rotate(45deg)}.nav-burger.is-open .burger-line:nth-child(2){opacity:0}.nav-burger.is-open .burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-burger:hover{background:rgba(10,10,10,.05)}.nav-burger:focus-visible{outline:3px solid var(--red);outline-offset:2px}.nav-drawer{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(250,250,247,.98);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:2px solid var(--ink);color:var(--ink);padding:96px 20px 32px;overflow-y:auto;z-index:60;display:none}.nav-drawer.is-open{display:block}.nav-burger.is-open{background:0 0}.nav-drawer.is-open{display:block}.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(10,10,10,.4);z-index:55;opacity:0;transition:opacity .2s ease}.drawer-backdrop.is-open{display:block;opacity:1}.drawer-links{display:flex;flex-direction:column;gap:0;margin:0 0 32px;padding:0;list-style:none}.drawer-links li{display:block;list-style:none;margin:0;padding:0}.drawer-links li a{display:flex;align-items:center;color:var(--ink-soft);font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;text-transform:none;border-bottom:1px solid var(--line);border-radius:0;padding:20px 16px;text-decoration:none;min-height:48px}.drawer-links li a:focus-visible,.drawer-links li a:hover{background:0 0;color:var(--ink)}.drawer-cta{background:var(--ink);color:var(--paper);border-radius:0;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.drawer-cta:hover{background:var(--red);transform:none;box-shadow:none}@media(max-width:767px){.nav-burger{display:flex}.nav-cta{display:none}.nav-links{display:none}}@media(min-width:768px){.nav-burger{display:none}}.hero-meta{position:absolute;bottom:24px;left:32px;right:32px;display:flex;gap:24px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);z-index:2}@media(max-width:900px){.hero-meta{left:24px;right:24px;bottom:16px;gap:12px;font-size:11px}}.spec-strip{background:var(--ink);color:var(--paper);border-bottom:2px solid var(--ink)}
/* === spec-strip dark theme: force all text to paper color === */
.spec-strip,.spec-strip *{color:var(--paper)}
.spec-strip .section-h2,.spec-strip .section-lede{color:var(--paper)}
.spec-strip a,.spec-strip a:visited{color:var(--paper);text-decoration-color:rgba(250,250,247,.4)}
.spec-strip a:hover{color:var(--red)}
.spec-strip li,.spec-strip strong,.spec-strip b{color:var(--paper)}
.spec-strip em{color:var(--red)}
.spec-strip .section-eyebrow{color:var(--red)}
.spec-strip .section-h2{color:var(--paper)}
.spec-strip .section-h2 em{color:var(--red)}
.spec-strip .section-lede{color:var(--paper)}
.spec-strip .section-lede em{color:var(--red)}.spec-strip-inner{max-width:1840px;margin:0 auto;padding:18px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}.spec-strip .item{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px}.spec-strip .item::before{content:'';width:8px;height:8px;background:var(--red);border-radius:0;flex-shrink:0}.spec-strip .item .lbl{color:rgba(250,250,247,.5)}.spec-strip .item .val{color:var(--paper);font-weight:700}.section{max-width:1840px;margin:0 auto;padding:96px 32px;border-bottom:2px solid var(--ink)}@media(max-width:900px){.section{padding:64px 24px}}.section-eyebrow{font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;color:var(--red);text-transform:uppercase;margin-bottom:24px;display:flex;align-items:center;gap:10px}.section-eyebrow::before{content:'';width:32px;height:1px;background:var(--red)}.section-h2{font-family:var(--font-display);font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);margin-bottom:48px;max-width:1000px}.section-h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--red)}.workflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--ink)}@media(max-width:900px){.workflow-grid{grid-template-columns:1fr}}.workflow-card{padding:48px;background:var(--ink);display:flex;flex-direction:column;gap:24px;border-right:2px solid var(--ink)}.workflow-card:last-child{border-right:none}@media(max-width:900px){.workflow-card{border-right:none;border-bottom:2px solid var(--ink)}
.workflow-tag{color:var(--paper);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:8px}
.workflow-h3{color:var(--paper);font-size:24px;font-weight:700;line-height:1.2;font-family:var(--font-display);letter-spacing:-.02em}
.workflow-list li{color:var(--paper)}.workflow-card:last-child{border-bottom:none}}.workflow-card.b{background:var(--paper-warm)}.wf-tag{display:inline-flex;font-family:var(--font-mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:6px 12px;width:fit-content;font-weight:600}.wf-tag.b{background:var(--red)}.wf-title{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--ink)}.wf-title em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--red)}.wf-desc{font-size:14px;line-height:1.6;color:var(--ink-soft)}.wf-features{list-style:none;display:flex;flex-direction:column;gap:14px;margin:8px 0 16px}.wf-features li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:13px;line-height:1.5;color:var(--ink)}.wf-features li::before{content:'→';font-family:var(--font-mono);color:var(--red);font-weight:700}.wf-features li strong{font-weight:700;display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}.wf-features li span{color:var(--ink-soft)}.wf-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);text-decoration:none;padding:14px 22px;border:1px solid var(--ink);width:fit-content;transition:background .15s,color .15s}.wf-cta:hover{background:var(--ink);color:var(--paper)}.wf-cta.b{border-color:var(--red);color:var(--red)}.wf-cta.b:hover{background:var(--red);color:var(--paper)}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(103,232,249,0.15);border-left:1px solid rgba(103,232,249,0.15)}@media(max-width:900px){.features{grid-template-columns:1fr 1fr;border-color:rgba(103,232,249,0.15)}}.feature{padding:32px 24px;border-right:1px solid rgba(103,232,249,0.15);border-bottom:1px solid rgba(103,232,249,0.15);background:rgba(255,255,255,0.03);color:var(--paper)}.feature:nth-child(2){background:rgba(255,255,255,0.05)}.feature:nth-child(4){background:rgba(255,255,255,0.05)}.feature .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:#67e8f9;margin-bottom:16px;text-transform:uppercase}.feature .name{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px;color:var(--paper)}.feature .desc{font-size:12px;line-height:1.6;color:#94a3b8}.feature .meta{margin-top:16px;padding-top:12px;border-top:1px solid rgba(103,232,249,0.15);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:#94a3b8;text-transform:uppercase}.material-section{background:linear-gradient(180deg,#0a0e1a 0%,#11162a 100%);color:var(--paper)}.material-section .section{max-width:1840px;margin:0 auto;padding:96px 32px;border-bottom:none}.material-section .section-eyebrow{color:var(--red)}.material-section .section-eyebrow::before{background:var(--red)}.material-section .section-h2{color:var(--paper)}.material-section .section-h2 em{color:var(--red)}@media(max-width:900px){}.material-meta .material-table{width:100%;border-collapse:collapse;margin-bottom:24px}.material-table td,.material-table th{padding:14px 12px;border-bottom:1px solid rgba(250,250,247,.1);text-align:left;font-size:13px;color:var(--paper)}.material-table th{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:rgba(250,250,247,.5);text-transform:uppercase;font-weight:600}.material-table td .material-table td .delta{font-family:var(--font-mono);font-size:13px;color:rgba(250,250,247,.7)}.material-table tr{cursor:default;transition:background .15s}.material-table tbody tr:hover{background:rgba(255,59,47,.05)}@media(max-width:900px){}.trust-item .num{font-family:var(--font-display);font-size:48px;font-weight:800;letter-spacing:-.03em;color:#67e8f9;line-height:1;margin-bottom:8px}.trust-item .num em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:#a5f3fc;font-size:32px}.trust-item .label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}.trust-item .delta{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:#67e8f9;margin-top:6px;text-transform:uppercase;font-weight:600}@media(max-width:900px){}.case-img img{width:100%;height:100%;object-fit:cover}.case-text .case-text blockquote{font-family:var(--font-serif);font-size:24px;font-style:italic;font-weight:400;line-height:1.4;color:var(--ink);margin-bottom:24px}.case-text .case-text .cite strong{color:var(--ink);font-weight:700}.case-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;padding-top:32px;border-top:1px solid var(--ink)}.case-stat .v{font-family:var(--font-display);font-size:36px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;margin-bottom:4px}.case-stat .v em{font-family:var(--font-serif);font-style:italic;color:var(--red)}.case-stat .l{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}@media(max-width:900px){}.journal-card .journal-card .jc-img img{width:100%;height:100%;object-fit:cover}.journal-card .journal-card .journal-card .journal-card .journal-card .contact-section{background:var(--ink);color:var(--paper)}.contact-section .section{max-width:1840px;margin:0 auto;padding:96px 32px;border-bottom:none}.contact-section .section-h2{color:var(--paper)}.contact-section .section-h2 em{color:var(--red)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:48px}@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}}.contact-channel{padding:32px;border:1px solid rgba(250,250,247,.2);display:flex;flex-direction:column;gap:12px;background:rgba(250,250,247,.02);transition:background .15s,border-color .15s}.contact-channel:hover{background:rgba(255,59,47,.05);border-color:var(--red)}.contact-channel .label{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}.contact-channel .title{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--paper)}.contact-channel .desc{font-size:13px;line-height:1.6;color:rgba(250,250,247,.65)}.contact-channel .handle{font-family:var(--font-mono);font-size:13px;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(250,250,247,.2);padding-bottom:8px;display:inline-block}.contact-channel .handle:hover{border-color:var(--red);color:var(--red)}.contact-channel .cta-row{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}.contact-channel .cta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--red);color:var(--red);text-decoration:none;transition:background .15s,color .15s}.contact-channel .cta:hover{background:var(--red);color:var(--paper)}.contact-channel .contact-channel .contact-channel .footer{background:var(--ink);color:rgba(250,250,247,.5);padding:48px 32px 24px;border-top:1px solid rgba(250,250,247,.1)}.footer-inner{max-width:1840px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:32px}@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}.footer-col h3{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:16px}.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}.footer-col a{font-size:13px;color:rgba(250,250,247,.7);text-decoration:none;font-family:var(--font-sans)}.footer-col a:hover{color:var(--red)}.footer-bottom{max-width:1840px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(250,250,247,.1);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,247,.4);flex-wrap:wrap;gap:16px}@keyframes slide-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.fade-in{animation:slide-up .6s ease-out backwards}.fade-in.d1{animation-delay:.1s}.fade-in.d2{animation-delay:.2s}.fade-in@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}.related-pages{padding:64px 0;border-top:1px solid var(--line)}
/* === Workflow card text contrast === */
.workflow-card{color:var(--paper)}
.workflow-card .wf-title{color:var(--paper)}
.workflow-card .wf-desc{color:rgba(250,250,247,.75)}
.workflow-card .wf-features li{color:var(--paper)}
.workflow-card .wf-features li span{color:rgba(250,250,247,.65)}
.workflow-card .wf-cta{color:var(--paper);border-color:var(--paper)}
.workflow-card .wf-cta:hover{background:var(--paper);color:var(--ink)}
/* B card: paper-warm bg → dark text */
.workflow-card.b{color:var(--ink)}
.workflow-card.b .wf-title{color:var(--ink)}
.workflow-card.b .wf-title em{color:var(--red)}
.workflow-card.b .wf-desc{color:rgba(10,10,10,.75)}
.workflow-card.b .wf-features li{color:var(--ink)}
.workflow-card.b .wf-features li span{color:rgba(10,10,10,.65)}
.workflow-card.b .wf-cta{color:var(--ink);border-color:var(--ink)}
.workflow-card.b .wf-cta:hover{background:var(--ink);color:var(--paper)}
/* === Red text contrast on cream backgrounds === */
.section-eyebrow{color:#d12819}
.feature .num,.feature .delta,.trust-item .delta,.delta{color:#67e8f9}
.craft,.craft-tag{color:#d12819}
table th{color:var(--ink)}

/* Light-bg cards inside spec-strip: re-apply dark text */
.spec-strip .hub-card,.spec-strip .related-card,.spec-strip .blog-card,.spec-strip .case-card{color:var(--ink)}
.spec-strip .hub-card-num,.spec-strip 
.spec-strip .hub-card-desc,.spec-strip 
.spec-strip .blog-card-meta,.spec-strip 

/* Tables in spec-strip (light bg) */
.spec-strip table{background:var(--paper);color:var(--ink)}
.spec-strip th{color:var(--ink);font-weight:700}
.spec-strip td{color:var(--ink)}
.spec-strip .craft,.spec-strip .craft-tag{color:#d12819}
.spec-strip .delta{color:#d12819}
.spec-strip 
/* Generic light-bg block inside spec-strip */
.spec-strip .on-light,.spec-strip 

/* Direct override - hub-card-h3 inside spec-strip */
.spec-strip .hub-card-h3,.spec-strip .related-card-h3,.spec-strip .blog-card-h3,.spec-strip 
.spec-strip .hub-card-cta,.spec-strip .related-card-cta,.spec-strip .blog-card-cta,.spec-strip 

/* === P0 contrast fixes === */
/* .article-list li inside .spec-strip (dark) - override ink text */
.spec-strip .article-list li{color:var(--paper)!important}
.spec-strip .article-list li:before{background:var(--red)!important}
/* Stats grid .v/.l on dark bg - ensure light text */
.spec-strip .v,.spec-strip .l{color:var(--paper)}
.spec-strip .v{color:var(--paper)}
.spec-strip .l{color:rgba(250,250,247,.65)}
/* wf-tag.b on card.b (paper-warm bg) - cream text on red bg ok 3.39:1, large ok */
/* Section eyebrow - already #d12819, but make sure it's correct on cream */

/* === Home page P0 contrast === */
.case-stat .v{color:var(--paper)}
.case-stat .l{color:rgba(250,250,247,.65)}
/* Blog meta red - darken to #d12819 */
.jc-meta,.jc-meta span{color:#d12819}
/* Section eyebrow on dark contact - cream */
.contact-section .section-eyebrow,.contact-section .section-h2 em{color:#d12819}

/* === Last P0 contrast edges === */
/* wf-tag.b cream on red bg = 3.39:1 - acceptable but bump font to 14+ for large text 3:1 */
.wf-tag{font-weight:700}
/* Section-eyebrow on contact-section (dark bg) needs cream, not #d12819 */
.contact-section .section-eyebrow{color:var(--paper)}

/* === P1 UI fixes === */
/* Touch targets: nav links min 44px height (Apple HIG/Material) */
.nav-links a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px}
/* Brand touch target */

/* Hamburger touch target 44x44 */
.nav-burger{width:44px;height:44px;min-height:44px}
/* Submit Brief CTA touch target 44 */
.nav-cta{min-height:44px}
/* === Nav auth buttons (Log In + Sign Up Free) — 2026-09-19 === */
.nav-auth{display:inline-flex;align-items:center;gap:8px;margin-right:6px}
.nav-auth-login,.nav-auth-signup{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:9999px;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;text-decoration:none}
.nav-auth-login{background:transparent;border:1px solid var(--pt-blue,#1856FF);color:var(--pt-blue,#1856FF)}
.nav-auth-login:hover{background:var(--pt-blue,#1856FF);color:var(--pt-paper,#FAFAF7);transform:translateY(-1px)}
.nav-auth-login:focus-visible{outline:2px solid var(--pt-blue,#1856FF);outline-offset:2px}
.nav-auth-signup{background:var(--pt-blue,#1856FF);border:1px solid var(--pt-blue,#1856FF);color:var(--pt-paper,#FAFAF7)}
.nav-auth-signup:hover{background:var(--pt-blue-dark,#0e3fa0);border-color:var(--pt-blue-dark,#0e3fa0);transform:translateY(-1px);box-shadow:0 4px 12px rgba(24,86,255,.25)}
.nav-auth-signup:focus-visible{outline:2px solid var(--pt-blue,#1856FF);outline-offset:2px}
/* Hide auth buttons on mobile — drawer has them */
@media (max-width:768px){.nav-auth{display:none}}
/* Drawer auth group */



.drawer-auth-link>span:first-child{font-weight:600;font-size:14px;color:var(--pt-blue,#1856FF)}


.drawer-auth-signup>span:first-child{color:var(--pt-paper,#FAFAF7)}


.drawer-auth-signup 
/* === Drawer z-index above Lucy (2026-09-19) === */
.nav-drawer.is-open,.nav-drawer.open,.nav-drawar.open{opacity:1!important}
/* Drawer z-index override — at same top layer as Lucy (z-index:1000) (2026-09-27 P2 fix) */
.nav-drawer,.nav-drawar{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(250,250,247,.98);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:2px solid var(--ink);color:var(--ink);padding:96px 20px 32px;overflow-y:auto;z-index:1000}
/* When drawer is open, hide Lucy floating widget so it doesn't cover the drawer items */
body.drawer-open .lucy-floating-widget,body.drawer-open [class*="lucy"]{opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .2s,visibility .2s,transform .2s;pointer-events:none}
/* Line length cap: paragraphs in main content max 72ch */
.section-lede,.section p,.hero p,.blog-post p,.case-study p{max-width:72ch}
/* Z-index scale normalize */
.nav{z-index:100}
.nav-drawer{z-index:90}
.drawer-backdrop{z-index:80}
.ai-cs,
/* Skip link visible on focus */
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:1000;background:#0a0a0a;color:#fafaf7;padding:12px 16px;border-radius:6px;text-decoration:none}
/* Footer links touch targets */
.footer-link,.footer-nav a{min-height:44px;display:inline-flex;align-items:center}

/* === Extended P1 === */
/* All P in main content (including .specs-note, .hero-lede, etc.) */
.section p,.hero p,.specs-note,.hero-lede,.blog-post p,.case-study p,.delta-desc,
/* Brand touch target 44px height */
.brand{min-height:44px;display:inline-flex;align-items:center}

/* === Global P cap === */
main p{max-width:72ch}

/* === Drawer fixes === */
.drawer-cta{display:inline-flex;align-items:center;min-height:48px;padding:16px 24px;font-size:13px}
.drawer-backdrop{z-index:80}

/* === Drawer close button === */
.drawer-close{position:absolute;top:118px;right:24px;width:44px;height:44px;background:transparent;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;border-radius:0;z-index:1}
.drawer-close:hover{color:var(--red)}

/* ============ D4 Fashion-Tech header (Danny picked 2026-08-30) ============ */
.nav-tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;color:rgba(10,10,10,0.45);text-transform:uppercase;letter-spacing:0.16em;padding-left:12px;border-left:1px solid rgba(10,10,10,0.12);margin-left:12px;line-height:1}
@media (max-width:900px){.nav-tag{display:none}}

/* Nav-link red hover underline (D4 signature) */
.nav-link{position:relative;padding:6px 0;transition:color 0.2s}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--red);transition:width 0.25s ease}
.nav-link:hover::after,.nav-link.is-active::after{width:100%}

/* Nav-CTA pill (D4 signature) */
.nav-cta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;border-radius:9999px;padding:14px 22px;background:var(--ink);color:var(--paper);transition:background 0.2s, transform 0.2s}
.nav-cta:hover{background:var(--red);transform:translateY(-1px)}

/* Drawer CTA mono uppercase pill (D4) */
.drawer-cta-primary{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;border-radius:9999px}

/* ============ Related grid + link fix (Danny debug 2026-08-30) ============ */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:32px}
.related-link{display:flex;align-items:center;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:background 0.2s, color 0.2s}
.related-link:hover{background:var(--ink);color:var(--paper)}
.related-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.16em;color:rgba(10,10,10,0.5)}
.related-inner{max-width:1200px;margin:0 auto;padding:0 24px}

/* ============ Skip link accessibility upgrade (modern pattern, 2026-08-30) ============ */
.skip-link:not(:focus){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:1000;width:auto;height:auto;padding:12px 16px;background:var(--ink);color:var(--paper);border-radius:6px;text-decoration:none}
/* ============ AI CS Hero Box (D1 inline right, Danny 2026-08-30) ============ */

.hero-grid>*,.hero-grid-single>*{min-width:0}

.hero-grid-single .hero-text{max-width:100%}
@media (max-width:900px){.hero-grid,}

/* ============ CFO + CFS Audience Cards (Danny 2026-08-30) ============ */

@media (max-width:700px){
.hero{padding:40px 20px 56px!important;gap:0!important}
.hero-text{gap:14px;padding-bottom:0}
.hero-h1{font-size:38px!important;line-height:1.05}
.hero-lede{font-size:14px;line-height:1.55;padding-top:16px;border-top:1px solid var(--ink)}
.hero-eyebrow{font-size:11px}
.hero-cta-row .btn{padding:14px 18px!important;font-size:11px!important;min-height:44px}
.flow-card{padding:18px 16px!important;min-height:auto!important}





.audience-list li{margin-bottom:2px!important}

.flow-card-cta,

.persona-tabs{gap:3px;padding:3px;margin-bottom:16px}
.persona-tab{font-size:11px;padding:6px 10px}
.hero-meta{font-size:10px!important;gap:12px!important;flex-wrap:wrap}
/* ============ Section 2 · New AI CS (2026-09-07 refine) ============ */




.ai-cs-h2 em{color:#d12819;font-style:normal}
.ai-cs-new .persona-tabs{margin-bottom:24px}
.ai-cs-new 

/* New chat box (replaces v7 wizard) */











.ai-chat-msg-lucy 
.ai-chat-msg-user 









/* Mobile */
@media (max-width:700px){
  
  
  
  
  
}

}
.flow-card{background:#FAFAF7;border:1px solid rgba(10,10,10,0.1);border-radius:12px;padding:24px 22px;position:relative;transition:border-color 0.2s,transform 0.2s;text-decoration:none;color:inherit;display:block;cursor:default}

.flow-card:hover{border-color:#FF3B2F;transform:translateY(-2px)}

.flow-card-cfo 
.flow-card-cfs 




.audience-list 
.audience-list li{padding:3px 0;display:flex;align-items:center;gap:6px}
.audience-list li::before{content:"—";color:#FF3B2F;font-weight:600}

.flow-card-cta,
.flow-card-cta:focus-visible,
.flow-card-cfo 
/* ============ Persona-tab matching card highlight (2026-09-07) ============ */
.flow-card {
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.flow-card
.flow-card
.flow-card

.flow-card-cfs 
.flow-card-cfo 
.flow-card-cfs 
.flow-card-cfo:hover 
.flow-card-cfs:hover .flow-card-cta{background:#0A0A0A;color:#FAFAF7}
.flow-card:hover 




/* ============ Persona Tabs (Pattern A, Danny 2026-08-30) ============ */
.persona-tabs{display:flex;gap:4px;background:rgba(10,10,10,0.04);border-radius:12px;padding:4px;margin-bottom:24px;border:1px solid rgba(10,10,10,0.08);width:fit-content;max-width:100%;flex-wrap:wrap}
.persona-tab{padding:12px 16px;border-radius:8px;font-size:13px;font-weight:500;color:rgba(10,10,10,0.6);cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:0;background:0;font-family:inherit;transition:background 0.2s,color 0.2s;white-space:nowrap;min-height:44px}
.persona-tab.is-active{background:#0A0A0A;color:#FAFAF7}
.persona-tab:hover:not(.is-active){background:rgba(10,10,10,0.06);color:#0A0A0A}
.persona-tab:focus-visible{outline:2px solid #FF3B2F;outline-offset:2px}
.persona-ico{width:16px;height:16px;flex-shrink:0;display:block}
.persona-label{line-height:1}
@media (max-width:700px){.persona-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.persona-tab{font-size:12px;padding:10px 14px;min-height:44px}}

.ai-cs-box{background:#FAFAF7;color:#0A0A0A;border-radius:14px;padding:28px 28px 24px;box-shadow:0 1px 0 rgba(10,10,10,0.06),0 8px 24px rgba(10,10,10,0.08);position:relative;border:1px solid rgba(10,10,10,0.08);width:100%;max-width:100%;scroll-margin-top:96px}
.ai-cs-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FF3B2F 0%,rgba(255,59,47,0.3) 100%);border-radius:14px 14px 0 0}










/* ============ Lucy v3 Hybrid (E1 Use Case Funnel + E2 Material Picker) · Danny 2026-08-31 ============ */


.l3-stage.is-active{background:#0A0A0A;color:#FAFAF7}
.l3-stage

.l3-stage.is-active 


.l3-panel.is-active{display:block}
@keyframes l3Fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}



















.l3-fab-prop 










.l3-gar-note strong{color:#0A0A0A;font-weight:600}

.l3-pricing-disclaimer strong{color:#B82835;font-weight:600}

/* ============ Lucy v4 · 5 Discovery Questions + Open Box · PERSON.TEES 2026-08-31 ============ */

.l4-greet strong{color:#0A0A0A;font-weight:600}

.l4-dot{width:8px;height:8px;border-radius:50%;background:rgba(10,10,10,0.18);transition:all 0.2s;display:inline-block}
.l4-dot.is-answered{background:#1F8B4C;transform:scale(1.15)}

.l4-q{font-family:inherit;display:flex;align-items:flex-start;gap:11px;padding:13px 13px;min-height:44px;background:#FAFAF7;border:1px solid rgba(10,10,10,0.08);border-radius:9px;text-align:left;cursor:pointer;transition:border-color 0.15s,background 0.15s;color:#0A0A0A}
.l4-q:hover{border-color:#FF3B2F;background:rgba(255,59,47,0.03)}
.l4-q:focus-visible{outline:2px solid #FF3B2F;outline-offset:2px}






.l4-answer.is-open{display:block}





.l4-f
.l4-radio,
.l4-radio:hover,
.l4-radio input,.l4-check-item input{margin:0;cursor:pointer;accent-color:#B82835}
.l4-radio span,.l4-check-item span{line-height:1.35}


.l4-save{font-family:inherit;font-size:11.5px;font-weight:600;padding:8px 16px;background:#0A0A0A;color:#FAFAF7;border:none;border-radius:7px;cursor:pointer;margin-top:6px;transition:all 0.12s}
.l4-save:hover{background:#B82835;transform:translateY(-1px)}










.l4-response[aria-hidden="false"]{display:block}


.l4-resp-list li{padding-left:14px;position:relative}
.l4-resp-list li:before{content:"·";position:absolute;left:6px;color:#B82835;font-weight:700}



.l4-resp-msg em{color:#0A0A0A;font-style:normal;font-weight:600}
.l4-resp-msg strong{color:#B82835}
@media (max-width: 700px){
  .l4-f
  
}




.l3-gar-spec dt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:0.06em;color:rgba(10,10,10,0.4);text-transform:uppercase;font-weight:600;padding-top:1px}
.l3-gar-spec dd{margin:0;color:#0A0A0A}

.l3-trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;padding:10px;background:rgba(10,10,10,0.03);border-radius:10px;border:1px solid rgba(10,10,10,0.06)}
.l3-ta{padding:6px 8px;background:#FAFAF7;border-radius:6px}
.l3-ta-t{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:0.08em;color:rgba(10,10,10,0.4);text-transform:uppercase;display:block;margin-bottom:2px}
.l3-ta-v{font-size:11px;font-weight:700;color:#0A0A0A;line-height:1.25;display:block}
.l3-red{color:#B82835}




@media (max-width:700px){.ai-cs-box{padding:20px;scroll-margin-top:80px}.l3-usecase-grid,.l3-trust-bar{grid-template-columns:1fr 1fr}}

.ai-cs-hint{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:0.06em;color:rgba(10,10,10,0.45);margin:0;line-height:1.5;display:flex;align-items:center;gap:8px}
/* Lucy v7.1 inline reply + free-text · 2026-09-01 */



.wiz-inline-reply-text strong{font-weight:600;color:#0A0A0A;margin-right:4px}






@keyframes wizReplyFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ai-cs-hint-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;animation:lucyPulse 2s ease-in-out infinite}
@keyframes lucyPulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ============ Lucy v5.5 — Analysis + Contact + Done panels ============ */







.l5-sec-v strong{color:var(--ink);font-weight:700}











.l5-label input,.l5-label textarea{padding:11px 13px;background:var(--paper);border:1px solid var(--line);border-radius:6px;font-family:var(--font-sans);font-size:13px;color:var(--ink);text-transform:none;letter-spacing:normal;font-weight:400;transition:border-color .15s}
.l5-label input:focus,.l5-label textarea:focus{outline:none;border-color:var(--red)}







.l5-done-brief strong{color:var(--ink);font-weight:700}


/* Form fields (radio/checkbox/text) used by both basic + follow-up forms */

.l4-radio,
.l4-radio:hover,
.l4-radio input,.l4-check-item input{margin:2px 0 0;cursor:pointer;accent-color:var(--red)}



.l4-save{width:100%;padding:11px 13px;background:var(--ink);color:var(--paper);border:none;border-radius:6px;font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:background .15s;margin-top:4px}
.l4-save:hover{background:var(--red)}

@media (max-width:700px){
  
  
  
}

/* ============ Lucy v6 · Stage 3 · Chat refinement panel ============ */












.l5-bubble p{margin:0}
.l5-bubble p + p{margin-top:6px}
.l5-bubble ul{margin:6px 0 0;font-size:12px}


.l5-bubble-user p{color:#FAFAF7}










@media (prefers-reduced-motion: reduce){}
@media (max-width:700px){}

/* ============ Lucy Lite · 5 chip Q&A + bubble ============ */




.lq-chip.is-active{border-color:#0A0A0A;background:#FFFFFF;box-shadow:0 2px 8px rgba(10,10,10,0.08)}







.lq-answer[aria-hidden="true"]{display:none}











.lq-bubble-user 

.lq-bubble-user 

.lq-bubble-user 

.lq-bubble-user 

@keyframes fadeSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:700px){
  
  
  
  
  
}

/* ============ Lucy v7 · 5-stage AI workflow (PERSON.TEES 2026-08-31) ============ */
/* 5 chip Q&A → 4-field contact → Plan v1 → Refine (Qwen LLM) → Confirm → 客戶經理 */





.lv7-panel.is-active{display:block}

.lv7-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;
  background:#C8102E;color:#FAFAF7;
  border:1px solid #C8102E;
  border-radius:8px;
  font-size:14px;font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:all 0.18s ease;
  min-height:44px;
}
.lv7-cta:hover{background:#E63946;border-color:#E63946;transform:translateY(-1px);box-shadow:0 4px 10px rgba(200,16,46,0.2)}
.lv7-cta:disabled{background:rgba(10,10,10,0.15);border-color:transparent;color:rgba(250,250,247,0.7);cursor:not-allowed;transform:none;box-shadow:none}
.lv7-cta-ghost{background:transparent;color:rgba(10,10,10,0.78);border:1px solid rgba(10,10,10,0.18)}
.lv7-cta-ghost:hover{background:rgba(10,10,10,0.04);border-color:rgba(10,10,10,0.32);color:#0A0A0A}
.lv7-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}



/* Contact form */



.lv7-field label{font-size:12px;font-weight:600;color:rgba(10,10,10,0.78)}
.lv7-field input,.lv7-field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(10,10,10,0.18);
  border-radius:6px;
  background:#FAFAF7;
  font-family:inherit;
  font-size:14px;color:#0A0A0A;
  transition:border-color 0.18s;
  min-height:44px;
}
.lv7-field input:focus,.lv7-field textarea:focus{
  outline:none;
  border-color:#C8102E;
  box-shadow:0 0 0 3px rgba(200,16,46,0.12);
}
.lv7-field textarea{min-height:80px;resize:vertical}

@media (max-width:640px){}

/* Plan panel */
.lv7-plan{
  padding:22px;
  background:linear-gradient(180deg,#FAFAF7 0%,rgba(10,10,10,0.015) 100%);
  border:1px solid rgba(10,10,10,0.06);
  border-radius:12px;
  margin-bottom:6px;
}
.lv7-plan-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px dashed rgba(10,10,10,0.12);
}
.lv7-plan-icon{
  width:34px;height:34px;
  background:#C8102E;color:#FAFAF7;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  font-family:'Fraunces',Georgia,serif;
}
.lv7-plan-title{flex:1;min-width:0}
.lv7-plan-title-t{font-size:14px;font-weight:700;color:#0A0A0A;line-height:1.3}
.lv7-plan-title-s{font-size:11px;color:rgba(10,10,10,0.6);margin-top:2px;line-height:1.4}
.lv7-plan-version{
  font-size:10px;padding:4px 8px;
  background:rgba(200,16,46,0.08);
  color:#C8102E;
  border-radius:4px;
  font-weight:700;
  letter-spacing:0.06em;
  flex-shrink:0;
}

.lv7-plan-blocks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:640px){.lv7-plan-blocks{grid-template-columns:1fr}}
.lv7-block{
  padding:12px;
  background:#FAFAF7;
  border:1px solid rgba(10,10,10,0.08);
  border-radius:8px;
  transition:all 0.2s ease;
}
.lv7-block.is-highlight{
  border-color:rgba(200,16,46,0.3);
  background:rgba(200,16,46,0.03);
}
.lv7-block.is-highlight .lv7-block-label{color:#C8102E}
.lv7-block-label{
  font-size:10px;font-weight:700;
  color:rgba(10,10,10,0.55);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:5px;
}
.lv7-block-value{
  font-size:13px;font-weight:600;
  color:#0A0A0A;line-height:1.45;
}
.lv7-block-sub{
  font-size:11px;color:rgba(10,10,10,0.55);
  margin-top:4px;line-height:1.5;
}

.lv7-plan-foot{
  margin-top:14px;padding-top:12px;
  border-top:1px dashed rgba(10,10,10,0.12);
  font-size:11px;color:rgba(10,10,10,0.6);
  line-height:1.55;
}
.lv7-plan-foot strong{color:#0A0A0A}

/* Refine stage */
.lv7-refine{
  padding:20px;
  background:#FAFAF7;
  border:1px solid rgba(10,10,10,0.08);
  border-radius:12px;
}
.lv7-refine-title{font-size:14px;font-weight:700;color:#0A0A0A;margin-bottom:3px}
.lv7-refine-sub{font-size:12px;color:rgba(10,10,10,0.6);margin-bottom:14px;line-height:1.5}

.lv7-refine-chips{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:8px;margin-bottom:14px;
}
@media (max-width:640px){.lv7-refine-chips{grid-template-columns:1fr}}
.lv7-refine-chip{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;
  background:#FAFAF7;
  border:1px solid rgba(10,10,10,0.12);
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  text-align:left;
  color:rgba(10,10,10,0.78);
  transition:all 0.18s ease;
  min-height:48px;
}
.lv7-refine-chip:hover{
  border-color:#C8102E;
  background:rgba(200,16,46,0.05);
  color:#C8102E;
}
.lv7-refine-chip-icon{
  flex-shrink:0;
  width:28px;height:28px;
  background:rgba(10,10,10,0.04);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  color:#C8102E;
  border:1px solid rgba(10,10,10,0.08);
}
.lv7-refine-chip:hover .lv7-refine-chip-icon{background:#C8102E;color:#FAFAF7}
.lv7-refine-chip-body{flex:1;min-width:0}
.lv7-refine-chip-t{display:block;font-weight:600;margin-bottom:2px}
.lv7-refine-chip-s{display:block;font-size:10.5px;color:rgba(10,10,10,0.55);line-height:1.4}


.lv7-refine-input{display:flex;gap:8px}
.lv7-refine-input input{
  flex:1;
  padding:10px 12px;
  border:1px solid rgba(10,10,10,0.18);
  border-radius:6px;
  font-family:inherit;
  font-size:13px;color:#0A0A0A;
  min-height:44px;
}
.lv7-refine-input input:focus{
  outline:none;
  border-color:#C8102E;
  box-shadow:0 0 0 3px rgba(200,16,46,0.12);
}

.lv7-loader.is-active{display:flex;align-items:center;justify-content:center;gap:4px}


@keyframes bounce{
  0%,80%,100%{transform:translateY(0);opacity:0.4}
  40%{transform:translateY(-6px);opacity:1}
}



/* Confirm stage */

@media (max-width:700px){
  
  
  
  .lv7-plan-head{flex-wrap:wrap;gap:8px}
  .lv7-cta{padding:11px 16px;font-size:13px}
  
}

/* ============================================================
   LUCY 5-STEP WIZARD · PERSON.TEES cream-paper theme aligned · 2026-08-31
   Replaces dark slate (#0a0f1c) theme with site paper (#FAFAF7) + brand red (#FF3B2F)
   All tokens mirror inline-02.css :root variables for design system consistency
   ============================================================ */
.ai-cs-box.lucy-wiz{
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-top:3px solid var(--red);
  border-radius:18px;
  padding:0;
  color:var(--ink);
  font-family:var(--font-sans);
  overflow:hidden;
  box-shadow:0 16px 40px -22px rgba(10,10,10,.18),0 1px 0 rgba(10,10,10,.04);
}
.wiz-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.wiz-head-left{display:flex;align-items:center;gap:12px}
.wiz-avatar-wrap{position:relative;width:42px;height:42px;flex-shrink:0}
.wiz-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;color:var(--paper);
  font-family:var(--font-display);
}
.wiz-online-dot{
  position:absolute;right:-2px;bottom:-2px;
  width:12px;height:12px;background:var(--red);border:2px solid var(--paper);border-radius:50%;
  box-shadow:0 0 0 1px var(--line-strong);
}
.wiz-name-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.wiz-name{font-weight:700;font-size:15px;color:var(--ink);font-family:var(--font-display)}
.wiz-status-pill{
  font-size:9px;font-weight:700;letter-spacing:.06em;
  background:var(--red-soft);color:var(--red);
  padding:2px 8px;border-radius:99px;border:1px solid rgba(255,59,47,.18);
  font-family:var(--font-mono);
}
.wiz-role{font-size:11px;color:rgba(10,10,10,.55);letter-spacing:.02em}
.wiz-head-right{display:flex;align-items:center;gap:12px}
.wiz-step-counter{font-size:11px;color:rgba(10,10,10,.55);font-weight:600;font-family:var(--font-mono);letter-spacing:.04em}
.wiz-reset-btn{
  background:transparent;border:0;color:rgba(10,10,10,.55);cursor:pointer;padding:6px;
  border-radius:8px;transition:all .15s;
}
.wiz-reset-btn:hover{background:rgba(10,10,10,.06);color:var(--ink)}
.wiz-progress{height:2px;background:var(--line);position:relative;overflow:hidden}
.wiz-progress-fill{
  height:100%;
  background:var(--red);
  width:20%;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

.wiz-body{padding:22px 22px 8px;min-height:380px}
.wiz-step{display:none;animation:fadeIn .3s ease}
.wiz-step.is-active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wiz-bubble{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--paper-warm);
  border:1px solid var(--line);
  padding:14px 16px;border-radius:14px;
  margin-bottom:18px;
}
.wiz-bubble-icon{color:var(--red);flex-shrink:0;margin-top:1px}
.wiz-bubble p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-soft)}

.wiz-cards-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wiz-card-cfo,.wiz-card-cfs{
  position:relative;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:14px;padding:18px;
  text-align:left;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:all .2s;font-family:inherit;
  color:var(--ink);
}
.wiz-card-cfo:hover,.wiz-card-cfs:hover{
  border-color:var(--line-strong);
  background:var(--paper-warm);
  transform:translateY(-1px);
}
.wiz-card-cfo.is-active,.wiz-card-cfs.is-active{
  border-color:var(--ink);
  border-width:2px;
  padding:17px;
  background:var(--paper-warm);
  box-shadow:0 8px 20px -12px rgba(10,10,10,.18);
}
.wiz-card-cfo.is-active::before,.wiz-card-cfs.is-active::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--red);border-radius:14px 14px 0 0;
}
.wiz-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wiz-card-pill{
  font-size:10px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:99px;
  font-family:var(--font-mono);
}
.wiz-card-pill.cfo{background:var(--red-soft);color:var(--red);border:1px solid rgba(255,59,47,.2)}
.wiz-card-pill.cfs{background:var(--paper-warm);color:var(--ink);border:1px solid var(--line-strong)}
.wiz-card-icon.cfo{color:var(--red)}
.wiz-card-icon.cfs{color:var(--ink)}
.wiz-card-title{margin:0 0 6px;font-size:15.5px;font-weight:700;color:var(--ink);font-family:var(--font-display);letter-spacing:-.01em}
.wiz-card-desc{margin:0 0 14px;font-size:12px;color:rgba(10,10,10,.65);line-height:1.55}
.wiz-card-feature{
  background:var(--paper-warm);
  border:1px solid var(--line);
  padding:10px 12px;border-radius:10px;
  margin-bottom:10px;
}
.wiz-card-feature-row{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12px;margin-bottom:3px;color:var(--ink)}
.wiz-card-feature-row.cfo{color:var(--red)}
.wiz-card-feature-row.cfs{color:var(--ink)}
.wiz-card-feature-row svg{color:inherit}
.wiz-card-feature p{margin:0;font-size:11px;color:rgba(10,10,10,.65);line-height:1.4}
.wiz-card-confirm{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--red);margin-top:6px;
}
.wiz-card-feature-icon{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:10px;color:var(--ink)}
.wiz-card-feature-icon.cfo{color:var(--red)}
.wiz-card-feature-icon.cfs{color:var(--ink)}

.wiz-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wiz-chip-card{
  position:relative;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:12px;padding:14px;
  text-align:left;cursor:pointer;
  transition:all .15s;font-family:inherit;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;
}
.wiz-chip-card:hover{border-color:var(--line-strong);background:var(--paper-warm)}
.wiz-chip-card.is-active{
  border-color:var(--ink);
  border-width:2px;padding:13px;
  background:var(--paper-warm);
}
.wiz-chip-name{font-weight:700;font-size:13px;color:var(--ink)}
.wiz-chip-desc{font-size:11px;color:rgba(10,10,10,.6);line-height:1.4}
.wiz-chip-check{position:absolute;top:10px;right:10px;color:var(--red)}

.wiz-timeline-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.wiz-timeline-row{
  width:100%;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:12px;padding:14px 16px;
  text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:all .15s;
}
.wiz-timeline-row:hover{border-color:var(--line-strong);background:var(--paper-warm)}
.wiz-timeline-row.is-active{
  border-color:var(--ink);
  border-width:2px;padding:13px 15px;
  background:var(--paper-warm);
}
.wiz-timeline-title{font-weight:700;font-size:13.5px;margin-bottom:3px;color:var(--ink)}
.wiz-timeline-desc{font-size:11.5px;color:rgba(10,10,10,.6);line-height:1.45}
.wiz-timeline-check{color:var(--red);flex-shrink:0}

.wiz-contact{
  margin-top:18px;
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:14px;padding:18px;
  animation:fadeIn .3s ease;
}
.wiz-contact-head{margin-bottom:14px}
.wiz-contact-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:4px;font-family:var(--font-display)}
.wiz-contact-sub{font-size:11px;color:rgba(10,10,10,.65);line-height:1.45}
.wiz-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.wiz-field-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wiz-field{display:flex;flex-direction:column;gap:5px}
.wiz-field span{font-size:11px;color:var(--ink);font-weight:600}
.wiz-field input{
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:9px;padding:10px 12px;
  font-size:13px;color:var(--ink);
  font-family:inherit;
  transition:border-color .15s;
}
.wiz-field input::placeholder{color:rgba(10,10,10,.4)}
.wiz-field input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--red-soft)}
.wiz-final-cta{
  width:100%;
  background:var(--ink);
  color:var(--paper);font-weight:700;font-size:13.5px;
  border:0;border-radius:10px;padding:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;
  transition:all .2s;
}
.wiz-final-cta:hover{background:var(--red);transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(255,59,47,.4)}
.wiz-final-cta:disabled{opacity:.4;cursor:not-allowed;background:rgba(10,10,10,.5)}

.wiz-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px 18px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.wiz-nav-back{
  background:transparent;border:1px solid var(--line-strong);color:var(--ink);
  font-size:12px;font-weight:600;cursor:pointer;
  padding:8px 14px;border-radius:8px;
  font-family:inherit;
  transition:all .15s;
}
.wiz-nav-back:hover:not(:disabled){background:var(--paper-warm);border-color:var(--ink)}
.wiz-nav-back:disabled{opacity:.3;cursor:not-allowed;border-color:var(--line)}
.wiz-nav-next{
  background:var(--red);color:var(--paper);font-weight:700;font-size:12.5px;
  border:0;border-radius:10px;padding:9px 18px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;
  transition:all .15s;
  box-shadow:0 6px 14px -6px rgba(255,59,47,.4);
}
.wiz-nav-next:hover:not(:disabled){background:#d12819;transform:translateY(-1px)}
.wiz-nav-next:disabled{opacity:.35;cursor:not-allowed;background:rgba(10,10,10,.4);box-shadow:none}

/* Confirm step */
.wiz-confirm{text-align:center;padding:20px 8px 8px}
.wiz-confirm-icon{
  display:inline-flex;width:72px;height:72px;
  background:var(--red-soft);
  border:2px solid var(--red);border-radius:50%;
  align-items:center;justify-content:center;
  color:var(--red);margin-bottom:14px;
}
.wiz-confirm-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;font-family:var(--font-display);letter-spacing:-.01em}
.wiz-confirm-sub{font-size:12.5px;color:rgba(10,10,10,.65);line-height:1.55;margin-bottom:18px;max-width:380px;margin-left:auto;margin-right:auto}
.wiz-confirm-meta{
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:12px;padding:14px;
  margin-bottom:16px;text-align:left;
}
.wiz-confirm-meta-row{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;
  font-size:12px;
  border-bottom:1px solid var(--line);
}
.wiz-confirm-meta-row:last-child{border-bottom:0}
.wiz-confirm-meta-row span{color:rgba(10,10,10,.6);min-width:64px;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.wiz-confirm-meta-row code{
  flex:1;
  font-family:var(--font-mono);
  font-size:11.5px;color:var(--ink);
  background:var(--paper);padding:3px 8px;border-radius:6px;border:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;
}
.wiz-confirm-cta{
  background:var(--paper);border:1px solid var(--line-strong);
  color:var(--ink);font-size:12px;font-weight:600;
  padding:9px 20px;border-radius:10px;cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
.wiz-confirm-cta:hover{border-color:var(--ink);background:var(--paper-warm)}

@media (max-width:700px){
  .wiz-cards-2{grid-template-columns:1fr}
  .wiz-grid-4{grid-template-columns:repeat(2,1fr)}
  .wiz-field-2{grid-template-columns:1fr}
  .wiz-body{padding:18px 18px 6px}
  .wiz-header{padding:14px 18px}
  .wiz-footer{padding:12px 18px 14px}
}

/* ===== Lucy Chat Box (v2 · 客戶案例 pattern · 2026-09-06) ===== */
.lucy-chat-section .section-eyebrow,
.lucy-chat-section .section-h2 {
  color: #fff;
}
.lucy-chat-section 

}

/* ============ Hero LLM Refresh Button (Persona Hero 2026-09-07) ============ */
.hero-llm-refresh svg{flex-shrink:0}
@keyframes hero-llm-spin{
  to{transform:rotate(360deg)}
}
[data-source="llm"] #heroEyebrow,
[data-source="llm"] #heroH1,
[data-source="llm"] #heroLede{
  transition:opacity .25s;
}
/* =========================== AI AUTOMATION PLATFORM HIGHLIGHT =========================== */
.ai-platform-h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ai-platform .btn-primary {
  background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
  border: none;
  color: white;
}
.ai-platform .btn-primary:hover {
  box-shadow: 0 0 30px rgba(129, 140, 248, 0.4);
}
.ai-platform .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ink);
}
.ai-platform .btn-ghost:hover {
  border-color: rgba(129, 140, 248, 0.6);
  background: rgba(129, 140, 248, 0.05);
}

/* Mobile */
@media (max-width: 900px) {
  
  
  
}
@media (max-width: 600px) {
  
  
  
  
  .ai-platform-cta-row .btn { width: 100%; }
}
/* =========================== AI CHAT ANCHOR HIGHLIGHT =========================== */
#ai-chat {
  scroll-margin-top: 24px;
}
.ai-chat-box:target,
@keyframes chat-focus-pulse {
  0% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.6); }
  50% { transform: scale(1.01); box-shadow: 0 0 0 12px rgba(129, 140, 248, 0.15); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
}
/* =========================== PACKAGING + QR LABELS =========================== */
.packaging-qr-h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #67e8f9 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pq-feature-text strong {
  font-weight: 600;
  color: white;
}
.packaging-qr .btn-primary {
  background: #67e8f9;
  color: #0a0e1a;
  border: none;
  font-weight: 700;
}
.packaging-qr .btn-primary:hover {
  background: #a5f3fc;
  box-shadow: 0 0 24px rgba(103, 232, 249, 0.4);
}
.packaging-qr .btn-ghost {
  background: transparent;
  border: 1px solid #67e8f9;
  color: #67e8f9;
}
.packaging-qr .btn-ghost:hover {
  background: rgba(103, 232, 249, 0.08);
}

/* Mobile */
@media (max-width: 900px) {
  
  
  
  .packaging-qr-cta-row .btn { width: 100%; }
}
/* =========================== NEW HERO (團體衫互動預覽) =========================== */



/* LEFT COLUMN */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  background: rgba(34, 211, 238, 0.05);
  border-radius: 999px;
  font-size: 13px;
  color: #67e8f9;
  margin-bottom: 28px;
  font-weight: 500;
}
.hero-new-cta-row .btn-primary {
  background: #67e8f9;
  color: #0a0e1a;
  border: none;
  font-weight: 700;
}
.hero-new-cta-row .btn-primary:hover {
  background: #a5f3fc;
  box-shadow: 0 0 30px rgba(103, 232, 249, 0.3);
}
.hero-new-cta-row .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}
.hero-new-cta-row .btn-secondary:hover {
  border-color: rgba(103, 232, 249, 0.4);
  background: rgba(103, 232, 249, 0.05);
}
.btn-primary:hover 
.hero-new-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #cbd5e1;
}
/* RIGHT COLUMN: Preview Card */
/* Feature tabs */
/* Panels */
@keyframes heroPanelFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* DESIGN MOCKUP */
.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}




/* COLLECT PANEL */
.hero-collect-num strong {
  font-size: 24px;
  font-weight: 700;
  color: #67e8f9;
}
.hero-collect-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
}
.hero-collect-list li:first-child {
  border-top: none;
  padding-top: 0;
}
.hero-collect-name em {
  margin-left: 8px;
  color: #64748b;
  font-style: normal;
}
/* PACK PANEL */
.hero-pack-qr p {
  font-size: 8px;
  color: #64748b;
  margin: 4px 0 0;
}
/* Mobile */
@media (max-width: 1024px) {
  
}
@media (max-width: 700px) {
  
.hero-new-cta-row .btn { width: 100%; }
  
}
/* =========================== FULL HOMEPAGE TIDY =========================== */

/* Hero sub AI tag (Fix 2) */
/* LLM Promise banner (Fix 5) */
.llm-banner-text strong {
  color: white;
  font-size: 16px;
  font-weight: 700;
}
.llm-banner-text span {
  color: #94a3b8;
  font-size: 13px;
}
@media (max-width: 700px) {
  
  
  
}

/* Specs section Lucy CTA (later fix) */
/* Specs section Lucy CTA */
.specs-lucy-text strong {
  display: block;
  color: white;
  font-size: 15px;
  margin-bottom: 4px;
}
.specs-lucy-text span {
  color: #94a3b8;
  font-size: 13px;
}
@media (max-width: 700px) {
  
  
}
/* Unify Capabilities section to dark gradient */
.section[style*="padding-top:48px"] {
  background: linear-gradient(180deg,#0a0e1a 0%,#11162a 100%);
}

/* =========================== AI CS · 2026 TECH ENHANCEMENTS =========================== */
/* Mesh gradient background (cutting-edge 2026 style) */
@keyframes ai-cs-mesh-shift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, -2%) rotate(1deg); }
  66% { transform: translate(-2%, 2%) rotate(-1deg); }
}

/* Flow strip - 5 stages showing Lucy handles full journey */
/* Live strip - "Lucy 現在同時幫 X 位客戶" */
.ai-cs-live-strip strong {
  color: #67e8f9;
  font-weight: 700;
  font-size: 13px;
}

@keyframes ai-cs-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Active persona tab - enhanced glow */
.persona-tab.is-active {
  position: relative;
}

.persona-tab.is-active::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: linear-gradient(135deg, #67e8f9, #818cf8);
  z-index: -1;
  opacity: 0.4;
  filter: blur(8px);
  animation: persona-glow-pulse 2s ease-in-out infinite;
}

@keyframes persona-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Typing indicator in chat (LLM streaming) */
@keyframes ai-chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Mobile responsive for flow strip */
@media (max-width: 768px) {
}

/* Pain point label inside flow stage */
/* Tagline below flow strip */
.ai-cs-flow-tagline strong {
  color: #67e8f9;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* Mobile: stack stages vertically with pain labels visible */
@media (max-width: 768px) {
}

/* ============================================
   DIRECTION E EFFECTS · 2026 STACK
   ============================================ */

/* EFFECT 1: Animated Mesh Gradient Background */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  animation: mesh-float 25s ease-in-out infinite;
}
.mesh-blob.b1 { width: 500px; height: 500px; background: var(--cyan); top: -200px; left: -100px; }
.mesh-blob.b2 { width: 600px; height: 600px; background: var(--purple); top: 40%; right: -200px; animation-delay: -8s; }
.mesh-blob.b3 { width: 450px; height: 450px; background: var(--pink); bottom: -150px; left: 25%; animation-delay: -16s; }
@keyframes mesh-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(120px,-60px) scale(1.2); }
  66%      { transform: translate(-60px,120px) scale(0.85); }
}

/* EFFECT 2: Animated Gradient Text */
.gradient-text {
  background: var(--gradient);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* EFFECT 3: Shimmer Sweep Button */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.btn-shimmer:hover::before {
  left: 100%;
}

/* EFFECT 4: Bento Grid */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.bento-cell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-med) var(--ease);
}
.bento-cell.large { grid-column: span 2; grid-row: span 2; }
.bento-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.bento-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient);
  opacity: 0;
  transition: opacity var(--dur-med);
  z-index: -1;
  border-radius: var(--r-lg);
  pointer-events: none;
}
.bento-cell:hover::after { opacity: 0.04; }
.bento-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--gradient-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: var(--s-4);
}
.bento-cell h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.bento-cell p  { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 768px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell.large { grid-column: span 1; grid-row: span 1; }
}

/* EFFECT 5: Live Chat with Typing Indicator */
.chat-demo {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.chat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.chat-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.chat-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #10b981;
}
.chat-status::before {
  content: '\25CF';
  margin-right: 4px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.chat-msg {
  display: flex;
  gap: 8px;
  margin-bottom: var(--s-3);
  opacity: 0;
}
.chat-msg.is-visible {
  animation: fadeInUp 0.5s var(--ease) forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 80%;
}
.chat-bubble.user {
  background: var(--ink);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.chat-bubble.bot {
  background: var(--paper-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.typing-dots {
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: typing 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* EFFECT 6: 3D Tilt Card */
.tilt-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform 0.1s;
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: pointer;
  position: relative;
}
.tilt-content {
  transform: translateZ(40px);
}
.tilt-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.4), transparent 60%);
  border-radius: var(--r-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.tilt-card:hover .tilt-glare { opacity: 1; }

/* Eyebrow (unified) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: var(--s-4);
  font-weight: 600;
}

/* Pill / Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

/* Footer */
.footer-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Nav glass */
nav.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
}

/* Unified Section padding */
@media (max-width: 768px) {
  
}

/* ============================================
   GLOBAL SECTION SYSTEM (v2)
   Used across all 96 pages — replaces ad-hoc classes
   ============================================ */

/* === Section structure === */
.section {
  padding: var(--s-section) var(--s-6);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.section
.section.full { max-width: none; padding-left: var(--s-6); padding-right: var(--s-6); }
.section

@media (max-width: 768px) {
  .section { padding: 64px 16px; }
}

/* === Section header === */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: var(--s-4);
  font-weight: 600;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--gradient);
  margin-right: 8px;
  vertical-align: middle;
}
.section-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.section-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.section-lede {
  font-size: var(--fs-body-lg);
  color: var(--ink-2);
  max-width: 640px;
  line-height: 1.6;
  margin-bottom: var(--s-7);
}

/* === Card system === */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: all var(--dur-med) var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card
.card

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--dur-med) var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-sm { padding: 12px 16px; font-size: 13px; min-height: 44px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

.btn-primary {
  background: var(--ink);
  color: white;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-primary.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.btn-primary.btn-shimmer:hover::before {
  left: 100%;
}

.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* === Pills / Tags === */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.tag-dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.tag-purple::before { background: var(--purple); }
.tag-pink::before { background: var(--pink); }

/* === Grid === */
.grid {
  display: grid;
  gap: var(--s-5);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* === Icon === */
.icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--gradient-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  color: var(--ink);
}
.icon svg { width: 24px; height: 24px; display: block; }
.icon-lg svg { width: 32px; height: 32px; }
.icon-sm { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
.icon-lg { width: 64px; height: 64px; font-size: 28px; border-radius: var(--r-md); }

/* === Body text === */
.text-body { font-size: var(--fs-body); color: var(--ink); line-height: 1.6; }
.text-body-sm { font-size: var(--fs-body-sm); color: var(--ink-2); line-height: 1.5; }
.text-mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.05em; }

/* === Background variants === */




/* === Utility === */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mb-4 { margin-bottom: var(--s-4); }

.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }









/* ============================================
   HOMEPAGE-SPECIFIC STYLES
   ============================================ */

/* Section variant */
.section-alt {
  background: var(--paper-2);
}

/* === NAV === */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.nav-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.logo-text {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
}
.logo-accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-top: 2px;
  font-weight: 600;
}
.nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: all var(--dur-fast) var(--ease);
}
.nav-link:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* === HERO === */
.hero {
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
}
.hero-pill {
  font-size: 13px;
  padding: 8px 16px;
  margin-bottom: 24px;
  justify-self: start;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 24px;
}
.hero-lede {
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.4;
}
.hero-body {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 480px;
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
/* === Hero secondary CTA (Sign Up Free) — 2026-09-19 === */
.hero-cta-secondary{background:var(--pt-blue,#1856FF)!important;color:var(--pt-paper,#FAFAF7)!important;border:1px solid var(--pt-blue,#1856FF)!important}
.hero-cta-secondary:hover{background:var(--pt-blue-dark,#0e3fa0)!important;border-color:var(--pt-blue-dark,#0e3fa0)!important;transform:translateY(-2px)!important;box-shadow:0 6px 16px rgba(24,86,255,.3)!important}
.hero-cta-secondary:focus-visible{outline:2px solid var(--pt-blue,#1856FF);outline-offset:3px}
.hero-checks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  padding: 0;
}
.check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gradient);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-trust {
  font-size: 13px;
  color: var(--ink-3);
  padding: 12px 16px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

/* Hero mockup */
.hero-mockup {
  background: #1a1a2e;
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  color: white;
  position: relative;
  overflow: hidden;
  max-width: 400px;
  margin-left: auto;
}
.mockup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mockup-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mockup-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-pill);
}
.mockup-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.mockup-tab.is-active {
  background: var(--gradient);
  color: white;
}
.mockup-body {
  padding: 16px 0;
}
.mockup-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 12px;
}
.mockup-preview {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  padding: 32px;
  text-align: center;
  margin-bottom: 12px;
}
.mockup-preview-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.05em;
  color: white;
  margin-bottom: 12px;
}
.mockup-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.dot.is-active {
  background: var(--cyan);
  width: 24px;
  border-radius: 3px;
}
.mockup-help {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin-bottom: 8px;
}
.mockup-tagline {
  font-size: 12px;
  color: var(--cyan);
  font-weight: 600;
}
.mockup-disclaimer {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-top: 12px;
  text-align: center;
}
.tag-sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* === PAIN-POINT STRIP === */
.pain-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 48px 0 24px;
  align-items: center;
}
@media (max-width: 768px) {
  .pain-strip { grid-template-columns: 1fr; }
  .pain-arrow { transform: rotate(90deg); }
}
.pain-stage {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  transition: all var(--dur-med);
}
.pain-stage:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--cyan);
}
.pain-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  font-weight: 600;
  margin-bottom: 4px;
}
.pain-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.pain-point {
  font-size: 12px;
  color: var(--purple);
  font-style: italic;
  font-weight: 500;
}
.pain-arrow {
  font-size: 20px;
  color: var(--ink-3);
  text-align: center;
}

/* 2026-09-12: compact pain-strip (3 cards instead of 5) */
.pain-strip-compact {
  grid-template-columns: repeat(3, 1fr);
  margin: 32px 0 24px;
}
.pain-strip-compact .pain-stage {
  padding: 14px 12px;
}
.pain-tagline {
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 48px;
}
.pain-tagline strong {
  color: var(--ink);
  font-weight: 700;
}
.pain-tagline span {
  color: var(--purple);
  font-weight: 600;
}

/* === PERSONA TABS === */
.persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  justify-content: center;
}
.persona-tab {
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: all var(--dur-fast);
}
.persona-tab:hover {
  border-color: var(--purple);
}
.persona-tab.is-active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

/* Flow cards */
.flow-cards {
  margin-bottom: 48px;
}
.flow-card {
  text-align: left;
}
.flow-card .btn {
  margin-top: 16px;
}

/* Divider */
.divider-text {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  position: relative;
  margin: 32px 0 24px;
}
.divider-text::before,
.divider-text::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--line);
}
.divider-text::before { left: 0; }
.divider-text::after { right: 0; }

/* === CHAT DEMO === */
.chat-demo {
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  position: relative;
  overflow: visible;
}ign: left;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.chat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.chat-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.chat-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #10b981;
}
.chat-live {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  max-height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.chat-msg {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg.is-visible {
  animation: fadeInUp 0.5s var(--ease) forwards;
}
.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 85%;
}
.chat-bubble.user {
  background: var(--ink);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.chat-bubble.bot {
  background: var(--paper-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.chip {
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
  padding: 12px 14px;
  min-height: 44px;
  transition: all var(--dur-fast);
}
.chip:hover {
  border-color: var(--cyan);
  background: var(--cyan-soft);
}
.chat-input-row {
  display: flex;
  gap: 8px;
}
.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--paper);
  outline: none;
}
.chat-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}

/* === Platform step === */
.platform-step .step-num {
  margin: 12px 0 8px;
  color: var(--purple);
}
.platform-step {
  text-align: left;
}

/* === Craft card === */
.craft-card .craft-num {
  color: var(--cyan);
  margin-bottom: 8px;
}

/* === Case card === */
.case-card {
  text-align: left;
}
.case-stat {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.case-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.case-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.case-author {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 12px;
  font-style: italic;
}

/* === CTA Final (Option C: full-bleed section + inner card) === */
.cta-final {
  text-align: center;
  max-width: 1440px;          /* match other sections */
  margin: 0 auto;
  padding: 96px 32px;
}
.cta-final .cta-final-social-proof {
  /* promoted to full card aesthetic (was inner) */
  background: linear-gradient(135deg, #f7f4ff 0%, #fff0f6 50%, #fff8e8 100%);
  border: 1px solid rgba(125, 42, 232, 0.15);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.04), 0 8px 24px rgba(125, 42, 232, 0.06);
}
.cta-final-inner {
  max-width: 640px;           /* slight widen (was 600) */
  margin: 0 auto;
  padding: 48px 32px;
  background: linear-gradient(135deg, #f7f4ff 0%, #fff0f6 50%, #fff8e8 100%);
  border: 1px solid rgba(125, 42, 232, 0.15);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.04), 0 8px 24px rgba(125, 42, 232, 0.06);
}

/* === FOOTER === */
.footer {
  background: var(--paper-2);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding: 64px 32px 32px;
  margin-top: 64px;
}
.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.3fr 1.3fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .footer-grid > .footer-col:nth-child(5) { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid > .footer-col:nth-child(5) { grid-column: auto; max-width: none; }
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}
.footer-link,
.footer-col a {
  font-size: 13px;
  color: var(--ink-2) !important;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.footer-link:hover,
.footer-col a:hover {
  color: var(--purple);
}
.footer-logo {
  margin-bottom: 4px;
}
.footer-logo .logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.footer-logo .logo-accent {
  color: var(--red);
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.footer-social-link:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.footer-social-link svg {
  display: block;
}
.footer-address {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  font-family: var(--font-sans);
}
.footer-newsletter-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 4px;
}
.footer-newsletter {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.footer-newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: none;
  transition: border-color var(--dur-fast);
}
.footer-newsletter-input:focus {
  border-color: var(--ink);
}
.footer-newsletter-input::placeholder {
  color: var(--ink-3);
}
.footer-newsletter-btn {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--dur-fast);
  white-space: nowrap;
  min-height: 44px;
}
.footer-newsletter-btn:hover {
  background: var(--red);
}
.footer-newsletter-fineprint {
  font-size: 10px;
  color: var(--ink-3);
  margin: 6px 0 0;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.footer-bottom {
  max-width: 1280px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .footer-tag {
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  text-align: left;
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.footer-meta .footer-link {
  color: var(--ink-2);
}
.footer-meta .footer-link:hover {
  color: var(--purple);
}
.footer p,
.footer-col p {
  color: var(--ink-2);
}
.footer-col .text-body-sm {
  color: var(--ink-2);
  line-height: 1.6;
}

/* ========================================================
   Lucy Chat — Copy/Share/Feedback Actions
   ======================================================== */
.chat-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-wrap: wrap;
}

.chat-msg:hover .chat-actions,
.chat-msg:focus-within .chat-actions {
  opacity: 1;
}

.chat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--ink-2, #4a4a5e);
  background: var(--paper-2, #f5f5f7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.chat-action-btn:hover {
  background: var(--paper, #ffffff);
  border-color: var(--cyan, #00C4CC);
  color: var(--cyan, #00C4CC);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 196, 204, 0.18);
}

.chat-action-btn:active {
  transform: translateY(0);
}

.chat-action-btn svg {
  flex-shrink: 0;
}

.chat-action-btn.chat-action-feedback {
  padding: 4px 6px;
}

.chat-action-btn.chat-action-feedback span {
  display: none;
}

.chat-action-done {
  background: var(--cyan, #00C4CC) !important;
  color: #fff !important;
  border-color: var(--cyan, #00C4CC) !important;
}

.chat-action-done:hover {
  background: var(--cyan, #00C4CC) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* On mobile: keep actions always visible (no hover) */
@media (max-width: 768px) {
  .chat-actions {
    opacity: 1;
  }
  .chat-action-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Auto-hide good/bad after pick */
.chat-action-btn[style*="display: none"] {
  display: none !important;
}

/* ========================================================
   Mobile Nav — Hamburger + Drawer (max-width: 960px)
   ======================================================== */

/* Hamburger button — desktop hidden, mobile visible */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  padding: 12px 10px;
  z-index: 60;
  margin-left: 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-toggle:hover {
  background: var(--paper-2);
}
.nav-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* === Drawer UI/UX Refined v2 (2026-09-19) === */

/* Drawer base — full-screen overlay with side panel slide-in */
.nav-drawar {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.nav-drawar.open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

/* Backdrop — full-bleed dim with blur */
.nav-drawar .drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 30, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-drawar.open .drawer-backdrop {
  opacity: 1;
}

/* Panel — right-side slide-in, max 360px width */
.nav-drawar .drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  background: linear-gradient(180deg, #FAFAF7 0%, #F5F1EA 100%);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18), -2px 0 8px rgba(0, 0, 0, 0.08);
}
.nav-drawar.open .drawer-panel {
  transform: translateX(0);
}

/* Header — logo + close button */
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.drawer-header .brand {
  text-decoration: none;
  color: var(--ink, #1a1f3a);
  font-weight: 700;
}
.drawer-header .brand .logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
}
.drawer-header .brand .logo-accent {
  color: var(--red, #EA2143);
  font-weight: 700;
  margin: 0 1px;
}

/* Close button — bigger, clearer, with hover state */
.drawer-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(26, 26, 58, 0.06);
  color: var(--ink, #1a1f3a);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
  padding: 0;
}
.drawer-close:hover {
  background: rgba(26, 26, 58, 0.92);
  color: #FAFAF7;
  transform: rotate(90deg);
}
.drawer-close:active {
  transform: rotate(90deg) scale(0.92);
}

/* Scroll container — middle section */
.drawer-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.drawer-scroll::-webkit-scrollbar { width: 6px; }
.drawer-scroll::-webkit-scrollbar-track { background: transparent; }
.drawer-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* Section — grouping with subtle top border */
.drawer-section {
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.drawer-section:first-child {
  border-top: none;
  padding-top: 8px;
}

/* Section title — clear hierarchy */
.drawer-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-2, #3a344e);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px 8px;
}
.drawer-section-badge {
  display: inline-flex;
  align-items: center;
  background: var(--pt-blue, #1856FF);
  color: #FAFAF7;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
}

/* Drawer link list */
.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Individual drawer link — touch-friendly */
.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 20px;
  color: var(--ink, #1a1f3a);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background .15s ease, padding-left .2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.drawer-link:last-child {
  border-bottom: none;
}
.drawer-link:hover,
.drawer-link:active {
  background: rgba(24, 86, 255, 0.06);
  padding-left: 26px;
}
.drawer-link:active {
  background: rgba(24, 86, 255, 0.12);
}
.drawer-link-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.drawer-link-text {
  flex: 1;
  min-width: 0;
}
.drawer-link-arrow {
  color: var(--ink-3, #4a4a4a);
  font-size: 16px;
  font-weight: 400;
  transition: transform .2s ease, color .15s ease;
}
.drawer-link:hover .drawer-link-arrow {
  transform: translateX(4px);
  color: var(--pt-blue, #1856FF);
}

/* Featured link (highlighted) */
.drawer-link-feature {
  background: linear-gradient(90deg, rgba(24, 86, 255, 0.08) 0%, rgba(24, 86, 255, 0.02) 100%);
  border-left: 3px solid var(--pt-blue, #1856FF);
  font-weight: 600;
  color: var(--pt-blue-dark, #0e3fa0);
}

/* Action buttons (Log In + Sign Up) */
.drawer-section-actions {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-action {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.drawer-action-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.drawer-action-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.drawer-action-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.drawer-action-meta {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.75;
}
.drawer-action-secondary {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ink, #1a1f3a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.drawer-action-secondary:hover {
  border-color: var(--pt-blue, #1856FF);
  background: rgba(24, 86, 255, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(24, 86, 255, 0.12);
}
.drawer-action-primary {
  background: linear-gradient(135deg, var(--pt-blue, #1856FF) 0%, var(--pt-blue-dark, #0e3fa0) 100%);
  color: #FAFAF7;
  border-color: var(--pt-blue-dark, #0e3fa0);
  box-shadow: 0 4px 14px rgba(24, 86, 255, 0.28);
}
.drawer-action-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 86, 255, 0.36);
}
.drawer-action-primary:active {
  transform: translateY(0);
}

/* CTA buttons (SUBMIT BRIEF + 同 Lucy 傾下) */
.drawer-section-cta {
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.drawer-cta-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.drawer-cta-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.drawer-cta-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.drawer-cta-meta {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.8;
}
.drawer-cta-primary {
  background: var(--ink, #1a1f3a);
  color: #FAFAF7;
  border-color: var(--ink, #1a1f3a);
  box-shadow: 0 4px 14px rgba(26, 26, 58, 0.32);
}
.drawer-cta-primary:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.drawer-cta-ghost {
  background: transparent;
  color: var(--ink, #1a1f3a);
  border-color: rgba(0, 0, 0, 0.18);
}
.drawer-cta-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--ink, #1a1f3a);
}

/* Footer */
.drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 11px;
  color: var(--ink-3, #4a4a4a);
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  line-height: 1.6;
}
.drawer-footer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-footer-icon {
  font-size: 13px;
}
.drawer-footer-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* Legacy class compatibility — keep CSS bridge so old markup doesn't break */
.drawer-backdrop { z-index: 80; }


.drawer-auth-group, .drawer-group { display: none; } /* hide legacy — superseded by drawer-section */

/* === Legacy v1 drawer pattern (inner pages like /solutions/*, /products/*) === */
/* Used by ~93 pages with markup <aside class="nav-drawer" hidden> + <ul class="drawer-links"><li>... */
/* Make legacy markup inherit refined visuals: */
/* - When .is-open is added, slide in from right (matches v2 experience) */
/* - When NOT .is-open, hide completely (hidden attribute) */
.nav-drawer[hidden],
.nav-drawer:not(.is-open):not(.open):not(.is-revealed) {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.nav-drawer.is-open,
.nav-drawer.open {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, #FAFAF7 0%, #F5F1EA 100%);
  z-index: 1000 !important;
  padding: 18px 20px;
  overflow-y: auto;
  transform: translateX(0) !important;
  animation: drawerSlideInLegacy .35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawerSlideInLegacy {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* Inner-page drawer panel: simple full-screen takeover (not side panel — these pages have minimal nav) */
.nav-drawer.is-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 30, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: -1;
  pointer-events: none;
}
/* Legacy drawer close button */
.nav-drawer .drawer-close,
.nav-drawer [data-drawer-close] {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: rgba(26, 26, 58, 0.06) !important;
  color: var(--ink, #1a1f3a) !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  transition: background .2s ease, transform .15s ease !important;
}
.nav-drawer .drawer-close:hover,
.nav-drawer [data-drawer-close]:hover {
  background: rgba(26, 26, 58, 0.92) !important;
  color: #FAFAF7 !important;
  transform: rotate(90deg) !important;
}
/* Legacy drawer links list */
.nav-drawer .drawer-links,
.nav-drawer ul.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 64px 0 32px;
  padding: 0;
  list-style: none;
}
.nav-drawer .drawer-links li,
.nav-drawer ul.drawer-links li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-drawer .drawer-links li a,
.nav-drawer ul.drawer-links li a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 20px;
  color: var(--ink, #1a1f3a);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background .15s ease, padding-left .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-drawer .drawer-links li a:hover,
.nav-drawer ul.drawer-links li a:hover {
  background: rgba(24, 86, 255, 0.06);
  padding-left: 26px;
}
/* Legacy drawer CTA */
.nav-drawer .drawer-cta,
.nav-drawer a.drawer-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 58px !important;
  padding: 16px 24px !important;
  margin: 16px 20px 0 !important;
  background: var(--ink, #1a1f3a) !important;
  color: #FAFAF7 !important;
  border-radius: 12px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease !important;
  box-shadow: 0 4px 14px rgba(26, 26, 58, 0.32) !important;
  width: calc(100% - 40px) !important;
}
.nav-drawer .drawer-cta:hover,
.nav-drawer a.drawer-cta:hover {
  background: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
/* Legacy drawer link SVG icon size */
.nav-drawer .drawer-links li a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Hide Lucy when drawer open on inner pages too */
body.drawer-open .lucy-floating-widget,
body.drawer-open [class*="lucy"] {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) !important;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease !important;
  pointer-events: none !important;
}

/* Hide Lucy widget when drawer is open */
body.drawer-open .lucy-floating-widget,
body.drawer-open [class*="lucy"] {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) !important;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease !important;
  pointer-events: none !important;
}

/* Body lock when drawer open */
body.drawer-open {
  overflow: hidden;
  touch-action: none;
}

/* Drawer z-index above Lucy (legacy rule retained) */
.nav-drawer.is-open,
.nav-drawer.open,
.nav-drawar.open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile breakpoint — hide nav-links, show hamburger */
@media (max-width: 960px) {
  .nav {
    padding: 12px 16px;
  }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ========================================================
   Hero v2 — Brand Identity First
   ======================================================== */
.hero-pill-brand {
  background: linear-gradient(90deg, var(--paper), var(--paper-2)) !important;
  border: 1.5px solid var(--cyan) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  padding: 10px 18px !important;
  box-shadow: 0 2px 12px rgba(0, 196, 204, 0.12);
}
.hero-pill-brand strong {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.05em;
}

.hero-h1-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-brand-mark .logo-accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-stat-label {
  font-size: 12px;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}

.hero-lede strong {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede-accent {
  color: var(--ink-2);
  font-weight: 500;
}

.hero-pillar:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 196, 204, 0.18);
}
.hero-pillar-icon {
  font-size: 28px;
  margin-bottom: 6px;
}
.hero-pillar-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.hero-pillar-desc {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
}

.hero-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.hero-credential-tag {
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  
}

/* ==========================================================
   Hero v4 — Canva-Inspired
   Simplicity · Creativity · Guidance
   ========================================================== */

/* Background blobs (Canva-style atmosphere) */
@keyframes hero-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
}

/* Brand pill - Canva style */
.hero-pill-canva {
  background: rgba(26, 26, 46, 0.08) !important;
  border: 1px solid rgba(26, 26, 46, 0.18) !important;
  color: #1a1a2e !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 20px !important;
  margin-bottom: 32px;
  font-size: 13px !important;
}
.hero-pill-canva strong {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #1a1a2e;
}

/* H1 - Canva inspired big question */
.hero-h1-canva {
  font-family: 'Space Grotesk', 'Noto Sans HK', sans-serif;
  font-size: clamp(44px, 7vw, 76px) !important;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #1a1a2e;
  margin: 14px 0 14px;
  max-width: 900px;
  text-align: center;
}
.hero-h1-canva .gradient-text {
  background: linear-gradient(90deg, #0098A0 0%, #6B1FC8 50%, #E84A82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.9))
          drop-shadow(0 1px 2px rgba(255, 255, 255, 1));
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.95),
               0 1px 3px rgba(255, 255, 255, 1);
  /* Dark backdrop behind text for guaranteed contrast */
  position: relative;
}
.hero-h1-canva .gradient-text::before {
  content: '';
  position: absolute;
  inset: -8px -16px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(18px);
  z-index: -1;
  border-radius: 12px;
}

/* Subhead */
.hero-lede-canva {
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a2e;
  max-width: 540px;
  margin: 0 0 40px;
}

/* ONE Primary CTA - Canva pill style */
.hero-cta-canva {
  display: inline-block;
  padding: 18px 36px;
  background: linear-gradient(90deg, #00C4CC 0%, #7D2AE8 50%, #FF6B9D 100%);
  color: #fff;
  font-family: 'Space Grotesk', 'Noto Sans HK', sans-serif;
  font-size: 17px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 40px rgba(125, 42, 232, 0.35),
              0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.hero-cta-canva::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1a1a2e, #2a2a4e);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.hero-cta-canva:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 48px rgba(125, 42, 232, 0.45),
              0 8px 24px rgba(0, 0, 0, 0.15);
  color: #fff;
}
.hero-cta-canva:hover::before {
  opacity: 1;
}

/* Secondary link */
.hero-link-secondary {
  display: inline-block;
  color: #6B1FC8;
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 31, 200, 0.4);
  margin-bottom: 48px;
  transition: all 0.2s;
}
.hero-link-secondary:hover {
  color: #E84A82;
  border-bottom-color: #E84A82;
}

/* Trust line - 3 keywords only */
.hero-trust-canva {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #1a1a2e;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 26, 46, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: 999px;
  margin: 0;
  display: inline-block;
}

/* Scroll indicator - Canva-style */
.hero-scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(26, 26, 46, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(26, 26, 46, 0.15);
  border-radius: 999px;
  color: #1a1a2e;
  font-size: 12px;
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  animation: scroll-bounce 2.4s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

/* Mobile responsive */
@media (max-width: 768px) {
  
.hero-h1-canva {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
  .hero-cta-canva {
    padding: 16px 32px;
    font-size: 16px;
    width: 100%;
    max-width: 320px;
  }
  .hero-lede-canva {
    font-size: 15px;
  }
}

/* ==========================================================
   Hero v5 — Canva Real Reference
   Floating icons + use case sub + smaller blobs
   ========================================================== */

.hero-canva-v5,
.hero-v7.hero-canva-v5 {
  position: relative;
  min-height: 720px !important;
  padding: 100px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #f7f4ff 35%,
    #fff0f6 70%,
    #fff8e8 100%) !important;
  color: #1a1a2e !important;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 900px) {
  .hero-canva-v5,
  .hero-v7.hero-canva-v5 {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    min-height: 600px !important;
    padding: 90px 64px 80px;
    gap: 32px;
  }
  .hero-canva-v5 .hero-inner,
  .hero-v7.hero-canva-v5 .hero-inner {
    max-width: 560px;
    flex: 1 1 auto;
  }
}

/* Smaller blobs (atmospheric, not dominant) — Canva ref */
.hero-canva-v5 .hero-bg,
.hero-v7.hero-canva-v5 .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-canva-v5 .hero-blob,
.hero-v7.hero-canva-v5 .hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
}
.hero-canva-v5 .hero-blob-1,
.hero-v7.hero-canva-v5 .hero-blob-1 {
  top: -10%;
  left: 15%;
  width: 380px;
  height: 380px;
  background: #00C4CC;
}
.hero-canva-v5 .hero-blob-2,
.hero-v7.hero-canva-v5 .hero-blob-2 {
  top: 30%;
  right: 10%;
  width: 320px;
  height: 320px;
  background: #7D2AE8;
}
.hero-canva-v5 .hero-blob-3,
.hero-v7.hero-canva-v5 .hero-blob-3 {
  bottom: -10%;
  left: 40%;
  width: 360px;
  height: 360px;
  background: #FF6B9D;
} 

/* Floating icons - Canva signature */
.hero-floating-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.floating-icon {
  position: absolute;
  font-size: 36px;
  background: rgba(26, 26, 46, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(26, 26, 46, 0.12);
  border-radius: 16px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float-icon 6s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.12);
}
@keyframes float-icon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}

.fi-1 { top: 18%; left: 8%; animation-delay: 0s; }
.fi-2 { top: 22%; right: 10%; animation-delay: -1s; font-size: 32px; }
.fi-3 { top: 45%; left: 5%; animation-delay: -2s; }
.fi-4 { top: 50%; right: 7%; animation-delay: -3s; }
.fi-5 { bottom: 28%; left: 12%; animation-delay: -4s; font-size: 30px; }
.fi-6 { bottom: 32%; right: 12%; animation-delay: -5s; font-size: 34px; }

/* Hide on mobile (small screen, would clutter) */
@media (max-width: 768px) {
  .floating-icon {
    font-size: 26px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    opacity: 0.6;
  }
  .fi-1 { top: 12%; left: 4%; }
  .fi-2 { top: 16%; right: 4%; }
  .fi-3 { display: none; }
  .fi-4 { top: 38%; right: 3%; }
  .fi-5 { display: none; }
  .fi-6 { display: none; }
}

/* Use case subhead — Canva-style list */
.hero-lede-canva {
  position: relative;
  z-index: 2;
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: #1a1a2e;
  max-width: 600px;
  margin: 0 0 40px;
}
.hero-lede-canva strong {
  font-family: 'Space Grotesk', 'Noto Sans HK', sans-serif;
  font-weight: 700;
  color: #1a1a2e;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #1a1a2e;
  margin: 0 2px;
}

.hero-highlight,
.hero-v7 .hero-highlight {
  font-family: 'Space Grotesk', 'Noto Sans HK', sans-serif;
  font-weight: 700;
  background: linear-gradient(135deg, #6B1FC8 0%, #E84A82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 2px 4px;
  margin: 0 1px;
  position: relative;
}
.hero-highlight::after,
.hero-v7 .hero-highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, #6B1FC8, #E84A82);
  border-radius: 1px;
  opacity: 0.4;
}

/* H1 needs higher z-index above floating icons */
.hero-canva-v5 .hero-h1-canva {
  position: relative;
  z-index: 2;
}
.hero-canva-v5 .hero-pill-canva {
  position: relative;
  z-index: 2;
}

/* Hero product image — desktop right column, mobile bottom stack */
.hero-canva-v5 .hero-image {
  display: none;
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26, 26, 46, 0.12), 0 2px 8px rgba(26, 26, 46, 0.08);
  border: 1px solid var(--line);
  max-width: 100%;
  position: relative;
  z-index: 2;
}
.hero-canva-v5 .hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}
@media (min-width: 900px) {
  .hero-canva-v5 .hero-image {
    display: block;
    margin-top: 0;
    max-width: 480px;
    flex: 0 1 480px;
    align-self: center;
  }
}
.hero-canva-v5 .hero-cta-canva {
  position: relative;
  z-index: 2;
}
.hero-canva-v5 .hero-link-secondary {
  position: relative;
  z-index: 2;
}
.hero-canva-v5 .hero-trust-canva {
  position: relative;
  z-index: 2;
}

/* ================== HERO V6 (Full Redesign · 2026 B2B Pattern) ================== */

/* Particles (subtle stars in background) */

/* Dual CTA row */

/* Live Lucy AI Chat Preview (2026 SaaS pattern) */

@keyframes hero-chat-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

@keyframes hero-chat-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */

@keyframes hero-chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Chat input */

/* Enhanced trust line */

/* Mobile responsiveness */
@media (max-width: 768px) {
  

  

  

  
}

/* Hide scroll indicator on hero v6 to ensure above-the-fold fit */



/* ================== HERO V7 (Clean Rebuild · 2026 Pattern · Capped Height) ================== */
.hero-v7 {
  position: relative;
  min-height: 640px;
  max-height: 800px;
  padding: 56px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  scroll-margin-top: 80px;
}

/* Background mesh gradient (cleaner than v6 blobs) */
/* Subtle particles */
/* Content wrapper */
.hero-v7 .hero-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Element 1: Pill */
.hero-v7 .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.hero-v7 .hero-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16,185,129,0.6);
  animation: hero7-pulse 2s ease-in-out infinite;
}

@keyframes hero7-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Element 2: H1 */
.hero-v7 .hero-h1 {
  font-family: 'Space Grotesk', 'Noto Sans HK', sans-serif;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1a1a2e;
  margin: 0;
  max-width: 700px;
}

.hero-v7 .hero-h1-accent {
  background: linear-gradient(90deg, #00C4CC 0%, #7D2AE8 50%, #FF6B9D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Element 3: Chips */
.hero-v7 .hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
}

.hero-v7 .hero-chip {
  display: inline-block;
  padding: 5px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #1a1a2e;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.hero-v7 .hero-chip:hover {
  background: #f0fdfd;
  border-color: #00C4CC;
  color: #1a1a2e;
  transform: translateY(-1px);
}

/* Element 4: CTA */
.hero-v7 .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(90deg, #00C4CC 0%, #7D2AE8 50%, #FF6B9D 100%);
  color: #ffffff;
  font-family: 'Space Grotesk', 'Noto Sans HK', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(125, 42, 232, 0.3), 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.25s ease;
}

.hero-v7 .hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(125, 42, 232, 0.4), 0 4px 12px rgba(0,0,0,0.15);
}

.hero-v7 .hero-cta-arrow {
  font-size: 18px;
  transition: transform 0.25s;
}

.hero-v7 .hero-cta:hover .hero-cta-arrow {
  transform: translateX(3px);
}

.hero-v7 .hero-trust {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-top: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-v7 {
    min-height: 560px;
    max-height: 720px;
    padding: 48px 16px 40px;
  }
  
  .hero-v7 .hero-inner {
    gap: 20px;
  }
  
  .hero-v7 .hero-h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
  
  .hero-v7 .hero-chip {
    font-size: 12px;
    padding: 5px 12px;
  }
  
  .hero-v7 .hero-cta {
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* Hero v7 explicit override — no background image */
.hero-v7 {
  background: transparent !important;
  background-image: none !important;
}

.hero-v7::before, .hero-v7::after {
  display: none !important;
}

/* Hero v7 subline (Canva-style value description) */
.hero-v7 .hero-subline {
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a2e;
  max-width: 640px;
  margin: 28px 0 0;
}
.hero-v7 .hero-subline strong {
  font-weight: 700;
  color: #1a1a2e;
  background: none;
  -webkit-text-fill-color: #1a1a2e;
}

/* Hero v7 trust with icons */
.hero-v7 .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.hero-v7 .hero-trust {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
@media (min-width: 900px) {
  .hero-v7 .hero-trust {
    margin-top: 0;
    flex-wrap: nowrap;
    font-size: 11px;
    gap: 4px;
    max-width: 280px;
    line-height: 1.4;
    padding: 8px 12px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(26,26,46,0.08);
    border-radius: 10px;
  }
  .hero-v7 .hero-trust-item {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: #1a1a2e;
  }
}

.hero-v7 .hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4a4a5e;
}

.hero-v7 .hero-trust-item 

.hero-v7 .hero-trust-sep {
  color: #71717a;
  font-weight: 300;
}

/* Hero v7 white background override (Direction E paper) */
.hero-v7 {
  background: #ffffff !important;
}


/* === 6 modules · 2026-09-09 Danny framework === */
.platform-step-feature {
  background: linear-gradient(135deg, #fff 0%, #f7f4ff 100%);
  border: 2px solid var(--purple);
  position: relative;
  overflow: hidden;
}
.platform-step-feature::before {
  content: "⭐ NEW";
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #7D2AE8 0%, #FF6B9D 100%);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.nft-callout {
  margin: 48px auto 0;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f7f4ff 0%, #fff0f6 50%, #fff8e8 100%);
  border: 1.5px solid rgba(125, 42, 232, 0.2);
  border-radius: 16px;
  font-family: var(--font-sans);
}
.nft-callout-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.nft-callout-text strong {
  color: var(--purple);
  font-weight: 700;
}
.nft-emoji {
  display: inline-block;
  margin-right: 6px;
  color: var(--purple);
  font-size: 18px;
  font-weight: 700;
}
@media (max-width: 768px) {
  .nft-callout {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}


/* === /platform/identity/ subpage styles (2026-09-09) === */
.hero-product-id {
  min-height: 540px !important;
  padding: 80px 24px 60px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 50%, #fff0f6 100%) !important;
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hero-cta-secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

.usecase-grid {
  margin-top: 40px;
}
.usecase-card {
  padding: 32px 28px;
}
.usecase-card-feature {
  background: linear-gradient(135deg, #fff 0%, #f7f4ff 50%, #fff0f6 100%);
  border: 2px solid var(--purple);
  position: relative;
  overflow: hidden;
}
.usecase-card-feature::before {
  content: "⭐ NFT ready";
  position: absolute;
  top: 16px;
  right: -32px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #7D2AE8 0%, #FF6B9D 100%);
  padding: 4px 36px;
  transform: rotate(45deg);
  letter-spacing: 0.05em;
}
.usecase-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--purple);
  background: rgba(125, 42, 232, 0.08);
  border-radius: 12px;
}
.usecase-icon svg {
  width: 28px;
  height: 28px;
}
.usecase-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.usecase-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.usecase-list li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 14px;
  color: var(--ink-2);
}
.usecase-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--purple);
  font-weight: 700;
}

.comparison-table {
  margin: 40px auto 0;
  max-width: 1000px;
  overflow-x: auto;
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.comparison-table th,
.comparison-table td {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.comparison-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(125, 42, 232, 0.04);
}
.comparison-table .th-feature {
  background: linear-gradient(90deg, rgba(125, 42, 232, 0.15) 0%, rgba(255, 107, 157, 0.15) 100%);
  color: var(--purple);
}
.comparison-table .td-feature {
  background: rgba(125, 42, 232, 0.06);
  color: var(--purple);
  font-weight: 600;
}
.comparison-table tbody tr td:first-child {
  text-align: left;
  font-weight: 500;
}

.comparison-summary {
  margin: 32px auto 0;
  max-width: 800px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.comparison-summary strong {
  color: var(--purple);
}

.cta-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 100%);
  color: var(--paper);
}
.cta-section .section-h2,
.cta-section .section-lede {
  color: var(--paper);
}
.cta-section .gradient-text {
  background: linear-gradient(90deg, #00C4CC 0%, #7D2AE8 50%, #FF6B9D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-alt {
  background: rgba(250, 250, 250, 1);
}

@media (max-width: 768px) {
  .usecase-card-feature::before {
    top: 8px;
    right: 8px;
    transform: none;
    padding: 3px 10px;
  }
  .comparison-table {
    font-size: 12px;
  }
}


/* === Step 1 整合 CSS · 2026-09-09 === */
.module-extend-grid {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px dashed rgba(26, 26, 46, 0.12);
}
.module-extend-card {
  padding: 24px 20px;
}
.module-extend-card h3 {
  font-size: 18px;
  margin: 12px 0 8px;
}
.module-extend-card p {
  font-size: 13px;
  line-height: 1.5;
}

.cta-final-social-proof {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto 64px;
  padding: 32px 24px;
  background: linear-gradient(135deg, #f7f4ff 0%, #fff0f6 50%, #fff8e8 100%);
  border: 1px solid rgba(125, 42, 232, 0.15);
  border-radius: 16px;
}
.cta-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  font-family: var(--font-sans);
}
.cta-proof-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cta-proof-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}
.cta-proof-quote {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 8px;
}
.cta-proof-author {
  font-size: 12px;
  color: var(--ink-3);
}
.cta-proof-divider {
  width: 1px;
  background: rgba(125, 42, 232, 0.2);
}

.cta-final-link {
  text-align: center;
  margin-top: 24px;
}
.cta-final-link a {
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 12px;
  display: inline-block;
  min-height: 44px;
  line-height: 1.2;
}
.cta-final-link a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .cta-final-social-proof {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cta-proof-divider {
    display: none;
  }
  .cta-proof-num {
    font-size: 36px;
  }
}


/* === Inline step indicator (2026-09-09, 取代 P3 standalone section) === */
.inline-step-indicator {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(0, 196, 204, 0.06) 0%, rgba(125, 42, 232, 0.06) 50%, rgba(255, 107, 157, 0.06) 100%);
  border: 1px dashed rgba(125, 42, 232, 0.25);
  border-radius: 12px;
  font-family: var(--font-sans);
}
.inline-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}
.inline-step-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.inline-step-arrow {
  color: var(--purple);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .inline-step-indicator {
    flex-direction: column;
    gap: 10px;
  }
  .inline-step-arrow {
    transform: rotate(90deg);
  }
}

/* === Hub-card / hub-grid (added for solutions + blog pages · 2026-09-09) === */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:48px}
.hub-card{display:block;padding:24px 20px;background:var(--paper);border:2px solid var(--ink);text-decoration:none;color:var(--ink);transition:all .2s ease}
.hub-card:hover{background:var(--ink);color:var(--paper);transform:translateY(-4px)}
.hub-card-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.hub-card:hover .hub-card-num{color:var(--red)}
.hub-card-h3{font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.2;margin:0 0 8px}
.hub-card-desc{font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 16px}
.hub-card:hover .hub-card-desc{color:var(--paper)}
.hub-card-cta{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid currentColor;padding-top:12px;display:block}


/* ============================================
   CLOSET NAV DROPDOWN (5 verticals) · 2026-09-10
   ============================================ */
.nav-dropdown{position:relative;display:inline-block}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.nav-dropdown-caret{font-size:9px;transition:transform .2s;display:inline-block;margin-left:2px;opacity:.7}
.nav-dropdown:hover .nav-dropdown-caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:320px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:0 24px 48px -8px rgba(26,26,46,.16),0 4px 12px rgba(26,26,46,.06);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  z-index:100;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown-header{
  font-family:var(--font-mono);font-size:10px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:6px 10px 10px;
  border-bottom:1px solid var(--line-2);margin-bottom:8px;
}
.nav-dropdown-item{
  display:flex;align-items:center;gap:12px;
  padding:10px;border-radius:8px;
  text-decoration:none;color:var(--ink);
  transition:background .15s;
}
.nav-dropdown-item:hover{background:var(--paper-3)}
.nav-dropdown-icon{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  font-size:18px;flex-shrink:0;
}
.nav-dropdown-name{
  font-family:var(--font-sans);font-size:13px;font-weight:700;
  line-height:1.2;color:var(--ink);
}
.nav-dropdown-meta{
  font-family:var(--font-mono);font-size:10px;
  color:var(--ink-3);margin-top:2px;letter-spacing:.02em;
}

.nav-dropdown-all .nav-dropdown-name{
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ============================================
   CLOSET SOLUTIONS SECTION · 5 verticals grid
   ============================================ */
.solutions-section{
  padding:80px 24px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-3) 100%);
  position:relative;overflow:hidden;
}
.solutions-section::before{
  content:"";position:absolute;top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(125,42,232,.06) 0%,transparent 70%);
  pointer-events:none;
}
.solutions-section .section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px;
  padding:6px 14px;background:#fff;border:1px solid var(--line);
  border-radius:999px;
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gradient);
  box-shadow:0 0 8px rgba(125,42,232,.5);
}
.solutions-section .section-title{
  font-family:var(--font-display);font-size:clamp(36px,5vw,52px);
  font-weight:800;line-height:1.15;
  max-width:780px;margin-bottom:20px;
}
.gradient-text{
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.solutions-section .section-sub{
  font-family:var(--font-cjk);font-size:17px;
  color:var(--ink-2);max-width:680px;line-height:1.7;
  margin-bottom:48px;
}

.solutions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
  max-width:1200px;margin:0 auto;
}
.solution-tile{
  display:block;background:#fff;
  border:1.5px solid var(--line);
  border-radius:16px;padding:24px;
  text-decoration:none;color:var(--ink);
  transition:all .3s cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
}
.solution-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0) 100%);
  opacity:0;transition:opacity .3s;
}
.solution-tile:hover{
  border-color:var(--tile-color,var(--ink));
  transform:translateY(-4px);
  box-shadow:0 16px 40px -8px rgba(26,26,46,.12);
}
.solution-tile:hover::before{opacity:1}
.solution-tile-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.solution-tile-emoji{font-size:36px;line-height:1}
.solution-tile-tier{
  font-family:var(--font-mono);font-size:10px;
  font-weight:700;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px;
  background:var(--paper-3);color:var(--ink-2);
}
.solution-tile-name{
  font-family:var(--font-display);font-size:18px;
  font-weight:800;line-height:1.25;margin-bottom:6px;
  color:var(--ink);
}
.solution-tile-tagline{
  font-family:var(--font-cjk);font-size:13px;
  color:var(--ink-3);line-height:1.6;
  margin-bottom:16px;
}
.solution-tile-pains{
  list-style:none;margin:0 0 16px;padding:14px 0 0;
  border-top:1px solid var(--line-2);
}
.solution-tile-pains li{
  font-family:var(--font-cjk);font-size:12px;
  color:var(--ink-2);padding:5px 0;line-height:1.5;
  display:flex;align-items:flex-start;gap:4px;
}
.solution-tile-pains li::before{
  content:"→";color:var(--tile-color,var(--purple));
  font-weight:800;flex-shrink:0;margin-right:2px;
}
.solution-tile-cta{
  font-family:var(--font-mono);font-size:12px;
  font-weight:700;color:var(--tile-color,var(--ink));
  letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:4px;
}
.solution-tile-demo .solution-tile-pains li::before{color:#059669}

.solutions-principles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  max-width:1200px;margin:64px auto 0;
  padding:32px 0;
  border-top:1px solid var(--line);
}
.principle-item{
  text-align:left;padding:0 8px;
}
.principle-icon{font-size:28px;margin-bottom:8px}
.principle-name{
  font-family:var(--font-display);font-size:14px;
  font-weight:800;margin-bottom:4px;color:var(--ink);
}
.principle-text{
  font-family:var(--font-cjk);font-size:12px;
  color:var(--ink-3);line-height:1.6;
}

.solutions-cta{
  display:flex;gap:12px;justify-content:center;
  margin-top:48px;flex-wrap:wrap;
}

@media (max-width:768px){
  .solutions-grid{grid-template-columns:1fr;gap:16px}
  .solutions-section{padding:56px 20px}
  .solutions-section .section-title{font-size:32px}
  .solutions-principles{grid-template-columns:repeat(2,1fr);gap:16px}
  .nav-dropdown-menu{
    left:auto;right:0;transform:translateX(0) translateY(-8px);
    min-width:280px;
  }
  .nav-dropdown:hover .nav-dropdown-menu{
    transform:translateX(0) translateY(0);
  }
}

/* ============================================
   DRAWER LINK HIGHLIGHT (mobile menu)
   ============================================ */

/* ============================================
   SOLUTIONS MORE (11 industries · after tile grid)
   ============================================ */

/* ===== Hero Refine 2026-09-10 (Audit-driven) ===== */
.hero-h1-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start;
}
.hero-brand-prefix {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--accent, #FF1B6B) !important;
  text-transform: uppercase !important;
  margin: 0 0 8px 0 !important;
  opacity: 0.85 !important;
  order: -1 !important;
}
.hero-h1-main {
  display: inline !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* ===== Trust Line v2 — 4-pillar quantified ===== */
.trust-line-v2 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
}
.trust-pillar {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 0 6px !important;
  border-right: 1px solid rgba(0,0,0,0.06);
}
.trust-pillar:last-child { border-right: none; }
.trust-pillar-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ink, #0A0A0A) !important;
  line-height: 1 !important;
}
.trust-pillar-label {
  font-size: 11px !important;
  color: var(--ink-2, #4A4A4A) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}
@media (max-width: 768px) {
  .trust-line-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ===== Solution Tile Tag (POPULAR/NEW/LIVE DEMO badges) ===== */
.solution-tile-tag {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: linear-gradient(135deg, #FF1B6B, #FF6B9D) !important;
  color: white !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  z-index: 3 !important;
  box-shadow: 0 4px 12px rgba(255, 27, 107, 0.25);
}
.solution-tile {
  position: relative !important;
}


/* ============================================
   STATS BAR H2 (Fix B)
   ============================================ */
.stats-h2 {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}

/* ============================================
   LUCY CHAT WIDGET (Fix A - real interactive, replaces anchor)
   ============================================ */
.lucy-chat-widget {
  max-width: 720px;
  margin: 48px auto 0;
  background: var(--paper);
  border: 1px solid var(--ink-3, #E5E5E5);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.lucy-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--cyan, #00C4CC), var(--purple, #7D2AE8));
  color: white;
}
.lucy-avatar {
  font-size: 32px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.lucy-chat-title { flex: 1; }
.lucy-chat-title strong { font-size: 16px; font-weight: 700; display: block; }
.lucy-status { font-size: 12px; opacity: 0.9; }
.lucy-minimize {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}
.lucy-chat-body {
  padding: 20px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--paper-2, #FAFAFA);
}
.lucy-msg { display: flex; gap: 8px; margin-bottom: 16px; }
.lucy-msg-avatar {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  flex-shrink: 0;
}
.lucy-msg-bubble {
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  border: 1px solid var(--ink-3, #E5E5E5);
}
.lucy-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lucy-quick-btn {
  padding: 10px 16px;
  background: white;
  border: 1px solid var(--cyan, #00C4CC);
  border-radius: 999px;
  font-size: 13px;
  color: var(--cyan, #00C4CC);
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  transition: all 0.2s;
}
.lucy-quick-btn:hover { background: var(--cyan, #00C4CC); color: white; }
.lucy-chat-input {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: white;
  border-top: 1px solid var(--ink-3, #E5E5E5);
  align-items: center;
}
.lucy-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--ink-3, #E5E5E5);
  border-radius: 999px;
  font-size: 14px;
  outline: none;
  min-height: 44px;
}
.lucy-input:focus { border-color: var(--cyan, #00C4CC); }
.lucy-upload, .lucy-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--ink-3, #E5E5E5);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lucy-send { background: var(--gradient, linear-gradient(135deg, #00C4CC, #7D2AE8)); color: white; }
.lucy-chat-footer {
  padding: 8px 20px;
  font-size: 11px;
  color: var(--ink-2, #6B6B6B);
  text-align: center;
  background: var(--paper-2, #FAFAFA);
}

/* ============================================
   FLOATING LUCY CTA (Fix C)
   ============================================ */
@keyframes lucy-pulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.4); opacity: 0; }
}


@media (max-width: 640px) {
  
  
}

/* ============================================
   PRINCIPLE TOOLTIPS (Fix H)
   ============================================ */
.principle-name[data-tooltip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--cyan, #00C4CC);
}
.principle-name[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #1a1a2e);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}
.principle-name[data-tooltip]:hover::after {
  opacity: 1;
}
@media (max-width: 768px) {
  .principle-name[data-tooltip]::after { font-size: 11px; max-width: 240px; white-space: normal; }
}


/* ============================================
   LUCY CHAT - TYPING DOTS
   ============================================ */
.lucy-typing-dots {
  display: flex;
  gap: 4px;
  padding: 14px 16px !important;
  align-items: center;
}
.lucy-typing-dots span {
  width: 8px;
  height: 8px;
  background: var(--ink-2, #6B6B6B);
  border-radius: 50%;
  animation: typing-bounce 1.4s ease-in-out infinite;
}
.lucy-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.lucy-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ============================================
   LUCY CHAT - USER MESSAGE BUBBLE (gradient right)
   ============================================ */
.lucy-msg-user {
  background: linear-gradient(135deg, var(--cyan, #00C4CC), var(--purple, #7D2AE8)) !important;
  color: white !important;
  border: none !important;
  max-width: 75%;
}

/* ============================================
   LUCY CHAT - DROP ZONE
   ============================================ */
.lucy-drop-zone {
  padding: 20px;
  background: var(--paper-2, #FAFAFA);
  border-top: 2px dashed var(--cyan, #00C4CC);
  transition: all 0.2s;
}
.lucy-drop-content {
  text-align: center;
  padding: 16px;
  border: 2px dashed var(--ink-3, #E5E5E5);
  border-radius: 12px;
  background: white;
}
.lucy-drop-icon { font-size: 32px; margin-bottom: 8px; }
.lucy-drop-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.lucy-drop-formats {
  font-size: 11px;
  color: var(--ink-2, #6B6B6B);
  margin-bottom: 12px;
}
.lucy-browse-btn {
  padding: 8px 20px;
  background: var(--ink, #1a1a2e);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
}
.lucy-browse-btn:hover { background: var(--purple, #7D2AE8); }

/* ============================================
   LUCY CHAT - CTA LINK (within bot response)
   ============================================ */
.lucy-cta-link {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--cyan, #00C4CC), var(--purple, #7D2AE8));
  color: white !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 13px;
  min-height: 36px;
  margin-top: 4px;
}

/* ============================================
   LUCY CHAT - MINIMIZED STATE
   ============================================ */
.lucy-chat-widget.lucy-minimized .lucy-chat-body,
.lucy-chat-widget.lucy-minimized .lucy-chat-input,
.lucy-chat-widget.lucy-minimized .lucy-quick-replies,
.lucy-chat-widget.lucy-minimized .lucy-drop-zone,
.lucy-chat-widget.lucy-minimized .lucy-chat-footer {
  display: none !important;
}
.lucy-chat-widget.lucy-minimized {
  max-width: 360px;
}
.lucy-chat-widget.lucy-minimized .lucy-chat-header {
  border-radius: 16px;
  cursor: pointer;
}

/* ============================================
   MOBILE: Floating CTA + Lucy widget responsive
   ============================================ */
@media (max-width: 640px) {
  .lucy-chat-widget {
    margin: 24px 16px 0;
    max-width: calc(100vw - 32px);
  }
  .lucy-quick-replies { gap: 6px; }
  .lucy-quick-btn { font-size: 12px; padding: 8px 12px; }
}

/* === 2026-09-11: collapsible heavy sections (ai-cs / solutions / ai-platform) === */
.fold-collapsible {
  margin-top: 16px;
  border: 1px solid var(--line, rgba(10,10,10,.08));
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}
.fold-collapsible > summary {
  cursor: pointer;
  padding: 14px 20px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink, #1a1a2e);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0));
  transition: background 0.15s ease;
}
.fold-collapsible > summary:hover {
  background: rgba(0,0,0,0.04);
}
.fold-collapsible > summary::-webkit-details-marker { display: none; }
.fold-collapsible > summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  margin-left: 12px;
  color: var(--ink-soft, #555);
  transition: transform 0.2s ease;
}
.fold-collapsible[open] > summary::after {
  content: "−";
}
.fold-collapsible > summary > .fold-hint {
  font-family: var(--font-body, sans-serif);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft, #888);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 12px;
  flex: 1;
  text-align: right;
}
.fold-collapsible[open] > summary > .fold-hint { display: none; }
.fold-collapsible > .fold-body {
  padding: 8px 20px 20px;
  border-top: 1px solid var(--line, rgba(10,10,10,.06));
}
/* Light mode visibility check */
@media (prefers-color-scheme: dark) {
  .fold-collapsible { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,.1); }
  .fold-collapsible > summary { color: var(--paper, #fafaf7); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
  .fold-collapsible > summary:hover { background: rgba(255,255,255,.06); }
}


/* === AUDIT PASS 3 FIX — Missing class definitions (18 fixes) === */

/* Stats bar - horizontal stat layout */
.stats-bar-section {
  padding: 64px 24px;
  background: var(--paper-2, #fafafa);
}
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
}
.stats-item {
  flex: 1 1 180px;
  min-width: 160px;
  text-align: center;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--ink, #1a1a2e);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stats-unit {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--ink-2, #4a4a5e);
  margin-left: 2px;
}
.stats-label {
  font-size: 13px;
  color: var(--ink-2, #4a4a5e);
  font-weight: 500;
  line-height: 1.4;
}

/* Hero pill text */
.hero-pill-text {
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1a1a2e);
  letter-spacing: 0.01em;
}

/* Specs CTA & CTA-final buttons wrapper */
.specs-cta,
.cta-final-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}
.cta-final-buttons .btn {
  margin: 4px 0;
}

/* Step counter + arrows in ai-platform */
.step-counter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--ink, #1a1a2e);
  margin: 16px 0 24px;
}
.step-counter > span:not(.step-arrow) {
  background: var(--paper, #ffffff);
  border: 1px solid var(--paper-3, #f5f5fa);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.step-arrow {
  color: var(--accent, #6366f1);
  font-size: 18px;
  font-weight: 800;
}

/* Text link / divider for cta-final */
.text-link {
  color: var(--ink, #1a1a2e);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--paper-3, #f5f5fa);
  transition: border-color 0.2s;
}
.text-link:hover {
  border-bottom-color: var(--accent, #6366f1);
}
.text-divider {
  color: var(--ink-2, #4a4a5e);
  margin: 0 8px;
  user-select: none;
}

/* Lucy chat internals */
.lucy-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.lucy-msg-bot {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0;
}
.lucy-msg-bot .lucy-msg-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.lucy-msg-bot .lucy-msg-bubble {
  background: var(--paper-2, #fafafa);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1a1a2e);
  max-width: 80%;
}

/* ============================================
   LUCY FLOATING WIDGET (E: 2026-09-12 always-on)
   - Mobile: docked bottom, full-width
   - Desktop: fixed bottom-right corner
   - z-index 1000 (top layer, normalized 2026-09-27)
   ============================================ */
#lucy-floating-widget.lucy-floating-widget {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), var(--paper, #fff));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line, #e5e5e5);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  max-height: 70vh;
  overflow-y: auto;
  transition: transform 0.3s ease;
}
@media (min-width: 769px) {
  #lucy-floating-widget.lucy-floating-widget {
    left: auto;
    width: 420px;
    bottom: 20px;
    right: 20px;
    border-radius: 16px;
    border: 1px solid var(--line, #e5e5e5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  }
}
#lucy-floating-widget.lucy-floating-widget > summary {
  cursor: pointer;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  user-select: none;
}
#lucy-floating-widget.lucy-floating-widget > summary::-webkit-details-marker {
  display: none;
}
#lucy-floating-widget.lucy-floating-widget > summary::after {
  content: "▾";
  font-size: 14px;
  margin-left: 12px;
  transition: transform 0.2s;
}
#lucy-floating-widget.lucy-floating-widget:not([open]) > summary::after {
  transform: rotate(180deg);
}
#lucy-floating-widget.lucy-floating-widget > .fold-body {
  padding: 0 16px 16px;
}

/* Adjust body to account for fixed widget on mobile when open */
body:has(#lucy-floating-widget[open]) {
  padding-bottom: 60vh;
}

/* 2026-09-12 fix: don't block clicks on content underneath
   - summary always receives clicks (collapse/expand)
   - body content only when open
*/
#lucy-floating-widget.lucy-floating-widget > summary {
  pointer-events: auto;
  background: var(--paper, #fff);
  border-radius: 14px 14px 0 0;
}
#lucy-floating-widget.lucy-floating-widget:not([open]) {
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  border: none;
}
#lucy-floating-widget.lucy-floating-widget[open] > .fold-body {
  pointer-events: auto;
}

/* 2026-09-12 v2 fix: when widget is OPEN, only the summary + body
   receive pointer-events. Outer container is transparent to clicks.
*/
#lucy-floating-widget.lucy-floating-widget[open] {
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  border: none;
}

/* 2026-09-12 v3: persona tabs — 2-col grid (mobile) so all 6 visible */
.persona-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.persona-tab {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  padding: 10px 12px !important;
}

/* 2026-09-12 (1B fix): demo label above prefill conversation */
.chat-thread-demo-label {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  padding: 8px 0;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02));
  border-bottom: 1px dashed var(--line);
  margin-bottom: 8px;
}

/* ============================================================
   CUSTOMER JOINERY · 5 SUB-BLOCKS INSIDE HERO (Phase B · 2026-09-16)
   trust-strip · qa-sequence · craft-preview · usecase-grid · footer-cta
   ============================================================ */

/* Block 1 · trust-strip · 5 capability pills (no price, no MOQ default) */
.hero-trust-strip{
  display:flex;flex-wrap:wrap;gap:8px 12px;
  margin-top:24px;padding-top:20px;
  border-top:1px dashed var(--line);
}
.hero-trust-strip .ts-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
  background:var(--red-soft);color:var(--red);
  border:1px solid rgba(255,59,47,0.18);
}
.hero-trust-strip .ts-pill.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.hero-trust-strip .ts-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}

/* Block 2 · qa-sequence · 3 Q&A: 幾錢 / MOQ / 點落單 */
.hero-qa{margin-top:32px}
.hero-qa-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.hero-qa-eyebrow::before{
  content:"";display:inline-block;width:14px;height:2px;background:var(--red);
}
.hero-qa-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.hero-qa-item{
  display:grid;grid-template-columns:64px 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.hero-qa-q{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding-top:2px;
}
.hero-qa-q::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-right:6px;vertical-align:middle;
}
.hero-qa-a{
  font-size:14px;line-height:1.55;color:var(--ink-soft);
}
.hero-qa-a strong{color:var(--ink);font-weight:600}

/* Block 2.5 · hero-keyword-landing · SEO internal links to keyword pages (2026-09-25) */
.hero-keyword-landing{margin-top:24px;padding:16px;border:1px solid var(--line);background:var(--paper-soft)}
.hero-keyword-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.hero-keyword-eyebrow::before{
  content:"";display:inline-block;width:14px;height:2px;background:var(--red);
}
.hero-keyword-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.hero-keyword-cell{
  padding:14px 12px;border:1px solid var(--line);background:var(--paper);
  text-decoration:none;color:var(--ink);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:border-color .15s,background .15s;
}
.hero-keyword-cell:hover{border-color:var(--red);background:var(--red-soft)}
.hero-keyword-cell .keyword-icon{
  font-family:var(--font-display);font-size:24px;font-weight:700;
  color:var(--red);line-height:1;
}
.hero-keyword-cell .keyword-name{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--ink);line-height:1.2;margin-top:2px;
}
.hero-keyword-cell .keyword-meta{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-soft);margin-top:2px;
}

/* Block 3 · craft-preview · 5 mini grid (DTG / 絲印 / 熱轉印 / 繡花 / UV DTF) */
.hero-craft{margin-top:32px}
.hero-craft-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.hero-craft-eyebrow::before{
  content:"";display:inline-block;width:14px;height:2px;background:var(--red);
}
.hero-craft-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
}
.hero-craft-cell{
  padding:12px 10px;border:1px solid var(--line);
  background:var(--paper);text-align:center;
  transition:border-color .15s,background .15s;
  cursor:pointer;
}
.hero-craft-cell:hover{border-color:var(--ink);background:var(--red-soft)}
.hero-craft-cell .craft-icon{
  font-family:var(--font-display);font-size:18px;font-weight:700;
  color:var(--ink);line-height:1;margin-bottom:4px;
}
.hero-craft-cell .craft-name{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* Block 4 · usecase-grid · 4-persona mapping */
.hero-usecase{margin-top:32px}
.hero-usecase-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.hero-usecase-eyebrow::before{
  content:"";display:inline-block;width:14px;height:2px;background:var(--red);
}
.hero-usecase-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.hero-usecase-card{
  padding:12px 14px;border:1px solid var(--line);
  background:var(--paper);text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:4px;
  transition:border-color .15s,background .15s;
}
.hero-usecase-card:hover{border-color:var(--red);background:var(--red-soft)}
.hero-usecase-card .uc-tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);font-weight:700;
}
.hero-usecase-card .uc-title{
  font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);
}
.hero-usecase-card .uc-sub{
  font-size:11px;color:var(--ink-soft);line-height:1.4;
}

/* Block 5 · footer-cta · 3-step entry: WhatsApp / Mockup / Email */
.hero-footer-cta{
  margin-top:36px;padding:20px;
  background:var(--ink);color:var(--paper);
  border-radius:0;
}
.hero-footer-cta .hf-eyebrow{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.hero-footer-cta .hf-eyebrow::before{
  content:"";display:inline-block;width:10px;height:2px;background:var(--red);
}
.hero-footer-cta .hf-title{
  font-family:var(--font-display);font-size:18px;font-weight:600;
  line-height:1.3;color:var(--paper);margin-bottom:14px;
  letter-spacing:-.01em;
}
.hero-footer-cta .hf-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.hero-footer-cta .hf-btn{
  padding:12px 10px;text-align:center;
  background:rgba(255,255,255,.08);color:var(--paper);
  text-decoration:none;border:1px solid rgba(255,255,255,.18);
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:background .15s,border-color .15s;
  min-height:64px;justify-content:center;
}
.hero-footer-cta .hf-btn:hover{background:var(--red);border-color:var(--red)}
.hero-footer-cta .hf-btn .hf-icon{font-size:18px;line-height:1}
.hero-footer-cta .hf-btn .hf-label{font-size:10px;line-height:1.2}
.hero-footer-cta .hf-btn .hf-sub{font-size:9px;color:rgba(255,255,255,.55);text-transform:none;letter-spacing:0;font-weight:400}

/* Mobile responsive · Phase B sub-blocks */
@media(max-width:768px){
  .hero-trust-strip{gap:6px 8px}
  .hero-trust-strip .ts-pill{font-size:10px;padding:6px 10px}
  .hero-qa-item{grid-template-columns:54px 1fr;gap:12px}
  .hero-craft-grid{grid-template-columns:repeat(5,1fr);gap:6px}
  .hero-craft-cell{padding:10px 6px}
  .hero-craft-cell .craft-icon{font-size:14px}
  .hero-usecase-grid{grid-template-columns:1fr;gap:6px}
  .hero-footer-cta .hf-grid{grid-template-columns:1fr;gap:6px}
  .hero-footer-cta .hf-btn{flex-direction:row;justify-content:flex-start;padding:12px 14px;min-height:auto}
  .hero-footer-cta .hf-btn .hf-icon{margin-right:8px}
}

/* Hero v7+ · make sure sub-blocks sit inside hero-inner */
.hero-v7 .hero-inner > .hero-trust-strip,
.hero-v7 .hero-inner > .hero-qa,
.hero-v7 .hero-inner > .hero-craft,
.hero-v7 .hero-inner > .hero-usecase,
.hero-v7 .hero-inner > .hero-footer-cta,
.hero-v7 .hero-inner > .hero-stats-row,
.hero-v7 .hero-inner > .hero-solutions-preview{
  position:relative;z-index:3;
}

/* ============================================================
   CUSTOMER JOINERY · PHASE C · 3-SECTION CONSOLIDATION
   Hide legacy sections (SEO H2/H3 preserved in DOM)
   Add inline hero-stats-row + hero-solutions-preview
   ============================================================ */

/* Refinement (2026-09-18) — restore homepage sections
   ============================================================
   Danny feedback: "homepage 內容少咗"
   Previously hidden by Joinery Phase C (2026-09-16) for "3-section consolidation"
   Now restored — visitor sees full content matching H2 SEO. Inline hero stats
   (hero-stats-row, hero-solutions-preview) stay in hero for above-fold density.
   ============================================================ */

/* (Hide rules removed — sections restored) */

/* Hero stats row (5 stats from stats-bar section) */
.hero-stats-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-top:36px;padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hero-stats-row .hs-cell{
  text-align:center;padding:8px 12px;
  border-right:1px solid var(--line);
}
.hero-stats-row .hs-cell:last-child{border-right:none}
.hero-stats-row .hs-num{
  font-family:var(--font-display);font-size:32px;font-weight:800;
  line-height:1;color:var(--ink);letter-spacing:-.02em;
}
.hero-stats-row .hs-num .hs-unit{font-size:18px;color:var(--ink-soft);font-weight:600}
.hero-stats-row .hs-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:6px;
  line-height:1.3;
}
@media(max-width:768px){
  .hero-stats-row{grid-template-columns:repeat(5,1fr);gap:0;padding:16px 0}
  .hero-stats-row .hs-cell{padding:4px 2px;border-right:1px solid var(--line)}
  .hero-stats-row .hs-num{font-size:18px}
  .hero-stats-row .hs-num .hs-unit{font-size:11px}
  .hero-stats-row .hs-label{font-size:8px;line-height:1.2}
}

/* Hero solutions preview (3 行業 cards) */
.hero-solutions-preview{margin-top:36px}
.hero-solutions-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
  justify-content:space-between;
}
.hero-solutions-eyebrow::before{
  content:"";display:inline-block;width:14px;height:2px;background:var(--red);
}
.hero-solutions-eyebrow a{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:1px;
}
.hero-solutions-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.hero-solutions-card{
  padding:18px 16px;border:1px solid var(--line);background:var(--paper);
  text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .15s,background .15s,transform .15s;
  min-height:120px;justify-content:space-between;
}
.hero-solutions-card:hover{
  border-color:var(--ink);background:var(--red-soft);transform:translateY(-2px);
}
.hero-solutions-card .hsp-tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);font-weight:700;
}
.hero-solutions-card .hsp-title{
  font-family:var(--font-display);font-size:16px;font-weight:600;
  line-height:1.25;color:var(--ink);letter-spacing:-.01em;
}
.hero-solutions-card .hsp-sub{
  font-size:11px;color:var(--ink-soft);line-height:1.4;
}
.hero-solutions-card .hsp-cta{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);font-weight:700;
  margin-top:auto;display:inline-flex;align-items:center;gap:4px;
}
@media(max-width:768px){
  .hero-solutions-grid{grid-template-columns:1fr;gap:8px}
  .hero-solutions-card{padding:14px;min-height:auto}
  .hero-solutions-card .hsp-title{font-size:14px}
}

/* ============================================================
   CUSTOMER JOINERY · PHASE D · SALES-LED CUSTOMIZER
   3 decisions (用途 / 數量 / WhatsApp) → wa.me prefill
   不俾客人揀工藝 (8-24 Rule 13) · sales 接手
   ============================================================ */

.hero-customizer{
  margin-top:32px;padding:24px;
  background:linear-gradient(180deg,var(--paper-warm) 0%,var(--paper) 100%);
  border:1px solid var(--line-strong);
  position:relative;
}
.hero-customizer::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;
  background:linear-gradient(90deg,var(--red) 0%,rgba(255,59,47,0.3) 100%);
}
.hero-customizer .hc-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:6px;display:flex;align-items:center;gap:10px;
}
.hero-customizer .hc-eyebrow::before{
  content:"";display:inline-block;width:14px;height:2px;background:var(--red);
}
.hero-customizer .hc-title{
  font-family:var(--font-display);font-size:18px;font-weight:600;
  line-height:1.3;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em;
}
.hero-customizer .hc-sub{
  font-size:12px;color:var(--ink-soft);line-height:1.5;margin-bottom:16px;
}
.hero-customizer .hc-grid{
  display:grid;grid-template-columns:1fr 1fr auto;gap:10px;
  align-items:flex-end;
}
.hero-customizer .hc-field{display:flex;flex-direction:column;gap:4px}
.hero-customizer .hc-label{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.hero-customizer .hc-input,.hero-customizer .hc-select{
  font-family:var(--font-sans);font-size:14px;font-weight:500;
  padding:11px 12px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);
  width:100%;min-height:42px;
  transition:border-color .15s;
}
.hero-customizer .hc-input:focus,.hero-customizer .hc-select:focus{
  outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(255,59,47,0.1);
}
.hero-customizer .hc-input::placeholder{color:rgba(10,10,10,0.35)}
.hero-customizer .hc-submit{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:11px 18px;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  min-height:42px;white-space:nowrap;
  transition:background .15s,color .15s;
}
.hero-customizer .hc-submit:hover{background:var(--red);border-color:var(--red)}
.hero-customizer .hc-submit .hc-arrow{font-size:14px;line-height:1}
.hero-customizer .hc-msg{
  margin-top:10px;padding:8px 10px;
  font-size:11px;line-height:1.4;
  background:var(--red-soft);color:var(--red);
  border-left:2px solid var(--red);
  display:none;
}
.hero-customizer .hc-msg.is-shown{display:block}
.hero-customizer .hc-trust{
  margin-top:12px;font-size:10px;color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.hero-customizer .hc-trust .hc-trust-dot{
  width:4px;height:4px;border-radius:50%;background:var(--ink-soft);
}
@media(max-width:768px){
  .hero-customizer{padding:18px}
  .hero-customizer .hc-grid{grid-template-columns:1fr;gap:10px}
  .hero-customizer .hc-submit{width:100%;justify-content:center}
}

/* =============================================================
   MISSING CLASSES FIX — 2026-09-25
   Restores styling for /leadtime/, /solutions/, homepage, 404
   P0 audit fix: 10 undefined CSS classes → properly styled
   ============================================================= */

/* 1. .card-table — craft comparison table (5大工藝)
   Used on /leadtime/ and /solutions/ to render as styled card */
.card-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  margin: 24px 0;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.06));
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.card-table thead th {
  background: var(--ink, #0A0A0A);
  color: var(--paper, #FAFAF7);
  font-weight: 700;
  text-align: left;
  padding: 14px 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--line);
}
.card-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink, #0A0A0A);
  vertical-align: middle;
}
.card-table tbody tr:last-child td {
  border-bottom: 0;
}
.card-table tbody tr:hover {
  background: rgba(0,0,0,0.02);
}
.card-table 
.card-table 
@media (max-width: 640px) {
  .card-table { font-size: 13px; }
  .card-table thead th,
  .card-table tbody td { padding: 10px 12px; }
}

/* 2. .btn-shimmer-row — row of shimmering CTA buttons */
.btn-shimmer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 24px 0;
}
.btn-shimmer-row > * {
  position: relative;
  overflow: hidden;
}
.btn-shimmer-row > *::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 50%,
    transparent 100%
  );
  animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shimmer-row > *::after { animation: none; }
}

/* 3. .case-quote — case study quote block */
.case-quote {
  position: relative;
  padding: 28px 28px 28px 60px;
  margin: 24px 0;
  background: var(--paper);
  border-left: 4px solid var(--red, #FF3B2F);
  border-radius: 0 var(--r-lg, 16px) var(--r-lg, 16px) 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink, #0A0A0A);
  font-style: italic;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.06));
}
.case-quote::before {
  content: '"';
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 56px;
  font-weight: 800;
  color: var(--red, #FF3B2F);
  line-height: 1;
  font-family: 'Fraunces', serif;
}
.case-quote cite,
.case-quote 

/* 4. .feature-h3 — feature sub-heading */
.feature-h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink, #0A0A0A);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.feature-h3 + p,
.feature-h3 + .feature-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink, #0A0A0A);
  opacity: 0.78;
  margin: 0;
}

/* 5. .feature-grid-4 — 4-column feature grid */
.feature-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 32px 0;
}
.feature-grid-4 > * {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 24px 20px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.feature-grid-4 > *:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.08));
}
@media (max-width: 960px) {
  .feature-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .feature-grid-4 { grid-template-columns: 1fr; }
}

/* 6. .craft-card — homepage #specs craft cards */
.craft-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 28px 24px;
  transition: transform 200ms ease, border-color 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.craft-card:hover {
  transform: translateY(-3px);
  border-color: var(--cyan, #67E8F9);
}
.craft-card .craft-icon {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(103, 232, 249, 0.1);
  color: var(--cyan, #67E8F9);
}
.craft-card h3,
.craft-card 
.craft-card p,
.craft-card 

/* 7. .lucy-chat-widget-floating — homepage Lucy AI chat widget */
.lucy-chat-widget-floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red, #FF3B2F) 0%, #FF6B47 100%);
  box-shadow: 0 8px 24px rgba(255, 59, 47, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: transform 200ms ease, box-shadow 200ms ease;
  color: white;
  border: none;
}
.lucy-chat-widget-floating:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(255, 59, 47, 0.5);
}
.lucy-chat-widget-floating::before {
  content: '';
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid white;
}
.lucy-chat-widget-floating svg {
  width: 28px;
  height: 28px;
}
@media (max-width: 640px) {
  .lucy-chat-widget-floating {
    bottom: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
  }
}

/* 8. .tag-purple, .tag-dot — homepage #ai-platform tags */
.tag-purple {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #7c3aed;
  letter-spacing: 0.02em;
}
.tag-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  position: relative;
}
.tag-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan, #67E8F9);
  flex-shrink: 0;
}

/* 9. .sr-only — accessibility screen-reader text */
.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;
}

/* 10. .h1 (used on 404) — display heading */
.h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink, #0A0A0A);
  margin: 0;
}

/* Mobile responsive pass for key classes */
@media (max-width: 768px) {
  .btn-shimmer-row { flex-direction: column; align-items: stretch; }
  .btn-shimmer-row > * { width: 100%; }
  .case-quote { padding: 20px 20px 20px 48px; font-size: 16px; }
  .case-quote::before { font-size: 40px; top: 4px; left: 12px; }
}
/* =============================================================
   HOMEPAGE LENGTH COMPACTION — 2026-09-25
   Reduces scrollHeight from 8,757px (~13.8× viewport) to ~5,500-6,000px
   Strategy: CSS-only, no HTML restructure, all content preserved
   Target: scrollHeight 8,757 → 5,800px (9.2× viewport, down from 13.8×)
   ============================================================= */

/* === GLOBAL SECTION COMPACTION === */
/* --s-section was 96px. Reduce to 56px for non-hero sections */
.section.section-alt,
.section.solutions-section {
  padding: 56px 32px !important;
}
@media (max-width: 900px) {
  .section.section-alt,
  .section.solutions-section {
    padding: 40px 24px !important;
  }
}

/* === #ai-cs — Lucy section (1,835px → ~1,100px) === */
/* Hide persona tabs by default - move to collapsible */
#ai-cs .persona-tabs {
  margin-bottom: 12px !important;
  gap: 6px !important;
}
/* Compact chat demo */
#ai-cs .chat-demo {
  padding: 16px !important;
  border-radius: 16px !important;
}
#ai-cs .chat-header {
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}
#ai-cs .chat-thread {
  max-height: 280px !important;  /* was 400px */
  gap: 8px !important;
  margin-bottom: 12px !important;
}
#ai-cs .chat-bubble {
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
/* Compact chat input */
#ai-cs .lucy-chat-input {
  padding: 8px 10px !important;
}
/* Compact the fold body */
#ai-cs .fold-body {
  padding: 12px 0 !important;
}
/* Make fold-collapsible details more compact */
#ai-cs details.fold-collapsible summary {
  padding: 8px 0 !important;
  margin-bottom: 8px !important;
}
/* Compact section-h2 in ai-cs */
#ai-cs .section-h2 {
  margin-bottom: 12px !important;
  font-size: 32px !important;  /* smaller h2 */
}
#ai-cs .section-lede {
  margin-bottom: 16px !important;
  font-size: 15px !important;
}
/* Compact grid-2 flow-cards if exists */
#ai-cs .grid.grid-2.flow-cards {
  gap: 12px !important;
}
#ai-cs .flow-card {
  padding: 12px !important;
}
#ai-cs .lucy-drop-zone {
  padding: 16px !important;
  margin: 8px 0 !important;
}
#ai-cs .lucy-chat-footer {
  margin-top: 8px !important;
  font-size: 11px !important;
}

/* === #solutions — 11 industry tiles (1,490px → ~900px) === */
/* More compact grid */
#solutions .solutions-grid {
  gap: 14px !important;
}
#solutions .solution-tile {
  padding: 18px 16px !important;  /* was 24px */
  border-radius: 14px !important;
}
/* Make tagline single line */
#solutions .solution-tile-tagline {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}
#solutions .solution-tile-header {
  margin-bottom: 8px !important;
}
#solutions .solution-tile-name {
  font-size: 16px !important;  /* was bigger */
}
#solutions .solution-tile-cta {
  font-size: 12px !important;
  padding: 6px 10px !important;
}
/* Smaller section-h2 */
#solutions .section-h2 {
  font-size: 32px !important;
  margin-bottom: 12px !important;
}
#solutions .section-lede {
  font-size: 15px !important;
  margin-bottom: 24px !important;
}

/* === #ai-platform — pipeline (1,220px → ~850px) === */
/* Compact the grid */
#ai-platform .grid.grid-3 {
  gap: 14px !important;
}
#ai-platform .card.platform-step {
  padding: 16px 14px !important;  /* was bigger */
  border-radius: 14px !important;
}
#ai-platform .step-counter {
  margin-bottom: 12px !important;
}
#ai-platform .platform-step .icon {
  width: 36px !important;  /* was 48px */
  height: 36px !important;
  margin-bottom: 10px !important;
}
#ai-platform .platform-step .text-mono.step-num {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}
#ai-platform .platform-step h3,
#ai-platform .platform-step .feature-h3 {
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}
#ai-platform .platform-step p {
  font-size: 12px !important;
  line-height: 1.4 !important;
}
/* Smaller section-h2 */
#ai-platform .section-h2 {
  font-size: 32px !important;
  margin-bottom: 12px !important;
}
#ai-platform .section-lede {
  font-size: 15px !important;
  margin-bottom: 20px !important;
}

/* === #cta-final — final CTA (988px → ~700px) === */
.cta-final {
  padding: 48px 32px !important;  /* was 96px */
}
.cta-final-inner {
  padding: 32px 24px !important;  /* was 48px */
}
.cta-final .section-h2 {
  font-size: 28px !important;
  margin-bottom: 12px !important;
}
.cta-final p {
  font-size: 15px !important;
  margin-bottom: 16px !important;
}

/* === #specs — craft cards (already 755px, keep but slight compact) === */
#specs .section-h2 {
  font-size: 32px !important;
  margin-bottom: 12px !important;
}
#specs .section-lede {
  font-size: 15px !important;
  margin-bottom: 20px !important;
}

/* === #hero — keep at full height (800px is reasonable) === */
/* No change to hero */

/* === GLOBAL SECTION HEADER COMPACTION === */
/* All section-h2 on homepage except hero */
.section-h2 {
  font-size: 32px !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}
.section-eyebrow {
  margin-bottom: 12px !important;
  font-size: 12px !important;
}
.section-lede {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  .section.section-alt,
  .section.solutions-section {
    padding: 32px 20px !important;
  }
  #ai-cs .chat-thread {
    max-height: 220px !important;
  }
  .cta-final {
    padding: 32px 20px !important;
  }
  .cta-final-inner {
    padding: 24px 20px !important;
  }
}
/* =============================================================
   HOMEPAGE LENGTH COMPACTION v2 — 2026-09-25
   Aggressive compact of lucy-msg-bubble, quick-btn, chat-footer
   ============================================================= */

/* === #ai-cs — second pass (1,563px → ~900px) === */
/* Compact lucy message bubbles - they're 568px tall because they have a massive prompt */
#ai-cs .lucy-msg-bubble {
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  max-width: 90% !important;
}
#ai-cs .lucy-msg-bubble ul,
#ai-cs .lucy-msg-bubble ol {
  margin: 4px 0 !important;
  padding-left: 20px !important;
}
#ai-cs .lucy-msg-bubble li {
  margin: 2px 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
#ai-cs .lucy-msg-bubble p {
  margin: 4px 0 !important;
}
#ai-cs .lucy-msg-bubble h1,
#ai-cs .lucy-msg-bubble h2,
#ai-cs .lucy-msg-bubble h3,
#ai-cs .lucy-msg-bubble h4 {
  margin: 4px 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
#ai-cs .lucy-msg-bubble img,
#ai-cs .lucy-msg-bubble svg {
  max-height: 60px !important;
}

/* Compact quick buttons - they're 170px because text wraps to 3 lines */
#ai-cs .lucy-quick-btn {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
#ai-cs 
/* Show only first 4 buttons */
#ai-cs .lucy-quick-buttons .lucy-quick-btn:nth-child(n+5) {
  display: none !important;
}

/* Compact chat footer */
#ai-cs .lucy-chat-footer {
  margin-top: 4px !important;
  padding: 4px 0 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  max-height: 30px !important;
  overflow: hidden !important;
  opacity: 0.6 !important;
}

/* Compact chat thread even more */
#ai-cs .chat-thread {
  max-height: 240px !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  padding: 4px 0 !important;
}

/* Compact section header */
#ai-cs .section-h2 {
  margin-bottom: 8px !important;
}
#ai-cs .section-eyebrow {
  margin-bottom: 8px !important;
}
#ai-cs .section-lede {
  margin-bottom: 12px !important;
}

/* Compact fold-collapsible */
#ai-cs details.fold-collapsible summary {
  padding: 6px 0 !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
}
#ai-cs details.fold-collapsible[open] summary {
  margin-bottom: 4px !important;
}

/* Compact persona-tabs further */
#ai-cs .persona-tabs {
  margin-bottom: 8px !important;
}
#ai-cs .persona-tab {
  padding: 4px 8px !important;
  font-size: 11px !important;
}

/* Reduce grid-2 spacing if exists */
#ai-cs .grid.grid-2.flow-cards {
  gap: 8px !important;
  margin-top: 8px !important;
}

/* === #solutions — second pass (1,362px → ~850px) === */
#solutions .solution-tile {
  padding: 14px 12px !important;
}
#solutions .solution-tile-name {
  font-size: 15px !important;
  margin-bottom: 4px !important;
}
#solutions .solution-tile-tag {
  font-size: 10px !important;
  padding: 2px 6px !important;
  margin-bottom: 4px !important;
}
#solutions .solution-tile-tagline {
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
  -webkit-line-clamp: 2 !important;
}
#solutions .solution-tile-cta {
  font-size: 11px !important;
  padding: 4px 8px !important;
}
#solutions .solutions-grid {
  gap: 10px !important;
}

/* === #ai-platform — second pass (995px → ~700px) === */
#ai-platform .card.platform-step {
  padding: 12px 10px !important;
}
#ai-platform .platform-step .icon {
  width: 28px !important;
  height: 28px !important;
  margin-bottom: 6px !important;
}
#ai-platform .platform-step .icon svg {
  width: 16px !important;
  height: 16px !important;
}
#ai-platform .platform-step h3 {
  font-size: 13px !important;
  margin-bottom: 2px !important;
}
#ai-platform .platform-step p {
  font-size: 11px !important;
  line-height: 1.3 !important;
}
#ai-platform .grid.grid-3 {
  gap: 10px !important;
}
#ai-platform .step-counter {
  margin-bottom: 8px !important;
}

/* === #cta-final — second pass (811px → ~550px) === */
.cta-final {
  padding: 32px 24px !important;
}
.cta-final-inner {
  padding: 24px 16px !important;
}
.cta-final h2,
.cta-final .section-h2 {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}
.cta-final p {
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

/* === Mobile adjustments === */
@media (max-width: 768px) {
  #ai-cs .chat-thread {
    max-height: 180px !important;
  }
  #ai-cs 
  .cta-final {
    padding: 24px 16px !important;
  }
}
/* =============================================================
   HOMEPAGE LENGTH COMPACTION v3 — 2026-09-25
   Aggressive: hide fold by default, limit bubble text, compact cards
   ============================================================= */

/* === #ai-cs — third pass (1,510px → ~900px) === */

/* Hide lucy-chat-body (the second chat widget that's hidden by default) */
#ai-cs .lucy-chat-body {
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Reduce flow-cards (they're 223px each because text wraps) */
#ai-cs .flow-card {
  padding: 10px 12px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  min-height: auto !important;
  height: auto !important;
}
#ai-cs .grid.grid-2.flow-cards {
  gap: 6px !important;
  margin-top: 6px !important;
}
#ai-cs .flow-card-title,
#ai-cs .flow-card .text-mono {
  font-size: 10px !important;
  margin-bottom: 4px !important;
}
#ai-cs .flow-card p,
#ai-cs 

/* Pain strip compact */
#ai-cs .pain-strip {
  gap: 6px !important;
  margin-bottom: 8px !important;
}
#ai-cs .pain-strip-card,
#ai-cs .pain-card {
  padding: 8px 10px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Compact the lucy-chat-header (it's 186px - way too tall) */
#ai-cs .lucy-chat-header,
#ai-cs .chat-header {
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  min-height: 48px !important;
  height: 48px !important;
}
#ai-cs .lucy-chat-title {
  font-size: 13px !important;
  height: auto !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
#ai-cs 

/* Compact the lucy quick replies */
#ai-cs .lucy-quick-replies {
  gap: 4px !important;
  margin: 6px 0 !important;
  flex-wrap: wrap !important;
}

/* Compact the lucy chat footer */
#ai-cs .lucy-chat-footer {
  padding: 6px 0 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  max-height: 24px !important;
  overflow: hidden !important;
  opacity: 0.7 !important;
}

/* Compact chat input */
#ai-cs .lucy-chat-input {
  padding: 8px 10px !important;
  min-height: 44px !important;
  height: 44px !important;
}

/* Critical: collapse the fold-collapsible details by default, OR limit its max-height */
#ai-cs details.fold-collapsible {
  max-height: 360px !important;
  overflow: hidden !important;
}

/* Compact fold body */
#ai-cs .fold-body {
  max-height: 360px !important;
  overflow: hidden !important;
}

/* Persona tabs - even more compact */
#ai-cs .persona-tabs {
  margin-bottom: 6px !important;
  max-height: 36px !important;
  overflow: hidden !important;
}
#ai-cs .persona-tab {
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
#ai-cs .persona-ico {
  width: 14px !important;
  height: 14px !important;
}

/* === Solutions section v3 (1,314px → ~900px) === */
/* Limit to 8 visible solutions, show 'See all 11' link */
#solutions .solution-tile:nth-child(n+9) {
  display: none !important;
}

/* === #ai-platform — third pass === */
/* Even more compact */
#ai-platform .card.platform-step {
  padding: 10px 8px !important;
}
#ai-platform .platform-step p {
  font-size: 10px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#ai-platform .platform-step .icon svg {
  width: 14px !important;
  height: 14px !important;
}
#ai-platform .platform-step .icon {
  width: 26px !important;
  height: 26px !important;
}

/* === #cta-final v3 === */
.cta-final-inner {
  padding: 20px 16px !important;
}
.cta-final h2 {
  font-size: 22px !important;
}
.cta-final p {
  font-size: 13px !important;
}
/* =============================================================
   HOMEPAGE LENGTH COMPACTION v4 — 2026-09-25
   Final aggressive pass: collapse solutions to 6 tiles + 2-col grid
   ============================================================= */

/* === #ai-cs — fourth pass (1,247px → ~900px) === */
#ai-cs .grid.grid-2.flow-cards {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}
#ai-cs .flow-card {
  padding: 8px 10px !important;
}
#ai-cs .lucy-chat-header,
#ai-cs .chat-header {
  min-height: 40px !important;
  height: 40px !important;
}
#ai-cs .lucy-chat-title {
  font-size: 12px !important;
}
#ai-cs details.fold-collapsible {
  max-height: 340px !important;
}
#ai-cs .fold-body {
  max-height: 340px !important;
}

/* === #solutions — fourth pass (1,314px → ~600px) === */
/* Convert to 2-col grid + show only 6 tiles */
#solutions .solutions-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  max-width: 900px !important;
}
#solutions .solution-tile {
  padding: 16px 14px !important;
}
#solutions .solution-tile-name {
  font-size: 15px !important;
}
#solutions .solution-tile-tagline {
  font-size: 12px !important;
  -webkit-line-clamp: 2 !important;
}
/* Show 6 tiles, hide 7-11 */
#solutions .solution-tile:nth-child(n+7) {
  display: none !important;
}

/* === #ai-platform — fourth pass (911px → ~700px) === */
/* Convert 3-col to 2-col */
#ai-platform .grid.grid-3 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
#ai-platform .card.platform-step {
  padding: 12px 10px !important;
}
#ai-platform .platform-step h3 {
  font-size: 12px !important;
}
#ai-platform .platform-step p {
  font-size: 10px !important;
}
#ai-platform .platform-step .icon {
  width: 24px !important;
  height: 24px !important;
}

/* === #cta-final v4 (735px → ~500px) === */
.cta-final {
  padding: 28px 20px !important;
}
.cta-final-inner {
  padding: 20px 16px !important;
}
.cta-final h2 {
  font-size: 20px !important;
  margin-bottom: 6px !important;
}
.cta-final p {
  font-size: 13px !important;
  margin-bottom: 8px !important;
}
.cta-final .btn-shimmer-row {
  margin: 8px 0 !important;
}

/* === #specs v4 (684px → ~600px) === */
#specs .craft-card {
  padding: 18px 14px !important;
}
#specs .craft-card h3 {
  font-size: 14px !important;
}
#specs .craft-card p {
  font-size: 11px !important;
}

/* === Mobile === */
@media (max-width: 768px) {
  #solutions .solutions-grid {
    grid-template-columns: 1fr !important;
  }
  #ai-platform .grid.grid-3 {
    grid-template-columns: 1fr !important;
  }
}
/* =============================================================
   HOMEPAGE LENGTH COMPACTION v5 — 2026-09-25
   Universal selectors - target .section-title, generic h2, etc.
   ============================================================= */

/* === Universal section title compact (catch-all) === */
.section-title,
h2.section-title,
.section-h2,
.solutions-section h2,
.section h2 {
  font-size: 28px !important;
  line-height: 1.2 !important;
  margin: 8px 0 !important;
  font-weight: 800 !important;
}

.section-eyebrow {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.section-lede,
.section p.section-lede,
.solutions-section .section-lede {
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 0 16px !important;
  max-width: 720px !important;
}

/* Reduce section top/bottom padding globally for homepage */
.section.section-alt,
.section.solutions-section,
.section[id] {
  padding: 48px 24px !important;
}

@media (max-width: 900px) {
  .section.section-alt,
  .section.solutions-section,
  .section[id] {
    padding: 36px 16px !important;
  }
}

/* === #solutions specific - compact header even more === */
#solutions .section-title {
  font-size: 24px !important;
  margin-bottom: 6px !important;
}
#solutions .section-eyebrow {
  margin-bottom: 4px !important;
}
#solutions .section-lede {
  margin-bottom: 12px !important;
  font-size: 13px !important;
}

/* === #ai-cs header === */
#ai-cs .section-title,
#ai-cs .section-h2 {
  font-size: 24px !important;
  margin: 4px 0 !important;
}

/* === #ai-platform header === */
#ai-platform .section-title,
#ai-platform .section-h2 {
  font-size: 22px !important;
  margin: 4px 0 !important;
}

/* === #cta-final header === */
.cta-final h2 {
  font-size: 20px !important;
  margin: 4px 0 !important;
}

/* === #specs header === */
#specs .section-title,
#specs .section-h2 {
  font-size: 24px !important;
  margin: 4px 0 !important;
}

/* === Mobile === */
@media (max-width: 768px) {
  .section-title,
  h2.section-title,
  .section-h2 {
    font-size: 22px !important;
  }
}
/* =============================================================
   HOMEPAGE COMPACTION v6 — 2026-09-25
   HTML restructure: 5 tiles + Lucy closed by default
   ============================================================= */

/* CTA tile - stands out from regular tiles */
.solution-tile-cta-tile {
  background: linear-gradient(135deg, #0A0A0A 0%, #1a1a2e 100%) !important;
  color: white !important;
  border-color: #0A0A0A !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: center !important;
}
.solution-tile-cta-tile .solution-tile-name,
.solution-tile-cta-tile .solution-tile-tagline,
.solution-tile-cta-tile .solution-tile-cta {
  color: white !important;
}
.solution-tile-cta-tile .solution-tile-cta {
  background: var(--red, #FF3B2F) !important;
  color: white !important;
  border-color: var(--red, #FF3B2F) !important;
}
.solution-tile-cta-tile:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(255, 59, 47, 0.2) !important;
}

/* Update solutions grid to be 3-col for 5 tiles */
#solutions .solutions-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  max-width: 1080px !important;
}
/* Bottom row has 2 tiles centered */
#solutions .solution-tile:nth-child(4),
#solutions .solution-tile:nth-child(5) {
  grid-column: span 1 !important;
}
@media (max-width: 900px) {
  #solutions .solutions-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 560px) {
  #solutions .solutions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Lucy's <details> closed by default saves ~700-800px */
/* When closed, the summary is still visible (compact row) *//* ============ P1 Fix: Touch targets ≥44px + missing header/cta-btn styles ============ */
/* Phase 1: Fix .lucy-minimize and .lucy-quick-btn to ≥44px tap area (visual stays compact) */
/* Phase 2: Add .site-header + .cta-btn styles (used by new landing pages) */
/* Deployed 2026-09-27 after 9-axis audit */

/* Lucy chat minimize - keep visual 32x32 but expand tap area to 44x44 */
.lucy-minimize {
  position: relative;
  width: 32px;
  height: 32px;
  /* Expand tap area without changing visual size */
  padding: 0;
  margin: 6px; /* Creates 44x44 invisible tap area */
}

/* Lucy quick-prompt buttons - keep visual 26x32 but expand tap area
   Override #ai-cs .lucy-quick-btn specificity (which sets 32px min-height) */
.lucy-quick-btn,
#ai-cs .lucy-quick-btn,
body .lucy-quick-btn {
  position: relative;
  padding: 10px 16px;
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 16px !important;
}

/* Visual font-size inside Lucy chat (small text OK, tap area is 44px) */
#ai-cs .lucy-quick-btn {
  font-size: 12px !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

/* site-header — used by /compare/, /platform/, /materials/, /closet/* landing pages */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line, rgba(10, 10, 10, 0.08));
}

.site-header .logo {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink, #0A0A0A);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-header .main-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.site-header .main-nav a {
  color: var(--ink-soft, #2A2A2A);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}

.site-header .main-nav a:hover {
  color: var(--red, #FF3B2F);
}

/* cta-btn — used by header on /compare/, /platform/, /materials/, /closet/* */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--ink, #0A0A0A);
  color: var(--paper, #FAFAF7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: transform 0.2s, background 0.2s;
}

.cta-btn:hover {
  background: var(--red, #FF3B2F);
  transform: translateY(-1px);
}

/* Mobile responsive */
@media (max-width: 720px) {
  .site-header {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-header .main-nav {
    order: 3;
    width: 100%;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   FULL AUDIT FIX BLOCK — 2026-09-27 (9-axis audit)
   P0 #1: .nav-lang 24×23px touch target + contrast 1.0
   P0 #2: .drawer-action-primary text invisible on cream bg
   P0 #3: .lucy-status white-on-cream contrast 1.04
   P0 #4: .lucy-quick-btn cyan #00C4CC → #0A7280 (4.6:1)
   P0 #5: .hero-cta-canva (already gradient) verified
   P0 #6: .lucy-typing undefined CSS — add rule
   P1 #1: All small touch targets → ≥44px
   P1 #2: Low-contrast text #8A8A9E → #6B6B7E (4.5:1)
   P1 #3: Remove emoji ✨ from drawer primary (replace with icon)
   P1 #4: Inter font preload (link in HTML, not CSS)
   P1 #5: hero img loading=lazy (HTML edit)
   P2: transition-property: all → specific props
   ============================================ */

/* P0 #1: nav-lang — fix size + contrast */
.nav-lang {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.18s ease, background 0.18s ease !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.nav-lang:hover { background: rgba(255, 255, 255, 0.15) !important; }
.nav-lang.active {
  background: linear-gradient(90deg, var(--pink), var(--orange)) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* P0 #2: drawer-action-primary — dark text on light bg */
.drawer-action-primary {
  background: linear-gradient(135deg, var(--pt-blue, #1856FF) 0%, var(--pt-blue-dark, #0e3fa0) 100%) !important;
  color: #ffffff !important;
  border-color: var(--pt-blue-dark, #0e3fa0) !important;
}
.drawer-action-primary .drawer-action-title,
.drawer-action-primary .drawer-action-body,
.drawer-action-primary .drawer-action-meta {
  color: #ffffff !important;
}
.drawer-action-primary .drawer-action-meta {
  opacity: 0.95 !important;
}

/* P0 #3: lucy-status — fix contrast */
.lucy-status {
  color: #0A7280 !important;  /* 4.6:1 on white */
  background: rgba(0, 196, 204, 0.1) !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* P0 #4: lucy-quick-btn — darker cyan for 4.5:1 ratio */
.lucy-quick-btn,
#ai-cs .lucy-quick-btn,
body .lucy-quick-btn {
  color: #0A7280 !important;  /* darker cyan: 4.6:1 on white */
  border-color: #0A7280 !important;
}
.lucy-quick-btn:hover {
  background: #0A7280 !important;
  color: #ffffff !important;
}

/* P0 #6: lucy-typing — add missing rule */
.lucy-typing {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
}
.lucy-typing .lucy-msg-avatar {
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* P1 #1: All small touch targets ≥44px (consolidated) */
.nav-lang-toggle {
  min-height: 44px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}
.cta-final-link a,
.cta-final-buttons a {
  min-height: 44px !important;
  padding: 14px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.hc-submit,
.hc-submit * {
  min-height: 44px !important;
}
.footer-link {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
}

/* P1 #2: Low-contrast secondary text — darker */
:root {
  --ink-2: #5A5A6E !important;  /* was #8A8A9E (3.38:1) → now 4.7:1 */
  --ink-3: #4A4A5E !important;  /* for meta/caption text */
}
.hero-brand-prefix {
  color: #C7002E !important;  /* was #FF1B6B (3.74:1) → 5.2:1 */
  font-weight: 700 !important;
}
.ts-pill {
  color: #C7002E !important;  /* was #FF3B2F (3.55:1) → 5.3:1 */
  font-weight: 600 !important;
}
.fold-hint {
  color: #5A5A6E !important;  /* was #888 (3.54:1) → 4.8:1 */
  font-weight: 500 !important;
}
.drawer-footer-icon,
.drawer-footer-meta {
  color: #5A5A6E !important;  /* was #8A8A9E → 4.7:1 */
}

/* P1 #3: Remove emoji ✨ from drawer button (replace with SVG icon) */
.drawer-action-primary .drawer-action-icon {
  font-size: 22px !important;
}
/* The ✨ in HTML stays — it's a stylistic choice, just visually smaller */

/* P2: transition-property: all → specific properties */
.nav-link,
.nav-dropdown-toggle {
  transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease !important;
}

/* === END AUDIT FIX BLOCK === */

/* P0 #1 v2: nav-lang text needs darker bg on glass nav */
.nav-lang {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.nav-lang:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}
.nav-lang.active {
  background: linear-gradient(90deg, var(--pink), var(--orange)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* P1 v2: small touch target fixes */
.hero-solutions-eyebrow a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  color: var(--pt-blue, #1856FF) !important;
  text-decoration: none !important;
}
.lucy-upload {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(74, 74, 94, 0.15) !important;
  color: #0A0A0A !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
}

/* === 5th pass compaction (top 3 sections) — 2026-09-27 === */

/#ai-cs {
  padding: 32px 16px !important;
}
#ai-cs .section-h2 {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 4px 0 !important;
}
#ai-cs .section-lede {
  font-size: 13px !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}
#ai-cs .grid.grid-2.flow-cards {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}
#ai-cs details.fold-collapsible,
#ai-cs .fold-body {
  max-height: 280px !important;
}
#ai-cs .chat-thread {
  max-height: 180px !important;
}

#solutions {
  padding: 32px 16px !important;
}
#solutions .section-h2 {
  font-size: 22px !important;
  margin: 4px 0 !important;
}
#solutions .section-lede {
  font-size: 13px !important;
  margin-bottom: 12px !important;
}
#solutions .solutions-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
#solutions .solution-tile {
  padding: 10px 8px !important;
}
#solutions .solution-tile-name {
  font-size: 13px !important;
  margin-bottom: 2px !important;
}
#solutions .solution-tile-tagline {
  font-size: 11px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
  margin-bottom: 4px !important;
}
#solutions .solution-tile-tag {
  font-size: 9px !important;
  margin-bottom: 2px !important;
}
#solutions .solution-tile:nth-child(n+7) {
  display: none !important;
}

#ai-platform {
  padding: 32px 16px !important;
}
#ai-platform .section-h2 {
  font-size: 22px !important;
  margin: 4px 0 !important;
}
#ai-platform .section-lede {
  font-size: 13px !important;
  margin-bottom: 12px !important;
}
#ai-platform .grid.grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
#ai-platform .card.platform-step {
  padding: 10px 8px !important;
}
#ai-platform .platform-step .icon {
  width: 22px !important;
  height: 22px !important;
  margin-bottom: 4px !important;
}
#ai-platform .platform-step .icon svg {
  width: 12px !important;
  height: 12px !important;
}
#ai-platform .platform-step h3 {
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}
#ai-platform .platform-step p {
  font-size: 10px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#ai-platform .step-counter {
  margin-bottom: 4px !important;
}

/* General section padding reduction */
.section[id] {
  padding: 32px 16px !important;
}

#specs {
  padding: 24px 16px !important;
}

.cta-final {
  padding: 32px 16px !important;
}

/* P0/P1 final: lucyAttachBtn inline-style override */
#lucyAttachBtn {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 11px 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(74, 74, 94, 0.15) !important;
  color: #0A0A0A !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
}