/* Basil: one stylesheet for the landing page and the privacy page, adapted from Rose (roseformom.com). */
/* System (wiki/growth/site.md, "Colors and the premium question")
   - One typeface, Geist. Three sizes: Display (headlines), Body 17 px (everything you read), Small 13 px (the footer).
   - Ink: three levels. 1 = what to read, 2 = what supports it, 3 = lines only, never text.
   - Space: an 8 px grid.
   - Color: ink on warm white, or ink on warm near-black. The page follows the visitor's light or dark setting.
     One accent outside the iPhone: basil green, for the leaf, the face, and the icons in the rotating line.
     Inside the iPhone: iOS's own colors, light or dark to match.
   - Logo: none on the landing page: the outcome line sits on top, and the face is in the headline.
     On the privacy page, Basil, the leaf with a face, alone at the top (basil-face.webp).
     The face cropped on pale sage (basil-avatar.webp) is the contact photo, the circle in the headline,
     the favicon (favicon.png), the home screen icon (icon.png), and the link preview (og.png).
   - The iPhone is a picture of a real phone. Inside it, iOS 26 sizes apply, scaled from 393 pt.
     1em inside the screen = 17 pt.
   - Layout: one centered column on every screen, after muse.ai: the mark, the headline, the button, then the phone.
     The text button is above the fold on a phone.
*/
:root{
  --t-display:clamp(34px,5.4vw,60px);
  --t-body:17px;
  --t-small:13px;
  /* Ink 2 on light is #6E6C67, not the brief's #8A8883: #8A8883 is 3.4 to 1 on the page, under the 4.5 that body text needs */
  --ink-1:#0F0F0E; --ink-2:#6E6C67; --ink-3:#B4B2AC;
  --bg:#FAFAF9; --line:rgba(15,15,14,.08); --surface:#EFEEEA;
  --accent:#2F7A4D;
  --s-1:8px; --s-2:16px; --s-6:48px;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ios:-apple-system,BlinkMacSystemFont,"SF Pro Text","Geist",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink-1:#F2F1ED; --ink-2:#9A988F; --ink-3:#5E5C56;
    --bg:#121211; --line:rgba(242,241,237,.10); --surface:#22221F;
    --accent:#5FB07E;
  }
}
/* Phones: small enough that the longest rotating phrase fits in two lines.
   Every phrase is held to two lines (.ph max-width below), so a short phrase never leaves a gap under it. */
@media (max-width:520px){:root{--t-display:min(33px,8.8vw);--ph-max:9.4em}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--sans);font-size:var(--t-body);line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink-1);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Mark: the coach's contact photo inside the iPhone. The face on pale sage (basil-avatar.webp, 288 px,
   8x its size here, so it stays sharp on any screen). The sage shows until it loads. */
