/* Dawnwell homepage styles — pulled out of index.html so markup stays readable. */

html{scroll-behavior:smooth}
/* Lenis (js/smooth-scroll.js) drives wheel scrolling on the homepage; native smooth scroll would fight it */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
html,body{margin:0;padding:0;background:var(--dw-sheet)}
a{color:var(--dw-accent);text-decoration:none}
::selection{background:rgba(216,90,48,.22)}
a:hover{color:var(--dw-accent-soft)}
/* inline colours on the links win over the rule above, so the footer needs its own */
footer a{transition:color 160ms var(--ease-standard)}
footer a:hover{color:var(--dw-accent)!important}
a:focus-visible{outline:2px solid var(--dw-accent);outline-offset:3px;border-radius:4px}
/* Anchor jumps land below the sticky nav instead of under it. */
[id]{scroll-margin-top:72px}

@keyframes dwGlow{0%{opacity:.55;transform:scale(1)}100%{opacity:.9;transform:scale(1.12)}}
@keyframes dwDrift{0%{transform:translateY(0)}100%{transform:translateY(-14px)}}
@keyframes dwDriftB{0%{transform:translateY(-10px)}100%{transform:translateY(6px)}}
@keyframes dwBlink{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:0.01ms!important;transition-delay:0s!important}html{scroll-behavior:auto}}

/* Scroll-reveal: an IntersectionObserver in index.html's Component sets data-shown
   (plus an inline transitionDelay from data-delay) once an element enters the viewport.
   --ty/--sc/--dur let individual elements override distance, scale and speed. */
[data-reveal]{opacity:0;transform:translateY(var(--ty,24px)) scale(var(--sc,1));transition:opacity var(--dur,800ms) var(--ease-out),transform var(--dur,800ms) var(--ease-out)}
[data-reveal][data-shown]{opacity:1;transform:none}
[data-reveal].dw-fade-only{transform:none;transition:opacity var(--dur,800ms) var(--ease-out)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Layout */
/* --vw/--vh: 1vw/1svh that stay true under the big-screen zoom below (browsers multiply
   viewport units inside a zoomed element by the zoom). --nav-h: the sticky nav's height. */
.dw-page{--zoom:1;--vw:calc(1vw / var(--zoom));--vh:calc(1svh / var(--zoom));--nav-h:85px;font-family:var(--font-body);color:var(--dw-ink);background:var(--dw-sheet);overflow:clip}
/* Very large screens: scale the whole page instead of leaving a small 1200px column
   adrift. Each step lays out at roughly 1800-1900 CSS px, so a 2560 or 4K monitor
   at 100% shows the 1920 design, just bigger. */
@media (min-width:2200px){.dw-page{zoom:1.25;--zoom:1.25}}
@media (min-width:2800px){.dw-page{zoom:1.5;--zoom:1.5}}
@media (min-width:3500px){.dw-page{zoom:2;--zoom:2}}
.dw-section{padding:clamp(64px,8vw,104px) 24px}
.dw-container{max-width:1200px;margin:0 auto}
.dw-container--pricing{max-width:920px;text-align:center}
#pricing{padding:clamp(74px,9.2vw,120px) 24px}
#nights,#privacy,#faq,#pricing{background:var(--dw-sheet)}

/* Shared text/card patterns */
.dw-eyebrow{font-weight:700;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dw-accent)}
.dw-eyebrow--night{color:var(--dw-night-ink-muted)}
.dw-clock-colon{animation:dwBlink 2s var(--ease-standard) infinite}
.dw-eyebrow-sm{font-weight:700;font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--dw-accent)}
.dw-muted-sm{font-weight:600;font-size:14px;color:var(--dw-ink-muted)}
.dw-muted-md{font-weight:600;font-size:15px;color:var(--dw-ink-muted)}
.dw-card{background:var(--dw-card-fill);border-radius:var(--radius-hero);padding:26px}
.dw-pill{padding:5px 13px;border-radius:999px;background:var(--accent-tint);font-weight:700;font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dw-accent)}
.dw-bar{flex:1;height:0;border-radius:8px;background:var(--dw-track);transition:height 900ms var(--ease-out)}
.dw-bar--full{background:var(--dw-accent)}

