/* site.css — #the-site-goes-midnight (2026-10-14). THE MIDNIGHT SITE'S ONE STYLESHEET.
   Taken from the approved homepage, docs/holding/brand-midnight/fundio-introductions.html, rule for rule where the homepage
   has the rule, and written in its language where an inner page needs one it did not have. Midnight navy, ink and soft
   silver, Inter Tight only and self hosted, light headlines with tight tracking, small spaced capital labels, thin outline
   buttons that fill on hover, the drifting navy background with a faint grid that fades. No serif face, no slanted type,
   no purple, no photograph.
   The --fd tokens at the end of :root are the names the reused booking, contact, help and legal markup already reads,
   pointed at this palette, so those pages take the new look without a word or a script changing.
   The face's URL carries the digest of its bytes (the rule apps/web/_headers records for /font/): the midnight test
   fails if this query and the file disagree. */

@font-face {
  font-family: "Inter Tight";
  src: url("/midnight/font/inter-tight.woff2?v=77fefe8ca19b") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #05080f; --bg2: #080d18; --panel: #0b1222; --ink: #e9edf4; --soft: #b3bdd0; --dim: #66728c;
  --line: rgba(233, 237, 244, .09); --line2: rgba(233, 237, 244, .18);
  /* The brand's dim (#66728c) reads about 4.1 to 1 on this navy: right for the large headline words that use it, short of
     the 4.5 to 1 small type needs. Small labels and fine print take this slightly lifted dim (about 5.6 to 1) instead. */
  --dimtext: #7c88a2;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --htrack: -.045em; --ease: cubic-bezier(.2, .7, .2, 1);

  --fd-bg-0: #070c18;
  --fd-ink: var(--ink);
  --fd-ink-soft: var(--soft);
  --fd-ink-faint: var(--dim);
  --fd-ink-ghost: rgba(179, 189, 208, .4);
  --fd-hair: var(--line);
  --fd-hair-2: var(--line2);
  --fd-hair-3: rgba(233, 237, 244, .3);
  --fd-panel: rgba(11, 18, 34, .7);
  --fd-panel-2: #101a30;
  --fd-panel-3: #17213a;
  --fd-teal: var(--ink);
  --fd-teal-ink: var(--ink);
  --fd-teal-soft: rgba(233, 237, 244, .08);
  --fd-on-teal: var(--bg);
  --fd-grad-navy: var(--ink);
  --fd-warn: #e3cfa2;
  --fd-warn-soft: rgba(227, 207, 162, .06);
  --fd-sans: var(--sans);
  --fd-mono: var(--sans);
  --fd-radius-full: 0;
  --fd-radius-sm: 0;
  --fd-radius-md: 0;
  --fd-radius-lg: 0;
  --fd-touch: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: #e9edf4; color: #05080f; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
[hidden] { display: none !important; }
b, strong { font-weight: 500; }
.mono { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; font-weight: 400; text-transform: uppercase; color: var(--dimtext); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 12px 16px; background: var(--ink); color: var(--bg); font-size: 14px; }
.skip:focus { top: 12px; }

/* ── THE BACKGROUND: three soft blurs drifting, a beam from the top, a faint grid that fades, one horizon line ── */
.bgfx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bgfx .b { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.bgfx .b1 { width: 70vw; height: 70vw; left: -22vw; top: -34vw; background: radial-gradient(circle, rgba(38, 58, 108, .9) 0%, rgba(38, 58, 108, 0) 66%); animation: d1 40s ease-in-out infinite alternate; }
.bgfx .b2 { width: 60vw; height: 60vw; right: -24vw; top: 6vh; background: radial-gradient(circle, rgba(44, 62, 104, .75) 0%, rgba(44, 62, 104, 0) 66%); animation: d2 52s ease-in-out infinite alternate; }
.bgfx .b3 { width: 50vw; height: 50vw; left: 28vw; bottom: -30vw; background: radial-gradient(circle, rgba(160, 180, 220, .22) 0%, rgba(160, 180, 220, 0) 66%); animation: d3 60s ease-in-out infinite alternate; }
.bgfx .beam { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(205, 218, 242, .09), rgba(205, 218, 242, 0) 70%); }
.bgfx .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(233, 237, 244, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 237, 244, .04) 1px, transparent 1px); background-size: 96px 96px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 25%, transparent 75%); }
.bgfx .hz { position: absolute; left: 0; right: 0; top: 100vh; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 237, 244, .22), transparent); }
@keyframes d1 { to { transform: translate(14vw, 10vh) scale(1.08); } }
@keyframes d2 { to { transform: translate(-12vw, 18vh) scale(.94); } }
@keyframes d3 { to { transform: translate(-16vw, -12vh) scale(1.1); } }

