/* The marketing site's design kit — the "Press" direction.

   Built on the product's own tokens (dashboard/css/tokens.css). It deliberately does not load the
   dashboard's app.css: those are dashboard components, and the two should look like one product without
   depending on each other. The signed-in app keeps its own design; nothing in here reaches it.

   Everything is prefixed .pub-, so nothing can reach into the dashboard or the widget.

   The direction: a warm paper ground, a serif display face used only for headlines, mono for structural
   furniture (section markers, field labels, data), and dark "ink" bands for rhythm so the site is not an
   unbroken field of cream. The support ticket is drawn as a perforated docket, because that is the thing
   the product actually produces.

   Nothing is hidden until script runs: the reveal animations are armed only under html[data-motion],
   which public.js sets and a reduced-motion setting withholds, so the page is complete at rest. */

/* ---------- Ground ------------------------------------------------------------------------------ */

.pub {
  /* The public header's height, so anything that has to sit clear of it reads the same number. The
     dashboard's --topbar-h is a different bar on a different shell; this one is ours. */
  --pub-header-h: 74px;

  /* The display scale. Real jumps between steps, so a page has a loudest thing and a quietest thing
     rather than four middling sizes. Scoped to .pub so the dashboard keeps its own scale. */
  --pub-d1: clamp(42px, 6.2vw, 78px);
  --pub-d2: clamp(31px, 4.2vw, 50px);
  --pub-d3: clamp(24px, 2.6vw, 33px);

  /* One section rhythm for the whole site. Each page used to pick its own padding, which is most of
     why they felt uneven next to each other. One variable decides it everywhere now. */
  --pub-section-y: clamp(64px, 8vw, 112px);
  --pub-gutter: clamp(20px, 4vw, 44px);
  --pub-wrap: 1180px;

  --pub-ink: #1C1A17;
  --pub-ink-2: #26231F;
  --pub-ink-line: #332C24;
  --pub-ink-text: #F2EDE6;
  --pub-ink-text-2: #A8A29E;

  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[data-theme="dark"] .pub {
  --pub-ink: #0B0A09;
  --pub-ink-2: #161412;
  --pub-ink-line: #24211E;
}

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

/* A paper grain over the whole page. At 3.5% it is invisible as texture and visible as warmth — it is
   what stops a flat cream background reading as an unstyled default. */
.pub::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .pub::before { mix-blend-mode: screen; opacity: 0.05; }

.pub-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--pub-wrap);
  margin: 0 auto;
  padding-inline: var(--pub-gutter);
}

.pub-skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.pub-skip:focus { left: 0; top: 0; }

.pub-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Every glyph in _icons.html is a stroked 24x24 outline, so the sprite takes the colour of whatever
   it sits in and works in both themes. Without this it renders as a filled blob. */
.pub .pi {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pub .pub-btn .pi { stroke-width: 2; transition: transform 160ms var(--ease); }
.pub .pub-btn:hover .pi { transform: translateX(2px); }
.pub .pub-yes { stroke-width: 2.4; }

/* ---------- Type --------------------------------------------------------------------------------- */

.pub h1, .pub h2, .pub h3, .pub h4 {
  margin: 0;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.14;
}
.pub p { margin: 0; }

/* The serif is for headlines only. Body text stays Plus Jakarta Sans. */
.pub h1,
.pub h2,
.pub .pub-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.03;
  text-wrap: balance;
}
.pub h1 { font-size: var(--pub-d1); }
.pub h2 { font-size: var(--pub-d2); }
.pub h3 { font-size: var(--text-lg); }

.pub-lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--color-text-2);
  text-wrap: pretty;
}

.pub-section { padding-block: var(--pub-section-y); position: relative; }
.pub-section-tint { background: var(--color-surface-2); }
.pub-section-flush { padding-top: 0; }

/* The dark band. Used once or twice a page so the site has rhythm. */
.pub-ink {
  background: var(--pub-ink);
  color: var(--pub-ink-text);
}
.pub-ink h1, .pub-ink h2, .pub-ink h3 { color: var(--pub-ink-text); }
.pub-ink p, .pub-ink .pub-lede { color: var(--pub-ink-text-2); }

/* The section head: the same three parts in the same order, left aligned by default. */
.pub-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 46rem;
}
.pub-section-head .pub-lede { max-width: 40rem; }
.pub-head-center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* The section marker: a mono index and a rule, so a long page reads as a numbered argument rather than
   an endless scroll of equal cards. */
.pub-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.pub-mark b { color: var(--color-primary); font-weight: var(--weight-medium); }
.pub-mark::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.pub-ink .pub-mark { color: var(--pub-ink-text-2); }
.pub-ink .pub-mark b { color: var(--coffee-400); }
.pub-ink .pub-mark::after { background: var(--pub-ink-line); }

.pub-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-soft-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.pub-eyebrow .pi { width: 14px; height: 14px; }
.pub-ink .pub-eyebrow {
  background: rgba(217, 168, 119, 0.12);
  border-color: rgba(217, 168, 119, 0.25);
  color: var(--coffee-300);
}

