/* =========================================================================
   CodedMD — shared design system
   "Useful first, clever second."
   Warm paper, one confident accent set, hand-drawn doodles, soft motion.
   ========================================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:ital,wght@0,400..700;1,400..600&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400..700&family=Space+Mono:wght@400;700&family=Schibsted+Grotesk:ital,wght@0,400..800;1,400..600&family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&display=swap');

/* ---- Tokens ---- */
:root{
  /* surfaces */
  --paper:      #FBF6EC;
  --paper-deep: #F2E9D9;
  --paper-card: #FFFFFF;

  /* ink */
  --ink:        #211E1A;
  --ink-soft:   #6A6258;
  --ink-faint:  #9b9489;

  /* accents (curated, playful) */
  --coral: #F4502A;   /* primary */
  --coral-deep:#D63E1C;
  --teal:  #15876A;   /* health-y green */
  --gold:  #F4B82B;   /* sunshine */
  --sky:   #4C74E8;   /* friendly blue */
  --lilac: #8E7BE8;

  /* lines & shadow */
  --line:  rgba(33,30,26,.14);
  --line-strong: rgba(33,30,26,.9);
  --shadow-soft: 0 18px 40px -24px rgba(33,30,26,.45);

  /* type */
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;
  --title-weight: 640;   /* heading weight — tweakable */
  --title-tracking: -.02em;

  /* shape */
  --r:  18px;
  --r-lg: 30px;
  --r-pill: 999px;

  /* layout */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
}

/* ---- Brand themes live in themes.css; :root below is the "Retro Paper" default ---- */

/* ---- Reset-ish ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:18px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--coral);color:#fff}

/* paper grain so the cream feels like real stock */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---- Layout helpers ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1340px}
section{position:relative;z-index:2}
.pad{padding-block:clamp(64px,9vw,128px)}
.pad-sm{padding-block:clamp(44px,6vw,80px)}

/* ---- Type ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:var(--title-weight);line-height:1.0;letter-spacing:var(--title-tracking);text-wrap:balance}
.display{
  font-family:var(--display);font-weight:var(--title-weight);
  font-size:clamp(3.1rem,9vw,7.4rem);
  line-height:.94;letter-spacing:calc(var(--title-tracking) - .015em);
}
.h2{font-size:clamp(2.1rem,5vw,4rem);line-height:1.0;letter-spacing:calc(var(--title-tracking) - .01em);font-weight:var(--title-weight)}
.h3{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:var(--title-tracking);font-weight:var(--title-weight)}
.lead{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;color:var(--ink-soft);max-width:62ch;text-wrap:pretty}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}

/* eyebrow / kicker */
.kicker{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--body);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);
}
.kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--coral);display:inline-block}

/* highlighter mark behind a word */
.mark{position:relative;white-space:nowrap;z-index:0}
.mark::before{
  content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;bottom:.04em;height:.42em;
  background:var(--gold);border-radius:.3em;transform:rotate(-1.2deg);
  transform-origin:left center;
}
.mark.teal::before{background:#9fe0cd}
.mark.coral::before{background:#ffc3b3}
.mark.sky::before{background:#bcd0ff}

/* the accent color words */
.c-coral{color:var(--coral)}
.c-teal{color:var(--teal)}
.c-sky{color:var(--sky)}
.c-gold{color:var(--gold)}

/* ---- Buttons (chunky, tactile) ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  padding:.82em 1.4em;border-radius:var(--r-pill);
  border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .14s cubic-bezier(.3,1.4,.5,1), box-shadow .14s, background .2s;
  white-space:nowrap;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:0px 0px 0 var(--ink)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

.btn-coral{background:var(--coral);border-color:var(--coral-deep);box-shadow:3px 3px 0 var(--coral-deep);color:#fff}
.btn-coral:hover{box-shadow:5px 5px 0 var(--coral-deep)}
.btn-coral:active{box-shadow:0 0 0 var(--coral-deep)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn-ghost:hover{background:var(--paper);box-shadow:5px 5px 0 var(--ink)}

.btn-sm{font-size:.92rem;padding:.6em 1.05em;box-shadow:2px 2px 0 var(--ink)}
.btn-sm:hover{box-shadow:4px 4px 0 var(--ink)}

/* text link with animated arrow + underline */
.tlink{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--display);font-weight:600;color:var(--ink);
  position:relative;padding-bottom:2px;
}
.tlink::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.5,0,.1,1)}
.tlink:hover::after{transform:scaleX(1)}
.tlink .arr{transition:transform .2s}
.tlink:hover .arr{transform:translateX(4px)}

