/* ============================================================
   IT DigiLit - site chrome (header, nav, footer, 404).

   The page BODIES are the existing widgets and bring their own scoped styles.
   Nothing here may leak into them, so every rule below is namespaced to the
   chrome classes and none of them touch .idl-wrap, .idl-hero or any token the
   widgets define for themselves.

   Tokens repeat the widget palette deliberately rather than importing it: the
   widgets each declare their own on their root, so there is no shared
   stylesheet to import from. If the palette moves, it moves in both places.
   ============================================================ */

/*
  Inter is here ONLY for the header nav, because that is what the live
  WordPress theme sets it in (17px / 500 / #707070, measured 2026-08-29). The
  page bodies stay on Source Sans 3. Matching the nav face is most of what
  makes the two platforms indistinguishable at a glance.
*/
/*
  🚨 THE FONT @import MOVED INTO THE PAGE HEAD ON 2026-09-06. DO NOT PUT IT BACK.

  An @import here is render-blocking in the worst way: the browser must fetch and
  parse this stylesheet before it can even discover the font URL, so it is a
  serial chain rather than a parallel fetch. It also made the two
  <link rel="preconnect"> hints in SHELL completely useless - they warm a
  connection to a host the browser has not been told about yet.

  The same request now lives as a <link rel="stylesheet"> in build.js's SHELL,
  beside those preconnects, where the preload scanner can start it immediately.
  Adding a family means editing it there, not reintroducing an import here.
*/

:root {
  --idl-page:#F9F9F9;
  --idl-surface:#FFFFFF;
  --idl-tint:#E7F0FC;
  --idl-border:#D9E5F4;
  --idl-border-firm:#BBD2ED;
  --idl-ink:#16263F;
  --idl-ink-soft:#43536B;
  --idl-muted:#6B7C93;
  --idl-blue:#2271B1;
  --idl-blue-deep:#1A5C93;

  /*
    Measured off the live WordPress header at 1440px on 2026-08-29:
      logo   198 x 93, 28px above and below  -> 149px band
      nav    17px Inter, weight 500, #707070
      items  Home 78 / IT Solutions 149 / About Us 105 / Contact Us 120 /
             Partners 99 / Login 75, zero gap between them (padding is inside)
      Login  is a PLAIN LINK, not a button
    These numbers are the spec. If the two headers ever disagree again,
    re-measure rather than adjusting by eye.
  */
  --idl-header-h:149px;
  --idl-nav-ink:#707070;
}

* { box-sizing:border-box; }

/* ============================================================
   117% - the whole page, one notch up.

   DT reads these pages better at 110-125% browser zoom, so the site is built
   to look that way with the browser left at 100%.

   `zoom`, not `transform: scale()`. Transform scales the painted result but
   leaves the layout box at its original size, so the page ends up with a
   permanent horizontal scrollbar and a band of dead space at the bottom. `zoom`
   scales the layout itself - which is precisely what the browser's own zoom
   control does, so the result is identical to what DT was already looking at.

   !! MEDIA QUERIES SEE THE UNZOOMED VIEWPORT. At 1.17 a 1440px window lays out
   as though it were 1231px, so every breakpoint below fires ~17% earlier than
   the raw number suggests. That is faithful to real browser zoom and is why the
   breakpoints were not "corrected" to compensate.

   !! NOT APPLIED ON PHONES. A 375px screen would lay out as 320px, which is
   narrower than anything here is designed for and would start breaking
   card grids. Phone text is already at a comfortable size.
   ============================================================ */
@media (min-width: 1024px) {
  body { zoom: 1.17; }
}

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
}

body {
  margin:0;
  /*
    The page GROUND is deliberately a shade deeper than the widget surface
    (--idl-page, #F9F9F9). Without that difference the container below has
    nothing to sit against and reads as an arbitrary line across the screen
    rather than a contained sheet. This is the only reason the two tones exist.
  */
  background:#EDF1F7;
  color:var(--idl-ink);
  font-family:'Source Sans 3', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the content container ---------- */

/*
  Every page body is a widget that runs edge to edge and sets its own
  background. Left alone on a full-bleed page the title block floats with
  nothing holding it, which is what made the hero read as unfinished. The shell
  gives the content a defined edge without touching a single widget rule.
*/
.idl-shell {
  /*
    !! 1160, NOT 1280, BECAUSE OF THE 117% ZOOM ABOVE.
    At zoom 1.17 a 1440px window lays out as 1231px. A 1280 max-width therefore
    exceeds the available width and the sheet fills edge to edge, losing the
    gutters that make it read as contained at all. 1160 leaves ~35px either side
    at 1440 and grows properly on wider screens.
  */
  max-width:1160px;
  margin:26px auto 0;
  background:var(--idl-page);
  border:1px solid var(--idl-border);
  border-radius:18px;
  overflow:hidden;
}

@media (max-width: 860px) {
  /* Edge to edge on a phone - a 26px gutter either side of an already narrow
     column wastes the width that matters most. */
  .idl-shell { margin:0; border-radius:0; border-left:0; border-right:0; }
}

.idl-skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--idl-blue); color:#fff; padding:12px 18px;
  font-weight:700; border-radius:0 0 8px 0;
}
.idl-skip:focus { left:0; }

