/* QuoteNod marketing site — mobile-first, zero frameworks, tiny. */
:root {
  --navy-900: #0b1626;
  --navy-800: #10203a;
  --accent: #17c96f;
  --accent-strong: #0fb35f;
  --on-accent: #06231a;
  /* Navy is the site, on every device, whatever the phone is set to — the
     same stance as the app (see theme.ts). Light is a switch in the header,
     remembered in the browser, for reading in bright sun. */
  --bg: #0b1626;
  --bg-raised: #10203a;
  --text: #edf2f7;
  --muted: #9fb0c3;
  --faint: #8fa1b6;
  --accent-text: #17c96f;
  --border: #1d3049;
  --radius: 12px;
  --follow-on-navy: block;
  --follow-on-light: none;
  color-scheme: dark;
  /* The same typeface as the app, served from the same place, so the site
     and the thing it sells are one voice. */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* The frame every public page shares. The page is a column no wider than
     --column, centred: the gutter either side grows with the screen, 4% of
     the window and never less than 18px, and once the window is wider than
     the column plus its gutters the gutters take up the rest, so on a PC the
     words and the pictures sit together in the middle rather than at
     opposite edges. A line of running text stops at --measure, about 75
     characters, however wide its column is. --screen-zoom is how far the
     whole page is scaled up on a very wide screen, set only by the ladder
     at the foot of this file; a length in vw is scaled with everything
     else, so the gutter divides it back out. */
  --screen-zoom: 1;
  --column: 1200px;
  --gutter-fluid: max(
    calc(4vw / var(--screen-zoom)),
    calc((100vw / var(--screen-zoom) - var(--column)) / 2)
  );
  --gutter: max(18px, var(--gutter-fluid));
  --measure: 31em;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root[data-theme='light'] {
  --bg: #ffffff;
  --bg-raised: #f6f8fa;
  --text: #12233c;
  --muted: #4d5e72;
  --faint: #5b6b7d;
  --accent-text: #0b7a44;
  --border: #e2e7ec;
  --follow-on-navy: none;
  --follow-on-light: block;
  color-scheme: light;
}
/* The pre-launch landing page is a cinematic piece: always dark, on every
   device, whatever the system theme — so everyone sees the same design. */
body.pl-body {
  --bg: #0b1626;
  --bg-raised: #10203a;
  --text: #edf2f7;
  --muted: #9fb0c3;
  --faint: #8fa1b6;
  --accent-text: #17c96f;
  --border: #1d3049;
  --follow-on-navy: block;
  --follow-on-light: none;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
/* Once the page's own script has taken a phone's text size over (see
   text-size.ts), the browser is asked not to enlarge blocks of text as well. */
html[data-textscale] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--font);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  zoom: var(--screen-zoom);
}
a {
  color: inherit;
}
img {
  max-width: 100%;
}

/* header */
.mk-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px max(16px, var(--gutter-fluid));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.mk-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mk-logo svg {
  width: 26px;
  height: 26px;
}
.mk-logo b {
  color: var(--accent-text);
}
.mk-nav {
  display: none;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.mk-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--muted);
}
/* The light/dark switch: a round button to the left of Features on a
   desktop, and at the foot of the sheet on a phone. It shows the mode you
   would switch to — a sun while the page is navy, a moon while it is light. */
.mk-theme {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-theme svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mk-theme .mk-sun {
  color: #f5c945;
}
.mk-theme .mk-moon {
  display: none;
}
:root[data-theme='light'] .mk-theme .mk-sun {
  display: none;
}
:root[data-theme='light'] .mk-theme .mk-moon {
  display: block;
  color: var(--navy-900);
}
.mk-sheet .mk-theme {
  width: 48px;
  height: 48px;
  margin: 14px auto 0;
  display: flex;
}
.mk-sheet .mk-theme svg {
  width: 24px;
  height: 24px;
}
/* The strip the owner sees on their own site while signed in — the way back
   to admin without signing out. Nobody else ever gets it. */
.mk-owner {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.875rem;
}
.mk-owner a {
  color: inherit;
  font-weight: 800;
  white-space: nowrap;
}
.mk-owner-live {
  flex-wrap: wrap;
}
.mk-cta {
  margin-left: auto;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  white-space: nowrap;
}
.mk-menu-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font: 600 0.875rem var(--font);
  color: var(--text);
}
/* On a phone the head holds the name, the green button and Menu. A long
   label on the button goes onto two lines there, so Menu stays on the screen. */