.pub-prose { max-width: 68ch; }
.pub-prose-head { margin-bottom: var(--space-5); }
.pub-prose-body p + p { margin-top: var(--space-4); }

.pub-quote {
  margin: 0;
  padding-block: clamp(32px, 5vw, 56px);
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}
.pub-quote p:first-child { max-width: 20ch; }
.pub-quote p + p { margin-top: var(--space-5); max-width: 58ch; }

/* ---------- Buttons ------------------------------------------------------------------------------ */

.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font: inherit;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease);
}
.pub-btn .pi { width: 17px; height: 17px; }
.pub-btn-lg { height: 54px; padding-inline: 28px; font-size: 16px; }
.pub-btn-sm { height: 36px; padding-inline: 15px; font-size: var(--text-sm); }

.pub-btn-primary {
  background: linear-gradient(180deg, var(--coffee-600), var(--coffee-700));
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 22px -11px rgba(139, 90, 43, 0.9);
}
.pub-btn-primary:hover {
  background: linear-gradient(180deg, var(--coffee-700), var(--coffee-800));
  transform: translateY(-1px);
}
.pub-btn-primary:active { transform: translateY(0); }
[data-theme="dark"] .pub-btn-primary {
  background: linear-gradient(180deg, var(--coffee-400), var(--coffee-500));
  color: var(--color-on-primary);
}
[data-theme="dark"] .pub-btn-primary:hover { background: linear-gradient(180deg, var(--coffee-300), var(--coffee-400)); }

.pub-btn-outline {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.pub-btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  transform: translateY(-1px);
}

.pub-btn-quiet { background: transparent; color: var(--color-text-2); }
.pub-btn-quiet:hover { background: var(--color-surface-3); color: var(--color-text); }

/* On an ink band or the closing panel, where the ground is dark. */
.pub-btn-paper { background: var(--coffee-50); color: var(--coffee-800); }
.pub-btn-paper:hover { background: #FFFFFF; transform: translateY(-1px); }
.pub-btn-onink { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.22); }
.pub-btn-onink:hover { background: rgba(255, 255, 255, 0.18); }

.pub-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-2);
  cursor: pointer;
  transition: var(--transition-colors);
}
.pub-icon-btn:hover { background: var(--color-surface-3); color: var(--color-text); }
.pub-icon-btn .pi { width: 19px; height: 19px; }
.pub-icon-moon { display: none; }
[data-theme="dark"] .pub-icon-sun { display: none; }
[data-theme="dark"] .pub-icon-moon { display: block; }

/* ---------- Header -------------------------------------------------------------------------------- */

.pub-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease);
}
.pub-header.is-stuck { border-bottom-color: var(--color-border); }
.pub-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--pub-header-h);
}

.pub-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--color-text); }
.pub-brand-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  background: linear-gradient(145deg, var(--coffee-500), var(--coffee-700));
  color: #FFFFFF;
  border-radius: 11px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 7px 16px -8px rgba(139, 90, 43, 0.95);
}
.pub-brand-mark .pi { width: 20px; height: 20px; }
.pub-brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* The logo ships as real files under static/public/img/, so its colour lives in the file rather than
   here. Two versions exist because CSS cannot reach inside an externally loaded SVG: one for a light
   ground and one for a dark one. The header carries both and shows whichever the theme calls for; the
   footer band is dark in both themes, so its markup points straight at the light file. */
.pub-logo { display: block; width: auto; height: 30px; }
.pub-footer .pub-logo { height: 28px; }
.pub-logo-dark { display: none; }
[data-theme="dark"] .pub-logo-paper { display: none; }
[data-theme="dark"] .pub-logo-dark { display: block; }

.pub-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.pub-nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  text-decoration: none;
  transition: var(--transition-colors);
}
.pub-nav a:hover { background: var(--color-surface-3); color: var(--color-text); }
.pub-nav a[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semibold); }
.pub-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
}
.pub-header-actions { display: flex; align-items: center; gap: 9px; }

.pub-only-sm { display: none; }

/* ---------- Mobile drawer -------------------------------------------------------------------------- */

.pub-drawer { position: fixed; inset: 0; z-index: 60; }
.pub-drawer[hidden] { display: none; }
.pub-drawer-scrim { position: absolute; inset: 0; background: var(--color-overlay); }
.pub-drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(86vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-5);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.pub-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.pub-drawer-panel > a {
  padding: 13px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
}
.pub-drawer-panel > a:hover { background: var(--color-surface-2); }
.pub-drawer-foot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.pub-drawer-foot .pub-btn { width: 100%; }

/* ---------- Surfaces ------------------------------------------------------------------------------- */

.pub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.pub-card h3 { font-size: var(--text-lg); margin-bottom: 9px; }
.pub-card p { color: var(--color-text-2); font-size: 15px; }
.pub-card-lift:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.pub-ink .pub-card { background: var(--pub-ink-2); border-color: var(--pub-ink-line); }
.pub-ink .pub-card p { color: var(--pub-ink-text-2); }

.pub-card-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-5);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  border-radius: var(--radius-md);
}
.pub-card-icon .pi { width: 20px; height: 20px; }
.pub-ink .pub-card-icon { background: rgba(217, 168, 119, 0.13); color: var(--coffee-300); }

