/* Page A/B (page-ab.js, conversion-simplify-0930). Its own file, linked right after
   style.css, so a stale cached style.css can never show both versions at once.
   The plain variant is hidden unless the script sets data-page-ab="plain" on <html>;
   then the control part hides. */
html:not([data-page-ab="plain"]) .ab-plain { display: none !important; }
html[data-page-ab="plain"] .ab-ctl { display: none !important; }

/* /pricing.html plain variant (skills-pages-simplify-0930, live as pricing-ab-live-1001).
   One plain first screen: what it is, the price in words, one sourced number, one row
   per choice, each button the control's own link.
   a.abs-btn:link/:visited beats the site-wide a:link colour (label stays near-black). */
.abs-hero { --abs-accent: var(--green); --abs-accent-hi: #33ff66; position: relative; z-index: 1;
  padding: 104px 0 36px; text-align: left; border-bottom: 1px solid var(--border); }
.abs-hero .container { max-width: 720px; }
.abs-hero .abs-h { color: var(--white); font-size: clamp(32px, 6vw, 54px); font-weight: 800; line-height: 1.1;
  letter-spacing: -1px; margin: 0 0 16px; }
.abs-hero .abs-h span { color: var(--abs-accent); }
.abs-hero .abs-sub { color: var(--text); font-size: 18px; line-height: 1.5; margin: 0 0 22px; max-width: 30em; }
.abs-hero .abs-sub a, .abs-hero .abs-sub a:link, .abs-hero .abs-sub a:visited { color: var(--text); text-decoration: underline;
  text-decoration-color: var(--abs-accent); text-underline-offset: 3px; }
.abs-hero a.abs-btn, .abs-hero a.abs-btn:link, .abs-hero a.abs-btn:visited {
  display: inline-block; background: var(--abs-accent); color: #000; font-weight: 800; font-size: 17px;
  padding: 14px 28px; border-radius: 6px; text-decoration: none; min-height: 50px; box-sizing: border-box; }
.abs-hero a.abs-btn:hover { background: var(--abs-accent-hi); color: #000; }
.abs-hero a.abs-btn:focus-visible, .abs-hero .abs-row a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.abs-hero .abs-note { color: var(--text-dim); font-size: 14px; margin: 12px 0 0; }
.abs-hero .abs-alt { color: var(--text-dim); font-size: 14px; line-height: 1.8; margin: 14px 0 0; }
.abs-hero .abs-alt a, .abs-hero .abs-alt a:link, .abs-hero .abs-alt a:visited { color: var(--abs-accent); }

/* pricing plain: one row per choice, price left, button right */
.abs-hero .abs-rows { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; gap: 10px; }
.abs-hero .abs-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
  border: 1px solid var(--border); background: rgba(10, 15, 10, 0.85); border-radius: 8px; padding: 14px 16px; }
.abs-hero .abs-row.abs-best { border-color: var(--abs-accent); }
.abs-hero .abs-row-name { color: var(--white); font-weight: 700; font-size: 17px; margin: 0; }
.abs-hero .abs-row-price { color: var(--abs-accent); font-weight: 800; }
.abs-hero .abs-row-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #000; background: var(--abs-accent); border-radius: 3px; padding: 1px 6px; display: table; margin: 6px 0 2px; }
.abs-hero .abs-row-what { grid-column: 1; color: var(--text-dim); font-size: 14px; line-height: 1.4; margin: 0; }
.abs-hero .abs-row a.abs-btn, .abs-hero .abs-row a.abs-btn:link, .abs-hero .abs-row a.abs-btn:visited {
  grid-column: 2; grid-row: 1 / span 2; font-size: 15px; padding: 12px 16px; min-height: 46px; white-space: nowrap; }