/* ==========================================================================
   VIVIFY LANDING · 2026-09-25
   Loaded after style.css. Paper with one soft light per section (the app's
   own washes at about half strength) that moves slower than the page and
   drifts on its own; glass cards; real app screens in a drawn iPhone frame;
   blue only where a person speaks. Motion values are apple.com's, measured.
   ========================================================================== */
/* pills float on paper: whiter than apple's, with a soft lift */
:root{
  --gl-fill: rgba(255,255,255,.5);
  --gl-edge: rgba(255,255,255,.92);
  --gl-hi: rgba(255,255,255,1);
  --gl-shadow: 0 1px 2px rgba(40,48,72,.05), 0 20px 44px -30px rgba(40,48,72,.3);
  --person: #1B6EF3;
  --pill-bg: rgba(255,255,255,.78);
  --pill-bg-hover: rgba(255,255,255,.97);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
}
body{ background: var(--bg); }

/* ---------- light behind the glass ---------- */
.lit{ position: relative; isolation: isolate; overflow: clip; }
.lit__par{ position: absolute; inset: -30% 0; z-index: -1; pointer-events: none; will-change: transform; }
.lit__light{
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 0% 24%, color-mix(in srgb, var(--l1) 52%, transparent), transparent 72%),
    radial-gradient(50% 55% at 52% 20%, color-mix(in srgb, var(--l2) 48%, transparent), transparent 72%),
    radial-gradient(60% 60% at 100% 24%, color-mix(in srgb, var(--l3) 52%, transparent), transparent 72%);
  -webkit-mask-image: linear-gradient(transparent 0, #000 20%, #000 55%, transparent 94%);
          mask-image: linear-gradient(transparent 0, #000 20%, #000 55%, transparent 94%);
}
.lit.is-seen .lit__light{ animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform: translate3d(-2%, -1.5%, 0) } to{ transform: translate3d(2%, 1.5%, 0) } }
[data-light="settings"]{ --l1:#BFD0F2; --l2:#F3DFB5; --l3:#BFE3CD; }
[data-light="sunrise"] { --l1:#C7A6F0; --l2:#F7B38C; --l3:#F4D38A; }
[data-light="band"]    { --l1:#A9D4F5; --l2:#BFE8D0; --l3:#F7C1AE; }
[data-light="corners"] { --l1:#C9C0F9; --l2:#B2DDF6; --l3:#F8CFB5; }

/* ---------- arrivals: a section's header as a group, apple's numbers ---------- */
html.js [data-stagger] [data-item]{ opacity: 0; transform: translateY(30px); }
html.js [data-stagger].in [data-item]{
  opacity: 1; transform: none;
  transition: opacity .9s ease-out var(--d, 0s), transform .7s ease-out var(--d, 0s);
}
html.js [data-stagger].in.arriving [data-item]{ will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce){ html.js [data-stagger] [data-item]{ opacity: 1; transform: none; transition: none; } }

/* ---------- glass ---------- */
.glass{ background: var(--gl-fill); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }

/* ---------- section heads ---------- */
.sec-head{ text-align: center; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.sec-head .p{ margin-left: auto; margin-right: auto; }
.eyebrow{ margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hero__h{ text-wrap: balance; }
.hero__from{ display: inline-flex; align-items: center; gap: 6px; margin: 22px auto 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.hero__from svg{ width: 15px; height: 15px; }
.hero{ padding-bottom: 40px; }
@media (width >= 880px){ .hero{ padding-bottom: 56px; } }
.sbuild .meetline{ margin-top: 0; }
.sbuild .meetline .p{ margin-top: 6px; }
.demo__lead{ margin: 44px auto 0; text-align: center; max-width: 640px; padding: 0 20px; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
.demo{ margin-top: 22px; }
/* the bubble arrives with its heading, so it's never measured against a heading that's still moving */
html.js .meetbub:not(.placed){ opacity: 0; }

/* ---------- the iPhone: a drawn frame around a real screen ---------- */
.iph{ --u: calc(var(--w) / 440); position: relative; width: calc(var(--w) * 1.068); aspect-ratio: 470 / 986; margin: 0; flex: none; }
.iph::after{ content: ""; position: absolute; inset: 2% 3%; border-radius: calc(var(--w) * .17); box-shadow: 0 30px 60px -28px rgba(22,23,26,.55); z-index: -1; }
.iph__scr{ position: absolute; left: calc(var(--w) * .034); top: calc(var(--w) * .034); width: var(--w); height: calc(var(--w) * 956 / 440);
  border-radius: calc(var(--w) * .145); overflow: hidden; background: var(--top, #fff); isolation: isolate; }
.iph__app{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: var(--top, #fff); }
/* the four iOS screens carry their own status bar and island */
.iph__scr--baked .iph__isl, .iph__scr--baked .iph__sb, .iph__scr--baked .iph__home{ display: none; }
.iph__strip{ position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 24); background: var(--tab, var(--top)); }
.iph__isl{ position: absolute; z-index: 8; left: 50%; top: calc(var(--u) * 11); width: calc(var(--u) * 125); height: calc(var(--u) * 37); border-radius: 99px; background: #000; transform: translateX(-50%); }
.iph__sb{ position: absolute; z-index: 7; left: 0; right: 0; top: 0; height: calc(var(--u) * 54); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 52); font-size: calc(var(--u) * 17); font-weight: 600; color: #0B0B0D; }
.iph__sb svg{ height: calc(var(--u) * 13); width: calc(var(--u) * 76); }
.iph__scr--dark .iph__sb{ color: #fff; }
.iph__sb{ color: var(--sbc, #0B0B0D); }
.iph__scr--dark .iph__home{ background: #fff; }
.iph__home{ position: absolute; z-index: 8; left: 50%; bottom: calc(var(--u) * 8); width: calc(var(--u) * 144); height: calc(var(--u) * 5); border-radius: 99px; background: #0B0B0D; transform: translateX(-50%); }
.iph__frame{ position: absolute; left: -1.28%; top: -.2%; width: 102.56%; height: 100.4%; pointer-events: none; z-index: 9; }

/* ---------- a person's words ---------- */
.sayb{ position: relative; display: inline-block; padding: 9px 15px; border-radius: 19px; background: var(--person); color: #fff; font-size: .95rem; line-height: 1.3; letter-spacing: -.005em; }
.sayb::after{ content: ""; position: absolute; bottom: 0; right: -7px; width: 17px; height: 15px; background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M0 0H18C18 12 21 20 30 25.5C21 26.6 11 24.5 4 20C1.5 18.5 0 16 0 13Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M0 0H18C18 12 21 20 30 25.5C21 26.6 11 24.5 4 20C1.5 18.5 0 16 0 13Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }

/* ==========================================================================
   3 · SHE BUILDS IT
   ========================================================================== */
.sbuild{ padding: 96px 0 72px; }
.sbuild__in{ max-width: 1260px; margin: 0 auto; padding: 0 20px; }
.demo{ margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (width >= 880px){ .demo{ grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: center; } }
.demo__left{ display: flex; flex-direction: column; align-items: center; gap: 26px; }
.demo__steps{ display: none; }
@media (width >= 880px){ .demo__steps{ display: flex; flex-direction: column; gap: 4px; width: 250px; } .demo__chips{ display: none; } }

/* the jab */
.jab{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .78; }
.jab figcaption{ font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.jab__win{ width: 240px; height: 176px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--lift-1); position: relative; overflow: hidden; filter: grayscale(1); }
.jab__bar{ height: 22px; border-bottom: 1px solid var(--line); display: flex; gap: 5px; align-items: center; padding: 0 9px; }
.jab__bar i{ width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.jab__bar b{ margin-left: 8px; height: 8px; flex: 1; border-radius: 4px; background: var(--sunken); }
.jab__side{ position: absolute; left: 0; top: 22px; bottom: 0; width: 62px; border-right: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.jab__side span{ height: 16px; border-radius: 4px; background: var(--sunken); font-size: 8px; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; padding: 0 5px; }
.jab__can{ position: absolute; left: 72px; right: 10px; top: 32px; bottom: 10px; display: grid; grid-template-rows: 26px 1fr 22px; gap: 6px; }
.jab__can i{ border-radius: 5px; background: #F0F0ED; }
.jab__sel{ position: absolute; left: 112px; top: 78px; width: 82px; height: 44px; border: 2px dashed var(--ink); border-radius: 3px; }
.jab__sel::before, .jab__sel::after{ content: ""; position: absolute; width: 8px; height: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 2px; }
.jab__sel::before{ left: -6px; top: -6px; } .jab__sel::after{ right: -6px; bottom: -6px; }
.jab__tip{ position: absolute; left: 132px; top: 132px; padding: 3px 7px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 9px; font-weight: 700; white-space: nowrap; }
.is-seen .jab__sel{ animation: nudge 2.6s cubic-bezier(.77,0,.175,1) infinite; }
@keyframes nudge{ 0%,100%{ transform: none } 30%{ transform: translate(14px, 6px) } 60%{ transform: translate(-9px, 3px) scale(1.04, .96) } }

/* the stage: window plus phone */
.demo__stage{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; }
@media (width >= 880px){ .demo__stage{ grid-template-columns: auto 268px; justify-content: center; align-items: center; gap: 36px; } }
.demo__phonewrap{ display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.demo__vivi{ --w: 330px; }
@media (width < 420px){ .demo__vivi{ --w: min(330px, 84vw); } }
.demo__win{ width: 100%; }
.demo__thread{ flex: 1; min-height: 0; height: auto; scroll-behavior: smooth; max-height: none; justify-content: flex-start; overflow-y: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; padding-right: 4px; }
.demo__thread::-webkit-scrollbar{ display: none; }
.demo__win{ height: auto; }
/* the Build screen */
.bld{ position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 54 + 4px) 12px calc(var(--u) * 22 + 6px);
  background-color: var(--sunken); background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 18px 18px; }
.bld__bar{ flex: none; display: flex; align-items: center; justify-content: space-between; height: 46px; margin-bottom: 6px; }
.bld__x{ width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px -6px rgba(16,16,20,.3); display: flex; align-items: center; justify-content: center; }
.bld__x svg{ width: 14px; height: 14px; }
.bld__t{ font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.bld__new{ height: 34px; padding: 0 14px; border-radius: 99px; background: #fff; color: #B8BAC0; font-size: 13px; display: flex; align-items: center; box-shadow: 0 4px 14px -6px rgba(16,16,20,.2); }
.demo__thread .bub{ font-size: 15px; }
.demo__thread{ max-width: none; }
.demo__thread .row, .demo__thread .mstamp{ transition-duration: .55s; }
/* the input bar the finger types into, as on the real Build screen */
.demo__in{ flex: none; display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.demo__in span{ flex: 1; min-height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--line); padding: 8px 14px; display: flex; align-items: center; font-size: 14px; line-height: 1.3; color: var(--ink); }
.demo__in span.empty{ color: #B8BAC0; }
.demo__in span.typing::after{ content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; background: var(--ink); animation: caret 1s steps(1) infinite; vertical-align: -.1em; }
@keyframes caret{ 50%{ opacity: 0 } }
.demo__in b{ width: 40px; height: 40px; border-radius: 50%; background: #A4A7AD; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; transition: background-color .2s; }
.demo__in b.live{ background: var(--person); }
.demo__in b svg{ width: 18px; height: 18px; }
/* the finger: moves like a cursor, presses when it taps */
.finger{ position: absolute; left: 0; top: 0; z-index: 20; width: 30px; height: 30px; margin: -6px 0 0 -8px; pointer-events: none; opacity: 0;
  transition: transform .58s cubic-bezier(.22, .9, .3, 1), opacity .25s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)); }
.finger.on{ opacity: 1; }
.finger svg{ width: 100%; height: 100%; display: block; transform-origin: 45% 20%; transition: transform .12s ease-out; }
.finger.tap svg{ transform: scale(.82) translateY(2px); }
.finger::before{ content: ""; position: absolute; left: 4px; top: -2px; width: 26px; height: 26px; border-radius: 50%; background: rgba(27,110,243,.28); opacity: 0; transform: scale(.4); }
.finger.tap::before{ animation: ripple .45s ease-out; }
@keyframes ripple{ 0%{ opacity: .9; transform: scale(.4) } 100%{ opacity: 0; transform: scale(1.8) } }
html.reduced-motion .finger{ display: none; }
.stepn{ width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); color: var(--ink-soft); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.castrow--on .stepn, .castrow.done .stepn{ background: var(--ink); color: #fff; }
.demo__phone{ opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .7s var(--out), transform .7s var(--out); }
.demo__phone.in{ opacity: 1; transform: none; }
/* phones: the finished-app phone stacked under the demo left an empty 540px gap until the demo ended */
@media (width < 880px){ .demo__phone{ display: none; } }
.demo__note{ text-align: center; margin: 22px 0 0; font-size: var(--t-caption); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.replay{ display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 13px/1 var(--sans, inherit); color: var(--ink); cursor: pointer; transition: transform .12s var(--out), background-color .15s; }
.replay svg{ width: 14px; height: 14px; }
.replay:hover{ background: var(--sunken); } .replay:active{ transform: scale(.96); }

/* rows inside the conversation that the intake actually has */
.row--card, .row--choice, .row--build{ display: flex; justify-content: flex-start; padding: 2px 0; }
.choices{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; width: 100%; }
.choice{ padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--person); color: var(--person); background: color-mix(in srgb, var(--person) 8%, #fff); font-size: 14px; font-weight: 600; transition: background-color .15s, color .15s, transform .12s var(--out); }
.choice.pressed{ background: var(--person); color: #fff; transform: scale(.97); }
.plan{ width: min(100%, 290px); padding: 14px 16px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--lift-1); }
.plan__h{ display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.plan__h i{ width: 26px; height: 26px; border-radius: 8px; background: #B0202B; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; font-weight: 800; }
.plan__row{ display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.plan__row small{ margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.plan__row svg{ width: 15px; height: 15px; color: var(--ink); }
.looks{ display: flex; gap: 10px; }
.look{ width: 76px; height: 92px; border-radius: 14px; border: 2px solid transparent; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; background: var(--lk-bg); color: var(--lk-ink); font-size: 11px; font-weight: 700; transition: border-color .15s, transform .12s var(--out); }
.look i{ display: block; height: 10px; width: 60%; border-radius: 5px; background: var(--lk-acc); }
.look.pressed{ border-color: var(--person); transform: scale(.97); }
.buildbar{ width: min(100%, 300px); padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.buildbar__t{ display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.buildbar__t.on{ color: var(--ink); } .buildbar__t.done{ color: var(--ink-soft); }
.buildbar__t i{ width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.buildbar__t.on i{ border-color: var(--ink); border-top-color: transparent; animation: spin .9s linear infinite; }
.buildbar__t.done i{ background: var(--ink); border-color: var(--ink); }
.buildbar__t.done i::after{ content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
@keyframes spin{ to{ transform: rotate(360deg) } }
.linkcard{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); width: min(100%, 300px); }
.linkcard i{ width: 40px; height: 40px; border-radius: 11px; background: #B0202B; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; }
.linkcard b{ display: block; font-size: 14px; } .linkcard small{ display: block; color: var(--ink-soft); font-size: 12px; }
.linkcard .open{ margin-left: auto; padding: 6px 14px; border-radius: 999px; background: var(--person); color: #fff; font-size: 13px; font-weight: 700; }
.typing{ display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: .4; animation: blink 1.1s infinite; }
.typing i:nth-child(2){ animation-delay: .18s } .typing i:nth-child(3){ animation-delay: .36s }
@keyframes blink{ 40%{ opacity: 1 } }

/* ==========================================================================
   4 · SHE KEEPS IT UP TO DATE
   ========================================================================== */
.change{ padding: 96px 0 80px; }
.change__in{ max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.change__stage{ margin-top: 36px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "texts" "phone" "pills" "panel"; justify-items: center; align-items: center; }
.pills{ grid-area: pills; } .change__texts{ grid-area: texts; } .change__phone{ grid-area: phone; } .pillpanel{ grid-area: panel; justify-self: stretch; }
@media (width >= 880px){ .change__stage{ grid-template-columns: 320px minmax(0, 1fr) auto; grid-template-areas: "pills texts phone"; gap: 28px; align-items: center; } }
.change__texts{ display: flex; flex-direction: column; gap: 10px; align-items: flex-end; justify-content: flex-end; width: min(100%, 360px); height: 150px; overflow: hidden; justify-self: end; }
.change__texts .sayb.out{ opacity: 0; transform: translateY(-6px); transition: opacity .3s ease-out, transform .3s ease-out; }
.change__texts .sayb{ opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s var(--out), transform .45s var(--out); cursor: pointer; }
.change__texts .sayb.in{ opacity: 1; transform: none; }
.change__texts .sayb.is-now{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--person) 25%, transparent); }
.change__phone{ --w: 280px; }
@media (width < 420px){ .change__phone{ --w: 240px; } }
/* the wireframe fills in: the wire shows, then the new look wipes down over it */
.iph__wire, .iph__next{ opacity: 0; }
.iph__wire.on{ opacity: 1; transition: opacity .24s ease-out; }
.iph__next.on{ opacity: 1; clip-path: inset(0 0 100% 0); }
.iph__next.fill{ clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1); }
.versions{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 34); border-radius: calc(var(--u) * 28) calc(var(--u) * 28) 0 0; background: #fff; box-shadow: 0 -20px 50px rgba(0,0,0,.25); font-size: calc(var(--u) * 13); }
.versions__h{ font-weight: 800; font-size: calc(var(--u) * 17); margin-bottom: calc(var(--u) * 8); }
.versions__row{ display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 8); align-items: baseline; padding: calc(var(--u) * 9) 0; border-top: 1px solid #E4E3DF; }
.versions__row b{ font-weight: 700; } .versions__row span{ color: #64676E; } .versions__row em{ font-style: normal; font-weight: 700; color: var(--person); }
.versions__row--on em{ color: #64676E; font-weight: 600; }

/* the pills: apple's, measured. a 56px pill that grows into the card */
.pills{ list-style: none; margin: 0; padding: 0 20px; width: 100%; display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pills::-webkit-scrollbar{ display: none; }
@media (width >= 880px){ .pills{ flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow: visible; padding: 0; width: auto; } }
.pill{ position: relative; flex: none; height: 48px; width: auto; border-radius: 24px; background: var(--pill-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 .5px rgba(0,0,0,.14), 0 1px 2px rgba(16,16,20,.05), 0 10px 26px -14px rgba(16,16,20,.28); overflow: hidden; scroll-snap-align: start; transition: background-color .25s linear, box-shadow .25s linear; }
@media (hover: hover){ .pill:not(.is-open):hover{ box-shadow: inset 0 0 .5px rgba(0,0,0,.14), 0 2px 4px rgba(16,16,20,.06), 0 14px 30px -14px rgba(16,16,20,.34); } }
@media (hover: hover){ .pill:not(.is-open):hover{ background: var(--pill-bg-hover); } }
.pill__open{ height: 48px; padding: 0 22px 0 14px; border: 0; background: transparent; display: flex; align-items: center; gap: 9px; font: 600 15px/1 inherit; color: var(--ink); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .26s ease-out .1s, visibility 0s linear 0s; }
.pill__open svg{ width: 22px; height: 22px; }
.pill__open:active{ transform: scale(.97); }
.pill.is-open .pill__open{ opacity: 0; visibility: hidden; transition: opacity .12s ease-out, visibility 0s linear .12s; pointer-events: none; }
.pill__card{ position: absolute; left: 0; top: 0; width: 300px; box-sizing: border-box; padding: 16px 44px 16px 18px; opacity: 0; transform: translateY(10px); transition: opacity .14s ease-out, transform .2s ease-out; pointer-events: none; }
.pill__card p{ margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.pill__card strong{ color: var(--ink); }
.pill.is-open .pill__card{ opacity: 1; transform: none; transition: opacity .4s ease-out .12s, transform .5s cubic-bezier(.16, 1, .3, 1) .12s; pointer-events: auto; }
.pill__close{ position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.08); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s, transform .12s var(--out); }
.pill__close svg{ width: 14px; height: 14px; }
.pill__close:hover{ background: rgba(0,0,0,.14); } .pill__close:active{ transform: scale(.94); }
html.reduced-motion .pill, html.reduced-motion .pill__open, html.reduced-motion .pill__card{ transition: none; }

/* ==========================================================================
   5 · WHO IT'S FOR
   ========================================================================== */
.apps{ padding: 96px 0 72px; }
.shelf{ list-style: none; margin: 40px 0 0; padding: 0 20px 18px; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shelf::-webkit-scrollbar{ display: none; }
@media (width >= 880px){ .shelf{ max-width: 1120px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 24px; } }
.shelf__item{ flex: 0 0 min(78vw, 300px); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.shelf__item .iph{ --w: 230px; }
.shelf__item b{ font-size: 1rem; letter-spacing: -.01em; }
@media (width < 420px){ .shelf__item .iph{ --w: 210px; } }
.apps .stalls__note{ margin-top: 16px; }

/* ==========================================================================
   6 · SAFE   7 · PRICING
   ========================================================================== */
.safe{ padding: 84px 0; } .safe__in{ max-width: 720px; margin: 0 auto; padding: 0 20px; }
.safe__list{ list-style: none; margin: 26px 0 0; padding: 8px 22px; border-radius: 22px; }
.safe__list li{ display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(22,23,26,.08); font-size: 1.02rem; }
.safe__list li:first-child{ border-top: 0; }
.safe__list svg{ width: 18px; height: 18px; color: var(--ink); flex: none; }
.pricing{ padding: 84px 0; } .pricing__in{ max-width: 980px; margin: 0 auto; padding: 0 20px; }
.tiers{ list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (width >= 720px){ .tiers{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } }
.tier{ padding: 22px 22px 18px; border-radius: 22px; }
.tier .p{ margin: 8px 0 0; font-size: .98rem; }
.tier__k{ margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tier__n{ margin: 8px 0 0; font-size: 44px; line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.tier__n small{ font-size: 16px; letter-spacing: 0; color: var(--ink-soft); font-weight: 600; }
.tier--on{ border-color: rgba(31,139,82,.45); box-shadow: inset 0 1px 0 var(--gl-hi), 0 24px 50px -30px rgba(31,139,82,.45); }
@media (width >= 720px){ [data-stagger].in .tier--on{ transform: translateY(-8px); } }
.pricing__note{ text-align: center; margin: 18px 0 0; font-weight: 600; }

/* ---------- closer form ---------- */
.whoq{ border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.whoq input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.whoq label{ padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s; }
.whoq input:checked + label{ background: var(--ink); color: #fff; border-color: var(--ink); }
.whoq input:focus-visible + label{ outline: 2px solid var(--person); outline-offset: 2px; }
.count__h{ text-wrap: balance; }
.faqs__list{ border-radius: 22px; padding: 4px 22px; }
.faqs__list .faqitem:last-child{ border-bottom: 0; }
.faqitem{ border-bottom-color: rgba(22,23,26,.08); }

/* rows in the demo thread arrive like the old window's did */
html.js #demoThread .row, html.js #demoThread .mstamp{ opacity: 0; transform: translateY(12px); transition: opacity .45s var(--out), transform .45s var(--out); }
html.js #demoThread .row.in, html.js #demoThread .mstamp.in{ opacity: 1; transform: none; }
html.reduced-motion #demoThread .row, html.reduced-motion #demoThread .mstamp{ transition: none; }

/* narrow: pills stay pills; the open one's card shows below the row as a panel */
@media (width < 880px){
  .pill__open, .pill.is-open .pill__open{ transition: background-color .22s ease-out, color .22s ease-out; }
  .pill__open svg{ transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
  .pill.is-open .pill__open{ opacity: 1; visibility: visible; pointer-events: auto; background: var(--ink); color: #fff; border-radius: 24px; }
  .pill.is-open .pill__open svg{ transform: rotate(45deg); }
  .pill__card{ display: none; }
  .pillpanel{ margin: 0 20px; padding: 14px 44px 14px 18px; border-radius: 18px; background: var(--pill-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); position: relative; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
  .pillpanel strong{ color: var(--ink); }
  .pillpanel .pill__close{ top: 50%; transform: translateY(-50%); }
  .pillpanel__t{ transition: opacity .16s ease-out; }
  .pillpanel__t.out{ opacity: 0; }
}
@media (width >= 880px){ .pillpanel{ display: none; } }

/* ---------- the two beams (effects.js): hero signup in ocean, closer button in mono ---------- */
.beammount{ display: contents; }
.beam--inline{ display: inline-block; vertical-align: top; }
.beamhost{ border-radius: 999px; }
.beamhost--inline{ display: inline-flex; }

/* ---------- the build demo's two captions: the old way, the new way ---------- */
.demo__cap{ margin: 0; text-align: center; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
.demo__left .demo__cap{ color: var(--ink-soft); max-width: 250px; }
.demo__cap--new{ margin-bottom: 4px; }
/* the closer's ask */
.join__ask{ margin: 6px 0 4px; font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 750; letter-spacing: -.02em; text-align: center; }

/* ---------- the team, and the door to the story page ---------- */
@view-transition { navigation: auto; }
::view-transition-group(team-photo){ animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.crew{ padding: 88px 0 72px; }
.crew__in{ max-width: 1000px; margin: 0 auto; padding: 0 20px; display: grid; gap: 28px; align-items: center; }
@media (width >= 760px){ .crew__in{ grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 52px; } }
.crew__photo{ display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 1; border: 1.5px solid rgba(255,255,255,.95); box-shadow: 0 26px 54px -34px rgba(22,23,26,.45); view-transition-name: team-photo; }
.crew__photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; display: block; transform: scale(1.16); transform-origin: 44% 40%; transition: transform .6s var(--out); }
@media (hover: hover){ .crew__photo:hover img{ transform: scale(1.2); } }
.crew__txt .h2{ margin: 0; text-align: left; }
.crew__txt .p{ margin: 12px 0 0; max-width: 30rem; text-align: left; }
.crew__btn{ display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 18px 12px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .12s var(--out); }
.crew__btn svg{ width: 16px; height: 16px; transform: rotate(-90deg); }
.crew__btn:active{ transform: scale(.97); }
@media (width < 420px){ .nav__link--story{ display: none; } }
@media (prefers-reduced-motion: reduce){ ::view-transition-group(team-photo){ animation: none; } }