/* Product tour: natural page scrolling, a stable preview, and complete static cards. */
.feature-showcase { padding-bottom: 70px; }
.feature-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 56px; }
.feature-intro > .lead { max-width: 380px; padding-bottom: 4px; }
.feature-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; border-bottom: 1px solid var(--border); }
.feature-index a { position: relative; padding: 19px 0; min-height: 54px; font-size: 13px; color: var(--muted); transition: color .2s; }
.feature-index a span { margin-right: 9px; font: 11px var(--font-mono); color: var(--faint); }
.feature-index a::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.feature-index a:hover, .feature-index a[aria-current="step"] { color: var(--text); }
.feature-index a[aria-current="step"]::after { transform: scaleX(1); }
/* The window is a real capture of the app, so it takes the room: at the 1160px
   wrap the visual column measures about 800px and the copy stays a slim
   column beside it. */
.feature-story { --feature-split: minmax(0, .55fr) minmax(0, 1.45fr); --feature-gap: clamp(28px, 4vw, 60px); }
.feature-chapter { display: grid; grid-template-columns: var(--feature-split, minmax(0, .55fr) minmax(0, 1.45fr)); align-items: center; gap: var(--feature-gap, clamp(28px, 4vw, 60px)); padding-block: 60px; scroll-margin-top: calc(var(--nav-h) + 36px); }
.feature-copy { max-width: 340px; }
.feature-chapter-number { display: block; margin-bottom: 24px; color: var(--mint); font: 500 10px var(--font-mono); letter-spacing: .13em; }
.feature-copy h3 { margin-bottom: 21px; font: 500 clamp(27px, 2.4vw, 34px)/1.15 var(--font-display); letter-spacing: -.034em; text-wrap: balance; }
.feature-copy > p { color: var(--muted); font-size: 16px; line-height: 1.75; }
.feature-details { margin-top: 24px; display: grid; gap: 13px; }
.feature-details li { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; color: #bec9c3; font-size: 13px; line-height: 1.65; }
.feature-details li::before { content: '↗'; color: #8fc3a7; font-size: 12px; margin-top: 1px; }
.feature-copy-note { display: block; margin-top: 27px; font-size: 12px; color: #99b3a5; }
.feature-text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--mint); font-size: 13px; font-weight: 600; padding-block: 16px; margin-top: 16px; }
.feature-text-link span { transition: transform .25s var(--ease); }
.feature-text-link:hover span { transform: translate(3px, -3px); }
/* Mock-up scale: nothing inside the window drops below 12px. */
.feature-visual { width: 100%; min-width: 0; position: relative; color: #ebebed; background: #090a0c; border: 1px solid #303136; border-radius: 10px; box-shadow: 0 24px 64px -20px #000b, inset 0 1px 0 #ffffff06; overflow: hidden; }
.feature-appbar { position: relative; height: 40px; padding: 0 16px; display: flex; align-items: center; background: linear-gradient(180deg, #1c1c21, #141417); }
.feature-lights { display: flex; gap: 7px; }
.feature-lights i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a42; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.feature-lights i:nth-child(1) { background: #5f5f68; }
.feature-lights i:nth-child(2) { background: rgba(156, 243, 196, .45); }
.feature-lights i:nth-child(3) { background: #9cf3c4; box-shadow: 0 0 8px rgba(156, 243, 196, .35); }
.feature-appbar-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; color: #8a8a92; font: 500 12px/1 var(--font-text); letter-spacing: .02em; }
.feature-appbar-title img { width: 14px; height: 14px; border-radius: 4px; opacity: .9; }
/* A real 2x capture of the app's content panel. The window clips the corners,
   so the image keeps square edges, and the single hairline under the title bar
   belongs to the image, not the bar, whatever the bar carries. */
.feature-visual-shot .feature-appbar { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.feature-visual-shot .feature-shot { display: block; width: 100%; height: auto; border: 0; border-top: 1px solid #2a2b2f; border-radius: 0; background: #0b0c0e; }
/* Nothing inside the shot window stretches: it fills the stage exactly, and the
   rounded-up measurement leaves at most a pixel for the image to absorb. */
.feature-showcase.is-scroll-driven .feature-visual-shot .feature-shot { flex: 1 0 auto; min-height: 0; }
.feature-app-shell { display: grid; grid-template-columns: 120px minmax(0, 1fr); min-height: 440px; }
.feature-app-rail { padding: 28px 10px 16px; border-right: 1px solid #ffffff09; display: flex; flex-direction: column; gap: 6px; background: #0d0e10; }
.feature-app-rail > span { display: block; padding: 9px 9px; font-size: 12px; color: #a6a6ae; border: 1px solid transparent; border-radius: 5px; white-space: nowrap; }
.feature-app-rail > span.is-selected { background: #161d1a; border-color: #34423b; color: #c7f9db; }
.feature-app-rail small { margin-top: auto; padding-left: 9px; color: #93949c; font-size: 12px; }
.feature-app-content { padding: clamp(20px, 2.4vw, 30px); min-width: 0; }
.feature-app-eyebrow { display: block; margin-bottom: 12px; color: #a9aab1; font: 12px/1.2 var(--font-text); letter-spacing: .14em; }
.feature-app-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature-app-title h4 { font-size: clamp(24px, 2.1vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.036em; }
.feature-small-action { background: #a4eac1; color: #17271e; border-radius: 6px; padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.feature-app-subtitle { margin-top: 10px; color: #a9aab1; font-size: 13.5px; line-height: 1.55; }
.feature-vocab-summary { display: flex; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid #ffffff0b; margin-bottom: 16px; }
.feature-vocab-mark { position: relative; color: #d7d7dc; font: 40px/1 var(--font-serif); letter-spacing: -.08em; padding-right: 7px; }
.feature-vocab-mark > span { position: absolute; top: -4px; right: -2px; color: var(--mint); font: 15px var(--font-text); }
.feature-vocab-summary > div { min-width: 0; }
.feature-vocab-summary strong { display: block; font-size: 13.5px; font-weight: 500; }
.feature-vocab-summary div > span { display: block; color: #a3a5ad; font-size: 12.5px; line-height: 1.5; margin-top: 5px; }
.feature-vocab-summary .feature-vocab-count { margin-left: auto; text-align: right; white-space: nowrap; }
.feature-vocab-count strong { font-size: 30px; line-height: 1; color: #e4e4e8; }
.feature-vocab-count > span { font-size: 12px !important; }
.feature-mock-tabs { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.feature-mock-tabs > span { font-size: 12.5px; color: #a5a6ad; }
.feature-mock-tabs > span.is-selected { color: #e4e4e8; background: #1b1c20; border-radius: 4px; padding: 6px 10px; }
.feature-word-table > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ffffff09; align-items: center; font-size: 13.5px; }
.feature-word-table .feature-word-head { padding: 4px 0 10px; font-size: 12px; color: #a5a6af; letter-spacing: .1em; }
.feature-word-before { color: #a7a8b1; }
.feature-word-table strong { font-weight: 500; color: #dcdce1; }
.feature-learned { color: #b2c5ba; font-size: 12px; border: 1px solid #33383a; border-radius: 4px; padding: 4px 8px; background: #121417; }
.feature-bottom-note { display: flex; align-items: center; gap: 8px; padding-top: 16px; color: #a9acb1; font-size: 12.5px; }
.feature-bottom-note > span { color: var(--mint); }
.feature-tone-control { display: flex; border: 1px solid #26272d; border-radius: 6px; padding: 4px; margin-top: 22px; background: #08090b; }
.feature-tone-control > button { flex: 1; padding: 9px 6px; font-size: 13px; color: #b5b7bf; min-height: 40px; border: 1px solid transparent; border-radius: 4px; transition: color .2s, background .2s, border-color .2s; }
.feature-tone-control > button:hover { background: #17191d; color: #eeeef1; }
.feature-tone-control > button[aria-pressed="true"] { color: #d5fbe4; border-color: #43554a; background: #19221e; box-shadow: 0 2px 5px #0003, inset 0 1px 0 #b9f6d00a; }
.feature-writing-note { position: relative; margin: 18px 0; padding: 22px; border: 1px solid #36373e; border-radius: 6px; background: linear-gradient(135deg, #17181d, #111216); box-shadow: 0 12px 25px #0004; }
.feature-writing-note > div { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .12em; color: #babcc7; }
.feature-writing-note > div > span { font-size: 18px; line-height: 1; }
/* The tone label carries an 8px inline size in the markup; the mock-up floor wins. */
.feature-writing-note .feature-tone-label { font-size: 12px !important; }
.feature-writing-note > p { min-height: 104px; padding: 22px 0 18px; color: #e8e8ed; font: 24px/1.5 var(--font-serif); letter-spacing: -.025em; }
.feature-writing-note > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #ffffff14; padding-top: 13px; font-size: 12px; color: #b4b6c0; }
.feature-writing-note > footer > span:last-child { font: italic 14px var(--font-serif); color: #bfc0c8; }
.feature-preference { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.feature-preference strong { display: block; font-size: 14px; font-weight: 500; }
.feature-preference div > span { display: block; font-size: 12.5px; line-height: 1.5; color: #a5a6b0; margin-top: 5px; }
.feature-toggle-on { display: block; flex-shrink: 0; width: 36px; height: 20px; padding: 3px; border-radius: 12px; background: #a0d8b2; }
.feature-toggle-on::after { content: ''; display: block; width: 14px; height: 14px; background: #1c3a25; margin-left: auto; border-radius: 50%; }
.feature-insights-stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; padding: 22px 0; margin-bottom: 4px; border-bottom: 1px solid #ffffff0a; }
.feature-insights-stats > div { border-right: 1px solid #ffffff0a; padding-left: 16px; }
.feature-insights-stats > div:first-child { padding-left: 0; }
.feature-insights-stats > div:last-child { border-right: none; }
.feature-insights-stats span { display: block; font-size: 12px; color: #a9aab4; }
.feature-insights-stats strong { display: block; font-weight: 500; font-size: 34px; line-height: 1.25; margin-top: 8px; letter-spacing: -.045em; }
.feature-insights-stats small { color: #b9bbc6; font-size: 15px; font-weight: 400; letter-spacing: 0; }
.feature-insights-chart { margin-top: 20px; }
.feature-insights-chart > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.feature-insights-chart header div > span { display: block; color: #a8aab3; font-size: 12px; letter-spacing: .12em; }
.feature-insights-chart strong { display: block; font-size: 36px; font-weight: 500; letter-spacing: -.035em; margin-top: 6px; line-height: 1.15; }
.feature-insights-chart strong small { color: #acafb9; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.feature-pace-badge { color: #a9adb6; font-size: 12px; white-space: nowrap; }
.feature-insights-chart svg { width: 100%; height: 104px; margin-top: 14px; overflow: visible; }
.feature-chart-grid { fill: none; stroke: #ffffff0a; stroke-width: 1; }
.feature-insights-chart svg > path[fill] { opacity: .3; }
.feature-chart-line { fill: none; stroke: #b2e7be; stroke-width: 2; }
.feature-insight-foot { display: flex; align-items: center; gap: 20px; margin-top: 14px; border-top: 1px solid #ffffff09; padding-top: 14px; }
.feature-insight-foot > div > span { display: block; color: #a6aab5; font-size: 12px; letter-spacing: .12em; }
.feature-insight-foot strong { display: block; font-size: 26px; font-weight: 500; line-height: 1.25; margin-top: 4px; letter-spacing: -.025em; white-space: nowrap; }
.feature-insight-foot p { color: #a8aab5; font-size: 12.5px; line-height: 1.6; }
.feature-insight-icon { font-size: 32px; color: #bce9c9; margin-left: auto; }
.feature-history-view .feature-app-title h4 { font-size: clamp(24px, 1.95vw, 28px); }
.feature-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; margin-bottom: 12px; }
.feature-history-heading strong { font-size: 14px; font-weight: 500; }
.feature-history-heading span { color: #a8adb8; font-size: 12px; border: 1px solid #303137; border-radius: 4px; padding: 5px 14px; }
.feature-history-item { padding: 16px; border: 1px solid #292b31; background: #101115; border-radius: 6px; margin-bottom: 12px; }
.feature-history-item > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #aab0bc; }
.feature-history-item > div > span:last-child { color: #a3d0b2; }
.feature-history-item > p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #dddfe7; }
.feature-history-item > footer { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #a5aab5; margin-top: 12px; }
.feature-history-local { display: flex; justify-content: center; gap: 8px; color: #a5adb7; font-size: 12px; padding-top: 6px; }
.feature-stage { display: none; }

/* Enhancement moves the original, accessible figures into one steady stage. */
@media (min-width: 981px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  /* The sticky stage is the second column, so the window and the chapter links
     under it share the copy grid's wider track exactly. */
  .feature-showcase.is-scroll-driven .feature-story { display: grid; grid-template-columns: var(--feature-split); gap: var(--feature-gap); align-items: start; position: relative; }
  .feature-showcase.is-scroll-driven .feature-chapter { display: flex; min-height: max(72vh, calc(var(--feature-stage-height, 700px) + 76px)); padding-block: 76px; }
  .feature-showcase.is-scroll-driven .feature-chapter:first-child { padding-top: 74px; }
  .feature-showcase.is-scroll-driven .feature-chapter:last-child { padding-bottom: 74px; }
  .feature-showcase.is-scroll-driven .feature-copy { transition: opacity .35s ease; opacity: .8; }
  .feature-showcase.is-scroll-driven .feature-chapter.is-active .feature-copy { opacity: 1; }
  .feature-showcase.is-scroll-driven .feature-stage { display: block; position: sticky; top: var(--feature-stage-top, calc(var(--nav-h) + 8px)); padding-block: 16px; margin-top: 37px; }
  .feature-stage-viewport { position: relative; height: var(--feature-preview-height, 660px); overflow: hidden; isolation: isolate; border-radius: 10px; background: #090a0c; box-shadow: 0 24px 64px -20px #000b; }
  .feature-showcase.is-scroll-driven .feature-visual { position: absolute; inset: 0; height: 100%; display: flex; flex-direction: column; opacity: 1; transform: translate3d(100%, 0, 0); visibility: hidden; pointer-events: none; box-shadow: none; }
  .feature-showcase.is-scroll-driven .feature-visual .feature-appbar { flex-shrink: 0; }
  .feature-showcase.is-scroll-driven .feature-visual .feature-app-shell { flex: 1; }
  .feature-stage-viewport.is-transitioning .feature-visual { will-change: transform; }
  .feature-showcase.is-scroll-driven .feature-visual.is-active { pointer-events: auto; }
  .feature-stage-navigation { --feature-nav-padding: 18px; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: var(--feature-nav-padding) 0 0; }
  .feature-stage-navigation::before, .feature-stage-navigation::after { content: ''; position: absolute; top: calc(var(--feature-nav-padding) + 10px); left: 0; width: 100%; height: 2px; border-radius: 2px; pointer-events: none; }
  .feature-stage-navigation::before { background: #2d2f36; }
  .feature-stage-navigation::after { background: var(--mint); transform: scaleX(var(--feature-progress, .25)); transform-origin: left; transition: transform .65s cubic-bezier(.22, .68, .16, 1); box-shadow: 0 0 8px #9cf3c417; }
  .feature-stage-navigation a { position: relative; display: block; padding: 22px 0 10px; min-height: 48px; color: #a3b5aa; font-size: 12.5px; transition: color .2s; }
  .feature-stage-navigation a[aria-current="step"] { color: #d6f0e0; }
}
/* A taller window needs the room back on short laptop displays: vertical
   rhythm tightens, the type keeps its size. */
@media (min-width: 981px) and (min-height: 720px) and (max-height: 880px) and (prefers-reduced-motion: no-preference) {
  .feature-showcase.is-scroll-driven .feature-stage { padding-block: 8px; margin-top: 30px; }
  .feature-showcase.is-scroll-driven .feature-app-content { padding-block: 20px; }
  .feature-showcase.is-scroll-driven .feature-vocab-summary { padding-block: 16px; margin-bottom: 12px; }
  .feature-showcase.is-scroll-driven .feature-word-table > div { padding-block: 10px; }
  .feature-showcase.is-scroll-driven .feature-insights-stats { padding-block: 16px; }
  .feature-showcase.is-scroll-driven .feature-history-item { margin-bottom: 9px; }
  .feature-stage-navigation { --feature-nav-padding: 8px; }
  .feature-stage-navigation a { padding: 18px 0 6px; min-height: 40px; }
}
@media (min-width: 981px) and (min-height: 720px) and (max-height: 780px) and (prefers-reduced-motion: no-preference) {
  /* A capture only gets shorter by getting narrower. Under about 758px of
     viewport the full-width window would push the chapter links below the
     fold, so the stage gives back exactly the width that costs. The 1.546 is
     the panel captures' 1925:1245 shape; 241px is the header, the window's own
     bars and the links under it. */
  .feature-showcase.is-scroll-driven .feature-stage { max-width: calc((100vh - 241px) * 1.546); padding-block: 6px; margin-top: 24px; }
  .feature-showcase.is-scroll-driven .feature-writing-note > p { min-height: 84px; padding-block: 16px; }
  .feature-stage-navigation { --feature-nav-padding: 6px; }
}
@media (max-width: 1100px) {
  .feature-app-shell { grid-template-columns: 108px minmax(0, 1fr); }
  .feature-app-rail { padding-inline: 6px; }
  .feature-app-rail > span { padding-inline: 7px; }
  .feature-vocab-summary { gap: 12px; }
  .feature-vocab-mark { font-size: 34px; }
  .feature-vocab-summary strong { font-size: 13px; }
  .feature-vocab-summary .feature-vocab-count strong { font-size: 27px; }
  .feature-vocab-summary div > span { font-size: 12px; }
  .feature-writing-note { padding: 18px; }
  .feature-writing-note > p { font-size: 21px; }
  .feature-insights-stats strong { font-size: 30px; }
  .feature-insights-chart strong { font-size: 32px; }
}
@media (max-width: 980px) {
  .feature-intro { gap: 32px; }
  .feature-intro > .lead { max-width: 330px; font-size: 15px; }
  /* Below the sticky stage there is no second column to spare: the copy reads
     first and the window takes the full wrap, at any width down to a phone. */
  .feature-chapter { display: flex; flex-direction: column; align-items: stretch; gap: 30px; padding-block: 50px; border-bottom: 1px solid #ffffff08; }
  .feature-copy { max-width: 620px; }
  .feature-copy h3 { font-size: 30px; }
  .feature-copy > p { font-size: 14px; }
  .feature-details li { font-size: 12px; }
  .feature-app-shell { grid-template-columns: minmax(0, 1fr); min-height: 400px; }
  .feature-app-rail { display: none; }
  .feature-app-content { padding: 24px; }
  .feature-app-title h4 { font-size: 26px; }
  .feature-history-view .feature-app-title h4 { font-size: 25px; }
  .feature-insights-stats strong { font-size: 29px; }
  .feature-insights-chart strong { font-size: 31px; }
  .feature-writing-note > p { font-size: 21px; min-height: 96px; }
  .feature-history-item > p { font-size: 13.5px; }
}
@media (max-width: 680px) {
  .feature-intro { display: block; }
  .feature-intro > .lead { max-width: 440px; margin-top: 22px; font-size: 16px; }
  .feature-index { grid-template-columns: repeat(2, 1fr); gap: 0 18px; margin-top: 26px; }
  .feature-index a { font-size: 12px; padding: 15px 0; }
  .feature-index a span { margin-right: 6px; font-size: 9px; }
  .feature-chapter { gap: 30px; padding-block: 45px; }
  .feature-copy { max-width: none; }
  .feature-chapter-number { margin-bottom: 18px; }
  .feature-copy h3 { font-size: 33px; }
  .feature-copy > p { font-size: 15px; }
  .feature-details { margin-top: 19px; gap: 10px; }
  .feature-details li { font-size: 13px; }
  .feature-copy-note { margin-top: 20px; }
  .feature-visual { border-radius: 9px; }
  .feature-app-shell { min-height: 0; }
  .feature-app-content { padding: 24px 20px; }
  .feature-app-title h4 { font-size: 27px; }
  .feature-app-subtitle { font-size: 13.5px; }
  .feature-vocab-summary { gap: 14px; padding-block: 22px; }
  .feature-vocab-mark { font-size: 38px; }
  .feature-vocab-summary strong { font-size: 13.5px; }
  .feature-vocab-summary div > span { font-size: 12.5px; }
  .feature-vocab-count strong { font-size: 28px; }
  .feature-vocab-count > span { font-size: 12px !important; }
  .feature-word-table > div { padding-block: 13px; font-size: 13.5px; gap: 10px; }
  .feature-mock-tabs > span { font-size: 12.5px; }
  .feature-bottom-note { font-size: 12.5px; }
  .feature-tone-control > button { min-height: 44px; font-size: 13px; }
  .feature-writing-note { padding: 20px; }
  .feature-writing-note > p { font-size: 23px; min-height: 128px; padding-block: 22px; }
  /* Three stat columns cannot hold 30px numerals at phone width. */
  .feature-insights-stats { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .feature-insights-stats > div { padding-left: 16px; }
  .feature-insights-stats > div:nth-child(odd) { padding-left: 0; }
  .feature-insights-stats > div:nth-child(even) { border-right: none; }
  .feature-insights-stats > div:last-child { grid-column: 1 / -1; padding-left: 0; padding-top: 16px; border-top: 1px solid #ffffff0a; }
  .feature-insights-stats strong { font-size: 30px; }
  .feature-insights-chart strong { font-size: 31px; }
  .feature-insights-chart svg { height: 110px; }
  .feature-insight-foot { flex-wrap: wrap; gap: 12px 18px; }
  .feature-insight-foot p { flex: 1 1 190px; }
  .feature-history-view .feature-app-title h4 { font-size: 26px; }
  .feature-history-item > p { font-size: 14px; }
  .feature-history-item { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-showcase *, .feature-showcase *::after { transition: none !important; animation: none !important; }
}