.mark{display:grid;place-items:center;border-radius:50%;flex:none;overflow:hidden;background:#E7EFE3}
.mark img{display:block;width:100%;height:100%}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo picture,.logo picture img{display:block;height:44px;width:auto}

/* Page: narrow first */
.page{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 16px 0}
.page > main{width:100%}
.hero{display:flex;flex-direction:column;align-items:center;width:100%}
/* Width set on purpose: a centered flex column sizes children to their content, and some browsers then keep the headline on one line past the screen edge */
.intro{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:40px}
h1{max-width:100%;margin:0 0 32px;font-size:var(--t-display);font-weight:600;line-height:1.06;letter-spacing:-.05em}

/* The rebus, after muse.ai: "Basil [face], AI health coach that", then a line that changes every 2.2 seconds.
   The face sits in a circle, cropped close so the eyes read, like a contact photo. Every phrase sits in the same grid cell, so the slot is always
   the size of the widest one and the page never moves. A phrase changes word by word, left to right:
   each old word rises and fades out, then each new word rises in from below. */
.rebus{display:block}
.rebus .line{display:block}
.rebus .nw{white-space:nowrap}
.avatar{display:inline-block;width:1.07em;height:1.07em;margin:0 .03em 0 .17em;vertical-align:middle;translate:0 -.06em;border-radius:50%;overflow:hidden;background:#E7EFE3;box-shadow:0 0 0 .5px rgba(0,0,0,.18)}
.avatar img{display:block;width:100%;height:100%}
.rotor{display:grid;grid-template-columns:minmax(0,1fr);color:var(--ink-2)}
.ph{grid-area:1/1;justify-self:center;width:max-content;max-width:min(100%,var(--ph-max,100%));text-wrap:balance;visibility:hidden}
.ph.on,.ph.out{visibility:visible}
/* Each word is its own layer (transform and opacity only), so the motion stays smooth on a phone.
   Out: quick, easing in. In: slower, easing out, and starting as the old words are almost gone. */
.ph .w{display:inline-block;will-change:transform,opacity;backface-visibility:hidden;
  transition:opacity .5s cubic-bezier(.33,1,.68,1),transform .65s cubic-bezier(.33,1,.68,1);transition-delay:calc(220ms + var(--i)*70ms)}
.ph.in .w{opacity:0;transform:translate3d(0,.35em,0);transition:none}
.ph.out .w{opacity:0;transform:translate3d(0,-.3em,0);transition-duration:.3s;transition-timing-function:cubic-bezier(.32,0,.67,0);transition-delay:calc(var(--i)*35ms)}
.ph .ic{display:inline-block;width:1em;height:1em;margin-left:.16em;vertical-align:-.14em}

.lede{max-width:30rem;margin:0 0 20px;color:var(--ink-2)}
.cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--ink-1);color:var(--bg);font-size:var(--t-body);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;padding:16px 26px 16px 22px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px -12px rgba(15,15,14,.5);transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s}
.cta svg{width:17px;height:17px;flex:none}
.cta .num{opacity:.6;font-weight:400}
.cta:hover{opacity:.88;transform:translateY(-1px)}
.cta:active{transform:scale(.98)}
.cta:focus-visible{border-radius:999px}
.stage{--pw:min(300px,78vw);margin-top:var(--s-6);perspective:1400px}

/* One quiet line under the phone */
/* The line under the text button: the cost, said before anyone has to ask */
.cta-note{margin:14px 0 0;font-size:var(--t-small);color:var(--ink-2)}
.note{max-width:36rem;margin:72px auto 0;font-size:var(--t-small);color:var(--ink-2);text-align:center}

.page footer{display:flex;justify-content:center;gap:20px;padding:24px 0 32px;font-size:var(--t-small);color:var(--ink-2)}
.page footer a{text-decoration:none}
.page footer a:hover{color:var(--ink-1)}

/* Phones: four headline lines need more air than two. Looser leading, a slimmer button, a little more room under the top line. */
@media (max-width:520px){
  h1{line-height:1.12}
  .cta{padding:14px 22px 14px 20px}
  .lede{margin-bottom:24px}
}
/* Wide: the same centered column as a phone, larger. The phone sits under the button. */
@media (min-width:980px){
  .page{max-width:1160px;margin:0 auto;padding:28px 56px 0}
  .intro{margin-top:112px}
  h1{font-size:clamp(48px,4.2vw,60px);margin-bottom:40px}
  .lede{margin-bottom:24px}
  .stage{--pw:320px;margin-top:80px}
  .note{margin-top:96px}
}

