/* W47-SITE (2026-10-30): the public homepage's styles. The look is the app's Energy Pulse welcome screen (plum
   #211827, cream #fff5ee, peach #ffac83, Fraunces headlines) and its streak "sizzle"; the fonts are the app's own
   OFL fonts, served from this site (no third-party requests). */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin.woff") format("woff"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bg: #211827;
  --bg-deep: #1a1320;
  --surface: #2a1f2f;
  --surface-2: #352434;
  --line: #4a3646;
  --ink: #fff5ee;
  --ink-2: #c8bdc9;
  --ink-3: #a99bad;
  --peach: #ffac83;
  --peach-hi: #ffc2a3;
  --ember: #f08a4b;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --grotesk: "Space Grotesk", "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--peach); text-underline-offset: 3px; }
a:hover { color: var(--peach-hi); }
:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; border-radius: 8px; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { left: 16px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(33, 24, 39, .84); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(74, 54, 70, .55); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 19px/1 var(--grotesk); letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand svg { width: 34px; height: 34px; flex: none; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav a:hover { color: var(--ink); }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 15px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 18px; height: 18px; }
.menu nav { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7); }
.menu nav a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu nav a:hover { background: var(--surface-2); }

/* Buttons: cream and outlined, as on the app's welcome screen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 600 16px/1.1 var(--body); text-decoration: none; white-space: nowrap; transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--ink); color: var(--bg); box-shadow: 0 10px 30px -12px rgba(255, 172, 131, .55); }
.btn-primary:hover { color: var(--bg); background: #ffffff; transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(255, 172, 131, .75); }
.btn-ghost { background: var(--surface-2); color: var(--ink); border: 1px solid #5b4458; }
.btn-ghost:hover { color: var(--ink); border-color: var(--peach); transform: translateY(-1px); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn small { display: block; font: 500 11px/1.1 var(--body); letter-spacing: .02em; opacity: .75; }
.btn .stack-label { display: grid; text-align: left; gap: 3px; }

/* Type */
.eyebrow { display: inline-block; font: 600 13px/1.2 var(--grotesk); letter-spacing: .14em; text-transform: uppercase; color: var(--peach); }
h1, h2 { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; letter-spacing: -.02em; }
h1 { font-size: clamp(50px, 7.2vw, 96px); line-height: .98; margin: 18px 0 24px; }
h1 em, h2 em { font-style: normal; color: var(--peach); }
h2 { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.04; margin: 14px 0 18px; }
h3 { font-family: var(--grotesk); font-weight: 600; letter-spacing: -.015em; }
.lede { font-size: clamp(18px, 1.55vw, 21px); color: var(--ink-2); max-width: 33em; }

