/* ==========================================================================
   YellowTradie landing page
   --------------------------------------------------------------------------
   DESIGN TOKENS: every colour, font, size and weight below is lifted from
   dewalt.co.uk's own stylesheets (the `sbd-brand-dewalt` token block in
   /_next/static/immutable/chunks/1ycp-1k_gqhd7.css and the @font-face sheet
   1tbc5u3rf61sq.css), read 2026-09-21. Change values here, not further down.
   ========================================================================== */

:root {
  /* Brand yellow. Pete's call 2026-09-22: #FFF400, a brighter, greener yellow
     than the DeWalt brand-5 (#febd17) this page started on. The hover is a
     lighter tint of the same hue. */
  --y: #fff400;
  --y-hover: #fffa5c;

  /* Neutrals, DeWalt's --color-neutral ramp */
  /* The black. PoweredNow's brand dark (#161616, their Elementor global
     --e-global-color-5fcc261), chosen by Pete on 2026-09-21 so the page and
     PoweredNow's hero share one black. It is also the exact black the app
     already uses, so the site and the product share one black. The app's own
     yellow is #FFBD0D; since 2026-09-22 the page runs on Pete's #FFF400
     instead, so the two yellows no longer match.
     DeWalt's own near-black is #231e20, kept below as --ink for anything that
     needs their warmer tone. */
  --black: #161616;
  --ink: #231e20;          /* DeWalt neutral-11, kept for reference */
  --black-pure: #000;      /* neutral-12 */
  --cream: #fcf5de;        /* text on dark */
  --grey-2: #f7f5f5;       /* neutral-2 light surface */
  --grey-3: #f0eeee;       /* neutral-3 light surface / outline hover */
  --border: #d7d5d5;       /* neutral-5 border primary on light */
  --muted: #413d3f;        /* neutral-9 secondary text on light */
  --tertiary: #646062;     /* neutral-8 tertiary text on light */
  --tertiary-dark: #b7b4b5;/* neutral-6 tertiary text on dark */
  --hairline-dark: #413d3f;/* border secondary on dark: the header hairline */

  /* Semantic, DeWalt's ramps */
  --error: #dc2626;
  --success: #16a34a;

  /* Section rules. Pete's call 2026-09-22: grey, not brand yellow, because a
     yellow rule on white or light grey is invisible. --border (#d7d5d5) is too
     pale once the rule is 4px thick, so this is neutral-8. It applies to the
     rules sitting on light backgrounds only: the hero and the final block keep
     their yellow bars because those sit on black.
     Two users left after 2026-09-22 12:05: the rule above each zoomed app
     screen, and the bar across the top of the signup modal. The seven stage
     headings in "One phone does the lot" lost theirs at Pete's asking, so do
     not read this token as "every light section has one". */
  --rule: #646062;

  /* Type: Archivo Expanded for display and buttons, Inter for everything else */
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Zero corner radius. This is the whole identity's edge rule */
  --radius: 0;

  /* Layout: DeWalt's 4px base scale and 1272px desktop content width */
  --gutter: 16px;
  --content: 1272px;
  --section-pad: 56px;

  /* The signature thick bar: 8px, 12px from 1280px up */
  --bar: 8px;
  --nav-underline: 4px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 40px; --bar: 12px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--black);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-pad) 0; }

/* Keep an anchor jump clear of the sticky header */
section[id] { scroll-margin-top: 90px; }
.section--grey { background: var(--grey-2); }
.section--dark { background: var(--black); color: var(--cream); }

/* --------------------------------------------------------------------------
   Type scale, DeWalt's prose-brand and prose-body classes
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-stretch: 125%;          /* reproduces Archivo Expanded */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 0;
}

/* H1: 28/32, 52/56 at 640, 68/70 at 1280. Matches .prose-brand-md to .prose-display-md */
h1.display { font-size: 28px; line-height: 32px; }
@media (min-width: 640px) { h1.display { font-size: 52px; line-height: 56px; } }
@media (min-width: 1280px) { h1.display { font-size: 68px; line-height: 70px; } }

