/* Marketing composition. Product controls keep their own compact UI scale. */
html { scroll-padding-top: 40px; }
body { background: var(--paper); }
.header { max-width: 1280px; padding: 26px 40px; }
.header .brand { gap: 10px; font-size: 18px; letter-spacing: -.6px; }
.header .brand strong { font-weight: 600; }
.header nav { gap: 32px; font-size: 13px; }
.header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.button { border-radius: 7px; min-height: 52px; padding: 14px 23px; font-size: 13px; background-image: linear-gradient(rgb(255 255 255 / 5%), transparent 55%, rgb(0 0 0 / 7%)); box-shadow: inset 0 1px 1px rgb(255 255 255 / 22%), inset 0 -2px 3px rgb(0 0 0 / 22%), inset 0 0 0 1px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 10%); }
.button-small { min-height: 44px; font-size: 12px; padding: 12px 18px; }
.hero { padding: 83px 24px 28px; }
.hero-copy { max-width: 1060px; }
.hero h1 { font-size: clamp(38px, 4.5vw, 62px); line-height: 1.14; letter-spacing: -.055em; }
.hero-description { max-width: 600px; margin: 28px auto 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.hero-actions { margin-top: 26px; }
.demo-section { padding: 0 32px 85px; background: transparent; }
.preview-stage { max-width: 1080px; }
.inverse-surface .button { box-shadow: inset 0 1px 1px rgb(255 255 255 / 95%), inset 0 -2px 3px rgb(0 0 0 / 12%), inset 0 0 0 1px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 12%); }
.browser-demo { max-width: 1080px; border-radius: 12px; transform: perspective(1600px) rotateX(var(--preview-tilt, 10deg)) scale(var(--preview-scale, .8)); transform-origin: center top; box-shadow: 0 0 0 1px rgb(0 0 0 / 7%), 0 12px 24px -16px rgb(0 0 0 / 15%), 0 24px 80px -18px rgb(70 70 70 / 17%), 0 0 48px -16px rgb(100 100 100 / 10%); }
.browser-bar { background: var(--soft); padding-block: 12px; }
.sidepanel-chrome { background: var(--soft); }
.video-art { isolation: isolate; background: #30302e; }
.video-series { position: relative; z-index: 1; letter-spacing: 1.6px; }
.video-series>span { padding: 0 8px; opacity: .5; }
.lesson-slide { position: relative; z-index: 1; }
.lesson-slide>p { max-width: 78%; font-size: clamp(27px, 2.8vw, 41px); }
.lesson-kicker { display: none; }
.recall-art { position: absolute; right: -70px; top: 38px; width: 285px; height: 285px; z-index: -1; color: #deddd1; opacity: .28; transform: rotate(-22deg); }
.recall-orbit { position: absolute; inset: 25px 65px; border: 1px solid currentColor; border-radius: 50%; }
.orbit-two { transform: rotate(60deg); }.orbit-three { transform: rotate(120deg); }
.orbit-center { position: absolute; inset: 0; display: grid; place-items: center; font: italic 28px var(--serif); transform: rotate(22deg); }
.recall-loop { position: relative; font-size: 8px; }
/* Each feature reads as a centered title, a short explanation, and one working example. */
.feature-story { max-width: 1100px; padding: 50px 40px 40px; }
.feature-row, .feature-row-reverse { display: flex; flex-direction: column; gap: 34px; padding: 55px 0; min-height: 0; }
.feature-row+.feature-row { margin-top: 15px; }
.feature-copy, .feature-row-reverse .feature-copy { order: 0; max-width: 680px; margin: 0 auto; text-align: center; }
.feature-copy :is(h2, h3) { font-size: clamp(26px, 2.7vw, 33px); margin: 0 0 18px; line-height: 1.25; }
.feature-copy>p { max-width: 540px; margin: 0 auto; font-size: 14px; line-height: 1.8; }
.feature-visual, .feature-row-reverse .feature-visual { order: 1; position: relative; width: 100%; max-width: 620px; min-height: 0; padding: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.reading-sheet, .moment-player, .conversation-preview { width: 100%; max-width: 620px; transform: none; border-radius: 10px; box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 3%), 0 16px 32px -20px rgb(0 0 0 / 16%); }
.reading-content>p { font-size: 14px; padding: 17px 28px 17px 65px; }
.reading-content>p>span { left: 21px; top: 21px; }
.reading-content>p.reading-highlight { background: var(--soft); box-shadow: inset 2px 0 #a0a09b; }
.reading-footer { background: var(--surface); font-size: 11px; }
.moment-screen { background: #363633; min-height: 280px; padding: 30px 36px 60px; }
.moment-screen>p { max-width: 410px; font-size: 38px; }
.conversation-preview { padding: 28px; }
.conversation-preview-heading { font-size: 13px; }
.attached-transcript { background: var(--soft); font-size: 12px; }
.question-bubble { background: var(--soft); font-size: 13px; margin-left: 75px; }
.answer-preview { font-size: 13px; line-height: 1.8; }
.feature-provider-actions { flex-wrap: nowrap; }
.feature-provider-actions>span { width: auto; }
.feature-provider-actions button { min-height: 44px; background: var(--soft); box-shadow: inset 0 1px 1px var(--line), inset 0 -1px 2px rgb(0 0 0 / 8%), inset 0 0 0 1px rgb(0 0 0 / 5%); }
.pro-story { max-width: 1100px; margin: 0 auto 55px; padding: 55px 40px; display: flex; flex-direction: column; gap: 0; background: var(--surface); align-items: center; }
.pro-story-copy { display: contents; }
.pro-story-copy h2 { order: 0; max-width: 750px; text-align: center; }
.pro-story-copy>p { order: 1; text-align: center; }
.pro-story .summary-workspace { order: 2; width: 100%; max-width: 680px; margin-top: 36px; transform: none; }
.pro-story .pro-benefits { order: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 800px; margin: 30px 0 15px; text-align: center; }
.pro-story .pro-benefits li { margin: 0; }
.pro-badge { display: inline-flex; padding: 6px 9px; background: var(--accent); color: var(--accent-foreground); font-size: 9px; letter-spacing: 1.6px; border-radius: 4px; }
.pro-story h2 { margin: 0 0 18px; font-size: clamp(28px, 2.9vw, 38px); }
.pro-story-copy>p { max-width: 540px; font-size: 14px; color: var(--muted); line-height: 1.85; }
.pro-benefits { list-style: none; margin: 30px 0 20px; padding: 0; }
.pro-benefits li { display: flex; gap: 16px; margin-top: 19px; }
.pro-benefits li>span { color: var(--muted); font-size: 10px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.pro-benefits strong { font-size: 13px; font-weight: 600; }
.pro-benefits p { margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.summary-workspace { background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 6px 10px -6px rgb(0 0 0 / 10%), 0 25px 50px -25px rgb(0 0 0 / 25%); transform: rotate(1deg); }
.summary-topline { padding: 17px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 13px; }
.summary-topline>span:first-child { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.summary-topline>span:last-child { font-size: 10px; padding: 2px 7px; border-radius: 4px; background: var(--soft); }
.summary-source { display: flex; gap: 12px; margin: 20px 22px; font-size: 11px; font-weight: 500; line-height: 1.5; align-items: center; }
.summary-source small { display: block; color: var(--muted); font-weight: 400; font-size: 10px; margin-top: 4px; }
.summary-source-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 38px; background: var(--soft); border-radius: 5px; font-size: 10px; padding-left: 2px; }
.summary-options { display: flex; padding: 0 22px; gap: 20px; border-bottom: 1px solid var(--line); }
.summary-options button { min-height: 44px; padding: 8px 0; background: transparent; border-bottom: 2px solid transparent; font-size: 11px; color: var(--muted); transition: color 160ms, border-color 160ms, scale 150ms; }
.summary-options button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.summary-options button:hover { color: var(--ink); }.summary-options button:active { scale: .96; }
.summary-document { padding: 28px 28px 22px; min-height: 390px; }
.document-label { color: var(--muted); font-size: 8px; letter-spacing: 1.6px; }
.summary-document h3 { font-size: 26px; font-weight: 400; line-height: 1.35; margin: 12px 0; letter-spacing: -.7px; }
.summary-document>p { font-size: 12px; line-height: 1.8; color: var(--muted); }
.summary-insights { margin-top: 21px; }
.summary-insights>div { display: flex; gap: 12px; margin: 14px 0; font-size: 11px; line-height: 1.8; }
.summary-insights>div>span { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.summary-insights strong { font-weight: 600; }
.summary-citation { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px; padding: 9px 12px; background: var(--soft); border-radius: 5px; font-size: 10px; }
.summary-citation:hover { background: var(--hover); }
.summary-citation>span { margin-left: auto; font-variant-numeric: tabular-nums; }
.summary-bottom { display: flex; justify-content: space-between; padding: 13px 22px; background: var(--surface); color: var(--muted); font-size: 9px; }
.pricing-section { padding: 95px 32px; background: var(--surface); box-shadow: none; }
.section-heading h2 { font-size: clamp(30px, 3.1vw, 42px); }
.section-heading>p { max-width: 420px; margin: 23px auto 0; font-size: 14px; line-height: 1.8; }
.pricing-cadence { margin: 32px 0; }
.billing-switch { padding: 4px; border-radius: 9px; background: var(--soft); }.billing-switch button { min-height: 44px; border-radius: 5px; }
.pricing-cards { max-width: 860px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.price-card { padding: 34px; border-radius: 12px; background: var(--paper); }
.price-card.inverse-surface { background: var(--soft); }
.plan-heading h3 { font-size: 21px; }
.plan-description { font-size: 12px; min-height: 0; }
.price { margin-top: 30px; min-height: 86px; }.price strong { font-size: 67px; }
.price-card>.button { min-height: 48px; font-size: 13px; border-radius: 6px; }
.plan-features { font-size: 12px; margin: 27px 0 20px; }.plan-features li { margin-bottom: 14px; }
.plan-footnote { font-size: 10px; }
.comparison { max-width: 860px; margin-top: 65px; }
.comparison-heading h3 { font-size: 18px; }
.comparison table { table-layout: fixed; min-width: 0; font-size: 12px; }
.comparison th:first-child { width: 52%; }.comparison th:not(:first-child), .comparison td { text-align: center; }
.comparison th, .comparison td { padding: 18px 10px; }
.comparison thead th:nth-child(3), .comparison td:nth-child(3) { background: var(--surface); color: var(--ink); }
.questions { max-width: 1100px; padding: 85px 40px 100px; gap: 70px; }
.questions h2 { font-size: 33px; margin-top: 12px; }
.faq-list summary { font-size: 13px; }.faq-list details p { font-size: 13px; }
.closing { position: relative; isolation: isolate; overflow: hidden; max-width: 1240px; margin: 0 auto 24px; width: calc(100% - 48px); padding: 52px 32px 64px; border-radius: 24px; background: radial-gradient(ellipse at 50% 0, rgb(255 255 255 / 4%), transparent 70%), #242424; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%); }
.closing::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / 12%) .8px, transparent .8px); background-size: 22px 22px; mask-image: linear-gradient(#000, transparent 68%); }
.closing-art { --closing-loop-duration: 12s; position: relative; display: grid; place-items: center; width: min(100%, 960px); height: 88px; margin: 0 auto 32px; }
.closing-timeline { position: absolute; width: 100%; height: 88px; fill: none; stroke: none; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.closing-track { stroke: rgb(255 255 255 / 12%); stroke-width: 1; }
.closing-captions { fill: rgb(255 255 255 / 4%); stroke: rgb(255 255 255 / 15%); stroke-width: 1; }
.closing-playhead { stroke: #b7b7b7; stroke-width: 1.5; }
.closing-playhead-dot { fill: #b7b7b7; }
@media (prefers-reduced-motion: no-preference) {
  .closing-playhead-marker { animation: closing-timeline-pass var(--closing-loop-duration) linear infinite; }
  .closing-emblem::before { animation: closing-emblem-halo var(--closing-loop-duration) var(--ease-out) infinite; }
}
@keyframes closing-timeline-pass {
  0% { transform: translateX(-168px); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateX(692px); opacity: 0; }
}
/* Begin on the approach to the left edge, then hold through the full crossing.
   After the playhead clears the logo, the halo releases in 960ms. */
@keyframes closing-emblem-halo {
  0%, 41%, 100% { opacity: 0; transform: scale(.96); }
  44.5%, 57% { opacity: 1; transform: scale(1); }
  65% { opacity: 0; transform: scale(1.1); }
}
.closing-ticks { stroke: rgb(255 255 255 / 15%); stroke-width: 1; }
.closing-emblem { position: relative; isolation: isolate; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 18px; background: linear-gradient(#3c3c3c, #2d2d2d); color: #fafafa; font: 600 44px/1 var(--sans); letter-spacing: -.04em; box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 8px 24px rgb(0 0 0 / 24%); }
.closing-emblem img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: inherit; filter: grayscale(1); }
.closing-emblem::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; opacity: 0; pointer-events: none; }
.closing-emblem::before { z-index: 0; box-shadow: 0 0 20px rgb(255 255 255 / 20%), 0 0 56px rgb(255 255 255 / 12%); }
.closing h2 { max-width: 760px; margin: 0 auto 20px; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.2; letter-spacing: -.04em; color: #fafafa; }
.closing h2 span { display: block; }
.closing-description { max-width: 360px; margin: 0 auto 30px; color: #b5b5b5; font-size: 14px; line-height: 1.75; }
.closing.inverse-surface .button:disabled { min-width: 144px; min-height: 50px; padding: 14px 26px; border-radius: 8px; background: var(--accent); color: var(--accent-foreground); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 2px 4px rgb(0 0 0 / 15%); }
@media (max-width: 1100px) {
  .summary-document { padding: 24px; min-height: 420px; }
}
@media (max-width: 720px) {
  .header { padding: 16px 20px; gap: 16px; }.header .brand { font-size: 16px; }.header nav { font-size: 12px; }
  .button-small { font-size: 10px; padding: 10px 12px; }.header .button-small span { display: none; }
  .hero { padding: 54px 20px 24px; }.hero h1 { font-size: clamp(28px, 5.8vw, 39px); line-height: 1.2; }
  .hero-description { font-size: 13px; max-width: 355px; margin-top: 24px; }.hero-actions { margin-top: 23px; }
  .hero-actions .button { font-size: 12px; min-height: 48px; padding: 12px 20px; }
  .demo-section { padding: 0 14px 45px; }
  .browser-bar { padding: 10px; }.recall-art { right: -55px; top: -10px; }
  .video-art { width: 100%; aspect-ratio: auto; min-height: 245px; padding: 22px 18px; }
  .lesson-slide>p { max-width: 90%; font-size: 29px; }.recall-loop { flex-wrap: wrap; gap: 4px; font-size: 7px; }
  .feature-intro>p { margin: 20px 0 0; max-width: 350px; font-size: 13px; }
  .summary-workspace { transform: none; }.summary-document { min-height: 410px; padding: 24px 20px; }.summary-document h3 { font-size: 25px; }
  .summary-topline, .summary-bottom { padding-inline: 18px; }.summary-source { margin-inline: 18px; }
  .pricing-section { padding: 60px 24px; }.section-heading h2 { font-size: 28px; }.section-heading>p { font-size: 13px; }
  .pricing-cards { grid-template-columns: 1fr; max-width: 440px; gap: 18px; }.price-card { padding: 28px; }.price strong { font-size: 64px; }
  .comparison { margin-top: 48px; }.comparison-heading h3 { font-size: 18px; }.comparison table { font-size: 10px; }.comparison th, .comparison td { padding: 15px 7px; }.comparison thead th { font-size: 11px; }
  .questions { margin: 0; padding: 55px 24px 65px; gap: 20px; }.questions h2 { font-size: 28px; }
  .closing { width: calc(100% - 28px); margin: 0 auto 14px; padding: 32px 18px 40px; border-radius: 18px; }.closing h2 { font-size: clamp(23px, 5.4vw, 34px); margin-bottom: 18px; line-height: 1.25; }
  .closing-art { width: calc(100% + 36px); margin-left: -18px; height: 76px; margin-bottom: 26px; }
  .closing-timeline { width: 640px; max-width: none; height: 76px; }
  .closing-emblem { width: 60px; height: 60px; border-radius: 15px; font-size: 36px; }
  .closing-description { max-width: 280px; font-size: 13px; margin-bottom: 26px; }
}
@media (max-width: 720px) {
  .feature-story { padding: 25px 20px; }
  .feature-row, .feature-row-reverse { gap: 24px; padding: 35px 0; }
  .feature-copy h3 { font-size: 26px; }.feature-copy>p { font-size: 13px; }
  .feature-visual, .feature-row-reverse .feature-visual { padding: 0; }
  .reading-content>p { padding: 14px 15px 14px 48px; font-size: 12px; }.reading-content>p>span { left: 12px; top: 18px; }
  .moment-screen { padding: 24px 22px 55px; min-height: 235px; }.moment-screen>p { font-size: 30px; }
  .conversation-preview { padding: 18px; }.conversation-preview-heading { flex-direction: column; }
  .attached-transcript { font-size: 10px; }.question-bubble { margin-left: 20px; font-size: 12px; }.answer-preview { font-size: 11px; }
  .feature-provider-actions { flex-wrap: wrap; }.feature-provider-actions>span { width: 100%; }
  .pro-story { padding: 40px 20px; margin: 0 auto 25px; }.pro-story h2 { font-size: 26px; }
  .pro-story .pro-benefits { grid-template-columns: 1fr; gap: 20px; max-width: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .browser-demo { transform: none; }
  .summary-options button:active { scale: 1; }
}