/* Brotherly Technology — unified site styles (BRAND.md / DESIGN.md / SITE-DESIGN.md) */
:root {
  --brand-orange: #ff7a2f;
  --brand-violet: #6a37d9;
  --brand-blue: #1959ff;
  --brand-blue-dark: #1246d8;
  --ink: #20212a;
  --muted: #5d6370;
  --surface: #f6f8fc;
  --line: #dfe4ee;
  --white: #fff;
  --success: #12805c;
  --warning: #b35a00;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 8px 24px rgba(32,33,42,.08);
  --shadow-lg: 0 24px 70px rgba(32,33,42,.14);
  --gradient: linear-gradient(105deg,#ff7a2f 0%,#6a37d9 48%,#1959ff 100%);
  --surface-blue: #eef4ff;
  --nav-height: 72px;
  --container: 1180px;
  --section-y: clamp(64px, 9vw, 120px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-blue); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 200; }
.skip-link:focus { left: 12px; top: 12px; }

/* Type */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
/* Balance headline ragging so lines break at even, natural points instead of
   leaving orphans like "and" or "in" stranded at the start of a line. */
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5vw, 4.4rem); line-height: 1; }
/* The gradient phrase flows INLINE with the rest of the headline. It used to be
   display:block, which force-broke every headline at the span boundary regardless
   of the sentence — producing breaks like "Secure IT for Financial / Services Firms".
   Use .grad-line when a headline genuinely wants the colored phrase on its own line. */
h1 .grad, h2 .grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 .grad-line, h2 .grad-line { display: block; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.eyebrow { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 14px; }
.measure { max-width: 65ch; }

/* Prose rhythm — the global reset zeroes every margin and nothing restored it, so
   consecutive paragraphs previously ran together with no gap at all. Restore vertical
   rhythm for stacked text without touching single-paragraph components. */
p + p, p + ul, p + ol, ul + p, ol + p, p + h3, p + h4, ul + h3, ol + h3 { margin-top: 1.1em; }
p + h2, ul + h2, ol + h2 { margin-top: 1.5em; }
/* h3/h4 are deliberately excluded — cards and steps already space those via h3 margin-bottom. */
h1 + p, h2 + p { margin-top: 16px; }
.section-head h1 + p, .section-head h2 + p, .section-head p + p { margin-top: 18px; }
.section-head p { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose { max-width: 68ch; }
.prose h2, .prose h3 { margin-top: 1.6em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; border-radius: 14px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand-blue); color: #fff; box-shadow: 0 10px 25px rgba(25,89,255,.24); }
.btn-primary:hover { background: var(--brand-blue-dark); box-shadow: 0 14px 34px rgba(25,89,255,.3); }
.btn-secondary { background: #fff; color: var(--brand-blue); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--brand-blue); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header::before { content: ""; display: block; height: 4px; background: var(--gradient); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: var(--nav-height); }
/* Without flex-shrink:0 the flex row squashes the logo (down to ~22px of its 133px)
   before it shrinks anything else, distorting the wordmark at narrow desktop widths. */
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin-left: auto; }
.nav-links > li { position: relative; }
/* :not(.btn) matters — without it these generic link rules outrank .btn-primary and
   strip the nav CTA's blue background and white text, then repaint the text brand-blue
   on hover while .btn-primary:hover repaints the background dark blue: blue on blue.
   Excluding buttons lets any .btn dropped into the nav keep its own styling. */
.nav-links a:not(.btn), .nav-links button.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; background: none; border: 0; font-family: inherit; cursor: pointer; border-radius: 8px; }
.nav-links a:not(.btn):hover, .nav-links button.nav-drop-btn:hover { color: var(--brand-blue); }
.nav-links a[aria-current="page"] { color: var(--brand-blue); }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px; display: none; }
.nav-drop.open .dropdown { display: block; }
/* Scoped with .nav-links so this outranks `.nav-links a:not(.btn)` above, which is
   (0,2,1). Plain `.dropdown a` is (0,1,1) and used to win only on source order —
   adding :not(.btn) to that rule tipped the balance and left dropdown links as
   inline-flex, so short entries sat side by side ("Legal" beside "Healthcare"). */
