/* ==========================================================================
   Fold — site
   One system for every page, in light and dark (see [data-theme=dark]).
   The light theme: Daylight canvases for the moments that
   sell (hero, closing), white cards on a cool grey page for everything else,
   and one slate surface for privacy, the claim that most needs weight.
   Cyan and slate only, plus the app's own amber and red where the UI uses them.
   ========================================================================== */

:root {
    --page: #f3f6f8;
    --surface: #ffffff;
    --surface-2: #f8fafc;

    --ink: #0b1324;
    --ink-2: #475569;
    --ink-3: #64748b;
    --line: rgba(15, 23, 42, .08);
    --line-2: rgba(15, 23, 42, .12);

    --cyan: #06b6d4;
    --cyan-deep: #0891b2;
    --cyan-50: #ecfeff;
    --cyan-100: #cffafe;
    --amber: #f59e0b;
    --red: #ef4444;

    --radius-canvas: 32px;
    --radius-card: 24px;
    --radius-sm: 14px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 40px -24px rgba(8, 51, 68, .22);
    --shadow-float: 0 24px 48px -18px rgba(8, 51, 68, .28), 0 2px 6px rgba(8, 51, 68, .05);

    /* the ink button flips to a light one in the dark theme */
    --btn-bg: var(--ink);
    --btn-tx: #fff;
    --glass: rgba(255, 255, 255, .78);
    --glass-line: rgba(255, 255, 255, .95);
    --canvas:
        radial-gradient(60% 50% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(45% 60% at 12% 88%, rgba(103, 232, 249, .55) 0%, rgba(103, 232, 249, 0) 70%),
        radial-gradient(45% 60% at 88% 80%, rgba(56, 189, 248, .45) 0%, rgba(56, 189, 248, 0) 70%),
        linear-gradient(180deg, #f6fdff 0%, #dff7fc 48%, #a8e9f5 100%);
    --canvas-ring: rgba(8, 145, 178, .16);
    --canvas-glow: rgba(255, 255, 255, .45);
    color-scheme: light;

    --container: 1180px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* legacy names, so legal.css and contact.css read the light theme too */
    --bg: var(--page);
    --bg-secondary: var(--surface-2);
    --bg-card: var(--surface);
    --bg-card-hover: var(--surface-2);
    --text: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --border: var(--line);
    --border-light: var(--line-2);
    --teal: var(--cyan-deep);
    --teal-light: var(--cyan-50);
    --teal-glow: rgba(6, 182, 212, .25);
    --gradient-teal: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    background: var(--page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 3px; border-radius: 6px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 2000;
    padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* ---------- nav ---------- */
.nav {
    /* sits inside the hero frame (12px page gutter + 12px gap), tracking its 1440px cap */
    --nav-x: max(24px, calc((100vw - 1440px) / 2 + 24px));
    position: fixed; top: 22px; left: var(--nav-x); right: var(--nav-x); z-index: 1000;
    padding: 14px 24px;
    border-radius: 20px;
    transition: background .3s ease, box-shadow .3s ease, top .3s ease;
}
.nav.scrolled {
    top: 12px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 10px 30px -16px rgba(8, 51, 68, .3), 0 0 0 1px var(--line);
}
.nav-inner {
    max-width: var(--container); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo-img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 6px; }
.nav-link {
    padding: 8px 14px; border-radius: 10px;
    font-size: 14px; font-weight: 500; color: var(--ink-2);
    transition: color .2s ease, background .2s ease;
}
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: 12px;
    background: var(--btn-bg); color: var(--btn-tx);
    font-size: 14px; font-weight: 600;
    box-shadow: 0 8px 20px -10px rgba(11, 19, 36, .5);
    transition: transform .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); }

/* ---------- buttons ---------- */
.hero-btn, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 0 26px; border-radius: 14px;
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-btn svg, .hero-btn i, .btn svg { width: 18px; height: 18px; }
.hero-btn-dark { background: var(--btn-bg); color: var(--btn-tx); box-shadow: 0 14px 30px -12px rgba(11, 19, 36, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
.hero-btn-dark svg { margin-top: -2px; }
.hero-btn-dark:hover { transform: translateY(-1px); }
.hero-btn-light, .btn-light {
    background: rgba(255, 255, 255, .78); color: var(--ink);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 10px 24px -14px rgba(8, 51, 68, .3);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-btn-light:hover, .btn-light:hover { background: #fff; transform: translateY(-1px); }
.btn-light { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.btn-light:hover { background: var(--cyan-50); border-color: rgba(8, 145, 178, .25); }
.btn-cyan { background: var(--cyan); color: #04212a; box-shadow: 0 14px 30px -14px rgba(6, 182, 212, .8); }
.btn-cyan:hover { background: #22d3ee; transform: translateY(-1px); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cyan-deep); }
.link-arrow::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- daylight canvas (hero + closing) ---------- */
.hero { padding: 12px; }
.hero-canvas, .closing {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--radius-canvas);
    background: var(--canvas);
    box-shadow: 0 0 0 1px var(--glass-line) inset;
}
.hero-canvas { max-width: 1440px; margin: 0 auto; padding: 116px 24px 0; }
.hero-canvas::before, .closing::before {
    content: ''; position: absolute; left: 50%; z-index: -1;
    width: 1100px; height: 1100px; margin-left: -550px; border-radius: 50%;
    border: 1px solid var(--canvas-ring);
    background: radial-gradient(closest-side, var(--canvas-glow), transparent);
}
.hero-canvas::before { bottom: -700px; }

.hero-copy { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; text-align: center; }
.hero-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 14px 5px 5px; margin-bottom: 22px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-line);
    box-shadow: 0 6px 20px -8px rgba(8, 51, 68, .18);
    font-size: 13px; font-weight: 500; color: var(--ink-2);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-pill-tag { padding: 3px 9px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-tx); font-size: 12px; font-weight: 600; }
.hero-title { font-size: clamp(44px, 5.8vw, 78px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; margin-bottom: 20px; }
.hero-subtitle { max-width: 30em; margin: 0 auto 30px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-2); }
.hero-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-trust { margin-top: 16px; font-size: 13px; color: var(--ink-3); }

.hero-stage { position: relative; height: 420px; max-width: 1080px; margin: 36px auto 0; }
.hero-iphone {
    position: absolute; left: 50%; top: 0; z-index: 2;
    width: 300px; margin-left: -150px; padding: 11px; border-radius: 52px;
    background: linear-gradient(160deg, #2b3242 0%, #0b0f19 40%, #1a2030 100%);
    box-shadow: 0 50px 90px -30px rgba(8, 51, 68, .55), 0 0 0 1px rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.hero-iphone-screen { position: relative; overflow: hidden; height: 560px; border-radius: 42px; background: #111827; }
.hero-iphone-screen img { width: 100%; height: auto; margin-top: 46px; }
.hero-iphone-status {
    position: absolute; inset: 0 0 auto 0; z-index: 1; height: 46px; padding: 0 26px;
    display: flex; align-items: center; justify-content: space-between;
    background: #111827; color: #fff; font-size: 14px; font-weight: 600;
}
.hero-iphone-island { position: absolute; left: 50%; top: 10px; width: 92px; height: 27px; margin-left: -46px; border-radius: 20px; background: #000; }
.hero-iphone-icons { display: flex; gap: 4px; align-items: center; }
.hero-iphone-icons i { display: block; background: #fff; border-radius: 2px; }
.hero-iphone-icons i:nth-child(1) { width: 16px; height: 10px; clip-path: polygon(0 100%, 25% 100%, 25% 70%, 37% 70%, 37% 100%, 62% 100%, 62% 40%, 74% 40%, 74% 100%, 100% 100%, 100% 0, 88% 0, 88% 100%); }
.hero-iphone-icons i:nth-child(2) { width: 14px; height: 10px; border-radius: 10px 10px 2px 2px; }
.hero-iphone-icons i:nth-child(3) { width: 24px; height: 11px; border-radius: 3.5px; }

.float {
    position: absolute; z-index: 3;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px 14px 14px; border-radius: 20px;
    background: var(--glass); border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    text-align: left;
    transform: rotate(var(--r, 0deg));
    animation: floatIn .9s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: var(--d, .2s);
}
@keyframes floatIn {
    from { opacity: 0; transform: translateY(26px) rotate(0deg) scale(.96); }
    to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}
.float-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.float-sub { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.float-sub b { color: var(--ink); font-weight: 600; }
.float-kicker { font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.float-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; background: var(--cyan-50); color: var(--cyan-deep); }
.float-icon.amber { background: #fff7ed; color: #ea580c; }
.float-icon svg { width: 21px; height: 21px; }
.float { scale: var(--s, 1); }
.float-icon.fill { position: relative; overflow: hidden; }
.float-icon.fill::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--p, 0%); background: rgba(6, 182, 212, .2); }
.float-icon.fill svg { position: relative; }
.float img { width: 44px; height: 44px; flex: 0 0 auto; }
.float-check { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #22d3ee; }
.float-check svg { display: none; }
.float-habit { left: 5%;  top: 18px;  --r: -6deg; --d: .25s; }
.float-mood  { left: 15%; top: 150px; --r: 4deg;  --d: .4s; }
.float-event { right: 5%; top: 34px;  --r: 5deg;  --d: .32s; }
.float-next  { right: 14%; top: 162px; --r: -3deg; --d: .48s; }

/* ---------- sections ---------- */
.section { padding: 112px 0 0; scroll-margin-top: 72px; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head.left { margin: 0; text-align: left; }
.section-head h2, .privacy h2, .closing h2 {
    font-size: clamp(32px, 4vw, 50px); font-weight: 700; line-height: 1.06; letter-spacing: -0.04em;
}
.section-head p { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.section-head p a { color: var(--cyan-deep); font-weight: 600; }

.chip-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--cyan-50); color: var(--cyan-deep);
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .12);
}
.chip-icon svg { width: 20px; height: 20px; }

/* film */
.film-player {
    position: relative; overflow: hidden; aspect-ratio: 16 / 9;
    border-radius: var(--radius-card); background: #0b1324;
    box-shadow: 0 40px 80px -40px rgba(8, 51, 68, .5), 0 0 0 1px var(--line);
}
.film-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-play {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: linear-gradient(180deg, rgba(11, 19, 36, 0) 40%, rgba(11, 19, 36, .45) 100%);
    color: #fff; transition: opacity .3s ease;
}
.film-play-icon {
    display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); color: var(--ink);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5);
    transition: transform .25s ease;
}
.film-play-icon svg { width: 30px; height: 30px; margin-left: 4px; }
.film-play:hover .film-play-icon { transform: scale(1.06); }
.film-play-text { font-size: 15px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.film-player.is-playing .film-play { opacity: 0; pointer-events: none; }
.film-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.film-chapters button {
    height: 36px; padding: 0 14px; border-radius: 999px;
    background: var(--surface); box-shadow: 0 0 0 1px var(--line);
    font-size: 13px; font-weight: 500; color: var(--ink-2);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.film-chapters button:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.film-chapters button[aria-current] { background: var(--btn-bg); color: var(--btn-tx); box-shadow: none; }

/* features bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.bento-card {
    display: flex; flex-direction: column; gap: 28px; overflow: hidden;
    padding: 32px; border-radius: var(--radius-card);
    background: var(--surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
}
.bento-tasks   { grid-column: span 7; }
.bento-habits  { grid-column: span 5; }
.bento-events  { grid-column: span 5; }
.bento-journal { grid-column: span 7; }
.bento-text h3 { margin-top: 18px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.bento-text p { margin-top: 8px; max-width: 34em; color: var(--ink-2); line-height: 1.55; }

/* app panels — drawn the way the app actually looks: dark slate, cyan
   accents, its own tab strip. Each one rises out of its card's bottom edge
   like a phone screen, so a card never ends in empty space. */
.bento-card { position: relative; isolation: isolate; padding-bottom: 0; }
.bento-card::after {
    /* a soft cyan glow under the panel, so dark-on-white reads as a lit screen */
    content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -60px; height: 65%;
    background: radial-gradient(closest-side, rgba(103, 232, 249, .32), rgba(103, 232, 249, 0));
    pointer-events: none;
}
.app {
    margin-top: auto;
    padding: 14px 20px 24px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #151f33 0%, #0f172a 100%);
    box-shadow: 0 -24px 48px -28px rgba(8, 51, 68, .55), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .03);
    color: #e2e8f0;
    font-size: 14px;
}
.app-tabs {
    display: flex; justify-content: center; gap: 22px;
    padding: 6px 0 14px; margin-bottom: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
.app-tabs span.on { position: relative; color: #f8fafc; }
.app-tabs span.on::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #22d3ee; }
.app-t { font-size: 14px; font-weight: 500; color: #f1f5f9; line-height: 1.35; }
.app-t.big { font-size: 15px; }
.app-t em, .app-m em { font-style: normal; color: #22d3ee; }
.app-m { font-size: 12.5px; color: #94a3b8; line-height: 1.45; }
.app-m b { color: #f1f5f9; font-weight: 600; }
.app-card { padding: 12px 14px; border-radius: 14px; background: #1e293b; }
.app-card + .app-card { margin-top: 8px; }

/* tasks */
.app-add { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; color: #64748b; }
.app-add svg { width: 16px; height: 16px; }
.app-task { display: flex; align-items: center; gap: 12px; padding: 9px 6px; }
.app-task .app-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-task.sub { padding-left: 38px; }
.app-task.done .app-t { color: #64748b; text-decoration: line-through; }
.app-box { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; border: 2px solid #475569; }
.app-box.hi { border-color: #f87171; }
.app-ring { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #475569; color: #0f172a; }
.app-ring.on { background: #22d3ee; border-color: #22d3ee; }
.app-ring svg { width: 11px; height: 11px; stroke-width: 3.5; }
.app-chev { width: 16px; height: 16px; color: #64748b; }
.app-dot-hi { display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: 1px; border-radius: 50%; background: #f87171; }
.app-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; background: rgba(34, 211, 238, .12); color: #22d3ee; font-size: 11.5px; font-weight: 600; }
.app-chip svg { width: 11px; height: 11px; }
.app-time { display: inline-flex; align-items: center; gap: 4px; color: #64748b; font-size: 12px; white-space: nowrap; }
.app-time svg { width: 12px; height: 12px; }

/* habits */
/* the app's habit row: progress fills the icon from the bottom, no dot row */
.app-habit { display: flex; align-items: center; gap: 16px; padding: 10px 4px; }
.app-hicon { position: relative; overflow: hidden; }
.app-hicon::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--p, 0%); background: rgba(34, 211, 238, .25); }
.app-hicon svg { position: relative; }
.app-hbody { flex: 1; }
.app-sep { color: #475569; margin: 0 2px; }
.app-mult { font-size: 11px; color: #64748b; }
.app-bell { width: 12px; height: 12px; margin: 0 3px 0 1px; vertical-align: -1px; color: #64748b; }
.app-habit .app-m { white-space: nowrap; }
.app-hstreak { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; font-size: 12px; font-weight: 700; color: #fb923c; }
.app-hstreak img { width: 16px; height: 16px; }
.app-hicon, .app-eicon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: #1e293b; color: #22d3ee; }
.app-hicon svg, .app-eicon svg { width: 20px; height: 20px; }
.app-hbody { min-width: 0; }

/* events */
.app-tl-labels { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: #cbd5e1; }
.app-tl-labels.muted { font-weight: 500; color: #64748b; }
.app-tl-bar { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin: 12px 0 8px; }
.app-tl-bar i { height: 9px; border-radius: 2px; background: #334155; }
.app-tl-bar i.on { background: #22d3ee; }
.app-tl-bar i.now { position: relative; }
.app-tl-bar i.now::after { content: ''; position: absolute; left: 50%; top: -4px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: #ef4444; }
.app-tl-bar i.now::before { content: ''; position: absolute; left: 50%; top: -8px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #ef4444; }
.app-event { display: flex; align-items: center; gap: 12px; }
.app-eicon { width: 34px; height: 34px; background: transparent; }
.app-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; vertical-align: -4px; border-radius: 6px; }
.app-badge.purple { background: rgba(167, 139, 250, .18); color: #a78bfa; }
.app-badge svg { width: 11px; height: 11px; }

/* journal */
.app-feel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-moods { display: flex; gap: 6px; }
.app-moods img, .app-plus { width: 34px; height: 34px; padding: 5px; border-radius: 50%; background: #334155; }
.app-plus { display: grid; place-items: center; padding: 0; color: #22d3ee; }
.app-plus svg { width: 16px; height: 16px; }
.app-mood { display: flex; align-items: center; gap: 14px; }
.app-mface { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: #334155; }
.app-mface img { width: 32px; height: 32px; }
.app-body { margin-top: 8px; font-size: 13.5px; color: #94a3b8; line-height: 1.5; }
.app-tags { display: flex; gap: 6px; margin-top: 10px; }
.app-tags span { padding: 2px 8px; border-radius: 6px; background: rgba(34, 211, 238, .1); color: #22d3ee; font-size: 12px; font-weight: 500; }

/* how a day goes */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step {
    position: relative; padding: 30px 28px 32px; border-radius: var(--radius-card);
    background: var(--surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
}
.step-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--cyan-50); color: var(--cyan-deep); }
.step:nth-child(1) .step-icon { background: #fff7ed; color: #ea580c; }
.step:nth-child(3) .step-icon { background: #eef2ff; color: #4f46e5; }
.step-icon svg { width: 22px; height: 22px; }
.step-when { display: block; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--cyan-deep); }
.step h3 { margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.step p { margin-top: 8px; color: var(--ink-2); line-height: 1.55; }

/* extras */
.extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--radius-card); background: var(--line); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.extras li { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 28px; background: var(--surface); }
.extras h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.extras p { margin-top: 4px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* privacy: the one slate surface */
.privacy {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center;
    padding: 64px; border-radius: var(--radius-canvas);
    background: radial-gradient(70% 90% at 0% 0%, rgba(6, 182, 212, .22), rgba(6, 182, 212, 0) 60%), #0b1324;
    color: #fff;
}
.privacy-copy p { margin: 16px 0 24px; font-size: 18px; color: rgba(255, 255, 255, .7); line-height: 1.55; max-width: 26em; }
.privacy .link-arrow { color: #67e8f9; }
.privacy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.privacy-list li { padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.privacy-list svg { width: 22px; height: 22px; color: #67e8f9; }
.privacy-list h3 { margin-top: 14px; font-size: 16px; font-weight: 600; }
.privacy-list p { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .62); line-height: 1.5; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan {
    position: relative; display: flex; flex-direction: column;
    padding: 32px; border-radius: var(--radius-card);
    background: var(--surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
}
.plan h3 { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.plan-price { margin-top: 10px; font-size: 15px; color: var(--ink-3); }
.plan-price span { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); margin-right: 4px; }
.plan-note { margin-top: 2px; font-size: 13px; color: var(--cyan-deep); font-weight: 500; }
.plan ul { display: grid; gap: 12px; margin: 26px 0 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.plan li svg { width: 18px; height: 18px; color: var(--cyan-deep); flex: 0 0 auto; }
.plan li.no { color: var(--ink-3); }
.plan li.no svg { color: var(--ink-3); }
.plan .btn { margin-top: auto; width: 100%; }
.plan-featured { background: #0b1324; box-shadow: 0 30px 60px -30px rgba(11, 19, 36, .7); }
.plan-featured h3, .plan-featured .plan-price { color: rgba(255, 255, 255, .7); }
.plan-featured .plan-price span { color: #fff; }
.plan-featured .plan-note { color: #67e8f9; }
.plan-featured ul { border-color: rgba(255, 255, 255, .1); }
.plan-featured li { color: rgba(255, 255, 255, .85); }
.plan-featured li svg { color: #67e8f9; }
.plan-badge { position: absolute; top: 28px; right: 28px; padding: 4px 10px; border-radius: 999px; background: rgba(103, 232, 249, .14); color: #67e8f9; font-size: 12px; font-weight: 600; }

/* faq */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq { border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 26px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px;
    border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(45deg);
    transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details p { padding: 0 26px 22px; color: var(--ink-2); line-height: 1.6; max-width: 40em; }

/* closing canvas */
.closing { padding: 88px 24px 96px; text-align: center; }
.closing::before { top: 40%; }
.closing-mark { width: 56px; height: auto; margin: 0 auto 24px; filter: drop-shadow(0 12px 20px rgba(8, 145, 178, .3)); }
.closing p { margin: 14px auto 32px; max-width: 28em; font-size: 18px; color: var(--ink-2); }
.closing-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.soon-pill { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px; border-radius: 14px; background: rgba(255, 255, 255, .55); color: var(--ink-3); font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.soon-pill svg { width: 17px; height: 17px; }

/* footer — a framed slate canvas that bookends the daylight hero */
.footer { padding: 72px 12px 12px; }
.footer-canvas {
    position: relative; overflow: hidden; isolation: isolate;
    max-width: 1440px; margin: 0 auto;
    padding: 64px clamp(24px, 5vw, 72px) 0;
    border-radius: var(--radius-canvas);
    background:
        radial-gradient(50% 70% at 100% 0%, rgba(6, 182, 212, .18), rgba(6, 182, 212, 0) 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(56, 189, 248, .12), rgba(56, 189, 248, 0) 70%),
        #0b1324;
    color: rgba(255, 255, 255, .62);
}
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; }
.footer-logo { height: 34px; width: auto; }
.footer-brand p { margin: 18px 0 22px; max-width: 22em; font-size: 15px; line-height: 1.55; }
.footer-mail {
    display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 16px; border-radius: 12px;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    color: #fff; font-size: 14px; font-weight: 500;
    transition: background .2s ease;
}
.footer-mail:hover { background: rgba(103, 232, 249, .12); }
.footer-mail svg { width: 16px; height: 16px; color: #67e8f9; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #fff; }
.footer-col a, .footer-soon { width: fit-content; font-size: 15px; color: rgba(255, 255, 255, .62); transition: color .2s ease; }
.footer-col a:hover { color: #67e8f9; }
.footer-soon em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-style: normal; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .7); }

.footer-bottom {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-top: 64px; padding: 22px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
}
.footer-copy { margin-right: auto; }
.footer-social { display: flex; gap: 6px; }
.footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: rgba(255, 255, 255, .55); transition: color .2s ease, background .2s ease; }
.footer-social a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.footer-social svg { width: 16px; height: 16px; }
.footer-made { display: inline-flex; align-items: center; gap: 8px; }
.footer-symbol { height: 16px; width: auto; }
.footer-top-btn {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: #fff; color: var(--ink);
    transition: transform .2s ease;
}
.footer-top-btn:hover { transform: translateY(-2px); }
.footer-top-btn svg { width: 18px; height: 18px; }

.footer :focus-visible { outline-color: #67e8f9; }

@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .footer { padding: 56px 8px 8px; }
    .footer-canvas { padding-top: 44px; border-radius: 24px; }
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .footer-col:last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
    .footer-col:last-child h4 { width: 100%; }
    .footer-bottom { gap: 14px 16px; }
    .footer-copy { width: 100%; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .float-habit { left: 0; }
    .float-mood  { left: 3%; }
    .float-event { right: 0; }
    .float-next  { right: 3%; }
    .bento-tasks, .bento-habits, .bento-events, .bento-journal { grid-column: span 6; }
    .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .privacy { grid-template-columns: 1fr; gap: 36px; padding: 48px; }
    .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .nav { --nav-x: 16px; top: 16px; padding: 10px 14px; }
    .nav-links { display: none; }
    .logo-img { height: 26px; }
    .hero { padding: 8px; }
    .hero-canvas { padding: 96px 18px 0; border-radius: 24px; }
    .hero-pill { font-size: 12px; margin-bottom: 20px; }
    .hero-title { font-size: clamp(40px, 11.5vw, 54px); }
    .hero-cta-row { flex-direction: column; align-items: stretch; }
    .hero-stage { height: 340px; margin-top: 36px; }
    .hero-iphone { width: 236px; margin-left: -118px; padding: 9px; border-radius: 42px; }
    .hero-iphone-screen { border-radius: 34px; height: 460px; }
    .hero-iphone-status { height: 38px; padding: 0 18px; font-size: 12px; }
    .hero-iphone-screen img { margin-top: 38px; }
    .hero-iphone-island { width: 72px; height: 21px; margin-left: -36px; top: 8px; }
    .float { padding: 10px 12px 10px 10px; gap: 9px; border-radius: 16px; }
    .float-icon, .float img { width: 34px; height: 34px; border-radius: 10px; }
    .float-title { font-size: 13px; }
    .float-sub, .float-kicker { font-size: 11px; }
    .float-habit { left: -6px; top: 70px; }
    .float-event { right: -6px; top: 170px; }
    .float-mood, .float-next { display: none; }

    .section { padding-top: 80px; }
    .section-head { margin-bottom: 32px; }
    .section-head p { font-size: 16px; }
    .container { padding: 0 16px; }
    .bento { gap: 14px; }
    .bento-tasks, .bento-habits, .bento-events, .bento-journal { grid-column: 1 / -1; }
    .bento-card { padding: 24px; }
    .steps, .plans { grid-template-columns: 1fr; gap: 14px; }
    .extras { grid-template-columns: 1fr; }
    .extras li { flex-direction: row; padding: 20px; }
    .privacy { padding: 32px 22px; border-radius: 24px; }
    .privacy-list { grid-template-columns: 1fr; }
    .faq summary { padding: 18px 20px; font-size: 15px; }
    .faq details p { padding: 0 20px 18px; }
    .closing { padding: 64px 20px 72px; border-radius: 24px; }
    .closing-cta { flex-direction: column; align-items: stretch; }
    .closing-cta > * { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .float { animation: none; }
}

/* even line lengths on every heading and lead, no one-word last lines */
h1, h2, h3, .section-head p, .closing p, .privacy-copy p { text-wrap: balance; }

/* store buttons: the two-line badge shape people recognise, in the site's ink */
.store-btn { gap: 12px; padding: 0 22px 0 18px; }
.store-btn svg { width: 22px; height: 22px; margin-top: 0; }
.store-btn span { display: flex; flex-direction: column; align-items: flex-start; font-size: 17px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.store-btn small { font-size: 10.5px; font-weight: 500; letter-spacing: .01em; opacity: .75; }
.hero-film { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-weight: 600; color: var(--cyan-deep); }
.hero-film svg { width: 16px; height: 16px; }
.hero-film:hover { color: var(--ink); }
.faq details p a { color: var(--cyan-deep); font-weight: 600; }
@media (max-width: 768px) {
    .hero-cta-row, .closing-cta { flex-direction: row; justify-content: center; }
    .hero-cta-row .store-btn, .closing-cta .store-btn { flex: 1 1 0; max-width: 200px; padding: 0 14px; }
    .hero-film { display: flex; justify-content: center; margin: 8px 0 0; }
}


/* ---------- theme toggle ---------- */
.nav-right { display: flex; align-items: center; gap: 8px; }
.theme-toggle {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    color: var(--ink-2); transition: color .2s ease, background .2s ease;
}
.theme-toggle:hover { color: var(--ink); background: var(--glass); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon, [data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }
.logo-on-dark, [data-theme="dark"] .logo-on-light { display: none; }
[data-theme="dark"] .logo-on-dark { display: block; }

/* ==========================================================================
   Dark theme — the hero canvas at night. Same layout, same cyan; the
   surfaces step up from the page instead of sitting white on grey.
   ========================================================================== */
[data-theme="dark"] {
    --page: #070b14;
    --surface: #0f172a;
    --surface-2: #131c2e;

    --ink: #eef3f9;
    --ink-2: #a3b1c4;
    --ink-3: #7c8ba1;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);

    --cyan-deep: #22d3ee;
    --cyan-50: rgba(34, 211, 238, .10);
    --cyan-100: rgba(34, 211, 238, .18);

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -24px rgba(0, 0, 0, .7);
    --shadow-float: 0 24px 48px -18px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .2);

    --btn-bg: #f1f5f9;
    --btn-tx: #0b1324;
    --glass: rgba(15, 23, 42, .72);
    --glass-line: rgba(255, 255, 255, .09);
    --canvas:
        radial-gradient(60% 50% at 50% 0%, rgba(34, 211, 238, .16) 0%, rgba(34, 211, 238, 0) 70%),
        radial-gradient(45% 60% at 12% 88%, rgba(6, 182, 212, .20) 0%, rgba(6, 182, 212, 0) 70%),
        radial-gradient(45% 60% at 88% 80%, rgba(56, 189, 248, .14) 0%, rgba(56, 189, 248, 0) 70%),
        linear-gradient(180deg, #0a1120 0%, #081624 55%, #0a2433 100%);
    --canvas-ring: rgba(103, 232, 249, .16);
    --canvas-glow: rgba(34, 211, 238, .06);
    --teal-glow: rgba(34, 211, 238, .2);
    color-scheme: dark;
}
[data-theme="dark"] .nav.scrolled {
    background: rgba(10, 16, 30, .78);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 30px -16px rgba(0, 0, 0, .7), 0 0 0 1px var(--line);
}
[data-theme="dark"] .nav-link:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .hero-btn-dark { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }
[data-theme="dark"] .btn-light:hover { border-color: rgba(34, 211, 238, .3); }
[data-theme="dark"] .hero-iphone { box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08); }
[data-theme="dark"] .float-icon.amber,
[data-theme="dark"] .step:nth-child(1) .step-icon { background: rgba(251, 146, 60, .12); color: #fb923c; }
[data-theme="dark"] .step:nth-child(3) .step-icon { background: rgba(129, 140, 248, .14); color: #a5b4fc; }
[data-theme="dark"] .bento-card::after { background: radial-gradient(closest-side, rgba(34, 211, 238, .14), rgba(34, 211, 238, 0)); }
[data-theme="dark"] .app { box-shadow: 0 -24px 48px -28px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .05); }
[data-theme="dark"] .film-player { background: #070b14; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px var(--line); }
/* the slate surfaces lift off a slate page with an edge rather than a shade */
[data-theme="dark"] .privacy,
[data-theme="dark"] .plan-featured { background-color: #0d1628; box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .14); }
[data-theme="dark"] .footer-canvas { background-color: #0b1324; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .soon-pill { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); }
[data-theme="dark"] .closing-mark { filter: drop-shadow(0 12px 24px rgba(34, 211, 238, .25)); }
[data-theme="dark"] .hero-btn-light { background: var(--glass); border-color: var(--glass-line); color: var(--ink); }
[data-theme="dark"] .hero-btn-light:hover { background: var(--surface-2); }
/* the light cut has a daylight poster: the overlay and label go ink */
[data-theme="light"] .film-play { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .35) 100%); }
[data-theme="light"] .film-play-icon { background: var(--ink); color: #fff; box-shadow: 0 20px 40px -12px rgba(8, 51, 68, .5); }
[data-theme="light"] .film-play-text { color: var(--ink); text-shadow: none; }

/* ==========================================================================
   Micro-interactions
   Small, quick, and only where something is being touched or arriving.
   Everything here is off under prefers-reduced-motion (end of file).
   ========================================================================== */
:root { --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.4, .64, 1); }

/* press: every button and button-like link gives a little under the finger */
.hero-btn, .btn, .nav-cta, .theme-toggle, .film-chapters button, .footer-top-btn, .footer-mail, .hero-pill {
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease, color .2s ease;
}
.hero-btn:active, .btn:active, .nav-cta:active, .film-chapters button:active, .footer-top-btn:active, .hero-pill:active { transform: scale(.97); transition-duration: .08s; }
.theme-toggle:active { transform: scale(.9); }
.hero-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(8, 51, 68, .25); }
.hero-pill-tag { transition: background .2s ease; }

/* the theme toggle turns over rather than swapping */
.theme-toggle svg { transition: transform .5s var(--spring), opacity .2s ease; }
.theme-toggle:hover .sun { transform: rotate(45deg); }
.theme-toggle:hover .moon { transform: rotate(-18deg); }
/* the whole page eases between themes instead of snapping */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease !important;
}

/* nav: the section on screen is marked */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--cyan); opacity: 0; transform: scale(0);
    transition: opacity .25s ease, transform .35s var(--spring);
}
.nav-link[aria-current="true"] { color: var(--ink); }
.nav-link[aria-current="true"]::after { opacity: 1; transform: scale(1); }

/* store buttons: the icon nudges up on hover */
.store-btn svg { transition: transform .3s var(--spring); }
.store-btn:hover svg { transform: translateY(-2px) scale(1.06); }

/* cards lift on a pointer that can hover; the app panel inside rises with it */
@media (hover: hover) {
    .bento-card, .step, .plan, .privacy-list li, .extras li {
        transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s ease;
    }
    .bento-card:hover, .step:hover, .plan:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 28px 56px -28px rgba(8, 51, 68, .32), 0 0 0 1px var(--line-2); }
    .plan-featured:hover { box-shadow: 0 40px 70px -30px rgba(11, 19, 36, .75); }
    .bento-card .app { transition: transform .5s var(--ease); }
    .bento-card:hover .app { transform: translateY(-6px); }
    .extras li:hover { background: var(--surface-2); }
    .extras li:hover .chip-icon, .bento-card:hover .chip-icon, .step:hover .step-icon { transform: rotate(-6deg) scale(1.06); }
    .privacy-list li:hover { background: rgba(255, 255, 255, .08); }
    .footer-social a:hover { transform: translateY(-2px); }
    .footer-top-btn:hover svg { animation: nudgeUp .6s var(--ease); }
}
.chip-icon, .step-icon { transition: transform .4s var(--spring); }
.footer-social a { transition: color .2s ease, background .2s ease, transform .25s var(--ease); }
@keyframes nudgeUp { 40% { transform: translateY(-4px); } }

/* the hero cards breathe, each on its own beat */
.float { animation: floatIn .9s var(--ease) both, bob 6s ease-in-out infinite; animation-delay: var(--d, .2s), calc(var(--d, .2s) + 1s); }
.float-mood { animation-duration: .9s, 7s; }
.float-event { animation-duration: .9s, 6.5s; }
@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-7px) rotate(var(--r, 0deg)); }
}

/* arriving on scroll: a short rise, staggered inside a group.
   Only with JS (html.js), so nothing is ever hidden without the script. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--stagger, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* app panels come alive as they arrive: habit icons fill, the timeline's
   blocks light up left to right, the ticked task pops */
.app-hicon::before { transition: height 1.1s var(--ease) .25s; }
.js .bento-card:not(.in) .app-hicon::before { height: 0; }
.app-tl-bar i.on { transition: opacity .3s ease, transform .4s var(--spring); }
.js .bento-card:not(.in) .app-tl-bar i.on { opacity: .15; transform: scaleY(.4); }
.app-tl-bar i.on:nth-child(n+8) { transition-delay: .35s; }
.app-tl-bar i.on:nth-child(n+16) { transition-delay: .5s; }
.app-tl-bar i.now::before { animation: nowPulse 2.4s ease-out infinite; }
@keyframes nowPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } }
.app-ring.on { transition: transform .45s var(--spring) .4s; }
.js .bento-card:not(.in) .app-ring.on { transform: scale(.4); }
.app-moods img { transition: transform .3s var(--spring); }
@media (hover: hover) { .app-moods img:hover { transform: scale(1.18) rotate(-6deg); } }

/* film: the play control sits in the corner, off the picture's own type */
.film-play {
    flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 14px;
    padding: clamp(14px, 3vw, 28px);
}
.film-play-icon { width: 64px; height: 64px; position: relative; }
.film-play-icon::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid currentColor; opacity: 0; animation: ring 2.6s var(--ease) infinite 1s;
}
.film-play-icon svg { width: 24px; height: 24px; margin-left: 3px; }
@keyframes ring { 0% { opacity: .5; transform: scale(.9); } 80%, 100% { opacity: 0; transform: scale(1.35); } }
.film-play-text { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 8px; line-height: 1.25; text-align: left; }
.film-play-text small { font-size: 12px; font-weight: 500; opacity: .75; }
.film-play:hover .film-play-icon { transform: scale(1.08); }
.film-play:active .film-play-icon { transform: scale(.95); }
.film-player .film-video { transition: transform .8s var(--ease), filter .4s ease; }
@media (hover: hover) { .film-player:not(.is-playing):hover .film-video { transform: scale(1.015); } }
.film-chapters button { transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .25s var(--ease); }
@media (hover: hover) { .film-chapters button:hover { transform: translateY(-1px); } }

/* faq: the answer arrives instead of appearing */
.faq summary { transition: color .2s ease, background .2s ease; border-radius: var(--radius-card); }
@media (hover: hover) { .faq summary:hover { color: var(--cyan-deep); } }
.faq details[open] p { animation: faqIn .45s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
.faq summary::after { transition: transform .35s var(--spring), margin .35s var(--spring); }

/* the closing mark's lower fold is the brand slate — light it in the dark */
[data-theme="dark"] .closing-mark .mark-lo { fill: #e2e8f0; }

/* ==========================================================================
   Device and orientation fixes, found by walking 360 → 1920 in both
   orientations. Widest first.
   ========================================================================== */
.plan-price { white-space: nowrap; }
.store-btn span { white-space: nowrap; }
.app-hbody { min-width: 0; }
.app-habit .app-m { overflow: hidden; text-overflow: ellipsis; }

/* tablets: three price cards are too narrow below ~1000, so stack them */
@media (max-width: 1000px) {
    .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .plan-featured { order: -1; }
    .faq-wrap .section-head.left { text-align: center; margin: 0 auto; }
}
/* tablet portrait: the bento's panels hang from the text, not the card floor,
   so a short neighbour does not open a gap in the middle of a card */
@media (min-width: 769px) and (max-width: 1024px) {
    .bento-card .app { margin-top: 8px; }
    .steps { gap: 14px; }
    .step { padding: 26px 22px 28px; }
}
/* phones */
@media (max-width: 768px) {
    .section { padding-top: 72px; }
    .section-head { margin-bottom: 28px; }
    /* chapters scroll sideways instead of wrapping into three rows */
    .film-chapters {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity;
        margin: 16px -16px 0; padding: 2px 16px 6px; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
                mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
    }
    .film-chapters::-webkit-scrollbar { display: none; }
    .film-chapters li { flex: 0 0 auto; scroll-snap-align: start; }
    .film-play-icon { width: 52px; height: 52px; }
    .film-play-icon svg { width: 20px; height: 20px; }
    .film-play-text { font-size: 14px; padding-bottom: 4px; }
    /* hero cards: smaller, and pinned to the phone's edges, off its content */
    .float { --s: .88; }
    .float-habit { left: -4px; top: 214px; }
    .float-event { right: -4px; top: 96px; }
    .bento-card .app { margin-left: -6px; margin-right: -6px; padding-left: 14px; padding-right: 14px; }
    .app-moods { gap: 4px; }
    .app-moods img, .app-plus { width: 30px; height: 30px; }
    .plan { padding: 26px; }
    .faq-wrap .section-head.left { text-align: left; margin: 0; }
}
@media (max-width: 420px) {
    .store-btn { padding: 0 12px 0 12px; gap: 9px; height: 52px; }
    .store-btn span { font-size: 15px; }
    .store-btn small { font-size: 9.5px; }
    .store-btn svg { width: 20px; height: 20px; }
    .hero-title { font-size: clamp(36px, 10.6vw, 46px); }
    .float-sub { display: none; }
    .float { padding: 8px 12px 8px 8px; }
    .app-time { display: none; }
    .app-habit .app-rem, .app-habit .app-sep { display: none; }
    .app-mult { margin-left: 4px; }
    .app-habit { gap: 12px; }
}
/* phones on their side: the hero should not need a scroll to reach its buttons */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-canvas { padding-top: 84px; }
    .hero-pill { margin-bottom: 12px; }
    .hero-title { font-size: clamp(34px, 6vw, 48px); margin-bottom: 12px; }
    .hero-subtitle { margin-bottom: 18px; }
    .hero-cta-row { flex-direction: row; }
    .section { padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .float { animation: none !important; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .film-play-icon::after, .app-tl-bar i.now::before { animation: none; }
    .faq details[open] p { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}
/* white discs keep a dark glyph in both themes (--ink flips light in the dark) */
.film-play-icon, .footer-top-btn { color: #0b1324; }
[data-theme="light"] .film-play-icon { color: #fff; }

/* ---------- the connected strip: each card shows its move happening ----------
   A small app panel on top plays the feature once, when the card arrives
   (.in from the reveal observer); the copy sits underneath. Without JS, or
   with reduced motion, every panel simply shows its finished state. */
.connect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cv-card {
    display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card);
    background: var(--surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
}
.cv-vis {
    position: relative; height: 196px; margin: 12px 12px 0; padding: 18px 18px 0;
    border-radius: 18px; overflow: hidden;
}
.cv-text { padding: 22px 26px 28px; }
.cv-num { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--cyan-deep); }
.cv-text h3 { margin-top: 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.cv-text p { margin-top: 8px; color: var(--ink-2); line-height: 1.55; }
@media (hover: hover) {
    .cv-card { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
    .cv-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 28px 56px -28px rgba(8, 51, 68, .32), 0 0 0 1px var(--line-2); }
}

/* 01 · long-press menu → Add to Calendar → a linked event joins the Events list */
.cv-evlist { display: grid; gap: 6px; }
.cv-evrow { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.cv-evicon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: #1e293b; color: #22d3ee; }
.cv-evicon svg { width: 20px; height: 20px; }
.cv-evt { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #e2e8f0; line-height: 1.2; }
.cv-evm { margin-top: 5px; font-size: 12px; font-weight: 500; color: #94a3b8; }
.cv-lnk { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: rgba(34, 211, 238, .2); color: #22d3ee; }
.cv-lnk svg { width: 10px; height: 10px; }
.cv-evnew { border-radius: 12px; }
.cv-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 0 10px;
    border-radius: 18px 18px 0 0; background: #1e293b; box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, .7);
    transform: translateY(105%);
}
.cv-grab { display: block; width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: #475569; }
.cv-sheet-t { padding: 4px 20px 8px; border-bottom: 1px solid rgba(51, 65, 85, .5); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.cv-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 14px; font-weight: 500; color: #e2e8f0; }
.cv-item svg { width: 17px; height: 17px; color: #22d3ee; }
.cv-press { position: absolute; left: 28px; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid #67e8f9; opacity: 0; }
/* before it plays, the new event isn't there yet */
.js .cv-slot-card:not(.in) .cv-evnew { opacity: 0; }
.cv-slot-card.in .cv-sheet { animation: cvSheet 1.9s var(--ease) .3s both; }
.cv-slot-card.in .cv-item-hit { animation: cvHit .5s ease 1.0s both; }
.cv-slot-card.in .cv-press { animation: cvPress .6s ease-out 1.0s both; }
.cv-slot-card.in .cv-evnew { animation: cvNew .9s var(--spring) 1.95s both; }
@keyframes cvSheet {
    0% { transform: translateY(105%); } 22% { transform: translateY(0); }
    70% { transform: translateY(0); } 100% { transform: translateY(105%); }
}
@keyframes cvHit { 30% { background: rgba(148, 163, 184, .14); } }
@keyframes cvPress { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes cvNew {
    0% { opacity: 0; transform: translateY(8px) scale(.96); background: rgba(34, 211, 238, 0); }
    40% { opacity: 1; transform: none; background: rgba(34, 211, 238, .14); }
    100% { opacity: 1; transform: none; background: rgba(34, 211, 238, 0); }
}

/* 02 · hours light up and the free count runs down */
.cv-free { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 22px; }
.cv-free-n { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #f8fafc; font-variant-numeric: tabular-nums; }
.cv-free-l { font-size: 14px; color: #94a3b8; }
.cv-bar { margin: 0 0 10px; }
.cv-bar i { height: 22px; border-radius: 4px; }
.cv-bar i.on { transition: opacity .3s ease, transform .45s var(--spring); }
.js .cv-free-card:not(.in) .cv-bar i.on { opacity: .12; transform: scaleY(.35); }
.cv-bar i.on:nth-child(8)  { transition-delay: .30s; } .cv-bar i.on:nth-child(9)  { transition-delay: .38s; }
.cv-bar i.on:nth-child(10) { transition-delay: .46s; } .cv-bar i.on:nth-child(12) { transition-delay: .60s; }
.cv-bar i.on:nth-child(13) { transition-delay: .68s; } .cv-bar i.on:nth-child(17) { transition-delay: .86s; }
.cv-bar i.on:nth-child(18) { transition-delay: .94s; } .cv-bar i.on:nth-child(20) { transition-delay: 1.08s; }
.cv-bar i.on:nth-child(21) { transition-delay: 1.16s; }

/* 03 · the task walks from Monday to today, the badge counting */
.cv-days { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 0 26px; padding-bottom: 14px; }
.cv-days span { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.cv-days span.today { color: #f8fafc; }
.cv-days::after { content: ''; position: absolute; left: 16.6%; right: 16.6%; bottom: 3px; height: 2px; border-radius: 2px; background: #1e293b; }
.cv-dot { position: absolute; z-index: 1; bottom: 0; left: calc(83.3% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.cv-roll { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-radius: 12px; background: #1e293b; }
.cv-roll .app-t { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-roll .app-chip b { font-weight: 600; }
.js .cv-roll-card:not(.in) .cv-dot { left: calc(16.6% - 4px); }
.cv-roll-card.in .cv-dot { animation: cvWalk 1.6s var(--ease) .3s both; }
.cv-roll + .cv-roll { margin-top: 8px; }
.cv-roll-quiet { opacity: .55; }
.cv-roll .app-chip { margin-left: auto; }
/* the badge appears when the task first rolls (Tue), and bumps again at today */
.js .cv-roll-card:not(.in) .cv-roll .app-chip { opacity: 0; }
.cv-roll-card.in .cv-roll .app-chip { animation: cvIn .4s var(--spring) .75s both, cvBump2 .4s var(--spring) 1.75s; }
@keyframes cvIn { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.15); } to { opacity: 1; transform: none; } }
@keyframes cvWalk {
    0%   { left: calc(16.6% - 4px); }
    40%  { left: calc(50% - 4px); }
    55%  { left: calc(50% - 4px); }
    100% { left: calc(83.3% - 4px); }
}
@keyframes cvBump2 { 50% { transform: scale(1.18); } }

/* the light theme keeps these panels dark, as the app is; the dark theme lifts them */
[data-theme="dark"] .cv-vis { background: linear-gradient(180deg, #111b2e 0%, #0d1526 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

@media (max-width: 900px) {
    .connect { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .cv-sheet, .cv-press { display: none; }
    .js .cv-card .cv-evnew, .js .cv-card .cv-bar i.on { opacity: 1 !important; transform: none !important; }
    .cv-dot { left: calc(83.3% - 4px) !important; animation: none !important; }
    .js .cv-roll-card .cv-roll .app-chip { opacity: 1 !important; animation: none !important; }
}

.bento-eyebrow { display: block; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-deep); }
.bento-eyebrow + h3 { margin-top: 6px; }

.plans-note { margin-top: 22px; text-align: center; font-size: 14px; color: var(--ink-3); }