/* ---- Hero ---- */
.ah-hero { position:relative; background:var(--grad-hero); color:#fff; padding:172px 0 var(--space-3xl); overflow:hidden; }
.ah-hero .wrap { position:relative; z-index:2; }
.ah-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-2xl); align-items:center; }
.ah-hero h1 { color:#fff; letter-spacing:-.02em; margin:0 0 var(--space-m); }
.ah-hero h1 .hl { color:var(--color-accent); }
.ah-hero .lede { color:rgba(255,255,255,.9); max-width:33em; margin:0 0 var(--space-s); }
.ah-hero .tagline { font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-accent); margin:0 0 var(--space-l); }
.ah-hero .btn-row { display:flex; gap:var(--space-xs); flex-wrap:wrap; }
.ah-hero .hero-note { margin:var(--space-m) 0 0; font-size:var(--text-sm); color:rgba(255,255,255,.72); }

.ah-hero-visual { position:relative; }
.ah-hero-visual img { width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(13,38,56,.55)); border-radius:var(--radius-lg); }
.ah-badge { position:absolute; background:#fff; color:var(--color-secondary); border-radius:var(--radius-lg); box-shadow:var(--shadow-4);
  padding:var(--space-xs) var(--space-s); display:flex; align-items:center; gap:var(--space-xs); font-weight:var(--weight-bold); z-index:3; }
.ah-badge .big { font-size:var(--text-xl); color:var(--color-primary); line-height:var(--line-none); }
.ah-badge .lbl { font-size:var(--text-xs); color:var(--color-ink-soft); font-weight:var(--weight-semibold); line-height:var(--line-snug); }
.ah-badge.b1 { top:8%; left:-26px; }
.ah-badge.b2 { bottom:10%; right:-20px; }
@media (prefers-reduced-motion: no-preference) {
  .ah-badge.b1 { animation:ah-float 6s ease-in-out infinite; }
  .ah-badge.b2 { animation:ah-float 6s ease-in-out infinite 1.5s; }
}
@keyframes ah-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ---- Money section background ---- */
.ah-money { background:linear-gradient(180deg, var(--brand-50), #fff); }

/* ---- Stat-strip border fix for 2-col layout ---- */
@media (max-width:760px) {
  .stat-strip .stat:nth-child(2) { border-right:0; }
  .stat-strip .stat { border-bottom:1px solid var(--color-border-soft); }
  .ah-hero { padding:140px 0 var(--space-3xl); }
}

/* ---- Calculator ---- */
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-l); align-items:stretch; }

/* bars panel flex layout */
.calc-grid .barchart { display:flex; flex-direction:column; }
.calc-grid .barchart .cap { margin-bottom:var(--space-s); }
.calc-grid .barchart .btn { align-self:flex-start; margin-top:auto; }

/* ---- 100% free hero card shadow (on outer wrapper, outside clip-path) ---- */
.gp-hero-card-wrap { position: relative; }
.gp-hero-card-wrap::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-xl); box-shadow: 0 16px 40px rgba(13,38,56,.2); pointer-events: none; }

/* ---- GP-free overrides (dark bg + portrait layout) ---- */
.gp-free h2 { color:#fff; }
.gp-free p { color:rgba(255,255,255,.85); }
.gp-free .section-head p { font-size:var(--text-lg); }
.gp-free-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; position:relative; z-index:1; }
.gp-free-portrait { position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:460px; }
.gp-free-circle { width:400px; height:400px; position:relative; }
.gp-free-circle::before { content:''; position:absolute; inset:0; border-radius:var(--radius-full); background:linear-gradient(135deg, rgba(103,184,220,.1), rgba(103,184,220,.05)); }
.gp-free-circle img { position:absolute; bottom:0; left:50%; transform:translateX(-50%); height:520px; width:auto; z-index:1; filter:drop-shadow(0 12px 30px rgba(0,0,0,.25)); clip-path:inset(0 0 0 0 round 0 0 200px 200px); }
.gp-free-card .chip-ic { background:rgba(255,255,255,.16); }

/* ---- How it works — ALT: cinematic full-viewport carousel (#how-alt) ----
   Default markup is a native scroll-snap carousel (mobile / reduced motion /
   no GSAP). gp-hiw.js adds .is-pinned on desktop and drives the track with a
   pinned ScrollTrigger scrub instead — same DOM, two modes. */
/* Column layout: section-head in flow up top, frame fills what's left (~2/3
   viewport). Top gutter clears the fixed floating nav (~60px) while pinned;
   border-box 100vh so header + frame always fit the viewport together. */
.hiw-cine { position:relative; height:100vh; min-height:640px;
  max-width:var(--grid-max-width); margin-inline:auto;
  padding:calc(var(--space-2xl) + var(--space-xs)) var(--space-m) var(--space-m);
  display:flex; flex-direction:column; justify-content:center; }
.hiw-cine-info { flex:none; margin-bottom:var(--space-xl); }
/* Fixed cinematic proportion tied to width; shrinks (aspect breaks) only when
   the viewport is too short to fit it under the header. */