/* Section H2: 18/20, 28/32, 42/44. Matches .prose-brand-2xs to .prose-brand-xl */
h2.display { font-size: 18px; line-height: 20px; letter-spacing: -0.1px; }
@media (min-width: 640px) { h2.display { font-size: 28px; line-height: 32px; letter-spacing: -0.35px; } }
@media (min-width: 1280px) { h2.display { font-size: 42px; line-height: 44px; } }

/* Card H3: 20/24, 24/28, 36/40. Matches .prose-brand-xs to .prose-brand-lg */
h3.display { font-size: 20px; line-height: 24px; letter-spacing: -0.25px; }
@media (min-width: 640px) { h3.display { font-size: 24px; line-height: 28px; letter-spacing: -0.35px; } }
@media (min-width: 1280px) { h3.display { font-size: 36px; line-height: 40px; } }

/* Small display, .prose-brand-3xs and .prose-brand-2xs */
.display--xs { font-size: 16px; line-height: 18px; letter-spacing: -0.1px; }
@media (min-width: 1280px) { .display--xs { font-size: 18px; line-height: 20px; } }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 18px; line-height: 22px; }
@media (min-width: 1280px) { .lede { font-size: 20px; line-height: 28px; } }

.muted { color: var(--muted); }
.tertiary { color: var(--tertiary); }
.section--dark .muted { color: var(--cream); }
.section--dark .tertiary { color: var(--tertiary-dark); }

/* Eyebrow, .prose-eyebrow-bold-md plus an explicit uppercase class, as DeWalt does */
.eyebrow {
  font-family: var(--body);
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 16px;
}
.eyebrow--yellow { color: var(--y); }

/* --------------------------------------------------------------------------
   Buttons: radius 0, Archivo 800 uppercase, yellow fill, near-black label
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--sm { font-size: 12px; line-height: 14px; height: 32px; padding: 0 8px; }
.btn--lg { font-size: 14px; line-height: 18px; height: 40px; padding: 0 12px; }

.btn--solid { background: var(--y); color: var(--black); }
.btn--solid:hover { background: var(--y-hover); }

/* Outline button, the .onDark variant from DeWalt's token layer */
.btn--outline { background: rgba(0, 0, 0, .2); border-color: var(--cream); color: var(--cream); }
.btn--outline:hover { background: rgba(255, 255, 255, .2); }

/* Inverted button, for sitting on the yellow band where a yellow button would vanish */
.btn--invert { background: var(--black); color: var(--cream); }
.btn--invert:hover { background: var(--black-pure); }

.btn[disabled] { background: var(--border); color: rgba(0, 0, 0, .2); cursor: default; }

:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.section--dark :focus-visible, .hero :focus-visible { outline-color: var(--y); }

/* --------------------------------------------------------------------------
   Header: 74px, 82px at 1280, near-black, 1px hairline, 4px yellow nav hover
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  border-bottom: 1px solid var(--hairline-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
@media (min-width: 1280px) { .header-inner { height: 82px; } }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  flex: none;
}

.logo svg { display: block; }

.logo-word {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: #fff;
}
@media (min-width: 640px) { .logo-word { font-size: 24px; } }

.nav {
  display: none;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) { .nav { display: flex; } }

.nav a {
  display: inline-block;
  padding: 16px 0 12px;
  border-bottom: var(--nav-underline) solid transparent;
  font-family: var(--body);
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: border-color .15s ease;
}
.nav a:hover { border-bottom-color: var(--y); }

/* --------------------------------------------------------------------------
   Hero. Structure from powerednow.com (full bleed photo, brand-black panel
   painted over the left, copy on the black), skin from DeWalt.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--black);
  color: var(--cream);
  display: flex;
  align-items: center;
  min-height: 600px;
  padding: 40px 0;
  overflow: hidden;
}

@media (min-width: 860px) {
  .hero { min-height: 100vh; min-height: 100svh; padding: 0; }
}

/* The photograph runs across the right of the hero and blends into the black.
   Pete's calls, 2026-09-22: increase the size, lose the rectangle, let the
   image breathe. The photograph changed on 2026-09-22 16:20 (man3.png in
   `Business/Website/Assets/`), and the one number below moved with it. */
