/* ==========================================================================
   Home Workout Hero — marketing site
   Tokens, type and spacing taken from design_handoff_website/Website.dc.html
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#FFF5EC; --surface:#FFFFFF; --subtle:#FFF9F4; --tint:#FCE9D8;
  --band-1:#FCDDC4; --band-2:#FFEFE2;
  --border:#F3DCC7; --dash:#E9CBB1; --dash-2:#E3C3A8;
  /* ink */
  --ink:#6B2410; --ink-hover:#571D0C; --muted:#9A5A3A; --faint:#B07A5E; --on-dark:#FFF5EC;
  /* accent */
  --accent:#F08A4B; --accent-1:#F9B27A; --accent-2:#F9C9A4; --accent-3:#F9CFAC;
  /* status */
  --success:#2F8F5B; --success-tint:#F1F8F3; --success-border:#BFE3CC;
  --freeze:#2F6D9A; --freeze-tint:#EAF2F8; --extra:#5B8C85;
  /* dark block */
  --dark:#6B2410; --code:#4F1A0A; --prompt:#B98A72; --output:#9FD9B5;
  /* tag categories: intensity / training type / body part / equipment */
  --t-int-bg:#F7D3B8; --t-int-ink:#8A2E0E;
  --t-type-bg:#FBE7C6; --t-type-ink:#7A4A0C;
  --t-body-bg:#E5ECDD; --t-body-ink:#3E5A33;
  --t-equip-bg:#EFE3EE; --t-equip-ink:#6A3561;
  /* layout */
  --pad:clamp(16px,4vw,32px);
  --maxw:1264px;
  /* shadows */
  --sh-frame:0 30px 80px rgba(107,36,16,.10);
  --sh-phone:0 30px 70px rgba(107,36,16,.28);
  --sh-card:0 8px 22px rgba(107,36,16,.10);
  --sh-seg:0 1px 3px rgba(107,36,16,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3{margin:0}
img{display:block; max-width:100%}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}

.ic{width:1em; height:1em; display:inline-block; vertical-align:-.125em; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ic--fill{fill:currentColor; stroke:none}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* shared section furniture ------------------------------------------------ */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.sec{padding-top:clamp(72px,12vw,120px)}
.sec--lg{padding-top:clamp(80px,14vw,140px)}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--accent); text-transform:uppercase}
.h2{margin:12px 0 0; font-size:clamp(36px,5vw,60px); line-height:1.02; font-weight:700; letter-spacing:-.035em; text-wrap:balance}
.sec-head{display:flex; gap:24px 48px; flex-wrap:wrap; align-items:flex-end}
.sec-head__main{flex:1 1 520px}
.sec-head__sub{margin:0; flex:1 1 380px; max-width:520px; font-size:17px; line-height:1.6; color:var(--muted); text-wrap:pretty}

.btn{display:flex; align-items:center; gap:8px; justify-content:center; height:52px; padding:0 22px; border-radius:15px; font-weight:700; font-size:16px; white-space:nowrap}
.btn--primary{background:var(--ink); color:var(--on-dark)}
.btn--primary:hover{background:var(--ink-hover); color:var(--on-dark)}
.btn--ghost{background:var(--surface); border:1px solid var(--border); font-weight:600}
.btn--ghost:hover{background:var(--tint); color:var(--ink)}

.scroll-x{scrollbar-width:none; -ms-overflow-style:none}
.scroll-x::-webkit-scrollbar{display:none}

