/* Remote Sales Careers: the build-instruction booklet. Brand blue #0066FF + Nunito Sans (kept). */
/* Nunito Sans, self hosted (SIL Open Font License): no third party connection before the first paint. One weight-axis file per
   script covers every weight the site uses; the latin-ext file only downloads if a page needs one of its characters. */
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(assets/fonts/nunito-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(assets/fonts/nunito-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --blue: #0066ff;
  --blue-600: #0050c8;
  --blue-100: #d6e7ff;
  --page: #cfe4ff;
  --page-2: #e4efff;
  --paper: #ffffff;
  --ink: #061a40;
  --ink-2: #33466e;
  --sun: #ffd43b;
  --key: 3px solid var(--ink);
  --r: 18px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --font: "Nunito Sans", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --stud: 24px;
  /* The paid ads' blue, sampled from the campaign creative, so a click lands on the same look. */
  --ad-grad: linear-gradient(155deg, #196fe6 0%, #185ab9 42%, #0b3a86 74%, #062957 100%);
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--ink) var(--page); }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background-color: var(--page);
  background-image: radial-gradient(circle at 12px 12px, rgba(6, 26, 64, 0.09) 2.2px, transparent 2.6px);
  background-size: var(--stud) var(--stud);
  -webkit-font-smoothing: antialiased; caret-color: var(--blue);
}
img, video, svg { display: block; max-width: 100%; }
/* The hidden attribute must win over component display rules (the tools filter relies on it). */
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 6px; text-decoration-thickness: 2px; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }
.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }

/* Buttons: brand blue pieces with a navy keyline and a pressed-brick base. */
.btn { display: inline-flex; align-items: center; gap: 10px; border: var(--key); border-radius: 999px; white-space: nowrap; font: 900 17px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.btn-blue { background: var(--blue); color: var(--paper); padding: 14px 20px; box-shadow: 0 8px 18px rgba(6, 26, 64, 0.18); }
.btn-blue:hover { transform: translateY(-2px); background: var(--blue-600); box-shadow: 0 12px 24px rgba(6, 26, 64, 0.22); }
.btn-blue:active, .btn-paper:active { transform: translateY(2px); box-shadow: 0 3px 8px rgba(6, 26, 64, 0.16); }
.btn-paper { background: var(--paper); color: var(--ink); padding: 14px 20px; box-shadow: 0 8px 18px rgba(6, 26, 64, 0.16); }
.btn-paper:hover { transform: translateY(-2px); background: var(--page-2); }
.btn-lg { padding: 18px 24px; font-size: 19px; }
.btn svg { width: 20px; height: 20px; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 17px; }

/* Nav */
.nav { display: flex; align-items: center; gap: 32px; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 900; font-size: 18px; text-decoration: none; }
.brand img { width: 40px; height: auto; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-weight: 700; font-size: 16px; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }
/* Menu: below 1080px a Menu button opens the page links in a card under the bar; tablets keep Apply beside it.
   On phones the cover's own button and the dock carry Apply, so the bar keeps only the brand and the menu.
   Without script the links simply wrap under the brand. */
.nav-toggle, .nav-menu-apply { display: none; }
@media (max-width: 760px) {
  .nav { padding-block: 14px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand img { width: 34px; }
  .nav-apply { display: none; }
}
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav-toggle { order: 1; }
  .nav-apply { order: 2; }
  .nav-links { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; gap: 4px 20px; }
  .js .nav-links { display: none; }
  .js .nav-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 0 14px; background: var(--paper);
    border: var(--key); border-radius: 12px; font: 900 16px/1 var(--font); color: var(--ink); cursor: pointer; }
  .nav-toggle-bars { position: relative; width: 18px; height: 2.5px; border-radius: 2px; background: currentColor; transition: background-color 160ms; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2.5px; border-radius: 2px; background: currentColor; transition: translate 200ms var(--ease-out), rotate 200ms var(--ease-out); }
  .nav-toggle-bars::before { translate: 0 -6px; }
  .nav-toggle-bars::after { translate: 0 6px; }
  .nav.is-open .nav-toggle-bars { background: transparent; }
  .nav.is-open .nav-toggle-bars::before { translate: 0 0; rotate: 45deg; }
  .nav.is-open .nav-toggle-bars::after { translate: 0 0; rotate: -45deg; }
  .js .nav.is-open .nav-links { display: grid; gap: 2px; background: var(--paper); border: var(--key); border-radius: var(--r); padding: 8px; font-size: 18px; }
  .nav.is-open .nav-links a:not(.btn) { padding: 13px 12px; border-radius: 10px; }
  .nav.is-open .nav-links a:not(.btn):hover { background: var(--page-2); text-decoration: none; }
  .nav.is-open .nav-menu-apply { display: inline-flex; justify-content: center; margin-top: 6px; border-radius: 999px; box-shadow: none; }
}

