/* /navy/wizpr.css */
/* WIZPR site — shared design system
   Layout: one quiet column (max 1120px) of light pages; demos sit on dark "stages" that mirror the app's own dark UI.
   Teal = dictation, Violet = AI command, Amber = hold/pending — the same color meanings as the product capsule. */
:root{
  --bg:#FFFFFF; --bg-2:#F4F6F7; --bg-3:#E9EDEF; --fg:#141618; --fg-2:#5D646B; --fg-3:#8A9198; --line:#E3E7EA; --line-2:#D3D9DD;
  --teal:#15D2CC; --teal-ink:#0C9E99; --teal-soft:#DDF8F6; --teal-deep:#0B2E2D;
  --violet:#8B6CFF; --violet-ink:#6A4BE0; --violet-soft:#ECE6FF;
  --amber:#F2A93B; --amber-soft:#FFF1D6;
  --stage:#1B1C1F; --stage-2:#242426; --stage-3:#2E3034; --stage-fg:#F3F4F6; --stage-fg-2:#A7ACB3; --stage-line:#34363B;
  --win-blue:#1E66D0; --shadow:0 10px 30px rgba(20,22,24,.10);
  --font-display:'Manrope','Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-body:'Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px; --radius-s:8px; --maxw:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F11; --bg-2:#16181B; --bg-3:#1E2024; --fg:#F1F2F4; --fg-2:#A5AAB1; --fg-3:#767C84; --line:#272A2F; --line-2:#33373D;
    --teal-ink:#2FE3DD; --teal-soft:#0F2F2E; --violet-ink:#A48CFF; --violet-soft:#241E3F; --amber-soft:#3A2C12;
    --stage:#141518; --stage-2:#1F2023; --stage-3:#2A2C30; --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F11; --bg-2:#16181B; --bg-3:#1E2024; --fg:#F1F2F4; --fg-2:#A5AAB1; --fg-3:#767C84; --line:#272A2F; --line-2:#33373D;
  --teal-ink:#2FE3DD; --teal-soft:#0F2F2E; --violet-ink:#A48CFF; --violet-soft:#241E3F; --amber-soft:#3A2C12;
  --stage:#141518; --stage-2:#1F2023; --stage-3:#2A2C30; --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap-n{max-width:760px}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:.06em}
.brand .dot{width:14px;height:14px;border-radius:50%;border:4px solid var(--teal);box-sizing:border-box}
.brand small{font-weight:600;letter-spacing:0;color:var(--fg-3);font-size:13px;margin-left:2px}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--fg-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg);background:var(--bg-2)}
.nav-cta{margin-left:4px}
.nav-toggle{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--bg);align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--fg);box-shadow:0 -6px 0 var(--fg),0 6px 0 var(--fg)}
@media (max-width:860px){
  .nav .wrap{gap:12px}
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-left,0px)) 16px;gap:2px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 10px;font-size:16px}
  .nav-cta{margin:8px 0 0}
}

/* ---------- buttons / chips / keys ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--teal);color:#07201F;border-color:var(--teal)}
.btn-primary:hover{background:#12C2BD}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-dark{background:var(--fg);color:var(--bg)}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--fg-2)}
.chip.on{background:var(--teal-soft);color:var(--teal-ink);border-color:transparent}
.key{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:500;padding:2px 7px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg);box-shadow:0 1.5px 0 var(--line-2);line-height:1.5;vertical-align:middle;color:var(--fg)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.eyebrow.violet{color:var(--violet-ink)}
.eyebrow.muted{color:var(--fg-3)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.badge-teal{background:var(--teal-soft);color:var(--teal-ink)}
.badge-violet{background:var(--violet-soft);color:var(--violet-ink)}
.badge-amber{background:var(--amber-soft);color:#8A5A0B}
.badge-line{border:1px solid var(--line-2);color:var(--fg-2)}

/* ---------- sections / type ---------- */
.section{padding-block:clamp(56px,8vw,104px)}
.section.tight{padding-block:clamp(36px,5vw,64px)}
.section.alt{background:var(--bg-2)}
.section-head{display:grid;gap:14px;max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}
h1.display{font-size:clamp(36px,6vw,64px);line-height:1.08;font-weight:800;letter-spacing:-.025em}
h2.title{font-size:clamp(26px,3.6vw,40px);line-height:1.18;font-weight:800;letter-spacing:-.02em}
h3.sub{font-size:19px;font-weight:700;line-height:1.35}
.lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--fg-2);line-height:1.7;max-width:62ch}
.small{font-size:13.5px;color:var(--fg-3)}
.muted{color:var(--fg-2)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums}

