/* The fonts, served from this site (Latin only; each file holds every weight). */
@font-face { font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url(fonts/roboto-v51-latin.woff2) format("woff2"); }
@font-face { font-family: Quicksand; font-style: normal; font-weight: 300 700; font-display: swap;
             src: url(fonts/quicksand-v37-latin.woff2) format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 100 700; font-display: swap;
             src: url(fonts/roboto-mono-v31-latin.woff2) format("woff2"); }

/* ─────────────────────────────────────────────────────────────
   White and red, matching 1stplacedesign.com.au and 1pd.com.au.
   Red carries the accent; neutrals stay genuinely neutral rather
   than borrowing the indigo the internal portal uses.

   #e64040 on white is about 4:1, under the 4.5:1 text needs. It's
   kept for rules and accents; links use --red-text and buttons with
   white text --red-fill. The greys all clear 4.5:1 on --alt too.
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --bg:        #ffffff;
  --alt:       #f4f4f7;
  --ink:       #1f2029;
  --body:      #4a4d5c;
  --muted:     #5c5f70;
  --dim:       #6b6e80;
  --rule:      #e3e3ea;
  --red:       #e64040;
  --red-fill:  #d43737;
  --red-text:  #c62f2f;

  --measure: 34rem;
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.99rem + 0.16vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.85vw, 2rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: Quicksand, "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
  line-height: 1.18;
  margin: 0;
}

a { color: var(--red-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: 1.5rem; }
.col { max-width: var(--measure); }
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 6rem; }

.eyebrow {
  font-family: "Roboto Mono", ui-monospace, Menlo, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.9rem;
}

/* ── Masthead ────────────────────────────────────────────────
   On a white ground the original lockup works as drawn, so it is
   used as supplied. The vector mark is kept for the watermark and
   favicon, where the bitmap fell apart at size.

   STICKY, so the two ways of reaching us travel down the page with
   the reader. It is a direct child of body: sticky fails silently
   inside any ancestor that clips its overflow, and .opening does.
   The background must stay opaque or the watermark shows through it.
   ──────────────────────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 3px solid var(--red);
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 1.1rem;
}
.masthead img { display: block; height: 36px; width: auto; }
.masthead-cta { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

/* The number is shown rather than hidden behind a "Call us": people ring
   small businesses, and seeing the number is half the reassurance. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: Quicksand, Verdana, sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.68rem 1.1rem;
  border-radius: 2px;
  border: 1px solid transparent;
}
/* Sized in em so it tracks the label rather than needing its own breakpoint.
   Slightly under 1em because a filled glyph carries more visual weight than
   the outlined one it replaced, and would otherwise out-shout the number. */
