/* ══════════════════════════════════════════
   FOR DOCTORS — standalone pitch page shown during field visits
   Self-contained: this page does not load app.css / critical.css,
   so the shared tokens and reset are declared here.
   ══════════════════════════════════════════ */

:root {
  --blue: #1A56DB; --teal: #0CB8A0; --teal-dark: #089882; --teal-a11y: #067A68;
  --navy: #0E2A5E; --bg: #F4F8FF; --white: #fff;
  --text: #0E1F3D; --muted: #5B6F8A; --border: #DDE8F5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
.fd-body {
  font-family: 'Plus Jakarta Sans', -apple-system, Segoe UI, sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block }
a { color: inherit }

/* container scales with the viewport: narrower on small screens, wider on large */
.fd-inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px }
@media (min-width: 1500px) { .fd-inner { max-width: 1460px; padding: 0 40px } }
@media (min-width: 1700px) { .fd-inner { max-width: 1620px; padding: 0 44px } }
@media (min-width: 1900px) { .fd-inner { max-width: 1780px; padding: 0 48px } }

/* ── Slim brand bar (replaces the site nav) ── */
.fd-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.fd-topbar-in { display: flex; align-items: center; gap: 16px; height: 88px }
.fd-brand { display: flex; align-items: center; flex-shrink: 0 }
/* the source image carries generous internal padding, so it is sized like
   the site nav (87px) rather than to its visual cap-height */
.fd-brand img { width: auto; height: 76px; -o-object-fit: contain; object-fit: contain }
.fd-topbar-tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  border-left: 1px solid var(--border); padding-left: 16px;
}
.fd-topbar-cta { margin-left: auto }

/* ── Slim footer (replaces the site footer) ── */
.fd-foot { background: var(--white); border-top: 1px solid var(--border); padding: 22px 0 }
.fd-foot-in {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.fd-foot-brand { font-weight: 800; color: var(--navy) }
.fd-foot-sep { color: var(--border) }
.fd-foot-spacer { flex: 1 }
.fd-foot-in a { color: var(--muted); text-decoration: none; font-weight: 600 }
.fd-foot-in a:hover { color: var(--blue) }

/* ── Shared type ── */
.fd-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-a11y);
}
.fd-eyebrow.light { color: #7FF0DC }

.fd-h1 {
  /* sized so the first sentence holds on one line down to a ~1280px window */
  font-size: clamp(28px, 3vw, 41px);
  font-weight: 800; line-height: 1.14;
  letter-spacing: -.02em; color: var(--navy);
  margin-top: 14px; text-wrap: balance;
}

/* Brand gradient for the accented text — the blue-to-teal used by the buttons */
.fd-grad, .fd-h1 em, .fd-fact-k {
  background: linear-gradient(100deg, var(--blue) 0%, #2b74e6 42%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.fd-h1 em { font-style: normal; display: inline-block }

.fd-h2 {
  font-size: 28px; font-weight: 800; line-height: 1.22;
  letter-spacing: -.015em; color: var(--navy); text-wrap: balance;
}
.fd-h2.light { color: #fff }

.fd-lede {
  font-size: 17px; line-height: 1.6; color: var(--muted);
  max-width: 66ch; margin-top: 16px;
}
.fd-sub { font-size: 15px; color: var(--muted); max-width: 70ch; margin-top: 4px }

.fd-sec-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px }
.fd-sec-head.spaced { margin-top: 54px }

/* ── Hero ── */
.fd-hero {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(26,86,219,.09), transparent 42%),
    radial-gradient(circle at 92% 12%, rgba(12,184,160,.10), transparent 40%),
    var(--white);
  border-bottom: 1px solid var(--border);
  padding: 56px 0 50px;
  /* keeps the ambient glow and the decorative icons from adding scroll width */
  overflow: hidden;
}

/* ── Hero icon field ──
   Atmosphere only. Each icon is placed by percentage and drifts on its own
   long, offset cycle so the field never pulses in unison — at 5–7% opacity
   the effect should register as texture, not as moving objects. */
.fd-hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none }
.fd-deco {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2);          /* centre on the coordinate */
  animation: fdDecoFloat 13s ease-in-out infinite;
  animation-delay: var(--d);
  will-change: transform;
}
.fd-deco svg { width: 100%; height: 100%; display: block }
.fd-deco.blue { color: var(--blue); opacity: .17 }
.fd-deco.teal { color: var(--teal); opacity: .20 }

@keyframes fdDecoFloat {
  0%, 100% { transform: rotate(var(--r)) translateY(0) }
  50%      { transform: rotate(var(--r)) translateY(-11px) }
}
.fd-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: 64px; align-items: center;
}

