/* components part 2 of 16 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */


/* THE REVIEW AVATARS.
   The framing is now baked into the FILES. These used to be 1024x1024 half-body
   portraits dropped into a 46px circle: square source into a square box means
   object-fit:cover crops nothing, so a face landed about eight pixels across and the
   only thing that survived was hair colour. That is why seven distinct people read as
   one person seven times. They are cropped head-and-shoulders before upload, which is
   also what finally lets the lighting and hair variety show at all.
   The zoom range dropped to 1.01-1.09 to match: on a face-tight crop the old 1.20
   cut the top of the head off.
   Positions 4 and 5 are both men and both source frames are angled the same way, so
   5 is mirrored too: with only 4 flipped they still read as one person twice.
   These are seven generated portraits, and generated portraits all arrive the same way:
   square to camera, evenly lit, studio-clean. Seven of those in a row stops reading as
   seven customers and starts reading as stock art, which defeats the only job the
   cluster has. Rather than regenerate, break the sameness in CSS — mirror three of them,
   spread the zoom from 1.02 to 1.20 so the heads are not all framed at one distance,
   move each crop off dead centre, and pull exposure, contrast and warmth a few percent
   apart so the lighting stops matching.
   The .av wrapper carries the ring and does the clipping, so scaling the IMAGE cannot
   scale the 2px border with it — which is the whole reason the zoom can vary at all.
   --ring lets the footer swap white for the dark ground without restating the box. */
