/* ==========================================================================
   KuduDoc — long-form legal layout + light marketing helpers

   Loaded by:
     terms.html, privacy.html   — the full long-form document layout
                                  (sticky table of contents + reading column)
     about.html, contact.html   — the SHARED HELPERS block only

   Everything else on those four pages composes existing components from
   components.css (.section, .container, .card, .grid, .split, .btn, .chip,
   .stat-row, .industry-card, .field, .input, .icon, .cta-band__row …).
   Tokens only — no raw colour values.
   ========================================================================== */


/* ==========================================================================
   1 · SHARED HELPERS
   Used by all four pages that link this file. .section-head is the site-wide
   convention that lives in each page's own stylesheet (home.css, trust.css,
   solutions.css, product.css …) rather than in components.css — restated
   here at equal cost, exactly as trust.css does, since we're told not to
   modify the files that already own it.
   ========================================================================== */

.section-head{ max-width: 640px; margin-bottom: var(--space-8); }

/* ---- Hero (gradient band, shared by all four pages) ---- */
.lg-hero{ position: relative; overflow: hidden; }
.lg-hero__glow{
  position: absolute; inset: -35% -10% -40% -10%;
  background: radial-gradient(55% 55% at 50% 0%, rgba(255,255,255,0.26), transparent 70%);
  z-index: 0; pointer-events: none;
}
.lg-hero__inner{ position: relative; z-index: 1; max-width: 780px; }
.lg-hero__inner--center{ margin-inline: auto; text-align: center; }
.lg-hero__inner--center .eyebrow{ justify-content: center; }
.lg-hero h1{ margin-top: var(--space-5); }
.lg-hero .display{ margin-top: var(--space-5); }
.lg-hero .lede{ margin-top: var(--space-5); max-width: 640px; }
.lg-hero__inner--center .lede{ margin-inline: auto; }

/* ---- Small shared rows / notes ---- */
.lg-btn-row{ display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-7); }
.lg-btn-row--center{ justify-content: center; }
.lg-chip-row{ display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-7); }
.lg-chip-row--center{ justify-content: center; }

.lg-meta{ margin-top: var(--space-6); font-size: var(--text-small); color: rgba(255,255,255,0.85); }
.lg-note{ margin-top: var(--space-5); font-size: var(--text-small); color: var(--text-tertiary); }
.lg-note-on-dark{ margin-top: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,0.85); }

.lg-text-link{ display: inline-flex; align-items: center; min-height: 24px; color: var(--blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lg-text-link:hover{ color: var(--blue-700); }
[data-surface="dark"] .lg-text-link,
[data-surface="gradient"] .lg-text-link{ color: var(--white); }

/* ---- Prose helpers inside cards and split bodies ---- */
.lg-prose{ color: var(--text-secondary); line-height: var(--leading-normal); }
.lg-prose + .lg-prose{ margin-top: var(--space-4); }

.lg-list{ display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.lg-list li{
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-body); color: var(--text-secondary); line-height: var(--leading-normal);
}
.lg-list li svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--blue-600); }
.lg-list strong{ color: var(--ink-900); font-weight: 600; }

/* ---- Card head (icon + title on one line) ---- */
.lg-card-head{ display: flex; align-items: center; gap: var(--space-3); }
.lg-card-icon{
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
}
.lg-card-icon svg{ width: 21px; height: 21px; }
.lg-card-icon--orange{ background: var(--orange-50); color: var(--orange-700); }
.lg-card-icon--success{ background: var(--success-50); color: var(--success-700); }
.lg-card-icon--warning{ background: var(--warning-50); color: var(--warning-700); }
.lg-card-body{ margin-top: var(--space-4); font-size: var(--text-small); color: var(--text-secondary); line-height: var(--leading-normal); }
.lg-card-body + .lg-card-body{ margin-top: var(--space-3); }
.lg-card-stack{ display: flex; flex-direction: column; gap: var(--space-5); }

