/* ---------------------------------------------------------------------------
   The Makers -- public site.

   Written for the person who will actually read it: someone in their fifties or
   sixties, on a phone, at the end of a long day, worried about a parent. That
   means large type, real contrast, short lines, and nothing that moves.
   Base size is 18px rather than 16px for the same reason.
   --------------------------------------------------------------------------- */

:root {
  --ink:        #1b211f;
  --ink-soft:   #4a5551;
  --ink-faint:  #6f7c77;
  --paper:      #faf7f2;
  --paper-2:    #ffffff;
  --line:       #e3ddd2;
  --green:      #1f4d46;
  --green-deep: #14312d;
  /* Brand-coloured TEXT. Separate from --green-deep on purpose: that token is
     also a background (footer, dark section, portal header) and goes near-black
     in dark mode, which is correct for a background and made every piece of
     text using it invisible -- the header logo first among them. */
  --brand-ink: #14312d;
  --green-soft: #eef3f1;
  --clay:       #b8563a;
  --clay-soft:  #fbeee9;
  --gold:       #c4922f;
  --radius:     14px;
  --shell:      1120px;
  --measure:    62ch;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.65 ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand, nav, button, .btn, label, input, select, textarea, .eyebrow, .badge, .tag {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--green); color: #fff;
  padding: 12px 18px; z-index: 10; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 4px; }

/* --- header --- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
/* Narrow: the brand (mark, name and slogan together) with the login button
   beside it, and the page links on their own row underneath. Wide: one row,
   links pushed right, login last. */
/* minmax(0, 1fr): without it the brand column cannot shrink below its own
   width, and on a 320px phone the row below it overflows the screen. */
.site-header .shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
                      column-gap: 14px; row-gap: 10px; padding-block: 12px; }
/* start, not stretch: the brand is only as wide as the mark and the name. */
.site-header .brand { grid-column: 1; grid-row: 1; justify-self: start; }
.site-header .nav-portal { grid-column: 2; grid-row: 1; justify-self: end; }
.site-header nav { grid-column: 1 / -1; grid-row: 2; margin-left: -13px; }
@media (min-width: 760px) {
  .site-header .shell { grid-template-columns: auto 1fr auto; row-gap: 0; min-height: 76px; padding-block: 0; }
  .site-header nav { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
  .site-header .nav-portal { grid-column: 3; grid-row: 1; }
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.42rem;
         color: var(--brand-ink); text-decoration: none; letter-spacing: -0.01em; }
/* The mark stands as tall as the name and the slogan together; the slogan
   tucks under the name, set to about the name's width. */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* The slogan is drawn as SVG (see brand_slogan) so it measures the wordmark's
   width on every device, not just the one it was tuned on. 6.56em is that
   width: the wordmark is set in a self-hosted font, so the ratio is fixed. */
.brand-slogan {
  display: block; width: 6.56em; height: auto; margin-top: .12em;
}
.brand-slogan text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 6px; font-weight: 600;
  /* --ink-soft, not --ink-faint: at this size the fainter grey is 4:1 on
     paper, under the 4.5:1 floor, on a site read by people with older eyes. */
  fill: var(--ink-soft);
}

/* The wordmark's typeface, self-hosted and subset by Google's API to exactly
   the twelve glyphs "the | MAKERS" needs -- 4.8 KB. Self-hosted rather than
   linked, for two reasons: linking would mean widening the
   Content-Security-Policy to allow styles and fonts from two Google origins,
   and it would send every visitor's IP to Google on a site whose privacy page
   makes promises about exactly that. */
@font-face {
  font-family: "Fraunces Wordmark";
  src: url("/assets/fonts/fraunces-wordmark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20, U+2c, U+41, U+43, U+45, U+4b-4d, U+52-53, U+65, U+68, U+74;
}

/* --- wordmark: "the", a gold rule, MAKERS --- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .30em;
  font-family: "Fraunces Wordmark", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}
.wm-the {
  font-size: .54em;
  letter-spacing: .03em;
  /* currentColor at reduced opacity so the same markup reverses cleanly.
     .78 and not less: below that this lands under 4.5:1 on paper, and it is
     already the smallest type on the page. */
  opacity: .78;
}
.wm-rule {
  /* Pinned in device pixels, not ems. A rule sized as a fraction of an em
     is a handsome hairline at display size and less than one physical pixel
     in the header, where it either vanishes or flickers between rows of
     pixels. Two is the floor at which it survives every size this is used at. */
  width: 2px;
  min-width: 2px;
  height: 1.06em;
  border-radius: 1px;
  flex-shrink: 0;
  background: var(--gold);
}
.wm-name {
  text-transform: uppercase;
  letter-spacing: .075em;
}

