/* Optimal Access Sections — scoped to .oa-section */
.oa-section {
  --ground:      #11151b;
  --ground-2:    #171d25;
  --ground-3:    #1e2630;
  --rule:        rgba(255,255,255,.10);
  --rule-strong: rgba(255,255,255,.20);

  --text:        #e8ecf1;
  --text-dim:    #9aa6b4;
  --text-faint:  #6a7686;

  --human:       #4fd1c5;   
  --machine:     #f2a93b;   
  --paper:       #f4f0e6;   
  --paper-ink:   #1a1c1a;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1200px;
}

.oa-section *, .oa-section *::before, .oa-section *::after { box-sizing:border-box; }

/* Every section paints its own dark ground and breaks out of the theme container
   so it spans the full viewport width, even inside a boxed Beaver Builder row. */
.oa-section {
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
}

/* Opt-out: add class oa-boxed to keep a section inside the row width */
.oa-section.oa-boxed {
  width: auto; max-width: none;
  margin-left: 0; margin-right: 0;
}

/* Light variant if a section should sit on paper instead of dark ground */
.oa-section.oa-light { background: var(--paper); color: var(--paper-ink); }

.oa-section img { max-width:100%; display:block; }

.oa-section a { color:inherit; }

.oa-section .wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.oa-section .eyebrow {
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 22px;
}

.oa-section .eyebrow .dot { color:var(--human); }

.oa-section h1, .oa-section h2, .oa-section h3, .oa-section .h-display {
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

.oa-section h1 { font-size:clamp(34px,4.6vw,62px); }

.oa-section h2 { font-size:clamp(28px,3.4vw,46px); }

.oa-section h3 { font-size:clamp(19px,1.5vw,23px); letter-spacing:-.015em; line-height:1.2; }

.oa-section .lede {
  font-size:clamp(17px,1.35vw,21px);
  color:var(--text-dim);
  max-width:56ch;
  text-wrap:pretty;
}

.oa-section .btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.03em;
  padding:14px 24px; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .2s, border-color .2s, color .2s;
}

.oa-section .btn-primary { background:var(--human); color:#08201e; border-color:var(--human); }

.oa-section .btn-primary:hover { transform:translateY(-2px); background:#63e0d4; }

.oa-section .btn-ghost { color:var(--text); border-color:var(--rule-strong); background:transparent; }

.oa-section .btn-ghost:hover { border-color:var(--human); color:var(--human); }

.oa-section .btn-sm { padding:10px 17px; font-size:12px; }

.oa-section .btn:focus-visible, .oa-section a:focus-visible, .oa-section button:focus-visible {
  outline:2px solid var(--human); outline-offset:3px;
}

.oa-section .hero { padding:clamp(56px,8vw,110px) 0 clamp(56px,7vw,96px); position:relative; }

.oa-section .hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 78% 12%, rgba(79,209,197,.10), transparent 62%),
    radial-gradient(700px 380px at 12% 88%, rgba(242,169,59,.06), transparent 66%);
  pointer-events:none;
}

.oa-section .hero-grid {
  position:relative;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,5vw,72px); align-items:center;
}

.oa-section h1 em {
  font-style:normal;
  background:linear-gradient(transparent 66%, rgba(79,209,197,.28) 66%);
}

.oa-section .hero .lede { margin:26px 0 0; }

.oa-section .hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

.oa-section .hero-micro {
  font-family:var(--mono); font-size:11.5px; color:var(--text-faint);
  letter-spacing:.03em; margin-top:20px;
}

.oa-section .demo { position:relative; }

.oa-section .demo-label {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint);
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px; gap:12px;
}

.oa-section .demo-label b { color:var(--text-dim); font-weight:500; }

.oa-section .card {
  background:var(--paper); color:var(--paper-ink);
  border-radius:3px; padding:26px 26px 24px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  min-height:392px;
  position:relative; overflow:hidden;
}

