/* ════════════════════════════════════════════════════════════════════
   TREKA CORP — COMPONENT LAYER (DIFT v2 LIGHT)
   Cards · feature cards · quotes · cross-promo · forms · pricing ·
   legal body · jump-nav · alerts · tables · contact card
   Per-pillar accent driven by --pa / --pa-dim / --pa-line on a parent.
   ════════════════════════════════════════════════════════════════════ */

/* ── Per-pillar accent helpers ── */
.acc-leads    { --pa: var(--leads-accent);    --pa-dim: rgba(126,107,12,0.07); --pa-line: rgba(126,107,12,0.20); }
.acc-rates    { --pa: var(--rates-accent);    --pa-dim: rgba(23,114,90,0.08);  --pa-line: rgba(23,114,90,0.22); }
.acc-policies { --pa: var(--policies-accent); --pa-dim: rgba(38,86,160,0.08);  --pa-line: rgba(38,86,160,0.22); }
.acc-close    { --pa: var(--close-accent);    --pa-dim: rgba(94,74,140,0.08);  --pa-line: rgba(94,74,140,0.22); }
.acc-writeoff { --pa: var(--writeoff-accent); --pa-dim: rgba(156,58,24,0.08);  --pa-line: rgba(156,58,24,0.22); }
.acc-one      { --pa: var(--one-accent);      --pa-dim: rgba(42,75,60,0.08);   --pa-line: rgba(42,75,60,0.22); }
.acc-builds   { --pa: var(--builds-accent);   --pa-dim: rgba(156,58,24,0.08);  --pa-line: rgba(156,58,24,0.22); }
.acc-gold     { --pa: var(--dift-gold);       --pa-dim: var(--dift-gold-dim);  --pa-line: var(--dift-gold-line); }
.acc-corp     { --pa: var(--corp-accent);     --pa-dim: var(--corp-accent-dim); --pa-line: var(--corp-accent-line); }

/* ════════════════════════════════════════════════════════════════════
   STANDARD CARD — white surface + 3px top accent stripe
   ════════════════════════════════════════════════════════════════════ */
.card {
  position: relative;
  background: var(--dift-surface);
  border: 1px solid var(--dift-border);
  border-top: 3px solid var(--pa, var(--dift-gold));
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.25s, border-color 0.2s;
}
.card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.09); }

/* Pillar card — taller, link-style, full content stack */
.pillar {
  display: flex; flex-direction: column;
  min-height: 480px;
  text-decoration: none; color: inherit;
}
.pillar-eyebrow {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--pa, var(--dift-gold));
  margin: 0 0 16px;
}
.pillar-name {
  font: 600 clamp(26px,3vw,36px)/1.06 var(--font-display);
  letter-spacing: -0.02em; color: var(--dift-text); margin: 0 0 16px;
}
.pillar-name em { font-style: italic; color: var(--pa, var(--dift-gold)); }
.pillar-desc {
  font: 400 15px/1.7 var(--font-body); color: var(--dift-text-2);
  margin: 0 0 24px; flex: 1; text-wrap: pretty;
}
.pillar-lines {
  list-style: none; margin: 0 0 22px; padding: 20px 0 0;
  border-top: 1px solid var(--dift-border);
  display: flex; flex-direction: column; gap: 2px;
}
.pillar-line {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  font: 500 12.5px/1.3 var(--font-body); color: var(--dift-text);
  transition: color 0.15s, transform 0.2s;
}
.pillar-line:hover { color: var(--pa, var(--dift-gold)); transform: translateX(3px); }
.pillar-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pa, var(--dift-gold)); flex-shrink: 0; }
.pillar-line .dsc { font: 300 11px/1.3 var(--font-body); color: var(--dift-text-3); margin-left: auto; text-align: right; }
.pillar-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pa, var(--dift-gold));
}
.pillar-cta svg { transition: transform 0.18s; }
.pillar:hover .pillar-cta svg { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════════════
   FEATURE / NUMBERED CARDS (on off-white)
   ════════════════════════════════════════════════════════════════════ */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } .feat-grid.two { grid-template-columns: repeat(2, 1fr); } }
.feat-card {
  background: var(--dift-bg2);
  border: 1px solid var(--dift-border);
  border-radius: 18px;
  padding: 44px 38px;
  display: flex; flex-direction: column;
  transition: box-shadow 0.25s, border-color 0.2s;
}
.feat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.07); border-color: var(--dift-border-md); }
.feat-card.on-surface { background: var(--dift-surface); }
.feat-num { font: 400 italic 14px/1 var(--font-display); color: var(--pa, var(--dift-gold)); margin: 0 0 22px; letter-spacing: 0.02em; }
.feat-card h4 { font: 600 clamp(20px,2vw,25px)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--dift-text); margin: 0 0 12px; }
.feat-card h4 em { font-style: italic; color: var(--pa, var(--dift-gold)); }
.feat-card p { font: 400 14.5px/1.7 var(--font-body); color: var(--dift-text-2); margin: 0; text-wrap: pretty; }

