/* =====================================================================
   Mesocycle marketing site — shared styles
   Design tokens mirror the app (mesocycle-app.html) so the marketing
   pages and the PWA feel like one product.
   ===================================================================== */

:root{
  --bg:#fafaf7;
  --surface:#ffffff;
  --ink:#0a0a0a;
  --ink-2:#1a1a1a;
  --muted:#5a5a5a;
  --muted-2:#8a8a8a;
  --line:#ececea;
  --line-2:#e2e2df;
  --chip:#f2f2ef;

  /* The flagship secondary brand colour is a warm off-white.
     It reads only on dark surfaces (Rx card, primary buttons) —
     on the light page background it intentionally disappears,
     leaving the site calm. Anywhere emphasis is needed on light
     backgrounds, use --ink or --muted directly. */
  --accent:#fafaf7;
  --accent-ink:#ececea;

  --ok:#2e7d4f;
  --bad:#b42a1f;

  --radius:14px;
  --radius-lg:22px;
  --radius-sm:8px;

  --shadow-sm:0 1px 2px rgba(10,10,10,.04), 0 1px 3px rgba(10,10,10,.05);
  --shadow-md:0 4px 14px -4px rgba(10,10,10,.08), 0 12px 32px -12px rgba(10,10,10,.10);

  --primary-bg:#0a0a0a;
  --primary-fg:#ffffff;

  --container:1120px;
  --container-narrow:760px;

  --fs-0:0.8125rem;   /* 13 */
  --fs-1:0.9375rem;   /* 15 */
  --fs-2:1.0625rem;   /* 17 */
  --fs-3:1.25rem;     /* 20 */
  --fs-4:1.75rem;     /* 28 */
  --fs-5:2.5rem;      /* 40 */
  --fs-6:3.25rem;     /* 52 */
  --fs-7:4.25rem;     /* 68 */

  --lh-tight:1.08;
  --lh-snug:1.3;
  --lh-body:1.55;
}

/* Site is intentionally locked to its light palette; system dark
   mode is not followed. The app itself still has a dark theme. */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-2);
  line-height:var(--lh-body);
  font-feature-settings:"ss01","ss02","cv01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.1em}
li{margin:0 0 .35em}
img,svg{display:block;max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--chip);padding:1px 6px;border-radius:6px}
strong{font-weight:620}

h1,h2,h3,h4{margin:0 0 .5em;line-height:var(--lh-tight);letter-spacing:-0.02em;font-weight:660;color:var(--ink)}
h1{font-size:var(--fs-6)}
h2{font-size:var(--fs-5)}
h3{font-size:var(--fs-4)}
h4{font-size:var(--fs-3);font-weight:620;letter-spacing:-0.015em}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding:clamp(60px,9vw,120px) 0}
.section--tight{padding:clamp(40px,6vw,72px) 0}
.eyebrow{
  display:inline-block;
  font-size:.75rem;
  font-weight:560;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.lead{font-size:var(--fs-3);line-height:1.45;color:var(--muted);max-width:60ch}

/* -- Nav ------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
  max-width:var(--container);margin:0 auto;padding:0 clamp(16px,4vw,32px);
}
.nav__brand{display:flex;align-items:center;gap:10px;font-weight:620;letter-spacing:-.01em;font-size:var(--fs-2)}
.nav__brand img{width:26px;height:26px}
.nav__links{display:flex;gap:24px;align-items:center;font-size:var(--fs-1);color:var(--muted)}
.nav__links a{transition:color .15s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{margin-left:8px}
@media (max-width:720px){
  .nav__links a:not(.nav__cta){display:none}
}

/* -- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:560;font-size:var(--fs-1);
  padding:12px 20px;border-radius:999px;
  border:1px solid transparent;
  background:var(--primary-bg);color:var(--primary-fg);
  cursor:pointer;transition:transform .08s, background .15s, border-color .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--chip);color:var(--ink)}
.btn--lg{padding:16px 28px;font-size:var(--fs-2)}
.btn--accent{background:var(--accent);color:#fff}
.btn--block{display:flex;width:100%}

/* -- Hero ----------------------------------------------------------- */
.hero{padding:clamp(56px,10vw,120px) 0 clamp(40px,8vw,80px);position:relative;overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);
  align-items:center;
}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.4rem, 6vw, var(--fs-7));letter-spacing:-.035em;line-height:1.02}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__sub{font-size:var(--fs-3);color:var(--muted);max-width:52ch;margin-top:22px;line-height:1.45}
.hero__cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero__micro{margin-top:20px;font-size:var(--fs-0);color:var(--muted-2);display:flex;gap:18px;flex-wrap:wrap}

/* -- Section headers ----------------------------------------------- */
.section-head{margin-bottom:clamp(32px,5vw,56px);max-width:64ch}
.section-head h2{font-size:clamp(1.9rem,4vw,var(--fs-5));letter-spacing:-.025em}
.section-head p{color:var(--muted);font-size:var(--fs-3);line-height:1.45;margin-top:.5em}

