/* ==========================================================================
   Mergical
   Shared stylesheet. See DESIGN.md for the reasoning behind the choices.
   Order: fonts, tokens, reset, layout, components, page bits, utilities.
   ========================================================================== */

/* --- 1. Fonts. Self hosted, latin subset only, no external requests. ------ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 112%;
  font-display: swap;
  src: url('fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/plexsans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  --ink: #12191C;
  --paper: #F4F2EC;
  --rule: #DDD8CC;
  --eucalypt: #0E6B57;
  --ochre: #B9791B;
  --slate: #55606B;

  /* Derived, for the cases where the core value would not pass AA */
  --eucalypt-200: #4FBFA3;
  --eucalypt-dark: #0A5344;
  --ochre-ink: #8A5510;
  --white: #FFFFFF;
  --paper-2: #EAE7DE;

  --display: 'Archivo', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 10px;
}

/* --- 3. Reset and base --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Hierarchy does the work the palette deliberately does not. The jump from
   body to h2 to h1 is wide on purpose, and tracking tightens as size grows. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 3.7rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.9rem, 3.9vw, 2.85rem);
  line-height: 1.0;
  letter-spacing: -0.031em;
}
h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
}
h4 { font-size: 0.9375rem; line-height: 1.28; letter-spacing: -0.008em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--eucalypt-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

img, svg { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

strong { font-weight: 600; }

::selection { background: var(--eucalypt); color: var(--white); }

/* Focus. Visible everywhere, on both grounds. */
:focus-visible {
  outline: 3px solid var(--eucalypt);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.chat-panel :focus-visible,
.site-foot :focus-visible { outline-color: var(--eucalypt-200); }

/* --- 4. Layout scaffolding ----------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); border-top: 1px solid var(--rule); }
.band-first { border-top: 0; }

.on-dark {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.on-dark h2, .on-dark h3, .on-dark h4 { color: var(--paper); }
.on-dark a { color: var(--eucalypt-200); }
.on-dark a:hover { color: var(--white); }
.on-dark .eyebrow { color: var(--eucalypt-200); }
.on-dark .eyebrow .num { color: rgba(244, 242, 236, 0.55); }
.on-dark .lede, .on-dark .muted { color: rgba(244, 242, 236, 0.76); }

.band-quiet { background: var(--paper-2); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* Headings run to a tight measure so they break into strong stacked lines.
   The lede underneath is allowed to run wider. */
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.sec-head h2 { margin-bottom: 0; max-width: 20ch; }
.sec-head .lede { margin-top: 1.3em; }

/* Small, tight, and set well away from the heading it labels. */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--eucalypt-dark);
  margin-bottom: 1.5rem;
}
.eyebrow .num { color: var(--slate); margin-right: 0.9em; }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--slate);
  max-width: 58ch;
}
.muted { color: var(--slate); }
.small { font-size: 0.9375rem; }
.mono { font-family: var(--mono); font-weight: 500; }

/* --- 5. Header ----------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-head .wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  min-height: 72px;
  flex-wrap: wrap;
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--ink); }

/* The mark. Pure CSS, takes the brand colour from `color`. */
.mark {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: currentColor;
  color: var(--eucalypt);
  position: relative;
  overflow: hidden;
  flex: none;
}
/* Left of the seam: the loose pile. */
.mark::before {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 7px;
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--paper);
  transform: rotate(-11deg);
  box-shadow:
    0.5px 4.5px 0 -0.2px var(--paper),
    -0.5px 9px 0 -0.4px var(--paper);
  opacity: 0.85;
}
/* Right of the seam: the ordered stack. */
.mark::after {
  content: "";
  position: absolute;
  right: 4.5px;
  top: 6.5px;
  width: 8px;
  height: 14px;
  background: repeating-linear-gradient(
    180deg,
    var(--paper) 0 2px,
    transparent 2px 4px
  );
}
.on-dark .mark, .site-foot .mark { color: var(--eucalypt-200); }
.on-dark .mark::before, .site-foot .mark::before {
  background: var(--ink);
  box-shadow: 0.5px 4.5px 0 -0.2px var(--ink), -0.5px 9px 0 -0.4px var(--ink);
}
.on-dark .mark::after, .site-foot .mark::after {
  background: repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 4px);
}

/* Nav. A native disclosure, so it works with JavaScript switched off.
   The <ul> must be a direct child of <details> or the browser's own
   open and closed handling does not apply to it. */
