/* The site's one stylesheet, in the design the owner chose from mock-ups on 12 Oct 2026 (mock-up N), first on the home
   page and then on every other page so the site is of a piece.
   Parts: 1 type, 2 colours and base, 3 header, 4 buttons and the ten-firm form, 5 the home page's first band and the
   product's windows, 6 sections, 7 prices, questions, the close and the footer, 8 the cookie question, 9 what the
   other pages add (a page's first band, windows, lined lists, tables, comparisons, forms, the tour, the small print,
   the basket), 10 narrow screens.
   What the owner has called AI-looking and must not come back: numbered step columns, pill labels, rows of identical
   tiles, tick and cross lists, invented charts, tinted or gradient-washed photographs, big coloured figures, glows,
   leader-line callouts, small coloured capitals, initials circles, status dots (README, "One design"). */

/* ---------- 1. Type: IBM Plex Sans (SIL OFL 1.1, fonts/IBM-Plex-LICENSE.txt), served from fonts/ ---------- */
@font-face { font-display: swap; font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-display: swap; font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-display: swap; font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-display: swap; font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; src: url("fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2"); unicode-range: U+2190-2199, U+2713, U+2000-200D, U+2032-2033; }
@font-face { font-display: swap; font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; src: url("fonts/IBMPlexSans-Medium-Pi.woff2") format("woff2"); unicode-range: U+2190-2199, U+2713, U+2000-200D, U+2032-2033; }
@font-face { font-display: swap; font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; src: url("fonts/IBMPlexSans-SemiBold-Pi.woff2") format("woff2"); unicode-range: U+2190-2199, U+2713, U+2000-200D, U+2032-2033; }

