/* sidrasolutions.com, generated by site-prototype-generator (live mode, 23 Oct 2026). Edit the generator, not this file. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* paper-core.css: the shared paper system for sidraintersection.com and www.sidrasolutions.com.
   Taken rule for rule from the live sidraintersection.com (SI-Website site/index.html, commit 2cbaff7, 23 Oct 2026):
   tokens, base, silk field, section label, header, menus, search, theme toggle, phone menu, buttons, footer, ABN.
   sidraintersection.com is the reference. Change a rule there first, then here, and run check_core.py to confirm
   the two still match. Page templates do not belong in this file. */

:root {
  --sidra-green: #5a9a3e;      /* the mark itself: top bar, display green, solid panel */
  --accent: #42742e;           /* accent ROLE for small text, rules, focus — darker in light */
  --display-green: #5a9a3e;    /* large display words only */
  --sage: #a3b18a;
  --bg-page: #f2f1ea;
  --bg-header: rgba(242, 241, 234, 0.9);
  --bg-card: #faf9f4;
  --ink: #14070b;
  --text-body: #5c5a52;
  --text-muted: #6b6d5f;
  --hairline: #dcdacc;
  --hairline-soft: #e6e4d8;
  --tint: #e9efe2;
  --btn-bg: #477c32;
  --btn-bg-hover: #3d6b2b;
  --btn-fg: #ffffff;
  --solid: #42742e;
  --solid-ink: #ffffff;
  --solid-body: #f1f6ec;
  --solid-mute: #e3ecd8;
  --shadow: 0 16px 42px rgba(20, 7, 11, 0.16);
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --content-max: 1220px;
  --gx: 36px;
  --header-h: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #8fc271; --display-green: #8fc271; --sage: #7e8a6a;
    --bg-page: #15170f; --bg-header: rgba(21, 23, 15, 0.88); --bg-card: #1c1f15;
    --ink: #f1f3ec; --text-body: #a4ab9b; --text-muted: #929b83;
    --hairline: #2d3122; --hairline-soft: #23271a; --tint: rgba(143, 194, 113, 0.1);
    --btn-bg: #477c32; --btn-bg-hover: #528f3a;
    --solid: #42742e; --solid-body: #f1f6ec; --solid-mute: #e3ecd8;
    --shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent: #8fc271; --display-green: #8fc271; --sage: #7e8a6a;
  --bg-page: #15170f; --bg-header: rgba(21, 23, 15, 0.88); --bg-card: #1c1f15;
  --ink: #f1f3ec; --text-body: #a4ab9b; --text-muted: #929b83;
  --hairline: #2d3122; --hairline-soft: #23271a; --tint: rgba(143, 194, 113, 0.1);
  --btn-bg: #477c32; --btn-bg-hover: #528f3a;
  --solid: #42742e; --solid-body: #f1f6ec; --solid-mute: #e3ecd8;
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}

[hidden] { display: none !important; }   /* as sidraintersection.com's export adds it: a hidden panel stays hidden whatever its display */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg-page); scroll-padding-top: calc(var(--header-h) + 24px); }

body {
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  background: var(--bg-page); color: var(--text-body);
  min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.silk-on { background: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 8px 12px; background: var(--ink); color: var(--bg-page); font-weight: 600; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.silk { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.silk canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.top-bar { height: 3px; background: var(--sidra-green); }

.wrap { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--gx); width: 100%; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.12s; } .d3 { animation-delay: 0.2s; } .d4 { animation-delay: 0.28s; }

/* Section label — "02 / Software" plus a hairline that runs to the edge. */
.slabel { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.slabel b { color: var(--accent); font-weight: 500; }
.slabel b a:hover { color: var(--ink); }
.slabel .sl { color: var(--sage); }
.slabel::after { content: ''; flex: 1; height: 1px; background: var(--hairline-soft); }
.br { color: var(--sage); }
.ext { font-size: 0.8em; color: var(--sage); margin-left: 2px; }

/* ─── Header ─── */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; border-top: 3px solid var(--sidra-green); background: var(--bg-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.header-row { display: flex; align-items: center; gap: 26px; height: var(--header-h); }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.32em; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.wordmark .g { color: var(--accent); }
.wordmark sup { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-left: -0.15em; }

.primary-nav { display: flex; align-items: center; gap: 4px; }
.nav-group { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-body); cursor: pointer; transition: color 0.15s ease; }
.nav-trigger svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); }
.nav-trigger::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-trigger:hover::after, .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 120; width: 300px; padding: 12px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow); }
.nav-panel-wide { width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.nav-panel-wide .nav-featured { grid-column: 1 / -1; }
.nav-panel-wide > div:nth-of-type(2) { border-left: 1px solid var(--hairline-soft); padding-left: 24px; }
.nav-featured { display: flex; align-items: center; gap: 12px; padding: 14px 14px; margin-bottom: 8px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--tint); color: var(--ink); transition: border-color 0.15s ease; }
.nav-featured:hover { border-color: var(--accent); }
.nav-featured svg { width: 22px; height: 22px; flex: none; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-featured strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.nav-featured small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-body); }
.nav-featured .arr { margin-left: auto; color: var(--accent); font-size: 16px; }
.nav-caption { padding: 8px 10px 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); }
.nav-option { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); transition: background 0.15s ease; }
.nav-option:hover { background: var(--tint); }
.nav-option .n { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.nav-option .n.is-api { color: var(--accent); }
.nav-option .n.is-api .ext { font-size: 0.7em; }
.nav-option .d { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-body); text-wrap: pretty; }
.nav-option.compact { padding: 6px 10px; }
.nav-option.compact .n { font-size: 13px; font-weight: 600; }
.nav-option .when { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.nav-option.compact:has(.when) { padding: 7px 10px; }
.nav-divider { height: 1px; background: var(--hairline-soft); margin: 8px 10px; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-search { position: relative; display: flex; align-items: center; gap: 9px; width: 210px; min-width: 0; border: 1px solid var(--hairline); border-radius: 9px; padding: 7px 12px; background: transparent; transition: border-color 0.15s ease, background 0.15s ease; }
.header-search:hover, .header-search:focus-within { border-color: var(--accent); background: var(--tint); }
.header-search .search-ic { width: 13px; height: 13px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.header-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--ink); }
.header-search input::placeholder { color: var(--text-muted); font-weight: 400; }
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kbd { font-family: var(--mono); font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.typeahead { position: absolute; top: calc(100% + 9px); right: 0; z-index: 130; width: min(420px, calc(100vw - 32px)); background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); }
.ta-list { padding: 2px 0; }
.ta-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; }
.ta-item:hover, .ta-item.sel { background: var(--tint); }
.ta-name { font-size: 13.5px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.ta-desc { flex: 1; min-width: 0; font-size: 12px; color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-tag { flex-shrink: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ta-empty { padding: 14px 12px; font-size: 13px; color: var(--text-muted); }
.ta-hints { display: flex; gap: 14px; padding: 8px 12px 4px; border-top: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ta-hints b { font-weight: 500; color: var(--text-body); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; flex-shrink: 0; background: transparent; border: 1px solid var(--hairline); color: var(--text-muted); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

/* Mobile menu */
.mobile-menu { display: none; position: relative; }
.mobile-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; border-radius: 8px; border: 1px solid var(--hairline); }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu > summary .plus { font-family: var(--mono); color: var(--accent); }
.mobile-menu[open] > summary .plus { display: inline-block; transform: rotate(45deg); }
.mobile-panel { position: fixed; left: 16px; right: 16px; top: calc(var(--header-h) + 3px + env(safe-area-inset-top, 0px) + 10px); z-index: 130; max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; padding: 10px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow); }
.mobile-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; border-top: 1px solid var(--hairline-soft); }
.mobile-group summary::-webkit-details-marker { display: none; }
.mobile-group summary::after { content: '+'; font-family: var(--mono); color: var(--accent); }
.mobile-group[open] summary::after { content: '−'; }
.mobile-group:first-of-type summary { border-top: 0; }
.mobile-links { padding: 0 0 8px; }
.mobile-links .nav-featured { margin: 4px 0 8px; }
.nav-link { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-body); text-decoration: none; transition: color 0.15s ease; }
.nav-link:hover, .nav-link.on { color: var(--ink); }
.nav-link::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-link:hover::after, .nav-link.on::after { transform: scaleX(1); }
.mobile-top-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; border-top: 1px solid var(--hairline-soft); }
.mobile-top-link span { font-family: var(--mono); color: var(--accent); }
/* Contact stands apart: speech-bubble icon (option A1, pricing page review, 30 Sep 2026) */
.nav-link .c-ic, .mobile-top-link .c-ic { width: 14px; height: 14px; flex: none; margin-right: 7px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.mobile-top-link { justify-content: flex-start; }
.mobile-top-link > span { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .nav-link, .nav-link::after { transition: none; } }
.mobile-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 10px 6px; border-top: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

/* Buttons — 10px radius, never pill. */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 20px 11px 22px; border-radius: 10px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover svg { transform: translateX(3px); }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,0.55); color: var(--solid-ink); }
.btn.ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.bracket-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.15s ease; white-space: nowrap; }
.bracket-cta .br { display: inline-block; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.bracket-cta:hover { color: var(--accent); }
.bracket-cta:hover .br:first-child { transform: translateX(-3px); }
.bracket-cta:hover .br:last-of-type { transform: translateX(3px); }

/* ─── Footer ─── */
.site-footer { margin-top: 96px; border-top: 1px solid var(--hairline); padding: 34px 0 48px; }
.footer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-bottom: 26px; margin-bottom: 28px; border-bottom: 1px solid var(--hairline-soft); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; }
.site-footer .wm { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.site-footer .wm .g { color: var(--accent); }
.mono-line { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); line-height: 2; }
.fcol h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--hairline-soft); }
.fcol a { display: block; padding: 7px 0; font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--hairline-soft); transition: color 0.15s ease, padding-left 0.2s ease; }
.fcol a:hover { color: var(--accent); padding-left: 6px; }
.footer-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.footer-bottom a:hover { color: var(--accent); }

