/* ============================================================
   The 2026 theme, shared by every page (Oz, 2026-10-08). StackAdapt's
   structure and feel in Genly's identity: Archivo headlines at
   weight 500, Source Sans 3 body, Genly gold pill actions, a
   near-black header and footer, navy-tinted darks, the logo's
   three colours as a section marker, and scroll motion driven by
   assets/js/motion.js.

   Loaded after site.css on all twenty pages, on <body class="theme">.
   Page-specific styling lives in home.css and assets/css/pages/.
   ============================================================ */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


body.theme {
  --sa-black: #05080F;   /* near-black with Genly navy in it */
  --sa-ink:   #F5F8FC;   /* text on dark */
  --sa-muted: #A4AFBF;   /* secondary text on dark */
  --sa-card:  #0E1726;   /* navy-tinted dark cards */
  --sa-card2: #0A111C;   /* the form card */
  --sa-line:  #1E2A3A;
  --sa-blue:  #1685C1;   /* Genly ocean, for fills and marks */
  --sa-sky:   #5FD9C7;   /* Genly teal, lifted for dark grounds */
  --sa-light: #F2F4F7;   /* Genly light gray, the one light band */
  --sa-text:  #062B59;   /* Genly navy on light */
  --sa-text2: #4A6485;   /* secondary on light */
  --sa-link:  #1375AA;   /* --ocean-ink, marks on light */
  --sa-display: 'Archivo', system-ui, sans-serif;
  --sa-body: 'Source Sans 3', 'Archivo', system-ui, sans-serif;
  --page: 1240px;


  font-family: var(--sa-body);
  font-size: 18px;
  line-height: 1.5;
}
/* The scroll thread was the previous design's motif. */
.theme .thread { display: none; }
.theme :focus-visible { outline-color: var(--gold); }

/* ---------- type ---------- */
.theme h1, .theme h2, .theme h3, .theme .h-display { font-family: var(--sa-display); font-variation-settings: "wdth" 100; }

/* ---------- the section marker ---------- */
/* Gold, green and ocean: the three strokes of the Genly mark. */
.sa-eyebrow::before, .theme .hero__eyebrow::before, .theme .label::before {
  content: ""; flex: none; width: 22px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #F2AE2E 0 33%, #1CAF69 33% 66%, #3382A7 66%);
}

