:root{
    --ink:#101828; --ink-mid:#6A7282; --ink-soft:#ECEEF3;
    --brand:#155DFC; --brand-light:#3A7BFF; --brand-soft:#9EBBFF; --brand-pastel:#EAF1FF;
    --bg-gray:#F7F8FA; --dark:#0A0E1A; --dark-2:#101A30;
    --warn-bg:#FFF4E5; --warn-ink:#A66400;
    --container:1280px;
    --pad-x:clamp(24px,5vw,80px);
    --radius-sm:10px; --radius-lg:20px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--ink); background:#fff;
    -webkit-font-smoothing:antialiased; line-height:1.5;
  }
  img{max-width:100%; display:block;}
  .container{max-width:var(--container); margin:0 auto; padding:0 var(--pad-x);}
  .section{padding:clamp(var(--space-6),7vw,112px) 0;}
  .section--gray{background:var(--bg-gray);}
  .section--dark{background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 100%); color:#fff;}

  /* DS canonical typography */
  .eyebrow{
    display:inline-block; font-size: var(--fs-eyebrow); font-weight:500;
    letter-spacing: normal; text-transform: none;
    color:var(--brand); margin-bottom:14px;
  }
  h1{
    font-size: var(--fs-display-1); font-weight:300;
    letter-spacing:-0.025em; line-height:1.07;
    text-wrap:balance;
  }
  h2{
    font-size: var(--fs-display-2); font-weight:300;
    letter-spacing:-0.025em; line-height:1.18;
    text-wrap:balance;
  }
  h3{font-size:var(--ps-text-h3); font-weight:500; line-height:1.3; color:var(--ink);}
  p{font-size:var(--fs-body); font-weight:300; color:var(--ink-mid); line-height:1.5;}
  .lead{font-size:var(--fs-title-m); color:var(--ink-mid); line-height:1.5;}
  .em-blue-mid{color:var(--brand); font-weight:500;}

  /* ============ TOP NAV (minimal sticky breadcrumb) ============ */
  .top-bar{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.95); backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid var(--ink-soft);
    padding:14px var(--pad-x);
  }
  .top-bar-inner{
    max-width:var(--container); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-3);
  }
  .top-back{
    display:inline-flex; align-items:center; gap:var(--space-1);
    font-size:var(--fs-meta); font-weight:500; color:var(--brand);
    text-decoration:none;
    transition:color 0.2s ease;
  }
  .top-back:hover{color:var(--brand-hover);}
  .top-back svg{width:14px; height:14px;}
  .top-logo{font-size:var(--fs-meta); font-weight:500; color:var(--ink); letter-spacing:0.04em;}
  .top-cta{
    height:44px; padding:0 var(--space-3); border-radius:var(--radius-pill);
    background:var(--brand); color:#fff;
    font-size:var(--fs-meta); font-weight:500; text-decoration:none;
    display:inline-flex; align-items:center; gap:var(--space-1);
    transition:background 0.2s ease;
  }
  .top-cta:hover{background:var(--brand-hover);}
  @media (max-width:700px){ .top-cta{display:none;} }

  /* ============ EDITORIAL TITLE BLOCK (UXDA-style) ============ */
  .case-header{
    padding:clamp(56px,6vw,88px) 0 clamp(40px,4vw,60px);
    background:#FFFFFF;
  }
  .case-back-link{
    display:inline-flex; align-items:center; gap:10px;
    font-size:var(--fs-eyebrow); font-weight:500; letter-spacing: normal;
    text-transform: none; color:var(--ink-mid);
    text-decoration:none; margin-bottom:40px;
    transition:color 0.2s ease;
  }
  .case-back-link:hover{color:var(--brand);}
  .case-back-link svg{width:14px; height:14px;}
  .case-title{
    font-size: var(--fs-display-1); font-weight:300;
    letter-spacing:-0.025em; line-height:1.07; color:var(--ink);
    margin-bottom:var(--space-3); max-width:1100px; text-wrap:balance;
  }
  .case-title em{
    font-style:normal; font-weight:500; color:var(--brand);
  }
  .case-subtitle{
    font-size:var(--fs-title-m); font-weight:300; color:var(--ink-mid);
    line-height:1.5; margin-bottom:36px; max-width:780px;
  }
  .case-meta{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin-bottom:var(--space-3);
  }
  .case-byline-group{display:inline-flex; align-items:center; gap:12px;}
  .case-avatar{
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
    color:#fff; display:inline-flex; align-items:center; justify-content:center;
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing:0.04em;
    border:2px solid #fff; box-shadow:0 2px 8px rgba(16,24,40,0.08);
    flex-shrink:0;
  }
  .case-by-text{
    font-size:var(--fs-meta); color:var(--ink); font-weight:500;
  }
  .case-by-text a{color:var(--brand); text-decoration:underline; font-weight:500;}
  .case-read{
    font-size:var(--fs-meta); color:var(--ink-mid);
    position:relative; padding-left:18px;
  }
  .case-read::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:4px; height:4px; border-radius:50%; background:var(--ink-soft);
  }
  .case-info-row{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:14px;
  }
  .case-info-label{
    font-size:var(--fs-eyebrow); letter-spacing: normal; text-transform: none;
    color:var(--ink-mid); font-weight:500;
  }
  .case-cat-link{
    font-size:var(--fs-meta); color:var(--brand); font-weight:500;
    text-decoration:underline;
  }
  .case-tags{display:flex; gap:10px; flex-wrap:wrap;}
  .case-tag{
    display:inline-block;
    font-size:var(--fs-eyebrow); letter-spacing: normal; text-transform: none;
    color:var(--brand); font-weight:500;
    padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
    background:var(--brand-pastel);
    cursor:default;
  }

  /* T5 — Footer row (Powered by + Tags) */
  .case-footer-row{
    display:flex; gap:var(--space-2); align-items:center;
    margin-top:var(--space-4); padding-top:var(--space-4);
    border-top:1px solid var(--ink-soft);
    flex-wrap:wrap; justify-content:space-between;
  }
  .powered-by{
    display:inline-flex; align-items:center; gap:12px;
    padding:10px var(--space-2); border-radius:var(--radius-pill);
    background:var(--bg-gray); border:1px solid var(--ink-soft);
  }
  .powered-by-label{
    font-size:var(--fs-eyebrow); letter-spacing: normal; text-transform: none;
    color:var(--ink-mid); font-weight:500;
  }
  .powered-by-brand{
    display:inline-flex; align-items:center; gap:var(--space-1);
    font-size:var(--fs-meta); font-weight:500; color:var(--ink);
  }
  .powered-by-dot{
    width:6px; height:6px; border-radius:50%; background:var(--brand);
    box-shadow:0 0 8px rgba(21,93,252,0.55);
  }
  /* Distinct mockup section — light tone (not pure white) */
  .case-fullbleed-hero{
    position:relative;
    background:#F4F6FA;
    margin-top:0;
    padding:clamp(40px,4.5vw,var(--space-6)) 0 clamp(72px,7vw,112px);
  }
  .case-fullbleed-hero .hero-bg,
  .case-fullbleed-hero .hero-overlay{ display:none; }
  .case-fullbleed-hero .hero-content{
    width:100%; max-width:var(--container); margin:0 auto;
    padding:0 var(--pad-x);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  /* Mockup header — logo + tagline */
  .mockup-header{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; margin-bottom:clamp(40px,5vw,var(--space-6));
  }
  .mockup-logo{
    display:flex; align-items:center; justify-content:center;
    margin-bottom:var(--space-3);
  }
  .mockup-logo-img{ height:88px; width:auto; display:block; }
  .mockup-tagline{
    font-size: var(--fs-display-1); font-weight:300;
    letter-spacing:-0.025em; line-height:1.18; color:var(--ink);
    text-wrap:balance;
    max-width:760px; margin:0 auto;
  }
  .mockup-tagline em{
    font-style:normal; font-weight:500; color:var(--brand);
  }
  /* Dashboard wrapper inside hero */
  .case-fullbleed-hero .hero-mockup{
    width:100%; max-width:1040px;
  }
  .case-fullbleed-hero .case-laptop{
    position:relative;
    width:100%;
    border-radius: var(--radius); overflow:hidden;
    background:linear-gradient(135deg, #0F1729 0%, #1A2541 100%);
    border:1px solid rgba(16,24,40,0.10);
    box-shadow:
      0 32px 80px rgba(16,24,40,0.18),
      0 8px 20px rgba(16,24,40,0.08),
      0 0 0 1px rgba(255,255,255,0.06) inset,
      0 1px 0 rgba(255,255,255,0.10) inset;
  }
  .case-fullbleed-hero .case-laptop::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.02) 100%);
    pointer-events:none;
  }
  .case-fullbleed-hero .case-laptop-screen{
    width:100%; position:relative; z-index:1;
    padding:var(--space-3);
    display:flex; flex-direction:column;
  }
  @media (max-width:700px){
    .case-fullbleed-hero .case-laptop-screen{padding:var(--space-2);}
  }

  /* ============ FULL-BLEED HERO VISUAL ============ */
  .case-hero-visual{
    position:relative; overflow:hidden;
    background:var(--dark);
    min-height:560px;
  }
  .case-hero-bg{
    position:absolute; inset:0;
    background-image:url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=2000&h=1200&fit=crop&q=85');
    background-size:cover; background-position:center;
    filter:saturate(0.85);
  }
  .case-hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(10,14,26,0.85) 0%, rgba(10,14,26,0.55) 50%, rgba(10,14,26,0.92) 100%);
  }
  .case-hero-content{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-5);
    align-items:center;
    max-width:var(--container); margin:0 auto;
    padding:clamp(72px,8vw,128px) var(--pad-x);
  }
  .case-hero-label{
    font-size:var(--fs-eyebrow); letter-spacing: normal; text-transform: none;
    color:#9EBBFF; font-weight:500;
    margin-bottom:28px; display:block;
  }
  .case-hero-display{
    font-size: var(--fs-display-1); font-weight:300;
    letter-spacing:-0.025em; line-height:1.18;
    color:#fff; text-wrap:balance;
  }
  .case-hero-display em{
    font-style:normal; font-weight:500;
    color:var(--brand-soft);
  }
  /* PrimeSquare dashboard mockup — glassmorphic window */
  .case-hero-mockup{
    position:relative;
    aspect-ratio:16/11;
  }
  .case-laptop{
    position:absolute; inset:0;
    border-radius:var(--radius); overflow:hidden;
    background:rgba(15, 23, 41, 0.45);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:
      0 32px 64px rgba(0,0,0,0.50),
      0 0 0 1px rgba(255,255,255,0.06) inset,
      0 1px 0 rgba(255,255,255,0.10) inset;
  }
  .case-laptop::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.03) 100%);
    pointer-events:none;
  }
  .case-laptop-screen{
    width:100%; height:100%; position:relative; z-index:1;
    padding:18px; overflow:hidden;
    display:flex; flex-direction:column;
  }
  .case-laptop-base{display:none;}
  .laptop-top{
    display:flex; align-items:center; gap:14px;
    padding-bottom:14px; margin-bottom:var(--space-2);
    border-bottom:1px solid rgba(255,255,255,0.10);
  }
  .laptop-brand{
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing:0.14em;
    color:#fff; text-transform:uppercase;
  }
  .laptop-brand-dot{width:8px; height:8px; border-radius:50%; background:var(--brand-soft); box-shadow:0 0 10px var(--brand-soft);}
  .laptop-nav{margin-left:auto; display:flex; gap:18px;}
  .laptop-nav span{font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.45); letter-spacing:0.12em; text-transform:uppercase;}
  .laptop-nav span.active{color:var(--brand-soft);}
  .laptop-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;
    margin-bottom:14px;
  }
  .laptop-kpi{
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius); padding:12px;
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;
  }
  .laptop-kpi-label{font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.55); letter-spacing:0.18em; text-transform:uppercase; font-weight:500;}
  .laptop-kpi-num{font-size:var(--ps-text-h3); color:#fff; font-weight:300; line-height:1.1; margin-top:4px; letter-spacing:-0.02em;}
  .laptop-kpi-sub{font-size:var(--fs-eyebrow); color:var(--brand-soft); margin-top:3px;}
  .laptop-rows{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius); padding:12px;
    box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
  }
  .laptop-rows-title{
    font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.65); letter-spacing:0.18em;
    text-transform:uppercase; font-weight:500;
    padding-bottom:var(--space-1); margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .laptop-row{
    display:grid; grid-template-columns:1fr auto auto; gap:10px;
    align-items:center; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .laptop-row:last-child{border-bottom:0;}
  .laptop-row-name{font-size:var(--fs-eyebrow); color:#fff;}
  .laptop-row-status{
    font-size:var(--fs-eyebrow); letter-spacing:0.12em; text-transform:uppercase;
    padding:3px var(--space-1); border-radius:var(--radius-pill); font-weight:500;
  }
  .laptop-row-status.ok{background:rgba(40,200,64,0.18); color:#7EE0A3;}
  .laptop-row-status.run{background:rgba(158,187,255,0.18); color:var(--brand-soft);}
  .laptop-row-meta{font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.45);}
  .btn-primary{
    height:52px; padding:0 28px; border-radius:var(--radius-pill);
    background:var(--brand); color:#fff;
    font-size:var(--fs-body); font-weight:500; text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
    transition:background 0.2s ease, transform 0.2s ease;
    border:none; cursor:pointer; white-space:nowrap;
  }
  .btn-primary:hover{background:var(--brand-hover); transform:translateY(-1px);}
  .btn-outline{
    height:52px; padding:0 28px; border-radius:var(--radius-pill);
    background:transparent; color:var(--brand); border:1px solid var(--brand);
    font-size:var(--fs-body); font-weight:500; text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
    transition:background 0.2s ease;
    cursor:pointer; white-space:nowrap;
  }
  .btn-outline:hover{background:var(--brand-pastel);}
  .btn-outline svg, .btn-primary svg{width:14px; height:14px;}

  /* ============ THE PROBLEM — S1 Status Strip ============ */
  .problem{padding:clamp(var(--space-7),8vw,128px) 0;}
  .problem-tag{
    display:inline-flex; align-items:center; gap:10px;
    font-size:var(--fs-eyebrow); font-weight:500; letter-spacing: normal;
    text-transform: none; color:#C53030;
    background:#FFE7E0; padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
    margin-bottom:var(--space-3);
  }
  .problem-tag .dot{width:6px; height:6px; border-radius:50%; background:#C53030;}
  .problem h2{margin:0 auto 18px; max-width:920px;}
  .problem-head{text-align:center; max-width:920px; margin:0 auto 56px;}
  .problem-head .problem-tag{margin-left:auto; margin-right:auto;}
  .problem-strip{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:repeat(5,1fr); gap:0;
    background:#fff; border:1px solid var(--ink-soft);
    border-radius: var(--radius); overflow:hidden;
    box-shadow:0 16px 36px rgba(16,24,40,0.04);
  }
  .problem-cell{
    padding:28px 20px;
    border-right:1px solid var(--ink-soft);
    text-align:center;
    transition:background 0.2s ease;
  }
  .problem-cell:last-child{border-right:0;}
  .problem-cell:hover{background:#FFF4F0;}
  .problem-cell-status{
    display:inline-flex; align-items:center; gap:var(--space-1);
    padding:6px 12px; border-radius:var(--radius-pill);
    background:#FFE7E0;
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing: normal;
    text-transform: none; color:#C53030;
    margin-bottom:14px;
  }
  .problem-cell-status::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:#C53030; box-shadow:0 0 8px rgba(197,48,48,0.55);
  }
  .problem-cell h3{font-size:var(--fs-meta); font-weight:500; color:var(--ink); line-height:1.3; margin-bottom:6px;}
  .problem-cell p{font-size:var(--fs-eyebrow); color:var(--ink-mid); line-height:1.4;}
  .problem-cost{
    max-width:1100px; margin:var(--space-3) auto 0;
    padding:18px 28px;
    background:#FFE7E0; border:1px solid rgba(197,48,48,0.20);
    border-radius: var(--radius);
    display:flex; align-items:center; gap:14px;
  }
  .problem-cost-icon{
    width:32px; height:32px; border-radius:50%;
    background:#C53030; color:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .problem-cost-icon svg{width:14px; height:14px;}
  .problem-cost-text{font-size:var(--fs-meta); color:var(--ink); font-weight:500;}
  @media (max-width:900px){
    .problem-strip{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .problem-strip{grid-template-columns:1fr;}
  }

  /* ============ TRANSFORMATION (transition) ============ */
  .transformation{
    padding:clamp(56px,6vw,var(--space-7)) 0;
    background:linear-gradient(180deg, var(--bg-gray) 0%, #FFFFFF 100%);
    text-align:center;
  }
  .trans-tag{
    display:inline-flex; align-items:center; gap:10px;
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing: normal;
    text-transform: none; color:var(--brand);
    background:var(--brand-pastel); padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
    margin-bottom:var(--space-3);
  }
  .transformation h2{margin:0 auto 18px; max-width:900px;}
  .transformation p.lead{margin:0 auto; max-width:760px;}
  .trans-bar{
    margin:var(--space-5) auto 0; max-width:760px;
    display:flex; align-items:center; gap:0;
    position:relative;
  }
  .trans-bar-side{
    flex:1; height:64px; border-radius: var(--radius);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing: normal; text-transform: none;
  }
  .trans-bar-side.before{background:#F1ECEC; color:#7A5252;}
  .trans-bar-side.after{
    background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
    color:#fff;
  }
  .trans-bar-arrow{
    width:52px; height:52px; border-radius:50%;
    background:#fff; border:2px solid var(--brand);
    display:flex; align-items:center; justify-content:center;
    color:var(--brand);
    margin:0 -14px; z-index:2; position:relative;
    box-shadow:0 8px 24px rgba(21,93,252,0.20);
  }
  .trans-bar-arrow svg{width:20px; height:20px;}

  /* ============ THE SOLUTION ============ */
  .solution{padding:clamp(var(--space-7),8vw,128px) 0;}
  .solution-grid{
    display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-6);
    align-items:start;
  }
  .solution h2{margin-bottom:18px;}
  .solution p{font-size:var(--fs-title-m); margin-bottom:18px;}
  .solution-name{font-size: var(--fs-body); font-weight:500; color:var(--brand); margin-bottom:14px; letter-spacing:0.05em;}
  .solution-checks{
    margin-top:var(--space-4); display:grid; gap:14px;
  }
  .solution-check{
    display:flex; align-items:center; gap:14px;
    padding:var(--space-2) 20px; background:var(--brand-pastel);
    border-radius: var(--radius);
    transition:transform 0.25s ease;
  }
  .solution-check:hover{transform:translateX(4px);}
  .solution-check-icon{
    width:32px; height:32px; border-radius:50%;
    background:var(--brand); color:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .solution-check-icon svg{width:14px; height:14px; stroke-width:3;}
  .solution-check-text{font-size: var(--fs-body); font-weight:500; color:var(--ink);}

  .solution-visual{
    position:sticky; top:96px;
    aspect-ratio:4/5; border-radius: var(--radius);
    background:linear-gradient(135deg, var(--brand-pastel) 0%, #FFFFFF 100%);
    border:1px solid rgba(21,93,252,0.10);
    padding:var(--space-4);
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
  }
  .solution-visual::before{
    content:""; position:absolute; right:-80px; top:-80px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(21,93,252,0.10) 0%, transparent 70%);
  }
  .sv-label{
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing:0.2em;
    color:var(--brand); margin-bottom:var(--space-3);
  }
  .sv-stack{display:flex; flex-direction:column; gap:10px;}
  .sv-row{
    background:#fff; border:1px solid var(--ink-soft);
    border-radius: var(--radius); padding:14px var(--space-2);
    display:flex; align-items:center; gap:14px;
    font-size: var(--fs-meta); color:var(--ink); font-weight:500;
  }
  .sv-row .num{
    width:28px; height:28px; border-radius:50%;
    background:var(--brand); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-eyebrow); font-weight: 500; flex-shrink:0;
  }

  /* ============ BEFORE / WITH / RESULT TABLE ============ */
  .compare{background:var(--bg-gray); padding:clamp(var(--space-7),8vw,128px) 0;}
  .compare-intro{text-align:center; margin:0 auto 56px; max-width:820px;}
  .compare-intro h2{margin-bottom:14px;}
  .compare-table{
    max-width:1100px; margin:0 auto;
    background:#fff; border:1px solid var(--ink-soft);
    border-radius: var(--radius); overflow:hidden;
    box-shadow:0 24px 56px rgba(16,24,40,0.06);
  }
  .compare-head{
    display:grid; grid-template-columns:1.3fr 1.4fr 1.1fr;
    background:linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
    color:#fff;
  }
  .compare-head > div{
    padding:var(--space-3) 28px;
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing: normal;
    text-transform: none;
  }
  .compare-head > div:nth-child(1){color:rgba(255,255,255,0.55);}
  .compare-head > div:nth-child(2){color:var(--brand-soft);}
  .compare-head > div:nth-child(3){color:#7EE0A3;}
  .compare-row{
    display:grid; grid-template-columns:1.3fr 1.4fr 1.1fr;
    border-bottom:1px solid var(--ink-soft);
    transition:background 0.2s ease;
  }
  .compare-row:last-child{border-bottom:0;}
  .compare-row:hover{background:#FAFBFD;}
  .compare-row > div{
    padding:22px 28px;
    font-size:var(--fs-body); color:var(--ink); line-height:1.5;
    display:flex; align-items:center; gap:12px;
  }
  .compare-before{color:#7A5252 !important; font-weight:400;}
  .compare-with{color:var(--ink) !important; font-weight:500; border-left:1px solid var(--ink-soft); border-right:1px solid var(--ink-soft);}
  .compare-with::before{content:"→"; color:var(--brand); font-weight: 500; margin-right:4px; flex-shrink:0;}
  .compare-result{font-weight:500; color:var(--ink) !important;}
  .compare-result::before{
    content:"✓"; width:24px; height:24px; border-radius:50%;
    background:#E8F5EE; color:#0E7A3D;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight: 500; font-size:var(--fs-eyebrow); flex-shrink:0;
  }

  /* ============ HOW IT WORKS — 5 STAGES ============ */
  .stages{padding:clamp(var(--space-7),8vw,128px) 0;}
  .stages-intro{text-align:center; margin:0 auto var(--space-6); max-width:820px;}
  .stages-intro h2{margin-bottom:14px;}
  .stages-list{
    max-width:980px; margin:0 auto;
    position:relative;
  }
  .stages-list::before{
    content:""; position:absolute; left:35px; top:30px; bottom:30px;
    width:2px; background:linear-gradient(180deg, var(--brand-pastel), var(--brand), var(--brand-pastel));
    z-index:0;
  }
  .stage{
    position:relative; padding:var(--space-3) 0 var(--space-3) 100px;
    transition:background 0.2s ease;
  }
  .stage-num{
    position:absolute; left:0; top:24px;
    width:72px; height:72px; border-radius:50%;
    background:#fff; border:2px solid var(--brand);
    display:flex; align-items:center; justify-content:center;
    color:var(--brand); font-size:var(--ps-text-h3); font-weight:300;
    z-index:1;
    box-shadow:0 8px 24px rgba(21,93,252,0.12);
    transition:transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  }
  .stage:hover .stage-num{
    background:var(--brand); color:#fff; transform:scale(1.08);
  }
  .stage-name{
    font-size:var(--fs-eyebrow); font-weight: 500; letter-spacing: normal;
    color:var(--brand); text-transform: none;
    margin-bottom:6px;
  }
  .stage h3{
    font-size:var(--ps-text-h3); font-weight:500; color:var(--ink);
    line-height:1.3; letter-spacing:-0.01em;
    margin-bottom:10px;
  }
  .stage p{font-size:var(--fs-body); line-height:1.5; max-width:680px;}

  /* ============ IMPACT STATS ============ */
  .impact{
    background:#FFFFFF;
    color:var(--ink); position:relative; overflow:hidden;
    padding:clamp(var(--space-7),8vw,128px) 0;
  }
  .impact::before{
    content:""; position:absolute; left:50%; top:0;
    transform:translateX(-50%);
    width:600px; height:400px;
    background:radial-gradient(ellipse, rgba(21,93,252,0.06) 0%, transparent 70%);
    pointer-events:none;
  }
  .impact-intro{text-align:center; margin:0 auto var(--space-6); max-width:820px; position:relative; z-index:1;}
  .impact-intro .eyebrow{color:var(--brand);}
  .impact-intro h2{color:var(--ink); margin-bottom:14px;}
  .impact-intro p{color:var(--ink-mid); font-size:var(--fs-title-m); line-height:1.5;}
  .impact-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);
    max-width:1100px; margin:0 auto; position:relative; z-index:1;
  }
  .impact-cell{
    background:#FFFFFF;
    border:1px solid var(--ink-soft);
    border-radius: var(--radius); padding:var(--space-4) 28px;
    box-shadow:0 8px 24px rgba(16,24,40,0.04);
    transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .impact-cell:hover{
    transform:translateY(-4px);
    border-color:var(--brand-soft);
    box-shadow:0 16px 40px rgba(21,93,252,0.10);
  }
  /* Icon — same pattern as MPR case study */
  .impact-icon{
    width:56px; height:56px;
    display:flex; align-items:center; justify-content:flex-start;
    margin-bottom:var(--space-2);
  }
  .impact-icon img{ width:56px; height:56px; object-fit:contain; display:block; }
  /* Value (End-to-End, Real-Time, etc.) — DS h3 spec: 22 / 500 / -0.01em / lh 1.3 / ink */
  .impact-num{
    font-size:var(--ps-text-h3); font-weight:500;
    color:var(--ink); line-height:1.3;
    letter-spacing:-0.01em; margin-bottom:6px;
  }
  /* Category label (Lending Platform, etc.) — DS eyebrow proportions, ink-mid for hierarchy */
  .impact-label{
    font-size:var(--fs-eyebrow); font-weight:500; letter-spacing: normal;
    text-transform: none; color:var(--ink-mid);
    margin-bottom:14px;
  }
  /* Description — DS body spec: 16 / 300 / ink-mid / lh 1.5 */
  .impact-sub{
    font-size:var(--fs-body); font-weight:300; color:var(--ink-mid);
    line-height:1.5;
  }

  /* ============ VIDEO WALKTHROUGH ============ */
  .video-block{
    padding:clamp(var(--space-6),7vw,96px) 0; background:#FFFFFF;
    text-align:center;
  }
  .video-frame{
    max-width:920px; margin:0 auto;
    aspect-ratio:16/9; border-radius: var(--radius);
    background:linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff;
    position:relative; overflow:hidden;
    cursor:pointer;
    box-shadow:0 32px 64px rgba(16,24,40,0.18);
  }
  .video-frame::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at center, rgba(21,93,252,0.20) 0%, transparent 65%);
  }
  .video-play{
    width:88px; height:88px; border-radius:50%;
    background:var(--brand); color:#fff;
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:1;
    box-shadow:0 16px 36px rgba(21,93,252,0.45);
    transition:transform 0.3s ease;
  }
  .video-frame:hover .video-play{transform:scale(1.1);}
  .video-play svg{width:32px; height:32px;}
  .video-label{
    margin-top:var(--space-3); font-size:var(--fs-body); line-height:1.5; color:rgba(255,255,255,0.85);
    position:relative; z-index:1;
  }
  .video-label strong{color:#fff; font-weight:500;}

  /* ============ RELATED CASES ============ */
  .related{padding:clamp(var(--space-7),8vw,128px) 0;}
  .related-intro{text-align:center; margin:0 auto 56px; max-width:820px;}
  .related-intro h2{margin-bottom:14px;}
  .related-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    max-width:1100px; margin:0 auto;
  }
  .related-card{
    background:#fff; border:1px solid var(--ink-soft);
    border-radius: var(--radius); padding:var(--space-4); overflow:hidden;
    transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration:none; display:flex; flex-direction:column;
  }
  .related-card:hover{
    transform:translateY(-4px);
    border-color:rgba(21,93,252,0.20);
    box-shadow:0 16px 36px rgba(16,24,40,0.06);
  }
  .related-card .tag{
    display:inline-block;
    font-size:var(--fs-eyebrow); font-weight:500; letter-spacing: normal;
    text-transform: none; color:var(--brand);
    margin-bottom:18px;
  }
  .related-card h3{font-size:var(--ps-text-h3); font-weight:500; line-height:1.3; margin-bottom:12px; color:var(--ink);}
  .related-card p{font-size:var(--fs-body); line-height:1.5; color:var(--ink-mid); flex:1; margin-bottom:18px;}
  .related-card .read{
    font-size:var(--fs-meta); font-weight:500; color:var(--brand);
    display:inline-flex; align-items:center; gap:6px;
  }

  /* ============ FINAL CTA ============ */
  .final-cta{
    background:linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
    color:#fff; padding:clamp(var(--space-6),7vw,96px) 0;
    text-align:center; position:relative; overflow:hidden;
  }
  .final-cta::before{
    content:""; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:800px; height:400px;
    background:radial-gradient(ellipse, rgba(21,93,252,0.25) 0%, transparent 70%);
    pointer-events:none;
  }
  .final-cta-inner{position:relative; z-index:1; max-width:760px; margin:0 auto;}
  .final-cta .eyebrow{color:var(--brand-soft);}
  .final-cta h2{color:#fff; margin-bottom:14px;}
  .final-cta p{color:rgba(255,255,255,0.7); font-size:var(--fs-title-m); line-height:1.5; margin-bottom:var(--space-4);}
  .final-cta-actions{display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center;}
  .btn-dark-ghost{
    height:52px; padding:0 28px; border-radius:var(--radius-pill);
    background:transparent; color:#fff;
    border:1px solid rgba(255,255,255,0.20);
    font-size:var(--fs-body); font-weight:500; text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
    transition:background 0.2s ease, border-color 0.2s ease;
  }
  .btn-dark-ghost:hover{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.40);}

  /* ============ FOOTER (minimal) ============ */
  .footer{
    background:var(--dark); color:rgba(255,255,255,0.6);
    padding:var(--space-5) var(--pad-x) var(--space-4);
  }
  .footer-inner{
    max-width:var(--container); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:var(--space-3);
  }
  .footer-brand{font-size:var(--fs-meta); color:#fff; font-weight:500; letter-spacing:0.02em;}
  .footer-links{display:flex; gap:var(--space-3); flex-wrap:wrap;}
  .footer-links a{font-size: var(--fs-meta); color:rgba(255,255,255,0.6); text-decoration:none; transition:color 0.2s ease;}
  .footer-links a:hover{color:#fff;}
  .footer-rights{font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.40);}

  /* Reveal animations */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.7s cubic-bezier(0.22,0.61,0.36,1);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* Responsive */
  @media (max-width:900px){
    .case-hero-content{grid-template-columns:1fr; gap:var(--space-5);}
    .case-title{font-size: var(--fs-display-1);}
    .problem-content, .solution-grid{grid-template-columns:1fr; gap:var(--space-5);}
    .solution-visual{position:static;}
    .compare-head, .compare-row{grid-template-columns:1fr;}
    .compare-with{border:0; border-top:1px solid var(--ink-soft); border-bottom:1px solid var(--ink-soft);}
    .stages-list::before{left:24px;}
    .stage{padding-left:var(--space-7);}
    .stage-num{width:52px; height:52px; font-size:var(--fs-body); top:28px;}
    .impact-grid{grid-template-columns:1fr 1fr;}
    .related-grid{grid-template-columns:1fr;}
    .trans-bar-side{font-size:var(--fs-eyebrow);}
  }
  @media (max-width:600px){
    .impact-grid{grid-template-columns:1fr;}
  }

  /* ════════ Global site shell — header + footer (matches product-development.html) ════════ */
  .header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.95); backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid rgba(229,231,235,0.6);
    padding:var(--space-2) var(--pad-x);
    display:flex; align-items:center;
    transition:background 0.3s ease, border-color 0.3s ease;
  }
  .header-logo{ flex:1 0 0; display:flex; align-items:center; }
  .header-logo img{ height:50px; width:auto; object-fit:contain; }
  .header-nav{ flex:1; display:flex; align-items:center; justify-content:center; gap:28px; }
  .header-nav a{
    font-size:var(--fs-body); font-weight:500; color:var(--ink); letter-spacing:0.2px;
    white-space:nowrap; transition:color 0.2s; text-decoration:none;
  }
  .header-nav a:hover, .header-nav a.active{ color:var(--brand); }
  .header-actions{ flex:1 0 0; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
  .header-btn{
    height:44px; padding:0 20px; border-radius:var(--radius-pill);
    background:var(--brand); color:#fff; font-size:var(--fs-meta); font-weight:500;
    display:inline-flex; align-items:center; gap:var(--space-1); text-decoration:none;
    transition:background 0.2s ease;
  }
  .header-btn:hover{ background:var(--brand-hover); }
  .header-btn svg{ width:14px; height:14px; }

  /* Dropdown */
  .nav-dropdown{ position:relative; display:flex; align-items:center; }
  .nav-dropdown-trigger{
    font-family:'Outfit',sans-serif; font-weight:500; font-size:var(--fs-body); letter-spacing:0.2px;
    color:var(--ink); white-space:nowrap; cursor:pointer;
    display:flex; align-items:center; gap:5px;
    background:none; border:none; padding:0;
    transition:color 0.2s ease;
  }
  .nav-dropdown-trigger:hover{ color:var(--brand); }
  .nav-dropdown-trigger svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; transition:transform 0.35s ease; }
  .nav-dropdown:hover .nav-dropdown-trigger svg{ transform:rotate(180deg); }
  .nav-dropdown-menu{
    position:absolute; top:calc(100% + 14px); left:50%;
    transform:translateX(-50%) translateY(-6px);
    background:#fff; border:1px solid var(--ink-200); border-radius: var(--radius);
    box-shadow:0 12px 36px rgba(16,24,40,0.12);
    min-width:280px; padding:var(--space-1);
    opacity:0; visibility:hidden;
    transition:opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    z-index:200;
  }
  .nav-dropdown:hover .nav-dropdown-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .nav-dropdown-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-radius: var(--radius); text-decoration:none;
    transition:background 0.2s ease;
  }
  .nav-dropdown-item:hover{ background:var(--bg-soft); }
  .nav-dropdown-icon{
    width:36px; height:36px; border-radius: var(--radius);
    background:var(--brand-pastel);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background 0.2s ease;
  }
  .nav-dropdown-item:hover .nav-dropdown-icon{ background:var(--brand); }
  .nav-dropdown-icon svg{ width:18px; height:18px; stroke:var(--brand); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke 0.2s ease; }
  .nav-dropdown-item:hover .nav-dropdown-icon svg{ stroke:#fff; }
  .nav-dropdown-label{ font-size:var(--fs-meta); font-weight:500; color:var(--ink); line-height:1.2; }
  .nav-dropdown-sub{ font-size: var(--fs-meta); font-weight:300; color:var(--ink-mid); margin-top:1px; }

  /* Global footer */
  .footer{
    background:var(--dark);
    padding:var(--space-7) 0 var(--space-4);
    border-top:none;
    color:rgba(255,255,255,0.7);
  }
  .footer .container{ max-width:var(--container); margin:0 auto; padding:0 var(--pad-x); }
  .footer-top{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
    gap:var(--space-5); margin-bottom:56px;
  }
  .footer .logo, .footer .logo a{ color:#FFFFFF; }
  .footer-brand p{
    font-size:var(--fs-body); color:#9CA3AF; line-height:1.5;
    margin:var(--space-2) 0 var(--space-3); font-weight:300;
  }
  .footer-contact{ font-size:var(--fs-meta); color:rgba(255,255,255,0.75); }
  .footer-contact div{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
  .footer-contact svg{ color:rgba(255,255,255,0.6); flex-shrink:0; }
  .footer-col h5{
    font-size:var(--fs-meta); font-weight:500; color:#FFFFFF; margin:0 0 18px;
  }
  .footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
  .footer-col a{
    font-size:var(--fs-meta); color:rgba(255,255,255,0.6); text-decoration:none;
    transition:color 0.2s;
  }
  .footer-col a:hover{ color:#FFFFFF; }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:var(--space-3);
    display:flex; justify-content:space-between; align-items:center;
    font-size: var(--fs-meta); color:rgba(255,255,255,0.5);
    flex-wrap:wrap; gap:var(--space-2);
  }
  .footer-social{ display:flex; gap:12px; }
  .footer-social a{
    width:36px; height:36px; border-radius: var(--radius);
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
    display:grid; place-items:center;
    color:rgba(255,255,255,0.7);
    transition:all 0.2s;
  }
  .footer-social a:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
  .footer-legal{ display:flex; gap:20px; }
  .footer-legal a{ color:rgba(255,255,255,0.5); text-decoration:none; }
  .footer-legal a:hover{ color:#FFFFFF; }
  @media (max-width:1100px){ .footer-top{ grid-template-columns:1fr 1fr; } }
  @media (max-width:1100px){
    .header-nav{ display:none; }
    .header-actions .header-btn{ height:40px; padding:0 var(--space-2); font-size: var(--fs-meta); }
  }
  @media (max-width:480px){
    .footer-top{ grid-template-columns:1fr; gap:var(--space-4); }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }

  /* ════════ F1 — Unified Problem → Transformation (Vertical Flow) ════════ */
  .v3-section{ padding:clamp(var(--space-5),5vw,var(--space-7)) 0; background:#FFFFFF; }
  .f1-section{
    position:relative;
    padding:0;
    background:transparent;
    overflow:hidden;
  }
  .f1-head{ text-align:center; margin-bottom:56px; position:relative; z-index:2; }
  .f1-eyebrow{
    display:inline-flex; align-items:center; gap:var(--space-1);
    font-size: var(--fs-eyebrow); font-weight:500; letter-spacing: normal;
    text-transform: none; color:var(--brand);
    padding:6px 14px; border-radius:var(--radius-pill);
    background:var(--brand-pastel);
    margin-bottom:18px;
  }
  .f1-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); }
  .f1-headline{
    font-size: var(--fs-display-2); font-weight:300;
    letter-spacing:-0.025em; line-height:1.12;
    margin:0 auto 20px; max-width:780px; color:var(--ink);
  }
  .f1-headline em{ font-style:normal; font-weight:500; color:var(--brand); }
  .f1-subtitle{
    font-size:var(--fs-body); color:var(--ink-mid); max-width:540px; margin:0 auto; line-height:1.55;
  }
  .f1-stage{ position:relative; z-index:2; }
  .f1-stage-tag{
    text-align:center; margin-bottom:var(--space-3);
    display:flex; align-items:center; justify-content:center; gap:14px;
  }
  .f1-stage-tag-line{ width:48px; height:1px; }
  .f1-stage-tag-text{
    font-size:var(--fs-eyebrow); font-weight:500; letter-spacing: normal;
    text-transform: none;
  }
  .f1-pains{
    display:flex; flex-wrap:nowrap; justify-content:center; gap:10px;
    max-width:1100px; margin:0 auto;
  }
  .f1-pain-chip{
    display:inline-flex; align-items:center; gap:var(--space-1);
    padding:10px var(--space-2); border-radius:var(--radius-pill);
    background:#FFF4F0;
    border:1px solid rgba(197,48,48,0.14);
    font-size:var(--fs-meta); font-weight:500; color:#5C1F1F;
    line-height:1.3; white-space:nowrap;
    transition:transform 0.2s;
  }
  .f1-pain-chip:nth-child(odd){ transform:rotate(-1.5deg); }
  .f1-pain-chip:nth-child(even){ transform:rotate(1deg); }
  .f1-pain-chip:hover{ transform:scale(1.04) rotate(0); }
  .f1-pain-chip svg{ width:14px; height:14px; color:#C53030; flex:0 0 14px; }
  /* Transition space between pain row and shift row (no marker — stage tags do the work) */
  .f1-transform{
    padding:20px 0;
    position:relative; z-index:3;
  }
  /* Closing caption — sits after the solution row as a summary statement */
  .f1-transform-caption{
    text-align:center;
    font-size:var(--fs-title-m); color:var(--ink); margin-top:28px; font-weight:300;
    letter-spacing:-0.015em;
  }
  .f1-transform-caption em{ font-style:normal; font-weight:500; color:var(--brand); }
  .f1-solutions{
    display:flex; flex-wrap:nowrap; justify-content:center; gap:10px;
    max-width:1100px; margin:0 auto;
  }
  .f1-sol-card{
    display:inline-flex; align-items:center; gap:var(--space-1);
    padding:12px var(--space-2); border-radius: var(--radius);
    background:#FFFFFF; border:1px solid var(--brand-pastel);
    font-size:var(--fs-meta); font-weight:500; color:var(--ink);
    box-shadow:0 4px 14px rgba(21,93,252,0.06);
    line-height:1.3; white-space:nowrap;
    transition:transform 0.2s, box-shadow 0.2s;
  }
  .f1-sol-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(21,93,252,0.12);
  }
  .f1-sol-icon{
    width:28px; height:28px; border-radius: var(--radius);
    background:var(--brand); color:#FFFFFF;
    display:flex; align-items:center; justify-content:center; flex:0 0 28px;
  }
  .f1-sol-icon svg{ width:14px; height:14px; }
  .f1-outcomes{
    margin-top:var(--space-5); padding:var(--space-4);
    background:linear-gradient(180deg, var(--brand-pastel) 0%, #FFFFFF 100%);
    border-radius: var(--radius); border:1px solid rgba(21,93,252,0.10);
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);
    position:relative; z-index:2;
  }
  .f1-out{ text-align:center; padding:0 12px; border-right:1px solid rgba(21,93,252,0.10); }
  .f1-out:last-child{ border-right:none; }
  .f1-out-val{ font-size:var(--ps-text-h1); font-weight:300; letter-spacing:-0.025em; color:var(--brand); line-height:1; }
  .f1-out-cap{ font-size:var(--fs-eyebrow); letter-spacing: normal; text-transform: none; color:var(--ink-mid); margin-top:var(--space-1); font-weight:500; }
  @media (max-width:900px){
    .f1-outcomes{ grid-template-columns:repeat(2,1fr); }
    .f1-out:nth-child(2){ border-right:none; }
  }

  /* ════════ PC3 — Solution: Bento Dashboard + Floating Callouts ════════ */
  .solution-pc3{ padding:clamp(var(--space-5),5vw,var(--space-7)) 0; background:var(--bg-gray); }
  .solution-pc3 .sec-head{ text-align:center; margin-bottom:40px; }
  .solution-pc3 .sec-h2{
    font-size: var(--fs-display-2); font-weight:300;
    letter-spacing:-0.025em; line-height:1.18; color:var(--ink);
    margin:0 auto 14px; max-width:780px;
  }
  .solution-pc3 .sec-h2 em{ font-style:normal; color:var(--brand); font-weight:500; }
  .solution-pc3 .sec-lede{
    font-size:var(--fs-body); line-height:1.55; color:var(--ink-mid);
    max-width:640px; margin:0 auto;
  }

  .pc3-stage{ position:relative; padding:36px 0 var(--space-3); }
  .pc3-mockup-wrap{ position:relative; max-width:1040px; margin:0 auto; }

  .pc3-callout{
    position:absolute;
    background:#FFFFFF;
    border:1px solid var(--ink-soft);
    border-radius: var(--radius);
    padding:var(--space-2) 18px;
    box-shadow:0 16px 36px rgba(16,24,40,0.10);
    width:220px;
    z-index:5;
  }
  .pc3-cc-head{ display:flex; align-items:center; gap:10px; margin-bottom:var(--space-1); }
  .pc3-cc-icon{
    height:44px;
    display:flex; align-items:center; justify-content:flex-start;
    flex:0 0 auto;
  }
  .pc3-cc-icon img{ height:44px; width:auto; max-width:64px; object-fit:contain; display:block; }
  .pc3-cc-icon svg{ width:15px; height:15px; }
  .pc3-cc-tag{
    font-size:var(--fs-eyebrow); letter-spacing: normal; text-transform: none;
    color:var(--brand); font-weight:500; white-space:nowrap;
  }
  .pc3-cc-title{
    font-size:var(--fs-meta); font-weight: 500; color:var(--ink);
    margin:0 0 4px; line-height:1.3; letter-spacing:-0.005em; white-space:nowrap;
  }
  .pc3-cc-desc{ font-size:var(--fs-eyebrow); color:var(--ink-mid); line-height:1.45; margin:0; }
  .pc3-cc-1{ top:75px; left:-200px; }
  .pc3-cc-2{ top:175px; right:-220px; }
  .pc3-cc-3{ top:325px; left:-220px; }
  .pc3-cc-4{ top:425px; right:-210px; }

  .pc3-caps-strip{
    margin-top:40px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    max-width:920px; margin-left:auto; margin-right:auto;
  }
  .pc3-cap-tile{
    padding:18px 20px; border-radius: var(--radius);
    background:#FFFFFF; border:1px solid var(--ink-soft);
    text-align:left;
    transition:transform 0.18s, box-shadow 0.18s;
  }
  .pc3-cap-tile:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(16,24,40,0.06);
  }
  .pc3-cap-tile-icon{
    height:48px;
    display:flex; align-items:center; justify-content:flex-start;
    margin-bottom:12px;
  }
  .pc3-cap-tile-icon img{ height:48px; width:auto; max-width:72px; object-fit:contain; display:block; }
  .pc3-cap-tile-icon svg{ width:16px; height:16px; }
  .pc3-cap-tile-title{
    font-size:var(--fs-meta); font-weight:500; color:var(--ink); margin:0; line-height:1.35;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Dashboard (Bento Layered Dark) */
  .db-app{
    position:relative;
    background:linear-gradient(180deg, #1A1A1C 0%, #232326 100%);
    border-radius:var(--radius); overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 40px 80px rgba(16,24,40,0.18), 0 16px 32px rgba(16,24,40,0.10), 0 0 0 1px rgba(255,255,255,0.06) inset;
    color:#FFFFFF; font-size: var(--fs-meta);
  }
  .db-top{
    display:flex; align-items:center;
    padding:14px var(--space-3);
    background:rgba(255,255,255,0.02);
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .db-logo{ display:inline-flex; align-items:center; }
  .db-logo-img{ height:36px; width:auto; display:block; }
  .db-search-bar{
    flex:1; max-width:380px; margin:0 auto;
    padding:var(--space-1) 14px; border-radius:8px;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    display:flex; align-items:center; gap:10px;
    font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.45);
  }
  .db-search-bar svg{ width:13px; height:13px; }
  .db-search-bar .kbd{
    margin-left:auto; padding:2px 7px; border-radius:4px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
    font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.55); font-family:'Outfit', sans-serif; font-weight:500;
  }
  .db-user{ display:flex; align-items:center; gap:10px; }
  .db-user-info{ text-align:right; }
  .db-user-name{ font-size:var(--fs-eyebrow); font-weight:500; color:#FFFFFF; line-height:1.2; }
  .db-user-meta{ font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.5); margin-top:2px; }
  .db-user-avatar{
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-eyebrow); font-weight: 500; color:#FFFFFF;
    border:1px solid rgba(255,255,255,0.16);
  }
  .db-page{ padding:22px; }
  .db-page-header{
    display:flex; align-items:flex-end; justify-content:space-between;
    margin-bottom:18px; flex-wrap:wrap; gap:18px;
  }
  .db-page-title{
    font-size:var(--ps-text-h3); font-weight:300; letter-spacing:-0.015em; color:#FFFFFF;
    line-height:1.2; margin:0 0 6px;
  }
  .db-page-title em{ font-style:normal; font-weight:500; color:var(--brand-soft); }
  .db-page-sub{ font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.55); }
  .db-tab-group{
    display:flex; gap:4px;
    background:rgba(255,255,255,0.04); padding:4px;
    border-radius:10px; border:1px solid rgba(255,255,255,0.06);
  }
  .db-tab{
    padding:7px 14px; border-radius:7px;
    font-size:var(--fs-eyebrow); font-weight:500; color:rgba(255,255,255,0.6);
    cursor:pointer;
  }
  .db-tab.active{
    background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
    color:#FFFFFF; box-shadow:0 4px 14px rgba(21,93,252,0.32);
  }
  .db-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:var(--space-2); }
  .db-stat{
    padding:14px var(--space-2); border-radius:12px;
    background:rgba(255,255,255,0.025);
    border:1px solid rgba(255,255,255,0.06);
    position:relative; overflow:hidden;
  }
  .db-stat::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--brand), transparent);
    opacity:0.4;
  }
  .db-stat-label{
    font-size:var(--fs-eyebrow); letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(255,255,255,0.5); font-weight:500; margin-bottom:6px;
    display:flex; align-items:center; gap:6px;
  }
  .db-stat-label svg{ width:11px; height:11px; color:var(--brand-soft); }
  .db-stat-value{ font-size:var(--ps-text-h3); font-weight:300; letter-spacing:-0.02em; color:#FFFFFF; line-height:1; }
  .db-stat-trend{
    font-size:var(--fs-eyebrow); color:var(--brand-soft); font-weight:500; margin-top:4px;
    display:flex; align-items:center; gap:4px;
  }
  .db-stat-trend svg{ width:11px; height:11px; }
  .db-filters-card{
    background:rgba(255,255,255,0.025);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px; padding:14px 18px; margin-bottom:14px;
  }
  .db-filters-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; align-items:end; }
  .db-field-label{
    font-size:var(--fs-eyebrow); letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(255,255,255,0.5); font-weight:500; margin-bottom:5px;
  }
  .db-field-input{
    width:100%;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:7px; padding:var(--space-1) 10px;
    font-size:var(--fs-eyebrow); color:#FFFFFF; font-family:inherit;
  }
  .db-field-input.placeholder{ color:rgba(255,255,255,0.4); }
  .db-field-actions{ display:flex; gap:6px; }
  .db-btn{
    padding:7px 14px; border-radius:7px; font-size:var(--fs-eyebrow); font-weight:500;
    cursor:pointer; display:inline-flex; align-items:center; gap:5px;
    font-family:inherit; border:1px solid transparent; white-space:nowrap;
  }
  .db-btn svg{ width:12px; height:12px; }
  .db-btn-secondary{
    background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.75);
    border-color:rgba(255,255,255,0.08);
  }
  .db-btn-primary{
    background:linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
    color:#FFFFFF; font-weight: 500;
    box-shadow:0 4px 12px rgba(21,93,252,0.32);
  }
  .db-table-card{
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px; overflow:hidden;
  }
  .db-table-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 18px;
    background:rgba(255,255,255,0.025);
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .db-table-title{ font-size: var(--fs-meta); font-weight: 500; color:#FFFFFF; display:flex; align-items:center; gap:10px; }
  .db-table-count{
    font-size:var(--fs-eyebrow); padding:3px 9px; border-radius:var(--radius-pill);
    background:rgba(21,93,252,0.18); color:var(--brand-soft); font-weight:500;
  }
  .db-table-tools{ display:flex; gap:6px; }
  .db-tool-btn{
    width:26px; height:26px; border-radius:7px;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.65); cursor:pointer;
  }
  .db-tool-btn svg{ width:12px; height:12px; }
  .db-row{
    display:grid; grid-template-columns:120px 1.6fr 1.3fr 1.2fr 1.1fr 130px;
    gap:14px; padding:12px 18px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    align-items:center;
  }
  .db-row.head-row{
    background:rgba(255,255,255,0.02);
    font-size:var(--fs-eyebrow); letter-spacing:0.12em; text-transform:uppercase;
    color:rgba(255,255,255,0.55); font-weight:500;
  }
  .db-row:last-child{ border-bottom:none; }
  .db-cell{ font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.85); }
  .db-cell strong{ color:#FFFFFF; font-weight:500; }
  .db-cell-id{ font-family:'Outfit', sans-serif; font-size:var(--fs-eyebrow); letter-spacing:0.02em; color:rgba(255,255,255,0.62); }
  .db-status-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 9px; border-radius:var(--radius-pill);
    font-size:var(--fs-eyebrow); font-weight:500; white-space:nowrap;
  }
  .db-status-pill.approved{ background:rgba(21,93,252,0.18); color:var(--brand-soft); border:1px solid rgba(21,93,252,0.32); }
  .db-status-pill.in-progress{ background:rgba(217,119,6,0.18); color:#FCD34D; border:1px solid rgba(217,119,6,0.32); }
  .db-status-pill .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }
  .db-actions{ display:flex; gap:5px; }
  .db-action{
    width:26px; height:26px; border-radius:7px;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.6); cursor:pointer;
  }
  .db-action svg{ width:12px; height:12px; }
  .db-page-footer{
    display:flex; align-items:center; justify-content:flex-end;
    gap:14px; padding:12px 18px;
    background:rgba(255,255,255,0.02);
    border-top:1px solid rgba(255,255,255,0.06);
    font-size:var(--fs-eyebrow); color:rgba(255,255,255,0.55);
  }

  @media (max-width:1440px){
    /* Not enough horizontal room for floating callouts — hide them,
       give the mockup the full space it needs */
    .pc3-callout{ display:none; }
    .pc3-mockup-wrap{ max-width:1040px; }
  }
  @media (max-width:1100px){
    .pc3-callout{ display:none; }
    .pc3-mockup-wrap{ max-width:960px; }
  }
  @media (max-width:900px){
    .db-stats, .pc3-caps-strip{ grid-template-columns:repeat(2,1fr); }
    .db-filters-grid{ grid-template-columns:repeat(2,1fr); }
  }

  /* ════════ Deel-Style Horizontal Timeline — How It Works ════════ */
  .hww-section{
    background:var(--bg-gray);
    padding:clamp(60px,9vw,100px) var(--pad-x);
  }
  .hww-header{ text-align:center; margin-bottom:var(--space-5); }
  .hww-eyebrow{
    display:block; font-size: var(--fs-eyebrow); font-weight:500;
    letter-spacing: normal; text-transform: none;
    color:var(--brand); margin-bottom:14px;
  }
  .hww-heading{
    font-size: var(--fs-display-2); font-weight:300;
    color:var(--ink); letter-spacing:-0.03em; line-height:1.15;
    margin:0 0 14px;
  }
  .hww-heading em{ font-style:normal; font-weight:500; color:var(--brand); }
  .hww-subhead{
    font-size:var(--fs-title-m); font-weight:300; color:var(--ink-mid);
    max-width:620px; margin:0 auto; line-height:1.5;
  }
  .deel-timeline{ max-width:var(--container); margin:0 auto; padding:var(--space-3) 0 0; }
  .deel-labels{
    display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
    margin-bottom:22px; align-items:end;
  }
  .deel-labels .label{
    text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .deel-labels .label .num{
    font-size:var(--fs-title-m); font-weight: 500; color:var(--brand); letter-spacing:-0.01em;
  }
  .deel-labels .label .ttl{
    font-size:var(--fs-title-m); font-weight:500; color:var(--ink);
    letter-spacing:-0.01em; line-height:1.3;
    min-height:2.6em;
    display:flex; align-items:flex-start; justify-content:center; text-align:center;
  }
  .deel-track{ position:relative; height:24px; margin-bottom:22px; overflow:visible; }
  .deel-track::before{
    content:''; position:absolute;
    left:10%; right:10%; top:50%; transform:translateY(-50%);
    border-top:1.5px dashed var(--brand-border);
    z-index:0;
  }
  .deel-track::after{
    content:''; position:absolute;
    left:10%; top:50%; transform:translateY(-50%);
    height:1.5px; width:0%;
    background:var(--brand); border-radius: var(--radius); z-index:1;
  }
  .deel-timeline.is-active .deel-track::after{
    animation:deel-line-fill 4s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  @keyframes deel-line-fill{
    0%{ width:0%; }   6%{ width:0%; }
    19%{ width:16.6%; }   25%{ width:16.6%; }
    38%{ width:33.3%; }   44%{ width:33.3%; }
    57%{ width:50%; }   63%{ width:50%; }
    76%{ width:66.6%; }   82%{ width:66.6%; }
    95%{ width:83.3%; }   100%{ width:83.3%; }
  }
  .deel-dots{
    position:relative; display:grid; grid-template-columns:repeat(6,1fr);
    height:100%; z-index:2;
  }
  .deel-dots .dot-cell{ display:flex; align-items:center; justify-content:center; }
  .deel-dots .dot{
    width:12px; height:12px; border-radius:50%;
    background:var(--brand-border); box-shadow:0 0 0 4px var(--bg-soft);
  }
  .deel-timeline.is-active .deel-dots .dot{
    animation:deel-dot-fill 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  .deel-timeline.is-active .deel-dots .dot-cell:nth-child(1) .dot{ animation-delay:0s; }
  .deel-timeline.is-active .deel-dots .dot-cell:nth-child(2) .dot{ animation-delay:0.76s; }
  .deel-timeline.is-active .deel-dots .dot-cell:nth-child(3) .dot{ animation-delay:1.52s; }
  .deel-timeline.is-active .deel-dots .dot-cell:nth-child(4) .dot{ animation-delay:2.28s; }
  .deel-timeline.is-active .deel-dots .dot-cell:nth-child(5) .dot{ animation-delay:3.04s; }
  .deel-timeline.is-active .deel-dots .dot-cell:nth-child(6) .dot{ animation-delay:3.80s; }
  @keyframes deel-dot-fill{
    0%{ background:var(--brand-border); transform:scale(1); }
    60%{ transform:scale(1.35); }
    100%{ background:var(--brand); transform:scale(1.15); }
  }
  @media (prefers-reduced-motion:reduce){
    .deel-track::after{ width:80%; animation:none; }
    .deel-dots .dot{ background:var(--brand); transform:scale(1.15); }
  }
  .deel-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
  .deel-card{
    background:#fff;
    border:1px solid var(--ink-soft);
    border-radius: var(--radius);
    padding:26px 22px;
    text-align:center;
    transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    min-height:220px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .deel-card:hover{
    border-color:var(--brand-border);
    box-shadow:0 16px 36px rgba(21,93,252,0.08);
    transform:translateY(-3px);
  }
  .deel-card p{
    font-size: var(--fs-title-m); font-weight:300; color:var(--ink-mid); line-height:1.5; margin:0;
  }
  @media (max-width:1100px){
    .deel-labels, .deel-dots, .deel-cards{ grid-template-columns:repeat(3,1fr); }
    .deel-track::before{ left:16%; right:16%; }
    .deel-cards .deel-card:nth-child(n+4){ display:none; }
    .deel-labels .label:nth-child(n+4){ display:none; }
    .deel-dots .dot-cell:nth-child(n+4){ display:none; }
  }
  @media (max-width:768px){
    .deel-labels, .deel-dots, .deel-cards{ grid-template-columns:1fr; }
    .deel-track{ display:none; }
    .deel-labels .label, .deel-cards .deel-card{ display:flex !important; }
    .deel-labels .label{ margin-top:12px; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     Button system normalization — 1 size (44px height / 14px text / 20px
     side padding / 999px radius / 500 weight) applied to every button-like
     class on every page. Color/fill/border rules from existing classes are
     preserved — primary stays filled-blue, secondary/outline stays outlined.
     Only the dimensions are unified.
     ═══════════════════════════════════════════════════════════════════════ */
  .btn, .btn-primary, .btn--primary, .btn-secondary,
  .hero-cta-btn, .ag-cta, .cc-left-cta, .cc-left-cta-blue,
  .fcta-btn, .fcta-submit, .view-all-btn, .sols-panel-cta,
  .hww-btn-primary, .hww-btn-outline, .header-btn,
  .lead-cta-card, .poc-cta, .sf-cta-btn-p, .sf-cta-btn-s {
    height: 44px !important;
    padding: 0 20px !important;
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-pill) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-1) !important;
    white-space: nowrap !important;
  }

  /* No-italics sitewide override — force normal font-style on em/i/etc. */
  em, i, cite, dfn, var, address, .em, [class*="em-"] { font-style: normal !important; }

  /* INF PT Clinical Portal — imported design system, scoped */

/* PrimeSoft brand-blue overrides */
:root{
  --accent:#155DFC;
  --accent-light:#EAF1FF;
  --accent-text:#155DFC;
}
.inf-panel{
  font-family:'Outfit',sans-serif;
  color:var(--text); background:var(--bg);
  border:1px solid var(--ink-200); border-radius:20px;
  overflow:hidden;
  box-shadow: 0 32px 80px rgba(16,24,40,0.10), 0 8px 20px rgba(16,24,40,0.06);
  display:grid; grid-template-columns: 220px 1fr; grid-template-rows: 60px 1fr;
  min-height:720px; max-height:900px;
}
.inf-panel .sidebar{
  position:static !important; transform:none !important;
  grid-row: 1 / -1; width:220px !important;
  display:flex !important;
}
.inf-panel .main{
  grid-column: 2; grid-row: 1 / -1;
  display:flex !important; flex-direction:column;
  min-width:0; height:auto !important;
}
.inf-panel .topbar{ height:60px; flex-shrink:0; }
.inf-panel .content{
  flex:1; overflow:auto;
  padding: 20px var(--space-3);
  scrollbar-width: none;
}
.inf-panel .content::-webkit-scrollbar{ display:none; width:0; height:0; }
.inf-panel .s-nav{ scrollbar-width:none; }
.inf-panel .s-nav::-webkit-scrollbar{ display:none; width:0; height:0; }
.inf-panel .page{ display:block !important; }
.inf-panel .hbg, .inf-panel #close-nav, .inf-panel .ndot{ display:none !important; }

/* NOTE: a lifted "offline fallback" @font-face for 'Outfit' (local-only src →
   local('Outfit'/'Inter'/'system-ui'), no url()) used to live here. Because it
   redeclared the 'Outfit' family AFTER the global @fontsource webfont, it
   shadowed the real Outfit and the whole page rendered in a system font. Removed
   so this page uses the global Outfit webfont like every other page. */

.inf-panel {box-sizing:border-box;margin:0;padding:0}
:root {
  --bg:#F9FAFB;--surface:#fff;--surface2:#F3F4F6;--surface3:#E9EAEC;
  --border:#F3F4F6;
  --text:#0d1226;--text2:#4a5068;--text3:#8891b0;
  --accent:#1242c8;--accent-light:#d7e6ff;--accent-text:#1242c8;
  --green:#16a34a;--green-light:#dcfce7;--green-text:#15803d;
  --yellow:#d97706;--yellow-light:#fef3c7;--yellow-text:#b45309;
  --red:#dc2626;--red-light:#fee2e2;--red-text:#b91c1c;
  --blue:#0284c7;--blue-light:#e0f2fe;--blue-text:#0369a1;
  --purple:#7c3aed;--purple-light:#ede9fe;--purple-text:#6d28d9;
  --nav-w:240px;--header-h:60px;--radius:12px;--radius-sm:8px;
  --tr:0.18s cubic-bezier(0.4,0,0.2,1);
}
.inf-panel [data-theme="dark"] {
  --bg:#0b0e1a;--surface:#141827;--surface2:#1a1f33;--surface3:#1f2640;
  --border:#252d47;
  --text:#e8ecf8;--text2:#8891b0;--text3:#4a5068;
  --accent-light:#0a2f94;--green-light:#14532d;--yellow-light:#78350f;
  --red-light:#7f1d1d;--blue-light:#0c4a6e;--purple-light:#3b0764;
  --accent-text:#93c5fd;--green-text:#22C55E;--yellow-text:#fbbf24;
  --red-text:#fca5a5;--blue-text:#7dd3fc;--purple-text:#c4b5fd;
}
.inf-panel, .inf-panel {height:100%;font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);font-size: var(--fs-meta);line-height:1.5;overflow:hidden}
.inf-panel .app {display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.inf-panel .sidebar {width:var(--nav-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:transform var(--tr)}
.inf-panel .s-logo {padding:var(--space-2);display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.inf-panel .logo-mark {width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inf-panel .logo-mark svg {width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2}
.inf-panel .logo-text {font-size: var(--fs-meta);font-weight:500;color:var(--text);line-height:1.2}
.inf-panel .logo-sub {font-size:var(--fs-eyebrow);color:var(--text3)}
.inf-panel .s-nav {flex:1;overflow-y:auto;padding:10px var(--space-1)}
.inf-panel .nav-sec {margin-bottom:4px}
.inf-panel .nav-lbl {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:1px;padding:10px 10px 4px;display:block}
.inf-panel .nav-item {display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text2);font-size: var(--fs-meta);font-weight:400;transition:all var(--tr);user-select:none}
.inf-panel .nav-item:hover {background:var(--surface2);color:var(--text)}
.inf-panel .nav-item.active {background:var(--accent-light);color:var(--accent-text);font-weight:500}
.inf-panel .nav-item svg {width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.inf-panel .nbadge {margin-left:auto;background:var(--red);color:var(--surface);font-size:var(--fs-eyebrow);padding:2px 6px;border-radius:99px;font-weight:500;min-width:18px;text-align:center}
.inf-panel .nbadge.y {background:var(--yellow)}
.inf-panel .s-user {padding:12px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:9px;cursor:pointer;transition:background var(--tr)}
.inf-panel .s-user:hover {background:var(--surface2)}
.inf-panel .uav {width:32px;height:32px;border-radius:50%;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:var(--fs-eyebrow);font-weight:500;color:#7c3aed;flex-shrink:0}

/* MAIN */
.inf-panel .main {flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.inf-panel .topbar {height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 20px;flex-shrink:0}
.inf-panel .tb-title {font-size:var(--fs-body);font-weight:500;color:var(--text);flex:1}
.inf-panel .sbox {display:flex;align-items:center;gap:var(--space-1);background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;min-width:200px;transition:border-color var(--tr)}
.inf-panel .sbox:focus-within {border-color:var(--accent)}
.inf-panel .sbox svg {width:13px;height:13px;stroke:var(--text3);fill:none;stroke-width:2;flex-shrink:0}
.inf-panel .sbox input {background:none;border:none;outline:none;font-size:var(--fs-eyebrow);color:var(--text);font-family:'Outfit',sans-serif;width:140px}
.inf-panel .sbox input::placeholder {color:var(--text3)}
.inf-panel .ibt {width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface2);cursor:pointer;transition:all var(--tr);position:relative;flex-shrink:0}
.inf-panel .ibt:hover {background:var(--surface3)}
.inf-panel .ibt svg {width:14px;height:14px;stroke:var(--text2);fill:none;stroke-width:2}
.inf-panel .ndot {position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--red);border-radius:50%;border:1.5px solid var(--surface)}
.inf-panel .content {flex:1;overflow-y:auto;padding:20px}

/* PAGES */
.inf-panel .page {display:none}
.inf-panel .page.active {display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── DRILL-DOWN HOVER ELEVATION ── */
.inf-panel .clickable {cursor:pointer;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)}
.inf-panel .clickable:hover {transform:translateY(-2px);border-color:var(--border)!important}
.inf-panel .clickable:active {transform:translateY(0)}

/* KPI CARDS */
.inf-panel .kpi-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.inf-panel .kpi-card {background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:transform var(--tr),border-color var(--tr)}
.inf-panel .kpi-card:hover {transform:translateY(-2px);border-color:var(--border)}

/* ── LATEST RESULT PREVIEW CARD ── */
.inf-panel .lrp-card {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);margin-bottom:14px}
.inf-panel .lrp-card:hover {transform:translateY(-1px);border-color:var(--accent)}
.inf-panel .lrp-card:active {transform:translateY(0)}
.inf-panel .lrp-pulse {width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0}
.inf-panel .lrp-pulse.y {background:var(--yellow);animation:pulse 2s infinite}
.inf-panel .lrp-pulse.r {background:var(--red);animation:pulse 1.5s infinite}

/* ── SECTION DIVIDERS WITH LABELS ── */
.inf-panel .section-zone-label {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;margin-top:4px;display:flex;align-items:center;gap:var(--space-1)}
.inf-panel .section-zone-label::after {content:'';flex:1;height:1px;background:var(--border)}

/* ── EMPTY STATE INLINE ── */
.inf-panel .empty-inline {display:flex;align-items:center;gap:10px;padding:var(--space-2) 18px;color:var(--text3)}
.inf-panel .empty-inline svg {width:18px;height:18px;stroke:var(--green-text);fill:none;stroke-width:2;flex-shrink:0}
.inf-panel .empty-inline.quiet {opacity:.65}
.inf-panel .kpi-lbl {font-size: var(--fs-meta);color:var(--text2);margin-bottom:var(--space-1);font-weight:400}
.inf-panel .kpi-val {font-size:var(--ps-text-h1);font-weight:500;color:var(--text);line-height:1}
.inf-panel .kpi-sub {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:4px}
.inf-panel .kpi-sub.up {color:var(--green-text)}.inf-panel .kpi-sub.dn {color:var(--red-text)}
.inf-panel .kpi-ic {width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inf-panel .kpi-ic svg {width:22px;height:22px;fill:none;stroke-width:2}
.inf-panel .kpi-ic.bl {background:#EFF4FF}.inf-panel .kpi-ic.bl svg {stroke:#4378F4}
.inf-panel .kpi-ic.gr {background:#ECFDF5}.inf-panel .kpi-ic.gr svg {stroke:#22C55E}
.inf-panel .kpi-ic.yl {background:#FFF4E6}.inf-panel .kpi-ic.yl svg {stroke:#F97316}
.inf-panel .kpi-ic.rd {background:#FFF1F1}.inf-panel .kpi-ic.rd svg {stroke:var(--danger-text)}

/* SECTION CARDS */
.inf-panel .sc {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.inf-panel .sc-head {padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.inf-panel .sc-title {font-size:var(--fs-meta);font-weight:500;color:var(--text)}
.inf-panel .sc-body {padding:14px 18px}
.inf-panel .g2 {display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inf-panel .g3 {display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* BUTTONS */
.inf-panel .btn {display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:100px;font-size: var(--fs-meta);font-weight:500;cursor:pointer;transition:all var(--tr);border:1px solid transparent;font-family:'Outfit',sans-serif;white-space:nowrap}
.inf-panel .btn svg {width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.inf-panel .bp, .inf-panel .btn.primary {background:#1242C8;border-color:#1242C8;color:#fff}
.inf-panel .bp:hover, .inf-panel .btn.primary:hover {background:#0A2F94;border-color:#0A2F94}
.inf-panel .bp:active, .inf-panel .btn.primary:active {background:#041C63;border-color:#041C63}
.inf-panel .bs, .inf-panel .btn.default {background:#fff;border-color:#E0E0E0;color:#616161}
.inf-panel .bs:hover, .inf-panel .btn.default:hover {border-color:#757575;color:#212121}
.inf-panel .bs:active, .inf-panel .btn.default:active {background:#F5F5F5;border-color:#E0E0E0}
.inf-panel .bs:disabled, .inf-panel .btn.default.disabled {background:var(--bg-soft);border-color:#E0E0E0;color:#BDBDBD;cursor:not-allowed}
.inf-panel .bxs {padding:5px 14px;font-size:var(--fs-eyebrow)}
.inf-panel .btn-xs {display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:100px;font-size:var(--fs-eyebrow);font-weight:500;cursor:pointer;border:1px solid;font-family:'Outfit',sans-serif;white-space:nowrap;transition:all var(--tr)}
.inf-panel .btn-xs.primary, .inf-panel .bxp {background:#1242C8;border-color:#1242C8;color:#fff}
.inf-panel .btn-xs.primary:hover, .inf-panel .bxp:hover {background:#0A2F94;border-color:#0A2F94}
.inf-panel .btn-xs.default {background:#fff;border-color:#E0E0E0;color:#616161}
.inf-panel .btn-xs.default:hover {border-color:#757575;color:#212121}
.inf-panel .bxr {background:var(--red-light);border-color:var(--red-light);color:var(--red-text)}
.inf-panel .bxb {background:var(--blue-light);border-color:var(--blue-light);color:var(--blue-text)}
.inf-panel .bxg {background:var(--green-light);border-color:var(--green-light);color:var(--green-text)}

/* BADGES */
.inf-panel .badge {display:inline-flex;align-items:center;padding:2px var(--space-1);border-radius:99px;font-size:var(--fs-eyebrow);font-weight:400;white-space:nowrap}
.inf-panel .bg {background:var(--green-light);color:var(--green-text)}
.inf-panel .by {background:var(--yellow-light);color:var(--yellow-text)}
.inf-panel .br {background:var(--red-light);color:var(--red-text)}
.inf-panel .bb {background:var(--blue-light);color:var(--blue-text)}
.inf-panel .bp2 {background:var(--blue-light);color:var(--blue-text)}
.inf-panel .bt {background:var(--blue-light);color:var(--blue-text)}
.inf-panel .bgr {background:var(--surface2);color:var(--text2)}
.inf-panel .bt {background:#E0F7FA;color:#00796B}
.inf-panel .bpu {background:var(--purple-light);color:var(--purple-text)}
.inf-panel .bpr {background:var(--blue-light);color:var(--blue-text);animation:pulse 2s infinite}

/* TABLES */
.inf-panel .dt {width:100%;border-collapse:collapse;font-size:var(--fs-eyebrow)}
.inf-panel .dt th {padding:12px 13px;text-align:left;font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;background:var(--surface2);border-bottom:1px solid var(--border);position:sticky;top:0;white-space:nowrap}
.inf-panel .dt td {padding:11px 13px;color:var(--text2);border-bottom:1px solid var(--border)}
.inf-panel .dt tbody tr {cursor:pointer;transition:background var(--tr)}
.inf-panel .dt tbody tr:hover td {background:var(--surface2)}
.inf-panel .dt tbody tr:last-child td {border-bottom:none}
.inf-panel .bold {font-weight:500;color:var(--text)}
.inf-panel .tw {overflow-x:auto;max-height:320px;overflow-y:auto}

/* ATTENTION ITEMS */
.inf-panel .attn {display:flex;align-items:center;gap:12px;padding:11px var(--space-2);border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--tr),transform var(--tr)}
.inf-panel .attn:last-child {border-bottom:none}
.inf-panel .attn:hover {background:var(--surface2);transform:translateX(2px)}
.inf-panel .attn:active {transform:translateX(0)}
.inf-panel .attn-bar {width:4px;align-self:stretch;border-radius:2px;flex-shrink:0}
.inf-panel .attn-bar.r {background:var(--red)}
.inf-panel .attn-bar.y {background:var(--yellow)}
.inf-panel .attn-ic {width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inf-panel .attn-ic svg {width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.inf-panel .attn-ic.r {background:var(--red-light);color:var(--red-text)}
.inf-panel .attn-ic.y {background:var(--yellow-light);color:var(--yellow-text)}
.inf-panel .attn-info {flex:1;min-width:0}
.inf-panel .attn-name {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text)}
.inf-panel .attn-meta {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ACTIVITY ITEMS */
.inf-panel .act {display:flex;align-items:flex-start;gap:11px;padding:13px var(--space-1);border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--tr);border-radius:var(--radius-sm)}
.inf-panel .act:last-child {border-bottom:none}
.inf-panel .act:hover {background:var(--surface2)}
.inf-panel .act-ic {width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inf-panel .act-ic svg {width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.inf-panel .act-title {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text);line-height:1.4}
.inf-panel .act-sub {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:6px}

/* RECENT PATIENT CARDS */
.inf-panel .rp {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr),background var(--tr)}
.inf-panel .rp:hover {border-color:var(--accent);background:var(--surface);transform:translateY(-2px);}
.inf-panel .rp:active {transform:translateY(0);box-shadow:none}
.inf-panel .rpav {width:36px;height:36px;border-radius:50%;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:var(--fs-eyebrow);font-weight:500;color:#7c3aed;flex-shrink:0}

/* PROCESSING WIDGET */
.inf-panel .prow {display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) 0;border-bottom:1px solid var(--border)}
.inf-panel .prow:last-child {border-bottom:none}
.inf-panel .prow-lbl {font-size:var(--fs-eyebrow);color:var(--text2);display:flex;align-items:center;gap:7px}
.inf-panel .prow-val {font-size: var(--fs-meta);font-weight:500;color:var(--text)}
.inf-panel .pbar {height:4px;background:var(--surface2);border-radius:99px;overflow:hidden;margin-top:3px;width:70px}
.inf-panel .pbar-fill {height:100%;border-radius:99px}

/* BAR CHART */
.inf-panel .barchart {display:flex;align-items:flex-end;gap:7px;height:110px}
.inf-panel .bc {display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer}
.inf-panel .bc:hover .bar {opacity:.75}
.inf-panel .bar {width:100%;border-radius:4px 4px 0 0;position:relative;transition:opacity var(--tr)}
.inf-panel .barlbl {font-size:var(--fs-eyebrow);color:var(--text3)}
.inf-panel .barval {color:var(--text3)!important;position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:var(--fs-eyebrow);color:var(--text2);font-weight:500;white-space:nowrap}

/* DONUT */
.inf-panel .donut-wrap {display:flex;align-items:center;gap:var(--space-2)}
.inf-panel .dleg {display:flex;flex-direction:column;gap:7px;flex:1}
.inf-panel .dleg-item {display:flex;align-items:center;gap:7px;font-size:var(--fs-eyebrow);color:var(--text2);cursor:pointer}
.inf-panel .dleg-item:hover {color:var(--text)}
.inf-panel .dleg-dot {width:9px;height:9px;border-radius:50%;flex-shrink:0}
.inf-panel .dleg-n {margin-left:auto;font-size: var(--fs-meta);font-weight:500;color:var(--text)}

/* BREADCRUMB */
.inf-panel .bc-wrap {display:flex;align-items:center;gap:5px;font-size:var(--fs-eyebrow);color:var(--text3);margin-bottom:14px}
.inf-panel .bc-lnk {cursor:pointer;color:var(--accent)}.inf-panel .bc-lnk:hover {text-decoration:underline}

/* FILTER ROW */
.inf-panel .frow {display:flex;gap:var(--space-1);align-items:center;margin-bottom:12px;flex-wrap:wrap}
.inf-panel .fsel {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-1) 12px;font-size:var(--fs-eyebrow);color:var(--text2);font-family:'Outfit',sans-serif;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none}
.inf-panel .finput {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;font-size:var(--fs-eyebrow);color:var(--text);font-family:'Outfit',sans-serif;outline:none;width:190px}
.inf-panel .finput::placeholder {color:var(--text3)}
.inf-panel .finput:focus, .inf-panel .fsel:focus {border-color:var(--accent)}

/* TABS */
.inf-panel .tabs {display:flex;border-bottom:1px solid var(--border);margin-bottom:14px}
.inf-panel .tab {padding:9px var(--space-2);font-size:var(--fs-eyebrow);color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--tr);margin-bottom:-1px}
.inf-panel .tab:hover {color:var(--text2)}
.inf-panel .tab.active {color:var(--green-text);border-bottom-color:var(--green);font-weight:500}

/* METRIC ROWS */
.inf-panel .mrow {display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.inf-panel .mrow:last-child {border-bottom:none}
.inf-panel .mrow-name {font-size:var(--fs-eyebrow);color:var(--text2)}
.inf-panel .mrow-vals {display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.inf-panel .mv {text-align:center}
.inf-panel .mv .v {font-size:var(--fs-meta);font-weight:500;color:var(--text)}
.inf-panel .mv .l {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:1px}
.inf-panel .mv.abn .v {color:var(--red-text)}.inf-panel .mv.brd .v {color:var(--yellow-text)}.inf-panel .mv.nrm .v {color:var(--green-text)}
.inf-panel .mchg {font-size:var(--fs-eyebrow);padding:2px 7px;border-radius:4px;font-weight:500}
.inf-panel .mchg.pos {background:var(--green-light);color:var(--green-text)}
.inf-panel .mchg.neg {background:var(--red-light);color:var(--red-text)}
.inf-panel .mchg.neu {background:var(--surface2);color:var(--text3)}

/* TOOLTIP */
.inf-panel .tip {position:relative;display:inline-flex;align-items:center;gap:3px;border-bottom:1px dashed var(--text3);cursor:help}
.inf-panel .tip::after {content:attr(data-t);position:absolute;bottom:calc(100%+6px);left:50%;transform:translateX(-50%);background:var(--text);color:#e8ecf8;font-size:var(--fs-eyebrow);padding:5px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:999;border:1px solid #252d47}
.inf-panel .tip:hover::after {opacity:1}

/* PROGRESS */
.inf-panel .prog {height:5px;background:var(--surface2);border-radius:99px;overflow:hidden}
.inf-panel .prog-fill {height:100%;border-radius:99px;background:var(--green)}
.inf-panel .prog-fill.y {background:var(--yellow)}.inf-panel .prog-fill.r {background:var(--red)}.inf-panel .prog-fill.b {background:var(--accent)}

/* SESSION BAR */
.inf-panel .sbar {display:flex;align-items:center;gap:var(--space-1);background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 14px;margin-bottom:14px;font-size:var(--fs-eyebrow);color:var(--text3);flex-wrap:wrap}
.inf-panel .sbar svg {width:13px;height:13px;stroke:var(--green-text);fill:none;stroke-width:2;flex-shrink:0}
.inf-panel .dot {width:7px;height:7px;border-radius:50%;flex-shrink:0}
.inf-panel .dot.g {background:var(--green)}.inf-panel .dot.y {background:var(--yellow);animation:pulse 2s infinite}
.inf-panel .stimer {margin-left:auto;font-size:var(--fs-eyebrow);color:var(--text3);font-weight:400;display:flex;align-items:center;gap:4px}

/* INFO/WARN/ERR BOXES */
.inf-panel .ebox {border-radius:var(--radius-sm);padding:10px 14px;font-size:var(--fs-eyebrow);display:flex;gap:9px;align-items:flex-start;margin-bottom:var(--space-1)}
.inf-panel .ebox svg {width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;margin-top:1px}
.inf-panel .ebox.e {background:var(--red-light);border:1px solid var(--red);border-left:3px solid var(--red);color:var(--red-text)}
.inf-panel .ebox.w {background:var(--yellow-light);border:1px solid var(--yellow);border-left:3px solid var(--yellow);color:var(--yellow-text)}
.inf-panel .ebox.i {background:var(--blue-light);border:1px solid var(--blue);border-left:3px solid var(--blue);color:var(--blue-text)}

/* EMPTY STATE */
.inf-panel .empty {text-align:center;padding:28px 20px;color:var(--text3)}
.inf-panel .empty svg {width:28px;height:28px;stroke:var(--text3);fill:none;stroke-width:1.5;display:block;margin:0 auto var(--space-1)}
.inf-panel .empty-t {font-size: var(--fs-meta);font-weight:500;color:var(--text2);margin-bottom:4px}
.inf-panel .empty-d {font-size:var(--fs-eyebrow)}

/* FOOD TEST */
.inf-panel .loc-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.inf-panel .loc-card {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;text-align:center}
.inf-panel .loc-n {font-size:var(--fs-eyebrow);color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.inf-panel .loc-v {font-size:var(--ps-text-body);font-weight:500;color:var(--text)}
.inf-panel .loc-s {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:2px}
.inf-panel .loc-c {font-size:var(--fs-eyebrow);margin-top:5px;font-weight:500}

/* EXPORT */
.inf-panel .exp-card {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2);display:flex;align-items:center;gap:13px;transition:border-color var(--tr)}
.inf-panel .exp-card:hover {border-color:var(--border)}
.inf-panel .exp-ic {width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inf-panel .exp-ic svg {width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}

/* SCROLLBAR */
.inf-panel::-webkit-scrollbar {width:4px;height:4px}
.inf-panel::-webkit-scrollbar-thumb {background:var(--border);border-radius:99px}
.inf-panel::-webkit-scrollbar-track {background:transparent}

/* MOBILE */
.inf-panel .hbg {display:none;cursor:pointer;flex-direction:column;gap:4px;width:34px;height:34px;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface2)}
.inf-panel .hbg span {width:16px;height:1.5px;background:var(--text2);border-radius:2px;display:block}
.inf-panel .ov {display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99;backdrop-filter:blur(2px)}

/* PROFILE MODAL */
.inf-panel .pm-ov {position:fixed;inset:0;background:rgba(0,0,0,.38);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.inf-panel .pm-ov.open {opacity:1;pointer-events:all}
.inf-panel .pm-modal {background:var(--surface);border-radius:var(--radius);width:440px;max-width:calc(100vw - 32px);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;position:relative;transform:scale(.94) translateY(12px);opacity:0;transition:transform .28s cubic-bezier(.34,1.4,.64,1),opacity .22s ease}
.inf-panel .pm-ov.open .pm-modal {transform:scale(1) translateY(0);opacity:1}
.inf-panel .pm-banner {background:var(--surface2);padding:28px var(--space-3) 0;display:flex;justify-content:center;position:relative}
.inf-panel .pm-x {position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--tr)}
.inf-panel .pm-x:hover {background:var(--surface2)}
.inf-panel .pm-x svg {width:13px;height:13px;stroke:var(--text2);fill:none;stroke-width:2}
.inf-panel .pm-avw {display:inline-block;margin-bottom:-44px}
.inf-panel .pm-av {width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:var(--ps-text-body);font-weight:500;color:#fff;border:4px solid var(--surface)}
.inf-panel .pm-info {padding:var(--space-5) var(--space-3) 20px;text-align:center;background:var(--surface);flex-shrink:0}
.inf-panel .pm-name {font-size:var(--ps-text-h3);font-weight:500;color:var(--text);margin-bottom:3px}
.inf-panel .pm-desg {font-size:var(--fs-eyebrow);color:var(--text3);margin-bottom:3px}
.inf-panel .pm-org {font-size:var(--fs-eyebrow);color:var(--accent-text);margin-bottom:14px}
.inf-panel .pm-act {display:inline-flex;align-items:center;gap:5px;background:var(--green-light);color:var(--green-text);font-size:var(--fs-eyebrow);font-weight:500;padding:4px 12px;border-radius:99px;border:1px solid var(--green-light)}
.inf-panel [data-theme="dark"] .pm-act {background:var(--green-light);color:var(--green-text)}
.inf-panel .pm-actd {width:7px;height:7px;border-radius:50%;background:var(--green)}
.inf-panel .pm-tabs {display:flex;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.inf-panel .pm-tab {flex:1;padding:11px var(--space-1);font-size:var(--fs-eyebrow);color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--tr);text-align:center;white-space:nowrap}
.inf-panel .pm-tab:hover {color:var(--text2)}
.inf-panel .pm-tab.active {color:var(--accent-text);border-bottom-color:var(--accent);font-weight:500}
.inf-panel .pm-body {flex:1;overflow-y:auto;background:var(--surface)}
.inf-panel .pm-grid {display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.inf-panel .pm-cell {padding:var(--space-2) 20px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.inf-panel .pm-cell:nth-child(even) {border-right:none}
.inf-panel .pm-cell-l {font-size:var(--fs-eyebrow);color:var(--text3);margin-bottom:4px}
.inf-panel .pm-cell-v {font-size: var(--fs-meta);font-weight:500;color:var(--text)}
.inf-panel .pm-cell-s {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:2px}
.inf-panel .pm-sl {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:1px;padding:14px 18px 6px;display:block}
.inf-panel .pm-sg {display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:4px 18px 14px}
.inf-panel .pm-sv {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.inf-panel .pm-lr {margin:0 18px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.inf-panel .pm-lrr {display:flex;justify-content:space-between;align-items:center;padding:9px 13px;border-bottom:1px solid var(--border)}
.inf-panel .pm-lrr:last-child {border-bottom:none}
.inf-panel .pm-lrk {font-size:var(--fs-eyebrow);color:var(--text3)}
.inf-panel .pm-lrv {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text)}
.inf-panel .pm-perm {width:100%;border-collapse:collapse;font-size:var(--fs-eyebrow)}
.inf-panel .pm-perm td {padding:9px 18px;border-bottom:1px solid var(--border);color:var(--text2)}
.inf-panel .pm-perm tr:last-child td {border-bottom:none}
.inf-panel .pm-perm td:last-child {text-align:right}
.inf-panel .pm-foot {padding:14px 18px 18px;border-top:1px solid var(--border);display:flex;gap:9px;flex-shrink:0;background:var(--surface)}
.inf-panel .pm-edit {flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--text2);font-size: var(--fs-meta);font-weight:500;cursor:pointer;font-family:'Outfit',sans-serif;transition:all var(--tr)}
.inf-panel .pm-edit:hover {background:var(--surface2)}
.inf-panel .pm-edit svg {width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.inf-panel .pm-out {flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:10px;border:1.5px solid var(--red);background:var(--red-light);color:var(--red-text);font-size: var(--fs-meta);font-weight:500;cursor:pointer;font-family:'Outfit',sans-serif;transition:all var(--tr)}
.inf-panel .pm-out:hover {background:var(--danger-bg)}
.inf-panel [data-theme="dark"] .pm-out {background:var(--red-light);border-color:var(--red);color:var(--red-text)}
.inf-panel .pm-out svg {width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:480px){.inf-panel .pm-modal {border-radius:var(--radius)}.inf-panel .pm-grid {grid-template-columns:1fr}.inf-panel .pm-cell {border-right:none}}

/* ── PAGE HEADER (replaces breadcrumbs) ── */
.inf-panel .pg-head {margin-bottom:var(--space-3)}
.inf-panel .pg-title {font-size:var(--ps-text-h3);font-weight:500;color:var(--text);line-height:1.2;margin-top:4px}
.inf-panel .pg-sub {font-size: var(--fs-meta);color:var(--text3);margin-top:4px}

/* ── PATIENT LIST ── */
.inf-panel .pt-row {display:grid;grid-template-columns:40px 2.2fr 0.8fr 1.4fr 0.7fr 1.1fr 80px;gap:0 12px;padding:var(--space-2) 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--tr);align-items:center}
.inf-panel .pt-row:hover {background:var(--surface2)}
.inf-panel .pt-cell-name {min-width:0}
.inf-panel .pt-name {font-size:var(--fs-meta);font-weight:500;color:var(--text)}
.inf-panel .pt-id {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:2px}
.inf-panel .pt-cell {font-size: var(--fs-meta);color:var(--text2)}
.inf-panel .pt-cell-action {display:flex;align-items:center;justify-content:center}
.inf-panel .pt-eye {width:16px;height:16px;stroke:var(--text3);fill:none;stroke-width:1.8;transition:stroke var(--tr)}
.inf-panel .pt-row:hover .pt-eye {stroke:var(--accent)}
@media(max-width:768px){.inf-panel .pt-row {grid-template-columns:1fr 1fr;gap:6px 12px}.inf-panel .pt-cell-action {display:none}}
/* ── REPORT FORMAT CARDS ── */
.inf-panel .rb-fmt-card {display:flex;flex-direction:column;align-items:center;padding:20px var(--space-2);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--tr);background:var(--surface);text-align:center;color:var(--text2)}
.inf-panel .rb-fmt-card:hover {border-color:var(--accent);background:var(--accent-light);color:var(--accent-text)}
.inf-panel .rb-fmt-card.active {border-color:var(--accent);background:var(--accent-light);color:var(--accent-text)}
.inf-panel .rb-fmt-card.active svg {stroke:var(--accent-text)}


/* ── COMPARISON SUB-TABS ── */
.inf-panel .cmp-subnav {display:flex;gap:4px;margin-bottom:var(--space-2);background:var(--surface2);border-radius:var(--radius-sm);padding:4px}
.inf-panel .cmp-subtab {flex:1;padding:7px 18px;font-size:var(--fs-eyebrow);font-weight:400;color:var(--text3);cursor:pointer;border:none;background:none;font-family:'Outfit',sans-serif;transition:all var(--tr);border-radius:var(--radius-sm);text-align:center;white-space:nowrap}
.inf-panel .cmp-subtab:hover {color:var(--text2);background:rgba(255,255,255,.5)}
.inf-panel .cmp-subtab.active {background:var(--surface);color:var(--text);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.inf-panel .cmp-subpane {display:none}.inf-panel .cmp-subpane.active {display:block;animation:fadeIn .15s ease}

/* ── REPORT BUILDER ── */
.inf-panel .rb-step {display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex:1;transition:opacity var(--tr)}
.inf-panel .rb-step-num {width:28px;height:28px;border-radius:50%;background:var(--surface2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);transition:all var(--tr)}
.inf-panel .rb-step-lbl {font-size:var(--fs-eyebrow);color:var(--text3);white-space:nowrap;transition:color var(--tr)}
.inf-panel .rb-step.active .rb-step-num {background:var(--accent);border-color:var(--accent);color:#fff}
.inf-panel .rb-step.active .rb-step-lbl {color:var(--accent-text);font-weight:500}
.inf-panel .rb-step.done .rb-step-num {background:var(--green-light);border-color:var(--green);color:var(--green-text)}
.inf-panel .rb-step.done .rb-step-lbl {color:var(--green-text)}
.inf-panel .rb-step-line {flex:1;height:2px;background:var(--border);margin:0 4px;margin-top:-18px;transition:background var(--tr)}
.inf-panel .rb-step-line.done {background:var(--green)}
.inf-panel .rb-pt-row {display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--tr);background:var(--surface)}
.inf-panel .rb-pt-row:hover {border-color:var(--accent);background:var(--accent-light)}
.inf-panel .rb-pt-row.active {border-color:var(--accent);background:var(--accent-light)}
.inf-panel .rb-tpl {display:flex;flex-direction:column;align-items:center;padding:20px var(--space-2);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--tr);background:var(--surface);text-align:center}
.inf-panel .rb-tpl:hover {border-color:var(--accent);background:var(--accent-light)}
.inf-panel .rb-tpl.active {border-color:var(--accent);background:var(--accent-light)}
.inf-panel .rb-sec-row {display:flex;align-items:center;gap:14px;padding:14px var(--space-2);border-bottom:1px solid var(--border);transition:background var(--tr)}
.inf-panel .rb-sec-row:hover {background:var(--surface2)}
.inf-panel .rb-toggle {position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;cursor:pointer}
.inf-panel .rb-toggle input {opacity:0;width:0;height:0;position:absolute}
.inf-panel .rb-tog-sl {position:absolute;inset:0;background:var(--surface3);border-radius:99px;transition:background var(--tr)}
.inf-panel .rb-tog-sl::before {content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform var(--tr)}
.inf-panel .rb-toggle input:checked+.rb-tog-sl {background:var(--accent)}
.inf-panel .rb-toggle input:checked+.rb-tog-sl::before {transform:translateX(16px)}
.inf-panel .rb-preview-sec {margin-bottom:18px}
.inf-panel .rb-preview-sh {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.inf-panel .rb-preview-sec.hidden {display:none}

/* ── ADVANCED ANALYTICS TOGGLES ── */
.inf-panel .adv-mt, .inf-panel .adv-ct {padding:5px 11px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:var(--fs-eyebrow);font-family:'Outfit',sans-serif;cursor:pointer;transition:all var(--tr);display:inline-flex;align-items:center;gap:4px}
.inf-panel .adv-mt:hover, .inf-panel .adv-ct:hover {background:var(--surface3);color:var(--text)}
.inf-panel .adv-mt.active, .inf-panel .adv-ct.active {background:var(--accent-light);border-color:var(--accent);color:var(--accent-text);font-weight:500}
.inf-panel .mdl-ov {position:fixed;inset:0;background:rgba(0,0,0,.38);backdrop-filter:blur(3px);z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}
.inf-panel .mdl-ov.open {opacity:1;pointer-events:all}
.inf-panel .mdl-box {background:var(--surface);border-radius:var(--radius);width:500px;max-width:calc(100vw - 32px);max-height:88vh;overflow-y:auto;border:1px solid var(--border);transform:scale(.95) translateY(10px);opacity:0;transition:transform .24s cubic-bezier(.34,1.4,.64,1),opacity .2s ease}
.inf-panel .mdl-ov.open .mdl-box {transform:scale(1) translateY(0);opacity:1}
.inf-panel .mdl-head {padding:var(--space-2) 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.inf-panel .mdl-title {font-size:var(--fs-meta);font-weight:500;color:var(--text)}
.inf-panel .mdl-x {width:28px;height:28px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background var(--tr)}
.inf-panel .mdl-x:hover {background:var(--surface3)}
.inf-panel .mdl-x svg {width:12px;height:12px;stroke:var(--text2);fill:none;stroke-width:2}
.inf-panel .mdl-body {padding:18px 20px}
.inf-panel .mdl-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.inf-panel .mdl-cell {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.inf-panel .mdl-cell-lbl {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.inf-panel .mdl-cell-val {font-size:var(--fs-body);font-weight:500;color:var(--text)}
.inf-panel .mdl-cell-sub {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:3px}
.inf-panel .mdl-trace {background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;font-size:var(--fs-eyebrow);color:var(--text3);font-family:'Courier New',monospace;line-height:1.7;overflow-x:auto;white-space:pre;margin-bottom:12px}
.inf-panel .mdl-status-abn {background:var(--red-light);border:1px solid var(--red);border-radius:var(--radius-sm);padding:9px 13px;font-size:var(--fs-eyebrow);color:var(--red-text);margin-bottom:14px}
.inf-panel .mdl-status-brd {background:var(--yellow-light);border:1px solid var(--yellow);border-radius:var(--radius-sm);padding:9px 13px;font-size:var(--fs-eyebrow);color:var(--yellow-text);margin-bottom:14px}
.inf-panel .mdl-status-nrm {background:var(--green-light);border:1px solid var(--green);border-radius:var(--radius-sm);padding:9px 13px;font-size:var(--fs-eyebrow);color:var(--green-text);margin-bottom:14px}

/* ── VISUAL COMPARISON CHART ── */
.inf-panel .vchart {display:flex;flex-direction:column;gap:10px;padding:4px 0}
.inf-panel .vchart-row {display:grid;grid-template-columns:140px 1fr 60px;gap:10px;align-items:center}
.inf-panel .vchart-lbl {font-size:var(--fs-eyebrow);color:var(--text2);text-align:right}
.inf-panel .vchart-bar-wrap {position:relative;height:22px;background:var(--surface2);border-radius:4px;overflow:hidden}
.inf-panel .vchart-bar-pre {position:absolute;left:0;top:0;height:100%;background:var(--blue-light);border-radius:4px;transition:width .4s ease}
.inf-panel .vchart-bar-post {position:absolute;left:0;top:0;height:100%;background:var(--accent-light);border-radius:4px;opacity:.7;transition:width .4s ease}
.inf-panel .vchart-bar-post.better {background:var(--green-light);opacity:.8}
.inf-panel .vchart-bar-post.worse {background:var(--red-light);opacity:.8}
.inf-panel .vchart-chg {font-size:var(--fs-eyebrow);font-weight:500;text-align:right}

/* ── ENHANCED TOOLTIP ── */
.inf-panel .ttip {position:relative;border-bottom:1px dashed var(--text3);cursor:help;display:inline}
.inf-panel .ttip::after {content:attr(data-t);position:absolute;bottom:calc(100%+6px);left:50%;transform:translateX(-50%);background:var(--text);color:#e8ecf8;font-size:var(--fs-eyebrow);padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:999;border:1px solid #252d47;max-width:220px;white-space:normal;text-align:center}
.inf-panel .ttip:hover::after {opacity:1}

/* ── WORK QUEUE KPI FILTER BANNER ── */
.inf-panel .wq-filter {display:none;align-items:center;gap:9px;padding:var(--space-1) var(--space-2);background:var(--accent-light);border-bottom:1px solid var(--border);font-size:var(--fs-eyebrow);color:var(--accent-text)}
.inf-panel .wq-filter.show {display:flex}
.inf-panel .wq-filter-x {margin-left:auto;cursor:pointer;font-size:var(--fs-eyebrow);font-weight:500;color:var(--accent-text);background:none;border:none;font-family:'Outfit',sans-serif}
.inf-panel #login-screen {position:fixed;inset:0;background:#F0F2F5;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}
.inf-panel #login-screen.hidden {display:none}
.inf-panel .login-card {background:#fff;border-radius:24px;padding:var(--space-5) 44px 40px;width:480px;max-width:calc(100vw - 32px);box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.08);animation:slideUp .3s cubic-bezier(.34,1.4,.64,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.inf-panel .login-logo {width:64px;height:64px;border-radius:var(--radius);background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3)}
.inf-panel .login-logo svg {width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2}
.inf-panel .login-title {font-size:var(--ps-text-h3);font-weight:500;color:#0d1226;text-align:center;margin:0 0 var(--space-4)}
.inf-panel .login-field {position:relative;margin-bottom:14px}
.inf-panel .login-field input {width:100%;padding:14px var(--space-2);border:1.5px solid #D2D2D7;border-radius:12px;font-size:var(--fs-meta);font-family:'Outfit',sans-serif;color:#0d1226;outline:none;background:#fff;transition:border-color .18s}
.inf-panel .login-field input::placeholder {color:#aaa}
.inf-panel .login-field input:focus {border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.inf-panel .login-field .eye-btn {position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:#aaa}
.inf-panel .login-field .eye-btn svg {width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.inf-panel .login-btn-primary {width:100%;padding:15px;background:#1d1d1f;color:#fff;border:none;border-radius:12px;font-size: var(--fs-body);font-weight:500;font-family:'Outfit',sans-serif;cursor:pointer;margin-top:4px;transition:opacity .18s}
.inf-panel .login-btn-primary:hover {opacity:.88}
.inf-panel .login-btn-secondary {background:none;border:none;color:#2563eb;font-size:var(--fs-meta);cursor:pointer;padding:0;font-family:inherit;text-decoration:none4px;font-weight:500;font-family:'Outfit',sans-serif;cursor:pointer;margin-top:10px;transition:background .18s}
.inf-panel .login-btn-secondary:hover {color:#1d4ed8;text-decoration:underline}
.inf-panel .login-notice {font-size:var(--fs-eyebrow);color:#aaa;text-align:center;margin-top:28px;line-height:1.7}
.inf-panel .login-error {display:none;background:var(--danger-bg);color:var(--danger-text);border-radius:8px;padding:10px 14px;font-size:var(--fs-eyebrow);margin-bottom:12px;text-align:center}
.inf-panel .login-error.show {display:block}
.inf-panel .cr-metric-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:var(--space-2)}
.inf-panel .cr-metric {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2);cursor:pointer;transition:transform var(--tr),border-color var(--tr)}
.inf-panel .cr-metric:hover {transform:translateY(-2px)}
.inf-panel .cr-metric.s-nrm {}
.inf-panel .cr-metric.s-brd {}
.inf-panel .cr-metric.s-abn {}
.inf-panel .cr-m-lbl {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-1)}
.inf-panel .cr-m-val {font-size:var(--ps-text-h3);font-weight:500;color:var(--text);line-height:1;margin-bottom:6px}
.inf-panel .cr-m-val.nrm {color:var(--green-text)}.inf-panel .cr-m-val.brd {color:var(--yellow-text)}.inf-panel .cr-m-val.abn {color:var(--red-text)}
.inf-panel .cr-m-ref {font-size:var(--fs-eyebrow);color:var(--text3);margin-bottom:var(--space-1)}
.inf-panel .cr-m-foot {display:flex;align-items:center;justify-content:space-between;gap:6px}
.inf-panel .cr-m-desc {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:6px}

.inf-panel .cr-tabs {display:flex;border-bottom:1px solid var(--border);margin-bottom:var(--space-2)}
.inf-panel .cr-tab {padding:9px 18px;font-size:var(--fs-eyebrow);color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--tr);margin-bottom:-1px;display:flex;align-items:center;gap:6px;background:none;border-top:none;border-left:none;border-right:none;font-family:'Outfit',sans-serif;white-space:nowrap}
.inf-panel .cr-tab:hover {color:var(--text2)}
.inf-panel .cr-tab.active {color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.inf-panel .seg-tab {padding:10px 20px;font-size: var(--fs-meta);font-weight:400;font-family:'Outfit',sans-serif;color:#212121;background:var(--bg-soft);border:1px solid rgba(0,0,0,0.08);border-radius:100px;cursor:pointer;white-space:nowrap;transition:all var(--tr)}
.inf-panel .seg-tab:hover:not(:disabled) {border-color:rgba(0,0,0,0.2);background:#f0f0f0}
.inf-panel .seg-tab.active {background:#fff!important;border-color:#1242C8!important;color:#1242C8!important;font-weight:500}
.inf-panel .cr-tab svg {width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.inf-panel .cr-pane {display:none}
.inf-panel .cr-pane.active {display:block;animation:fadeIn .18s ease}

.inf-panel .cr-cmp-row {display:grid;grid-template-columns:1fr 120px 160px;gap:0;align-items:center;padding:11px var(--space-2);border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--tr)}
.inf-panel .cr-cmp-row.food {grid-template-columns:1fr 90px 90px 80px 120px}
.inf-panel .cr-cmp-row:hover {background:var(--surface2)}
.inf-panel .cr-cmp-row:last-child {border-bottom:none}
.inf-panel .cr-cmp-hdr {background:var(--surface2);font-size:var(--fs-eyebrow);font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.inf-panel .cr-cmp-hdr:hover {background:var(--surface2)}
.inf-panel .cr-cval {font-size: var(--fs-meta);font-weight:500;color:var(--text)}
.inf-panel .cr-cval.nrm {color:var(--green-text)}.inf-panel .cr-cval.brd {color:var(--yellow-text)}.inf-panel .cr-cval.abn {color:var(--red-text)}
.inf-panel .cr-cref {font-size:var(--fs-eyebrow);color:var(--text3);margin-top:1px}
.inf-panel .cr-chg {display:inline-flex;align-items:center;font-size:var(--fs-eyebrow);font-weight:500}
.inf-panel .cr-chg.pos {color:var(--green-text)}
.inf-panel .cr-chg.neg {color:var(--red-text)}
.inf-panel .cr-chg.neu {color:var(--text3)}

.inf-panel .cr-exp-btn {width:18px;height:18px;border-radius:4px;background:var(--surface2);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all var(--tr)}
.inf-panel .cr-exp-btn svg {width:9px;height:9px;stroke:var(--text3);fill:none;stroke-width:2.5;transition:transform var(--tr)}
.inf-panel .cr-exp-btn.open {background:var(--accent-light);border-color:var(--accent)}
.inf-panel .cr-exp-btn.open svg {transform:rotate(90deg);stroke:var(--accent-text)}
.inf-panel .cr-detail-row {display:none;background:var(--surface2)}
.inf-panel .cr-detail-row.open {display:table-row}
.inf-panel .cr-detail-panel {padding:12px var(--space-2);display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.inf-panel .cr-df-lbl {font-size:var(--fs-eyebrow);color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.inf-panel .cr-df-val {font-size:var(--fs-eyebrow);font-weight:500;color:var(--text);font-family:'Courier New',monospace}
.inf-panel .cr-trace {grid-column:1/-1;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-size:var(--fs-eyebrow);color:var(--text3);font-family:'Courier New',monospace;line-height:1.7;overflow-x:auto;white-space:pre}

.inf-panel .cr-summary-dot {width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}
.inf-panel .cr-summary-dot.nrm {background:var(--green)}.inf-panel .cr-summary-dot.brd {background:var(--yellow)}.inf-panel .cr-summary-dot.abn {background:var(--red)}

.inf-panel .cr-loc-card {background:var(--surface2);border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-sm);padding:12px 10px;text-align:center;transition:border-color var(--tr)}
.inf-panel .cr-loc-card.nrm {border-left-color:var(--green)}
.inf-panel .cr-loc-card.brd {border-left-color:var(--yellow)}
.inf-panel .cr-loc-card.abn {border-left-color:var(--red)}
.inf-panel .cr-loc-card .loc-n {font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.4px;text-transform:uppercase;margin-bottom:5px;color:var(--text3)}
.inf-panel .cr-loc-card.nrm .loc-n {color:var(--green-text)}.inf-panel .cr-loc-card.brd .loc-n {color:var(--yellow-text)}.inf-panel .cr-loc-card.abn .loc-n {color:var(--red-text)}
.inf-panel .cr-loc-card .loc-v {font-size:var(--ps-text-body);font-weight:500;color:var(--text)}
.inf-panel .cr-loc-card.nrm .loc-v {color:var(--green-text)}.inf-panel .cr-loc-card.brd .loc-v {color:var(--yellow-text)}.inf-panel .cr-loc-card.abn .loc-v {color:var(--red-text)}
@media(max-width:1024px){.inf-panel .cr-metric-grid {grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.inf-panel .cr-cmp-row, .inf-panel .cr-cmp-hdr {grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px}.inf-panel .cr-metric-grid {grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .inf-panel .kpi-grid {grid-template-columns:repeat(2,1fr)}.inf-panel .g2, .inf-panel .g3 {grid-template-columns:1fr}.inf-panel .loc-grid {grid-template-columns:repeat(2,1fr)}
  .inf-panel .sbox {display:none}.inf-panel .sidebar {position:fixed;left:0;top:0;bottom:0;z-index:100;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .inf-panel .sidebar.open {transform:translateX(0)}.inf-panel .hbg {display:flex}.inf-panel .ov.open {display:block}.inf-panel .content {padding:14px}
  .inf-panel #page-dashboard .wq-grid {grid-template-columns:1fr!important}
}
@media print{
  .inf-panel .sidebar, .inf-panel .topbar, .inf-panel .sc-head .btn, .inf-panel .frow {display:none!important}
  .inf-panel .main, .inf-panel .content, .inf-panel .app {display:block;overflow:visible;height:auto}
  .inf-panel .page.active {display:block!important}
  
  .inf-panel {color:#000;background:#fff}
  .inf-panel body::before {
    content:"CONFIDENTIAL — PROTECTED HEALTH INFORMATION (PHI)";
    position:fixed;top:12px;right:12px;
    font-size:var(--fs-eyebrow);font-weight:500;color:var(--danger-text);
    letter-spacing:.5px;text-transform:uppercase;
    border:1px solid var(--danger-text);padding:3px var(--space-1);border-radius:4px;
    font-family:'Outfit',sans-serif;z-index:9999;
  }
  @page{margin:20mm;size:A4}
}



  /* ═══════════════════════════════════════════════════════════════════════
     RESPONSIVE FIXES — appended for full mobile support (additive only)
     P3: overflow-x guard   P5: touch targets   P7: footer 1-col
     ═══════════════════════════════════════════════════════════════════════ */

  /* P3 — prevent horizontal scroll on the whole page */
  html, body { overflow-x: clip; }

  /* P7 — footer collapses to single column on very small screens */
  @media (max-width: 480px) {
    .footer-top { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-social, .footer-legal { justify-content: center; }
  }

  /* P5 — enforce minimum touch target size on touch devices only */
  @media (hover: none) and (pointer: coarse) {
    .btn, .btn-primary, .btn-secondary, .btn--primary,
    .cs-page, .cs-chip, .filter-chip, .nav-dropdown-trigger,
    .header-nav a, .cu-btn, .hero-cta-btn, .fcta-trigger,
    .ag-cta, button.btn, a.btn, .lms-btn, .db-btn {
      min-height: 44px;
    }
    .cs-page.cs-page-arrow, .icon-btn, .cs-tool-btn {
      min-height: 44px; min-width: 44px;
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE HAMBURGER + SLIDE-IN DRAWER (below 1100px)
     ═══════════════════════════════════════════════════════════════════════ */

  .hamburger {
    display: none;
    width: 44px; height: 44px;
    border: none; background: transparent;
    color: var(--ink-900); cursor: pointer;
    align-items: center; justify-content: center;
    border-radius: var(--radius);
    margin-left: var(--space-1);
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger:hover { background: var(--bg-soft); }
  .hamburger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

  .mobile-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 998;
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mobile-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 88%; max-width: 380px;
    background: #FFFFFF;
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(15,23,42,0.16);
  }

  body.mobile-menu-open { overflow: hidden; }
  body.mobile-menu-open .mobile-backdrop { opacity: 1; visibility: visible; }
  body.mobile-menu-open .mobile-drawer { transform: translateX(0); }

  .mobile-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) 20px;
    border-bottom: 1px solid #ECEEF3;
    flex-shrink: 0;
  }
  .mobile-drawer-head img { height: 36px; width: auto; display: block; }
  .mobile-drawer-close {
    width: 40px; height: 40px;
    border: none; background: transparent;
    color: var(--ink-900); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-drawer-close:hover { background: var(--bg-soft); }
  .mobile-drawer-close svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

  .mobile-drawer-nav {
    flex: 1;
    padding: 12px 14px;
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .mobile-drawer-nav > a {
    padding: 13px 14px;
    font-size: var(--fs-body); font-weight: 500;
    color: var(--ink-900);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-drawer-nav > a:hover { background: var(--bg-soft); color: var(--brand); }

  .mobile-drawer-nav details { border-radius: var(--radius); }
  .mobile-drawer-nav summary {
    padding: 13px 14px;
    font-size: var(--fs-body); font-weight: 500;
    color: var(--ink-900);
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-drawer-nav summary::-webkit-details-marker { display: none; }
  .mobile-drawer-nav summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--ink-600);
    border-bottom: 2px solid var(--ink-600);
    transform: rotate(45deg);
    transition: transform 0.22s ease;
    margin-right: 6px;
  }
  .mobile-drawer-nav details[open] summary::after {
    transform: rotate(-135deg);
  }
  .mobile-drawer-nav summary:hover { background: var(--bg-soft); color: var(--brand); }

  .mobile-submenu {
    padding: 2px 0 6px 12px;
    display: flex; flex-direction: column; gap: 1px;
  }
  .mobile-submenu a {
    padding: 10px 14px;
    font-size: var(--fs-meta); font-weight: 400;
    color: var(--ink-600);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-submenu a:hover { background: var(--bg-soft); color: var(--brand); }

  .mobile-drawer-cta {
    padding: 14px 20px 20px;
    border-top: 1px solid #ECEEF3;
    flex-shrink: 0;
  }
  .mobile-drawer-cta a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 48px;
    background: var(--brand); color: #fff;
    border-radius: var(--radius-pill);
    font-size: var(--fs-body); font-weight: 500;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(21,93,252,0.28);
  }
  .mobile-drawer-cta a:hover { background: #0F4CD8; }

  @media (max-width: 1100px) {
    .hamburger { display: inline-flex; }
    .header .header-actions { display: none !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     HD DESKTOP (≥ 1441px) — wider container + generous whitespace
     Additive only. Existing clamp() typography maxes are respected.
     ═══════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1441px) {
    /* Wider content area — was 1280px, now 1440px on HD screens */
    :root { --container: 1440px; }

    /* Container padding gets more generous */
    .container, .hero-content, .cs-shell {
      padding-left: clamp(40px, 6vw, var(--space-8));
      padding-right: clamp(40px, 6vw, var(--space-8));
    }

    /* Hero sections breathe */
    .hero, .case-fullbleed-hero, .cu-hero {
      padding-top: clamp(96px, 8vw, 140px);
      padding-bottom: clamp(72px, 6vw, 108px);
    }

    /* Section headers space more generously */
    .sec-head, .hww-header, .impact-intro, .section-header,
    .f1-head, .cvo-hero-grid { margin-bottom: clamp(var(--space-5), 4vw, 72px); }

    /* Case-study title block */
    .case-header { padding-top: clamp(var(--space-7), 7vw, var(--space-8)); padding-bottom: clamp(var(--space-5), 4vw, 72px); }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     SMALL MOBILE (≤ 430px) — tighter section padding + smaller headings
     Covers heroes, F1 flow, HWW, impact, ISA deliver, CTAs, buttons
     ═══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 430px) {
    /* Universal container padding */
    .container, .hero-content, .cs-shell { padding-left: var(--space-2); padding-right: var(--space-2); }

    /* Case-study title block */
    .case-title { font-size: var(--fs-display-1) !important; letter-spacing: -0.02em; line-height: 1.1; }
    .case-subtitle { font-size: var(--fs-body) !important; line-height: 1.55; }
    .case-header { padding: var(--space-4) 0 var(--space-3) !important; }
    .case-tag { font-size: var(--fs-eyebrow) !important; padding: 4px 10px !important; }

    /* Case-study hero */
    .case-fullbleed-hero { padding: var(--space-4) 0 !important; }
    .mockup-tagline { font-size: var(--fs-display-1) !important; line-height: 1.15; }
    .mockup-logo img { height: 72px !important; }
    .hero-lede { font-size: var(--fs-body) !important; line-height: 1.55; }

    /* Contact hero */
    .cu-hero { padding: 40px var(--space-2) !important; }
    .cu-head h1 { font-size: var(--fs-display-1) !important; line-height: 1.1; }
    .cu-head p.lede { font-size: var(--fs-body) !important; }
    .cu-card { padding: var(--space-3) 20px !important; border-radius: var(--radius) !important; }

    /* Section headers everywhere */
    .sec-h2, .hww-heading, .impact-intro h2, .section-header h2, .f1-headline,
    .cvo-hero-grid h1, .isa-hero-grid h1, .dsa-hero-grid h1 {
      font-size: var(--fs-display-1) !important;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    /* legacy 14.5px rule removed — canonical 18px owns mobile */

    /* F1 vertical flow */
    .f1-section { padding: 40px 0 !important; }
    .f1-pain-chip { font-size: var(--fs-eyebrow) !important; padding: 7px 12px !important; }
    .f1-sol-card { padding: 12px 14px !important; font-size: var(--fs-meta) !important; }
    .f1-transform-caption { font-size: var(--fs-meta) !important; }
    .f1-outcomes { padding: 20px var(--space-2) !important; grid-template-columns: 1fr 1fr !important; gap: 20px 12px !important; }
    .f1-out-val { font-size: var(--fs-stat) !important; }
    .f1-out-cap { font-size: var(--fs-eyebrow) !important; }

    /* How It Works (deel timeline) */
    .hww-header { margin-bottom: var(--space-4) !important; }
    .deel-timeline { padding: 0 4px !important; }
    .deel-card p { font-size: var(--fs-meta) !important; line-height: 1.5; }

    /* Impact grid */
    .impact { padding: var(--space-5) 0 !important; }
    .impact-intro { margin-bottom: var(--space-4) !important; }
    .impact-num { font-size: var(--fs-stat) !important; }
    .impact-label { font-size: var(--fs-meta) !important; }
    .impact-sub { font-size: var(--fs-eyebrow) !important; line-height: 1.45; }
    .impact-cell { padding: 20px var(--space-2) !important; }

    /* Solution ISA-deliver rows (case-study solution section) */
    .isa-deliver-split { padding: var(--space-4) 0 !important; gap: var(--space-3) !important; }
    .isa-deliver-row { padding: 12px 0 !important; gap: 12px !important; }
    .isa-deliver-row .num { font-size: var(--ps-text-h3) !important; min-width: 32px !important; }
    .isa-deliver-row h3 { font-size: var(--fs-body) !important; }

    /* Video walkthrough */
    .video-block { padding: 40px 0 !important; }
    .video-frame { aspect-ratio: 16 / 9; height: auto !important; }

    /* Related cases */
    .related { padding: var(--space-5) 0 !important; }
    .related-card { padding: 20px !important; }
    .related-card h3 { font-size: var(--fs-body) !important; }

    /* Buttons — hero CTAs full-width */
    .hero-cta-btn, .fcta-trigger, .btn--primary,
    .cs-hero-block .btn, .hero-inner .btn, .case-header .btn {
      max-width: 100% !important;
    }
    .hero-cta-btn, a.fcta-trigger, .cta-btn-primary {
      width: 100% !important; justify-content: center !important;
    }

    /* Case-studies list page */
    .cs-shell { padding: 40px var(--space-2) !important; }
    .cs-title { font-size: var(--fs-display-1) !important; }
    .cs-lede { font-size: var(--fs-meta) !important; }
    .cs-card-cover { min-height: 160px !important; padding: 12px 14px !important; }
    .cs-card-title { font-size: var(--fs-body) !important; }
    .cs-card-desc { font-size: var(--fs-meta) !important; line-height: 1.5; }
    .cs-pagination { gap: 4px !important; }
    .cs-page { min-width: 40px; height: 40px; font-size: var(--fs-meta); }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     HD DESKTOP v2 (≥ 1441px) — comprehensive scaling
     Typography maxes, viewport-scaling spacing, larger structural elements.
     Fixes "designed for 1366, looks small on 1920" problem.
     ═══════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1441px) {

    /* ── Layer 1: Wider container + more padding ── */
    :root { --container: 1520px !important; }
    .container, .hero-content, .cs-shell {
      padding-left: clamp(var(--space-5), 6vw, 140px) !important;
      padding-right: clamp(var(--space-5), 6vw, 140px) !important;
    }

    /* ── Layer 2: Typography scales up ── */
    /* Hero headlines */
    .hero h1, .hero-inner h1 { font-size: var(--fs-display-1) !important; line-height: 1.05; }
    
    
    .cs-title { font-size: var(--fs-display-1) !important; }
    /* CU (contact) hero title */
    .cu-head h1 { font-size: var(--fs-display-1) !important; }

    /* Section headlines */
    .sec-h2, .f1-headline, .hww-heading, .ag-h2,
    .sols-headline, .cc-left-headline, .section-header h2 {
      font-size: var(--fs-display-2) !important; line-height: 1.1;
    }

    /* Sub-heading paragraph text */
    .hero-lede, .hero-sub, .sec-lede, p.lede, .case-subtitle,
    .cs-lede, .cu-head p.lede, .hww-subhead, .section-header p {
      font-size: var(--ps-text-body) !important; line-height: 1.55;
    }

    /* Card titles */
    .cc-card-title, .cs-card-title, .impact-label,
    .tc-name, .sf-cta-heading, .sols-name {
      font-size: var(--fs-display-2) !important;
    }

    /* Card body text */
    .cc-card-sub, .cs-card-desc, .tc-desc, .sols-desc,
    .impact-sub, .isa-deliver-row p {
      font-size: var(--ps-text-body) !important; line-height: 1.55;
    }

    /* Stat/metric numbers */
    .impact-num, .f1-out-val, .stats-num {
      font-size: var(--fs-stat) !important;
    }

    /* ── Layer 3: Spacing scales generously ── */
    /* Hero verticals */
    .hero, .case-fullbleed-hero, .cu-hero {
      padding-top: clamp(var(--space-8), 10vw, 200px) !important;
      padding-bottom: clamp(96px, 8vw, 160px) !important;
    }

    /* Section verticals */
    .section, .hww-section, .cc-section, .impact,
    .solution-pc3, .video-block, .related,
    .sf-section, .sols-section, .stats-band, .ag-section,
    .partners-section, .promo, .v3-section {
      padding-top: clamp(100px, 8vw, 180px) !important;
      padding-bottom: clamp(100px, 8vw, 180px) !important;
    }

    /* Case-study header */
    .case-header {
      padding-top: clamp(96px, 8vw, 160px) !important;
      padding-bottom: clamp(var(--space-6), 5vw, 96px) !important;
    }

    /* Section header margin */
    .sec-head, .hww-header, .impact-intro, .section-header, .f1-head {
      margin-bottom: clamp(56px, 5vw, 96px) !important;
    }

    /* Grid gaps grow */
    .cs-grid, .impact-grid, .f1-solutions, .f1-outcomes,
    .m4-grid, .tc-grid, .vc4-grid, .lead-grid, .sols-grid {
      gap: clamp(var(--space-3), 2vw, 40px) !important;
    }

    /* Card padding grows */
    .cc-card, .cs-card-body, .impact-cell, .tc-card, .vc4-card, .m4-card {
      padding: clamp(28px, 2.5vw, 44px) !important;
    }

    /* Hero image sizes grow */
    .hero-image-col { width: 540px !important; height: 400px !important; }
    .hero-product-img { max-width: 900px !important; }
    .cs-card-cover { min-height: 240px !important; }

    /* Buttons scale slightly */
    .btn, .btn-primary, .btn--primary {
      height: 52px !important;
      padding: 0 28px !important;
      font-size: var(--fs-body) !important;
    }
    .hero-cta-btn { height: 60px !important; padding: 0 36px !important; font-size: var(--fs-title-m) !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     PROPORTIONAL HD SCALING (≥ 1441px) — supersedes previous HD block
     Same composition as 1366 · scaled ~15-20% at 1920 · no new elements
     Preserves visual hierarchy, alignment, and content positioning
     ═══════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1441px) {

    /* ── Container widens from 1280 → 1600 (preserves 1366 proportions) ── */
    :root { --container: 1600px !important; }

    /* ── Hero + section padding ── */
    .hero, .case-fullbleed-hero, .cu-hero {
      padding-top: clamp(56px, 6vw, 105px) !important;
      padding-bottom: clamp(40px, 4.5vw, 76px) !important;
    }

    /* ── Container / shell horizontal padding — same as 1366 pattern at HD ── */
    .container, .hero-content, .cs-shell {
      padding-left: clamp(20px, 6vw, var(--space-8)) !important;
      padding-right: clamp(20px, 6vw, var(--space-8)) !important;
    }

    /* ── Section verticals scale proportionally ── */
    .section, .hww-section, .cc-section, .impact,
    .solution-pc3, .video-block, .related,
    .sf-section, .sols-section, .stats-band, .ag-section,
    .partners-section, .promo, .v3-section {
      padding-top: clamp(var(--space-6), 6vw, 100px) !important;
      padding-bottom: clamp(var(--space-6), 6vw, 100px) !important;
    }

    /* ── Case-study title block ── */
    .case-header {
      padding-top: clamp(var(--space-6), 6vw, 100px) !important;
      padding-bottom: clamp(40px, 4vw, 68px) !important;
    }

    /* ── Section header margin ── */
    .sec-head, .hww-header, .impact-intro, .section-header, .f1-head {
      margin-bottom: clamp(40px, 4vw, 72px) !important;
    }

    /* ══════════════════ TYPOGRAPHY — proportional maxes ══════════════════ */

    /* Hero H1 (all pages) — 63px @ 1366 · 84px @ 1920 (~+33%) */
    .hero h1, .hero-inner h1 {
      font-size: var(--fs-display-1) !important;
      line-height: 1.08;
    }

    /* Case-study title — 63px @ 1366 · 78px @ 1920 */
    

    /* Mockup tagline (case-study hero) */
    .mockup-tagline { font-size: var(--ps-text-h1) !important; }

    /* Contact page H1 */
    .cu-head h1 { font-size: var(--fs-display-1) !important; }

    /* Section H2 — 42px @ 1366 · 58px @ 1920 (~+38%) */
    .sec-h2, .f1-headline, .hww-heading, .ag-h2,
    .sols-headline, .cc-left-headline, .section-header h2 {
      font-size: var(--fs-display-2) !important;
      line-height: 1.15;
    }

    /* Sub-lead paragraphs — 18px @ 1366 · 22px @ 1920 */
    .hero-sub, .hero-lede, .case-subtitle,
    .sec-lede, .hww-subhead, .impact-intro p,
    .section-header p, .f1-subtitle, p.lede,
    .cs-lede, .cu-head p.lede {
      font-size: var(--ps-text-body) !important;
      line-height: 1.55;
    }

    /* Value strip / bullet lists */
    .hero-value-strip {
      font-size: var(--ps-text-body) !important;
    }

    /* Trust chip */
    .hero-trust {
      font-size: var(--ps-text-nav) !important;
    }
    .hero-trust svg {
      width: clamp(13px, 1vw, 16px) !important;
      height: clamp(13px, 1vw, 16px) !important;
    }

    /* Card titles */
    .cc-card-title, .cs-card-title, .impact-label,
    .tc-name, .sf-cta-heading, .sols-name {
      font-size: var(--ps-text-h3) !important;
    }

    /* Card body text */
    .cc-card-sub, .cs-card-desc, .tc-desc, .sols-desc,
    .impact-sub, .isa-deliver-row p {
      font-size: var(--ps-text-body) !important;
      line-height: 1.55;
    }

    /* Metric numbers — moderate scaling */
    .impact-num, .f1-out-val, .stats-num {
      font-size: var(--ps-text-h1) !important;
    }

    /* ══════════════════ BUTTONS ══════════════════ */

    /* Standard button */
    .btn, .btn-primary, .btn--primary {
      height: clamp(44px, 3.5vw, 52px) !important;
      padding: 0 clamp(20px, 1.8vw, 28px) !important;
      font-size: var(--ps-text-btn) !important;
    }

    /* Hero CTAs — bigger for prominence */
    .hero-cta-btn, a.fcta-trigger, .ag-cta,
    .hero-actions .btn, .hero-sub-row .btn {
      height: clamp(48px, 4vw, 66px) !important;
      padding: 0 clamp(var(--space-3), 2.4vw, 42px) !important;
      font-size: var(--ps-text-btn) !important;
    }

    /* ══════════════════ IMAGES / STRUCTURAL ══════════════════ */

    /* Hero image column (product/solution pages) */
    .hero-image-col {
      height: clamp(280px, 30vw, 540px) !important;
      width: auto !important;
    }
    .hero-product-img { max-width: clamp(320px, 45vw, 780px) !important; }

    /* Case-study card cover */
    .cs-card-cover { min-height: clamp(180px, 15vw, 240px) !important; }

    /* ══════════════════ GRID GAPS ══════════════════ */

    .cs-grid, .impact-grid, .f1-solutions, .f1-outcomes,
    .m4-grid, .tc-grid, .vc4-grid, .lead-grid, .sols-grid,
    .cvo-hero-grid, .isa-hero-grid, .dsa-hero-grid {
      gap: clamp(20px, 1.8vw, var(--space-4)) !important;
    }

    /* ══════════════════ CARD PADDING ══════════════════ */

    .cc-card, .cs-card-body, .impact-cell,
    .tc-card, .vc4-card, .m4-card {
      padding: clamp(var(--space-3), 2vw, 36px) !important;
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     CASE STUDY TEMPLATE — full HD proportional coverage (≥ 1441px)
     Applies to all 7 case-study pages (shared template classes)
     ═══════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1441px) {

    /* ── Case title block ── */
    .case-tag { font-size: var(--ps-text-eyebrow) !important; padding: clamp(4px, 0.4vw, 6px) clamp(12px, 1vw, var(--space-2)) !important; }
    .case-back-link { font-size: var(--ps-text-nav) !important; }
    .powered-by-label { font-size: var(--ps-text-nav) !important; }
    .powered-by-brand { font-size: var(--ps-text-body) !important; }

    /* ── F1 vertical flow ── */
    .f1-eyebrow { font-size: var(--fs-eyebrow) !important; }
    .f1-stage-tag-text { font-size: var(--ps-text-eyebrow) !important; }
    .f1-pain-chip { font-size: var(--ps-text-eyebrow) !important; padding: clamp(10px, 0.9vw, 14px) clamp(var(--space-2), 1.3vw, 22px) !important; }
    .f1-sol-card { padding: clamp(var(--space-2), 1.4vw, 22px) !important; font-size: var(--ps-text-body) !important; }
    .f1-sol-icon { width: clamp(28px, 2.2vw, 36px) !important; height: clamp(28px, 2.2vw, 36px) !important; }
    .f1-transform-caption { font-size: var(--ps-text-body) !important; }
    .f1-out { padding: clamp(20px, 1.7vw, 28px) !important; }
    .f1-out-cap { font-size: var(--ps-text-body) !important; }

    /* ── HWW (deel timeline) ── */
    .hww-eyebrow { font-size: var(--fs-eyebrow) !important; }
    .label .num { font-size: var(--ps-text-h3) !important; }
    .label .ttl { font-size: var(--ps-text-h3) !important; }
    .deel-card { padding: clamp(20px, 1.8vw, var(--space-4)) !important; }
    .deel-card p { font-size: var(--ps-text-body) !important; }

    /* ── ISA deliver (solution rows) ── */
    .isa-deliver-row .num { font-size: var(--ps-text-h1) !important; min-width: clamp(40px, 3vw, 52px) !important; }
    .isa-deliver-row h3 { font-size: var(--ps-text-h3) !important; }
    .isa-deliver-row p { font-size: var(--ps-text-body) !important; }
    .sec-head .eyebrow { font-size: var(--fs-eyebrow) !important; }

    /* ── Impact grid ── */
    .impact-cell { padding: clamp(28px, 2.5vw, 40px) !important; }
    .impact-icon img { width: clamp(48px, 3.6vw, 64px) !important; }
    .impact-sub { font-size: var(--ps-text-body) !important; }

    /* ── Video block ── */
    .video-play { width: clamp(64px, 5vw, 88px) !important; height: clamp(64px, 5vw, 88px) !important; }
    .video-label { font-size: var(--ps-text-body) !important; }

    /* ── Related cases ── */
    .related-card { padding: clamp(var(--space-3), 2vw, 36px) !important; }
    .related-card h3 { font-size: var(--ps-text-h3) !important; }
    .related-card p { font-size: var(--ps-text-body) !important; }
    .related-card .tag { font-size: var(--ps-text-eyebrow) !important; }
    .related-card .read { font-size: var(--ps-text-body) !important; }

    /* ── Solution PC3 pattern ── */
    .pc3-eyebrow { font-size: var(--fs-eyebrow) !important; }
    .pc3-cc-title { font-size: var(--ps-text-h3) !important; }
    .pc3-cc-desc { font-size: var(--ps-text-body) !important; }
    .pc3-cc-tag { font-size: var(--ps-text-eyebrow) !important; }
    .pc3-callout { padding: clamp(14px, 1.2vw, 20px) !important; }
    .pc3-cap-tile { padding: clamp(var(--space-2), 1.4vw, 22px) !important; }
    .pc3-cap-tile-title { font-size: var(--ps-text-h3) !important; }
    .pc3-cap-tile-icon img, .pc3-cap-tile-icon { width: clamp(48px, 3.6vw, 60px) !important; height: clamp(48px, 3.6vw, 60px) !important; }

    /* ── Mockup logo ── */
    .mockup-logo-img { height: clamp(72px, 6vw, 108px) !important; }

    /* ── Header nav (shared) ── */
    .header-nav a, .nav-dropdown-trigger { font-size: var(--ps-text-nav) !important; }
    .nav-dropdown-label { font-size: var(--ps-text-nav) !important; }
    .nav-dropdown-sub { font-size: var(--ps-text-nav) !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     UNIVERSAL ALIGNMENT FIX
     Every wrapper using max-width: var(--container) WITHOUT its own
     horizontal padding is reduced by 2*var(--pad-x) so its content aligns
     to the same X-axis as .container content.
     Result: every section on the page starts and ends at the exact same
     left/right coordinates regardless of which wrapper class it uses.
     ═══════════════════════════════════════════════════════════════════════ */
  .hero-inner,
  .hww-acc-row,
  .hww-grid,
  .imp-grid,
  .po-rows,
  .po-title,
  .isa-deliver-split,
  .isa-channels,
  .cvo-why-row,
  .footer-inner,
  .m4,
  .m4-grid,
  .platform-inner,
  .reeng-inner,
  .sa-deliver-wrap,
  .tc-stack,
  .top-bar-inner,
  .vc4-grid,
  .why-split,
  .cs-flip-grid,
  .cc-nav-card,
  .deel-timeline {
    max-width: calc(var(--container) - 2 * var(--pad-x)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


/* ===== next source <style> block ===== */


    /* Universal HD step-up (≥1441px) — comprehensive fixed-pixel coverage */
    @media (min-width: 1441px) {
      .footer-brand p { font-size: var(--ps-text-nav) !important; line-height: 1.55 !important; }
      .footer-col h5 { font-size: var(--fs-body) !important; }
      .footer-col a, .footer-col li { font-size: var(--fs-body) !important; }
      .footer-contact, .footer-contact a, .footer-contact p { font-size: var(--fs-body) !important; }
      .footer-bottom, .footer-bottom p, .footer-bottom a { font-size: var(--fs-meta) !important; }
      .cs-cta-sub { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
      .cs-chip { font-size: var(--fs-meta) !important; }
    }
  

/* ===== next source <style> block ===== */
















































































































/* ═══════════════════════════════════════════════════════════════════════
   PRIMESOFT RESPONSIVE SYSTEM — canonical tokens + rules  (v3 — mobile pass)
   Design source of truth: 1366px
   Breakpoint priorities: 1024 · 1366-1919 · mobile 360-767 · tablet 768-1023
   Injected LAST in the cascade so it settles inter-page drift.
   ═══════════════════════════════════════════════════════════════════════ */
/* CANONICAL VERSION MARKER: v3.24 — hero specificity boost */


:root {
  --ps-container: 1440px;
  --ps-pad-x: clamp(20px, 5vw, 80px);

  --ps-section-py: clamp(56px, 8vw, 112px);
  --ps-section-header-mb: clamp(48px, 4vw, 72px);
  --ps-hero-py:    clamp(32px, 4vw, 56px);    /* Compact: 32 mobile / 55 @1366 / 56 @HD */
  --ps-hero-gap:   48px;
  --ps-case-header-py: clamp(48px, 5vw, 80px);

  --ps-s1: 8px;
  --ps-s2: 16px;
  --ps-s3: 24px;
  --ps-s4: 32px;
  --ps-s5: 48px;
  --ps-s6: 64px;
  --ps-s7: 80px;
  --ps-s8: 120px;

  --fs-display-1:      var(--ps-text-h1);
  --fs-display-2:      var(--ps-text-h1);
  --fs-body:    var(--ps-text-body);   /* discrete: 18px base, 22px @HD via media query */
  --fs-body-sm: var(--ps-text-nav);   /* discrete: 16px base, 18px @HD */
  --fs-eyebrow: var(--ps-text-eyebrow);

  --ps-lh-tight:   1.08;
  --ps-lh-heading: 1.15;
  --ps-lh-body:    1.55;

  --container: var(--ps-container);
  --pad-x:     var(--ps-pad-x);
}

@media (min-width: 1441px) {
  :root { --ps-container: 1600px; --container: 1600px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  :root { --ps-pad-x: clamp(24px, 4vw, 48px); }
}

html, body { overflow-x: clip; }

.container {
  max-width: var(--ps-container);
  margin-inline: auto;
  padding-inline: var(--ps-pad-x);
  width: 100%;
  box-sizing: border-box;
}

.section { padding-block: var(--ps-section-py); }

.section-header, .sec-head, .hww-header, .impact-intro, .f1-head {
  margin-bottom: var(--ps-section-header-mb);
}

.case-header { padding-block: var(--ps-case-header-py); }

.hero {
  align-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hero > [class*="hero-grid"],
.hero > .hero-content,
.hero > .hero-inner {
  max-width: var(--ps-container);
  margin-inline: auto;
  padding-block: var(--ps-hero-py);
  padding-inline: var(--ps-pad-x);
  width: 100%;
  box-sizing: border-box;
}

[class*="hero-grid"] {
  align-items: start;
  gap: var(--ps-hero-gap);
}

.hero h1:not([style*="font-size"]),
.hero-inner h1:not([style*="font-size"]),
.hero-content h1:not([style*="font-size"]),
.case-title:not([style*="font-size"]),
.mockup-tagline:not([style*="font-size"]),
.cu-head h1:not([style*="font-size"]),
.cs-title:not([style*="font-size"]) {
  font-size: var(--fs-display-1);
  line-height: var(--ps-lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-header h2:not([style*="font-size"]),
.sec-h2:not([style*="font-size"]) {
  font-size: var(--fs-display-2);
  line-height: var(--ps-lh-heading);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.section-header p:not([style*="font-size"]),
.sec-lede:not([style*="font-size"]),
.hero-lede:not([style*="font-size"]),
.hero-sub:not([style*="font-size"]),
.hww-subhead:not([style*="font-size"]),
.hww-exp-desc:not([style*="font-size"]),
.impact-intro p:not([style*="font-size"]),
.f1-subtitle:not([style*="font-size"]),
.cc-left-sub:not([style*="font-size"]),
.cc-card-desc:not([style*="font-size"]),
.cc-card-sub:not([style*="font-size"]),
.isa-deliver-row p:not([style*="font-size"]),
.isa-channel-cell p:not([style*="font-size"]),
.imp-card p:not([style*="font-size"]),
.sols-headline-sub:not([style*="font-size"]),
.sols-desc:not([style*="font-size"]),
.mb-cat:not([style*="font-size"]),
.mb-desc:not([style*="font-size"]),
.why-row p:not([style*="font-size"]),
.sf-top-sub:not([style*="font-size"]),
.sf-cta-sub:not([style*="font-size"]),
.poc-sub:not([style*="font-size"]),
.why-left-sub:not([style*="font-size"]),
.fcta-modal-sub:not([style*="font-size"]),
.ag-lede:not([style*="font-size"]),
.ag-sub:not([style*="font-size"]),
.final-cta-sub:not([style*="font-size"]),
.trans-content p:not([style*="font-size"]),
.deel-card p:not([style*="font-size"]),
.clients-quote:not([style*="font-size"]),
.ind-card-sub:not([style*="font-size"]),
.ind-hover-desc:not([style*="font-size"]),
.insight-card p:not([style*="font-size"]),
.promo-caption:not([style*="font-size"]),
.cvo-deliver-card p:not([style*="font-size"]),
.cvo-feature-card p:not([style*="font-size"]),
.cvo-why-item p:not([style*="font-size"]),
.cd-depth-card p:not([style*="font-size"]),
.sd-side .box .desc:not([style*="font-size"]),
.sd-layer .desc:not([style*="font-size"]),
.sa-deliver-point p:not([style*="font-size"]) {
  font-size: var(--fs-body);
  line-height: var(--ps-lh-body);
  /* Distribute words evenly — no widow (last word alone) or orphan
     (single word first) lines. Falls back gracefully on older browsers. */
  text-wrap: balance;
  text-wrap: pretty;
}

@media (min-width: 1441px) {
  p[style*="font-size:var(--fs-title-m)"],
  p[style*="font-size: var(--fs-title-m)"] {
    font-size: var(--ps-text-body) !important;
    line-height: 1.55 !important;
  }
}
/* Body text step-up at HD — discrete 18px → 22px, no fractional values.
   Switch at 1600px: 360-1440 (small monitors) uses 18px, 1600+ (HD/QHD) uses 22px. */
@media (min-width: 1600px) {
  :root {
    --fs-body:    var(--ps-text-body);
    --fs-body-sm: var(--ps-text-nav);
  }
  /* Force all recurring body-text classes to 22px at HD — beats legacy !important rules */
  .hww-exp-desc,
  .hww-subhead,
  .cc-card-desc,
  .cc-card-sub,
  .cc-left-sub,
  .impact-intro p,
  .isa-deliver-row p,
  .isa-channel-cell p,
  .cvo-feature-card p,
  .cvo-deliver-card p,
  .cvo-why-item p,
  .sols-headline-sub,
  .sols-desc,
  .imp-card p,
  .impact-sub,
  .mb-desc,
  .mb-cat,
  .why-row p,
  .deel-card p,
  .trans-content p,
  .insight-card p,
  .clients-quote,
  .ind-card-sub,
  .ind-hover-desc,
  .poc-sub,
  .why-left-sub,
  .fcta-modal-sub,
  .sf-top-sub,
  .sf-cta-sub,
  .ag-lede,
  .ag-sub,
  .final-cta-sub,
  .cs-lede,
  .cs-card-desc,
  #risk-compliance .cvo-feature-card p,
  .cd-depth-card p,
  .sd-side .box .desc,
  .sd-layer .desc,
  .sa-deliver-point p,
  .solution p,
  .final-cta p {
    font-size: var(--ps-text-body) !important;
    line-height: 1.55 !important;
  }
  /* 1600+ (22px text): row min-height sized to fit the actual longest description
     (5 lines × 22px × 1.55 lh = 170px + heading area 90px + padding 64 = ~324px).
     Set 340px = content + 16px slack, no wasted whitespace on collapsed cards. */
  .hww-acc-row {
    min-height: 280px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE (≤ 767px) — comprehensive natural mobile adaptation
   Bumps type floors · restores margins · centers stats · fixes hamburger
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* User-specified minimum type sizes:
     H1 40 · H2 32 · H3 24 · Body 16 · Eyebrow 14 */
  :root {
    --fs-display-1:      var(--ps-text-h1);
    --fs-display-2:      var(--ps-text-h1);
    --fs-body:    var(--ps-text-body);
    --fs-body-sm: var(--ps-text-nav);
    --fs-eyebrow: var(--ps-text-eyebrow);
    --ps-section-header-mb: clamp(32px, 8vw, 48px);
    /* Looser line-heights for smaller headings on mobile — no crowded lines */
    --ps-lh-tight:   1.18;   /* H1 mobile: was 1.08 */
    --ps-lh-heading: 1.22;   /* H2 mobile: was 1.15 */
  }

  /* Force headings to win against legacy !important rules.
     We keep  filter so intentional inline styles still win. */
  .hero h1,
  .hero-inner h1,
  .hero-content h1,
  .cvo-hero-grid h1,
  .isa-hero-grid h1,
  .dsa-hero-grid h1,
  .pd-hero-grid h1,
  .wealth-hero-grid h1,
  .case-title,
  .mockup-tagline,
  .cu-head h1,
  .cs-title {
    font-size: var(--fs-display-1) !important;
    line-height: var(--ps-lh-tight) !important;
  }
  .section-header h2,
  .sec-h2,
  .hww-heading,
  .impact-intro h2,
  .f1-headline {
    font-size: var(--fs-display-2) !important;
    line-height: var(--ps-lh-heading) !important;
  }
  .section-header p,
  .sec-lede,
  .hero-lede,
  .hero-sub,
  .hww-subhead,
  .impact-intro p,
  .f1-subtitle,
  .isa-deliver-row p,
  .isa-channel-cell p,
  .cc-card-desc,
  .cc-card-sub,
  .cc-left-sub,
  .hww-exp-desc,
  .sols-headline-sub,
  .sols-desc,
  .imp-card p,
  .impact-sub,
  .deel-card p,
  .clients-quote,
  .why-row p,
  .cvo-deliver-card p,
  .cvo-feature-card p,
  .cvo-why-item p,
  .cs-lede,
  .cs-card-desc,
  .final-cta-sub,
  .sf-top-sub,
  .sf-cta-sub,
  .ag-lede,
  .ag-sub,
  .trans-content p,
  .insight-card p,
  .promo-caption p,
  .ind-card-sub,
  .ind-hover-desc,
  .poc-sub,
  .why-left-sub,
  .fcta-modal-sub,
  .mb-desc,
  .mb-cat,
  .cvo-deliver-desc,
  .cvo-outcome,
  .f1-transform-caption,
  .cu-offices-head p,
  .cd-depth-card p,
  .sd-side .box .desc,
  .sd-layer .desc,
  .sa-deliver-point p,
  .solution p,
  .final-cta p {
    font-size: var(--fs-body) !important;
    line-height: var(--ps-lh-body) !important;
  }
  .eyebrow,
  .hww-eyebrow,
  .section-header .eyebrow {
    font-size: var(--fs-eyebrow) !important;
    letter-spacing: 0.14em !important;
  }

  /* Section rhythm — more breathing room between sections */
  .section { padding-block: clamp(56px, 12vw, 88px) !important; }

  /* Hero — natural mobile stack; padding inherits from --ps-hero-py (56px min) */
  .hero { min-height: auto; }
  [class*="hero-grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }


  /* ─── Channels/Modules grid on mobile: force 1 column + tighter rhythm ─── */
  .isa-channels {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }
  .isa-channel-cell {
    padding: 20px var(--space-2) !important;
  }
  .isa-channel-cell .icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 12px !important;
  }
  /* Hide Business Outcomes divider on mobile (cells stack — divider unnecessary).
     Also remove the padding-top:var(--space-5) that legacy adds to cells 4-6 (nth-child n+5)
     for visual row separation on desktop — unnecessary when cells stack on mobile. */
  .mb-row-divider {
    display: none !important;
  }
  .mb-band--6 .mb-cell:nth-child(n+5),
  .mb-band--7 .mb-cell:nth-child(n+6),
  .mb-band--8 .mb-cell:nth-child(n+5),
  .mb-band--8 .mb-cell:nth-child(n+6) {
    padding-top: 0 !important;
  }

  /* PD-style .mb-band--6 (3-col grid at desktop >=1025px, NO divider element).
     Legacy .mb-cell::after gives cells right dividers except :last-child — cell 3
     (end of top row) has stray divider extending past grid.
     Legacy .mb-cell:first-child gives cell 1 padding-left:0, but cell 4 (start of
     bottom row) doesn't get the same treatment — misalignment.
     Fix both — scoped to >=1025px so tablet 2-col layout is untouched. */
  @media (min-width: 1025px) {
    .mb-band--6 .mb-cell:nth-child(3)::after {
      display: none !important;
    }
    .mb-band--6 .mb-cell:nth-child(3) {
      padding-right: 0 !important;
    }
    .mb-band--6 .mb-cell:nth-child(4) {
      padding-left: 0 !important;
    }
  }
  /* ─── HAMBURGER FIX ─── */
  .hamburger {
    display: inline-flex !important;   /* override legacy display:none base */
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 16px !important;
    right: var(--ps-pad-x) !important;
    z-index: 10000 !important;          /* above fcta-overlay (1000) and skip-link (9999) */
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;   /* ensure clicks fire */
  }
  .hamburger svg {
    width: 24px !important;
    height: 24px !important;
    stroke: var(--ink-900) !important;
    fill: none !important;
    stroke-width: 2 !important;
    pointer-events: none !important;   /* SVG doesn't intercept clicks — the button does */
  }
  /* Hide hamburger when drawer is open — only the close (X) icon should be visible */
  body.mobile-menu-open .hamburger {
    display: none !important;
  }

  /* Wealth-Platform hero-only: full-bleed background image overlaps text on mobile.
     Hide the bg image + reveal a stacked mobile image below the CTA.
     Other pages use side-by-side hero grids that collapse naturally. */
  .hero-bg { display: none !important; }
  .hero-mobile-img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: right center !important;
    margin: var(--space-4) auto 0 !important;
  }

  /* Why PrimeSoft section — mobile: shrink SVG box, tighten gap between image + text */
  .why-split {
    gap: var(--space-3) !important;
  }
  .why-img-box {
    min-height: auto !important;
    padding: 0 !important;
  }
  .why-img-box svg {
    max-height: 260px !important;
  }
  .why-row {
    padding: 14px 0 !important;
  }

  /* ─── BUSINESS IMPACT — center-align on mobile + tight rhythm ─── */
  .mb-band {
    row-gap: var(--space-4) !important;   /* compact vertical rhythm for stacked cells */
  }
  .mb-cell,
  .impact-cell,
  .imp-card {
    text-align: center !important;
    align-items: center !important;
    padding-inline: 0 !important;   /* padding lives on .mb-band container, not cells */
  }
  .mb-cell::after,
  .mb-cell::before { display: none !important; }
  /* Tight rhythm INSIDE each cell so label + value + description read as a group */
  .mb-cat  { margin-bottom: var(--space-1) !important;  }
  .mb-value { margin-bottom: 12px !important; }
  .mb-desc { margin-bottom: 0 !important;    }

  /* ─── HOW IT WORKS — mobile: expand every card, no accordion ───
     Root fix: on desktop the cards use absolute-positioned overlays with
     fixed heights (64/280). That breaks on mobile. Simpler: hide the
     collapsed overlay entirely and let the expanded content flow statically.
     Every card shows num + title + description. No click needed. */
  .hww-section {
    padding-inline: var(--ps-pad-x) !important;
  }
  /* Card wrapper: static height driven by content, uniform padding */
  .hww-acc-card,
  .hww-acc-card.hww-active {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: var(--space-3) !important;
    margin-bottom: 12px !important;
    border-radius: var(--radius) !important;
    overflow: visible !important;
    position: relative !important;
    cursor: default !important;
  }
  .hww-acc-card:last-child { margin-bottom: 0 !important; }
  /* Hide the collapsed overlay entirely on mobile */
  .hww-collapsed {
    display: none !important;
  }
  /* Expanded content: static flow, top-left, opaque */
  .hww-expanded {
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  .hww-expanded > div {
    display: block !important;
  }
  /* Typography: canonical num + title + description */
  .hww-exp-num {
    display: block !important;
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    color: var(--brand) !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 var(--space-1) 0 !important;
    line-height: 1 !important;
  }
  .hww-exp-title {
    display: block !important;
    font-size: var(--fs-title-m) !important;
    font-weight: 500 !important;
    color: var(--ink-900) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 12px 0 !important;
  }
  .hww-exp-bar {
    display: block !important;
    width: 32px !important;
    height: 2px !important;
    background: var(--ink-200) !important;
    margin: 0 0 12px 0 !important;
  }
  .hww-exp-desc {
    display: block !important;
    font-size: var(--fs-title-m) !important;
    color: var(--ink-600) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
  /* Kill any accordion active-state size boosts on mobile */
  .hww-acc-card.hww-active .hww-expanded,
  .hww-acc-card:not(.hww-active) .hww-expanded {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  /* ─── CARDS — consistent padding ─── */
  .cc-card, .cs-card-body, .tc-card, .m4-card, .sf-card, .sols-card {
    padding: var(--ps-s4) !important;
  }

  /* ─── TOUCH TARGETS ─── */
  .btn, .btn-primary, .btn--primary, .btn-secondary,
  .fcta-trigger, .hero-cta-btn, .ag-cta, .cc-left-cta {
    min-height: 48px !important;
    padding-inline: var(--ps-s3) !important;
    font-size: var(--fs-body) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP (≥ 1024px) — targeted fixes for legacy component overflow
   These address specific 1920 issues found during ISA pilot testing.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* ─── HOW IT WORKS at desktop ───
     Tier 1 (1024-1599, 18px text): NO override — legacy owns row min-height, padding,
     AND overflow:hidden on card. The overflow:hidden is REQUIRED for the hover
     cross-fade animation to render cleanly. Only tier 2 (1600+) tweaks row height. */

  /* ─── Pyramid labels: sized to fit the SVG's fixed foreignObject slots
     (SVG is a fixed-position diagram — 22px body would overflow into next tier).
     Use 18px body / 20px heading — readable but fits within the pyramid layout. */
  .annotated .label h4 {
    font-size: var(--ps-text-h3) !important;
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
  }
  .annotated .label p {
    font-size: var(--fs-body) !important;
    line-height: 1.45 !important;
  }

  /* ─── "Built on three principles" tag: more visible at HD ─── */
  .why-three-tag {
    font-size: var(--fs-meta) !important;
    color: var(--ink-600) !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 20px !important;
  }

  /* ─── CC card "Read more" / "Show less" toggle: too small at HD ─── */
  .cc-card-toggle {
    font-size: var(--ps-text-body) !important;
    gap: var(--space-1) !important;
    margin-top: var(--space-2) !important;
  }
  .cc-card-toggle-chev {
    width: clamp(12px, 0.9vw, 15px) !important;
    height: clamp(12px, 0.9vw, 15px) !important;
  }

}



/* ═══════════════════════════════════════════════════════════════════════
   PYRAMID SVG LABELS ON MOBILE
   The SVG viewBox is 0 80 1000 360. On a 390px viewport it scales to ~390
   wide (scale ~0.39). To make label text readable at that scale, internal
   font-size needs to be ~2.5× the desired actual size.
   Desktop labels stay at their normal sizes.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* On mobile the label descriptions don't fit — hide them, show only tier titles.
     Line endpoints are at y=138/245/350 (8 SVG units from top of each foreignObject).
     Allow content to overflow the foreignObject vertically so titles render fully
     when centered on the line height. */
  .annotated foreignobject {
    overflow: visible !important;
  }
  .annotated .label {
    display: block !important;
    height: 100% !important;
    padding-left: 12px !important;
    position: relative !important;
    overflow: visible !important;
  }
  .annotated .label > div {
    width: 100% !important;
    position: absolute !important;
    top: 8px !important;
    left: 12px !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
  }
  .annotated .label h4 {
    font-size: var(--ps-text-h1) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .annotated .label p {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CORE CAPABILITIES CARDS on mobile — Option A (approved)
   
   Icon top-left · title below icon · description below title. All left-aligned.
   Matches the HWW cards pattern for cross-page consistency.
   Applies at ≤767px only — desktop layout unchanged.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .cc-card {
    display: block !important;
    padding: var(--space-3) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ink-200) !important;
    border-radius: var(--radius) !important;
    margin-bottom: var(--space-2) !important;
    text-align: left !important;
  }
  .cc-card:last-child { margin-bottom: 0 !important; }
  .cc-card-head {
    display: block !important;
    width: auto !important;
    margin-bottom: var(--space-2) !important;
    flex: none !important;
  }
  .cc-card-icon {
    width: 56px !important;
    height: 56px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .cc-card-icon-img {
    width: 56px !important;
    height: 56px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  .cc-card-content {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .cc-card-title {
    font-size: var(--fs-title-m) !important;
    font-weight: 500 !important;
    color: var(--ink-900) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 var(--space-1) !important;
    text-align: left !important;
  }
  .cc-card-sub, .cc-card-desc {
    font-size: var(--fs-body) !important;
    font-weight: 300 !important;
    color: var(--ink-600) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  /* Kill any hover transforms / sticky positioning that legacy applies to cc-card */
  .cc-card:hover { transform: none !important; }
  /* Container that holds all cards — vertical stack */
  .cc-right, .cc-cards, .cc-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   SMALL MOBILE (≤ 480px) — very narrow screens
   ═══════════════════════════════════════════════════════════════════════ */

  /* Wealth hero mobile-only image — hidden on desktop */
  .hero-mobile-img { display: none; }

@media (max-width: 480px) {
  :root {
    --ps-pad-x: clamp(20px, 4vw, 24px);   /* Enterprise B2B standard: 20-24px on mobile */
  }
  .section { padding-block: clamp(48px, 12vw, 72px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO — kill legacy HD-only section padding
   Legacy adds padding-top:105px !important + padding-bottom:76px !important
   at @1441px+ only. That's the SOLE cause of the "extra whitespace at 1920"
   vs "fine at 1366". Override with 0 so hero at 1920 matches 1366 rhythm.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Hero at desktop+: kill section min-height so section is content-driven.
     Higher specificity (section.hero = 11) to beat any legacy .hero rules.
     Also top-align content so any residual slack goes to bottom (not centered
     which creates equal top/bottom whitespace surrounding a small content). */
  section.hero {
    min-height: auto !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }
  /* Also force grid padding to use our token, high specificity to beat legacy */
  section.hero > [class*="hero-grid"],
  section.hero > .hero-content,
  section.hero > .hero-inner {
    padding-block: var(--ps-hero-py) !important;
  }
}
@media (min-width: 1441px) {
  /* Kill legacy .hero padding-top:105 + padding-bottom:76 at HD.
     ONLY targets section.hero — case-fullbleed-hero and cu-hero need their own
     vertical padding (they don't have a hero-grid child to own padding-block). */
  section.hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }
}

@media (min-width: 1441px) {
  /* Section-header container widens proportionally at HD.
     Prevents "H2 wraps to 3 lines at 1920 but 2 at 1366" caused by fixed
     760px max-width while H2 font-size scales up to 52px. */
  .section-header { max-width: clamp(760px, 60vw, 1100px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Business Impact stat description — cap at 2 lines max
   Applies at all viewports. Text wraps naturally within 2 lines, then
   any overflow is truncated with ellipsis.
   ═══════════════════════════════════════════════════════════════════════ */
.mb-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-clamp: 2;  /* future standard */
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER / NAV — align with container at HD viewports
   
   Root cause: .header uses padding-inline: var(--pad-x) on a full-width
   element. At viewports > --ps-container (e.g., 1920 with container 1600),
   the header content sits left of container content (e.g., logo at 80px
   from viewport left while container content starts at 240px).
   
   Fix: pad by the greater of --ps-pad-x OR half the extra viewport space
   plus --ps-pad-x. At viewports ≤ container, base padding wins. At larger
   viewports, extra padding is added to match container centering.
   ═══════════════════════════════════════════════════════════════════════ */
.header {
  padding-inline: max(var(--ps-pad-x), calc((100vw - var(--ps-container)) / 2 + var(--ps-pad-x))) !important;
}

  /* Architecture section — scale up starting at 1200 (was 1441 only) so all 
     desktop viewports get proper hierarchy, not just full HD */
  @media (min-width: 1200px) {
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3 {
      font-size: var(--fs-title-l) !important;
      line-height: 1.3 !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-meta) !important;
    }
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-meta) !important;
      padding: 6px 12px !important;
    }
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      font-size: var(--fs-title-m) !important;
      line-height: 1.5 !important;
    }
  }

  /* Architecture — HD (1600+) — bigger still, aligned with 22px body text */
  @media (min-width: 1600px) {
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3 {
      font-size: var(--fs-title-l) !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-body) !important;
    }
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-body) !important;
      padding: var(--space-1) 14px !important;
    }
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      font-size: var(--ps-text-body) !important;
    }
  }

  /* Card-bottom blue outcome text at HD — bump to 18px for readability at 1920.
     .cd-depth-outcome — "What PrimeSoft ... Delivers" cards (13→18)
     .cc-outcome — "Core Capabilities" outcome text (15→18) */
  @media (min-width: 1600px) {
    .cd-depth-outcome,
    .cc-outcome {
      font-size: var(--fs-title-m) !important;
      line-height: 1.5 !important;
    }
  }

  /* ─── Architecture section (#architecture) — shared across PD/Cloud/Oracle/QA ─── */
  /* .sd wrapper — legacy hardcoded max-width: 1100px, expand to fill container */
  #architecture .sd { max-width: 100% !important; width: 100% !important; }
  /* Card sizing (from PD): let cards size to content instead of equal-height flex share.
     Without these, .sd-layer has flex: 1 1 0 which causes content clipping when
     one card in the middle stack has more chips than the other. */
  #architecture .sd-stack {
    height: auto !important;
    min-height: 0 !important;
  }
  #architecture .sd-layer {
    flex: 0 0 auto !important;
    min-height: auto !important;
    padding: 22px var(--space-3) !important;
    gap: 10px !important;
  }
  /* Widen the .sd-platform grid — desktop only. Mobile stacks vertically below. */
  @media (min-width: 1024px) {
    #architecture .sd-platform {
      grid-template-columns: 1fr 1.35fr 1fr !important;
      gap: var(--space-2) !important;
    }
  }
  /* Reading flow — label on top row, steps on single row below */
  #architecture .sd-flow-label {
    display: block !important;
    margin-bottom: var(--space-1) !important;
    text-align: center !important;
  }
  #architecture .sd-flow-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  #architecture .sd-flow-steps .step {
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    margin: 0 2px !important;
    font-size: var(--fs-body) !important;
    gap: 4px !important;
  }
  #architecture .sd-flow-steps .step .n {
    width: 20px !important;
    height: 20px !important;
    font-size: var(--fs-eyebrow) !important;
    flex-shrink: 0 !important;
  }
  #architecture .sd-flow-steps .sep {
    flex: 0 0 auto !important;
    font-size: var(--fs-meta) !important;
    margin: 0 2px !important;
  }
  
  /* HD (1600+) — bump chip, role, and reading-flow steps */
  @media (min-width: 1600px) {
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-body) !important;
      padding: var(--space-1) var(--space-2) !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-body) !important;
      letter-spacing: 0.14em !important;
    }
    #architecture .sd-flow-steps .step {
      font-size: var(--fs-body) !important;
    }
    #architecture .sd-flow-steps .sep {
      font-size: var(--fs-body) !important;
    }
    #architecture .sd-flow-steps .step .n {
      width: 22px !important;
      height: 22px !important;
      font-size: var(--fs-eyebrow) !important;
    }
  }

  /* How It Works (deel-timeline) — HD scale (1600+) so step titles + descriptions
     are legible at 1920. Steps titles bumped to 22, descriptions to 22 matching body. */
  @media (min-width: 1600px) {
    .deel-labels .label .num {
      font-size: var(--ps-text-h3) !important;
    }
    .deel-labels .label .ttl {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .deel-card p {
      font-size: var(--ps-text-body) !important;
      line-height: 1.5 !important;
    }
  }

  /* Case Studies (cs-flip-card) — HD scale (1600+) so card content is readable at 1920 */
  @media (min-width: 1600px) {
    /* Front face */
    .cs-flip-card .cs-front .cs-ind { font-size: var(--ps-text-eyebrow) !important; }
    .cs-flip-card .cs-front .cs-tag { font-size: var(--fs-meta) !important; padding: 6px 12px !important; }
    .cs-flip-card .cs-front .cs-titleblock h3 { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
    .cs-flip-card .cs-front .cs-hint { font-size: var(--fs-meta) !important; }
    /* Back face */
    .cs-flip-card .cs-back .cs-back-tag { font-size: var(--fs-meta) !important; }
    .cs-flip-card .cs-back .cs-stat-mega { font-size: var(--ps-text-h1) !important; }
    .cs-flip-card .cs-back .cs-stat-lbl { font-size: var(--fs-body) !important; }
    .cs-flip-card .cs-back h3 { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
    .cs-flip-card .cs-back p { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
    .cs-flip-card .cs-back .cs-cta { font-size: var(--fs-body) !important; padding: 12px 20px !important; }
  }

  /* PD How It Works — desktop uses deel-timeline, mobile uses hww-acc component (matches ISA design) */
  .hww-acc-mobile { display: none; }
  @media (max-width: 767px) {
    .deel-timeline { display: none !important; }
    .hww-acc-mobile { display: block !important; }
  }
  /* ─── Case Studies mobile — show FRONT face only, replace hover-hint with CTA ─── */
  @media (max-width: 767px) {
    /* Explicit padding at multiple layers so cards can't overflow */
    #case-studies {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    #case-studies > .container,
    #case-studies .container {
      padding-left: 20px !important;
      padding-right: 20px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    /* 1-col grid — full width of container's inner area */
    .cs-flip-grid {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
      perspective: none !important;
      padding: 0 !important;
      margin: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    /* Force card to respect container width, override aspect-ratio */
    .cs-flip-card {
      aspect-ratio: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    /* Card container — cleaner padding, softer shadow, no clipping */
    .cs-flip-card {
      display: block !important;
      perspective: none !important;
      transform-style: flat !important;
      transform: none !important;
      height: auto !important;
      background: #FFFFFF !important;
      border: 1px solid var(--ink-200) !important;
      border-radius: var(--radius-pill) !important;
      overflow: visible !important;
      text-decoration: none !important;
      color: inherit !important;
      box-shadow: 0 2px 8px rgba(16,24,40,0.06) !important;
      padding: var(--space-3) 20px !important;
    }
    .cs-flip-card:hover { transform: none !important; }
    
    /* Flatten flip-face — strip its border/bg/padding */
    .cs-flip-face.cs-front,
    .cs-front {
      position: static !important;
      transform: none !important;
      backface-visibility: visible !important;
      display: block !important;
      height: auto !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      overflow: visible !important;
      color: var(--ink-900) !important;
    }
    .cs-flip-face.cs-back { display: none !important; }
    
    /* Top row: industry label + case tag — well-spaced */
    .cs-front .cs-top {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      gap: 12px !important;
      margin: 0 0 20px !important;
      padding: 0 !important;
    }
    .cs-front .cs-ind {
      font-size: var(--fs-eyebrow) !important;
      font-weight: 500 !important;
      letter-spacing: normal !important;
      text-transform: none !important;
      color: var(--ink-600) !important;
      line-height: 1 !important;
    }
    .cs-front .cs-tag {
      font-size: var(--fs-eyebrow) !important;
      font-weight: 500 !important;
      padding: 5px 10px !important;
      letter-spacing: 0.1em !important;
      line-height: 1 !important;
    }
    
    /* Mockup section — dedicated visual band with subtle backdrop */
    .cs-front .cs-mockup {
      padding: 20px var(--space-2) !important;
      margin: 0 0 var(--space-3) !important;
      overflow: visible !important;
      background: #F8FAFF !important;
      border-radius: 10px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 160px !important;
    }
    .cs-front .cs-mockup img {
      width: 100% !important;
      height: auto !important;
      max-height: 180px !important;
      max-width: 100% !important;
      object-fit: contain !important;
      display: block !important;
      margin: 0 auto !important;
    }
    
    /* Title block + CTA — grouped as bottom action zone */
    .cs-front .cs-titleblock {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .cs-front .cs-titleblock h3 {
      font-size: var(--fs-title-m) !important;
      font-weight: 500 !important;
      color: var(--ink-900) !important;
      line-height: 1.35 !important;
      margin: 0 0 18px !important;
      letter-spacing: -0.01em !important;
    }
    
    /* Hide the "Hover to reveal outcome →" hint */
    .cs-front .cs-hint { display: none !important; }
    
    /* "Read full case study →" CTA button */
    .cs-front .cs-titleblock::after {
      content: "Read full case study →";
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 11px 20px !important;
      background: var(--brand) !important;
      color: #FFFFFF !important;
      border-radius: var(--radius-pill) !important;
      font-size: var(--fs-meta) !important;
      font-weight: 500 !important;
      font-family: 'Outfit', sans-serif !important;
      margin: 0 !important;
      letter-spacing: 0 !important;
    }
  }

  /* ─── Architecture section mobile — vertical stack in 1→5 reading order ─── */
  @media (max-width: 767px) {
    /* Reorder cards to match Foundation → Governance flow.
       .sd-stack contains L2 and L1; display: contents lets them become direct
       children of .sd-platform for flex ordering. */
    #architecture .sd-stack { display: contents !important; }
    #architecture .sd-layer.foundation { order: 1 !important; }
    #architecture .sd-layer:not(.foundation) { order: 2 !important; }
    #architecture .sd-side.left { order: 3 !important; }
    #architecture .sd-side.right { order: 4 !important; }
    /* Umbrella (Governance = step 5) is a separate sibling of .sd-platform
       so it renders after all 4 layers naturally. */
    #architecture .sd { max-width: 100% !important; padding: 0 !important; }
    #architecture .sd-platform {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
    /* Sides + stack all become sequential blocks */
    #architecture .sd-side,
    #architecture .sd-stack {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      padding: 0 !important;
      height: auto !important;
    }
    /* Cards: consistent look across sides + layers.
       Override the desktop flex `align-items: center` so all children
       (role badge, h3, chips) start from the LEFT edge on mobile. */
    #architecture .sd-side .box,
    #architecture .sd-layer {
      padding: 20px 18px !important;
      border-radius: 12px !important;
      min-height: auto !important;
      text-align: left !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
    }
    /* Ensure inner text elements don't inherit center-align via inline styles */
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role,
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3,
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      align-self: flex-start !important;
      width: 100% !important;
    }
    /* Umbrella umbrella box grid also needs alignment fix */
    #architecture .sd-umbrella .box {
      align-items: flex-start !important;
    }
    /* Titles and body copy readable on small screens */
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3 {
      font-size: var(--fs-title-m) !important;
      text-align: left !important;
      margin: 6px 0 var(--space-1) !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-eyebrow) !important;
      text-align: left !important;
    }
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      font-size: var(--fs-body) !important;
      text-align: left !important;
      margin-bottom: 12px !important;
    }
    /* Chips wrap in rows, aligned left */
    #architecture .sd-layer .chips,
    #architecture .sd-umbrella .chips {
      justify-content: flex-start !important;
      gap: 6px !important;
      margin-top: 4px !important;
    }
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-eyebrow) !important;
      padding: 6px 10px !important;
    }
    /* Layer 3 (Enterprise Integration) — match Layer 2 chip layout:
       wrap pipe stages horizontally like chips, hide the ↓ arrows. */
    #architecture .cd-pipe {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      width: 100% !important;
      gap: 6px !important;
      margin-top: 4px !important;
    }
    #architecture .cd-pipe-arrow {
      display: none !important;
    }
    #architecture .cd-pipe-stage {
      text-align: left !important;
      min-width: 0 !important;
      width: auto !important;
      max-width: 100% !important;
      /* Match .sd-layer .chip visual so it looks like Layer 2's chips */
      font-size: var(--fs-eyebrow) !important;
      font-weight: 500 !important;
      padding: 6px 10px !important;
      letter-spacing: 0.02em !important;
      text-transform: none !important;
    }
    /* Layer 4 (Quality & Compliance) — pills wrap starting from LEFT. */
    #architecture .cd-pills {
      justify-content: flex-start !important;
      align-items: flex-start !important;
    }
    #architecture .cd-pill {
      text-align: left !important;
    }
    /* Umbrella card: label + chips stack instead of grid */
    #architecture .sd-umbrella { margin-top: 12px !important; }
    #architecture .sd-umbrella .box {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
      padding: 20px 18px !important;
    }
    /* Reading flow: stack steps vertically on mobile */
    #architecture .sd-flow-label {
      text-align: left !important;
      margin-bottom: 10px !important;
    }
    #architecture .sd-flow-steps {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: var(--space-1) !important;
    }
    #architecture .sd-flow-steps .step {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      font-size: var(--fs-meta) !important;
      margin: 0 !important;
      padding: var(--space-1) 12px !important;
      background: #F8FAFF !important;
      border-radius: 8px !important;
    }
    #architecture .sd-flow-steps .step .n {
      width: 24px !important;
      height: 24px !important;
      font-size: var(--fs-eyebrow) !important;
    }
    #architecture .sd-flow-steps .sep { display: none !important; }
    /* Hide the reading-flow band on mobile — redundant now that layer cards
       stack in the same 1→5 order that the flow describes. */
    #architecture .sd-reading-flow { display: none !important; }
  }

  /* ─── Business Outcomes mb-band--6 DSA/PD style: 3+3 layout with horizontal divider ─── */
  /* Desktop: 3 columns */
  @media (min-width: 1025px) {
    .mb-band--6 { grid-template-columns: repeat(3, 1fr) !important; row-gap: 0 !important; }
    .mb-band--6 .mb-cell:nth-child(n+5) {
      padding-top: var(--space-5) !important;
      margin-top: 0 !important;
    }
    .mb-band--6 .mb-cell:nth-child(3)::after { display: none !important; }
    .mb-band--6 .mb-cell:nth-child(5) { padding-left: 0 !important; }
  }
  /* Tablet: 2 columns */
  @media (min-width: 641px) and (max-width: 1024px) {
    .mb-band--6 { grid-template-columns: repeat(2, 1fr) !important; row-gap: 40px !important; }
  }
  /* Mobile: 1-column stack (long descriptions need full width to read comfortably) */
  @media (max-width: 640px) {
    .mb-band--6 { grid-template-columns: 1fr !important; row-gap: var(--space-4) !important; }
    .mb-band--6 .mb-cell:nth-child(n+5) { padding-top: 0 !important; }
  }
  .mb-row-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--ink-200);
    margin: var(--space-5) 0 0;
  }
  @media (max-width: 767px) {
    .mb-row-divider { display: none !important; }
  }

  /* Case Studies — match PD's mockup treatment (100% width, softer drop-shadow).
     Cloud/Oracle/QA had 72% width constraint. Now all pages consistent. */
  .cs-flip-card .cs-front .cs-mockup,
  .cs-mockup {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .cs-flip-card .cs-front .cs-mockup img,
  .cs-mockup img {
    max-width: 100% !important;
    max-height: 198px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 16px rgba(16,24,40,0.10)) !important;
  }
  .cs-flip-card .cs-front .cs-mockup svg,
  .cs-mockup svg {
    max-width: 90% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 24px rgba(21,93,252,0.16)) !important;
  }

  /* Our Solutions cards — equal height per row (fix C&V being taller than siblings) */
  .sols-grid {
    align-items: stretch !important;
  }
  .sols-card {
    height: 100% !important;
    min-height: 100% !important;
    align-self: stretch !important;
  }

  /* How We Work / How It Works (hww-acc) — HD 1600+ font scaling. */
  @media (min-width: 1600px) {
    .hww-subhead {
      font-size: var(--ps-text-body) !important;
      line-height: 1.55 !important;
    }
    .hww-col-num {
      font-size: var(--fs-title-l) !important;
    }
    .hww-col-title {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .hww-exp-num {
      font-size: var(--fs-title-l) !important;
    }
    .hww-exp-title {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .hww-exp-desc {
      font-size: var(--ps-text-body) !important;
      line-height: 1.55 !important;
      max-width: 640px !important;
    }
    .hww-eyebrow {
      font-size: var(--fs-eyebrow) !important;
    }
  }

  /* Trust chip mobile — balance text wrap, larger icon, better spacing */
  @media (max-width: 640px) {
    .hero-trust {
      font-size: var(--fs-eyebrow) !important;
      padding: 10px var(--space-2) !important;
      line-height: 1.4 !important;
      gap: 12px !important;
      text-wrap: balance !important;
      max-width: 100% !important;
      align-items: center !important;
      border-radius: var(--radius-pill) !important;
    }
    .hero-trust svg {
      width: 20px !important;
      height: 20px !important;
      flex-shrink: 0 !important;
      margin-top: 0 !important;
    }
  }

  /* Hero value strip mobile — 2 on line 1 ("Accelerate • Modernize"), 1 on line 2 ("Adopt AI") */
  @media (max-width: 767px) {
    .hero-value-strip {
      display: flex !important;
      flex-direction: row !important;      /* override any column stack */
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-items: center !important;
      row-gap: 6px !important;
      column-gap: 0 !important;
      white-space: normal !important;
      text-align: left !important;
    }
    /* Show all separators */
    .hero-value-strip .sep {
      display: inline !important;
      margin: 0 var(--space-1) !important;
    }
    /* Hide the SECOND separator (the 4th child overall = between "Modernize" and "Adopt AI").
       Selector uses nth-child since nth-of-type(2) was matching the FIRST span with class sep. */
    .hero-value-strip > .sep:nth-child(4) {
      display: none !important;
    }
    /* Force the last item ("Adopt AI with Confidence") to a new line via flex-basis */
    .hero-value-strip > span:not(.sep):last-child {
      flex-basis: 100% !important;
      text-align: left !important;
    }
  }

  /* Home promo video section — proper top spacing + title layout on mobile */
  @media (max-width: 767px) {
    .promo {
      padding-top: 40px !important;      /* was 0 — proper spacing above video card */
    }
    /* Adjust title inside video card on mobile — improve alignment */
    .promo-caption {
      left: 20px !important;
      right: 20px !important;
      bottom: 20px !important;
      max-width: calc(100% - 40px) !important;
      align-items: flex-start !important;
    }
    .promo-caption h3 {
      font-size: var(--fs-title-m) !important;         /* was 22 — better fit for narrow mobile */
      line-height: 1.3 !important;
      margin-bottom: 4px !important;
    }
    .promo-caption p {
      font-size: var(--fs-meta) !important;
      line-height: 1.4 !important;
    }
    .promo-bar-vert {
      width: 3px !important;
      height: 44px !important;
      flex-shrink: 0 !important;
      margin-top: 2px !important;
    }
    /* Reduce play button so it doesn't overlap the title */
    .promo .play-button {
      width: 56px !important;
      height: 56px !important;
    }
    .promo .play-button svg {
      width: 22px !important;
      height: 22px !important;
      margin-left: 2px !important;
    }
    /* Also shrink the ripple animation for the smaller button */
    .promo .play-button::before {
      inset: -6px !important;
    }
  }

  /* Pain Metrics Band mobile — reduce gap between title and stats + 2x2 layout */
  @media (max-width: 767px) {
    .sf-top {
      padding-bottom: var(--space-2) !important;      /* was 32 */
    }
    .sf-metrics-band {
      padding-top: var(--space-2) !important;         /* was 40 */
      padding-bottom: 40px !important;      /* was 72 */
    }
    /* 4 stats → 2x2 grid on mobile */
    .sf-metrics-band .mb-band {
      grid-template-columns: repeat(2, 1fr) !important;
      row-gap: 28px !important;
      column-gap: 12px !important;
    }
    /* Center-align cell content in the 2x2 grid (impact stats feel) */
    .sf-metrics-band .mb-cell {
      text-align: center !important;
      align-items: center !important;
      padding: 0 !important;
    }
    /* Hide vertical dividers between cells (no longer 1-column) */
    .sf-metrics-band .mb-cell::after,
    .sf-metrics-band .mb-cell::before {
      display: none !important;
    }
  }

  /* Customer review + stats-band mobile adjustments */
  @media (max-width: 767px) {
    /* Bump customer review body text 17 → 18px (design system standard) */
    .clients-q-name { font-size: var(--fs-title-m) !important; }
    .clients-q-quote { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
    
    /* Stats-band (Enterprise-Grade / 20+ Years / 4 / 24×7) — 2x2 on mobile */
    .stats-band .stats-row {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      column-gap: 12px !important;
      row-gap: var(--space-3) !important;
      flex-wrap: initial !important;
    }
    .stats-band .stats-cell {
      padding: var(--space-1) !important;
      text-align: center !important;
    }
    /* Hide the vertical dividers (.stats-div) in 2x2 layout */
    .stats-band .stats-div { display: none !important; }
    /* Bump stats font sizes on mobile for 2x2 layout */
    .stats-band .stats-num {
      font-size: var(--ps-text-h1) !important;    /* was 28 — bigger for 2x2 impact */
      margin-bottom: 6px !important;
    }
    .stats-band .stats-label {
      font-size: var(--fs-meta) !important;    /* was 12 — better readability */
      line-height: 1.4 !important;
    }
  }

  /* Industries cards mobile — original design + rounded transparent overlay */
  @media (max-width: 767px) {
    .ind-grid {
      grid-template-columns: 1fr !important;
      gap: var(--space-2) !important;
    }
    /* Card sizes to content — no empty band at bottom */
    .ind-card {
      min-height: 220px !important;
      height: auto !important;
    }
    /* White overlay — semi-transparent + rounded so image peeks through around edges */
    .ind-card .ind-hover {
      background: rgba(255, 255, 255, 0.85) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border-radius: var(--radius) !important;
      margin: var(--space-2) !important;
      padding: 20px !important;
      position: relative !important;
      inset: auto !important;
      opacity: 1 !important;
      color: var(--ink-900) !important;
      box-shadow: 0 4px 20px rgba(16,24,40,0.15) !important;
    }
    .ind-card .ind-hover-title {
      color: var(--ink-900) !important;
    }
    .ind-card .ind-hover-desc {
      color: var(--ink-600) !important;
    }
    .ind-card .ind-hover-link {
      color: var(--brand) !important;
      border-bottom-color: rgba(21,93,252,0.35) !important;
    }
  }

  /* Missing HD scaling for card titles — Core Capabilities + What Delivers */
  @media (min-width: 1600px) {
    .cc-card-title {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .cd-depth-card h3 {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
      font-weight: 500 !important;
    }
  }
  /* Also ensure a good base for cd-depth-card h3 */
  .cd-depth-card h3:not([style*="font-size"]) {
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.3;
  }

  /* About QualNetics stats — 2x2 layout on mobile */
  @media (max-width: 767px) {
    #about-qualnetics .qn-stats-row {
      grid-template-columns: 1fr 1fr !important;
      row-gap: var(--space-3) !important;
      column-gap: 12px !important;
    }
    /* Hide vertical dividers in 2x2 layout */
    #about-qualnetics .qn-stat-divider {
      display: none !important;
    }
    /* Bump stat number for better mobile impact */
    #about-qualnetics .qn-stats-row > div > div:first-child {
      font-size: var(--ps-text-h3) !important;
    }
  }

  /* Contact Us — align to DS standards (H1, form input, office name) */
  /* H1 hero — DS scaling (was 44-88, should be 40-72 max) */
  .cu-head h1,
  .cu-hero h1 {
    font-size: var(--fs-display-1) !important;
  }
  @media (min-width: 1441px) {
    .cu-head h1,
    .cu-hero h1 {
      font-size: var(--fs-display-1) !important;
    }
  }
  /* Form input — bump to body sizes (18/22) for readability + DS alignment */
  .cu-field input,
  .cu-field textarea,
  .cu-field select,
  .cu-form input,
  .cu-form textarea,
  .cu-form select {
    font-size: var(--fs-title-m) !important;
    line-height: 1.5 !important;
  }
  @media (min-width: 1441px) {
    .cu-field input,
    .cu-field textarea,
    .cu-field select,
    .cu-form input,
    .cu-form textarea,
    .cu-form select {
      font-size: var(--ps-text-body) !important;
    }
  }
  @media (min-width: 1600px) {
    .cu-field input,
    .cu-field textarea,
    .cu-field select,
    .cu-form input,
    .cu-form textarea,
    .cu-form select {
      font-size: var(--ps-text-body) !important;
    }
  }
  /* Office name — align to card title (22/26) */
  .cu-office-name {
    font-size: var(--ps-text-h3) !important;
  }
  @media (min-width: 1441px) {
    .cu-office-name {
      font-size: var(--ps-text-h3) !important;
    }
  }

  /* Contact Us mobile — align to DS (fix legacy small mobile sizes) */
  @media (max-width: 767px) {
    /* Form input/textarea — 16px minimum prevents iOS zoom-on-focus */
    .cu-field input,
    .cu-field textarea,
    .cu-field select,
    .cu-form input,
    .cu-form textarea,
    .cu-form select {
      font-size: var(--fs-body) !important;
    }
    /* Form label — DS eyebrow 12px minimum */
    .cu-field label {
      font-size: var(--fs-eyebrow) !important;
    }
    /* Lede subtitle — DS body 16px on mobile (was going down to 14) */
    .lede {
      font-size: var(--fs-body) !important;
      line-height: 1.5 !important;
    }
    /* Office name on mobile — matches card title mobile */
    .cu-office-name {
      font-size: var(--ps-text-h3) !important;
    }
    /* Quickmeta phone/email — bump slightly for readability */
    .cu-qm {
      font-size: var(--fs-meta) !important;
    }
  }



/* ===== next source <style> block ===== */


/* Last-in-cascade override — beats all legacy !important rules at 1441+ */
@media (min-width: 1600px) {
  .hww-exp-desc,
  .hww-subhead,
  .cc-card-desc,
  .cc-card-sub,
  .cc-left-sub,
  .impact-intro p,
  .isa-deliver-row p,
  .isa-channel-cell p,
  .cvo-feature-card p,
  .cvo-deliver-card p,
  .cvo-why-item p,
  .sols-headline-sub,
  .sols-desc,
  .imp-card p,
  .impact-sub,
  .mb-desc,
  .mb-cat,
  .why-row p,
  .deel-card p,
  .trans-content p,
  .insight-card p,
  .clients-quote,
  .ind-card-sub,
  .ind-hover-desc,
  .poc-sub,
  .why-left-sub,
  .fcta-modal-sub,
  .sf-top-sub,
  .sf-cta-sub,
  .ag-lede,
  .ag-sub,
  .final-cta-sub,
  .cs-lede,
  .cs-card-desc,
  #risk-compliance .cvo-feature-card p,
  .cd-depth-card p,
  .sd-side .box .desc,
  .sd-layer .desc,
  .sa-deliver-point p,
  .solution p,
  .final-cta p,
  .section-header p,
  .sec-lede,
  .hero-lede,
  .hero-sub,
  .f1-subtitle {
    font-size: var(--ps-text-body) !important;
    line-height: 1.55 !important;
  }
}


/* ===== next source <style> block ===== */


/* ═══════════════════════════════════════════════════════════════════
   CASE-PRIMESQUARE — COMPREHENSIVE DS OVERRIDE
   Every rule uses section-ID prefix (spec 110+) so it always beats
   the legacy #section-id base rules regardless of media order.
   Applies at: base(1366), HD 1441+, HD 1600+, mobile ≤767.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────── BASE (1366) ─────────────────────── */

/* case-header */
section.case-header .case-title { font-size: var(--fs-display-1) !important; line-height: 1.08 !important; }
section.case-header .case-subtitle { font-size: var(--ps-text-body) !important; line-height: 1.55 !important; }
section.case-header .case-tag { font-size: var(--fs-eyebrow) !important; }
section.case-header .powered-by-label { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.14em !important; }
section.case-header .powered-by-brand { font-size: var(--fs-body) !important; }

/* Eyebrows unified at base (12px, DS eyebrow) */
.eyebrow, .f1-eyebrow, .hww-eyebrow,
section#video .eyebrow, section.video-block .eyebrow,
section#story .f1-eyebrow, section#how-it-works .hww-eyebrow {
  font-size: var(--fs-eyebrow) !important; letter-spacing: normal !important; text-transform: none !important;
}

/* Video section base — See It In Action */
section.video-block h2,
section#video h2 { font-size: var(--fs-display-2) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; }
section.video-block .em-blue-mid,
section#video .em-blue-mid { color: var(--brand) !important; font-weight: 500 !important; }

/* hero mockup */
section.case-fullbleed-hero .mockup-tagline,
.case-fullbleed-hero .mockup-tagline { font-size: var(--fs-display-1) !important; }
.case-fullbleed-hero .db-page-title { font-size: var(--ps-text-h3) !important; }
.case-fullbleed-hero .db-page-sub { font-size: var(--fs-eyebrow) !important; }
.case-fullbleed-hero .db-stat-value { font-size: var(--ps-text-h3) !important; }
.case-fullbleed-hero .db-stat-label { font-size: var(--fs-eyebrow) !important; }
.case-fullbleed-hero .db-stat-trend { font-size: var(--fs-eyebrow) !important; }
.case-fullbleed-hero .db-tab { font-size: var(--fs-eyebrow) !important; }
.case-fullbleed-hero .db-user-name { font-size: var(--fs-meta) !important; }
.case-fullbleed-hero .db-user-meta { font-size: var(--fs-eyebrow) !important; }
.case-fullbleed-hero .db-table-title { font-size: var(--fs-meta) !important; }
.case-fullbleed-hero .db-cell-id { font-size: var(--fs-eyebrow) !important; }
.case-fullbleed-hero .db-field-label { font-size: var(--fs-eyebrow) !important; }
.case-fullbleed-hero .db-status-pill { font-size: var(--fs-eyebrow) !important; }

/* #story */
#story .f1-headline,
section#story .f1-headline { font-size: var(--fs-display-2) !important; line-height: 1.12 !important; letter-spacing: -0.025em !important; }
#story .f1-subtitle,
section#story .f1-subtitle { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
#story .f1-eyebrow,
section#story .f1-eyebrow { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.18em !important; }
#story .f1-pain-chip,
section#story .f1-pain-chip { font-size: var(--fs-meta) !important; line-height: 1.4 !important; }
#story .f1-sol-card,
section#story .f1-sol-card { font-size: var(--fs-meta) !important; line-height: 1.4 !important; }
#story .f1-stage-tag-text,
section#story .f1-stage-tag-text { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.18em !important; }
#story .f1-transform-caption,
section#story .f1-transform-caption { font-size: var(--fs-title-m) !important; line-height: 1.5 !important; }
#story .f1-out-val,
section#story .f1-out-val { font-size: var(--ps-text-h1) !important; line-height: 1 !important; }
#story .f1-out-cap,
section#story .f1-out-cap { font-size: var(--fs-meta) !important; line-height: 1.4 !important; }

/* #capabilities / .solution-pc3 */
section.solution-pc3 .sec-h2 { font-size: var(--fs-display-2) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; }
section.solution-pc3 .sec-lede { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
section.solution-pc3 .pc3-cc-title { font-size: var(--fs-title-m) !important; font-weight: 500 !important; line-height: 1.3 !important; }
section.solution-pc3 .pc3-cc-desc { font-size: var(--fs-body) !important; line-height: 1.55 !important; }
section.solution-pc3 .pc3-cap-tile-title { font-size: var(--fs-title-m) !important; font-weight: 500 !important; line-height: 1.3 !important; }
section.solution-pc3 .pc3-cc-tag { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.14em !important; }

/* #video */
section#video .video-label,
section.video .video-label { font-size: var(--fs-body) !important; line-height: 1.5 !important; }

/* #how-it-works */
section#how-it-works .hww-heading,
#how-it-works .hww-heading { font-size: var(--ps-text-h1) !important; line-height: 1.1 !important; }
section#how-it-works .hww-subhead,
#how-it-works .hww-subhead { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
section#how-it-works .hww-col-num,
#how-it-works .hww-col-num { font-size: var(--ps-text-h3) !important; font-weight: 300 !important; line-height: 1 !important; }
section#how-it-works .hww-col-title,
#how-it-works .hww-col-title { font-size: var(--fs-title-m) !important; font-weight: 500 !important; line-height: 1.3 !important; }
section#how-it-works .hww-exp-num,
#how-it-works .hww-exp-num { font-size: var(--ps-text-h3) !important; }
section#how-it-works .hww-exp-title,
#how-it-works .hww-exp-title { font-size: var(--ps-text-h3) !important; }
section#how-it-works .hww-exp-desc,
#how-it-works .hww-exp-desc { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
section#how-it-works .num,
section#how-it-works .label .num,
section#how-it-works .deel-labels .num,
#how-it-works .num,
#how-it-works .label .num { font-size: var(--fs-meta) !important; letter-spacing: 0.14em !important; }
section#how-it-works .ttl,
section#how-it-works .label .ttl,
section#how-it-works .deel-labels .ttl,
#how-it-works .ttl,
#how-it-works .label .ttl { font-size: var(--fs-title-m) !important; line-height: 1.3 !important; font-weight: 500 !important; }

/* .impact */
section.impact .impact-intro { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
section.impact .impact-num { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; }
section.impact .impact-label { font-size: var(--fs-eyebrow) !important; font-weight: 500 !important; letter-spacing: 0.14em !important; line-height: 1.3 !important; white-space: nowrap !important; }
section.impact .impact-sub { font-size: var(--fs-body) !important; line-height: 1.5 !important; }

/* .related */
section.related .related-intro { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
section.related .related-card .tag { font-size: var(--fs-eyebrow) !important; letter-spacing: normal !important; text-transform: none !important; }
section.related .related-card .read { font-size: var(--fs-meta) !important; font-weight: 500 !important; }


/* ─────────────────────── HD 1441+ ─────────────────────── */
@media (min-width: 1441px) {
  /* Story chips fill the container (no more viewport breakout) */
  #story .f1-pains,
  section#story .f1-pains {
    max-width: 100% !important; width: 100% !important;
    margin: 0 auto !important;
    gap: var(--space-2) !important; flex-wrap: wrap !important; justify-content: center !important;
    padding: 0 !important;
  }
  #story .f1-solutions,
  section#story .f1-solutions {
    max-width: 100% !important; width: 100% !important;
    margin: 0 auto !important;
    gap: var(--space-2) !important; flex-wrap: wrap !important; justify-content: center !important;
    padding: 0 !important;
  }

  /* Case header */
  section.case-header .case-title { font-size: var(--fs-display-1) !important; line-height: 1.1 !important; }
  section.case-header .case-subtitle { font-size: var(--ps-text-body) !important; }
  section.case-header .case-tag { font-size: var(--fs-meta) !important; }
  section.case-header .powered-by-label { font-size: var(--fs-meta) !important; }
  section.case-header .powered-by-brand { font-size: var(--fs-body) !important; }

  /* Hero */
  section.case-fullbleed-hero .mockup-tagline,
  .case-fullbleed-hero .mockup-tagline { font-size: var(--ps-text-h1) !important; }
  .case-fullbleed-hero .db-page-title { font-size: var(--ps-text-h3) !important; }
  .case-fullbleed-hero .db-page-sub { font-size: var(--fs-meta) !important; }
  .case-fullbleed-hero .db-stat-value { font-size: var(--fs-title-l) !important; }
  .case-fullbleed-hero .db-stat-label { font-size: var(--fs-eyebrow) !important; }

  /* Story */
  #story .f1-headline,
  section#story .f1-headline { font-size: var(--fs-display-2) !important; line-height: 1.1 !important; }
  #story .f1-subtitle,
  section#story .f1-subtitle { font-size: var(--ps-text-body) !important; }
  #story .f1-pain-chip,
  section#story .f1-pain-chip { padding: 11px 22px !important; font-size: var(--fs-body) !important; }
  #story .f1-sol-card,
  section#story .f1-sol-card { padding: 20px 26px !important; font-size: var(--fs-body) !important; }
  #story .f1-out-val,
  section#story .f1-out-val { font-size: var(--fs-stat) !important; line-height: 1 !important; }
  #story .f1-out-cap,
  section#story .f1-out-cap { font-size: var(--fs-body) !important; }
  #story .f1-transform-caption,
  section#story .f1-transform-caption { font-size: var(--ps-text-body) !important; }
  /* Stage tags "TODAY · THE PAIN" / "THE SHIFT" */
  section#story .f1-stage-tag-text,
  #story .f1-stage-tag-text { font-size: var(--fs-meta) !important; letter-spacing: 0.18em !important; }

  /* Solution / capabilities */
  section.solution-pc3 .sec-h2 { font-size: var(--fs-display-2) !important; max-width: 1000px !important; }
  section.solution-pc3 .sec-lede { font-size: var(--ps-text-body) !important; max-width: 800px !important; }
  section.solution-pc3 .pc3-cc-title { font-size: var(--ps-text-h3) !important; }
  section.solution-pc3 .pc3-cc-desc { font-size: var(--fs-body) !important; }
  section.solution-pc3 .pc3-cap-tile-title { font-size: var(--ps-text-h3) !important; }
  section.solution-pc3 .pc3-cc-tag { font-size: var(--fs-eyebrow) !important; }
  /* Callouts at 1441-1599 — mockup 920 leaves 260-320px each side; fit callouts inside */
  section.solution-pc3 .pc3-callout { width: 200px !important; padding: 14px var(--space-2) !important; }
  section.solution-pc3 .pc3-cc-1 { top: 75px !important; left: -210px !important; }
  section.solution-pc3 .pc3-cc-2 { top: 75px !important; right: -210px !important; }
  section.solution-pc3 .pc3-cc-3 { top: 380px !important; left: -210px !important; }
  section.solution-pc3 .pc3-cc-4 { top: 380px !important; right: -210px !important; }

  /* Video */
  section#video .video-label,
  section.video .video-label { font-size: var(--fs-body) !important; }

  /* How it works */
  section#how-it-works .hww-heading,
  #how-it-works .hww-heading { font-size: var(--fs-display-2) !important; }
  section#how-it-works .hww-subhead,
  #how-it-works .hww-subhead { font-size: var(--ps-text-body) !important; }
  section#how-it-works .hww-col-num,
  #how-it-works .hww-col-num { font-size: var(--ps-text-h3) !important; }
  section#how-it-works .hww-col-title,
  #how-it-works .hww-col-title { font-size: var(--ps-text-h3) !important; }
  section#how-it-works .hww-exp-num,
  #how-it-works .hww-exp-num { font-size: var(--ps-text-h3) !important; }
  section#how-it-works .hww-exp-title,
  #how-it-works .hww-exp-title { font-size: var(--fs-title-l) !important; line-height: 1.3 !important; }
  section#how-it-works .hww-exp-desc,
  #how-it-works .hww-exp-desc { font-size: var(--ps-text-body) !important; }
  /* Timeline labels — the "01, 02..." + "Onboard & Evaluate..." row at top */
  section#how-it-works .label .num,
  section#how-it-works .deel-labels .num,
  #how-it-works .label .num { font-size: var(--fs-body) !important; letter-spacing: 0.14em !important; }
  section#how-it-works .label .ttl,
  section#how-it-works .deel-labels .ttl,
  #how-it-works .label .ttl { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; font-weight: 500 !important; }
  /* Eyebrows unified at 1441+ (13px) */
  .eyebrow, .f1-eyebrow, .hww-eyebrow,
  section#video .eyebrow,
  section.video-block .eyebrow,
  section#story .f1-eyebrow,
  section#how-it-works .hww-eyebrow { font-size: var(--fs-eyebrow) !important; letter-spacing: normal !important; }
  /* Video section — See It In Action */
  section.video-block h2,
  section#video h2 { font-size: var(--fs-display-2) !important; line-height: 1.15 !important; }
  section.video-block .video-label,
  section#video .video-label { font-size: var(--fs-body) !important; }

  /* Impact */
  section.impact .impact-intro { font-size: var(--ps-text-body) !important; }
  section.impact .impact-num { font-size: var(--fs-title-l) !important; line-height: 1.3 !important; }
  section.impact .impact-label { font-size: var(--fs-meta) !important; letter-spacing: 0.14em !important; white-space: nowrap !important; }
  section.impact .impact-sub { font-size: var(--fs-title-m) !important; }

  /* Related */
  section.related .related-intro { font-size: var(--ps-text-body) !important; }
  section.related .related-card .tag { font-size: var(--fs-eyebrow) !important; }
  section.related .related-card .read { font-size: var(--fs-body) !important; }
}


/* ─────────────────────── HD 1600+ / 1920 ─────────────────────── */
@media (min-width: 1600px) {
  /* Story chips fill container at 1600+ */
  #story .f1-pains,
  section#story .f1-pains {
    max-width: 100% !important; width: 100% !important;
    margin: 0 auto !important;
    gap: 20px !important; padding: 0 !important;
  }
  #story .f1-solutions,
  section#story .f1-solutions {
    max-width: 100% !important; width: 100% !important;
    margin: 0 auto !important;
    gap: 20px !important; padding: 0 !important;
  }

  /* Case header */
  section.case-header .case-title { font-size: var(--fs-display-1) !important; }
  section.case-header .case-subtitle { font-size: var(--ps-text-body) !important; }

  /* Hero */
  section.case-fullbleed-hero .mockup-tagline,
  .case-fullbleed-hero .mockup-tagline { font-size: var(--ps-text-h1) !important; }

  /* Story */
  #story .f1-headline,
  section#story .f1-headline { font-size: var(--fs-display-2) !important; }
  #story .f1-subtitle,
  section#story .f1-subtitle { font-size: var(--ps-text-body) !important; }
  #story .f1-pain-chip,
  section#story .f1-pain-chip { padding: 12px var(--space-3) !important; font-size: var(--fs-title-m) !important; }
  #story .f1-sol-card,
  section#story .f1-sol-card { padding: 22px 28px !important; font-size: var(--fs-title-m) !important; }
  #story .f1-pain-chip svg { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
  #story .f1-sol-card .f1-sol-icon { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
  #story .f1-out-val,
  section#story .f1-out-val { font-size: var(--ps-text-h1) !important; line-height: 1 !important; }
  #story .f1-transform-caption,
  section#story .f1-transform-caption { font-size: var(--fs-title-l) !important; }
  /* Stage tags at 1600+ */
  section#story .f1-stage-tag-text,
  #story .f1-stage-tag-text { font-size: var(--fs-meta) !important; letter-spacing: 0.18em !important; }

  /* Solution / capabilities */
  section.solution-pc3 .sec-h2 { font-size: var(--fs-display-2) !important; max-width: 1200px !important; }
  section.solution-pc3 .sec-lede { font-size: var(--ps-text-body) !important; max-width: 900px !important; }
  section.solution-pc3 .pc3-cc-title { font-size: var(--ps-text-h3) !important; }
  section.solution-pc3 .pc3-cc-desc { font-size: var(--fs-title-m) !important; }
  section.solution-pc3 .pc3-cap-tile-title { font-size: var(--ps-text-h3) !important; }
  /* Callouts at 1600+ — same tight-to-mockup layout as 1366 */
  section.solution-pc3 .pc3-callout { width: 220px !important; padding: var(--space-2) 18px !important; }
  section.solution-pc3 .pc3-cc-1 { top: 75px !important; left: -200px !important; }
  section.solution-pc3 .pc3-cc-2 { top: 75px !important; right: -200px !important; }
  section.solution-pc3 .pc3-cc-3 { top: 380px !important; left: -200px !important; }
  section.solution-pc3 .pc3-cc-4 { top: 380px !important; right: -200px !important; }

  /* Video — See It In Action */
  section#video h2,
  section.video-block h2 { font-size: var(--fs-display-2) !important; line-height: 1.15 !important; }
  section#video .video-label,
  section.video-block .video-label { font-size: var(--fs-title-m) !important; }

  /* How it works — full DS card-title ladder */
  section#how-it-works .hww-heading,
  #how-it-works .hww-heading { font-size: var(--fs-display-2) !important; }
  section#how-it-works .hww-subhead,
  #how-it-works .hww-subhead { font-size: var(--ps-text-body) !important; }
  section#how-it-works .hww-col-num,
  #how-it-works .hww-col-num { font-size: var(--ps-text-h3) !important; }
  section#how-it-works .hww-col-title,
  #how-it-works .hww-col-title { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
  section#how-it-works .hww-exp-num,
  #how-it-works .hww-exp-num { font-size: var(--ps-text-h3) !important; }
  section#how-it-works .hww-exp-title,
  #how-it-works .hww-exp-title { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
  section#how-it-works .hww-exp-desc,
  #how-it-works .hww-exp-desc { font-size: var(--ps-text-body) !important; }
  /* Timeline labels at 1600+ */
  section#how-it-works .label .num,
  section#how-it-works .deel-labels .num,
  #how-it-works .label .num { font-size: var(--fs-title-m) !important; letter-spacing: 0.14em !important; }
  section#how-it-works .label .ttl,
  section#how-it-works .deel-labels .ttl,
  #how-it-works .label .ttl { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; font-weight: 500 !important; }

  /* Impact */
  section.impact .impact-intro { font-size: var(--ps-text-body) !important; }
  section.impact .impact-num { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
  section.impact .impact-label { font-size: var(--fs-meta) !important; letter-spacing: 0.14em !important; white-space: nowrap !important; }
  section.impact .impact-sub { font-size: var(--ps-text-body) !important; }

  /* Related */
  section.related .related-intro { font-size: var(--ps-text-body) !important; }

  /* Eyebrows UNIFIED at 1600+ — 14px across every section */
  .eyebrow, .f1-eyebrow, .hww-eyebrow, .ag-eyebrow,
  section#video .eyebrow, section.video-block .eyebrow,
  section#story .f1-eyebrow,
  section#how-it-works .hww-eyebrow,
  section.impact .eyebrow,
  section.related .eyebrow,
  section.solution-pc3 .eyebrow { font-size: var(--fs-eyebrow) !important; letter-spacing: normal !important; text-transform: none !important; }
}


/* ─────────────────────── MOBILE ≤767 ─────────────────────── */
@media (max-width: 767px) {
  section.case-header .case-title { font-size: var(--fs-display-1) !important; line-height: 1.15 !important; }
  section.case-header .case-subtitle { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
  section.case-header .case-tag { font-size: var(--fs-eyebrow) !important; }
  section.case-header .powered-by-label { font-size: var(--fs-eyebrow) !important; }
  section.case-header .powered-by-brand { font-size: var(--fs-meta) !important; }

  /* ─── MOBILE DASHBOARD PREVIEW + ZOOM (Option A revised) ───
     Show dashboards as image-like scaled previews; tap to open full-scale modal. */
  /* Hero dashboard preview */
  section.case-fullbleed-hero .hero-mockup,
  .case-fullbleed-hero .hero-mockup {
    display: block !important;
    max-width: 100% !important;
    margin: var(--space-3) auto 0 !important;
    position: relative !important;
    cursor: zoom-in !important;
  }
  section.case-fullbleed-hero .hero-mockup .db-app,
  .hero-mockup .db-app {
    transform: scale(0.42) !important;
    transform-origin: top left !important;
    width: 240% !important;
    pointer-events: none !important;
  }
  section.case-fullbleed-hero .hero-mockup {
    overflow: hidden !important;
    border-radius: var(--radius) !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
  }
  /* Zoom badge overlay on hero */
  section.case-fullbleed-hero .hero-mockup::after,
  .case-fullbleed-hero .hero-mockup::after {
    content: "" !important;
    position: absolute !important;
    bottom: 10px !important; right: 10px !important;
    top: auto !important;
    width: 32px !important; height: 32px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.9) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236A7282%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2211%22 cy=%2211%22 r=%227%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.5%22 y2=%2216.5%22/><line x1=%228%22 y1=%2211%22 x2=%2214%22 y2=%2211%22/><line x1=%2211%22 y1=%228%22 x2=%2211%22 y2=%2214%22/></svg>') center / 16px 16px no-repeat !important;
    border-radius: 50% !important;
    border: 1px solid rgba(16, 24, 40, 0.08) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 6px rgba(16,24,40,0.08) !important;
  }

  /* Solution dashboard preview */
  section.solution-pc3 .pc3-mockup-wrap .db-app,
  .pc3-mockup-wrap .db-app {
    transform: scale(0.42) !important;
    transform-origin: top left !important;
    width: 240% !important;
    pointer-events: none !important;
  }
  section.solution-pc3 .pc3-mockup-wrap,
  .pc3-mockup-wrap {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
    aspect-ratio: 16/10 !important;
    height: auto !important;
    cursor: zoom-in !important;
    position: relative !important;
  }
  section.solution-pc3 .pc3-mockup-wrap::after,
  .pc3-mockup-wrap::after {
    content: "" !important;
    position: absolute !important;
    bottom: 10px !important; right: 10px !important;
    top: auto !important;
    width: 32px !important; height: 32px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.9) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236A7282%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2211%22 cy=%2211%22 r=%227%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.5%22 y2=%2216.5%22/><line x1=%228%22 y1=%2211%22 x2=%2214%22 y2=%2211%22/><line x1=%2211%22 y1=%228%22 x2=%2211%22 y2=%2214%22/></svg>') center / 16px 16px no-repeat !important;
    border-radius: 50% !important;
    border: 1px solid rgba(16, 24, 40, 0.08) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 6px rgba(16,24,40,0.08) !important;
  }
  section.solution-pc3 .pc3-stage,
  .pc3-stage { padding: var(--space-3) 0 !important; }
  /* Keep callouts as stacked feature cards BELOW the preview */
  section.solution-pc3 .pc3-callout,
  .pc3-callout {
    display: flex !important; position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important;
    margin: var(--space-2) 0 0 !important;
    padding: 20px 18px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ink-soft) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 4px 16px rgba(16,24,40,0.04) !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-1) !important;
    transform: none !important;
  }
  section.solution-pc3 .pc3-cc-head,
  .pc3-cc-head { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important; }
  section.solution-pc3 .pc3-cc-icon,
  .pc3-cc-icon { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; }
  section.solution-pc3 .pc3-cc-icon img,
  .pc3-cc-icon img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  section.solution-pc3 .pc3-cc-tag,
  .pc3-cc-tag { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.14em !important; }
  section.solution-pc3 .pc3-cc-title,
  .pc3-cc-title { font-size: var(--fs-title-m) !important; font-weight: 500 !important; margin: 4px 0 6px !important; }
  section.solution-pc3 .pc3-cc-desc,
  .pc3-cc-desc { font-size: var(--fs-body) !important; line-height: 1.5 !important; color: var(--ink-mid) !important; margin: 0 !important; }
  section.solution-pc3 .pc3-caps-strip,
  .pc3-caps-strip { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: var(--space-3) !important; }

  /* Mobile eyebrows unified at 12px */
  .eyebrow, .f1-eyebrow, .hww-eyebrow,
  section#video .eyebrow, section.video-block .eyebrow,
  section#story .f1-eyebrow, section#how-it-works .hww-eyebrow {
    font-size: var(--fs-eyebrow) !important;
  }
  /* Video h2 mobile */
  section.video-block h2,
  section#video h2 { font-size: var(--ps-text-h1) !important; line-height: 1.15 !important; }
  section.video-block .video-label,
  section#video .video-label { font-size: var(--fs-body) !important; }

  section.case-fullbleed-hero .mockup-tagline,
  .case-fullbleed-hero .mockup-tagline { font-size: var(--ps-text-h1) !important; line-height: 1.15 !important; }
  .case-fullbleed-hero .db-page-title { font-size: var(--ps-text-h3) !important; }
  .case-fullbleed-hero .db-page-sub { font-size: var(--fs-meta) !important; }
  .case-fullbleed-hero .db-stat-value { font-size: var(--ps-text-h3) !important; }
  .case-fullbleed-hero .db-stat-label { font-size: var(--fs-eyebrow) !important; }

  #story .f1-headline,
  section#story .f1-headline { font-size: var(--ps-text-h1) !important; line-height: 1.15 !important; }
  #story .f1-subtitle,
  section#story .f1-subtitle { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
  #story .f1-pain-chip,
  section#story .f1-pain-chip { font-size: var(--fs-meta) !important; }
  #story .f1-sol-card,
  section#story .f1-sol-card { font-size: var(--fs-meta) !important; }
  #story .f1-out-val,
  section#story .f1-out-val { font-size: var(--ps-text-h1) !important; }
  #story .f1-out-cap,
  section#story .f1-out-cap { font-size: var(--fs-meta) !important; }
  #story .f1-transform-caption,
  section#story .f1-transform-caption { font-size: var(--fs-title-m) !important; }

  section.solution-pc3 .sec-h2 { font-size: var(--ps-text-h1) !important; line-height: 1.15 !important; }
  section.solution-pc3 .sec-lede { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
  section.solution-pc3 .pc3-cc-title { font-size: var(--fs-title-m) !important; }
  section.solution-pc3 .pc3-cc-desc { font-size: var(--fs-body) !important; }
  section.solution-pc3 .pc3-cap-tile-title { font-size: var(--fs-title-m) !important; }
  section.solution-pc3 .pc3-cc-tag { font-size: var(--fs-eyebrow) !important; }

  section#video .video-label,
  section.video .video-label { font-size: var(--fs-body) !important; }

  section#how-it-works .hww-heading,
  #how-it-works .hww-heading { font-size: var(--ps-text-h1) !important; line-height: 1.15 !important; }
  section#how-it-works .hww-subhead,
  #how-it-works .hww-subhead { font-size: var(--fs-title-m) !important; }
  section#how-it-works .hww-col-num,
  #how-it-works .hww-col-num { font-size: var(--ps-text-h3) !important; }
  section#how-it-works .hww-col-title,
  #how-it-works .hww-col-title { font-size: var(--fs-title-m) !important; }
  section#how-it-works .hww-exp-num,
  #how-it-works .hww-exp-num { font-size: var(--ps-text-h3) !important; }
  section#how-it-works .hww-exp-title,
  #how-it-works .hww-exp-title { font-size: var(--fs-title-m) !important; }
  section#how-it-works .hww-exp-desc,
  #how-it-works .hww-exp-desc { font-size: var(--fs-title-m) !important; }

  /* ─── STORY: THE PROBLEM · THE TRANSFORMATION — MOBILE ─── */
  /* Section outer padding */
  #story,
  section#story { padding: 40px 0 !important; }

  /* Head block — eyebrow, headline, subtitle */
  #story .f1-head,
  section#story .f1-head { margin: 0 auto 40px !important; padding: 0 4px !important; }
  #story .f1-eyebrow,
  section#story .f1-eyebrow { margin-bottom: 14px !important; }
  #story .f1-headline,
  section#story .f1-headline { max-width: 100% !important; margin: 0 auto var(--space-2) !important; }
  #story .f1-subtitle,
  section#story .f1-subtitle { max-width: 100% !important; padding: 0 var(--space-1) !important; margin: 0 auto !important; }

  /* Stage wrappers (there are 2 — one for Pain, one for Shift) */
  #story .f1-stage,
  section#story .f1-stage { padding: 0 !important; margin: 0 !important; }
  /* Stage tag (TODAY · THE PAIN / THE SHIFT) */
  #story .f1-stage-tag,
  section#story .f1-stage-tag { margin: 0 auto 20px !important; }

  /* Pain chip row — wrap into 2-column grid on mobile */
  #story .f1-pains,
  section#story .f1-pains {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-wrap: unset !important;
    gap: 10px !important;
    max-width: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    justify-content: unset !important;
  }
  #story .f1-pain-chip,
  section#story .f1-pain-chip {
    padding: 10px 14px !important;
    font-size: var(--fs-meta) !important;
    line-height: 1.35 !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
  }
  #story .f1-pain-chip svg,
  section#story .f1-pain-chip svg { flex-shrink: 0 !important; }
  /* Center-align odd chip (5th) that spans single column */
  #story .f1-pains > .f1-pain-chip:nth-child(5),
  section#story .f1-pains > .f1-pain-chip:nth-child(5) {
    grid-column: 1 / -1 !important;
    max-width: 65% !important;
    margin: 0 auto !important;
  }

  /* Transform strip — the empty divider between Pain and Shift rows.
     Kept minimal so the two rows don't feel disconnected. */
  #story .f1-transform,
  section#story .f1-transform { padding: 20px var(--space-1) !important; margin: 0 !important; min-height: 0 !important; }
  #story .f1-transform-caption,
  section#story .f1-transform-caption { padding: 0 4px !important; margin: var(--space-3) auto 0 !important; text-align: center !important; }

  /* Solution card row — 2-column grid on mobile */
  #story .f1-solutions,
  section#story .f1-solutions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-wrap: unset !important;
    gap: 10px !important;
    max-width: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    justify-content: unset !important;
  }
  #story .f1-sol-card,
  section#story .f1-sol-card {
    padding: 14px 12px !important;
    font-size: var(--fs-meta) !important;
    line-height: 1.35 !important;
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: var(--space-1) !important;
    min-width: 0 !important;
  }
  #story .f1-sol-icon,
  section#story .f1-sol-icon {
    width: 32px !important; height: 32px !important;
    flex-shrink: 0 !important;
  }
  #story .f1-solutions > .f1-sol-card:nth-child(5),
  section#story .f1-solutions > .f1-sol-card:nth-child(5) {
    grid-column: 1 / -1 !important;
    max-width: 65% !important;
    margin: 0 auto !important;
    flex-direction: row !important;
    text-align: left !important;
  }

  /* Outcomes grid — 2×2 */
  #story .f1-outcomes,
  section#story .f1-outcomes {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 14px !important;
    padding: 28px 20px !important;
    margin: 40px 0 0 !important;
  }
  #story .f1-out,
  section#story .f1-out {
    padding: var(--space-1) 4px !important;
    border-right: none !important;
  }
  #story .f1-out-val,
  section#story .f1-out-val { margin-bottom: 6px !important; }

  section.impact .impact-intro { font-size: var(--fs-title-m) !important; }
  section.impact .impact-num { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
  section.impact .impact-label { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.14em !important; }
  section.impact .impact-sub { font-size: var(--fs-body) !important; }

  section.related .related-intro { font-size: var(--fs-title-m) !important; }
  section.related .related-card .tag { font-size: var(--fs-eyebrow) !important; }
  section.related .related-card .read { font-size: var(--fs-meta) !important; }
}


/* ─── 1281-1440 range (covers 1366) — narrow window, tight-fit callouts ─── */
@media (min-width: 1281px) and (max-width: 1440px) {
  section.solution-pc3 .pc3-mockup-wrap,
  .pc3-mockup-wrap { max-width: 880px !important; }
  /* Callout container — auto-sized height so wrapped text isn't clipped */
  section.solution-pc3 .pc3-callout {
    width: 210px !important;
    height: auto !important;
    padding: 14px var(--space-2) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  section.solution-pc3 .pc3-cc-1 { top: 75px !important; left: -200px !important; }
  section.solution-pc3 .pc3-cc-2 { top: 75px !important; right: -200px !important; }
  section.solution-pc3 .pc3-cc-3 { top: 380px !important; left: -200px !important; }
  section.solution-pc3 .pc3-cc-4 { top: 380px !important; right: -200px !important; }
  /* Title — allow wrap onto multiple lines so long words don't spill outside */
  section.solution-pc3 .pc3-cc-title,
  section.solution-pc3 h4.pc3-cc-title {
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
    margin: 4px 0 6px !important;
  }
  section.solution-pc3 .pc3-cc-desc,
  section.solution-pc3 p.pc3-cc-desc {
    font-size: var(--fs-eyebrow) !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word !important;
  }
  section.solution-pc3 .pc3-cc-tag { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.14em !important; }
  section.solution-pc3 .pc3-cc-head { flex-wrap: wrap !important; }
}

/* Callout global safety — text wraps but stays fully visible */
section.solution-pc3 .pc3-callout,
.pc3-callout {
  box-sizing: border-box !important;
  overflow: visible !important;
}
section.solution-pc3 .pc3-cc-title,
section.solution-pc3 .pc3-cc-desc,
section.solution-pc3 .pc3-cc-head,
.pc3-cc-title, .pc3-cc-desc, .pc3-cc-head {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  hyphens: auto !important;
  min-width: 0 !important;
}

/* ─── HD 1441+ / 1600+ SPACING & ALIGNMENT POLISH ─────────────────────
   Standardizes: section padding, section-header margin, grid gaps,
   text max-widths, and centering across every section. */

/* Section vertical padding — consistent across all major sections */
@media (min-width: 1441px) {
  section.case-header { padding: var(--space-7) 0 56px !important; }
  section.case-fullbleed-hero { padding: var(--space-3) 0 var(--space-7) !important; }
  section#story, section.reveal[id="story"] { padding: var(--space-7) 0 !important; }
  section.solution-pc3 { padding: var(--space-7) 0 !important; }
  section#video, section.video-block { padding: var(--space-6) 0 !important; }
  section#how-it-works, section.hww-section { padding: var(--space-7) 0 !important; }
  section.impact { padding: var(--space-7) 0 !important; }
  section.related { padding: var(--space-7) 0 !important; }

  /* Section header blocks — uniform bottom margin */
  section.solution-pc3 .sec-head,
  section#how-it-works .hww-header,
  section.impact .impact-intro,
  section.related .related-intro,
  section#video .video-head,
  #story .f1-head,
  section#story .f1-head {
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto 56px !important;
    padding: 0 var(--space-3) !important;
  }

  /* Grid gap normalization */
  section.impact .impact-grid { gap: var(--space-3) !important; }
  section.related .related-grid { gap: var(--space-3) !important; }
  section.solution-pc3 .pc3-caps-strip { gap: var(--space-2) !important; margin-top: var(--space-5) !important; }

  /* Section-lede max-widths — consistent readability */
  section.solution-pc3 .sec-lede,
  section#story .f1-subtitle,
  section#how-it-works .hww-subhead,
  section.impact .impact-intro p,
  section.related .related-intro p { max-width: 720px !important; margin: 0 auto !important; }
}

@media (min-width: 1600px) {
  section.case-header { padding: 88px 0 60px !important; }
  section.case-fullbleed-hero { padding: 28px 0 88px !important; }
  section#story, section.reveal[id="story"] { padding: 88px 0 !important; }
  section.solution-pc3 { padding: 88px 0 !important; }
  section#video, section.video-block { padding: 72px 0 !important; }
  section#how-it-works, section.hww-section { padding: 88px 0 !important; }
  section.impact { padding: 88px 0 !important; }
  section.related { padding: 88px 0 !important; }

  section.solution-pc3 .sec-head,
  section#how-it-works .hww-header,
  section.impact .impact-intro,
  section.related .related-intro,
  #story .f1-head,
  section#story .f1-head {
    max-width: 1000px !important;
    margin-bottom: var(--space-6) !important;
  }

  section.solution-pc3 .sec-lede,
  section#story .f1-subtitle,
  section#how-it-works .hww-subhead,
  section.impact .impact-intro p,
  section.related .related-intro p { max-width: 800px !important; }
}

/* ─── Mobile impact card — icon centered above text (icons were stuck left) ─── */
@media (max-width: 767px) {
  section.impact .impact-cell,
  .impact-cell {
    text-align: center !important;
    padding: 28px 20px !important;
  }
  section.impact .impact-icon,
  .impact-icon {
    justify-content: center !important;
    margin: 0 auto var(--space-2) !important;
    display: flex !important;
  }
  section.impact .impact-num { margin: 0 auto var(--space-1) !important; }
  section.impact .impact-label { margin: 0 auto 12px !important; display: block !important; }
  section.impact .impact-sub { margin: 0 auto !important; max-width: 320px !important; }
  section.impact .impact-grid { gap: var(--space-2) !important; }
}


/* ===== next source <style> block ===== */


  .dash-zoom-modal {
    position: fixed; inset: 0;
    background: rgba(10, 14, 26, 0.96);
    z-index: 9999;
    display: none;
    flex-direction: column;
  }
  .dash-zoom-modal[aria-hidden="false"] { display: flex; }
  .dash-zoom-close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #FFFFFF; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
  }
  .dash-zoom-scroll {
    flex: 1; overflow: auto;
    padding: 60px 20px 40px;
    display: flex; align-items: center; justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .dash-zoom-content {
    min-width: 920px;
    background: transparent;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .dash-zoom-content .db-app { transform: none !important; width: 920px !important; pointer-events: auto !important; }
  .dash-zoom-hint {
    background: rgba(255,255,255,0.1); color: #FFFFFF;
    text-align: center; padding: 12px;
    font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase;
  }
  body.dash-zoom-open { overflow: hidden; }

/* LARGE-SCREEN-ONLY refinements (≥1280px — covers real desktop/laptop widths
   like 1366/1440, not just the site's 1441 "HD" tier; mobile/tablet ≤1279px
   untouched) — unify the "4-card" sections (impact stats + solution
   callouts) to the same wider, bolder treatment across every case study, and
   give the video frame more breathing room.
   v2: the v1 pass used `html body .selector` but several of these properties
   were already pinned by a pre-existing unconditional rule scoped to the
   parent section (e.g. `section.impact .impact-label`, `section.solution-pc3
   .pc3-cc-title`) which has HIGHER specificity (element+2 classes vs our
   2 elements+1 class) — so v1 silently lost on title weight/size and callout
   width despite `!important` on both sides. Re-scoped every rule here under
   the same parent-section prefix so ours always wins outright. Also fixes a
   genuine overlap bug: the bottom callout pair started before the top pair's
   (longer) card content finished rendering — pushed the gap out from 300px
   to 420px. */
@media (min-width: 1280px) {
  /* Impact/proven-results stat cards — wider grid, bigger bolder cell label */
  html body section.impact .impact-grid { max-width: 1280px !important; }
  html body section.impact .impact-cell { padding: 36px 32px !important; }
  html body section.impact .impact-label { font-size: var(--ps-text-body) !important; font-weight: 500 !important; }

  /* Solution callouts flanking the dashboard mockup — was misaligned (left
     pair sat 100px higher than the right pair); now symmetric, wider, and
     with enough vertical clearance that the bottom pair never overlaps the
     top pair's card content. */
  html body section.solution-pc3 .pc3-callout { width: 240px !important; }
  html body section.solution-pc3 .pc3-cc-title { font-size: var(--ps-text-h3) !important; font-weight: 500 !important; }
  html body section.solution-pc3 .pc3-cc-1 { top: 40px !important; left: -220px !important; }
  html body section.solution-pc3 .pc3-cc-2 { top: 40px !important; right: -220px !important; }
  html body section.solution-pc3 .pc3-cc-3 { top: 520px !important; left: -220px !important; }
  html body section.solution-pc3 .pc3-cc-4 { top: 520px !important; right: -220px !important; }

  /* Video walkthrough frame */
  html body section.video-block .video-frame { max-width: 1100px !important; }
}

/* Hero tagline — the copy is authored as two explicit lines (a <br> between them).
   The default max-width:760px + text-wrap:balance made each half wrap again (4
   visual lines). Widen the block and turn off balancing so each authored half fits
   on one line, reading as exactly two lines at base desktop and HD. */
@media (min-width: 1025px) {
  html body section.case-fullbleed-hero .mockup-tagline,
  html body .case-fullbleed-hero .mockup-tagline {
    max-width: 1200px !important;
    text-wrap: nowrap !important;
  }
}