/* ============================================================
   TERRA COMPONENTS -- shared pieces the CodeForge main.css does not
   carry, built entirely from its design tokens (see main.css) so
   they read as the same system: the nav Verticals dropdown, the
   eyebrow label, hero action rows + badges, the stat strip, the
   problem/solution split, pill rows, the comparison table, the
   checkmark cards, the multi-column footer, and the hub diagram
   node/tooltip styling shared by Home and How It Works.
   ============================================================ */

/* Nothing on any page is ever wider than the viewport. `clip` (unlike
   `hidden`) creates no scroll container, so the sticky header keeps
   working. */
html{ overflow-x: clip; }
body{ overflow-x: clip; max-width: 100%; }
svg{ max-width: 100%; }
img{ height: auto; }

/* ---------- reveal ----------
   main.css ships .reveal as opacity:0 + translateY (entrance choreography
   "available for future use"). That hidden state is brittle -- it depends
   on JS, confuses full-page screenshot tools, and can hide content on a
   slow load -- so it is neutralised here: every .reveal element is always
   visible and untransformed. The class stays in the markup only as a
   styling hook. */
.reveal,
.reveal.in{ opacity: 1 !important; transform: none !important; transition: none !important; }


/* ============================================================
   TYPOGRAPHY
   Colours from klouddata.com: heading #0D1B2E, body #6B7A99, Geist.
   Only the <em> emphasis inside a heading is the brand gradient --
   the rest of the heading, and every card / box title, is solid.
   Sizes:  hero h1 60 / 40   |   section h2 48 / 30
           card / box title 22   |   intro / lede 18   |   body 16
   No heading or paragraph is width-capped. Each heading context has
   its own rule below.
   ============================================================ */
:root{
  --text-primary: #0D1B2E;
  --text-secondary: #6B7A99;
  --text-muted: #8A97B8;
  --grad-heading: linear-gradient(90deg, #004195 0%, #01AEF0 85.58%);
  --grad-hero:    linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
}
body{ color: var(--text-primary); font-size: 16px; line-height: 1.65; }

/* ---------- heading scale (solid #0D1B2E) ---------- */
h1, h2, h3, h4, h5{ color: var(--text-primary); font-family: var(--font-main); font-weight: 700; margin: 0; }
h1{ font-size: 60px; line-height: 1.1;  letter-spacing: -0.5px; }
h2{ font-size: 48px; line-height: 1.15; letter-spacing: -0.4px; }
h3{ font-size: 22px; line-height: 1.35; letter-spacing: -0.3px; }
h4{ font-size: 20px; line-height: 1.4; }
h5{ font-size: 16px; line-height: 1.4; }
@media (max-width: 1024px){
  h1{ font-size: 40px; line-height: 1.18; }
  h2{ font-size: 30px; line-height: 1.25; }
}
@media (max-width: 640px){
  h1{ font-size: 40px; }
  h2{ font-size: 30px; }
  h3{ font-size: 21px; }
}

/* ---------- the gradient <em> (the "half" that's coloured) ----------
   Solid #004195 fallback first; gradient layered with background-image
   (never the `background` shorthand -- it resets background-clip) only
   where clip-to-text is supported, so the text is never invisible. */
h1 em, h2 em, h3 em{ font-style: normal; color: #004195; }
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  h1 em, h2 em, h3 em{
    background-image: var(--grad-heading);
    background-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- per-heading-context rules ---------- */

/* Home hero */
.home-hero-title{ letter-spacing: -0.6px; margin: 0 0 22px; text-wrap: balance; }
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .home-hero-title em{ background-image: var(--grad-hero); }
}

/* How It Works / Contact hero */
.svc-hero-title{ letter-spacing: -0.5px; margin: 0 0 18px; text-wrap: balance; }
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .svc-hero-title em{ background-image: var(--grad-hero); }
}

/* Industry hero */
.vert-hero-title{ letter-spacing: -0.5px; margin: 0 0 18px; text-wrap: balance; }
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .vert-hero-title em{ background-image: var(--grad-hero); }
}

