/* ==========================================================================
   Determined Diabetic — Action Plan funnel
   Tokens from the DD design system. Athletic, not medical: black structure,
   one loud red, heavy uppercase Poppins, brushed-metal accents.
   ========================================================================== */

:root {
  --dd-black: #000000;
  --dd-ink: #0A0A0A;
  --dd-graphite: #1C1C1C;
  --dd-charcoal: #3A3A3A;
  --dd-slate: #4A5560;
  --dd-steel: #7A92A5;
  --dd-silver: #C9CCCE;
  --dd-mist: #EDECEB;
  --dd-paper: #FAFAF9;
  --dd-white: #FFFFFF;

  --dd-red-50: #FDECED;
  --dd-red-100: #FAD4D6;
  --dd-red-300: #E8646A;
  --dd-red-500: #DB3544;
  --dd-red-600: #C41818;
  --dd-red-700: #980000;
  --dd-red-900: #4A0000;

  --dd-green-600: #069B6C;
  --dd-green-50: #E6F5EF;

  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Nunito Sans', Arial, Helvetica, sans-serif;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.14);
  --shadow-brand: 0 6px 18px rgba(196,24,24,.32);

  --gradient-metal: linear-gradient(180deg, #F4F3F2 0%, #DEDDDB 46%, #EDECEB 54%, #CFCECC 100%);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --wrap: 1080px;
  --narrow: 660px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--dd-black);
  background: var(--dd-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0 0 1em; text-wrap: pretty; }

/* height:auto is load-bearing: every image carries width/height attributes to
   reserve space, and without it max-width squashes the picture. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--dd-red-700); }

:focus-visible { outline: 3px solid var(--dd-red-600); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: 12px;
  color: var(--dd-white);
  background: var(--dd-red-700);
  border-radius: 999px;
  padding: 7px 14px 6px;
  margin: 0 0 14px;
  display: inline-block;
}

/* ---------------------------------------------------------------- header -- */

.site-header {
  background: var(--dd-black);
  color: var(--dd-white);
  border-bottom: 3px solid var(--dd-red-700);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand img { width: 40px; height: 40px; border-radius: 8px; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.brand-text .b1 { font-size: 17px; letter-spacing: -0.01em; }
.brand-text .b2 { font-size: 9.5px; letter-spacing: var(--tracking-wider); color: var(--dd-red-500); }

/* ---------------------------------------------------------- progress bar -- */
/* Same concept as the Optimally funnel: a bare row of thin segments, one per
   micro-step, no labels and no numbers. Trivial on purpose. */

.progress {
  display: flex;
  gap: 6px;
  max-width: var(--narrow);
  margin: 22px auto 0;
  padding: 0 24px;
}
.progress span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--dd-mist);
  transition: background .3s var(--ease);
}
.progress span.on { background: var(--dd-red-700); }

/* ------------------------------------------------------------------ CTA -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 19px 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  text-decoration: none;
  color: var(--dd-white);
  background: var(--dd-red-700);
  box-shadow: var(--shadow-brand);
  transition: background .12s var(--ease), transform .12s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--dd-red-600); }
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }
.btn-xl { padding: 24px 56px; font-size: 19.5px; }

.cta-under {
  font-size: 14px;
  color: var(--dd-slate);
  margin: 14px 0 0;
  line-height: 1.5;
}
.trust-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--dd-slate);
  text-align: center;
  margin: 26px auto 0;
  padding: 0 20px;
}

/* ----------------------------------------------------------------- hero -- */

/* The funnel drives every screen with the hidden attribute, and several of
   those elements are laid out with display:grid or flex. An author display
   rule beats the user agent's [hidden] rule, so without this a "hidden" form
   keeps its space and leaves a void where it used to be. */
[hidden] { display: none !important; }

/* Tight by design: the ask has to be near the top on a phone. The old
   50px/26px plus a 30px margin under the subhead plus the zone padding put
   54px of dead air between the subheadline and the first question. */
.hero { padding: 14px 0 0; text-align: center; }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 21em;
  margin: 0 auto;
}
.hero h1 .accent { color: var(--dd-red-700); }
.hero h1 .plan {
  color: var(--dd-red-700);
  white-space: nowrap;
  background-image: linear-gradient(0deg, var(--dd-red-100), var(--dd-red-100));
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 88%;
}
.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--dd-charcoal);
  margin: 22px auto 30px;
  max-width: 36em;
}
@media (max-width: 720px) { .hero { padding: 42px 0 20px; } }