/* Toast — confirms the footer ABN copy. */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 300; padding: 9px 14px; background: var(--ink); color: var(--bg-page); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--display-green); font-weight: 500; }

/* ABN in the footer, with a copy button */
.abn { white-space: nowrap; }
.abn b { font-weight: 500; color: var(--text-body); letter-spacing: 0.06em; }
.copy-abn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 1px solid var(--hairline); border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; vertical-align: middle; transition: border-color 0.15s ease, color 0.15s ease; }
.copy-abn:hover { border-color: var(--accent); color: var(--accent); }
.copy-abn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-abn.done { border-color: var(--accent); color: var(--accent); }
@media (min-width: 901px) and (max-width: 1023px) {
  .nav-trigger, .nav-link { padding: 0 7px; }
  .nav-link::after, .nav-trigger::after { left: 7px; right: 7px; }
  .header-actions { gap: 10px; }
  .header-search { width: 150px; }
  .header-search .kbd { display: none; }
}

/* ─── Responsive: header and footer only (from the same responsive block on sidraintersection.com) ─── */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1023px) {
  :root { --gx: 24px; }
  .primary-nav { gap: 0; }
  .header-search { width: 190px; }
}
@media (max-width: 900px) {
  .primary-nav { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .header-actions { margin-left: 0; }
}
@media (max-width: 767px) {
  :root { --gx: 16px; }
  .header-row { gap: 10px; }
  .header-search { width: 190px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
  .header-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: 40px 40px; height: auto; padding-block: 6px; align-items: center; gap: 4px 10px; }
  :root { --header-h: 92px; }
  .wordmark { grid-column: 1; grid-row: 1; }
  .mobile-menu { grid-column: 2; grid-row: 1; margin-left: 0; }
  .header-actions { display: contents; }
  .theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
  .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .typeahead { left: 0; right: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  .header-search, .nav-trigger, .nav-trigger::after, .theme-toggle, .bracket-cta, .bracket-cta .br, .btn, .btn svg, .fcol a, .toast { transition: none; }
}

/* Release fixes, 19 October 2026 (pre-release audit). */
:root { --label: #646e52; --field-border: #85897a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --label: #7e8a6a; --field-border: #6b735c; --btn-bg-hover: #3d6b2b; } }
:root[data-theme="dark"] { --label: #7e8a6a; --field-border: #6b735c; --btn-bg-hover: #3d6b2b; }
body .nav-caption, body .fcol h4 { color: var(--label); }
@media (min-width: 901px) and (max-width: 1099px) {
  .nav-trigger, .nav-link { padding: 0 7px; }
  .nav-link::after, .nav-trigger::after { left: 7px; right: 7px; }
  .header-row { gap: 16px; }
  .header-actions { gap: 10px; }
  .header-search { width: 150px; }
  .header-search .kbd { display: none; }
}
@media (max-width: 360px) {
  .header-row { column-gap: 6px; }
  .wordmark { font-size: 15.5px; }
  .mobile-menu > summary { padding: 0 8px; }
}
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --accent: #42742e; --display-green: #5a9a3e; --sage: #a3b18a; --label: #646e52; --bg-page: #ffffff; --bg-header: #ffffff; --bg-card: #ffffff; --ink: #14070b; --text-body: #5c5a52; --text-muted: #6b6d5f; --hairline: #dcdacc; --hairline-soft: #e6e4d8; --tint: #ffffff; --solid: #42742e; color-scheme: light; }
}

/* Second release pass, 19 October 2026 (re-test). */
:root { --accent-text: #3d6b2b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-text: var(--accent); } }
:root[data-theme="dark"] { --accent-text: var(--accent); }
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --accent-text: #3d6b2b; }
}

/* Version 1, refined (21 October 2026): light fixes from Nathan's review. Selectors start with body so they
   win over the page CSS without depending on order. */
/* Menus (N7): slightly larger text, course dates in plain type. */
body .nav-panel-wide { width: 600px; }
body .nav-featured strong { font-size: 14.5px; }
body .nav-featured small { font-size: 12.5px; line-height: 1.4; }
body .nav-caption { font-size: 10px; }
body .nav-option .n { font-size: 14px; }
body .nav-option .d { margin-top: 2px; font-size: 12.5px; line-height: 1.4; }
body .nav-option.compact .n { font-size: 13.5px; }
body .nav-option .when { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
/* Links (N2): no square brackets. Beside a button, an outlined button; elsewhere, a green text link. */
body .bracket-cta { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--accent); }
body .bracket-cta .br { display: none; }
body .bracket-cta:not(:has(.ext))::after { content: '\2192'; display: inline-block; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
body .bracket-cta:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
body .bracket-cta:hover::after { transform: translateX(3px); }
body .btn + .bracket-cta { min-height: 44px; box-sizing: border-box; padding: 11px 20px; border: 1.5px solid var(--field-border); border-radius: 10px; background: var(--bg-card); color: var(--ink); }
body .btn + .bracket-cta::after { content: none; }
body .btn + .bracket-cta:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
body .register .btn + .bracket-cta, body .btn.ghost + .bracket-cta { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
body .register .btn + .bracket-cta:hover, body .btn.ghost + .bracket-cta:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
body .btn.line { border: 1.5px solid var(--field-border); }
body .btn.line:hover { border-color: var(--accent); }

/* UX review fixes (21 October 2026): Astra's usability review, reconciled in
   Audits/si-ux-review-reconciliation-20261021.md. */
/* Software menu (U2): the 1PC download route, under the Downloads card. */
body .nav-sub { grid-column: 1 / -1; display: block; margin: -2px 0 8px; padding: 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--text-body); }
body .nav-sub b { color: var(--ink); font-weight: 600; }
body .nav-sub .ext { color: var(--accent); }
body .nav-sub:hover, body .nav-sub:hover b { color: var(--accent); }
body .nav-sub:hover b { text-decoration: underline; text-underline-offset: 3px; }
body .mobile-links .nav-sub { margin: -2px 0 10px; padding: 0 4px; }
/* Search (U1): the empty state links to the site map and Contact. */
body .ta-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Buttons (22 October 2026, second version): Flow with an angled wipe in the heroes, Pass-through everywhere else.
   Canvas "Hero buttons", board "Flow with a swipe", option 5. 10px corners throughout, never a pill. Selectors start
   with body so they win over the page CSS. */
/* B. Pass-through: the right arrow leaves through its own box and comes back in from the left. */
body .btn > svg { overflow: hidden; }
body .btn:is(:hover, :focus-visible) > svg:has(> path[d="M5 12h14M12 5l7 7-7 7"]) { transform: none; }
body .btn:is(:hover, :focus-visible) > svg > path[d="M5 12h14M12 5l7 7-7 7"] { animation: si-arrow-pass 0.5s both; }
@keyframes si-arrow-pass {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  45% { transform: translateX(24px); }
  45.01% { transform: translateX(-24px); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  100% { transform: translateX(0); }
}
/* Outlined buttons pick up the light green tint as well as the green edge. Text links stay as they are. */
body .btn + .bracket-cta:is(:hover, :focus-visible), body .btn.line:is(:hover, :focus-visible) { background: var(--tint); }
body :is(.wo-act, .act) .btn + .bracket-cta:is(:hover, :focus-visible) { background: none; }
/* A. Flow with an angled wipe, hero buttons only. A slanted band sweeps in from the left and, when the pointer
   leaves, carries on out to the right. Two copies of the band: --wipe-in brings the first in; --wipe-out moves the
   second under it once the sweep is done, and takes it out to the right on leave. --flow-p is the plain side's
   padding, --flow-a the arrow side's; the two swap on hover, so the label moves across and the width holds. */
@property --wipe-in { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --wipe-out { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
body :is(.hero, .page-hero, .nf) :is(.btn, .btn + .bracket-cta) {
  --flow-p: 22px; --flow-a: 44px; --flow-fill: var(--ink); --flow-ink: var(--bg-page); --flow-bg: var(--btn-bg);
  --wipe-in: 100%; --wipe-out: 0%;
  position: relative; overflow: hidden; background-image: linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%), linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%); background-size: 400% 100%, 400% 100%; background-repeat: no-repeat, no-repeat; background-position: var(--wipe-in) 0, var(--wipe-out) 0;
  transition: --wipe-in 0s, --wipe-out 0.6s cubic-bezier(0.7, 0, 0.2, 1), color 0.15s ease 0.2s, border-color 0.15s ease 0.2s, padding 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.15s ease;
}
body :is(.hero, .page-hero, .nf) .btn + .bracket-cta { --flow-p: 20px; --flow-fill: var(--btn-bg); --flow-ink: #fff; --flow-bg: var(--bg-card); }
body :is(.hero, .page-hero, .nf) .btn.ghost, body :is(.hero, .page-hero, .nf) :is(.register .btn, .btn.ghost) + .bracket-cta { --flow-fill: #fff; --flow-ink: var(--solid); --flow-bg: transparent; }
body :is(.hero, .page-hero, .nf) .register .btn.ghost { --flow-p: 24px; --flow-a: 49px; }
body :is(.hero, .page-hero, .nf) .register .btn.go { --flow-p: 34px; --flow-a: 57px; --flow-fill: #24421a; --flow-ink: #fff; --flow-bg: #fff; background-image: linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%), linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%); background-size: 400% 100%, 400% 100%; background-repeat: no-repeat, no-repeat; background-position: var(--wipe-in) 0, var(--wipe-out) 0; }
body :is(.hero, .page-hero, .nf) :is(.btn, .btn + .bracket-cta):is(:hover, :focus-visible), body :is(.hero, .page-hero, .nf) .register .btn.go:is(:hover, :focus-visible) {
  --wipe-in: 50%; --wipe-out: 50%; background-color: var(--flow-bg); background-image: linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%), linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%); background-size: 400% 100%, 400% 100%; background-repeat: no-repeat, no-repeat; background-position: var(--wipe-in) 0, var(--wipe-out) 0;
  color: var(--flow-ink); border-color: var(--flow-fill); text-decoration: none;
  transition: --wipe-in 0.6s cubic-bezier(0.7, 0, 0.2, 1), --wipe-out 0s 0.6s, color 0.15s ease 0.25s, border-color 0.15s ease 0.25s, padding 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.15s ease;
}
/* Arrows: the button's own arrow (on outlined buttons, a drawn one) leaves right; a drawn one arrives left. */
body :is(.hero, .page-hero, .nf) :is(.btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]), .btn + .bracket-cta:not([href^="#"]):not(:has(.ext))) { padding-left: var(--flow-p); padding-right: var(--flow-a); }
body :is(.hero, .page-hero, .nf) :is(.btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]), .btn + .bracket-cta:not([href^="#"]):not(:has(.ext))):is(:hover, :focus-visible) { padding-left: var(--flow-a); padding-right: var(--flow-p); }
body :is(.hero, .page-hero, .nf) .btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]) > svg { position: absolute; top: 50%; right: calc(var(--flow-a) - 28px); margin-top: -7.5px; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
body :is(.hero, .page-hero, .nf) .btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]):is(:hover, :focus-visible) > svg { transform: translateX(48px); }
body :is(.hero, .page-hero, .nf) .btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]):is(:hover, :focus-visible) > svg > path[d="M5 12h14M12 5l7 7-7 7"] { animation: none; }
body :is(.hero, .page-hero, .nf) :is(.btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]), .btn + .bracket-cta:not([href^="#"]):not(:has(.ext)))::before, body :is(.hero, .page-hero, .nf) .btn + .bracket-cta:not([href^="#"]):not(:has(.ext))::after {
  content: ''; display: block; position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  background-color: currentColor; -webkit-mask: url('/assets/arrow-right.svg') center / 15px 15px no-repeat; mask: url('/assets/arrow-right.svg') center / 15px 15px no-repeat;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body :is(.hero, .page-hero, .nf) :is(.btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]), .btn + .bracket-cta:not([href^="#"]):not(:has(.ext)))::before { left: calc(var(--flow-a) - 28px); transform: translateX(-48px); }
