/* 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}
.stars{display:flex; align-items:center; gap:9px; margin:22px 0 0; font-size:14.5px;
  color:var(--muted)}
.stars b{color:var(--gold-dp); letter-spacing:1px; font-size:15px}

/* 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%)}

/* 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}}