/* Headings shared by every spread. */
.h2 { font-weight: 900; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.sub { margin-top: 14px; font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.spread { padding-block: clamp(80px, 9vw, 140px) 0; }

/* Cover */
.cover { min-height: 100svh; display: grid; grid-template-rows: auto auto 1fr; gap: 18px; padding-bottom: 36px; }
.top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "copy art" "copy parts"; gap: 8px 32px; align-items: end; }
/* Areas scoped to the homepage cover; other pages reuse .parts inside their own grids. */
.top > .copy { grid-area: copy; align-self: end; }
.top > .boxart { grid-area: art; width: 100%; max-width: 300px; height: auto; justify-self: center; }
.top > .parts { grid-area: parts; }
.nav-links a[aria-current="page"] { color: var(--blue-600); text-decoration: underline; }
h1 { font-weight: 900; font-size: clamp(2.75rem, 1.4rem + 3.4vw, 5rem); line-height: 0.96; letter-spacing: -0.04em; max-width: 13ch; text-wrap: balance; }
.lede { margin-top: 18px; font-size: 20px; line-height: 1.5; max-width: 46ch; }
.ctas { display: flex; align-items: center; gap: 24px; margin-top: 26px; flex-wrap: wrap; }

.parts { background: var(--paper); border: var(--key); border-radius: var(--r); padding: 18px 20px; }
.parts h2 { font-size: 16px; font-weight: 900; margin-bottom: 12px; }
.parts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.parts li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; line-height: 1.25; }
.part { width: 40px; height: 40px; flex: none; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--sun); display: grid; place-items: center; }
.part svg { width: 20px; height: 20px; }
.x { margin-left: auto; font-weight: 900; color: var(--blue); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* Subgrid: header, scene and caption rows line up across every frame in a row, so titles share a baseline however they wrap. */
.step { position: relative; background: rgba(255, 255, 255, 0.6); border: var(--key); border-radius: var(--r); padding: 14px 16px 16px; display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 6px; }
.step p { align-self: start; }
.step-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.n { font-weight: 900; font-size: 64px; line-height: 0.85; letter-spacing: -0.04em; }
.callout { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; padding: 6px 10px 6px 6px; }
.callout img { height: 34px; width: auto; }
.callout span { font-weight: 900; font-size: 15px; color: var(--blue); }
.step .scene { width: 100%; max-width: 178px; height: auto; margin: 0 auto; align-self: center; }
.step p { font-weight: 800; font-size: 17px; line-height: 1.3; }
.step p span { display: block; font-weight: 600; font-size: 15px; color: var(--ink-2); min-height: 2.9em; }

/* What you're building */
.build { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.panel { background: var(--paper); border: var(--key); border-radius: 24px; padding: clamp(24px, 3vw, 40px); }
.panel-income { grid-column: 1 / 8; }
.income-svg { width: 100%; max-width: 520px; height: auto; margin-top: 20px; }
.panel-tools { grid-column: 8 / 13; }
.panel-income > img { width: 100%; max-width: 340px; height: auto; justify-self: center; }
.panel h3 { font-weight: 900; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.panel p { margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.legend { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 16px; }
.swatch { width: 26px; height: 18px; border: 2.5px solid var(--ink); border-radius: 5px; flex: none; }
.toolparts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toolparts li { display: flex; justify-content: space-between; align-items: center; border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 15px; background: var(--page-2); }
.toolparts li span { color: var(--blue-600); font-weight: 900; }
.panel-tools .link { margin-top: 12px; }

/* Completed builds: the hires */
/* "76 placed" shown as the plate itself, then one featured intro and two beside it. */
.placed { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.placed-art { width: 100%; max-width: 400px; height: auto; }
.hires { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px; margin-top: 40px; }
.hires { align-items: start; }
.hire-lead { grid-row: span 2; }
.hire-lead strong { font-size: 28px; }
.hires .hire:not(.hire-lead) .clip video { aspect-ratio: 16 / 9; }
.hire { background: var(--paper); border: var(--key); border-radius: 22px; padding: 14px; }
.clip { position: relative; border-radius: 12px; border: 2.5px solid var(--ink); overflow: hidden; background: var(--ink); }
.clip video { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; border: var(--key); background: var(--paper); color: var(--blue); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 18px rgba(6, 26, 64, 0.25); transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.play:hover { transform: scale(1.06); }
.play svg { width: 28px; height: 28px; margin-left: 3px; }
.clip.is-playing .play { opacity: 0; pointer-events: none; }
.hire-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 12px; }
.hire strong { font-size: 20px; font-weight: 900; }
.hire .callout img { height: 32px; }
.callout-dark { background: #0b2556; border-color: var(--blue-100); }
.callout-dark span { color: var(--sun); }
.hire a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-weight: 800; font-size: 15px; }

/* Placed at: logos as tiles on a stud plate */
.plate { margin-top: 48px; background: #eef3fb; border: var(--key); border-radius: 26px; padding: clamp(18px, 2.4vw, 32px);
  background-image: radial-gradient(circle at 14px 14px, #fff 5px, rgba(6, 26, 64, 0.35) 5.6px, transparent 6.4px);
  background-size: 28px 28px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tile { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; height: 88px; display: grid; place-items: center; padding: 10px 14px; }
.tile img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }
.plate-note { margin-top: 14px; font-weight: 900; font-size: 18px; color: var(--ink); }

/* For companies: the booklet's dark spread */
.companies { margin-top: clamp(80px, 9vw, 140px); background: var(--ink); color: var(--paper); border-radius: 32px; padding: clamp(32px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.companies .h2 { color: var(--paper); }
.companies p { margin-top: 18px; font-size: 20px; line-height: 1.55; color: var(--blue-100); max-width: 48ch; }
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; font-weight: 800; font-size: 18px; }
.checks li { display: flex; gap: 12px; align-items: center; }
.checks svg { width: 24px; height: 24px; flex: none; }
.companies .ctas { margin-top: 32px; }
.companies .btn-paper { box-shadow: 0 4px 0 #020b1f; }
.companies figure { margin: 0; background: #0b2556; border-radius: 24px; padding: 24px; }
.companies figure img { width: 100%; height: auto; }
.companies figcaption { margin-top: 12px; font-weight: 700; color: var(--blue-100); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }

/* Questions */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.faq-head { grid-column: 1 / 5; }
.faq-list { grid-column: 5 / 13; display: grid; gap: 12px; }
.faq details { background: var(--paper); border: var(--key); border-radius: 16px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 16px; font-weight: 900; font-size: 19px; }
.faq summary .q { flex: 1; }
.q-ico { width: 38px; height: 38px; flex: none; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--sun); display: grid; place-items: center; }
.q-ico svg { width: 20px; height: 20px; }
.faq details p { padding-left: 68px !important; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); rotate: 45deg; translate: 0 -4px; transition: rotate 250ms var(--ease-out); flex: none; }
.faq details[open] summary::after { rotate: -135deg; translate: 0 4px; }
.faq summary:hover { color: var(--blue); }
.faq details p { padding: 0 22px 22px; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }

/* Back cover */
.back { margin-block: clamp(80px, 9vw, 140px) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--ad-grad); color: var(--paper); border: var(--key); border-radius: 32px; padding: clamp(32px, 5vw, 64px); }
.back .h2 { color: var(--paper); }
.back p { margin-top: 16px; font-size: 20px; line-height: 1.5; max-width: 40ch; color: var(--blue-100); }
.back .btn-paper { margin-top: 28px; border-radius: 999px; }

/* Ad panel: the hero set on the campaign gradient, with white type and the ads' white pill button. The box art sits
   on a light studded card, the face of the box, so the blue briefcase keeps its contrast against the blue. */
.ad-panel { background: var(--ad-grad); color: var(--paper); border: var(--key); border-radius: 32px; padding: clamp(24px, 3.4vw, 48px); }
.ad-panel h1 { color: var(--paper); }
.ad-panel .lede { color: var(--blue-100); }
.ad-panel .link { color: var(--paper); }
.ad-panel .btn-paper { border-radius: 999px; }
.ad-panel .btn-paper:hover { background: var(--blue-100); }
.ad-panel .parts { color: var(--ink); }
.boxface { background-color: var(--paper); background-image: radial-gradient(circle at 12px 12px, rgba(6, 26, 64, 0.08) 2.2px, transparent 2.6px);
  background-size: var(--stud) var(--stud); border: var(--key); border-radius: 24px; padding: 14px; }
.back img { width: 100%; max-width: 520px; height: auto; justify-self: center; }

/* Footer: a full-width navy band, the booklet's back page. Brand and actions on the left, four link columns on the
   right, every channel from the Beacons page in one row of glyphs, then the fine print. */
.site-foot { margin-top: clamp(72px, 8vw, 120px); background-color: var(--ink); color: var(--paper);
  background-image: radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.05) 2.2px, transparent 2.6px); background-size: var(--stud) var(--stud); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.foot-inner { padding-block: clamp(48px, 6vw, 80px) 28px; }
.foot-top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.6fr); gap: clamp(32px, 5vw, 80px); }
.foot-name { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.foot-line { margin-top: 6px; font-weight: 800; font-size: 17px; color: var(--blue-100); }
.foot-about { margin-top: 16px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); max-width: 36ch; }
.foot-apply { margin-top: 24px; border-radius: 999px; box-shadow: none; }
.foot-apply:hover { background: var(--blue-100); }
.foot-chat { margin-top: 18px; font-size: 15px; line-height: 2; color: rgba(255, 255, 255, 0.82); }
.foot-chat a { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-weight: 800; color: var(--paper); text-underline-offset: 4px; }
.foot-chat svg { width: 17px; height: 17px; fill: currentColor; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 32px; }
.foot-h { font-weight: 900; font-size: 15px; letter-spacing: 0.01em; color: var(--paper); }
.foot-col ul, .foot-social ul { list-style: none; margin: 0; padding: 0; }
.foot-col ul { margin-top: 14px; display: grid; gap: 2px; }
.foot-col--tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.foot-col a { display: inline-block; padding-block: 6px; font-weight: 600; font-size: 15.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.foot-col a:hover, .foot-base a:hover { color: var(--paper); text-decoration: underline; }
.foot-more { margin-top: 10px; color: var(--paper) !important; font-weight: 800 !important; }
.foot-social { margin-top: clamp(40px, 5vw, 64px); padding-block: 24px; border-block: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.foot-social ul { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: var(--paper);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.foot-social a:hover { background: var(--paper); color: var(--ink); }
.foot-social svg { width: 19px; height: 19px; fill: currentColor; }
.foot-base { padding-top: 22px; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.foot-base a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-base { align-items: center; }
.site-foot :focus-visible { outline-color: var(--sun); }
@media (max-width: 1080px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-about { max-width: 60ch; }
}
@media (max-width: 760px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot-col--tools, .foot-col--wide { grid-column: 1 / -1; }
  .foot-col a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .foot-social { flex-direction: column; align-items: flex-start; }
}

/* One authored moment: each step's piece drops onto its seat once, in order. */
.js .step .scene { opacity: 0; translate: 0 -24px; }
.js .step.is-in .scene { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease-out), translate 700ms var(--ease-out); transition-delay: calc(var(--i) * 140ms); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .step .scene { opacity: 1; translate: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

@media (max-width: 1080px) {
  .panel-income, .panel-tools { grid-column: 1 / -1; }
  .parts ul { grid-template-columns: 1fr; }
  .companies, .back { grid-template-columns: 1fr; }
  .faq-head, .faq-list { grid-column: 1 / -1; }
  .plate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr; }
  .top { grid-template-columns: 1fr; grid-template-areas: "copy" "art" "parts"; gap: 16px; }
  .boxart { max-width: 240px; }
  .placed, .hires { grid-template-columns: 1fr; }
  .hire-lead { grid-row: auto; }
  .faq details p { padding-left: 22px !important; }
  .parts ul { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .n { font-size: 44px; }
  .callout img { height: 26px; }
  .callout span { font-size: 13px; }
  .panel-income { grid-template-columns: 1fr; }
  .hires { grid-template-columns: 1fr; }
  .toolparts { grid-template-columns: 1fr; }
  .plate { grid-template-columns: repeat(2, 1fr); }
}

/* The cover panel stays compact so the four steps still finish inside the first screen. */
.top.ad-panel { padding-block: clamp(20px, 2.6vw, 34px); }
.top.ad-panel > .boxart { max-width: 244px; }
.cover .step .scene { max-width: 158px; }
.co-cover.ad-panel .co-art { width: min(100%, 440px); }
.ad-panel h1 { max-width: 16ch; }
.cover { gap: 24px; }
/* Secondary text on the campaign gradient is white, as in the ads: pale blue falls under 4.5:1 on its lighter top. */
.ad-panel .lede, .back p, .order p { color: var(--paper); }

/* Phone dock: the page's main action pinned to the bottom edge once the cover has scrolled away (site.js). */
.dock { display: none; }
@media (max-width: 760px) {
  .dock { position: fixed; inset: auto 0 0; z-index: 40; display: flex; align-items: center; gap: 14px; justify-content: space-between;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: var(--key);
    box-shadow: 0 -10px 24px rgba(6, 26, 64, 0.12); translate: 0 110%; visibility: hidden;
    transition: translate 300ms var(--ease-out), visibility 0s linear 300ms; }
  .dock.is-on { translate: 0 0; visibility: visible; transition: translate 300ms var(--ease-out); }
  .dock-note { font-weight: 800; font-size: 14px; line-height: 1.3; color: var(--ink-2); max-width: 18ch; }
  .dock-btn { flex: none; border-radius: 999px; min-height: 48px; box-shadow: none; }
}

/* Story scroll. Each spread ends on a folio, the booklet's page number, with the next page's title as a link down. */
.h2[id] { scroll-margin-top: 24px; }
.folio { display: flex; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.folio::before { content: ""; flex: 1; height: 2px; background: rgba(6, 26, 64, 0.16); border-radius: 2px; }
.folio a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 800; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.folio-n { display: inline-grid; place-items: center; grid-auto-flow: column; height: 32px; padding: 0 9px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 8px; color: var(--ink); font-weight: 900; font-size: 15px; }
.folio-of { color: var(--ink-2); font-weight: 700; }
.folio svg { width: 18px; height: 18px; transition: translate 200ms var(--ease-out); }
.folio a:hover { color: var(--blue-600); }
.folio a:hover svg { translate: 0 3px; }
#companies .folio::before { background: rgba(6, 26, 64, 0.16); }

/* Reading progress along the top edge, driven by the scroll position itself where the browser supports it. */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress { display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 4px; background: var(--blue); transform-origin: 0 50%;
    animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { from { scale: 0 1; } to { scale: 1 1; } }
}

/* Spreads rise into place once as they enter. The hiding is plain CSS keyed to the .js class set in the head, so
   site.js only adds .is-in as each spread enters and restyles nothing at startup; without the script, or with
   reduced motion, every spread is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .spread > * { opacity: 0; translate: 0 28px; transition: opacity 600ms var(--ease-out), translate 800ms var(--ease-out); }
  .js .spread > :nth-child(2) { transition-delay: 90ms; }
  .js .spread > :nth-child(n + 3) { transition-delay: 180ms; }
  .js .spread.is-in > * { opacity: 1; translate: none; }
}

/* Visually hidden, still read aloud. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Depth: solid shadows and graded surfaces. Every raised piece sits on a solid navy base, like a brick on its
   plate, and paper surfaces carry a faint top to bottom grade. Hover lifts a piece by deepening its base;
   pressing pushes it down onto it. Large panels add one soft shadow of air underneath. */
:root {
  --base-sm: 0 4px 0 var(--ink);
  --base: 0 6px 0 var(--ink);
  --base-lg: 0 10px 0 var(--ink);
  --air: 0 28px 44px -22px rgba(6, 26, 64, 0.5);
  --grade-paper: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
  --grade-sky: linear-gradient(180deg, #f7faff 0%, #e1edff 100%);
  --grade-blue: linear-gradient(180deg, #2f80ff 0%, #0058e8 100%);
  --sheen: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
}
body { background-image: radial-gradient(circle at 12px 12px, rgba(6, 26, 64, 0.09) 2.2px, transparent 2.6px), linear-gradient(180deg, #dcebff 0%, var(--page) 30%, #c4dcfb 100%);
  background-size: var(--stud) var(--stud), 100% 100%; }

.btn { transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out); }
.btn-blue { background: var(--grade-blue); box-shadow: var(--base-sm); }
.btn-blue:hover { background: linear-gradient(180deg, #1f74ff 0%, #004dd0 100%); transform: translateY(-2px); box-shadow: var(--base); }
.btn-paper { background: var(--grade-paper); box-shadow: var(--base-sm); }
.btn-paper:hover { background: linear-gradient(180deg, #ffffff 0%, #e2eeff 100%); transform: translateY(-2px); box-shadow: var(--base); }
.btn-blue:active, .btn-paper:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.ad-panel .btn-paper:hover { background: linear-gradient(180deg, #ffffff 0%, #d6e7ff 100%); }

.ad-panel, .back { background: var(--sheen), var(--ad-grad); box-shadow: var(--base-lg), var(--air); }
.panel, .hire { background: var(--grade-paper); box-shadow: var(--base), var(--air); }
.step { background: var(--grade-sky); box-shadow: var(--base-sm); }
.parts, .boxface, .faq details, .nav-toggle { box-shadow: var(--base-sm); }
.parts, .faq details { background: var(--grade-paper); }
.callout, .toolparts li, .folio-n { box-shadow: 0 3px 0 var(--ink); }
.companies { background: radial-gradient(110% 90% at 100% 0%, rgba(0, 102, 255, 0.4), transparent 60%), var(--ink); box-shadow: 0 10px 0 #020b1f, var(--air); }
.plate { box-shadow: var(--base), var(--air); }
.tile { background: var(--grade-paper); box-shadow: var(--base-sm); }

/* Hire intros: the clip fills the card, the name sits on a shade at its foot, and the play button opens the
   full intro with sound. A ring breathes around the button so it reads as playable without covering a face. */
.hire { padding: 10px; }
.clip { border-radius: 14px; isolation: isolate; }
.clip::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 26, 64, 0) 48%, rgba(6, 26, 64, 0.82) 100%); }
.clip video { transition: scale 900ms var(--ease-out); }
.hire:hover .clip video { scale: 1.04; }
.clip .hire-row { position: absolute; left: 14px; right: 88px; bottom: 14px; z-index: 2; margin: 0; justify-content: flex-start; flex-wrap: wrap; }
.clip .hire-row strong { color: var(--paper); text-shadow: 0 1px 3px rgba(6, 26, 64, 0.7); }
.play { z-index: 3; left: auto; top: auto; right: 14px; bottom: 14px; translate: none; width: 62px; height: 62px; background: var(--grade-blue); color: var(--paper);
  box-shadow: var(--base-sm); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.play:hover { transform: translateY(-2px); box-shadow: var(--base); }
.play:active { transform: translateY(4px); box-shadow: none; }
.play::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.8); animation: ring 2.6s var(--ease-out) infinite; pointer-events: none; }
@keyframes ring { 0% { scale: 0.86; opacity: 0.95; } 100% { scale: 1.32; opacity: 0; } }
.clip.is-playing .play { opacity: 1; pointer-events: auto; }
.hire-lead .play { width: 72px; height: 72px; }

/* The full intro, in a dialog over a darkened page. */
.theater { width: min(1000px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.theater::backdrop { background: rgba(4, 16, 42, 0.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.theater-box { position: relative; background: linear-gradient(180deg, #0d2a5e 0%, var(--ink) 100%); border: 3px solid var(--blue-100); border-radius: 22px; padding: 14px;
  box-shadow: 0 10px 0 #020b1f, 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.theater-title { color: var(--paper); font-weight: 900; font-size: 18px; padding: 6px 60px 12px 6px; }
.theater-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 2.5px solid var(--blue-100); border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: var(--paper); cursor: pointer; }
.theater-close:hover { background: rgba(255, 255, 255, 0.16); }
.theater-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.theater video { display: block; width: 100%; max-height: 76vh; border-radius: 12px; background: #000; }

/* Moving logos: 2 rows drift in opposite directions across the stud plate. Hover, focus or the pause button
   stops them, and reduced motion lays them out as a still grid. */
.plate.plate--moving { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-inline: 0; overflow: hidden; }
/* No edge fade: a fade would let the plate's studs show through the tiles. The tiles clip under the plate's frame instead. */
.marquee { overflow: hidden; padding-bottom: 6px; }
.marquee-track { display: flex; width: max-content; animation: drift 48s linear infinite; }
.marquee--rev .marquee-track { animation-direction: reverse; animation-duration: 54s; }
.marquee-set { display: flex; gap: 14px; padding-right: 14px; }
.marquee .tile { flex: none; width: 210px; height: 92px; }
.plate--moving:hover .marquee-track, .plate--moving:focus-within .marquee-track, .plate--moving.is-paused .marquee-track { animation-play-state: paused; }
@keyframes drift { to { translate: -50% 0; } }
.plate-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.plate-foot .plate-note { margin: 0; }
.marquee-toggle { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--grade-paper);
  color: var(--ink); box-shadow: var(--base-sm); cursor: pointer; }
.marquee-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.marquee-toggle .i-play { display: none; fill: currentColor; stroke: none; }
.marquee-toggle[aria-pressed="true"] .i-play { display: block; }
.marquee-toggle[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 760px) {
  .marquee .tile { width: 156px; height: 76px; }
  .clip .hire-row { right: 80px; }
  .play, .hire-lead .play { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .play::before { animation: none; opacity: 0; }
  .marquee-track { animation: none; width: auto; }
  .marquee { padding-inline: 16px; }
  .marquee-set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee-set[aria-hidden="true"], .marquee-toggle { display: none; }
}

/* Flags beside the hire names: a small framed card, like a sticker on the clip. */
.hire-row .flag { display: inline-block; width: 28px; height: 21px; object-fit: cover; border: 2px solid var(--paper); border-radius: 4px; box-shadow: 0 2px 0 var(--ink); }
.clip .hire-row { align-items: center; gap: 10px; }

/* A solid colour under every gradient panel: what shows if the gradient cannot paint, and what contrast is measured against. */
.ad-panel, .back { background-color: #0b3a86; }

/* Hire cards are the clip itself: one framed piece on its base, no second frame around it. */
.hire { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.hire .clip { border: var(--key); border-radius: 22px; box-shadow: var(--base), var(--air); }

/* Logo tiles lie flat on their plate: the plate carries the base, the tiles are not pressable. */
.plate .tile { box-shadow: none; }
.ad-panel .parts, .ad-panel .boxface { box-shadow: none; }

/* Alive: everything you can point at answers the pointer. Pieces lift on their base, brick art rises a little,
   the box art tilts toward the pointer and the campaign panels catch a light that follows it (site.js sets
   --mx, --my and the tilt). Only for a mouse or trackpad, and never under reduced motion. */
.ad-panel, .back { background-image: radial-gradient(560px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.16), transparent 60%), var(--sheen), var(--ad-grad); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .step, .panel, .faq details, .toolparts li, .callout, .plate .tile, .foot-social a, .index a, .shelf-callout, .legal-toc a, .pb-contents ol a, .co-side > *, .spec-list {
    transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 220ms var(--ease-out), color 220ms var(--ease-out); }
  .step:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--ink); }
  .step .scene { transition: transform 460ms var(--ease-out); }
  .step:hover .scene { transform: translateY(-8px) rotate(-1.5deg); }
  .panel:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink), var(--air); }
  .faq details:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
  .toolparts li:hover, .callout:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
  .plate .tile:hover { transform: translateY(-4px); box-shadow: 0 5px 0 var(--ink); }
  .shelf-callout:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
  .foot-social a:hover { transform: translateY(-3px); }
  .hire .clip { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
  .hire:hover .clip { transform: translateY(-4px); box-shadow: 0 10px 0 var(--ink), var(--air); }
  .placed-art, .back img, .companies figure img, .catalogue-art, .co-proof img { transition: transform 700ms var(--ease-out); }
  .placed:hover .placed-art, .co-proof:hover img { transform: translateY(-8px) rotate(-1deg); }
  .back:hover img { transform: translateY(-8px) rotate(1.5deg); }
  .companies:hover figure img { transform: translateY(-6px); }
  .catalogue-head:hover .catalogue-art { transform: translateY(-6px) rotate(-1deg); }
  [data-tilt] { transition: transform 500ms var(--ease-out); will-change: transform; }
  .nav-links a:not(.btn) { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size 260ms var(--ease-out), color 160ms; }
  .nav-links a:not(.btn):hover, .nav-links a[aria-current] { text-decoration: none; background-size: 100% 2px; }
}

/* Keep learning: the newsletter as the lead piece on the campaign gradient, then the library and the channels as
   paper pieces. Counts are the accounts' own (November 2026); update them with the accounts. */
.learn-head { max-width: 760px; }
.learn { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 20px; }
.learn-news { grid-row: span 2; display: grid; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 36px); color: var(--paper); text-decoration: none; border: var(--key); border-radius: 26px;
  background-color: #0b3a86; background-image: var(--sheen), var(--ad-grad); box-shadow: var(--base), var(--air); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.learn-news:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink), var(--air); }
.learn-news .learn-glyph { justify-self: start; background: var(--paper); color: var(--ink); }
.learn-news .learn-title { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--paper); }
.learn-news .learn-text { font-size: 19px; color: var(--paper); }
.learn-count { margin-top: 8px; font-weight: 800; font-size: 17px; }
.learn-count .num { font-weight: 900; font-size: 34px; letter-spacing: -0.02em; margin-right: 6px; }
.learn-btn { justify-self: start; margin-top: 14px; border-radius: 999px; }
.learn-glyph { width: 48px; height: 48px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--page-2); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.learn-glyph svg { width: 22px; height: 22px; fill: currentColor; }
.learn-glyph--book { background: var(--paper); }
.learn-glyph--book img { width: 34px; height: auto; }
.learn-title { margin-top: 8px; font-weight: 900; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; }
.learn-text { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.learn-text .num { font-weight: 900; color: var(--ink); }
@media (max-width: 1080px) {
  .learn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-news { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .learn { grid-template-columns: 1fr; gap: 16px; }
}

/* Keep learning, as one composed piece: the newsletter leads on the campaign gradient, the other places sit as rows
   of one paper list, not as a grid of look-alike cards. */
.learn { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; align-items: stretch; }
.learn-news { grid-row: auto; }
.learn-list { list-style: none; margin: 0; padding: 10px; display: grid; gap: 4px; background: var(--grade-paper); border: var(--key); border-radius: 26px; box-shadow: var(--base), var(--air); }
.learn-list a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 16px; color: var(--ink); text-decoration: none;
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.learn-list a:hover { background: var(--page-2); }
.learn-row { display: grid; gap: 2px; }
.learn-list .learn-title { margin-top: 0; font-size: 19px; }
.learn-list .learn-text { font-size: 16px; }
.learn-arrow { width: 22px; height: 22px; color: var(--blue-600); transition: translate 200ms var(--ease-out); }
.learn-list a:hover .learn-arrow { translate: 4px 0; }
@media (max-width: 1080px) {
  .learn { grid-template-columns: 1fr; }
  .learn-news { grid-column: auto; }
}
@media (max-width: 640px) {
  .learn-list { padding: 6px; }
  .learn-list a { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; padding: 12px 10px; }
  .learn-list .learn-text { font-size: 15px; }
}

/* Logo tiles are flat white, so a logo never shows a faint box against a grade. */
.tile, .plate .tile { background: var(--paper); }

/* Graded studs: the dot grid sits on its own fixed layer, strongest at the edges and the top and fading behind the
   reading column, so the texture frames the content instead of competing with it. */
body { background-image: linear-gradient(180deg, #dcebff 0%, var(--page) 30%, #c4dcfb 100%); background-size: 100% 100%; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 12px 12px, rgba(6, 26, 64, 0.14) 2.2px, transparent 2.6px); background-size: var(--stud) var(--stud);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 40%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%);
  mask-image: radial-gradient(120% 85% at 50% 40%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%); }

/* Companies step 2: the real intros, fanned like cards on the table, with one play mark. */
.intro-stack { position: relative; display: block; width: 100%; max-width: 230px; aspect-ratio: 230 / 150; margin: 0 auto; align-self: center; }
.intro-stack img { position: absolute; width: 62%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); background: var(--ink); }
.intro-stack img:nth-child(1) { left: 0; top: 14%; rotate: -8deg; }
.intro-stack img:nth-child(2) { right: 0; top: 14%; rotate: 8deg; }
.intro-stack img:nth-child(3) { left: 19%; top: 0; width: 64%; z-index: 1; }
.intro-play { position: absolute; z-index: 2; left: 50%; top: 34%; translate: -50% -50%; width: 40px; height: 40px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%;
  background: var(--grade-blue); color: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.intro-play svg { width: 18px; height: 18px; margin-left: 2px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .intro-stack img { transition: rotate 400ms var(--ease-out), translate 400ms var(--ease-out); }
  .step:hover .intro-stack img:nth-child(1) { rotate: -12deg; translate: -6px 0; }
  .step:hover .intro-stack img:nth-child(2) { rotate: 12deg; translate: 6px 0; }
}

/* The browse card: one helpful next step, offered once while a visitor browses (site.js). Never on phones, where
   the dock already carries the page's action. */
.browse-card { position: fixed; left: 24px; bottom: 24px; z-index: 45; width: min(360px, calc(100vw - 48px)); display: grid; gap: 8px; padding: 20px 22px 20px;
  background: var(--grade-paper); border: var(--key); border-radius: 22px; box-shadow: var(--base), var(--air); color: var(--ink);
  translate: 0 calc(100% + 40px); visibility: hidden; transition: translate 420ms var(--ease-out), visibility 0s linear 420ms; }
.browse-card.is-on { translate: 0 0; visibility: visible; transition: translate 420ms var(--ease-out); }
.browse-title { padding-right: 36px; font-weight: 900; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.browse-text { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.browse-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; }
.browse-actions .btn { border-radius: 999px; padding: 11px 18px; font-size: 16px; }
.browse-actions .link { font-size: 15px; }
.browse-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.browse-close:hover { background: var(--page-2); }
.browse-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
@media (max-width: 760px) { .browse-card { display: none; } }
.browse-card.is-on.is-away { translate: 0 calc(100% + 40px); }

/* Keyboard users can jump past the bar: the link sits off screen until it has focus. */
.skip { position: absolute; left: 16px; top: -120px; z-index: 60; padding: 12px 18px; background: var(--ink); color: var(--paper); font-weight: 800; border-radius: 12px; text-decoration: none; }
.skip:focus { top: 16px; }

/* The main headings balance their lines. Kept to h1 and h2: balancing every paragraph costs layout time on phones. */
h1, h2 { text-wrap: balance; }

/* Hire grid: the two small intros share the lead video's height exactly, so both columns end on one line. */
@media (min-width: 1081px) {
  .hires { align-items: stretch; grid-template-rows: 1fr 1fr; }
  .hires .hire:not(.hire-lead) { display: flex; }
  .hires .hire:not(.hire-lead) .clip { flex: 1; min-height: 0; }
  .hires .hire:not(.hire-lead) .clip video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
/* Between phone and desktop the stacked panels keep their art at a readable size instead of filling the column. */
@media (min-width: 761px) and (max-width: 1080px) {
  .back img { max-width: 300px; }
  .income-svg { max-width: 420px; justify-self: center; }
}
/* Button icons keep their size when the label is long. */
.btn svg { flex: none; }

/* Sections below the first screen skip layout until they near the viewport, on every page. Only the block size is
   estimated, and in-page jumps are instant (no smooth scroll), so scroll anchoring keeps each target in place. */
.spread { content-visibility: auto; contain-intrinsic-block-size: auto 900px; }
/* In-page jumps stop a little below the top edge, not flush against it. */
h2[id] { scroll-margin-top: 24px; }
.js .spread.no-anim > * { transition: none; }