/* ---------- buttons: StackAdapt's pills ---------- */
.theme .btn {
  font-family: var(--sa-body); font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  border-radius: 64px; padding: 12px 24px; border: 1px solid transparent;
}
.theme .btn--primary { background: var(--gold); color: var(--navy); }
.theme .btn--primary:hover { background: #FFC356; }
.theme .btn--ghost, .theme .hero .btn--ghost { background: transparent; color: var(--sa-ink); border-color: var(--sa-ink); }
.theme .btn--ghost:hover, .theme .hero .btn--ghost:hover { background: var(--sa-ink); color: #000; border-color: var(--sa-ink); }
.theme .btn--light { background: #FFFFFF; color: #000; }
.theme .btn--light:hover { background: var(--sa-light); }
.theme .btn-row { gap: 16px; margin-top: 36px; }


/* ---------- header and footer on every page ---------- */
.theme .site-header { background: var(--sa-black); border-bottom-color: transparent; }
.theme .nav a, .theme .nav__dropbtn { font-family: var(--sa-body); font-size: 16px; font-weight: 600; color: var(--sa-ink); }
.theme .nav a:hover, .theme .nav__dropbtn:hover { color: var(--sa-sky); }
.theme .nav__menu { background: var(--sa-card2); border-color: var(--sa-line); border-radius: 10px; }
.theme .nav__menu a:hover { background: var(--sa-card); }
.theme .nav a.btn--nav {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
  border-radius: 64px; font-size: 16px; letter-spacing: -0.01em; padding: 10px 22px;
}
.theme .nav a.btn--nav:hover { background: #FFC356; border-color: #FFC356; color: var(--navy); }
.theme .nav a.btn--nav-ghost { background: transparent; border-color: transparent; color: var(--sa-ink); padding-inline: 8px; }
.theme .nav a.btn--nav-ghost:hover { color: var(--sa-sky); text-decoration: none; background: transparent; }
@media (max-width: 940px) {
  .theme .nav { background: var(--sa-black); border-bottom-color: var(--sa-line); }
  .theme .nav > a, .theme .nav__dropbtn { border-bottom-color: var(--sa-line); }
}
.theme .site-footer { background: var(--sa-black); border-top-color: var(--sa-line); color: var(--sa-muted); font-family: var(--sa-body); }
.theme .site-footer a { color: var(--sa-muted); }
.theme .site-footer a:hover { color: var(--sa-ink); }


/* ---------- scroll motion (motion.js). Hidden states exist only when
   JavaScript is running and motion is allowed. ---------- */
/* Depth reveal (motion lab option F, approved 2026-10-08): a card rises
   from below tipped back in perspective and settles flat, like a stack
   being laid on a table. It replaced the panel wipe, which every section
   used the same way. The attribute keeps its old name, data-wipe. */
.motion-on [data-wipe] {
  opacity: 0;
  transform: perspective(1400px) translateY(44px) rotateX(11deg) scale(0.985);
  transform-origin: 50% 100%;
  transition:
    opacity 0.6s var(--ease) var(--wipe-delay, 0ms),
    transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--wipe-delay, 0ms);
}
.motion-on [data-wipe].is-in { opacity: 1; transform: none; }

/* Tilt and light (option E): motion.js tilts cards toward the pointer on
   devices that hover, and moves this soft teal light with it. */
.tilt-light {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(95,217,199,0.16), transparent 62%);
  opacity: 0; transition: opacity 0.3s;
}
.is-tilting > .tilt-light { opacity: 1; }

.motion-on [data-words] .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.1em; margin-bottom: -0.1em;
}
.motion-on [data-words] .w > span {
  display: inline-block; transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(.16, 1, .3, 1);
}
.motion-on [data-words].is-in .w > span { transform: none; }

/* A number is a row of cells, each a strip of 0-9 that rolls to its digit. */
.roll { display: inline-flex; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roll__cell { display: inline-block; height: 1.15em; overflow: hidden; }
.roll__strip {
  display: flex; flex-direction: column;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
.roll__strip > span, .roll__sym { display: block; height: 1.15em; line-height: 1.15em; }

/* ============================================================
   Shared components on the inner pages. The ground semantics of the
   previous design are kept (plain sections light, --navy sections
   dark, --gray the light band), so every rule that already picks a
   text colour by ground stays right; only the values change.
   ============================================================ */
body.theme { --rule-navy: var(--sa-line); }

/* ---------- grounds ---------- */
.theme .section--navy { background: var(--sa-black); color: var(--sa-ink); }
.theme .section--gray { background: var(--sa-light); }
.theme .section--navy .lede, .theme .on-navy .lede { color: var(--sa-muted); }

/* ---------- headings: Archivo at 500, normal width ---------- */
.theme .h-display { font-weight: 500; font-variation-settings: "wdth" 100; letter-spacing: -0.03em; line-height: 1.04; }
.theme .h-section {
  font-weight: 500; font-variation-settings: "wdth" 100;
  font-size: clamp(2rem, 3.3vw, 2.75rem); line-height: 1.12; letter-spacing: -0.028em;
  max-width: 22ch;
}
.theme .h-sub { font-weight: 500; font-variation-settings: "wdth" 100; letter-spacing: -0.02em; line-height: 1.2; }
.theme .h-card { font-family: var(--sa-body); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.theme .lede { font-size: 19px; line-height: 1.5; }

/* ---------- labels become the marked eyebrow ---------- */
.theme .label {
  font-family: var(--sa-body); font-size: 30px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--sa-link); gap: 10px;
}
.theme .section--navy .label, .theme .on-navy .label { color: var(--sa-sky); }

/* ---------- inner-page hero ---------- */
.theme .pagehero { background: var(--sa-black); }
.theme .pagehero::before {
  background:
    radial-gradient(60% 110% at 92% 8%, rgba(22,133,193,0.40), transparent 62%),
    radial-gradient(45% 80% at 68% 100%, rgba(22,168,151,0.22), transparent 66%);
}
.theme .pagehero .h-section { font-size: clamp(2.4rem, 4.2vw, 3.5rem); line-height: 1.08; max-width: 18ch; }

/* ---------- buttons by ground ---------- */
.theme .btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.theme .btn--ghost:hover { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.theme .section--navy .btn--ghost, .theme .on-navy .btn--ghost, .theme .hero .btn--ghost {
  color: var(--sa-ink); border-color: var(--sa-ink);
}
.theme .section--navy .btn--ghost:hover, .theme .on-navy .btn--ghost:hover, .theme .hero .btn--ghost:hover {
  background: var(--sa-ink); color: #05080F; border-color: var(--sa-ink);
}

/* ---------- product panels ---------- */
.theme .ui { border-radius: 12px; border-color: #E3E8EF; box-shadow: 0 24px 48px -36px rgba(6,43,89,0.35); }
.theme .ui--dark { background: var(--sa-card); border-color: var(--sa-line); box-shadow: 0 24px 48px -32px rgba(0,0,0,0.8); }
.theme .ui--dark .ui__bar, .theme .ui--dark .ui__total { background: #13203A; border-color: var(--sa-line); }
.theme .ui--dark .ui__row + .ui__row, .theme .ui--dark th, .theme .ui--dark td, .theme .ui--dark .ui__note { border-color: var(--sa-line); }

/* ---------- long-form reading ---------- */
.theme .prose { max-width: 68ch; font-size: 18px; }
.theme .prose p, .theme .prose li { line-height: 1.7; }
.theme .prose h2 { font-weight: 500; font-variation-settings: "wdth" 100; letter-spacing: -0.02em; line-height: 1.2; }
.theme .prose h3, .theme .prose h4 { font-family: var(--sa-body); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- figures and quotes ---------- */
.theme .stat__num { font-weight: 500; font-variation-settings: "wdth" 100; letter-spacing: -0.03em; }
.theme .quote blockquote { font-family: var(--sa-display); font-style: normal; font-weight: 400; letter-spacing: -0.01em; }
.theme .res__title { font-family: var(--sa-display); font-weight: 500; }

/* ---------- the closing demo section ---------- */
.theme .close .h-display { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.theme .section--navy .form__field label { color: var(--sa-ink); font-weight: 600; }
.theme .section--navy .form__field input {
  background: rgba(190, 230, 240, 0.18); color: #FFFFFF;
  border: 1px solid rgba(190, 230, 240, 0.3); border-radius: 6px; padding: 14px;
}
.theme .section--navy .form__field input::placeholder { color: rgba(226, 232, 240, 0.72); }
.theme .section--navy .form__field input:hover { border-color: rgba(190, 230, 240, 0.48); }
.theme .section--navy .form__field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.theme .section--navy .form__note { color: var(--sa-muted); }

/* Focus by ground: gold is 1.93:1 on white and the light band, so light
   grounds ring in ocean ink (5.06:1); anything dark inside them goes back
   to gold. Raised by the about, audiences and design-system builders. */
.theme .section:not(.section--navy) :focus-visible,
.theme .sa-light :focus-visible { outline-color: var(--sa-link); }
.theme .section:not(.section--navy) .on-navy :focus-visible,
.theme .section:not(.section--navy) .ui--dark :focus-visible { outline-color: var(--gold); }

/* site.css only set margin-top on .diagram, so <figure>'s default 40px
   side margins were narrowing every diagram, most on phones. */
.theme .diagram { margin-inline: 0; }

/* ============================================================
   Review round 1 (2026-10-08): one shared version of everything the
   seven page builders had each re-implemented, at the homepage's
   values. Page stylesheets keep only page-unique layouts.
   ============================================================ */
body.theme { background: var(--sa-black); }   /* overscroll and page joins stay dark */
.theme .skip { border-radius: 64px; font-family: var(--sa-body); padding: 10px 20px; }

/* ---------- rhythm ---------- */
.theme .label { margin-bottom: 16px; }
.theme .h-section { line-height: 1.14; }
.theme .section:not(.pagehero) .lede { font-size: 18px; line-height: 1.45; }

/* ---------- inner-page hero ---------- */
.theme .pagehero { padding-block: clamp(64px, 7.5vw, 104px); }
.theme .pagehero .label { margin-bottom: 20px; }
.theme .pagehero .h-section { line-height: 1.1; letter-spacing: -0.025em; }
/* The teal glow used to sit on the hero's bottom edge and was cut into a
   hard line wherever a dark section followed. Raised, and faded out
   before the edge. */
.theme .pagehero::before {
  background:
    radial-gradient(60% 110% at 92% 8%, rgba(22,133,193,0.40), transparent 62%),
    radial-gradient(45% 70% at 68% 70%, rgba(22,168,151,0.20), transparent 66%);
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

/* ---------- the closing demo card: one component on every page ----------
   The homepage's .sa-formcard, under a neutral name. Markup:
   <div class="formcard" data-wipe><div class="formcard__copy">band? over? h2 p?</div><form class="form">…</form></div> */
.theme .formcard {
  background: var(--sa-card2); border: 1px solid var(--sa-line); border-radius: 10px;
  padding: clamp(28px, 5vw, 64px);
  display: grid; gap: clamp(32px, 5vw, 64px); align-items: start;
  position: relative; overflow: hidden; text-align: left;
}
.theme .formcard::before {
  content: ""; position: absolute; left: -10%; bottom: -60%; width: 70%; height: 120%;
  background: radial-gradient(closest-side, rgba(22,168,151,0.30), transparent);
  pointer-events: none;
}
.theme .formcard > * { position: relative; min-width: 0; }
@media (min-width: 960px) { .theme .formcard { grid-template-columns: 0.9fr 1.1fr; } }
.theme .formcard__copy p { margin-top: 20px; color: var(--sa-muted); }
.theme .formcard .close__band { max-width: 360px; margin: 0 0 32px; }
.theme .formcard .close__over {
  order: 0; font-size: 18px; color: var(--sa-muted); margin: 0 0 16px;
  max-width: none; white-space: normal; text-wrap: pretty;
}
.theme .formcard .form { margin: 0; max-width: none; }
.theme .formcard .form__field label { color: var(--sa-ink); font-size: 15px; font-weight: 600; }
.theme .formcard .form__actions { justify-items: stretch; }
.theme .formcard .form__actions .btn { width: 100%; }
.theme .formcard .form__note { color: var(--sa-muted); max-width: none; font-size: 14px; }
.theme .formcard .form__done { color: var(--sa-ink); }
.theme .close { text-align: left; }
/* The closing heading at the homepage's section size, not display size. */
.theme .close .h-display {
  font-size: clamp(2rem, 3.3vw, 2.75rem); line-height: 1.14; letter-spacing: -0.028em;
  max-width: 14ch; margin: 0;
}
@media (min-width: 620px) and (max-width: 959px) {
  .theme.hiw .formcard .h-display { max-width: 18ch; }
}

/* ---------- the accordion: one component (the homepage's .sa-acc) ---------- */
.theme .faq { display: grid; gap: 12px; max-width: 860px; }
.theme .faq details { background: var(--sa-card); border: 0; border-radius: 10px; }
.theme .faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  font-family: var(--sa-body); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--sa-muted);
}
.theme .faq summary::-webkit-details-marker { display: none; }
.theme .faq summary::marker { content: ""; }
.theme .faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform 0.2s var(--ease);
}
.theme .faq summary:hover { color: var(--sa-ink); }
.theme .faq details[open] summary { color: #FFFFFF; }
.theme .faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* Ring inside the item so it never lands on the first line of the answer. */
.theme .faq summary:focus-visible { outline-offset: -3px; border-radius: 10px; }
.theme .faq details > :not(summary) { padding: 0 20px 20px; margin: 0; max-width: 68ch; color: var(--sa-muted); font-size: 17px; line-height: 1.6; }
.theme .faq details > :not(summary) a { color: var(--sa-sky); }

/* ---------- focus: dark things inside light sections ring in gold ---------- */
.theme .section:not(.section--navy) [data-ground="dark"] :focus-visible,
.theme .section:not(.section--navy) .art-cta :focus-visible,
.theme .section:not(.section--navy) .formcard :focus-visible { outline-color: var(--gold); }

/* ---------- header: where am I ---------- */
.theme .nav__dropbtn.is-current { border-bottom-color: var(--gold); }
@media (max-width: 940px) {
  /* Login lines up with the rest of the menu instead of floating centred. */
  .theme .nav a.btn--nav-ghost {
    justify-content: flex-start; text-align: left; padding-inline: 0;
    border-radius: 0; border-bottom: 1px solid var(--sa-line);
  }
  /* The current page in the open menu: a gold bar, since the underline is gone. */
  .theme .nav > a[aria-current="page"], .theme .nav__dropbtn.is-current, .theme .nav__menu a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--gold); padding-left: 14px;
  }
}

/* ---------- resource-card titles are card titles (Source Sans 600) ---------- */
.theme .res__title { font-family: var(--sa-body); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
/* site.css centres .form__done with auto margins; inside the card's grid
   cell that misplaces the thank-you note. */
.theme .formcard .form__done { margin: 0; }

/* ============================================================
   Review round 2 (2026-10-08).
   ============================================================ */
/* site.css positions the old FAQ chevron absolutely (right:4px; top:50%),
   which pulled it out of the flex row onto the card edge. */
.theme .faq summary { position: static; font-size: 22px; }
.theme .faq summary::after { position: static; right: auto; top: auto; }
/* The current page inside the open desktop dropdown, like the mobile menu. */
.theme .nav__menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); }
/* The open mobile menu holds the page still behind it (site.js sets it). */
html.nav-open { overflow: hidden; }
/* The toggle shows a close mark while the menu is open. */
.theme .nav-toggle .nav-toggle__close { display: none; }
.theme .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.theme .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ============================================================
   Review round 3 (2026-10-08): the mobile menu and phone FAQ.
   ============================================================ */
@media (max-width: 940px) {
  /* The current submenu link keeps its siblings' indent; the bar is an
     inset shadow and needs no padding of its own. */
  .theme .nav__menu a[aria-current="page"] { padding-left: 24px; }
  /* Login's transparent 2px border nudged it off the column. */
  .theme .nav a.btn--nav-ghost { border-width: 0 0 1px 0; }
  /* The open panel fills the screen under the header instead of ending
     mid-page over live content. */
  .theme .nav { min-height: calc(100vh - 96px); min-height: calc(100svh - 96px); }
}
/* Full-sentence questions at 22px wrap to three lines on a phone. */
@media (max-width: 760px) { .theme .faq summary { font-size: 19px; } }