/* ═══════════════════════════════════════════════════════════════════════
   YUHA · Marketing landing page (pre-auth hero view)
   ───────────────────────────────────────────────────────────────────────
   Every selector is scoped under `.ylp` so nothing leaks into the app.
   The mockup used bare element selectors (nav, section, .btn, .wrap,
   h1/h2/h3) — those would collide app-wide if left unscoped, so they are
   all namespaced here. Rendered inside #auth-hero-view by views-init.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* CSS variables live on .ylp (not :root) so they can't shadow the app's
   own --teal / --ink / --bg tokens. Descendants inherit them. */
.ylp{
  --white:#ffffff; --tint:#eef8f5; --tint2:#e0f2ed;
  --ink:#0b1a16; --ink2:#48594f; --ink3:#87968f;
  --teal:#0f9b8e; --teal2:#0a6a60; --teal-deep:#083f39; --teal-bright:#14c2ac; --teal-soft:#d8f0ec; --glow:#8fe9de;
  --line:#e6efec; --line2:#f0f5f3;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sh:0 2px 6px rgba(11,26,22,.06), 0 30px 60px -30px rgba(8,63,57,.4);
  --sh-ph:0 8px 18px rgba(8,63,57,.18), 0 60px 100px -40px rgba(8,63,57,.55);

  background:var(--white); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.55; letter-spacing:-.006em;
}
/* HARD ISOLATION — the app's global stylesheets (platform.css/views.css/
   native.css) style bare elements (`header{}`, `nav`, `button`, …) and
   generic classes (`.btn`, `.card`, `.hero`, …) that collide with this
   landing's markup and leak IN (scoping only stops OUR rules leaking OUT).
   `all: revert` wipes every author-origin declaration from those sheets on
   every landing descendant back to the UA default; our `.ylp …` rules below
   (higher specificity + later in the cascade) then re-apply cleanly. Custom
   properties are untouched by `all`, so the `.ylp` design tokens survive.
   Reset FIRST so the box-sizing + element rules that follow win.
   IMPORTANT: exclude <svg> and everything inside it. `all: revert` would
   revert SVG presentation attributes (stroke="currentColor" / fill) to their
   initial values (stroke:none) — which makes every outline icon (triad,
   checkmarks, arrows) disappear. Icons must keep their attributes + inherit
   `color` from our rules. */
.ylp *:not(svg):not(svg *), .ylp *::before, .ylp *::after { all: revert; }
.ylp *:not(svg):not(svg *){box-sizing:border-box}
@media (prefers-reduced-motion:reduce){ .ylp *{animation:none!important;transition:none!important} }
.ylp h1,.ylp h2,.ylp h3,.ylp p{margin:0}
.ylp .wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.ylp .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600}
.ylp .num{font-variant-numeric:tabular-nums}
.ylp button{font:inherit; cursor:pointer}
.ylp .btn{border:0; border-radius:13px; font-weight:700; font-size:15px; padding:13px 22px; letter-spacing:-.01em; transition:transform .12s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.ylp .btn:hover{transform:translateY(-1px)}
.ylp .btn.teal{background:var(--teal); color:#fff; box-shadow:0 14px 30px -12px rgba(15,155,142,.6)}
.ylp .btn.white{background:#fff; color:var(--teal-deep); box-shadow:0 14px 30px -14px rgba(0,0,0,.3)}
.ylp .btn.line{background:transparent; color:var(--teal-deep); border:1.5px solid var(--line)}
.ylp .btn:focus-visible{outline:3px solid var(--glow); outline-offset:2px}

.ylp nav{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line2); padding-top:16px}
.ylp .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px}
.ylp .brand{display:flex; align-items:center; gap:10px; font-weight:820; font-size:20px; letter-spacing:-.03em}
.ylp .logo{width:32px; height:32px; border-radius:9px; background:linear-gradient(150deg,var(--teal-bright),var(--teal-deep)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:16px}
.ylp .nav-r{display:flex; align-items:center; gap:10px}
.ylp .nav-r .btn{padding:9px 16px; font-size:14px}
/* On narrow screens the brand + both nav buttons overrun the bar; the hero
   carries both CTAs right below, so drop the long "Sign Up to Connect" from
   the nav and keep the compact "Sign in". */
@media(max-width:560px){ .ylp .nav-r .btn.teal{display:none} }

/* ── hero: light split, real photo ────────────────────── */
/* padding-top/bottom (NOT the `padding` shorthand) so the .wrap side padding
   (0 24px) survives — the shorthand's 0 horizontal was zeroing it, so the
   hero copy + photo ran edge-to-edge on mobile while the nav/sections kept
   their inset. */
.ylp .hero-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; padding-top:52px; padding-bottom:60px}
@media(max-width:860px){ .ylp .hero-in{grid-template-columns:1fr; gap:40px; padding-bottom:40px} }
/* On a narrow single column, min-height:330 × aspect 4/3 forces a 440px
   min-width that overflows the column — drop the floor so aspect-ratio alone
   sizes the photo to the column width. */
@media(max-width:860px){ .ylp .hero-photo,.ylp .sleep-photo{min-height:0} }
.ylp .hero-photo,.ylp .sleep-photo{max-width:100%}
.ylp .hero .eyebrow{color:var(--teal)}
.ylp .hero h1{font-size:clamp(38px,5.4vw,60px); line-height:1.03; letter-spacing:-.035em; font-weight:840; margin:16px 0 0; max-width:15ch; text-wrap:balance}
.ylp .hero h1 .t{color:var(--teal-deep)}
.ylp .hero .lede{color:var(--ink2); font-size:18.5px; line-height:1.5; max-width:44ch; margin-top:18px}
.ylp .hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.ylp .hero .trust{margin-top:24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3)}
.ylp .hero-photo{position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--sh); aspect-ratio:4/3; min-height:330px;
  background-image:url('/static/img/hero.jpg'); background-size:cover; background-position:50% 42%}