.hiw-cine-frame { position:relative; flex:0 1 auto; width:100%; aspect-ratio:16/9; min-height:0; overflow:hidden;
  border-radius:var(--radius-xl); background:var(--color-secondary); box-shadow:var(--shadow-lg); }

/* Track: native horizontal scroll-snap by default */
.hiw-cine-track { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
.hiw-cine-track::-webkit-scrollbar { display:none; }
.hiw-cine.is-pinned .hiw-cine-track { overflow:visible; scroll-snap-type:none; }

/* Pinned mode stacks slides so each one slides OVER the previous (JS tweens
   xPercent 100 -> 0; z-index follows slide order; frame clips the deck). */
.hiw-cine.is-pinned .hiw-slide { position:absolute; inset:0; }
.hiw-cine.is-pinned .hiw-slide:nth-child(1) { z-index:1; }
.hiw-cine.is-pinned .hiw-slide:nth-child(2) { z-index:2; }
.hiw-cine.is-pinned .hiw-slide:nth-child(3) { z-index:3; }
.hiw-cine.is-pinned .hiw-slide:nth-child(4) { z-index:4; }
.hiw-cine.is-pinned .hiw-slide + .hiw-slide { box-shadow:-24px 0 60px rgba(13,38,56,.45); }

/* Slides */
.hiw-slide { position:relative; flex:0 0 100%; height:100%; overflow:hidden; scroll-snap-align:start; }
.hiw-slide-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hiw-slide-scrim { position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,38,56,.82) 0%, rgba(13,38,56,.5) 38%, rgba(13,38,56,.08) 62%),
             linear-gradient(0deg, rgba(13,38,56,.65) 0%, rgba(13,38,56,0) 30%); }
.hiw-slide-inner { position:relative; z-index:2; height:100%; display:flex; align-items:flex-start; padding-top:var(--space-3xl); }
.hiw-slide-copy { max-width:26em; color:#fff; }
.hiw-step-n { display:inline-block; font-size:var(--text-sm); font-weight:var(--weight-extrabold); letter-spacing:.12em;
  color:var(--color-accent); border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-full); padding:var(--space-3xs) var(--space-s); margin-bottom:var(--space-s); }
.hiw-slide-copy h3 { color:#fff; font-size:var(--step-3); letter-spacing:-.02em; margin:0 0 var(--space-s); }
.hiw-slide-copy p { color:rgba(255,255,255,.88); font-size:var(--text-md); line-height:var(--line-relaxed); margin:0; }

/* Floating UI props (t8-style cards + pills over the photo) */
.hiw-props { position:absolute; inset:0; z-index:2; pointer-events:none; }
.hiw-prop { position:absolute; }
.hiw-prop-card { display:flex; align-items:center; gap:var(--space-xs);
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-lg); padding:var(--space-xs) var(--space-s);
  box-shadow:0 8px 26px rgba(13,38,56,.16); font-size:var(--text-sm); }
.hiw-prop-card strong { display:block; color:var(--color-secondary); font-weight:var(--weight-bold); }
.hiw-big { font-size:var(--text-xl); font-weight:var(--weight-extrabold); line-height:var(--line-none); }
.hiw-meta { display:block; font-size:var(--text-xs); color:var(--color-ink-soft); }
.hiw-prop-lg { flex-direction:column; align-items:stretch; gap:0; padding:var(--space-s) var(--space-m); min-width:260px; }
.hiw-prop-head { display:flex; align-items:center; gap:var(--space-2xs); padding-bottom:var(--space-2xs); margin-bottom:var(--space-2xs); border-bottom:1px solid var(--color-border-soft); }
.hiw-prop-row { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-s); padding:var(--space-3xs) 0; font-size:var(--text-sm); color:var(--color-secondary); font-weight:var(--weight-semibold); }
.hiw-prop-row .hiw-meta { text-align:right; }
.hiw-prop-ic { width:36px; height:36px; flex:none; border-radius:var(--radius-md); background:var(--brand-50); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center; }
.hiw-prop-ic.blue { background:var(--grad-chip); color:#fff; }
.hiw-prop-ic svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.hiw-pill { display:inline-flex; align-items:center; gap:var(--space-2xs);
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-full); padding:var(--space-3xs) var(--space-s);
  box-shadow:0 4px 14px rgba(13,38,56,.1); font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:.06em; color:var(--color-ink-soft); white-space:nowrap; }
.hiw-dot { display:inline-block; width:7px; height:7px; border-radius:var(--radius-full); background:var(--brand-200); }
.hiw-dot.green { background:var(--color-success); }

/* App-screenshot card: the real UI, framed, floating over the photo */
.hiw-shot { position:absolute; z-index:1; right:6%; top:50%; transform:translateY(-50%);
  max-width:min(36vw, 500px); background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-xl); padding:var(--space-2xs);
  box-shadow:0 24px 60px rgba(13,38,56,.4); }