/* The mark is stroked from here, not from the SVG, so one piece of markup
   serves paper and dark backgrounds and follows the dark-mode palette. */
.brand-mark { display: block; flex-shrink: 0; overflow: visible; }
.brand-mark .bm-a,
.brand-mark .bm-b {
  fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;
}
.brand-mark .bm-a { stroke: var(--green); }
.brand-mark .bm-b { stroke: var(--gold); }

.site-header nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-header .nav-portal { text-decoration: none; font-size: .98rem; font-weight: 600; padding: 9px 13px;
                           border-radius: 9px; background: var(--green); color: #fff; }
.site-header nav a {
  text-decoration: none; color: var(--ink-soft); font-size: .98rem; font-weight: 600;
  padding: 9px 13px; border-radius: 9px;
}
.site-header nav a:hover { background: var(--green-soft); color: var(--brand-ink); }
.site-header nav a[aria-current="page"] { color: var(--brand-ink); background: var(--green-soft); }
.site-header .nav-portal:hover { background: var(--green-deep); color: #fff; }

/* --- hero --- */
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--clay);
  background: var(--clay-soft); padding: 7px 13px; border-radius: 999px; margin-bottom: 20px;
}
.eyebrow.open { color: var(--brand-ink); background: var(--green-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

.hero p.lead { font-size: 1.22rem; color: var(--ink-soft); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-block; padding: 15px 26px; border-radius: 11px; font-weight: 650; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--brand-ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--green); background: var(--paper-2); color: var(--brand-ink); }

/* The card beside the hero: how to reach a real person. */
.status-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px; box-shadow: 0 1px 2px rgba(27,33,31,.04), 0 12px 32px -18px rgba(27,33,31,.28);
}
.status-card h2 { font-size: 1.15rem; margin-bottom: .6em; }
.status-card p { font-size: 1rem; color: var(--ink-soft); }
.status-card .btn { width: 100%; text-align: center; }