.pub-grid { display: grid; gap: var(--space-5); }
.pub-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The spec row: a datasheet. Capabilities read faster as labelled rows than as six equal boxes. */
.pub-specs { border-top: 1px solid var(--color-border); }
.pub-spec {
  display: grid;
  grid-template-columns: 46px minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-fast) var(--ease);
}
.pub-spec:hover { background: var(--color-surface); }
.pub-spec-n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-primary); padding-top: 4px; }
.pub-spec h3 { font-size: var(--text-md); }
.pub-spec p { color: var(--color-text-2); font-size: 15px; }
.pub-ink .pub-specs, .pub-ink .pub-spec { border-color: var(--pub-ink-line); }
.pub-ink .pub-spec:hover { background: var(--pub-ink-2); }

/* A row of chips: a list of things, not a grid of ideas. */
.pub-rail { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.pub-rail span,
.pub-rail li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: var(--weight-medium);
  transition: border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.pub-rail span:hover, .pub-rail li:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.pub-rail .pi { width: 17px; height: 17px; color: var(--color-primary); }

.pub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-surface-3);
  color: var(--color-text-2);
}
.pub-pill .pi { width: 13px; height: 13px; }
.pub-pill-brand { background: var(--color-primary-soft); color: var(--color-primary-text); }
.pub-pill-bad { background: var(--color-danger-soft); color: var(--color-danger-text); }

/* The numbers band, on ink. */
.pub-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.pub-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--space-5);
  border-top: 2px solid var(--coffee-500);
}
.pub-stat b {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pub-ink-text);
}
.pub-stat span { font-size: 15px; color: var(--pub-ink-text-2); }

/* ---------- Footer --------------------------------------------------------------------------------- */

.pub-footer {
  position: relative;
  z-index: 2;
  background: var(--pub-ink);
  color: var(--pub-ink-text);
  padding-block: 80px var(--space-8);
}
.pub-footer a { color: var(--pub-ink-text-2); text-decoration: none; transition: var(--transition-colors); }
.pub-footer a:hover { color: #FFFFFF; }
.pub-footer .pub-brand { color: #FFFFFF; }
.pub-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}
.pub-footer-brand p { color: var(--pub-ink-text-2); font-size: 15px; margin-top: var(--space-5); max-width: 34ch; }
.pub-footer-contact {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.pub-footer-contact li { display: flex; align-items: center; gap: 10px; }
.pub-footer-contact .pi { width: 16px; height: 16px; color: var(--coffee-400); }
.pub-footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; align-items: flex-start; }
.pub-footer-col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--coffee-400);
  margin-bottom: var(--space-3);
}
.pub-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--pub-ink-line);
  font-size: var(--text-sm);
  color: var(--pub-ink-text-2);
}

/* ---------- 404 / 500 ------------------------------------------------------------------------------ */

.pub-stop {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding-block: var(--pub-section-y);
  text-align: center;
}
.pub-stop > * { max-width: 36rem; }
.pub-stop-code {
  font-family: var(--font-display);
  font-size: clamp(84px, 15vw, 164px);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--color-primary);
  opacity: 0.2;
}
.pub-stop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }

/* ---------- Revealing ------------------------------------------------------------------------------- */

html[data-motion] .pub-reveal { opacity: 0; transform: translateY(14px); }
html[data-motion] .pub-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
html[data-motion] .pub-reveal-stagger > * { opacity: 0; transform: translateY(14px); }
html[data-motion] .pub-reveal-stagger.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
html[data-motion] .pub-reveal-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
html[data-motion] .pub-reveal-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
html[data-motion] .pub-reveal-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
html[data-motion] .pub-reveal-stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
html[data-motion] .pub-reveal-stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }

/* ---------- Narrow ---------------------------------------------------------------------------------- */

.pub-hide-sm { display: inline-flex; }

/* ---------- Home page ------------------------------------------------------------------------------- */

.pub-hero { position: relative; padding-block: clamp(48px, 6.5vw, 92px) var(--pub-section-y); overflow: hidden; }
.pub-hero::before {
  content: "";
  position: absolute;
  inset: -34% -10% auto 20%;
  height: 78%;
  pointer-events: none;
  background: radial-gradient(52% 58% at 60% 42%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 72%);
}
.pub-hero-short { padding-bottom: 48px; }

.pub-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.pub-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.pub-hero-copy h1 { max-width: 14ch; }
.pub-hero-copy .pub-lede { max-width: 38ch; }
.pub-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: var(--space-2); }

.pub-hero-points { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-4) 0 0; list-style: none; padding: 0; }
.pub-hero-points li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--color-text-2); }
.pub-hero-points .pi { width: 16px; height: 16px; color: var(--color-primary); }
.pub-points-stacked { flex-direction: column; gap: 10px; }

.pub-hero-art { display: flex; justify-content: center; }
.pub-hero-art svg { width: 100%; height: auto; }

.pub-hero-demo { min-width: 0; }

/* The chat, which plays the refusal through on load. The one thing this product does that nothing else
   does is stop, so the demo shows the refusal and the ticket as the recovery from it. */