@media (max-width: 430px) {
  .mk-head {
    gap: 10px;
  }
  .mk-logo,
  .mk-menu-btn {
    flex: none;
  }
  .mk-cta {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding-inline: 12px;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    line-height: 1.2;
  }
}
@media (min-width: 760px) {
  .mk-nav {
    display: flex;
  }
  .mk-cta {
    margin-left: 0;
  }
  .mk-menu-btn {
    display: none;
  }
}
.mk-sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgb(11 22 38 / 0.25);
  display: none;
}
.mk-sheet.open {
  display: block;
}
.mk-sheet a {
  display: block;
  padding: 14px 4px;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mk-sheet a:last-of-type {
  border: none;
  color: var(--accent-text);
}
/* The Follow row at the top of the page: beside the name in the header of
   the live pages from 1024px up (narrower, the header has no room for it
   beside the links; on a phone it is in the menu sheet instead, with its
   lead), and in the landing page's top bar, before Coming soon — on a
   phone, on its own line under the name. The pictures are the size of the
   sun button, and the lead "Follow QuoteNod" is there for a screen reader
   but not drawn. */
.qn-follow.qn-follow-top {
  margin: 0;
  flex: none;
  flex-wrap: nowrap;
}
.qn-follow.qn-follow-top .qn-follow-lead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.qn-follow.qn-follow-top .qn-follow-link,
.qn-follow.qn-follow-top .qn-follow-tile {
  min-height: 32px;
  min-width: 32px;
  width: 32px;
  height: 32px;
}
.qn-follow.qn-follow-top .qn-follow-link:not(.qn-follow-tile) {
  width: auto;
  font-size: 0.875rem;
}
.qn-follow.qn-follow-top:has(.qn-follow-tile) {
  column-gap: 0.5rem;
}
.mk-head > .qn-follow-top {
  display: none;
}
.mk-sheet .qn-follow {
  margin: 14px 0 0;
}
.mk-sheet .qn-follow a {
  border: none;
  color: var(--muted);
}
.pl-top > .qn-follow-top {
  margin-left: auto;
}
.pl-top > .qn-follow-top + .pl-badge {
  margin-left: 0;
}
@media (max-width: 599px) {
  .pl-top > .qn-follow-top {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }
  .pl-top > .qn-follow-top + .pl-badge {
    margin-left: auto;
  }
}
@media (min-width: 760px) {
  .mk-sheet .qn-follow {
    display: none;
  }
}
@media (min-width: 1024px) {
  .mk-head > .qn-follow-top {
    display: flex;
  }
}

/* layout */
/* The page uses the width it is given up to --column: a phone reads it as
   one column, a tablet or a PC gets the room, a wider PC screen gets the
   column in the middle with the gutters growing either side, and a screen
   wider than 1920px gets the same page scaled up (see the ladder at the
   foot of this file), so a big monitor is filled without a line of text a
   metre long. The gutter is the page's padding, not a margin, so a band
   that runs edge to edge can still reach the window's edge. */
.mk-wrap {
  margin: 0 auto;
  padding: 0 max(20px, var(--gutter-fluid));
}
/* Centred on a phone, where everything is one column; from a tablet up the
   heads sit on the left with their sections, and a lead paragraph keeps a
   readable measure without being pushed to the middle. */
.mk-centre {
  text-align: center;
}
.mk-lead {
  max-width: 640px;
  margin: 0 auto 14px;
}
@media (min-width: 900px) {
  .mk-centre {
    text-align: left;
  }
  .mk-lead,
  .mk-centre .mk-pay-lead {
    margin-left: 0;
  }
}
.mk-hero {
  padding: 56px 0 32px;
  text-align: center;
}
.mk-hero h1 {
  font-size: clamp(1.875rem, 6vw, 2.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 auto 14px;
  max-width: 17ch;
  text-wrap: balance;
}
.mk-hero p {
  color: var(--muted);
  font-size: 1.1875rem;
  max-width: 44ch;
  margin: 0 auto 24px;
}
.btn-big {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 12px;
}
.btn-big:active {
  background: var(--accent-strong);
}
.mk-sub {
  font-size: 0.875rem;
  color: var(--faint);
  margin-top: 10px;
}

/* ---- hero intro: the Nod draws itself, winks, nods, then flips to the pitch ---- */
.hero-flip {
  position: relative;
  perspective: 1100px;
}
.hero-intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: heroFlipOut 0.65s cubic-bezier(0.55, 0, 0.3, 1) 1.9s forwards;
}
.hero-main {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: heroFlipIn 0.65s cubic-bezier(0.55, 0, 0.3, 1) 1.9s forwards;
}
.hero-logo {
  width: clamp(130px, 38vw, 190px);
  color: var(--text);
  animation: heroNod 1.9s ease-in-out forwards;
}
.hero-tick {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: heroDraw 0.75s ease-out 0.15s forwards;
}
.hero-dot,
.hero-eye,
.hero-brow {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-dot {
  transform: scale(0);
  animation: heroDot 1.9s ease-in-out forwards;
}
.hero-eye {
  transform: scale(0);
  opacity: 0.45;
  animation: heroEye 1.9s ease-in-out forwards;
}
.hero-brow {
  opacity: 0;
  animation: heroBrow 1.9s ease-in-out forwards;
}
@keyframes heroDraw {
  to {
    stroke-dashoffset: 0;
  }
}
/* the green eye pops in and stays open */
@keyframes heroDot {
  0% {
    transform: scale(0);
  }
  16% {
    transform: scale(1.18);
  }
  22%,
  100% {
    transform: scale(1);
  }
}
/* the grey eye pops in round, then winks shut and stays winked */
@keyframes heroEye {
  0% {
    transform: scale(0);
    opacity: 0.45;
  }
  18% {
    transform: scale(1.15);
  }
  24%,
  56% {
    transform: scale(1);
    opacity: 0.45;
  }
  63% {
    transform: scale(1, 0.07);
    opacity: 0.45;
  }
  66%,
  100% {
    transform: scale(1, 0.07);
    opacity: 0;
  }
}
/* …becoming the arc of the finished logo at the moment it closes */
@keyframes heroBrow {
  0%,
  62% {
    opacity: 0;
  }
  66%,
  100% {
    opacity: 0.45;
  }
}
/* the whole mark gives a little nod */
@keyframes heroNod {
  0%,
  58% {
    transform: none;
  }
  70% {
    transform: rotate(10deg) translateY(4px);
  }
  82% {
    transform: rotate(-3deg);
  }
  92%,
  100% {
    transform: none;
  }
}
/* opacity drops at the edge-on midpoint: Chromium ignores backface-visibility on SVG content */
@keyframes heroFlipOut {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: rotateY(-180deg);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes heroFlipIn {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-intro {
    display: none;
  }
  .hero-main {
    transform: none;
    animation: none;
  }
}
/* From a tablet up there is room for both: the pitch on the left, and the
   Nod drawing itself on the right instead of in front — no flip needed. */
@media (min-width: 900px) {
  .mk-hero {
    text-align: left;
    padding: 64px 0 40px;
  }
  .mk-hero h1,
  .mk-hero p {
    margin-left: 0;
  }
  .mk-hero h1 {
    max-width: none;
    font-size: clamp(2.875rem, 4.4vw, 3.875rem);
  }
  .hero-line {
    display: block;
  }
  .hero-flip {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 40px;
    perspective: none;
  }
  .hero-intro {
    display: block;
    position: static;
    order: 2;
    animation: none;
  }
  .hero-logo {
    width: clamp(180px, 18vw, 260px);
  }
  .hero-main {
    transform: none;
    animation: none;
  }
}

section.mk-feature {
  display: grid;
  gap: 28px;
  padding: 44px 0;
  border-top: 1px solid var(--border);
  align-items: center;
}
/* From a tablet up the picture and its words share a line, and the picture
   sits against the words rather than in the middle of its own half, so the
   two read as one thing on a wide screen. */
@media (min-width: 760px) {
  section.mk-feature {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
  section.mk-feature .snip {
    justify-content: flex-start;
  }
  section.mk-feature:nth-child(even) .snip {
    order: -1;
    justify-content: flex-end;
  }
}
.mk-feature h2 {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.mk-feature p {
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
}
.mk-kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.mk-hero .mk-kicker,
.hero-main .mk-kicker {
  margin-bottom: 8px;
}

/* ---------- animated snippets ----------
   These and the trailer's scenes are pictures of the app, drawn at one size:
   their words stay as drawn, as the words in a photograph would, and do not
   follow the reader's text size. */
.snip,
.pl-stage {
  font-size: 17px;
}
.pl-scene .btn-big {
  font-size: 17px;
}
.snip {
  display: flex;
  justify-content: center;
}
.phone {
  width: 264px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 16px 48px rgb(11 22 38 / 0.16);
  padding: 18px 16px;
  min-height: 324px;
  position: relative;
  overflow: hidden;
}
.phone .ph-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.row-line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
}
.row-line b {
  font-variant-numeric: tabular-nums;
}
.ph-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-top: 12px;
  font-weight: 800;
}
.ph-total > span:first-child {
  font-size: 13.5px;
}
.ph-total .amt {
  font-size: 21px;
  position: relative;
  height: 28px;
  width: 104px;
  text-align: right;
  flex: none;
}
.ph-total .amt span {
  position: absolute;
  right: 0;
  opacity: 0;
}
.ph-btn {
  margin-top: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  border-radius: 10px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.chat {
  background: var(--bg-raised);
  border-radius: 12px;
  padding: 12px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bub {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  opacity: 0;
}
.bub.them {
  background: var(--bg);
  border: 1px solid var(--border);
  align-self: flex-start;
}
.bub.me {
  background: #d9fdd3;
  color: #123;
  align-self: flex-end;
  transform: translateY(14px);
}
.bub.link {
  border: 1.5px solid var(--accent);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}
.sigline {
  stroke: #12233c;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
}
.sigpad-mini {
  background: #fffdf5;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  height: 96px;
  margin: 8px 0;
}
.inbox-row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-raised);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(10px);
}
.pdf-chip {
  background: #c92a2a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 5px;
  padding: 4px 6px;
}
.seal {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-size: 26px;
  transform: scale(0);
  rotate: -12deg;
}
.flip {
  position: relative;
  min-height: 250px;
}
.card-face {
  position: absolute;
  inset: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.card-face h4,
.card-face .card-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}
.mini-line {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-raised);
  margin: 8px 0;
}
.balance {
  margin-top: 12px;
  border-top: 2px solid var(--accent);
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 15px;
}
.logo-slot {
  width: 74px;
  height: 26px;
  border-radius: 6px;
  background: var(--navy-800);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
}
.accent-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  margin: 10px 0;
}

/* ---- animation timelines: ONE shared 7s clock for every element.
   Stagger lives inside each keyframe (never animation-delay), and every
   element shares the same fade-out window at 88–94% — so each snippet
   fully disappears as one and restarts as one. ---- */
.play .row-line {
  animation: qRow1 7s infinite;
}
.play .row-line:nth-child(3) {
  animation-name: qRow2;
}
.play .row-line:nth-child(4) {
  animation-name: qRow3;
}
.play .row-line:nth-child(5) {
  animation-name: qRow4;
}
@keyframes qRow1 {
  0%,
  3% {
    opacity: 0;
    transform: translateY(8px);
  }
  8%,
  88% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes qRow2 {
  0%,
  10% {
    opacity: 0;
    transform: translateY(8px);
  }
  15%,
  88% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes qRow3 {
  0%,
  17% {
    opacity: 0;
    transform: translateY(8px);
  }
  22%,
  88% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes qRow4 {
  0%,
  24% {
    opacity: 0;
    transform: translateY(8px);
  }
  29%,
  88% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
.play .bub .ticks {
  color: #34b7f1;
}
.play .sigline {
  animation: draw7 7s infinite;
}
@keyframes draw7 {
  0%,
  6% {
    stroke-dashoffset: 520;
  }
  30%,
  88% {
    stroke-dashoffset: 0;
  }
  96%,
  100% {
    stroke-dashoffset: 520;
  }
}
.play .ph-btn .sweep {
  position: absolute;
  inset: 0;
  background: var(--accent-strong);
  transform: translateX(-100%);
  animation: sweep7 7s infinite;
}
.ph-btn span {
  position: relative;
  z-index: 1;
}
@keyframes sweep7 {
  0%,
  30% {
    transform: translateX(-100%);
  }
  38%,
  88% {
    transform: none;
  }
  94%,
  100% {
    transform: translateX(-100%);
  }
}
.play .inbox-row {
  animation: qRow1 7s infinite;
}
.play .inbox-row.i2 {
  animation-name: qRow2;
}
.play .seal {
  animation: seal7 7s infinite;
}
@keyframes seal7 {
  0%,
  34% {
    transform: scale(0);
  }
  40% {
    transform: scale(1.15);
  }
  44%,
  88% {
    transform: scale(1);
  }
  94%,
  100% {
    transform: scale(0);
  }
}
.card-face.back {
  opacity: 0;
  transform: translateX(24px);
}
.play .card-face.front {
  animation: frontOut 7s infinite;
}
.play .card-face.back {
  animation: backIn 7s infinite;
}
@keyframes frontOut {
  0%,
  25% {
    opacity: 1;
    transform: none;
  }
  35%,
  88% {
    opacity: 0;
    transform: translateX(-24px);
  }
  96%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes backIn {
  0%,
  25% {
    opacity: 0;
    transform: translateX(24px);
  }
  35%,
  88% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: translateX(24px);
  }
}
.play .logo-slot {
  animation: pop7 7s infinite;
}
@keyframes pop7 {
  0%,
  7% {
    opacity: 0;
    transform: scale(0.6);
  }
  13% {
    opacity: 1;
    transform: scale(1.08);
  }
  16%,
  88% {
    opacity: 1;
    transform: scale(1);
  }
  94%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
.play .accent-bar {
  animation: hue 7s infinite;
}
@keyframes hue {
  0%,
  20% {
    background: var(--accent);
  }
  30%,
  45% {
    background: #1864ab;
  }
  55%,
  70% {
    background: #b26a00;
  }
  80%,
  100% {
    background: var(--accent);
  }
}

/* ---- JS trade cycler (quote builder + WhatsApp snips) ---- */
.qc-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.qc-row b {
  font-variant-numeric: tabular-nums;
}
.qc-row.in {
  opacity: 1;
  transform: none;
}
.qc-total {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.snip-chat .bub {
  animation: none !important;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.snip-chat .bub.in {
  opacity: 1;
  transform: none;
}
.qc-fade .qc-row,
.qc-fade .bub {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  transition:
    opacity 0.26s ease,
    transform 0.26s ease;
}

/* ---- the strip's own pictures, on the same 7s clock as the rest ---- */
.s-1,
.s-2,
.s-3,
.s-4 {
  opacity: 0;
  transform: translateY(8px);
}
.play .s-1 {
  animation: qRow1 7s infinite;
}
.play .s-2 {
  animation: qRow2 7s infinite;
}
.play .s-3 {
  animation: qRow3 7s infinite;
}
.play .s-4 {
  animation: qRow4 7s infinite;
}
.pop {
  opacity: 0;
  transform: scale(0.6);
}
.play .pop {
  animation: pop7 7s infinite;
}
.mk-up {
  color: var(--accent-text);
}
.chip-ok {
  background: var(--accent);
  color: var(--on-accent);
}
.nod-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 196px;
}
.nod-chat .inbox-row {
  margin: 0;
}
.snip .dy-job {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  align-items: baseline;
  background: var(--bg-raised);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.snip .dy-job small {
  flex-basis: 100%;
  color: var(--faint);
  font-size: 11.5px;
}
.snip .dy-travel {
  margin: 4px 0 4px 12px;
  padding: 3px 0 3px 12px;
  border-left: 2px dashed var(--border);
  color: var(--faint);
  font-size: 11.5px;
}
.snip .av {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
}
.snip .mini-search {
  background: var(--bg-raised);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--faint);
  font-size: 12px;
  margin-bottom: 4px;
}
.row-line.low b {
  color: #f59f00;
}
.snip .stock-warn {
  margin-top: 14px;
  border: 1.5px solid #f59f00;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 700;
}

/* reduced motion: freeze on the finished frame */
@media (prefers-reduced-motion: reduce) {
  .play *,
  .snip * {
    animation: none !important;
  }
  .row-line,
  .bub,
  .inbox-row,
  .qc-row,
  .s-1,
  .s-2,
  .s-3,
  .s-4,
  .pop {
    opacity: 1 !important;
    transform: none !important;
  }
  .sigline {
    stroke-dashoffset: 0 !important;
  }
  .seal {
    transform: scale(1) !important;
  }
  .amt span:nth-child(3),
  .card-face.back .logo-slot {
    opacity: 1 !important;
  }
  .amt span:nth-child(1),
  .amt span:nth-child(2) {
    opacity: 0 !important;
  }
  .card-face.back {
    opacity: 1 !important;
    transform: none !important;
  }
  .card-face.front {
    opacity: 0 !important;
  }
  .logo-slot {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}

/* between pages: a short fade out and in, opacity only, no snapshots */
body > *:not(.qn-loader) {
  animation: qnPageIn 0.18s ease-out both;
}
html.is-leaving body > *:not(.qn-loader) {
  opacity: 0;
  transition: opacity 0.14s ease-in;
}
@keyframes qnPageIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  body > *:not(.qn-loader) {
    animation: none;
  }
  html.is-leaving body > *:not(.qn-loader) {
    opacity: 1;
    transition: none;
  }
}

/* pricing + faq + footer */
.mk-price {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  max-width: 380px;
  margin: 0 auto;
  text-align: center;
}
.mk-price .num {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.mk-price .per {
  color: var(--faint);
  font-size: 0.9375rem;
}
.mk-price ul {
  text-align: left;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.9;
}
/* the three packages */
.mk-pkgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin: 8px 0 22px;
}
@media (max-width: 860px) {
  .mk-pkgs {
    grid-template-columns: 1fr;
  }
}
.mk-pkg {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}
/* The three cards share their rows, so the price and the green button sit
   on the same line across all three however long each description runs.
   A card has up to nine parts; the "Most firms" flag floats, so it is not
   one of them. */
@supports (grid-template-rows: subgrid) {
  .mk-pkg {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 9;
    align-content: start;
  }
}
.mk-pkg h3 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mk-pkg .num {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.mk-pkg .per {
  color: var(--faint);
  font-size: 0.9375rem;
  margin-left: 6px;
}
.mk-pkg-who,
.mk-pkg-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.mk-pkg-note {
  margin-top: -6px;
  font-size: 0.8125rem;
  color: var(--faint);
}
.mk-pkg-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 4px;
}
.mk-pkg ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
}
.mk-pkg ul.mk-pkg-no {
  color: var(--faint);
  list-style: '× ';
}
.mk-pkg.is-featured {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.mk-pkg.is-featured .mk-pkg-who,
.mk-pkg.is-featured ul,
.mk-pkg.is-featured .per {
  color: #c5d0dd;
}
.mk-pkg.is-featured .mk-pkg-note,
.mk-pkg.is-featured .mk-pkg-label,
.mk-pkg.is-featured ul.mk-pkg-no {
  color: #9fb0c3;
}
.mk-pkg-flag {
  position: absolute;
  top: -13px;
  left: 22px;
  background: var(--accent);
  color: #06231a;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.mk-addons {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.mk-addons-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mk-addons-head b {
  font-size: 1.125rem;
}
.mk-addons-head span {
  color: var(--muted);
  font-size: 0.875rem;
}
.mk-addons-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px) {
  .mk-addons-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-addons-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.mk-addons-grid b {
  color: inherit;
  font-size: 0.875rem;
}
.mk-addons-grid i {
  font-style: normal;
  font-weight: 700;
}
.mk-price-costs {
  max-width: 760px;
}
.mk-toggle {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  margin-bottom: 16px;
  overflow: hidden;
}
.mk-toggle button {
  border: none;
  background: none;
  font: 600 0.875rem var(--font);
  padding: 8px 18px;
  color: var(--muted);
  cursor: pointer;
}
.mk-toggle button.on {
  background: var(--navy-800);
  color: #fff;
}
details.faq {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
details.faq summary {
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
}
details.faq p {
  color: var(--muted);
  margin: 10px 0 0;
}
.mk-foot {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding: 28px 0 48px;
  font-size: 1rem;
  color: var(--faint);
}
.mk-foot nav {
  margin: 0 0 1em;
}
.mk-foot a {
  color: var(--faint);
  text-decoration: none;
  margin-right: 14px;
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
}
/* The legal links, the company paragraph and the copyright line: the same
   footer the app draws, laid out the same way (see .qn-foot in app.css, and
   change the two together). The twelve links are a grid of full rows: two
   across on a phone, each a thumb's height, then four, six and all twelve.
   The two paragraphs share the width side by side on a wide screen. */
.qn-footlinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  column-gap: 16px;
  font-size: 0.875rem;
  margin: 0 0 12px;
}
.mk-foot .qn-footlinks a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-right: 0;
  padding: 0;
}
.qn-footco {
  margin: 0 0 8px;
  text-wrap: pretty;
}
@media (min-width: 760px) {
  .qn-footlinks {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    column-gap: 1.25em;
    font-size: 1rem;
  }
  .mk-foot .qn-footlinks a {
    min-height: 36px;
    white-space: nowrap;
  }
}
@media (min-width: 1000px) {
  .mk-foot .qn-foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(22em, calc(50% - 24px))), 1fr));
    column-gap: 48px;
  }
  .qn-footlinks {
    grid-column: 1 / -1;
  }
  .qn-footco {
    margin: 0;
  }
}
@media (min-width: 1280px) {
  .qn-footlinks {
    grid-template-columns: repeat(6, auto);
  }
}
@media (min-width: 1760px) {
  .qn-footlinks {
    grid-template-columns: repeat(12, auto);
  }
}
/* The reader's text size has the last word, as in app.css: the footer's own
   room, counted in the size its words are set in, caps how many links stand
   in a row. */
.qn-foot {
  container-type: inline-size;
}
@container (max-width: 103em) {
  .qn-footlinks {
    grid-template-columns: repeat(6, auto);
  }
}
@container (max-width: 60.3em) {
  .qn-footlinks {
    grid-template-columns: repeat(4, auto);
  }
}
@container (max-width: 43.6em) {
  .qn-footlinks {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: normal;
    column-gap: 16px;
  }
  .mk-foot .qn-footlinks a {
    white-space: normal;
  }
}
@container (max-width: 16em) {
  .qn-footlinks {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* "A−", the size in use and "A+": the reader's own text size, as the last
   row of the footer at its right-hand end, here and on the landing page.
   Hidden until the script in the head of the page has run (see
   text-size.ts). The app draws the same three from app.css. */
.qn-textsize {
  display: none;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
html[data-textstep] .qn-textsize {
  display: flex;
}
.qn-textsize button {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--faint);
  font: 600 0.875rem/1 var(--font);
  cursor: pointer;
}
.qn-textsize .qn-ts-now {
  min-width: 3.75em;
}
.qn-textsize button:hover {
  color: var(--accent-text);
  border-color: currentColor;
}
.qn-textsize button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.qn-textsize button[aria-disabled='true'] {
  color: var(--faint);
  border-color: var(--border);
  cursor: default;
}
.qn-textsize button[aria-disabled='true']:not(.qn-ts-now) {
  opacity: 0.45;
}
.qn-ts-says {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mk-prose {
  max-width: 660px;
  margin: 0 auto;
  padding: 32px 0;
}
.mk-prose h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.mk-prose h2 {
  font-size: 1.3125rem;
  margin-top: 28px;
}
.mk-prose p,
.mk-prose li {
  color: var(--muted);
}
.blog-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 14px 0;
  text-decoration: none;
}
.blog-card b {
  font-size: 1.125rem;
}
.blog-card span {
  display: block;
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 4px;
}

/* ---- one-time cookies/policies notice ---- */
.cookie-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy-800);
  color: #edf2f7;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 34px rgb(11 22 38 / 0.35);
  max-width: 680px;
  margin: 0 auto;
}
.cookie-bar p {
  margin: 0;
  font-size: 0.84375rem;
  line-height: 1.45;
}
.cookie-bar a {
  color: var(--accent);
  text-decoration: underline;
}
/* Deliberately not the accent colour. This button shares the first screenful
   with "Claim a founding place", and two green buttons means the nearer one
   gets pressed — which is the one that does nothing for anybody. */
.cookie-bar button {
  flex: none;
  background: transparent;
  color: #edf2f7;
  border: 1.5px solid rgb(237 242 247 / 0.5);
  border-radius: 9px;
  font: 600 0.875rem var(--font);
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
}
.cookie-bar button:hover {
  border-color: #edf2f7;
  background: rgb(237 242 247 / 0.08);
}

/* ---- between-pages loading screen: the mark, the name, and a sweeping bar ----
   The same screen the Mail app shows as it opens: the mark and the name held
   still, and a green light sweeping along a thin track underneath, 1.23s a
   pass. The light moves on a transform inside a clipped track of fixed
   width, so it relays out nothing and costs nothing to draw.

   There is deliberately no @view-transition here. It cross-faded one page
   into the next and looked right, but the browser snapshots the whole
   document rather than the visible window, twice per navigation, so the cost
   grew with the length of the page — measured at +91ms a click on the long
   ones under a modest CPU, and enough texture to lock a machine up. What
   removes the flash is below and costs nothing: the cover simply waits long
   enough that an ordinary page never shows it. */
.qn-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.qn-loader.go {
  visibility: visible;
  /* Only a page that is genuinely slow earns the loading screen. A normal
     page is here well inside 0.7s, so it never sees this. */
  animation: qlShow 0.3s ease 0.7s both;
}
@keyframes qlShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ql-logo {
  width: 58px;
  color: var(--text);
}
.ql-word {
  margin-top: 16px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ql-bar {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 3px;
  margin-top: 26px;
  border-radius: 3px;
  background: var(--border);
}
.ql-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50px;
  background: linear-gradient(90deg, transparent, #17c96f, transparent);
  transform: translateX(-50px);
}
.qn-loader.go .ql-bar i {
  animation: qlSweep 1.23s linear 0.7s infinite both;
}
@keyframes qlSweep {
  0% {
    transform: translateX(-50px);
  }
  53%,
  100% {
    transform: translateX(150px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qn-loader.go .ql-bar i {
    animation: none;
    transform: translateX(50px);
  }
}

/* ---- pre-launch landing page ---- */
.pl-body {
  background: var(--bg);
}
.pl-wrap {
  padding: 26px var(--gutter) 0;
}
/* A band runs from one edge of the window to the other: each section
   heading opens one with a rule across the page, and the contact form and
   the foot are one each. What is inside a band keeps to the page's column. */
.pl-wrap > .pl-h2,
.pl-films > .pl-h2,
.pl-contact,
.pl-foot {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  border-top: 1px solid var(--border);
}
/* The films section on the live home page, whose column has the .mk-wrap
   gutter rather than the landing page's. */
.mk-wrap .pl-films > .pl-h2 {
  margin-inline: calc(-1 * max(20px, var(--gutter-fluid)));
  padding-inline: max(20px, var(--gutter-fluid));
}
/* Running text keeps a readable measure however wide its column is. */
.pl-sub,
.pl-hero-note,
.pl-count-line,
.pl-more-card p,
.pl-goal-nums,
.pl-goal-why,
.pl-privacy,
.pl-goal-detail,
.pl-done p,
.pl-faq p,
.pl-contact-lead,
.pl-contact-wait,
.pl-contact-busy,
.pl-contact-done p,
.pl-foot p:not(.pl-foot-links),
.pl-wrap .mk-rows li span {
  max-width: var(--measure);
}
/* From a tablet on its side up the page is two halves, split on the same
   line all the way down: the pitch and the claim box beside the trailer,
   the offer beside its form, the contact words beside theirs, the company
   beside the links. A phone and an upright tablet keep the one column. */
@media (min-width: 900px) {
  .pl-open,
  .pl-contact,
  .pl-foot {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 48px;
  }
  .pl-open {
    align-items: center;
    margin-top: 24px;
  }
  .pl-open .pl-trailer {
    margin-top: 0;
  }
  /* beside the pitch the trailer is narrower than it was alone, and a mouse
     does not need 44px dots */
  .pl-open .pl-controls {
    gap: 10px;
  }
  .pl-open .pl-dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    padding: 0;
  }
  /* The box has a border and padding of its own, 24px a side, so its first
     column gives that up to keep the form on the page's line. */
  .pl-goal {
    display: grid;
    grid-template-columns: calc(45% - 24px) minmax(0, 1fr);
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: 48px;
  }
  .pl-contact {
    grid-template-rows: repeat(4, auto) 1fr;
  }
  .pl-goal > *,
  .pl-contact > *,
  .pl-foot > * {
    grid-column: 1;
  }
  .pl-goal > .pl-form,
  .pl-goal > .pl-done,
  .pl-contact > .pl-form {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
  }
  .pl-goal > .pl-error {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 12px;
  }
  .pl-goal > .pl-error + .pl-form {
    grid-row: 2 / -1;
  }
  .pl-foot > .pl-foot-links {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .pl-foot > .qn-textsize {
    grid-column: 1 / -1;
  }
  .pl-faqs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    align-items: start;
  }
}
/* on a tablet the trailer beside the pitch is too narrow for ten dots as
   well as the buttons, and a finger needs them 44px each wherever they are;
   prev, next and the bar still get you round */
@media (min-width: 900px) and (max-width: 1199px), (min-width: 900px) and (pointer: coarse) {
  .pl-open .pl-dots {
    display: none;
  }
}
/* The landing page's endless strips, "What it does" and "Everything it
   does": one row of cards that runs on for ever. The cards are there twice,
   end to end, and the row slides left by exactly one set of them, so the
   moment it starts again looks the same as the moment before. It keeps to
   the page's column and fades out at both ends; a pointer over it, the
   keyboard inside it, a drag or an open card holds it still. It can be
   dragged and flicked either way, and on "What it does" a card clicked to
   open its longer words in the panel under it. Each card takes --strip-each
   to pass, so a row of wider cards moves at the same slow pace. */
.pl-strip {
  --strip-count: 20;
  --strip-each: 7s;
  --strip-gap: 28px;
  --strip-fade: clamp(20px, 6vw, 96px);
  margin-top: 20px;
  border-radius: 16px;
}
.pl-strip:has(.pl-strip-window:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.pl-strip-window {
  overflow-x: clip;
  padding: 6px 0 40px;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--strip-fade),
    #000 calc(100% - var(--strip-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--strip-fade),
    #000 calc(100% - var(--strip-fade)),
    transparent
  );
}
.pl-strip-track {
  display: flex;
  width: max-content;
  animation: plStrip calc(var(--strip-count) * var(--strip-each)) linear infinite;
}
.pl-strip.is-dragging .pl-strip-window {
  cursor: grabbing;
}
.pl-strip.is-held .pl-strip-track,
.pl-strip.is-open .pl-strip-track,
.pl-strip:has(:focus-visible) .pl-strip-track {
  animation-play-state: paused;
}
@media (hover: hover) {
  .pl-strip:has(.pl-strip-window:hover) .pl-strip-track {
    animation-play-state: paused;
  }
}
@keyframes plStrip {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.pl-strip-set {
  display: flex;
  gap: var(--strip-gap);
  margin: 0;
  padding: 0 var(--strip-gap) 0 0;
  list-style: none;
}
.pl-card {
  flex: none;
  width: 264px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 24px;
}
.pl-card .snip {
  justify-content: flex-start;
}
.pl-card .phone {
  height: 324px;
}
.pl-card h3 {
  margin: 6px 0 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pl-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.pl-card-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: inherit;
}
.pl-card-btn:focus-visible {
  outline: none;
}
.pl-card:has(.pl-card-btn:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.pl-card:has(.pl-card-btn[aria-expanded='true']) .phone {
  border-color: var(--accent);
}
.pl-strip-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 4px;
  padding: 22px;
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  background: var(--bg-raised);
  outline: none;
}
.pl-strip-panel[hidden] {
  display: none;
}
.pl-strip-panel-words {
  padding-right: 44px;
}
.pl-strip-panel-words h3 {
  margin: 10px 0 8px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pl-strip-panel-words p {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.pl-strip-panel .snip {
  justify-content: flex-start;
}
.pl-strip-panel-extra[hidden] {
  display: none;
}
.pl-strip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 6px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.pl-strip-list li {
  position: relative;
  padding-left: 1.1em;
  font-size: 0.9375rem;
  font-weight: 700;
}
.pl-strip-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-text);
}
.pl-strip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--accent-text);
  font-weight: 800;
}
/* Everything it does: the six group cards of the whole list, wider than a
   feature card and each a little slower to pass, so the row keeps the same
   pace; nothing on them opens. */
.pl-strip-groups {
  --strip-each: 9s;
  margin-top: 14px;
}
.pl-strip-groups .pl-strip-window {
  padding-bottom: 12px;
}
.pl-strip-groups .mk-group {
  flex: none;
  width: min(360px, 80vw);
}
.pl-strip-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.pl-strip-close:hover,
.pl-strip-close:focus-visible {
  border-color: var(--accent);
  outline: none;
}
@media (min-width: 760px) {
  .pl-strip-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 36px;
    padding: 28px 32px;
  }
  .pl-strip-panel-pic {
    margin-right: 44px;
  }
}
.pl-h2-sep {
  color: var(--muted);
  font-size: 0.6em;
  font-weight: 700;
  white-space: pre;
}
.pl-h2-hint {
  color: #17c96f;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .pl-strip-track {
    animation: none;
    transform: none;
  }
  .pl-strip-set[aria-hidden='true'] {
    display: none;
  }
  .pl-strip-window {
    overflow-x: auto;
    touch-action: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--strip-fade);
    padding-inline: var(--strip-fade);
  }
  .pl-strip-set > li {
    scroll-snap-align: start;
  }
  .pl-strip.is-dragging .pl-strip-window {
    scroll-snap-type: none;
  }
}
@media (min-width: 1440px) {
  .pl-faqs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pl-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pl-logo {
  width: 54px;
  color: var(--text);
}
.pl-word {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.pl-word b {
  color: var(--accent-text);
}
.pl-word sup {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
}
.pl-badge {
  margin-left: auto;
  background: var(--accent);
  color: #06231a;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 14px;
}
@media (max-width: 599px) {
  .pl-top {
    column-gap: 8px;
  }
  .pl-badge {
    padding-inline: 10px;
  }
}
.pl-kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 26px;
}
.pl-kicker + .pl-h1 {
  margin-top: 8px;
}
.pl-h1 {
  font-size: clamp(1.875rem, 6vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 26px 0 10px;
}
.pl-sub {
  font-size: clamp(1rem, 2.6vw, 1.1875rem);
  color: var(--muted);
  margin: 0 0 18px;
}
.pl-cta-row {
  margin: 0 0 8px;
}

/* hero capture: the box itself, above the fold */
.pl-hero-form {
  margin: 0 0 8px;
  max-width: 520px;
}
.pl-hero-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.pl-hero-row {
  display: flex;
  gap: 10px;
}
.pl-hero-row input {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 1rem var(--font); /* 16px or iOS zooms the page on focus */
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 52px;
}
.pl-hero-row .btn-big {
  flex: 0 0 auto;
  min-height: 52px;
  padding-inline: 20px;
  white-space: nowrap;
}
.pl-hero-note {
  font-size: 0.8125rem;
  color: var(--faint, var(--muted));
  margin: 8px 0 0;
}
@media (max-width: 430px) {
  .pl-hero-row {
    flex-direction: column;
  }
  .pl-hero-row .btn-big {
    width: 100%;
  }
}

/* the offer, kept one tap away down a very long page */
.pl-sticky {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 680px;
  margin: 0 auto;
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: var(--navy-800);
  color: #edf2f7;
  box-shadow: 0 10px 34px rgb(11 22 38 / 0.35);
}
.pl-sticky span {
  font-size: 0.90625rem;
  line-height: 1.3;
}
.pl-sticky b {
  color: var(--accent-text);
  font-size: 1.0625rem;
}
.pl-sticky .btn-big {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.9375rem;
}
/* the cookie bar owns the bottom of the screen until it is dismissed, and
   the page's script hides the bar while a form is on the screen */
body:has(#cookie-bar) .pl-sticky,
.pl-sticky[hidden] {
  display: none;
}
@media print {
  .pl-sticky {
    display: none;
  }
}
.pl-count-line {
  color: var(--muted);
  font-size: 0.90625rem;
  margin: 10px 0 26px;
  text-wrap: balance;
}
.pl-count-line b {
  color: var(--accent-text);
  font-size: 1.0625rem;
}
/* Words that stay on one row: the count line breaks at its dot or not at all. */
.pl-nb {
  white-space: nowrap;
}
/* The places running down. Under the box in the hero and under the bar in
   the register box, one line that grows, gets bolder and makes more of its
   number at each step: .pl-urge-1 with under two fifths of the places left,
   -2 with under a fifth, -3 for the last tenth. The number is plain text in
   the brand's green: nothing here moves it, so it stays sharp. */
.pl-urge {
  margin: 12px 0 26px;
  color: var(--text);
}
.pl-urge-line {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.pl-urge .pl-left {
  color: var(--accent);
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1;
}
.pl-urge-2 .pl-urge-line {
  font-size: 1.1875rem;
  font-weight: 700;
}
.pl-urge-2 .pl-left {
  font-size: 1.4em;
}
.pl-urge-3 .pl-urge-line {
  font-size: clamp(1.25rem, 5.4vw, 1.4375rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pl-urge-3 .pl-left {
  font-size: 1.5em;
  padding: 0 0.2em;
  border-radius: 8px;
  background: rgb(23 201 111 / 0.16);
}
.pl-urge-3 .pl-urge-call {
  margin-top: 4px;
}
.pl-count-also {
  display: block;
  margin-top: 6px;
  font-size: 0.90625rem;
  font-weight: 400;
  color: var(--muted);
}
.pl-goal .pl-urge {
  margin: 0 0 14px;
}

/* trailer */
.pl-trailer {
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1.5px var(--border),
    0 18px 50px rgb(0 0 0 / 0.35);
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #14304f 0%, #0b1626 55%, #081020 100%);
}
.pl-stage {
  position: relative;
  min-height: 420px;
}
.pl-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  pointer-events: none;
  text-align: center;
}
.pl-scene.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pl-flash p {
  font-size: clamp(26px, 5.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #edf2f7;
  margin: 0;
}
.pl-flash b {
  color: var(--accent-text);
}
.pl-scene .snip {
  margin: 0;
  transform: scale(0.92);
}
.pl-cap {
  color: #9fb0c3;
  font-size: 15px;
  font-weight: 600;
  margin: 4px 0 0;
}
.pl-money-label {
  color: #9fb0c3;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.pl-money-count {
  font-size: clamp(40px, 9vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-text);
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.pl-notif {
  background: #10203a;
  border: 1.5px solid #1d3049;
  border-left: 4px solid var(--accent);
  color: #edf2f7;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(14px);
  min-width: min(320px, 80%);
}
.pl-scene.on .pl-notif.n1 {
  animation: plNotif 0.5s ease 0.5s forwards;
}
.pl-scene.on .pl-notif.n2 {
  animation: plNotif 0.5s ease 1.3s forwards;
}
.pl-scene.on .pl-notif.n3 {
  animation: plNotif 0.5s ease 2.1s forwards;
}
@keyframes plNotif {
  to {
    opacity: 1;
    transform: none;
  }
}
.pl-review {
  background: #10203a;
  border: 1.5px solid #1d3049;
  border-radius: 14px;
  color: #edf2f7;
  padding: 14px 20px;
  font-size: 16.5px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.8);
  margin: 5px 0;
}
.pl-review span {
  color: #ffc963;
  letter-spacing: 2px;
  margin-right: 8px;
}
.pl-scene.on .pl-review.r1 {
  animation: plPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s forwards;
}
.pl-scene.on .pl-review.r2 {
  animation: plPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.9s forwards;
}
.pl-scene.on .pl-review.r3 {
  animation: plPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 1.6s forwards;
}
@keyframes plPop {
  to {
    opacity: 1;
    transform: none;
  }
}
.pl-bars {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  height: 200px;
}
.pl-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}
.pl-bar i {
  display: block;
  width: 62px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--accent), #0fb35f);
  height: 0;
}
.pl-bar span {
  color: #9fb0c3;
  font-size: 13px;
  font-weight: 700;
}
.pl-scene.on .pl-bar.b1 i {
  animation: plGrow1 1s cubic-bezier(0.2, 0.8, 0.3, 1) 0.2s forwards;
}
.pl-scene.on .pl-bar.b2 i {
  animation: plGrow2 1s cubic-bezier(0.2, 0.8, 0.3, 1) 0.55s forwards;
}
.pl-scene.on .pl-bar.b3 i {
  animation: plGrow3 1s cubic-bezier(0.2, 0.8, 0.3, 1) 0.9s forwards;
}
@keyframes plGrow1 {
  to {
    height: 58%;
  }
}
@keyframes plGrow2 {
  to {
    height: 78%;
  }
}
@keyframes plGrow3 {
  to {
    height: 96%;
  }
}
.pl-final-logo {
  width: 84px;
  color: #edf2f7;
}
.pl-final-word {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #edf2f7;
  margin: 4px 0 0;
}
.pl-final-word b {
  color: var(--accent-text);
}
.pl-final-word sup {
  font-size: 12px;
  color: #9fb0c3;
}
.pl-final-line {
  color: #9fb0c3;
  font-weight: 600;
  margin: 2px 0 12px;
}
.pl-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #081020;
  border-top: 1px solid #1d3049;
}
.pl-controls button {
  background: none;
  border: 1.5px solid #2c405c;
  color: #edf2f7;
  border-radius: 999px;
  font: 600 0.8125rem var(--font);
  padding: 7px 14px;
  cursor: pointer;
  /* 44px is the smallest thing a thumb hits reliably */
  min-height: 44px;
  min-width: 44px;
}
.pl-progress {
  flex: 1;
  height: 5px;
  background: #1d3049;
  border-radius: 999px;
  overflow: hidden;
}
.pl-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* features + extras */
.pl-h2 {
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  letter-spacing: -0.02em;
  margin: 54px 0 8px;
}
.pl-wrap > .pl-h2,
.pl-films > .pl-h2 {
  margin-top: 44px;
  padding-top: 36px;
}
.pl-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 760px) {
  .pl-more {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pl-more-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  background: var(--card, transparent);
}
.pl-more-card h3 {
  margin: 0 0 6px;
  font-size: 1.125rem;
}
.pl-more-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* goal + form */
.pl-goal {
  margin-top: 60px;
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 26px 22px;
  scroll-margin-top: 20px;
}
.pl-goalbar {
  height: 16px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 8px;
}
.pl-goalbar i {
  display: block;
  height: 100%;
  min-width: 8px;
  background: linear-gradient(90deg, #0fb35f, var(--accent));
  border-radius: 999px;
  animation: plFill 1.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes plFill {
  from {
    width: 0;
  }
}
.pl-goal-nums {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0 0 10px;
  text-wrap: balance;
}
.pl-goal-nums b {
  color: var(--text);
  font-size: 1.125rem;
}
.pl-goal-why {
  color: var(--muted);
  font-size: 0.96875rem;
}
.pl-form {
  margin-top: 18px;
}
.pl-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .pl-form-grid {
    grid-template-columns: 1fr;
  }
}
.pl-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 12px 0 6px;
}
.pl-form input,
.pl-form select,
.pl-form textarea {
  width: 100%;
  font: 400 1rem var(--font);
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
}
.pl-submit {
  width: 100%;
  margin-top: 16px;
}
.pl-privacy {
  font-size: 0.8125rem;
  color: var(--faint, var(--muted));
  margin: 10px 0 0;
}
.pl-form label i {
  font-style: normal;
  font-weight: 400;
  font-size: 0.78125rem;
  color: var(--faint, var(--muted));
  margin-left: 4px;
}
/* the full offer, moved below the button — read it if you want it */
.pl-goal-detail {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--faint, var(--muted));
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pl-goal-detail b {
  color: var(--muted);
}
.pl-error {
  background: #fbe9e9;
  color: #c92a2a;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
}
.pl-done {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  padding: 16px 18px;
}
.pl-done b {
  font-size: 1.125rem;
}
.pl-share {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.pl-share-btn {
  font-size: 0.9375rem;
  padding: 12px 18px;
}
/* ---------- QuoteNod's own social pages: the "Follow QuoteNod" row ----------
   Drawn in both public footers (and in the films section on the landing
   page) only when the owner has set at least one. Sizes follow the footer
   it sits in: everything here is in em, but for a platform's picture,
   which is a square a thumb can press and grows with the reader's text.
   Each platform has two pictures; --follow-on-navy and --follow-on-light,
   set beside the page's colours, say which of them is drawn. */
.qn-follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.3em;
  row-gap: 0;
  margin: 0 0 1em;
  font-size: inherit;
}
.qn-follow .qn-follow-lead {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--text);
}
.qn-follow .qn-follow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: max(44px, 2.75rem);
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.qn-follow .qn-follow-link:hover,
.qn-follow .qn-follow-link:focus-visible {
  color: var(--accent-text);
  text-decoration: underline;
}
.qn-follow .qn-follow-link svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}
.qn-follow:has(.qn-follow-tile) {
  column-gap: 0.75rem;
  row-gap: 0.5rem;
}
.qn-follow .qn-follow-tile {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  border-radius: 24%;
}
.qn-follow .qn-follow-tile img {
  width: 100%;
  height: 100%;
  clip-path: inset(2.734% round 22.266%);
}
.qn-follow .qn-follow-on-navy {
  display: var(--follow-on-navy, block);
}
.qn-follow .qn-follow-on-light {
  display: var(--follow-on-light, none);
}
.qn-follow .qn-follow-tile:hover,
.qn-follow .qn-follow-tile:focus-visible {
  transform: translateY(-2px);
}
/* The highlight: a layer the shape of the tile, over the picture, holding a
   light three times the tile's size: a green tint at the bottom left, a
   bright edge, then clear. At rest the clear part is over the picture.
   Under the pointer (or the keyboard) the light slides until the tint is,
   so the edge crosses from bottom left to top right, and a ring comes on;
   when the pointer leaves it slides back. */
.qn-follow .qn-follow-tile::after {
  content: '';
  position: absolute;
  inset: 2.734%;
  border-radius: 23.55%;
  pointer-events: none;
  background-image: linear-gradient(
    45deg,
    rgb(23 201 111 / 0.18) 0%,
    rgb(23 201 111 / 0.18) 38%,
    rgb(23 201 111 / 0.6) 46%,
    rgb(255 255 255 / 0.8) 50%,
    rgb(23 201 111 / 0.35) 54%,
    rgb(23 201 111 / 0) 62%,
    rgb(23 201 111 / 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 100% 0%;
}
.qn-follow .qn-follow-tile:hover::after,
.qn-follow .qn-follow-tile:focus-visible::after {
  background-position: 0% 100%;
  box-shadow:
    inset 0 0 0 1.5px rgb(23 201 111 / 0.95),
    0 8px 18px -8px rgb(23 201 111 / 0.65);
}
@media (prefers-reduced-motion: no-preference) {
  .qn-follow .qn-follow-tile {
    transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .qn-follow .qn-follow-tile::after {
    transition:
      background-position 600ms cubic-bezier(0.45, 0, 0.25, 1),
      box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}
@media (max-width: 599px) {
  .qn-follow:has(.qn-follow-tile) .qn-follow-lead {
    flex-basis: 100%;
    min-height: 0;
  }
}
/* ---------- the films section on the landing page -------------------------
   QuoteNod's own films that have gone out: covers with a play button, then
   the register button and the Follow row. The section takes the width the
   page gives it; its heading is the page's own .pl-h2; everything else is
   sized in rem and em so it follows the reader's text size. A tile keeps
   the shape of a phone film whether or not its cover has loaded. */
.pl-films-sub {
  margin: 0 0 1.1em;
  color: var(--muted);
  font-size: 1.0625em;
  line-height: 1.5;
}
.pl-films-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-film {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.pl-film-play {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
}
.pl-film-play:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.pl-film-cover,
.pl-film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl-film-video {
  object-fit: contain;
  background: #000;
}
.pl-film-still {
  pointer-events: none;
}
.pl-film-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(11, 22, 38, 0.72);
  transition: background 0.15s ease;
}
.pl-film-btn svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
}
.pl-film-play:hover .pl-film-btn,
.pl-film-play:focus-visible .pl-film-btn {
  background: var(--accent-strong);
}
.pl-films-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin: 1.4rem 0 0;
}
.pl-films-cta .qn-follow {
  margin: 0;
}
@media (min-width: 900px) {
  .pl-foot > .qn-follow {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .pl-foot > .qn-follow ~ .pl-foot-links {
    grid-row: 2 / span 2;
  }
}
@media (max-width: 599px) {
  .pl-film.is-playing {
    grid-column: 1 / -1;
  }
}
@media (min-width: 600px) {
  .pl-films-grid {
    grid-template-columns: repeat(4, minmax(0, 16rem));
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pl-film-btn {
    transition: none;
  }
}
.pl-foot {
  margin-top: 50px;
  color: var(--faint, var(--muted));
  font-size: 0.875rem;
  padding-top: 18px;
  padding-bottom: 60px;
  background: #081020;
}
/* The offer bar floats over the foot of the page wherever it is as wide as
   the footer's right-hand end: the foot ends far enough above the bottom for
   the text-size buttons to stand clear of it, at any text size. */
@media (max-width: 1199px) {
  .pl-foot {
    padding-bottom: calc(24px + 5rem);
  }
}
.pl-foot a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 8px;
}
/* A link in the foot is a thumb's height and has room either side, so the
   row of them is taller and wider than its words: the row is lifted and
   pulled left by the difference, and its first word sits level with the
   paragraph beside it and on the page's line. */
.pl-foot-links {
  margin-top: calc(1em - max(0px, (44px - 1.55em) / 2));
  margin-left: -8px;
}
.pl-login {
  opacity: 0.75;
}
/* The statutory company disclosure. Required on the site, in the same 14px
   as the rest of the foot and the app's own footer — at full opacity the
   muted grey reads at 4.5:1 on the navy. */
.pl-foot-legal {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .pl-scene {
    transition: none;
  }
  .pl-goalbar i {
    animation: none;
  }
}

/* pre-launch FAQs */
.pl-faqs {
  margin-top: 14px;
}
.pl-faq {
  border: 1.5px solid var(--border);
  background: var(--card, transparent);
  border-radius: 14px;
  margin: 0 0 10px;
  transition:
    border-color 0.16s ease,
    transform 0.16s ease;
}
.pl-faq:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.pl-faq summary {
  font-weight: 700;
  font-size: 1.03125rem;
  cursor: pointer;
  padding: 14px 18px;
}
.pl-faq[open] {
  border-color: var(--accent);
}
.pl-faq p {
  margin: -4px 18px 14px;
  color: var(--muted);
  font-size: 0.9375rem;
}
@media (prefers-reduced-motion: reduce) {
  .pl-faq,
  .pl-faq:hover {
    transition: none;
    transform: none;
  }
}

/* trailer: quote scene with real figures */
.pl-qcard {
  width: min(340px, 86%);
  background: #0e1b2f;
  border: 1.5px solid #1d3049;
  border-radius: 18px;
  padding: 16px 16px 14px;
  text-align: left;
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.4);
}
.pl-qtitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fb0c3;
  text-align: center;
  margin-bottom: 10px;
}
.pl-qrow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: #edf2f7;
  padding: 6px 0;
  border-bottom: 1px solid #16283f;
  opacity: 0;
  transform: translateX(-12px);
}
.pl-qrow b {
  font-variant-numeric: tabular-nums;
}
.pl-qrow.q4 {
  color: #9fb0c3;
}
.pl-qrow.q5 {
  color: #2be080;
  border-bottom: none;
  font-weight: 600;
}
.pl-scene.on .pl-qrow.q1 {
  animation: plRow 0.4s ease 0.15s forwards;
}
.pl-scene.on .pl-qrow.q2 {
  animation: plRow 0.4s ease 0.45s forwards;
}
.pl-scene.on .pl-qrow.q3 {
  animation: plRow 0.4s ease 0.75s forwards;
}
.pl-scene.on .pl-qrow.q4 {
  animation: plRow 0.4s ease 1.05s forwards;
}
.pl-scene.on .pl-qrow.q5 {
  animation: plRow 0.4s ease 1.8s forwards;
}
@keyframes plRow {
  to {
    opacity: 1;
    transform: none;
  }
}
.pl-qtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 4px;
  color: #edf2f7;
  font-weight: 700;
}
.pl-qtotal b {
  font-size: 22px;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.pl-qbtn {
  margin-top: 10px;
  background: var(--accent);
  color: #06231a;
  font-weight: 800;
  text-align: center;
  border-radius: 10px;
  padding: 11px;
  font-size: 15px;
}

/* trailer: scene navigation */
.pl-controls #pl-prev,
.pl-controls #pl-next {
  padding: 7px 12px;
  font-size: 0.9375rem;
  line-height: 1;
}
.pl-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #2c405c;
  padding: 0;
  cursor: pointer;
}
.pl-dot.on {
  background: var(--accent);
  transform: scale(1.25);
}
@media (max-width: 640px) {
  .pl-dots {
    display: none;
  }
}

