/* ============================================================
   Climbek — shared styles for every page.
   Edit colours and fonts here once; all pages update.

   Contents:
     1. Design tokens (light + dark palettes)
     2. Base & typography
     3. Layout containers
     4. Shared components (brand, nav, footer, badges, chips…)
     5. Buttons
     6. Screenshot placeholders
     7. Landing page sections
     8. Legal document pages
     9. Motion
   ============================================================ */

/* ---- 1. Design tokens · light (paper) ---- */
:root{
  --bg:#FBF7F0; --card:#FFFFFF; --sunken:#F2ECE0; --border:#E7DECD;
  --t1:#1B2430; --t2:#55606E; --t3:#8A929C;
  --accent:#E8552E; --accentSoft:rgba(232,85,46,.10);
  --teal:#12A594; --tealSoft:rgba(18,165,148,.12);
  --frame:#0A0D12;
  /* fixed colours used on dark "frame" panels, same in both themes */
  --frame-t1:#F2ECE0; --frame-t2:#9AA6B2;
  --frame-glow:rgba(244,129,63,.22);
}
/* ---- Design tokens · dark (dusk) ---- */
body[data-theme="dusk"]{
  --bg:#10151D; --card:#1B2430; --sunken:#141C26; --border:#2A3644;
  --t1:#F2ECE0; --t2:#9AA6B2; --t3:#6E7883;
  --accent:#F4813F; --accentSoft:rgba(244,129,63,.14);
  --teal:#12A594; --tealSoft:rgba(18,165,148,.16);
  --frame:#05070A;
}

/* ---- 2. Base & typography ---- */
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--t1);
  font-family:-apple-system,BlinkMacSystemFont,'Nunito',system-ui,sans-serif;
  transition:background .5s ease,color .5s ease;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Nunito',sans-serif;font-weight:800;margin:0}

/* ---- 3. Layout containers ---- */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.wrap--narrow{max-width:820px}
.section{max-width:1120px;margin:24px auto 0;padding:0 28px}

/* ---- 4. Shared components ---- */

/* Brand lockup (icon + wordmark) */
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:38px;height:38px;border-radius:11px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.10)}
.brand-icon img{width:100%;height:100%;display:block}
.brand-name{font-family:'Nunito',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.4px}
.brand--sm{gap:11px}
.brand--sm .brand-icon{width:30px;height:30px;border-radius:9px;box-shadow:none}
.brand--sm .brand-name{font-size:17px}

/* Top navigation */
.site-nav{margin:0 auto;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-group{display:flex;align-items:center;gap:30px}
.nav-group--tight{gap:18px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--t2);font-size:15px;font-weight:500}
.theme-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--card);color:var(--t2);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Footer */
.site-footer{
  margin:0 auto;padding:28px 28px 48px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;border-top:1px solid var(--border);flex-wrap:wrap;
}
.footer-links{display:flex;gap:20px;align-items:center}
.footer-links a{font-size:13.5px;color:var(--t2);font-weight:600}
.tagline{font-size:13.5px;color:var(--t3);font-weight:500}