.pub-demo {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pub-demo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 19px;
  background: linear-gradient(135deg, var(--coffee-600), var(--coffee-700));
  color: #FFFFFF;
}
.pub-demo-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.pub-demo-avatar .pi { width: 19px; height: 19px; }
.pub-demo-head strong { display: block; font-size: 15px; font-weight: var(--weight-semibold); }
.pub-demo-head em { display: flex; align-items: center; gap: 7px; font-style: normal; font-size: var(--text-xs); opacity: 0.85; }
.pub-demo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coffee-300); }

.pub-demo-body { display: flex; flex-direction: column; gap: 11px; padding: 19px; background: var(--color-surface-2); }
.pub-demo-row { display: flex; }
.pub-demo-them { justify-content: flex-end; }
.pub-demo-row p { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.pub-demo-them p { background: var(--color-primary); color: #FFFFFF; border-bottom-right-radius: 5px; }
.pub-demo-us p { background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 5px; }
[data-theme="dark"] .pub-demo-them p { color: var(--color-on-primary); }

.pub-demo-refuse {
  max-width: 90%;
  padding: 13px 15px;
  border-radius: 16px 16px 16px 5px;
  background: var(--color-surface);
  border: 1px dashed var(--color-warning);
  font-size: 15px;
  line-height: 1.5;
}
.pub-demo-refuse b {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-warning-text);
}
.pub-demo-refuse b .pi { width: 13px; height: 13px; }

.pub-demo-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 19px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-3);
  font-size: 15px;
}
.pub-demo-foot i { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); flex: none; }

html[data-motion] .pub-demo-body > * { animation: pub-rise 500ms var(--ease) both; }
html[data-motion] .pub-demo-1 { animation-delay: 200ms; }
html[data-motion] .pub-demo-2 { animation-delay: 750ms; }
html[data-motion] .pub-demo-3 { animation-delay: 1300ms; }
html[data-motion] .pub-demo-4 { animation-delay: 1900ms; }
html[data-motion] .pub-demo-5 { animation-delay: 2600ms; }
@keyframes pub-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The docket. A support ticket is a docket, so it is drawn as one: a torn top edge, mono field labels,
   a perforated rule above the footer. The page's one signature object. */
.pub-docket {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.pub-docket::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -6px;
  height: 7px;
  background: repeating-linear-gradient(135deg, var(--color-surface) 0 7px, transparent 7px 14px);
}
.pub-docket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.pub-docket-top b { color: var(--color-primary-text); font-weight: var(--weight-medium); }
.pub-docket h3 { font-size: var(--text-lg); margin-bottom: 6px; }
.pub-docket dl { display: flex; flex-direction: column; gap: 9px; margin: var(--space-5) 0 0; }
.pub-docket-field { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4); font-size: var(--text-sm); }
.pub-docket-field dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-3);
  padding-top: 2px;
}
.pub-docket-field dd { margin: 0; color: var(--color-text); word-break: break-word; }
.pub-docket-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  padding-top: 13px;
  border-top: 1px dashed var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}
.pub-docket-foot .pi { width: 14px; height: 14px; color: var(--color-success); }

/* The ticket bubble, kept for the chat on the how-it-works page. */
.pub-demo-ticket {
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 15px;
  border-radius: 16px 16px 16px 5px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-soft-2);
}
.pub-demo-ticket-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary-text);
}
.pub-demo-ticket-top .pi { width: 13px; height: 13px; }
.pub-demo-ticket strong { font-size: 15px; }
.pub-demo-ticket span:last-child { font-size: var(--text-sm); color: var(--color-text-2); }

/* The strip of short proofs under the hero. */
.pub-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-10) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}
.pub-strip li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--color-text-2); }
.pub-strip .pi { width: 17px; height: 17px; color: var(--color-primary); }

/* Two answers to the same question, side by side. */
.pub-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.pub-versus > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.pub-versus-them { border-style: dashed; }
.pub-versus-us { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.pub-versus q { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); }
.pub-versus small { margin-top: auto; font-size: var(--text-sm); color: var(--color-text-3); }

/* The five-step path a question takes, on ink. */
.pub-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.pub-flow li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--pub-ink-2);
  border: 1px solid var(--pub-ink-line);
}
.pub-flow .is-stop { border-color: var(--color-warning); background: rgba(217, 127, 12, 0.09); }
.pub-flow-ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(217, 168, 119, 0.14);
  color: var(--coffee-300);
}
.pub-flow .is-stop .pub-flow-ico { background: rgba(242, 169, 59, 0.16); color: var(--color-warning); }
.pub-flow-ico .pi { width: 17px; height: 17px; }
.pub-flow em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  color: var(--coffee-400);
}
.pub-flow b { font-size: 15px; color: var(--pub-ink-text); }
.pub-flow span:not(.pub-flow-ico) { font-size: var(--text-sm); color: var(--pub-ink-text-2); line-height: 1.5; }

/* Steps.

   Three stacked cards made this read as three unrelated boxes, each with its picture adrift in a field
   of white. It is a sequence, so it is drawn as one: a rule runs down through the numbers, the words sit
   in one column and the picture in the next, and every step lines up on the same two edges. */