body :is(.hero, .page-hero, .nf) .btn + .bracket-cta:not([href^="#"]):not(:has(.ext))::after { right: calc(var(--flow-a) - 28px); transform: none; }
body :is(.hero, .page-hero, .nf) :is(.btn:not(.session .btn):has(> svg > path[d="M5 12h14M12 5l7 7-7 7"]), .btn + .bracket-cta:not([href^="#"]):not(:has(.ext))):is(:hover, :focus-visible)::before { transform: translateX(0); }
body :is(.hero, .page-hero, .nf) .btn + .bracket-cta:not([href^="#"]):not(:has(.ext)):is(:hover, :focus-visible)::after { transform: translateX(48px); }
/* Fill only: the down arrow nudges down, as a jump within the page. The program heroes' full-width Register
   button keeps its arrow beside the label, so it takes the wipe and the pass-through arrow. */
body :is(.hero, .page-hero, .nf) .btn:is(:hover, :focus-visible) > svg:has(> path[d="M12 5v14M5 12l7 7 7-7"]) { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
  body .btn, body .btn::before, body .btn > svg, body .btn + .bracket-cta, body .btn + .bracket-cta::before, body .btn + .bracket-cta::after { transition: none !important; }
  body .btn > svg > path { animation: none !important; }
}

/* sidrasolutions.com: what is particular to the corporate site. The shared look (tokens, header, menus, search box,
   theme toggle, buttons, footer) is paper-core.css, taken from sidraintersection.com, and is loaded first. */

