/* ============================================================================
   LIFE RING — landing page
   Carries the identity: black on white, the buoy mark, ping-ring motif,
   Helvetica Neue, generous breathing room. One restrained warm accent,
   wired to a CSS var so the page still works in pure black & white.
   ------------------------------------------------------------------------- */

:root{
  --ink:#000;
  --paper:#fff;
  --soft:#52555b;        /* body text on white */
  --muted:#73777e;       /* secondary */
  --faint:#a7abb1;
  --hair:#e7e8ea;
  --hair-2:#eff0f1;
  --panel:#f6f6f7;
  --ink-rev:#fff;
  --soft-rev:#a9adb4;    /* body text on black */
  --hair-rev:rgba(255,255,255,.14);

  /* restrained warmth — set to a neutral to fall back to pure B&W */
  --accent:oklch(0.70 0.135 52);
  --accent-soft:oklch(0.70 0.135 52 / 0.16);
  --accent-ink:#000;     /* text color used near accent fills */

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"Menlo","Consolas",monospace;

  --maxw:1140px;
  --gutter:clamp(20px,5vw,40px);
  --rhythm:clamp(78px,11vw,140px);
}

/* tweakable modes ---------------------------------------------------------- */
:root[data-accent="off"]{ --accent:#000; --accent-soft:rgba(0,0,0,.07); }
:root[data-accent="cool"]{ --accent:oklch(0.62 0.13 245); --accent-soft:oklch(0.62 0.13 245 / 0.16); }

/* hero theme tweak (light default / inverse) */
:root[data-hero="dark"] .hero{background:var(--ink);color:var(--ink-rev)}
:root[data-hero="dark"] .hero .lead{color:var(--soft-rev)}
:root[data-hero="dark"] .hero .seehow{color:var(--soft-rev);border-color:var(--hair-rev)}
:root[data-hero="dark"] .hero .seehow:hover{color:var(--ink-rev);border-color:var(--ink-rev)}
:root[data-hero="dark"] .hero .store{background:var(--paper);color:var(--ink);border-color:var(--paper)}
:root[data-hero="dark"] .hero .pricetag{color:var(--soft-rev)}
:root[data-hero="dark"] .hero .pricetag b{color:var(--ink-rev)}
:root[data-hero="dark"] .hero .pingstage .mk{color:var(--ink-rev)}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);line-height:1.55;font-size:17px;
  overflow-x:hidden;
}
a{color:inherit}
img,svg{display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
section{position:relative}

/* ---- shared type --------------------------------------------------------- */
.eyebrow{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0;display:inline-flex;align-items:center;gap:10px;
}
.eyebrow .tick{width:22px;height:1px;background:var(--accent);display:inline-block}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.04;text-wrap:balance}
.h-display{font-size:clamp(40px,6.6vw,80px)}
.h-section{font-size:clamp(31px,4.6vw,56px)}
.h-sub{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.018em}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--soft);text-wrap:pretty}
.fine{font-size:13.5px;color:var(--muted);letter-spacing:.01em}