.pub-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.pub-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 var(--space-6);
  align-items: start;
  padding-block: var(--space-8);
}
/* The rail is drawn by the step, not by the number, so it spans whatever height that step turns out to
   be and meets the next one exactly. The first starts at its number, the last stops at its own. */
.pub-step::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border-strong);
}
.pub-step:first-child::before { top: calc(var(--space-8) + 10px); }
.pub-step:last-child::before { bottom: auto; height: calc(var(--space-8) + 10px); }
/* A step that carries an illustration gives it the second column. The how-it-works page uses the same
   component without pictures, and keeps the two-column form. */
.pub-step-with-art { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.05fr); }

/* The number sits on the rail and masks it, so the line never strikes through a digit. */
.pub-step-n {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-block: 3px 9px;
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary);
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
}

.pub-step-text { display: flex; flex-direction: column; gap: 10px; }
.pub-step-text h3 { font-size: 21px; }
.pub-step-text p { color: var(--color-text-2); max-width: 54ch; }
.pub-step code,
.pub-prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-surface-3);
  padding: 2px 6px;
  border-radius: 5px;
}

/* The picture is contained rather than floated in white, so it reads as a figure. */
.pub-step-pic {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pub-step-pic svg { display: block; width: 100%; height: auto; }
.pub-step-art { width: 100%; }

/* The embed line. */
.pub-embed {
  margin-top: var(--space-2);
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  overflow-x: auto;
  min-width: 0;
}
.pub-embed-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-code-dim);
}
.pub-embed pre { margin: 0; overflow-x: auto; }
.pub-embed code { color: var(--stone-100); font-size: var(--text-sm); line-height: 1.8; white-space: pre; font-family: var(--font-mono); }
.pub-embed code span { color: var(--coffee-300); }

/* FAQ. */
.pub-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pub-faq { display: flex; flex-direction: column; }
.pub-faq details { border-bottom: 1px solid var(--color-border); }
.pub-faq details:first-child { border-top: 1px solid var(--color-border); }
.pub-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.012em;
}
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary .pi { width: 18px; height: 18px; color: var(--color-text-3); transition: transform var(--duration-base) var(--ease); }
.pub-faq details[open] summary .pi { transform: rotate(180deg); }
.pub-faq details p { padding-bottom: var(--space-5); color: var(--color-text-2); max-width: 64ch; }

/* The closing panel. */
.pub-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: clamp(44px, 6vw, 80px) var(--pub-gutter);
  background: linear-gradient(152deg, var(--coffee-900), var(--coffee-700) 58%, var(--coffee-600));
  color: #FFFFFF;
  border-radius: var(--radius-xl);
}
.pub-cta::before {
  content: "";
  position: absolute;
  top: -42%; right: -8%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 185, 146, 0.32), transparent 62%);
}
.pub-cta > * { position: relative; }
.pub-cta h2 { color: #FFFFFF; }
.pub-cta p { color: rgba(255, 255, 255, 0.82); max-width: 54ch; font-size: var(--text-lg); }

/* ---------- Pricing page ----------------------------------------------------------------------------- */

.pub-cycle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
}
.pub-cycle a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
  text-decoration: none;
  transition: var(--transition-colors);
}
.pub-cycle a.is-on { background: var(--color-primary); color: #FFFFFF; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .pub-cycle a.is-on { color: var(--color-on-primary); }
.pub-cycle em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}
.pub-cycle a.is-on em { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

/* The featured card is lifted by a negative margin and its flag sits above that again, so the row
   needs room above it or it collides with the billing switch. */
.pub-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-12);
}
.pub-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pub-plan.is-featured {
  background: linear-gradient(172deg, var(--coffee-900), var(--coffee-800));
  border-color: var(--coffee-700);
  color: #FFFFFF;
  box-shadow: var(--shadow-lg);
  margin-block: calc(var(--space-6) * -1);
  padding-block: calc(var(--space-8) + var(--space-6));
}
.pub-plan.is-featured h2 { color: #FFFFFF; }
.pub-plan.is-featured .pub-plan-blurb,
.pub-plan.is-featured .pub-plan-billed,
.pub-plan.is-featured .pub-plan-note,
.pub-plan.is-featured .pub-plan-per { color: rgba(255, 255, 255, 0.72); }
.pub-plan.is-featured .pub-plan-limits li { color: rgba(255, 255, 255, 0.93); border-color: rgba(255, 255, 255, 0.15); }
.pub-plan.is-featured .pub-plan-list li { color: rgba(255, 255, 255, 0.86); }
.pub-plan.is-featured .pub-plan-list .pi { color: var(--coffee-300); }

.pub-plan-flag {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #3A2A06;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pub-plan-flag .pi { width: 12px; height: 12px; }
.pub-plan h2 { font-size: 26px; }
.pub-plan-blurb { font-size: 15px; color: var(--color-text-2); min-height: 4.7em; }
.pub-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; min-height: 44px; }
.pub-plan-figure { font-family: var(--font-display); font-size: 42px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.pub-plan-figure i { font-style: normal; font-size: 0.58em; margin-right: 2px; }
.pub-plan-figure-text { font-size: 30px; }
.pub-plan-per, .pub-plan-billed { font-size: var(--text-sm); color: var(--color-text-3); }
.pub-plan-limits { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; }
.pub-plan-limits li {
  padding: 11px 0;
  border-top: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}
.pub-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: var(--color-text-2); }
.pub-plan-list li { display: flex; align-items: flex-start; gap: 9px; }
.pub-plan-list .pi { width: 16px; height: 16px; margin-top: 4px; color: var(--color-primary); }
.pub-plan-note { font-size: var(--text-sm); color: var(--color-text-3); font-style: italic; margin-top: auto; }
.pub-plan-cta { width: 100%; }
.pub-plans-foot { margin-top: var(--space-8); max-width: 72ch; font-size: var(--text-sm); color: var(--color-text-3); }

.pub-table-scroll,
.pub-legal-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.pub-table, .pub-legal-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 700px; }
.pub-table th, .pub-table td,
.pub-legal-table th, .pub-legal-table td { padding: 14px var(--space-5); text-align: left; }
.pub-table thead th { background: var(--color-surface); border-bottom: 1px solid var(--color-border-strong); font-size: var(--text-sm); }
.pub-table tbody tr, .pub-legal-table tbody tr { border-bottom: 1px solid var(--color-border); }
.pub-table tbody tr:last-child { border-bottom: 0; }
.pub-table-group th {
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.pub-table td { color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.pub-table th[scope="row"] { font-weight: var(--weight-medium); color: var(--color-text); }
.pub-yes { width: 17px; height: 17px; color: var(--color-success); }
.pub-no { color: var(--color-text-3); }
.pub-legal-table { min-width: 460px; }
.pub-legal-table thead th { background: var(--color-surface-2); font-size: var(--text-sm); }

/* ---------- About page ------------------------------------------------------------------------------- */

.pub-facts { background: var(--color-surface-2); }
.pub-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }

.pub-contact-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pub-contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ---------- Forms on the public site ----------------------------------------------------------------- */

/* One .pub-field owns its own stack, and the gap between fields is twice the gap inside one, so a label
   groups with the input it belongs to rather than with the one above it. */
.pub-form-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
}
.pub-form-panel form { display: flex; flex-direction: column; gap: var(--space-6); }
.pub-form-title { font-size: var(--pub-d3); margin-bottom: 6px; }
.pub-form-intro { color: var(--color-text-2); font-size: 15px; margin-bottom: var(--space-8); }