.fd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.fd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; font-weight: 700; color: var(--navy);
}
.fd-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0 }

.fd-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }

.fd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
  white-space: nowrap;
}
.fd-btn.primary {
  background: linear-gradient(135deg, var(--blue), var(--teal));
  color: #fff; box-shadow: 0 6px 20px rgba(26,86,219,.26);
}
.fd-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(26,86,219,.34) }
.fd-btn.ghost {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--border);
}
.fd-btn.ghost:hover { border-color: var(--blue); color: var(--blue) }
.fd-btn.lg { padding: 14px 30px; font-size: 15px; margin-top: 22px }
.fd-btn.sm { padding: 9px 18px; font-size: 13.5px; border-radius: 9px }
.fd-btn:focus-visible { outline: 3px solid rgba(26,86,219,.4); outline-offset: 2px }

/* ══ HERO VISUAL — a 12s three-screen demo of one patient enquiry ══
   Every animation runs on the same 12s clock, so the scenes stay in step:
     SCREEN 1  0.0–4.1s   search — the query types itself, anonymous results
                          settle in, then "Your practice" drops into first
                          place; a tap lands on it and the screen slides
     SCREEN 2  4.1–6.6s   the profile the patient opened — kept short, it is
                          the step the doctor already understands
     SCREEN 3  6.6–11.6s  the call arriving on the clinic phone, held 5s:
                          this is the moment worth looking at
     11.6–12s  fade, reset to screen 1, loop                                 */
.fd-visual { display: flex; flex-direction: column; align-items: center; gap: 20px }

.fd-stage {
  position: relative;
  width: 292px; max-width: 100%;
  display: flex; justify-content: center;
  perspective: 1300px; perspective-origin: 50% 42%;
  animation: fdHover 9s ease-in-out infinite;
}
/* the drift stops while the pointer is on it, so the hover pose reads cleanly */
.fd-stage:hover { animation-play-state: paused }

.fd-glow {
  position: absolute; inset: -14% -26%;
  background:
    radial-gradient(circle at 30% 28%, rgba(26,86,219,.24), transparent 62%),
    radial-gradient(circle at 74% 76%, rgba(12,184,160,.26), transparent 62%);
  filter: blur(28px); z-index: 0;
  animation: fdGlow 12s ease-in-out infinite;
}
/* a second, stronger glow that blooms open only on hover */
.fd-glow::after {
  content: ''; position: absolute; inset: -8%;
  background:
    radial-gradient(circle at 32% 26%, rgba(26,86,219,.40), transparent 60%),
    radial-gradient(circle at 72% 78%, rgba(12,184,160,.42), transparent 60%);
  opacity: 0; transform: scale(.88);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.25,1);
}
.fd-stage:hover .fd-glow::after { opacity: 1; transform: scale(1.12) }

/* ── Device ── */
.fd-phone {
  position: relative; z-index: 2;
  width: 292px; border-radius: 46px;
  /* brushed metal rail: light along the top-left edge, dark on the bottom-right */
  background: linear-gradient(150deg, #33445f 0%, #16243c 18%, #0c1628 55%, #1b2b45 100%);
  padding: 10px;
  box-shadow:
    0 30px 66px rgba(9,20,42,.36),
    0 2px 5px rgba(9,20,42,.30),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 0 rgba(255,255,255,.22) inset;
  /* At rest the device sits turned away. On hover the pose is driven by these
     four variables, which the pointer-tracking script rewrites as the mouse
     moves, so the phone leans towards whichever side the cursor is on. */
  --ty: -13deg;   /* rotateY  */
  --tx: 5deg;     /* rotateX  */
  --mx: 0px;      /* sideways shift towards the cursor */
  --lift: 0px;
  --scale: 1;
  transform: translate3d(var(--mx), var(--lift), 0)
             rotateY(var(--ty)) rotateX(var(--tx)) scale(var(--scale));
  transform-origin: 50% 50%;
  transition: transform .85s cubic-bezier(.2,.85,.25,1), box-shadow .85s ease;
}
.fd-stage:hover .fd-phone {
  --ty: 0deg; --tx: 0deg; --lift: -14px; --scale: 1.05;
  box-shadow:
    0 54px 100px rgba(9,20,42,.42),
    0 4px 10px rgba(9,20,42,.28),
    0 0 0 1px rgba(255,255,255,.20) inset,
    0 1px 0 rgba(255,255,255,.34) inset;
}
/* while the pointer is actually moving over it, the pose must keep up */
.fd-stage.is-tracking .fd-phone {
  transition: transform .14s cubic-bezier(.3,.8,.4,1), box-shadow .5s ease;
}

/* Side buttons on the rail */
.fd-btn-side {
  position: absolute; width: 2.5px; border-radius: 3px;
  background: linear-gradient(180deg, #3d4f6b, #1b2942);
}
.fd-btn-side.vol-up { left: -2px; top: 96px;  height: 30px }
.fd-btn-side.vol-dn { left: -2px; top: 134px; height: 30px }
.fd-btn-side.power  { right: -2px; top: 110px; height: 46px }

.fd-screen {
  position: relative; overflow: hidden;
  background: var(--white); border-radius: 37px;
  padding: 9px 12px 10px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 430px;
}

/* Camera island, sitting over the top of the screen */
.fd-island {
  position: absolute; top: 9px; left: 50%; translate: -50% 0; z-index: 5;
  width: 74px; height: 20px; border-radius: 99px;
  background: #0a1424;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fd-island::after {
  content: ''; position: absolute; right: 13px; top: 50%; translate: 0 -50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #2b3f5e, #060c17 70%);
}

/* Glass sheen across the screen */
.fd-gloss {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.42) 0 26%, rgba(255,255,255,0) 46%);
  opacity: .55;
  transition: opacity .6s ease;
}
/* a band of light that runs across the glass once, on hover */
.fd-gloss::after {
  content: ''; position: absolute; inset: -30% -55%;
  background: linear-gradient(104deg,
    transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%);
  transform: translateX(-72%); opacity: 0;
}
.fd-stage:hover .fd-gloss { opacity: .3 }
.fd-stage:hover .fd-gloss::after { animation: fdSweep 1.15s cubic-bezier(.35,.7,.3,1) }