/* ---- Honest callout (the "what we don't claim" box) ---- */
.lg-callout{
  display: flex; gap: var(--space-5); align-items: flex-start;
  padding: var(--space-7); border-radius: var(--radius-xl);
  background: var(--blue-50); border: 1px solid var(--blue-100);
}
.lg-callout--orange{ background: var(--orange-50); border-color: var(--orange-100); }
.lg-callout--tint{ background: var(--surface-sunken); border-color: var(--ink-100); }
.lg-callout__icon{
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--white); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
}
.lg-callout--orange .lg-callout__icon{ color: var(--orange-700); }
.lg-callout__body{ min-width: 0; }
.lg-callout__body p{ margin-top: var(--space-3); color: var(--text-secondary); line-height: var(--leading-normal); }
.lg-callout__body .link-arrow{ margin-top: var(--space-5); }
@media (max-width: 560px){
  .lg-callout{ flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
}

/* ---- Small mock used in the about-page split (a quietly edited clause) ---- */
.lg-mock-line{ height: 9px; border-radius: var(--radius-full); background: var(--ink-100); }
.lg-mock-line + .lg-mock-line{ margin-top: 11px; }
.lg-mock-line--short{ width: 62%; }
.lg-mock-clause{
  margin-top: var(--space-5); padding: var(--space-4);
  border-radius: var(--radius-md); border: 1px dashed var(--ink-200); background: var(--ink-50);
}
.lg-mock-label{
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
}
.lg-mock-clause p{ margin-top: 6px; font-size: var(--text-small); color: var(--ink-900); }
.lg-mock-was{ color: var(--text-tertiary); text-decoration: line-through; }
.lg-mock-now{ color: var(--danger-700); font-weight: 700; }
.lg-mock-foot{
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hairline);
}


/* ==========================================================================
   2 · CONTACT PAGE
   Two-column layout: form on the left, a stack of routing cards on the right.
   ========================================================================== */

.lg-contact{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8); align-items: start;
}
@media (max-width: 960px){
  .lg-contact{ grid-template-columns: minmax(0,1fr); gap: var(--space-7); }
}

.lg-form-card{ padding: var(--space-8); }
@media (max-width: 560px){ .lg-form-card{ padding: var(--space-6) var(--space-5); } }

.lg-form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); }
.lg-form-grid > .lg-span-2{ grid-column: 1 / -1; }
@media (max-width: 560px){
  .lg-form-grid{ grid-template-columns: minmax(0,1fr); }
  .lg-form-grid > .lg-span-2{ grid-column: auto; }
}

/* Textarea + select inherit .input, with the bits a bare .input can't cover. */
textarea.input{ min-height: 148px; resize: vertical; line-height: var(--leading-normal); }
select.input{
  appearance: none; -webkit-appearance: none;
  padding-right: var(--space-8); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
                    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.lg-form-actions{
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-hairline);
}
.lg-form-actions .lg-note{ margin-top: 0; flex: 1 1 220px; min-width: 0; }

.lg-prototype-note{
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--warning-50);
  font-size: var(--text-small); color: var(--warning-700); line-height: var(--leading-normal);
}
.lg-prototype-note svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }


/* ==========================================================================
   3 · LONG-FORM LEGAL DOCUMENT (terms.html, privacy.html)
   Sticky table of contents on the left, a ~68ch reading column on the right.
   ========================================================================== */

.lg-doc{
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--space-9); align-items: start;
}
@media (max-width: 1000px){
  .lg-doc{ grid-template-columns: minmax(0,1fr); gap: var(--space-7); }
}