.oa-section .card-url {
  font-family:var(--mono); font-size:11px; color:#6d6a5f;
  border-bottom:1px solid rgba(0,0,0,.13); padding-bottom:11px; margin-bottom:18px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.oa-section .pane { display:none; }

.oa-section .pane.on { display:block; animation:paneIn .5s cubic-bezier(.2,.7,.3,1) both; }

@keyframes paneIn{ from{ opacity:0; transform:translateY(9px);} to{ opacity:1; transform:none;} }

.oa-section .raw-title {
  font-family:var(--display); font-weight:600; font-size:21px;
  line-height:1.18; letter-spacing:-.02em; margin:0 0 16px; color:#26241f;
}

.oa-section .skel { height:9px; border-radius:2px; background:rgba(0,0,0,.10); margin-bottom:10px; }

.oa-section .skel.s1 { width:100%; }

.oa-section .skel.s2 { width:94%; }

.oa-section .skel.s3 { width:97%; }

.oa-section .skel.s4 { width:72%; }

.oa-section .skel.s5 { width:88%; }

.oa-section .skel.s6 { width:60%; }

.oa-section .raw-note {
  font-family:var(--mono); font-size:11px; color:#8a8578;
  margin-top:22px; padding-top:14px; border-top:1px solid rgba(0,0,0,.10);
  line-height:1.6;
}

.oa-section .rec-headline {
  font-family:var(--display); font-weight:600; font-size:20px;
  line-height:1.2; letter-spacing:-.02em; margin:0 0 14px; color:#26241f;
}

.oa-section .rec-meta { display:flex; flex-wrap:wrap; gap:6px 20px; margin-bottom:16px; }

.oa-section .rec-meta div { font-family:var(--mono); font-size:10.5px; color:#6d6a5f; }

.oa-section .rec-meta b { color:#26241f; font-weight:500; }

.oa-section .field-tag {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#8a8578; display:block; margin-bottom:7px;
}

.oa-section .tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }

.oa-section .tag {
  font-family:var(--mono); font-size:10.5px; padding:4px 9px; border-radius:2px;
  background:rgba(24,120,110,.11); color:#12766c; border:1px solid rgba(24,120,110,.22);
}

.oa-section .desc {
  border-left:2px solid var(--machine); padding-left:14px;
  font-size:14.5px; line-height:1.58; color:#3c3930;
}

.oa-section .desc p { margin:0 0 9px; }

.oa-section .desc p:last-child { margin-bottom:0; }

.oa-section .prompt-chip {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  background:rgba(242,169,59,.15); color:#8a5a08;
  border:1px solid rgba(242,169,59,.4); padding:4px 9px; border-radius:2px;
  margin-bottom:11px;
}

.oa-section .prompt-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--machine); }

.oa-section .demo-controls { display:flex; gap:10px; margin-top:16px; align-items:center; flex-wrap:wrap; }

.oa-section .demo-hint { font-family:var(--mono); font-size:10.5px; color:var(--text-faint); }

.oa-section .legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }

.oa-section .legend span { font-family:var(--mono); font-size:10.5px; color:var(--text-faint); display:flex; align-items:center; gap:7px; }

.oa-section .legend i { width:8px; height:8px; border-radius:50%; display:inline-block; }

.oa-section .loss { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--ground-2); }

.oa-section .loss-in { padding:clamp(52px,6vw,86px) 0; }

.oa-section .loss h2 { max-width:19ch; }

.oa-section .loss-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:42px 0 34px; }

.oa-section .loss-card {
  border:1px solid var(--rule); border-radius:3px; padding:24px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), transparent);
}

.oa-section .loss-card .n {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:12px;
}

.oa-section .loss-card p { margin:0; color:var(--text-dim); font-size:16px; }

.oa-section .loss-kicker {
  font-family:var(--display); font-weight:500; font-size:clamp(19px,2.1vw,27px);
  line-height:1.32; letter-spacing:-.02em; max-width:44ch; color:var(--text);
}

.oa-section .loss-kicker b { font-weight:600; color:var(--human); }

.oa-section .stages { padding:clamp(60px,8vw,110px) 0; }

.oa-section .section-head { max-width:60ch; margin-bottom:clamp(44px,5vw,72px); }

.oa-section .section-head .lede { margin-top:18px; }

.oa-section .stage {
  display:grid; grid-template-columns:180px 1fr;
  gap:clamp(24px,4vw,56px);
  padding:44px 0; border-top:1px solid var(--rule);
}

.oa-section .stage:last-of-type { border-bottom:1px solid var(--rule); }

.oa-section .stage-mark { position:sticky; top:88px; align-self:start; }

.oa-section .stage-verb {
  font-family:var(--display); font-weight:700;
  font-size:clamp(24px,2.5vw,32px); letter-spacing:-.03em;
  line-height:1; margin-bottom:10px;
}

.oa-section .stage-1 .stage-verb { color:var(--human); }

.oa-section .stage-2 .stage-verb { color:var(--machine); }

.oa-section .stage-3 .stage-verb { color:var(--text); }

.oa-section .stage-who {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-faint);
}

.oa-section .stage-body h3 { margin-bottom:14px; }

/* Grid children default to min-width:auto. A third-party carousel can then use
   its track as the grid column's minimum size and expand the page indefinitely. */
