/* Pupwise — the training pocket. Tokens from the app's Design/palette.json (CLAUDE.md §8.3). System fonts only. */
:root {
  --ground: #F3F5EE; --surface: #FFFFFF; --surface2: #E8EDE2; --hairline: #D6DDCF;
  --ink: #16241C; --ink2: #46554B; --ink3: #56645A;
  --accent: #2457C5; --accent-deep: #173C93; --on-accent: #FFFFFF;
  --ball: #C6EA4C; --ball-ink: #3F6A00;
  --hero-ink: #FFFFFF; --hero-ink2: #DCE6FF;
  --shadow: 0 40px 80px rgba(22, 36, 28, .22), 0 12px 24px rgba(22, 36, 28, .12);
  --radius: 28px;
  --display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0D1814; --surface: #15231D; --surface2: #1D2E27; --hairline: #2B3F36;
    --ink: #EAF2EC; --ink2: #B4C3B9; --ink3: #9EAEA4;
    --accent: #86AEFF; --accent-deep: #0A1838; --on-accent: #0A1838;
    --ball: #C8EE5A; --ball-ink: #C8EE5A;
    --shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 12px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.02; margin: 0; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
.skip { position: absolute; left: -999px; top: 12px; background: var(--surface); padding: 8px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { left: 12px; }

/* Header sits on the leash-blue hero. */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
       padding: max(18px, env(safe-area-inset-top)) clamp(16px, 5vw, 56px) 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--hero-ink); text-decoration: none; font: 700 22px var(--display); letter-spacing: -.02em; }
.brand img { border-radius: 9px; }
.badge img { height: auto; }
.badge--small img { width: 120px; }