/* 1 · sticky nav ---------------------------------------------------------- */
.navbar{position:sticky; top:0; z-index:30; padding:clamp(10px,2vw,16px) clamp(10px,3vw,24px) 0}
.nav{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:clamp(8px,2vw,20px);
}
.nav__brand{display:flex; align-items:center; gap:10px; padding:6px 12px 6px 8px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-weight:900; letter-spacing:.04em; color:var(--accent); font-size:clamp(12px,3.2vw,15px); white-space:nowrap}
.nav__brand-workout{color:var(--ink)}
.nav__brand-name{display:flex; flex-direction:column; line-height:.95}
.nav__brand img{width:44px; height:44px; flex-shrink:0; border-radius:50%}
.nav__controls{display:flex; align-items:center; gap:clamp(4px,1vw,12px); padding:6px 8px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.nav__links{display:flex; gap:4px}
.nav__links a{padding:8px 14px; border-radius:10px; font-weight:500; font-size:15px; white-space:nowrap}
.nav__links a:hover{background:var(--tint); color:var(--ink)}
.seg{display:flex; background:var(--tint); border-radius:10px; padding:3px; gap:2px}
.seg button{padding:5px 10px; border-radius:8px; font-size:13px; font-weight:700; background:transparent}
.seg button[aria-pressed="true"]{background:var(--surface); box-shadow:var(--sh-seg)}
.nav__gh{display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; flex-shrink:0; border-radius:12px; background:var(--ink); color:var(--on-dark); font-weight:700; font-size:15px; white-space:nowrap}
.nav__gh:hover{background:var(--ink-hover); color:var(--on-dark)}
.nav__gh .ic{font-size:17px}
@media (max-width:999px){ .nav__links{display:none} }
@media (max-width:639px){ .nav__gh{padding:0 11px} .nav__gh span{display:none} .nav__controls{gap:6px; padding:5px} }

/* 2 · hero ---------------------------------------------------------------- */
.hero{padding-top:clamp(40px,8vw,72px)}
.hero__pills{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pill{display:flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:clamp(10px,2.8vw,12px); font-weight:700; letter-spacing:.08em; white-space:nowrap}
.pill__dot{width:7px; height:7px; border-radius:50%; background:var(--success)}
.hero__new{font-size:14px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:4px; white-space:nowrap}
.hero h1{margin:22px 0 0; font-size:clamp(42px,8vw,104px); line-height:.98; font-weight:700; letter-spacing:-.045em; text-wrap:balance}
.hero h1 .accent{color:var(--accent)}
.hero h1 .hero__word{color:var(--ink)}
.hero__cols{display:flex; gap:32px 56px; flex-wrap:wrap; align-items:flex-end; margin-top:32px}
.hero__lede{margin:0; flex:1 1 min(100%,440px); max-width:620px; font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--muted); text-wrap:pretty}
.hero__actions{display:flex; flex-direction:column; gap:14px; flex:0 1 auto}
.hero__btns{display:flex; gap:10px; flex-wrap:wrap}
.hero__btns .btn{flex:1 1 auto}
.hero__note{font-size:14px; color:var(--muted); line-height:1.5}
.hero__note b{color:var(--ink)}
.hero__note a{color:var(--accent); font-weight:600}

.frame-area{position:relative; margin-top:56px}
.frame{background:var(--surface); border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:var(--sh-frame)}
.frame__bar{height:38px; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid var(--border)}
.frame__bar span{width:11px; height:11px; border-radius:50%; background:var(--border)}
.stage{position:relative; aspect-ratio:16/10; background:#1C0A04; overflow:hidden}
.slide{position:absolute; inset:0; background:var(--bg); opacity:0; transform:scale(1.035); filter:blur(6px); pointer-events:none;
  transition:opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1), filter .9s ease}
.slide.is-active{opacity:1; transform:scale(1); filter:blur(0); pointer-events:auto}
.slide img{width:100%; height:100%; object-fit:cover}

.mascot{position:absolute; z-index:5; top:-46px; right:-24px; width:112px; height:112px; animation:mfpBob 3.2s ease-in-out infinite}
.mascot > *{width:100%; height:100%; border-radius:50%; background:var(--tint); border:4px solid var(--surface); box-shadow:0 14px 34px rgba(107,36,16,.22); overflow:hidden}
.mascot img{width:100%; height:100%; object-fit:cover; border-radius:50%}
@keyframes mfpBob{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-10px) rotate(4deg)}}

.phone{position:absolute; right:0; bottom:-48px; width:250px; height:520px; border-radius:40px; background:var(--ink); padding:8px; box-shadow:var(--sh-phone)}
.phone__screen{position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:#1C0A04}
.hero__dots{display:flex; align-items:center; justify-content:center; margin-top:14px}
.hero__dots button{height:44px; padding:0 5px; display:flex; align-items:center}
.hero__dots i{display:block; width:8px; height:8px; border-radius:4px; background:var(--border); transition:width .3s, background .3s}
.hero__dots button[aria-current="true"] i{width:22px; background:var(--accent)}

/* phone overlay only from 1100px, and only when mobile shots exist */
.phone{display:none}
body.has-mobile-shots .frame-area{padding-right:0}
@media (min-width:1100px){
  body.has-mobile-shots .phone{display:block}
  body.has-mobile-shots .frame-area{padding-right:170px}
  body.has-mobile-shots .mascot{right:130px}
}
/* The design swaps to a bare phone below 700px. We keep the browser-style
   window at every width (no mobile screenshots yet — see NOTES-rebuild.md),
   and only shrink the mascot. */
@media (max-width:699px){
  .mascot{width:84px; height:84px; top:-34px; right:-10px}
}

/* On a phone every call to action gets its own full-width row — no squeezing
   "Download for Windows" in beside "View on GitHub". */
@media (max-width:719px){
  .hero__btns, .dl__btns{flex-direction:column; align-items:stretch}
  .hero__btns .btn, .dl__btns .btn{flex:0 0 auto; width:100%}
  .hero__actions{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .slide{transform:none !important; filter:none !important}
  .mascot{animation:none}
}

/* 3 · promise marquee ----------------------------------------------------- */
.promises{padding-top:96px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.promises__track{display:flex; gap:10px; width:max-content; animation:mfpMarquee 40s linear infinite}
.promises:hover .promises__track{animation-play-state:paused}
@keyframes mfpMarquee{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 5px))}}
.promise{display:flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:15px; font-weight:600; white-space:nowrap; flex-shrink:0}
.promise .ic{color:var(--success); font-size:18px}
@media (prefers-reduced-motion:reduce){ .promises__track{animation:none} }