.hero-avatars .av{--ring:#fff;width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--ring);overflow:hidden;margin-left:-9px;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.hero-avatars .av:first-child{margin-left:0}
.hero-avatars .av img{width:100%;height:100%;display:block;object-fit:cover;
  border:0;border-radius:0;margin:0;box-shadow:none}
.hero-avatars .av:nth-child(1) img{transform:scale(1.03);filter:contrast(1.05) saturate(.93) brightness(1.04)}
.hero-avatars .av:nth-child(2) img{transform:scaleX(-1) scale(1.08);filter:contrast(.93) saturate(1.08) brightness(.96) hue-rotate(-5deg)}
.hero-avatars .av:nth-child(3) img{transform:scale(1.05);filter:contrast(1.10) saturate(.88) sepia(.06)}
.hero-avatars .av:nth-child(4) img{transform:scaleX(-1) scale(1.01);filter:contrast(.97) saturate(1.14) brightness(1.06) hue-rotate(4deg)}
.hero-avatars .av:nth-child(5) img{transform:scaleX(-1) scale(1.09);filter:contrast(1.02) saturate(.96) brightness(.94)}
.hero-avatars .av:nth-child(6) img{transform:scaleX(-1) scale(1.04);filter:contrast(1.08) saturate(1.05) brightness(1.02) sepia(.10)}
.hero-avatars .av:nth-child(7) img{transform:scale(1.06);filter:contrast(.95) saturate(.90) hue-rotate(-3deg)}
.hero-proof .rate{display:flex;flex-direction:column;line-height:1.2}
.hero-proof .stars{color:var(--star);font-size:14px;letter-spacing:.06em}
.hero-proof .stars b{color:var(--ink);font-family:var(--disp);font-weight:800;margin-left:5px;letter-spacing:-0.01em}
.hero-proof .ptxt{font-size:12.5px;color:var(--muted);max-width:34ch;line-height:1.45}
.hero-scarce{margin-top:18px;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.01em}
/* min-width:0 defeats the grid blowout: a grid item defaults to min-width:auto and
   refuses to shrink below its content's min-content width, which pushed the hero
   media ~6px past the viewport at 375. */
.hero-media{position:relative;align-self:stretch;min-width:0}
.hero-media img.hero-img,.hero-media video.hero-img{display:block;width:100%;aspect-ratio:auto;height:100%;min-height:clamp(420px,40vw,620px);object-fit:cover;border-radius:0}
/* The still is only a stand-in for the video, so it stays hidden wherever the video
   plays. Both selectors carry the .hero-img class deliberately: a plain
   `.hero-media .hero-still` loses to `.hero-media img.hero-img` on specificity and
   the still renders underneath the video. */
.hero-media img.hero-img.hero-still{display:none}
/* Video heroes: the clip lies over the LCP image and fades in once playing (29 Sep). */
.hero-media video.hero-img.hero-vid{position:absolute;inset:0;height:100%;min-height:0;opacity:0;transition:opacity .6s ease}
.hero-media video.hero-img.hero-vid.on{opacity:1}@media(max-width:1040px){
  .hero-row{grid-template-columns:minmax(0,1fr);gap:0}
  .hero h1{max-width:none}
  .hero-txt{display:contents}
  /* Phone order is eyebrow, IMAGE, H1. The eyebrow doubles as the breadcrumb/
   category label, so keeping it above the image tells the visitor what page they
   are on before the visual lands — then the render does the selling and the H1
   names it. This is the common pattern on premium service pages, and it costs
   nothing in SEO: the H1 is still the first heading in the DOM. */
  /* Phone: media first, then the breadcrumb, then the H1. The image sells, the
     breadcrumb says where you are, the heading names it. */
  .hero-media{order:1;margin-bottom:14px}
  .hero-txt>.eyebrow{order:2;padding-inline:var(--gut);margin:0 0 10px;display:flex}
  .hero-txt>h1{order:3;padding-inline:var(--gut);margin:2px 0 14px}
  .hero-media img.hero-img,.hero-media video.hero-img{aspect-ratio:16/10;height:auto;min-height:0;border-radius:0}
  .hero-txt>.hero-sub{order:4;padding-inline:var(--gut);margin-bottom:14px}
  .hero-txt>.checks{order:5;padding-inline:var(--gut);margin-bottom:16px;max-width:none}
  .hero-txt>.hero-btns{order:6;padding-inline:var(--gut)}
  .hero-txt>.hero-scarce{order:7;padding-inline:var(--gut);margin:10px 0 26px}
  .hero-txt>.hero-proof{order:7;padding-inline:var(--gut);margin:0 0 8px}   /* /tools/ai-render/ rating stays under the buttons on phones */
}@media(max-width:700px){
  .hero h1{font-size:34px;letter-spacing:-0.024em}
  .hero-media img.hero-img,.hero-media video.hero-img{aspect-ratio:2/1}
  .hero-txt>.eyebrow{margin:12px 0 2px}
  .hero-txt>h1{margin:2px 0 12px}
  .hero-media{margin-bottom:14px}
  .hero-txt>.hero-sub{margin-bottom:12px;font-size:16px;line-height:1.55}
  .checks{gap:8px}
  .checks li{font-size:14.5px;line-height:1.45}
  .hero-txt>.checks{margin-bottom:14px}}@media(max-width:700px){.hero-btns{flex-direction:column;align-items:stretch}.hero-btns .btn{width:100%;justify-content:center}}

/* HERO checks + check-style variants */
.checks{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.checks li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.checks li [data-proof]{display:contents}
.btn [data-proof]{display:contents}
.checks .ci{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s}
.checks .ci svg{width:20px;height:20px;color:var(--ink)}
body.chk-bold .checks .ci{background:transparent;border:0}
body.chk-bold .checks .ci svg{width:20px;height:20px;color:var(--ink)}
body.chk-bold .checks .ci svg path{stroke-width:3.4}
body.chk-fill .checks .ci{background:var(--ink);border:0}
body.chk-fill .checks .ci svg{width:12px;height:12px;color:#fff}
body.chk-fill .checks .ci svg path{stroke-width:3}
body.chk-outline .checks .ci{background:transparent;border:1.5px solid var(--faint)}
body.chk-outline .checks .ci svg{width:11px;height:11px;color:var(--ink)}
body.chk-outline .checks .ci svg path{stroke-width:2.4}
body.chk-grey .checks .ci{background:#c7c5c0;border:0}
body.chk-grey .checks .ci svg{width:12px;height:12px;color:#fff}
body.chk-grey .checks .ci svg path{stroke-width:3}

/* BEFORE/AFTER SLIDER */
.ba{position:relative;width:100%;overflow:hidden;--pos:52%;background:#e8e7e2;user-select:none;aspect-ratio:4/3}
.ba.block{aspect-ratio:16/9;max-height:78vh}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;z-index:3}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 18px rgba(0,0,0,.28);pointer-events:none;z-index:4}
.ba-knob svg{width:20px;height:20px;color:var(--accent)}
.ba-tag{position:absolute;bottom:18px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(20,18,14,.5);backdrop-filter:blur(6px);padding:7px 13px;border-radius:999px;z-index:3;pointer-events:none}
.ba-tag.l{left:18px}.ba-tag.r{right:18px}

/* TRUST BAND — hero-width, no edge outlines, single middle divider */
.trust{background:var(--grey)}
.trust .wrap-wide{padding-block:34px}
.tst-trust .trust-stats{justify-content:center}
/* /reviews/ only: the strip above the CTA is light grey (dark until 23 Oct 2026) and taller, so it reads
   as its own band rather than a thin grey line (Siim, 25 Sep). */
.trust.tst-trust .wrap-wide{padding-block:clamp(52px,6vw,88px)}
.tst-trust .trust-stats{gap:clamp(40px,7vw,120px)}
.tst-trust .trust-stats .s{text-align:center}
.tst-trust .trust-stats .s .n{font-size:clamp(30px,3.2vw,44px)}
.trust-top{display:flex;justify-content:space-between;align-items:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.trust-stats{display:flex;gap:clamp(28px,3.4vw,48px)}
.trust-stats .s .n{font-family:var(--disp);font-size:24px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-0.03em}
.trust-stats .s .l{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.trust-geo{padding-left:0}
.trust-geo.right{text-align:right}
.trust-geo p{font-size:17.5px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;line-height:1.5;margin-bottom:0}
.trust-geo p.b1{font-weight:700}
.trust-geo p.b2{color:var(--muted);font-weight:500;margin-top:4px}
/* .trust-img: the same band over a render with the .pagecta scrim, for pages where the band
   would otherwise sit grey-on-grey against the next section (/pricing/, Siim 27 Sep).
   Colours match the homepage hero's proof band so the two dark versions read as one. */
.trust.trust-img{position:relative;overflow:hidden;background:var(--dark)}
.trust-img > img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.trust-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,16,.8),rgba(20,19,16,.88));z-index:1}
.trust-img .wrap-wide{position:relative;z-index:2;padding-block:clamp(48px,5.5vw,80px)}