/* Alfred-specific accents (live in-page so styles.css stays untouched) */
  .alfred-hero{background:linear-gradient(180deg,var(--ttb-bg-surface) 0%, var(--ttb-bg-subtle) 100%); position:relative; overflow:hidden;}
  .alfred-hero .pill{background:rgba(20,55,75,.06); color:var(--petrol-700); border-color:rgba(20,55,75,.15);}
  .alfred-hero h1 .grad{background:linear-gradient(135deg,var(--petrol-700),var(--petrol-800)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .alfred-mantra{font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:.06em; color:var(--ttb-fg-subtle); text-transform:uppercase;}

  /* Slack mock — uses Slack's own palette (intentionally hardcoded, NOT TTB tokens) */
  .slack-mock{background:#1a1d21; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.18); overflow:hidden; max-width:780px; margin:0 auto; font-family:-apple-system, BlinkMacSystemFont,'Segoe UI', sans-serif;}
  .slack-bar{background:#19171d; color:#d1d2d3; padding:12px 18px; font-size:13px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.04);}
  .slack-bar .dot{width:8px; height:8px; border-radius:50%; background:#2bac76;}
  .slack-bar strong{color:#fff; font-weight:600;}
  .slack-body{padding:8px 0 18px;}
  .slack-msg{padding:10px 22px; display:flex; gap:14px;}
  .slack-msg:hover{background:rgba(255,255,255,.025);}
  .slack-avatar{width:36px; height:36px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff;}
  .slack-avatar.ta{background:#7c3aed;}
  .slack-avatar.alf{background:linear-gradient(135deg,#0a7e8c,#143b4b); font-family:'Fraunces',serif;}
  .slack-avatar.cust{background:#e8a13a;}
  .slack-avatar.sm{background:#1b6ca8;}
  .slack-name{color:#fff; font-weight:700; font-size:14px;}
  .slack-time{color:#abaaad; font-size:11px; margin-left:8px; font-weight:400;}
  .slack-text{color:#d1d2d3; font-size:14px; line-height:1.55; margin-top:2px;}
  .slack-text code{background:rgba(255,255,255,.08); color:#e8c674; padding:1px 6px; border-radius:3px; font-size:12px;}
  .slack-react{display:inline-flex; align-items:center; gap:4px; background:rgba(29,155,209,.15); border:1px solid rgba(29,155,209,.3); padding:2px 8px; border-radius:12px; font-size:12px; color:#55c2eb; margin-top:6px; margin-right:6px;}

  /* Pillars grid */
  .alfred-pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ttb-border-base); border:1px solid var(--ttb-border-base); border-radius:12px; overflow:hidden;}
  .alfred-pillar{background:var(--ttb-bg-surface); padding:36px 28px;}
  .alfred-pillar .num{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--ttb-fg-subtle); letter-spacing:.08em;}
  .alfred-pillar h3{font-family:'Fraunces', serif; font-weight:500; font-size:24px; margin:14px 0 10px; line-height:1.15;}
  .alfred-pillar p{font-size:14.5px; line-height:1.6; color:var(--ttb-fg-subtle); margin:0;}
  @media (max-width:1000px){.alfred-pillars{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){.alfred-pillars{grid-template-columns:1fr;} }

  /* Stack diagram */
  .alfred-stack{max-width:640px; margin:0 auto;}
  .stack-row{display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:center; padding:18px 0; border-bottom:1px solid var(--ttb-border-base);}
  .stack-row:last-child{border-bottom:0;}
  .stack-label{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.08em; color:var(--ttb-fg-subtle); text-transform:uppercase;}
  .stack-content strong{font-family:'Fraunces', serif; font-weight:500; font-size:22px; display:block; margin-bottom:4px;}
  .stack-content em{font-style:normal; color:var(--ttb-fg-subtle); font-size:14.5px; line-height:1.55;}

  /* Workflow steps */
  .workflow{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:32px;}
  .workflow-step{position:relative;}
  .workflow-step .step-num{font-family:'Fraunces', serif; font-size:64px; font-weight:300; color:var(--petrol-700); line-height:1; margin-bottom:16px; letter-spacing:-.02em;}
  .workflow-step h4{font-family:'Fraunces', serif; font-weight:500; font-size:24px; margin:0 0 10px; line-height:1.2;}
  .workflow-step p{font-size:15px; line-height:1.6; color:var(--ttb-fg-subtle); margin:0;}
  @media (max-width:900px){.workflow{grid-template-columns:1fr;} }

  /* Comparison block */
  .vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:32px;}
  .vs-col{padding:36px; border-radius:12px;}
  .vs-col.bad{background:#faf7f3; border:1px solid var(--ttb-border-base);}
  .vs-col.good{background:linear-gradient(135deg, var(--petrol-700), var(--petrol-800)); color:var(--ttb-bg-surface);}
  .vs-col h4{font-family:'Fraunces', serif; font-weight:500; font-size:22px; margin:0 0 18px;}
  .vs-col ul{list-style:none; padding:0; margin:0;}
  .vs-col li{padding:10px 0 10px 28px; font-size:15px; line-height:1.55; position:relative; border-bottom:1px solid rgba(0,0,0,.08);}
  .vs-col.good li{border-bottom-color:rgba(255,255,255,.15);}
  .vs-col li:last-child{border-bottom:0;}
  .vs-col.bad li::before{content:'×'; position:absolute; left:6px; color:#a87341; font-family:'Fraunces', serif; font-size:20px; line-height:1.3;}
  .vs-col.good li::before{content:'→'; position:absolute; left:0; color:rgba(255,255,255,.7);}
  @media (max-width:800px){.vs-grid{grid-template-columns:1fr;} }