/* Securidigm website — the owner's redesign (2026-10-02, docs/website-redesign/), built exactly as designed.
   Values come from the design files (docs/website-redesign/design_handoff_securidigm_site/design/SD-*.dc.html).
   No inline styles and no JavaScript (the site's Content-Security-Policy); fonts are hosted here (assets/fonts/, SIL OFL).
   Narrow screens (the design is drawn for desktop): side padding, column counts and type sizes step down; nothing else changes. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:root {
  --ink: #0A0A0A; --page: #FAFAF8; --alt: #EFEFEB; --card: #FFFFFF;
  --line: #E4E4E0; --line-2: #D2D2CC;
  --muted: #5A5F64; --body-muted: #40454A; --legal: #2A2E32;
  --on-black: #C9CCCF; --on-black-2: #A8ADB2;
  --dev: #F5C451; --on-dev: #111111; /* "Under development" badge (Reclaim paused, D223) */
  /* the design's oklch greens, converted exactly (all inside sRGB): oklch(0.80 0.16 150), (0.88 0.17 150), (0.85 0.16 150), (0.52 0.14 150) */
  --green: #66DA85; --green-kicker: #7AF69A; --green-label: #77EB94; --green-dark: #0A7E3A;
  --on-green: #04140A;
  --pad: 56px; --nav-h: 88px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: "Archivo", sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cta :focus-visible { outline-color: var(--on-green); }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--green); color: var(--on-green); font-weight: 600; padding: 10px 16px; border-radius: 999px; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- Main nav ---------- */