/* ---- buttons & store badges --------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:15px 24px;border-radius:100px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);transition:transform .14s ease, opacity .14s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn .arr{width:16px;height:16px}

.stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:13px;padding:10px 17px;transition:transform .14s ease, opacity .14s ease;
}
.store:hover{transform:translateY(-1px);opacity:.92}
.store svg{flex:none}
.store .lines{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store .lines .top{font-size:10.5px;letter-spacing:.04em;opacity:.82}
.store .lines .bot{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:1px}
/* reverse badges on dark sections */
.rev .store{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.pricetag{display:inline-flex;align-items:baseline;gap:8px;color:var(--muted);font-size:14px}
.pricetag b{color:var(--ink);font-weight:600}
.rev .pricetag{color:var(--soft-rev)}
.rev .pricetag b{color:var(--paper)}

/* ---- ping motif ---------------------------------------------------------- */
.pingstage{position:relative;display:flex;align-items:center;justify-content:center}
.pingstage .ping{
  position:absolute;border-radius:50%;border:1.6px solid var(--accent);opacity:0;
  animation:lp-ping 3s cubic-bezier(.2,.55,.3,1) infinite;
}
:root[data-ping="off"] .pingstage .ping{animation:none;display:none}
@keyframes lp-ping{
  0%{transform:scale(.5);opacity:0}
  18%{opacity:.5}
  100%{transform:scale(2.1);opacity:0}
}
.divider{display:flex;align-items:center;justify-content:center;gap:0;padding:6px 0}
.divider .line{height:1px;background:var(--hair);flex:1}
.divider .knot{width:26px;height:26px;margin:0 22px;opacity:.9}

/* ---- header -------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s, background .2s;
}
.nav.scrolled{border-bottom-color:var(--hair)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .bm{width:30px;height:30px}
.brand .bw{font-weight:700;font-size:15px;letter-spacing:.2em;padding-left:.2em}
.nav .links{display:flex;align-items:center;gap:34px}
.nav .links a{font-size:14.5px;color:var(--soft);text-decoration:none;transition:color .14s}
.nav .links a:hover{color:var(--ink)}
.nav .navcta{font-size:14px;padding:10px 18px}
.nav .menu-links{display:flex;align-items:center;gap:34px}
@media (max-width:760px){ .nav .menu-links{display:none} }

/* ---- hero ---------------------------------------------------------------- */
.hero{padding:clamp(44px,8vw,90px) 0 clamp(60px,9vw,104px);text-align:center;overflow:hidden}
.hero .pingstage{margin:0 auto clamp(30px,4vw,46px);width:clamp(150px,22vw,210px);height:clamp(150px,22vw,210px)}
.hero .pingstage .mk{width:46%;height:46%;position:relative;z-index:3}
.hero h1{margin:0 auto;max-width:14ch}
.hero .lead{margin:clamp(20px,2.6vw,28px) auto 0;max-width:46ch}
.hero .cta-block{margin-top:clamp(28px,3.4vw,40px);display:flex;flex-direction:column;align-items:center;gap:16px}
.hero .seehow{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--soft);
  font-size:14px;text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:3px}
.hero .seehow:hover{color:var(--ink);border-color:var(--ink)}

/* ---- generic section heading block -------------------------------------- */
.sec{padding:var(--rhythm) 0}
.sec .head{max-width:30ch}
.sec .head .lead{margin-top:18px}

/* ---- pillar (two-col) ---------------------------------------------------- */
.pillar{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,72px);align-items:center}
@media (min-width:880px){
  .pillar{grid-template-columns:1.05fr .95fr}
  .pillar.flip .col-text{order:2}
}
.pillar .col-text .lead{margin-top:20px;max-width:42ch}
.pillar .microproof{margin-top:26px;display:inline-flex;align-items:center;gap:11px;
  font-size:13.5px;color:var(--muted);letter-spacing:.01em}
.pillar .microproof .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* device-agnostic visual */
.devices{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,2.4vw,26px);
  padding:clamp(30px,5vw,52px) 10px;background:var(--panel);border-radius:22px}
.device{border:1.6px solid var(--ink);border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);position:relative}
.device .dmk{width:42%;height:42%}
.device.laptop{width:clamp(150px,26vw,236px);height:clamp(100px,17vw,150px);border-radius:12px}
.device.tablet{width:clamp(78px,12vw,118px);height:clamp(104px,16vw,156px)}
.device.phone{width:clamp(56px,9vw,82px);height:clamp(104px,16vw,156px);border-radius:18px}

/* ---- pledge (inverse) ---------------------------------------------------- */
.pledge{background:var(--ink);color:var(--ink-rev)}
.pledge .eyebrow{color:var(--accent)}
.pledge .eyebrow .tick{background:var(--accent)}
.pledge h2{max-width:18ch}
.pledge .lead{color:var(--soft-rev);max-width:54ch;margin-top:24px}
.pledge .lead b{color:var(--ink-rev);font-weight:600}
.promises{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair-rev);
  border:1px solid var(--hair-rev);border-radius:18px;overflow:hidden;margin-top:clamp(40px,5vw,60px)}