/* ---------- header ---------- */

.idl-header {
  position:sticky; top:0; z-index:100;
  background:var(--idl-surface);
  border-bottom:1px solid var(--idl-border);
}
.idl-header-in {
  max-width:1400px; margin:0 auto; padding:0 40px;
  height:var(--idl-header-h);
  /* 3 zones: logo left | menu centred | balancing space right. The burger is
     display:none on desktop so it takes no grid cell. Brand lands in col 1,
     nav in the centred auto column. Mobile resets to flex (see the media query). */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px;
}

/*
  THE FULL ORIGINAL LOGO IS USED ON PURPOSE, REFLECTION AND ALL - DT 2026-09-05.

  logo.png is CX-57713_ITdigilit_Final.png at its true 641x300: the wordmark plus
  the faded mirror reflection in the bottom third. An earlier pass cropped the
  reflection out (to 641x242) because a fixed header height sliced through it and
  it read as "half-severed". DT wants the reflection shown - so the file is the
  full 300 tall and the image renders WHOLE (width:198, height:auto), never
  cropped. At 198 wide it is ~92px tall, well inside the 149px header, so nothing
  slices it now. logo-cropped.png keeps the old 641x242 version if we revert.

  !! DO NOT re-crop or set object-fit:cover with object-position:top - that hides
  the reflection DT asked to see. Show the whole file.
*/
.idl-brand {
  display:block; flex:0 0 auto; justify-self:start; text-decoration:none; line-height:0;
}
/*
  !! SIZED BY WIDTH, NOT HEIGHT, AND THE REASON MATTERS.

  WordPress renders the UNCROPPED file at 198x93 - which is 198 wide by 75 of
  actual mark plus 18 of reflection. This file is cropped, so matching on
  HEIGHT would render the mark at 246 wide: same height, visibly bigger logo.
  Matching on WIDTH puts the mark at exactly the size it appears live.
*/
.idl-brand img {
  display:block; width:198px; height:auto;
}
.idl-brand:focus-visible { outline:3px solid var(--idl-blue); outline-offset:4px; border-radius:4px; }

@media (max-width: 480px) {
  .idl-brand img { width:150px; }
}

/* Centred, per DT 2026-09-03. The header grid's balancing right column absorbs
   the space the logo would otherwise leave, so the menu sits in the true centre
   of the bar rather than hugging one side. */
.idl-nav { justify-self:center; }
.idl-nav > ul {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:2px;
}
.idl-nav-item { position:relative; }

.idl-nav-link {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Inter', system-ui, sans-serif;   /* matches the live theme */
  font-size:17px; font-weight:500; line-height:1;
  color:var(--idl-nav-ink); text-decoration:none;
  padding:13px 16px; border-radius:8px;
  background:none; border:0; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.idl-nav-link:hover { color:var(--idl-ink); background:var(--idl-tint); }
.idl-nav-link:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; }
.idl-nav-link[aria-current="page"] { color:var(--idl-blue); }