/* Nav */
.dw-nav{--button-height:48px;position:sticky;top:0;z-index:30;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);background:rgba(251,235,223,.84);border-bottom:1px solid var(--hairline);box-shadow:0 8px 30px rgba(55,19,40,.05)}
.dw-nav button{padding:0 24px!important;font-size:16px!important;gap:8px!important}
.dw-nav-inner{max-width:1200px;margin:0 auto;padding:18px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.dw-nav-brand{display:flex;align-items:center;gap:10px;justify-self:start}
.dw-nav-logo{width:36px;height:36px;border-radius:9px}
.dw-nav-wordmark{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--dw-ink)}
.dw-nav-links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.dw-nav-cta{justify-self:end}
/* The DS Button sets transform + transition inline (press scale), so the hover lift
   uses the separate `translate` property and the transition list needs !important. */
.dw-nav-cta button,.dw-hero-ctas button{transition:transform 220ms var(--ease-spring),translate 260ms var(--ease-out),box-shadow 260ms var(--ease-out)!important}
@media (hover:hover){.dw-nav-cta button:hover,.dw-hero-ctas button:hover{translate:0 -2px;box-shadow:0 12px 24px -12px rgba(55,19,40,.45)}}
/* Below this, brand + links + CTA can't share one row without wrapping into a
   mess. Links are all in-page anchors, so dropping them costs a scroll, not a
   destination — simplest fix that doesn't need a hamburger + JS toggle. */
@media (max-width:880px){
  .dw-page{--nav-h:77px}
  .dw-nav-inner{grid-template-columns:auto auto;padding:14px 20px}
  .dw-nav-links{display:none}
}
/* Phones (and landscape phones, where height is what's short): the full-size CTA wraps
   to two lines next to the wordmark. */
@media (max-width:520px),(max-height:500px) and (orientation:landscape){
  .dw-page{--nav-h:61px}
  .dw-nav{--button-height:40px}
  .dw-nav-inner{padding:10px 16px;gap:12px}
  .dw-nav-logo{width:32px;height:32px;border-radius:8px}
  .dw-nav-wordmark{font-size:20px}
  .dw-nav button{padding:0 16px!important;font-size:14.5px!important;white-space:nowrap}
}

/* Hero */
/* The hero is exactly one screen under the nav (--hero-h), on any screen, with the copy
   and the phone both in it.
   - Portrait (phones, tablets, rotated monitors): copy on top, centred; the phone takes
     whatever height is left. If the whole phone fits there it's shown whole, centred;
     if not (phones), it keeps a readable width and rises out of the hero's bottom edge,
     fading out, instead of shrinking to a thumbnail or falling below the fold.
   - Landscape (laptops to TVs, landscape phones): copy and phone side by side, the phone
     82% of the screen height, the type scaled from the screen height so nothing runs
     past the fold on short laptops. */
.dw-hero{--hero-h:max(calc(100 * var(--vh) - var(--nav-h)),300px);position:relative;box-sizing:border-box;min-height:var(--hero-h);display:flex;flex-direction:column;padding:clamp(16px,3.5 * var(--vh),48px) 20px 0;overflow:hidden}
.dw-hero-glow{position:absolute;top:-180px;left:50%;width:min(1100px,150vw);height:900px;margin-left:calc(min(1100px,150vw) / -2);border-radius:50%;background:radial-gradient(ellipse at center,rgba(242,191,167,.95) 0%,rgba(242,191,167,.35) 45%,rgba(251,235,223,0) 72%);animation:dwGlow 6200ms var(--ease-standard) infinite alternate;pointer-events:none}
.dw-hero-inner{position:relative;flex:1;width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(14px,2.6 * var(--vh),40px)}
.dw-hero-copy{width:100%;max-width:max(720px,80 * var(--vw));margin:0 auto;text-align:center;container-type:inline-size}
/* Phones: four lines (Dawnwell locks / your phone / until your / routine is done.), sized
   by the narrower of width and height. The longest line is 7.31em (Fraunces 700 italic),
   so 12cqw always fits. */
