/* The privacy policy and terms (privacy.html, terms.html). The tokens, header, footer, logo and buttons are copied
   from index.html's own styles so the pages match the landing page; keep them in step when those change. Below
   them: the reading column for long text. */
/* The fonts, served from our own fonts/ folder (both under the SIL Open Font License, see fonts/OFL-*.txt).
   Copied from Google Fonts' own stylesheet (Bricolage Grotesque opsz,wght 12..96,500..800; Figtree ital,wght 400..800 and
   italic 400..600), so the subsets and weights match the app. index.html has the same rules: change both together. */
/* Bricolage Grotesque, normal, vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-v9-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Bricolage Grotesque, normal, latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-v9-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque, normal, latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-v9-latin.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;
}
/* Figtree, italic, latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/figtree-v9-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree, italic, latin */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/figtree-v9-italic-latin.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;
}
/* Figtree, normal, latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/figtree-v9-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree, normal, latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/figtree-v9-latin.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;
}

:root {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --ink: #17132b;
  --ink-soft: #4a4560;
  --ink-faint: #645f7c;
  --paper: #ffffff;
  --canvas: #f3efff;
  --line: #d9d2f5;
  --violet: #6b3bff;
  --violet-dark: #5423f0;
  --violet-soft: #e7defe;
  --sun: #ffc933;
  --sun-soft: #fff2c8;
  --mint-soft: #d3f6e9;
  --shadow-chunky: 4px 4px 0 0 #17132b;
  --shadow-chunky-sm: 2px 2px 0 0 #17132b;
  --radius-chunky: 14px;
  --page: 1180px;
  --read: 760px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.025em; margin: 0; }
p, ul, ol { margin: 0; }
img, svg { display: block; }
a { color: var(--violet-dark); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
::selection { background: var(--sun); color: var(--ink); }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-to-content { position: absolute; left: 16px; top: -100px; z-index: 100; }
.skip-to-content:focus { top: 12px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; line-height: 1.2;
  border: 2px solid var(--ink); border-radius: 12px;
  text-decoration: none; white-space: nowrap; user-select: none;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}
.btn:active { transform: translate(2px, 2px); }
.btn-primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-chunky); }
.btn-primary:hover { background: var(--violet-dark); color: #fff; }
.btn-secondary { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-chunky); }
.btn-secondary:hover { background: var(--violet-soft); color: var(--ink); }
.btn-primary:active, .btn-secondary:active { box-shadow: var(--shadow-chunky-sm); }
.btn-md { font-size: 16px; padding: 8px 16px; min-height: 44px; }

/* ---- The logo ---- */
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 40px; height: 40px; overflow: visible; transition: transform 0.15s; }
@media (hover: hover) { .logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); } }
.logo-word { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.025em; line-height: 1; }
.logo-word .yap { color: var(--violet); }