.idl-caret {
  width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.idl-nav-toggle[aria-expanded="true"] .idl-caret { transform:rotate(-135deg) translateY(-1px); }

/*
  Login is a BLUE BUTTON on both platforms, by DT's decision 2026-08-29. The
  live WordPress header currently renders it as a plain grey link like every
  other item, so THIS is the one place Azure deliberately leads and WordPress
  has to follow - the ElementsKit menu item needs the same treatment.
*/
.idl-nav-cta { margin-left:10px; }
.idl-nav-cta .idl-nav-link {
  color:#fff; background:var(--idl-blue);
  padding:13px 26px; border-radius:9px; font-weight:600;
}
.idl-nav-cta .idl-nav-link:hover { background:var(--idl-blue-deep); color:#fff; }

/* Standalone Login fills the header grid's right zone on desktop, so the menu
   (now without Login) can sit narrower and truly centred in the middle column.
   The in-nav copy carries .idl-cta-mobile and is hidden here, shown in the
   dropdown on mobile. */
.idl-cta-mobile { display:none; }
.idl-login {
  justify-self:end;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Inter', system-ui, sans-serif; font-size:17px; font-weight:600; line-height:1;
  color:#fff; background:var(--idl-blue); text-decoration:none;
  padding:13px 26px; border-radius:9px;
  transition:background-color .15s ease;
}
.idl-login:hover { background:var(--idl-blue-deep); color:#fff; }
.idl-login:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; }

/* ---------- mega menu ---------- */

/*
  Three columns under one "IT Solutions" trigger, matching the live ElementsKit
  menu. Anchored to the HEADER rather than the trigger so the panel can be wider
  than the button without hanging off the right edge of the viewport.
*/
.idl-mega {
  display:none;
  position:absolute; top:calc(100% + 1px); left:0; right:0;
  background:var(--idl-surface);
  border-top:1px solid var(--idl-border);
  border-bottom:1px solid var(--idl-border);
  box-shadow:0 16px 36px rgba(22,38,63,.09);
  padding:30px 26px 32px;
}
.idl-has-sub.is-open .idl-mega {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:34px;
  max-width:1240px; margin:0 auto;
}
/* The panel is full-bleed, so it is positioned against the header, not the li */
.idl-header { position:sticky; }
.idl-has-sub { position:static; }

.idl-mega-col ul { list-style:none; margin:0; padding:0; }
.idl-mega-h {
  font-family:'Archivo', sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--idl-blue);
  margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--idl-border);
}
.idl-mega-col a {
  display:block; padding:9px 10px; border-radius:7px;
  font-size:15.5px; font-weight:600; color:var(--idl-ink-soft); text-decoration:none;
}
.idl-mega-col a:hover { background:var(--idl-tint); color:var(--idl-ink); }
.idl-mega-col a:focus-visible { outline:3px solid var(--idl-blue); outline-offset:-2px; }
.idl-mega-col a[aria-current="page"] { color:var(--idl-blue); background:var(--idl-tint); }

/* ---------- burger ---------- */

.idl-burger {
  display:none; margin-left:auto;
  width:44px; height:44px; padding:11px;
  background:none; border:1px solid var(--idl-border); border-radius:9px; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.idl-burger span { display:block; height:2px; background:var(--idl-ink); border-radius:2px; }
.idl-burger:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; }

@media (max-width: 900px) {
  .idl-header-in { display:flex; gap:14px; }
  .idl-login { display:none; }        /* desktop-only; mobile uses the in-dropdown copy */
  .idl-cta-mobile { display:block; }
  .idl-burger { display:flex; }
  .idl-nav {
    display:none; position:absolute; top:var(--idl-header-h); left:0; right:0;
    background:var(--idl-surface); border-bottom:1px solid var(--idl-border);
    padding:12px 20px 20px; max-height:calc(100vh - var(--idl-header-h)); overflow-y:auto;
  }
  .idl-nav.is-open { display:block; }
  .idl-nav > ul { flex-direction:column; align-items:stretch; gap:2px; }
  .idl-nav-link { width:100%; justify-content:space-between; padding:13px 12px; font-size:16.5px; }
  .idl-mega {
    position:static; display:none; min-width:0; box-shadow:none;
    border:0; border-left:2px solid var(--idl-border); border-radius:0;
    margin:2px 0 6px 12px; padding:2px 0 2px 8px;
  }
  .idl-has-sub.is-open .idl-mega { display:block; grid-template-columns:1fr; }
  .idl-nav-cta { margin-top:8px; }
  .idl-nav-cta .idl-nav-link { justify-content:center; }
}

/* ---------- footer ---------- */

.idl-footer {
  background:var(--idl-surface);
  border-top:1px solid var(--idl-border);
  margin-top:60px;
}
.idl-footer-in {
  max-width:1240px; margin:0 auto; padding:44px 26px 34px;
  display:grid; grid-template-columns:minmax(240px,1fr) 2fr; gap:36px;
}
.idl-foot-brand {
  font-family:'Archivo', sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-.02em; color:var(--idl-ink); margin:0 0 8px;
}
.idl-foot-note { margin:0; font-size:15px; color:var(--idl-muted); max-width:38ch; }

.idl-foot-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px; }
.idl-foot-h {
  font-family:'Archivo', sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--idl-ink);
  margin:0 0 11px;
}
.idl-foot-cols a {
  display:block; font-size:15px; color:var(--idl-ink-soft);
  text-decoration:none; padding:4px 0;
}
.idl-foot-cols a:hover { color:var(--idl-blue); text-decoration:underline; }
.idl-foot-cols a:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; border-radius:4px; }

.idl-footer-legal { border-top:1px solid var(--idl-border); }
.idl-footer-legal-in {
  max-width:1240px; margin:0 auto; padding:18px 26px;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px 22px;
}
.idl-footer-legal p {
  margin:0; font-size:15px; color:var(--idl-muted);
}
.idl-foot-legal-links { display:flex; flex-wrap:wrap; gap:18px; }
.idl-foot-legal-links a {
  font-size:15px; color:var(--idl-muted); text-decoration:none;
}
.idl-foot-legal-links a:hover { color:var(--idl-blue); text-decoration:underline; }
.idl-foot-legal-links a:focus-visible {
  outline:3px solid var(--idl-blue); outline-offset:2px; border-radius:4px;
}