/* ════════════════════════════════════════════════════════════════════
   QUOTE / PULL-QUOTE CARD
   ════════════════════════════════════════════════════════════════════ */
.quote-card {
  background: var(--dift-surface);
  border: 1px solid var(--dift-border);
  border-left: 3px solid var(--pa, var(--dift-gold));
  border-radius: 16px;
  padding: 52px 44px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.quote-mark { font: 400 72px/0.6 var(--font-display); color: var(--pa, var(--dift-gold)); display: block; height: 40px; }
.quote-text {
  font: 500 clamp(20px,2.4vw,30px)/1.45 var(--font-display);
  letter-spacing: -0.012em; color: var(--dift-text); margin: 0 0 24px; max-width: 900px; text-wrap: pretty;
}
.quote-text em { font-style: italic; color: var(--pa, var(--dift-gold)); }
.quote-attr { font: 600 9px/1.4 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--dift-text-3); margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   CROSS-PROMO CARDS (pillar links)
   ════════════════════════════════════════════════════════════════════ */
.cross-strip { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px) { .cross-strip { grid-template-columns: 1fr 1fr; } .cross-strip.three { grid-template-columns: repeat(3,1fr); } }
.cross-card {
  border-radius: 14px; padding: 30px 28px;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s;
}
.cross-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.16); }
.cross-card.green { background: var(--green-card); color: var(--cream); }
.cross-card.gold  { background: var(--dift-gold); color: #FFFFFF; }
.cross-card.surface { background: var(--dift-surface); color: var(--dift-text); border: 1px solid var(--dift-border); border-top: 3px solid var(--pa, var(--dift-gold)); }
.cross-lbl { font: 600 10px/1 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; margin: 0 0 14px; opacity: 0.75; }
.cross-card h5 { font: 600 clamp(22px,2.2vw,27px)/1.15 var(--font-display); letter-spacing: -0.018em; margin: 0 0 10px; }
.cross-card h5 em { font-style: italic; }
.cross-card p { font: 300 13px/1.65 var(--font-body); margin: 0 0 20px; opacity: 0.82; flex: 1; }
.cross-arrow { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.cross-arrow svg { transition: transform 0.18s; }
.cross-card:hover .cross-arrow svg { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════════════
   STAT GRID
   ════════════════════════════════════════════════════════════════════ */
.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--dift-border);
  border: 1px solid var(--dift-border);
  border-radius: 16px; overflow: hidden;
}
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4,1fr); } }
.stat-grid.on-dark { background: rgba(250,240,230,0.08); border-color: rgba(250,240,230,0.08); }
.stat { background: var(--dift-surface); padding: 32px 28px; }
.stat-grid.on-dark .stat { background: rgba(255,255,255,0.02); }
.stat .v { font: 600 clamp(32px,4vw,50px)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--dift-text); margin: 0 0 10px; }
.stat-grid.on-dark .stat .v { color: var(--cream); }
.stat .v em { font-style: italic; color: var(--pa, var(--dift-gold)); }
.stat-grid.on-dark .stat .v em { color: #C8B765; }
.stat .l { font: 600 9px/1.4 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--dift-text-3); margin: 0; }
.stat-grid.on-dark .stat .l { color: rgba(250,240,230,0.45); }