.mainnav { position: sticky; top: 0; z-index: 60; background: var(--ink); color: #fff; min-height: var(--nav-h);
  display: flex; justify-content: space-between; align-items: center; padding: 12px var(--pad); gap: 24px; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 34px; letter-spacing: -.025em; display: flex; align-items: baseline; color: #fff; }
.logo .digm { color: var(--green); }
.logo .sq { width: 8px; height: 8px; background: var(--green); margin-left: 4px; flex: none; }
.mainnav .links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; flex-wrap: wrap; }
.mainnav .links a[aria-current="page"] { color: var(--green); }
.pill-talk { white-space: nowrap; font-size: 14px; font-weight: 600; background: var(--green); color: var(--on-green); padding: 10px 18px; border-radius: 999px; }
.mainnav .end { display: flex; align-items: center; gap: 12px; }
.nav-mobile { display: none; }
.nav-mobile summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: #fff; padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; display: flex; align-items: center; gap: 10px; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile .bars { width: 14px; height: 10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; position: relative; }
.nav-mobile .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid #fff; }
.nav-mobile nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-top: 1px solid rgba(255,255,255,.12);
  padding: 8px var(--pad) 20px; display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-mobile nav a { padding: 12px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-mobile nav a[aria-current="page"] { color: var(--green); }
.nav-mobile nav .pill-talk { align-self: flex-start; margin-top: 16px; border-bottom: 0; padding: 10px 18px; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-weight: 600; padding: 16px 24px; border-radius: 999px; white-space: nowrap; }
.btn-green { background: var(--green); color: var(--on-green); }
.btn-ghost-dark { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-black { background: var(--ink); color: #fff; }
.btn-ghost-green { border: 1px solid var(--on-green); color: var(--on-green); }
.btn-sm { padding: 14px 22px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Shared bits ---------- */
.kicker { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0; }
.kicker-green { color: var(--green); }
.section { padding: 96px var(--pad); }
.h2-xl { margin: 0; font-size: 56px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.h2-l { margin: 0; font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1.02; }

/* ---------- Home: hero video tiles ---------- */
.tiles { flex: 1.6 1 560px; max-width: 900px; min-width: 300px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 14px; min-height: 680px; }   /* D242: two tiles, Signal and Harbor, larger to fill the hero (owner, session 31); four, 2 by 2, before */
.tile { position: relative; border-radius: 10px; overflow: hidden; display: block; min-height: 0; border: 1px solid rgba(255,255,255,.12); }
.tile:hover { opacity: .9; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tile img.pos-signal { object-position: 60% center; }
.tile-cap { position: absolute; inset: auto 0 0 0; padding: 28px 16px 16px; background: linear-gradient(0deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.82) 55%, transparent); display: flex; flex-direction: column; gap: 2px; }
.tile-cap .lbl { font-family: var(--mono); font-size: 11px; color: var(--green-label); }
.tile-cap { padding: 40px 22px 22px; }
.tile-cap .lbl { font-size: 12px; }
.tile-cap .nm { font-size: 24px; font-weight: 700; color: #fff; }

/* Home: two ways to work */
.work { border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 40px; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.work-head .intro { display: flex; flex-direction: column; gap: 16px; }
.work-head > p { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--body-muted); }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.way { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.way.dark { background: var(--ink); color: #fff; border: 0; }
.way .lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }
.way.dark .lbl { color: var(--green); }
.way h3 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.way p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body-muted); }
.way.dark p { color: var(--on-black); }
.way ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.way li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.way li:last-child { border-bottom: 1px solid var(--line); }
.way.dark li { border-color: rgba(255,255,255,.12); }
.way p.quote { font-size: 14px; color: var(--on-black-2); line-height: normal; }
.way p.lbl { line-height: normal; }
.way .btn { align-self: flex-start; margin-top: auto; }
.work .note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 900px; }

/* Green call-to-action band */
.cta-wrap { padding: 0 var(--pad) var(--pad); }
.cta { background: var(--green); border-radius: 12px; padding: 56px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta h2 { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.02; max-width: 600px; color: var(--on-green); }

/* ---------- Product pages (Signal, Harbor) ---------- */
.product [id] { scroll-margin-top: 150px; }
.pill-eval { font-size: 14px; font-weight: 600; border: 1px solid #fff; padding: 10px 18px; border-radius: 999px; white-space: nowrap; flex: none; color: #fff; }
.phero { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.phero-main { position: relative; padding: 80px var(--pad) 56px; display: flex; flex-direction: column; gap: 28px; }
.phero-row { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: stretch; }
.phero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; flex: 1 1 560px; }
.crumbs { font-family: var(--mono); font-size: 13px; color: var(--on-black-2); display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
.crumbs [aria-current] { color: var(--green); }
.phero-kicker { font-family: var(--mono); font-size: 13px; color: var(--green); margin: 0; }
.phero h1 { margin: 0; font-size: clamp(46px, 6vw, 84px); line-height: .94; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.phero-lede { margin: 0; font-size: 19px; line-height: 1.55; color: var(--on-black); max-width: 620px; text-wrap: pretty; }
.statusline { display: flex; gap: 10px 45px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--on-black); margin: 0; padding: 0; list-style: none; overflow: hidden; }
.statusline li { display: flex; align-items: center; position: relative; }
/* The divider sits in the gap before an item (22px + 1px + 22px, as designed); a line that wraps starts at the list's edge, so its divider falls outside and is clipped. */
.statusline li + li::before { content: ""; position: absolute; left: -23px; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: rgba(255,255,255,.3); }
.statusline li:first-child { gap: 8px; color: #fff; }
.statusline li:first-child::before { content: ""; width: 7px; height: 7px; background: var(--green); flex: none; }
.phero-app { margin: 0; flex: 1 1 420px; max-width: 680px; min-width: 0; align-self: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.phero-app .head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-black-2); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.phero-app img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); }
.phero-app figcaption { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--on-black-2); }
.stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.15); margin: 0; padding: 0; list-style: none; }
.stats li { padding: 28px 40px; border-right: 1px solid rgba(255,255,255,.15); }
.stats li:first-child { padding: 28px var(--pad); }
.stats li:last-child { border-right: 0; }
.stats .n { display: block; font-size: 48px; font-weight: 700; letter-spacing: -.03em; }
.stats .l { display: block; font-family: var(--mono); font-size: 12px; color: var(--on-black-2); margin-top: 4px; }
.h2-p { margin: 0; font-size: 52px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 64px; }
.split.faq { grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); }
.split.half { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; }
.intro { display: flex; flex-direction: column; gap: 16px; }
.rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rows li { padding: 20px 0; border-top: 1px solid var(--line-2); font-size: 17px; line-height: 1.5; }
.rows li:last-child { border-bottom: 1px solid var(--line-2); }
.alt { background: var(--alt); }
.stack { display: flex; flex-direction: column; gap: 40px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.sec-head > p { margin: 0; max-width: 440px; font-size: 17px; line-height: 1.55; color: var(--body-muted); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.features li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.features .n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.features .t { font-size: 20px; font-weight: 600; margin: 0; }
.features .d { font-size: 15px; line-height: 1.55; color: var(--body-muted); margin: 0; }
.docs { background: var(--ink); color: #fff; border-radius: 12px; padding: 40px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 48px; }
.docs .lead { display: flex; flex-direction: column; gap: 12px; }
.docs .big { font-size: 72px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--green); }
.docs .t { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.docs .s { font-size: 15px; color: var(--on-black); line-height: 1.55; margin: 0; }
.docs ul:not(.levels) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; font-size: 15px; line-height: 1.45; color: #E4E6E8; margin: 0; padding: 0; list-style: none; }
.docs ul:not(.levels) li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
.data-wrap { padding: 0 var(--pad) 96px; }
.data { background: var(--ink); color: #fff; border-radius: 12px; padding: 56px; display: flex; flex-direction: column; gap: 40px; }
.data-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: end; }
.data-head .h2-l { line-height: 1; }
.data-head > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--on-black); }
.cells { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.cells li { background: var(--ink); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.cells .t { font-size: 18px; font-weight: 600; margin: 0; }
.cells .d { font-size: 14px; line-height: 1.55; color: var(--on-black); margin: 0; }
.xlist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.xlist li { display: grid; grid-template-columns: 28px 1fr; padding: 18px 0; border-top: 1px solid var(--line-2); font-size: 16px; line-height: 1.5; }
.xlist li:last-child { border-bottom: 1px solid var(--line-2); }
.xlist li::before { content: "✕"; color: var(--muted); }
.avail .intro { gap: 20px; }
.avail .intro > p:not(.kicker) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body-muted); }
.btn-ghost-ink { border: 1px solid var(--ink); color: var(--ink); }
.howcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 36px; display: flex; flex-direction: column; gap: 4px; }
.howcard .t { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.howcard ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.howcard li { display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.howcard li .n { font-family: var(--mono); color: var(--muted); }
.howcard .note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }
.faqs { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.faqs details { border-bottom: 1px solid var(--line-2); padding: 22px 0; }
.faqs summary { list-style: none; cursor: pointer; font-size: 19px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; color: var(--muted); font-weight: 600; }
.faqs details[open] summary::after { content: "−"; }
.faqs p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--body-muted); }
.cta.wrap { flex-wrap: wrap; }
.cta.wrap h2 { max-width: 620px; }

.intro > p.note { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body-muted); }
.rows li.lab { display: grid; grid-template-columns: 140px 1fr; gap: 24px; }
.rows li.lab span { color: var(--body-muted); }
.rows li.lab.wide { grid-template-columns: 260px 1fr; }
.docs .t.green { color: var(--green); }
.howcard ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.howcard ul li { display: grid; grid-template-columns: 28px 1fr; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.howcard ul li::before { content: "✓"; color: #1C8742; }

.reserve-left { display: flex; flex-direction: column; gap: 20px; }
.reserve-left > p:not(.kicker):not(.founder) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body-muted); }
.incl { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.incl li { padding: 14px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.incl li:last-child { border-bottom: 1px solid var(--line-2); }
.founder { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; font-size: 15px; line-height: 1.6; color: var(--body-muted); margin: 0; }
.founder strong { color: var(--ink); }
.founder a, .loi .note a { text-decoration: underline; }
.loi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 36px; display: flex; flex-direction: column; gap: 18px; margin: 0; min-width: 0; }
.loi .t { font-size: 22px; font-weight: 700; margin: 0; }
.fgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; overflow: hidden; padding: 3px; margin: -3px; }  /* Safari counts a select's full option width as overflow; contained here, 3px kept for the focus outline */
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.fld input, .fld select, .fld textarea { width: 100%; min-width: 0; max-width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--page); color: var(--ink); }
.fld input:focus, .fld select:focus, .fld textarea:focus, .chk input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.chk { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.chk input { width: 18px; height: 18px; flex: none; }
.loi .note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.btn-submit { font: inherit; font-weight: 600; font-size: 16px; background: var(--ink); color: #fff; border: 0; padding: 16px 24px; border-radius: 999px; cursor: pointer; align-self: flex-start; }
.btn-submit:hover { opacity: .8; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* ---------- About ---------- */
.ahero { background: var(--ink); color: #fff; }
.ahero-main { padding: 72px var(--pad) 0; display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }  /* the same columns as the app pages' hero, so the photo is as wide as their screen cards (owner, D183) */
.ahero-copy { display: flex; flex-direction: column; gap: 28px; flex: 1 1 560px; min-width: 0; }
.ahero h1 { margin: 0; font-size: 84px; line-height: .94; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.ahero .btn { font-size: 15px; padding: 14px 22px; }
.btn-ghost-white { border: 1px solid #fff; color: #fff; }
.portrait { margin: 0; position: relative; flex: 1 1 420px; max-width: 680px; min-width: 0; }
.portrait img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: center 30%; display: block; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); }
.portrait figcaption { position: absolute; left: 14px; bottom: 14px; font-family: var(--mono); font-size: 12px; background: var(--ink); color: #fff; padding: 6px 10px; border-radius: 999px; display: flex; align-items: center; gap: 8px; }
.portrait figcaption::before { content: ""; width: 6px; height: 6px; background: var(--green); }
.ribbon { margin: 72px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.14); }
.ribbon li { padding: 24px 24px 28px; border-right: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 6px; }
.ribbon li:first-child { padding-left: var(--pad); }
.ribbon li:last-child { border-right: 0; }
.ribbon .n { font-family: var(--mono); font-size: 12px; color: var(--green); }
.ribbon .t { font-size: 16px; font-weight: 600; }
.founder-sec { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 72px; align-items: start; }
.founder-side { display: flex; flex-direction: column; gap: 28px; position: sticky; top: calc(var(--nav-h) + 32px); }
.founder-side .intro { gap: 14px; }
.founder-side .intro > p:not(.kicker) { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body-muted); }
.creds { display: flex; flex-direction: column; gap: 12px; }
.creds .lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { font-size: 14px; font-weight: 600; border: 1px solid var(--line-2); background: var(--card); padding: 8px 12px; border-radius: 999px; }
.edu { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.edu li { display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 500; }
.edu li::before { content: ""; width: 6px; height: 6px; background: var(--green); flex: none; }
.founder-main { display: flex; flex-direction: column; gap: 28px; }
.founder-main .big { margin: 0; font-size: 28px; line-height: 1.35; font-weight: 500; letter-spacing: -.015em; text-wrap: pretty; }
.barquote { display: grid; grid-template-columns: 4px minmax(0,1fr); gap: 20px; }
.barquote::before { content: ""; background: var(--green); }
.barquote p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body-muted); text-wrap: pretty; }
.why { display: flex; flex-direction: column; gap: 48px; }
.whycards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.whycards li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.whycards .top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.whycards .top::after { content: ""; width: 10px; height: 10px; background: var(--green); }
.whycards .t { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.whycards .d { font-size: 15px; line-height: 1.6; color: var(--body-muted); margin: 0; }
.guides { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 15px; color: var(--muted); margin: 0; }
.guides a { font-weight: 600; color: var(--ink); border: 1px solid var(--line-2); padding: 6px 12px; border-radius: 999px; }
.cta .cta-text { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.cta .cta-text p { margin: 0; font-size: 17px; color: var(--on-green); }

/* ---------- Contact / Evaluate ---------- */
.chero { background: var(--ink); color: #fff; padding: 80px var(--pad) 88px; display: flex; flex-direction: column; gap: 28px; }
.chero h1 { margin: 0; font-size: 84px; line-height: .94; font-weight: 800; letter-spacing: -.045em; }
.chero h1.wide { max-width: 1000px; text-wrap: balance; }
.chero .phero-lede.wide { max-width: 680px; }
.form-sec { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 64px; align-items: start; }
.form-side { display: flex; flex-direction: column; gap: 24px; }
.rows.tight li { padding: 18px 0; }
.aside-note { background: var(--alt); border-radius: 12px; padding: 24px; font-size: 15px; line-height: 1.6; color: var(--body-muted); margin: 0; }
.aside-note a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.loi .head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.loi .head .lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.fld .hint { font-weight: 400; font-size: 12px; color: var(--muted); }
.fld .hint.lh { line-height: 1.4; }
.fld textarea { resize: vertical; }
.loi .notes { font-size: 13px; line-height: 1.55; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.loi .notes p { margin: 0; }
.loi .notes a { text-decoration: underline; }

.numrows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.numrows li { display: grid; grid-template-columns: 36px 1fr; padding: 18px 0; border-top: 1px solid var(--line-2); font-size: 16px; line-height: 1.55; }
.numrows li:last-child { border-bottom: 1px solid var(--line-2); }
.numrows .n { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 2px; }
.side-fine { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.side-fine a { color: var(--ink); text-decoration: underline; }
.apps { border: 0; margin: 0; padding: 6px 0 0; min-width: 0; }
.apps legend { padding: 0; font-size: 15px; font-weight: 600; float: left; width: 100%; margin: 0 0 2px; }
.apps .hint { font-size: 13px; color: var(--muted); margin: 0 0 10px; clear: both; }
.appgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.app { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; cursor: pointer; min-width: 0; }
.app input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.app input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.app .txt { font-size: 14px; line-height: 1.45; }
.app strong { display: block; font-size: 15px; }
.app .d { color: var(--muted); }
.btn-submit.green { background: var(--green); color: var(--on-green); }

/* ---------- Legal pages (Terms, Evaluation Terms, Privacy, Letter of intent): the live wording, restyled ---------- */
.lhero { background: var(--ink); color: #fff; padding: 80px var(--pad) 48px; display: flex; flex-direction: column; gap: 24px; }
.lhero h1 { margin: 0; font-size: clamp(44px, 5.5vw, 76px); line-height: .96; font-weight: 800; letter-spacing: -.04em; max-width: 1000px; text-wrap: balance; }
.lhero .meta { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--on-black); margin: 0; }
.chero .phero-lede a, .lhero .meta a, .lhero .lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lhero .lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--on-black); max-width: 720px; text-wrap: pretty; }
.doclinks { display: flex; flex-wrap: wrap; gap: 10px 0; font-family: var(--mono); font-size: 13px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); margin: 0; }
.doclinks a { white-space: nowrap; flex: none; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.25); color: var(--on-black); }
.doclinks a:first-child { padding-left: 0; border-left: 0; }
.doclinks a[aria-current] { color: var(--green); }
.lbody { padding: 64px var(--pad) 96px; display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; }
.toc { flex: 0 0 220px; position: sticky; top: 96px; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.toc .lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-bottom: 10px; margin: 0; }
.toc a { padding: 6px 0; color: var(--body-muted); }
.lmain { flex: 1 1 520px; max-width: 760px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lsec { display: flex; flex-direction: column; gap: 14px; padding-top: 36px; }
.lsec.first { padding-top: 0; }
.lmain h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.lmain p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--legal); text-wrap: pretty; }
.lmain a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.lmain strong { font-weight: 700; color: var(--ink); }
.cl { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 8px; align-items: baseline; }
.cl .num { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.lmain p.caps { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.bullets { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin: 0; padding: 0; list-style: none; }
.bullets li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--legal); }
.bullets li::before { content: ""; width: 7px; height: 7px; background: var(--green); margin-top: 9px; }
.sigcard { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.siglines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.siglines li { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--line); }
.siglines .k { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.siglines li::after { content: ""; height: 20px; }
.lmain .sigbox { display: flex; gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.5; color: var(--ink); }
.sigbox::before { content: ""; width: 16px; height: 16px; border: 1.5px solid var(--ink); flex: none; transform: translateY(3px); }
.lmain .ack { padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--body-muted); }
.lnote { margin-top: 12px; background: var(--alt); border-radius: 12px; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.lmain .lnote p { font-size: 15px; line-height: 1.6; color: var(--body-muted); max-width: 520px; }
.lmain .lnote p a { font-weight: 600; text-decoration: underline; text-underline-offset: auto; }
.lnote .btn { padding: 14px 22px; color: #fff; text-decoration: none; }
.shablock { margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.shablock .lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.shablock code { font-family: var(--mono); font-size: 13px; color: var(--ink); word-break: break-all; }

/* ---------- Thank-you and not-found pages ---------- */
.msg { padding: 72px var(--pad) 96px; display: flex; flex-direction: column; gap: 24px; max-width: calc(760px + 2 * var(--pad)); }
.msg p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body-muted); }
.msg p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.msg .rows a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.foot { padding: var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 40px; font-size: 14px; color: var(--body-muted); }
.foot .brand { display: flex; flex-direction: column; gap: 12px; }
.foot .logo { font-size: 28px; color: var(--ink); }
.foot .logo .digm { color: var(--green-dark); }
.foot .brand p { margin: 0; }
.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot .col-lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }
.disclaimer { padding: 20px var(--pad) 32px; font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1000px) {
  .mainnav .links { display: none; }
  .nav-mobile { display: block; }
  .mainnav { flex-wrap: nowrap; }
  .ways { grid-template-columns: 1fr; gap: 40px; }
  .ways { gap: 16px; }
  .cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  :root { --pad: 20px; --nav-h: 72px; }
  .mainnav .end > .pill-talk { display: none; }
  .tiles { min-width: 0; min-height: 420px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .h2-xl { font-size: 40px; }
  .h2-l { font-size: 36px; }
  .h2-xl br, .h2-l br { display: none; }
  .way { padding: 28px 24px; }
  .way h3 { font-size: 28px; }
  .cta { padding: 32px 24px; }
  .cta h2 { font-size: 32px; }
  .foot { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot .brand { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .btn { white-space: normal; }
}

@media (max-width: 1000px) {
  .mainnav .end .pill-eval { padding: 10px 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats li, .stats li:first-child { padding: 24px var(--pad); }
  .stats li:nth-child(2n) { border-right: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.15); }
  .split, .split.faq, .split.half, .data-head, .docs { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .features, .cells { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .founder-sec { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .portrait { max-width: 560px; }
  .founder-side { position: static; }
  .ribbon { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ribbon li, .ribbon li:first-child { padding: 24px var(--pad); }
  .ribbon li:nth-child(2n) { border-right: 0; }
  .ribbon li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .whycards { grid-template-columns: minmax(0,1fr); }
  .form-sec { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .toc { position: static; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .mainnav .end > .pill-eval { display: none; }
  .phero-main { padding-top: 48px; padding-bottom: 40px; }
  .phero h1 { font-size: 40px; }
  .phero-lede { font-size: 17px; }
  .phero-app { padding: 14px; }
  .stats .n { font-size: 36px; }
  .h2-p { font-size: 36px; }
  .features, .cells, .docs ul:not(.levels) { grid-template-columns: minmax(0,1fr); }
  .fgrid, .appgrid { grid-template-columns: minmax(0,1fr); }
  .ahero h1, .chero h1 { font-size: 48px; }
  .chero { padding-top: 48px; padding-bottom: 56px; }
  .lhero { padding-top: 48px; }
  .lbody { padding-top: 40px; }
  .sigcard { padding: 24px; }
  .siglines li { grid-template-columns: 80px minmax(0,1fr); }
  .ahero-main { padding-top: 48px; }
  .ribbon { margin-top: 48px; grid-template-columns: minmax(0,1fr); }
  .ribbon li { border-right: 0; }
  .ribbon li + li { border-top: 1px solid rgba(255,255,255,.14); }
  .founder-main .big { font-size: 22px; }
  .loi { padding: 28px 24px; }
  .rows li.lab, .rows li.lab.wide { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .data, .docs, .howcard { padding: 28px 24px; }
  .docs .big { font-size: 56px; }
  .product [id] { scroll-margin-top: 130px; }
}

/* Why Securidigm page (session 31, D244): tables, pull quotes, the download band, sources */
.features.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sub-h { margin: 8px 0 -16px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sub-h a { text-decoration: underline; text-underline-offset: 3px; }
.pull { background: var(--ink); color: #fff; border-radius: 12px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.pull-lbl { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--green-kicker); }
.pull-h { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.pull-d { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-black); max-width: 900px; }
.quotes { display: grid; gap: 16px; }
.quotes.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.quotes.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
.quotes blockquote { margin: 0; padding: 22px 24px; border-left: 3px solid var(--green); background: var(--card); border-radius: 0 10px 10px 0; display: flex; flex-direction: column; gap: 10px; }
.quotes blockquote p { margin: 0; font-size: 18px; line-height: 1.45; font-style: italic; }
.quotes blockquote footer { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
.pull .quotes blockquote { background: rgba(255,255,255,.06); }
.pull .quotes blockquote footer { color: var(--on-black-2); }
.wtable-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); }
.wtable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.wtable caption { caption-side: bottom; text-align: left; padding: 14px 18px; font-size: 14px; line-height: 1.55; color: var(--body-muted); border-top: 1px solid var(--line); }
.wtable th { text-align: left; padding: 12px 18px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.wtable td { padding: 12px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.wtable tbody tr:nth-child(even) td { background: var(--page); }
.docs ul.trace strong { display: block; color: #fff; }
a.inline { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dlband { background: var(--ink); color: #fff; border-radius: 12px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.dlband > div:first-child { max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.dlband p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-black); }
.dlband .kicker { color: var(--green-kicker); }
.sources summary { cursor: pointer; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.sources ul { margin: 12px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--body-muted); }
@media (max-width: 1000px) {
  .features.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quotes.two, .quotes.four { grid-template-columns: minmax(0,1fr); }
  .pull-h { font-size: 32px; }
}
@media (max-width: 700px) {
  .features.four { grid-template-columns: minmax(0,1fr); }
  .pull, .dlband { padding: 28px 24px; }
  .pull-h { font-size: 26px; }
  .wtable { font-size: 14px; }
  .wtable th, .wtable td { padding: 10px 12px; }
}

/* Screen-reader-only text (session 31) */
.sr-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Home hero: the two video demos as tiles, like the Securidigm page's hero (owner, session 31) */
.phero .vtiles { align-self: stretch; }
.tile-play { position: absolute; top: 16px; left: 16px; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: var(--on-green); display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.tile:hover .tile-play { transform: scale(1.06); }
.phero h1.h1-home { font-size: clamp(40px, 4.4vw, 68px); text-wrap: nowrap; }
@media (max-width: 700px) { .phero h1.h1-home { text-wrap: wrap; } }
@media (max-width: 700px) { .mainnav .logo { font-size: 28px; } }   /* session 31: larger logo, still clear of the menu button */

/* Session 31 (owner): one hero title size on every page; the tagline under the logo */
.phero h1, .phero h1.h1-home, .ahero h1, .chero h1, .lhero h1 { font-size: clamp(40px, 4.4vw, 68px); line-height: .96; }
@media (max-width: 700px) { .phero h1, .phero h1.h1-home, .ahero h1, .chero h1, .lhero h1 { font-size: 40px; } }
.logo-block { display: flex; flex-direction: column; gap: 4px; color: #fff; }
.logo-block:hover { opacity: .9; }
.logo-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--on-black-2); white-space: nowrap; }
@media (max-width: 700px) { .logo-tag { font-size: 9.5px; letter-spacing: .03em; } }

/* Session 31 (owner): the logo's main text the same size as the hero titles */
.mainnav .logo { font-size: clamp(40px, 4.4vw, 68px); line-height: .96; letter-spacing: -.045em; }
.mainnav .logo .sq { width: clamp(8px, .8vw, 12px); height: clamp(8px, .8vw, 12px); margin-left: 5px; }
.mainnav .logo-tag { font-size: 12px; }
@media (max-width: 700px) { .mainnav .logo { font-size: 40px; } .mainnav .logo-tag { font-size: 9.5px; } }
.mainnav { padding-top: 16px; padding-bottom: 16px; }
[id] { scroll-margin-top: 150px; }
@media (max-width: 700px) { .mainnav { padding-top: 12px; padding-bottom: 12px; } [id] { scroll-margin-top: 110px; } }
/* session 31 (owner): the tagline and every hero '//' line the same size */
.mainnav .logo-tag, .phero-kicker { font-size: 13px; }
@media (max-width: 700px) { .mainnav .logo-tag { font-size: 10.5px; } }
/* session 31 (owner): the tagline echoes the logo — 'digm' in green as in the logo, 'Cyber' in white */
.logo-tag .tg-g { color: var(--green); font-weight: 600; }
.logo-tag .tg-w { color: #fff; font-weight: 600; }
/* session 31 (owner): the video label beside the play button, on a dark pill so it reads over the photo */
.tile-badge { position: absolute; top: 26px; left: 80px; padding: 7px 12px; border-radius: 999px; background: rgba(10,10,10,.82); border: 1px solid rgba(255,255,255,.18); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) { .tile-badge { left: 76px; font-size: 11px; padding: 6px 10px; } }
/* session 31 (owner): the product pages' video as one card — cover with play button left, text and button right */
.vcard { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 0; background: var(--ink); color: #fff; border-radius: 12px; overflow: hidden; align-items: stretch; }
.vcard-media { position: relative; display: block; }
.vcard-media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vcard-media:hover { opacity: .92; }
.vcard-txt { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.vcard-txt p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-black); }
.vcard-txt .kicker { color: var(--green-kicker); }
@media (max-width: 1000px) { .vcard { grid-template-columns: minmax(0,1fr); } .vcard-txt { padding: 28px 24px; } }
/* session 31 (owner): on phones the two video tiles stack top and bottom as wide pictures */
@media (max-width: 700px) { .phero .vtiles { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; min-height: 0; max-width: none; flex-basis: 100%; } .phero .vtiles .tile { height: 230px; } .phero .vtiles .tile img.pos-signal { object-position: center 45%; } .phero .vtiles .tile img { object-position: center 55%; } }
/* session 31 (owner): the page menu — on phones every item visible on wrapped rows (no hidden sideways scroll);
   elsewhere it sticks just under the taller top bar (logo at the hero title size) */
[id] { scroll-margin-top: 130px; }
@media (max-width: 700px) { [id] { scroll-margin-top: 92px; } }
/* session 31 (owner): the page menu locks under the top bar on every size — flush with the bar's real height (16 px padding above
   and below the logo on wide screens, 12 px on phones); on phones compact wrapped rows, all items visible */
[id] { scroll-margin-top: 190px; }
@media (max-width: 700px) { [id] { scroll-margin-top: 175px; } }

/* Why Securidigm: TSA and the Coast Guard as two open-and-close panels (session 32 preview; <details>, no script) */
.reg { border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); overflow: hidden; }
.reg > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 32px; row-gap: 10px; align-items: center;
  padding: 36px 40px; background: var(--ink); color: #fff; }
.reg > summary::-webkit-details-marker { display: none; }
.reg > summary:hover .reg-btn { background: #fff; }
.reg-who { grid-column: 1; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--green-kicker); }
.reg-app { color: #fff; }
.reg-h { grid-column: 1; font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.reg-p { grid-column: 1; font-size: 16px; line-height: 1.55; color: var(--on-black); max-width: 760px; }
.reg-btn { grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: var(--green); color: var(--on-green); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.reg-btn::before { content: "Click to open"; }
.reg-btn::after { content: "↓"; }
.reg[open] .reg-btn::before { content: "Click to close"; }
.reg[open] .reg-btn::after { content: "↑"; }
.reg[open] > summary { border-bottom: 3px solid var(--green); }
.reg-body { padding: 40px; }
@media (max-width: 700px) {
  .reg > summary { grid-template-columns: minmax(0,1fr); padding: 28px 24px; }
  .reg-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .reg-h { font-size: 28px; }
  .reg-body { padding: 24px 16px; }
}