@media (max-width: 760px) {
  .idl-footer-in { grid-template-columns:1fr; gap:28px; }
}

/* ---------- 404 ---------- */

.idl-404 { background:var(--idl-page); padding:90px 26px 110px; }
.idl-404-in { max-width:1140px; margin:0 auto; }
.idl-404-code {
  font-family:'Archivo', sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.14em; color:var(--idl-blue); margin:0 0 10px;
}
.idl-404 h1 {
  font-family:'Archivo', sans-serif; font-weight:800;
  font-size:clamp(28px,4.2vw,44px); letter-spacing:-.022em; line-height:1.1;
  margin:0 0 12px; color:var(--idl-ink);
}
.idl-404 p { margin:0 0 22px; font-size:17.5px; color:var(--idl-ink-soft); max-width:56ch; }
.idl-404-btn {
  display:inline-block; background:var(--idl-blue); color:#fff;
  font-family:'Archivo', sans-serif; font-weight:700; font-size:15.5px;
  padding:13px 26px; border-radius:9px; text-decoration:none;
}
.idl-404-btn:hover { background:var(--idl-blue-deep); }

/* ============================================================
   THE BLUE HERO BAND - one definition, used by every top-level page.

   DT, 2026-09-02: "DigiSuite has the blue container. I like that look."
   It started as .idl-suite-hero inside the DigiSuite widget. Copying that
   gradient into three more widgets would be four copies of one look, and the
   copies are what drift - the same argument the module lineup and the route
   table already lost once each in this repo.

   ⚠️ IT USES !important DELIBERATELY, WHICH IS OTHERWISE BANNED HERE.
   Each page widget carries its own scoped type styles and several of them are
   themselves !important - the homepage's comment records why (107 per-widget
   rules once had to out-specify Elementor's Theme Style). A shared band that
   loses the cascade renders dark-blue-on-dark-blue text, so it wins explicitly.

   ⚠️ AND THE WHITE CARD INSIDE IT IS RE-ASSERTED AFTERWARDS. The homepage
   hero puts a white panel in the band's right column; whitening every
   descendant would make that card's text invisible on its own white ground.
   ============================================================ */
