:root {
color-scheme: light;
--page: #f2f2f7; --paper: #fff; --text: #1c1c1e; --muted: #5d5d65;
--line: #d7d7df; --accent: #005fcc; --accent-text: #fff;
--brand: #4c110e; --brand-soft: #f3e8e5; --mint: #087a5e; --mint-soft: #e4f0e9;
--lavender: #6d5ed9; --lavender-soft: #eae7f7; --blue-soft: #e5edf9;
--today: #2d6fd4; --project: #6b5a35; --list: #7a675c; --area: #57436d;
--workflow-inbox: #335f68; --workflow-next: #467458; --workflow-waiting: #8d7b4e;
--workflow-scheduled: #686093;
--spaces: #7e2f9a; --nearby: #087987;
--shadow: 0 24px 64px rgb(22 24 35 / .13);
--ease: cubic-bezier(.16,1,.3,1);
font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
color-scheme: dark;
--page: #000; --paper: #171719; --text: #f5f5f7; --muted: #c7c7cc;
--line: #37373c; --accent: #64d2ff; --accent-text: #071d28;
--brand: #ffb4a8; --brand-soft: #2c1d1b; --mint: #63e6be; --mint-soft: #11251e;
--lavender: #b8aeff; --lavender-soft: #201e31; --blue-soft: #152334;
--today: #5ea0ff; --project: #b8a476; --list: #bda99d; --area: #a58ab6;
--workflow-inbox: #90bac3; --workflow-next: #99c8ac; --workflow-waiting: #d7bf7a;
--workflow-scheduled: #b6aede;
--spaces: #bf8cff; --nearby: #6ee7f2;
--shadow: 0 24px 64px rgb(0 0 0 / .4);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; color: var(--text); background: var(--page); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
::selection { color: var(--accent-text); background: var(--accent); }
a { color: inherit; text-underline-offset: .22em; }
button, input, summary { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, input { caret-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
img { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(3rem,7vw,6rem); font-weight: 650; }
h2 { font-size: clamp(2.2rem,4.6vw,4rem); font-weight: 620; }
h3 { font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; }
p { text-wrap: pretty; }
.wrap { width: min(1280px,calc(100% - 96px)); margin-inline: auto; }
.icon { width: 24px; height: 24px; }
.icon-glyph { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-glyph.icon-apple { fill: currentColor; stroke: none; }
.skip-link { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 100; padding: 12px 20px; background: var(--paper); transform: translateY(-160%); border-radius: 12px; }
.skip-link:focus { transform: none; }
.site-header { position: relative; z-index: 20; background: var(--page); }
.header-inner { width: min(1440px,calc(100% - 80px)); margin: auto; min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: 1.45rem; letter-spacing: -.04em; font-weight: 700; text-decoration: none; }
.wordmark img { border-radius: 11px; }
.main-nav { display: flex; align-items: center; gap: 30px; font-size: .9rem; font-weight: 550; }
.main-nav>a { text-decoration: none; }
.main-nav>a:not(.nav-store):hover { color: var(--accent); }
.main-nav [aria-current="page"] { color: var(--accent); }
.nav-features { position: relative; }
.nav-features summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 0; }
.nav-features summary::-webkit-details-marker { display: none; }
.nav-features summary .icon { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav-features[open] summary .icon { transform: rotate(180deg); }
.nav-dropdown { position: absolute; top: 100%; inset-inline-start: -24px; padding: 10px; min-width: 230px; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); }
.nav-dropdown a { display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none; border-radius: 10px; }
.nav-dropdown a:hover { background: var(--page); }
.locale-picker { position: relative; }
.locale-picker summary { display: flex; align-items: center; gap: 8px; padding-block: 10px; list-style: none; cursor: pointer; }
.locale-picker summary::-webkit-details-marker { display: none; }
.locale-picker summary>span { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale-picker summary>.icon { width: 14px; height: 14px; }
.locale-list { position: absolute; inset-inline-end: 0; top: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; width: min(480px,calc(100vw - 48px)); max-height: min(65dvh,560px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); scrollbar-color: var(--line) var(--paper); }
.locale-list a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; text-decoration: none; border-radius: 10px; }
.locale-list a:hover,.locale-list a[aria-current="page"] { color: var(--accent); background: var(--page); }
.locale-list a:focus-visible { outline-offset: -3px; }
.desktop-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.nav-store { display: flex; gap: 8px; align-items: center; background: var(--text); color: var(--paper); padding: 11px 18px; border-radius: 999px; }
.nav-store .icon { width: 15px; height: 15px; }
.mobile-nav { display: none; }
.nav-toggle { display: none; border: 0; color: inherit; background: transparent; padding: 10px; cursor: pointer; list-style: none; }
.nav-toggle::-webkit-details-marker { display: none; }
.button { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; min-height: 56px; border-radius: 999px; font-size: 1rem; font-weight: 600; text-decoration: none; border: 0; transition: background-color .2s, transform .25s var(--ease),box-shadow .25s; }
.button>span { min-width: 0; }
.button:active { transform: scale(.97); }
.button-primary { background: var(--accent); color: var(--accent-text); }
.button-primary:hover { box-shadow: 0 8px 20px rgb(0 95 204 / .18); transform: translateY(-2px); }
.button-arrow { width: 16px; height: 16px; margin-inline-start: 10px; }
.button-quiet { background: var(--paper); color: var(--text); }
.button:disabled { opacity: .38; transform: none; box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-weight: 600; text-decoration: none; padding: 10px 0; }
.text-link .icon { width: 21px; transition: transform .2s var(--ease); }
.text-link:hover .icon { transform: translateX(5px); }
.tasks { --feature: var(--text); --feature-ink: var(--text); --stage-fill: #353740; }
.habits { --feature: var(--mint); --feature-ink: #075c47; --stage-fill: #087a5e; }
.gtd { --feature: var(--lavender); --feature-ink: #50449f; --stage-fill: #6d5ed9; }
.bigview { --feature: var(--text); --feature-ink: var(--text); --stage-fill: #252d36; }
.spaces { --feature: var(--spaces); --feature-ink: #6d2786; --stage-fill: #7e2f9a; }
.nearby { --feature: var(--nearby); --feature-ink: #075e69; --stage-fill: #087987; }
.integrations { --feature: var(--text); --feature-ink: var(--text); --stage-fill: #384352; }
:root[data-theme="dark"] :is(.tasks,.habits,.gtd,.bigview,.spaces,.nearby,.integrations) { --feature-ink: var(--feature); }
.nav-dropdown>a>.icon { color: var(--feature); }
.hero { position: relative; overflow: hidden; }
.hero-inner { min-height: 760px; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 64px; padding-block: 44px 76px; }
.hero-copy { position: relative; z-index: 2; animation: copy-arrive .8s var(--ease) both; }
.hero-brand { font-size: clamp(5rem,8vw,6rem); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.brand-dot { color: var(--brand); }
.hero-title { margin-top: 24px; font-size: clamp(2.1rem,3.7vw,3.25rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.hero-description { max-width: 450px; margin-top: 24px; color: var(--muted); font-size: 1.1rem; line-height: 1.65; }
.hero .button { margin-top: 32px; }
.hero-note { margin-top: 16px; font-size: .8rem; color: var(--muted); max-width: 390px; }
.phone { position: relative; width: 290px; flex-shrink: 0; padding: 8px; background: #0c0c0d; border-radius: 46px; box-shadow: var(--shadow); }
.phone-image { width: 100%; border-radius: 38px; }
.product-stage { position: relative; min-width: 0; overflow: hidden; isolation: isolate; background: var(--stage-fill); border-radius: 32px; color: #fff; }
.product-stage::before { content: ''; position: absolute; inset: 0 46% 0 0; background: rgb(255 255 255 / .03); transform: skewX(-15deg); transform-origin: bottom; pointer-events: none; }
.stage-heading { position: relative; display: flex; align-items: center; gap: 10px; padding: 26px 28px 0; font-size: .9rem; font-weight: 600; }
.stage-heading .icon { width: 21px; height: 21px; }
.stage-screens { position: relative; height: 470px; margin-top: 20px; overflow: hidden; }
.stage-primary { position: absolute; z-index: 2; width: 46%; left: 47%; top: 14px; transform: rotate(7deg); }
.stage-secondary { position: absolute; width: 43%; left: 5%; top: 68px; transform: rotate(-9deg); }
.stage-secondary .phone { width: 100%; }
.stage-screens .phone { padding: 6px; border-radius: 35px; box-shadow: 0 18px 30px rgb(0 0 0 / .22); }
.stage-screens .phone-image { border-radius: 29px; }
.apple-stage-screens { position: relative; aspect-ratio: 1.18; margin-top: 28px; }
.tablet { padding: 6px; background: #0c0c0d; border-radius: 20px; box-shadow: var(--shadow); }
.tablet-image { width: 100%; border-radius: 14px; }
.apple-tablet { position: absolute; width: 61%; left: 6%; top: 1%; }
.apple-phone { position: absolute; width: 29%; left: 65%; top: 20%; padding: 5px; border-radius: 28px; }
.apple-phone .phone-image { border-radius: 23px; }
.stage-caption { position: relative; display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 20px 28px; font-weight: 550; font-size: .9rem; line-height: 1.4; background: var(--stage-caption-fill,var(--paper)); color: var(--stage-caption-ink,var(--text)); }
.stage-caption .icon { width: 20px; height: 20px; color: var(--stage-caption-icon,var(--feature-ink)); }
.stage-feature-links { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--paper); }
.stage-feature-links a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 6px; min-height: 87px; text-align: center; text-decoration: none; font-size: .76rem; font-weight: 600; line-height: 1.35; color: var(--feature-ink); background: color-mix(in srgb,var(--feature) 17%,var(--paper)); transition: background-color .2s; }
.stage-feature-links a:hover { background: color-mix(in srgb,var(--feature) 24%,var(--paper)); }
.stage-feature-links a:focus-visible { outline-offset: -5px; }
.hero-stage { animation: stage-arrive 1s var(--ease) both; }
:root[data-theme="dark"] .product-stage { --stage-fill: color-mix(in srgb,var(--feature) 26%,#101014); }
.workflow-section { padding-block: 110px 120px; border-top: 1px solid var(--line); }
.workflow-intro { display: grid; grid-template-columns: 1fr .8fr; gap: 100px; align-items: end; }
.workflow-intro h2 { max-width: 650px; }
.workflow-intro>p { color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.workflow-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; padding: 0; margin: 72px 0 0; list-style: none; }
.workflow-steps li:nth-child(1) { --step-color: var(--today); }
.workflow-steps li:nth-child(2) { --step-color: var(--project); }
.workflow-steps li:nth-child(3) { --step-color: var(--mint); }
.step-number { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--step-color); background: color-mix(in srgb,var(--step-color) 18%,var(--paper)); margin-bottom: 24px; font-variant-numeric: tabular-nums; font-weight: 650; }
.workflow-steps h3 { margin-bottom: 14px; }
.workflow-steps p { color: var(--muted); max-width: 32ch; }
.showcase { padding-block: 20px 130px; }
.section-heading { max-width: 760px; }
.section-heading p { color: var(--muted); font-size: 1.1rem; margin-top: 20px; max-width: 62ch; }
.showcase-layout { margin-top: 40px; }
.feature-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 34px; }
.feature-tab { display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 18px 22px; background: color-mix(in srgb,var(--feature) 13%,var(--paper)); border: 2px solid transparent; border-radius: 16px; text-align: start; color: var(--feature-ink); font-size: 1.05rem; font-weight: 600; transition: background-color .2s,border-color .2s; }
.feature-tab:hover { background: color-mix(in srgb,var(--feature) 22%,var(--paper)); }
.feature-tab>.icon { margin-inline-start: auto; width: 20px; }
.feature-symbol { display: grid; place-items: center; width: 30px; height: 30px; }
.organization-symbol { display: grid; grid-template-columns: repeat(2,8px); gap: 4px; padding: 2px; }
.organization-symbol>span { width: 8px; height: 8px; border-radius: 4px; }
.entity-tasks { background: var(--accent); }
.entity-list { background: var(--list); }
.entity-project { background: var(--project); }
.entity-area { background: var(--area); }
.feature-tab.tasks { background: var(--paper); border-color: var(--line); }
.feature-tab.tasks:hover,.feature-tab.tasks[aria-selected="true"] { background: color-mix(in srgb,var(--text) 7%,var(--paper)); }
.feature-tab.tasks[aria-selected="true"] { border-color: var(--text); }
.stage-feature-links a.tasks { background: var(--paper); }
.stage-feature-links a.tasks:hover { background: color-mix(in srgb,var(--text) 7%,var(--paper)); }
:root[data-theme="dark"] .product-stage.tasks { --stage-fill: #292b34; }
:root[data-theme="dark"] .product-stage.bigview { --stage-fill: #222a34; }
:root[data-theme="dark"] .product-stage.integrations { --stage-fill: #272d36; }
.feature-tab[aria-selected="true"] { border-color: var(--feature); background: color-mix(in srgb,var(--feature) 22%,var(--paper)); }
.showcase-panels { min-width: 0; }
.showcase-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.panel-copy { padding-block: 35px; }
.panel-copy h3 { font-size: clamp(2.2rem,3.8vw,3.4rem); color: var(--feature); }
.panel-copy p { margin-top: 24px; color: var(--muted); max-width: 44ch; font-size: 1.1rem; line-height: 1.7; }
.panel-copy .text-link { margin-top: 24px; color: var(--feature-ink); }
.apple-section { background: var(--paper); padding-block: 80px; }
.apple-inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: center; }
.apple-copy { padding-block: 30px; }
.apple-large { width: 40px; height: 40px; margin-bottom: 30px; color: var(--text); }
.apple-copy h2 { max-width: 560px; }
.apple-copy p { margin-top: 24px; color: var(--muted); font-size: 1.08rem; max-width: 48ch; }
.apple-copy .text-link { margin-top: 20px; }
.integration-labels { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 28px 0 0; list-style: none; max-width: 360px; }
.integration-labels li { display: flex; align-items: center; gap: 14px; padding-block: 15px; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 550; }
.integration-labels li:nth-child(1) .icon { color: var(--today); }
.integration-labels li:nth-child(2) .icon { color: var(--lavender); }
.integration-labels li:nth-child(3) .icon { color: var(--mint); }
.privacy-section { padding-block: 110px; display: grid; grid-template-columns: 110px 1fr; max-width: 980px; gap: 50px; }
.privacy-icon { width: 90px; height: 90px; background: var(--blue-soft); border-radius: 28px; display: grid; place-items: center; color: var(--accent); }
.privacy-icon .icon { width: 40px; height: 40px; }
.privacy-section h2 { max-width: 650px; }
.privacy-section p { color: var(--muted); font-size: 1.08rem; margin-top: 24px; max-width: 66ch; }
.privacy-section .text-link { margin-top: 14px; }
.faq-section { max-width: 980px; padding-block: 20px 100px; }
.faq-section>h2 { margin-bottom: 40px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: 1.1rem; font-weight: 550; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq-answer { padding-bottom: 26px; color: var(--muted); line-height: 1.75; max-width: 72ch; }
.final-cta { text-align: center; padding-block: 70px 130px; }
.final-cta h2 { max-width: 800px; margin-inline: auto; }
.final-cta p { max-width: 58ch; color: var(--muted); margin: 24px auto 32px; font-size: 1.08rem; }
.site-footer { color: #fff4f1; background: #4c110e; }
.footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; padding-block: 32px; gap: 32px 48px; }
.footer-identity { min-width: 0; }
.footer-brand { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-size: 2rem; font-weight: 650; letter-spacing: -.04em; text-decoration: none; }
.footer-brand img { border-radius: 11px; flex-shrink: 0; }
.footer-identity p { margin-top: 8px; max-width: 36ch; color: #e8ceca; font-size: .9rem; }
.footer-links { display: grid; gap: 4px; min-width: 0; }
.footer-links ul { display: flex; flex-wrap: wrap; justify-content: end; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.footer-links li { min-width: 0; max-width: 100%; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: #fff4f1; font-size: .9rem; line-height: 1.45; text-decoration: none; text-underline-offset: .2em; overflow-wrap: anywhere; }
.footer-links a:hover, .footer-links a[aria-current="page"] { text-decoration: underline; }
.footer-links ul+ul a { color: #e8ceca; font-size: .8rem; }
.footer-bottom { border-top: 1px solid #78413c; display: flex; justify-content: space-between; align-items: center; padding-block: 12px; gap: 20px; font-size: .75rem; color: #e8ceca; }
.theme-toggle { display: flex; align-items: center; gap: 10px; border: 0; padding: 10px 0; padding-inline-start: 14px; color: #fff4f1; background: transparent; font-size: .8rem; }
.theme-toggle .icon { width: 18px; height: 18px; }
.page-hero { min-height: 710px; padding-block: 50px 90px; display: grid; grid-template-columns: .96fr 1.04fr; gap: 70px; align-items: center; }
.page-hero:not(.legal-hero):not(.help-hero) h1 { color: var(--feature); }
.page-hero-copy h1 { max-width: 800px; font-size: clamp(3rem,5.6vw,5rem); }
.page-hero-copy>p { color: var(--muted); font-size: 1.15rem; margin-top: 28px; max-width: 52ch; line-height: 1.7; }
.page-hero-copy .button { margin-top: 32px; }
.availability-note { font-size: .88rem !important; }
.feature-content { padding-bottom: 30px; }
.apple-platforms { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px 80px; border-top: 1px solid var(--line); padding-block: 64px; }
.apple-platforms-heading h2 { font-size: clamp(1.8rem,3vw,2.8rem); }
.apple-platforms-heading p { max-width: 40ch; margin-top: 22px; color: var(--muted); font-size: 1.07rem; line-height: 1.7; }
.apple-platforms-list { list-style: none; margin: 0; padding: 0; }
.apple-platform { display: grid; grid-template-columns: 32px 1fr; gap: 18px; padding-block: 22px; }
.apple-platform:first-child { padding-top: 0; }
.apple-platform+.apple-platform { border-top: 1px solid var(--line); }
.apple-platform-icon .icon { width: 30px; height: 30px; }
.apple-platform-copy h3 { font-size: 1.2rem; line-height: 1.3; }
.apple-platform-copy p { margin-top: 8px; color: var(--muted); line-height: 1.65; }
.apple-platforms-note { grid-column: 2; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.content-section { border-top: 1px solid var(--line); padding-block: 64px; }
.content-copy { max-width: 76ch; }
.content-copy h2 { font-size: clamp(1.8rem,3vw,2.8rem); margin-bottom: 22px; }
.content-copy p { color: var(--muted); font-size: 1.07rem; line-height: 1.8; }
.detail-list { margin: 24px 0 0; padding-inline-start: 22px; color: var(--muted); line-height: 1.8; }
.detail-list li+li { margin-top: 10px; }
.content-copy .text-link { margin-block-start: 14px; margin-inline-end: 24px; }
.content-section.has-image { --media-muted: color-mix(in srgb,var(--text) 12%,var(--muted)); display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; background: color-mix(in srgb,var(--feature) 18%,var(--paper)); border: 0; border-radius: 32px; padding: 48px; margin-block: 24px; overflow: hidden; }
.content-section.has-image :is(.content-copy p,.detail-list) { color: var(--media-muted); }
body[data-page="tasks"] .feature-content { --feature: var(--text); }
body[data-page="habits"] .feature-content { --feature: var(--mint); }
body[data-page="gtd"] .feature-content { --feature: var(--lavender); }
body[data-page="bigview"] .feature-content { --feature: var(--text); }
body[data-page="spaces"] .feature-content { --feature: var(--spaces); }
body[data-page="nearby"] .feature-content { --feature: var(--nearby); }
body[data-page="integrations"] .feature-content { --feature: var(--text); }
body[data-page="integrations"] .content-section.has-image { background: var(--paper); }
.feature-content .has-image h2 { color: var(--feature); }
.section-phone { width: 240px; justify-self: center; }
.section-media { width: min(100%,240px); justify-self: center; }
.section-media .section-phone { width: 100%; }
.section-media-pair { width: 100%; max-width: 600px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 24px; }
.section-media-pair .phone { padding: 6px; border-radius: 35px; }
.section-media-pair .phone-image { border-radius: 29px; }
.section-shot { min-width: 0; }
.section-shot figcaption { margin-top: 16px; color: var(--media-muted,var(--muted)); font-size: .85rem; line-height: 1.55; }
.content-section.has-image-pair { grid-template-columns: .8fr 1.2fr; gap: 48px; }
.legal-hero,.help-hero { display: block; min-height: auto; padding-block: 90px 70px; }
.legal-hero .page-hero-copy,.help-hero .page-hero-copy { max-width: 900px; }
.legal-content { max-width: 980px; padding-bottom: 100px; }
.legal-content .content-section { padding-block: 40px; }
.legal-content .content-copy { max-width: 75ch; }
.legal-content .content-copy h2 { font-size: 1.65rem; }
.policy-link { margin-top: 25px; }
.help-content { max-width: 980px; }
.help-content .content-copy { max-width: 76ch; }
.demo-section { padding-block: 60px 100px; }
.gtd-demo { display: grid; grid-template-columns: 1fr 1fr; margin-top: 45px; border-radius: 28px; overflow: hidden; background: var(--paper); }
.demo-scene { padding: 44px; background: var(--lavender-soft); min-height: 480px; display: flex; flex-direction: column; justify-content: center; }
.demo-project { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); color: var(--text); font-size: .95rem; font-weight: 600; }
.demo-project .icon { color: var(--project); }
.demo-details { display: grid; gap: 16px; margin: 24px 0 0; min-height: 100px; }
.demo-details div { display: grid; gap: 4px; }
.demo-details dt { color: var(--muted); font-size: .78rem; }
.demo-details dd { margin: 0; font-size: .95rem; line-height: 1.5; }
.demo-record { display: flex; align-items: center; gap: 18px; }
.demo-record-icon { color: var(--accent); }
.demo-record-kind { color: var(--muted); font-size: .8rem; }
.demo-record h3 { margin-top: 7px; font-size: 1.5rem; line-height: 1.25; }
.demo-status { display: flex; align-items: center; gap: 12px; color: var(--text); margin-top: 32px; font-weight: 600; transition: transform .3s var(--ease); }
.demo-track { display: flex; gap: 8px; margin-top: 30px; }
.demo-track span { height: 4px; width: 38px; border-radius: 4px; background: var(--line); }
.demo-track .is-active { background: var(--lavender); }
.demo-controls { display: flex; flex-direction: column; padding: 55px; }
.demo-progress { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.demo-controls h3 { font-size: 1.75rem; margin-top: 18px; }
.demo-controls p { margin-top: 20px; color: var(--muted); line-height: 1.7; }
.demo-live { flex-grow: 1; }
.demo-buttons { display: flex; gap: 12px; margin-top: 30px; }
.demo-buttons .button { padding: 13px 22px; min-height: 49px; font-size: .9rem; }
.reset-button { align-self: start; padding: 12px 0; margin-top: 10px; color: var(--muted); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; font-size: .8rem; }
.not-found { padding-block: 120px; }
.not-found p { margin-block: 30px; }
.not-found .text-link { margin-inline-start: 30px; }
.not-found .locale-list { position: static; margin-top: 30px; width: min(100%,720px); max-height: none; box-shadow: none; }
.screenshot-notice { margin-block: -36px 36px; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.hero+.screenshot-notice { margin-block: -32px 32px; }
.hero-copy,.page-hero-copy,.content-copy,.panel-copy,.workflow-intro>*,.demo-record>div { min-width: 0; }
html[dir="rtl"] :is(h1,h2,h3,.hero-brand,.hero-title,.wordmark,.footer-brand) { letter-spacing: normal; }
html:is(:lang(ar),:lang(fa),:lang(he),:lang(ur),:lang(bn),:lang(gu),:lang(hi),:lang(kn),:lang(ml),:lang(mr),:lang(or),:lang(pa),:lang(ta),:lang(te),:lang(th)) :is(h1,h2,h3,.hero-brand,.hero-title) { line-height: 1.25; letter-spacing: normal; }
html[dir="rtl"] .text-link>.icon { transform: scaleX(-1); }
html[dir="rtl"] .text-link:hover>.icon { transform: translateX(-5px) scaleX(-1); }
.stage-screens,.apple-stage-screens { direction: ltr; }
.demo-progress { direction: ltr; unicode-bidi: isolate; display: inline-block; }
@keyframes stage-arrive { from { transform: translateY(18px); clip-path: inset(0 0 5% 0 round 32px); } to { transform: none; clip-path: inset(0 round 32px); } }
@keyframes copy-arrive { from { transform: translateY(12px); } to { transform: translateY(0); } }
@media (min-width:1600px) { .hero-inner { min-height: 830px; } }
@media (max-width:1100px) {
.content-section.has-image-pair { grid-template-columns: 1fr; gap: 32px; }
.wrap { width: calc(100% - 64px); }
.header-inner { width: calc(100% - 48px); }
.main-nav { gap: 22px; font-size: .8rem; }
.hero-inner { gap: 32px; }
.hero-title { font-size: 2.7rem; }
.workflow-intro { gap: 55px; }
.apple-inner { gap: 50px; }
.page-hero { gap: 50px; }
}
@media (max-width:760px) {
.wrap { width: calc(100% - 40px); }
.header-inner { width: calc(100% - 32px); min-height: 78px; gap: 15px; }
.wordmark { font-size: 1.25rem; gap: 10px; }
.wordmark img { width: 34px; height: 34px; border-radius: 9px; }
.nav-toggle { display: block; }
.mobile-nav { display: block; }
.desktop-nav { display: none; }
.main-nav { display: none; position: absolute; inset: 78px 0 auto; padding: 16px 24px 24px; background: var(--page); border-bottom: 1px solid var(--line); align-items: stretch; font-size: 1rem; gap: 10px; }
.mobile-nav[open] .main-nav { display: flex; flex-direction: column; max-height: calc(100dvh - 78px); overflow-y: auto; }
.main-nav>a { padding-block: 12px; }
.main-nav .nav-store { justify-content: center; padding-block: 13px; margin-top: 6px; }
.nav-features summary { justify-content: space-between; padding-block: 12px; }
.nav-dropdown { position: static; box-shadow: none; background: var(--paper); padding: 6px; }
.hero-inner { display: flex; flex-direction: column; min-height: auto; padding-block: 28px 55px; gap: 34px; align-items: stretch; }
.hero-copy { padding-bottom: 0; text-align: start; }
.hero-brand { font-size: 4.8rem; }
.hero-title { font-size: clamp(1.9rem,7.5vw,2.5rem); margin-top: 18px; }
.hero-description { font-size: 1rem; margin: 22px 0 0; max-width: 38ch; }
.hero .button { margin-top: 26px; }
.hero-note { margin: 14px 0 0; font-size: .75rem; max-width: 36ch; }
.workflow-section { padding-block: 65px 75px; }
.workflow-intro { display: block; }
.workflow-intro>p { margin-top: 24px; font-size: 1rem; }
.workflow-steps { display: flex; flex-direction: column; gap: 30px; margin-top: 36px; }
.workflow-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 8px 18px; }
.step-number { grid-row: 1/3; width: 34px; height: 34px; margin-bottom: 0; }
.workflow-steps h3 { margin: 4px 0 0; font-size: 1.18rem; }
.workflow-steps p { grid-column: 2; max-width: 42ch; font-size: .95rem; }
.showcase { padding-block: 0 70px; }
.section-heading p { margin-top: 20px; font-size: 1rem; }
.panel-copy p { margin-top: 18px; font-size: .95rem; }
.panel-copy .text-link { margin-top: 12px; }
.apple-inner { display: block; min-height: 0; }
.apple-copy { padding-block: 65px 20px; }
.apple-large { width: 34px; height: 34px; margin-bottom: 24px; }
.apple-copy p { font-size: 1rem; }
.privacy-section { display: block; padding-block: 65px; }
.privacy-icon { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 28px; }
.privacy-icon .icon { width: 30px; height: 30px; }
.privacy-section p { font-size: 1rem; margin-top: 22px; }
.faq-section { padding-block: 0 55px; }
.faq-section>h2 { margin-bottom: 25px; }
.faq summary { font-size: 1rem; padding-block: 23px; }
.faq-answer { font-size: .95rem; }
.final-cta { padding-block: 35px 75px; }
.final-cta p { font-size: 1rem; }
.footer-main { grid-template-columns: 1fr; gap: 20px; padding-block: 24px; }
.footer-links { gap: 12px; }
.footer-links ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.footer-bottom { align-items: center; padding-block: 12px; font-size: .7rem; }
.footer-bottom p { max-width: 26ch; }
.theme-toggle { font-size: .75rem; }
.page-hero { display: flex; flex-direction: column; align-items: start; gap: 45px; min-height: 0; padding-block: 40px 60px; }
.page-hero-copy h1 { font-size: clamp(2.6rem,10vw,4rem); }
.page-hero-copy>p { margin-top: 24px; font-size: 1.05rem; }
.content-section { padding-block: 36px; }
.apple-platforms { grid-template-columns: 1fr; gap: 28px; padding-block: 36px; }
.apple-platforms-heading p { font-size: 1rem; max-width: none; }
.apple-platforms-note { grid-column: auto; }
.apple-stage-screens { margin-top: 22px; }
.tablet { padding: 4px; border-radius: 14px; }
.tablet-image { border-radius: 10px; }
.apple-phone { padding: 3px; border-radius: 19px; }
.apple-phone .phone-image { border-radius: 16px; }
.content-copy h2 { font-size: 1.8rem; }
.content-copy p,.detail-list { font-size: 1rem; }
.content-section.has-image { display: flex; flex-direction: column; gap: 30px; padding: 28px; border-radius: 24px; }
.section-phone { width: 225px; }
.section-media { width: min(100%,225px); }
.section-media-pair { width: 100%; gap: 16px; }
.section-media-pair .phone { padding: 4px; border-radius: 25px; }
.section-media-pair .phone-image { border-radius: 21px; }
.legal-hero,.help-hero { display: block; padding-block: 45px; }
.legal-content { padding-bottom: 65px; }
.demo-section { padding-block: 35px 65px; }
.gtd-demo { display: flex; flex-direction: column; border-radius: 22px; margin-top: 30px; }
.demo-scene { padding: 30px; min-height: 300px; }
.demo-controls { padding: 30px; min-height: 340px; }
.demo-record h3 { font-size: 1.25rem; }
.demo-controls h3 { font-size: 1.5rem; }
.demo-buttons { gap: 10px; }
.demo-buttons .button { padding-inline: 18px; }
.not-found { padding-block: 65px; }
.not-found .text-link { margin: 20px 0 0; display: flex; }
.screenshot-notice,.hero+.screenshot-notice { margin-block: -28px 28px; }
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior: auto; }
*,*::before,*::after { animation: none !important; transition: none !important; }
}
@media (prefers-contrast:more) {
:root { --muted: #38383b; --line: #74747c; }
:root[data-theme="dark"] { --muted: #e5e5e7; --line: #a0a0aa; }
.button { outline: 1px solid currentColor; outline-offset: -1px; }
}
@media (min-width:761px) and (max-width:980px) {
.hero-inner { grid-template-columns: .97fr 1.03fr; gap: 24px; }
.hero-title { font-size: 2rem; }
.hero .button { gap: 9px; padding-inline: 18px; font-size: .9rem; }
.hero .button-arrow { margin-inline-start: 0; }
.nav-toggle { display: block; }
.mobile-nav { display: block; }
.desktop-nav { display: none; }
.main-nav { display: none; position: absolute; inset: 96px 0 auto; padding: 16px 32px 24px; background: var(--page); border-bottom: 1px solid var(--line); align-items: stretch; font-size: 1rem; gap: 10px; }
.mobile-nav[open] .main-nav { display: flex; flex-direction: column; max-height: calc(100dvh - 96px); overflow-y: auto; }
.main-nav>a { padding-block: 12px; }
.main-nav .nav-store { justify-content: center; padding-block: 13px; margin-top: 6px; }
.nav-features summary { justify-content: space-between; padding-block: 12px; }
.nav-dropdown { position: static; box-shadow: none; background: var(--paper); padding: 6px; }
}
@media (max-width:360px) {
.hero-brand { font-size: 4rem; }
.hero .button { gap: 9px; padding-inline: 18px; font-size: .9rem; }
.hero .button-arrow { margin-inline-start: 0; }
.demo-buttons { flex-direction: column; }
}
.feature-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; list-style: none; padding: 0; margin: 28px 0 0; }
.feature-legend li { display: flex; align-items: center; gap: 8px; color: var(--legend-color); font-size: .85rem; font-weight: 600; }
.feature-legend .area { --legend-color: var(--area); }
.feature-legend .project { --legend-color: var(--project); }
.feature-legend .list { --legend-color: var(--list); }
.feature-legend .tasks { --legend-color: var(--accent); }
.feature-legend .icon { width: 19px; height: 19px; }
.gtd-demo[data-step="0"] { --status: var(--workflow-inbox); }
.gtd-demo[data-step="1"] { --status: var(--workflow-next); }
.gtd-demo[data-step="2"] { --status: var(--workflow-waiting); }
.gtd-demo[data-step="3"] { --status: var(--workflow-scheduled); }
.demo-status .icon { color: var(--status); }
.demo-status [data-demo-status-icon] { display: inline-flex; }
.text-link,.theme-toggle,.reset-button { min-height: 44px; }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }

/* Feature descriptions remain available when the controller cannot load. */
[data-tabs]:not([data-tabs-ready]) .feature-tabs { display: none; }
[data-tabs]:not([data-tabs-ready]) .showcase-panel[hidden] { display: grid !important; }
[data-tabs]:not([data-tabs-ready]) .showcase-panel + .showcase-panel { margin-top: 48px; }
.theme-toggle:not([data-theme-ready]) { display: none; }
.gtd-demo:not([data-demo-ready]) :is(.demo-scene,.demo-controls) { display: none; }
.gtd-demo[data-demo-ready] .demo-fallback { display: none; }
.demo-fallback { grid-column: 1 / -1; padding: 32px 48px; margin: 0; }

@media (max-width:980px) {
.locale-picker summary { justify-content: space-between; padding-block: 12px; }
.locale-picker summary>span { max-width: none; white-space: normal; }
.locale-list { position: static; width: 100%; max-height: none; box-shadow: none; padding: 6px; }
}

@media (min-width:761px) and (max-width:1100px) {
.stage-screens { height: 390px; }
.stage-heading { padding: 22px 22px 0; }
.stage-primary { width: 51%; left: 44%; top: 28px; }
.stage-secondary { width: 46%; left: 4%; top: 78px; }
.showcase-panel { gap: 38px; }
.feature-tab { padding: 16px; font-size: .95rem; gap: 10px; }
.stage-feature-links a { font-size: .7rem; }
.page-hero { gap: 35px; }
.page-hero-copy h1 { font-size: clamp(2.6rem,4.7vw,4rem); }
}
@media (max-width:760px) {
.product-stage { width: 100%; border-radius: 24px; }
.stage-heading { padding: 20px 22px 0; font-size: .85rem; }
.stage-screens { height: clamp(310px,90vw,440px); margin-top: 12px; }
.stage-primary { width: 48%; left: 46%; top: 18px; }
.stage-secondary { width: 45%; left: 4%; top: 66px; }
.stage-screens .phone { padding: 4px; border-radius: 25px; }
.stage-screens .phone-image { border-radius: 21px; }
.stage-caption { padding: 18px 22px; min-height: 78px; font-size: .82rem; }
.stage-feature-links a { font-size: .68rem; padding: 13px 6px; min-height: 83px; }
.stage-feature-links .icon { width: 22px; height: 22px; }
.showcase-layout { margin-top: 28px; }
.feature-tabs { gap: 8px; margin-bottom: 24px; }
.feature-tab { padding: 14px 5px; flex-direction: column; gap: 8px; text-align: center; font-size: .75rem; border-radius: 12px; }
.feature-tab>.icon { display: none; }
.feature-symbol { width: 26px; height: 26px; }
.showcase-panel { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
[data-tabs]:not([data-tabs-ready]) .showcase-panel[hidden] { display: flex !important; }
.panel-copy { padding: 0; }
.panel-copy h3 { font-size: 2rem; }
.panel-copy p { font-size: 1rem; margin-top: 18px; }
.apple-section { padding-block: 55px; }
.apple-copy { padding-block: 0 34px; }
.integration-labels { margin-top: 20px; }
.page-hero { align-items: stretch; gap: 32px; }
}

/* Additional feature identities follow native semantic colors. */
.sessions { --feature:#b25000; --feature-ink:#8a3b00; }
.smart { --feature:var(--list); --feature-ink:var(--list); }
.ai { --feature:#3359cc; --feature-ink:#193ca6; }
.analytics { --feature:var(--brand); --feature-ink:var(--brand); }
:root[data-theme="dark"] .sessions { --feature:#ffb340; --feature-ink:#ffb340; }
:root[data-theme="dark"] .ai { --feature:#8c9aff; --feature-ink:#8c9aff; }
.nav-search { display:grid;place-items:center;min-width:44px;min-height:44px; }
.nav-search .icon { width:20px;height:20px; }
.nav-dropdown { max-height:min(70dvh,640px);overflow:auto;overscroll-behavior:contain; }
.more-features { padding-block:30px 100px; }
.more-feature-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px; }
.more-feature { display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;padding-block:32px;border-top:1px solid var(--line); }
.more-feature>.icon { color:var(--feature);width:30px;height:30px;margin-top:5px; }
.more-feature h2 { font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.2; }
.more-feature h2 a { text-decoration:none; }
.more-feature p { color:var(--muted);line-height:1.75;margin-top:18px; }
@media(max-width:760px) { .more-feature-list { grid-template-columns:minmax(0,1fr); } .more-features { padding-bottom:50px; } .nav-dropdown { max-height:none; } }