/* ---- Header ---- */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.site-nav { display: flex; align-items: center; gap: 24px; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.site-nav a:not(.btn) { color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { border-bottom-color: var(--violet); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--violet); }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: #d6d1ea; }
.site-footer .wrap { padding-top: 36px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 18px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer .logo { color: #fff; }
.site-footer .logo-word .yap { color: #b9a4ff; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; }
.site-footer a { color: #d6d1ea; text-underline-offset: 3px; }
.site-footer a:hover { color: #fff; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: #b5afcc; border-top: 1px solid #3a3452; padding-top: 18px; }

/* ---- The reading column ---- */
.legal { padding: 40px 0 96px; }
.legal .wrap { max-width: calc(var(--read) + 2 * var(--gutter)); }
.legal-head h1 { font-weight: 800; font-size: clamp(40px, 6vw, 60px); line-height: 1; letter-spacing: -0.04em; }
.legal-meta { margin-top: 14px; color: var(--ink-faint); font-size: 15px; }
.legal-lede { margin-top: 18px; font-size: 19px; color: var(--ink-soft); }

/* The short version: the main points up front, as Canada's privacy commissioner asks. */
.short {
  margin-top: 32px; padding: 24px 26px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-chunky); box-shadow: var(--shadow-chunky);
}
.short h2 { font-size: 24px; font-weight: 800; }
.short ul { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 10px; }
.short li { position: relative; padding-left: 30px; }
.short li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317132b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 2px solid var(--ink);
}

.contents { margin-top: 32px; padding: 20px 24px; border: 2px solid var(--line); border-radius: var(--radius-chunky); background: rgba(255, 255, 255, 0.55); }
.contents h2 { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); }
.contents ol { margin-top: 10px; padding-left: 22px; columns: 2 260px; column-gap: 32px; font-size: 16px; }
.contents li { margin-bottom: 4px; break-inside: avoid; }

.legal section { margin-top: 48px; scroll-margin-top: 16px; }
.legal section h2 { font-weight: 800; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }
.legal section h3 { font-weight: 700; font-size: 20px; margin-top: 26px; letter-spacing: -0.015em; }
.legal section p, .legal section ul, .legal section ol, .legal .table-wrap { margin-top: 14px; }
.legal section ul, .legal section ol { padding-left: 24px; }
.legal section li { margin-top: 6px; }
.legal section li::marker { color: var(--violet); }
.legal strong { font-weight: 700; }

.table-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--paper); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal th { font-family: var(--font-display); font-weight: 700; font-size: 14px; background: var(--violet-soft); border-bottom: 2px solid var(--ink); }
.legal tr:last-child td { border-bottom: 0; }
.legal td:first-child { font-weight: 700; min-width: 130px; }

.callout { padding: 16px 20px; border-radius: var(--radius-chunky); background: var(--sun-soft); border: 2px solid var(--ink); }
.legal section .callout { margin-top: 18px; }

.legal-end { margin-top: 56px; padding-top: 24px; border-top: 2px solid var(--line); color: var(--ink-soft); font-size: 16px; }
.legal-end p + p { margin-top: 8px; }

/* ---- Phones ---- */
@media (max-width: 920px) {
  .site-nav a:not(.btn) { display: none; }
}
@media (pointer: coarse) {
  .site-header .logo, .site-footer .logo { min-height: 44px; }
  .footer-nav a { display: inline-block; padding: 11px 0; }
  .contents a { display: inline-block; padding: 6px 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .logo-word { font-size: 22px; }
  .site-header .btn { font-size: 15px; padding: 8px 12px; }
  .legal { padding: 24px 0 64px; }
  .short { padding: 20px 18px; }
  .contents { padding: 16px 18px; }
  .legal section { margin-top: 40px; }
  /* Tables become one card per row: each cell's heading sits above its text. */
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .legal tr:last-child { border-bottom: 0; }
  .legal td { padding: 2px 0; border: 0; }
  .legal td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-faint); margin-top: 6px; }
  .legal td:first-child::before { content: none; }
  .legal td:first-child { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================================================================
   The friendly layer of the privacy page (privacy.html). Same pieces as the home page: the coach and its speech
   bubbles, tilted colour cards, the FAQ, scroll entrances. Motion plays once and only with the .motion class (set in
   the page head when the visitor hasn't asked for less motion). The page reads fine with no script: every word is
   in the HTML, and the script only turns lists into the step-through and the slider.
   ===================================================================================================================== */
:root {
  --tomato: #ff5b3a; --tomato-soft: #ffe2da;
  --mint: #16c592; --sky: #37b3ff; --sky-soft: #d9f0ff;
  --pink: #ff6fb5; --pink-soft: #ffe0ef;
  --shadow-chunky-lg: 6px 6px 0 0 #17132b;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
button:not(:disabled) { cursor: pointer; }
.icon-sm { width: 16px; height: 16px; }
.btn-sm { font-size: 14px; padding: 6px 12px; min-height: 36px; }
.btn-lg { font-size: 18px; padding: 12px 24px; min-height: 52px; }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: var(--shadow-chunky); }
.btn-sun:hover { filter: brightness(1.05); color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: var(--shadow-chunky-sm); }
.highlight { display: inline-block; background: var(--sun); border: 2px solid var(--ink); box-shadow: var(--shadow-chunky); padding: 0 12px 4px; border-radius: var(--radius-chunky); transform: rotate(-2deg); margin-top: 8px; }
.highlight-mint { background: var(--mint); transform: rotate(1.5deg); }
.highlight-pink { background: var(--pink); transform: rotate(-1.5deg); }

/* How far down the page you are: a thin bar along the top. */
.read-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 5px; background: transparent; pointer-events: none; }
.read-bar span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--pink), var(--sun)); }

