/* Life product page (/life). Everything is scoped under .lp, or under body.life-page for the site header and footer on this page only, so the
   rest of the site is untouched. Colours follow the Life app (web/styles.css in the Life repository) on a deeper midnight navy:
   signal teal #63AFB5, orange #FF8A3D, Blue's own #3b8cff; type is Archivo (OFL, self-hosted). */
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

.lp { --void:#070b16; --navy:#0b1328; --card:rgba(17,26,46,.72); --card-solid:#111a2e; --raised:#17223b; --line:#25314b; --hair:rgba(168,188,228,.12); --hair-2:rgba(168,188,228,.2);
  --ink:#eef2fb; --ink-2:#a9b4c9; --faint:#8692aa;
  --signal:#63AFB5; --signal-ink:#8fc7cc; --orange:#FF8A3D; --amber:#FFB35C; --peach:#ffc996; --teal:#2fe0b0; --cobalt:#93bbff; --blue:#3b8cff;
  --font:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --r:22px; --ease:cubic-bezier(.22,.68,0,1);
  --gut:clamp(16px,4.5vw,72px); --max:1180px; --sp:clamp(84px, 10vw, 140px);
  background:
    radial-gradient(1100px 620px at 78% -120px, rgba(59,110,255,.16), transparent 70%),
    radial-gradient(900px 600px at 0% 18%, rgba(99,175,181,.07), transparent 70%),
    linear-gradient(180deg, #0a1122 0, var(--void) 900px);
  color:var(--ink); font:400 17px/1.6 var(--font); overflow:clip; position:relative; isolation:isolate }
.lp *, .lp *::before, .lp *::after { box-sizing:border-box }
.lp :focus-visible { outline:3px solid var(--signal-ink); outline-offset:3px; border-radius:8px }
.lp a { color:inherit }
.lp img { max-width:100%; height:auto; display:block }
.lp-wrap { width:min(100% - 2*var(--gut), var(--max)); margin-inline:auto }
.lp h1, .lp h2, .lp h3 { font-family:var(--font); color:var(--ink); margin:0; font-weight:800; letter-spacing:-.025em; font-stretch:104%; text-wrap:balance }
.lp h2 { font-size:clamp(2.05rem, 4.9vw, 3.9rem); line-height:1.03; max-width:16ch }
.lp h3 { font-size:clamp(1.12rem, 1.7vw, 1.3rem); line-height:1.28; letter-spacing:-.01em; font-weight:700 }
.lp p { margin:0 }
.lp-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--signal-ink) }
.lp-eyebrow::before { content:''; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--orange), var(--signal)) }
.lp-lead { font-size:clamp(1.05rem, 1.5vw, 1.22rem); line-height:1.62; color:var(--ink-2); max-width:54ch; text-wrap:pretty }
.lp-muted { color:var(--ink-2) }
.lp-note { font-size:13px; color:var(--faint); letter-spacing:.01em }
.lp section { position:relative; padding-block:var(--sp); scroll-margin-top:64px }
.lp-sec-head { display:grid; gap:18px; margin-bottom:clamp(34px, 5vw, 60px) }

