/* ════════════════════════════════════════════════════════════════════════
   BidClarity Tier-Demo — Interactive in-page product preview
   ────────────────────────────────────────────────────────────────────────
   Lives on index.html (full-width section between hero and logo strip)
   and pricing.html (between tier cards and customer-stories strip).

   Reuses customers.css tokens:
     --paper / --ink / --paper-rule    (editorial paper-on-navy)
     --tier-scout / -intel / -cmd / -ent
     --cap-intelligence / -tier3 / -agent / -fulfill
     --ease / --dur-fast/base/slow
     --container-wide

   New tokens (additive only):
     --tier-demo-locked         (locked-item gray)
     --tier-demo-locked-bg      (locked-row warm overlay)

   Coexistence with hero signal-card:
     - Signal-card is small (460px), navy-surface, dense; auto-rotates
     - Tier-demo is full-width, paper-on-navy, editorial; user-driven
     - Different eyebrows: signal "Live sample" vs tier-demo "See the product"
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --tier-demo-locked:#3F4759;
  --tier-demo-locked-bg:rgba(245,158,11,0.06);
  --tier-demo-banner-bg:linear-gradient(135deg,#065F46,#00875A);
}

/* ────────────────────────────────────────────────────────────────────────
   SECTION CONTAINER (full-width within navy frame)
   ──────────────────────────────────────────────────────────────────────── */
.tier-demo-section{position:relative;z-index:1;background:var(--navy);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:72px 24px;}
.tier-demo-inner{max-width:var(--container-wide);margin:0 auto;}

.tier-demo-header{text-align:center;margin-bottom:36px;}
.tier-demo-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:14px;}
.tier-demo-eyebrow::before{content:'';width:6px;height:6px;background:var(--teal);border-radius:50%;}
.tier-demo-h{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,40px);line-height:1.15;letter-spacing:-0.025em;color:var(--text-primary);margin-bottom:14px;max-width:760px;margin-left:auto;margin-right:auto;}
.tier-demo-h em{font-style:normal;color:var(--teal);}
.tier-demo-sub{font-size:16px;color:var(--text-secondary);line-height:1.7;max-width:620px;margin:0 auto;}

/* ────────────────────────────────────────────────────────────────────────
   THE CARD (paper-on-navy editorial canvas)
   ──────────────────────────────────────────────────────────────────────── */
.tier-demo-card{background:var(--paper);color:var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.32),0 0 0 1px rgba(255,255,255,0.04);position:relative;}

/* ── Story bar (top strip; persona context + Plain-English toggle) ── */
.tier-demo-story-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 28px;background:#FFFFFF;border-bottom:1px solid var(--paper-rule);}
.tier-demo-story-text{font-family:'Fraunces',serif;font-size:15px;line-height:1.55;color:var(--ink);font-weight:400;letter-spacing:-0.005em;flex:1;min-width:0;}
.tier-demo-story-text strong{font-weight:600;color:var(--ink);}
.tier-demo-jargon-toggle{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;}
.tier-demo-jargon-toggle-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);font-weight:700;}
.tier-demo-jargon-switch{position:relative;display:inline-block;width:42px;height:22px;background:var(--paper-rule);border-radius:100px;cursor:pointer;transition:background var(--dur-fast) var(--ease);border:none;padding:0;}
.tier-demo-jargon-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#FFFFFF;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.18);transition:transform var(--dur-base) var(--ease);}
.tier-demo-jargon-switch[aria-pressed="true"]{background:#065F46;}
.tier-demo-jargon-switch[aria-pressed="true"]::after{transform:translateX(20px);}
.tier-demo-jargon-switch:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}
@media(max-width:640px){
  .tier-demo-jargon-toggle-label{display:none;}
}

/* Inline jargon span — content toggles between data-plain and data-jargon */
.tier-demo-jargon{border-bottom:1px dotted rgba(11,32,64,0.30);cursor:help;}