/* ── phones (true tall proportions), iOS + Android ────── */
.ylp .phone{position:relative; z-index:2; width:264px; background:#0a1e1a; box-shadow:var(--sh-ph)}
.ylp .phone.ios{border-radius:46px; padding:10px} .ylp .phone.android{border-radius:30px; padding:7px}
.ylp .scr{position:relative; overflow:hidden; background:#fff; aspect-ratio:9 / 19.6; display:flex; flex-direction:column}
.ylp .phone.ios .scr{border-radius:37px} .ylp .phone.android .scr{border-radius:24px}
.ylp .island{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:82px; height:23px; background:#0a1e1a; border-radius:999px; z-index:8}
.ylp .punch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:9px; height:9px; background:#0a1e1a; border-radius:50%; z-index:8}
.ylp .status{display:flex; align-items:center; justify-content:space-between; padding:13px 20px 0; font-size:11px; font-weight:700; color:var(--ink); flex:none}
.ylp .phone.android .status{padding-top:9px}
.ylp .status .r{display:flex; gap:4px; align-items:center; color:var(--ink)}
.ylp .app{flex:1; display:flex; flex-direction:column; min-height:0; padding:10px 14px 0}
.ylp .app-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; flex:none}
.ylp .app-hd .t{font-size:14px; font-weight:760} .ylp .app-hd .t span{color:var(--ink3); font-weight:500}
.ylp .app-hd .av{width:26px;height:26px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep);display:grid;place-items:center;font-weight:800;font-size:11px}
.ylp .app-nav{display:flex; justify-content:space-around; padding:11px 0 4px; margin-top:auto; border-top:1px solid var(--line2); flex:none}
.ylp .app-nav i{width:22px;height:5px;border-radius:3px;background:var(--line)} .ylp .app-nav i.on{background:var(--teal);width:26px}
.ylp .homebar{width:108px; height:5px; border-radius:3px; background:var(--ink); opacity:.75; margin:6px auto 9px}
.ylp .phone.android .homebar{width:60px; opacity:.45}
/* chat */
.ylp .chat{display:flex; flex-direction:column; gap:8px; flex:1; min-height:0}
.ylp .bub{max-width:86%; font-size:12px; line-height:1.45; padding:9px 11px; border-radius:14px}
.ylp .bub.ai{align-self:flex-start; background:var(--tint); border:1px solid var(--teal-soft); color:var(--ink2); border-bottom-left-radius:4px}
.ylp .bub.ai b{color:var(--teal-deep)} .ylp .bub.ai .k{color:var(--teal); font-weight:700}
.ylp .bub.me{align-self:flex-end; background:var(--teal); color:#fff; border-bottom-right-radius:4px}
.ylp .qrow{display:flex; gap:6px; flex-wrap:wrap}
.ylp .qchip{font-size:11px; font-weight:650; color:var(--teal-deep); background:#fff; border:1.5px solid var(--teal-soft); border-radius:999px; padding:6px 11px}
.ylp .cin{margin-top:auto; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:11.5px; color:var(--ink3)}
.ylp .cin .send{margin-left:auto; width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
/* nyrr */
.ylp .ncard{background:linear-gradient(160deg,#0f9b8e,#0a544e); border-radius:18px; padding:15px; color:#fff}
.ylp .ncard .top{display:flex; justify-content:space-between; align-items:baseline}
.ylp .ncard .eyb{font-family:var(--mono); font-size:9px; letter-spacing:.14em}
.ylp .ncard .cnt{font-size:24px; font-weight:820} .ylp .ncard .cnt span{font-size:12px; opacity:.7}
.ylp .nseg{display:flex; gap:4px; margin:11px 0 8px}
.ylp .nseg i{flex:1; height:8px; border-radius:3px; background:rgba(255,255,255,.22)}
.ylp .nseg i.on{background:var(--glow)} .ylp .nseg i.next{background:rgba(255,255,255,.4); box-shadow:inset 0 0 0 1.5px #fff}
.ylp .ncard .nn{font-size:11px; color:#cdece6}
.ylp .nrace{border:1px solid var(--line); border-radius:13px; padding:11px; display:flex; gap:10px; align-items:center}
.ylp .nrace .ic{width:32px;height:32px;border-radius:9px;background:var(--teal-soft);color:var(--teal-deep);display:grid;place-items:center;flex:none}
.ylp .nrace .tt{font-size:12px;font-weight:700} .ylp .nrace .ss{font-size:10px;color:var(--ink3)}
/* coach card (in-phone) — clean, roomy */
.ylp .ccard{display:flex; flex-direction:column; padding-top:6px}
.ylp .cc-hd{display:flex; align-items:center; gap:9px; margin-bottom:15px}
.ylp .cc-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#16b3a3,#0a6d64);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.ylp .cc-nm{font-size:13px;font-weight:750;line-height:1.1} .ylp .cc-when{font-size:10px;color:var(--ink3);margin-top:1px}
.ylp .cc-read{font-size:12.5px;line-height:1.62;color:var(--ink)} .ylp .cc-read b{color:var(--teal-deep);font-weight:700}
.ylp .cc-next{margin-top:15px;border-left:3px solid var(--teal);padding-left:12px}
.ylp .cc-next .l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--teal);font-weight:700;text-transform:uppercase}
.ylp .cc-next p{font-size:12px;line-height:1.55;color:var(--ink2);margin-top:5px}
.ylp .cc-focus{margin-top:15px;padding-top:12px;border-top:1px solid var(--line2);font-size:11px;color:var(--ink3);line-height:1.55}

/* ── sections ─────────────────────────────────────────── */
.ylp section.band{padding:70px 0}
.ylp .band.tint{background:var(--tint); border-top:1px solid var(--line2); border-bottom:1px solid var(--line2)}
.ylp .feat{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center}
.ylp .feat.rev .copy{order:2}
/* Mobile: stack every feature section copy-FIRST, image second — including
   the .rev sections (whose DOM is image-then-copy for the desktop L/R swap).
   Consistent "headline → text → image" reading order; the old mix (some
   image-first, some copy-first) read as confusing. */
@media(max-width:860px){ .ylp .feat{grid-template-columns:1fr; gap:32px} .ylp .feat.rev .copy{order:-1} }
.ylp .copy .eyebrow{color:var(--teal)}
.ylp .copy h2{font-size:clamp(27px,3.6vw,40px); line-height:1.06; letter-spacing:-.03em; font-weight:820; margin-top:13px; text-wrap:balance}
.ylp .copy p{font-size:17px; color:var(--ink2); margin-top:13px; max-width:42ch; line-height:1.55}
.ylp .copy .pts{margin-top:18px; display:flex; flex-direction:column; gap:10px}
.ylp .copy .pts div{display:flex; gap:11px; align-items:flex-start; font-size:15px}
.ylp .copy .pts svg{flex:none; margin-top:3px; color:var(--teal)}
.ylp .center{display:flex; justify-content:center}
.ylp .sleep-photo{width:100%; border-radius:26px; aspect-ratio:4/3; min-height:330px; box-shadow:var(--sh);
  background-image:url('/static/img/sleep.jpg'); background-size:cover; background-position:center}

/* ── teal statement band (text on teal) ───────────────── */
.ylp .say{background:linear-gradient(120deg,#0a6a60,#083f39); color:#fff; text-align:center}
.ylp .say .in{padding-top:76px; padding-bottom:76px}  /* keep .wrap's 0 24px sides */
.ylp .say .eyebrow{color:var(--glow)}
.ylp .say h2{font-size:clamp(28px,4vw,46px); line-height:1.08; letter-spacing:-.03em; font-weight:820; margin:14px auto 0; max-width:20ch; text-wrap:balance}
.ylp .say .quote{font-size:19px; line-height:1.55; color:#d3efe9; max-width:56ch; margin:20px auto 0}
.ylp .say .quote b{color:#fff} .ylp .say .quote .k{color:var(--glow); font-weight:700}
.ylp .say .cta{margin-top:30px}

/* triad + strip */
.ylp .triad{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:760px){ .ylp .triad{grid-template-columns:1fr} }
.ylp .tri{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--sh)}
.ylp .tri .ic{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal-deep)}
.ylp .tri h3{font-size:17px;font-weight:760;margin-top:14px} .ylp .tri p{font-size:14.5px;color:var(--ink2);margin-top:7px;line-height:1.5}
.ylp .band-head{text-align:center; max-width:36ch; margin:0 auto 40px}
.ylp .band-head .eyebrow{color:var(--teal)}
.ylp .band-head h2{font-size:clamp(26px,3.4vw,38px); line-height:1.08; letter-spacing:-.03em; font-weight:820; margin-top:12px}
.ylp .strip{text-align:center; padding:52px 0 74px; background:var(--tint); border-top:1px solid var(--line2)}
.ylp .strip .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink3)}
.ylp .logos{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px}
.ylp .logos span{font-size:15px; font-weight:760; color:var(--ink2); background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 18px; box-shadow:var(--sh)}

/* ── cross-tracker moat ("Switch watches. Keep everything.") — picture card ─
   Lives in a standard .feat two-column row (copy | picture). The picture is a
   HORIZONTAL convergence diagram: 3 device chips -> converge rightward -> one
   YUHA history, sized to fit the .center column. */
.ylp .xt-card{width:100%; max-width:480px; background:linear-gradient(170deg,#f5fbf9,#eaf6f2); border:1px solid var(--line); border-radius:24px; padding:22px 20px; box-shadow:var(--sh)}
/* minmax(0,1fr) lets the history column shrink below its content min-width so
   the card never overflows/clips on narrow phones (a bare 1fr won't shrink). */
.ylp .xt-flow{display:grid; grid-template-columns:96px 34px minmax(0,1fr); align-items:stretch; gap:0}
.ylp .xt-devs{display:flex; flex-direction:column; justify-content:space-between; gap:11px}
.ylp .xt-dev{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 6px; box-shadow:0 1px 3px rgba(11,26,22,.05); text-align:center}
.ylp .xt-dot{display:block; width:14px; height:14px; border-radius:5px; margin:0 auto 6px}
.ylp .xt-dev b{display:block; font-size:12px; font-weight:720; color:var(--ink); line-height:1.15}
.ylp .xt-dev .yr{display:block; font-family:var(--mono); font-size:9.5px; color:var(--teal2); margin-top:4px}
.ylp .xt-merge{position:relative}
.ylp .xt-merge svg{position:absolute; inset:0; width:100%; height:100%}
.ylp .xt-hist{min-width:0; align-self:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 1px 3px rgba(11,26,22,.05)}
.ylp .xt-hist-hd{display:flex; align-items:center; gap:8px; margin-bottom:11px}
.ylp .xt-hist-hd .xlogo{width:24px; height:24px; border-radius:7px; background:linear-gradient(150deg,var(--teal-bright),var(--teal-deep)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px}
.ylp .xt-hist-hd b{font-size:13.5px; font-weight:760}
.ylp .xt-hist-hd .tag{margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal2); background:var(--teal-soft); padding:3px 7px; border-radius:20px}
.ylp .xt-bar{height:13px; border-radius:7px; overflow:hidden; display:flex; box-shadow:inset 0 0 0 1px rgba(8,63,57,.06)}
.ylp .xt-bar i{height:100%}
.ylp .xt-axis{display:flex; justify-content:space-between; margin-top:6px; font-family:var(--mono); font-size:10px; color:var(--ink3)}
.ylp .xt-note{margin-top:11px; font-size:12px; line-height:1.5; color:var(--ink2)}
.ylp .xt-note b{color:var(--teal-deep)}
/* phones: tighten the picture so the history panel stays legible */
@media(max-width:560px){
  .ylp .xt-card{padding:18px 16px}
  .ylp .xt-flow{grid-template-columns:82px 26px minmax(0,1fr)}
  .ylp .xt-dev{padding:9px 5px}
}

/* ── footer (text on teal) ────────────────────────────── */
.ylp .foot{background:linear-gradient(160deg,#0a5850,#072f2a); color:#cfe6e0; padding:60px 0 30px}
.ylp .foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px}
@media(max-width:720px){ .ylp .foot-top{grid-template-columns:1fr 1fr; row-gap:34px} }
.ylp .foot-brand .b{display:flex; align-items:center; gap:10px; font-weight:820; font-size:20px; letter-spacing:-.03em; color:#fff}
.ylp .foot-brand .logo{width:32px;height:32px;border-radius:9px;background:#fff;color:var(--teal-deep);display:grid;place-items:center;font-weight:800;font-size:16px}
.ylp .foot-brand p{color:#8fbdb3; font-size:14px; line-height:1.55; margin-top:14px; max-width:30ch}
.ylp .foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#8fe9de; font-weight:600; margin:0 0 14px}
.ylp .foot-col a,.ylp .foot-col button{display:block; color:#cfe6e0; text-decoration:none; font-size:14.5px; padding:6px 0; font-weight:500; transition:color .12s; background:none; border:0; text-align:left; font-family:inherit; letter-spacing:inherit}
.ylp .foot-col a:hover,.ylp .foot-col button:hover{color:#fff}
.ylp .foot-col a:focus-visible,.ylp .foot-col button:focus-visible{outline:2px solid var(--glow); outline-offset:2px; border-radius:3px}
.ylp .foot-bar{margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.13); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:#7fa9a0}
.ylp .foot-bar .r{display:flex; gap:18px} .ylp .foot-bar .r a,.ylp .foot-bar .r button{color:#cfe6e0; text-decoration:none; background:none; border:0; font:inherit; cursor:pointer} .ylp .foot-bar .r a:hover,.ylp .foot-bar .r button:hover{color:#fff}

/* ── When the landing (hero) is active, hide the shared thin auth chrome
   (.l-nav / .l-foot) that transformAuthOverlay renders for the form views.
   views-init.js toggles #auth-overlay.landing-active on view switches. ── */
#auth-overlay.landing-active > .l-nav,
#auth-overlay.landing-active > .l-foot{ display:none !important; }

/* ── Grid-item photo overflow guard (placed LAST so it wins the cascade) ──
   .hero-photo / .sleep-photo are grid items with aspect-ratio 4/3 + a
   min-height floor. On a narrow column that min-height forces an
   aspect-derived MIN-WIDTH (330 × 4/3 = 440px) which expands the 1fr track
   past the viewport and cuts the copy + photo off on the right. min-width:0
   lets the track shrink to the column; the mobile min-height:0 (after ALL
   base rules, so it actually applies to BOTH photos — the earlier override
   sat before the .sleep-photo base def and lost) removes the floor so
   aspect-ratio alone sizes the photo to the column width. */
.ylp .hero-photo,.ylp .sleep-photo{ min-width:0; max-width:100%; }
@media(max-width:860px){ .ylp .hero-photo,.ylp .sleep-photo{ min-height:0; } }