/* ---------- site header and footer on this page only: midnight glass instead of the paper white, the official mark in its light colour ---------- */
body.life-page { background:#070b16 }
.life-page .site-header { position:relative; z-index:30; color:#e9eef9; background:linear-gradient(180deg, rgba(10,16,32,.96), rgba(10,17,34,.9)); border-bottom:1px solid rgba(168,188,228,.1) }
.life-page .site-header .brand, .life-page .site-header .brand>span { color:#eef2fb }
.life-page .site-header .brand-mt { color:#a9b4c9 }
.life-page .desktop-nav a { color:rgba(233,238,249,.76) }
.life-page .desktop-nav a:hover, .life-page .desktop-nav a:focus-visible { color:#fff }
.life-page .header-cta { color:#eef2fb; border-left-color:rgba(168,188,228,.16) }
.life-page .header-cta:hover { color:#ffc996 }
.life-page .menu-toggle { color:#e9eef9 }
.life-page .menu-icon i { background:#e9eef9 }
.life-page .mobile-menu { background:#0a1122; border-top-color:rgba(168,188,228,.12) }
.life-page .mobile-menu a { color:#eef2fb; border-bottom-color:rgba(168,188,228,.12) }
.life-page .mobile-menu p { color:#a9b4c9 }
.life-page .site-header :focus-visible { outline-color:#8fc7cc }
.life-page .site-footer { background:#070b16; color:#a9b4c9; border-top:1px solid rgba(168,188,228,.1) }
.life-page .site-footer a { color:#dfe6f4 }
.life-page .site-footer a:hover { color:#ffc996 }
.life-page .footer-statement p, .life-page .footer-statement span { color:#e9eef9 }
.life-page .footer-statement em { color:#ffc996 }
.life-page .site-footer .eyebrow { color:#8fc7cc }
.life-page .footer-brand p, .life-page .footer-bottom p { color:#a9b4c9 }
.life-page .footer-bottom, .life-page .footer-main, .life-page .legal-links { border-color:rgba(168,188,228,.12) }
.life-page .legal-links a { color:#a9b4c9 }
.life-page .lp-footer-brand { display:inline-flex; color:#eef2fb; min-height:48px }
.life-page .lp-footer-brand img { width:45px; height:41px }

/* tablets and phones: main.js folds the site menu into the Menu button once it runs; with JavaScript on, lay the header out that way from the
   first paint so it does not jump (without JavaScript the links stay in the header, as on the rest of the site) */
@media (max-width:900px) {
  .lp-js-early .life-page .site-header:not(.nav-enhanced) .desktop-nav { display:none }
  .lp-js-early .life-page .site-header:not(.nav-enhanced) .menu-toggle { display:flex; visibility:hidden }
}

/* ---------- buttons, pills ---------- */
.lp-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:15px 26px; border-radius:999px; font:700 16px/1 var(--font); letter-spacing:-.005em;
  text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s; white-space:nowrap }
.lp-btn-primary { color:#170b02; background:linear-gradient(180deg, #ffbd84 0%, #ff9a52 48%, var(--orange) 100%);
  box-shadow:0 14px 34px -14px rgba(255,138,61,.75), 0 2px 0 rgba(255,255,255,.35) inset, 0 -2px 0 rgba(160,60,0,.25) inset }
.lp-btn-primary:hover { transform:translateY(-1px); box-shadow:0 18px 40px -14px rgba(255,138,61,.85), 0 2px 0 rgba(255,255,255,.4) inset, 0 -2px 0 rgba(160,60,0,.25) inset }
.lp-btn-primary:active { transform:translateY(1px) scale(.99) }
.lp-btn-primary:focus-visible { outline:3px solid #ffd3a8; outline-offset:3px }
.lp-btn-ghost { color:var(--ink); background:rgba(147,187,255,.06); border-color:var(--hair-2) }
.lp-btn-ghost:hover { background:rgba(147,187,255,.11); border-color:rgba(168,188,228,.32) }
.lp-btn-ghost:active { transform:scale(.99) }
.lp-btn[aria-disabled="true"] { opacity:.55; pointer-events:none }
.lp-pill { display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:600; color:#c3cde0; background:rgba(147,187,255,.06); border:1px solid var(--hair-2) }
.lp-pill i { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(47,224,176,.15) }

/* soft coloured light behind content */
.lp-glow { position:absolute; inset:auto; pointer-events:none; z-index:-1; filter:blur(10px); opacity:.85 }
.lp-glow.o { width:820px; height:820px; background:radial-gradient(closest-side, rgba(255,138,61,.15), transparent 70%) }
.lp-glow.t { width:900px; height:900px; background:radial-gradient(closest-side, rgba(99,175,181,.14), transparent 70%) }
.lp-glow.c { width:760px; height:760px; background:radial-gradient(closest-side, rgba(59,140,255,.14), transparent 70%) }
.lp-divider { height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent) }

/* ---------- phones: CSS-drawn frames around real screenshots ---------- */
.lp-phone { position:relative; width:var(--w, 300px); aspect-ratio:393/852; padding:calc(var(--w,300px) * .03); border-radius:calc(var(--w,300px) * .165);
  background:linear-gradient(150deg, #626a78 0%, #2a303b 14%, #12151c 42%, #1d222b 70%, #4f5663 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 calc(var(--w,300px) * .011) #07080b, 0 60px 110px -50px rgba(0,0,0,.95), 0 30px 60px -34px rgba(6,14,40,.9) }
.lp-phone::after { content:''; position:absolute; inset:calc(var(--w,300px) * .03); border-radius:calc(var(--w,300px) * .136); box-shadow:inset 0 0 0 1px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06); pointer-events:none; z-index:3 }
.lp-phone img { width:100%; height:100%; object-fit:cover; border-radius:calc(var(--w,300px) * .136); background:var(--void) }
.lp-phone.ios::before { content:''; position:absolute; z-index:4; top:calc(var(--w,300px) * .058); left:50%; width:29%; height:calc(var(--w,300px) * .084); transform:translateX(-50%); border-radius:99px; background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) }
.lp-phone.android { border-radius:calc(var(--w,300px) * .12) }
.lp-phone.android img, .lp-phone.android::after { border-radius:calc(var(--w,300px) * .095) }
.lp-phone.android::before { content:''; position:absolute; z-index:4; top:calc(var(--w,300px) * .06); left:50%; width:calc(var(--w,300px) * .045); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:#000; box-shadow:0 0 0 2px #10131a }
.lp-cap { margin-top:16px; text-align:center; font-size:12px; color:var(--faint); letter-spacing:.04em }
/* iPhones: the installed app under the iPhone's status bar (each screenshot is the app, 393 x 798; the bar is the phone's, in the colour of the screen under it) */
.lp-phone.sb { display:flex; flex-direction:column; overflow:hidden }
.lp-phone.sb .lp-statusbar { flex:none; height:calc((var(--w) - var(--w) * .06) * 54 / 393); display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--w) * .012) calc(var(--w) * .075) 0; border-radius:calc(var(--w) * .136) calc(var(--w) * .136) 0 0; background:var(--sb, #0b1220); color:#f4f7fb;
  font:600 calc(var(--w) * .043)/1 -apple-system, 'SF Pro Text', 'Archivo', system-ui, sans-serif; letter-spacing:-.01em }
.lp-phone.sb .lp-statusbar .i { display:flex; gap:calc(var(--w) * .014); align-items:center }
.lp-phone.sb .lp-statusbar svg { width:auto; height:calc(var(--w) * .034); fill:currentColor }
.lp-phone.sb img { flex:1; min-height:0; height:auto; border-radius:0 0 calc(var(--w) * .136) calc(var(--w) * .136); object-fit:cover; object-position:top }

/* ---------- the Life bar under the site header ---------- */
.lp-bar { position:sticky; top:0; z-index:20; background:rgba(9,14,28,.78); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--hair) }
.lp-bar .lp-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px }
.lp-bar-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; text-decoration:none; letter-spacing:-.01em; min-height:44px }
.lp-bar-brand img { width:22px; height:22px }
.lp-bar nav { display:flex; gap:clamp(12px, 2.2vw, 26px); font-size:14px; color:var(--ink-2) }
.lp-bar nav a { text-decoration:none; padding:10px 2px }
.lp-bar nav a:hover { color:var(--ink) }
.lp-bar .lp-btn { min-height:40px; padding:10px 18px; font-size:14px }

/* ---------- hero ---------- */
.lp-hero { padding-block:clamp(36px, 4.5vw, 64px) clamp(64px, 8vw, 120px) !important }
.lp-hero > .lp-wrap { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(28px, 5vw, 72px); align-items:start }
.lp-hero-copy { padding-top:clamp(8px, 3.2vw, 48px) }
.lp-hero h1 { font-size:clamp(2.7rem, 5.3vw, 4.7rem); line-height:.97; letter-spacing:-.045em; font-stretch:106%; margin:24px 0 24px; max-width:11ch }
.lp-hero h1 span { background:linear-gradient(96deg, #ffd7ae 0%, #ffab6b 32%, var(--orange) 55%, #ffb27a 78%, #f3d2b4 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-bottom:.06em }
.lp-hero .lp-lead { max-width:42ch; font-size:clamp(1.06rem, 1.45vw, 1.2rem) }
.lp-cta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-top:32px }
.lp-devices { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; font-size:14px; color:var(--faint) }
.lp-devices > span { margin-right:2px }
.lp-devices a { display:inline-flex; align-items:center; min-height:40px; color:var(--ink-2); text-decoration:none; padding:8px 15px; border-radius:99px; border:1px solid var(--hair-2); background:rgba(147,187,255,.03); transition:background .2s, border-color .2s, color .2s }
.lp-devices a:hover { color:var(--ink); border-color:rgba(168,188,228,.34); background:rgba(147,187,255,.08) }
.lp-devices a[aria-current="true"] { color:var(--ink); border-color:rgba(99,175,181,.7); background:rgba(99,175,181,.13); box-shadow:inset 0 0 0 1px rgba(99,175,181,.25) }
.lp-devices a[aria-current="true"]::before { content:''; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--signal-ink) }
.lp-beta { margin-top:22px; display:flex; gap:12px; align-items:flex-start; max-width:50ch; padding:13px 16px; border-radius:16px; font-size:14.5px; line-height:1.55; color:var(--ink-2);
  background:linear-gradient(180deg, rgba(147,187,255,.06), rgba(147,187,255,.025)); border:1px solid var(--hair) }
.lp-beta b { color:var(--ink) }
.lp-beta > span:first-child { flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:14px; background:rgba(255,179,92,.1); border:1px solid rgba(255,179,92,.2) }

/* the stage: the phone with the real Today screen, and Blue sitting on its top edge (his drawing's edge line, y 56 of 80, on the frame) */
.lp-stage { --pw:clamp(270px, 22vw, 318px); --ps:calc(var(--pw) * 1.02); position:relative; display:grid; justify-items:center; padding-top:calc(var(--ps) * .44) }
.lp-stage-light { position:absolute; z-index:-1; left:50%; top:46%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(59,120,255,.24), rgba(59,120,255,.07) 55%, transparent 72%), radial-gradient(40% 30% at 70% 78%, rgba(255,138,61,.12), transparent 70%) }
.lp-device { position:relative; margin:0; width:var(--pw) }
.lp-device .lp-phone { --w:var(--pw) }
.lp-perch { position:absolute; z-index:5; width:var(--ps); height:var(--ps); left:calc(var(--pw) * .64 - var(--ps) / 2); top:calc(var(--ps) * -.7); pointer-events:none }
/* Blue, rendered in 3D (assets/images/life/blue-3d.webp; the clips in assets/video/life draw onto the canvas in exactly the same box).
   Measured in the render: his seat line (the ledge he sits on) is 71.36% down, his body's centre 56.31% across, his body 64.3% of its
   width. The box is placed so the seat line is the phone's top edge (70% down the perch) and his body is centred where it always was. */
.lp-blue3d { --a:calc(var(--ps) * .5735); position:absolute; width:var(--a); aspect-ratio:680 / 704; left:calc(var(--ps) * .5 - var(--a) * .5631);
  top:calc(var(--ps) * .7 - var(--a) * 1.0353 * .7136); transform-origin:56.31% 71.36%; transition:transform .45s cubic-bezier(.3,.7,.3,1) }
@media (max-width: 340px) { .lp-blue3d { --a:calc(var(--ps) * .553) } }       /* the status bar does not shrink with the phone: his feet stay above the app */
.lp-blue3d > img, .lp-blue3d > canvas { position:absolute; inset:0; width:100%; height:100%; display:block;
  filter:drop-shadow(0 calc(var(--ps) * .022) calc(var(--ps) * .026) rgba(2,5,14,.5)) drop-shadow(0 0 calc(var(--ps) * .045) rgba(59,140,255,.28)) }
.lp-blue3d > canvas { opacity:0; transition:opacity .25s ease }
.lp-perch.live .lp-blue3d > canvas { opacity:1 }
.lp-perch.live .lp-perch-still { visibility:hidden; transition:visibility 0s .3s }   /* only once the canvas has faded in: never a moment without him */
.lp-blue3d.rest { animation:lp-breathe 4.8s ease-in-out infinite alternate }
@keyframes lp-breathe { to { transform:scaleY(1.008) } }
.lp-blue3d.lean-l { transform:rotate(-2.2deg) } .lp-blue3d.lean-r { transform:rotate(2.2deg) }
/* the clips themselves: real, on screen, under the canvas, at 1% (WebKit may refuse or pause a video it considers invisible; 1% over the
   still or the canvas cannot be seen). The canvas draws him from them. */
.lp-blue3d > .lp-blue-clip { position:absolute; inset:0; width:100%; height:100%; opacity:.01; pointer-events:none; object-fit:fill; z-index:0 }
.lp-blue3d > canvas { z-index:1 }
/* where he sits: a soft shadow on the frame's top edge and the glass just under it */
.lp-perch-contact { position:absolute; left:50%; top:68.6%; width:46%; height:7%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.2) 60%, transparent) }
.lp-stage-note { margin-top:18px; text-align:center }

/* ---------- statement + pillars ---------- */
.lp-statement { font-size:clamp(1.55rem, 3.2vw, 2.6rem); line-height:1.16; letter-spacing:-.025em; font-weight:700; max-width:28ch; color:var(--ink); text-wrap:balance }
.lp-statement em { font-style:normal; color:var(--faint) }
.lp-pillars { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; margin-top:clamp(40px, 5.5vw, 68px) }
.lp-pillar { padding:22px 20px 24px; border-radius:var(--r); background:linear-gradient(180deg, rgba(26,38,64,.75), rgba(15,23,41,.55)); border:1px solid var(--hair); box-shadow:inset 0 1px 0 rgba(255,255,255,.04) }
.lp-pillar .ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px }
.lp-pillar .ic svg { width:22px; height:22px }
.lp-pillar p { margin-top:8px; font-size:15px; line-height:1.55; color:var(--ink-2) }

/* ---------- feature rows ---------- */
.lp-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px, 6vw, 96px); align-items:center }
.lp-feature.flip .lp-feature-media { order:-1 }
.lp-feature-media { position:relative; display:flex; justify-content:center; gap:clamp(14px, 2vw, 26px); min-height:clamp(420px, 44vw, 640px); align-items:center }
.lp-feature-media .lp-phone { --w:clamp(230px, 22vw, 300px) }
.lp-feature-media .lp-phone.second { --w:clamp(196px, 18vw, 252px); margin-top:clamp(40px, 6vw, 90px) }
.lp-list { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:2px }
.lp-list li { display:grid; grid-template-columns:28px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--hair); color:var(--ink-2); font-size:16px; line-height:1.55 }
.lp-list li:last-child { border-bottom:1px solid var(--hair) }
.lp-list li b { color:var(--ink); font-weight:700 }
.lp-list .tick { width:22px; height:22px; margin-top:2px; border-radius:7px; display:grid; place-items:center; background:rgba(99,175,181,.14); color:var(--signal-ink); font-size:13px; font-weight:800 }
.lp-tabs-mini { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.lp-tabs-mini span { padding:8px 12px; border-radius:12px; font-size:13px; color:var(--ink-2); background:rgba(147,187,255,.04); border:1px solid var(--hair) }
.lp-tabs-mini span b { color:var(--ink) }

/* ---------- integrations ---------- */
.lp-int { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:34px }
.lp-int article { padding:22px; border-radius:var(--r); background:var(--card); border:1px solid var(--hair); display:grid; gap:10px; align-content:start; box-shadow:inset 0 1px 0 rgba(255,255,255,.035) }
.lp-int .tag { justify-self:start; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:8px }
.lp-int .tag.live { color:#bff3e4; background:rgba(47,224,176,.12) }
.lp-int .tag.beta { color:#ffd8b8; background:rgba(255,138,61,.14) }
.lp-int .tag.soon { color:var(--ink-2); background:rgba(255,255,255,.06) }
.lp-int p { font-size:15px; line-height:1.55; color:var(--ink-2) }
.lp-gcal { margin-top:clamp(40px, 5vw, 64px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px, 5vw, 70px); align-items:center; padding:clamp(22px, 4vw, 48px);
  border-radius:calc(var(--r) + 8px); background:linear-gradient(140deg, rgba(99,175,181,.10), rgba(15,23,41,.6) 45%, rgba(59,140,255,.09)); border:1px solid var(--hair) }
.lp-gcal ul { margin:18px 0 0; padding-left:20px; color:var(--ink-2); display:grid; gap:10px; font-size:15.5px; line-height:1.55 }
.lp-gcal ul b { color:var(--ink) }
.lp-gcal .lp-phone { --w:clamp(220px, 21vw, 290px); margin-inline:auto }
.lp-text-link { color:var(--signal-ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px }

/* ---------- coach ---------- */
.lp-coach { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:28px }
.lp-coach article { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:6px 20px; align-items:start; padding:20px 22px; border-radius:var(--r); background:var(--card); border:1px solid var(--hair) }
.lp-coach article p { margin-top:0; font-size:15px; color:var(--ink-2); line-height:1.55 }
.lp-coach .quote { grid-column:2; margin-top:6px; justify-self:start; padding:12px 14px; border-radius:14px; background:rgba(99,175,181,.08); border:1px solid rgba(99,175,181,.2); font-size:14px; color:var(--signal-ink) }
.lp-off { display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding:16px 18px; border-radius:16px; background:rgba(255,179,92,.07); border:1px solid rgba(255,179,92,.22); font-size:15px; color:#f3d7b7; max-width:62ch }

/* ---------- get Life: device switcher ---------- */
.lp-get { background:linear-gradient(180deg, transparent, rgba(15,23,41,.6) 16%, rgba(15,23,41,.6) 84%, transparent) }
.lp-switch { justify-self:start; display:inline-flex; padding:5px; gap:4px; border-radius:999px; background:rgba(147,187,255,.05); border:1px solid var(--hair-2); margin-top:8px }
.lp-switch button { font:600 15px/1 var(--font); color:var(--ink-2); background:transparent; border:0; border-radius:999px; padding:12px 22px; min-height:46px; cursor:pointer; transition:background .25s, color .25s }
.lp-switch button:hover { color:var(--ink) }
.lp-switch button[aria-selected="true"] { color:#0b0e14; background:linear-gradient(180deg, #ffffff, #dfe6f4); box-shadow:0 6px 16px -8px rgba(0,0,0,.6) }
.lp-panel { margin-top:36px }
.lp-panel[hidden] { display:none }
.lp-panel-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px, 5vw, 70px); align-items:start }
.lp-dl { padding:clamp(22px, 3vw, 34px); border-radius:calc(var(--r) + 6px); background:linear-gradient(160deg, rgba(255,138,61,.12), rgba(15,23,41,.82) 42%); border:1px solid rgba(255,138,61,.22) }
.lp-dl h3 { font-size:clamp(1.5rem, 2.6vw, 2rem) }
.lp-dl dl { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:20px 0 0; font-size:14px }
.lp-dl dt { color:var(--faint) } .lp-dl dd { margin:0; color:var(--ink); overflow-wrap:anywhere }
.lp-dl .lp-btn { margin-top:22px }
.lp-private { margin-top:18px; padding:14px 16px; border-radius:14px; background:rgba(147,187,255,.045); border:1px solid var(--hair); font-size:15px; color:var(--ink-2) }
.lp-private b { color:var(--ink) }
.lp-steps { list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:10px }
.lp-steps li { counter-increment:s; display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; padding:14px 16px; border-radius:16px; background:var(--card); border:1px solid var(--hair); font-size:15.5px; line-height:1.5; color:var(--ink-2) }
.lp-steps li::before { content:counter(s); width:32px; height:32px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:15px; color:var(--ink); background:linear-gradient(180deg, rgba(99,175,181,.35), rgba(99,175,181,.12)) }
.lp-steps li b { color:var(--ink) }
.lp-ios { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px }
.lp-ios figure { margin:0; padding:18px; border-radius:var(--r); background:var(--card); border:1px solid var(--hair) }
.lp-ios figcaption { margin-top:14px; font-size:15px; line-height:1.5; color:var(--ink-2) }
.lp-ios figcaption b { display:block; color:var(--ink); font-size:16px; margin-bottom:2px }
.lp-ios .num { font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--signal-ink) }
/* iOS illustrations (drawn, not screenshots) */
.ill { height:150px; border-radius:16px; background:linear-gradient(180deg, #19223a, #0e1527); border:1px solid var(--hair); position:relative; overflow:hidden; display:grid; place-items:center }
.ill .url { position:absolute; left:12px; right:12px; bottom:12px; height:34px; border-radius:11px; background:#232d45; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ink-2) }
.ill .share { width:44px; height:44px; border-radius:12px; background:#232d45; display:grid; place-items:center; box-shadow:0 0 0 6px rgba(147,187,255,.12) }
.ill .sheet { position:absolute; left:14px; right:14px; bottom:0; padding:10px; border-radius:14px 14px 0 0; background:#232d45; display:grid; gap:6px }
.ill .row { height:30px; border-radius:9px; background:#2c3753; display:flex; align-items:center; gap:8px; padding:0 10px; font-size:12px; color:var(--ink-2) }
.ill .row.hl { background:rgba(147,187,255,.18); color:var(--ink); box-shadow:0 0 0 1px rgba(147,187,255,.45) inset }
.ill .row i { width:16px; height:16px; border-radius:5px; border:1.5px solid currentColor; display:inline-block }
.ill .add { position:absolute; top:12px; right:12px; padding:6px 12px; border-radius:9px; font-size:13px; font-weight:700; color:#93bbff; background:rgba(147,187,255,.12) }
.ill .home { display:grid; grid-template-columns:repeat(4, 34px); gap:12px }
.ill .home span { width:34px; height:34px; border-radius:9px; background:#2c3753 }
.ill .home span.life { background:#000 url('/assets/images/life/flame.svg') center/52% no-repeat; box-shadow:0 0 0 2px rgba(255,138,61,.6), 0 0 22px rgba(255,138,61,.45) }
.ill .sign { width:72%; display:grid; gap:7px }
.ill .sign span { height:26px; border-radius:8px; background:#2c3753 }
.ill .sign span.b { background:var(--signal); opacity:.85 }

/* ---------- privacy ---------- */
.lp-priv { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:28px }
.lp-priv article { padding:24px; border-radius:var(--r); background:var(--card); border:1px solid var(--hair) }
.lp-priv .ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(99,175,181,.12); margin-bottom:16px }
.lp-priv .ic svg { width:20px; height:20px }
.lp-priv p { margin-top:8px; font-size:15px; color:var(--ink-2); line-height:1.55 }

/* ---------- faq ---------- */
.lp-faq { margin-top:28px; border-top:1px solid var(--hair) }
.lp-faq details { border-bottom:1px solid var(--hair) }
.lp-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 4px; font-weight:700; font-size:clamp(1.02rem, 1.6vw, 1.2rem); color:var(--ink); min-height:44px }
.lp-faq summary::-webkit-details-marker { display:none }
.lp-faq summary::after { content:'+'; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:400; font-size:20px; color:var(--ink-2); border:1px solid var(--hair-2); transition:transform .3s var(--ease) }
.lp-faq details[open] summary::after { transform:rotate(45deg) }
.lp-faq .a { padding:0 4px 24px; color:var(--ink-2); max-width:72ch; line-height:1.65; font-size:16px }

/* ---------- closing: Blue says hello ---------- */
.lp-final { text-align:center; padding-top:clamp(36px, 5vw, 72px) !important }
.lp-hello { width:150px; margin:0 auto 18px; position:relative }                 /* Blue waving: a frame of his 3D wave, waist up */
.lp-hello::before { content:''; position:absolute; inset:8% 12% 0; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(59,140,255,.28), transparent 75%) }
.lp-hello img { display:block; width:100%; height:auto; filter:drop-shadow(0 6px 6px rgba(2,5,14,.5)) drop-shadow(0 0 10px rgba(59,140,255,.25)) }
.lp-final h2 { margin-inline:auto }
.lp-final .lp-cta { justify-content:center }
.lp-legalnav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:40px; font-size:14px }
.lp-legalnav a { color:var(--ink-2); text-decoration:none; min-height:44px; display:inline-flex; align-items:center }
.lp-legalnav a:hover { color:var(--ink) }

[data-platform="desktop"] [data-not-desktop], [data-platform="installed"] [data-not-desktop] { display:none }

/* ---------- motion: gentle reveals (only when the person allows motion; content is visible without JS) ---------- */
.lp-js .lp-reveal { opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease) }
.lp-js .lp-reveal.in { opacity:1; transform:none }
.lp-js .lp-reveal.d1 { transition-delay:.08s } .lp-js .lp-reveal.d2 { transition-delay:.16s } .lp-js .lp-reveal.d3 { transition-delay:.24s }
.lp-js .lp-stage { animation:lp-settle 1.1s var(--ease) both .15s }
@keyframes lp-settle { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation:none !important; transition:none !important }
  .lp-js .lp-reveal { opacity:1; transform:none }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .lp-pillars { grid-template-columns:repeat(3, minmax(0,1fr)) } .lp-int, .lp-priv { grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 900px) {
  .lp-hero > .lp-wrap, .lp-feature, .lp-gcal, .lp-panel-grid { grid-template-columns:minmax(0,1fr) }
  .lp-hero > .lp-wrap { gap:0 }
  .lp-hero-copy { display:contents }
  .lp-hero .lp-pill { order:1; justify-self:start } .lp-hero h1 { order:2; max-width:12ch } .lp-hero .lp-lead { order:3 }
  .lp-stage { order:4; margin-top:clamp(22px, 5vw, 40px) } .lp-hero .lp-cta { order:5 } .lp-devices { order:6 } .lp-beta { order:7 }
  .lp-stage { --pw:min(70vw, 330px) }
  .lp-feature.flip .lp-feature-media { order:0 }
  .lp-bar nav { display:none }
  .lp-ios { grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width: 640px) {
  .lp { font-size:16px; --sp:clamp(72px, 18vw, 96px) }
  .lp-hero { padding-block:34px 64px !important }
  .lp-hero h1 { font-size:clamp(2.55rem, 12.2vw, 3.35rem); margin:20px 0 18px; letter-spacing:-.04em }
  .lp-hero .lp-lead { font-size:1.06rem; line-height:1.6 }
  .lp-cta { margin-top:26px }
  .lp-stage { --pw:min(76vw, 300px) }
  .lp-devices { column-gap:8px } .lp-devices > span { flex-basis:100%; margin:0 0 2px } .lp-devices a { padding:8px 16px }
  .lp-pillars, .lp-int, .lp-priv, .lp-ios { grid-template-columns:minmax(0,1fr) }
  .lp-coach article { grid-template-columns:minmax(0,1fr) } .lp-coach .quote { grid-column:1 }
  .lp-feature-media { min-height:0 }
  .lp-feature-media { gap:0 } .lp-feature-media .lp-phone { --w:min(58vw, 244px) } .lp-feature-media .lp-phone.second { --w:min(44vw, 192px); margin-left:-12vw; position:relative; z-index:1 }
  .lp-cta .lp-btn { width:100% } .lp-switch { display:flex; width:100% } .lp-switch button { flex:1; padding:12px 8px }
  .lp-gcal .lp-phone { --w:min(66vw, 260px) }
  .lp-dl dl { grid-template-columns:1fr; gap:2px } .lp-dl dd { margin-bottom:8px }
  .lp-bar .lp-btn { padding:10px 14px; font-size:13.5px }
}
@media (max-width: 360px) {
  .lp-hero h1 { font-size:2.4rem }
  .lp-bar-brand { font-size:17px }
  .lp-bar .lp-btn { padding:9px 12px; font-size:13px }
  .lp-devices a { padding:8px 13px }
}
/* saying hello to Blue: a button over his head and body only (not the phone, not his legs), the one part of the perch that takes a tap */
.lp-blue-hit { position:absolute; left:30%; top:22%; width:40%; height:46%; padding:0; border:0; border-radius:46% 46% 40% 40%; background:transparent; cursor:pointer;
  pointer-events:auto; -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; -webkit-user-select:none; z-index:2 }
.lp-blue-hit:focus { outline:none }
.lp-blue-hit:focus-visible { outline:2px solid #f1c75b; outline-offset:3px; box-shadow:0 0 0 6px rgba(241,199,91,.18) }
.lp-blue-hi { position:absolute; left:68%; top:14%; padding:5px 10px; border-radius:12px 12px 12px 3px; background:#fffaf0; color:#10203f; font:700 .82rem/1 var(--font, system-ui);
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; white-space:nowrap }
.lp-blue-hi.on { opacity:1; transform:none }
/* reduced motion: the visitor may still choose to see him wave once */
.lp-blue-play { position:absolute; left:50%; top:76%; transform:translateX(-50%); padding:7px 12px; border-radius:99px; border:1px solid rgba(241,199,91,.6);
  background:rgba(11,18,40,.92); color:#f6e3ad; font:600 .78rem/1 var(--font, system-ui); white-space:nowrap; cursor:pointer; z-index:3; display:none; pointer-events:auto }
.lp-blue-play.on { display:block }
.lp-blue-play:focus-visible { outline:2px solid #f1c75b; outline-offset:3px }
.lp-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
@media (prefers-reduced-motion: reduce) { .lp-blue-hi, .lp-blue3d { transition:none; transform:none; animation:none } }