/* ═══════════════════════════════════════════════════════════════════════
   Microsoft-style layer (Nov 2026). Fluent conventions: Segoe UI, white
   canvas, one blue accent, 4px corners, hairline borders, cards that lift
   on hover, blue "Learn more ›" links. Reuses the same class names as the
   editorial layer below it, so no markup changed.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ms-blue:#0067b8;
  --ms-blue-dark:#005494;
  --ms-blue-soft:#eaf3fb;
  --ms-ink:#1b1b1b;
  --ms-ink-2:#404040;
  --ms-muted:#616161;
  --ms-line:#e3e3e3;
  --ms-line-2:#d2d2d2;
  --ms-bg-alt:#f2f2f2;
  --ms-shadow:0 2px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --ms-shadow-hover:0 6px 18px rgba(0,0,0,.10),0 2px 4px rgba(0,0,0,.06);
  --ms-r:4px;

  /* remap the editorial tokens so every existing rule inherits Fluent */
  --ink:var(--ms-ink);
  --ink-2:var(--ms-ink-2);
  --ink-3:var(--ms-muted);
  --paper:#fff;
  --paper-2:var(--ms-bg-alt);
  --line:var(--ms-line);
  --line-2:var(--ms-line-2);
  --green:var(--ms-blue);
  --green-2:var(--ms-blue-dark);
  --green-soft:var(--ms-blue-soft);
  --gold:#8a6d00;
  --r:var(--ms-r);
  --r-lg:8px;
  --sans:'Segoe UI','Segoe UI Variable Text',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:var(--sans);
  --mono:'Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;
}

