/* LucentOps. Tokens come from the logo: a light grey ground, black ink, one electric blue (0059EF) and the
   grey of the mark's pixel tile. Inter throughout, as in the wordmark. */

:root {
  --bg: #E6E6E6;
  --bg-2: #DCDCDC;
  --surface: #F4F4F4;
  --surface-2: #FAFAFA;
  --line: rgba(0, 0, 0, .09);
  --line-2: rgba(0, 0, 0, .17);
  --ink: #0A0A0A;
  --ink-2: #3D3D3D;
  --ink-3: #5A5A5A;
  --blue: #0059EF;
  --blue-08: rgba(0, 89, 239, .08);
  --blue-30: rgba(0, 89, 239, .3);
  --blue-soft: #87A8DD;
  --tile: #C4C6C8;
  --warn: #945700;
  --r: 14px;
  --max: 1200px;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --header-h: 72px;
  --f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue); color: #FFFFFF; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.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; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--blue); color: #FFFFFF; font-weight: 600; border-radius: 8px; }
.skip:focus { top: 12px; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lime { color: var(--blue); }

/* ---------- header ---------- */
/* The nav is invisible over the top of the page and becomes a dark blurred bar once scrolled (site.js toggles
   is-scrolled). It stays in view at every scroll position. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.site-header.is-scrolled {
  background: rgba(230, 230, 230, .86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header[data-open="true"] { background: rgba(230, 230, 230, .97); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand img { width: 36px; height: 36px; }
.wordmark { font: 500 1.45rem/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--ink-2); font-size: .95rem; font-weight: 500; border-radius: 8px; transition: color .2s;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .btn { margin-left: 12px; }
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; cursor: pointer;
  }
  .nav-toggle > span:not(.sr-only) { position: relative; display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: background-color .2s; }
  .nav-toggle > span:not(.sr-only)::before, .nav-toggle > span:not(.sr-only)::after {
    content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s;
  }
  .nav-toggle > span:not(.sr-only)::before { transform: translateY(-6px); }
  .nav-toggle > span:not(.sr-only)::after { transform: translateY(6px); }
  .site-header[data-open="true"] .nav-toggle > span:not(.sr-only) { background: transparent; }
  .site-header[data-open="true"] .nav-toggle > span:not(.sr-only)::before { transform: rotate(45deg); }
  .site-header[data-open="true"] .nav-toggle > span:not(.sr-only)::after { transform: rotate(-45deg); }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--bg); border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .site-header[data-open="true"] .nav { opacity: 1; visibility: visible; transform: none; }
  .nav a:not(.btn) { min-height: 54px; padding: 0; font-size: 1.1rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin: 18px 0 0; justify-content: center; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px; padding: 0 1.3rem;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: transparent;
  color: var(--ink); font: 500 1rem/1 var(--f-body); white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.btn:hover { border-color: var(--ink); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn--primary { border-color: var(--blue); background: var(--blue); color: #FFFFFF; }
.btn--primary:hover { background: #0047C2; border-color: #0047C2; color: #FFFFFF; box-shadow: 0 10px 24px -12px rgba(0, 89, 239, .7); }
.btn--sm { min-height: 44px; padding: 0 1rem; font-size: .95rem; }
.btn--block { width: 100%; justify-content: center; }
.text-link {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  color: var(--ink); font-weight: 500; border-bottom: 1.5px solid var(--blue); padding-bottom: 2px;
}
.text-link svg { width: 15px; height: 15px; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; }
h2 { font: 700 clamp(2rem, 4.4vw, 3.3rem)/1.05 var(--f-body); letter-spacing: -.03em; text-wrap: balance; }
h2 em { font-style: normal; color: var(--blue); }
/* Highlighter sweep, on the Process heading only (em.hl): as the section scrolls in, a blue box wipes in from the
   left behind the words and the words turn white over it. */
h2 em.hl { position: relative; z-index: 0; display: inline-block; color: #FFFFFF; }
h2 em.hl::after { content: ""; position: absolute; z-index: -1; inset: -.02em -.12em; background: var(--blue); transform-origin: left; pointer-events: none; }
.js h2 em.hl { color: var(--blue); transition: color .3s ease .7s; }
.js h2 em.hl::after { transform: scaleX(0); transition: transform .75s cubic-bezier(.2, .7, .2, 1) .35s; }
.js .is-in h2 em.hl { color: #FFFFFF; }
.js .is-in h2 em.hl::after { transform: scaleX(1); }
.section { position: relative; padding-block: clamp(72px, 10vw, 128px); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-lede { margin-top: 18px; max-width: 40rem; color: var(--ink-2); font-size: clamp(1.02rem, 1.5vw, 1.15rem); }

/* ---------- hero ---------- */
/* One screen tall and pulled up under the transparent nav. The ground is the logo's own: light grey at the top,
   deepening toward the foot, with a fine grain. The art is the mark itself, drawn large: the black L and the
   pixel tile, whose blue pixels drift about (site.js) while the L stays put. */
.hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
  margin-top: calc(-1 * var(--header-h));
  min-height: 100vh; min-height: 100svh;
  padding-block: calc(var(--header-h) + clamp(40px, 7vw, 88px)) clamp(56px, 8vw, 96px);
  background:
    radial-gradient(48% 85% at 88% 0%, rgba(0, 89, 239, .13) 0%, rgba(0, 89, 239, .07) 35%, rgba(0, 89, 239, .02) 62%, transparent 82%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 62%, #D2D2D2 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero > .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero h1 { font: 600 clamp(3.2rem, 8.4vw, 6.9rem)/.95 var(--f-display); letter-spacing: -.045em; }
.hero h1 span { display: block; }
.hero-lede { margin-top: 28px; max-width: 35rem; color: var(--ink-2); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* The mark, in the logo's proportions (268 x 268 units: a 78-unit stem, a 168 x 78 foot, a 155-unit tile). */
.hero-mark { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: end; }
.hero-mark .l-stem { position: absolute; left: 0; top: 0; width: 29.1%; height: 100%; background: var(--ink); }
.hero-mark .l-foot { position: absolute; left: 0; bottom: 0; width: 62.7%; height: 29.1%; background: var(--ink); }
.pixels { position: absolute; left: 41.8%; top: 0; width: 57.8%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); background: var(--tile); }
.pixels i { background: transparent; transition: background-color .9s ease; }
.pixels i.t1 { background: #CBCDCE; }
.pixels i.t2 { background: #BABDC0; }
.pixels i.t3 { background: #D6D8D9; }
.pixels i.on { background: var(--blue); }
.pixels i.soft { background: var(--blue-soft); }

@media (max-width: 960px) {
  /* lvh = the full screen with the browser bars collapsed, so the hero runs behind Safari's floating bottom bar;
     the bottom padding keeps the buttons clear of that bar. */
  .hero { justify-content: center; min-height: 100vh; min-height: 100lvh; padding-top: calc(var(--header-h) + 32px); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .hero-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; }
  .hero-grid > div:first-child { display: contents; }
  .hero h1 { grid-column: 1; grid-row: 1; font-size: clamp(2.6rem, 12.4vw, 3.2rem); }
  .hero-mark { grid-column: 2; grid-row: 1; width: min(100%, 34vw, 220px); justify-self: center; align-self: center; }
  .hero-lede, .hero-cta { grid-column: 1 / -1; }
  .hero-cta .btn { flex: 1 1 40%; justify-content: center; }
}

/* ---------- topographic band (the process section) ---------- */
.section--topo { border-block: 1px solid var(--line); background: url("../img/topo.svg") center / cover no-repeat, linear-gradient(180deg, var(--bg-2), var(--bg)); }

/* ---------- cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  position: relative; overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  background: linear-gradient(180deg, #F5F5F5, #F1F1F1);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .3s;
}
.card:hover { border-color: rgba(0, 89, 239, .32); }
.card-ico { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--blue-30); border-radius: 12px; background: var(--blue-08); color: var(--blue); }
.card-ico svg { width: 26px; height: 26px; }
.card h3 { margin: 22px 0 10px; font: 600 1.3rem/1.25 var(--f-body); letter-spacing: -.015em; }
.card p { color: var(--ink-2); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- services (Build / Market / Operate) ---------- */
.section--glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 100% 0%, rgba(0, 89, 239, .08), transparent 70%);
}
.section--glow { isolation: isolate; }
.service { border-color: rgba(0, 89, 239, .26); display: flex; flex-direction: column; }
.service-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.service-word { font: 600 2.4rem/1 var(--f-display); letter-spacing: -.035em; }
.service-word span { color: var(--blue); }
.service > p { margin-top: 14px; }
.checks { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 13px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: .98rem; line-height: 1.5; }
.checks li::before {
  content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 5px;
  border: 1.5px solid rgba(0, 89, 239, .7); background: rgba(0, 89, 239, .08) no-repeat center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%230059EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- admin illustration ---------- */
.mock {
  margin-top: 16px; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 18px; background: #F8F8F8;
  box-shadow: 0 40px 90px -50px rgba(0, 89, 239, .35);
}
.mock-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #ECECEC; }
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: #C8C8C8; }
.mock-url { flex: 1; max-width: 340px; padding: 6px 12px; border-radius: 7px; background: #E4E4E4; color: var(--ink-3); font-size: .8rem; }
.mock-url span { color: var(--ink-2); }
.mock-body { display: grid; grid-template-columns: 210px 1fr; min-height: 380px; }
.mock-side { padding: 16px 12px; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 2px; }
.mock-side b { display: block; padding: 10px 10px 6px; color: var(--ink-3); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.mock-side span { display: block; padding: 7px 10px; border-radius: 7px; color: var(--ink-2); font-size: .85rem; transition: background-color .25s, color .25s; }
.mock-side span.on { background: var(--blue-08); color: var(--blue); box-shadow: inset 2px 0 0 var(--blue); }
.mock-main { position: relative; min-width: 0; min-height: 400px; }
.mock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mock-stat { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #F7F7F7; }
.mock-stat small { color: var(--ink-3); font-size: .75rem; }
.mock-stat svg { width: 100%; height: 34px; margin-top: 8px; }
.mock-stat polyline { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mock-stat--warn polyline { stroke: var(--warn); }
.mock-orders { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mock-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; font-size: .85rem; }
.mock-row + .mock-row { border-top: 1px solid var(--line); }
.mock-row code { font: 500 .8rem var(--f-body); color: var(--ink-3); }
.mock-row .bar { height: 7px; border-radius: 4px; background: #D2D2D2; max-width: 180px; }
.chip { justify-self: end; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: .74rem; white-space: nowrap; }
.chip--lime { border-color: rgba(0, 89, 239, .4); color: var(--blue); }
.chip--yellow { border-color: rgba(154, 91, 0, .4); color: var(--warn); }
.mock-caption { margin-top: 14px; color: var(--ink-3); font-size: .9rem; text-align: center; }

/* ---------- admin demo (the tour admin-demo.js plays inside the mock) ---------- */
.mock { position: relative; pointer-events: none; user-select: none; } /* positioned for the cursor; an illustration, nothing in it responds to a click */
.mock-screen { position: absolute; inset: 0; padding: 20px; display: grid; gap: 14px; align-content: start; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.mock-screen.is-on { opacity: 1; transform: none; }
.mock-cursor {
  position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; pointer-events: none; opacity: 0;
  transform: translate(40px, 40px); transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .3s; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.mock-cursor.is-visible { opacity: 1; }
.mock-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #0A0A0A; stroke-width: 1.2; stroke-linejoin: round; }
.mock-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--blue); background: rgba(0, 89, 239, .18); opacity: 0; transform: scale(.4); }
.mock-cursor.is-click::after { animation: dm-click .4s ease-out; }
@keyframes dm-click { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.1); } }
.dm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dm-h b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.dm-h span { color: var(--ink-3); font-size: .78rem; text-align: right; }
.dm-h em { font-style: normal; color: var(--blue); font-weight: 600; }
.dm-num { display: block; margin-top: 4px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Sparklines wipe in from the left (a clip, not a dash: a dashed stroke under preserveAspectRatio=none draws with gaps). */
.dm-spark { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s ease-out .1s; }
.is-drawn .dm-spark { clip-path: inset(0); }
.dm-in { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i, 0) * 120ms); }
.is-live .dm-in { opacity: 1; transform: none; }
.dm-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .82rem; }
.dm-row { display: grid; grid-template-columns: 62px 1.1fr .7fr auto; gap: 12px; align-items: center; padding: 9px 14px; min-height: 42px; color: var(--ink-2); }
.dm-row + .dm-row { border-top: 1px solid var(--line); }
.dm-row--head { min-height: 0; padding: 7px 14px; background: #ECECEC; color: var(--ink-3); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.dm-row code { font: 500 .8rem var(--f-body); color: var(--ink-3); }
.dm-row .amt { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cell-end { display: flex; align-items: center; gap: 8px; justify-self: end; }
.dm-row.is-hidden { display: none; }
.dm-row--new { background: var(--blue-08); animation: dm-slide .45s ease-out; }
@keyframes dm-slide { from { opacity: 0; transform: translateY(-8px); } }
.dm-btn { padding: 4px 10px; border-radius: 7px; border: 1px solid rgba(0, 89, 239, .5); background: transparent; color: var(--blue); font: 600 .74rem var(--f-body); white-space: nowrap; cursor: default; transition: border-color .25s, color .25s; }
.dm-btn.is-busy { border-style: dashed; color: var(--ink-2); }
.dm-btn.is-done { border-color: var(--line-2); color: var(--ink-2); font-weight: 500; }
.dm-toast {
  position: absolute; right: 16px; bottom: 16px; max-width: 320px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(0, 89, 239, .35);
  background: #F5F5F5; color: var(--ink-2); font-size: .78rem; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none;
}
.dm-toast.is-on { opacity: 1; transform: none; }
.dm-toast b { color: var(--blue); font-weight: 600; }
.dm-list { display: grid; gap: 8px; font-size: .82rem; }
.dm-item { display: grid; grid-template-columns: 1.3fr 1fr 48px auto; gap: 12px; align-items: center; min-height: 40px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: #F7F7F7; color: var(--ink-2); }
.dm-item .name { color: var(--ink); font-weight: 500; }
.dm-bar { height: 7px; border-radius: 4px; background: #D2D2D2; overflow: hidden; }
.dm-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width 1s cubic-bezier(.2, .7, .2, 1); }
.dm-item.is-low .dm-bar i { background: var(--warn); }
.dm-item .n { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-item.is-low .n { color: var(--warn); }
.dm-list--days .dm-item { grid-template-columns: 1.3fr 1fr 64px auto; }
.dm-item .chip { opacity: 0; transition: opacity .3s; }
.dm-item .chip.is-on { opacity: 1; }
.dm-note { color: var(--ink-3); font-size: .78rem; }
.dm-form { display: grid; gap: 10px; font-size: .82rem; }
.dm-form label { display: grid; gap: 4px; color: var(--ink-3); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.dm-field { min-height: 36px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #FAFAFA; color: var(--ink); font-size: .85rem; letter-spacing: 0; text-transform: none; line-height: 1.45; }
.dm-field--tall { min-height: 56px; }
.dm-field .flag { color: var(--warn); text-decoration: underline wavy rgba(154, 91, 0, .8); text-underline-offset: 3px; }
.dm-field .flag.is-out { color: var(--ink-3); text-decoration: line-through; }
.dm-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--blue); animation: dm-caret 1s steps(1, end) infinite; }
@keyframes dm-caret { 50% { opacity: 0; } }
.dm-check { display: flex; align-items: center; gap: 8px; min-height: 22px; color: var(--ink-2); font-size: .8rem; }
.dm-check.is-ok { color: var(--blue); }
.dm-check.is-bad { color: var(--warn); }
.dm-check.is-ok .dm-spin, .dm-check.is-bad .dm-spin { display: none; }
.dm-spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--blue); animation: dm-spin .8s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-publish { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .82rem; }
.dm-toggle { position: relative; flex: none; width: 36px; height: 20px; border-radius: 99px; background: #C8C8C8; transition: background-color .3s; }
.dm-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: transform .3s, background-color .3s; }
.dm-toggle.is-on { background: rgba(0, 89, 239, .35); }
.dm-toggle.is-on::after { transform: translateX(16px); background: var(--blue); }
.dm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dm-card { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #F7F7F7; color: var(--ink-2); font-size: .8rem; }
.dm-card code { font: 700 .95rem var(--f-body); color: var(--ink); letter-spacing: .04em; }
.dm-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dm-card small { color: var(--ink-3); font-size: .74rem; }
.dm-card small b { color: var(--ink); font-weight: 600; }
.dm-card > b { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.dm-match { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 8px; align-items: center; }
.dm-link { width: 100%; height: 20px; }
.dm-link { clip-path: inset(0 100% 0 0); transition: clip-path .7s ease-out; }
.dm-link path { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.is-linked .dm-link { clip-path: inset(0); }
.dm-status { color: var(--ink-3); font-size: .82rem; }
.dm-status.is-ok { color: var(--blue); font-weight: 600; }
.dm-fin { display: grid; grid-template-columns: 1.2fr auto 1fr; gap: 20px; align-items: center; }
.dm-pl { display: grid; gap: 2px; font-size: .82rem; color: var(--ink-2); }
.dm-pl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dm-pl div b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.dm-pl div.total { color: var(--ink); font-weight: 600; }
.dm-pl div.total b { color: var(--blue); font-weight: 700; }
.dm-ring { --p: 0; position: relative; width: 100px; height: 100px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--blue) calc(var(--p) * 1%), #D2D2D2 0); }
.dm-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #F7F7F7; }
.dm-ring b, .dm-ring small { position: relative; }
.dm-ring b { font-size: 1.15rem; color: var(--ink); }
.dm-ring small { color: var(--ink-3); font-size: .7rem; }
.dm-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; height: 96px; }
.dm-cols i { display: block; height: 4%; border-radius: 3px 3px 0 0; background: rgba(0, 89, 239, .35); transition: height .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.dm-cols i:last-child { background: var(--blue); }
.is-live .dm-cols i { height: var(--h); }
.dm-funnel { display: grid; gap: 8px; font-size: .82rem; color: var(--ink-2); }
.dm-funnel > div { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; }
.dm-funnel .dm-bar { height: 14px; }
.dm-funnel .n { text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); font-size: .8rem; }
.dm-live b { color: var(--ink); }
.dm-live code { font: 500 .78rem var(--f-body); color: var(--ink-3); }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(0, 89, 239, .6); animation: dm-pulse 1.6s ease-out infinite; }
@keyframes dm-pulse { to { box-shadow: 0 0 0 8px rgba(0, 89, 239, 0); } }
@media (max-width: 700px) {
  .mock-main { min-height: 430px; }
  .mock-screen { padding: 16px; }
  .dm-row { grid-template-columns: 56px 1fr auto; }
  .dm-row > :nth-child(3) { display: none; }
  .dm-item, .dm-list--days .dm-item { grid-template-columns: 1fr 70px 52px; }
  .dm-item .chip { display: none; }
  .dm-cards { grid-template-columns: 1fr; }
  .dm-match { grid-template-columns: 1fr; }
  .dm-link { display: none; }
  .dm-fin { grid-template-columns: 1fr auto; }
  .dm-cols { grid-column: 1 / -1; height: 70px; }
  .dm-funnel > div { grid-template-columns: 84px 1fr 52px; }
}
@media (max-width: 720px) {
  .mock-body { grid-template-columns: 1fr; min-height: 0; }
  .mock-side { display: none; }
  .mock-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-stat:nth-child(3) { display: none; }
  .mock-row { grid-template-columns: 56px 1fr; }
  .mock-row .bar { display: none; }
  .mock-row .chip { justify-self: start; }
}

/* ---------- photo bands ---------- */
/* Full-bleed photographs with a dark gradient over them: the one place the page goes dark, so it carries its own
   light ink and a lighter blue. The image sits
   on a negative z-index inside an isolated stacking context, the gradient between it and the words. */
.photo-band { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: clamp(300px, 48vh, 560px); background: #0A0A0A; }
.photo-band, .cta-band { --ink: #F2F2F2; --ink-2: #CFCFCF; --line-2: rgba(255, 255, 255, .22); --blue: #6F9DFF; color: var(--ink); }
.cta-band .btn--primary { --blue: #0059EF; }
.photo-band-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 90% at 18% 88%, rgba(10, 10, 10, .9), transparent 72%), linear-gradient(180deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .58) 45%, rgba(10, 10, 10, .74) 100%);
}
.photo-band-inner { padding-block: clamp(32px, 5vw, 56px); }
.photo-band-line { max-width: 22ch; font: 700 clamp(1.7rem, 3.6vw, 2.8rem)/1.1 var(--f-body); letter-spacing: -.03em; color: #fff; text-wrap: balance; text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 8px 32px rgba(0, 0, 0, .7); }
.photo-band-line em { font-style: normal; color: var(--blue); }
/* The closing call to action is a full-width photo band: the section carries the photograph edge to edge and the
   card inside loses its frame, so the heading and button sit straight on the picture. */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: #0A0A0A; }
.cta-band-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 75% at 50% 50%, rgba(10, 10, 10, .85), transparent 78%), linear-gradient(180deg, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .7) 50%, rgba(10, 10, 10, .88) 100%); }
.cta.cta--band h2, .cta.cta--band .section-lede { text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 8px 32px rgba(0, 0, 0, .7); }
.cta.cta--band .section-lede { color: var(--ink); }
.cta.cta--band, .cta.cta--band:hover { border: 0; background: none; box-shadow: none; padding-inline: 0; }
.cta.cta--band::after { display: none; }

/* ---------- process ---------- */
/* The timeline fills like a progress bar once it scrolls into view. The five segments fill one after another
   at one constant speed (each duration is the segment's share of the 14 grid units, 4.9 s in all, starting
   .3 s after the reveal), and the moment the fill reaches a segment its label lights up, with a short glow,
   as does the number on the matching step card below. Before that the labels sit dim. Without JavaScript
   nothing is dim and nothing moves. The sequence, from the reveal: .3 s · .65 s · 1.35 s · 3.45 s · 4.5 s. */
.timeline { margin-bottom: clamp(36px, 5vw, 56px); }
.timeline-track { display: grid; grid-template-columns: 1fr 2fr 6fr 3fr 2fr; gap: 4px; }
.timeline-seg { height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(0, 89, 239, .45), var(--blue)); transform-origin: left; transition: transform linear; }
.timeline-seg:nth-child(1) { transition-duration: .35s; transition-delay: .3s; }
.timeline-seg:nth-child(2) { transition-duration: .7s; transition-delay: .65s; }
.timeline-seg:nth-child(3) { transition-duration: 2.1s; transition-delay: 1.35s; }
.timeline-seg:nth-child(4) { transition-duration: 1.05s; transition-delay: 3.45s; }
.timeline-seg:nth-child(5) { transition-duration: .7s; transition-delay: 4.5s; }
.js .timeline:not(.is-in) .timeline-seg { transform: scaleX(0); transition: none; }
.timeline-labels { display: grid; grid-template-columns: 1fr 2fr 6fr 3fr 2fr; gap: 4px; margin-top: 14px; }
.timeline-labels div { min-width: 0; padding-right: 8px; }
.timeline-labels b { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); white-space: nowrap; transition: color .35s ease; }
.timeline-labels span { display: block; margin-top: 2px; color: var(--ink-2); font-size: .9rem; line-height: 1.35; transition: color .35s ease; }
.js .timeline:not(.is-in) .timeline-labels b, .js .timeline:not(.is-in) .timeline-labels span { color: var(--ink-3); transition: none; }
.js .timeline.is-in .timeline-labels b { animation: tl-arrive .8s ease-out both; }
.js .timeline.is-in .timeline-labels div:nth-child(1) > * { transition-delay: .3s; animation-delay: .3s; }
.js .timeline.is-in .timeline-labels div:nth-child(2) > * { transition-delay: .65s; animation-delay: .65s; }
.js .timeline.is-in .timeline-labels div:nth-child(3) > * { transition-delay: 1.35s; animation-delay: 1.35s; }
.js .timeline.is-in .timeline-labels div:nth-child(4) > * { transition-delay: 3.45s; animation-delay: 3.45s; }
.js .timeline.is-in .timeline-labels div:nth-child(5) > * { transition-delay: 4.5s; animation-delay: 4.5s; }
@keyframes tl-arrive { 0% { text-shadow: 0 0 0 rgba(0, 89, 239, 0); } 30% { text-shadow: 0 0 14px rgba(0, 89, 239, .9); } 100% { text-shadow: 0 0 0 rgba(0, 89, 239, 0); } }
/* Step cards: the outlined number fills lime on arrival. Card 1 (the optional call) has no segment and lights
   the moment the timeline appears; segment N then lights card N+1. */
.timeline.is-in ~ .steps li .step-num { color: rgba(0, 89, 239, .42); text-shadow: 0 0 10px rgba(0, 89, 239, .12); }
.timeline.is-in ~ .steps li:nth-child(1) .step-num { transition-delay: .05s; }
.timeline.is-in ~ .steps li:nth-child(2) .step-num { transition-delay: .3s; }
.timeline.is-in ~ .steps li:nth-child(3) .step-num { transition-delay: .65s; }
.timeline.is-in ~ .steps li:nth-child(4) .step-num { transition-delay: 1.35s; }
.timeline.is-in ~ .steps li:nth-child(5) .step-num { transition-delay: 3.45s; }
.timeline.is-in ~ .steps li:nth-child(6) .step-num { transition-delay: 4.5s; }
.timeline-note { margin-top: 18px; color: var(--ink-3); font-size: .9rem; }
@media (max-width: 860px) {
  /* Narrow screens: no bar, a vertical line beside the stacked labels fills top to bottom instead, and the
     labels are evenly spaced, so the arrival times are even too: .3 s · 1.3 s · 2.25 s · 3.25 s · 4.2 s. */
  .timeline-track { display: none; }
  .timeline-labels { position: relative; grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--line-2); }
  .timeline-labels::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--blue); transform-origin: top; }
  .js .timeline:not(.is-in) .timeline-labels::before { transform: scaleY(0); }
  .js .timeline.is-in .timeline-labels::before { transform: scaleY(1); transition: transform 4.9s linear .3s; }
  .timeline-labels div { display: flex; gap: 14px; align-items: baseline; padding: 8px 0 8px 16px; }
  .timeline-labels b { min-width: 86px; }
  .js .timeline.is-in .timeline-labels div:nth-child(1) > * { transition-delay: .3s; animation-delay: .3s; }
  .js .timeline.is-in .timeline-labels div:nth-child(2) > * { transition-delay: 1.3s; animation-delay: 1.3s; }
  .js .timeline.is-in .timeline-labels div:nth-child(3) > * { transition-delay: 2.25s; animation-delay: 2.25s; }
  .js .timeline.is-in .timeline-labels div:nth-child(4) > * { transition-delay: 3.25s; animation-delay: 3.25s; }
  .js .timeline.is-in .timeline-labels div:nth-child(5) > * { transition-delay: 4.2s; animation-delay: 4.2s; }
  .timeline.is-in ~ .steps li:nth-child(2) .step-num { transition-delay: .3s; }
  .timeline.is-in ~ .steps li:nth-child(3) .step-num { transition-delay: 1.3s; }
  .timeline.is-in ~ .steps li:nth-child(4) .step-num { transition-delay: 2.25s; }
  .timeline.is-in ~ .steps li:nth-child(5) .step-num { transition-delay: 3.25s; }
  .timeline.is-in ~ .steps li:nth-child(6) .step-num { transition-delay: 4.2s; }
}
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.step-num { font: 600 2.8rem/1 var(--f-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px var(--blue); transition: color .4s ease, text-shadow .4s ease; }
.step-when { color: var(--ink-3); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.step-when--yellow { color: var(--warn); }
.steps .card h3 { margin-top: 18px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; }
.price-card {
  padding: clamp(28px, 4.5vw, 52px);
  border-color: rgba(0, 89, 239, .45);
  background: radial-gradient(90% 80% at 100% 0%, rgba(0, 89, 239, .13), transparent 60%), linear-gradient(180deg, #F5F5F5, #EFEFEF);
  box-shadow: 0 40px 100px -60px rgba(0, 89, 239, .5);
}
.price-card:hover { border-color: rgba(0, 89, 239, .45); }
/* The build price leads with its two halves, not the total: the total sits in a sentence underneath. */
.price-h { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.price-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px; }
.price-lead strong { font: 600 clamp(2.4rem, 5vw, 3.4rem)/1 var(--f-display); letter-spacing: -.035em; color: var(--blue); white-space: nowrap; }
.price-lead span { color: var(--ink); font-size: 1.1rem; font-weight: 500; }
.price-sub { margin-top: 14px; color: var(--ink-2); font-size: 1.02rem; }
.price-card .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.price-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.terms { display: flex; flex-direction: column; }
.terms h3 { margin-top: 0; }
.term { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.term span { color: var(--ink-2); }
.term strong { font: 600 1.7rem/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.term .badge { display: inline-block; margin-right: 10px; padding: 3px 8px; border: 1px solid rgba(154, 91, 0, .45); border-radius: 6px; color: var(--warn); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }
.terms-intro { margin: 6px 0 4px; color: var(--ink-2); }
.terms-note { margin-top: auto; padding-top: 22px; color: var(--ink-2); }
.term small { display: block; margin-top: 3px; color: var(--ink-3); font-size: .82rem; line-height: 1.35; }
.term strong em { font-style: normal; font: 500 .8rem var(--f-body); letter-spacing: 0; color: var(--ink-2); margin-left: 2px; }
.terms-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.terms-sub span { color: var(--ink-3); letter-spacing: .04em; text-transform: none; font-weight: 500; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .price-card .checks { grid-template-columns: 1fr; } .price-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem); font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.plus { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 8px; transition: border-color .2s, transform .25s; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--blue); transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s; }
.faq details[open] .plus { border-color: var(--blue); }
.faq details[open] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details p { padding: 0 48px 24px 0; color: var(--ink-2); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .section-head { position: static; } .faq details p { padding-right: 0; } }

/* ---------- CTA ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(32px, 6vw, 72px);
  border: 1px solid var(--line); border-radius: 22px;
  background: radial-gradient(55% 90% at 0% 100%, rgba(0, 89, 239, .2), transparent 65%), #F1F1F1;
}
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(0, 0, 0, .1) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.cta h2 { max-width: 16ch; }
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 5vw, 48px); }
.route {
  display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 24px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface-2);
  transition: border-color .2s, background-color .2s;
}
.route:hover { border-color: var(--ink); }
.route-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); }
.route-top svg { width: 24px; height: 24px; }
.route-top .arrow { width: 18px; height: 18px; transition: transform .2s; }
.route:hover .arrow { transform: translate(2px, -2px); }
.route strong { margin-top: 14px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.route span { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.route--primary { border-color: var(--blue); box-shadow: 0 0 30px -12px rgba(0, 89, 239, .55); }
.route--primary .route-top { color: var(--blue); }
.route--primary:hover { background: rgba(0, 89, 239, .06); border-color: var(--blue); }
@media (max-width: 860px) { .routes { grid-template-columns: 1fr; } }

/* One route only: a single Start now button, centred. */
.cta--single { text-align: center; }
.cta--single h2 { max-width: none; }
.cta--single .section-lede { margin-inline: auto; max-width: 42rem; }
.cta--single .hero-cta { justify-content: center; }
.cta--single .btn--lg { margin-top: 0; padding-inline: 32px; }

/* ---------- booking page (the site's own calendar: /book, /booking/<token>) ---------- */
.book-wrap { max-width: calc(940px + 2 * var(--gutter)); }
.picker { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0; padding: 0; overflow: hidden; }
.picker:hover { border-color: var(--line); }
.picker-cal { padding: clamp(20px, 3vw, 32px); border-right: 1px solid var(--line); }
.picker-times { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; min-height: 440px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cal-title { font: 600 1.05rem/1.2 var(--f-body); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; cursor: pointer; }
.cal-nav button:hover { border-color: var(--ink); }
.cal-nav button[disabled] { opacity: .35; cursor: not-allowed; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { padding: 6px 0; text-align: center; color: var(--ink-3); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cal-day { aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-3); font: 500 .95rem var(--f-body); cursor: default; }
.cal-day.has-slots { color: var(--ink); background: var(--blue-08); border-color: rgba(0, 89, 239, .25); cursor: pointer; }
.cal-day.has-slots:hover { border-color: var(--blue); }
.cal-day.is-selected { background: var(--blue); color: #FFFFFF; border-color: var(--blue); font-weight: 700; }
.cal-day.is-today:not(.is-selected) { text-decoration: underline; text-underline-offset: 4px; }
.cal-day.is-pad { visibility: hidden; }
.times-title { font: 600 1.05rem/1.2 var(--f-body); }
.times-sub { color: var(--ink-2); font-size: .9rem; }
.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.slot { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; color: var(--ink); font: 500 .95rem var(--f-body); cursor: pointer; transition: border-color .15s, background-color .15s; }
.slot:hover { border-color: var(--blue); }
.slot.is-selected { background: var(--blue); color: #FFFFFF; border-color: var(--blue); font-weight: 700; }
.tz-row { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.tz-row .field-label { font-size: .82rem; color: var(--ink-3); }
.tz-row select { min-height: 44px; padding: 8px 40px 8px 12px; font-size: .92rem; }
.picker-empty { color: var(--ink-2); }
.picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(0, 89, 239, .35); border-radius: 12px; background: var(--blue-08); }
.picked strong { font-weight: 600; }
.change-btn { background: none; border: 0; padding: 0; min-height: 36px; color: var(--ink-2); font: 500 .9rem var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.change-btn:hover { color: var(--blue); }
.book-form { margin-top: 16px; }
.book-form[hidden], .book-done[hidden], .picker[hidden], .picked[hidden], .book-actions[hidden] { display: none; }
.kv-list { display: grid; margin: 20px 0; }
.kv-list div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv-list span { color: var(--ink-3); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.kv-list strong { font-weight: 500; overflow-wrap: anywhere; }
.book-done h2 { margin: 0 0 8px; font: 600 clamp(2.2rem, 5vw, 3.4rem)/.95 var(--f-display); letter-spacing: -.03em; }
.book-done p { color: var(--ink-2); }
.book-done .hero-cta { margin-top: 20px; }
.book-actions { margin-top: 18px; }
@media (max-width: 860px) {
  .picker { grid-template-columns: 1fr; }
  .picker-cal { border-right: 0; border-bottom: 1px solid var(--line); }
  .picker-times { min-height: 0; }
  .kv-list div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- start page ---------- */
.page-hero { position: relative; isolation: isolate; padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px); }
.page-hero::before, .section--lit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 85% at 88% 0%, rgba(0, 89, 239, .13) 0%, rgba(0, 89, 239, .07) 35%, rgba(0, 89, 239, .02) 62%, transparent 82%);
}
.page-hero::before { top: calc(-1 * (var(--header-h) + env(safe-area-inset-top))); }
.section--lit { isolation: isolate; }
/* The FAQ glow sits inside the section and fades out before any edge, so the section above never slices it. */
.section--lit::before { background: radial-gradient(circle 320px at 82% 330px, rgba(0, 89, 239, .12) 0%, rgba(0, 89, 239, .06) 38%, rgba(0, 89, 239, .02) 68%, transparent 100%); }
.page-hero h1 { font: 600 clamp(3rem, 8vw, 6rem)/.9 var(--f-display); letter-spacing: -.035em; }
.page-hero p { margin-top: 22px; max-width: 38rem; color: var(--ink-2); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.page-hero--center { text-align: center; }
.page-hero--center p, .page-hero--center .hero-cta { margin-inline: auto; justify-content: center; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.fine { margin-top: 16px; color: var(--ink-3); font-size: .9rem; }
.fine .text-link, .price-note .text-link, .terms-note .text-link, .section-lede .text-link { min-height: 0; }

/* ---------- forms ---------- */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; align-items: start; }
.form-card:hover, .summary-card:hover { border-color: var(--line); }
.summary-card { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 4px; }
.summary-card .route { margin-top: 10px; }
.summary-card .route strong { margin-top: 6px; font-size: 1.1rem; }
.summary-h { margin: 22px 0 6px; font-size: 1rem; font-weight: 600; }
.mini-steps { margin: 0; padding-left: 1.2rem; color: var(--ink-2); display: grid; gap: 8px; font-size: .95rem; }
.mini-steps li::marker { color: var(--blue); font-weight: 600; }
.step-head--gap { margin-top: 34px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field-label { font-size: .92rem; font-weight: 500; color: var(--ink); }
.field-label em, .req { font-style: normal; font-size: .75rem; color: var(--ink-3); font-weight: 500; margin-left: 6px; letter-spacing: .02em; }
.field-hint { font-size: .82rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 16px/1.4 var(--f-body); color: var(--ink);
  background: #F8F8F8; border: 1px solid var(--line-2); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #F8F8F8 no-repeat right 14px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235C5C5C' stroke-width='1.6'/%3E%3C/svg%3E"); }
.field input::placeholder, .field textarea::placeholder { color: #7A7A7A; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 89, 239, .15); }
[aria-invalid="true"] { border-color: #D92D20 !important; box-shadow: 0 0 0 3px rgba(217, 45, 32, .15) !important; }
.methods { border: 0; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.method { display: flex; gap: 14px; align-items: flex-start; padding: 16px; min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.method[hidden] { display: none; }
.method:has(input:checked) { border-color: var(--blue); background: var(--blue-08); }
.method input { accent-color: #0059EF; width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.method-body { display: flex; flex-direction: column; gap: 2px; }
.method-body span { color: var(--ink-2); font-size: .9rem; }
.consents { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 10px; }
.consents .text-link { min-height: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { margin-top: 14px; min-height: 0; }
.form-error { margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(217, 45, 32, .45); border-radius: 10px; background: rgba(217, 45, 32, .08); color: #B42318; }
.btn--lg { min-height: 54px; font-size: 1.05rem; margin-top: 20px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.notice { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--ink); }
.notice--warn { border-color: rgba(154, 91, 0, .45); background: rgba(154, 91, 0, .06); }
.notice--info { border-color: rgba(0, 89, 239, .35); background: var(--blue-08); }
.notice[hidden] { display: none; }
.sent h2 { margin: 0 0 10px; font-size: 1.8rem; }
.sent p { color: var(--ink-2); }
.status-card { text-align: left; }
.status-card:hover { border-color: var(--line); }
.status-title { margin: 0 0 12px; font: 600 clamp(2.4rem, 6vw, 4rem)/.95 var(--f-display); letter-spacing: -.03em; }
.status-card p { color: var(--ink-2); margin-top: 10px; }
.status-card .hero-cta { margin-top: 26px; }
.terms-block { margin: 18px 0; border-top: 1px solid var(--line); }
.wire { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); white-space: normal; font-family: ui-monospace, Consolas, monospace; font-size: .92rem; }
.copy { margin-left: 8px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: transparent; color: var(--ink-2); font: 500 .75rem var(--f-body); letter-spacing: 0; cursor: pointer; vertical-align: middle; }
.copy:hover { border-color: var(--blue); color: var(--blue); }
.cal-card { min-height: 640px; padding: 0; overflow: hidden; }
.cal-card:hover { border-color: var(--line); }
.cal-fallback { padding: clamp(28px, 5vw, 56px); }
.cal-fallback h2 { font-size: 1.6rem; margin: 0 0 10px; }
.cal-fallback p { color: var(--ink-2); margin-bottom: 22px; }
.cal-card:has(.cal-fallback:not([hidden])) { min-height: 0; }
.price-note { margin-top: 22px; color: var(--ink-2); font-size: .92rem; }
.mock-figure { margin: 0; }
.bar--70 { width: 70%; } .bar--52 { width: 52%; } .bar--84 { width: 84%; } .bar--61 { width: 61%; }
.section--flush-top { padding-top: 0; }
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .summary-card { position: static; }
}
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }

/* ---------- legal pages ---------- */
.legal-wrap { max-width: 820px; padding-block: clamp(40px, 7vw, 88px) 0; }
.legal-doc { color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }
.legal-doc h1 { font: 600 clamp(2.4rem, 6vw, 4rem)/.95 var(--f-display); letter-spacing: -.03em; color: var(--ink); margin: 0 0 14px; }
.legal-doc .legal-meta { color: var(--ink-3); font-size: .9rem; margin-bottom: 36px; }
.legal-doc h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--ink); margin: 44px 0 12px; letter-spacing: -.015em; }
.legal-doc h3 { font-size: 1.1rem; color: var(--ink); margin: 28px 0 8px; }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { padding-left: 1.3rem; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc strong { color: var(--ink); }
.legal-doc a { color: var(--ink); border-bottom: 1px solid var(--blue); }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: .95rem; }
.legal-doc th, .legal-doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.legal-doc th { color: var(--ink); font-weight: 600; }
.legal-doc aside { margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--blue-08); border-radius: 0 10px 10px 0; }
.legal-doc mark, [data-decide] { background: rgba(154, 91, 0, .18); color: inherit; outline: 1px dashed rgba(154, 91, 0, .6); border-radius: 3px; }
.tick { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; line-height: 1.45; }
.tick input {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--line-2); border-radius: 5px; background: transparent; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.tick input:checked {
  border-color: var(--blue); background: rgba(0, 89, 239, .1) no-repeat center / 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%230059EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tick input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tick input:checked + span { color: var(--ink-2); }
.progress { display: flex; align-items: center; gap: 14px; margin-top: 26px; color: var(--ink-2); font-size: .9rem; }
.progress-bar { flex: 1; height: 8px; border-radius: 99px; background: #D2D2D2; overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .3s; }

/* ---------- footer ---------- */
main:has(> .cta-band:last-child) + .site-footer { margin-top: 0; }
.site-footer { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0 calc(28px + env(safe-area-inset-bottom)); margin-top: clamp(72px, 10vw, 120px); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid p { margin-top: 14px; max-width: 22rem; color: var(--ink-2); }
.footer-h { margin: 0 0 8px; color: var(--ink-3); font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.legal-line a { color: var(--ink-2); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); transition: color .2s; }
.footer-links a:hover { color: var(--blue); }
.legal-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .875rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pixels i { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js h2 em.hl::after { transform: scaleX(1); transition: none; }
  .js .timeline:not(.is-in) .timeline-seg { transform: none; }
  .js .timeline:not(.is-in) .timeline-labels::before { transform: none; }
  .js .timeline:not(.is-in) .timeline-labels b { color: var(--blue); }
  .js .timeline:not(.is-in) .timeline-labels span { color: var(--ink-2); }
  .timeline-seg, .timeline-labels::before, .timeline-labels b, .timeline-labels span, .step-num { transition: none !important; animation: none !important; }
  .mock-screen, .mock-screen *, .mock-screen *::after, .mock-cursor { transition: none !important; animation: none !important; }
  .dm-spark, .dm-link { clip-path: none; }
}

/* ---------- phones and tablets: swipe rows and a shorter pricing section ---------- */
@media (max-width: 960px) {
  /* Build / Market / Operate and the six steps become one swipeable row; the next card peeks in from the edge. */
  .hscroll {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(84%, 420px); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scrollbar-width: none;
  }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll > * { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .price-card { padding: 24px 20px; }
  .price-sub, .price-note { font-size: .92rem; }
  .price-card .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 9px; margin-top: 16px; padding-top: 16px; }
  .price-card .checks li { grid-template-columns: 16px 1fr; gap: 8px; font-size: .88rem; line-height: 1.35; }
  .price-card .checks li::before { width: 16px; height: 16px; margin-top: 1px; background-size: 12px; }
  .price-actions { margin-top: 20px; }
  .terms { padding: 24px 20px; }
  .term { padding: 12px 0; }
  .term strong { font-size: 1.45rem; }
  .terms-note { padding-top: 14px; font-size: .92rem; }
}

/* ---------- contact page on phones and tablets: the three routes stay beside the form ---------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(96px, 30%); gap: 10px; }
  .contact-grid .form-card { padding: 20px 14px; }
  .contact-grid .summary-card { position: sticky; top: calc(var(--header-h) + 12px); padding: 8px; gap: 8px; }
  .contact-grid .summary-card .route { margin-top: 0; padding: 14px 8px; gap: 6px; align-items: center; text-align: center; }
  .contact-grid .route-top { justify-content: center; }
  .contact-grid .route strong, .contact-grid .summary-card .route strong { margin-top: 0; font-size: .85rem; line-height: 1.2; }
  .contact-grid .route > span:not(.route-top) { display: none; }
}

/* Phones and tablets with a touchscreen: size the hero to the physical screen (site.js sets --screen-h), so it runs
   behind Safari's floating bottom bar; the padding keeps the text centred in the part above that bar. */
@media (max-width: 960px) and (pointer: coarse) {
  .hero { min-height: max(100lvh, var(--screen-h, 0px)); padding-bottom: calc(40px + max(0px, var(--screen-h, 100svh) - 100svh) + env(safe-area-inset-bottom)); }
}