/* Pill badge ("Rest is part of the climb", doc page labels) */
.badge{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:var(--tealSoft);color:var(--teal);
  font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;
}
.badge--accent{background:var(--accentSoft);color:var(--accent)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* Small uppercase section label */
.eyebrow{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.eyebrow--teal{color:var(--teal)}

/* Rounded feature-tag chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.chip{
  font-size:13px;font-weight:600;color:var(--t2);
  background:var(--sunken);border:1px solid var(--border);
  padding:6px 12px;border-radius:999px;
}

/* Squircle icon tile */
.icon-tile{
  width:52px;height:52px;border-radius:15px;background:var(--accentSoft);
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.icon-tile--teal{background:var(--tealSoft)}

/* Card surface */
.card{background:var(--card);border:1px solid var(--border);border-radius:28px}

/* ---- 5. Buttons ---- */
.btn-pill{background:var(--accent);color:#fff;font-weight:700;font-size:14.5px;padding:10px 18px;border-radius:999px}

/* App Store badge button (dark on light hero / light on dark CTA) */
.btn-store{display:inline-flex;align-items:center;gap:11px;background:var(--frame);color:#fff;padding:13px 22px;border-radius:15px}
.btn-store .apple-mark{font-size:26px;line-height:0;margin-top:-2px}
.btn-store .label{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.btn-store .label small{font-size:11px;opacity:.8;font-weight:500}
.btn-store .label b{font-size:18px;font-weight:700;font-family:'Nunito',sans-serif}
.btn-store--light{background:#fff;color:#0A0D12;padding:15px 26px;border-radius:16px;position:relative;margin-top:4px}
.btn-store--light .label small{opacity:.7}
.btn-store--light .label b{font-weight:800}

/* ---- 6. Screenshot placeholders ---- */
.shot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;
  background:repeating-linear-gradient(135deg,var(--sunken),var(--sunken) 10px,var(--card) 10px,var(--card) 20px);
  border:1px dashed var(--border);color:var(--t3);
  font-family:ui-monospace,Menlo,monospace;font-size:13px;text-align:center;padding:16px;
}

/* ---- 7. Landing page sections ---- */

/* Hero */
.hero{
  max-width:1120px;margin:0 auto;padding:44px 28px 20px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.hero h1{font-size:60px;line-height:1.02;letter-spacing:-1.6px}
.hero-sub{font-size:19px;line-height:1.6;color:var(--t2);max-width:460px;margin:0}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.store-note{color:var(--t3);font-size:14px;line-height:1.4}
.hero-visual{display:flex;justify-content:center;position:relative}
.hero-glow{position:absolute;inset:0;background:radial-gradient(60% 55% at 60% 40%,var(--accentSoft),transparent 70%);filter:blur(10px)}
.phone{
  position:relative;width:296px;background:var(--frame);border-radius:46px;padding:11px;
  box-shadow:0 40px 80px -24px rgba(20,15,10,.5);animation:float 7s ease-in-out infinite;
}
.phone .shot{height:600px;border-radius:36px}

/* Philosophy strip */
.section--philosophy{margin-top:64px}
.philosophy{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:34px 0;
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;text-align:center;
}
.philosophy p{
  font-family:'Nunito',sans-serif;font-weight:600;font-style:italic;font-size:22px;
  color:var(--t2);max-width:760px;line-height:1.5;margin:0;
}
.philosophy strong{color:var(--t1);font-style:normal;font-weight:800}

/* Features intro */
.section--features{margin-top:80px}
.section-intro{display:flex;flex-direction:column;gap:14px;max-width:640px}
.section-intro h2{font-size:40px;letter-spacing:-1px;line-height:1.06}
.section-intro p{font-size:18px;line-height:1.6;color:var(--t2);margin:0}

/* Two-column feature card (session logging, stats, journey) */
.section--logging{margin-top:38px}
.feature-split{padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.feature-copy{display:flex;flex-direction:column;gap:18px}
.feature-copy h3{font-size:28px;letter-spacing:-.6px}
.feature-copy p{font-size:17px;line-height:1.6;color:var(--t2);margin:0}
.shot--session{height:300px;border-radius:22px}
.shot--stats{height:240px;border-radius:18px}
.shot--journey{height:240px;border-radius:22px}

/* Quote box inside stats card */
.quote-box{
  background:var(--sunken);border:1px solid var(--border);border-radius:16px;padding:16px 18px;
  font-family:'Nunito',sans-serif;font-weight:600;font-size:16px;line-height:1.5;color:var(--t1);
}
.quote-box b{color:var(--accent)}

/* Milestones list inside journey card */
.milestones{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.milestone{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:var(--t2)}
.milestone .dot{width:9px;height:9px;border-radius:50%;background:var(--teal)}
.milestone .dot--accent{background:var(--accent)}
.milestone b{color:var(--t1)}

/* Apple Watch panel (dark "frame" background in both themes) */
.watch-panel{
  background:var(--frame);border-radius:28px;padding:48px 40px;
  display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center;
  overflow:hidden;position:relative;
}
.watch-panel .eyebrow{color:#F4813F}
.watch-glow{
  position:absolute;right:-10%;top:-30%;width:60%;height:160%;
  background:radial-gradient(closest-side,var(--frame-glow),transparent);pointer-events:none;
}
.watch-visual{display:flex;justify-content:center;position:relative}
.watch-device{width:190px;height:226px;background:#000;border-radius:52px;padding:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.watch-device .shot{height:100%;border-radius:42px}
.watch-copy{display:flex;flex-direction:column;gap:18px;position:relative}
.watch-copy h3{font-size:34px;letter-spacing:-.8px;color:var(--frame-t1);line-height:1.08}
.watch-copy p{font-size:17px;line-height:1.6;color:var(--frame-t2);margin:0;max-width:440px}
.watch-stats{display:flex;gap:26px;margin-top:4px}
.watch-stat{display:flex;align-items:center;gap:9px;color:#C7CCD2;font-size:14px;font-weight:600}
.watch-stat .heart{color:#F04E4E}
.watch-stat .sync{color:#12A594}

/* Side-by-side pair of cards (projects + grip) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo-card{padding:34px;display:flex;flex-direction:column;gap:20px}
.duo-card .icon-tile{width:50px;height:50px;font-size:22px}
.duo-card h3{font-size:25px;letter-spacing:-.5px;margin:0 0 8px}
.duo-card p{font-size:16px;line-height:1.6;color:var(--t2);margin:0}
.duo-card .shot{height:150px;border-radius:18px;margin-top:auto}

/* Privacy panel */
.privacy-panel{padding:44px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.privacy-panel .icon-tile{width:54px;height:54px;border-radius:16px;background:var(--tealSoft);color:var(--teal)}
.privacy-panel h3{font-size:30px;letter-spacing:-.7px}
.privacy-panel p{font-size:17px;line-height:1.6;color:var(--t2);margin:0;max-width:560px}
.privacy-panel .chips{gap:12px;justify-content:center;margin-top:6px}
.privacy-panel .chip{font-size:14px;padding:8px 15px}

/* Closing CTA panel */
.cta{
  background:var(--frame);border-radius:32px;padding:60px 40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:22px;position:relative;overflow:hidden;
}
.cta-glow{position:absolute;inset:0;background:radial-gradient(50% 90% at 50% 0%,var(--frame-glow),transparent 65%);pointer-events:none}
.cta-icon{width:88px;height:88px;border-radius:24px;overflow:hidden;box-shadow:0 20px 40px -10px rgba(0,0,0,.6);position:relative}
.cta-icon img{width:100%;height:100%;display:block}
.cta h2{font-size:38px;letter-spacing:-1px;color:var(--frame-t1);position:relative}
.cta p{font-size:18px;color:var(--frame-t2);margin:0;max-width:460px;position:relative}

/* Landing footer sits a little lower than on doc pages */
.site-footer--landing{margin-top:40px;padding-bottom:64px}

/* ---- 8. Legal document pages (privacy.html, terms.html) ---- */
.doc{margin:0 auto;padding:28px 28px 100px}
.doc .badge{margin-bottom:22px}
.doc h1{font-size:44px;line-height:1.05;letter-spacing:-1.2px;margin:0 0 14px}
.doc .updated{font-size:16px;color:var(--t3);font-weight:600;margin:0 0 6px}
.doc .updated em{font-style:italic}
.doc .intro{font-size:17px;line-height:1.7;color:var(--t2);margin:14px 0 0;max-width:640px}
.doc hr{height:1px;background:var(--border);border:none;margin:36px 0}
.doc h2{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.4px;
  margin:34px 0 10px;display:flex;gap:12px;align-items:baseline;
}
.doc h2 .n{color:var(--accent);font-size:15px}
.doc section p{font-size:16px;line-height:1.7;color:var(--t2);margin:0;font-style:italic}

/* ---- 9. Motion (scroll reveal + floating phone) ---- */
html.js-reveal .reveal{opacity:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- 10. Responsive ----
   Desktop styles above are untouched; these only apply below the breakpoints. */

/* Tablet & below: collapse two-column layouts to a single column */
@media (max-width:900px){
  .nav-links--primary{display:none}

  .hero{grid-template-columns:1fr;padding-top:28px;gap:40px}
  .hero h1{font-size:46px;letter-spacing:-1.2px}

  .feature-split{grid-template-columns:1fr;padding:30px;gap:30px}
  .feature-split > .shot{order:2}   /* copy first, screenshot below */
  .feature-copy h3{font-size:26px}

  .watch-panel{grid-template-columns:1fr;padding:36px 30px;gap:32px}
  .watch-copy h3{font-size:30px}
  .watch-stats{flex-wrap:wrap}

  .duo{grid-template-columns:1fr}

  .section-intro h2{font-size:34px}
  .philosophy p{font-size:20px}
  .cta h2{font-size:34px}
}

/* Phones: tighter spacing and type */
@media (max-width:560px){
  .site-nav{padding:20px}
  .wrap,.section{padding-left:20px;padding-right:20px}
  .doc{padding:20px 20px 80px}

  .hero{padding:24px 20px 8px;gap:34px}
  .hero h1{font-size:38px;letter-spacing:-1px}
  .hero-sub{font-size:17px}

  .section--philosophy{margin-top:48px}
  .section--features{margin-top:56px}
  .philosophy p{font-size:18px}
  .section-intro h2{font-size:30px}
  .section-intro p{font-size:17px}

  .feature-split{padding:24px 20px;gap:26px}
  .feature-copy h3{font-size:24px}
  .duo-card{padding:24px 20px}
  .duo-card h3{font-size:22px}

  .watch-panel{padding:30px 22px}
  .watch-copy h3{font-size:27px}
  .phone{width:260px}
  .phone .shot{height:521px}   /* keeps the desktop screen proportions */

  .privacy-panel{padding:32px 22px}
  .privacy-panel h3{font-size:26px}

  .cta{padding:44px 24px;border-radius:28px}
  .cta h2{font-size:30px}
  .cta p{font-size:17px}

  .site-footer{flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:40px}
  .site-footer--landing{padding-bottom:52px}

  .doc h1{font-size:34px}
}