/* Self-hosted fonts (SIL OFL 1.1): Baloo 2 + Nunito */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/baloo2-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/baloo2-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/baloo2-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/baloo2-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/nunito-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/nunito-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/nunito-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/nunito-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/nunito-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   v4 — warm, BOLDLY multicolor, friendly (StressWatch vibe)
   Real colored section blocks, not one color on white.
   Type: Baloo 2 (rounded display) + Nunito (body).
   ============================================================ */
:root{
  --white:#FFFFFF;
  --ink:#2A2320;
  --muted:#6F655A;
  --line:#ECE3D8;

  --coral:#F2603E;  --coral-d:#D8492A;  --peach:#FFE7DC;  --peach-2:#FFD6C6;
  --teal:#159C88;   --teal-d:#0F7E6E;   --mint:#DCF4EE;
  --sun:#F5B400;    --sun-d:#D99B00;    --sun-soft:#FFF1CC;
  --plum:#5C3E86;   --plum-d:#492F6C;
  --pink:#FF8FA8;

  --display:"Baloo 2","Nunito",system-ui,sans-serif;
  --body:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --hero:#DCEFE2;--hero-2:#CBE6D6;  /* home hero block: light green/mint */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--white);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 30px}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:9px}
.nav-cta{font-weight:800;color:#fff;background:var(--teal);padding:11px 22px;border-radius:999px;font-size:14px;
  transition:transform .15s,background .2s}
.nav-cta:hover{background:var(--teal-d);transform:translateY(-1px)}
/* home icon (replaces the "Back to home" button on detail pages) */
.nav-home{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:17px;transition:background .2s,transform .15s}
.nav-home svg{width:27px;height:27px;stroke-linecap:round;stroke-linejoin:round}
.nav-home:hover{background:rgba(0,0,0,.06);transform:translateY(-1px)}
.nav-link{font-weight:800;font-size:14px;color:var(--muted);transition:color .2s}
.nav-link:hover{color:var(--coral)}

/* shared type */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
.eyebrow{display:inline-block;font-family:var(--body);font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase}
.lead{font-size:17px;color:var(--muted);max-width:520px;font-weight:600}
.h2{font-size:40px;margin:12px 0 0}
.lede{font-size:22px;color:var(--ink);max-width:470px;margin:18px 0 0;font-weight:700;line-height:1.3}

/* pill */
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:12.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:8px 15px;border-radius:999px}
.pill--ink{color:#fff;background:var(--ink)}
.pill--white{color:var(--coral);background:#fff}
.pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}

/* cta */
.cta-row{display:flex;gap:16px;align-items:center;margin-top:28px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:14px;
  height:60px;padding:0 22px;transition:transform .15s;text-decoration:none}
.badge:hover{transform:translateY(-1px)}
.badge svg{width:30px;height:30px;fill:#fff;flex:0 0 auto}
.badge small{display:block;font-size:11px;opacity:.9;line-height:1.15;font-weight:700;letter-spacing:.01em}
.badge b{font-size:19px;font-weight:700;line-height:1.15}
.cta-note{font-size:13.5px;color:var(--muted);font-weight:700}

/* QR download helper (button beside the App Store badge) */
.qrbtn{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;flex:0 0 auto;
  transition:background .2s,transform .15s}
.qrbtn:hover{background:var(--mint);transform:translateY(-1px)}
.qrbtn svg{width:26px;height:26px}
.qr-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(20,15,10,.5);z-index:80;padding:24px}
.qr-modal.open{display:flex}
.qr-card{background:#fff;border-radius:22px;padding:30px 30px 26px;max-width:320px;width:100%;
  text-align:center;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.qr-card h3{font-family:var(--display);font-size:22px;margin-bottom:4px}
.qr-card p{font-size:14px;color:var(--muted);font-weight:600;margin-top:14px;line-height:1.5}
.qr-card img.qr-img{width:220px;height:220px;max-width:100%;border-radius:12px;margin:8px auto 0;display:block}
.qr-close{position:absolute;top:10px;right:14px;border:none;background:transparent;font-size:28px;
  line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
.qr-close:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.qr-modal{transition:none}}

/* ===== hero (full-bleed peach — first row spreads edge to edge) ===== */
header{background:linear-gradient(135deg,var(--hero),var(--hero-2));padding:78px 0 86px}
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.hero h1{font-size:60px;font-weight:700;margin:18px 0 0}
.hero .sub{font-size:16px;color:var(--muted);max-width:440px;margin:12px 0 0;font-weight:600}
.hero-copy{max-width:540px}
.hero-photo{width:100%;max-width:340px}

/* Apple Watch: real bezel photo with the screen hollowed out.
   .shot sits behind the transparent window — drop the app screenshot in. */
.watch-stage{display:flex;justify-content:center;padding:56px 0 72px}
.watch{position:relative;width:300px}
.bezel{position:relative;z-index:2;width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 40px rgba(60,40,20,.30))}
.shot{position:absolute;z-index:1;left:20.9%;top:24.5%;width:56.2%;height:51.2%;
  overflow:hidden;background:#0b0b0d;border-radius:15%}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.t-home .watch{width:330px}
.now{display:flex;align-items:center;gap:9px;background:var(--coral);color:#fff;border-radius:12px;padding:9px 12px;
  font-size:11px;font-weight:800}
.now .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:1}
.tile{border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff}
.tile span{font-size:10px;font-weight:800}
.t-coral{background:var(--coral)} .t-teal{background:var(--teal)} .t-sun{background:var(--sun);color:#3a2c00}
.t-pink{background:var(--pink)} .t-plum{background:var(--plum)}
.tile.wide{grid-column:span 2;flex-direction:row;gap:9px;justify-content:flex-start;padding:0 13px}

/* ===== bands ===== */
.band{max-width:1080px;margin:24px auto;padding:66px 30px;border-radius:30px}
.band .wrap{padding-left:0;padding-right:0;max-width:none}
section:not(.band){padding:74px 0}
.band--mint{background:var(--mint)}
.band--sun{background:var(--sun-soft)}
.band--plum{background:var(--plum);color:#fff}
.band--plum .h2{color:#fff}
.band--plum .lead{color:#E4DCF0}
.eyebrow--coral{color:var(--coral-d)} .eyebrow--teal{color:var(--teal-d)}
.eyebrow--sun{color:var(--sun-d)} .eyebrow--plum{color:var(--pink)}

/* highlights: 3 colorful cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.card{border-radius:22px;padding:30px 26px;color:#fff}
.card h3{font-size:21px;font-weight:700;margin-bottom:8px;color:#fff}
.card p{font-size:14.5px;font-weight:600;opacity:.94}
.card .ic{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.22);display:flex;
  align-items:center;justify-content:center;margin-bottom:18px}
.card .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card--coral{background:var(--coral)} .card--teal{background:var(--teal)} .card--sun{background:var(--sun);color:#3a2c00}
.card--sun h3{color:#3a2c00} .card--sun p{color:#5a4500} .card--sun .ic{background:rgba(58,44,0,.14)}
.card--sun .ic svg{stroke:#3a2c00}

/* steps on mint */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.step{background:#fff;border-radius:20px;padding:26px 24px}
.step .n{font-family:var(--display);font-size:30px;font-weight:700;color:var(--coral);line-height:1}
.step h3{font-size:18px;font-weight:700;margin:12px 0 7px}
.step p{font-size:14.5px;color:var(--muted);font-weight:600}

/* how-to steps with real screenshots — flexible count (2, 3 or 4 cards) */
.howsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;margin-top:42px}
.hstep{background:#fff;border-radius:20px;padding:16px 16px 24px}
.hstep img{width:100%;aspect-ratio:374/446;object-fit:cover;border-radius:14px;
  border:1px solid var(--line);box-shadow:0 10px 22px rgba(60,40,20,.12)}
.hstep .n{font-family:var(--display);font-size:26px;font-weight:700;color:var(--coral);
  line-height:1;margin:16px 0 0}
.hstep h3{font-size:18px;font-weight:700;margin:8px 0 5px}
.hstep p{font-size:14px;color:var(--muted);font-weight:600}

/* specs on sun */
.spec-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.spec-list li{background:#fff;border-radius:16px;padding:20px 22px}
.spec-list b{display:block;font-family:var(--display);font-size:23px;font-weight:700;color:var(--ink)}
.spec-list span{font-size:12px;color:var(--sun-d);font-weight:800;letter-spacing:.05em;text-transform:uppercase}

/* maker on plum */
.maker{max-width:680px}
.maker-quote{font-family:var(--display);font-size:30px;font-weight:600;line-height:1.3;color:#fff;margin:14px 0 0}
.maker-by{margin-top:18px;font-weight:800;color:#F0E8FA}
.maker-note{margin-top:12px;font-size:13px;color:#C9BCDD;font-weight:600}

/* hub */
.pill-row{margin-bottom:4px}
.hub-lede{font-size:19px;color:var(--muted);max-width:520px;margin:14px 0 0;font-weight:600}
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.appcard{display:flex;gap:18px;align-items:center;background:var(--white);border:1px solid var(--line);
  border-radius:22px;padding:24px;transition:transform .15s,border-color .2s}
.appcard:hover{transform:translateY(-2px);border-color:var(--peach-2)}
.appcard img{width:64px;height:64px;border-radius:16px;flex:0 0 64px}
.appcard h3{font-family:var(--display);font-size:22px;font-weight:700}
.appcard p{font-size:14px;color:var(--muted);font-weight:600;margin:4px 0 0}
.tag-mini{display:inline-block;font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--teal);border-radius:999px;padding:4px 11px;margin-top:9px}
.tag-price{display:inline-block;font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.03em;
  color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-top:9px}
.more-soon{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:13px;
  padding:34px 10px 8px;color:var(--muted)}
.more-soon .plus{width:40px;height:40px;border-radius:50%;background:var(--mint);border:2px dashed var(--teal);
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:var(--teal);flex:0 0 auto}
.more-soon .cs{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em}

/* ===== per-app accent: gives each subpage its own identity =====
   Each subpage sets <body class="t-<app>">; the watch frame, the live
   bar, the "What's inside" eyebrow and the feature cards all pick up
   --accent so the six pages stop looking like one cloned template. */
body.t-soundsfunwatch{--accent:#D9652F;--accent-d:#B04E1F;--accent-soft:#FBE3D7;--accent-ink:#fff;--hero:#F3C5B3;--hero-2:#EEB9A4}
body.t-yesnowatch{--accent:#5C6B7A;--accent-d:#45515E;--accent-soft:#E2E6EA;--accent-ink:#fff;--hero:#BEC1C5;--hero-2:#B3B6BB}
body.t-fishinggowatch{--accent:#1F5C92;--accent-d:#16456E;--accent-soft:#D7E6F2;--accent-ink:#fff;--hero:#A1B6C7;--hero-2:#94AABB}
body.t-writingwatch{--accent:#8A7A60;--accent-d:#6E6049;--accent-soft:#EFEAE0;--accent-ink:#fff;--hero:#EFEADB;--hero-2:#E6DCC6}
body.t-flashmindwatch{--accent:#3A35AE;--accent-d:#2C2885;--accent-soft:#E0E0F2;--accent-ink:#fff;--hero:#B0B0E1;--hero-2:#A6A6DC}
body.t-bobing{--accent:#D9443C;--accent-d:#B5332C;--accent-soft:#FCE6DA;--accent-ink:#fff;--hero:#F4B3AE;--hero-2:#EFA29A}

/* detail-page "How it works" band picks up the app color */
body[class*="t-"] .band--mint{background:var(--accent-soft)}
body[class*="t-"] .band--mint .eyebrow{color:var(--accent-d)}
body[class*="t-"] .step .n{color:var(--accent)}
body[class*="t-"] .hstep .n{color:var(--accent)}

/* the live bar picks up the page accent */
body[class*="t-"] .now{background:var(--accent);color:var(--accent-ink)}
.eyebrow--accent{color:var(--accent-d)}
.card--a{background:var(--accent);color:var(--accent-ink)}
.card--a h3{color:var(--accent-ink)} .card--a p{color:var(--accent-ink);opacity:.93}
.card--a .ic{background:rgba(255,255,255,.22)} .card--a .ic svg{stroke:var(--accent-ink);fill:none}
.card--b{background:var(--accent-soft);color:var(--accent-d)}
.card--b h3{color:var(--accent-d)} .card--b p{color:var(--accent-d);opacity:.82}
.card--b .ic{background:rgba(0,0,0,.07)} .card--b .ic svg{stroke:var(--accent-d);fill:none}
.card--c{background:var(--accent);color:var(--accent-ink);opacity:.86}
.card--c h3{color:var(--accent-ink)} .card--c p{color:var(--accent-ink);opacity:.95}
.card--c .ic{background:rgba(255,255,255,.22)} .card--c .ic svg{stroke:var(--accent-ink);fill:none}

/* footer */
footer{background:#178A66;color:#d7f0e6;padding:40px 0;font-size:13px}
/* detail pages: no green bar, just plain text (homepage t-home keeps the green) */
body[class*="t-"]:not(.t-home) footer{background:transparent;color:var(--muted);padding:26px 0 48px}
body[class*="t-"]:not(.t-home) footer .foot-links a:hover{color:var(--ink)}
.foot-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.foot-links a{color:#e7dcd2;font-weight:700}
.foot-links a:hover{color:var(--coral)}
.foot-copy{text-align:center;color:#9c8f82;font-weight:600}

/* legal */
.legal{max-width:720px;margin:0 auto;padding:80px 30px}
.legal h1{font-size:36px;margin-bottom:6px}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:28px;font-weight:600}
.legal h2{font-size:20px;font-family:var(--display);font-weight:700;margin:28px 0 8px}
.legal p{color:var(--muted);margin-bottom:12px;font-weight:600}
.mailbtn{display:inline-block;font-family:var(--display);font-size:18px;font-weight:700;color:#fff;
  background:var(--teal);padding:13px 26px;border-radius:999px;transition:background .2s,transform .15s}
.mailbtn:hover{background:var(--teal-d);transform:translateY(-1px)}
.mailrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.mailaddr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:700;
  color:#111;background:#F2F5F3;border:1px solid #DCE5E0;border-radius:10px;padding:12px 16px;user-select:all}
.copybtn{font-family:var(--display);font-size:15px;font-weight:700;color:var(--teal-d);background:#fff;
  border:1.5px solid var(--teal);border-radius:999px;padding:11px 20px;cursor:pointer;
  transition:background .2s,transform .15s}
.copybtn:hover{background:var(--mint);transform:translateY(-1px)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:#111;color:#fff;
  font-size:14px;font-weight:700;padding:11px 20px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}
.note{background:var(--sun-soft);border:1px solid #ecd59a;border-radius:12px;padding:14px 16px;
  color:var(--sun-d);font-size:14px;font-weight:700;margin:20px 0}

:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:36px}
  .watch-stage{order:-1}
  .hero h1{font-size:44px}
  .grid3,.steps,.spec-list,.apps{grid-template-columns:1fr}
  .h2{font-size:32px}
  .band{margin:18px 12px;padding:44px 20px}
  header{padding:52px 20px}

  /* Homepage only: the watch shot there is a generic bezel and eats a
     whole screenful on a phone, so drop it. Detail pages keep theirs --
     their shot is a real animation, which is the whole point. */
  body.t-home .watch-stage{display:none}
  body.t-home .hero{gap:0}

  /* Detail pages: put the icon and the heading on one line, then let the
     body copy run underneath. Frees roughly a row per card. */
  .card{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;padding:24px 22px}
  .card .ic{margin-bottom:0}
  .card h3{margin-bottom:0;flex:1 1 auto;min-width:0}
  .card p{flex:1 1 100%;margin-top:10px}

  /* The QR button only helps when you're looking at a desktop screen with
     a phone in your hand. On a phone it just sits there, so drop it. The
     modal goes with it, which also stops the QR bitmap from being
     downloaded on a phone. */
  .qrbtn{display:none}
  .qr-modal{display:none!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none}}