/* ── HEADER ── */
header#hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(26px + var(--safe-top)) 5vw 26px; transition: background .5s, border-color .5s; border-bottom: 1px solid transparent; }
header#hd.solid { background: rgba(5, 8, 15, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--line); }
.wm { font-family: var(--sans); font-size: 27px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
header#hd nav { display: flex; gap: 40px; font-size: 14px; color: var(--soft); }
header#hd nav a { position: relative; }
header#hd nav a:after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
header#hd nav a:hover { color: var(--ink); }
header#hd nav a:hover:after { transform: scaleX(1); transform-origin: left; }
.hr { justify-self: end; display: flex; gap: 28px; align-items: center; font-size: 14px; }
.hr .si { color: var(--soft); }
.hr .si:hover { color: var(--ink); }

/* ── BUTTONS: thin outline rectangles that fill on hover, and the underlined link beside them ── */
.btn { display: inline-flex; align-items: center; gap: 16px; border: 1px solid var(--line2); padding: 16px 22px 16px 24px; font-size: 14px; font-weight: 400; color: var(--ink); position: relative; overflow: hidden; isolation: isolate; transition: color .5s; white-space: nowrap; background: transparent; }
.btn:before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .6s var(--ease); z-index: -1; }
.btn:hover { color: var(--bg); }
.btn:hover:before { transform: none; }
.btn svg { width: 15px; height: 15px; }
.btn.sm { padding: 10px 14px 10px 16px; font-size: 13px; }
.acts { margin-top: 44px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.lk { font-size: 14px; color: var(--soft); border-bottom: 1px solid var(--line2); padding-bottom: 4px; }
.lk:hover { color: var(--ink); border-color: var(--ink); }

/* ── HOME: THE HERO ── */
.hero { position: relative; min-height: 100vh; display: grid; grid-template-columns: 5fr 7fr; align-items: center; padding: 120px 5vw 140px; overflow: hidden; }
.hero .l { position: relative; z-index: 2; }
h1 { font-family: var(--sans); font-weight: 300; font-size: calc(clamp(56px, 7vw, 124px) * .92); line-height: .95; letter-spacing: var(--htrack); margin-top: 34px; }
h1 .ln { display: block; overflow: hidden; }
h1 .ln span { display: block; }
h1 .ln:nth-child(2) span { color: var(--dim); }
.js h1 .ln span { transform: translateY(102%); animation: rise 1.4s cubic-bezier(.2, .75, .15, 1) forwards; }
.js h1 .ln:nth-child(2) span { animation-delay: .12s; }
@keyframes rise { to { transform: none; } }
.lede { margin-top: 34px; max-width: 430px; font-size: 18px; line-height: 1.65; color: var(--soft); }
.js .hero .lede { opacity: 0; animation: fi 1.4s .5s forwards; }
.js .hero .acts { opacity: 0; animation: fi 1.4s .7s forwards; }
@keyframes fi { to { opacity: 1; } }
#map { position: absolute; right: 3vw; top: 52%; transform: translateY(-50%); width: 58vw; height: auto; aspect-ratio: 1000 / 600; z-index: 1; }

/* ── HOME: THE TICKER ── */
.tick { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 200px 1fr; align-items: center; height: 64px; overflow: hidden; }
.tick > .mono { padding-left: 5vw; color: var(--soft); }
.tick .feed { position: relative; height: 64px; overflow: hidden; border-left: 1px solid var(--line); }
.tick .feed div { position: absolute; left: 28px; top: 0; height: 64px; display: flex; align-items: center; gap: 22px; font-size: 15px; color: var(--soft); white-space: nowrap; transition: transform .9s var(--ease), opacity .9s; }
.tick .feed div strong { font-weight: 300; color: var(--ink); }
.tick .feed div .mono { color: var(--dimtext); }

/* ── HOME: OUR VIEW ── */
.stmt { padding: 24vh 5vw 22vh; display: grid; grid-template-columns: 3fr 9fr; gap: 4vw; }
.stmt p { font-weight: 300; font-size: clamp(30px, 3.3vw, 56px); line-height: 1.15; letter-spacing: var(--htrack); }
.stmt p span { color: var(--ink); }
.stmt p .d { color: var(--dim); }

/* ── HOME: HOW AN INTRODUCTION WORKS ── */
.scene { display: grid; grid-template-columns: 6fr 5fr; gap: 6vw; padding: 0 5vw 20vh; border-top: 1px solid var(--line); }
.stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.stage { position: relative; width: 100%; aspect-ratio: 5 / 4; border: 1px solid var(--line); background: radial-gradient(120% 90% at 30% 10%, rgba(18, 30, 58, .85), rgba(7, 11, 21, .85) 70%); }
.stage .lab { position: absolute; left: 24px; top: 20px; }
.stage .stp { position: absolute; right: 24px; top: 20px; }
.pane { position: absolute; inset: 64px 10% 56px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .9s, transform .9s var(--ease); pointer-events: none; }
.pane.on { opacity: 1; transform: none; }
.card { width: 100%; max-width: 440px; background: #0d1528; border: 1px solid var(--line2); padding: 28px 30px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
.card .h { display: flex; justify-content: space-between; align-items: center; }
.card .who { display: flex; gap: 14px; align-items: center; }
.av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #dfe5f0, #7d8aa5); color: #0a1020; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 300; }
.card .nm { font-size: 15px; }
.card .nm small { display: block; font-size: 12.5px; color: var(--dimtext); margin-top: 3px; }
.card blockquote { font-weight: 300; font-size: 22px; line-height: 1.4; letter-spacing: -.01em; margin-top: 22px; }
.card .meta { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.sms { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.sms div { max-width: 82%; padding: 11px 15px; font-size: 14px; line-height: 1.45; border-radius: 16px; }
.sms .o { align-self: flex-end; background: #e9edf4; color: #0a1020; border-bottom-right-radius: 4px; }
.sms .i { align-self: flex-start; background: #17213a; border-bottom-left-radius: 4px; }
.cal { display: grid; grid-template-columns: 76px 1fr; margin-top: 20px; border-top: 1px solid var(--line); }
.cal .t { font-size: 12px; letter-spacing: .12em; color: var(--dimtext); padding: 14px 0; border-bottom: 1px solid var(--line); }
.cal .s { border-bottom: 1px solid var(--line); padding: 6px 0; }
.cal .s.b div { background: #e9edf4; color: #0a1020; padding: 12px 14px; font-size: 14px; }
.cal .s.b small { display: block; font-size: 12px; opacity: .65; margin-top: 3px; }
.steps .st { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); padding-left: 4vw; transition: opacity .8s; }
.js .steps .st { opacity: .28; }
.js .steps .st.on { opacity: 1; }
.steps h3 { font-weight: 300; font-size: clamp(40px, 4vw, 68px); line-height: 1; letter-spacing: var(--htrack); margin-top: 18px; }
.steps p { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--soft); max-width: 420px; }

/* ── HOME: THE DESK ── */
.desk { padding: 20vh 5vw; background: rgba(8, 13, 24, .55); border-top: 1px solid var(--line); }
.dh { display: grid; grid-template-columns: 3fr 9fr; gap: 4vw; align-items: end; }
.dh h2 { font-weight: 300; font-size: clamp(48px, 6vw, 104px); line-height: .95; letter-spacing: var(--htrack); }
.dh p { margin-top: 24px; font-size: 17px; line-height: 1.7; color: var(--soft); max-width: 460px; }
.screen { margin-top: 12vh; border: 1px solid var(--line2); background: rgba(7, 12, 24, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; grid-template-columns: 220px 1fr 340px; min-height: 580px; box-shadow: 0 100px 160px -80px rgba(0, 0, 0, .9); }
.sd { padding: 28px 22px; border-right: 1px solid var(--line); }
.sd .wm { font-size: 22px; }
.sd ul { list-style: none; margin-top: 40px; display: flex; flex-direction: column; gap: 2px; }
.sd li { font-size: 13.5px; padding: 10px 12px; color: var(--dimtext); }
.sd li.on { color: var(--ink); background: #101a30; }
.sm2 { padding: 34px 40px; }
.sm2 .top { display: flex; justify-content: space-between; align-items: baseline; }
.sm2 h4 { font-weight: 300; font-size: 40px; line-height: 1.05; letter-spacing: var(--htrack); margin-top: 12px; }
.tbl { margin-top: 30px; border-top: 1px solid var(--line); }
.tr { display: grid; grid-template-columns: 90px 1.2fr 1.2fr 90px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tr.hd { padding: 12px 0; }
.tr .t { font-weight: 300; font-size: 24px; letter-spacing: var(--htrack); }
.tr .n small, .tr .r small { display: block; color: var(--dimtext); font-size: 12.5px; margin-top: 3px; }
.tr .go { justify-self: end; font-size: 13px; color: var(--soft); }
.sr { padding: 34px 28px; border-left: 1px solid var(--line); }
.note { margin-top: 16px; border: 1px solid var(--line2); padding: 22px; }
.note p { font-weight: 300; font-size: 18px; line-height: 1.5; letter-spacing: -.01em; margin-top: 12px; }
.note .ft { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; }
.kv { margin-top: 26px; border-top: 1px solid var(--line); }
.kv div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--soft); }
.kv b { font-weight: 400; color: var(--ink); }

/* ── HOME: THE NETWORK, THE CALENDAR, MEMBERSHIP ── */
.net { padding: 22vh 5vw 18vh; display: grid; grid-template-columns: 3fr 9fr; gap: 4vw; border-top: 1px solid var(--line); }
.net h2 { font-weight: 300; font-size: clamp(44px, 5vw, 88px); line-height: .95; letter-spacing: var(--htrack); margin-top: 22px; }
.net .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3vw; margin-top: 8px; }
.net .cols div { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.net .cols div span:last-child { font-size: 11px; color: var(--dimtext); letter-spacing: .08em; text-transform: uppercase; }
.net.calendar { padding: 12vh 5vw; }
.net.calendar p { font-size: 17px; line-height: 1.7; color: var(--soft); max-width: 620px; }
.net.calendar a, .doc a, .legacy a { color: var(--ink); border-bottom: 1px solid var(--line2); }
.apply { padding: 20vh 5vw; border-top: 1px solid var(--line); display: grid; grid-template-columns: 3fr 9fr; gap: 4vw; }
.apply h2 { font-weight: 300; font-size: clamp(56px, 7vw, 124px); line-height: .92; letter-spacing: var(--htrack); }
.apply p { margin-top: 30px; font-size: 18px; line-height: 1.7; color: var(--soft); max-width: 520px; }

.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* ── EVERY OTHER PAGE, in the homepage's language ── */
.phero { padding: calc(190px + var(--safe-top)) 5vw 10vh; max-width: 1180px; }
.phero h1 { font-size: clamp(48px, 6vw, 104px); margin-top: 26px; text-wrap: balance; }
.phero .lede { max-width: 560px; }
.phero-short { padding-bottom: 0; }
.band { padding: 12vh 5vw; border-top: 1px solid var(--line); }
.band h2 { font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: var(--htrack); }
.band h3 { font-weight: 300; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: var(--htrack); }
.standing, .fine { margin-top: 40px; font-size: 13.5px; line-height: 1.6; color: var(--dimtext); max-width: 640px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.tri { padding: 40px 3vw 20px 0; }
.tri + .tri { padding-left: 3vw; border-left: 1px solid var(--line); }
.tri h3 { margin-top: 18px; }
.tri p { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--soft); }
.ticks { list-style: none; border-top: 1px solid var(--line); max-width: 860px; }
.ticks li { position: relative; padding: 20px 0 20px 40px; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.6; color: var(--soft); }
.ticks li:before { content: ""; position: absolute; left: 4px; top: 33px; width: 18px; height: 1px; background: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 8px 0 12px; }
.cards > div { padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cards b { display: block; font-weight: 400; font-size: 18px; color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em; }
.cards span { color: var(--soft); font-size: 15.5px; line-height: 1.65; }
.prose { max-width: 760px; }
.prose h2 { margin: 56px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 17px; line-height: 1.75; color: var(--soft); }

/* Pricing */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); margin-bottom: 56px; }
.tier { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.tier + .tier { border-left: 1px solid var(--line); }
.tier .tnow a { font-size: 28px; font-weight: 300; letter-spacing: var(--htrack); color: var(--ink); border-bottom: 1px solid var(--line2); }
.tier .tsub, .tier .thead { color: var(--dimtext); font-size: 14.5px; line-height: 1.6; }
.tier .ticks li { padding: 13px 0 13px 34px; font-size: 15px; }
.tier .ticks li:before { top: 25px; }
.tier .btn, .tier .lk { margin-top: auto; align-self: flex-start; }
.sub { color: var(--dimtext); font-size: 14.5px; margin: 12px 0 22px; }
.sub a { color: var(--ink); border-bottom: 1px solid var(--line2); }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 420px; }
th, td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 300; color: var(--soft); }
th[scope="row"] { color: var(--ink); font-weight: 300; }
td.u { color: var(--dimtext); white-space: nowrap; }

/* The Dojo */
.dojogrid { display: flex; flex-wrap: wrap; gap: 10px; max-width: 980px; }
.dojogrid button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line2); background: transparent; color: var(--soft); font: 400 14px/1 var(--sans); cursor: pointer; transition: color .3s, border-color .3s, background-color .3s; }
.dojogrid button:hover { color: var(--ink); border-color: rgba(233, 237, 244, .5); }
.dojogrid button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dojoout { margin-top: 32px; padding: 34px; border: 1px solid var(--line2); background: rgba(11, 18, 34, .7); max-width: 860px; }
.dojoout .mono { display: block; }
.dojoout .means { color: var(--soft); font-size: 16px; line-height: 1.7; margin: 12px 0 28px; }
.dojoout .reply { color: var(--ink); font-size: clamp(20px, 2vw, 26px); font-weight: 300; letter-spacing: -.02em; line-height: 1.4; margin-top: 12px; }

/* The Floor */
.floor { border: 1px solid var(--line2); background: rgba(7, 12, 24, .92); max-width: 1040px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; border-bottom: 1px solid var(--line); }
.filters button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line2); background: transparent; color: var(--soft); font: 400 13.5px/1 var(--sans); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.frow { display: grid; grid-template-columns: minmax(130px, .9fr) minmax(0, 2fr) auto auto 20px; gap: 18px; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14.5px; }
.frow:hover { background: rgba(233, 237, 244, .025); }
.frow .nm { color: var(--ink); font-weight: 400; }
.frow .last { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .when { color: var(--dimtext); font-size: 12.5px; white-space: nowrap; }
.pillt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line2); padding: 5px 9px; }
.pillt.hot { color: var(--ink); border-color: rgba(233, 237, 244, .6); }
.chev { width: 18px; height: 18px; color: var(--dimtext); transition: transform .3s var(--ease); }
.frow[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fdrop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.fdrop[data-open] { grid-template-rows: 1fr; border-bottom: 1px solid var(--line); }
.fdrop > div { overflow: hidden; }
.fdrop .inner { padding: 6px 18px 24px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.bub { max-width: 86%; padding: 11px 15px; font-size: 14px; line-height: 1.45; border-radius: 16px; }
.bub.out { align-self: flex-start; background: #17213a; color: var(--ink); border-bottom-left-radius: 4px; }
.bub.in { align-self: flex-end; background: #e9edf4; color: #0a1020; border-bottom-right-radius: 4px; }
.handoff { border-left: 1px solid var(--line); padding-left: 24px; }
.handoff .mono { display: block; }
.handoff .say { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink); }

/* The reused pages: booking, contact, help, Terms, Privacy */
.legacy { max-width: 1040px; }
.legacy.doc { padding-top: calc(190px + var(--safe-top)); border-top: 0; max-width: 900px; }
.legacy h1 { font-size: clamp(48px, 6vw, 104px); margin: 0 0 26px; text-wrap: balance; }
.page-book .legacy { border-top: 0; padding-top: 0; }
.legacy .lede { max-width: 640px; margin: 0 0 40px; }
.legacy h2 { margin: 56px 0 14px; }
.legacy p { font-size: 16px; line-height: 1.75; color: var(--soft); margin-bottom: 14px; }
.legacy p.tight { margin-bottom: 8px; }
.legacy .cta { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; }
.legacy .cta a { display: inline-flex; align-items: center; border: 1px solid var(--line2); padding: 16px 24px; font-size: 14px; color: var(--ink); }
.legacy .cta a:hover { background: var(--ink); color: var(--bg); }
.hdcard { background: rgba(11, 18, 34, .7); border: 1px solid var(--line2); padding: clamp(20px, 3vw, 34px); margin-bottom: 18px; }
.fl { display: block; font-size: 11px; letter-spacing: .14em; font-weight: 400; text-transform: uppercase; color: var(--dimtext); margin: 20px 0 10px; }
.fl:first-child { margin-top: 0; }
select, input[type="text"], input[type="email"], textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 0; border: 1px solid var(--line2); background: var(--fd-bg-0); color: var(--ink); font: 300 16px/1.4 var(--sans); }
select:focus, input:focus, textarea:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
textarea { min-height: 150px; resize: vertical; }
.hint { color: var(--dimtext); font-size: 13.5px; }
.actions { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.send { border: 1px solid var(--line2); background: transparent; color: var(--ink); padding: 16px 24px; font: 400 14px/1 var(--sans); cursor: pointer; transition: background-color .4s, color .4s; }
.send:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.send:disabled { opacity: .4; cursor: not-allowed; }
.legal { display: none; border: 1px solid var(--fd-warn); background: var(--fd-warn-soft); color: var(--fd-warn); padding: 14px 16px; margin: 16px 0; font-size: 14px; line-height: 1.6; }
.legal.show { display: block; }
.legal b { display: block; margin-bottom: 4px; }
.ref { display: inline-block; margin-top: 4px; padding: 6px 12px; border: 1px solid var(--line2); font-variant-numeric: tabular-nums; }
.legaldoc { white-space: pre-wrap; font-family: var(--sans); font-size: 15px; line-height: 1.75; color: var(--soft); margin: 18px 0 26px; tab-size: 4; font-variant-numeric: tabular-nums; }
.page-book .bk-grid button.on { background: rgba(233, 237, 244, .08); }
.page-book .bk-grid button.sel, .page-book .bk-list button.sel { background: var(--ink); color: var(--bg); }
.page-book .bk-when { border: 1px solid var(--line2); }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--line); padding: 40px 5vw calc(48px + var(--safe-bottom)); font-size: 13.5px; color: var(--soft); }
.fcols { display: grid; grid-template-columns: 3fr 3fr 3fr 3fr; gap: 4vw; }
footer .wm { color: var(--ink); }
footer .fcols p { margin-top: 10px; line-height: 1.7; }
footer a:hover { color: var(--ink); }
footer .flinks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
footer .flinks + .flinks { margin-top: 0; border-top: 0; padding-top: 14px; }
footer .disclose, footer .operator { color: var(--dimtext); font-size: 12.5px; line-height: 1.7; max-width: 980px; }
footer .disclose { margin-top: 30px; }
footer .operator { margin-top: 8px; }

/* ── NARROW: the mockup's own breakpoints ── */
@media (max-width: 1100px) {
  header#hd { grid-template-columns: 1fr auto; }
  header#hd nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  #map { position: relative; right: auto; top: auto; transform: none; width: 100%; margin-top: 40px; }
  .scene { grid-template-columns: 1fr; }
  .stick { position: relative; height: auto; padding: 8vh 0; }
  .steps .st, .js .steps .st { min-height: auto; padding: 6vh 0 6vh 6vw; opacity: 1; }
  .screen { grid-template-columns: 1fr; }
  .sd, .sr { display: none; }
  .stmt, .dh, .net, .apply { grid-template-columns: 1fr; }
  .net .cols { grid-template-columns: 1fr 1fr; }
  .fcols { grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: 1fr; }
  .tri, .tri + .tri { padding: 32px 0 8px; border-left: 0; }
  .tri + .tri { border-top: 1px solid var(--line); }
  .cards, .tiers { grid-template-columns: 1fr; }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--line); }
  .frow { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 10px; }
  .frow .last { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .frow .when { display: none; }
  .fdrop .inner { grid-template-columns: 1fr; }
  .handoff { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
}
@media (max-width: 640px) {
  .hr .si { display: none; }
  .tick { grid-template-columns: 1fr; }
  .tick > .mono { display: none; }
  .tr { grid-template-columns: 70px 1fr; }
  .tr .r, .tr .go { display: none; }
  .sm2 { padding: 26px 18px; }
  .net .cols { grid-template-columns: 1fr; }
  .pane { inset: 56px 5% 40px; }
  .card { padding: 22px; }
  .phero, .legacy.doc { padding-top: calc(140px + var(--safe-top)); }
  .cards > div, .tier { padding: 24px 20px; }
  .acts { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .js h1 .ln span { transform: none; }
  .js .hero .lede, .js .hero .acts { opacity: 1; }
  .js .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}