/* The product website. One stylesheet, no framework, no web fonts, no build step.
   Warm neutral paper, charcoal ink, one accent. Everything is fluid, so a three-letter product
   name and a twelve-letter one both sit correctly: nothing is centred on the name's width and no
   box is sized to a word. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

:root {
  --bg: #f2efe9;
  --bg-soft: #f7f5f0;
  --ink: #1d1d1f;
  --ink-2: #46464c;
  --muted: #6e6e74;
  --line: rgba(20, 20, 22, .12);
  --hair: rgba(20, 20, 22, .07);
  --panel: rgba(253, 252, 250, .78);
  --panel-solid: #fdfcfa;
  --edge: rgba(255, 255, 255, .7);
  --accent: #8a744d;
  --accent-soft: #b6a079;
  --accent-wash: rgba(182, 160, 121, .16);
  --btn-ink: #1d1d1f;
  --btn-ink-hover: #35353a;
  --btn-text: #ffffff;
  --shadow-s: 0 1px 2px rgba(15, 15, 20, .10), 0 6px 16px rgba(15, 15, 20, .07);
  --shadow-l: 0 8px 20px rgba(15, 15, 20, .06), 0 40px 100px rgba(15, 15, 20, .11);
  --radius: 18px;
  --wrap: 1080px;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100f11;
    --bg-soft: #17161a;
    --ink: #f3f1ed;
    --ink-2: #cbc7c0;
    --muted: #97938c;
    --line: rgba(255, 255, 255, .15);
    --hair: rgba(255, 255, 255, .09);
    --panel: rgba(30, 29, 33, .72);
    --panel-solid: #1c1b1f;
    --edge: rgba(255, 255, 255, .06);
    --accent: #cbaf80;
    --accent-soft: #b6a079;
    --accent-wash: rgba(203, 175, 128, .14);
    --btn-ink: #f3f1ed;
    --btn-ink-hover: #ffffff;
    --btn-text: #141316;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
    --shadow-l: 0 10px 30px rgba(0, 0, 0, .45), 0 40px 100px rgba(0, 0, 0, .5);
  }
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 12% -8%, var(--accent-wash), transparent 60%),
    radial-gradient(900px 640px at 88% 2%, rgba(196, 144, 110, .16), transparent 55%),
    radial-gradient(1000px 800px at 78% 98%, rgba(126, 152, 180, .13), transparent 60%);
}

/* ── layout ─────────────────────────────────────────────────────────────────────────────────── */
/* Longhands on purpose: a `padding` shorthand on .wrap would reset the vertical padding that
   `section` sets, and most sections on this site are `<section class="wrap">`. */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: 22px; padding-right: 22px; }
section { padding-top: 76px; padding-bottom: 76px; }
section.tight { padding-top: 46px; padding-bottom: 46px; }
.hair { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ── type ───────────────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; letter-spacing: -.022em; font-weight: 640; line-height: 1.12; }
h1 { font-size: clamp(34px, 5.6vw, 60px); letter-spacing: -.03em; }
h2 { font-size: clamp(24px, 3.2vw, 34px); }
h3 { font-size: 17px; letter-spacing: -.012em; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.lede { font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-2); max-width: 40em; line-height: 1.5; }
.sub { color: var(--muted); max-width: 46em; margin: 10px 0 30px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.fine { font-size: 13.5px; color: var(--muted); }
.tiny { font-size: 12.5px; color: var(--muted); }
strong, b { font-weight: 640; }
code { font-family: var(--mono); font-size: .92em; background: var(--accent-wash); padding: 2px 6px; border-radius: 6px; word-break: break-word; }

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
}
header.top.stuck { border-bottom-color: var(--hair); }
/* ⚠ Longhands. `.bar` is the same element as `.wrap`, and a `padding` shorthand here resets the
   horizontal padding .wrap sets while outranking it, so below about 1124px the logo, the nav and
   the Start free button sat flush against both window edges while everything under them kept its
   gutter. Invisible on a wide desktop, wrong on every phone. */
