/* ============================================================================
   practice.css -- Terms.Law /practice/* shared stylesheet
   Sergei Tokmakov, Esq. -- CA Bar 279869 -- Terms.Law
   ----------------------------------------------------------------------------
   Shared design for the six /practice/* practice-area landing pages.
   Extracted v20.1 (2026-05-17) from the inline <style> blocks that each page
   was carrying (5.6-5.8 KB per page, 6 pages = ~35 KB total). Inline blocks
   are now under the 500-byte threshold enforced by
   scripts/check-inline-css.js --all.

   All rules use firm.css tokens (var(--accent), var(--text-primary),
   var(--surface), etc.). The legacy-token-map shim in firm.css publishes
   --color-primary, --color-text, --color-card etc. as aliases of the
   canonical tokens, so the practice pages can use either name.

   Practice pages link this file after firm.css:
     <link rel="stylesheet" href="/shared/firm.css">
     <link rel="stylesheet" href="/shared/practice.css">

   Class families:
     .practice-page on <body>     -- enables this stylesheet's typography
     .wrap                        -- 880px content shell
     .breadcrumbs                 -- top breadcrumb row
     .lede                        -- intro paragraph above H2s
     .pill                        -- "Practice area" category pill
     .case-study                  -- anonymized-case card with colored bar
     .disclaimer                  -- amber inline disclaimer panel
     .stat-grid                   -- 2-up grid of stat cards (saas-contracts)
     .fee-row                     -- price-list row (label + price)
     .card                        -- generic content card (fee table wrapper)
     .cta-block / .cta-btn        -- bottom intake CTA
     .related                     -- "Related on Terms.Law" panel
     .footer-strip                -- dark navy footer band
     .signal-box                  -- "What I'm watching" callout
                                     (cross-border-us-asia only)

   Per-vertical accents live in the .practice-page--<vertical> body modifier
   so each vertical can use a different .case-study border color and .pill
   color without forking the CSS file.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Reset and root token map.
   Older inline blocks declared a 50+ token --color-* alias map. firm.css
   already publishes those via .legacy-token-map; we replicate the minimum
   subset here as a fallback so this stylesheet is self-sufficient when
   firm.css ships without the shim.
   ---------------------------------------------------------------------------- */
.practice-page *,
.practice-page *::before,
.practice-page *::after {
  box-sizing: border-box;
}

.practice-page {
  --color-primary: var(--accent);
  --color-primary-dark: var(--text-primary);
  --color-secondary: var(--accent);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-bg: var(--surface);
  --color-bg-dark: var(--text-primary);
  --color-border: var(--border);
  --color-card: var(--surface-elevated);
  --color-warning: #f59e0b;
  --color-success: #10b981;
  --accent-pacific: #0e7490;
  --border-radius: 8px;

  font-family: var(--font-family);
  color: var(--text-primary);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* ----------------------------------------------------------------------------
   Layout shell. 880px content column matching the v12/v16 vertical pages.
   ---------------------------------------------------------------------------- */
.practice-page .wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

.practice-page main {
  padding: 32px 0 64px;
}

/* ----------------------------------------------------------------------------
   Typography. Same ramp the other vertical pages use.
   ---------------------------------------------------------------------------- */
.practice-page h1 {
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.practice-page h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 36px 0 14px;
  line-height: 1.3;
}

.practice-page h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 22px 0 8px;
  color: var(--text-primary);
}

.practice-page p {
  margin-bottom: 14px;
  color: var(--text-primary);
  font-size: 1rem;
}

.practice-page ul,
.practice-page ol {
  margin: 0 0 14px 22px;
}

.practice-page ul li,
.practice-page ol li {
  margin-bottom: 6px;
  line-height: 1.55;
}

.practice-page .lede {
  font-size: 1.06rem;
  color: var(--text-primary);
}

/* ----------------------------------------------------------------------------
   Breadcrumbs row.
   ---------------------------------------------------------------------------- */
.practice-page .breadcrumbs {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.practice-page .breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}
.practice-page .breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   Category pill above H1. Default is indigo; per-vertical body modifiers
   override the background and color below.
   ---------------------------------------------------------------------------- */
.practice-page .pill {
  display: inline-block;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 6px;
}