.pub-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.pub-field label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.pub-field input,
.pub-field select,
.pub-field textarea {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.pub-field textarea { height: auto; min-height: 136px; padding: 13px 15px; line-height: 1.6; resize: vertical; }
.pub-field select {
  appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 21px) 22px, calc(100% - 16px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pub-field input::placeholder, .pub-field textarea::placeholder { color: var(--color-text-3); }
.pub-field input:hover, .pub-field select:hover, .pub-field textarea:hover { border-color: var(--color-text-3); }
.pub-field input:focus, .pub-field select:focus, .pub-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}
.pub-field-help { font-size: var(--text-sm); color: var(--color-text-3); }
.pub-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-danger-text);
}
.pub-field-error .pi { width: 14px; height: 14px; }
.pub-field.has-error input,
.pub-field.has-error select,
.pub-field.has-error textarea { border-color: var(--color-danger); background: var(--color-danger-soft); }

.pub-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }

.pub-alert {
  padding: var(--space-4) var(--space-5);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger-text);
  font-size: 15px;
}
.pub-alert p + p { margin-top: 6px; }

.pub-form-send { align-self: flex-start; }
.pub-form-fine { font-size: var(--text-sm); color: var(--color-text-3); }

/* The honeypot: a real field, off-screen rather than display:none so a bot still fills it. */
.pub-trap-wrap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pub-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.pub-sent-mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success-text);
}
.pub-sent-mark .pi { width: 26px; height: 26px; }
.pub-sent p { color: var(--color-text-2); max-width: 54ch; }

/* ---------- Contact page ----------------------------------------------------------------------------- */

.pub-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pub-contact-side { display: flex; flex-direction: column; gap: 14px; }
.pub-contact-rows { display: flex; flex-direction: column; gap: 14px; }
.pub-contact-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon value" "icon note";
  gap: 2px var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.pub-contact-row:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pub-contact-row .pub-card-icon { grid-area: icon; margin: 0; align-self: start; }
.pub-contact-row strong { grid-area: title; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.pub-contact-row > span:not(.pub-card-icon) {
  grid-area: value;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--color-primary-text);
  word-break: break-all;
}
.pub-contact-row em { grid-area: note; font-style: normal; font-size: var(--text-sm); color: var(--color-text-3); }

.pub-aside-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pub-aside-card h3 { font-size: var(--text-md); }
.pub-aside-card p { font-size: var(--text-sm); color: var(--color-text-2); }
.pub-aside-card .pub-btn { margin-top: 4px; }

/* ---------- Legal pages ------------------------------------------------------------------------------- */

.pub-legal-head .pub-lede { max-width: 46rem; }
.pub-legal-date { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-3); }

