@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --bg: #f7f4ff; --card: #ffffff; --ink: #14091f; --muted: #5b5470; --line: #e6def7;
  --violet: #6a2ae8; --violet-deep: #4b12c9; --lime: #c8ff2e; --pink: #ff4fa3;
  --link: #5a1fd6; --band: #14091f; --band-ink: #f3eefc; --band-muted: #b9afd0;
  --display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f0818; --card: #1a1027; --ink: #f3eefc; --muted: #a99fbe; --line: #2c2140;
    --link: #c8ff2e; --band: #1a1027; --band-ink: #f3eefc; --band-muted: #a99fbe; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--link); }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1100px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); letter-spacing: -0.03em; font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; }

/* header */
.top { position: relative; z-index: 2; background: transparent; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: #fff; text-decoration: none; letter-spacing: -0.02em; }
.brand svg { width: 34px; height: 34px; }
.by { color: rgba(255,255,255,.75); text-decoration: none; font-size: 0.95rem; }
.by:hover { color: #fff; }
body.doc-page .top { background: var(--violet-deep); }

/* hero: always the brand violet */
.hero-wrap { background: radial-gradient(1200px 600px at 85% 10%, #8a3ffc 0%, rgba(138,63,252,0) 60%), linear-gradient(135deg, #5a1fe0 0%, #3a0ca3 100%); color: #fff; overflow: hidden; }
.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.eyebrow { align-self: flex-start; display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--pink); color: #14091f; }
.hl { color: var(--lime); }
.hl-v { background: linear-gradient(90deg, var(--violet), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 1.18rem; max-width: 34em; }
.hero .lede { color: rgba(255,255,255,.86); }
.platforms { display: flex; flex-wrap: wrap; gap: 12px; }
.plat { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 14px; border-radius: 14px; background: var(--lime); color: #14091f; font-weight: 800; font-size: 1.08rem; line-height: 1.1; box-shadow: 0 6px 0 rgba(20,9,31,.35); }
.plat svg { width: 26px; height: 26px; flex: none; }
.plat span { display: flex; flex-direction: column; }
.plat small { font-weight: 600; font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.02em; }
.fine-dark { font-size: 0.92rem; color: rgba(255,255,255,.7); }

.phone { margin: 0; border-radius: 32px; padding: 8px; background: #14091f; box-shadow: 0 24px 50px -20px rgba(10, 0, 30, 0.55); }
.phone img { border-radius: 25px; }
.hero-phone { max-width: 330px; justify-self: center; width: 100%; transform: rotate(3deg); outline: 3px solid var(--lime); outline-offset: 6px; }

/* weekly re-plan */
.weekly { padding: clamp(44px, 7vw, 88px) 0; }
.weekly-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.weekly-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.weekly .eyebrow { background: var(--lime); }
.weekly .lede { color: var(--muted); }
.weekly-phone { max-width: 320px; justify-self: center; width: 100%; transform: rotate(-3deg); outline: 3px solid var(--pink); outline-offset: 6px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { position: relative; padding-left: 34px; color: var(--muted); }
.ticks li strong { color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 22px; height: 22px; border-radius: 7px; background: var(--violet); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: calc(0.2em + 4px); width: 6px; height: 11px; border: solid var(--lime); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* how it works */
.how { padding: clamp(40px, 6vw, 72px) 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.how h2, .features h2 { margin-bottom: 30px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.steps li { display: flex; flex-direction: column; gap: 10px; counter-increment: s; min-width: 0; }
.steps .phone { border-radius: 24px; padding: 6px; margin-bottom: 10px; }
.steps .phone img { border-radius: 19px; }
.steps h3::before { content: counter(s); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; background: var(--violet); color: var(--lime); font-size: 1rem; vertical-align: 2px; }
.steps p { color: var(--muted); font-size: 0.97rem; }

/* features */
.features { padding: clamp(40px, 6vw, 72px) 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.f { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; border-top: 6px solid var(--violet); }
.f:nth-child(3n+2) { border-top-color: var(--pink); }
.f:nth-child(3n+3) { border-top-color: var(--lime); }
.f p { color: var(--muted); font-size: 0.97rem; }

/* trust band */
.trust { background: var(--band); color: var(--band-ink); padding: clamp(44px, 6vw, 76px) 0; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.trust-grid > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.trust p { color: var(--band-muted); }
.trust a { color: var(--lime); }
.fine { font-size: 0.9rem; }

.foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 0.92rem; }
.foot-bar { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot a { color: var(--muted); }

/* privacy and other text pages */
.doc { padding: clamp(32px, 5vw, 64px) 0; }
.doc .wrap { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
.doc h2 { font-size: 1.4rem; margin-top: 18px; }
.doc ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.doc .meta { color: var(--muted); }

@media (max-width: 860px) {
  .hero-grid, .weekly-grid, .trust-grid { grid-template-columns: 1fr; }
  .hero-phone, .weekly-phone { max-width: 270px; }
  .weekly-phone { order: 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .steps { gap: 20px 14px; }
}