/* Avencia corporate theme: loaded after site.css on Avencia pages only (home, website privacy, 404).
   YumBalance pages never load this file, so the product keeps its own bright style.
   Navy, warm ivory and a restrained gold; serif headlines; hairline rules instead of glows. */
:root {
  --paper: #F6F4EF;
  --paper-2: #EEEBE3;
  --surface: #FFFFFF;
  --ink: #0E1A2B;
  --ink-soft: #586273;
  --line: #DDD8CC;
  --gold: #A9884E;          /* rules, dots, large type */
  --gold-text: #7A5C26;     /* gold for small text and links: 5.5:1 on paper */
  --kcal: var(--gold-text); /* base styles use --kcal for focus rings and links */
  --band: #0E1A2B;
  --band-ink: #F3EFE6;
  --band-soft: #B6BDC9;
  --band-line: rgba(243, 239, 230, .18);
  --band-gold: #C9A96A;
  --shadow: 0 1px 2px rgba(14, 26, 43, .05), 0 12px 32px -12px rgba(14, 26, 43, .14);
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* One type scale and spacing rhythm for every Avencia page. Use these, not one-off sizes. */
  --fs-h2: clamp(36px, 4.8vw, 60px);   /* every section heading */
  --fs-h3: clamp(26px, 2.6vw, 32px);   /* card and step headings */
  --fs-h4: 24px;                       /* list and contact titles */
  --fs-lead: clamp(18px, 1.5vw, 20px); /* the paragraph that introduces a section */
  --fs-body: 16.5px;                   /* all other paragraphs and lists */
  --fs-small: 13px;                    /* fine print */
  --fs-label: 11.5px;                  /* eyebrows and step labels */
  --space-heading: 18px;               /* eyebrow to heading */
  --space-text: 16px;                  /* heading to its paragraph */
  --space-tight: 12px;                 /* small heading to its paragraph */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A111D;
    --paper-2: #0F1828;
    --surface: #111B2C;
    --ink: #ECE8DF;
    --ink-soft: #A0A8B6;
    --line: #233049;
    --gold: #C9A96A;
    --gold-text: #D4B67A;
    --band: #111B2C;
    --band-ink: #ECE8DF;
    --band-soft: #A0A8B6;
    --band-line: #2A3852;
    --band-gold: #D4B67A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --paper: #0A111D;
  --paper-2: #0F1828;
  --surface: #111B2C;
  --ink: #ECE8DF;
  --ink-soft: #A0A8B6;
  --line: #233049;
  --gold: #C9A96A;
  --gold-text: #D4B67A;
  --band: #111B2C;
  --band-ink: #ECE8DF;
  --band-soft: #A0A8B6;
  --band-line: #2A3852;
  --band-gold: #D4B67A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
}

/* ---------- base ---------- */
body { font-size: var(--fs-body); line-height: 1.7; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.012em; line-height: 1.06; }
.eyebrow { font-family: var(--body); font-weight: 600; font-size: var(--fs-label); letter-spacing: .2em; color: var(--gold-text); }
.aurora, .grain { display: none; }
.grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-text); animation: none; font-style: italic; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); }

/* ---------- nav ---------- */
.nav { background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom: 1px solid var(--line); }
.nav .wrap { padding-block: 16px; }
.brand { font-family: var(--display); font-weight: 400; font-size: 27px; letter-spacing: .005em; gap: 9px; }
.nav-links { gap: 30px; font-weight: 500; font-size: 14.5px; }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.menu summary { border-radius: 6px; }
.menu-panel { border-radius: 10px; }
.menu-panel a { border-radius: 6px; font-weight: 500; }

/* ---------- buttons ---------- */
.btn { border-radius: 6px; font: 600 15px/1 var(--body); letter-spacing: .01em; padding: 15px 24px; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--ink) 86%, var(--gold)); }
.btn-ghost { background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); }
.btn-ghost:hover { transform: none; border-color: var(--ink); }
.nav .btn { padding: 11px 18px; font-size: 14px; }