/* -------------------------------------------------------------- carousel -- */

.carousel { max-width: 980px; margin: 52px auto 0; position: relative; }

.car-frame {
  overflow: hidden;
  position: relative;
  padding: 18px 0 8px; /* room for card shadows, which overflow:hidden would clip */
}
/* Edge fades so the peeking side slides melt into the page instead of cutting off */
.car-frame::before, .car-frame::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.car-frame::before { left: 0; background: linear-gradient(90deg, var(--dd-white), rgba(255,255,255,0)); }
.car-frame::after { right: 0; background: linear-gradient(270deg, var(--dd-white), rgba(255,255,255,0)); }

.car-track {
  display: flex;
  transition: transform .55s var(--ease);
  will-change: transform;
}
.car-slide {
  flex: none;
  width: 360px;
  max-width: 82vw;
  padding: 0 12px;
  margin: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  opacity: .35;
  transform: scale(.9);
}
.car-slide.cur { opacity: 1; transform: scale(1); }
.car-card {
  background: var(--dd-white);
  border: 1px solid var(--dd-mist);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.car-card img { width: 100%; }
.car-cap {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--dd-slate);
  text-align: center;
  padding: 14px 10px 16px;
  border-top: 1px solid var(--dd-mist);
  background: var(--dd-white);
  margin: 0;
}
.car-dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.car-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--dd-silver);
  cursor: pointer;
  padding: 0;
  transition: all .2s var(--ease);
}
.car-dot.on { background: var(--dd-red-700); transform: scale(1.3); }
.carousel.compact { max-width: 760px; margin-top: 44px; }
.carousel.compact .car-slide { width: 290px; }

/* -------------------------------------------------------------- questions -- */

.qzone { padding: 16px 0 40px; }
.qzone h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); text-align: center; }
/* Count on the left, time expectation on the right, one line. The pill is
   what tells somebody this is short: without it the panel is just questions
   with no end in sight. */
.q-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.qcount {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--dd-steel);
  margin: 0;
  white-space: nowrap;
}
.qpill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--dd-red-700); background: var(--dd-red-50);
  border: 1.5px solid var(--dd-red-600); border-radius: 999px;
  padding: 5px 10px; white-space: nowrap;
}
/* A form reads left. Centred question text inside a panel reads as a poster,
   which is exactly why it did not look like something to fill in. */
.qtitle { font-size: clamp(1.15rem, 2.4vw, 1.45rem); text-align: left; margin-bottom: 14px; font-weight: 700; }

/* The questions ARE the form on this page, so they get the same panel
   treatment as the lead form: offset ground, defined edge, soft lift, white
   controls inside. Loose buttons on the page background read as body copy and
   nothing says "this is the thing to fill in". Scoped to the three question
   steps so the contact and booking steps keep their own layout. */