/* the screen sits slightly dimmed until the pointer wakes it */
.fd-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: rgba(9,20,42,.09);
  transition: opacity .6s ease;
}
.fd-stage:hover .fd-screen::after { opacity: 0 }

/* iOS-style status bar */
.fd-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 0; color: var(--navy);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fd-status-time { padding-left: 3px }
.fd-status-ic { display: flex; align-items: center; gap: 5px; opacity: .82 }

.fd-home {
  position: absolute; bottom: 7px; left: 50%; translate: -50% 0; z-index: 5;
  width: 106px; height: 4px; border-radius: 99px; background: #C3CEDE;
}

/* ── The three screens, sliding as one strip ── */
/* The viewport stays put and does the clipping; the strip inside it slides.
   Clipping on the strip itself would move the window along with the content,
   leaving the screen blank once it slid away. */
.fd-viewport { flex: 1; min-height: 0; overflow: hidden; display: flex }
/* The strip is pinned to exactly one screen width — without this it takes its
   width from its own content (three screens) and every scene ends up 3x wide. */
.fd-scenes {
  display: flex; flex: 0 0 100%; width: 100%; min-height: 0;
  animation: fdScenes 12s cubic-bezier(.65,0,.25,1) infinite;
}
.fd-scene {
  flex: 0 0 100%; width: 100%; min-width: 100%;
  display: flex; flex-direction: column; gap: 10px;
}

.fd-app-bar {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; color: var(--navy);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.fd-app-city {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: var(--muted); background: var(--bg);
  border-radius: 6px; padding: 3px 8px;
}

/* ── The query typing itself ── */
.fd-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; min-height: 36px;
}
.fd-typed {
  position: relative; overflow: hidden; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--text);
  animation: fdType 12s steps(26, end) infinite;
}
.fd-typed i { font-style: normal }
.fd-typed::after {
  content: ''; position: absolute; right: 0; top: 8%; bottom: 8%;
  width: 1.5px; background: var(--blue);
  animation: fdCaret .8s steps(1) infinite;
}

/* ── Result rows ──
   The list runs past the bottom of the screen, as a real one would; the mask
   fades the last row out instead of letting the device edge slice it. */
.fd-results {
  display: flex; flex-direction: column; gap: 8px; flex: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}
.fd-res {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid transparent;
  border-radius: 12px; padding: 10px 11px;
  opacity: 0;
}
.fd-res.r1 { animation: fdRow 12s ease-out infinite }
.fd-res.r2 { animation: fdRow 12s ease-out infinite; animation-delay: .12s }
.fd-res.r3 { animation: fdRow 12s ease-out infinite; animation-delay: .24s }
.fd-res.r4 { animation: fdRow 12s ease-out infinite; animation-delay: .36s }

