/* ============================================================
   Mary Care shared marketing site styles
   Built on the Mary Brand Guidelines v1.0
   ============================================================ */

:root{
  /* Brand */
  --mary-navy:#1D4A6A;
  --mary-navy-deep:#163A54;
  --mary-blue:#2D6A8C;
  --comp-navy:#244359;
  --sky:#9CCDE0;

  /* Surfaces */
  --warm-cream:#F5EFE6;
  --warm-beige:#F7F4EE;
  --cool-tint:#EAF2FB;
  --cool-surface:#F0F4F8;
  --paper:#FFFFFF;

  /* Ink */
  --ink:#1A2332;
  --ink-2:#2C3E4A;
  --muted:#6A7888;
  --line:#E3E8EE;
  --line-soft:#ECEEF1;

  /* Action */
  --cta:#2176C7;            /* tweakable accent */
  --cta-ink:#FFFFFF;
  --sos:#C0392B;
  --success:#2F855A;
  --amber:#B7791F;

  /* Tweakable surface accents (warmth) */
  --alt-bg:var(--warm-beige);
  --alt-bg-2:var(--cool-tint);
  --hero-bg:var(--warm-beige);

  /* Type */
  --serif:'Iowan Old Style','Palatino Linotype','Palatino','Book Antiqua',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Montserrat',system-ui,sans-serif;
  --headline:var(--serif);   /* tweakable: serif <-> display */

  /* Shape */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --shadow-sm:0 2px 8px -2px rgba(15,40,70,.10);
  --shadow:0 14px 36px -16px rgba(15,40,70,.22);
  --shadow-lg:0 30px 70px -28px rgba(15,40,70,.32);

  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3,h4,h5{margin:0;}
p{margin:0;}
::selection{background:var(--sky);color:var(--mary-navy-deep);}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ============ Typography helpers ============ */
.eyebrow{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:12px;letter-spacing:2.5px;font-weight:600;
  color:var(--cta);
  margin:0 0 18px;
}
.eyebrow--muted{color:var(--mary-blue);}
.display{
  font-family:var(--headline);
  font-weight:var(--headline-weight,400);
  font-style:var(--headline-style,normal);
  letter-spacing:var(--headline-spacing,-1px);
  line-height:1.04;
  color:var(--ink-2);
  text-wrap:balance;
}
/* When headline = Montserrat, adjust weight/spacing */
:root[data-headline="display"]{
  --headline:var(--display);
  --headline-weight:700;
  --headline-spacing:-1.2px;
}
.display em{font-style:italic;color:var(--mary-blue);}
:root[data-headline="display"] .display em{font-style:normal;color:var(--cta);}

.h-xl{font-size:clamp(40px,6vw,76px);}
.h-lg{font-size:clamp(34px,4.6vw,56px);}
.h-md{font-size:clamp(26px,3.2vw,40px);}
.lede{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.6;
  color:var(--muted);
  max-width:62ch;
}
.lede--tight{max-width:52ch;}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:16px;
  padding:15px 26px;border-radius:var(--r-sm);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s,filter .18s;
  min-height:52px;line-height:1;
}
.btn svg{flex-shrink:0;}
.btn-primary{background:var(--cta);color:var(--cta-ink);box-shadow:0 10px 24px -12px var(--cta);}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--cta);}
.btn-secondary{background:var(--paper);color:var(--mary-navy);border-color:var(--line);}
.btn-secondary:hover{border-color:var(--cta);color:var(--cta);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--mary-navy);border-color:rgba(29,74,106,.25);}
.btn-ghost:hover{background:rgba(29,74,106,.05);}
.btn-ondark{background:#fff;color:var(--mary-navy);}
.btn-ondark:hover{transform:translateY(-2px);filter:brightness(.98);}
.btn-ondark-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
.btn-ondark-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);}
.btn-lg{padding:18px 32px;font-size:17px;min-height:58px;}
.btn-sm{padding:11px 18px;font-size:14px;min-height:42px;}