/* ---------- grids / cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
.card.soft{background:var(--bg-2);border-color:transparent}
.card h3{font-size:18px;font-weight:700}
.card p{color:var(--fg-2);font-size:15px}
.card .foot{margin-top:auto}
.card .badge,.card .eyebrow,.card .chip{justify-self:start}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:28px;font-size:15px;color:var(--fg-2)}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--teal-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4.5 9.5l3 3 6-7' fill='none' stroke='%230C9E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat}
.checks li b{color:var(--fg);font-weight:600}
.checks.x li::before{background:var(--bg-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M6 6l6 6M12 6l-6 6' fill='none' stroke='%238A9198' stroke-width='2' stroke-linecap='round'/></svg>") center/14px no-repeat}
.ph{border:1.5px dashed var(--line-2);border-radius:var(--radius);background:var(--bg-2);display:grid;place-items:center;text-align:center;color:var(--fg-3);font-size:13.5px;padding:18px;min-height:160px;gap:6px}
.ph b{color:var(--fg-2);font-weight:600}
.ph svg{width:22px;height:22px;opacity:.6}
.band{background:var(--stage);color:var(--stage-fg)}
.band .lead,.band .muted{color:var(--stage-fg-2)}
.band .eyebrow{color:var(--teal)}
.band .checks li{color:var(--stage-fg-2)}
.band .checks li b{color:var(--stage-fg)}
.band .checks li::before{background-color:rgba(21,210,204,.18)}
figure{margin:0}
figcaption{font-size:13px;color:var(--fg-3);margin-top:10px;line-height:1.5}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- stage (dark demo surface) ---------- */
.stage{position:relative;background:var(--stage);color:var(--stage-fg);border-radius:18px;overflow:hidden;border:1px solid var(--stage-line);box-shadow:var(--shadow)}
.stage .win{background:var(--stage-2);border:1px solid var(--stage-line);border-radius:12px;overflow:hidden}
.stage .win-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--stage-line);font-size:12px;color:var(--stage-fg-2)}
.stage .win-bar i{width:10px;height:10px;border-radius:50%;background:var(--stage-3);display:inline-block}
.stage .field{position:relative;background:var(--stage-3);border:1px solid var(--stage-line);border-radius:10px;padding:12px 14px;min-height:48px;font-size:15.5px;line-height:1.55;color:var(--stage-fg)}
.stage .field.on{border-color:var(--teal);box-shadow:0 0 0 3px rgba(21,210,204,.18)}
.stage .field .plc{color:var(--stage-fg-2);opacity:.6}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--teal);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hl{background:rgba(21,210,204,.22);border-bottom:2px solid var(--teal);border-radius:2px;padding:0 1px}
.hl-v{background:rgba(139,108,255,.25);outline:1.5px solid var(--violet);outline-offset:1px;border-radius:3px}