/* Tokens this site adds */
:root { --mark: #dfe9cf; --note-bg: #fbf3d9; --note-ink: #6b5410; --note-line: #eadbaa; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mark: rgba(143,194,113,0.22); --note-bg: #2a2614; --note-ink: #e3cf8f; --note-line: #4a4122; } }
:root[data-theme="dark"] { --mark: rgba(143,194,113,0.22); --note-bg: #2a2614; --note-ink: #e3cf8f; --note-line: #4a4122; }
button, input, select { font: inherit; color: inherit; }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Header extras: search results and the sign-in menu. The sign-in button takes the round theme-toggle style. */
.ta { position: absolute; right: 0; top: calc(100% + 8px); width: 460px; z-index: 90; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; max-height: 70vh; overflow: auto; }
.ta[hidden] { display: none; }
.ta-row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 9px 8px; border-radius: 8px; }
.ta-row.on, .ta-row:hover { background: var(--tint); }
.ta-y { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding-top: 2px; }
.ta-t { color: var(--ink); font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.ta-m { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ta-foot { padding: 8px 10px 4px; border-top: 1px solid var(--hairline-soft); margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.acct { position: relative; }
.acct-btn svg { width: 14px; height: 14px; }
.acct-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--tint); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 80; }
.acct-menu[hidden] { display: none; }
.acct-h { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 10px 8px; border-bottom: 1px solid var(--hairline-soft); margin-bottom: 4px; }
.acct-menu a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.acct-menu a span { color: var(--sage); font-size: 11px; }
.acct-menu a:hover, .acct-menu a:focus { background: var(--tint); outline: none; }
.header-search { position: relative; }
.header-search input { line-height: normal; }   /* the input keeps its own line height, as on sidraintersection.com */
.nav-option.here .n { color: var(--accent); }
.nav-trigger.on { color: var(--ink); }
.nav-trigger.on::after { transform: scaleX(1); }
@media (max-width: 600px) {
  .header-row { grid-template-columns: 1fr auto auto auto; }
  .theme-toggle#themeBtn { grid-column: 3; grid-row: 1; }
  .acct { grid-column: 4; grid-row: 1; justify-self: end; }
  .header-search .kbd { display: none; }
  .ta { position: fixed; left: 16px; right: 16px; width: auto; top: calc(var(--header-h) + 12px); }
}

/* ═════════════ Page templates (new for sidrasolutions.com) ═════════════ */
.crumbs { padding-top: 56px; }
.crumbs > span { display: inline-flex; flex-wrap: wrap; gap: 0 6px; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs b a { color: inherit; }
h1 { color: var(--ink); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
h2 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.btn { cursor: pointer; white-space: nowrap; }
/* On paper, an outlined button is styled like the one beside a button on sidraintersection.com (.btn + .bracket-cta). */
.btn.ghost { padding: 11px 20px; border: 1.5px solid var(--field-border); background: var(--bg-card); color: var(--ink); }
.btn.ghost:is(:hover, :focus-visible) { border-color: var(--accent); background: var(--tint); color: var(--accent); }
body :is(.hero, .page-hero, .nf) .btn.ghost { --flow-p: 20px; --flow-fill: var(--btn-bg); --flow-ink: #fff; --flow-bg: var(--bg-card); }
.btns { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.band .slabel { margin-bottom: 26px; }
.slabel a { color: var(--accent); }
.slabel a:hover { color: var(--ink); }
.band { padding-top: 84px; scroll-margin-top: 80px; }
@media (max-width: 767px) { .band { padding-top: 60px; } }
.bandh { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.bandrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.textlink { font-weight: 700; font-size: 13.5px; color: var(--accent); }
.textlink:hover { color: var(--ink); }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--hairline); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--text-muted); }
.meta .dot { color: var(--sage); margin-inline: 6px; }

/* Page head */
.phead { padding-block: 30px 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; border-bottom: 1px solid var(--hairline); }
.phead.with-byline { padding-bottom: 0; border-bottom: 0; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
.phead h1 { font-size: clamp(38px, 4.8vw, 62px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; max-width: 900px; }
.phead h1.long { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.035em; line-height: 1.08; }
.phead .lede { font-family: var(--sans); font-size: 15px; line-height: 1.65; margin-top: 20px; max-width: 760px; color: var(--text-body); }
/* Fact row under an article heading (sidraintersection.com .byline) */
.byline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 34px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.byline > div { padding: 16px 18px 16px 0; border-right: 1px solid var(--hairline-soft); margin-right: 18px; }
.byline > div:last-child { border-right: 0; margin-right: 0; }
.byline .k { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.byline .v { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.35; }
.byline .v small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--text-body); }
@media (max-width: 900px) { .byline { grid-template-columns: 1fr 1fr; } .byline > div:nth-child(2) { border-right: 0; margin-right: 0; } .byline > div:nth-child(n+3) { border-top: 1px solid var(--hairline-soft); } .byline > div:nth-child(3):last-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .byline > div { padding: 12px 12px 12px 0; margin-right: 12px; } }
.phead .facts { display: flex; gap: 28px; }
.phead .facts div { text-align: right; }
.phead .facts .v { font-size: 26px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.phead .facts .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.pmeta { margin-top: 14px; }
@media (max-width: 760px) { .phead { grid-template-columns: 1fr; } .phead .facts div { text-align: left; } }

/* Numbered index rows (Hub homepage pattern) */
.ix { list-style: none; border-top: 1px solid var(--hairline); }
.ix > li > a, .ix > li > .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 18px; gap: 4px 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--hairline-soft); }
.ix .n { font-family: var(--mono); font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.ix .t { color: var(--ink); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; }
.ix .d { display: block; font-size: 13px; font-weight: 400; color: var(--text-body); margin-top: 3px; letter-spacing: 0; line-height: 1.5; }
.ix .m { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; text-align: right; }
.ix .ar { color: var(--accent); transition: transform .15s; }
.ix a:hover .t { color: var(--accent); }
.ix a:hover .ar { transform: translateX(3px); }
.ix.plain > li > a { grid-template-columns: minmax(0, 1fr) auto 18px; }
.ix.sub > li > a { padding: 11px 0; }
.ix.sub .t { font-size: 14.5px; font-weight: 600; }
@media (max-width: 640px) {
  .ix > li > a { grid-template-columns: 34px minmax(0, 1fr) 16px; }
  .ix.plain > li > a { grid-template-columns: minmax(0, 1fr) 16px; }
  .ix .m { grid-column: 2; grid-row: 2; text-align: left; }
  .ix.plain .m { grid-column: 1; }
  .ix .ar { grid-column: -2; grid-row: 1; }
}
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; margin-top: 40px; }
@media (max-width: 860px) { .groups { grid-template-columns: 1fr; } }

/* Long read */
.read { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 40px 72px; align-items: start; padding-top: 40px; }
.read.wide-off { grid-template-columns: minmax(0, 720px); }
@media (min-width: 901px) { .read > .side { order: -1; } }   /* on phones the page comes first; the contents sit in the On this page box */
@media (max-width: 1023px) { .read { grid-template-columns: 180px minmax(0, 1fr); gap: 32px 40px; } }
@media (max-width: 900px) { .read, .read.wide-off { grid-template-columns: 1fr; gap: 28px; } }
.side { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; display: flex; flex-direction: column; gap: 28px; max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; scrollbar-width: thin; }
@media (max-width: 900px) { .side { position: static; max-height: none; } .side .toc { display: none; } }
.side h4 { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.side ol, .side ul { list-style: none; }
.side li { border-bottom: 1px solid var(--hairline-soft); }
.side li a { display: block; padding: 10px 0; font-size: 13px; line-height: 1.35; color: var(--text-body); transition: color 0.15s ease, padding-left 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.side li a:hover { color: var(--accent); }
.side li a.here, .side .toc li a.on { color: var(--ink); font-weight: 600; padding-left: 6px; }
.mtoc { display: none; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-card); margin-bottom: 26px; }
.mtoc summary { cursor: pointer; padding: 12px 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); list-style: none; display: flex; justify-content: space-between; }
.mtoc summary::after { content: '+'; color: var(--accent); }
.mtoc[open] summary::after { content: '\2212'; }
.mtoc ol { list-style: none; padding: 0 14px 12px; }
.mtoc li a { display: block; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--hairline-soft); }
@media (max-width: 900px) { .mtoc { display: block; } }

.prose { max-width: 720px; min-width: 0; }
.prose > * + * { margin-top: 16px; }
/* Body text in Plus Jakarta Sans, as on sidraintersection.com (Director, 23 Oct 2026, replacing the 23 Sep 2026 choice of
   Source Sans 3). Sizes follow the sidraintersection.com article (.art-body). Source Serif 4 stays for publication abstracts. */
.prose p, .prose li, .prose dd { font-family: var(--sans); font-size: 17px; line-height: 1.75; color: var(--text-body); }
.prose.legal p, .prose.legal li { font-size: 16px; line-height: 1.7; }
@media (max-width: 600px) { .prose p, .prose li, .prose dd { font-size: 16px; } }
.prose h2 { font-size: clamp(22px, 2.1vw, 26px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--hairline); }
.prose > h2:first-child, .prose > .rvbox + h2, .prose > .mtoc + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-top: 26px; }
.prose h4 { font-size: 13px; margin-top: 22px; font-family: var(--mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--sage); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: break-word; }   /* long addresses in the legal texts wrap on phones */
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin-block: 28px; }
.prose code { font-family: var(--mono); font-size: .86em; }
.prose pre { overflow-x: auto; max-width: 100%; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-card); font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink); }   /* code scrolls inside its box on phones */
.prose pre code { font-size: inherit; }
.prose .tbl { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--hairline-soft); font-family: var(--sans); font-size: 13.5px; color: var(--text-body); }
.prose th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.prose td p { font-family: var(--sans); font-size: 13.5px; color: var(--text-body); }
.prose blockquote { border-left: 2px solid var(--sage); padding-left: 18px; }
.pull { margin-block: 28px; padding: 22px 24px; border-radius: 14px; background: var(--tint); }
.pull p { font-size: 17px; line-height: 1.65; color: var(--ink); }
.pull footer { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.arrows { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--sans) !important; }
.prose .arrows a { font-family: var(--sans); font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--accent); }
.prose .arrows a:hover { color: var(--ink); }
.acc { border-top: 1px solid var(--hairline); }
.acc details { border-bottom: 1px solid var(--hairline-soft); }
.acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 700; font-size: 15px; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-family: var(--mono); color: var(--accent); }
.acc details[open] summary::after { content: '\2212'; }
.acc .acc-b { padding-bottom: 18px; }
.acc .acc-b > * + * { margin-top: 12px; }
.routes { list-style: none; border-top: 1px solid var(--hairline); padding: 0 !important; }
.routes li { margin: 0 !important; }
.prose .routes a { display: grid; grid-template-columns: minmax(0,1fr) 18px; gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); text-decoration: none; color: var(--ink); font-family: var(--sans); }
.routes .t { font-weight: 700; font-size: 15px; }
.routes .d { grid-column: 1; font-size: 13px; color: var(--text-body); }
.routes .ar { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); }
.prose .routes a:hover .t { color: var(--accent); }
.vids { list-style: none; padding: 0 !important; border-top: 1px solid var(--hairline-soft); }
.vids li { margin: 0 !important; }
.prose .vids a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); text-decoration: none; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.prose .vids a span { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); font-weight: 400; white-space: nowrap; }
.prose .vids a:hover { color: var(--accent); }
.kvlist { display: grid; grid-template-columns: 170px minmax(0,1fr); border-top: 1px solid var(--hairline); }
.kvlist > dt, .kvlist > dd { padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); }
.kvlist > dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); padding-top: 17px; }
.kvlist > dd > * + * { margin-top: 8px; }
@media (max-width: 600px) { .kvlist { grid-template-columns: 1fr; } .kvlist > dt { border-bottom: 0; padding-bottom: 0; } }

