/* Local main-site Apple Design Skill pass. Scoped to preserve the Mac/hours pages. */
.landing-page {
  --page:#fdfefd;
  --ink:#17221c;
  --muted:#526157;
  --surface:#f4f8f2;
  --line:#dce3dc;
  --green:#176c4b;
  --on-accent:#f4f7f3;
  --accent-hover:#10573c;
  background:var(--page);
  font-size:1.0625rem;
  line-height:1.6;
}
.landing-page .wrap{width:min(1120px,calc(100% - 64px))}
.landing-page h1,.landing-page h2{overflow-wrap:anywhere;line-height:1.12}
.landing-page p{line-height:1.65}
.landing-page .nav{height:auto;min-height:92px;gap:16px;padding-block:12px}
.landing-page .brand{flex-shrink:0}
.landing-page .brand picture{display:block}
.landing-page .brand>span{font-size:.8125rem}
.landing-page .nav nav{gap:26px;min-width:0;font-size:.9375rem}
.landing-page .nav nav>a{min-height:44px;display:flex;align-items:center}
.landing-page .button{background:var(--green);color:var(--on-accent);font-size:1rem;min-height:52px;line-height:1.4}
.landing-page .button:hover{background:var(--accent-hover)}
.landing-page .button.small{font-size:.875rem;min-height:44px;gap:8px}
.landing-page .button.secondary{background:var(--page);border-color:var(--line);color:var(--ink)}
.landing-page .button.secondary:hover{background:var(--surface)}
.landing-page .hero{padding-top:48px}
.landing-page .hero h1{font-size:clamp(3rem,6.5vw,5.25rem);margin-bottom:22px;line-height:1.1}
.landing-page .hero>p:not(.hero-availability){font-size:1.25rem}
.landing-page .actions{margin:27px 0 17px}
.landing-page .hero-availability{font-size:.875rem;margin-bottom:34px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px}
.landing-page .hero-availability a{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--green)}
.landing-page .visual-label,.landing-page .mic .visual-label{font-size:.75rem;letter-spacing:.055em;line-height:1.5}
.landing-page .floating .visual-label{color:#526157}
.landing-page .showcase-caption{font-size:.8125rem}
.landing-page .intro{padding-block:92px;gap:30px 68px;align-items:center}
.landing-page .intro .kicker{margin-bottom:0}
.landing-page .kicker{font-size:.8125rem;letter-spacing:.07em;margin-bottom:15px}
.landing-page .intro h2{font-size:clamp(2.5rem,4.6vw,4.25rem)}
.landing-page .intro>p:last-child{font-size:1.1875rem;max-width:32ch;margin:0}
.landing-page .section-heading{margin-bottom:35px;gap:30px}
.landing-page .section-heading>p{font-size:1.0625rem;max-width:27ch}
.landing-page .section-heading h2,.landing-page .keyboard h2,.landing-page .history h2{font-size:clamp(2.25rem,4vw,3.5rem)}
.landing-page .walkthrough{gap:64px;padding-bottom:36px}
.landing-page .walk-visual{height:auto;min-height:450px;top:80px;padding:28px}
.landing-page .step{opacity:1;min-height:320px;padding:22px 0 34px}
.landing-page .step-content{top:130px;padding-bottom:15px}
.landing-page .step-button{font-size:1.625rem;line-height:1.35;color:var(--ink);min-height:52px;grid-template-columns:40px 1fr 22px}
.landing-page .step.active .step-button{color:var(--green)}
.landing-page .step-number{font-size:.875rem}
.landing-page .step.active .step-number{background:var(--green);color:var(--on-accent);border-radius:50%;width:32px;height:32px;display:grid;place-items:center}
.landing-page .step p{font-size:1.0625rem;line-height:1.65;margin:16px 22px 0 54px;max-width:35ch}
.landing-page .step-detail p{font-size:1.0625rem}
.landing-page .walk-footer{position:static;margin-top:20px;font-size:.75rem;gap:12px}
.landing-page .how{padding-bottom:62px}
.landing-page .keyboard{gap:65px;padding-block:55px 90px}
.landing-page .keyboard-copy>p:not(.kicker){font-size:1.0625rem;margin:22px 0;max-width:36ch}
.landing-page .switch{flex-wrap:wrap;max-width:100%;border:1px solid var(--line);gap:3px}
.landing-page .switch button{font-size:.875rem;min-height:44px;line-height:1.4;white-space:normal}
.landing-page .switch button.selected{background:var(--page);color:var(--ink)}
.landing-page .keyboard-voice{padding-bottom:90px}
.landing-page .voice-layout{gap:60px}
.landing-page .voice-screenshot>p{font-size:.9375rem}
.landing-page .voice-instructions li>span{font-size:.875rem}
.landing-page .voice-instructions h3{font-size:1.375rem;line-height:1.35}
.landing-page .voice-instructions p{font-size:1.0625rem;max-width:36ch}
.landing-page .voice-note{font-size:1rem}
.landing-page .history{margin-bottom:92px;gap:70px}
.landing-page .history>div:last-child>p.history-description{font-size:1.125rem;max-width:34ch}
.landing-page .history>div:last-child>p.history-note{font-size:.9375rem;max-width:38ch}
.landing-page .platforms{padding-bottom:80px}
.landing-page .platform-grid{grid-template-rows:auto auto auto}
.landing-page .platform{background:var(--surface);padding:30px;min-height:180px}
.landing-page .iphone-platform{background:#edf7ed;min-height:450px}
.landing-page .android-platform{background:var(--surface)}
.landing-page .android-platform .platform-icon,.landing-page .android-platform .platform-action{color:var(--muted)}
.landing-page .platform-description{font-size:1.0625rem;line-height:1.55;max-width:30ch}
.landing-page .iphone-platform .platform-description{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.25;color:var(--ink)}
.landing-page .platform-action{font-size:.9375rem;line-height:1.5;min-height:44px}
.landing-page a.platform:hover{background:var(--surface);transform:translateY(-2px);outline:1px solid var(--line)}
.landing-page .start-questions{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-bottom:85px}
.landing-page .start-questions h2{font-size:clamp(2rem,3.3vw,2.75rem)}
.landing-page .start-questions>div>p:last-child{font-size:1rem;margin-top:19px;max-width:34ch}
.landing-page .start-questions a{color:var(--green);text-decoration:underline;text-underline-offset:4px}
.landing-page .start-answers details{border-bottom:1px solid var(--line)}
.landing-page .start-answers summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;cursor:pointer;min-height:60px;padding:15px 0;font-size:1rem;font-weight:550;line-height:1.5}
.landing-page .start-answers summary::-webkit-details-marker{display:none}
.landing-page .start-answers summary>span{font-size:1.5rem;font-weight:400;transition:transform .18s}
.landing-page .start-answers details[open] summary>span{transform:rotate(45deg)}
.landing-page .start-answers details p{font-size:1rem;padding:0 12px 21px 0}
.landing-page .closing-inner{background:#e9f4eb;color:var(--ink);padding:65px 28px}
.landing-page .closing p{color:var(--muted);font-size:1.1875rem}
.landing-page .button.white{background:var(--green);color:var(--on-accent)}
.landing-page .button.white:hover{background:var(--accent-hover)}
.landing-page .closing-mac{font-size:.9375rem;min-height:44px;display:flex;justify-content:center;align-items:center;color:var(--green);max-width:100%;line-height:1.5}
.landing-page .footer{font-size:.8125rem;gap:20px;flex-wrap:wrap;padding-bottom:90px}
.landing-page .footer>div{gap:22px;flex-wrap:wrap}
.landing-page .footer a{display:flex;align-items:center;min-height:44px}
.landing-page .help-panel{background:var(--page);border-color:var(--line);color:var(--ink)}
.landing-page .help-message p{color:var(--muted);font-size:1rem}
.landing-page .help-header span,.landing-page .help-destination{font-size:.8125rem}
.landing-page .help-panel .help-telegram,.landing-page .help-launcher{background:var(--green);color:var(--on-accent);font-size:.9375rem}
.landing-page .help-close:hover{background:var(--surface)}
.landing-page .help-message h2{font-size:1.5rem}
.landing-page .help-header strong{font-size:1rem}
.landing-page .reveal{transition-duration:.45s}
.landing-page.js .reveal.pending,.js .landing-page .reveal.pending{transform:translateY(14px)}
.landing-page .skip{position:fixed;top:16px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.landing-page .skip:focus{clip-path:none;overflow:visible;width:auto;height:auto;padding:14px 22px}
.landing-page summary:focus-visible{outline:3px solid #428763;outline-offset:4px}
@media(max-width:900px){.landing-page .walkthrough,.landing-page .voice-layout{gap:32px}.landing-page .walk-visual{height:auto;min-height:420px}.landing-page .walk-footer{left:20px;right:20px;flex-wrap:wrap}.landing-page .history{gap:40px}}
@media(max-width:640px){
 .landing-page .wrap{width:calc(100% - 32px)}
 .landing-page .nav{min-height:80px;gap:12px}
 .landing-page .nav nav{gap:0;min-width:0}
 .landing-page .nav .button.small{max-width:100%;padding:11px 12px;line-height:1.4;font-size:.875rem}
 .landing-page .hero{padding-top:28px}
 .landing-page .hero h1{font-size:clamp(2.5rem,11vw,3.75rem)}
 .landing-page .hero>p:not(.hero-availability){font-size:1.125rem}
 .landing-page .actions{margin:24px 0 9px;gap:10px}
 .landing-page .actions .button{font-size:1rem;width:min(270px,100%);min-height:50px;line-height:1.5}
 .landing-page .hero-availability{display:block;font-size:.875rem;margin:0 auto 26px}
 .landing-page .hero-availability a{justify-content:center;display:flex;line-height:1.5}
 .landing-page .showcase-caption{font-size:.8125rem;top:17px;line-height:1.5}
 .landing-page .hero-showcase{padding-top:54px}
 .landing-page .intro{padding-block:62px;gap:22px}
 .landing-page .intro h2{font-size:clamp(2.2rem,9vw,3rem)}
 .landing-page .intro>p:last-child{font-size:1.0625rem}
 .landing-page .section-heading h2,.landing-page .keyboard h2,.landing-page .history h2{font-size:clamp(2rem,8.5vw,2.75rem)}
 .landing-page .section-heading>p{font-size:1.0625rem;max-width:100%}
 .landing-page .walkthrough{gap:22px;padding-bottom:0}
 .landing-page .walk-visual{height:auto;min-height:355px;top:auto;padding:26px 20px 44px}
 .landing-page .walk-footer{font-size:.75rem;line-height:1.5;bottom:16px}
 .landing-page .walk-steps{grid-template-columns:1fr;gap:8px}
 .landing-page .step{min-height:0;padding:0}
 .landing-page .step-content{position:static;top:auto;padding:0}
 .landing-page .step-button{display:grid;grid-template-columns:30px 1fr 18px;text-align:left;font-size:1rem;min-height:58px;height:auto;padding:13px 15px;background:var(--surface);gap:10px;line-height:1.5}
 .landing-page .step.active .step-button{background:var(--green);color:var(--on-accent)}
 .landing-page .step-arrow{display:block;font-size:1.25rem}
 .landing-page .step-number{font-size:.8125rem}
 .landing-page .step.active .step-number{width:26px;height:26px;background:transparent;color:var(--on-accent)}
 .landing-page .walk-steps:after{font-size:1.0625rem;min-height:0;padding-top:12px;line-height:1.65}
 .landing-page .how{padding-bottom:40px}
 .landing-page .keyboard{gap:27px;padding-block:25px 65px}
 .landing-page .keyboard-copy>p:not(.kicker){max-width:100%;font-size:1.0625rem}
 .landing-page .switch button{padding:10px 12px}
 .landing-page .keyboard-voice{padding-bottom:65px}
 .landing-page .voice-layout{gap:28px}
 .landing-page .voice-instructions{gap:26px}
 .landing-page .voice-instructions li{grid-template-columns:28px 1fr;gap:12px}
 .landing-page .voice-instructions p{max-width:100%;font-size:1.0625rem}
 .landing-page .history{gap:28px;margin-bottom:65px}
 .landing-page .history>div:last-child>p.history-description{font-size:1.0625rem;max-width:100%}
 .landing-page .history>div:last-child>p.history-note{font-size:.9375rem;max-width:100%}
 .landing-page .platforms{padding-bottom:62px}
 .landing-page .platform-grid{grid-template-rows:auto}
 .landing-page .platform{padding:25px;min-height:0}
 .landing-page .iphone-platform{min-height:300px}
 .landing-page .platform-description{font-size:1.0625rem}
 .landing-page .iphone-platform .platform-description{font-size:1.875rem}
 .landing-page .platform-action{font-size:.9375rem}
 .landing-page .start-questions{grid-template-columns:1fr;gap:25px;padding-bottom:62px}
 .landing-page .start-questions h2{font-size:2rem}
 .landing-page .closing-inner{padding:48px 21px}
 .landing-page .closing h2{font-size:2.25rem}
 .landing-page .closing p{font-size:1.0625rem}
 .landing-page .closing .button{font-size:1rem;max-width:100%;line-height:1.5}
 .landing-page .footer>div>span{margin-left:0}
 .landing-page .help-launcher{max-width:calc(100vw - 32px);min-height:52px;font-size:.9375rem}
}
@media(prefers-contrast:more){.landing-page{--muted:var(--ink)}.landing-page .button.secondary,.landing-page .switch,.landing-page .platform{border:1px solid var(--ink)}}
@media(forced-colors:active){.landing-page .button,.landing-page .step-button,.landing-page .switch button,.landing-page .help-launcher{border:1px solid ButtonText}.landing-page .step.active .step-button{outline:2px solid Highlight}}
@media(prefers-reduced-motion:reduce){.landing-page .reveal,.landing-page .hero h1,.landing-page .hero>p,.landing-page .hero .actions{animation:none!important;transition:none!important}}
.landing-page .platform-content,.landing-page .help-header>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){.landing-page .nav nav>a:not(.button){display:none}}
/* Square disclosure marks avoid rotated line-box overflow at enlarged text sizes. */
.landing-page .start-answers summary>span{display:grid;place-items:center;flex-shrink:0;width:1em;height:1em;line-height:1;margin-inline:5px;transform-origin:center}

/* User preference: always use the light palette, including native controls. */
html:has(body.landing-page){color-scheme:light}

/* Small main-page refinements; preserve the established palette and layout. */
.landing-page .hero h1{margin-bottom:26px}
.landing-page .hero-availability{margin-bottom:40px}
.landing-page .section-heading>p{ text-wrap:pretty }
.landing-page .button:focus-visible,
.landing-page .switch button:focus-visible,
.landing-page .step-button:focus-visible,
.landing-page a.platform:focus-visible{
 outline:2px solid var(--green);
 outline-offset:4px;
}
.landing-page .switch button{transition:color .18s ease,box-shadow .18s ease}
.landing-page .switch button.selected{box-shadow:0 1px 3px #17221c12}
@media(max-width:640px){
 .landing-page .hero h1{margin-bottom:24px}
 .landing-page .hero-availability{margin-bottom:30px}
}
@media(prefers-reduced-motion:reduce){.landing-page .switch button{transition:none}}