/* Trumis consumer homepage — 2026 theme.
 *
 * Implements the "Trumis Home" Claude Design file: cool slate ink on a pale
 * blue-grey page, teal accent, Inter throughout, soft-radius cards and blurred
 * elevation. This deliberately departs from "The Drafted Letter" system in
 * /assets/site.css (warm paper, rust, Newsreader, square corners, hard offset
 * shadows) which still dresses every other page on the site.
 *
 * Scoped under .home26 so it can never leak into a page that also loads
 * site.css. The mock ships hover states as `style-hover=""` attributes, which
 * browsers ignore — they are written out as real :hover rules here.
 */

.home26 {
  --page: #eef2f3;
  --shell: #f7f9fa;
  --surface: #ffffff;
  --ink: #152333;
  --ink-2: #2b3d4c;
  --body: #4f616d;
  --muted: #5b6b76;
  --rule: #dfe6ea;
  --teal: #087f83;
  --teal-dark: #056b6e;
  --teal-deep: #066165;
  --teal-tint: #e3f4f2;
  --teal-line: #bde0dc;
  --teal-bright: #7fd6d2;
  --dark: #152333;
  --dark-hover: #0c1826;
  --on-dark: #b6c5cf;
  --lift: 0 18px 55px rgba(33, 54, 69, .08);
  --lift-strong: 0 18px 55px rgba(33, 54, 69, .10);
  --lift-hover: 0 8px 22px rgba(33, 54, 69, .10);

  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.home26 *, .home26 *::before, .home26 *::after { box-sizing: border-box; }
.home26 a { color: var(--teal); text-decoration: none; font-weight: 700; }
.home26 a:hover { color: var(--teal-dark); }
.home26 button { font: inherit; }
.home26 img { max-width: 100%; }

/* The 1500px artboard, floating on the page tint, with the 1180px content
   column centred inside a 32px gutter. */
.h26-shell { max-width: 1500px; margin: 0 auto; background: var(--shell); box-shadow: var(--lift); }
.h26-wrap { max-width: 1180px; margin: 0 auto; }
.home26 main { padding: 0 32px 48px; }

.h26-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--teal); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-size: 13px; font-weight: 700;
}
.h26-skip:focus { left: 0; color: #fff; }
.home26 :where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px;
}

/* ---------- masthead ---------- */
.h26-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 32px; min-height: 80px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.h26-brand { display: flex; gap: 11px; align-items: center; font-weight: 700; }
.h26-brand .mark { display: block; width: 34px; height: 34px; border-radius: 8px; flex: none; }
.h26-band .mark { width: 30px; height: 30px; border-radius: 7px; vertical-align: -7px; margin-right: 9px; }
/* `.home26 a` (0,1,1) outranks a bare `.h26-brand` (0,1,0) and was turning the
   wordmark teal — match its depth so the brand stays ink. */
.home26 .h26-brand, .home26 .h26-brand:hover { color: var(--ink); }
/* The design system's rule for site chrome: set the wordmark in live type
   rather than shipping a raster logo. */
