:root {
  /* ALIASES ONTO THE DESIGN SYSTEM.

     These names are the partner site's own vocabulary and 127 var() reads
     across this file depend on them, so they stay. What changed is what they
     point AT: every one now resolves to a design system token, which carries a
     light and a dark value, so the whole sheet became theme-aware in one edit.

     --bg, --shadow, --font-sans and --font-mono are DELIBERATELY ABSENT. They
     collide by name with the design system's own tokens, so redeclaring them
     here would pin the page to one theme. They now come straight from
     tokens.css and type.css. */
  --surface:     var(--surf);
  --surface-2:   var(--surf2);
  --border:      var(--line);
  --yellow:      var(--pri);
  --green:       var(--ok);
  --red:         var(--alert);
  --blue:        var(--info);
  --text:        var(--ink);
  --text-muted:  var(--ink2);
  --text-strong: var(--ink);
  --radius:      var(--r-card);
  --radius-sm:   var(--r-chip);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; gap: 1rem; }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
.span-2 { grid-column: span 2; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0.875rem 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand.small { font-size: 0.9rem; }
.brand-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 12px var(--yellow);
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  font-size: 1.6rem;
  line-height: 1;
}
.brand.small .brand-logo {
  font-size: 1.15rem;
}
.brand-name { letter-spacing: 0.02em; }
.brand-sub { color: var(--yellow); font-weight: 700; }
.brand-name .tm {
  font-size: 1.2em;
  color: var(--yellow);
  font-weight: 700;
  vertical-align: super;
  margin-left: 2px;
  line-height: 0;
  text-shadow: 0 0 6px color-mix(in srgb, var(--pri) 55%, transparent);
}
.header-left { display: flex; align-items: center; gap: 1.5rem; }
.site-nav { display: flex; gap: 1.5rem; }
.site-nav a {
  color: var(--text);
  font-size: 0.925rem;
}
.site-nav a:hover { color: var(--yellow); text-decoration: none; }
.site-nav a.site-nav-login,
.site-nav a.site-nav-login:hover { color: var(--priInk); }

/* ---------------------------------------------------------------------- hero */
.hero {
  padding: 5rem 0 3rem;
  /* Flat page ground. The radial brand wash that used to sit on top of it was
     depth-by-gradient; the design system gets depth from surface steps and a
     hairline instead, so the hero is simply the page. */
  background: var(--bg);
  text-align: center;
}
.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero-sub {
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1.125rem;
  color: var(--text-muted);
}
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 0.975rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  font-family: inherit;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--yellow);
  color: var(--priInk);
  border-color: var(--yellow);
}
.btn-primary:hover { background: var(--priHover); border-color: var(--priHover); }
.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}
.btn-ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-ghost:disabled,
.btn-ghost[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* ------------------------------------------------------------------- modes */
.modes { padding: 2rem 0 0; }
.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
}
.mode-tab {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mode-tab:hover { background: var(--surface-2); }
.mode-tab.active {
  background: var(--surface-2);
  border-color: var(--yellow);
}
.mode-tab strong { display: block; color: var(--text-strong); font-size: 1rem; }
.mode-tab small { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 0.125rem; }
.mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pri) 8%, transparent);
  color: var(--yellow);
  font-size: 1.3rem;
}
.mode-tab.active .mode-icon {
  background: color-mix(in srgb, var(--pri) 18%, transparent);
}
@media (max-width: 640px) {
  .mode-tabs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ mode panels */
.mode-panel { display: none; padding: 3rem 0; }
.mode-panel.active { display: block; }
.mode-panel h2 {
  color: var(--text-strong);
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
}

/* ------------------------------------------------------------------- cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin: 0.5rem 0; color: var(--text-strong); font-size: 1.1rem; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pri) 8%, transparent);
  color: var(--yellow);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.placeholder-card { border-style: dashed; }

.notice {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ benefits */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.benefit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.benefit h4 { margin: 0.5rem 0; color: var(--text-strong); font-size: 1rem; }
.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pri) 8%, transparent);
  color: var(--yellow);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- apply form */
.apply-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: var(--shadow);
}
.apply-form h3 { color: var(--text-strong); margin: 0 0 0.5rem; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  padding: 0.625rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 15%, transparent);
}
.form-grid textarea { resize: vertical; min-height: 96px; }
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.apply-form .btn { margin-top: 1.25rem; }
.turnstile-wrap { margin-top: 1.25rem; min-height: 65px; }
.form-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.form-status.ok {
  display: block;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.form-status.err {
  display: block;
  background: color-mix(in srgb, var(--alert) 10%, transparent);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--alert) 30%, transparent);
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}