/* ---------- shared pieces ---------- */
.wrap { max-width: 1200px; }
.av-kicker { display: flex; align-items: center; gap: 14px; }
.av-kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold); flex: none; }
.av-section { padding-block: clamp(80px, 10vw, 136px); border-top: 1px solid var(--line); }
.av-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(44px, 6vw, 72px); }
.av-head h2 { font-size: var(--fs-h2); margin-top: var(--space-heading); max-width: 16ch; }
.av-head > p { color: var(--ink-soft); max-width: 46ch; font-size: var(--fs-lead); justify-self: end; }

/* ---------- hero: dark, with a live signal field (assets/field.js) ---------- */
.av-hero { position: relative; overflow: hidden; isolation: isolate; background:
  radial-gradient(120% 90% at 85% 10%, #16294A 0%, transparent 60%), #08111F; color: #F3EFE6; }
.av-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.av-hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #08111F 0%, rgba(8, 17, 31, .78) 30%, rgba(8, 17, 31, 0) 62%),
              linear-gradient(0deg, #08111F 0%, rgba(8, 17, 31, 0) 22%); }
.av-hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(72px, 10vw, 140px); min-height: min(820px, 90vh); }
.av-hero-copy { max-width: 760px; }
.av-hero .eyebrow { color: #C9A96A; }
.av-hero .av-kicker::before { background: #C9A96A; }
.av-hero h1 { font-size: clamp(48px, 7.6vw, 108px); line-height: .96; letter-spacing: -0.024em; margin-top: 26px; color: #F3EFE6; }
.av-hero h1 em { font-style: italic; color: #D4B67A; }
.av-hero h1 .l { display: block; white-space: nowrap; }
.av-hero .lede { color: #AEB6C4; font-size: var(--fs-lead); max-width: 50ch; margin-top: 28px; }
.av-hero .lede strong { color: #F3EFE6; font-weight: 600; }
.av-hero .cta-row { margin-top: 40px; }
.btn-gold { background: #C9A96A; color: #0E1A2B; }
.btn-gold:hover { background: #D9BC82; }
.btn-line { background: transparent; color: #F3EFE6; border: 1px solid rgba(243, 239, 230, .28); }
.btn-line:hover { border-color: #F3EFE6; }
/* 3D capability core (assets/core.js) */
.av-core { position: relative; width: 100%; aspect-ratio: 1; max-width: 560px; justify-self: end; }
.av-core-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.av-core-labels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: absolute; left: 0; right: 0; bottom: 0; }
/* Captions: uppercase gold, glowing like the graphic they label. */
.av-core-labels li { font-family: var(--mono); font-size: 17px; font-weight: 700; color: #F1D18A; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  text-shadow: 0 0 6px rgba(240, 200, 120, .8), 0 0 16px rgba(226, 180, 90, .5), 0 0 30px rgba(201, 169, 106, .35); }
.av-core.is-live .av-core-labels { display: block; inset: 0; }
.av-core.is-live .av-core-labels li { position: absolute; left: 0; top: 0; padding: 7px 12px; border: 1px solid rgba(233, 199, 123, .75); border-radius: 4px;
  box-shadow: 0 0 14px rgba(226, 180, 90, .4), 0 0 34px rgba(201, 169, 106, .2), inset 0 0 12px rgba(233, 199, 123, .14);
  background: rgba(8, 17, 31, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); will-change: transform, opacity; }

/* ---------- how YumBalance works: four-step flow, inside the Featured section ---------- */
.av-how { margin-top: clamp(56px, 7vw, 88px); max-width: 62ch; }
.av-how h3 { font-size: var(--fs-h3); }
.av-how p { color: var(--ink-soft); margin-top: var(--space-text); font-size: var(--fs-lead); }
.av-how + .av-flow { margin-top: clamp(32px, 4vw, 48px); }
.av-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.av-flow-line { position: absolute; left: 0; top: 0; width: 75%; height: 40px; overflow: visible; pointer-events: none; }
.av-flow-line path { fill: none; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.av-node { position: relative; padding: 52px 28px 8px 0; }
.av-node::before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--gold); }
.av-node::after { content: ""; position: absolute; left: 4.5px; top: 17.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.av-node-id { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.av-node h3 { font-size: var(--fs-h3); margin-top: var(--space-tight); }
.av-node p { color: var(--ink-soft); margin-top: var(--space-tight); max-width: 30ch; }
/* Pictures line up along the bottom of the row whatever the text length above them. */
.av-node { display: flex; flex-direction: column; }
.av-node p { margin-bottom: 18px; }
/* A picture of each step: real app screens, and a camera view for step 1. */
.av-node-pic { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 780 / 400; margin-top: auto; border-radius: 12px;
  border: 1px solid var(--line); background: #F4F5F8; box-shadow: var(--shadow); object-fit: cover; object-position: top; }
.av-node-cam { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #2A3142, #12161F); overflow: hidden; }
.av-node-cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-node-cam .c { z-index: 1; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .5)); }
.av-node-cam .c { position: absolute; width: 18px; height: 18px; border-color: #fff; border-style: solid; border-width: 0; }
.av-node-cam .tl { top: 12%; left: 12%; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.av-node-cam .tr { top: 12%; right: 12%; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.av-node-cam .bl { bottom: 12%; left: 12%; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.av-node-cam .br { bottom: 12%; right: 12%; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

/* ---------- product: phone with the real YumBalance layout ---------- */
.av-phone { width: min(300px, 82vw); aspect-ratio: 300 / 610; justify-self: center; border-radius: 46px; padding: 10px;
  background: linear-gradient(145deg, #2A3448, #0B111C); box-shadow: 0 40px 80px -30px rgba(14, 26, 43, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.av-phone-screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #FAF9FF; color: #141629; padding: 52px 18px 18px; font-family: var(--body); }
.av-phone-island { position: absolute; top: 11px; left: 50%; translate: -50% 0; width: 88px; height: 24px; border-radius: 20px; background: #0B111C; }
/* The phone in the Featured card plays the real app demo (assets/demo-video.js). */
.av-phone-video { position: relative; margin: 0 0 52px; aspect-ratio: 300 / 660; }
.av-phone-video .av-phone-screen { padding: 34px 0 0; background: #F4F5F8; }
.av-demo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.av-demo-toggle { position: absolute; left: 50%; bottom: -46px; translate: -50% 0; font: 600 var(--fs-small)/1 var(--body); color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.av-demo-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Seven real app screens under the Featured card: two rows on desktop, a swipeable row on smaller screens. */
.av-gallery { margin-top: clamp(56px, 7vw, 88px); }
.av-gallery-head h3 { font-size: var(--fs-h3); }
.av-gallery-head p { color: var(--ink-soft); margin-top: var(--space-text); font-size: var(--fs-lead); }
.av-shots { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 40px) clamp(14px, 2vw, 24px); }
.av-shots figure { margin: 0; }
.av-shots img { display: block; width: 100%; height: auto; border-radius: 22px; border: 6px solid #0B111C; background: #F4F5F8; box-shadow: var(--shadow); }
.av-shots figcaption { margin-top: 14px; color: var(--ink-soft); line-height: 1.5; }
.av-shots figcaption b { display: block; color: var(--ink); font-weight: 600; }
.yb-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #545873; }
.yb-big { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-top: 6px; }
.yb-big span { font-size: 12px; font-weight: 600; letter-spacing: 0; color: #545873; }
.yb-bar { height: 7px; border-radius: 9px; background: #ECE9F7; margin-top: 12px; overflow: hidden; }
.yb-bar i { display: block; height: 100%; border-radius: 9px; background: #4C6FFF; }
.yb-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; font-size: 10.5px; color: #545873; }
.yb-stats b { display: block; font-family: var(--mono); font-size: 13px; color: #141629; }
.yb-card { margin-top: 16px; border: 1px solid #E3E0F2; border-radius: 16px; padding: 12px; background: #fff; }
.yb-card-t { font-size: 12.5px; font-weight: 700; }
.yb-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.yb-macros span { font-size: 10px; color: #545873; border-top: 3px solid var(--c); padding-top: 6px; }
.yb-macros b { display: block; font-family: var(--mono); font-size: 13px; color: #141629; }
.yb-verdict { display: flex; gap: 8px; align-items: center; font-size: 10.5px; margin-top: 9px; color: #141629; }
.yb-verdict i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--mono); color: #fff; background: #1F8A5E; flex: none; }
.yb-verdict.caution i { background: #B7791F; }

/* ---------- about: three pillars ---------- */
.av-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.av-pillar { border-top: 1px solid var(--ink); padding-top: 26px; }
.av-pillar h3 { font-size: var(--fs-h3); }
.av-intro { font-size: var(--fs-lead); line-height: 1.6; max-width: 62ch; margin: 0 0 clamp(36px, 4vw, 56px); }
.av-pillar p { color: var(--ink-soft); margin-top: var(--space-tight); }

/* ---------- approach band ---------- */
.av-band { background: var(--band); color: var(--band-ink); padding-block: clamp(80px, 10vw, 136px); border-block: 1px solid var(--line); }
.av-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.av-band .eyebrow { color: var(--band-gold); }
.av-band .av-kicker::before { background: var(--band-gold); }
.av-band h2 { font-size: var(--fs-h2); margin-top: var(--space-heading); color: var(--band-ink); }
.av-band h2 em { font-style: italic; color: var(--band-gold); }
.av-band p { color: var(--band-soft); font-size: var(--fs-lead); margin-top: var(--space-text); max-width: 46ch; }
.av-list { list-style: none; margin: 0; padding: 0; display: grid; }
.av-list li { padding-block: 22px; border-top: 1px solid var(--band-line); display: grid; gap: 6px; }
.av-list li:last-child { border-bottom: 1px solid var(--band-line); }
.av-list b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h4); color: var(--band-ink); }
.av-list span { color: var(--band-soft); }

/* ---------- products ---------- */
.av-product { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(28px, 5vw, 60px); box-shadow: var(--shadow); }
.av-product .p-brand { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.av-product .p-brand h3 { font-size: clamp(34px, 3.8vw, 48px); }
.av-product .tagline { font-family: var(--display); font-style: italic; font-size: var(--fs-h4); margin-top: var(--space-tight); }
.av-product .desc { color: var(--ink-soft); margin-top: var(--space-text); max-width: 54ch; }
.av-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.av-ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.av-ticks li::before { content: ""; width: 12px; height: 1px; background: var(--gold); margin-top: 13px; }
.av-product .links-row a { text-underline-offset: 4px; }
.av-product .tile { aspect-ratio: 1; width: min(340px, 100%); justify-self: center; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; padding: 14%; }
.av-product .tile svg { width: 100%; height: auto; }
.av-product .tile .ring-track { stroke: var(--line); }

/* ---------- newsletter ---------- */
.av-news { background: var(--band); color: var(--band-ink); border-radius: 14px; padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: end; border: 1px solid var(--line); }
.av-news .eyebrow { color: var(--band-gold); }
.av-news .av-kicker::before { background: var(--band-gold); }
.av-news h2 { font-size: var(--fs-h2); margin-top: var(--space-heading); color: var(--band-ink); }
.av-news > div > p { color: var(--band-soft); margin-top: var(--space-text); font-size: var(--fs-lead); max-width: 44ch; }
.av-news .newsletter-form { margin-top: 0; max-width: none; }
.av-news .newsletter-form .input { background: transparent; color: var(--band-ink); border: 1px solid var(--band-line); border-radius: 6px; }
.av-news .newsletter-form .input::placeholder { color: color-mix(in srgb, var(--band-ink) 50%, transparent); }
.av-news .newsletter-form .input:focus { outline: 2px solid var(--band-gold); border-color: var(--band-gold); }
.av-news .btn-ink { background: var(--band-ink); color: var(--band); }
.av-news .btn-ink:hover { background: var(--band-gold); color: #0E1A2B; }
.av-news .fine { margin-top: 14px; font-size: var(--fs-small); color: var(--band-soft); }
.av-news .fine a { color: inherit; text-underline-offset: 3px; }
.av-news .notice { margin-top: 14px; color: var(--ink); }

/* ---------- contact ---------- */
.contact-grid { gap: 0; border-top: 1px solid var(--ink); }
.contact-card { border: 0; border-radius: 0; background: transparent; padding: 28px 28px 8px 0; }
.contact-card + .contact-card { border-left: 1px solid var(--line); padding-left: 28px; }
.contact-card h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h4); letter-spacing: -0.005em; }
.contact-card a.strong { font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--gold); }

/* ---------- inner pages (website privacy, 404) ---------- */
.page-hero { border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-block: clamp(56px, 8vw, 96px) clamp(36px, 5vw, 56px); }
.page-hero h1 { font-weight: 400; font-size: clamp(42px, 5.6vw, 72px); letter-spacing: -0.015em; }
.doc-meta { font-family: var(--body); }
.doc h2 { font-weight: 400; font-size: var(--fs-h3); margin-top: 48px; letter-spacing: -0.005em; }
.doc a { color: var(--gold-text); }
.toc { border-radius: 10px; }
.toc a { color: var(--ink-soft); }
.callout { border-radius: 10px; background: var(--surface); border-left: 3px solid var(--gold); }
.notice { border-radius: 8px; }
.input { border-radius: 6px; }
.input:focus { outline: 2px solid color-mix(in srgb, var(--gold) 60%, transparent); border-color: var(--gold); }
.linkish { color: var(--gold-text); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); background: var(--paper-2); margin-top: 0; }
footer .brand { font-size: 24px !important; }
footer h2 { font-family: var(--body); font-size: 11px; letter-spacing: .2em; font-weight: 600; }
footer .legal { font-size: var(--fs-small); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .av-band .wrap, .av-product, .av-news, .av-head, .av-hero .wrap { grid-template-columns: 1fr; }
  .av-hero .wrap { min-height: 0; }
  .av-core { justify-self: center; max-width: 440px; }
  .av-flow { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .av-flow-line { display: none; }
  .av-hero-shade { background: linear-gradient(180deg, rgba(8, 17, 31, .35) 0%, rgba(8, 17, 31, .7) 55%, rgba(8, 17, 31, .9) 100%); }
  .av-head > p { justify-self: start; }
  .av-pillars { grid-template-columns: 1fr; }
  .contact-card + .contact-card { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  /* Screens become a swipeable row instead of squeezing five across. */
  .av-shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .av-shots li { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .av-shots { grid-auto-columns: 68%; }
  .av-core-labels li { font-size: 13.5px; letter-spacing: .08em; }
  .av-flow { grid-template-columns: 1fr; }
}

/* company details under the contact columns */
.av-company { margin-top: 40px; font-family: var(--mono); font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink-soft); }
.av-company a { color: inherit; text-underline-offset: 3px; }

/* Shared pieces from site.css, put on the Avencia type scale. */
.contact-card p, .doc p, .doc li, .notice { font-size: var(--fs-body); }
.page-hero .lede { font-size: var(--fs-lead); }
.doc h3 { font-size: var(--fs-h4); }
.links-row, .doc-meta { font-size: var(--fs-small); }

/* The four YumBalance steps and the Explore button run full width across the bottom of the Featured card. */
.av-product-how, .av-product-cta { grid-column: 1 / -1; }
.av-product-how { border-top: 1px solid var(--line); padding-top: clamp(32px, 4vw, 48px); }
.av-product-how .av-how { margin-top: 0; }
.av-product-cta .cta-row { margin-top: 0; }