/*
 * Traliant brand foundation — tokens and base styles.
 * Colors/type pinned to DESIGN.md (brand-faithful, Mode A);
 * :root token values lifted from the approved prototype
 * stardust/prototypes/index-proposed.html.
 */

:root {
  /* brand colors */
  --color-navy: #073060; /* brand navy: grounds, banners, headings */
  --color-accent: #6f43e8; /* cta purple: every primary action */
  --color-accent-hover: #5a35c4;
  --color-lavender: #b8a6f6; /* reserved: header "Get a free trial" only */
  --color-lavender-hover: #a58ff0;
  --color-green: #81d825; /* reserved: announcement strip only */
  --color-sky: #67cff6; /* two-tone headline words on navy; tag pill tint */
  --color-blue: #17708f; /* deep info blue: small accent text on white */
  --color-ink: #3a3a3a; /* body text; dark footer ground */
  --color-paper: #fff;
  --color-mist: #eeedf0;
  --color-tint: rgb(200 194 204 / 30%); /* tinted section ground */
  --color-border: #dee2e6; /* hairline */
  --color-field: #e9ecef; /* input fill */

  /* boilerplate color roles mapped to brand */
  --background-color: var(--color-paper);
  --light-color: var(--color-mist);
  --dark-color: var(--color-navy);
  --text-color: var(--color-ink);
  --link-color: var(--color-accent);
  --link-hover-color: var(--color-accent-hover);

  /* fonts */
  --body-font-family: figtree, figtree-fallback, sans-serif;
  --heading-font-family: figtree, figtree-fallback, sans-serif;

  /* body sizes (figtree 1.25 scale: 14/18/22/28/35/44/55) */
  --body-font-size-m: 18px;
  --body-font-size-s: 16px;
  --body-font-size-xs: 14px;

  /* heading sizes — mobile first, full scale from 900px */
  --heading-font-size-xxl: 36px; /* display */
  --heading-font-size-xl: 32px; /* headline */
  --heading-font-size-l: 28px; /* title-lg */
  --heading-font-size-m: 24px; /* title */
  --heading-font-size-s: 20px; /* card title */
  --heading-font-size-xs: 18px;

  /* shape */
  --radius: 12px; /* surfaces (cards, media) */
  --radius-control: 10px; /* buttons, inputs */
  --radius-pill: 50px; /* badges, tag pills */

  /* spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --section-padding: 40px;

  /* layout */
  --max-width: 1280px;

  /* nav height: utility row + masthead */
  --nav-height: 96px;

  /* announcement strip (server-rendered brand chrome, reserved height — F-014) */
  --announce-height: 44px;
}

/* size-adjusted local fallback to limit CLS while figtree loads */
@font-face {
  font-family: figtree-fallback;
  size-adjust: 101.53%;
  ascent-override: 93.57%;
  descent-override: 24.62%;
  line-gap-override: 0%;
  src: local('Arial');
}