/* ── Tier tablist ── */
.tier-demo-tablist{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#FFFFFF;border-bottom:1px solid var(--paper-rule);}
.tier-demo-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 18px 16px;background:#FFFFFF;border:none;border-right:1px solid var(--paper-rule);border-bottom:3px solid transparent;cursor:pointer;text-align:left;font-family:inherit;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.tier-demo-tab:last-child{border-right:none;}
.tier-demo-tab-name{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-0.01em;line-height:1.2;}
.tier-demo-tab-price{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:0.04em;}
.tier-demo-tab:hover:not(.active){background:#FAF7F1;color:#007A62;}
.tier-demo-tab:hover:not(.active) .tier-demo-tab-name{color:#007A62;}
.tier-demo-tab.active{background:#065F46;color:#FFFFFF;border-bottom-color:var(--teal);}
.tier-demo-tab.active .tier-demo-tab-name{color:#FFFFFF;}
.tier-demo-tab.active .tier-demo-tab-price{color:rgba(255,255,255,0.85);}
.tier-demo-tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
.tier-demo-tab-marker{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.7);font-weight:700;margin-top:2px;display:none;}
.tier-demo-tab.active .tier-demo-tab-marker{display:block;}

/* ── Stage (sidebar + viewport) ── */
.tier-demo-stage{display:grid;grid-template-columns:260px 1fr;min-height:520px;background:var(--paper);}

/* ── Sidebar ── */
.tier-demo-sidebar{padding:24px 20px;border-right:1px solid var(--paper-rule);background:#FBF6EB;}
.tier-demo-sidebar-group{margin-bottom:18px;}
.tier-demo-sidebar-group:last-child{margin-bottom:0;}
.tier-demo-sidebar-group-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:0 8px 8px;margin-bottom:2px;}
.tier-demo-sidebar-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border:none;background:transparent;color:var(--ink-2);font-family:inherit;font-size:13px;text-align:left;cursor:pointer;border-radius:8px;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);position:relative;border-left:2px solid transparent;}
.tier-demo-sidebar-item:hover:not(.active):not(.locked){background:rgba(0,135,90,0.06);color:var(--ink);}
.tier-demo-sidebar-item.active{background:rgba(0,135,90,0.12);color:#065F46;font-weight:600;border-left-color:#065F46;transform:translateX(2px);}
.tier-demo-sidebar-item.locked{color:var(--tier-demo-locked);background:transparent;cursor:pointer;}
.tier-demo-sidebar-item.locked:hover{background:var(--tier-demo-locked-bg);color:var(--ink-2);}
.tier-demo-sidebar-item-label{flex:1;line-height:1.35;}
.tier-demo-sidebar-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

.tier-demo-locked-chip{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(245,158,11,0.15);color:#9B5408;border:1px solid rgba(245,158,11,0.25);white-space:nowrap;}
.tier-demo-locked-chip::before{content:'\1F512';font-style:normal;font-size:9px;}
.tier-demo-sidebar-item.locked .tier-demo-locked-chip{opacity:0.9;}

.tier-demo-coming-chip{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(167,139,250,0.14);color:#5B21B6;border:1px solid rgba(167,139,250,0.25);white-space:nowrap;}

/* ── Viewport ── */
.tier-demo-viewport{padding:32px;position:relative;overflow:hidden;}
.tier-demo-view{display:none;animation:viewportIn var(--dur-slow) var(--ease) both;}
.tier-demo-view.active{display:block;}
@keyframes viewportIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* View header (every view has one) */
.tier-demo-view-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--paper-rule);flex-wrap:wrap;}
.tier-demo-view-title{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;color:var(--ink);line-height:1.25;letter-spacing:-0.015em;margin-bottom:4px;}
.tier-demo-view-desc{font-size:12px;color:var(--ink-3);line-height:1.5;}
.tier-demo-view-meta{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;color:var(--ink-3);font-weight:600;text-transform:uppercase;}
.tier-demo-view-meta-dot{width:6px;height:6px;border-radius:50%;background:#065F46;}

/* ── Opportunity card (Scout: Daily Digest) ── */
.td-opp{background:#FFFFFF;border:1px solid var(--paper-rule);border-radius:10px;padding:16px 18px;margin-bottom:12px;transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.td-opp:last-child{margin-bottom:0;}
.td-opp:hover{border-color:rgba(0,135,90,0.30);transform:translateY(-1px);}
.td-opp-row1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.td-tag{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:0.04em;}
.td-tag-portal{background:#0B2040;color:#FFFFFF;}
.td-tag-portal.ca{background:#B91C1C;}
.td-tag-portal.eu{background:#1a3a6b;}
.td-tag-score-high{background:#065F46;color:#FFFFFF;}
.td-tag-score-watch{background:#92400E;color:#FFFFFF;}
.td-tag-meta{background:rgba(11,32,64,0.06);color:#3F4759;font-family:'DM Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:0;text-transform:none;}
.td-opp-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:3px;letter-spacing:-0.005em;}
.td-opp-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);margin-bottom:8px;}
.td-opp-summary{font-size:12.5px;color:var(--ink-2);line-height:1.55;}
.td-opp-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--paper-rule);gap:8px;flex-wrap:wrap;}
.td-opp-score-bar{flex:1;max-width:160px;display:flex;align-items:center;gap:8px;}
.td-score-track{flex:1;background:var(--paper-rule);height:4px;border-radius:2px;overflow:hidden;}
.td-score-fill{background:#065F46;height:4px;border-radius:2px;}
.td-score-fill.watch{background:#D97706;}
.td-score-num{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;color:#065F46;}
.td-score-num.watch{color:#92400E;}
.td-opp-cta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.06em;color:#007A62;font-weight:700;text-decoration:none;}

/* ── Saved searches grid (Scout: Saved Searches) ── */
.td-saved-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.td-saved-grid{grid-template-columns:1fr;}}
.td-saved-card{background:#FFFFFF;border:1px solid var(--paper-rule);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:6px;transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.td-saved-card:hover{border-color:rgba(0,135,90,0.30);transform:translateY(-1px);}
.td-saved-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:#9B5408;font-weight:700;}
.td-saved-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-0.005em;}
.td-saved-query{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);background:#FBF6EB;border:1px solid var(--paper-rule);padding:5px 8px;border-radius:5px;line-height:1.5;}
.td-saved-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--paper-rule);}
.td-saved-hits{font-family:'JetBrains Mono',monospace;font-size:11px;color:#065F46;font-weight:700;}
.td-saved-hits-num{font-size:18px;font-family:'Syne',sans-serif;letter-spacing:-0.02em;}
.td-saved-freshness{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);}

/* ── Placeholder view (for tiers not yet built — mini-HALT stage) ── */
.td-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 24px;min-height:340px;background:#FFFFFF;border:1px dashed var(--paper-rule);border-radius:12px;}
.td-placeholder-chip{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:100px;background:var(--tier-demo-locked-bg);color:#9B5408;border:1px dashed rgba(245,158,11,0.30);margin-bottom:16px;}
.td-placeholder-h{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;color:var(--ink);margin-bottom:10px;letter-spacing:-0.01em;}
.td-placeholder-p{font-size:13px;color:var(--ink-2);line-height:1.6;max-width:380px;margin:0 auto;}

/* ── Storyline progress bar (bottom strip) ── */
.tier-demo-progress{display:flex;align-items:center;gap:14px;padding:18px 28px;background:#FFFFFF;border-top:1px solid var(--paper-rule);font-family:'Fraunces',serif;font-size:14px;line-height:1.55;color:var(--ink-2);font-weight:400;}
.tier-demo-progress-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,212,170,0.18);}
.tier-demo-progress-text{flex:1;}
.tier-demo-progress-text strong{color:var(--ink);font-weight:600;}
.tier-demo-progress-text a{color:#007A62;font-weight:600;text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid rgba(0,135,90,0.25);padding-bottom:1px;margin-left:6px;}
.tier-demo-progress-text a:hover{border-bottom-color:#007A62;}

/* ── Upgrade banner (locked-click feedback, fades in/out) ── */
.tier-demo-upgrade-banner{position:absolute;top:calc(50% - 28px);left:50%;transform:translateX(-50%) translateY(-12px);background:var(--tier-demo-banner-bg);color:#FFFFFF;padding:14px 24px;border-radius:100px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;line-height:1.4;box-shadow:0 16px 40px rgba(6,95,70,0.30),0 0 0 1px rgba(0,212,170,0.30);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease),transform var(--dur-slow) var(--ease);z-index:10;display:flex;align-items:center;gap:10px;}
.tier-demo-upgrade-banner::before{content:'\2728';font-style:normal;font-size:15px;}
.tier-demo-upgrade-banner strong{font-weight:800;}
.tier-demo-upgrade-banner.visible{opacity:1;transform:translateX(-50%) translateY(0);}

/* ────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .tier-demo-stage{grid-template-columns:220px 1fr;}
  .tier-demo-viewport{padding:24px;}
}
@media(max-width:900px){
  .tier-demo-stage{grid-template-columns:1fr;}
  .tier-demo-sidebar{border-right:none;border-bottom:1px solid var(--paper-rule);padding:14px 16px;overflow-x:auto;background:#FBF6EB;}
  .tier-demo-sidebar-group{display:inline-block;margin-right:14px;margin-bottom:0;vertical-align:top;min-width:200px;}
  .tier-demo-sidebar-group-label{padding-top:4px;}
  .tier-demo-viewport{padding:20px;min-height:440px;}
  .tier-demo-tablist{grid-template-columns:1fr 1fr;}
  .tier-demo-tab{border-right:1px solid var(--paper-rule);border-bottom:1px solid var(--paper-rule);}
  .tier-demo-tab:nth-child(2){border-right:none;}
  .tier-demo-tab:nth-child(3),.tier-demo-tab:nth-child(4){border-bottom:none;}
  .tier-demo-tab:nth-child(4){border-right:none;}
  .tier-demo-progress{padding:14px 18px;font-size:13px;}
  .tier-demo-story-bar{padding:14px 18px;gap:10px;}
  .tier-demo-story-text{font-size:13px;}
}
@media(max-width:640px){
  .tier-demo-section{padding:48px 14px;}
  .tier-demo-card{border-radius:14px;}
  .tier-demo-tablist{grid-template-columns:1fr;}
  .tier-demo-tab{border-right:none;border-bottom:1px solid var(--paper-rule);}
  .tier-demo-tab:last-child{border-bottom:none;}
  .tier-demo-tab.active{border-bottom-color:var(--teal);}
  .tier-demo-viewport{padding:16px;}
  .tier-demo-progress{font-size:12px;flex-wrap:wrap;}
  .tier-demo-progress-text a{margin-left:0;display:inline-block;margin-top:4px;}
  .td-opp-footer{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* ────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ──────────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .tier-demo-view{animation:none;}
  .tier-demo-upgrade-banner{transition:opacity 80ms linear;}
  .tier-demo-sidebar-item.active{transform:none;}
  .td-opp:hover,.td-saved-card:hover{transform:none;}
}