/* amassa.ai · the warm sibling of quotinc.com.
   Same type (Mona Sans), same button, same paper. Sienna leads, cobalt counters. */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans-Variable.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --paper: #F1F5FD;
  --paper-pure: #FFFFFF;
  --line: #D7E0F0;
  --line-soft: #E4EAF6;

  --ink: #0A0A0A;
  --ink-soft: #2B2B2B;
  --mute: #5A5F6B;

  --sienna: #C26C3A;
  --sienna-deep: #82441E;
  --sienna-ink: #2A1407;
  --lamp: #E0935E;

  --cobalt: #2D5BFF;
  --cobalt-night: #7FA3FF;

  --night: #110D0B;
  --night-plate: #1A1411;
  --night-line: #35281F;
  --night-ink: #F7F2EC;
  --night-soft: #D6CABF;
  --night-mute: #A3958A;
  --amber: #F2B441;

  --font: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-fast: 120ms;
  --t-normal: 220ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--night);
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection { background: var(--cobalt); color: #fff; }

:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.hero :focus-visible, .nav :focus-visible, .contact :focus-visible, .footer :focus-visible { outline-color: var(--cobalt-night); }

.wrap {
  max-width: var(--max-w);
  padding: 0 var(--gutter);
  margin: 0 auto;
}

/* ---------- type ---------- */
.display-1 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display-2 {
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.label-lamp { color: var(--lamp); }
.deck {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
  color: var(--night-soft);
  max-width: 600px;
}
.lead {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--mute);
  max-width: 560px;
  margin-top: 22px;
}
.lead-night { color: var(--night-soft); }

/* ---------- button · the house button, as on quotinc.com ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 0 0 0 16px;
  transition: filter var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-normal) var(--ease-out), border-color var(--t-normal) var(--ease-out),
    color var(--t-normal) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(120deg, var(--sienna), var(--sienna-deep));
  color: #fff;
  box-shadow: 0 6px 16px -2px rgba(130, 68, 30, 0.45);
}
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 10px 22px -4px rgba(194, 108, 58, 0.55); }
.btn-ghost {
  color: var(--night-ink);
  border-color: rgba(247, 242, 236, 0.28);
}
.btn-ghost:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.btn-large { padding: 17px 26px; font-size: 13px; }
.btn-nav { padding: 11px 16px; border-radius: 0 0 0 12px; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(17, 13, 11, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-normal) var(--ease-out);
}
.nav.is-stuck { border-bottom-color: var(--night-line); }
.nav-inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.lockup { display: flex; align-items: baseline; gap: 10px; color: var(--night-ink); white-space: nowrap; }
.lockup-home { display: flex; align-items: center; gap: 11px; }
.lockup-home img { width: 34px; height: auto; }
.lockup-name {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 21px;
  letter-spacing: -0.03em;
}
.lockup-by {
  font-size: 12px;
  font-weight: 550;
  color: var(--night-mute);
  border-bottom: 1px solid rgba(163, 149, 138, 0.45);
  padding-bottom: 1px;
  align-self: center;
  margin-top: 5px;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.lockup-by:hover { color: var(--cobalt-night); border-color: var(--cobalt-night); }
.nav-links {
  margin-left: auto;
  display: flex;
  gap: 26px;
  font-size: 14px;
  font-weight: 550;
  color: var(--night-soft);
}
.nav-links a { padding: 6px 0; border-bottom: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.nav-links a:hover, .nav-links a.is-here { color: #fff; border-bottom-color: var(--lamp); }

/* ---------- hero · the desk before dawn ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(52% 60% at 82% 46%, rgba(194, 108, 58, 0.30), rgba(194, 108, 58, 0) 70%),
    var(--night);
  color: var(--night-ink);
  padding: calc(var(--nav-h) + clamp(48px, 9vh, 104px)) 0 clamp(64px, 11vh, 128px);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.hero-copy .label { margin-bottom: 26px; max-width: 46ch; line-height: 1.5; }
.hero-copy .deck { margin-top: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* the run sheet */
.sheet {
  position: relative;
  background: var(--night-plate);
  border: 1px solid var(--night-line);
  border-radius: 0 0 0 22px;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  font-size: 14px;
  transform: rotate(-0.6deg);
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--night-line);
}
.sheet-title { min-width: 0; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-note { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-mute); white-space: nowrap; }
.sheet-cols, .sheet-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1.15fr) 34px minmax(0, 1fr) minmax(86px, auto);
  gap: 12px;
  align-items: center;
  padding: 0 20px 0 30px;
}
.sheet-cols {
  padding-top: 10px;
  padding-bottom: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night-mute);
}
.sheet-cols span:last-child { text-align: right; }
.sheet-row {
  min-height: 46px;
  border-top: 1px solid rgba(53, 40, 31, 0.7);
  transition: background-color var(--t-slow) var(--ease-out);
}
.c-time { font-weight: 700; color: var(--night-ink); }
.c-flight { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-flight b { font-weight: 650; }
.c-flight i { font-style: normal; color: var(--night-mute); margin-left: 8px; }
.c-pax, .c-to { color: var(--night-soft); }
.c-to { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-state { position: relative; display: grid; justify-items: end; }
.st { grid-area: 1 / 1; font-weight: 650; font-size: 12.5px; white-space: nowrap; transition: opacity var(--t-normal) var(--ease-out), transform var(--t-normal) var(--ease-out); }
.st-wait { color: var(--night-mute); opacity: 0; }
.st-done { color: #9FD9B4; }
.st-late { color: var(--amber); }
.sheet-row.is-late { background: rgba(242, 180, 65, 0.09); }
.sheet-row.is-late .c-time { color: var(--amber); text-decoration: line-through; text-decoration-thickness: 1px; }
.sheet-foot {
  padding: 14px 20px 18px 30px;
  border-top: 1px solid var(--night-line);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--night-soft);
}
/* the cobalt dot of the mark, running the time column once */
.sheet-dot {
  position: absolute;
  left: 13px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.22);
  opacity: 0;
  pointer-events: none;
}

/* armed by site.js: rows start Queued, then settle one by one */
.sheet.is-armed .sheet-row .st-wait { opacity: 1; }
.sheet.is-armed .sheet-row .st-done { opacity: 0; transform: translateY(5px); }
.sheet.is-armed .sheet-row.is-late { background: transparent; }
.sheet.is-armed .sheet-row.is-late .c-time { color: var(--night-ink); text-decoration-color: transparent; }
.sheet.is-armed .sheet-foot { opacity: 0; }
.sheet .sheet-foot { transition: opacity var(--t-slow) var(--ease-out); }
.sheet.is-armed .sheet-row.is-set .st-wait { opacity: 0; }
.sheet.is-armed .sheet-row.is-set .st-done { opacity: 1; transform: none; }
.sheet.is-armed .sheet-row.is-set.is-late { background: rgba(242, 180, 65, 0.09); }
.sheet.is-armed .sheet-row.is-set.is-late .c-time { color: var(--amber); text-decoration-color: currentColor; }
.sheet.is-armed.is-through .sheet-foot { opacity: 1; }

/* ---------- family band · one solid field of sienna ---------- */
.family { background: var(--sienna); color: var(--sienna-ink); }
.family-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  padding-top: clamp(44px, 7vh, 80px);
  padding-bottom: clamp(44px, 7vh, 80px);
}
.family-head {
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(30px, 3.9vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: #fff;
  max-width: 12ch;
}
.family-body p { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; font-weight: 550; max-width: 520px; }
.family-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 10px 16px 10px 10px;
  background: var(--paper-pure);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  border-radius: 0 0 0 14px;
  transition: background-color var(--t-normal) var(--ease-out), color var(--t-normal) var(--ease-out);
}
.family-link img { width: 26px; }
.family-link:hover { background: var(--cobalt); color: #fff; }

/* ---------- sections on paper ---------- */
.section { padding: clamp(72px, 11vh, 144px) 0; }
.section-head { margin-bottom: clamp(40px, 6vh, 72px); }

/* the day · a typeset run sheet, not cards */
.run { position: relative; border-top: 2px solid var(--ink); }
.run-row { position: relative; }
.run-time { transition: color var(--t-normal) var(--ease-out); }
/* the issue of the day leaves its mark in the gutter (the hero's amber flight) */
.run-row.is-issue .run-time::after {
  content: "";
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  margin-left: 0.14em;
  vertical-align: 0.5em;
  background: #D9920F;
  border-radius: 0 0 0 4px;
  transition: opacity var(--t-normal) var(--ease-out);
}
/* the desk clock: the mark's cobalt dot steps down the day as the reader
   scrolls, forward only. Armed by site.js; printed final without it. */
.run-dot {
  position: absolute;
  left: -14px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-slow) cubic-bezier(0.65, 0, 0.35, 1), opacity var(--t-normal) var(--ease-out);
}
.run.is-armed .run-row:not(.is-past) .run-time { color: var(--mute); }
.run.is-armed .run-row.is-issue:not(.is-past) .run-time::after { opacity: 0; }
.run.is-armed .run-dot.is-on { opacity: 1; }
.run.is-armed .run-dot.is-jump { transition: none; }
.run-row {
  display: grid;
  grid-template-columns: clamp(92px, 12vw, 170px) minmax(0, 0.36fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(22px, 3.2vh, 34px) 0;
  transition: background-color var(--t-normal) var(--ease-out);
}
/* row rules are drawn, so scroll motion can rule them in (--rule 0 to 1) */
.run-row::after, .index-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(var(--rule, 1));
  transform-origin: left center;
}
.run-row:hover { background: var(--paper-pure); }
.run-time {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(26px, 3.1vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--sienna-deep);
}
.run-what { font-size: clamp(18px, 1.5vw, 21px); font-weight: 750; letter-spacing: -0.015em; line-height: 1.25; }
.run-does { color: var(--ink-soft); max-width: 62ch; }

