/* THE HOME PAGE, 2026-10-16 (Luke approved the design preview: "Yes this is much better").
   One calm column: a hero with the demo video beside the headline, then five short sections, each a
   heading, a sentence or two and real screens. Everything here is prefixed hp- and loaded by
   site/index.html only, so style.css (and the support, press, legal and 4,800 generated brand pages
   that link it) is untouched. Colours come from style.css's own variables; the site themes through
   :root[data-theme], which its head script always sets (dark unless the visitor chose light). */
:root{
  --hp-accent:#1d6f36;            /* green text on cream */
  --hp-soft:#3a4327;              /* body text on cream, a shade softer than --ink */
  --hp-band:rgba(255,253,246,.62);/* the alternate bands let the leaf pattern show through */
  --hp-shadow:0 24px 50px rgba(20,50,25,.16);
  --hp-shot-shadow:drop-shadow(0 16px 26px rgba(20,50,25,.18));
  --hp-clipbg:#f5f1e1;   /* the light clips' own background, measured from their first frame */
}
:root[data-theme="dark"]{
  --hp-accent:var(--green-hi);
  --hp-soft:#c9d6b8;
  --hp-band:rgba(22,31,18,.58);
  --hp-shadow:0 24px 60px rgba(0,0,0,.5);
  --hp-shot-shadow:drop-shadow(0 20px 34px rgba(0,0,0,.42));
  --hp-clipbg:#05150a;   /* the dark clips' own green, measured from their first frame */
}

/* ── hero ── */
.hp-hero{padding:clamp(34px,6vw,72px) 0 clamp(36px,6vw,64px)}
.hp-hero .wrap{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(28px,5vw,60px); align-items:center}
.hp-hero h1{font-size:clamp(34px,5.2vw,56px); line-height:1.06; letter-spacing:-.5px; margin:0 0 18px; text-wrap:balance}
.hp-lead{font-size:18.5px; line-height:1.6; color:var(--hp-soft); margin:0; max-width:34rem}
.hp-hero .freeline{margin:18px 0 18px}
.hp-stats{margin:30px 0 0; padding:20px 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 36px; list-style:none}
.hp-stats li{display:flex; flex-direction:column; line-height:1.3}
.hp-stats li span{font-size:13.5px; color:var(--muted); font-weight:500}
.hp-stats li .hp-n{font-size:24px; font-weight:600; color:var(--ink)}
.hp-stage{justify-self:center; width:min(100%,320px)}
.hp-vid{position:relative; aspect-ratio:9/16; max-width:100%; border-radius:30px; overflow:hidden; background:#0b1d0f;
  border:1px solid var(--card-bd); box-shadow:var(--hp-shadow)}