.nav-links .dropdown a { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: .95rem; }
.nav-links .dropdown a:hover { background: var(--surface); color: var(--brand-blue); }
.nav-phone { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* nowrap keeps the CTA on one line — wrapped, it grows past the 72px header. */
.nav-cta { min-height: 44px; padding: 10px 18px; font-size: .94rem; white-space: nowrap; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 2px solid var(--line); border-radius: 10px; width: 48px; height: 48px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 24px; height: 24px; }

/* Sections */
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--surface); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0; background: radial-gradient(circle at 7% 15%, rgba(255,122,47,.08), transparent 30%), radial-gradient(circle at 90% 15%, rgba(25,89,255,.1), transparent 33%), #fff; }
/* When a hero carries a breadcrumb, the trail belongs just under the nav rather than
   floating halfway down the hero. Tighten the top padding and give the trail its own
   generous gap before the headline. Heroes without a breadcrumb keep the full padding. */
.hero:has(.breadcrumb) { padding-top: clamp(20px, 2.6vw, 30px); }
.hero .breadcrumb { margin-bottom: clamp(30px, 4.5vw, 52px); }
.hero-grid { display: grid; grid-template-columns: 56fr 44fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
/* A hero with only one child was still reserving the 44% media column, leaving a
   large dead gutter. Collapse to a single readable column when there's nothing to show. */
.hero-grid:not(:has(> * + *)) { grid-template-columns: 1fr; }
.hero-grid:not(:has(> * + *)) > * { max-width: 940px; }
.hero-media { position: relative; padding: 13px; }
.hero-media::before { content: ""; position: absolute; inset: 0; border-radius: 32px; background: var(--gradient); transform: rotate(2deg); opacity: .9; }
.hero-media img { position: relative; border-radius: 24px; box-shadow: var(--shadow-lg); }
.hero-media.tilt-left::before { transform: rotate(-2deg); }
.media-soft { position: relative; padding: 16px 18px 18px 0; }
.media-soft::before { content: ""; position: absolute; inset: 0 40px 30px 30px; border-radius: 40px; background: var(--gradient); opacity: .13; }
.media-soft img { position: relative; border-radius: 26px; box-shadow: var(--shadow-lg); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero .lead { margin-top: 18px; }
.microproof { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 26px; color: var(--muted); font-size: .92rem; font-weight: 700; }
.microproof span { display: flex; align-items: center; }
.microproof span + span::before { content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--brand-orange); }
.dot { display: block; width: 24px; height: 4px; margin-bottom: 13px; border-radius: 99px; background: var(--gradient); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: .9rem; font-weight: 600; color: var(--muted); background: #fff; }

/* Cards */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .98rem; }
.card .card-link { display: inline-block; margin-top: 14px; font-weight: 700; text-decoration: none; }
.card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--gradient); color: #fff; }
.card-icon svg { width: 22px; height: 22px; }
/* Compat: some pages nest an icon box as a CHILD div.card-icon-img inside .card (not .card.card-icon).
   Style it identically to .card-icon so icon sizing/spacing stays consistent everywhere. */