/* ---------- 2. Colours and base ---------- */
:root { --navy: #032d60; --deep: #021f44; --ink: #16181d; --soft: #5c6068; --faint: #8a8e96; --line: #e6e7ea; --ground: #eef0f4; --orange: #ff832b; --orange-2: #f26f12; --ok: #1f8a4c; --link: #0b5cab; --bad: #b3261e;
  --axi-word: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 616 100'%3E%3Cpath transform='translate(0 0)' d='M18 0 L38 0 L20 100 L0 100 Z M62 100 L42 100 L24 0 L44 0 Z M10 62 L52 62 L52 78 L10 78 Z'/%3E%3Cpath transform='translate(70 0)' d='M0 0 L22 0 L62 100 L40 100 Z M40 0 L62 0 L22 100 L0 100 Z'/%3E%3Cpath transform='translate(140 0)' d='M0 0 L22 0 L22 100 L0 100 Z'/%3E%3Cpath transform='translate(200 0)' d='M0 12 L12 0 L46 0 L58 12 L58 28 L36 28 L36 22 L22 22 L22 78 L36 78 L36 64 L30 64 L30 48 L58 48 L58 88 L46 100 L12 100 L0 88 Z'/%3E%3Cpath transform='translate(266 0)' d='M0 0 L46 0 L58 12 L58 42 L46 54 L22 54 L22 100 L0 100 Z M22 34 L40 34 L40 20 L22 20 Z M30 54 L50 54 L62 100 L42 100 Z'/%3E%3Cpath transform='translate(336 0)' d='M12 0 L46 0 L58 12 L58 88 L46 100 L12 100 L0 88 L0 12 Z M22 26 L22 74 L26 78 L32 78 L36 74 L36 26 L32 22 L26 22 Z'/%3E%3Cpath transform='translate(402 0)' d='M0 0 L18 0 L33 100 L15 100 Z M32 8 L50 8 L33 100 L15 100 Z M32 8 L50 8 L67 100 L49 100 Z M64 0 L82 0 L67 100 L49 100 Z'/%3E%3Cpath transform='translate(492 0)' d='M0 0 L58 0 L58 22 L0 22 Z M18 0 L40 0 L40 100 L18 100 Z'/%3E%3Cpath transform='translate(558 0)' d='M0 0 L22 0 L22 100 L0 100 Z M36 0 L58 0 L58 100 L36 100 Z M22 40 L36 40 L36 58 L22 58 Z'/%3E%3C/svg%3E"); }
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
html { scroll-padding-block-start: 5rem; -webkit-text-size-adjust: 100%; }
body { font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.55; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-inline-size: 100%; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.hero :focus-visible, .last :focus-visible, .footer :focus-visible, .note :focus-visible { outline-color: #fff; }
.wrap { max-inline-size: 76rem; margin-inline: auto; padding-inline: 2rem; }
/* Kept for screen readers only (the trap for robots in each form; the skip link until it has the focus). */
.cds--visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cds--skip-to-content { position: absolute; inset-inline-start: 0.5rem; inset-block-start: -4rem; z-index: 9999; padding: 0.75rem 1rem; background: #fff; color: var(--ink); border-radius: 8px; }
.cds--skip-to-content:focus { inset-block-start: 0.5rem; }

h1 { font-size: clamp(2.625rem, 5vw, 4.25rem); line-height: 1.03; font-weight: 600; letter-spacing: -0.034em; }
h2 { font-size: clamp(1.875rem, 3.4vw, 2.875rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
.lead { font-size: 1.3125rem; line-height: 1.45; }
.soft { color: var(--soft); }
.small { font-size: 0.875rem; line-height: 1.5; }

/* ---------- 3. The header ---------- */
.note { background: var(--deep); color: rgba(255,255,255,.86); font-size: 0.8125rem; text-align: center; padding: 0.5rem 1rem; }
.note a { color: #fff; font-weight: 500; text-decoration: none; }
.note a:hover { text-decoration: underline; }
.masthead { position: sticky; inset-block-start: 0; block-size: 4rem; z-index: 8000; background: var(--navy); color: #fff; }
.masthead .in { block-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-inline-size: 76rem; margin-inline: auto; padding-inline: 2rem; }
.wordmark { position: relative; display: block; flex: none; inline-size: 123px; block-size: 20px; color: #fff; }
.wordmark::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--axi-word) left center / contain no-repeat; mask: var(--axi-word) left center / contain no-repeat; }
.wordmark span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a { font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,.82); white-space: nowrap; text-decoration: none; }
.nav a:hover, .nav a[aria-current] { color: #fff; }
.nav a.book, .m-check { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding-inline: 1rem; border-radius: 10px; background: var(--orange); color: #1a0f00; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.nav a.book:hover, .m-check:hover { background: var(--orange-2); color: #1a0f00; }
.masthead a:focus-visible, .masthead button:focus-visible, .mobile-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-toggle, .m-check, .mobile-nav { display: none; }
.mobile-nav.open { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--navy); color: #fff; z-index: 7999; padding: 5.5rem 1rem 2.5rem; overflow: auto; }
.mobile-nav a { font-size: 1.25rem; color: #fff; text-decoration: none; padding-block: 1rem; border-block-end: 1px solid rgba(255,255,255,.14); }
.mobile-nav a.book { margin-block-start: 1.75rem; border: 0; border-radius: 10px; background: var(--orange); color: #1a0f00; font-weight: 600; font-size: 1.0625rem; text-align: center; }
body.menu-open { overflow: hidden; }

/* ---------- 4. Buttons, and the ten-firm form: the website, the work email and the button on one white bar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.875rem; padding-inline: 1.25rem; border: 0; border-radius: 10px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn--go { background: var(--orange); color: #1a0f00; }
.btn--go:hover { background: var(--orange-2); }
.btn--go:disabled { opacity: 0.6; cursor: default; }
.btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #cfd2d8; }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ask { display: block; inline-size: min(100%, 36rem); }
.ask__fields { display: grid; gap: 1rem; }
.ask__row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; background: #fff; border-radius: 14px; padding: 0.375rem; }
.ask__cell + .ask__cell { border-inline-start: 1px solid var(--line); }
.ask input { display: block; inline-size: 100%; min-inline-size: 0; block-size: 3.125rem; border: 0; background: transparent; font: inherit; font-size: 1.0625rem; color: var(--ink); padding-inline: 1.125rem; border-radius: 10px; outline-offset: -2px; }
.ask input:focus-visible { outline: 2px solid var(--link); }
.ask input::placeholder { color: #6b7079; opacity: 1; }
.ask .btn { min-block-size: 3.125rem; }
/* What is wrong with a box is said under it (site.js writes the line), and the box is marked. */
.ask .cds--form-requirement { display: block; padding: 0 1.125rem 0.5rem; color: var(--bad); font-size: 0.8125rem; line-height: 1.35; }
.ask input.cds--text-input--invalid { outline: 2px solid var(--bad); }
.ask__error { padding: 0.75rem 1rem; border-radius: 10px; background: #fff; color: var(--bad); font-size: 0.9375rem; }
.ask__error a { color: inherit; }
.ask__thanks { display: grid; gap: 0.5rem; padding: 1.25rem 1.5rem; border-radius: 14px; background: #fff; color: var(--ink); }
.ask__thanks p:first-child { font-size: 1.1875rem; font-weight: 600; }
.ask .small { color: rgba(255,255,255,.72); }
.ask noscript p { color: #fff; }

/* ---------- 5. The first band, and the two windows of the product ---------- */
.hero { background: var(--navy); color: #fff; }
.hero > .wrap { display: flow-root; }
.hero__top { display: grid; grid-template-columns: minmax(0, 1fr) 27rem; gap: 4.5rem; padding-block-start: 5rem; }
.hero__words { display: grid; gap: 1.5rem; align-content: start; padding-block-end: 4.5rem; }
.hero .lead { color: rgba(255,255,255,.84); max-inline-size: 32rem; }

/* A window of the portal, drawn to follow the real page; the map inside the second is a screenshot of the real one. */
.win { background: #fff; color: var(--ink); border-radius: 14px; overflow: hidden; font-size: 0.8125rem; line-height: 1.4; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 14px 36px rgba(0,8,22,.36); }
.win .lk { color: var(--link); }
.chip { display: inline-flex; align-items: center; block-size: 2rem; padding-inline: 0.75rem; border-radius: 6px; border: 1px solid #c9ccd3; background: #fff; font-weight: 500; color: #2f3440; white-space: nowrap; }
.chip--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
svg.ok { inline-size: 0.875rem; block-size: 0.875rem; color: var(--ok); flex: none; }
/* The first email, laid out as the portal's draft page lays it out. It stands over the corner of the window below. */
.draftwin { align-self: end; margin-block-end: -6.5rem; margin-inline-end: -2rem; position: relative; z-index: 2; box-shadow: 0 0 0 1px rgba(22,24,29,.14), 0 14px 36px rgba(0,8,22,.36); }
.draftwin__h { padding: 1rem 1.125rem 0; display: grid; gap: 0.25rem; }
.draftwin__h b { font-size: 1rem; }
.draftwin__h span { color: var(--soft); }
.draftwin__why { padding: 0.625rem 1.125rem 0.25rem; color: #2f3440; }
.fld { display: grid; gap: 0.25rem; padding: 0.375rem 1.125rem; }
.fld__l { color: var(--soft); font-size: 0.75rem; }
.fld .box { border: 1px solid #c9ccd3; border-radius: 6px; padding: 0.5rem 0.625rem; font-size: 0.875rem; line-height: 1.5; }
.fld .box p + p { margin-block-start: 0.625rem; }
.draftwin__f { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem 1.125rem; margin-block-start: 0.5rem; border-block-start: 1px solid var(--line); }
.draftwin__f .push { margin-inline-start: auto; }
/* The Prospecting page: the portal's bar, the page's tabs, the map, and the firms found in the region picked on it. */
.appwin { position: relative; z-index: 1; margin-block-end: -6rem; }
.appwin__bar { display: flex; align-items: stretch; gap: 0.25rem; padding-inline: 1.25rem; block-size: 3rem; border-block-end: 2px solid #1b76d1; }
.appwin__bar b { align-self: center; font-size: 1rem; font-weight: 500; margin-inline-end: 1.25rem; }
.appwin__bar span { display: flex; align-items: center; padding-inline: 0.75rem; color: #2f3440; }
.appwin__bar span.on { background: #eef4fb; box-shadow: inset 0 3px 0 #1b76d1; }
.appwin__title { padding: 1rem 1.25rem 0.875rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.012em; }
.appwin__tabs { display: flex; gap: 1.5rem; padding-inline: 1.25rem; border-block-end: 1px solid #c9ccd3; color: var(--soft); font-size: 0.875rem; }
.appwin__tabs span { padding-block: 0.625rem; white-space: nowrap; }
.appwin__tabs span.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -3px 0 #1b76d1; }
.appwin__body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.appwin__map { border-inline-end: 1px solid var(--line); background: #eef3fb; }
.appwin__map img { display: block; inline-size: 100%; block-size: auto; }
.region { padding: 1.125rem 1.25rem 0.875rem; border-block-end: 1px solid #c9ccd3; }
.region b { font-size: 1.0625rem; display: block; }
.region span { color: var(--soft); font-size: 0.875rem; }
.firms li { padding: 0.8125rem 1.25rem; display: grid; gap: 0.0625rem; font-size: 0.875rem; }
.firms li + li { border-block-start: 1px solid #eef0f3; }
.firms .addr { color: #3b414c; overflow-wrap: anywhere; }
.firms .addr svg { display: inline; vertical-align: -0.125rem; margin-inline-start: 0.25rem; }
.firms .wait { color: var(--soft); }
.under-app { padding-block: 7rem 0; }
.under-app .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 3rem; color: var(--soft); font-size: 0.875rem; }
.under-app b { color: var(--ink); font-weight: 500; }

/* ---------- 6. Sections ---------- */
.band { padding-block: 7rem; }
.band--flush { padding-block-start: 0; }
/* Who it is for: a heading with a line beside it, over three photographs in frames of different sizes. The photographs
   are shown as they are: no tint, no gradient and no words on them. */
.who { display: grid; gap: 3rem; }
.who__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; align-items: end; }
.shots { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr 1fr; gap: 1.25rem; block-size: 38rem; }
.shots figure { border-radius: 14px; overflow: hidden; background: #e4e5ea; }
.shots figure:first-child { grid-row: 1 / span 2; }
.shots img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Where the email comes from: two pages of the firm's own website, each with the line we used marked. */
.source { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: center; }
.source__t { display: grid; gap: 1.25rem; }
.source__t ul { border-block-start: 1px solid var(--line); }
.source__t li { padding-block: 0.875rem; border-block-end: 1px solid var(--line); }
.source__t .rate { font-size: 1.1875rem; line-height: 1.45; margin-block-start: 0.75rem; }
.source__t .src { color: var(--soft); font-size: 0.8125rem; }
.ground { background: var(--ground); border-radius: 18px; padding: 3.5rem 3.5rem 3rem; position: relative; }
.page { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(22,24,29,.08), 0 10px 26px rgba(20,24,40,.1); font-size: 0.9375rem; line-height: 1.55; }
.page__url { padding: 0.625rem 1rem; border-block-end: 1px solid var(--line); color: var(--soft); font-size: 0.8125rem; overflow-wrap: anywhere; }
.page__nav { display: flex; gap: 1.25rem; padding: 0.875rem 1.5rem; border-block-end: 1px solid var(--line); font-size: 0.8125rem; color: var(--soft); }
.page__nav b { color: var(--ink); font-weight: 600; margin-inline-end: auto; font-size: 0.9375rem; }
.page__in { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 0.625rem; }
.page__h { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.012em; }
.page mark { background: #fdf0b3; color: inherit; padding: 0.0625rem 0.125rem; border-radius: 2px; }
.page--team { inline-size: 62%; margin: -1.25rem -1.5rem 0 auto; position: relative; }
.page--team dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.page--team dt, .page--team dd { padding-block: 0.4375rem; border-block-start: 1px solid var(--line); font-size: 0.875rem; }
.page--team dt { font-weight: 500; }
.page--team dd { color: var(--soft); }
.page--team .hit { background: #fdf0b3; color: var(--ink); }
.page--team dt.hit { padding-inline-start: 0.375rem; margin-inline-start: -0.375rem; }
/* The check: what the emails may say, and one email with the change a sales engineer made (kit.check_pic) */
.sheet { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 1.75rem; align-items: start; }
.sheet__h { color: var(--soft); font-size: 0.8125rem; padding-block-end: 0.375rem; }
.sheet li { padding-block: 0.4375rem; border-block-start: 1px solid var(--line); font-size: 0.875rem; }
.page--mail { inline-size: 82%; margin: -1.25rem -1.5rem 0 auto; position: relative; }
.page__to { color: var(--soft); font-size: 0.8125rem; }
.page--mail .page__in { gap: 0.5rem; }
.page del { color: var(--soft); text-decoration-thickness: 1px; }
.page__note { color: var(--soft); font-size: 0.8125rem; border-block-start: 1px solid var(--line); padding-block-start: 0.75rem; margin-block-start: 0.25rem; }
.caption { margin-block-start: 1rem; color: var(--soft); font-size: 0.875rem; }

/* ---------- 7. Prices, questions, the close and the footer ---------- */
.tint { background: #f3f4f6; }
.head { display: grid; gap: 0.75rem; max-inline-size: 44rem; }
.head p { color: var(--soft); font-size: 1.125rem; }
/* The one we run is across the top in the navy; the free ten firms are beneath it in a panel the same shape. */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-block-start: 3rem; }
.price { border-radius: 18px; padding: 2.5rem; background: #fff; box-shadow: 0 1px 2px rgba(16,20,30,.06); display: grid; gap: 1rem; align-content: start; }
.price .fig { font-size: 3.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.price .fig small { font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.price ul { border-block-start: 1px solid var(--line); }
.price li { padding-block: 0.75rem; border-block-end: 1px solid var(--line); }
.price .btn { justify-self: start; margin-block-start: 0.5rem; }
.price--on, .price--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem 4rem; }
.price--on { background: var(--navy); color: #fff; }
.price--on > *, .price--wide > * { grid-column: 1; }
.price--on > ul, .price--wide > ul { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.price--on > ul { border-color: rgba(255,255,255,.2); }
.price--on li { border-color: rgba(255,255,255,.2); }
.price--on .fig { font-size: 4.25rem; }
.price--on .soft { color: rgba(255,255,255,.76); }
.under { margin-block-start: 1.25rem; color: var(--soft); font-size: 0.875rem; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.qa-side { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.qa-side p { color: var(--soft); max-inline-size: 22rem; }
.qa { border-block-start: 1px solid var(--line); }
.qa details { border-block-end: 1px solid var(--line); }
.qa summary { cursor: pointer; padding-block: 1.125rem; font-size: 1.0625rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-weight: 400; color: var(--soft); }
.qa details[open] summary::after { content: "\2212"; }
.qa details p { padding-block-end: 1.5rem; max-inline-size: 44rem; color: var(--soft); font-size: 0.9375rem; }
/* The close: the form at the left on the navy, a photograph of a machined part at the right. */
.last { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--navy); color: #fff; }
.last__in { display: grid; gap: 2rem; align-content: center; inline-size: 100%; max-inline-size: 38rem; margin-inline: auto 0; padding: 6.5rem 4rem 6.5rem 2rem; }
.last h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.last .ask { inline-size: 100%; }
.last__pic { background: #d9dae2; min-block-size: 26rem; }
.last__pic img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 35% 50%; }
.footer { background: var(--deep); color: rgba(255,255,255,.76); font-size: 0.875rem; padding-block-end: var(--consent-pad, 0px); }
.footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3.5rem 2rem; }
.footer__h { margin-block-end: 0.75rem; font-size: 0.8125rem; font-weight: 500; color: rgba(255,255,255,.62); }
.footer li { padding-block: 0.25rem; }
.footer a { color: rgba(255,255,255,.9); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .wordmark { margin-block-end: 1rem; }
.footer__end { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block-start: 1.5rem; margin-block-start: 1rem; border-block-start: 1px solid rgba(255,255,255,.14); font-size: 0.8125rem; }
.footer__end label { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__end select { font: inherit; color: #fff; background: var(--deep); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 0.25rem 0.5rem; }

/* ---------- 8. The question about cookies (site.js writes it): a strip at the foot of the window ---------- */
.ax-consent { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 9000; padding: 1rem; background: var(--deep); color: #fff; border-block-start: 1px solid rgba(255,255,255,.18); font-size: 0.875rem; }
.ax-consent__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-inline-size: 76rem; margin-inline: auto; }
.ax-consent__in p { flex: 1 1 18rem; max-inline-size: 44rem; }
.ax-consent__act { display: flex; gap: 0.5rem; }
.ax-consent .cds--btn { min-block-size: 2.25rem; padding-inline: 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ax-consent .cds--btn--primary { background: #fff; border-color: #fff; color: var(--navy); }

/* ---------- 9. The other pages ---------- */
/* A page's first band: its heading at the left and, at the right, one sentence with at most two things to do. A
   window of the product may stand over its foot, as on the home page. */
.top { background: var(--navy); color: #fff; }
.top > .wrap { display: flow-root; }
.top :focus-visible { outline-color: #fff; }
.top__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: start; padding-block: 5rem; }
.top h1 { font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: 1.04; }
.top__say { display: grid; gap: 1.5rem; padding-block-start: 0.625rem; }
.top .lead { color: rgba(255,255,255,.84); }
.top .small { color: rgba(255,255,255,.72); }
.top__act { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.top--win .top__head { padding-block-end: 4rem; }
.top h1, .top .lead, .feats h2, .widefeat h2, .also__side h2, .last--form h2, .say__big, .who__head h2, .hero h1 { text-wrap: balance; }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
.nav a.basket { color: #fff; }
/* The ten firms' own page opens as the home page does: the words and the form at the left, a window at the right. */
.top__two { display: grid; grid-template-columns: minmax(0, 1fr) 31rem; gap: 4.5rem; align-items: start; padding-block-start: 5rem; }
.top__words { display: grid; gap: 1.5rem; align-content: start; padding-block-end: 5rem; }
.top__two .lead { max-inline-size: 34rem; }
.under-app .wrap { flex-direction: column; }
.under-app--side { padding-block-start: 1.25rem; }
.under-app--side .wrap span { inline-size: 31rem; margin-inline-start: auto; }

/* On a white band a window has a grey edge in place of the white one; on the grey panel it is smaller and lighter. */
.band .win, .ground .win { box-shadow: 0 0 0 1px rgba(22,24,29,.1), 0 14px 36px rgba(20,24,40,.12); }
.ground .win { border-radius: 10px; box-shadow: 0 0 0 1px rgba(22,24,29,.08), 0 10px 26px rgba(20,24,40,.1); }
.mapwin img { display: block; inline-size: 100%; block-size: auto; }
.pane .appwin { margin-block-end: 0; }

/* Words beside a window, several in a row down the page; every other one has its window first. One may instead run
   the page's full width: its heading and line, its window, and under that its list beside its price. */
.feats { display: grid; gap: 7rem; }
.feats > .caption { margin-block-start: -5rem; }
.source--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.source--flip > :first-child { order: 2; }
.cost { font-size: 1.1875rem; margin-block-start: 0.5rem; }
.cost b { font-weight: 600; }
.act { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.ground--pair .win:first-child { padding-block-end: 2rem; }
.ground--pair .win--over { inline-size: 76%; margin: -1.25rem -1.5rem 0 auto; position: relative; }
.widefeat { display: grid; gap: 2.5rem; }
.widefeat__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: start; }
.widefeat__foot ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; border-block-start: 1px solid var(--line); }
.widefeat__foot li { padding-block: 0.875rem; border-block-end: 1px solid var(--line); }
.widefeat__foot > div { display: grid; gap: 1.25rem; }
.widefeat__foot .cost { margin: 0; }
.widepic { border-radius: 14px; overflow: hidden; background: #e4e5ea; aspect-ratio: 21 / 9; }
.widepic img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The Drafts tab: the morning's emails down the left on the portal's grey, the open one on its white panel. */
.appwin__body--drafts { grid-template-columns: 20rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1rem 1.25rem 1.25rem; background: #f3f3f3; }
.dlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 1rem; padding: 0.6875rem 1rem; border-block-end: 1px solid #d8dadf; color: #3b414c; }
.dlist li b { font-weight: 400; font-size: 0.875rem; color: var(--ink); }
.dlist li span:nth-child(2n) { text-align: end; }
.dlist li.on { background: #fff; box-shadow: inset 3px 0 0 #1b76d1; }
.ground .dlist li:last-child { border-block-end: 0; }
.dopen { background: #fff; border: 1px solid #c9ccd3; border-radius: 4px; }
/* A table inside a window, as the portal draws its tables */
.wtbl { inline-size: 100%; border-collapse: collapse; }
.wtbl th { text-align: start; font-weight: 600; white-space: nowrap; padding: 0.5rem 0.75rem; background: #f3f3f3; border-block: 1px solid #c9ccd3; color: #3b414c; }
.wtbl td { padding: 0.6875rem 0.75rem; border-block-end: 1px solid #e5e5e5; vertical-align: top; }
.wtbl tr:last-child td { border-block-end: 0; }
.wtbl th:first-child, .wtbl td:first-child { padding-inline-start: 1.125rem; }
.wtbl th:last-child, .wtbl td:last-child { padding-inline-end: 1.125rem; }
.wtbl .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wtbl--items td span, .wtbl .blk { display: block; }
.wtbl .blk, .wtbl td.wide .lk { white-space: nowrap; }
.wtbl--items .by { color: var(--soft); }
.wtbl .narrow { display: none; }
.wtbl .sel { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid #c9ccd3; border-radius: 4px; padding: 0.1875rem 0.5rem; white-space: nowrap; }
.wtbl .sel::after { content: ""; inline-size: 0.375rem; block-size: 0.375rem; border: solid #5c6068; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.win > .fld:first-child { padding-block-start: 1rem; }
.win .then { padding: 0.375rem 1.125rem; color: #3b414c; }
/* A page of the portal: its grey ground, the strip with its name, and its white panels */
.pg { display: grid; gap: 0.875rem; padding: 0.875rem 1.25rem 1.25rem; background: #f3f3f3; }
.pg__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border: 1px solid #c9ccd3; border-radius: 4px; background: #f8f8f8; }
.pg__head p { display: grid; gap: 0.125rem; }
.pg__head b { font-size: 1.0625rem; font-weight: 600; }
.pg__act { display: flex; gap: 0.5rem; }
.pg__cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.875rem; align-items: start; }
.pg__col { display: grid; gap: 0.875rem; }
.pcard { display: grid; gap: 0.375rem; padding: 0.875rem 1rem; background: #fff; border: 1px solid #c9ccd3; border-radius: 4px; }
.pcard__h { font-size: 1rem; font-weight: 600; margin-block-end: 0.125rem; }
.pcard__f { margin: 0.5rem -1rem -0.875rem; padding: 0.625rem; text-align: center; border-block-start: 1px solid #e5e5e5; }
.pcard .by { color: var(--soft); }
.due, .qlist, .acts { display: grid; gap: 0.625rem; }
.due li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.625rem; }
.due i { inline-size: 1rem; block-size: 1rem; border: 1px solid #8a8e96; border-radius: 2px; margin-block-start: 0.125rem; }
.due li > span > span, .qlist li > span > span { display: block; }
.qlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
.qlist b { font-weight: 400; font-variant-numeric: tabular-nums; }
.acts li { display: grid; gap: 0.125rem; padding-inline-start: 0.75rem; border-inline-start: 2px solid #d8dadf; }
.acts li p:first-child { display: flex; justify-content: space-between; }
.acts li p:first-child span { color: var(--soft); }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.875rem; align-items: stretch; }
.board .pcard { align-content: start; }
.deal { display: grid; gap: 0.0625rem; padding: 0.5rem 0.625rem; border: 1px solid #c9ccd3; border-radius: 4px; margin-block-start: 0.375rem; }
.pg__head--rec { align-items: start; }
.crumb { color: var(--soft); }
.rec { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 0.5rem 3.5rem; padding-block-start: 0.625rem; margin-block-start: 0.25rem; border-block-start: 1px solid #dcdee3; }
.rec dt { color: var(--soft); font-size: 0.75rem; }
.pcard--flush { padding-inline: 0; }
.pcard--flush .pcard__h { padding-inline: 1.125rem; }
.pcard--flush .wtbl td { border-block-end: 1px solid #e5e5e5; }
.tot { justify-self: end; inline-size: min(100%, 20rem); padding: 0.5rem 1.125rem 0; }
.tot div { display: flex; justify-content: space-between; padding-block: 0.3125rem; border-block-end: 1px solid #e5e5e5; font-variant-numeric: tabular-nums; }
.tot div:last-child { border: 0; font-weight: 600; }
/* The email the ten-firm form sends */
.mailwin { position: relative; z-index: 1; margin-block-end: -5rem; font-size: 0.875rem; line-height: 1.5; }
.mailwin__h { display: grid; gap: 0.125rem; padding: 1rem 1.25rem; border-block-end: 1px solid var(--line); }
.mailwin__h b { font-size: 1rem; font-weight: 600; }
.mailwin__h span { color: var(--soft); font-size: 0.8125rem; }
.mailwin__b { display: grid; gap: 0.75rem; padding: 1.125rem 1.25rem 1.375rem; }
.mailwin ol { list-style: decimal; padding-inline-start: 1.375rem; display: grid; gap: 0.75rem; }
.mailwin .more { color: var(--soft); }
.mailwin__mail { display: grid; gap: 0.625rem; padding: 0.875rem 1rem; border: 1px solid #d9dce3; border-radius: 8px; background: #fafbfc; }
.mailwin__mail .soft span { color: var(--ink); }

/* One sentence in large type on the navy, with what it rests on beside it */
.say { background: var(--navy); color: #fff; padding-block: 6rem; }
.say .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem 5rem; align-items: end; }
.say__big { font-size: clamp(1.625rem, 2.9vw, 2.375rem); line-height: 1.22; font-weight: 600; letter-spacing: -0.025em; }
.say__side { display: grid; gap: 1rem; color: rgba(255,255,255,.84); }
.say__side .src { color: rgba(255,255,255,.72); font-size: 0.8125rem; }
.say :focus-visible { outline-color: #fff; }
/* A heading, a line and a photograph beside a lined list or a form; the photograph runs to the foot of what is beside it */
.also { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: stretch; }
.also__side { display: grid; grid-template-rows: auto minmax(16rem, 1fr); gap: 2rem; }
.also__side p { margin-block-start: 0.75rem; color: var(--soft); font-size: 1.125rem; max-inline-size: 26rem; }
.also__side figure { position: relative; border-radius: 14px; overflow: hidden; background: #e4e5ea; }
.also__side img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.also > .rows, .also > .card { align-self: start; }

/* A lined list of names and what each is; a list of prices; a table; and the bars of the price comparison */
.rows { border-block-start: 1px solid var(--line); }
.rows > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0.25rem 2rem; padding-block: 1.0625rem; border-block-end: 1px solid var(--line); }
.rows dt { font-weight: 500; }
.rows dd { color: var(--soft); }
.rows--price > div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rows--price dt { font-weight: 400; }
.rows--price dt b { display: block; font-weight: 500; }
.rows--price dt span { color: var(--soft); font-size: 0.9375rem; }
.rows--price dd { display: grid; grid-template-columns: 8.5rem 9rem; gap: 1rem; align-items: center; justify-items: end; color: var(--ink); font-weight: 600; white-space: nowrap; }
.tbl { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tbl th { text-align: start; font-size: 0.8125rem; font-weight: 500; color: var(--soft); padding: 0 1.5rem 0.75rem 0; border-block-end: 1px solid #cfd2d8; vertical-align: bottom; }
.tbl td { padding: 1rem 1.5rem 1rem 0; border-block-end: 1px solid var(--line); vertical-align: top; }
.tbl td:first-child { font-weight: 500; }
.tbl th:last-child, .tbl td:last-child { padding-inline-end: 0; }
.tbl--when td:first-child { white-space: nowrap; }
.tint .tbl td, .tint .rows > div, .tint .rows { border-color: #dcdfe5; }
.sub { margin-block: 3rem 0.75rem; }
.cmp { margin-block-start: 3rem; }
.cmp .src { margin-block-start: 1.75rem; color: var(--soft); font-size: 0.8125rem; max-inline-size: 60rem; }
.bars { display: grid; gap: 1.25rem; }
.bars__row { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 0.25rem 1.5rem; align-items: center; }
.bars__l b { display: block; font-weight: 500; }
.bars__l span { color: var(--soft); font-size: 0.8125rem; }
.bars__t { display: flex; align-items: center; block-size: 1.5rem; }
.bars__t i { flex: none; display: block; block-size: 100%; inline-size: calc(var(--w) * (100% - 10.5rem)); background: #b9bfca; border-radius: 4px; }
.bars__t i + i { background: #dfe2e8; border-start-start-radius: 0; border-end-start-radius: 0; }
.bars__t i:has(+ i) { border-start-end-radius: 0; border-end-end-radius: 0; }
.bars__row--us .bars__t i { background: var(--navy); }
.bars__t b { margin-inline-start: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The options, on a white panel under the three prices */
.price--opts { grid-column: 1 / -1; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem 4rem; }
.price--opts > div { display: grid; gap: 0.5rem; align-content: start; }
.price--opts .rows .btn { margin: 0; }
.price .rows { border-block-start: 1px solid var(--line); }

/* A form with its labels over its boxes, on a white panel */
.card { background: #fff; color: var(--ink); border-radius: 18px; padding: 2rem; }
.band .card { box-shadow: 0 0 0 1px #dfe1e6; }
.tint .card { box-shadow: 0 1px 2px rgba(16,20,30,.06); }
.card :focus-visible { outline-color: var(--link); }
.h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
.card > .h3 { margin-block-end: 1.25rem; }
.form, .form__fields { display: grid; gap: 1.125rem; }
.f2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.125rem; }
.f { display: grid; gap: 0.375rem; align-content: start; }
.f label, .pick legend { font-size: 0.875rem; font-weight: 500; }
.f input, .f textarea { display: block; inline-size: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid #c3c7cf; border-radius: 10px; padding: 0 0.875rem; block-size: 3rem; }
.f textarea { block-size: auto; min-block-size: 6.5rem; padding-block: 0.75rem; resize: vertical; }
.f input:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--link); outline-offset: -1px; }
.f input::placeholder, .f textarea::placeholder { color: #6b7079; opacity: 1; }
.f input.cds--text-input--invalid, .f textarea.cds--text-area--invalid { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.f .cds--form-requirement { color: var(--bad); font-size: 0.8125rem; }
.f__help { color: var(--soft); font-size: 0.8125rem; }
.pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.pick legend { padding: 0; margin-block-end: 0.5rem; }
.pick label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.pick input { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--navy); }
.form__error { padding: 0.75rem 1rem; border-radius: 10px; background: #fcebea; color: var(--bad); font-size: 0.9375rem; }
.form__error a { color: inherit; }
.form__thanks { display: grid; gap: 0.5rem; }
.form__thanks p:first-child { font-size: 1.1875rem; font-weight: 600; }
.form .small, .card .small { color: var(--soft); }
.form .btn { justify-self: start; }
.last { min-block-size: 30rem; }
.last .card { inline-size: 100%; }
.last__in > p { color: rgba(255,255,255,.84); font-size: 1.125rem; margin-block-start: -0.75rem; }
/* A close that holds a form is as tall as the form, and the photograph fills the height beside it. */
.last--form .last__pic { position: relative; }
.last--form .last__pic img { position: absolute; inset: 0; }

/* The portal's tour: one window shows at a time. Without scripts every one shows and the row of names is hidden. */
.tabs { display: flex; gap: 1.75rem; border-block-end: 1px solid var(--line); margin-block-start: 2.5rem; }
.tabs button { font: inherit; font-weight: 500; color: var(--soft); background: none; border: 0; padding: 0 0 0.875rem; margin-block-end: -1px; border-block-end: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-block-end-color: var(--navy); }
html:not(.js) .tabs { display: none; }
.pane { display: grid; gap: 1.5rem; padding-block-start: 1.75rem; }
.pane > p { font-size: 1.125rem; color: var(--soft); max-inline-size: 46rem; }

/* The small print and the questions: a list of the page's sections beside its text */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
.toc { position: sticky; inset-block-start: 6rem; font-size: 0.875rem; }
.toc p { font-weight: 600; margin-block-end: 0.75rem; }
.toc li { padding-block: 0.3125rem; }
.toc a:not(.btn) { color: var(--soft); text-decoration: none; }
.toc a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
.toc__act { margin-block-start: 1.5rem; }
.prose { max-inline-size: 44rem; }
.prose h2, .faq h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; margin-block: 2.75rem 0.75rem; scroll-margin-block-start: 6rem; }
.faq h2 { margin-block: 3.5rem 1rem; }
.prose > h2:first-child, .faq > h2:first-child { margin-block-start: 0; }
.prose p { margin-block-end: 1rem; color: #2f3440; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; background: #f1f2f5; padding: 0.0625rem 0.3125rem; border-radius: 4px; }
.prose .prose__end { margin-block: 3rem 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.qa-side .rows { justify-self: stretch; }
.text { display: grid; gap: 1rem; max-inline-size: 44rem; font-size: 1.0625rem; }
.text p { color: #2f3440; }
.links { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The basket (site.js draws its lines). Its layout is .cart: .basket is the header's link. */
.cart { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; }
.basket__left { display: grid; gap: 2.5rem; }
.basket__left > :empty { display: none; }
.basket__sum { display: grid; gap: 0.25rem; margin-block-start: 1.5rem; }
.basket__sum strong { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.025em; }
.basket__sum .small { color: var(--soft); }
.basket__more .h3 { margin-block-end: 0.75rem; }
.btn--text { background: none; border: 0; padding: 0; font: inherit; font-weight: 400; color: inherit; text-decoration: underline; cursor: pointer; }
.price__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-block-start: 0.5rem; }
.price__act .btn { margin-block-start: 0; }
.price__act a:not(.btn) { color: rgba(255,255,255,.84); font-size: 0.9375rem; }

/* ---------- 10. Narrow screens ---------- */
@media (max-width: 65.98rem) {
  .nav { display: none; }
  .m-check { display: inline-flex; margin-inline-start: auto; }
  .nav-toggle { display: block; position: relative; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; font-size: 0; color: inherit; background: transparent; border: 0; cursor: pointer; }
  html:not(.js) .nav-toggle { display: none; }
  .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; inset-inline: 11px; block-size: 1.5px; background: currentColor; }
  .nav-toggle::before { inset-block-start: 17px; }
  .nav-toggle::after { inset-block-end: 17px; }
  .nav-toggle[aria-expanded="true"]::before { inset-block-start: 21px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after { inset-block-end: 21.5px; transform: rotate(-45deg); }
}
@media (max-width: 62rem) {
  .wrap, .masthead .in { padding-inline: 1rem; }
  .masthead .in { gap: 0.75rem; }
  .hero__top, .who__head, .source, .two, .last, .prices, .price--on, .price--wide, .appwin__body { grid-template-columns: minmax(0, 1fr); }
  .hero__top { padding-block-start: 3.5rem; gap: 0; }
  .hero__words { padding-block-end: 2.5rem; }
  .ask { inline-size: 100%; }
  .ask__row { grid-template-columns: minmax(0, 1fr); }
  .ask__cell + .ask__cell { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .draftwin { margin: 0 0 1.25rem; }
  .appwin { margin-block-end: -3rem; }
  .appwin__bar span:nth-of-type(n+4) { display: none; }
  .appwin__map { border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .under-app { padding-block-start: 4.25rem; }
  .band { padding-block: 4rem; }
  .band--flush { padding-block-start: 0; }
  .who { gap: 2rem; }
  .shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; block-size: auto; gap: 0.75rem; }
  .shots figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .shots figure { aspect-ratio: 1; }
  .source { gap: 2.5rem; }
  .ground { padding: 1rem 0.75rem 1.25rem; }
  .page__nav span { display: none; }
  .page__in { padding: 1rem 1rem 1.25rem; }
  .page__nav { padding: 0.75rem 1rem; }
  .page--team { inline-size: 88%; margin: -0.75rem 0 0 auto; }
  .page--mail { inline-size: auto; margin: 0.75rem 0 0; }
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 1rem 0; }
  .price { padding: 1.75rem; }
  .price--on > ul, .price--wide > ul { grid-column: 1; grid-row: auto; }
  .price--on > .btn, .price--on > .price__act, .price--wide > .btn { order: 5; }
  .last__in { padding: 4rem 1rem; max-inline-size: none; margin: 0; }
  .last__pic { min-block-size: 0; aspect-ratio: 16 / 10; order: -1; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  /* the other pages */
  .top__head, .top__two, .source--flip, .legal, .cart, .f2, .say .wrap, .also, .widefeat__foot, .widefeat__foot ul, .price--opts, .pg__cols { grid-template-columns: minmax(0, 1fr); }
  .top__head { padding-block: 3.5rem 3rem; gap: 1rem; }
  .top__say { padding-block-start: 0; }
  .top--win .top__head { padding-block-end: 2.5rem; }
  .top__two { padding-block-start: 3.5rem; gap: 0; }
  .top__words { padding-block-end: 2.5rem; }
  .mailwin { margin-block-end: -3rem; }
  .under-app--side { padding-block-start: 4.25rem; }
  .under-app--side .wrap span { inline-size: auto; margin: 0; }
  .feats { gap: 4rem; }
  .feats > .caption { margin-block-start: -2.75rem; }
  .source--flip > :first-child { order: 0; }
  .widefeat { gap: 1.75rem; }
  .widepic { aspect-ratio: 4 / 3; }
  .say { padding-block: 4rem; }
  .also { gap: 2rem; }
  .also__side { grid-template-rows: auto auto; gap: 1.5rem; }
  .also__side figure { aspect-ratio: 4 / 3; }
  .two--plain { gap: 1.5rem; }
  .last { min-block-size: 0; }
  .last--form .last__pic img { position: static; }
  .form .btn { justify-self: stretch; }
  .card { padding: 1.5rem 1.25rem; }
  .cart { gap: 2.5rem; }
  .tabs { overflow-x: auto; gap: 1.25rem; }
  .toc { display: none; }
  /* windows of the product */
  .ground--pair .win--over { inline-size: 90%; margin: -1rem 0 0 auto; }
  .appwin__tabs { overflow: hidden; gap: 1rem; }
  .appwin__tabs span:nth-child(n+5) { display: none; }
  .appwin__body--drafts { padding: 0.75rem; gap: 0.75rem; }
  .appwin .dlist li:nth-child(n+4) { display: none; }
  .dopen .draftwin__f .chip:nth-child(2), .win--over .draftwin__f .chip:nth-child(2), .ground .draftwin__f .chip:nth-child(3):not(.push) { display: none; }
  .wtbl .wide { display: none; }
  .wtbl .narrow { display: block; }
  .wtbl--items thead { display: none; }
  .wtbl--items tr { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); border-block-end: 1px solid #e5e5e5; }
  .wtbl--items tr:last-child { border-block-end: 0; }
  .wtbl--items td { border: 0; }
  .wtbl--items td:not(.n) { grid-column: 2; padding-inline-start: 0.75rem; }
  .wtbl--items td:not(.n) ~ td:not(.n) { padding-block-start: 0; }
  .pg { padding: 0.75rem; }
  .pg__act .chip + .chip { display: none; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .board .pcard:nth-child(n+3) { display: none; }
  .rec { gap: 0.5rem 2rem; }
  /* lists and tables: a table's row becomes a block, each cell after the first under its column's name */
  .rows > div { grid-template-columns: minmax(0, 1fr); }
  .rows--price dd { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; inline-size: 100%; }
  .rows--price dd > :last-child { justify-self: end; }
  .tbl thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl tr { padding-block: 0.875rem; border-block-end: 1px solid var(--line); }
  .tint .tbl tr { border-color: #dcdfe5; }
  .tbl tbody tr:first-child { border-block-start: 1px solid var(--line); }
  .tbl td { padding: 0.125rem 0; border: 0; }
  .tbl td[data-th]::before { content: attr(data-th) ": "; color: var(--soft); }
  .cmp { margin-block-start: 2rem; }
  .bars__row { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .masthead, .mobile-nav, .note, .ax-consent, form, .btn { display: none !important; }
  .band { padding-block: 1.5rem; }
}