:root{--navy:#15233d;--ink:#19273f;--muted:#647189;--line:#dde5ef;--purple:#7950ed;--teal:#18a8bb;--soft:#f5f8fc;--paper:#fff;--max:1140px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.84 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}button,a{touch-action:manipulation}a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}.skip{position:absolute;top:-90px;left:15px;background:#fff;color:var(--ink);padding:8px 16px;z-index:200}.skip:focus{top:8px}
header{z-index:30;position:sticky;top:0;backdrop-filter:blur(15px);background:rgba(255,255,255,.94);border-bottom:1px solid #e9eef6}
.header-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:12px;align-items:center;font-size:18px;font-weight:840;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}.brand img{width:43px;height:43px;border-radius:12px}.nav{display:flex;gap:clamp(12px,2vw,26px);align-items:center}.nav>a{font-size:13px;font-weight:700;text-decoration:none;color:#46556d;white-space:nowrap}.nav>a:hover{color:var(--purple)}
.btn{display:inline-flex;gap:9px;align-items:center;justify-content:center;min-height:52px;padding:11px 23px;border-radius:999px;border:1px solid var(--line);font-size:15px;font-weight:830;text-decoration:none;transition:transform .2s,box-shadow .2s;color:var(--navy);background:#fff;text-align:center}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px #14213a12}.btn.primary{color:#fff;background:var(--navy);border-color:var(--navy)}.btn.white{background:#fff;color:#2f37a9;border-color:#fff}.btn.small{min-height:40px;padding:6px 19px;font-size:13px}
.hero{background:radial-gradient(ellipse at 82% 28%,rgba(129,89,251,.14),transparent 48%),linear-gradient(180deg,#f6f6ff 0%,#f8fdff 74%,#fff);padding:78px 0 102px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(34px,5vw,76px)}.eyebrow{font-size:12px;letter-spacing:.10em;color:#6355cb;font-weight:860}.eyebrow .line{display:inline-block;width:20px;height:2px;margin:0 8px 3px 0;background:linear-gradient(90deg,var(--purple),var(--teal))}.hero h1{margin:20px 0 21px;line-height:1.2;font-size:clamp(36px,4.55vw,65px);letter-spacing:-.064em;font-weight:900}.hero h1 em{font-style:normal;color:#7655d9}.hero-intro{max-width:620px;color:#465571;font-size:clamp(17px,1.6vw,20px);line-height:1.92}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:28px}.minor{font-size:12px;color:#6a7890;margin:14px 0 0}.metric-strip{display:flex;gap:12px 22px;flex-wrap:wrap;margin-top:24px;color:#42506c;font-size:12px;font-weight:700}.metric-strip span:before{content:"✓";display:inline-block;margin-right:6px;color:#258f91}
.demo{position:relative;background:#182440;border-radius:24px;box-shadow:0 35px 90px #22244638;padding:12px;border:1px solid #5b627c}.demo-window{border:1px solid #3b4f6d;border-radius:15px;background:#101b31;overflow:hidden;min-height:368px}.demo-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #3d4760;background:#1c2944;color:#a7b3cb;font-size:12px}.traffic{display:flex;gap:7px}.traffic span{height:9px;width:9px;border-radius:50%;background:#63718a}.traffic span:first-child{background:#ee817e}.traffic span:nth-child(2){background:#eabc68}.traffic span:nth-child(3){background:#79bd91}.speaker-grid{display:flex;align-items:center;justify-content:center;gap:19px;padding:28px 12px 22px}.avatar{width:99px;height:99px;border-radius:25px;background:linear-gradient(145deg,#525bb1,#386779);display:grid;place-items:center;color:#fff;font-size:30px;font-weight:900;box-shadow:0 9px 20px #0002}.avatar.second{background:linear-gradient(145deg,#457d91,#7870b5)}.speaker{color:#b3c3d4;text-align:center;font-size:12px}.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:30px;padding:0 0 14px}.wave i{display:block;width:3px;background:#9f9af6;height:12px;border-radius:3px}.wave i:nth-child(2n){height:24px}.wave i:nth-child(3n){height:17px}.subtitle{margin:8px 15px 22px;border-radius:14px;border:1px solid #8294b877;background:linear-gradient(130deg,#22314fec,#222d48fb);padding:16px 20px;box-shadow:0 8px 24px #0003}.subtitle .subtitle-kicker{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;color:#aca9ff;margin:0 0 7px}.subtitle-kicker img{height:23px;width:23px;border-radius:7px}.subtitle p{color:#fff;font-size:clamp(15px,1.4vw,18px);line-height:1.7;margin:0;font-weight:760}.demo-caption{margin:12px 0 0;color:#66748c;text-align:center;font-size:11px}
section{padding:92px 0}.section-soft{background:var(--soft)}.kicker{font-size:12px;color:#6c5dd0;font-weight:850;letter-spacing:.09em}.section-title{font-size:clamp(30px,3.5vw,47px);line-height:1.29;letter-spacing:-.045em;margin:12px 0 20px;font-weight:860}.section-lead{max-width:820px;color:#506078;font-size:17px}.intro-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,6vw,85px);align-items:center}.quote-panel{border-radius:28px;background:linear-gradient(140deg,#212d57,#5043ad 70%,#467f9f);padding:clamp(29px,4vw,48px);color:#fff;box-shadow:0 18px 40px #25295c22}.quote-panel strong{font-size:clamp(29px,3vw,40px);line-height:1.45;letter-spacing:-.04em;display:block}.quote-panel small{font-size:14px;color:#cbdaf0;display:block;margin-top:19px}.body-copy p{color:#51617b;margin:0 0 16px}.body-copy b{color:var(--navy)}
.scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px}.scene{border:1px solid var(--line);background:#fff;border-radius:23px;padding:28px}.scene-num{font-size:12px;letter-spacing:.11em;font-weight:850;color:#7762da}.scene h3{font-size:21px;line-height:1.5;margin:10px 0 11px;letter-spacing:-.03em}.scene p{color:#637189;font-size:14px;line-height:1.86}.note{font-size:12px;color:#748097;line-height:1.7}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.speed-copy>p:not(.note){color:#54637d;font-size:16px;line-height:1.85;margin:0 0 15px}.speed-copy>p.section-lead{font-size:17px;color:#445470}.speed-copy>p.speed-key{font-weight:820;color:#243a67;margin:22px 0 14px}
.understanding-panel{border-radius:26px;background:linear-gradient(145deg,#171f3c,#29365a);padding:clamp(22px,3vw,34px);border:1px solid #475577;color:#fff;box-shadow:0 20px 45px #1723452e}
.understanding-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#b7c4db;font-weight:700;letter-spacing:.045em}
.understanding-live{display:inline-flex;align-items:center;gap:9px;color:#c0b7ff}.live-dot{height:8px;width:8px;border-radius:50%;background:#96b9ff;box-shadow:0 0 0 4px #96b9ff21}
.speech-lines{display:flex;gap:6px;align-items:center;justify-content:center;height:115px}.speech-lines span{width:5px;height:23px;border-radius:12px;background:linear-gradient(#9aa7ff,#67cbd4)}.speech-lines span:nth-child(2n){height:47px}.speech-lines span:nth-child(3n){height:67px}.speech-lines span:nth-child(5n){height:37px}.speech-lines span:nth-child(7n){height:84px}
.understanding-arrow{text-align:center;font-size:22px;color:#b8b4ff;line-height:1.1;margin:-8px 0 15px}
.understanding-subtitle{padding:24px;background:#343e62;border:1px solid #6f7ca0;border-radius:16px;display:grid;gap:9px;box-shadow:0 10px 22px #0002}
.understanding-subtitle span{font-size:12px;color:#d1c7ff;font-weight:800;letter-spacing:.05em}.understanding-subtitle strong{font-size:clamp(17px,1.7vw,21px);line-height:1.8;font-weight:780;letter-spacing:-.02em}
.understanding-note{font-size:11px;line-height:1.7;margin:17px 0 0;color:#b4c4da}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:33px}.step{padding:28px;background:#fff;border:1px solid var(--line);border-radius:22px}.step-icon{display:grid;place-items:center;width:56px;height:56px;background:#eeebff;border-radius:15px;color:#614ed6;font-weight:900;font-size:17px;margin-bottom:17px}.step h3{margin:0 0 9px;font-size:20px}.step p{font-size:14px;color:#607087;margin:0}.hotkey{background:#17243d;color:#fff;padding:24px 28px;border-radius:20px;text-align:center;font-weight:760;font-size:clamp(22px,3vw,32px);margin-top:30px;letter-spacing:.01em}.hotkey kbd{display:inline-block;padding:4px 16px;margin:0 6px;border:1px solid #8f9bb0;border-radius:11px;background:#394966;box-shadow:0 4px #0c1528;font-family:inherit}
.feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:32px}.feature{background:#fff;padding:30px;border:1px solid var(--line);border-radius:22px}.feature h3{margin:0 0 10px;font-size:23px}.feature p{color:#586881;margin:0;font-size:15px}.platforms{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}.platforms span{border:1px solid #cdd7e7;padding:7px 15px;background:#fff;border-radius:999px;font-size:13px;font-weight:800;color:#405171}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:34px 0}.price{padding:30px;border:1px solid var(--line);border-radius:23px;background:#fff}.price.featured{border-color:#8a6ad7;box-shadow:0 14px 33px #7d67b522}.price h3{font-size:20px;margin:0 0 14px}.amount{font-size:clamp(33px,3.7vw,43px);font-weight:900;letter-spacing:-.05em;white-space:nowrap;line-height:1.25}.amount small{font-weight:600;font-size:13px;color:#63718b;letter-spacing:0}.price p{font-size:14px;color:#61718a}.price-cta{margin-top:20px}
.exclusions{border:1px solid #d7e5ec;border-radius:23px;background:linear-gradient(120deg,#eff8fb,#f6f7ff);padding:clamp(24px,4vw,45px)}.exclusions h2{margin:0 0 14px;font-size:clamp(25px,3vw,36px)}.exclusions p{color:#57677d;max-width:850px}.conclusion{background:linear-gradient(125deg,#242955,#624ad2 65%,#2c829a);color:white;text-align:center;padding:94px 0}.conclusion h2{font-size:clamp(34px,4.2vw,53px);letter-spacing:-.045em;line-height:1.38;margin:14px 0}.conclusion p{color:#e3defa;font-size:17px}.footer{background:#0e1930;color:#b0bed2;padding:36px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:12px}.footer a{color:#dce9fd;text-decoration:none}.footer-links{display:flex;gap:15px;flex-wrap:wrap}
@media(max-width:950px){.hero-grid,.intro-grid,.pillars{grid-template-columns:1fr}.hero{padding-top:62px}.hero-copy{max-width:760px}.demo{max-width:680px}.scenes{grid-template-columns:1fr}.scenes .scene{padding:25px}.steps{gap:12px}.nav a:not(.btn){display:none}}
@media(max-width:700px){section{padding:65px 0}.wrap{width:calc(100% - 36px)}.header-inner{height:64px}.brand{font-size:16px}.brand img{height:38px;width:38px}.nav{gap:6px}.nav .btn{min-height:40px;padding:6px 12px;font-size:12px}.hero{padding:48px 0 76px}.hero h1{font-size:clamp(33px,9vw,48px)}.hero-intro{font-size:16px}.hero-actions .btn{width:100%}.demo-window{min-height:310px}.speaker-grid{padding:18px 12px;gap:13px}.avatar{width:72px;height:72px;border-radius:19px}.subtitle{padding:13px}.steps,.pricing-grid,.feature-list{grid-template-columns:1fr}.hotkey{padding:22px 10px;font-size:20px}.hotkey kbd{padding:3px 8px}.section-lead{font-size:16px}.quote-panel strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* KoeSub: show subtitle on the user's Mac while excluding it from supported captures */
.share-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:34px 0 17px}
.share-panel{min-width:0;background:#f7f9fe;border:1px solid #dce4f0;border-radius:24px;padding:clamp(13px,2vw,22px)}
.share-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;font-weight:800;color:#263450}
.share-status{border-radius:99px;padding:4px 11px;font-size:12px;white-space:nowrap}.caption-on{color:#4e3aaf;background:#e9e2ff}.caption-off{color:#266977;background:#e0f5f5}
.share-monitor{overflow:hidden;border-radius:15px;background:#19243d;border:1px solid #313e5b;box-shadow:0 13px 20px #1f32541b}
.share-toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px 12px;background:#253450;color:#b7c6e0;font-size:10px}
.share-dots{color:#96a4c6;font-size:10px;letter-spacing:3px}
.share-slide{background:#fff;min-height:184px;padding:25px clamp(15px,3vw,32px) 10px;color:#263951;display:flex;flex-direction:column;gap:7px}
.share-slide-tag{color:#7870d6;letter-spacing:.1em;font-weight:850;font-size:10px}
.share-slide strong{font-size:clamp(18px,2vw,28px);font-weight:870;line-height:1.3;letter-spacing:-.03em}
.share-slide-bars{display:flex;align-items:flex-end;gap:8px;height:62px;margin-top:10px}.share-slide-bars i{width:21px;border-radius:4px 4px 0 0;background:#d8dcfa;height:35px}
.share-slide-bars i:nth-child(2){height:48px;background:#b4c4f8}.share-slide-bars i:nth-child(3){height:27px;background:#cab4f6}.share-slide-bars i:nth-child(4){height:60px;background:#7e88dc}
.share-subtitle{display:grid;gap:3px;background:#323b59;padding:10px 16px;min-height:75px;color:#fff;font-size:13px;line-height:1.5;font-weight:740}
.share-subtitle-kicker{font-size:10px;color:#beb8fa;font-weight:800}
.share-empty{display:flex;align-items:center;justify-content:center;min-height:75px;background:#e9edf7;color:#5a6983;font-size:12px;font-weight:750}
.share-panel-note{font-size:13px;color:#62728c;font-weight:700;text-align:center;margin:13px 0 0}
.share-notice{max-width:900px}
@media(max-width:700px){.share-preview{grid-template-columns:1fr;gap:16px}.share-panel{max-width:560px;width:100%;margin:0 auto}.share-slide{min-height:155px;padding-top:20px}.share-slide strong{font-size:24px}.share-slide-bars{height:48px}.share-slide-bars i:nth-child(4){height:47px}}

/* KoeSub Japanese line-wrap refinement: preserve original copy and visual identity */
.hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,3.75vw,48px);
}
.hero h1,.section-title,.scene h3{text-wrap:balance}
.hero h1 em{white-space:nowrap}
.intro-grid{
  grid-template-columns:minmax(0,1.09fr) minmax(0,.91fr);
  gap:clamp(28px,3.75vw,52px);
}
.quote-panel strong{
  font-size:clamp(28px,2.65vw,36px);
  text-wrap:balance;
}
.scene h3 .keep-phrase{white-space:nowrap}
.scene strong{display:block;text-wrap:balance;line-height:1.65}
@media(max-width:950px){
  .hero-grid,.intro-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .quote-panel{padding:clamp(22px,5vw,34px)}
  .quote-panel strong{font-size:clamp(21px,6.4vw,27px)}
}
@media(max-width:390px){
  #concept .section-title{font-size:clamp(24px,7.2vw,29px)}
}
@media(max-width:360px){
  .hero h1{font-size:clamp(29px,8.3vw,33px)}
}