.card-icon-img { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--gradient); color: #fff; }
.card-icon-img svg { width: 22px; height: 22px; color: #fff; }
/* Compat: many pages put the icon modifier on the CARD itself (.card.card-icon) while ALSO
   nesting a child icon box. Without this reset the card inherits the 44x44 gradient tile styles
   above and collapses — text overflows and cards overlap. Undo the tile styling on the card;
   the nested .card-icon / .card-icon-img child keeps it (lower specificity, so it is unaffected). */
.card.card-icon {
  display: block;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  background: #fff;
  color: inherit;
  margin-bottom: 0;
}
a.card { display: block; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
a.card:hover { border-color: #becae3; transform: translateY(-4px); box-shadow: var(--shadow-sm); }
/* Cards stacked directly on top of each other (outside a .grid, where gap already
   spaces them) had no separation at all because of the global margin reset. */
:not(.grid):not(.steps) > .card + .card { margin-top: 24px; }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; padding: 28px; padding-left: 28px; border-top: 4px solid var(--brand-blue); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface); border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
.step:nth-child(2) { border-top-color: var(--brand-violet); }
.step:nth-child(3) { border-top-color: var(--brand-orange); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; margin-bottom: 26px; }

/* Testimonials */
.quote-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
.quote-card::before { content: "\201C"; position: absolute; right: 28px; top: 14px; color: rgba(25,89,255,.1); font-family: Georgia, serif; font-size: 6.4rem; line-height: 1; pointer-events: none; }
.quote-card blockquote, .quote-card .quote-text { position: relative; font-size: 1.05rem; line-height: 1.75; font-style: normal; margin: 0 0 16px; color: var(--ink); }
.quote-card.featured { border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, var(--gradient) border-box; box-shadow: var(--shadow-lg); }
.quote-card.featured::before { color: rgba(106,55,217,.12); }
.quote-attr { margin-top: 16px; font-weight: 700; }
.quote-attr span { display: block; font-weight: 600; color: var(--muted); font-size: .9rem; }

/* FAQ */
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 18px 20px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--brand-blue); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 20px 18px; color: var(--muted); }

/* CTA band */
.cta-band { background: var(--surface); }
.cta-card { background: var(--surface-blue); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow-lg); padding: clamp(36px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; }
.cta-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--gradient); }
.cta-card::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(25,89,255,.08), transparent 70%); pointer-events: none; }
.cta-card .btn { margin-top: 26px; max-width: 460px; position: relative; z-index: 1; }
.cta-card p { color: var(--muted); max-width: 58ch; margin: 12px auto 0; }

/* Gradient feature panel (plan-card style) */
.gradient-panel { border-radius: 32px; background: var(--gradient); box-shadow: var(--shadow-lg); padding: clamp(34px, 5vw, 64px); color: #fff; }
.gradient-panel h2, .gradient-panel h3, .gradient-panel p, .gradient-panel .eyebrow { color: #fff; }
.gradient-panel .inner { border-radius: 24px; background: rgba(21,25,39,.2); backdrop-filter: blur(14px); padding: clamp(20px, 3vw, 34px); }

/* ---------------------------------------------------------------------------
   Hero visual panel — CSS/SVG art for pages with no photography. Fills the hero's
   media column with on-brand proof instead of leaving it empty.
   --------------------------------------------------------------------------- */
.hero-panel { position: relative; border-radius: 30px; padding: 3px; background: var(--gradient); box-shadow: var(--shadow-lg); }
.hero-panel::after { content: ""; position: absolute; inset: auto -18px -18px auto; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(25,89,255,.14), transparent 70%); pointer-events: none; z-index: -1; }
.panel-inner { border-radius: 27px; background: #fff; padding: clamp(22px, 3vw, 30px); }
.panel-head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.panel-head .panel-title { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.panel-lights { display: flex; gap: 6px; margin-left: auto; }
.panel-lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.panel-lights i:first-child { background: var(--brand-orange); }
.panel-lights i:nth-child(2) { background: var(--brand-violet); }
.panel-rows { display: grid; gap: 12px; list-style: none; }
.panel-rows li { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); font-weight: 600; font-size: .95rem; }
.panel-rows .row-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--gradient); display: flex; align-items: center; justify-content: center; }
.panel-rows .row-ico svg { width: 16px; height: 16px; color: #fff; }
.panel-rows .row-meta { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--success); white-space: nowrap; }
.panel-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Solid for the same contrast reason as .stat-num — short values like "0" or "3"
   would otherwise render pure orange. */
.panel-foot .pf-num { flex: 0 0 auto; white-space: nowrap; font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; color: var(--brand-blue); }
.panel-foot .pf-label { font-size: .88rem; color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Flow diagram — a real horizontal diagram (connected nodes), used mid-page to
   break up runs of cards and prose with something that reads as a graphic.
   --------------------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin-top: 8px; }