.fd-res-av {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: #E4EBF6; display: grid; place-items: center;
}
.fd-res-txt { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0 }
.sk { height: 7px; border-radius: 4px; background: #D8E2F0; display: block }
.sk.w70 { width: 70% } .sk.w64 { width: 64% } .sk.w62 { width: 62% } .sk.w58 { width: 58% }
.sk.w42 { width: 42% } .sk.w40 { width: 40% } .sk.w38 { width: 38% } .sk.w36 { width: 36% }

/* ── The doctor's own row, arriving in first place ── */
.fd-res.mine {
  background: linear-gradient(120deg, rgba(26,86,219,.08), rgba(12,184,160,.11));
  border-color: rgba(12,184,160,.40);
  animation: fdMine 12s cubic-bezier(.2,.9,.25,1) infinite;
}
.fd-res.mine::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  border: 2px solid var(--teal); opacity: 0;
  animation: fdFlare 12s ease-out infinite;
}
.fd-res.mine { position: relative }
.mine-av { background: #fff; box-shadow: 0 3px 10px rgba(12,184,160,.28) }
.fd-res-txt strong { font-size: 12.5px; font-weight: 800; color: var(--navy) }
.fd-res-txt em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted) }
.fd-res-call {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), #3f7ef0); color: #fff;
  box-shadow: 0 5px 14px rgba(26,86,219,.34);
}

/* ══ Scene 2 — the profile ══ */
.fd-prof { position: relative; text-align: center; padding-bottom: 4px }
.fd-prof-cover {
  height: 54px; border-radius: 14px;
  background: linear-gradient(120deg, #1A56DB, #2f7ae5 45%, var(--teal));
}
.fd-prof-av {
  width: 52px; height: 52px; border-radius: 17px;
  margin: -26px auto 0; position: relative;
  background: var(--white); border: 2.5px solid var(--white);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(14,42,94,.18);
}
.fd-prof-name {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--navy);
}
.fd-prof-meta { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px }