.practice-page--payment-processor .pill { background: #fee2e2; color: #991b1b; }
.practice-page--ai-data .pill           { background: #ede9fe; color: #5b21b6; }
.practice-page--founder-equity .pill    { background: #fef3c7; color: #92400e; }
.practice-page--cross-border .pill      { background: #cffafe; color: #155e75; }
.practice-page--platform .pill          { background: #dcfce7; color: #166534; }

/* ----------------------------------------------------------------------------
   Card and case-study panels.
   ---------------------------------------------------------------------------- */
.practice-page .card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 20px;
  margin: 16px 0;
}

.practice-page .case-study {
  background: var(--surface-elevated);
  border-left: 4px solid var(--accent);
  padding: 16px 18px;
  margin: 14px 0;
  border-radius: 4px;
}
.practice-page .case-study h3 { margin-top: 0; }

.practice-page--ai-data .case-study        { border-left-color: var(--accent); }
.practice-page--founder-equity .case-study { border-left-color: #f59e0b; }
.practice-page--cross-border .case-study   { border-left-color: #0e7490; }
.practice-page--platform .case-study       { border-left-color: #10b981; }

/* ----------------------------------------------------------------------------
   Amber disclaimer panel.
   ---------------------------------------------------------------------------- */
.practice-page .disclaimer {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 0.92rem;
  color: var(--text-primary);
  border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   Stat grid. Two-up on desktop, single column on mobile. saas-contracts
   uses this for the indicators row.
   ---------------------------------------------------------------------------- */
.practice-page .stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.practice-page .stat-grid .card { margin: 0; }

/* ----------------------------------------------------------------------------
   Fee row. Used inside the .card that wraps the "typical fee ranges" list.
   ---------------------------------------------------------------------------- */
.practice-page .fee-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.practice-page .fee-row:last-child { border-bottom: none; }
.practice-page .fee-row .label {
  font-weight: 600;
  flex: 1 1 60%;
}
.practice-page .fee-row .price {
  font-weight: 700;
  color: var(--accent);
  flex: 0 0 auto;
}

/* ----------------------------------------------------------------------------
   Bottom intake CTA. Dark navy gradient. cross-border vertical uses a
   teal-tinted gradient that we ship as a modifier.
   ---------------------------------------------------------------------------- */
.practice-page .cta-block {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d3548 100%);
  color: #fff;
  border-radius: var(--border-radius);
  padding: 24px;
  margin: 28px 0;
}
.practice-page .cta-block h2 {
  color: #fff;
  margin-top: 0;
}
.practice-page .cta-block p { color: #d1d5db; }

.practice-page .cta-block textarea,
.practice-page .cta-block input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 10px;
  min-height: 44px;
}
.practice-page .cta-block textarea {
  min-height: 120px;
  resize: vertical;
}

.practice-page .cta-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 0.98rem;
  min-height: 44px;
}
.practice-page .cta-btn:hover { background: var(--text-primary); }

.practice-page--cross-border .cta-block {
  background: linear-gradient(135deg, #1a1a2e 0%, #0c4a6e 100%);
}
.practice-page--cross-border .cta-btn { background: #0e7490; }
.practice-page--cross-border .cta-btn:hover { background: #0284c7; }

/* ----------------------------------------------------------------------------
   Related-resources panel at the bottom of the page.
   ---------------------------------------------------------------------------- */
.practice-page .related {
  margin-top: 28px;
  padding: 20px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
}
.practice-page .related a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.practice-page .related a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
   Cross-border signal box. Light cyan callout reserved for the
   cross-border-us-asia page's "What I'm watching" panels.
   ---------------------------------------------------------------------------- */
.practice-page .signal-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #7dd3fc;
  border-radius: var(--border-radius);
  padding: 18px;
  margin: 18px 0;
}
.practice-page .signal-box h3 {
  margin-top: 0;
  color: #075985;
}

/* ----------------------------------------------------------------------------
   Footer strip. Dark navy band below the related panel.
   ---------------------------------------------------------------------------- */
.practice-page .footer-strip {
  background: var(--text-primary);
  color: #cbd5e1;
  padding: 28px 0;
  margin-top: 40px;
  font-size: 0.9rem;
}
.practice-page .footer-strip a {
  color: #93c5fd;
  text-decoration: none;
}
.practice-page .footer-strip a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
   Mobile breakpoint. Collapse the saas stat grid and tighten <main> padding.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .practice-page main { padding: 22px 0 48px; }
  .practice-page .stat-grid { grid-template-columns: 1fr; }
}
