/* inner.css: brings every inner page onto the homepage system. Loaded last. */

/* nav: outline button, same as the homepage */
.nav .wrap>.btn{background:transparent;color:var(--blue-700);border:1.5px solid var(--blue-600);box-shadow:none}
.nav .wrap>.btn:hover{background:var(--blue-600);color:#fff}

/* type scale: one h1, one h2, one h3 */
.masthead h1,.ahero h1,.hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.05;letter-spacing:-.025em;font-weight:600;max-width:16ch;text-wrap:balance}
.sec h2,.card h2,.closer h2,.acta h2,.cta h2{font-size:clamp(26px,2.6vw,32px);line-height:1.12;letter-spacing:-.025em;font-weight:500;margin-bottom:12px;max-width:24ch;text-wrap:balance}
.sec h3,.card h3{font-weight:600;letter-spacing:-.015em}
.sec .lead,.masthead .lead,.ahero .lead{font-size:17px;line-height:1.6;max-width:56ch}
.eyebrow,.masthead .eyebrow{font-size:12px;letter-spacing:.12em}

/* surfaces: only the three tints the homepage uses */
.card.c-lilac{background:var(--mist)!important}
.card.c-blush{background:var(--peach,#FBF1E6)!important}
.card.c-aurora{background:var(--mist)!important}
.card.c-mist,.card.c-cream,.card.c-peach{background-image:none!important}
.card.c-mist{background:#EEF3F9!important}
.card.c-cream{background:#FBF6EC!important}
.card.c-peach{background:#F9EFE6!important}
.card{box-shadow:none}
.sec .card{padding:56px 48px}
@media(max-width:700px){.sec .card{padding:26px 20px}}

/* numbered markers off */
.steps3 .n,.pn,.view .n,.c-lilac h3 .n,.stepnum,.num i{display:none!important}
.steps3 li{grid-template-columns:minmax(0,1fr)}
.steps3 li,.flow .st,.cats li,.note,.priv div,.seq li,.graph,.fcard,.scard,.symrow li,.quote{box-shadow:none;border:1px solid var(--line)}

/* pull quotes: the homepage style, not purple bold italic */
.tq p,.pq blockquote,.why p.strong,.why p.kicker{color:var(--ink)!important;font-weight:400!important;font-style:normal!important}
.tq p,.pq blockquote{font-size:20px;line-height:1.45;letter-spacing:-.01em}
.why p.strong{font-size:19px;line-height:1.5}
.why p.strong em{font-style:normal!important;font-weight:600!important}
.tq cite,.pq cite{color:var(--ink-2)!important;opacity:1!important;font-style:normal}
.tq,.pq{border-left:3px solid var(--blue-500);padding-left:22px;background:transparent!important;box-shadow:none!important}
.ctanote{font-style:normal;font-weight:500}

/* closing block: the drawn sky, no photo */
.closer .photo{display:none}
.closer{background:
  radial-gradient(1px 1px at 10% 22%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.4px 1.4px at 31% 68%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(1px 1px at 46% 18%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.6px 1.6px at 63% 80%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(1px 1px at 74% 30%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(1.2px 1.2px at 89% 62%,rgba(255,255,255,.65),transparent 60%),
  radial-gradient(1px 1px at 20% 90%,rgba(255,255,255,.45),transparent 60%),
  radial-gradient(1.3px 1.3px at 95% 12%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(60% 70% at 85% 0%,rgba(51,184,166,.16),transparent 70%),
  radial-gradient(130% 100% at 22% 100%,#18305A 0%,#0F2145 42%,#091A33 100%)}
.closer .scrim{background:none}
.closer{padding:48px 48px}
.closer h2{color:#fff}
.closer .thought{font-size:17px}
.quote2{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
@media(max-width:700px){.closer{padding:26px 20px}}

/* dark form heroes (waitlist, partnership) use the same sky */
.ahero.dk,.hero.dk,.formhero{background:
  radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1.4px 1.4px at 41% 28%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(1.6px 1.6px at 69% 22%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1px 1px at 88% 34%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(130% 100% at 22% 0%,#18305A 0%,#0F2145 42%,#091A33 100%)!important}
.ahero.dk .photo,.hero.dk .photo,.formhero .photo{display:none!important}

/* how it works: phones stop overlapping, legend uses the width */
.phonerow{gap:28px}
.phonerow .view{margin:0!important}
.phonerow .view:hover{transform:none}
.phonerow:hover .view{filter:none}
.symlegend .symrow{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
@media(max-width:900px){.symlegend .symrow{grid-template-columns:1fr!important}}
.legwrap .legs{grid-template-columns:1fr!important}
.legwrap .symrow{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.legwrap .symrow li{align-items:start}
@media(max-width:900px){.legwrap .symrow{grid-template-columns:1fr!important}}
.legwrap .symnote{max-width:70ch}

/* audience heroes: flat, same padding as the rest */
.ahero{box-shadow:none}
.ahero .in{padding:56px 48px}
@media(max-width:700px){.ahero .in{padding:26px 20px}}

/* footer: the homepage footer */
.fg2{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;align-items:start}
.fbrand .mark{margin-bottom:10px}
.ftag{font-size:15px;color:#DCE3F0;margin:0 0 14px;max-width:26ch}
.fmail{font-size:14px;margin:0}
.flegal{margin:22px 0 0;padding:0;border:0;font-size:13px;line-height:1.55;max-width:36ch;color:#AEB7C6}
.fbottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.fsmall{font-size:13px;line-height:1.6;margin:0;opacity:.85}
@media(max-width:820px){.fg2{grid-template-columns:1fr 1fr;gap:28px}.fbrand{grid-column:1/-1}.flegal{max-width:none}}

/* form pages: hero on the drawn sky */
.heroband .hero .photo{display:none}
.heroband .hero{background:
  radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1.4px 1.4px at 41% 28%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(1.6px 1.6px at 69% 22%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1px 1px at 88% 34%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.2px 1.2px at 27% 62%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(130% 100% at 22% 0%,#18305A 0%,#0F2145 42%,#091A33 100%)}
.heroband .hero .scrim{background:none}
.heroband .hero h1{font-weight:600}
.heroband .hero .hsub,.heroband .hero .lead{color:#C9D8F2}
.heroband .hero .btn{background:#fff;color:#0B1F3A;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* aurora: the sky blocks carry a visible northern-lights glow, top right teal, bottom left violet */
.heroband .hero{position:relative;overflow:visible}.closer{position:relative;overflow:hidden}
.closer,.card.nband{position:relative;overflow:hidden}
.card.nband>*{position:relative;z-index:1}
.heroband .hero::before,.closer::before,.card.nband::before{content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none;background:
  radial-gradient(60% 45% at 78% 4%,rgba(72,214,180,.62) 0%,rgba(72,214,180,.22) 40%,transparent 68%),
  radial-gradient(38% 30% at 55% 16%,rgba(120,232,200,.30) 0%,transparent 60%),
  radial-gradient(55% 45% at 12% 100%,rgba(150,118,246,.58) 0%,rgba(150,118,246,.20) 40%,transparent 68%),
  radial-gradient(35% 30% at 34% 88%,rgba(214,110,190,.26) 0%,transparent 60%),
  linear-gradient(112deg,transparent 30%,rgba(72,214,180,.16) 44%,transparent 56%),
  linear-gradient(108deg,transparent 52%,rgba(150,118,246,.14) 66%,transparent 78%);
  filter:blur(18px);clip-path:inset(0 round var(--rbig))}
.heroband .hero>*,.closer>*{position:relative;z-index:1}
.heroband .hero .photo,.heroband .hero .scrim,.closer .photo,.closer .scrim{z-index:0}

/* page titles line up with the section text below them */
.masthead{padding-inline:0}
.masthead>.wrap{padding-inline:88px}
@media(max-width:820px){.masthead>.wrap{padding-inline:40px}}
@media(max-width:700px){.masthead>.wrap{padding-inline:32px}}

/* form heroes: text on the same 128px line as everything else */
.heroband .hero>.wrap{padding-inline:48px}
/* mobile: every title on the same 40px line */
@media(max-width:600px){.heroband .hero>.wrap{padding-inline:24px}.ahero .copy{padding-inline:0}.ahero.wide .copy{padding-inline:20px}.masthead>.wrap{padding-inline:40px}}
#invite .card{background:#F9EFE6!important;background-image:none!important}

/* audience pages: no half-empty rows */
.feat:has(.f:nth-child(2):last-child),.feat:has(.f:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.feat .f:nth-child(5):last-child{grid-column:span 2}
.feat .f.say{background:transparent;border:0;display:flex;align-items:center;padding:8px 22px}
.feat .f.say p{font-size:19px;line-height:1.45;color:var(--ink);font-weight:500;margin:0}
@media(max-width:980px){.feat .f:nth-child(5):last-child{grid-column:auto}}
@media(max-width:600px){.feat:has(.f:nth-child(2):last-child),.feat:has(.f:nth-child(4):last-child){grid-template-columns:1fr}}
.evgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px;align-items:start}
.evgrid>*{min-width:0}
.evgrid .quote{margin:0;padding:22px 24px;background:#fff!important;border:1px solid var(--line)!important;border-left:3px solid var(--blue-500)!important;border-radius:0 var(--rc) var(--rc) 0}
.evgrid .quote p{font-size:18px}
@media(max-width:900px){.evgrid{grid-template-columns:1fr;gap:22px}}
.evside{display:grid;gap:18px}
.evside .vetpic{float:none;width:100%;margin:0}
.evside .vetpic img{border-radius:var(--rc);box-shadow:none;aspect-ratio:4/3;object-fit:cover}
.evgrid .ev .quote{margin-top:22px}
.evside{align-self:stretch}
.evside .vetpic{height:100%}
.evside .vetpic img{height:100%;aspect-ratio:auto;object-position:50% 20%}
.evside{min-width:0;position:relative}
.evside .vetpic{width:100%;height:100%;margin:0;float:none;line-height:0;position:absolute;inset:0}
.evside .vetpic img{width:100%;height:100%;object-fit:cover;border-radius:var(--rc);display:block;box-shadow:none;aspect-ratio:auto}
@media(max-width:900px){.evside{min-height:280px}}
/* photo beside a quote or a closing line, inside the card */
.picrow{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:center;margin-top:26px}
.picrow .vetpic{float:none;width:100%;margin:0;line-height:0}
.picrow .vetpic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 25%;border-radius:var(--rc);display:block;box-shadow:none}
.picrow .quote{margin:0}
.picrow .say{font-size:19px;line-height:1.45;color:var(--ink);font-weight:500;margin:0;max-width:40ch}
@media(max-width:700px){.picrow{grid-template-columns:1fr}}
/* evidence card: paragraph, then a modest photo beside the quote, then the disclaimer and sources last */
.picrow{grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;margin:24px 0 0;max-width:820px}
.picrow .vetpic img{aspect-ratio:4/3}
.picrow .quote{padding:18px 20px}
.picrow .quote p{font-size:17px;line-height:1.5}
.picrow .say{font-size:21px;line-height:1.4}
.ev .notice{margin-top:24px}
.ev .src{margin-top:12px}
/* evidence card fills its width */
.ev p,.ev .src,.ev .notice,.picrow{max-width:none}
.ev>p:first-child{max-width:72ch}
.picrow{grid-template-columns:240px minmax(0,1fr);gap:28px}
.picrow .quote{min-height:180px;display:flex;flex-direction:column;justify-content:center}
.picrow .quote,.picrow blockquote{max-width:none!important;width:100%}
@media(max-width:700px){.picrow{grid-template-columns:1fr!important;gap:16px}.picrow .vetpic{max-width:260px}.picrow .quote{min-height:0}}
/* who-chooser avatars stay inside the card on phones */
@media(max-width:600px){.who{padding-inline:2px;margin-inline:0}.whob{width:76px}}
/* hero photos on audience pages cap their height */
.ahero .pic img{max-height:560px}
/* per-photo crop anchors so nobody loses a head */
.picrow .vetpic img[src*="run-"]{object-position:50% 0%}
.picrow .vetpic img[src*="vet-"]{object-position:50% 30%}
.picrow .vetpic img[src*="athome-"]{object-position:50% 20%}
.picrow .vetpic img[src*="friends-picnic"]{object-position:50% 0%}