.hp-vid video, .hp-vid img{display:block; width:100%; height:100%; object-fit:cover}
.hp-vctl{position:absolute; right:12px; bottom:12px; width:44px; height:44px; border-radius:50%; padding:0;
  border:1px solid rgba(255,255,255,.28); background:rgba(10,29,15,.72); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.hp-vctl svg{width:16px; height:16px}
.hp-vctl:focus-visible{outline:2px solid var(--green-hi); outline-offset:3px}
.hp-vcap{margin:12px 0 0; text-align:center; font-size:13px; font-weight:500; color:var(--muted)}
@media (max-width:860px){
  .hp-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hp-stage{width:min(100%,300px)}
}

/* ── sections ── */
.hp-sec{padding:clamp(44px,7vw,80px) 0}
.hp-sec.hp-alt{background:var(--hp-band); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.hp-kicker{margin:0 0 10px; font-size:12.5px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color:var(--hp-accent)}
.hp-sec h2{font-size:clamp(27px,3.6vw,38px); line-height:1.12; letter-spacing:-.3px; margin:0; max-width:22ch; text-wrap:balance}
.hp-sub{margin:14px 0 0; font-size:17px; line-height:1.6; color:var(--hp-soft); max-width:40rem}

/* three tools */
.hp-tools{margin-top:38px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.hp-tool{display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--card-bd);
  border-radius:22px; padding:24px 22px 0; overflow:hidden; min-width:0}
.hp-tool h3{margin:0; font-size:20px; line-height:1.25}
.hp-tool p{margin:0; font-size:15px; line-height:1.6; color:var(--hp-soft)}
.hp-tool .hp-media{margin-top:auto; padding-top:14px; width:78%; align-self:center; transform:translateY(10px)}
@media (max-width:860px){
  .hp-tools{grid-template-columns:minmax(0,1fr)}
  .hp-tool .hp-media{width:min(64%,250px)}
}

/* screens: the site's bezel screenshots, theme-swapped by the page script like every other .phone */
.hp-media img, .hp-media video{display:block; width:100%; height:auto; filter:var(--hp-shot-shadow)}
.hp-media video{border-radius:18px}

/* a section clip: the phone alone, cut out of the clip's own background (Luke, 2026-10-16: "I don't like how they are in a box around
   the phone"). The clips are 720x1280 with the phone at x80 y58, 560x1162; this box is that crop, so the video is sized 128.57% by
   110.15% and pulled back by the crop's offset, and the box's rounded corners are the phone's, which hides the clip's background
   everywhere outside the bezel. The still underneath is the same crop of the clip's first frame. */
.hp-clip{position:relative; aspect-ratio:560/1162; max-width:100%; border-radius:15% / 7.2%; overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(white,black); filter:var(--hp-shot-shadow)}
.hp-clip .hp-cimg{position:absolute; inset:0; width:100%; height:100%; object-fit:fill; filter:none}
.hp-clip video{position:absolute; left:-14.29%; top:-4.99%; width:128.57%; height:110.15%; max-width:none; display:block; object-fit:fill;
  filter:none; border-radius:0; opacity:0; transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.hp-clip video.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .hp-clip video{transition:none} }
.hp-tool .hp-media.hp-clip{transform:none; margin-bottom:22px}

/* text beside screens */
.hp-split{margin-top:40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.hp-split.hp-top{margin-top:0}
.hp-points{display:grid; gap:26px; margin:0; padding:0; list-style:none}
.hp-points h3{margin:0 0 6px; font-size:19px; line-height:1.3}
.hp-points p{margin:0; font-size:16px; line-height:1.6; color:var(--hp-soft)}
.hp-pair{display:flex; justify-content:center; align-items:flex-start; gap:4%}
.hp-pair .hp-media{width:46%; max-width:250px; flex:0 0 auto}
.hp-solo{display:flex; justify-content:center}
.hp-solo .hp-media{width:min(100%,270px)}
.hp-solo.hp-score .hp-media{width:min(100%,300px)}
@media (max-width:860px){
  .hp-split{grid-template-columns:minmax(0,1fr)}
  .hp-pair .hp-media{width:44%}
}

/* the share card keeps style.css's .cardshot (the card swaps by CSS, see check_site_share_card); here it only gets a width */
#share .solo{width:min(100%,320px); justify-self:center}
@media (max-width:860px){ #share .solo{margin:0 auto} }

/* the label chips keep their explainer cards (style.css .tagchip), here under the values text */
.hp-values .tagshint{margin:24px 0 -14px}

/* close to hand */
.hp-hand{margin-top:38px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.hp-card{display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--card-bd);
  border-radius:22px; padding:24px 22px; min-width:0}
.hp-card h3{margin:0; font-size:19px; line-height:1.3}
.hp-card p{margin:0; font-size:15px; line-height:1.6; color:var(--hp-soft)}
.hp-row{margin-top:auto; padding-top:14px; display:flex; gap:10px; justify-content:center; align-items:flex-end}
.hp-row .hp-media{width:46%}
.hp-row .hp-clip{width:min(58%,190px)}
.hp-row.hp-watches .hp-media{width:31%}
/* watches carry no shadow (the strap runs the full height and a shadow reads as a grey slab, Luke x2) */
.hp-row.hp-watches img{filter:none}
/* the watch card gets its own full-width row: sharing a row with the two phone cards stretched it to their height and left the watches
   at the bottom of a tall empty card (Luke, 2026-10-19: "the watch bit looks a bit odd with the big empty space") */
.hp-hand .hp-card:nth-child(3){grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); column-gap:34px; row-gap:10px; grid-template-rows:auto auto; align-content:center; align-items:center; text-align:left}
@media (min-width:861px){ .hp-hand .hp-card:nth-child(3) h3{align-self:end} .hp-hand .hp-card:nth-child(3) p{align-self:start} }
.hp-hand .hp-card:nth-child(3) h3,.hp-hand .hp-card:nth-child(3) p{grid-column:1}
.hp-hand .hp-card:nth-child(3) .hp-row{grid-column:2; grid-row:1 / span 2; margin-top:0; padding-top:0; gap:16px; align-items:center}
.hp-hand .hp-card:nth-child(3) .hp-row.hp-watches .hp-media{width:30%}
@media (max-width:860px){ .hp-hand{grid-template-columns:minmax(0,1fr)}
  .hp-hand .hp-card:nth-child(3){display:flex; flex-direction:column; gap:10px; align-items:stretch; align-content:normal; text-align:left}
  .hp-hand .hp-card:nth-child(3) .hp-row{margin-top:auto; padding-top:14px}
  .hp-hand .hp-card:nth-child(3) .hp-row.hp-watches .hp-media{width:31%} }

/* live database */
.hp-live .hp-split{align-items:start}
.hp-live .livecard{justify-self:center; width:100%}

/* trust */
.hp-trust{margin-top:36px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px}
.hp-trust h3{margin:0 0 8px; font-size:19px; line-height:1.3}
.hp-trust p{margin:0; font-size:15.5px; line-height:1.65; color:var(--hp-soft)}
.hp-luke{margin-top:40px; max-width:46rem; background:var(--card); border:1px solid var(--card-bd); border-radius:22px; padding:26px 28px; display:grid; gap:10px}
.hp-luke h3{margin:0; font-size:20px}
.hp-luke p{margin:0; font-size:16px; line-height:1.65; color:var(--hp-soft)}
@media (max-width:860px){ .hp-trust{grid-template-columns:minmax(0,1fr); gap:24px} }

/* faq keeps style.css's animated .faqs; it only needs a measure and a gap from the heading */
.hp-faq .faqs{margin-top:30px; max-width:46rem}

@media (max-width:760px){
  .hp-lead{font-size:17px}
  .hp-sub{font-size:16px}
}