/* Jost, the geometric sans the Sentira wordmark is drawn in (SIL Open Font License 1.1).
   Self-hosted: no third-party request leaves a visitor's browser, so the site stays GDPR-clean.
   One variable file per subset covers every weight we use. */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The product website. One stylesheet, no framework, no build step, one self-hosted web font.
   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: #7a5738;
  --accent-soft: #a87f4f;
  --accent-wash: rgba(168, 127, 79, .16);
  --walnut: #2d1e12;
  --ink-warm: #241a12;
  --ink-warm-2: #3f3126;
  --btn-ink: #2d1e12;
  --btn-ink-hover: #43301e;
  --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;
  /* The Sentira wordmark: geometric, light, widely tracked, as drawn on the brand board.
     Jost is the self-hosted match; the rest are the closest faces already on a visitor's machine. */
  --brand: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', 'Trebuchet MS', var(--ui);
  --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;
    --ink-warm: #f5efe6;        /* wordmark: 14.2:1 on --bg */
    --ink-warm-2: #c9bdb0;      /* nav:       9.8:1 on --bg */
    --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: 26px; padding-top: 13px; padding-bottom: 13px; }
.brand {
  display: inline-flex; align-items: center; gap: 14px; color: var(--ink-warm);
  font-weight: 400; font-size: 15px; flex: 0 0 auto; min-width: 0;
}
.brand:hover { text-decoration: none; }
/* The mark sits in its own walnut tile, the same object as the favicon and the home-screen icon.
   Bare, the blades are narrow enough to read as a smudge at header size; in the tile they carry. */
.brand .mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  background: url('/sentira-icon.svg') center / contain no-repeat;
}
.brand .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--brand); font-weight: 400; text-transform: uppercase;
  letter-spacing: .24em; font-size: 20px; padding-left: .24em; line-height: 1;
}
nav.links { display: flex; align-items: center; gap: 30px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
nav.links a {
  font-family: var(--brand); color: var(--ink-warm-2); font-size: 16px; font-weight: 500;
  letter-spacing: .03em; position: relative; padding: 4px 0;
}
/* A hairline that grows from the left, rather than a browser underline: the nav is set in the
   same face as the wordmark, so it should move like a designed thing, not a link. */
nav.links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
nav.links a:hover { color: var(--ink-warm); text-decoration: none; }
nav.links a:hover::after, nav.links a.here::after { transform: scaleX(1); }
nav.links a.here { color: var(--ink-warm); }
@media (prefers-reduced-motion: reduce) { nav.links a::after { transition: none; } }
@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: 14.5px; flex: 0 0 auto; }
  .brand .mark { width: 34px; height: 34px; flex: 0 0 34px; }
  .brand .name { font-size: 17px; }
  .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-head {
  font-family: var(--brand); font-weight: 500; letter-spacing: .05em; font-size: 14px;
  border-radius: 999px; padding: 11px 22px;
}
.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; } }
/* The header mark is a picture, so it does not follow the tokens: on a dark page the walnut tile
   is a dark square on a dark ground. Same blades, cream tile. */
@media (prefers-color-scheme: dark) {
  .brand .mark { background-image: url('/sentira-icon-cream.svg'); }
}

/* ── 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; }
}