.fd-prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px }
.fd-prof-stat {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fd-prof-stat .sk { height: 8px }
.fd-prof-stat em {
  font-style: normal; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.fd-prof-lines { display: flex; flex-direction: column; gap: 7px; padding: 2px 2px 0 }

.fd-prof-actions { display: flex; gap: 8px; margin-top: auto; padding-bottom: 6px }
.fd-pact {
  position: relative; flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; border-radius: 11px;
  font-size: 12.5px; font-weight: 800;
}
.fd-pact.call { background: linear-gradient(135deg, var(--blue), #3f7ef0); color: #fff;
                box-shadow: 0 7px 18px rgba(26,86,219,.30) }
.fd-pact.wa   { background: rgba(12,184,160,.10); color: var(--teal-a11y);
                border: 1px solid rgba(12,184,160,.30) }

/* ══ Scene 3 — the call landing on the clinic phone ══ */
.fd-call {
  flex: 1; border-radius: 22px;
  background: linear-gradient(165deg, #0b2149 0%, #103367 55%, #08777b 145%);
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 18px 22px; gap: 13px; color: #fff;
}
.fd-call-top { display: flex; flex-direction: column; align-items: center; gap: 3px }
.fd-call-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #7FF0DC;
}
.fd-call-via { font-size: 11px; font-weight: 600; color: rgba(239,246,255,.6) }

.fd-call-av {
  position: relative; width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 4px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
}
.fd-call-av svg { position: relative; z-index: 2 }
.fd-call-wave {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(127,240,220,.55);
}
.fd-call-wave.w1 { animation: fdWave 2.2s ease-out infinite }
.fd-call-wave.w2 { animation: fdWave 2.2s ease-out infinite 1.1s }

.fd-call-who { display: flex; flex-direction: column; align-items: center; gap: 2px }
.fd-call-who strong { font-size: 15px; font-weight: 800 }
.fd-call-who em { font-style: normal; font-size: 11.5px; color: rgba(239,246,255,.65) }

.fd-call-btns { display: flex; gap: 40px; margin-top: auto }
.fd-call-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center }
.fd-call-btn.decline { background: #E8503A; box-shadow: 0 8px 20px rgba(232,80,58,.36) }
.fd-call-btn.accept {
  background: #12B76A; box-shadow: 0 8px 20px rgba(18,183,106,.40);
  animation: fdAccept 1.5s ease-in-out infinite;
}

/* Tap indicator — the patient's finger, just before each screen change */
.fd-tap {
  position: absolute; z-index: 6; pointer-events: none;
  width: 26px; height: 26px; border-radius: 50%;
  right: 14px; top: 50%; margin-top: -13px;
  background: rgba(26,86,219,.20);
  border: 1.5px solid rgba(26,86,219,.55);
  opacity: 0;
  animation: fdTap 12s ease-out infinite;
}
.fd-tap.tap2 { right: 50%; margin-right: -13px; animation-name: fdTap2 }

/* ── Floating caption beside the phone ── */
.fd-ringing {
  position: absolute; z-index: 3; bottom: 24px; left: -30px;
  display: flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 13px; padding: 10px 14px;
  font-size: 12px; font-weight: 800; color: var(--navy);
  box-shadow: 0 14px 32px rgba(14,42,94,.18);
  opacity: 0;
  animation: fdRing 12s ease-out infinite;
}
.fd-ringing-ic {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(16,185,129,.14); color: #059669; position: relative;
}
.fd-ringing-ic::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: rgba(16,185,129,.22);
  animation: fdPulse 1.6s ease-out infinite;
}

.fd-stage-note {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); opacity: .8;
}

/* Percentages below are of the 12s cycle — 1% = 120ms.
   Screen 1 runs to 35%, screen 2 to 66%, screen 3 to 96%, then it resets. */
@keyframes fdScenes {
  0%, 30%      { transform: translateX(0);     opacity: 1 }
  34.2%, 50.8% { transform: translateX(-100%); opacity: 1 }
  55%, 96.7%   { transform: translateX(-200%); opacity: 1 }
  98.3%        { transform: translateX(-200%); opacity: 0 }
  98.8%        { transform: translateX(0);     opacity: 0 }
  100%         { transform: translateX(0);     opacity: 1 }
}

@keyframes fdType {
  0%       { width: 0 }
  9%, 33%  { width: 100% }
  34%, 100%{ width: 100% }
}
@keyframes fdCaret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

@keyframes fdRow {
  0%, 9%   { opacity: 0; transform: translateY(9px) }
  13%, 96% { opacity: 1; transform: translateY(0) }
  100%     { opacity: 0; transform: translateY(9px) }
}

@keyframes fdMine {
  0%, 15%  { opacity: 0; transform: translateY(-22px) scale(.94) }
  19%      { opacity: 1; transform: translateY(0) scale(1.03) }
  21%, 96% { opacity: 1; transform: translateY(0) scale(1) }
  100%     { opacity: 0; transform: translateY(-22px) scale(.94) }
}
@keyframes fdFlare {
  0%, 17%  { opacity: 0; transform: scale(.97) }
  20%      { opacity: .95; transform: scale(1) }
  28%, 100%{ opacity: 0; transform: scale(1.06) }
}

/* Finger taps: on the search result at 3.2s, on Call clinic at 5.6s —
   each lands just before its screen slides away. */
@keyframes fdTap {
  0%, 24%   { opacity: 0; transform: scale(1.5) }
  26.5%     { opacity: 1; transform: scale(1) }
  28.5%     { opacity: .9; transform: scale(.86) }
  31%, 100% { opacity: 0; transform: scale(1.5) }
}
@keyframes fdTap2 {
  0%, 44%   { opacity: 0; transform: scale(1.5) }
  46.5%     { opacity: 1; transform: scale(1) }
  48.5%     { opacity: .9; transform: scale(.86) }
  51%, 100% { opacity: 0; transform: scale(1.5) }
}

/* The caption beside the phone, arriving with screen 3 */
@keyframes fdRing {
  0%, 55%    { opacity: 0; transform: translateX(-14px) scale(.94) }
  58.5%      { opacity: 1; transform: translateX(0) scale(1.02) }
  60%, 96.7% { opacity: 1; transform: translateX(0) scale(1) }
  100%       { opacity: 0; transform: translateX(-14px) scale(.94) }
}

@keyframes fdWave {
  0%   { transform: scale(1);   opacity: .75 }
  100% { transform: scale(1.7); opacity: 0 }
}
@keyframes fdAccept {
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 20px rgba(18,183,106,.40) }
  50%      { transform: scale(1.07); box-shadow: 0 12px 28px rgba(18,183,106,.60) }
}

@keyframes fdPulse { 0% { transform: scale(1); opacity: 1 } 100% { transform: scale(1.9); opacity: 0 } }
@keyframes fdHover { 0%, 100% { translate: 0 0 } 50% { translate: 0 -9px } }
@keyframes fdSweep {
  0%   { transform: translateX(-72%); opacity: 0 }
  18%  { opacity: 1 }
  100% { transform: translateX(72%);  opacity: 0 }
}
@keyframes fdGlow  { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .fd-stage, .fd-glow, .fd-scenes, .fd-typed, .fd-typed::after,
  .fd-res, .fd-res.mine, .fd-res.mine::after, .fd-tap,
  .fd-call-wave, .fd-call-btn.accept,
  .fd-ringing, .fd-ringing-ic::after { animation: none }
  .fd-res, .fd-ringing { opacity: 1; transform: none }
  .fd-tap, .fd-call-wave { opacity: 0 }
  /* the strip cannot slide, so only the search screen is shown */
  .fd-scenes { transform: none }
  .fd-deco { animation: none }
  .fd-phone, .fd-glow::after, .fd-gloss, .fd-screen::after { transition: none }
  .fd-phone { transform: none }
  .fd-stage:hover .fd-phone { transform: none }
  .fd-stage:hover .fd-gloss::after { animation: none }
  .fd-screen::after { opacity: 0 }
}