.oa-section .stage-body { min-width:0; max-width:100%; }

.oa-section .stage-body > p { color:var(--text-dim); max-width:58ch; margin:0 0 24px; }

.oa-section .stage-list { list-style:none; padding:0; margin:0; display:grid; gap:11px; }

.oa-section .stage-list li {
  display:flex; gap:13px; align-items:flex-start;
  font-size:16px; color:var(--text-dim); line-height:1.55;
}

.oa-section .stage-list li::before {
  content:""; flex:none; width:6px; height:6px; margin-top:9px; border-radius:1px;
  background:var(--rule-strong);
}

.oa-section .stage-1 .stage-list li::before { background:var(--human); }

.oa-section .stage-2 .stage-list li::before { background:var(--machine); }

.oa-section .stage-list b { color:var(--text); font-weight:400; font-family:var(--display); font-size:15.5px; }

.oa-section .prompt-rack { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }

.oa-section .prompt-rack span {
  font-family:var(--mono); font-size:11.5px; line-height:1.4;
  padding:9px 13px; border-radius:2px;
  border:1px solid rgba(242,169,59,.26); background:rgba(242,169,59,.07);
  color:#e0b877;
}

.oa-section .stage-pull {
  margin-top:28px; padding:18px 22px; border-left:2px solid var(--rule-strong);
  font-family:var(--display); font-size:17px; font-weight:500;
  letter-spacing:-.015em; color:var(--text); line-height:1.4;
}

.oa-section .dests { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:26px; }

.oa-section .dest {
  border:1px solid var(--rule); border-radius:3px; padding:22px 20px;
  background:var(--ground-2); transition:border-color .22s, transform .22s;
}

.oa-section .dest:hover { border-color:var(--rule-strong); transform:translateY(-3px); }

.oa-section .dest-name {
  font-family:var(--display); font-weight:600; font-size:16.5px;
  letter-spacing:-.01em; margin-bottom:4px; display:flex; align-items:center; gap:9px;
}

.oa-section .dest-name em {
  font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--human);
  border:1px solid rgba(79,209,197,.3); border-radius:2px; padding:2px 6px;
}

.oa-section .dest p { margin:0; font-size:14.5px; color:var(--text-dim); line-height:1.5; }

.oa-section .wedge { background:var(--ground-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

.oa-section .wedge-in { padding:clamp(56px,7vw,96px) 0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }

.oa-section .wedge h2 { max-width:15ch; }

.oa-section .wedge p { color:var(--text-dim); max-width:52ch; margin:22px 0 0; }

.oa-section .blocked { display:grid; gap:10px; }

.oa-section .blocked-row {
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--rule); border-radius:3px; padding:15px 18px;
  background:var(--ground); font-size:15px; color:var(--text-dim);
}

.oa-section .blocked-row .x {
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#e0705f; border:1px solid rgba(224,112,95,.35); border-radius:2px;
  padding:3px 7px; flex:none;
}

.oa-section .blocked-row.ok { border-color:rgba(79,209,197,.3); background:rgba(79,209,197,.05); color:var(--text); }

.oa-section .blocked-row.ok .x { color:var(--human); border-color:rgba(79,209,197,.4); }

.oa-section .who { padding:clamp(60px,8vw,104px) 0; }

.oa-section .who-list { border-top:1px solid var(--rule); }

.oa-section .who-row {
  display:grid; grid-template-columns:.9fr 1.4fr; gap:clamp(20px,4vw,56px);
  padding:28px 0; border-bottom:1px solid var(--rule); align-items:baseline;
}

.oa-section .who-row h3 { margin:0; }

.oa-section .who-row p { margin:0; color:var(--text-dim); font-size:16px; }

.oa-section .who-row .said {
  display:block; margin-top:10px; font-family:var(--mono); font-size:11.5px;
  color:var(--text-faint); line-height:1.6;
}

.oa-section .proof { background:var(--ground-2); border-top:1px solid var(--rule); }

.oa-section .proof-in { padding:clamp(56px,7vw,96px) 0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }

.oa-section .proof .eyebrow { margin-bottom:18px; }

.oa-section .proof h2 { max-width:16ch; }

.oa-section .proof p { color:var(--text-dim); margin:22px 0 0; max-width:50ch; }

.oa-section .figure {
  border:1px solid var(--rule); border-radius:3px; padding:34px 30px; background:var(--ground);
}

.oa-section .figure .big {
  font-family:var(--display); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(46px,6vw,80px); line-height:.95; color:var(--human);
}

.oa-section .figure .big small { font-size:.34em; letter-spacing:-.01em; color:var(--text-dim); font-weight:500; }

.oa-section .figure .cap { font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin-top:14px; line-height:1.7; }

.oa-section .figure hr { border:0; border-top:1px solid var(--rule); margin:24px 0; }

.oa-section .figure .out { display:grid; gap:9px; }

.oa-section .figure .out div { font-size:15px; color:var(--text-dim); display:flex; gap:11px; }

.oa-section .figure .out div::before { content:"→"; color:var(--machine); font-family:var(--mono); }

.oa-section .cta { padding:clamp(70px,9vw,124px) 0; text-align:center; }

.oa-section .cta h2 { max-width:20ch; margin-inline:auto; }

.oa-section .cta .lede { margin:24px auto 0; }

.oa-section .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }

.oa-section .cta-steps {
  font-family:var(--mono); font-size:12px; color:var(--text-faint);
  letter-spacing:.05em; margin-top:26px;
}

.oa-section .cta-steps b { color:var(--human); font-weight:500; }

.oa-section .rv { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }

.oa-section .rv.in { opacity:1; transform:none; }

@media (max-width:900px){
  .oa-section .hero-grid, .oa-section .wedge-in, .oa-section .proof-in { grid-template-columns:1fr; }
  .oa-section .loss-cards { grid-template-columns:1fr; }
  .oa-section .stage { grid-template-columns:1fr; gap:18px; }
  .oa-section .stage-mark { position:static; display:flex; align-items:baseline; gap:14px; }
  .oa-section .stage-verb { margin-bottom:0; }
  .oa-section .dests { grid-template-columns:1fr; }
  .oa-section .who-row { grid-template-columns:1fr; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  .oa-section * { animation:none !important; transition:none !important; }
  .oa-section .rv { opacity:1; transform:none; }
}

.oa-section .vcar { margin-top:34px; }

.oa-section .vcar-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:12px;
}

.oa-section .vcar-head b { color:var(--text-dim); font-weight:500; letter-spacing:.06em; }

.oa-section .vcar-view { overflow:hidden; border:1px solid var(--rule); border-radius:3px; background:var(--ground-2); }

.oa-section .vcar-track { display:flex; transition:transform .5s cubic-bezier(.2,.7,.3,1); }

.oa-section .vcar-slide { flex:0 0 100%; min-width:0; }

.oa-section .vcar-frame {
  position:relative; aspect-ratio:16/9; background:var(--ground-3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}

.oa-section .vcar-frame video, .oa-section .vcar-frame img { width:100%; height:100%; object-fit:cover; }

.oa-section .vcar-empty {
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); text-align:center; padding:0 24px; line-height:1.9;
}

.oa-section .vcar-empty b { display:block; color:var(--human); font-weight:500; }

.oa-section .vcar-cap { padding:16px 20px; border-top:1px solid var(--rule); }

.oa-section .vcar-cap h4 {
  margin:0 0 6px; font-family:var(--display); font-weight:600; font-size:15.5px;
  letter-spacing:-.01em; color:var(--text);
}

.oa-section .vcar-cap p { margin:0; font-size:14.5px; color:var(--text-dim); line-height:1.5; }

.oa-section .vcar-nav { display:flex; align-items:center; gap:10px; margin-top:12px; }

.oa-section .vcar-btn {
  font-family:var(--mono); font-size:13px; line-height:1;
  background:transparent; color:var(--text-dim); cursor:pointer;
  border:1px solid var(--rule-strong); border-radius:2px; padding:8px 12px;
  transition:color .2s, border-color .2s;
}

.oa-section .vcar-btn:hover { color:var(--human); border-color:var(--human); }

.oa-section .vcar-dots { display:flex; gap:7px; margin-left:6px; }

.oa-section .vcar-dot {
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--rule-strong); background:transparent;
}

.oa-section .vcar-dot.on { background:var(--human); border-color:var(--human); }

.oa-section .vcar-count { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text-faint); }

.oa-section .pricing { padding:clamp(56px,7vw,104px) 0; border-top:1px solid var(--rule); background:var(--ground-2); }

.oa-section .pr-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 18px; }

.oa-section .pr-tab {
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  padding:10px 18px; border-radius:2px; cursor:pointer;
  background:transparent; color:var(--text-dim);
  border:1px solid var(--rule-strong);
  transition:color .2s, border-color .2s, background .2s;
}

.oa-section .pr-tab:hover { color:var(--text); border-color:var(--human); }

.oa-section .pr-tab.on { background:var(--human); border-color:var(--human); color:#08201e; }

.oa-section .pr-blurb { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text-faint); margin:0 0 30px; }

.oa-section .pr-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }

.oa-section .pr-grid.single { grid-template-columns:minmax(0,560px); }

.oa-section .pr-card {
  position:relative; display:flex; flex-direction:column;
  background:var(--ground-3); border:1px solid var(--rule);
  border-radius:3px; padding:26px 22px 24px;
}

.oa-section .pr-card.featured { border-color:rgba(79,209,197,.55); box-shadow:0 18px 46px -26px rgba(79,209,197,.5); }

.oa-section .pr-flag {
  position:absolute; top:-11px; left:22px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--human); color:#08201e; padding:4px 9px; border-radius:2px;
}

.oa-section .pr-card h3 { font-size:19px; }

.oa-section .pr-card h3 em { font-style:normal; color:var(--human); }

.oa-section .pr-kind { font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--text-faint); margin:8px 0 18px; }

.oa-section .pr-price { font-family:var(--display); font-weight:700; font-size:38px; letter-spacing:-.03em; line-height:1; }

.oa-section .pr-note { font-family:var(--mono); font-size:11px; color:var(--text-faint); margin:8px 0 0; }

.oa-section .pr-feats { list-style:none; padding:0; margin:20px 0 24px; flex:1; }

.oa-section .pr-feats li {
  font-size:15px; color:var(--text-dim); padding:7px 0 7px 20px; position:relative;
  border-top:1px solid var(--rule);
}

.oa-section .pr-feats li:first-child { border-top:0; }

.oa-section .pr-feats li::before {
  content:"+"; position:absolute; left:0; top:7px;
  font-family:var(--mono); font-size:12px; color:var(--human);
}

.oa-section .pr-card .btn { justify-content:center; }

.oa-section .pr-foot { font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-top:28px; letter-spacing:.02em; }

.oa-section .pr-foot b { color:var(--text-dim); font-weight:500; }

.oa-section .contact { padding:clamp(56px,7vw,104px) 0; border-top:1px solid var(--rule); }

.oa-section .contact-in { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,68px); align-items:start; }

.oa-section .ct-ways { list-style:none; padding:0; margin:30px 0 0; }

.oa-section .ct-ways li { padding:12px 0; border-top:1px solid var(--rule); color:var(--text-dim); font-size:16px; }

.oa-section .ct-ways b { color:var(--text); font-weight:500; }

.oa-section .ct-ways a { color:var(--human); text-underline-offset:3px; }

.oa-section .ct-form { background:var(--ground-2); border:1px solid var(--rule); border-radius:3px; padding:26px; }

.oa-section .ct-form-head {
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 20px;
}

.oa-section .ct-form label {
  display:block; margin-bottom:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}

.oa-section .ct-form label i { color:var(--machine); font-style:normal; }

.oa-section .ct-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.oa-section .ct-form input, .oa-section .ct-form select, .oa-section .ct-form textarea {
  display:block; width:100%; margin-top:7px;
  background:var(--ground); border:1px solid var(--rule-strong); border-radius:2px;
  color:var(--text); font-family:var(--body); font-size:16px; letter-spacing:normal; text-transform:none;
  padding:11px 12px; resize:vertical;
}

.oa-section .ct-form input:focus, .oa-section .ct-form select:focus, .oa-section .ct-form textarea:focus {
  outline:2px solid var(--human); outline-offset:1px; border-color:var(--human);
}

.oa-section .ct-form .btn { width:100%; justify-content:center; margin-top:4px; }

.oa-section .ct-micro { font-family:var(--mono); font-size:11px; color:var(--text-faint); margin:12px 0 0; }

@media (max-width:900px){
  .oa-section .pr-grid { grid-template-columns:repeat(2,1fr); }
  .oa-section .contact-in { grid-template-columns:1fr; }
}

@media (max-width:600px){
  .oa-section .pr-grid, .oa-section .pr-grid.single { grid-template-columns:1fr; }
  .oa-section .ct-row { grid-template-columns:1fr; }
}

.oa-section .pr-panel { display:none; }

.oa-section .pr-panel.on { display:block; }
/* ==========================================================
   v2.2 — theme overrides
   ========================================================== */

/* 1) Headlines: force the light ink, beating Astra / BB heading colors */
.oa-section h1, .oa-section h2, .oa-section h3,
.oa-section h4, .oa-section h5, .oa-section h6,
.oa-section .h-display,
.fl-module-content .oa-section h1, .fl-module-content .oa-section h2,
.fl-module-content .oa-section h3, .fl-module-content .oa-section h4 {
  color: var(--text) !important;
}