/* 4 · features scroller --------------------------------------------------- */
.feat__head{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap}
.feat__head .h2{flex:1; max-width:760px}
.feat__nav{display:flex; gap:8px; flex-shrink:0}
.sec-head .feat__nav{align-self:flex-end}
.feat__nav button{width:44px; height:44px; border-radius:12px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:18px}
.feat__nav button:hover{background:var(--tint)}
.feat__nav button[disabled]{opacity:.35; cursor:default}
.feat__nav button[disabled]:hover{background:var(--surface)}
.feat__row{display:flex; gap:16px; margin:44px calc(-1 * var(--pad)) 0; padding:0 var(--pad) 8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--pad); align-items:start; scroll-behavior:smooth}
/* all four cards fit inside 1264px of content, so stop scrolling at 1100+ */
@media (min-width:1100px){
  .feat__row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; margin:44px 0 0; padding:0 0 8px}
  .feat-card{flex:none; min-width:0}
  .feat__head .feat__nav{display:none}   /* only the Features arrows; the scrollers keep theirs */
}
.feat-card{flex:0 0 min(320px,82vw); scroll-snap-align:start; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:20px 12px 12px}
.feat-card__top{display:flex; align-items:center; justify-content:space-between; padding:0 8px 14px}
.tag{height:24px; display:flex; align-items:center; padding:0 9px; border-radius:7px; font-size:11px; font-weight:700; letter-spacing:.08em; white-space:nowrap}
.feat-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.feat-card li{display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; min-height:52px}
.feat-card li:hover{background:var(--bg)}
.feat-card li span.tile{width:36px; height:36px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px}
.feat-card li span.lbl{font-size:15px; font-weight:600; line-height:1.3}

.cat-lib{background:var(--t-type-bg); color:var(--t-type-ink)}
.cat-plan{background:var(--t-int-bg); color:var(--t-int-ink)}
.cat-cal{background:var(--t-body-bg); color:var(--t-body-ink)}
.cat-own{background:var(--t-equip-bg); color:var(--t-equip-ink)}

/* 5 · how it works -------------------------------------------------------- */
.how__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:16px; margin-top:44px; align-items:start}
.how__steps{display:flex; flex-direction:column; gap:10px}
.step{cursor:pointer; text-align:left; width:100%; border-radius:20px; padding:20px 22px; background:transparent; border:1px solid transparent; display:flex; flex-direction:column; gap:8px;
  transition:background .2s, border-color .2s, box-shadow .2s, transform .2s}