/* -- Feature grid -------------------------------------------------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.features{grid-template-columns:1fr;gap:14px}}
.feature{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:border-color .15s, transform .15s;
}
.feature:hover{border-color:var(--line-2);transform:translateY(-2px)}
.feature__num{
  font-size:var(--fs-0);font-weight:580;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.feature h3{font-size:var(--fs-3);font-weight:620;letter-spacing:-.015em;margin-bottom:.35em}
.feature p{color:var(--muted);font-size:var(--fs-1);margin:0}

/* -- Step list (How it works) ------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--line)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);padding:32px}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;
  background:var(--ink);color:var(--bg);
  font-size:var(--fs-0);font-weight:620;margin-bottom:18px;
}
.step h3{font-size:var(--fs-3);margin-bottom:.35em}
.step p{color:var(--muted);font-size:var(--fs-1);margin:0}

/* -- Prescription card -------------------------------------------- */
.rx{
  background:var(--ink);color:var(--bg);
  border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,56px);
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;
}
@media (max-width:820px){.rx{grid-template-columns:1fr}}
.rx__label{font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.rx h2{color:var(--bg);font-size:clamp(2rem,4vw,var(--fs-5));letter-spacing:-.03em}
.rx p{color:#bdbdbd;margin-top:10px;font-size:var(--fs-2)}
.rx__figure{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(1.4rem,3vw,2.2rem);
  line-height:1.35;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:28px;
}
.rx__figure span{color:var(--accent)}

/* -- Comparison table --------------------------------------------- */
.compare{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;font-size:var(--fs-1);
}
.compare th,.compare td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare thead th{font-weight:580;font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--soft,var(--chip))}
.compare td.yes{color:var(--ok);font-weight:580}
.compare td.no{color:var(--muted-2)}
.compare td.primary{font-weight:580;color:var(--ink)}
.compare .col-us{background:color-mix(in srgb, var(--ink) 5%, transparent)}
@media (max-width:720px){
  .compare th,.compare td{padding:12px 14px;font-size:var(--fs-0)}
}

/* -- FAQ accordion ------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:22px 4px}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  font-weight:580;font-size:var(--fs-3);letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:1.6rem;color:var(--muted);margin-left:16px;transition:transform .2s;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details > *:not(summary){margin-top:14px;color:var(--muted);max-width:72ch}

/* -- Big-call CTA band ------------------------------------------- */
.cta-band{
  text-align:center;padding:clamp(56px,8vw,120px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cta-band h2{font-size:clamp(2rem,5vw,var(--fs-5));letter-spacing:-.03em;max-width:18ch;margin:0 auto}
.cta-band p{color:var(--muted);font-size:var(--fs-3);margin:14px auto 28px;max-width:52ch}

/* -- Footer ------------------------------------------------------ */
.footer{padding:56px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-1)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr;gap:28px}}
.footer__brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:620;margin-bottom:10px}
.footer__brand img{width:24px;height:24px}
.footer__tag{color:var(--muted);font-size:var(--fs-1);max-width:36ch}
.footer h5{font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:560;margin:0 0 14px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:0 0 10px}
.footer a:hover{color:var(--ink)}
.footer__base{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-0);color:var(--muted-2);
}

/* -- Long-form content (science, privacy, terms, faq, changelog) - */
.prose{max-width:68ch;margin:0 auto;font-size:var(--fs-2);line-height:1.7}
.prose h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;margin-top:0}
.prose h2{font-size:var(--fs-4);margin-top:2.2em;margin-bottom:.5em;letter-spacing:-.02em}
.prose h3{font-size:var(--fs-3);margin-top:1.8em;margin-bottom:.4em}
.prose p{color:var(--ink-2)}
.prose ul,.prose ol{color:var(--ink-2)}
.prose blockquote{
  margin:1.5em 0;padding:0 0 0 20px;border-left:3px solid var(--ink);
  color:var(--muted);font-style:italic;
}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:var(--fs-1)}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{font-weight:580;color:var(--muted);font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.08em}
.prose .meta{color:var(--muted-2);font-size:var(--fs-0);margin-top:-.5em;margin-bottom:2em;letter-spacing:.02em}

/* -- Changelog entries -------------------------------------------- */
.log-entry{padding:32px 0;border-bottom:1px solid var(--line)}
.log-entry:last-child{border-bottom:0}
.log-entry time{display:block;font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:560;margin-bottom:8px}
.log-entry h3{font-size:var(--fs-3);margin-bottom:.5em;letter-spacing:-.015em}
.log-entry ul{color:var(--ink-2);margin:0;padding-left:1.1em}
.log-entry .tag{
  display:inline-block;font-size:var(--fs-0);font-weight:560;padding:2px 10px;border-radius:999px;
  background:var(--chip);color:var(--muted);margin-right:8px;letter-spacing:.02em;
}
.log-entry .tag--new{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok)}
.log-entry .tag--fix{background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--ink)}