.dw-hero-copy .dw-eyebrow{font-size:clamp(9.5px,3.4cqw,11.5px);letter-spacing:clamp(.8px,.4cqw,1.4px)}
.dw-hero-title{margin:clamp(6px,1.5 * var(--vh),12px) 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,min(12cqw,6 * var(--vh)),52px);line-height:1.05;letter-spacing:-.015em}
.dw-hero-line{display:block;white-space:nowrap}
/* The accent phrase always starts its own line (it used to follow a <br>). */
.dw-hero-title-accent{display:block;font-style:italic;color:var(--dw-accent)}
.dw-hero-desc{margin:clamp(8px,2 * var(--vh),16px) auto 0;max-width:34em;font-weight:500;font-size:16px;line-height:1.45;color:var(--dw-ink-muted);text-wrap:pretty}
/* The second sentence restates the headline; where height is scarce it gives way to the phone. */
.dw-hero-desc-more{display:none}
/* The CTAs share a row when both fit and stack full width when they don't. */
.dw-hero-ctas{--button-height:clamp(44px,7.5 * var(--vh),52px);margin-top:clamp(14px,3 * var(--vh),24px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.5 * var(--vh),12px)}
.dw-hero-ctas a{flex:1 1 auto;display:flex}
.dw-hero-ctas button{width:100%;font-size:16px!important;padding:0 20px!important}
.dw-hero-note{margin-top:20px}
/* iphone.webp is cropped to the phone (1120x1600, so height = width x 1.4286). The art
   box is a size container, so the phone can be sized from the height left for it:
   --w is the whole phone at ~90% of the box height, but never narrower than 84% of the
   width (max 340px). When that makes it taller than the box, it sits at the top and the
   bottom --fade px fade out at the hero's edge; when it fits, it's centred and unmasked. */