/* --- generic sections --- */
section { padding: clamp(44px, 6vw, 80px) 0; }
section.tinted { background: var(--green-soft); border-block: 1px solid var(--line); }
section.dark { background: var(--green-deep); color: #eef3f1; }
section.dark h2, section.dark h3 { color: #fff; }
section.dark p { color: #cfdcd8; }
section.dark a { color: #fff; }

.section-head { max-width: var(--measure); margin-bottom: 36px; }
.section-head p { font-size: 1.1rem; color: var(--ink-soft); margin-bottom: 0; }
section.dark .section-head p { color: #cfdcd8; }

/* --- cards --- */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.card h3 { margin-bottom: .45em; color: var(--brand-ink); }
.card p { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0; }
.card-icon { font-size: 1.5rem; display: block; margin-bottom: 14px; color: var(--gold); }
section.dark .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
section.dark .card h3 { color: #fff; }
section.dark .card p { color: #cfdcd8; }

/* A numbered list of what happens, for the "how it works" strip. */
.steps { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.step { counter-increment: step; }
.step h3::before {
  content: counter(step); display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff;
  font-size: .92rem; margin-right: 10px; vertical-align: 2px;
}
.step p { font-size: 1rem; color: var(--ink-soft); }

/* --- story --- */
.prose { max-width: var(--measure); }
.prose p { font-size: 1.1rem; }
.prose h2 { margin-top: 1.6em; }
.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--gold);
  font-size: 1.22rem; color: var(--brand-ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.portrait-note {
  background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 28px 0;
}
.portrait-note p { margin-bottom: 0; font-size: 1rem; color: var(--ink-soft); }

/* --- forms --- */
.form-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 4vw, 40px); max-width: 720px;
}
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 650; font-size: .98rem; margin-bottom: 7px; }
.field .hint { display: block; font-weight: 400; color: var(--ink-faint); font-size: .9rem; margin-top: 3px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 15px; font-size: 1.02rem; border: 2px solid var(--line);
  border-radius: 10px; background: var(--paper-2); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); outline: none; }
.field textarea { min-height: 130px; resize: vertical; font-family: inherit; }
.field-row { display: grid; gap: 0 20px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* The honeypot. Off-screen rather than display:none -- some bots skip hidden
   fields, and a screen reader is told to ignore it by aria-hidden + tabindex. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 16px 18px; border-radius: 11px; margin-bottom: 24px; font-size: 1rem; max-width: 720px; }
.notice p:last-child { margin-bottom: 0; }
.notice-ok   { background: var(--green-soft); border: 1px solid #bcd3cd; color: var(--brand-ink); }
.notice-bad  { background: var(--clay-soft);  border: 1px solid #edc6b8; color: #8a3a22; }
.notice-info { background: #fdf6e6; border: 1px solid #ecd9a8; color: #6d5410; }

/* --- footer --- */
.site-footer { background: var(--green-deep); color: #cfdcd8; padding: 56px 0 32px; margin-top: 0; font-size: .98rem; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer a { color: #fff; display: block; margin-bottom: 8px; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.foot-brand {
  font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: .4em;
  display: flex; align-items: center; gap: 10px;
}
.foot-head { font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: 14px; }
.foot-tagline {
  color: var(--gold); font-weight: 600; letter-spacing: .01em; margin-bottom: .5em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.foot-note { color: #9db3ae; margin: 6px 0 0; }
.foot-legal {
  border-top: 1px solid rgba(255,255,255,.14); margin: 40px 0 0; padding-top: 22px;
  color: #9db3ae; font-size: .88rem; max-width: none;
}
.foot-legal a { display: inline; margin-left: 8px; }

/* --- portal teaser --- */
.portal-shot {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; padding: 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.portal-shot ul { list-style: none; margin: 0; padding: 0; }
.portal-shot li { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; gap: 14px; align-items: baseline; }
.portal-shot li:last-child { border-bottom: 0; }
.portal-shot .when { color: #9db3ae; font-size: .86rem; min-width: 84px; flex-shrink: 0; }
.portal-shot .what { color: #fff; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1ef; --ink-soft: #b9c4c0; --ink-faint: #93a09b;
    --paper: #14181a; --paper-2: #1b2123; --line: #2c3538;
    --green: #6fbfae; --green-deep: #0f1618; --green-soft: #1d2b2a; --brand-ink: #e4f0ec;
    --clay: #e08b6d; --clay-soft: #2e211c; --gold: #d9ad52;
    color-scheme: dark;
  }
  body { background: var(--paper); }
  .site-header { background: var(--paper); }
  .site-header .nav-portal { background: var(--green); color: #0f1618; }
  .site-header .nav-portal:hover { background: #8ad3c2; color: #0f1618; }
  .btn-primary { background: var(--green); color: #0f1618; }
  .btn-primary:hover { background: #8ad3c2; color: #0f1618; }
  .card h3, .status-card h2 { color: var(--ink); }
  .site-footer { background: #0d1214; }
  .notice-ok { background: #16292a; border-color: #2c4a46; color: #a5d8cc; }
  .notice-bad { background: #2e1c17; border-color: #573228; color: #f0ac91; }
  .notice-info { background: #2a2517; border-color: #4d4325; color: #e0c98a; }
  .step h3::before { color: #17201f; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  .site-header, .site-footer, .hero-actions { display: none; }
  body { background: #fff; color: #000; }
}

/* --- utilities ---
   The Content-Security-Policy has no 'unsafe-inline', which blocks style
   attributes as well as <style> blocks, so page-level spacing lives here. */
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-36 { margin-top: 36px; }
.byline { color: var(--ink-faint); font-size: .95rem; }

/* The mark on a dark ground: the site footer, and anywhere else reversed. */
.site-footer .brand-mark .bm-a { stroke: #f2ede4; }
.site-footer .brand-mark .bm-b { stroke: #d9ad52; }
.site-footer .wordmark { color: #fff; font-size: 1.12rem; }
.site-footer .wm-rule { background: #d9ad52; }

/* The small print under the Libre 3 section: trademark and medical notice.
   Legible, not hidden -- it carries real weight for this audience. */
section.dark .libre-note { font-size: .92rem; color: #b9ccc7; margin-top: 22px; max-width: 58ch; }

/* Turnstile. The widget draws itself; this is only the sentence above it, so
   nobody wonders what the box is or whether they are meant to do something. */
.turnstile-field { margin-top: 4px; }
.turnstile-label { font-size: .95rem; color: var(--ink-soft); margin: 0 0 10px; }
.cf-turnstile { min-height: 65px; }

/* ---------------------------------------------------------------------------
   Hero carousel
   A deep green band in both themes: it is the one place the page commits to
   colour, and it would lose its point if dark mode flattened it to black.
   --------------------------------------------------------------------------- */
:root { --hero-bg: #1f4d46; --hero-ink: #f2ede4; --hero-soft: #d3dfdb; }
@media (prefers-color-scheme: dark) { :root { --hero-bg: #183b36; } }

.hero-carousel { background: var(--hero-bg); color: var(--hero-ink); overflow: hidden; }
.hero-carousel :focus-visible { outline-color: #d9ad52; }

/* Slides share one grid cell, so the band is always as tall as the tallest
   slide and nothing below it jumps when the slide changes. */
.js-carousel .slides { display: grid; }
.js-carousel .slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.js-carousel .slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
@media (prefers-reduced-motion: reduce) {
  .js-carousel .slide, .js-carousel .slide.is-active { transition: none; }
}
/* No JavaScript: the first slide, no controls. */
.hero-carousel:not(.js-carousel) .slide ~ .slide,
.hero-carousel:not(.js-carousel) .carousel-controls { display: none; }

.slide {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center;
  padding: clamp(28px, 4.5vw, 52px) 0 clamp(16px, 2.5vw, 28px);
}
@media (min-width: 900px) {
  .slide { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; }
}
.slide-art { display: block; width: 100%; height: auto; max-width: 470px; margin: 0 auto; }
/* On a phone the picture is decoration and the headline is the point: keep
   the band close to one screen tall so the controls are visible without
   scrolling, which is the only way anyone learns there are more slides. */
@media (max-width: 899px) { .slide-art { max-width: 260px; } }
@media (max-width: 600px) {
  /* The picture goes: at this width it cannot be big enough to earn the
     200px it costs, and without it the headline, the button and the
     slide controls all fit on one screen. */
  .slide-art-wrap { display: none; }
  .slide-title { font-size: 2.15rem; }
  .slide-lead { font-size: 1.08rem; }
  .hero-eyebrow { margin-bottom: 14px; font-size: .74rem; letter-spacing: .05em; padding: 7px 12px; border-radius: 10px; line-height: 1.45; }
  .hero-carousel .hero-actions { margin-top: 20px; gap: 10px; }
  .hero-carousel .btn { padding: 13px 18px; }
  .carousel-controls { gap: 4px; padding-bottom: 26px; }
  .cc-count { width: 100%; margin: 4px 0 0 6px; }
}

.hero-eyebrow {
  display: inline-block; background: #d9ad52; color: #14312d;
  font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.slide-title {
  color: #fff; font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.06; margin: 0 0 .4em;
}
.slide-lead { color: var(--hero-soft); font-size: 1.22rem; max-width: 36ch; margin: 0; }
.hero-carousel .hero-actions { margin-top: 30px; }

.btn-gold { background: #d9ad52; color: #14312d; }
.btn-gold:hover { background: #e8c173; color: #14312d; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(242, 237, 228, .5); }
.btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .07); }

/* Controls: 48px buttons and 44px dot targets -- sized for a thumb that
   is not as steady as it was. */
.carousel-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 0 0 clamp(30px, 4vw, 46px);
}
.cc-btn {
  width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 2px solid rgba(242, 237, 228, .45);
}
.cc-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.cc-btn .icon-play { display: none; }
.cc-btn.is-paused .icon-play { display: block; }
.cc-btn.is-paused .icon-pause { display: none; }
.cc-dots { display: flex; margin: 0 2px; }
.cc-dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-dot::before {
  content: ""; width: 12px; height: 12px; border-radius: 6px;
  background: rgba(242, 237, 228, .42); transition: width .3s ease, background .3s ease;
}
.cc-dot[aria-current="true"]::before { width: 30px; background: #d9ad52; }
.cc-count {
  margin-left: 8px; color: var(--hero-soft); font-size: .95rem; font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* --- trust strip under the hero --- */
.trust-strip { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trust-item { display: flex; gap: 14px; align-items: center; padding: 22px 6px; }
.trust-ico, .card-ico {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--green-soft); color: var(--green);
}
.trust-ico { width: 46px; height: 46px; border-radius: 13px; }
.trust-item strong {
  display: block; color: var(--brand-ink); font-size: 1rem; line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.trust-item span { display: block; color: var(--ink-soft); font-size: .95rem; line-height: 1.4; }

/* --- icons on the cards --- */
.card-ico { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 18px; }
.card-ico.warm { background: var(--clay-soft); color: var(--clay); }

.call-line { font-size: 1.05rem; font-weight: 600; color: var(--brand-ink); margin-top: 10px; }
.call-line a { color: var(--brand-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Very narrow phones: the login button stays on one line rather than
   stacking into a two-line block beside the brand. */
@media (max-width: 400px) {
  .site-header .nav-portal { white-space: nowrap; padding: 9px 11px; font-size: .92rem; }
  .site-header nav a { padding: 8px 10px; }
  .site-header nav { margin-left: -10px; }
}
@media (max-width: 345px) {
  .site-header .brand { font-size: 1.2rem; }
  .site-header .brand-lockup { gap: 9px; }
}
/* The slogan is set to fit the lockup's width at each size, so that justifying
   it stretches the word gaps a little rather than forcing it wider. */
@media (max-width: 759px) { .site-header .brand-mark { width: 46px; height: 46px; } }