/* the rest of the log · an index */
.section-rest { background: var(--paper-pure); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rest-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.rest-intro { position: sticky; top: calc(var(--nav-h) + 32px); }
.index-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 20px;
  position: relative;
  padding: 15px 0;
}
.index-row::after { background: var(--line-soft); }
.index-row:first-child { border-top: 2px solid var(--ink); }
.index dt { font-weight: 750; letter-spacing: -0.01em; }
.index dd { color: var(--mute); }

/* they trust us · the customers' own marks, set like the index: an ink rule
   on top, a hairline between. Marks keep their own colours on a white field
   (never tinted, never greyed); each one links out to the customer's site. */
.section-clients { padding: clamp(64px, 9vh, 112px) 0; }
/* the heading sits above the row so every mark gets its own display width
   (three marks beside the heading squeezed the wide wordmarks) */
.clients-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
}
.clients {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  background: var(--paper-pure);
  border-bottom: 1px solid var(--line);
}
/* the ink rule is drawn, so scroll motion can rule it in (--rule 0 to 1) */
.clients::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(var(--rule, 1));
  transform-origin: left center;
  z-index: 1;
}
.clients li + li { border-left: 1px solid var(--line); }
.client {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 100%;
  min-height: clamp(172px, 16vw, 212px);
  padding: clamp(34px, 3vw, 44px) 24px 18px;
  color: var(--ink);
}
.client::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease-out);
}
.client:hover::after, .client:focus-visible::after { transform: scaleX(1); }
.client:focus-visible { outline-offset: -2px; }
.client-mark { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
/* each mark is sized by width (--mark-w on the img, from $clients) */
.client img {
  width: min(100%, var(--mark-w, 200px));
  height: auto;
  transition: transform var(--t-normal) var(--ease-out);
}
.client:hover img { transform: scale(1.03); }
.client-site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color var(--t-normal) var(--ease-out);
}
.client:hover .client-site, .client:focus-visible .client-site { color: var(--cobalt); }
.client-arrow { transition: transform var(--t-normal) var(--ease-out); }
.client:hover .client-arrow { transform: translate(2px, -2px); }