.h26-brand .word { font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.h26-brand .bar { align-self: stretch; width: 1px; background: var(--rule); }
.h26-brand .tag {
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 460px) { .h26-brand .tag, .h26-brand .bar { display: none; } }
.h26-nav { display: flex; align-items: center; gap: 8px; }
.h26-nav a.link { color: var(--ink); font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 8px; }
.h26-nav a.link:hover { color: var(--teal-deep); background: var(--teal-tint); }
.h26-nav a.link[aria-current="page"] { color: var(--teal-deep); background: var(--teal-tint); }

.h26-btn {
  display: inline-block; border-radius: 10px; padding: 14px 24px;
  font-size: 15px; font-weight: 700; border: 1px solid transparent; cursor: pointer;
}
.h26-btn.primary { background: var(--teal); color: #fff; }
.h26-btn.primary:hover { background: var(--teal-dark); color: #fff; }
.h26-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.h26-btn.ghost:hover { background: #f0f8f7; border-color: var(--teal-line); color: var(--ink); }
.h26-btn.dark { background: var(--dark); color: #fff; border-radius: 8px; padding: 10px 16px; font-size: 13px; }
.h26-btn.dark:hover { background: var(--dark-hover); color: #fff; }
.h26-btn.white { background: #fff; color: var(--ink); border-radius: 10px; padding: 16px 28px; font-size: 16px; white-space: nowrap; }
.h26-btn.white:hover { background: var(--teal-tint); color: var(--ink); }
.h26-donate {
  border: 1px solid var(--teal-line); color: var(--teal-deep); background: var(--teal-tint);
  border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.h26-donate:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.h26-nav form { margin: 0; }

/* mobile menu */
.h26-menu { display: none; margin-left: auto; }
.h26-menu summary {
  cursor: pointer; list-style: none; border: 1px solid var(--rule); border-radius: 8px;
  padding: 9px 13px; font-size: 13px; font-weight: 700; color: var(--ink);
}
.h26-menu summary::-webkit-details-marker { display: none; }
.h26-menu summary::after { content: " +"; color: var(--teal); }
.h26-menu[open] summary::after { content: " −"; }
.h26-menu nav {
  position: absolute; right: 24px; top: 68px; z-index: 40; min-width: 250px; padding: 8px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--lift-strong); display: flex; flex-direction: column;
}
.h26-menu nav a {
  color: var(--ink); font-size: 14px; font-weight: 600; padding: 11px 12px;
  border-bottom: 1px solid var(--rule);
}
.h26-menu nav a:last-child { border-bottom: 0; }
.h26-menu nav a.primary { background: var(--teal); color: #fff; border-radius: 8px; margin-top: 8px; border-bottom: 0; }
.h26-menu nav form { margin: 0; }
.h26-menu nav form button {
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: 11px 12px; font-size: 14px; font-weight: 600; color: var(--teal-deep); cursor: pointer;
}

/* ---------- shared bits ---------- */
.h26-kicker {
  color: var(--teal); font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.7;
}
.home26 h1 {
  margin: 0; font-size: 54px; line-height: 1.05; letter-spacing: -.045em;
  font-weight: 760; text-wrap: pretty;
}
.home26 h2 { margin: 0; font-size: 34px; line-height: 1.15; letter-spacing: -.04em; font-weight: 760; text-wrap: pretty; }
.home26 h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; font-weight: 700; }
.home26 em { font-style: italic; color: var(--ink); }
.h26-lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 56ch; }
.h26-section { padding: 0 0 52px; }
.h26-head-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.h26-head-row h2 { margin-top: 6px; }
.h26-note { color: var(--muted); font-size: 12px; font-weight: 400; }
.h26-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 19px;
  display: flex; flex-direction: column; gap: 9px;
}
.h26-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--body); }
.h26-grid { display: grid; gap: 13px; }
.h26-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.h26-grid.g5 { grid-template-columns: repeat(5, 1fr); }
.h26-grid.g2 { grid-template-columns: 1fr 1fr; }
.h26-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.h26-split.lead { grid-template-columns: 1.1fr .9fr; }

/* ---------- hero ---------- */
.h26-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; padding: 56px 0 52px; }
.h26-hero .copy { display: flex; flex-direction: column; gap: 24px; }
.h26-hero h1 span { color: var(--teal); }
.h26-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.h26-langs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.h26-langs .label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.h26-langs .pills { display: flex; gap: 7px; flex-wrap: wrap; }
.h26-langs a {
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  border-radius: 99px; padding: 6px 13px; font-size: 13px; font-weight: 600;
}
.h26-langs a:hover { border-color: var(--teal-line); background: #f0f8f7; color: var(--teal); }

/* the sample-letter artefact */
.h26-letter {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--lift-strong); padding: 26px 28px; display: flex; flex-direction: column; gap: 15px;
}
.h26-letter .meta {
  display: flex; justify-content: space-between; color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.h26-letter .hr { height: 1px; background: var(--rule); }
.h26-letter .to { font-size: 14px; line-height: 1.6; color: var(--ink); font-weight: 700; }
.h26-letter .body { font-size: 13.5px; line-height: 1.7; color: var(--body); }
.h26-letter mark { background: var(--teal-tint); color: var(--ink); padding: 1px 4px; border-radius: 4px; font-weight: 600; }
.h26-ticks { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.h26-tick { display: flex; gap: 10px; align-items: flex-start; }
.h26-tick .mk { color: var(--teal); font-weight: 800; font-size: 13px; line-height: 1.4; flex: none; }
.h26-tick span:last-child { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.h26-letter .foot {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--teal);
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.6;
}

/* ---------- pipeline / steps / sectors ---------- */
.h26-pipe .k, .h26-step .n {
  color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.h26-pipe p { margin-top: 10px; font-size: 13.5px; }
.h26-sector:hover { box-shadow: var(--lift-hover); border-color: var(--teal-line); }
.h26-sector .badge {
  display: inline-flex; align-self: flex-start; border: 1px solid var(--teal-line);
  color: var(--teal-deep); background: var(--teal-tint); border-radius: 99px; padding: 4px 9px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.h26-sector h3 { font-size: 17px; }
.h26-sector p { font-size: 13.5px; flex: 1; }
.h26-sector .links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }

/* ---------- trust / faq ---------- */
.h26-list { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 5px 19px; }
.h26-list .row { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.h26-list .row:last-child { border-bottom: none; }
.h26-list .mk { color: var(--teal); font-weight: 800; font-size: 13px; line-height: 1.5; flex: none; }
.h26-list p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--body); }
.h26-list strong { color: var(--ink); }
.h26-faq h3 { font-size: 15px; margin-bottom: 8px; }
.h26-faq p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--body); }

/* ---------- fairclaim + CTA + footer ---------- */
.h26-quote {
  margin-top: 12px; border-left: 3px solid var(--teal); padding-left: 16px;
  display: flex; flex-direction: column; gap: 12px; max-width: 82ch;
}
.h26-quote p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body); }
.h26-quote strong { color: var(--ink); }
.h26-band {
  background: var(--dark); border-radius: 14px; padding: 44px 40px; color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 36px; flex-wrap: wrap;
}
.h26-band .copy { max-width: 36ch; }
.h26-band .word { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #fff; display: block; margin-bottom: 20px; }
.h26-band .line { font-size: 30px; line-height: 1.2; font-weight: 760; letter-spacing: -.035em; }
.h26-band .sub {
  margin-top: 12px; color: var(--on-dark); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.7;
}
.h26-band .sub a { color: var(--teal-bright); }
.h26-band .sub a:hover { color: #fff; }
.h26-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; padding: 26px 0 8px; border-top: 1px solid var(--rule); }
.h26-foot p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.7; max-width: 60ch; }
.h26-foot p + p { margin-top: 12px; font-weight: 400; letter-spacing: .04em; }
.h26-foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 4px of the design's 9px gap moved inside the link, so the hit area clears
   WCAG 2.2's 24px minimum without changing the optical rhythm. */
