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


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Elementor content renders inside our pages (the quote popup), and display:block
   on its inline icon images is a real difference. Excluding WordPress's own
   attachment-* classes too would be over-reach: content images need max-width. */
img:not([class*="elementor"]){max-width:100%;display:block}
/* Full-bleed idiom, used by every edge-to-edge image section on this page.
   Only valid on an element whose containing block spans the full .wrap content
   box (a direct child of .wrap, or of a single-column flex/grid inside it) —
   on a grid ITEM the 50% resolves against the column, not the page. */
.bleed{width:var(--bleed);max-width:none;margin-left:calc(50% - var(--bleed)/2)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);text-wrap:balance}
h1,h2{font-weight:650;line-height:1.0;letter-spacing:-0.024em}
h3,h4{font-weight:700;line-height:1.02;letter-spacing:-0.03em}
.eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;display:inline-block}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding-inline:var(--gut)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;padding:16px 32px;border-radius:999px;transition:.25s ease;cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
.btn-p{background:var(--accent);--btn-fg:#fff;color:#fff;border-color:var(--accent)}
.btn-p:hover,.btn-p:focus{background:var(--accent-d);border-color:var(--accent-d)}
.btn-g{background:transparent;--btn-fg:var(--ink);color:var(--ink);border-color:var(--ink)}
/* Solid black, the header CTA's scrolled look, for a secondary action that should still weigh something. */
.btn-d{background:var(--ink);--btn-fg:#fff;color:#fff;border-color:var(--ink)}
/* Outline buttons take a faint wash of their own colour and KEEP their text colour.
   They used to invert to a solid fill, which made the outline buttons behave completely
   differently from the solid ones (which merely darken) — five button types, five
   different hovers. One rule now: solid darkens, outline washes. */
.btn-g:hover,.btn-g:focus{background:var(--wash-lt)}
.btn-d:hover,.btn-d:focus{background:#2C2B28;border-color:#2C2B28}
.btn-l{background:#fff;--btn-fg:var(--ink);color:var(--ink);border-color:#fff}
.btn-l:hover,.btn-l:focus{background:var(--wash-lt)}
.btn-gold{background:var(--accent);--btn-fg:#1a140c;color:#1a140c;border-color:var(--accent)}
.btn-gold:hover,.btn-gold:focus{background:var(--accent-d);border-color:var(--accent-d)}
/* buyer's-guide button — white text, always visible on dark card */
.btn-guide{background:var(--accent);--btn-fg:#fff!important;color:#fff!important;border-color:var(--accent)}
.btn-guide:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn svg{width:16px;height:16px}
.tlink{color:inherit;font-weight:600;border-bottom:1px solid rgba(200,16,46,.45);transition:border-color .2s}
.tlink:hover{border-color:var(--accent)}
/* Header over a dark full-bleed hero (Siim, 26 Sep 2026). Opt-in: a page whose hero carries
   data-head-over gets body.head-over from inc/head-over.php (server side, so no white flash).
   The chrome script sets --hp from 0 (transparent, over the video) to 1 (the normal frosted bar)
   over the first 220px of scroll (Siim: a little longer), eased, and TIED TO THE SCROLL POSITION: stop halfway and the
   bar stays halfway; scroll back and it reverses. Every value below is a blend on --hp, and at
   --hp:1 each equals the normal header exactly, so the hand-over is seamless.
   At the top: soft dark fade, white logo/links, outline CTA (the red hero button is the only
   filled CTA). Hover keeps the bar transparent; link hover is a quiet dim over the video and red
   once solid (Siim, 26 Sep). */
/* --ht: the text/logo blend. It holds white while the bar fades in, then crosses over between
   --hp .4 and .6, so the menu never sits grey-on-grey in the middle of the scroll. */
body.head-over{--hp:0;--ht:clamp(0, (var(--hp) - .4) / .2, 1)}
/* /tools/ai-render/ (26 Oct 2026): "works with" software strip, hero proof, image step cards, compact link list. */
section.works-strip{padding-block:clamp(28px,3vw,40px);border-bottom:1px solid var(--hair)}
.works-strip .ws-line{margin:0 0 16px;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink)}
.works-strip .ws-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(22px,3.2vw,44px)}
.works-strip .ws-logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:clamp(16px,1.5vw,19px);font-weight:650;letter-spacing:-.01em;color:#77736a}
.works-strip .ws-logo img{width:24px;height:24px}
.works-strip .ws-note{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.hero-proof{margin-top:18px}
.step-img{margin:-6px 0 20px;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#f4f2ee;border:1px solid var(--hair)}
.step-img img{display:block;width:100%;height:100%;object-fit:cover}
.step-img.contain img{object-fit:contain}
.pair-img{margin:-6px 0 20px;border-radius:10px;overflow:hidden;border:1px solid var(--hair);position:relative}
.pair-img img{display:block;width:100%;height:auto}
.pair-img .pl{position:absolute;top:10px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(20,18,14,.55);padding:4px 9px;border-radius:999px}
.pair-img .pl.l{left:10px}.pair-img .pl.r{left:calc(50% + 10px)}
.wide-shot{max-width:980px;margin:0 auto 26px;border-radius:12px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 20px 50px -30px rgba(20,19,16,.35)}
.wide-shot img{display:block;width:100%;height:auto}
.checks.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;max-width:900px;margin:0 auto}@media(max-width:700px){.checks.two-col{grid-template-columns:1fr}}
.link-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:15.5px}
.strip-line{max-width:760px;margin:0 auto;text-align:center;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--body)}
.strip-line b{color:var(--ink)}
/* The site logo is already visible in the header behind the drawer, so the drawer
   carries only the close button. */
.m-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:20px}
.m-close{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);padding:4px 8px}

/* HERO — wider media, tighter gap, social-proof row */
.hero{background:var(--white)}
/* Hero is a full-bleed band: the media reaches the right viewport edge and sits
   flush top and bottom, while the copy keeps its gutter. That inset/no-inset
   contrast is what makes the render read large (same trick cylind.com uses). */
.hero-inner{max-width:none;margin:0;padding-inline:0;padding-block:0}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Grey, not red (Siim, 27 Sep): the crumb carries .eyebrow, whose red colour it overrides here. */
.eyebrow.crumb{color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.crumb span[aria-hidden]{color:var(--faint);font-weight:400}
.crumb span[aria-current]{color:var(--muted)}
.hero h1{font-size:clamp(34px,4.3vw,52px);font-weight:650;letter-spacing:-0.024em;line-height:1.0;margin:12px 0 18px;max-width:none}
.hero h1 .h1-lite{font-weight:400;letter-spacing:-0.02em}
/* Was italic + gold + bold(700): a third H1 style on top of the bold/regular pair
   already carried by the two clauses. Neutralised so the emphasised word just
   reads as part of the regular-weight clause -- bold and non-bold, nothing else. */
.hero h1 em{font-style:normal;font-weight:inherit;color:inherit}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,2.8vw,44px);align-items:stretch}
.hero-txt{padding-left:var(--edge-vp);padding-block:clamp(28px,2.8vw,52px);max-width:calc(var(--measure) + var(--edge-vp));align-self:center;min-width:0}
.hero-sub{font-size:19px;color:var(--muted);max-width:48ch;margin-bottom:26px;line-height:1.55}
.hero .eyebrow{margin-bottom:12px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.hero-btns .btn{padding:14px 22px;font-size:13.5px;letter-spacing:.03em;gap:7px}
.hero-btns .btn svg{width:15px;height:15px}@media(max-width:600px){.hero-btns{flex-direction:column;align-items:stretch}.hero-btns .btn{width:100%;justify-content:center}}
.hero-scarce{margin-top:16px}
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero-avatars{display:flex}
/* Bare-img fallback, kept so any avatar row that has not been wrapped still renders. */
.hero-avatars img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-9px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.hero-avatars img:first-child{margin-left:0}