/* pricing · a window into the app: the Amassa light field under glass plates,
   the app's corner (14 14 14 4), ember fills, module inks on the groups */
.section-pricing {
  --a-border: rgba(122, 78, 40, 0.15);
  --a-border-strong: rgba(122, 78, 40, 0.30);
  --a-card: rgba(255, 255, 255, 0.62);
  --a-glass: blur(22px) saturate(1.65);
  --a-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.38);
  --a-shadow-1: 0 1px 2px rgba(120, 60, 20, 0.06), 0 8px 20px -10px rgba(120, 60, 20, 0.16);
  --a-shadow-3: 0 26px 60px -22px rgba(130, 52, 20, 0.34), 0 8px 20px -8px rgba(45, 70, 160, 0.12);
  --a-ember: linear-gradient(135deg, #E56A2C 0%, #C2501F 52%, #A8421A 100%);
  --a-ember-glow: 0 10px 24px -10px rgba(210, 86, 30, 0.62);
  --a-r-lg: 14px 14px 14px 4px;
  --a-r-md: 9px 9px 9px 3px;
  --a-r-sm: 6px 6px 6px 2px;
  --a-muted: #54504A;
  --a-dim: #6B6660;
  background:
    radial-gradient(46% 34% at 4% 0%, rgba(255, 124, 48, 0.30), transparent 72%),
    radial-gradient(36% 30% at 100% 8%, rgba(45, 91, 255, 0.18), transparent 70%),
    radial-gradient(44% 36% at 94% 100%, rgba(255, 186, 60, 0.34), transparent 72%),
    radial-gradient(34% 30% at 0% 92%, rgba(240, 84, 120, 0.12), transparent 70%),
    linear-gradient(160deg, #FFF9F1 0%, #FFF4EA 50%, #FBF3EE 100%);
}
.section-pricing .lead { color: var(--a-muted); }
.pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }

/* the switches · the app's segmented control, an ember thumb that slides */
.switches { display: none; gap: 12px; flex-wrap: wrap; }
.js .switches { display: flex; }
.seg {
  position: relative;
  display: inline-flex;
  padding: 4px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: var(--a-glass);
          backdrop-filter: var(--a-glass);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-md);
  box-shadow: var(--a-edge), var(--a-shadow-1);
}
.seg button {
  position: relative;
  z-index: 1;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--a-r-sm);
  background: transparent;
  color: var(--a-muted);
  cursor: pointer;
  transition: color var(--t-normal) var(--ease-out);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: #fff; background: var(--a-ember); box-shadow: var(--a-ember-glow); }
.seg.has-thumb button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: var(--a-r-sm);
  background: var(--a-ember);
  box-shadow: var(--a-ember-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  opacity: 0;
}
.seg.has-thumb .seg-thumb { opacity: 1; }
.seg.is-live .seg-thumb { transition: transform 420ms var(--ease-out), width 420ms var(--ease-out); }

[data-cur="usd"] .p-eur, [data-cur="eur"] .p-usd { display: none; }
[data-bill="m"] .p-y, [data-bill="y"] .p-m { display: none !important; }
.has-flow .plan-fig { display: none !important; }

/* the plans · three glass plates */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--a-card);
  -webkit-backdrop-filter: var(--a-glass);
          backdrop-filter: var(--a-glass);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-edge), var(--a-shadow-1);
  transition: box-shadow var(--t-normal) var(--ease-out), border-color var(--t-normal) var(--ease-out),
    background-color var(--t-normal) var(--ease-out), transform var(--t-normal) var(--ease-out);
}
.plan:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(194, 108, 58, 0.36);
  box-shadow: var(--a-edge), var(--a-shadow-3);
}
@media (prefers-reduced-motion: no-preference) {
  .plan:hover { transform: translateY(-3px); }
}
.plan-head { display: flex; align-items: center; gap: 12px; }
.plan-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 34px;
  height: 34px;
  padding-bottom: 9px;
  border-radius: 11px 11px 11px 4px;
  background: var(--a-ember);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 18px -8px rgba(194, 108, 58, 0.85);
}
.plan-chip i { width: 4px; border-radius: 2px 2px 2px 1px; background: rgba(255, 255, 255, 0.36); }
.plan-chip i:nth-child(1) { height: 6px; }
.plan-chip i:nth-child(2) { height: 11px; }
.plan-chip i:nth-child(3) { height: 16px; }
.plan-chip i.on { background: #fff; }
.plan-name { font-weight: 800; font-stretch: 112%; font-size: 25px; letter-spacing: -0.03em; }
.plan-price { margin-top: 26px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-fig, .plan-price number-flow {
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(46px, 4.5vw, 62px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-price number-flow { --number-flow-char-height: 1em; --number-flow-mask-height: 0.3em; }
.plan-per { font-size: 14px; font-weight: 600; color: var(--a-muted); }
.plan-bill { margin-top: 8px; min-height: 1.5em; font-size: 13.5px; color: var(--a-dim); }

.plan-specs { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--a-border); display: grid; gap: 15px; }
.plan-specs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: baseline; font-size: 14.5px; }
.spec-name { color: var(--a-muted); font-weight: 550; }
.spec-val { font-weight: 750; }
.meter { grid-column: 1 / -1; height: 6px; border-radius: 3px 3px 3px 1px; background: rgba(110, 85, 39, 0.10); overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--a-ember); border-radius: inherit; transform-origin: left center; }
.spec-extra { padding-top: 13px; border-top: 1px dashed var(--a-border-strong); }

.plan-mods {
  margin: 22px 0 24px;
  padding: 14px 14px 13px;
  border-radius: var(--a-r-md);
  background: rgba(255, 241, 226, 0.72);
  border: 1px solid var(--a-border);
}
.plan-mods p { font-size: 14px; color: var(--a-muted); }
.plan-mods b { font-size: 19px; font-weight: 800; color: var(--ink); margin-right: 2px; }
.cells { margin-top: 10px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.cells i { height: 14px; border-radius: 2px 2px 2px 1px; background: rgba(110, 85, 39, 0.12); }
.cells i.on { background: #C26C3A; }

.btn-ember {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: var(--a-r-md);
  background: var(--a-ember);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--a-ember-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: filter var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn-ember:hover { filter: brightness(1.08); box-shadow: 0 14px 28px -10px rgba(210, 86, 30, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-ember:active { transform: translateY(1px); }

/* the module table · the app's data table on a glass plate */
.matrix-plate {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--a-card);
  -webkit-backdrop-filter: var(--a-glass);
          backdrop-filter: var(--a-glass);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-edge), var(--a-shadow-1);
  overflow: clip;
}
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14.5px; }
.matrix-cap { caption-side: top; text-align: left; padding: 20px 22px 8px; font-weight: 750; font-size: 18px; letter-spacing: -0.015em; }
.matrix th, .matrix td { padding: 10px 14px; border-bottom: 1px solid var(--a-border); }
.matrix th:first-child { width: 40%; }
.matrix thead th {
  position: sticky;
  top: var(--nav-h);
  z-index: 2;
  background: rgba(255, 249, 242, 0.94);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a-muted);
  text-align: center;
  border-bottom-color: var(--a-border-strong);
}
.matrix thead .m-corner { text-align: left; padding-left: 22px; }
.matrix th[scope="row"] { text-align: left; font-weight: 600; padding-left: 22px; }
.matrix td { text-align: center; }
.matrix tbody tr:last-child > * { border-bottom: 0; }
.matrix tbody tr:not(.m-group) > * { transition: background-color var(--t-fast) var(--ease-out); }
.matrix tbody tr:not(.m-group):hover > * { background: rgba(255, 241, 226, 0.9); }
.m-group th {
  text-align: left;
  padding: 24px 22px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.m-ink {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 3px 3px 3px 1px;
  background: var(--mod);
  box-shadow: 0 4px 10px -3px var(--mod);
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--a-r-sm);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.chip-yes {
  width: 24px;
  padding: 0;
  background: var(--a-ember);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 12px -6px rgba(194, 108, 58, 0.85);
}
.chip-add { background: rgba(255, 255, 255, 0.75); border: 1px solid var(--a-border); color: var(--a-muted); }
.chip-limit { background: #F5DEC8; border: 1px solid rgba(194, 108, 58, 0.24); color: #82441E; }
.ledger-foot { margin-top: 20px; color: var(--a-muted); font-size: 14.5px; max-width: 70ch; }

/* the estimator · the app's controls on a glass plate */
.est-plate {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--a-card);
  -webkit-backdrop-filter: var(--a-glass);
          backdrop-filter: var(--a-glass);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-edge), var(--a-shadow-1);
}
.est-head { max-width: 640px; margin-bottom: 26px; }
.est-title { font-weight: 800; font-stretch: 108%; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.03em; line-height: 1.05; }
.est-lead { margin-top: 10px; color: var(--a-muted); font-size: 15.5px; }
.est-nojs { color: var(--a-muted); }
.est-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.est-field { padding: 18px 0; border-top: 1px solid var(--a-border); }
.est-field:first-child { border-top: 0; padding-top: 0; }
.est-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.est-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-muted); }
.est-out { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.est-range {
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 16px 0 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #C2501F var(--fill, 0%), rgba(110, 85, 39, 0.14) var(--fill, 0%));
  cursor: pointer;
}
.est-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #C2501F;
  box-shadow: 0 4px 12px -3px rgba(150, 62, 20, 0.5);
  transition: transform var(--t-fast) var(--ease-out);
}
.est-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #C2501F;
  box-shadow: 0 4px 12px -3px rgba(150, 62, 20, 0.5);
}
.est-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.est-core { margin-top: 8px; font-size: 14px; color: var(--a-dim); line-height: 1.5; }
.est-mods { margin-top: 14px; display: grid; gap: 14px; }
.est-group-name { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.est-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.est-chip {
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  padding: 7px 12px;
  border-radius: var(--a-r-sm);
  border: 1px solid var(--a-border);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.est-chip:hover { border-color: rgba(194, 108, 58, 0.5); }
.est-chip[aria-pressed="true"] { background: var(--a-ember); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -8px rgba(194, 108, 58, 0.9); }
.est-soon { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-left: 4px; }
.est-seg { display: inline-flex; margin-top: 10px; padding: 3px; border: 1px solid var(--a-border); border-radius: var(--a-r-md); background: rgba(255, 255, 255, 0.7); }
.est-seg button { font: inherit; font-size: 13.5px; font-weight: 650; padding: 7px 14px; border: 0; border-radius: var(--a-r-sm); background: transparent; color: var(--a-muted); cursor: pointer; transition: color var(--t-fast), background-color var(--t-normal) var(--ease-out); }
.est-seg button[aria-pressed="true"] { background: var(--a-ember); color: #fff; box-shadow: var(--a-ember-glow); }
.est-toggle { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.est-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est-toggle-ui {
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(110, 85, 39, 0.2);
  transition: background-color var(--t-normal) var(--ease-out);
}
.est-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(80, 40, 10, 0.25);
  transition: transform var(--t-normal) var(--ease-out);
}
.est-toggle input:checked + .est-toggle-ui { background: #C2501F; }
.est-toggle input:checked + .est-toggle-ui::after { transform: translateX(18px); }
.est-toggle input:focus-visible + .est-toggle-ui { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.est-toggle-text b { display: block; font-weight: 750; }
.est-toggle-text span { display: block; margin-top: 3px; font-size: 14px; color: var(--a-muted); }
.est-combo-body { margin-top: 16px; }
.est-pplans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.est-pplan {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--a-r-md);
  border: 1px solid var(--a-border);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), box-shadow var(--t-normal) var(--ease-out);
}
.est-pplan span { font-weight: 750; }
.est-pplan small { font-size: 12.5px; color: var(--a-muted); }
.est-pplan[aria-pressed="true"] { border-color: #C2501F; box-shadow: 0 0 0 1px #C2501F inset, 0 8px 18px -12px rgba(194, 108, 58, 0.9); }
.est-pbill { margin-top: 14px; align-items: center; }
.est-pbill .est-seg { margin-top: 0; }

.est-sum {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  padding: 20px;
  border-radius: var(--a-r-lg);
  border: 1px solid var(--a-border);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--a-edge), var(--a-shadow-3);
}
.est-plans { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.est-plan {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 92px;
  padding: 10px 11px;
  border-radius: var(--a-r-md);
  border: 1px solid var(--a-border);
  background: rgba(255, 249, 242, 0.9);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), box-shadow var(--t-normal) var(--ease-out), background-color var(--t-normal);
}
.est-plan-name { font-weight: 750; font-size: 14px; }
.est-plan-fig { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.est-plan-fig small { font-size: 11.5px; font-weight: 600; color: var(--a-muted); margin-left: 1px; }
.est-plan-note { font-size: 11.5px; font-weight: 600; color: var(--a-dim); line-height: 1.25; }
.est-plan-note.is-best { color: #2E8B4A; }
.est-plan.is-short { opacity: 0.62; }
.est-plan[aria-pressed="true"] { background: #fff; border-color: #C2501F; box-shadow: 0 0 0 1px #C2501F inset, 0 10px 22px -14px rgba(194, 108, 58, 0.9); opacity: 1; }
.est-lines { margin-top: 18px; }
.est-line { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--a-border-strong); font-size: 14px; }
.est-line span { color: var(--a-muted); }
.est-line b { font-weight: 700; white-space: nowrap; }
.est-line.is-save b, .est-line.is-save span { color: #2E8B4A; }
.est-line.is-incl b { font-weight: 600; color: var(--a-dim); }
.est-warn { margin-top: 12px; padding: 10px 12px; border-radius: var(--a-r-sm); background: #F8EFD8; border: 1px solid #E3CE9A; color: #6B4A00; font-size: 13.5px; }
.est-total { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.est-total-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-muted); }
.est-total-fig, .est-total-fig number-flow { font-weight: 800; font-stretch: 108%; font-size: clamp(36px, 3.6vw, 48px); letter-spacing: -0.04em; line-height: 1; --number-flow-mask-height: 0.3em; }
.est-total-fig { margin-left: auto; }
.est-total-per { font-size: 13px; font-weight: 600; color: var(--a-muted); }
.est-year { margin-top: 6px; font-size: 13.5px; color: var(--a-dim); text-align: right; }
.est-send { margin-top: 18px; }
.est-fine { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--a-dim); }
@media (max-width: 900px) {
  .est-grid { grid-template-columns: minmax(0, 1fr); }
  .est-sum { position: static; }
}
@media (max-width: 560px) {
  .est-plan { min-height: 0; padding: 9px; }
  .est-plan-fig { font-size: 15.5px; }
  .est-pplans { grid-template-columns: minmax(0, 1fr); }
  .est-pbill { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- contact ---------- */
.contact {
  background:
    radial-gradient(46% 70% at 12% 100%, rgba(194, 108, 58, 0.26), rgba(194, 108, 58, 0) 70%),
    var(--night);
  color: var(--night-ink);
  padding: clamp(80px, 13vh, 168px) 0;
}
.contact .display-2 { max-width: 15ch; }
.contact-mail {
  display: inline-block;
  margin-top: 40px;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(26px, 5vw, 68px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--lamp);
  padding-bottom: 7px;
  overflow-wrap: anywhere;
  background:
    linear-gradient(var(--cobalt-night), var(--cobalt-night)) 0 100% / 0 3px no-repeat,
    linear-gradient(rgba(224, 147, 94, 0.4), rgba(224, 147, 94, 0.4)) 0 100% / 100% 3px no-repeat;
  transition: color var(--t-normal) var(--ease-out), background-size var(--t-normal) var(--ease-out);
}
.contact-mail:hover, .contact-mail:focus-visible {
  color: #fff;
  background-size: 100% 3px, 100% 3px;
  transition: color var(--t-normal) var(--ease-out), background-size var(--t-slow) var(--ease-out);
}

/* ---------- footer ---------- */
.footer { background: #0B0807; color: var(--night-soft); padding: 64px 0 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.7fr); gap: 40px; }
.lockup-foot { align-items: center; }
.lockup-foot img { width: 40px; }
.lockup-foot .lockup-by { margin-top: 6px; }
.footer-gloss { margin-top: 20px; max-width: 46ch; color: var(--night-mute); line-height: 1.5; }
.footer-gloss span { color: var(--night-ink); font-weight: 650; }
.footer .label { color: var(--night-mute); margin-bottom: 12px; }
.footer-col a { border-bottom: 1px solid rgba(214, 202, 191, 0.3); transition: color var(--t-fast), border-color var(--t-fast); }
.footer-col a:hover { color: #fff; border-color: var(--cobalt-night); }
.footer-base {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--night-line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--night-mute);
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sheet { transform: none; max-width: 640px; }
  .rest-grid { grid-template-columns: 1fr; }
  .rest-intro { position: static; }
  .clients-grid { grid-template-columns: 1fr; }
  .family-inner { grid-template-columns: 1fr; align-items: start; }
  .family-head { max-width: none; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .btn-nav { margin-left: auto; white-space: nowrap; }
  .run-row { grid-template-columns: 84px minmax(0, 1fr); }
  .run-does { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  :root { --nav-h: 64px; }
  body { font-size: 16px; }
  .lockup-name { font-size: 19px; }
  .nav-inner { gap: 12px; }
  .btn-nav { padding: 10px 12px; font-size: 11px; letter-spacing: 0.1em; }
  .lockup-home img { width: 30px; }
  .sheet { font-size: 13px; }
  .sheet-cols, .sheet-row { grid-template-columns: 46px minmax(0, 1fr) minmax(78px, auto); padding: 0 14px 0 26px; }
  .sheet-cols span:nth-child(3), .sheet-cols span:nth-child(4), .c-pax, .c-to { display: none; }
  .c-flight i { display: block; margin-left: 0; font-size: 12px; }
  .sheet-row { min-height: 52px; }
  .sheet-head, .sheet-foot { padding-left: 14px; padding-right: 14px; }
  .sheet-dot { left: 10px; }
  .sheet-note { display: none; }
  .index-row { grid-template-columns: 1fr; gap: 2px; }
  .clients { grid-template-columns: 1fr; }
  .clients li + li { border-left: 0; border-top: 1px solid var(--line); }
  .client { min-height: 150px; }
  .run-row { grid-template-columns: 1fr; gap: 6px; }
  .run-does { grid-column: 1; }
  .hero-cta .btn { width: 100%; }
  .seg button { padding: 8px 13px; font-size: 13.5px; }
  .matrix { font-size: 13.5px; }
  .matrix th, .matrix td { padding: 9px 3px; }
  .matrix th:first-child { width: 37%; }
  .matrix th[scope="row"], .matrix thead .m-corner, .m-group th { padding-left: 12px; }
  .matrix-cap { padding: 16px 12px 6px; font-size: 16px; }
  .matrix thead th { font-size: 10.5px; letter-spacing: 0.06em; }
  .chip { font-size: 11.5px; padding: 2px 5px; white-space: normal; line-height: 1.2; }
  .chip-yes { width: 22px; min-height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}