.site-head nav { margin-left: auto; }
.nav-toggle {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  user-select: none;
  display: inline-block;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-d[open] .nav-toggle { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.nav-list {
  list-style: none;
  margin: 0.75rem 0 0.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.nav-list li { margin: 0; }
.nav-list a {
  display: block;
  padding: 0.65rem 0.2rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9875rem;
  border-bottom: 1px solid var(--rule);
}
.nav-list a[aria-current="page"] { color: var(--eucalypt-dark); font-weight: 600; }

/* On narrow screens the open list hangs off the header rather than trying to
   grow inside a flex item the width of the button. */
@media (max-width: 899px) {
  .nav-d[open] .nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0.25rem var(--gutter) 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 26px -20px rgba(18, 25, 28, 0.55);
  }
  .nav-list a:last-child { border-bottom: 0; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-d > .nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    width: auto;
  }
  .nav-list a {
    border-bottom: 0;
    padding: 0.25rem 0;
    position: relative;
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 2px;
    background: var(--eucalypt);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.16s ease;
  }
  .nav-list a:hover::after,
  .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-list a::after { transition: none; }
}

.head-phone {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 2px solid var(--eucalypt);
  padding-bottom: 1px;
}
.head-phone:hover { color: var(--eucalypt-dark); }

/* --- 6. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.95rem 1.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.btn-primary { background: var(--eucalypt); color: var(--white); }
.btn-primary:hover { background: var(--eucalypt-dark); color: var(--white); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--ink); }

.on-dark .btn-primary { background: var(--eucalypt-200); color: var(--ink); }
.on-dark .btn-primary:hover { background: var(--white); color: var(--ink); }
.on-dark .btn-ghost { color: var(--paper); border-color: rgba(244, 242, 236, 0.35); }
.on-dark .btn-ghost:hover { background: rgba(244, 242, 236, 0.1); color: var(--paper); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 1.9rem;
}
.btn-note {
  font-size: 0.9375rem;
  color: var(--slate);
  margin-top: 1rem;
}
.on-dark .btn-note { color: rgba(244, 242, 236, 0.7); }

/* --- 7. Hero ------------------------------------------------------------- */

.hero { padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }

.hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-top { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}

.hero h1 { margin-bottom: 0.42em; }
.hero .lede { max-width: 48ch; }

/* --- 8. The Seam. The signature element. --------------------------------- */

.seam-fig { margin: 0; }

.seam {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.9rem;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem 1.25rem;
  box-shadow: 0 1px 0 rgba(18, 25, 28, 0.04), 0 18px 40px -28px rgba(18, 25, 28, 0.35);
}
@media (min-width: 560px) {
  .seam {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr);
    grid-template-rows: 1fr auto;
    gap: 1.1rem;
    padding: 1.5rem 1.4rem 1.25rem;
  }
}

.seam-label {
  position: absolute;
  top: -0.62rem;
  left: 1.15rem;
  background: var(--white);
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Left: the pile. */
.seam-in {
  position: relative;
  min-height: 210px;
  overflow: hidden;
}
@media (min-width: 560px) { .seam-in { min-height: 296px; } }

.slip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, 62px);
  transform: rotate(var(--r, 0deg));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 5px 6px 7px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.5625rem;
  line-height: 1.15;
  color: var(--slate);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px -3px rgba(18, 25, 28, 0.45);
}
/* The faint ruled lines on each slip. */
.slip::after {
  content: "";
  display: block;
  margin-top: 5px;
  height: 11px;
  background: repeating-linear-gradient(
    180deg,
    var(--rule) 0 1px,
    transparent 1px 4px
  );
}
.slip.is-tall::after { height: 22px; }
.slip.is-torn { border-bottom: 1px dashed var(--rule); }

/* Centre: the seam itself. */
.seam-slot {
  position: relative;
  height: 4px;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--eucalypt) 14%, var(--eucalypt) 86%, transparent);
  justify-self: center;
}
@media (min-width: 560px) {
  .seam-slot {
    height: auto;
    width: 4px;
    background: linear-gradient(180deg, transparent, var(--eucalypt) 14%, var(--eucalypt) 86%, transparent);
  }
}