.flow::before { content: ""; position: absolute; top: 33px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 99px; background: var(--gradient); opacity: .85; }
.flow-step { position: relative; text-align: center; padding: 0 14px; }
.flow-ico { position: relative; z-index: 1; width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(#fff,#fff) padding-box, var(--gradient) border-box; border: 3px solid transparent; box-shadow: var(--shadow-sm); }
.flow-ico svg { width: 28px; height: 28px; color: var(--brand-violet); }
.flow-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.flow-step p { font-size: .92rem; color: var(--muted); }
.flow-num { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 8px; }

/* Before / after comparison — high-contrast visual block, doubles as a conversion device */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.compare-col { border-radius: 26px; padding: clamp(26px, 3.4vw, 38px); }
.compare-col.is-before { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.compare-col.is-after { background: var(--gradient); color: #fff; box-shadow: var(--shadow-lg); }
.compare-col h3 { font-size: 1.25rem; margin-bottom: 6px; }
.compare-col .compare-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; }
.compare-col.is-before .compare-tag { color: var(--warning); }
.compare-col.is-after .compare-tag { color: rgba(255,255,255,.85); }
.compare-list { list-style: none; display: grid; gap: 13px; margin-top: 20px; padding: 0; }
.compare-list li { position: relative; padding-left: 32px; font-size: .97rem; font-weight: 600; line-height: 1.5; }
.compare-list li::before { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: .8rem; font-weight: 800; }
.compare-col.is-before .compare-list li::before { content: "\00d7"; background: #fdeee4; color: var(--warning); }
.compare-col.is-after .compare-list li::before { content: "\2713"; background: rgba(255,255,255,.2); color: #fff; }

/* Stat band — breaks long prose runs with scannable numbers */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-band.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
/* Solid, not gradient-clipped: a narrow glyph like "8" samples only the orange end
   of the ramp, which lands at ~2.6:1 on white and fails WCAG. Brand blue is ~5.9:1
   and stays identical whatever the digit count. */
.stat-num { display: block; white-space: nowrap; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--brand-blue); }
.stat-label { display: block; margin-top: 10px; font-size: .92rem; color: var(--muted); font-weight: 600; }

/* Split — prose beside a visual, for pulling apart text-heavy sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split.media-first > :last-child { order: -1; }

/* Lead magnet band */
.lead-magnet { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: start; background: var(--surface-blue); border: 1px solid var(--line); border-radius: 32px; padding: clamp(28px, 4vw, 56px); position: relative; overflow: hidden; }
.lead-magnet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--gradient); }
.lead-magnet h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.lead-magnet .lm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 16px; }
.lead-magnet .lm-badge svg { width: 14px; height: 14px; }
.lead-magnet .check-list { margin-top: 22px; }
.lead-magnet .lm-note { margin-top: 18px; font-size: .86rem; color: var(--muted); }
/* Mock document cover for the magnet. It sits under the copy in the left column,
   centred — sitting above the form fields made it read as bolted onto the form. */
.lm-cover { position: relative; width: min(290px, 100%); margin: 32px auto 0; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 26px 24px; transform: rotate(-1.5deg); }
.lm-cover::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; border-radius: 18px 18px 0 0; background: var(--gradient); }
.lm-cover .lmc-kicker { margin-top: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-blue); }
.lm-cover .lmc-title { margin-top: 10px; font-size: 1.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.lm-cover .lmc-lines { margin-top: 18px; display: grid; gap: 9px; }
.lm-cover .lmc-lines i { display: block; height: 8px; border-radius: 99px; background: var(--line); }
.lm-cover .lmc-lines i:nth-child(2) { width: 88%; }
.lm-cover .lmc-lines i:nth-child(3) { width: 72%; }
.lm-cover .lmc-lines i:nth-child(4) { width: 91%; }
.lm-cover .lmc-tag { margin-top: 20px; display: inline-block; padding: 6px 12px; border-radius: 8px; background: var(--surface); font-size: .78rem; font-weight: 700; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Buyers-guide band — the book offer, placed high on the page. Deliberately more
   compact than .lead-magnet so it can sit right under the hero without pushing
   the page's own content below the fold.
   --------------------------------------------------------------------------- */
.guide-band { padding: clamp(26px, 3.4vw, 40px) 0; }
/* Orange holds most of the width before turning violet, matching the pill on
   dentistrytechsupport.com while staying inside the brand ramp. */
.guide-pill {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(22px, 3vw, 52px); align-items: center;
  padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 44px);
  border-radius: clamp(24px, 2.6vw, 34px);
  background: linear-gradient(100deg, #ff7a2f 0%, #fb6a24 34%, #b93bb8 78%, #8b2fd4 100%);
  box-shadow: var(--shadow-lg);
}
.guide-pill .guide-cover { width: clamp(120px, 12vw, 168px); border-radius: 8px; box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.guide-copy h2 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.85rem); }
.guide-copy p { color: rgba(255,255,255,.95); margin-top: 12px; max-width: 62ch; font-size: 1rem; }
/* White pill button with violet label, as on DTS */
.btn-onbrand { background: #fff; color: #7b2fd0; border-color: #fff; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.btn-onbrand:hover { background: #fff; color: #5f1fb0; box-shadow: 0 14px 32px rgba(0,0,0,.24); }

/* Responsive video embed */
.video-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink); aspect-ratio: 16 / 9; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Photo with the brand's tilted gradient backing, reusable anywhere */
.photo-frame { position: relative; padding: 12px; }
.photo-frame::before { content: ""; position: absolute; inset: 0; border-radius: 30px; background: var(--gradient); transform: rotate(-2deg); opacity: .9; }
.photo-frame img { position: relative; border-radius: 22px; box-shadow: var(--shadow-lg); width: 100%; }

/* Check list */
.check-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 32px; color: var(--ink); font-weight: 600; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 1px; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: #e8f8f2; color: var(--success); font-size: .78rem; font-weight: 800; }
.gradient-panel .check-list li { color: #fff; }
.gradient-panel .check-list li::before { background: rgba(255,255,255,.18); color: #fff; }

/* Breadcrumbs */
.breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-blue); }
/* The industries pages use a semantic <ol> for the trail. Render it inline with the
   same "/" separators as the plain-text breadcrumbs used elsewhere. */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.breadcrumb li { display: inline; }
.breadcrumb li + li::before { content: "/"; margin: 0 8px; color: var(--line); }

/* HubSpot form wrap */
.hs-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }

/* Resources / articles */
.article-hero { padding-bottom: clamp(44px, 6vw, 76px); }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; color: var(--muted); font-size: .92rem; font-weight: 600; }
.article-featured { max-width: 940px; margin: 0 auto clamp(42px, 7vw, 76px); }
.article-featured img { width: 100%; max-height: 560px; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 7vw, 88px); align-items: start; }
.article-content { min-width: 0; font-size: 1.06rem; }
.article-content > * { max-width: 72ch; }
.article-content p { margin: 0 0 1.35em; color: var(--muted); }
.article-content h2 { margin: 2.2em 0 .7em; font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
.article-content h3 { margin: 1.8em 0 .65em; }
.article-content ul, .article-content ol { margin: 0 0 1.5em 1.4em; color: var(--muted); }
.article-content li { margin-bottom: .55em; padding-left: .3em; }
.article-content blockquote { margin: 2em 0; padding: 24px 28px; border-left: 4px solid var(--brand-violet); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-blue); color: var(--ink); font-size: 1.1rem; }
.article-content img { width: auto; max-width: 100%; height: auto; margin: 2em auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.article-content a { overflow-wrap: anywhere; }
.article-aside { position: sticky; top: 110px; display: grid; gap: 20px; }
.article-aside .card { padding: 22px; box-shadow: none; }
.article-aside ul { list-style: none; }
.article-aside li + li { margin-top: 12px; }
.article-aside a { font-size: .92rem; font-weight: 700; text-decoration: none; }
.archive-notice { max-width: 72ch; margin: 0 0 32px; padding: 18px 20px; border: 1px solid #f0c79c; border-radius: var(--radius-sm); background: #fff7ed; color: #7a4100; }
.resource-grid .card { display: flex; flex-direction: column; }
.resource-grid .card-link { margin-top: auto; padding-top: 18px; }
.resource-card-image { aspect-ratio: 16/9; margin: -28px -28px 22px; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-blue); }
.resource-card-image img { width: 100%; height: 100%; object-fit: cover; }
.resource-date { margin-bottom: 9px; color: var(--brand-blue-dark); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.category-links { display: flex; flex-wrap: wrap; gap: 10px; }
.category-links a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; }
.category-links a:hover { border-color: var(--brand-blue); }
@media (max-width: 860px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

/* Footer */
.site-footer { background: var(--ink); color: #c9cdd6; margin-top: 0; }
.site-footer::before { content: ""; display: block; height: 4px; background: var(--gradient); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 48px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #c9cdd6; text-decoration: none; font-size: .95rem; }
.site-footer a:hover { color: #fff; }
.footer-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
/* Social row — the visible counterpart to the sameAs entries in the schema. */
.footer-social { display: flex; gap: 10px; align-items: center; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); color: #c9cdd6; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.footer-social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); color: #fff; }
.footer-social svg { width: 17px; height: 17px; }

/* Sticky mobile CTA */
.sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.sticky-cta .btn { width: 100%; }

/* Responsive */
/* Nav breakpoints are measured, not guessed: the nav needs ~1068px at full spacing and
   ~972px tightened (both including the phone number). Tighten below 1280px and hand over
   to the hamburger at 1080px, which keeps 60px+ of headroom at every desktop width.
   There used to be a `.nav-phone { display: none }` here, but it never applied —
   `.nav-links a:not(.btn)` (0,2,1) outranks `.nav-phone` (0,1,0). The phone fits at every
   width the desktop nav is shown, so the rule is simply gone rather than resurrected. */
@media (max-width: 1280px) {
  .nav-inner { gap: 14px; }
  .nav-links a:not(.btn), .nav-links button.nav-drop-btn { padding: 10px 9px; font-size: .93rem; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 48px 0 36px; }
  .lead-magnet, .split, .compare { grid-template-columns: 1fr; }
  /* Cover beside the copy, CTA full width beneath both */
  .guide-pill { grid-template-columns: auto 1fr; }
  .guide-pill .btn { grid-column: 1 / -1; width: 100%; }
  .split.media-first > :last-child { order: 0; }
  /* Diagram reflows to two rows; drop the connecting rail so it can't point at nothing. */
  .flow { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .flow::before { display: none; }
}
/* The full desktop nav needs ~972px even fully tightened, but the hamburger only
   appeared at 760px — so between those widths the nav overflowed the viewport.
   Switch to the mobile nav at 1080px; the layout breakpoints below stay at 760px. */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-links, .nav-cta-wrap { display: none; }
  .nav-open .nav-links { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: calc(var(--nav-height) + 4px) 0 0 0; background: #fff; padding: 20px 24px; overflow-y: auto; z-index: 99; margin: 0; gap: 2px; }
  .nav-open .nav-links a, .nav-open .nav-links button.nav-drop-btn { padding: 14px 8px; font-size: 1.1rem; width: 100%; justify-content: space-between; }
  .nav-open .nav-links a.btn { width: 100%; margin-top: 10px; }
  .nav-open .dropdown { position: static; box-shadow: none; border: 0; border-left: 3px solid var(--line); border-radius: 0; margin-left: 8px; }
  .sticky-cta { display: block; }
  body { padding-bottom: 76px; }
}
@media (max-width: 760px) {
  .grid-3, .grid-2, .grid-4, .steps, .stat-band, .flow { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .lead-magnet { padding: 28px 22px; border-radius: 24px; }
  .lm-cover { transform: none; }
  /* Side-by-side leaves the copy column ~130px wide on a phone, so stack instead:
     cover centred above full-width copy. */
  .guide-pill { grid-template-columns: 1fr; text-align: left; }
  .guide-pill .guide-cover { width: 152px; justify-self: center; }
}