/* Public marketing stylesheet.
 *
 * The public pages used to link assets/css/app.css, which is the whole 460 KB
 * workspace design system, and then inline another 14 KB of page CSS into every
 * response. Measured against the rendered pages, the marketing site matches
 * exactly nine class hooks from app.css (btn, btn-primary, btn-secondary,
 * btn-ghost, field, form-full, alert, alert-error, and the mt/mb spacing
 * utilities) plus the token block and the element reset. Everything else in
 * app.css is sidebar, builder, calendar, invoice and warehouse UI that no
 * marketing page can ever render.
 *
 * So this file carries that subset plus the shared public-site layout, and the
 * pages link it instead. Render-blocking CSS on a marketing page drops from
 * ~470 KB to ~20 KB, and the part that used to be inline is now cached across
 * page views like any other stylesheet.
 *
 * Keep the token values byte-identical to app.css. A marketing page and a
 * workspace page render the same brand, and two drifting copies of the palette
 * is the failure this file has to avoid.
 */

/* ── TOKENS (mirrors app.css :root) ──────────────────────────────────────── */
:root {
  color-scheme: dark;
  --color-canvas:          #06070b;
  --color-surface-primary: #0f1219;
  --color-surface-raised:  #171b25;
  --color-surface-hover:   #212738;
  --color-border-subtle:   #343c4f;
  --color-border-strong:   #46506a;
  --color-text-primary:    #f4f7ff;
  --color-text-secondary:  #c2c8d9;
  --color-text-muted:      #959db3;
  --color-accent-primary:  #e8ff47;
  --color-accent-secondary:#a8ff47;
  --color-status-danger:   #ff4757;
  --color-status-success:  #3de88a;
  --color-status-info:     #47b4ff;
  --color-status-warning:  #ffb347;
  --color-status-special:  #c882ff;
  --color-surface-soft:    rgba(255,255,255,.03);
  --color-surface-softer:  rgba(255,255,255,.018);
  --color-border-overlay:  rgba(255,255,255,.08);
  --shadow-surface:        0 18px 40px rgba(0,0,0,.34);
  --gradient-surface-card: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-primary));
  --gradient-surface-raised: linear-gradient(180deg, var(--color-surface-primary), var(--color-surface-raised));

  --bg:       var(--color-canvas);
  --surface:  var(--color-surface-primary);
  --surface2: var(--color-surface-raised);
  --surface3: var(--color-surface-hover);
  --border:   var(--color-border-subtle);
  --border2:  var(--color-border-strong);
  --accent:   var(--color-accent-primary);
  --accent2:  var(--color-accent-secondary);
  --text:     var(--color-text-primary);
  --text2:    var(--color-text-secondary);
  --text3:    var(--color-text-muted);
  --red:      var(--color-status-danger);
  --green:    var(--color-status-success);
  --blue:     var(--color-status-info);
  --orange:   var(--color-status-warning);
  --purple:   var(--color-status-special);
  --status-warning-text: #ffd58b;
  --status-warning-bg: rgba(255,179,71,.10);
  --status-warning-border: rgba(255,179,71,.28);
  --status-danger-text: #ff9d9d;
  --status-danger-bg: rgba(255,71,87,.08);
  --status-danger-border: rgba(255,71,87,.25);

  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;
  --radius:   var(--r-xs);
  --radius2:  var(--r-sm);
  --radius3:  var(--r-md);
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--text); margin: 0; line-height: 1.2; }
::selection { background: rgba(232,255,71,.92); color: #06070b; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all .14s; white-space: nowrap; line-height: 1; letter-spacing: .01em; }
.btn-primary { background: var(--accent); color: #000; font-weight: 600; border-color: var(--accent); }
.btn-primary:hover { background: #f0ff5a; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232,255,71,.22); }
.btn:disabled, .btn.is-loading { cursor: wait; opacity: .55; filter: grayscale(1); transform: none; box-shadow: none; }
.btn-primary:disabled, .btn-primary.is-loading, .btn-primary:disabled:hover, .btn-primary.is-loading:hover { background: var(--surface3); color: var(--text3); border-color: var(--border2); box-shadow: none; transform: none; }
.btn-secondary { background: var(--surface3); color: var(--text); border-color: var(--border2); }
.btn-secondary:hover { background: var(--surface2); }
.btn-ghost { background: transparent; color: var(--text2); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn--full { width: 100%; justify-content: center; }

/* ── FORMS ───────────────────────────────────────────────────────────────── */
.form-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .1em; }
select { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; }
select:focus { border-color: var(--accent); }
:where(input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea) {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; min-width: 0;
}
:where(input):focus, :where(textarea):focus { border-color: var(--accent); }
.field input, .field select, .field textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 11px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: border-color .14s, background .14s; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--surface3); }
.field select option { background: var(--surface2); }
.field textarea { resize: vertical; min-height: 72px; line-height: 1.6; }
.field-hint { font-size: 11px; color: var(--text3); }
.field-hint--error { color: var(--red); }

/* ── TABLES ──────────────────────────────────────────────────────────────────
   Article tables were picking up app.css element rules (tbody td at 13px in the
   primary text colour, thead th at weight 500) on top of their own component
   CSS. Dropping app.css would have changed how every comparison table on the
   blog renders, so the winning rules come across verbatim.
──────────────────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
thead th { font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 500; background: var(--surface2); }
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody td { padding: 11px 16px; font-size: 13px; color: var(--text); vertical-align: middle; }

/* ── CHECKBOX AND RADIO ──────────────────────────────────────────────────────
   The privacy choices panel and the signup consent box use these. Without them
   the controls fall back to native browser checkboxes.
──────────────────────────────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, opacity .14s ease;
}
input[type="checkbox"] { border-radius: var(--r-xs); }
input[type="radio"] { border-radius: var(--r-pill); }
input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #0b0d12;
  border-bottom: 2px solid #0b0d12;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
input[type="radio"]::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: #0b0d12;
  transform: scale(0);
  transition: transform .12s ease;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,255,71,.08); }
input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
input[type="radio"]:checked::after { transform: scale(1); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,255,71,.14); }
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── ALERTS + SPACING UTILITIES ──────────────────────────────────────────── */
.alert { padding: 11px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.alert-error   { background: var(--status-danger-bg); border: 1px solid var(--status-danger-border); color: var(--status-danger-text); }
.alert-success { background: var(--status-success-bg); border: 1px solid var(--status-success-border); color: var(--status-success-text); }
.alert-warn, .alert-warning { background: var(--status-warning-bg); border: 1px solid var(--status-warning-border); color: var(--status-warning-text); }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }

/* ── SHARED PUBLIC-SITE LAYOUT ───────────────────────────────────────────
   Moved out of an inline <style> in includes/public_site.php. It was byte
   identical on every public page, so inlining it meant re-sending 14 KB per
   page view that a cached stylesheet sends once.
──────────────────────────────────────────────────────────────────────────── */
body.public-site{margin:0;background:radial-gradient(circle at top,rgba(232,255,71,.08),transparent 26%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}
.public-nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(10,10,12,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateZ(0);will-change:transform;isolation:isolate}
.public-brand{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:.08em;color:var(--accent);text-decoration:none}
.public-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.public-links a{padding:8px 12px;border-radius:var(--r-pill);text-decoration:none;color:var(--text2);font-size:14px;border:1px solid transparent}
.public-links a.active,.public-links a:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.public-links .public-cta{background:var(--accent);color:#111;font-weight:700}
.public-links .public-cta:hover{background:#f2ff74;color:#111}
.public-page{max-width:1180px;margin:0 auto;padding:40px 24px 72px}
.public-hero{padding:28px 0 22px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:26px}
.public-kicker{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.public-hero h1{margin:10px 0 12px;font-family:'Syne',sans-serif;font-size:clamp(34px,6vw,64px);line-height:.98;letter-spacing:-.03em}
.public-hero p{max-width:720px;margin:0;color:var(--text2);line-height:1.7}
.public-grid{display:grid;gap:18px}
.public-grid--2{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)}
.public-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:20px}
.public-card h2,.public-card h3{margin:0 0 10px;font-family:'Syne',sans-serif}
.public-card p{margin:0;color:var(--text2);line-height:1.65}
.public-muted{color:var(--text3)}
.public-stack{display:grid;gap:14px}
.public-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.public-chip-row--spaced{margin:14px 0 10px}
.public-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font-size:12px;color:var(--text2)}
.public-callout{padding:14px 16px;border-radius:var(--r-md);border:1px solid rgba(232,255,71,.18);background:rgba(232,255,71,.08);color:var(--text)}
.public-callout strong{color:var(--accent)}
.public-callout--my{margin:14px 0}
.public-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.public-form-grid .form-full{grid-column:1 / -1}
.public-form-grid textarea{min-height:180px;resize:vertical}
.public-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.public-actions .btn{margin:0}
.public-details{display:grid;gap:10px}
.public-details--gap{gap:12px}
.public-details details{border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:rgba(255,255,255,.03);overflow:hidden}
.public-details summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:16px}
.public-details summary::-webkit-details-marker{display:none}
.public-details summary::after{content:'+';font-family:'DM Mono',monospace;color:var(--accent);font-size:18px}
.public-details details[open] summary::after{content:'−'}
.public-details-body{padding:0 18px 18px;color:var(--text2);line-height:1.7}
.public-details-body--pre{white-space:pre-wrap}
.public-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin:18px 0 12px}
.public-section-head--flush{margin-top:0;margin-bottom:14px}
.public-section-head h2{margin:0;font-family:'Syne',sans-serif;font-size:26px}
.public-section-head h2.public-section-title--sm{font-size:24px}
.public-search{display:flex;gap:10px;align-items:center}
.public-search input{min-width:260px}
.public-footer{border-top:1px solid rgba(255,255,255,.08);padding:22px 24px 34px;display:flex;justify-content:space-between;gap:16px;align-items:center;max-width:1180px;margin:0 auto;color:var(--text3);font-size:13px}
.public-footer-links{display:flex;gap:14px;flex-wrap:wrap}
.public-footer a{color:var(--text2);text-decoration:none}
.public-footer a:hover{color:var(--accent)}
.public-meta-list{display:grid;gap:10px}
.public-meta-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.public-meta-row:last-child{border-bottom:none}
.public-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.public-blog-card{display:grid;gap:12px;color:inherit;text-decoration:none;min-height:100%}
.public-blog-card:hover{border-color:rgba(232,255,71,.28);background:rgba(255,255,255,.045)}
.public-blog-card h2,.public-blog-card h3{margin:0;font-family:'Syne',sans-serif;line-height:1.12}
.public-blog-card p{margin:0;color:var(--text2);line-height:1.65}
.public-blog-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--text3);font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.public-blog-card__arrow{font-weight:700;color:var(--accent)}
.public-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.public-article{display:grid;gap:0}
.public-article-section{display:grid;gap:14px;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.075)}
.public-article-section:first-of-type{padding-top:26px}
.public-article-section h2+p{margin-top:2px}
.public-article-faq{border-bottom:none}
.public-article h2{margin:0;font-family:'Syne',sans-serif;font-size:clamp(24px,3vw,34px);line-height:1.08}
.public-article p{margin:0;color:var(--text2);line-height:1.78;font-size:16px}
.public-article ul{margin:0;padding-left:22px;color:var(--text2);line-height:1.75}
.public-article .public-article-sources{display:grid;gap:8px;margin-top:12px}
.public-article-sources a{color:var(--accent);font-weight:700;text-decoration:none}
.public-article-sources a:hover{text-decoration:underline}
.public-article li+li{margin-top:8px}
.public-article-table-wrap{overflow-x:auto;margin-top:6px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);background:rgba(0,0,0,.16)}
.public-article-table{width:100%;min-width:760px;border-collapse:collapse;color:var(--text2);font-size:14px;line-height:1.55}
.public-article-table th,.public-article-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.07)}
.public-article-table th{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(255,255,255,.04)}
.public-article-table tr:last-child td{border-bottom:none}
.public-article-table td:first-child{color:var(--text);font-weight:700}
.public-article-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;border-color:rgba(232,255,71,.2);background:rgba(232,255,71,.07)}
.public-article-cta h2,.public-article-cta h3{margin:0 0 6px}
.public-article-cta p{margin:0;color:var(--text2);line-height:1.6}
.public-article-aside{position:sticky;top:96px;display:grid;gap:14px}
.public-toc{display:grid;gap:10px}
.public-toc a{color:var(--text2);text-decoration:none;line-height:1.4}
.public-toc a:hover{color:var(--accent)}
.public-related-list{display:grid;gap:10px}
.public-related-list a{color:var(--text);text-decoration:none;line-height:1.35}
.public-related-list a:hover{color:var(--accent)}
.public-data-notice{padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);background:rgba(255,255,255,.035);color:var(--text2);font-size:12px;line-height:1.55}
.public-data-notice a{color:var(--accent);font-weight:700;text-decoration:none}
.privacy-choice-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.privacy-choice-actions .btn{white-space:nowrap}
.privacy-choice-link{border:0;background:transparent;color:var(--text2);font-family:inherit;font-size:13px;font-weight:400;line-height:inherit;cursor:pointer;padding:0}
.privacy-choice-link:hover{color:var(--accent)}
.privacy-choice-panel{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:18px;background:rgba(0,0,0,.58)}
.privacy-choice-panel.is-visible{display:grid}
.privacy-choice-card{width:min(560px,100%);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);background:var(--surface);padding:20px;box-shadow:0 22px 70px rgba(0,0,0,.5)}
.privacy-choice-card h2{margin:0 0 10px;font-family:'Syne',sans-serif}
.privacy-choice-card p{margin:0;color:var(--text2);line-height:1.6;font-size:13px}
.privacy-choice-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);background:rgba(255,255,255,.035)}
.privacy-choice-option strong{display:block;margin-bottom:4px}
.privacy-choice-option span{display:block;color:var(--text2);font-size:12px;line-height:1.5}
.privacy-choice-option input{width:20px;height:20px;accent-color:var(--accent)}
.privacy-choice-option input[disabled]{opacity:.65}
.privacy-choice-card-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}
.privacy-consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 20px;border-top:1px solid rgba(255,255,255,.12);background:var(--surface);box-shadow:0 -14px 40px rgba(0,0,0,.35)}
.privacy-consent-banner.is-visible{display:flex}
.privacy-consent-banner__copy{max-width:760px}
.privacy-consent-banner__copy strong{display:block;margin-bottom:3px;font-family:'Syne',sans-serif}
.privacy-consent-banner__copy span{color:var(--text2);font-size:12px;line-height:1.55}
.privacy-consent-banner__copy a{color:var(--accent)}
.privacy-consent-banner__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.privacy-consent-banner__actions .btn{white-space:nowrap;min-height:30px;padding:0 14px;border-radius:var(--r-pill);font-size:12px;font-weight:600}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:900px){
  .public-grid--2,.public-form-grid{grid-template-columns:1fr}
  .public-form-grid .form-full{grid-column:auto}
  .public-blog-grid,.public-article-layout{grid-template-columns:1fr}
  .public-article-aside{position:static}
  .public-article-cta{align-items:flex-start;flex-direction:column}
}
@media (max-width:720px){
  .public-nav{align-items:flex-start;flex-direction:column;padding:14px 16px 10px}
  .public-links{width:100%;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .public-links a{font-size:13px;padding:7px 10px}
  .public-page{padding:26px 16px 56px}
  .public-hero{padding-top:12px}
  .public-section-head{flex-direction:column;align-items:stretch}
  .public-search input{min-width:0;width:100%}
  .public-footer{padding:18px 16px 28px;flex-direction:column;align-items:flex-start}
  .privacy-choice-actions{justify-content:flex-start}
  .privacy-consent-banner{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px}
  .privacy-consent-banner__actions .btn{flex:1 1 auto;text-align:center}
}
/* Article UI polish */
.public-article-header{border-color:rgba(232,255,71,.2)}
.public-article-cta h2{font-size:clamp(19px,2.2vw,24px)}
.public-article-cta .btn{flex-shrink:0}
.public-details summary{align-items:flex-start}
.public-toc a{font-size:13px}
.public-article-toc-mobile{display:none}
@media (max-width:900px) and (min-width:600px){.public-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .public-aside-toc{display:none}
  .public-article-toc-mobile{display:block;margin-top:16px;margin-bottom:0}
  .public-article-toc-mobile summary{list-style:none;cursor:pointer;padding:14px 18px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md)}
  .public-article-toc-mobile summary::-webkit-details-marker{display:none}
  .public-article-toc-mobile summary::after{content:'+';font-family:'DM Mono',monospace;color:var(--accent);font-size:18px;flex-shrink:0}
  .public-article-toc-mobile[open] summary::after{content:'−'}
  .public-article-toc-mobile[open] summary{border-radius:var(--r-md) var(--r-md) 0 0}
  .public-article-toc-mobile nav{display:grid;gap:10px;padding:14px 18px;border:1px solid rgba(255,255,255,.08);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);background:rgba(255,255,255,.03)}
  .public-article-toc-mobile nav a{color:var(--text2);text-decoration:none;font-size:14px;line-height:1.4}
  .public-article-toc-mobile nav a:hover{color:var(--accent)}
}
@media (max-width:680px){
  .public-article-table-wrap{overflow-x:visible;border:none;background:transparent;border-radius:0}
  .public-article-table,.public-article-table tbody,.public-article-table tr,.public-article-table td{display:block}
  .public-article-table thead{display:none}
  .public-article-table{min-width:0}
  .public-article-table tr{border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);background:rgba(0,0,0,.16);padding:14px 16px;margin-bottom:10px}
  .public-article-table td{border:none;padding:0}
  .public-article-table td:first-child{font-family:'DM Mono',monospace;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
  .public-article-table td[data-label]:not(:first-child){padding-top:8px;color:var(--text2);font-size:13px;line-height:1.55}
  .public-article-table td[data-label]:not(:first-child)::before{display:block;content:attr(data-label);font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:4px}
  .public-article-table td[data-label]:not(:first-child)+td[data-label]:not(:first-child){border-top:1px solid rgba(255,255,255,.05);margin-top:4px}
}

/* ── FOOTER SOLUTIONS NAV ────────────────────────────────────────────────────
   The ten commercial pages, linked from every public page. Sits above the
   utility footer and reads as a site map row, not a keyword dump.
──────────────────────────────────────────────────────────────────────────── */
.public-footer-solutions{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:start;max-width:1180px;margin:0 auto;padding:26px 24px 4px;border-top:1px solid rgba(255,255,255,.08)}
.public-footer-solutions__label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.public-footer-solutions__links{display:flex;gap:10px 20px;flex-wrap:wrap}
.public-footer-solutions__links a{color:var(--text2);font-size:13px;line-height:1.5;text-decoration:none}
.public-footer-solutions__links a:hover{color:var(--accent)}
.public-footer-solutions+.public-footer{border-top:none}
@media (max-width:720px){
  .public-footer-solutions{grid-template-columns:1fr;gap:12px;padding:22px 16px 4px}
  .public-footer-solutions__links{gap:8px 16px}
}