/* pre-launch scroll reveal: in on the way down, out on the way back up */
.pl-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.pl-reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .pl-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* trailer: reviews scene header */
.pl-rev-head {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #edf2f7;
  margin: 0 0 10px;
}
.pl-rev-head b {
  color: #ffc963;
  letter-spacing: 2px;
}
.pl-review {
  font-style: italic;
  font-weight: 600;
}
.pl-review span {
  font-style: normal;
}

/* trailer: finance stat cards */
.pl-fincards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.pl-fincard {
  background: #10203a;
  border: 1.5px solid #1d3049;
  border-radius: 14px;
  padding: 14px 20px;
  min-width: 160px;
  opacity: 0;
  transform: translateY(14px);
}
.pl-fincard span {
  display: block;
  color: #9fb0c3;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pl-fincard b {
  font-size: 24px;
  color: #edf2f7;
  font-variant-numeric: tabular-nums;
}
.pl-fincard.profit {
  border-color: var(--accent);
}
.pl-fincard.profit b {
  color: var(--accent-text);
}
.pl-scene.on .pl-fincard.f1 {
  animation: plPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s forwards;
}
.pl-scene.on .pl-fincard.f2 {
  animation: plPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.7s forwards;
}
.pl-scene.on .pl-fincard.f3 {
  animation: plPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 1.2s forwards;
}
.pl-fincard b {
  white-space: nowrap;
}

