/* ── The consumer and business OFFER blocks ─────────────────────────────
   /features/ #protections and #why, /pricing/ #offer-plan and #ways-in,
   /business/ #audiences. Built only on the --vx-* tokens (vilkax-tokens.css),
   so both themes come for free; every grid collapses to one column under
   640px and nothing sets a fixed width, so 375px never scrolls sideways.
   The cards reuse .lx-card / .ly-st / .lx-tier from launch.css + layer.css
   where the page loads them; .of-aud and .of-deal stand alone. */

.of-group{max-width:1140px;margin:46px auto 0}
.of-group-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-family:var(--vx-f-disp);font-weight:600;
  font-size:clamp(19px,2vw,23px);letter-spacing:-.01em;color:var(--vx-text);padding:0 2px}
.of-group-h small{font-family:var(--vx-f-sans,inherit);font-weight:400;font-size:14px;color:var(--vx-text-muted)}
.of-group .lx-suite{margin-top:16px}
.of-card{display:flex;flex-direction:column}
.of-card .lx-tier{max-width:calc(100% - 120px);text-align:right;white-space:normal;line-height:1.35}
.of-plats{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--vx-line)}
.of-plat{font-family:var(--vx-f-mono);font-size:10.5px;letter-spacing:.04em;padding:3px 8px;border-radius:7px;
  border:1px solid var(--vx-line-2);color:var(--vx-text);background:color-mix(in srgb,var(--vx-surface-2) 60%,transparent)}
.of-plat.part{color:var(--vx-text-muted);border-style:dashed}

/* why table */
.of-why-wrap{max-width:1140px;margin:34px auto 0}
.of-why{min-width:760px}
.of-why .of-us{color:var(--hero-br)}
.of-why tbody td.of-us{font-weight:600}
.of-why thead th:nth-child(3){color:var(--vx-text)}
.of-why thead th.of-us{color:var(--hero-br)}
.of-why .of-c-yes,.of-why .of-c-android,.of-why .of-c-pilot{color:var(--vx-mint-br)}
.of-why .of-c-no{color:var(--vx-text-dim)}
.of-why .of-c-notfound{color:var(--vx-text-dim);font-style:italic}

/* plan table group rows */
.of-plan .of-plan-g th{font-family:var(--vx-f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hero-br);padding-top:18px;background:transparent}

/* ways in */
.of-deals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;margin:34px auto 0}
.of-deal,.of-aud{position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;border-radius:18px;border:1px solid var(--vx-line);
  background:linear-gradient(165deg,color-mix(in srgb,var(--vx-surface-2) 70%,transparent),color-mix(in srgb,var(--vx-surface-1) 40%,transparent))}
.of-deal h3,.of-aud h3{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--vx-text);margin:0}
.of-deal p,.of-aud p{font-size:14px;line-height:1.6;color:var(--vx-text-muted);margin:8px 0 0}
.of-deal-cta{margin-top:auto;padding-top:14px;align-self:flex-start;font-weight:600;font-size:14px;color:var(--hero-br);
  text-decoration:underline;text-underline-offset:3px}
.of-deal-cta:focus-visible{outline:2px solid var(--hero-br);outline-offset:3px;border-radius:4px}

/* business audiences */
.of-auds{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1080px;margin:34px auto 0;text-align:left}
.of-aud .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--hero-sf,var(--vx-blue-sf));border:1px solid var(--hero-ln,var(--vx-blue-ln));color:var(--hero-br,var(--vx-blue-br))}
.of-aud .ic .icon{width:20px;height:20px}

[data-theme="light"] .of-deal,[data-theme="light"] .of-aud{background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1)}
[data-theme="light"] .of-plat{background:var(--vx-surface-1)}

@media (max-width:1080px){.of-deals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .of-deals,.of-auds{grid-template-columns:1fr;gap:10px}
  .of-deal,.of-aud{padding:18px 16px}
  .of-group{margin-top:34px}
}

/* /business/ at 375px: the fixed aurora field and the hero's core halo are
   wider than the viewport and pushed the page 17px sideways. Clip them to
   their wrappers (clip, not hidden, so no scroll container is created). */
.field,.biz-hero{overflow-x:clip}