:root {
  color-scheme: light;
  --ink: #151719;
  --muted: #777b81;
  --line: #e8e9eb;
  --paper: #fff;
  --wash: #f7f7f8;
  --lilac: #e9d8f2;
  --mint: #d9eee4;
  --sand: #f4e8cb;
  --green: #27684f;
  font-family: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
/* Decorative glows (.preview-glow) intentionally bleed past their parents.
   `clip` contains that bleed without creating a scroll container, so the
   sticky .site-header — which lives outside <main> — keeps working. */
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 clamp(24px, 4.2vw, 68px); border-bottom: 1px solid #ececef; background: rgb(255 255 255 / 91%); backdrop-filter: blur(18px); }
@media (min-width: 641px) { .site-header { display: flex; justify-content: center; gap: clamp(28px, 5vw, 64px); }.site-header .header-cta { display: none; } }
.wordmark { position: relative; display: inline-flex; align-items: center; width: fit-content; }
.brand-logo { display: block; height: 24px; width: auto; max-width: min(230px, 34vw); object-fit: contain; }
@media (max-width: 600px) { .brand-logo { height: 20px; max-width: min(190px, 56vw); } }
.wordmark-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: var(--ink); color: white; font-size: 15px; font-weight: 800; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 3.2vw, 48px); }
.desktop-nav a, .site-footer a { color: #656a70; font-size: 14px; font-weight: 550; transition: color .16s ease; }
.desktop-nav a:hover, .site-footer a:hover { color: var(--ink); }
.header-cta { justify-self: end; }
.button { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 18px; padding: 0 21px; border: 1px solid transparent; border-radius: 15px; font-size: 14px; font-weight: 650; letter-spacing: -.15px; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
@media (hover: hover) and (pointer: fine) { .button:hover { transform: translateY(-1px); } }
.button:active { transform: translateY(1px); opacity: .92; }
.button-dark { background: var(--ink); color: white; box-shadow: 0 7px 18px #10111416; }
.button-dark:hover { background: #292c2e; box-shadow: 0 10px 24px #10111422; }
.button-light { border-color: #e2e3e5; background: #fff; color: var(--ink); }
.button-light:hover { border-color: #bfc2c5; background: #fafafa; }
.button-white { background: white; color: var(--ink); box-shadow: 0 8px 22px #0002; }
.button-white:hover { background: #f1f1f3; }
.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); align-items: center; gap: clamp(30px, 6vw, 88px); min-height: 680px; padding-block: 76px 82px; }
.hero-copy { position: relative; z-index: 2; padding-left: clamp(0px, 1vw, 14px); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; color: #686d73; font-size: 11px; font-weight: 750; letter-spacing: 2px; line-height: 1.35; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #b47cc8; box-shadow: 0 0 0 5px #f1e8f5; }
h1, h2, h3, p { overflow-wrap: break-word; }
.hero h1 { max-width: 620px; margin: 0; font-size: clamp(52px, 6.4vw, 82px); font-weight: 650; letter-spacing: -5.4px; line-height: .98; }
.hero-lede { max-width: 500px; margin: 26px 0 0; color: #646971; font-size: clamp(17px, 1.55vw, 20px); line-height: 1.6; letter-spacing: -.25px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; color: #777c83; font-size: clamp(30px, 2.8vw, 36px); font-weight: 650; }
.hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
.hero-notes i { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #eff0f1; color: #74787e; font-size: 10px; font-style: normal; }
.preview-scene { position: relative; display: grid; min-height: 530px; place-items: center; isolation: isolate; }
.preview-glow { position: absolute; z-index: -1; inset: 5% -1% 5% 8%; border-radius: 46%; background: radial-gradient(ellipse at 56% 46%, #efdef5 0, #f6eff8 29%, #fbf9fc 54%, transparent 73%); filter: blur(5px); }
.preview-window { position: relative; width: min(100%, 530px); overflow: hidden; border: 1px solid #dfe1e4; border-radius: 25px; background: #fff; box-shadow: 0 28px 90px #1c18240f, 0 5px 20px #24232b08; transform: rotate(-1.1deg); }
.window-bar { display: flex; height: 46px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #eeeef0; color: #888c92; font-size: 10px; font-weight: 600; letter-spacing: .25px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dedee1; }
.window-dots i:first-child { background: #d9a9ad; }.window-dots i:nth-child(2) { background: #ebd5a8; }.window-dots i:last-child { background: #a9cfb3; }
.window-menu { color: #b2b4b8; letter-spacing: 1px; }
.preview-content { padding: 26px 29px 23px; background: linear-gradient(135deg, #fff 42%, #fbf9fc); }
.preview-kicker { display: flex; justify-content: space-between; color: #999da3; font-size: 9px; font-weight: 750; letter-spacing: 1.3px; }
.preview-kicker span { color: #8d7334; }
.preview-content h2 { margin: 6px 0 18px; font-size: 32px; font-weight: 650; letter-spacing: -1.5px; }
.preview-summary { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-bottom: 13px; }
.preview-summary > div { display: grid; gap: 8px; min-height: 69px; padding: 12px 14px; border: 1px solid #ececef; border-radius: 13px; background: #fff; }
.preview-summary small { color: #9a9da2; font-size: 8px; font-weight: 750; letter-spacing: .8px; }
.preview-summary strong { color: #27292d; font-size: 13px; font-weight: 650; }
.preview-card { padding: 15px 16px 10px; border: 1px solid #e9e8ec; border-radius: 15px; background: white; }
.preview-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #f0f0f2; }
.preview-card-head b { font-size: 13px; font-weight: 700; }.preview-card-head span { color: #91959b; font-size: 9px; }
.preview-task { display: flex; min-height: 39px; align-items: center; gap: 9px; border-bottom: 1px solid #f2f2f3; color: #53575d; font-size: 11px; }
.preview-task:last-child { border: 0; }.preview-task i { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border: 1.5px solid #cfd1d4; border-radius: 5px; color: white; font-size: 9px; font-style: normal; }
.preview-task.is-done { color: #96999e; text-decoration: line-through; }.preview-task.is-done i { border-color: #24262a; background: #24262a; }
.preview-task em { margin-left: auto; padding: 4px 7px; border-radius: 99px; background: #f7f1e3; color: #7d6526; font-size: 8px; font-style: normal; }
.preview-calendar { display: grid; grid-template-columns: 44px 3px 1fr; gap: 10px; align-items: stretch; margin-top: 15px; padding: 3px 0 3px; }
.calendar-time { color: #777c83; font-size: 10px; font-weight: 650; }.preview-calendar > i { border-radius: 5px; background: #a98f4a; }
.preview-calendar b { display: block; font-size: 11px; }.preview-calendar small { display: block; margin-top: 3px; color: #92969b; font-size: 9px; }
.window-bottom { display: flex; height: 48px; align-items: center; justify-content: space-around; border-top: 1px solid #eff0f1; color: #92969c; font-size: 9px; font-weight: 600; }
.window-bottom .active { color: #815f91; }
.preview-caption { position: absolute; right: 0; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #eeeeef; border-radius: 15px; background: rgb(255 255 255 / 92%); box-shadow: 0 8px 26px #2221; transform: translate(12%, 0); }
.caption-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; background: #f2eaf6; color: #876397; font-size: 17px; }
.preview-caption b, .preview-caption small { display: block; }.preview-caption b { font-size: 10px; }.preview-caption small { margin-top: 2px; color: #92969c; font-size: 9px; }
.feature-band { padding: 112px 0 120px; background: #f7f7f8; }
.section-inner { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 70px; }
.section-heading h2, .closing-inner h2 { margin: 0; font-size: clamp(37px, 4.2vw, 53px); font-weight: 650; letter-spacing: -2.6px; line-height: 1.06; }
.section-heading > p:last-child { max-width: 390px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.section-heading .eyebrow { margin-bottom: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.feature-card { position: relative; min-height: 250px; overflow: hidden; padding: 21px; border: 1px solid #e8e8ea; border-radius: 20px; background: white; }
.feature-card-lilac { background: linear-gradient(145deg, #f7f0fa, #fff 82%); }.feature-card-mint { background: linear-gradient(145deg, #eff8f3, #fff 82%); }.feature-card-sand { background: linear-gradient(145deg, #fbf5e8, #fff 82%); }
.feature-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: #fff; box-shadow: 0 2px 8px #19191b08; color: #735780; font-size: 17px; font-weight: 700; }
.feature-card h3 { margin: 32px 0 9px; font-size: 17px; font-weight: 700; letter-spacing: -.4px; }.feature-card p { max-width: 240px; margin: 0; color: #70747b; font-size: 13px; line-height: 1.55; }
.feature-number { position: absolute; right: 19px; bottom: 17px; color: #bbbcc0; font-size: 10px; font-weight: 650; letter-spacing: 1px; }
.ios-section { overflow: hidden; background: #101113; color: white; }
.ios-inner { position: relative; display: grid; min-height: 460px; grid-template-columns: 1fr 1fr; align-items: center; }
.ios-copy { position: relative; z-index: 2; max-width: 550px; padding-block: 80px; }
.eyebrow-light { color: #b6b7bc; }.status-pill { padding: 6px 8px; border: 1px solid #4a4c51; border-radius: 999px; color: #e6d9ef; font-size: 9px; letter-spacing: 1px; }
.ios-copy h2 { margin: 0; font-size: clamp(40px, 4.8vw, 58px); font-weight: 620; letter-spacing: -3px; line-height: 1.02; }
.ios-copy > p:not(.eyebrow) { max-width: 440px; margin: 19px 0 27px; color: #b3b4ba; font-size: 16px; line-height: 1.6; }
.ios-art { position: relative; height: 460px; }
.ios-orbit { position: absolute; border: 1px solid #ffffff14; border-radius: 50%; }.orbit-one { width: 380px; height: 380px; top: 40px; left: 50%; transform: translateX(-50%); }.orbit-two { width: 290px; height: 290px; top: 85px; left: 50%; transform: translateX(-50%); border-color: #d5b6e72b; }
.ios-phone { position: absolute; top: 29px; left: 50%; width: 226px; height: 406px; padding: 29px 19px 14px; border: 7px solid #292b30; border-radius: 39px; background: #fbfbfc; color: #18191c; box-shadow: 0 30px 80px #0008; transform: translateX(-50%) rotate(3deg); }
.ios-notch { position: absolute; top: 8px; left: 50%; width: 75px; height: 17px; border-radius: 99px; background: #151619; transform: translateX(-50%); }
.ios-phone-date { margin-top: 10px; color: #94969b; font-size: 7px; font-weight: 700; letter-spacing: 1px; }.ios-phone > strong { display: block; margin-top: 3px; font-size: 25px; letter-spacing: -1px; }.ios-phone-rule { height: 1px; margin: 10px 0 12px; background: #ebebed; }
.ios-phone-chip { color: #85888f; font-size: 7px; font-weight: 750; letter-spacing: 1px; }.ios-phone-lines { display: grid; gap: 7px; margin-top: 11px; }.ios-phone-lines i { height: 6px; border-radius: 99px; background: #e5e5e8; }.ios-phone-lines i:first-child { width: 48%; background: #b9a4c4; }.ios-phone-lines i:nth-child(2) { width: 83%; }.ios-phone-lines i:last-child { width: 60%; }
.ios-phone-task { display: flex; align-items: center; gap: 9px; height: 42px; border-bottom: 1px solid #efeff1; }.ios-phone-task:first-of-type { margin-top: 16px; }.ios-phone-task i { display: grid; width: 15px; height: 15px; place-items: center; border: 1px solid #c9cacf; border-radius: 5px; color: white; font-size: 9px; font-style: normal; }.ios-phone-task:first-of-type i { background: #222326; border-color: #222326; }.ios-phone-task span { width: 75%; height: 6px; border-radius: 99px; background: #e5e5e8; }.ios-phone-task:last-of-type span { width: 55%; }
.ios-phone-nav { position: absolute; right: 12px; bottom: 11px; left: 12px; display: flex; justify-content: space-around; }.ios-phone-nav i { width: 13px; height: 13px; border: 1.5px solid #b3b5ba; border-radius: 50%; }.ios-phone-nav i:first-child { border-color: #9b76a9; background: #9b76a9; }
.ios-spark { position: absolute; color: #dabce9; }.spark-one { top: 88px; right: 12%; font-size: 32px; }.spark-two { bottom: 79px; left: 15%; color: #8bc5a6; font-size: 23px; }
.pricing-section { padding-block: 112px 120px; }
.pricing-heading { max-width: 680px; margin: 0 auto 42px; text-align: center; }.pricing-heading .eyebrow { justify-content: center; }.pricing-heading > p:last-child { max-width: 540px; margin-inline: auto; }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; gap: 17px; width: min(820px, 100%); margin: 0 auto; }
.price-card { display: flex; min-height: 405px; flex-direction: column; padding: 29px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 8px 28px #1d1d2208; }
.price-card-premium { border-color: #252629; background: #151619; color: white; box-shadow: 0 22px 55px #15161920; }
.price-top { display: flex; align-items: center; justify-content: space-between; }.price-card-premium .price-top { justify-content: center; margin-bottom: 12px; }.plan-name { color: #84888e; font-size: 16px; font-weight: 800; letter-spacing: 1.5px; }.plan-symbol { color: #94809f; font-size: 22px; }.plan-tag { padding: 6px 9px; border-radius: 99px; background: #eee4f3; color: #70557d; font-size: 10px; font-weight: 750; }
.price-card h3 { min-height: 47px; margin: 21px 0 10px; font-size: 20px; font-weight: 650; letter-spacing: -.65px; }.price { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -2px; }.price span { color: #858990; font-size: 13px; font-weight: 500; letter-spacing: 0; }.price-annual { margin: -3px 0 6px; color: #d8c17d; font-size: 14px; font-weight: 650; }.price-description { min-height: 46px; margin: 6px 0 18px; color: #858990; font-size: 12px; line-height: 1.5; }.price-card ul { display: grid; gap: 12px; margin: 0 0 23px; padding: 0; list-style: none; }.price-card li { display: flex; align-items: flex-start; gap: 10px; color: #585c62; font-size: 12px; line-height: 1.4; }.price-card li::before { content: '✓'; color: #4b9774; font-size: 13px; font-weight: 800; }.price-card-premium .price-description, .price-card-premium li { color: #c0c1c6; }.price-card-premium .price span { color: #a4a5ab; }.price-button { width: 100%; min-height: 49px; margin-top: auto; border-radius: 13px; font-size: 13px; }.price-card .button-light { background: #f7f7f8; }.price-card .button-light:hover { background: #ededf0; }
.closing-section { padding: 84px 0 92px; background: #f5f1f7; text-align: center; }.closing-inner .eyebrow { justify-content: center; margin-bottom: 13px; }.closing-inner h2 { font-size: clamp(38px, 4.5vw, 56px); }.closing-inner > p:not(.eyebrow) { margin: 12px 0 24px; color: #70737a; font-size: 16px; }
.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 28px; padding: 27px clamp(24px, 5vw, 76px); background: #111214; color: white; }.site-footer .wordmark { justify-self: start; color: white; }.site-footer .wordmark-icon { background: white; color: #111214; }.site-footer > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px clamp(16px, 2vw, 28px); }.site-footer a { color: #b8b9bf; font-size: 11px; }.site-footer > small { justify-self: end; color: #787b81; font-size: 10px; white-space: nowrap; }
.site-footer a.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-width: 24px; height: 24px; color: #fff; }
.site-footer .social-icon svg { display: block; width: 20px; height: 20px; }
.site-footer .instagram-link svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer :is(.tiktok-link, .linkedin-link) svg { fill: currentColor; }
.site-footer .instagram-link .instagram-dot { fill: currentColor; stroke: none; }
.site-footer .social-icon:focus-visible { border-radius: 4px; outline: 2px solid currentColor; outline-offset: 3px; }
.partner-callout { position: relative; overflow: hidden; padding: clamp(72px, 10vw, 132px) 24px; background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--accent, #d8c17d) 16%, transparent), transparent 55%), #101012; text-align: center; }
.partner-callout-inner { width: min(720px, 100%); margin: 0 auto; }
.partner-callout .eyebrow { justify-content: center; margin: 0 0 16px; }
.partner-callout h2 { max-width: 680px; margin: 0 auto; font-size: clamp(36px, 5.3vw, 62px); font-weight: 650; letter-spacing: -.055em; line-height: 1.04; }
.partner-callout > .partner-callout-inner > p:not(.eyebrow) { max-width: 520px; margin: 18px auto 28px; color: var(--muted); font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; }
.partner-callout .button { min-height: 52px; margin-top: 28px; }
:focus-visible { outline: 3px solid #8a65a0; outline-offset: 3px; }
@media (max-width: 950px) {
  .wrap { width: min(100% - 48px, 720px); }
  .site-header { padding-inline: 24px; }
  .desktop-nav { gap: 21px; }
  .hero { grid-template-columns: 1fr 1fr; gap: 22px; min-height: 600px; }
  .hero h1 { font-size: clamp(48px, 6vw, 66px); letter-spacing: -3.8px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .preview-scene { min-height: 465px; }
  .window-bar { padding-inline: 12px; }.preview-content { padding: 21px 20px; }
  .preview-caption { right: 0; transform: none; }
  .section-inner { grid-template-columns: 1fr; gap: 35px; }
  .feature-grid { gap: 12px; }.feature-card { min-height: 225px; padding: 17px; }
  .site-footer { grid-template-columns: 1fr auto; gap: 18px 24px; }.site-footer > div { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }.site-footer > small { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 64px; grid-template-columns: 1fr auto; padding-inline: 20px; }
  .wordmark { gap: 8px; font-size: 14px; }.wordmark-icon { width: 29px; height: 29px; }
  .desktop-nav { display: none; }
  .header-cta { min-height: 42px; padding-inline: 14px; border-radius: 13px; font-size: 12px; }
  .hero { grid-template-columns: 1fr; gap: 35px; min-height: 0; padding-block: 30px 72px; }
  .hero-copy { padding-left: 0; }
  .eyebrow { margin-bottom: 19px; font-size: 9px; letter-spacing: 1.55px; }
  .hero h1 { font-size: clamp(49px, 13vw, 65px); letter-spacing: -3.6px; }
  .hero-lede { max-width: 440px; margin-top: 19px; font-size: 16px; }
  .hero-actions { flex-direction: row; gap: 9px; margin-top: 24px; }.hero-actions .button { min-height: 47px; gap: 10px; padding-inline: 14px; border-radius: 13px; font-size: 12px; }
  .hero-notes { display: grid; gap: 10px; margin-top: 18px; font-size: 22px; }
  .preview-scene { min-height: 365px; margin-inline: -2px; }
  .preview-window { width: 100%; border-radius: 20px; transform: rotate(-.5deg); }
  .window-bar { height: 39px; font-size: 9px; }.preview-content { padding: 19px 16px 15px; }
  .preview-content h2 { font-size: 27px; }.preview-summary > div { min-height: 60px; padding: 10px; }.preview-summary strong { font-size: 11px; }
  .preview-task { gap: 7px; font-size: 10px; }.preview-task em { font-size: 7px; }.window-bottom { height: 42px; }
  .preview-caption { right: 4px; bottom: -15px; padding: 8px 10px; border-radius: 13px; }.caption-mark { width: 27px; height: 27px; font-size: 14px; }
  .feature-band { padding: 77px 0 82px; }.section-inner { gap: 28px; }.section-heading h2 { font-size: 39px; letter-spacing: -2px; }.section-heading > p:last-child { margin-top: 13px; font-size: 14px; }
  .desktop-break { display: none; }.feature-grid { grid-template-columns: 1fr; gap: 10px; }.feature-card { display: grid; min-height: 0; grid-template-columns: 42px 1fr; column-gap: 13px; padding: 17px; border-radius: 17px; }.feature-icon { grid-row: span 2; }.feature-card h3 { margin: 2px 25px 4px 0; font-size: 15px; }.feature-card p { grid-column: 2; font-size: 12px; }.feature-number { top: 19px; right: 17px; bottom: auto; }
  .ios-inner { grid-template-columns: 1fr; min-height: 0; }.ios-copy { padding: 69px 0 0; }.eyebrow-light { flex-wrap: wrap; row-gap: 12px; }.ios-copy h2 { font-size: 43px; letter-spacing: -2.4px; }.ios-copy > p:not(.eyebrow) { margin: 16px 0 22px; font-size: 14px; }.ios-copy .button { min-height: 47px; border-radius: 13px; font-size: 13px; }
  .ios-art { height: 355px; margin-top: 2px; }.orbit-one { top: 0; width: 320px; height: 320px; }.orbit-two { top: 34px; width: 250px; height: 250px; }.ios-phone { top: -5px; width: 194px; height: 344px; border-radius: 33px; transform: translateX(-50%) rotate(2deg) scale(.91); transform-origin: top center; }.spark-one { top: 37px; right: 11%; }.spark-two { bottom: 57px; left: 13%; }
  .pricing-section { padding-block: 78px 84px; }.pricing-heading { margin-bottom: 27px; }.pricing-heading h2 { font-size: 37px; letter-spacing: -2px; }.pricing-heading > p:last-child { font-size: 14px; }.pricing-grid { grid-template-columns: 1fr; gap: 12px; }.price-card { min-height: 0; padding: 22px; border-radius: 19px; }.price-card h3 { min-height: 0; margin-top: 16px; }.price-description { min-height: 0; }.price-card ul { margin-bottom: 19px; }
  .closing-section { padding: 68px 0 72px; }.closing-inner h2 { font-size: 42px; letter-spacing: -2px; }.closing-inner > p:not(.eyebrow) { font-size: 14px; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 17px; padding: 25px 20px; }.site-footer > div { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: auto; grid-row: auto; gap: 12px 0; }.site-footer > div a { text-align: center; }.site-footer > small { grid-column: auto; grid-row: auto; justify-self: center; }
  .partner-callout { padding: 76px 22px 84px; }.partner-callout h2 { font-size: clamp(36px, 10vw, 48px); }.partner-callout > .partner-callout-inner > p:not(.eyebrow) { margin-block: 16px 23px; font-size: 15px; }
}
@media (max-width: 380px) { .hero-actions .button { padding-inline: 11px; font-size: 11px; }.hero h1 { font-size: 47px; }.preview-task em { display: none; }.site-footer > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Shared motion timings: small gestures, short state changes, quick navigation. */
:root { --motion-quick: 140ms; --motion-control: 200ms; --motion-panel: 300ms; --motion-section: 320ms; --motion-enter: cubic-bezier(.16, 1, .3, 1); --motion-exit: cubic-bezier(.4, 0, 1, 1); --motion-state: cubic-bezier(.4, 0, .2, 1); }
.desktop-nav a, .site-footer a { transition-duration: var(--motion-quick); transition-timing-function: var(--motion-state); }
.button { transition-duration: var(--motion-control); transition-timing-function: var(--motion-enter); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #b47cc8; outline-offset: 3px; transition: outline-color var(--motion-quick) var(--motion-state), box-shadow var(--motion-quick) var(--motion-state); }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-delay: 0ms !important; } .button:hover, .button:active { transform: none !important; } }

/* Black-first site theme, including the product preview and pricing surfaces. */
:root {
  color-scheme: dark;
  --ink: #f4f4f6;
  --muted: #a1a1aa;
  --line: #2a2a30;
  --paper: #080809;
  --wash: #111114;
  --lilac: #d8a6ed;
  --mint: #a7d8c0;
  --sand: #d8c17d;
  --green: #a7d8c0;
}
body { background: var(--paper); color: var(--ink); }
.site-header { border-color: #27272c; background: rgb(8 8 9 / 90%); }
.wordmark-icon { background: #f4f4f6; color: #101012; }
.desktop-nav a, .site-footer a { color: #a1a1aa; }
.desktop-nav a:hover, .site-footer a:hover { color: #fff; }
.button-dark, .button-dark:hover { background: #f4f4f6; color: #101012; }
.button-dark { box-shadow: 0 7px 18px #0005; }
.button-dark:hover { box-shadow: 0 9px 22px #0008; }
.button-light { border-color: #3a3a41; background: #111114; color: #f4f4f6; }
.button-light:hover { border-color: #595961; background: #18181c; }
.button-white { background: #f4f4f6; color: #101012; }
.button-white:hover { background: #dedee3; }
.eyebrow, .hero-lede { color: #a1a1aa; }
.eyebrow-dot { background: #d8a6ed; box-shadow: 0 0 0 5px #d8a6ed20; }
.hero-notes { color: #9a9aa3; }
.hero-notes i { background: #1b1b20; color: #dadade; }
.preview-glow { background: radial-gradient(ellipse at 56% 46%, #d8c17d42 0, #a77c2930 38%, transparent 72%); }
.preview-window { border-color: #303036; background: #111114; box-shadow: 0 28px 90px #0008, 0 5px 20px #0005; }
.window-bar { border-color: #29292f; color: #9b9ba4; }
.window-dots i { background: #45454d; }
.window-dots i:first-child { background: #9b6d72; }
.window-dots i:nth-child(2) { background: #9e885a; }
.window-dots i:last-child { background: #648a74; }
.preview-content { background: linear-gradient(135deg, #141417 42%, #17131a); }
.preview-kicker { color: #a1a1aa; }
.preview-kicker span { color: #cfb87c; }
.preview-summary > div, .preview-card { border-color: #303036; background: #101013; }
.preview-summary small, .preview-card-head span { color: #92929c; }
.preview-summary strong, .preview-card-head b { color: #f4f4f6; }
.preview-task { border-color: #29292f; color: #c6c6cc; }
.preview-task i { border-color: #5a5a63; }
.preview-task.is-done { color: #96969f; }
.preview-task.is-done i { border-color: #f4f4f6; background: #f4f4f6; color: #101012; }
.preview-task em { background: #302a1c; color: #e2cf9b; }
.preview-calendar > i { background: #cfb87c; }
.calendar-time, .preview-calendar small { color: #9999a3; }
.window-bottom { border-color: #2a2a30; background: #101013; color: #9999a3; }
.window-bottom .active { color: #e7c7f3; }
.preview-caption { border-color: #33333a; background: rgb(17 17 20 / 94%); box-shadow: 0 8px 26px #0008; }
.caption-mark { background: #2b2030; color: #e0b7ef; }
.preview-caption small { color: #a1a1aa; }
.feature-band { background: #101013; }
.section-heading > p:last-child { color: #a1a1aa; }
.feature-card, .feature-card-lilac, .feature-card-mint, .feature-card-sand {
  border-color: #303036;
  background: linear-gradient(145deg, #17171b, #111114 82%);
}
.feature-icon { background: #232027; color: #dfb7ef; box-shadow: none; }
.feature-card p { color: #a1a1aa; }
.feature-number { color: #686871; }
.ios-section { background: #0d0d10; }
.pricing-section { background: #080809; }
.pricing-heading > p:last-child { color: #a1a1aa; }
.price-card { border-color: #303036; background: #111114; box-shadow: 0 8px 28px #0005; }
.price-card-premium { border-color: #54505a; background: #1a171d; }
.plan-name, .price span, .price-description { color: #a1a1aa; }
.plan-symbol { color: #d8a6ed; }
.plan-tag { background: #302537; color: #e4c2f1; }
.price-card li { color: #c3c3ca; }
.price-card li::before { color: #a7d8c0; }
.price-card .button-light { border-color: #3a3a41; background: #19191d; color: #f4f4f6; }
.price-card .button-light:hover { background: #242429; }
.closing-section { background: #111014; }
.closing-inner > p:not(.eyebrow) { color: #a1a1aa; }
.site-footer { border-top: 1px solid #28282d; background: #080809; }
.site-footer .wordmark-icon { background: #f4f4f6; color: #101012; }
.site-footer > p { color: #a1a1aa; }

/* Keep the site's masthead present when using the desktop web workspace. */
.web-app-header {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(24px, 4.2vw, 68px);
  border-bottom: 1px solid #27272c;
  background: rgb(8 8 9 / 94%);
  color: #f4f4f6;
  backdrop-filter: blur(18px);
}
.web-app-brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.web-app-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #f4f4f6; color: #101012; font-size: 14px; }
.web-app-header nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); }
.web-app-header nav a, .web-app-home { color: #a1a1aa; font-size: 13px; font-weight: 550; transition: color 140ms ease; }
.web-app-header nav a:hover, .web-app-home:hover { color: #fff; }
.web-app-home { justify-self: end; }
@media (max-width: 760px) { .web-app-header { display: none; } }

/* Fit each desktop headline line to the available hero column. */
@media (min-width: 641px) {
  .hero-copy { container-type: inline-size; }
  .hero h1 { font-size: min(82px, 13cqw); letter-spacing: -.06em; line-height: 1.06; }
  .hero h1 > span { white-space: nowrap; }
}

/* Schedule leads the sample day, followed by counts and tasks. */
.preview-calendar { margin: 16px 0 20px; }
.site-footer > div { flex-wrap: wrap; }

/* Product-first hero: the sample dashboard arrives above the headline. */
.hero.wrap { display: flex; flex-direction: column; gap: 48px; min-height: 0; padding-block: 48px 88px; }
.hero .preview-scene { width: min(100%, 620px); min-height: 0; perspective: 1400px; }
.hero .preview-window { width: 100%; transform: none; transform-origin: 50% 60%; box-shadow: 0 36px 100px #0008; }
.hero .preview-glow { inset: 5% -12%; background: radial-gradient(ellipse, #bf86d826, #83bb9f0c 50%, transparent 72%); }
.hero .hero-copy { width: min(100%, 760px); padding: 0; text-align: center; }
.hero h1 { max-width: none; }
.hero-lede { margin-inline: auto; max-width: 580px; }
.hero-actions, .hero-notes { justify-content: center; }
@media (min-width: 641px) { .hero h1 { font-size: min(82px, 12cqw); } }
@media (max-width: 640px) {
 .hero.wrap { gap: 32px; padding-block: 24px 56px; }
 .hero .preview-scene { width: 100%; }
 .hero .hero-copy { text-align: left; }
 .hero-actions, .hero-notes { justify-content: flex-start; }
}

.preview-stage { width: 100%; }
/* Mobile chrome and the preview window's internal spacing. Hero layout itself
   is owned by the single block at the end of this file — don't set hero size,
   gap or padding here, or the two will fight. */
@media (max-width: 640px) {
 .site-header { height: 60px; padding-inline: 16px; }
 .site-header .brand-logo { max-width: min(175px, 52vw); }
 .header-cta { min-height: 38px; padding-inline: 11px; }
 .hero .preview-content { padding: 16px; }
 .hero .window-bar { height: 34px; }
 .hero .window-bottom { height: 36px; }
 .hero .preview-content h2 { margin: 6px 0 12px; }
 .hero .preview-calendar { margin: 12px 0 16px; }
 .hero .preview-summary > div { min-height: 54px; padding: 9px; }
 .hero .preview-card { padding: 12px 14px 8px; }
 .hero .preview-task { min-height: 35px; }
 .hero-actions .button { gap: 8px; border-radius: 12px; }
}

/* Preserve the original side-by-side composition on desktop. */
@media (min-width: 641px) {
  .hero.wrap {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: clamp(30px, 6vw, 88px);
    min-height: min(680px, calc(100svh - 76px));
    padding-block: 76px 82px;
  }
  .hero .preview-scene {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-height: 530px;
  }
  .hero .preview-stage { width: 100%; }
  .hero .preview-window { width: min(100%, 530px); }
  .hero .hero-copy {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    text-align: left;
    padding-left: clamp(0px, 1vw, 14px);
  }
  .hero-lede { margin-inline: 0; }
  .hero-actions, .hero-notes { justify-content: flex-start; }
}

/* Mobile intro first, followed by the animated dashboard preview.
   The hero is pinned to one screen (viewport minus the 60px sticky header).
   Copy takes the height it needs; the preview uses the remaining space. */
@media (max-width: 640px) {
  .hero.wrap {
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    height: auto;
    min-height: calc(100svh - 60px);
    gap: 16px;
    padding: 48px 0 20px;
  }
  .hero .hero-copy { order: 1; flex: none; width: 100%; text-align: center; }
  .hero .preview-scene { order: 2; flex: 1 1 auto; width: 100%; min-height: 0; height: auto; margin: 0; }
  .hero .preview-stage { position: static; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; transform: none; }
  .hero .preview-window {
    width: 100%;
    height: auto;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 19px;
    transform: none;
  }
  /* Let the preview window follow its real content height when there is room.
     On short screens the window caps at the available stage height. */
  .hero .preview-content { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .hero .window-bar, .hero .window-bottom { flex: none; }
  .hero h1 { font-size: clamp(43px, 12vw, 57px); letter-spacing: -.06em; line-height: 1; }
  .hero h1 > span { white-space: normal; }
  .hero-lede { max-width: 440px; margin-top: 16px; font-size: 15px; line-height: 1.5; }
  .hero-actions { justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
  .hero-actions .button { min-height: 46px; padding-inline: 14px; font-size: 12px; }
  .hero-notes { justify-content: center; margin-top: 14px; font-size: 22px; text-align: center; }
  .hero .preview-caption { display: none; }
}

/* Short screens: shrink the copy so the preview keeps a usable share of the
   fixed hero height. Must stay after the layout block above to win the
   cascade — these were previously declared earlier and had no effect. */
@media (max-width: 640px) and (max-height: 700px) {
  .hero.wrap { gap: 12px; padding: 12px 0 16px; }
  .hero h1 { font-size: clamp(33px, 10vw, 44px); }
  .hero-lede { margin-top: 12px; font-size: 14px; }
  .hero-actions { margin-top: 14px; }
  .hero-notes { margin-top: 10px; }
}
@media (max-width: 640px) and (max-height: 600px) {
  .hero.wrap { gap: 10px; padding: 10px 0 12px; }
  .hero h1 { font-size: 30px; }
  .hero-lede { margin-top: 9px; font-size: 13px; }
  .hero-actions { margin-top: 10px; }
  .hero-notes { margin-top: 8px; }
}


/* Lowercase text styling across the public website. */
body, body * { text-transform: lowercase !important; }

/* Condense redundant preview details on short phones so all sample tasks stay
   above the bottom navigation while the hero remains within one screen. */
@media (max-width: 640px) and (max-height: 760px) {
  .hero .preview-summary { display: none; }
  .hero .preview-calendar { margin: 8px 0 10px; }
  .hero .preview-calendar small { display: none; }
  .hero .preview-content { padding: 12px; }
  .hero .preview-content h2 { margin: 6px 0 8px; }
  .hero .preview-card { padding: 10px 12px 7px; }
  .hero .preview-card-head { padding-bottom: 7px; }
  .hero .preview-task { min-height: 30px; }
}
@media (max-width: 360px) and (max-height: 680px) {
  .hero .preview-calendar { display: none; }
}
@media (max-width: 360px) and (max-height: 620px) {
  .hero .preview-card { padding: 8px 10px 6px; }
  .hero .preview-task { min-height: 26px; }
}

/* Switchable references: use the supplied device photography as-is, with a
   distinct entrance and gentle idle motion for each form factor. */
.hero .preview-scene {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 13px;
  justify-items: center;
  align-items: stretch;
  min-height: 600px;
}
.device-toggle {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: #111114;
  box-shadow: 0 8px 22px #0005;
}
.device-toggle button {
  min-width: 78px;
  min-height: 31px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a1a1aa;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.device-toggle button[aria-pressed="true"] { background: var(--sand); color: #111114; box-shadow: 0 0 0 1px #d8c17d66, 0 2px 8px #0004; }
.device-toggle button:hover:not([aria-pressed="true"]) { color: #f4f4f6; }
.device-toggle button:active { transform: translateY(1px); }
.device-toggle {
  position: relative;
  isolation: isolate;
  --device-toggle-active-fill: var(--sand);
  --device-toggle-active-ink: #111114;
}
.device-toggle::before {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 11px) / 2);
  border-radius: 999px;
  background: var(--device-toggle-active-fill);
  box-shadow: 0 2px 8px #0002;
  content: "";
  pointer-events: none;
  transform: translateX(0);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), background-color 220ms ease, box-shadow 260ms ease;
  will-change: transform;
}
.device-toggle:has([data-device-switch="desktop"][aria-pressed="true"])::before {
  transform: translateX(calc(100% + 3px));
}
.device-toggle > button,
.device-toggle > button:hover,
.device-toggle > button[aria-pressed="true"] {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 260ms cubic-bezier(.22, 1, .36, 1), transform 180ms ease;
}
.device-toggle > button[aria-pressed="true"] { color: var(--device-toggle-active-ink) !important; }
html[data-theme="light"] .device-toggle {
  --device-toggle-active-fill: #e8c56f;
  --device-toggle-active-ink: #241d10;
}
:root[data-theme="dark"][data-dark-palette="black"] .device-toggle {
  --device-toggle-active-fill: #111;
  --device-toggle-active-ink: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .device-toggle::before { transition: none !important; }
}
.preview-stage {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.device-panel { display: grid; width: 100%; height: 100%; min-height: 0; grid-area: 1 / 1; place-items: center; margin: 0; }
.device-panel[hidden] { display: none; }
.device-panel img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 24px 38px #0005); transform-origin: 50% 70%; }
.device-panel[data-device-panel="mobile"] img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { width: auto; height: min(100%, 640px); max-width: min(100%, 370px); }
.device-panel[data-device-panel="desktop"] img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { width: min(100%, 660px); height: auto; }
.device-toggle button:focus-visible { outline: 2px solid #d8a6ed; outline-offset: 3px; }
@media (max-width: 640px) {
  .hero .preview-scene { grid-template-rows: auto minmax(0, 1fr); gap: 7px; min-height: 0; }
  .hero .preview-stage { height: auto; min-height: 0; align-self: stretch; }
  .device-toggle { gap: 2px; padding: 3px; }
  .device-toggle button { min-height: 28px; min-width: 70px; font-size: 10px; }
  .device-panel[data-device-panel="mobile"] img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { width: auto; height: min(66svh, 540px); max-height: none; max-width: min(100%, 360px); }
  .device-panel[data-device-panel="desktop"] img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { width: 100%; height: auto; max-height: min(42svh, 380px); }
}
@media (max-width: 640px) and (max-height: 600px) {
  .device-panel[data-device-panel="mobile"] img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { height: min(40svh, 240px); }
}

@media (max-width: 640px) and (min-height: 601px) and (max-height: 680px) {
  .device-panel[data-device-panel="mobile"] img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { height: min(48svh, 330px); }
}

/* Keep the desktop hero copy anchored while the selected device image changes. */
@media (min-width: 641px) {
  .hero .preview-scene { height: 680px; min-height: 680px; }
  .hero .preview-stage { height: 100%; min-height: 0; }
  .device-panel[data-device-panel="mobile"] img:not(.demo-profile-avatar):not(.mobile-screen-swipe-layer):not(.desktop-screen-swipe-layer) { max-height: 640px; }
}

/* App Store badge stays intentionally inactive until the iOS listing exists. */
.app-store-badge {
  display: inline-flex;
  width: 142px;
  min-width: 142px;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid #d8c17d;
  border-radius: 12px;
  background: #050506;
  color: #fff;
  box-shadow: 0 0 0 1px #d8c17d33, 0 8px 20px #0006;
  font-family: Arial, sans-serif;
  text-align: left;
  cursor: not-allowed;
  opacity: 1;
}
.app-store-badge:disabled { opacity: 1; }
.app-store-badge svg { display: block; width: 18px; height: 22px; flex: 0 0 auto; fill: currentColor; }
.hero-actions .app-store-badge svg { filter: drop-shadow(0 0 4px var(--app-store-glow, #91b4f4)) drop-shadow(0 0 10px color-mix(in srgb, var(--app-store-glow, #91b4f4) 82%, transparent)); }
.app-store-copy { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; text-transform: none !important; }
.app-store-copy > span, .app-store-copy strong { text-transform: none !important; }
.app-store-copy > span { font-size: 9px; line-height: 1.05; font-weight: 400; }
.app-store-copy strong { font-size: 16px; line-height: 1.05; font-weight: 700; letter-spacing: -.25px; }
.header-cta.app-store-badge { justify-self: end; min-height: 46px; padding-inline: 10px; }
.hero-actions .app-store-badge { margin: 0; }
@media (max-width: 380px) {
  .site-header .brand-logo { max-width: min(145px, 43vw); }
  .header-cta.app-store-badge { width: 132px; min-width: 132px; }
}

.web-access-section {
  width: 100%;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-block: 0;
  padding: 28px 34px;
  border-block: 1px solid #29292f;
  border-inline: 0;
  border-radius: 0;
  background: linear-gradient(110deg, #111114, #151219);
  text-align: center;
}
.web-access-section .eyebrow { justify-content: center; margin: 0 0 8px; color: #d8c17d; font-size: 10px; letter-spacing: 1.7px; }
.web-access-section h2 { margin: 0; font-size: clamp(21px, 2.4vw, 29px); letter-spacing: -.9px; }
.web-access-section > div > p:last-child { margin: 7px 0 0; color: #a1a1aa; font-size: 13px; }
.web-access-section .button { flex: 0 0 auto; border-color: #d8c17d; background: #d8c17d; color: #111114; box-shadow: 0 0 0 1px #d8c17d33, 0 7px 20px #0005; }
.web-access-section .button:hover { border-color: #ecd994; background: #ecd994; }
@media (max-width: 640px) {
  .web-access-section { flex-direction: column; align-items: center; gap: 18px; margin-bottom: 0; padding: 24px 20px; text-align: center; }
  .web-access-section h2 { font-size: 23px; }
  .web-access-section > div > p:last-child { max-width: 30ch; font-size: 12px; line-height: 1.5; }
}
@media (max-width: 380px) {
  .site-header .brand-logo { max-width: min(150px, 42vw); }
  .header-cta { gap: 5px; padding-inline: 8px; font-size: 10px; white-space: nowrap; }
}

/* Proportional, front-facing devices with the current dashboard layout. */
.hero .preview-scene { perspective: none; height: auto; min-height: 0; grid-template-rows: auto auto; }
.hero .preview-stage { height: auto; min-height: 690px; align-content: center; }
.device-panel { height: auto; gap: 20px; align-content: center; }
.device-caption { color: #92929d; font-size: 10px; letter-spacing: .04em; text-align: center; }
.dashboard-phone { position: relative; width: min(310px, 100%); aspect-ratio: 390 / 844; border: 2px solid #6a6b72; border-radius: 14% / 6.5%; background: #24252a; box-shadow: inset 0 0 0 2px #141518, 0 30px 90px #0009, 0 0 60px #7852d51a; }
.dashboard-phone::before, .dashboard-phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #696a70; }
.dashboard-phone::before { left: -4px; top: 21%; height: 12%; }
.dashboard-phone::after { right: -4px; top: 29%; height: 9%; }
.dashboard-phone-screen { position: absolute; inset: 6px; display: flex; flex-direction: column; overflow: hidden; border-radius: 13% / 6%; background: #050506; container-type: inline-size; }
.demo-status { position: relative; display: flex; flex: 0 0 13cqw; justify-content: space-between; align-items: center; padding: 0 7cqw; color: #fff; font-size: 3.5cqw; background: #050506; }
.demo-status > span { font-size: 3cqw; letter-spacing: -.1em; }
.demo-island { position: absolute; width: 27%; height: 58%; left: 36.5%; top: 15%; background: #000; border-radius: 100px; box-shadow: inset -6px 0 12px #111; }
.demo-board { min-height: 0; font-size: 3.15cqw; line-height: 1.4; color: #f5f4f8; text-align: left; }
.dashboard-phone .demo-greeting { padding: 2.6em 1.6em 2em; background: radial-gradient(ellipse at 0 10%, #7542bf, transparent 85%), linear-gradient(120deg, #38215d, #130d21 90%); }
.demo-school { font-size: .65em; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.demo-school span { font-weight: 500; color: #d4cbe5; }
.demo-greeting h2 { margin: .8em 0 0; font-size: 2.35em; letter-spacing: -.055em; line-height: 1.2; white-space: nowrap; }
.demo-day-note { display: none; }
.demo-content { position: relative; margin-top: -1em; padding: 1.6em; background: #050506; border-radius: 2.3em 2.3em 0 0; }
.demo-weather { display: grid; grid-template-columns: 1fr 1.18fr; gap: 1em; align-items: center; padding-bottom: 1.9em; }
.demo-weather-now { display: flex; flex-direction: column; gap: .12em; }
.demo-weather-now strong { color: #e6c46f; font-size: 3.1em; line-height: 1; letter-spacing: -.07em; }
.demo-weather-now > span { font-size: 1em; }
.demo-weather-now > small { color: #8b8994; font-size: .7em; white-space: nowrap; }
.demo-weather-hours { display: grid; grid-template-columns: repeat(6, 1fr); }
.demo-weather-hours > div { display: flex; flex-direction: column; align-items: center; gap: .5em; border-left: 1px solid #28262f; }
.demo-weather-hours small { color: #8b8994; font-size: .6em; white-space: nowrap; }
.demo-weather-hours span { color: #90cee9; font-size: .8em; }
.demo-weather-hours b { color: #e6c46f; font-size: .8em; }
.demo-section-head { display: flex; justify-content: space-between; align-items: center; gap: .6em; }
.demo-section-head h3 { margin: 0; font-size: 1.45em; line-height: 1.3; letter-spacing: -.04em; }
.demo-section-head > span { color: #98929f; font-size: .7em; white-space: nowrap; }
.demo-schedule > p { margin: .4em 0 1.1em; color: #8c8994; font-size: .8em; }
.demo-axis { display: flex; justify-content: space-between; color: #8b8994; font-size: .65em; padding-bottom: .6em; }
.demo-track { position: relative; height: 5.8em; overflow: hidden; border: 1px solid #36333e; border-radius: 1.1em; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), #28252e calc(20% - 1px), #28252e 20%); }
.dashboard-phone .demo-event { position: absolute; top: .65em; display: flex; flex-direction: column; padding: .45em .55em; border: 1px solid #5a5265; border-radius: .7em; background: #32243e; font-size: .7em; }
.dashboard-phone .demo-event small { color: #b3aabe; font-size: .8em; }
.event-one { left: 23%; }.event-two { left: 68%; background: #27282e; }
.demo-track > i { position: absolute; height: 100%; left: 52%; border-left: 1px solid #bd91ea; }
.dashboard-phone .demo-tasks { padding-top: 1.9em; }
.demo-task { display: flex; align-items: center; gap: .8em; min-height: 4.2em; border-bottom: 1px solid #28252e; }
.demo-task > i { flex: 0 0 1.15em; height: 1.15em; border: 1px solid #62596d; border-radius: .35em; color: #18111d; text-align: center; font-style: normal; line-height: 1.15; }
.demo-task.done > i { background: #d7b4ec; border-color: #d7b4ec; }
.demo-task > span { flex: 1; font-size: .96em; font-weight: 600; }
.demo-task small { display: block; margin-top: .2em; color: #8f8899; font-size: .75em; font-weight: 400; }
.demo-task.done > span { color: #918898; text-decoration: line-through; }
.demo-task > b { color: #c7b2da; font-size: .65em; font-weight: 500; }
.demo-add { padding-top: .9em; color: #9e8dab; font-size: .75em; }
.demo-due { padding-top: 1.9em; }
.demo-due .demo-section-head > span { color: #dfbf6c; }
.demo-deadline { display: flex; gap: 1em; align-items: center; margin-top: 1.2em; }
.demo-deadline > span { color: #a5a0ad; font-size: .68em; }
.demo-deadline small { display: block; color: #8b8393; font-size: .85em; font-weight: 400; }
.demo-deadline > b { flex: 1; border-left: 2px solid #b5a0c8; padding-left: .8em; font-size: .9em; }
.demo-deadline > i { color: #b5a0c8; font-style: normal; }
.dashboard-phone .demo-board { flex: 1; overflow: hidden; }
.demo-mobile-nav { display: flex; justify-content: space-around; align-items: center; flex: 0 0 17cqw; border-top: 1px solid #302c37; background: #101013; }
.demo-mobile-nav > span { display: flex; gap: 1cqw; flex-direction: column; align-items: center; color: #77717f; }
.demo-mobile-nav svg { width: 5.8cqw; height: 5.8cqw; }.demo-mobile-nav i { font-size: 5cqw; line-height: 1; font-style: normal; }
.demo-mobile-nav b { font-size: 2.5cqw; font-weight: 500; }.demo-mobile-nav .active { color: #d2b2ea; }
.demo-home-bar { flex: 0 0 1.1cqw; width: 31%; margin: 1cqw auto 3.3cqw; background: #eeeaf4; border-radius: 9px; }
.dashboard-laptop { width: min(640px, 100%); padding-bottom: 2%; }
.dashboard-laptop-lid { position: relative; padding: 2.5% 1.4% 1.5%; margin-inline: 3%; border: 1px solid #62626b; border-radius: 15px 15px 4px 4px; background: #18191d; box-shadow: 0 24px 60px #0009; }
.dashboard-laptop-lid::before { position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background: #30425a; top: 1.4%; left: calc(50% - 2px); }
.dashboard-laptop-screen { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; container-type: inline-size; background: #070709; }
.demo-desktop-bar { display: flex; height: 5cqw; align-items: center; justify-content: space-between; padding: 0 2cqw; border-bottom: 1px solid #25212b; color: #b4adb9; font-size: 1.5cqw; }
.demo-desktop-bar > span:first-child { color: #e5d7bc; font-weight: 700; }
.demo-desktop-workspace { display: flex; height: calc(100% - 5cqw); }
.demo-sidebar { display: flex; flex-direction: column; flex: 0 0 19%; padding: 2cqw 1.5cqw; gap: .7cqw; border-right: 1px solid #27212f; font-size: 1.4cqw; color: #9b91a5; }
.demo-sidebar > b { color: #6b626f; font-size: .8em; font-weight: 500; margin: .8em 0 .4em; letter-spacing: .1em; }
.demo-sidebar > span { padding: .7em .5em; border-radius: .6em; }.demo-sidebar > .active { background: #30213e; color: #eadcf5; }
.demo-sidebar-user { display: flex; align-items: center; gap: .7em; margin-top: auto; color: #d8c17d; font-size: 1.4em; }.demo-sidebar-user span { color: #dad0e4; font-size: .65em; }.demo-sidebar-user small { display: block; color: #7f7489; }
.dashboard-laptop .demo-board { flex: 1; font-size: 1.65cqw; overflow: hidden; }
.dashboard-laptop .demo-greeting { padding: 1em 2em 1.3em; }.dashboard-laptop .demo-greeting h2 { margin-top: .4em; font-size: 2.55em; }
.dashboard-laptop .demo-day-note { display: none; color: #c2a7d5; margin-top: .5em; font-size: .8em; }
.dashboard-laptop .demo-content { display: grid; grid-template-columns: 1.15fr 1fr; gap: .7em 1.8em; padding: 1.2em 2em; border-radius: 1.6em 1.6em 0 0; }
.dashboard-laptop .demo-weather { grid-column: 1/-1; grid-template-columns: .8fr 1fr; padding-bottom: .4em; }.dashboard-laptop .demo-weather-now strong { font-size: 2.6em; }
.dashboard-laptop .demo-weather-hours small { font-size: .8em; }.dashboard-laptop .demo-weather-hours b { font-size: 1em; }
.dashboard-laptop .demo-schedule { grid-column: 1/-1; }.dashboard-laptop .demo-schedule > p { margin-bottom: .8em; }.dashboard-laptop .demo-track { height: 3.4em; }
.dashboard-laptop .demo-tasks, .dashboard-laptop .demo-due { padding-top: .5em; }.dashboard-laptop .demo-task { min-height: 2.2em; }.dashboard-laptop .demo-add { display: none; }
.dashboard-laptop-base { position: relative; height: 10px; background: linear-gradient(#929298, #4e4e56 35%, #1c1c22); border-radius: 2px 2px 50% 50% / 2px 2px 90% 90%; box-shadow: 0 22px 30px #0007; }
.dashboard-laptop-base::after { content: ''; position: absolute; top: 0; left: 42%; width: 16%; height: 4px; border-radius: 0 0 5px 5px; background: #34343d; }

/* A product story with expressive motion, without distorting the devices. */
.hero .preview-glow { inset: 9% -15%; background: conic-gradient(from 0deg, transparent, #e8c67c38, #d8ad5a20, transparent, #f1d99b32, transparent); filter: blur(46px); animation: halo-orbit 24s linear infinite; }
.hero .preview-scene::after { content: ''; position: absolute; z-index: -1; inset: 10%; border: 1px solid #e8c67c1a; border-radius: 50%; animation: orbit-breathe 7s ease-in-out infinite; }
.hero-primary { margin-right: 10px; min-height: 47px; border-radius: 12px; }
.hero-actions { align-items: center; flex-direction: column; }.hero-actions .app-store-badge { margin: 0; }
.selling-section { padding-block: 110px 75px; }
.selling-heading { max-width: 750px; margin: 0 auto 58px; text-align: center; }.selling-heading .eyebrow { justify-content: center; color: #d8c17d; }
.selling-heading h2 { margin: 0; font-size: clamp(35px, 5vw, 64px); font-weight: 650; letter-spacing: -.06em; line-height: 1.08; }.selling-heading h2 span { color: #8d829d; }
.selling-heading > p:last-child { max-width: 520px; margin: 24px auto 0; color: #a49cba; font-size: 16px; line-height: 1.7; }
.sales-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.sales-card { position: relative; overflow: hidden; min-width: 0; padding: 30px; border: 1px solid #302737; border-radius: 28px; background: radial-gradient(ellipse at 15% 0, #4b28662c, transparent 70%), #100d15; transition: border-color .3s, box-shadow .3s; }
.sales-card:hover { border-color: #8b61ad; box-shadow: 0 0 55px #8c47c51c; }
.sales-label { display: block; color: #aa8bc0; font-size: 10px; font-weight: 650; letter-spacing: .1em; }
.sales-card h3 { margin: 18px 0 14px; font-size: clamp(29px,3vw,40px); font-weight: 600; line-height: 1.1; letter-spacing: -.045em; }.sales-card > p { max-width: 430px; margin: 0 0 24px; color: #a9a0b4; font-size: 14px; line-height: 1.7; }
.sales-detail { color: #d4bd8b; font-size: 10px; letter-spacing: .02em; }
.sales-art { position: relative; height: 235px; margin: -30px -30px 30px; overflow: hidden; display: grid; place-items: center; border-bottom: 1px solid #302737; background: radial-gradient(ellipse at center, #71429e27, transparent 70%); }
.calendar-hub { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 86px; height: 86px; background: #241a30; border: 1px solid #b994dd; border-radius: 25px; color: #e9d3ff; font-size: 30px; box-shadow: 0 0 65px #a264c94a; animation: hub-pulse 5s ease-in-out infinite; }.calendar-hub small { font-size: 10px; }
.orbit-ring { position: absolute; width: 300px; height: 160px; border: 1px solid #815b9b40; border-radius: 50%; transform: rotate(-20deg); }.orbit-ring::before { content: ''; position: absolute; inset: 23px -20px; border: 1px dashed #815b9b30; border-radius: 50%; transform: rotate(40deg); }
.calendar-orbit { position: absolute; z-index: 3; padding: 12px 16px; border: 1px solid #5c436e; border-radius: 11px; background: #1a1422; color: #d5c7e1; font-size: 10px; box-shadow: 0 10px 30px #0006; animation: card-float 6s ease-in-out infinite; }.orbit-a { left: 9%; top: 35px; }.orbit-b { right: 5%; top: 95px; animation-delay: -2s; }.orbit-c { left: 17%; bottom: 23px; animation-delay: -4s; }
.task-art { display: flex; flex-direction: column; justify-content: center; gap: 11px; padding-inline: 34px; }.floating-task { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 350px; padding: 16px; border: 1px solid #42354f; border-radius: 14px; background: #1a1421; box-shadow: 0 15px 40px #0006; animation: task-arrive 7s ease-in-out infinite; }.floating-task:nth-child(2) { margin-left: 25px; animation-delay: -3s; }.floating-task i { flex: 0 0 21px; height: 21px; border: 1px solid #81718d; border-radius: 6px; font-style: normal; text-align: center; }.floating-task:first-child i { background: #c9a5e7; color: #251331; }.floating-task span { flex: 1; font-size: 11px; font-weight: 600; }.floating-task small { display: block; color: #8f819c; font-size: 9px; margin-top: 4px; }.floating-task b { font-size: 8px; font-weight: 500; color: #d8c17d; }.task-progress { width: 70%; height: 3px; overflow: hidden; border-radius: 5px; background: #302638; }.task-progress span { display: block; height: 100%; width: 68%; background: linear-gradient(90deg,#a36cdd,#e1bf75); transform-origin: left; animation: progress-flow 7s ease-in-out infinite; }.task-art > small { color: #85758f; font-size: 9px; }
.note-sheet { width: 245px; height: 174px; padding: 23px; border: 1px solid #5b4b3a; border-radius: 13px; background: #211c18; box-shadow: 0 15px 40px #0007; transform: rotate(-4deg); animation: note-float 8s ease-in-out infinite; }.note-sheet.back { position: absolute; transform: rotate(8deg) translate(12px, 2px); background: #2b2035; border-color: #51405f; animation: none; }.note-sheet span { display: block; color: #b99b75; font-size: 9px; }.note-sheet b { display: block; font-size: 17px; margin: 10px 0 14px; letter-spacing: -.5px; }.note-sheet > i { display: block; height: 3px; margin-top: 8px; width: 95%; background: #6a5b4e; border-radius: 2px; }.note-sheet > i:nth-of-type(2) { width: 76%; }.note-sheet > i:nth-of-type(3) { width: 86%; }.note-sheet em { display: block; margin-top: 13px; color: #9c876f; font-size: 9px; font-style: normal; }
.school-art { background: radial-gradient(ellipse at 50% 80%,#d4ab5c18,transparent 70%); }.school-swatch { position: relative; width: 240px; padding: 24px; border: 1px solid #54452d; border-radius: 18px; background: linear-gradient(135deg,#4a371a,#1a1610 70%); animation: card-float 7s ease-in-out infinite; }.school-swatch > span { color: #b7a27e; font-size: 12px; }.school-swatch > b { display: block; margin: 3px 0 17px; color: #e6c56e; font-size: 28px; letter-spacing: -1.5px; }.school-swatch > div { display: flex; gap: 9px; }.school-swatch i { width: 29px; height: 29px; border: 1px solid #ffffff35; border-radius: 50%; background: #d7bb78; }.school-swatch i:nth-child(2) { background: #141414; }.school-swatch i:nth-child(3) { background: #c4b7a5; }.school-swatch small { display: block; color: #8c7b5e; font-size: 9px; margin-top: 17px; }
.connection-note { max-width: 660px; margin: 24px auto 0; color: #81768d; font-size: 11px; line-height: 1.6; text-align: center; }.sales-action { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-top: 36px; }.sales-action > span { color: #9d90aa; font-size: 11px; }
.price-annual::after { content: ' · save 17%'; color: #c5a3e0; font-size: 11px; }
@keyframes halo-orbit { to { transform: rotate(360deg); } }
@keyframes orbit-breathe { 50% { transform: scale(1.13); opacity: .4; } }
@keyframes hub-pulse { 50% { box-shadow: 0 0 90px #a264c970; border-color: #e7c6ff; } }
@keyframes card-float { 50% { transform: translateY(-10px); } }
@keyframes task-arrive { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-8px); border-color: #9364b2; } }
@keyframes progress-flow { 0%,100% { transform: scaleX(.5); } 60% { transform: scaleX(1); } }
@keyframes note-float { 50% { transform: rotate(1deg) translateY(-5px); } }
@media (min-width:641px) and (max-width:1000px) { .hero.wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 26px; }.hero-actions { gap: 12px; }.hero-primary { margin: 0; } }
@media (max-width:640px) { .hero.wrap { min-height: 0; gap: 30px; padding-bottom: 45px; }.hero .preview-scene { flex: none; gap: 20px; }.hero .preview-stage { min-height: 0; }.dashboard-phone { width: min(300px, 82vw); }.dashboard-laptop { width: 100%; }.dashboard-laptop-lid { border-radius: 9px 9px 3px 3px; }.dashboard-laptop-base { height: 7px; }.hero-primary { margin: 0; font-size: 12px; min-height: 43px; }.hero-actions { gap: 12px; }.selling-section { padding-block: 65px 45px; }.selling-heading { margin-bottom: 34px; }.selling-heading h2 { font-size: 38px; }.selling-heading > p:last-child { font-size: 14px; }.sales-grid { grid-template-columns: 1fr; gap: 16px; }.sales-card { padding: 25px; }.sales-art { margin: -25px -25px 25px; height: 230px; }.sales-card h3 { font-size: 34px; }.sales-card > p { font-size: 14px; }.sales-detail { font-size: 9px; }.device-caption { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .hero .preview-glow, .hero .preview-scene::after, .sales-art *, .sales-art *::before { animation: none !important; }.sales-card { transition: none; } }

/* Moving light trails orbit the product; the hardware stays front-facing. */
.hero h1 > span:last-child { background: linear-gradient(100deg,#fff 10%,#f6e2a2 35%,#e6bf67 55%,#fff1c7 80%); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: headline-light 12s ease-in-out infinite; }
.motion-constellation { position: absolute; z-index: -1; inset: 5% -4%; overflow: hidden; pointer-events: none; }
.motion-orbit { position: absolute; inset: 10% 8%; border: 1px solid #e8c67c1c; border-radius: 50%; animation: halo-orbit 32s linear infinite; }
.motion-orbit:nth-child(2) { inset: 24% -9%; animation-duration: 45s; animation-direction: reverse; border-color: #d2ab641a; }
.motion-orbit::after { content: ''; position: absolute; top: 13%; left: 12%; width: 6px; height: 6px; border-radius: 50%; background: #e8c67c; box-shadow: 0 0 12px 4px #e8c67c60, 0 0 30px 10px #e8c67c18; }
.motion-orbit:nth-child(2)::after { background: #e8c67c; box-shadow: 0 0 15px #e8c67c; }
.motion-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e8c67c; opacity: .45; animation: star-drift 10s ease-in-out infinite; }
.motion-star:nth-of-type(3n) { background: #ebd292; width: 3px; height: 3px; }
.ios-orbit, .orbit-ring, .motion-orbit, .story-ring, .hero .preview-scene::after { display: none !important; }
.selling-section { scroll-margin-top: 95px; }
@keyframes headline-light { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes star-drift { 50% { transform: translateY(-30px); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .hero h1 > span:last-child, .motion-constellation * { animation: none !important; } }

/* Feature photography comes from the actual application, not mock illustrations. */
.dashboard-phone-screen .mobile-showcase-frame { position: relative; display: flex; flex: 1 1 0; min-height: 0; width: 100%; align-items: center; justify-content: center; }
.dashboard-phone-screen img.actual-mobile-screen,
.dashboard-phone-screen img.mobile-showcase-image { position: static; display: block; flex: 0 0 100%; min-height: 0; width: 100% !important; height: 100% !important; max-width: none; max-height: none; object-fit: contain; object-position: center; filter: none; }
.dashboard-laptop-screen img.actual-desktop-screen { display: block; width: 100% !important; height: 100% !important; max-width: none; max-height: none; object-fit: cover; filter: none; }
.dashboard-laptop-screen > img.desktop-screen-swipe-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  pointer-events: none;
  will-change: clip-path;
}
.actual-mobile-demo[hidden], .actual-desktop-demo[hidden] { display: none !important; }
.dashboard-phone-screen video.actual-mobile-demo { position: absolute; z-index: 2; inset: 15.013cqw 0 0; display: block; width: 100%; height: auto; max-width: none; max-height: none; object-fit: cover; object-position: top; opacity: 0; transition: opacity 180ms ease; }
.dashboard-laptop-screen video.actual-desktop-demo { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 180ms ease; }
.dashboard-phone-screen video.actual-mobile-demo.is-ready,
.dashboard-laptop-screen video.actual-desktop-demo.is-ready { opacity: 1; }
.product-showcase { padding-block: 45px 65px; scroll-margin-top: 95px; }
.product-heading { max-width: 690px; margin: 0 auto 45px; text-align: center; }.product-heading .eyebrow { color: #d8c17d; }.product-heading h2 { margin: 0; font-size: clamp(35px,4.5vw,57px); line-height: 1.08; letter-spacing: -.055em; font-weight: 650; }.product-heading > p:last-child { max-width: 540px; color: #9f97aa; font-size: 16px; line-height: 1.65; margin: 22px auto 0; }
.product-highlight { overflow: hidden; border: 1px solid #343039; border-radius: 24px; background: #111014; }
.product-calendar { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; background: radial-gradient(ellipse at 10% 0,#6c4b7b20,transparent 70%),#111014; }
.product-copy { padding: 34px; }.product-number { font-size: 10px; letter-spacing: .13em; color: #bea5d0; }.product-copy h3 { margin: 18px 0; font-size: clamp(27px,3vw,37px); line-height: 1.1; letter-spacing: -.045em; font-weight: 600; }.product-copy p, .product-copy li { color: #aaa2b2; font-size: 14px; line-height: 1.75; }.product-copy ul { list-style: none; padding: 0; margin: 22px 0 0; }.product-copy li { padding: 8px 0; border-bottom: 1px solid #2c2633; font-size: 12px; }.product-copy li::before { content: '↗'; margin-right: 9px; color: #d8c17d; }.product-copy a { display: inline-block; color: #d8c17d; margin-top: 8px; font-size: 12px; }
.product-photo { position: relative; margin: 0; padding: 22px; background: #080809; overflow: hidden; }.product-photo > img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 16px 45px #0007; transition: transform .7s cubic-bezier(.16,1,.3,1); }.product-photo:hover > img { transform: scale(1.025); }.product-photo figcaption { display: block; color: #857b91; font-size: 9px; padding-top: 14px; letter-spacing: .03em; }
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }.product-detail-grid .product-photo { height: 300px; }.product-detail-grid .product-photo > img { width: 100%; max-width: none; }.product-detail-grid .notes-photo > img { width: 165%; }.product-detail-grid .product-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 17px 22px; background: linear-gradient(transparent,#080809 45%); }.product-disclosure { color: #81778b; font-size: 11px; line-height: 1.6; margin-top: 23px; }
@media(max-width:760px) { .product-calendar { grid-template-columns: 1fr; }.product-detail-grid { grid-template-columns: 1fr; }.product-heading h2 { font-size: 38px; }.product-copy { padding: 25px; }.product-photo { padding: 15px; }.product-showcase { padding-block: 60px 40px; }.product-detail-grid .product-photo { height: 250px; }.product-calendar .product-photo { padding-top: 0; } }
@media(prefers-reduced-motion:reduce) { .product-photo > img { transition: none; } }

/* iPhone hardware proportions: 393 × 852 display in a 411 × 876 body.
   The 393 × 793 app capture sits below the 59-pixel native status area. */
.dashboard-phone { width: min(320px, 100%); aspect-ratio: 411 / 876; border: 0; border-radius: 15% / 7.04%; background: linear-gradient(115deg,#92949b 0%,#38393f 20%,#696b73 49%,#292a30 75%,#7a7c85 100%); box-shadow: inset 0 0 0 1px #9698a2, inset 0 0 0 3px #41434b, inset 0 0 0 5px #1c1d22, 0 18px 42px rgba(235, 139, 174, .2), 0 0 26px rgba(249, 166, 195, .22); }
.dashboard-phone-screen { inset: 1.37% 2.19%; border-radius: 13.74% / 6.34%; background: #050506; box-shadow: 0 0 0 2px #08090b; }
.dashboard-phone::before, .dashboard-phone::after, .iphone-action, .iphone-volume-down { position: absolute; width: 3px; background: linear-gradient(90deg,#303138,#9a9ca5,#44464e); border-radius: 2px; box-shadow: inset 0 0 0 .5px #25262b; }
.dashboard-phone::before { left: -2px; top: 23%; height: 6.5%; }.dashboard-phone::after { right: -2px; top: 27%; height: 10%; }
.iphone-action { left: -2px; top: 16%; height: 3.1%; }.iphone-volume-down { left: -2px; top: 31.5%; height: 6.5%; }
.dashboard-phone .demo-status { flex: 0 0 15.013cqw; height: 15.013cqw; padding-left: 9.5cqw; padding-right: 7.4cqw; font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; font-size: 4.32cqw; font-weight: 600; background: var(--phone-status-bg, #050506); }
.dashboard-phone .demo-status > b { font-weight: 600; letter-spacing: -.04em; }
.dashboard-phone .demo-island { top: 17%; left: 34.1%; width: 31.8%; height: 62.7%; border-radius: 99px; background: #000; box-shadow: none; }
.demo-island > span { position: absolute; right: 13%; top: 40%; width: 7%; height: 23%; border-radius: 50%; background: radial-gradient(circle at 65% 35%,#23334f,#0a101a 70%); }
.iphone-status-icons { width: 19.1cqw; height: 4.58cqw; overflow: visible; color: #f7f7f8; }
.dashboard-phone-screen img.actual-mobile-screen { object-fit: contain; object-position: center; }
.dashboard-phone-screen > .demo-home-bar { display: none; }
@media(max-width:640px) { .dashboard-phone { width: min(306px, 82vw); } }
@media(max-width:640px) { .dashboard-phone.is-settled, .dashboard-laptop.is-settled { animation: none; } }

/* Interactive dashboard demo: one live view with three tappable spaces. */
.feature-story { position: relative; overflow: hidden; padding-block: clamp(76px, 9vw, 122px); border-block: 1px solid #29252e; background: #0d0c10; }
.feature-story::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0, #795b8e1a, transparent 56%), radial-gradient(ellipse at 8% 100%, #d2af5b0c, transparent 40%); }
.feature-story > .wrap { position: relative; z-index: 1; }
.feature-story-heading { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.feature-story-eyebrow { margin: 0 0 13px; color: #d8c17d; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.feature-story-heading h2 { margin: 0; font-size: clamp(34px, 4.3vw, 54px); font-weight: 650; letter-spacing: -.055em; line-height: 1.04; }
.dashboard-demo { max-width: 1080px; margin-inline: auto; overflow: hidden; border: 1px solid #39343f; border-radius: 23px; background: linear-gradient(145deg,#17151c,#100f13 72%); box-shadow: 0 36px 100px #0006, 0 0 0 1px #ffffff05 inset; text-align: left; overflow-anchor: none; }
.demo-toolbar { display: flex; min-height: 69px; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 22px; border-bottom: 1px solid #ffffff0d; background: #ffffff03; }
.demo-tabs { display: inline-flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid #ffffff0d; border-radius: 13px; background: #0c0b0f; }
.demo-tabs button { position: relative; display: inline-flex; min-height: 39px; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #a19ba8; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 180ms ease, background 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.demo-tabs button:hover { color: #fff; }
.demo-tabs button[aria-selected="true"] { border-color: #76608766; background: linear-gradient(135deg,#34273d,#251d2d); color: #fff; box-shadow: 0 4px 14px #0005, 0 0 18px #b27ad51a; }
.demo-tab-icon { color: #d9bf76; font-size: 15px; line-height: 1; }
.demo-live-label { display: inline-flex; align-items: center; gap: 8px; color: #a29ba9; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.demo-live-label i, .demo-bottomline > span:first-child i { width: 6px; height: 6px; border-radius: 50%; background: #72cfaa; box-shadow: 0 0 12px #72cfaa99; }
.demo-viewport { display: grid; padding: clamp(20px, 3.1vw, 36px); }
.demo-panel { grid-area: 1 / 1; min-width: 0; color: #f6f3f7; text-align: left; }
.demo-panel[hidden] { display: none; }
.demo-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.demo-date, .demo-kicker { margin: 0 0 10px; color: #afa3ba; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.demo-date span { padding-inline: 4px; color: #d6b96f; }
.demo-welcome h3, .demo-view-heading h3 { margin: 0; font-size: clamp(27px, 3.3vw, 42px); font-weight: 650; letter-spacing: -.055em; line-height: 1.05; }
.demo-spark { display: inline-block; margin-left: 9px; color: #e8c979; font-size: .52em; vertical-align: top; animation: demo-sparkle 3s ease-in-out infinite; }
@keyframes demo-sparkle { 0%,100% { opacity: .55; transform: scale(.8) rotate(-15deg); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } }
.demo-greeting, .demo-view-heading > div > p { margin: 9px 0 0; color: #aaa4af; font-size: 12px; line-height: 1.5; }
.demo-weather { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #ffffff12; border-radius: 13px; background: #ffffff06; }
.demo-weather div { display: grid; gap: 2px; }
.demo-weather strong { font-size: 17px; line-height: 1; }
.demo-weather small { color: #a9a3ad; font-size: 9px; }
.demo-weather-current { grid-template-columns: auto auto; align-items: center; gap: 2px 7px !important; }
.demo-weather-current > span { color: #edcb77; font-size: 22px; }
.demo-weather-current small { grid-column: 1 / -1; }
.demo-weather-divider { width: 1px; height: 29px; margin-inline: 3px; background: #ffffff18; }
.demo-weather-classes { padding-left: 1px; }
.demo-weather-classes strong { color: #e6c878; }
.demo-today-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.demo-surface { min-width: 0; padding: 18px 19px 16px; border: 1px solid #ffffff10; border-radius: 16px; background: linear-gradient(145deg,#1c1a21,#17161a); }
.demo-surface-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.demo-surface-heading .demo-kicker { margin-bottom: 5px; font-size: 8px; }
.demo-surface-heading h4 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.03em; }
.demo-text-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 0 7px 8px; border: 0; background: transparent; color: #d9c17b; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; }
.demo-text-button:hover { color: #f5dea0; }
.demo-timeline { position: relative; display: grid; gap: 2px; }
.demo-timeline::before { content: ""; position: absolute; top: 16px; bottom: 17px; left: 44px; width: 1px; background: linear-gradient(#916ec3,#604a80 80%,transparent); }
.demo-event { position: relative; display: grid; grid-template-columns: 35px 9px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 51px; }
.demo-event time { display: grid; color: #f0eef3; font-size: 11px; font-weight: 700; line-height: 1.05; text-align: right; }.demo-event time span { margin-top: 2px; color: #928b98; font-size: 8px; }
.demo-event > i { z-index: 1; width: 7px; height: 7px; border: 1px solid #c4a7ed; border-radius: 50%; background: #292235; box-shadow: 0 0 8px #a17acb66; }
.demo-event > div { display: grid; min-width: 0; gap: 4px; }.demo-event > div strong { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.demo-event > div small { overflow: hidden; color: #9e98a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.event-pill { padding: 5px 7px; border-radius: 999px; font-size: 8px; font-weight: 600; }.event-study { background: #d6b75f20; color: #e6c979; }.event-class { background: #9b76c826; color: #c6a7e8; }
.demo-task-list { display: grid; margin: 0; padding: 0; list-style: none; }.demo-task-list li { min-width: 0; border-bottom: 1px solid #ffffff0c; }.demo-task-list li:last-child { border-bottom: 0; }
.demo-task-list label { position: relative; display: flex; min-width: 0; align-items: center; gap: 11px; cursor: pointer; }.demo-task-list input { position: absolute; width: 1px; height: 1px; opacity: 0; }.demo-checkmark { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border: 1px solid #69636f; border-radius: 5px; background: #111015; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }.demo-checkmark::after { content: "✓"; color: #17141b; font-size: 11px; font-weight: 800; opacity: 0; transform: scale(.5); transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,1.8,.5,1); }.demo-task-list input:checked + .demo-checkmark { border-color: #d7bd73; background: #d7bd73; transform: scale(1.05); }.demo-task-list input:checked + .demo-checkmark::after { opacity: 1; transform: scale(1); }.demo-task-list input:focus-visible + .demo-checkmark { outline: 2px solid #cbaeff; outline-offset: 3px; }
.demo-task-copy { display: grid; min-width: 0; gap: 4px; padding-block: 11px; }.demo-task-copy strong { overflow: hidden; color: #eeebf1; font-size: 10px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }.demo-task-copy small { color: #99939f; font-size: 9px; }.demo-task-copy small i { padding-inline: 3px; color: #d7bc73; font-style: normal; }
.demo-compact-tasks li label { gap: 9px; }.demo-compact-tasks .demo-task-copy { padding-block: 8px; }.demo-task-list li.is-complete .demo-task-copy strong, .demo-task-list li:has(input:checked) .demo-task-copy strong { color: #88828e; text-decoration: line-through; text-decoration-color: #69636f; }
.demo-progress-line { height: 3px; overflow: hidden; margin-top: 10px; border-radius: 99px; background: #ffffff12; }.demo-progress-line span { display: block; width: 33.333%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#b799e2,#e4c770); transition: width 320ms cubic-bezier(.16,1,.3,1); }
.demo-progress-caption { display: flex; justify-content: space-between; margin: 7px 0 0; color: #98929e; font-size: 9px; }.demo-progress-caption span:last-child { color: #cdbb8a; }
.demo-view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.demo-view-heading .demo-kicker { margin-bottom: 10px; }.demo-week-switch { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid #ffffff12; border-radius: 11px; background: #ffffff05; color: #e6d292; font-size: 10px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.demo-week-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }.demo-day { min-height: 0; padding: 13px 10px; border: 1px solid #ffffff10; border-radius: 13px; background: #111014a8; }.demo-day > p { display: flex; align-items: baseline; gap: 7px; margin: 0 0 11px; color: #a19aa8; }.demo-day > p span { font-size: 8px; font-weight: 700; letter-spacing: .12em; }.demo-day > p b { color: #f4f1f5; font-size: 16px; }.demo-day > p em { margin-left: auto; color: #c5a7ea; font-size: 8px; font-style: normal; }.demo-day.is-today { border-color: #9174b2; background: linear-gradient(160deg,#33263f,#17141d 55%); box-shadow: 0 0 24px #a67ac51a inset; }
.demo-week-switch button { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #ffffff12; border-radius: 7px; background: #ffffff08; color: #e5d9ee; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; transition: background 180ms ease, transform 180ms ease; }.demo-week-switch button:hover { background: #ffffff18; transform: scale(1.06); }
.demo-mobile-calendar { display: none; }
.week-event { display: grid; gap: 5px; margin-bottom: 7px; padding: 9px 8px; border: 1px solid #ffffff0c; border-left: 2px solid #9773bd; border-radius: 9px; background: #211d27; }.week-event time { color: #dfd4ed; font-size: 8px; font-weight: 700; }.week-event strong { color: #f1edf4; font-size: 9px; font-weight: 600; line-height: 1.25; }.week-event small { overflow: hidden; color: #9e97a5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.week-event.week-study { border-left-color: #d4b45f; }.demo-open-day { display: grid; min-height: 205px; place-items: center; padding: 15px; color: #827b88; font-size: 10px; line-height: 1.5; text-align: center; }
.demo-calendar-legend { display: flex; align-items: center; gap: 18px; margin-top: 14px; color: #9e97a4; font-size: 9px; }.demo-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }.demo-calendar-legend span:last-child { margin-left: auto; }.demo-calendar-legend i { width: 7px; height: 7px; border-radius: 3px; background: #9773bd; }.demo-calendar-legend i.legend-study { background: #d4b45f; }
.demo-task-summary { display: grid; min-width: 88px; justify-items: center; gap: 4px; padding: 9px 13px; border: 1px solid #ffffff12; border-radius: 12px; background: #ffffff05; }.demo-task-summary strong { color: #ead18a; font-size: 21px; line-height: 1; }.demo-task-summary span { color: #a49daa; font-size: 9px; }
.demo-task-filters { display: flex; gap: 8px; margin-bottom: 8px; }.demo-task-filters button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #ffffff10; border-radius: 9px; background: #141217; color: #a7a0ac; font: inherit; font-size: 9px; font-weight: 600; cursor: pointer; transition: background 180ms ease,color 180ms ease,border-color 180ms ease; }.demo-task-filters button span { color: #827b89; font-size: 8px; }.demo-task-filters button[aria-pressed="true"] { border-color: #9072b266; background: #30253a; color: #f4edf9; }.demo-full-tasks li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 8px; }.demo-full-tasks label { flex: 1; }.demo-full-tasks .demo-task-copy { padding-block: 13px; }.demo-full-tasks .demo-task-copy strong { font-size: 11px; }.demo-full-tasks .demo-task-copy small { font-size: 9px; }.demo-full-tasks li > time { color: #8f8895; font-size: 8px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }.demo-full-tasks li.is-complete > time { color: #7abb9c; }.demo-task-note { display: flex; align-items: center; gap: 8px; margin: 15px 0 0; color: #a49daa; font-size: 10px; }.demo-task-note span { color: #dfc36f; }
.demo-bottomline { display: flex; justify-content: space-between; gap: 16px; padding: 14px 23px; border-top: 1px solid #ffffff0c; color: #87818c; font-size: 9px; }.demo-bottomline > span { display: inline-flex; align-items: center; gap: 8px; }.demo-bottomline > span:first-child i { width: 5px; height: 5px; }
@media (max-width: 850px) { .demo-viewport { min-height: 0; }.demo-today-grid { grid-template-columns: 1fr; }.demo-week-grid, .demo-calendar-legend { display: none; }.demo-mobile-calendar { display: grid; gap: 16px; }.demo-mobile-day-picker { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }.demo-mobile-day-picker button { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 9px 2px; border: 1px solid #ffffff0d; border-radius: 10px; background: #111014a8; color: #a9a3ad; font: inherit; cursor: pointer; }.demo-mobile-day-picker button small { font-size: 8px; font-weight: 700; }.demo-mobile-day-picker button b { color: #f3f0f5; font-size: 13px; }.demo-mobile-day-picker button[aria-selected="true"] { border-color: #8aab98; background: #27372f; color: #e9f6ee; }.demo-mobile-day-picker button[aria-selected="true"] b { color: #d5eadb; }.demo-mobile-agenda { padding: 16px; border: 1px solid #ffffff10; border-radius: 15px; background: #151519; }.demo-mobile-agenda > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.demo-mobile-agenda h4 { margin: 0; color: #f4f1f5; font-size: 15px; }.demo-mobile-agenda > header span { color: #a19aa8; font-size: 9px; white-space: nowrap; }.demo-mobile-event { display: grid; grid-template-columns: 58px 8px minmax(0,1fr); align-items: center; gap: 10px; min-height: 54px; border-top: 1px solid #ffffff0c; }.demo-mobile-event > time { color: #d8d3dc; font-size: 9px; font-weight: 650; }.demo-mobile-event > i { width: 7px; height: 7px; border-radius: 50%; background: #a5c7af; box-shadow: 0 0 9px #a5c7af55; }.demo-mobile-event.is-study > i { background: #d9bf76; box-shadow: 0 0 9px #d9bf7655; }.demo-mobile-event > div { display: grid; gap: 4px; min-width: 0; }.demo-mobile-event strong { overflow: hidden; color: #f0edf2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.demo-mobile-event small { overflow: hidden; color: #99939f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.demo-mobile-empty { margin: 0; padding: 10px 0 3px; border-top: 1px solid #ffffff0c; color: #a19aa8; font-size: 11px; } }
@media (max-width: 640px) { .feature-story { padding-block: 67px 74px; }.feature-story-heading { margin-bottom: 28px; }.feature-story-heading h2 { font-size: clamp(32px, 9vw, 42px); }.dashboard-demo { border-radius: 18px; }.demo-toolbar { min-height: 63px; padding: 10px 11px; }.demo-tabs { gap: 1px; padding: 3px; }.demo-tabs button { min-height: 36px; gap: 6px; padding-inline: 10px; font-size: 10px; }.demo-tab-icon { font-size: 13px; }.demo-live-label { font-size: 0; }.demo-live-label i { width: 7px; height: 7px; }.demo-viewport { padding: 19px 13px; }.demo-welcome { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }.demo-welcome h3 { font-size: clamp(25px,7vw,34px); }.demo-weather { padding: 8px 11px; }.demo-surface { padding: 15px 12px 13px; }.demo-surface-heading h4 { font-size: 14px; }.demo-surface-heading .demo-kicker { font-size: 7px; }.demo-event { grid-template-columns: 34px 8px minmax(0,1fr) auto; gap: 7px; }.demo-event > div strong { font-size: 9px; }.demo-event > div small { font-size: 8px; }.event-pill { font-size: 7px; padding: 4px 6px; }.demo-compact-tasks .demo-task-copy strong { font-size: 9px; }.demo-compact-tasks .demo-task-copy small { font-size: 8px; }.demo-view-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 18px; }.demo-view-heading h3 { font-size: 29px; }.demo-view-heading > div > p { font-size: 10px; }.demo-week-switch { align-self: stretch; justify-content: center; }.demo-mobile-day-picker { gap: 4px; }.demo-mobile-day-picker button { padding-block: 8px; }.demo-mobile-day-picker button small { font-size: 7px; }.demo-mobile-agenda { padding: 13px 11px; }.demo-mobile-agenda h4 { font-size: 13px; }.demo-mobile-event { grid-template-columns: 54px 7px minmax(0,1fr); gap: 8px; min-height: 50px; }.demo-mobile-event strong { font-size: 9px; }.demo-task-filters { gap: 5px; }.demo-task-filters button { gap: 5px; padding: 8px 9px; font-size: 8px; }.demo-full-tasks li { gap: 8px; padding-inline: 3px; }.demo-full-tasks .demo-task-copy strong { font-size: 9px; }.demo-full-tasks .demo-task-copy small { font-size: 8px; }.demo-full-tasks li > time { font-size: 7px; }.demo-bottomline { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 14px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .demo-spark { animation: none; } }

/* Match the public preview to the live dashboard's open, practical layout. */
.dashboard-demo { border-color: #303136; border-radius: 20px; background: #101113; box-shadow: 0 30px 80px #0005; }
.demo-toolbar { background: #101113; }
.demo-tabs { border-color: #292a2d; background: #0a0b0c; }
.demo-tabs button[aria-selected="true"] { border-color: #595a5d; background: #252629; box-shadow: none; }
.demo-tab-icon { color: #d8bd72; }
.demo-viewport { padding: clamp(22px, 3.2vw, 38px); }
.demo-welcome { align-items: center; flex-direction: column; gap: 16px; margin-bottom: 26px; text-align: center; }
.demo-date { color: #aeb2bc; }
.demo-date span { color: #d8bd72; }
.demo-welcome h3 { font-size: clamp(30px, 4vw, 46px); }
.demo-weather { display: grid; width: 100%; grid-template-columns: minmax(190px, .75fr) minmax(140px, .65fr) minmax(300px, 1.6fr); align-items: center; gap: 18px; padding: 16px 0 22px; border: 0; border-bottom: 1px solid #292a2d; border-radius: 0; background: transparent; text-align: left; }
.demo-weather-current { grid-template-columns: auto auto; justify-content: start; gap: 4px 10px !important; }
.demo-weather-current > span { grid-row: 1 / span 2; align-self: center; color: #e5c978; font-size: 31px; }
.demo-weather strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.demo-weather small { font-size: 11px; }
.demo-weather-current small { grid-column: 2; }
.demo-weather-current .demo-weather-highlow { color: #81858e; font-size: 9px; }
.demo-weather-tip { margin: 0; padding-left: 12px; border-left: 2px solid #d8bd72; color: #d8d9dc; font-size: 11px; line-height: 1.5; }
.demo-weather-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.demo-weather-hours > div { display: grid; justify-items: center; gap: 5px; padding-inline: 5px; border-left: 1px solid #292a2d; }
.demo-weather-hours small { color: #aeb2bc; font-size: 9px; }
.demo-weather-hours span { color: #9fc9ec; font-size: 13px; }
.demo-weather-hours b { color: #e5c978; font-size: 12px; font-variant-numeric: tabular-nums; }
.demo-today-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 25px 34px; }
.demo-surface { padding: 0; border: 0; border-radius: 0; background: transparent; }
.demo-schedule { grid-column: 1 / -1; }
.demo-todos, .demo-due-soon { padding-top: 21px; border-top: 1px solid #292a2d; }
.demo-compact-tasks li { min-height: 54px; border-color: #292a2d; }
.demo-compact-tasks .demo-task-copy { padding-block: 10px; }
.demo-surface-heading { margin-bottom: 12px; }
.demo-surface-heading h4 { font-size: 19px; }
.demo-surface-heading .demo-kicker { display: none; }
.demo-school-name { margin: 4px 0 0; color: #999da6; font-size: 11px; }
.demo-schedule-actions { display: flex; align-items: center; gap: 18px; }
.demo-schedule-actions > span { display: grid; justify-items: center; gap: 2px; padding-right: 16px; border-right: 1px solid #303136; }
.demo-schedule-actions > span strong { color: #e5c978; font-size: 18px; }
.demo-schedule-actions > span small { color: #999da6; font-size: 9px; white-space: nowrap; }
.demo-text-button { color: #d8bd72; font-size: 11px; }
.demo-timeline { display: block; }
.demo-timeline::before { display: none; }
.demo-timeline-axis { display: flex; justify-content: space-between; margin-bottom: 6px; color: #898d95; font-size: 9px; }
.demo-timeline-track { position: relative; min-height: 132px; overflow: hidden; border: 1px solid #303136; border-radius: 13px; background: transparent; }
.demo-timeline-track > i:not(.demo-now-line) { position: absolute; top: 0; bottom: 0; left: calc(var(--tick-index) * 20%); width: 1px; background: #25272b; }
.demo-timeline-track > i:nth-child(1) { --tick-index: 1; }
.demo-timeline-track > i:nth-child(2) { --tick-index: 2; }
.demo-timeline-track > i:nth-child(3) { --tick-index: 3; }
.demo-timeline-track > i:nth-child(4) { --tick-index: 4; }
.demo-timeline-event { position: absolute; z-index: 1; top: 8px; left: var(--left); display: grid; width: var(--width); gap: 3px; overflow: hidden; padding: 7px 8px; border: 1px solid #4a4c50; border-left: 2px solid #d8bd72; border-radius: 8px; background: #191a1d; }
.demo-timeline-event:nth-of-type(2) { top: 68px; }
.demo-timeline-event:nth-of-type(3) { top: 8px; }
.demo-timeline-event small { color: #aeb2bc; font-size: 8px; font-weight: 650; }
.demo-timeline-event b { overflow: hidden; color: #f1f1f2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.demo-timeline-event span { overflow: hidden; color: #999da6; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.demo-now-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: 79%; width: 2px; background: #e37d63; }
.demo-now-line::before { position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e37d63; content: ""; }
.demo-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.demo-day { min-height: 220px; padding: 9px 7px; border: 1px solid transparent; border-radius: 12px; background: #0c0d0f; }
.demo-day > p { gap: 5px; margin-bottom: 10px; }
.demo-day > p span { font-size: 8px; letter-spacing: .04em; }
.demo-day > p b { font-size: 17px; }
.demo-day.is-today { border-color: #d8bd72; background: #191a1d; box-shadow: none; }
.demo-day > p em { color: #d8bd72; }
.week-event { gap: 4px; margin-bottom: 6px; padding: 7px 6px; border-color: #292a2d; border-left-color: #d8bd72; border-radius: 7px; background: #17181b; }
.week-event time { color: #f0f0f1; font-size: 8px; }
.week-event strong { font-size: 8px; }
.week-event small { font-size: 7px; }
.week-event.week-study { border-left-color: #88bda3; }
.demo-free { color: #777b83; font-size: 9px; }
.demo-view-heading h3 { font-size: clamp(25px, 3vw, 32px); letter-spacing: -.04em; }
.demo-view-heading > div > p { margin: 5px 0 0; color: #999da6; font-size: 12px; }
.demo-week-switch { gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #d8d9dc; letter-spacing: 0; }
.demo-week-switch button { width: 32px; height: 32px; border-color: #303136; border-radius: 10px; background: #151619; }
.demo-task-summary { display: flex; min-width: auto; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; }
.demo-task-summary strong { color: #d8bd72; font-size: 20px; }
.demo-task-summary span { font-size: 11px; }
.demo-task-filters { gap: 7px; margin: 0 0 12px; }
.demo-task-filters button { padding: 8px 12px; border-color: #303136; border-radius: 10px; background: #151619; font-size: 11px; }
.demo-task-filters button[aria-pressed="true"] { border-color: #d8bd72; background: #d8bd72; color: #151515; }
.demo-task-filters button[aria-pressed="true"] span { color: #393327; }
.demo-full-tasks { margin: 0; padding: 0; border-top: 1px solid #292a2d; }
.demo-full-tasks li { min-height: 54px; padding-inline: 4px; border-color: #292a2d; }
.demo-full-tasks .demo-task-copy { padding-block: 10px; }
.demo-full-tasks .demo-task-copy strong { font-size: 12px; }
.demo-full-tasks .demo-task-copy small { font-size: 10px; }
.demo-full-tasks li > time { font-size: 9px; }
.demo-task-note { display: none; }
.demo-upcoming-events { display: grid; }
.demo-upcoming-events article { display: grid; grid-template-columns: minmax(86px, .65fr) minmax(0, 1fr); align-items: center; gap: 10px; min-height: 54px; padding: 7px 0; border-bottom: 1px solid #292a2d; }
.demo-upcoming-events article:last-child { border-bottom: 0; }
.demo-upcoming-events time { color: #d8d9dc; font-size: 9px; font-weight: 650; }
.demo-upcoming-events article > div { display: grid; gap: 4px; min-width: 0; }
.demo-upcoming-events strong { overflow: hidden; color: #f1f1f2; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.demo-upcoming-events small { overflow: hidden; color: #999da6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.demo-bottomline { border-color: #292a2d; }
@media (max-width: 850px) {
  .demo-weather { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 14px 18px; }
  .demo-weather-current { width: max-content; }
  .demo-weather-tip { margin-left: 2px; }
  .demo-weather-hours { width: 100%; }
  .demo-today-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .demo-schedule { grid-column: auto; }
  .demo-todos, .demo-due-soon { padding-top: 18px; }
  .demo-week-grid { display: none; }
  .demo-mobile-calendar { display: grid; gap: 16px; }
  .demo-mobile-agenda { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .demo-mobile-event { border-color: #292a2d; }
}
@media (max-width: 640px) {
  .demo-viewport { padding: 19px 14px; }
  .demo-welcome { align-items: center; }
  .demo-date { font-size: 8px; }
  .demo-weather { grid-template-columns: minmax(0, 1fr); }
  .demo-weather-hours > div:first-child { border-left: 0; }
  .demo-surface-heading h4 { font-size: 17px; }
  .demo-schedule-actions { gap: 9px; }
  .demo-schedule-actions > span { padding-right: 9px; }
  .demo-timeline-axis { font-size: 8px; }
  .demo-timeline-track { min-height: 124px; }
  .demo-timeline-event { width: max(23%, var(--width)); max-width: 31%; padding: 6px 5px; }
  .demo-timeline-event b { font-size: 8px; }
  .demo-timeline-event span { font-size: 7px; }
  .demo-timeline-event:nth-of-type(2) { top: 66px; }
  .demo-timeline-event:nth-of-type(3) { top: 8px; }
}
html[data-theme="light"] .demo-weather,
html[data-theme="light"] .demo-surface,
html[data-theme="light"] .demo-timeline-track,
html[data-theme="light"] .demo-full-tasks { border-color: #e4e3e7; }
html[data-theme="light"] .demo-date,
html[data-theme="light"] .demo-school-name,
html[data-theme="light"] .demo-weather small,
html[data-theme="light"] .demo-view-heading > div > p,
html[data-theme="light"] .demo-task-copy small { color: #6f7178; }
html[data-theme="light"] .demo-weather-tip,
html[data-theme="light"] .demo-surface-heading h4,
html[data-theme="light"] .demo-timeline-event b,
html[data-theme="light"] .demo-task-copy strong { color: #202125; }
html[data-theme="light"] .demo-day { border-color: #e4e3e7; background: #fff; }
html[data-theme="light"] .demo-day.is-today { border-color: #a58222; background: #fffdf7; }
html[data-theme="light"] .week-event,
html[data-theme="light"] .demo-timeline-event { border-color: #e4e3e7; background: #f8f8f9; }
html[data-theme="light"] .demo-timeline-event b,
html[data-theme="light"] .week-event strong { color: #202125; }
html[data-theme="light"] .demo-timeline-event small,
html[data-theme="light"] .demo-timeline-event span,
html[data-theme="light"] .week-event time,
html[data-theme="light"] .week-event small { color: #666a72; }
html[data-theme="light"] .demo-task-filters button,
html[data-theme="light"] .demo-week-switch button { border-color: #dedee2; background: #fff; color: #45464b; }
html[data-theme="light"] .demo-task-filters button[aria-pressed="true"] { border-color: #a58222; background: #e5c978; color: #181818; }
html[data-theme="light"] .demo-upcoming-events article { border-color: #e4e3e7; }
html[data-theme="light"] .demo-upcoming-events time,
html[data-theme="light"] .demo-upcoming-events small { color: #666a72; }
html[data-theme="light"] .demo-upcoming-events strong { color: #202125; }


/* Mobile hero: keep the app-store badge quiet in the header and stack the CTAs. */
@media (max-width: 640px) {
  .header-cta.app-store-badge { border-color: var(--line); box-shadow: none; }
  .hero-actions { align-items: center; flex-direction: column; flex-wrap: nowrap; }
  .hero-primary, .hero-actions .app-store-badge { width: min(100%, 320px); }
  .hero-actions .app-store-badge { min-width: 0; height: 46px; margin: 0; }
}

/* Center the public site's copy across every section and viewport. */
body { text-align: center; }
.hero .hero-copy { text-align: center; }
.app-store-badge { text-align: center; }
.app-store-copy { align-items: center; }
.hero-notes { display: block; text-align: center; }
.hero-notes > span, .hero-notes > span > span { display: inline; }
.hero-notes > span > span { white-space: nowrap; }
.hero-benefits { display: inline-block; margin: 4px auto 0; padding: 0; color: #a1a1aa; font-size: 15px; font-weight: 450; line-height: 1.65; text-align: left; list-style: none; }
.hero-benefits li::before { content: "•"; margin-right: 10px; color: #e8bd58; }

/* Keep the desktop preview beside a centered, mobile-inspired hero copy. */
@media (min-width: 641px) {
  .hero-actions { width: min(100%, 480px); align-items: stretch; gap: 14px; margin-inline: auto; }
  .hero-actions > * { width: 100%; min-width: 0; }
  .hero-actions .app-store-badge { height: 66px; }
  .hero-primary { min-height: 66px; margin: 0; }
  .hero-notes { font-size: clamp(18px, 2vw, 28px); white-space: nowrap; }
  .hero h1 { font-size: min(96px, 14cqw); }
}

.hero h1 > span:last-child {
  background: linear-gradient(100deg, #fff1c7 8%, #e8bd58 100%);
  background-size: auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: none;
}

/* Device motion: dimensional entrances, gentle idle lift and cursor-responsive tilt. */
.device-panel { perspective: 1400px; }
.device-panel.is-active { z-index: 2; }

/* Compact header control for switching the public site theme. */
.theme-toggle { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-quick) var(--motion-state), border-color var(--motion-quick) var(--motion-state), color var(--motion-quick) var(--motion-state); }
.theme-toggle:hover { background: var(--wash); }
.theme-toggle:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* Light appearance for the complete landing page. */
html[data-theme="light"] {
  color-scheme: light;
  --ink: #201c25;
  --muted: #6e6874;
  --line: #e4dfe8;
  --paper: #fbf9fc;
  --wash: #f1edf4;
  --lilac: #7b5593;
  --mint: #38785b;
  --sand: #987321;
  --green: #38785b;
}
html[data-theme="light"] body { background: var(--paper); color: var(--ink); }
html[data-theme="light"] .site-header { border-color: #e5e0e8; background: rgb(251 249 252 / 92%); }
html[data-theme="light"] .wordmark::after { content: ""; position: absolute; z-index: 2; inset: 0; background: url("/mylifedashboard-logo-transparent.png?v=6") center / contain no-repeat; filter: brightness(0) !important; clip-path: inset(0 0 0 12.5%); pointer-events: none; }
html[data-theme="light"] .desktop-nav a, html[data-theme="light"] .site-footer a { color: #625c68; }
html[data-theme="light"] .desktop-nav a:hover, html[data-theme="light"] .site-footer a:hover { color: #17131b; }
html[data-theme="light"] .theme-toggle { border-color: #d8d1df; color: #39323f; }
html[data-theme="light"] .theme-toggle:hover { background: #eee9f1; }
html[data-theme="light"] .button-dark, html[data-theme="light"] .button-dark:hover { background: #211d25; color: #fff; box-shadow: 0 7px 18px #211d2518; }
html[data-theme="light"] .hero h1 > span:last-child { background-image: linear-gradient(100deg, #302738 8%, #8a6920 100%); }
html[data-theme="light"] .hero-lede, html[data-theme="light"] .eyebrow { color: #716a76; }
html[data-theme="light"] .hero-notes, html[data-theme="light"] .hero-benefits { color: #716a76; }
html[data-theme="light"] .preview-glow { background: radial-gradient(ellipse at 56% 46%, #eadff0 0, #f5edf7 32%, #fbf9fc 62%, transparent 74%); }
html[data-theme="light"] .preview-window { border-color: #ded7e3; background: #fff; box-shadow: 0 28px 90px #382b4414, 0 5px 20px #24232b08; }
html[data-theme="light"] .window-bar { border-color: #ebe7ee; color: #77717d; }
html[data-theme="light"] .preview-content { background: linear-gradient(135deg, #fff 42%, #f8f5fa); }
html[data-theme="light"] .preview-kicker, html[data-theme="light"] .calendar-time { color: #77717d; }
html[data-theme="light"] .preview-summary > div, html[data-theme="light"] .preview-card { border-color: #e8e3eb; background: #fff; }
html[data-theme="light"] .preview-summary small, html[data-theme="light"] .preview-card-head span, html[data-theme="light"] .preview-calendar small, html[data-theme="light"] .preview-caption small { color: #77717d; }
html[data-theme="light"] .preview-summary strong, html[data-theme="light"] .preview-card-head b { color: #29242e; }
html[data-theme="light"] .preview-task { border-color: #eeebf0; color: #514b56; }
html[data-theme="light"] .preview-task i { border-color: #c8c1cd; }
html[data-theme="light"] .preview-task.is-done { color: #85808a; }
html[data-theme="light"] .preview-task.is-done i { border-color: #24262a; background: #24262a; color: white; }
html[data-theme="light"] .window-bottom { border-color: #e9e5eb; background: #fff; color: #77717d; }
html[data-theme="light"] .preview-caption { border-color: #e4dfe8; background: rgb(255 255 255 / 95%); box-shadow: 0 8px 26px #2221; }
html[data-theme="light"] .caption-mark { background: #f0e8f4; color: #745585; }
html[data-theme="light"] .device-toggle { border-color: #ddd5e3; background: #fff; box-shadow: 0 8px 22px #382b4410; }
html[data-theme="light"] .device-toggle button { color: #706977; }
html[data-theme="light"] .device-toggle button[aria-pressed="true"] { background: #e8c56f; color: #241d10; box-shadow: 0 0 0 1px #d8bd6d66, 0 2px 8px #382b4410; }
html[data-theme="light"] .device-toggle button:hover:not([aria-pressed="true"]) { color: #302738; }
html[data-theme="light"] .feature-story { border-color: #e6dfea; background: #f4f0f6; }
html[data-theme="light"] .feature-story::before { background: radial-gradient(ellipse at 50% 0, #b58acb20, transparent 56%), radial-gradient(ellipse at 8% 100%, #d2af5b12, transparent 40%); }
html[data-theme="light"] .feature-story-eyebrow { color: #806528; }
html[data-theme="light"] .dashboard-demo { border-color: #ddd5e3; background: linear-gradient(145deg,#fff,#f8f5fa 72%); box-shadow: 0 30px 80px #382b4414, 0 0 0 1px #fff inset; }
html[data-theme="light"] .demo-toolbar, html[data-theme="light"] .demo-bottomline { border-color: #e9e3ed; }
html[data-theme="light"] .demo-tabs { border-color: #e5dfea; background: #f1edf4; }
html[data-theme="light"] .demo-tabs button { color: #716979; }
html[data-theme="light"] .demo-tabs button:hover { color: #302738; }
html[data-theme="light"] .demo-tabs button[aria-selected="true"] { border-color: #d5c4df; background: linear-gradient(135deg,#efe5f4,#e6d9ee); color: #2d2434; box-shadow: 0 4px 14px #382b4410; }
html[data-theme="light"] .demo-live-label, html[data-theme="light"] .demo-bottomline { color: #746d79; }
html[data-theme="light"] .demo-panel { color: #211d25; }
html[data-theme="light"] .demo-date, html[data-theme="light"] .demo-kicker { color: #74687c; }
html[data-theme="light"] .demo-greeting, html[data-theme="light"] .demo-view-heading > div > p { color: #716a76; }
html[data-theme="light"] .demo-weather, html[data-theme="light"] .demo-week-switch, html[data-theme="light"] .demo-task-summary { border-color: #e7e1eb; background: #fff; }
html[data-theme="light"] .demo-week-switch button { border-color: #e7e1eb; background: #f6f3f8; color: #574964; }
html[data-theme="light"] .demo-week-switch button:hover { background: #eee8f2; }
html[data-theme="light"] .demo-weather small, html[data-theme="light"] .demo-progress-caption, html[data-theme="light"] .demo-task-summary span { color: #77717d; }
html[data-theme="light"] .demo-event time, html[data-theme="light"] .demo-event > div strong { color: #29242e; }
html[data-theme="light"] .demo-surface, html[data-theme="light"] .demo-day { border-color: #e7e1eb; background: linear-gradient(145deg,#fff,#faf8fb); }
html[data-theme="light"] .demo-event > div small, html[data-theme="light"] .demo-event time span, html[data-theme="light"] .demo-calendar-legend, html[data-theme="light"] .demo-task-copy small, html[data-theme="light"] .demo-full-tasks li > time { color: #77717d; }
html[data-theme="light"] .demo-timeline::before { background: linear-gradient(#a17acb,#c2b1d0 80%,transparent); }
html[data-theme="light"] .demo-event > i { background: #f4edf8; }
html[data-theme="light"] .demo-text-button { color: #76548a; }
html[data-theme="light"] .demo-day > p span, html[data-theme="light"] .week-event time { color: #756881; }
html[data-theme="light"] .demo-day > p b, html[data-theme="light"] .week-event strong, html[data-theme="light"] .demo-task-copy strong { color: #29242e; }
html[data-theme="light"] .demo-day.is-today { border-color: #c9b4d8; background: linear-gradient(160deg,#f0e7f5,#fff 70%); box-shadow: 0 0 24px #a67ac50c inset; }
html[data-theme="light"] .week-event { border-color: #eee8f1; background: #fff; }
html[data-theme="light"] .week-event small, html[data-theme="light"] .demo-open-day { color: #77717d; }
html[data-theme="light"] .demo-task-filters button { border-color: #e7e1eb; background: #fff; color: #716979; }
html[data-theme="light"] .demo-task-filters button span { color: #89828f; }
html[data-theme="light"] .demo-task-filters button[aria-pressed="true"] { border-color: #d5c4df; background: #efe5f4; color: #392c44; }
html[data-theme="light"] .demo-task-list li { border-color: #eee9f1; }
html[data-theme="light"] .demo-checkmark { border-color: #c9c2ce; background: #fff; }
html[data-theme="light"] .demo-task-list li:has(input:checked) .demo-task-copy strong { color: #8a8490; }
html[data-theme="light"] .demo-task-note { color: #716a76; }
html[data-theme="light"] .demo-progress-line { background: #e8e2eb; }

/* Keep the sample's Today screen aligned with the real dashboard hierarchy. */
.demo-today-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.demo-schedule { grid-column: 1 / -1; }
.demo-due-list { display: grid; }
.demo-due-list article { display: grid; grid-template-columns: 66px minmax(0,1fr); align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid #ffffff0c; }
.demo-due-date { color: #d9bf76; font-size: 8px; font-weight: 700; letter-spacing: .07em; }
.demo-due-list article div { display: grid; gap: 4px; min-width: 0; }
.demo-due-list strong { overflow: hidden; color: #eeebf1; font-size: 10px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.demo-due-list small { color: #99939f; font-size: 8px; }
html[data-theme="light"] .demo-due-list article { border-color: #eee9f1; }
html[data-theme="light"] .demo-due-list strong { color: #29242e; }
html[data-theme="light"] .demo-due-list small { color: #77717d; }
@media (max-width: 850px) {
  .demo-today-grid { grid-template-columns: minmax(0,1fr); }
  .demo-schedule { grid-column: auto; }
}
html[data-theme="light"] .pricing-section { background: #fbf9fc; }
html[data-theme="light"] .pricing-heading > p:last-child { color: #6e6874; }
html[data-theme="light"] .price-card, html[data-theme="light"] .price-card-premium { border-color: #e1dbe6; background: #fff; color: #211d25; box-shadow: 0 16px 48px #382b4410; }
html[data-theme="light"] .plan-name, html[data-theme="light"] .price span, html[data-theme="light"] .price-description { color: #756f79; }
html[data-theme="light"] .price-card li { color: #55505a; }
html[data-theme="light"] .price-card li::before { color: #397457; }
html[data-theme="light"] .plan-tag { background: #f0e8f4; color: #674879; }
html[data-theme="light"] .price-annual { color: #856316; }
html[data-theme="light"] .price-card .button-white { background: #211d25; color: #fff; box-shadow: 0 7px 18px #211d2518; }
html[data-theme="light"] .price-card .button-white:hover { background: #39323f; }
html[data-theme="light"] .site-footer { border-color: #e4dfe8; background: #f2eef5; }
html[data-theme="light"] .site-footer a.instagram-link { color: #111; }
html[data-theme="light"] .site-footer > small { color: #746d79; }
.device-panel.is-leaving { z-index: 1; pointer-events: none; }
.dashboard-phone, .dashboard-laptop {
  position: relative;
  transform: perspective(1400px) rotateX(var(--device-tilt-y, 0deg)) rotateY(var(--device-tilt-x, 0deg));
  transform-origin: 50% 65%;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.dashboard-phone.is-settled { animation: phone-hover 6.4s ease-in-out infinite; }
.dashboard-laptop.is-settled { animation: laptop-hover 7.2s ease-in-out infinite; }
.dashboard-laptop-screen { position: relative; }
.dashboard-phone-screen::after, .dashboard-laptop-screen::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: -30% -70%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(108deg, transparent 39%, #ffffff08 45%, #ffffff2b 50%, #ffffff08 55%, transparent 62%);
  transform: translateX(-115%) skewX(-14deg);
}
.dashboard-phone.is-settled .dashboard-phone-screen::after,
.dashboard-laptop.is-settled .dashboard-laptop-screen::after {
  animation: device-sheen 1.35s cubic-bezier(.16, 1, .3, 1) .12s both;
}
@keyframes phone-hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes laptop-hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes device-sheen {
  0% { opacity: 0; transform: translateX(-115%) skewX(-14deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(115%) skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-phone, .dashboard-laptop { transition: none !important; animation: none !important; translate: none !important; }
  .dashboard-phone-screen::after, .dashboard-laptop-screen::after { display: none !important; }
}

/* Center the dashboard welcome and its combined weather/class summary. */
.demo-welcome { flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px; text-align: center; }
.demo-weather { justify-content: center; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; }
.demo-weather-current, .demo-weather-classes { min-width: 130px; grid-template-rows: 26px auto; align-content: start; justify-items: center; }
.demo-weather-current small, .demo-weather-classes small { grid-row: 2; }
.demo-weather-classes strong { align-self: center; }
@media (max-width: 640px) { .demo-weather-current, .demo-weather-classes { min-width: 0; } }

/* Final demo layout overrides come after the older product-preview styles. */
.demo-weather { display: grid; width: 100%; grid-template-columns: minmax(190px,.75fr) minmax(0,1.6fr); justify-content: stretch; gap: 18px; padding: 16px 0 22px; border: 0; border-bottom: 1px solid #292a2d; border-radius: 0; background: transparent; text-align: left; }
.demo-weather-current { min-width: 0; grid-template-columns: auto auto; grid-template-rows: none; align-content: center; justify-items: start; }
.demo-weather-current small { grid-column: 2; grid-row: auto; }
.demo-weather-current > span { grid-row: 1 / span 2; }
.demo-weather-tip { margin: 0; }
.demo-surface { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.demo-day.is-today { box-shadow: none; }
@media (max-width: 850px) {
  .demo-weather { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 14px 0 18px; }
  .demo-weather-current { width: max-content; }
}
@media (max-width: 640px) {
  .demo-weather { grid-template-columns: minmax(0,1fr); }
  .demo-weather-current { min-width: 0; }
}
html[data-theme="light"] .demo-weather { border: 0; border-bottom: 1px solid #e4e3e7; background: transparent; }
html[data-theme="light"] .demo-surface { border: 0; background: transparent; box-shadow: none; }
html[data-theme="light"] .demo-day { border-color: #e4e3e7; background: #fff; }
html[data-theme="light"] .demo-day.is-today { border-color: #a58222; background: #fffdf7; box-shadow: none; }
html[data-theme="light"] .demo-week-switch { border: 0; background: transparent; }
html[data-theme="light"] .demo-tabs button[aria-selected="true"] { border-color: #c9c9cc; background: #e8e8ea; color: #222; box-shadow: none; }
.demo-weather { grid-template-columns: 180px minmax(0, 760px); justify-content: center; column-gap: 12px; }
.demo-weather-hours { width: 100%; max-width: 760px; }
@media (max-width: 850px) {
  .demo-weather { grid-template-columns: minmax(0,1fr); row-gap: 12px; }
  .demo-weather-hours { max-width: none; }
}
.demo-timeline-track { min-height: 80px; }
.demo-timeline-event:nth-of-type(2) { top: 8px; }
.demo-toolbar { justify-content: center; }
.demo-weather { display: flex; width: 100%; justify-content: center; gap: 0; padding: 10px 0 16px; border-bottom: 1px solid #292a2d; }
.demo-weather-current { width: max-content; min-width: 0; grid-template-columns: auto auto; grid-template-rows: none; align-items: center; justify-items: start; }
.demo-weather-current > span { grid-row: 1; }
.demo-welcome { gap: 10px; margin-bottom: 20px; }
.demo-weather { padding: 4px 0 10px; }
@media (max-width: 640px) { .demo-schedule-actions > span { display: none; } }
.feature-story { padding-top: clamp(40px, 5vw, 68px); }
@media (max-width: 640px) { .feature-story { padding-top: 44px; } }
.feature-story-heading { max-width: 1000px; }
.feature-story-heading h2 { white-space: nowrap; }
.feature-story-heading h2 .mobile-title-break { display: none; }
@media (max-width: 640px) {
  .feature-story-heading h2 { white-space: normal; }
  .feature-story-heading h2 .mobile-title-break { display: block; }
}
@media (max-width: 640px) {
  .demo-timeline-track { min-height: 80px; }
  .demo-timeline-event:nth-of-type(2) { top: 8px; }
}
@media (min-width: 1101px) {
  .feature-story { padding-block: 42px; }
  .feature-story > .wrap { display: grid; width: min(1480px, calc(100% - 80px)); grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0; }
  .feature-story-heading { max-width: none; margin: 0; text-align: left; }
  .feature-story-heading h2 { white-space: normal; font-size: clamp(42px, 4vw, 58px); }
  .feature-story-heading h2 br { display: block; }
  .dashboard-demo { width: 100%; max-width: none; margin: 0; }
  .demo-toolbar { min-height: 56px; padding-block: 8px; }
  .demo-viewport { padding: 18px 24px; }
  .demo-welcome { margin-bottom: 12px; }
  .demo-weather { padding-block: 2px 8px; }
  .demo-today-grid { row-gap: 16px; }
  .demo-todos, .demo-due-soon { padding-top: 14px; }
  .demo-view-heading { margin-bottom: 16px; }
}
.dashboard-demo { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.demo-toolbar { min-height: 0; margin-bottom: 14px; padding: 0; border: 0; background: transparent; }
.demo-viewport { overflow: hidden; border: 1px solid #39343f; border-radius: 18px; background: linear-gradient(145deg,#17151c,#100f13 72%); box-shadow: 0 24px 60px #0004; }
html[data-theme="light"] .dashboard-demo { border: 0; background: transparent; box-shadow: none; }
html[data-theme="light"] .demo-viewport { border-color: #ddd5e3; background: #fff; box-shadow: 0 20px 48px #382b4410; }
.demo-view-heading { position: relative; justify-content: center; text-align: center; }
.demo-view-heading > div:first-child { width: 100%; }
.demo-view-heading > .demo-week-switch,
.demo-view-heading > .demo-text-button { position: absolute; right: 0; bottom: 0; }
@media (max-width: 640px) {
  .demo-view-heading { align-items: center; }
  .demo-view-heading > div:first-child { width: 100%; }
  .demo-view-heading > .demo-week-switch,
  .demo-view-heading > .demo-text-button { position: static; align-self: center; }
}
@media (min-width: 851px) {
  .demo-today-grid { grid-template-columns: minmax(0, 1fr); }
}
.demo-viewport { padding-bottom: 22px; }
.demo-schedule .demo-surface-heading { position: relative; justify-content: center; text-align: center; }
.demo-schedule .demo-surface-heading > div:first-child { width: 100%; }
.demo-schedule .demo-schedule-actions { position: absolute; right: 0; }
.demo-schedule .demo-surface-heading h4 {
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.demo-schedule .demo-school-name { font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) {
  .demo-schedule .demo-surface-heading h4 { font-size: 29px; }
  .demo-schedule .demo-surface-heading { flex-direction: column; }
  .demo-schedule .demo-schedule-actions { position: static; justify-content: center; }
}
.faq-section { padding: clamp(76px, 9vw, 118px) 24px; background: #0b0b0d; color: #f4f3f5; }
.faq-inner { width: min(920px, 100%); margin-inline: auto; }
.faq-heading { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.faq-section { --faq-heading-mask: #0b0b0d; }
.faq-heading {
  position: relative;
  isolation: isolate;
}
.faq-heading::before {
  position: absolute;
  z-index: -1;
  inset: 0 -100vw;
  background:
    linear-gradient(90deg,
      transparent calc(var(--notebook-margin-x) + 50vw + 50% - 1px),
      color-mix(in srgb, var(--notebook-margin-color) 42%, transparent) calc(var(--notebook-margin-x) + 50vw + 50% - 1px),
      color-mix(in srgb, var(--notebook-margin-color) 42%, transparent) calc(var(--notebook-margin-x) + 50vw + 50% + 1px),
      transparent calc(var(--notebook-margin-x) + 50vw + 50% + 1px)),
    var(--faq-heading-mask);
  content: "";
  pointer-events: none;
}
.faq-heading h2 { margin: 0; font-size: clamp(34px, 4.5vw, 52px); font-weight: 650; letter-spacing: -.055em; line-height: 1.08; }
.faq-heading h2 span { color: #d8bd72; }
.faq-heading h2 .faq-title-tail { display: contents; color: inherit; }
.faq-heading h2 .faq-title-tail > span { color: #d8bd72; }
.faq-heading > p:last-child { max-width: 620px; margin: 16px auto 0; color: #a1a1aa; font-size: 16px; line-height: 1.6; }
.faq-list { display: grid; gap: 12px; }
.faq-item { overflow: hidden; border: 1px solid #242529; border-radius: 16px; background: #101113; transition: border-color 180ms ease, background 180ms ease; }
.faq-item[open] { border-color: #3b3c41; background: #131416; }
.faq-item summary { position: relative; display: flex; min-height: 82px; align-items: center; padding: 20px 76px 20px 30px; color: #eeedf0; font-size: 17px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { position: absolute; top: 50%; right: 26px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #1d1e21; color: #b9b9c0; content: "⌄"; font-size: 18px; line-height: 1; transform: translateY(-50%); transition: transform 380ms cubic-bezier(.22, 1, .36, 1), background 200ms ease; }
.faq-item[open] summary::after { background: #25262a; transform: translateY(-50%) rotate(180deg); }
.faq-item.is-closing summary::after { transform: translateY(-50%); }
.faq-answer { overflow: hidden; padding: 0 76px 22px 30px; }
.faq-answer p { max-width: 700px; margin: 0; color: #a1a1aa; font-size: 14px; line-height: 1.7; }
.faq-answer a { color: #e3ca82; text-underline-offset: 3px; }
html[data-theme="light"] .faq-section { --faq-heading-mask: var(--paper); background: #f7f4f9; color: #211d25; }
html[data-theme="light"] .faq-heading h2 span { color: #886a25; }
html[data-theme="light"] .faq-heading h2 .faq-title-tail { color: inherit; }
html[data-theme="light"] .faq-heading h2 .faq-title-tail > span { color: #886a25; }
html[data-theme="light"] .faq-heading > p:last-child { color: #6e6874; }
html[data-theme="light"] .faq-item { border-color: #e4dfe8; background: #fff; }
html[data-theme="light"] .faq-item[open] { border-color: #d5cbdc; background: #fdfcff; }
html[data-theme="light"] .faq-item summary { color: #29242e; }
html[data-theme="light"] .faq-item summary::after { background: #f0edf2; color: #655d6b; }
html[data-theme="light"] .faq-item[open] summary::after { background: #e7e0ec; }
html[data-theme="light"] .faq-answer p { color: #6e6874; }
html[data-theme="light"] .faq-answer a { color: #73561b; }
@media (max-width: 640px) {
  .faq-section { padding-inline: 20px; }
  .faq-heading { margin-bottom: 30px; }
  .faq-heading > p:last-child { font-size: 14px; }
  .faq-list { gap: 9px; }
  .faq-item { border-radius: 14px; }
  .faq-item summary { min-height: 70px; padding: 17px 62px 17px 19px; font-size: 15px; }
  .faq-item summary::after { right: 16px; width: 34px; height: 34px; }
  .faq-answer { padding: 0 20px 19px; }
  .faq-answer p { font-size: 13px; }
}
.why-section { padding: clamp(72px, 8vw, 108px) 24px; background: #0d0d10; color: #f4f3f5; }
.why-inner { width: min(1120px, 100%); margin-inline: auto; }
.why-heading { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.why-heading h2 { margin: 0; font-size: clamp(34px, 4.4vw, 50px); font-weight: 650; letter-spacing: -.055em; line-height: 1.08; }
.why-heading > p { margin: 15px 0 0; color: #a1a1aa; font-size: 16px; line-height: 1.6; }
.why-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.why-card { min-height: 255px; padding: 28px; border: 1px solid #26272b; border-radius: 20px; background: linear-gradient(145deg,#151619,#101113 80%); text-align: center; }
.why-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #d8bd7224; border-radius: 15px; background: #d8bd7210; color: #e5c978; }
.why-icon svg { width: 25px; height: 25px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.why-card h3 { margin: 24px 0 10px; color: #f1f0f2; font-size: 19px; font-weight: 650; letter-spacing: -.025em; line-height: 1.3; }
.why-card p { max-width: 310px; margin: 0 auto; color: #a1a1aa; font-size: 14px; line-height: 1.65; }
html[data-theme="light"] .why-section { background: #f7f4f9; color: #211d25; }
html[data-theme="light"] .why-heading > p { color: #6e6874; }
html[data-theme="light"] .why-card { border-color: #e4dfe8; background: linear-gradient(145deg,#fff,#fbf9fc 80%); }
html[data-theme="light"] .why-icon { border-color: #d8bd7240; background: #f6efdc; color: #876b2a; }
html[data-theme="light"] .why-card h3 { color: #29242e; }
html[data-theme="light"] .why-card p { color: #6e6874; }
@media (max-width: 850px) { .why-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.why-card:last-child { grid-column: 1 / -1; min-height: 0; } }
@media (max-width: 560px) { .why-section { padding-inline: 20px; }.why-heading { margin-bottom: 30px; }.why-heading > p { font-size: 14px; }.why-grid { grid-template-columns: 1fr; gap: 11px; }.why-card, .why-card:last-child { grid-column: auto; min-height: 0; padding: 22px; border-radius: 17px; }.why-icon { width: 48px; height: 48px; }.why-card h3 { margin-top: 18px; font-size: 18px; }.why-card p { font-size: 13px; } }
.reviews-section { padding: 74px 24px 8px; background: #0b0b0d; color: #f4f3f5; text-align: center; }
.reviews-inner { width: min(1120px, 100%); margin-inline: auto; }
.reviews-section h2 { margin: 0; font-size: clamp(32px, 4vw, 46px); font-weight: 650; letter-spacing: -.05em; line-height: 1.1; }
html[data-theme="light"] .reviews-section { background: #f7f4f9; color: #211d25; }
@media (max-width: 640px) {
  .reviews-section { padding: 56px 20px 4px; }
  .reviews-section h2 { font-size: clamp(29px, 8vw, 36px); }
}
.reviews-section { padding: clamp(72px, 8vw, 104px) 24px; }
.reviews-inner { width: min(1120px, 100%); margin-inline: auto; }
.reviews-note { max-width: 700px; margin: 13px auto 34px; color: #92929c; font-size: 13px; line-height: 1.5; }
.review-list { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; text-align: left; }
.review-card { grid-column: span 2; min-height: 205px; padding: 24px; border: 1px solid #2a2c32; border-radius: 18px; background: #17171b; }
.review-card:nth-child(4) { grid-column: 2 / span 2; }
.review-card:nth-child(5) { grid-column: 4 / span 2; }
.review-card header { display: flex; align-items: center; gap: 12px; }
.review-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid #d8bd7230; border-radius: 50%; background: #d8bd7214; color: #e5c978; font-size: 12px; font-weight: 700; }
.review-card header div { display: grid; gap: 3px; }
.review-card header strong { color: #efedf1; font-size: 14px; font-weight: 650; }
.review-card header small { color: #d8bd72; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.review-stars { margin-top: 19px; color: #e5c978; font-size: 16px; letter-spacing: .13em; line-height: 1; }
.review-card blockquote { margin: 20px 0 0; color: #c1bdc7; font-size: 14px; line-height: 1.65; }
html[data-theme="light"] .reviews-note { color: #746d79; }
html[data-theme="light"] .review-card { border-color: #e2dce8; background: #fff; }
html[data-theme="light"] .review-avatar { border-color: #d8bd7260; background: #f6efdc; color: #876b2a; }
html[data-theme="light"] .review-card header strong { color: #29242e; }
html[data-theme="light"] .review-card header small { color: #806528; }
html[data-theme="light"] .review-card blockquote { color: #5f5965; }
@media (max-width: 850px) {
  .review-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .review-card, .review-card:nth-child(4) { grid-column: auto; }
  .review-card:nth-child(5) { grid-column: 1 / -1; width: min(100%, 440px); justify-self: center; }
}
@media (max-width: 560px) {
  .reviews-section { padding: 58px 20px; }
  .reviews-note { margin-bottom: 25px; font-size: 12px; }
  .review-list { grid-template-columns: 1fr; gap: 11px; }
  .review-card, .review-card:nth-child(5) { grid-column: auto; width: auto; min-height: 0; padding: 20px; border-radius: 16px; }
  .review-stars { margin-top: 15px; }
  .review-card blockquote { margin-top: 15px; font-size: 13px; }
}
@media (max-width: 640px) {
  .feature-story-heading { width: min(100%, 390px); margin-inline: auto; }
  .feature-story-heading h2 { font-size: clamp(27px, 8vw, 34px); line-height: 1.08; letter-spacing: -.05em; }
}
/* Public theme chooser: share the real dashboard palettes with every landing section. */
.landing-theme-picker { width: min(100%, 490px); margin: 0 auto 28px; }
.landing-theme-picker > p { margin: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.landing-theme-choices { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.landing-theme-choices button { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 9px 4px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); color: var(--ink); font: inherit; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.landing-theme-choices button:hover { transform: translateY(-2px); border-color: var(--swatch); }
.landing-theme-choices button[aria-pressed="true"] { border-color: var(--swatch); background: color-mix(in srgb, var(--swatch) 13%, var(--wash)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch) 20%, transparent); }
.landing-theme-choices button i { width: 17px; height: 17px; border: 1px solid #ffffff35; border-radius: 50%; background: var(--swatch); }
.landing-theme-choices button span { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; }
.landing-theme-choices button[aria-pressed="true"] span { color: var(--ink); }
.landing-theme-status { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.landing-theme-choices [data-landing-palette="green"] { --swatch: #8dcba2; }
.landing-theme-choices [data-landing-palette="blue"] { --swatch: #91b4f4; }
.landing-theme-choices [data-landing-palette="espresso"] { --swatch: #ddb783; }
.landing-theme-choices [data-landing-palette="burgundy"] { --swatch: #e4a0b2; }
.landing-theme-choices [data-landing-palette="teal"] { --swatch: #85c9c2; }
.landing-theme-choices [data-landing-palette="indigo"] { --swatch: #aaa9f4; }
.landing-theme-choices [data-landing-palette="black"] { --swatch: #050505; }


@media (max-width: 640px) {
  .landing-theme-picker { margin-bottom: 23px; }
  .landing-theme-choices { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
  .landing-theme-choices button { grid-column: span 3; grid-template-columns: 14px 1fr; justify-items: start; align-items: center; gap: 4px; padding: 7px 4px; }
  .landing-theme-choices button i { width: 14px; height: 14px; }
  .landing-theme-status { font-size: 9px; }
}

:root[data-theme="dark"][data-dark-palette="green"] { --theme-page:#111c17;--theme-section:#0c1511;--theme-surface:#1b2920;--theme-elevated:#263b2d;--theme-ink:#eff7f1;--theme-muted:#a8b9ad;--theme-border:#304438;--theme-accent:#8dcba2;--theme-accent-soft:#263b2d; }
:root[data-theme="dark"][data-dark-palette="blue"] { --theme-page:#111827;--theme-section:#0c111b;--theme-surface:#1b2538;--theme-elevated:#263957;--theme-ink:#eff4ff;--theme-muted:#abb7cb;--theme-border:#33415a;--theme-accent:#91b4f4;--theme-accent-soft:#263957; }
:root[data-theme="dark"][data-dark-palette="espresso"] { --theme-page:#211a14;--theme-section:#19140f;--theme-surface:#30251b;--theme-elevated:#403021;--theme-ink:#fbf3e8;--theme-muted:#c4b4a0;--theme-border:#4b3b2b;--theme-accent:#ddb783;--theme-accent-soft:#483726; }
:root[data-theme="dark"][data-dark-palette="teal"] { --theme-page:#101d20;--theme-section:#0b1517;--theme-surface:#1a2b2d;--theme-elevated:#233d3e;--theme-ink:#eff8f7;--theme-muted:#a9c0bd;--theme-border:#30494b;--theme-accent:#85c9c2;--theme-accent-soft:#233d3e; }
:root[data-theme="dark"][data-dark-palette="burgundy"] { --theme-page:#211217;--theme-section:#190d12;--theme-surface:#301a22;--theme-elevated:#482630;--theme-ink:#fbf0f2;--theme-muted:#c5aab2;--theme-border:#50303a;--theme-accent:#e4a0b2;--theme-accent-soft:#482630; }
:root[data-theme="dark"][data-dark-palette="indigo"] { --theme-page:#15162a;--theme-section:#0f1020;--theme-surface:#20213a;--theme-elevated:#333455;--theme-ink:#f1f1ff;--theme-muted:#aaaed0;--theme-border:#37395b;--theme-accent:#aaa9f4;--theme-accent-soft:#333455; }
:root[data-theme="dark"][data-dark-palette="black"] { --theme-page:#080808;--theme-section:#050505;--theme-surface:#151515;--theme-elevated:#222222;--theme-ink:#f7f5ef;--theme-muted:#b6b1a6;--theme-border:#34312a;--theme-accent:#d1d1d1;--theme-accent-soft:#292929; }
:root[data-theme="dark"][data-dark-palette] {
  color-scheme: dark;
  --paper:var(--theme-page); --wash:var(--theme-surface); --ink:var(--theme-ink); --muted:var(--theme-muted); --line:var(--theme-border);
  --lilac:var(--theme-accent); --mint:var(--theme-accent-soft); --sand:var(--theme-accent); --green:var(--theme-accent);
  --theme-accent-contrast:color-mix(in srgb,var(--theme-page) 28%,#000);
}
:root[data-theme="dark"][data-dark-palette] body { background:var(--theme-page); color:var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] .site-header { border-color:var(--theme-border); background:radial-gradient(ellipse at 50% 8%,color-mix(in srgb,var(--theme-accent) 22%,transparent),transparent 72%) 0 0 / 100% 60px no-repeat; }
:root[data-theme="dark"][data-dark-palette] :is(.why-section,.feature-story,.feature-band,.ios-section,.pricing-section,.reviews-section,.faq-section,.closing-section,.site-footer) { border-color:var(--theme-border); background:var(--theme-section); }
:root[data-theme="dark"][data-dark-palette] :is(.feature-card,.feature-card-lilac,.feature-card-mint,.feature-card-sand,.review-card,.price-card,.price-card-premium,.faq-item,.dashboard-demo,.demo-surface,.demo-mobile-agenda,.demo-day) { border-color:var(--theme-border); background-color:var(--theme-surface); }
:root[data-theme="dark"][data-dark-palette] .why-card { border-color:var(--theme-border); background:var(--theme-surface); }
:root[data-theme="dark"][data-dark-palette="espresso"] .why-card { background:#2e251c; }
:root[data-theme="dark"][data-dark-palette] .dashboard-demo { background:var(--theme-surface); box-shadow:0 30px 80px #0005; }
:root[data-theme="dark"][data-dark-palette] .hero h1 > span:last-child { background-image:linear-gradient(100deg,var(--theme-ink) 5%,var(--theme-accent) 55%,var(--theme-ink) 94%); }
:root[data-theme="dark"][data-dark-palette] :is(.eyebrow-dot,.feature-icon,.plan-symbol,.demo-tab-icon,.demo-weather-current > span,.demo-calendar-legend i,.demo-day > p em) { color:var(--theme-accent); }
:root[data-theme="dark"][data-dark-palette] .eyebrow-dot { background:var(--theme-accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--theme-accent) 15%,transparent); }
:root[data-theme="dark"][data-dark-palette] :is(.button-dark,.button-white) { border-color:var(--theme-accent); background:var(--theme-accent); color:var(--theme-accent-contrast); }
:root[data-theme="dark"][data-dark-palette] .button-light { border-color:var(--theme-border); background:var(--theme-surface); color:var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] :is(.hero .preview-glow,.preview-glow) { background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--theme-accent) 28%,transparent),transparent 68%); }
:root[data-theme="dark"][data-dark-palette] :is(.demo-tabs button[aria-selected="true"],.demo-day.is-today,.demo-task-filters button[aria-pressed="true"],.demo-mobile-day-picker button[aria-selected="true"]) { border-color:var(--theme-accent); background:var(--theme-accent-soft); color:var(--theme-ink); box-shadow:none; }
:root[data-theme="dark"][data-dark-palette] :is(.demo-date span,.demo-surface-heading .demo-kicker,.demo-weather-tip,.demo-task-summary strong,.demo-day > p em,.demo-mobile-nav .active) { color:var(--theme-accent); }
:root[data-theme="dark"][data-dark-palette] :is(.demo-calendar-legend i,.demo-timeline-event > i,.demo-event > i,.demo-mobile-event > i) { background:var(--theme-accent); box-shadow:none; }
:root[data-theme="dark"][data-dark-palette] .demo-calendar-legend i.legend-study { background:var(--theme-accent); }
:root[data-theme="dark"][data-dark-palette] :is(.site-footer,.site-footer a) { color:var(--theme-muted); }

/* App Store badges use a clean edge without an outline or halo. */
.app-store-badge,
.header-cta.app-store-badge { border: 0; box-shadow: none; }
:root[data-theme="dark"][data-dark-palette="espresso"] .app-store-badge {
  background: #090705;
  color: var(--theme-ink);
}
:root[data-theme="dark"][data-dark-palette="espresso"] .header-cta.app-store-badge {
  background: #050506;
  color: #fff;
}
:root[data-theme="dark"][data-dark-palette="espresso"] .hero-actions .app-store-badge svg { filter: none; }
:root[data-theme="dark"][data-dark-palette="black"] .hero-actions .app-store-badge { background: #dfbd68; color: #080808; }
:root[data-theme="dark"][data-dark-palette="black"] .hero-actions .app-store-badge svg { filter: drop-shadow(0 0 5px #dfbd6870); }

/* The Black theme uses a white-paper treatment on the public website. */
:root[data-theme="dark"][data-dark-palette="black"] {
  color-scheme: light;
  --theme-page: #fff;
  --theme-section: #fff;
  --theme-surface: #fff;
  --theme-elevated: #f5f5f5;
  --theme-ink: #111;
  --theme-muted: #222;
  --theme-border: #dedede;
  --theme-accent: #111;
  --theme-accent-soft: #f0f0f0;
  --theme-accent-contrast: #111;
}
:root[data-theme="dark"][data-dark-palette="black"] .site-header { background: #fff; }
:root[data-theme="dark"][data-dark-palette="black"] .feature-story { background: #fff !important; }

:root[data-theme="dark"][data-dark-palette="black"] .dashboard-phone .demo-status {
  background: #050506 !important;
  color: #f7f7f8 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] .dashboard-phone .iphone-status-icons { color: #f7f7f8 !important; }

/* Short-lived pencil marks react to pointer movement over empty paper only. */
.notebook-trace-canvas {
  position: fixed;
  z-index: 19;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .8;
  mix-blend-mode: screen;
}
:root[data-dark-palette="black"] .notebook-trace-canvas,
:root[data-theme="light"] .notebook-trace-canvas { mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  .notebook-trace-canvas { display: none; }
}

/* A one-time ink ripple on the notebook rules when the landing page opens. */
.notebook-entry-ink {
  position: fixed;
  z-index: 19;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.notebook-entry-ink__rules {
  position: absolute;
  inset: 0;
}
.notebook-entry-ink__rules {
  background-image: linear-gradient(90deg,
    transparent 35%,
    color-mix(in srgb, var(--notebook-rule-color) 14%, transparent) 44%,
    color-mix(in srgb, var(--notebook-rule-color) 48%, white) 50%,
    color-mix(in srgb, var(--notebook-rule-color) 14%, transparent) 56%,
    transparent 65%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--notebook-rule-pattern);
  mask-image: var(--notebook-rule-pattern);
  -webkit-mask-size: 100% 72px;
  mask-size: 100% 72px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  animation: notebook-entry-shimmer 1.25s cubic-bezier(.2,.65,.25,1) forwards;
}
@keyframes notebook-entry-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@media (max-width: 640px) {
  .notebook-entry-ink__rules { -webkit-mask-position: 0 71px; mask-position: 0 71px; }
}
@media (prefers-reduced-motion: reduce) {
  .notebook-entry-ink { display: none !important; }
}
:root[data-theme="dark"][data-dark-palette="black"] :is(.why-section, .reviews-section, .pricing-section, .faq-section, .closing-section, .partner-callout, .site-footer) {
  background: #fff !important;
  color: #111 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] :is(.why-section, .reviews-section, .pricing-section, .faq-section, .closing-section, .partner-callout, .site-footer) :is(h1, h2, h3, h4, summary) {
  color: #111 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] :is(.why-section, .reviews-section, .pricing-section, .faq-section, .closing-section, .partner-callout, .site-footer) p {
  color: #444 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] :is(.review-card, .price-card, .price-card-premium, .faq-item) {
  border-color: #dedede !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: 0 8px 28px rgb(17 17 17 / 6%);
}
:root[data-theme="dark"][data-dark-palette="black"] :is(.review-card strong, .review-card small, .review-card blockquote, .price, .price span, .price-description, .price-card li, .faq-answer p, .faq-answer a, .site-footer a, .site-footer small) {
  color: #333 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] .reviews-section .rating-proof-stars,
:root[data-theme="dark"][data-dark-palette="black"] .price-annual { color: #94731e !important; }
:root[data-theme="dark"][data-dark-palette="black"] .faq-item summary::after {
  background: #f0f0f0 !important;
  color: #111 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] :is(.price-button, .partner-callout .button) {
  border-color: #111 !important;
  background: #111 !important;
  color: #fff !important;
}
:root[data-theme="dark"][data-dark-palette="black"] .price-card .button-light {
  border-color: #111 !important;
  background: #fff !important;
  color: #111 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] .site-footer .brand-logo { filter: brightness(0) saturate(100%); }
:root[data-theme="dark"][data-dark-palette="black"] .site-header .brand-logo { filter: brightness(0) saturate(100%); }
:root[data-theme="dark"][data-dark-palette="black"] .site-header .wordmark::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url("/mylifedashboard-logo-transparent.png?v=6") center / contain no-repeat;
  clip-path: inset(0 89% 0 0);
  pointer-events: none;
}
:root[data-theme="dark"][data-dark-palette="black"] .site-footer .wordmark::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url("/mylifedashboard-logo-transparent.png?v=6") center / contain no-repeat;
  clip-path: inset(0 89% 0 0);
  pointer-events: none;
}
:root[data-theme="dark"][data-dark-palette="black"] :is(.why-section .why-heading h2, .feature-story-copy h2, .reviews-section .rating-proof-copy, .pricing-section h2, .pricing-section h3, .pricing-section .plan-name, .pricing-section .price, .pricing-section .price-description, .pricing-section li) {
  color: #111 !important;
  opacity: 1 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] .pricing-section .price span { color: #333 !important; }
:root[data-theme="dark"][data-dark-palette="black"] .site-footer { background-image: none !important; }
:root[data-theme="dark"][data-dark-palette="black"] .site-header .header-login { color: #111 !important; }
:root[data-theme="dark"][data-dark-palette="black"] .hero-actions .hero-primary,
:root[data-theme="dark"][data-dark-palette="black"] .hero-actions .app-store-badge {
  border: 1px solid #111;
  background: #fff;
  color: #111;
  box-shadow: none;
}
:root[data-theme="dark"][data-dark-palette="black"] .hero-actions .hero-primary {
  border-color: #111;
  background: #111;
  color: #fff;
}
:root[data-theme="dark"][data-dark-palette="black"] .hero-actions .app-store-badge svg { filter: none; }
:root[data-theme="dark"][data-dark-palette="black"] .hero .preview-glow { display: none; }
:root[data-theme="dark"][data-dark-palette="black"] .device-toggle { background: #f2f2f2; box-shadow: none; }
:root[data-theme="dark"][data-dark-palette="black"] .device-toggle button { color: #333; }
:root[data-theme="dark"][data-dark-palette="black"] .device-toggle button[aria-pressed="true"] { background: #111; color: #fff; box-shadow: none; }
:root[data-theme="dark"][data-dark-palette="black"] .device-toggle button:hover:not([aria-pressed="true"]) { color: #111; }
@media (max-width: 640px) {
  :root[data-theme="dark"][data-dark-palette="black"] .hero h1 {
    margin-top: 0 !important;
    transform: translateY(-14px);
    font-size: clamp(36px, 11vw, 46px);
    line-height: 1.28;
    letter-spacing: -.06em;
  }
  :root[data-theme="dark"][data-dark-palette="black"] .hero-actions {
    gap: 12px;
    margin-top: 0;
    transform: translateY(0);
  }
  :root[data-theme="dark"][data-dark-palette="black"] .hero-actions .hero-primary,
  :root[data-theme="dark"][data-dark-palette="black"] .hero-actions .app-store-badge {
    width: min(100%, 290px);
    height: 48px;
    min-height: 48px;
    padding: 3px 10px;
    font-size: 11px;
    position: relative;
    top: 0;
  }
  :root[data-theme="dark"][data-dark-palette="black"] .hero-actions .app-store-badge { gap: 6px; }
  :root[data-theme="dark"][data-dark-palette="black"] .hero-actions .app-store-badge svg { width: 15px; height: 18px; }
  :root[data-theme="dark"][data-dark-palette="black"] .hero-notes { margin-top: 34px; }
  :root[data-theme="dark"][data-dark-palette="black"] .app-store-copy > span { font-size: 8px; }
  :root[data-theme="dark"][data-dark-palette="black"] .app-store-copy strong { font-size: 14px; }
}

/* Keep the palette controls first in the hero, with no extra heading. */
.hero .landing-theme-picker { grid-column: 1 / -1; grid-row: 1; width: min(100%, 490px); margin: 0 auto; }
.hero .preview-scene { grid-row: 2; }
.hero .hero-copy { grid-row: 2; }
@media (min-width: 641px) {
  .hero.wrap { grid-template-rows: 1fr; }
  .hero-copy .landing-theme-picker { width: min(100%, 490px); margin: 0 0 18px; }
}
@media (max-width: 640px) {
  .hero .landing-theme-picker { order: 0; flex: none; width: min(100%, 490px); margin: 0 auto; }
  .hero .preview-scene { order: 2; }
  .hero .hero-copy { order: 1; }
}

/* Shorten the header divider and let it fade before the App Store badge. */
.site-header { position: sticky; }
.site-header::after {
  position: absolute;
  right: auto;
  bottom: 0;
  left: clamp(24px, 4.2vw, 68px);
  width: min(55%, calc(100% - 210px));
  height: 1px;
  background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 70%, transparent) 62%, transparent 100%);
  content: "";
  pointer-events: none;
}
.site-header { border-bottom-color: transparent; }
:root[data-theme="dark"][data-dark-palette] .site-header,
html[data-theme="light"] .site-header { border-bottom-color: transparent; }
.site-header::after { content: none; }
.site-header .wordmark { position: relative; }
.site-header .wordmark::before {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 65%, transparent) 72%, transparent 100%);
  content: "";
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* Compact theme swatches when the picker is in the mobile header. */
.site-header .landing-theme-picker { width: auto; margin: 0; flex: 0 0 auto; }
.site-header .landing-theme-choices { grid-template-columns: repeat(7, 30px); gap: 3px; }
.site-header .landing-theme-choices button { grid-column: auto; width: 30px; height: 30px; justify-items: center; padding: 4px; border: 0; background: transparent; box-shadow: none; }
.site-header .landing-theme-choices button[aria-pressed="true"] { background: color-mix(in srgb, var(--swatch) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--swatch) 60%, transparent); }
.site-header .landing-theme-choices button[aria-pressed="true"] { background: color-mix(in srgb, var(--swatch) 16%, transparent); border: 0; box-shadow: none; }
.site-header .landing-theme-choices button i { width: 17px; height: 17px; }
.site-header .landing-theme-choices button span,
.site-header .landing-theme-status { display: none; }
@media (min-width: 641px) and (max-width: 1000px) {
  .site-header { gap: clamp(10px, 2vw, 18px); }
  .site-header .brand-logo { max-width: 160px; }
  .site-header .desktop-nav { gap: 13px; }
  .site-header .desktop-nav a { font-size: 12px; }
  .site-header .landing-theme-choices { grid-template-columns: repeat(7, 21px); gap: 1px; }
  .site-header .landing-theme-choices button { width: 21px; }
}
@media (max-width: 640px) {
  .hero.wrap {
    transition: gap 520ms cubic-bezier(.22, 1, .36, 1), padding-bottom 520ms cubic-bezier(.22, 1, .36, 1);
  }
  .hero.wrap.is-desktop-preview { gap: 12px; padding-bottom: 36px; }
  /* A fixed portrait-sized slot prevents the hero from jumping between phone
     and laptop intrinsic heights when the inactive panel is hidden. */
  .hero .preview-stage {
    height: min(177.78vw, 650px);
    transition: height 520ms cubic-bezier(.22, 1, .36, 1);
  }
  .hero .preview-scene.is-desktop-preview .preview-stage {
    height: calc((100vw - 40px) * .66);
  }
  .device-panel[data-device-panel="desktop"] { height: 100%; align-content: start; align-items: start; }
  .site-header {
    height: auto;
    min-height: 98px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 30px;
    align-content: center;
    row-gap: 3px;
    padding: 8px 20px 10px;
  }
  .site-header .wordmark { grid-column: 1; grid-row: 1; }
  .site-header .header-cta { grid-column: 2; grid-row: 1; }
  .site-header .landing-theme-picker { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .site-header .landing-theme-choices { grid-template-columns: repeat(7, 37px); gap: 6px; }
  .site-header .landing-theme-choices button { width: 37px; height: 30px; }
}
@media (max-width: 380px) {
  .site-header .landing-theme-choices { grid-template-columns: repeat(7, 32px); gap: 5px; }
  .site-header .landing-theme-choices button { width: 32px; }
}

/* Give the palette its own room below the logo divider. */
@media (max-width: 640px) {
  .site-header {
    min-height: 116px;
    grid-template-rows: 44px 40px;
    row-gap: 8px;
    padding-bottom: 12px;
  }
  .site-header .landing-theme-choices { grid-template-columns: repeat(7, 37px); gap: 6px; }
  .site-header .landing-theme-choices button { width: 37px; height: 40px; grid-template-columns: 1fr; justify-items: center; }
  .site-header .landing-theme-choices button i { width: 25px; height: 25px; }
}
@media (max-width: 380px) {
  .site-header { grid-template-rows: 42px 38px; row-gap: 7px; }
  .site-header .landing-theme-choices { grid-template-columns: repeat(7, 32px); gap: 5px; }
  .site-header .landing-theme-choices button { width: 32px; height: 38px; grid-template-columns: 1fr; justify-items: center; }
  .site-header .landing-theme-choices button i { width: 23px; height: 23px; }
}
@media (max-width: 640px) {
  .site-header { min-height: 124px; }
  .site-header .landing-theme-picker { transform: translateY(16px); }
}
@media (max-width: 640px) and (min-height: 701px) {
  .hero.wrap { padding-top: 16px; }
}
.site-header { border-bottom: 0 !important; }
.site-header .wordmark::before { content: none !important; display: none !important; }
@media (min-width: 641px) {
  .site-header .landing-theme-choices button { place-items: center; }
  .site-header .landing-theme-choices button i { display: block; margin: auto; }
}
@media (min-width: 641px) {
  .site-header.is-scrolled .wordmark::before { opacity: 0; }
}

/* A kinetic, unboxed review field: the orbit is atmosphere, the words stay clear. */
.reviews-section {
  --review-accent: var(--theme-accent, #e5c978);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(76px, 9vw, 118px);
}
.reviews-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 48%;
  left: 50%;
  width: min(930px, 90vw);
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--review-accent) 22%, transparent);
  border-radius: 50%;
  opacity: .42;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  transform: translate(-50%, -50%) rotate(-16deg);
  animation: review-orbit-turn 96s linear infinite;
  pointer-events: none;
}
@keyframes review-orbit-turn {
  to { transform: translate(-50%, -50%) rotate(344deg); }
}
.reviews-inner { position: relative; z-index: 1; width: min(1180px, 100%); }
.reviews-section h2 { font-size: clamp(38px, 5vw, 64px); letter-spacing: -.065em; }
.reviews-note { margin: 16px auto clamp(48px, 6vw, 76px); }
.review-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 84px) clamp(12px, 2.5vw, 38px);
  text-align: left;
}
.review-card,
html[data-theme="light"] .review-card,
:root[data-theme="dark"][data-dark-palette] .review-card {
  position: relative;
  grid-column: auto;
  min-height: 0;
  width: auto;
  padding: 8px 12px 14px 42px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  transition: translate 320ms cubic-bezier(.16, 1, .3, 1);
}
.review-card:nth-child(1) { grid-column: 2 / span 5; }
.review-card:nth-child(2) { grid-column: 8 / span 4; margin-top: 64px; }
.review-card:nth-child(3) { grid-column: 1 / span 5; margin-left: 32px; }
.review-card:nth-child(4) { grid-column: 7 / span 5; margin-top: 56px; }
.review-card:nth-child(5) { grid-column: 4 / span 6; margin-top: 4px; }
.review-card::before {
  content: "“";
  position: absolute;
  top: 8px;
  left: -3px;
  color: var(--review-accent);
  font: 700 clamp(76px, 9vw, 122px)/.75 Satoshi, sans-serif;
  opacity: .15;
  transform: rotate(-8deg);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.review-card::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 12px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--review-accent) 66%, transparent) 18%, color-mix(in srgb, var(--review-accent) 30%, transparent) 82%, transparent);
  transform: scaleY(.28);
  transform-origin: top;
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1);
}
.review-card.is-revealed::after { transform: scaleY(1); }
.review-card header { gap: 12px; }
.review-avatar {
  display: block;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--review-accent);
  font-size: 11px;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}
.review-card header div { gap: 4px; }
.review-card header strong { color: var(--ink, #efedf1); font-size: 14px; }
.review-card header small { color: var(--review-accent); font-size: 10px; letter-spacing: .13em; }
.review-stars { margin-top: 23px; color: var(--review-accent); font-size: 19px; letter-spacing: 0; }
.review-stars span { display: inline-flex; gap: 5px; }
.review-stars i {
  display: inline-block;
  color: var(--review-accent);
  font-size: inherit;
  font-style: normal;
  line-height: 1;
  transform-origin: 50% 70%;
}
.review-card blockquote {
  max-width: 47ch;
  margin: 18px 0 0;
  color: #c1bdc7;
  font-size: clamp(18px, 1.85vw, 23px);
  letter-spacing: -.025em;
  line-height: 1.48;
  text-wrap: pretty;
}
.review-card:hover { translate: 0 -5px; }
.review-card:hover::before { opacity: .25; transform: rotate(2deg) scale(1.06); }
html[data-theme="light"] .review-card header strong,
html[data-theme="light"] .review-card blockquote { color: #29242e; }
html[data-theme="light"] .review-card header small { color: #806528; }
@media (max-width: 850px) {
  .review-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 18px; }
  .review-card:nth-child(1) { grid-column: 1 / span 3; }
  .review-card:nth-child(2) { grid-column: 4 / span 3; margin-top: 44px; }
  .review-card:nth-child(3) { grid-column: 1 / span 3; margin-left: 0; }
  .review-card:nth-child(4) { grid-column: 4 / span 3; margin-top: 42px; }
  .review-card:nth-child(5) { grid-column: 2 / span 4; margin-top: 0; }
}
@media (max-width: 560px) {
  .reviews-section { padding: 58px 24px 64px; }
  .reviews-section::before { top: 54%; width: 150vw; opacity: .24; }
  .reviews-section h2 { font-size: clamp(34px, 9vw, 42px); }
  .reviews-note { margin: 12px auto 40px; font-size: 12px; }
  .review-list { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .review-card,
  .review-card:nth-child(n) {
    grid-column: 1;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 7px 0 10px 28px;
  }
  .review-card::before { top: 8px; left: -2px; font-size: 74px; }
  .review-card::after { bottom: 8px; }
  .review-card header { gap: 10px; }
  .review-card header strong { font-size: 13px; }
  .review-card header small { font-size: 9px; }
  .review-stars { margin-top: 17px; font-size: 17px; }
  .review-card blockquote { margin-top: 14px; font-size: clamp(18px, 5vw, 20px); line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-section::before { animation: none; }
  .review-card { transition: none; }
  .review-card::before,
  .review-card::after { transition: none; }
}

@media (max-width: 560px) {
  .reviews-section { padding-block: 58px 64px; }
  .review-card::before { top: 68px; }
}

/* Keep the unboxed quote field legible at every width. */
.review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(42px, 6vw, 76px) clamp(34px, 7vw, 104px); }
.review-card:nth-child(n) { grid-column: auto; width: auto; margin: 0; }
.review-card:nth-child(even) { padding-top: 44px; }
.review-card:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: min(620px, 100%); }
@media (max-width: 760px) {
  .review-list { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .review-card:nth-child(n) { grid-column: 1; width: 100%; margin: 0; }
  .review-card:nth-child(even) { padding-top: 7px; }
  .review-card:nth-child(5) { grid-column: 1; width: 100%; }
}

.landing-theme-picker { overflow: visible; }
.landing-theme-choices > button { position: relative; z-index: 1; }

/* Keep reviews and the pricing card together in two balanced desktop columns. */
.reviews-pricing-layout {
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .reviews-pricing-layout {
    display: grid;
    width: min(1600px, calc(100% - 64px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(24px, 3vw, 48px);
    margin: 28px auto 64px;
    overflow: hidden;
    border-radius: 44px;
    background: var(--theme-section, var(--paper));
  }
  .reviews-pricing-layout > .reviews-section,
  .reviews-pricing-layout > .pricing-section {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: clamp(32px, 4vw, 58px);
    border-radius: 0;
    background: var(--theme-section, var(--paper)) !important;
  }
  .reviews-pricing-layout > .pricing-section {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .reviews-pricing-layout .reviews-inner,
  .reviews-pricing-layout .review-star-field,
  .reviews-pricing-layout .pricing-grid {
    width: 100%;
  }
  .reviews-pricing-layout .reviews-inner { max-width: none; }
  .reviews-pricing-layout .reviews-section h2,
  .reviews-pricing-layout .pricing-heading h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 3.4vw, 46px);
    letter-spacing: -.055em;
    line-height: 1.08;
  }
  .reviews-pricing-layout .pricing-heading h2 { font-size: clamp(31px, 2.5vw, 38px); }
  .reviews-pricing-layout .pricing-heading {
    max-width: none;
    margin: 0 0 24px;
    text-align: left;
  }
  .reviews-pricing-layout .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 0;
    height: 100%;
    margin: 0;
  }
  .reviews-pricing-layout .price-card { height: 100%; }
  .reviews-pricing-layout .review-star-field {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-items: stretch;
    gap: 12px 8px;
  }
  .reviews-pricing-layout .review-star-motif {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-inline: 3px;
    font-size: clamp(9px, .8vw, 11px);
  }
  .reviews-pricing-layout .reviewer-name { font-size: clamp(9px, .76vw, 11px); }
}

@media (max-width: 640px) {
  .site-header .landing-theme-picker {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
  }
}

@media (min-width: 641px) {
  body.landing-page .why-section {
    padding-top: clamp(16px, 2vw, 24px);
  }
}

/* Give the desktop hero headline more scale without changing mobile layouts. */
@media (min-width: 1001px) {
  .hero-scroll-stage > .hero-copy {
    scale: 1.12;
    transform-origin: center center;
  }
}

/* Lower the desktop device switcher into the preview area; the active device
   then sizes itself to the remaining stage height, including the iPhone demo. */
@media (min-width: 641px) {
  .hero-scroll-stage .device-toggle {
    position: relative;
    z-index: 8;
    margin-top: 0;
    margin-bottom: 0;
    transform: translateY(clamp(24px, 4vh, 40px));
  }
  .hero-scroll-stage .preview-scene:not(.is-desktop-preview) .device-toggle {
    transform: none;
  }
}
@media (min-width: 1001px) {
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
    width: min(238px, 46.9cqh, 100%);
    max-width: min(238px, 46.9cqh, 100%);
  }
}

:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .why-section .hero-notes,
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .why-section .hero-benefit-rotator {
  color: #f4f4f6 !important;
}

/* Give the desktop hero the same blue starting rule under its header. */
@media (min-width: 641px) {
  :root body.landing-page .hero[data-hero-scroll-story],
  :root[data-theme][data-dark-palette] body.landing-page .hero[data-hero-scroll-story] {
    position: relative;
  }
  :root body.landing-page .hero[data-hero-scroll-story]::before,
  :root[data-theme][data-dark-palette] body.landing-page .hero[data-hero-scroll-story]::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 1px;
    background: rgb(100 157 246 / 28%);
    pointer-events: none;
  }
}

/* Keep mobile section spacing compact and consistent around pricing. */
@media (max-width: 640px) {
  .reviews-section { padding-block: 40px 16px; }
  .pricing-section.wrap { width: 100%; padding: 16px 20px 20px; }
  .pricing-heading { margin-bottom: 24px; }
  .pricing-heading h2 {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(27px, 7vw, 30px);
    line-height: 1.1;
    letter-spacing: -1.4px;
  }
  .pricing-heading > p:last-child { margin-top: 14px; line-height: 1.55; }
  .price-card { display: grid; padding: 24px 22px; }
  .price-card h3 { margin: 16px 0; line-height: 1.25; }
  .price-card .price { line-height: 1; }
  .price-annual { margin: 8px 0 0; line-height: 1.4; }
  .price-description { margin: 16px 0; line-height: 1.6; }
  .price-card ul { gap: 12px; margin: 0 0 20px; }
  .price-button { margin-top: 0; }

  .faq-section { padding-block: 20px 44px; }
  .faq-heading { margin-bottom: 18px; }
  .faq-heading h2 {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(27px, 7vw, 30px);
    line-height: 1.04;
    letter-spacing: -1.4px;
  }
  .faq-heading h2 .faq-title-tail { display: block; }
  .faq-heading { margin-bottom: 10px; }
  .faq-heading > p:last-child { margin-top: 10px; }
}

/* Landing demo follows the dashboard's real card, week selector, and agenda surfaces. */
:root[data-theme="dark"][data-dark-palette] .dashboard-demo { background: transparent; box-shadow: none; }
:root[data-theme="dark"][data-dark-palette] .demo-viewport {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: 0 24px 60px #0004;
}
:root[data-theme="dark"][data-dark-palette] .demo-toolbar { background: transparent; }
:root[data-theme="dark"][data-dark-palette] .demo-tabs { border-color: var(--theme-border); background: var(--theme-page); }
:root[data-theme="dark"][data-dark-palette] .demo-tabs button { color: var(--theme-muted); }
:root[data-theme="dark"][data-dark-palette] .demo-tabs button[aria-selected="true"] { border-color: var(--theme-accent); background: var(--theme-accent-soft); color: var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] .demo-panel { color: var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] .demo-home-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
:root[data-theme="dark"][data-dark-palette] .demo-home-heading h3 { margin: 0; color: var(--theme-ink); font-size: 19px; font-weight: 750; letter-spacing: -.035em; }
:root[data-theme="dark"][data-dark-palette] .demo-home-heading p { margin: 4px 0 0; color: var(--theme-muted); font-size: 11px; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week { margin-bottom: 12px; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day { display: grid; min-width: 0; min-height: 66px; place-content: center; justify-items: center; gap: 5px; padding: 7px 3px; border: 0; border-radius: 11px; background: color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface)); color: var(--theme-ink); font: inherit; cursor: pointer; transition: background 180ms ease, transform 180ms ease; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day:hover { transform: translateY(-1px); }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day > span { color: var(--theme-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day > b { font-size: 18px; line-height: 1; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day > i { display: flex; height: 5px; align-items: center; gap: 3px; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day > i em { width: 4px; height: 4px; border-radius: 50%; background: var(--theme-accent); }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day.is-today:not(.is-selected) { outline: 1px solid color-mix(in srgb,var(--theme-accent) 60%,transparent); outline-offset: 1px; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day.is-selected { background: var(--theme-accent); color: var(--theme-page); }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week__day.is-selected > span { color: inherit; opacity: .75; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-day-summary { display: grid; min-width: 0; padding: 12px 15px; border: 0; border-radius: 16px; background: color-mix(in srgb,var(--theme-page) 82%,var(--theme-surface)); color: var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-day-summary__date { display: block; margin: 0 0 7px; color: var(--theme-ink); font: 750 13px/1.25 Satoshi,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-day-summary__row { display: grid; grid-template-columns: minmax(68px,82px) minmax(0,1fr); gap: 10px; align-items: start; padding: 9px 0; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-day-summary__row + .home-day-summary__row { border-top: 1px solid color-mix(in srgb,var(--theme-accent) 17%,var(--theme-border)); }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-day-summary__row time { color: color-mix(in srgb,var(--theme-ink) 82%,var(--theme-accent)); font-size: 11px; font-weight: 750; white-space: nowrap; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-day-summary__row b { display: block; color: var(--theme-ink); font-size: 12px; line-height: 1.35; }
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-day-summary__row small { display: block; margin-top: 3px; color: var(--theme-muted); font-size: 10px; line-height: 1.35; }
:root[data-theme="dark"][data-dark-palette] .demo-home-empty { margin: 4px 0; color: var(--theme-muted); font-size: 11px; }
:root[data-theme="dark"][data-dark-palette] .demo-day { border-color: transparent; background: var(--theme-page); }
:root[data-theme="dark"][data-dark-palette] .week-event { border-color: color-mix(in srgb,var(--theme-border) 70%,transparent); background: color-mix(in srgb,var(--theme-page) 70%,var(--theme-surface)); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button { border-color: transparent; background: color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface)); color: var(--theme-muted); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda { border: 0; background: color-mix(in srgb,var(--theme-page) 82%,var(--theme-surface)); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-event { border-color: color-mix(in srgb,var(--theme-accent) 17%,var(--theme-border)); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-event > i { background: var(--theme-accent); box-shadow: none; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-event.is-study > i { background: var(--theme-muted); }
:root[data-theme="dark"][data-dark-palette] .demo-task-filters button { border-color: var(--theme-border); background: var(--theme-page); color: var(--theme-muted); }
:root[data-theme="dark"][data-dark-palette] .demo-task-list li { border-color: var(--theme-border); }
:root[data-theme="dark"][data-dark-palette] .demo-task-copy strong { color: var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] .demo-task-copy small { color: var(--theme-muted); }
:root[data-theme="dark"][data-dark-palette] .demo-task-filters button[aria-pressed="true"] { border-color: var(--theme-accent); background: var(--theme-accent-soft); color: var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] .demo-task-filters button span { color: inherit; opacity: .72; }
:root[data-theme="dark"][data-dark-palette] .demo-checkmark { border-color: var(--theme-border); background: var(--theme-page); }
:root[data-theme="dark"][data-dark-palette] .demo-task-list input:checked + .demo-checkmark { border-color: var(--theme-accent); background: var(--theme-accent); }
:root[data-theme="dark"][data-dark-palette] .demo-add-task { margin: 0 0 12px; padding: 12px; border-radius: 12px; background: var(--theme-page); }
:root[data-theme="dark"][data-dark-palette] .demo-add-task[hidden] { display: none; }
:root[data-theme="dark"][data-dark-palette] .demo-add-task label { display: block; margin-bottom: 7px; color: var(--theme-muted); font-size: 10px; font-weight: 650; }
:root[data-theme="dark"][data-dark-palette] .demo-add-task > div { display: flex; gap: 7px; }
:root[data-theme="dark"][data-dark-palette] .demo-add-task input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid var(--theme-border); border-radius: 8px; background: var(--theme-surface); color: var(--theme-ink); font: inherit; font-size: 11px; }
:root[data-theme="dark"][data-dark-palette] .demo-add-task button { padding: 8px 11px; border-radius: 8px; background: var(--theme-accent); color: var(--theme-page); font: inherit; font-size: 10px; font-weight: 700; }
:root[data-theme="dark"][data-dark-palette] .demo-add-task button.demo-cancel-task { background: transparent; color: var(--theme-muted); }
html[data-theme="light"] .demo-home-heading h3 { color: #202125; }
html[data-theme="light"] .demo-home-heading p { color: #6f7178; }
html[data-theme="light"] .demo-home-schedule .home-week__days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
html[data-theme="light"] .demo-home-schedule .home-week__day { display: grid; min-height: 66px; place-content: center; justify-items: center; gap: 5px; padding: 7px 3px; border: 0; border-radius: 11px; background: #f4f2f5; color: #29242e; font: inherit; cursor: pointer; }
html[data-theme="light"] .demo-home-schedule .home-week__day > span { color: #77717d; font-size: 9px; font-weight: 700; }
html[data-theme="light"] .demo-home-schedule .home-week__day > b { font-size: 18px; }
html[data-theme="light"] .demo-home-schedule .home-week__day > i { display: flex; height: 5px; gap: 3px; }
html[data-theme="light"] .demo-home-schedule .home-week__day > i em { width: 4px; height: 4px; border-radius: 50%; background: #8b6b9e; }
html[data-theme="light"] .demo-home-schedule .home-week__day.is-selected { background: #886a25; color: #fff; }
html[data-theme="light"] .demo-home-schedule .home-day-summary { padding: 12px 15px; border-radius: 16px; background: #f6f5f6; }
html[data-theme="light"] .demo-home-schedule .home-day-summary__date { display: block; margin: 0 0 7px; font-size: 13px; text-transform: uppercase; }
html[data-theme="light"] .demo-home-schedule .home-day-summary__row { display: grid; grid-template-columns: minmax(68px,82px) minmax(0,1fr); gap: 10px; padding: 9px 0; }
html[data-theme="light"] .demo-home-schedule .home-day-summary__row + .home-day-summary__row { border-top: 1px solid #e4e3e7; }
html[data-theme="light"] .demo-home-schedule .home-day-summary__row time { font-size: 11px; font-weight: 750; }
html[data-theme="light"] .demo-home-schedule .home-day-summary__row b { font-size: 12px; }
html[data-theme="light"] .demo-home-schedule .home-day-summary__row small { display: block; margin-top: 3px; color: #6f7178; font-size: 10px; }
html[data-theme="light"] .demo-home-empty { color: #6f7178; font-size: 11px; }
html[data-theme="light"] .demo-add-task { margin: 0 0 12px; padding: 12px; border-radius: 12px; background: #f6f5f6; }
html[data-theme="light"] .demo-add-task[hidden] { display: none; }
html[data-theme="light"] .demo-add-task label { display: block; margin-bottom: 7px; color: #6f7178; font-size: 10px; }
html[data-theme="light"] .demo-add-task > div { display: flex; gap: 7px; }
html[data-theme="light"] .demo-add-task input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid #dedee2; border-radius: 8px; background: #fff; color: #202125; font: inherit; font-size: 11px; }
html[data-theme="light"] .demo-add-task button { padding: 8px 11px; border-radius: 8px; background: #886a25; color: #fff; font: inherit; font-size: 10px; font-weight: 700; }
html[data-theme="light"] .demo-add-task button.demo-cancel-task { background: transparent; color: #6f7178; }
@media (max-width: 520px) {
  .demo-home-heading { align-items: flex-start; }
  .demo-home-heading h3 { font-size: 16px; }
  .demo-home-heading > .demo-text-button { flex: 0 0 auto; font-size: 9px; }
  .demo-home-schedule .home-week__days { gap: 4px; }
  .demo-home-schedule .home-week__day { min-height: 60px; }
  .demo-home-schedule .home-week__day > b { font-size: 16px; }
  .demo-home-schedule .home-day-summary__row { grid-template-columns: minmax(60px,72px) minmax(0,1fr); gap: 7px; }
  .demo-home-schedule .home-day-summary__row time { font-size: 10px; }
  .demo-home-schedule .home-day-summary__row b { font-size: 11px; }
  .demo-add-task > div { flex-wrap: wrap; }
  .demo-add-task input { flex-basis: 100%; }
}
.demo-full-tasks li[hidden] { display: none !important; }

/* Match the app Calendar mobile strip and agenda cards. */
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button {
  min-height: 66px;
  gap: 4px;
  padding: 9px 0 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb,#fff 4%,var(--theme-page));
  color: var(--theme-ink);
}
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button small { color: inherit; font-size: 10px; opacity: .75; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button b { color: inherit; font-size: 19px; line-height: 1; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker .cal-dots { display: flex; height: 5px; gap: 3px; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker .cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker .cal-dots i.is-class { background: var(--theme-accent); opacity: 1; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button.is-today:not([aria-selected="true"]) { border-color: color-mix(in srgb,var(--theme-accent) 70%,transparent); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button[aria-selected="true"] { border-color: transparent; background: var(--theme-accent); color: var(--theme-page); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button[aria-selected="true"] small { opacity: .85; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-day-picker button[aria-selected="true"] .cal-dots i { background: currentColor; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda { padding: 0; border: 0; border-radius: 0; background: transparent; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-agenda-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; text-align: center; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-agenda-head h3 { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 8px; margin: 0; color: var(--theme-ink); font: 800 20px/1.2 Satoshi,sans-serif; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-agenda-head h3 span + span { color: var(--theme-muted); font-size: 14px; font-weight: 600; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-agenda-head small { color: var(--theme-muted); font-size: 11px; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-item { display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-left: 3px solid color-mix(in srgb,var(--theme-accent) 45%,var(--theme-border)); border-radius: 14px; background: color-mix(in srgb,var(--theme-page) 78%,var(--theme-surface)); color: var(--theme-ink); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-item.is-class { border-left-color: var(--theme-accent); background: color-mix(in srgb,var(--theme-accent) 12%,var(--theme-page)); }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-item time { display: grid; color: var(--theme-ink); font-size: 13px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-item div { display: grid; min-width: 0; gap: 2px; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-item b { overflow-wrap: anywhere; color: var(--theme-ink); font-size: 14px; }
:root[data-theme="dark"][data-dark-palette] .demo-mobile-agenda .cal-item div small { overflow-wrap: anywhere; color: var(--theme-muted); font-size: 11px; }
html[data-theme="light"] .demo-mobile-day-picker button { min-height: 66px; gap: 4px; padding: 9px 0 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #29242e; }
html[data-theme="light"] .demo-mobile-day-picker button small { color: inherit; font-size: 10px; opacity: .75; }
html[data-theme="light"] .demo-mobile-day-picker button b { color: inherit; font-size: 19px; line-height: 1; }
html[data-theme="light"] .demo-mobile-day-picker .cal-dots { display: flex; height: 5px; gap: 3px; }
html[data-theme="light"] .demo-mobile-day-picker .cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
html[data-theme="light"] .demo-mobile-day-picker .cal-dots i.is-class { background: #886a25; opacity: 1; }
html[data-theme="light"] .demo-mobile-day-picker button[aria-selected="true"] { border-color: transparent; background: #886a25; color: #fff; }
html[data-theme="light"] .demo-mobile-day-picker button[aria-selected="true"] .cal-dots i { background: currentColor; }
html[data-theme="light"] .demo-mobile-agenda { padding: 0; border: 0; border-radius: 0; background: transparent; }
html[data-theme="light"] .demo-mobile-agenda .cal-agenda-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; text-align: center; }
html[data-theme="light"] .demo-mobile-agenda .cal-agenda-head h3 { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 8px; margin: 0; color: #29242e; font: 800 20px/1.2 Satoshi,sans-serif; }
html[data-theme="light"] .demo-mobile-agenda .cal-agenda-head h3 span + span, html[data-theme="light"] .demo-mobile-agenda .cal-agenda-head small { color: #716a76; }
html[data-theme="light"] .demo-mobile-agenda .cal-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
html[data-theme="light"] .demo-mobile-agenda .cal-item { display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-left: 3px solid #b8a8c3; border-radius: 14px; background: #f7f5f8; color: #29242e; }
html[data-theme="light"] .demo-mobile-agenda .cal-item.is-class { border-left-color: #886a25; background: #f7f0df; }

/* Match the mobile agenda's "today" label to its date. */
.demo-mobile-agenda .cal-agenda-head h3 span:first-child {
  color: var(--theme-muted, #716a76);
  font-family: Satoshi, sans-serif;
  font-size: 14px;
  font-weight: 600;
}
html[data-theme="light"] .demo-mobile-agenda .cal-item time, html[data-theme="light"] .demo-mobile-agenda .cal-item b { color: #29242e; }
html[data-theme="light"] .demo-mobile-agenda .cal-item div { display: grid; min-width: 0; gap: 2px; }
html[data-theme="light"] .demo-mobile-agenda .cal-item b { overflow-wrap: anywhere; font-size: 14px; }
html[data-theme="light"] .demo-mobile-agenda .cal-item div small { overflow-wrap: anywhere; color: #716a76; font-size: 11px; }
@media (max-width: 520px) {
  .demo-mobile-day-picker { gap: 5px; }
  .demo-mobile-day-picker button { min-height: 60px; }
  .demo-mobile-agenda .cal-item { grid-template-columns: 68px minmax(0,1fr); gap: 9px; padding: 10px; }
  .demo-mobile-agenda .cal-item time { font-size: 12px; }
  .demo-mobile-agenda .cal-item b { font-size: 13px; }
  .demo-mobile-agenda .cal-item div small { font-size: 10px; }
}

/* Keep these surfaces defined by fill and spacing, without perimeter strokes. */
.why-card,
.why-icon,
.dashboard-demo,
.demo-viewport,
.demo-tabs,
.demo-tabs button,
.demo-week-switch button,
.demo-mobile-day-picker button,
.demo-day,
.demo-task-filters button,
.demo-surface,
.demo-timeline-track {
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  .why-section { padding-top: 32px; }
  .why-grid { gap: 12px; }
  .why-card,
  .why-card:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px 26px;
    text-align: center;
  }
  .why-icon { margin: 0 auto 16px; }
  .why-card h3 { margin: 0 0 8px; }
  .why-card p { max-width: 36ch; line-height: 1.55; }
}

@media (max-width: 640px) {
  /* Let the header leave with the page so it can't cover the phone as the
     hero hands off to ordinary scrolling. */
  :root body.landing-page > .site-header {
    position: relative !important;
    top: auto !important;
  }

  /* Keep a small rule-sized gap after the phone. Pulling the next section up
     farther makes it paint over the phone as the sticky stage releases. */
  .why-section {
    position: relative;
    z-index: 2;
    margin-top: -16px;
  }
}

@media (min-width: 1001px) {
  .site-header .brand-logo {
    height: 32px;
    max-width: min(310px, 34vw);
    transition: height 300ms cubic-bezier(.22, 1, .36, 1), max-width 300ms cubic-bezier(.22, 1, .36, 1);
  }
  .site-header .desktop-nav a {
    font-size: 17px;
    transition: color .16s ease, font-size 300ms cubic-bezier(.22, 1, .36, 1);
  }
  .site-header.is-scrolled .brand-logo { height: 24px; max-width: min(230px, 34vw); }
  .site-header.is-scrolled .desktop-nav a { font-size: 14px; }
}

.landing-theme-choices button i {
  position: relative;
  transition: filter 160ms ease, outline-color 160ms ease, box-shadow 160ms ease;
}
.landing-theme-choices button:hover i { filter: brightness(1.12); }
.landing-theme-choices button:not([aria-pressed="true"]):hover i { outline: 2px solid #ffffffd9; outline-offset: -3px; }
.landing-theme-choices button:focus-visible { outline: 2px solid var(--swatch); outline-offset: 4px; }

/* Let the palette arrive with a soft, staggered lift instead of popping in. */
@keyframes palette-swatch-enter {
  0% { opacity: 0; translate: 0 9px; scale: .72; filter: blur(4px); }
  68% { opacity: 1; translate: 0 -2px; scale: 1.06; filter: blur(0); }
  100% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
.landing-theme-choices > button:nth-child(1) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(1) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 40ms; }
.landing-theme-choices > button:nth-child(2) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(2) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 88ms; }
.landing-theme-choices > button:nth-child(3) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(3) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 136ms; }
.landing-theme-choices > button:nth-child(4) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(4) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 184ms; }
.landing-theme-choices > button:nth-child(5) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(5) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 232ms; }
.landing-theme-choices > button:nth-child(6) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(6) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 280ms; }
.landing-theme-choices > button:nth-child(7) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(7) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 328ms; }
.landing-theme-choices > button:nth-child(8) i,
.landing-theme-choices > .landing-theme-belt-group:not(.landing-theme-conveyor-copy) > button:nth-child(8) i { animation: palette-swatch-enter 640ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 376ms; }
@media (prefers-reduced-motion: reduce) {
  .landing-theme-choices button i { animation: none !important; }
}
.landing-theme-choices button[aria-pressed="true"] i {
  box-shadow: 0 0 0 2px var(--theme-page, #11131a), 0 0 0 5px var(--swatch) !important;
}
/* Keep selection feedback attached to the color swatch, never a surrounding card. */
.landing-theme-choices button[aria-pressed="true"],
.site-header .landing-theme-choices button[aria-pressed="true"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.landing-theme-choices button[aria-pressed="true"] i {
  outline: 3px solid var(--theme-ink, #f5f3f8) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--theme-page, #11131a) !important;
}
.landing-theme-choices [data-landing-palette="black"][aria-pressed="true"] i { outline: 3px solid #fff !important; outline-offset: 4px; box-shadow: 0 0 0 2px var(--theme-page, #11131a) !important; }

/* Keep the desktop hero within the first viewport and lift its main content. */
@media (min-width: 1000px) {
  .hero.wrap {
    height: calc(100svh - 76px);
    min-height: 680px;
    padding-block: 18px 26px;
    grid-template-rows: minmax(0, 1fr);
  }
  .hero .preview-scene,
  .hero .hero-copy { grid-row: 1; }
  .hero .preview-scene {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: min(650px, calc(100svh - 165px));
    min-height: 0;
  }
  .hero .preview-stage { order: 0; flex: 1 1 auto; height: auto; min-height: 0; }
  .hero .device-toggle { order: 1; flex: 0 0 auto; align-self: center; width: max-content; }
  .dashboard-phone { width: min(260px, 30vh, 100%); }
}

/* Use unlabeled color dots instead of outlined palette cards. */
.landing-theme-choices button,
.landing-theme-choices button:hover,
.landing-theme-choices button[aria-pressed="true"] {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.landing-theme-choices button i { border: 0; }
.landing-theme-choices button[aria-pressed="true"] i {
  outline: 3px solid var(--theme-ink, var(--ink)) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--theme-page, var(--paper)) !important;
}
.site-header .landing-theme-choices button[aria-pressed="true"] { border: 0; background: transparent; box-shadow: none; }
.site-header .landing-theme-choices button[aria-pressed="true"] i {
  outline: 3px solid var(--theme-ink, var(--ink)) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--theme-page, var(--paper)) !important;
}
.landing-theme-choices button[aria-pressed="true"] i,
.landing-theme-choices [data-landing-palette="black"][aria-pressed="true"] i,
.site-header .landing-theme-choices button[aria-pressed="true"] i {
  outline: none !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  .site-header {
    transition: min-height 540ms cubic-bezier(.22, 1, .36, 1), padding 540ms cubic-bezier(.22, 1, .36, 1), grid-template-rows 540ms cubic-bezier(.22, 1, .36, 1), row-gap 540ms cubic-bezier(.22, 1, .36, 1);
  }
  .site-header .wordmark {
    position: relative;
    transform: none;
    transition: transform 540ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  .site-header .header-cta {
    transition: opacity 320ms ease, transform 460ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 320ms;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    visibility: visible;
  }
  .site-header .landing-theme-picker { transition: transform 540ms cubic-bezier(.22, 1, .36, 1); }
  .site-header.is-scrolled {
    min-height: 82px;
    grid-template-rows: 36px 24px;
    row-gap: 2px;
    padding: 5px 20px 8px;
  }
  .site-header.is-scrolled .wordmark { transform: translate3d(calc((100vw - 100%) / 2 - 20px), 0, 0); }
  .site-header.is-scrolled .header-cta { opacity: 0; pointer-events: none; transform: translate3d(0, -8px, 0) scale(.94); visibility: hidden; }
  :root[data-theme="dark"][data-dark-palette] .site-header.is-scrolled { background: radial-gradient(ellipse at 50% 8%, color-mix(in srgb, var(--theme-accent) 22%, transparent), transparent 72%) 0 0 / 100% 60px no-repeat; }
  .site-header.is-scrolled .landing-theme-picker { transform: none; }
  .site-header.is-scrolled .wordmark::before { opacity: 0; }
}

/* Round the outer pricing panel edges shown in the latest references. */
.pricing-section {
  border-radius: 64px;
}
@media (max-width: 640px) {
  .pricing-section {
    border-radius: 40px;
  }
}

/* Compress the reviews into a compact, readable proof point and remove the
   oversized rotating decoration behind them. */
.reviews-section {
  padding: 38px 28px 62px;
}
.reviews-section::before { display: none; }
.reviews-section h2 {
  scroll-margin-top: 96px;
  margin: 0 0 16px;
  font-size: clamp(34px, 3.2vw, 44px);
  letter-spacing: -.055em;
}
.reviews-note {
  margin: 9px auto 24px;
  font-size: 13px;
}
.review-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
:root .reviews-section .review-card,
:root[data-theme="light"] .reviews-section .review-card,
:root[data-theme="dark"][data-dark-palette] .reviews-section .review-card {
  min-height: 0;
  margin: 0;
  padding: 16px 16px 17px 28px;
  border: 1px solid color-mix(in srgb, var(--review-accent) 22%, transparent) !important;
  border-radius: 18px;
  background: color-mix(in srgb, var(--review-accent) 5%, var(--paper)) !important;
  transition: translate 180ms ease, border-color 180ms ease;
}
.review-card:nth-child(n) { grid-column: auto; width: auto; justify-self: stretch; }
.review-card:nth-child(even) { padding-top: 16px; }
.review-card::before { display: none; }
.review-card::after {
  top: 16px;
  bottom: 16px;
  transform: scaleY(1);
}
.review-card header { gap: 8px; }
.review-avatar { font-size: 10px; }
.review-card header strong { font-size: 12px; }
.review-card header small { font-size: 9px; }
.review-stars { margin-top: 12px; font-size: 15px; }
.review-card blockquote {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.42;
}
.review-card:hover { translate: 0 -2px; }
.review-card:hover::before { display: none; }
@media (max-width: 900px) {
  .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 560px) {
  .reviews-section { padding: 70px 20px 64px; }
  .reviews-section h2 { scroll-margin-top: 142px; font-size: clamp(30px, 8vw, 36px); }
  .reviews-note { margin: 8px auto 18px; font-size: 12px; }
  .review-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :root .reviews-section .review-card,
  :root[data-theme="light"] .reviews-section .review-card,
  :root[data-theme="dark"][data-dark-palette] .reviews-section .review-card {
    padding: 13px 14px 14px 26px;
    border-radius: 15px;
  }
  .review-card::after { top: 13px; bottom: 13px; }
  .review-stars { margin-top: 9px; }
  .review-card blockquote { margin-top: 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .review-card { transition: none !important; }
}

/* A small, decorative field of floating stars in place of sample reviews. */
.review-star-field {
  display: grid;
  width: min(760px, 100%);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: 13px 18px;
  margin: 0 auto;
}
.review-star-motif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 8px 12px 9px;
  border: 1px solid color-mix(in srgb, var(--review-accent, var(--theme-accent, #91b4f4)) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--review-accent, var(--theme-accent, #91b4f4)) 7%, var(--paper));
  color: var(--review-accent, var(--theme-accent, #91b4f4));
  font-size: 14px;
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
  animation: review-star-float 4.8s ease-in-out infinite;
}
.review-star-motif:nth-child(5n + 2) { animation-delay: -1.1s; }
.review-star-motif:nth-child(5n + 3) { animation-delay: -2.2s; }
.review-star-motif:nth-child(5n + 4) { animation-delay: -3.3s; }
.review-star-motif:nth-child(5n + 5) { animation-delay: -4.1s; }
@keyframes review-star-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (max-width: 760px) {
  .review-star-field { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
  .review-star-motif { min-width: 0; padding: 8px 9px; font-size: 12px; }
}
@media (max-width: 420px) {
  .review-star-field { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .review-star-motif { animation: none; }
}

.review-star-field { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.review-star-motif {
  min-width: 96px;
  border: 0;
  border-radius: 14px;
  flex-direction: column;
  gap: 4px;
  padding: 7px 6px 8px;
  font-size: 11px;
  letter-spacing: .1em;
}
.reviewer-name {
  text-transform: capitalize !important;
  color: var(--ink, var(--theme-ink, #f4f4f6));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.reviewer-stars { color: #e5c978; line-height: 1; }
.dashboard-phone-screen .mobile-theme-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #050506;
}
.dashboard-phone-screen .mobile-theme-layer.is-light-theme { background: #fff; }
.dashboard-phone-screen .mobile-theme-layer.is-light-theme .demo-status {
  background: var(--phone-status-bg, #fff);
  color: #161616;
}
.dashboard-phone-screen .mobile-theme-layer.is-light-theme .iphone-status-icons { color: #161616; }
.dashboard-phone-screen .mobile-theme-layer.mobile-screen-swipe-layer {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: clip-path;
}

.dashboard-phone-screen { overflow:clip; }
:root[data-theme="dark"][data-dark-palette] .demo-home-heading,
html[data-theme="light"] .demo-home-heading {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 14px;
  text-align: center;
}
:root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week,
html[data-theme="light"] .demo-home-schedule .home-week { margin: 0 0 12px; }
:root[data-theme="dark"][data-dark-palette] .demo-home-heading h3,
html[data-theme="light"] .demo-home-heading h3 { margin: 0; }
:root[data-theme="dark"][data-dark-palette] .demo-home-heading > div:first-child,
html[data-theme="light"] .demo-home-heading > div:first-child { width: 100%; }
:root[data-theme="dark"][data-dark-palette] .demo-home-heading > .demo-text-button,
html[data-theme="light"] .demo-home-heading > .demo-text-button {
  position: static;
  align-self: center;
  margin-top: 0;
  padding-block: 0;
}
@media (max-width: 520px) {
  :root[data-theme="dark"][data-dark-palette] .demo-home-heading,
  html[data-theme="light"] .demo-home-heading { align-items: center; margin-bottom: 12px; }
  :root[data-theme="dark"][data-dark-palette] .demo-home-schedule .home-week,
  html[data-theme="light"] .demo-home-schedule .home-week { margin-bottom: 10px; }
}
@media (max-width: 760px) {
  .review-star-field { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .review-star-motif { min-width: 0; padding: 7px 5px; }
}

/* Keep the reviews, pricing, and FAQ backdrop continuous in every theme. */
:root[data-theme="dark"][data-dark-palette] :is(.reviews-section, .pricing-section, .faq-section) {
  background: var(--theme-page);
}
:root[data-theme="light"] :is(.reviews-section, .pricing-section, .faq-section) {
  background: var(--paper);
}
@media (max-width: 640px) {
  .review-star-field > .review-star-motif:nth-last-child(-n + 2) { display: none; }
  .site-footer .wordmark { justify-self: center; }
}

/* Keep the desktop navigation in its compact glass state at every scroll position. */
@media (min-width: 641px) {
  .site-header,
  .site-header.is-scrolled {
    height: 64px;
    background: color-mix(in srgb, var(--theme-page, #080809) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
  .site-header .brand-logo,
  .site-header.is-scrolled .brand-logo {
    height: 26px;
    max-width: min(280px, 34vw);
  }
  .site-header .desktop-nav a,
  .site-header.is-scrolled .desktop-nav a {
    font-size: 15px;
  }
  html[data-theme="light"] .site-header,
  html[data-theme="light"] .site-header.is-scrolled {
    background: rgb(251 249 252 / 92%);
  }
}

/* Keep the color chooser in the header's second row on wider layouts. */
@media (min-width: 641px) {
  body.landing-page { --landing-hero-sticky-top: 128px; }
  body.landing-page .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 64px 56px;
    align-content: center;
    height: auto !important;
    min-height: 128px;
    padding-block: 4px 8px;
  }
  body.landing-page .site-header .wordmark { grid-column: 1; grid-row: 1; }
  body.landing-page .site-header .desktop-nav { grid-column: 2; grid-row: 1; }
  body.landing-page .site-header > .header-cta { grid-column: 3; grid-row: 1; }
  body.landing-page .site-header .landing-theme-picker {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(490px, 100%);
    margin: 0;
  }
}
/* Keep the color chooser discoverable on both header layouts. */
.site-header .landing-theme-picker {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.site-header .landing-theme-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 16px;
  letter-spacing: .02em;
  text-align: center;
  text-transform: none;
}
@media (max-width: 640px) {
  .site-header:has(.landing-theme-hint) {
    min-height: 140px;
    grid-template-rows: 44px auto;
    row-gap: 8px;
    padding-bottom: 10px;
  }
  .site-header .landing-theme-picker {
    transform: none;
    padding-block: 0;
    margin-top: 0;
    margin-bottom: 0;
    gap: 3px;
  }
  .site-header .landing-theme-choices { order: 1; }
  .site-header .landing-theme-hint { order: 2; font-size: 12px; line-height: 18px; }
}

/* The pink swatch uses the same pale canvas and rose accent as the app. */
:root[data-theme="light"][data-light-palette="pastel-pink"] {
  --paper: #fff0f4;
  --wash: #f9dce6;
  --ink: #30213f;
  --muted: #776a7e;
  --line: #edbecd;
  --lilac: #a84f71;
  --mint: #a84f71;
  --green: #a84f71;
  --sand: #926b2a;
  --theme-page: #fff0f4;
  --theme-surface: #fffafc;
  --theme-ink: #30213f;
  --theme-muted: #776a7e;
  --theme-border: #edbecd;
  --theme-accent: #e4a0b2;
  --theme-accent-soft: #f9dce6;
}
:root[data-theme="light"][data-light-palette="pastel-pink"] .site-header {
  background: rgb(255 240 244 / 94%);
  border-color: var(--line);
}
:root[data-theme="light"][data-light-palette="pastel-pink"] .faq-heading h2 .faq-title-tail > span {
  color: #a84f71;
}
:root[data-theme="light"] .partner-callout {
  background:
    radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--theme-accent, #d8c17d) 14%, transparent), transparent 55%),
    var(--theme-page, var(--paper));
  color: var(--theme-ink, var(--ink));
}
:root[data-theme="light"] .partner-callout h2 { color: var(--theme-ink, var(--ink)); }
:root[data-theme="light"] .partner-callout > .partner-callout-inner > p:not(.eyebrow) {
  color: var(--theme-muted, var(--muted));
}
:root[data-theme="light"] .partner-callout .button-dark,
:root[data-theme="light"] .partner-callout .button-dark:hover {
  border-color: var(--theme-accent, #e9d8f2);
  background: var(--theme-accent, #e9d8f2);
  color: var(--theme-ink, var(--ink));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--theme-ink, var(--ink)) 10%, transparent);
}
:root[data-theme="light"][data-light-palette="pastel-pink"] :is(.why-section, .feature-story, .site-footer) {
  background: var(--paper);
  color: var(--ink);
}

/* Keep the mobile color picker close to the logo in the compact sticky header. */
@media (max-width: 640px) {
  .site-header.is-scrolled:has(.landing-theme-hint) {
    min-height: 107px;
    grid-template-rows: 28px 40px;
    row-gap: 8px;
    padding: 11px 20px 20px;
  }
  .site-header.is-scrolled .landing-theme-picker { gap: 0; }
  .site-header.is-scrolled .landing-theme-hint { display: block; font-size: 12px; line-height: 16px; }
}
:root[data-theme="light"][data-light-palette="pastel-pink"] :is(.why-card, .price-card, .demo-viewport, .faq-item) {
  background: #fffafc;
  border-color: var(--line);
  color: var(--ink);
}
:is(.price-card, .faq-item) { border: 0; }
:root[data-theme="light"][data-light-palette="pastel-pink"] :is(.hero-primary, .price-button),
:root[data-theme="light"][data-light-palette="pastel-pink"] .demo-tabs button[aria-selected="true"],
:root[data-theme="light"][data-light-palette="pastel-pink"] .demo-home-schedule .home-week__day.is-selected,
:root[data-theme="light"][data-light-palette="pastel-pink"] .demo-mobile-day-picker button[aria-selected="true"],
:root[data-theme="light"][data-light-palette="pastel-pink"] .demo-task-filters button[aria-pressed="true"] {
  background: #e4a0b2;
  border-color: #e4a0b2;
  color: #30213f;
}
:root[data-theme="light"][data-light-palette="pastel-pink"] :is(.demo-tabs, .demo-home-schedule .home-day-summary, .demo-home-schedule .home-week__day:not(.is-selected), .why-icon, .demo-add-task) {
  background: var(--wash);
  border-color: var(--line);
}
:root[data-theme="light"][data-light-palette="pastel-pink"] .preview-glow {
  background: radial-gradient(ellipse at 56% 46%, #f5c7d8 0, #fff0f4 60%, transparent 76%);
}
:root[data-theme="light"][data-light-palette="pastel-pink"] .hero h1 > span:last-child {
  background-image: linear-gradient(100deg, #30213f 8%, #a84f71 100%);
}

/* Enlarge and center the pricing benefits within the desktop card's open space. */
@media (min-width: 900px) {
  .reviews-pricing-layout > .pricing-section .price-card {
    display: grid;
    grid-template-rows: auto auto auto minmax(210px, 1fr) auto;
    gap: 0;
  }
  .reviews-pricing-layout > .pricing-section .price-card ul {
    width: min(100%, 700px);
    justify-self: center;
    align-self: center;
    gap: 22px;
    margin: 0;
  }
  .reviews-pricing-layout > .pricing-section .price-card li {
    justify-content: center;
    gap: 14px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.5;
    text-align: center;
  }
  .reviews-pricing-layout > .pricing-section .price-card li::before { font-size: 18px; }
  .reviews-pricing-layout > .pricing-section .price-button { margin-top: 0; }
}

@media (max-width: 899px) {
  .price-card ul { width: min(100%, 560px); margin-inline: auto; }
  .price-card li { font-size: 14px; line-height: 1.5; }
  .price-card li::before { font-size: 16px; }
}

/* Keep the selected swatch ring inside the dot while hovered, including black. */
.landing-theme-picker .landing-theme-choices button[aria-pressed="true"]:hover i {
  outline-offset: -4px !important;
}

/* Match the bold, square login button to the currently selected theme. */
.site-header .header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 5px solid #000;
  border-radius: 0;
  background: var(--theme-accent, var(--sand, #dfbd68));
  box-shadow: 6px 6px 0 #000;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase !important;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.site-header .header-login svg {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.site-header .header-login:hover {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 #000;
  filter: brightness(1.06);
  color: #fff;
}
.site-header .header-login:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 #000;
}
.site-header > .header-cta {
  display: none;
  font-size: 12px;
}
@media (max-width: 640px) {
  .site-header > .header-cta { display: inline-flex; }
  .site-header.is-scrolled > .header-cta {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -8px, 0) scale(.94);
    visibility: hidden;
  }
}

/* Blend the landing header into the active theme until the user scrolls. */
body.landing-page .site-header:not(.is-scrolled) {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Use a neutral ambient shadow for dark palettes; retain the warm glow in the white/pink theme. */
:root[data-theme="dark"] .hero .dashboard-phone {
  box-shadow:
    inset 0 0 0 1px #9698a2,
    inset 0 0 0 3px #41434b,
    inset 0 0 0 5px #1c1d22,
    0 18px 42px rgb(0 0 0 / 48%);
}

/* Five-column editorial treatment from the supplied reference. */
.why-section {
  padding: clamp(28px, 3.3vw, 48px) clamp(20px, 2.2vw, 44px) 44px;
  background: var(--theme-section, #191612);
  color: var(--theme-ink, #eee9df);
}
.why-inner { width: 100%; max-width: none; }
.why-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.why-grid > .why-card {
  min-width: 0;
  min-height: 0;
  padding: 54px clamp(22px, 2.05vw, 40px) 44px;
  border: 0 !important;
  position: relative;
  border-right: 0 !important;
  border-radius: 0;
  background: transparent !important;
  text-align: left;
}
.why-grid > .why-card::after {
  position: absolute;
  top: 20%;
  right: 0;
  bottom: 20%;
  width: 1px;
  background: color-mix(in srgb, var(--theme-ink, #eee9df) 24%, transparent);
  content: "";
  pointer-events: none;
}
.why-grid > .why-card:last-child::after { display: none; }
.why-number {
  display: block;
  margin: 0 0 32px;
  color: color-mix(in srgb, var(--theme-ink, #eee9df) 52%, transparent);
  font: 600 16px/1.2 Satoshi, sans-serif;
  letter-spacing: .12em;
}
.why-grid > .why-card h3 {
  margin: 0 0 30px;
  color: var(--theme-ink, #eee9df);
  font: 650 clamp(25px, 1.9vw, 39px)/1.2 Satoshi, sans-serif;
  letter-spacing: -.035em;
  text-align: center;
}
.why-grid > .why-card p {
  max-width: 31ch;
  margin: 0 auto;
  color: var(--theme-muted, #b1aaa0);
  font: 400 clamp(17px, 1.2vw, 24px)/1.55 Satoshi, sans-serif;
  text-align: center;
}
.why-grid > .why-card { text-align: center; }
@media (min-width: 641px) {
  .why-section { padding-block: 16px; }
}
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-grid > .why-card { min-height: 0; }
  .why-grid > .why-card:nth-child(3n)::after { display: none; }
  .why-grid > .why-card:nth-child(n + 4) { border-top: 1px solid color-mix(in srgb, var(--theme-ink, #eee9df) 24%, transparent) !important; }
}
@media (max-width: 760px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid > .why-card { min-height: 0; padding: 34px 24px; }
  .why-grid > .why-card:nth-child(3n)::after { display: block; }
  .why-grid > .why-card:nth-child(2n)::after { display: none; }
  .why-grid > .why-card:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--theme-ink, #eee9df) 24%, transparent) !important; }
  .why-grid > .why-card h3 { font-size: clamp(23px, 4vw, 30px); }
}
@media (max-width: 520px) {
  .why-section { padding: 26px 20px 32px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid > .why-card,
  .why-grid > .why-card:nth-child(3n),
  .why-grid > .why-card:nth-child(2n) {
    min-height: 0;
    padding: 28px 18px 30px;
    border-right: 0 !important;
  }
  .why-grid > .why-card::after { display: none; }
  .why-grid > .why-card + .why-card { border-top: 1px solid color-mix(in srgb, var(--theme-ink, #eee9df) 24%, transparent) !important; }
  .why-number { margin-bottom: 20px; }
  .why-grid > .why-card h3 { margin-bottom: 16px; font-size: 25px; }
  .why-grid > .why-card p { font-size: 17px; }
}

/* Keep the logo, centered section links, and login control in fixed columns. */
@media (min-width: 641px) {
  body.landing-page .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-content: stretch;
    gap: 28px;
    padding-inline: clamp(56px, 10vw, 144px);
    height: clamp(78px, 6.2vw, 90px);
  }
  body.landing-page .site-header .wordmark {
    grid-column: 1;
    justify-self: start;
  }
  body.landing-page .site-header .brand-logo {
    height: clamp(29px, 2.3vw, 34px);
    max-width: min(360px, 34vw);
  }
  body.landing-page .site-header .desktop-nav {
    grid-column: 2;
    justify-content: center;
    gap: clamp(28px, 4vw, 58px);
  }
  body.landing-page .site-header .desktop-nav a {
    font-size: clamp(16px, 1.4vw, 20px);
  }
  body.landing-page .site-header > .header-cta {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
  }
  body.landing-page .site-header .header-login {
    min-height: clamp(46px, 3.6vw, 52px);
    padding-inline: clamp(16px, 1.6vw, 23px);
    border-width: 6px;
    box-shadow: 7px 7px 0 #000;
    font-size: clamp(15px, 1.2vw, 18px);
  }
  body.landing-page .site-header .header-login svg {
    width: clamp(18px, 1.5vw, 22px);
    height: clamp(18px, 1.5vw, 22px);
  }
  body.landing-page .site-header .header-login:hover {
    box-shadow: 5px 5px 0 #000;
  }
}

/* Remove the divider above the schedule demo in every theme. */
.feature-story { border-top: 0 !important; }

/* The black palette alone gets the tagged charcoal schedule surface. */
:root[data-theme="dark"][data-dark-palette="black"] .feature-story {
  background: #161616 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] .feature-story::before {
  background: none !important;
}

/* The hero's rotating benefit sits below its lead-in and shares its typography. */
.hero-notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 8px auto 0;
  color: var(--theme-muted, #a1a1aa);
  font: 600 clamp(20px, 2.5vw, 32px)/1.35 Satoshi, sans-serif;
  white-space: normal;
}
.hero-notes-intro {
  display: block !important;
  font-size: 1em;
}
.hero-benefit-rotator {
  position: relative;
  display: block !important;
  flex: 0 0 auto;
  min-height: 1.35em;
  color: var(--theme-accent, #e8bd58);
  white-space: nowrap;
}
.hero-notes .hero-benefit-reserve {
  display: block !important;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.hero-notes .hero-benefit-typing {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hero-benefit-rotator [data-hero-benefit] { min-width: 0; }
.hero-benefit-caret {
  display: inline-block !important;
  flex: 0 0 3px;
  width: 3px !important;
  height: .95em !important;
  margin-left: 5px;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  animation: hero-caret-blink 820ms steps(2, start) infinite;
}
@media (min-width: 641px) {
  .hero-notes { margin-top: 26px; }
}

@keyframes hero-caret-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .hero-benefit-caret { animation: none; }
}

/* Keep the mobile sign-in action compact within the narrow header. */
@media (max-width: 640px) {
  body.landing-page .site-header .header-login {
    min-height: 34px;
    gap: 6px;
    padding-inline: 10px;
    border-width: 3px;
    box-shadow: 3px 3px 0 #000;
    font-size: 10px;
    letter-spacing: .035em;
  }
  body.landing-page .site-header .header-login svg { width: 15px; height: 15px; }
}

/* Preserve readable dark text on the Black palette's light login button. */
:root[data-theme="dark"][data-dark-palette="black"] .site-header .header-login,
:root[data-theme="dark"][data-dark-palette="black"] .site-header .header-login:hover,
:root[data-theme="dark"][data-dark-palette="black"] .site-header .header-login:active {
  color: #080808;
}

/* Single social proof point with an energetic five-star animation. */
.reviews-section .rating-proof-copy {
  margin: 0;
  font-size: clamp(25px, 3.4vw, 42px);
  letter-spacing: -.045em;
  line-height: 1.15;
}
.reviews-section .rating-proof-stars {
  display: flex;
  justify-content: center;
  gap: clamp(5px, 1.1vw, 14px);
  margin: 22px auto 0;
  color: #f2cf68;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
  filter: drop-shadow(0 0 10px rgb(242 207 104 / 48%));
}
/* Keep the desktop rating and plan card aligned without the repeated pitch heading. */
@media (min-width: 900px) {
  .reviews-pricing-layout {
    align-items: center;
  }
  .reviews-pricing-layout > .reviews-section {
    display: grid;
    min-height: 0;
    align-items: center;
  }
  .reviews-pricing-layout > .pricing-section {
    display: flex;
    align-items: center;
  }
  .reviews-pricing-layout > .pricing-section .pricing-grid,
  .reviews-pricing-layout > .pricing-section .price-card {
    height: auto;
  }
}
.rating-proof-stars span {
  display: inline-block;
  transform-origin: center;
  animation: rating-star-burst 1.15s cubic-bezier(.2, .8, .2, 1) both,
             rating-star-glow 2.2s ease-in-out 1.15s infinite;
}
.rating-proof-stars span:nth-child(2) { animation-delay: .08s, 1.23s; }
.rating-proof-stars span:nth-child(3) { animation-delay: .16s, 1.31s; }
.rating-proof-stars span:nth-child(4) { animation-delay: .24s, 1.39s; }
.rating-proof-stars span:nth-child(5) { animation-delay: .32s, 1.47s; }
@keyframes rating-star-burst {
  0% { opacity: 0; transform: translateY(32px) rotate(-100deg) scale(.15); }
  65% { opacity: 1; transform: translateY(-9px) rotate(16deg) scale(1.3); }
  82% { transform: translateY(3px) rotate(-7deg) scale(.92); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes rating-star-glow {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-5px) scale(1.13); filter: brightness(1.28); }
}
@media (prefers-reduced-motion: reduce) {
  .rating-proof-stars span { animation: none; }
}

/* Four miniature worlds: layered 3D scenes animate the benefits without replacing their copy. */
.why-grid > .why-card {
  --why-accent: var(--theme-accent, #d8bd72);
  --why-tilt-x: 0deg;
  --why-tilt-y: 0deg;
  position: relative;
  isolation: isolate;
  perspective: 900px;
  transform: perspective(1100px) rotateX(var(--why-tilt-y)) rotateY(var(--why-tilt-x));
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
}
:root[data-theme="dark"][data-dark-palette="black"] .why-grid > .why-card { --why-accent: #d8bd72; }
.why-grid > .why-card::before {
  position: absolute;
  z-index: -1;
  inset: 10% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--why-accent) 13%, transparent), transparent 70%);
  content: "";
  opacity: .45;
  pointer-events: none;
  transform: translateZ(-35px) scale(.8);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(.16,1,.3,1);
}
.why-card.is-inview::before { opacity: .95; transform: translateZ(-15px) scale(1.12); }
.why-stage {
  position: relative;
  display: grid;
  width: min(100%, 210px);
  height: 112px;
  margin: 0 auto 27px;
  place-items: center;
  perspective: 700px;
  transform-style: preserve-3d;
}
.why-stage::before {
  position: absolute;
  width: 86px;
  height: 86px;
  border: 1px solid color-mix(in srgb, var(--why-accent) 15%, transparent);
  border-radius: 50%;
  content: "";
  transform: rotateX(68deg) translateZ(-10px);
  box-shadow: 0 0 32px color-mix(in srgb, var(--why-accent) 9%, transparent), inset 0 0 24px color-mix(in srgb, var(--why-accent) 8%, transparent);
}
.why-stage-halo { position: absolute; width: 94px; height: 94px; border: 1px solid color-mix(in srgb, var(--why-accent) 28%, transparent); border-radius: 50%; transform: rotateX(67deg) rotateZ(-22deg) translateZ(10px); }
.why-stage-halo::after { position: absolute; top: 6px; left: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--why-accent); content: ""; box-shadow: 0 0 17px 5px color-mix(in srgb, var(--why-accent) 50%, transparent); }
.why-palette-card { position: absolute; display: grid; width: 95px; height: 64px; grid-template-columns: 23px 1fr; grid-template-rows: repeat(2, 1fr); align-items: center; gap: 7px; padding: 10px; border: 1px solid color-mix(in srgb, var(--why-accent) 38%, transparent); border-radius: 12px; background: linear-gradient(145deg,color-mix(in srgb,var(--theme-surface,#30283b) 76%,var(--why-accent)),color-mix(in srgb,var(--theme-page,#141319) 92%,var(--why-accent))); box-shadow: 0 16px 32px #0006, inset 0 1px #fff2; transform-style: preserve-3d; }
.why-palette-card i { grid-row: 1 / 3; width: 23px; height: 23px; border-radius: 8px; background: conic-gradient(var(--why-accent) 0 25%, color-mix(in srgb,var(--why-accent) 72%,white) 0 50%, color-mix(in srgb,var(--why-accent) 48%,var(--theme-surface,#fff)) 0 75%, color-mix(in srgb,var(--why-accent) 82%,black) 0); box-shadow: 0 0 14px color-mix(in srgb, var(--why-accent) 30%, transparent); }
.why-palette-card b { height: 5px; border-radius: 8px; background: color-mix(in srgb, var(--why-accent) 68%, transparent); }
.why-palette-card b:last-child { width: 67%; opacity: .48; }
.why-palette-card-back { opacity: .44; transform: translate3d(30px,-18px,-26px) rotateY(22deg) rotateZ(12deg) scale(.82); }
.why-palette-card-mid { opacity: .7; transform: translate3d(-31px,-7px,-12px) rotateY(-18deg) rotateZ(-11deg) scale(.9); }
.why-palette-card-front { transform: translate3d(0,8px,25px) rotateY(-6deg) rotateX(5deg); }
.why-stage-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--why-accent); box-shadow: 0 0 12px 4px color-mix(in srgb, var(--why-accent) 36%, transparent); }
.why-spark-a { top: 12px; right: 22%; }
.why-spark-b { bottom: 9px; left: 20%; width: 3px; height: 3px; }
.why-connect-orbit { position: absolute; width: 112px; height: 62px; border: 1px solid color-mix(in srgb, var(--why-accent) 34%, transparent); border-radius: 50%; transform: rotate(-25deg) rotateX(65deg) translateZ(9px); }
.why-connect-orbit-b { width: 83px; height: 103px; border-style: dashed; opacity: .58; transform: rotate(45deg) rotateX(66deg) translateZ(16px); }
.why-connect-core { z-index: 2; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid color-mix(in srgb, var(--why-accent) 58%, transparent); border-radius: 14px; background: linear-gradient(145deg,color-mix(in srgb,var(--theme-surface,#252b3c) 72%,var(--why-accent)),var(--theme-page,#111218)); color: var(--why-accent); font-size: 20px; box-shadow: 0 0 30px color-mix(in srgb, var(--why-accent) 24%, transparent), 0 12px 25px #0007; transform: translateZ(34px); }
.why-connect-node { position: absolute; z-index: 1; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid color-mix(in srgb, var(--why-accent) 42%, transparent); border-radius: 9px; background: color-mix(in srgb,var(--theme-surface,#1a1a20) 82%,var(--why-accent)); color: var(--why-accent); font-size: 12px; box-shadow: 0 8px 18px #0007; transform: translateZ(24px); }
.why-node-calendar { top: 13px; left: calc(50% - 13px); }
.why-node-school { bottom: 14px; left: calc(50% - 63px); }
.why-node-check { right: calc(50% - 63px); bottom: 14px; }
.why-organize-shadow { position: absolute; width: 120px; height: 14px; bottom: 12px; border-radius: 50%; background: color-mix(in srgb, var(--why-accent) 28%, transparent); filter: blur(10px); transform: rotateX(70deg) translateZ(-15px); }
.why-organize-calendar { position: absolute; display: grid; width: 94px; height: 73px; grid-template-columns: repeat(4,1fr); grid-template-rows: 12px repeat(3,1fr); gap: 5px; padding: 10px; border: 1px solid color-mix(in srgb, var(--why-accent) 45%, transparent); border-radius: 12px; background: linear-gradient(145deg,color-mix(in srgb,var(--theme-surface,#25362c) 72%,var(--why-accent)),var(--theme-page,#111612)); box-shadow: 0 17px 34px #0007, inset 0 1px #fff2; transform: translate3d(-11px,2px,12px) rotateY(-14deg) rotateX(6deg); }
.why-organize-calendar i { grid-column: 1 / -1; border-radius: 5px; background: linear-gradient(90deg,var(--why-accent),color-mix(in srgb,var(--why-accent) 25%,transparent)); }
.why-organize-calendar b { border: 1px solid color-mix(in srgb, var(--why-accent) 21%, transparent); border-radius: 3px; background: #ffffff08; }
.why-organize-calendar b:nth-of-type(3), .why-organize-calendar b:nth-of-type(7), .why-organize-calendar b:nth-of-type(8) { background: var(--why-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--why-accent) 40%, transparent); }
.why-organize-task { position: absolute; z-index: 2; display: flex; width: 79px; height: 31px; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--why-accent) 35%, transparent); border-radius: 9px; background: color-mix(in srgb,var(--theme-surface,#202820) 78%,var(--why-accent)); box-shadow: 0 10px 22px #0007; transform: translate3d(34px,-14px,34px) rotateY(-12deg); }
.why-organize-task i { display: grid; width: 12px; height: 12px; place-items: center; border: 1px solid var(--why-accent); border-radius: 4px; color: var(--why-accent); font-size: 8px; font-style: normal; }
.why-organize-task b { width: 14px; height: 3px; border-radius: 3px; background: #fff8; }.why-organize-task b:last-child { width: 9px; opacity: .42; }
.why-task-two { width: 70px; transform: translate3d(28px,24px,23px) rotateY(-10deg) rotateZ(5deg); opacity: .82; }
.why-ai-orbit { position: absolute; width: 107px; height: 75px; border: 1px solid color-mix(in srgb, var(--why-accent) 25%, transparent); border-radius: 50%; transform: rotateX(67deg) rotateZ(22deg) translateZ(10px); }
.why-ai-bubble { position: absolute; z-index: 2; display: flex; width: 63px; height: 43px; align-items: center; justify-content: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--why-accent) 53%, transparent); border-radius: 15px 15px 15px 5px; background: linear-gradient(145deg,color-mix(in srgb,var(--theme-surface,#30233a) 70%,var(--why-accent)),var(--theme-page,#17131d)); box-shadow: 0 13px 27px #0008, 0 0 22px color-mix(in srgb, var(--why-accent) 16%, transparent); transform: translate3d(-10px,-2px,30px) rotateY(-9deg); }
.why-ai-bubble i { width: 5px; height: 5px; border-radius: 50%; background: var(--why-accent); box-shadow: 0 0 9px color-mix(in srgb, var(--why-accent) 66%, transparent); }
.why-ai-reply { position: absolute; display: grid; width: 62px; gap: 5px; padding: 9px 8px; border: 1px solid #ffffff19; border-radius: 10px 10px 4px 10px; background: #17171c; transform: translate3d(28px,20px,12px) rotateY(12deg); }
.why-ai-reply b { height: 3px; border-radius: 4px; background: color-mix(in srgb, var(--why-accent) 62%, transparent); }.why-ai-reply b:nth-child(2) { width: 72%; }.why-ai-reply b:nth-child(3) { width: 45%; opacity: .55; }
.why-ai-star { position: absolute; top: 12px; right: 24%; color: var(--why-accent); font-size: 14px; text-shadow: 0 0 15px color-mix(in srgb, var(--why-accent) 65%, transparent); transform: translateZ(45px); }
.why-ai-pulse { position: absolute; bottom: 11px; left: 30%; width: 6px; height: 6px; border: 1px solid var(--why-accent); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--why-accent) 10%, transparent), 0 0 0 10px color-mix(in srgb, var(--why-accent) 6%, transparent); }
.why-grid.why-motion-ready .why-card { opacity: 0; transform: perspective(1100px) rotateX(8deg) translate3d(0,32px,-20px); transition: opacity 800ms ease, transform 1000ms cubic-bezier(.16,1,.3,1); }
.why-grid.why-motion-ready .why-card.is-inview { opacity: 1; transform: perspective(1100px) rotateX(var(--why-tilt-y)) rotateY(var(--why-tilt-x)) translate3d(0,0,0); }
.why-grid.why-motion-ready .why-card.is-inview .why-stage-halo { animation: why-orbit 8s linear infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-palette-card-back { animation: why-float-back 5.4s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-palette-card-mid { animation: why-float-mid 4.8s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-palette-card-front { animation: why-float-front 4.2s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-connect-orbit-a { animation: why-orbit 12s linear infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-connect-orbit-b { animation: why-orbit-reverse 15s linear infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-node-calendar { animation: why-node-bob 3.2s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-node-school { animation: why-node-bob 3.8s ease-in-out -1s infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-node-check { animation: why-node-bob 4.1s ease-in-out -2s infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-organize-calendar { animation: why-calendar-float 5s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-task-one { animation: why-task-float 4s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-task-two { animation: why-task-float 4.7s ease-in-out -1.4s infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-ai-orbit { animation: why-orbit 10s linear infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-ai-bubble { animation: why-ai-float 3.8s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-ai-star { animation: why-twinkle 2.2s ease-in-out infinite; }
.why-grid.why-motion-ready .why-card.is-inview .why-ai-pulse { animation: why-pulse 2.8s ease-out infinite; }
@keyframes why-orbit { to { transform: rotateX(67deg) rotateZ(338deg) translateZ(10px); } }
@keyframes why-orbit-reverse { to { transform: rotate(405deg) rotateX(66deg) translateZ(16px); } }
@keyframes why-float-back { 50% { transform: translate3d(30px,-25px,-17px) rotateY(28deg) rotateZ(17deg) scale(.84); } }
@keyframes why-float-mid { 50% { transform: translate3d(-35px,-1px,-6px) rotateY(-24deg) rotateZ(-7deg) scale(.93); } }
@keyframes why-float-front { 50% { transform: translate3d(1px,1px,38px) rotateY(5deg) rotateX(-2deg); } }
@keyframes why-node-bob { 50% { translate: 0 -5px; } }
@keyframes why-calendar-float { 50% { transform: translate3d(-7px,-5px,24px) rotateY(-7deg) rotateX(9deg); } }
@keyframes why-task-float { 50% { translate: 0 -7px; } }
@keyframes why-ai-float { 50% { transform: translate3d(-8px,-8px,40px) rotateY(8deg) rotateZ(-3deg); } }
@keyframes why-twinkle { 50% { opacity: .35; scale: .72; rotate: 24deg; } }
@keyframes why-pulse { 0% { opacity: .9; scale: .7; } 75%,100% { opacity: 0; scale: 1.9; } }
.why-card.is-inview h3 { text-shadow: 0 0 28px color-mix(in srgb, var(--why-accent) 13%, transparent); }
@media (min-width: 1101px) {
  .why-stage { transform: scale(.88); transform-origin: center center; }
}
html[data-theme="light"] .why-palette-card,
html[data-theme="light"] .why-connect-core,
html[data-theme="light"] .why-connect-node,
html[data-theme="light"] .why-organize-calendar,
html[data-theme="light"] .why-organize-task,
html[data-theme="light"] .why-ai-bubble,
html[data-theme="light"] .why-ai-reply { box-shadow: 0 13px 26px #34223c1c, inset 0 1px #ffffffb3; }
@media (max-width: 520px) {
  .why-stage { height: 94px; margin-bottom: 14px; }
  .why-number { margin-bottom: 12px; }
  .why-grid > .why-card { padding-top: 27px; padding-bottom: 31px; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .why-grid > .why-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .why-grid.why-motion-ready .why-card { opacity: 1; transform: none; transition: none; }
  .why-grid.why-motion-ready .why-card *, .why-grid.why-motion-ready .why-card::before { animation: none !important; }
}

/* Scroll-led product story: the walkthrough stays pinned while its screens swipe. */
.feature-story[data-scroll-story] { min-height: 0; padding: 0; overflow: clip; }
.feature-story[data-scroll-story]::before { position: fixed; }
.feature-scroll-track { position: relative; min-height: 300svh; }
.feature-scroll-stage { position: sticky; top: clamp(78px, 6.2vw, 90px); display: grid; min-height: calc(100svh - clamp(78px, 6.2vw, 90px)); grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(36px, 7vw, 120px); width: min(1480px, calc(100% - 96px)); margin-inline: auto; padding-block: clamp(36px, 5vh, 68px); }
.feature-story-copy { width: min(100%, 470px); }
.feature-story-copy .feature-story-eyebrow { margin-bottom: 23px; color: var(--theme-accent, #d8bd72); }
.feature-story-copy h2 { margin: 0; font-size: clamp(36px, 4vw, 56px); font-weight: 550; letter-spacing: -.065em; line-height: 1.02; }
.feature-story-device { position: relative; display: grid; justify-items: center; min-width: 0; perspective: 1300px; }
.feature-story-device::before { position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(ellipse, #b2946814, transparent 70%); content: ""; pointer-events: none; }
.feature-story-device .dashboard-demo { position: relative; width: min(100%, 560px); max-height: min(78svh, 760px); overflow: hidden; padding: 11px; border: 1px solid #ffffff2b; border-radius: 34px; background: linear-gradient(145deg,#25242a,#08090a 68%); box-shadow: 0 38px 100px #0008, inset 0 1px #ffffff23; }
.feature-story-device .demo-toolbar { min-height: 49px; margin: 0; padding: 0 5px 10px; }
.feature-story-device .demo-tabs { border-radius: 999px; }
.feature-story-device .demo-tabs button { border-radius: 999px; }
.feature-story-device .demo-tabs button[aria-selected="true"] { border-color: color-mix(in srgb, var(--theme-accent, #d8bd72) 38%, transparent); background: color-mix(in srgb, var(--theme-accent, #d8bd72) 18%, #17151c); }
.feature-story-device .demo-tab-icon { color: var(--theme-accent, #d8bd72); }
.feature-story-device .demo-viewport { max-height: calc(min(78svh, 760px) - 82px); overflow: auto; overscroll-behavior: auto; touch-action: pan-y; scrollbar-width: none; border: 1px solid #ffffff12; border-radius: 24px; background: #111214; box-shadow: inset 0 12px 34px #0003; }
.feature-story-device .demo-viewport::-webkit-scrollbar { display: none; }
.feature-story-device .demo-panel { will-change: transform, opacity; }
@media (max-width: 900px) {
  .feature-scroll-stage { grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr); gap: 28px; width: calc(100% - 48px); }
  .feature-story-copy h2 { font-size: clamp(34px, 4.8vw, 46px); }
  .feature-story-device .dashboard-demo { padding: 8px; border-radius: 27px; }
  .feature-story-device .demo-viewport { padding: 16px; border-radius: 20px; }
}
@media (max-width: 640px) {
  .feature-scroll-track { min-height: 220svh; }
  .feature-scroll-stage { position: sticky; top: 124px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; width: 100%; height: calc(100svh - 124px); min-height: 0; box-sizing: border-box; padding: 15px 18px; }
  .feature-story-copy { width: 100%; flex: 0 0 auto; }
  .feature-story-copy .feature-story-eyebrow { margin-bottom: 9px; font-size: 8px; }
  .feature-story-copy h2 { font-size: clamp(27px, 7.2vw, 35px); line-height: 1.03; }
  .feature-story-device { display: flex; flex: 1 1 auto; min-height: 0; justify-content: center; }
  .feature-story-device .dashboard-demo { display: flex; flex: 1 1 auto; flex-direction: column; width: min(100%, 430px); height: 100%; min-height: 0; max-height: 100%; padding: 7px; border-radius: 24px; }
  .feature-story-device .demo-toolbar { min-height: 39px; padding-bottom: 7px; }
  .feature-story-device .demo-tabs button { min-height: 30px; padding-inline: 10px; font-size: 9px; }
  .feature-story-device .demo-viewport { flex: 1 1 auto; max-height: none; min-height: 0; padding: 14px 11px; border-radius: 17px; }
  .feature-story-device .demo-home-heading h3 { font-size: 13px; }
  .feature-story-device .demo-home-schedule { gap: 10px; }
}
/* Refine the desktop scroll-story composition: pull the copy and preview
   together, lift the group toward the header, and improve inactive-step legibility. */
@media (min-width: 641px) {
  .feature-scroll-stage {
    top: clamp(70px, 5.2vw, 82px);
    min-height: calc(100svh - clamp(70px, 5.2vw, 82px));
    gap: clamp(36px, 4vw, 64px);
    padding-block: clamp(12px, 2vh, 24px) clamp(120px, 18vh, 190px);
    transform: translateX(clamp(28px, 6vw, 110px));
  }
  .feature-story-copy { width: min(100%, 540px); }
  .feature-story-copy { text-align: center; }
}
@media (min-width: 901px) {
  .feature-scroll-stage {
    grid-template-columns: minmax(0, 540px) minmax(0, 560px);
    justify-content: center;
    gap: clamp(32px, 4vw, 56px);
    width: min(1200px, calc(100% - 96px));
    transform: none;
  }
  .feature-story-device { justify-items: center; }
}
@media (min-width: 1101px) {
  .feature-story-device { transform: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .feature-scroll-stage { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .feature-story-copy { width: min(100%, 490px); }
}

@media (max-width: 640px) {
  /* Nudge the story context down within the mobile sticky viewport. */
  .feature-scroll-stage > .feature-story-copy {
    margin-top: clamp(64px, 12svh, 112px);
  }
}

/* Keep the header login button flat and borderless across themes and states. */
.site-header .header-login,
.site-header .header-login:hover,
.site-header .header-login:active,
body.landing-page .site-header .header-login,
body.landing-page .site-header .header-login:hover,
body.landing-page .site-header .header-login:active {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* Give the login control the same glass-pill treatment as the app navigation. */
.site-header .header-login,
.site-header .header-login:hover,
.site-header .header-login:active,
body.landing-page .site-header .header-login,
body.landing-page .site-header .header-login:hover,
body.landing-page .site-header .header-login:active {
  min-height: 48px;
  padding-inline: 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
  border-radius: 999px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--paper) 88%, var(--ink) 12%),
    color-mix(in srgb, var(--paper) 80%, var(--ink) 20%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent), 0 5px 18px #0002;
  color: var(--ink);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: lowercase !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.site-header .header-login:hover,
body.landing-page .site-header .header-login:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent), 0 8px 22px #0003;
}
.site-header .header-login:active,
body.landing-page .site-header .header-login:active {
  transform: scale(.98);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent), 0 2px 8px #0002;
}
@media (max-width: 640px) {
  .site-header .header-login,
  .site-header .header-login:hover,
  .site-header .header-login:active,
  body.landing-page .site-header .header-login,
  body.landing-page .site-header .header-login:hover,
  body.landing-page .site-header .header-login:active {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 12px;
  }
}
:root[data-theme="dark"][data-dark-palette="black"] .site-header .header-login,
:root[data-theme="dark"][data-dark-palette="black"] .site-header .header-login:hover,
:root[data-theme="dark"][data-dark-palette="black"] .site-header .header-login:active {
  color: #f7f5ef;
}

/* Choreographed illustration sequences are owned by landing-motion.js. */
.motion-upgraded .why-grid.why-motion-ready .why-card.is-inview .why-stage *,
.motion-upgraded .why-grid.why-motion-ready .why-card.is-inview .why-stage::before {
  animation: none;
}
.motion-upgraded .why-stage { overflow: visible; }
.motion-upgraded .why-ai-reply b { transform-origin: left center; }
.motion-upgraded .why-connect-orbit::after,
.motion-upgraded .why-ai-orbit::after {
  position: absolute;
  top: 50%;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--why-accent);
  box-shadow: 0 0 12px 3px color-mix(in srgb, var(--why-accent) 65%, transparent);
  content: "";
}
.motion-upgraded .motion-word { display: inline-block; }
.motion-upgraded .hero-copy h1 > span { display: inline-block; }
.motion-upgraded .hero-copy h1 > span:last-child { padding-bottom: .14em; }
.motion-upgraded :is(.hero-primary, .price-button) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.motion-upgraded :is(.hero-primary, .price-button)::after {
  position: absolute;
  z-index: -1;
  inset: -80% -30%;
  background: linear-gradient(110deg, transparent 35%, #ffffff65 49%, transparent 64%);
  content: "";
  transform: translateX(-120%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .motion-upgraded :is(.hero-primary, .price-button):hover::after { animation: motion-button-light 850ms cubic-bezier(.16,1,.3,1); }
  .motion-upgraded :is(.hero-primary, .price-button) > span { display: inline-block; transition: translate 350ms cubic-bezier(.16,1,.3,1); }
  .motion-upgraded :is(.hero-primary, .price-button):hover > span { translate: 4px -2px; }
}
@keyframes motion-button-light { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .motion-upgraded :is(.hero-primary, .price-button)::after { animation: none !important; }
  .motion-upgraded :is(.hero-primary, .price-button) > span { transition: none; translate: none; }
}

/* Product-led refresh of the landing page's benefit section. */
.why-section {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 9vw, 132px) clamp(22px, 5vw, 76px);
  background:
    radial-gradient(ellipse at 14% 14%, color-mix(in srgb, #9c79bf 13%, transparent), transparent 38%),
    radial-gradient(ellipse at 88% 78%, color-mix(in srgb, #6d9aab 10%, transparent), transparent 38%),
    var(--theme-section, #131218);
}
.why-inner { width: min(1320px, 100%); margin-inline: auto; }
.why-section .hero-notes {
  width: 100%;
  margin: 0 auto clamp(30px, 4vw, 48px);
  color: var(--theme-ink, #f7f5ef);
  font-size: min(88px, 4.5vw, calc((100vw - 96px) / 17));
  font-weight: 700;
  line-height: 1.18;
}
@media (min-width: 641px) {
  .why-section .hero-notes {
    font-size: min(74px, 3.8vw, calc((100vw - 96px) / 20));
  }
}
.why-section {
  padding-top: clamp(48px, 6vw, 84px);
}
@media (max-width: 640px) {
  .why-section .hero-notes { font-size: clamp(18px, 5vw, 22px); }
  .why-section { padding-top: clamp(36px, 10vw, 52px); }
}
.why-heading {
  position: static;
  width: min(760px, 100%);
  height: auto;
  margin: 0 auto clamp(38px, 5vw, 64px);
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  text-align: center;
}
.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  color: var(--theme-accent, #d8bd72);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.why-eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; content: ""; }
.why-heading h2 {
  margin: 0;
  color: var(--theme-ink, #f5f2ed);
  font-size: clamp(38px, 5.3vw, 68px);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: 1.02;
}
.why-heading h2 span {
  color: color-mix(in srgb, var(--theme-ink, #f5f2ed) 57%, var(--theme-accent, #d8bd72));
}
.why-heading > p {
  max-width: 610px;
  margin: 20px auto 0;
  color: var(--theme-muted, #b5b1bb);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.65;
}
.why-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.why-section .why-grid > .why-card,
:root[data-theme="dark"][data-dark-palette] .why-section .why-grid > .why-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  padding: 24px 22px 25px;
  border: 0 !important;
  border-radius: 20px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--why-accent) 9%, var(--theme-surface, #1b1a20)),
    color-mix(in srgb, var(--theme-surface, #1b1a20) 93%, transparent)) !important;
  box-shadow: 0 16px 38px rgb(0 0 0 / 13%), inset 0 1px rgb(255 255 255 / 5%);
  text-align: center;
  transform: none;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, translate 220ms ease;
}
.why-section .why-grid > .why-card::after { display: none; }
.why-section .why-grid > .why-card::before {
  inset: auto 12% 0;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--why-accent) 19%, transparent), transparent 70%);
  opacity: .55;
  transform: none;
}
.why-section .why-grid > .why-card:hover {
  border-color: color-mix(in srgb, var(--why-accent) 54%, var(--theme-border, #ffffff1c)) !important;
  box-shadow: 0 22px 48px rgb(0 0 0 / 20%), 0 0 30px color-mix(in srgb, var(--why-accent) 9%, transparent), inset 0 1px rgb(255 255 255 / 8%);
  translate: 0 -4px;
}
.why-stage {
  width: 100%;
  height: 96px;
  margin: 0 auto 17px;
  transform: scale(1.08);
}
.why-section .why-grid > .why-card .why-card-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  color: var(--why-accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
}
.why-card-kicker i { color: var(--theme-muted, #aaa6b1); font-size: 9px; font-style: normal; letter-spacing: .11em; }
.why-section .why-grid > .why-card h3 {
  margin: 12px 0 9px;
  color: var(--theme-ink, #f5f2ed);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.2;
  text-align: center;
}
.why-section .why-grid > .why-card p {
  max-width: 34ch;
  margin: 0 auto;
  color: var(--theme-muted, #b5b1bb);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
html[data-theme="light"] .why-section .why-grid > .why-card,
html[data-theme="light"][data-light-palette] .why-section .why-grid > .why-card {
  border-color: color-mix(in srgb, var(--why-accent) 34%, #e5e0e9) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--why-accent) 10%, #fff), #fff 86%) !important;
  box-shadow: 0 12px 30px rgb(46 35 56 / 7%), inset 0 1px #ffffff;
}
@media (max-width: 1040px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .why-section .why-grid > .why-card { padding: 23px; }
  .why-stage { height: 100px; }
}
@media (max-width: 650px) {
  .why-section { padding: 70px 20px 76px; }
  .why-heading { margin-bottom: 32px; }
  .why-heading > p { margin-top: 15px; font-size: 15px; }
  .why-grid { grid-template-columns: 1fr; gap: 11px; }
  .why-section .why-grid > .why-card { padding: 20px 21px 22px; border-radius: 18px; }
  .why-stage { width: 100%; height: 84px; margin-bottom: 10px; transform: scale(.96); }
  .why-section .why-grid > .why-card h3 { font-size: 20px; }
}

media (prefers-reduced-motion: reduce) {
  .why-section .why-grid > .why-card { transition: none; }
  .why-section .why-grid > .why-card:hover { translate: none; }
}

/* Keep the major landing sections visually continuous across themes. */
.feature-story { border-block: 0 !important; }
.site-footer { border-top: 0 !important; }

@media (max-width: 650px) {
  .why-section { padding-bottom: 22px; }
  .why-section .why-grid > .why-card { padding-block: 16px 18px; }
  .why-section .why-grid > .why-card .why-stage { height: 78px; margin-bottom: 8px; }
  .why-section .why-grid > .why-card h3 { margin-block: 8px 7px; }
}
@media (min-width: 1041px) {
  .why-section .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 651px) and (max-width: 850px) {
  .why-section .why-grid > .why-card:last-child { grid-column: auto; }
}

/* Keep the organizer illustration layered cleanly instead of intersecting. */
.why-stage-organize { perspective: none; transform-style: flat; }
.why-stage-organize .why-organize-calendar {
  transform: translate(-17px, 1px) rotate(-4deg);
  animation-name: why-organize-calendar-float !important;
}
.why-stage-organize .why-organize-task {
  background: color-mix(in srgb, var(--theme-surface, #202820) 92%, var(--why-accent));
  transform: translate(30px, -15px) rotate(2deg);
}
.why-stage-organize .why-task-two {
  z-index: 1;
  opacity: .9;
  transform: translate(29px, 25px) rotate(3deg);
}
.why-stage-connect :is(.why-connect-core, .why-connect-node) { border: 0; }
.why-stage :is(.why-palette-card, .why-organize-calendar, .why-organize-task, .why-ai-bubble, .why-ai-reply) {
  border-color: transparent !important;
  box-shadow: none !important;
}
@keyframes why-organize-calendar-float {
  50% { transform: translate(-17px, -3px) rotate(-4deg); }
}

@media (max-width: 640px) {
  .feature-scroll-stage { top: 96px; height: calc(100svh - 96px); }
  .feature-scroll-stage > .feature-story-copy { margin-top: 0; }
}

/* Ruled-paper canvas shared by the public web pages and color themes. */
:root {
  --notebook-accent: var(--app-accent, var(--theme-accent, #86aaf0));
  --notebook-rule-color: color-mix(in srgb, var(--notebook-accent) 58%, #78aaff);
  --notebook-margin-color: color-mix(in srgb, var(--notebook-accent) 28%, #f05a73);
  --notebook-rule-strength: 25%;
  --notebook-margin-strength: 0%;
  --notebook-margin-x: clamp(56px, 13.8vw, 200px);
  --notebook-rule-pattern:
    repeating-linear-gradient(to bottom,
      transparent 0 71px,
      color-mix(in srgb, var(--notebook-rule-color) var(--notebook-rule-strength), transparent) 71px 72px);
  --notebook-paper-lines:
    linear-gradient(90deg,
      transparent calc(var(--notebook-margin-x) - 1px),
      color-mix(in srgb, var(--notebook-margin-color) var(--notebook-margin-strength), transparent) calc(var(--notebook-margin-x) - 1px),
      color-mix(in srgb, var(--notebook-margin-color) var(--notebook-margin-strength), transparent) calc(var(--notebook-margin-x) + 1px),
      transparent calc(var(--notebook-margin-x) + 1px)),
    var(--notebook-rule-pattern);
}
:root[data-dark-palette="black"] {
  --notebook-rule-color: #78aaff;
  --notebook-margin-color: #f04f70;
  --notebook-rule-strength: 25%;
  --notebook-margin-strength: 0%;
  --notebook-rule-pattern:
    repeating-linear-gradient(to bottom,
      transparent 0 71px,
      color-mix(in srgb, #78aaff 24%, transparent) 71px 72px,
      transparent 72px 143px,
      color-mix(in srgb, #f04f70 28%, transparent) 143px 144px,
      transparent 144px 215px,
      color-mix(in srgb, #78aaff 24%, transparent) 215px 216px);
}
:root[data-dark-palette="green"] { --notebook-rule-color: #83c69a; --notebook-margin-color: #ef7c81; }
:root[data-dark-palette="blue"] { --notebook-rule-color: #86b4ff; --notebook-margin-color: #ed7382; }
:root[data-dark-palette="espresso"] { --notebook-rule-color: #d8b57f; --notebook-margin-color: #ed856c; }
:root[data-dark-palette="teal"] { --notebook-rule-color: #7fc8c3; --notebook-margin-color: #ee827e; }
:root[data-dark-palette="burgundy"] { --notebook-rule-color: #e9a0b4; --notebook-margin-color: #ff7088; }
:root[data-dark-palette="indigo"] { --notebook-rule-color: #a8a5f1; --notebook-margin-color: #ec7e99; }
body.landing-page,
body:has(.legal-page) {
  background-image: var(--notebook-paper-lines) !important;
  background-size: 100% 100%, 100% 72px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
}
:is(.why-section, .feature-story, .feature-band, .ios-section, .pricing-section, .reviews-section, .faq-section, .closing-section, .site-footer) {
  background-image: var(--notebook-paper-lines) !important;
  background-size: 100% 100%, 100% 72px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
}
.partner-page .partner-main {
  background-image: var(--notebook-paper-lines) !important;
  background-size: 100% 100%, 100% 72px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page,
:root[data-theme="dark"][data-dark-palette="black"] body:has(.legal-page),
:root[data-theme="dark"][data-dark-palette="black"] :is(.why-section, .feature-story, .feature-band, .ios-section, .pricing-section, .reviews-section, .faq-section, .closing-section, .site-footer),
:root[data-theme="dark"][data-dark-palette="black"] .partner-page .partner-main {
  background-image:
    linear-gradient(90deg, transparent 0 100%),
    repeating-linear-gradient(to bottom,
      transparent 0 71px,
      rgb(120 170 255 / 24%) 71px 72px,
      transparent 72px 143px,
      rgb(240 79 112 / 28%) 143px 144px,
      transparent 144px 215px,
      rgb(120 170 255 / 24%) 215px 216px) !important;
  background-size: 100% 100%, 100% 216px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page {
  background-image:
    linear-gradient(to bottom,
      transparent 0 71px,
      rgb(120 170 255 / 4%) 71px 72px,
      transparent 72px 143px,
      rgb(240 79 112 / 8%) 143px 144px,
      transparent 144px 215px,
      rgb(120 170 255 / 14%) 215px 216px,
      transparent 216px 100%),
    linear-gradient(to bottom, #fff 0 216px, transparent 216px 100%),
    repeating-linear-gradient(to bottom,
      transparent 0 71px,
      rgb(120 170 255 / 24%) 71px 72px,
      transparent 72px 143px,
      rgb(240 79 112 / 28%) 143px 144px,
      transparent 144px 215px,
      rgb(120 170 255 / 24%) 215px 216px) !important;
  background-size: 100% 216px, 100% 216px, 100% 216px !important;
  background-position: 0 -8px, 0 -8px, 0 -8px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
}
:root[data-theme="dark"][data-dark-palette="black"] .feature-story { background: #fff !important; }

/* Black palette: transition to ruled black sections immediately after the hero. */
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(.why-section, .feature-story, .reviews-pricing-layout, .reviews-section, .pricing-section, .faq-section, .partner-callout, .site-footer) {
  color: #f7f7f8 !important;
  background-color: #080809 !important;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 71px,
    rgb(120 170 255 / 20%) 71px 72px,
    transparent 72px 143px,
    rgb(240 79 112 / 22%) 143px 144px,
    transparent 144px 215px,
    rgb(120 170 255 / 20%) 215px 216px) !important;
  background-size: 100% 216px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .reviews-pricing-layout > :is(.reviews-section, .pricing-section) {
  background-color: transparent !important;
  background-image: none !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(.why-section, .feature-story, .reviews-section, .pricing-section, .faq-section, .partner-callout, .site-footer) :is(h1, h2, h3, h4, summary, p, li, .plan-name, .price, .price-description) {
  color: #f4f4f6 !important;
  opacity: 1 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(.pricing-section .price span, .site-footer a, .site-footer small) { color: #c2c2c8 !important; }
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(.why-card, .review-card, .price-card, .price-card-premium, .faq-item) {
  border-color: #34343a !important;
  background-color: #141416 !important;
  color: #f4f4f6 !important;
  box-shadow: 0 12px 36px rgb(0 0 0 / 24%);
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(.price-button, .partner-callout .button) {
  border-color: #f4f4f6 !important;
  background: #f4f4f6 !important;
  color: #111 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(.reviews-section .rating-proof-stars, .pricing-section .price-annual) { color: #dfbd68 !important; }
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .site-footer .brand-logo { filter: none !important; }

:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .site-header {
  background: #fff !important;
  background-image: none !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .why-section .why-card {
  border-color: #34343a !important;
  background: #141416 !important;
  background-image: none !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .why-section .why-card :is(h3, p) { color: #f4f4f6 !important; }
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .why-heading h2 span {
  background: none !important;
  -webkit-text-fill-color: #f4f4f6 !important;
  color: #f4f4f6 !important;
}

/* Keep the notebook paper anchored while the phone is pinned in the hero. */
body.landing-page {
  background-position: 0 0, 0 0 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page {
  background-position:
    0 -8px,
    0 -8px,
    0 -8px !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(.why-section, .feature-story, .reviews-pricing-layout, .reviews-section, .pricing-section, .faq-section, .partner-callout, .site-footer) {
  background-position: 0 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero .preview-stage, .hero.wrap { transition: none !important; }
}

/* Pin the complete hero like the interactive dashboard story below it. */
.hero[data-hero-scroll-story] {
  display: block !important;
  width: 100% !important;
  min-height: 145svh !important;
  margin: 0;
  padding: 0 !important;
  overflow: visible;
}
.hero-scroll-stage {
  position: sticky;
  z-index: 1;
  top: var(--landing-hero-sticky-top, 76px);
  display: grid;
  width: min(1320px, calc(100% - 64px));
  /* Keep the first-screen composition near the header on tall desktop
     displays. Letting this stage grow with the viewport created a large,
     empty band above the hero content. */
  height: min(680px, calc(100svh - var(--landing-hero-sticky-top, 76px)));
  min-height: 0;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin: 0 auto;
  padding: 24px 0;
}
.hero-scroll-stage > .hero-copy {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 620px;
  text-align: left;
}
.hero-scroll-stage > .preview-scene {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: clamp(20px, 2vh, 28px);
}
.hero[data-hero-scroll-story] .hero-scroll-stage .preview-stage {
  position: static;
  display: grid;
  order: 1;
  flex: 1 1 0;
  width: 100%;
  height: auto !important;
  min-height: 0;
  container-type: size;
  place-items: center;
}
.hero-scroll-stage .device-toggle { order: 0; flex: 0 0 auto; }
.hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
  width: min(260px, 46.9cqh, 100%);
}
@media (min-width: 641px) and (max-width: 1000px) {
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
    width: min(260px, 46.9cqh, 100%);
  }
}
@media (max-width: 640px) {
  /* The final mobile story sizing below gives the phone a full scroll runway. */
  .hero[data-hero-scroll-story] { min-height: 100svh !important; }
  /* A laptop preview on a phone does not need the long, pinned phone story.
     The device switch already marks the hero; shrink its scroll runway so the
     following section comes up promptly. Switching back to mobile restores it. */
  .hero[data-hero-scroll-story].is-desktop-preview { min-height: 110svh !important; }
  .hero-scroll-stage {
    top: var(--landing-hero-sticky-top, 140px);
    display: flex;
    width: 100%;
    height: calc(100svh - var(--landing-hero-sticky-top, 140px));
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 20px 12px;
  }
  .hero-scroll-stage > .hero-copy {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    text-align: center;
  }
  .hero-scroll-stage .hero-copy h1 {
    font-size: clamp(42px, 11.4vw, 54px);
    line-height: .98;
    letter-spacing: -.065em;
  }
  .hero-scroll-stage .hero-actions { justify-content: center; gap: 8px; margin-top: 14px; }
  .hero-scroll-stage .hero-actions .button { min-height: 39px; padding-inline: 12px; font-size: 11px; }
  .hero-scroll-stage .hero-notes { justify-content: center; gap: 4px; margin-top: 10px; font-size: clamp(16px, 4.5vw, 19px); }
  .hero-scroll-stage .preview-scene {
    display: flex;
    order: 2;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 16px;
  }
  .hero-scroll-stage .device-toggle { order: 0; flex: 0 0 auto; align-self: center; }
  .hero[data-hero-scroll-story] .hero-scroll-stage .preview-stage {
    order: 1;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    container-type: size;
  }
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] { place-items: start center; }
  /* Keep the phone's frame size independent of the preview's flex height.
     That height changes as the intro collapses during scroll, so a cqh cap
     made the phone grow unexpectedly in the middle of the story. */
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone { width: min(238px, 82vw); }
  .hero-scroll-stage .device-panel[data-device-panel="desktop"] .dashboard-laptop { width: min(100%, 520px); max-height: min(43svh, 420px); }
  .hero-scroll-stage .device-panel[data-device-panel="desktop"] .dashboard-laptop-screen { max-height: min(39svh, 380px); }
}
@media (min-width: 641px) and (max-height: 760px) {
  .hero-scroll-stage { height: calc(100svh - 76px); }
  .hero-scroll-stage .hero-copy h1 { font-size: clamp(48px, 6vw, 68px); }
  .hero-scroll-stage .hero-actions { margin-top: 20px; }
}

/* Keep the Black theme footer flat against the page background. */
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page > .site-footer-backdrop {
  padding: 0;
  background: #080809;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page > .site-footer-backdrop > .site-footer {
  width: 100%;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: #080809 !important;
  background-image: none !important;
  color: #f4f4f6 !important;
  box-shadow: none;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page > .site-footer-backdrop > .site-footer a {
  color: #e0e0e3 !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page > .site-footer-backdrop > .site-footer > small {
  color: #a9a9af !important;
}
/* Center the desktop hero as one deliberate column, including its palette and supporting copy. */
@media (min-width: 1001px) {
  .hero-scroll-stage > .hero-copy {
    text-align: center;
  }
  .hero-scroll-stage .hero-copy .landing-theme-picker {
    width: min(100%, 490px);
    margin: 0 auto 24px;
  }
  .hero-scroll-stage .hero-copy .landing-theme-hint {
    text-align: center;
  }
  .hero-scroll-stage .hero-copy h1 {
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(54px, 5vw, 76px);
    letter-spacing: -.065em;
  }
  .hero-scroll-stage .hero-copy .hero-actions,
  .hero-scroll-stage .hero-copy .hero-notes {
    justify-content: center;
    text-align: center;
  }
  :root[data-dark-palette="black"] .site-header .desktop-nav a,
  :root[data-dark-palette="black"] .site-header .desktop-nav a:hover {
    color: #111 !important;
  }
}

/* Keep colored themes on the same single-rule notebook rhythm as Black.
   The extra middle rule created a doubled line at section boundaries. */
:root[data-dark-palette]:not([data-dark-palette="black"]),
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]) body.landing-page {
  --notebook-rule-pattern:
    repeating-linear-gradient(to bottom,
      transparent 0 71px,
      color-mix(in srgb, var(--notebook-rule-color) 5%, transparent) 71px 72px);
}
:root[data-dark-palette]:not([data-dark-palette="black"]) body.landing-page {
  background-image:
    linear-gradient(to bottom,
      var(--paper, #fff) 0%,
      color-mix(in srgb, var(--paper, #fff) 82%, transparent) 58%,
      transparent 216px),
    var(--notebook-rule-pattern) !important;
  background-size: 100% 216px, 100% 216px !important;
  background-position:
    0 -8px,
    0 -8px !important;
  background-repeat: no-repeat, repeat !important;
}
:root[data-dark-palette]:not([data-dark-palette="black"]) body.landing-page :is(
  .why-section, .feature-story, .feature-band, .ios-section,
  .reviews-pricing-layout, .reviews-section, .pricing-section, .faq-section,
  .closing-section, .partner-callout, .site-footer
) {
  background-image:
    linear-gradient(to bottom,
      var(--theme-section, var(--paper, #fff)) 0%,
      color-mix(in srgb, var(--theme-section, var(--paper, #fff)) 82%, transparent) 58%,
      transparent 216px),
    var(--notebook-rule-pattern) !important;
  background-size: 100% 216px, 100% 216px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
}

/* Pink uses the shared non-Black paper pattern, with a touch more opacity so
   its rose notebook rules remain visible on the pale canvas. */
:root[data-theme="light"][data-light-palette="pastel-pink"] {
  --notebook-rule-pattern:
    repeating-linear-gradient(to bottom,
      transparent 0 71px,
      color-mix(in srgb, var(--notebook-rule-color) 20%, transparent) 71px 72px,
      transparent 72px 143px,
      color-mix(in srgb, var(--notebook-margin-color) 16%, transparent) 143px 144px,
      transparent 144px 215px,
      color-mix(in srgb, var(--notebook-rule-color) 20%, transparent) 215px 216px);
}

/* Keep the mobile hero's content rhythm and phone frame identical in every
   theme. Black had extra headline, button, and tagline spacing that reduced
   the room available to the phone. */
@media (max-width: 640px) {
  .hero-scroll-stage { padding: 8px 20px 30px; }
  .hero-scroll-stage .hero-actions .hero-primary {
    width: min(100%, 320px);
    height: auto;
    min-height: 50px;
    font-size: 13px;
  }
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-copy h1 {
    margin-top: 0;
    transform: none;
    font-size: clamp(40px, 10vw, 42px);
    line-height: .92;
    letter-spacing: -.06em;
  }
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-actions {
    gap: 6px;
    margin-top: 8px;
    transform: none;
  }
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-actions .hero-primary {
    width: min(100%, 320px);
    height: auto;
    min-height: 50px;
    font-size: 13px;
  }
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-actions .app-store-badge {
    width: min(100%, 320px);
    height: 42px;
    min-height: 42px;
  }
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-notes {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.15;
  }
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
    width: min(238px, 82vw);
    max-width: min(238px, 82vw);
    box-sizing: border-box;
    margin: 0 auto;
    scale: 1;
    transition: none;
    transform-origin: center top;
  }
}

/* Keep the mobile title's descender clear, give the toggle a real buffer before
   the phone, and make the two hero actions match in width and height. */
@media (max-width: 640px) {
  .hero-scroll-stage > .hero-copy {
    /* Keep the intro copy below the preview controls. Its opacity animation
       creates a stacking context; without an explicit sibling order the CTA
       layer can sit on top of the device toggle and steal its touch area. */
    position: relative;
    z-index: 1;
    flex: 0 0 var(--hero-copy-height, auto);
    height: var(--hero-copy-height, auto);
    min-height: 0;
    overflow: visible;
    transform: translate3d(0, var(--hero-copy-shift, 0px), 0);
    pointer-events: var(--hero-copy-pointer-events, auto);
    transition: none;
  }
  .hero-scroll-stage .hero-copy h1 {
    font-size: clamp(46px, 12.7vw, 56px);
    line-height: 1.02;
    letter-spacing: -.065em;
    padding-bottom: .05em;
    overflow: visible;
  }
  /* Reserve descender room on both title rows before any motion scripts run. */
  .hero-scroll-stage .hero-copy h1 > span {
    display: inline-block;
    padding-bottom: .10em;
  }
  .hero-scroll-stage .hero-copy h1 > span:last-child {
    display: inline-block;
    padding-bottom: .16em;
  }
  /* Keep the switcher and phone in normal flex flow with an invariant gap. */
  .hero-scroll-stage .preview-scene {
    position: relative;
    z-index: 3;
    isolation: isolate;
    pointer-events: auto;
    top: 0;
    flex: 1 1 0;
    min-height: 0;
    gap: 16px;
    padding-top: 0;
    overflow: visible;
  }
  .hero[data-hero-scroll-story] .hero-scroll-stage .preview-stage {
    flex: 1 1 0;
    min-height: 0;
    margin-top: 0;
    place-items: start center;
  }
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] { place-items: start center; }
  .hero-scroll-stage .device-toggle {
    position: relative;
    z-index: 6;
    top: 0;
    margin-bottom: 28px;
    min-height: 50px;
    gap: 3px;
    padding: 4px;
    transform: none;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .hero-scroll-stage .device-toggle button {
    min-width: 88px;
    min-height: 42px;
    padding-inline: 15px;
    font-size: 13px;
  }
  .hero-scroll-stage .hero-actions .hero-primary,
  .hero-scroll-stage .hero-actions .app-store-badge {
    width: min(100%, 320px);
    height: 50px;
    min-height: 50px;
  }
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-actions .hero-primary,
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-actions .app-store-badge {
    height: 50px !important;
    min-height: 50px !important;
  }
  /* The dark-theme rule sets a tighter line-height with higher specificity;
     override it here so the lowercase g's descender has enough line-box room. */
  :root[data-theme][data-dark-palette] .hero-scroll-stage .hero-copy h1 {
    font-size: clamp(46px, 12.7vw, 56px);
    line-height: 1.02;
    letter-spacing: -.065em;
    padding-bottom: .05em;
  }
}

/* On compact screens, keep the hero focused on the headline, actions, and
   product preview. The rotating benefit copy competes with those elements and
   pushes the phone below the fold, so reserve it for wider layouts. */
@media (max-width: 900px) {
  .hero-scroll-stage .hero-notes { display: none !important; }
  .hero-scroll-stage .motion-constellation { display: none !important; }
  .hero-scroll-stage .preview-glow { opacity: .42; }
}

/* Keep the mobile hero's notebook paper on the scrolling section, not its
   sticky inner stage. This lets the rules travel naturally behind the pinned
   content and prevents them from looking fixed while the hero scrolls. */
@media (max-width: 640px) {
  .hero[data-hero-scroll-story] {
    background-color: var(--paper, #fff);
    background-image: var(--notebook-rule-pattern);
    background-size: 100% 216px;
    /* Start the rules at the hero's top edge, just below the solid header. */
    background-position: 0 -70px;
    background-repeat: repeat;
  }
}

/* Spread the mobile swatches across the full header width so the scroll-driven
   wheel and its selected-color ring stay visible in the compact header. */
@media (max-width: 640px) {
  .site-header .landing-theme-picker {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    margin: 0;
  }
  .site-header .landing-theme-choices {
    width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  .site-header .landing-theme-choices button {
    width: auto !important;
    min-width: 0;
  }
  .site-header .landing-theme-choices button i {
    animation: none !important;
    opacity: 1;
  }
}

/* Keep the notebook paper consistent at every size: blue rules and a red
   left margin, including desktop instead of alternating red horizontal rules. */
:root body.landing-page {
  --notebook-rule-color: #78aaff;
  --notebook-margin-color: #f04f70;
  --notebook-rule-strength: 30%;
  --notebook-margin-strength: 42%;
  --notebook-margin-x: clamp(28px, 8vw, 112px);
  --notebook-rule-pattern:
    repeating-linear-gradient(to bottom,
      transparent 0 71px,
      rgb(100 157 246 / 28%) 71px 72px);
  --notebook-paper-lines:
    linear-gradient(90deg,
      transparent calc(var(--notebook-margin-x) - 1px),
      rgb(240 79 112 / 42%) calc(var(--notebook-margin-x) - 1px),
      rgb(240 79 112 / 42%) calc(var(--notebook-margin-x) + 1px),
      transparent calc(var(--notebook-margin-x) + 1px)),
    var(--notebook-rule-pattern);
}
:root body.landing-page,
:root body.landing-page :is(
  .hero[data-hero-scroll-story], .why-section, .feature-story, .feature-band,
  .ios-section, .pricing-section, .reviews-section, .faq-section,
  .closing-section, .site-footer
) {
  background-image: var(--notebook-paper-lines) !important;
  background-size: 100% 100%, 100% 72px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
}

/* A hover lift moves the swatch after the ring has measured its position, so
   keep palette controls anchored and let the ring provide all selection motion. */
.landing-theme-choices button:hover { transform: none !important; }

/* A scroll-scrubbed color wheel: keep all seven real controls on a full-width
   rail and let each swatch travel continuously beneath the centered ring. */
.landing-theme-choices {
  display: block !important;
  position: relative;
  width: 100%;
  height: 52px;
  overflow: visible;
  isolation: isolate;
}
.landing-theme-choices > button {
  position: absolute !important;
  top: 0;
  bottom: 0;
  display: grid !important;
  place-items: center;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}
.landing-theme-choices > button i {
  width: 25px;
  height: 25px;
  margin: 0;
  animation: none !important;
}
.mobile-showcase-frame > img.mobile-scroll-crossfade,
.dashboard-laptop-screen > img.desktop-scroll-crossfade {
  position: absolute !important;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  max-width: none !important;
  max-height: none !important;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  transition: none;
  will-change: opacity;
}
.mobile-showcase-frame > img.mobile-scroll-crossfade { object-fit: contain; }
.dashboard-laptop-screen > img.desktop-scroll-crossfade { object-fit: cover; }
@media (max-width: 640px) {
  .landing-theme-picker { width: 100%; max-width: none; }
  .site-header .landing-theme-choices { width: 100%; height: 52px; }
  .site-header .landing-theme-choices > button { width: auto !important; }
  .site-header .landing-theme-choices > button i { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-theme-choices > button i { animation: none !important; }
}

@media (max-width: 640px) {
  :root body.landing-page { --notebook-margin-x: clamp(30px, 10vw, 46px); }
  .hero-scroll-stage > .hero-copy,
  .hero-scroll-stage > .preview-scene {
    left: clamp(14px, 5.5vw, 20px);
  }
}

/* Keep the laptop preview clear of the red notebook margin in the narrow
   mobile layout when visitors switch the device preview to desktop. */
@media (max-width: 640px) {
  .hero-scroll-stage .device-panel[data-device-panel="desktop"] .dashboard-laptop {
    width: min(82%, 440px);
  }
}

@media (max-width: 640px) {
  :root body.landing-page .hero-actions {
    width: 100% !important;
    align-items: center !important;
    padding-top: 7px !important;
  }
  :root body.landing-page .hero-actions > .hero-primary,
  :root body.landing-page .hero-actions > .app-store-badge {
    width: 82% !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
  }
  :root body.landing-page .hero-actions .hero-primary,
  :root body.landing-page .hero-actions .app-store-badge {
    width: 82% !important;
  }
  :root[data-theme][data-dark-palette] body.landing-page .hero-scroll-stage .hero-actions > .hero-primary,
  :root[data-theme][data-dark-palette] body.landing-page .hero-scroll-stage .hero-actions > .app-store-badge {
    width: 82% !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
  }
  :root body.landing-page .hero-scroll-stage .device-toggle {
    transform: translateY(8px) !important;
  }
}

/* Desktop notebook paper: blue horizontal rules only, spaced to the same
   relaxed rhythm as the mobile view, with the red margin kept vertical. */
@media (min-width: 641px) {
  :root body.landing-page {
    --notebook-margin-x: clamp(28px, 8vw, 112px);
    --notebook-rule-pattern:
      repeating-linear-gradient(to bottom,
        transparent 0 143px,
        rgb(100 157 246 / 28%) 143px 144px);
    --notebook-paper-lines:
      linear-gradient(90deg,
        transparent calc(var(--notebook-margin-x) - 1px),
        rgb(240 79 112 / 42%) calc(var(--notebook-margin-x) - 1px),
        rgb(240 79 112 / 42%) calc(var(--notebook-margin-x) + 1px),
        transparent calc(var(--notebook-margin-x) + 1px)),
      var(--notebook-rule-pattern);
    background-image: var(--notebook-paper-lines) !important;
    background-size: 100% 100%, 100% 144px !important;
  }
  :root body.landing-page :is(
    .hero[data-hero-scroll-story], .why-section, .feature-story, .feature-band,
    .ios-section, .pricing-section, .reviews-section, .faq-section,
    .closing-section, .site-footer
  ) {
    background-image: var(--notebook-paper-lines) !important;
    background-size: 100% 100%, 100% 144px !important;
  }
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page {
    background-image: var(--notebook-paper-lines) !important;
    background-size: 100% 100%, 100% 144px !important;
  }
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page :is(
    .hero[data-hero-scroll-story], .why-section, .feature-story, .feature-band,
    .ios-section, .pricing-section, .reviews-section, .faq-section,
    .closing-section, .site-footer
  ) {
    background-image: var(--notebook-paper-lines) !important;
    background-size: 100% 100%, 100% 144px !important;
  }
  :root[data-dark-palette]:not([data-dark-palette="black"]) body.landing-page {
    background-image: var(--notebook-paper-lines) !important;
    background-size: 100% 100%, 100% 144px !important;
  }
  :root[data-dark-palette]:not([data-dark-palette="black"]) body.landing-page :is(
    .hero[data-hero-scroll-story], .why-section, .feature-story, .feature-band,
    .ios-section, .reviews-pricing-layout, .reviews-section, .pricing-section,
    .faq-section, .closing-section, .partner-callout, .site-footer
  ) {
    background-image: var(--notebook-paper-lines) !important;
    background-size: 100% 100%, 100% 144px !important;
  }
}

/* Keep the crisp boundary rule and space the notebook grid below it so the
   first repeated rule doesn't crowd the header/hero transition. */
@media (max-width: 640px) {
  :root body.landing-page .hero[data-hero-scroll-story],
  :root[data-theme][data-dark-palette] body.landing-page .hero[data-hero-scroll-story] {
    position: relative;
  }
  :root body.landing-page .site-header,
  :root[data-theme][data-dark-palette] body.landing-page .site-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  :root body.landing-page .hero[data-hero-scroll-story]::before,
  :root[data-theme][data-dark-palette] body.landing-page .hero[data-hero-scroll-story]::before {
    content: none;
  }
}

/* Isolate the desktop hero from the body paper pattern underneath it. The
   first repeated rule then lands exactly one 144px interval after the top rule. */
@media (min-width: 641px) {
  :root body.landing-page .hero[data-hero-scroll-story],
  :root[data-theme][data-dark-palette] body.landing-page .hero[data-hero-scroll-story] {
    background-color: var(--paper, #fff) !important;
    background-position: 0 0, 0 1px !important;
  }
}

/* Desktop uses a normal-flow hero so the next section is visible on load.
   The palette stays still with the hero and scrolls away with it. */
@media (min-width: 641px) {
  .hero[data-hero-scroll-story] .hero-scroll-stage {
    position: relative;
    top: auto;
    height: min(640px, max(480px, calc(100svh - var(--landing-hero-sticky-top, 76px) - 200px)));
  }
  .theme-hint-mobile { display: none; }
  .theme-hint-desktop { display: inline; }
}
@media (max-width: 640px) {
  .theme-hint-mobile { display: inline; }
  .theme-hint-desktop { display: none; }
}

/* Keep desktop palette controls in a stable, clickable row. */
@media (min-width: 641px) {
  .landing-theme-choices {
    display: block !important;
    width: min(380px, calc(100vw - 48px));
    height: 52px;
    grid-template-columns: repeat(7, 44px) !important;
    gap: 12px !important;
    overflow: visible;
    margin-inline: auto;
  }
  .landing-theme-choices > button {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    height: 52px !important;
  }
  .landing-theme-choices > button i {
    width: 25px;
    height: 25px;
  }
}

@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  .landing-theme-choices { display: grid !important; }
  .landing-theme-choices > button {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 44px !important;
  }
}

/* Keep every notebook rule on one document-wide grid so section boundaries
   never create a doubled or stretched gap. */
:root[data-theme][data-dark-palette] body.landing-page {
  background-position: 0 0, 0 0 !important;
}
:root[data-theme][data-dark-palette] body.landing-page :is(
  .hero[data-hero-scroll-story], .why-section, .feature-story, .feature-band,
  .ios-section, .reviews-pricing-layout, .reviews-section, .pricing-section,
  .faq-section, .closing-section, .partner-callout, .site-footer-backdrop,
  .site-footer
) {
  background-position: 0 0, 0 calc(0px - var(--notebook-section-rule-phase, 0px)) !important;
}
@media (max-width: 640px) {
  :root[data-theme][data-dark-palette] body.landing-page :is(
    .hero[data-hero-scroll-story], .why-section, .feature-story, .feature-band,
    .ios-section, .reviews-pricing-layout, .reviews-section, .pricing-section,
    .faq-section, .closing-section, .partner-callout, .site-footer-backdrop,
    .site-footer
  ) {
    background-position: 0 0, 0 calc(0px - var(--notebook-section-rule-phase, 0px)) !important;
  }
}


/* Keep the sticky header in its own clean band above the ruled page in every palette. */
:root body.landing-page > .site-header,
:root[data-theme][data-dark-palette] body.landing-page > .site-header {
  background-color: var(--paper, #fff) !important;
  background-image: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page > .site-header {
  background-color: #fff !important;
}

/* Bring the first dark feature section closer to the desktop hero content. */
@media (min-width: 641px) {
  .hero[data-hero-scroll-story] {
    height: auto !important;
    min-height: max(480px, min(70svh, 600px)) !important;
  }
  .hero[data-hero-scroll-story] .hero-scroll-stage {
    height: auto;
    min-height: min(640px, max(480px, calc(100svh - var(--landing-hero-sticky-top, 76px) - 200px)));
  }
}

/* The feature card section has no notebook rules or margin line. */
:root body.landing-page section.why-section.why-section,
:root[data-theme][data-dark-palette] body.landing-page section.why-section.why-section {
  background-image: linear-gradient(90deg,
    transparent calc(var(--notebook-margin-x) - 1px),
    color-mix(in srgb, var(--notebook-margin-color) 42%, transparent) calc(var(--notebook-margin-x) - 1px),
    color-mix(in srgb, var(--notebook-margin-color) 42%, transparent) calc(var(--notebook-margin-x) + 1px),
    transparent calc(var(--notebook-margin-x) + 1px)) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}

/* Hide only the notebook rule behind the FAQ title; keep the section's other rules. */
:root[data-theme="dark"][data-dark-palette] .faq-section { --faq-heading-mask: var(--theme-page); }
:root[data-theme="dark"][data-dark-palette="black"] .faq-section { --faq-heading-mask: #080809; }
:root[data-theme="light"] .faq-section { --faq-heading-mask: var(--paper); }

/* Keep the feature cards free of the notebook margin line in every theme. */
:root body.landing-page section.why-section.why-section,
:root[data-theme][data-dark-palette] body.landing-page section.why-section.why-section {
  background-image: none !important;
}

/* Keep the ratings and pricing block clean; the ruled page continues below it. */
:root[data-theme][data-dark-palette] body.landing-page .reviews-pricing-layout.reviews-pricing-layout,
:root[data-theme][data-dark-palette] body.landing-page .reviews-pricing-layout.reviews-pricing-layout > .reviews-section.reviews-section,
:root[data-theme][data-dark-palette] body.landing-page .reviews-pricing-layout.reviews-pricing-layout > .pricing-section.pricing-section {
  background-image: none !important;
}

/* Draw one notebook grid across the desktop reviews/pricing panel. */
@media (min-width: 900px) {
  :root body.landing-page .reviews-pricing-layout {
    background-color: var(--theme-section, var(--paper)) !important;
    background-image: var(--notebook-paper-lines) !important;
    background-size: 100% 100%, 100% 144px !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat, repeat !important;
  }
  :root body.landing-page .reviews-pricing-layout > :is(.reviews-section, .pricing-section) {
    background: transparent !important;
  }
  :root[data-theme][data-dark-palette] body.landing-page .reviews-pricing-layout > :is(.reviews-section, .pricing-section) {
    background: transparent !important;
  }
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page .reviews-pricing-layout {
    background-color: #080809 !important;
  }
}

/* Let the desktop FAQ notebook rules continue across the gray question cards. */
@media (min-width: 641px) {
  :root[data-theme="dark"][data-dark-palette] body.landing-page section.faq-section.faq-section {
    background-image:
      linear-gradient(90deg,
        transparent calc(var(--notebook-margin-x) - 1px),
        color-mix(in srgb, var(--notebook-margin-color) 42%, transparent) calc(var(--notebook-margin-x) - 1px),
        color-mix(in srgb, var(--notebook-margin-color) 42%, transparent) calc(var(--notebook-margin-x) + 1px),
        transparent calc(var(--notebook-margin-x) + 1px)),
      repeating-linear-gradient(to bottom,
        transparent 0 143px,
        color-mix(in srgb, var(--notebook-rule-color) 35%, transparent) 143px 144px,
        transparent 144px 287px,
        color-mix(in srgb, var(--notebook-margin-color) 35%, transparent) 287px 288px) !important;
    background-size: 100% 100%, 100% 288px !important;
    background-position: 0 0, 0 calc(143px - var(--notebook-section-rule-phase, 0px)) !important;
    background-repeat: no-repeat, repeat !important;
  }
  :root[data-theme="dark"][data-dark-palette] body.landing-page section.faq-section.faq-section .faq-item,
  :root[data-theme="dark"][data-dark-palette] body.landing-page section.faq-section.faq-section .faq-item[open] {
    background-color: color-mix(in srgb, #141416 72%, transparent) !important;
  }
}

/* The campus-partner callout is a clean panel, without notebook rules. */
:root body.landing-page .partner-callout,
:root[data-theme][data-dark-palette] body.landing-page .partner-callout {
  background-image: none !important;
  background-color: var(--theme-section, var(--theme-page, #101012)) !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .partner-callout {
  background-color: #080809 !important;
}

/* A narrow browser window still gets a desktop preview, but the hero should
   reflow instead of squeezing the heading and laptop into columns. */
@media (min-width: 641px) and (max-width: 1000px) {
  :root body.landing-page {
    /* Keep the red notebook margin in the outer gutter, clear of hero copy. */
    --notebook-margin-x: max(24px, calc((100vw - 1320px) / 2 - 24px));
  }

  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-content: stretch;
    gap: clamp(12px, 2vw, 22px);
    padding-inline: clamp(20px, 4vw, 32px);
  }
  .site-header .wordmark { min-width: 0; }
  .site-header .brand-logo {
    width: min(220px, 48vw);
    height: auto;
    max-width: 100%;
  }
  .site-header .desktop-nav {
    display: flex !important;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
    white-space: nowrap;
  }
  .site-header .desktop-nav a { font-size: clamp(11px, 1.35vw, 13px); }
  .site-header .header-login { justify-self: end; }
  .site-header .landing-theme-picker {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(490px, 100%);
    margin: 0;
  }

  .hero[data-hero-scroll-story] {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .hero[data-hero-scroll-story] .hero-scroll-stage {
    position: relative;
    top: auto;
    display: grid;
    width: min(760px, calc(100% - 48px));
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 24px;
    padding: 30px 0 36px;
  }
  .hero-scroll-stage > .hero-copy {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 700px;
    justify-self: center;
    text-align: center;
  }
  .hero-scroll-stage .hero-copy .landing-theme-picker {
    width: min(100%, 490px);
    margin: 0 auto 18px;
  }
  .hero-scroll-stage .hero-copy .landing-theme-hint { text-align: center; }
  .hero-scroll-stage .landing-theme-choices {
    width: min(380px, 100%);
    margin-inline: auto;
  }
  .hero-scroll-stage .hero-copy h1 {
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(48px, 7.2vw, 68px);
    line-height: .99;
  }
  .hero-scroll-stage .hero-copy .hero-actions,
  .hero-scroll-stage .hero-copy .hero-notes {
    justify-content: center;
    text-align: center;
  }
  .hero-scroll-stage > .preview-scene {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 16px;
  }
  .hero[data-hero-scroll-story] .hero-scroll-stage .preview-stage {
    flex: 0 0 auto;
    width: 100%;
    height: min(52vw, 440px) !important;
    min-height: 240px;
  }
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
    width: min(260px, 46.9svh, 100%);
  }
  .hero-scroll-stage .device-panel[data-device-panel="desktop"] .dashboard-laptop {
    width: min(100%, 660px);
    max-height: min(52svh, 440px);
  }
  .hero-scroll-stage .device-panel[data-device-panel="desktop"] .dashboard-laptop-screen {
    max-height: min(48svh, 400px);
  }
}

/* On full desktop, nudge the hero copy toward the preview to balance the
   deliberately large outer margin while keeping a clear gap between columns. */
@media (min-width: 1001px) {
  .hero-scroll-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(60px, 6vw, 96px);
  }
  .hero-scroll-stage > .hero-copy {
    transform: translateX(clamp(24px, 5vw, 72px));
  }
}

/* Keep the FAQ's horizontal notebook rules, but stop the red margin from
   cutting vertically through the transition from the rounded pricing panel. */
@media (min-width: 641px) {
  :root[data-theme][data-dark-palette] body.landing-page section.faq-section.faq-section {
    position: relative;
    background-image: var(--notebook-rule-pattern) !important;
    background-size: 100% var(--notebook-rule-spacing) !important;
    background-position: 0 calc(0px - var(--notebook-section-rule-phase, 0px)) !important;
    background-repeat: repeat !important;
  }
}
@media (min-width: 900px) {
  /* Cover the notebook margin in the 28px transition above the rounded
     reviews/pricing panel, matching the clean gap below that panel. */
  :root[data-theme][data-dark-palette] body.landing-page section.why-section.why-section {
    position: relative;
  }
  :root[data-theme][data-dark-palette] body.landing-page section.why-section.why-section::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -28px;
    left: 0;
    height: 28px;
    background: var(--paper, #fff);
    pointer-events: none;
  }
  :root[data-theme][data-dark-palette] body.landing-page section.faq-section.faq-section::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -64px;
    right: 0;
    left: 0;
    height: 64px;
    background: var(--paper, #fff);
    pointer-events: none;
  }
}
@media (max-width: 640px) {
  :root[data-theme][data-dark-palette] body.landing-page section.faq-section.faq-section {
    background-image: var(--notebook-rule-pattern) !important;
    background-size: 100% var(--notebook-rule-spacing) !important;
    background-position: 0 calc(0px - var(--notebook-section-rule-phase, 0px)) !important;
  }
}

/* Keep the color choices still and in normal flow so they leave with the hero. */
.landing-theme-choices {
  display: flex !important;
  width: min(380px, 100%);
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 2vw, 10px) !important;
  margin-inline: auto;
}
.landing-theme-choices > button {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 0;
  width: auto !important;
  max-width: 44px;
  height: 52px !important;
}
.landing-theme-choices > button i {
  width: clamp(22px, 6vw, 25px);
  height: clamp(22px, 6vw, 25px);
}
@media (max-width: 640px) {
  /* Keep room for the color-picker row in the sticky mobile header. */
  .site-header:has(.landing-theme-hint) {
    height: auto !important;
    min-height: 140px !important;
    grid-template-rows: 44px auto !important;
    row-gap: 8px !important;
    padding-block: 8px 10px !important;
  }
  .site-header .landing-theme-hint { order: 0; }
  .site-header .landing-theme-choices { order: 1; }
}

/* Give the mobile phone story enough scroll distance to move at a steady pace. */
@media (max-width: 640px) {
  .hero[data-hero-scroll-story]:not(.is-desktop-preview) {
    min-height: 145svh !important;
  }
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
    width: min(238px, 82vw, 27svh);
    max-width: min(238px, 82vw, 27svh);
  }
}

/* A short browser viewport (including split-screen previews) cannot hold a
   sticky phone beneath the tall color header. Let the device join normal page
   flow there, so scrolling reveals the entire phone instead of clipping it. */
@media (max-width: 640px) and (max-height: 620px) {
  .hero[data-hero-scroll-story]:not(.is-desktop-preview) {
    height: auto !important;
    min-height: 0 !important;
  }
  .hero-scroll-stage {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 28px;
  }
  .hero-scroll-stage > .hero-copy {
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .hero-scroll-stage .preview-scene {
    flex: 0 0 auto !important;
    height: auto !important;
  }
  .hero[data-hero-scroll-story] .hero-scroll-stage .preview-stage {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    container-type: normal !important;
  }
  .hero-scroll-stage .device-panel:not([hidden]) {
    height: auto !important;
    align-content: start;
  }
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
    width: min(238px, 82vw) !important;
    max-width: min(238px, 82vw) !important;
  }
}

/* Run the palette through a seamless belt inside the hero, directly above
   the headline. The cloned, aria-hidden set keeps the loop continuous. */
.hero-copy .landing-theme-picker {
  width: min(100%, 560px);
  margin: 0 auto clamp(18px, 2.2vw, 28px);
}
.hero-copy .landing-theme-hint {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}
.landing-theme-choices {
  display: block !important;
  position: relative;
  width: 100%;
  height: 54px;
  overflow: hidden;
  isolation: isolate;
}
.landing-theme-track {
  display: flex;
  width: 200%;
  height: 100%;
  animation: none;
  will-change: transform;
}
.landing-theme-belt-group {
  display: flex;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  align-items: center;
  justify-content: space-around;
}
.landing-theme-belt-group > button {
  display: grid !important;
  flex: 0 0 44px;
  place-items: center;
  width: 44px !important;
  max-width: none;
  height: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.landing-theme-belt-group > button i {
  width: 25px;
  height: 25px;
  animation: none !important;
}
@keyframes landing-theme-conveyor {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-theme-track { width: 100%; animation: none; }
  .landing-theme-belt-group { flex-basis: 100%; width: 100%; }
  .landing-theme-conveyor-copy { display: none; }
}

/* Keep the original compact, still palette row in the sticky mobile header. */
@media (max-width: 640px) {
  .site-header .landing-theme-picker {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-block: 0;
    transform: none;
  }
  .site-header .landing-theme-choices {
    display: block !important;
    width: 100%;
    height: 44px;
    overflow: visible;
  }
  .site-header .landing-theme-track {
    width: 100%;
    animation: none;
  }
  .site-header .landing-theme-belt-group {
    flex: 1 1 100%;
    width: 100%;
    justify-content: space-around;
  }
  .site-header .landing-theme-conveyor-copy { display: none; }
  .site-header .landing-theme-belt-group > button {
    flex: 0 1 37px;
    width: 37px !important;
    height: 40px !important;
  }
  .site-header .landing-theme-belt-group > button i {
    width: 25px;
    height: 25px;
  }
}

/* Give the desktop header a dedicated, evenly spaced row for the color belt. */
@media (min-width: 641px) {
  body.landing-page .site-header {
    grid-template-rows: 72px 76px;
    align-content: center;
    height: auto !important;
    min-height: 168px;
    padding-block: 10px;
    transition: min-height 460ms cubic-bezier(.4, 0, .2, 1), grid-template-rows 460ms cubic-bezier(.4, 0, .2, 1), padding 460ms cubic-bezier(.4, 0, .2, 1);
  }
  body.landing-page .site-header .landing-theme-picker {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    width: min(540px, calc(100vw - 48px));
    margin: 0;
    padding-top: 0;
  }
  body.landing-page .site-header .landing-theme-hint {
    margin: 0;
    max-height: 20px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 460ms cubic-bezier(.4, 0, .2, 1), opacity 260ms ease, transform 460ms cubic-bezier(.4, 0, .2, 1);
  }
  body.landing-page .site-header .landing-theme-choices {
    height: 48px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  }
  body.landing-page .site-header .landing-theme-belt-group > button { height: 48px !important; }
  body.landing-page .site-header .landing-theme-belt-group > button i { width: 31px; height: 31px; }
  body.landing-page .site-header .landing-theme-picker,
  body.landing-page .site-header .landing-theme-hint,
  body.landing-page .site-header .landing-theme-choices,
  body.landing-page .site-header .landing-theme-belt-group > button,
  body.landing-page .site-header .landing-theme-belt-group > button i {
    transition: width 460ms cubic-bezier(.4, 0, .2, 1), height 460ms cubic-bezier(.4, 0, .2, 1), font-size 460ms cubic-bezier(.4, 0, .2, 1), gap 460ms cubic-bezier(.4, 0, .2, 1), transform 460ms cubic-bezier(.4, 0, .2, 1);
  }
  body.landing-page .site-header.is-scrolled {
    grid-template-rows: 48px 44px;
    min-height: 108px;
    padding-block: 14px 2px;
  }
  body.landing-page .site-header.is-scrolled .landing-theme-picker { gap: 2px; padding-top: 0; transform: translateY(-12px); }
  body.landing-page .site-header.is-scrolled .landing-theme-picker { gap: 0; }
  body.landing-page .site-header.is-scrolled .landing-theme-hint {
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
  }
  body.landing-page .site-header.is-scrolled .landing-theme-hint { font-size: 10px; line-height: 12px; }
  body.landing-page .site-header.is-scrolled .landing-theme-choices { height: 30px; }
  body.landing-page .site-header.is-scrolled .landing-theme-belt-group > button { height: 30px !important; }
  body.landing-page .site-header.is-scrolled .landing-theme-belt-group > button i { width: 22px; height: 22px; }
}

/* Mobile uses native document scrolling: no pinned hero or scroll-compressed copy. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  :root { scroll-behavior: auto !important; }
  :root body.landing-page > .site-header { position: relative !important; top: auto !important; }

  .hero[data-hero-scroll-story],
  .hero[data-hero-scroll-story].is-desktop-preview {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  /* The older mobile scroll-story rule used a more specific selector and
     kept the hero at 145svh, leaving a large blank area after the phone. */
  .hero[data-hero-scroll-story]:not(.is-desktop-preview) {
    height: auto !important;
    min-height: 0 !important;
  }
  .hero-scroll-stage {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 20px !important;
    padding: 24px 20px 24px !important;
  }
  .hero-scroll-stage > .hero-copy {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .hero-scroll-stage .preview-scene {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .hero-scroll-stage .device-toggle { margin-bottom: 0 !important; }
  .hero[data-hero-scroll-story] .hero-scroll-stage .preview-stage {
    display: grid !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    container-type: normal !important;
  }
  .hero-scroll-stage .device-panel:not([hidden]) {
    height: auto !important;
    min-height: 0 !important;
    align-content: start;
  }
  .hero-scroll-stage .device-panel[data-device-panel="mobile"] .dashboard-phone {
    width: min(238px, 82vw) !important;
    max-width: min(238px, 82vw) !important;
    max-height: none !important;
  }

  .feature-story[data-scroll-story] {
    min-height: 0 !important;
    overflow: visible !important;
  }
  .feature-scroll-track { min-height: 0 !important; }
  .feature-scroll-stage {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 36px 18px !important;
  }
  .feature-scroll-stage > .feature-story-copy { margin-top: 0 !important; }
  .feature-story-device { flex: 0 0 auto !important; min-height: 0 !important; }
  .feature-story-device .dashboard-demo {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
  }
  .feature-story-device .demo-viewport {
    max-height: none !important;
    overflow: visible !important;
    touch-action: auto !important;
  }
  .review-card::after { transform: scaleY(1); transition: none !important; }
}

/* Type the two-line landing headline in place, without changing its layout. */
@keyframes hero-headline-type {
  from { clip-path: inset(-.14em 100% -.18em 0); }
  to { clip-path: inset(-.14em -2% -.18em 0); }
}
@media (prefers-reduced-motion: no-preference) {
  body.landing-page .hero h1 > span:first-child {
    display: inline-block;
    clip-path: none;
    animation: hero-headline-type 660ms steps(12, end) 100ms backwards;
  }
  body.landing-page .hero h1 > span:last-child {
    display: inline-block;
    clip-path: none;
    animation:
      hero-headline-type 620ms steps(10, end) 780ms backwards,
      headline-light 12s ease-in-out 1.5s infinite;
  }
}
@media (max-width: 640px) {
  body.landing-page .hero h1 { transform: translateY(-7px); }
}

/* Make the mobile feature-section intro easier to read without changing its
   desktop scale or the surrounding section spacing. */
@media (max-width: 640px) {
  body.landing-page .why-section .hero-notes {
    font-size: clamp(27px, 7.5vw, 32px);
    margin-top: 0 !important;
    margin-bottom: 22px;
  }
  body.landing-page .why-section .hero-benefit-rotator {
    max-width: 100%;
    font-size: clamp(18.5px, 6vw, 25px);
  }
  body.landing-page .why-section {
    padding-top: 32px;
  }
}
@media (max-width: 360px) {
  body.landing-page .why-section .hero-benefit-rotator {
    font-size: 18px;
  }
}

/* Keep footer links centered on mobile, with legal links on their own row. */
@media (max-width: 640px) {
  body.landing-page .site-footer > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    width: 100%;
    gap: 12px 4px;
  }
  body.landing-page .site-footer > div > a {
    justify-self: center;
    text-align: center;
    white-space: nowrap;
  }
  body.landing-page .site-footer > div > a:nth-child(1) { grid-column: 1; grid-row: 1; }
  body.landing-page .site-footer > div > a:nth-child(2) { grid-column: 3; grid-row: 1; }
  body.landing-page .site-footer > div > a:nth-child(3) { grid-column: 3; grid-row: 2; }
  body.landing-page .site-footer > div > a:nth-child(4) { grid-column: 1; grid-row: 2; }
  body.landing-page .site-footer > div > a:nth-child(5) { grid-column: 2; grid-row: 2; }
  body.landing-page .site-footer > div > a.instagram-link { grid-column: 1; grid-row: 3; }
  body.landing-page .site-footer > div > a.tiktok-link { grid-column: 2; grid-row: 3; }
  body.landing-page .site-footer > div > a.linkedin-link { grid-column: 3; grid-row: 3; }
}

/* Mark each landing-page transition with the active theme's accent. */
:root body.landing-page main > section:not(:first-child),
:root body.landing-page > .partner-callout,
:root body.landing-page > .site-footer-backdrop {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--notebook-accent) 62%, transparent);
}

/* Preserve the notebook's blue rules and red margin; section dividers above
   still use the selected palette's accent. */
:root body.landing-page,
:root[data-theme][data-dark-palette] body.landing-page.landing-page {
  --notebook-accent: var(--theme-accent, var(--app-accent, var(--lilac, #86aaf0)));
  --notebook-rule-color: #78aaff;
  --notebook-rule-ink: rgb(120 170 255 / 15%);
  --notebook-rule-spacing: 72px;
  --notebook-margin-color: #f04f70;
  --notebook-rule-strength: 15%;
  --notebook-margin-strength: 22%;
  --notebook-rule-pattern:
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--notebook-rule-spacing) - 1px),
      var(--notebook-rule-ink) calc(var(--notebook-rule-spacing) - 1px) var(--notebook-rule-spacing));
  --notebook-paper-lines:
    linear-gradient(90deg,
      transparent calc(var(--notebook-margin-x) - 1px),
      color-mix(in srgb, var(--notebook-margin-color) var(--notebook-margin-strength), transparent) calc(var(--notebook-margin-x) - 1px),
      color-mix(in srgb, var(--notebook-margin-color) var(--notebook-margin-strength), transparent) calc(var(--notebook-margin-x) + 1px),
      transparent calc(var(--notebook-margin-x) + 1px)),
    var(--notebook-rule-pattern);
  background-image: var(--notebook-rule-pattern) !important;
  background-size: 100% var(--notebook-rule-spacing) !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
}
@media (min-width: 641px) {
  :root body.landing-page,
  :root[data-theme][data-dark-palette] body.landing-page.landing-page {
    --notebook-rule-spacing: 144px;
  }
}

/* Match the landing login capsule to the supplied neutral glass reference. */
:root body.landing-page .site-header .header-login,
:root body.landing-page .site-header .header-login:hover,
:root body.landing-page .site-header .header-login:active,
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .site-header .header-login,
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .site-header .header-login:hover,
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .site-header .header-login:active {
  border: 1px solid #929292;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8e8e8 0%, #d7d7d7 100%);
  box-shadow: inset 0 1px 1px #ffffffb8, 0 7px 16px #00000024;
  color: #111;
}
:root body.landing-page .site-header .header-login:hover,
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .site-header .header-login:hover {
  background: linear-gradient(180deg, #eeeeee 0%, #dddddd 100%);
  box-shadow: inset 0 1px 1px #ffffffc7, 0 8px 19px #00000029;
}
:root body.landing-page .site-header .header-login:active,
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .site-header .header-login:active {
  box-shadow: inset 0 1px 2px #00000018, 0 2px 6px #0000001f;
}

/* Give each theme swatch the same softly lit glass surface as the login pill. */
:root body.landing-page .site-header .landing-theme-choices > button i {
  border: 1px solid color-mix(in srgb, var(--swatch) 54%, #fff);
  background:
    radial-gradient(ellipse at 31% 22%, #ffffffa8 0%, #ffffff50 22%, transparent 54%),
    linear-gradient(155deg, #ffffff2e, #00000019),
    var(--swatch);
  box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -1px 1px #00000016, 0 2px 5px #00000020;
}
:root body.landing-page .site-header .landing-theme-choices > button:hover i {
  filter: brightness(1.06);
}

/* Shared neutral Liquid Glass finish for secondary landing actions. */
:root[data-theme] body.landing-page .hero-actions > .app-store-badge,
:root[data-theme] body.landing-page .hero-actions > .app-store-badge:hover,
:root[data-theme] body.landing-page .hero-actions > .app-store-badge:active,
:root[data-theme] body.landing-page .site-header .header-login,
:root[data-theme] body.landing-page .site-header .header-login:hover,
:root[data-theme] body.landing-page .site-header .header-login:active,
:root[data-theme][data-dark-palette] body.landing-page .site-header .header-login,
:root[data-theme][data-dark-palette] body.landing-page .site-header .header-login:hover,
:root[data-theme][data-dark-palette] body.landing-page .site-header .header-login:active {
  border: 1px solid #999;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffffed 0%, #f3f3f3e8 100%);
  box-shadow:
    inset 0 1px 2px #ffffffd9,
    inset 0 -2px 3px #00000012,
    inset 1px 0 2px #00000008,
    inset -1px 0 2px #00000008,
    0 6px 16px #0000001c;
  color: #17202b;
  -webkit-backdrop-filter: blur(16px) saturate(1.02);
  backdrop-filter: blur(16px) saturate(1.02);
}
:root[data-theme] body.landing-page .hero-actions > .app-store-badge:hover {
  box-shadow:
    inset 0 1px 2px #ffffffdf,
    inset 0 -2px 3px #00000010,
    0 8px 19px #00000020;
}
:root[data-theme] body.landing-page .hero-actions > .app-store-badge:active {
  box-shadow:
    inset 0 1px 3px #0000001c,
    inset 0 -1px 2px #ffffff7a,
    0 2px 6px #00000016;
}
:root[data-theme] body.landing-page .site-header .header-login:hover,
:root[data-theme][data-dark-palette] body.landing-page .site-header .header-login:hover {
  box-shadow:
    inset 0 1px 2px #ffffffdf,
    inset 0 -2px 3px #00000010,
    0 8px 19px #00000020;
}
:root[data-theme] body.landing-page .site-header .header-login:active,
:root[data-theme][data-dark-palette] body.landing-page .site-header .header-login:active {
  box-shadow:
    inset 0 1px 3px #0000001c,
    inset 0 -1px 2px #ffffff7a,
    0 2px 6px #00000016;
}

/* Keep the mobile theme swatches moving like a seamless conveyor in the top
   header row. Reduced-motion preferences keep the row still. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  body.landing-page .site-header .landing-theme-choices {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }
  body.landing-page .site-header .landing-theme-track {
    width: 200%;
    animation: landing-theme-conveyor 14s linear infinite;
  }
  body.landing-page .site-header .landing-theme-belt-group {
    flex: 0 0 50%;
    width: 50%;
    justify-content: space-around;
  }
  body.landing-page .site-header .landing-theme-conveyor-copy {
    display: flex;
  }
}

/* Replace the connection illustration with one clear, gently animated check. */
.why-stage-connect::before { content: none; }
.why-connect-check {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--why-accent) 48%, white);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--why-accent) 24%, var(--theme-surface, #202126)), var(--theme-surface, #17181d) 72%);
  color: var(--why-accent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--why-accent) 26%, transparent), inset 0 1px 8px #ffffff20;
}
.why-connect-check svg { display: block; width: 58px; height: 58px; overflow: visible; }
.why-connect-check path { fill: none; stroke: var(--why-accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }
.motion-upgraded .why-grid.why-motion-ready .why-card.is-inview .why-connect-check {
  animation: none;
}
.why-stage-connect.is-check-visible .why-connect-check path,
.motion-upgraded .why-grid.why-motion-ready .why-card.is-inview .why-stage-connect.is-check-visible .why-connect-check path {
  animation: why-check-draw 900ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes why-check-draw {
  from { stroke-dashoffset: 60; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .why-connect-check, .why-connect-check path { animation: none !important; }
  .why-connect-check path { stroke-dashoffset: 0; }
}

/* Carry the notebook margin through every section and use its red ink as a
   quiet, vertical reading-progress indicator. */
body.landing-page .site-scroll-spine {
  position: fixed;
  z-index: 19;
  top: var(--scroll-spine-top, 128px);
  bottom: var(--scroll-spine-bottom, 0px);
  left: var(--notebook-margin-x, clamp(28px, 8vw, 112px));
  width: 3px;
  background: color-mix(in srgb, var(--notebook-margin-color, #f04f70) 20%, transparent);
  pointer-events: none;
}
@media (max-width: 640px) {
  /* Move the notebook margin and the complete mobile hero composition
     right together so their visual center better balances the paper margin. */
  :root body.landing-page { --notebook-margin-x: clamp(40px, calc(8vw + 8px), 46px); }
  body.landing-page .hero[data-hero-scroll-story] .hero-scroll-stage { left: 8px; }
  body.landing-page .hero-scroll-stage > .hero-copy,
  body.landing-page .hero-scroll-stage > .preview-scene { left: 0 !important; }
}
/* The footer must paint above the fixed reading spine so the spine cannot
   continue through the footer, even during scroll/layout transitions. */
body.landing-page > .site-footer-backdrop {
  position: relative;
  z-index: 20;
}
/* Present the student-built rotating message on a notebook-paper ribbon. */
:root body.landing-page main > .student-benefits-section { box-shadow: none; }
:root body.landing-page .student-benefits-section .student-benefits-copy { margin: 0 auto; }
body.landing-page .student-benefits-section {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(260px, 25vw, 420px);
  place-items: center;
  padding: clamp(32px, 4vw, 60px) clamp(20px, 5vw, 76px);
  background: #080809;
  color: #111113;
  text-align: center;
}
body.landing-page .student-benefits-banner {
  position: absolute;
  z-index: 0;
  inset: 0;
  --student-benefits-notch-rise: 18%;
  --student-benefits-notch-shoulder: 18%;
  background-color: #fff;
  background-image:
    linear-gradient(90deg,
      transparent calc(var(--notebook-margin-x) - 1px),
      rgb(240 79 112 / 26%) calc(var(--notebook-margin-x) - 1px),
      rgb(240 79 112 / 26%) calc(var(--notebook-margin-x) + 1px),
      transparent calc(var(--notebook-margin-x) + 1px)),
    var(--notebook-rule-pattern);
  background-size: 100% 100%, 100% var(--notebook-rule-spacing);
  background-position: 0 0, 0 calc(0px - var(--notebook-section-rule-phase, 0px));
  background-repeat: no-repeat, repeat;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--student-benefits-notch-shoulder)) 100%,
    50% calc(100% - var(--student-benefits-notch-rise)),
    var(--student-benefits-notch-shoulder) 100%,
    0 100%
  );
}
body.landing-page .student-benefits-section .student-benefits-copy {
  position: relative;
  z-index: 1;
  width: min(1800px, 100%);
  margin: 0 auto;
  color: #111113 !important;
  font-size: clamp(36px, 4.6vw, 80px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.18;
  text-transform: lowercase;
}
body.landing-page .student-benefits-section .hero-benefit-rotator {
  color: #111113 !important;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1.18;
}
body.landing-page .student-benefits-section .hero-benefit-reserve {
  font: inherit;
}
body.landing-page .student-benefits-section .hero-benefit-typing {
  font: inherit;
}
body.landing-page .student-benefits-section .hero-benefit-caret {
  flex-basis: 4px;
  width: 4px !important;
  height: .9em !important;
  margin-left: .08em;
  background: currentColor !important;
}
@media (min-width: 641px) {
  body.landing-page .student-benefits-section .student-benefits-copy {
    transform: translateY(-clamp(12px, 1.8vw, 26px));
  }
}
:root[data-theme="light"] body.landing-page .student-benefits-section {
  background: #111113;
  color: #111113;
}
@media (max-width: 640px) {
  body.landing-page .student-benefits-section {
    min-height: 200px;
    padding: 28px 18px 48px;
  }
  body.landing-page .student-benefits-section .student-benefits-copy {
    width: 100%;
    align-items: stretch;
    font-size: clamp(27px, 7.2vw, 36px);
    line-height: 1.2;
    text-align: right;
  }
  body.landing-page .student-benefits-section .hero-notes-intro {
    width: 100%;
    text-align: right;
  }
  body.landing-page .student-benefits-section .hero-benefit-rotator {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(18px, 5.5vw, 24px);
    line-height: 1.35;
    text-align: right;
  }
  body.landing-page .student-benefits-section .hero-benefit-typing {
    right: 0;
    left: auto;
    transform: none;
  }
}
/* Calendar integration row replacing the individual benefit cards. */
body.landing-page .why-section .integrations-heading {
  max-width: 760px;
  margin: 0 auto clamp(22px, 3vw, 32px);
  text-align: center;
}
body.landing-page .why-section .integrations-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.12;
}
.calendar-integrations {
  display: grid;
  width: min(1180px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
}
.calendar-integration {
  display: grid;
  min-width: 0;
  grid-template-rows: 116px auto 1fr auto;
  align-content: start;
  padding: 22px 24px 24px;
  color: var(--ink);
}
.integration-logo {
  display: grid;
  min-height: 0;
  place-items: center;
  perspective: 400px;
}
.integration-logo img,
.integration-logo svg {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
@media (min-width: 701px) {
  .calendar-integration {
    grid-template-rows: clamp(136px, 11vw, 168px) auto 1fr auto;
  }
  .calendar-integration + .calendar-integration {
    border-left: 1px solid #343434;
  }
  :root[data-theme="light"] body.landing-page .calendar-integration + .calendar-integration {
    border-left-color: #dedee2;
  }
  .integration-logo img,
  .integration-logo svg {
    width: clamp(96px, 9vw, 128px);
    height: clamp(96px, 9vw, 128px);
  }
}
@keyframes canvas-logo-spin {
  to { transform: rotate(360deg); }
}
@keyframes google-calendar-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(4deg); }
}
@keyframes apple-calendar-turn {
  0%, 45%, 75%, 100% { transform: rotateY(0); }
  56% { transform: rotateY(-13deg); }
  66% { transform: rotateY(7deg); }
}
@keyframes apple-calendar-date-pop {
  0%, 48%, 73%, 100% { transform: scale(1); }
  59% { transform: scale(1.13); }
}
@media (prefers-reduced-motion: no-preference) {
  body.landing-page .canvas-logo img {
    animation: canvas-logo-spin 22s linear infinite;
  }
  body.landing-page .google-calendar-logo {
    animation: google-calendar-float 5.5s ease-in-out infinite;
  }
  body.landing-page .apple-calendar-logo {
    animation: apple-calendar-turn 7s ease-in-out infinite;
  }
  body.landing-page .apple-calendar-logo text:last-child {
    transform-box: fill-box;
    transform-origin: center;
    animation: apple-calendar-date-pop 7s ease-in-out infinite;
  }
}
.calendar-integration h3 {
  margin: 18px 0 7px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.calendar-integration p {
  max-width: 34ch;
  min-height: 48px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.integration-type {
  margin-top: 16px;
  color: var(--green);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .015em;
}
.integrations-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
/* These feature surfaces sit on the dark editorial section in dark themes. */
:root[data-theme="dark"] body.landing-page .calendar-integration h3 { color: #f4f4f6; }
:root[data-theme="dark"] body.landing-page .calendar-integration p,
:root[data-theme="dark"] body.landing-page .integrations-note { color: #b8b8bd; }
:root[data-theme="dark"] body.landing-page .integration-type { color: #d1d1d1; }
:root[data-theme="light"] body.landing-page .calendar-integration h3 { color: #171719; }
:root[data-theme="light"] body.landing-page .calendar-integration p,
:root[data-theme="light"] body.landing-page .integrations-note { color: #74747c; }
:root[data-theme="light"] body.landing-page .integration-type { color: #5c5c64; }
@media (max-width: 700px) {
  body.landing-page .why-section .integrations-heading {
    margin-bottom: 22px;
    text-align: left;
  }
  .calendar-integrations { grid-template-columns: 1fr; }
  .calendar-integration {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    text-align: left;
    column-gap: 17px;
    padding: 19px 20px;
  }
  .calendar-integration + .calendar-integration {
    border-top: 1px solid #343434;
  }
  :root[data-theme="light"] body.landing-page .calendar-integration + .calendar-integration {
    border-top-color: #dedee2;
  }
  .integration-logo { grid-column: 1; grid-row: 1 / span 3; }
  .integration-logo img, .integration-logo svg { width: 48px; height: 48px; }
  .calendar-integration h3 { margin: 0 0 3px; font-size: 16px; }
  .calendar-integration p { min-height: 0; font-size: 13px; }
  .integration-type { margin-top: 7px; font-size: 11px; }
  .integrations-note { max-width: 40ch; margin: 14px auto 0; }
}
body.landing-page .site-scroll-spine-progress {
  position: absolute;
  inset: 0 auto auto 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, rgb(240 79 112 / 56%) 0%, rgb(240 79 112 / 56%) 90%, transparent 100%);
  box-shadow: 0 0 9px color-mix(in srgb, var(--notebook-margin-color, #f04f70) 22%, transparent);
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  transition: opacity 120ms linear;
  will-change: transform;
}
body.landing-page .site-scroll-spine-progress::after {
  position: absolute;
  right: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgb(240 79 112 / 70%);
  box-shadow: 0 0 0 3px color-mix(in srgb, #f04f70 10%, transparent), 0 0 12px rgb(240 79 112 / 30%);
  content: "";
  translate: 50% 50%;
}
/* Route the reading spine along the notebook banner's chevron edge on every screen. */
/* Allow for the desktop header's expanded height and its 60px collapse
   during anchor scrolling, so a section heading stays below the header. */
body.landing-page :is(#features, #pricing, #faq) { scroll-margin-top: 216px; }
@media (max-width: 640px) {
  body.landing-page :is(#features, #pricing, #faq) { scroll-margin-top: 80px; }
}
@media (min-width: 641px) and (hover: none) and (pointer: coarse) {
  body.landing-page :is(#features, #pricing, #faq) { scroll-margin-top: 16px; }
}
body.landing-page .site-scroll-route {
  display: block;
  position: absolute;
  z-index: 19;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
body.landing-page .site-scroll-route-track,
body.landing-page .site-scroll-route-progress {
  fill: none;
  stroke: color-mix(in srgb, var(--notebook-margin-color, #f04f70) 16%, transparent);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
body.landing-page .site-scroll-route-progress {
  stroke: var(--notebook-margin-color, #f04f70);
  stroke-width: 9px;
}
@media (max-width: 640px) {
  /* Keep the lower-left handoff a crisp elbow instead of a rounded join. */
  body.landing-page .site-scroll-route-progress { stroke-linejoin: miter; }
}
body.landing-page .site-scroll-route-endpoint {
  fill: color-mix(in srgb, var(--notebook-margin-color, #f04f70) 70%, transparent);
  stroke: #fff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
@media print {
  body.landing-page .site-scroll-spine,
  body.landing-page .site-scroll-route { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-page .site-scroll-route-endpoint { display: none; }
}

/* Opaque paper prevents the body's rules from doubling the hero's grid. */
:root body.landing-page section.hero[data-hero-scroll-story],
:root[data-theme][data-dark-palette] body.landing-page section.hero[data-hero-scroll-story] {
  background-image: var(--notebook-paper-lines) !important;
  background-color: var(--paper, #fff) !important;
  background-size: 100% 100%, 100% var(--notebook-rule-spacing) !important;
  background-position: 0 0, 0 calc(0px - var(--notebook-section-rule-phase, 0px)) !important;
  background-repeat: no-repeat, repeat !important;
}

/* Keep one fixed mobile header bar, with the palette in document flow below it. */
.mobile-theme-strip { display: none; }
@media (max-width: 640px) {
  :root body.landing-page { padding-top: 64px; }
  :root body.landing-page > .site-header {
    position: fixed !important;
    top: 0 !important;
    inset-inline: 0;
    z-index: 30;
    width: 100%;
    height: 64px !important;
    min-height: 64px !important;
    grid-template-rows: 44px !important;
    row-gap: 0 !important;
    padding: 8px 20px 12px !important;
    transition: none !important;
  }
  body.landing-page > .site-header::before { content: none; }
  body.landing-page > .site-header > .wordmark,
  body.landing-page > .site-header > .header-login {
    position: relative;
    inset: auto;
  }
  .mobile-theme-strip {
    display: block;
    height: 76px;
    padding: 0 20px 10px;
    background: var(--paper, #fff);
  }
  .mobile-theme-strip .landing-theme-picker {
    width: 100%;
    max-width: none;
    gap: 3px;
    margin: 0;
    padding: 0;
    transform: none;
  }
  .mobile-theme-strip .landing-theme-hint { margin: 0; }
  .mobile-theme-strip .landing-theme-choices {
    width: 100%;
    height: 44px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .mobile-theme-strip .landing-theme-belt-group > button {
    flex: 0 1 37px;
    width: 37px !important;
    height: 40px !important;
  }
  .mobile-theme-strip .landing-theme-belt-group > button i { width: 25px; height: 25px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .mobile-theme-strip .landing-theme-track { animation: landing-theme-conveyor 14s linear infinite; }
}

/* Give the dark calendar section a small paper gutter on the right, with its
   two right corners softened to match the inset edge. */
@media (max-width: 640px) {
  /* Exposed gutters follow the active page palette so they don't turn black
     or white when the surrounding theme uses a tinted surface. */
  body.landing-page main {
    --landing-funnel-gutter: 16px;
    background-color: var(--theme-page, var(--paper, #fff)) !important;
  }
  body.landing-page main > .why-section {
    position: relative;
    margin-right: var(--landing-funnel-gutter);
    border-radius: 0 18px 18px 0;
    border-right: 0;
    background-clip: border-box;
    box-shadow: none !important;
  }
  /* Keep the exposed right-hand gutter on the active page color even at the
     rounded section edge; the animated route remains above it. */
  body.landing-page main > .why-section::after {
    position: absolute;
    top: 0;
    right: calc(-1 * var(--landing-funnel-gutter));
    bottom: 0;
    width: var(--landing-funnel-gutter);
    background: var(--theme-page, var(--paper, #fff));
    content: "";
    pointer-events: none;
    z-index: 10;
  }
  /* Cut the black reviews/pricing panel back to the pink route at the
     white-to-black transition. This keeps the inside of the rounded turn
     white instead of letting the panel's square corner peek through. */
  body.landing-page main > .reviews-pricing-layout {
    width: calc(100% - var(--landing-funnel-gutter));
    margin-right: var(--landing-funnel-gutter);
    border-radius: 0 18px 18px 0;
    overflow: hidden;
  }
  /* Carry the same right-side paper gutter from pricing through the FAQ.
     Without this, the rounded pricing edge opens back into a full-bleed
     black section and makes the notebook funnel look like it stops abruptly. */
  :root body.landing-page main > section.faq-section {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--landing-funnel-gutter));
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: var(--landing-funnel-gutter);
    margin-right: var(--landing-funnel-gutter);
    border-radius: 18px;
    background-clip: padding-box;
  }
  /* Keep the outer paper gutter plain white; only the moving red stroke
     should appear there as the reader scrolls past. */
  body.landing-page .site-scroll-route-track { display: none; }
  :root body.landing-page main > section.why-section + section.white-content-section:not(:first-child) {
    border-top: 0 !important;
    box-shadow: none !important;
  }
}

:root body.landing-page main > .white-content-section {
  display: grid;
  align-items: center;
  min-height: clamp(280px, 30vw, 440px);
  margin: 0;
  padding: clamp(48px, 7vw, 84px) clamp(24px, 8vw, 120px);
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.landing-page .why-built-inner {
  position: relative;
  z-index: 1;
  width: min(1320px, 100%);
  margin: 0 auto;
  color: #111113;
}

body.landing-page .why-built-inner h2 {
  margin: 0 0 22px;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-transform: lowercase;
}

body.landing-page .why-built-inner .why-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

body.landing-page .why-built-inner .why-benefit {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: clamp(12px, 1.5vw, 22px);
  text-align: left;
}

body.landing-page .why-built-inner .why-benefit + .why-benefit {
  border-left: 1px solid rgb(17 17 19 / 12%);
  padding-left: clamp(22px, 3vw, 44px);
}

body.landing-page .why-built-inner .why-benefit-number {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: -5px 0 0;
  font-size: clamp(54px, 5vw, 72px);
}

body.landing-page .why-built-inner .why-benefit h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 8px;
  color: #171719;
  font-size: clamp(20px, 1.65vw, 24px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}

body.landing-page .why-built-inner .why-benefit-number {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--notebook-margin-color, #f04f70);
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

@keyframes benefit-number-arrive {
  0% { opacity: .2; transform: translateY(12px) scale(.78); }
  68% { opacity: 1; transform: translateY(-3px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  body.landing-page .why-built-inner .why-benefit.is-visible .why-benefit-number {
    animation: benefit-number-arrive 620ms cubic-bezier(.2,.8,.2,1) both;
  }
  body.landing-page .why-built-inner .why-benefit:nth-child(2).is-visible .why-benefit-number { animation-delay: 90ms; }
  body.landing-page .why-built-inner .why-benefit:nth-child(3).is-visible .why-benefit-number { animation-delay: 180ms; }
}

body.landing-page .why-built-inner p {
  margin: 0 0 14px;
  color: #42424a;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

body.landing-page .why-built-inner .why-benefit p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
}

body.landing-page .why-built-inner p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  /* Give the white story panel a narrow gutter matching the active theme,
     with the route following its rounded corners. */
  :root body.landing-page main > .why-built-section {
    position: relative;
    margin-left: var(--landing-funnel-gutter) !important;
    width: calc(100% - var(--landing-funnel-gutter)) !important;
    border-radius: 0 !important;
    background: var(--theme-page, var(--paper, #fff)) !important;
    box-shadow: none !important;
    isolation: isolate;
  }
  :root body.landing-page main > .why-built-section::before {
    position: absolute;
    inset: 0 auto 0 calc(-1 * var(--landing-funnel-gutter));
    width: var(--landing-funnel-gutter);
    background: var(--theme-page, var(--paper, #fff));
    content: "";
    z-index: 0;
  }
  :root body.landing-page main > .why-built-section::after {
    position: absolute;
    inset: 0;
    border-radius: 18px 0 0 18px;
    background: #fff;
    content: "";
    z-index: 0;
    pointer-events: none;
  }
  /* This adjacent-section reset has stronger specificity; keep its story
     panel and the exposed gutter backed by the current theme page color. */
  :root body.landing-page main > section.why-section + section.white-content-section.why-built-section:not(:first-child) {
    background: var(--theme-page, var(--paper, #fff)) !important;
    box-shadow: none !important;
  }
  body.landing-page .why-built-inner { text-align: right; }
  body.landing-page .why-built-inner h2 { margin-bottom: 16px; }
  body.landing-page .why-built-inner .why-benefits { grid-template-columns: 1fr; gap: 18px; }
  body.landing-page .why-built-inner .why-benefit {
    display: block;
    text-align: right;
  }
  body.landing-page .why-built-inner .why-benefit + .why-benefit {
    border-left: 0;
    padding-left: 0;
  }
  body.landing-page .why-built-inner .why-benefit h3 { margin-bottom: 5px; font-size: 19px; }
  body.landing-page .why-built-inner .why-benefit-number { margin: 0 0 6px; font-size: 42px; }
  body.landing-page .why-built-inner .why-benefit p { font-size: 16px; }
}

body.landing-page .hero-copy .hero-lede {
  max-width: 42ch;
  margin: 18px auto 0;
  color: #62626b;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
body.landing-page .hero-copy .hero-lede span { display: block; }
@media (min-width: 900px) {
  body.landing-page .hero-copy .hero-lede span { white-space: nowrap; }
}
@media (max-width: 640px) {
  body.landing-page .hero-copy .hero-lede {
    max-width: 34ch;
    margin-top: 12px;
    font-size: 15px;
  }
}

/* Give wide desktop screens a more confident hero scale without changing the
   compact desktop/tablet or mobile compositions. */
@media (min-width: 1200px) {
  :root body.landing-page .hero-scroll-stage {
    width: min(1440px, calc(100% - 80px));
  }
  :root body.landing-page .hero-scroll-stage .hero-copy h1 {
    font-size: clamp(100px, 6vw, 112px);
  }
  :root body.landing-page .hero-scroll-stage .hero-actions {
    width: min(100%, 540px);
  }
  :root body.landing-page .hero-scroll-stage .hero-actions .hero-primary,
  :root body.landing-page .hero-scroll-stage .hero-actions .app-store-badge {
    min-height: 74px;
  }
  :root body.landing-page .hero-scroll-stage .device-toggle {
    min-height: 56px;
  }
  :root body.landing-page .hero-scroll-stage .device-toggle button {
    min-width: 96px;
    min-height: 48px;
    font-size: 14px;
  }
  :root body.landing-page .hero-scroll-stage .device-panel[data-device-panel="desktop"] .dashboard-laptop {
    width: min(100%, 720px);
  }
}

/* Give each FAQ card its own notebook rule so opening an answer keeps the
   line centered on that card instead of drifting with the page-wide grid. */
:root body.landing-page section.faq-section.faq-section,
:root[data-theme][data-dark-palette] body.landing-page section.faq-section.faq-section {
  background-image: none !important;
  overflow-x: clip;
}
body.landing-page .faq-row {
  position: relative;
  isolation: isolate;
}
body.landing-page .faq-row::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: var(--notebook-rule-ink);
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.landing-page .faq-row > .faq-item {
  position: relative;
  z-index: 1;
}

/* Match the exposed paper backing to the Connections surface. */
body.landing-page .student-benefits-section {
  --benefits-edge-surface: var(--theme-section, #080809);
  background-color: var(--theme-section, #080809) !important;
}
:root[data-theme="light"] body.landing-page .student-benefits-section {
  --benefits-edge-surface: var(--paper, #fff);
  background-color: var(--paper, #fff) !important;
}
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page .student-benefits-section {
  --benefits-edge-surface: #080809;
  background-color: #080809 !important;
}
@media (max-width: 640px) {
  /* Connections overlaps the paper by 16px. Ease the paper edge into its
     rounded turn so the exposed corner has no short, abrupt flat step. */
  body.landing-page .student-benefits-banner::after {
    position: absolute;
    left: 0;
    bottom: 16px;
    width: 22px;
    height: 18px;
    background: var(--benefits-edge-surface);
    clip-path: path("M 0 0 C 0 10 10 18 22 18 H 0 Z");
    content: "";
  }
}

/* The route already traces the diamond edge at this transition. */
:root body.landing-page main > section.why-section {
  box-shadow: none;
}

/* Restore the original notebook contrast for Black. Colored dark palettes use
   quieter, palette-matched rules; leave the already-approved pink theme alone. */
:root[data-theme="dark"][data-dark-palette="black"] body.landing-page.landing-page.landing-page {
  --notebook-rule-ink: rgb(120 170 255 / 28%);
  --notebook-rule-strength: 28%;
  --notebook-margin-color: #f04f70;
  --notebook-margin-strength: 42%;
}
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]):not([data-dark-palette="burgundy"]) body.landing-page.landing-page {
  --notebook-rule-ink: color-mix(in srgb, var(--theme-accent) 11%, transparent);
  --notebook-rule-color: var(--theme-accent);
  --notebook-rule-strength: 11%;
  --notebook-margin-color: var(--theme-accent);
  --notebook-margin-strength: 16%;
}
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]):not([data-dark-palette="burgundy"]) .hero h1 > span:last-child {
  background-image: linear-gradient(100deg,
    var(--theme-ink) 5%,
    color-mix(in srgb, var(--theme-ink) 82%, var(--theme-accent)) 55%,
    var(--theme-ink) 94%);
}

/* Give colored dark themes one continuous, lighter surface for this band.
   Removing the paper notch prevents the darker section color from peeking
   through at the sides and making the banner look clipped. */
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]) body.landing-page .student-benefits-section {
  --benefits-edge-surface: var(--theme-page);
  background-color: var(--theme-page) !important;
  border-block: 1px solid color-mix(in srgb, var(--theme-accent) 20%, var(--theme-page));
}
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]) body.landing-page .student-benefits-banner {
  clip-path: none;
  background-color: var(--theme-page);
  background-image: var(--notebook-rule-pattern);
  background-position: 0 0;
  background-size: 100% var(--notebook-rule-spacing);
}
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]) body.landing-page .student-benefits-banner::after {
  display: none;
}
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]) body.landing-page .student-benefits-section .student-benefits-copy,
:root[data-theme="dark"][data-dark-palette]:not([data-dark-palette="black"]) body.landing-page .student-benefits-section .hero-benefit-rotator {
  color: var(--theme-ink) !important;
}

/* Keep each black section's outside gutter white. The benefits section has its
   own black backing behind the rounded white sheet. */
@media (max-width: 640px) {
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page main {
    background-color: #fff !important;
  }
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page main > .why-section::after {
    background: #fff !important;
  }
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page main > .why-built-section,
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page main > section.why-section + section.white-content-section.why-built-section:not(:first-child) {
    background-color: #080809 !important;
  }
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page main > .why-built-section::before {
    background: #080809 !important;
  }
  :root[data-theme="dark"][data-dark-palette="black"] body.landing-page main > .why-built-section::after {
    background: #fff !important;
  }
}

/* Keep the annual price and trial CTA from crowding each other on mobile. */
@media (max-width: 899px) {
  body.landing-page .price-annual { margin-bottom: 14px; }
}

/* Keep footer socials directly beneath the brand mark on every viewport. */
body.landing-page .site-footer {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
body.landing-page .site-footer .site-footer-brand-group {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  justify-items: start;
  justify-self: start;
  gap: 9px;
}
body.landing-page .site-footer .site-footer-socials {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
body.landing-page .site-footer .site-footer-links {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px clamp(16px, 2vw, 28px);
}
body.landing-page .site-footer .site-footer-primary-links,
body.landing-page .site-footer .site-footer-legal-links { display: contents; }
@media (max-width: 899px) {
  body.landing-page .site-footer .site-footer-brand-group {
    grid-column: 1;
    grid-row: 1;
  }
  body.landing-page .site-footer .site-footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (min-width: 641px) {
  /* Keep the brand and its icons clear of the notebook margin line. */
  body.landing-page .site-footer .site-footer-brand-group {
    margin-left: clamp(28px, 4vw, 52px);
  }
}
@media (max-width: 640px) {
  body.landing-page .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  body.landing-page .site-footer .site-footer-brand-group {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    justify-self: center;
    width: max-content;
  }
  body.landing-page .site-footer .site-footer-socials { justify-content: center; }
  body.landing-page .site-footer .site-footer-links {
    display: grid;
    width: min(100%, 300px);
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    gap: 13px;
  }
  body.landing-page .site-footer .site-footer-primary-links,
  body.landing-page .site-footer .site-footer-legal-links {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 4vw, 18px);
    white-space: nowrap;
  }
  body.landing-page .site-footer .site-footer-links a { text-align: center; }
  body.landing-page .site-footer > small {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }
}
/* Use TikTok's official icon asset at native proportions; don't synthesize the note. */
body.landing-page .site-footer .tiktok-link img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  mix-blend-mode: screen;
}
:root[data-theme="light"][data-light-palette="pastel-pink"] body.landing-page .site-footer .tiktok-link img {
  display: none;
}
:root[data-theme="light"][data-light-palette="pastel-pink"] body.landing-page .site-footer .tiktok-link::after {
  width: 24px;
  height: 24px;
  background: #111;
  content: "";
  -webkit-mask-image: url("/tiktok-brand-icon.png?v=1");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("/tiktok-brand-icon.png?v=1");
  mask-mode: luminance;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}