/* Right: the ledger. */
.seam-out {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.lrow {
  display: grid;
  grid-template-columns: 3.9em minmax(0, 1fr) 4.6em;
  gap: 0.45rem;
  align-items: baseline;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.625rem;
  color: var(--ink);
  padding: 5px 7px;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid transparent;
  white-space: nowrap;
}
.lrow .lr-ref { overflow: hidden; text-overflow: ellipsis; }
.lrow .lr-amt { text-align: right; font-variant-numeric: tabular-nums; }
.lrow .lr-date { color: var(--slate); }
.lrow .lr-dest { display: none; color: var(--eucalypt-dark); }
@media (min-width: 760px) {
  .lrow { grid-template-columns: 4em minmax(0, 1fr) 5em 3.6em; font-size: 0.6875rem; }
  .lrow .lr-dest { display: block; }
}

/* The one row handed back to a person. The point of the whole graphic.
   It must never rely on the ochre alone to be understood: it carries a
   heavier left edge, and a plain English line that stays visible at every
   width, including 360px where the destination column is dropped. */
.lrow.is-flagged {
  background: rgba(185, 121, 27, 0.12);
  border-color: rgba(185, 121, 27, 0.45);
  border-left: 3px solid var(--ochre);
  color: var(--ochre-ink);
  white-space: normal;
  row-gap: 0.3rem;
  margin-top: 2px;
}
.lrow.is-flagged .lr-date,
.lrow.is-flagged .lr-dest { color: var(--ochre-ink); }

.lr-flag {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.4rem;
  font-size: 0.625rem;
  line-height: 1.35;
  color: var(--ochre-ink);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.lr-flag .tag {
  flex: none;
  background: var(--ochre-ink);
  color: var(--paper);
  border-radius: 2px;
  padding: 0.1em 0.36em;
  letter-spacing: 0.09em;
}
.lr-flag .why { text-transform: none; letter-spacing: 0.01em; }

.seam-note {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.4;
}
.seam-note .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ochre);
  flex: none;
}

/* Motion, only where it is welcome. The static state above is the finished state. */
@media (prefers-reduced-motion: no-preference) {
  .slip {
    opacity: 0;
    animation: slipIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--d, 0s);
  }
  .lrow {
    opacity: 0;
    animation: rowIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--d, 0s);
  }
  .seam-slot {
    transform-origin: center;
    animation: slotIn 0.6s ease forwards;
  }
  @keyframes slipIn {
    from { opacity: 0; transform: rotate(var(--r, 0deg)) translate(-14px, 6px) scale(0.96); }
    to   { opacity: 1; transform: rotate(var(--r, 0deg)) translate(0, 0) scale(1); }
  }
  @keyframes rowIn {
    from { opacity: 0; transform: translateX(-9px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slotIn {
    from { opacity: 0; transform: scaleY(0.3); }
    to   { opacity: 1; transform: scaleY(1); }
  }
}

/* --- 9. Chat panel ------------------------------------------------------- */

.chat-panel {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: clamp(1.35rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.35rem, 3vw, 2.25rem);
}
@media (min-width: 900px) {
  .chat-panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}

.chat-intro h2 {
  color: var(--paper);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  margin-bottom: 0.5rem;
}
.chat-intro p {
  color: rgba(244, 242, 236, 0.75);
  font-size: 0.9875rem;
  line-height: 1.55;
}
.chat-intro .eyebrow { color: var(--eucalypt-200); }

.chat-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(244, 242, 236, 0.6);
  margin-top: 1.1rem;
}
.chat-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--eucalypt-200);
  flex: none;
}

.chat-box {
  background: rgba(244, 242, 236, 0.055);
  border: 1px solid rgba(244, 242, 236, 0.14);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  overflow: hidden;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  max-height: 46vh;
  min-height: 186px;
  padding: 1rem 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 242, 236, 0.3) transparent;
}

.msg {
  max-width: 92%;
  font-size: 0.9375rem;
  line-height: 1.55;
  border-radius: 9px;
  padding: 0.7rem 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-bot {
  align-self: flex-start;
  background: rgba(244, 242, 236, 0.09);
  color: var(--paper);
  border-top-left-radius: 3px;
}
.msg-you {
  align-self: flex-end;
  background: var(--eucalypt-200);
  color: var(--ink);
  border-top-right-radius: 3px;
  font-weight: 500;
}
.msg-error {
  align-self: flex-start;
  background: rgba(185, 121, 27, 0.2);
  border: 1px solid rgba(185, 121, 27, 0.55);
  color: #F2DBB0;
}
.msg-role {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 0.3rem;
}

/* Typing state */
.typing { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--eucalypt-200);
  opacity: 0.45;
}
@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: blink 1.15s infinite ease-in-out; }
  .typing i:nth-child(2) { animation-delay: 0.16s; }
  .typing i:nth-child(3) { animation-delay: 0.32s; }
  @keyframes blink { 0%, 70%, 100% { opacity: 0.35; } 35% { opacity: 1; } }
}

