/* ============================================================================
   Family Ties AI — marketing site stylesheet
   Self-contained. No external CDNs, fonts, or hotlinks. Mobile-first.
   Brand: Deep Navy #0D2340 · Primary Blue #1A6DC2 · Mid Blue #2B9FE8 · Cyan #00D4E8
   ========================================================================== */

/* ---- Self-hosted Poppins (see /fonts) ---- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap; src:url('/fonts/poppins-900.woff2') format('woff2'); } /* hero headline — matches original (Poppins 900) */
/* Open Sans — the original top-ribbon font (GoDaddy .c1-b: 'Open Sans', arial, sans-serif) */
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/opensans-400.woff2') format('woff2'); }

:root{
  --navy:#0D2340;
  --blue:#1A6DC2;
  --mid:#2B9FE8;
  --cyan:#00D4E8;
  --ink:#0D2340;
  --body:#3a4a5f;
  --muted:#6b7a8d;
  --line:#e3e9f0;
  --bg:#ffffff;
  --bg-soft:#f4f8fc;
  --bg-navy-soft:#0f2947;
  --grad:linear-gradient(100deg,var(--blue),var(--mid) 55%,var(--cyan));
  --grad-navy:linear-gradient(135deg,var(--navy) 0%,#12365f 100%);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(13,35,64,.10);
  --shadow-lg:0 24px 60px rgba(13,35,64,.16);
  --maxw:1120px;
  --pad:clamp(18px,5vw,28px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--body);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(1.9rem,5.2vw,3.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.6vw,2.3rem);letter-spacing:-.01em}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem)}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:.9rem}
.center{text-align:center}
.lead{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--body)}
/* Bridge paragraph between hero and the problem section — constrained + centred, tight spacing.
   Wide max-width (+balance) keeps it to two lines on desktop; tight padding + a reduced
   top-padding on the following section close the gap above and below. */
.carer-load-sec{padding:clamp(8px,1.4vw,16px) 0 0}
/* Following section gets the SAME small top gap, so the space below the line matches above. */
.carer-load-sec + section{padding-top:clamp(8px,1.4vw,16px)}
/* Mobile: tighten the gap underneath the line further (desktop is unchanged). */
@media (max-width:820px){ .carer-load-sec + section{padding-top:3px} }
/* Full container width => wraps to two lines on desktop (not three); balance evens them out. */
.carer-load{max-width:100%;margin:0 auto;font-size:clamp(.85rem,1.3vw,.95rem);color:var(--muted);text-wrap:balance}
.muted{color:var(--muted)}
/* Subtle citation line beneath a statistic — reads as a source note, not body copy */
.stat-source{font-size:.78rem;color:var(--muted);margin-top:.4rem}
.stat-source a{color:var(--muted);text-decoration:underline}
/* "Coming soon" pill — a visible label for roadmap features (not a footnote) */
.badge-soon{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:rgba(26,109,194,.10);border:1px solid rgba(26,109,194,.25);border-radius:999px;padding:.15rem .5rem;margin-top:.6rem}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-size:1rem;padding:.55rem 1.1rem;border-radius:999px;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
/* border-box origin/clip: same edge-to-edge gradient fill as the hero CTA, so the
   2px transparent border never shows a flat end-cap strip of a mismatched colour. */
.btn-primary{background:var(--grad);background-origin:border-box;background-clip:border-box;color:#fff;box-shadow:0 0 0 1.5px rgba(43,159,232,.55), 0 8px 22px rgba(26,109,194,.35)}
.btn-primary:hover{box-shadow:0 0 0 1.5px rgba(43,159,232,.55), 0 12px 30px rgba(26,109,194,.45)}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--mid)}
.btn-lg{padding:.6rem 1.25rem;font-size:1.08rem}
.btn-block{width:100%}

