/* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Snap it: a screenshot of the team's schedule becomes every event on it ── */
  .hvn.hvn-snap .hs-scene{ position:absolute; inset:0; animation:hs-scene var(--hvn-loop) linear infinite; }
  .hvn.hvn-snap .hs-glow{ position:absolute; inset:0; background:radial-gradient(55% 45% at 50% 34%, rgba(255,166,112,.28), transparent 70%); }

  .hvn.hvn-snap .hs-wrap{ position:absolute; left:6em; top:4.6em; width:13em; height:18em; border-radius:1.1em; overflow:hidden;
    box-shadow:0 0 0 .05em rgba(26,26,24,.1), 0 .1em .3em rgba(26,26,24,.1), 0 1.4em 3em rgba(60,40,20,.22); transform-origin:50% 0;
    transform:translateY(-3.8em) scale(.84) rotate(-3deg);
    animation:hs-wrap var(--hvn-loop) var(--hvn-ease) infinite; }
  /* the screenshot: the team's schedule in a (made-up) team app. It's a light-mode screenshot, so it looks the same on a dark card */
  .hvn.hvn-snap .hs-photo{ position:absolute; left:50%; width:12em; height:18.4em; margin-left:-6em; border-radius:1.1em; overflow:hidden;
    background:#fff; box-shadow:0 0 0 .05em rgba(26,26,24,.1), 0 .1em .3em rgba(26,26,24,.1), 0 1.4em 3em rgba(60,40,20,.24); opacity:0; }
  .hvn.hvn-snap .hs-shot{ font-size:.5em; color:#14171f; line-height:1.25; } /* half the stage em: this screen is 24em wide, like a 390pt phone */
  .hvn.hvn-snap .hs-status{ display:flex; align-items:center; padding:1.1em 1.9em .3em 2.4em; font-size:.95em; }
  .hvn.hvn-snap .hs-status b{ font-weight:600; }
  .hvn.hvn-snap .hs-sig{ display:flex; align-items:flex-end; gap:.14em; margin-left:auto; margin-right:.5em; }
  .hvn.hvn-snap .hs-sig i{ width:.2em; border-radius:.06em; background:#14171f; }
  .hvn.hvn-snap .hs-bat{ width:1.55em; height:.75em; padding:.1em; border-radius:.24em; border:.08em solid rgba(20,23,31,.4);
    background:linear-gradient(90deg, #14171f 0 78%, transparent 78%) content-box; }
  .hvn.hvn-snap .hs-nav{ display:flex; justify-content:space-between; padding:.55em 1.3em .3em; color:#2456C9; }
  .hvn.hvn-snap .hs-team{ display:flex; align-items:center; gap:.75em; padding:.45em 1.3em .9em; }
  .hvn.hvn-snap .hs-badge{ width:2.8em; height:2.8em; flex:0 0 auto; border-radius:.8em; background:#1F3A93; display:grid; place-items:center; font-size:1.25em; line-height:1; }
  .hvn.hvn-snap .hs-team b{ display:block; font-size:1.3em; font-weight:700; letter-spacing:-.02em; }
  .hvn.hvn-snap .hs-team span{ display:block; margin-top:.15em; font-size:.85em; color:#6b7080; }
  .hvn.hvn-snap .hs-tabs{ display:flex; gap:1.5em; padding:0 1.3em; border-bottom:.06em solid #e4e6ec; font-size:.9em; color:#6b7080; }
  .hvn.hvn-snap .hs-tabs span{ padding:.5em 0 .65em; }
  .hvn.hvn-snap .hs-tabs .hs-on{ color:#14171f; font-weight:600; box-shadow:inset 0 -.18em 0 #1F3A93; }
  .hvn.hvn-snap .hs-sec{ padding:1.2em 1.9em .45em; font-size:.68em; font-weight:700; letter-spacing:.08em; color:#8a8f9c; }
  .hvn.hvn-snap .hs-srow{ display:flex; gap:1em; padding:.75em 1.3em; border-bottom:.06em solid #eef0f4; }
  .hvn.hvn-snap .hs-date{ width:2.4em; flex:0 0 auto; text-align:center; }
  .hvn.hvn-snap .hs-date span{ display:block; font-size:.66em; font-weight:700; letter-spacing:.06em; color:#1F3A93; }
  .hvn.hvn-snap .hs-date b{ display:block; font-size:1.45em; font-weight:600; line-height:1.1; }
  .hvn.hvn-snap .hs-info{ display:flex; flex-direction:column; gap:.18em; min-width:0; }
  .hvn.hvn-snap .hs-info b{ font-weight:600; }
  .hvn.hvn-snap .hs-info span{ font-size:.82em; color:#6b7080; }
  .hvn.hvn-snap .hs-info .hs-note{ color:#1F3A93; font-weight:600; }
  .hvn.hvn-snap .hs-info .hs-pill{ display:inline-block; margin-left:.45em; padding:.2em .55em; border-radius:1em; background:#FFC93C; color:#4a3500;
    font-size:.6em; font-weight:800; letter-spacing:.06em; vertical-align:.2em; }

  .hvn.hvn-snap .hs-photo{ inset:0; left:0; width:auto; height:auto; margin:0; border-radius:0; box-shadow:none; opacity:1; }
  .hvn.hvn-snap .hs-shot{ font-size:.542em; } /* this screen is 13em wide: 24 of its own em, like a 390pt phone */
  .hvn.hvn-snap .hs-scan{ position:absolute; left:-5%; right:-5%; top:100%; height:2.2em; margin-top:-1.1em; opacity:0;
    background:linear-gradient(180deg, transparent, rgba(255,122,46,.16) 45%, rgba(184,56,15,.5) 50%, rgba(255,122,46,.16) 55%, transparent);
    animation:hs-scan var(--hvn-loop) ease-in-out infinite; }

  .hvn.hvn-snap .hs-sheet{ position:absolute; left:1.3em; right:1.3em; top:6.7em; bottom:-2em; padding:.55em 1.25em 0;
    background:var(--hvn-surface); border-radius:1.5em 1.5em 0 0; box-shadow:var(--hvn-shadow);
    animation:hs-sheet var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-snap .hs-grab{ width:2.2em; height:.25em; border-radius:1em; background:var(--hvn-rule); margin:0 auto .75em; }
  .hvn.hvn-snap .hs-found{ font-size:.8em; font-weight:600; color:var(--hvn-ink2); animation:hs-found var(--hvn-loop) linear infinite; }

  .hvn.hvn-snap .hs-row{ display:flex; align-items:flex-start; gap:.75em; padding-top:.7em; }
  .hvn.hvn-snap .hs-r1{ animation:hs-r1 var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-snap .hs-r2{ animation:hs-r2 var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-snap .hs-r3{ animation:hs-r3 var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-snap .hs-r4{ animation:hs-r4 var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-snap .hs-check{ flex:0 0 auto; width:1.25em; height:1.25em; margin-top:.1em; border-radius:50%; background:var(--hvn-rust);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:100%; }
  .hvn.hvn-snap .hs-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2em; }
  .hvn.hvn-snap .hs-txt b{ font-size:1em; font-weight:600; letter-spacing:-.01em; }
  .hvn.hvn-snap .hs-meta{ font-size:.82em; color:transparent; -webkit-background-clip:text; background-clip:text;
    background-image:linear-gradient(90deg, var(--hvn-ink3) 0 38%, var(--hvn-rust) 47%, var(--hvn-amber) 55%, var(--hvn-ink3) 64% 100%);
    background-size:300% 100%; background-position:0 0; }
  .hvn.hvn-snap .hs-r1 .hs-meta{ animation:hs-m1 var(--hvn-loop) ease-in-out infinite; }
  .hvn.hvn-snap .hs-r2 .hs-meta{ animation:hs-m2 var(--hvn-loop) ease-in-out infinite; }
  .hvn.hvn-snap .hs-r3 .hs-meta{ animation:hs-m3 var(--hvn-loop) ease-in-out infinite; }
  .hvn.hvn-snap .hs-r4 .hs-meta{ animation:hs-m4 var(--hvn-loop) ease-in-out infinite; }
  .hvn.hvn-snap .hs-tasks{ display:flex; gap:.9em; margin-top:.35em; font-size:.82em; color:var(--hvn-ink2); }
  .hvn.hvn-snap .hs-tasks span{ display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; }
  .hvn.hvn-snap .hs-tasks i{ width:1em; height:1em; border-radius:50%; border:.1em solid var(--hvn-ink3); }
  .hvn.hvn-snap .hs-row .hvn-av{ width:1.6em; height:1.6em; font-size:.95em; }

  .hvn.hvn-snap .hs-btn{ position:relative; display:grid; place-items:center; height:2.9em; margin-top:1em; border-radius:2em;
    background:var(--hvn-rust); color:#fff; font-size:.95em; font-weight:600;
    animation:hs-btn var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-snap .hs-btn > span{ grid-area:1/1; display:inline-flex; align-items:center; gap:.4em; }
  .hvn.hvn-snap .hs-btn svg{ width:1.15em; height:1.15em; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .hvn.hvn-snap .hs-btn-a{ animation:hs-ba var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-snap .hs-btn-b{ opacity:0; animation:hs-bb var(--hvn-loop) var(--hvn-ease) infinite; }

  /* one 8s story: settle → read the schedule → events rise → add → hold → reset */
  @keyframes hs-scene { 0%{opacity:0} 4%{opacity:1} 94%{opacity:1} 100%{opacity:0} }
  @keyframes hs-wrap {
    0%      { transform:translateY(.8em) scale(1) rotate(-3deg); }
    6%, 33% { transform:translateY(0) scale(1) rotate(-3deg); }
    45%,100%{ transform:translateY(-3.8em) scale(.84) rotate(-3deg); }
  }
  @keyframes hs-scan { 0%,10%{top:0; opacity:0} 12%{opacity:1} 29%{opacity:1} 32%,100%{top:100%; opacity:0} }
  @keyframes hs-sheet { 0%,36%{transform:translateY(105%)} 47%,100%{transform:translateY(0)} }
  @keyframes hs-found { 0%,43%{opacity:0} 48%,100%{opacity:1} }
  @keyframes hs-r1 { 0%,45%{opacity:0; transform:translateY(.9em)} 51%,100%{opacity:1; transform:none} }
  @keyframes hs-r2 { 0%,47%{opacity:0; transform:translateY(.9em)} 53%,100%{opacity:1; transform:none} }
  @keyframes hs-r3 { 0%,49%{opacity:0; transform:translateY(.9em)} 55%,100%{opacity:1; transform:none} }
  @keyframes hs-r4 { 0%,51%{opacity:0; transform:translateY(.9em)} 57%,100%{opacity:1; transform:none} }
  @keyframes hs-m1 { 0%,47%{background-position:100% 0} 59%,100%{background-position:0 0} }
  @keyframes hs-m2 { 0%,49%{background-position:100% 0} 61%,100%{background-position:0 0} }
  @keyframes hs-m3 { 0%,51%{background-position:100% 0} 63%,100%{background-position:0 0} }
  @keyframes hs-m4 { 0%,53%{background-position:100% 0} 65%,100%{background-position:0 0} }
  @keyframes hs-btn { 0%,57%{opacity:0; transform:translateY(.6em)} 62%,69%{opacity:1; transform:none} 71%{transform:scale(.96)} 74%,100%{opacity:1; transform:none} }
  @keyframes hs-ba { 0%,71%{opacity:1; transform:none} 74%,100%{opacity:0; transform:translateY(-.5em)} }
  @keyframes hs-bb { 0%,72%{opacity:0; transform:translateY(.5em)} 76%,100%{opacity:1; transform:none} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }

  /* ── Who's driving ── */
  .hvn.hvn-drive .hd-scene{ position:absolute; inset:0; animation:hd-scene var(--hvn-loop) linear infinite; }
  .hvn.hvn-drive .hd-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 48%, rgba(251,140,0,.16), transparent 70%); }
  .hvn.hvn-drive .hd-head{ position:absolute; left:1.83em; top:1.8em; font-size:1.45em; /* in its own em: lines up with the rows */ font-weight:700; letter-spacing:-.02em; }
  .hvn.hvn-drive .hd-head b{ font-weight:700; }
  .hvn.hvn-drive .hd-head span{ color:var(--hvn-ink3); margin-left:.3em; }

  .hvn.hvn-drive .hd-col{ position:absolute; left:1.4em; right:1.4em; top:6.5em; display:flex; flex-direction:column; gap:1.35em; }
  .hvn.hvn-drive .hd-row{ display:flex; align-items:flex-start; gap:.75em; }
  .hvn.hvn-drive .hd-ctx{ padding:0 1.25em; opacity:.42; }
    .hvn.hvn-drive .hd-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25em; }
  .hvn.hvn-drive .hd-txt b{ font-size:1.06em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-drive .hd-txt > span{ font-size:.86em; color:var(--hvn-ink3); }

  .hvn.hvn-drive .hd-card{ position:relative; padding:1.15em 1.25em; border-radius:1.4em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow);
    animation:hd-card var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-drive .hd-card .hd-txt b{ font-size:1.2em; }
  .hvn.hvn-drive .hd-meta{ display:grid; font-size:.9em; color:var(--hvn-ink3); }
  .hvn.hvn-drive .hd-meta > span{ grid-area:1/1; }
  .hvn.hvn-drive .hd-meta em{ font-style:normal; color:var(--hvn-ink2); }
  .hvn.hvn-drive .hd-m1{ opacity:0; animation:hd-m1 var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-drive .hd-m2{ animation:hd-m2 var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-drive .hd-pile{ display:flex; flex-direction:row-reverse; margin-top:.1em; }
  .hvn.hvn-drive .hd-pile .hvn-av{ width:2em; height:2em; font-size:1.05em; }
  .hvn.hvn-drive .hd-pile .hvn-av + .hvn-av{ margin-right:-.55em; }
  .hvn.hvn-drive .hd-jess{ animation:hd-jess var(--hvn-loop) var(--hvn-ease) infinite; }

  .hvn.hvn-drive .hd-ask{ max-height:0; opacity:0; overflow:hidden; animation:hd-ask var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-drive .hd-q{ font-size:.9em; font-weight:500; color:var(--hvn-rust-text); margin-top:1em; }
  .hvn.hvn-drive .hd-chips{ display:flex; gap:.5em; margin-top:.6em; }
  .hvn.hvn-drive .hd-chip{ display:inline-flex; align-items:center; gap:.5em; width:6.2em; min-height:2.5em; padding:0 .8em 0 .55em; border-radius:.8em;
    background:var(--hvn-fill); font-size:.9em; color:var(--hvn-ink2); }
  .hvn.hvn-drive .hd-chip .hvn-av{ width:1.6em; height:1.6em; font-size:.9em; opacity:.4; filter:saturate(.5); box-shadow:none; }
  .hvn.hvn-drive .hd-chip--pick{ animation:hd-pick var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-drive .hd-chip--pick .hvn-av{ animation:hd-pickav var(--hvn-loop) var(--hvn-ease) infinite; }


  .hvn.hvn-drive .hd-note{ position:absolute; left:1em; right:1em; bottom:1.1em; display:flex; gap:.7em; align-items:flex-start; padding:.8em .9em;
    border-radius:1.3em; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:0 .1em .3em rgba(26,26,24,.06), 0 1em 2.6em rgba(60,40,20,.16); color:#1a1a18;
    animation:hd-note var(--hvn-loop) var(--hvn-ease) infinite; }
  [data-theme="dark"] .hvn.hvn-drive .hd-note, .hvn.hvn-drive.hvn--dark .hd-note{ background:rgba(48,46,44,.86); color:#ede9e7; }
  .hvn.hvn-drive .hd-ntxt{ flex:1; min-width:0; }
  .hvn.hvn-drive .hd-ntop{ display:flex; gap:.5em; align-items:baseline; }
  .hvn.hvn-drive .hd-ntop b{ flex:1; font-size:.86em; font-weight:600; letter-spacing:-.01em; }
  .hvn.hvn-drive .hd-ntop span{ font-size:.7em; opacity:.5; }
  .hvn.hvn-drive .hd-ntxt p{ font-size:.82em; margin-top:.15em; opacity:.85; }

  /* one 8s story: the ask → a tap → it's Jess's → Jess's phone hears it → hold → reset */
  @keyframes hd-scene { 0%{opacity:0} 4%{opacity:1} 94%{opacity:1} 100%{opacity:0} }
  @keyframes hd-card  { 0%{transform:translateY(.8em)} 8%,100%{transform:none} }
  @keyframes hd-pick  { 0%,30%{background:var(--hvn-fill); color:var(--hvn-ink2); transform:none} 32%{transform:scale(.96)}
                        35%,100%{background:rgba(251,140,0,.16); color:var(--hvn-ink); transform:none} }
  @keyframes hd-pickav{ 0%,30%{opacity:.4; filter:saturate(.5)} 34%,100%{opacity:1; filter:none} }
  @keyframes hd-ask   { 0%,38%{max-height:6em; opacity:1} 41%{opacity:0} 49%,100%{max-height:0; opacity:0} }
  @keyframes hd-m1    { 0%,40%{opacity:1; transform:none} 45%,100%{opacity:0; transform:translateY(-.3em)} }
  @keyframes hd-m2    { 0%,42%{opacity:0; transform:translateY(.3em)} 48%,100%{opacity:1; transform:none} }
  @keyframes hd-jess  { 0%,43%{opacity:0; transform:scale(.4)} 49%{opacity:1; transform:scale(1.12)} 53%,100%{opacity:1; transform:none} }
  @keyframes hd-note  { 0%,55%{opacity:0; transform:translateY(140%) scale(.96)} 61%{opacity:1; transform:translateY(-.2em) scale(1)} 64%,100%{opacity:1; transform:none} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }

  /* ── Leave-by nudge (a lock screen: same in light and dark, like the real thing) ── */
  .hvn.hvn-leave .hn-wall{ position:absolute; inset:0;
    background:
      radial-gradient(60% 40% at 18% 88%, rgba(255,236,214,.55), transparent 70%),
      radial-gradient(50% 35% at 90% 30%, rgba(255,190,140,.35), transparent 70%),
      linear-gradient(172deg, #C9542A 0%, #E4865A 34%, #F1B087 66%, #F7D3B8 100%); }
  .hvn.hvn-leave .hn-scene{ position:absolute; inset:0; color:#fff; animation:hn-scene var(--hvn-loop) linear infinite; }
  .hvn.hvn-leave .hn-date{ position:absolute; left:0; right:0; top:2.3em; text-align:center; font-size:.95em; font-weight:600; opacity:.9; }
  .hvn.hvn-leave .hn-clock{ position:absolute; left:0; right:0; top:.62em; /* em of the 5.4em clock ≈ 3.35em of stage */ text-align:center; font-size:5.4em; line-height:1; font-weight:600;
    letter-spacing:-.02em; font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    font-variant-numeric:tabular-nums; text-shadow:0 .03em .12em rgba(120,40,10,.18); }
  .hvn.hvn-leave .hn-roll{ display:inline-block; height:1em; overflow:hidden; vertical-align:top; }
  .hvn.hvn-leave .hn-digits{ display:flex; flex-direction:column; transform:translateY(-50%);
    animation:hn-roll var(--hvn-loop) cubic-bezier(.3,1.4,.5,1) infinite; }
  .hvn.hvn-leave .hn-digits span{ display:block; height:1em; }

  .hvn.hvn-leave .hn-stack{ position:absolute; left:1.1em; right:1.1em; top:10.5em; }
  .hvn.hvn-leave .hn-note{ position:absolute; left:0; right:0; top:0; display:flex; gap:.7em; align-items:flex-start; padding:.8em .9em .85em;
    border-radius:1.3em; color:#1a1a18; background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
    box-shadow:0 .1em .3em rgba(120,40,10,.08), 0 .8em 2.2em rgba(120,40,10,.16); }
  .hvn.hvn-leave .hn-txt{ flex:1; min-width:0; }
  .hvn.hvn-leave .hn-top{ display:flex; gap:.5em; align-items:baseline; }
  .hvn.hvn-leave .hn-top b{ flex:1; font-size:.86em; font-weight:600; letter-spacing:-.01em; }
  .hvn.hvn-leave .hn-top span{ font-size:.7em; opacity:.5; white-space:nowrap; }
  .hvn.hvn-leave .hn-txt p{ font-size:.82em; margin-top:.15em; opacity:.85; }
  .hvn.hvn-leave .hn-txt ul{ list-style:none; margin-top:.25em; font-size:.82em; opacity:.85; }
  .hvn.hvn-leave .hn-txt li::before{ content:"• "; }
  .hvn.hvn-leave .hn-old{ transform:translateY(var(--hn-push, 7.75em)); opacity:.9; animation:hn-old var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-leave .hn-new{ z-index:1; animation:hn-new var(--hvn-loop) var(--hvn-ease) infinite; }
  .hvn.hvn-leave .hn-new::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    animation:hn-pulse var(--hvn-loop) ease-out infinite; }
  .hvn.hvn-leave .hn-new .hn-txt{ animation:hn-buzz var(--hvn-loop) linear infinite; }


  /* one 8s story: 4:07 → 4:08 → the nudge lands on top → a little buzz → hold → reset */
  @keyframes hn-scene { 0%{opacity:0} 4%{opacity:1} 94%{opacity:1} 100%{opacity:0} }
  @keyframes hn-roll  { 0%,16%{transform:translateY(0)} 21%,100%{transform:translateY(-50%)} }
  @keyframes hn-old   { 0%,22%{transform:none; opacity:1} 30%,100%{transform:translateY(var(--hn-push, 7.75em)); opacity:.9} }
  @keyframes hn-new   { 0%,22%{opacity:0; transform:translateY(-.9em) scale(.94)} 28%{opacity:1; transform:translateY(.15em) scale(1.01)} 31%,100%{opacity:1; transform:none} }
  @keyframes hn-pulse { 0%,29%{box-shadow:0 0 0 0 rgba(255,255,255,.75)} 44%,100%{box-shadow:0 0 0 1.1em rgba(255,255,255,0)} }
  @keyframes hn-buzz  { 0%,31%{transform:none} 32.5%{transform:translateX(-.12em)} 34%{transform:translateX(.12em)} 35.5%{transform:translateX(-.07em)} 37%,100%{transform:none} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── One invite. Both in. (a one-time entrance, then still) ── */
  .hvn.hvn-invite{ aspect-ratio:585/750; --hi-them:#e9e9eb; --hi-them-ink:#1a1a18; }
  .hvn--dark.hvn-invite, [data-theme="dark"] .hvn.hvn-invite{ --hi-them:#2c2c2e; --hi-them-ink:#ede9e7; }
  .hvn.hvn-invite .hi-glow{ position:absolute; inset:0; background:radial-gradient(60% 40% at 70% 42%, rgba(255,150,90,.16), transparent 70%); }

  .hvn.hvn-invite .hi-to{ position:absolute; left:0; right:0; top:2em; display:flex; flex-direction:column; align-items:center; gap:.4em; }
  .hvn.hvn-invite .hi-to .hvn-av{ width:2.9em; height:2.9em; font-size:1.25em; box-shadow:none; }
  .hvn.hvn-invite .hi-to > span:last-child{ font-size:.78em; color:var(--hvn-ink2); }
  .hvn.hvn-invite .hi-to i{ font-style:normal; color:var(--hvn-ink3); margin-left:.15em; }

  .hvn.hvn-invite .hi-thread{ position:absolute; left:1.4em; right:1.4em; top:8.6em; display:flex; flex-direction:column; align-items:flex-end; }
  .hvn.hvn-invite .hi-when{ align-self:center; font-size:.68em; font-weight:500; color:var(--hvn-ink3); margin-bottom:1em; }
  .hvn.hvn-invite .hi-me, .hvn.hvn-invite .hi-them{ max-width:15.5em; padding:.55em .85em .6em; border-radius:1.15em; font-size:.92em; line-height:1.3; }
  .hvn.hvn-invite .hi-me{ background:#1A8CFF; color:#fff; border-bottom-right-radius:.35em; }
  .hvn.hvn-invite .hi-them{ align-self:flex-start; margin-top:1em; background:var(--hi-them); color:var(--hi-them-ink); border-bottom-left-radius:.35em; }

  .hvn.hvn-invite .hi-link{ width:15em; margin-top:.35em; border-radius:1.1em; overflow:hidden; background:var(--hi-them); }
  .hvn.hvn-invite .hi-art{ height:6.6em; display:grid; place-items:center;
    background:radial-gradient(70% 80% at 30% 20%, rgba(255,236,214,.9), transparent 70%), linear-gradient(160deg, #F7D3B8, #E4865A); }
  .hvn.hvn-invite .hi-art .hvn-icon{ width:3.4em; height:3.4em; border-radius:.85em; background:#fdfcfa; box-shadow:0 .3em .9em rgba(120,40,10,.22); }
  .hvn.hvn-invite .hi-cap{ display:flex; flex-direction:column; gap:.15em; padding:.6em .85em .7em; color:var(--hi-them-ink); }
  .hvn.hvn-invite .hi-cap b{ font-size:.86em; font-weight:600; }
  .hvn.hvn-invite .hi-cap span{ font-size:.72em; opacity:.55; }
  .hvn.hvn-invite .hi-read{ font-size:.66em; font-weight:500; color:var(--hvn-ink3); margin-top:.4em; }


  /* one-time entrance, the first time it's seen: the conversation arrives bubble by bubble */
  .hvn.hvn-invite .hi-to, .hvn.hvn-invite .hi-when, .hvn.hvn-invite .hi-read{ animation:hi-fade .6s ease-out both; }
  .hvn.hvn-invite .hi-when{ animation-delay:.1s; }  .hvn.hvn-invite .hi-read{ animation-delay:.75s; }
  .hvn.hvn-invite .hi-me{ transform-origin:100% 100%; animation:hi-pop .6s var(--hvn-ease) .25s both; }
  .hvn.hvn-invite .hi-link{ transform-origin:100% 100%; animation:hi-pop .6s var(--hvn-ease) .45s both; }
  .hvn.hvn-invite .hi-them{ transform-origin:0 100%; animation:hi-pop .6s var(--hvn-ease) 1.05s both; }
  @keyframes hi-fade { from{opacity:0} }
  @keyframes hi-pop  { from{opacity:0; transform:translateY(.5em) scale(.92)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Who's going? (a one-time entrance, then still) ── */
  .hvn.hvn-going{ aspect-ratio:585/750; }
  .hvn.hvn-going .hg-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 45%, rgba(255,150,90,.16), transparent 70%); }
  .hvn.hvn-going .hg-head{ position:absolute; left:1.83em; top:1.8em; font-size:1.45em; font-weight:700; letter-spacing:-.02em; } /* own em: lines up with the rows */
  .hvn.hvn-going .hg-head b{ font-weight:700; }
  .hvn.hvn-going .hg-head span{ color:var(--hvn-ink3); margin-left:.3em; }

  .hvn.hvn-going .hg-col{ position:absolute; left:1.4em; right:1.4em; top:7em; display:flex; flex-direction:column; gap:1.6em; }
  .hvn.hvn-going .hg-row{ display:flex; align-items:flex-start; gap:.75em; }
  .hvn.hvn-going .hg-ctx{ padding:0 1.25em; opacity:.42; }
  .hvn.hvn-going .hg-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25em; }
  .hvn.hvn-going .hg-txt b{ font-size:1.06em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-going .hg-txt > span{ font-size:.86em; color:var(--hvn-ink3); }
  .hvn.hvn-going .hg-pile{ display:flex; flex-direction:row-reverse; margin-top:.1em; }
  .hvn.hvn-going .hg-pile > * + *{ margin-right:-.5em; }
  .hvn.hvn-going .hg-more{ width:1.75em; height:1.75em; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
    background:var(--hvn-ink3); color:var(--hvn-surface); box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn-going .hg-more span{ font-size:.7em; font-weight:700; }

  .hvn.hvn-going .hg-card{ padding:1.15em 1.25em 1.3em; border-radius:1.4em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-going .hg-card .hg-txt b{ font-size:1.2em; }
  .hvn.hvn-going .hg-card .hg-txt > span{ font-size:.9em; }
  .hvn.hvn-going .hg-label{ margin-top:1.3em; font-size:.82em; font-weight:600; color:var(--hvn-ink2); }
  .hvn.hvn-going .hg-chips{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:.65em; }
  .hvn.hvn-going .hg-chip{ display:inline-flex; align-items:center; gap:.5em; min-height:2.5em; padding:0 .9em 0 .55em; border-radius:.8em;
    background:var(--hvn-fill); font-size:.9em; color:var(--hvn-ink2); }
  .hvn.hvn-going .hg-chip .hvn-av{ width:1.6em; height:1.6em; font-size:.9em; opacity:.4; filter:saturate(.5); box-shadow:none; }
  .hvn.hvn-going .hg-chip.hg-on{ background:var(--s); color:var(--hvn-ink); }
  .hvn.hvn-going .hg-chip.hg-on .hvn-av{ opacity:1; filter:none; }

  /* one-time entrance: the card rises, then the people pop in */
  .hvn.hvn-going .hg-head{ animation:hg-fade .6s ease-out both; }
  .hvn.hvn-going .hg-card{ animation:hg-rise .7s var(--hvn-ease) .05s both; }
  .hvn.hvn-going .hg-ctx{ animation:hg-fade .6s ease-out .75s both; }
  .hvn.hvn-going .hg-chip{ animation:hg-pop .45s var(--hvn-ease) both; }
  .hvn.hvn-going .hg-chip:nth-child(1){ animation-delay:0.30s; }
  .hvn.hvn-going .hg-chip:nth-child(2){ animation-delay:0.36s; }
  .hvn.hvn-going .hg-chip:nth-child(3){ animation-delay:0.42s; }
  .hvn.hvn-going .hg-chip:nth-child(4){ animation-delay:0.48s; }
  .hvn.hvn-going .hg-chip:nth-child(5){ animation-delay:0.54s; }
  .hvn.hvn-going .hg-chip:nth-child(6){ animation-delay:0.60s; }
  .hvn.hvn-going .hg-chip:nth-child(7){ animation-delay:0.66s; }
  @keyframes hg-fade { from{opacity:0} }
  @keyframes hg-rise { from{opacity:0; transform:translateY(.9em)} }
  @keyframes hg-pop  { from{opacity:0; transform:scale(.88)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Rides, sorted. (a one-time entrance, then still) ── */
  .hvn.hvn-rides{ aspect-ratio:585/750; }
  .hvn.hvn-rides .hr-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 40%, rgba(255,150,90,.16), transparent 70%); }
  .hvn.hvn-rides .hr-head{ position:absolute; left:1.83em; top:1.8em; font-size:1.45em; font-weight:700; letter-spacing:-.02em; } /* own em: lines up with the rows */
  .hvn.hvn-rides .hr-head b{ font-weight:700; }
  .hvn.hvn-rides .hr-head span{ color:var(--hvn-ink3); margin-left:.3em; }

  .hvn.hvn-rides .hr-col{ position:absolute; left:1.4em; right:1.4em; top:6.1em; display:flex; flex-direction:column; gap:.9em; }
  .hvn.hvn-rides .hr-card{ padding:1.05em 1.25em 1.15em; border-radius:1.4em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-rides .hr-row{ display:flex; align-items:flex-start; gap:.75em; }
  .hvn.hvn-rides .hr-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25em; }
  .hvn.hvn-rides .hr-txt b{ font-size:1.2em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-rides .hr-txt > span{ font-size:.9em; color:var(--hvn-ink3); }
  .hvn.hvn-rides .hr-big{ width:2em; height:2em; font-size:1.05em; margin-top:.1em; }
  .hvn.hvn-rides .hr-card--ask .hr-txt b{ font-size:1.06em; }
  .hvn.hvn-rides .hr-card--ask .hr-big{ width:1.75em; height:1.75em; font-size:1em; }

  .hvn.hvn-rides .hr-label{ display:flex; align-items:center; margin-top:.95em; font-size:.82em; font-weight:600; color:var(--hvn-ink2); }
  .hvn.hvn-rides .hr-label i{ margin-left:auto; display:grid; place-items:center; width:1.45em; height:1.45em; border-radius:50%;
    background:var(--hvn-fill); color:var(--hvn-ink3); font-style:normal; font-size:.8em; font-weight:700; }
  .hvn.hvn-rides .hr-q{ margin-top:.85em; font-size:.9em; font-weight:500; color:var(--hvn-rust-text); }
  .hvn.hvn-rides .hr-chips{ display:flex; gap:.5em; margin-top:.6em; }
  .hvn.hvn-rides .hr-chip{ display:inline-flex; align-items:center; gap:.5em; width:6.2em; min-height:2.35em; padding:0 .8em 0 .55em; border-radius:.8em;
    background:var(--hvn-fill); font-size:.9em; color:var(--hvn-ink2); }
  .hvn.hvn-rides .hr-chip .hvn-av{ width:1.6em; height:1.6em; font-size:.9em; opacity:.4; filter:saturate(.5); box-shadow:none; }
  .hvn.hvn-rides .hr-chip.hr-on{ background:var(--s); color:var(--hvn-ink); }
  .hvn.hvn-rides .hr-chip.hr-on .hvn-av{ opacity:1; filter:none; }

  /* one-time entrance: the covered drive rises, then the one that still needs a driver */
  .hvn.hvn-rides .hr-head{ animation:hr-fade .6s ease-out both; }
  .hvn.hvn-rides .hr-card{ animation:hr-rise .7s var(--hvn-ease) .05s both; }
  .hvn.hvn-rides .hr-card--ask{ animation-delay:.3s; }
  .hvn.hvn-rides .hr-q{ animation:hr-fade .6s ease-out .7s both; }
  @keyframes hr-fade { from{opacity:0} }
  @keyframes hr-rise { from{opacity:0; transform:translateY(.9em)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Time to head out. (a one-time entrance, then still; a lock screen: same in light and dark, like the real thing) ── */
  .hvn.hvn-headout{ aspect-ratio:585/750; }
  .hvn.hvn-headout .ho-wall{ position:absolute; inset:0;
    background:
      radial-gradient(60% 40% at 18% 88%, rgba(255,236,214,.55), transparent 70%),
      radial-gradient(50% 35% at 90% 30%, rgba(255,190,140,.35), transparent 70%),
      linear-gradient(172deg, #C9542A 0%, #E4865A 34%, #F1B087 66%, #F7D3B8 100%); }
  .hvn.hvn-headout .ho-scene{ position:absolute; inset:0; color:#fff; }
  .hvn.hvn-headout .ho-date{ position:absolute; left:0; right:0; top:2.3em; text-align:center; font-size:.95em; font-weight:600; opacity:.9; }
  .hvn.hvn-headout .ho-clock{ position:absolute; left:0; right:0; top:.62em; /* em of the 5.4em clock ≈ 3.35em of stage */ text-align:center; font-size:5.4em; line-height:1; font-weight:600;
    letter-spacing:-.02em; font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    font-variant-numeric:proportional-nums; text-shadow:0 .03em .12em rgba(120,40,10,.18); } /* static: no rolling digit, so no tabular slots */

  .hvn.hvn-headout .ho-stack{ position:absolute; left:1.1em; right:1.1em; top:10.5em; display:flex; flex-direction:column; gap:.55em; }
  .hvn.hvn-headout .ho-note{ display:flex; gap:.7em; align-items:flex-start; padding:.8em .9em .85em;
    border-radius:1.3em; color:#1a1a18; background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
    box-shadow:0 .1em .3em rgba(120,40,10,.08), 0 .8em 2.2em rgba(120,40,10,.16); }
  .hvn.hvn-headout .ho-older{ background:rgba(255,255,255,.6); }
  .hvn.hvn-headout .ho-txt{ flex:1; min-width:0; }
  .hvn.hvn-headout .ho-top{ display:flex; gap:.5em; align-items:baseline; }
  .hvn.hvn-headout .ho-top b{ flex:1; font-size:.86em; font-weight:600; letter-spacing:-.01em; }
  .hvn.hvn-headout .ho-top span{ font-size:.7em; opacity:.5; white-space:nowrap; }
  .hvn.hvn-headout .ho-txt p{ font-size:.82em; margin-top:.15em; opacity:.85; }

  /* one-time entrance: the notifications stack in, oldest first, the newest landing on top */
  .hvn.hvn-headout .ho-date, .hvn.hvn-headout .ho-clock{ animation:ho-fade .6s ease-out both; }
  .hvn.hvn-headout .ho-note{ animation:ho-in .6s var(--hvn-ease) both; }
  .hvn.hvn-headout .ho-note:nth-child(3){ animation-delay:.2s; }
  .hvn.hvn-headout .ho-note:nth-child(2){ animation-delay:.45s; }
  .hvn.hvn-headout .ho-note:nth-child(1){ animation-delay:.7s; }
  @keyframes ho-fade { from{opacity:0} }
  @keyframes ho-in   { from{opacity:0; transform:translateY(-.7em) scale(.96)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Before the party. (a one-time entrance, then still) ── */
  .hvn.hvn-gift{ aspect-ratio:585/750; }
  .hvn.hvn-gift .hb-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 30%, rgba(255,150,90,.18), transparent 70%); }

  .hvn.hvn-gift .hb-invite{ position:absolute; left:50%; top:1.9em; width:14.5em; margin-left:-7.25em; padding:1.1em 1em 1em; text-align:center;
    border-radius:.6em; color:#3a2a5c; transform:rotate(-3.5deg);
    background:
      radial-gradient(circle at 12% 18%, #FF8A65 0 .22em, transparent .26em),
      radial-gradient(circle at 86% 14%, #4FC3F7 0 .2em, transparent .24em),
      radial-gradient(circle at 92% 72%, #FFD54F 0 .24em, transparent .28em),
      radial-gradient(circle at 7% 80%, #BA68C8 0 .2em, transparent .24em),
      radial-gradient(circle at 78% 92%, #81C784 0 .18em, transparent .22em),
      #FFF6E0;
    box-shadow:0 .1em .3em rgba(26,26,24,.08), 0 1.2em 2.8em rgba(60,40,20,.2); }
  .hvn.hvn-gift .hb-yours{ font-family:"Marker Felt","Chalkboard SE","Comic Neue",ui-rounded,sans-serif; font-size:.85em; color:#E0567A; }
  .hvn.hvn-gift .hb-big{ margin-top:.15em; font-family:"Chalkboard SE","Comic Neue",ui-rounded,sans-serif; font-size:1.55em; font-weight:700; color:#5B3FA8; letter-spacing:-.01em; }
  .hvn.hvn-gift .hb-big span{ font-size:.85em; }
  .hvn.hvn-gift .hb-line{ margin-top:.45em; font-size:.62em; font-weight:600; }
  .hvn.hvn-gift .hb-line + .hb-line{ margin-top:.2em; }
  .hvn.hvn-gift .hb-rsvp{ margin-top:.55em; font-size:.55em; opacity:.65; }

  .hvn.hvn-gift .hb-card{ position:absolute; left:1.4em; right:1.4em; top:12.6em; padding:1.15em 1.25em 1.1em; border-radius:1.4em;
    background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-gift .hb-row{ display:flex; align-items:flex-start; gap:.75em; }
  .hvn.hvn-gift .hb-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25em; }
  .hvn.hvn-gift .hb-txt b{ font-size:1.2em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-gift .hb-txt > span{ font-size:.9em; color:var(--hvn-ink3); }
  .hvn.hvn-gift .hb-big-av{ width:2em; height:2em; font-size:1.05em; margin-top:.1em; }
  .hvn.hvn-gift .hb-label{ margin-top:1.25em; font-size:.82em; font-weight:600; color:var(--hvn-ink2); }
  .hvn.hvn-gift .hb-item{ display:flex; align-items:center; gap:.6em; padding:.75em 0; border-bottom:.06em solid var(--hvn-rule); font-size:.95em; }
  .hvn.hvn-gift .hb-item:last-child{ border-bottom:0; padding-bottom:.1em; }
  .hvn.hvn-gift .hb-item i{ width:1.2em; height:1.2em; flex:0 0 auto; border-radius:50%; border:.1em solid var(--hvn-ink3); }
  .hvn.hvn-gift .hb-what{ flex:1; min-width:0; }
  .hvn.hvn-gift .hb-when{ display:inline-flex; align-items:center; gap:.4em; font-size:.82em; color:var(--hvn-ink3); white-space:nowrap; }
  .hvn.hvn-gift .hb-when .hvn-av{ width:1.5em; height:1.5em; font-size:.85em; box-shadow:none; }

  /* one-time entrance: the invite drops in, then the event and its reminders */
  .hvn.hvn-gift .hb-invite{ animation:hb-drop .7s var(--hvn-ease) both; }
  .hvn.hvn-gift .hb-card{ animation:hb-rise .7s var(--hvn-ease) .3s both; }
  .hvn.hvn-gift .hb-item{ animation:hb-fade .5s ease-out .6s both; }
  .hvn.hvn-gift .hb-item:last-child{ animation-delay:.72s; }
  @keyframes hb-drop { from{opacity:0; transform:translateY(-.8em) rotate(-7deg) scale(1.03)} }
  @keyframes hb-rise { from{opacity:0; transform:translateY(.9em)} }
  @keyframes hb-fade { from{opacity:0; transform:translateY(.3em)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Remember what to bring. (a one-time entrance, then still) ── */
  .hvn.hvn-bring{ aspect-ratio:585/750; }
  .hvn.hvn-bring .hc-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 45%, rgba(255,150,90,.16), transparent 70%); }
  .hvn.hvn-bring .hc-head{ position:absolute; left:1.83em; top:1.8em; font-size:1.45em; font-weight:700; letter-spacing:-.02em; } /* own em: lines up with the rows */
  .hvn.hvn-bring .hc-head b{ font-weight:700; }
  .hvn.hvn-bring .hc-head span{ color:var(--hvn-ink3); margin-left:.3em; }

  .hvn.hvn-bring .hc-card{ position:absolute; left:1.4em; right:1.4em; top:6.4em; padding:1.15em 1.25em 1.3em; border-radius:1.4em;
    background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-bring .hc-row{ display:flex; align-items:flex-start; gap:.75em; }
  .hvn.hvn-bring .hc-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25em; }
  .hvn.hvn-bring .hc-txt b{ font-size:1.2em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-bring .hc-txt > span{ font-size:.9em; color:var(--hvn-ink3); }
  .hvn.hvn-bring .hc-big{ width:2em; height:2em; font-size:1.05em; margin-top:.1em; }

  .hvn.hvn-bring .hc-label{ margin-top:1.3em; margin-bottom:.15em; font-size:.82em; font-weight:600; color:var(--hvn-ink2); }
  .hvn.hvn-bring .hc-item{ display:flex; align-items:center; gap:.6em; padding:.7em 0; border-bottom:.06em solid var(--hvn-rule); font-size:.95em; }
  .hvn.hvn-bring .hc-item i{ width:1.2em; height:1.2em; flex:0 0 auto; border-radius:50%; border:.1em solid var(--hvn-ink3); }
  .hvn.hvn-bring .hc-done i{ border:0; background:var(--hvn-rust);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:100%; }
  .hvn.hvn-bring .hc-done .hc-what{ color:var(--hvn-ink3); text-decoration:line-through; text-decoration-color:var(--hvn-ink3); }
  .hvn.hvn-bring .hc-what{ flex:1; min-width:0; }
  .hvn.hvn-bring .hc-when{ display:inline-flex; align-items:center; gap:.4em; font-size:.82em; color:var(--hvn-ink3); white-space:nowrap; }
  .hvn.hvn-bring .hc-when .hvn-av{ width:1.5em; height:1.5em; font-size:.85em; box-shadow:none; }
  .hvn.hvn-bring .hc-notes{ margin-top:.45em; font-size:.9em; line-height:1.4; color:var(--hvn-ink2); }

  /* one-time entrance: the card rises, the list fills in, the cleats get their check */
  .hvn.hvn-bring .hc-head{ animation:hc-fade .6s ease-out both; }
  .hvn.hvn-bring .hc-card{ animation:hc-rise .7s var(--hvn-ease) .05s both; }
  .hvn.hvn-bring .hc-item, .hvn.hvn-bring .hc-notes{ animation:hc-in .5s ease-out both; }
  .hvn.hvn-bring .hc-item:nth-of-type(3){ animation-delay:0.30s; }
  .hvn.hvn-bring .hc-item:nth-of-type(4){ animation-delay:0.37s; }
  .hvn.hvn-bring .hc-item:nth-of-type(5){ animation-delay:0.44s; }
  .hvn.hvn-bring .hc-item:nth-of-type(6){ animation-delay:0.51s; }
  .hvn.hvn-bring .hc-notes{ animation-delay:.65s; }
  .hvn.hvn-bring .hc-done i{ animation:hc-check .45s var(--hvn-ease) 1s both; }
  @keyframes hc-fade  { from{opacity:0} }
  @keyframes hc-rise  { from{opacity:0; transform:translateY(.9em)} }
  @keyframes hc-in    { from{opacity:0; transform:translateY(.3em)} }
  @keyframes hc-check { from{transform:scale(.4); opacity:0} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── A little heads-up. (a one-time entrance, then still) ── */
  .hvn.hvn-brief{ aspect-ratio:585/750; }
  .hvn.hvn-brief .hm-glow{ position:absolute; inset:0; background:radial-gradient(60% 45% at 50% 40%, rgba(255,150,90,.18), transparent 70%); }
  .hvn.hvn-brief .hm-stack{ position:absolute; left:1.3em; right:1.3em; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; }
  .hvn.hvn-brief .hm-when{ margin:1.35em 0 .55em .9em; font-size:.68em; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hvn-ink3); }
  .hvn.hvn-brief .hm-when:first-child{ margin-top:0; }
  .hvn.hvn-brief .hm-note{ display:flex; gap:.7em; align-items:flex-start; padding:.85em .95em .9em; border-radius:1.3em;
    background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-brief .hm-txt{ flex:1; min-width:0; }
  .hvn.hvn-brief .hm-txt b{ display:block; font-size:.9em; font-weight:600; letter-spacing:-.01em; }
  .hvn.hvn-brief .hm-txt p{ margin-top:.2em; font-size:.84em; line-height:1.35; color:var(--hvn-ink2); }

  /* one-time entrance: the three briefings stack in, in the order they'd arrive */
  .hvn.hvn-brief .hm-when{ animation:hm-fade .5s ease-out both; }
  .hvn.hvn-brief .hm-note{ animation:hm-in .6s var(--hvn-ease) both; }
  .hvn.hvn-brief .hm-stack > :nth-child(1){ animation-delay:0s; }
  .hvn.hvn-brief .hm-stack > :nth-child(2){ animation-delay:0.08s; }
  .hvn.hvn-brief .hm-stack > :nth-child(3){ animation-delay:0.3s; }
  .hvn.hvn-brief .hm-stack > :nth-child(4){ animation-delay:0.38s; }
  .hvn.hvn-brief .hm-stack > :nth-child(5){ animation-delay:0.6s; }
  .hvn.hvn-brief .hm-stack > :nth-child(6){ animation-delay:0.68s; }
  @keyframes hm-fade { from{opacity:0} }
  @keyframes hm-in   { from{opacity:0; transform:translateY(.7em) scale(.97)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── One glance. Got it. (a one-time entrance, then still; the widgets follow the theme, the wallpaper doesn't) ── */
  .hvn.hvn-widget{ aspect-ratio:585/750; --hu-bg:#fdfcfa; --hu-soft:#faece4; --hu-lead:rgba(30,136,229,.1); }
  .hvn--dark.hvn-widget, [data-theme="dark"] .hvn.hvn-widget{ --hu-bg:#1c1b19; --hu-soft:#3d190b; --hu-lead:rgba(30,136,229,.18); }
  .hvn.hvn-widget .hu-wall{ position:absolute; inset:0;
    background:
      radial-gradient(70% 45% at 85% 15%, rgba(255,214,186,.6), transparent 70%),
      radial-gradient(60% 40% at 10% 85%, rgba(255,236,214,.5), transparent 70%),
      linear-gradient(165deg, #E9A27E 0%, #D98466 38%, #C7798A 75%, #B57A9C 100%); }

  /* one widget: medium is 338×158pt, small 158×158pt; 1pt ≈ .062em here */
  .hvn.hvn-widget .hu-w{ position:absolute; display:flex; padding:1em 1.05em; border-radius:1.4em; color:var(--hvn-ink);
    background:radial-gradient(90% 120% at 0% 0%, var(--hu-lead), transparent 70%), var(--hu-bg);
    box-shadow:0 .2em .6em rgba(80,30,30,.12), 0 1.4em 3em rgba(80,30,30,.22); }
  .hvn.hvn-widget .hu-med{ left:1.9em; top:7.2em; width:21em; height:9.8em; transform:rotate(-3deg); }
  .hvn.hvn-widget .hu-small{ left:13.3em; top:15.4em; width:9.8em; height:9.8em; transform:rotate(4deg); }

  .hvn.hvn-widget .hu-stack{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
  .hvn.hvn-widget .hu-title{ font-size:1.12em; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
  .hvn.hvn-widget .hu-small .hu-title{ font-size:1.05em; }
  .hvn.hvn-widget .hu-who{ display:flex; align-items:center; gap:.45em; margin-top:.55em; font-size:.8em; font-weight:600; color:var(--hvn-ink2); }
  .hvn.hvn-widget .hu-who .hvn-av{ width:2em; height:2em; font-size:1em; box-shadow:none; }
  .hvn.hvn-widget .hu-time{ margin-top:auto; font-size:.8em; font-weight:600; color:var(--hvn-ink3); }
  .hvn.hvn-widget .hu-leave{ margin-top:.4em; padding:.3em .55em; border-radius:.6em; background:var(--hu-soft); color:var(--hvn-rust-text); font-size:.8em; font-weight:600; white-space:nowrap; }

  .hvn.hvn-widget .hu-list{ width:9.3em; flex:0 0 auto; padding-left:.95em; border-left:.06em solid var(--hvn-rule); display:flex; flex-direction:column; gap:.62em; }
  .hvn.hvn-widget .hu-day{ font-size:.66em; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--hvn-ink3); }
  .hvn.hvn-widget .hu-item{ display:flex; align-items:center; gap:.6em; font-size:.87em; font-weight:600; white-space:nowrap; }
  .hvn.hvn-widget .hu-item i{ width:1.2em; height:1.2em; flex:0 0 auto; border-radius:50%; border:.12em solid var(--hvn-ink3); }
  .hvn.hvn-widget .hu-done{ color:var(--hvn-ink3); }
  .hvn.hvn-widget .hu-done i{ border:0; background:var(--hvn-rust) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.4 3.4L17 9' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%; }

  /* one-time entrance: the medium settles, the small one tips in after it */
  .hvn.hvn-widget .hu-med{ animation:hu-med .7s var(--hvn-ease) .05s both; }
  .hvn.hvn-widget .hu-small{ animation:hu-small .7s var(--hvn-ease) .3s both; }
  .hvn.hvn-widget .hu-done i{ animation:hu-pop .4s var(--hvn-ease) .8s both; }
  @keyframes hu-med   { from{opacity:0; transform:translateY(.8em) rotate(-3deg) scale(.97)} }
  @keyframes hu-small { from{opacity:0; transform:translateY(1em) rotate(-2deg) scale(.95)} }
  @keyframes hu-fade  { from{opacity:0} }
  @keyframes hu-pop   { from{transform:scale(.4)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Just ask Haven. (wide; a one-time entrance, then still) ── */
  .hvn.hvn-ask{ aspect-ratio:880/598; --hq-q:#e9e9ec; }
  .hvn--dark.hvn-ask, [data-theme="dark"] .hvn.hvn-ask{ --hq-q:rgba(255,255,255,.12); }
  .hvn.hvn.hvn-ask .hvn__stage{ font-size:8px; font-size:2cqw; } /* wide card: the stage is 50em wide, so type matches the narrow cards */
  .hvn.hvn-ask .hq-glow{ position:absolute; inset:0; background:radial-gradient(45% 50% at 50% 50%, rgba(255,150,90,.16), transparent 70%); }
  .hvn.hvn-ask .hq-back{ position:absolute; left:2em; top:1.8em; width:2.6em; height:2.6em; border-radius:50%; display:grid; place-items:center;
    background:var(--hvn-surface); box-shadow:0 .1em .4em rgba(26,26,24,.1); }
  .hvn.hvn-ask .hq-back svg{ width:1.3em; height:1.3em; fill:none; stroke:var(--hvn-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

  .hvn.hvn-ask .hq-col{ position:absolute; left:8em; right:8em; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; }
  .hvn.hvn-ask .hq-q{ align-self:flex-end; max-width:24em; padding:.6em 1em .65em; border-radius:1.1em; background:var(--hq-q); font-size:1.25em; line-height:1.35; }
  .hvn.hvn-ask .hq-a{ margin-top:1.3em; font-size:1.4em; line-height:1.45; letter-spacing:-.01em; }
  .hvn.hvn-ask .hq-a b{ font-weight:600; }
  .hvn.hvn-ask .hq-day{ margin-top:2em; padding-bottom:.55em; border-bottom:.06em solid var(--hvn-rule); font-size:.85em; font-weight:500; color:var(--hvn-ink3); }
  .hvn.hvn-ask .hq-row{ display:flex; align-items:center; gap:.75em; padding-top:1em; }
  .hvn.hvn-ask .hq-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25em; }
  .hvn.hvn-ask .hq-txt b{ font-size:1.15em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-ask .hq-txt span{ font-size:.92em; color:var(--hvn-ink3); }
  .hvn.hvn-ask .hq-pile{ display:flex; flex-direction:row-reverse; }
  .hvn.hvn-ask .hq-pile .hvn-av{ width:2em; height:2em; font-size:1.05em; }
  .hvn.hvn-ask .hq-pile .hvn-av + .hvn-av{ margin-right:-.5em; }

  /* one-time entrance: the question goes up, the answer comes back, the event settles under it */
  .hvn.hvn-ask .hq-q{ transform-origin:100% 100%; animation:hq-pop .55s var(--hvn-ease) .05s both; }
  .hvn.hvn-ask .hq-a{ animation:hq-rise .7s var(--hvn-ease) .5s both; }
  .hvn.hvn-ask .hq-day, .hvn.hvn-ask .hq-row{ animation:hq-rise .6s var(--hvn-ease) .95s both; }
  .hvn.hvn-ask .hq-row{ animation-delay:1.05s; }
  @keyframes hq-pop  { from{opacity:0; transform:translateY(.5em) scale(.94)} }
  @keyframes hq-rise { from{opacity:0; transform:translateY(.6em)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Say it your way. (a one-time entrance, then still) ── */
  .hvn.hvn-typed{ aspect-ratio:440/598; }
  .hvn.hvn-typed .ht-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 55%, rgba(255,150,90,.16), transparent 70%); }
  .hvn.hvn-typed .ht-bar{ position:absolute; left:1.2em; right:1.2em; top:2em; display:flex; align-items:center; gap:.6em; padding:.55em .55em .55em 1.1em;
    border-radius:2em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-typed .ht-typed{ flex:1; min-width:0; font-size:.86em; white-space:nowrap; overflow:hidden; }
  .hvn.hvn-typed .ht-typed > span{ display:inline-block; }
  .hvn.hvn-typed .ht-send{ width:2.1em; height:2.1em; flex:0 0 auto; border-radius:50%; background:var(--hvn-rust); display:grid; place-items:center; }
  .hvn.hvn-typed .ht-send svg{ width:1.1em; height:1.1em; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .hvn.hvn-typed .ht-card{ position:absolute; left:1.4em; right:1.4em; top:7.4em; }
  /* the "here's what Haven made of it" preview card, shared by the typed-plan and usual-place cards */
  .hvn.hvn-typed .ht-card{ padding:1.2em 1.25em 1.25em; border-radius:1.4em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-typed .ht-title{ font-size:1.25em; font-weight:600; letter-spacing:-.02em; }
  .hvn.hvn-typed .ht-line{ display:flex; align-items:center; gap:.6em; margin-top:.6em; font-size:.88em; color:var(--hvn-ink2); }
  .hvn.hvn-typed .ht-title + .ht-line{ margin-top:.85em; }
  .hvn.hvn-typed .ht-line svg{ width:1.05em; height:1.05em; flex:0 0 auto; fill:none; stroke:var(--hvn-ink3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .hvn.hvn-typed .ht-chip{ display:inline-flex; align-items:center; gap:.4em; margin-top:.85em; padding:.3em .7em .3em .35em; border-radius:2em;
    background:var(--s); font-size:.82em; font-weight:500; }
  .hvn.hvn-typed .ht-chip .hvn-av{ width:1.5em; height:1.5em; font-size:.85em; box-shadow:none; }
  .hvn.hvn-typed .ht-place{ display:flex; align-items:center; gap:.6em; margin-top:.9em; padding-top:.85em; border-top:.06em solid var(--hvn-rule); }
  .hvn.hvn-typed .ht-pin{ width:1.5em; height:1.5em; flex:0 0 auto; border-radius:50%; background:var(--hvn-rust); display:grid; place-items:center; }
  .hvn.hvn-typed .ht-pin::after{ content:""; width:.45em; height:.45em; border-radius:50%; background:#fff; }
  .hvn.hvn-typed .ht-pname{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15em; font-size:.88em; }
  .hvn.hvn-typed .ht-pname small{ font-size:.78em; color:var(--hvn-ink3); }
  .hvn.hvn-typed .ht-chev{ color:var(--hvn-ink3); font-size:.9em; }
  .hvn.hvn-typed .ht-save{ display:grid; place-items:center; height:2.9em; margin-top:1.2em; border-radius:2em; background:var(--hvn-rust); color:#fff; font-size:.95em; font-weight:600; }


  /* one-time entrance: the words type in, then the event they describe */
  .hvn.hvn-typed .ht-bar{ animation:ht-fade .4s ease-out both; }
  .hvn.hvn-typed .ht-typed > span{ animation:ht-type 1s steps(36, end) .25s both; }
  .hvn.hvn-typed .ht-send{ animation:ht-tap .3s ease-out 1.3s both; }
  .hvn.hvn-typed .ht-card{ animation:ht-rise .7s var(--hvn-ease) 1.45s both; }
  @keyframes ht-fade { from{opacity:0} }
  @keyframes ht-type { from{clip-path:inset(0 100% 0 0)} }
  @keyframes ht-tap  { 50%{transform:scale(.88)} }
  @keyframes ht-rise { from{opacity:0; transform:translateY(.9em)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── The usual place? (a one-time entrance, then still) ── */
  .hvn.hvn-place{ aspect-ratio:440/598; }
  .hvn.hvn-place .hp-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 60%, rgba(255,150,90,.18), transparent 70%); }
  .hvn.hvn-place .hp-said{ position:absolute; left:1.15em; right:1em; top:1.5em; font-size:1.45em; font-weight:600; letter-spacing:-.02em; line-height:1.2; } /* own em */
  .hvn.hvn-place .hp-card{ position:absolute; left:1.4em; right:1.4em; top:7.6em; }
  /* the "here's what Haven made of it" preview card, shared by the typed-plan and usual-place cards */
  .hvn.hvn-place .hp-card{ padding:1.2em 1.25em 1.25em; border-radius:1.4em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-place .hp-title{ font-size:1.25em; font-weight:600; letter-spacing:-.02em; }
  .hvn.hvn-place .hp-line{ display:flex; align-items:center; gap:.6em; margin-top:.6em; font-size:.88em; color:var(--hvn-ink2); }
  .hvn.hvn-place .hp-title + .hp-line{ margin-top:.85em; }
  .hvn.hvn-place .hp-line svg{ width:1.05em; height:1.05em; flex:0 0 auto; fill:none; stroke:var(--hvn-ink3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .hvn.hvn-place .hp-chip{ display:inline-flex; align-items:center; gap:.4em; margin-top:.85em; padding:.3em .7em .3em .35em; border-radius:2em;
    background:var(--s); font-size:.82em; font-weight:500; }
  .hvn.hvn-place .hp-chip .hvn-av{ width:1.5em; height:1.5em; font-size:.85em; box-shadow:none; }
  .hvn.hvn-place .hp-place{ display:flex; align-items:center; gap:.6em; margin-top:.9em; padding-top:.85em; border-top:.06em solid var(--hvn-rule); }
  .hvn.hvn-place .hp-pin{ width:1.5em; height:1.5em; flex:0 0 auto; border-radius:50%; background:var(--hvn-rust); display:grid; place-items:center; }
  .hvn.hvn-place .hp-pin::after{ content:""; width:.45em; height:.45em; border-radius:50%; background:#fff; }
  .hvn.hvn-place .hp-pname{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15em; font-size:.88em; }
  .hvn.hvn-place .hp-pname small{ font-size:.78em; color:var(--hvn-ink3); }
  .hvn.hvn-place .hp-chev{ color:var(--hvn-ink3); font-size:.9em; }
  .hvn.hvn-place .hp-save{ display:grid; place-items:center; height:2.9em; margin-top:1.2em; border-radius:2em; background:var(--hvn-rust); color:#fff; font-size:.95em; font-weight:600; }

  .hvn.hvn-place .hp-usual{ margin-left:-.6em; margin-right:-.6em; padding:.85em .6em .75em; border-radius:.9em; border-top-color:transparent;
    background:linear-gradient(rgba(255,160,70,.16), rgba(255,160,70,.16)) no-repeat 0 0 / 100% 100%; }
  .hvn.hvn-place .hp-usual small{ color:var(--hvn-rust-text); font-weight:500; }

  /* one-time entrance: what was said, the card, then the place it already knew */
  .hvn.hvn-place .hp-said{ animation:hp-fade .5s ease-out both; }
  .hvn.hvn-place .hp-card{ animation:hp-rise .7s var(--hvn-ease) .25s both; }
  .hvn.hvn-place .hp-usual{ animation:hp-sweep .7s ease-in-out .85s both; }
  .hvn.hvn-place .hp-usual small{ animation:hp-fade .5s ease-out 1.25s both; }
  @keyframes hp-fade  { from{opacity:0} }
  @keyframes hp-rise  { from{opacity:0; transform:translateY(.9em)} }
  @keyframes hp-sweep { from{background-size:0% 100%} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Screenshot. Schedule. Done. (wide; a one-time entrance, then still) ── */
  .hvn.hvn-scan{ aspect-ratio:880/598; }
  .hvn.hvn.hvn-scan .hvn__stage{ font-size:8px; font-size:2cqw; } /* wide card: the stage is 50em wide, so type matches the narrow cards */
  .hvn.hvn-scan .hk-glow{ position:absolute; inset:0; background:radial-gradient(40% 55% at 30% 50%, rgba(255,166,112,.24), transparent 70%); }

  .hvn.hvn-scan .hk-flyer{ position:absolute; left:6em; top:7em; width:14em; height:19.5em; border-radius:.45em; overflow:hidden;
    background:#fffdf6; color:#3a3a36; box-shadow:var(--hvn-shadow); transform:rotate(-3deg); }
  .hvn.hvn-scan .hk-band{ height:.55em; background:#F5C451; }
  .hvn.hvn-scan .hk-fhead{ display:flex; align-items:center; justify-content:space-between; padding:.65em .8em 0; }
  .hvn.hvn-scan .hk-fhead span{ font-size:.85em; }
  .hvn.hvn-scan .hk-fhead b, .hvn.hvn-scan .hk-coming, .hvn.hvn-scan .hk-item, .hvn.hvn-scan .hk-note{
    font-family:"Chalkboard SE","Comic Neue",ui-rounded,"SF Pro Rounded",system-ui,sans-serif; }
  .hvn.hvn-scan .hk-fhead b{ font-size:1.4em; font-weight:700; color:#3B7DD8; letter-spacing:-.01em; }
  .hvn.hvn-scan .hk-fsub{ font-size:.5em; color:#85857c; text-align:center; margin-top:.35em; }
  .hvn.hvn-scan .hk-pad{ padding:.55em .8em 0; }
  .hvn.hvn-scan .hk-l{ display:block; height:.32em; border-radius:.2em; background:#ebe6d9; margin-top:.38em; }
  .hvn.hvn-scan .hk-box{ margin:.65em .7em 0; padding:.55em .65em .65em; border:.08em dashed #9fd3a9; border-radius:.6em; }
  .hvn.hvn-scan .hk-box--amber{ border-color:#f1cf6e; }
  .hvn.hvn-scan .hk-coming{ font-size:.66em; font-weight:700; color:#2e9a52; }
  .hvn.hvn-scan .hk-box--amber .hk-coming{ color:#c9971b; }
  .hvn.hvn-scan .hk-item{ font-size:.54em; font-weight:700; color:#C0472A; margin-top:.7em; line-height:1.3; }
  .hvn.hvn-scan .hk-note{ font-size:.54em; color:#3a3a36; margin-top:.15em; }
  .hvn.hvn-scan .hk-scan{ position:absolute; left:-5%; right:-5%; top:100%; height:2.4em; margin-top:-1.2em; opacity:0;
    background:linear-gradient(180deg, transparent, rgba(255,122,46,.16) 45%, rgba(184,56,15,.5) 50%, rgba(255,122,46,.16) 55%, transparent); }

  .hvn.hvn-scan .hk-sheet{ position:absolute; left:23.5em; right:4.5em; top:50%; transform:translateY(-50%); padding:1.2em 1.4em 1.3em;
    border-radius:1.5em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-scan .hk-found{ font-size:.8em; font-weight:600; color:var(--hvn-ink2); }
  .hvn.hvn-scan .hk-row{ display:flex; align-items:flex-start; gap:.75em; padding-top:.95em; }
  .hvn.hvn-scan .hk-check{ flex:0 0 auto; width:1.25em; height:1.25em; margin-top:.1em; border-radius:50%; background:var(--hvn-rust);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:100%; }
  .hvn.hvn-scan .hk-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2em; }
  .hvn.hvn-scan .hk-txt b{ font-size:1em; font-weight:600; letter-spacing:-.01em; }
  .hvn.hvn-scan .hk-txt > span{ font-size:.82em; color:var(--hvn-ink3); }
  .hvn.hvn-scan .hk-tasks{ display:flex; gap:.9em; margin-top:.2em; color:var(--hvn-ink2) !important; }
  .hvn.hvn-scan .hk-tasks span{ display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; }
  .hvn.hvn-scan .hk-tasks i{ width:1em; height:1em; border-radius:50%; border:.1em solid var(--hvn-ink3); }
  .hvn.hvn-scan .hk-row .hvn-av{ width:1.6em; height:1.6em; font-size:.95em; }
  .hvn.hvn-scan .hk-btn{ display:grid; place-items:center; height:2.9em; margin-top:1.3em; border-radius:2em; background:var(--hvn-rust); color:#fff; font-size:.95em; font-weight:600; }

  /* one-time entrance: one read of the flyer, then the events it found */
  .hvn.hvn-scan .hk-flyer{ animation:hk-rise .7s var(--hvn-ease) both; }
  .hvn.hvn-scan .hk-scan{ animation:hk-scan 1.1s ease-in-out .35s both; }
  .hvn.hvn-scan .hk-sheet{ animation:hk-sheet .7s var(--hvn-ease) 1.2s both; }
  .hvn.hvn-scan .hk-row, .hvn.hvn-scan .hk-btn{ animation:hk-in .5s var(--hvn-ease) both; }
  .hvn.hvn-scan .hk-row:nth-child(2){ animation-delay:1.45s; }
  .hvn.hvn-scan .hk-row:nth-child(3){ animation-delay:1.55s; }
  .hvn.hvn-scan .hk-row:nth-child(4){ animation-delay:1.65s; }
  .hvn.hvn-scan .hk-btn{ animation-delay:1.8s; }
  @keyframes hk-rise  { from{opacity:0; transform:translateY(.8em) rotate(-3deg)} }
  @keyframes hk-scan  { 0%{top:0; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:100%; opacity:0} }
  @keyframes hk-sheet { from{opacity:0; transform:translateY(-50%) translateY(1em)} }
  @keyframes hk-in    { from{opacity:0; transform:translateY(.5em)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── New practice time? Got it. (a one-time entrance, then still) ── */
  .hvn.hvn-feed{ aspect-ratio:440/598; }
  .hvn.hvn-feed .hf-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 45%, rgba(255,150,90,.16), transparent 70%); }
  .hvn.hvn-feed .hf-head{ position:absolute; left:1.83em; top:1.8em; font-size:1.45em; font-weight:700; letter-spacing:-.02em; } /* own em: lines up with the rows */
  .hvn.hvn-feed .hf-head b{ font-weight:700; }
  .hvn.hvn-feed .hf-head span{ color:var(--hvn-ink3); margin-left:.3em; }

  .hvn.hvn-feed .hf-col{ position:absolute; left:1.4em; right:1.4em; top:6.6em; display:flex; flex-direction:column; gap:1.35em; }
  .hvn.hvn-feed .hf-col > .hf-row{ padding:0 1.25em; }
  .hvn.hvn-feed .hf-row{ display:flex; align-items:flex-start; gap:.75em; }
  .hvn.hvn-feed .hf-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25em; }
  .hvn.hvn-feed .hf-txt b{ font-size:1.06em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-feed .hf-txt > span{ font-size:.86em; color:var(--hvn-ink3); }
  .hvn.hvn-feed .hf-pile{ display:flex; flex-direction:row-reverse; margin-top:.1em; }
  .hvn.hvn-feed .hf-pile .hvn-av + .hvn-av{ margin-right:-.5em; }

  .hvn.hvn-feed .hf-card{ position:relative; padding:1.15em 1.25em; border-radius:1.4em; background:var(--hvn-surface); box-shadow:var(--hvn-shadow); overflow:hidden; }
  .hvn.hvn-feed .hf-wash{ position:absolute; inset:0; background:rgba(255,140,40,.08); } /* the app's tint on an event a sync just updated */
  .hvn.hvn-feed .hf-card .hf-row{ position:relative; }
  .hvn.hvn-feed .hf-card .hf-txt b{ font-size:1.2em; }
  .hvn.hvn-feed .hf-card .hf-pile .hvn-av{ width:2em; height:2em; font-size:1.05em; }
  .hvn.hvn-feed .hf-card .hf-pile .hvn-av + .hvn-av{ margin-right:-.55em; }
  .hvn.hvn-feed .hf-meta{ display:grid; font-size:.9em; color:var(--hvn-ink3); line-height:1.35; }
  .hvn.hvn-feed .hf-meta > span{ grid-area:1/1; }
  .hvn.hvn-feed .hf-old{ opacity:0; }
  .hvn.hvn-feed .hf-new em{ font-style:normal; color:var(--hvn-rust-text); white-space:nowrap; }
  .hvn.hvn-feed .hf-past{ opacity:.42; }

  /* one-time entrance: the day as it was, then the team's change lands inline */
  .hvn.hvn-feed .hf-head{ animation:hf-fade .5s ease-out both; }
  .hvn.hvn-feed .hf-col > *{ animation:hf-rise .6s var(--hvn-ease) both; }
  .hvn.hvn-feed .hf-col > :nth-child(2){ animation-delay:.08s; }
  .hvn.hvn-feed .hf-col > :nth-child(3){ animation-delay:.16s; }
  .hvn.hvn-feed .hf-col > :nth-child(4){ animation-delay:.24s; }
  .hvn.hvn-feed .hf-col > :nth-child(5){ animation-delay:.32s; }
  .hvn.hvn-feed .hf-old{ animation:hf-old 1.7s ease-in-out both; }
  .hvn.hvn-feed .hf-new{ animation:hf-new 1.7s ease-in-out both; }
  .hvn.hvn-feed .hf-wash{ animation:hf-wash 1.7s ease-out both; }
  @keyframes hf-fade { from{opacity:0} }
  @keyframes hf-rise { from{opacity:0; transform:translateY(.6em)} }
  @keyframes hf-old  { 0%,65%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(-.4em)} }
  @keyframes hf-new  { 0%,65%{opacity:0; transform:translateY(.4em)} 100%{opacity:1; transform:none} }
  @keyframes hf-wash { 0%,62%{opacity:0} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Your whole day in view. (a one-time entrance, then still) ── */
  .hvn.hvn-day{ aspect-ratio:440/598; }
  .hvn.hvn-day .hw-glow{ position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 40%, rgba(255,150,90,.14), transparent 70%); }
  .hvn.hvn-day .hw-head{ position:absolute; left:1.83em; top:1.8em; font-size:1.45em; font-weight:700; letter-spacing:-.02em; } /* own em: lines up with the rows */
  .hvn.hvn-day .hw-head b{ font-weight:700; }
  .hvn.hvn-day .hw-head span{ color:var(--hvn-ink3); margin-left:.3em; }

  .hvn.hvn-day .hw-list{ position:absolute; left:1.4em; right:1.4em; top:6.1em; }
  .hvn.hvn-day .hw-row{ display:flex; align-items:center; gap:.75em; padding:.6em 1.25em; border-radius:1em; }
  .hvn.hvn-day .hw-picked{ background:var(--hvn-fill); }
  .hvn.hvn-day .hw-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.22em; }
  .hvn.hvn-day .hw-txt b{ font-size:1.02em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-day .hw-txt span{ font-size:.84em; color:var(--hvn-ink3); }
  .hvn.hvn-day .hw-glyph{ width:1.65em; height:1.65em; flex:0 0 auto; border-radius:50%; background:var(--hvn-fill); display:grid; place-items:center; }
  .hvn.hvn-day .hw-glyph svg{ width:.85em; height:.85em; fill:var(--hvn-ink3); stroke:var(--hvn-ink3); stroke-width:1.2; stroke-linejoin:round; }
  .hvn.hvn-day .hw-row .hvn-av{ width:1.75em; height:1.75em; }

  .hvn.hvn-day .hw-sheet{ position:absolute; left:.6em; right:.6em; bottom:-1.5em; display:flex; flex-direction:column; gap:.3em; padding:.6em 1.4em 2.3em;
    border-radius:1.5em 1.5em 0 0; background:var(--hvn-surface); box-shadow:0 -.4em 2em rgba(60,40,20,.14); }
  .hvn.hvn-day .hw-grab{ align-self:center; width:2.2em; height:.25em; border-radius:1em; background:var(--hvn-rule); margin-bottom:.6em; }
  .hvn.hvn-day .hw-sheet b{ font-size:1.15em; font-weight:600; letter-spacing:-.015em; }
  .hvn.hvn-day .hw-sheet > span{ font-size:.84em; color:var(--hvn-ink3); }
  .hvn.hvn-day .hw-copy{ display:flex; align-items:center; justify-content:center; gap:.5em; height:2.8em; margin-top:.75em; border-radius:2em;
    background:var(--hvn-rust); color:#fff; font-size:.92em; font-weight:600; }
  .hvn.hvn-day .hw-copy svg{ width:1.1em; height:1.1em; fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round; }

  /* one-time entrance: the day fills in, work and family together, then the one worth copying opens */
  .hvn.hvn-day .hw-head{ animation:hw-fade .5s ease-out both; }
  .hvn.hvn-day .hw-row{ animation:hw-in .5s var(--hvn-ease) both; }
  .hvn.hvn-day .hw-row:nth-child(1){ animation-delay:.1s; }
  .hvn.hvn-day .hw-row:nth-child(2){ animation-delay:.18s; }
  .hvn.hvn-day .hw-row:nth-child(3){ animation-delay:.26s; }
  .hvn.hvn-day .hw-row:nth-child(4){ animation-delay:.34s; }
  .hvn.hvn-day .hw-row:nth-child(5){ animation-delay:.42s; }
  .hvn.hvn-day .hw-sheet{ animation:hw-sheet .7s var(--hvn-ease) 1s both; }
  @keyframes hw-fade  { from{opacity:0} }
  @keyframes hw-in    { from{opacity:0; transform:translateY(.4em)} }
  @keyframes hw-sheet { from{transform:translateY(105%)} }


  /* ── Haven mock base (identical in every Haven mock; safe to include more than once) ── */
  .hvn{
    --hvn-panel:#f2f0e8; --hvn-surface:#fdfcfa; --hvn-ink:#1a1a18; --hvn-ink2:#4a4a45; --hvn-ink3:#8a8a82;
    --hvn-rule:#e2e0d8; --hvn-fill:rgba(26,26,24,.055); --hvn-rust:#B8380F; --hvn-rust-text:#B8380F; --hvn-amber:#FF7A2E;
    --hvn-shadow:0 .06em .15em rgba(26,26,24,.06), 0 .9em 2.4em rgba(60,40,20,.12);
    --hvn-loop:8s; --hvn-ease:cubic-bezier(.2,.8,.2,1); --hvn-radius:28px;
    position:relative; width:100%; aspect-ratio:585/665; border-radius:var(--hvn-radius); overflow:hidden; isolation:isolate;
    background:var(--hvn-panel); color:var(--hvn-ink); container-type:inline-size; text-align:left; line-height:1.25;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none;
  }
  .hvn--dark, [data-theme="dark"] .hvn{
    --hvn-panel:#161513; --hvn-surface:#1f1e1c; --hvn-ink:#ede9e7; --hvn-ink2:#b0aea9; --hvn-ink3:#7a7974;
    --hvn-rule:#2e2e2b; --hvn-fill:rgba(255,255,255,.08); --hvn-rust-text:#ed835b;
    --hvn-shadow:0 .06em .15em rgba(0,0,0,.3), 0 .9em 2.4em rgba(0,0,0,.45);
  }
  .hvn *, .hvn *::before, .hvn *::after{ box-sizing:border-box; margin:0; padding:0; }
  /* host pages can't restyle text inside the mock */
  .hvn.hvn :is(p,ul,ol,li,b,strong,em,i,span,div){ color:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit;
    text-transform:none; text-decoration:none; text-shadow:none; max-width:none; margin:0; padding:0; border:0; background:none; list-style:none; }
  .hvn.hvn .hvn__stage{ position:absolute; inset:0; font-size:16px; font-size:4cqw; } /* the stage is 25em wide: everything scales with the box */
  .hvn:not(.is-playing) *{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .hvn *{ animation:none !important; } } /* shows the finished frame */
  .hvn.hvn .hvn-av{ width:1.75em; height:1.75em; flex:0 0 auto; border-radius:50%; background:var(--c); display:grid; place-items:center;
           font-size:1em; line-height:1; box-shadow:0 0 0 .14em var(--hvn-surface); }
  .hvn.hvn .hvn-icon{ flex:0 0 auto; width:2.3em; height:2.3em; border-radius:.6em; background:#efe3dd; display:grid; place-items:center; }
  .hvn.hvn .hvn-icon svg{ width:76%; height:76%; fill:#B8380F; }


  /* ── Your family. Your say. (wide; a one-time entrance, then still) ── */
  .hvn.hvn-say{ aspect-ratio:896/800; --hz-grouped:#f2f2f7; --hz-cell:#fff; --hz-sep:rgba(60,60,67,.18); --hz-ok:#2E9E5B; }
  .hvn--dark.hvn-say, [data-theme="dark"] .hvn.hvn-say{ --hz-grouped:#111; --hz-cell:#1c1c1e; --hz-sep:rgba(84,84,88,.6); --hz-ok:#4CC07A; }
  .hvn.hvn.hvn-say .hvn__stage{ font-size:8px; font-size:2cqw; } /* wide card: the stage is 50em wide, so type matches the narrow cards */
  .hvn.hvn-say .hz-glow{ position:absolute; inset:0; background:radial-gradient(40% 45% at 28% 50%, rgba(255,150,90,.22), transparent 70%); }

  /* Haven's card */
  .hvn.hvn-say .hz-haven{ position:absolute; left:3.6em; width:19em; top:50%; transform:translateY(-50%); border-radius:1.2em; overflow:hidden;
    background:var(--hvn-surface); box-shadow:var(--hvn-shadow); }
  .hvn.hvn-say .hz-pair{ display:flex; align-items:center; justify-content:center; padding-top:1.8em; }
  .hvn.hvn-say .hz-pair .hvn-av{ width:2em; height:2em; font-size:1.65em; box-shadow:none; }
  .hvn.hvn-say .hz-link{ position:relative; width:5.4em; height:2.2em; display:grid; place-items:center; }
  .hvn.hvn-say .hz-link i{ position:absolute; left:0; right:0; top:50%; height:.14em; margin-top:-.07em; background:var(--hvn-rule); }
  .hvn.hvn-say .hz-link svg{ position:relative; width:1.9em; height:1.9em; padding:.4em; border-radius:50%; background:var(--hvn-surface);
    fill:none; stroke:var(--hz-ok); stroke-width:2.4; stroke-linecap:round; }
  .hvn.hvn-say .hz-names{ display:flex; justify-content:center; gap:6.35em; padding:.55em 0 1.5em; font-size:.85em; font-weight:600; color:var(--hvn-ink2); }
  .hvn.hvn-say .hz-names span{ width:3.9em; text-align:center; }
  .hvn.hvn-say .hz-cell{ display:flex; align-items:center; gap:.5em; padding:1em 1.2em; border-top:.06em solid var(--hvn-rule); font-size:.95em; }
  .hvn.hvn-say .hz-ok{ color:var(--hz-ok); font-weight:600; }
  .hvn.hvn-say .hz-ok svg{ width:1.2em; height:1.2em; fill:var(--hz-ok); }
  .hvn.hvn-say .hz-manage{ justify-content:space-between; background:var(--hvn-fill); }
  .hvn.hvn-say .hz-chev{ font-size:1.35em; line-height:.8; color:var(--hvn-ink3); }

  /* the iOS sheet */
  .hvn.hvn-say .hz-sheet{ position:absolute; left:25.4em; right:3.6em; top:7.6em; bottom:-2em; padding:1.1em 1.1em 0; border-radius:1.6em 1.6em 0 0;
    background:var(--hz-grouped); box-shadow:0 .1em .3em rgba(0,0,0,.06), 0 1.2em 3em rgba(60,40,20,.2); }
  .hvn.hvn-say .hz-nav{ display:flex; justify-content:flex-end; padding:0 .3em; font-size:.95em; }
  .hvn.hvn-say .hz-nav b{ font-weight:600; color:var(--hvn-rust-text); }
  .hvn.hvn-say .hz-top{ display:flex; flex-direction:column; align-items:center; gap:.35em; margin-top:.2em; }
  .hvn.hvn-say .hz-mark{ width:3.8em; height:3.8em; border-radius:.9em; margin-bottom:.45em; box-shadow:0 .2em .7em rgba(184,56,15,.16); }
  .hvn.hvn-say .hz-top b{ font-size:1.2em; font-weight:700; letter-spacing:-.02em; }
  .hvn.hvn-say .hz-sub{ display:inline-flex; align-items:center; gap:.3em; font-size:.8em; color:var(--hvn-ink3); }
  .hvn.hvn-say .hz-sub svg{ width:1.3em; height:1.3em; fill:var(--hvn-ink3); }
  .hvn.hvn-say .hz-group{ margin-top:1.1em; border-radius:.8em; background:var(--hz-cell); overflow:hidden; }
  .hvn.hvn-say .hz-row{ position:relative; display:flex; align-items:center; gap:.7em; min-height:3.2em; padding:.55em .95em; }
  .hvn.hvn-say .hz-row + .hz-row::before{ content:""; position:absolute; top:0; right:0; left:3.65em; height:.06em; background:var(--hz-sep); }
  .hvn.hvn-say .hz-row div{ flex:1; display:flex; flex-direction:column; gap:.12em; }
  .hvn.hvn-say .hz-row b{ font-size:.9em; font-weight:500; }
  .hvn.hvn-say .hz-row div span{ font-size:.76em; color:var(--hvn-ink3); }
  .hvn.hvn-say .hz-mono{ width:2em; height:2em; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.9em; font-weight:600;
    background:linear-gradient(#a5abb9, #858a99); }
  .hvn.hvn-say .hz-stop{ justify-content:center; font-size:.9em; color:#FF3B30; }

  /* one-time entrance: Haven's card, then the iCloud sheet it opens */
  .hvn.hvn-say .hz-haven{ animation:hz-card .7s var(--hvn-ease) both; }
  .hvn.hvn-say .hz-link svg{ animation:hz-pop .5s var(--hvn-ease) .45s both; }
  .hvn.hvn-say .hz-sheet{ animation:hz-sheet .8s var(--hvn-ease) .8s both; }
  @keyframes hz-card  { from{opacity:0; transform:translateY(-50%) translateY(1em)} }
  @keyframes hz-pop   { from{opacity:0; transform:scale(.6)} }
  @keyframes hz-sheet { from{transform:translateY(105%)} }