/* nutrician.app
   Warm, premium, high-contrast. The app's cream and gold, pushed to actually
   carry a page: gradient blooms, a dark dramatic centrepiece, tilted hardware,
   scroll reveals. Reference register is Oura / Ritual, not a docs page. */

:root{
  --cream:#f7f3ea;  --cream-2:#fdfbf6;  --peach:#fbe6cf;  --blush:#f6d9c8;
  --ink:#1a1410;    --ink-2:#2a211a;    --espresso:#17110c;
  --gold:#c98a1e;   --gold-lt:#f2b23a;  --gold-dp:#8a5f0a;
  --blue:#0050b8;   --blue-lt:#6aa8ff;
  --good:#1f7a46;   --bad:#b8371f;
  --muted:#6f6558;  --line:#e6ddcc;
  --shadow:0 24px 60px -18px rgba(60,40,15,.34);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font:17px/1.62 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:64rem; margin:0 auto; padding:0 22px}
a{color:var(--blue)}
img{max-width:100%; height:auto}   /* height:auto or the HTML height attribute wins and stretches */

/* ── display type ─────────────────────────────────────────────── */
.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
   font-size:clamp(2.5rem,7.2vw,4.6rem); line-height:1.02; letter-spacing:-.028em;
   font-weight:600; margin:0 0 20px}
h2{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
   font-size:clamp(1.85rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.022em;
   font-weight:600; margin:0 0 18px}
h3{font-size:1.12rem; font-weight:660; margin:0 0 7px; letter-spacing:-.01em}
p{margin:0 0 18px; color:var(--muted); font-size:1.03rem}
p strong{color:var(--ink); font-weight:640}
.lede{font-size:clamp(1.12rem,2.5vw,1.4rem); line-height:1.5; color:#5b5145}
.kicker{display:inline-block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--gold-dp); background:rgba(201,138,30,.13);
  padding:6px 13px; border-radius:999px; margin:0 0 16px}

/* ── header ───────────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:40; background:rgba(247,243,234,.82);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid rgba(230,221,204,.8)}
.bar{display:flex; align-items:center; justify-content:space-between; height:66px}
.mark{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:25px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none; display:flex; align-items:center}
.mark i{color:var(--gold); font-style:normal}
.mark .sp{color:var(--gold-lt); font-size:17px; margin-left:3px}
.bar nav{display:flex; align-items:center; gap:8px}
.bar nav .lnk{color:var(--muted); text-decoration:none; font-size:15px; padding:8px 12px;
  border-radius:9px; font-weight:520}
.bar nav .lnk:hover{color:var(--ink); background:rgba(201,138,30,.1)}
.login{background:var(--ink); color:var(--cream)!important; text-decoration:none;
  border-radius:999px; padding:10px 20px; font-weight:640; font-size:15px;
  box-shadow:0 6px 18px -6px rgba(26,20,16,.5); transition:transform .16s, box-shadow .16s}
.login:hover{transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(26,20,16,.55)}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{position:relative; padding:70px 0 90px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-30% -20% auto -20%; height:150%;
  background:
    radial-gradient(58% 44% at 14% 8%,  rgba(242,178,58,.42), transparent 62%),
    radial-gradient(50% 40% at 88% 4%,  rgba(246,217,200,.75), transparent 60%),
    radial-gradient(46% 42% at 66% 82%, rgba(201,138,30,.20), transparent 66%);
  z-index:-1; pointer-events:none}
.hero-grid{display:grid; gap:44px; align-items:center}
@media(min-width:58rem){.hero-grid{grid-template-columns:1.1fr .9fr; gap:56px}}
.motto{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-style:italic;
  font-size:1.16rem; color:var(--ink); border-left:3px solid var(--gold);
  padding:2px 0 2px 16px; margin:0 0 26px}
.prescribed{font-size:15px; line-height:1.55; color:#5f5548; background:rgba(255,255,255,.55);
  border:1px solid rgba(26,20,16,.1); border-radius:12px; padding:13px 16px; margin:0 0 6px}
.prescribed strong{color:var(--ink)}
.band-dark .prescribed{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#c3b6a2}
/* Was a 5-star rating. Removed: at n=3 on a family-tested app, 16 CFR 465
   reaches reviews from the advertiser and immediate relatives, and no rewording
   cures an insider source. This carries the one trust signal that is both true
   and uncopyable instead. */
.stars{margin:22px 0 0; font-size:14.5px; line-height:1.5; color:var(--muted);
  max-width:34rem}
.stars a{color:var(--gold-dp); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb, var(--gold-dp) 35%, transparent)}
.stars a:hover{border-bottom-color:var(--gold-dp)}