/* ---- Top ribbon (exact original values from the export) ----
   .c1-r bg rgb(26,109,194)=#1A6DC2 · .c1-1i color #fff · .c1-b font 'Open Sans'
   · .c1-1j font-size 12px (14px at widest) · .c1-1k weight 400
   · .c1-19 letter-spacing .083em · .c1-1a text-transform uppercase
   · .c1-1d line-height 1.33 · .c1-1h text-align center · .c1-s/.c1-t padding 12px */
.ribbon{background:#1A6DC2;color:#fff;
  font-family:'Open Sans',arial,sans-serif;font-size:12px;font-weight:400;
  letter-spacing:.083em;text-transform:uppercase;line-height:1.33}
/* Single-line marquee. The track holds two identical sequences; translating it
   by exactly -50% scrolls one full sequence off-screen and loops seamlessly (no
   fade/restart, no jump). ~30s per cycle — slow, decorative. Colours, font and
   dot separators are unchanged; this is layout only. */
.ribbon .marquee{overflow:hidden;display:flex;padding:12px 0}
.ribbon .marquee__track{display:flex;flex:none;width:max-content;
  animation:ribbon-marquee 30s linear infinite}
.ribbon .marquee__seq{display:inline-flex;align-items:center;gap:.5rem;
  white-space:nowrap;padding-right:.5rem}   /* nowrap: can never wrap at any width */