/* ------------------------------------------------------------ trust strip */
.trust-strip {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* Flat: the two hairlines above and below already bound this strip. */
  background: var(--bg);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.trust-stat {
  text-align: center;
  padding: 1.25rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}
.trust-stat:hover { border-color: var(--yellow); }
.trust-num {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--yellow);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.trust-lbl {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
}
.trust-footer {
  text-align: center;
  margin: 0;
}
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- FAQ */
.faq { padding: 3rem 0 5rem; }
.faq h2 { color: var(--text-strong); font-size: 1.75rem; margin: 0 0 1.5rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
}
.faq details[open] { border-color: var(--yellow); }
.faq summary {
  cursor: pointer;
  color: var(--text-strong);
  font-weight: 500;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--yellow);
  font-size: 1.25rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0.75rem 0 0; color: var(--text-muted); }

/* --------------------------------------------------------------- legal pages */
.legal-page { padding: 3rem 0 4rem; }
.legal-container { max-width: 1000px; }

.legal-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}
.legal-crumbs a { color: var(--text-muted); }
.legal-crumbs a:hover { color: var(--yellow); text-decoration: none; }
.legal-crumbs .sep { opacity: 0.5; }
.legal-crumbs .current { color: var(--text); }

.legal-header h1 {
  color: var(--text-strong);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 0 0 0.25rem;
  letter-spacing: -0.015em;
}
.legal-header .muted { margin: 0 0 1.5rem; font-size: 0.9rem; }

.legal-notice {
  display: flex;
  gap: 0.875rem;
  background: color-mix(in srgb, var(--pri) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--pri) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  color: var(--text);
  font-size: 0.925rem;
  line-height: 1.55;
}
.legal-notice i {
  color: var(--yellow);
  font-size: 1.25rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.legal-layout-full {
  grid-template-columns: 1fr;
  gap: 0;
}
.legal-toc {
  position: sticky;
  top: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.legal-toc h5 {
  color: var(--text-strong);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem;
}
.legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-toc a {
  color: var(--text-muted);
}
.legal-toc a:hover { color: var(--yellow); text-decoration: none; }

.legal-body section {
  padding: 0 0 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.legal-body section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.legal-body h2 {
  color: var(--text-strong);
  font-size: 1.375rem;
  margin: 0 0 0.75rem;
}
.legal-body p,
.legal-body li {
  color: var(--text);
  line-height: 1.7;
}
.legal-body p { margin: 0 0 0.875rem; }
.legal-body ul,
.legal-body ol {
  padding-left: 1.25rem;
  margin: 0 0 0.875rem;
}
.legal-body li { margin-bottom: 0.4rem; }
.legal-body code {
  background: var(--surface-2);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.legal-body strong { color: var(--text-strong); }

.legal-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.legal-footer .btn i { margin-right: 0.4rem; }

.country-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}
.country-pill {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text);
}

@media (max-width: 880px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  /* The homepage values, so both public footers stand the same height:
     4rem above the columns, 1.2rem below the closing bar. */
  padding: 4rem 0 1.2rem;
  margin-top: 2rem;
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  display: none;
  animation: cookieBannerIn 0.3s ease-out;
}
@keyframes cookieBannerIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 260px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.cookie-banner-text strong { color: var(--text-strong); display: block; margin-bottom: 0.2rem; }
.cookie-banner-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie-banner .btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
@media (max-width: 560px) {
  .cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
  .cookie-banner-inner { padding: 0.85rem 1rem; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; justify-content: center; }
}
/* The footer measures the same as the homepage footer, not just lists the same
   things. .container here is 1100px and partners-polish.css widens only the
   HEADER to 1240, so the footer sat 188px narrower, every column was 15px
   tighter, and labels that fit on one line on wppbx.com wrapped on this one. */
.site-footer .container { max-width: 1240px; }

.footer-grid {
  display: grid;
  /* One row, however many columns there are. The count is NOT written down:
     the brand keeps an explicit track because it holds a paragraph, and every
     other child creates its own implicit 1fr column, so a new column lands in
     the row instead of wrapping under it.

     Not repeat(auto-fit, ...): that may not share a track list with an fr
     size, so the whole declaration would be invalid and the grid would
     collapse to a single column. */
  grid-template-columns: 1.5fr;
  grid-auto-flow: column;
  /* min-content, not 0: a column must be allowed to be as wide as its
     widest unbreakable item, or a nowrap address overflows instead of
     widening the track. */
  grid-auto-columns: minmax(min-content, 1fr);
  gap: 2.5rem;   /* 40px, the homepage value */
  /* The homepage puts the gap before the closing bar here rather than as a
     margin on the bar, so the two footers space the same. */
  padding-bottom: 3rem;
}
.footer-col { min-width: 0; }
.footer-heading {
  color: var(--text-strong);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.9rem;   /* the homepage value */
  font-weight: 600;
}
.footer-brand .brand { margin-bottom: 0.5rem; }
.footer-brand p { margin: 0.25rem 0; max-width: 260px; }
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* The homepage gives EVERY footer link a margin-bottom, including the
     last one, so its columns carry 6.4px of trailing space. A flex gap has
     none after the last child, which is where the remaining height
     difference between the two footers came from. */
  padding-bottom: 0.4rem;
}
.footer-nav a {
  color: var(--text-muted);
  font-size: 0.9rem;
  display: inline-flex;
  /* flex-start, not center: on a link that wraps to two lines ("Delete my
     contact submission") centre floats the glyph down to the middle line. The
     homepage footer keeps it on the first line and so does this one now. */
  align-items: flex-start;
  gap: 0.5rem;
  /* 1.6, so a link box is 23.04px as on the homepage rather than 22.32px.
     Over the nine rendered lines of the Legal column that 0.72px per line
     was the last of the height difference between the two footers. */
  line-height: 1.6;
}
.footer-nav a i { color: var(--yellow); font-size: 0.95rem; }
.footer-nav a:hover { color: var(--yellow); text-decoration: none; }
/* 960 and 600, the homepage's footer breakpoints. They were 768 and 480 here,
   so between 768 and 960 the homepage footer had already stacked into two
   columns while this one was still six across: at 900px one stood 962px tall
   and the other 610px. Same content, same widths, different moment of
   stacking. */
@media (max-width: 960px) {
  /* gap 2rem, as the homepage uses once stacked. At 2.5rem the three row gaps
     added 24px and this footer stood taller than that one for no visible
     reason. */
  .footer-grid { grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 2rem; }
  /* The brand block takes a row of its own once stacked, as on the homepage. It
     holds a paragraph, so pairing it with a link column leaves one cell long and
     the other short; and without it the two footers stacked into a different
     number of rows, 3 against 4. */
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; grid-auto-flow: row; }
}