.dw-hero-art{position:relative;flex:1 1 0;min-height:140px;container-type:size}
.dw-hero-img{--w:max(min(84cqw,340px),min(86cqw,63cqh));--top:max(0px,(100cqh - var(--w) * 1.4286) / 2);--fade:clamp(0px,var(--w) * 1.4286 - 100cqh,72px);position:absolute;left:0;right:0;top:var(--top);margin:0 auto;width:var(--w);height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100cqh - var(--top) - var(--fade)),transparent calc(100cqh - var(--top)));mask-image:linear-gradient(to bottom,#000 calc(100cqh - var(--top) - var(--fade)),transparent calc(100cqh - var(--top)))}
/* Portrait tablets and monitors: the headline gets two lines, the copy its full length. */
@media (min-width:600px) and (orientation:portrait){
  .dw-hero{padding:clamp(28px,4.5 * var(--vh),96px) 32px 0}
  .dw-hero-inner{max-width:none;gap:clamp(24px,3 * var(--vh),72px)}
  .dw-hero-title{font-size:min(7.4cqw,6.2 * var(--vh));line-height:1.04}
  .dw-hero-line{display:inline}
  .dw-hero-desc{margin-top:clamp(18px,2.4cqw,32px);font-size:clamp(17px,2.5cqw,26px)}
  .dw-hero-desc-more{display:inline}
  .dw-hero-ctas{--button-height:clamp(52px,7.4cqw,68px);margin-top:clamp(24px,3.6cqw,40px);gap:12px}
  .dw-hero-ctas a{flex:none}
  .dw-hero-ctas button{font-size:clamp(16px,2.25cqw,20px)!important;padding:0 clamp(22px,3.2cqw,30px)!important}
  .dw-hero-art{min-height:280px}
}
@media (min-width:600px) and (orientation:landscape){
  .dw-hero{justify-content:center;padding:calc(var(--hero-h) * .04) 24px}
  .dw-hero-inner{flex:none;display:grid;grid-template-columns:1.1fr 1fr;column-gap:clamp(40px,8 * var(--vw),144px);align-items:center}
  /* --t is the headline size: 72px on a 1440x900 screen, scaled with the screen height,
     and capped so the longest line (7.31em) fits the column with ~6% to spare. The rest
     of the copy is proportioned from it. Text sits a little above the phone's centre. */
  .dw-hero-copy{--t:max(24px,min(var(--hero-h) * .0883,12.8cqw));max-width:none;margin:0;text-align:left;position:relative;top:calc(var(--t) * -.4)}
  .dw-hero-copy .dw-eyebrow{font-size:max(min(11px,3.4cqw),var(--t) * .16)}
  .dw-hero-title{margin-top:calc(var(--t) * .3);font-size:var(--t);line-height:1.03}
  .dw-hero-desc{margin:calc(var(--t) * .33) 0 0;max-width:28em;font-size:max(14.5px,var(--t) * .275)}
  .dw-hero-desc-more{display:inline}
  .dw-hero-ctas{--button-height:max(42px,var(--t) * .78);margin-top:calc(var(--t) * .42);justify-content:flex-start;gap:max(8px,var(--t) * .17)}
  .dw-hero-ctas a{flex:none}
  .dw-hero-ctas button{font-size:max(14.5px,var(--t) * .236)!important;padding:0 max(16px,var(--t) * .31)!important}
  .dw-hero-art{flex:none;min-height:0;container-type:normal;display:flex;justify-content:center}
  /* On tall wide screens the column is narrower than an 82%-height phone; it may spill
     a little into the gutter rather than shrink. */
  .dw-hero-img{position:static;flex:none;width:auto;max-width:115%;max-height:calc(var(--hero-h) * .82);margin:0;-webkit-mask-image:none;mask-image:none}
}
/* Landscape phones and very short windows: the short copy, so the CTAs stay on screen,
   and below ~420px only the primary CTA (the nav still has it, and the page scrolls). */
@media (max-height:500px) and (orientation:landscape){
  .dw-hero-desc-more{display:none}
}
@media (max-height:420px) and (orientation:landscape){
  .dw-hero-cta-2{display:none!important}
}

/* Nights ("how a night runs") */
.dw-nights-title{margin:12px 0 0;text-wrap:balance;max-width:760px;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,50px);line-height:1.14}
.dw-states{margin-top:44px;display:grid;grid-template-columns:1fr;gap:16px}
/* 1 → 2 → 4 columns; auto-fit left a lone fourth card on its own row at tablet widths. */
@media (min-width:560px){.dw-states{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.dw-states{grid-template-columns:repeat(4,1fr)}}
.dw-state-card{display:grid;gap:12px;align-content:start}
.dw-state-icon{width:52px;height:52px;border-radius:26px;background:var(--dw-sheet);display:grid;place-items:center}
.dw-state-icon ion-icon{color:var(--dw-accent);font-size:24px}
.dw-state-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:26px}
.dw-state-time{margin-top:3px;font-weight:700;font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dw-accent)}
.dw-state-body{margin:0;font-weight:500;font-size:14.5px;line-height:21px;color:var(--dw-ink-muted)}
.dw-state-num{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--dw-ink-muted);opacity:.45}

/* Night (sleep screen) */
/* --dw-bleed: exact distance from a 1200px-capped centred column to the
   section edge = the 24px padding plus whatever `margin:0 auto` adds. cqw (the
   section's own content box) rather than vw, because vw counts the scrollbar
   and would overshoot by ~7px on desktop. */