.pub-legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 235px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pub-toc { position: sticky; top: calc(var(--pub-header-h) + 24px); display: flex; flex-direction: column; gap: var(--space-4); }
.pub-toc h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.pub-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.pub-toc a {
  display: block;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--color-text-2);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.pub-toc a:hover { background: var(--color-surface); color: var(--color-text); }
.pub-toc a.is-on {
  border-left-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: var(--weight-semibold);
  background: var(--color-primary-soft);
}
.pub-toc-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pub-toc-foot p { font-size: var(--text-sm); color: var(--color-text-3); }

.pub-legal { max-width: 68ch; min-width: 0; }
.pub-legal section { padding-bottom: var(--space-10); }
.pub-legal h2 { font-size: 28px; margin-bottom: var(--space-4); }
.pub-legal h3 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-3); }
.pub-legal p { color: var(--color-text-2); margin-bottom: var(--space-4); }
.pub-legal ul, .pub-legal ol { color: var(--color-text-2); padding-left: 20px; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: 8px; }
.pub-legal-note {
  padding: var(--space-5);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-soft-2);
  border-radius: var(--radius-md);
  color: var(--color-primary-text);
  font-size: 15px;
}
.pub-legal-facts { list-style: none; padding: 0; }
.pub-legal-contact { border-top: 1px solid var(--color-border); padding-top: var(--space-8); }
.pub-legal-siblings { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: 15px; }

/* ---------- Responsive --------------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .pub-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .pub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-plan.is-featured { margin-block: 0; padding-block: var(--space-8); }
  .pub-plans { margin-top: var(--space-10); }
  .pub-grid-4, .pub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-faq-grid, .pub-legal-grid, .pub-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .pub-toc { position: static; }
  .pub-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* The picture drops below the words rather than squeezing beside them, but stays out of the rail. */
  .pub-step-with-art { grid-template-columns: 56px minmax(0, 1fr); }
  .pub-step-pic { grid-column: 2; margin-top: var(--space-5); }

  .pub-nav { display: none; }
  .pub-only-sm { display: inline-grid; }
  .pub-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-versus { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .pub-grid-2, .pub-grid-3, .pub-grid-4,
  .pub-plans, .pub-stats, .pub-field-row, .pub-flow, .pub-facts-grid { grid-template-columns: minmax(0, 1fr); }
  .pub-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .pub-spec { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .pub-step, .pub-step-with-art { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .pub-step::before { display: none; }
  .pub-step-n { justify-content: flex-start; padding-block: 0; background: none; }
  .pub-step-pic { grid-column: 1; margin-top: var(--space-2); }
  .pub-hero-actions .pub-btn { width: 100%; }
  .pub-docket-field { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pub-hide-sm { display: none; }
}

/* ---------- Motion off ------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pub *,
  .pub *::before,
  .pub *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Landing page — showing the product rather than describing it

   The page used to read as an essay about a support agent. These parts show
   the thing itself: the widget sitting on a real page, a conversation you can
   drive, and the six layouts it actually ships with.
   ========================================================================== */

/* ---------- The browser frame -------------------------------------------------------------------- */

/* The widget never appears on its own: it lives in the corner of somebody's site. So the hero draws
   the site, and puts the widget where it really sits. */
.pub-browser {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pub-browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.pub-browser-dots { display: flex; gap: 6px; flex: none; }
.pub-browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); }
.pub-browser-url {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The page under the widget: never readable, only enough to say "this is a shop". */
.pub-browser-page { position: relative; padding: var(--space-6); min-height: 560px; }
.pub-skeleton { display: flex; flex-direction: column; gap: 11px; opacity: 0.5; }
.pub-skeleton i { display: block; height: 10px; border-radius: 5px; background: var(--color-surface-3); }
.pub-skeleton .pub-sk-title { height: 18px; width: 46%; background: var(--color-border-strong); }
.pub-skeleton .pub-sk-wide { width: 88%; }
.pub-skeleton .pub-sk-mid { width: 72%; }
.pub-skeleton .pub-sk-short { width: 54%; }
.pub-sk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 10px; }
.pub-sk-row span { height: 64px; border-radius: var(--radius-md); background: var(--color-surface-3); }

/* ---------- The widget, as it really looks ------------------------------------------------------- */

.pub-widget {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  margin-left: auto;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 48px -20px rgba(41, 37, 36, 0.4);
  overflow: hidden;
}
[data-theme="dark"] .pub-widget { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.8); }

.pub-widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--coffee-600), var(--coffee-700));
  color: #FFFFFF;
}
.pub-widget-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.pub-widget-avatar .pi { width: 16px; height: 16px; }
.pub-widget-head strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pub-widget-head em { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 11px; opacity: 0.85; }
.pub-widget-head em i { width: 5px; height: 5px; border-radius: 50%; background: var(--coffee-300); }

.pub-widget-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  background: var(--color-surface-2);
  min-height: 200px;
  justify-content: flex-end;
}
/* The demo panel keeps the height of its longest answer, so picking a question does not make the
   page jump; before a click that space is simply the empty chat it really is. */
