/* ===========================================================================
   BOREON · TabTotal™ — TabSuite experience
   Theme-aware ($10M for Salesforce). Inherits site tokens; comes alive in
   colour themes via --accent. Soli Deo Gloria ✝
   =========================================================================== */

/* ── shared shell ── */
.tt{--tt-coral:#cc785c;--tt-coral-2:#dd9a7f}
.tt section{position:relative}
.tt .kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:600;color:var(--accent);
  border:1px solid var(--line-strong);background:var(--glass-bg);border-radius:var(--r-pill);
  padding:8px 16px}
.tt .tm{font-size:.5em;vertical-align:super;color:var(--fg-muted);font-weight:600}
.tt .grad{background:linear-gradient(96deg,var(--fg) 0%,var(--fg) 38%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── HERO ── */
.tt-hero{padding-top:clamp(110px,16vh,180px);padding-bottom:clamp(56px,9vw,120px);
  text-align:center;overflow:hidden}
.tt-hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:80vh;z-index:-1;
  background:
    radial-gradient(46% 42% at 50% 8%,var(--accent-glow),transparent 70%),
    radial-gradient(60% 50% at 82% 0%,rgba(204,120,92,.18),transparent 70%),
    radial-gradient(40% 40% at 12% 22%,var(--accent-soft),transparent 70%);
  filter:saturate(115%)}
.tt-hero .mesh{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 30%,#000,transparent 75%);
          mask-image:radial-gradient(60% 55% at 50% 30%,#000,transparent 75%)}
.tt-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.0;letter-spacing:.01em;margin:22px auto 0;max-width:16ch}
.tt-hero .lead{font-family:var(--font-body);font-weight:300;color:var(--fg-muted);
  font-size:clamp(1.05rem,2.2vw,1.5rem);line-height:1.5;max-width:62ch;margin:22px auto 0}
.tt-hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* proof bar */
.tt-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:980px;margin:64px auto 0}
.tt-proof .stat{padding:22px 16px;text-align:center}
.tt-proof .n{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4vw,3rem);
  line-height:1;background:linear-gradient(180deg,var(--fg),var(--accent));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.tt-proof .l{color:var(--fg-muted);font-size:.82rem;margin-top:8px;letter-spacing:.01em}

/* section heads */
.tt-head{text-align:center;max-width:760px;margin:0 auto clamp(36px,5vw,64px)}
.tt-head h2{font-size:clamp(1.9rem,5vw,3.25rem);margin-top:14px}
.tt-head p{color:var(--fg-muted);font-size:1.05rem;margin-top:14px}

/* ── SUITE GRID ── */
.tt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}
.tt-card{display:flex;flex-direction:column;gap:14px;padding:30px;border-radius:var(--r-lg);
  position:relative;overflow:hidden;transition:transform var(--dur-base) var(--ease-out),
  border-color var(--dur-base),box-shadow var(--dur-base)}
.tt-card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--dur-base);
  background:radial-gradient(120% 100% at 50% 0%,var(--accent-soft),transparent 60%)}
.tt-card:hover{transform:translateY(-6px);border-color:var(--accent-soft);box-shadow:var(--shadow-lg)}
.tt-card:hover::after{opacity:1}
.tt-ico{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--accent);background:var(--glass-bg-2);border:1px solid var(--glass-border)}
.tt-ico svg{width:28px;height:28px}
.tt-card h3{font-size:1.5rem;letter-spacing:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tt-card .role{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:var(--fg-subtle);
  text-transform:uppercase}
.tt-card p{color:var(--fg-muted);font-size:.95rem;flex:1}
.tt-card .more{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--accent);font-weight:600}
.tt-card .more::after{content:" →";transition:margin var(--dur-fast)}
.tt-card:hover .more::after{margin-left:5px}

/* claude badge (matches AI Church) */
.claude-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);
  color:#e8b39c;background:rgba(204,120,92,.12);border:1px solid rgba(204,120,92,.34)}

