/* e-3q: look E, the category standard, with the three-questions copy (copy-3q/draft-3.md). Version 3 of the website.
   Same look as e-old; what differs is marked "e-3q" below. */
/* Figtree (headings, buttons, navigation, labels) is preloaded and swaps in. Until it lands the stand-ins below show:
   the system bold sans scaled to Figtree's measured widths, one face per weight, with Figtree's own ascent and descent,
   so the swap does not move a line. Running text uses the system sans and never waits. */
@font-face{font-family:"Figtree";src:url("fonts/figtree.woff2") format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Figtree Fallback";font-weight:400 650;size-adjust:94.8%;ascent-override:100.3%;descent-override:26.4%;line-gap-override:0%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Roboto Bold"),local("Roboto-Bold"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold")}
@font-face{font-family:"Figtree Fallback";font-weight:651 750;size-adjust:95.8%;ascent-override:99.2%;descent-override:26.1%;line-gap-override:0%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Roboto Bold"),local("Roboto-Bold"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold")}
@font-face{font-family:"Figtree Fallback";font-weight:751 900;size-adjust:97.1%;ascent-override:97.8%;descent-override:25.7%;line-gap-override:0%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Roboto Bold"),local("Roboto-Bold"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold")}

:root{
  --purple:#5850ec; --purple-deep:#4038c9; --orange:#f5833c; --orange-deep:#ea7226;
  --ink:#16143a; --text:#3f3d5c; --muted:#5f5d7a;
  --paper:#fff; --tint:#f5f4fd; --tint-2:#eceafb; --line:#e0def2;
  --head:"Figtree","Figtree Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Liberation Sans",sans-serif;
  --r:12px;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --gutter:1.25rem; --wrap:1160px;
  /* the whole header: its 64 px row (72 px from 900 px) plus the 1 px line under it */
  --nav-h:65px;
  /* section padding from 900 px, scaling with the window: --sec is 72 px up to 1280 px wide and 96 px from 1440 px;
     --sec-s (hero, platforms strip, footer top) is 48 px up to 1280 px and 64 px from 1440 px */
  --sec:clamp(4.5rem,15vw - 7.5rem,6rem); --sec-s:clamp(3rem,10vw - 5rem,4rem);
  --shadow:0 1px 2px rgba(22,20,58,.06),0 10px 28px rgba(22,20,58,.08);
  --out:cubic-bezier(.16,1,.3,1);
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 1.0625rem/1.65 var(--body);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple);text-underline-offset:3px}
a:hover{color:var(--purple-deep)}
ul,ol{list-style:none;padding:0}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:4px}
::selection{background:#dcd9fb;color:var(--ink)}
section[id]{scroll-margin-top:88px}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--s4);top:var(--s3);background:var(--paper);padding:var(--s2) var(--s3);z-index:100;border-radius:var(--r)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* two wordings, as on the live site: .phone text shows under 760 px, .wide text from 760 px */
.wide{display:none}

/* type */
h1,h2,h3{font-family:var(--head);color:var(--ink);text-wrap:balance}
h2{font-weight:800;font-size:clamp(1.875rem,1.35rem + 2.2vw,2.625rem);line-height:1.12;letter-spacing:-.02em}
h3{font-weight:700;font-size:1.1875rem;line-height:1.3;letter-spacing:-.005em}
.accent{color:var(--purple)}
.lead{font-size:1.1875rem;line-height:1.6}
strong{color:var(--ink);font-weight:700}

/* buttons: orange, dark lettering */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-family:var(--head);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;color:var(--ink);background:var(--orange);border-radius:var(--r);padding:var(--s3) var(--s5);box-shadow:0 1px 2px rgba(22,20,58,.12);transition:background-color .2s var(--out),transform .2s var(--out),box-shadow .2s var(--out)}
.btn:hover{color:var(--ink);background:var(--orange-deep);transform:translateY(-1px);box-shadow:0 1px 2px rgba(22,20,58,.12),0 8px 18px rgba(22,20,58,.16)}
.btn:active{transform:none;box-shadow:0 1px 2px rgba(22,20,58,.12)}
.btn-lg{min-height:56px;font-size:1.0625rem;padding:var(--s4) var(--s6)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:64px}
.logo{margin-right:auto;border-radius:4px}
.logo img{width:108px}
.nav-cta{order:2;flex-direction:column;min-height:44px;padding:var(--s2) var(--s4);transition:background-color .25s var(--out),box-shadow .25s var(--out),color .2s var(--out),transform .25s var(--out)}
/* the bold label's width is always reserved, so the switch below never moves the neighbours */
.nav-cta::after{content:attr(data-text);height:0;overflow:hidden;visibility:hidden;font-weight:700}
/* while any part of the hero is on screen the header's Free Audit is a plain menu item; once the hero has left it becomes the
   orange button (.hero-out is set by the script; without script it is always the button) */