/* -- Form (waitlist, contact) ------------------------------------ */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,4vw,36px);max-width:520px;margin:0 auto;box-shadow:var(--shadow-sm)}
.form__field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.form__field label{font-size:var(--fs-1);font-weight:560;color:var(--ink)}
.form__field input,.form__field select,.form__field textarea{
  font:inherit;font-size:var(--fs-2);
  padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  transition:border-color .12s, box-shadow .12s;
}
.form__field input:focus,.form__field select:focus,.form__field textarea:focus{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent);
}
.form__hint{font-size:var(--fs-0);color:var(--muted-2);margin-top:-4px}
.form__status{margin-top:14px;font-size:var(--fs-1);min-height:1.4em}
.form__status.ok{color:var(--ok)}
.form__status.err{color:var(--bad)}

/* -- Phone mockup wrapper (hero visual) ---------------------------
   The mockup is an illustration. It uses a locked light palette so it
   reads the same in light or dark system themes. */
.phone{
  --phone-ink:#0a0a0a;
  --phone-surface:#ffffff;
  --phone-muted:#6b6b6b;
  --phone-line:#ececea;
  --phone-accent:#d84315;

  --phone-w:min(320px, 82vw);
  width:var(--phone-w);
  aspect-ratio:9/19.5;
  margin:0 auto;
  background:#050505;
  border-radius:42px;
  padding:8px;
  box-shadow:
    0 0 0 1px #262626 inset,
    0 1px 0 rgba(255,255,255,.04) inset,
    0 40px 80px -20px rgba(0,0,0,.25),
    0 12px 30px -10px rgba(0,0,0,.18);
  position:relative;
}
.phone__screen{
  width:100%;height:100%;
  background:var(--phone-surface);
  color:var(--phone-ink);
  border-radius:36px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.phone__notch{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:110px;height:30px;background:#000;border-radius:999px;z-index:2;
}
.phone__header{padding:40px 22px 12px;display:flex;justify-content:space-between;align-items:baseline;color:var(--phone-ink)}
.phone__header h4{font-size:1.15rem;letter-spacing:-.02em;margin:0;color:var(--phone-ink)}
.phone__header span{font-size:.75rem;color:var(--phone-muted);letter-spacing:.04em}
.phone__body{padding:10px 18px 18px;overflow:hidden;flex:1;display:flex;flex-direction:column;gap:10px}
.phone__card{
  border:1px solid var(--phone-line);border-radius:12px;padding:12px 14px;
  background:var(--phone-surface);font-size:.8rem;color:var(--phone-ink);
}
.phone__card .row{display:flex;justify-content:space-between;margin-bottom:6px}
.phone__card .row:last-child{margin-bottom:0}
.phone__card .muted{color:var(--phone-muted);font-size:.72rem}
.phone__card .logbtn{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--phone-ink);color:#fff;font-size:.7rem;font-weight:580;
}
.phone__card .rir{color:var(--phone-accent);font-weight:580;font-size:.72rem}

/* -- Hero phone mockup: looping "log a set" animation -----------------
   Same role as the autoplay video on interviewcoder.co — a small live
   moment inside the otherwise static window-mock. Two pending rows tick
   themselves over a 6s loop:
       row A (delay 0s):    "Set X · pending" + Log  ->  "lb x reps" + RIR
       row B (delay -3s):   same crossfade, opposite phase
   Pure CSS opacity crossfades; both states stacked in a one-cell grid so
   the wider state reserves space and the row never reflows. A faint
   accent wash flashes on the row at the moment the set "logs" itself.
   Honors prefers-reduced-motion via the existing global rule below. */
.phone__card .anim-row{
  position:relative;
  margin:-4px -8px 6px;
  padding:4px 8px;
  border-radius:6px;
  animation:phone-row-flash 6s ease-in-out infinite;
  animation-delay:var(--ar-delay, 0s);
}
.phone__card .anim-row:last-child{ margin-bottom:-4px }
.phone__card .ar-text,
.phone__card .ar-side{
  display:inline-grid;
  grid-template-areas:"s";
}
.phone__card .ar-text > span,
.phone__card .ar-side > span{
  grid-area:s;
  align-self:center;
}
.phone__card .ar-from,
.phone__card .ar-from-side{
  animation:phone-row-out 6s ease-in-out infinite;
  animation-delay:var(--ar-delay, 0s);
}
.phone__card .ar-to,
.phone__card .ar-to-side{
  opacity:0;
  animation:phone-row-in 6s ease-in-out infinite;
  animation-delay:var(--ar-delay, 0s);
}
@keyframes phone-row-out {
  0%, 30%   { opacity:1 }
  40%, 85%  { opacity:0 }
  95%, 100% { opacity:1 }
}
@keyframes phone-row-in {
  0%, 30%   { opacity:0 }
  40%, 85%  { opacity:1 }
  95%, 100% { opacity:0 }
}
@keyframes phone-row-flash {
  0%, 28%, 92%, 100% { background:transparent }
  38%, 84%           { background:rgba(216,67,21,.07) }
}

/* -- Utility ------------------------------------------------------ */
.muted{color:var(--muted)}
.center{text-align:center}
.mt-0{margin-top:0}
.mt-2{margin-top:16px}
.mt-4{margin-top:32px}
.mt-6{margin-top:48px}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}