/* ---------------------------------------------------------------------------
   MeetStack — getmeetstack.com

   Palette is sampled from the product, not chosen from a mood board:
   --ink is the app's "Midnight" digital-card theme, --signal is the Events
   accent (the Show QR Code button, the Events tab). Colour carries meaning
   here: signal = capture / events / price, violet = identity / your card.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo Expanded';
  src: url('/fonts/archivo-expanded-var.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #EEEFF3;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --ink: #15162A;
  --ink-2: #5A5E73;
  /* Surfaces that are midnight in BOTH themes (the wedge band, the Business
     column, the footer). Never use --ink for a background: it inverts in dark
     mode, because there it is the body text colour. */
  --ink-fill: #15162A;
  --signal: #E8590C;
  --signal-ink: #C2410C;   /* small orange text: 5.18:1 on white */
  --violet: #5B4BE8;
  --rule: #C9CCD8;
  --rule-soft: #DFE1E9;

  --on-ink: #F2F3F7;
  --on-ink-2: #A2A6BE;
  --on-ink-rule: rgba(255,255,255,.15);
  --signal-on-ink: #FF7A2F;
  --violet-on-ink: #9B8CFF;

  --shadow: 0 1px 2px rgba(21,22,42,.05), 0 12px 32px -14px rgba(21,22,42,.22);

  --display: 'Archivo Expanded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --sect: clamp(60px, 7.4vw, 94px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E0F1C;
    --surface: #17182A;
    --surface-2: #1D1E32;
    --ink: #F2F3F7;
    --ink-2: #A2A6BE;
    --signal: #FF7A2F;
    --signal-ink: #FF9153;
    --violet: #9B8CFF;
    --ink-fill: #191A2E;
    --rule: #393C55;
    --rule-soft: #2F3145;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -16px rgba(0,0,0,.7);
  }
}

