/* ============================================================
   OneADay — Homepage styles
   Built on the OneADay design system (tokens.css).
   Cozy paper, hand-drawn wobble, four accent dots.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  position:relative;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper tone tweak */
body[data-paper="warm"]{background:#f1e7d6}
body[data-paper="sand"]{background:#ece2d0}

/* faint hand-drawn notebook grid behind everything */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23bdb29c' stroke-width='1.4' stroke-linecap='round' opacity='0.5'><path d='M2 70 q75 -6 150 0 t146 -1'/><path d='M0 220 q80 7 150 1 t150 -2'/><path d='M70 2 q-6 75 0 150 t-1 146'/><path d='M222 0 q7 80 1 150 t-2 150'/></g></svg>");
  background-size:300px 300px;
  opacity:.55;
}

/* ---------- layout ---------- */
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 28px}
section{position:relative;z-index:1}
.eyebrow{
  font-family:var(--font-ui);font-size:var(--caption);font-weight:700;
  letter-spacing:var(--caption-track);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;margin:0;
}
.eyebrow .e-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ---------- the wobble ---------- */
.wobble{border:2px solid var(--ink);border-radius:255px 18px 235px 16px/16px 235px 18px 255px}
.wobble.alt{border-radius:18px 240px 18px 235px/235px 16px 250px 18px}
.wobble.alt2{border-radius:240px 16px 250px 18px/16px 235px 18px 250px}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-ui);font-size:16px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:var(--r-pill);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .12s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--cook-green-btn);color:#f4f1e9;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--cook-green);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(0,0,0,.03)}
.btn-disabled{background:transparent;color:var(--ink-faint);border-color:var(--line);cursor:default}
.btn-disabled:active{transform:none}

/* google play chip */
.play{display:inline-flex;align-items:center;gap:11px;padding:11px 20px 11px 18px;
  background:var(--ink);color:#f4f1e9;border-radius:var(--r-pill);text-decoration:none;
  transition:transform .12s ease, box-shadow .18s ease;box-shadow:var(--shadow-sm)}
.play:hover{box-shadow:var(--shadow-md)}
.play:active{transform:scale(.97)}
.play svg{width:22px;height:22px;flex:0 0 auto}
.play .pl-sm{display:block;font-size:10px;letter-spacing:.06em;opacity:.8;line-height:1}
.play .pl-lg{display:block;font-size:15px;font-weight:700;line-height:1.25}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(7px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:38px;height:38px;border-radius:9px}
.brand .wm{font-family:var(--font-brand);font-size:27px;font-weight:400;letter-spacing:.01em;line-height:1}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-links a{font-size:15px;font-weight:600;color:var(--ink-soft);text-decoration:none;
  padding:9px 16px;border-radius:var(--r-pill);transition:background .15s ease,color .15s ease}
.nav-links a:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.nav-links a.soon{color:var(--ink-faint)}
.nav-cta{margin-left:6px}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:74px 0 60px;text-align:center}
.hero-eyebrow{display:flex;color:var(--rust);justify-content:center;margin-bottom:26px}
.hero-mark{position:relative;display:inline-block;margin:0 auto;display:block}
.hero-wm{font-family:var(--font-brand);font-weight:400;
  font-size:clamp(64px,12vw,150px);line-height:.92;color:var(--ink);margin:0;letter-spacing:.005em}
.hero-dots{position:absolute;inset:-10px -56px;pointer-events:none}
.hero-dots span{position:absolute;border-radius:50%;box-shadow:var(--shadow-sm)}
.hero-dots .d1{width:26px;height:26px;background:var(--gold);  left:-30px; top:6px}
.hero-dots .d2{width:30px;height:30px;background:var(--sage);  right:-34px;top:0}
.hero-dots .d3{width:22px;height:22px;background:var(--slate); left:-8px;  bottom:-6px}
.hero-dots .d4{width:28px;height:28px;background:var(--rust);  right:-14px;bottom:-2px}
.hero-tag{font-family:var(--font-ui);font-weight:600;color:var(--ink);
  font-size:clamp(24px,3.6vw,40px);line-height:1.12;margin:30px auto 0;max-width:18ch;
  position:relative;display:inline-block}