.js .site-header:not(.hero-out) .nav-cta,.js .site-header:not(.hero-out) .nav-cta:hover{background:none;box-shadow:none;font-weight:600;transform:none}
.js .site-header:not(.hero-out) .nav-cta:hover{color:var(--purple)}
.navtoggle{display:block;position:absolute;right:calc(var(--gutter) - 8px);top:50%;width:44px;height:44px;margin:-22px 0 0;opacity:0;cursor:pointer;z-index:2}
/* phone menu as on the live site: three bars with a short middle one; a full white screen with an X at top right; 18 px regular links */
.burger{order:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:44px;height:44px;margin-right:-8px;padding-right:13px;border-radius:var(--r)}
.burger span{width:18px;height:2px;background:var(--ink)}
.burger span:nth-child(2){width:12px}
.navtoggle:focus-visible+.burger{outline:3px solid var(--purple);outline-offset:0}
.nav{position:fixed;inset:0;z-index:60;background:#fff;padding:80px 16px 128px;overflow-y:auto;visibility:hidden}
.navtoggle:checked~.nav{visibility:visible}
.navtoggle:checked{position:fixed;right:16px;top:16px;width:48px;height:48px;margin:0;z-index:61}
.nav-x{position:absolute;right:16px;top:30px;width:20px;height:20px;color:#000}
.nav-x svg,.chev{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navtoggle:checked:focus-visible~.nav .nav-x{outline:3px solid var(--purple);outline-offset:8px;border-radius:4px}
.nav a,.nav summary{display:block;font:400 18px/23.4px var(--body);color:#000;text-decoration:none;padding:8px 36px 8px 6px}
.nav>a,.nav-group{margin-bottom:30px}
.nav-flat{display:none!important}
.nav summary{position:relative;list-style:none;cursor:pointer}
.nav summary::-webkit-details-marker{display:none}
.chev{position:absolute;right:5px;top:50%;width:14px;height:14px;margin-top:-7px;stroke-width:3}
.nav-group[open] .chev{transform:rotate(180deg)}
.nav-group a{padding:8px 16px;margin-left:16px}
.nav a:hover,.nav summary:hover{color:var(--purple)}
@media (max-width:899.98px){html:has(.navtoggle:checked){overflow:hidden}}

/* hero */
/* the white header sits over the white hero, so the hero gets the header's height again below (Tazio, 2026-10-01) */
.hero{padding-block:var(--s6) calc(var(--s7) + var(--nav-h))}
.hero-grid{display:grid;gap:var(--s7)}
.eyebrow{font-weight:700;font-size:.8125rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-wrap:wrap}
.eyebrow span{display:block;white-space:nowrap}
.hero-heading{font-size:clamp(2.25rem,1.3rem + 4.4vw,3.75rem);line-height:1.05;letter-spacing:-.025em;margin-top:var(--s3)}
.hero .lead{margin-top:var(--s5);max-width:34rem}
/* e-3q: the homepage headline is two sentences; the second (purple) always starts its own line.
   (.hero-heading--split and .steps--names are homepage-only hooks: this stylesheet is shared with the other pages, which must not change) */
.hero-heading--split .accent{display:block}
.hero .btn-lg{margin-top:var(--s6);width:100%}
/* the audit report cover, framed and set at a slant; never wider than its 390 px file */
.hero-media{display:flex;justify-content:center;align-items:center;padding-block:var(--s3) var(--s5)}
.hero-cover{width:min(62%,230px);background:#fff;border-radius:var(--r);padding:var(--s2);box-shadow:0 2px 4px rgba(22,20,58,.14),0 18px 40px rgba(22,20,58,.2);transform:rotate(5deg)}
.hero-cover img{border-radius:8px;width:100%}

/* sections */
.section{padding-block:var(--s8)}
.section-tint{background:var(--tint)}
.section-head{max-width:44rem;margin-inline:auto;text-align:center}
.section-head .lead{margin-top:var(--s4)}
.section-cta{margin-top:var(--s7);text-align:center}
.section-cta .btn{width:100%}
.split{display:grid;gap:var(--s7);align-items:center}
.split-copy h2+p{margin-top:var(--s5)}
.split-copy p+p{margin-top:var(--s4)}
.split-copy p{max-width:36rem}

/* e-3q: the three questions. One white row per question: the question on the left, what we set up on the right */
/* the section's heading may take the full width, so it stays on one line on desktop */
.questions .section-head{max-width:none}
.q-list{display:grid;gap:var(--s4);margin-top:var(--s7)}
.q{display:grid;gap:var(--s5);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.q-n{font-family:var(--head);font-weight:700;font-size:.8125rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
/* the questions fill each line instead of balancing them (Tazio, 2026-10-02: "visitors" belongs on the first line). So that a
   line does not end up with one word: `pretty` where the browser knows it, and "for you?" and "first time?" are tied in the page */
.q h3{font-weight:800;font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);line-height:1.15;letter-spacing:-.02em;margin-top:var(--s2);text-wrap:wrap;text-wrap:pretty}
.q-ask p:not(.q-n){margin-top:var(--s3);max-width:34rem}
.q-setup{border-top:1px solid var(--line);padding-top:var(--s5)}
.q-label{font-family:var(--head);font-weight:700;font-size:1rem;line-height:1.4;color:var(--ink)}
/* each line is the tick and ONE span of text (a bare text node beside an inline element would split into two grid items) */
.setup li{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);align-items:start;margin-top:var(--s3);line-height:1.5}
.setup svg{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--tint-2);color:var(--purple-deep)}
/* "Optional:" one step heavier than the line (Tazio, 2026-10-02); 600 because most system faces have no 500 */
.opt{font-weight:600}
.q-note{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);font-size:.9375rem;line-height:1.55;color:var(--muted)}
/* the reveal of a row (classes set by the script after the list): is-blank = the row's size with nothing in it; is-ask = the
   label and the question alone, scaled up from their final place to the row's width (--big, measured by the script), so the
   lines break exactly as in the final size; is-open = everything in place. One row at a time (the script waits a second
   after the row before has opened). Phones and reduced motion never get these classes. */
@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  .q-ask{transform-origin:0 0;transition:transform .7s var(--out),opacity .35s var(--out)}
  .q-ask p:not(.q-n),.q-setup{transition:opacity .45s var(--out) .35s}
  .q.is-blank .q-ask,.q.is-blank .q-setup{opacity:0;transition:none}
  .q.is-ask .q-ask{transform:scale(var(--big,1))}
  .q.is-ask .q-ask p:not(.q-n),.q.is-ask .q-setup{opacity:0;transition:none}
}

.q-after{max-width:44rem;margin:var(--s7) auto 0;text-align:center}
.q-after+.section-cta{margin-top:var(--s6)}

/* testimonials */
.case-title{font-family:var(--head);font-weight:700;font-size:1.1875rem;line-height:1.3;color:var(--purple)}
.split-copy .case-title+p{margin-top:var(--s2)}
.videos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start;width:100%} /* e-3q: a set width, so the block has its size before its lazy pictures load */
.video-thumb .frame{position:relative}
.video-thumb{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--paper)}
.video-thumb figcaption{padding:var(--s3);font-size:.9375rem;line-height:1.45;color:var(--text)}
.video-thumb img{width:100%;aspect-ratio:352/622;object-fit:cover}
.video-link{display:block}
.video-link:focus-visible{outline-offset:-4px}
.video-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* slightly see-through, as on the live site (opacity .75 there) */
.play{position:absolute;inset:0;margin:auto;opacity:.75;width:60px;height:44px;border-radius:var(--r);background:var(--orange);display:grid;place-items:center;box-shadow:0 6px 18px rgba(22,20,58,.3);transition:background-color .25s var(--out)}
.play::before{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:3px}
/* with a mouse only: the orange turns to the logo purple, still see-through */
@media (hover:hover) and (pointer:fine){.video-thumb:hover .play{background:var(--purple)}}