/* Section heads (h2) + FAQ header (h1) */
.section-head h2{ margin: 0 0 14px; }
.faq-head h1{ margin: 0 0 14px; }

/* Problem-split panel labels: solid dark, keep the status dot, no gradient */
.panel > h3{ color: var(--text-primary); }
.panel > h3 em{ color: inherit; background: none; -webkit-text-fill-color: currentColor; }

/* Card / box titles: solid dark, no <em> */
.feature-card h3, .vert-card h3, .lane-card h3, .stage h3,
.flow-step h4, .contact-info-item h4,
.contact-form-heading, .contact-side-heading{ color: var(--text-primary); }
.feature-card h3, .vert-card h3, .lane-card h3, .stage h3{ font-size: 22px; line-height: 1.3; }

/* Dark surfaces: heading solid white; the <em> a light cyan tint */
.cta-band h1, .cta-band h2, .cta-band h3,
.vert-fits-section h2, .vert-fits-section .section-head h2{
  color: #fff; -webkit-text-fill-color: #fff; background: none;
}
.cta-band h2 em, .vert-fits-section h2 em{
  color: #7fdcff; -webkit-text-fill-color: #7fdcff; background: none;
}

/* ---------- editor line breaks: desktop only ---------- */
@media (max-width: 1024px){
  h1 br, h2 br, h3 br, h4 br,
  .section-head br, .home-hero-sub br, .svc-hero-lede br, .vert-hero .lede br,
  p br{ display: none; }
}

/* ---------- body copy (nothing width-capped) ---------- */
p{ color: var(--text-secondary); font-size: 16px; line-height: 1.7; max-width: none; }
li{ color: var(--text-secondary); font-size: 16px; line-height: 1.7; }
strong{ color: var(--text-primary); }

.section-head p,
.home-hero-sub,
.svc-hero-lede,
.vert-hero .lede{
  font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: none;
}
@media (max-width: 640px){
  .section-head p, .home-hero-sub, .svc-hero-lede, .vert-hero .lede{ font-size: 16px; }
}

/* remove every width cap on headings + their containers */
h1, h2, h3, h4,
.section-head, .section-head.center,
.svc-hero-inner, .vert-hero-inner,
.cta-band h2, .cta-band p{ max-width: none; }

.section-head{ margin-bottom: 40px; }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head.center .kicker{ display: flex; justify-content: center; }
.section-head.center p{ margin-inline: auto; }

.nav-link{ font-size: 16px; }

/* ---------- eyebrow / kicker (small uppercase label) ---------- */
.eyebrow, .kicker, .section-label{
  font-family: var(--font-main);
  font-size: 14px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--accent-blue);
}
.eyebrow{ display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; }
.eyebrow a{ color: var(--accent-blue); font-weight: 600; }
.kicker{ margin: 0 0 14px; }
@media (max-width: 640px){
  .eyebrow, .kicker, .section-label{ font-size: 13px; letter-spacing: 0.8px; }
}

/* A plain content section that follows another with no background band.
   main.css zeroes `main section + section` top padding; .section-band and
   .section-tight restore/trim their own. */