.pub-try .pub-widget-body { min-height: 300px; }
.pub-widget-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-3);
  font-size: var(--text-sm);
}
.pub-widget-foot i { margin-left: auto; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--color-primary); }

/* A message. The same shapes the widget itself uses. */
.pub-msg { display: flex; }
.pub-msg-them { justify-content: flex-end; }
.pub-msg p {
  max-width: 86%;
  margin: 0;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.pub-msg-them p { background: var(--color-primary); color: #FFFFFF; border-bottom-right-radius: 4px; }
.pub-msg-us p { background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
[data-theme="dark"] .pub-msg-them p { color: var(--color-on-primary); }

/* The refusal, marked so it reads as a decision rather than a failure. */
.pub-msg-refuse p {
  background: var(--color-surface);
  border: 1px dashed var(--color-warning);
  border-bottom-left-radius: 4px;
}
.pub-msg-refuse b {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-warning-text);
}
.pub-msg-refuse b .pi { width: 12px; height: 12px; }

/* The ticket, as a small docket inside the chat. */
.pub-msg-ticket p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-soft-2);
  border-bottom-left-radius: 4px;
}
.pub-msg-ticket span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.pub-msg-ticket span:first-child .pi { width: 12px; height: 12px; }
.pub-msg-ticket strong { font-size: var(--text-sm); }
.pub-msg-ticket em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-2); }

/* "Agent is typing" — three dots, the one motif every chat product has. */
.pub-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
  border-radius: 14px 14px 14px 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.pub-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-3);
  animation: pub-bounce 1.1s infinite ease-in-out;
}
.pub-typing i:nth-child(2) { animation-delay: 0.15s; }
.pub-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pub-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Each message arrives rather than appearing. */
html[data-motion] .pub-msg,
html[data-motion] .pub-typing-row { animation: pub-rise 340ms var(--ease) both; }

/* ---------- Ask it something: the scripted demo --------------------------------------------------- */

.pub-try {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.pub-try-chips { display: flex; flex-direction: column; gap: 10px; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.pub-try-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  font: inherit;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease);
}
.pub-try-chip:hover { border-color: var(--color-primary); transform: translateX(3px); }
.pub-try-chip[aria-pressed="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-text); }
.pub-try-chip .pi { width: 16px; height: 16px; color: var(--color-primary); }
.pub-try-note { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-3); max-width: 46ch; }

/* ---------- The six layouts ------------------------------------------------------------------------ */

.pub-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pub-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.pub-layout:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pub-layout h3 { font-size: var(--text-md); }
.pub-layout p { font-size: var(--text-sm); color: var(--color-text-2); }

/* A schematic of the layout: a page, and the widget where that layout puts it. */
.pub-layout-art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.pub-layout-art::before {
  content: "";
  position: absolute;
  inset: 10px 10px auto 10px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-surface-3);
}
.pub-layout-art::after {
  content: "";
  position: absolute;
  inset: 22px 34% auto 10px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-surface-3);
}
.pub-layout-art b {
  position: absolute;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--coffee-500), var(--coffee-700));
  box-shadow: 0 6px 14px -8px rgba(41, 37, 36, 0.8);
}
.pub-layout-art s { position: absolute; border-radius: 50%; background: var(--color-primary); }

/* classic: a window above a round launcher */
.pub-art-classic b { right: 10px; bottom: 26px; width: 42%; height: 52%; }
.pub-art-classic s { right: 10px; bottom: 8px; width: 14px; height: 14px; }
/* sidebar: a full-height panel on the right edge */
.pub-art-sidebar b { right: 0; top: 0; bottom: 0; width: 38%; border-radius: 0; }
/* spotlight: a centred dialog over a dimmed page */
.pub-art-spotlight { background: var(--color-surface-3); }
.pub-art-spotlight b { left: 18%; right: 18%; top: 18%; bottom: 18%; }
/* tab: a handle on the edge, panel beside it */
.pub-art-tab b { right: 0; top: 24%; bottom: 24%; width: 34%; border-radius: 6px 0 0 6px; }
.pub-art-tab s { right: 36%; top: 38%; width: 7px; height: 24%; border-radius: 4px; }
/* persona: a big avatar hero */
.pub-art-persona b { right: 10px; bottom: 10px; width: 46%; height: 62%; }
.pub-art-persona s { right: 28%; bottom: 46%; width: 20px; height: 20px; background: var(--coffee-300); }
/* messenger: a message pill beside the launcher */
.pub-art-messenger b { right: 30px; bottom: 10px; width: 40%; height: 16%; border-radius: var(--radius-full); }
.pub-art-messenger s { right: 8px; bottom: 8px; width: 16px; height: 16px; }

/* ---------- Narrow ---------------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .pub-try { grid-template-columns: minmax(0, 1fr); }
  .pub-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pub-layouts { grid-template-columns: minmax(0, 1fr); }
  .pub-browser-page { min-height: 0; padding: var(--space-4); }
  .pub-sk-row { display: none; }
  /* On a phone the widget fills the frame, which is what it really does. */
  .pub-widget { position: static; max-width: none; margin: var(--space-4) 0 0; box-shadow: none; }
  .pub-widget-body { max-height: none; }
}