@media (min-width:760px){ .promises{grid-template-columns:repeat(3,1fr)} }
.promise{background:var(--ink);padding:clamp(26px,3vw,38px)}
.promise .pnum{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.promise .pnum .ring{width:24px;height:24px;opacity:.95}
.promise .pnum .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent)}
.promise h3{font-size:clamp(21px,2.2vw,26px);letter-spacing:-.02em}
.promise p{margin:12px 0 0;color:var(--soft-rev);font-size:15px;line-height:1.55}
.pledge .closing{margin-top:clamp(46px,6vw,72px);text-align:center}
.pledge .closing p{font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-.02em;
  max-width:20ch;margin:0 auto;line-height:1.12}
.pledge .closing .u{color:var(--accent)}

/* ---- price --------------------------------------------------------------- */
.price{text-align:center}
.price .big{font-size:clamp(56px,11vw,128px);font-weight:700;letter-spacing:-.04em;line-height:.9;margin-top:10px}
.price .big .yr{font-size:.3em;font-weight:600;color:var(--muted);letter-spacing:-.01em;vertical-align:super}
.price .lead{margin:26px auto 0;max-width:40ch}
.price .cta-block{margin-top:38px;display:flex;flex-direction:column;align-items:center;gap:16px}
.price .reassure{font-size:13.5px;color:var(--muted)}

/* ---- how it works -------------------------------------------------------- */
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:18px;overflow:hidden;margin-top:clamp(40px,5vw,56px)}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{background:var(--paper);padding:clamp(28px,3.2vw,42px)}
.step .n{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em}
.step h3{font-size:clamp(19px,2vw,23px);margin-top:clamp(34px,5vw,64px)}
.step p{margin:10px 0 0;color:var(--soft);font-size:15px}

/* ---- trust strip --------------------------------------------------------- */
.trust{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--panel)}
.trust .row{display:grid;grid-template-columns:1fr;gap:22px;padding:clamp(30px,4vw,46px) 0}
@media (min-width:680px){ .trust .row{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .trust .row{grid-template-columns:repeat(4,1fr)} }
.badge{display:flex;align-items:center;gap:13px;font-size:14.5px;color:var(--ink);font-weight:500}
.badge .mk{width:26px;height:26px;flex:none;opacity:.85}

/* ---- FAQ accordion ------------------------------------------------------- */
.faq{max-width:820px;margin:0 auto}
.faq .item{border-top:1px solid var(--hair)}
.faq .item:last-child{border-bottom:1px solid var(--hair)}
.faq .q{width:100%;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--sans);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 4px;font-size:clamp(17px,2vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.faq .q .pm{position:relative;width:18px;height:18px;flex:none}
.faq .q .pm::before,.faq .q .pm::after{content:"";position:absolute;background:var(--ink);transition:transform .22s ease,opacity .22s}
.faq .q .pm::before{left:0;top:8px;width:18px;height:2px}
.faq .q .pm::after{left:8px;top:0;width:2px;height:18px}
.faq .item.open .q .pm::after{transform:rotate(90deg);opacity:0}
.faq .item.open .q .pm::before{background:var(--accent)}
.faq .a{overflow:hidden;max-height:0;transition:max-height .3s ease}
.faq .a p{margin:0;padding:0 44px 28px 4px;color:var(--soft);font-size:16px;line-height:1.62;max-width:62ch}

/* ---- final CTA ----------------------------------------------------------- */
.final{text-align:center}
.final h2{max-width:20ch;margin:0 auto}
.final .lead{margin:22px auto 0;max-width:38ch}
.final .cta-block{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px}

/* ---- footer -------------------------------------------------------------- */
.foot{border-top:1px solid var(--hair);padding:clamp(48px,6vw,72px) 0 56px}
.foot .top{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;align-items:flex-start}
.foot .brand .bw{font-size:14px}
.foot .tag{color:var(--muted);font-size:14px;margin-top:14px;max-width:30ch}
.foot .flinks{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot .flinks a{font-size:14px;color:var(--soft);text-decoration:none}
.foot .flinks a:hover{color:var(--ink)}
.foot .bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-top:clamp(36px,5vw,54px);padding-top:26px;border-top:1px solid var(--hair);color:var(--faint);font-size:12.5px}

/* ---- reveal-on-scroll ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .pingstage .ping{animation:none}
}