/* ============================================================
   Bonus Bookings
   Warm neutral ground, near-black ink, one orange signal.
   Display type at 500 with italic serif accents; 1180px measure.
   All product mockups are hand-built; only the photography is generated.
   ============================================================ */

:root{
  --maxw: 1180px;
  --maxw-wide: 1256px;
  --maxw-narrow: 760px;
  --gutter: 24px;
  --section-y: 104px;

  --ink: #131318;
  --ink-soft: #21212a;
  --body: #55596a;
  --muted: #8a8fa3;

  --bg: #fff;
  --bg-warm: #fbf7f1;
  --bg-warm-2: #f4eee4;
  --card: #f5f0e7;
  --card-2: #efe7da;
  --deep: #17130f;
  --deep-2: #221c16;
  --on-dark: #f6f2ec;
  --on-dark-soft: #a9a29a;

  --signal: #ff5a24;
  --signal-deep: #e04713;
  --signal-wash: #fff1ea;
  --gold: #ffb53d;
  --green: #16916a;

  --line: #1313181f;
  --line-2: #13131833;
  --line-dark: #ffffff1f;
  --wire: #13131836;
  /* Platform colours now live inside the generated brand tiles
     (dev/brands.mjs). These two are the exceptions: --fb tints the
     Facebook reaction pill in the post mockup, --abnb the inline
     Bélo in the headline. */
  --fb: #1877f2;
  --abnb: #ff5a5f;

  --nav-h: 78px;

  --r-xs: 7px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --sh-sm: 0 1px 2px #1313180f, 0 1px 1px #1313180a;
  --sh-md: 0 10px 30px #13131814, 0 2px 8px #1313180a;
  --sh-lg: 0 30px 60px #1313181f, 0 8px 20px #1313180f;
  --sh-xl: 0 48px 90px #13131826, 0 12px 28px #13131814;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ── base ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg-warm);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
p{ margin:0 }
h1,h2,h3,h4{ margin:0; font-weight:500 }
button,input,select,textarea{ font:inherit; color:inherit }
fieldset{ margin:0; padding:0; border:0 }
legend{ padding:0 }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0 }

/* readable by a screen reader, invisible to everyone else */
.vh{
  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(--signal); outline-offset:3px; border-radius:6px }

/* ── measure ───────────────────────────────────────────── */
.wrap{
  width:100%; max-width:var(--maxw);
  padding-inline:var(--gutter); margin-inline:auto;
}
.wrap--wide{ max-width:var(--maxw-wide) }
.wrap--narrow{ max-width:var(--maxw-narrow) }
.sec{ padding-block:var(--section-y); position:relative }
.sec--tint{ background:var(--bg-warm-2) }
.sec--close{ padding-block:var(--section-y) }

/* ── type ──────────────────────────────────────────────── */
.h1{
  font-size:clamp(34px, 5.5vw, 76px);
  line-height:0.99;
  letter-spacing:-0.042em;
}
.h1__l{ display:block }
.h1--sm{ font-size:clamp(32px, 4.6vw, 58px) }

.h2{
  font-size:clamp(28px, 3.4vw, 45px);
  line-height:1.04;
  letter-spacing:-0.035em;
  max-width:23ch;
}
.h2--light{ color:var(--on-dark) }

.h3{
  font-size:clamp(18px, 1.5vw, 21px);
  line-height:1.24;
  letter-spacing:-0.021em;
}

.ital{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.012em }

.eyebrow{
  display:inline-block;
  font-size:12px; font-weight:500; line-height:1;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--signal-deep);
}
.eyebrow--light{ color:var(--gold) }

.lede{
  margin-top:22px;
  max-width:56ch;
  font-size:clamp(16px, 1.25vw, 18.5px);
  line-height:1.58;
  color:var(--body);
  letter-spacing:-0.008em;
}
/* platform name with its real icon, inline in a sentence. The name goes
   to ink weight so the sentence scans as a list of destinations.
   Deliberately not inline-flex: a flex box takes its baseline from its
   first item, the icon has no baseline, so the whole chip gets hung off
   the icon's bottom edge and floats above the line. Plain inline keeps
   the word on the real baseline and leaves the icon as the only thing
   to align. -.19em puts the icon's optical centre on the cap-height
   midline of the text beside it. */
.inl{ white-space:nowrap; color:var(--ink); font-weight:500 }
.inl svg{
  display:inline-block;          /* overrides the img,svg block reset */
  width:1.06em; height:1.06em;
  vertical-align:-.19em;
  margin-right:.3em;
}

.fine{ margin-top:16px; font-size:13.5px; color:var(--muted) }

.q{ font-family:var(--serif); font-style:italic; color:var(--ink-soft) }
.q::before{ content:"\201C" }
.q::after{ content:"\201D" }

.sec__head{ margin-bottom:56px }
.sec__head .h2{ margin-top:18px }
.sec__lede{
  margin-top:18px; max-width:52ch;
  font-size:17px; line-height:1.58; color:var(--body);
}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px;
  border:0; border-radius:999px;
  font-size:14.5px; font-weight:500; letter-spacing:-0.012em;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, background .18s, color .18s;
}
.btn:active{ transform:translateY(1px) }
.btn__ico{ width:15px; height:15px; flex:none; transition:transform .2s cubic-bezier(.4,0,.2,1) }
.btn:hover .btn__ico{ transform:translateX(3px) }