/* capsule — the floating voice-input UI (dual-cell, A안) */
.capsule{position:absolute;display:inline-flex;align-items:stretch;height:40px;background:#242426;color:#F3F4F6;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:3;max-width:min(360px,80%)}
.capsule.show{opacity:1;transform:translateY(0)}
.capsule .cell{width:40px;flex:none;display:grid;place-items:center;background:#3A3C42;transition:background .2s}
.capsule.live .cell{background:var(--teal)}
.capsule.cmd .cell{background:var(--violet)}
.capsule .txt{display:flex;align-items:center;padding:0 14px 0 12px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.capsule .txt:empty{display:none}
.capsule .txt .dim{color:#A7ACB3}
.capsule.static{position:relative;opacity:1;transform:none}
/* glyphs */
.g-bars{display:flex;align-items:center;gap:2px;height:16px}
.g-bars i{width:3px;border-radius:2px;background:#8A9198;height:5px;transition:background .2s}
.live .g-bars i,.g-bars.live i{background:#07201F;animation:eq .9s ease-in-out infinite}
.g-bars.on i{background:var(--teal)}
.g-bars i:nth-child(1){animation-delay:0s}.g-bars i:nth-child(2){animation-delay:.15s}.g-bars i:nth-child(3){animation-delay:.3s}.g-bars i:nth-child(4){animation-delay:.1s}.g-bars i:nth-child(5){animation-delay:.25s}
@keyframes eq{0%,100%{height:5px}50%{height:15px}}
.g-ring{position:relative;width:16px;height:16px;border-radius:50%;border:3.5px solid #8A9198;box-sizing:border-box}
.g-ring.on{border-color:var(--teal)}
.g-ring.on::before,.g-ring.on::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--teal);opacity:0;animation:ripple 1.6s ease-out infinite}
.g-ring.on::after{animation-delay:.8s}
.g-ring.on.dark{border-color:#07201F}
.g-ring.on.dark::before,.g-ring.on.dark::after{border-color:#07201F}
@keyframes ripple{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.g-check,.g-spark{width:16px;height:16px}
.capsule .cell svg{width:16px;height:16px;display:block}
/* cursor */
.cur{position:absolute;width:22px;height:26px;z-index:5;pointer-events:none;transition:left .55s cubic-bezier(.5,.1,.3,1),top .55s cubic-bezier(.5,.1,.3,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));left:70%;top:30%}
.cur svg{width:22px;height:26px}
.cur::after{content:"";position:absolute;left:-9px;top:-9px;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--teal);opacity:0;transform:scale(.6)}
.cur.press::after{opacity:1;transform:scale(1);transition:transform .15s,opacity .15s}
.cur.press.v::after{border-color:var(--violet)}
.cur.click::after{animation:clickring .45s ease-out}
@keyframes clickring{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}
.cur.hold-note::before{content:attr(data-note);position:absolute;left:20px;top:22px;font-size:11px;font-weight:600;color:#07201F;background:var(--teal);padding:2px 7px;border-radius:5px;white-space:nowrap}
.cur.hold-note.v::before{background:var(--violet);color:#fff}
/* step pill (correction navigator) */
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 8px;background:#242426;color:#F3F4F6;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:14px;font-weight:500;white-space:nowrap}
.pill .arr{color:#A7ACB3;font-size:16px;padding:0 4px}
.pill .src{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;font-size:10px;font-weight:700;background:#4E5560;color:#fff;line-height:1}
.pill .src.ai{background:#6A4BE0}.pill .src.pr{background:#0C9E99}.pill .src.fx{background:#2C5E66}
.pill .enter{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#07201F;display:grid;place-items:center;font-size:13px}
.pill .x{color:#A7ACB3;padding:0 6px}
/* badge-y timeline bars */
.tl{display:grid;gap:10px}
.tl .row{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;font-size:13.5px}
.tl .lane{position:relative;height:28px;background:var(--stage-3);border-radius:6px;overflow:hidden}
.tl .seg{position:absolute;top:4px;bottom:4px;border-radius:4px;font-size:11.5px;font-weight:600;display:flex;align-items:center;padding:0 8px;color:#07201F;white-space:nowrap}
.tl .axis{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--stage-fg-2);padding-left:122px}
@media (max-width:600px){.tl .row{grid-template-columns:1fr;gap:4px}.tl .axis{padding-left:0}}

/* ---------- illustrations (illus.js) ---------- */
.il{display:block;width:100%;min-width:0}
.il-stage{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:18px;overflow:hidden;background:var(--stage);border:1px solid var(--stage-line);box-shadow:var(--shadow)}
.il-stage .il,.pic .il{height:100%}
.il-svg{width:100%;height:100%;display:block}
.il-svg image{image-rendering:auto}
.il-rise{animation:il-rise 6s ease-in-out infinite}
@keyframes il-rise{0%,10%{transform:translate(var(--dx),var(--dy))}24%,76%{transform:translate(0,0)}90%,100%{transform:translate(var(--dx),var(--dy))}}
.il-near{opacity:0;animation:il-near 6s linear infinite}
@keyframes il-near{0%,25%{opacity:0}31%,74%{opacity:1}80%,100%{opacity:0}}
.il-on{opacity:1}
.il-w1,.il-w2,.il-w3{animation:il-wave 1.2s ease-out infinite}
.il-w2{animation-delay:.2s}.il-w3{animation-delay:.4s}
@keyframes il-wave{0%{opacity:0;transform:translateX(4px)}30%{opacity:1}100%{opacity:0;transform:translateX(-6px)}}
.il-rp{transform-box:fill-box;transform-origin:center;animation:il-rp 1.6s ease-out infinite}
.il-rp2{animation-delay:.8s}
@keyframes il-rp{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.il-far{animation:il-far 3.2s linear infinite}
.il-far2{animation-delay:1.6s}
@keyframes il-far{0%{transform:translateX(0);opacity:0}15%{opacity:1}70%{opacity:.9;transform:translateX(calc(var(--to) - 24px))}86%,100%{opacity:0;transform:translateX(var(--to))}}
.il-faceon{animation:il-faceon 7s linear infinite}
.il-faceoff{animation:il-faceoff 7s linear infinite}
@keyframes il-faceon{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@keyframes il-faceoff{0%,44%{opacity:0}50%,94%{opacity:1}100%{opacity:0}}
.il-talk{animation:il-talk .5s steps(1,end) infinite}
@keyframes il-talk{0%,55%{opacity:1}56%,100%{opacity:0}}
.il-alt{position:relative;width:100%;height:100%}
.il-alt>div{position:absolute;inset:0}
.il-alt .il-a{animation:il-alta 12s linear infinite}
.il-alt .il-b{animation:il-altb 12s linear infinite}
@keyframes il-alta{0%,47%{opacity:1}51%,97%{opacity:0}100%{opacity:1}}
@keyframes il-altb{0%,47%{opacity:0}51%,97%{opacity:1}100%{opacity:0}}
/* three states (phone → watch → ring), 6 s each = one rise cycle per state */
.il-alt3 .il-a{animation:il-alt3a 18s linear infinite}
.il-alt3 .il-b{animation:il-alt3b 18s linear infinite}
.il-alt3 .il-c{animation:il-alt3c 18s linear infinite}
@keyframes il-alt3a{0%,31%{opacity:1}34%,97%{opacity:0}100%{opacity:1}}
@keyframes il-alt3b{0%,31%{opacity:0}34%,64%{opacity:1}67%,100%{opacity:0}}
@keyframes il-alt3c{0%,64%{opacity:0}67%,97%{opacity:1}100%{opacity:0}}
/* Point-to-Talk card: GUI window + hand on the mouse; the button lights while the field is held */
.pt-wrap{display:flex;gap:14px;height:100%;align-items:stretch}
.pt-wrap .gui{flex:1;min-width:0}
.gui-hand{position:relative;flex:none;width:36%;min-width:88px}
.gui-hand img{position:absolute;left:0;right:0;bottom:0;width:100%;display:block}
.gui-hand .press{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;opacity:0;transition:opacity .2s}
.gui-hand .press .il-rp{animation-duration:1.2s}
.pt-wrap:has(.gui-field.on) .gui-hand .press{opacity:1}
.gui-hand .lbl{position:absolute;left:0;top:0;font-size:10.5px;color:var(--stage-fg-2);white-space:nowrap}
/* scenes whose captions are driven by JS start their CSS cycle only with .play, so both stay in step */
.synced .il-rise{animation:none;transform:translate(var(--dx),var(--dy))}
.synced.play .il-rise{animation:il-rise 6s ease-in-out infinite}
.synced .il-near{animation:none;opacity:0}
.synced.play .il-near{animation:il-near 6s linear infinite}
@media (prefers-reduced-motion: reduce){
  .il-rise,.synced .il-rise{transform:none!important;animation:none!important}
  .il-near,.synced .il-near{opacity:1!important;animation:none!important}
  .il-faceoff,.il-alt .il-b,.il-alt .il-c{display:none}
  .il-alt .il-a{animation:none!important;opacity:1!important}
  .gui-hand .press{opacity:1}
  .il-talk{animation:none!important;opacity:1!important}
  .il-far{opacity:.6!important;transform:translateX(calc(var(--to) - 40px))!important}
}
/* mini GUI window (Point-to-Talk) */
.gui{position:relative;background:var(--stage-2);border:1px solid var(--stage-line);border-radius:10px;font-size:11px;height:100%;display:flex;flex-direction:column;color:var(--stage-fg);text-align:left}
.gui-bar{display:flex;align-items:center;gap:5px;padding:6px 8px;border-bottom:1px solid var(--stage-line);color:var(--stage-fg-2);font-size:10px}
.gui-bar i{width:7px;height:7px;border-radius:50%;background:var(--stage-3)}
.gui-body{display:flex;flex:1;min-height:0}
.gui-side{width:38px;border-right:1px solid var(--stage-line);padding:8px 6px;display:grid;gap:6px;align-content:start}
.gui-side b{display:block;height:6px;border-radius:3px;background:var(--stage-3)}
.gui-side b:first-child{background:var(--teal);opacity:.7}
.gui-main{flex:1;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.gui-msg{height:14px;border-radius:7px;background:var(--stage-3);width:70%}
.gui-msg.s{width:45%}
.gui-field{position:relative;margin-top:auto;background:var(--stage-3);border:1px solid var(--stage-line);border-radius:7px;padding:6px 8px;min-height:28px;font-size:11.5px;color:var(--stage-fg);line-height:1.3;white-space:nowrap;overflow:visible}
.gui-field.on{border-color:var(--teal);box-shadow:0 0 0 2px rgba(21,210,204,.18)}
.gui-plc{color:var(--stage-fg-2);opacity:.6}
.gui-t{display:inline-block;max-width:calc(100% - 6px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:bottom}
.gui-cap{left:6px;top:-34px;height:28px;font-size:11px;border-radius:9px;max-width:none}
.gui-cap .cell{width:28px}
.gui-cap .cell svg{width:12px;height:12px}
.gui-cap .txt{padding:0 10px 0 8px}
.gui-cap .g-bars{height:12px}.gui-cap .g-bars i{width:2px}
.gui-cur{left:60%;top:30%;width:16px;height:19px}
.gui-cur svg{width:16px;height:19px}
.gui-cur::after{left:-7px;top:-7px;width:22px;height:22px}
.gui-cur.hold-note::before{font-size:9px;left:14px;top:16px;padding:1px 5px}

/* ---------- pricing ---------- */
.seg-tabs{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px}
.seg-tabs button{border:0;background:transparent;padding:8px 14px;border-radius:9px;font-weight:600;font-size:14px;color:var(--fg-2);cursor:pointer}
.seg-tabs button[aria-selected="true"]{background:var(--bg);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg-tabs.teal button[aria-selected="true"]{background:var(--teal);color:#07201F}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:860px){.plans{grid-template-columns:1fr}}
.plan{position:relative;border:1px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.plan.rec{border-color:var(--teal);box-shadow:0 0 0 3px rgba(21,210,204,.15)}
.plan .tag{position:absolute;top:-12px;left:22px}
.plan .name{font-weight:700;font-size:16px;color:var(--fg-2)}
.plan .price{font-family:var(--font-display);font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.plan .price small{font-size:16px;font-weight:600;color:var(--fg-2);letter-spacing:0;margin-right:4px}
.plan .per{font-size:13px;color:var(--fg-3);min-height:20px}
.plan .checks{margin-top:4px}
.plan .btn{margin-top:auto}
.notes{font-size:13.5px;color:var(--fg-2);background:var(--bg-2);border-radius:12px;padding:16px 18px;display:grid;gap:6px;line-height:1.6}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 4px;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:22px;color:var(--fg-3);line-height:1;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 20px;color:var(--fg-2);font-size:15px;max-width:70ch}
.faq .a p+p{margin-top:8px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:40px 60px;font-size:13.5px;color:var(--fg-3)}
.footer .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start;justify-content:space-between}
.footer .cols{display:flex;flex-wrap:wrap;gap:12px 28px}
.footer a:hover{color:var(--fg)}
.footer .legal{width:100%;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- misc ---------- */
.cta-band{background:var(--teal-deep);color:#F3F4F6;padding-block:clamp(56px,8vw,96px);text-align:center}
.cta-band h2{color:#fff;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.02em}
.cta-band p{color:#BFEFEC;margin-top:12px}
.cta-band .btn-primary{margin-top:28px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:600;color:var(--fg-2);font-size:13px;letter-spacing:.02em}
.tbl-wrap{overflow-x:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:70}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* /navy/navy-theme.css */

:root{--bg:#fff;--bg-2:#f4f6f9;--fg:#151c2b;--teal:#18c8cc;--teal-ink:#008e98;--line:#dce2eb}.nav{background:#fffffff5}.hero,.ring-hero{background:#171b24!important;color:#f6f8fb!important}.hero .display,.ring-hero .display{color:#f6f8fb}.hero .lead,.ring-hero .lead{color:#afb7c4!important}.hero .eyebrow,.ring-hero .eyebrow{color:#18c8cc!important}.hero .soft-em{color:#18c8cc}.hero .soft-scene,.hero .ring-motion-illustration{filter:invert(1) hue-rotate(170deg)}.hero .soft-scene image,.ring-motion-illustration image{mix-blend-mode:multiply}.hero .hero-hand{filter:invert(1) hue-rotate(170deg)}.soft-figure,.tech-grid .fig,.scenes .pic,.how .fig{background:#fff!important}.scenes .pic img,.option-card img{mix-blend-mode:multiply}.theme-switch{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;gap:4px;background:#fff;border:1px solid #ccd3df;border-radius:30px;padding:5px;box-shadow:0 5px 20px #101b3320;font-size:12px}.theme-switch a{padding:8px 13px;border-radius:24px;color:#263344;text-decoration:none}.theme-switch a.active{background:#171b24;color:white}
.ring-hero .ring-motion-illustration{filter:invert(1) hue-rotate(170deg)}.ring-motion-illustration image{mix-blend-mode:normal}.ring-hero .badge-line{color:#cad4df!important;border-color:#596675}.ring-live-card{box-shadow:7px 8px 0 #0d111b}.hero .soft-hero{filter:invert(1) hue-rotate(170deg)}.hero .soft-hero .soft-scene{filter:none}
/* Explicit dark-surface illustration palette, without whole-scene inversion. */
.hero .soft-hero,.hero .soft-scene,.hero .hero-hand,.ring-hero .ring-motion-illustration,.hero .ring-motion-illustration{filter:none!important}
.hero .soft-scene [fill="#ffffff"],.hero .soft-scene [fill="#fff"],.hero .soft-scene [fill="#fffdf8"]{fill:#202936}
.hero .soft-scene [stroke="#151c2b"],.hero .soft-scene [stroke="#24333b"],.hero .soft-scene [stroke="#24343b"]{stroke:#dce6f1}
.hero .soft-scene text{fill:#c4d0df}.hero .soft-scene .wavebar{stroke:#18c8cc;fill:#18c8cc}
.ring-hero{--ring-scene-fill:#171b24}.ring-hero .ring-hand-occlusion{fill:#171b24!important}
.ring-hero .ring-approved-scene image{filter:none!important;mix-blend-mode:normal!important}
.ring-hero .ring-speech-arcs,.ring-hero .ring-mic-glow{stroke:#18c8cc!important}.ring-hero .ring-live-card{background:#202936;border-color:#3c4b5e;box-shadow:7px 8px 0 #11151e}.ring-hero .ring-live-text{color:#edf4fa}.ring-hero .ring-live-caption{color:#aab9ca}
.hero .btn-ghost{color:#e3ecf5!important;border-color:#637286!important}.hero .hero-note{color:#a9b6c7!important}

/* People blend into the hero background; devices retain their solid surface.
   An opaque background-matched fill hides device edges behind the hand. */
.hero{--illustration-human-fill:#171b24}
.hero .soft-scene .phone-hand > path[fill],
.hero .soft-scene .mouse-fingers .index-motion{
  fill:var(--illustration-human-fill)!important;
}

/* Neutralize the warm raster paper before compositing onto the CSS surface.
   White pixels multiply away, leaving the navy linework and mint accents. */
.scenes{--use-scene-background:#fff}
.scenes .pic{background:var(--use-scene-background)!important;isolation:isolate}
.scenes .pic .ring-use-scene{filter:brightness(1.06) contrast(1.04);mix-blend-mode:multiply}

/* Brand roles: teal = dictation, purple = right-click AI. */
:root,:root[data-theme="light"],:root[data-theme="dark"]{--teal:#18c8cc;--teal-ink:#008e98;--teal-soft:#def8f8;--violet:#a58bdc;--violet-ink:#7254b5;--violet-soft:#f1ecfb}
#point{--teal:#18c8cc;--violet:#a58bdc}
.hero-voice-wave i{background:#18c8cc!important;box-shadow:none}
.ai-sparkles{width:23px;height:23px;flex:0 0 23px;color:#a58bdc}
.capsule.cmd .cell{background:transparent!important;color:#a58bdc}
.capsule.cmd{border-color:#a58bdc80!important;background:#202936!important;color:#f6f8fb!important}
#point .badge-violet,.badge-violet{background:#f1ecfb!important;color:#7254b5!important;border-color:#d8c9ef!important}
#point .example-command{background:#f1ecfb;color:#7254b5}
#point .clean-mock:not([data-feature-demo="0"]),.clean-mock:not([data-feature-demo="0"]){--ui-accent:#a58bdc;--ui-select:#514565;--ui-bubble:#302b43}
.utterance-dot{width:22px;height:22px;border-radius:0;background:#a58bdc;clip-path:polygon(35% 28%,44% 52%,68% 61%,44% 70%,35% 94%,26% 70%,2% 61%,26% 52%,35% 28%,75% 0%,81% 17%,98% 23%,81% 29%,75% 46%,69% 29%,52% 23%,69% 17%)}

/* White/navy surfaces and pointer-attached correction capsules. */
.card.soft,#point .card.soft{background:#f4f6f9!important;border-color:#dce2eb!important}
.card.soft p{color:#687181}
#point .clean-mock[data-feature-demo="0"]{--ui-accent:#18c8cc;--ui-select:#254c58;--ui-bubble:#233b48}
.clean-mock .demo-feedback-slot>.demo-utterance{position:absolute;z-index:5;max-width:calc(100% - 20px);min-height:36px;background:#202936;border:1px solid var(--ui-accent);box-shadow:0 5px 15px #0003;pointer-events:none;align-self:auto;gap:7px}
.clean-mock .demo-utterance [data-feature-command]:empty{display:none}
.clean-mock .demo-utterance .wizpr-wave{color:#18c8cc;flex-shrink:0}
.clean-mock .demo-utterance .ai-sparkles{color:#a58bdc;flex-shrink:0}
.clean-mock[data-feature-demo="0"] .demo-result,.clean-mock[data-feature-demo="1"] .demo-result{display:none!important}
.clean-mock[data-feature-demo="2"] .demo-result{padding-top:12px}
#point .cmp{--amber:#ffffff;--amber-soft:#303947}
.face-status{color:#008e98!important}

/* Teal intensity hierarchy; keep text fully opaque for legibility. */
.noise-label{color:#687181}
.noise-target{color:#008e98!important}
.ring-static-speech{stroke:#18c8cc}
.ring-distance-circle{stroke:#18c8cc;stroke-opacity:.5}
.speed-panel.voice .speed-bottom{color:#afb7c4}

/* High-contrast neutral markers for start actions. */
#point .cmp .st.hand i,#point .cmp .st.hand.on i,#point .cmp .st.hand.now i{background:#ffffff;color:#151c2b;font-weight:800;font-style:normal}

/* Download cards use a light surface inside the dark hero. */
.hero .plat .card{background:#fff;color:#151c2b;border-color:#dce2eb}
.hero .plat .card h3{color:#151c2b;font-weight:800;font-size:20px;opacity:1}
.hero .plat .card .req,.hero .plat .card .small{color:#515e70}
.hero .plat .card .ico{color:#263449;background:#edf1f6}
.hero .plat .card .btn-primary{color:#102333}
.hero .plat .card .btn-dark{background:#151c2b;color:#fff}

/* Neutral app tiles and separate product/experimental status chips. */
.compat-app-icons>span{background:#f4f6f9!important;border-color:#dce2eb!important}
.chip.lab-chip{background:#f4f6f9;color:#515e70;border:1px solid #dce2eb}

/* Compact two-row footer; language control shares the legal row. */
.footer{padding-block:28px 24px}
.footer .wrap{gap:20px 28px;align-items:center}
.footer .wrap>div:first-child:not(.legal){display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer .wrap>div:first-child>p{margin:0!important}
.footer .cols{gap:10px 22px;align-items:center}
.footer .legal{align-items:center;gap:12px 24px;padding-top:16px}
.footer .legal>span:first-child{margin-right:auto}
.footer .site-language{width:auto;margin:0;padding:0;border:0;gap:8px;flex-wrap:nowrap;font-size:13px}
.footer .site-language label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.footer .site-language select{min-width:130px;padding:7px 28px 7px 10px;border-radius:8px;background:#fff;color:#151c2b}
@media(max-width:700px){.footer .wrap{gap:16px}.footer .cols{gap:10px 18px}.footer .legal>span:first-child{width:100%}.footer .site-language{margin-left:auto}.footer .site-language select{min-width:120px}.footer .legal{gap:12px}}

/* /i18n/locale.css */
.site-language{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 0 8px;border-top:1px solid var(--line,#dce2df);margin-top:24px;width:100%;grid-column:1/-1;font-size:14px}.site-language select{font:inherit;color:var(--fg,#24313a);background:var(--bg,#fff);border:1px solid var(--line,#c7d0d7);padding:10px 36px 10px 12px;border-radius:10px;max-width:100%;min-width:190px}.site-language select:focus-visible{outline:3px solid #13bdb8;outline-offset:3px}html:not([lang=ko]) h1{font-size:clamp(38px,4.6vw,72px);line-height:1.13;letter-spacing:-.04em;overflow-wrap:break-word}html:not([lang=ko]) h2{overflow-wrap:break-word}html:not([lang=ko]) .nav{gap:16px}html:not([lang=ko]) .btn{white-space:normal;text-align:center}html:not([lang=ko]) .sequence-caption{font-size:clamp(10px,1.1vw,15px)}html:not([lang=ko]) .direction-bar{flex-wrap:wrap}html:not([lang=ko]) .hero-copy{min-width:0}html:not([lang=ko]) .ring-live-text{overflow-wrap:anywhere}@media(max-width:700px){html:not([lang=ko]) h1{font-size:clamp(34px,9vw,52px)}.site-language{justify-content:space-between}.site-language select{min-width:155px}}
html:not([lang=ko]) .app-phone[data-app=kakao] .app-conversation{background:#e6f0e9}html:not([lang=ko]) .app-phone[data-app=kakao] .app-chat-message{background:#d8f5c8;color:#263b2d!important}html[lang=ja] .app-phone[data-app=kakao] .app-conversation,html[lang=zh-Hant] .app-phone[data-app=kakao] .app-conversation{background:#dce8f4}

/* /navy/ui-polish.css */
/* Final responsive layout layer: shared rhythm and aligned controls. */
:root{--section-space:clamp(56px,8vw,96px);--heading-gap:14px;--fg:#151c2b;--fg-2:#687181;--fg-3:#7c8695;--line:#dce2eb;--bg-2:#f4f6f9;--teal-deep:#171b24}
html{scroll-padding-top:88px}
.section:not(.tight){padding-block:var(--section-space)}
.section-head{gap:var(--heading-gap)}
.eyebrow+h1,.eyebrow+h2{margin-top:var(--heading-gap)!important}
.section-head>.eyebrow+h1,.section-head>.eyebrow+h2{margin-top:0!important}
.voice-intro>.app-compatibility{margin-top:var(--section-space);padding-top:var(--section-space);gap:32px}
.app-compatibility h2{margin-top:var(--heading-gap);margin-bottom:14px}
.voice-intro .actions,.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.voice-intro .actions>.btn,.hero-actions>.btn{min-height:48px;min-width:190px;white-space:normal;text-align:center}
.voice-intro .actions>.btn{flex:1 1 190px}
.ux-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:520px;gap:6px}
.ux-tabs button{min-width:0;min-height:68px;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.4}
.ux-tabs button small{font-size:11px;line-height:1.5;margin-top:5px}
.app-chip-window{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;height:auto;overflow:visible}
.app-chip-window .chip{display:flex;justify-content:center;width:100%;min-width:0;height:auto;min-height:36px;padding:6px;font-size:12px;white-space:normal;text-align:center;overflow-wrap:anywhere}
.app-chip-window .chip:nth-child(n+17){display:none}
.mobile-near-note{margin-top:28px;padding:24px;border-top:1px solid var(--line);line-height:1.8;color:var(--fg-2)}
.mobile-near-note b{display:inline-block;margin-bottom:8px;color:var(--fg)}
.use-controls{display:flex;gap:12px;flex-shrink:0;align-items:center}
.use-controls button{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;padding:0;line-height:1;border:1px solid #cdd5e1;background:#fff;color:#151c2b;border-radius:50%}
.use-controls svg{width:24px;height:24px}
.pr-ctrl{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(170px,.8fr);gap:24px;align-items:start;margin:28px 0 32px;padding:24px;background:#f4f6f9;border:1px solid var(--line);border-radius:18px}
.pricing-choice{min-width:0}
.pricing-choice-heading{min-height:30px;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px;font-weight:600;color:#515e70}
.pricing-choice-heading .badge{font-size:11px;padding:3px 6px;letter-spacing:0;white-space:nowrap}
.pr-ctrl .seg-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0}
.pr-ctrl .seg-tabs button{min-width:0;min-height:44px;padding:9px 8px;white-space:normal;text-align:center;line-height:1.4;font-size:13px}
.pr-ctrl .choice-device .seg-tabs{grid-template-columns:1fr 1.6fr}
.footer{padding:32px 0}
/* Footer: a compact legal row with whole-link wrapping. */
.footer .legal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-top:18px;color:#59677b}
.footer .legal>span:first-child{margin:0 auto 0 0;width:auto;font-size:12px;line-height:1.7}
.footer .legal .footer-policy-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:12px;line-height:1.7}
.footer-policy-links a{white-space:nowrap;padding-block:4px}
.footer .legal .site-language{margin:0;display:flex;align-items:center;gap:0;flex-shrink:0}
.footer .site-language:before{content:none}
.footer .site-language select{width:140px;min-width:140px;max-width:100%;min-height:40px;border:1px solid #dce2eb;background:#fff;font:inherit;font-size:13px;color:#151c2b}
.nav{background:#fffffff5}
@media(max-width:860px){
 .nav-links{max-height:calc(100dvh - 64px);overflow-y:auto}
 .app-chip-window{grid-template-columns:repeat(4,minmax(0,1fr))}
 .app-chip-window .chip:nth-child(n+9){display:none}
 .pr-ctrl{grid-template-columns:1fr 1fr;gap:20px}
 .choice-device{grid-column:1 / -1}
}
@media(max-width:600px){
 .voice-intro .actions,.hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .voice-intro .actions>.btn,.hero-actions>.btn{min-width:0;width:100%;min-height:50px;padding:12px 10px;font-size:14px}
 .use-section-heading{display:grid;grid-template-columns:1fr;gap:20px}
 .use-controls{justify-self:end}
 .mobile-near-note{padding:24px 0 0;margin-top:24px}
 .footer .wrap{gap:20px}
 .footer .cols{gap:12px 20px}
 .footer .legal{gap:12px;align-items:flex-start}
 .footer .legal>span:first-child{width:100%}
 .footer .legal .footer-policy-links{width:100%;gap:6px 16px}
 .footer .legal .site-language{margin:4px 0 0}
 .pr-ctrl{padding:16px;gap:20px 12px;grid-template-columns:minmax(0,1fr) minmax(125px,.8fr)}
 .pricing-choice-heading{align-items:start;flex-direction:column;justify-content:start;min-height:48px;gap:4px}
 .choice-device .pricing-choice-heading{min-height:0}
 .pr-ctrl .seg-tabs button{padding:10px 6px;font-size:12px}
}
@media(max-width:360px){.app-chip-window{grid-template-columns:repeat(2,minmax(0,1fr))}.pr-ctrl{grid-template-columns:1fr}.choice-device{grid-column:auto}.pricing-choice-heading{min-height:0;flex-direction:row}.hero-actions,.voice-intro .actions{grid-template-columns:1fr}}

/* /navy/mac-guide.css */
.mac-guide{max-width:900px;margin:auto;padding:60px 24px 80px;color:#171e2c}.mac-guide h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.04em;line-height:1.2;margin:20px 0}.mac-guide .guide-lead{font-size:20px;line-height:1.7;color:#46546a;max-width:760px}.guide-spec{display:inline-block;background:#def8fa;border-radius:12px;padding:10px 16px;color:#006f7b;font-size:14px;font-weight:700}.guide-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.guide-date{font-size:13px;color:#637188}.guide-toc{display:grid;gap:12px;padding:24px;margin:32px 0 48px;background:#f3f5f9;border:1px solid #dce2eb;border-radius:18px}.guide-toc a{color:#344157;text-decoration:none}.mac-guide section{margin:0 0 40px;scroll-margin-top:110px}.mac-guide h2{font-size:25px;line-height:1.4;margin:0 0 18px}.mac-guide section p,.mac-guide section li{line-height:1.85;color:#46546a;font-size:17px}.mac-guide ol{padding-left:24px}.mac-guide li{margin-bottom:12px}.mac-guide blockquote{margin:24px 0;padding:18px 22px;border-left:3px solid #0098a5;background:#f0fbfc;line-height:1.9;color:#344157}.mac-guide details{padding:18px 0;border-bottom:1px solid #dce2eb}.mac-guide summary{font-weight:700;cursor:pointer;font-size:17px}.guide-sources{border-top:1px solid #dce2eb;padding-top:24px;display:flex;gap:16px;flex-wrap:wrap}.guide-sources a{font-size:14px;color:#007f8c;text-underline-offset:4px}@media(max-width:600px){.mac-guide{padding-top:32px}.mac-guide .guide-lead{font-size:17px}.mac-guide section p,.mac-guide section li{font-size:16px}.mac-guide h2{font-size:23px}.guide-spec{font-size:13px}.guide-toc{padding:18px}}

.nav .nav-links .nav-cta{color:#171e2c;font-weight:700}

/* Readable white/navy/teal text; accent fills remain unchanged. */
:root{--teal-ink:#00727c;--fg-3:#596579}
.eyebrow,.tech-label-row .en,.chip.on,.patent-chip,.badge-teal,.voice-intro-examples article>span{color:#00727c!important}
.eyebrow.muted,.intro-conditions,.footer,.footer p,.footer a{color:#596579!important}
.noise-target{color:#00727c!important}
.hero .eyebrow,.ring-hero .eyebrow,.band .eyebrow,.cta-band .eyebrow{color:#35d4db!important}
.nav .nav-links .nav-cta{color:#171e2c;font-weight:700}