/* ============================================================
   Saveroot v2 — SCENES layer (v3: FULL-BLEED art background + text overlay)
   The illustration IS the whole section background (edge to edge). The copy
   is a separate layer floating over the blank (left) side of the art, with a
   soft left-to-right paper scrim so text stays readable while the art on the
   right is NEVER fully blocked. The black hole is a big full-bleed image with
   the headline locked INSIDE the dark centre. Pairs with styles.css tokens.
   ============================================================ */

/* ---- full-bleed scene: art fills the section, copy overlaid on the left ---- */
.scene{
  position:relative; overflow:hidden;
  min-height:clamp(460px,80vh,760px);
  display:flex; align-items:center;
  padding:0;
  /* show the WHOLE illustration (incl. its soft green glow) sized to height and
     hugging the right — NOT 'cover', which crops the art + fade to a hard edge */
  background:var(--art) right 2% center/auto 94% no-repeat;
  background-color:var(--paper);
}
/* readability scrim ONLY over the left (text) side; art on the right stays clear */
.scene::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
     rgba(251,251,249,.96) 0%,
     rgba(251,251,249,.90) 28%,
     rgba(251,251,249,.60) 46%,
     rgba(251,251,249,.12) 60%,
     rgba(251,251,249,0) 72%);
}
.scene-copy{
  position:relative; z-index:2;
  flex:0 1 620px; max-width:620px;
  padding:52px clamp(22px,5vw,64px);
  margin-left:clamp(0px,5vw,90px);
}
/* ALTERNATING sides: .scene.right flips art to the LEFT + copy to the RIGHT so
   the illustrations zig-zag down the page (art R, art L, art R…) */
.scene.right{ justify-content:flex-end; background-position:left 2% center; }
.scene.right::before{
  background:linear-gradient(270deg,
     rgba(251,251,249,.96) 0%,
     rgba(251,251,249,.90) 28%,
     rgba(251,251,249,.60) 46%,
     rgba(251,251,249,.12) 60%,
     rgba(251,251,249,0) 72%);
}
.scene.right .scene-copy{ margin-left:0; margin-right:clamp(0px,5vw,90px); }
/* the 'decide' scene: make it noticeably BIGGER and pull it IN from the right edge
   (it was too small and sat too far right) */
.scene.fit{ background-size:auto 99%; background-position:right 6% center; }
/* the old two-column media panel is gone — art is now the section background */
.scene-media,.scene-media .glow{ display:none; }
.scene .kicker{
  display:inline-block;font-family:var(--display);font-weight:800;
  font-size:12px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:12px;
}
.scene-copy h2{ font-size:clamp(26px,4vw,42px); margin-bottom:12px; }
.scene-copy p{ font-size:clamp(16px,2vw,18px); color:var(--ink-soft); }
.scene .facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.facts .f{
  font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink);
  background:var(--card); border:2px solid var(--ink); box-shadow:var(--sketch-sm);
  border-radius:999px; padding:5px 13px;
}

/* On narrow screens the art can't share the row with text — put art on top as
   a banner and let the copy sit on solid paper below it. */
@media (max-width:720px){
  .scene{
    display:block; min-height:0;
    background-size:100% auto; background-position:top center;
    padding-top:min(56vw,320px);   /* reserve room for the banner art */
  }
  .scene::before{
    background:linear-gradient(180deg,
      rgba(251,251,249,0) 0%,
      rgba(251,251,249,0) 30%,
      rgba(251,251,249,.85) 44%,
      var(--paper) 52%);
  }
  .scene-copy{ margin-left:0; max-width:none; padding:8px 22px 44px; }
  /* stacked on mobile: both variants become art-on-top banners */
  .scene.right{ background-position:top center; justify-content:flex-start; }
  .scene.right .scene-copy{ margin-right:0; }
  .scene.fit{ background-size:100% auto; }
}

