/* ═══ Home hero: the left column ═══════════════════════════════════════
   Badge, a three-line headline with "your life." in green over a brush
   stroke, the body, a dark-green WhatsApp button with a handwritten nudge,
   and three feature points. Loads after styles.css and only touches the
   home hero's copy column; the phone on the right is unchanged.
   ════════════════════════════════════════════════════════════════════ */
.hero .hero-copy{
  --hh-green-1:#1C8A4A;
  --hh-green-2:#36A85D;
  --hh-green-3:#5BBE6E;
  --hh-btn-1:#17402E;
  --hh-btn-2:#0D281D;
  --hh-ico-bg:#DDF2DB;
  --hh-ico:#2E8B4A;
}

/* ── badge ──────────────────────────────────────────────────────────── */
.hero .hero-copy .badge{
  margin-bottom:28px; padding:8px 18px 8px 9px; gap:10px;
  background:rgba(255,255,255,.72);
  font-size:14.5px; font-weight:500; letter-spacing:-.005em; color:var(--ink);
}
.hero .hero-copy .badge i,
.hero .hero-copy .badge i img{width:26px; height:26px}

/* ── headline ───────────────────────────────────────────────────────── */
.hero h1.dsp.hero-h1{
  font-size:clamp(46px,5.7vw,86px); font-weight:800;
  line-height:1.0; letter-spacing:-.042em; color:var(--ink);
  /* a soft white halo lifts the black off the wash, as in the design */
  text-shadow:0 1px 0 rgba(255,255,255,.75),0 0 22px rgba(255,255,255,.65);
}
.hero h1.hero-h1 .line-reveal__line > span{white-space:nowrap}
.hero h1.hero-h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--hh-green-1) 0%,var(--hh-green-2) 55%,var(--hh-green-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.75));
}
/* the last line gets room below it so the brush stroke isn't clipped
   by the reveal mask */
.hero h1.hero-h1 .hero-h1-accent{padding-bottom:.42em; margin-bottom:-.42em}
.hero h1.hero-h1 .hero-h1-accent > span{position:relative}
.hero-swoosh{
  position:absolute; z-index:-1; pointer-events:none;
  left:12%; width:97%; height:.42em; top:.84em;
  overflow:visible;
  clip-path:inset(0 100% 0 0);
}
.line-reveal.is-in .hero-swoosh{
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s cubic-bezier(.65,0,.35,1) .95s;
}

/* ── body ───────────────────────────────────────────────────────────── */
.hero .hero-copy .hero-body{
  margin-top:38px; max-width:47ch;
  font-size:clamp(16px,1.3vw,19px); line-height:1.6; font-weight:400;
  color:var(--ink-2);
}

