/* ============================================================
   Radius Hire, phone layer (10 Oct 2026)
   Loaded last on every page, English and Dutch. Everything sits inside @media (max-width: 760px): a laptop or a
   tablet never sees a rule of this file. phone.js (same folder) is its partner.

   Why: Mark opened the preview on his phone and found problems "almost everywhere". Measured on four phones
   (iPhone SE, iPhone 15, iPhone 15 Pro Max, a 360px Android) in the Safari and Chrome engines, and looked at
   screen by screen, all 93 pages. His rules, which this file applies:
     - the opening screen is exactly one screen, with its title, text, button and picture inside it;
     - sections are sized for the screen: one rhythm between them, no empty bands, a row's text and its picture
       read together;
     - text never cut, never spilling out of its box, never one word on its own line, headings step down;
     - nothing arrives empty: content is there when the reader is.
   !important is used on purpose: several pages set their phone rules in inline <style> blocks further down the
   page, and this layer has to win over them without editing them.
   ============================================================ */

@media (max-width: 760px) {

  /* ---------- 1. the bars ----------
     Bar 32px + nav 64px took 15% of an iPhone screen, 22% on an article with its "On this page" bar. The nav is
     56px now, and once the page moves the announcement bar slides away (phone.js sets html.rh-up after 40px), so
     only the nav stays: 8.5% of the screen. The hero paddings below count the bar, because it is there at load. */
  :root { --rh-nav: 56px; --fl-top: calc(var(--tb-h, 32px) + 56px) !important; }
  body { --nav-h: 56px; }
  .nav__inner { height: 56px !important; }
  .topbar, .nav { transition: transform .32s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s, box-shadow .35s !important; }
  html.rh-up .topbar { transform: translateY(-100%); }
  html.rh-up .nav { transform: translateY(calc(-1 * var(--tb-h, 32px))); }
  html.rh-up body.no-bar .nav { transform: none; }
  /* what sticks under the nav moves up with it */
  .fl-toc, .fl-essay > .fl-toc--essay, .fl-progress, .fl-switch.is-stuck .fl-switch__in { transition: top .32s cubic-bezier(.2,.7,.2,1), opacity .6s, transform .6s !important; }
  html.rh-up .fl-toc, html.rh-up .fl-essay > .fl-toc--essay { top: var(--rh-nav) !important; }
  html.rh-up .fl-progress, html.rh-up .fl-switch.is-stuck .fl-switch__in, html.rh-up .fl-filter { top: var(--rh-nav) !important; }
  .fl-filter { transition: top .32s cubic-bezier(.2,.7,.2,1) !important; }
  /* the bars are solid on a phone: text scrolling under a see-through bar showed through it */
  .nav.scrolled, body.light-nav .nav { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .fl-filter { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .fl-toc__bar, .fl-toc--essay .fl-toc__bar { background: var(--paper) !important; }
  /* headings that hold while a column scrolls past them only make sense beside that column: on a phone they float
     over the questions, so they stay in place */
  .faq__head, .stk__head, .faq__rail, .art-toc, .fl-appendix h2 { position: static !important; }
  .fl-toc__bar, .fl-toc--essay .fl-toc__bar { min-height: 44px !important; }
  /* the contents bar reads as contents: a list mark, where you are, the section, the arrow (phone.js 8) */
  .fl-toc__bar { justify-content: flex-start !important; gap: 10px !important; }
  .fl-toc__bar .rh-toc-ico { flex: none; width: 17px; height: 13px; fill: var(--fl-bright, #2f6beb); }
  .fl-toc__bar .rh-toc-n { flex: none; font: 700 13px/1 var(--font-display); color: var(--fl-bright, #2f6beb); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .fl-toc__bar .rh-toc-n:empty { display: none; }
  .fl-toc__bar .rh-toc-n--all::after { content: " \00b7"; }
  .fl-toc__bar .fl-toc__now { flex: 1 1 auto; min-width: 0; }
  .fl-toc__bar > .icon { margin-left: auto; }
  .fl-toc__panel, .fl-toc--essay .fl-toc__panel { top: 44px !important; }

  /* ---------- 2. the opening screen is one screen ----------
     Measured: 0.56 to 1.96 screens, depending on the page. Now exactly 100svh on every page with a hero. */
  body.home-page section.hero,
  section.phero, section.atx-hero, section.chero, section.dln-hero,
  section.aud-hero, body.ind-page section.oli-hero {
    box-sizing: border-box !important;
    height: 100svh !important; min-height: 0 !important; max-height: none !important;
    overflow: hidden !important;
  }
  /* the home page: title, line and button at the top, the crowd photograph on the bottom edge */
  body.home-page section.hero { padding-top: calc(var(--tb-h, 32px) + var(--rh-nav) + 28px) !important; padding-bottom: 0 !important; }

  /* product, about, sector-list and FAQ pages: the words, then the stage takes what is left of the screen.
     The product picture in the stage is shown WHOLE (Mark, 10 Oct: "the UIs and the pictures are not even fully
     displayed on the phone"): phone.js lays it out at its natural height and shrinks it as a whole to the room
     (his rules: a UI wider than its frame scales as a whole; the product window's bottom edge is visible). No fade,
     no cut. On a phone too short to show it at 72% or more, the opening grows to hold it instead (section.rh-grow). */
  section.phero, section.atx-hero, section.chero {
    display: flex !important; flex-direction: column !important;
    padding-top: calc(var(--tb-h, 32px) + var(--rh-nav) + 16px) !important; padding-bottom: 12px !important;
  }
  section.phero > .wrap, section.atx-hero > .wrap { flex: none !important; }
  section.phero > .wrap .sub, section.atx-hero > .wrap .lead { margin-top: 12px !important; }
  section.phero .phero__cta, section.atx-hero .atx-hero__cta { margin-top: 16px !important; }
  section.phero > .phero__stage, section.atx-hero > .atx-hero__stage {
    flex: 1 1 0 !important; min-height: 150px !important; height: auto !important; aspect-ratio: auto !important;
    margin-top: 16px !important; margin-bottom: 0 !important;
  }
  section.phero > .phero__stage > .phero__inner { height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; }
  section.atx-hero > .atx-hero__stage > .atx-stage, section.phero > .phero__stage--chain > .chain { height: auto !important; max-height: none !important; }
  [data-rh-fit-box] { display: grid !important; place-items: center !important; overflow: hidden !important; }
  [data-rh-fit] { margin-left: auto !important; margin-right: auto !important; flex: none !important; }   /* never shrunk by a flex box: the picture is scaled as a whole instead (the ATS board was cut on the iPhone SE) */
  section.rh-grow { height: auto !important; min-height: 100svh !important; }
  section.rh-grow > .phero__stage, section.rh-grow > .atx-hero__stage, section.rh-grow > .chero__grid, section.rh-grow .chero__grid > .loop { flex: none !important; height: auto !important; }
  section.rh-grow > .phero__stage > .phero__inner,
  section.phero.rh-grow > .phero__stage:has(> .phero__inner):has(> .note-ex) > .phero__inner { height: auto !important; flex: none !important; }   /* sized by its picture (Radius Talent's card was cut to 105px; the :has rule below out-ranked a plain one) */
  /* the AI Interviewer film is laid over its stage, so a grown opening would leave it its 150px minimum (her face
     and her words then shared 150px on the iPhone SE): it keeps 250px */
  section.rh-grow > .phero__stage.ivstage { height: 250px !important; }
  section.rh-grow > .phero__stage.ivstage > .phero__inner { flex: 1 1 auto !important; width: 100% !important; height: 100% !important; }   /* its film and glass are laid over it: it fills the stage */
  /* a photo opening whose words do not fit one screen (Dutch on the iPhone SE): it grows, the photo keeps 170px */
  section.aud-hero.rh-grow, body.ind-page section.oli-hero.rh-grow { height: auto !important; min-height: 100svh !important; }
  section.aud-hero.rh-grow .aud-hero__bg, body.ind-page section.oli-hero.rh-grow .oli-hero__photo { flex: none !important; height: 110px !important; }   /* at 170 the first button fell 5 to 15px under the iPhone SE's screen */
  /* what each opening picture keeps on a phone, so it fits whole at a readable size */
  /* AI Sourcer: the five channels in one row and the applicants arriving (the careers window and the hub go) */
  .srx-phero .rx-cw, .srx-phero .rx-hubwrap, .srx-phero .rx-drops { display: none !important; }
  .srx-phero .rx { width: 100% !important; max-width: 360px !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; }
  .srx-phero .rx-chns { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; }
  .srx-phero .rx-chn { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; grid-template-areas: none !important;
    justify-items: center !important; align-items: center !important; row-gap: 8px !important; padding: 10px 2px !important; min-height: 0 !important; }
  .srx-phero .rx-chn > b, .srx-phero .rx-chn > i { display: none !important; }
  .srx-phero .rx-chn > .rx-lgt, .srx-phero .rx-chn > .rx-sw { grid-column: 1 !important; grid-row: auto !important; justify-self: center !important; margin: 0 !important; }
  .srx-phero .rx-apps { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; width: 100% !important; }
  /* Radius Passport: the card stands whole on the deep-blue stage; the photo it covered goes */
  .psp-phero .phero__inner--photo > .phero__photo { display: none !important; }
  .psp-phero .phero__inner--photo > .pcard { position: relative !important; inset: auto !important; width: 100% !important; max-width: 340px !important; }
  /* Radius Talent: the employer's sheet, the part the page sells (the candidate's phone shows further down) */
  .thero .tpair > .thero__phone { display: none !important; }
  .thero .tpair { width: 100% !important; max-width: 360px !important; }
  .thero .lp-emp__q { display: none !important; }   /* the queue under the first candidate: the sheet fits whole */
  /* ATS: one card per column */
  .atx-hero .hb__col > .hb__card ~ .hb__card { display: none !important; }
  /* Match: the five requirements in tighter rows, the label column wider, the key on one line */
  .mx-phero .cmp__g { grid-template-columns: minmax(0, 1fr) repeat(3, 46px) !important; }
  .mx-phero .cmp__c--lab > span:not(.mx-t) { white-space: normal !important; text-align: left !important; min-width: 0 !important; line-height: 1.2 !important; }   /* Dutch labels are longer: they wrap, never cut */
  .mx-phero .cmp__hc { padding: 8px 2px 8px !important; }
  .mx-phero .cmp__av { width: 26px !important; height: 26px !important; margin-bottom: 4px !important; }
  .mx-phero .cmp__c--lab { flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; padding: 7px 4px 7px 10px !important; justify-content: flex-start !important; }
  .mx-phero .cmp__c { padding: 7px 2px !important; }
  .mx-phero .cmp__key { flex-wrap: wrap !important; gap: 4px 10px !important; margin-top: 8px !important; justify-content: center !important; }
  /* AI Interviewer: the video frame is the stage itself, so the film is not cut by it */
  section.phero > .phero__stage.ivstage > .phero__inner > .ivf { inset: 0 !important; width: 100% !important; height: 100% !important; }
  section.phero > .phero__stage.ivstage > .phero__inner > .ivf > video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 86% 40% !important; }   /* her face was cut at the right edge */
  /* the sector list: its row of photographs takes the rest of the screen */
  section.phero > .sect5.strip { flex: 1 1 0 !important; min-height: 150px !important; margin-top: 22px !important; padding-bottom: 0 !important; }
  section.phero > .sect5.strip > .sect { height: 100% !important; min-height: 0 !important; }
  /* pages whose opening is words only (FAQ, candidate FAQ, trust): the words sit in the middle of the screen */
  section.phero:not(:has(.phero__stage)):not(:has(.sect5)), section.dln-hero {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    padding-top: calc(var(--tb-h, 32px) + var(--rh-nav) + 12px) !important; padding-bottom: 28px !important;
  }
  /* for talent: the words, the store buttons, then the phone, top first */
  section.chero > .chero__grid { flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
  section.chero > .chero__grid > .loop { flex: 1 1 0 !important; min-height: 0 !important; margin-top: 16px !important; overflow: hidden !important; }
  section.chero .store { flex-wrap: nowrap !important; gap: 8px !important; margin-top: 18px !important; }
  section.chero .store > a { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; padding: 11px 8px !important; font-size: 13px !important; gap: 6px !important; white-space: nowrap !important; }
  section.chero .chero__price { margin-top: 10px !important; }
  section.chero.rh-grow > .chero__grid, section.chero.rh-grow > .chero__grid > .loop { flex: none !important; height: auto !important; }
  /* for companies and for agencies: the photograph takes what the words leave */
  section.aud-hero { padding-top: calc(var(--tb-h, 32px) + var(--rh-nav)) !important; }
  .aud-hero__bg { flex: 1 1 0 !important; min-height: 110px !important; aspect-ratio: auto !important; }
  .aud-hero__bg img { height: 100% !important; object-fit: cover !important; object-position: 50% 40% !important; }
  .aud-hero > .wrap { flex: none !important; padding: 22px 16px 24px !important; }
  .aud-hero .lead, .aud-hero:has(.aud-hero__bg img) .lead { max-width: none !important; }   /* was min(480px, 42%): 152px wide on a phone */
  .aud-hero .lead, .aud-hero .lead + * { margin-top: 14px !important; }
  /* the five sector pages: the same, and the photograph starts under the nav (the nav's white logo sat on the
     light part of the photo) */
  body.ind-page section.oli-hero { padding-top: calc(var(--tb-h, 32px) + var(--rh-nav)) !important; }
  body.ind-page .oli-hero__photo { flex: 1 1 0 !important; min-height: 110px !important; aspect-ratio: auto !important; }
  body.ind-page .oli-hero__wrap { flex: none !important; padding: 22px 16px 24px !important; }
  body.ind-page .oli-hero__sub { margin-top: 12px !important; }
  body.ind-page .oli-hero__cta { margin-top: 16px !important; }

  /* short landscape phones: the opening grows instead of cutting */
  @media (max-height: 520px) {
    body.home-page section.hero, section.phero, section.atx-hero, section.chero, section.dln-hero,
    section.aud-hero, body.ind-page section.oli-hero { height: auto !important; min-height: 100svh !important; }
  }

  /* ---------- 2b. a phone scrolls without extra work (11 Oct 2026, Mark: "the scrolling is not really good... sometimes
     laggy") ----------
     Measured on the pages: a fixed full-screen background that never stopped moving (two gradients drifting 2.5%
     over 46 and 60 seconds, too slow to see), so the browser had to composite the whole screen again on every frame
     and re-blur every glass card above it; 20 glass cards on the home page sat inside a glass panel, each blurring
     what the panel had already blurred, and the glass surround of every beige or gradient panel blurred a ground
     with nothing in it to blur; every revealed block kept its own layer (will-change) for good, 15 to 30 of them per
     page, many the size of a photo. None of it is visible: the background is the same gradient, standing still; the
     cards and surrounds keep their colour (saturate) and lose only a blur that had nothing to soften; a block lets go
     of its layer once it is in place.
     phone.js 7 adds: films with autoplay pause while off the screen, pictures decode off the main thread. */
  .ambient span { animation: none !important; will-change: auto !important; }
  /* the glass surround on a panel whose ground is flat or a smooth gradient (no lines under it): a blur of a flat
     ground is the same ground, so only its saturate() stays; the opening stages with their faint lines keep the blur */
  .arow__vis--panel::after, .plx-media--panel::after, .feat__vis--panel::after, .atx-stage::after {
    -webkit-backdrop-filter: saturate(112%) !important; backdrop-filter: saturate(112%) !important; }
  [data-reveal].in { will-change: auto !important; }
  .rh-idle, .rh-idle::before, .rh-idle .fclose-col { animation-play-state: paused !important; }   /* off the screen (phone.js 7) */
  /* the contents bar is solid on a phone (above): a blur behind a solid bar was redone on every frame of scrolling */
  .fl-toc__bar, .fl-toc--essay .fl-toc__bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

  /* ---------- 3. one rhythm between sections ----------
     Sections opened and closed with 52 to 139px each (104 to 256px between two of them). Now 48px each side on a
     phone, 36px inside the long feature sections, so a heading follows the section before it by a steady 96px. */
  section.faq, section.acc, section.bigs, section.band, section.arow-sec, section.psp-band, section.steps, section.feat,
  section.aud-pain, section.aud-day, section.aud-how, section.aud-wedge, section.dln-band, section.dln-std, section.dln-fair,
  section.dln-vaultband, section.mid, section.tsx, section.res, section.srx-motion, section.sc-killcv, section.sc-motion,
  section.mx-motion, section.psp-handle, section.psp-watch, section.atx-plat, section.toolsx, section.ind {
    padding-top: 48px !important; padding-bottom: 48px !important;
  }
  section.platform.atx-feat > .pband, section.feat > .pband { padding-top: 36px !important; padding-bottom: 36px !important; }
  section.platform.atx-feat, section.feat.band { padding-top: 12px !important; padding-bottom: 12px !important; }
  section.proof { padding-top: 22px !important; padding-bottom: 22px !important; }
  section.legal { padding-top: calc(var(--tb-h, 32px) + var(--rh-nav) + 28px) !important; padding-bottom: 48px !important; }
  .sec-head, .acc-head { margin-bottom: 28px !important; }
  /* rows of a section: one gap, and a row's words stay with their picture */
  .arow + .arow, .aud-row + .aud-row, .feat__row + .feat__row { margin-top: 56px !important; }
  .arow, .atx-row, .aud-row, .feat__row { row-gap: 20px !important; }
  /* photographs in the rows were 480px tall (0.73 of a screen) under 230px of words: now a row is one screen */
  .arow__vis.srx-how__vis--photo { min-height: 0 !important; aspect-ratio: 4 / 4.4 !important; }

  /* ---------- 4. text ---------- */
  /* headings: no hyphens (Dutch "solli-citeren", "volume-werving"), one stranded word never left (phone.js) */
  h1, h2, h3, h4, .h1, .h2 { -webkit-hyphens: manual !important; hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; }
  h1, h2, h3, h4, .h1, .h2 { text-wrap: pretty; }
  .rh-nb { white-space: nowrap; }   /* a hyphenated word in a heading is never split at its hyphen (phone.js 3) */
  .fl-keep.rh-unkeep, .fl-nw.rh-unkeep { white-space: normal !important; }   /* bound words wider than the line wrap after all */
  /* the language menu opens from the pill's left edge: right-aligned, it started 7px off a 360px screen on the Dutch
     candidate pages, where the longer "Download de app" moves the pill left */
  .langmenu { left: 0 !important; right: auto !important; }
  .fl-meta__i.rh-lead { flex-basis: 100% !important; }   /* a meta row's new line starts without a dot (phone.js 4) */
  .fl-meta__i.rh-lead::before { display: none !important; }
  .sec-head h2, .acc-h, .fclose-h, .tsx-h, [style*="text-align:center"] h2 { text-wrap: balance; }
  /* paragraphs end on more than one short word */
  p, li, dd, figcaption, blockquote, .sub, .lead { text-wrap: pretty; }
  /* forms: 16px, or Safari zooms the page when a field is tapped */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  select { max-width: 100% !important; width: 100% !important; text-overflow: ellipsis; }
  /* the smallest labels in the product pictures were 10 to 10.5px: 11px is the floor (Mark's audit, 12 Sep) */
  .pf-ch, .pf-ch *, .hb__h em, .fclose-dow span, .hb__tag, .pf-more, .mobile-nav__links a small { font-size: 11px !important; }

  /* ---------- 5. nothing arrives empty ----------
     Reveals and the step-by-step pictures keep the site's own timing (Mark: a step a second, the ghost frame then
     the fill); phone.js starts them before they reach the screen, so they are already under way when they arrive. */

  /* ---------- 6. the footer ----------
     Four link lists stacked in one column made the footer two screens long. Two columns now. */
  .ft__cols { grid-template-columns: 1fr 1fr !important; column-gap: 20px !important; row-gap: 26px !important; }
  .ft__col a { padding-top: 5px !important; padding-bottom: 5px !important; }
  .ft__top { row-gap: 32px !important; margin-bottom: 28px !important; }
  .ft__legal a { padding-top: 8px; padding-bottom: 8px; }
  /* the closing block: the line under "Hire your people effortlessly." and the button, one screen */
  .close.fclose { padding-top: 64px !important; }
  .close.fclose .fclose-beat { margin-bottom: 40px !important; }
  .fclose-sub { text-wrap: balance; }
  /* the home page closes with a live calendar that is 2.4 screens tall on a phone: its "Book a demo" button
     above it does the same job on a phone, as on every other page (the calendar stays on laptops) */
  body.home-page #book.fclose-cal-sec { display: none !important; }

  /* ---------- 7. pieces of the home page ---------- */
  /* candidates in the Source panel: names were cut ("Tomasz Ko...") in three 103px cards; two wider cards now */
  .pf-src-grid { grid-template-columns: 1fr 1fr !important; }
  .pf-src-grid > .pf-cand:nth-child(n+3) { display: none !important; }
  .pf-cand__nm, .pf-cand__ro { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .pf-chips-ch .pf-ch { white-space: nowrap; }
  /* the "Why teams switch" cards: picture, then the words, a steady card */
  .acc__grid { row-gap: 18px !important; }

  /* glass on the row photographs: the chips sat in a 0px-wide anchor, so each one shrank to its longest word
     ("Every / requirement / asked"); the chat bubbles were capped at 34% of the photo (123px). Chips keep their
     words on one line, bubbles take up to three quarters of the photo. */
  .plx-chips .plx-chip { width: max-content !important; max-width: min(250px, 66vw) !important; white-space: nowrap !important; }
  .plx-bub { max-width: 56% !important; }
  .plx-bub .gcard__msg { font-size: 12.5px !important; line-height: 1.38 !important; }
  /* Match: the name, the job and the language chip shared one line, so "Daan / Bakker" broke in two */
  .mc__hd { flex-wrap: wrap !important; row-gap: 8px !important; }
  .mc__hd > span:not(.mc__av):not(.mc__lang) { flex: 1 1 auto !important; min-width: 0 !important; }
  .mc__hd .mc__lang { flex: none !important; }
  .mc__hd > span:not(.mc__av):not(.mc__lang) b, .mc__hd > span:not(.mc__av):not(.mc__lang) i { white-space: nowrap; }
  .mc__hd .mc__lang { margin-left: 46px !important; }
  .mc__foot b, .mc__foot [data-n] { white-space: nowrap !important; }       /* "meets 2 of / 5" */
  .mc__foot { display: block !important; }                                  /* the count, then its line under it */
  .mc__foot > * { display: block !important; margin-left: 0 !important; }
  .mc__foot > * + * { margin-top: 4px !important; }
  /* Passport: each line is mark, words, status; the status had dropped under the mark */
  .pass-checklist li { grid-template-columns: 22px minmax(0, 1fr) auto !important; column-gap: 12px !important; align-items: start !important; }
  .pass-checklist li > .pass-flip { grid-column: 3 !important; grid-row: 1 !important; text-align: right !important; }
  /* the trust card on the photographs: four badges in two 159px columns crushed every line; one column */
  .c-badges { grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px !important; }
  .c-badge > div { min-width: 0; }
  /* the platform tabs in Dutch ("Verifiëren", "Aannemen") ran into the edge */
  html[lang="nl"] .pf-rail .pf-tab { padding-left: 2px !important; padding-right: 2px !important; }
  html[lang="nl"] .pf-rail .pf-tab span { font-size: 12.5px !important; letter-spacing: -.01em; }

  /* ---------- 8. pieces of the product pages ---------- */

  /* About: seven team cards with a square letter placeholder were 4.6 screens; a list with a round picture */
  .team { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .team__card { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; column-gap: 14px !important; align-items: start !important; padding: 16px !important; }
  .team__card > .team__pic { grid-column: 1 !important; grid-row: 1 / span 3 !important; width: 64px !important; height: 64px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; font-size: 24px !important; overflow: hidden !important; }
  .team__card > .team__pic img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .team__card > :not(.team__pic) { grid-column: 2 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .team__card > b { margin-top: 2px !important; margin-bottom: 1px !important; }
  .team__card > span { margin-bottom: 6px !important; }
  .team__card > p { margin-bottom: 0 !important; }

  /* FAQ: the group chips were squeezed into circles ("Fairness / and the / AI Act"); pills on one line, wrapping */
  .faq-chips { flex-wrap: wrap !important; justify-content: center !important; overflow: visible !important; gap: 8px !important; }
  .faq-chips > a { flex: none !important; white-space: nowrap !important; min-height: 40px; }

  /* forms: two short fields side by side (names, company and role), selects and long fields full width */
  .form__row:not(:has(select)):not(:has(textarea)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 12px !important; }
  .form .field { margin-bottom: 10px !important; }
  .gate { padding: 18px 16px !important; }

  /* the scroll-lit sentence finishes when it reaches the middle of the screen (phone.js), so nobody reads grey */

  /* ---------- 9. round 3 (10 Oct, after looking at every screen) ---------- */
  /* inner wrappers that added their own padding inside a section's 48px */
  .tsx-sec { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* product panels were drawn at 3:2 and cut what did not fit (Youssef's card on AI Sourcer, the insights list
     on ATS); on a phone a panel takes the height of what is in it */
  .arow__vis--panel, .feat__vis--panel { aspect-ratio: auto !important; height: auto !important; }
  /* (not the stands whose device is positioned absolutely: their height comes from their own min-height) */
  .arow__vis--panel:not([class*="psp-vis--dup"]):not(.psp-vis--phone) { min-height: 0 !important; }
  /* glass on photographs: lists were capped at 131 to 221px wide and wrapped every line (the interview answers,
     the database list); chips wrapped onto two lines ("Right to work (EU) · Proven · 10 / Sep") */
  .arow__vis:not(.arow__vis--panel) > .gcard:not(.psp-chip):not(.srx-chipc), .sc-stage3--ev .gcard { width: auto !important; max-width: min(78%, 300px) !important; }
  .psp-chip, .srx-chipc, .plx-chip { max-width: calc(100% - 28px) !important; }
  .psp-chip .c, .srx-chipc .c { text-wrap: balance; }   /* one line when it fits, two even lines on a narrow phone */
  /* Passport, "Nobody gets interviewed twice": two application cards side by side, 137px each */
  .psp-vis--dup { padding: 14px 10px !important; }
  .psp-dup__card { padding: 12px 11px 6px !important; }
  /* ATS, "From applied to signed": two columns of 150px; one column */
  .chain__g { grid-template-columns: minmax(0, 1fr) !important; row-gap: 22px !important; }
  /* Radius Talent, the pool: a 449px card with name, job and two chips in four columns ran off the screen */
  .lp-pool { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 16px 14px !important; }
  .lp-pool__hd { flex-wrap: wrap !important; row-gap: 4px !important; }
  .lp-pool .lp-cand { grid-template-columns: 44px auto minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 8px !important; padding: 12px !important; align-items: center !important; }
  .lp-pool .lp-cand > img { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 44px !important; height: 44px !important; align-self: start !important; }
  .lp-pool .lp-cand > div { grid-column: 2 / -1 !important; grid-row: 1 !important; }
  .lp-pool .lp-cand > .chip--proven { grid-column: 2 !important; grid-row: 2 !important; }
  .lp-pool .lp-cand > .chip--neutral { grid-column: 3 !important; grid-row: 2 !important; justify-self: start !important; }
  /* "Example data" labels were laid over the picture they label and covered its words; on a phone each sits
     above its picture, on the right */
  .note-ex { position: static !important; display: table !important; margin: 0 0 10px auto !important; transform: none !important; }

  /* the white paper page: the opening is title, summary, a button and the cover, one screen; the form follows
     in its own section (phone.js moves it there and adds the button, worded as the form's own heading) */
  section.wph { box-sizing: border-box !important; height: 100svh !important; min-height: 0 !important; display: flex !important; flex-direction: column !important;
    padding-top: calc(var(--tb-h, 32px) + var(--rh-nav) + 22px) !important; padding-bottom: 16px !important; overflow: hidden !important; }
  section.wph > .wph__grid { flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; justify-content: safe center !important; gap: 22px !important; }
  section.wph .wph__copy { flex: none !important; }
  section.wph .wph__cover.wph__cover--img { flex: 0 1 auto !important; min-height: 0 !important; max-width: none !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; }
  section.wph .wph__cover.wph__cover--img img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 100% !important; }
  .rh-wp-cta { margin-top: 20px !important; }
  section.wph-gate { padding: 40px 0 48px; background: var(--paper); }
  section.wph-gate .gate { margin: 0 !important; }
  /* the FAQ pages: the list opened with "FAQ" and the hero's own sentence again, right under the hero */
  section.phero + section.faq .faq__head { display: none !important; }
  /* For companies, For agencies: rows carried 53px of padding each side on top of the gap between them */
  .aud-row { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* applicant cards inside the product pictures (AI Sourcer, How it works, Radius Talent): photo, name and
     channel on the first line, the detail line under them at full width ("Gesolliciteerd om / 08:12" broke) */
  .lp-cand:not(.lp-pool > .lp-cand) { grid-template-columns: 34px minmax(0, 1fr) auto !important; grid-template-areas: "av nm tag" "av tx tx" !important; column-gap: 10px !important; row-gap: 2px !important; align-items: center !important; }
  .lp-cand:not(.lp-pool > .lp-cand) > img { grid-area: av !important; align-self: start !important; }
  .lp-cand:not(.lp-pool > .lp-cand) > div { display: contents !important; }
  .lp-cand:not(.lp-pool > .lp-cand) > div > b { grid-area: nm !important; min-width: 0 !important; }
  .lp-cand:not(.lp-pool > .lp-cand) > div > span { grid-area: tx !important; }
  .lp-cand:not(.lp-pool > .lp-cand) > .chip, .lp-cand:not(.lp-pool > .lp-cand) > .lp-src { grid-area: tag !important; justify-self: end !important; }

  /* For talent, Radius Talent: each feature band was forced to a full screen with its row centred in it, and each
     picture panel to 56% of the screen, so empty space sat above, below and inside every row */
  section.feat > .pband { min-height: 0 !important; }
  .feat .feat__vis { height: auto !important; min-height: 0 !important; }
  /* the fan of job cards was wider than its panel and the panel cut the back cards' words ("itchen / reda");
     on a phone the back cards are shapes behind the front one */
  .fan { height: 236px !important; }
  .fan .jobcard:nth-child(1), .fan .jobcard:nth-child(3) { opacity: .9; }
  .fan .jobcard:nth-child(1) > *, .fan .jobcard:nth-child(3) > * { visibility: hidden !important; }
  .fan .jobcard:nth-child(1) { transform: rotate(-7deg) translateX(-14%) scale(.94) !important; }
  .fan .jobcard:nth-child(3) { transform: rotate(7deg) translateX(14%) scale(.94) !important; }

  /* Match, "The answer behind every tick": closed requirement rows kept an empty body (the source line sat in an
     implicit grid row the 0fr trick never collapsed) and opened one at a time; on a phone the card follows its
     content, so every row shows its quote and source, and nothing jumps while the reader is on it */
  .ev__bd { grid-template-rows: 1fr !important; }
  .ev__q, .ev__src { opacity: 1 !important; }
  /* Match, the candidate list: the status chip took a third of the row and crushed the name and its line
     ("Sanne / Visser", five lines for "Dutch on the floor still open"); the chip goes under the line */
  .nm__p { flex-wrap: wrap !important; row-gap: 6px !important; }
  .nm__p > span:not(.ga__pav):not(.ga__st) { flex: 1 1 0 !important; min-width: 0 !important; }
  .nm__p > .ga__st { margin-left: 45px !important; flex-basis: calc(100% - 45px) !important; }
  /* ATS insights: the "people" header was wider than its 46px column and ran to the card's edge */
  .rc__th, .rc__r { grid-template-columns: minmax(0, 1fr) auto !important; }

  /* Radius Talent, "Matches": the status chip crushed each title ("Order picker · / Tilburg"); the title takes
     the whole line, its detail and the status share the line under it */
  .lp-mt__row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "t t" "s c" !important; row-gap: 4px !important; column-gap: 12px !important; }
  .lp-mt__row > div { display: contents !important; }
  .lp-mt__row > div > b { grid-area: t !important; }
  .lp-mt__row > div > small { grid-area: s !important; margin-top: 0 !important; align-self: center; }
  .lp-mt__row > .chip { grid-area: c !important; justify-self: end !important; }

  /* ---------- 10. round 5 (10 Oct, after the measurement of every page) ---------- */
  /* lines never end on one short word: questions, names, labels, chat lines, the footer's newsletter line */
  body, button { text-wrap-style: pretty; }   /* the style only, inherited: a nowrap chip stays one line */
  /* the type floor in the product pictures: 11px (Mark's audit of 12 Sep), the last labels at 9.5 to 10.5px */
  .cstep__n, .mx-t, .mx-tag, .jc__tags span, .nm__lab, .nm__fix b, .ofp__card, .ofp__card * { font-size: 11px !important; }
  /* Radius Passport, "Nobody gets interviewed twice": two 137px application cards side by side, then a merge;
     on a phone the picture shows the result, the one record that holds both applications */
  .psp-dup__card { display: none !important; }
  .psp-dup__one { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }   /* the page's own still state */
  .psp-dup__chip { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Radius Talent, the price: 21px words in a 181px box ("Meeting / candidates: / included") */
  .lp-price { padding: 22px 16px 20px !important; }
  .lp-price__l { font-size: 18px !important; gap: 12px !important; }
  .lp-price__l span { padding: 18px 16px !important; }
  /* AI Sourcer, the applicants in the opening picture: three 98px cards left the name a 0px column */
  /* AI Sourcer, the WhatsApp approval: "Goedkeuren en verzenden" and "Bewerken" were wider than the card */
  .wachat__foot { flex-wrap: wrap !important; gap: 8px !important; }
  .wachat__foot .btn { flex: 1 1 auto !important; justify-content: center !important; }
  /* AI Interviewer, the opening film: run edge to edge (an earlier fix here) the glass lay over her face on every
     phone; in a left column (the page's own phone rule) it still reached her face on a 430px phone and squeezed the
     talk to 92px on a 375px one. On a phone the live chip keeps the top left, her words run along the bottom of
     the frame under her face, and the name card and the found-answer card are left to wider screens. */
  .ivstage .sc-stageui { left: 12px !important; right: 12px !important; top: 12px !important; bottom: 12px !important; width: auto !important;
    display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: stretch !important; gap: 8px !important; }
  .ivstage .sc-stageui > .sc-hero__who { align-self: flex-start !important; width: auto !important; max-width: 60% !important; }
  .ivstage .sc-stageui > .sc-hero__who .gcard__hd { display: none !important; }
  .ivstage .sc-stageui > .sc-hero__find { display: none !important; }
  .ivstage .sc-stageui > .sc-bubs { width: 100% !important; margin-top: auto !important; }   /* her words at the bottom, also when the chip is left out */
  /* Match, the opening table: "meets 4 of 5" under each name in a 52px column, three lines; the ticks say it */
  .cmp__hc em { display: none !important; }
  /* How it works, the five steps in Dutch ("Verifiëren", "Aannemen") ran past the card */
  .chain__steps { column-gap: 2px !important; }
  .cstep__t { font-size: 13px !important; letter-spacing: -.01em !important; }
  html[lang="nl"] .cstep__t { font-size: 12px !important; }
  /* Radius Talent, the pool in Dutch: "Kan deze week starten" did not fit its column; the chips flow on one line
     under the name and wrap when they have to */
  .lp-pool .lp-cand { display: block !important; position: relative !important; padding: 12px 12px 8px 68px !important; }
  .lp-pool .lp-cand > img { position: absolute !important; left: 12px !important; top: 12px !important; }
  .lp-pool .lp-cand > div { margin-bottom: 8px !important; }
  .lp-pool .lp-cand > .chip { display: inline-flex !important; margin: 0 6px 6px 0 !important; }
  /* articles: the white paper's cover in "Get the paper" was stretched (160x90 shown 151x93) */
  .fl-next__paper img { aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important; }

  /* ---------- 11. round 6 (10 Oct, the four-phone measurement: iPhone SE, 15, 15 Pro Max, 360px Android) ---------- */
  /* articles: the opening kept a 560px minimum, 7px taller than an iPhone SE screen */
  .fl-ahero { min-height: 0 !important; }
  /* the hire board's top card cut "Warehouse operative" with "…" on the two narrowest phones */
  .hb__id, .hb__id span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  /* AI Sourcer channel tiles: "Radius Talent" was cut on a 360px screen; the name may wrap */
  .rx-chn > b, .rx-chn > i { white-space: normal !important; overflow: visible !important; }
  /* How it works, "Ask for what you need": the chat panel was centred in a 16:9 frame and cut at the top and
     the bottom (on every phone); the frame follows its content, as the home page's own phone rules do */
  .platform .plx-media--panel { aspect-ratio: auto !important; height: auto !important; }
  /* very long Dutch words in article text ("gegevensbeschermingseffectbeoordeling") ran out of their column */
  .fl-page p, .fl-page li, .fl-page td, .fl-page th, .fl-page dd, .fl-page blockquote { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4; }
  .fl-page a { -webkit-hyphens: manual !important; hyphens: manual !important; }   /* a link breaks at its own hyphen, never mid-word ("whi-" / "tepaper-downloadpagina") */
  /* the last labels under the 11px floor (ATS chat time stamps and small print) */
  .atx-wa__meta, .platform small, .rec small, .ofc small { font-size: 11px !important; }
  /* rows of a title, a detail line and a status chip: the chip kept a third of the row and squeezed the detail
     into a 85 to 113px column; the chip goes under the words (Passport requirements, Match rows, ATS alert) */
  .reqcard__row { grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px !important; }
  .reqcard__row > .reqcard__tag, .reqcard__row > .psp-tagwrap { justify-self: start !important; }
  .mc__r { grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px !important; }
  .mc__r > .mc__t { justify-self: start !important; }
  .rc__alert { grid-template-columns: 34px minmax(0, 1fr) !important; row-gap: 8px !important; }
  .rc__alert > .rc__need { grid-column: 2 !important; justify-self: start !important; }
  /* big centred sentences end on one word on narrow phones; balanced lines */
  .bigs p { text-wrap: balance; }

  /* ---------- 12. round 7 (Dutch at 360px, the narrowest phone) ---------- */
  /* a product panel is a one-column grid: its column grew to the widest unbreakable line of the card inside
     ("voldoet aan 2 van de 5"), so the Passport requirements card and the Match evidence card ran past the panel.
     The column is the panel's width; the card's own lines wrap */
  .arow__vis--panel, .feat__vis--panel, .plx-media--panel { grid-template-columns: minmax(0, 1fr) !important; }
  .reqcard__hd, .ev__who, .ev__hd { flex-wrap: wrap !important; row-gap: 6px !important; }
  /* the Passport card's three figures: labels in thirds ran into each other ("AANGETOONDOPGEGEVEN") */
  .pass-card--full .pass-card__stats { grid-template-columns: repeat(3, auto) !important; justify-content: space-between !important; column-gap: 12px !important; }
  .pass-card--full .pass-card__stats div span { letter-spacing: .02em !important; }
  /* AI Sourcer, glass card on the photo: "Uit je eigen database" squeezed, "3 mensen passen bij deze functie" cut */
  .gcard__hd { flex-wrap: wrap !important; row-gap: 4px !important; }
  .gcard__hd > em { flex-basis: 100% !important; margin-left: 0 !important; white-space: normal !important; }
  /* single long Dutch words in the hire board ("Magazijnmedewerker") */
  .hb__id span, .hb__card b { overflow-wrap: anywhere; }

  /* ---------- 13. whole pictures (10 Oct, after Mark's phone screenshots) ----------
     Glass on a photo is a third of the frame at most and stands beside the person, never across a face (his rule
     of 9 Sep). Faces were found with Apple Vision on each photo with the glass hidden; each move below is measured. */
  /* Home, AI Sourcer row: the request bubble was stretched from the top of the video to its bottom (both were set)
     and covered half of it and five faces; it sits in the free strip at the bottom, above the channel chips */
  .pband--source .plx-bub { top: auto !important; bottom: 54px !important; height: auto !important; max-width: 72% !important; }   /* two lines in Dutch too */
  /* Home, AI Interviewer row: the answer bubbles reached across her face; they keep to the left half */
  .pband--interview .plx-bub { max-width: 52% !important; }
  /* How it works: the chip sat on his face; it moves to the bottom of the photo */
  .plx-media:has(> img[src*="why-heard"]) > .gchip { top: auto !important; bottom: 12px !important; }
  /* AI Sourcer, the database and pool photos: the cards covered the face in the middle of the photo; on a phone
     the photo is taller and the card sits in its lower part, below the face */
  .srx-how__vis--photo:has(> img[src*="fl-src-reach"]), .srx-how__vis--photo:has(> img[src*="fl-src-pool"]) { aspect-ratio: 4 / 5.4 !important; }
  .srx-how__vis--photo:has(> img[src*="fl-src-reach"]) > .gcard .gcard__row:nth-of-type(n+4) { display: none !important; }   /* two of the three: a third of the photo */
  .srx-how__vis--photo:has(> img[src*="fl-src-reach"]) > .gcard, .srx-how__vis--photo:has(> img[src*="fl-src-pool"]) > .gcard { top: auto !important; bottom: 12px !important; }
  /* the database card: its rows were squeezed to 92px, three lines each ("Applied 8 months ago · Reach truck, Tilburg");
     the card takes the width of the photo, and the photo grows to keep it a third (phone.js 5) */
  .arow__vis.srx-how__vis--photo:has(> img[src*="fl-src-reach"]) > .gcard.gcard { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; }   /* out-ranks the 78% glass rule above */
  /* Match, the decision film: the card's top edge reached his chin; it sits lower, at the bottom */
  .mx-photo { aspect-ratio: 4 / 5.6 !important; height: auto !important; min-height: 0 !important; }
  .mx-photo > .gcard { top: auto !important; bottom: 12px !important; }
  /* AI Interviewer, the evidence film: the frame cut her face at its right edge; the film shows her whole */
  .sc-stage3--ev > video { object-position: 62% 50% !important; }
  /* AI Interviewer, the film in the dark band: the bubbles reached her face */
  .sc-motion__film { aspect-ratio: 4 / 5.8 !important; height: auto !important; min-height: 0 !important; }
  .sc-motion__film > .sc-uicol { max-width: 54% !important; right: auto !important; }
  .sc-motion__film > .sc-motion__sum { max-width: 58% !important; }
  /* ATS, the desk photo: the role chips crossed his face */

  /* For agencies, the verified photo: the chip sat on her face; it moves to the top right */
  .mframe:has(> img[src*="fl-src-verify"]) > .mchip { left: auto !important; right: 12px !important; top: auto !important; bottom: 12px !important; }

  /* the home page's five tabs, each one opened (only the first had been checked): deck.css set the Interview tab to
     two columns at every width (252px and 65px on a phone), and the page's own phone rules shrank labels to 8-10px */
  body.home-page .pf-ui--screen .pf-scr-top { grid-template-columns: minmax(0, 1fr) !important; }
  body.home-page .pf-scr-body { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.home-page .pf-sig { padding: 10px !important; }
  body.home-page .pf-sig-top { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  body.home-page .pf-sig-k { font-size: 13px !important; line-height: 1.25 !important; }
  body.home-page .pf-sig-badge { font-size: 11px !important; padding: 4px 8px !important; }
  body.home-page .pf-summary p { display: block !important; font-size: 12.5px !important; margin-top: 6px !important; }
  body.home-page .pf-mc__rows .reqcard__tag { font-size: 11px !important; padding: 4px 8px !important; }
  body.home-page .pf-mc__id span { font-size: 11px !important; }
  body.home-page .pf-partners__row { grid-template-columns: minmax(0, 1fr) !important; }
  body.home-page .pf-plogo { font-size: 12px !important; justify-content: flex-start !important; padding: 8px 10px !important; }
  body.home-page .pf-hstats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.home-page .pf-stat__lb { font-size: 11px !important; line-height: 1.2 !important; }
  body.home-page .pf-area__axis span, body.home-page .pf-area__reftag, body.home-page .pf-area__ylab span, body.home-page .pf-hchat__hd span { font-size: 11px !important; }

  /* rows that put a long name beside a status chip: the chip goes under when the two do not fit (Passport merge) */
  .psp-dup__hd { flex-wrap: wrap !important; row-gap: 8px !important; }
  /* chat bubbles in the ATS record: 93 to 103px wide, three lines each; a chat bubble takes most of the width */
  .atx-wa__msg { max-width: 82% !important; }
  /* plain tables outside the articles (cookies): each row becomes a card with its column names (phone.js adds them) */
  table.rh-stack, table.rh-stack tbody, table.rh-stack tr, table.rh-stack td, table.rh-stack th { display: block !important; width: auto !important; }
  table.rh-stack { width: 100% !important; }
  table.rh-stack thead { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
  table.rh-stack tr { padding: 12px 0 !important; border-top: 1px solid var(--line-soft, rgba(11,20,64,.1)) !important; }
  table.rh-stack td, table.rh-stack tbody th { padding: 4px 0 !important; border: 0 !important; text-align: left !important; }
  table.rh-stack td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; font-size: 12.5px; color: var(--mute, #5d6577); margin-bottom: 2px; }

  /* How it works, the opening card: its line drawing shows, at its own proportions, as wide as the card */
  .phero__stage--chain .chain__stage { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; aspect-ratio: 1100 / 420 !important; flex: none !important; }
  /* ATS, the funnel: drawn for a 900px-wide canvas (on a phone its steps ran off the side behind a swipe); on a
     phone it is the list of its steps, in order, then its two numbers, all on screen */
  .plx-media--chain { padding: 16px !important; overflow: hidden !important; }
  .plx-media--chain .ng { display: block !important; overflow: visible !important; }
  .plx-media--chain .ng__tabs { position: static !important; display: flex !important; width: 100% !important; }
  .plx-media--chain .ng__tab { flex: 1 1 0 !important; min-width: 0 !important; padding: 9px 6px !important; white-space: normal !important; line-height: 1.2 !important; }
  .plx-media--chain .ng__canvas { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 14px 0 0 !important;
    display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .plx-media--chain .ng__wire { display: none !important; }
  .plx-media--chain .nd { position: relative !important; left: auto !important; top: auto !important; width: auto !important; transform: none !important; }
  .plx-media--chain .nd.on { transform: none !important; }
  .plx-media--chain .ng__ct { position: static !important; order: 10; left: auto !important; top: auto !important; }
  .plx-media--chain .ng__cap { position: relative !important; width: 100% !important; height: 46px !important; margin-top: 12px !important; }
  .plx-media--chain .ng__cap span { font-size: 15px !important; }
  /* the home page's Interview tab: the summary is there from the start on a phone (an empty box sat under the
     requirements while they lit up, for many seconds) */
  body.home-page .pf-ui--screen.is-armed .pf-summary { background: var(--pf-brandgrad) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), 0 6px 18px -8px rgba(30,58,186,.4) !important; }
  body.home-page .pf-ui--screen.is-armed .pf-summary > * { opacity: 1 !important; }

  /* Trust, "What the AI does": the dot that runs down the timeline rests for a moment on the start of "What it
     doesn't" on a phone; the label lines up with the list's words instead, clear of the rail */
  .dln-spine__label--doesnot { padding-left: 40px !important; }

  /* ---------- 14. last pass at 402px (Mark's phone), 10 Oct ---------- */
  /* opening product pictures: each shows at (nearly) full size. Their closing summary line goes on a phone; the
     sections below say the same thing (Match: "Daan and Marta both meet four of five..."; Passport: "Checked at
     the source / Issued 10 Sep"). Measured: Match 81% to 98%, Dutch Passport 72% to 85%. */
  .mx-phero .cmp__foot, .psp-phero .pcard__sum { display: none !important; }
  /* the "Example data" label sits inside the stage's glass frame (at inset 14px), not on its line; the stage
     becomes a column so the label and the picture share its height and nothing is pushed out at the bottom */
  section.phero > .phero__stage:has(> .phero__inner):has(> .note-ex) { display: flex !important; flex-direction: column !important; }
  section.phero > .phero__stage:has(> .phero__inner) > .note-ex { position: static !important; align-self: flex-end !important; margin: 22px 22px 0 0 !important; flex: none !important; }
  section.phero > .phero__stage:has(> .phero__inner):has(> .note-ex) > .phero__inner { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; }
  [data-rh-fit-box] { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
  [data-rh-fit-box] > .note-ex { align-self: flex-end !important; margin: 0 0 10px 0 !important; }
  /* For talent: the two store buttons share the width; their words may wrap, the logos never shrink */
  section.chero .store > a { white-space: normal !important; line-height: 1.15 !important; text-align: left !important; padding: 9px 10px !important; }
  section.chero .store > a > svg { flex: none !important; }

  /* ---------- 15. the whole-picture check's last findings, 10 Oct ---------- */
  /* How it works, the opening card was pressed into the stage's height and cut 50px at the bottom; it keeps its own
     height (the fit then scales it as a whole), and its two arrow buttons go: tapping a step does the same */
  section.phero > .phero__stage--chain > .chain { flex: none !important; min-height: auto !important; }
  .phero__stage--chain .chain__arrows { display: none !important; }
  /* Radius Talent, the phone in "Your company name stays hidden": the empty next-card placeholder squeezed the job
     card and cut its last line ("Company shown at offer") */
  .phone--solo .phone__ghost { display: none !important; }
  /* AI Interviewer, the evidence card: the photo cut his forehead and the chip sat on his chin; a taller photo,
     framed from the top, the chip in the free corner */
  .pf__ph { height: 250px !important; }
  .sc-stage3 .pf__ph img, .pf__ph img { object-position: 50% 52% !important; }   /* the face sits at 51% of the photo's height */
  .pf__ph i { left: auto !important; right: 12px !important; }
  /* ATS, the desk photo: the role chips reached his face; they sit at the bottom of the photo */
  .plx-media:has(> img[src*="os-hero-desk"]) > .plx-chips { top: auto !important; bottom: 12px !important; }
  .plx-media:has(> img[src*="os-hero-desk"]) > .plx-chips .plx-chip { top: auto !important; bottom: 0 !important; white-space: nowrap !important; width: max-content !important; max-width: calc(100vw - 80px) !important; }
  /* Home, the AI Sourcer video: the Dutch request (three lines) reached the faces; the frame is taller, the video
     fills it, and the bubble keeps to the free strip under the faces */
  body.home-page .pband--source .plx-media { aspect-ratio: 4 / 3 !important; }
  body.home-page .pband--source .plx-media video { object-fit: cover !important; }
  /* Match, the decision film: the card took 38% of the photo (a third at most); the frame is taller */
  .mx-photo { aspect-ratio: 4 / 6.7 !important; }
  /* the ATS record: its one-column grid took the width of its widest Dutch line and ran 36px past the card, off a
     360px screen */
  .rec__grid, .rec__col { grid-template-columns: minmax(0, 1fr) !important; }
  /* the ATS phone in Dutch: "Ondertekend" / "14:02", the time alone on a line in a 105px chip; the time is in the
     signing steps beside it (phone.js 4b) */
  html[lang="nl"] .ofp__done .rh-t { display: none !important; }
  /* the ATS record: the WhatsApp bubbles were 94px wide, three lines each (Dutch four) */
  .atx-wa__msg { max-width: 92% !important; }
  /* the sector pages, "Every paper that matters, on one profile": the card came before its own heading on a phone */
  .oli-pass__grid > .oli-pass__head { order: -1 !important; }
  /* For companies, the contract photo: the 4:3 frame cut his face at the top, and framed higher it lost the phone he
     signs on; the frame is taller and shows both */
  .aud-frame:has(> img[src*="fl-contract"]) { aspect-ratio: 4 / 4.2 !important; }
  .aud-frame > img[src*="fl-contract"] { object-position: 50% 25% !important; }
  /* AI Interviewer, the profile mock in the scroll story: its one column took the width of its widest Dutch line and
     ran 4px past the card, cutting the photo's chip */
  .scrolly__mock > .pf, .pf { grid-template-columns: minmax(0, 1fr) !important; }
  /* AI Interviewer, the language panel and the evidence tags: the last labels at 10px; the profile photo's chip too */
  .lg__fl, .lg__b, .lg__note, .lg__lab b, .sc-stage3 .tag, .pf .tag, .pf__ph i { font-size: 11px !important; }
}

/* ============================================================
   Narrow phones, 389px and less (360px Androids, iPhone SE and mini at 375). 10 Oct 2026, the multi-phone pass.
   ============================================================ */
@media (max-width: 389px) {
  /* the nav: the Dutch candidate pages ("Download de app") pushed the menu button 15px off a 360px screen, and on
     the other Dutch pages it touched the edge. Tighter gaps, the language pill without its arrow, slimmer buttons. */
  .nav__inner { gap: 6px !important; }
  .nav__actions { gap: 6px !important; }
  #navLang { padding-left: 10px !important; padding-right: 10px !important; gap: 0 !important; }
  #navLang .langpick__car { display: none !important; }
  .nav__actions > .btn { padding-left: 8px !important; padding-right: 8px !important; }
  /* a status chip beside its text squeezed the text into 66 to 92px, three lines a row ("Tomasz / Kowalski",
     "In de pipeline / als / Ondertekend"); the chip moves under the text, in line with it */
  .ofc__hd, .rec__hd { flex-wrap: wrap !important; row-gap: 6px !important; }
  .rec__hd > .rec__who { flex: 1 1 calc(100% - 56px) !important; min-width: 0 !important; }
  .rec__hd > .mc__t { margin-left: 56px !important; }
  /* AI Interviewer: on a narrow phone the film shows her further right, clear of the live chip */
  section.phero > .phero__stage.ivstage > .phero__inner > .ivf > video { object-position: 71% 40% !important; }

  /* AI Interviewer, the evidence film: its taller frame (phone.js 5) cut her face at the right edge; the film shows
     her further left and the card keeps to 186px, clear of her face */
  .sc-stage3--ev > video { object-position: 72% 50% !important; }   /* 70% let her face touch the right edge in the taller Dutch frame */
  .arow__vis.sc-stage3--ev:not(.arow__vis--panel) > .gcard.gcard:not(.psp-chip) { max-width: 186px !important; left: 14px !important; }   /* out-ranks the 78% glass rule */

  .ofc__hd > .ofc__who { flex: 1 1 calc(100% - 56px) !important; min-width: 0 !important; }
  .ofc__hd > .ofc__tag { margin-left: 56px !important; }
  .atx-sign__row { flex-wrap: wrap !important; row-gap: 6px !important; }
  .atx-sign__row > .atx-sign__l { flex: 1 1 100% !important; }
  .atx-sign__row > .atx-pill { margin-left: 39px !important; }
  body.home-page .pf-mc__hd { flex-wrap: wrap !important; row-gap: 6px !important; }
  body.home-page .pf-mc__hd > .pf-mc__id { flex: 1 1 calc(100% - 44px) !important; min-width: 0 !important; }
  body.home-page .pf-mc__hd > .pf-mc__meets { margin-left: 44px !important; }
  .feat__vis > .loop.pcard .pcard__row { flex-wrap: wrap !important; row-gap: 6px !important; }   /* for talent, the Passport */
  .pf__f { flex-wrap: wrap !important; row-gap: 6px !important; }   /* AI Interviewer, the profile: "Gevraagd en beantwoord in het Nederlands" had 90px */
  .pf__f > span:first-child { flex: 1 1 100% !important; }
  .psp-phero .pcard__hd { flex-wrap: wrap !important; row-gap: 8px !important; }   /* Passport opening: the role had 81px, three lines in Dutch */
  .psp-phero .pcard__hd > .pcard__who { flex: 1 1 100% !important; }
  .feat__vis > .loop.pcard .pcard__row > span:first-child { flex: 1 1 100% !important; }
  /* the demo page's header: "Back to radiushire.com" wrapped and ran into the logo with no gap; it sits right,
     in two short lines, beside the language pill */
  .dhead { gap: 14px !important; }
  .dhead__r { gap: 10px !important; }
  .dhead__r > a:not(.nav__lang) { text-align: right !important; line-height: 1.2 !important; font-size: 13px !important; }
  /* Radius Passport, the record's three counts: "BIJGEWERKT" ran 26px past the card; three equal columns, the labels
     in sentence case so a Dutch word fits its column */
  .pass-card__stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 8px !important; }
  .pass-card__stats span { text-transform: none !important; letter-spacing: 0 !important; overflow-wrap: break-word !important; }
  /* AI Sourcer, the database card: one candidate on a narrow phone (two took 35 to 41% of the photo, which could
     grow no taller) */
  .srx-how__vis--photo:has(> img[src*="fl-src-reach"]) > .gcard .gcard__row:nth-of-type(n+3) { display: none !important; }
  /* for talent, the fan: the two back cards stood 7px past the panel on each side */
  .fan .jobcard:nth-child(1) { transform: rotate(-7deg) translateX(-10%) scale(.92) !important; }
  .fan .jobcard:nth-child(3) { transform: rotate(7deg) translateX(10%) scale(.92) !important; }
}

/* short narrow phones (iPhone SE 375 x 553, iPhone mini 375 x 629): the navy film on AI Interviewer could not grow
   any taller, and its glass took 37% (42% in Dutch); the name card keeps only its live chip */
@media (max-width: 389px) and (max-height: 640px) {
  .sc-motion__film .sc-hero__who .gcard__hd { display: none !important; }
  .sc-motion__sum p { display: none !important; }   /* "Summary ready, on your screen": the summary itself is on the page below */
  /* the opening film is 177px tall on the SE: her words keep the frame, the live chip is left to taller phones */
  .ivstage .sc-stageui > .sc-hero__who { display: none !important; }
  /* the evidence film: three of the four answers (four took 36% of the photo) */
  .sc-stage3--ev .gcard .gcard__row:nth-of-type(n+5) { display: none !important; }
}

/* phones up to 400px: the ATS offer and record cards squeezed the Dutch role into 80px beside the chip at 393px
   (iPhone 15); the chip sits under the name there too */
@media (max-width: 400px) {
  .ofc__hd, .rec__hd { flex-wrap: wrap !important; row-gap: 6px !important; }
  .ofc__hd > .ofc__who, .rec__hd > .rec__who { flex: 1 1 calc(100% - 56px) !important; min-width: 0 !important; }
  .ofc__hd > .ofc__tag, .rec__hd > .mc__t { margin-left: 56px !important; }
}

/* phones up to 400px (Androids, SE, mini, iPhone 15): the Match film's card took 35 to 39% of the frame at its
   tallest; the three evidence rows keep their names and their marks (shown, said, not shown), the detail lines are
   left to wider screens */
@media (max-width: 400px) {
  .mx-photo .gcard .gcard__lab > span { display: none !important; }
}