.section-band{
  background: rgba(3, 27, 66, 0.03);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Restore the top padding main.css's `main section + section` rule zeroes
   by default -- these sections each want their own rhythm above them. */
main section.section-band,
main section.section-tight,
main section.problem-section,
main section.verticals-grid-section,
main section.flow-section,
main section.vert-compare-section{ padding-top: 96px; }
main section.section-tight{ padding-top: 56px; }
/* CTA bands (Home / How It Works / vertical pages) want a lighter gap
   above them than a full section break -- just enough that they don't
   touch the section before them. */
main section.cta-section{ padding-top: 64px; }
@media (max-width: 768px){
  main section.section-band,
  main section.problem-section,
  main section.verticals-grid-section,
  main section.flow-section,
  main section.vert-compare-section{ padding-top: 64px; }
  main section.section-tight{ padding-top: 40px; }
  main section.cta-section{ padding-top: 44px; }
}

/* ---------- nav Verticals dropdown ---------- */
.nav-dropdown{ position: relative; display: flex; align-items: center; z-index: 10; }
.nav-dropdown > .nav-link{ display: inline-flex; align-items: center; gap: 4px; }
.nav-caret{ width: 12px; height: 12px; transition: transform var(--transition); }
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret,
.nav-dropdown.is-open .nav-caret{ transform: rotate(180deg); }
.nav-dropdown-panel{
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  z-index: 10; min-width: 248px;
  display: flex; flex-direction: column; gap: 2px;
  /* Solid, not var(--bg-card)'s translucent white -- this floats over
     page content (headings, etc.), so anything less than fully opaque
     lets that content ghost through behind it. */
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown.is-open .nav-dropdown-panel{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--transition), transform var(--transition);
}
.nav-dropdown-panel a{
  padding: 10px 12px; font-size: 16px; font-weight: 500; color: var(--text-secondary);
  border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-dropdown-panel a:hover{ background: var(--bg-secondary); color: var(--text-primary); }
@media (max-width: 860px){ .nav-dropdown{ display: none; } }

/* ---------- mobile menu accordion submenu ----------
   #mobileMenu's counterpart to .nav-dropdown above: a top-level item with
   children (e.g. "Verticals") renders as a button + collapsible panel
   instead of dumping every child in as flat, always-visible links with no
   way to collapse them. Collapsed by default ([hidden]); JS in main.js
   toggles it open/closed and rotates the caret, mirroring the desktop
   dropdown's own open/close behavior. */
.mobile-submenu{ border-bottom: 1px solid var(--border); }
.mobile-submenu:last-of-type{ border-bottom: none; }
.mobile-submenu-toggle{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none;
  font-family: inherit; cursor: pointer; text-align: left;
}
.mobile-submenu-toggle .nav-caret{ width: 14px; height: 14px; flex-shrink: 0; }
.mobile-submenu-toggle[aria-expanded="true"] .nav-caret{ transform: rotate(180deg); }
.mobile-submenu-panel{ display: flex; flex-direction: column; gap: 2px; padding-left: 12px; padding-bottom: 6px; }
.mobile-submenu-panel[hidden]{ display: none; }
.mobile-sublink{ font-size: 15px; color: var(--text-muted); border-bottom: none; padding: 10px 16px; }

/* ---------- hero action row + badges ---------- */
.hero-actions{
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px;
}
.home-hero .hero-actions,
.svc-hero-simple .hero-actions{ justify-content: center; }
.vert-hero .hero-actions{ justify-content: flex-start; }

.hero-badges{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
.home-hero .hero-badges,
.svc-hero-simple .hero-badges{ justify-content: center; }
.badge{
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-main); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border);
}

.btn-sm{ padding: 11px 18px; font-size: 15px; }

/* Phones: stack any hero button row and let long buttons fill the width
   instead of overflowing. */
@media (max-width: 520px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
}
/* The -2px / -1.5px display tracking is too tight once the headline
   drops to the 30px mobile size. */
@media (max-width: 640px){
  .home-hero-title,
  .svc-hero-title{ letter-spacing: -0.5px; }
  .vert-hero h1{ letter-spacing: -0.5px; }
}

/* ---------- uploaded icon images (ACF) ----------
   terra_render_icon() prints <img class="terra-icon-img"> when an icon
   image has been uploaded, otherwise the built-in inline SVG. The image
   is fitted inside the same round/square icon badge the SVG uses, so
   swapping one for the other doesn't shift the layout. */
.terra-icon-img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.feature-card-icon .terra-icon-img,
.contact-info-item .ic .terra-icon-img,
.check-card-icon .terra-icon-img{ width: 24px; height: 24px; }

/* ---------- uploaded brand logo (ACF) ---------- */
.nav-logo--img{ padding: 2px 0; }
.nav-logo-img{ height: 30px; width: auto; max-width: 200px; display: block; }
@media (max-width: 480px){ .nav-logo-img{ height: 24px; } }
.footer-brand-img{ height: 26px; width: auto; max-width: 200px; display: block; margin-bottom: 14px; }

/* ---------- stat strip ---------- */
.stat-strip{ padding: 40px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-card); }
main section.stat-strip{ padding: 40px 24px; }
.stat-grid{
  max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 900px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
@media (max-width: 460px){ .stat-grid{ grid-template-columns: 1fr; } }
.stat{ text-align: center; }
.stat .num{
  font-family: var(--font-main); font-size: 34px; font-weight: 700; letter-spacing: -1px;
  color: var(--text-primary); line-height: 1.1;
  background: linear-gradient(90deg, #004195 0%, #01AEF0 85.58%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat .label{ margin-top: 8px; font-size: 16px; color: var(--text-secondary); line-height: 1.5; }

/* ---------- problem / solution split ---------- */
.split{
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  max-width: 1280px; margin-inline: auto;
}
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } }
.panel{
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 36px);
}
.panel > h3{ margin: 0 0 16px; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; }
.panel ul{ margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 18px; line-height: 1.75; }
.panel ul li{ margin-bottom: 10px; }
.panel ul li:last-child{ margin-bottom: 0; }

