/* ============ my.adhd — landing ============
   Full-bleed: no card, no gutter, the page IS the surface.
   The HERO is exactly one viewport (100dvh), so the first screen is
   always whole and nothing is cut off on a phone. The copy below it
   scrolls. Tokens come from theme.css, so the hero follows the same
   toggle as the app — light by default, dark when asked. */

*{box-sizing:border-box; margin:0; padding:0}

/* The glows are the one thing that cannot be a shared token: on paper they
   have to be a whisper, on ink they carry the whole backdrop. */
:root{
  --hero-glow-a:rgba(71,55,255,.13);
  --hero-glow-b:rgba(53,41,191,.11);
  /* the one gap between the nav and the first line of copy — every page
     starts its content here, so the titles line up across the site */
  --top-gap:clamp(14px,3.4vh,34px);
  /* read by both the hero's padding and the sticky nav's offset, so the bar
     stops exactly where the status bar ends — same pair as the app */
  --safe-top:env(safe-area-inset-top, 0px);
  --nav-gap:clamp(10px,2vh,18px);
}
:root[data-theme="dark"]{
  --hero-glow-a:rgba(71,55,255,.32);
  --hero-glow-b:rgba(53,41,191,.34);
}

body{
  background:var(--surface);
  color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  /* The hero aims at one viewport, but a real phone adds a notch inset and
     browser chrome on top of that. When it does not fit, it has to scroll —
     clipping it hid the disclaimer off the bottom of the screen. */
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ---------- shared bits ---------- */

.cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--grad); color:#fff; text-decoration:none;
  font-size:clamp(15px,2vh,18px); font-weight:700; letter-spacing:-.01em;
  padding:clamp(13px,1.9vh,17px) clamp(32px,5vw,48px);
  border-radius:999px;
  box-shadow:0 18px 40px -16px rgba(71,55,255,.9);
  transition:transform .16s var(--ease), box-shadow .2s var(--ease);
}
.cta:hover{transform:translateY(-2px); box-shadow:0 22px 46px -14px rgba(71,55,255,1)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* ============ HERO — one viewport ============ */
.hero{
  position:relative;
  min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:var(--nav-gap) 0 clamp(14px,2.4vh,22px);
  /* the gutters below are relative to these, so the notch never crops the
     nav in landscape or under a home-screen launch */
  padding-top:calc(var(--nav-gap) + var(--safe-top));
  padding-bottom:calc(clamp(14px,2.4vh,22px) + env(safe-area-inset-bottom, 0px));
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  /* deliberately not overflow:hidden — an ancestor that clips is an
     ancestor the sticky nav is stuck inside. .hero-glow clips instead. */
}
.hero-glow::before,.hero-glow::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0;
}
.hero-glow::before{
  width:min(78vw,760px); aspect-ratio:1; top:-14%; right:-16%;
  background:radial-gradient(closest-side,var(--hero-glow-a),transparent 72%);
}
.hero-glow::after{
  width:min(60vw,520px); aspect-ratio:1; bottom:-20%; left:-18%;
  background:radial-gradient(closest-side,var(--hero-glow-b),transparent 72%);
}
.hero > *{position:relative; z-index:1}
/* after .hero > *, which would otherwise make this relative. It fills the
   same box the glows used to measure their percentages against, so they
   land exactly where they did. */
.hero-glow{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}

/* The bar holds the top of the window while the page runs under it. */
.nav{
  position:sticky; top:var(--safe-top); z-index:20;
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,40px);
}
/* No ground behind it, unlike the app's bar. This page is exactly one
   viewport — the hero is the whole document and never scrolls — so nothing
   ever passes behind the nav, and a band painted across the top would only
   cut a seam through the hero glow. Add content below the hero and this
   bar needs one: copy .brand::before from styles.css, which bleeds past
   the 1080px cap to the window edges. */
/* the mark on the left, the toggle on the right, nothing between */
.nav .theme-toggle{margin-left:auto}

/* top-aligned: the headline claims the upper screen rather than sitting
   dead-centre with a void above it. Same --top-gap as the install page. */
.hero-body{
  min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:clamp(10px,2.4vh,24px);
  text-align:center;
  padding:var(--top-gap) clamp(20px,5vw,40px) 0;
}
.hero-art{min-height:0; display:flex; justify-content:center}
.hero-art img, .hero-art .hero-mascot{
  display:block; height:min(38vh,340px); width:auto; max-width:100%;
  /* the mascot sits back — the headline and CTA carry the screen */
  opacity:.92;
}
.hero-copy{display:flex; flex-direction:column; align-items:center; min-height:0}
.hero-title{
  font-size:clamp(28px,min(6vh,8.4vw),54px); font-weight:800;
  letter-spacing:-.04em; line-height:1.04;
  margin-bottom:clamp(8px,1.5vh,15px);
}
.hero-sub{
  font-size:clamp(13.5px,min(1.85vh,3.9vw),18px); color:var(--muted);
  max-width:44ch; margin-bottom:clamp(14px,2.6vh,26px);
}
.hero-note{margin-top:clamp(8px,1.4vh,13px); font-size:clamp(12px,1.4vh,13.5px); color:var(--faint)}

.hero-foot{
  text-align:center; padding:0 clamp(20px,5vw,40px);
  font-size:clamp(11px,1.3vh,12.5px); line-height:1.55;
  color:var(--faint); max-width:60ch; margin:clamp(14px,2.2vh,24px) auto 0;
}

/* steps */

/* pull quote */

/* the not-list */

/* closing */

/* footer */

/* ---------- tall phones: let the hero grow into the slack ----------
   Top-aligning the hero left a dead band above the footer on a big
   phone. Rather than pushing the headline back down into the middle,
   the mascot and the gaps take the space. Held to 40vh, not more: a
   real iPhone spends part of that same viewport on the notch inset,
   and 44vh had the note and the disclaimer touching. */
@media (min-width:0px) and (min-height:780px){
  .hero-body{gap:clamp(14px,3vh,34px)}
  .hero-art img, .hero-art .hero-mascot{height:min(40vh,380px)}
}

/* ---------- desktop: copy left, mascot right ---------- */
@media (min-width:820px){
  .hero-body{
    flex-direction:row-reverse; justify-content:center; align-items:center;
    gap:clamp(40px,6vw,88px); text-align:left;
  }
  .hero-copy{align-items:flex-start; max-width:36rem}
  .hero-art img, .hero-art .hero-mascot{height:min(64vh,520px)}
}

/* ---------- very short screens (an SE, a browser with two toolbars) ----
   The hero is one viewport with nothing to scroll to, so on a 568px-tall
   screen the mascot has to give way or the disclaimer falls off the end. */
@media (max-height:620px){
  .hero-art img, .hero-art .hero-mascot{height:min(30vh,220px)}
}

/* ---------- landscape phones ---------- */
@media (max-height:520px){
  .hero-body{flex-direction:row-reverse; align-items:center; justify-content:center; gap:26px; text-align:left}
  .hero-copy{align-items:flex-start}
  .hero-art img, .hero-art .hero-mascot{height:min(46vh,210px)}
  .hero-sub{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* Launched from the home screen there is no browser chrome to hold the
   status bar off, and iOS does not always report an inset — so floor it. */
@media (display-mode:standalone){
  .hero{padding-top:calc(clamp(16px,3.2vh,28px) + max(env(safe-area-inset-top, 0px), 34px))}
}