.chat-seeds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem 1rem 0.85rem;
}
.seed {
  font-family: var(--body);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: left;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(244, 242, 236, 0.24);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.seed:hover { background: rgba(244, 242, 236, 0.11); border-color: rgba(244, 242, 236, 0.5); }
@media (prefers-reduced-motion: reduce) { .seed { transition: none; } }

.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid rgba(244, 242, 236, 0.14);
  background: rgba(18, 25, 28, 0.4);
}
.chat-input {
  flex: 1;
  min-width: 0;
  font-family: var(--body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--paper);
  background: rgba(244, 242, 236, 0.07);
  border: 1px solid rgba(244, 242, 236, 0.2);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  resize: none;
  max-height: 7rem;
  overflow-y: auto;
}
.chat-input::placeholder { color: rgba(244, 242, 236, 0.45); }
.chat-input:focus { border-color: var(--eucalypt-200); }

.chat-send {
  flex: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--eucalypt-200);
  border: 0;
  border-radius: 8px;
  padding: 0 1.1rem;
  cursor: pointer;
}
.chat-send:hover { background: var(--white); }
.chat-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* The chat is the one part of the site that needs JavaScript, so the live
   widget stays hidden until a script confirms it can run. Without it, the
   fallback below is what visitors get. */
.chat-live { display: none; flex-direction: column; flex: 1; min-height: 0; }
.js .chat-live { display: flex; }
.js .chat-fallback { display: none; }

.chat-fallback {
  padding: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(244, 242, 236, 0.8);
}
.chat-fallback a { color: var(--eucalypt-200); }
.chat-legal {
  font-size: 0.8125rem;
  color: rgba(244, 242, 236, 0.55);
  margin-top: 0.85rem;
}

/* --- 10. Ledger rows. The list style used across the site. --------------- */

.ledger { border-top: 1px solid var(--rule); }

.lgr {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.15rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 800px) {
  .lgr { grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr); gap: 0 2.5rem; }
}

.lgr-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--slate);
  letter-spacing: 0.05em;
  padding-top: 0.3rem;
}
.lgr-name { margin: 0; }
.lgr-body { margin: 0; color: var(--slate); max-width: 64ch; }
.lgr-body p { margin-bottom: 0.7em; }
.lgr-body p:last-child { margin-bottom: 0; }

/* Tool chips: naming the actual tools, per the brief. */
.tools {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.9rem 0 0;
  padding: 0;
}
.tools li {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--slate);
  border: 1px solid var(--rule);
  background: var(--white);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}
.band-quiet .tools li { background: var(--paper); }

/* --- 11. Steps ----------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.steps li {
  margin: 0;
  background: var(--paper);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.band-quiet .steps li { background: var(--paper-2); }
.steps h3 { margin: 0; }
.steps p { color: var(--slate); font-size: 0.9375rem; margin: 0; }
.step-n {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  color: var(--eucalypt-dark);
}
.step-when {
  margin-top: auto;
  padding-top: 0.7rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  border-top: 1px solid var(--rule);
}

/* --- 12. Cards, tiers, generic grids ------------------------------------- */

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
}
.card h2, .card h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin-bottom: 0.5rem;
}
.card p { color: var(--slate); font-size: 0.9688rem; }
.on-dark .card {
  background: rgba(244, 242, 236, 0.055);
  border-color: rgba(244, 242, 236, 0.16);
}
.on-dark .card p { color: rgba(244, 242, 236, 0.76); }

.tier { display: flex; flex-direction: column; }
.tier-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eucalypt-dark);
  margin-bottom: 0.7rem;
}
.tier-shape {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper-2);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 1rem;
}
.tier ul { padding-left: 1.1em; color: var(--slate); font-size: 0.9375rem; margin-bottom: 0; }

/* A marked list, used for what is and is not included. */
.plain { list-style: none; padding: 0; margin: 0; }
.plain li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}
.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--eucalypt);
}
.plain-no li::before { background: var(--ochre); }
.on-dark .plain li::before { background: var(--eucalypt-200); }
.on-dark .plain-no li::before { background: var(--ochre); }

/* --- 13. Forms ----------------------------------------------------------- */

.form { max-width: 32rem; }
.form-row { margin-bottom: 1.15rem; }

.form label {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.45rem;
}
.form label .opt { text-transform: none; letter-spacing: 0; }

.form input,
.form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
}
.form textarea { resize: vertical; min-height: 5.5rem; }
.form input:focus, .form textarea:focus { border-color: var(--eucalypt); }

.on-dark .form label { color: rgba(244, 242, 236, 0.62); }
.on-dark .form input, .on-dark .form textarea {
  background: rgba(244, 242, 236, 0.07);
  border-color: rgba(244, 242, 236, 0.22);
  color: var(--paper);
}
.on-dark .form input:focus, .on-dark .form textarea:focus { border-color: var(--eucalypt-200); }