.btn svg { width: 0.92em; height: 0.92em; flex: none; }
.btn-ghost svg { color: var(--red); }
.btn-ghost:hover svg { color: var(--red-text); }
.btn-ghost { color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { color: var(--red-text); border-color: var(--red); }
.btn-solid { color: #fff; background: var(--red-fill); }
.btn-solid:hover { color: #fff; background: var(--red-text); }

/* Under ~34rem both buttons plus the logo will not fit on one line, and a
   header that wraps to three rows eats the screen it is meant to sit above.
   The form anchor goes; the phone stays, because it is the one that works
   with a thumb. */
@media (max-width: 34rem) {
  .masthead img { height: 28px; }
  .masthead .btn-solid { display: none; }
}

/* ── Opening ─────────────────────────────────────────────────
   The mark carries the hero rather than a stock photograph. It is
   line art, so at this size it reads as light even at full strength,
   and it is the one image on the page that is actually ours.
   ──────────────────────────────────────────────────────────── */
.opening { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 7rem); }
.opening .wrap { position: relative; z-index: 1; }
.opening .text { max-width: var(--measure); }
.opening h1 { font-size: var(--step-3); max-width: 19ch; margin-bottom: 1.4rem; }
.opening .lede { font-size: var(--step-1); color: var(--body); margin: 0 0 1.1rem; }
.opening .text > p:last-child { margin: 0; color: var(--muted); }

/* Watermark, not illustration. Line art at low opacity on white is a tint
   rather than a picture, so the copy sits straight over it without a scrim.

   ANCHORED TO THE COLUMN, NOT THE VIEWPORT. Offsetting from the section's right
   edge looks right at laptop widths and falls apart on a wide monitor: .wrap
   stays capped at 62rem and centred, so every extra pixel of screen becomes
   gutter and drags the mark away from the copy it is meant to sit beside.
   Measuring from 50% instead pins it to the text column at any width, and the
   two anchors coincide once the viewport reaches the wrap's own maximum, so
   nothing moves at the widths where the old value was already right. The 5rem
   is where the copy ends: half of 62rem back out to the column edge, plus
   1.5rem of padding, plus the 34rem measure, lands 4.5rem past centre.

   SIZED TO BE CROPPED. The mark runs well past the right edge on purpose, so it
   reads as a detail of something larger rather than a logo that happens to be
   big. .opening clips its overflow, which is what makes that safe: without it
   the element would widen the document and scroll the body sideways.

   THE TILT IS THE POINT. Upright, six-fold symmetry reads as a logo somebody
   left in the background. Off-axis by a value that is not a multiple of 60
   degrees, it reads as deliberate. */
.opening .mark {
  position: absolute;
  left: calc(50% + 5rem);
  top: 50%;
  transform: translateY(-50%) rotate(-17deg);
  transform-origin: center;
  width: clamp(26rem, 64vw, 58rem);
  color: var(--red);
  opacity: 0.06;
  pointer-events: none;
}
.opening .mark svg { display: block; width: 100%; height: auto; }

/* On a phone the copy runs the full width, so the watermark drops back further
   still and sits high, clear of the densest text. */
@media (max-width: 46rem) {
  .opening .mark { left: auto; right: -13rem; top: 36%; width: 32rem; opacity: 0.045; }
}

/* ── Diagnostic band ─────────────────────────────────────────── */
.band {
  background: var(--alt);
  border-block: 1px solid var(--rule);
}
.band h2 { font-size: var(--step-2); }
.band .intro { margin: 1rem 0 2.5rem; font-size: var(--step-1); color: var(--body); }

.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.checks li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.35rem 1.75rem;
  align-items: baseline;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.reading .unit { font-size: 0.55em; color: var(--muted); font-weight: 400; margin-left: 0.05em; }
.reading {
  font-family: "Roboto Mono", monospace;
  font-size: var(--step-2);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--red-text);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.checks .what { color: var(--ink); font-family: Quicksand, Verdana, sans-serif; font-weight: 700; }
.checks .why { grid-column: 2; color: var(--muted); font-size: var(--step--1); line-height: 1.58; margin: 0; }
.band .footnote { margin: 2rem 0 0; font-size: var(--step--1); color: var(--dim); }

@media (max-width: 34rem) {
  .checks li { grid-template-columns: 1fr; }
  .checks .why { grid-column: 1; }
}

/* ── Services ────────────────────────────────────────────────── */
.services h2 { font-size: var(--step-2); max-width: 20ch; }
.services > .wrap > p { max-width: var(--measure); margin: 1rem 0 2.75rem; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.svc {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  padding: 1.5rem 1.4rem 1.6rem;
}
.svc h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.svc p { margin: 0; font-size: var(--step--1); line-height: 1.62; color: var(--muted); }

/* The invitation that closes the section. NOT a fourth card: three services and
   then a call to action shaped like a service reads as a fourth thing on offer.
   A rule and open space instead, so it is plainly the end of the section rather
   than another item in it.

   The actions sit right of the copy on a wide screen and drop under it at the
   same width the card grid stops being a row, so the block never ends up with
   a lone button stranded beside a single column of text. */
.svc-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
/* No reading-measure cap on the paragraph. The flex basis already decides how
   wide this column gets, and a second limit on top of it only shortens the
   lines while leaving the space it gave up sitting empty beside the buttons. */
.svc-close-text { flex: 1 1 30rem; }
.svc-close h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.svc-close p { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.62; }
/* Phone second, but not lesser: the ghost button is the one most people use.
   The order puts the form first only because it is the lower-effort ask of the
   two for somebody still deciding. */
.svc-close-actions { display: flex; flex-wrap: wrap; flex: none; gap: 0.6rem; }

/* ── Contact ─────────────────────────────────────────────────── */

.contact { background: var(--alt); border-top: 1px solid var(--rule); }
.contact-lead { max-width: 30rem; margin: 0 0 2.25rem; color: var(--muted); }
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem 3rem; align-items: start; }
@media (max-width: 46rem) { .contact-cols { grid-template-columns: 1fr; } }

/* Low friction on purpose: four fields, only two of them required. Someone who
   followed a link out of an unexpected email should be able to answer in one
   line without filling in a form about themselves first. */
.cform { display: grid; gap: 1rem; }
.cform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 30rem) { .cform .row { grid-template-columns: 1fr; } }
.cform label { display: block; font-size: var(--step--1); font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; }
.cform label .opt { font-weight: 400; color: var(--dim); }
.cform input, .cform textarea {
  width: 100%;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.6rem 0.7rem;
}
.cform textarea { min-height: 7rem; resize: vertical; }
.cform input:focus, .cform textarea:focus { border-color: var(--red); outline: 2px solid rgba(230, 64, 64, 0.25); outline-offset: 0; }
.cform button {
  justify-self: start;
  font: inherit;
  font-weight: 700;
  font-family: Quicksand, Verdana, sans-serif;
  color: #fff;
  background: var(--red-fill);
  border: 0;
  border-radius: 2px;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
}
.cform button:hover { background: var(--red-text); }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .note { margin: 0; font-size: var(--step--1); color: var(--dim); }
.sent { margin: 0 0 1.5rem; padding: 0.85rem 1rem; border-left: 3px solid var(--red); background: var(--bg); font-size: var(--step--1); }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; align-items: start; }
.contact h2 { font-size: var(--step-2); margin-bottom: 1.2rem; }
.contact > .wrap > .contact-grid > div > p { color: var(--muted); }
.contact dl { margin: 0; }
.contact dt {
  font-family: "Roboto Mono", monospace;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 0.3rem;
}
.contact dd {
  margin: 0 0 1.25rem;
  font-family: Quicksand, Verdana, sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: var(--step-0);
}
.contact dd a { color: var(--ink); text-decoration: none; }
.contact dd a:hover { color: var(--red-text); text-decoration: underline; }