/* ── CLAUDE CLARITY ── */
.tt-claude{position:relative;overflow:hidden}
.tt-claude .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.tt-claude .panel{padding:clamp(28px,4vw,52px);border-radius:var(--r-xl);position:relative;overflow:hidden}
.tt-claude .panel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 80% at 100% 0%,rgba(204,120,92,.22),transparent 60%)}
.tt-claude h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:16px 0}
.tt-claude h2 em{font-style:normal;background:linear-gradient(96deg,#cc785c,#dd9a7f);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tt-claude p{color:var(--fg-muted);font-size:1.06rem;line-height:1.6;max-width:52ch}
.tt-claude ul{list-style:none;margin:24px 0 0;display:grid;gap:14px}
.tt-claude li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.tt-claude li svg{margin-top:3px}
/* clarity demo card */
.clarity{padding:26px;border-radius:var(--r-lg);font-family:var(--font-mono);font-size:.9rem}
.clarity .q{color:var(--fg);display:flex;gap:10px;align-items:center}
.clarity .q .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.clarity .a{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--fg-muted);line-height:1.7}
.clarity .a b{color:var(--fg);font-weight:600}
.clarity .typed{display:inline-block;border-right:2px solid var(--tt-coral);padding-right:3px}

/* ── LICENSING ── */
.tt-lic{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tt-plan{display:flex;flex-direction:column;padding:34px 30px;border-radius:var(--r-lg);position:relative}
.tt-plan.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-lg)}
.tt-plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:700;
  color:var(--accent-contrast);background:var(--accent);padding:6px 16px;border-radius:var(--r-pill)}
.tt-plan h3{font-size:1.7rem;letter-spacing:0}
.tt-plan .tagline{color:var(--accent);font-family:var(--font-display);font-weight:600;
  letter-spacing:.02em;margin-top:2px}
.tt-plan .access{font-family:var(--font-mono);font-size:.8rem;color:var(--fg-subtle);margin-top:14px;
  text-transform:uppercase;letter-spacing:.06em}
.tt-plan .access b{color:var(--fg)}
.tt-plan > p{color:var(--fg-muted);font-size:.92rem;margin:14px 0 0}
.tt-plan ul{list-style:none;margin:22px 0;display:grid;gap:12px;flex:1}
.tt-plan li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--fg-muted)}
.tt-plan li svg{margin-top:2px;color:var(--accent);flex-shrink:0}
.tt-plan .no{opacity:.45}
.tt-plan .no svg{color:var(--fg-subtle)}
.tt-plan .btn{width:100%;justify-content:center}

/* ── access map (which tier unlocks what) ── */
.tt-access{margin-top:clamp(28px,4vw,48px);overflow:hidden;border-radius:var(--r-lg)}
.tt-access table{width:100%;border-collapse:collapse;font-size:.9rem}
.tt-access th,.tt-access td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--line)}
.tt-access th:first-child,.tt-access td:first-child{text-align:left;color:var(--fg)}
.tt-access thead th{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.74rem;color:var(--fg-muted)}
.tt-access tbody td{color:var(--fg-muted)}
.tt-access .yes{color:var(--accent);font-weight:700}
.tt-access .dot-no{color:var(--fg-subtle)}

/* ── migration pricing strip ── */
.tt-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tt-price .pc{padding:26px;border-radius:var(--r-lg);text-align:center}
.tt-price .pc.feat{border-color:var(--accent)}
.tt-price .pc .name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.8rem;color:var(--fg-muted)}
.tt-price .pc .amt{font-family:var(--font-display);font-weight:700;font-size:2.1rem;margin:8px 0}
.tt-price .pc .amt small{font-size:.9rem;color:var(--fg-subtle);font-weight:400}
.tt-price .pc .desc{color:var(--fg-muted);font-size:.85rem}

/* ── final CTA ── */
.tt-cta{text-align:center;padding:clamp(48px,8vw,110px) 0}
.tt-cta h2{font-size:clamp(2rem,5.5vw,3.6rem);max-width:18ch;margin:0 auto}
.tt-cta p{color:var(--fg-muted);max-width:54ch;margin:18px auto 0;font-size:1.08rem}

/* ── deep-dive (per-tool) ── */
.tt-tool-hero{padding-top:clamp(120px,15vh,170px)}
.tt-tool-hero .tt-ico{width:72px;height:72px;margin-bottom:22px}
.tt-tool-hero .tt-ico svg{width:36px;height:36px}
.tt-tool-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;margin:6px 0 0}
.tt-tool-hero .lead{color:var(--fg-muted);font-size:clamp(1.05rem,2.2vw,1.4rem);max-width:60ch;
  font-weight:300;margin-top:20px;line-height:1.5}
.tt-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.tt-caps .cap{padding:26px;border-radius:var(--r-lg);display:flex;gap:14px;align-items:flex-start}
.tt-caps .cap svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.tt-caps .cap p{margin:0;color:var(--fg-muted)}
.tt-back{display:inline-flex;gap:8px;align-items:center;color:var(--fg-muted);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.tt-back:hover{color:var(--accent)}

/* ── responsive ── */
@media (max-width:900px){
  .tt-claude .wrap{grid-template-columns:1fr}
  .tt-lic{grid-template-columns:1fr}
  .tt-proof{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .tt-access{overflow-x:auto}
  .tt-access table{min-width:520px}
}