/* Product experience for the homepage. All assets are local.
   Native controls and CSS work without the optional spotlight.js enhancement. */
.home { --wrap: 1220px; --ink: #f7f3fc; --quiet: #b1a9bc; --lilac: #cab0f3; --edge: #ffffff18; background: #0d0c12; color: var(--ink); }
.home::before,.home::after { display: none; }
.home section { padding: 0; scroll-margin-top: 100px; }
.home .section-space { padding: 110px 0; }
.home h1,.home h2,.home h3 { text-wrap: balance; }
.home h2 { font-size: clamp(2.4rem,4.5vw,3.75rem); line-height: 1.06; letter-spacing: -.055em; font-weight: 600; }
.home h2 em,.home .hero h1 em { font-family: Georgia,'Times New Roman',serif; font-style: italic; font-weight: 400; letter-spacing: -.055em; color: var(--lilac); background: none; -webkit-text-fill-color: currentColor; }
.home p { color: var(--quiet); }
.home .overline { display: inline-flex; align-items: center; gap: 10px; color: #c2b5d0; font-size: .64rem; letter-spacing: .13em; font-weight: 600; line-height: 1.8; }
.home .text-action { display: inline-flex; align-items: center; gap: 20px; color: var(--ink); font-size: .88rem; text-decoration: none; padding: 12px 0; border-bottom: 1px solid #ffffff35; }
.home .text-action:hover { color: var(--lilac); border-color: var(--lilac); }
.home .btn { gap: 12px; padding: 16px 25px; border-radius: 10px; background: #d3b9f7; color: #21172e; font-size: .9rem; box-shadow: inset 0 1px 0 #fff8,0 8px 28px -14px #c69fed99; }
.home .btn:hover { background: #e0cefa; box-shadow: 0 12px 35px -14px #c69fedbb; }
.home .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }
.home header { padding: 17px 0; }
.home header .wrap { min-height: 60px; gap: 20px; }
.home header .wrap::before { background: #121017db; border-color: #ffffff14; border-radius: 14px; box-shadow: 0 12px 35px -25px #000; backdrop-filter: blur(18px); }
.home header .brand { padding-left: 12px; }
.home header nav { gap: 8px; margin-inline: auto; }
.home header nav a { color: #bab2c5; font-size: .82rem; padding: 10px 12px; }
.home header .nav-install { padding: 11px 17px; margin-right: 9px; font-size: .82rem; border-radius: 8px; background: #e2d2f4; color: #24192f; gap: 14px; }
.home .hero { position: relative; isolation: isolate; overflow: clip; padding-top: 42px; animation: none; background: radial-gradient(ellipse at 85% 47%,#87669918,transparent 48%); }
.home .hero-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.9fr); align-items: center; gap: 64px; padding-block: 20px 66px; }
.home .hero-copy { text-align: left; }
.home .hero h1 { font-size: clamp(3rem,5.5vw,5.15rem); line-height: 1.02; letter-spacing: -.06em; margin-top: 25px; font-weight: 650; }
.status-light { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #cab0f3; box-shadow: 0 0 0 4px #cab0f312; }
.home .hero-description { font-size: 1.04rem; line-height: 1.85; max-width: 440px; margin: 26px 0 30px; }
.home .hero-note { font-size: .73rem; margin-top: 21px; color: #a59bad; }
.hero-note > span { padding: 0 5px; }
.hero-footnote { display: flex; align-items: center; gap: 18px; margin-top: 43px; padding-top: 23px; border-top: 1px solid var(--edge); max-width: 460px; }
.hero-footnote .small-symbol { color: var(--lilac); font-size: 25px; }
.home .hero-footnote p { font-size: .72rem; line-height: 1.8; color: #a69aae; }
.product-stage { position: relative; isolation: isolate; padding: 15px 40px 0; width: 100%; max-width: 465px; margin: auto; }
.phone-shell { position: relative; background: #26222d; padding: 8px; border: 1px solid #cab5e34a; border-radius: 23px; box-shadow: inset 0 1px 0 #fff3,0 40px 60px -26px #000c; }
.phone-shell video { display: block; width: 100%; height: auto; aspect-ratio: 480/848; border-radius: 16px; background: #15111c; }
.product-stage figcaption { color: #b2a5c1; font-size: .6rem; text-align: center; margin: 18px -30px 0; line-height: 1.8; }
.caption-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #cfb2f2; vertical-align: middle; margin-right: 5px; }
.stage-orbit { position: absolute; pointer-events: none; z-index: -1; border: 1px solid #c7a8e51a; border-radius: 50%; width: 100%; height: 65%; top: 16%; left: 0; transform: rotate(-30deg); }
.orbit-b { transform: rotate(27deg); height: 87%; top: 5%; width: 90%; left: 5%; }
.voice-bubble { position: absolute; z-index: 2; top: -6px; left: -8px; padding: 13px 18px; width: 162px; border: 1px solid #d5bfeb30; border-radius: 12px; background: #201a28; box-shadow: 0 15px 30px #0005; transform: rotate(-6deg); pointer-events: none; }
.bubble-label { font-size: .45rem; letter-spacing: .11em; color: #cbb5e0; display: block; margin-bottom: 7px; }
.sound-wave { height: 29px; display: flex; align-items: center; gap: 3px; }
.sound-wave span { width: 3px; height: 23px; border-radius: 2px; background: #ceb0f2; transform: scaleY(.4); }
.sound-wave span:nth-child(3n) { height: 14px; }.sound-wave span:nth-child(4n) { height: 29px; }
.script-bubble { position: absolute; right: -7px; bottom: 99px; display: flex; flex-wrap: wrap; justify-content: center; width: 150px; gap: 12px; padding: 14px; border: 1px solid #d9c4f139; border-radius: 12px; background: #221b2bdc; box-shadow: 0 15px 30px #0006; transform: rotate(7deg); pointer-events: none; }
.script-bubble > span { font-size: 1.45rem; color: #dfc9f6; }.script-bubble small { width: 100%; text-align: center; color: #beaccd; font-size: .54rem; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px; border-top: 1px solid var(--edge); }
.hero-bottom > span { color: #a99ab6; font-size: .56rem; letter-spacing: .13em; }
.hero-bottom > a { color: #d2bfdc; font-size: .69rem; text-decoration: none; }
.motion-control { display: flex; align-items: center; gap: 7px; color: #b7a8c4; font-size: .62rem; }
.motion-control input { appearance: none; width: 13px; height: 13px; border: 1px solid #c7a4f175; border-radius: 3px; background: #21162f; cursor: pointer; }
.motion-control input:checked { background: #bb86fc; box-shadow: inset 0 0 0 3px #21162f; }
.motion-control label { cursor: pointer; padding: 8px 0; }
.motion-off { display: none; }#pause-motion:checked + label .motion-on { display: none; }#pause-motion:checked + label .motion-off { display: inline; }
.home:has(#pause-motion:checked) *, .home:has(#pause-motion:checked) *::before, .home:has(#pause-motion:checked) *::after { animation-play-state: paused !important; }
.home:has(#pause-motion:checked) .translation-result > span { clip-path: none; animation: none; }
.language-ribbon { overflow: hidden; padding: 26px 0; background: #17121e; border-block: 1px solid #ffffff08; mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.ribbon-track { width: max-content; display: flex; align-items: center; gap: 43px; padding-right: 43px; }
.ribbon-track > span { font-size: 1.25rem; color: #a996b8; white-space: nowrap; }.ribbon-track > i { font-style: normal; font-size: .6rem; color: #b196c9; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; margin-bottom: 45px; }
.section-heading h2 { margin-top: 16px; }.section-heading > p { max-width: 280px; font-size: .9rem; line-height: 1.8; padding-bottom: 3px; }
.feature-composition { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 22px; }
.feature-card { padding: 30px; border: 1px solid var(--edge); border-radius: 17px; position: relative; overflow: hidden; background: #17131d; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #bfaccd; font-size: .58rem; letter-spacing: .13em; }
.card-top > span:last-child { font-size: 1.1rem; }
.translation-card { background: radial-gradient(ellipse at 50% 28%,#80539925,transparent 70%),#17121d; }
.translation-demo { margin: 48px 0; }
.translation-source { padding: 0 12px; }.translation-source small,.translation-result small { display: block; color: #b7a1c7; font-size: .56rem; letter-spacing: .08em; margin-bottom: 10px; }
.translation-source > span { color: #ede2f5; font-size: 1.2rem; letter-spacing: -.02em; }
.translation-bridge { display: flex; align-items: center; gap: 13px; margin: 22px 12px; font-size: .63rem; color: #a894b8; }.translation-bridge > span:first-child { font-size: 21px; color: #c8a6e7; }.translation-bridge i { height: 1px; flex: 1; background: #ffffff13; }
.translation-result { position: relative; background: #62437733; border: 1px solid #c6a0e64d; border-radius: 12px 12px 3px 12px; padding: 22px; }
.translation-result > span { display: block; font-size: 1.28rem; letter-spacing: -.02em; color: #e6d3f7; }.translation-result b { position: absolute; right: 18px; top: 15px; color: #d2b0f0; font-size: 14px; }
.home .illustration-label { display: block; color: #a995b8; font-size: .58rem; margin-top: 14px; }
.translation-demo .illustration-label { text-align: center; }
.home .feature-card h3 { font-size: 1.45rem; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; margin-bottom: 13px; }
.home .feature-card p { font-size: .88rem; line-height: 1.8; }
.feature-stack { display: grid; gap: 22px; }
.typed-card { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px 44px; align-items: center; }
.typed-card .card-top { margin-bottom: 22px; }
.typed-field,.typed-out { position: relative; border-radius: 12px; padding: 18px 20px; }.typed-field small,.typed-out small { display: block; color: #b7a1c7; font-size: .56rem; letter-spacing: .08em; margin-bottom: 9px; }
.typed-field { background: #ffffff06; border: 1px solid #ffffff0c; padding-right: 86px; }.typed-field > span { color: #ede2f5; font-size: 1.05rem; letter-spacing: -.02em; overflow-wrap: anywhere; }
.typed-field > b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 99px; background: #c2a1e31c; border: 1px solid #c6a0e64d; color: #d4b2f3; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.typed-out { margin-top: 14px; background: #62437733; border: 1px solid #c6a0e64d; border-radius: 12px 12px 3px 12px; }.typed-out > span { display: block; color: #e6d3f7; font-size: 1.15rem; letter-spacing: -.02em; }
.typed-demo .illustration-label { text-align: center; }
.tone-example { display: flex; align-items: center; gap: 12px; margin: 27px 0; font-size: .88rem; }.tone-example > span { background: #ffffff06; border: 1px solid #ffffff0c; padding: 10px 13px; border-radius: 8px; }.tone-example > span:last-child { background: #c2a1e31c; color: #d4b2f3; transform: rotate(-3deg); }.tone-example > i { font-style: normal; color: #b69ccc; }
.essentials-art { display: flex; gap: 13px; margin: 20px 0 27px; }.essentials-art > span { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 10px; background: #27202f; border: 1px solid #d1afe12a; color: #d4bce9; font-size: 1.4rem; box-shadow: 0 4px 0 #09060e; }.essentials-art > span:nth-child(2) { font-size: .7rem; font-weight: 600; }.essentials-art > span:nth-child(3) { transform: rotate(6deg); }
.film-details { margin-top: 28px; border-block: 1px solid var(--edge); scroll-margin-top: 110px; }
.film-details > summary { display: flex; align-items: center; gap: 22px; cursor: pointer; list-style: none; padding: 23px 0; }
.film-details > summary::-webkit-details-marker { display: none; }.film-play { width: 46px; height: 46px; border: 1px solid #b49bc840; border-radius: 50%; display: grid; place-items: center; color: var(--lilac); font-size: .7rem; }.film-details summary small { display: block; margin-top: 3px; font-size: .7rem; color: #a89ab6; }.film-expand { margin-left: auto; color: #c5abd8; font-size: 1.3rem; }.film-details[open] .film-expand { transform: rotate(45deg); }
.film-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); align-items: center; gap: 65px; padding: 40px; background: #141019; border-radius: 16px; margin-bottom: 26px; }.film-body h3 { font-size: 3rem; line-height: 1.07; letter-spacing: -.05em; margin: 20px 0; }.film-body p { font-size: .9rem; max-width: 370px; margin: 15px 0; }.film-body .fine { font-size: .73rem; }.film-body video { display: block; width: 100%; max-width: 320px; height: auto; margin: auto; border-radius: 16px; background: #0a0a16; border: 1px solid #ba98d735; }.film-transcript { margin-top: 15px; }.film-transcript summary { cursor: pointer; color: var(--lilac); font-size: .78rem; }.film-transcript p { font-size: .8rem; }
/* An intentionally lighter chapter creates a clear change of pace. */
.home .design-section { padding: 90px 0; background: #e6deec; color: #291d32; }
.design-layout { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 75px; }.design-copy h2 { margin: 17px 0 24px; }.home .design-copy h2 em { color: #76518c; }.home .design-copy .overline { color: #796384; }.home .design-copy p { color: #6e5b7c; font-size: 1rem; line-height: 1.8; max-width: 380px; }.design-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0; }.design-facts span { color: #6a5378; border: 1px solid #82609435; border-radius: 5px; padding: 6px 9px; font-size: .64rem; }.home .design-copy .text-action { color: #533660; border-color: #9171a44d; font-size: .8rem; }
.theme-playground,.language-browser { min-width: 0; border: 0; padding: 0; margin: 0; text-align: center; }
.theme-playground legend { width: 100%; font-size: .72rem; color: #725d7f; margin-bottom: 16px; text-align: center; }
.choice-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.theme-choice { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 999px; padding: 9px 10px; color: #6e5b7b; cursor: pointer; font-size: .68rem; margin: 0 2px; min-height: 40px; }
.theme-choice > span { width: 12px; height: 12px; border-radius: 50%; background: #ab8ac2; }.midnight-choice > span { background: #25212d; }.paper-choice > span { background: #fff; border: 1px solid #bca9c9; }
.choice-input:checked + label { border-color: #9676aa65; background: #ffffff50; color: #422b54; }.choice-input:focus-visible + label { outline: 2px solid #8660a0; outline-offset: 3px; }
.theme-preview { --board-bg:#b29bce;--key-bg:#d9caeb;--key-ink:#443253;--toolbar:#cbb6e1;--message:#efe7f7; border:1px solid #71508852; padding:18px 12px 15px; margin-top:25px; border-radius:17px;background:var(--board-bg);box-shadow:0 4px 0 #796187,0 25px 40px -20px #4a2b6670; transform: perspective(1300px) rotateX(9deg) rotateY(-7deg) rotateZ(2deg); color:var(--key-ink); transition:background .35s,color .35s; }
#theme-midnight:checked ~ .theme-preview { --board-bg:#201d28;--key-bg:#37313f;--key-ink:#e4d9ed;--toolbar:#2c2437;--message:#2a2432; }
#theme-paper:checked ~ .theme-preview { --board-bg:#dcd8e0;--key-bg:#fff;--key-ink:#514759;--toolbar:#eeebf2;--message:#faf7ff; }
.preview-message { display:flex;justify-content:space-between;align-items:center;background:var(--message);padding:20px 13px;margin:-5px 0 15px;border-radius:8px;font-size:.87rem;text-align:left; }.preview-message > i { color: #9265b2; font-style:normal; }
.preview-toolbar { display:flex;justify-content:space-around;align-items:center;padding:7px;background:var(--toolbar);border-radius:7px;font-size:1rem; }.preview-toolbar .preview-mic { background:#8f60b3;color:#e7d6f4;display:grid;place-items:center;width:34px;height:30px;border-radius:15px; }.preview-toolbar > span:nth-child(4) { font-size:.65rem; }
.preview-suggestions { display:flex;justify-content:space-around;padding:12px 8px;font-size:.64rem; }
.board-row { display:flex;justify-content:center;gap:5px;margin-bottom:6px; }.board-row > span { display:grid;place-items:center;width:9.2%;height:43px;background:var(--key-bg);color:var(--key-ink);border:1px solid #ffffff25;border-radius:5px;box-shadow:0 2px 0 #0002;font-size:.8rem;transition:background .35s,color .35s,transform .2s; }.board-row > span:hover { transform:translateY(-4px); }.board-last { margin-top:10px; }.board-last > span { width:14%;font-size:.67rem; }.board-last .board-space { width:52%; }
.home .theme-caption { color:#816a8f;font-size:.65rem;margin-top:27px;line-height:1.8; }
.language-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:90px;align-items:center; }.language-copy h2 { margin:18px 0 25px; }.language-copy > p { font-size:.98rem;line-height:1.9;max-width:400px; }.language-note { display:flex;align-items:center;gap:18px;margin:28px 0; }.language-note > span { font-size:2.5rem;color:#c6a2e6; }.home .language-note p { font-size:.76rem;line-height:1.85;color:#aa95b7; }
.language-browser legend { font-size:.66rem;color:#b69fc9;margin-bottom:17px;width:100%; }.language-browser > label { display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 12px;border:1px solid #ffffff14;border-radius:7px;font-size:.67rem;color:#bfaed0;cursor:pointer;margin:3px; }.language-browser > .choice-input:checked + label { background:#b68bda25;color:#e0c6f3;border-color:#c29ae666; }
.language-panels { margin:22px auto 0;max-width:295px;position:relative; }.language-panels > img { display:none;width:100%;height:auto;border:1px solid #c4a5dd3b;border-radius:16px;box-shadow:0 30px 50px -24px #000; }
#language-ml:checked ~ .language-panels .panel-ml,#language-ar:checked ~ .language-panels .panel-ar,#language-nordic:checked ~ .language-panels .panel-nordic { display:block; }
.language-details { margin-top:50px;border-block:1px solid var(--edge);scroll-margin-top:110px; }.language-details > summary { display:flex;justify-content:space-between;gap:20px;cursor:pointer;padding:22px 0;color:#d7bfeb;list-style:none;font-size:.86rem; }.language-details > summary::-webkit-details-marker { display:none; }.language-details[open] > summary > span { transform:rotate(45deg); }.home .language-details .section-note { font-size:.76rem;margin:20px 0;color:#b6a1c6; }.home .language-table { font-size:.8rem; }.home .language-table-wrap { background:#15101c;border-color:#c6a4db30; }
.home .privacy-section { padding:80px 0;background:#17131c;border-block:1px solid #ffffff0b; }
.privacy-layout { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:100px;align-items:center; }.privacy-symbol { position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:40px;isolation:isolate; }.privacy-symbol::before,.privacy-symbol::after { content:"";position:absolute;width:220px;height:220px;border:1px solid #c7a5df27;border-radius:50%;top:5px;z-index:-1; }.privacy-symbol::after { width:290px;height:290px;top:-30px;border-style:dashed;border-color:#c7a5df18; }.privacy-symbol > div { display:grid;place-items:center;width:115px;height:135px;border:1px solid #c5a1de60;background:linear-gradient(145deg,#493555,#211729);border-radius:30px 30px 50px 50px;color:#c5a1df;font-size:4rem;font-weight:500;box-shadow:0 20px 50px #0005,inset 0 1px 0 #fff2; }.privacy-symbol > span { font-size:.55rem;letter-spacing:.17em;color:#bca0ce; }.privacy-layout h2 { margin:16px 0 26px; }.privacy-points p { font-size:.86rem;line-height:1.85;margin-bottom:17px; }.privacy-points strong { color:#d6c4e3;font-weight:500; }
.center-heading { text-align:center;margin-bottom:45px; }.center-heading h2 { margin:18px 0; }.center-heading p { font-size:.92rem; }
.pricing-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:950px;margin:auto; }.price-card { padding:35px;border:1px solid #c8a6df28;border-radius:15px;background:#16111b; }.price-card h3 { font-size:2.2rem;letter-spacing:-.05em;font-weight:550;margin:25px 0 15px; }.price-card > p { font-size:.86rem;line-height:1.8; }.price-card ul { list-style:none;padding:24px 0;margin-bottom:10px; }.price-card li { padding:8px 0;color:#c8b5d5;font-size:.84rem; }.price-card li::before { content:"✓";margin-right:12px;color:#c5a6e0; }.voice-price { background:radial-gradient(ellipse at 90% 0,#8555a32b,transparent 65%),#1b1421; }.credit-number { display:flex;align-items:center;gap:20px;font-size:5rem;line-height:1.1;letter-spacing:-.08em;color:#dbc2ef;margin:18px 0; }.credit-number > span { font-size:.83rem;line-height:1.5;letter-spacing:0;color:#c1a7d2; }.credit-rule { border-block:1px solid #cba9e026;padding:17px 0;margin:23px 0; }.credit-rule strong { display:block;font-size:.82rem;color:#dac5e8;font-weight:500; }.credit-rule > span { display:block;margin-top:7px;font-size:.72rem;color:#b8a0ca; }.home .price-footnote { font-size:.75rem; }
.home .setup-section { padding:90px 0;background:#151019;border-block:1px solid #ffffff0b; }.setup-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;list-style:none; }.setup-steps li { border-top:1px solid #c6a4dd30;padding-top:22px; }.setup-steps li > span { color:#be9cd7;font-size:.7rem; }.setup-steps h3 { margin:22px 0 12px;font-size:1.12rem;font-weight:500;letter-spacing:-.03em; }.setup-steps p { font-size:.84rem;line-height:1.85; }.home .setup-help { font-size:.73rem;color:#af99bd;margin-top:35px; }
.faq-layout { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px; }.faq-layout h2 { margin:17px 0 27px; }.faq-layout > div:first-child p { font-size:.82rem;line-height:1.9; }.home .faq-list details { border-color:#c5a2dc25;padding:15px 0; }.home .faq-list summary { font-size:.91rem;font-weight:500; }.home .faq-list p { font-size:.82rem;line-height:1.85; }
.home .closing-section { position:relative;overflow:hidden;isolation:isolate;background:#c9b3da;padding:85px 0;color:#2c1f34; }.closing-inner { position:relative;z-index:1;text-align:center; }.home .closing-section .overline { color:#503c5c; }.home .closing-section h2 { font-size:clamp(3.5rem,7.4vw,6.4rem);font-weight:550;line-height:.98;margin:25px 0; }.home .closing-section h2 em { color:#765685; }.home .closing-section p { color:#503c5c;font-size:1rem;margin-bottom:28px; }.home .closing-section .btn { background:#2b1e34;color:#efddff;border:1px solid #573d68;box-shadow:0 8px 25px -12px #3d1a5380; }.closing-note { display:block;margin-top:22px;font-size:.65rem;color:#503c5c; }
.closing-letters { position:absolute;inset:0;z-index:0;pointer-events:none; }.closing-letters > span { position:absolute;display:grid;place-items:center;width:110px;height:120px;border:1px solid #6c4b8435;background:#a98bbb35;box-shadow:0 8px 0 #89659a16;border-radius:20px;color:#76578745;font-size:4rem;transform:rotate(-15deg); }.closing-letters > span:nth-child(1) { left:9%;top:17%; }.closing-letters > span:nth-child(2) { right:10%;top:60%;transform:rotate(15deg); }.closing-letters > span:nth-child(3) { left:16%;bottom:-30px;transform:rotate(13deg); }.closing-letters > span:nth-child(4) { right:17%;top:-40px;transform:rotate(-10deg); }
.home .site-footer { margin:0;padding:45px 0 24px;background:#0c0910; }.footer-top { display:flex;align-items:flex-start;gap:50px;padding-bottom:35px; }.footer-top .brand { margin-right:0; }.footer-top p { font-size:.76rem;line-height:1.8; }.footer-top > div { margin-left:auto;display:flex;flex-direction:column;gap:12px;font-size:.76rem; }.footer-top a { text-decoration:none; }.footer-bottom { display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #ffffff10;padding-top:21px; }.footer-bottom > span { font-size:.64rem;color:#9787a1; }.footer-bottom nav a { font-size:.66rem;padding:8px 0;margin-left:18px;color:#bca6cb; }
.home summary:focus-visible,.motion-control input:focus-visible { outline:2px solid #cba8e8;outline-offset:4px; }
/* Keep the spotlight behind content so links and text stay clear and clickable. */
.home .price-card { position:relative; isolation:isolate; overflow:hidden; }
.home .price-card::before {
 content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
 border-radius:inherit;
 background:radial-gradient(360px circle at var(--spotlight-x,50%) var(--spotlight-y,35%),#995bea40,transparent 75%);
 opacity:0; transition:opacity .2s ease;
}
.home .price-card:focus-within::before { opacity:1; }
/* See it work: real clips, each beside what it does and how to do it. */
.see-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.home .see-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: center; gap: 26px; padding: 18px 26px 18px 18px; }
.see-screen { border-radius: 13px; overflow: hidden; border: 1px solid #cab5e33a; background: #15111c; box-shadow: inset 0 1px 0 #fff2,0 28px 45px -30px #000d; }
.see-screen video { display: block; width: 100%; height: auto; aspect-ratio: 576/722; background: #15111c; }
/* The shared rule enlarges a card's last span, meant for an icon; these labels have no icon. */
.see-copy .card-top > span { font-size: .58rem; }
.home .see-card h3 { font-size: 1.3rem; margin: 18px 0 16px; }
.see-steps { margin: 0; }
.see-steps dt { color: #bfaccd; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.see-steps dd { margin: 5px 0 16px; color: var(--quiet); font-size: .84rem; line-height: 1.75; }
.see-steps div:last-child dd { margin-bottom: 0; }
.see-steps strong { color: var(--ink); font-weight: 600; }
.home .see-note { margin-top: 26px; font-size: .78rem; text-align: center; }
@media (max-width:1100px) { .see-grid { grid-template-columns: minmax(0,1fr); max-width: 760px; margin-inline: auto; } }
@media (max-width:560px) { .home .see-card { grid-template-columns: minmax(0,1fr); gap: 6px; padding: 14px 14px 22px; } .see-screen { width: 100%; max-width: 360px; margin-inline: auto; } .see-copy { padding-inline: 6px; } }
@media (hover:hover) and (pointer:fine) {
 .home .price-card:hover::before { opacity:1; }
}
@media (max-width:1100px) and (min-width:821px) {
 .home .hero-layout { gap:30px; }.home .hero h1 { font-size:3.8rem; }.product-stage { padding-inline:30px; }.script-bubble { right:-5px; }.voice-bubble { left:0;width:145px;padding-inline:14px; }.sound-wave { gap:2px; }.home .hero-description { font-size:.96rem; }.home .actions { gap:14px; }.home .btn { padding-inline:18px; }.home .text-action { font-size:.78rem;gap:10px; }.design-layout,.language-layout,.privacy-layout { gap:45px; }.tone-example { flex-wrap:wrap;gap:8px; }.feature-card { padding:25px; }.board-row > span { height:35px; }
}
@media (max-width:820px) {
 .home .section-space { padding:75px 0; }.home .hero { padding-top:20px; }.home .hero-layout { grid-template-columns:minmax(0,1fr);gap:48px;padding-bottom:35px; }.home .hero-copy { text-align:center;max-width:580px;margin:auto; }.home .hero h1 { font-size:clamp(2.8rem,8vw,4.2rem); }.home .hero-description { margin:22px auto 26px;font-size:1rem; }.home .actions { justify-content:center;gap:20px; }.hero-footnote { display:none; }.product-stage { max-width:390px; }.hero-bottom > span { display:none; }.hero-bottom { justify-content:space-between;gap:12px; }.section-heading { gap:25px; }.section-heading > p { max-width:220px;font-size:.8rem; }.feature-composition { grid-template-columns:minmax(0,1fr); }.feature-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }.translation-demo { max-width:450px;margin:35px auto; }.tone-example { flex-wrap:wrap; }.home .feature-card h3 { font-size:1.3rem; }.film-body { gap:35px;padding:25px; }.film-body h3 { font-size:2.3rem; }.design-layout,.language-layout { grid-template-columns:minmax(0,1fr);gap:40px; }.design-copy,.language-copy { text-align:center; }.home .design-copy p,.language-copy > p { margin-inline:auto;max-width:480px; }.design-facts,.language-note { justify-content:center; }.theme-playground { width:100%;max-width:520px;margin:auto; }.language-panels { max-width:300px; }.home .design-section { padding:65px 0; }.privacy-layout { gap:40px;grid-template-columns:minmax(0,.65fr) minmax(0,1fr); }.privacy-symbol::before { width:150px;height:150px;top:30px; }.privacy-symbol::after { width:200px;height:200px;top:5px; }.privacy-symbol > div { width:85px;height:110px;font-size:3rem; }.privacy-symbol > span { font-size:.43rem; }.pricing-grid { gap:18px; }.price-card { padding:25px; }.price-card .btn { font-size:.8rem;padding-inline:14px; }.setup-steps { gap:25px; }.faq-layout { grid-template-columns:minmax(0,1fr);gap:30px; }.faq-layout > div:first-child { text-align:center; }.faq-layout > div:first-child p { margin-top:20px; }.closing-letters > span { width:80px;height:90px;font-size:3rem; }.closing-letters > span:nth-child(1) { left:-25px;top:20%; }.closing-letters > span:nth-child(2) { right:-25px; }.home .overline { font-size:.6rem; }
}
@media (max-width:560px) {
 .home header { padding:9px 0; }.home header .wrap { gap:5px; }.home header .brand { padding-left:5px; }.home header .nav-install { margin-right:5px;padding:10px 13px; }.home header nav { width:100%;justify-content:center;gap:10px; }.home header nav a { font-size:.72rem;padding:7px 9px;min-height:38px; }.home section { scroll-margin-top:145px; }.home .hero { padding-top:17px; }.home .hero-layout { padding-top:10px;gap:42px; }.home .hero h1 { font-size:clamp(2.4rem,9.3vw,3.4rem);margin-top:20px; }.home .hero-copy > .overline { font-size:.49rem;letter-spacing:.075em;gap:7px; }.home .hero-description { font-size:.91rem;line-height:1.8; }.home .actions { gap:10px 20px; }.home .hero .text-action { border:0;font-size:.78rem; }.home .hero-note { font-size:.63rem;margin-top:14px; }.hero-note > span { padding:0 3px; }.product-stage { padding-inline:25px;max-width:345px; }.phone-shell { padding:5px;border-radius:18px; }.phone-shell video { border-radius:13px; }.voice-bubble { width:128px;left:0;top:-12px;padding:9px 12px; }.bubble-label { font-size:.38rem; }.sound-wave { gap:2px;height:23px; }.sound-wave span { width:2px; }.script-bubble { width:119px;padding:10px;gap:10px;right:0;bottom:82px; }.script-bubble > span { font-size:1.15rem; }.script-bubble small { font-size:.45rem; }.product-stage figcaption { font-size:.52rem;margin-inline:-20px; }.hero-bottom { padding-block:13px; }.hero-bottom > a,.motion-control { font-size:.55rem; }.language-ribbon { padding:21px 0; }.ribbon-track { gap:28px;padding-right:28px; }.ribbon-track > span { font-size:1.07rem; }.home .section-space { padding:62px 0; }.section-heading { display:block; }.section-heading > p { max-width:320px;margin-top:20px; }.home h2 { font-size:clamp(2.15rem,8.5vw,2.8rem); }.feature-stack { grid-template-columns:minmax(0,1fr); }.feature-card { padding:23px; }.translation-demo { margin:30px 0; }.translation-source { padding:0; }.translation-source > span { font-size:1rem; }.translation-result { padding:17px; }.translation-result > span { font-size:1.05rem; }.tone-example { flex-wrap:nowrap;gap:6px;font-size:.7rem; }.tone-example > span { padding:8px; }.film-details > summary { gap:14px;font-size:.85rem; }.film-details summary small { font-size:.6rem; }.film-play { width:36px;height:36px;flex:none; }.film-body { grid-template-columns:minmax(0,1fr);padding:20px;gap:25px; }.film-body h3 { font-size:2.2rem; }.film-body video { max-width:290px; }.theme-choice { font-size:.59rem;padding:8px;margin:0; }.theme-choice > span { width:10px;height:10px; }.theme-preview { padding:13px 8px 10px;transform:none; }.board-row { gap:3px;margin-bottom:4px; }.board-row > span { height:32px;font-size:.68rem; }.board-last > span { font-size:.58rem; }.preview-message { font-size:.72rem;padding:16px 10px; }.preview-toolbar { font-size:.82rem; }.home .design-copy p,.language-copy > p { font-size:.9rem; }.home .language-note p { font-size:.65rem; }.language-browser > label { padding:8px;font-size:.58rem;margin:2px; }.language-panels { max-width:275px; }.privacy-layout { grid-template-columns:minmax(0,1fr);gap:25px; }.privacy-symbol { min-height:230px;gap:28px; }.privacy-symbol::before { width:150px;height:150px;top:22px; }.privacy-symbol::after { top:-3px; }.privacy-symbol > span { font-size:.5rem; }.home .privacy-section { padding:60px 0; }.pricing-grid { grid-template-columns:minmax(0,1fr); }.price-card { padding:26px; }.price-card .btn { font-size:.86rem; }.setup-steps { grid-template-columns:minmax(0,1fr);gap:28px; }.setup-steps h3 { margin-top:13px; }.home .setup-section { padding:60px 0; }.setup-section .section-heading > a { margin-top:18px; }.home .closing-section { padding:65px 0; }.home .closing-section h2 { font-size:4rem; }.home .closing-section .overline { font-size:.49rem; }.footer-top { flex-wrap:wrap;gap:25px; }.footer-top > div { margin-left:0; }.footer-top p { margin-left:auto; }.footer-bottom { flex-direction:column;gap:12px;align-items:flex-start; }.footer-bottom nav { gap:20px; }.footer-bottom nav a { margin:0; }.home .overline { font-size:.56rem; }
}
/* Motion is concentrated around the product. All animation has a static state. */
@media (prefers-reduced-motion:no-preference) {
 .status-light { animation:status-breathe 3s ease-in-out infinite; }.sound-wave span { animation:voice-wave 1.1s ease-in-out infinite alternate; }.sound-wave span:nth-child(2n) { animation-duration:.8s;animation-delay:-.4s; }.sound-wave span:nth-child(3n) { animation-duration:1.4s;animation-delay:-.7s; }.sound-wave span:nth-child(5n) { animation-delay:-.2s; }.voice-bubble { animation:bubble-float 6s ease-in-out infinite alternate; }.script-bubble { animation:bubble-float 7s ease-in-out -3s infinite alternate; }.ribbon-track { animation:ribbon-drift 55s linear infinite; }.language-ribbon:hover .ribbon-track { animation-play-state:paused; }.translation-result > span { animation:translation-reveal 9s linear infinite; }.translation-result > b { animation:spark-turn 6s ease-in-out infinite; }.essentials-art > span { animation:key-rise 6s ease-in-out infinite; }.essentials-art > span:nth-child(2) { animation-delay:.2s; }.essentials-art > span:nth-child(3) { animation-delay:.4s; }.essentials-art > span:nth-child(4) { animation-delay:.6s; }.privacy-symbol::after { animation:orbit-turn 65s linear infinite; }.closing-letters > span { animation:bubble-float 8s ease-in-out infinite alternate; }.closing-letters > span:nth-child(2n) { animation-delay:-4s; }.language-panels > img { animation:panel-arrive .4s ease-out; }
 @supports (animation-timeline:view()) { .section-heading,.center-heading,.feature-card,.design-copy,.theme-playground,.language-copy,.language-browser,.privacy-layout,.price-card,.setup-steps li { animation:chapter-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 35%; } }
 @keyframes status-breathe { 50% { opacity:.45; } } @keyframes voice-wave { from { transform:scaleY(.2);opacity:.55; } to { transform:scaleY(1);opacity:1; } } @keyframes bubble-float { to { translate:0 -10px; } } @keyframes ribbon-drift { to { transform:translateX(-50%); } } @keyframes translation-reveal { 0%,17% { clip-path:inset(0 100% 0 0); } 43%,100% { clip-path:inset(0); } } @keyframes spark-turn { 50% { transform:rotate(90deg);opacity:.4; } } @keyframes key-rise { 35%,55% { translate:0 -5px; } } @keyframes orbit-turn { to { transform:rotate(360deg); } } @keyframes panel-arrive { from { opacity:.3;translate:0 6px; } to { opacity:1;translate:0; } } @keyframes chapter-arrive { from { opacity:.35;translate:0 22px; } to { opacity:1;translate:0; } }
}
@media (prefers-reduced-motion:reduce) { .home *,.home *::before,.home *::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; }.motion-control { display:none; }.translation-result > span { clip-path:none; } }