: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 { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-size: 15px; font-weight: 700; letter-spacing: -.35px; }
.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: #8b8f95; font-size: 12px; font-weight: 550; }
.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: repeat(2, minmax(0,1fr)); 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; }.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; }.price-note { margin-top: 12px; color: #95979d; font-size: 10px; line-height: 1.45; text-align: center; }
.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: 1fr 1.5fr auto 1fr; align-items: center; gap: 20px; padding: 27px clamp(24px, 5vw, 76px); background: #111214; color: white; }.site-footer .wordmark { color: white; }.site-footer .wordmark-icon { background: white; color: #111214; }.site-footer > p { color: #92949a; font-size: 11px; }.site-footer > div { display: flex; gap: 19px; }.site-footer a { color: #b8b9bf; font-size: 11px; }.site-footer > small { justify-self: end; color: #787b81; font-size: 10px; }
: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 1.3fr auto; }.site-footer > small { grid-column: 1 / -1; justify-self: start; }
}
@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: 11px; }
  .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; gap: 14px; padding: 24px 20px; }.site-footer > p { margin: 0; }.site-footer > div { flex-wrap: wrap; gap: 14px 19px; }.site-footer > small { grid-column: auto; }
}
@media (max-width: 380px) { .hero-actions .button { padding-inline: 11px; font-size: 11px; }.hero h1 { font-size: 47px; }.preview-task em { display: none; } }
/* 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; }
.price-note { color: #92929c; }
.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: 680px;
    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: 16px 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: 11px; 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: 1px solid #303036;
  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); }
.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 { 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 { width: auto; height: min(100%, 640px); max-width: min(100%, 370px); animation: phone-photo-float 5.8s ease-in-out 1.4s infinite; }
.device-panel[data-device-panel="desktop"] img { width: min(100%, 660px); height: auto; animation: laptop-photo-float 7.2s ease-in-out 1.1s infinite; }
@keyframes phone-photo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes laptop-photo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.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 { width: auto; height: min(66svh, 540px); max-height: none; max-width: min(100%, 360px); }
  .device-panel[data-device-panel="desktop"] img { width: 100%; height: auto; max-height: min(42svh, 380px); }
}
@media (max-width: 640px) and (max-height: 600px) {
  .device-panel[data-device-panel="mobile"] img { height: min(40svh, 240px); }
}

@media (max-width: 640px) and (min-height: 601px) and (max-height: 680px) {
  .device-panel[data-device-panel="mobile"] img { 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 { 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; }
.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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-block: 0 76px;
  padding: 28px 34px;
  border: 1px solid #29292f;
  border-radius: 22px;
  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: 58px; 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; }
}

/* Animated iPhone product demo. The phone is built from HTML/CSS so the
   dashboard stays crisp at every size and its motion remains accessible. */
