/* Homepage only. The other pages keep /styles.css; nothing here leaks to them. */

:root {
  --paper: #F7F6F2;
  --navy: #0F2554;
  --ink: #131A2A;
  --muted: #5A6375;
  --body: #39414F;
  --body2: #2F3746;
  --line: #DFE1E5;
  --green: #178A3F;
  --green-h: #126E32;

  --wa-bg: #0B0B0B;
  --wa-in: #252627;
  --wa-out: #144D37;
  --wa-quote: #0E3526;
  --wa-text: #F1F1F2;
  --wa-meta: #8E8E93;
  --wa-div: #38393B;
  --wa-btn: #21C063;
  --wa-accent: #A592FA;
  --wa-read: #53BDEB;
  --wa-unread: #9FB8AC;

  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr: 64px;
}
@media (max-width: 899px) {
  :root { --hdr: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font: 650 16.5px/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--green-h); }
.btn .ico { width: 20px; height: 20px; flex: none; }

.btn-sm {
  min-height: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0 16px;
  gap: 8px;
  border-radius: 10px;
  font-size: 15.5px;
  transition: background-color .2s ease, padding .6s var(--ease), gap .6s var(--ease), border-radius .6s var(--ease);
}
.btn-sm .lbl {
  display: block;
  max-width: 96px;
  overflow: hidden;
  transition: opacity .3s ease, max-width .6s var(--ease);
}

/* ---------- Header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100% - 1200px) / 2 + 24px));
  background-color: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background-color .5s ease, border-color .5s ease;
}
.hdr.lite { background-color: rgba(247, 246, 242, 0); border-bottom-color: rgba(223, 225, 229, 0); }

.brand { display: flex; align-items: center; text-decoration: none; color: var(--navy); }
.brand img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.wm {
  font: 700 21px/1 var(--display);
  letter-spacing: -.02em;
  margin-left: 10px;
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .3s ease, max-width .6s var(--ease), margin .6s var(--ease);
}
.hdr.lite .wm { opacity: 0; max-width: 0; margin-left: 0; }

.hdr .btn-sm { flex: none; }
@media (max-width: 360px) {
  .hdr { padding: 0 16px; }
  .btn-sm { padding: 0 12px; gap: 6px; }
}
@media (max-width: 899px) {
  .hdr.lite .btn-sm { padding: 0; gap: 0; border-radius: 21px; width: 42px; }
  .hdr.lite .btn-sm .lbl { opacity: 0; max-width: 0; }
}

/* ---------- Story: shared ---------- */

.story { position: relative; }
.anchor { position: absolute; top: 0; left: 0; scroll-margin-top: var(--hdr); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.steps a {
  display: inline-flex;
  gap: 8px;
  padding: 0 0 8px;
  border-bottom: 2px solid transparent;
  font: 600 15px/1.2 var(--display);
  color: #8C93A1;
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease;
}
.steps a span { font-variant-numeric: tabular-nums; }
.steps a:hover { color: var(--navy); }
.steps a.done { color: var(--muted); }
.steps a[aria-current="step"] { color: var(--navy); border-bottom-color: var(--green); }

.eyebrow { margin: 0 0 18px; font: 600 15px/1.2 var(--display); color: var(--green); }
.ey-step { display: none; }
.hl {
  margin: 0;
  max-width: 13ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, min(4.6vw, 7.4vh), 64px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--navy);
  text-wrap: balance;
}
.lede { margin: 24px 0 0; max-width: 42ch; font-size: 18px; line-height: 1.5; color: var(--body); }
.cta .fine { margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }

/* ---------- Phone ---------- */