.ribbon strong{color:#fff;font-weight:400}
.ribbon .dot{color:#fff}
@keyframes ribbon-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Desktop: the line fits without scrolling, so it sits static and centred — the
   marquee only runs at narrower widths where it would otherwise overflow. */
@media (min-width:1000px){
  .ribbon .marquee{justify-content:center}
  .ribbon .marquee__track{animation:none;transform:none;width:auto}
  .ribbon .marquee__seq--dup{display:none}      /* one copy only when static */
  .ribbon .marquee__seq{padding-right:0}
  .ribbon .marquee__seq .seam{display:none}      /* no trailing seam separator */
}
@media (min-width:1200px){ .ribbon{font-size:14px} }

/* Reduced motion: never scroll. Static single line; if it overflows, scroll the
   strip horizontally rather than wrapping to a second line. */
@media (prefers-reduced-motion:reduce){
  .ribbon .marquee{overflow-x:auto;justify-content:flex-start}
  .ribbon .marquee__track{animation:none;transform:none;width:auto}
  .ribbon .marquee__seq--dup{display:none}
  .ribbon .marquee__seq{padding-right:0}
  .ribbon .marquee__seq .seam{display:none}
}

/* ---- Header: hamburger LEFT · logo CENTRED · off-canvas drawer (matches original) ---- */
.site-header{position:relative;z-index:50;background:#fff}
.header-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-top:.55rem;padding-bottom:.55rem}
.nav-toggle{justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:#1A6DC2;padding:6px;width:44px;height:44px} /* .c1-2c hamburger colour rgb(26,109,194) */
.header-spacer{justify-self:end}
.brand{justify-self:center;display:inline-flex;align-items:center}
.brand:hover{text-decoration:none}
/* centred logo carries the intro animation. Original logo height: 80px (mobile)
   / 200px (desktop) — matched closely below. Overrides the hero-pill sizing. */
.site-header .logo-wrap{width:auto;margin:0}
.site-header .logo-wrap img{height:80px;width:auto}
@media (min-width:768px){ .site-header .logo-wrap img{height:150px} }

/* the white downward point centred under the header (original SVG path
   "M26.5 24L53 0H0z", max 53x24, colour #fff, z-index 2, margin-top -1px) */
.header-point{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:-1px;line-height:0;color:#fff;z-index:2;pointer-events:none}
.header-point svg{display:block;width:53px;height:24px}

/* off-canvas drawer — original: fixed, bg rgb(246,246,246), max-width 400px,
   padding-top 72px, transform translateX(off) → 0, transition .3s ease-in-out */
.nav-drawer{position:fixed;top:0;left:0;bottom:0;width:min(400px,84vw);max-width:400px;
  background:#F6F6F6;z-index:10002;padding:72px 1.4rem 1.6rem;
  display:flex;flex-direction:column;gap:.1rem;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-105%);transition:transform .3s ease-in-out;visibility:hidden;box-shadow:none}
.nav-drawer.open{transform:none;visibility:visible;box-shadow:0 0 44px rgba(0,0,0,.28)}
/* Sidebar links match the ORIGINAL site's NavBeta menu typography:
   Open Sans · 14px · 400 (700 active) · letter-spacing 1px · UPPERCASE ·
   colour rgb(26,109,194) = #1A6DC2. */
.nav-drawer a{font-family:'Open Sans',arial,sans-serif;color:var(--blue);font-weight:400;
  font-size:14px;letter-spacing:1px;text-transform:uppercase;line-height:1.45;
  padding:.85rem .3rem;border-bottom:1px solid #e6e6e6}
.nav-drawer a:hover{color:var(--mid);text-decoration:none}
.nav-drawer a.active{color:var(--blue);font-weight:700}
/* The one drawer item that carries a second line. The link itself is styled
   by the .nav-drawer a rule above — nothing here changes the first line. The
   caption is the SAME face, dropped to 11px, sentence case, in the site's
   secondary grey, so it cannot be mistaken for a link of its own. It stays
   regular weight under .active, where the link above it goes bold. */
.nav-drawer a .nav-sub{display:block;margin-top:.2rem;
  font-family:'Open Sans',arial,sans-serif;font-size:11px;font-weight:400;
  letter-spacing:.3px;text-transform:none;line-height:1.45;color:var(--muted)}
.nav-drawer a:hover .nav-sub{color:var(--muted)}
/* small gap sets the legal links (Terms, Privacy) apart from the main nav */
.nav-drawer a.nav-legal{margin-top:.7rem}
.drawer-close{position:absolute;top:16px;right:14px;background:none;border:0;cursor:pointer;
  color:#1b1b1b;padding:6px;width:40px;height:40px}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10001;
  opacity:0;transition:opacity .3s ease-in-out}
.nav-backdrop.show{opacity:1}
body.nav-open{overflow:hidden}

/* ---- Sections ---- */
section{padding:clamp(46px,7vw,84px) 0}
.section-soft{background:var(--bg-soft)}
/* "Here's how she works" numbered steps */
.how-steps{max-width:600px;margin:1.6rem auto 0;padding:0;list-style:none;counter-reset:step;text-align:left;display:grid;gap:1.1rem}
.how-steps li{position:relative;padding-left:3.2rem;counter-increment:step;min-height:2rem}
.how-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.how-steps li strong{display:block;color:var(--ink);margin-bottom:.15rem}
.how-steps li span{color:var(--body)}
.section-navy{background:var(--navy);color:#c9d8ea}
.section-navy h1,.section-navy h2,.section-navy h3{color:#fff}
.section-navy .eyebrow{color:var(--cyan)}
.section-tight{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(28px,4vw,44px)}

/* ---- Hero: full-bleed background video + animated logo ---- */
/* Hero container height — original min-height ladder (MEASURED off the export):
   500px (base/mobile) · 700px (≥1024px) · 800px (≥1280px). Video: 100%/100%,
   object-fit cover (already correct). */
.hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  display:flex;align-items:center;min-height:500px;
  background:var(--grad-navy)}            /* fallback: shown before load / if video fails */
@media (min-width:1024px){ .hero{min-height:700px} }
@media (min-width:1280px){ .hero{min-height:800px} }
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;border:0;background:var(--grad-navy)}
/* Tint overlay — exact original: rgb(22,22,22) @ opacity 0.3, inset 0. */
.hero-scrim{position:absolute;inset:0;z-index:-1;background:rgb(22,22,22);opacity:.3}

/* Hero text — MEASURED off the original: a LEFT-aligned column (centre on mobile),
   vertically centred (via .hero align-items:center). Column ~371px on desktop. */
.hero-inner{position:relative;text-align:left;max-width:var(--maxw);margin:0 auto;
  width:100%;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
/* TOP line (<h1>) = bold headline: Poppins 900 / 28→30→32px / lh1.42 */
.hero-inner h1{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:900;font-size:28px;line-height:1.42;letter-spacing:normal;color:#fff;
  text-shadow:2px 2px 2px rgba(0,0,0,.2);max-width:min(400px,34vw);margin:0 0 .55rem}
/* BOTTOM line (.lead) = normal subtagline: Open Sans 22px / 400 / lh1.45 / ls1px */
.hero-inner .lead{font-family:'Open Sans',arial,sans-serif;font-weight:400;
  font-size:22px;line-height:1.45;letter-spacing:1px;color:#fff;
  text-shadow:2px 2px 2px rgba(0,0,0,.2);max-width:min(400px,34vw);margin:0 0 1.4rem}
/* desktop left inset — original text column sits ~116px inside the centred
   container (measured left ≈176px @1280); nudge to match. */
@media (min-width:768px){ .hero-inner{padding-left:calc(var(--pad) + 56px)} .hero-inner h1{font-size:30px} }
@media (min-width:1280px){ .hero-inner h1{font-size:32px} }
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:flex-start}
.hero-note{margin-top:1.1rem;font-size:.85rem;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.55),0 0 14px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.35);max-width:min(400px,34vw)}
/* CTA metrics — MEASURED original: Open Sans 14px / 700 / ls1px / UPPERCASE,
   min-height 56px, radius 48px, padding 8px 40px, flat #1A6DC2. */
.hero-cta .btn{font-family:'Open Sans',arial,sans-serif;font-size:14px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;min-height:44px;border-radius:48px;padding:8px 22px}
/* Emphasis (swapped). OUTLINE "Join It's Free" — the calm action: transparent with
   a border, keeping its soft brand glow (blue #1A6DC2 + cyan #00D4E8). No motion. */
.hero-cta .cta-outline{background:#fff;color:var(--blue);border:2px solid #fff;
  box-shadow:0 10px 26px rgba(26,109,194,.45), 0 0 22px rgba(0,212,232,.30)}
.hero-cta .cta-outline:hover{background:#eef5fc;border-color:#fff}
/* SOLID blue "New to AI? Start here" — the emphasised action: solid brand blue, the
   subtle HEARTBEAT (scale 1.0->1.04, one beat then a long pause, ~2s), AND the logo's
   own colour sweep — the SAME implementation as the hero logo: it reuses @keyframes
   logoRay with the logo's ray gradient, running alongside the pulse. */
.hero-cta .cta-solid{position:relative;overflow:hidden;color:#fff;border:2px solid transparent;
  /* Fill the WHOLE border box with the gradient. Default background-origin is
     padding-box, which flatly extends the gradient's end colours (blue / cyan)
     across the 2px transparent border — that was the odd little strip at each
     end. border-box makes the gradient transition continuously, edge to edge. */
  background:var(--grad);background-origin:border-box;background-clip:border-box;
  /* A crisp, uniform blue glow ring frames the button all the way around (can't
     favour one end), on top of the existing blue drop + cyan halo. */
  box-shadow:0 0 0 1.5px rgba(43,159,232,.55), 0 8px 24px rgba(26,109,194,.5), 0 0 22px rgba(0,212,232,.45);
  transform-origin:center;animation:ftai-heartbeat 2s ease-in-out infinite;
  /* Sized ~halfway between the original 56px/8px-40px and the earlier slimmed
     44px/6px-28px, so it reads as a matched pair with "Join It's Free" without
     dominating. Font stays 14px — same as the sibling. nowrap keeps the label
     on one line (no mobile wrap). */
  min-height:44px;padding:7px 20px;white-space:nowrap}
.hero-cta .cta-solid::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(102deg,
    transparent 34%, rgba(255,255,255,.35) 43%, rgba(255,255,255,.95) 48%,
    rgba(190,248,255,.85) 53%, transparent 62%);
  background-size:280% 100%;background-repeat:no-repeat;
  animation:logoRay 7.5s ease-in-out 1.9s infinite}
.hero-cta .cta-solid .cta-label{position:relative;z-index:1}   /* label above the sweep */
@keyframes ftai-heartbeat{ 0%,24%,100%{transform:scale(1)} 12%{transform:scale(1.04)} }
/* Motion safety — no heartbeat and no colour sweep under reduced motion; the glows
   stay. (Matters here: some visitors are older or motion-sensitive.) */
@media (prefers-reduced-motion:reduce){
  .hero-cta .cta-solid{animation:none}
  .hero-cta .cta-solid::after{animation:none;display:none}
}

/* mobile (<768px): centre the hero text, matching the original */
@media (max-width:767px){
  .hero-inner{text-align:center}
  .hero-inner h1,.hero-inner .lead,.hero-note{max-width:85%;margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
}

/* Logo intro animation — ported verbatim from meet-sophia-booklet.html.
   Layers: logoIn (3D hinge-in), logoFlicker (neon power-on), logoRay (masked
   light sweep; JS in site.js clips the ray to the logo's silhouette). */
/* Frosted pill keeps the navy wordmark legible over the video — the same light
   backing the logo has on the booklet's page. Padding lives here, NOT on
   .logo-wrap, so the ray mask stays pixel-aligned to the logo. */
.hero-logo{display:inline-block;margin:0 auto 1.7rem;padding:16px 26px;
  background:rgba(255,255,255,.93);border-radius:20px;
  box-shadow:0 18px 46px rgba(0,0,0,.32);backdrop-filter:blur(2px)}
.logo-wrap{position:relative;display:block;width:min(15rem,52vw);margin:0;
  animation:logoIn 1.5s cubic-bezier(.2,.8,.2,1) both}
.logo-wrap img{width:100%;height:auto;display:block;
  animation:logoFlicker 2.6s steps(1,end) .55s 1 both}
.logo-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,
    transparent 34%, rgba(255,255,255,.35) 43%, rgba(255,255,255,.95) 48%,
    rgba(190,248,255,.85) 53%, transparent 62%);
  background-size:280% 100%;background-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:logoRay 7.5s ease-in-out 1.9s infinite}
@keyframes logoIn{
  0%{opacity:0;transform:perspective(900px) rotateY(-96deg) scale(.82);filter:blur(7px) brightness(1.7)}
  46%{opacity:1}
  68%{transform:perspective(900px) rotateY(11deg) scale(1.03);filter:blur(0) brightness(1.12)}
  100%{opacity:1;transform:none;filter:none}}
@keyframes logoFlicker{
  0%,100%{opacity:1}4%{opacity:.2}7%{opacity:1}11%{opacity:.45}14%{opacity:1}19%{opacity:.75}22%{opacity:1}}
@keyframes logoRay{
  0%{background-position:180% 0}22%{background-position:-90% 0}100%{background-position:-90% 0}}

@media (max-width:860px){ .hero{min-height:auto} }

/* Motion safety: no flip / flicker / ray for prefers-reduced-motion; the logo
   and copy stay fully visible. site.js also refuses to autoplay the video. */
@media (prefers-reduced-motion:reduce){
  .logo-wrap,.logo-wrap img,.logo-wrap::after{animation:none!important}
  .logo-wrap::after{display:none}
}

/* ---- Generic two-column feature blocks ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.split.reverse .split-media{order:2}
.split-media img,.media-frame{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.media-frame{aspect-ratio:4/3;background:var(--bg-soft) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;text-align:center;padding:1rem}
.split-media{margin:0}
.split-media figcaption.pull{margin-top:1rem}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}
}

/* split--stack: title / image / body as grid areas. Desktop is UNCHANGED (copy
   stacked left, image centred right); on mobile the image sits directly under the
   TITLE and above the body text, so the picture is seen first. */
.split--stack{grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,56px);row-gap:0;
  align-items:start;grid-template-areas:"head media" "body media"}