.idl-hero-band {
  background:
    radial-gradient(1100px 420px at 78% -10%, rgba(34,113,177,.42), transparent 62%),
    linear-gradient(180deg, #16263F 0%, #101C30 100%);
  color: #fff;
  padding: clamp(48px,7vw,88px) 0 clamp(44px,6.5vw,78px);
  margin: 0 0 clamp(34px,5vw,58px);
}
/* Standard title strip for every simple page (About, Contact, Partners, legal):
   slim so it doesn't stack into wasted space above the widget's own content, and
   CENTERED. The generic "IT DigiLit" eyebrow is dropped in build.js. Full-hero
   pages set ownHero and never get this band. */
/* DT 2026-09-06: TIGHTENED WHEN THE LEDE CAME OUT. This band holds a single
   centred title now, and the old bottom padding plus margin were sized for a
   two-line block - together they left ~106px between "About Us" and the page's
   first real headline. The lede rule that lived here went with it; there is no
   longer a .idl-lede inside this band to centre. */
.idl-hero-band.idl-band-page {
  padding: clamp(26px,3.4vw,40px) 0 clamp(18px,2.2vw,24px);
  margin: 0 0 clamp(12px,1.6vw,18px);
  text-align: center;
}
.idl-hero-band.idl-band-page .idl-wrap { max-width: 860px; }
.idl-hero-band.idl-band-page .idl-h1 { margin-top: 0; }

/* 🚨 THE SELECTORS BELOW DOUBLE .idl-hero-band ON PURPOSE. DO NOT "TIDY" IT.
   .idl-hero-band :is(h1,h2,...) is specificity (0,1,1). The page widgets carry
   rules like .idl-home .idl-h1 at (0,2,0), also !important - so the widget won
   and the homepage headline rendered #16263F on a #16263F band. Measured
   contrast 1.00: not low contrast, INVISIBLE, and it shipped to production.
   Repeating the class lifts these to (0,3,0) so the band wins. */
.idl-hero-band.idl-hero-band :is(h1,h2,h3,h4,p,b,strong,li) { color:#fff !important; }
.idl-hero-band.idl-hero-band :is(.idl-eyebrow,.idlp-eyebrow,.idl-suite-eyebrow) { color:#8CC0EA !important; }
.idl-hero-band.idl-hero-band .idl-eyebrow::before { background:#8CC0EA !important; }
.idl-hero-band.idl-hero-band :is(.idl-lede,.idlp-lede,.idl-suite-lede,.idl-note) { color:#C6D6E8 !important; }
.idl-hero-band.idl-hero-band .idl-h1 span,
.idl-hero-band.idl-hero-band .idlp-h1 span { color:#6EC4F8 !important; }

/* buttons on the dark ground */
.idl-hero-band.idl-hero-band :is(.idl-btn-solid,.idlp-solid,.idl-btn-primary) {
  background:#2271B1 !important; color:#fff !important; border-color:#2271B1 !important;
}
.idl-hero-band.idl-hero-band :is(.idl-btn-solid,.idlp-solid,.idl-btn-primary):hover { background:#3A8AC9 !important; }
.idl-hero-band.idl-hero-band :is(.idl-btn-line,.idlp-line,.idl-btn-ghost) {
  background:transparent !important; color:#fff !important;
  border-color:rgba(255,255,255,.45) !important;
}
.idl-hero-band.idl-hero-band :is(.idl-btn-line,.idlp-line,.idl-btn-ghost):hover {
  border-color:#fff !important; background:rgba(255,255,255,.10) !important;
}

/* 🚨 the white card keeps its own colours - see the note above */
.idl-hero-band.idl-hero-band .idl-wp :is(b,strong,p,h4) { color:var(--idl-ink) !important; }
.idl-hero-band.idl-hero-band .idl-wp .idl-wp-head span,
.idl-hero-band.idl-hero-band .idl-wp .idl-caveat p { color:var(--idl-muted) !important; }
.idl-hero-band.idl-hero-band .idl-wp .idl-caveat p strong { color:var(--idl-ink) !important; }
.idl-hero-band.idl-hero-band .idl-wp .idl-wp-tile { color:var(--idl-ink) !important; }

/* The band's own type. Widget stylesheets define .idl-h1 / .idl-lede only
   inside their own page scope, so a legal page has no rule for them at all -
   without these the generated band renders unstyled browser defaults. */
.idl-hero-band.idl-hero-band .idl-wrap { max-width:1140px; margin:0 auto; padding:0 26px; }
.idl-hero-band.idl-hero-band .idl-eyebrow {
  display:inline-flex; align-items:center; gap:9px; margin:0 0 13px;
  font-size:13.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.idl-hero-band.idl-hero-band .idl-eyebrow::before { content:""; width:24px; height:2px; border-radius:2px; }
.idl-hero-band.idl-hero-band .idl-h1 {
  margin:0; font-family:'Archivo', system-ui, sans-serif;
  font-size:clamp(30px,4.4vw,50px); line-height:1.04; font-weight:800;
  letter-spacing:-.024em; text-wrap:balance;
}
.idl-hero-band.idl-hero-band .idl-lede {
  margin:15px 0 0; max-width:62ch; font-size:clamp(16px,1.8vw,18.5px); line-height:1.55;
}


/* ============================================================
   DT, 2026-09-03: "take out that - in front of every phrase."
   Every eyebrow (.idl-eyebrow / .idlp-eyebrow / .idl-suite-eyebrow) drew a
   short rule via ::before. One global kill covers every page - the per-widget
   ::before rules and the band's recolour of it (lines ~406/439) become inert.
   ============================================================ */
.idl-eyebrow::before,
.idlp-eyebrow::before,
.idl-suite-eyebrow::before { display:none !important; }


/* ============================================================
   PRODUCT DETAIL PAGES - .idl-prod - DT, 2026-09-06.

   "leave purchase on the first page but also have more info that will point
   to the apprentice page and pages like it."

   So /career-services/ keeps its Buy now buttons AND gains a More info link
   per tier, and each product gets a page that sells it properly with the
   purchase button AT THE TOP.

   🚨 THESE STYLES LIVE HERE, NOT IN THE THREE WIDGETS, WHICH BREAKS THIS
   REPO'S USUAL PATTERN ON PURPOSE. Every other widget is self-contained with
   its own scoped class and its own <style>, and that is right when each page
   looks different. These three are ONE layout with three sets of copy, so
   three copies of the same CSS would be three places for it to drift - and
   the drift would be invisible, because nobody opens all three at once.
   ============================================================ */
.idl-prod { color:var(--idl-ink); }
.idl-prod .idl-wrap { max-width:1120px; margin:0 auto; padding:0 clamp(18px,4vw,40px); }

/* the buy strip: price and purchase, above everything else */
/*
  DT, 2026-09-06: "That section is too much wasted space." The strip was sized
  for a two-line price (figure plus a "one-off" / "per month" label beneath);
  with the label gone it was mostly empty. Padding, gap and the price size all
  come down, and it no longer stretches to a card-like block.
*/
.idl-prod-buy {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin:0 0 clamp(20px,3vw,30px); padding:12px 16px;
  background:var(--idl-surface); border:1px solid var(--idl-border-firm);
  border-radius:10px;
}
/*
  The product name, beside the price - DT, 2026-09-06: "For the info page it
  needs a title. Right next to the $199 for assessment."

  ⚠️ IT IS THE PAGE'S <h1>, WHICH THESE THREE PAGES DID NOT HAVE. They are
  ownHero, so pageBand() draws nothing above them, and the buy strip was the
  first thing on the page - so each shipped with ZERO level-one headings, the
  same defect fixed on the homepage and /platform/ earlier the same day.
  Adding the title fixes the heading structure and the missing label together.
*/
.idl-prod-name {
  margin:0; font-family:'Archivo', system-ui, sans-serif;
  font-weight:800; font-size:clamp(20px,2.4vw,26px); line-height:1.1;
  letter-spacing:-.02em; color:var(--idl-ink); text-wrap:balance;
}

.idl-prod-price {
  font-family:'Archivo', system-ui, sans-serif; font-weight:800;
  font-size:26px; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--idl-ink); margin:0;
}
.idl-prod-price em {
  display:block; font-style:normal; font-family:'Source Sans 3', sans-serif;
  font-size:13.5px; font-weight:600; color:var(--idl-muted); margin-top:5px;
}
.idl-prod-buy .idl-prod-cta { margin-left:auto; display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:560px) {
  .idl-prod-buy .idl-prod-cta { margin-left:0; width:100%; }
  .idl-prod-buy .idl-prod-cta .idl-btn { width:100%; }
}

.idl-prod-sec { margin:0 0 clamp(30px,4.5vw,52px); }
.idl-prod-sec h2 {
  font-family:'Archivo', system-ui, sans-serif; font-weight:700;
  font-size:clamp(21px,2.6vw,27px); line-height:1.15; letter-spacing:-.015em;
  margin:0 0 8px; color:var(--idl-ink); text-wrap:balance;
}
.idl-prod-sec > p { margin:0 0 18px; max-width:66ch; color:var(--idl-ink-soft); font-size:16.5px; }

.idl-prod-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px;
  list-style:none; margin:0; padding:0;
}
.idl-prod-grid li {
  background:var(--idl-surface); border:1px solid var(--idl-border);
  border-radius:12px; padding:18px 20px;
}
.idl-prod-grid b {
  display:block; font-family:'Archivo', system-ui, sans-serif;
  font-weight:700; font-size:16.5px; color:var(--idl-ink); margin-bottom:6px;
}
.idl-prod-grid span { display:block; font-size:15.5px; color:var(--idl-ink-soft); line-height:1.5; }

.idl-prod-close {
  background:var(--idl-surface); border:1px solid var(--idl-border);
  border-radius:12px; padding:24px 26px; margin:0 0 clamp(24px,4vw,40px);
}
.idl-prod-close h2 { margin-top:0; }


/*
  Two-column intro on a product page - DT, 2026-09-06: "It also needs a picture
  or widget next to Find out where you actually stand."

  ⚠️ A WIDGET, NOT A PICTURE, AND THAT WAS A CONSTRAINT RATHER THAN A CHOICE.
  There is no photograph for the assessment. The only candidate,
  itdigilit-career.jpg, is already the hero of /career-services/ - the page the
  reader just came from - so reusing it would repeat the same image twice in one
  journey and say nothing new. This panel carries actual information instead.

  It reuses the readout-panel shape the homepage already uses for IT DigiSecure,
  so it reads as part of the same site rather than a new component.
*/
.idl-prod-split {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3.5vw,40px); align-items:start;
}
@media (max-width:820px) { .idl-prod-split { grid-template-columns:minmax(0,1fr); } }

/* The image column beside a product intro. Rounded and bordered to match the
   panel it replaced, so the layout reads the same whichever a page uses. */
.idl-prod-art { margin:0; }
.idl-prod-art img {
  display:block; width:100%; height:auto;
  border:1px solid var(--idl-border); border-radius:14px;
  box-shadow:0 16px 36px -28px rgba(34,113,177,.38);
}

.idl-prod-panel {
  background:var(--idl-surface); border:1px solid var(--idl-border);
  border-radius:14px; overflow:hidden;
  box-shadow:0 16px 36px -28px rgba(34,113,177,.38);
}
.idl-prod-panel-head {
  padding:11px 18px; background:var(--idl-tint);
  border-bottom:1px solid var(--idl-border);
}
.idl-prod-panel-head b {
  font-family:'Archivo', system-ui, sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--idl-blue);
}
.idl-prod-panel ul { list-style:none; margin:0; padding:6px 0; }
.idl-prod-panel li {
  display:flex; gap:11px; align-items:flex-start;
  padding:11px 18px; border-top:1px solid var(--idl-border);
  font-size:15.5px; color:var(--idl-ink-soft); line-height:1.45;
}
.idl-prod-panel li:first-child { border-top:none; }
.idl-prod-panel li::before {
  content:""; flex:none; width:8px; height:8px; margin-top:7px;
  border-radius:50%; background:var(--idl-blue);
}
.idl-prod-panel li b { color:var(--idl-ink); font-weight:600; }
.idl-prod-panel-foot {
  padding:12px 18px; border-top:1px solid var(--idl-border);
  background:var(--idl-page); font-size:14.5px; color:var(--idl-muted);
}


/* ============================================================
   THE BUTTON, WHICH WAS NOT ACTUALLY STYLED ANYWHERE SHARED.

   🚨 THIS IS A BUG FIX, NOT A NEW COMPONENT. `.idl-btn` was defined only
   inside itdigilit-body-widget.html - the HOMEPAGE widget - and widget styles
   ship only on the page that uses the widget. So the homepage's buttons looked
   right and the three product pages built on 2026-09-06 got NOTHING: measured
   on the live /it-digilearn/, the "Buy now" control computed to
   `color: rgb(0,0,238)`, no background, no padding, 0px radius. It was a
   default blue browser link with the word "Buy now" in it, on the page whose
   entire purpose is that button.

   It was invisible because every page that was LOOKED at while building the
   component (the homepage) carried the rules, and the three that did not were
   checked for content rather than for chrome.

   ⚠️ THE HOMEPAGE COPY IS DELIBERATELY LEFT WHERE IT IS. Its rules are
   identical to these and its inline <style> comes after this file, so it wins
   ties and nothing about the homepage changes. Deleting it as "now redundant"
   would be a second change riding along with a fix, on the one page that was
   never broken.
   ============================================================ */
.idl-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 23px; border-radius:999px;
  font-family:'Source Sans 3', sans-serif;
  font-size:16px; font-weight:700; white-space:nowrap; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:background .13s ease, border-color .13s ease;
}
.idl-btn-solid { background:var(--idl-blue); color:#fff; }
.idl-btn-solid:hover { background:var(--idl-blue-deep); color:#fff; }
.idl-btn-line { background:var(--idl-surface); color:var(--idl-blue); border-color:var(--idl-border-firm); }
.idl-btn-line:hover { border-color:var(--idl-blue); }
.idl-btn:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; }


/* ============================================================
   SERVICE PAGES - .idl-service - DT, 2026-09-07: "Do them all and then delete."

   Twenty pages rebuilt from WordPress, all on the .idl-prod layout above.
   Only the pieces .idl-prod does not already have are defined here: the "where
   this service fits" panel, the three-up pricing tiers, and a download line.

   ⚠️ .idl-service IS A MODIFIER ON .idl-prod, not a replacement. A service page
   carries both classes, so everything above applies and only the differences
   live here. Anything added below that is really a .idl-prod change should be
   made up there instead, or the two will describe the same thing differently.
   ============================================================ */

/* A service page's own h1 comes from the page band, so the first thing in the
   body is an h2 doing a hero's job. It gets a little more room than a mid-page
   heading, and the intro under it reads at hero size rather than body size. */
.idl-service > .idl-wrap > .idl-prod-sec:first-child h2 { font-size:clamp(23px,3vw,31px); margin-bottom:12px; }
.idl-service > .idl-wrap > .idl-prod-sec:first-child p {
  max-width:68ch; margin:0 0 12px; font-size:17px; line-height:1.6; color:var(--idl-ink-soft);
}
.idl-service .idl-prod-sec p { max-width:68ch; }

/* The price strip reuses .idl-prod-buy. The product NAME there is an h1 on a
   product page; here the h1 is already in the band above, so it is a paragraph
   that has to look the same without being a heading. */
.idl-prod-buy-name {
  margin:0; font-family:'Archivo', system-ui, sans-serif;
  font-weight:800; font-size:clamp(19px,2.2vw,24px); line-height:1.15;
  letter-spacing:-.02em; color:var(--idl-ink);
}

/* "Where this service fits" - a quiet tinted panel, not a card. It answers
   "should I keep reading", so it should read as an aside rather than compete
   with the sections around it. */
.idl-service-fits {
  background:var(--idl-tint); border:1px solid var(--idl-border);
  border-left:4px solid var(--idl-blue);
  border-radius:0 12px 12px 0; padding:16px 20px;
}
.idl-service-fits-h {
  margin:0 0 6px !important; font-family:'Archivo', system-ui, sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--idl-blue-deep);
}
.idl-service-fits p:last-child { margin:0 !important; font-size:16px; color:var(--idl-ink-soft); }

/* Pricing tiers. Three columns that collapse to one, each sized by its own
   content, with the button pinned to the bottom so three cards of different
   lengths still line their calls to action up. */
.idl-service-tiers {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px;
  align-items:stretch;
}
.idl-service-tier {
  display:flex; flex-direction:column;
  background:var(--idl-surface); border:1px solid var(--idl-border);
  border-radius:14px; padding:22px 22px 24px;
}
/* The middle plan is marked, not enlarged. Scaling one card up breaks the grid
   alignment on every width the transform was not measured at. */
.idl-service-tier-on { border-color:var(--idl-blue); box-shadow:0 16px 36px -28px rgba(34,113,177,.5); }
.idl-service-tier-name {
  margin:0 0 4px; font-family:'Archivo', system-ui, sans-serif;
  font-weight:700; font-size:18px; color:var(--idl-ink);
}
.idl-service-tier-price {
  margin:0 0 10px; font-family:'Archivo', system-ui, sans-serif;
  font-weight:800; font-size:30px; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--idl-ink);
}
.idl-service-tier-price em {
  display:block; font-style:normal; font-family:'Source Sans 3', sans-serif;
  font-size:13.5px; font-weight:600; color:var(--idl-muted); margin-top:5px;
}
.idl-service-tier-blurb { margin:0 0 14px; font-size:15.5px; color:var(--idl-ink-soft); line-height:1.5; }
.idl-service-tier ul { list-style:none; margin:0 0 20px; padding:0; }
.idl-service-tier li {
  display:flex; gap:10px; align-items:flex-start;
  padding:7px 0; font-size:15px; color:var(--idl-ink-soft); line-height:1.45;
}
.idl-service-tier li::before {
  content:""; flex:none; width:7px; height:7px; margin-top:7px;
  border-radius:50%; background:var(--idl-blue);
}
/* margin-top:auto is what pins the button to the bottom of a flex column, so
   the three buttons align even when the plans have different numbers of lines. */
.idl-service-tier .idl-btn { margin-top:auto; width:100%; }

/* A file to download. The size is printed next to it: a 2.7 MB PDF opened on a
   phone deserves a warning, and a link that says only "download" gives none. */
.idl-service-resource {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin:0 !important; padding:14px 18px;
  background:var(--idl-surface); border:1px solid var(--idl-border); border-radius:12px;
}
.idl-service-resource a { font-weight:700; color:var(--idl-blue); }
.idl-service-resource span { font-size:14px; color:var(--idl-muted); }

/* The closing panel's buttons need room above them; .idl-prod-close was built
   for a panel whose last element was a paragraph. */
.idl-service .idl-prod-close .idl-prod-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media (max-width:560px) {
  .idl-service .idl-prod-close .idl-prod-cta .idl-btn { width:100%; }
}


/* ============================================================
   THE SERVICE INDEX ON A HUB PAGE - .idl-service-index

   Twenty rebuilt pages that nothing linked to would be twenty pages nobody
   reads. This is the block that makes them reachable, printed at the foot of
   /ai-cloud-security/, /platform/ and /career-services/.

   ⚠️ IT SITS OUTSIDE EACH WIDGET'S OWN SCOPE, after its closing divs, because
   all three widgets carry heavily scoped styles (.idl-svc, .idlp-*, .idl-career)
   with their own type scales and their own button classes. Inside, it would
   inherit three different looks on three pages.

   Each row is one link covering the whole card, not a title with a "read more"
   beside it: the entire row is the target, which is a much larger tap area on
   a phone and one focus stop instead of two for a keyboard.
   ============================================================ */
.idl-service-index {
  background:var(--idl-page); border-top:1px solid var(--idl-border);
  padding:clamp(34px,5vw,56px) 0;
}
.idl-service-index .idl-wrap { max-width:1120px; margin:0 auto; padding:0 clamp(18px,4vw,40px); }
.idl-service-index h2 {
  font-family:'Archivo', system-ui, sans-serif; font-weight:700;
  font-size:clamp(21px,2.6vw,27px); line-height:1.15; letter-spacing:-.015em;
  margin:0 0 8px; color:var(--idl-ink); text-wrap:balance;
}
.idl-service-index > .idl-wrap > p {
  margin:0 0 20px; max-width:66ch; font-size:16.5px; color:var(--idl-ink-soft);
}
.idl-service-index ul {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:12px;
  list-style:none; margin:0; padding:0;
}
.idl-service-index li { display:flex; }
.idl-service-index a {
  display:flex; flex-direction:column; gap:4px; width:100%;
  padding:15px 18px; text-decoration:none;
  background:var(--idl-surface); border:1px solid var(--idl-border);
  border-radius:12px;
  transition:border-color .13s ease, background .13s ease;
}
.idl-service-index a:hover { border-color:var(--idl-blue); background:var(--idl-tint); }
.idl-service-index a:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; }
.idl-service-index b {
  font-family:'Archivo', system-ui, sans-serif; font-weight:700;
  font-size:16px; color:var(--idl-blue); line-height:1.25;
}
/* The hook doubles as the summary line. --idl-ink-soft rather than --idl-muted:
   this text sits on --idl-tint on hover, where the lighter grey drops under
   4.5:1 - the same contrast failure fixed across the module palette on
   2026-09-06. */
.idl-service-index span { font-size:15px; color:var(--idl-ink-soft); line-height:1.45; }