/* ---- HERO: full-bleed art background, copy + video overlaid on the left ---- */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(480px,74vh,720px);
  display:flex; align-items:center;
  padding:0;
  /* anchor the illustration to the TOP-RIGHT, smaller so the WHOLE drawing sits
     high in the hero (was cropped and sitting too low) */
  background-image:var(--art);
  background-repeat:no-repeat;
  background-position:right 6% top 8%;
  background-size:auto 72%;
  background-color:var(--paper);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
     rgba(251,251,249,.97) 0%,
     rgba(251,251,249,.92) 30%,
     rgba(251,251,249,.62) 48%,
     rgba(251,251,249,.12) 62%,
     rgba(251,251,249,0) 74%);
}
.hero-copy{
  position:relative; z-index:2;
  flex:0 1 640px; max-width:640px;
  padding:56px clamp(22px,5vw,64px);
  margin-left:clamp(0px,5vw,90px);
}
.hero-copy h1{ font-size:clamp(36px,6.4vw,66px); line-height:1.04; }
.hero-copy .lead{ margin:16px 0 18px; max-width:34ch; }
/* the hero art is the background now; the old media column just holds the video */
.hero-media{ position:relative; z-index:2; flex:0 0 auto; }
.hero-art{ display:none; }
@media (max-width:720px){
  .hero{
    display:block; min-height:0;
    background-size:100% auto; background-position:top center;
    padding-top:min(60vw,340px);
  }
  .hero::before{
    background:linear-gradient(180deg,
      rgba(251,251,249,0) 0%,
      rgba(251,251,249,0) 32%,
      rgba(251,251,249,.85) 46%,
      var(--paper) 54%);
  }
  .hero-copy{ margin-left:0; max-width:none; padding:8px 22px 24px; }
}
.works{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 4px; }
.works-label{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink-soft); }
/* brand chips: small LOGO + name (not just text) */
.brand{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink);
  background:var(--card); border:2px solid var(--ink); box-shadow:var(--sketch-sm);
  border-radius:999px; padding:4px 11px 4px 8px;
}
.brand svg{ width:16px; height:16px; flex:0 0 auto; display:block; }

