:root{
  --cream:#f4efe3; --sage:#94a69c; --deep:#54645b; --ink:#1d1d1d; --ink-blue:#1c262f; --white:#fff;
  --soft:#4a4944;
  --line:rgba(29,29,29,.12);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;scrollbar-color:var(--sage) var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.45 var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased}
::selection{background:var(--sage);color:var(--ink)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid var(--ink-blue);outline-offset:3px;border-radius:14px}
svg{display:block;flex:none}
h1,h2,strong,.desc,p,.txt span{overflow-wrap:anywhere}
.page{max-width:440px;margin:0 auto;padding:16px 18px 0}

/* top */
.top{text-align:center;margin-bottom:16px}
.avatar{display:block;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;object-fit:cover;object-position:50% 40%;background:var(--sage);
  box-shadow:0 10px 18px -8px rgba(28,38,47,.45),0 0 0 3px var(--cream),0 0 0 5px var(--sage)}
h1{margin:0;font:400 clamp(38px,11.6vw,50px)/.98 var(--serif);letter-spacing:-.02em;text-wrap:balance}
h1 em{font-style:italic;color:var(--deep)}

/* hero card */
.hero{display:block;padding:12px 12px 16px;border-radius:28px;background:var(--deep);color:var(--cream);
  box-shadow:0 18px 26px -20px rgba(28,38,47,.5);transition:transform .3s var(--ease)}
.hero .row{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:center;margin:0 0 14px}
.hero .cover{display:block;width:116px;height:155px;border-radius:12px;object-fit:cover;background:var(--sage);box-shadow:0 16px 22px -12px rgba(0,0,0,.55)}
.hero h2{margin:0 0 8px;font:400 32px/1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.hero h2 em{font-style:italic}
.hero p{margin:0;font-size:14.5px;line-height:1.35;color:rgba(244,239,227,.92)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin:0 4px;padding:0 22px;
  border-radius:999px;background:var(--cream);color:var(--ink-blue);font-weight:700;font-size:16px;
  transition:transform .25s var(--ease)}
.btn svg{width:20px;height:20px}
.hero:active{transform:scale(.985);background:#4a5951}
.hero:focus-visible{outline-color:var(--sage);outline-offset:4px}

/* second product */
.feature{display:grid;grid-template-columns:66px minmax(0,1fr) 44px;gap:14px;align-items:center;margin:12px 0 20px;padding:10px 12px 10px 10px;
  min-height:108px;border-radius:24px;background:var(--sage);border:1px solid var(--ink);transition:transform .3s var(--ease)}
.feature .thumb{display:block;width:66px;height:88px;border-radius:9px;overflow:hidden;background:var(--cream);box-shadow:0 10px 14px -8px rgba(28,38,47,.6)}
.feature .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.feature strong{display:block;font:400 24px/1.02 var(--serif);letter-spacing:-.005em;text-wrap:balance}
.feature .desc{display:block;margin-top:4px;font-size:14px;line-height:1.3}
.go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink-blue);color:var(--cream)}
.go svg{width:20px;height:20px}
.feature:active{transform:scale(.985);background:#889a90}

/* groups of rows */
.group{margin:0 0 24px}
.group h2{margin:0 0 9px 8px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--deep)}
.rows{list-style:none;margin:0;padding:6px;background:var(--white);border-radius:26px;box-shadow:0 10px 22px -16px rgba(28,38,47,.4)}
.rows li+li{border-top:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:12px;align-items:center;min-height:68px;padding:10px;border-radius:20px;transition:background .2s}
.rows a:active,.rows a:hover{background:#eef1ec}
.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--cream);color:var(--deep)}
.ico svg{width:24px;height:24px}
.txt strong{display:block;font:400 22px/1.05 var(--serif);letter-spacing:-.005em}
.txt span{display:block;margin-top:3px;font-size:14px;line-height:1.3;color:var(--soft)}
.chev{width:20px;height:20px;color:var(--deep)}

/* sage band */
.band{overflow:hidden;margin:6px -18px 0;padding:14px 0;background:var(--deep);color:var(--cream)}
.track{display:flex;width:max-content;animation:slide 46s linear infinite}
.track span{flex:none;padding-right:30px;font:400 28px/1 var(--serif);white-space:nowrap}
.track em{font-style:italic}
@keyframes slide{to{transform:translateX(-50%)}}

/* close */
.close{margin:0 -18px;padding:34px 18px 40px;background:var(--cream);text-align:center}
.close .lede{margin:0 auto 18px;max-width:28ch;font:400 27px/1.05 var(--serif);text-wrap:balance}
.close .lede em{font-style:italic;color:var(--deep)}
.social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px;padding:0}
.social a{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;border:1.5px solid var(--ink);border-radius:999px;font-weight:600;font-size:14.5px;transition:background .2s,color .2s}
.social a:active,.social a:hover{background:var(--ink);color:var(--cream)}
.fine{margin:0 auto;max-width:34ch;font-size:12.5px;line-height:1.4;color:var(--soft)}

@media (min-width:768px){
  body{background:var(--sage)}
  .page{max-width:460px;margin:40px auto;padding-top:28px;background:var(--cream);border-radius:36px;overflow:hidden;
    box-shadow:0 34px 60px -34px rgba(28,38,47,.7)}
}
@media (max-width:340px){
  .hero .row{grid-template-columns:96px 1fr;gap:12px}
  .hero .cover{width:96px;height:128px}
  .hero h2{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .track{animation:none;width:auto;justify-content:center}
  .track span{padding-right:0}
  .track span:nth-child(n+2){display:none}
  .hero:active,.feature:active{transform:none}
}