/* ============ Nav ============ */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  display:flex;align-items:center;gap:24px;
  height:78px;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{height:40px;width:auto;}
.brand-word{
  font-family:var(--display);font-weight:700;
  font-size:21px;letter-spacing:5px;color:var(--mary-navy);
}
.nav-links{
  display:flex;align-items:center;gap:4px;
  margin-left:auto;
}
.nav-link{
  background:none;border:none;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  padding:10px 13px;border-radius:8px;
  transition:background .15s,color .15s;
  white-space:nowrap;text-decoration:none;
}
.nav-link:hover{background:rgba(29,74,106,.06);color:var(--mary-navy);}
.nav-link.is-active{color:var(--cta);font-weight:600;}
.nav-cta-group{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-cta-group .btn{min-height:44px;padding:11px 20px;font-size:14.5px;}
.burger{
  display:none;width:46px;height:46px;border-radius:10px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{width:20px;height:2px;background:var(--mary-navy);border-radius:2px;transition:.2s;}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(86vw,360px);
  background:#fff;z-index:200;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  padding:24px;overflow-y:auto;
}
.drawer.is-open{transform:translateX(0);}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.drawer-close{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px;color:var(--mary-navy);}
.drawer a{
  display:block;padding:14px 12px;font-size:18px;font-weight:500;
  color:var(--ink-2);border-radius:10px;border-bottom:1px solid var(--line-soft);
}
.drawer a:hover{background:var(--warm-beige);}
.drawer a.is-active{color:var(--cta);}
.drawer .btn{margin-top:18px;width:100%;}
.scrim{position:fixed;inset:0;background:rgba(20,30,45,.4);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s;}
.scrim.is-open{opacity:1;pointer-events:auto;}

/* ============ Sections ============ */
.section{padding:96px 0;}
.section--sm{padding:64px 0;}
.section--warm{background:var(--alt-bg);}
.section--cool{background:var(--alt-bg-2);}
.section--cream{background:var(--warm-cream);}
.section--navy{background:var(--mary-navy);color:#E8F0F5;}
.section--navy .display{color:#fff;}
.section--navy .lede{color:rgba(232,240,245,.8);}
.section--navy .eyebrow{color:var(--sky);}

.section-head{max-width:760px;margin:0 0 56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head .lede{margin-top:20px;}
.section-head.center .lede{margin-left:auto;margin-right:auto;}

/* ============ Cards ============ */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:30px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D4DEE8;}
.card-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cool-tint);color:var(--cta);
  margin-bottom:20px;
}
.section--navy .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);}
.section--navy .card-icon{background:rgba(156,205,224,.16);color:var(--sky);}
.card h3{
  font-family:var(--display);font-weight:600;font-size:19px;
  color:var(--ink-2);margin-bottom:8px;letter-spacing:-.2px;
}
.section--navy .card h3{color:#fff;}
.card p{font-size:15px;color:var(--muted);line-height:1.6;}
.section--navy .card p{color:rgba(232,240,245,.75);}

/* ============ Image placeholders ============ */
.ph{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:
    repeating-linear-gradient(135deg,rgba(29,74,106,.05) 0 12px,rgba(29,74,106,.09) 12px 24px),
    var(--cool-surface);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  min-height:180px;color:var(--mary-blue);
}
.ph::after{
  content:attr(data-label);
  font-family:'SF Mono','Menlo','Consolas',monospace;
  font-size:12px;letter-spacing:.5px;
  color:var(--mary-blue);
  background:rgba(255,255,255,.78);
  padding:7px 13px;border-radius:999px;
  text-align:center;max-width:80%;
}
.ph--photo{
  background:
    repeating-linear-gradient(135deg,rgba(29,74,106,.04) 0 14px,rgba(29,74,106,.08) 14px 28px),
    var(--warm-cream);
}

/* ============ Misc components ============ */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
  background:rgba(33,118,199,.10);color:var(--cta);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.pill--cream{background:rgba(255,255,255,.14);color:#fff;}

.trust-line{
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  font-size:14.5px;color:var(--muted);
}
.trust-line span{display:inline-flex;align-items:center;gap:9px;}
.trust-line .tick{color:var(--success);flex-shrink:0;}

/* feature list with ticks */
.tick-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.tick-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--ink);line-height:1.55;}
.tick-list li svg{flex-shrink:0;margin-top:3px;color:var(--cta);}
.section--navy .tick-list li{color:rgba(232,240,245,.9);}
.section--navy .tick-list li svg{color:var(--sky);}