/* ---- working video slot -> opens a modal ---- */
.video-slot{
  position:relative; margin:16px 0 2px; aspect-ratio:16/9; width:100%;
  border:2.5px solid var(--ink); border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:var(--sketch);
  background:radial-gradient(90% 120% at 30% 20%, rgba(55,160,90,.28), transparent 60%),
    linear-gradient(180deg,#0e1512,#132019);
  display:flex; align-items:center; justify-content:center;
}
.video-slot .play{ width:66px;height:66px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(55,160,90,.5); }
.video-slot .play::after{ content:""; border-left:20px solid #04120c;
  border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; }
.video-slot .vlabel{ position:absolute; bottom:10px; left:12px; right:12px;
  color:#dff5e6; font-family:var(--display); font-weight:700; font-size:12.5px; }
.vmodal{ position:fixed; inset:0; background:rgba(10,16,13,.86); z-index:200;
  display:none; align-items:center; justify-content:center; padding:20px; }
.vmodal.open{ display:flex; }
.vmodal .vbox{ width:min(920px,94vw); aspect-ratio:16/9; background:#000;
  border-radius:14px; overflow:hidden; position:relative; }
.vmodal .vbox iframe,.vmodal .vbox video{ width:100%;height:100%;border:0; }
.vmodal .vclose{ position:absolute; top:-40px; right:0; color:#fff; font-size:26px;
  cursor:pointer; font-family:var(--display); }
.vmodal .vsoon{ color:#dff5e6; font-family:var(--display); font-weight:700;
  display:flex; align-items:center; justify-content:center; height:100%; }

/* ---- FINAL CTA: BIG full-bleed BLACK HOLE, headline LOCKED INSIDE the hole ---- */
.blackhole{
  position:relative; overflow:hidden;
  min-height:clamp(560px,92vh,860px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0;
  /* the black-hole image IS the whole section — big, centred, on white paper */
  background:var(--art) center/contain no-repeat;
  background-color:var(--paper);
}
/* copy sits centred INSIDE a dark radial "event horizon" of its own, so it always
   reads with strong contrast and looks like it's sitting in the black hole (the
   generated art's own black centre doesn't have to line up perfectly) */
.blackhole .bh-inner{
  position:relative; z-index:2;
  width:min(56vh,600px); max-width:92vw;
  padding:clamp(30px,6vh,64px) clamp(26px,4vw,56px);
  border-radius:50%;
  background:radial-gradient(closest-side,
     rgba(4,10,8,.95) 0%, rgba(4,10,8,.92) 52%,
     rgba(4,10,8,.6) 76%, rgba(4,10,8,0) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.blackhole h2{
  color:#f4fff7; font-size:clamp(24px,3.6vw,40px); line-height:1.08;
  text-shadow:0 2px 22px rgba(0,0,0,.75);
}
.blackhole .lead{
  color:#d6efe0; font-size:clamp(13px,1.7vw,17px); max-width:34ch; margin:10px auto;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}
.blackhole .bh-inner .btn{ margin-top:6px; }
/* the old separate art tile is folded into the background now */
.blackhole .bh-art-big{ display:none; }
@media (max-width:720px){
  .blackhole{ min-height:78vh; background-size:150% auto; }
  .blackhole .bh-inner{ width:min(64vw,340px); }
}

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

/* ---- 'see it in action' mockup strip (separate from the illustrations) ---- */
.mockups{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:680px){ .mockups{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .mockups{ grid-template-columns:repeat(5,1fr); } }
.mockup{ background:var(--card); border:2px solid var(--ink); border-radius:14px;
  box-shadow:var(--sketch); padding:13px 14px; font-family:var(--body); font-size:12.5px; color:var(--ink); }
.mockup .mk-cap{ font-family:var(--display); font-weight:800; font-size:11px; color:var(--green-deep);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.mockup .mk-head{ display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-family:var(--display); font-weight:800; font-size:13px; margin-bottom:6px; }
.mockup .mk-badge{ font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 8px; white-space:nowrap;
  background:var(--green-soft); color:var(--green-deep); border:1.5px solid var(--green-deep); }
.mockup .mk-row{ display:flex; align-items:center; gap:6px; margin:4px 0; color:var(--ink-soft); }
.mockup .mk-pill{ display:inline-block; font-weight:700; font-size:11px; background:var(--paper-2);
  border:1.5px solid var(--ink); border-radius:999px; padding:2px 9px; margin:2px 3px 2px 0; }
.mockup .mk-btn{ display:inline-block; font-family:var(--display); font-weight:700; font-size:11.5px;
  border-radius:8px; padding:5px 11px; margin:6px 5px 0 0; border:2px solid var(--ink); box-shadow:var(--sketch-sm); }
.mockup .mk-btn.go{ background:var(--green); color:#fff; } .mockup .mk-btn.alt{ background:var(--card); color:var(--ink); }
.mockup .mk-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin:6px 0; }
.mockup .mk-cal span{ aspect-ratio:1; border:1.5px solid var(--ink); border-radius:5px; background:var(--paper);
  font-size:9px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.mockup .mk-cal span.on{ background:var(--green); color:#fff; }
.mockup .mk-link{ color:var(--green-deep); font-weight:700; }

/* ---- verticals band (art VISIBLE) ---- */
.verticals{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:680px){ .verticals{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .verticals{ grid-template-columns:repeat(4,1fr); } }
.vcard{
  position:relative; overflow:hidden; border:2.5px solid var(--ink);
  border-radius:16px; box-shadow:var(--sketch); min-height:250px;
  display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; color:var(--ink);
  /* fill the whole card (no hard square edge) with the subject raised above the
     text band */
  background:var(--art) center 24%/cover no-repeat, linear-gradient(180deg, rgba(55,160,90,.12), #fff);
}
.vcard .vc-body{ position:relative; z-index:2; padding:14px;
  background:linear-gradient(0deg, rgba(251,251,249,.97), rgba(251,251,249,.85) 62%, transparent); }
.vcard h3{ margin-bottom:2px; }
.vcard p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

/* ---- band + steps + pricing + faq (unchanged helpers) ---- */
.band-paper{ background:var(--paper-2); border-top:2px solid rgba(43,42,40,.10); border-bottom:2px solid rgba(43,42,40,.10); padding:56px 0; }
section.plain{ padding:56px 0; }
.steps{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--card); border:2.5px solid var(--ink); border-radius:16px; box-shadow:var(--sketch); padding:20px; }
.step-n{ display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; background:var(--green); color:#fff; font-family:var(--display); font-weight:800; font-size:18px; margin-bottom:10px; box-shadow:var(--sketch-sm); }
.price-grid{ display:grid; gap:20px; grid-template-columns:1fr; max-width:760px; margin:0 auto; }
@media (min-width:680px){ .price-grid{ grid-template-columns:1fr 1fr; } }
.price-card{ background:var(--card); border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--sketch); padding:24px; }
.price-card.featured{ background:linear-gradient(180deg, rgba(55,160,90,.10), #fff); border-color:var(--green-deep); }
.price-card .price{ font-family:var(--display); font-weight:800; font-size:40px; color:var(--ink); margin:4px 0 10px; }
.price-card .price span{ font-size:16px; color:var(--ink-soft); font-weight:700; }
.price-card ul{ list-style:none; margin:10px 0 18px; padding:0; }
.price-card li{ padding-left:24px; position:relative; margin:8px 0; font-size:15px; color:var(--ink-soft); }
.price-card li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
details.faq{ background:var(--card); border:2px solid rgba(43,42,40,.16); border-radius:14px; box-shadow:var(--sketch-sm); padding:16px 18px; margin:10px 0; }
details.faq summary{ font-family:var(--display); font-weight:700; cursor:pointer; }
details.faq p{ margin-top:10px; color:var(--ink-soft); font-size:15px; }