/* Review notes: what needs checking before this page ships */
.rvbox { border: 1px solid var(--note-line); background: var(--note-bg); color: var(--note-ink); border-radius: 12px; margin-bottom: 30px; }
.rvbox summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.rvbox summary::-webkit-details-marker { display: none; }
.rvbox summary b { font-weight: 500; }
.rvbox summary::after { content: '+'; margin-left: auto; }
.rvbox[open] summary::after { content: '\2212'; }
.rvbox ol { padding: 0 16px 14px 38px; }
.rvbox li { font-family: var(--sans) !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--note-ink) !important; margin-top: 6px; }
.rvbox li::marker { color: var(--note-ink); font-family: var(--mono); font-size: 11px; }
.rv { background: var(--note-bg); box-shadow: inset 0 -1.5px 0 var(--note-line); border-radius: 2px; padding: 0 2px; }
.rv sup { font-family: var(--mono); font-size: 9.5px; color: var(--note-ink); margin-left: 2px; }

/* Form stand-in */
.formph { border: 1px dashed var(--sage); border-radius: 14px; background: var(--bg-card); padding: 26px; margin-block: 24px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 20px; align-items: center; }
.formph .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.formph .t { font-family: var(--sans) !important; font-size: 17px !important; font-weight: 700; color: var(--ink) !important; }
.formph .d { grid-column: 1; font-family: var(--sans) !important; font-size: 13px !important; color: var(--text-body) !important; }
.formph .fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.formph .fields span { height: 38px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--bg-page); }
.formph .fields span.w { grid-column: 1 / -1; height: 76px; }
@media (max-width: 560px) { .formph { grid-template-columns: 1fr; } .formph .fields { grid-template-columns: 1fr; } }

