/* The simpler structure, 2 Nov 2026, as revised 3 Nov: the sections on the home page (the What-we-do band's film card, the BISMO window, the onboarding
   steps) and the gear-genesis hero on automation.html. Everything uses the tokens redesign.css sets (paper, ink, rust,
   Fraunces RD, Work Sans). Nothing here restyles the hero, quote form, founders or reviews, which are copied unchanged from
   the live page. Motion lives in v2.js; with no JavaScript or with reduced motion every section shows its finished state.
   The new sections carry the live .rd class for its tokens, so paragraph margins and heading em colours are written as
   .rd .v2-* to outrank redesign.css's bare .rd p {margin:0} and .rd h2 em {color:inherit}. */
.v2-kick,.rd .v2-kick{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:600 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.v2-kick::before{content:"";flex:none;width:28px;height:1.5px;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--k,1))}
.v2-h{margin:0;max-width:18ch;font-family:var(--f-display);font-weight:400;font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.06;letter-spacing:-.02em;font-variation-settings:"opsz" 144;color:var(--ink)}
.v2-h em,.rd .v2-h em{font-style:italic;font-weight:350;color:var(--rust)}
.v2-sub,.rd .v2-sub{margin:20px 0 0;max-width:52ch;font-size:1.12rem;line-height:1.55;color:var(--ink-2)}
.v2-head{margin-bottom:clamp(36px,5vw,64px)}
.v2-link{font:600 1rem var(--f-body);color:var(--rust);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:color .25s var(--ease)}
.v2-link:hover{color:var(--ink)}
.v2-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.v2-links{display:flex;flex-wrap:wrap;gap:12px 24px}


/* ---------- 3. What we do: the live page's four-card band (redesign.css lays it out, redesign.js slides it) ----------
   Only the first card differs: its art is a figure that plays the Kling ink drop instead of a stroked sketch, then the crisp webp
   fades over the clip's last frame. The figure carries .pxl only so motion.min.js leaves it alone, so the hover scale and
   transition that class brings are undone here. The heading reuses the v2 kicker and heading inside the live .rd-head. */
.rd-myths-section .v2-head{margin-bottom:0}
.rd-myths-section .v2-kick,.rd .rd-myths-section .v2-kick{color:var(--ink)}
.rd-myth__film{position:absolute;inset:0;margin:0;overflow:hidden;background:#F7F1E5;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.rd-myth.is-open .rd-myth__film{transform:scale(1)}
.rd-myth__film img,.rd-myth__film video,.pxl.rd-myth__film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;background:transparent;transition:none;transform:none}
.rd-myth__vid{z-index:0}
.rd-myth__film .rd-myth__still{z-index:1;opacity:1;transition:opacity .9s var(--ease)}
/* Armed by v2.js (it has the clip, IntersectionObserver and motion): the still waits hidden until the clip ends, fails or
   stalls (is-done). Not armed: the still simply shows and the clip is never loaded. */
.rd-myth__film.is-armed .rd-myth__still{opacity:0}
.rd-myth__film.is-armed.is-done .rd-myth__still{opacity:1}
@media (prefers-reduced-motion:reduce){.rd-myth__film{transition:none}}


/* ---------- 4. How BISMO works: the glass window (crm-window.css styles the window itself) ---------- */
.v2-crm{position:relative;overflow:hidden;isolation:isolate;padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px)}
.v2-crm .cg{padding-top:0;padding-bottom:0}
.v2-head--crm{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 40px;margin-bottom:28px}
.v2-head--crm::before{content:"";position:absolute;left:-40px;top:-30px;width:min(780px,72vw);height:calc(100% + 60px);background:radial-gradient(ellipse 60% 60% at 40% 50%,rgba(242,233,214,.94),rgba(242,233,214,.72) 55%,transparent 100%);pointer-events:none}
.v2-head--crm>*{position:relative;grid-column:1}
.v2-head--crm .cg-controls{grid-column:2;grid-row:1/4;align-self:end}
.v2-crm .cg-stage{transform-origin:50% 0}
.v2-crm .cg-foot{max-width:60ch;margin:18px auto 0}
.v2-mark{display:block;margin-top:6px;font:italic 400 1.05rem var(--f-display);color:var(--rust)}
.v2-crm__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
@media (max-width:720px){
  .v2-head--crm{display:block}
  .v2-head--crm::before{left:-14px;width:100vw}
  .v2-head--crm .cg-controls{margin-top:18px}
}