.hero-underline{display:block;margin:14px auto 0;width:min(360px,70%);height:13px;color:var(--accent)}
.hero-underline svg{width:100%;height:100%;display:block}
.hero-sub{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:50ch;margin:26px auto 0;text-wrap:pretty}
.hero-sub b{font-weight:700;color:var(--ink)}
.hero-apps{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:38px}
.applink{display:inline-flex;align-items:center;gap:11px;padding:11px 20px 11px 12px;background:var(--surface);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .15s ease,box-shadow .18s ease;font-weight:700;font-size:16px}
.applink:hover{transform:translateY(-3px) rotate(-.7deg);box-shadow:var(--shadow-md)}
.applink .ai{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.applink .ai img{width:38px;height:38px;border-radius:9px}
.applink small{display:block;font-size:12px;font-weight:600;color:var(--ink-muted)}

/* scattered drifting background dots */
.bg-dots{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-dots i{position:absolute;border-radius:50%;opacity:.5}

/* page-wide ambient dots (behind all content) */
.page-dots{position:absolute;inset:0;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.page-dots i{position:absolute;border-radius:50%;will-change:transform}
body[data-motion="off"] .page-dots{display:none}

/* ============================================================
   IDEA / philosophy band
   ============================================================ */
.idea{padding:58px 0 8px;text-align:center}
.idea .wrap{max-width:880px}
.idea-eyebrow{color:var(--sage);justify-content:center;margin-bottom:18px}
.idea h2{font-size:clamp(28px,4vw,42px);font-weight:700;line-height:1.12;margin:0 auto;max-width:20ch}
.idea p{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:54ch;margin:20px auto 0;text-wrap:pretty}
.idea-pts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.idea-pt{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;background:var(--surface);
  border-radius:var(--r-pill);box-shadow:var(--shadow-sm);font-weight:600;font-size:15px}
.idea-pt .pd{width:11px;height:11px;border-radius:50%}

/* ============================================================
   APP SECTIONS
   ============================================================ */
.app{padding:64px 0}
.app-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.app-ico{width:62px;height:62px;border-radius:15px;flex:0 0 auto;box-shadow:var(--shadow-sm)}
.app-ico.draw{display:grid;place-items:center;background:var(--slate)}
.app-title{font-size:clamp(30px,4.4vw,46px);font-weight:700;line-height:1.04;margin:0}
.app-platforms{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.tagpill{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);background:var(--surface-sunk);color:var(--ink-soft)}
.tagpill.soon{background:var(--gold-tint);color:#7a5a16}
.app-lede{font-size:21px;line-height:1.45;color:var(--ink);font-weight:600;max-width:40ch;margin:0 0 4px;text-wrap:pretty}
.app-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
@media(max-width:900px){.app-grid{grid-template-columns:1fr;gap:34px}}

/* feature list */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:520px){.feat{grid-template-columns:1fr}}
.feat-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 16px 17px;transition:transform .16s ease,box-shadow .18s ease;}
.feat-item:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:var(--shadow-md)}
.feat-ico{width:40px;height:40px;display:grid;place-items:center;margin-bottom:11px}
.feat-ico svg{width:40px;height:40px}
.feat-item h4{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--ink)}
.feat-item p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-muted)}
.app-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center}


/* puzzlebook game chips */
#puzzlebook .app-grid{align-items:center}
@media(min-width:901px){#puzzlebook .app-grid{grid-template-columns:0.78fr 1.22fr;gap:40px}}
/* puzzlebook bespoke app icon */
.pb-ico{background:var(--paper-warm);display:grid;place-items:center;overflow:hidden;border:2px solid var(--line-ink)}
.pb-ico svg{width:58px;height:58px;display:block}
/* puzzlebook game chips — tidy full-width stack (mirrors the app's home screen) */
.games{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.game{display:flex;align-items:center;gap:13px;width:100%;padding:11px 18px;background:transparent;
  border:2px solid var(--c);border-radius:255px 15px 235px 16px/16px 235px 15px 255px;
  transition:transform .16s ease,background .18s ease}
.game:nth-child(even){border-radius:15px 235px 16px 240px/235px 16px 250px 15px}
.game:hover{transform:translateY(-2px) rotate(-.5deg);background:color-mix(in srgb,var(--c) 12%,transparent)}
.game .g-ico{width:27px;height:27px;flex:0 0 auto}
.game .g-name{font-weight:700;font-size:16px;color:var(--ink);margin-right:auto}
.game .g-cnt{font-size:13px;color:var(--ink-muted);font-weight:600}

/* puzzlebook phone fan — side phones absolutely placed so the fan keeps a compact footprint */
.phones{position:relative;display:grid;place-items:center;min-height:466px;padding:10px 0}
.phone{width:232px;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-lg);
  transition:transform .3s ease;background:var(--surface)}
.phone img{display:block;width:100%}
.phone.p-c{position:relative;z-index:3;transform:translateY(-6px) scale(1.06)}
.phone.p-l{position:absolute;left:50%;top:50%;z-index:1;transform:translate(calc(-50% - 150px),-50%) rotate(-7deg)}
.phone.p-r{position:absolute;left:50%;top:50%;z-index:1;transform:translate(calc(-50% + 150px),-50%) rotate(7deg)}
.phones:hover .phone.p-l{transform:translate(calc(-50% - 174px),-50%) rotate(-9deg)}
.phones:hover .phone.p-r{transform:translate(calc(-50% + 174px),-50%) rotate(9deg)}
@media(max-width:520px){.phone.p-l,.phone.p-r{display:none}.phone.p-c{transform:none}.phones{min-height:auto}}

/* puzzlebook USP row — full width, evenly aligned */
.pb-usps{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;justify-content:center}
.pb-usp{display:inline-flex;align-items:center;gap:11px;padding:13px 22px;background:var(--surface);
  border-radius:var(--r-pill);box-shadow:var(--shadow-sm);font-weight:600;font-size:15px;color:var(--ink)}
.pb-usp .u-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}