.hero-media { display: none; }

@media (min-width: 1024px) {
  .hero-media {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    z-index: 0;
    /* The image fills the container, no top/bottom fade — it runs full height */
  }
  .hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The box is tall and the photograph is wide, so cover crops the sides: at
       1440 it shows 60% of the frame, from 17% across to 77%. 30% is chosen by
       measurement for this photograph, not by eye. It keeps the warm, busy part
       of the frame (about a quarter to a half across) inside the mask's clear
       zone, and it keeps the headline on the dark half: the strip the longest
       headline line reaches into reads a median 45 here against 27 on the old
       photograph. Lower numbers put the bright left of this frame behind the
       words; higher numbers fade the subject. */
    object-position: 30% center;
    /* Softer grade so the picture blends, not sits on top */
    filter: brightness(.85) saturate(.9);
    /* Left edge fades into the black so the transition is gradual and the copy
       column stays on black. The fade finishes at 30%, which is where the copy
       column ends at 1440, so no word sits on full-strength photograph. Right,
       top and bottom edges feather too, so there is no hard rectangle. */
    -webkit-mask-image:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .4) 9%,
        rgba(0, 0, 0, .7) 17%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, .7) 92%,
        rgba(0, 0, 0, .3) 96%,
        rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .5) 5%,
        rgba(0, 0, 0, 1) 12%,
        rgba(0, 0, 0, 1) 88%,
        rgba(0, 0, 0, .5) 95%,
        rgba(0, 0, 0, 0) 100%);
    mask-image:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .4) 9%,
        rgba(0, 0, 0, .7) 17%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, .7) 92%,
        rgba(0, 0, 0, .3) 96%,
        rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .5) 5%,
        rgba(0, 0, 0, 1) 12%,
        rgba(0, 0, 0, 1) 88%,
        rgba(0, 0, 0, .5) 95%,
        rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.hero-inner { position: relative; z-index: 1; width: 100%; }

.hero-copy {
  max-width: 620px;
  /* No rule above or below, Pete's call 2026-09-22 16:11. It carried two thick
     yellow bars top and bottom until then, copied from DeWalt's framing. The
     padding is unchanged, so the only difference is the two lines. */
  padding: 24px 0;
}
@media (min-width: 1280px) { .hero-copy { max-width: 760px; padding: 32px 0; } }

.hero h1 { color: #fff; margin: 0 0 20px; }
.hero h1 em { font-style: normal; color: var(--y); }
.hero p { color: var(--cream); max-width: 34em; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.hero-note {
  margin-top: 16px;
  font-size: 12px;
  line-height: 17px;
  color: var(--tertiary-dark);
}

/* --------------------------------------------------------------------------
   Card grids, zero radius, 1px borders, no shadows
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  border-top: 4px solid var(--black);
}
.card p { color: var(--muted); }
.card .display { margin-bottom: 12px; }

.card--dark {
  background: var(--black);
  border: 1px solid var(--hairline-dark);
  color: var(--cream);
}
.card--dark p { color: var(--cream); }

/* Numbered marker, the numbered-badge idea from powerednow.com in DeWalt colours */
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--y);
  color: var(--black);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   The three-line honesty block
   -------------------------------------------------------------------------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  border-top: 1px solid var(--hairline-dark);
  padding: 20px 0;
}
.checklist li:last-child { border-bottom: 1px solid var(--hairline-dark); }
.checklist .display--xs { color: var(--y); margin-bottom: 8px; }
.section--light .checklist li { border-color: var(--border); }
.section--light .checklist .display--xs { color: var(--black); }

/* --------------------------------------------------------------------------
   Phone panels, showing the real app
   -------------------------------------------------------------------------- */