*, *::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(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.u-hide {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 8px;
  background: var(--ink-fill); color: var(--on-ink);
  padding: 10px 16px; border-radius: 8px; z-index: 60;
  text-decoration: none; font-weight: 600;
}
.skip:focus { inset-inline-start: 12px; }

/* --- layout primitives ---------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.block { padding-block: var(--sect); }
.band-ink { background: var(--ink-fill); color: var(--on-ink); }
.band-ink a { color: var(--on-ink); }

/* --- type ----------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 780;
  font-size: clamp(2.05rem, 5.4vw, 4.15rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-family: var(--display);
  font-weight: 730;
  font-size: clamp(1.65rem, 4.1vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 18ch;
  text-wrap: balance;
}
.h2-wide { max-width: 24ch; }
.h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: -0.004em;
  margin: 0 0 8px;
}
.lede { font-size: clamp(1.06rem, 2.1vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin: 0; }
.prose { margin: 0; max-width: 62ch; color: var(--ink-2); }
.prose + .prose { margin-top: 1em; }
.cap { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 22px;
  border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #23253F; }
.btn-signal { background: var(--signal); color: #15162A; }   /* ink on orange = 4.97:1 */
.btn-signal:hover { background: #D14F08; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-outline:hover { border-color: var(--ink-2); }
.btn-onink { background: var(--on-ink); color: #15162A; }
.btn-onink:hover { background: #FFFFFF; }
.btn-quiet {
  background: transparent; color: var(--ink); border-color: var(--on-ink-rule);
  min-height: 50px;
}
.btn svg { flex: none; }

@media (prefers-color-scheme: dark) {
  .btn-primary { background: var(--on-ink); color: #15162A; }
  .btn-primary:hover { background: #FFFFFF; }
  .btn-onink { background: #F2F3F7; color: #15162A; }
}

.link-plain { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; font-weight: 600; display: inline-block; padding-block: 6px; }

/* --- nav ------------------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-in { display: flex; align-items: center; gap: 20px; min-height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-inline-end: auto; padding-block: 8px; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand b { font-family: var(--display); font-weight: 720; font-size: 1.06rem; letter-spacing: -0.005em; }
.nav-links { display: none; gap: 26px; }
.nav-links a { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink-2); display: inline-block; padding-block: 10px; }
.nav-links a:hover { color: var(--ink); }
.nav .btn { min-height: 44px; padding: 9px 16px; font-size: .93rem; border-radius: 10px; }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(44px, 7vw, 80px) clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; gap: clamp(34px, 5vw, 52px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.hero .lede { margin-top: 0; }
.hero-hook { margin: 14px 0 0; font-size: .95rem; }

/* The headline runs the full content width, like signage over an entrance;
   the supporting copy and the device sit underneath it in two columns. */
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.06fr .94fr; column-gap: 72px; row-gap: 40px; align-items: start; }
  .hero-head { grid-column: 1 / -1; }
  .hero-copy { grid-column: 1; grid-row: 2; padding-top: 6px; }
  .hero-media { grid-column: 2; grid-row: 2; }
  /* A whole 2.17:1 phone makes the hero over 1000px tall for 250px of copy.
     Crop it and fade the cut into the page, so the fold arrives at the CTA
     rather than 700px below it. A painted gradient rather than mask-image:
     masking promotes this to its own composited layer, and it is the LCP
     element — not somewhere to spend a rendering risk for a cosmetic fade. */
  .hero-media { position: relative; max-height: 500px; overflow: hidden; }
  .hero-media::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 140px;
    background: linear-gradient(to bottom, transparent, var(--paper) 88%);
    pointer-events: none;
  }
}

/* Device frame drawn in CSS so it stays crisp, theme-aware and free of bytes.
   Corner radius is a percentage pair so it tracks the real display geometry
   (r = 12.5% of width; the screen is 2.173x taller than it is wide). */
.phone { position: relative; width: 100%; max-width: 300px; margin-inline: auto; }
.phone-frame {
  padding: 2.1%;
  border-radius: 14.2% / 6.55%;
  background: linear-gradient(160deg, #3A3C57, #15162A 42%, #2A2C43);
  box-shadow: var(--shadow);
}
.phone img { width: 100%; height: auto; border-radius: 12.5% / 5.75%; background: var(--surface-2); }
@media (min-width: 940px) { .phone { max-width: 328px; margin-inline: auto 0; } }

/* --- trust strip ---------------------------------------------------------- */

.trust { border-block: 1px solid var(--rule-soft); background: var(--surface); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; }
.trust-cell {
  padding: 20px 4px; font-size: .95rem; font-weight: 600;
  border-bottom: 1px solid var(--rule-soft);
}
.trust-cell:nth-child(odd) { padding-inline-end: 16px; border-inline-end: 1px solid var(--rule-soft); }
.trust-cell:nth-child(even) { padding-inline-start: 16px; }
.trust-cell:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 820px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-cell { border-bottom: 0; padding-block: 24px; padding-inline: 24px; border-inline-end: 1px solid var(--rule-soft); }
  .trust-cell:first-child { padding-inline-start: 0; }
  .trust-cell:last-child { border-inline-end: 0; padding-inline-end: 0; }
  .trust-cell:nth-child(odd) { padding-inline-end: 24px; }
  .trust-cell:nth-child(even) { padding-inline-start: 24px; }
}

/* --- problem band --------------------------------------------------------- */

.problem { position: relative; background: #0E0F1C; color: var(--on-ink); isolation: isolate; }
.problem-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  border-radius: 0;
}
.problem::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(14,15,28,.94) 0%, rgba(14,15,28,.88) 46%, rgba(14,15,28,.58) 100%);
}
.problem-in { padding-block: clamp(72px, 11vw, 132px); max-width: 30rem; }
.problem .prose { color: #C9CCDC; }

/* --- steps ---------------------------------------------------------------- */

.steps { display: grid; gap: 0; margin-top: 44px; border-top: 1px solid var(--rule); }
.step { padding-block: 28px; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
.step-n {
  font-family: var(--display); font-weight: 760; font-size: 1.05rem;
  color: var(--signal-ink); font-variant-numeric: tabular-nums;
}
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .step {
    border-top: 2px solid var(--signal); border-bottom: 0;
    padding: 22px 28px 0 0;
  }
  .step:not(:last-child) { border-inline-end: 1px solid var(--rule); padding-inline-end: 28px; }
  .step:not(:first-child) { padding-inline-start: 28px; }
}

/* --- the wedge ------------------------------------------------------------ */

.wedge-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .wedge-grid { grid-template-columns: 1fr 1fr; } }
.wedge .prose { color: #C9CCDC; }
.wedge-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.wedge-photo { border-radius: 14px; overflow: hidden; margin-top: 32px; }
.wedge-photo img { width: 100%; height: auto; }

/* The tally is an exhibitor rate sheet, not a stat card: line items with
   leaders, a derived total, and the saving spelled out at the foot — the
   document format this buyer already receives from show organizers. */
.sheet {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--on-ink-rule);
  border-radius: 16px;
  overflow: hidden;
}
.sheet-pad { padding: clamp(22px, 3.4vw, 30px); }
.sheet-h {
  margin: 0; padding: 15px clamp(22px, 3.4vw, 30px);
  border-bottom: 1px solid var(--on-ink-rule);
  font-size: .85rem; font-weight: 700; color: var(--on-ink-2);
}
.sheet-lines { margin: 0; display: grid; gap: 13px; }
.sheet-line { display: flex; align-items: baseline; gap: 10px; font-size: .95rem; }
.sheet-line dt { margin: 0; color: var(--on-ink-2); }
.sheet-line dd { margin: 0; color: var(--on-ink); font-variant-numeric: tabular-nums; }
.sheet-line dt { flex: 1 1 auto; }
.sheet-line dd { flex: none; }
/* Leaders need room to read as leaders; below that the amount just sits right. */
.sheet-lead { display: none; }
@media (min-width: 560px) {
  .sheet-lead { display: block; flex: 1 1 14px; min-width: 14px; border-bottom: 1px dotted rgba(255,255,255,.3); translate: 0 -4px; }
  .sheet-line dt { flex: 0 1 auto; }
}

.sheet-tot { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--on-ink-rule); }
.sheet-k { margin: 0 0 8px; font-size: .95rem; font-weight: 600; color: var(--on-ink); }
.sheet-fig {
  position: relative; display: inline-block; margin: 0;
  font-family: var(--display); font-weight: 770;
  font-size: clamp(2.4rem, 6.8vw, 3.4rem); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.sheet-fig--old { color: var(--on-ink-2); }
.sheet-fig--new { color: var(--signal-on-ink); }
.sheet-note { margin: 10px 0 0; font-size: .9rem; color: var(--on-ink-2); }

.sheet-keep {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; margin-top: clamp(22px, 3.4vw, 30px);
  background: var(--signal); color: #15162A;
  padding: 15px clamp(22px, 3.4vw, 30px);
}
.sheet-keep-k { margin: 0; font-weight: 700; font-size: .95rem; }
.sheet-keep-v {
  margin: 0; font-family: var(--display); font-weight: 770;
  font-size: 1.55rem; letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
}

/* The page's one orchestrated moment: the rental total is struck through once,
   when the block is first seen. Everything else on this page holds still. */
.strike { position: absolute; left: -3%; top: 52%; width: 106%; height: 3px; overflow: visible; }
.strike line {
  stroke: var(--signal-on-ink); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.is-struck .strike line { animation: strike .42s cubic-bezier(.4,.1,.3,1) forwards; }
@keyframes strike { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .strike line { stroke-dashoffset: 0; animation: none; }
}

/* rate card — the document format this buyer already gets from organizers */
.rate { margin-top: clamp(44px, 6vw, 68px); border-top: 1px solid var(--on-ink-rule); }
.rate-head { display: none; }
.rate-row { padding-block: 20px; border-bottom: 1px solid var(--on-ink-rule); display: grid; gap: 10px; }
.rate-k { font-weight: 600; font-size: .95rem; color: var(--on-ink); }
.rate-v { color: var(--on-ink-2); font-size: .97rem; }
.rate-v--us { color: var(--on-ink); }
.rate-t { display: block; font-size: .78rem; color: var(--on-ink-2); margin-bottom: 2px; }
@media (min-width: 760px) {
  .rate-head, .rate-row { grid-template-columns: 210px 1fr 1fr; gap: 28px; align-items: baseline; }
  .rate-head { display: grid; padding-block: 14px; border-bottom: 1px solid var(--on-ink-rule); }
  .rate-h { font-size: .8rem; font-weight: 600; color: var(--on-ink-2); }
  .rate-h--us { color: var(--signal-on-ink); }
  .rate-t { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
}

/* --- features ------------------------------------------------------------- */

.feat { display: grid; gap: clamp(26px, 4vw, 44px); align-items: center; }
.feat + .feat { margin-top: clamp(48px, 6vw, 72px); }
.feat .prose { margin-top: 12px; }
@media (min-width: 880px) {
  .feat { grid-template-columns: 1.12fr .88fr; gap: 64px; }
  .feat-rev .feat-media { order: -1; }
}
.feat-media .phone { max-width: 232px; }

/* Two supporting facts per flagship feature, ruled like the rest of the page. */
.pts { margin: 24px 0 0; border-top: 1px solid var(--rule); }
.pt { padding-block: 14px; border-bottom: 1px solid var(--rule); }
.pt-k { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 3px; }
.pt-v { display: block; font-size: .92rem; color: var(--ink-2); max-width: 54ch; }

.prog { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--rule); }
.prog-row { padding-block: 26px; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
@media (min-width: 760px) {
  .prog-row { grid-template-columns: 270px 1fr; gap: 40px; align-items: baseline; }
}

/* --- pricing -------------------------------------------------------------- */

.per { border: 1px solid var(--rule); border-radius: 12px; padding: 4px; display: inline-flex; gap: 4px; margin: 0; }
.per legend { padding: 0; }
.per label {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 9px;
  cursor: pointer; font-size: .93rem; font-weight: 600; color: var(--ink-2); min-height: 44px;
}
.per input { position: absolute; opacity: 0; pointer-events: none; }
.per input:checked + label { background: var(--ink); color: var(--paper); }
.per input:focus-visible + label { outline: 3px solid var(--violet); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .per input:checked + label { background: var(--on-ink); color: #15162A; } }

.plans { display: grid; gap: 0; margin-top: 36px; background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 18px; overflow: hidden; }
.plan { padding: clamp(26px, 4vw, 34px); display: flex; flex-direction: column; border-bottom: 1px solid var(--rule-soft); }
.plan:last-child { border-bottom: 0; }
.plan-us { background: var(--ink-fill); color: var(--on-ink); }
.plan-us .plan-sub, .plan-us .plan-per, .plan-us .plan-list li { color: var(--on-ink-2); }
.plan-us .plan-list li::before { background: var(--signal-on-ink); }
.plan-flag {
  display: inline-block; align-self: flex-start; margin-bottom: 14px;
  background: var(--signal); color: #15162A;
  font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 6px;
}
.plan-name { font-family: var(--display); font-weight: 720; font-size: 1.28rem; margin: 0 0 4px; }
.plan-sub { color: var(--ink-2); font-size: .93rem; margin: 0 0 18px; }
.plan-price { font-family: var(--display); font-weight: 760; font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.018em; font-variant-numeric: tabular-nums; }
.plan-per { font-size: .9rem; color: var(--ink-2); margin-top: 4px; min-height: 1.4em; }
.plan-list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 9px; font-size: .95rem; color: var(--ink-2); }
.plan-list li { position: relative; padding-inline-start: 20px; }
.plan-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--violet);
}
.plan-list b { color: var(--ink); font-weight: 600; }
.plan-save {
  display: inline-block; vertical-align: middle; position: relative; top: -2px;
  margin-inline-start: 10px; padding: 3px 8px; border-radius: 5px;
  background: var(--signal); color: #15162A;
  font-family: var(--text); font-size: .75rem; font-weight: 700; letter-spacing: 0;
}
.plan-us .plan-list b { color: var(--on-ink); }
.plan .btn { margin-top: auto; }
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
  .plan { border-bottom: 0; border-inline-end: 1px solid var(--rule-soft); }
  .plan:last-child { border-inline-end: 0; }
}
.pricing-notes { margin-top: 26px; display: grid; gap: 10px; max-width: 62ch; }

/* Period switch: CSS does the swap, JS only reports it. */
.pricing:has(#per-month:checked) .p-yr { display: none; }
.pricing:has(#per-year:checked) .p-mo { display: none; }

/* --- who / privacy grids -------------------------------------------------- */

.duo { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--rule); }
.duo-cell { padding-block: 26px; border-bottom: 1px solid var(--rule); }
@media (min-width: 780px) {
  .duo { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .duo-cell:nth-child(-n+2) { border-top: 0; }
}

/* --- faq ------------------------------------------------------------------ */

.faq { margin-top: 36px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 1.04rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; inset-inline-end: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-inline-end: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-a { padding: 0 0 22px; margin: 0; max-width: 68ch; color: var(--ink-2); }
.faq-a + .faq-a { margin-top: .8em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* --- qr ------------------------------------------------------------------- */

.qr-box {
  display: grid; gap: 26px; align-items: center; justify-items: start;
  background: var(--surface); border: 1px solid var(--rule-soft);
  border-radius: 18px; padding: clamp(26px, 4vw, 36px);
}
.qr-code { width: 132px; height: 132px; color: var(--ink); background: var(--surface); }
@media (prefers-color-scheme: dark) {
  .qr-code { background: #FFFFFF; color: #000000; padding: 8px; border-radius: 8px; width: 148px; height: 148px; }
}
@media (min-width: 660px) { .qr-box { grid-template-columns: auto 1fr; gap: 34px; } }

/* --- close band ----------------------------------------------------------- */

.close { background: var(--signal); color: #15162A; }
.close .display { max-width: 22ch; }
.close-p { margin: 18px 0 28px; max-width: 46ch; color: #15162A; font-size: 1.08rem; }
.close .btn { background: #15162A; color: #F2F3F7; }
.close .btn:hover { background: #000000; }

/* --- guides --------------------------------------------------------------- */

.guides { margin-top: 34px; border-top: 1px solid var(--rule); }
.guide { display: block; padding-block: 20px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.guide span { display: block; font-weight: 600; font-size: 1.02rem; }
.guide em { display: block; font-style: normal; font-size: .9rem; color: var(--ink-2); margin-top: 3px; }
.guide:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* --- footer --------------------------------------------------------------- */

.foot { background: var(--ink-fill); color: var(--on-ink); padding-block: clamp(52px, 7vw, 76px) 36px; }
.foot-top { display: grid; gap: 34px; padding-bottom: 40px; border-bottom: 1px solid var(--on-ink-rule); }
@media (min-width: 760px) { .foot-top { grid-template-columns: repeat(2, 1fr); gap: 36px; } }
@media (min-width: 1000px) { .foot-top { grid-template-columns: 1.25fr repeat(4, 1fr); gap: 32px; } }
.foot h2 { font-size: .78rem; font-weight: 700; color: var(--on-ink-2); margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; }
.foot ul a { color: var(--on-ink-2); text-decoration: none; display: inline-block; padding-block: 5px; }
.foot ul a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot .brand { margin: 0 0 12px; }
.foot-tag { color: var(--on-ink-2); font-size: .95rem; margin: 0 0 20px; max-width: 30ch; }
.foot-legal { padding-top: 26px; display: grid; gap: 12px; font-size: .82rem; color: var(--on-ink-2); }
.foot-legal p { margin: 0; max-width: 70ch; }

/* --- latest articles (build-articles.mjs) --- */
.posts { display: grid; gap: 4px; }
@media (min-width: 720px) { .posts { grid-template-columns: repeat(2, 1fr); gap: 4px 32px; } }
.post { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: start; padding-block: 18px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.post-img { width: 104px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.post-img--none { display: block; border: 1px solid var(--rule); }
.post-body { display: block; min-width: 0; }
.post-title { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.post-ex { display: block; font-size: .89rem; color: var(--ink-2); line-height: 1.45; }
.post-meta { display: block; font-size: .78rem; color: var(--ink-2); margin-top: 6px; }
.post:hover .post-title { text-decoration: underline; text-underline-offset: 3px; }