#step-q1, #step-q2, #step-q3 {
  max-width: 560px; margin: 0 auto;
  background: var(--dd-paper);
  border: 2px solid var(--dd-charcoal);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .06);
}
.qopts { display: grid; gap: 10px; max-width: 560px; margin: 0 auto; }
.qopts.yn .qopt.no { border-color: #E9D2CE; }
.qopt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--dd-white);
  border: 2px solid var(--dd-mist);
  border-radius: var(--radius-lg);
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--dd-black);
  cursor: pointer;
  transition: all .12s var(--ease);
  /* A ring breathes out from each option so the list says "tap one of these"
     without a line of copy saying it. Staggered so the group feels alive
     rather than blinking in unison, and delayed ~1s so it reads as an
     invitation after the question has been read, not as the page loading.
     Deliberately NOT behind prefers-reduced-motion: Reuben's OS reports
     reduce, so gating it means nobody reviewing the funnel ever sees it, and
     a ring fading in place carries none of the vestibular risk that setting
     exists for. */
}
#step-q1 .qopt { animation: ddhalo 3.6s ease-in-out 1s infinite; }
@keyframes ddhalo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 24, 24, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(196, 24, 24, .10); }
}
#step-q1 .qopt:nth-child(2) { animation-delay: 1.25s; }
#step-q1 .qopt:nth-child(3) { animation-delay: 1.5s; }
#step-q1 .qopt:nth-child(4) { animation-delay: 1.75s; }
#step-q1 .qopt:nth-child(5) { animation-delay: 2s; }
#step-q1 .qopt.sel { animation: none; }
@media (hover: hover) and (pointer: fine) {
  .qopt:hover { border-color: var(--dd-red-700); background: var(--dd-red-50); }
}
.qopt.sel {
  border-color: var(--dd-red-700);
  background: var(--dd-red-50);
  box-shadow: inset 0 0 0 1px var(--dd-red-700);
}

.qnav { max-width: 560px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.qback {
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--dd-slate);
  cursor: pointer;
  padding: 4px;
}
.qback:hover { color: var(--dd-black); }
.qstep { display: none; }
.qstep.on { display: block; }

/* ----------------------------------------------------------------- form -- */

.formzone { padding: 56px 0 40px; }
.formzone h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); text-align: center; margin-bottom: 34px; }

/* The form is the ask, so it has to look like a thing rather than dissolve
   into the page. Offset ground, defined edge, soft lift, white fields inside
   so the inputs pop out of the panel. */
.lead-form {
  max-width: 480px; margin: 0 auto; display: grid; gap: 13px;
  background: var(--dd-paper);
  border: 1.5px solid var(--dd-mist);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .06);
}
.autonote {
  text-align: center; font-size: 12.5px; color: var(--dd-slate); margin: 2px 0 0;
}
.f label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--dd-charcoal);
  margin-bottom: 5px;
}
.f label .req { color: var(--dd-red-700); }
.f input {
  width: 100%;
  border: 2px solid var(--dd-mist);
  border-radius: var(--radius-lg);
  background: var(--dd-white);
  padding: 15px 16px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--dd-black);
  transition: border-color .12s var(--ease);
}
.f input:focus { outline: none; border-color: var(--dd-red-700); }
.f input::placeholder { color: #9AA3AB; }
.f.err input { border-color: var(--dd-red-600); background: var(--dd-red-50); }
.f .msg { font-size: 12.5px; color: var(--dd-red-700); margin-top: 6px; display: none; }
.f.err .msg { display: block; }

/* ---------------------------------------------------------------- booking -- */

.bookzone { padding: 26px 0 60px; }
.bookzone h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); text-align: center; }
.bookzone h1 .accent { color: var(--dd-red-700); }
.book-sub {
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 700;
  color: var(--dd-charcoal);
  max-width: 30em;
  margin: 12px auto 0;
  line-height: 1.45;
}
.book-sub .red { color: var(--dd-red-700); }

/* Specialists: overlapping face row above the calendar */
/* Faces and who they are on ONE line. Stacked (avatars, then a caption
   under them) it cost two rows and a lot of height on the screen where the
   calendar needs the room. */
.host-rail {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 480px; margin: 12px auto 10px;
}
.host-who { text-align: left; line-height: 1.25; }
.host-who b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 13.5px; color: var(--dd-black);
}
.host-who span { display: block; font-size: 12.5px; color: var(--dd-slate); }
/* Duration, location and timezone on one line, so what the meeting IS is
   answered before anyone picks a time. */
