/*
V7-HEADER
Title:    Buktika - Legal Page Styles
File:     legal.css
Path:     /assets/css/legal/legal.css
Version:  v5.9.1
Issued:   2026-03-18
Author:   Buktika Command Team
Owner:    Buktika - Binka
Purpose:  Legal page — token consumer. Compliant with BKT-PIL-13 v1.0.0,
          _support-template.css v1.1.0, BKT-DOC-02 v2.0.0, www-B 350-line ceiling.
          Shared by: legal.html, privacy-policy.html, terms-of-service.html, cookie-policy.html

          Palette (BKT-PIL-13 §2):
          - page-primary   = --sdx-color-mama-gold    #c8861a
          - page-secondary = --sdx-color-green-deep    #2e5d3a
          - page-accent    = --sdx-color-stem-olive    #464820
          - page-bg        = #f8f6f0 — exception permitted per PIL-13 §2
          - tagline        = --sdx-color-mama-amber    #f5b014  (PIL-13 §4)
          - Button gradient: linear-gradient(135deg, var(--page-primary) → var(--page-accent))

          Permitted colour exceptions (PIL-13 §11):
          - .warning-box border:   --sdx-color-coral
          - .tower-top border:     --sdx-color-coral
          - .tower-funders border: --sdx-color-purple-deep
          - .legal-doc-card/.legal-doc-icon: --sdx-color-purple-deep

Version:  v5.8.0
Issued:   2026-03-24
Author:   Buktika Command Team
Owner:    Buktika - Binka
Purpose:  Legal page — token consumer. Compliant with BKT-PIL-13 v1.0.0,
          _support-template.css v1.1.0, BKT-DOC-02 v2.0.0, www-B 350-line ceiling.
          Shared by: legal.html, privacy-policy.html, terms-of-service.html, cookie-policy.html,
          viridians-legal-notice.html

          Palette (BKT-PIL-13 §2):
          - page-primary   = --sdx-color-mama-gold    #c8861a
          - page-secondary = --sdx-color-green-deep    #2e5d3a
          - page-accent    = --sdx-color-stem-olive    #464820
          - page-bg        = #f8f6f0 — exception permitted per PIL-13 §2
          - tagline        = --sdx-color-mama-amber    #f5b014  (PIL-13 §4)
          - Button gradient: linear-gradient(135deg, var(--page-primary) → var(--page-accent))

          Permitted colour exceptions (PIL-13 §11):
          - .warning-box border:   --sdx-color-coral
          - .tower-top border:     --sdx-color-coral
          - .tower-funders border: --sdx-color-purple-deep
          - .legal-doc-card/.legal-doc-icon: --sdx-color-purple-deep

ChangeLog:
  v5.8.0 (2026-03-24): doc-links grid fixed — 2×2 layout.
    - .doc-links: repeat(auto-fit, minmax(280px,1fr)) → repeat(2,1fr)
      auto-fit resolved to 3 columns at desktop widths, dropping 4th card to a
      solo second row (3+1). Four doc cards = strict 2×2. Same fix as v5.4.0
      applied to .cards and v5.5.0 applied to .tower-pillars.
      Mobile collapse to 1fr already present at max-width: 600px via .cards rule —
      .doc-links responsive rule added at max-width: 600px to match.
    - viridians-legal-notice.html added to shared-by list.
  v5.7.0 (2026-03-18): border-left-width: 4px added to .card, .principle-card, .tower-card, .doc-card.
    All base card rules used border: 1.5px solid (uniform all sides) — accent left border was
    invisible (same weight as other sides). 4px width makes the pillar identity signal render.
    Tower card positional variants (tower-top: border-top coral, tower-foundation: border-bottom
    primary) reset border-left-width to 1.5px. Design rationale: the positional accent IS the
    identity signal on these cards — directional position encodes architectural meaning (top/bottom).
    Two competing 4px edges undermines the metaphor. One dominant accent edge per card.
  v5.6.0 (2026-03-18): global.css v3.16.0 compliance + DOC-02/DOC-03 violations.
    V1 REMOVED:  padding-bottom: 0.75rem from .sdx-card-section h2 — owned by global.css.
    V2 REMOVED:  border-bottom: 2px solid var(--page-accent) from .sdx-card-section h2 —
                 global.css v3.16.0 owns canonically with var(--page-primary).
    V3 SELECTOR: .sdx-card-section h2 and .h2 split into two rules. .h2 utility class
                 is NOT covered by global.css — retains border-bottom and padding-bottom.
    V4 FIXED:    .important-box: border-left: 4px solid → border: 1px solid var(--border).
                 DOC-03 §16.2 HARD RULE: no border-left accent on callout boxes.
    V5 FIXED:    .warning-box: border-left: 4px solid → border: 1px solid var(--sdx-color-coral).
                 PIL-13 §11 permits coral colour; DOC-03 §16.2 governs weight/pattern (1px all sides).
    V6 FIXED:    Dark mode: .important-box + .warning-box removed from card dark surface rule.
                 Added dedicated dark callout rule: rgba(245,176,20,0.07) + rgba(245,176,20,0.18)
                 border per ai.md HARD RULE.
    V7 FIXED:    .headline: font-family, font-weight, line-height removed per DOC-02 §3.3.1 HARD RULE.
                 font-size, margin, color, text-shadow retained (permitted overrides).
    V8 FIXED:    .tagline: font-family, font-size, font-weight, margin removed per DOC-02 §3.3.2.
                 color and text-shadow retained (color is the only permitted page override).
    V9 FIXED:    .hero: position:relative, z-index:2, max-width:1400px, margin:0 auto removed
                 per DOC-02 §3.2. Non-canonical properties on .hero.
  v5.5.0 (2026-03-18): Tower pillars grid fixed — 2×2 layout.
    - .tower-pillars: repeat(auto-fit, minmax(250px, 1fr)) → repeat(2, 1fr)
      Same root cause as .cards — auto-fit resolved to 3 columns at desktop,
      dropping 4th pillar card to a solo row. 4 pillars = strict 2×2.
      Mobile collapse to 1fr already present at max-width: 768px.
  v5.4.0 (2026-03-18): Cards grid fixed — 2×2 layout.
    - .cards: repeat(auto-fit, minmax(280px, 1fr)) → repeat(2, 1fr)
      auto-fit with 280px minimum was resolving to 3 columns at desktop widths,
      dropping the 4th card to a lonely second row (3+1). Both .cards instances
      in legal.html carry exactly 4 cards — strict 2 columns is correct.
    - @media (max-width: 600px): .cards collapses to 1fr single column.
  v5.3.0 (2026-03-18): Arrow violation fixed per DOC-03 §5.
    - .btn-doc: gap:0.5rem removed (was spacing for arrow glyph)
    - .btn-doc: gap:0.75rem hover removed (was arrow-widening animation)
    - transition: gap property removed (no longer needed)
    - Corresponding → removed from all btn-doc labels in legal.html + cookie-policy.html
    DOC-03 §5: "Arrows are redundant." Button gradient/shape communicates affordance.
  v5.2.0 (2026-03-18): Hero compliance fixes.
    - .intro: font-size:1.125rem override removed — global.css owns var(--lead) per DOC-02 §3.3.3
    - .intro: max-width:800px (px) → min(100%, 45rem) per DOC-02 §3.3.3
    - .hero-actions: gap:1.5rem → 1rem per DOC-02 §3.3.5
    - .hero-actions: margin-top:2.5rem added (was absent) per DOC-02 §3.3.5
    - .btn-hero-primary: inset white ring added: box-shadow inset 0 0 0 2px rgba(255,255,255,0.80)
      per DOC-03 §4.1 HARD RULE — required to lift button off hero photography
    - .btn-hero-secondary: color:#ffffff added — DOC-03 §4.2 canonical requires white text;
      dark text was rendering due to global cascade gap
  v5.1.0 (2026-03-18): Two violations fixed from visual review.
    - .meta-box: border-left:4px only → full PIL-13 §6 card treatment:
      border:1.5px solid var(--page-accent), border-radius:0.75rem, box-shadow:0 2px 8px rgba(0,0,0,0.04)
    - table th: linear-gradient (button gradient) → flat var(--page-accent)
      Gradients reserved for buttons only per DOC-03 §3. th is not a button.
      #ffffff on --page-accent (#464820) = 8.2:1 AAA per PIL-13 §10.
  v5.0.0 (2026-03-18): Full compliance rewrite.
    - Sessions 1-3 fixes preserved (tokens, dark mode selector, glass button, Tippy dedup,
      card border 1.5px, ghost button 1.5px/transparent, link hover brightness, font tokens,
      hero var(--hero-min), background-image longhand)
    - Section 5: sdx-card-section override + nth-of-type alternation REMOVED.
      global.css owns all section surfaces per _support-template §5 + www-B HARD RULE.
    - Section 4: h2 border-bottom var(--page-primary) -> var(--page-accent)
    - Hero hover: translateY(-2px) -> translateY(-3px) per PIL-13 §5.1
    - All border-radius px -> rem (12px->0.75rem, 8px->0.5rem)
    - .principle-card + .tower-card: 1px solid var(--border) -> 1.5px solid var(--page-accent)
    - .doc-card: gradient background -> var(--card); border -> 1.5px solid var(--page-accent)
    - .contract-card: raw rgba -> var(--page-primary) (no §11 exception)
    - .legal-doc-card: raw rgba -> var(--sdx-color-purple-deep) per PIL-13 §11
    - Privacy/Blockchain aria-label selectors removed (not a PIL-13 §11 exception)
    - .tower-info-pill: gradient -> flat rgba; raw rgba border -> var(--page-accent)
    - .important-box/.warning-box: gradient -> flat rgba per ai.md callout HARD RULE
    - .btn-cta-secondary:hover: raw rgba background removed
    - .meta-box a border-bottom: raw rgba -> var(--page-accent)
    - Line count reduced from 965 to under 350 per www-B HARD RULE
  v4.1.0 (2026-03-17): Previous compliance pass.

ISO Reference: ISO/IEC 15897, ISO 27001
Source Naming Standard: Buktika v7.1 (ISO Aligned)
License:  © Buktika, 2026. All rights reserved.
*/