header.top .bar { display: flex; align-items: center; gap: 18px; padding-top: 15px; padding-bottom: 15px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
  font-weight: 700; font-size: 15px; letter-spacing: -.01em; flex: 0 0 auto; min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.links { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
nav.links a { color: var(--ink-2); font-size: 14.5px; font-weight: 520; }
nav.links a:hover { color: var(--ink); text-decoration: none; }
nav.links a.here { color: var(--ink); }
@media (max-width: 760px) {
  /* Two rows, never more: the second is one scrollable line rather than a wrapping block, or a
     sticky header eats a third of a phone screen. */
  header.top .bar { flex-wrap: wrap; gap: 8px 16px; padding-top: 11px; padding-bottom: 9px; }
  nav.links {
    width: 100%; margin-left: 0; order: 3; justify-content: flex-start;
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 18px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  nav.links::-webkit-scrollbar { display: none; }
  nav.links a { font-size: 14px; flex: 0 0 auto; }
  .cta-head { margin-left: auto; }
}
/* Hand-placed line breaks are for a wide measure. On a phone the text should just wrap. */
@media (max-width: 700px) { br.wide { display: none; } }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────── */
.btn, .ghost {
  display: inline-block; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border-radius: 12px; padding: 13px 24px; text-align: center; border: 1px solid transparent;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn { background: var(--btn-ink); color: var(--btn-text); box-shadow: var(--shadow-s); }
.btn:hover { background: var(--btn-ink-hover); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.ghost:hover { background: var(--panel-solid); text-decoration: none; }
.btn.sm, .ghost.sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* ── cards, panels ──────────────────────────────────────────────────────────────────────────── */
.card, .panel {
  background: var(--panel); border: 1px solid var(--edge); outline: 1px solid var(--hair);
  border-radius: var(--radius);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.card { padding: 24px; }
.panel { padding: 32px; border-radius: 24px; box-shadow: var(--shadow-l); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--ink-2); }
.card .ico { display: block; font-size: 21px; line-height: 1; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.split { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 24px; } }

/* ── lists ──────────────────────────────────────────────────────────────────────────────────── */
ul.ticks, ul.plain { list-style: none; margin: 14px 0; padding: 0; }
ul.ticks li { position: relative; padding: 5px 0 5px 26px; color: var(--ink-2); font-size: 15px; }
ul.ticks li::before { content: "✓"; position: absolute; left: 2px; top: 5px; color: var(--accent); font-weight: 700; }
ul.plain li { padding: 5px 0; color: var(--ink-2); font-size: 15px; }
ol.steps { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); }
ol.steps li { padding: 4px 0; }

/* ── the day-of-an-agency rail ─────────────────────────────────────────────────────────────── */
.rail { display: grid; gap: 0; }
.rail .step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; padding: 0 0 26px; position: relative; }
.rail .step::before {
  content: ""; position: absolute; left: 16px; top: 30px; bottom: 0; width: 1px; background: var(--line);
}
.rail .step:last-child { padding-bottom: 0; }
.rail .step:last-child::before { display: none; }
.rail .dot {
  width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-solid); border: 1px solid var(--line); font-size: 15px; position: relative; z-index: 1;
}
.rail .step h3 { margin-bottom: 5px; }
.rail .step p { color: var(--ink-2); font-size: 15px; }

/* ── pricing ────────────────────────────────────────────────────────────────────────────────── */
.toggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--panel-solid); border: 1px solid var(--line); }
.toggle button {
  border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--btn-ink); color: var(--btn-text); }
.pricebox { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .pricebox { grid-template-columns: 1fr; } }
.bignum { font-size: clamp(42px, 7vw, 62px); font-weight: 660; letter-spacing: -.04em; line-height: 1; }
.bignum small { font-size: 15px; font-weight: 520; color: var(--muted); letter-spacing: 0; }
.seatrow { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; flex-wrap: wrap; }
.seatrow input[type=range] { flex: 1 1 200px; accent-color: var(--accent); min-width: 160px; }
.seatcount { font-variant-numeric: tabular-nums; font-weight: 640; min-width: 8ch; }
.calc-lines { margin-top: 16px; font-size: 14.5px; color: var(--ink-2); }
.calc-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.calc-lines div:last-child { border-bottom: 0; font-weight: 640; color: var(--ink); padding-top: 12px; }

/* ── tables ─────────────────────────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; border-radius: 14px; border: 1px solid var(--hair); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; background: var(--panel-solid); }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink-2); }
th { font-weight: 640; color: var(--ink); font-size: 13px; letter-spacing: .02em; }
tr:last-child td { border-bottom: 0; }

/* ── faq ────────────────────────────────────────────────────────────────────────────────────── */
details.faq { border-bottom: 1px solid var(--hair); padding: 4px 0; }
details.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px; list-style: none; display: flex; gap: 14px; align-items: baseline; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "+"; color: var(--accent); font-weight: 700; width: 14px; flex: 0 0 14px; }
details.faq[open] summary::before { content: "–"; }
details.faq .body { padding: 0 0 18px 28px; color: var(--ink-2); font-size: 15px; }