/* trailer final scene: the wink-and-nod branding signature, replayed each loop */
.pf-dot,
.pf-eye,
.pf-brow {
  transform-box: fill-box;
  transform-origin: center;
}
.pf-tick {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
}
.pf-dot {
  transform: scale(0);
}
.pf-eye {
  transform: scale(0);
  opacity: 0.45;
}
.pf-brow {
  opacity: 0;
}
.pl-scene.on .pl-final-logo {
  animation: heroNod 1.9s ease-in-out forwards;
}
.pl-scene.on .pf-tick {
  animation: heroDraw 0.75s ease-out 0.15s forwards;
}
.pl-scene.on .pf-dot {
  animation: heroDot 1.9s ease-in-out forwards;
}
.pl-scene.on .pf-eye {
  animation: heroEye 1.9s ease-in-out forwards;
}
.pl-scene.on .pf-brow {
  animation: heroBrow 1.9s ease-in-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .pf-tick {
    stroke-dashoffset: 0;
  }
  .pf-dot,
  .pf-eye {
    transform: none;
  }
  .pf-eye {
    transform: scale(1, 0.07);
    opacity: 0;
  }
  .pf-brow {
    opacity: 0.45;
  }
  .pl-scene.on .pl-final-logo,
  .pl-scene.on .pf-tick,
  .pl-scene.on .pf-dot,
  .pl-scene.on .pf-eye,
  .pl-scene.on .pf-brow {
    animation: none;
  }
}