/* 0) Header and dependency notes
   depends on:
   - /assets/css/global.css          (canonical tokens + shared components)
   - /assets/css/themes.css          ([data-theme] alias layer)
   - /assets/css/partials/header.css (lifted automatically by includes.js — NOT linked in <head>)
   - /assets/css/partials/footer.css (footer partial)

   Support page rules (_support-template.css v1.1.0):
   - Alternating tint pattern RETIRED. .sdx-card-section surfaces owned by global.css.
   - Hero: no overlay. Bottom vignette only. Opacity <= 0.25.
   - Tagline: --sdx-color-mama-amber (PIL-13 §4).
   - @media (prefers-color-scheme: dark) MUST NOT appear. Use [data-theme="dark"] only.
*/

/* ======================================================================================================
   1) Page variable binding — BKT-PIL-13 v1.0.0 §2 (LOCKED)
   ====================================================================================================== */

.page-legal {
  --page-bg:           #f8f6f0;                              /* exception permitted — PIL-13 §2   */
  --page-primary:      var(--sdx-color-mama-gold);           /* #c8861a brass                     */
  --page-secondary:    var(--sdx-color-green-deep);          /* #2e5d3a forest                    */
  --page-accent:       var(--sdx-color-stem-olive);          /* #464820 iron                      */
  --page-depth:        var(--sdx-color-stem-olive);          /* universal grounding               */
  --page-dark-base:    var(--sdx-color-livingtower-dark-base);
  --page-dark-surface: var(--sdx-color-livingtower-dark-surface);

  --hero-image:         url('/assets/images/legal/legal-hero.webp');
  --hero-vignette-from: rgba(70, 72, 32, 0.18);              /* olive-dark — PIL-13 §3            */
  --hero-vignette-to:   rgba(70, 72, 32, 0);
}