.split--stack .split-head{grid-area:head}
.split--stack .split-body{grid-area:body}
.split--stack .split-media{grid-area:media;align-self:center}
.split--stack .split-head h2{margin-bottom:.9rem}
@media (max-width:820px){
  .split--stack{grid-template-columns:1fr;grid-template-areas:"head" "media" "body"}
  .split--stack .split-media{align-self:auto;margin-bottom:1.4rem}
}
/* Small caption under the image (the "loneliness" line) — SMALL text, not a pull-quote. */
.media-note{margin:.85rem 0 0;font-size:.85rem;line-height:1.5;color:var(--muted);font-style:italic;max-width:none}
/* the noted image sits slightly lower so the block aligns with the section above (desktop only) */
@media (min-width:821px){ .split-media--noted img{margin-top:2.4rem} }

/* Wide lead image beneath a centred section heading (e.g. features) */
.feature-lead{margin:2rem auto 0;max-width:860px}
.feature-lead img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--line)}

/* Phone screenshot showcase — three transparent device mockups with a caption
   under each. The device frame is baked into each PNG, so no border/radius —
   just a soft drop-shadow on the phone silhouette. Mobile stacks full width
   (a shrunk 3-up row makes the screens unreadable). */
.phone-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.6rem;align-items:end}
.phone{margin:0;text-align:center}
/* Sources differ in aspect ratio (patient 736x1392, family cropped 579x1191,
   portal 698x1506), so give every phone an IDENTICAL display box and let
   object-fit:contain fit each screenshot inside it — no stretching, no cropping
   (cover would cut off the content this section exists to show). Box ratio = the
   widest source (patient 736/1392) so every phone touches the same top and
   bottom edge; narrower shots (the taller Family Portal) get symmetric side
   padding instead of being distorted. The Family phone was re-cropped so its
   device fills its canvas to the same proportions as the patient phone, so the
   two read at the same on-screen size. */