.h26-foot .cols div { display: flex; flex-direction: column; gap: 5px; }
.h26-foot .cols a { color: var(--body); font-size: 13px; font-weight: 600; padding: 2px 0; }
.h26-foot .cols a:hover { color: var(--teal); }

/* ---------- responsive: the mock is a 1500px artboard with no breakpoints ---------- */
@media (max-width: 980px) {
  .h26-grid.g5, .h26-grid.g4 { grid-template-columns: repeat(2, 1fr); }
  .h26-hero, .h26-split, .h26-split.lead { grid-template-columns: 1fr; gap: 32px; }
  .h26-hero { padding: 40px 0 44px; }
  .home26 h1 { font-size: 42px; }
  .home26 h2 { font-size: 30px; }
}
/* The nav needs ~900px to sit on one row beside the wordmark; below that it
   used to overflow the viewport rather than collapse. */
@media (max-width: 900px) {
  .h26-nav { display: none; }
  .h26-menu { display: block; }
  .h26-menu nav { right: 20px; top: 62px; }
}
@media (max-width: 760px) {
  .home26 main { padding: 0 20px 40px; }
  .h26-head { padding: 14px 20px; }
  .home26 main { padding: 0 20px 40px; }
  .home26 h1 { font-size: 34px; letter-spacing: -.03em; }
  .home26 h2 { font-size: 26px; letter-spacing: -.03em; }
  .h26-lede { font-size: 16px; }
  .h26-band { padding: 32px 24px; }
  .h26-band .line { font-size: 24px; }
  .h26-foot { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .h26-grid.g5, .h26-grid.g4, .h26-grid.g2 { grid-template-columns: 1fr; }
  .h26-letter { padding: 20px 18px; }
  .h26-btn { width: 100%; text-align: center; }
  .h26-btn.dark, .h26-donate { width: auto; }
}