/* services */
.cards{display:grid;gap:var(--s4);margin-top:var(--s7)}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);transition:border-color .2s var(--out),box-shadow .2s var(--out),transform .2s var(--out)}
.card p{margin-top:var(--s2);font-size:1rem;line-height:1.6}
.card h3 a{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);color:var(--purple);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card h3 a:focus-visible{outline:0}
.card h3 a:focus-visible::after{outline:3px solid var(--purple);outline-offset:3px}
.arrow{flex:none;width:20px;height:20px;margin-top:.15em;transition:transform .2s var(--out)}
.card-link:hover{border-color:var(--purple);box-shadow:var(--shadow);transform:translateY(-2px)}
.card-link:hover .arrow{transform:translateX(3px)}

/* process */
.steps{display:grid;gap:var(--s6);margin-top:var(--s7);counter-reset:none}
.steps li{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:var(--s4);align-items:start}
.step-n{grid-row:1 / span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--tint-2);font-family:var(--head);font-weight:800;font-size:1.25rem;line-height:1;color:var(--purple-deep)}
.steps h3{align-self:end;padding-top:.3rem}
.steps p{grid-column:2;margin-top:var(--s1);font-size:1rem;line-height:1.55}
.steps li:not(:last-child)::before{content:"";position:absolute;left:23px;top:56px;bottom:calc(-1 * var(--s6) + 8px);width:2px;background:var(--tint-2)}
/* e-3q: the steps sit on the tinted ground (two white sections would meet otherwise), so the discs are white with a line */
.section-tint .step-n{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.section-tint .steps li:not(:last-child)::before{background:var(--line)}
/* e-3q: under 760 px a step is its name only (the live phone page shows headings without descriptions), centred on its disc */
@media (max-width:759.98px){.steps--names h3{grid-row:1 / span 2;align-self:center;padding-top:0}}

/* audit: the one full purple section */
.audit{background:var(--purple);color:#fff}
.audit h2{color:#fff}
.audit .accent{color:#fff;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:4px;text-underline-offset:6px;text-decoration-skip-ink:none}
.audit :focus-visible{outline-color:#fff}
.audit ::selection{background:#fff;color:var(--purple-deep)}
.ticks{display:grid;gap:var(--s3);margin-top:var(--s5)}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);align-items:start;font-family:var(--head);font-weight:600;font-size:1.0625rem;line-height:1.5}
.ticks svg{width:28px;height:28px;padding:5px;border-radius:50%;background:#fff;color:var(--purple-deep)}
.audit .btn-lg{margin-top:var(--s6);width:100%}
.report{justify-self:center;width:min(100%,300px);background:#fff;border-radius:var(--r);padding:var(--s2);box-shadow:0 2px 4px rgba(22,20,58,.2),0 18px 40px rgba(22,20,58,.28)}
.report img{border-radius:8px;width:100%}

/* platforms */
.platforms{padding-block:var(--s7)}
.platforms-label{font-family:var(--head);font-weight:700;font-size:.8125rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
/* e-3q: three logos (what the offer covers) in one tone, never larger than their files, one static row; not shown under 760 px */
.logos{display:grid;grid-template-columns:repeat(6,1fr);justify-items:center;align-items:center;gap:var(--s5) var(--s3);margin-top:var(--s5)}
.logos li{grid-column:span 3}
.logos li:nth-child(n+3):nth-child(-n+5){grid-column:span 2}
.logos img{filter:brightness(0);opacity:.5}

/* faqs: native details, all open from 760 px (the page ships them open); a one-line script closes them on phones */
.faq-list{max-width:48rem;margin:var(--s7) auto 0;display:grid;gap:var(--s3)}
.faq-list details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:60px;padding:var(--s3) var(--s5);font-family:var(--head);font-weight:700;font-size:1.0625rem;line-height:1.35;color:var(--ink);cursor:pointer;list-style:none;border-radius:var(--r)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2.5px solid var(--purple);border-bottom:2.5px solid var(--purple);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--out)}
.faq-list details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq-list summary:hover{color:var(--purple)}
.faq-list details p{padding:0 var(--s5) var(--s5);max-width:42rem}
.faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--out),content-visibility .35s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}
.more-q{margin-top:var(--s6);text-align:center;font-weight:600}
.more-q a{display:inline-flex;align-items:center;min-height:44px}

/* closing panel */
.final{padding-block:var(--s8)}
.final-panel{background:var(--ink);border-radius:var(--r);padding:var(--s7) var(--s5);text-align:center}
.final-panel h2{color:#fff;max-width:36rem;margin-inline:auto}
.final-panel .btn-lg{margin-top:var(--s6);width:100%}
.final-panel :focus-visible{outline-color:#fff}

/* footer */
.site-footer{background:var(--tint);border-top:1px solid var(--line);padding-block:var(--s7) var(--s5);font-size:.9375rem}
/* no footer link ever breaks onto two lines. Phones: two columns a row, Services beside Legal and Tools beside Company (the
   pairs that fit), the right-hand one set against the right edge. From 700 px: four columns as wide as their longest link,
   spread over the full width, so Company ends on the grid edge. */
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:var(--s4)}
.footer-brand{flex:0 0 100%}
.footer-col{flex:1 1 auto;margin-top:var(--s6)}
.footer-grid::after{content:"";order:2;flex:0 0 100%}
.footer-col:nth-child(2){order:1}
.footer-col:nth-child(4){order:2;text-align:right}
.footer-col:nth-child(3){order:3}
.footer-col:nth-child(5){order:4;text-align:right}
.footer-brand img{width:132px}
.footer-tag{margin-top:var(--s3);max-width:22rem;color:var(--muted)}
.footer-col h2{font-weight:700;font-size:.8125rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--s2)}
.footer-col a{display:block;padding-block:.5rem;line-height:1.5rem;color:var(--text);text-decoration:none;white-space:nowrap}
.footer-col a:hover{color:var(--purple);text-decoration:underline}
.footer-legal{margin-top:var(--s6)}
.footer-legal p{border-top:1px solid var(--line);padding-top:var(--s5);color:var(--muted);font-size:.875rem}

@media (min-width:640px){
  :root{--gutter:2rem}
  .hero .btn-lg,.audit .btn-lg,.final-panel .btn-lg,.section-cta .btn{width:auto}
  .eyebrow span{display:inline}
  .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5) var(--s7);max-width:640px;margin-inline:auto}
  .cards{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .card{padding:var(--s6)}
  .q{padding:var(--s6)}
  .videos{gap:var(--s5);max-width:29rem}
  .steps{grid-template-columns:1fr 1fr}
  .steps li:not(:last-child)::before{display:none}
  .final-panel{padding:var(--s8) var(--s7)}
}

@media (min-width:700px){
  .footer-grid{display:grid;grid-template-columns:repeat(4,max-content);gap:var(--s6) var(--s5)}
  .footer-grid::after{display:none}
  .footer-brand{grid-column:1 / -1}
  .footer-col:nth-child(n){order:0;text-align:left;margin-top:0}
}

@media (min-width:760px){
  .wide{display:revert}
  .phone{display:none}
  .hero{padding-block:var(--s7) calc(var(--s7) + var(--nav-h))}
  .hero-grid{grid-template-columns:7fr 5fr;gap:var(--s6);align-items:center}
  .hero-media{padding-block:0}
  .hero-cover{width:min(86%,330px)}
  /* e-3q: beside the picture the longer headline grows with its column: 40 px at 760 px wide, 60 px from 1280 px */
  .hero-heading--split{font-size:clamp(2.5rem,.6rem + 4vw,3.75rem)}
  .split{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .videos{justify-self:end}
}

@media (min-width:900px){
  .header-inner{min-height:72px;gap:var(--s6)}
  .logo img{width:124px}
  .navtoggle,.burger{display:none}
  .nav{position:static;display:flex;flex-direction:row;gap:var(--s6);padding:0;background:none;overflow:visible;visibility:visible}
  .nav>a{display:flex;align-items:center;min-height:44px;font:600 1rem/1.2 var(--head);color:var(--ink);padding:0;margin:0}
  .nav-flat{display:flex!important}
  .nav-group,.nav-x{display:none}
  .nav-cta{order:0}
  /* as a plain item it lines up like the others: 32 px after FAQs, its last letter on the grid edge */
  .nav{transition:transform .25s var(--out)}
  .js .site-header:not(.hero-out) .nav{transform:translateX(var(--s6))}
  .js .site-header:not(.hero-out) .nav-cta,.js .site-header:not(.hero-out) .nav-cta:hover{transform:translateX(var(--s4))}
  :root{--nav-h:73px}
  .hero{padding-block:var(--sec-s) calc(var(--sec-s) + var(--nav-h))}
  .hero-grid{gap:var(--s7)}
  .section{padding-block:var(--sec)}
  .split{grid-template-columns:5fr 7fr;gap:var(--s8)}
  .split-case{grid-template-columns:6fr 6fr}
  .split-audit{grid-template-columns:7fr 5fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .q-list{gap:var(--s5)}
  /* the question column is wide enough for two lines on desktop (450 px at 1440); the space between the two columns is 2 x --qg, the line in its middle */
  .q{--qg:clamp(1.5rem,4vw - .75rem,3rem);grid-template-columns:9fr 10fr;gap:var(--qg);padding:clamp(2rem,4vw - .25rem,3rem)}
  .q-setup{border-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:var(--qg)}
  .steps{grid-template-columns:repeat(4,1fr);gap:var(--s6)}
  .steps li{display:block}
  .step-n{margin-bottom:var(--s4)}
  .steps h3{padding-top:0}
  .steps li:not(:last-child)::before{display:block;left:56px;right:calc(-1 * var(--s6));top:23px;bottom:auto;width:auto;height:2px}
  .platforms{padding-block:var(--sec-s)}
  .logos{max-width:none}
  .final{padding-block:var(--sec)}
  .footer-grid{grid-template-columns:minmax(0,22rem) repeat(4,max-content);gap:var(--s6)}
  .footer-brand{grid-column:auto}
  .site-footer{padding-block:var(--sec-s) var(--s5)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}