/* partners.html — page head, stat band, why-cards, commission table, calculator, perks, stepper, partner reviews, application form.
   Only page-specific rules; everything else comes from css/style.css. */

/* ---------------------------------------------------------------- page head */
.phead{padding-top:48px;padding-bottom:clamp(48px,6vw,80px)}
.phead__grid{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.phead__text{display:grid;gap:20px;justify-items:start}
.phead__text h1{max-width:16ch}
.phead__text .eyebrow{margin:0}
.phead__text .lead{margin:0}
.phead__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.phead__figure{position:relative;display:flex;justify-content:center;align-items:center}
.phead__figure img{width:320px;height:380px;max-width:100%}
@media (max-width:1023px){
  .phead{padding-top:24px}
  .phead__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .phead__figure{order:-1}
  .phead__figure img{width:260px;height:309px}
}
@media (max-width:640px){
  .phead__actions{width:100%}
  .phead__actions .btn{flex:1 1 auto}
}

/* ---------------------------------------------------------------- stat band */
.pstats{padding-block:clamp(32px,4vw,48px)}
/* top-aligned (not centred): a two-line caption must not push its number off the common baseline */
.pstats .stat-strip__item{align-content:start}
.pstats .stat-strip small{text-wrap:balance}

/* ---------------------------------------------------------------- why cards */
.why .card{display:grid;gap:12px;align-content:start;padding-top:calc(var(--card-pad) - 4px)}
.why .card h3{margin:0}
.why .card p{margin:0;font-size:15px}
.why__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);margin-bottom:8px}
.why__icon .icon{width:24px;height:24px}
.why .card:hover .why__icon{background:var(--accent-tint-2)}

/* ---------------------------------------------------------------- commissions */
/* 7/5 split like the page head: table left, note + link to the calculator right */
.cmp-layout{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.cmp-aside{display:grid;gap:20px;justify-items:start;align-content:center;padding-left:8px}
.cmp-aside__note{margin:0;font-size:16px;line-height:1.55;color:var(--text-2);max-width:34ch}
.cmp-aside .btn .btn__arrow{margin-left:10px}
@media (max-width:1023px){
  .cmp-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .cmp-aside{padding-left:0}
  .cmp-aside__note{max-width:none;font-size:15px}
}
.cmp--rates{min-width:0}
.cmp--rates th,.cmp--rates td{height:60px}
.cmp--rates thead th:first-child{font-weight:600;color:var(--text-1)}
.cmp--rates tbody th{font-family:var(--font-display)}
.cmp--rates td.num{font-size:17px}
.cmp--rates .badge{margin-left:10px;vertical-align:middle}
@media (max-width:640px){
  .cmp--rates{min-width:0;font-size:14px;table-layout:fixed}
  .cmp--rates th,.cmp--rates td{padding:0 10px;white-space:normal;line-height:1.3}
  .cmp--rates th:first-child,.cmp--rates td:first-child{width:34%;max-width:none;min-width:0;padding-left:14px}
  .cmp--rates td.num{font-size:16px}
  .cmp--rates .badge{display:none}
}

/* ---------------------------------------------------------------- calculator */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding:clamp(24px,3vw,40px)}
.calc__controls{display:grid;gap:28px;align-content:start}
.calc__field{display:grid;gap:12px}
.calc__label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font:600 14px var(--font-display);color:var(--text-1)}
.calc__out{font:800 clamp(24px,2.4vw,30px)/1 var(--font-display);color:var(--text-1);font-variant-numeric:tabular-nums lining-nums}
.calc__out small{font:500 14px var(--font-display);color:var(--text-3);margin-left:6px}
.calc__scale{display:flex;justify-content:space-between;font:500 13px var(--font-display);color:var(--text-3);font-variant-numeric:tabular-nums}
.calc .seg{justify-self:start;max-width:100%}
.calc .seg__opt{padding:0 18px}
.calc__result{position:relative;border-radius:20px;background:var(--bg-2);border:1px solid var(--border);padding:clamp(20px,2.4vw,32px);display:grid;gap:8px;align-content:center;overflow:hidden}
.calc__result::before{content:"";position:absolute;inset:auto -120px -160px auto;width:380px;height:380px;border-radius:50%;background:var(--aurora-coral);opacity:.6;pointer-events:none}
.calc__result>*{position:relative}
.calc__sum{font:800 clamp(34px,3.6vw,46px)/1.05 var(--font-display);color:var(--text-1);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.calc__sum.is-out{opacity:0;transform:translateY(-6px)}
.calc__caption{margin:0;color:var(--text-2);font-size:15px}
.calc__renew{margin:6px 0 0;display:inline-flex;align-items:center;gap:8px;font:600 15px var(--font-display);color:var(--ok);font-variant-numeric:tabular-nums}
.calc__renew .icon{width:18px;height:18px}
.calc__meta{margin:12px 0 0;font:500 13px/1.5 var(--font-display);color:var(--text-3);font-variant-numeric:tabular-nums}
.calc__note{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:13px;color:var(--text-3)}
@media (max-width:899px){
  .calc{grid-template-columns:minmax(0,1fr);gap:28px}
  .calc .seg{justify-self:stretch;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .calc .seg__opt{padding:0 8px}
}
html[data-theme="light"] .calc__result{background:var(--bg-1)}

/* ---------------------------------------------------------------- perks */
/* bento: the first perk is a featured tile spanning two rows on the left, the other four fill a 2×2 on the right —
   five items, every row the same height, no half-empty orphan row */
.perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(96px,1fr);gap:16px} /* 1fr rows: both rows of the 2×2 share one height */
.perk{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-md);min-height:96px}
.perk__icon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent)}
.perk__icon .icon{width:20px;height:20px}
.perk p{margin:0;color:var(--text-2);font-size:15px;line-height:1.5;padding-top:8px}
.perk--featured{grid-row:span 2;flex-direction:column;justify-content:space-between;gap:24px;padding:24px 26px;border-radius:var(--r-lg)}
.perk--featured .perk__icon{width:48px;height:48px;border-radius:14px}
.perk--featured .perk__icon .icon{width:24px;height:24px}
.perk--featured p{padding-top:0;font:600 clamp(18px,1.5vw,21px)/1.35 var(--font-display);color:var(--text-1);letter-spacing:-.01em;max-width:22ch}
.perk--featured:hover .perk__icon{background:var(--accent-tint-2)}
@media (max-width:1023px){
  .perks{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(96px,auto)}
  .perk--featured{grid-row:auto;grid-column:span 2;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:20px 22px}
  .perk--featured p{font-size:17px;max-width:none}
}
@media (max-width:640px){
  .perks{grid-template-columns:minmax(0,1fr)}
  .perk{padding:16px 18px}
  .perk--featured{grid-column:auto;align-items:flex-start;padding:18px}
  .perk--featured .perk__icon{width:40px;height:40px;border-radius:12px}
  .perk--featured .perk__icon .icon{width:20px;height:20px}
  .perk--featured p{font-size:16px}
}

/* ---------------------------------------------------------------- how */
.how{margin-top:8px}
.how li{padding-right:24px}
.how h4{color:var(--text-1)}
.how__cta{margin-top:40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.how__cta p{margin:0;font-size:15px;color:var(--text-3)}

/* ---------------------------------------------------------------- partner reviews */
.previews{grid-template-columns:repeat(4,minmax(0,1fr))}
.previews .review__sub{display:block;line-height:1.35}
.previews .review__body{-webkit-line-clamp:7}
@media (max-width:1023px){.previews{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* .carousel-dots: styled in style.css (shown ≤640 next to the scroll-snap row) */
.carousel-dots button:focus-visible{box-shadow:var(--shadow-focus)}

/* ---------------------------------------------------------------- apply */
.apply{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
.apply__intro{display:grid;gap:14px;justify-items:start;position:sticky;top:calc(var(--header-h) + 24px)}
.apply__intro .eyebrow,.apply__intro .lead{margin:0}
.apply__facts{margin-top:10px;font-size:15px;color:var(--text-2)}
.apply__facts b{font-family:var(--font-display);font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums}
.apply__form{gap:20px}
.apply__form .field label .opt{font-weight:400;color:var(--text-3)}
.apply__form .form__actions{margin-top:4px}
.apply__form .form__note{max-width:40ch}
.apply__form .check a{color:var(--accent-bright);text-decoration:none}
html[data-theme="light"] .apply__form .check a{color:var(--accent)}
.apply__form .check a:hover{text-decoration:underline}
.apply__form .check.is-invalid{color:var(--danger)}
.apply__form .check+.field__error{margin-top:-12px}
@media (max-width:1023px){
  .apply{grid-template-columns:minmax(0,1fr);gap:28px}
  .apply__intro{position:static}
}
@media (max-width:640px){
  .apply__form .form__actions .btn{width:100%}
}