/* Moved notice (stands in for a 301 redirect) */
.moved { padding-block: 70px 20px; max-width: 760px; }
.moved .code { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.moved h1 { font-size: clamp(32px, 4.4vw, 48px); margin-top: 12px; }
.moved .from { margin-top: 26px; display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 10px 16px; border-top: 1px solid var(--hairline); padding-top: 18px; }
.moved .from dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.moved .from dd { color: var(--ink); font-size: 14px; word-break: break-word; }
.moved .from code { font-family: var(--mono); font-size: 12.5px; }
.moved p.why { margin-top: 18px; font-size: 15px; max-width: 60ch; }

/* News */
.filters-row { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; margin: 26px 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 11px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--text-body); background: transparent; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); color: var(--ink); }
.chip .c { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); font-weight: 400; }
.find { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); border-radius: 9px; padding: 6px 12px; min-width: 240px; background: var(--bg-card); }
.find:focus-within { border-color: var(--accent); }
.find input { border: 0; outline: none; background: transparent; font-size: 13px; width: 100%; color: var(--ink); }
.find svg { width: 13px; height: 13px; stroke: var(--accent); fill: none; stroke-width: 2; flex: none; }
.ny { margin-top: 30px; }
.ny h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--accent); padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.nlist { list-style: none; }
.nlist a { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--hairline-soft); }
.nlist .dt { font-family: var(--mono); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nlist .t { color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.35; }
.nlist a:hover .t { color: var(--accent); }
@media (max-width: 600px) { .nlist a { grid-template-columns: 1fr auto; } .nlist .dt { grid-column: 1 / -1; } }
.none { padding: 30px 0; font-size: 14px; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; border-top: 1px solid var(--hairline); padding-top: 18px; }
.pn a { display: block; }
.pn a:hover b { color: var(--accent); }
.pn span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pn b { display: block; margin-top: 4px; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.pn .nx { text-align: right; }


/* Home */
.hero-sec { padding-top: 56px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px 56px; align-items: end; margin-top: 34px; padding-bottom: 6px; }
.hero h1 { font-size: clamp(42px, 5vw, 66px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--ink); max-width: 760px; text-wrap: balance; }
.hero h1 .g { color: var(--display-green); }
.hero .lede { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--text-body); max-width: 520px; margin-top: 20px; }
@media (max-width: 1100px) { .hero { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 767px) { .hero-sec { padding-top: 40px; } .hero { margin-top: 24px; } .hero h1 { font-size: clamp(38px, 11vw, 48px); } }

/* Now panel and Start here rows (23 October 2026). The rules from here to the next comment are copied unchanged from
   sidraintersection.com (SI-Website site/index.html, commit 2cbaff7), except that the .g-row selectors are left out. */
/* The three-topic panel — part of the hero, not a second hero. */
.now { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px 0 18px; }
.now-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.now-head b { color: var(--accent); font-weight: 500; }
.now-ctl { display: flex; gap: 4px; }
.now-ctl button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, color 0.15s ease; }
.now-ctl button:hover { border-color: var(--accent); color: var(--accent); }
.now-ctl svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.now-ctl .ic-play { display: none; }
.now-ctl button[aria-pressed="true"] .ic-pause { display: none; }
.now-ctl button[aria-pressed="true"] .ic-play { display: block; }
.now-stage { display: grid; margin-top: 18px; }
.now-item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s; }
.now-item.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.now-kicker { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.now-msg { margin-top: 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.now-item .bracket-cta { margin-top: 14px; }
.now-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.now-tab { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.now-tab .bar { position: relative; display: block; height: 2px; background: var(--hairline); border-radius: 1px; overflow: hidden; }
.now-tab .bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.now-tab[aria-selected="true"] { color: var(--ink); }
.now-tab[aria-selected="true"] .bar i { transform: scaleX(1); }
.now.is-playing .now-tab[aria-selected="true"] .bar i { animation: fill var(--now-ms, 7000ms) linear forwards; }
.now.is-playing:hover .now-tab[aria-selected="true"] .bar i, .now.is-playing:focus-within .now-tab[aria-selected="true"] .bar i { animation-play-state: paused; }
.now-tab:hover { color: var(--accent); }
.now-tab .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Where next — numbered destination rows. */
.deck { margin-top: 52px; }
.deck-count { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 12px; }
.deck-count b { color: var(--accent); font-weight: 500; }
.deck-row { position: relative; display: grid; grid-template-columns: 56px 1.05fr 1.5fr auto; align-items: center; gap: 28px; padding: 22px 4px; border-top: 1px solid var(--hairline); color: inherit; transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.deck-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.deck-row::before { content: ''; position: absolute; left: 0; top: -1px; height: calc(100% + 2px); width: 0; background: var(--accent); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.deck-row:hover { padding-left: 22px; }
.deck-row:hover::before { width: 3px; }
.deck-row.featured { background: var(--tint); padding-left: 22px; }
.deck-row.featured::before { width: 3px; }
.deck-num { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.deck-name { font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; transition: color 0.15s ease; }
.deck-name .ext { font-size: 0.55em; vertical-align: 0.5em; }
.deck-row:hover .deck-name { color: var(--accent); }
.deck-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deck-kind { font-size: 12.5px; font-weight: 600; color: var(--text-body); }
.deck-brackets { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.arrow { display: inline-flex; width: 36px; height: 36px; border: 1px solid var(--hairline); border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.arrow svg { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease; }
.deck-row.featured .arrow { border-color: var(--accent); }
.deck-row.featured .arrow svg { stroke: var(--accent); }
.deck-row:hover .arrow { border-color: var(--accent); background: var(--accent); transform: rotate(-45deg); }
.deck-row:hover .arrow svg { stroke: #fff; }
/* sidrasolutions.com: the tabs share the row, so when a dated item retires (static/home.js) three tabs fill it. */
.now-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* The sidraintersection.com breakpoints for the panel and the rows. */
@media (max-width: 900px) { .now { max-width: 560px; } .deck-row { grid-template-columns: 40px 1fr auto; gap: 16px; } .deck-meta { display: none; } }
@media (max-width: 767px) { .deck { margin-top: 40px; } }
@media (max-width: 600px) { .deck-name { font-size: 18px; } .deck-row { padding: 18px 4px; } .now-msg { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .now.is-playing .now-tab[aria-selected="true"] .bar i { animation: none; transform: scaleX(1); } .now-item { transition: none; } .deck-row, .deck-row::before, .arrow, .deck-name { transition: none; } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.trio > a { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--hairline); }
.trio .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.trio h3 { font-size: 20px; letter-spacing: -0.02em; }
.trio p { font-size: 14px; }
.trio .go { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--accent); }
.trio > a:hover h3 { color: var(--accent); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }
.latest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--hairline); }
.lcard { padding: 16px 0 18px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--hairline-soft); }
.lcard h3 { font-size: 14.5px; line-height: 1.35; }
.lcard:hover h3 { color: var(--accent); }
.latest.abs .lcard p { font-family: var(--serif); font-size: 13.5px; }
.lcard p { font-family: var(--sans); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 980px) { .latest { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .latest { grid-template-columns: 1fr; } }
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
@media (max-width: 900px) { .split2 { grid-template-columns: 1fr; gap: 48px; } }

/* Site map */
.smap { columns: 3 260px; column-gap: 40px; margin-top: 30px; }
.smap section { break-inside: avoid; margin-bottom: 28px; }
.smap h2 { font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.smap ul { list-style: none; }
.smap li a { display: block; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); }
.smap li a:hover { color: var(--accent); }
.smap li.d2 a { padding-left: 14px; font-weight: 400; color: var(--text-body); }
.smap li.d3 a { padding-left: 28px; font-size: 12.5px; color: var(--text-body); }
.rtab-wrap { overflow-x: auto; margin-top: 18px; }
.rtab { border-collapse: collapse; width: 100%; min-width: 640px; }
.rtab th, .rtab td { text-align: left; vertical-align: top; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 12.5px; }
.rtab th { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; border-bottom-color: var(--hairline); }
.rtab td code { font-family: var(--mono); font-size: 11.5px; color: var(--ink); word-break: break-all; }
.rtab td a { color: var(--accent); }
.rtab td a:hover { color: var(--ink); }
.rtab .why { color: var(--text-muted); }

@media (prefers-reduced-motion: no-preference) { main { animation: ss-rise .4s cubic-bezier(.16,1,.3,1) both; } }
@keyframes ss-rise { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-trigger, .nav-trigger::after, .nav-link::after, .fcol a, .ix .ar, .b-ar { transition: none; } }

/* Reseller directory: one grid, filterable */
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0 36px; border-top: 1px solid var(--hairline); margin-top: 8px; }
.rs-grid .rs { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid var(--hairline-soft); }
.rs-grid .rs[hidden] { display: none; }
.rs-c { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rs-grid .rs dl { margin-top: 2px; }
.rs-grid .rs.hl { background: var(--tint); border-radius: 10px; padding-inline: 14px; }
.pull p + p { margin-top: 12px; }


.moved .btns { margin-top: 26px; }

/* SLA version box (live since 21 October 2026) and small notes */
.prose .verbox { border-left: 4px solid var(--sidra-green); background: var(--tint); padding: 14px 18px; margin: 0 0 26px; border-radius: 0 10px 10px 0; }
.prose .verbox p { margin: 0; }
.prose .verbox .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.prose .verbox .v { font-family: var(--sans); font-weight: 700; color: var(--ink); font-size: 17px; line-height: 1.4; margin-top: 4px; }
.prose .verbox .o { font-size: 13.5px; color: var(--text-body); margin-top: 4px; }
.smallnote { margin-top: 18px; font-size: 13.5px; color: var(--text-muted); max-width: 70ch; }

/* ═════════════ Talk to our team (23 October 2026, second version) ═════════════
   The panel from the sidraintersection.com Contact page: kicker, heading, short mono lines, and three buttons, Sales
   enquiries in white. Buttons: the angled wipe from the hero buttons (paper-core.css), filling deep green with white
   text, so a hovered button never looks like Sales enquiries at rest; the arrow passes through its own box. When the
   panel first comes into view, static/home.js adds .is-wave and a light band runs down the three buttons in turn
   (the "green wave"). With reduced motion the colours change and nothing moves. */
.talk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: center; margin-top: 84px; padding: 46px 52px 48px; border-radius: 18px; background: var(--solid); color: var(--solid-body); }
.talk-k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--solid-mute); }
.talk h2 { margin-top: 10px; font-size: clamp(32px, 3.8vw, 48px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; color: #fff; }
.talk p { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.9; color: var(--solid-body); }
.talk p b { color: #fff; font-weight: 500; }
.talk p a { color: #fff; }
.talk-more { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 14px; color: #fff; }
.talk-more:hover, .talk p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.talk-cta { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.talk-btn {
  --flow-fill: #24421a; --flow-ink: #fff; --flow-bg: #fff; --wipe-in: 100%; --wipe-out: 0%; --wave: rgba(66, 116, 46, 0.3);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 13px 22px 13px 24px;
  border-radius: 10px; border: 1px solid #fff; background-color: #fff; color: var(--solid); font-weight: 700; font-size: 16px; white-space: nowrap;
  background-image: linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%), linear-gradient(115deg, transparent 0 35%, var(--flow-fill) 35.1% 65%, transparent 65.1%);
  background-size: 400% 100%, 400% 100%; background-repeat: no-repeat, no-repeat; background-position: var(--wipe-in) 0, var(--wipe-out) 0;
  transition: --wipe-in 0s, --wipe-out 0.6s cubic-bezier(0.7, 0, 0.2, 1), color 0.15s ease 0.2s, border-color 0.15s ease 0.2s, transform 0.15s ease;
}
.talk-btn.line { --flow-bg: transparent; --wave: rgba(255, 255, 255, 0.42); background-color: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); font-weight: 600; }
.talk-btn:is(:hover, :focus-visible) {
  --wipe-in: 50%; --wipe-out: 50%; color: var(--flow-ink); border-color: var(--flow-fill); text-decoration: none;
  transition: --wipe-in 0.6s cubic-bezier(0.7, 0, 0.2, 1), --wipe-out 0s 0.6s, color 0.15s ease 0.25s, border-color 0.15s ease 0.25s, transform 0.15s ease;
}
.talk-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.talk-btn:active { transform: scale(0.985); }
.talk-btn svg { width: 15px; height: 15px; flex-shrink: 0; overflow: hidden; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.talk-btn:is(:hover, :focus-visible) svg > path { animation: si-arrow-pass 0.5s 0.15s both; }
.talk-btn::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 0 32%, var(--wave) 50%, transparent 68%); transform: translateX(-115%); }
.talk-cta.is-wave .talk-btn::after { animation: talk-wave 1.1s cubic-bezier(0.45, 0, 0.2, 1) both; }
.talk-cta.is-wave .talk-btn:not(:hover) svg > path { animation: si-arrow-pass 0.5s 0.5s both; }
.talk-cta.is-wave .talk-btn:nth-child(2)::after { animation-delay: 0.16s; }
.talk-cta.is-wave .talk-btn:nth-child(3)::after { animation-delay: 0.32s; }
.talk-cta.is-wave .talk-btn:nth-child(2):not(:hover) svg > path { animation-delay: 0.66s; }
.talk-cta.is-wave .talk-btn:nth-child(3):not(:hover) svg > path { animation-delay: 0.82s; }
@keyframes talk-wave { from { transform: translateX(-115%); } to { transform: translateX(115%); } }
@media (max-width: 900px) { .talk { grid-template-columns: 1fr; padding: 30px 24px 32px; } .talk-cta { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .talk-btn, .talk-btn svg > path, .talk-btn::after { transition: none !important; animation: none !important; } }

/* Sign-in menu: STORE Account and SIDRA DOWNLOADS as two labelled groups (23 October 2026) */
.acct-menu { min-width: 300px; }
.acct-h small { display: block; margin-top: 3px; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--text-body); }
.acct-g2 { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--hairline); }
.acct-g2 .acct-h { border-bottom: 0; margin-bottom: 0; }

/* Long unbroken words in page headings (an address such as www.sidrasolutions.com) wrap instead of overflowing on phones */
.phead h1 { overflow-wrap: anywhere; }

/* Closing band on inner pages: the hairline form of the sidraintersection.com .register band (23 Oct 2026). */
.closing { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; margin-top: 84px; padding: 30px 4px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.closing .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.closing h2 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.closing p { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-body); line-height: 1.9; }
.closing p b { color: var(--ink); font-weight: 500; }
.closing p a:hover { color: var(--accent); }
.closing .reg-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
@media (max-width: 767px) { .closing { grid-template-columns: 1fr; margin-top: 60px; } }

/* Training menu: where its links lead (23 Oct 2026). Mono caption under a hairline, the address in the accent green. */
.nav-where { grid-column: 1 / -1; display: block; margin-top: 6px; padding: 10px 10px 2px; border-top: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label, var(--sage)); text-decoration: none; }
.nav-where b { color: var(--accent); font-weight: 500; }
.nav-where:hover b, .nav-where:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.mobile-links .nav-where { margin: 6px 0 0; padding: 10px 0 2px; }

/* ═══ Contact section (24 Oct 2026): forms on the page, as on sidraintersection.com/contact ═══ */
.contact-main .contact-routes { margin-top: 34px; }
.contact-h { margin-top: 64px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.reg-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; margin-top: 22px; }
.formframe { border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.formframe-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.formframe-bar b { color: var(--accent); font-weight: 500; }
.cog-host { padding: 12px 22px 26px; min-height: 120px; }
.cog-wait { padding: 26px 0; font-size: 13.5px; color: var(--text-muted); }
.cog-wait span { display: block; margin-top: 6px; font-size: 12.5px; }
.cog-wait a { color: var(--accent); text-decoration: underline; }
.prose .cog-wait { margin: 0; font-size: 13.5px; }
.prose .formframe { margin-block: 26px 8px; }
.cside { border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.cside-head { padding: 12px 18px; border-bottom: 1px solid var(--hairline-soft); background: var(--tint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.cside-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.cside-row { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: baseline; }
.cside-row .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cside-row .v { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.cside-row .v small { display: block; font-size: 12px; font-weight: 400; color: var(--text-body); }
.cside-row .v a { color: var(--ink); }
.cside-links { padding: 14px 18px 16px; border-top: 1px solid var(--hairline-soft); display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.cside-links a { color: var(--accent); }
.cside-links a:hover { text-decoration: underline; }
.contact-kv { max-width: 860px; margin-top: 22px; }
.contact-kv dd p + p { margin-top: 6px; }
.contact-kv dd, .contact-kv dd p { font-size: 15px; line-height: 1.6; color: var(--text-body); }
.contact-kv a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.contact-kv a:hover { color: var(--accent); }
.contact-kv .k2 { color: var(--text-muted); font-size: 13px; }
.contact-kv .sl { color: var(--hairline); margin: 0 4px; }
.contact-kv .social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.contact-kv .ext { font-size: 11px; color: var(--text-muted); }
@media (max-width: 1023px) { .reg-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cog-host { padding: 8px 14px 20px; } .contact-h { margin-top: 48px; } }
/* Reseller cards: labels in the small label style, values as text (24 Oct 2026) */
.rs-grid .rs dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; margin-top: 6px; }
.rs-grid .rs dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.rs-grid .rs dd { font-size: 13.5px; line-height: 1.5; color: var(--text-body); overflow-wrap: anywhere; }
.rs-grid .rs dd a { color: var(--ink); }
.rs-grid .rs dd a:hover { color: var(--accent); }
/* Cognito overrides, copied byte for byte from the CSS string in SI-Website site/contact.html (24 Oct 2026) */

.cog-host { --cog-err: #b3261e; }
:root[data-theme="dark"] .cog-host { --cog-err: #f2a39b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cog-host { --cog-err: #f2a39b; } }
.cog-cognito .cog-form__container { background: transparent !important; }
/* Cognito centres the form at its theme width (520px for form 28); fill the card instead, so fields line up with the note above. */
.cog-host .cog-form__container { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.cog-cognito, .cog-cognito input, .cog-cognito textarea, .cog-cognito select, .cog-cognito button, .cog-select-popper { font-family: var(--sans) !important; }
.cog-cognito { color: var(--ink) !important; }
.cog-cognito .cog-content, .cog-cognito .cog-content p, .cog-cognito .cog-section__description { color: var(--text-body) !important; }
.cog-cognito .el-input__inner, .cog-cognito .el-textarea__inner { border: 1px solid var(--hairline) !important; border-radius: 8px !important; padding: 10px 12px !important; font-size: 14px !important; background: var(--bg-page) !important; color: var(--ink) !important; height: auto !important; line-height: 1.5 !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; }
.cog-cognito .el-input__inner::placeholder, .cog-cognito .el-textarea__inner::placeholder { color: var(--text-muted) !important; }
.cog-cognito .el-input__inner:focus, .cog-cognito .el-textarea__inner:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.cog-cognito .el-input__suffix { color: var(--text-muted) !important; }
.cog-cognito .cog-i-chevron path { stroke: var(--text-muted) !important; }
.cog-cognito .cog-label { color: var(--ink) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.cog-cognito .cog-asterisk { color: var(--cog-err) !important; }
.cog-cognito .cog-section__heading { color: var(--ink) !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--hairline-soft) !important; }
.cog-cognito .cog-helptext { color: var(--text-body) !important; font-size: 13px !important; line-height: 1.5 !important; }
.cog-cognito .cog-helptext a, .cog-cognito .cog-content a { color: var(--accent) !important; text-decoration: underline !important; }
/* Release fixes, 19 Oct 2026: editable fields reach 3:1 against the page; form headings follow the theme. */
.cog-cognito .el-input__inner, .cog-cognito .el-textarea__inner { border-color: var(--field-border, #85897a) !important; }
/* Second pass, 19 Oct 2026: repeating-section panels (attendees) sit on the card colour, so field borders and help text keep their contrast. */
.cog-cognito .cog-section__inner--background { background: var(--bg-card) !important; border: 1px solid var(--hairline) !important; border-radius: 10px !important; }
.cog-cognito .cog-content h1, .cog-cognito .cog-content h2, .cog-cognito .cog-content h3, .cog-cognito .cog-content h2 strong, .cog-cognito .cog-repeating-section__heading { color: var(--ink) !important; }
.cog-cognito .el-radio__inner { width: 18px !important; height: 18px !important; border: 1px solid var(--text-muted) !important; background: var(--bg-page) !important; }
.cog-cognito .el-radio__input.is-checked .el-radio__inner { border-color: var(--btn-bg) !important; background: var(--btn-bg) !important; }
.cog-cognito .el-radio__label, .cog-cognito .cog-choice__value, .cog-cognito .el-checkbox__label { color: var(--ink) !important; font-size: 14px !important; font-weight: 500 !important; }
.cog-cognito .cog-checkable--inline .cog-checkable__item { margin-right: 24px !important; }
.cog-cognito .cog-checkable__item:focus-within .el-radio__inner, .cog-cognito .el-checkbox:focus-within .el-checkbox__inner { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent) !important; }
.cog-cognito .cog-checkable--card .cog-checkable__item { border: 1px solid var(--hairline) !important; border-radius: 10px !important; background: var(--bg-page) !important; padding: 18px 20px !important; margin: 0 12px 12px 0 !important; box-shadow: none !important; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important; }
.cog-cognito .cog-checkable--card .cog-checkable__item:hover { border-color: var(--accent) !important; }
.cog-cognito .cog-checkable--card .cog-checkable__item.is-checked { border-color: var(--accent) !important; background: var(--tint) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.cog-cognito .cog-checkable--card .cog-choice__card-checkmark circle { fill: var(--btn-bg) !important; stroke: var(--btn-bg) !important; }
.cog-cognito .cog-checkable--card .cog-choice__card-checkmark path { stroke: #fff !important; }
.cog-cognito .el-checkbox__original, .cog-cognito .el-radio__original { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; }
.cog-cognito .el-checkbox__inner { width: 18px !important; height: 18px !important; border: 1px solid var(--text-muted) !important; border-radius: 4px !important; background: var(--bg-page) !important; }
.cog-cognito .el-checkbox__input.is-checked .el-checkbox__inner { border-color: var(--btn-bg) !important; background: var(--btn-bg) !important; }
.cog-cognito .el-checkbox__checkmark path { stroke: #fff !important; }
.cog-select-popper { border: 1px solid var(--hairline) !important; border-radius: 8px !important; background: var(--bg-card) !important; box-shadow: var(--shadow) !important; }
.cog-select-popper .el-select-dropdown__item { font-size: 14px !important; color: var(--ink) !important; }
.cog-select-popper .el-select-dropdown__item.hover, .cog-select-popper .el-select-dropdown__item:hover { background: var(--tint) !important; }
.cog-select-popper .el-select-dropdown__item.selected { color: var(--accent) !important; font-weight: 600 !important; }
.cog-cognito .cog-error-message { color: var(--cog-err) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; }
.cog-cognito .cog-error-message--container-footer { background: color-mix(in srgb, var(--cog-err) 8%, transparent) !important; border: 1px solid color-mix(in srgb, var(--cog-err) 30%, transparent) !important; border-radius: 8px !important; padding: 8px 12px !important; }
.cog-cognito .cog-error-message p, .cog-cognito .cog-error-message a { color: var(--cog-err) !important; }
.cog-cognito .is-error .el-input__inner, .cog-cognito .is-error .el-textarea__inner { border-color: var(--cog-err) !important; }
.cog-cognito .cog-button--submit, .cog-cognito .cog-button--primary { background-color: var(--btn-bg) !important; color: var(--btn-fg) !important; border: 1px solid var(--btn-bg) !important; border-radius: 10px !important; padding: 12px 24px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; }
.cog-cognito .cog-button--submit:hover, .cog-cognito .cog-button--primary:hover { background-color: var(--btn-bg-hover) !important; border-color: var(--btn-bg-hover) !important; }
.cog-cognito .cog-button--submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent) !important; outline-offset: 2px !important; }
/* Back buttons only. Cognito's Submit button is also .cog-button--navigation, so that class must not be styled here. */
.cog-cognito .cog-button--secondary { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--hairline) !important; border-radius: 10px !important; }
.cog-cognito .cog-confirmation, .cog-cognito .cog-confirmation__message, .cog-cognito .cog-confirmation__message p { color: var(--ink) !important; }

/* Light mode palette, sidrasolutions.com only (24 Oct 2026, option D).
   In light mode only: the silk background is hidden (silk.js is unchanged), the page sits on the brand Panel paper,
   text is one step darker, and the company document greens replace the bright green accent: Mid Olive #606C38 for the
   headline words and markers, SIDRA Green #485C27 for small green text, Deep Olive #283618 for the contact panel
   (KB-BRAND-001). The wordmark, top bar and buttons keep the sidraintersection.com green. Dark mode is untouched.
   This layer belongs to sidrasolutions.com and stays out of paper-core.css. */
@media screen and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg-page: #f7f8f3; --bg-header: rgba(247, 248, 243, 0.9); --bg-card: #ffffff; --hairline: #dadcd0; --hairline-soft: #e8e9e0; --tint: #edefe6; --text-body: #4a4943; --text-muted: #5c5e51; --display-green: #606c38; --accent: #485c27; }
  :root:not([data-theme="dark"]) .silk { display: none; }
  :root:not([data-theme="dark"]) .wordmark .g, :root:not([data-theme="dark"]) .site-footer .wm .g { color: #42742e; }
  :root:not([data-theme="dark"]) .now-tab .bar i, :root:not([data-theme="dark"]) .deck-row::before, :root:not([data-theme="dark"]) .nav-trigger::after { background: #606c38; }
  :root:not([data-theme="dark"]) .deck-row.featured .arrow { border-color: #606c38; }
  :root:not([data-theme="dark"]) .deck-row.featured .arrow svg { stroke: #606c38; }
  :root:not([data-theme="dark"]) .talk { background: #283618; }
}
@media screen {
  :root[data-theme="light"] { --bg-page: #f7f8f3; --bg-header: rgba(247, 248, 243, 0.9); --bg-card: #ffffff; --hairline: #dadcd0; --hairline-soft: #e8e9e0; --tint: #edefe6; --text-body: #4a4943; --text-muted: #5c5e51; --display-green: #606c38; --accent: #485c27; }
  :root[data-theme="light"] .silk { display: none; }
  :root[data-theme="light"] .wordmark .g, :root[data-theme="light"] .site-footer .wm .g { color: #42742e; }
  :root[data-theme="light"] .now-tab .bar i, :root[data-theme="light"] .deck-row::before, :root[data-theme="light"] .nav-trigger::after { background: #606c38; }
  :root[data-theme="light"] .deck-row.featured .arrow { border-color: #606c38; }
  :root[data-theme="light"] .deck-row.featured .arrow svg { stroke: #606c38; }
  :root[data-theme="light"] .talk { background: #283618; }
}

/* Contact audit fixes (24 Oct 2026) */
/* Hide Cognito's own form title inside an embed: the card above names the form (Astra K1). */
.cog-host .cog-header { display: none !important; }
/* A topic link (?topic=) adds this note above the message form, as on sidraintersection.com/contact. */
.topic-note { margin-top: 18px; max-width: 760px; padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--tint); font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.topic-note b { color: var(--ink); font-weight: 700; }
.prose .pre-form { margin: 0 0 18px; }

/* Forms on the live site open on Cognito's own page (the CSP allows no third-party scripts) */
.formlink { border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-card); padding: 22px 24px; margin-block: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; }
.formlink .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.formlink .t { font-family: var(--sans) !important; font-size: 17px !important; font-weight: 700; color: var(--ink) !important; }
.formlink .d { grid-column: 1; font-family: var(--sans) !important; font-size: 13px !important; color: var(--text-body) !important; }
.formlink .btn { grid-column: 2; grid-row: 1 / span 3; }
.prose .formlink .btn, .prose .formlink .btn:hover { color: var(--btn-fg); text-decoration: none; }
@media (max-width: 560px) { .formlink { grid-template-columns: minmax(0, 1fr); } .formlink .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } }
/* SIDRA NEWS sign-up on /subscribe: a plain form that posts to Mailchimp. No script; public/_headers allows its address on /subscribe only. */
.signup { position: relative; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-card); padding: 24px; margin-block: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.signup .k { grid-column: 1 / -1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.prose .signup .d { grid-column: 1 / -1; margin: -8px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.signup .fld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.signup .fld label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); }
.signup .fld .opt { font-weight: 400; color: var(--text-muted); }
.signup .fld input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid var(--field-border); border-radius: 10px; background: var(--bg-page); color: var(--ink); font-size: 15px; }
.signup .fld input:hover { border-color: var(--accent); }
.signup .fld input:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.signup .consent { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--text-body); cursor: pointer; }
.signup .consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--btn-bg); cursor: pointer; }
.signup .trap { position: absolute; left: -5000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.signup-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.signup-act .btn { cursor: pointer; }
.prose .signup .note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 560px) { .signup { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

/* Former inline style attributes (CSP style-src 'self') */
[data-s="s1"] { padding:12px 14px }
[data-s="s2"] { margin-top:30px }
[data-s="s3"] { margin-top:0 }
[data-s="s4"] { margin-top:34px }
[data-s="s5"] { display:flex;gap:6px;flex-wrap:wrap }