#night{--dw-night-pad:clamp(72px,9vw,112px);--dw-bleed:calc(24px + max(0px,(100cqw - 1200px)/2));container-type:inline-size;background:var(--dw-night-bg);color:var(--dw-night-ink);padding:var(--dw-night-pad) 24px}
.dw-night-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:center}
/* Copy/art split shifted right of even so the art column gets more room. */
@media (min-width:1024px),(min-width:700px) and (orientation:landscape){.dw-night-grid{grid-template-columns:1fr 1.6fr}}
.dw-night-copy{display:flex;flex-direction:column;justify-content:center}
.dw-night-title{margin:14px 0 0;text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.2vw,54px);line-height:1.14}
.dw-night-desc{margin:22px 0 0;max-width:480px;font-weight:500;font-size:18px;line-height:27px;color:var(--dw-night-ink-muted)}
.dw-essentials{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.dw-essential-pill{height:34px;padding:0 15px;border-radius:17px;background:var(--dw-night-surface);display:flex;align-items:center;font-weight:600;font-size:14px}
.dw-essentials-note{margin-top:16px;font-weight:500;font-size:13.5px;color:var(--dw-night-ink-muted)}
/* The phones in this PNG are drawn running off its top and bottom canvas edges, so
   those edges must sit flush with the section's or the artwork looks sliced.
   - Two columns: the box bleeds to the viewport's right edge and spans the full
     section height; anchoring the image left means any cover-crop happens at the
     viewport edge, never as a hard cut beside the copy.
   - One column: full-bleed, flush with the section bottom, top edge faded.
   The box clips, and the reveal zooms the image inside it (scale >= 1) instead of
   sliding the box, so the edges stay flush while it animates. */
.dw-night-art{overflow:clip;margin:0 calc(-1 * var(--dw-bleed)) calc(-1 * var(--dw-night-pad))}
.dw-night-img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%);mask-image:linear-gradient(to bottom,transparent,#000 16%)}
@media (min-width:1024px),(min-width:700px) and (orientation:landscape){
  .dw-night-art{align-self:stretch;margin:calc(-1 * var(--dw-night-pad)) calc(-1 * var(--dw-bleed)) calc(-1 * var(--dw-night-pad)) 0}
  .dw-night-img{height:100%;object-fit:cover;object-position:left center;-webkit-mask-image:none;mask-image:none}
}

/* Privacy & permissions */
.dw-privacy-title{margin:12px 0 0;max-width:760px;font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.8vw,46px);line-height:1.16}
.dw-privacy-desc{margin:18px 0 0;max-width:600px;font-weight:500;font-size:17px;line-height:26px;color:var(--dw-ink-muted)}
.dw-permissions{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px}
.dw-permission-card{background:var(--dw-card-fill);border-radius:var(--radius-card);padding:20px;display:flex;align-items:flex-start;gap:12px}
.dw-permission-card ion-icon{color:var(--dw-accent);font-size:18px;flex:none;margin-top:2px}
.dw-permission-title{font-weight:700;font-size:15.5px}
.dw-permission-body{margin-top:4px;font-weight:500;font-size:13.5px;line-height:20px;color:var(--dw-ink-muted)}
.dw-privacy-note{margin-top:20px}