.bk-metas {
  display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center;
  gap: 6px; max-width: 480px; margin: 0 auto 4px;
}
.bk-meta {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 9px; background: var(--dd-paper);
  border: 1px solid var(--dd-mist); border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--dd-graphite); white-space: nowrap;
}
.bk-meta svg { stroke: var(--dd-red-700); flex: none; }
.bk-meta-tz { flex: 1 1 auto; min-width: 0; }
.bk-meta-tz select {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--dd-graphite);
  border: none; background: transparent; width: 100%; min-width: 0; cursor: pointer;
}
.spec-row { display: flex; align-items: center; flex: none; }
.spec-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--dd-white);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  background: var(--dd-mist);
}
.spec-av + .spec-av { margin-left: -14px; }
.spec-caption {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--dd-slate);
  margin: 0 0 18px;
}

.free-line {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--dd-green-600);
  margin: 20px 0 0;
}

/* Locked until the details are in: on view the whole time so nothing feels
   bolted in front of the calendar they came for, but not usable yet. */
.cal-shell { position: relative; }
.cal-lock { display: none; }
.cal-shell.locked .cal-lock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; inset: 0; z-index: 2; text-align: center; padding: 24px;
  background: rgba(255, 255, 255, .82);
  font-size: 14px; color: var(--dd-slate); line-height: 1.45;
}
.cal-shell.locked .cal-lock b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 15px; color: var(--dd-red-700); margin-bottom: 4px;
}
.cal-shell.locked .bk, .cal-shell.locked .cal-placeholder { opacity: .45; pointer-events: none; }
.cal-shell {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--dd-mist);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--dd-white);
  /* the booker used to sit flush against this border */
  padding: 20px 18px 22px;
}
.cal-placeholder { padding: 44px 32px; text-align: center; background: var(--dd-paper); }
.cal-placeholder h3 { font-size: 19px; margin-bottom: 12px; }
.cal-placeholder p { color: var(--dd-slate); font-size: 15px; max-width: 40em; margin: 0 auto 10px; }
.cal-placeholder code { background: var(--dd-mist); padding: 3px 8px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; }

/* ------------------------------------------------------------ confirmation -- */

.confirm-hero { padding: 62px 0 26px; text-align: center; }
.confirm-tick {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--dd-green-600);
  margin: 0 auto 26px;
  position: relative;
}
.confirm-tick::after {
  content: '';
  position: absolute;
  left: 24px; top: 16px;
  width: 15px; height: 28px;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(42deg);
}
.confirm-hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.confirm-hero p { font-size: 18px; color: var(--dd-charcoal); max-width: 33em; margin: 18px auto 0; }

.booked-when {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--dd-black);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 16px 26px;
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.booked-when .cal-ico {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--dd-red-700);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
}

.diary-band { background: var(--dd-black); color: var(--dd-white); padding: 76px 0 84px; margin-top: 60px; text-align: center; }
.diary-band h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.diary-band .band-sub { color: rgba(255,255,255,.72); font-size: 17.5px; max-width: 34em; margin: 16px auto 30px; }
.diary-note { font-size: 13.5px; color: rgba(255,255,255,.55); max-width: 42em; margin: 22px auto 0; line-height: 1.6; }

.shots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 44px auto 0;
}
.shot {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 10px;
}
.shot img { border-radius: var(--radius-md); }
.shot figcaption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgba(255,255,255,.6);
  padding: 10px 2px 4px;
}
@media (max-width: 860px) { .shots { grid-template-columns: repeat(3, minmax(0,1fr)); } .shot:nth-child(n+4) { display: none; } }
@media (max-width: 520px) { .shots { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } }

/* ------------------------------------------------------------- brand line -- */

