.hero-description { max-width: 38ch; }
.hero-actions { flex-wrap: wrap; }
.hero-shortcuts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.hero-shortcuts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lenar-periwinkle); font-size: .8125rem; text-decoration: underline; }
.hero-shortcuts a:hover { color: var(--lenar-white); }
.comparison { max-width: 960px; margin: 32px auto 0; text-align: left; }
.comparison-head, .comparison-pair { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; }
.comparison-head { padding: 0 20px 14px; font-size: .8125rem; }
.comparison-head strong { grid-column: 3; color: var(--lenar-heading); }
.comparison-pair { border-top: 1px solid var(--lenar-border); padding: 20px; gap: 12px; transition: background .2s ease-out; }
.comparison-pair:last-child { border-bottom: 1px solid var(--lenar-border); }
.comparison-pair:hover { background: var(--lenar-soft-blue); }
.comparison-pair > p:last-child { color: var(--lenar-heading); font-weight: 800; }
.comparison-pair .icon { color: var(--lenar-heading); justify-self: center; width: 20px; }
.comparison-label { display: block; font-size: .75rem; font-weight: 400; color: var(--lenar-text-body); }
.comparison.is-arriving .comparison-pair { animation: comparison-arrive .45s var(--ease) both; }
.comparison.is-arriving .comparison-pair:nth-child(3) { animation-delay: .07s; }
.comparison.is-arriving .comparison-pair:nth-child(4) { animation-delay: .14s; }
@keyframes comparison-arrive { from { transform: translateY(8px); opacity: .85; } to { transform: translateY(0); opacity: 1; } }
.phone-shell, .phone-screen { min-height: 0; }
.phone-panel { min-height: 18rem; }
.vault-section { padding-block: 80px; }
.vault-window { transform: none; box-shadow: none; border-radius: 16px; }
.feature-copy h2 { margin-top: 0; text-wrap: balance; }
.feature-copy > p { margin-top: 18px; }
.vault-toolbar { margin-top: 20px; }
.vault-heading h3 { max-width: 25ch; font-size: 1.5rem; }
.vault-heading > div { min-width: 0; }
.vault-heading span { font-size: .875rem; }
.resource-info h4 { font-size: 1rem; }
.resource-info p, .save-state { font-size: .8125rem; }
.resource { display: flex; flex-wrap: wrap; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-button, .save-button { width: auto; min-width: 44px; min-height: 44px; height: auto; padding: 10px; gap: 5px; display: inline-flex; font-size: .75rem; }
.study-bridge { align-items: center; margin-top: 48px; padding-top: 40px; }
.study-bridge h3 { margin: 0 0 16px; }
.study-bridge .preview-note { border: 0; padding: 0; margin-top: 12px; }
.assignment-preview { border-radius: 16px; padding: 22px; display: grid; gap: 6px; }
.assignment-preview > small { font-size: .75rem; color: var(--lenar-text-body); }
.assignment-preview > strong { font-size: 1.25rem; line-height: 1.3; color: var(--lenar-heading); }
.assignment-due { font-size: .875rem; font-weight: 800; color: var(--lenar-heading); }
.assignment-preview > p { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--lenar-divider); font-size: 1rem; }
.assignment-preview:focus-visible { outline: 2px solid var(--lenar-heading); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.faq-answer-typed { display: block; }
.faq-word { display: inline; }
@keyframes faq-word-in { from { opacity: 0; } to { opacity: 1; } }
.faq-answer-typed.is-typing .faq-word { opacity: 0; animation: faq-word-in .14s ease-out both; animation-delay: calc(var(--word-index) * 28ms); }
.motion-paused .faq-answer-typed.is-typing .faq-word { opacity: 1; animation: none; }
.contribution-section { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.contribution-copy h2, .continuity-section h2, .vision-section h2 { font-size: clamp(2.25rem, 4.2vw, 3.875rem); line-height: 1.08; letter-spacing: -.035em; }
.contribution-copy p { margin-top: 24px; max-width: 45ch; }
.review-preview { padding: 30px; background: var(--lenar-white); border: 1px solid var(--lenar-border); border-radius: 16px; }
.review-file { display: flex; gap: 15px; align-items: center; margin: 0 0 24px; }
.review-file > .icon { width: 36px; height: 36px; color: var(--lenar-heading); }
.review-file h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.review-file p { font-size: .75rem; margin-top: 7px; }
.review-stages { display: flex; flex-wrap: wrap; gap: 8px; }
.review-stages button { flex: 1 1 auto; min-width: max-content; min-height: 48px; padding: 10px 8px; border: 1px solid var(--lenar-border); background: var(--lenar-white); border-radius: 8px; color: var(--lenar-heading); font-size: .8125rem; }
.review-stages button:hover { background: var(--lenar-soft-blue); }
.review-stages button[aria-pressed=true] { background: var(--lenar-heading); color: var(--lenar-white); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.review-result { min-height: 190px; padding-top: 28px; }
.review-result > span { display: inline-block; color: var(--lenar-heading); background: var(--lenar-soft-blue); padding: 6px 10px; border-radius: 6px; font-size: .75rem; }
.review-result h3 { font-size: 1.6875rem; margin-top: 20px; letter-spacing: -.03em; }
.review-result p { margin-top: 14px; font-size: .9375rem; }
.continuity-copy { border-top: 1px solid var(--lenar-border); margin-top: 28px; padding-top: 24px; }
.continuity-copy h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.continuity-copy p { margin-top: 12px; }
.storage-plan { margin-top: 16px; }
.vision-section { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; padding-block: 100px; align-items: center; }
.vision-boundary { font-size: .8125rem; margin-top: 22px; }
.faq-section { padding-top: 0; padding-bottom: 80px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lenar-periwinkle); font-size: .8125rem; }
.footer-legal a:hover { text-decoration: underline; }
.footer a:focus-visible { outline-color: var(--lenar-white); }
.closing-word { font-size: 40vw; line-height: .75; margin-top: clamp(45px, 5vw, 72px); color: var(--lenar-periwinkle); opacity: .18; white-space: nowrap; transform: translateY(10%); }
.closing-word span { color: inherit; }
.get-app { padding-block: 85px; }
.get-app h2 { font-size: clamp(2.25rem, 4.2vw, 3.875rem); letter-spacing: -.035em; }
.get-app > p { max-width: 48ch; margin-top: 18px; }
.download-options { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 28px 18px; }
.download-option { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px 24px; background: var(--lenar-soft-blue); border-radius: 12px; color: var(--lenar-heading); text-align: left; }
.download-option strong { font-size: 1.25rem; }
.download-option span { display: block; margin-top: 6px; font-size: .875rem; }
.platform-icon { width: 32px; height: 32px; stroke: none; }
.apple-icon { fill: currentColor; }
.manifesto { padding-block: 72px 56px; }
.comparison-pair { padding-block: 14px; }
.vault-section, .get-app { padding-block: 64px; }
.study-bridge { margin-top: 36px; padding-top: 32px; }
.vision-section { padding-block: 72px; }
.motion-paused .comparison-pair, .motion-paused .assignment-instructions { animation: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition: none !important; }
@media (max-width: 1050px) {
  .contribution-section, .vision-section { gap: 40px; }
  .hero-actions { justify-content: center; }
  .hero-shortcuts { justify-content: center; }
}
@media (max-width: 760px) {
  .comparison-head { display: none; }
  .comparison { display: grid; gap: 12px; }
  .comparison-pair, .comparison-pair:last-child { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px; border: 1px solid var(--lenar-border); border-radius: 16px; background: var(--lenar-white); }
  .comparison-pair > p { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 10px; font-size: 1rem; line-height: 1.4; }
  .comparison-label { grid-column: 2; margin: 0; font-size: .75rem; }
  .comparison-pair .comparison-mark { grid-column: 1; grid-row: 2; width: 30px; height: 30px; }
  .comparison-pair > .icon:not(.comparison-mark) { width: 18px; height: 18px; place-self: center; transform: rotate(90deg); }
  .contribution-section, .vision-section { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .contribution-section, .vision-section { padding-block: 60px; }
  .review-preview { padding: 23px; }
  .review-result { min-height: 190px; }
  .footer-legal { width: 100%; gap: 25px; }
}
@media (max-width: 900px) {
  .product-scene { min-height: 0; padding-bottom: 28px; }
  .phone-shell { top: 0; min-height: 0; margin-top: 34px; transform: translateX(-50%); }
  .phone-screen, .phone-panel { min-height: 0; }
  .phone-tabs { order: 0; border-top: 0; border-bottom: 1px solid var(--lenar-divider); margin-bottom: 14px; padding-block: 6px 12px; }
  .preview-caption { margin-top: 24px; }
}
@media (max-width: 600px) {
  .hero-copy { padding-block: 30px 10px; }
  .hero h1 { font-size: clamp(2.75rem, 12vw, 4.25rem); }
  .hero-description { font-size: 1rem; line-height: 1.65; margin-top: 24px; }
  .hero-actions { margin-top: 22px; }
  .hero-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero-shortcuts a { justify-content: center; line-height: 1.5; }
  .manifesto { padding-block: 50px; }
  .manifesto > p, .feature-copy > p, .study-bridge > div > p, .offline-banner p, details > p { font-size: 1rem; }
  .feature-copy h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .comparison { margin-top: 24px; }
  .vault-section { padding-block: 50px; }
  .vault-grid { gap: 24px; }
  .vault-inner { padding: 18px; }
  .resource-info { flex-basis: calc(100% - 52px); }
  .resource-actions { flex-basis: 100%; padding-left: 40px; }
  .study-bridge { margin-top: 32px; padding-top: 28px; }
  .faq-section { padding-bottom: 50px; }
  .get-app { padding-block: 60px; }
  .download-option { width: 100%; }
}
/* Polish pass, 2026-10-13 */
html { scroll-padding-top: 88px; }
.feature-copy > p, .contribution-copy p, .offline-banner p, .vision-section p { font-size: 1.125rem; line-height: 1.6; }
.storage-plan, .vision-boundary { font-size: 1rem; }
.feature-copy h2 { max-width: 11em; }
.comparison-pair .comparison-label { display: none; }
.resource { transition: background .2s ease-out; }
.resource:hover { background: var(--lenar-soft-blue); }
.button:focus-visible, .text-action:focus-visible { outline-offset: 4px; }
@media (max-width: 760px) {
  .comparison-pair .comparison-label { display: block; }
}
@media (max-width: 600px) {
  .feature-copy > p, .contribution-copy p, .offline-banner p, .vision-section p { font-size: 1rem; }
}
.motion-paused .resource { transition: none; }
/* Polish pass 2, 2026-10-13: seam, rhythm, type scale, depth */
:root { --header-h: 89px; --card-shadow: 0 1px 2px rgb(3 23 80 / .04), 0 16px 40px -18px rgb(3 23 80 / .16); }
.hero { margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); }
.scene-orbit { border-color: rgb(181 208 248 / .16); }
.preview-caption { text-align: center; }
.button .icon { transition: transform .3s var(--ease); }
.button:hover .icon { transform: translateX(3px); }
.feature-copy h2, .contribution-copy h2, .vision-section h2, .faq-section h2, .get-app h2, .offline-banner h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; max-width: none; text-wrap: balance; }
.vault-window, .review-preview, .assignment-preview { box-shadow: var(--card-shadow); }
.contribution-section { position: relative; z-index: 0; isolation: isolate; padding-block: 96px; }
.contribution-section::before { content: ''; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--lenar-deep-midnight); }
.contribution-copy h2, .continuity-copy h3 { color: var(--lenar-white); }
.contribution-copy p { color: var(--lenar-periwinkle); }
.continuity-copy { border-top-color: rgb(181 208 248 / .2); }
.review-preview { box-shadow: none; }
.assignment-due, .next-class > div { font-variant-numeric: tabular-nums; }
.footer > .wrap { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px 28px; }
.footer small { grid-column: 1 / 3; }
.footer small:last-child { grid-column: 3 / -1; }
@media (min-width: 901px) {
  .phone-shell { width: 320px; }
  .get-app { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: 100px; align-items: start; }
  .get-app > * { grid-column: 1; }
  .get-app .download-options { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .download-option { flex: 1; }
}
@media (max-width: 760px) {
  .contribution-section { padding-block: 60px; }
}
@media (max-width: 600px) {
  :root { --header-h: 75px; }
  .vault-heading-icon { display: none; }
  .footer > .wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .footer small, .footer small:last-child { grid-column: 1; margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  details[open]::details-content { block-size: auto; }
  .motion-paused details::details-content { transition: none; }
}
/* Hero entrance: plays once on load; reduced motion and Motion off already cancel animations. */
@keyframes hero-rise { from { opacity: 0; translate: 0 16px; } }
/* The h1 stays static so the largest paint is not delayed; only its underline draws in. */
@keyframes phone-rise { from { opacity: 0; translate: 0 48px; } }
@keyframes orbit-in { from { opacity: 0; scale: .82; } }
@keyframes underline-draw { from { scale: 0 1; } }
@keyframes fade-in { from { opacity: 0; } }
.hero-description, .hero-actions, .hero-shortcuts { animation: hero-rise .7s var(--ease) both; }
.hero-description { animation-delay: .08s; }
.hero-actions { animation-delay: .16s; }
.hero-shortcuts { animation-delay: .24s; }
.sync-word::after { transform-origin: left center; animation: underline-draw .7s var(--ease) .35s both; }
.phone-shell { animation: phone-rise 1s var(--ease) .12s both; }
.scene-orbit { animation: orbit-in 1.6s var(--ease) both; }
.orbit-two { animation-delay: .15s; }
.preview-caption { animation: fade-in .6s ease-out .8s both; }
/* Preview tabs: the new panel's rows arrive in sequence, and the active tab shows the auto-tour timer. */
.phone-panel.is-changing > * { animation: hero-rise .45s var(--ease) both; }
.phone-panel.is-changing > :nth-child(2) { animation-delay: .06s; }
.phone-panel.is-changing > :nth-child(3) { animation-delay: .12s; }
.phone-panel.is-changing > :nth-child(4) { animation-delay: .18s; }
.phone-panel.is-changing > :nth-child(5) { animation-delay: .24s; }
.motion-paused .phone-panel > * { animation: none; }
.phone-tabs button { position: relative; overflow: hidden; }
@keyframes tour-progress { from { scale: 0 1; } }
.touring .phone-tabs button[aria-selected=true]::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--lenar-deep-midnight); transform-origin: left; animation: tour-progress 4.2s linear both; }
@supports (animation-timeline: view()) {
  @keyframes word-rise { from { translate: 0 22%; } }
  .closing-word { animation: word-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .motion-paused .closing-word { animation: none; }
}
/* Reviewer feedback pass, 2026-10-17 */
@media (min-width: 901px) {
  .hero-description { font-size: 1.25rem; line-height: 1.6; max-width: 30ch; color: var(--lenar-milky-bg); }
}
/* Comparison: heavier type and problem/solution marks so both columns read clearly */
.comparison-head { font-size: .9375rem; font-weight: 800; color: var(--lenar-text-body); }
.comparison-pair > p { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; font-size: 1.125rem; font-weight: 800; line-height: 1.4; }
.comparison-pair > p:first-child { color: var(--lenar-text-body); }
.comparison-pair .comparison-label { grid-column: 1 / -1; }
.comparison-pair .comparison-mark { width: 30px; height: 30px; padding: 7px; border-radius: 50%; justify-self: start; transform: none; stroke-width: 2.4; background: var(--lenar-border); color: var(--lenar-text-body); }
.comparison-pair > p:last-child .comparison-mark { background: var(--lenar-deep-midnight); color: var(--lenar-white); }
.comparison-head span { padding-left: 44px; }
.comparison-head strong { padding-left: 44px; }
/* Phone preview: Home, Schedule and Settings panels */
.phone-welcome { display: grid; gap: 4px; padding: 14px; margin-top: 4px; border: 1px solid var(--lenar-border); border-radius: 14px; background: var(--lenar-white); }
.phone-welcome strong { font-family: Bricolage, sans-serif; font-size: 1.25rem; letter-spacing: -.03em; color: var(--lenar-heading); }
.phone-welcome span { font-size: .75rem; font-weight: 800; color: var(--lenar-heading); }
.phone-welcome small, .phone-class small { font-size: .75rem; }
.phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone-grid > span { display: grid; justify-items: center; gap: 3px; padding: 12px 6px; border: 1px solid var(--lenar-border); border-radius: 12px; background: var(--lenar-white); color: var(--lenar-heading); font-size: .8125rem; font-weight: 800; text-align: center; }
.phone-grid .icon { width: 20px; height: 20px; margin-bottom: 2px; }
.phone-grid small { font-size: .75rem; font-weight: 400; color: var(--lenar-text-body); line-height: 1.3; }
.phone-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 4px 0 10px; }
.phone-days span { padding: 8px 0; border: 1px solid var(--lenar-border); border-radius: 9px; background: var(--lenar-white); color: var(--lenar-heading); font-size: .75rem; font-weight: 800; text-align: center; }
.phone-days .is-active { background: var(--lenar-deep-midnight); border-color: var(--lenar-deep-midnight); color: var(--lenar-white); }
.phone-class { display: grid; gap: 5px; margin-top: 10px; padding: 13px 15px; border: 1px solid var(--lenar-border); border-radius: 14px; background: var(--lenar-white); }
.phone-class .next-label { color: var(--lenar-heading); }
.phone-class strong { font-family: Bricolage, sans-serif; font-size: 1.0625rem; letter-spacing: -.02em; color: var(--lenar-heading); }
.phone-shift { justify-self: start; padding: 3px 7px; border-radius: 6px; background: var(--lenar-periwinkle); color: var(--lenar-deep-midnight); font-size: .75rem; font-weight: 800; }
.phone-settings { display: grid; gap: 6px; }
.phone-settings > small { margin-top: 6px; font-size: .75rem; font-weight: 800; color: var(--lenar-text-body); }
.phone-settings > div { padding: 0 12px; border: 1px solid var(--lenar-border); border-radius: 12px; background: var(--lenar-white); }
.phone-settings p { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; font-size: .8125rem; line-height: 1.4; }
.phone-settings p + p { border-top: 1px solid var(--lenar-divider); }
.phone-settings b { font-weight: 800; color: var(--lenar-heading); }
.phone-toggle { position: relative; width: 32px; height: 18px; border-radius: 9px; background: var(--lenar-border); }
.phone-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--lenar-white); box-shadow: 0 1px 2px rgb(3 23 80 / .25); }
/* Assignment brief: the instruction card shown over a blurred assignment list */
.due-preview { position: relative; display: grid; padding: 40px 28px; overflow: hidden; border-radius: 16px; background: var(--lenar-soft-blue); }
.due-backdrop { position: absolute; inset: 16px; display: grid; align-content: start; gap: 10px; opacity: .45; pointer-events: none; }
.due-backdrop span { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--lenar-white); color: var(--lenar-heading); font-size: .875rem; font-weight: 800; }
.due-backdrop small { font-size: .75rem; font-weight: 400; color: var(--lenar-text-body); }
.due-preview::before { content: ''; position: absolute; inset: 0; background: rgb(3 23 80 / .18); }
.due-modal { position: relative; width: 100%; max-width: 440px; margin-inline: auto; box-shadow: 0 24px 50px -16px rgb(3 23 80 / .35); }
@media (max-width: 600px) {
  .due-preview { padding: 32px 14px; }
  .comparison-pair > p { font-size: 1rem; }
}
/* Keep the phone the same height on every tab so the auto-tour does not shift the page */
.phone-panel, .phone-panel[id] { min-height: 26rem; }
.phone-screen { text-align: left; }
/* The offline card follows the navy contribution band, so it needs a separate visual break. */
.offline-banner { margin-top: 120px; }
@media (max-width: 760px) { .offline-banner { margin-top: 64px; } }