/* ======================================================================================================
   2) Base page surfaces
   ====================================================================================================== */

.page-legal {
  background: var(--page-bg);
  color: var(--fg);
}

/* ======================================================================================================
   3) Hero — bottom vignette only. No overlay. PIL-13 §3.
   ====================================================================================================== */

.page-legal .hero-wrap {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  min-height: var(--hero-min);
}

.page-legal .hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--hero-vignette-from) 0%,
    var(--hero-vignette-to)   32%
  );
}

.page-legal .hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  min-height: var(--hero-min);
  /* position, z-index, max-width, margin removed — non-canonical per DOC-02 §3.2 */
}

.page-legal .hero-grid { max-width: 900px; text-align: center; }

.page-legal .headline {
  font-size: clamp(2.5rem, 5vw, 4rem);
  /* font-family, font-weight, line-height owned by global.css — DOC-02 §3.3.1 HARD RULE */
  margin: 0 0 1.5rem;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.80), 0 2px 8px rgba(0, 0, 0, 0.60);
}

/* Tagline — mama-amber per PIL-13 §4. color is the only permitted page override per DOC-02 §3.3.2. */
.page-legal .tagline {
  color: var(--sdx-color-mama-amber);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.90), 0 2px 6px rgba(0, 0, 0, 0.70);
}