/* ---- The coach and its speech bubbles (src/features/yap/components) ---- */
.coach { flex: none; overflow: visible; }
.coach-eyes { transform-box: fill-box; transform-origin: center; animation: blink 2.4s 1; }
@keyframes blink { 0%, 60%, 70%, 100% { transform: scaleY(1); } 65% { transform: scaleY(0.1); } }
.say { display: flex; align-items: flex-start; gap: 12px; }
.say .coach { margin-top: 4px; }
.bubble { position: relative; min-width: 0; padding: 12px 16px; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--paper); box-shadow: var(--shadow-chunky); }
.bubble::before { content: ""; position: absolute; top: 18px; left: -9px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.bubble > * { position: relative; }
.say .bubble { font-weight: 600; }
.motion .say.in .coach { animation: coach-hop 0.9s ease-in-out 0.3s 1; }
@keyframes coach-hop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(-6deg); } 60% { transform: translateY(0) rotate(5deg); } }

/* ---- Scroll entrances: one quick pop per element ---- */
.motion [data-reveal] {
  opacity: 0; translate: 0 22px;
  transition: opacity 0.45s ease calc(var(--d, 0) * 80ms), translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0) * 80ms), transform 0.2s ease, box-shadow 0.2s ease;
}
.motion [data-reveal].in { opacity: 1; translate: 0 0; }

/* ---- Bands and section heads ---- */
.band { position: relative; padding: 88px 0; }
.band-white { background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.band-dots { overflow: hidden; background: var(--sky-soft); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.band-dots::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(23, 19, 43, 0.13) 1.5px, transparent 1.7px); background-size: 22px 22px; }
.band-dots .wrap { position: relative; }
.band h2 { font-weight: 800; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.04; letter-spacing: -0.035em; }
.band-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-bottom: 40px; }
.band-head h2 { max-width: 640px; }
.band-head .say { max-width: 420px; }
.band-intro { margin-top: 14px; font-size: 19px; color: var(--ink-soft); max-width: 640px; }

/* ---- Hero ---- */
.p-hero { position: relative; overflow: hidden; }
.p-hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; padding-top: 36px; padding-bottom: 72px; }
.p-hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.updated { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow-chunky-sm); font-family: var(--font-display); font-weight: 700; font-size: 14px; transform: rotate(-1.5deg); }
.updated .icon { color: var(--violet); }
.p-hero h1 { font-weight: 800; font-size: clamp(42px, 6vw, 70px); line-height: 1; letter-spacing: -0.04em; }
.p-hero-lede { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 580px; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.jump .btn { gap: 6px; }
.p-hero-art { flex: 1 1 320px; min-width: 0; position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p-hero-bubble {
  position: absolute; top: 0; right: 4%; max-width: 280px; padding: 16px 20px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow-chunky-lg);
  font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em;
}
.p-hero-bubble-tail { position: absolute; left: 32px; top: calc(100% - 2px); width: 48px; height: 36px; overflow: visible; }
.p-hero-coach { margin-top: 110px; animation: bob 2.4s ease-in-out 2; }
@media (hover: hover) { .p-hero-art:hover .p-hero-coach { animation: bob 2.4s ease-in-out 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.motion .p-hero-coach.cheer { animation: cheer 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cheer { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-22px) rotate(-8deg) scale(1.06); } 70% { transform: translateY(0) rotate(5deg); } 100% { transform: translateY(0) rotate(0); } }
.motion .hero-line.swap { animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
@keyframes pop { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tap-me { display: none; position: absolute; left: 6%; bottom: 16%; z-index: 2; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--sun); box-shadow: var(--shadow-chunky-sm); font-family: var(--font-display); font-weight: 700; font-size: 14px; transform: rotate(-6deg); }
@media (hover: none) { .tap-me { display: block; } }
.tap-me.gone { display: none; }
.bit { position: absolute; border: 2px solid var(--ink); border-radius: 3px; animation: drift 4.8s ease-in-out 1; }
.bit.round { border-radius: 50%; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(30deg); } }

/* ---- Tilted colour cards (the home page's "Your data") ---- */
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.promise {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border: 2px solid var(--ink); border-radius: var(--radius-chunky); box-shadow: var(--shadow-chunky);
  background: var(--tone, var(--paper)); transform: rotate(var(--tilt, 0deg)); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) { .promise:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-chunky-lg); } }