/* FAQ — hairline-ruled question list beside a heading that stays put while you read */
.dw-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,5vw,72px);align-items:start}
@media (min-width:860px){.dw-faq-head{position:sticky;top:112px}}
.dw-faq-title{margin:12px 0 0;text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.8vw,46px);line-height:1.16}
.dw-faq-lead{margin:20px 0 0;max-width:34ch;font-weight:500;font-size:16px;line-height:25px;color:var(--dw-ink-muted)}
.dw-faq-list{border-top:1px solid var(--hairline)}
.dw-faq-item{border-bottom:1px solid var(--hairline)}
.dw-faq-toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:20px;width:100%;padding:20px 2px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.6vw,21px);line-height:1.3;color:var(--dw-ink);text-align:left;transition:color var(--duration-color) var(--ease-standard)}
.dw-faq-toggle::-webkit-details-marker{display:none}
.dw-faq-toggle:hover,.dw-faq-item[open]:not(.is-closing)>.dw-faq-toggle{color:var(--dw-accent)}
.dw-faq-toggle:focus-visible{outline:2px solid var(--dw-accent);outline-offset:3px;border-radius:3px}
.dw-faq-question{flex:1;margin:0;font:inherit}
/* Plus drawn in CSS so it can turn into a minus instead of swapping icon glyphs. */
.dw-faq-list{--dw-faq-ease:cubic-bezier(0.22,1,0.36,1);--dw-faq-dur:560ms}
.dw-faq-icon{position:relative;flex:none;width:15px;height:15px;color:var(--dw-accent);transition:transform var(--dw-faq-dur) var(--dw-faq-ease)}
.dw-faq-icon::before,.dw-faq-icon::after{content:'';position:absolute;inset:50% 0;border-top:2px solid currentColor;transition:transform var(--dw-faq-dur) var(--dw-faq-ease)}
.dw-faq-icon::after{transform:rotate(90deg)}
.dw-faq-item[open]:not(.is-closing) .dw-faq-icon{transform:rotate(180deg)}
.dw-faq-item[open]:not(.is-closing) .dw-faq-icon::after{transform:rotate(90deg) scaleX(0)}
/* Height animates to the answer's own size where interpolate-size is supported
   (Chromium); elsewhere it opens instantly, which is the native behaviour anyway. */
.dw-faq-answer{margin:0;padding:0 44px 22px 0;font-weight:500;font-size:15px;line-height:24px;color:var(--dw-ink-muted);transition:opacity 220ms var(--ease-standard)}
/* js/faq.js animates the heights and the answer's entrance; on close the answer just fades */
.dw-faq-item.is-closing .dw-faq-answer{opacity:0}
@media (max-width:520px){.dw-faq-answer{padding-right:12px}.dw-faq-toggle{padding:18px 2px}}

/* Progress */
#progress{--dw-progress-pad:clamp(64px,8vw,104px);--dw-bleed:calc(24px + max(0px,(100cqw - 1200px)/2));container-type:inline-size;background:var(--dw-peach);padding:var(--dw-progress-pad) 24px}
.dw-progress-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:1024px),(min-width:700px) and (orientation:landscape){.dw-progress-grid{grid-template-columns:1fr 1fr}}
/* Same treatment as .dw-night-art, mirrored: bleeds left, anchored right so crops
   land at the viewport edge; one column is flush with the section top, bottom faded. */
.dw-progress-cards{overflow:clip;margin:calc(-1 * var(--dw-progress-pad)) calc(-1 * var(--dw-bleed)) 0}
.dw-progress-img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to top,transparent,#000 16%);mask-image:linear-gradient(to top,transparent,#000 16%)}
@media (min-width:1024px),(min-width:700px) and (orientation:landscape){
  .dw-progress-cards{align-self:stretch;margin:calc(-1 * var(--dw-progress-pad)) 0 calc(-1 * var(--dw-progress-pad)) calc(-1 * var(--dw-bleed))}
  .dw-progress-img{height:100%;object-fit:cover;object-position:right center;-webkit-mask-image:none;mask-image:none}
}
.dw-streak-count{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,56px);line-height:1.1;font-variant-numeric:tabular-nums}
.dw-streak-label{font-weight:500;font-size:13.5px;color:var(--dw-ink-muted)}
.dw-streak-note{margin-top:16px;font-weight:600;font-size:15px}
.dw-hours-title{font-family:var(--font-display);font-weight:700;font-size:26px}
.dw-bars{margin-top:18px;display:flex;gap:10px;height:92px;align-items:flex-end}
.dw-hours-note{margin-top:12px;font-weight:500;font-size:13.5px;color:var(--dw-ink-muted)}
.dw-progress-title{margin:14px 0 0;text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,50px);line-height:1.14}
.dw-progress-desc{margin:20px 0 0;max-width:470px;font-weight:500;font-size:18px;line-height:27px;color:var(--dw-ink-muted)}
.dw-progress-note{margin-top:24px;font-weight:600;font-size:15px;color:var(--dw-ink)}