/* ── forms ──────────────────────────────────────────────────────────────────────────────────── */
label { display: block; font-size: 12.5px; font-weight: 640; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid);
  padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); outline: none;
  transition: border-color .16s, box-shadow .16s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3.5px var(--accent-wash); }
textarea { min-height: 92px; resize: vertical; }
.field { margin-bottom: 16px; }
.row2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .row2 { grid-template-columns: 1fr; } }
.err { color: #b0563c; font-size: 14px; margin: 10px 0 0; min-height: 1.2em; }
@media (prefers-color-scheme: dark) { .err { color: #e08a6a; } }

/* ── legal pages ────────────────────────────────────────────────────────────────────────────── */
/* A narrow reading column. On the five document pages .doc sits ON the .wrap element itself, so
   narrowing the wrap would re-centre the text at 720 while the header and footer stay centred at
   1080: the first line of the page then starts 180px to the right of the logo above it. The wrap
   keeps its own width and centring; the column is narrowed inside it, flush left with the mark. */
.doc { max-width: 720px; }
.wrap.doc { max-width: var(--wrap); }
.wrap.doc > * { max-width: 720px; }
.doc h2 { margin: 40px 0 10px; font-size: 22px; }
.doc h3 { margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-2); font-size: 15.5px; }
.doc ul, .doc ol { padding-left: 22px; margin: 10px 0 16px; }
.doc li { padding: 3px 0; }
.notice {
  border: 1px solid var(--accent-soft); background: var(--accent-wash);
  border-radius: 14px; padding: 16px 18px; margin: 0 0 26px; font-size: 14.5px; color: var(--ink);
}
.notice b { display: block; margin-bottom: 4px; }

/* ── footer ─────────────────────────────────────────────────────────────────────────────────── */
footer.foot { border-top: 1px solid var(--hair); padding: 44px 0 60px; margin-top: 40px; }
footer.foot .cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
footer.foot h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 700; }
footer.foot a { display: block; color: var(--ink-2); font-size: 14.5px; padding: 4px 0; }
footer.foot a:hover { color: var(--ink); }
footer.foot .base { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* ── the demo picker ────────────────────────────────────────────────────────────────────────── */
.tzbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; font-size: 14px; color: var(--muted); }
.tzbar select { width: auto; max-width: 100%; padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.daystrip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.daystrip button {
  flex: 0 0 auto; min-width: 78px; border: 1px solid var(--line); background: var(--panel-solid);
  border-radius: 14px; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--ink); text-align: center;
}
.daystrip button .dw { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.daystrip button .dd { display: block; font-size: 19px; font-weight: 640; letter-spacing: -.02em; margin-top: 2px; }
.daystrip button .dn { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.daystrip button[aria-pressed="true"] { background: var(--btn-ink); color: var(--btn-text); border-color: var(--btn-ink); }
.daystrip button[aria-pressed="true"] .dw, .daystrip button[aria-pressed="true"] .dn { color: inherit; opacity: .75; }
.daystrip button[disabled] { opacity: .38; cursor: default; }
.slotgrid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin-top: 6px; }
.slotgrid button {
  border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink);
  border-radius: 11px; padding: 11px 8px; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.slotgrid button:hover { border-color: var(--accent-soft); }
.slotgrid button[aria-pressed="true"] { background: var(--btn-ink); color: var(--btn-text); border-color: var(--btn-ink); }
.slotgrid button .alt { display: block; font-size: 11.5px; color: var(--muted); }
.slotgrid button[aria-pressed="true"] .alt { color: inherit; opacity: .75; }
.empty { color: var(--muted); font-size: 15px; padding: 18px 0; }
.picked { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--accent-wash); font-size: 15px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── phone ──────────────────────────────────────────────────────────────────────────────────── */
/* Last in the file on purpose: these override rules of the same specificity that are declared
   further up (.panel's padding, section's rhythm), and a media query does not raise specificity. */
@media (max-width: 640px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  section, section.tight { padding-top: 52px; padding-bottom: 52px; }
  .panel { padding: 24px 18px; border-radius: 20px; }
  .card { padding: 20px; }
  .doc h2 { margin-top: 32px; }
  .grid { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  .btn, .ghost { padding: 13px 20px; }
  .cta { gap: 10px; }
}