.promise-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 12px; background: var(--chip, var(--sun)); color: var(--chip-ink, var(--ink)); box-shadow: var(--shadow-chunky-sm); }
@media (hover: hover) { .promise:hover .promise-icon { animation: wiggle 0.6s ease-in-out; } }
@media (hover: none) { .promise:active { transform: rotate(0deg) scale(0.98); } .promise:active .promise-icon { animation: wiggle 0.6s ease-in-out; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.promise h3 { font-size: 19px; font-weight: 800; line-height: 1.25; }
.promise p { color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.promise a { color: var(--ink); font-weight: 600; }
.tone-sun { --tone: var(--sun-soft); --chip: var(--sun); }
.tone-mint { --tone: var(--mint-soft); --chip: var(--mint); }
.tone-pink { --tone: var(--pink-soft); --chip: var(--pink); }
.tone-violet { --tone: var(--violet-soft); --chip: var(--violet); --chip-ink: #fff; }
.tone-tomato { --tone: var(--tomato-soft); --chip: var(--tomato); --chip-ink: #fff; }
.tone-sky { --tone: var(--sky-soft); --chip: var(--sky); }
.tone-paper { --tone: var(--paper); --chip: var(--sky); }
.short-note { margin-top: 28px; font-size: 15px; color: var(--ink-faint); }

/* ---- Follow one story: a list without script, a step-through with it ---- */
.journey { display: grid; gap: 22px; }
.j-track { display: none; }
.js .j-track { display: flex; align-items: center; justify-content: space-between; gap: 6px; position: relative; max-width: 760px; }
.j-track::before { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 4px; margin-top: -2px; background: var(--ink); border-radius: 2px; }
.j-track::after { content: ""; position: absolute; left: 18px; top: 50%; height: 4px; margin-top: -2px; width: calc((100% - 36px) * var(--progress, 0)); background: var(--violet); border-radius: 2px; transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1); }
.j-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-chunky-sm);
  font-family: var(--font-display); font-weight: 800; font-size: 16px; transition: transform 0.2s ease, background-color 0.2s ease;
}
.j-dot.done { background: var(--violet-soft); }
.j-dot[aria-current="step"] { background: var(--sun); transform: scale(1.15) rotate(-4deg); }
@media (hover: hover) { .j-dot:hover { transform: translateY(-2px); } .j-dot[aria-current="step"]:hover { transform: scale(1.15) rotate(-4deg); } }
.j-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.j-step {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; padding: 24px 26px;
  border: 2px solid var(--ink); border-radius: 18px; background: var(--tone, var(--paper)); box-shadow: var(--shadow-chunky-lg);
}
.j-step img { width: 120px; height: 120px; }
.j-num { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink-soft); letter-spacing: 0.02em; }
.j-step h3 { margin-top: 2px; font-size: clamp(24px, 3vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.j-step p { margin-top: 8px; font-size: 17px; }
.j-who { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.j-who li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-weight: 600; font-size: 14px; }
.j-who .icon { width: 15px; height: 15px; color: var(--violet); }
.js .j-steps { display: block; }
.js .j-step:not(.on) { display: none; }
.motion .j-step.on { animation: step-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); }
.motion .j-step.on.back { animation-name: step-in-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(40px) rotate(1.5deg); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-40px) rotate(-1.5deg); } }
.j-controls { display: none; }
.js .j-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 100%; }
.j-count { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); }