.phone img{width:100%;aspect-ratio:736/1392;height:auto;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 34px rgba(13,35,64,.18))}
.phone figcaption{margin:0 auto 1.1rem;max-width:30ch;font-size:.92rem;line-height:1.5;color:var(--muted)}
@media (max-width:760px){
  .phone-showcase{grid-template-columns:1fr;gap:2.8rem;max-width:420px;margin-left:auto;margin-right:auto}
}

/* ---- Cards / feature grid ---- */
.grid{display:grid;gap:1.1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card h3{margin-bottom:.4rem}
.card p{margin:0;font-size:.95rem;color:var(--body)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;color:#fff;font-size:1.3rem}
.card .ic svg{width:24px;height:24px;display:block}

/* ---- Feature list (checklist) ---- */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem}
.checklist li::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:var(--grad) center/56% no-repeat;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat}

/* ---- Stat / quote ---- */
.pull{background:var(--grad);color:#fff;border-radius:var(--radius);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow-lg);text-align:center}
.pull .big{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;line-height:1.25;margin:0}
.pull small{display:block;margin-top:.6rem;opacity:.9;font-weight:500}
blockquote.founder{margin:0;font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.65;color:var(--ink);font-weight:400}
blockquote.founder .sig{display:block;margin-top:1.1rem;font-size:1rem;color:var(--blue);font-weight:600}

/* ---- Channels strip ---- */
.channels{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font-weight:600;font-size:.9rem;color:var(--navy);box-shadow:var(--shadow)}
.section-navy .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}