.phones { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.phone {
  width: 243px;
  max-width: 100%;
  border: 1px solid var(--hairline-dark);
  background: var(--black);
  padding: 8px;
}
.phone img { width: 100%; height: auto; }
.phone figcaption {
  font-size: 13px;
  line-height: 19px;
  color: var(--tertiary-dark);
  padding: 12px 4px 4px;
}

/* --------------------------------------------------------------------------
   Feature groups: one heading per stage of the job, three cards under each
   -------------------------------------------------------------------------- */

.feature-groups { display: grid; gap: 40px; margin-top: 36px; }

.group-title {
  color: var(--black);
  /* The 4px grey rule under each stage heading is gone. Pete's call
     2026-09-22 12:05: the seven rules read as dividers chopping the section
     into strips, and the headings hold their own against the cards without
     them. The heading text and the spacing are untouched, so the only change
     is the line. This is the one place --rule was doing section furniture. */
  padding-bottom: 8px;
  margin-bottom: 20px;
}

/* Card headings are h4, so the heading order stays h1, h2, h3, h4 */
.card h4.display--xs { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   See it in 30 seconds: the real app screens in a carousel. On a phone it is
   swiped; from 900px the shot and its words sit side by side. It advances on
   its own until somebody touches it (app.js), which is the "looping demo"
   without shipping a video file nobody has recorded yet.
   -------------------------------------------------------------------------- */

.carousel { position: relative; margin-top: 32px; }

.carousel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-top: 4px solid var(--rule);
  padding: 20px 4px 0;
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .slide { grid-template-columns: auto 1fr; align-items: center; gap: 48px; padding-right: 8px; }
  .slide img { height: 720px; margin: 0; }
}

/* A full phone screen is tall, so it is sized by its height and centred rather
   than stretched across the column. The height and the ratio are both fixed, so
   the box is the right size before the lazy ones have loaded: without that, the
   fourth and fifth screens collapsed to nothing until they arrived and the row
   changed height under the reader. */
.slide img {
  display: block;
  height: 620px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1080 / 2400;
  object-fit: contain;
  margin: 0 auto;
  border: 1px solid var(--border);
  background: #fff;
}

/* All five screens are one size: a full phone screen, 1080 by 2400, taken off
   the handset. They were tight crops of parts of the app before, and Pete asked
   for the whole screen: "the screenshot of the app need to be full screenshots,
   not fucking close-ups". One size also means the row cannot change height as
   you swipe, which is what made the numbers jump about. */

/* On a phone the next screen deliberately shows a strip of itself at the edge.
   At full width the edge of a slide lines up with the edge of the phone, which
   gives away nothing about there being four more. */
@media (max-width: 899px) {
  .slide { flex: 0 0 88%; min-width: 88%; padding: 14px 4px 0; gap: 12px; }
}

.slide .slide-copy h3 { margin-bottom: 10px; }
.slide .slide-copy p { font-size: 16px; line-height: 21px; color: var(--muted); }

/* Numbered page dots. A 44px square each, because a phone in sunlight and a
   thumb in a glove do not do small targets. */
.carousel-dots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.dot {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: var(--black);
  background: #fff;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease;
}
.dot.is-current { background: var(--y); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Accordions: the reveal under the carousel and the six job stops. Every
   answer stays in the page in full, so a search engine reads the same words
   a person does, one tap away.
   -------------------------------------------------------------------------- */

.reveal { border-top: 1px solid var(--black); margin-top: 28px; }
.reveal:last-child { border-bottom: 1px solid var(--black); }

.reveal summary,
.step-summary,
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
}
.reveal summary::-webkit-details-marker,
.step-summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker { display: none; }

.reveal summary::after,
.step-summary::after,
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  color: var(--black);
}

.reveal[open] summary::after,
.step[open] .step-summary::after,
.faq-item[open] summary::after { content: "\2212"; }

.reveal summary { padding: 16px 0; }

.reveal-title {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 18px;
}

.reveal-body { padding: 0 0 20px; color: var(--muted); max-width: 60em; }

/* --------------------------------------------------------------------------
   The six job stops. A numbered job sheet: one line a stop, the detail
   behind a tap.
   -------------------------------------------------------------------------- */

.steps { margin-top: 32px; border-top: 1px solid var(--black); }
.step { border-bottom: 1px solid var(--black); }