/* Hero — the store's style B: leash blue, white type, tennis-ball emphasis. */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center;
        padding: clamp(112px, 14vw, 160px) clamp(16px, 5vw, 56px) clamp(56px, 8vw, 96px);
        background: radial-gradient(120% 90% at 70% 10%, #4A7FE6 0%, #2457C5 45%, #173C93 100%); color: var(--hero-ink); }
.hero h1 { font-size: clamp(52px, 8.4vw, 112px); font-weight: 800; }
.hero h1 em { color: #C6EA4C; }
.eyebrow { font: 700 14px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #C6EA4C; margin: 0 0 18px; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--hero-ink2); max-width: 34em; margin: 24px 0 32px; }
.cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta__note { margin: 0; font-size: 15px; color: var(--hero-ink2); }
.hero__art { position: relative; margin: 0; justify-self: center; width: min(360px, 78vw); }
.watch { position: absolute; right: -16%; bottom: 6%; width: 44%; padding: 5% 5.4%; border-radius: 27% / 23%;
         background: linear-gradient(150deg, #9aa5a0 0%, #4a5450 22%, #1b2220 60%, #6d7873 100%);
         box-shadow: 0 30px 60px rgba(5, 16, 48, .55); transform: rotate(6deg); }
.watch img { border-radius: 23% / 19.5%; }

/* Phones: our own CSS frame around real captures. */
.phone { position: relative; border-radius: 13.6% / 6.3%; padding: 3.2%; background: linear-gradient(145deg, #3d4a44, #0b100e 55%, #2b3632); box-shadow: var(--shadow); }
.phone img { border-radius: 11.4% / 5.3%; }
.phone--tilt-l { transform: rotate(-2.5deg); }
.phone--tilt-r { transform: rotate(2.5deg); }

/* The live clicker — the page's one orchestrated moment. */
.try { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 6vw, 96px); align-items: center;
       max-width: 1120px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(16px, 5vw, 56px); }
.try h2, .feature h2, .whistle h2, .promises h2, .privacy h2, .faq h2, .final h2 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 800; }
.try p, .feature p { color: var(--ink2); max-width: 34em; }
.aside { font-size: 15px; color: var(--ink3) !important; }
.clicker { display: grid; justify-items: center; gap: 14px; }
.clicker__pad { position: relative; width: clamp(180px, 22vw, 240px); aspect-ratio: 1; border: 0; border-radius: 30%; cursor: pointer;
                color: var(--accent); background: var(--surface); box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 88%, transparent), 0 26px 50px rgba(36, 87, 197, .35);
                transition: transform .09s ease-out, box-shadow .09s ease-out; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.clicker__pad svg { width: 52%; margin: auto; }
.clicker__pad.is-down { transform: scale(.94); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 88%, transparent), 0 12px 24px rgba(36, 87, 197, .3); }
.clicker__pad .ring { position: absolute; inset: -14px; border-radius: 34%; border: 4px solid var(--accent); opacity: .6; pointer-events: none;
                      animation: ripple .55s ease-out forwards; }
@keyframes ripple { to { inset: -64px; border-radius: 40%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clicker__pad .ring { display: none; } .clicker__pad { transition: none; } }
.clicker__count { margin: 0; font: 600 15px var(--display); color: var(--ink3); font-variant-numeric: tabular-nums; }
.no-js .clicker { display: none; }

/* Feature rows */
.feature, .try { overflow-x: clip; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center;
           max-width: 1120px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 5vw, 56px); }
.feature--flip .feature__copy { order: 2; }
.feature__art { position: relative; margin: 0; justify-self: center; width: min(320px, 74vw); }
.feature__art--pair { width: min(300px, 64vw); }
.phone--back { position: absolute; width: 82%; right: -46%; top: 14%; z-index: -1; }
.lifted { position: absolute; left: -22%; right: -22%; bottom: 18%; }
.lifted img { border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-2.5deg); }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; color: var(--ink2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%;
                    background: var(--ball) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231B2A05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.tag { display: inline-block; margin: 28px 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent) !important;
       font: 700 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }

/* Whistle, promises, privacy, FAQ */
.whistle, .privacy { max-width: 820px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 5vw, 56px); text-align: center; }
.whistle p, .privacy p { color: var(--ink2); font-size: clamp(18px, 1.5vw, 20px); margin: 20px auto 0; max-width: 40em; }
.promises { background: var(--surface2); padding: clamp(56px, 8vw, 104px) clamp(16px, 5vw, 56px); }
.promises h2 { text-align: center; }
.cards { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards li { background: var(--surface); border-radius: var(--radius); padding: 26px 24px; border: 1px solid var(--hairline); }
.cards h3 { font-size: 21px; font-weight: 750; letter-spacing: -.015em; }
.cards p { margin: 10px 0 0; color: var(--ink2); font-size: 16px; }
.faq { max-width: 820px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 5vw, 56px); }
.faq h2 { margin-bottom: 24px; }
details { border-top: 1px solid var(--hairline); padding: 18px 0; }
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary { cursor: pointer; font: 650 19px var(--display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-weight: 700; }
details[open] summary::after { content: "–"; }
details p { color: var(--ink2); margin: 10px 0 0; }

.final { display: grid; justify-items: center; gap: 22px; text-align: center; padding: clamp(64px, 9vw, 120px) 16px;
         background: radial-gradient(120% 120% at 50% 0%, #4A7FE6 0%, #2457C5 50%, #173C93 100%); color: var(--hero-ink); }
.final img { border-radius: 22px; box-shadow: 0 20px 40px rgba(5, 16, 48, .4); }
.final h2 em { color: #C6EA4C; }
.final .cta__note { color: var(--hero-ink2); }

.foot { padding: 32px clamp(16px, 5vw, 56px) max(32px, env(safe-area-inset-bottom)); text-align: center; color: var(--ink3); font-size: 14px; }
.foot nav { display: flex; justify-content: center; gap: 24px; margin-bottom: 10px; }
.foot a { color: var(--ink2); }

/* Legal pages */
.doc-top { position: static; padding: 20px clamp(16px, 5vw, 56px); background: #2457C5; }
.doc { max-width: 760px; margin: 0 auto; padding: 48px 16px 64px; }
.doc h1 { font-size: clamp(40px, 6vw, 56px); font-weight: 800; margin-bottom: 8px; }
.doc h2 { font-size: 22px; margin: 34px 0 6px; letter-spacing: -.01em; }
.doc p, .doc li { color: var(--ink2); }
.doc .date { color: var(--ink3); font-size: 15px; }

/* Phone width */
@media (max-width: 860px) {
  .hero, .feature, .try { grid-template-columns: 1fr; }
  .hero { text-align: left; }
  .feature--flip .feature__copy { order: 0; }
  .hero__art { margin-top: 12px; width: min(300px, 70vw); }
  .feature__art--pair { width: min(260px, 58vw); margin-right: 20%; }
  .cards { grid-template-columns: 1fr 1fr; }
  .lifted { left: -14%; right: -14%; }
  .badge--small { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .cards { grid-template-columns: 1fr; }
  .watch { right: -10%; }
}