/* ---- How long: big numbers ---- */
.times { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; }
.time {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px;
  border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--tone, var(--paper)); box-shadow: var(--shadow-chunky);
  transform: rotate(var(--tilt, 0deg));
}
.time-number { font-family: var(--font-display); font-weight: 800; font-size: 60px; line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.time-number.popped { animation: stat-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes stat-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } }
.time-unit { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.time p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.45; }
.time.tone-violet-solid { --tone: var(--violet); color: #fff; }
.time.tone-violet-solid p { color: #efe9ff; }

/* ---- Hit delete. Then what? ---- */
.after {
  margin-top: 48px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px 44px; align-items: start;
  padding: 32px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-chunky-lg);
}
.after h3 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.after-intro { margin-top: 10px; color: var(--ink-soft); }
.after-controls { display: none; }
.js .after-controls { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.after-day { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.after-day output { color: var(--violet-dark); }
.after input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--violet); -webkit-appearance: none; appearance: none; cursor: pointer; }
.after input[type="range"]::-webkit-slider-runnable-track { height: 12px; border: 2px solid var(--ink); border-radius: 8px; background: linear-gradient(90deg, var(--violet) var(--fill, 0%), var(--violet-soft) var(--fill, 0%)); }
.after input[type="range"]::-moz-range-track { height: 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--violet-soft); }
.after input[type="range"]::-moz-range-progress { height: 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--violet); }
.after input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 2px solid var(--ink); border-radius: 10px; background: var(--sun); box-shadow: var(--shadow-chunky-sm); }
.after input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 10px; background: var(--sun); box-shadow: var(--shadow-chunky-sm); }
.after-scale { display: flex; justify-content: space-between; margin-top: -6px; font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.after-note { font-size: 14px; color: var(--ink-faint); }
.after-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.after-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--sun-soft); transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.after-badge { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.after-badge .icon { width: 18px; height: 18px; }
.after-badge .when-gone { display: none; }
.after-what { font-weight: 700; line-height: 1.35; }
.after-when { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.after-item.gone { background: var(--mint-soft); }
.after-item.gone .after-badge { background: var(--mint); }
.after-item.gone .when-gone { display: block; }
.after-item.gone .when-there { display: none; }
.after-item.gone .after-what { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(23, 19, 43, 0.55); }
.after-item.stays { background: var(--canvas); }
.motion .after-item.just-gone { animation: poof 0.5s ease; }
@keyframes poof { 0% { transform: scale(1); } 40% { transform: scale(1.04) rotate(-1deg); } 100% { transform: scale(1); } }

/* ---- You're in charge ---- */
.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.control-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--tone); box-shadow: var(--shadow-chunky); }
.control-card img { width: 64px; height: 64px; margin-bottom: 4px; }
.control-card h3 { font-size: 22px; font-weight: 800; line-height: 1.15; }
.control-card p { font-size: 16px; }
.control-card .where { margin-top: auto; padding-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.control-card.tone-sun { --tone: var(--sun); }
.control-card.tone-mint { --tone: var(--mint); }
.control-card.tone-pink { --tone: var(--pink); }
.control-card.tone-violet { --tone: var(--violet); color: #fff; }
.control-card.tone-violet a { color: #fff; }

/* ---- FAQ (the home page's) ---- */
.faq-list { margin-top: 8px; border-bottom: 2px solid var(--line); max-width: 900px; }
.faq-item { border-top: 2px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover h3 { color: var(--violet-dark); }
.faq-item h3 { font-size: 20px; font-weight: 800; line-height: 1.25; }
.faq-toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow-chunky-sm); transition: transform 0.2s ease, background-color 0.2s ease; }
.faq-item[open] .faq-toggle { transform: rotate(180deg); background: var(--sun); }
.faq-answer { max-width: 760px; padding: 0 52px 22px 0; color: var(--ink-soft); }
.faq-answer p + p { margin-top: 8px; }
.faq-more { font-size: 15px; font-weight: 600; }
.motion .faq-item[open] .faq-answer { animation: faq-open 0.25s ease; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* ---- The full version ---- */
.full-intro { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 32px; }
.full-intro .say { max-width: 420px; }
.legal.full { padding-top: 88px; }
.legal.full section h2 { display: flex; align-items: center; gap: 12px; }
.num { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 11px; background: var(--chip, var(--sun)); color: var(--chip-ink, var(--ink)); box-shadow: var(--shadow-chunky-sm); font-size: 19px; letter-spacing: 0; transform: rotate(-4deg); }
.legal.full section:nth-of-type(6n+2) .num { --chip: var(--mint); }
.legal.full section:nth-of-type(6n+3) .num { --chip: var(--pink); }
.legal.full section:nth-of-type(6n+4) .num { --chip: var(--violet); --chip-ink: #fff; }
.legal.full section:nth-of-type(6n+5) .num { --chip: var(--sky); }
.legal.full section:nth-of-type(6n) .num { --chip: var(--tomato); }

/* ---- Last word ---- */
.ask-card { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 36px; border: 2px solid var(--ink); border-radius: 22px; background: var(--violet); color: #fff; box-shadow: var(--shadow-chunky-lg); }
.ask-card h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.ask-card p { margin-top: 8px; color: #f2edff; font-size: 18px; max-width: 560px; }
.ask-card .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ask-doodle { position: absolute; top: -30px; right: 32px; width: 76px; height: 76px; transform: rotate(8deg); }

@media (max-width: 920px) {
  .after { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .band { padding: 60px 0; }
  .band-head { margin-bottom: 26px; }
  .p-hero .wrap { padding-top: 16px; padding-bottom: 52px; gap: 20px; }
  .p-hero-art { min-height: 230px; flex-basis: 100%; }
  .p-hero-coach { margin-top: 78px; width: 150px; height: 150px; }
  .p-hero-bubble { font-size: 18px; max-width: 220px; right: 0; padding: 12px 16px; }
  .jump .btn { flex: 1 1 calc(50% - 10px); }
  .j-step { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 12px; }
  .j-step img { width: 80px; height: 80px; }
  .j-dot { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
  .j-controls .btn { flex: 1 1 0; }
  .j-count { order: -1; flex-basis: 100%; text-align: center; }
  .time-number { font-size: 52px; }
  .after { padding: 22px 18px; margin-top: 36px; }
  .faq-item h3 { font-size: 18px; }
  .faq-answer { padding-right: 0; }
  .ask-card { padding: 30px 22px; }
  .ask-card .btns, .ask-card .btn { width: 100%; }
  .ask-doodle { width: 60px; height: 60px; top: -26px; right: 18px; }
  .legal.full { padding-top: 60px; }
  .num { width: 34px; height: 34px; font-size: 17px; }
}
.full-title { font-weight: 800; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.04; letter-spacing: -0.035em; }
.legal.full .legal-meta { margin-top: 8px; }
.promise > div { display: flex; flex-direction: column; gap: 6px; }
.journey { max-width: 940px; }
@media (max-width: 640px) {
  .promise { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; }
  .promise-icon { width: 42px; height: 42px; }
  .times { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .time { padding: 16px 14px 18px; }
  .time:last-child { grid-column: 1 / -1; }
  .time-number { font-size: 44px; }
  .time-unit { font-size: 17px; line-height: 1.15; }
  .time p { font-size: 14.5px; }
}