/* ---- Cards ---- */
.card{
  background:var(--paper-card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s, border-color .3s;
}
.card.sticker{box-shadow:5px 6px 0 var(--ink);border-color:var(--ink)}
.card.hover-pop:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 50px -28px rgba(33,30,26,.5)}
.card.sticker.hover-pop:hover{transform:translate(-3px,-4px);box-shadow:8px 10px 0 var(--ink)}

/* pill / chip */
.chip{display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;font-weight:600;
  padding:.4em .85em;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--paper)}
.chip.teal{color:var(--teal);border-color:#bfe6da;background:#eaf7f2}
.chip.coral{color:var(--coral-deep);border-color:#f7cbbe;background:#fdeee9}
.chip.sky{color:var(--sky);border-color:#c7d6fb;background:#eef2fe}
.chip.gold{color:#9a7305;border-color:#f3deab;background:#fdf4dd}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1.5px solid transparent}
.nav.scrolled{background:rgba(251,246,236,.82);backdrop-filter:blur(12px);border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;
  font-size:1.32rem;letter-spacing:-.03em}
.brand svg{width:26px;height:26px;color:var(--coral);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.brand:hover svg{transform:rotate(120deg)}
.nav-links{display:flex;align-items:center;gap:clamp(8px,2vw,30px)}
.nav-links a.navlink{font-family:var(--display);font-weight:600;font-size:1.02rem;position:relative;padding:.2em 0;color:var(--ink)}
.nav-links a.navlink::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--coral);
  transform:scaleX(0);transform-origin:center;transition:transform .24s}
.nav-links a.navlink:hover::after,.nav-links a.navlink[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:14px}
.menu-btn{display:none}

/* prevent background scroll while the mobile menu is open */
body.menu-open{overflow:hidden}

/* mobile nav */
@media(max-width:860px){
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1.5px solid var(--line);padding:14px var(--gut) 26px;
    transform:translateY(-130%);transition:transform .4s cubic-bezier(.4,0,.1,1);box-shadow:var(--shadow-soft)}
  .nav.open .nav-links{transform:translateY(0)}
  .nav-links a.navlink{font-size:1.45rem;padding:.5em 0;border-bottom:1.5px solid var(--line)}
  .nav-links a.navlink:last-child{border-bottom:0}
  .nav-links a.navlink::after{display:none}
  .nav-links a.navlink[aria-current="page"]{color:var(--coral)}
  .nav-cta .btn{display:none}
  .menu-btn{display:inline-flex;flex-direction:column;gap:5px;padding:8px}
  .menu-btn span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}
  .nav.open .menu-btn span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav.open .menu-btn span:nth-child(2){opacity:0}
  .nav.open .menu-btn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ---- Footer ---- */
.foot{background:var(--ink);color:var(--paper);position:relative;z-index:2;overflow:hidden}
.foot a{color:var(--paper)}
.foot .wrap{padding-block:clamp(56px,7vw,96px)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot h5{font-family:var(--body);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-faint);margin-bottom:18px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{opacity:.82;transition:opacity .2s, transform .2s;display:inline-block;font-weight:500}
.foot ul a:hover{opacity:1;transform:translateX(3px);color:var(--gold)}
.foot-brand{font-family:var(--display);font-size:2.6rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.foot-tag{color:var(--ink-faint);max-width:34ch;margin-top:14px;line-height:1.5;font-size:1rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:54px;padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:.9rem;color:var(--ink-faint)}
/* SVG that auto-stretches the word edge-to-edge at any width (textLength) */
.giant-word{display:block;width:100%;height:auto;margin-top:30px;
  color:rgba(255,255,255,.05);user-select:none;pointer-events:none}
.giant-word text{fill:currentColor;font-family:var(--display);font-weight:700}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand-col{grid-column:1/-1}}

/* ---- Newsletter strip ---- */
.news{background:var(--coral);color:#fff;border-radius:var(--r-lg);position:relative;overflow:hidden}
.news .inp{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.news input{flex:1;min-width:200px;font:inherit;font-size:1.05rem;padding:.9em 1.2em;border-radius:var(--r-pill);
  border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);color:#fff}
.news input::placeholder{color:rgba(255,255,255,.7)}
.news input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.2)}
.news .btn{background:#fff;color:var(--coral);border-color:#fff;box-shadow:3px 3px 0 var(--coral-deep)}
.news .btn:hover{box-shadow:5px 5px 0 var(--coral-deep)}

/* ---- Forms ---- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-family:var(--display);font-weight:600;font-size:.95rem}
.field input,.field textarea{font:inherit;font-size:1.02rem;padding:.85em 1.05em;border-radius:14px;
  border:1.5px solid var(--line);background:var(--paper-card);color:var(--ink);transition:border-color .2s, box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}

/* ---- Doodle / SVG strokes (drawn fully by default; animate only under .anim) ---- */
.scribble{color:var(--coral)}
html.anim .draw path,html.anim .draw line,html.anim .draw circle,html.anim .draw ellipse{
  stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
}
html.anim .in .draw path,html.anim .in .draw line,html.anim .in .draw circle,html.anim .in .draw ellipse{
  animation:draw 1s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* spin sparkle */
.spin-slow{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Reveal on scroll ----
   SAFETY-FIRST: opacity stays 1 at ALL times, so content can never be trapped
   invisible by a frozen animation timeline. The entrance animates transform only
   (a gentle slide-up). Worst case under a frozen/backgrounded renderer: content
   shows, merely un-slid — never blank. */
.reveal{opacity:1;transform:none}
html.anim .reveal.in{animation:revUp .7s cubic-bezier(.2,.7,.2,1) both}
html.anim .reveal.in.d1{animation-delay:.07s}html.anim .reveal.in.d2{animation-delay:.14s}
html.anim .reveal.in.d3{animation-delay:.21s}html.anim .reveal.in.d4{animation-delay:.28s}html.anim .reveal.in.d5{animation-delay:.35s}
@keyframes revUp{from{transform:translateY(24px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  html.anim .reveal.in{animation:none}
  .spin-slow{animation:none}
  html{scroll-behavior:auto}
}

/* ---- Marquee ---- */
.marquee{display:flex;overflow:hidden;gap:0;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:0;flex-shrink:0;animation:marq 32s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .it{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.1rem);
  padding:0 .55em;white-space:nowrap;display:inline-flex;align-items:center;gap:.55em;letter-spacing:-.02em}
.marquee-track .it svg{width:26px;height:26px;color:var(--coral);flex-shrink:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- Utility ---- */
.center{text-align:center}
.stack-tight{display:flex;flex-direction:column;gap:14px}
.divider{height:1.5px;background:var(--line);border:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* word cycler (instant switch by default; smooth fade only under .anim) */
.cycler{display:inline-grid}
.cycler > span{grid-area:1/1;opacity:0;transform:none}
.cycler > span.on{opacity:1}
html.anim .cycler > span{transform:translateY(.5em) rotate(2deg);transition:opacity .5s, transform .5s}
html.anim .cycler > span.on{transform:none}

/* =========================================================================
   MOBILE / SMALL-SCREEN LAYER
   ========================================================================= */

/* Tablet & down: tighten rhythm a touch */
@media(max-width:760px){
  body{font-size:17px}
  .pad{padding-block:clamp(52px,11vw,80px)}
  .pad-sm{padding-block:clamp(38px,8vw,60px)}
  .lead{font-size:1.12rem}
  .news .inp{flex-direction:column}
  .news .inp .btn{justify-content:center}
  .news input{min-width:0;width:100%}
}

/* Phones */
@media(max-width:560px){
  :root{--r-lg:24px}
  /* dial back oversized display minimums so nothing overflows 320–430px */
  .display{font-size:clamp(2.7rem,15vw,3.6rem);letter-spacing:-.03em}
  .h2{font-size:clamp(1.95rem,8.5vw,2.6rem)}
  .h3{font-size:clamp(1.4rem,6vw,1.9rem)}
  .lead{font-size:1.08rem;line-height:1.5}

  /* buttons go full-width & comfortably tall for thumbs */
  .btn{padding:.9em 1.3em;font-size:1rem}
  .btn-sm{padding:.7em 1.1em}
  .hero-actions .btn,
  .stack-cta .btn{width:100%;justify-content:center}

  /* generic: any flex row of CTAs wraps & fills */
  .cta-fill{flex-direction:column;align-items:stretch}
  .cta-fill .btn{width:100%;justify-content:center}

  /* sections that were side-by-side cards: comfortable insets */
  section[style*="border-radius"]{border-radius:20px}

  /* footer becomes single, breathable column */
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .foot-brand{font-size:2.1rem}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}

  /* marquee: smaller, faster feel */
  .marquee-track .it{font-size:1.25rem}
  .marquee-track .it svg{width:20px;height:20px}

  /* kicker wraps cleanly */
  .kicker{font-size:.74rem;letter-spacing:.13em}

  /* tweaks panel: nearly full width, off the very edge */
  .cmd-tweaks{right:10px;left:10px;width:auto;bottom:10px}
}

/* very small phones */
@media(max-width:380px){
  .display{font-size:clamp(2.35rem,13vw,2.9rem)}
  .h2{font-size:1.85rem}
  .foot-grid{grid-template-columns:1fr}
}

/* respect notches / safe areas */
@supports(padding:max(0px)){
  .nav-in,.wrap{padding-left:max(var(--gut),env(safe-area-inset-left));
    padding-right:max(var(--gut),env(safe-area-inset-right))}
}