/* ============================================================ */
/*  Hero CTA buttons + self-hosted portal modal                 */
/* ============================================================ */

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.55rem;
  font-size: 1rem;
}
.hero-cta .bi { font-size: 1.05em; line-height: 1; }

.hero-hint {
  margin: 1rem auto 0;
  max-width: 560px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.8;
}
.hero-hint .bi { color: var(--yellow); font-size: 0.95em; }

/* ---- self-hosted modal ---- */
.shm[hidden] { display: none; }
.shm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.shm-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.shm-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--surface-2, var(--surf));
  border: 1px solid var(--border, var(--line));
  border-radius: 14px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
  animation: shmIn 0.18s ease-out;
}
@keyframes shmIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.shm-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: transparent;
  border: 0;
  color: var(--text-muted, var(--ink2));
  font-size: 1rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  line-height: 1;
}
.shm-close:hover {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.shm-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--info) 14%, transparent);
  color: var(--info);
  border-radius: 12px;
  font-size: 1.5rem;
}
.shm-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--text-strong);
}
.shm-lead {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.shm-form { text-align: left; }
.shm-label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.shm-input-row {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.shm-input-row:focus-within {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 12%, transparent);
}
.shm-proto {
  background: var(--surf2);
  color: var(--text-muted);
  padding: 0.7rem 0.85rem;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.9rem;
  border-right: 1px solid var(--border, var(--line));
  user-select: none;
}
.shm-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text-strong);
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
}
.shm-error {
  margin: 0.55rem 0 0;
  color: var(--alert);
  font-size: 0.85rem;
}
.shm-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 1.05rem;
  padding: 0.8rem 1.2rem;
}
.shm-help {
  margin: 1.1rem 0 0;
  line-height: 1.5;
}
.shm-help a {
  color: var(--yellow);
  text-decoration: none;
  font-weight: 500;
}
.shm-help a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .hero-cta { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.6rem; }
}


/* An email address is one unbreakable token: wrapping it mid-word reads as a
   typo, not as a wrapped line. Addresses only, because "Delete my contact
   submission" is a phrase and should wrap. */
.footer-nav a[href^="mailto:"],
.footer-nav a[href*="email-protection"] { white-space: nowrap; }


/* The closing bar, matching the homepage: a hairline, then the copyright.
   position:relative so it sits above the watermark rather than under it. */
.site-footer .footer-bottom {
  /* No margin: the grid's padding-bottom above provides the gap, matching the
     homepage. Both would double it. */
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  position: relative;
  z-index: 1;
}

/* The homepage drops the footer's top padding on a phone; without the same rule
   this footer stood 64px where that one stands 44px. */
@media (max-width: 480px) {
  .site-footer { padding-top: 2.75rem; }
  /* The homepage tightens further on a phone: a 1.6rem gap and 2rem below the
     columns. Across five row gaps plus the padding that was 48px of the 65px
     this footer stood taller. */
  .footer-grid { gap: 1.6rem; padding-bottom: 2rem; }
}