:root {
  --ink:#071b42;
  --muted:#4d6180;
  --sky:#e1f5fc;
  --accent:#008fdf;
  --line:#e4eaf0;
  --font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  font-family:var(--font);
  font-synthesis:none;
  background:#fff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,summary:focus-visible {
  outline:3px solid #0872b9;
  outline-offset:6px
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2 {
  font-weight:800;
  letter-spacing:-.055em;
  line-height:1.04;
  text-wrap:balance
}
h1 {
  font-size:clamp(3.4rem,5.4vw,5.5rem)
}
h2 {
  font-size:clamp(2.8rem,4.1vw,4.2rem)
}
.skip {
  position:fixed;
  top:-100px;
  inset-inline-start:20px;
  padding:16px;
  background:white;
  z-index:10
}
.skip:focus {
  top:12px
}
.nav {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(32px,calc((100vw - 1200px)/2));
  background:var(--sky)
}
.wordmark {
  font-size:2.65rem;
  font-weight:850;
  letter-spacing:-.065em;
  line-height:1
}
.nav .wordmark {
  display:inline-flex;
  align-items:center;
  gap:9px
}
.brand-mark {
  width:45px;
  height:46px;
  object-fit:contain;
  flex:none
}
.nav nav {
  display:flex;
  align-items:center;
  gap:36px
}
.nav-link {
  font-size:1rem;
  font-weight:600;
  padding:12px 0
}
.nav-link:hover,.footer-links a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.substack-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:none;
  transition:opacity .2s
}
.substack-link img {
  width:32px;
  height:32px
}
.substack-link:hover {
  opacity:.75
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  min-height:54px;
  padding:16px 27px;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  font-size:1rem;
  line-height:1.2;
  font-weight:650;
  transition:background .2s,transform .2s;
  white-space:nowrap
}
.button:hover {
  background:#173663;
  transform:translateY(-2px)
}
.button span[aria-hidden] {
  font-size:1.2rem;
  font-weight:400
}
.nav .button {
  min-height:46px;
  padding:13px 23px;
  font-size:.875rem;
  gap:20px
}
.section-inner {
  width:min(1200px,calc(100% - 80px));
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:100px
}
.hero {
  background:var(--sky)
}
.hero .section-inner {
  min-height:710px;
  padding-top:65px;
  padding-bottom:100px;
  gap:60px
}
.hero-copy {
  position:relative;
  z-index:1
}
.lede {
  font-size:1.25rem;
  line-height:1.55;
  color:var(--muted);
  margin-top:28px;
  max-width:435px;
  text-wrap:pretty
}
.together {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.875rem;
  color:var(--muted);
  margin:23px 0 25px
}
.avatar {
  width:42px;
  height:42px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #fff
}
.pair {
  display:inline-flex;
  flex:none;
  align-items:center
}
.pair .avatar+.avatar {
  margin-left:-10px
}
.pile {
  width:500px;
  max-width:100%;
  aspect-ratio:1;
  position:relative;
  justify-self:center;
  margin-top:18px
}
.pile-card {
  position:absolute;
  min-width:0;
  box-shadow:1px 4px 6px #24435a18,0 1px 2px #24435a12
}
.restaurant {
  left:0;
  top:8%;
  width:46%;
  padding:10px 10px 15px;
  background:#fff;
  transform:rotate(-3deg);
  border-radius:4px;
  z-index:1
}
.restaurant img {
  width:100%;
  height:130px;
  object-fit:cover;
  border-radius:6px
}
.restaurant strong {
  display:block;
  font-size:1rem;
  margin:11px 0 5px
}
.restaurant span {
  font-size:.75rem;
  color:#66748a
}
.schedule {
  left:5%;
  top:62%;
  width:39%;
  padding:18px 14px;
  background:white;
  border-radius:3px;
  transform:rotate(2deg);
  z-index:0
}
.schedule strong {
  display:block;
  font-size:1rem;
  margin-bottom:13px
}
.schedule div {
  font-size:.875rem;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 9px;
  margin-top:5px;
  border-radius:5px
}
.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.schedule .icon {
  width:16px;
  height:16px
}
.blue {
  background:#e6f3ff;
  color:#177bc6
}
.lilac {
  background:#ece6ff;
  color:#7658b4
}
.coral {
  background:#ffe2d9;
  color:#aa4e38
}
.note {
  right:7%;
  top:0;
  width:34%;
  min-height:145px;
  padding:22px 17px;
  background:linear-gradient(175deg,#dac8f4 0%,#e9ddff 18%,#e4d5fa 88%,#f2e9ff 100%);
  border-radius:0 0 16px 2px;
  box-shadow:0 2px 2px #24435a12,2px 8px 7px -5px #24435a38;
  font:1.4rem/1.25 "Bradley Hand","Segoe Print",cursive;
  color:#293357;
  transform:rotate(3deg);
  z-index:2
}
.note span {
  display:block;
  text-align:right;
  font-size:2rem
}
.tiktok {
  right:0;
  top:39%;
  width:48%;
  border-radius:15px;
  transform:rotate(-1deg);
  z-index:3
}
.tiktok img {
  width:100%;
  aspect-ratio:1;
  border-radius:inherit
}
.feature {
  padding:110px 0
}
.feature-alternate {
  background:var(--sky)
}
.feature-alternate .feature-copy {
  grid-column:2;
  grid-row:1
}
.feature-alternate .app-display {
  grid-column:1;
  grid-row:1
}
.eyebrow {
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.14em;
  font-weight:700;
  color:#597293;
  margin-bottom:23px
}
.feature .lede {
  max-width:400px
}
.quote {
  margin-top:48px;
  display:flex;
  align-items:flex-end;
  gap:13px;
  max-width:390px
}
.quote>.avatar {
  width:44px;
  height:44px;
  margin-bottom:3px
}
.quote-name {
  display:block;
  margin:0 0 7px;
  margin-inline-start:12px;
  color:#5c718b;
  font-size:.875rem
}
.quote p {
  background:#f0f2f6;
  border-radius:18px;
  border-end-start-radius:4px;
  padding:17px 20px;
  font-size:1rem;
  line-height:1.4
}
.feature-alternate .quote p {
  background:#fff
}
.app-display {
  justify-self:center;
  max-width:100%;
  text-align:center
}
.app-display figcaption {
  margin-top:22px;
  font-size:.75rem;
  line-height:1.5;
  color:#5c718b
}
.phone {
  width:354px;
  max-width:100%;
  padding:7px;
  border:2px solid #9b9b9b;
  background:#171717;
  border-radius:52px;
  box-shadow:0 0 0 1px #333,0 18px 38px #162d4917,0 4px 8px #162d491a;
  text-align:left
}
.phone-screen {
  height:720px;
  border-radius:43px;
  overflow:hidden;
  background:#f5f5f5;
  position:relative;
  display:flex;
  flex-direction:column;
  color:#25262a
}
.status {
  height:44px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  font-size:12px;
  font-weight:650;
  position:relative;
  background:#f5f5f5;
  z-index:1
}
.island {
  position:absolute;
  width:96px;
  height:25px;
  border-radius:20px;
  background:#050505;
  left:50%;
  top:8px;
  transform:translateX(-50%)
}
.home-indicator {
  width:108px;
  height:4px;
  border-radius:4px;
  background:#171717;
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%)
}
.app-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px 15px;
  background:#f5f5f5;
  border-bottom:1px solid #e9e9e9
}
.app-head>div {
  display:flex;
  align-items:center;
  gap:10px
}
.app-head strong {
  font-size:16px;
  letter-spacing:-.03em
}
.app-head .avatar {
  width:29px;
  height:29px
}
.app-back {
  font-size:30px;
  line-height:1;
  color:#60666b
}
.app-more {
  font-size:23px;
  color:#777
}
.chat-content {
  padding:16px;
  flex:1
}
.day-label {
  color:#666;
  text-align:center;
  font-size:12px;
  margin:2px 0 20px
}
.bubble {
  width:86%;
  border-radius:20px;
  background:#fff;
  font-size:16px;
  line-height:1.35;
  padding:14px 15px;
  margin-bottom:20px
}
.bubble>span {
  display:block;
  font-size:13px;
  color:#008e5c;
  font-weight:650;
  margin-bottom:5px
}
.bubble small {
  display:block;
  font-size:11px;
  text-align:right;
  color:#717171;
  margin-top:7px
}
.outgoing {
  margin-left:auto;
  background:#00b4ef;
  color:#fff
}
.outgoing>span {
  color:#fff
}
.outgoing small {
  color:#fff
}
.fenn-response {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:#666;
  margin:26px 4px 10px
}
.fenn-response img {
  width:22px;
  height:25px
}
.event-card {
  padding:17px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 5px 15px #00000005
}
.event-main {
  display:flex;
  align-items:center;
  gap:12px
}
.tile {
  width:43px;
  height:43px;
  border-radius:13px;
  display:grid;
  place-items:center;
  flex:none
}
.event-main strong,.agenda-row strong {
  display:block;
  font-size:15px;
  line-height:1.35;
  font-weight:650
}
.event-main span:not(.tile) {
  display:block;
  font-size:13px;
  line-height:1.5;
  color:#65686e
}
.confirmation {
  display:flex;
  align-items:center;
  gap:7px;
  background:#e4f4ff;
  color:#087dbb;
  padding:10px;
  border-radius:9px;
  margin-top:15px;
  font-size:12px
}
.confirmation .icon {
  width:19px;
  height:19px
}
.composer {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 14px 30px;
  font-size:25px
}
.composer>span:nth-child(2) {
  flex:1;
  background:white;
  border-radius:30px;
  padding:12px;
  color:#707277;
  font-size:15px
}
.composer .icon {
  width:21px;
  height:21px;
  color:#777
}
.agenda-content {
  padding:25px 15px;
  flex:1
}
.week {
  display:flex;
  justify-content:space-between;
  gap:2px;
  margin:0 0 30px
}
.week span {
  font-size:11px;
  display:flex;
  flex-direction:column;
  text-align:center;
  padding:8px 6px;
  color:#666
}
.week b {
  font-size:16px;
  color:#26272d;
  margin-top:7px
}
.week .selected {
  background:#009bdf;
  border-radius:20px;
  color:white
}
.week .selected b {
  color:white
}
.agenda-content h3 {
  font-size:17px;
  margin-bottom:19px;
  letter-spacing:-.03em
}
.agenda-row {
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:17px;
  padding:15px 11px;
  background:white;
  margin-bottom:11px
}
.agenda-row>div {
  flex:1
}
.agenda-row>div>span {
  display:block;
  font-size:13px;
  color:#62666c;
  margin-top:5px
}
.agenda-row .pair .avatar {
  width:23px;
  height:23px
}
.agenda-note {
  font-size:13px;
  line-height:1.5;
  color:#6a6c74;
  margin:30px 10px
}
.app-tabs {
  display:flex;
  justify-content:space-around;
  background:#ffffffc9;
  padding:15px 0 27px;
  color:#606a76;
  font-size:10px
}
.app-tabs>span {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px
}
.app-tabs .active {
  color:#009bdf
}
.app-tabs .icon {
  width:23px;
  height:23px
}
.map .status {
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:#ffffffdc
}
.map-content {
  height:100%;
  position:relative
}
.map-image {
  height:100%;
  width:100%;
  object-fit:cover
}
.map .home-indicator {
  bottom:24px
}
.closing {
  text-align:center;
  padding:100px 24px 80px;
  background:var(--sky)
}
.closing h2 {
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.14
}
.closing .button {
  margin-top:30px
}
.price-note { margin-top:14px; color:var(--muted); font-size:.875rem; line-height:1.4; }
.footer-links {
  background:var(--sky);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:38px;
  padding:20px 24px 45px;
  font-size:.875rem;
  color:var(--muted)
}
.footer-links .wordmark {
  font-size:1.8rem;
  color:var(--ink);
  margin-inline-end:25px
}
.faq-page {
  max-width:860px;
  margin:auto;
  padding:100px 32px 120px
}
.faq-page h1 {
  font-size:clamp(3rem,5vw,4.5rem)
}
.qa {
  padding:0;
  list-style:none;
  margin:65px 0 0
}
.qa li {
  border-bottom:1px solid #dce3eb
}
.qa summary {
  padding:25px 0;
  padding-inline-end:35px;
  cursor:pointer;
  font-size:1.15rem;
  font-weight:650;
  list-style:none;
  position:relative
}
.qa summary::-webkit-details-marker {
  display:none
}
.qa summary:after {
  content:'+';
  position:absolute;
  inset-inline-end:2px;
  top:24px;
  font-size:1.5rem;
  font-weight:400
}
.qa details[open] summary:after {
  content:'−'
}
.qa .a {
  padding:0 0 25px;
  padding-inline-end:30px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.65
}
.qa .a p+p {
  margin-top:15px
}
.qa .a a {
  text-decoration:underline;
  text-underline-offset:3px
}
@media(min-width:1600px) {
  .hero .section-inner {
    min-height:790px
  }
  .feature {
    padding:130px 0
  }
}
@media(max-width:1050px) {
  .section-inner {
    gap:45px;
    width:calc(100% - 64px)
  }
  .hero .section-inner {
    gap:25px;
    min-height:650px
  }
  .pile {
    aspect-ratio:.92
  }
  .restaurant img {
    height:105px
  }
  .schedule {
    padding:13px 10px
  }
  .schedule div {
    font-size:.75rem;
    padding:6px
  }
  .note {
    font-size:1.35rem;
    padding:22px 15px;
    min-height:145px
  }
  .phone {
    width:324px
  }
  .phone-screen {
    height:680px
  }
  .feature h2 {
    font-size:2.85rem
  }
  .feature .lede {
    font-size:1.15rem
  }
}
@media(max-width:760px) {
  .nav {
    height:82px;
    padding:0 24px
  }
  .wordmark {
    font-size:2.2rem
  }
  .nav nav {
    gap:18px
  }
  .nav-link {
    font-size:.875rem
  }
  .nav .button {
    display:none
  }
  .section-inner {
    display:flex;
    flex-direction:column;
    width:calc(100% - 48px);
    gap:56px
  }
  .hero .section-inner {
    padding:58px 0 55px;
    min-height:0;
    gap:38px;
    align-items:stretch
  }
  .hero h1 {
    font-size:clamp(2.9rem,10.5vw,4.6rem);
    letter-spacing:-.055em
  }
  .hero .lede {
    font-size:1.0625rem;
    margin-top:23px
  }
  .together {
    margin:23px 0;
    font-size:.8125rem
  }
  .together .avatar {
    width:35px;
    height:35px
  }
  .button {
    font-size:.9375rem;
    min-height:52px
  }
  .pile {
    width:350px;
    aspect-ratio:.88;
    margin:20px auto 0
  }
  .restaurant {
    padding:8px 8px 12px
  }
  .restaurant img {
    height:98px
  }
  .restaurant strong {
    font-size:.8125rem;
    margin-top:8px
  }
  .restaurant span {
    font-size:.625rem
  }
  .schedule {
    padding:13px 10px
  }
  .schedule strong {
    font-size:.8125rem;
    margin-bottom:10px
  }
  .schedule div {
    font-size:.6875rem;
    padding:5px 6px;
    gap:6px
  }
  .schedule .icon {
    width:13px;
    height:13px
  }
  .note {
    font-size:1.05rem;
    min-height:120px;
    padding:17px 12px
  }
  .note span {
    font-size:1.5rem
  }

  .feature {
    padding:80px 0
  }
  .feature .section-inner {
    align-items:stretch;
    gap:45px
  }
  .feature-copy {
    max-width:470px
  }
  .feature h2 {
    font-size:clamp(2.45rem,8vw,3.3rem)
  }
  .eyebrow {
    font-size:.75rem;
    margin-bottom:19px
  }
  .feature .lede {
    font-size:1.0625rem;
    margin-top:24px;
    max-width:370px
  }
  .quote {
    margin-top:29px;
    max-width:350px
  }
  .quote p {
    font-size:.9375rem;
    padding:14px 17px
  }
  .quote>.avatar {
    width:36px;
    height:36px
  }
  .quote-name {
    font-size:.8125rem
  }
  .app-display {
    align-self:center
  }
  .phone {
    width:324px
  }
  .phone-screen {
    height:680px
  }
  .closing {
    padding:75px 24px 60px
  }
  .footer-links {
    gap:22px;
    flex-wrap:wrap;
    padding-bottom:35px;
    font-size:.8125rem
  }
  .footer-links .wordmark {
    flex-basis:100%;
    margin:0;
    text-align:center
  }
  .faq-page {
    padding:65px 24px 80px
  }
  .faq-page h1 {
    font-size:3rem
  }
  .qa {
    margin-top:40px
  }
  .qa summary {
    font-size:1.05rem
  }
  .qa .a {
    padding-inline-end:0
  }
}
@media(max-width:360px) {
  .section-inner {
    width:calc(100% - 40px)
  }
  .hero .lede br {
    display:none
  }
  .phone {
    width:290px;
    border-radius:45px
  }
  .phone-screen {
    height:650px;
    border-radius:36px
  }
  .app-head {
    padding-left:12px;
    padding-right:12px
  }
  .app-head strong {
    font-size:14px
  }
  .app-head .avatar {
    width:25px;
    height:25px
  }
  .chat-content {
    padding:13px
  }
  .bubble {
    font-size:14px
  }
  .agenda-row {
    gap:8px;
    padding:13px 8px
  }
  .agenda-row strong {
    font-size:13px
  }
  .agenda-row .pair {
    display:none
  }
  .pile {
    aspect-ratio:.83
  }
  .note {
    font-size:1.1rem;
    min-height:115px
  }
  .schedule div {
    font-size:.625rem
  }
  .restaurant img {
    height:85px
  }
  .hero h1 {
    font-size:2.9rem
  }
  .feature h2 {
    font-size:2.35rem
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}

/* Keep the complete app map and its attribution visible at every phone width. */
.map .phone-screen { height: auto; aspect-ratio: 1320 / 2868; }
.map-content { width: 100%; }
.map-image { height: auto; object-fit: contain; }
.app-display figcaption a { text-decoration: underline; text-underline-offset: 3px; }

/* Hero: a quiet centre on desktop, a small scene above mobile copy. */
.hero-life { position:relative; isolation:isolate; overflow:hidden; min-height:810px; padding:172px 24px 180px; }
.hero-life .hero-copy { width:min(980px,70%); margin:0 auto; text-align:center; }
.hero-life h1 { font-size:clamp(3.6rem,5.8vw,6.3rem); line-height:1.02; letter-spacing:-.06em; }
.hero-ending { white-space:nowrap; }
.hero-life .lede { margin:30px auto 32px; max-width:820px; font-size:1.125rem; line-height:1.55; text-wrap:balance; }
.life-scene { position:absolute; inset:0; max-width:1500px; margin:auto; pointer-events:none; container-type:inline-size; }
.life-scene > * { position:absolute; }
.life-plan { width:236px; right:6%; top:48px; padding:17px; border:2px solid white; border-radius:20px; background:linear-gradient(125deg,#fffaf3,#ffe9e9 55%,#e9e5ff); box-shadow:0 8px 22px #18304715; transform:rotate(5deg); }
.life-plan-main { display:flex; align-items:center; gap:12px; }
.life-plan-date { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; width:45px; height:51px; background:#fff9; border-radius:12px; font-size:25px; font-weight:700; }
.life-plan-date small { font-size:10px; line-height:1.2; color:#547496; letter-spacing:.08em; }
.life-plan-main strong { display:block; font-size:15px; line-height:1.3; }
.life-plan-main div > span { display:block; margin-top:4px; font-size:11px; color:var(--muted); }
.life-plan-saved { display:flex; align-items:center; gap:7px; margin-top:13px; font-size:11px; color:#2672aa; }
.life-plan-saved img { width:22px; height:22px; object-fit:contain; }
.life-scribble { width:30px; height:auto; overflow:visible; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.life-rays { left:18.5%; top:calc(12px + 2.5cqw); transform:rotate(-4deg); }
.life-heart { right:2%; bottom:calc(35.1cqw - 20px); transform:rotate(12deg); }
@media(min-width:1600px) { .hero-life { min-height:900px; padding-top:210px; } }
@media(min-width:761px) and (max-width:1050px) {
 .hero-life { min-height:750px; padding-top:185px; }
 .hero-life .hero-copy { width:72%; }
 .hero-life h1 { font-size:clamp(2.8rem,5.8vw,3.8rem); }
 .hero-life .lede { max-width:490px; font-size:1.05rem; }
 .life-plan { width:205px; right:4%; top:25px; padding:14px; }
 .life-plan-main { gap:9px; }
 .life-plan-main strong { font-size:13px; }
 .life-heart { bottom:calc(36.45cqw + 20px); }
}
@media(max-width:760px) {
 .hero-life { min-height:0; padding:0 24px 65px; display:flex; flex-direction:column; }
 .life-scene { position:relative; inset:auto; width:min(390px,100%); height:315px; flex:none; margin:0 auto 22px; }
 .hero-life .hero-copy { width:100%; max-width:590px; }
 .hero-life h1 { font-size:clamp(2.7rem,11.3vw,4.2rem); line-height:1.04; }
 .hero-life .lede { font-size:1rem; margin:24px auto 26px; max-width:480px; }
 .life-plan { width:210px; left:24%; right:auto; top:213px; padding:12px; border-radius:16px; transform:rotate(3deg); }
 .life-plan-main { gap:9px; }
 .life-plan-date { width:34px; height:40px; font-size:21px; border-radius:9px; }
 .life-plan-date small { font-size:8px; }
 .life-plan-main strong { font-size:12px; }
 .life-plan-main div > span { font-size:10px; margin-top:2px; }
 .life-plan-saved { margin-top:8px; font-size:10px; }
 .life-plan-saved img { width:18px; height:18px; }
 .life-scribble { width:19px; stroke-width:2.5; }
 .life-rays { left:2%; top:8px; transform:rotate(-20deg); }
 .life-heart { right:0; bottom:58cqw; }
}
@media(max-width:360px) {
 .hero-life h1 { font-size:2.4rem; }
 .hero-life .lede { font-size:.95rem; }
 .life-scene { height:307px; margin-bottom:15px; }
 .life-plan { width:199px; left:24%; top:211px; }
}

/* Small, unevenly scattered artifacts leave a clear centre for the message. */
.hero-artifacts { min-height:850px; padding-top:210px; }
.hero-artifacts .life-groceries { width:172px; left:3%; top:250px; padding:18px 15px; border:2px solid #fff; border-radius:8px; background:#fffdf3; box-shadow:0 6px 14px #18304718; transform:rotate(-9deg); }
.life-groceries strong { display:block; margin-bottom:15px; font-size:13px; }
.life-groceries > span { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; }
.life-groceries i { width:12px; height:12px; flex:none; border:1.3px solid #a8aaa0; border-radius:3px; }
.hero-artifacts .life-plan { width:220px; right:18%; top:38px; padding:15px; transform:rotate(7deg); }
.hero-artifacts .life-activity { left:18%; bottom:46px; width:244px; padding:15px; border:2px solid #fff; border-radius:23px; background:linear-gradient(130deg,#fffefa,#ecf7ff); box-shadow:0 8px 22px #18304715; transform:rotate(-6deg); }
.life-activity-heading { display:flex; align-items:center; gap:9px; }
.life-activity-avatar { width:34px; height:34px; flex:none; object-fit:cover; border:2px solid #fff; border-radius:50%; }
.life-activity-person strong { display:block; font-size:13px; line-height:1.3; }
.life-activity-person > span { display:block; margin-top:3px; font-size:10px; color:var(--muted); }
.life-activity-eta { display:flex; align-items:baseline; gap:3px; margin-inline-start:auto; color:#168bcb; white-space:nowrap; }
.life-activity-eta strong { font-size:25px; line-height:1; letter-spacing:-.05em; }
.life-activity-eta > span { font-size:10px; }
.life-activity-route { position:relative; height:27px; margin:12px 0 8px; }
.life-activity-track { position:absolute; inset-inline:2px 17px; top:12px; height:4px; border-radius:4px; background:repeating-linear-gradient(to right,#cbdde8 0 3px,transparent 3px 8px); }
.life-activity-track::before { content:""; display:block; width:64%; height:100%; border-radius:4px; background:#47a9e4; }
.life-activity-track::after { content:""; position:absolute; inset-inline-start:0; top:-2px; width:8px; height:8px; border:2px solid #47a9e4; border-radius:50%; background:#fff; }
.life-activity-car,.life-activity-home { position:absolute; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; }
.life-activity-car { inset-inline-start:53%; color:#fff; background:#2399dc; box-shadow:0 0 0 3px #edf7ff; }
.life-activity-home { inset-inline-end:0; color:#a56e30; background:#fff0d8; }
.life-activity-route .icon { width:15px; height:15px; }
.life-activity-footer { display:flex; align-items:center; justify-content:space-between; gap:5px; color:var(--muted); font-size:9px; white-space:nowrap; }
.life-activity-footer > span:first-child { display:flex; align-items:center; gap:4px; }
.life-activity-footer i { width:4px; height:4px; border-radius:50%; background:#49a17a; }
.hero-artifacts .life-reminder { display:flex; align-items:center; gap:11px; right:15%; bottom:68px; width:220px; padding:19px 15px; border:2px solid white; border-radius:15px; background:#fff6d8; box-shadow:0 7px 18px #18304712; transform:rotate(5deg); }
.life-reminder-check { flex:none; width:17px; height:17px; border:1.5px solid #bfa672; border-radius:5px; }
.life-reminder strong { display:block; font-size:13px; line-height:1.3; }
.life-reminder div > span { display:block; margin-top:4px; font-size:10px; color:#897b61; }
.life-reminder img { flex:none; margin-inline-start:auto; width:20px; height:20px; }
.life-sticker { height:auto; object-fit:contain; filter:drop-shadow(0 3px 2px #18304714); }
.life-kids { width:180px; left:23%; top:0; transform:rotate(-7deg); }
.life-suitcase { width:90px; left:7%; top:35px; transform:rotate(-12deg); }
.life-milo { width:172px; right:3%; top:326px; transform:rotate(8deg); }
.hero-artifacts .life-scribble { stroke:#2d3031; stroke-width:1.9; }
.hero-artifacts .life-rays { left:5%; top:200px; width:29px; transform:rotate(152deg); }
.hero-artifacts .life-flower { left:13%; top:auto; bottom:240px; width:42px; transform:rotate(-15deg); }
.hero-artifacts .life-heart { right:5%; top:73px; bottom:auto; width:46px; transform:rotate(-14deg); }
.hero-artifacts .life-sun { left:46%; top:53px; width:44px; transform:rotate(-6deg); }
.hero-artifacts .life-star { right:29%; top:196px; width:24px; transform:rotate(17deg); }
.hero-artifacts .life-loop { right:7%; top:527px; width:86px; transform:rotate(15deg); }
.hero-artifacts .life-spark { left:46%; bottom:61px; width:28px; transform:rotate(8deg); }
@media(min-width:1600px) { .hero-artifacts { min-height:900px; padding-top:225px; } }
@media(min-width:761px) and (max-width:1050px) {
 .hero-artifacts { min-height:805px; padding-top:205px; }
 .hero-artifacts .life-groceries { left:5%; top:12px; width:170px; }
 .hero-artifacts .life-plan { right:5%; top:35px; width:205px; }
 .hero-artifacts .life-kids { left:30%; top:18px; width:125px; }
 .hero-artifacts .life-suitcase { left:43%; top:auto; bottom:68px; width:65px; }
 .hero-artifacts .life-milo { right:1%; top:332px; width:108px; }
 .hero-artifacts .life-activity { left:10%; bottom:31px; width:230px; }
 .hero-artifacts .life-reminder { right:8%; bottom:48px; width:212px; }
 .hero-artifacts .life-rays { left:2%; top:208px; width:23px; }
 .hero-artifacts .life-sun { left:49%; top:43px; width:37px; }
 .hero-artifacts .life-heart { right:35%; top:154px; width:28px; }
 .hero-artifacts .life-flower { left:10%; bottom:235px; width:30px; }
 .hero-artifacts .life-star { left:5%; right:auto; top:413px; width:21px; }
 .hero-artifacts .life-loop { right:2%; top:463px; width:56px; }
 .hero-artifacts .life-spark { left:47%; bottom:43px; width:22px; }
}
@media(max-width:760px) {
 .hero-artifacts { min-height:0; padding-top:0; }
 .hero-artifacts .life-scene { height:295px; margin-bottom:18px; }
 .hero-artifacts .life-groceries { left:0; top:13px; width:146px; padding:15px 12px; transform:rotate(-7deg); }
 .hero-artifacts .life-groceries strong { font-size:11px; margin-bottom:12px; }
 .hero-artifacts .life-groceries > span { font-size:11px; margin-top:9px; }
 .hero-artifacts .life-activity { width:184px; left:auto; right:0; top:4px; bottom:auto; padding:11px; border-radius:19px; transform:rotate(5deg); }
 .life-activity-heading { gap:6px; }
 .life-activity-avatar { width:27px; height:27px; }
 .life-activity-person strong { font-size:11px; }
 .life-activity-person > span { font-size:8px; margin-top:2px; }
 .life-activity-eta strong { font-size:21px; }
 .life-activity-eta > span { font-size:8px; }
 .life-activity-route { height:23px; margin:9px 0 6px; }
 .life-activity-track { top:10px; height:3px; }
 .life-activity-car,.life-activity-home { width:23px; height:23px; }
 .life-activity-route .icon { width:13px; height:13px; }
 .life-activity-footer { font-size:7px; }
 .hero-artifacts .life-plan { width:202px; left:auto; right:3%; top:183px; padding:12px; transform:rotate(-3deg); }
 .hero-artifacts .life-reminder { display:none; }
 .hero-artifacts .life-suitcase { display:none; }
 .hero-artifacts .life-kids { left:-2%; right:auto; top:172px; width:112px; transform:rotate(-8deg); }
 .hero-artifacts .life-milo { left:auto; right:0; top:116px; width:60px; transform:rotate(8deg); }
 .hero-artifacts .life-rays { left:24%; top:238px; width:19px; transform:rotate(-5deg); }
 .hero-artifacts .life-heart { right:29%; top:126px; bottom:auto; width:25px; transform:rotate(9deg); }
 .hero-artifacts .life-sun { left:30%; top:151px; width:24px; transform:rotate(4deg); }
 .hero-artifacts .life-flower, .hero-artifacts .life-star, .hero-artifacts .life-loop, .hero-artifacts .life-spark { display:none; }
}
@media(max-width:360px) {
 .hero-artifacts .life-groceries { width:132px; left:-3px; padding:14px 10px; }
 .hero-artifacts .life-activity { width:161px; right:-2px; padding:9px; }
 .life-activity-avatar { width:23px; height:23px; }
 .life-activity-person > span { font-size:7px; }
 .hero-artifacts .life-plan { width:190px; right:0; }
 .hero-artifacts .life-kids { left:-6%; width:100px; }
 .hero-artifacts .life-rays { left:19%; top:246px; }
}

.captured-app .phone-screen { height:auto; aspect-ratio:1320 / 2868; }
.captured-app .phone-screen > img { display:block; width:100%; height:auto; }

/* Fit desktop phones to both their column and the viewport height. */
.app-display .phone { width:min(29vw, clamp(260px, 36svh, 350px)); container-type:inline-size; }
@media(min-width:761px) { .feature { padding:clamp(56px, 8vh, 90px) 0; } }
.phone .status { height:54px; padding:0 25px; font-size:14px; }
.status-icons { width:62px; height:15px; }
.phone .island { width:100px; height:28px; top:10px; }
.captured-app .status { position:absolute; inset:0 0 auto; background:#f2f2f2; height:6.2%; }
@media(max-width:760px) {
  .app-display .phone { width:min(calc(100vw - 48px), 340px); }
  .phone .status { padding:0 22px; font-size:12px; }
  .status-icons { width:54px; }
  .phone .island { width:88px; height:25px; top:8px; }
}

/* Let the native map continue behind the phone status area. */
.map .status { background:transparent; }
.map .home-indicator { bottom:10px; }

.life-flower { left:4%; top:calc(12px + 25cqw); width:29px; transform:rotate(-12deg); }
@media(max-width:760px) { .life-flower { left:5%; top:calc(10px + 43cqw); width:22px; } }

.hero-backing { display:flex; align-items:center; justify-content:center; gap:8px; margin:20px 0 0; color:#52657a; font-size:13px; line-height:1.5; }
.hero-backing strong { font-weight:600; color:var(--ink); }
.yc-mark { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none; background:#f60; color:#fff; font:16px/1 Arial,sans-serif; }

/* Keep the frame and status details proportional as the phone scales. */
.app-display .phone { border-radius:42px; }
.app-display .phone-screen { border-radius:33px; }
.phone .status { height:13cqw; padding:0 7cqw; font-size:3.4cqw; }
.phone .status-icons { width:16cqw; height:4cqw; }
.phone .island { width:27cqw; height:7.4cqw; top:2.4cqw; }

/* App illustrations share one proportional canvas, including on mobile. */
.feature .section-inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.chat-story {
  --app-ink:#101d43;
  --app-muted:#8c8c98;
  --app-blue:#219fff;
  --app-glass:linear-gradient(125deg,#fff8f3f5,#ffe6e7ed 50%,#eae5fff2);
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  width:min(410px,100%);
  aspect-ratio:410 / 690;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:var(--app-ink);
}
.story-phone {
  position:relative;
  display:flex;
  flex-direction:column;
  width:82%;
  height:158cqw;
  flex:none;
  padding:6cqw 3.8cqw 5cqw;
  border:2px solid #fff;
  border-radius:10cqw;
  background:radial-gradient(ellipse at 12% 0%,#fff3ceab,transparent 60%),linear-gradient(155deg,#fffcf1 12%,#fff6f1 45%,#e2f6ff 95%);
  box-shadow:0 4cqw 9cqw #29334b17,0 1cqw 2cqw #29334b09,inset 0 0 0 1px #fff;
  color:var(--app-ink);
  text-align:start;
}
.story-header { display:flex; align-items:center; gap:2cqw; flex:none; font-size:4.2cqw; padding:0 0 2.5cqw; }
.story-header > span:first-child { font-size:7cqw; line-height:1; margin-inline-end:.5cqw; }
.story-header > img { width:9cqw; height:9cqw; border-radius:3cqw; object-fit:cover; }
.story-header-actions { display:flex; gap:2cqw; margin-inline-start:auto; }
.story-header-actions .icon { width:8cqw; height:8cqw; padding:2cqw; border-radius:50%; background:#e8dfcb55; color:#3d4658; }
.story-date { display:block; text-align:center; font-size:2.8cqw; color:var(--app-muted); margin-bottom:3cqw; }
.story-messages { display:flex; flex-direction:column; gap:2cqw; font-size:3.5cqw; line-height:1.4; }
.story-bubble { align-self:flex-start; max-width:95%; margin:0; padding:2.6cqw 3cqw; border-radius:5cqw; border-end-start-radius:1cqw; background:#ffe2e3; }
.story-mine { align-self:flex-end; border-radius:5cqw; border-end-end-radius:1cqw; background:linear-gradient(110deg,#25b2f8,#3aa7fc); color:#fff; }
.story-link { display:block; width:94%; overflow:hidden; border:1px solid #fff; border-radius:5cqw; background:#ffffffda; color:inherit; }
.story-link img { display:block; width:100%; height:17.5cqw; object-fit:cover; }
.story-link strong { display:block; font-size:3.6cqw; padding:2cqw 3cqw 0; }
.story-link span { display:block; color:var(--app-muted); font-size:2.7cqw; padding:0 3cqw 2cqw; }
.story-fenn { position:relative; }
.story-event-card,.story-todo-card,.day-shared,.map-sam-card {
  border:2px solid #fff;
  background:var(--app-glass);
  box-shadow:0 3cqw 6cqw #5a4c6920;
  border-radius:6cqw;
}
.story-event-card { display:flex; align-items:center; gap:3cqw; width:calc(100% + 15cqw); margin:1cqw 0; margin-inline-start:-10cqw; padding:3cqw; }
.story-calendar-mascot { flex:none; width:13cqw; height:13cqw; object-fit:contain; transform:rotate(-7deg); }
.story-event { display:flex; flex-direction:column; gap:1cqw; font-size:3.5cqw; }
.story-event strong { font-size:4cqw; line-height:1.25; letter-spacing:-.02em; }
.story-event > span { color:var(--app-muted); }
.story-event .story-saved { display:flex; align-items:center; gap:1.4cqw; color:#078bfb; font-size:3cqw; margin-top:1cqw; white-space:nowrap; }
.story-saved .icon { width:4cqw; height:4cqw; }
.story-todo-card { display:flex; align-items:center; gap:3cqw; width:calc(100% + 4cqw); align-self:flex-end; margin:1cqw 0 0; margin-inline-end:-7cqw; padding:3.5cqw; }
.story-todo-card > .icon { flex:none; width:9cqw; height:9cqw; stroke-width:1.5; color:#99969c; }
.story-todo-card strong { display:block; font-size:3.7cqw; letter-spacing:-.025em; }
.story-todo-card span { display:block; color:var(--app-muted); font-size:3.2cqw; margin-top:1cqw; }
.story-composer { flex:none; display:flex; align-items:center; gap:3cqw; margin-top:auto; padding:2.6cqw 3cqw; border:1px solid #fff; border-radius:8cqw; background:#ffffff9c; color:#929baa; box-shadow:0 1cqw 3cqw #29334b09; font-size:3.8cqw; }
.story-composer > span:first-child { font-size:6cqw; color:#596270; line-height:1; }
.story-composer .icon { margin-inline-start:auto; width:5cqw; height:5cqw; }

/* Fenn's response and place carousel float beyond the chat. */
.answers-phone .story-messages { gap:1.5cqw; }
.answers-phone .story-date { margin-bottom:2cqw; }
.answers-phone .story-bubble { padding-block:2cqw; }
.answers-phone .story-question { display:flex; flex-direction:column; align-items:flex-end; gap:1.4cqw; }
.answers-phone .story-ask { display:flex; align-items:center; gap:1.5cqw; padding:1.4cqw 2.4cqw; border:1px solid #fff; background:#fffcf5; box-shadow:0 1cqw 3cqw #29334b12; border-radius:3cqw; font-size:3cqw; color:#535263; }
.answers-phone .story-ask img { width:4.5cqw; height:4.5cqw; }
.answers-phone .place-card-link > img { height:22cqw; }
.answers-phone .place-card-copy h3 { min-height:0; }
.answers-phone .place-card-copy p { min-height:7cqw; }
.answers-fenn { width:calc(100% + 12cqw); margin-inline-start:-6cqw; }
.story-fenn-label { display:flex; align-items:center; gap:1.5cqw; font-size:3.5cqw; margin-bottom:2cqw; padding:0 1cqw; }
.story-fenn-label > img { width:8cqw; height:8cqw; object-fit:contain; }
.answers-fenn > p { padding:3cqw 4cqw; margin:0 0 2.5cqw; margin-inline-start:7cqw; background:#ffe4e5; border-radius:5cqw; border-end-start-radius:1cqw; font-size:3.5cqw; line-height:1.45; }
.place-carousel-controls { display:flex; gap:1.5cqw; margin-inline-start:auto; }
.place-carousel-controls button { display:grid; place-items:center; width:max(24px,7cqw); height:max(24px,7cqw); padding:0; border:1px solid #fff; border-radius:50%; background:#fff9; color:#30465f; cursor:pointer; }
.place-carousel-controls button:disabled { opacity:.3; cursor:default; }
.place-carousel-controls svg { width:4cqw; height:4cqw; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.place-carousel { display:flex; gap:2cqw; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:1cqw; scrollbar-width:none; margin:0 -1cqw; padding:0 1cqw 3cqw; }
.place-carousel::-webkit-scrollbar { display:none; }
.place-card { display:flex; flex-direction:column; flex:0 0 49cqw; min-width:0; scroll-snap-align:start; border:2px solid #fff; border-radius:6cqw; overflow:hidden; background:linear-gradient(135deg,#fffaf5,#ffe9df); box-shadow:0 2cqw 4cqw #443b5615; }
.place-card-link { display:block; }
.place-card-link > img { display:block; width:100%; height:26cqw; object-fit:cover; background:#eef1f3; }
.place-card-copy { padding:2.5cqw 3cqw 0; }
.place-card-copy h3 { min-height:9cqw; color:var(--app-ink); font-size:3.8cqw; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.place-card-copy p { min-height:9cqw; margin:1.5cqw 0; color:#6d7480; font-size:3.1cqw; line-height:1.4; }
.place-card-copy > span { display:block; color:#8b8d95; font-size:2.5cqw; line-height:1.4; }
.place-card-footer { display:flex; align-items:center; margin-top:auto; min-height:12cqw; padding:2cqw 3cqw 3cqw; }
.place-save { display:inline-flex; align-items:center; gap:1cqw; min-height:max(24px,7cqw); padding:1cqw 2.5cqw; border:1px solid #3baeff; border-radius:99px; background:#fff; color:#169eee; font:600 3.1cqw/1.25 var(--font); white-space:nowrap; cursor:pointer; transition:transform .15s; }
.place-save svg { width:3.4cqw; height:3.4cqw; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.place-save:active { transform:scale(.94); }
.place-save[data-added="true"] { color:#48736c; border-color:#add8cb; background:#f5fff9; cursor:default; }
.place-save:focus-visible,.place-carousel:focus-visible,.place-carousel-controls button:focus-visible { outline:2px solid #0872b9; outline-offset:2px; }
.place-save-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* The current Organizer: calendar tabs, month grid, and selected-day events. */
.day-phone { background:linear-gradient(160deg,#fff3cc 0%,#fff7dc 35%,#f2f6fd 85%); }
.organizer-header { display:flex; align-items:center; justify-content:center; position:relative; font-size:4.4cqw; margin:1cqw 0 5cqw; }
.organizer-header > span { position:absolute; inset-inline-start:1cqw; top:-2cqw; color:#888178; font-size:8cqw; }
.organizer-tabs { display:flex; align-items:center; gap:3cqw; margin-bottom:4cqw; color:#918b78; font-size:3.8cqw; }
.organizer-tabs > span { padding:2.5cqw 3.2cqw; }
.organizer-tabs .organizer-tab-selected { border:1px solid #fff; border-radius:4cqw; background:linear-gradient(135deg,#dff2ff,#fff); color:#1d5fcc; font-weight:600; }
.organizer-calendar { padding:3cqw 2.5cqw 4cqw; border:2px solid #fff; border-radius:6cqw; background:var(--app-glass); box-shadow:0 2cqw 6cqw #d5665e20; }
.calendar-month { display:flex; align-items:center; justify-content:space-between; padding:0 1cqw 3cqw; border-bottom:1px solid #786c741f; font-size:4cqw; }
.calendar-month > span { color:#1d5fcc; font-size:7cqw; line-height:1; }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }
.calendar-weekdays { color:#8f8b86; font-size:2.8cqw; padding:3cqw 0 1.5cqw; }
.calendar-days { row-gap:1cqw; color:#383838; font-size:3.5cqw; }
.calendar-days > span { display:grid; place-items:center; width:5.5cqw; height:5.5cqw; margin:auto; }
.calendar-outside { color:#b4a8a5; }
.calendar-days .calendar-selected { position:relative; border-radius:50%; background:#58b0f4; color:#fff; }
.calendar-selected::after { content:""; position:absolute; bottom:-1.2cqw; width:1.2cqw; height:1.2cqw; border-radius:50%; background:#fff; }
.organizer-agenda { width:calc(100% + 13cqw); margin:4cqw 0 0; margin-inline-start:-4cqw; }
.organizer-agenda h3 { color:#1d5fcc; font-size:3.3cqw; text-transform:uppercase; margin:0 0 2.5cqw; margin-inline-start:2cqw; }
.organizer-agenda h3 > span:last-child { color:#aaa398; font-weight:400; text-transform:none; margin-inline-start:2cqw; }
.day-card { border:2px solid #fff; border-radius:6cqw; background:var(--app-glass); box-shadow:0 3cqw 6cqw #d5665e20; padding:0 3cqw; }
.day-row { display:flex; gap:2cqw; align-items:center; min-height:13cqw; padding:2cqw 0; }
.day-row + .day-row { border-top:1px solid #dfdce577; }
.day-time { flex:none; width:13cqw; font-size:3.6cqw; font-weight:650; line-height:1.25; padding-inline-start:2cqw; border-inline-start:.8cqw solid #58b0f4; }
.day-all-day { font-size:2.8cqw; padding-block:2cqw; white-space:nowrap; }
.day-time small { display:block; color:#8d8383; font-size:3cqw; font-weight:400; }
.day-detail { flex:1; min-width:0; }
.day-detail strong { display:block; font-size:3.4cqw; font-weight:600; line-height:1.3; }
.day-detail > span { display:block; color:#9a898e; font-size:2.9cqw; margin-top:1cqw; }
.day-people { display:flex; gap:.8cqw; }
.day-people img { width:6cqw; height:6.5cqw; border:1px solid #fff; border-radius:2cqw; object-fit:cover; }
.day-dock { flex:none; display:flex; align-items:center; justify-content:center; gap:3cqw; margin-top:auto; padding-top:3cqw; }
.day-dock-main { display:flex; align-items:center; gap:3cqw; border:1px solid #fff; border-radius:6cqw; padding:2cqw; background:#ffffffbf; box-shadow:0 1cqw 4cqw #29334b12; }
.day-dock img { width:6.5cqw; height:6.5cqw; object-fit:contain; }
.day-dock-selected { display:flex; padding:1.5cqw; background:#d4eefe; border-radius:3.5cqw; }
.day-dock-extra { display:flex; align-items:center; justify-content:center; border:1px solid #fff; background:#ffffffa6; border-radius:50%; width:10cqw; height:10cqw; font-size:6cqw; }
.day-dock-extra img { width:5cqw; height:5cqw; }

/* Color-framed partner pins sit over the illustrated city map. */
.map-story-phone { padding:0; }
.map-story-image { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.map-intent-trail { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map-intent-trail path { stroke:#30acff; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.map-intent-trail .map-route-halo { stroke:#fff; stroke-width:10; }
.map-person { position:absolute; display:flex; flex-direction:column; align-items:center; }
.map-becca { top:11%; left:20%; --pin-color:#ff878d; }
.map-sam { top:54%; left:59%; --pin-color:#48b8ff; }
.map-person-photo { position:relative; padding:1cqw; border:1px solid #fff; background:var(--pin-color); border-radius:5cqw; box-shadow:0 1cqw 3cqw #20294020; }
.map-person-photo > img { width:14cqw; height:15cqw; object-fit:cover; border:1px solid #fff; border-radius:3.5cqw; }
.map-person-photo > span,.map-sam-portrait > span { position:absolute; inset-inline-end:-2cqw; bottom:-1cqw; display:grid; place-items:center; width:7cqw; height:7cqw; border:1.5px solid #fff; border-radius:50%; background:var(--pin-color,#48b8ff); color:#fff; }
.map-person-photo .icon,.map-sam-portrait .icon { width:4.5cqw; height:4.5cqw; stroke-width:2.3; }
.map-person-label { margin-top:2cqw; min-width:24cqw; text-align:center; padding:1.6cqw 3cqw; border:1px solid #fff; border-radius:4cqw; background:#fffaf6ed; box-shadow:0 1cqw 3cqw #26334e13; }
.map-person-label strong { display:block; font-size:3.7cqw; }
.map-person-label > span { display:block; font-size:2.9cqw; color:#8f8e97; margin-top:.5cqw; }
.map-person::after,.map-place::after { content:""; width:3cqw; height:3cqw; border:2px solid #fff; background:var(--pin-color,#dfaf77); border-radius:50%; margin-top:1cqw; box-shadow:0 0 0 1cqw #ffffff59; }
.map-place { position:absolute; display:flex; flex-direction:column; align-items:center; }
.map-place > span { display:grid; place-items:center; width:10cqw; height:10cqw; background:#fff9ef; border:1px solid #fff; border-radius:50%; font-size:6cqw; }
.map-place strong { padding:1.2cqw 2cqw; font-size:3cqw; background:#fffffff0; border:1px solid #fff; border-radius:4cqw; box-shadow:0 1cqw 2cqw #29334b10; }
.map-coffee { top:24%; right:2%; }
.map-dinner { top:39%; left:5%; --pin-color:#ffb254; }
.map-dinner > img { width:19cqw; height:14cqw; object-fit:cover; border:1cqw solid #fff; border-radius:4cqw; box-shadow:0 1cqw 3cqw #29334b1a; }
.map-park { top:62%; left:10%; --pin-color:#8bb894; }
.map-sam-card { position:absolute; top:75%; inset-inline-start:-8cqw; width:92cqw; display:flex; align-items:center; gap:3.5cqw; padding:4cqw; transform:rotate(2deg); }
.map-sam-portrait { position:relative; flex:none; }
.map-sam-portrait > img { width:17cqw; height:18cqw; object-fit:cover; border-radius:5cqw; border:1px solid #fff; outline:1cqw solid #73c6ff; }
.map-sam-card strong { display:block; font-size:4.6cqw; color:var(--app-ink); letter-spacing:-.03em; }
.map-sam-status { display:block; font-size:3.5cqw; margin-top:1cqw; color:#626c81; }
.map-sam-eta { display:block; font-size:3cqw; margin-top:1.5cqw; color:var(--app-muted); }
.map-dock { position:absolute; bottom:3cqw; width:100%; }
@media(max-width:760px) {
  .chat-story { width:min(370px,100%); }
}

/* Right-to-left pages mirror through the logical properties above; arrows flip
   with them, the logo lockup does not, and the hero scene keeps its drawing. */
[dir=rtl] .button span[aria-hidden],[dir=rtl] .place-carousel-controls svg { transform:scaleX(-1); }
[dir=rtl] .nav .wordmark { direction:ltr; }