:root {
  color-scheme: dark;
  --ink: #01050f;
  --white: #f0f3ee;
  --blue: #99bffe;
  --blue-deep: #3b6dc2;
  --slate: #829299;
  --gutter: clamp(1.35rem, 5.2vw, 5.5rem);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ink);
  color: var(--white);
}

* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--ink); overflow-wrap: break-word; }
button, select { font: inherit; }
a { color: inherit; }
.page-shell { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.site-header { position: relative; z-index: 3; height: 96px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--white); text-decoration: none; font-size: 1.12rem; letter-spacing: -.035em; font-weight: 650; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; }
.header-actions { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2.25rem); }
.sign-in { min-height: 44px; display: inline-flex; align-items: center; gap: .48rem; text-decoration: none; color: var(--white); font-size: .75rem; letter-spacing: .015em; transition: color .2s ease; }
.sign-in span { color: var(--blue); font-size: .95rem; }
.sign-in:hover, .sign-in:focus-visible { color: var(--blue); }
.hero { position: relative; flex: 1; display: flex; align-items: center; min-height: min(740px, calc(100svh - 142px)); padding: 0 var(--gutter); }
.hero-image { position: absolute; z-index: -1; inset: -96px 0 -1.5rem auto; width: min(70vw, 1120px); height: calc(100% + 8rem); margin: 0; overflow: hidden; }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(1,5,15,.92) 7%, rgba(1,5,15,.38) 37%, rgba(1,5,15,.06) 69%), linear-gradient(0deg, var(--ink) 0%, rgba(1,5,15,.22) 24%, transparent 57%), linear-gradient(180deg, var(--ink) 0%, transparent 17%); }
.hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: .84; filter: saturate(.82) contrast(1.04); }
.hero-copy { position: relative; z-index: 1; width: min(820px, 59vw); padding: 3rem 0 4rem; }
.eyebrow { display: flex; align-items: center; gap: .68rem; margin: 0 0 clamp(1.5rem, 3.2vw, 2.75rem); color: var(--blue); font-size: .68rem; font-weight: 570; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 15px rgba(153,191,254,.75); }
h1 { margin: 0; max-width: 850px; color: var(--white); font-size: clamp(4.25rem, 7.65vw, 7.5rem); font-weight: 430; line-height: .98; letter-spacing: -.072em; }
h1 > span { display: block; }
.headline-second { margin-top: .15em; color: var(--blue); }
.tagline { margin: clamp(1.5rem, 3vw, 2.4rem) 0 0; color: var(--white); font-size: clamp(1.08rem, 1.7vw, 1.42rem); font-weight: 420; letter-spacing: -.025em; }
.supporting-copy { max-width: 390px; margin: .85rem 0 0; color: var(--slate); font-size: .9rem; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: clamp(1.9rem, 3vw, 2.8rem); }
.meet-button { min-height: 48px; padding: 0 1.12rem; display: inline-flex; align-items: center; gap: .8rem; border: 1px solid rgba(153,191,254,.45); border-radius: 999px; background: rgba(153,191,254,.12); color: var(--white); font-size: .8rem; letter-spacing: .02em; cursor: pointer; backdrop-filter: blur(10px); transition: background .22s ease, border-color .22s ease, transform .22s ease; }
.meet-button span { color: var(--blue); }
.meet-button .meet-label { color: var(--white); }
.meet-button .meet-wordmark { display: inline-block; color: inherit; }
.meet-button:hover, .meet-button:focus-visible { transform: translateY(-1px); background: rgba(59,109,194,.2); border-color: var(--blue); }
.coming-soon { color: #c1b892; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer { position: relative; z-index: 2; min-height: 46px; padding: .5rem var(--gutter) 1.25rem; display: flex; justify-content: space-between; align-items: center; color: rgba(130,146,153,.72); font-size: .63rem; letter-spacing: .04em; }
.footer-mark { color: rgba(240,243,238,.55); letter-spacing: .015em; font-size: .6rem; }
.footer-mark span { color: var(--slate); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (min-width: 1500px) { .hero-copy { margin-left: min(2vw, 2rem); } }
@media (max-width: 760px) {
  :root { --gutter: clamp(1.25rem, 6vw, 2rem); }
  .page-shell { overflow: hidden; overflow: clip; }
  .site-header { height: 74px; }
  .brand { font-size: 1rem; }
  .brand-mark { width: 30px; height: 30px; }
  .header-actions { gap: .65rem; }
  .sign-in { font-size: .69rem; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding: 0 var(--gutter) 2.5rem; }
  .hero-image { position: relative; z-index: 0; inset: auto; order: 0; width: calc(100% + var(--gutter) * 2); height: clamp(210px, 64vw, 340px); margin: 0 calc(var(--gutter) * -1) .3rem; }
  .hero-image::after { background: linear-gradient(0deg, var(--ink) 0%, rgba(1,5,15,.04) 41%, rgba(1,5,15,.02) 70%, rgba(1,5,15,.3) 100%), linear-gradient(90deg, rgba(1,5,15,.2), transparent 45%, rgba(1,5,15,.1)); }
  .hero-image img { object-position: center 38%; }
  .hero-copy { width: 100%; padding: 1.2rem 0 .5rem; }
  .eyebrow { margin-bottom: 1.25rem; font-size: .61rem; letter-spacing: .14em; }
  h1 { font-size: clamp(3.45rem, 14.5vw, 6rem); line-height: .97; letter-spacing: -.075em; }
  .desktop-break { display: none; }
  .headline-second { margin-top: .09em; }
  .tagline { margin-top: 1.2rem; font-size: 1.08rem; }
  .supporting-copy { max-width: 360px; margin-top: .65rem; font-size: .84rem; line-height: 1.7; }
  .hero-actions { gap: 1.1rem; margin-top: 1.55rem; }
  .meet-button { min-height: 48px; }
  .coming-soon { font-size: .66rem; }
  .site-footer { min-height: 52px; padding-bottom: 1rem; font-size: .58rem; }
}
@media (max-width: 370px) {
  .brand { gap: .35rem; letter-spacing: -.035em; }
  .brand-mark { width: 28px; height: 28px; }
  .header-actions { gap: .2rem; }
  .sign-in { font-size: .64rem; }
  .hero-actions { flex-wrap: wrap; }
  .site-footer { gap: .6rem; }
}

/* Only the copyright remains after removing the repeated footer slogan. */
.site-footer { justify-content: flex-end; }

.meet-button { padding-inline: 1.4rem; }

/* One block carries the blue/gold light across the whole two-line phrase. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) and (color: color-mix(in oklab, blue, gold)) {
  .beri-sheen {
    --heading-ink: var(--blue);
    --heading-gold: #c1b892;
    background-image: linear-gradient(105deg,
      var(--heading-ink) 0%, var(--heading-ink) 28%,
      color-mix(in oklab, var(--heading-ink) 76%, var(--heading-gold)) 41%,
      color-mix(in oklab, var(--heading-ink) 48%, var(--heading-gold)) 50%,
      color-mix(in oklab, var(--heading-ink) 76%, var(--heading-gold)) 59%,
      var(--heading-ink) 72%, var(--heading-ink) 100%);
    background-repeat: no-repeat;
    background-size: 320% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heading-sheen 10s cubic-bezier(.45, 0, .55, 1) 8s infinite;
  }
}
@keyframes heading-sheen {
  0%, 100% { background-position: 100% 0; }
  32% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .beri-sheen {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* A living brand accent, kept small beside the eyebrow. */
.eyebrow-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  background: none;
  box-shadow: none;
  transform: translate(var(--dot-x, 0px), var(--dot-y, 0px)) scale(var(--dot-scale, 1));
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}
.dot-core {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  border-radius: 44% 56% 59% 41% / 51% 38% 62% 49%;
  box-shadow: 0 0 14px rgba(153, 191, 254, .3);
  animation: dot-life 6s ease-in-out infinite;
}
.eyebrow-dot.is-awake .dot-core { animation-duration: 3s; }
@keyframes dot-life {
  0%, 100% { border-radius: 44% 56% 59% 41% / 51% 38% 62% 49%; transform: rotate(-12deg) scale(.96); }
  45% { border-radius: 61% 39% 43% 57% / 42% 58% 42% 58%; transform: rotate(20deg) scale(1.08); }
  75% { border-radius: 40% 60% 55% 45% / 58% 46% 54% 42%; transform: rotate(4deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow-dot { transform: none; transition: none; }
  .dot-core { animation: none; }
}

/* ── Takeover, 7 Oct 2026 ──────────────────────────────────────────────────
   The settled copy, palette, shimmer and living dot stand. What is new: the page fills its screen, the
   phone picture runs under the logo, beri says hello in the top row, and Meet beri changes the page where it
   stands in place of a pop-up. One quiet crossfade switches between the two views. */
main { flex: 1; display: flex; flex-direction: column; }
/* The logo and the copy share one left edge on wide screens. */
@media (min-width: 1500px) { .hero-copy { margin-left: 0; } }
/* Tight letters that no longer touch, and clear gaps between the words. */
h1 { letter-spacing: -.06em; word-spacing: .04em; }
.meet-copy h2 { word-spacing: .05em; }

/* The top row: beri says hello, one language at a time, in beri's own blue. */
.site-header { justify-content: flex-start; gap: .8rem; }
.hello { display: inline-block; margin-left: auto; color: var(--blue-deep); font-size: .95rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.5; white-space: nowrap; opacity: 0; }
.hello.is-in { animation: hello-in 420ms cubic-bezier(.32, .72, 0, 1) both; }
.hello.is-out { animation: hello-out 200ms cubic-bezier(.4, 0, 1, 1) both; }
@keyframes hello-in { from { opacity: 0; filter: blur(8px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes hello-out { from { opacity: 1; filter: blur(0); transform: none; } to { opacity: 0; filter: blur(8px); transform: translateY(-3px); } }

/* Meet beri, where the page stands. The first words leave, the picture falls out of focus, and what beri
   handles arrives in their place. The stack keeps the first words' height, so nothing below it moves; what
   is taller grows upward, and the eyebrow rises with it. */
.copy-stack { position: relative; }
.copy-hero { transform-origin: 0 50%; transition: opacity 420ms cubic-bezier(.32, .72, 0, 1) 120ms, filter 420ms cubic-bezier(.32, .72, 0, 1) 120ms, transform 420ms cubic-bezier(.32, .72, 0, 1) 120ms, visibility 0s; }
.is-meeting .copy-hero { opacity: 0; transform: translateY(4px); visibility: hidden; pointer-events: none; transition: opacity 200ms cubic-bezier(.4, 0, 1, 1), filter 200ms cubic-bezier(.4, 0, 1, 1), transform 200ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 200ms; }
.eyebrow { transition: transform 420ms cubic-bezier(.32, .72, 0, 1); }
.is-meeting .eyebrow { transform: translateY(calc(var(--meet-rise, 0px) * -1)); }
.meet-copy { position: absolute; left: 0; right: 0; bottom: 0; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; visibility: hidden; opacity: 0; transform: translateY(4px); transform-origin: 0 100%; pointer-events: none; transition: opacity 200ms cubic-bezier(.4, 0, 1, 1), filter 200ms cubic-bezier(.4, 0, 1, 1), transform 200ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 200ms; }
.is-meeting .meet-copy { visibility: visible; opacity: 1; filter: none; transform: none; pointer-events: auto; transition: visibility 0s; }
.meet-copy h2 { margin: 0; color: var(--white); font-size: min(5.2rem, 6.6vw); font-weight: 430; line-height: 1.02; letter-spacing: -.06em; text-wrap: balance; }
.meet-price { margin: 1rem 0 0; color: var(--blue); font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.012em; }
.meet-points { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0; padding: 0; list-style: none; }
/* A restrained glass surface; each icon and its copy resolve together as one item. */
.meet-point { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: .9rem; padding: 1.15rem 1.25rem 1.2rem; border: 1px solid rgba(153, 191, 254, .16); border-radius: 22px; background: rgba(153, 191, 254, .055); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.meet-point svg { width: 24px; height: 24px; margin-top: .05rem; color: var(--blue); }
.meet-point strong { display: block; color: var(--white); font-size: 1rem; font-weight: 520; letter-spacing: -.012em; line-height: 1.35; }
.meet-point div > span { display: block; margin-top: .3rem; color: #9aabb8; font-size: .86rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .is-meeting .meet-head, .is-meeting .meet-point { animation: meet-settle 480ms cubic-bezier(.22, 1, .36, 1) 80ms backwards; }
  .is-meeting .meet-point { animation-delay: 120ms; }
  .is-meeting .meet-point:nth-child(2) { animation-delay: 145ms; }
  .is-meeting .meet-point:nth-child(3) { animation-delay: 170ms; }
  .is-meeting .meet-point:nth-child(4) { animation-delay: 195ms; }
}
@keyframes meet-settle { from { opacity: 0; filter: blur(3px); transform: translateY(5px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes meet-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* The picture falls out of focus behind what has come forward. */
.hero-image img { filter: saturate(.82) contrast(1.04) blur(0px) brightness(1); transition: filter 620ms cubic-bezier(.32, .72, 0, 1), transform 620ms cubic-bezier(.32, .72, 0, 1); }
.is-meeting .hero-image img { filter: saturate(.95) contrast(1.04) blur(14px) brightness(.74); transform: scale(1.08); }

/* The pill rests quietly; its light and arrow respond to hover, focus and touch. */
.meet-button { position: relative; min-height: 52px; padding: 0; gap: 0; font-size: .9rem; -webkit-tap-highlight-color: transparent; transition: background .22s ease, border-color .22s ease, transform .3s cubic-bezier(.32, .72, 0, 1), width 420ms cubic-bezier(.32, .72, 0, 1); }
.meet-button:active { transform: scale(.97); }
.meet-button .meet-clip { display: flex; align-items: center; height: 100%; min-height: 50px; overflow: hidden; border-radius: inherit; color: inherit; }
.meet-button .meet-face { color: inherit; transition: opacity 260ms cubic-bezier(.32, .72, 0, 1), filter 260ms cubic-bezier(.32, .72, 0, 1); }
.meet-button .meet-open { display: inline-flex; align-items: center; gap: .75rem; padding: 0 1.55rem; white-space: nowrap; }
.meet-button .meet-back { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; filter: blur(8px); color: var(--white); }
.meet-back svg { width: 1.15rem; height: 1.15rem; }
.meet-arrow { flex: none; width: .85rem; height: .85rem; color: var(--blue); transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.meet-button .meet-ring { position: absolute; inset: -1px; border: 1px solid rgba(153, 191, 254, .5); border-radius: inherit; box-shadow: 0 0 26px rgba(153, 191, 254, .2), inset 0 0 14px rgba(153, 191, 254, .07); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.meet-button .meet-label { display: inline-block; }
.meet-button:focus-visible .meet-ring { opacity: .65; }
@media (hover: hover) { .meet-button:hover .meet-ring { opacity: .65; } }
.is-meeting .meet-open { opacity: 0; filter: blur(8px); }
.is-meeting .meet-back { opacity: 1; filter: none; }
@media (hover: hover) { .meet-button:hover .meet-arrow { transform: translate(2px, -2px); } }
/* Early access. "Get early access" stands under "Coming soon" only when there is somewhere for an address to
   go. Tapped, the row changes where it stands: the field takes it, and gives it back when it is done. */
.hero-actions { position: relative; }
.soon { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; min-height: 52px; transition: opacity 260ms cubic-bezier(.32, .72, 0, 1), filter 260ms cubic-bezier(.32, .72, 0, 1); }
.access-open { display: inline-flex; align-items: center; gap: .2rem; min-height: 28px; margin: 0 0 -.3rem; padding: 0; border: 0; background: none; color: var(--white); font-size: .86rem; letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.access-open svg { width: .85rem; height: .85rem; color: var(--blue); transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.access-open[hidden], .access-done[hidden] { display: none; }
.access-done { color: var(--white); font-size: .86rem; line-height: 28px; margin-bottom: -.3rem; }
.access { position: absolute; inset: 0 0 auto; height: 52px; display: flex; align-items: center; gap: .5rem; margin: 0; visibility: hidden; opacity: 0; filter: blur(8px); pointer-events: none; transition: opacity 200ms cubic-bezier(.4, 0, 1, 1), filter 200ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 200ms; }
.access-close { flex: none; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(153, 191, 254, .45); border-radius: 50%; background: rgba(153, 191, 254, .12); color: var(--white); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s cubic-bezier(.32, .72, 0, 1), border-color .22s ease; }
.access-close svg { width: 1.1rem; height: 1.1rem; }
.access-field { flex: 1; min-width: 0; max-width: 390px; height: 52px; display: flex; align-items: center; padding: 0 5px 0 1.3rem; border: 1px solid rgba(153, 191, 254, .45); border-radius: 999px; background: rgba(153, 191, 254, .12); transition: border-color .22s ease; }
.access-field:focus-within { border-color: var(--blue); }
.access-field input[type="email"] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--white); font: inherit; font-size: 1rem; letter-spacing: -.005em; }
.access-field input::placeholder { color: rgba(240, 243, 238, .42); }
.access-trap { position: absolute; left: -200vw; width: 1px; height: 1px; opacity: 0; }
.access-send { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--blue); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .22s ease; }
.access-send svg { width: 1.05rem; height: 1.05rem; }
.access-send:focus-visible, .access-close:focus-visible { outline-offset: 2px; }
.access-close:active, .access-send:active { transform: scale(.94); }
.access.is-sending .access-send { opacity: .5; pointer-events: none; }
.access-note { position: absolute; left: 60px; right: 0; top: calc(100% + .55rem); margin: 0; color: var(--slate); font-size: .72rem; letter-spacing: .005em; line-height: 1.5; }
.is-asking .meet-button, .is-asking .soon { opacity: 0; filter: blur(8px); pointer-events: none; }
.access.is-open { visibility: visible; opacity: 1; filter: none; pointer-events: auto; transition: opacity 420ms cubic-bezier(.32, .72, 0, 1) 80ms, filter 420ms cubic-bezier(.32, .72, 0, 1) 80ms, visibility 0s; }
@media (hover: hover) { .access-open:hover svg { transform: translateX(2px); } }
/* A short overlapping entrance: atmosphere, one headline, then its supporting layer.
   Animate no layout/portal ancestor: opening the field never acquires a transformed parent. */
@media (prefers-reduced-motion: no-preference) {
  .hero-image { animation: picture-in 760ms cubic-bezier(.22, 1, .36, 1) backwards; }
  .brand, .eyebrow { animation: entrance-fade 500ms ease-out backwards; }
  h1 { animation: entrance-settle 600ms cubic-bezier(.22, 1, .36, 1) 80ms backwards; }
  .tagline, .supporting-copy { animation: entrance-settle 520ms cubic-bezier(.22, 1, .36, 1) 180ms backwards; }
  .hero-actions { animation: entrance-fade 500ms ease-out 220ms backwards; }
}
@keyframes entrance-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes entrance-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes picture-in { from { opacity: .5; } to { opacity: 1; } }
.meet-amount { display: inline-block; font-variant-numeric: tabular-nums; }
.done-check { width: 1.05rem; height: 1.05rem; margin-right: .35rem; vertical-align: -.2em; color: var(--blue); }
.done-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.access-done.is-fresh { animation: hello-in 420ms cubic-bezier(.32, .72, 0, 1) 200ms backwards; }
.access-done.is-fresh .done-check { animation: check-land 620ms cubic-bezier(.34, 1.4, .5, 1) 420ms backwards; }
.access-done.is-fresh .done-check path { animation: meet-draw 520ms cubic-bezier(.32, .72, 0, 1) 420ms backwards; }
@keyframes check-land { from { transform: scale(.6); } }
.access-send .send-arrow { transition: opacity 200ms cubic-bezier(.4, 0, 1, 1); }
.access-send .send-check { stroke-dasharray: 1; stroke-dashoffset: 1; }
.access.is-kept .send-arrow { opacity: 0; }
.access.is-kept .send-check { animation: meet-draw 420ms cubic-bezier(.32, .72, 0, 1) 120ms forwards; }
.access.is-kept .access-send { animation: check-land 520ms cubic-bezier(.34, 1.4, .5, 1) 120ms backwards; }
.access.is-sending .access-send svg { animation: send-wait 900ms ease-in-out infinite; }
@keyframes send-wait { 50% { transform: translateX(3px); opacity: .55; } }
.access-note.is-new { animation: hello-in 420ms cubic-bezier(.32, .72, 0, 1) both; }
.meet-back svg { transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
@media (hover: hover) { .is-meeting .meet-button:hover .meet-back svg { transform: translateX(-2px); } .access-close:hover { border-color: var(--blue); } }

/* On phones the open field reserves its note's space. When a keyboard reduces the visible screen,
   the same field moves above it, outside the page's clipped and animated ancestors. */
.access.is-floating { position: fixed; top: var(--access-top); left: var(--gutter); right: var(--gutter); z-index: 10; }
.access.is-keyboard::before { content: ""; position: absolute; inset: -18px calc(var(--gutter) * -1) -48px; z-index: -1; background: linear-gradient(transparent, var(--ink) 22%); pointer-events: none; }
.access.is-keyboard .access-field, .access.is-keyboard .access-close { background: #102039; }
.access.is-keyboard .access-note { color: #b0bec8; text-shadow: 0 1px 5px var(--ink); }
@media (max-width: 760px) {
  .is-asking .hero-actions { min-height: 96px; align-items: flex-start; }
  .access-note { left: 0; text-align: center; }
}

/* Without scripts the first view is the whole page. */
html:not(.js) .meet-button { display: none; }

@media (min-width: 761px) and (max-width: 950px) { .meet-points { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  /* The same two-line break as on a desktop, so no word is left alone on a line. */
  .desktop-break { display: inline; }
  /* The picture runs up under the logo and fades into the ground: no edge across the screen.
     On a short screen it gives way, so the button is in the first view on a real phone. */
  .hero-image { height: calc(clamp(210px, 64vw, 340px) + 74px); margin-top: -74px; }
  @supports (height: 100svh) { .hero-image { height: clamp(150px, calc(100svh - 255px - clamp(164px, 43.1vw, 285px)), calc(clamp(210px, 64vw, 340px) + 74px)); } }
  .hero-image::after { background: linear-gradient(180deg, var(--ink) 0, rgba(1,5,15,.84) 38px, rgba(1,5,15,.46) 80px, rgba(1,5,15,.08) 136px, transparent 172px), linear-gradient(0deg, var(--ink) 0%, rgba(1,5,15,.04) 41%, transparent 70%), linear-gradient(90deg, rgba(1,5,15,.2), transparent 45%, rgba(1,5,15,.1)); }
  .is-meeting .hero-image img { filter: saturate(1) contrast(1.04) blur(22px) brightness(.62); transform: scale(1.16); }
  .hello { font-size: .9rem; }
  .meet-button { min-height: 52px; }
  h1 { letter-spacing: -.06em; }
  .meet-copy { gap: .95rem; }
  .meet-copy h2 { font-size: clamp(1.9rem, 9vw, 4rem); }
  .meet-price { margin-top: .6rem; font-size: 1rem; }
  .meet-points { grid-template-columns: 1fr; gap: .4rem; }
  .meet-point { gap: .8rem; padding: .62rem .9rem .68rem; border-radius: 18px; }
  .meet-point strong { font-size: .94rem; line-height: 1.3; }
  .meet-point div > span { margin-top: .12rem; font-size: .78rem; line-height: 1.4; }
}
@media (min-width: 560px) and (max-width: 760px) { .meet-points { grid-template-columns: 1fr 1fr; } }
/* A short phone keeps the four names and lets their second lines go. */
@media (max-width: 760px) and (max-height: 620px) { .meet-point { align-items: center; } .meet-point div > span { display: none; } }
/* The first line holds on the narrowest phones, whatever face the phone draws it in. */
@media (max-width: 370px) { h1 { font-size: min(3.45rem, 14.9vw); } .hero-actions { flex-wrap: nowrap; } }

.eyebrow { white-space: nowrap; }

/* With motion reduced nothing waits its turn: everything is simply there. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; } }

/* Every phone (RN1289, 20 Oct): the page reflows down to the narrowest screens and with a phone's larger text,
   and never runs wider than the screen, so no browser has to zoom or pan it. */
@media (max-width: 319px) { .hero-actions { flex-wrap: wrap; } }