:root{
  --ink:#263b33;
  --muted:#59645b;
  --blue:#31564a;
  --navy:#ebe6da;
  --line:#d8d5c8;
  --paper:#efece3
}
.booking-dialog { width:min(1100px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1px solid #ccd1c3; border-radius:12px; background:#f7f4ec; color:var(--ink); box-shadow:0 24px 80px #14251f44; }
.booking-dialog::backdrop { background:#14251f99; }
.booking-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line); }
.booking-dialog-header h2 { font:400 1.5rem Georgia,serif; letter-spacing:normal; }
.booking-dialog-header button { padding:10px 14px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:3px; cursor:pointer; }
.booking-dialog iframe { display:block; width:100%; height:min(720px,calc(100dvh - 125px)); border:0; }
@media(max-width:600px) { .booking-dialog-header { padding:14px; } .booking-dialog-header h2 { font-size:1.15rem; } }
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body{
  margin:0;
  color:var(--ink);
  background:#f7f4ec;
  font-family:Inter,Arial,sans-serif;
  line-height:1.65
}
a{
  color:var(--blue);
  text-underline-offset:4px
}
a:hover{
  text-decoration-thickness:2px
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #1582c5;
  outline-offset:5px
}
h1,h2,h3,p,figure{
  margin:0
}
h1,h2,h3,.brand{
  font-family:Outfit,Inter,Arial,sans-serif;
  line-height:1.15
}
h1{
  font-size:clamp(2.65rem,4.6vw,4.4rem);
  letter-spacing:-.045em;
  max-width:650px
}
h2{
  font-size:clamp(2rem,3vw,2.8rem);
  letter-spacing:-.03em
}
h3{
  font-size:1.35rem;
  letter-spacing:-.015em
}
.wrap{
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto
}
.skip{
  position:absolute;
  top:8px;
  left:16px;
  padding:8px 16px;
  background:#fff;
  z-index:10;
  transform:translateY(-160%)
}
.skip:focus{
  transform:none
}
.masthead{
  background:var(--navy);
  color:#fff
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:96px;
  gap:24px;
  border-bottom:1px solid #334459
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.6rem;
  color:inherit;
  text-decoration:none;
  font-weight:600
}
.brand img{
  width:40px;
  height:40px;
  border-radius:9px;
  background:#fff;
  padding:3px
}
.nav-links{
  display:flex;
  align-items:center;
  gap:25px
}
.nav-links a{
  color:#e1e9f2;
  font-size:.88rem;
  text-decoration:none
}
.nav-links a:hover{
  color:#fff;
  text-decoration:underline
}
.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:8px;
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  background:var(--blue);
  color:#fff
}
.button:hover{
  background:#244337;
  color:#fff;
  text-decoration:none
}
.button.secondary{
  background:transparent;
  color:inherit;
  border-color:#8092a6
}
.button.secondary:hover{
  background:#ffffff12
}
.menu-toggle{
  display:none;
  font:inherit;
  color:inherit;
  background:transparent;
  border:1px solid #8092a6;
  border-radius:6px;
  padding:9px 14px;
  cursor:pointer
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:700;
  color:var(--blue);
  margin-bottom:18px
}
.hero{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:70px;
  padding-block:58px 64px
}
.hero .eyebrow{
  color:#8ed8df
}
.hero h1 span{
  color:#8ed8df
}
.lede{
  font-size:1.08rem;
  line-height:1.8;
  max-width:580px;
  color:#c8d4e1;
  margin-top:25px
}
.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}
.note{
  font-size:.8rem;
  line-height:1.7;
  margin-top:16px;
  color:#c8d4e1;
  max-width:490px
}
.hero-proof{
  border-top:1px solid #334459;
  margin-top:32px;
  padding-top:20px;
  display:flex;
  gap:24px;
  color:#dbe5ef;
  font-size:.79rem
}
.purpose{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  border-bottom:1px solid var(--line);
}
.purpose p:not(.eyebrow){
  color:var(--muted);
  margin-bottom:18px;
}
.purpose a{
  font-size:.9rem;
  font-weight:600;
}
.section{
  padding-block:80px
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:36px
}
.section-head h2{
  max-width:620px
}
.section-head>p{
  max-width:350px;
  color:var(--muted);
  font-size:.95rem
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.outcome{
  border-top:2px solid var(--line);
  padding-top:24px
}
.number{
  display:inline-block;
  color:var(--blue);
  font-size:.78rem;
  font-weight:700;
  margin-bottom:25px
}
.outcome p{
  color:var(--muted);
  font-size:.94rem;
  margin:15px 0 20px
}
.outcome a{
  font-size:.86rem;
  font-weight:600
}
.soft{
  background:var(--paper);
  border-block:1px solid var(--line)
}
.workflow{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px
}
.workflow-intro>p:last-child{
  margin-top:20px;
  color:var(--muted)
}
.steps{
  list-style:none;
  margin:0;
  padding:0
}
.steps li{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:18px;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.steps li:first-child{
  padding-top:0
}
.step-number{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e4edff;
  color:#1d4fba;
  font-size:.8rem;
  font-weight:700
}
.steps h3{
  font-size:1.15rem
}
.steps p{
  color:var(--muted);
  font-size:.91rem;
  margin-top:8px
}
.context{
  margin-top:32px;
  padding:20px 24px;
  border-left:3px solid #77a6b8;
  background:#fff;
  color:var(--muted);
  font-size:.85rem
}
.context strong{
  color:var(--ink)
}
.pricing-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:24px
}
.plan{
  border:1px solid var(--line);
  padding:32px;
  border-radius:18px;
  display:flex;
  flex-direction:column
}
.plan.team{
  border:2px solid var(--blue)
}
.plan .eyebrow{
  margin-bottom:12px
}
.price{
  font-family:Outfit,Inter,Arial,sans-serif;
  font-size:2.8rem;
  line-height:1.2;
  margin-top:22px;
  letter-spacing:-.03em
}
.price span{
  font-family:Inter,Arial,sans-serif;
  font-size:.9rem;
  letter-spacing:0;
  color:var(--muted);
  font-weight:400
}
.price.solo{
  font-size:1.65rem
}
.plan p{
  color:var(--muted);
  font-size:.88rem;
  margin-top:14px
}
.plan ul{
  padding-left:20px;
  margin:24px 0;
  color:var(--muted);
  font-size:.9rem
}
.plan li{
  margin-bottom:9px
}
.plan .button{
  margin-top:auto;
  align-self:start
}
.plan .button.secondary{
  border-color:#b5c3d3;
  color:var(--ink)
}
.plan .button.secondary:hover{
  background:var(--paper)
}
.plan .fine{
  font-size:.78rem;
  margin-top:16px
}
.details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  border-top:1px solid var(--line);
  margin-top:40px;
  padding-top:28px
}
.details h3{
  font-size:1.1rem
}
.details p{
  color:var(--muted);
  font-size:.86rem;
  margin-top:10px
}
.faq{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px
}
details{
  border-bottom:1px solid var(--line);
  padding:20px 0
}
details:first-child{
  padding-top:0
}
summary{
  cursor:pointer;
  font-weight:600;
  font-size:.95rem
}
details p{
  margin-top:14px;
  color:var(--muted);
  font-size:.9rem
}
.closing{
  background:var(--navy);
  color:#fff;
  padding-block:56px
}
.closing .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}
.closing h2{
  font-size:2rem
}
.closing p{
  color:#c8d4e1;
  margin-top:12px;
  max-width:600px;
  font-size:.94rem
}
.closing .button{
  flex-shrink:0
}
footer{
  padding-block:44px
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:36px
}
footer .brand{
  font-size:1.3rem
}
footer p{
  font-size:.8rem;
  color:var(--muted);
  margin-top:12px
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  max-width:570px;
  align-content:start
}
.footer-links a{
  font-size:.8rem;
  color:var(--muted)
}
.copyright{
  border-top:1px solid var(--line);
  margin-top:32px;
  padding-top:20px
}
@media(max-width:1000px){
  .nav-links{
    gap:16px
  }
  .hero{
    gap:32px
  }
  .hero-proof{
    flex-wrap:wrap;
    gap:8px 20px
  }
  .workflow,.faq{
    gap:40px
  }
  .product{
    padding:16px
  }
  .product img{
    max-width:235px
  }
}
/* Collapse navigation before the additional pilot link can crowd tablet widths. */
@media(max-width:1100px){
  .nav{
    min-height:80px;
    flex-wrap:wrap;
    gap:0;
    padding-block:16px
  }
  .menu-toggle{
    display:block
  }
  .nav-links{
    display:none;
    width:100%;
    padding-top:22px;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .nav-links.open{
    display:flex
  }
  .nav-links a{
    padding:12px 4px
  }
  .nav-links .button{
    margin-top:8px
  }
}
@media(max-width:900px){
  .purpose{
    grid-template-columns:1fr;
    gap:24px;
  }
  .relationship{
    padding:26px;
  }
  .wrap{
    width:calc(100% - 40px)
  }
  .hero{
    grid-template-columns:1fr;
    padding-block:44px;
    gap:36px
  }
  .hero h1{
    max-width:560px;
    font-size:clamp(2.2rem,10.5vw,3rem)
  }
  .hero-proof{
    margin-top:24px
  }
  .product{
    max-width:430px;
    width:100%;
    margin:auto
  }
  .product img{
    max-width:230px
  }
  .section{
    padding-block:56px
  }
  .section-head{
    display:block
  }
  .section-head>p{
    margin-top:20px;
    max-width:520px
  }
  .grid,.workflow,.pricing-grid,.faq{
    grid-template-columns:1fr;
    gap:32px
  }
  .outcome{
    padding-top:20px
  }
  .number{
    margin-bottom:16px
  }
  .details{
    grid-template-columns:1fr;
    gap:24px
  }
  .plan{
    padding:26px
  }
  .closing .wrap,.footer-top{
    flex-direction:column;
    align-items:start;
    gap:24px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
}
/* Editorial welcome and Practice Access Journey. The illustration is shared with the app. */
h1,h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.04em
}
.masthead{
  background:#f7f4ec;
  color:var(--ink)
}
.nav{
  border-color:var(--line)
}
.nav-links a{
  color:var(--ink)
}
.nav-links a.button{
  color:#fff
}
.nav-links a:hover{
  color:var(--blue)
}
.nav-links a.button:hover{
  color:#fff
}
.hero{
  grid-template-columns:1fr 1.12fr;
  gap:48px;
  padding-block:72px
}
.hero .eyebrow{
  color:#7c6538
}
.hero h1 span{
  color:var(--blue);
  font-style:italic
}
.hero .lede,.hero .note,.hero-proof{
  color:var(--muted)
}
.hero-proof{
  border-color:var(--line)
}
.hero .button.secondary{
  border-color:#7b8175;
  color:var(--ink)
}
.button{
  border-radius:2px
}
.welcome-scene{
  border:1px solid var(--line);
  padding:9px;
  background:#eeebe3
}
.welcome-image{
  position:relative
}
.welcome-image img{
  display:block;
  width:100%;
  height:auto
}
.practice-label{
  position:absolute;
  max-width:40%;
  font-size:clamp(.53rem,.85vw,.7rem);
  padding:4px 7px;
  color:#244337;
  background:#fffdf5;
  border:1px solid #d6ddcf;
  border-radius:3px;
  font-weight:600
}
.primary-care{
  left:4%;
  top:17%
}
.specialty-care{
  right:4%;
  top:2%
}
.rehab-care{
  right:2%;
  top:53%
}
.welcome-scene figcaption{
  padding:24px 20px 18px
}
.welcome-scene figcaption .eyebrow{
  display:block;
  margin-bottom:12px
}
.welcome-scene figcaption p{
  font-family:Georgia,serif;
  font-size:clamp(1.3rem,2vw,1.8rem);
  line-height:1.4
}
.welcome-scene figcaption a{
  display:inline-block;
  font-size:.8rem;
  margin-top:14px;
  font-weight:600
}
.journey-section{
  background:#eeebe1;
  border-block:1px solid var(--line)
}
.journey-scene{
  border:1px solid #d4d7c7;
  background:#f6f5ed;
  overflow:hidden;
  border-radius:12px 12px 0 0
}
.journey-scene svg{
  display:block;
  width:100%;
  height:auto
}
.journey-controls[hidden]{
  display:none
}
.journey-controls{
  background:#f9f7f0;
  border-inline:1px solid #d4d7c7
}
.journey-stages{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line)
}
.journey-stages button{
  font:600 .87rem Inter,Arial,sans-serif;
  background:transparent;
  color:var(--muted);
  border:0;
  border-top:3px solid transparent;
  padding:20px 10px;
  cursor:pointer;
  text-align:left
}
.journey-stages button span{
  display:block;
  font-size:.65rem;
  letter-spacing:.1em;
  margin-bottom:7px;
  color:#7c6538
}
.journey-stages button[aria-current]{
  border-top-color:#31564a;
  background:#e3e9dc;
  color:#244337
}
.story-playback{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  gap:16px;
  font-size:.77rem;
  color:var(--muted)
}
.story-playback>div{
  display:flex;
  gap:8px
}
.story-playback button{
  min-height:44px;
  min-width:44px;
  background:#fffdf8;
  border:1px solid #b9c3b1;
  font:500 .8rem Inter,Arial,sans-serif;
  padding:8px 12px;
  color:var(--ink);
  cursor:pointer
}
.story-playback button:disabled{
  opacity:.45;
  cursor:default
}
.story-panel{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  padding:36px;
  background:#fffdf8;
  border:1px solid #d4d7c7;
  border-radius:0 0 12px 12px;
  min-height:290px
}
.story-panel[hidden]{
  display:none
}
.story-panel .eyebrow{
  color:#7c6538
}
.story-panel h3{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:1.75rem;
  line-height:1.25
}
.story-panel p:not(.eyebrow){
  margin-top:16px;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.8
}
.story-panel aside{
  border-left:1px solid var(--line);
  padding-left:32px;
  align-self:center
}
.story-tool-label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  color:#31564a
}
.story-takeaway{
  display:block;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.2rem;
  margin-top:20px;
  color:#31564a
}
.journey-footnote{
  font-size:.75rem;
  color:var(--muted);
  margin-top:18px;
  max-width:850px
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.closing{
  background:#2c493f
}
@media(max-width:900px){
  .hero{
    grid-template-columns:1fr;
    padding-block:44px
  }
  .welcome-scene{
    max-width:650px
  }
  .practice-label{
    font-size:clamp(.5rem,1.8vw,.75rem)
  }
  .story-panel{
    grid-template-columns:1fr;
    gap:24px;
    padding:26px;
    min-height:0
  }
  .story-panel aside{
    border-left:0;
    border-top:1px solid var(--line);
    padding:20px 0 0
  }
  .journey-stages{
    grid-template-columns:repeat(2,1fr)
  }
  .journey-stages button{
    padding:14px 12px;
    min-height:72px
  }
  .story-playback{
    padding:12px;
    gap:8px;
    flex-wrap:wrap
  }
  .journey-scene svg{
    min-height:150px
  }
  .journey-stages button span{
    margin-bottom:5px
  }
}
@media(prefers-reduced-motion:reduce){
  .liaison-marker,#journey-trail{
    transition:none
  }
}
@media(prefers-reduced-motion:reduce){
  .scene-contact{
    transition:none
  }
}
/* Large interaction vignettes replace the distant road overview. */
.journey-section{
  padding-block:48px
}
.journey-scene{
  background:#edf0e5;
  border-radius:12px 12px 0 0;
  position:relative
}
.journey-scene svg{
  height:310px;
  min-height:0;
  width:100%;
  max-width:none
}
.actor-label{
  fill:#4d6657;
  font:14px Inter,Arial,sans-serif
}
.interaction-scene{
  opacity:0;
  transform:translateX(14px);
  transition:opacity 900ms ease,transform 1100ms cubic-bezier(.22,1,.36,1);
  pointer-events:none
}
.interaction-scene.active{
  opacity:1;
  transform:translateX(0)
}
.interaction-scene.active .conversation-bubble{
  animation:conversation-in 850ms ease both
}
.interaction-scene.active .shared-resource use{
  animation:resource-in 1100ms cubic-bezier(.22,1,.36,1) both
}
.story-panel{
  min-height:155px;
  padding:24px 30px;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  border-radius:0 0 12px 12px;
  animation:caption-in 700ms ease both
}
.story-panel .eyebrow{
  font-size:.65rem;
  margin-bottom:9px
}
.story-panel h3{
  font-size:1.5rem
}
.story-panel p:not(.eyebrow){
  margin-top:10px;
  font-size:.88rem;
  line-height:1.6
}
.story-assist{
  display:block;
  max-width:240px;
  border:1px solid #d2dac8;
  background:#edf1e6;
  border-radius:25px;
  padding:10px 15px;
  color:#426153;
  font-size:.73rem;
  line-height:1.6
}
.journey-stages button{
  padding:14px 16px
}
.story-playback{
  padding:10px 16px
}
.journey-footnote{
  font-size:.7rem;
  max-width:100%;
  margin-top:12px
}
@keyframes conversation-in{
  from{
    opacity:0
  }
  to{
    opacity:1
  }
}
@keyframes caption-in{
  from{
    opacity:0;
    transform:translateY(6px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes resource-in{
  from{
    opacity:0;
    transform:translateX(-16px)
  }
  to{
    opacity:1;
    transform:translateX(0)
  }
}
@media(max-width:900px){
  .journey-scene svg{
    display:block;
    width:560px;
    height:230px;
    position:relative;
    left:50%;
    transform:translateX(-50%)
  }
  .story-panel{
    min-height:0;
    grid-template-columns:1fr;
    gap:16px;
    padding:22px
  }
  .story-assist{
    max-width:none;
    justify-self:start
  }
  .story-panel h3{
    font-size:1.35rem
  }
  .journey-stages button{
    padding:12px;
    min-height:65px
  }
}
@media(prefers-reduced-motion:reduce){
  .interaction-scene{
    transition:none;
    transform:none
  }
  .interaction-scene.active .conversation-bubble,.interaction-scene.active .shared-resource use,.story-panel{
    animation:none
  }
}

@media(max-width:600px){
  .story-panel{min-height:260px}
}

/* The broader field-work story supports the relationship journey. */
.hero-capabilities{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:24px;font-size:.78rem;color:var(--muted)}
.hero-capabilities a{color:var(--blue)}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.field-chapter{border:1px solid var(--line);background:#fffdf7;scroll-margin-top:24px}
.field-visual{position:relative;min-height:200px;padding:16px 24px 40px;background:#e9eee2;border-bottom:1px solid var(--line);overflow:hidden}
.field-visual svg{display:block;width:100%;height:150px}
.visual-caption{position:absolute;bottom:16px;left:20px;right:20px;text-align:center;font-size:.7rem;color:#52684f}
.field-copy{padding:28px}
.field-copy .eyebrow{margin-bottom:13px;font-size:.66rem;color:#7c6538}
.field-copy h3{font-family:Georgia,serif;font-weight:400;font-size:1.65rem;line-height:1.25}
.field-copy>p:not(.eyebrow){margin-top:16px;font-size:.9rem;color:var(--muted)}
.field-copy p.capability-line{border-top:1px solid var(--line);padding-top:16px;font-size:.73rem;color:#426153}
.field-copy>a{display:inline-block;margin-top:20px;font-size:.8rem;font-weight:600}
.outreach-visual{display:flex;align-items:center;justify-content:center;gap:9px}
.visual-pill{padding:12px 10px;background:#fffdf6;border:1px solid #bdcdb3;border-radius:6px;font-size:.77rem;color:#31564a;text-align:center;max-width:105px}
.visual-connector{color:#91a28c}
.campaign-visual{display:flex;align-items:center;justify-content:center;gap:45px}
.collateral-sheet{width:135px;padding:20px 16px;background:#fffdf7;border:1px solid #c4ceb9;transform:rotate(-5deg)}
.sheet-heading{font-family:Georgia,serif;font-size:.9rem;color:#31564a}
.sheet-line{display:block;height:3px;background:#d9e0cd;margin-top:12px;width:100%}
.sheet-line.short{width:75%}
.campaign-flow{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.73rem;color:#426153}
.field-continuity{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:32px;padding:28px;background:#eeebe1}
.field-continuity .eyebrow{font-size:.65rem;margin-bottom:10px}
.field-continuity h3{font-family:Georgia,serif;font-weight:400;font-size:1.4rem}
.field-continuity>p{font-size:.88rem;color:var(--muted)}
.field-note{font-size:.7rem;color:var(--muted);margin-top:14px}
@media(max-width:760px){.field-grid,.field-continuity{grid-template-columns:1fr}.field-copy{padding:23px}.field-visual{padding-inline:16px}.visual-pill{font-size:.68rem;padding:12px 7px}.outreach-visual{gap:5px}.campaign-visual{gap:26px}.field-continuity{gap:20px;padding:24px}}

/* Maya’s day uses the same accessible playback controller as the care-team story. */
.day-story .journey-scene svg{width:100%;height:310px;left:auto;transform:none}
.day-label{fill:#31564a;font:17px Georgia,serif}
.day-story .active .day-search{animation:day-search 2s ease-out both}
.day-story .active .day-pin{animation:day-pin 1s cubic-bezier(.22,1,.36,1) both}
.day-story .active .day-route{stroke-dasharray:100;animation:day-route 5s ease-in-out both}
.day-story .active .day-traveler{animation:day-travel 5s cubic-bezier(.45,0,.55,1) both}
.day-story .active .day-note,.day-story .active .day-flyer{animation:conversation-in 1.5s ease both}
.day-story .active .day-copy{stroke-dasharray:220;animation:day-copy 2.5s ease both}
.day-story:has(#day-story-play:focus-visible) .journey-stages{outline-offset:4px}
@keyframes day-search{from{opacity:0;stroke-dashoffset:50}to{opacity:1;stroke-dashoffset:0}}
@keyframes day-pin{from{opacity:0}to{opacity:1}}
@keyframes day-route{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes day-travel{0%{transform:translate(285px,245px)}40%{transform:translate(345px,144px)}65%{transform:translate(475px,144px)}100%{transform:translate(620px,245px)}}
@keyframes day-copy{from{stroke-dashoffset:220}to{stroke-dashoffset:0}}
@media(max-width:900px){.day-story .journey-scene svg{width:560px;height:240px;left:50%;transform:translateX(-50%)}.day-story .journey-stages button{scroll-margin-top:250px}}
@media(prefers-reduced-motion:reduce){.day-story .active .day-search,.day-story .active .day-pin,.day-story .active .day-route,.day-story .active .day-traveler,.day-story .active .day-note,.day-story .active .day-flyer,.day-story .active .day-copy{animation:none}.day-traveler{transform:translate(475px,144px)}}

/* One continuous timeline, with a stable stage and a single playback bar. */
.unified-story .journey-stages{grid-template-columns:repeat(7,minmax(0,1fr))}
.unified-story .journey-stages button{font-size:.75rem;padding:14px 10px;scroll-margin-top:300px}
@media(max-width:900px){.unified-story .journey-stages{grid-template-columns:repeat(4,minmax(0,1fr))}.unified-story .journey-stages button{min-height:62px}}
@media(max-width:480px){.unified-story .journey-stages{grid-template-columns:repeat(3,minmax(0,1fr))}.unified-story .journey-stages button{font-size:.7rem}}