/* ---------- card grids ---------- */
.card-grid{ max-width: 1280px; margin-inline: auto; display: grid; gap: 24px; }
.card-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .card-grid.cols-3{ grid-template-columns: 1fr; } }
@media (max-width: 720px){ .card-grid.cols-2{ grid-template-columns: 1fr; } }

.feature-card{
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 32px 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,40,120,0.15); border-color: var(--border-active); }
.feature-card-icon{
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent-blue-glow);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.feature-card-icon svg{ width: 24px; height: 24px; stroke: var(--accent-blue); fill: none; }
.feature-card h3{ margin: 0 0 10px; color: var(--text-primary); }
.feature-card p{ margin: 0; font-size: 18px; line-height: 1.65; }

/* ---------- checkmark cards (vertical "Where This Fits") ---------- */
.check-card{
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 22px 24px;
}
.check-card-icon{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-teal-glow);
  display: flex; align-items: center; justify-content: center;
}
.check-card-icon svg{ width: 24px; height: 24px; stroke: var(--accent-teal); fill: none; }
.check-card p{ margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }

/* ---------- pill row (vertical hero compliance pills) ---------- */
.pill-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pill{
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px;
  font-family: var(--font-main); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--btn-color);
  background: var(--accent-blue-glow); border: 1px solid var(--border-active);
}