/* Hero */
.hero { position: relative; overflow: clip; padding: 76px 0 120px; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.waves { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(120% 90% at 70% 50%, #000 35%, transparent 80%); mask-image: radial-gradient(120% 90% at 70% 50%, #000 35%, transparent 80%); }
.waves svg { width: 100%; height: 100%; }
.waves path { fill: none; stroke: var(--peach); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.waves .w600 { animation: drift600 22s linear infinite; }
.waves .w800 { animation: drift800 31s linear infinite; }
@keyframes drift600 { to { transform: translateX(-600px); } }
@keyframes drift800 { to { transform: translateX(-800px); } }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fine { font-size: 14px; color: var(--ink-3); margin-top: 18px; }
.fine b { color: var(--ink-2); font-weight: 600; }

/* Device frames around real app screenshots */
.phone { position: relative; background: #0e0a11; border-radius: clamp(16px, 2.6vw, 34px); padding: clamp(5px, .8vw, 10px); box-shadow: 0 0 0 1px rgba(255, 245, 238, .09), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 140px -40px rgba(255, 172, 131, .28); }
.phone img { width: 100%; border-radius: clamp(12px, 2vw, 26px); background: #ecf1f5; }
.device-stack { position: relative; padding: 0 0 14% 9%; }
.device-stack .portrait { position: absolute; left: 0; bottom: 0; width: 31%; transform: rotate(-4deg); }
.device-stack .landscape { transform: rotate(1.5deg); }

/* Numbers */
.stats { background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats li { padding: 30px 24px; border-left: 1px solid var(--line); }
.stats li:first-child { border-left: 0; }
.stats b { display: block; font: 600 clamp(36px, 4.2vw, 52px)/1 var(--grotesk); letter-spacing: -.03em; color: var(--ink); margin-bottom: 8px; }
.stats b em { font-style: normal; color: var(--peach); }
.stats span { color: var(--ink-2); font-size: 15px; }

/* Sections */
.section { padding: 120px 0; position: relative; }
.section.alt { background: var(--bg-deep); }
.section-head { max-width: 760px; margin-bottom: 24px; }
.section-head p { color: var(--ink-2); font-size: 19px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; margin-top: 110px; }
.feature.flip .feature-media { order: -1; }
.feature h3 { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.12; margin: 12px 0 16px; }
.feature p { color: var(--ink-2); font-size: 18px; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 172, 131, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffac83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.feature-media { position: relative; }
.feature-media::before { content: ""; position: absolute; inset: 8% 4%; background: radial-gradient(closest-side, rgba(255, 172, 131, .22), transparent); filter: blur(30px); z-index: -1; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; max-width: 560px; margin: 0 auto; }
.pair .phone:last-child { transform: translateY(12%); }
.solo { max-width: 300px; margin: 0 auto; }

.routine { list-style: none; margin: 110px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.routine li { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px; }
.routine svg { width: 30px; height: 30px; stroke: var(--peach); }
.routine h3 { font-size: 19px; line-height: 1.25; margin: 16px 0 8px; }
.routine p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* Topics */
.topic-groups { display: grid; gap: 14px; margin-top: 56px; }
.group { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px 26px; }
.group h3 { font-size: 21px; margin: 4px 0 2px; }
.group .meta { color: var(--ink-3); font-size: 14px; margin: 0; }
.group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.group li { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 245, 238, .04); border: 1px solid rgba(91, 68, 88, .7); font-weight: 500; white-space: nowrap; }
.group li span { color: var(--peach); font: 600 13px/1.2 var(--grotesk); }
.topics-note { color: var(--ink-3); font-size: 15px; margin-top: 22px; }

/* Pricing */
.free { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 56px; padding: 32px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(120deg, rgba(255, 172, 131, .1), rgba(255, 172, 131, 0) 55%), var(--surface); }
.free h3 { font-size: 30px; margin: 10px 0 8px; }
.free p { color: var(--ink-2); margin: 0; }
.plans-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 48px 0 18px; }
.plans-head h3 { font-size: 24px; margin: 0; }
.plans-head p { color: var(--ink-2); margin: 0; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan { display: flex; flex-direction: column; padding: 26px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.plan.early { border-color: rgba(255, 172, 131, .7); background: linear-gradient(180deg, rgba(255, 172, 131, .12), rgba(255, 172, 131, 0) 60%), var(--surface); }
.plan h4 { font: 600 18px/1.2 var(--grotesk); margin: 0; }
.plan .price { font: 600 44px/1 var(--grotesk); letter-spacing: -.03em; margin: 20px 0 4px; }
.plan .per { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; }
.plan p { color: var(--ink-2); font-size: 15px; margin: 0 0 .6em; }
.tag { align-self: flex-start; display: inline-block; margin-bottom: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 172, 131, .16); color: var(--peach); font: 600 12px/1 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; }
.tag.quiet { background: rgba(255, 245, 238, .07); color: var(--ink-2); }
.plans-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.small-print { color: var(--ink-3); font-size: 14px; max-width: 70em; margin-top: 22px; }

/* FAQ */
.faq { max-width: 860px; margin: 48px auto 0; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.faq details[open] { border-color: #6a4f66; }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; font: 600 18px/1.35 var(--grotesk); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 172, 131, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffac83' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 22px 20px; color: var(--ink-2); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Closing band with the streak sizzle */
.closing { position: relative; overflow: clip; border-radius: 32px; border: 1px solid var(--line); background: radial-gradient(90% 140% at 100% 50%, rgba(240, 138, 75, .32), transparent 60%), var(--surface); padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; }
.closing h2 { margin: 0 0 10px; }
.closing p { color: var(--ink-2); font-size: 19px; margin: 0; }
.closing .cta-row { margin-top: 26px; }
.big-mark { width: clamp(96px, 12vw, 150px); height: auto; }
/* A-R06 (wave 3, G4d css_only, RED row 6): the sizzle is CSS only, with no script. The page holds eight empty <i>
   layers; each paints its share of one 12 x 8 tile of 20 px squares (the old grid's 27 px pitch from a 7 px inset,
   the cells split at random once, with a fixed seed) and glows on its own clock,
   so the field twinkles in eight groups instead of 260 separate script-made squares. */
.sizzle { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 95%); mask-image: linear-gradient(90deg, transparent 30%, #000 95%); }
.sizzle i { position: absolute; inset: 0; background: 0 0 / 324px 216px repeat; opacity: .1; animation: sizzle 3.4s ease-in-out infinite; }
.sizzle i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23f08a4b'%3E%3Crect x='34' y='7' width='20' height='20' rx='3'/%3E%3Crect x='142' y='7' width='20' height='20' rx='3'/%3E%3Crect x='196' y='7' width='20' height='20' rx='3'/%3E%3Crect x='277' y='7' width='20' height='20' rx='3'/%3E%3Crect x='61' y='34' width='20' height='20' rx='3'/%3E%3Crect x='88' y='34' width='20' height='20' rx='3'/%3E%3Crect x='115' y='34' width='20' height='20' rx='3'/%3E%3Crect x='34' y='115' width='20' height='20' rx='3'/%3E%3Crect x='115' y='115' width='20' height='20' rx='3'/%3E%3Crect x='142' y='115' width='20' height='20' rx='3'/%3E%3Crect x='223' y='142' width='20' height='20' rx='3'/%3E%3Crect x='61' y='169' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 2.6s; animation-delay: -0.4s; }
.sizzle i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23f08a4b'%3E%3Crect x='169' y='7' width='20' height='20' rx='3'/%3E%3Crect x='34' y='34' width='20' height='20' rx='3'/%3E%3Crect x='169' y='34' width='20' height='20' rx='3'/%3E%3Crect x='34' y='88' width='20' height='20' rx='3'/%3E%3Crect x='196' y='115' width='20' height='20' rx='3'/%3E%3Crect x='34' y='142' width='20' height='20' rx='3'/%3E%3Crect x='250' y='142' width='20' height='20' rx='3'/%3E%3Crect x='115' y='196' width='20' height='20' rx='3'/%3E%3Crect x='169' y='196' width='20' height='20' rx='3'/%3E%3Crect x='304' y='196' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 3.9s; animation-delay: -2.1s; }
.sizzle i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23f08a4b'%3E%3Crect x='88' y='7' width='20' height='20' rx='3'/%3E%3Crect x='223' y='7' width='20' height='20' rx='3'/%3E%3Crect x='250' y='7' width='20' height='20' rx='3'/%3E%3Crect x='277' y='34' width='20' height='20' rx='3'/%3E%3Crect x='34' y='61' width='20' height='20' rx='3'/%3E%3Crect x='169' y='61' width='20' height='20' rx='3'/%3E%3Crect x='196' y='88' width='20' height='20' rx='3'/%3E%3Crect x='277' y='115' width='20' height='20' rx='3'/%3E%3Crect x='169' y='142' width='20' height='20' rx='3'/%3E%3Crect x='169' y='169' width='20' height='20' rx='3'/%3E%3Crect x='34' y='196' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 3.1s; animation-delay: -1.3s; }
.sizzle i:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23f08a4b'%3E%3Crect x='304' y='7' width='20' height='20' rx='3'/%3E%3Crect x='115' y='61' width='20' height='20' rx='3'/%3E%3Crect x='88' y='88' width='20' height='20' rx='3'/%3E%3Crect x='142' y='88' width='20' height='20' rx='3'/%3E%3Crect x='250' y='88' width='20' height='20' rx='3'/%3E%3Crect x='88' y='115' width='20' height='20' rx='3'/%3E%3Crect x='169' y='115' width='20' height='20' rx='3'/%3E%3Crect x='196' y='169' width='20' height='20' rx='3'/%3E%3Crect x='223' y='169' width='20' height='20' rx='3'/%3E%3Crect x='277' y='169' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 4.7s; animation-delay: -3.2s; }
.sizzle i:nth-child(5) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23ffac83'%3E%3Crect x='7' y='7' width='20' height='20' rx='3'/%3E%3Crect x='196' y='34' width='20' height='20' rx='3'/%3E%3Crect x='304' y='34' width='20' height='20' rx='3'/%3E%3Crect x='7' y='61' width='20' height='20' rx='3'/%3E%3Crect x='250' y='61' width='20' height='20' rx='3'/%3E%3Crect x='277' y='61' width='20' height='20' rx='3'/%3E%3Crect x='115' y='88' width='20' height='20' rx='3'/%3E%3Crect x='169' y='88' width='20' height='20' rx='3'/%3E%3Crect x='7' y='115' width='20' height='20' rx='3'/%3E%3Crect x='304' y='115' width='20' height='20' rx='3'/%3E%3Crect x='88' y='142' width='20' height='20' rx='3'/%3E%3Crect x='277' y='142' width='20' height='20' rx='3'/%3E%3Crect x='7' y='169' width='20' height='20' rx='3'/%3E%3Crect x='88' y='169' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 2.9s; animation-delay: -2.7s; }
.sizzle i:nth-child(6) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23ffac83'%3E%3Crect x='61' y='7' width='20' height='20' rx='3'/%3E%3Crect x='250' y='34' width='20' height='20' rx='3'/%3E%3Crect x='88' y='61' width='20' height='20' rx='3'/%3E%3Crect x='196' y='61' width='20' height='20' rx='3'/%3E%3Crect x='61' y='88' width='20' height='20' rx='3'/%3E%3Crect x='277' y='88' width='20' height='20' rx='3'/%3E%3Crect x='61' y='115' width='20' height='20' rx='3'/%3E%3Crect x='115' y='142' width='20' height='20' rx='3'/%3E%3Crect x='115' y='169' width='20' height='20' rx='3'/%3E%3Crect x='88' y='196' width='20' height='20' rx='3'/%3E%3Crect x='142' y='196' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 4.2s; animation-delay: -0.9s; }
.sizzle i:nth-child(7) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23ffac83'%3E%3Crect x='7' y='34' width='20' height='20' rx='3'/%3E%3Crect x='223' y='34' width='20' height='20' rx='3'/%3E%3Crect x='304' y='61' width='20' height='20' rx='3'/%3E%3Crect x='304' y='88' width='20' height='20' rx='3'/%3E%3Crect x='223' y='115' width='20' height='20' rx='3'/%3E%3Crect x='250' y='115' width='20' height='20' rx='3'/%3E%3Crect x='7' y='142' width='20' height='20' rx='3'/%3E%3Crect x='142' y='142' width='20' height='20' rx='3'/%3E%3Crect x='196' y='142' width='20' height='20' rx='3'/%3E%3Crect x='304' y='142' width='20' height='20' rx='3'/%3E%3Crect x='34' y='169' width='20' height='20' rx='3'/%3E%3Crect x='250' y='169' width='20' height='20' rx='3'/%3E%3Crect x='7' y='196' width='20' height='20' rx='3'/%3E%3Crect x='61' y='196' width='20' height='20' rx='3'/%3E%3Crect x='250' y='196' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 3.5s; animation-delay: -1.8s; }
.sizzle i:nth-child(8) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='324' height='216' fill='%23ffd6bf'%3E%3Crect x='115' y='7' width='20' height='20' rx='3'/%3E%3Crect x='142' y='34' width='20' height='20' rx='3'/%3E%3Crect x='61' y='61' width='20' height='20' rx='3'/%3E%3Crect x='142' y='61' width='20' height='20' rx='3'/%3E%3Crect x='223' y='61' width='20' height='20' rx='3'/%3E%3Crect x='7' y='88' width='20' height='20' rx='3'/%3E%3Crect x='223' y='88' width='20' height='20' rx='3'/%3E%3Crect x='61' y='142' width='20' height='20' rx='3'/%3E%3Crect x='142' y='169' width='20' height='20' rx='3'/%3E%3Crect x='304' y='169' width='20' height='20' rx='3'/%3E%3Crect x='196' y='196' width='20' height='20' rx='3'/%3E%3Crect x='223' y='196' width='20' height='20' rx='3'/%3E%3Crect x='277' y='196' width='20' height='20' rx='3'/%3E%3C/svg%3E"); animation-duration: 5s; animation-delay: -3.6s; }
@keyframes sizzle { 0%, 100% { opacity: .07; } 50% { opacity: .55; } }
.closing > :not(.sizzle) { position: relative; }

/* Logo motion: the outline charges, then the bolt lights. A-R06 (G4d): it runs on the logo's own scroll position
   (a view timeline, inside the @supports block at the end of the reveal rules) instead of a class a script added;
   without support, and under reduced motion, the logo is drawn whole and still. */
.mark-outline { stroke-dasharray: 420; stroke-dashoffset: 0; }
@keyframes charge { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes bolt { 0% { opacity: 0; } 40% { opacity: 1; filter: drop-shadow(0 0 6px #ffac83); } 100% { opacity: 1; filter: none; } }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; color: var(--ink-3); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.foot h4 { color: var(--ink); font: 600 14px/1 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; margin: 6px 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .brand { margin-bottom: 14px; }
.foot .legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(74, 54, 70, .6); font-size: 13px; line-height: 1.6; }
.foot .legal p { margin: 0 0 .5em; }

/* Reveal on scroll, CSS only (A-R06, wave 3, Greg's form answer G4d "css_only", RED row 6, SPK-03a; design D18 kept).
   A fade and slide tied to each element's own scroll position (a view timeline). It runs only where the browser has
   scroll-driven animations and the visitor has not asked for reduced motion; everywhere else .reveal has no rule at
   all, so the content is fully visible and still. The range ends when the element is fully in view (or 180 px into
   its entry, for an element taller than that), so whatever is on the first screen at load is shown whole. */
@keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal auto cubic-bezier(.2, .7, .2, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
      animation-range: entry 0% entry min(100%, 180px);
    }
    .big-mark { view-timeline: --mark block; }
    .big-mark .mark-outline { animation: charge auto ease-out both; animation-timeline: --mark; animation-range: entry 0% entry 260px; }
    .big-mark .mark-bolt { animation: bolt auto ease-out both; animation-timeline: --mark; animation-range: entry 200px entry 320px; }
  }
}

/* Error page */
.lost { min-height: calc(100vh - 69px); display: grid; place-items: center; text-align: center; padding: 64px 0; }
.lost .cta-row { justify-content: center; }

@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .nav { display: none; }
  .menu { display: block; }
  .top .wrap { gap: 12px; }
  .hero { padding: 48px 0 84px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .device-stack { max-width: 640px; margin: 0 auto; width: 100%; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 88px; }
  .feature.flip .feature-media { order: 0; }
  .free { grid-template-columns: minmax(0, 1fr); }
  .group { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .routine { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 88px; }
  .closing { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .top .btn-sm { display: none; }
  .section { padding: 84px 0; }
  .stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li { padding: 22px 16px; }
  .stats li:nth-child(3) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .routine { grid-template-columns: minmax(0, 1fr); }
  .free { padding: 24px; }
  .group { padding: 20px 18px; }
  .group li { padding: 9px 13px; font-size: 15px; }
  .cta-row .btn, .plans-cta .btn { flex: 1 1 100%; }
  .faq summary { font-size: 17px; padding: 18px; }
  .faq .answer { padding: 0 18px 18px; }
  .closing { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mark-outline { stroke-dashoffset: 0; }
}