.step-summary { align-items: flex-start; padding: 20px 0; }

.step-num {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--y);
  color: var(--black);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.step-head { flex: 1 1 auto; }

/* The stage heading keeps its class so the checks that prove the grey rules
   never came back still mean something. It carries no rule of its own. */
.step-summary .group-title { margin: 0; padding: 0; color: var(--black); }

.step-line { display: block; margin-top: 4px; font-size: 16px; line-height: 21px; color: var(--muted); }

.step-summary::after { margin-top: 8px; }

.step-body { padding: 4px 0 24px; display: grid; gap: 16px; }

.odd-jobs { margin-top: 40px; }
.odd-jobs h3 { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Comparison table: paper and WhatsApp against the app. Scrolls sideways
   on a phone rather than squashing.
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.compare th,
.compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline-dark);
  vertical-align: top;
  font-size: 15px;
  line-height: 21px;
}

.compare thead th {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 14px;
  color: var(--y);
  border-bottom: 2px solid var(--y);
  padding-bottom: 12px;
}

.compare tbody th { font-weight: 600; color: var(--cream); width: 24%; }
.compare td { color: var(--tertiary-dark); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: none; }
.compare caption { font-size: 13px; line-height: 19px; }

/* --------------------------------------------------------------------------
   Signup band. DeWalt's footer newsletter treatment: a yellow panel
   sandwiched between two thick near-black bars.
   -------------------------------------------------------------------------- */

.signup {
  background: var(--y);
  color: var(--black);
  border-top: var(--bar) solid var(--black);
  border-bottom: var(--bar) solid var(--black);
  padding: 40px 0;
}
@media (min-width: 1280px) { .signup { padding: 56px 0; } }

.signup-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .signup-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.signup h2 { margin-bottom: 16px; }
.signup p { color: var(--black); }

/* The three reasons on the yellow band. Black squares, same zero-radius edge
   rule as the list in the modal. */
.signup-reasons {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.signup-reasons li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 21px;
  color: var(--black);
}

.signup-reasons li:last-child { margin-bottom: 0; }

.signup-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--black);
}

.signup-reasons strong { font-weight: 700; }

/* Pete's short vertical clip. The slot stays hidden until the file actually
   loads, so a missing clip leaves no empty box in the band. */
.signup-video {
  max-width: 300px;
  margin: 0 0 20px;
  background: var(--black);
  border: var(--bar) solid var(--black);
}

/* The hidden attribute has to beat the block above, or a missing clip still
   takes up space in the band. */
.signup-video[hidden] { display: none; }

.signup-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--black);
}

form { margin: 0; }

.field { margin-bottom: 16px; }

label {
  display: block;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
  margin-bottom: 8px;
}

input, select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 21px;
  color: var(--black);
  background: #fff;
  border: 1px solid var(--black);
  border-radius: var(--radius);
}

input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

.field-error {
  display: block;
  font-size: 13px;
  line-height: 19px;
  color: var(--error);
  margin-top: 8px;
}

.form-note { font-size: 13px; line-height: 19px; margin-top: 12px; }

.signup-success {
  background: var(--black);
  color: var(--cream);
  padding: 20px;
  border-radius: var(--radius);
}
.signup-success .display { color: var(--y); margin-bottom: 12px; }
.signup-success p { color: var(--cream); }

/* --------------------------------------------------------------------------
   Signup modal: the page carries one button, the form lives in here.
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

/* The hidden attribute has to beat the flex display above, or a closed modal
   still takes the whole screen and eats every click. */
.modal[hidden] { display: none; }

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .8);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  color: var(--black);
  border: 1px solid var(--black);
  border-top: var(--bar) solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 24px;
  line-height: 1;
  color: var(--black);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.modal-close:hover { background: var(--grey-3); }

.modal-panel .eyebrow { color: var(--tertiary); margin-bottom: 8px; }
.modal-panel h2 { margin-bottom: 12px; }
.modal-panel > p { color: var(--muted); margin-bottom: 20px; }
.modal-panel .form-note { color: var(--muted); }
.modal-panel .signup-success { margin-top: 4px; }