/* Honeypot. Hidden from people, reachable by bots. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-msg {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  background: rgba(185, 121, 27, 0.12);
  border: 1px solid rgba(185, 121, 27, 0.45);
  color: var(--ochre-ink);
}
.on-dark .form-msg { color: #F2DBB0; }

/* The real confirmation state, not an alert box. */
.form-done {
  border: 1px solid var(--eucalypt);
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(14, 107, 87, 0.07);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 32rem;
}
.form-done h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin-bottom: 0.4rem;
}
.form-done p { color: var(--slate); }
.on-dark .form-done {
  background: rgba(79, 191, 163, 0.12);
  border-color: var(--eucalypt-200);
}
.on-dark .form-done p { color: rgba(244, 242, 236, 0.78); }

/* --- 14. Contact rail ---------------------------------------------------- */

.rail { display: flex; flex-direction: column; gap: 1.5rem; }
.rail-item { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.on-dark .rail-item { border-color: rgba(244, 242, 236, 0.2); }
.rail-item h2 { font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.rail-item p { font-size: 0.9375rem; color: var(--slate); margin-bottom: 0.4rem; }
.on-dark .rail-item p { color: rgba(244, 242, 236, 0.72); }
.rail-big {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.on-dark .rail-big { color: var(--paper); }
.rail-big:hover { color: var(--eucalypt-dark); }
.on-dark .rail-big:hover { color: var(--eucalypt-200); }

/* --- 15. Prose (about, privacy, 404) ------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.5em; }

.todo {
  border: 1px dashed var(--ochre);
  background: rgba(185, 121, 27, 0.08);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.todo strong {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ochre-ink);
  display: block;
  margin-bottom: 0.35rem;
}

/* --- 16. Footer ---------------------------------------------------------- */

/* The one dark full bleed section on the site. It carries the closing call
   to action at display size, which is where the page gets its weight from.
   Everything above it stays on paper. */
.site-foot {
  background: var(--ink);
  color: rgba(244, 242, 236, 0.72);
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
}

.foot-cta {
  padding-bottom: clamp(3rem, 6vw, 5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(244, 242, 236, 0.16);
}
.foot-cta h2 {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.042em;
  max-width: 15ch;
  margin-bottom: 0;
}
.foot-cta .lede { margin-top: 1.3em; }
.foot-cta .btn-row { margin-top: 2.4rem; }
.site-foot a { color: rgba(244, 242, 236, 0.85); text-decoration: none; }
.site-foot a:hover { color: var(--white); text-decoration: underline; }
.site-foot .brand { color: var(--paper); font-size: 1.15rem; }
.site-foot .brand:hover { color: var(--paper); }

.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(244, 242, 236, 0.16);
}
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }

.foot-grid h3 {
  color: rgba(244, 242, 236, 0.5);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.foot-blurb { max-width: 34ch; margin-top: 1rem; color: rgba(244, 242, 236, 0.6); }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: 0.5rem; }

.foot-end {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.875rem;
  color: rgba(244, 242, 236, 0.5);
}

/* --- 17. Illustrative examples -------------------------------------------
   Mergical has no client names or numbers to publish, so anything that reads
   like a case study has to be labelled as invented. This is that label, and
   it is deliberately not decorative.
   ------------------------------------------------------------------------- */

.eg {
  border-left: 2px solid var(--rule);
  padding-left: 1.2rem;
  margin-top: 1.35rem;
}
.eg-label {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ochre-ink);
  margin-bottom: 0.5rem;
}
.eg p { font-size: 0.9688rem; color: var(--slate); }

/* --- 18. Ad landing page --------------------------------------------------
   start.html only. No nav, one job, nothing else clickable.
   ------------------------------------------------------------------------- */

.lp-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.lp-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  min-height: 72px;
  padding-block: 0.75rem;
}
.lp-head .brand { pointer-events: none; }

.form-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: 0 1px 0 rgba(18, 25, 28, 0.04), 0 20px 44px -30px rgba(18, 25, 28, 0.4);
  max-width: none;
}
.form-card h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: 0.4rem;
}
.form-card .form { max-width: none; }
.form-card .btn { width: 100%; }
.form-card .form-intro { margin-bottom: 1.5rem; }

.lp-walkaway {
  margin-top: 2.5rem;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.lp-phone {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.lp-phone p { font-size: 0.875rem; color: var(--slate); margin-bottom: 0.2rem; }

.lp-foot {
  border-top: 1px solid var(--rule);
  padding-block: 2rem;
  font-size: 0.875rem;
  color: var(--slate);
}
.lp-foot .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

/* --- 19. Utilities ------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.stack > * + * { margin-top: 1.15rem; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }