/* Offer pages (generated by ops/build_offer_pages.py). Layout only; every color, size and
   radius comes from ka.css tokens. */

/* sections sit closer together than the default --sec rhythm */
.pg-offer main>section:not(.hero){padding-bottom:clamp(48px,6vw,80px)}
.pg-offer main>section.sec-flush:last-child{padding-bottom:clamp(56px,7vw,96px)}

.pg-offer .hero h1{max-width:22ch}
.pg-offer .hero .kicker span{color:var(--mut);margin:0 .2em}

/* what you get, when the items are not a sequence */
.gets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.get{padding:24px 26px}
.get .when{font:700 var(--fs-xs)/1.3 var(--sans);color:var(--blue);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.get h3{font-size:var(--fs-xl);margin-bottom:6px}
.get p{font-size:var(--fs-ui);color:var(--body)}
@media (max-width:760px){.gets{grid-template-columns:1fr;gap:12px}.get{padding:20px}}

.pg-offer .steps{margin-top:32px}
@media (min-width:861px){.pg-offer .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.pg-offer .tiers{margin-top:28px}
.pg-offer .tier-price{font-size:var(--fs-2xl)}
.pg-offer ul.terms{margin-top:28px}

/* ---------- right under the hero: Built for, and Why it's worth it (offer "for" and "value") ---------- */
.fit{display:grid;gap:16px}
.fit>.card{padding:clamp(22px,2.6vw,30px)}
.fit-h{font-size:var(--fs-xl);margin-bottom:14px}
.fit-for .checks li{font-size:var(--fs-ui)}
@media (min-width:861px){
  .fit.has-val{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .fit:not(.has-val) .fit-for .checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}
}
/* today, then after: two rows joined by a small arrow */
.ba{display:grid;gap:12px}
.ba-row{position:relative;display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:14px 16px;border-radius:var(--r-sm)}
.ba-now{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.ba-after{background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line)}
.ba-k{margin:0;font:700 var(--fs-xs)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.ba-after .ba-k{color:var(--blue)}
.ba-t{margin:0;font-size:var(--fs-ui);line-height:1.55;color:var(--body);text-wrap:pretty}
.ba-after .ba-t{color:var(--ink)}
.ba-after::before{content:"";position:absolute;z-index:1;left:22px;top:-18px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--tint-line)}
.ba-after::after{content:"";position:absolute;z-index:1;left:30px;top:-13px;width:8px;height:14px;background:var(--blue);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;rotate:90deg}
@media (max-width:520px){.ba-row{grid-template-columns:minmax(0,1fr)}}

/* the side note under What you get: what done means, Tyler's record, or why now */
.offer-side{margin-top:24px;max-width:860px;padding:18px 22px 10px;border-radius:var(--r);background:var(--tint);border:1px solid var(--tint-line)}
.offer-side h3{margin:0 0 8px;font:700 var(--fs-xs)/1.25 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--blue)}
.offer-side p{margin-bottom:10px;font-size:var(--fs-ui);line-height:1.6;color:var(--body);max-width:72ch}

/* ---------- disclosures: closed by default, a chevron that turns, the 2px focus ring ----------
   .disc is the bare version (What's included, inside a card); .disc-row a full row (What the monthly fee
   covers, Payment and terms). Opening settles the text in like an FAQ answer; nothing moves under reduced
   motion. */
.disc>summary{display:flex;align-items:center;gap:10px;min-height:44px;list-style:none;cursor:pointer;font:600 var(--fs-ui)/1.3 var(--sans);color:var(--blue);-webkit-tap-highlight-color:transparent;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::before{content:"";flex:none;width:8px;height:14px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:rotate var(--dur-ui) var(--ease-ui)}
.disc[open]>summary::before{rotate:90deg}
.disc>summary:hover{color:var(--ink)}
.disc>summary:focus-visible{border-radius:8px}
.disc-b{padding-bottom:16px}
.disc-b p{font-size:var(--fs-ui);line-height:1.6;color:var(--body);max-width:72ch}
.disc-b .checks li{font-size:var(--fs-ui);line-height:1.55}
.disc-row{max-width:860px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--sh)}
.disc-row>summary{min-height:52px;padding:4px 18px;border-radius:calc(var(--r-sm) - 1px)}
.disc-row>summary:active{background:var(--tint)}
.disc-row>summary:focus-visible{outline-offset:-2px}
.disc-row>.disc-b{padding:2px 20px 20px 36px}
@media (max-width:520px){.disc-row>.disc-b{padding-left:20px}}
@media (prefers-reduced-motion:no-preference){
  .disc[open]>.disc-b{animation:ka-drop var(--dur-ui) var(--ease-out) backwards}
  @supports (interpolate-size:allow-keywords){
    .disc{interpolate-size:allow-keywords}
    .disc::details-content{block-size:0;overflow-y:clip;transition:block-size var(--dur-ui) var(--ease-io),content-visibility var(--dur-ui) allow-discrete}
    .disc[open]::details-content{block-size:auto}
  }
}

/* ---------- the price section: one to three version cards ----------
   Each card, top to bottom: For, name, price, the range line, "+ $X a month", build time, one line, then
   What's included (closed). The name is first in the source and the For line is drawn above it. Side by
   side, the cards share their rows (subgrid), so every price and monthly fee sits on one line. */
.price-sec .h2{margin-bottom:12px}
.fee-x{margin-top:22px;background:var(--tint);border-color:var(--tint-line);box-shadow:none}
.fee-x>summary:active{background:var(--tint-2)}
.vers{display:grid;gap:16px;margin-top:24px;align-items:stretch}
@media (min-width:700px){.vers.n2,.vers.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.vers.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ver{display:flex;flex-direction:column;padding:24px 24px 6px}
.ver-for{order:-1;margin:0 0 8px;font:700 var(--fs-xs)/1.35 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--blue)}
.ver-name{font:600 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.ver-price{margin-top:12px;font:700 var(--fs-3xl)/1.1 var(--disp);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.ver-price .from,.ver-price .per{font:500 var(--fs-sm)/1 var(--sans);letter-spacing:0;color:var(--mut)}
.ver-price .from{margin-right:6px}
.ver-price .per{margin-left:6px}
.ver-note{margin-top:6px;font-size:var(--fs-sm);line-height:1.45;color:var(--mut)}
.ver-mo{margin-top:10px;font:600 var(--fs-ui)/1.35 var(--sans);color:var(--blue);font-variant-numeric:tabular-nums}
.ver-mo.is-none{font-weight:500;color:var(--mut)}
.ver-wk{margin-top:2px;font-size:var(--fs-sm);line-height:1.45;color:var(--mut)}
.ver-line{margin-top:14px;font-size:var(--fs-ui);line-height:1.55;color:var(--body)}
.ver-inc{margin-top:auto;padding-top:16px}
.ver-inc>summary{border-top:1px solid var(--line)}
.ver-inc .disc-b .checks{gap:6px}
.ver-inc .disc-b .checks li{font-size:var(--fs-sm)}
.ver-y1{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.ver-y1 span{color:var(--mut)}
.ver-y1 b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ver-y1n{margin:6px 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
@supports (grid-template-rows:subgrid){
  @media (min-width:700px){
    .vers:not(.n1) .ver{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0}
    .ver-for{grid-row:1}.ver-name{grid-row:2}.ver-price{grid-row:3}.ver-note{grid-row:4}
    .ver-mo{grid-row:5}.ver-wk{grid-row:6}.ver-line{grid-row:7}.ver-inc{grid-row:8;align-self:end}
  }
}
/* one card: the price on the left, what it is on the right, as wide as the rows under it */
.vers.n1{max-width:860px}
@media (min-width:700px){
  .vers.n1 .ver{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:36px;padding-bottom:20px}
  .vers.n1 .ver>*{grid-column:1}
  .vers.n1 .ver-line,.vers.n1 .ver-inc{grid-column:2;margin-top:0;padding-left:36px;border-left:1px solid var(--line)}
  .vers.n1 .ver-line{grid-row:1 / span 5;align-self:center}
  .vers.n1 .ver-inc{grid-row:6 / span 3;padding-top:0}
}
/* the start-smaller line, then payment and terms */
.entry{max-width:860px;margin-top:20px;padding:14px 18px;border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--fs-ui);line-height:1.6;color:var(--body)}
.entry b{font-weight:600;color:var(--ink)}
.terms-x{margin-top:12px}
.terms-x .checks{gap:10px}
.disc-b .terms-note{margin-top:12px;font-size:var(--fs-sm);color:var(--mut)}

.pg-offer .twocol{margin-top:36px}
.pg-offer .twocol .checks li{font-size:var(--fs-ui)}
.pg-offer .twocol p{font-size:var(--fs-ui)}
.pg-offer .twocol p+p{margin-top:10px}
@media (max-width:760px){.pg-offer .twocol .card{padding:22px 20px}}

/* data handling and who does the work */
/* the wrap keeps the 1120px grid (left edge in line with every other section); the boxes cap at 860px */
.trust{display:grid;gap:16px}
.trust>.data-box{max-width:860px}

/* after the FAQ: process links and related services */
.pg-offer .faq{margin-top:24px}
.offer-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:18px}
.related{margin-top:48px;max-width:640px}
.related h2{font-size:var(--fs-xl);margin-bottom:14px}
/* a.more is inline-flex in ka.css; when it wraps inside a card, keep the arrow after the text */
.pg-offer .card a.more{display:block;min-height:0;padding:6px 0}
.pg-offer .card a.more::after{margin-left:6px}
/* who leads it, on the first screen (pages with a "Who leads it" card; ops/build_offer_pages.py hero_lead_html) */
.hero-lead{display:flex;align-items:center;gap:12px;margin:18px 0 0;max-width:46ch;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.hero-lead img{flex:none;width:36px;height:36px;border-radius:11px;object-fit:cover;box-shadow:0 4px 12px rgb(29 78 216/.18)}
.hero-lead a{font-weight:600;white-space:nowrap}
.data-more{margin:10px 0 0;font-size:var(--fs-sm)}