/* .intro: font-size and line-height owned by global.css (var(--lead)). DOC-02 §3.3.3 MUST NOT override. */
.page-legal .intro {
  color: #ffffff;
  max-width: min(100%, 45rem);
  margin: 0 auto 2rem;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 1.00), 0 2px 8px rgba(0, 0, 0, 0.90);
}

.page-legal .hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 2.5rem;
}

/* Shared hero button geometry */
.page-legal .btn-hero-primary,
.page-legal .btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  font-family: var(--text-font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  min-height: 3rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}

/* Hero primary — PIL-13 §5.1 + DOC-03 §4.1: inset white ring required */
.page-legal .btn-hero-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-accent) 100%);
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.80),
              0 4px 12px rgba(200, 134, 26, 0.40);
}

.page-legal .btn-hero-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.80),
              0 6px 20px rgba(200, 134, 26, 0.55);
}

/* Hero secondary: canonical glass per DOC-03 §4.2.
   color:#ffffff enforced here — PIL-13 §5.3 prohibits colour overrides but
   this enforces the canonical spec value, not a page-specific override. */
.page-legal .btn-hero-secondary {
  color: #ffffff;
}

/* ======================================================================================================
   4) Typography overrides
   ====================================================================================================== */

/* h2 element: border-bottom + padding-bottom owned by global.css v3.16.0 — var(--page-primary). MUST NOT override. */
.page-legal .sdx-card-section h2 {
  font-family: var(--headline-font);
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 1.5rem;
}

/* .h2 utility class: NOT covered by global.css — retains border-bottom/padding-bottom explicitly. */
.page-legal .h2 {
  font-family: var(--headline-font);
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--page-accent);
}

/* audit-note — replaces former inline style="margin-top:8px" */
.page-legal .audit-note { margin-top: 0.5rem; }

/* ======================================================================================================
   5) Sections and alternation
   Alternating tint pattern RETIRED per _support-template.css v1.1.0 §5.
   ====================================================================================================== */

/* none — .sdx-card-section in global.css handles all section surfaces */

/* ======================================================================================================
   6) Cards and tiles — PIL-13 §6: card bg var(--card), border 1.5px solid var(--page-accent)
   ====================================================================================================== */

/* Base card rule — PIL-13 §6 */
.page-legal .card,
.page-legal .principle-card,
.page-legal .tower-card {
  background: var(--card);
  border: 1.5px solid var(--page-accent);
  border-left-width: 4px;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.30s ease, box-shadow 0.30s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.page-legal .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* strict 2×2 — both .cards instances carry 4 cards */
  gap: 2rem;
}

.page-legal .card h3,
.page-legal .principle-card h3,
.page-legal .tower-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--page-primary);
  margin: 0 0 0.75rem;
}

.page-legal .card ul.claims {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-legal .card ul.claims li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.7;
  color: var(--fg);
}

.page-legal .card ul.claims li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--page-primary);
  font-weight: 600;
}

/* Doc cards — white card, 1.5px accent border per PIL-13 §6 */
.page-legal .doc-card {
  background: var(--card);
  border: 1.5px solid var(--page-accent);
  border-left-width: 4px;
  border-radius: 0.75rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.30s ease, box-shadow 0.30s ease;
}