/* The "what you get" reasons. A black square rather than a disc, to keep the
   page's zero-radius edge rule. Pete's call 2026-09-22: black markers, not
   yellow ones, so the list reads as body text rather than decoration. */
.modal-panel .what-you-get-title {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 14px;
  color: var(--black);
  margin: 0 0 10px;
}

.modal-panel .what-you-get {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.modal-panel .what-you-get li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 21px;
  color: var(--muted);
}

.modal-panel .what-you-get li:last-child { margin-bottom: 0; }

.modal-panel .what-you-get li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--black);
}

.form-error {
  font-size: 13px;
  line-height: 19px;
  color: var(--error);
  margin-bottom: 12px;
}

/* The page behind the modal must not scroll while it is open */
body.modal-open { overflow: hidden; }

/* Only ever shown while the signup form has no endpoint configured */
.preview-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--error);
  color: #fff;
  font-family: var(--body);
  font-size: 13px;
  line-height: 19px;
  padding: 8px var(--gutter);
  text-align: center;
}

/* --------------------------------------------------------------------------
   FAQ: an accordion. The questions sit one line each until they are opened,
   and every answer is still in the page in full for the search engines.
   -------------------------------------------------------------------------- */

.faqs { margin-top: 32px; border-top: 1px solid var(--black); }
.faq-item { border-bottom: 1px solid var(--black); }
.faq-item summary { padding: 20px 0; align-items: flex-start; }
.faq-item summary h3 { margin: 0; }
.faq-item summary::after { margin-top: 2px; }
.faq-item p { margin: 0; padding: 0 0 20px; color: var(--muted); max-width: 60em; }

/* --------------------------------------------------------------------------
   Final call to action
   -------------------------------------------------------------------------- */