.btn--signal{
  background:var(--signal); color:#fff;
  box-shadow:0 1px 0 #ffffff40 inset, 0 8px 22px #ff5a2440, 0 2px 6px #ff5a2426;
}
.btn--signal:hover{ background:var(--signal-deep); box-shadow:0 1px 0 #ffffff40 inset, 0 12px 30px #ff5a2452 }

.btn--dark{ background:var(--ink); color:#fff; box-shadow:var(--sh-sm) }
.btn--dark:hover{ background:var(--ink-soft) }

.btn--ghost{
  background:#fffffff2; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-sm);
}
.btn--ghost:hover{ background:#fff; box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-md) }

.btn--sm{ padding:9px 14px 9px 16px; font-size:13.5px }
.btn--lg{ padding:15px 26px; font-size:15.5px }
.btn--full{ width:100% }

.cta-row{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px }

/* ── pill ──────────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 6px;
  border-radius:999px;
  background:#fffffff0;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-sm);
  font-size:13px; color:var(--body);
  backdrop-filter:blur(8px);
  transition:box-shadow .18s, transform .18s;
}
.pill:hover{ box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-md) }
.pill__tag{
  padding:3px 9px; border-radius:999px;
  background:var(--signal); color:#fff;
  font-size:11.5px; font-weight:500; letter-spacing:0.01em;
}
.pill svg{ width:13px; height:13px; color:var(--muted); flex:none }

/* ── nav ───────────────────────────────────────────────────
   Two states. At rest it is a wide, transparent bar that lets the hero
   wash through. Past the fold it draws itself in to a narrower glass
   pill that floats over the page.

   Fixed rather than sticky on purpose: the pill changes height as it
   compacts, and in normal flow that would nudge the whole page. The
   hero reserves --nav-h instead. */
.nav{
  position:fixed; inset:0 0 auto; z-index:80;
  padding:15px var(--gutter);
  pointer-events:none;
  transition:padding .42s cubic-bezier(.32,.72,0,1);
}
.nav__in{
  pointer-events:auto;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; gap:24px;
  padding:8px 8px 8px 6px;
  border-radius:999px;
  background:#fbf7f100;
  box-shadow:inset 0 0 0 1px #13131800, 0 12px 34px #13131800;
  transition:
    max-width .42s cubic-bezier(.32,.72,0,1),
    padding   .42s cubic-bezier(.32,.72,0,1),
    background .34s ease,
    box-shadow .34s ease,
    backdrop-filter .34s ease;
}
.nav.is-stuck{ padding-top:10px; padding-bottom:10px }
.nav.is-stuck .nav__in{
  max-width:868px;
  padding:7px 7px 7px 17px;
  background:#fdfaf6d9;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px #13131814,
    inset 0 1px 0 #ffffffb3,
    0 14px 34px #13131814,
    0 3px 10px #1313180d;
}

.brand{
  display:inline-flex; align-items:center; gap:10px; color:var(--ink);
  padding:4px 6px; border-radius:999px;
  transition:opacity .18s;
}
.brand:hover{ opacity:.72 }
.mark{ width:27px; height:27px; flex:none; transition:width .42s cubic-bezier(.32,.72,0,1), height .42s cubic-bezier(.32,.72,0,1) }
.nav.is-stuck .mark{ width:24px; height:24px }
.brand__name{
  font-size:15.5px; font-weight:500; letter-spacing:-0.026em;
  white-space:nowrap;
}

.nav__links{ margin-left:auto; display:flex; gap:6px }
.nav__links a{
  position:relative;
  padding:8px 13px; border-radius:999px;
  font-size:14px; color:var(--body); letter-spacing:-0.01em;
  transition:color .18s, background .18s;
}
.nav__links a:hover{ color:var(--ink); background:#1313180a }
/* the underline grows from the middle, which reads calmer than a wipe */
.nav__links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px;
  height:1.5px; border-radius:2px; background:var(--signal);
  transform:scaleX(0); transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.nav__links a:hover::after{ transform:scaleX(1) }

.nav__back{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px;
  font-size:14px; white-space:nowrap; color:var(--body);
  transition:color .18s, background .18s;
}
.nav__back svg{ width:14px; height:14px; transition:transform .22s cubic-bezier(.4,0,.2,1) }
.nav__back:hover{ color:var(--ink); background:#1313180a }
.nav__back:hover svg{ transform:translateX(-3px) }

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:96px;
  overflow:hidden;
}
.hero__wash{
  position:absolute; inset:-180px 0 auto; height:820px; z-index:-1;
  background:
    radial-gradient(48% 44% at 50% 20%, #ff8a3d3d, #ff8a3d00 70%),
    radial-gradient(34% 32% at 27% 12%, #ffc36b33, #ffc36b00 72%),
    radial-gradient(36% 34% at 74% 15%, #ff6b3b2e, #ff6b3b00 72%);
  filter:blur(46px);
  mask-image:linear-gradient(#000 0 55%, #0000 100%);
  -webkit-mask-image:linear-gradient(#000 0 55%, #0000 100%);
}
.hero__top{ text-align:center; display:flex; flex-direction:column; align-items:center }
.hero__top .h1{ margin-top:26px }
.hero__top .lede{ margin-inline:auto }

/* Airbnb brand cue in the headline */
.abnb{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:.13em;
  padding:.07em .14em .09em .1em;
  border-radius:.15em;
  font-family:var(--sans); font-style:normal; font-weight:500;
  line-height:.86; letter-spacing:-0.042em;
  background:linear-gradient(150deg, #ff5a5f05, #ff5a5f14 62%, #ff5a5f1c);
  box-shadow:inset 0 0 0 1px #ff5a5f1f;
}
.abnb__belo{ width:.52em; height:.52em; flex:none; color:var(--abnb); margin-bottom:.04em }
/* sits above the plate but under the letters, so the glint never smears the type */
.abnb::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(102deg, #fff0 38%, #ffffffe0 50%, #fff0 62%);
  transform:translateX(-150%) skewX(-13deg);
  animation:sheen 7.5s cubic-bezier(.4,0,.2,1) 1.4s infinite;
}
@keyframes sheen{
  0%{ transform:translateX(-150%) skewX(-13deg) }
  17%,100%{ transform:translateX(250%) skewX(-13deg) }
}

/* ── brand marks ───────────────────────────────────────────
   Official platform icons, generated into a sprite by dev/brands.mjs.
   Each symbol carries its own tile and corner radius, so the only
   thing to set here is the box. */
.bmk{ width:21px; height:21px; flex:none }
.bmk--xs{ width:15px; height:15px }
.bmk--sm{ width:18px; height:18px }
.bmk--md{ width:26px; height:26px }
.bmk--lg{ width:37px; height:37px; filter:drop-shadow(0 2px 7px #1313181f) }

/* the one non-platform tile: a host's own site */
.own{
  width:21px; height:21px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4.8px; background:var(--ink); color:#fff;
}
.own svg{ width:13px; height:13px }

/* ── distribution board ────────────────────────────────── */
.board{
  margin-top:64px;
  padding:22px;
  border-radius:var(--r-xl);
  background:linear-gradient(#fffefd, #fdfaf6);
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-xl);
}
.board__head{
  display:flex; align-items:center; gap:16px;
  padding:0 6px 18px;
  border-bottom:1px solid var(--line);
}
.board__chips{ display:flex; flex-wrap:wrap; gap:8px }
.stat{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:6px 12px; border-radius:999px;
  background:var(--bg-warm-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:12.5px; color:var(--body); white-space:nowrap;
}
.stat b{ font-weight:600; font-size:13.5px; color:var(--ink) }
.board__live{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.board__live i{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px #16916a26;
  animation:blip 2.4s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.35} }

.board__grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr .92fr 1fr;
  gap:70px;
  align-items:center;
  padding:28px 6px 8px;
}
/* an <svg> is a replaced element: without explicit sizing it falls back to
   its 300x150 intrinsic box and the viewBox lands nowhere near the grid */
.wires{
  position:absolute; inset:28px 6px 8px;
  width:calc(100% - 12px); height:calc(100% - 36px);
  overflow:visible;
}
.wires__flow path{ animation:flow 3.4s linear infinite }
@keyframes flow{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-100 } }

.board__col{ display:grid; gap:18px; position:relative; z-index:1 }
.board__col--c{ gap:12px; justify-items:center }
.board__label{
  font-size:11.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted);
}

.node{
  padding:13px 14px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-md);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--d, 0s);
}
@keyframes rise{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.node__h{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; letter-spacing:-0.014em;
}
.node__list{ margin-top:11px; display:grid; gap:7px }
.node__list li{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--body);
}
.node__list li b{ margin-left:auto; font-weight:500; color:var(--muted); font-size:11.5px }
.node__list--plat li{ gap:9px }
.ok{ color:var(--green) !important; font-weight:500 }
.node__f{
  margin-top:11px; padding-top:9px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted);
}
.node__vid{ margin-top:11px; display:flex; gap:11px; align-items:center }
.node__thumb{
  position:relative; flex:none;
  width:54px; aspect-ratio:9/16;
  border-radius:7px; overflow:hidden; background:var(--card);
}
.node__thumb img{ width:100%; height:100%; object-fit:cover }
.node__dur{
  position:absolute; left:4px; bottom:4px;
  padding:1px 5px; border-radius:999px;
  background:#131318b8; color:#fff;
  font-size:9px; font-style:normal; font-variant-numeric:tabular-nums;
}
.node__vid p{
  font-family:var(--serif); font-style:italic;
  font-size:13.5px; line-height:1.32; color:var(--ink-soft);
}

.listing{
  width:100%;
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-lg);
  overflow:hidden;
}
.listing__shot{ position:relative; aspect-ratio:4/3; background:var(--card) }
.listing__shot img{ width:100%; height:100%; object-fit:cover }
.listing__price{
  position:absolute; left:12px; bottom:12px;
  padding:6px 12px; border-radius:999px;
  background:#ffffffee; color:var(--ink);
  font-size:13.5px; font-weight:600; letter-spacing:-0.02em;
  box-shadow:var(--sh-sm); backdrop-filter:blur(6px);
}
.listing__price i{ font-style:normal; font-weight:400; color:var(--muted); font-size:11.5px }
.listing__body{ padding:14px 16px 16px }
.listing__body h3{ font-size:15.5px; letter-spacing:-0.024em }
.listing__body p{ margin-top:5px; font-size:12.5px; color:var(--muted) }

.board__foot{
  margin-top:20px; padding:14px 16px 0;
  border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); text-align:center;
}

/* ── distribution band ─────────────────────────────────────
   Answers "where exactly do you promote my listing" in one screen:
   three groups of real platform icons, each with the job it does. */
.dist{
  padding-block:clamp(54px, 6.5vw, 82px);
  background:var(--bg-warm-2);
  border-block:1px solid var(--line);
}
.dist__head{ text-align:center; display:flex; flex-direction:column; align-items:center }
.dist__head .h2{ margin-top:16px; max-width:26ch }
.dist__head .sec__lede{ margin-inline:auto }

.dist__grid{
  margin-top:44px;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-radius:var(--r-xl);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-md);
  overflow:hidden;
}
.dist__cell{
  padding:28px 26px 26px;
  display:grid; gap:15px; align-content:start;
  transition:background .24s;
}
.dist__cell + .dist__cell{ border-left:1px solid var(--line) }
.dist__cell:hover{ background:#fefcfa }

.dist__marks{ display:flex; align-items:center; gap:9px; min-height:37px }
.dist__step{
  font-size:11.5px; font-weight:500; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--signal-deep);
}
.dist__h{
  font-size:16px; font-weight:500; line-height:1.28; letter-spacing:-0.022em;
}
.dist__p{ font-size:13.5px; line-height:1.6; color:var(--body) }
.dist__names{
  margin-top:2px; padding-top:13px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px;
}
.dist__names span{
  padding:4px 10px; border-radius:999px;
  background:var(--bg-warm-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:12px; font-weight:500; letter-spacing:-0.012em; color:var(--ink-soft);
  white-space:nowrap;
}
.dist__foot{
  margin-top:20px; text-align:center;
  font-size:13px; color:var(--muted);
}

/* ── services ──────────────────────────────────────────── */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.svc__card{
  display:flex; flex-direction:column;
  border-radius:var(--r-xl);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-md);
  overflow:hidden;
  transition:box-shadow .28s, transform .28s cubic-bezier(.4,0,.2,1);
}
.svc__card:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-lg) }
.svc__vis{
  position:relative; height:238px; flex:none; overflow:hidden;
  background:linear-gradient(160deg, var(--bg-warm-2), var(--card-2));
  border-bottom:1px solid var(--line);
}
.svc__txt{ padding:24px }
.svc__n{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:0.08em;
  color:var(--signal); font-variant-numeric:tabular-nums;
}
.svc__txt .h3{ margin-top:12px }
.svc__txt p{ margin-top:12px; font-size:14.5px; line-height:1.62; color:var(--body) }

/* service visual 1: stacked mini posts */
.svc__vis--posts{ padding:22px 0 0 26px }
.mini{
  position:absolute;
  width:216px; padding:11px 12px;
  border-radius:var(--r-sm);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-md);
  display:grid; gap:7px;
}
.mini__h{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:500; letter-spacing:-0.012em;
}
.mini__b{ font-size:11px; line-height:1.45; color:var(--body) }
.mini__f{ display:flex; gap:4px }
.mini__f i{ width:26px; height:5px; border-radius:3px; background:var(--card-2) }
/* each card is stacked over the one above it, so every header stays readable */
.mini--fb{ top:12px; left:22px; z-index:1; opacity:.8 }
.mini--tg{ top:78px; left:42px; z-index:2; opacity:.92 }
.mini--back{ top:144px; left:62px; z-index:3 }

/* service visual 2: phone */
.svc__vis--reel{ display:grid; place-items:center; padding:18px }
.phone{
  position:relative;
  width:116px; aspect-ratio:9/16;
  border-radius:15px; overflow:hidden;
  background:var(--ink);
  box-shadow:0 0 0 4px #fff, inset 0 0 0 1px #ffffff26, var(--sh-lg);
}
.phone img{ width:100%; height:100%; object-fit:cover }
.phone::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(#0000 42%, #13131866 74%, #131318cc);
}
.phone__bars{ position:absolute; top:7px; left:8px; right:8px; display:flex; gap:3px; z-index:2 }
.phone__bars i{ height:2.5px; flex:1; border-radius:2px; background:#ffffff4d }
.phone__bars i.on{ background:#fff }
.phone__cap{
  position:absolute; left:10px; right:10px; bottom:11px; z-index:2;
  font-size:10.5px; font-weight:500; line-height:1.3; color:#fff;
  letter-spacing:-0.012em; text-shadow:0 1px 6px #13131899;
}
.phone__play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
}
.phone__play svg{
  width:12px; height:12px; color:#fff;
  padding:11px; box-sizing:content-box;
  border-radius:50%; background:#13131859;
  backdrop-filter:blur(4px); box-shadow:inset 0 0 0 1px #ffffff3d;
  transform:translateX(1px);
}

/* service visual 3: sync rows */
.svc__vis--plat{ display:grid; place-items:center; padding:22px }
.sync{
  width:min(100%, 258px);
  padding:8px; border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-md);
}
.sync__row{
  display:flex; align-items:center; gap:9px;
  padding:9px 8px;
  font-size:12.5px; font-weight:500; letter-spacing:-0.014em;
}
.sync__row + .sync__row{ border-top:1px solid var(--line) }
.sync__row b{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:500;
}
.sync__row b svg{ width:11px; height:11px }
.sync__row--own{ color:var(--muted) }
.soon{ color:var(--muted) }
.sync__bar{
  margin-top:6px; display:flex; align-items:center; gap:8px;
  padding:10px; border-radius:var(--r-sm);
  background:var(--bg-warm-2);
  font-size:11.5px; color:var(--body);
}
.sync__bar svg{ width:14px; height:14px; color:var(--signal); flex:none }

/* ── bento / examples ──────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px }
.bx{
  padding:11px;
  border-radius:var(--r-xl);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-md);
  display:flex; flex-direction:column;
}
.bx__lab{
  padding:2px 4px 9px;
  font-size:11.5px; font-weight:500; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--muted);
}
.bx--fb{ grid-column:1; grid-row:1 }
.bx--tg{ grid-column:2; grid-row:1 }
.bx--reel{ grid-column:3; grid-row:1 / span 2 }
.bx--cross{ grid-column:1 / span 2; grid-row:2 }

/* Facebook post */
.post{
  flex:1;
  border-radius:var(--r); overflow:hidden;
  background:#fff; box-shadow:inset 0 0 0 1px var(--line-2);
}
.post__grp{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; background:#f0f2f5; border-bottom:1px solid #dcdfe4;
}
.post__grp span{ display:grid }
.post__grp b{ font-size:12.5px; font-weight:600; letter-spacing:-0.014em; color:#050505 }
.post__grp i{ font-size:11px; font-style:normal; color:#65676b }
.post__body{ padding:13px }
.post__who{ display:flex; align-items:center; gap:9px }
.post__who span{ display:grid }
.post__who b{ font-size:12.5px; font-weight:600; color:#050505 }
.post__who i{ display:flex; align-items:center; gap:4px; font-size:11px; font-style:normal; color:#65676b }
.post__globe{ width:11px; height:11px }
.ava{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:-0.01em;
}
.post__txt{
  margin-top:11px; font-size:13px; line-height:1.5; color:#050505;
}
.post__txt b{ font-weight:600 }
.post__shot{
  margin:10px -13px 0; aspect-ratio:16/11; background:var(--card);
  border-block:1px solid #dcdfe4;
}
.post__shot img{ width:100%; height:100%; object-fit:cover }
.post__meta{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; font-size:11.5px; color:#65676b;
}
.post__react{ display:flex; align-items:center; gap:5px; margin-right:auto }
.rx{
  width:16px; height:16px; margin-right:-5px;
  border-radius:50%; display:grid; place-items:center;
  box-shadow:0 0 0 1.5px #fff;
}
.rx svg{ width:9px; height:9px; color:#fff }
.rx--like{ background:var(--fb) }
.rx--love{ background:#f3425f; margin-right:2px }
.post__acts{
  display:flex; border-top:1px solid #dcdfe4; padding-top:7px;
}
.post__acts span{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 0; font-size:11.5px; font-weight:500; color:#65676b;
}
.post__acts svg{ width:14px; height:14px }

/* Telegram post */
.tgc{
  flex:1; display:flex; flex-direction:column;
  border-radius:var(--r); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.tgc__h{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; background:#fff; border-bottom:1px solid var(--line);
}
.tgc__h span{ display:grid }
.tgc__h b{ font-size:12.5px; font-weight:600; letter-spacing:-0.014em }
.tgc__h i{ font-size:11px; font-style:normal; color:var(--muted) }
.tgc__feed{
  flex:1; padding:16px 13px;
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(150deg,#e8f2fb,#eef4fa 60%,#e6eef8);
}
.bubble--txt{ padding:4px 6px 2px; border-radius:14px 14px 14px 5px }
.bubble--txt p{ padding:6px 6px 0; font-size:12.5px; color:var(--body) }
.bubble{
  padding:6px; border-radius:14px 14px 14px 5px;
  background:#fff; box-shadow:0 1px 2px #13131826;
}
.bubble__shot{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--card) }
.bubble__shot img{ width:100%; height:100%; object-fit:cover }
.bubble p{ padding:9px 7px 0; font-size:12.5px; line-height:1.48; color:var(--ink) }
.bubble p b{ font-weight:600 }
.bubble__btn{
  margin:10px 0 0; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px; border-radius:9px;
  background:#eff6fc; color:#2f7fc4;
  font-size:12px; font-weight:500;
  transition:background .16s;
}
.bubble__btn:hover{ background:#e3eff9 }
.bubble__btn svg{ width:13px; height:13px }
.bubble__meta{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  padding:7px 7px 3px; font-size:10.5px; color:var(--muted);
}
.bubble__views{ width:12px; height:12px }
.bubble__tick{ width:12px; height:12px; color:#4fae4e }

/* Reel */
.reel{ flex:1; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center }
.phone--lg{ width:min(100%, 262px) }

/* In the three-column bento this card spans both rows, so a fixed-width
   phone leaves a dead pocket above it. Let the phone take the leftover
   height instead and derive its width from the 9:16 aspect. */
@media (min-width:1081px){
  .bx--reel .reel{ justify-content:flex-start }
  .bx--reel .phone--lg{
    flex:1 1 auto; min-height:0;
    width:auto; height:auto; max-width:100%;
    border-radius:18px;
  }
  .bx--reel .phone--lg .phone__cap{ font-size:13px; left:15px; right:48px }
}
.phone--lg .phone__cap{ left:13px; right:44px; bottom:15px; font-size:12px }
.phone--lg .phone__bars{ top:9px; left:11px; right:11px }
.phone__side{
  position:absolute; right:9px; bottom:15px; z-index:2;
  display:grid; gap:13px; justify-items:center;
}
.phone__side i{
  display:grid; justify-items:center; gap:3px;
  font-size:9.5px; font-style:normal; color:#fff;
  text-shadow:0 1px 4px #13131899;
}
.phone__side svg{ width:17px; height:17px; color:#fff }
.reel__hooks{ width:100% }
.reel__lab{
  display:block; font-size:11.5px; font-weight:500;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--muted);
}
.reel__hooks ol{ margin-top:9px; display:grid; gap:6px; counter-reset:h }
.reel__hooks li{
  display:flex; gap:10px;
  padding:8px 11px; border-radius:var(--r-sm);
  background:var(--bg-warm-2);
  font-family:var(--serif); font-style:italic;
  font-size:14px; line-height:1.34; color:var(--ink-soft);
  counter-increment:h;
}
.reel__hooks li::before{
  content:counter(h);
  font-family:var(--sans); font-style:normal; font-weight:600;
  font-size:10.5px; color:var(--signal);
  padding-top:2px;
}
.reel__note{ margin-top:9px; font-size:12.5px; line-height:1.5; color:var(--muted) }

/* Cross-listing */
.cross{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center }
.cross__txt p{ margin-top:10px; font-size:14.5px; line-height:1.58; color:var(--body) }
.ticks{ display:grid; gap:8px }
.ticks li{ display:flex; gap:10px; font-size:13.5px; line-height:1.5; color:var(--ink-soft) }
.ticks svg{
  width:16px; height:16px; flex:none; margin-top:2px;
  padding:2px; box-sizing:content-box; border-radius:50%;
  background:var(--signal-wash); color:var(--signal-deep);
}
.cross__txt .ticks{ margin-top:13px }

.cross__cards{ position:relative; height:256px }
.cc{
  position:absolute; width:56%; aspect-ratio:4/3;
  border-radius:var(--r); overflow:hidden;
  background:var(--card);
  box-shadow:0 0 0 4px #fff, inset 0 0 0 1px var(--line), var(--sh-lg);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.cc img{ width:100%; height:100%; object-fit:cover }
/* top-right: the only corner the cascade never covers */
.cc .bmk{
  position:absolute; right:9px; top:9px;
  filter:drop-shadow(0 2px 7px #13131847);
}
.cc--1{ left:0; top:0; z-index:3; transform:rotate(-3.2deg) }
.cc--2{ left:20%; top:50px; z-index:2; transform:rotate(1.6deg) }
.cc--3{ left:40%; top:98px; z-index:1; transform:rotate(4.4deg) }
.cross:hover .cc--1{ transform:rotate(-4.6deg) translateY(-5px) }
.cross:hover .cc--3{ transform:rotate(5.8deg) translateY(5px) }

/* ── closing cta ───────────────────────────────────────── */
.close{
  padding:clamp(34px, 5vw, 62px);
  border-radius:var(--r-xl);
  background:
    radial-gradient(80% 120% at 88% 8%, #ff5a2433, #ff5a2400 62%),
    linear-gradient(158deg, var(--deep-2), var(--deep));
  box-shadow:inset 0 0 0 1px #ffffff14, var(--sh-xl);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.close .h2{ margin-top:18px; max-width:18ch }
.close > p{
  margin-top:20px; max-width:52ch;
  font-size:16.5px; line-height:1.62; color:var(--on-dark-soft);
}
.close .btn{ margin-top:32px }
.close__fine{ margin-top:18px; font-size:13px; color:#7d756c }

/* ── footer ────────────────────────────────────────────── */
.foot{ padding-block:44px; border-top:1px solid var(--line) }
.foot__in{ display:flex; align-items:center; gap:26px; flex-wrap:wrap }
.foot__note{ max-width:46ch; font-size:12.5px; line-height:1.5; color:var(--muted) }
.foot__links{ margin-left:auto; display:flex; gap:22px }
.foot__links a{ font-size:13.5px; color:var(--body); transition:color .16s }
.foot__links a:hover{ color:var(--ink) }

/* ── booking page ──────────────────────────────────────────
   One job, one screen. The page is a single centred column sized so
   the four fields, the button and the reassurance all land above the
   fold, with no aside and no progress bar to read past. */
.page-book{ background:var(--bg-warm) }
.bk{
  position:relative;
  min-height:100dvh;
  display:grid; align-content:center; justify-items:center;
  padding:calc(var(--nav-h) + 18px) 22px 20px;
  overflow:hidden;
}
.bk__box{ width:100%; max-width:512px }
/* Smaller than the homepage h1 on purpose: at the hero size this wraps
   to two lines inside the card measure and costs half the headroom the
   page has to stay inside one screen. */
.bk .h1--sm{ font-size:clamp(28px, 3.1vw, 38px) }
.bk__wash{
  position:absolute; inset:-240px 0 auto; height:720px; z-index:-1;
  background:
    radial-gradient(44% 44% at 50% 24%, #ff8a3d33, #ff8a3d00 70%),
    radial-gradient(32% 30% at 79% 14%, #ffc36b2b, #ffc36b00 72%);
  filter:blur(48px);
  mask-image:linear-gradient(#000 0 60%, #0000 100%);
  -webkit-mask-image:linear-gradient(#000 0 60%, #0000 100%);
}
.bk__head{ text-align:center }
.bk__head .lede{ margin-top:9px; font-size:15px; line-height:1.5 }

.bk__card{
  margin-top:20px;
  padding:22px;
  border-radius:var(--r-xl);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-lg);
}
.bk__trust{
  margin-top:13px; text-align:center;
  font-size:12px; line-height:1.5; color:var(--muted);
}

/* The two optional questions, closed until asked for. */
.more{ border-top:1px solid var(--line); padding-top:14px }
.more summary{
  display:flex; align-items:center; gap:7px;
  width:fit-content; cursor:pointer; list-style:none;
  font-size:13px; font-weight:500; letter-spacing:-0.012em; color:var(--ink-soft);
  transition:color .2s;
}
.more summary::-webkit-details-marker{ display:none }
.more summary::before{
  content:"+";
  display:grid; place-items:center;
  width:17px; height:17px; flex:none; border-radius:50%;
  background:var(--bg-warm-2); box-shadow:inset 0 0 0 1px var(--line);
  font-size:12px; line-height:1; color:var(--muted);
  transition:background .2s, color .2s;
}
.more summary:hover{ color:var(--ink) }
.more summary:hover::before{ background:var(--signal-wash); color:var(--signal-deep) }
.more[open] summary{ color:var(--ink) }
.more[open] summary::before{ content:"–" }
.more__in{ display:grid; gap:12px; padding-top:12px }
.more__in legend{ margin-bottom:6px }

/* ── listing preview ──
   This is a receipt, not a hero. Its whole job is "yes, that is my
   place", so it stays one strip about the height of the field above it
   and never pushes the submit button off a short screen. */
.lp{ margin-top:10px }
.lp__box{
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px;
  padding:9px 11px; border-radius:var(--r-sm);
  background:var(--bg-warm);
  box-shadow:inset 0 0 0 1px var(--line-2);
  animation:lpIn .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lpIn{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }
.lp__shot{
  position:relative;
  width:52px; aspect-ratio:1/1; border-radius:9px; overflow:hidden;
  background:var(--card-2);
}
/* The photo comes off Airbnb's CDN, so it lands a beat after the rest
   of the strip. Fade it in over the placeholder instead of popping. */
.lp__shot img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s var(--ease);
}
.lp__shot img.is-in{ opacity:1 }
.lp__shot--none{ display:grid; place-items:center; color:var(--muted) }
.lp__shot--none svg{ width:18px; height:18px }
/* The source badge rides on the thumbnail rather than taking its own
   line, which is a whole row of height back. */
.lp__src{
  position:absolute; right:3px; bottom:3px;
  width:15px; height:15px; border-radius:5px;
  box-shadow:0 1px 3px #1313183d;
}
.lp__body{ min-width:0 }
.lp__title{
  font-size:14.5px; font-weight:500; line-height:1.35; letter-spacing:-0.022em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp__meta{
  margin-top:2px;
  font-size:12.5px; line-height:1.4; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp__meta b{ font-weight:600; color:var(--ink-soft) }
.lp__meta i{ font-style:normal; color:#c4c8d4 }
.lp__ok{
  display:grid; place-items:center; flex:none;
  width:21px; height:21px; border-radius:50%;
  background:var(--signal-wash); color:var(--signal-deep);
}
.lp__ok svg{ width:12px; height:12px }

/* loading skeleton, laid out on the same grid so nothing jumps */
.lp__box--load .lp__shot,
.sk{
  background:linear-gradient(100deg, var(--card-2) 20%, #faf6f0 42%, var(--card-2) 64%);
  background-size:220% 100%;
  animation:sheenSk 1.25s linear infinite;
}
@keyframes sheenSk{ from{ background-position:130% 0 } to{ background-position:-30% 0 } }
.sk{ height:10px; border-radius:5px }
.sk--t{ width:62%; height:13px; margin-bottom:7px }
.sk--m{ width:40% }

/* ── picking a time ────────────────────────────────────────
   The card carries four fields at step 1 and a month of dates beside a
   column of openings at step 2, so it earns a little more width for the
   second job and gives it straight back. Still a centred column, never
   the width of the screen. */
.bk__box:has(#slot:not([hidden])){ max-width:748px }

.slot__intro{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px }
.slot__intro h2{ font-size:19px; letter-spacing:-0.026em }
.slot__intro p{ font-size:14px; line-height:1.58; color:var(--body) }

/* The zone control reads as one pill, so a select that most people will
   never touch does not draw the eye away from the calendar. */
.tzbar{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin-top:4px; padding:4px 6px 4px 11px; border-radius:999px;
  background:var(--bg-warm-2); box-shadow:inset 0 0 0 1px var(--line);
  font-size:12px; color:var(--body);
  max-width:100%;
}
.tzbar__ico{ width:13px; height:13px; flex:none; color:var(--muted) }
.tzbar__lab{ flex:none }
.tzbar__sel{
  min-width:0; max-width:100%;
  padding:3px 22px 3px 8px; border:0; border-radius:999px;
  background:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6.5 4 4 4-4' fill='none' stroke='%2355596a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 5px center; background-size:13px;
  -webkit-appearance:none; appearance:none;
  font:inherit; font-weight:500; color:var(--ink); cursor:pointer;
  text-overflow:ellipsis;
  transition:background-color .16s;
}
.tzbar__sel:hover{ background-color:#fff }
.tzbar__sel:focus-visible{ outline:2px solid var(--signal); outline-offset:1px }

.sched{
  display:grid; grid-template-columns:1fr 196px; gap:20px;
  align-items:start;
}

/* ── month grid ── */
.cal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:10px;
}
.cal__month{ font-size:14.5px; font-weight:500; letter-spacing:-0.018em }
.cal__nav{
  display:grid; place-items:center;
  width:28px; height:28px; flex:none; padding:0;
  border:0; border-radius:50%;
  background:transparent; color:var(--body); cursor:pointer;
  transition:background .16s, color .16s, opacity .16s;
}
.cal__nav svg{ width:15px; height:15px }
.cal__nav:hover:not(:disabled){ background:var(--bg-warm-2); color:var(--ink) }
.cal__nav:disabled{ opacity:.28; cursor:default }
.cal__nav:focus-visible{ outline:2px solid var(--signal); outline-offset:1px }

.cal__grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:3px;
  transition:opacity .18s;
}
.cal__grid.is-loading{ opacity:.45; pointer-events:none }
.cal__dow{
  display:grid; place-items:center; height:26px;
  font-size:11px; font-weight:500; letter-spacing:.04em; color:var(--muted);
}
/* Saturday and Sunday sit back a shade, so the working week reads first. */
.cal__dow[data-i="5"],.cal__dow[data-i="6"]{ color:#bcc0cc }
.cal__pad{ height:36px }

.cal__day{
  position:relative;
  display:grid; place-items:center;
  height:36px; padding:0;
  border:0; border-radius:9px;
  background:transparent;
  font:inherit; font-size:13.5px; letter-spacing:-0.01em; color:var(--ink);
  cursor:pointer;
  transition:background .16s, color .16s, box-shadow .16s;
}
.cal__day:hover:not(:disabled){ background:var(--signal-wash); color:var(--signal-deep) }
.cal__day:focus-visible{ outline:2px solid var(--signal); outline-offset:1px }
/* An open day is worth spotting from across the grid; the dot does that
   without a second colour or a heavier weight on the number. */
.cal__day:not(:disabled)::after{
  content:""; position:absolute; bottom:5px;
  width:3px; height:3px; border-radius:50%; background:var(--signal);
  transition:background .16s, opacity .16s;
}
.cal__day:disabled{ color:#c2c6d2; cursor:default }
.cal__day.is-today{ box-shadow:inset 0 0 0 1px var(--line-2) }
.cal__day.is-on{
  background:var(--signal); color:#fff; font-weight:500;
  box-shadow:0 4px 12px #ff5a2440;
}
.cal__day.is-on::after{ background:#fff; opacity:.85 }

/* ── openings ── */
.sched__times{
  border-left:1px solid var(--line); padding-left:20px;
  min-height:266px;
}
.times__head{ font-size:13.5px; font-weight:500; letter-spacing:-0.016em }
.times__sub{ display:block; margin-top:2px; font-size:11.5px; color:var(--muted) }
.times__empty{
  margin-top:10px; font-size:13px; line-height:1.55; color:var(--muted);
}
/* Scrolls rather than growing the card past the fold on a busy day.
   The fade is doing real work: without it a half-cut chip at the
   boundary looks like a rendering fault rather than more to come. */
.times__list{
  margin-top:11px;
  display:grid; gap:6px;
  max-height:236px; overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin; scrollbar-color:#d5cec3 transparent;
  mask-image:linear-gradient(#000 calc(100% - 22px), #0000);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px), #0000);
}
/* Nothing is cut off, so nothing needs fading. */
.times__list:not(:has(> :nth-child(7))){ mask-image:none; -webkit-mask-image:none }
.times__list::-webkit-scrollbar{ width:6px }
.times__list::-webkit-scrollbar-thumb{ background:#d5cec3; border-radius:3px }

.times__t{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  padding:9px 10px;
  border:0; border-radius:var(--r-sm);
  background:var(--bg-warm);
  box-shadow:inset 0 0 0 1px var(--line-2);
  font:inherit; font-size:13.5px; font-variant-numeric:tabular-nums;
  letter-spacing:-0.008em; color:var(--ink);
  cursor:pointer;
  transition:background .16s, box-shadow .16s, color .16s;
}
.times__t:hover{ background:#fff; box-shadow:inset 0 0 0 1px #13131847 }
.times__t:focus-visible{ outline:2px solid var(--signal); outline-offset:2px }
.times__t.is-on{
  background:var(--signal); color:#fff; font-weight:500;
  box-shadow:0 4px 12px #ff5a2440;
}
/* Far enough east or west and the slot lands on the next day in the
   visitor's own zone. Saying which one is the difference between a call
   and a missed call. */
.times__t-day{ font-style:normal; font-size:11px; color:var(--muted) }
.times__t.is-on .times__t-day{ color:#ffffffc4 }

.times__sk{
  height:36px; border-radius:var(--r-sm);
  background:linear-gradient(100deg, var(--card-2) 20%, #faf6f0 42%, var(--card-2) 64%);
  background-size:220% 100%;
  animation:sheenSk 1.25s linear infinite;
}

/* ── confirm row ── */
.slot__after{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
  display:grid; gap:12px; justify-items:center;
}
/* Turnstile in interaction-only mode renders nothing at all for almost
   everyone, so the row must not reserve height it will never use. */
.ts:empty{ display:none }
.ts{ display:flex; justify-content:center; width:100%; max-width:300px }
.err--mid{ text-align:center }

/* ── form ──────────────────────────────────────────────── */
.form{ display:grid; gap:15px }
/* align-content:start matters: without it, a field whose neighbour in the
   row has sprouted an error message stretches its own input to match the
   taller column, so one bad field visibly resizes the good one next to it. */
.field{ display:grid; gap:6px; align-content:start }
.field > label,.field legend,.field__lab{
  font-size:13.5px; font-weight:500; letter-spacing:-0.012em; color:var(--ink);
}
.field > label i,.field legend i{ font-style:normal; font-weight:400; color:var(--muted) }
/* label beside its control instead of above it, for a short answer whose
   options are narrow enough to share the line */
.field--row{ grid-template-columns:auto 1fr; align-items:center; gap:14px }
.field input,.field textarea{
  width:100%; padding:13px 15px;
  border:0; border-radius:var(--r-sm);
  background:var(--bg-warm);
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:15px; letter-spacing:-0.01em;
  transition:box-shadow .16s, background .16s;
}
/* Starts one line tall and grows with the text (see main.js). Most people
   answer this in a sentence, so reserving four lines of empty box just
   pushes the button towards the fold. */
.field textarea{
  min-height:46px; height:46px; resize:none; overflow:hidden;
  line-height:1.55; font-size:14.5px;
}
.field input::placeholder,.field textarea::placeholder{ color:#a9adbc }
.field input:hover,.field textarea:hover{ box-shadow:inset 0 0 0 1px #13131847 }
.field input:focus,.field textarea:focus{
  outline:0; background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--signal), 0 0 0 4px #ff5a241f;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  box-shadow:inset 0 0 0 1.5px #d92d20;
}
.field--url input{ font-size:14px }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start }
.err{ font-size:12.5px; color:#d92d20; min-height:0 }
.err:empty{ display:none }

.seg__opts{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.seg__opts label{ display:block; cursor:pointer }
.seg__opts input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.seg__opts span{
  display:grid; place-items:center;
  padding:8px 6px; border-radius:var(--r-sm);
  background:var(--bg-warm);
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:13.5px; letter-spacing:-0.014em; text-align:center;
  transition:box-shadow .16s, background .16s, color .16s;
}
.seg__opts label:hover span{ background:#fff; box-shadow:inset 0 0 0 1px #13131847 }
.seg__opts input:checked + span{
  background:var(--ink); color:#fff;
  box-shadow:inset 0 0 0 1px var(--ink);
}
.seg__opts input:focus-visible + span{ outline:2px solid var(--signal); outline-offset:2px }

.btn--signal[aria-busy="true"]{ opacity:.7; pointer-events:none }

.done{ text-align:center; display:flex; flex-direction:column; align-items:center; padding:14px 0 }
.done__tick{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:50%; background:var(--signal-wash); color:var(--signal-deep);
  box-shadow:inset 0 0 0 1px #ff5a2433;
  animation:pop .5s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes pop{ from{ opacity:0; transform:scale(.7) } to{ opacity:1; transform:none } }
.done__tick svg{ width:25px; height:25px }
.done h2{ margin-top:20px; font-size:23px; letter-spacing:-0.028em }
.done p{ margin-top:12px; max-width:44ch; font-size:14.5px; line-height:1.6; color:var(--body) }
.done p b{ font-weight:500; color:var(--ink) }
.done .btn{ margin-top:26px }

/* The one thing a booked visitor came back to this page to re-read. */
.when{
  margin-top:16px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.when__date{
  font-family:var(--serif); font-weight:400;
  font-size:27px; line-height:1.15; letter-spacing:-0.01em; color:var(--ink);
}
.when__time{
  font-size:16px; font-variant-numeric:tabular-nums;
  letter-spacing:-0.012em; color:var(--ink-soft);
}
.when__tz{ font-size:12.5px; color:var(--muted) }

.meet{
  margin-top:22px; width:100%; max-width:340px;
  padding:16px; border-radius:var(--r);
  background:var(--bg-warm); box-shadow:inset 0 0 0 1px var(--line-2);
  display:grid; gap:11px; justify-items:center;
}
.meet__top{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; letter-spacing:-0.012em; color:var(--ink-soft);
}
.meet__logo{ width:19px; height:auto }
.meet__join{ width:100%; justify-content:center; margin-top:0 !important }
.meet__url{
  margin-top:0 !important;
  max-width:100%;
  font-size:11.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.done__pending{
  margin-top:20px !important; max-width:36ch;
  font-size:13px !important; color:var(--muted) !important;
}
.done__sent{ font-size:13.5px !important }
.done__sent:empty{ display:none }
.done__next{ font-size:13.5px !important; color:var(--muted) !important }

/* ── reveal ────────────────────────────────────────────── */
.r{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) }
.r.in{ opacity:1; transform:none; transition-delay:var(--d, 0s) }

/* ══════════ responsive ══════════ */
@media (max-width:1080px){
  :root{ --section-y:80px }
  .board__grid{ grid-template-columns:1fr 1fr; gap:20px }
  .wires{ display:none }
  .board__col--c{ grid-column:1 / -1; grid-row:1; max-width:420px; margin-inline:auto }
  .board__col--l{ grid-column:1; grid-row:2 }
  .board__col--r{ grid-column:2; grid-row:2 }

  .svc{ grid-template-columns:1fr; gap:18px }
  .svc__card{ flex-direction:row; align-items:stretch }
  .svc__vis{ width:44%; height:auto; min-height:238px; border-bottom:0; border-right:1px solid var(--line) }
  .svc__txt{ flex:1; align-self:center }

  .bento{ grid-template-columns:1fr 1fr }
  .bx--fb{ grid-column:1; grid-row:1 }
  .bx--tg{ grid-column:2; grid-row:1 }
  .bx--reel{ grid-column:1; grid-row:2; grid-row-end:auto }
  .bx--cross{ grid-column:2; grid-row:2 }
  .reel{ gap:18px }
  .svc__vis--reel .phone{ width:152px }

  /* the card is half as wide from here down, so the split has to go */
  .cross{ grid-template-columns:1fr; gap:24px }
  .cross__cards{ height:250px }
  .cc{ width:52% }
  .cc--1{ left:0; top:4px }
  .cc--2{ left:22%; top:56px }
  .cc--3{ left:44%; top:108px }

  .dist__grid{ grid-template-columns:1fr }
  .dist__cell + .dist__cell{ border-left:0; border-top:1px solid var(--line) }

}

@media (max-width:860px){
  .nav__links{ display:none }
  .nav__in{ gap:14px }
  .nav.is-stuck .nav__in{ max-width:none }
  .nav .btn{ margin-left:auto }

  .board__head{ flex-direction:column; align-items:flex-start; gap:12px }
  .board__live{ margin-left:0 }

}

@media (max-width:700px){
  :root{ --section-y:68px; --gutter:20px }
  .hero{ padding-top:calc(var(--nav-h) + 18px); padding-bottom:64px }
  .board{ margin-top:44px; padding:16px; border-radius:var(--r-lg) }
  .board__grid{ grid-template-columns:1fr; gap:16px; padding:22px 2px 4px }
  .board__col--l,.board__col--r{ grid-column:1 }
  .board__col--l{ grid-row:2 }
  .board__col--r{ grid-row:3 }
  .board__chips .stat{ font-size:12px }

  .svc__card{ flex-direction:column }
  .svc__vis{ width:auto; min-height:208px; border-right:0; border-bottom:1px solid var(--line) }
  .svc__txt{ padding:20px }

  .bento{ grid-template-columns:1fr }
  .bx--fb,.bx--tg,.bx--reel,.bx--cross{ grid-column:1; grid-row:auto }

  .cta-row{ width:100%; flex-direction:column }
  .cta-row .btn{ width:100% }

  .seg__opts{ grid-template-columns:1fr 1fr }
  .foot__in{ gap:18px }
  .foot__links{ margin-left:0 }

  .dist__grid{ border-radius:var(--r-lg) }
  .dist__cell{ padding:24px 20px }

  /* Name and phone stay side by side down to the narrowest phones,
     because stacking them adds a whole row and that is the difference
     between the button being on screen and under the fold. */
  .form__row{ gap:10px }
  .bk{ padding-top:calc(var(--nav-h) + 12px); padding-bottom:6px }
  .bk__card{ margin-top:16px; padding:18px; border-radius:var(--r-lg) }
  .bk__head .lede{ font-size:14.5px }
  .bk__trust{ margin-top:10px }
  .lp__box{ grid-template-columns:46px 1fr auto; gap:10px; padding:8px 10px }
  .lp__shot{ width:46px }

  /* Calendar over openings, and the openings go two across so a day
     with a dozen slots does not become a mile of scrolling. */
  .sched{ grid-template-columns:1fr; gap:16px }
  .sched__times{
    border-left:0; border-top:1px solid var(--line);
    padding-left:0; padding-top:16px; min-height:0;
  }
  .times__list{ grid-template-columns:1fr 1fr; max-height:224px }
  .times__list:not(:has(> :nth-child(11))){ mask-image:none; -webkit-mask-image:none }
  .cal__day,.cal__pad{ height:40px }
  .when__date{ font-size:24px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .r{ opacity:1; transform:none }
}