/* Sumaiya Fatima: the public site's one stylesheet. Written from the built pages; brand/DESIGN.md describes the system. */

  @font-face { font-family: "Sofia Sans"; src: url(/fonts/sofia-sans.woff2) format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
  @font-face { font-family: "Sofia Sans"; src: url(/fonts/sofia-sans-italic.woff2) format("woff2"); font-weight: 1 1000; font-style: italic; font-display: swap; }
  @font-face { font-family: "Sofia Sans Extra Condensed"; src: url(/fonts/sofia-sans-extra-condensed.woff2) format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
  @font-face { font-family: "Kaushan Script"; src: url(/fonts/kaushan-script.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

  :root {
    --paper: #F8F8F8;
    --ink: #141210;
    --blue: #1B6FD8;
    --blue-ink: #1558AD;
    --tile: #E6EEF9;
    --grey: #5A5F66;
    --red: #BA2727;
    --line: #DDE1E6;
    --track: #E1E5EA;
    --text: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
    --cond: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
    --marker: "Kaushan Script", "Brush Script MT", cursive;
    --gutter: 1.25rem;
    --width: 72rem;
    --radius: 1.25rem;
    --shadow: 0 1.25rem 2.5rem -1.25rem rgb(20 18 16 / .28), 0 .125rem .375rem rgb(20 18 16 / .06);
    --ease: cubic-bezier(.16, 1, .3, 1);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; scrollbar-color: var(--blue) var(--paper); caret-color: var(--blue); }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--text); font-optical-sizing: auto; text-rendering: optimizeLegibility; }
  ::selection { background: var(--blue); color: #fff; }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
  img { display: block; max-width: 100%; }
  svg { display: block; }
  .wrap { width: min(var(--width), 100% - var(--gutter) * 2); margin-inline: auto; }
  .display { font: 900 clamp(2.5rem, 12vw, 4.5rem)/.92 var(--cond); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
  .lead { font-size: 1.125rem; line-height: 1.5; color: var(--grey); text-wrap: pretty; max-width: 34rem; }
  .caps { font: 600 .8125rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; }
  .skip { position: fixed; z-index: 10; left: 1rem; top: 1rem; padding: .75rem 1rem; background: #fff; color: var(--ink); border-radius: .5rem; transform: translateY(-200%); }
  .skip:focus { transform: none; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Buttons: blue block with tracked white caps; the light one lives on blue ground. */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: .875rem 1.5rem; border-radius: .625rem; background: var(--blue); color: #fff; font: 700 .8125rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .2s, transform .35s var(--ease); }
  .btn:hover { background: var(--blue-ink); }
  .btn:active { transform: translateY(1px); }
  .btn-light { background: #fff; color: var(--ink); }
  .btn-light:hover { background: var(--ink); color: #fff; }
  .btn-light:focus-visible { outline-color: #fff; }
  .link { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; }
  .link:hover { color: var(--blue-ink); }

  /* Nav: wordmark, links, pill. Two rows on a phone, one from 600px. */
  .nav { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "mark pill" "links links"; align-items: center; row-gap: .75rem; padding: 1rem 0 .25rem; }
  .mark { grid-area: mark; font: 800 1.375rem/1 var(--text); letter-spacing: -.03em; text-decoration: none; }
  .mark b { font-weight: 900; }
  .nav .pill { grid-area: pill; min-height: 2.5rem; padding: .5rem 1rem; }
  .links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: 0; margin: 0; list-style: none; }
  .links li { display: flex; align-items: center; gap: .75rem; }
  .links li + li::before { content: "·"; color: var(--blue); font-weight: 900; }
  .links a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: none; color: var(--ink); }
  .links a:hover { color: var(--blue-ink); text-decoration: underline; }
  .links a[aria-current="page"] { color: var(--blue-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

  /* Hero: headline left, the phone on the blob right, cut by the edge. The x-clip is what cuts it; y stays open so the phone can run down into the cards. */
  .hero { position: relative; isolation: isolate; padding: 1.5rem 0 2rem; overflow-x: clip; overflow-y: visible; }
  .hero .wrap { position: relative; }
  /* Phones: the grid is at least as tall as the device and its tag, so the cards never ride up over them. */
  .hero-grid { min-height: calc(8.5rem + 80.9vw); }
  .hero-copy { position: relative; z-index: 2; }
  .headline { max-width: 58%; font: 900 clamp(2.5rem, 12.6vw, 5.75rem)/.92 var(--cond); text-transform: uppercase; letter-spacing: -.015em; }
  .headline > span { display: block; }
  .headline .last { white-space: nowrap; }
  /* Four lines beside the phone, three from 1000px: the breaks are <br> elements shown per breakpoint, so "Stranger." never runs under the device. */
  .headline br.dt { display: none; }
  /* The marker word: the one slanted brush face on the page, mixed case so the brush stays fluid, no extra tilt (the face carries its own). */
  .mark-word { position: relative; display: inline-block; color: var(--blue); font: 400 .92em/1 var(--marker); text-transform: none; letter-spacing: 0; padding-right: .06em; }
  /* The underline is a filled brush shape, tapered at both ends, drawn once and scaled with the word. */
  .swash { position: absolute; left: -3%; width: 106%; bottom: -.3em; height: .28em; color: var(--blue); pointer-events: none; }
  .swash path { fill: currentColor; }
  .hero .lead { max-width: 50%; margin-top: 1.25rem; font-size: .9375rem; line-height: 1.5; }
  /* Below 600px the CTA takes the comp's smaller scale so the full label holds one line beside the phone. */
  .hero-actions { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
  .hero-actions .btn { padding-inline: .85rem; min-height: 2.875rem; font-size: .75rem; letter-spacing: .04em; text-align: center; white-space: nowrap; }
  .hero-actions .link { font-size: .9375rem; }
  .hero-actions .long { display: none; }
  .hero-actions .short { display: inline; }

  /* The figure is the phone's own box: the whole device stands inside the wrap beside the copy, and the blob, drawn at its own aspect, wraps it and runs past the viewport edge.
     36% of the wrap; under 360px it narrows so a 12px one-line CTA still clears it (the smallest legible label is the constraint, not the comp). */
  .figure { position: absolute; z-index: 1; top: 4.5rem; right: 0; width: min(36%, 100% - 13.25rem); aspect-ratio: 623 / 1400; pointer-events: none; }
  .blob { position: absolute; left: 64%; top: 50%; width: 210%; aspect-ratio: 400 / 520; transform: translate(-50%, -50%); color: var(--blue); }
  .blob svg { width: 100%; height: 100%; }
  .phone { position: absolute; inset: 0; transform: rotate(6deg); transform-origin: 50% 50%; container-type: inline-size; filter: drop-shadow(0 1.5rem 1.75rem rgb(20 18 16 / .28)); }
  .phone > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* The truth label hangs under the phone's foot like a paper tag, so it travels with the device at every width. */
  .fig-label { position: absolute; z-index: 2; left: 50%; top: calc(100% + .5rem); transform: translateX(-50%) rotate(-3deg); width: max-content; max-width: 100%; margin: 0; padding: .3rem .55rem; border-radius: .35rem; background: var(--paper); color: var(--red); font: 700 .75rem/1.25 var(--text); letter-spacing: .1em; text-transform: uppercase; text-align: center; box-shadow: 0 .25rem .75rem rgb(20 18 16 / .18); }
  /* The screen box is the measured white area of the photographed phone; the listing is HTML laid over it. */
  .screen { position: absolute; left: 4.33%; top: 2.29%; right: 4.98%; bottom: 2.43%; overflow: hidden; border-radius: 7cqw; background: #fff; box-shadow: inset 0 0 0 .3cqw #DFE2E6; color: var(--ink); font: 400 5.4cqw/1.35 var(--text); padding: 6.5cqw 6cqw 0; }
  .s-row { display: flex; align-items: center; justify-content: space-between; }
  .s-ico { display: flex; gap: 4cqw; }
  .s-ico svg, .s-back { width: 6cqw; height: 6cqw; stroke: var(--ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .s-name { margin-top: 5cqw; font-size: 8.2cqw; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
  .s-rating { display: flex; align-items: center; gap: 2cqw; margin-top: 3cqw; font-size: 5cqw; }
  .stars { display: flex; gap: .5cqw; }
  .stars svg { width: 4.6cqw; height: 4.6cqw; fill: #F4B400; }
  .stars svg.half { opacity: .4; }
  .s-meta { margin-top: 1.5cqw; font-size: 4.8cqw; color: var(--grey); }
  .s-meta .open { color: #1E8E3E; font-weight: 600; }
  .chips { display: flex; gap: 2.5cqw; margin-top: 4cqw; }
  .chip { display: inline-flex; align-items: center; gap: 1.5cqw; padding: 2.2cqw 3.6cqw; border-radius: 999px; border: .4cqw solid #C9D3E3; font-size: 4.6cqw; font-weight: 600; color: var(--blue-ink); white-space: nowrap; }
  .chip.solid { background: var(--blue); border-color: var(--blue); color: #fff; }
  .chip svg { width: 4.4cqw; height: 4.4cqw; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .s-photo { margin: 5cqw -6cqw 0; aspect-ratio: 4 / 3; overflow: hidden; }
  .s-photo img { width: 100%; height: 100%; object-fit: cover; }
  .review { display: grid; grid-template-columns: 9cqw 1fr; column-gap: 3cqw; margin-top: 5cqw; }
  .avatar { width: 9cqw; height: 9cqw; border-radius: 50%; background: #6247DB; color: #fff; display: grid; place-items: center; font-size: 4.6cqw; font-weight: 700; }
  .avatar.r { background: #0B8043; }
  .review .who { font-size: 4.8cqw; font-weight: 600; line-height: 1.2; }
  .review .when { display: flex; align-items: center; gap: 2cqw; margin-top: 1cqw; font-size: 4cqw; color: var(--grey); }
  .review .when .stars svg { width: 3.8cqw; height: 3.8cqw; }
  .review p { grid-column: 2; margin-top: 1.5cqw; font-size: 4.8cqw; line-height: 1.35; }

  /* Doodles: filled brush shapes in blue, tapered like a marker, three in the hero and the proof. */
  .doodle { position: absolute; color: var(--blue); pointer-events: none; }
  .doodle svg { width: 100%; height: 100%; fill: currentColor; }
  .d-sparkle { top: -12%; left: 12%; width: 22%; aspect-ratio: 1; }

  /* The two example cards under the hero: a score and a reply, both tilted, both labeled. */
  .proof { position: relative; z-index: 2; padding: 1.5rem 0 2.5rem; }
  .cards { position: relative; display: grid; grid-template-columns: 52fr 44fr; gap: 4%; align-items: start; padding: 0 2%; }
  .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem .9rem 1rem; }
  .card-score { transform: rotate(-4deg); margin-top: 1.5rem; }
  .card-reply { transform: rotate(3deg); margin-top: -.5rem; }
  .score { display: flex; align-items: baseline; gap: .3rem; color: var(--blue); font-variant-numeric: tabular-nums; }
  .score strong { font: 900 clamp(2.75rem, 12vw, 5.5rem)/.9 var(--cond); letter-spacing: -.02em; }
  .score span { font: 700 clamp(.9375rem, 3.6vw, 1.375rem)/1 var(--cond); color: var(--ink); }
  .parts { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .75rem; }
  .parts li { display: grid; gap: .3rem; font-size: .75rem; line-height: 1.2; }
  .parts li span { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; }
  .parts li span b { font-weight: 600; color: var(--grey); white-space: nowrap; font-size: .75rem; }
  .bar { height: .3rem; border-radius: 999px; background: var(--track); overflow: hidden; }
  .bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
  .example { display: block; margin-top: .875rem; color: var(--red); font: 700 .75rem/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; }
  .card-reply h3 { font: 800 1.0625rem/1.15 var(--text); letter-spacing: -.01em; }
  .card-reply p { margin-top: .6rem; font-size: .8125rem; line-height: 1.45; }
  .card-reply p span { display: block; }
  .d-dashes { left: -1%; top: 40%; width: 8%; aspect-ratio: 1; }
  .d-crown { right: -1%; top: -12%; width: 11%; aspect-ratio: 1; }
  .d-star { left: -3%; top: -4%; width: 9%; aspect-ratio: 1; }

  /* Sections below the comp: paper, the same type, rules, one card per section, one marker word on each offer headline, one doodle each. */
  .section { padding: 3.5rem 0; }
  .section + .section { border-top: 1px solid var(--line); }
  .section-head { position: relative; display: grid; gap: 1rem; margin-bottom: 2rem; }
  .section-head .display { font-size: clamp(2.25rem, 10vw, 3.75rem); }
  .section-head .mark-word { font-size: .95em; }
  .d-sec { right: 0; top: -1.75rem; width: 1.75rem; aspect-ratio: 1; }
  .cols { display: grid; gap: 2rem; }
  .block h3, .block h2 { font: 800 1.25rem/1.2 var(--text); letter-spacing: -.01em; }
  .block p, .block li { color: var(--ink); }
  .block p + p, .block ul, .block p + h3 { margin-top: .75rem; }
  .block h3 + p, .block h2 + p { margin-top: .5rem; }
  .block ul { padding-left: 1.2rem; }
  .block li { margin: .35rem 0; }
  .block li::marker { color: var(--blue); }
  .quiet { color: var(--grey); }
  .rules { margin: 2rem .25rem 0; padding: 1.5rem; border-radius: var(--radius); background: var(--blue); color: #fff; box-shadow: var(--shadow); transform: rotate(-1deg); }
  .rules h3 { font: 900 1.75rem/1 var(--cond); text-transform: uppercase; letter-spacing: -.01em; }
  .rules p { margin-top: .75rem; color: #fff; }
  .rules ::selection { background: #fff; color: var(--blue); }

  .niches { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
  .niches li { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .niches strong { font-weight: 700; }
  .niches p { color: var(--grey); font-size: .9375rem; }
  .card-bio { padding: 1.25rem; margin: 2rem .5rem .75rem; transform: rotate(-2deg); }
  .card-bio h3 { font: 800 1.0625rem/1.2 var(--text); }
  .field { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
  .field .caps { color: var(--grey); font-size: .6875rem; }
  .field p { margin-top: .3rem; }
  .field .count { margin-top: .35rem; color: var(--grey); font-size: .8125rem; font-variant-numeric: tabular-nums; }
  .bio span { display: block; }

  .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 1.25rem; }
  .steps li { counter-increment: step; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .steps li::before { content: counter(step); color: var(--blue); font: 900 2.25rem/1 var(--cond); }
  .steps h3 { font: 800 1.0625rem/1.25 var(--text); }
  .steps p { margin-top: .35rem; color: var(--grey); font-size: .9375rem; }

  .faq details { border-top: 1px solid var(--line); }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; padding: 1rem .25rem 1rem 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
  .faq summary:hover { color: var(--blue-ink); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; width: .75rem; height: .75rem; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg); transition: transform .3s var(--ease); margin-right: .25rem; }
  .faq details[open] summary::after { transform: rotate(-135deg); }
  .faq details p { padding: 0 0 1.25rem; color: var(--grey); font-size: 1rem; max-width: 40rem; }

  .close { background: var(--blue); color: #fff; padding: 3.5rem var(--gutter); }
  .close .wrap { width: min(var(--width), 100%); }
  .close ::selection { background: #fff; color: var(--blue); }
  .close .display { color: #fff; }
  .close .mark-word { color: #fff; }
  .close .swash { color: #fff; }
  .close p { margin-top: 1rem; font-size: 1.125rem; color: #fff; max-width: 30rem; }
  .close-actions { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
  .close-actions .link { color: #fff; }
  .close-actions .link:hover { color: #fff; text-decoration-thickness: 2px; }
  .close-actions .link:focus-visible { outline-color: #fff; }

  footer { padding: 2rem 0 2.5rem; color: var(--grey); font-size: .875rem; line-height: 1.5; display: grid; gap: 1rem; }
  footer .who { color: var(--ink); font-weight: 700; }
  footer .contact { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
  footer .contact a { color: var(--ink); text-decoration: underline; text-underline-offset: .22em; text-decoration-color: #B8BEC6; }
  footer .contact a:hover { text-decoration-color: currentColor; }
  footer .privacy { max-width: 34rem; }
  footer .privacy a { text-decoration: underline; text-underline-offset: .22em; text-decoration-color: #B8BEC6; }
  footer .privacy a:hover { text-decoration-color: currentColor; }

  /* The one authored moment: the headline settles and the marker underline draws itself. */
  @media (prefers-reduced-motion: no-preference) {
    .headline, .hero .lead, .hero-actions { animation: settle .7s var(--ease) both; }
    .hero .lead { animation-delay: .1s; }
    .hero-actions { animation-delay: .18s; }
    .hero .swash path { clip-path: inset(0 100% 0 0); animation: draw .8s var(--ease) .55s forwards; }
    .card-score { animation: settle-tilt-l .9s var(--ease) both; }
    .card-reply { animation: settle-tilt-r .9s var(--ease) .1s both; }
    @keyframes settle { from { opacity: 0; translate: 0 .5rem; } to { opacity: 1; translate: 0 0; } }
    @keyframes draw { to { clip-path: inset(0 0 0 0); } }
    @keyframes settle-tilt-l { from { opacity: 0; transform: rotate(-7deg) translateY(.75rem); } to { opacity: 1; transform: rotate(-4deg); } }
    @keyframes settle-tilt-r { from { opacity: 0; transform: rotate(6deg) translateY(.75rem); } to { opacity: 1; transform: rotate(3deg); } }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  @media (min-width: 600px) {
    :root { --gutter: 2rem; }
    .nav { grid-template-columns: auto 1fr auto; grid-template-areas: "mark links pill"; column-gap: 2rem; padding-top: 1.25rem; }
    .links { justify-content: center; gap: 1.75rem; }
    .hero { padding-top: 2.5rem; }
    /* The figure is absolute until 1000px; reserve its height plus the tag so the cards start under them. */
    .hero-grid { min-height: calc(81vw + 5rem); }
    .headline { max-width: 60%; }
    .hero .lead { max-width: 50%; font-size: 1.125rem; }
    .hero-actions { max-width: 56%; flex-wrap: wrap; }
    .hero-actions .btn { padding-inline: 1.5rem; min-height: 3.25rem; font-size: .8125rem; letter-spacing: .12em; }
    .figure { width: 36%; top: 2.5rem; }
    .d-sparkle { top: -8%; left: -26%; width: 24%; }
    .proof { padding-top: 1rem; }
    .cards { grid-template-columns: 46fr 42fr; gap: 6%; padding: 0 4%; }
    .card { padding: 1.5rem 1.375rem; }
    .card-score { margin-top: 2rem; }
    .card-reply { margin-top: -2rem; }
    .parts li { font-size: .875rem; }
    .parts li span b { font-size: .75rem; }
    .example { font-size: .75rem; }
    .card-reply p { font-size: .9375rem; }
    .d-dashes { top: 34%; }
    .d-crown { right: -1%; top: 30%; width: 9%; }
    .d-star { left: -2%; top: 2%; width: 6%; }
    .section { padding: 4.5rem 0; }
    .d-sec { width: 2.25rem; top: -2rem; }
    .rules { margin-inline: .5rem; }
    .card-bio { margin: 2rem 1rem 1rem; }
    .cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .steps { grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
    .hero-actions { flex-direction: row; align-items: center; gap: 1.25rem; }
    .hero-actions .btn { padding-inline: 1.5rem; }
    .hero-actions .long { display: inline; }
    .hero-actions .short { display: none; }
    .close-actions { flex-direction: row; align-items: center; gap: 1.25rem; }
  }
  @media (min-width: 1000px) {
    :root { --gutter: 3rem; }
    .nav { padding-top: 1.5rem; }
    .hero { padding: 3rem 0 0; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 34rem) 1fr; column-gap: 0; align-items: start; min-height: 36rem; margin-top: 1.5rem; }
    .headline { max-width: none; font-size: clamp(5rem, 8.4vw, 7rem); }
    .headline br.ph { display: none; }
    .headline br.dt { display: inline; }
    .hero .lead { max-width: 34rem; font-size: 1.25rem; margin-top: 1.5rem; }
    /* Desktop: the figure is the grid's right cell; the phone stands whole at 64% of it, the blob wraps it and runs into the right gutter. */
    .figure { position: relative; top: 0; right: 0; width: 100%; max-width: 28rem; aspect-ratio: 1000 / 1900; justify-self: end; margin-left: 0; }
    /* The phone stands a fifth of the way down a tall cell; the blob, 1.7x the cell, is centred on the device so its contour clears every corner and stays under the nav. */
    .blob { left: 49%; top: 58%; width: 170%; }
    .phone { inset: 20% 18% auto; aspect-ratio: 623 / 1400; }
    .d-sparkle { top: 1%; left: 2%; width: 9%; }
    .proof { padding: 0 0 3rem; margin-top: 2.5rem; }
    .cards { width: min(100%, 62rem); margin-inline: auto; grid-template-columns: 34fr 46fr; gap: 6%; padding: 0 4%; align-items: start; }
    .card { padding: 2rem 1.75rem; }
    .card-score { margin-top: 1rem; padding: 2.75rem 2rem 2.5rem; }
    .card-reply { margin-top: 0; }
    .parts { gap: 1.1rem; margin-top: 1.25rem; }
    .parts li { font-size: .9375rem; }
    .parts li span b { font-size: .8125rem; }
    .card-reply h3 { font-size: 1.25rem; }
    .card-reply p { font-size: 1.0625rem; }
    .d-dashes { left: 1%; top: 30%; width: 4%; }
    .d-crown { right: 1%; top: 32%; width: 6%; }
    .d-star { left: 0; top: -6%; width: 4%; }
    .section { padding: 5.5rem 0; }
    .section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; margin-bottom: 3rem; }
    .d-sec { width: 2.5rem; top: -2.5rem; right: 0; }
    .rules { margin-inline: 1rem; }
    .card-bio { margin: 2rem 1.5rem 1rem; }
    .cols { gap: 3rem 4rem; }
    .close { padding: 5rem var(--gutter); }
    footer { grid-template-columns: auto 1fr; gap: 1rem 3rem; align-items: start; padding: 2.5rem 0 3rem; }
    footer .privacy { grid-column: 2; }
  }
  @media (min-width: 1250px) {
    .hero-grid { grid-template-columns: minmax(0, 44rem) 1fr; }
  }

  /* Pages after the split (2026-09-12): a plain head for the service pages, the services row on the main page, the booking form, the legal prose. Same type, same paper, same one blue. */
  .top { padding-bottom: .5rem; }
  .pagehead { padding: 1.5rem 0 0; }
  .pagehead .section-head { margin-bottom: 1.5rem; }
  .pagehead .d-sec { top: -1rem; right: 4%; }
  /* From 1000px the head is two columns; the sparkle sits in the gutter between them, where neither the headline nor a three-line lead can reach it. */
  @media (min-width: 1000px) {
    .pagehead .d-sec { top: -.5rem; right: auto; left: calc(50% - 1.25rem); }
  }
  /* On a service page the proof cards follow the head, not the phone: they need their own room and no tuck. */
  .pagehead + .proof { padding-top: 2.5rem; }
  .pagehead + .proof .card-reply { margin-top: 0; }
  .pagehead + .proof .card-score { margin-top: 0; }
  .actions { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
  .actions .link { font-size: .9375rem; }
  .services { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
  .services li { display: grid; }
  /* Four rows: number, title, copy, link line; the copy's row takes the slack so the link lines sit level across the three cards. */
  .service { display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; padding: 1.5rem 1.25rem; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease); }
  .service:hover { transform: translateY(-2px); }
  .service:active { transform: translateY(1px); }
  .service .n { color: var(--blue); font: 900 1.375rem/1 var(--cond); }
  .service h3 { font: 900 clamp(1.75rem, 7vw, 2.375rem)/.95 var(--cond); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
  .service p { color: var(--grey); font-size: .9375rem; }
  .service .go { color: var(--blue); font-weight: 700; }
  .service:hover .go { text-decoration: underline; text-underline-offset: .22em; }
  .two-col { display: grid; gap: 2rem; }
  .form { display: grid; gap: 1.25rem; max-width: 40rem; position: relative; }
  .form label, .form fieldset { display: grid; gap: .4rem; }
  .form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .form legend { padding: 0; margin-bottom: .4rem; font-weight: 700; }
  .form .lbl { font-weight: 700; }
  .form .help { color: var(--grey); font-size: .875rem; }
  .form input[type=text], .form textarea { width: 100%; min-height: 3.25rem; padding: .75rem .9rem; border: 1.5px solid #C9CFD6; border-radius: .625rem; background: #fff; color: var(--ink); font: inherit; }
  .form textarea { min-height: 6rem; resize: vertical; }
  .form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
  .form .choice { display: grid; gap: .5rem; }
  .form .choice label { display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .75rem .9rem; border: 1.5px solid #C9CFD6; border-radius: .625rem; background: #fff; cursor: pointer; }
  .form .choice label:has(:checked) { border-color: var(--blue); background: var(--tile); }
  .form .choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--blue); flex: none; }
  .form .hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
  .form .fine { color: var(--grey); font-size: .875rem; max-width: 36rem; }
  .form .fine a { color: var(--ink); }
  .form button { justify-self: start; border: 0; cursor: pointer; }
  .notice { padding: 1.25rem; border-radius: var(--radius); background: var(--tile); }
  .notice h3 { font: 800 1.0625rem/1.2 var(--text); }
  .notice p { margin-top: .75rem; }
  .notice ol { padding-left: 1.2rem; margin: .75rem 0 0; }
  .notice li { margin: .4rem 0; }
  .notice li::marker { color: var(--blue); font-weight: 700; }
  .prose { max-width: 40rem; display: grid; gap: 1rem; }
  .prose h2 { font: 800 1.25rem/1.2 var(--text); letter-spacing: -.01em; margin-top: 1rem; }
  .prose ul, .prose ol { padding-left: 1.2rem; margin: 0; }
  .prose li { margin: .35rem 0; }
  .prose li::marker { color: var(--blue); }
  .prose .updated { color: var(--grey); font-size: .875rem; }
  .prose a { color: var(--blue); }
  .problems { margin: 0 0 1.5rem; padding-left: 1.2rem; color: var(--red); font-weight: 600; }
  .problems li { margin: .35rem 0; }
  /* The checker's answer: one card per text, the cut part struck through. */
  .results { display: grid; gap: 1rem; max-width: 40rem; }
  .result { padding: 1.25rem; }
  .result .field:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .result .text { white-space: pre-wrap; overflow-wrap: anywhere; }
  .result .cut { color: var(--red); text-decoration-thickness: 2px; }
  .result .count b { font-weight: 700; }
  .result .count .ok { color: var(--blue); }
  .result .count .near { color: var(--ink); }
  .result .count .over { color: var(--red); }
  .result .shows { display: inline-block; margin-top: .2rem; padding: .1rem .45rem; border-radius: .35rem; background: var(--tile); color: var(--ink); font-weight: 700; }
  .result .more { color: var(--grey); font-weight: 600; }
  .fine-print { font-size: .875rem; max-width: 36rem; }
  footer .privacy a { color: var(--ink); }
  @media (min-width: 600px) {
    .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
    .service { padding: 1.75rem 1.5rem; }
    .actions { flex-direction: row; align-items: center; gap: 1.25rem; }
    .pagehead + .proof { padding-top: 3.5rem; }
  }
  @media (min-width: 1000px) {
    .two-col { grid-template-columns: 3fr 2fr; gap: 4rem; align-items: start; }
    .two-col > .notice { position: sticky; top: 1.5rem; }
    .service { padding: 2rem 1.75rem; gap: 1rem; }
    .service h3 { font-size: 2.5rem; }
  }