html{background:#fff}
body.dc{background:#fff;color:var(--ms-ink)}

/* ── nav: 48px white bar, flat links, underline on hover ───────────────── */
.dc .nav{background:#fff;border-bottom:1px solid var(--ms-line);backdrop-filter:none}
.dc .nav-in{height:56px}
.dc .brand b{letter-spacing:.06em;font-weight:600;font-size:17px}
.dc .nav-links{gap:26px}
.dc .nav-links a{font-size:13.5px;font-weight:400;color:var(--ms-ink);padding:6px 0;border-bottom:2px solid transparent;border-radius:0}
.dc .nav-links a:hover{color:var(--ms-blue);border-bottom-color:var(--ms-blue);background:none}

/* ── buttons: rectangular, one blue, one outlined ──────────────────────── */
.dc .btn,.dc .btn-dark,.dc .btn-green{border-radius:var(--ms-r);box-shadow:none;font-weight:600;letter-spacing:0}
.dc .btn,.dc .btn-green,.dc .btn-dark{background:var(--ms-blue);color:#fff;border:1px solid var(--ms-blue)}
.dc .btn:hover,.dc .btn-green:hover,.dc .btn-dark:hover{background:var(--ms-blue-dark);border-color:var(--ms-blue-dark);transform:none}
.dc .btn-ghost{background:#fff;color:var(--ms-ink);border:1px solid var(--ms-line-2);border-radius:var(--ms-r)}
.dc .btn-ghost:hover{background:var(--ms-bg-alt);border-color:var(--ms-muted);color:var(--ms-ink)}

/* ── hero: light, big semibold headline, blue accent word ──────────────── */
.dc .hero{background:linear-gradient(180deg,#f7fbff 0%,#fff 62%);padding:64px 0 56px}
.dc .hero h1{font-weight:600;letter-spacing:-.025em;line-height:1.06;color:var(--ms-ink)}
.dc .hero h1 em{color:var(--ms-blue);font-style:normal}
.dc .eyebrow{color:var(--ms-blue);font-weight:600;letter-spacing:.09em;font-size:11.5px}
.dc .lead{color:var(--ms-ink-2)}

/* ── the product window reads as a real screenshot ─────────────────────── */
.dc .window{background:#fff;border:1px solid var(--ms-line);border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.13),0 4px 10px rgba(0,0,0,.05)}
.dc .window-bar{background:#f7f7f7;border-bottom:1px solid var(--ms-line);border-radius:8px 8px 0 0}
.dc .dot{width:10px;height:10px}
.dc .pill{background:var(--ms-blue-soft);color:var(--ms-blue-dark);border-radius:2px;font-weight:600}
.dc .bars i{background:var(--ms-blue);border-radius:1px}
.dc .hero-facts .fact b{color:var(--ms-ink)}

/* ── section rhythm and heads ──────────────────────────────────────────── */
.dc .sec{padding:56px 0;border-top:1px solid var(--ms-line)}
.dc .sec-head h2{font-weight:600;letter-spacing:-.02em;color:var(--ms-ink)}
.dc .sec-head p{color:var(--ms-muted)}
.dc .trusted{border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line);background:var(--ms-bg-alt)}
.dc .trusted span{color:var(--ms-muted)}

/* ── cards: white, hairline, 4px corners, lift on hover ────────────────── */
.dc .card,.dc .svc-card,.dc .pack,.dc .proj a,.dc .ai-card{
  background:#fff;border:1px solid var(--ms-line);border-radius:var(--ms-r);
  box-shadow:var(--ms-shadow);transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease
}
.dc .card:hover,.dc .svc-card:hover,.dc .proj a:hover,.dc .pack:hover{
  box-shadow:var(--ms-shadow-hover);transform:translateY(-2px);border-color:var(--ms-line-2)
}
.dc .card h3,.dc .svc-card h3,.dc .pack h3,.dc .proj h3{font-weight:600;color:var(--ms-ink)}
.dc .card p,.dc .svc-card p,.dc .pack li,.dc .proj .what{color:var(--ms-muted)}
.dc .svc-price{color:var(--ms-blue);font-weight:600}
.dc .svc-price small{color:var(--ms-muted);font-weight:400}
.dc .at,.dc .card .tag{background:var(--ms-bg-alt);color:var(--ms-ink-2);border-radius:2px;font-weight:600}

/* "Learn more ›" links, the Fluent tell */
.dc .card .go,.dc .proj .arrow{color:var(--ms-blue);font-weight:600}
.dc .case a{color:var(--ms-blue);font-weight:600}

/* ── pricing table and packages ────────────────────────────────────────── */
.dc table.pt{border:1px solid var(--ms-line);border-radius:var(--ms-r);overflow:hidden;background:#fff}
.dc table.pt th{background:var(--ms-bg-alt);color:var(--ms-ink);font-weight:600}
.dc table.pt tr:nth-child(even) td{background:#fafafa}
.dc .packs .pack.hi{border-top:3px solid var(--ms-blue);box-shadow:0 8px 24px rgba(0,103,184,.12)}
.dc .badge{background:var(--ms-blue);color:#fff;border-radius:2px;font-weight:600}
.dc .pack .amt{color:var(--ms-ink)}
.dc .pack li::before{color:var(--ms-blue)}

/* ── AI section sits on the grey band, like a Microsoft feature row ────── */
.dc .ai{background:var(--ms-bg-alt);border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line)}
.dc .ai-item{background:#fff;border:1px solid var(--ms-line);border-radius:var(--ms-r);box-shadow:var(--ms-shadow)}
.dc .ai-item .n{color:var(--ms-blue)}
.dc .ai-card li b{color:var(--ms-ink)}

/* ── chips, pillars, steps, quotes ─────────────────────────────────────── */
.dc .chip{background:#fff;border:1px solid var(--ms-line);border-radius:2px;color:var(--ms-ink-2)}
.dc .chip b{color:var(--ms-ink)}
.dc .pillars .pillar{border-left:3px solid var(--ms-blue);background:#fff;box-shadow:var(--ms-shadow)}
.dc .steps .step b{background:var(--ms-blue);color:#fff;border-radius:50%}
.dc .note{background:var(--ms-blue-soft);border:1px solid #cfe4f7;border-radius:var(--ms-r)}
.dc .note blockquote{color:var(--ms-ink)}

/* ── FAQ, CTA, footer ──────────────────────────────────────────────────── */
.dc .faq details{background:#fff;border:1px solid var(--ms-line);border-radius:var(--ms-r);box-shadow:var(--ms-shadow)}
.dc .faq summary{font-weight:600;color:var(--ms-ink)}
.dc .faq summary::before{color:var(--ms-blue)}
.dc .cta{background:linear-gradient(135deg,#005494 0%,#0067b8 55%,#0a7cc9 100%);color:#fff}
.dc .cta h2,.dc .cta p{color:#fff}
.dc .cta .btn-ghost{background:#fff;color:var(--ms-blue);border-color:#fff}
.dc .foot{background:var(--ms-bg-alt);border-top:1px solid var(--ms-line)}
.dc .foot h4{color:var(--ms-ink);font-weight:600}
.dc .foot li a,.dc .foot .about{color:var(--ms-muted)}
.dc .foot li a:hover{color:var(--ms-blue);text-decoration:underline}
.dc .foot-base{color:var(--ms-muted);border-top:1px solid var(--ms-line)}

/* ── responsive niceties ───────────────────────────────────────────────── */
@media (max-width:960px){
  .dc .hero{padding:44px 0 40px}
  .dc .sec{padding:44px 0}
  .dc .nav-in{height:52px}
}

/* ── Product card calls to action ───────────────────────────── */
.card .cta-row{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.card .cta-row .btn{font-size:14px;padding:9px 16px;line-height:1.2}
.card .cta-row .go{margin-top:0}