.device {
  position: relative;
  width: 348px;
  padding: 0 4px;
  --fade: 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
}
.phone {
  position: relative;
  height: 100%;
  padding: 8px 8px 0;
  border-radius: 56px 56px 0 0;
  background: #0D0D0E;
  box-shadow: 0 0 0 1px #4A4B50, inset 0 0 0 2.5px #232427;
}
.screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 48px 48px 0 0;
  background: var(--wa-bg);
}
.hw { position: absolute; width: 3px; background: #2E2F33; }
.hw-action { left: 1px; top: 118px; height: 30px; border-radius: 2px 0 0 2px; }
.hw-volup  { left: 1px; top: 176px; height: 56px; border-radius: 2px 0 0 2px; }
.hw-voldn  { left: 1px; top: 244px; height: 56px; border-radius: 2px 0 0 2px; }
.hw-power  { right: 1px; top: 196px; height: 88px; border-radius: 0 2px 2px 0; }

.sbar {
  position: relative;
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 26px 0 34px;
  color: var(--wa-text);
}
.sb-time { font: 600 16px/1 var(--sans); letter-spacing: -.01em; }
.island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 96px;
  height: 28px;
  border-radius: 14px;
  background: #000;
  transform: translateX(-50%);
}
.sb-r { display: flex; align-items: center; gap: 6px; }
.sb-5g { font: 600 14px/1 var(--sans); }