.page-legal .doc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.page-legal .doc-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 0.75rem;
}

.page-legal .doc-card p {
  font-size: var(--body);
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 1.5rem;
  flex: 1;
}

.page-legal .doc-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* strict 2×2 — four doc cards. auto-fit minmax(280px,1fr) resolved to 3 cols at desktop, dropping 4th card to a solo row. */
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Colour-coded border-left variants — PIL-13 §11 documented exceptions */
.page-legal .legal-doc-card  { border-left: 4px solid var(--sdx-color-purple-deep); }
.page-legal .contract-card   { border-left: 4px solid var(--page-primary); }

/* Tower card section accents — PIL-13 §11.
   border-left-width reset to 1.5px on positional variants: the directional accent IS the
   identity signal (top=coral, bottom=gold, left=purple). Two competing 4px edges undermines
   the architectural metaphor. One dominant accent edge per card. */
.page-legal .tower-top .tower-card        { border-top:    4px solid var(--sdx-color-coral);       border-left-width: 1.5px; }
.page-legal .tower-funders .tower-card    { border-left:   4px solid var(--sdx-color-purple-deep); }
.page-legal .tower-foundation .tower-card { border-bottom: 4px solid var(--page-primary);          border-left-width: 1.5px; }

/* Tower layout */
.page-legal .tower-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  margin-bottom: 3rem;
}

.page-legal .tower-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* strict 2×2 — 4 pillar cards */
  gap: 1.5rem;
  margin: 2rem 0;
}

.page-legal .tower-top,
.page-legal .tower-foundation,
.page-legal .tower-funders { margin: 2rem 0; }

/* ======================================================================================================
   7) Buttons and CTAs — PIL-13 §5
   ====================================================================================================== */

/* CTA band override — PIL-13 §5.1 gradient on sdx-btn-primary */
.page-legal .sdx-btn-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-accent) 100%);
  color: #ffffff;
}

/* Document CTA + inline primary — same PIL-13 §5.1 gradient, shared rule */
.page-legal .btn-doc,
.page-legal .btn-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  font-family: var(--text-font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  min-height: 3rem;
  line-height: 1.2;
  cursor: pointer;
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-accent) 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(200, 134, 26, 0.30);
  transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
  align-self: flex-start;
}

.page-legal .btn-doc:hover,
.page-legal .btn-cta-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(200, 134, 26, 0.45);
}

/* Ghost secondary — PIL-13 §5.4 */
.page-legal .btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-family: var(--text-font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  min-height: 3rem;
  line-height: 1.2;
  cursor: pointer;
  background: transparent;
  color: var(--page-primary);
  border: 1.5px solid var(--page-primary);
  transition: transform 0.28s ease, filter 0.28s ease;
}

.page-legal .btn-cta-secondary:hover {
  filter: brightness(0.88);
  transform: translateY(-3px);
}

.page-legal .cta-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ======================================================================================================
   8) Page modules
   ====================================================================================================== */

/* Meta box */
/* Meta box — full PIL-13 §6 card treatment: white bg, 1.5px accent border, shadow */
.page-legal .meta-box {
  background: var(--card);
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1.5px solid var(--page-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 3rem;
}

.page-legal .meta-box a {
  color: var(--page-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--page-accent);
  transition: filter 0.28s ease;
}

.page-legal .meta-box a:hover { filter: brightness(0.85); }

/* Tower info pill */
.page-legal .tower-info-pill {
  background: rgba(200, 134, 26, 0.06);     /* PIL-13 §6 decorative brass-6% — boundary = card edge */
  border: 1px solid var(--page-accent);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--fg);
  max-width: 25rem;
}

/* Callout boxes — DOC-03 §16.2 HARD RULE: flat rgba tint, 1px solid var(--border) all sides.
   No border-left accent. No gradient. No box-shadow. */
.page-legal .important-box {
  background: rgba(120, 113, 108, 0.08);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 2rem 0;
}

/* PIL-13 §11 exception: coral border colour permitted. DOC-03 §16.2 governs width/pattern (1px all sides). */
.page-legal .warning-box {
  background: rgba(120, 113, 108, 0.08);
  border: 1px solid var(--sdx-color-coral);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 2rem 0;
}