/* split layout */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split--media-left{direction:rtl;}
.split--media-left>*{direction:ltr;}

/* ============ Roadmap ============ */
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.road-col{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:28px 26px;
}
.road-col h3{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:.3px;color:var(--ink-2);margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.road-col h3 .dot{width:10px;height:10px;border-radius:50%;}
.road-col ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.road-col li{font-size:15px;color:var(--ink);display:flex;gap:10px;align-items:flex-start;}
.road-col li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mary-blue);margin-top:9px;flex-shrink:0;}
.road-now .dot{background:var(--success);}
.road-next .dot{background:var(--cta);}
.road-planned .dot{background:var(--amber);}
.road-tag{
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:auto;
}
.road-now .road-tag{background:#E6F6EC;color:var(--success);}
.road-next .road-tag{background:#E3F2FD;color:var(--cta);}
.road-planned .road-tag{background:#FBF3E2;color:var(--amber);}

/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 4px;font-family:var(--display);font-weight:600;font-size:19px;
  color:var(--ink-2);letter-spacing:-.2px;
}
.faq-q .chev{flex-shrink:0;transition:transform .25s;color:var(--cta);}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;}
.faq-a-inner{padding:0 4px 26px;font-size:16.5px;color:var(--muted);line-height:1.65;max-width:68ch;}
.faq-item.open .faq-a{max-height:340px;}

/* ============ Steps ============ */
.steps{display:grid;gap:20px;counter-reset:step;}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 28px;box-shadow:var(--shadow-sm);
}
.step-num{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--mary-navy);color:#fff;
  font-family:var(--display);font-weight:700;font-size:19px;
}
.step h3{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink-2);margin-bottom:6px;}
.step p{font-size:16px;color:var(--muted);}
.connection-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.connection-node{min-width:180px;max-width:230px;flex:1 1 180px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 18px;box-shadow:var(--shadow-sm);}
.connection-node strong{display:block;font-family:var(--display);font-size:18px;color:var(--ink-2);margin-bottom:6px;}
.connection-node span{font-size:14px;color:var(--muted);}
.connection-node--account{background:var(--mary-navy);border-color:var(--mary-navy);}
.connection-node--account strong{color:#fff;}
.connection-node--account span{color:rgba(255,255,255,.78);}
.connection-arrow{font-size:34px;color:var(--cta);font-weight:700;}
.connection-plus{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
@media (max-width:760px){
  .connection-flow{flex-direction:column;}
  .connection-node{width:100%;max-width:420px;flex-basis:auto;}
  .connection-arrow{transform:rotate(90deg);line-height:1;}
}

/* ============ CTA band ============ */
.cta-band{
  background:
    radial-gradient(60% 80% at 88% 120%,rgba(156,205,224,.22) 0%,rgba(156,205,224,0) 60%),
    radial-gradient(60% 90% at 0% 0%,rgba(58,111,134,.34) 0%,rgba(58,111,134,0) 60%),
    linear-gradient(180deg,#235978 0%,var(--mary-navy) 100%);
  color:#fff;border-radius:var(--r-xl);
  padding:72px 64px;text-align:center;position:relative;overflow:hidden;
}
.cta-band .display{color:#fff;}
.cta-band .lede{color:rgba(255,255,255,.82);margin:18px auto 36px;}
.cta-band .btn-row{justify-content:center;}
/* A CTA band with no lede puts the buttons straight under the headline, where
   they clip its descenders. Stand them off by the gap the lede would have left. */
.cta-band .display + .btn-row{margin-top:36px;}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
/* Official app store badges, used as supplied by Google and Apple.
   Both artworks show 48px tall. The Google Play PNG ships with padding baked
   in, so its link is pulled in 11px a side to line the visible badge up with
   Apple's and to keep the gap between the two even. */
.store-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.store-badge img{height:48px;width:auto;max-width:none;display:block;transition:transform .15s ease;}
.store-badge:hover img{transform:translateY(-2px);}
.store-badge--google{margin:-11px;}
.store-badge--google img{height:70px;}

/* ============ Footer ============ */
.site-foot{background:var(--ink);color:rgba(255,255,255,.66);padding:72px 0 36px;font-size:14.5px;}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);}
.foot-brand .brand-word{color:#fff;}
.foot-brand img{height:38px;filter:brightness(0) invert(1);}
.foot-brand p{margin-top:18px;max-width:34ch;line-height:1.6;color:rgba(255,255,255,.6);font-size:14px;}
.foot-col h4{font-family:var(--display);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px;font-weight:600;}
.foot-col a{display:block;padding:7px 0;color:rgba(255,255,255,.72);transition:color .15s;}
.foot-col a:hover{color:#fff;}
.foot-meta{display:flex;flex-wrap:wrap;gap:8px 28px;padding:28px 0 0;font-size:13px;color:rgba(255,255,255,.5);}
.foot-disclaimer{
  margin-top:28px;padding:20px 24px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-size:13px;line-height:1.65;color:rgba(255,255,255,.62);max-width:none;
}
.foot-disclaimer strong{color:rgba(255,255,255,.85);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:28px;font-size:13px;color:rgba(255,255,255,.5);}

/* ============ Forms ============ */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow);}
.field{margin-bottom:22px;}
.field label{display:block;font-weight:600;font-size:14.5px;color:var(--ink-2);margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(33,118,199,.14);}
.field textarea{resize:vertical;min-height:130px;}
.check-row{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--warm-beige);}
.check-row input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--cta);}
.check-row label{font-size:15px;color:var(--ink);margin:0;font-weight:500;}