.step:hover{background:var(--surface); border-color:var(--border); box-shadow:var(--sh-card); transform:translateY(-1px)}
.step[aria-expanded="true"]{background:var(--surface); border-color:var(--border)}
.step__top{display:flex; align-items:center; gap:10px}
.step__n{width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.step[aria-expanded="true"] .step__n{background:var(--accent); color:#FFF}
.step__eyebrow{font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--accent)}
.step__title{font-size:21px; font-weight:700; letter-spacing:-.01em; line-height:1.2; text-wrap:pretty}
.step__body{display:grid; grid-template-rows:0fr; margin-top:-8px; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.step[aria-expanded="true"] .step__body{grid-template-rows:1fr}
.step__body > *{overflow:hidden; min-height:0}
.step__body p{margin:0; padding-top:8px; font-size:15px; line-height:1.6; color:var(--muted); text-wrap:pretty; opacity:0; transition:opacity .25s}
.step[aria-expanded="true"] .step__body p{opacity:1}

.how__preview{min-width:0; display:grid; grid-template-rows:1fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1), margin-top .32s}
.how__preview > div{overflow:hidden; min-height:0}
.panel{min-width:0; background:var(--tint); border-radius:24px; padding:clamp(16px,3vw,32px); min-height:460px; display:flex}
.panel > *{flex:1; min-width:0}
.pv[hidden]{display:none}

@media (max-width:899px){
  .how__grid{grid-template-columns:minmax(0,1fr); gap:10px}
  .how__steps{display:contents}
  .how__preview.is-closed{grid-template-rows:0fr; margin-top:-10px}
}

/* --- preview: plan builder --- */
.pb{display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-radius:18px; overflow:hidden}
.pb__bar{display:flex; align-items:center; gap:10px; height:56px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--border)}
.pb__x{width:34px; height:34px; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0}
.pb__name{flex:1; min-width:0}
.pb__name b{display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pb__name i{display:block; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--accent)}
.pb__meta{flex:1; text-align:right; font-size:12px; color:var(--muted); white-space:nowrap}
.pb__save{height:34px; padding:0 14px; border-radius:10px; background:var(--ink); color:var(--on-dark); font-weight:700; font-size:13px; display:flex; align-items:center; flex-shrink:0}
.pb__grid{flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.pb__left{padding:14px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:10px; min-width:0}
.pb__right{padding:14px; display:flex; flex-direction:column; gap:9px; min-width:0}
@media (max-width:999px){
  .pb__grid{grid-template-columns:minmax(0,1fr)}
  .pb__left{border-right:0}
  .pb__segs,.pb__meta{display:none}
}
.pb__weeks{display:flex; align-items:center; gap:5px; overflow:hidden}
.wk{display:flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:15px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--surface); border:1px solid var(--border)}
.wk small{font-size:11px; opacity:.7}
.wk--on{background:var(--ink); color:var(--on-dark); border-color:var(--ink)}
.wk--add{gap:3px; padding:0 10px; border:1px dashed var(--dash); color:var(--muted); background:transparent}
.pb__hint{font-size:11px; color:var(--muted); line-height:1.4}
.day-open{border-radius:15px; background:#FFE9DA; border:1.5px solid var(--accent); overflow:hidden}
.day-open__hd{display:flex; align-items:center; gap:8px; padding:10px 12px}
.day-open__hd b{font-weight:700; font-size:13px; flex:1}
.count{flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent-2); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center}
.count--0{background:var(--tint)}
.day-open__rows{display:flex; flex-direction:column; gap:5px; padding:0 8px 8px}
.vrow{display:flex; align-items:center; gap:8px; padding:5px; border-radius:10px; background:var(--surface); border:1px solid var(--border)}
.vrow .grip{font-size:14px; color:#C9A68E}
.vrow .thumb{width:50px; height:28px; border-radius:6px; background:repeating-linear-gradient(135deg,#FCE9D8 0 6px,#F8DDC6 6px 12px); flex-shrink:0}
.vrow .t{flex:1; min-width:0; font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vrow .rm{font-size:14px; color:#B3261E; padding:0 4px}
.day-shut{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:15px; background:var(--surface); border:1.5px solid var(--border)}
.day-shut b{font-weight:700; font-size:13px; white-space:nowrap}
.day-shut span:not(.count){flex:1; min-width:0; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pb__addto{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 8px}
.pb__addto b{font-size:15px; font-weight:700; flex:1 1 180px; min-width:0; white-space:normal; overflow-wrap:anywhere}
.pb__addto span{display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--muted); white-space:normal; overflow-wrap:anywhere}
.pb__addto span .ic{color:var(--accent)}
.srow{display:flex; gap:6px; flex-wrap:wrap}
.sbox{flex:1 1 130px; min-width:0; display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; background:var(--surface); border:1px solid var(--border); border-radius:11px; color:var(--faint); font-size:12px}
.sfilt{height:36px; padding:0 11px; border-radius:11px; display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; background:var(--surface); border:1px solid var(--border); flex:0 0 auto}
.chiprow{display:flex; gap:5px; overflow:hidden; flex-wrap:wrap}
.chip{display:flex; align-items:center; height:26px; padding:0 10px; border-radius:13px; font-size:11px; font-weight:600; white-space:nowrap; background:var(--surface); border:1px solid var(--border)}
.chip--on{background:var(--ink); color:var(--on-dark); border-color:var(--ink)}
.pickgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; margin-top:2px}
.pick__sh{position:relative; aspect-ratio:16/9; border-radius:10px; background:repeating-linear-gradient(135deg,#FCE9D8 0 8px,#F8DDC6 8px 16px); outline-offset:2px}
.pick--on .pick__sh{outline:2px solid var(--accent)}
.pick__sh .dur{position:absolute; right:6px; bottom:6px; padding:2px 6px; border-radius:6px; background:rgba(40,14,4,.9); color:#FFF; font-size:10px; font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pick--x .pick__sh .dur{background:rgba(74,50,36,.86)}
.pick__btn{position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:13px; background:var(--surface); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.2)}
.pick--on .pick__btn{background:var(--accent); color:#FFF}
.pick__t{margin-top:5px; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pick__m{font-size:10px; color:var(--muted); margin-top:1px}
.pick__tags{display:flex; gap:3px; margin-top:4px; overflow:hidden; max-height:18px}
.tg{height:18px; line-height:18px; padding:0 6px; border-radius:6px; font-size:9px; font-weight:700; letter-spacing:.06em; white-space:nowrap}
@media (max-width:699px){ .pick--x{display:none} }

/* --- preview: import --- */
.imp{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; align-items:center}
.csv{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; font-family:'DM Mono',monospace; font-size:12px}
.csv__hd{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); font-family:'DM Sans',sans-serif; font-weight:700; font-size:13px}
.csv__hd .ic{color:var(--success)}
.csv__t{display:grid; grid-template-columns:60px 58px minmax(0,1fr)}
.csv__t div{padding:7px 10px; border-bottom:1px solid #F7E7D9; background:var(--surface); min-width:0}
.csv__t div:nth-child(-n+3){background:var(--bg); color:var(--muted); font-weight:500}
.csv__t div:nth-child(3n){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.csv__t div:nth-child(3n + 1), .csv__t div:nth-child(3n + 2){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.imp__to{display:flex; flex-direction:column; gap:12px}
.imp__arrow{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted)}
.imp__arrow .ic{color:var(--accent); font-size:18px}
.plan-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden}
.plan-card__cover{aspect-ratio:16/8; background:repeating-linear-gradient(135deg,#FCE9D8 0 10px,#F8DDC6 10px 20px); display:flex; align-items:center; justify-content:center}
.plan-card__cover span{font-family:'DM Mono',monospace; font-size:11px; color:var(--faint); background:var(--bg); padding:3px 7px; border-radius:6px}
.plan-card__b{padding:14px; display:flex; flex-direction:column; gap:8px}
.plan-card__b b{font-size:16px; font-weight:700}
.plan-card__b .m{font-size:12px; color:var(--muted)}
.plan-card__tags{display:flex; gap:4px}
.plan-card__tags span{height:20px; display:flex; align-items:center; padding:0 7px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.06em}
.plan-card__btns{display:flex; gap:6px; margin-top:4px}
.plan-card__btns .a{flex:1; display:flex; align-items:center; justify-content:center; height:36px; border-radius:11px; background:var(--ink); color:var(--on-dark); font-size:13px; font-weight:700}
.plan-card__btns .b{display:flex; align-items:center; justify-content:center; height:36px; padding:0 12px; border-radius:11px; background:var(--tint); font-size:13px; font-weight:600}

/* --- preview: library --- */
.lib{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:14px}
.lib__top{display:flex; gap:8px; flex-wrap:wrap}
.lib__search{flex:1 1 200px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:12px; border:1px solid var(--border); background:var(--subtle); color:var(--faint); font-size:14px}
.lib__filt{display:flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:12px; background:var(--ink); color:var(--on-dark); font-size:14px; font-weight:700}
.lib__chips{display:flex; gap:6px; flex-wrap:wrap}
.lchip{display:flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:9px; font-size:11px; font-weight:700; letter-spacing:.06em}
.lib__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.lvid{display:flex; flex-direction:column; gap:5px}
.lvid__sh{position:relative; aspect-ratio:16/10; border-radius:12px; background:repeating-linear-gradient(135deg,#FCE9D8 0 8px,#F8DDC6 8px 16px)}
.lvid__sh .dur, .gcard__sh .dur, .pick__sh .dur, .dur{position:absolute; right:6px; bottom:6px; padding:2px 6px; border-radius:6px; background:rgba(40,14,4,.9); color:#FFF; font-size:10px; font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.12)}
.lvid b{font-size:13px; font-weight:600}
.lvid span{font-size:11px; color:var(--muted)}
@media (max-width:699px){ .lvid--x{display:none} }

/* --- preview: calendar --- */
.cal{background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:14px}
.cal__hd{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.cal__hd h4{flex:1; margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em}
.cal__hd .seg{width:100%}
.cal__view[hidden]{display:none}
@media (min-width:700px){ .cal__hd{flex-direction:row; align-items:center} .cal__hd .seg{width:auto; margin-left:auto} }
.tape{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:12px 0 10px}
.tape__hd{display:flex; align-items:center; gap:8px; padding:0 12px 8px 16px}
.tape__hd b{flex:1; font-weight:700; font-size:15px}
.tape__today{height:30px; padding:0 11px; border-radius:9px; border:1px solid var(--border); display:flex; align-items:center; font-size:12px; font-weight:600}
.tape__scroll{display:flex; gap:6px; overflow-x:auto; padding:2px 12px 4px}
.tape__band{flex-shrink:0; display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:16px; background:var(--band-1)}
.tape__band > b{padding-left:4px; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--muted)}
.tape__days{display:flex; gap:5px}
.tday{width:44px; height:66px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:var(--surface); border:2px solid var(--border)}
.tday--past{background:#FBF3EC}
.tday--on{background:var(--ink); color:var(--on-dark); border-color:var(--ink)}
.tday--today{border-color:var(--accent)}
.tday .d{font-size:10px; font-weight:600; opacity:.75}
.tday .n{font-size:16px; font-weight:700; line-height:1}
.tday .m{height:12px; display:flex; align-items:center}
.tday .m .dot{width:6px; height:6px; border-radius:3px; background:var(--accent)}
.tday .m .ic{font-size:11px; color:var(--success)}
.tday--on .m .ic{color:#9BE3B8}
.cal__sel{display:flex; align-items:baseline; gap:8px}
.cal__sel .e{font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--accent)}
.cal__sel .d{font-size:18px; font-weight:700}
.wcard{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden}
.wcard__sh{position:relative; aspect-ratio:16/9; background:repeating-linear-gradient(135deg,#FCE9D8 0 10px,#F8DDC6 10px 20px)}
.badge{position:absolute; left:10px; top:10px; display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; color:#FFF; font-size:11px; font-weight:700; letter-spacing:.04em; background:var(--accent)}
.wcard__b{padding:16px 18px; display:flex; flex-direction:column; gap:10px; min-width:0}
.wcard__m{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--muted)}
.main-tag{flex-shrink:0; height:18px; line-height:18px; padding:0 6px; border-radius:5px; background:var(--accent); color:#FFF; font-size:10px; font-weight:700; letter-spacing:.06em; white-space:nowrap}
.wcard__t{font-size:19px; font-weight:700; line-height:1.2}
.wcard__tags{display:flex; flex-wrap:wrap; gap:4px; overflow:hidden; max-height:22px}
.tg2{height:20px; line-height:20px; padding:0 7px; border-radius:7px; font-size:10px; font-weight:700; letter-spacing:.06em; white-space:nowrap}
.wcard__btns{display:flex; gap:8px; flex-wrap:wrap}
.wcard__go{flex:1 1 140px; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:10px 12px; border-radius:12px; font-weight:700; font-size:14px; line-height:1.2; white-space:normal; text-align:center; background:var(--ink); color:var(--on-dark); border:1px solid var(--ink)}
.wcard__fr{display:flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:10px 13px; border-radius:12px; border:1px solid var(--border); background:var(--surface); font-weight:600; font-size:13px; line-height:1.2; white-space:normal; text-align:center; flex:0 1 auto}
.wcard__fr .ic{color:var(--freeze); flex-shrink:0}
@media (max-width:540px){ .wcard__btns{display:grid; grid-template-columns:1fr; gap:8px} .wcard__go, .wcard__fr{width:100%; flex-basis:100%} }
.rest-card{display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:18px}
.rest-card__ic{width:46px; height:46px; border-radius:13px; background:var(--tint); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--muted)}

.band{border-radius:18px; background:var(--band-1); padding:10px 8px 8px}
.band__hd{display:flex; align-items:baseline; gap:8px; margin:0 4px 8px}
.band__hd .w{font-size:11px; font-weight:700; letter-spacing:.08em}
.band__hd .r{flex:1; font-size:12px; color:var(--muted)}
.band__hd .d{font-size:11px; font-weight:700; color:var(--muted)}
.wk-cols{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.wk-rows{display:flex; flex-direction:column; gap:5px}
@media (max-width:1099px){ .wk-cols{display:none} }
@media (min-width:1100px){ .wk-rows{display:none} }
.dcol{min-width:0; min-height:170px; border-radius:13px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden}
.dcol--done{background:var(--success-tint); border-color:var(--success-border)}
.dcol--rest{background:transparent; border:1px dashed var(--dash-2)}
.dcol--today{outline:2px solid var(--accent); outline-offset:1px}
.dcol__hd{display:flex; align-items:baseline; gap:4px; padding:7px 7px 5px}
.dcol__hd .dw{font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--muted)}
.dcol--today .dcol__hd .dw{color:var(--accent)}
.dcol__hd .nm{font-size:13px; font-weight:700}
.dcol__sh{position:relative; margin:0 5px; aspect-ratio:16/10; border-radius:9px; overflow:hidden; background:repeating-linear-gradient(135deg,#FCE9D8 0 6px,#F8DDC6 6px 12px)}
.dcol__sh img,.drow__sh img,.gcard__sh img,.lvid__sh img,.pick__sh img,.wcard__sh img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dcol__sh .veil{position:absolute; inset:0; border-radius:9px; background:rgba(31,107,66,.45)}
.playdot{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; background:rgba(255,251,247,.95); color:var(--ink); box-shadow:0 2px 8px rgba(40,14,4,.25)}
.playdot--done{background:var(--success); color:#FFF}
.dcol__t{margin:6px 7px 0; font-size:11px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.dcol__ft{display:flex; align-items:center; gap:4px; padding:5px 7px 7px}
.dcol__ft .ok{font-size:10px; font-weight:700; color:var(--success)}
.dcol__rest{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--faint); font-size:11px; font-weight:600}
.drow{display:flex; gap:9px; align-items:center; padding:7px; border-radius:14px; background:var(--surface); border:1px solid var(--border)}
.drow--done{background:var(--success-tint); border-color:var(--success-border)}
.drow--rest{background:transparent; border:1px dashed var(--dash-2); padding:5px 7px}
.drow__d{width:32px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px}
.drow__d .dw{font-size:9px; font-weight:700; color:var(--muted)}
.drow__d .nm{width:26px; height:26px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.drow--today .drow__d .dw{color:var(--accent)}
.drow--today .drow__d .nm{background:var(--accent); color:#FFF}
.drow__sh{position:relative; flex-shrink:0; width:72px; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:repeating-linear-gradient(135deg,#FCE9D8 0 6px,#F8DDC6 6px 12px)}
.drow__sh .veil{position:absolute; inset:0; border-radius:8px; background:rgba(31,107,66,.45)}
.drow__sh .playdot{width:22px; height:22px; font-size:11px; box-shadow:none}
.drow__b{flex:1; min-width:0}
.drow__b .t{font-size:12px; font-weight:600}
.drow__b .m{display:flex; align-items:center; gap:4px; margin-top:3px}
.drow__rest{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--faint)}
.grid-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
@media (max-width:699px){ .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .gcard--x{display:none} }
.gcard{min-width:0; display:flex; flex-direction:column; border-radius:15px; overflow:hidden; background:var(--surface)}
.gcard--rest{background:transparent; border:1px dashed var(--dash-2)}
.gcard--today{outline:2px solid var(--accent); outline-offset:-1px}
.gcard__sh{position:relative; aspect-ratio:16/10; overflow:hidden; background:repeating-linear-gradient(135deg,#FCE9D8 0 8px,#F8DDC6 8px 16px)}
.gcard__b{flex:1; display:flex; flex-direction:column; gap:5px; padding:9px 10px 10px; min-width:0}
.gcard__hd{display:flex; align-items:baseline; gap:5px}
.gcard__hd .e{font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--accent)}
.gcard__hd .d{font-size:12px; font-weight:700}
.gcard__hd .sp{flex:1}
.gcard__t{font-size:12px; font-weight:600; line-height:1.3}
.gcard__go{display:flex; align-items:center; justify-content:center; gap:5px; height:32px; border-radius:10px; font-size:12px; font-weight:700; white-space:nowrap; background:var(--ink); color:var(--on-dark); border:1px solid var(--ink); margin-top:auto}
.gcard__go--done{background:var(--success-tint); color:var(--success); border-color:var(--success-border)}
.gcard__rest{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--faint); font-size:12px; font-weight:600; min-height:120px; padding:9px 10px}

/* 6 · free plans ---------------------------------------------------------- */
/* Five plans, not the design's three: a scroll-snap row at every width with
   ‹ › controls, rather than a 3-column grid that would orphan two cards. */
.fp__row{display:flex; scroll-behavior:smooth; margin:44px calc(-1 * var(--pad)) 0; padding:0 var(--pad) 6px;
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--pad); align-items:stretch}
.fp-card{flex:0 0 min(340px,82vw); scroll-snap-align:start}
@media (min-width:1100px){ .fp-card{flex:0 0 340px} }
.fp-card{min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:16px; transition:box-shadow .2s, transform .2s}
.fp-card:hover{box-shadow:0 12px 30px rgba(107,36,16,.10); transform:translateY(-2px)}
.fp-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.fp-card__ic{width:56px; height:56px; flex-shrink:0; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px}
.fp-card__hd{display:flex; flex-direction:column; gap:6px}
.fp-card__hd h3{font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.2; text-wrap:balance}
.fp-card__hd p{margin:0; font-size:15px; line-height:1.5; color:var(--muted); text-wrap:pretty}
.fp-stats{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; background:var(--subtle); padding:2px 14px}
.fp-stats div{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-top:1px solid var(--border)}
.fp-stats div:first-child{border-top:0}
.fp-stats .l{flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--muted)}
.fp-stats .v{font-size:15px; font-weight:700; white-space:nowrap}
.fp-card__ft{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.fp-credit{display:flex; flex-wrap:wrap; align-items:center; column-gap:4px; row-gap:3px; font-size:13px; line-height:1.5; color:var(--muted); text-wrap:pretty}
.fp-credit .ic{display:inline-block; flex-shrink:0; color:var(--accent); margin-right:2px; vertical-align:-1px}
.fp-credit a{display:inline-block; font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent-2); text-underline-offset:3px}
.fp-credit > span{display:inline-block}
/* TODO marker — visible on purpose until real channel names land */
.fp-credit .todo{font-weight:700; color:var(--t-int-ink); background:var(--t-int-bg); padding:1px 6px; border-radius:5px; border:1px dashed var(--t-int-ink)}
.fp-dl{display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px; border-radius:14px; background:var(--ink); color:var(--on-dark); font-weight:700; font-size:15px; text-align:center}
.fp-dl:hover{background:var(--ink-hover); color:var(--on-dark)}
.fp-note{display:flex; align-items:flex-start; gap:10px; margin-top:20px; font-size:14px; line-height:1.55; color:var(--muted); max-width:760px}
.fp-note + .fp-note{margin-top:10px}
.fp-note .ic{color:var(--accent); font-size:18px; margin-top:1px; flex-shrink:0}
.fp-note span{text-wrap:pretty}

/* 7 · why I built this ---------------------------------------------------- */
.why__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:32px 64px; align-items:start}
.why__who{display:flex; flex-direction:column; gap:20px}
.why__essay{grid-column:span 2; max-width:760px; display:flex; flex-direction:column; gap:20px}
.why__essay p{margin:0; font-size:17px; line-height:1.65; color:var(--muted); text-wrap:pretty}
.why__essay .lead{font-size:clamp(22px,2.4vw,30px); line-height:1.4; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.why__essay .close{font-size:19px; font-weight:700; color:var(--accent)}
.origin__meta{display:flex; flex-direction:column; gap:2px; margin-top:2px; color:var(--muted); align-self:flex-start; font-style:italic}
.origin__meta b{font-size:15px; font-weight:700; font-style:normal; color:var(--ink)}
.origin__meta span{font-size:12px; letter-spacing:.02em; color:var(--muted)}

/* 8 · run it / build it --------------------------------------------------- */
.runit{background:var(--dark); color:var(--on-dark); border-radius:28px; padding:clamp(28px,5vw,64px); display:flex; flex-direction:column; gap:36px}
.runit h2{flex:1 1 420px; font-size:clamp(36px,5vw,60px); line-height:1.02; font-weight:700; letter-spacing:-.035em}
.runit h2 span{color:var(--accent-1)}
.runit__lede{margin:0; flex:1 1 320px; max-width:440px; font-size:16px; line-height:1.6; color:var(--accent-3); text-wrap:pretty}
.runit__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:16px}
.runit__col{display:flex; flex-direction:column; gap:12px; min-width:0}
.runit__lbl{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--accent-2)}
.code{background:var(--code); border-radius:18px; padding:20px 22px; font-family:'DM Mono',monospace; font-size:14px; line-height:2; overflow-x:auto; white-space:nowrap}
.code .p{color:var(--prompt)}
.code .o{color:var(--output)}
.runit__note{font-size:14px; color:var(--accent-3)}
.runit__note code{font-family:'DM Mono',monospace; color:var(--on-dark); background:var(--code); padding:2px 6px; border-radius:6px}

/* 9 · what's new ---------------------------------------------------------- */
.news__row{display:flex; gap:16px; scroll-behavior:smooth; margin:44px calc(-1 * var(--pad)) 0; padding:0 var(--pad) 4px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--pad); align-items:stretch}
.news-card{flex:0 0 min(360px,82vw); scroll-snap-align:start}
@media (min-width:1100px){ .news-card{flex:0 0 360px} }
.news-card{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:12px}
.news-card__ic{width:40px; height:40px; border-radius:12px; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:19px}
.news-card b{font-size:17px; font-weight:700; line-height:1.3}
.news-card p{margin:0; font-size:15px; line-height:1.55; color:var(--muted); text-wrap:pretty}
.news__more{display:inline-flex; align-items:center; gap:6px; margin-top:24px; font-size:15px; font-weight:700; color:var(--accent)}

/* 10 · download ----------------------------------------------------------- */
.dl{background:var(--tint); border-radius:28px; padding:clamp(40px,6vw,88px) 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px}
.dl__logo{width:132px; height:132px; display:flex; align-items:center; justify-content:center; overflow:visible}
.dl__logo img{width:132px; height:132px; object-fit:contain; border-radius:50%}
.dl h2{font-size:clamp(36px,5vw,64px); line-height:1.02; font-weight:700; letter-spacing:-.035em; max-width:820px; text-wrap:balance}
.dl__hero-name{color:var(--accent)}
.dl__hero-name b{color:var(--ink); font-weight:800}
.dl p{margin:0; max-width:560px; font-size:17px; line-height:1.6; color:var(--muted); text-wrap:pretty}
.dl__btns{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.dl__btns .btn{flex:1 1 auto}
.dl__btns .btn--ghost:hover{background:var(--bg)}
.dl__note{margin:4px 0 0; max-width:560px; font-size:13px; line-height:1.55; color:var(--faint); text-wrap:pretty}
.dl__note code{font-family:'DM Mono',monospace; font-size:12px; background:var(--surface); border:1px solid var(--border); padding:2px 6px; border-radius:6px; white-space:nowrap}
@media (max-width:719px){
  #download{padding-left:0; padding-right:0}
  #download .dl{border-radius:0}
}

/* 5a · your other screens — phone/tablet in the browser, TV via the APK */
.companion__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:16px; margin-top:44px}
.companion__item{display:flex; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:22px}
.companion__ic{width:40px; height:40px; flex-shrink:0; border-radius:12px; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:19px}
.companion__body{min-width:0; display:flex; flex-direction:column; gap:8px}
.companion__body b{font-size:17px; font-weight:700; line-height:1.3}
.companion__body p{margin:0; font-size:15px; line-height:1.55; color:var(--muted); text-wrap:pretty}
.companion__body a{font-size:14px; font-weight:700; color:var(--accent); width:max-content; max-width:100%}
.companion__body a:hover{text-decoration:underline; text-underline-offset:3px}

/* 11 · footer ------------------------------------------------------------- */
.foot{max-width:var(--maxw); margin:0 auto; padding:64px var(--pad) 48px}
.foot__in{display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:28px}
.foot__in img{width:28px; height:28px; border-radius:50%}
.foot__c{flex:1 1 300px; font-size:14px; color:var(--muted)}
.foot__links{display:flex; gap:20px; font-size:14px; font-weight:600}