/* Icon containers */
.page-legal .principle-icon {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 134, 26, 0.06);
  border-radius: 0.75rem;
  padding: 0.625rem;
}

.page-legal .contract-icon,
.page-legal .legal-doc-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.page-legal .contract-icon  { background: rgba(200, 134, 26, 0.08); }
.page-legal .legal-doc-icon { background: rgba(75, 42, 86, 0.08); }   /* purple-deep tint — PIL-13 §11 */

/* Section header / pillar header layouts */
.page-legal .section-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.page-legal .section-icon,
.page-legal .pillar-icon {
  width: 6.25rem;
  height: 6.25rem;
  flex-shrink: 0;
  object-fit: contain;
}

.page-legal .pillar-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Contact info links — PIL-13 §7 */
.page-legal .contact-info a {
  color: var(--page-accent);
  text-decoration: none;
}

.page-legal .contact-info a:hover {
  filter: brightness(0.85);
  text-decoration: underline;
}

/* Tables */
.page-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: var(--card);
}

.page-legal table th {
  background: var(--page-accent);           /* flat solid — gradients reserved for buttons only per DOC-03 §3 */
  color: #ffffff;
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: var(--body);
}

.page-legal table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: var(--body);
}

.page-legal table tr:last-child td { border-bottom: none; }

/* ======================================================================================================
   9) Media queries
   ====================================================================================================== */

@media (max-width: 768px) {
  .page-legal .hero { padding: 4rem 2rem; }
  .page-legal .tower-header     { grid-template-columns: 1fr; }
  .page-legal .tower-info-pill  { max-width: 100%; }
  .page-legal .tower-pillars    { grid-template-columns: 1fr; }
  .page-legal .hero-actions,
  .page-legal .cta-actions      { flex-direction: column; width: 100%; }
  .page-legal .btn-hero-primary,
  .page-legal .btn-hero-secondary,
  .page-legal .btn-cta-primary,
  .page-legal .btn-cta-secondary { width: 100%; }
}

@media (max-width: 600px) {
  .page-legal .cards,
  .page-legal .doc-links { grid-template-columns: 1fr; }  /* 2×2 → single column on small screens */
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ======================================================================================================
   10) Dark mode — [data-theme="dark"] ONLY. @media prefers-color-scheme MUST NOT appear. PIL-13 §8.
   ====================================================================================================== */

[data-theme="dark"] .page-legal {
  background: var(--page-dark-base);
  color: var(--sdx-color-ui-dark-text);
}

[data-theme="dark"] .page-legal .card,
[data-theme="dark"] .page-legal .principle-card,
[data-theme="dark"] .page-legal .tower-card,
[data-theme="dark"] .page-legal .doc-card,
[data-theme="dark"] .page-legal .meta-box {
  background: var(--page-dark-surface);
}

/* Callout boxes: canonical dark treatment per ai.md HARD RULE. NOT page-dark-surface. */
[data-theme="dark"] .page-legal .important-box,
[data-theme="dark"] .page-legal .warning-box {
  background: rgba(245, 176, 20, 0.07);
  border-color: rgba(245, 176, 20, 0.18);
}

[data-theme="dark"] .page-legal .section-icon,
[data-theme="dark"] .page-legal .pillar-icon {
  padding: 0.6rem;
  border: 1px solid rgba(from var(--page-primary) r g b / 0.30);
  border-radius: 50%;
  background: var(--sdx-color-warm-white);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
}

/* Legal documents contain long native lists. Explicit semantic colours keep
   translated text fragments, strong labels, inline spans and code from falling
   back to browser black on the dark section surface. */
[data-theme="dark"] .page-legal .sdx-card-section :where(li, dd) {
  color: var(--muted);
}

[data-theme="dark"] .page-legal .sdx-card-section :where(li, dd) :where(strong, span, code) {
  color: inherit;
}

[data-theme="dark"] .page-legal :where(.meta-box, .contact-info, .sdx-card-section) a:not([class*="btn"]) {
  color: var(--sdx-color-mama-amber);
  border-bottom-color: rgba(245, 176, 20, 0.45);
}