.hero .preview-scene { perspective: 1100px; }
.hero .preview-glow {
  inset: 8% 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d8c17d4d, #a77c292b 48%, transparent 72%);
  filter: blur(18px);
}
.iphone-demo {
  position: relative;
  width: clamp(245px, 25vw, 315px);
  aspect-ratio: 9 / 19.35;
  padding: 8px;
  border: 2px solid #55565e;
  border-radius: 46px;
  background: linear-gradient(135deg, #62636a, #17181c 14%, #09090b 76%, #707178);
  box-shadow: 0 38px 90px #0009, 0 9px 24px #0007, inset 0 0 0 2px #0b0b0d;
  transform-style: preserve-3d;
  animation: phone-float 6s ease-in-out 2s infinite;
}
@keyframes phone-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.iphone-bezel { width: 100%; height: 100%; }
.hero .preview-stage { display: grid; width: 100%; height: 100%; place-items: center; }
.iphone-demo::before {
  position: absolute;
  z-index: 2;
  top: 19%;
  bottom: 19%;
  left: -5px;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(#55565e, #1b1c20 38%, #55565e 39%, #1b1c20 70%, #55565e 71%);
  content: "";
}
.iphone-demo::after {
  position: absolute;
  z-index: 2;
  top: 27%;
  right: -5px;
  width: 3px;
  height: 13%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(#55565e, #1b1c20 18%, #55565e 19%);
  content: "";
}
.iphone-screen {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 37px;
  background: linear-gradient(145deg, #15161a, #0d0e11 57%, #17131a);
  color: #f4f4f6;
}
.iphone-status {
  position: relative;
  display: flex;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1px;
}
.dynamic-island {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 82px;
  height: 23px;
  border-radius: 20px;
  background: #030304;
  transform: translateX(-50%);
}
.dynamic-island b { position: absolute; top: 8px; right: 12px; width: 5px; height: 5px; border-radius: 50%; background: #152641; box-shadow: 0 0 5px #327fff88; }
.status-icons { display: flex; height: 12px; align-items: center; gap: 3px; }
.status-icons i { display: block; width: 3px; border-radius: 2px; background: #eeeef0; }
.status-icons i:nth-child(1) { height: 5px; }.status-icons i:nth-child(2) { height: 8px; }.status-icons i:nth-child(3) { height: 11px; }
.phone-app { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; padding: 15px 17px 9px; }
.iphone-demo .preview-kicker { align-items: center; font-size: 8px; letter-spacing: 1.1px; white-space: nowrap; }
.iphone-demo .preview-kicker b { color: #cfb87c; font-size: 8px; letter-spacing: .65px; }
.iphone-demo .preview-content h2, .iphone-demo h2 { margin: 12px 0 14px; font-size: clamp(25px, 2.25vw, 31px); line-height: 1.1; letter-spacing: -1.7px; }
.iphone-demo .preview-calendar { grid-template-columns: 37px 3px 1fr; gap: 9px; margin: 3px 0 15px; }
.iphone-demo .calendar-time { font-size: 10px; }
.iphone-demo .preview-calendar b { font-size: 10px; }
.iphone-demo .preview-calendar small { font-size: 8px; }
.iphone-demo .preview-summary { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.iphone-demo .preview-summary > div { min-width: 0; min-height: 59px; gap: 7px; padding: 10px 11px; border-radius: 13px; }
.iphone-demo .preview-summary small { font-size: 7px; letter-spacing: .7px; }
.iphone-demo .preview-summary strong { font-size: 10px; white-space: nowrap; }
.iphone-demo .preview-card { padding: 12px 12px 7px; border-radius: 15px; }
.iphone-demo .preview-card-head { padding-bottom: 9px; }
.iphone-demo .preview-card-head b { font-size: 11px; }
.iphone-demo .preview-card-head span { font-size: 8px; }
.iphone-demo .preview-task { min-height: 38px; gap: 8px; font-size: 9px; white-space: nowrap; }
.iphone-demo .preview-task i { width: 16px; height: 16px; flex-basis: 16px; }
.iphone-demo .preview-task em { padding: 4px 6px; font-size: 7px; }
.iphone-demo .window-bottom { height: 47px; flex: 0 0 47px; border-top-color: #29292f; background: #101013; font-size: 9px; }
.iphone-demo .window-bottom .active { color: #e7c7f3; }
.iphone-home-indicator { width: 83px; height: 4px; flex: 0 0 4px; align-self: center; margin: 3px 0 7px; border-radius: 4px; background: #f4f4f6; }
.iphone-demo .preview-calendar > i { animation: class-accent 3.4s ease-in-out 1.8s infinite; }
.iphone-demo .window-bottom .active { position: relative; }
.iphone-demo .window-bottom .active::after { position: absolute; right: 50%; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #d8a6ed; content: ""; transform: translateX(50%); animation: tab-dot 3.4s ease-in-out infinite; }
.iphone-demo .preview-task.is-done i { animation: task-check 4.8s ease-in-out 2.4s infinite; }
@keyframes class-accent { 0%, 100% { box-shadow: 0 0 0 0 #cfb87c00; } 45% { box-shadow: 0 0 0 4px #cfb87c22; } }
@keyframes tab-dot { 0%, 10%, 90%, 100% { opacity: 1; } 45%, 55% { opacity: .35; } }
@keyframes task-check { 0%, 8%, 100% { transform: scale(1); } 3% { transform: scale(.82); } 6% { transform: scale(1.08); } }
@media (min-width: 641px) {
  .hero .preview-scene { min-height: 600px; }
  .iphone-demo { width: clamp(270px, 25vw, 320px); }
  .iphone-demo .preview-kicker, .iphone-demo .preview-kicker b { font-size: 9px; }
  .iphone-demo .preview-content h2, .iphone-demo h2 { margin-block: 15px 18px; font-size: 33px; }
  .iphone-demo .preview-calendar { margin-block: 8px 21px; }
  .iphone-demo .preview-calendar b { font-size: 12px; }
  .iphone-demo .preview-calendar small { font-size: 10px; }
  .iphone-demo .preview-summary { margin-bottom: 16px; }
  .iphone-demo .preview-summary > div { min-height: 70px; padding: 12px; }
  .iphone-demo .preview-summary small { font-size: 8px; }
  .iphone-demo .preview-summary strong { font-size: 12px; }
  .iphone-demo .preview-card { padding: 15px 14px 9px; }
  .iphone-demo .preview-card-head b { font-size: 13px; }
  .iphone-demo .preview-card-head span { font-size: 9px; }
  .iphone-demo .preview-task { min-height: 45px; font-size: 11px; }
}
@media (max-width: 640px) {
  .hero .preview-scene { min-height: 0; }
  .hero .preview-stage { min-height: 0; }
  .iphone-demo { width: auto; height: min(100%, 435px); max-height: 100%; aspect-ratio: 9 / 19.35; }
  .phone-app { padding: 12px 14px 7px; }
  .iphone-status { height: 39px; flex-basis: 39px; padding-inline: 19px; }
  .dynamic-island { top: 6px; width: 72px; height: 20px; }
  .iphone-demo .preview-content h2, .iphone-demo h2 { margin: 9px 0 10px; font-size: 25px; }
  .iphone-demo .preview-calendar { margin: 1px 0 11px; }
  .iphone-demo .preview-summary > div { min-height: 51px; padding: 8px; }
  .iphone-demo .preview-summary { margin-bottom: 9px; }
  .iphone-demo .preview-card { padding: 10px 10px 5px; }
  .iphone-demo .preview-task { min-height: 33px; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .iphone-demo { height: min(100%, 360px); padding: 6px; border-radius: 39px; }
  .iphone-screen { border-radius: 32px; }
  .iphone-status { height: 34px; flex-basis: 34px; }
  .phone-app { padding: 8px 12px 5px; }
  .iphone-demo .preview-summary { display: none; }
  .iphone-demo .preview-calendar { margin-bottom: 8px; }
  .iphone-demo .preview-calendar small { display: none; }
  .iphone-demo .preview-card { padding: 8px 10px 4px; }
  .iphone-demo .preview-task { min-height: 27px; }
  .iphone-demo .window-bottom { height: 39px; flex-basis: 39px; }
}
@media (max-width: 640px) and (max-height: 600px) {
  .iphone-demo { height: min(100%, 300px); }
  .iphone-demo .preview-calendar { display: none; }
  .iphone-demo .preview-content h2, .iphone-demo h2 { margin-block: 6px; font-size: 22px; }
  .iphone-demo .preview-task { min-height: 23px; }
  .iphone-demo .window-bottom { height: 31px; flex-basis: 31px; }
  .iphone-home-indicator { margin-block: 1px 4px; }
}