/* The iPhone. It follows the visitor's light or dark setting, so it looks like their own Messages. */
.screen{--s-bg:#fff;--s-ink:#000;--s-in:#E9E9EB;--s-sub:#8E8E93;--s-ph:#B0B0B5;
  --s-glass:rgba(246,246,248,.76);--s-glass-edge:rgba(255,255,255,.9);--s-glass-ring:rgba(0,0,0,.07);
  --b-in:var(--s-in);--b-in-ink:var(--s-ink);--b-out:#0A84FF;--b-out-ink:#fff;--b-mask:var(--s-bg)}
@media (prefers-color-scheme:dark){
  .screen{--s-bg:#000;--s-ink:#fff;--s-in:#262628;--s-ph:#6C6C70;
    --s-glass:rgba(44,44,46,.72);--s-glass-edge:rgba(255,255,255,.12);--s-glass-ring:rgba(0,0,0,.4)}
  .phone{box-shadow:0 0 0 1.5px #4A4A48,0 0 0 3px #1A1A19,inset 0 0 0 1px rgba(255,255,255,.06),0 30px 70px -30px rgba(0,0,0,.8)}
}
.phone{position:relative;width:calc(var(--pw)*1.07);aspect-ratio:393/852;padding:calc(var(--pw)*.035);
  border-radius:calc(var(--pw)*.165);background:#0B0B0B;
  box-shadow:0 0 0 1.5px #3B3B3A,0 0 0 3px #1A1A19,inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.05),0 30px 70px -30px rgba(15,15,14,.32);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease)}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 35%)}
.screen{position:relative;height:100%;border-radius:calc(var(--pw)*.135);overflow:hidden;background:var(--s-bg);
  font-family:var(--ios);color:var(--s-ink);font-size:calc(var(--pw)*17/393);line-height:1.29;letter-spacing:-.022em;text-align:left}
.island{position:absolute;top:.64em;left:50%;transform:translateX(-50%);width:7.4em;height:2.18em;border-radius:2em;background:#000;z-index:5}
.status{display:flex;justify-content:space-between;align-items:center;height:3.5em;padding:0 1.9em 0 2.2em;font-weight:600;position:relative;z-index:4}
.status .icons{display:flex;gap:.32em;align-items:center}
.status svg{height:.72em;width:auto;display:block}

/* iOS 26 header: floating glass controls */
.glass{background:var(--s-glass);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 0 0 .5px var(--s-glass-edge),0 0 0 .5px var(--s-glass-ring),0 .15em .6em rgba(0,0,0,.07)}
.nav{position:absolute;top:3.3em;left:0;right:0;height:4.6em;z-index:3}
.nav::before{content:"";position:absolute;inset:-3.3em 0 -.5em;background:linear-gradient(var(--s-bg) 60%,transparent);z-index:-1}
.nav .back{position:absolute;left:.85em;top:.2em;height:2.4em;padding:0 .7em 0 .6em;border-radius:2em;display:flex;align-items:center;gap:.4em}
.nav .back svg{height:1.05em}
.nav .back .count{min-width:1.25em;height:1.25em;border-radius:1em;background:var(--s-ink);color:var(--s-bg);font-size:.76em;font-weight:600;display:grid;place-items:center;padding:0 .3em}
.nav .video{position:absolute;right:.85em;top:.2em;width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center}
.nav .video svg{height:.95em}
.contact{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.contact .mark{width:2.75em;height:2.75em}
.contact .name{margin-top:-.45em;height:1.7em;padding:0 .5em 0 .7em;border-radius:1em;display:flex;align-items:center;gap:.2em;font-size:.76em;font-weight:600;white-space:nowrap}
.contact .name svg{height:.6em;color:var(--s-sub)}

/* Thread */
.thread{padding:4.7em .95em 0}
.meta{text-align:center;font-size:.66em;color:var(--s-sub);margin:0 0 .7em}
.meta b{font-weight:600}
.row{display:flex;margin-top:.5em}
.meta + .row{margin-top:0}
.row.out{justify-content:flex-end}
/* Bubbles take their colors from --b variables, set on .screen */
.bubble{position:relative;padding:.4em .76em .44em;border-radius:1.12em;max-width:84%;text-align:left}
.bubble .txt{display:block}
.bubble.in{background:var(--b-in);color:var(--b-in-ink);margin-left:.1em}
.bubble.out{background:var(--b-out);color:var(--b-out-ink);margin-right:.1em}
.bubble::before,.bubble::after{content:"";position:absolute;bottom:0;height:1.15em}
.bubble.in::before{left:-.42em;width:1.15em;background:var(--b-in);border-bottom-right-radius:.95em}
.bubble.in::after{left:-.62em;width:.62em;background:var(--b-mask);border-bottom-right-radius:.6em}
.bubble.out::before{right:-.42em;width:1.15em;background:var(--b-out);border-bottom-left-radius:.95em}
.bubble.out::after{right:-.62em;width:.62em;background:var(--b-mask);border-bottom-left-radius:.6em}
/* A photo is its own message: the image alone, rounded, with no bubble, tail or caption */
.photo{display:block;width:12.4em;height:auto;aspect-ratio:9/10;object-fit:cover;border-radius:1em;margin-right:.1em}

/* A link preview, as iMessage draws one: the page's og:image on top, then the title and the domain. No tail.
   The image is the report's summary card, drawn here in HTML so it stays sharp: light, like the report page. */
.bubble.link{padding:0;width:15.6em;max-width:84%;overflow:hidden;border-radius:1.12em;box-shadow:0 0 0 1px rgba(0,0,0,.09)}
.bubble.link::before,.bubble.link::after{display:none}
.link .card{display:flex;flex-direction:column;aspect-ratio:1200/630;padding:.75em .85em .7em;background:#FBFAF7;color:#121211;font-family:var(--sans);letter-spacing:-.03em;line-height:1.08}
.link .card b{font-size:1.02em;font-weight:600}
.link .card .muted{font-size:1.02em;font-weight:600;color:#9A988F}
.link .nums{display:flex;gap:.4em;margin-top:auto}
.link .nums > span{flex:1;padding:.32em .4em .34em;border-radius:.45em;background:#F0EEE8;font-size:.5em;color:#6E6C67;letter-spacing:-.01em;line-height:1.2}
.link .nums b{display:block;font-size:1.9em;color:#121211;letter-spacing:-.04em;line-height:1.05}
.link .cap{display:block;padding:.5em .75em .55em;line-height:1.2}
.link .cap b{display:block;font-size:.8em;font-weight:600}
.link .cap span{display:block;font-size:.7em;color:var(--s-sub)}

/* The report, opened from the link. It waits below the screen until main.js slides it up.
   Light in both themes, like the report page. Sizes are in the screen's em, so it scales with the phone. */
.sheet{position:absolute;left:0;right:0;top:3.4em;bottom:0;z-index:4;display:flex;flex-direction:column;border-radius:.9em .9em 0 0;
  background:#FBFAF7;color:#121211;font-family:var(--sans);letter-spacing:-.02em;transform:translateY(105%);
  box-shadow:0 -.4em 1.6em rgba(0,0,0,.18)}
.sheet-bar{position:relative;flex:none;height:2.6em;display:grid;place-items:center;border-bottom:1px solid rgba(0,0,0,.06)}
.sheet-bar .url{font-family:var(--ios);font-size:.72em;font-weight:600;color:#3A3936}
.sheet-bar .close{position:absolute;right:.9em;top:.6em;width:1.4em;height:1.4em;border-radius:50%;background:#EDEBE5;color:#6E6C67;display:grid;place-items:center}
.sheet-bar .close svg{width:.55em}
.sheet-view{flex:1;overflow:hidden}
.rp{padding:.9em 1em 3em;font-size:1.3em}
.rp-head{display:flex;align-items:center;justify-content:space-between;font-size:.66em;color:#6E6C67}
.rp-brand{display:flex;align-items:center;gap:.45em;font-size:1.2em;font-weight:600;color:#121211}
.rp-brand img{width:1.7em;height:1.7em;border-radius:50%}
.rp-h{margin:.75em 0 0;font-size:1.3em;font-weight:600;line-height:1.08;letter-spacing:-.04em}
.rp-h span{display:block;color:#9A988F}
.rp-stats{display:flex;gap:.35em;margin-top:.9em}
.rp-stats > span{flex:1;padding:.5em .55em .55em;border-radius:.6em;background:#F0EEE8;font-size:.58em;color:#6E6C67;line-height:1.25}
.rp-stats b{display:block;margin-bottom:.15em;font-size:1.85em;color:#121211;letter-spacing:-.04em;line-height:1}
.rp-label{display:flex;justify-content:space-between;align-items:baseline;margin:1.4em 0 .5em;font-size:.82em;font-weight:600}
.rp-label span{font-size:.8em;font-weight:400;color:#6E6C67}
.rp-chart{display:block;width:100%;height:auto;overflow:visible}
.rp-chart text{font-family:var(--sans);font-size:10px;font-weight:600;fill:#C2502E}
.rp-chart .rp-goal{font-size:8px;font-weight:400;fill:#2F7A4D}
.rp-quote{margin:0;padding:.6em .75em .65em;border-left:.22em solid #2F7A4D;border-radius:0 .5em .5em 0;background:#F0EEE8;font-size:.82em;line-height:1.3}
.rp-quote span{display:block;margin-top:.3em;font-size:.72em;color:#6E6C67}
.rp-note{margin:.6em 0 0;font-size:.74em;text-wrap:balance;color:#3A3936}
.rp-why{margin:.35em 0 0;font-size:.56em;line-height:1.35;color:#6E6C67}
.rp-days{margin:.5em 0 0;padding-left:1.1em;font-size:.6em;line-height:1.45;color:#3A3936}
.rp-days b{font-weight:600;color:#121211}
.rp-note b{color:#C2502E;font-weight:600}
.rp-bars{display:flex;align-items:flex-end;gap:.18em;height:2.6em}
.rp-bars i{flex:1;border-radius:.15em .15em .08em .08em;background:#D9D6CD}
.rp-bars i.hi{background:#E08A3C}
.rp-meds{display:flex;flex-wrap:wrap;gap:.3em}
.rp-meds i{width:.75em;height:.75em;border-radius:50%;background:#2F7A4D}
.rp-meds i.miss{background:none;box-shadow:inset 0 0 0 .12em #C2502E}
.rp-ask{display:flex;justify-content:center;margin-top:1.4em}
.rp-ask span{padding:.6em 1.1em;border-radius:2em;background:#121211;color:#FBFAF7;font-size:.74em;font-weight:500}
/* The tap on the link card */
.tap{position:absolute;left:50%;top:40%;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;background:rgba(0,0,0,.18);pointer-events:none;opacity:0}

/* Typing indicator */
.typing{position:relative;display:none;align-items:center;gap:.24em;height:2.1em;padding:0 .74em;border-radius:1.12em;background:var(--s-in);margin-left:.1em;transform-origin:0 100%}
.typing.on{display:inline-flex}
.typing::before,.typing::after{content:"";position:absolute;border-radius:50%;background:var(--s-in)}
.typing::before{width:.62em;height:.62em;left:-.1em;bottom:-.1em}
.typing::after{width:.3em;height:.3em;left:-.38em;bottom:-.38em}
.typing i{width:.46em;height:.46em;border-radius:50%;background:var(--s-sub);opacity:.3;animation:wave 1.25s infinite linear}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes wave{0%,60%,100%{opacity:.3}25%{opacity:.9}}

/* Compose bar */
.compose{position:absolute;left:0;right:0;bottom:0;padding:.5em .8em 2.2em;display:flex;align-items:center;gap:.5em;z-index:3}
.compose .plus{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;flex:none}
.compose .plus svg{height:.95em}
.compose .field{flex:1;min-width:0;height:2.3em;border-radius:1.2em;display:flex;align-items:center;gap:.4em;padding:0 .3em 0 .85em}
.compose .placeholder{color:var(--s-ph);flex:1}
.compose .draft{display:none;flex:1;white-space:nowrap;overflow:hidden;color:var(--s-ink)}
.compose .draft::after{content:"";display:inline-block;width:.09em;height:1.15em;margin-left:.05em;vertical-align:-.2em;background:#0A84FF;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.compose .wave{height:.95em;color:var(--s-sub);margin-right:.55em;flex:none}
.compose .send{display:none;width:1.75em;height:1.75em;border-radius:50%;background:#0A84FF;color:#fff;place-items:center;flex:none}
.compose .send svg{height:.8em}
.compose.typing-now .placeholder,.compose.typing-now .wave{display:none}
.compose.typing-now .draft{display:block}
.compose.typing-now .send{display:grid}
.home-bar{position:absolute;bottom:.5em;left:50%;transform:translateX(-50%);width:8em;height:.3em;border-radius:1em;background:var(--s-ink);z-index:4}

/* The page arrives */
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.logo,h1,.lede,.cta,.stage,.note{animation:in 1s var(--ease) both}
.lede{animation-delay:0s}h1{animation-delay:.05s}.cta{animation-delay:.15s}.stage{animation-delay:.25s;animation-duration:1.3s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.phone{transition:none}}

/* Privacy page: the same type, inks and mark */
.legal-head{max-width:680px;margin:0 auto;padding:24px 20px}
.legal{max-width:680px;margin:0 auto;padding:var(--s-6) 20px 80px;text-align:left}
.legal h1{font-size:var(--t-display);margin:0 0 var(--s-2)}
.legal p{color:var(--ink-2)}
.legal .back{font-size:var(--t-small);color:var(--ink-2);text-decoration:none}
.legal .back:hover{color:var(--ink-1)}