/* phone */
.phone-stage{position:relative; display:flex; justify-content:center; perspective:1400px}
.phone{width:min(300px,78vw); height:auto; aspect-ratio:600/1300;
  border-radius:30px; border:8px solid var(--ink);
  box-shadow:var(--shadow); display:block; background:var(--ink);
  transform:rotateY(-9deg) rotateX(3deg) rotate(.8deg);
  animation:float 7s ease-in-out infinite}
.phone-stage::after{content:""; position:absolute; width:78%; height:70%; left:11%; top:16%;
  background:radial-gradient(closest-side,rgba(242,178,58,.5),transparent 72%);
  filter:blur(46px); z-index:-1}
@keyframes float{0%,100%{transform:rotateY(-9deg) rotateX(3deg) rotate(.8deg) translateY(0)}
                 50%{transform:rotateY(-9deg) rotateX(3deg) rotate(.8deg) translateY(-13px)}}
@media(prefers-reduced-motion:reduce){.phone{animation:none}}

/* ── buttons ──────────────────────────────────────────────────── */
.cta{display:flex; flex-wrap:wrap; gap:13px; align-items:center; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  border-radius:14px; padding:15px 26px; font-weight:650; font-size:16.5px;
  border:1.5px solid transparent; transition:transform .16s, box-shadow .16s, background .16s}
