/* Homepage products section: the guided chooser (Mark's pick, 8 October 2026).
   Loaded after home.css and motion.css on the homepage.
   Owns the po- (shared) and pb- (chooser) classes.
   The section shell (.services, .services-intro) comes from home.css unchanged. */

/* ---------- Shared ---------- */
.po-products{padding:clamp(86px,9vw,136px) 0}
.po-products .services-intro{margin-bottom:clamp(44px,5vw,72px)}
.po-products .services-intro>p{max-width:34ch}
/* Keep the new content above the section glow from home.css (.services::before). */
.pb-chooser{position:relative}

.po-nowrap{display:inline;white-space:nowrap}
.po-button{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.po-button:hover,.po-button:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--ink)}

/* Growth field: the single R10,000 price becomes the Local and National tiers. */
.growth-head:has(.growth-price--tiers){grid-template-columns:minmax(0,1fr) minmax(380px,.56fr)}
.growth-price--tiers{padding-left:26px}
.po-tiers{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.po-tier{min-width:0;display:grid;align-content:start;padding-right:20px}
.po-tier+.po-tier{padding:0 0 0 20px;border-left:1px solid rgba(16,16,15,.38)}
.growth-price .po-tier__name{margin:0 0 12px;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(16,16,15,.72)}
.growth-price .po-tier strong{font-size:clamp(2rem,2.8vw,2.9rem);line-height:.86;letter-spacing:-.06em;white-space:nowrap}
.growth-price .po-tier__for{margin:10px 0 0;font-size:.86rem;font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none;color:rgba(16,16,15,.76)}
.growth-price--tiers>span{margin-top:20px}
.growth-price--tiers>small{max-width:36ch}

/* ---------- Option B: guided chooser ---------- */
.pb-choices{min-width:0;margin:0;padding:0;border:0}
.pb-step{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:0;font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(243,239,230,.72)}
.pb-step>span{width:26px;height:26px;display:grid;place-items:center;border:1px solid currentColor;font-size:.7rem;letter-spacing:0;color:var(--paper)}
.pb-step--ink{margin-bottom:22px;color:rgba(16,16,15,.66)}
.pb-step--ink>span{color:var(--ink)}
.pb-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}
.pb-choice{position:relative;min-width:0;display:block;cursor:pointer}
.pb-choice input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pb-choice__body{
  --fg:243,239,230;
  position:relative;
  height:100%;
  min-height:206px;
  padding:28px 24px 22px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  border:1px solid rgba(243,239,230,.24);
  background:#080909;
  color:rgb(var(--fg));
  transition:background .34s cubic-bezier(.16,1,.3,1),color .34s cubic-bezier(.16,1,.3,1),border-color .34s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1);
}
.pb-choice__body::before{content:'';position:absolute;inset:-1px -1px auto;height:5px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .34s cubic-bezier(.16,1,.3,1)}
.pb-choice__body::after{content:'\2193';position:absolute;right:22px;bottom:18px;font-size:1.2rem;font-weight:800;color:var(--red);transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.pb-choice__say{max-width:13ch;font-size:clamp(1.35rem,1.9vw,1.85rem);font-weight:800;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.pb-choice__hint{max-width:30ch;font-size:.92rem;font-weight:600;line-height:1.42;color:rgba(var(--fg),.64);transition:color .34s cubic-bezier(.16,1,.3,1)}
.pb-choice__state{display:flex;align-items:center;gap:9px;font-size:.64rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;opacity:0;transition:opacity .2s ease}
.pb-choice__state i{width:9px;height:9px;background:var(--red)}
.pb-choice__state em{font-style:normal}
.pb-choice:hover .pb-choice__body,.pb-choice input:focus-visible+.pb-choice__body{--fg:16,16,15;background:var(--paper);border-color:var(--paper);transform:translateY(-5px)}
.pb-choice:hover .pb-choice__body::after,.pb-choice input:focus-visible+.pb-choice__body::after{transform:translateY(4px)}
.pb-choice input:focus-visible+.pb-choice__body{outline:3px solid var(--red);outline-offset:4px}
.pb-choice input:checked+.pb-choice__body{--fg:16,16,15;background:var(--paper);border-color:var(--paper);transform:none}
.pb-choice input:checked+.pb-choice__body::before{transform:scaleX(1)}
.pb-choice input:checked+.pb-choice__body::after{opacity:0}
.pb-choice input:checked+.pb-choice__body .pb-choice__state{opacity:1}
.pb-choice input:checked+.pb-choice__body{cursor:default}

.pb-answers{grid-column:1/-1;min-width:0;background:var(--paper);color:var(--ink)}
.pb-answer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(32px,5vw,84px);padding:clamp(30px,4.2vw,60px)}
.js .pb-answer{display:none}
.js .pb-answer.is-active{display:grid}
/* The entry animation runs only when a visitor changes their choice, then the class is removed. */
.pb-answer.is-entering{animation:pb-enter .45s cubic-bezier(.16,1,.3,1) backwards}
@keyframes pb-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pb-answer h3{max-width:14ch;margin:0;font-size:clamp(2.4rem,4.3vw,4.5rem);line-height:.88;letter-spacing:-.062em;text-wrap:balance}
.pb-answer__lead{max-width:50ch;text-wrap:pretty;margin:22px 0 0;font-size:clamp(1.04rem,1.25vw,1.18rem);font-weight:600;line-height:1.5;color:rgba(16,16,15,.8)}
.pb-answer__points{max-width:580px;list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(16,16,15,.26)}
.pb-answer__points li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid rgba(16,16,15,.15);font-size:.98rem;font-weight:650;line-height:1.4;color:rgba(16,16,15,.9)}
.pb-answer__points li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:8px;background:var(--red)}
.pb-answer__price{align-self:start;min-width:0;padding-left:24px;border-left:4px solid var(--red);display:grid;align-content:start;justify-items:start}
.pb-answer__label{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(16,16,15,.62)}
.pb-answer__big{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:clamp(2.8rem,4.6vw,4.8rem);font-weight:800;line-height:.86;letter-spacing:-.06em}
.pb-answer__big small{font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(16,16,15,.64)}
.pb-answer__big small:first-child{flex-basis:100%}
.pb-ladder{width:100%;list-style:none;margin:16px 0 0;padding:0;border-top:1px solid rgba(16,16,15,.32)}
.pb-ladder li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid rgba(16,16,15,.16);font-size:1rem;font-weight:700;line-height:1.3}
.pb-ladder b{font-size:clamp(1.5rem,2vw,2rem);font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.pb-ladder small{display:block;max-width:28ch;margin-top:4px;font-size:.8rem;font-weight:600;line-height:1.4;color:rgba(16,16,15,.62)}
.pb-answer__price .button{margin-top:30px}
/* 8 Oct 2026: no prices on the homepage. Each answer links to its service page, using the live homepage's service-page-link. */
.pb-choice-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pb-answer__price .service-page-link{margin-top:16px;font-size:.74rem;line-height:1.35}
.pb-answer__price .service-page-link+.service-page-link{margin-top:10px}
.pb-answer__price .service-page-link::after{content:' \2197'}
.growth-price--tiers .service-page-link{margin-top:18px;color:var(--ink)}
.growth-price--tiers .service-page-link::after{content:' \2197';color:var(--red)}

/* ---------- Tablet ---------- */
@media(max-width:1120px){
  .pb-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .pb-choice-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pb-choice__body{min-height:170px}
}

/* ---------- Mobile ---------- */
@media(max-width:720px){
  /* The section heading sized so "High-Performance" fits the phone width (it overflowed at 390 and 309). */
  .offer-split__intro h2{font-size:min(3.85rem,calc((100vw - 40px) / 7.8))}
  .po-products{padding:72px 0 84px}
  .po-products .services-intro{margin-bottom:44px}

  .growth-head:has(.growth-price--tiers){grid-template-columns:1fr}
  .growth-price--tiers{padding-left:18px}
  .po-tier{padding-right:14px}
  .po-tier+.po-tier{padding-left:14px}
  .growth-price .po-tier strong{font-size:2.2rem}
  .growth-price .po-tier__for{font-size:.82rem}

  .pb-choice-grid{grid-template-columns:1fr;row-gap:10px}
  .pb-choice__body{min-height:0;padding:22px 52px 20px 20px;gap:8px;grid-template-rows:auto auto auto}
  .pb-choice__body::after{top:20px;bottom:auto;right:18px}
  .pb-choice__say{max-width:none;font-size:1.4rem}
  .pb-choice__hint{font-size:.9rem}
  .pb-choice__state{display:none;margin-top:4px}
  .pb-choice input:checked+.pb-choice__body .pb-choice__state{display:flex}
  .pb-answers{margin-top:-10px}
  .pb-answer{grid-template-columns:1fr;gap:28px;padding:26px 20px 28px}
  .pb-answer h3{font-size:clamp(2.2rem,11vw,3rem)}
  .pb-answer__lead{margin-top:16px;font-size:1rem}
  .pb-answer__points{margin-top:22px}
  .pb-answer__points li{font-size:.94rem}
  .pb-answer__price{padding-left:16px}
  .pb-answer__big{font-size:3rem}
  .pb-ladder b{font-size:1.5rem}
  .pb-answer__price .button{width:100%}
}