.brand-line {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  padding: 44px 24px;
  background: var(--gradient-metal);
  border-top: 1px solid var(--dd-silver);
}
.brand-line .red { color: var(--dd-red-700); }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--dd-black);
  color: rgba(255,255,255,.46);
  padding: 44px 0 40px;
  font-size: 12px;
  line-height: 1.65;
}
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer p { margin: 0 0 12px; max-width: 82ch; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer strong { color: rgba(255,255,255,.72); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* One deliberate exception. The option halo is not motion: nothing moves,
     scales or changes position, it is a ring fading in and out in place, so it
     carries none of the vestibular risk this preference exists for. It is also
     the whole affordance telling people the options are tappable, and Reuben's
     own OS reports `reduce`, so the blanket reset above meant nobody reviewing
     the funnel ever saw it. */
  #step-q1 .qopt { animation-duration: 3.6s !important; }
}


/* ==========================================================================
   Booking calendar - ported from the Optimally booking-first funnel.
   Mechanics that matter: a 7-day strip rather than a month grid (the month
   view wasted vertical space), the first open day auto-selected so times are
   visible without a tap, a slot list that grows the page instead of scrolling
   internally, and a tapped slot that splits in place into time + Confirm.
   ========================================================================== */
.bk { margin-top: 2px; }
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bk-month { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: var(--tracking-tight); }
.bk-nav { display: flex; gap: 6px; }
.bk-nav button {
  width: 36px; height: 36px; border: 1px solid var(--dd-mist); background: var(--dd-white);
  border-radius: 10px; font-size: 19px; line-height: 1; cursor: pointer; color: var(--dd-graphite);
}
.bk-nav button[disabled] { opacity: .35; cursor: default; }
.bk-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Nothing to page: the cells shown are already the next three open days. */
.bk-nav { display: none; }
.bk-day {
  border: 1.5px solid var(--dd-mist); background: var(--dd-white); border-radius: 12px;
  padding: 10px 0 11px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: inherit; cursor: default; color: var(--dd-silver);
}
.bk-day .dw { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bk-day b { font-size: 17px; font-weight: 800; line-height: 1; }
.bk-day.av { color: var(--dd-graphite); border-color: #DFDEDC; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .bk-day.av:hover { background: var(--dd-paper); }
}
.bk-day.sel { background: var(--dd-red-50); border-color: var(--dd-red-600); color: var(--dd-red-700); }
.bk-day .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dd-red-600); }

.bk-tz { display: flex; align-items: center; gap: 7px; margin: 10px 0 2px; font-size: 13px; color: var(--dd-slate); }
.bk-tz select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--dd-graphite);
  border: 1px solid var(--dd-mist); border-radius: 8px; padding: 5px 8px; background: var(--dd-white);
}
.bk-slots { display: grid; gap: 8px; margin-top: 10px; }
.bk-slot {
  width: 100%; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  padding: 15px 14px; border-radius: 12px; border: 1.5px solid var(--dd-mist);
  background: var(--dd-white); color: var(--dd-graphite); cursor: pointer; text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .bk-slot:hover { border-color: var(--dd-silver); background: var(--dd-paper); }
}
/* the tapped slot becomes [time | Confirm] side by side - no modal, no extra row */
.bk-pair { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; }
.bk-pair .bk-slot { cursor: default; border-color: var(--dd-red-600); color: var(--dd-red-700); background: var(--dd-red-50); }
.bk-go {
  font: inherit; font-family: var(--font-display); font-weight: 800; font-size: 16px;
  border: 0; border-radius: 12px; background: var(--dd-red-700); color: var(--dd-white);
  cursor: pointer; padding: 15px 12px;
  /* slides in beside the picked time rather than appearing on top of it */
  animation: ddConfirmIn 180ms var(--ease) both;
}
@keyframes ddConfirmIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
.bk-go:active { transform: scale(.985); }
.bk-go[disabled] { opacity: .6; cursor: default; }
.bk-note { margin-top: 12px; font-size: 13.5px; color: var(--dd-slate); text-align: center; }
.bk-err { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--dd-red-700); text-align: center; }