/* ============ Stat / number row ============ */
.stat-row{display:flex;flex-wrap:wrap;gap:48px;}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,48px);color:var(--mary-navy);line-height:1;letter-spacing:-1px;}
.section--navy .stat .n{color:#fff;}
.stat .l{font-size:14px;color:var(--muted);margin-top:8px;max-width:22ch;}
.section--navy .stat .l{color:rgba(232,240,245,.7);}

/* ============ Hero ============ */
.hero{background:var(--hero-bg);padding:72px 0 88px;position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{margin:18px 0 24px;}
.hero .lede{margin-bottom:32px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:460px;}
.hero-blob{
  position:absolute;width:118%;aspect-ratio:1;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:radial-gradient(circle at 36% 32%,rgba(45,106,140,.20),rgba(33,118,199,.10) 60%,rgba(33,118,199,0));
}
.hero-photo{position:relative;z-index:2;}
.hero-photo img{width:100%;max-width:520px;filter:drop-shadow(0 30px 50px rgba(15,40,70,.22));}
.hero-card{
  position:absolute;z-index:3;background:#fff;border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:16px 18px;display:flex;gap:13px;align-items:center;
  border:1px solid var(--line-soft);
}
.hero-card .hc-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-card .hc-t{font-weight:700;font-size:14px;color:var(--ink-2);font-family:var(--display);}
.hero-card .hc-s{font-size:12.5px;color:var(--muted);}
.hero-card.card-a{top:8%;left:-2%;}
.hero-card.card-b{bottom:6%;right:-3%;}

/* ============ Legal / prose ============ */
.prose{max-width:760px;}
.prose .updated{font-size:14px;color:var(--muted);margin:-8px 0 36px;}
.prose h2{
  font-family:var(--display);font-weight:600;font-size:24px;
  color:var(--ink-2);letter-spacing:-.3px;
  margin:44px 0 14px;
}
.prose p{font-size:17px;color:var(--ink);line-height:1.7;margin-bottom:16px;}
.prose ul{margin:0 0 16px;padding-left:0;list-style:none;display:grid;gap:12px;}
.prose ul li{
  position:relative;padding-left:26px;font-size:17px;color:var(--ink);line-height:1.6;
}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:11px;
  width:7px;height:7px;border-radius:50%;background:var(--mary-blue);
}
.prose a{color:var(--cta);font-weight:600;}
.prose strong{color:var(--ink-2);}

/* ============ Phone frame ============ */
.phone-frame-wrap{display:flex;justify-content:center;}
.phone-frame{
  width:300px;max-width:78%;
  border-radius:40px;
  background:#10222F;
  padding:11px;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.phone-frame::before{
  content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:90px;height:6px;border-radius:99px;background:rgba(255,255,255,.22);z-index:2;
}
.phone-frame img{
  width:100%;border-radius:30px;display:block;
}

/* ============ Logo lockups in dark ============ */
.on-navy-logo{filter:brightness(0) invert(1);}

/* ============ Responsive ============ */
@media (max-width:1040px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .nav-cta-group .btn-cta-text{display:none;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .split{gap:44px;}
}
@media (max-width:820px){
  .section{padding:72px 0;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-art{min-height:340px;order:-1;}
  .split{grid-template-columns:1fr;gap:32px;}
  .split--media-left{direction:ltr;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .roadmap{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px;}
  .cta-band{padding:56px 32px;}
  .stat-row{gap:32px;}
}
@media (max-width:560px){
  .container{padding:0 20px;}
  .section{padding:56px 0;}
  .grid-4{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr;}
  .form-card{padding:26px 22px;}
  .cta-band{padding:44px 22px;}
  .hero-card{display:none;}
}

/* ============================================================
   v2 OVERHAUL COMPONENTS
   ============================================================ */

/* ---- Heart logo sizing (replaces shield) ---- */
.brand img{height:38px;width:auto;}
.foot-brand img{height:40px;filter:none;}   /* white-heart asset already light */

/* ---- Nav login CTA ---- */
.nav-login{display:inline-flex;}
@media (max-width:1040px){
  .nav-login{display:none;}
  .nav-cta-group{margin-left:auto;}
}

/* ---- Eyebrow on warm/cream uses brand blue for contrast ---- */
.section--warm .eyebrow,.section--cream .eyebrow{color:var(--mary-blue);}

/* ---- Story / lived-experience pull quote ---- */
.story{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
}
.story-quote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(26px,3.4vw,40px);line-height:1.28;letter-spacing:-.4px;
  color:var(--ink-2);text-wrap:balance;
}
.story-quote .lead{color:var(--mary-blue);}
.story-by{margin-top:24px;font-size:15px;color:var(--muted);}
.story-by strong{display:block;color:var(--ink-2);font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.2px;}

/* ---- Video placeholder ---- */
.video-ph{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  background:repeating-linear-gradient(135deg,rgba(29,74,106,.06) 0 16px,rgba(29,74,106,.1) 16px 32px),var(--warm-cream);
  border:1px solid var(--line);display:flex;align-items:flex-end;
}
.video-ph .play{
  position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;color:var(--cta);
}
.video-ph .vlabel{
  position:relative;z-index:1;margin:18px;font-family:'SF Mono','Menlo',monospace;
  font-size:12px;color:var(--mary-blue);background:rgba(255,255,255,.82);
  padding:7px 13px;border-radius:999px;
}

/* ---- Trust signals row ---- */
.signals{display:flex;flex-wrap:wrap;gap:14px;}
.signal{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.signal svg{color:var(--success);flex-shrink:0;}
.section--navy .signal{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff;}
.section--navy .signal svg{color:var(--sky);}

/* ---- Mindset / discovery journeys ---- */
.mindsets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mindset{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:30px 28px;box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.mindset:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D4DEE8;}
.mindset .m-tag{
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--cta);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:8px;
}
.mindset .m-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;}
.mindset h3{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink-2);margin-bottom:12px;}
.mindset .m-quote{
  font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;
  color:var(--mary-navy);margin-bottom:16px;text-wrap:pretty;
}
.mindset p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:20px;}
.mindset .m-link{
  margin-top:auto;font-weight:600;font-size:15px;color:var(--cta);
  display:inline-flex;align-items:center;gap:8px;
}
.mindset .m-link svg{transition:transform .18s;}
.mindset:hover .m-link svg{transform:translateX(4px);}

/* ---- MARY promise (4 simple cards on home) ---- */
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.promise-card{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:30px 30px;box-shadow:var(--shadow-sm);
}
.promise-card .pl{
  font-family:var(--display);font-weight:800;font-size:40px;line-height:1;
  width:64px;height:64px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--cool-tint);color:var(--cta);
}
.promise-card h3{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink-2);margin-bottom:8px;letter-spacing:-.2px;}
.promise-card p{font-size:15.5px;color:var(--muted);line-height:1.6;}
.promise-card .ptag{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--mary-navy);}