/* ════════════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ════════════════════════════════════════════════════════════════════ */
.field-label { font: 600 10px/1.4 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dift-text-3); margin: 0 0 8px; display: block; }
.input {
  width: 100%;
  background: var(--dift-bg);
  border: 1px solid var(--dift-border);
  border-radius: 8px;
  padding: 13px 14px;
  font: 400 14px/1.2 var(--font-body);
  color: var(--dift-text);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.input::placeholder { color: var(--dift-text-3); }
.input:focus { border-color: var(--pa, var(--dift-gold)); background: var(--dift-surface); }
.form-card {
  background: var(--dift-bg2);
  border: 1px solid var(--dift-border);
  border-radius: 16px; padding: 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

/* Inline newsletter group */
.news-form { display: flex; gap: 10px; max-width: 480px; flex-wrap: wrap; }
.news-form .input { flex: 1; min-width: 220px; min-height: 50px; }
.news-form .btn { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════
   PRICING TIERS
   ════════════════════════════════════════════════════════════════════ */
.tier {
  background: var(--dift-bg2);
  border: 1px solid var(--dift-border);
  border-top: 3px solid transparent;
  border-radius: 16px;
  padding: 28px 24px;
}
.tier.featured { border-color: var(--pa-line); border-top-color: var(--pa); box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.tier-name { font: 400 28px/1.1 var(--font-display); letter-spacing: -0.018em; color: var(--dift-text); margin: 0 0 8px; }
.tier-price { font: 400 38px/1 var(--font-display); letter-spacing: -0.022em; color: var(--dift-text); margin: 0 0 20px; }
.tier-price span { font: 400 13px/1 var(--font-body); color: var(--dift-text-3); }
.tier-feats { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tier-feats li { display: flex; align-items: flex-start; gap: 10px; font: 400 12.5px/1.5 var(--font-body); color: var(--dift-text-2); }
.tier-check { width: 18px; height: 18px; border-radius: 5px; background: var(--pa-dim); border: 1px solid var(--pa-line); flex-shrink: 0; display: grid; place-items: center; color: var(--pa); margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════════
   LEGAL HERO (light, editorial)
   ════════════════════════════════════════════════════════════════════ */
.legal-hero { padding: calc(68px + 92px) 0 56px; background: var(--dift-bg); border-bottom: 1px solid var(--dift-border); }
.legal-hero h1 { font: 600 clamp(38px,6.5vw,72px)/1.04 var(--font-display); letter-spacing: -0.022em; margin: 18px 0 18px; color: var(--dift-text); }
.legal-hero h1 em { font-style: italic; color: var(--dift-gold); }
.legal-hero p { font: 400 15px/1.7 var(--font-body); color: var(--dift-text-2); margin: 0; max-width: 660px; text-wrap: pretty; }
.legal-hero.center { text-align: center; }
.legal-hero.center p { margin-left: auto; margin-right: auto; }
.legal-hero.center .hero-badges { justify-content: center; }

/* ════════════════════════════════════════════════════════════════════
   LEGAL BODY (privacy / terms / disclosures)
   ════════════════════════════════════════════════════════════════════ */
.legal-body { max-width: 760px; margin: 0 auto; padding: 80px 0; }
.legal-body h2 { font: 600 clamp(24px,2.6vw,30px)/1.2 var(--font-display); letter-spacing: -0.018em; margin: 52px 0 16px; color: var(--dift-text); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h2 em { font-style: italic; color: var(--dift-gold); }
.legal-body h3 { font: 600 11px/1.4 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dift-gold); margin: 32px 0 10px; }
.legal-body p, .legal-body li { font: 400 14.5px/1.75 var(--font-body); color: var(--dift-text-2); margin: 0 0 14px; }
.legal-body ul { padding-left: 22px; }
.legal-body li::marker { color: var(--dift-gold); }
.legal-body strong { color: var(--dift-text); font-weight: 600; }
.legal-body a { color: var(--dift-gold); border-bottom: 1px solid var(--dift-gold-line); transition: border-color 0.15s; }
.legal-body a:hover { border-color: var(--dift-gold); }
.legal-meta { font: 600 10px/1.4 var(--font-body); letter-spacing: 0.30em; text-transform: uppercase; color: var(--dift-gold); margin: 0; }

/* Licensing cells */
.lic-table { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--dift-border); border: 1px solid var(--dift-border); border-radius: 12px; overflow: hidden; margin: 24px 0 32px; }
@media (min-width: 600px) { .lic-table { grid-template-columns: 1fr 1fr; } }
.lic-cell { background: var(--dift-surface); padding: 20px 22px; }
.lic-cell .l { font: 600 9px/1.4 var(--font-body); letter-spacing: 0.30em; text-transform: uppercase; color: var(--dift-gold); margin: 0 0 8px; }
.lic-cell .v { font: 400 14px/1.5 var(--font-body); color: var(--dift-text); margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   JUMP NAV (sticky tabs for the legal hub)
   ════════════════════════════════════════════════════════════════════ */
.jump-nav { background: var(--dift-surface); border-bottom: 1px solid var(--dift-border); overflow-x: auto; scrollbar-width: none; position: sticky; top: 68px; z-index: 40; }
.jump-nav::-webkit-scrollbar { display: none; }
.jump-nav-inner { display: flex; gap: 0; min-width: max-content; padding: 0 clamp(16px,5vw,72px); }
.jump-nav a { display: block; padding: 15px 16px; font: 500 12.5px/1 var(--font-body); color: var(--dift-text-3); white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.jump-nav a:hover { color: var(--dift-text); border-bottom-color: var(--dift-border-md); }
.jump-nav a.active { color: var(--dift-gold); border-bottom-color: var(--dift-gold); }

/* ════════════════════════════════════════════════════════════════════
   ALERTS (compliance callouts)
   ════════════════════════════════════════════════════════════════════ */
.alert { border-radius: 10px; padding: 16px 18px; margin: 20px 0; font: 400 13.5px/1.65 var(--font-body); }
.alert .alert-title { font: 700 10px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.alert p { margin: 0; color: var(--dift-text-2); }
.alert p strong { color: var(--dift-text); }
.alert.gold { background: var(--dift-gold-dim); border: 1px solid var(--dift-gold-line); border-left: 3px solid var(--dift-gold); }
.alert.gold .alert-title { color: var(--dift-gold-mid); }
.alert.green { background: rgba(23,114,90,0.07); border: 1px solid rgba(23,114,90,0.20); border-left: 3px solid var(--rates-accent); }
.alert.green .alert-title { color: var(--rates-accent); }
.alert.red { background: rgba(156,58,24,0.06); border: 1px solid rgba(156,58,24,0.20); border-left: 3px solid var(--writeoff-accent); }
.alert.red .alert-title { color: var(--writeoff-accent); }

/* Embeddable disclosure block */
.disclosure-box { background: var(--dift-surface); border: 1px solid var(--dift-border); border-radius: 10px; padding: 16px 18px; margin: 20px 0; }
.disclosure-box .dl { font: 700 10px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--writeoff-accent); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.disclosure-box p { font: 400 12.5px/1.65 var(--font-body); color: var(--dift-text-3); margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   DATA TABLES
   ════════════════════════════════════════════════════════════════════ */
.data-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--dift-border); margin: 16px 0; }
.data-table-wrap table { width: 100%; border-collapse: collapse; min-width: 420px; }
.data-table-wrap thead { background: var(--dift-text); }
.data-table-wrap thead th { color: #FFFFFF; font: 600 10px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 14px; text-align: left; }
.data-table-wrap tbody td { font: 400 13px/1.55 var(--font-body); padding: 11px 14px; border-bottom: 1px solid var(--dift-border); vertical-align: top; color: var(--dift-text-2); }
.data-table-wrap tbody tr:last-child td { border-bottom: none; }
.data-table-wrap tbody tr:nth-child(even) td { background: var(--dift-bg); }
.data-table-wrap tbody strong { color: var(--dift-text); }
.data-table-wrap tbody a { color: var(--dift-gold); }

/* ════════════════════════════════════════════════════════════════════
   CONTACT CARD (dark, on a light page)
   ════════════════════════════════════════════════════════════════════ */
.contact-card { background: var(--dift-dark2); color: var(--cream); border-radius: 16px; padding: 36px 32px; margin-top: 52px; position: relative; overflow: hidden; }
.contact-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 90% 10%, rgba(126,107,12,0.12) 0%, transparent 70%); }
.contact-card > * { position: relative; }
.contact-card .eyebrow { color: #C8B765; margin-bottom: 12px; }
.contact-card h3 { font: 600 clamp(22px,2.6vw,28px)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--cream); margin: 0 0 20px; }
.contact-rows { display: flex; flex-direction: column; gap: 10px; }
.contact-row { display: flex; gap: 12px; font: 400 13.5px/1.5 var(--font-body); flex-wrap: wrap; }
.contact-row .label { color: rgba(250,240,230,0.40); font: 600 10px/1.5 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; width: 64px; flex-shrink: 0; padding-top: 2px; }
.contact-row .val { color: rgba(250,240,230,0.82); flex: 1; }
.contact-row a { color: #C8B765; }
.contact-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(250,240,230,0.10); font: 300 12px/1.65 var(--font-body); color: rgba(250,240,230,0.40); }

/* Hero badges (legal hub) */
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.badge { background: var(--dift-surface); border: 1px solid var(--dift-border); color: var(--dift-text-2); font: 500 11px/1 var(--font-body); letter-spacing: 0.02em; padding: 8px 13px; border-radius: 999px; }

/* Section header pairing (two-column) */
.split-header { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 52px; }
@media (min-width: 900px) { .split-header { grid-template-columns: 6fr 5fr; gap: 64px; align-items: end; } }
.split-header .lede { margin: 0; }

/* Three-up pillar grid */
.pillar-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1000px) { .pillar-grid { grid-template-columns: repeat(3,1fr); } }