.wahdr {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 10px;
  border-bottom: 1px solid #1C1D1F;
}
.wa-back { width: 36px; height: 36px; border-radius: 50%; background: #1E1F21; display: grid; place-items: center; }
.wa-av { width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.wa-nm { font: 600 17px/1 var(--sans); color: var(--wa-text); }

.win {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 10px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 10px), transparent);
}
.win, html:not(.pin) .grp { background-color: var(--wa-bg); }
.win, html:not(.pin) .grp {
  background-image:
    radial-gradient(circle at 18px 14px, #18191B 0 5px, transparent 5.5px),
    radial-gradient(circle at 50px 46px, #151618 0 7px, transparent 7.5px),
    radial-gradient(circle at 44px 10px, #141517 0 3px, transparent 3.5px);
  background-size: 64px 64px;
}
.thread { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 28px; will-change: transform; }
.grp { display: flex; flex-direction: column; gap: 8px; }

.msg {
  position: relative;
  max-width: 84%;
  border-radius: 12px;
  color: var(--wa-text);
  font: 400 15px/1.38 var(--sans);
  transform-origin: bottom left;
}
.msg.in { align-self: flex-start; background: var(--wa-in); }
.msg.out { align-self: flex-end; background: var(--wa-out); transform-origin: bottom right; }
/* flow-root contains the floated .meta: when the time wraps under the last
   line it would otherwise hang out of the paragraph and narrow whatever
   follows (the route buttons, which are flex boxes and avoid floats). */
.msg p { margin: 0; display: flow-root; }
.msg b { font-weight: 600; }

.meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 7px 0 -5px 12px;
  font-size: 11.5px;
  line-height: 1;
  color: var(--wa-meta);
}
.out .meta { color: var(--wa-unread); }
.ticks { width: 17px; height: 11px; color: var(--wa-unread); transition: color .2s ease; }
.ticks.read { color: var(--wa-read); }

#m-pc p { padding: 6px 9px 8px 11px; }

#m-res { max-width: 90%; }
.res-body { padding: 8px 12px 8px; }
.res-body p { margin: 0 0 8px; }
.res-body p:first-child { margin-bottom: 14px; }
.res-body p:last-child { margin: 14px 0 0; }
.km { display: inline-block; padding-left: 22px; }
.rbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-top: 1px solid var(--wa-div);
  color: var(--wa-btn);
  font: 500 15.5px/1 var(--sans);
  transition: background-color .15s ease, color .2s ease;
}
.rbtn:last-child { border-radius: 0 0 12px 12px; }
.rbtn svg { width: 18px; height: 18px; }
.rbtn.pressed { background: rgba(255, 255, 255, .08); }
.rbtn.used { color: var(--wa-meta); }

#m-reply { max-width: 80%; padding: 4px; }
.quote {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 7px;
  border-left: 4px solid var(--wa-accent);
  border-radius: 8px;
  background: var(--wa-quote);
  font-size: .9em;
  line-height: 1.35;
}
.q-who { color: var(--wa-accent); font-weight: 600; }
.q-txt { color: rgba(241, 241, 242, .8); }
b.q-txt { color: var(--wa-text); }
#m-reply p { padding: 5px 6px 4px 8px; }

.loc { width: 86%; max-width: 86%; overflow: hidden; }
.map { width: 100%; height: auto; }
.loc-body { display: flex; flex-direction: column; padding: 9px 12px 7px; }
.loc-body b { font-size: 1.07em; }
.loc-sub { color: var(--wa-meta); }
.loc-body .meta { float: none; align-self: flex-end; margin: 2px 0 0; }

.note { display: none; margin: 0; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- Story: pin mode ---------- */

html.pin .stage {
  position: sticky;
  top: var(--hdr);
  height: calc(100vh - var(--hdr));
  height: calc(100svh - var(--hdr));
  overflow: hidden;
}
html.pin .msg.rv { opacity: 0; }
html.pin .head { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
html.pin .head.on { opacity: 1; pointer-events: auto; transition-delay: .05s; }
html.pin .heads { display: grid; }

@media (min-width: 900px) {
  html.pin .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    /* An explicit row: an auto row grew to the phone's max-height and pushed
       the phone (and its bottom fade) past the bottom of shorter screens. */
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(72px, 11vw, 176px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  html.pin .copy { display: flex; flex-direction: column; justify-content: center; gap: 56px; min-width: 0; }
  /* Capped at a phone's proportions (about 2.1x its width, as on mobile), so
     a tall screen does not stretch it. */
  html.pin .device { align-self: end; height: calc(100% - 48px); max-height: 720px; }
}
/* Portrait or square desktop screens (a vertical monitor): the full-height
   row left the headline centred far above a phone capped at 720px. Keep the
   two as one block of at most 880px, centred, as on a laptop. home.js sizes
   the scroll distance from this row, not from the screen. */
@media (min-width: 900px) and (max-aspect-ratio: 1/1) {
  html.pin .stage { grid-template-rows: minmax(0, min(100%, 880px)); align-content: center; }
}

@media (max-width: 899px) {
  .hl { max-width: none; font-size: clamp(26px, 7.6vw, 34px); }
  .steps, .lede { display: none; }
  .msg { font-size: 14px; }

  html.pin .stage { display: flex; flex-direction: column; }
  html.pin .copy { display: contents; }
  html.pin .heads { flex: none; padding: 22px 24px 16px; }
  /* No step marks on phones, so once the CTA has collapsed into the story the
     first eyebrow crossfades from the hero line to "Stap 1" (home.js). */
  html.pin .head[data-ch="0"] .eyebrow { display: grid; }
  html.pin .eyebrow > span { grid-area: 1 / 1; transition: opacity .22s ease; }
  html.pin .ey-step { display: block; opacity: 0; }
  html.pin .stepped .ey-hero { opacity: 0; }
  html.pin .stepped .ey-step { opacity: 1; }
  /* The slot is as tall as the longest headline. Bottom-aligned, every
     chapter sits the same 16px above the phone; the spare room of a shorter
     headline goes under the header instead of between headline and phone. */
  html.pin .head { align-self: end; }
  html.pin .cta { flex: none; padding: 0 24px 28px; text-align: center; will-change: opacity, transform; }
  html.pin .cta .btn { width: 100%; }
  html.pin .device {
    flex: none;
    width: clamp(248px, 78vw, 332px);
    height: var(--phH, 70%);
    margin: 0 auto;
    --fade: 30px;
    will-change: transform;
  }
  .phone { border-radius: 44px 44px 0 0; padding: 6px 6px 0; }
  .screen { border-radius: 38px 38px 0 0; }
  .sbar { height: 44px; padding: 3px 22px 0 28px; }
  .sb-time { font-size: 14.5px; }
  .island { top: 9px; width: 80px; height: 24px; }
  .wa-nm { font-size: 16px; }
  .hw-action { top: 92px; height: 24px; }
  .hw-volup  { top: 136px; height: 44px; }
  .hw-voldn  { top: 190px; height: 44px; }
  .hw-power  { top: 156px; height: 70px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .sbar { display: none; }
  .wahdr { padding-top: 14px; }
}
@media (max-width: 360px) {
  .msg { font-size: 13.5px; }
}

/* ---------- Story: stacked (no JS, reduced motion, short screens) ---------- */

html:not(.pin) .stage {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 16px;
}
html:not(.pin) .copy,
html:not(.pin) .heads,
html:not(.pin) .device,
html:not(.pin) .phone,
html:not(.pin) .screen,
html:not(.pin) .win,
html:not(.pin) .thread { display: contents; }
html:not(.pin) .steps,
html:not(.pin) .hw,
html:not(.pin) .sbar,
html:not(.pin) .wahdr { display: none; }

html:not(.pin) .head[data-ch="0"] { order: 1; }
html:not(.pin) .cta { order: 2; margin: 28px 0 40px; }
html:not(.pin) .grp[data-g="a"] { order: 3; }
html:not(.pin) .head[data-ch="1"] { order: 4; margin-top: 64px; }
html:not(.pin) .grp[data-g="b"] { order: 5; }
html:not(.pin) .head[data-ch="2"] { order: 6; margin-top: 64px; }
html:not(.pin) .grp[data-g="c"] { order: 7; }
html:not(.pin) .note { order: 8; display: block; margin-top: 20px; }
html:not(.pin) .head[data-ch="1"],
html:not(.pin) .head[data-ch="2"] { margin-bottom: 28px; }
html:not(.pin) .grp { padding: 16px 12px; border-radius: 22px; }
html:not(.pin) .msg { max-width: min(90%, 420px); }
html:not(.pin) .loc { width: min(86%, 340px); }
html:not(.pin) .ticks { color: var(--wa-read); }
html:not(.pin) #r1 { color: var(--wa-meta); }
@media (max-width: 899px) {
  html:not(.pin) .stage { padding-top: 32px; }
  html:not(.pin) .cta .btn { width: 100%; }
  html:not(.pin) .cta { text-align: center; }
}

/* ---------- Plus + FAQ ---------- */

.sec { padding: 208px 24px 152px; }
.faq { padding: 136px 24px; }
.sec-in {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 104px;
  align-items: start;
}
.sec-in > * { min-width: 0; }
.sh {
  margin: 0;
  font: 700 clamp(34px, 4.4vw, 56px)/1.02 var(--display);
  letter-spacing: -.03em;
  color: var(--navy);
}
.sp { margin: 24px 0 0; max-width: 42ch; font-size: 18px; line-height: 1.55; color: var(--body); }

.tiers { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.35; color: var(--body2); }
.tiers th, .tiers td {
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.tiers thead th, .tiers thead td { border-bottom: 1.5px solid var(--navy); font-weight: 650; color: var(--navy); }
.tiers tbody th { width: 34%; color: var(--muted); }
.tiers tbody td:first-of-type { width: 30%; }
.tiers tbody td:last-child { font-weight: 650; color: var(--ink); }
.tiers tbody tr:last-child > * { border-bottom: 0; }
.tnote { margin: 20px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

.qs details { border-bottom: 1px solid var(--line); }
.qs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 21px 0;
  list-style: none;
  cursor: pointer;
  font: 600 17px/1.35 var(--sans);
  color: var(--ink);
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.75px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.75px 14px no-repeat;
  transition: transform .2s ease;
}
.qs details[open] summary::after { transform: rotate(45deg); }
.qs details p { margin: -4px 0 22px; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--body); }
.qs details a { color: var(--green); }

@media (max-width: 899px) {
  .sec { padding: 136px 24px 104px; }
  .faq { padding: 104px 24px; }
  .sec-in { grid-template-columns: 1fr; gap: 28px; }
  .tiers { font-size: 14.5px; }
}

/* ---------- Closing CTA (the shared legal bar below it is footer.css) ---------- */

.closing { background: var(--navy); color: #fff; }
.closing-in { max-width: 1200px; margin: 0 auto; padding: 112px 24px 88px; }
.closing h2 {
  margin: 0;
  font: 700 clamp(38px, 6vw, 76px)/1 var(--display);
  letter-spacing: -.03em;
}
.closing-p { margin: 20px 0 32px; max-width: 34ch; font-size: 19px; line-height: 1.5; color: #D3DBEA; }
.btn-wa { background: #25D366; color: #06260F; }
.btn-wa:hover { background: #3BE07A; }
.closing-fine { margin: 16px 0 0; font-size: 14px; color: #A9B7D3; }

@media (max-width: 899px) {
  .closing-in { padding: 104px 24px 72px; }
  .closing .btn-wa { width: 100%; }
}

/* ---------- Reduced motion ---------- */

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