/* ============ cookbook store carousel ============ */
.cb-gallery{position:relative;max-width:358px;margin:0 auto}
.cb-card{border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.cb-viewport{overflow:hidden;background:var(--paper-warm)}
.cb-track{display:flex;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
body[data-motion="off"] .cb-track{transition:none}
.cb-slide{flex:0 0 100%;position:relative;min-width:0;margin:0}
.cb-slide img{display:block;width:100%}
.cb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--ink);color:var(--ink);
  border-radius:255px 18px 235px 16px/16px 235px 18px 255px;font-size:24px;line-height:1;padding-bottom:4px;
  cursor:pointer;box-shadow:var(--shadow-md);transition:transform .12s ease,background .15s ease;z-index:4}
.cb-arrow:hover{background:var(--surface-2)}
.cb-arrow:active{transform:translateY(-50%) scale(.93)}
.cb-prev{left:-20px}
.cb-next{right:-20px;border-radius:18px 240px 18px 235px/235px 16px 250px 18px}
.cb-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.cb-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink-faint);background:transparent;
  cursor:pointer;padding:0;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.cb-dot:hover{transform:scale(1.15)}
.cb-dot.on{background:var(--cook-green);border-color:var(--cook-green)}
@media(max-width:520px){.cb-gallery{max-width:300px}.cb-prev{left:-8px}.cb-next{right:-8px}.cb-arrow{width:40px;height:40px}}

/* taskbook placeholder board */
.tb-board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:600px){.tb-board{grid-template-columns:1fr;gap:12px}}
.tb-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;min-width:0}
.tb-col h5{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-muted);display:flex;align-items:center;gap:8px}
.tb-col h5::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--slate))}
.tb-card{background:var(--paper);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:10px;
  font-size:14px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow-sm);min-width:0;overflow-wrap:break-word}
.tb-card.done{color:var(--ink-faint);text-decoration:line-through}
.tb-check{display:inline-block;width:15px;height:15px;border:2px solid var(--line-ink);border-radius:5px;
  margin-right:9px;vertical-align:-2px}
.tb-check.on{background:var(--sage);border-color:var(--sage);position:relative}
.tb-check.on::after{content:"";position:absolute;left:3px;top:0px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{margin-top:30px;padding:56px 0 50px;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 60%,transparent)}
.foot-in{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.foot-brand{max-width:320px}
.foot-brand .wm{font-family:var(--font-brand);font-size:30px;line-height:1;display:block}
.foot-brand p{font-size:15px;color:var(--ink-muted);margin:12px 0 0;line-height:1.5}
.foot-dots{display:flex;gap:7px;margin-top:14px}
.foot-dots i{width:12px;height:12px;border-radius:50%}
.foot-cols{display:flex;gap:54px;flex-wrap:wrap}
.foot-col h6{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.foot-col a,.foot-col span{display:block;font-size:15px;color:var(--ink-soft);text-decoration:none;
  margin-bottom:9px;font-weight:600}
.foot-col a:hover{color:var(--ink)}
.foot-col span.soon{color:var(--ink-faint);font-weight:600}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink-muted)}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
body[data-motion="off"] .reveal{opacity:1;transform:none;transition:none}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-dots .d1{animation:floaty 5.5s ease-in-out infinite}
.hero-dots .d2{animation:floaty 6.5s ease-in-out infinite .4s}
.hero-dots .d3{animation:floaty 5s ease-in-out infinite .8s}
.hero-dots .d4{animation:floaty 7s ease-in-out infinite .2s}

body[data-motion="off"] .hero-dots span,
body[data-motion="off"] .bg-dots i{animation:none!important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-dots span,.bg-dots i{animation:none!important}
}