/* ── Fact strip ──
   One elevated board lifted onto the hero seam, not four separate cards:
   the page keeps boxes for the note grids, and a single lifted plane here
   reads as the summary of the pitch above it rather than a new section. */
.fd-facts { background: var(--bg); display: flow-root }
.fd-facts-grid {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: -46px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 50px -28px rgba(14,42,94,.34), 0 2px 5px rgba(14,42,94,.04);
  overflow: hidden;
}
/* the same corner wash the note cards use, so the board belongs to the set */
.fd-facts-grid::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(26,86,219,.07), transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(12,184,160,.06), transparent 36%);
}

.fd-fact { position: relative; z-index: 1; padding: 26px 28px 28px }
.fd-fact.blue { --fc: var(--blue);     --fc-bg: rgba(26,86,219,.10) }
.fd-fact.teal { --fc: var(--teal-a11y); --fc-bg: rgba(12,184,160,.13) }

/* hairline seam drawn inset, so it never runs into the rounded corners */
.fd-fact + .fd-fact::before {
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 1px; background: var(--border);
}

.fd-fact-top { display: flex; align-items: center; gap: 10px }
.fd-fact-ic {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--fc); background: var(--fc-bg);
}
.fd-fact-l {
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); line-height: 1.3;
}
.fd-fact-k {
  font-size: 36px; font-weight: 800;
  letter-spacing: -.028em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: 16px;
}
.fd-fact-v { font-size: 13px; color: var(--muted); margin-top: 9px; line-height: 1.55 }
/* ── Sections ──
   Five long bands of flat fill read as unfinished at this page length, so
   each one carries a pair of ambient corner washes and a single oversized
   icon bleeding off the right edge, level with the section heading — the one
   part of every band that is reliably empty. Both sit on pseudo-elements:
   they clip to the section box on their own, need no markup, and disappear
   behind the opaque note cards wherever the two happen to meet. */
.fd-section { position: relative; overflow: hidden; padding: 62px 0 }
.fd-section.alt { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }
.fd-section > .fd-inner { position: relative; z-index: 1 }

.fd-section::before,
.fd-section::after { content: ''; position: absolute; pointer-events: none; z-index: 0 }

/* ambient wash — corners swap on the alternating bands so the page does not
   settle into one repeating light direction.

   The centres sit well inside the band and the whole layer is masked to fade
   out at the top and bottom edges. Without that the wash is at full strength
   on the section's own boundary, and every band meets its neighbour as a hard
   step — visible as banding down the page gutters. The mask is a percentage,
   so it holds regardless of how tall a section grows. */