/* Pricing */
.dw-pricing-title{margin:14px 0 0;text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:clamp(37px,4.6vw,58px);line-height:1.14}
.dw-pricing-desc{margin:12px 0 0;font-weight:500;font-size:18px;line-height:26px;color:var(--dw-ink-muted)}
.dw-plans{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px;text-align:left;max-width:640px;margin-left:auto;margin-right:auto}
.dw-plan{border-radius:var(--radius-hero);padding:28px 24px;display:flex;flex-direction:column;gap:6px}
.dw-plan--annual{background:var(--dw-accent);color:var(--dw-on-accent)}
.dw-plan--weekly{background:var(--dw-card-fill)}
.dw-plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dw-plan-name{font-weight:700;font-size:15px;opacity:.85}
.dw-plan-name--muted{color:var(--dw-ink-muted);opacity:1}
.dw-plan-badge{flex:none;background:rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;font-weight:700;font-size:12px;white-space:nowrap}
.dw-plan-price{margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1}
.dw-plan-price--muted{color:var(--dw-ink)}
.dw-plan-sub{font-weight:500;font-size:13.5px;opacity:.85}
.dw-plan-sub--muted{color:var(--dw-ink-muted);opacity:1}
.dw-pricing-cta{margin-top:28px;display:flex;justify-content:center}
.dw-pricing-note{margin-top:14px}
.dw-share{margin:28px auto 0;max-width:520px;line-height:24px}
.dw-share-links{display:block;margin-top:4px}
.dw-store-badges{margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.dw-store-badge{display:flex;align-items:center;gap:9px;height:48px;border-radius:10px}
.dw-store-badge--apple{padding:0 16px;background:#0B0507}
.dw-store-badge--apple ion-icon{color:#fff;font-size:22px}
.dw-store-badge--android{padding:0 18px;background:transparent;border:1.5px solid var(--dw-ink);color:var(--dw-ink)}
.dw-store-badge--android ion-icon{font-size:19px}
.dw-store-badge-text{text-align:left;color:#fff}
.dw-store-badge-line1{display:block;font-family:var(--font-body);font-weight:500;font-size:9.5px;line-height:11px;opacity:.8}
.dw-store-badge-line2{display:block;font-family:var(--font-body);font-weight:700;font-size:15px;line-height:17px}
.dw-store-badge-android-text{font-family:var(--font-body);font-weight:700;font-size:14px}

/* Early access / waitlist */
/* The hero's dawn glow again, smaller, breathing behind the form: the page opens and
   closes on the same light, and it pulls the eye to the signup. Fades out well
   inside the section, so it never meets an edge. */
#early-access{position:relative;isolation:isolate;overflow:hidden;background:var(--dw-sheet);padding:clamp(72px,9vw,112px) 24px}
#early-access::before{content:'';position:absolute;z-index:-1;left:50%;top:58%;width:min(980px,150vw);height:560px;margin:-280px 0 0 calc(min(980px,150vw) / -2);border-radius:50%;background:radial-gradient(ellipse at center,rgba(242,191,167,.9) 0%,rgba(242,191,167,.32) 45%,rgba(251,235,223,0) 72%);animation:dwGlow 6200ms var(--ease-standard) infinite alternate;pointer-events:none}
.dw-waitlist-card{max-width:660px;margin:0 auto;padding:clamp(28px,4vw,40px) clamp(22px,4vw,40px);background:var(--dw-sheet);border:1px solid var(--hairline);border-radius:28px;box-shadow:0 18px 44px -30px rgba(55,19,40,.5);text-align:center}
.dw-waitlist-tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.dw-waitlist-title{margin-top:16px;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--dw-ink)}
.dw-waitlist-desc{margin-top:8px;font-weight:500;font-size:15px;line-height:1.5;color:var(--dw-ink-muted)}
.dw-waitlist-form{margin-top:26px;display:flex;align-items:center;gap:6px;max-width:540px;margin-left:auto;margin-right:auto;background:var(--dw-card-fill);border:1px solid var(--hairline);border-radius:999px;padding:10px 10px 10px 26px;box-shadow:none;transition:border-color 200ms ease}
.dw-waitlist-form:focus-within{border-color:var(--dw-accent);box-shadow:none}
.dw-waitlist-input{flex:1;min-width:0;height:46px;line-height:46px;border:none;padding:0;font-family:var(--font-body),sans-serif;font-weight:500;font-size:17px;background:transparent;outline:none;color:var(--dw-ink)}
.dw-waitlist-input::placeholder{color:var(--dw-ink-muted);opacity:.75}
.dw-waitlist-form button{flex:none;margin-left:auto;box-shadow:none}
.dw-waitlist-form .sc-host-x{display:flex!important;align-items:center;flex:none;margin-left:auto}
.dw-waitlist-status{margin-top:12px;min-height:20px;font-weight:600;font-size:13.5px}
@media (max-width:520px){
  .dw-waitlist-form{flex-direction:column;align-items:stretch;border-radius:26px;padding:12px;gap:10px}
  .dw-waitlist-input{width:100%;text-align:center;font-size:16px}
  .dw-waitlist-form .sc-host-x{width:100%;margin-left:0}
  .dw-waitlist-form button{width:100%}
  .dw-pricing-desc{font-size:16.5px;line-height:24px}
}

/* Footer */
footer{background:var(--dw-card-fill);border-top:1px solid var(--hairline);overflow:hidden}
.dw-footer-grid{max-width:1200px;margin:0 auto;padding:77px 29px 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:48px 38px;text-align:center}
.dw-footer-col--wide a{line-height:1.4;text-wrap:balance}
.dw-footer-brand-row{display:flex;align-items:center;justify-content:center;gap:12px}
.dw-footer-logo{width:36px;height:36px;border-radius:10px}
.dw-footer-wordmark{font-family:var(--font-display);font-weight:700;font-size:19px}
.dw-footer-tagline{margin:17px auto 0;max-width:312px;font-weight:500;font-size:14px;line-height:22px;color:var(--dw-ink-muted)}
.dw-footer-col{display:flex;flex-direction:column;align-items:center;gap:14px}
footer .dw-eyebrow-sm{font-size:13px}
footer .dw-muted-sm{font-size:14px}
.dw-footer-bottom{max-width:1200px;margin:0 auto;padding:24px 29px 29px;display:flex;flex-wrap:wrap;gap:10px 29px;justify-content:center;align-items:center;border-top:1px solid var(--hairline);font-weight:600;font-size:13px;color:var(--dw-ink-muted)}
.dw-footer-wordmark-clip{overflow:hidden;aspect-ratio:1000/127}
.dw-footer-wordmark-svg{display:block;width:100%;height:150%;user-select:none}
/* Phones: brand on top, Product + Support side by side, Legal below, so the
   footer isn't one long centred column. */
@media (max-width:520px){
  .dw-footer-grid{grid-template-columns:1fr 1fr;padding:56px 24px 40px;gap:40px 16px}
  .dw-footer-grid>:first-child,.dw-footer-grid>:last-child,.dw-footer-col--wide{grid-column:1 / -1}
  .dw-footer-bottom{padding:20px 24px 24px}
}
.dw-footer-wordmark-svg text{font-family:var(--font-display);font-weight:700;font-size:252px;fill:var(--dw-accent)}
.dw-footer-more{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--dw-ink)}
.dw-footer-more svg{width:13px;height:13px;transition:transform 260ms var(--ease-out)}
.dw-footer-more:hover svg{transform:translateX(3px)}