/* Cap height so portrait screenshots never overflow the (shorter) frame or
   collide with the thumbnail rail; width follows the image's aspect. */
.hiw-shot img { display:block; width:auto; height:auto; max-width:100%; max-height:min(44vh, 400px); border-radius:var(--radius-lg); }

/* Entrance choreography per active slide */
.hiw-slide-copy, .hiw-prop { opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.hiw-shot { opacity:0; transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); transform:translateY(-50%) translateY(24px) scale(.97); }
.hiw-slide.is-active .hiw-slide-copy, .hiw-slide.is-active .hiw-prop { opacity:1; transform:none; }
.hiw-slide.is-active .hiw-shot { opacity:1; transform:translateY(-50%); }
.hiw-slide.is-active .hiw-prop:nth-child(1) { transition-delay:.2s; }
.hiw-slide.is-active .hiw-prop:nth-child(2) { transition-delay:.35s; }
.hiw-slide.is-active .hiw-prop:nth-child(3) { transition-delay:.5s; }
@media (prefers-reduced-motion: reduce) {
  .hiw-slide-copy, .hiw-prop { transform:none; transition:opacity .3s ease; }
  .hiw-shot { transform:translateY(-50%); transition:opacity .3s ease; }
}

/* Persistent UI: arrows + thumbnails + counter */
/* In flow below the frame, on the page background */
.hiw-cine-ui { position:relative; flex:none; margin-top:var(--space-m);
  display:flex; align-items:center; justify-content:center; gap:var(--space-s); }
.hiw-thumbs { display:flex; gap:var(--space-2xs); }
.hiw-thumb { appearance:none; padding:0; border:2px solid var(--color-border-soft); background:none; cursor:pointer;
  border-radius:var(--radius-md); overflow:hidden; width:84px; height:56px; flex:none;
  opacity:.75; transition:opacity var(--transition-base), border-color var(--transition-base), transform var(--transition-base); }
.hiw-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hiw-thumb:hover { opacity:1; }
.hiw-thumb.is-active { border-color:var(--color-primary); opacity:1; transform:scale(1.06); box-shadow:0 6px 20px rgba(13,38,56,.2); }
.hiw-thumb:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.hiw-arrow { appearance:none; border:1px solid var(--color-border-soft); background:var(--color-surface); color:var(--color-secondary); cursor:pointer;
  width:44px; height:44px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-xs);
  transition:background var(--transition-base), border-color var(--transition-base); }
.hiw-arrow:hover { background:var(--brand-50); border-color:var(--brand-200); }
.hiw-arrow:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.hiw-arrow svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.hiw-arrow[data-hiw-prev] svg { transform:rotate(180deg); }
.hiw-counter { position:absolute; right:var(--space-l); top:50%; transform:translateY(-50%); font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:.12em; color:var(--color-ink-soft); font-variant-numeric:tabular-nums; }

@media (max-width:900px) {
  .hiw-cine { height:auto; min-height:0; padding:var(--space-xl) var(--space-xs) var(--space-xs); }
  .hiw-slide { height:88svh; min-height:560px; }
  .hiw-slide-inner { align-items:flex-end; padding-bottom:calc(var(--space-3xl) + 72px); }
  .hiw-slide-scrim { background:linear-gradient(0deg, rgba(13,38,56,.88) 0%, rgba(13,38,56,.45) 45%, rgba(13,38,56,.1) 75%); }
  .hiw-cine-info { margin-bottom:var(--space-m); }
  /* Screenshot card sits top-centre; copy at the bottom */
  .hiw-shot { top:12%; right:50%; transform:translateX(50%); width:min(78vw, 400px); }
  .hiw-shot { transition:opacity .3s ease; }
  .hiw-slide.is-active .hiw-shot { transform:translateX(50%); }
  /* Props clutter small screens — keep one card overlapping the shot, hide the rest */
  .hiw-pill { display:none; }
  .hiw-prop-card { transform:scale(.9); transform-origin:bottom right; }
  .hiw-slide.is-active .hiw-prop-card { transform:scale(.9); }
  .hiw-props .hiw-prop { top:auto !important; bottom:auto !important; right:4% !important; }
  .hiw-props .hiw-prop:nth-of-type(1) { top:44% !important; }
  .hiw-props .hiw-prop-card:nth-of-type(2) { display:none; }
  .hiw-thumb { width:60px; height:40px; }
  .hiw-counter { display:none; }
}

/* ---- Responsive ---- */
@media (max-width:980px) {
  .ah-hero-grid { grid-template-columns:1fr; gap:var(--space-xl); }
  .ah-hero-visual { max-width:520px; margin:0 auto; }
  .ah-badge.b1 { left:0; }
  .ah-badge.b2 { right:0; }
  .gp-free-layout { grid-template-columns:1fr; }
  .gp-free-portrait { max-width:320px; margin:0 auto; min-height:360px; }
}
@media (max-width:880px) {
  .calc-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .calc-out { grid-template-columns:1fr; }
}