.final { background: var(--black); color: var(--cream); padding: 56px 0; }
.final-inner {
  border-top: var(--bar) solid var(--y);
  border-bottom: var(--bar) solid var(--y);
  padding: 32px 0;
}
.final h2 { color: #fff; margin-bottom: 16px; }
.final p { color: var(--cream); max-width: 44em; }
.final .btn { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--black); color: var(--cream); padding: 40px 0; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-col h3 {
  color: var(--y);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.1px;
  margin: 0 0 12px;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-col a:hover { border-bottom-color: var(--cream); }

.footer-base {
  border-top: 1px solid var(--hairline-dark);
  margin-top: 32px;
  padding-top: 20px;
  font-size: 13px;
  line-height: 19px;
  color: var(--tertiary-dark);
}
.footer-base p { margin: 0 0 8px; }

/* --------------------------------------------------------------------------
   The pain strip. Three cards, one line each, and on a phone they swipe
   sideways rather than stacking into a wall of text.
   -------------------------------------------------------------------------- */

.section-lede { margin-top: 16px; max-width: 46em; }

.pains { list-style: none; margin: 32px 0 0; padding: 0; }

@media (max-width: 767px) {
  .pains {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pains::-webkit-scrollbar { display: none; }
  .pain { flex: 0 0 82%; scroll-snap-align: start; }
}

@media (min-width: 768px) {
  .pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.pain { border-top: 6px solid var(--black); padding-top: 16px; }
.pain h3 { margin-bottom: 10px; }
.pain p { color: var(--muted); }

/* --------------------------------------------------------------------------
   Trust badges. Four, one line each.
   -------------------------------------------------------------------------- */

.badges { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 640px) { .badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .badges { grid-template-columns: repeat(4, 1fr); } }

.badge {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--black);
  padding: 20px;
}
.badge h3 { margin-bottom: 10px; }
.badge p { color: var(--muted); font-size: 16px; line-height: 21px; }

/* --------------------------------------------------------------------------
   The tick and the cross in the comparison table. Drawn as background images
   so there is no icon font and no extra request.
   -------------------------------------------------------------------------- */

.mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.mark--yes {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23fff400' stroke-width='3'/%3E%3C/svg%3E");
}
.mark--no {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%23b7b4b5' stroke-width='3'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   The missed call calculator. Two sliders and the sum in black and white.
   The figures are the person's own; the page never guesses for them.
   -------------------------------------------------------------------------- */

.calc-grid { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .calc-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
}

.calc {
  background: #fff;
  border: 1px solid var(--black);
  border-top: var(--bar) solid var(--black);
  padding: 24px;
}

.calc-field { margin-bottom: 24px; }

.calc-row { display: flex; align-items: center; gap: 16px; }

.calc-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--black);
  cursor: pointer;
}

.calc-value {
  flex: none;
  min-width: 88px;
  text-align: right;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  color: var(--black);
}

.calc-result { font-size: 18px; line-height: 24px; margin: 0 0 8px; }
.calc-result strong {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
}
.calc-note { font-size: 13px; line-height: 19px; color: var(--tertiary); margin-bottom: 20px; }
.calc .btn { width: 100%; }

/* --------------------------------------------------------------------------
   The button under his thumb. Phones only, and only once the hero is behind
   you. It is never shown on a desktop, where the header button is in reach.
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px var(--gutter);
  background: var(--black);
  border-top: 1px solid var(--hairline-dark);
  transform: translateY(110%);
  transition: transform .2s ease;
}

.sticky-cta[hidden] { display: none; }

@media (max-width: 859px) {
  .sticky-cta { display: flex; }
  .sticky-cta.is-visible { transform: translateY(0); }
}

/* One centred button rather than a full width bar. Pete's call 2026-09-22:
   with the promise line beside it the bar read as two things at thumb size,
   so the line is gone and the button sits in the middle. */
.sticky-cta .btn { flex: 0 1 auto; min-width: 70%; }

/* Nothing should sit under the modal, the sticky bar included. */
body.modal-open .sticky-cta { display: none; }

/* --------------------------------------------------------------------------
   Phone targets. A 48px minimum on anything a thumb has to hit, because this
   page gets read one-handed in the rain with the brightness flat out.
   -------------------------------------------------------------------------- */

@media (max-width: 859px) {
  .btn--lg { height: 52px; font-size: 15px; }
  .btn--sm { height: 44px; }
  input, select { height: 48px; }
  .modal-close { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   The spacing in "See it in 30 seconds" on a phone. These have to sit at the
   end of the file: the base rules for the dots and the reveal are declared
   further down than the carousel, so a media query next to the carousel loses
   to them. Learned the hard way on 2026-09-22, by measuring rather than by eye.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .carousel-dots { margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   The header on a phone. The button goes, because the same button is pinned to
   the bottom of the screen and sits on the closing block, so the top one was
   the third of three. What is left is the mark on its own. Pete's call,
   2026-09-22.
   -------------------------------------------------------------------------- */

@media (max-width: 859px) {
  .header-inner { justify-content: center; gap: 0; }
  .header-inner > .btn { display: none; }
  /* The nav list is already hidden here, but its wrapper is a plain block, so
     it stayed in the flex line and its gap pushed the mark off centre. */
  .header-inner > nav { display: none; }
}

/* --------------------------------------------------------------------------
   The privacy page. Long prose, so it gets a narrower measure than the landing
   page and open headings rather than cards: a wall of boxes is harder to scan
   than a wall of text. Added 2026-09-23 with privacy.html.
   -------------------------------------------------------------------------- */

.legal { max-width: 42em; }

.legal h2 {
  margin: 40px 0 12px;
  color: var(--black);
}
.legal > h2:first-child { margin-top: 0; }

.legal p { color: var(--muted); }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { color: var(--muted); margin-bottom: 8px; }
.legal strong { color: var(--black); }
.legal a {
  color: var(--black);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.legal a:hover { border-bottom-color: var(--black); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  background: var(--grey-3);
  padding: 1px 4px;
}
.legal p:last-child, .legal ul:last-child { margin-bottom: 0; }

/* The object switch, on the privacy page only. */
.optout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--black);
  padding: 20px;
  margin: 24px 0 8px;
  max-width: 42em;
}
.optout-state { font-weight: 600; color: var(--black); margin-bottom: 12px; }