/* ---- MARY promise matrix (for-families) ---- */
.promise-row{
  display:grid;grid-template-columns:230px repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);
}
.promise-row.head{border-top:none;}
.promise-row.head > div{
  font-family:var(--display);text-transform:uppercase;font-size:11px;letter-spacing:1.6px;
  font-weight:700;color:var(--ink-2);padding:0 22px 16px;
}
.promise-row.head .mh{color:var(--cta);}
.promise-matrix{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 6px;box-shadow:var(--shadow-sm);overflow:hidden;}
.promise-cell{padding:22px;}
.promise-cell.label{border-right:1px solid var(--line);}
.promise-cell .pl{
  font-family:var(--display);font-weight:800;font-size:30px;color:var(--cta);
  display:flex;align-items:center;gap:14px;margin-bottom:8px;
}
.promise-cell .label-title{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink-2);}
.promise-cell .label-tag{margin-top:8px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--mary-navy);}
.promise-cell p{font-size:14.5px;color:var(--ink);line-height:1.55;}

/* ---- Story photo ---- */
.story-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);}
.story-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.story-cap,.album-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;font-size:12.5px;color:#fff;font-weight:500;background:linear-gradient(transparent,rgba(20,30,45,.76));}

/* ---- Family album ---- */
.album-photo{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--warm-cream);}
.album .album-photo{margin:0;width:100%;}
.album-photo img{width:100%;height:auto;display:block;}
.album-photo figcaption{font-size:11px;padding:16px 11px 9px;}
.album{display:flex;gap:16px;align-items:flex-start;}
.album-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}
.album .ph{min-height:0;height:100%;}
.album .a-tall{grid-row:span 2;}
.album .a-wide{grid-column:span 2;}
.album .ph::after{font-size:11px;}