/* ── call to action ─────────────────────────────────────────────────── */
.hero .hero-copy .hero-acts{margin-top:34px}
.hero-cta{position:relative; display:inline-flex}
.hero .btn.btn-hero{
  min-height:64px; padding:0 32px 0 30px; gap:14px;
  background:linear-gradient(180deg,var(--hh-btn-1) 0%,var(--hh-btn-2) 100%);
  color:#fff;
  font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.012em;
  box-shadow:0 18px 34px -16px rgba(13,40,29,.65),0 4px 10px -4px rgba(13,40,29,.35),inset 0 1px 0 rgba(255,255,255,.09);
}
.hero .btn.btn-hero .wa{width:25px; height:25px}
.btn-hero .btn-arrow{
  width:22px; height:22px; flex:none; margin-left:6px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.btn-hero:hover .btn-arrow,.btn-hero:focus-visible .btn-arrow{transform:translateX(4px)}

/* the handwritten nudge beside the button */
.hero-note{
  position:absolute; left:calc(100% + 16px); top:50%;
  display:flex; align-items:flex-start; gap:6px;
  transform:translateY(-58%);
  color:var(--hh-green-1); pointer-events:none; white-space:nowrap;
}
.hero-note-arrow{
  width:74px; height:36px; flex:none; margin-top:-2px; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.hero-note > span{
  display:block; margin-top:8px;
  font-family:var(--font-note); font-size:23px; line-height:1.02; text-align:center;
  transform:rotate(-5deg); transform-origin:0 50%;
}

/* ── three feature points ───────────────────────────────────────────── */
.hero .hero-copy .hero-trust{
  display:grid; grid-template-columns:repeat(3,max-content); justify-content:start;
  gap:0; margin-top:44px;
}
.hero .hero-copy .hero-trust li{
  display:flex; align-items:center; gap:12px;
  padding:4px 20px; margin:0;
  background:none; border:0; border-radius:0; box-shadow:none;
  font-family:var(--font-body,inherit); font-weight:400; text-align:left;
}
.hero .hero-copy .hero-trust li:first-child{padding-left:0}
.hero .hero-copy .hero-trust li + li{border-left:1px solid rgba(17,27,33,.1)}
.hero .hero-copy .hero-trust-ico{
  width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#EEF9EC 0%,var(--hh-ico-bg) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 6px 16px -10px rgba(46,139,74,.45);
  color:var(--hh-ico);
}
.hero .hero-copy .hero-trust-ico svg{
  width:21px; height:21px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.hero-trust-ico svg .f{fill:currentColor}
.hero-trust-ico svg .k{fill:var(--hh-ico-bg); stroke:none}
.hero-trust-txt{display:flex; flex-direction:column; gap:3px}
.hero-trust-txt b{
  font-family:var(--font-display); font-size:15px; font-weight:700;
  line-height:1.25; letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
}
.hero-trust-txt > span{
  max-width:13.5ch; font-size:14px; line-height:1.4; color:var(--ink-2);
}

/* ── laptop windows under ~880px tall: the headline is sized by height as
   well as width, and the gaps close up, so the column clears the fold ── */
@media (min-width:1081px) and (max-height:880px){
  .hero h1.dsp.hero-h1{font-size:clamp(40px,min(5.7vw,7.6vh),86px)}
  .hero .hero-copy .badge{margin-bottom:20px}
  .hero .hero-copy .hero-body{margin-top:30px}
  .hero .hero-copy .hero-acts{margin-top:26px}
  .hero .hero-copy .hero-trust{margin-top:28px}
  .hero .hero-copy .hero-trust-ico{width:44px; height:44px}
}
@media (min-width:1081px) and (max-height:760px){
  .hero h1.dsp.hero-h1{font-size:clamp(38px,min(4.7vw,7.4vh),68px)}
  .hero .hero-copy .badge{margin-bottom:16px}
  .hero .hero-copy .hero-body{margin-top:24px; font-size:15.5px}
  .hero .hero-copy .hero-acts{margin-top:22px}
  .hero .btn.btn-hero{min-height:56px; font-size:17.5px}
  .hero .hero-copy .hero-trust{margin-top:26px}
}

/* narrower two-column widths: the three points tighten up first, and below
   1200px, where they no longer fit side by side, each icon sits above its
   words so the titles still stay on one line */
@media (min-width:1081px) and (max-width:1300px){
  .hero .hero-copy .hero-trust li{gap:10px; padding:2px 14px}
  .hero .hero-copy .hero-trust li:first-child{padding-left:0}
  .hero .hero-copy .hero-trust-ico{width:40px; height:40px}
  .hero .hero-copy .hero-trust-ico svg{width:19px; height:19px}
  .hero-trust-txt b{font-size:14px}
  .hero-trust-txt > span{font-size:13px}
}
@media (min-width:1081px) and (max-width:1200px){
  .hero .hero-copy .hero-trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero .hero-copy .hero-trust li{flex-direction:column; align-items:flex-start}
}

/* ── one column: everything centred ─────────────────────────────────── */
@media (max-width:1080px){
  .hero h1.dsp.hero-h1{font-size:clamp(42px,8.4vw,80px)}
  .hero .hero-copy .hero-body{margin-inline:auto}
  .hero .hero-copy .hero-trust{justify-content:center}
}
@media (max-width:720px){
  .hero-note{display:none}
}
@media (max-width:640px){
  .hero .hero-copy .badge{font-size:13px; padding:7px 14px 7px 8px; margin-bottom:22px}
  .hero .hero-copy .badge i,.hero .hero-copy .badge i img{width:22px; height:22px}
  .hero h1.dsp.hero-h1{font-size:clamp(38px,11.2vw,60px)}
  .hero .hero-copy .hero-body{margin-top:22px}
  .hero .hero-copy .hero-acts{margin-top:26px}
  .hero .btn.btn-hero{min-height:58px; font-size:16.5px; padding:0 24px 0 22px}
  .hero .hero-copy .hero-trust{grid-template-columns:1fr; justify-content:center; margin:32px auto 0; width:max-content; max-width:100%}
  .hero .hero-copy .hero-trust li{padding:12px 0}
  .hero .hero-copy .hero-trust li + li{border-left:0; border-top:1px solid rgba(17,27,33,.1)}
  .hero-trust-txt > span{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-swoosh,.line-reveal.is-in .hero-swoosh{clip-path:none; transition:none}
  .btn-hero .btn-arrow{transition:none}
}

/* ═══ Home hero: the right column ═══════════════════════════════════════
   The product video in a phone. The screen is 9:16 to match the video;
   its height follows the fold on desktop and the width on phones.
   Pause and sound sit in a small bar on the bottom of the screen.
   ════════════════════════════════════════════════════════════════════ */
.hero-vis .hv{
  --hv-h:min(
    clamp(460px,calc(100svh - 170px),780px),
    calc((100vw - 2 * var(--gut) - 16px) * 16 / 9 + 16px)
  );
  --hv-r:calc(var(--hv-h) * .076);
  position:relative; margin:0;
  display:flex; justify-content:center;
}
/* the same leaf wreath the old phone sat in */
.hv-branch{
  position:absolute; z-index:0; left:50%; bottom:0;
  width:172.5%; max-width:none; height:auto;
  transform:translateX(-50%);
  pointer-events:none; user-select:none;
}
@media (max-width:700px){
  .hv-branch{width:min(172.5%,100vw)}
}
.hv-device{
  position:relative; z-index:1;
  padding:8px; border-radius:var(--hv-r);
  background:#43434A;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),
             0 0 0 1px #26262B,
             0 44px 80px -42px rgba(17,27,33,.5),
             0 18px 34px -28px rgba(17,27,33,.34);
}
.hv-screen{
  display:block; width:auto; height:calc(var(--hv-h) - 16px); aspect-ratio:9/16;
  object-fit:cover; cursor:pointer;
  border-radius:calc(var(--hv-r) - 8px);
  clip-path:inset(0 round calc(var(--hv-r) - 8px));
  background:#E6F7EF;
}
.hv-island{
  position:absolute; z-index:2; left:50%; top:calc(8px + var(--hv-h) * .015);
  width:calc(var(--hv-h) * .135); height:calc(var(--hv-h) * .04);
  transform:translateX(-50%);
  border-radius:999px; background:#0A0A0C; pointer-events:none;
}

/* the control bar, floating on the bottom of the screen */
.hv-ctrl{
  position:absolute; z-index:3; left:50%; bottom:calc(8px + var(--hv-h) * .02);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:2px; padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 10px 24px -14px rgba(17,27,33,.4);
}
.hv-btn{
  height:36px; margin:0; padding:0; border:0; border-radius:999px;
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .2s;
}
.hv-btn{width:36px; display:grid; place-items:center}
.hv-btn svg{width:18px; height:18px; fill:currentColor}
.hv-btn .i-muted,.hv-btn .i-sound{fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.hv-btn svg .f{fill:currentColor}
.hv-btn:hover{background:rgba(255,255,255,.9)}
.hv-btn:focus-visible{outline:2px solid var(--green-ink); outline-offset:2px}
/* icon states follow the video */
.hv .i-play,.hv:not(.is-playing) .i-pause{display:none}
.hv:not(.is-playing) .i-play{display:block}
.hv .i-sound,.hv.is-muted .i-sound{display:none}
.hv.is-muted .i-muted{display:block}
.hv:not(.is-muted) .i-muted{display:none}
.hv:not(.is-muted) .i-sound{display:block}

/* one column: the phone sits under the copy, a little shorter */
@media (max-width:1080px){
  .hero-vis .hv{
    --hv-h:min(640px,calc((100vw - 2 * var(--gut) - 16px) * 16 / 9 + 16px));
    margin-top:44px;
  }
}