footer { border-top: 1px solid var(--rule); padding-block: 2rem 3rem; font-size: var(--step--1); color: var(--dim); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: baseline; }
footer p { margin: 0; }
footer .sites { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
@media (max-width: 47.99em) {
  footer .wrap { flex-direction: column; align-items: center; text-align: center; }
  footer .sites { margin-left: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Landing pages & plans (landing-pages/) ──────────────────
   The offer page. Same palette and type as the homepage; the demo
   screenshots stand in for the watermark as the hero's picture,
   because the product is the page itself.
   ──────────────────────────────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn-lg { font-size: var(--step-0); padding: 0.85rem 1.35rem; }

.lp-hero { padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; }
.lp-hero__grid { display: grid; gap: 3rem; align-items: center; }
.lp-hero h1 { font-size: var(--step-3); max-width: 18ch; margin-bottom: 1.3rem; }
.lp-hero .lede { font-size: var(--step-1); margin: 0 0 1.75rem; max-width: var(--measure); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.lp-small { margin: 1rem 0 0; font-size: var(--step--1); color: var(--muted); }

/* ── Hero showcase ───────────────────────────────────────────
   Example pages in a browser window and a phone, each scrolling from
   the top, the next fading in every 13 seconds (the script at the
   foot of the page). The page runs wide (78rem) so the example pages
   are big enough to read as pages.

   Captures: 1280x4800 desktop scaled to 720x2700, 390x6000 phone. The
   stops are fractions of those heights, so they hold at any display size. */
.showcase { position: relative; isolation: isolate; width: 100%; max-width: 46rem; justify-self: center; }
.sc-stage { position: relative; padding: 0 0 9% 13%; }
.sc-stage::before { content: ""; position: absolute; z-index: -1; inset: 6% -8% -2% 0;
                    background: radial-gradient(closest-side, rgba(230, 64, 64, .2), rgba(230, 64, 64, 0));
                    filter: blur(8px); }

.sc-browser { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(31, 32, 41, .1);
              box-shadow: 0 2px 4px rgba(31, 32, 41, .05), 0 30px 60px -12px rgba(31, 32, 41, .3); }
.sc-bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.8rem; background: #eceef2;
          border-bottom: 1px solid rgba(31, 32, 41, .08); }
.sc-dots { display: flex; gap: 0.35rem; flex: none; }
.sc-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff5f57; }
.sc-dots i:nth-child(2) { background: #febc2e; }
.sc-dots i:nth-child(3) { background: #28c840; }
.sc-url { flex: 1; max-width: 18rem; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 0.35rem;
          padding: 0.2rem 0.75rem; border-radius: 6px; background: #fff; color: var(--muted);
          font-size: 0.74rem; line-height: 1.4; white-space: nowrap; overflow: hidden; }
.sc-url svg { width: 0.7rem; height: 0.7rem; flex: none; color: #1e7a3c; }

.sc-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.sc-page { position: absolute; inset: 0 0 auto 0; display: block; width: 100%; height: auto; opacity: 0;
           transition: opacity .8s ease; will-change: transform, opacity; }
/* The scroll itself is the script's: bursts to the top of each section, the
   same sections in the browser and the phone. */
.sc-page.is-active { opacity: 1; }

/* The phone sits in front, bottom left, and scrolls in step. */
.sc-phone { position: absolute; left: 0; bottom: 0; width: 27%; padding: 0.95rem 0.4rem 0.6rem; border-radius: 1.5rem;
            background: #1f2029; box-shadow: 0 26px 50px -10px rgba(31, 32, 41, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sc-phone::before { content: ""; position: absolute; z-index: 2; top: 0.36rem; left: 50%; transform: translateX(-50%);
                    width: 24%; height: 0.3rem; border-radius: 999px; background: #3a3c48; }
.sc-screen--phone { aspect-ratio: 9 / 19.5; border-radius: 1.15rem; }

/* Tabs to jump between the pages, centred under the whole stage (browser and
   phone together); the active one fills as its time runs. */
.sc-foot { display: flex; justify-content: center;
           margin-top: 1.75rem; }
.sc-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.sc-tabs button { position: relative; overflow: hidden; font: 500 0.8rem/1.2 Roboto, Arial, sans-serif; color: var(--body);
                  background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 0.42rem 0.8rem; cursor: pointer; }
.sc-tabs button:hover { border-color: var(--red); color: var(--ink); }
.sc-tabs button.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }
.sc-tabs button.is-active::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
                                   background: var(--red); transform-origin: left; animation: sc-progress 13s linear forwards; }
@keyframes sc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .sc-tabs button.is-active::after { content: none; }
}

@media (min-width: 64em) {
  .lp-hero__grid { grid-template-columns: minmax(31.5rem, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; }
}

.lp-intro { max-width: var(--measure); margin: 1rem 0 2.5rem; }
.lp-what { border-bottom: 1px solid var(--rule); }
.lp-what h2, .lp-plans h2, .lp-how h2 { font-size: var(--step-2); max-width: 24ch; }
.lp-what .svc-grid { grid-template-columns: 1fr; }
@media (min-width: 36em) { .lp-what .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56em) { .lp-what .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-demo__grid { display: grid; gap: 2rem 3.5rem; align-items: center; }
.lp-demo img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule);
               box-shadow: 0 14px 34px rgba(31, 32, 41, .12); }
.lp-demo h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.lp-demo p:not(.eyebrow) { margin: 0 0 1.5rem; }
@media (min-width: 52em) { .lp-demo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Plans ───────────────────────────────────────────────────
   The ads plans lead with the two-month trial: it is the offer, not
   a footnote, so it sits beside the price rather than under the list. */
.lp-plans { background: var(--alt); border-block: 1px solid var(--rule); }

.plan-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--rule);
        border-radius: 6px; padding: 1.75rem 1.5rem 1.6rem; }
.plan--pick { border: 2px solid var(--red); box-shadow: 0 14px 34px rgba(31, 32, 41, .1); }
.plan-badge { position: absolute; top: 0; left: 1.5rem; transform: translateY(-50%); margin: 0; padding: 0.3rem 0.75rem;
              border-radius: 999px; background: var(--red-text); color: #fff; font-family: "Roboto Mono", monospace;
              font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.plan h3 { font-size: var(--step-1); }
.plan-for { margin: 0.4rem 0 1.25rem; color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.price { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.price .amt { font-family: Quicksand, Verdana, sans-serif; font-weight: 700; font-size: var(--step-3); line-height: 1; color: var(--ink);
              font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.price .per { color: var(--muted); font-size: var(--step--1); }
.price-note { margin: 0.45rem 0 0; font-size: var(--step--1); color: var(--muted); text-wrap: balance; }
.plan-list { list-style: none; margin: 1.4rem 0 1.75rem; padding: 1.25rem 0 0; border-top: 1px solid var(--rule);
             display: grid; align-content: start; gap: 0.55rem; font-size: var(--step--1); line-height: 1.5; color: var(--body); }
.plan-list li { position: relative; padding-left: 1.6rem; }
.plan-list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.32em; width: 0.38rem; height: 0.72rem;
                        border: solid var(--red); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan-list .plan-plus { padding-left: 0; font-weight: 500; color: var(--ink); }
.plan-list .plan-plus::before { content: none; }
.plan-btn { margin-top: auto; justify-content: center; font-size: var(--step-0); padding-block: 0.8rem; }

.lp-terms { display: grid; gap: 1rem 3rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule);
            font-size: var(--step--1); color: var(--muted); }
.lp-terms p { margin: 0; }
.lp-terms strong { color: var(--ink); font-weight: 500; }
@media (min-width: 52em) { .lp-terms { grid-template-columns: 1.6fr 1fr; } }

/* ── How it works and questions ─────────────────────────────── */
.lp-steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: step; }
.lp-steps li { counter-increment: step; position: relative; padding-left: 3.2rem; }
.lp-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem;
                       border-radius: 50%; display: grid; place-items: center; background: var(--red-text); color: #fff;
                       font: 700 1rem Quicksand, Verdana, sans-serif; }
.lp-steps strong { display: block; text-wrap: balance; color: var(--ink); font-family: Quicksand, Verdana, sans-serif; font-size: var(--step-1); line-height: 1.3; }
.lp-steps span { display: block; margin-top: 0.3rem; font-size: var(--step--1); color: var(--muted); }
@media (min-width: 48em) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

.lp-how { background: var(--alt); border-block: 1px solid var(--rule); }
.lp-faq h2 { font-size: var(--step-2); margin-bottom: 1.5rem; }
.faq { max-width: 44rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
               font-family: Quicksand, Verdana, sans-serif; font-weight: 700; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
                      font: 400 1.5rem/1 Roboto, Arial, sans-serif; color: var(--red-text); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.2rem; color: var(--muted); font-size: var(--step--1); max-width: 40rem; }

/* ── Client portal ───────────────────────────────────────────
   The enquiry list is drawn in HTML rather than shown as a screenshot,
   so it stays sharp and the text inside it is real text. */
.lp-portal__grid { display: grid; gap: 2.5rem 3.5rem; align-items: center; }
.lp-portal h2 { font-size: var(--step-2); max-width: 20ch; margin-bottom: 1rem; }
.lp-portal p:not(.eyebrow) { margin: 0; max-width: var(--measure); }
.lp-portal__list { border-top: 0; padding-top: 0; margin: 1.5rem 0 0; }
@media (min-width: 56em) { .lp-portal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.leads { margin: 0; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px;
         box-shadow: 0 18px 40px rgba(31, 32, 41, .12); overflow: hidden; font-size: 0.86rem; line-height: 1.4; }
.leads__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
              padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--rule); background: var(--alt); }
.leads__title { font-family: Quicksand, Verdana, sans-serif; font-weight: 700; color: var(--ink); font-size: 1rem; }
.leads__tabs { display: flex; gap: 0.35rem; }
.leads__tabs > * { padding: 0.25rem 0.6rem; border-radius: 999px; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.leads__tabs b { background: var(--ink); color: #fff; font-weight: 500; }
.leads__rows { list-style: none; margin: 0; padding: 0; }
.leads__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; align-items: center;
                  padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--rule); }
.leads__who { display: grid; gap: 0.1rem; min-width: 0; }
.leads__who b { color: var(--ink); font-weight: 500; }
.leads__who span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads__meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.leads__when { color: var(--dim); font-size: 0.78rem; }
.leads .chip { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.tag { font-size: 0.74rem; padding: 0.12rem 0.5rem; border-radius: 3px; background: var(--alt); color: var(--body); }
.tag--ads { background: #e8f0fe; color: #1a56c4; }
.chip { font-size: 0.76rem; font-weight: 500; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--alt); color: var(--muted);
        white-space: nowrap; }
.chip--new { background: #fdecec; color: var(--red-text); }
.chip--won { background: #e6f4ea; color: #1e7a3c; }
.leads figcaption { padding: 0.6rem 1.1rem; font-size: 0.74rem; color: var(--dim); }
.lp-demo { border-bottom: 0; }
.contact-lead:has(+ .contact-lead) { margin-bottom: 1rem; }
.lp-what .svc p, .faq details p, .lp-steps span { text-wrap: pretty; }
.trial { display: table; margin: 0 0 0.4rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: #fdecec;
         color: var(--red-text); font-weight: 500; }

/* ── Numbers band as a grid ──────────────────────────────────
   Six readings in rows of three (two on a tablet), the figure above
   its label, so the band is two rows tall rather than six. */
.band .intro { max-width: 46rem; }
.checks { display: grid; gap: 0 2.5rem; border-top: 0; }
.checks li { grid-template-columns: 1fr; align-content: start; gap: 0.3rem; padding-block: 1.5rem 1.75rem;
             border-top: 1px solid var(--rule); border-bottom: 0; }
.checks .why { grid-column: 1; margin-top: 0.2rem; text-wrap: pretty; }
.checks .reading { font-size: var(--step-3); margin-bottom: 0.25rem; }
@media (min-width: 36em) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56em) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.checks .what { line-height: 1.35; text-wrap: balance; }
.lp-hero .eyebrow { text-wrap: balance; }
.lp-faq__head p { margin: 0 0 1.75rem; color: var(--muted); font-size: var(--step--1); }
@media (min-width: 56em) {
  .lp-faq .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: start; }
  .lp-faq h2 { margin-bottom: 0.75rem; }
  .faq { max-width: none; }
  .faq details p { max-width: 48rem; }
}