/*
 * Site chrome v3 (MKT-200 R2a): the Figma "New Nav" header (six mega menus, tablet drawer,
 * phone burger) and the "New Footer" (Discover more, six tabs, bottom container).
 * Markup: template-parts/site/v3/*.php. Behaviour: assets/js/chrome-v3.js.
 * Every selector is rooted in a wcn- class; the scoped reset keeps the Webflow element rules and
 * the self-contained documents' own element rules out of the chrome.
 * Tokens: skills/wildcodes-design (blue #0372FF, green #28EA9B, ink #141414). Figma drift kept
 * on purpose: bar 72/60px like the live header (Figma 96/80/64), so no page shifts.
 * Rollback: define( 'WILDCODES_CHROME', 'v2' ).
 */
@font-face { font-family: "WCN NeueBit"; src: url("../fonts/67a0b3464ea6bff09372a813_63fbd8e73efb720a934f2a43_NeueBit-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "WCN Work Sans"; src: url("../fonts/63fe7c6927a5dcce96187905_WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "WCN Work Sans"; src: url("../fonts/63fe7c69119dcf4b6c40dda4_WorkSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "WCN Work Sans"; src: url("../fonts/63fe7c690e2a3aa4f9d6cb3d_WorkSans-Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

.wcn-hdr, .wcn-foot, .wcn-skip, .wcn-scrim, .wcn-anchor {
  --wcn-blue: #0372FF; --wcn-blue-d: #005ACC; --wcn-green: #28EA9B; --wcn-ink: #141414; --wcn-hot: #FBBC05;
  --wcn-line: #2b2b2b; --wcn-line-2: rgba(255,255,255,.14); --wcn-grey: #8c8c8c; --wcn-soft: #c1c1c1;
  --wcn-display: "WCN NeueBit", "WCN Work Sans", system-ui, sans-serif;
  --wcn-text: "WCN Work Sans", system-ui, sans-serif;
  --wcn-hdr-h: 72px; --wcn-in: 1040px; --wcn-gutter: clamp(1rem, 4vw, 2rem); --wcn-drawer: min(424px, 56vw);
  box-sizing: border-box; font: 400 16px/1.5 var(--wcn-text); color: #fff; letter-spacing: normal; text-align: left;
  text-transform: none; -webkit-font-smoothing: antialiased; cursor: auto;
}
/* scoped reset: one class of specificity beats every Webflow / document element rule */
.wcn-hdr :where(*), .wcn-foot :where(*) { box-sizing: border-box; }
.wcn-hdr :where(ul, ol, li, p, a, button, nav, div, span, b, i, small, img, svg, input, label, section),
.wcn-foot :where(ul, ol, li, p, a, button, nav, div, span, b, i, small, img, svg, input, label, section) {
  margin: 0; padding: 0; border: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  text-transform: inherit; text-decoration: none; background: none; list-style: none; max-width: none; min-width: 0; box-shadow: none;
}
.wcn-hdr :where(img, svg), .wcn-foot :where(img, svg) { display: block; object-fit: contain; height: auto; flex: none; }
.wcn-hdr li, .wcn-foot li:not(.wcn-dcard) { padding: 0 !important; background-image: none !important; list-style: none !important; }
.wcn-hdr ul, .wcn-foot ul { list-style: none !important; }
.wcn-foot li.wcn-dcard { padding: 32px !important; background-image: none !important; list-style: none !important; }
.wcn-hdr :where(button), .wcn-foot :where(button) { cursor: pointer; -webkit-appearance: none; appearance: none; text-align: inherit; }
.wcn-hdr [hidden], .wcn-foot [hidden] { display: none !important; }
.wcn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wcn-accent { color: var(--wcn-blue); }
.wcn-ico { width: 24px; height: 24px; }
.wcn-hdr :focus-visible, .wcn-foot :focus-visible { outline: 2px solid var(--wcn-green); outline-offset: 2px; }

/* skip link */
.wcn-skip { position: absolute; z-index: 2147483001; left: 1rem; top: -100px; padding: .7rem 1rem; background: #fff; color: #000; font-weight: 600; text-decoration: none; outline: 2px solid var(--wcn-green); }
.wcn-skip:focus { top: 1rem; }
.wcn-anchor { display: block; height: 0; scroll-margin-top: calc(var(--wcn-hdr-h) + 8px); outline: none; }

/* buttons */
.wcn-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: 0 1.5rem;
  font: 500 14px/1 var(--wcn-text); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.wcn-btn--ghost { border: 1px solid #fff; color: #fff; }
.wcn-btn--ghost:hover { background: var(--wcn-blue); border-color: var(--wcn-blue); color: #fff; }
.wcn-btn--sm { min-height: 44px; padding: 0 1rem; font-size: 13px; }
.wcn-btn .wcn-ico { width: 20px; height: 20px; }
/* hover: the legacy pixel notch, four 5px squares in the colour behind the button */
.wcn-btn::before { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity .15s ease;
  background: linear-gradient(#000, #000) left top / 5px 5px no-repeat, linear-gradient(#000, #000) right top / 5px 5px no-repeat,
    linear-gradient(#000, #000) left bottom / 5px 5px no-repeat, linear-gradient(#000, #000) right bottom / 5px 5px no-repeat; }
.wcn-btn:hover::before { opacity: 1; }

/* ------------------------------------------------------------------ header bar */
/* the hairline under the bar is always on (Serge 02.11: the busier menu needs separating from the page from the top) */
.wcn-hdr { position: sticky; z-index: 10000; top: 0; left: 0; right: 0; height: var(--wcn-hdr-h); background: #000; border-bottom: 1px solid var(--wcn-line-2); transition: border-color .25s ease, background-color .25s ease; }
.wcn-hdr--fixed { position: fixed; }
.wcn-hdr.is-solid { border-bottom-color: var(--wcn-line-2); }
.wcn-hdr--overlay { background: transparent; }
.wcn-hdr--overlay.is-solid, .wcn-hdr--overlay.is-open { background: #000; }
.wcn-hdr__bar { height: 100%; display: flex; align-items: center; gap: 1.5rem; width: 100%; max-width: 1440px; margin-inline: auto; padding: 0 var(--wcn-gutter); }
.wcn-brand { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.wcn-brand__logo { display: block; }
.wcn-brand__lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; color: #fff; }
.wcn-hdr .wcn-brand__lockup:focus-visible { outline: 2px solid var(--wcn-green); outline-offset: 4px; border-radius: 0; }
.wcn-brand__lockup:hover .wcn-brand__badge { color: var(--wcn-green); }
.wcn-brand__word { width: 170px; height: auto; }
.wcn-brand__letter { display: none; width: 34px; height: 30px; }
.wcn-brand__badge { display: flex; align-items: center; gap: 5px; padding-left: 2px; font: 500 10px/1 var(--wcn-text); letter-spacing: .06em; color: #fff; white-space: nowrap; }
.wcn-brand__badge img { width: 44px; height: auto; margin-top: 1px; }
/* header + drawer badge, variant C (Serge 02.11): "Backed by [Google in white] for Startups" on one line under the logo */
.wcn-brand__badge--c { gap: 4px; }
.wcn-brand__badge--c img { width: 40px; filter: brightness(0) invert(1); }

.wcn-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.wcn-nav__top, .wcn-nav__foot, .wcn-panel__head, .wcn-trig__go { display: none; }
.wcn-nav__list { display: flex; align-items: center; gap: 1.5rem; }
.wcn-trig { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 0; border-bottom: 1px solid transparent; font: 500 13px/1.3 var(--wcn-text);
  text-transform: uppercase; letter-spacing: .03em; color: #fff; white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.wcn-trig:hover, .wcn-trig[aria-expanded="true"], .wcn-trig.is-current { color: var(--wcn-green); }
.wcn-trig[aria-expanded="true"] { border-bottom-color: var(--wcn-green); }
.wcn-trig--hire { min-height: 44px; padding: 0 1rem; margin-right: .5rem; background: var(--wcn-green); color: #000; border: 0; }
/* Figma 6943:10200: the button keeps the brand green in every state; open swaps the grid icon for a thin X */
.wcn-trig--hire:hover, .wcn-trig--hire[aria-expanded="true"], .wcn-trig--hire.is-current { color: #000; background: var(--wcn-green); }
.wcn-trig--hire .wcn-ico { width: 16px; height: 16px; }
.wcn-trig--hire .wcn-ico--x, .wcn-trig--hire[aria-expanded="true"] .wcn-ico--grid { display: none; }
.wcn-trig--hire[aria-expanded="true"] .wcn-ico--x { display: block; }

.wcn-hdr__cta { flex: none; display: flex; align-items: center; gap: 1.5rem; }
.wcn-start { display: inline-flex; align-items: center; gap: .6rem; font: 500 13px/1 var(--wcn-text); text-transform: uppercase; letter-spacing: .03em; color: #fff; white-space: nowrap; }
.wcn-start .wcn-ico { width: 22px; height: 22px; }
.wcn-start:hover { color: var(--wcn-green); }
.wcn-burger { display: none; flex: none; width: 44px; height: 44px; place-items: center; }
.wcn-burger .wcn-ico, .wcn-close .wcn-ico { width: 34px; height: 34px; padding: 5px; border: 1px solid #fff; }
.wcn-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }

/* scroll progress line on the header edge */
.wcn-hdr__reel { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.wcn-hdr.is-solid .wcn-hdr__reel { opacity: 1; }
.wcn-hdr.is-open .wcn-hdr__reel { opacity: 0; }
.wcn-hdr__fill { position: absolute; inset: 1px 0 0 0; background: var(--wcn-blue); transform-origin: 0 50%; transform: scaleX(var(--wcn-page-p, 0)); }

/* ------------------------------------------------------------------ desktop panels */
/* page scrim under an open desktop mega panel: above page content (pinned scenes included), below the header */
.wcn-dim { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.65); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
.wcn-dim.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease, visibility 0s; }
.wcn-panel { box-shadow: 0 28px 48px -16px rgba(0,0,0,.85); }
.wcn-panel { position: absolute; z-index: 1; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--wcn-hdr-h)); max-height: calc(100dvh - var(--wcn-hdr-h)); overflow-y: auto; overscroll-behavior: contain;
  background: #000; border-top: 1px solid var(--wcn-line-2); border-bottom: 1px solid var(--wcn-line-2); padding: 40px 0 48px; scrollbar-color: var(--wcn-blue) #000; scrollbar-width: thin; }
.wcn-panel__in { width: min(var(--wcn-in), 100% - 2 * var(--wcn-gutter)); margin-inline: auto; }
.wcn-cols { display: grid; gap: 32px 64px; align-items: start; }
.wcn-cols--2 { grid-template-columns: 1fr 1fr; }
.wcn-cols--3 { grid-template-columns: repeat(3, 1fr); gap: 32px 32px; }
.wcn-cols--pricing { grid-template-columns: 464px 1fr; gap: 32px; }
.wcn-cols--platform { grid-template-columns: 428px 1fr; gap: 32px; }
.wcn-cols--about { grid-template-columns: minmax(0, 1fr) 272px 272px; gap: 24px; }

.wcn-card__head { display: grid; grid-template-columns: 80px minmax(0, 1fr) 48px; gap: 0 24px; align-items: start; }
.wcn-card__head:not(:has(.wcn-tile)) { grid-template-columns: minmax(0, 1fr) 48px; }
.wcn-tile { width: 80px; height: 80px; display: grid; place-items: center; background: var(--wcn-blue); color: #fff; }
.wcn-tile .wcn-ico { width: 40px; height: 40px; }
.wcn-card__title { display: inline-block; font: 600 16px/24px var(--wcn-text); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.wcn-card__title[href]:hover { color: var(--wcn-green); }
.wcn-card__text { margin-top: 8px; font: 400 15px/1.6 var(--wcn-text); color: #fff; max-width: 32em; }
.wcn-cols--3 .wcn-card__head { align-items: center; }
.wcn-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #fff; color: #fff; transition: background-color .15s ease, color .15s ease; }
.wcn-arrow:hover { background: #fff; color: #000; }
/* Whole-card links (Serge 02.11): the title link stretches over its block (one link for screen readers, no nested
   links); secondary links and buttons sit above the overlay. */
.wcn-card__head, .wcn-promo, .wcn-shot { position: relative; }
.wcn-card__head a.wcn-card__title::after, .wcn-promo a.wcn-card__title::after, .wcn-shot a.wcn-card__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wcn-promo__ctas { position: relative; z-index: 2; }
.wcn-card__head:has(a.wcn-card__title), .wcn-promo, .wcn-shot { cursor: pointer; }
.wcn-card__head:has(a.wcn-card__title):hover .wcn-card__title, .wcn-shot:hover .wcn-card__title { color: var(--wcn-green); }
.wcn-card__head:has(a.wcn-card__title):hover .wcn-arrow, .wcn-shot:hover .wcn-shot__arrow { background: #fff; color: #000; }
.wcn-arrow .wcn-ico { transition: transform .15s ease; }
.wcn-card__head:hover .wcn-arrow .wcn-ico, .wcn-shot:hover .wcn-arrow .wcn-ico { transform: translateX(3px); }
.wcn-shot { transition: border-color .15s ease; }
.wcn-shot:hover { border-color: #fff; }
.wcn-promo--pricing:hover .wcn-promo__art { transform: translateY(-3px); }
.wcn-promo__art { transition: transform .2s ease; }
/* only the open item, or the current section when nothing else is open, is green */
.wcn-hdr.is-open .wcn-trig.is-current:not([aria-expanded="true"]):not(:hover):not(.wcn-trig--hire) { color: #fff; }
.wcn-arrow--light { border-color: #fff; }

.wcn-links { display: grid; gap: 24px 24px; margin-top: 32px; }
.wcn-links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wcn-links--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wcn-links--row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.wcn-link { display: inline-block; font: 400 15px/1.3 var(--wcn-text); color: #fff; text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: color .15s ease, text-decoration-color .15s ease; }
.wcn-link:hover, .wcn-link.is-current { color: var(--wcn-green); text-decoration-color: var(--wcn-green); }
.wcn-link:hover .wcn-pre, .wcn-link.is-current .wcn-pre { color: var(--wcn-green); }
.wcn-pre { color: var(--wcn-grey); }
/* R2i: the muted company after a category label (Solutions > Wild.Codes versus), green with its link on hover */
.wcn-note { color: var(--wcn-grey); white-space: nowrap; }
.wcn-link:hover .wcn-note, .wcn-link.is-current .wcn-note { color: var(--wcn-green); }
.wcn-link--all { color: var(--wcn-green); text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.wcn-links--row .wcn-link { color: var(--wcn-soft); font-size: 14px; }
.wcn-nb { white-space: nowrap; }
/* Figma 6929:224710: small outlined tag right after the last word, raised to the cap height, same on every row */
.wcn-tag { display: inline-block; margin-left: 5px; padding: 1px 3px; border: 1px solid currentColor; font: 500 9px/1 var(--wcn-text); letter-spacing: .04em; text-transform: uppercase; vertical-align: 5px; text-decoration: none; }
.wcn-tag--new { color: var(--wcn-green); }
.wcn-tag--hot { color: var(--wcn-hot); }
.wcn-flag { width: 20px; height: 20px; border-radius: 50%; }
.wcn-links--flags .wcn-link { display: inline-flex; align-items: center; gap: 10px; }
.wcn-sm-only { display: none; }

/* search fields */
.wcn-search { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 20px; background: var(--wcn-ink); color: var(--wcn-grey); }
.wcn-search .wcn-ico { width: 20px; height: 20px; color: #fff; }
.wcn-search input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 400 15px/1 var(--wcn-text); -webkit-appearance: none; appearance: none; box-shadow: none; }
.wcn-search input::placeholder { color: var(--wcn-grey); opacity: 1; }
.wcn-search:focus-within { outline: 2px solid var(--wcn-green); outline-offset: 0; border-radius: 0; }
/* one focus indicator per field: the square container ring; the input's own ring (UA or .wcn-hdr :focus-visible) is off */
.wcn-hdr .wcn-search input:focus, .wcn-hdr .wcn-search input:focus-visible { outline: none; box-shadow: none; }
.wcn-search input::-webkit-search-cancel-button { filter: invert(1); }

/* Hire talent catalogue */
.wcn-hire__tabs { display: flex; gap: 16px; margin-bottom: 24px; }
.wcn-chip { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--wcn-green); color: var(--wcn-green); font: 500 12px/1 var(--wcn-text); text-transform: uppercase; letter-spacing: .04em; }
.wcn-chip .wcn-ico { width: 20px; height: 20px; }
.wcn-hire .wcn-search { width: 424px; max-width: 100%; margin-bottom: 16px; }
.wcn-grp { display: grid; grid-template-columns: 266px minmax(0, 1fr); padding: 20px 0; border-bottom: 1px solid var(--wcn-line); }
.wcn-grp:last-child { border-bottom: 0; }
.wcn-grp__label { align-self: start; font: 500 15px/1.3 var(--wcn-text); text-transform: uppercase; letter-spacing: .02em; color: var(--wcn-soft); }
.wcn-grp__label:hover { color: var(--wcn-green); }
.wcn-grp__toggle { display: none; }
.wcn-grp__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--wcn-rows, 4), auto); grid-auto-flow: column; gap: 14px 24px; }
.wcn-hire__empty { padding: 20px 0; color: var(--wcn-soft); font-size: 15px; }
.wcn-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font: 500 14px/1 var(--wcn-text); text-transform: uppercase; letter-spacing: .03em; color: var(--wcn-green); }
.wcn-more::before { content: ""; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; }
.wcn-more:hover { color: #fff; }

/* Solutions: versus card extras */
.wcn-co { margin-top: 32px; }
.wcn-co__list { position: absolute; z-index: 2; top: 100%; left: 0; right: 0; max-height: 264px; overflow-y: auto; background: #0c0c0c; border: 1px solid var(--wcn-line-2); }
.wcn-co__list a { display: block; padding: 10px 20px; color: #fff; font-size: 15px; }
.wcn-co__list a:hover, .wcn-co__list a.is-active { background: var(--wcn-ink); color: var(--wcn-green); }
.wcn-co__list .wcn-co__none { padding: 10px 20px; color: var(--wcn-soft); font-size: 15px; }
.wcn-co__list .wcn-co__none a { display: inline; padding: 0; color: var(--wcn-green); }
.wcn-all { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.wcn-all__link { color: #fff; font: 500 16px/1.3 var(--wcn-text); }
.wcn-all__link:hover { color: var(--wcn-green); }
.wcn-stars { display: inline-flex; gap: 3px; }
.wcn-stars i { width: 12px; height: 12px; background: var(--wcn-green); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }

/* Pricing / Platform promo tiles */
.wcn-promo { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: start; min-height: 224px; padding: 32px 64px 32px 32px; background: var(--wcn-blue); }
.wcn-promo__ico { display: grid; place-items: center; height: 140px; color: #fff; }
.wcn-promo__ico .wcn-ico { width: 112px; height: 112px; }
.wcn-promo__copy { display: grid; justify-items: start; gap: 0; }
.wcn-promo .wcn-card__text { margin-bottom: 24px; }
.wcn-promo__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.wcn-btn--white { background: #fff; border: 1px solid #fff; color: #000; }
.wcn-btn--white:hover { background: #000; border-color: #000; color: #fff; }
/* R2i (Serge 03.11): on the blue PRICING card the two buttons share one row under the art and the copy (clear of the
   notched right edge); hover is a plain dark fill, no pixel corners (they read as black squares on blue), and the
   keyboard ring is white so it shows on the blue. */
.wcn-promo--pricing .wcn-promo__ctas { grid-column: 1 / -1; }
.wcn-promo--pricing .wcn-card__text { margin-bottom: 0; }
.wcn-promo--pricing .wcn-btn::before { content: none; }
.wcn-promo--pricing .wcn-btn--white:hover, .wcn-promo--pricing .wcn-btn--ghost:hover { background: #000; border-color: #000; color: #fff; }
.wcn-hdr .wcn-promo--pricing .wcn-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* drawer: the notch squares sit beside the button row; keep the row 20px short of them (one row from 390px up) */
@media (max-width: 1080px) { .wcn-promo--pricing .wcn-promo__ctas { margin-right: 20px; } .wcn-promo--pricing .wcn-btn--sm { padding: 0 .75rem; } }
.wcn-promo__link { margin-top: 16px; color: #fff; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.6); }
.wcn-promo__link:hover { border-bottom-color: #fff; }
.wcn-promo__px, .wcn-feature__px { position: absolute; inset: 0; pointer-events: none; }
.wcn-promo__px i { position: absolute; width: 32px; height: 32px; background: #000; }
.wcn-promo__px i:nth-child(1) { right: 0; top: 0; }
.wcn-promo__px i:nth-child(2) { right: -32px; top: 32px; background: var(--wcn-blue); }
.wcn-promo__px i:nth-child(3) { right: 0; bottom: 32px; }
.wcn-promo__px i:nth-child(4) { right: 32px; bottom: 0; }
.wcn-promo--outline { background: #000; border: 1px solid var(--wcn-blue); grid-template-columns: 1fr; padding: 32px; }
.wcn-promo--outline .wcn-promo__ico { display: none; }
.wcn-promo--outline .wcn-arrow { margin-top: 8px; }

/* About tiles */
.wcn-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.wcn-tilelink { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; height: 140px; padding: 20px 24px; background: var(--wcn-ink); color: #fff; font: 600 16px/1.2 var(--wcn-text); text-transform: uppercase; letter-spacing: .02em; }
.wcn-tilelink .wcn-ico { width: 32px; height: 32px; }
.wcn-tilelink:hover { background: var(--wcn-blue); }
.wcn-feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 244px; padding: 24px; overflow: hidden; color: #fff; }
.wcn-feature--blue { background: var(--wcn-blue); }
.wcn-feature--grey { background: var(--wcn-ink); }
.wcn-feature .wcn-ico { width: 40px; height: 40px; margin-bottom: auto; }
.wcn-feature__title { font: 600 16px/1.2 var(--wcn-text); text-transform: uppercase; letter-spacing: .02em; }
.wcn-feature__text { font: 400 15px/1.6 var(--wcn-text); }
/* paired tiles keep their titles on one line of sight (Serge 02.11): every descriptor holds exactly two lines,
   never hyphenated, and each tile label reserves two lines with the first line on top */
.wcn-feature__text { min-height: 3.2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; }
.wcn-feature__title, .wcn-tilelink > span { -webkit-hyphens: none; hyphens: none; }
.wcn-tilelink > span { min-height: 2.4em; }
.wcn-feature:hover .wcn-feature__title { text-decoration: underline; text-underline-offset: 4px; }
.wcn-feature__px i { position: absolute; width: 32px; height: 32px; background: #000; }
.wcn-feature__px i:nth-child(1) { right: 0; top: 0; }
.wcn-feature__px i:nth-child(2) { right: 32px; top: 0; width: 0; }
.wcn-feature__px i:nth-child(3) { right: 0; bottom: 0; }

/* MKT-200 R2a v2: Figma library visuals (assets/img/chrome-v3, lazy inside hidden panels, sized: no layout shift) */
.wcn-all { display: flex; align-items: center; gap: 16px; }
.wcn-all__copy { display: grid; gap: 6px; }
.wcn-logos { display: flex; align-items: center; padding-left: 8px; }
.wcn-logos img, .wcn-logos b { width: 36px; height: 36px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #fff; }
.wcn-logos b { display: grid; place-items: center; background: var(--wcn-green); color: #000; font: 600 11px/1 var(--wcn-text); letter-spacing: .02em; }
.wcn-promo__ico--art { height: auto; align-self: center; }
.wcn-promo__art { width: 140px; height: auto; }
.wcn-shot { position: relative; display: block; min-height: 254px; overflow: hidden; border: 2px solid var(--wcn-blue); background: #fff; }
.wcn-shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.wcn-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.94) 58%, #000 100%); pointer-events: none; }
.wcn-shot__label { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 4px 8px; background: rgba(0,0,0,.72); color: #fff; font: 500 10px/1.2 var(--wcn-text); text-transform: uppercase; letter-spacing: .06em; }
.wcn-shot__arrow { position: absolute; z-index: 2; top: 16px; right: 16px; background: rgba(0,0,0,.4); }
/* the copy is a flex item (z-index without position), so the title's stretched ::after covers the whole card */
.wcn-shot { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.wcn-shot__copy { z-index: 2; }
.wcn-tilelink { position: relative; overflow: hidden; }
.wcn-tilelink > * { position: relative; z-index: 1; }
.wcn-tilelink > .wcn-tilelink__img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .3s ease; }
.wcn-tilelink::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%); }
.wcn-tilelink:hover { background: var(--wcn-ink); }
.wcn-tilelink:hover > .wcn-tilelink__img { transform: scale(1.04); }
.wcn-feature > * { position: relative; z-index: 1; }
.wcn-feature > .wcn-feature__img { position: absolute; z-index: 0; top: 0; right: 0; width: 82%; height: 64%; object-fit: cover; }
.wcn-feature--blue > .wcn-feature__img { object-position: 70% 100%; }
.wcn-feature--grey > .wcn-feature__img { object-position: 60% 35%; opacity: .9; }
.wcn-feature > .wcn-feature__px { position: absolute; z-index: 2; }

/* page scrim behind the tablet drawer */
.wcn-scrim { position: fixed; z-index: 2147482999; inset: 0; background: rgba(0,0,0,.6); }
/* an open drawer sits above the cookie banner and the contact widget (user-opened, closes with Escape) */
.wcn-hdr.is-menu { z-index: 2147483000; }
/* scroll lock: the viewport stops scrolling; body clips without becoming a scroll container (overflow:hidden on body
   made it one, so the sticky header and pinned scenes jumped away behind the tablet drawer - R2 review 02.11) */
html.wcn-is-locked { overflow: hidden; }
html.wcn-is-locked body { overflow: clip; }
/* the Webflow cookie banner (.ookie) and contact widget sit at the max z-index; while the user has the drawer open they step behind it */
html.wcn-is-locked .ookie, html.wcn-is-locked .contact-vidget, html.wcn-is-locked .wcc-banner, html.wcn-is-locked .wcw { z-index: 9000 !important; }

/* ------------------------------------------------------------------ narrower desktops */
@media (max-width: 1240px) {
  .wcn-nav__list { gap: 1.1rem; }
  .wcn-hdr__bar { gap: 1rem; }
  .wcn-hdr__cta { gap: 1rem; }
  .wcn-cols--about { grid-template-columns: minmax(0, 1fr) 220px 220px; }
}
@media (max-width: 1180px) {
  .wcn-hdr__cta .book-a-demo { display: none; }
}

/* ------------------------------------------------------------------ tablet + phone: the drawer */
@media (max-width: 1080px) {
  .wcn-hdr__cta { margin-left: auto; }
  .wcn-start { min-height: 40px; padding: 0 14px; background: var(--wcn-blue); color: #fff; }
  .wcn-start:hover { background: var(--wcn-blue-d); color: #fff; }
  .wcn-start .wcn-ico { display: none; }
  .wcn-burger { display: grid; }
  .wcn-nav { position: fixed; z-index: 10001; top: 0; bottom: 0; left: 0; width: var(--wcn-drawer); display: none; flex-direction: column; justify-content: flex-start;
    background: #000; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 40px calc(32px + env(safe-area-inset-bottom)); }
  .wcn-hdr.is-menu .wcn-nav { display: flex; }
  .wcn-nav__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; padding: 12px 0; }
  .wcn-nav__top .wcn-brand__word { width: 170px; }
  .wcn-nav__list { flex-direction: column; align-items: stretch; gap: 0; margin-top: 16px; }
  .wcn-nav__item { border-bottom: 1px solid var(--wcn-line); }
  .wcn-nav__item--hire, .wcn-nav__item:last-child { border-bottom: 0; }
  .wcn-trig { width: 100%; justify-content: space-between; min-height: 68px; padding: 0; border: 0; font-size: 16px; }
  .wcn-trig[aria-expanded="true"] { border: 0; }
  .wcn-trig__go { display: block; color: var(--wcn-grey); }
  .wcn-trig__go .wcn-ico { width: 20px; height: 20px; }
  .wcn-trig--hire { justify-content: center; gap: 16px; min-height: 48px; margin: 0 0 8px; padding: 0 16px; }
  .wcn-trig--hire .wcn-ico { width: 22px; height: 22px; }
  .wcn-trig--hire .wcn-trig__go { display: none; }
  .wcn-nav__foot { display: grid; gap: 16px; margin-top: 24px; }
  .wcn-nav__foot .wcn-btn { width: 100%; }
  .wcn-contact { display: grid; gap: 4px; margin-top: 16px; }
  .wcn-contact a { display: flex; align-items: center; gap: 16px; min-height: 44px; color: var(--wcn-green); font: 400 16px/1.3 var(--wcn-text); }
  .wcn-contact .wcn-ico { width: 22px; height: 22px; }

  /* level 2: a panel takes over the drawer */
  /* the promo's pixel notch hangs 32px past its card; on a phone (24px gutter) that made the panel scroll sideways */
  .wcn-panel { position: fixed; z-index: 3; top: 0; bottom: 0; left: 0; width: var(--wcn-drawer); max-height: none; padding: 0 40px 40px; border: 0; background: #000; overflow-x: hidden; }
  .wcn-panel__in { width: 100%; }
  .wcn-panel__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; padding: 12px 0 24px; position: sticky; top: 0; z-index: 2; background: #000; }
  .wcn-panel__title { font: 500 18px/1.2 var(--wcn-text); text-transform: uppercase; letter-spacing: .03em; }
  .wcn-back { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--wcn-green); font: 400 16px/1 var(--wcn-text); justify-self: start; }
  .wcn-back .wcn-ico { width: 20px; height: 20px; }
  .wcn-cols, .wcn-cols--2, .wcn-cols--3, .wcn-cols--pricing, .wcn-cols--platform, .wcn-cols--about { grid-template-columns: 1fr; gap: 40px; }
  .wcn-links, .wcn-links--2, .wcn-links--3 { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  .wcn-links .wcn-link { display: block; padding: 13px 0; }
  .wcn-links.wcn-links--flags .wcn-link { display: flex; }
  .wcn-links--row { gap: 0 24px; }
  .wcn-sm-only { display: list-item; }
  .wcn-card__head, .wcn-cols--3 .wcn-card__head { grid-template-columns: 64px minmax(0, 1fr) 48px; gap: 16px; align-items: start; }
  .wcn-tile { width: 64px; height: 64px; }
  .wcn-tile .wcn-ico { width: 32px; height: 32px; }
  .wcn-promo { grid-template-columns: 1fr; min-height: 0; padding: 24px 56px 24px 24px; }
  .wcn-promo__ico { height: auto; justify-content: start; }
  .wcn-promo__ico .wcn-ico { width: 64px; height: 64px; }
  .wcn-feature { min-height: 200px; }
  .wcn-shot { min-height: 220px; }
  .wcn-promo__art { width: 96px; }
  .wcn-tiles { gap: 16px; }

  .wcn-hire .wcn-search { width: 100%; margin-bottom: 8px; }
  .wcn-hire__tabs { display: none; }
  .wcn-grp { grid-template-columns: 1fr; padding: 0; }
  .wcn-grp__label { display: none; }
  .wcn-grp__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; font: 500 16px/1.3 var(--wcn-text); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
  .wcn-grp__toggle .wcn-ico { width: 22px; height: 22px; }
  .wcn-grp.is-open .wcn-grp__toggle .wcn-ico path { d: path("M4 11h16v2H4z"); }
  .wcn-grp__links { display: none; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 0; padding-bottom: 16px; }
  .wcn-grp.is-open .wcn-grp__links, .wcn-hire.is-filtering .wcn-grp__links { display: grid; }
  .wcn-grp__links .wcn-link { display: block; padding: 12px 0; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 760px) {
  .wcn-hdr, .wcn-anchor { --wcn-hdr-h: 60px; }
  /* MKT-200 R2g (Serge 02.11, "the header is so-so" on a 390px phone): the bar keeps 60px and its three parts, each
     made quieter. The wordmark lockup with the Google for Startups line replaces the lone W (Figma mobile bar
     7118:109236); the CTA is a compact 36px button; the burger is three pixel bars without the outlined box. */
  .wcn-hdr__bar > .wcn-brand .wcn-brand__letter { display: none; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__word { width: 118px; }
  /* R2g QA (03.11): the Google line at 7-7.5px could not be read on a phone; 9px (8.5px up to 380px) still keeps the
     lockup clear of the CTA at 360px (gap 28px) and 390px (29px); 340-359px fall back to 7.5px below. */
  .wcn-hdr__bar > .wcn-brand .wcn-brand__badge { gap: 4px; padding-left: 1px; font-size: 9px; letter-spacing: .03em; color: #d4d4d4; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__badge img { width: 34px; margin-top: 0; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__lockup { gap: 4px; }
  .wcn-hdr__bar { gap: .5rem; }
  .wcn-hdr__cta { margin-left: auto; }
  .wcn-start { position: relative; min-height: 36px; padding: 0 12px; font-size: 12px; letter-spacing: .02em; }
  /* the 36px button keeps a 44px tap target (R2g QA, 03.11) */
  .wcn-start::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  .wcn-burger { width: 44px; height: 44px; margin-right: -10px; position: relative; color: #fff; }
  .wcn-burger .wcn-ico { display: none; }
  .wcn-burger::before, .wcn-burger::after { content: ""; position: absolute; left: 12px; width: 20px; height: 3px; background: currentColor; }
  .wcn-burger::before { top: 14px; box-shadow: 0 6px 0 currentColor; }
  .wcn-burger::after { top: 26px; left: 20px; width: 12px; background: var(--wcn-green); transition: width .2s ease, left .2s ease; }
  .wcn-burger:hover::after, .wcn-burger:focus-visible::after { left: 12px; width: 20px; }
  .wcn-close .wcn-ico { border-color: transparent; }
  .wcn-hdr { --wcn-drawer: 100vw; }
  .wcn-nav, .wcn-panel { padding-left: 24px; padding-right: 24px; }
  /* 16px text keeps iOS from zooming the page on focus; the long placeholder steps down so it is not cut mid-word at 360-375px */
  .wcn-search input { font-size: 16px; text-overflow: ellipsis; }
  .wcn-search input::placeholder { font-size: 13px; }
  .wcn-hdr--overlay:not(.is-cta) .wcn-start { visibility: hidden; }
}
@media (max-width: 380px) {
  .wcn-start { padding: 0 9px; font-size: 11px; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__word { width: 108px; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__badge { gap: 3px; font-size: 8.5px; letter-spacing: .02em; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__badge img { width: 31px; }
}
@media (max-width: 359px) {
  .wcn-hdr__bar > .wcn-brand .wcn-brand__badge { font-size: 7.5px; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__badge img { width: 28px; }
}
/* below 340px there is no room for the lockup and the CTA: back to the W */
@media (max-width: 339px) {
  .wcn-hdr__bar > .wcn-brand .wcn-brand__word, .wcn-hdr__bar > .wcn-brand .wcn-brand__badge { display: none; }
  .wcn-hdr__bar > .wcn-brand .wcn-brand__letter { display: block; }
}
@media (min-width: 1081px) {
  .wcn-scrim { display: none !important; }
}

/* ------------------------------------------------------------------ footer */
.wcn-wrap { width: min(var(--wcn-in), 100% - 2 * var(--wcn-gutter)); margin-inline: auto; }
.wcn-foot { position: relative; display: block; margin: 0; margin-top: clamp(80px, 9vw, 130px); padding: 64px 0 0; background: #000; border-top: 1px solid var(--wcn-line-2); overflow: hidden; }
.wcn-foot--doc { margin-top: 0; }
.wcn-disc__h { margin: 0 0 48px; text-align: center; font: 700 56px/.9 var(--wcn-display); text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.wcn-disc__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.wcn-dcard { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; background: var(--wcn-ink); border: 1px solid var(--wcn-line); }
.wcn-dcard > .wcn-ico { width: 40px; height: 40px; }
.wcn-dcard__title { margin-top: 8px; font: 600 20px/1.2 var(--wcn-text); text-transform: uppercase; letter-spacing: .01em; }
.wcn-dcard__text { flex: 1 1 auto; font: 400 15px/1.6 var(--wcn-text); color: #e6e6e6; }
.wcn-dcard .wcn-btn { width: 100%; margin-top: 8px; }

.wcn-ftabs { margin-top: 48px; }
.wcn-ftabs__list { display: flex; justify-content: center; gap: 24px; width: max-content; max-width: 100%; margin: 0 auto 32px; padding: 0 12px; border-bottom: 1px solid var(--wcn-line); overflow-x: auto; scrollbar-width: none; }
.wcn-ftabs__list::-webkit-scrollbar { display: none; }
.wcn-ftab { flex: none; padding: 12px 12px 14px; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; font: 500 14px/1 var(--wcn-text); text-transform: uppercase; letter-spacing: .03em; color: #fff; white-space: nowrap; }
.wcn-ftab:hover { color: var(--wcn-green); }
.wcn-ftab[aria-selected="true"] { color: var(--wcn-green); border-bottom-color: var(--wcn-green) !important; }
.wcn-fpanel { outline: none; }
.wcn-frow { display: grid; grid-template-columns: 266px minmax(0, 1fr); gap: 16px 0; padding: 24px 0; border-bottom: 1px solid var(--wcn-line); }
.wcn-frow:last-of-type { border-bottom: 0; }
.wcn-frow__label { align-self: start; font: 500 15px/1.3 var(--wcn-text); text-transform: uppercase; letter-spacing: .02em; color: var(--wcn-grey); }
.wcn-frow__label[href]:hover { color: var(--wcn-green); }
.wcn-frow__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--wcn-rows, 4), auto); grid-auto-flow: column; gap: 18px 24px; }

.wcn-tagline { margin-top: 64px; padding: 40px 0; background: var(--wcn-ink); }
.wcn-tagline__t { text-align: center; font: 700 56px/.9 var(--wcn-display); text-transform: uppercase; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.wcn-caret { display: inline-block; width: 3px; height: .78em; margin-left: 4px; vertical-align: -.02em; background: var(--wcn-blue); animation: wcn-blink 1.1s steps(1) infinite; }
@keyframes wcn-blink { 50% { opacity: 0; } }

.wcn-bottom { display: grid; grid-template-columns: 316px minmax(0, 1fr) 252px; gap: 40px 64px; padding: 40px 0; }
.wcn-bottom__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 228px; border: 1px solid var(--wcn-line); }
.wcn-bottom__brand img { width: 205px; height: auto; }
.wcn-bottom__brand .wcn-brand__badge { font-size: 12px; gap: 6px; }
.wcn-bottom__brand .wcn-brand__badge img { width: 52px; }
.wcn-bottom__col { padding-top: 12px; }
.wcn-fh { margin-bottom: 24px; font: 500 14px/1 var(--wcn-text); text-transform: uppercase; letter-spacing: .04em; color: var(--wcn-grey); }
.wcn-contact--foot { display: grid; gap: 16px; }
.wcn-contact--foot a, .wcn-contact--foot p { display: flex; align-items: flex-start; gap: 12px; color: var(--wcn-green); font: 400 15px/1.6 var(--wcn-text); }
.wcn-contact--foot .wcn-contact__plain { color: #fff; }
.wcn-contact--foot .wcn-ico { width: 20px; height: 20px; margin-top: 2px; }
.wcn-contact--foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wcn-social { display: flex; gap: 8px; }
.wcn-social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--wcn-line); color: #fff; transition: background-color .15s ease, border-color .15s ease; }
.wcn-social a:hover { background: var(--wcn-blue); border-color: var(--wcn-blue); }
.wcn-social .wcn-ico { width: 20px; height: 20px; }
.wcn-rating { display: flex; align-items: center; gap: 12px; margin-top: 40px; color: #fff; }
.wcn-rating__brand { font: 600 28px/1 var(--wcn-text); }
.wcn-rating__v { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 2px 8px; font-size: 13px; }
.wcn-rating__v b { font-weight: 600; }
.wcn-rating__v small { grid-column: 1 / -1; font-size: 10px; color: var(--wcn-soft); }
.wcn-rating .wcn-stars i { width: 10px; height: 10px; background: #EF4335; }
.wcn-rating:hover .wcn-rating__brand { color: var(--wcn-green); }

.wcn-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding: 24px 0 32px; border-top: 1px solid var(--wcn-line); font-size: 13px; color: var(--wcn-grey); }
.wcn-legal ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.wcn-legal__a, .wcn-legal__btn { display: inline-flex; align-items: center; min-height: 32px; color: #fff; font: 400 13px/1.3 var(--wcn-text); }
.wcn-legal__a:hover, .wcn-legal__btn:hover, .wcn-legal__a.is-current { color: var(--wcn-green); }

@media (max-width: 1080px) {
  .wcn-disc__h, .wcn-tagline__t { font-size: 44px; }
  .wcn-disc__cards { grid-template-columns: repeat(3, minmax(260px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
  .wcn-dcard { scroll-snap-align: start; }
  .wcn-ftabs__list { justify-content: flex-start; }
  .wcn-frow { grid-template-columns: 200px minmax(0, 1fr); }
  .wcn-frow__links { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
  .wcn-bottom { grid-template-columns: 1fr 1fr; }
  .wcn-bottom__brand { grid-column: 1 / -1; min-height: 180px; }
}
@media (max-width: 760px) {
  .wcn-foot { padding-top: 40px; }
  .wcn-disc__h, .wcn-tagline__t { font-size: 36px; }
  .wcn-disc__h { text-align: left; margin-bottom: 24px; }
  .wcn-disc__cards { grid-template-columns: repeat(3, 80vw); gap: 16px; }
  .wcn-foot li.wcn-dcard { padding: 24px !important; }
  .wcn-frow { grid-template-columns: 1fr; padding: 16px 0; }
  .wcn-frow__links { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 0; }
  .wcn-frow__links .wcn-link { display: block; padding: 10px 0; }
  .wcn-tagline { margin-top: 40px; padding: 32px 0; }
  .wcn-tagline__t { text-align: left; }
  .wcn-bottom { grid-template-columns: 1fr; gap: 40px; }
  .wcn-bottom__col { padding-top: 0; }
  .wcn-legal { flex-direction: column; align-items: flex-start; }
  .wcn-legal__a, .wcn-legal__btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .wcn-hdr, .wcn-hdr__reel, .wcn-btn, .wcn-btn::before, .wcn-trig, .wcn-link, .wcn-arrow, .wcn-social a, .wcn-dim, .wcn-dim.is-on, .wcn-arrow .wcn-ico, .wcn-promo__art, .wcn-shot { transition: none; }
  .wcn-card__head:hover .wcn-arrow .wcn-ico, .wcn-shot:hover .wcn-arrow .wcn-ico, .wcn-promo--pricing:hover .wcn-promo__art { transform: none; }
  .wcn-caret { animation: none; }
}

/* One scrollbar on every page (Serge 03.11: the navbar moved 1-2 px between the homepage and any other page).
   The homepage build sets a thin page scrollbar (scrollcraft.css), every other page had the default one, so
   the centred nav sat 2.5 px apart (10 vs 15 px of scrollbar) and on macOS the homepage showed a bar where
   other pages showed none. Same rule, same colour as the homepage. */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, #ffffff 26%, transparent) transparent; scrollbar-width: thin; }
}