/* ---- CTA band ---- */
.cta-band{background:var(--grad);color:#fff;text-align:center;border-radius:0}
.cta-band h2{color:#fff}
.cta-band .btn-primary{background:#fff;color:var(--blue);box-shadow:0 10px 30px rgba(0,0,0,.18)}

/* ---- Form ---- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:clamp(22px,4vw,36px)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.9rem;color:var(--navy);margin-bottom:.4rem}
.field .req{color:var(--blue)}
.field input{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font:inherit;color:var(--ink);background:#fff;transition:border-color .15s}
.field input:focus{outline:none;border-color:var(--mid);box-shadow:0 0 0 3px rgba(43,159,232,.15)}
.form-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--muted);margin-bottom:1.1rem}
.form-consent input{margin-top:.2rem}
/* Radio "choice" group — matches the .field input treatment (border/radius/size),
   with a clear selected state so it looks finished when chosen. */
.choice-row{display:flex;gap:.6rem;flex-wrap:wrap}
.choice-opt{flex:1 1 8rem;display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:.9rem;color:var(--ink);background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.choice-opt:hover{border-color:var(--mid)}
.choice-opt input{accent-color:var(--blue);margin:0;flex-shrink:0}
.choice-opt:has(input:checked){border-color:var(--blue);background:rgba(43,159,232,.08);font-weight:600}
.form-msg{display:none;margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--radius-sm);font-size:.92rem;font-weight:500}
.form-msg.ok{display:block;background:#e7f8f2;color:#0b6b4f;border:1px solid #b9ecd8}
.form-msg.err{display:block;background:#fdecec;color:#b3261e;border:1px solid #f6cccc}
.form-fineprint{font-size:.78rem;color:var(--muted);margin-top:1rem}

/* ---- Legal / prose pages ---- */
.legal{background:var(--bg)}
.legal-head{background:var(--navy);color:#fff;padding:clamp(36px,6vw,64px) 0 clamp(28px,4vw,44px)}
.legal-head h1{color:#fff;margin-bottom:.4rem}
.legal-head .meta{color:#9fc0e6;font-size:.9rem}
.legal-head .meta span{display:inline-block;margin-right:1.2rem}
.prose{max-width:820px;margin:0 auto}
.prose h2{margin-top:2.4rem;font-size:clamp(1.2rem,2.4vw,1.5rem);padding-bottom:.4rem;border-bottom:2px solid var(--line)}
.prose h3{margin-top:1.6rem;font-size:1.05rem;color:var(--blue)}
.prose p,.prose li{color:var(--body)}
.prose ul{padding-left:1.2rem;margin:0 0 1rem}
.prose li{margin-bottom:.4rem}
.prose a{word-break:break-word}
.prose address{font-style:normal;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.2rem;margin:1rem 0;line-height:1.7}
.prose .rule{border:0;border-top:1px solid var(--line);margin:2rem 0}
.prose .disclaimer{font-style:italic;color:var(--muted);font-size:.9rem}
.table-wrap{overflow-x:auto;margin:1rem 0;-webkit-overflow-scrolling:touch}
table.legal-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
table.legal-table th,table.legal-table td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
table.legal-table th{background:var(--bg-soft);color:var(--navy);font-weight:600}
.callout{background:#fff8e6;border:1px solid #f3e2a8;border-left:4px solid #e0a500;border-radius:var(--radius-sm);padding:1rem 1.2rem;margin:1.2rem 0;font-size:.92rem;color:#6b5300}

/* ---- Certificate page ---- */
.cert-frame{max-width:720px;margin:1.5rem auto 0;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;background:#fff}
.cert-frame img{width:100%}
.cert-placeholder{aspect-ratio:1/1.414;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:var(--bg-soft);color:var(--muted);text-align:center;padding:2rem}

/* ---- Footer ---- */
.site-footer{background:var(--navy);color:#9fb3cc;padding:clamp(40px,6vw,64px) 0 1.5rem;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:1.6rem}}
.footer-grid h4{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.footer-grid a{color:#c3d3e6;display:block;padding:.2rem 0}
.footer-grid a:hover{color:#fff}
.footer-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;color:#fff;font-weight:700}
.footer-brand img{height:42px;width:auto;display:block;
  background:#fff;border-radius:10px;padding:5px 8px}
.footer-legalline{border-top:1px solid rgba(255,255,255,.12);padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;align-items:center;color:#7f96b3;font-size:.82rem}
.footer-legalline .ico{display:inline-flex;align-items:center;gap:.4rem}
.badge-ico{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:.25rem .6rem;color:#c9d8ea;font-weight:600;font-size:.75rem}

/* ---- Cookie banner ---- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(13,35,64,.12);padding:1rem var(--pad);display:none}
.cookie-banner.show{display:block}
.cookie-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.cookie-inner p{margin:0;font-size:.88rem;color:var(--body);max-width:62ch}
.cookie-inner strong{color:var(--navy)}
.cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-actions .btn{padding:.65rem 1.4rem;font-size:.92rem}
/* Cookie banner: Accept and Reject carry EQUAL visual weight (per the Cookie Policy) */
.cookie-actions .btn-primary,.cookie-actions .btn-secondary{background:var(--navy);color:#fff;border:2px solid var(--navy);box-shadow:none}
.cookie-actions .btn-primary:hover,.cookie-actions .btn-secondary:hover{background:#0a1a30;border-color:#0a1a30;box-shadow:none}
.btn-secondary{background:var(--bg-soft);color:var(--navy);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--mid)}
@media (max-width:620px){.cookie-inner{flex-direction:column;align-items:stretch}.cookie-actions .btn{flex:1}}

/* ---- Utilities ---- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1rem}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;border-radius:8px;z-index:100;box-shadow:var(--shadow)}

/* ---- Trustpilot Review Collector -------------------------------------------
   THE HOMEPAGE CARRIES THE BADGE AND NOTHING ELSE — no heading, no sentence —
   in the gap at the foot of <main>, above the footer. Two conversions already
   sit above it ("Apply for the Free 30-Day Beta" and "Take the survey"); a
   third worded ask underneath them would compete with both.

   CENTRED BY CAPPING THE BOX, which is the part that actually matters.
   Trustpilot's own stylesheet already centres the badge inside its iframe —
   `.tp-widget-wrapper{margin:0 auto;max-width:750px;text-align:center}` — but
   data-style-width is 100%, so the iframe filled the whole 760px column and a
   ~200px badge sat marooned in the middle of it, reading as empty space rather
   than as a deliberate mark. Capping the BOX makes the iframe the badge, so
   there is nothing left over to look off-centre.

   340px is inside Trustpilot's own supported range for this template: their
   internal breakpoints are at 180px and 220px, and the only rule above those
   (min-width:400px) sizes the loading placeholder, not the badge itself.

   Nothing here styles the widget's contents. It is an iframe on their domain;
   a rule reaching into it would either do nothing or break it. */
/* ITS OWN ROW, CENTRED. Nothing positioned, nothing offset — the two attempts
   that went wrong both tried to place the badge inside the three-column grid:
   once in the Explore column, which put it a third of the way across, and once
   absolutely positioned with margin-left:-110px, which put it further wrong.
   A full-width row under the columns only ever needed text-align:center.
   The footer columns are left exactly as they were: the flex-column and
   margin-top:auto rules that bottom-aligned the ICO line existed only to line
   it up with a badge that is no longer beside it, so they are gone too.
   220px is the badge's own width, measured from Trustpilot's template CSS and
   the Arial metrics it renders in: the button is 181.9px (2px border + 8px
   padding + 84.0px "Review us on" + 4px margin + 3.9px word space + 80px logo),
   and their @media (min-width:220px) is what keeps its text and logo on one
   line — a hair under it and the badge stacks into two rows. */
.footer-tp{ text-align:center; margin-bottom:1.8rem; }
.footer-tp .trustpilot-widget{ width:220px; margin:0 auto; min-height:52px; }