@media (width >= 900px) {
  :root {
    /* heading sizes — full modular scale */
    --heading-font-size-xxl: 55px;
    --heading-font-size-xl: 44px;
    --heading-font-size-l: 35px;
    --heading-font-size-m: 28px;
    --heading-font-size-s: 22px;
    --heading-font-size-xs: 18px;
    --section-padding: 64px;
    --nav-height: 104px;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.5;
}

body.appear {
  display: block;
}

header {
  height: calc(var(--nav-height) + var(--announce-height));
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

/* skip link — first focusable element (audit F-013) */
a.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 60;
  background: var(--color-navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-control) 0;
  text-decoration: none;
}

a.skip-link:focus {
  left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  color: var(--color-navy);
  font-weight: 700;
  line-height: 1.25;
  scroll-margin: calc(var(--nav-height) + var(--announce-height) + 16px);
  text-wrap: balance;
}

/* display + headline sizes carry weight 500 per DESIGN.md */
h1 {
  font-size: var(--heading-font-size-xxl);
  font-weight: 500;
  line-height: 1.12;
}

h2 {
  font-size: var(--heading-font-size-xl);
  font-weight: 500;
  line-height: 1.18;
}

h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  text-wrap: pretty;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: var(--radius-control);
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* form fields — mist fill, visible labels (audit F-002) */
main input,
main textarea,
main select {
  background-color: var(--color-field);
  border: 0;
  border-radius: var(--radius-control);
  padding: 14px 18px;
  color: var(--text-color);
}

main label {
  display: block;
  font-size: var(--body-font-size-xs);
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 6px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons — flat, 10px radius, no shadows (DESIGN.md) */
p.button-wrapper {
  margin: 12px 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  padding: 8px 20px;
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

/* primary (strong > a): cta purple — the one ask color (F-012) */
a.button:any-link,
button.button,
a.button.primary,
button.button.primary,
a.button.accent,
button.button.accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-paper);
}

a.button:hover,
a.button:focus-visible,
button.button:hover,
button.button:focus-visible {
  border-color: var(--color-accent-hover);
  background-color: var(--color-accent-hover);
  color: var(--color-paper);
  text-decoration: none;
}

a.button.primary:focus-visible,
button.button.primary:focus-visible {
  outline-color: var(--color-navy);
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

a.button[aria-disabled="true"],
a.button[aria-disabled="true"]:hover,
button.button:disabled,
button.button:disabled:hover {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

/* secondary (em > a): ghost purple outline */
a.button.secondary,
button.button.secondary {
  border-color: var(--color-accent);
  background-color: var(--color-paper);
  color: var(--color-accent);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-paper);
}

a.button.secondary[aria-disabled="true"],
a.button.secondary[aria-disabled="true"]:hover,
button.button.secondary:disabled,
button.button.secondary:disabled:hover {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 40px 0;
}

main > .section > div {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 24px;
}

main > .section:first-of-type {
  margin-top: 0;
}

@media (width >= 900px) {
  main > .section > div {
    padding: 0 32px;
  }
}

/* section styles (section metadata Style: navy | mist | photo-band | center) */
main .section.light,
main .section.highlight,
main .section.mist {
  background-color: var(--color-tint);
  margin: 0;
  padding: var(--section-padding) 0;
}

main .section.navy {
  background-color: var(--color-navy);
  color: #fff;
  margin: 0;
  padding: var(--section-padding) 0;
}

main .section.navy h1,
main .section.navy h2,
main .section.navy h3,
main .section.navy h4,
main .section.navy h5,
main .section.navy h6 {
  color: #fff;
}

/* two-tone headline device — accent words on navy bands (Two-Moment Rule) */
main .section.navy h1 strong,
main .section.navy h2 strong {
  color: var(--color-sky);
  font-weight: inherit;
}

main .section.navy a:any-link:not(.button) {
  color: var(--color-sky);
}

/* ghost buttons invert on navy grounds */
main .section.navy a.button.secondary,
main .section.navy button.button.secondary {
  border-color: #fff;
  background-color: transparent;
  color: #fff;
}

main .section.navy a.button.secondary:hover,
main .section.navy a.button.secondary:focus-visible,
main .section.navy button.button.secondary:hover,
main .section.navy button.button.secondary:focus-visible {
  background-color: #fff;
  color: var(--color-navy);
}

/* eyebrow — <p><strong>EYEBROW</strong></p> immediately before a heading */
main .default-content-wrapper > p:has(> strong:only-child):has(+ h1, + h2, + h3) {
  font-size: var(--body-font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
}

main .default-content-wrapper > p:has(> strong:only-child):has(+ h1, + h2, + h3) strong {
  font-weight: 500;
}

/* marketing section heads are centered (matches approved home prototype); editorial
   templates (article/glossary) keep left-aligned prose subheadings. */
body:not(.article):not(.glossary) main .default-content-wrapper > h2,
body:not(.article):not(.glossary) main .default-content-wrapper > h2 + p,
body:not(.article):not(.glossary) main .default-content-wrapper > p:has(> strong:only-child):has(+ h1, + h2, + h3) {
  text-align: center;
}

/* section heads cap at 940px so long titles wrap to two balanced lines */
body:not(.article):not(.glossary) main .default-content-wrapper > h2 {
  max-width: 940px;
  margin-inline: auto;
  text-wrap: balance;
}

/* heading-only section heads get breathing room before the block that follows */
body:not(.article):not(.glossary) main .default-content-wrapper > h2:last-child {
  margin-bottom: var(--spacing-xl, 48px);
}

/* section lede (paragraph right after the head) caps at reading measure + breathing room */
body:not(.article):not(.glossary) main .default-content-wrapper > h2 + p {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--section-padding);
}

/* standalone section CTAs ("View all …") are centered on marketing templates */
body:not(.article):not(.glossary) main .default-content-wrapper > p.button-container {
  text-align: center;
}

/* eyebrow on navy grounds is lavender (the accessible purple on navy — 6.14:1) */
main .section.navy .default-content-wrapper > p:has(> strong:only-child):has(+ h1, + h2, + h3) {
  color: var(--color-lavender);
}

/* hero owns its own vertical rhythm — the containing section must not double-pad it */
main .section:has(.hero) {
  padding-block: 0;
}

/* trust bar — smaller, lighter heading; capped so it wraps to two lines
   (selector must out-specify the generic 940px section-head cap above) */
body:not(.article):not(.glossary) main .section.trust .default-content-wrapper > h2 {
  max-width: 520px;
  font-size: var(--heading-font-size-m);
  font-weight: 500;
}

/* recognition — award badges render in colour at a larger size (brand logos above stay muted) */
main .section.recognition .cards.logos img {
  height: 84px;
  filter: none;
  opacity: 1;
}

/* collapse trailing content-free sections (e.g. the metadata-only section) — no gap before footer */
main > .section:not(:has(.default-content-wrapper)):not(:has([class$="-wrapper"])):not(:has([data-block-name])) {
  display: none;
  margin: 0;
}

/* editorial templates (article/glossary): constrained reading measure (left-aligned)
   + tighter heading scale (one step down from the marketing 44/35). Prose only —
   hero, related-content, and the lead-form band stay full width. */
body.article main .default-content-wrapper,
body.glossary main .default-content-wrapper {
  max-width: 820px;
}

body.article main .default-content-wrapper > h2,
body.glossary main .default-content-wrapper > h2 {
  font-size: var(--heading-font-size-l);
}

body.article main .default-content-wrapper > h3,
body.glossary main .default-content-wrapper > h3 {
  font-size: var(--heading-font-size-m);
}

/* photo-band — navy ground; a lone authored picture becomes the band photo */
main .section.photo-band {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy);
  color: #fff;
  margin: 0;
  padding: var(--section-padding) 0;
}

main .section.photo-band > div {
  position: relative;
  z-index: 1;
}

/* split-form section: benefits left, lead form right (form-page trial split).
   Content is a normal left-aligned column here — not a centered section head. */
main .section.split-form .default-content-wrapper > h2 {
  text-align: left;
  max-width: none;
  margin-inline: 0;
}

main .section.split-form .default-content-wrapper > h2 + p {
  text-align: left;
  max-width: none;
  margin-inline: 0;
}

main .section.split-form .form {
  max-width: none;
}

@media (width >= 900px) {
  /* the section itself is the 2-col grid (benefits wrapper | form wrapper);
     reset the per-wrapper max-width/padding so they become the columns */
  main .section.split-form {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 48px;
    align-items: start;
    max-width: var(--max-width);
    margin-inline: auto;
    padding: 0 32px;
  }

  main .section.split-form > div {
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

/* quotes-band: navy testimonial section — heading full width, quotes stacked
   in the left column, the video card beside them on the right (desktop). */
main .section.quotes-band {
  background-color: var(--color-navy);
  color: #fff;
  margin: 0;
  padding: var(--section-padding) 0;
}

main .section.quotes-band h2,
main .section.quotes-band h3,
main .section.quotes-band p {
  color: #fff;
}

@media (width >= 900px) {
  main .section.quotes-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 48px;
    align-items: start;
    max-width: var(--max-width);
    margin-inline: auto;
    padding: var(--section-padding) 32px;
  }

  main .section.quotes-band > div {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  main .section.quotes-band > .default-content-wrapper {
    grid-column: 1 / -1;
  }

  main .section.quotes-band > .quote-wrapper {
    grid-column: 1;
  }

  main .section.quotes-band > .video-wrapper {
    grid-column: 2;
    grid-row: 2 / 5; /* span the three quote rows */
    align-self: center;
  }
}

/* lead form sits on the right of the photo band (matches approved prototype) */
main .section.photo-band .form-wrapper {
  display: flex;
  justify-content: flex-end;
}

main .section.photo-band .form {
  margin-inline: 0;
}

main .section.photo-band > .default-content-wrapper:has(> p:only-child > picture:only-child) {
  position: absolute;
  z-index: 0;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

main .section.photo-band > .default-content-wrapper:has(> p:only-child > picture:only-child) p {
  margin: 0;
  height: 100%;
}

main .section.photo-band > .default-content-wrapper:has(> p:only-child > picture:only-child) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* navy scrim over the band photo keeps text at AA */
main .section.photo-band > .default-content-wrapper:has(> p:only-child > picture:only-child)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(7 48 96 / 80%) 0%, rgb(7 48 96 / 60%) 100%);
}

main .section.center {
  text-align: center;
}

/* bubble motif utility — CSS circles, the captured brand signature */
.bubbles {
  position: relative;
  overflow: hidden;
}

.bubbles::before,
.bubbles::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bubbles::before {
  width: 42px;
  height: 42px;
  background: var(--color-sky);
  top: 22px;
  left: -14px;
  opacity: 0.9;
}

.bubbles::after {
  width: 56px;
  height: 56px;
  background: var(--color-green);
  right: -18px;
  bottom: 40px;
  opacity: 0.85;
}

/* card base — flat surface, hairline border (DESIGN.md) */
main .section .card {
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* tag pill — taxonomy labels at 28% sky tint */
main .section .tag-pill {
  display: inline-block;
  background: rgb(103 207 246 / 28%);
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* a11y: in-content links distinguishable without relying on color (WCAG 1.4.1) */
main .default-content-wrapper a:not(.button),
main .default-content a:not(.button),
main .accordion a:not(.button),
main .related-content a:not(.button),
main .quote a:not(.button),
main .columns a:not(.button),
main .hero .hero-lede a:not(.button),
main .hero .hero-meta a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* qa hardening: no horizontal overflow from migrated long content */
main .default-content-wrapper { overflow-wrap: anywhere; }
main .default-content-wrapper table { display: block; max-width: 100%; overflow-x: auto; }
main img { max-width: 100%; height: auto; }