#dd-sealed-tag {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 2147483647;
  background: #7A2E14; color: #FFE9C7; pointer-events: none;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}


/* -------------------------------------------------- non-linear progress ---
   Pinned, percentage-labelled, and deliberately not proportional to step
   count: 40 on arrival, then 60 / 75 / 85 / 90, so the first taps feel like
   movement and the last step feels within reach. Red on the final screen. */
.progresswrap {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 11px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px;
  background: rgba(250, 250, 249, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dd-mist);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/* Brand inside the pinned bar. width:auto on the mark is not optional: the
   width/height attributes hold the aspect ratio, and setting only height in
   CSS leaves the attribute width in force and stretches it. */
.pw-brand { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; }
.pw-brand img { height: 30px; width: auto; display: block; }
.pw-brand-text { display: flex; flex-direction: column; line-height: 1; }
.pw-brand-text .b1 {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: .01em; color: var(--dd-black); text-transform: uppercase;
}
.pw-brand-text .b2 {
  font-family: var(--font-display); font-weight: 800; font-size: 9.5px;
  letter-spacing: .16em; color: var(--dd-red-700); text-transform: uppercase; margin-top: 2px;
}
@media (max-width: 330px) { .pw-brand-text { display: none; } }
/* no clearance needed now the bar is sticky rather than fixed - it takes its
   own space in the flow instead of overlaying the header */
.progressbar { flex: 1; height: 8px; border-radius: 4px; background: var(--dd-mist); overflow: hidden; }
.progressbar i {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--dd-red-700), var(--dd-red-500));
  transition: width .5s cubic-bezier(.3,.8,.3,1), background .3s ease;
}
.progresswrap.final .progressbar i { background: linear-gradient(90deg, #8A6A00, #C9A227); }
.progresspct {
  flex: none; font-family: var(--font-display); font-size: 14px; font-weight: 800;
  color: var(--dd-red-700); font-variant-numeric: tabular-nums; transition: color .3s ease;
}
.progresswrap.final .progresspct { color: #8A6A00; }

/* --------------------------------------------------------- phone chip ---- */
.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-row .cc-chip { flex: none; }
.phone-row input { flex: 1; min-width: 0; }
.cc-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  background: var(--dd-white); border: 1.5px solid var(--dd-mist); border-radius: 12px;
  padding: 0 12px; font-size: 15px; font-weight: 700; color: var(--dd-graphite); cursor: pointer;
}
.cc-chip:focus-within { border-color: var(--dd-red-600); box-shadow: 0 0 0 3px rgba(196,24,24,.14); }
.cc-caret { font-size: 10px; color: var(--dd-steel); }
/* an invisible native select stretched over the chip: one tap into the OS
   picker, no custom dropdown to get wrong on mobile */
.cc-chip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

.bk-day .dm { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }


/* ---------------------------------------------------------- hacker popup ---
   Competitors fill client funnels with junk to scrape the flow. Telling them
   they are blocked just motivates a device switch, so the popup names the
   behaviour and offers no way forward. */
.hk-ol {
  position: fixed; inset: 0; z-index: 2147483000; background: var(--dd-white);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.hk-ol[hidden] { display: none !important; }
.hk-card { max-width: 420px; text-align: center; }
.hk-emoji { font-size: 42px; margin-bottom: 10px; }
.hk-card h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(21px, 6vw, 26px); line-height: 1.28; margin-bottom: 12px;
}
.hk-card h3 b { color: var(--dd-red-700); text-transform: uppercase; }
.hk-card p { font-size: 16px; color: var(--dd-slate); line-height: 1.5; margin-bottom: 10px; }


/* ------------------------------------------------------- step swapping ----
   Lived in personalise.html's own <style> block until the landing page and the
   flow were merged into one document. Without it every step renders at once. */
.fstep { display: none; animation: slideIn .28s ease both; }
.fstep.active { display: block; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .fstep { animation: none; } }