/* Headings that sit on the paper cards keep the dark ink */
.oa-section .card h1, .oa-section .card h2, .oa-section .card h3,
.oa-section .card h4, .oa-section .raw-title, .oa-section .rec-headline,
.oa-section.oa-light h1, .oa-section.oa-light h2, .oa-section.oa-light h3 {
  color: #26241f !important;
}

/* Slightly brighter body copy so nothing reads as muddy */
.oa-section .lede, .oa-section .loss-card p, .oa-section .stage-body > p,
.oa-section .stage-list li { color: #b6c1cd; }

/* 2) Reveal fallback: if JS never runs, content must still be visible */
.oa-section .rv { opacity: 1; transform: none; }
.oa-section.oa-js .rv { opacity: 0; transform: translateY(20px); }
.oa-section.oa-js .rv.in { opacity: 1; transform: none; }

/* 3) Kill the white gaps between sections coming from the Beaver Builder row */
.fl-row:has(.oa-section) > .fl-row-content-wrap,
.fl-col:has(.oa-section) > .fl-col-content,
.fl-module:has(.oa-section) > .fl-module-content {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--ground, #11151b) !important;
}
.fl-row:has(.oa-section),
.fl-col:has(.oa-section),
.fl-module:has(.oa-section) {
  background: #11151b !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.oa-section > section:first-child { margin-top: 0; }


/* ==========================================================
   v2.3 — shortcode / widget embeds inside a video slot
   ========================================================== */

/* Any shortcode output dropped inside .vcar-frame fills the slot */
.oa-section .vcar-frame > *:not(.vcar-empty) { width:100%; }
.oa-section .vcar-frame iframe,
.oa-section .vcar-frame video,
.oa-section .vcar-frame embed,
.oa-section .oa-embed iframe,
.oa-section .oa-embed video {
  display:block; width:100%; height:100%; min-height:320px; border:0; background:#0d1116;
}

/* Standalone slot you can drop a shortcode into anywhere in a section */
.oa-section .oa-embed {
  position:relative; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  overflow:hidden; background:#0d1116; margin:18px 0;
}
.oa-section .oa-embed.oa-embed-16x9 { aspect-ratio:16/9; }
.oa-section .oa-embed .fl-module, .oa-section .oa-embed .fl-module-content { margin:0 !important; padding:0 !important; }

/* Kurator / KBucket widget on the dark ground */
.oa-section .oa-embed .kurator-app,
.oa-section .vcar-frame [id^="kurator-app"] { width:100%; color:#e6edf5; }
.oa-section .oa-embed img { max-width:100%; height:auto; }


/* ==========================================================
   v2.4 — live widget/shortcode output inside a video slot
   A frame that holds real widget markup must not be clipped
   to a 16:9 box: the widget measures its own container and
   renders nothing (or is cut off) when we force the height.
   ========================================================== */

.oa-section .vcar-frame.oa-live,
.oa-section .vcar-frame:has(> :not(.vcar-empty)) {
  aspect-ratio:auto; height:auto; min-height:0;
  display:block; overflow:visible; padding:12px;
}
.oa-section .vcar-frame.oa-live > *,
.oa-section .vcar-frame:has(> :not(.vcar-empty)) > * { width:100%; height:auto; }

/* the carousel viewport must not clip a taller live slide either */
.oa-section .vcar.oa-has-live .vcar-view { overflow:hidden; }
.oa-section .vcar.oa-has-live .vcar-track { align-items:flex-start; }

/* generic widget output on the dark ground */
.oa-section .vcar-frame .kb-widget,
.oa-section .vcar-frame [class*="kb_widget"],
.oa-section .vcar-frame [class*="kb-widget"],
.oa-section .oa-embed .kb-widget { width:100%; color:#e6edf5; }
.oa-section .vcar-frame img, .oa-section .oa-embed img { max-width:100%; height:auto; object-fit:contain; }
.oa-section .vcar-frame a { color:#9fd8cf; }
.oa-section .oa-embed.oa-live { aspect-ratio:auto; height:auto; padding:12px; }

/* ==========================================================
   v2.6 — KBucket / slick carousel inside a video slot
   slick measures its container at init; anything that clips
   or zero-sizes the slot leaves it blank. Keep it fluid.
   ========================================================== */
.oa-section .vcar,
.oa-section .vcar-view,
.oa-section .vcar-track,
.oa-section .vcar-slide,
.oa-section .vcar-frame,
.oa-section .kb-widget-wrap,
.oa-section .kb-items-list.slick-slider,
.oa-section .kb-items-list .slick-list {
  min-width:0;
  max-width:100%;
}

.oa-section .vcar,
.oa-section .vcar-view,
.oa-section .vcar-frame,
.oa-section .kb-widget-wrap,
.oa-section .kb-items-list.slick-slider,
.oa-section .kb-items-list .slick-list { width:100%; }

.oa-section .vcar-frame .kb-widget-wrap,
.oa-section .oa-embed .kb-widget-wrap,
.oa-section .vcar-frame #kb-wrapper,
.oa-section .oa-embed #kb-wrapper { width:100%; max-width:100%; }

.oa-section .kb-items-list.slick-slider { margin:0; padding:0; list-style:none; }
.oa-section .kb-items-list .slick-list { overflow:hidden; width:100%; }
.oa-section .kb-items-list .slick-track { display:block; }
.oa-section .kb-items-list .slick-slide { float:left; height:auto; list-style:none; }
.oa-section .kb-items-list .slick-slide > div { height:100%; }
.oa-section .kb-item-inner-wrap { background:var(--ground-2); border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
.oa-section .kb-item-inner-wrap .body_wrap { padding:12px 14px; }
.oa-section .kb-item-inner-wrap h2,
.oa-section .kb-item-inner-wrap h3,
.oa-section .kb-item-inner-wrap h4 { font-size:15px; line-height:1.35; margin:0 0 6px; color:var(--text); }
.oa-section .slick-prev, .oa-section .slick-next {
  z-index:5; width:34px; height:34px; border-radius:50%; border:1px solid var(--rule);
  background:rgba(255,255,255,.06); color:var(--text); cursor:pointer;
}
.oa-section .slick-prev:before, .oa-section .slick-next:before { content:none; }
.oa-section .slick-dots li button:before { color:var(--text-dim); }
.oa-section .slick-dots li.slick-active button:before { color:var(--human); }

/* ---------- v2.7: single widget slot (the shortcode IS the carousel) ---------- */
.oa-section .oa-widget { margin-top:34px; max-width:100%; min-width:0; }
.oa-section .oa-widget-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.oa-section .oa-widget-head b { color:var(--text-dim); font-weight:500; letter-spacing:.06em; }
.oa-section .oa-widget .oa-embed {
  aspect-ratio:auto; height:auto; min-height:0;
  border:1px solid var(--rule); border-radius:3px;
  background:var(--ground-2); padding:14px; overflow:hidden;
  max-width:100%; min-width:0;
}
.oa-section .oa-widget .oa-embed > * { max-width:100%; min-width:0; }

/* ---------- v2.8: kill the white gap between the site header and the first section ---------- */
body.oa-styles-page #page,
body.oa-styles-page #content,
body.oa-styles-page .site-content,
body.oa-styles-page #primary,
body.oa-styles-page .site-main,
body.oa-styles-page .ast-container,
body.oa-styles-page .entry-content,
body.oa-styles-page .fl-builder-content { background:#11151b; }

body.oa-styles-page #content,
body.oa-styles-page .site-content,
body.oa-styles-page #primary,
body.oa-styles-page .site-main,
body.oa-styles-page .ast-container,
body.oa-styles-page .entry-content { padding-top:0; margin-top:0; }

body.oa-styles-page .ast-container { max-width:none; padding-left:0; padding-right:0; }
body.oa-styles-page .entry-header,
body.oa-styles-page .ast-single-post-order,
body.oa-styles-page .ast-archive-description { display:none; }

/* first row/section must sit flush against the header */
body.oa-styles-page .fl-builder-content > .fl-row:first-child .fl-row-content-wrap { padding-top:0; margin-top:0; }
body.oa-styles-page .oa-section:first-child { margin-top:0; }

/* ---------- v2.9: Beaver Builder keeps HTML in post meta ----------
   Directly detect an OA section in the rendered page as a reliable fallback.
   Astra's 60px vertical margin on #primary is the actual gap. */
body:has(.oa-section) #page,
body:has(.oa-section) #content,
body:has(.oa-section) .site-content,
body:has(.oa-section) #primary,
body:has(.oa-section) .site-main,
body:has(.oa-section) .ast-container,
body:has(.oa-section) .entry-content,
body:has(.oa-section) .fl-builder-content { background:#11151b; }

body:has(.oa-section) #primary {
  margin-top:0 !important;
  padding-top:0 !important;
}

body:has(.oa-section) #content,
body:has(.oa-section) .site-content,
body:has(.oa-section) .site-main,
body:has(.oa-section) .ast-container,
body:has(.oa-section) .entry-content {
  margin-top:0;
  padding-top:0;
}

body:has(.oa-section) .ast-container { max-width:none; padding-left:0; padding-right:0; }
body:has(.oa-section) .entry-header,
body:has(.oa-section) .ast-single-post-order,
body:has(.oa-section) .ast-archive-description { display:none; }

/* ==========================================================
   v3.4 — mobile responsiveness
   The full-bleed trick (width:100vw + margin-left:calc(50% - 50vw))
   breaks when the Beaver Builder row is wider than the viewport:
   the section gets pushed to the right and the copy is cut off.
   On small screens we drop the breakout and let the section stay
   inside its parent, plus hard-clip any horizontal overflow.
   ========================================================== */

body:has(.oa-section) { overflow-x: hidden !important; }
html:has(.oa-section) { overflow-x: hidden !important; max-width: 100%; }

body:has(.oa-section) .fl-row-content-wrap,
body:has(.oa-section) .fl-row-content,
body:has(.oa-section) .fl-col-content,
body:has(.oa-section) .fl-module-content {
  max-width: 100% !important;
}

@media (max-width: 900px) {
  .oa-section {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden;
  }
  .oa-section .wrap { padding-inline: 20px; max-width: 100%; }
  .oa-section h1, .oa-section h2, .oa-section h3, .oa-section .h-display {
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: pretty;
  }
  .oa-section .eyebrow { letter-spacing: .10em; overflow-wrap: anywhere; }
  .oa-section .lede { max-width: 100%; }
  .oa-section pre, .oa-section code, .oa-section table { max-width: 100%; overflow-x: auto; }
  .oa-section .btn { max-width: 100%; white-space: normal; text-align: center; }
  .oa-section .cta-row, .oa-section .hero-actions, .oa-section .hero-cta {
    flex-wrap: wrap;
  }
  .oa-section .cta-row .btn, .oa-section .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .oa-section .oa-widget, .oa-section .vcar { max-width: 100%; overflow: hidden; }
  .oa-section img, .oa-section iframe, .oa-section video { max-width: 100%; height: auto; }
}

@media (max-width: 600px) {
  .oa-section h1 { font-size: clamp(28px, 8vw, 38px); }
  .oa-section h2 { font-size: clamp(24px, 7vw, 32px); }
  .oa-section .wrap { padding-inline: 16px; }
  .oa-section .eyebrow { font-size: 10px; }
}

/* ==========================================================
   v3.5 — hard clamp on phones
   Anything inside a section (widgets, cards, builder columns)
   must stay inside the viewport; no negative margins, no
   fixed pixel widths pushing content off the left/right edge.
   ========================================================== */
@media (max-width: 900px) {
  body:has(.oa-section) .fl-row-content-wrap,
  body:has(.oa-section) .fl-row-content,
  body:has(.oa-section) .fl-col-group,
  body:has(.oa-section) .fl-col,
  body:has(.oa-section) .fl-col-content,
  body:has(.oa-section) .fl-module-content {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }
  .oa-section > *,
  .oa-section .wrap > * {
    max-width: 100%;
    min-width: 0;
  }
  .oa-section .oa-widget .oa-embed { padding: 8px; overflow: hidden; }
  .oa-section .oa-embed > *,
  .oa-section .oa-embed [class*="kb"],
  .oa-section .oa-embed .slick-list { max-width: 100% !important; }
  /* Never clamp Slick's track or slides. Slick assigns calculated inline
     widths to both; overriding them made the widget disappear on phones and
     show a partial second card at intermediate viewport widths. */
  .oa-section .oa-embed .slick-track { max-width: none !important; }
  .oa-section .oa-embed .slick-slide { max-width: none !important; }
  .oa-section [style*="width:"]:not(.slick-track):not(.slick-slide),
  .oa-section [style*="width :"]:not(.slick-track):not(.slick-slide) { max-width: 100% !important; }
}

/* ==========================================================
   v4.4 — revert the 1400px blow-up. Every section shares the
   standard 1200px measure (the "loss" width), so the hero now
   matches its neighbours instead of the other way round.
   Row overrides are skipped inside the Beaver Builder editor so
   builder blocks keep their normal editing width.
   ========================================================== */
.oa-section { --maxw: 1200px; }

body:not(.fl-builder-edit) .oa-section .wrap {
  width: 100% !important;
  max-width: var(--maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Let the section itself own the measure on the front end only. */
body:not(.fl-builder-edit) .fl-row:has(.oa-section) > .fl-row-content-wrap > .fl-row-content,
body:not(.fl-builder-edit) .fl-row:has(.oa-section) .fl-col-content,
body:not(.fl-builder-edit) .fl-row:has(.oa-section) .fl-module-content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 900px) {
  .oa-section .wrap { max-width: 100% !important; }
}