/* ---------- comparison table ---------- */
.compare-wrap{ overflow-x: auto; padding: 0; }
.compare-table{
  width: 100%; border-collapse: collapse; font-size: 16px; min-width: 640px;
}
.compare-table th,
.compare-table td{
  text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.5;
}
.compare-table thead th{
  font-family: var(--font-main); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #6B7A99;
  background: var(--bg-secondary);
}
.compare-table thead th:last-child{ color: var(--btn-color); }
.compare-table tbody td:first-child{ font-weight: 600; color: var(--text-primary); width: 26%; }
.compare-table td.legacy{ color: #6B7A99; }
.compare-table td.terra{ color: var(--text-primary); font-weight: 500; background: var(--accent-blue-glow); }
.compare-table tbody tr:last-child td{ border-bottom: none; }

/* ---------- footer ----------
   .footer-grid / .footer-links / .footer-bottom in main.css already match
   the CodeForge microsite's footer (brand column + a row of links, a
   centered copyright bar below), and .footer-inner there is the same
   1280px width as .container/.nav-inner so the footer lines up with the
   header and sections above it. The one difference from CodeForge: TERRA's
   link row has more items (Product pages + every vertical) than
   CodeForge's 4, so with main.css's flex-wrap the whole row would drop
   below the brand block once it ran out of horizontal room. This keeps
   the brand and the link row on the same line (nowrap on the two-column
   split) and instead wraps the LINKS THEMSELVES onto a second line,
   staying pinned to the right -- "on one row, wrapping down" rather than
   the whole nav falling under the brand. Below ~760px there isn't room
   for brand + links side by side at all, so it drops back to a stacked
   layout there. */
.site-footer .footer-grid{ flex-wrap: nowrap; align-items: flex-start; }
.site-footer .footer-brand{ flex: 0 0 340px; }
.site-footer .footer-links{ flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
@media (max-width: 760px){
  .site-footer .footer-grid{ flex-wrap: wrap; }
  .site-footer .footer-brand{ flex-basis: 100%; }
  .site-footer .footer-links{ justify-content: flex-start; }
}

.rule{ border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 18px 0; }
.contact-org-line{ font-size: 15px; color: var(--text-muted); margin: 0; }

/* ============================================================
   HUB-AND-SPOKE DIAGRAM -- node rings, labels, and the hover tooltip.
   Shared by the Home hero and the How It Works diagram section. The
   diagram itself sits on a dark surface (.diagram-frame on How It
   Works; .home-hero-visual on Home) -- the one deliberately dark
   surface on an otherwise light page, same motif as CodeForge's scan
   console.
   ============================================================ */
.diagram-wrap{ position: relative; width: 100%; max-width: 480px; margin: 0 auto; }
/* overflow:hidden clips the pulsing node rings at the SVG edge so they
   can't bleed past the card (and, on a narrow phone, past the viewport).
   The tooltip is a sibling of the SVG, not a child, so it still escapes. */
.diagram-wrap svg{ width: 100%; height: auto; display: block; overflow: hidden; }
.node-label{ fill: #eaf6ff; font-family: var(--font-main); font-size: 12px; font-weight: 700; }
.node-hub-label{ fill: #fff; font-family: var(--font-main); font-size: 14px; font-weight: 700; }
.node-hub-sublabel{ fill: #9fc8ea; font-family: var(--font-main); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
.node-ring{ transform-box: fill-box; transform-origin: center; animation: terraNodePulse 3s ease-out infinite; }
@keyframes terraNodePulse{
  0%{ opacity: 0.7; transform: scale(1); }
  70%{ opacity: 0; transform: scale(1.9); }
  100%{ opacity: 0; transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce){
  .node-ring{ animation: none; }
  .diagram-wrap svg circle animateMotion{ display: none; }
}
.diagram-node{ cursor: pointer; outline: none; }
.diagram-node:focus-visible circle:first-child{ stroke: #fff; stroke-width: 2; }
.diagram-node:hover circle:first-child{ fill: #06305c; }
.diagram-tooltip{
  position: absolute; transform: translate(-50%, calc(-100% - 12px));
  background: #001233; color: #dff6ff; border: 1px solid rgba(47,230,200,0.4);
  padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.4;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition);
  z-index: 3;
}
.diagram-tooltip.is-visible{ opacity: 1; }
@media (max-width: 480px){ .diagram-tooltip{ white-space: normal; max-width: 200px; } }

/* ============================================================
   CONTENT SIZE FLOOR (last word) -- component definitions above and
   the page-specific stylesheets that load after this file both set
   their own font-size on these; this block is the single source of
   truth, per request: intro/lede copy 18px, text inside a card or
   grid box 16px, box/card titles 22px. 16px minimum on phones.
   ============================================================ */
.section-head p,
.home-hero-sub,
.svc-hero-lede,
.vert-hero .lede{ font-size: 18px !important; line-height: 1.7; }

.feature-card p,
.check-card p,
.vert-card p,
.flow-step p,
.lane-card p,
.panel p,
.panel ul li,
.split .panel ul li,
.faq-a-inner,
.faq-a-inner p,
.compare-table th,
.compare-table td,
.contact-info-item p,
.contact-side .panel > p,
.stat .label{ font-size: 16px !important; line-height: 1.6; }

.feature-card h3,
.vert-card h3,
.lane-card h3,
.stage h3{ font-size: 22px !important; line-height: 1.35; }

@media (max-width: 640px){
  .section-head p,
  .home-hero-sub,
  .svc-hero-lede,
  .vert-hero .lede{ font-size: 16px !important; }
}