/* ---------- 5. How we onboard you ---------- */
.v2-start{position:relative;padding:clamp(64px,9vw,124px) 0}
.v2-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none;--p:1}
.v2-steps::before,.v2-steps::after{content:"";position:absolute;top:27px;left:28px;right:calc((100% - 84px) / 4 - 28px);height:1.5px}
.v2-steps::before{background:var(--line)}
.v2-steps::after{background:var(--rust);transform-origin:0 50%;transform:scaleX(var(--p))}
.v2-steps li{position:relative;z-index:1}
.v2-steps__n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--rust);background:var(--rust);color:#FFF8EE;font:400 1.5rem/1 var(--f-display);transition:transform .55s cubic-bezier(.34,1.56,.64,1),background-color .35s,color .35s,border-color .35s}
.v2-steps.is-live li:not(.is-on) .v2-steps__n{transform:scale(.84);background:var(--paper);border-color:rgba(42,31,10,.28);color:var(--ink-3)}
.v2-steps h3{margin:20px 0 8px;font:400 1.45rem/1.15 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.rd .v2-steps p{margin:0;max-width:30ch;line-height:1.6;color:var(--ink-2)}
.rd .v2-start__price{margin:44px 0 22px;font:italic 400 clamp(1.2rem,2vw,1.45rem)/1.35 var(--f-display);color:var(--ink)}
@media (max-width:860px){
  .v2-steps{grid-template-columns:minmax(0,1fr);gap:30px}
  .v2-steps::before,.v2-steps::after{top:28px;bottom:28px;left:27px;right:auto;width:1.5px;height:auto}
  .v2-steps::after{transform-origin:50% 0;transform:scaleY(var(--p))}
  .v2-steps li{padding-left:78px;min-height:56px}
  .v2-steps__n{position:absolute;left:0;top:0}
  .v2-steps h3{margin-top:12px}
}


/* ---------- automation-v2: the gear-genesis hero ---------- */
.v2-ag-hero__copy{max-width:780px}
.v2-gg{position:relative;margin:clamp(12px,2vw,28px) 0 0}
/* Without JavaScript the static engraving shows; once gear-genesis.js runs it marks the figure is-live and the canvas takes over */
.v2-gg__still{display:block;width:100%;height:auto}
.v2-gg.is-live .v2-gg__still{display:none}
.v2-gg__stage{display:none;position:relative;width:100%;aspect-ratio:1290/600}
.v2-gg.is-live .v2-gg__stage{display:block}
.v2-gg__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:640px){.v2-gg__stage{aspect-ratio:1290/720}}
/* Kling film variant of the hero: the clip's paper is darkened onto the page paper, so only the ink lands */
.v2-gg--film .v2-gg__film{display:block;width:100%;height:auto;aspect-ratio:16/9;mix-blend-mode:darken;filter:brightness(1.05);clip-path:inset(0 2px 0 0)}
/* SEO run, 3 Nov: the still shows first (it is the page's LCP image, discoverable by the preload scanner) and hides only
   once the clip is playing (figure.is-live, set by gear-film.js on the "playing" event). Same blend as the film. */
.v2-gg--film .v2-gg__still{display:block;mix-blend-mode:darken;filter:brightness(1.05)}
.v2-gg--film .v2-gg__film{position:absolute;inset:0;opacity:0}
.v2-gg--film.is-live .v2-gg__film{position:static;opacity:1}
.v2-gg--film.is-live .v2-gg__still{display:none}
.v2-gg--film.is-still .v2-gg__film{display:none}
.v2-gg--film.is-still .v2-gg__still{display:block}
@media (prefers-reduced-motion:reduce){.v2-gg--film .v2-gg__film{display:none}.v2-gg--film .v2-gg__still{display:block}}
/* The film figure carries .pxl only so motion.min.js leaves it alone; undo the clip and hover scale that class brings */
.v2-gg--film.pxl{overflow:visible}
/* Jack, 3 Nov: the hand takes more of the hero. The art column widens and the figure runs past it on both sides; the clip's
   paper darkens into the page paper, so the overrun shows only ink. */
@media (min-width:981px){
  .v2-ag-hero .ag-hero__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,3vw,3rem)}
  .v2-ag-hero__art .v2-gg{width:116%;max-width:none;margin:clamp(12px,2vw,28px) -12% 0 -4%}
  /* the clip frames the hand with paper around it: scale the frame so the hand itself fills the column */
  .v2-ag-hero__art .v2-gg--film .v2-gg__film,.v2-ag-hero__art .v2-gg--film .v2-gg__still{transform:scale(1.22);transform-origin:50% 46%}
}
.v2-gg--film.pxl img{transition:none;transform:none}
/* The CRM window's brand mark: the emblem on its own, sized to the 30px tile it replaces, no tile behind it */
.crm img.crm__logo,.crm[data-btn] img.crm__logo{width:auto;height:30px;padding:0;border-radius:0;background:none;object-fit:contain}