.btn-app{background:linear-gradient(168deg,#2c231b,#12100d); color:#fdfbf6;
  box-shadow:0 14px 32px -12px rgba(26,20,16,.68)}
.btn-app:hover{transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(26,20,16,.72)}
.btn-app small{display:block; font-size:11px; font-weight:500; opacity:.72; letter-spacing:.04em}
.btn-app b{display:block; font-size:16.5px; line-height:1.12; letter-spacing:-.01em}
.btn-web{background:rgba(255,255,255,.62); color:var(--ink); border-color:rgba(26,20,16,.16);
  backdrop-filter:blur(6px)}
.btn-web:hover{border-color:var(--gold); background:#fff; transform:translateY(-2px)}
.fineprint{font-size:14.5px; color:var(--muted); margin:14px 0 0}

/* ── sections ─────────────────────────────────────────────────── */
section{padding:88px 0}
.band-cream{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.band-peach{background:linear-gradient(155deg,var(--peach) 0%,var(--blush) 55%,#f3ddc6 100%)}

/* The sticky header is 66px tall; without this both nav anchors scroll their
   kicker and half their h2 underneath it. */
[id]{scroll-margin-top:84px}

/* dark centrepiece */
.band-dark{position:relative; background:var(--espresso); color:#f3ece0; overflow:hidden}
.band-dark::before{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 48% at 20% 0%,rgba(242,178,58,.22),transparent 60%),
             radial-gradient(52% 45% at 92% 100%,rgba(201,138,30,.16),transparent 62%);
  pointer-events:none}
.band-dark > *{position:relative}
.band-dark h2{color:#fdf6e8}
.band-dark p{color:#c3b6a2}
.band-dark .kicker{color:var(--gold-lt); background:rgba(242,178,58,.16)}

/* ── the gate ─────────────────────────────────────────────────── */
.gate{margin-top:34px; display:grid; gap:16px}
.lane{border-radius:18px; padding:22px 24px; border:1px solid rgba(242,178,58,.24);
  background:rgba(255,255,255,.045)}
.lane.win{border-color:rgba(92,201,138,.4); background:rgba(92,201,138,.09)}
.lane.lose{border-color:rgba(255,138,114,.36); background:rgba(255,138,114,.08)}
.chain{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.node{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07);
  border-radius:999px; padding:7px 15px; font-size:14.5px; color:#efe6d6; white-space:nowrap}
.node.hot{border-color:var(--gold-lt); color:var(--gold-lt); font-weight:640}
.tick{color:rgba(255,255,255,.32); font-size:17px}
.out{font-size:1.16rem; font-weight:680; letter-spacing:-.01em; display:flex; gap:11px;
  align-items:baseline; flex-wrap:wrap}
.out.ok{color:#7fdca6} .out.no{color:#ff9c85}
.out span{font-size:.86rem; font-weight:500; opacity:.82}

/* ── tiers ────────────────────────────────────────────────────── */
.tiers{list-style:none; padding:0; margin:34px 0 0; display:grid; gap:12px}
@media(min-width:48rem){.tiers{grid-template-columns:1fr 1fr}}
.tiers li{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--gold); border-radius:13px; padding:15px 18px}
.tiers b{display:block; color:#fdf6e8; font-size:15.5px; margin-bottom:3px}
.tiers span{color:#b7aa96; font-size:14.5px; line-height:1.5}

/* ── feature cards ────────────────────────────────────────────── */
.split{display:grid; gap:40px; align-items:center; margin-top:36px}
@media(min-width:52rem){.split{grid-template-columns:1fr 1fr; gap:56px}}
.cards{display:grid; gap:15px}
.card{background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:17px; padding:22px 24px; box-shadow:0 10px 30px -18px rgba(80,55,20,.4);
  transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -20px rgba(80,55,20,.5)}
.card p{margin:0; font-size:15.5px; color:#655a4c}
.tag{display:inline-block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:800; color:var(--gold-dp); margin-bottom:9px}

/* ── stat strip ───────────────────────────────────────────────── */
.stats{display:grid; gap:2px; background:rgba(26,20,16,.1); border-radius:18px;
  overflow:hidden; margin-top:8px}
@media(min-width:44rem){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--cream-2); padding:26px 22px; text-align:center}
.stat .n{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:2.1rem;
  font-weight:600; color:var(--ink); letter-spacing:-.02em; display:block}
.stat .l{font-size:14px; color:var(--muted); margin-top:4px; display:block}

/* ── price ────────────────────────────────────────────────────── */
.price{margin-top:34px; border-radius:24px; padding:44px 30px; text-align:center;
  background:linear-gradient(160deg,#fffdf7,#fbeeda 60%,#f7e0c2);
  border:1px solid rgba(201,138,30,.3); box-shadow:0 26px 60px -26px rgba(120,80,20,.45)}
.price .num{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:3.6rem;
  font-weight:600; letter-spacing:-.035em; color:var(--ink); line-height:1}
.price .per{color:#7a6a54; font-size:1.05rem; margin-top:6px}

/* ── footer ───────────────────────────────────────────────────── */
footer{background:var(--espresso); color:#a99c88; padding:44px 0 64px; font-size:14.5px}
footer a{color:#e8dcc6; text-decoration:none; margin-right:20px; line-height:2.2}
footer a:hover{color:var(--gold-lt)}
.disclaim{margin-top:18px; font-size:13px; line-height:1.6; color:#8b8071; max-width:52rem}

/* ── scroll reveal ────────────────────────────────────────────── */
/* Hidden ONLY when the <head> script has set .js. No JavaScript, or a script
   error, and every section is simply visible: a marketing page that renders
   blank without JS is worse than one that does not animate. */
.js .rise{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.js .rise.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.js .rise{opacity:1; transform:none; transition:none}}