/* Desktop hero fills the window together with the sticky header. */
html { scroll-behavior: auto; scroll-padding-top: calc(var(--header-height,92px) + 24px); }
@media (min-width: 761px) {
 .hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height) - env(safe-area-inset-top, 0px));
  min-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px));
  gap: 24px;
  padding: 24px 0 max(32px, env(safe-area-inset-bottom, 0px));
 }
 .hero .hero-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0;
 }
 .hero .hero-character { flex: none; }
 .hero .keyboard-stage { flex: none; margin-top: 0; }
}
.product-intro-section { position: relative; padding-block: 86px 100px; }
.anchor-alias { position: absolute; top: 86px; }
.layout-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 52px; padding-block: 18px; border-block: 1px solid #ffffff12; }
.layout-toolbar-label { font-size: 12px; color: #85858f; }
.layout-tabs { display: flex; gap: 6px; }
.layout-tabs button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #ffffff12; border-radius: 8px; color: #9797a2; background: #151517; font-size: 13px; }
.layout-tabs button>span:first-child { font-size: 11px; opacity: .6; }
.layout-tabs button[aria-selected=true] { color: #111; border-color: #ddd; background: linear-gradient(#ececed,#c9c9cb); box-shadow: 0 2px 0 #777; }
.product-intro-content { display: grid; grid-template-columns: 1.04fr 1fr; gap: 36px 72px; align-items: start; }
.product-intro-heading h1 { font-family: Inter, sans-serif; font-size: clamp(36px,3.6vw,49px); line-height: 1.16; font-weight: 500; letter-spacing: -.04em; }
.product-intro-heading h1>span { color: #ededf199; }
.intro-description { display: flex; align-items: start; gap: 12px; max-width: 530px; margin-top: 26px; }
.intro-description>p { color: #a6a4b0; font-size: 17px; line-height: 1.65; }
.product-intro-content .help-hint { display: inline-block; flex: none; padding-top: 3px; }
.help-trigger { display: block; width: 20px; height: 20px; border: 1px solid #73717e; border-radius: 50%; background: transparent; padding: 0; font-size: 12px; line-height: 18px; color: #aaa7b6; }
.help-tooltip { position: fixed; z-index: 70; width: 320px; max-width: calc(100vw - 32px); padding: 14px 16px; border: 1px solid #333; border-radius: 9px; background: #000; color: #e5e5eb; box-shadow: 0 12px 40px #000a; font: 12px/1.6 Inter,sans-serif; text-align: left; }
.layout-panel { min-width: 0; }
.layout-columns { display: flex; flex-direction: column; gap: 26px; }
.sample-label { display: block; font-size: 12px; color: #8e8b9b; margin-bottom: 13px; }
.intro-spoken>p { font-size: 20px; line-height: 1.55; letter-spacing: -.015em; color: #9f9baa; }
.intro-spoken>img { margin-top: 14px; height: 26px; width: 28px; object-fit: contain; }
.intro-written { position: relative; padding: 23px 25px 29px; border: 1px solid #ffffff19; border-radius: 14px; background: #141416; }
.sample-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; color: #9e9aa9; font-size: 12px; }
.sample-dots { display: flex; gap: 4px; }
.sample-dots i { width: 5px; height: 5px; border-radius: 50%; background: #54515c; }
.intro-written>p { display: inline; font-size: 22px; line-height: 1.55; letter-spacing: -.015em; }
.intro-written mark { color: #ded3fa; background: #a388e822; border-radius: 3px; padding-inline: 3px; }
.sample-cursor { display: inline-block; height: 1.2em; width: 2px; margin-left: 4px; background: #bca6ee; vertical-align: -.14em; }
.product-intro-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; grid-column: 1/-1; padding-top: 26px; border-top: 1px solid #ffffff15; }
.intro-features { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; padding: 0; margin: 0; list-style: none; color: #bab7c4; font-size: 14px; }
.intro-features li+li { position: relative; }
.intro-features li+li:before { content: ''; position: absolute; top: 50%; left: -16px; width: 2px; height: 2px; border-radius: 50%; background: #71717b; }
.example-disclosure { display: flex; align-items: center; gap: 8px; color: #85818e; font-size: 12px; white-space: nowrap; }
.example-disclosure .help-hint { padding: 0; }
.intro-pricing { color: #8f8b98; font-size: 12px; margin-top: 22px; }

/* 02: the heading and the product demonstration share a central axis. */
.product-intro-section[data-layout="2"] .product-intro-content { display: block; }
.product-intro-section[data-layout="2"] .product-intro-heading { max-width: 920px; margin-inline: auto; text-align: center; }
.product-intro-section[data-layout="2"] h1 { font-size: clamp(38px,4.2vw,57px); }
.product-intro-section[data-layout="2"] .intro-description { max-width: 650px; justify-content: center; margin-inline: auto; }
.layout-centered {
 position: relative;
 isolation: isolate;
 display: grid;
 grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
 gap: 32px;
 align-items: start;
 padding: 38px;
 margin: 0;
 max-width: 940px;
 border: 1px solid #ffffff14;
 border-radius: 18px;
 background: #0d0d0f;
}
.layout-centered > * { position: relative; z-index: 1; min-width: 0; }
.layout-centered .intro-written { padding: 0; border: 0; border-radius: 0; background: none; }
.layout-centered .intro-spoken { display: block; }
.layout-centered .sample-label,
.layout-centered .sample-top { height: 18px; line-height: 18px; margin: 0 0 20px; }
.dictation-character { display: block; width: 112px; height: 72px; }
.layout-centered > .dictation-character { justify-self: center; align-self: center; }
.dictation-speech { min-width: 0; }
.dictation-line { position: relative; white-space: pre-line; }
.layout-centered .dictation-line { display: block; font-size: 23px; line-height: 1.55; min-height: 4.65em; letter-spacing: -.015em; }
.layout-centered .dictation-speech .dictation-line { color: #9f9baa; }
/* Reserve the tallest of all ten phrases, including during transparent changes. */
.dictation-reserve { display: grid; }
.dictation-reserve > span { grid-area: 1 / 1; }
.dictation-measure { visibility: hidden; pointer-events: none; }
[data-dictation-ready="true"] .dictation-reserve { opacity: 0; pointer-events: none; }
.dictation-live { position: absolute; inset: 0; }
.dictation-correction { animation: dictation-correction-in .65s ease-out; }
.dictation-live .sample-cursor { animation: dictation-caret 1s steps(1,end) infinite; }
[data-demo-phase="complete"] .sample-cursor { visibility: hidden; }
[data-demo-phase="fading"] .sample-cursor,
[data-demo-phase="transition"] .sample-cursor { visibility: hidden; }
.layout-centered:not([data-demo-active="true"]) .dictation-correction,
.layout-centered:not([data-demo-active="true"]) .sample-cursor { animation-play-state: paused; }
@keyframes dictation-correction-in { from { background-color: #b79bed66; color: #fff; } to { background-color: #a388e822; color: #ded3fa; } }
@keyframes dictation-caret { 50% { opacity: 0; } }
@media(prefers-reduced-motion:reduce) { .dictation-correction,.dictation-live .sample-cursor { animation: none; } }
.sample-divider { align-self: stretch; background: #ffffff14; }
.product-intro-section[data-layout="2"] .product-intro-bottom { max-width: 940px; margin-inline: auto; }
.product-intro-section[data-layout="2"] .intro-pricing { text-align: center; }

/* Keep the glass card's left edge while giving the paragraph a shorter measure. */
.personalization-section { max-width: 940px; padding-block: 24px 64px; }
.personalization-copy {
 max-width: 880px;
 margin-inline: 0;
 font-family: Inter, sans-serif;
 font-size: clamp(28px, 3vw, 42px);
 font-weight: 400;
 line-height: 1.4;
 letter-spacing: -.035em;
 color: #92929c;
 text-align: left;
 text-wrap: pretty;
}
.personalization-copy strong { font-weight: 500; color: #ededf1; }
/* Short runs stay within browser line-count limits for balanced wrapping. */
.personalization-flow { display: block; text-wrap: balance; }
.personalization-flow:nth-child(2) { max-width: 760px; }
.personalization-flow:nth-child(3) { max-width: 640px; }

/* 03: a horizontal flow, from the shortcut to text in the current app. */
.product-intro-section[data-layout="3"] .product-intro-content { display: block; }
.product-intro-section[data-layout="3"] .product-intro-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 74px; align-items: end; }
.product-intro-section[data-layout="3"] h1 { font-size: clamp(36px,3.7vw,49px); }
.product-intro-section[data-layout="3"] .intro-description { margin-top: 0; margin-bottom: 7px; }
.layout-steps { display: grid; grid-template-columns: .72fr 1fr 1.05fr; gap: 36px; margin-block: 50px 36px; }
.intro-step { position: relative; padding-top: 21px; border-top: 1px solid #ffffff24; }
.step-number { display: block; margin-bottom: 17px; color: #72707e; font: 12px/1.3 monospace; }
.intro-step h2 { font-family: Inter,sans-serif; font-size: 19px; letter-spacing: -.02em; margin-bottom: 25px; }
.shortcut-key { display: flex; align-items: end; justify-content: center; height: 110px; width: 170px; padding: 22px 18px; border: 2px solid #e4e4e6; border-radius: 11px; background: linear-gradient(170deg,#aaa,#efefef 75%); box-shadow: 0 4px 0 #85858a; color: #191919; font-size: 16px; font-weight: 500; }
.intro-step .intro-spoken .sample-label { display: none; }
.intro-step .intro-spoken>p { font-size: 19px; }
.intro-step .intro-written { padding: 0; border: 0; background: none; }
.intro-step .sample-top { display: none; }
.intro-step .intro-written>p { font-size: 19px; }

@media(max-width:1000px) {
 .product-intro-content { gap: 32px 40px; }
 .product-intro-heading h1 { font-size: 38px; }
 .intro-description>p { font-size: 16px; }
 .product-intro-section[data-layout="3"] .product-intro-heading { gap: 38px; }
 .layout-steps { gap: 25px; }
 .layout-centered { gap: 30px; padding: 30px; }
 .layout-centered .dictation-line { font-size: 21px; }
 .dictation-character { width: 88px; height: 64px; }
}
@media(max-width:760px) {
 .personalization-section { padding-block: 8px 24px; }
 .personalization-copy { font-size: clamp(26px, 4.4vw, 32px); line-height: 1.42; letter-spacing: -.03em; }
 .personalization-flow { display: inline; text-wrap: pretty; }
 .product-intro-section { padding-block: 54px 60px; }
 .anchor-alias { top: 54px; }
 .layout-toolbar { flex-direction: column; align-items: start; gap: 14px; margin-bottom: 34px; padding-block: 16px; }
 .layout-tabs { width: 100%; }
 .layout-tabs button { flex: 1; justify-content: center; padding: 10px 8px; gap: 7px; font-size: 12px; }
 .layout-tabs button>span:first-child { display: none; }
 .product-intro-content { grid-template-columns: 1fr; gap: 32px; }
 .product-intro-heading h1 { font-size: clamp(31px,5vw,40px); }
 .intro-description { margin-top: 22px; max-width: 550px; }
 .intro-spoken>p { font-size: 19px; }
 .intro-written>p { font-size: 21px; }
 .product-intro-bottom { flex-direction: column; align-items: start; gap: 22px; padding-top: 22px; }
 .intro-features { gap: 24px; font-size: 13px; }
 .intro-features li+li:before { left: -13px; }
 .intro-pricing { line-height: 1.7; }
 .product-intro-section[data-layout="2"] h1 { font-size: clamp(31px,5.6vw,42px); }
 .layout-centered { grid-template-columns: 1fr; gap: 25px; padding: 26px 24px; }
 .sample-divider { height: 1px; }
 .layout-centered .dictation-line { font-size: 20px; }
 .dictation-character { width: 92px; height: 64px; }
 .product-intro-section[data-layout="3"] .product-intro-heading { display: block; }
 .product-intro-section[data-layout="3"] h1 { font-size: clamp(31px,5vw,40px); }
 .product-intro-section[data-layout="3"] .intro-description { margin-top: 22px; }
 .layout-steps { grid-template-columns: 1fr; gap: 32px; margin-block: 34px; }
 .intro-step { padding-left: 42px; }
 .step-number { position: absolute; left: 0; top: 25px; }
 .intro-step h2 { margin-bottom: 20px; }
 .shortcut-key { width: 165px; height: 88px; }
}
@media(max-width:480px) {
 .dictation-character { width: 72px; height: 56px; }
}
@media(max-width:380px) {
 .layout-tabs button { font-size: 11px; padding-inline: 5px; }
 .intro-features { gap: 16px; font-size: 12px; }
 .intro-features li+li:before { left: -9px; }
 .product-intro-heading h1 { font-size: 30px; }
 .intro-written { padding-inline: 20px; }
}

.layout-centered > .product-glass {
 position: absolute;
 z-index: 0;
 inset: -1px;
 width: calc(100% + 2px);
 height: calc(100% + 2px);
 border-radius: inherit;
 pointer-events: none;
 visibility: hidden;
}
.layout-centered[data-glass-renderer="shader"] { border-color: transparent; background: transparent; }
.layout-centered[data-glass-renderer="shader"] > .product-glass { visibility: visible; }