.fd-section::before {
  inset: 0;
  background:
    radial-gradient(circle at 8% 34%,  rgba(26,86,219,.07), transparent 34%),
    radial-gradient(circle at 92% 68%, rgba(12,184,160,.08), transparent 34%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.fd-section.alt::before {
  background:
    radial-gradient(circle at 92% 32%, rgba(26,86,219,.06), transparent 34%),
    radial-gradient(circle at 7% 70%,  rgba(12,184,160,.07), transparent 34%);
}
.fd-section::after {
  /* 32px matches the .fd-inner gutter, so the icon clears the viewport edge
     instead of being sliced by it */
  right: 32px; top: 16px;
  width: 262px; height: 262px;
  /* tuned against the page's own hairline border (contrast 30): this lands
     at ~1.5x that, visible as a shape without competing with the heading */
  opacity: .16;
  background: no-repeat center / contain;
}

.fd-section.wm-scope::after {
  transform: rotate(-12deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2v6a5 5 0 0 0 10 0V2'/%3E%3Cpath d='M4 2h4M14 2h4'/%3E%3Cpath d='M11 13.5v2.5a4 4 0 0 0 8 0v-2.2'/%3E%3Ccircle cx='19' cy='11' r='2.4'/%3E%3C/svg%3E");
}
.fd-section.wm-route::after {
  transform: rotate(9deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CB8A0' stroke-width='.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='11' r='2.6'/%3E%3C/svg%3E");
}
.fd-section.wm-badge::after {
  transform: rotate(-8deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7l7.5 2.8v5.6c0 4.7-3.2 8.4-7.5 10.2-4.3-1.8-7.5-5.5-7.5-10.2V5.5L12 2.7z'/%3E%3Cpath d='M8.7 12.2l2.4 2.4 4.3-5'/%3E%3C/svg%3E");
}
.fd-section.wm-steps::after {
  transform: rotate(11deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CB8A0' stroke-width='.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='17' rx='3.2'/%3E%3Crect x='8.5' y='1.6' width='7' height='4.2' rx='1.8'/%3E%3Cpath d='M8 11.2l1.6 1.6 3-3'/%3E%3Cpath d='M8 16.7l1.6 1.6 3-3'/%3E%3Cpath d='M15 11.6h1.6M15 17.1h1.6'/%3E%3C/svg%3E");
}
.fd-section.wm-ask::after {
  transform: rotate(-10deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.2 7.7L3 21.5l1.9-5.6A8.5 8.5 0 1 1 21 12z'/%3E%3Cpath d='M9.8 9.3a2.3 2.3 0 1 1 3.1 2.2c-.6.2-.9.8-.9 1.4v.4'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E");
}
/* ── Note grids ──
   These are the only repeating item grids on the page, so they are the only
   blocks that become cards; the FAQ and the numbered journeys stay as plain
   hairline lists, which read better than a wall of boxes. */
.fd-notes { display: grid; gap: 16px }
.fd-notes.two   { grid-template-columns: repeat(2, 1fr) }
.fd-notes.three { grid-template-columns: repeat(3, 1fr) }

.fd-note {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* a brand-tinted wash in the far corner — barely there at rest, awake on hover */
.fd-note::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 108% -8%, rgba(26,86,219,.09), transparent 46%),
    radial-gradient(circle at -8% 112%, rgba(12,184,160,.07), transparent 44%);
  opacity: .65; transition: opacity .25s ease;
}
.fd-note:hover {
  transform: translateY(-3px);
  border-color: rgba(26,86,219,.24);
  box-shadow: 0 14px 32px rgba(14,42,94,.10);
}
.fd-note:hover::after { opacity: 1 }

.fd-note > * { position: relative; z-index: 1 }
.fd-note h3 {
  font-size: 15px; font-weight: 800; color: var(--navy);
  line-height: 1.35; display: flex; align-items: baseline; gap: 9px;
}
.fd-note h3::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  flex-shrink: 0; transform: translateY(-2px);
}
.fd-note p { font-size: 14px; line-height: 1.6; color: var(--muted) }

/* ── Callout ── */
.fd-callout {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 12px; padding: 20px 24px; margin-top: 34px;
}
.fd-callout p { font-size: 14.5px; line-height: 1.6; color: var(--muted) }
.fd-callout strong { color: var(--navy) }

/* ── Journey / steps ── */
.fd-journey { list-style: none; margin: 0; padding: 0 }
.fd-leg {
  display: grid; grid-template-columns: 36px 1fr; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.fd-leg:first-child { border-top: 1px solid var(--border) }
.fd-leg-n {
  font-size: 20px; font-weight: 800; color: var(--teal-a11y);
  line-height: 1.25; font-variant-numeric: tabular-nums;
}
.fd-leg-b { display: flex; flex-direction: column; gap: 5px }
.fd-leg-b h3 { font-size: 15.5px; font-weight: 800; color: var(--text) }
.fd-leg-b p { font-size: 14.5px; line-height: 1.6; color: var(--muted) }

/* ── Checklist ── */
.fd-checks {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px 34px; list-style: none; margin: 0; padding: 0;
}
.fd-checks li {
  display: grid; grid-template-columns: 17px 1fr; gap: 12px;
  align-items: start; font-size: 14.5px; color: var(--muted); line-height: 1.5;
}
.fd-checks li::before {
  content: ''; width: 15px; height: 15px; margin-top: 4px;
  border: 1.5px solid var(--blue); border-radius: 4px;
}
.fd-checks strong { color: var(--text); font-weight: 700 }

/* ── FAQ ── */
.fd-faq { margin: 0 }
.fd-qa {
  padding: 18px 0; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.fd-qa:first-child { border-top: 1px solid var(--border) }
.fd-qa dt { font-size: 15px; font-weight: 800; color: var(--text) }
.fd-qa dd { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 92ch }

/* ── CTA band ── */
.fd-cta-band { padding: 0 0 68px; background: var(--bg) }
.fd-cta {
  background: linear-gradient(100deg, #07152f 0%, #0b2149 34%, #103367 68%, #08777b 130%);
  border-radius: 20px; padding: 44px 44px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px 54px;
  box-shadow: 0 18px 44px rgba(9,20,42,.24);
  position: relative; overflow: hidden;
}
.fd-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at -4% 26%, rgba(48,111,225,.22), transparent 33%),
    radial-gradient(circle at 104% 88%, rgba(35,205,181,.15), transparent 36%);
}
.fd-cta-copy, .fd-cta-meta { position: relative; z-index: 2 }
.fd-cta-copy .fd-h2 { margin-top: 10px }
.fd-cta-copy p { font-size: 15px; line-height: 1.6; color: rgba(239,246,255,.72); margin-top: 12px; max-width: 46ch }

.fd-cta-meta { display: flex; flex-direction: column; gap: 16px; align-content: start }
.fd-cta-row { display: flex; flex-direction: column; gap: 4px }
.fd-cta-lab {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(239,246,255,.5);
}
.fd-cta-val { font-size: 15px; font-weight: 700; color: #fff; text-decoration: none }
a.fd-cta-val:hover { color: #7FF0DC }

/* ── Responsive ── */
@media (max-width: 1180px) {
  /* below this the section heading grows into the watermark — measured 87px
     of clearance at 1180px but only 7px at 1100px */
  .fd-section::after { display: none }
}
@media (max-width: 1080px) {
  /* the single-column hero leaves no gaps the icon field can sit in */
  .fd-hero-deco { display: none }
  .fd-hero-grid { grid-template-columns: 1fr; gap: 40px }
  .fd-visual { align-items: center }
}
@media (max-width: 900px) {
  .fd-facts-grid { grid-template-columns: repeat(2, 1fr) }
  .fd-fact + .fd-fact::before { display: none }
  .fd-fact:nth-child(2n)::before { display: block }
  .fd-fact:nth-child(-n+2) { border-bottom: 1px solid var(--border) }
  .fd-notes.three { grid-template-columns: repeat(2, 1fr) }
  .fd-cta { grid-template-columns: 1fr; padding: 34px 28px }
}
@media (max-width: 680px) {
  .fd-inner { padding: 0 18px }
  .fd-topbar-in { height: 66px; gap: 10px }
  .fd-brand img { height: 56px }
  .fd-topbar-tag { display: none }
  .fd-hero { padding: 46px 0 40px }
  .fd-h1 { font-size: 32px }
  .fd-h2 { font-size: 23px }
  .fd-lede { font-size: 15.5px }
  .fd-section { padding: 44px 0 }
  .fd-facts-grid { margin-top: -34px; border-radius: 16px }
  .fd-fact { padding: 19px 18px 21px }
  .fd-fact-k { font-size: 29px; margin-top: 12px }
  .fd-fact-v { font-size: 12px; margin-top: 7px }
  .fd-notes.two, .fd-notes.three, .fd-checks { grid-template-columns: 1fr }
  .fd-note { padding: 18px 17px 16px; border-radius: 14px }
  .fd-notes { gap: 12px }
  .fd-hero-actions .fd-btn { flex: 1 1 100% }
  /* the call chip would hang off the screen edge — bring it inside */
  .fd-visual { width: 100%; align-items: center }
  .fd-ringing { left: 6px; bottom: 18px; font-size: 11.5px; padding: 9px 12px }
}

/* ── Print: same page doubles as the paper handout ── */
@media print {
  @page { size: A4; margin: 12mm }
  .fd-topbar, .fd-foot, .fd-hero-deco,
  .fd-hero-actions, .fd-btn { display: none !important }
  .fd-hero, .fd-facts, .fd-section, .fd-cta-band { padding: 12px 0; background: #fff !important; border: 0 }
  .fd-inner { max-width: none; padding: 0 }
  .fd-facts-grid { margin-top: 0; box-shadow: none; border-radius: 10px }
  .fd-facts-grid::after,
  .fd-section::before, .fd-section::after { display: none }
  .fd-h1 { font-size: 30px }
  .fd-h2 { font-size: 19px }
  .fd-lede { font-size: 13.5px }
  .fd-note p, .fd-leg-b p, .fd-qa dd, .fd-checks li { font-size: 11.5px; line-height: 1.45 }
  .fd-leg { padding: 8px 0 }
  .fd-qa { padding: 8px 0 }
  .fd-cta {
    background: #0B2149 !important; border-radius: 8px; padding: 20px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .fd-section, .fd-leg, .fd-qa, .fd-callout, .fd-note { -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid }
}