/* ---- Table of contents ---- */
.lg-toc{ position: sticky; top: calc(var(--nav-height) + var(--space-5)); min-width: 0; }
@media (max-width: 1000px){
  .lg-toc{
    position: static; padding: var(--space-5);
    border: var(--border-hairline); border-radius: var(--radius-lg); background: var(--surface-sunken);
  }
}
.lg-toc__title{
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.lg-toc__list{ display: flex; flex-direction: column; border-left: 2px solid var(--ink-100); }
.lg-toc__list a{
  display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-4);
  margin-left: -2px; border-left: 2px solid transparent;
  font-size: var(--text-small); font-weight: 500; color: var(--text-secondary);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lg-toc__list a:hover{ color: var(--blue-600); border-left-color: var(--blue-300); }
.lg-toc__num{ color: var(--ink-300); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lg-toc__list a:hover .lg-toc__num{ color: var(--blue-600); }
.lg-toc__foot{ margin-top: var(--space-5); font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.5; }

/* ---- Reading column ---- */
.lg-body{ max-width: 68ch; min-width: 0; }

.lg-sec{ scroll-margin-top: calc(var(--nav-height) + var(--space-6)); }
.lg-sec + .lg-sec{ margin-top: var(--space-9); }
.lg-sec > h2{
  font-size: var(--text-h3); line-height: var(--leading-snug);
  padding-bottom: var(--space-3); border-bottom: var(--border-hairline);
}
.lg-sec > h2 .lg-num{ color: var(--blue-600); font-variant-numeric: tabular-nums; margin-right: .55rem; }
.lg-sec > h3{
  font-size: var(--text-h4); margin-top: var(--space-6);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}
.lg-sec p{ margin-top: var(--space-4); color: var(--text-secondary); line-height: var(--leading-normal); }
.lg-sec p strong{ color: var(--ink-900); font-weight: 600; }
.lg-sec:target > h2 .lg-num{ color: var(--orange-500); }

/* Bulleted / definition lists inside a section */
.lg-bullets{ margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.lg-bullets li{
  position: relative; padding-left: var(--space-5);
  color: var(--text-secondary); line-height: var(--leading-normal);
}
.lg-bullets li::before{
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-300);
}
.lg-bullets li strong{ color: var(--ink-900); font-weight: 600; }
.lg-bullets--warning li::before{ background: var(--warning-500); }
.lg-bullets--success li::before{ background: var(--success-500); }
.lg-bullets--danger li::before{ background: var(--danger-500); }

/* ---- "In short" summary box, opens the document ---- */
.lg-summary{
  padding: var(--space-7); border-radius: var(--radius-xl);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  margin-bottom: var(--space-9);
}
.lg-summary__title{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4); color: var(--ink-900);
}
.lg-summary__title svg{ width: 22px; height: 22px; color: var(--blue-600); }
.lg-summary .lg-bullets{ margin-top: var(--space-5); }
.lg-summary__foot{
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--blue-100);
  font-size: var(--text-small); color: var(--text-secondary); line-height: var(--leading-normal);
}
@media (max-width: 560px){ .lg-summary{ padding: var(--space-6) var(--space-5); } }

/* ---- Scope cards: what the seal does / does not mean ---- */
.lg-scope{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 700px){ .lg-scope{ grid-template-columns: minmax(0,1fr); } }
.lg-scope__card{ padding: var(--space-6); border-radius: var(--radius-lg); border: var(--border-hairline); background: var(--white); }
.lg-scope__card--does{ background: var(--success-50); border-color: transparent; }
.lg-scope__card--does-not{ background: var(--surface-sunken); border-color: transparent; }
.lg-scope__label{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.lg-scope__card--does .lg-scope__label{ color: var(--success-700); }
.lg-scope__card--does-not .lg-scope__label{ color: var(--text-tertiary); }
.lg-scope__label svg{ width: 16px; height: 16px; }
.lg-scope__card .lg-bullets{ margin-top: var(--space-4); }
.lg-scope__card--does .lg-bullets li::before{ background: var(--success-500); }
.lg-scope__card--does-not .lg-bullets li::before{ background: var(--ink-300); }

/* ---- Inline highlight panel (wet-ink exclusions, rights, etc.) ---- */
.lg-panel{
  margin-top: var(--space-6); padding: var(--space-6);
  border-radius: var(--radius-lg); background: var(--surface-sunken); border: var(--border-hairline);
}
.lg-panel--warning{ background: var(--warning-50); border-color: transparent; }
.lg-panel--blue{ background: var(--blue-50); border-color: transparent; }
.lg-panel__title{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-body); color: var(--ink-900); }
.lg-panel .lg-bullets{ margin-top: var(--space-4); }
.lg-panel p{ margin-top: var(--space-3); font-size: var(--text-small); }

/* ---- Definition rows (rights list, data list) ---- */
.lg-defs{ margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.lg-def{ padding-top: var(--space-4); border-top: var(--border-hairline); }
.lg-def:first-child{ padding-top: 0; border-top: none; }
.lg-def__term{ font-weight: 700; color: var(--ink-900); font-size: var(--text-body); }
.lg-def__desc{ margin-top: 4px; font-size: var(--text-small); color: var(--text-secondary); line-height: var(--leading-normal); }

/* ---- Closing "not legal advice" strip ---- */
.lg-disclaimer{
  margin-top: var(--space-9); padding: var(--space-6);
  border-radius: var(--radius-lg); background: var(--ink-50); border-left: 4px solid var(--orange-500);
}
.lg-disclaimer__title{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-body); color: var(--ink-900); }
.lg-disclaimer p{ margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-secondary); line-height: var(--leading-normal); }

/* ---- Back-to-top row at the end of the document ---- */
.lg-doc-foot{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: var(--border-hairline); font-size: var(--text-small); color: var(--text-tertiary);
}