/* ---- pre-launch contact form ---- */
.pl-contact {
  margin-top: 46px;
  padding-top: 28px;
  padding-bottom: 6px;
}
.pl-contact .pl-h2 {
  margin-top: 0;
}
.pl-contact-lead {
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.pl-form textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}
.pl-contact-done {
  border: 1.5px solid var(--accent);
  background: var(--accent-tint, rgba(23, 201, 111, 0.08));
  border-radius: 14px;
  padding: 20px 22px;
}
.pl-contact-done p {
  margin: 0 0 8px;
  line-height: 1.55;
}
.pl-contact-done p:last-child {
  margin-bottom: 0;
}

/* ---------- GDPR page ----------
   A right, what delivers it, and — where there is one — the limit, set apart
   rather than run on. A promise with the exception hidden in the same
   paragraph is how people end up surprised. */
.gd-right {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.gd-right h3 {
  font-size: 1.0625rem;
  margin: 0 0 6px;
}
.gd-right p {
  margin: 0 0 8px;
}
.gd-limit {
  border-left: 3px solid var(--border);
  padding-left: 14px;
  color: var(--muted);
}

/* every cost, in one box under the price */
.mk-allcosts {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--accent, #17c96f);
  border-radius: 12px;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.5;
}
.mk-allcosts ul {
  margin: 8px 0 10px;
  padding-left: 18px;
}
.mk-allcosts li {
  margin: 0 0 6px;
}

/* getting paid: the providers, their fees, and a worked example */
.mk-pay {
  padding: 44px 0;
  border-top: 1px solid var(--border);
}
.mk-pay h2 {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px auto 10px;
  max-width: 620px;
  text-wrap: balance;
}
.mk-pay-lead {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 26px;
}
.mk-pay-grid {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .mk-pay-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-pay-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 18px;
}
.mk-pay-card p {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.mk-pay-mark {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 12px;
}
.mk-pay-logo {
  height: 28px;
  width: auto;
}
.mk-pay-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mk-pay-card dl {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.mk-pay-card dt {
  font-weight: 700;
  margin-top: 8px;
}
.mk-pay-card dd {
  margin: 0;
  color: var(--muted);
}
.mk-pay-example {
  max-width: 760px;
  margin: 22px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--accent, #17c96f);
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.mk-pay-example table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 12px;
}
.mk-pay-example th,
.mk-pay-example td {
  text-align: left;
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.mk-pay-example th {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.8125rem;
}
.mk-pay-example td:not(:first-child),
.mk-pay-example th:not(:first-child) {
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
  padding-left: 8px;
}
.mk-pay-example p {
  margin: 0;
}
.mk-pay-marks {
  max-width: 760px;
  margin: 14px auto 0;
  font-size: 0.75rem;
  color: var(--faint);
  line-height: 1.5;
}
@media (max-width: 560px) {
  .mk-pay-example thead {
    display: none;
  }
  .mk-pay-example tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .mk-pay-example td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: none;
    padding: 2px 0;
  }
  .mk-pay-example td:first-child {
    font-weight: 700;
  }
  .mk-pay-example td:not(:first-child) {
    padding-left: 0;
    text-align: right;
  }
  .mk-pay-example td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.8125rem;
    white-space: normal;
    text-align: left;
  }
}
/* the whole list, one feature to a row: the name, then one line on what it does */
.mk-all {
  padding: 36px 0 8px;
}
.mk-all h2,
.mk-why h2 {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 14px;
}
/* The whole list: six cards, each a part of the product with its picture. */
.mk-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .mk-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .mk-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mk-group {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px 6px;
  background: var(--bg-raised);
}
.mk-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mk-group-ico {
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 10px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  flex: none;
}
.mk-group .mk-rows li:last-child {
  border-bottom: none;
}
.mk-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 28px;
}
.mk-rows li {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mk-rows li b {
  font-size: 0.96875rem;
}
.mk-rows li span {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
}
.mk-why {
  padding: 36px 0 12px;
}
.mk-rows-why li b::before {
  content: '✓ ';
  color: var(--accent-text);
}
/* the "why" rows: eight of them, in full rows of one, two or four */
@media (min-width: 640px) {
  .mk-rows-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .mk-rows-why {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* how it compares: six numbered competitors against Crew */
.mk-compare {
  max-width: 820px;
  margin: 28px auto 0;
}
/* the questions, two abreast where there is room, so eleven of them are not
   a column the height of the page */
.mk-faqs {
  max-width: 660px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .mk-compare,
  .mk-price-costs,
  .mk-faqs,
  .mk-pay h2,
  .mk-pay-grid,
  .mk-pay-example,
  .mk-pay-marks {
    max-width: none;
    margin-left: 0;
  }
  .mk-pay-lead {
    max-width: 70ch;
  }
  .mk-price-costs {
    text-align: left;
  }
  .mk-faqs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    align-items: start;
  }
}
.mk-compare h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.mk-cmp {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 8px;
  font-size: 0.9375rem;
}
.mk-cmp th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.mk-cmp td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}
.mk-cmp tr.us td {
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.mk-cmp td:nth-child(2) {
  color: var(--muted);
}
@media (max-width: 640px) {
  .mk-cmp {
    font-size: 0.84375rem;
  }
  .mk-cmp th,
  .mk-cmp td {
    padding: 8px 6px;
  }
}

/* ---- a very wide screen ----
   The page is drawn for windows up to 1920px wide, an ordinary PC screen,
   and is shown at its own size on those. On anything wider (a very large
   monitor, a TV across the room) the same page is scaled up as one piece,
   type and spacing together, a tenth for every 192px, so it fills the
   screen and can be read from further away. The reader's own text size is
   scaled with it, not replaced. */
@media (min-width: 2112px) {
  :root {
    --screen-zoom: 1.1;
  }
}
@media (min-width: 2304px) {
  :root {
    --screen-zoom: 1.2;
  }
}
@media (min-width: 2496px) {
  :root {
    --screen-zoom: 1.3;
  }
}
@media (min-width: 2688px) {
  :root {
    --screen-zoom: 1.4;
  }
}
@media (min-width: 2880px) {
  :root {
    --screen-zoom: 1.5;
  }
}
@media (min-width: 3072px) {
  :root {
    --screen-zoom: 1.6;
  }
}
@media (min-width: 3264px) {
  :root {
    --screen-zoom: 1.7;
  }
}
@media (min-width: 3456px) {
  :root {
    --screen-zoom: 1.8;
  }
}
@media (min-width: 3648px) {
  :root {
    --screen-zoom: 1.9;
  }
}
@media (min-width: 3840px) {
  :root {
    --screen-zoom: 2;
  }
}
@media (min-width: 4608px) {
  :root {
    --screen-zoom: 2.4;
  }
}
@media (min-width: 5376px) {
  :root {
    --screen-zoom: 2.8;
  }
}
/* An iPhone zooms the whole page when a box with text under 16px is tapped,
   so at a step below the usual size the boxes keep the usual size: the
   step, which the script leaves in --text-step, is divided back out. */
html[data-textsmall] :is(input, select, textarea) {
  font-size: calc(1rem / var(--text-step, 1));
}

/* Report a trader: one section. Where there is room the title and what
   happens beside the form; where there is not, the form centred under them.
   The whole page sits in the middle of the window. */
.rt-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  padding-inline: clamp(20px, 3vw, 40px);
}
.rt-page .rt-split {
  margin-inline: 0;
  padding: 48px 0 56px;
  border-top: 0;
}
.rt-intro h1 {
  font-size: clamp(1.875rem, 6vw, 2.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 14px;
}
.rt-intro p {
  color: var(--muted);
  max-width: var(--measure);
}
@media (max-width: 899px) {
  .rt-page .rt-split {
    text-align: center;
  }
  .rt-intro p {
    margin-inline: auto;
  }
  .rt-page .rt-split > .pl-form,
  .rt-page .rt-split > .pl-error,
  .rt-page .rt-split > .pl-contact-done {
    max-width: 640px;
    margin-inline: auto;
    text-align: left;
  }
}
@media (min-width: 900px) {
  .rt-page .rt-split {
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .rt-page .rt-split > .rt-intro {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .rt-page .rt-split > :not(.rt-intro) {
    grid-column: 2;
  }
  .rt-page .rt-split > .pl-error {
    grid-row: 1;
    margin: 0 0 12px;
  }
  .rt-page .rt-split > .pl-error + .pl-form {
    grid-row: 2;
  }
  .rt-page .rt-split > .pl-form,
  .rt-page .rt-split > .pl-contact-done {
    grid-row: 1 / -1;
  }
}