/* ---- Resource hub ---- */
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.resource{
  display:flex;flex-direction:column;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 24px;box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s;
}
.resource:hover{border-color:var(--cta);transform:translateY(-3px);}
.resource h4{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-2);}
.resource p{font-size:14px;color:var(--muted);line-height:1.55;}
.resource .r-go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--cta);display:inline-flex;align-items:center;gap:6px;}

/* ---- Section intro tagline pill ---- */
.kicker-quote{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,28px);
  line-height:1.4;color:var(--mary-navy);max-width:30ch;text-wrap:balance;
}

/* ---- Responsive for new components ---- */
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:32px;}
  .mindsets{grid-template-columns:1fr;}
  .promise-grid{grid-template-columns:1fr;}
  .resource-grid{grid-template-columns:1fr;}
  .promise-row{grid-template-columns:1fr;}
  .promise-cell.label{border-right:none;border-bottom:1px solid var(--line);background:var(--warm-beige);}
  .promise-row{border-top:none;border-bottom:8px solid transparent;}
  .promise-matrix{padding:14px;}
  .album{column-count:2;}
}
@media (max-width:560px){
  .album{flex-direction:column;}
  .promise-card{grid-template-columns:1fr;gap:14px;}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ---- Bio modal ---- */
.bio-modal{
  max-width:680px;width:calc(100% - 40px);border:none;border-radius:var(--r-lg);
  padding:0;box-shadow:0 30px 80px rgba(15,40,70,.35);background:#fff;color:var(--ink);
}
.bio-modal::backdrop{background:rgba(15,30,50,.55);}
.bio-modal-inner{position:relative;padding:42px 42px 36px;max-height:85vh;overflow:auto;}
.bio-modal-inner p{font-size:16px;line-height:1.72;color:var(--ink);margin:0 0 16px;}
.bio-close{
  position:absolute;top:14px;right:18px;background:none;border:none;
  font-size:30px;line-height:1;color:var(--muted);cursor:pointer;padding:4px;
}
.bio-close:hover{color:var(--ink-2);}
.readmore-btn:hover{text-decoration:underline;}
/* Cookie consent */
.cookie-banner {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 24px;
  width: min(1120px, calc(100% - 48px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px;
  border: 1px solid rgba(29, 74, 106, .2);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 48px rgba(17, 43, 62, .22);
}
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-banner__copy { flex: 1; }
.cookie-banner__copy h2 { margin: 0 0 6px; font-size: 1.25rem; }
.cookie-banner__copy p { margin: 0; color: var(--muted); }
.cookie-banner__actions { display: grid; grid-template-columns: 120px 120px; gap: 8px; flex: 0 0 auto; }
.cookie-banner__actions .btn { width: 120px; }
.cookie-text-button, .foot-cookie-settings {
  border: 0;
  padding: 0;
  background: none;
  color: var(--cta);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-text-button { grid-column: 1 / -1; justify-self: center; padding: 4px; }
.foot-cookie-settings { display: block; color: inherit; text-align: left; }
.cookie-modal { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 20px; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 31, 45, .68); }
.cookie-settings {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.cookie-settings__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cookie-settings__head h2 { margin: 4px 0 0; }
.cookie-settings__close { border: 0; background: none; color: var(--ink); font-size: 2rem; line-height: 1; cursor: pointer; }
.cookie-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 16px; border: 1px solid rgba(29, 74, 106, .18); border-radius: 12px; }
.cookie-category h3 { margin: 0 0 4px; font-size: 1rem; }
.cookie-category p { margin: 0; color: var(--muted); }
.cookie-category strong { flex: 0 0 auto; color: var(--ink); font-size: .85rem; }
.cookie-settings__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.cookie-settings__actions .btn { width: 100%; }
.cookie-modal-open { overflow: hidden; }
.cookie-declaration-table { margin: 18px 0 28px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cookie-declaration-table table { width: 100%; min-width: 680px; border-collapse: collapse; background: #fff; }
.cookie-declaration-table th, .cookie-declaration-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cookie-declaration-table th { color: var(--ink-2); background: var(--cool-tint); font-size: .9rem; }
.cookie-declaration-table tr:last-child td { border-bottom: 0; }

@media (max-width: 700px) {
  .cookie-banner { bottom: 12px; width: calc(100% - 24px); display: block; padding: 18px; }
  .cookie-banner__actions { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .cookie-banner__actions .btn { width: 100%; }
  .cookie-settings { padding: 20px; }
  .cookie-category { display: block; }
  .cookie-category strong { display: inline-block; margin-top: 10px; }
}