/* kk-pricing.css — the seat-based pricing page, shared by SLP and Runway.
   Everything is scoped under .kkp so it cannot touch the rest of the site.
   Each page sets the three colour custom properties on .kkp and nothing else
   differs between them. */

.kkp{--kkp-ink:#14201C;--kkp-muted:#5B6B65;--kkp-line:#DCE6E1;--kkp-wash:#F2F8F5;
  --kkp-accent:#1D6B52;--kkp-deep:#0F3D2E;--kkp-bright:#4EBE91;--kkp-on-deep:#BFE0D1;
  color:var(--kkp-ink);display:flex;flex-direction:column;gap:64px}

/* A display rule beats the browser's own [hidden]{display:none}, so .kkp-line's
   display:flex kept the Training row visible while it was hidden. Anything in
   here that carries [hidden] must actually disappear. */
.kkp [hidden]{display:none!important}

.kkp h1,.kkp h2,.kkp h3{margin:0;letter-spacing:-0.02em}
.kkp p{margin:0}
.kkp *,.kkp *::before,.kkp *::after{box-sizing:border-box}

.kkp-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.kkp-head h1{font-size:clamp(28px,4vw,36px);line-height:1.12;font-weight:700}
.kkp-head h2{font-size:clamp(24px,3.4vw,30px);font-weight:700}
.kkp-head .kkp-lead{font-size:16px;line-height:1.5;color:var(--kkp-muted);max-width:660px}
.kkp-head .kkp-aside{font-size:15px;color:var(--kkp-muted)}

/* ---- configurator + summary ---------------------------------------------- */
.kkp-buy{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.kkp-config{flex:999 1 560px;min-width:0;border:1px solid var(--kkp-line);border-radius:16px;overflow:hidden;background:#fff}
.kkp-step{padding:28px 32px;border-bottom:1px solid var(--kkp-line)}
.kkp-step:last-child{border-bottom:0}
.kkp-step-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.kkp-num{font-size:11px;font-weight:700;color:var(--kkp-accent);background:var(--kkp-wash);border-radius:999px;padding:4px 9px}
.kkp-step h2{font-size:19px;font-weight:700;letter-spacing:0}
.kkp-step h2 .kkp-opt{font-weight:500;font-size:13px;color:var(--kkp-muted);letter-spacing:0.04em}
.kkp-step .kkp-note{margin:0 0 18px 46px;font-size:14px;color:var(--kkp-muted)}
.kkp-indent{margin-left:46px}

.kkp-seats{display:flex;flex-wrap:wrap;gap:8px}
.kkp-seat{min-width:82px;padding:14px 16px;border-radius:11px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;background:#fff;color:var(--kkp-ink);border:1px solid var(--kkp-line)}
.kkp-seat:hover{border-color:var(--kkp-accent)}
.kkp-seat[aria-pressed="true"]{background:var(--kkp-accent);color:#fff;border-color:var(--kkp-accent)}
.kkp-seat:focus-visible{outline:2px solid var(--kkp-accent);outline-offset:2px}

.kkp-bands{margin-top:20px;border:1px solid var(--kkp-line);border-radius:12px;overflow:hidden}
.kkp-band{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 16px;background:#fff}
.kkp-band+.kkp-band{border-top:1px solid var(--kkp-line)}
.kkp-band[data-active="true"]{background:var(--kkp-wash)}
.kkp-band b{font-size:14px;font-weight:600}
.kkp-band span{font-size:14px;color:var(--kkp-muted);font-variant-numeric:tabular-nums}
.kkp-more{margin-top:12px;font-size:13.5px;color:var(--kkp-muted)}

.kkp-switch{display:inline-flex;background:var(--kkp-wash);border:1px solid var(--kkp-line);border-radius:10px;padding:4px;gap:4px}
.kkp-switch button{padding:9px 16px;border-radius:8px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;background:transparent;color:#3D4F48}
.kkp-switch button[aria-pressed="true"]{background:var(--kkp-deep);color:#fff}
.kkp-switch button:focus-visible{outline:2px solid var(--kkp-accent);outline-offset:2px}

.kkp-addon{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--kkp-line);border-radius:12px;cursor:pointer}
.kkp-addon input{margin-top:3px;width:18px;height:18px;accent-color:var(--kkp-accent)}
.kkp-addon-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.kkp-addon-row b{font-size:15px;font-weight:600}
.kkp-addon-row i{font-style:normal;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.kkp-addon small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--kkp-muted)}

.kkp-summary{flex:1 1 380px;min-width:300px;background:var(--kkp-deep);color:#fff;border-radius:16px;padding:32px}
.kkp-summary-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
.kkp-summary-top .kkp-kicker{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--kkp-on-deep)}
.kkp-pill{font-size:12px;font-weight:600;background:rgba(255,255,255,.14);border-radius:999px;padding:5px 11px}
.kkp-figure{display:flex;align-items:baseline;gap:8px}
.kkp-figure b{font-size:clamp(40px,6vw,52px);font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.kkp-figure span{font-size:16px;color:var(--kkp-on-deep)}
.kkp-billing-note{margin-top:6px;font-size:14px;color:var(--kkp-on-deep)}
.kkp-rule{margin:24px 0;height:1px;background:rgba(255,255,255,.16)}
.kkp-line{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#DCEDE4;margin-bottom:10px}
.kkp-line span{font-variant-numeric:tabular-nums}
.kkp-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.kkp-total b{font-size:17px;font-weight:700}
.kkp-total span{font-size:30px;font-weight:700;color:var(--kkp-bright);font-variant-numeric:tabular-nums}
.kkp-saving{margin-top:8px;font-size:13px;color:var(--kkp-bright);font-variant-numeric:tabular-nums}
.kkp-cta{display:block;margin-top:26px;background:var(--kkp-bright);color:#0A2A1F;text-decoration:none;text-align:center;
  font-size:16px;font-weight:700;padding:15px;border-radius:11px}
.kkp-cta:hover{filter:brightness(1.06)}
.kkp-cta2{display:block;margin-top:10px;border:1px solid rgba(255,255,255,.3);color:#fff;text-decoration:none;text-align:center;
  font-size:15px;font-weight:600;padding:14px;border-radius:11px}
.kkp-cta2:hover{background:rgba(255,255,255,.08)}


.kkp-included{border-top:1px solid var(--kkp-line);padding-top:26px}
.kkp-included h3{font-size:15px;font-weight:700;margin-bottom:16px;letter-spacing:0}
.kkp-included ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px}
.kkp-included li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;color:#2C3A35}
.kkp-included svg{flex:0 0 17px;margin-top:2px}

/* ---- done-with-you package ----------------------------------------------- */
.kkp-pkg{display:flex;flex-wrap:wrap;border:1px solid var(--kkp-line);border-radius:16px;overflow:hidden;background:#fff}
.kkp-pkg-intro{flex:1 1 460px;min-width:340px;background:var(--kkp-wash);padding:36px 40px;display:flex;flex-direction:column;gap:18px}
.kkp-badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kkp-accent);
  background:#fff;border:1px solid var(--kkp-line);border-radius:999px;padding:7px 14px}
.kkp-pkg-intro h3{font-size:clamp(22px,3vw,27px);line-height:1.2;font-weight:700;letter-spacing:-0.01em}
.kkp-pkg-intro p{font-size:15px;line-height:1.6;color:#3D4F48}
.kkp-quote b{display:block;font-size:21px;font-weight:700}
.kkp-quote small{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--kkp-muted)}
.kkp-pkg-btn{align-self:flex-start;margin-top:4px;background:var(--kkp-deep);color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;padding:14px 26px;border-radius:11px}
.kkp-pkg-btn:hover{filter:brightness(1.1)}
.kkp-steps{flex:1.15 1 480px;min-width:0;padding:30px 36px;list-style:none;margin:0}
.kkp-steps li{display:flex;gap:18px;align-items:flex-start;padding:17px 0}
.kkp-steps li+li{border-top:1px solid var(--kkp-line)}
.kkp-steps .kkp-n{flex:0 0 34px;height:34px;border-radius:999px;background:var(--kkp-wash);color:var(--kkp-accent);
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.kkp-steps b{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px}
.kkp-steps small{display:block;font-size:14px;line-height:1.5;color:var(--kkp-muted)}

/* ---- other ways to start + questions ------------------------------------- */















/* ---- narrow screens ------------------------------------------------------- */
@media (max-width:900px){
  .kkp{gap:48px}
  .kkp-included ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  
  .kkp-step{padding:22px 20px}
  .kkp-step .kkp-note,.kkp-indent{margin-left:0}
  .kkp-summary{padding:24px}
  .kkp-pkg-intro{padding:28px 24px}
  .kkp-steps{padding:20px 24px}
}
@media (max-width:560px){
  .kkp-included ul{grid-template-columns:1fr}
  /* min-width:auto, not 0: a grid or flex item with min-width:0 may be
     squeezed narrower than the word it contains, and with nowrap text that
     word then draws outside the box and over whatever is beside it. */
  .kkp-seat{flex:1 1 calc(50% - 4px);min-width:auto}
  /* The labels are short phrases - "3 months", "Yearly · 2 months free" - and
     at this width each was breaking mid-phrase onto two lines, so the control
     read as "3" above "months" and stood 50px tall for one line of text.
     nowrap keeps each label whole; the row wraps instead when all of them will
     not fit, which is the break that does not look like a mistake. */
  .kkp-switch{width:100%;flex-wrap:wrap}
  /* Measured: the control is 280px wide inside its card at 368px, and three
     buttons at the desktop padding need 296px - so they wrapped 2+1, which
     looks like a mistake rather than a layout. 10px of side padding at 13px
     brings each to ~81px, three fit on one line with room to spare, and the
     wrap above stays as a safety valve rather than the normal case. */
  .kkp-switch button{flex:1 1 auto;white-space:nowrap;min-width:0;padding:9px 10px;font-size:13px}
}


/* ---- jump buttons beside the seat row ------------------------------------
   Same metrics as .kkp-seat so the whole control block reads as one family;
   outlined in the deep tone so a jump cannot be mistaken for a seat count. */
/* One row: four seat counts, then the two other ways to buy. Six equal columns,
   so every button is the same size. The seat row was a wrapping flex row before,
   which gave each button a different width. A wider gap and a hairline mark the
   seam, because the last two are jumps down the page rather than a quantity. */
/* auto-fit with a real minimum, not a fixed six. repeat(6,...) forced six
   columns at every width - 40px each on a phone - and the text, being
   nowrap and overflow:visible, spilled over the neighbouring options.
   110px is the narrowest track that holds the longest label ("Enterprise")
   with its padding. A wide card still lays out six across; a phone gets
   two rows. This also revives the 560/640/900px rules below, which set
   `flex` on the options and were dead the moment this became a grid. */
.kkp-seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;align-items:stretch}
/* Six equal columns. The labels are kept short enough to fit one line at this
   width - an earlier pass with longer labels and a trailing arrow overflowed the
   cell and ran one button over the next. */
.kkp-seat,.kkp-alt{min-width:0;white-space:nowrap}
.kkp-seat{padding-left:10px;padding-right:10px}
.kkp-alt{position:relative}
/* No divider and no extra margin: either one takes width out of that column and
   the buttons stop being equal. The two jumps are already distinct - wash fill,
   deep border - without borrowing space from the grid. */
.kkp-alt{padding:14px 10px;border-radius:11px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;background:var(--kkp-wash);color:var(--kkp-deep);border:1px solid var(--kkp-deep);
  text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  /* inline-flex lets the label shrink below its own width and wrap, which made
     one button taller than the other */
  white-space:nowrap}
.kkp-alt:hover{background:var(--kkp-deep);color:#fff}
.kkp-alt:focus-visible{outline:2px solid var(--kkp-accent);outline-offset:2px}
.kkp-alt svg{flex:none}

/* ---- the fine print, as a list instead of one run-on line ---------------- */




/* ---- contact section on the pricing page itself -------------------------- */
.kkp-contact{scroll-margin-top:90px;border:1px solid var(--kkp-line);border-radius:16px;background:#fff;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;overflow:hidden}
.kkp-contact-intro{padding:32px;background:var(--kkp-wash);border-right:1px solid var(--kkp-line);min-width:0}
.kkp-contact-intro h2{margin:10px 0 10px;font-size:26px;line-height:1.2;letter-spacing:-.01em}
.kkp-contact-intro p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--kkp-muted);max-width:40ch}
.kkp-contact-direct{margin-top:18px;padding-top:16px;border-top:1px solid var(--kkp-line);font-size:14px}
.kkp-contact-direct b{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kkp-muted);margin-bottom:5px}
.kkp-contact-direct a{color:var(--kkp-accent);font-weight:600;text-decoration:none}
.kkp-contact-direct a:hover{text-decoration:underline}
.kkp-form{padding:32px;display:flex;flex-direction:column;gap:14px;min-width:0}
.kkp-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kkp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.kkp-field label{font-size:12.5px;font-weight:700;color:var(--kkp-ink)}
.kkp-field input,.kkp-field select,.kkp-field textarea{font:inherit;font-size:14.5px;padding:11px 13px;
  border:1px solid var(--kkp-line);border-radius:10px;background:#fff;color:var(--kkp-ink);width:100%}
.kkp-field textarea{min-height:104px;resize:vertical}
.kkp-field input:focus-visible,.kkp-field select:focus-visible,.kkp-field textarea:focus-visible{
  outline:2px solid var(--kkp-accent);outline-offset:1px;border-color:var(--kkp-accent)}
.kkp-form-send{margin-top:2px;background:var(--kkp-deep);color:#fff;border:0;font:inherit;font-size:15px;
  font-weight:700;padding:14px 26px;border-radius:11px;cursor:pointer;align-self:flex-start}
.kkp-form-send:hover{filter:brightness(1.12)}
.kkp-form-note{margin:0;font-size:12.5px;color:var(--kkp-muted)}
@media(max-width:640px){
  .kkp-seat{flex:1 1 calc(50% - 4px)}
}
@media(max-width:900px){
  .kkp-contact{grid-template-columns:1fr}
  .kkp-contact-intro{border-right:0;border-bottom:1px solid var(--kkp-line)}
  .kkp-seat{flex:1 1 calc(25% - 6px)}
  .kkp-alt{flex:1 1 calc(50% - 4px)}

  .kkp-form-row{grid-template-columns:1fr}
}



/* The band table is gone and no price sits on a button: the rate for the chosen
   seat count is already stated in the summary panel, and saying it twice was what
   made this step tall. Buttons are labels. */

/* ---- what the contact form says back ------------------------------------ */
.kkp-form-status{margin:4px 0 0;font-size:13px;line-height:1.55;display:flex;flex-wrap:wrap;
  gap:8px 12px;align-items:baseline}
.kkp-form-status.ok{color:var(--kkp-accent)}
.kkp-form-status.error{color:#9C3434}
.kkp-copy{font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer;
  background:#fff;color:var(--kkp-deep);border:1px solid var(--kkp-line)}
.kkp-copy:hover{border-color:var(--kkp-accent)}
.kkp-copy:focus-visible{outline:2px solid var(--kkp-accent);outline-offset:2px}


/* ---- the order summary stops resizing ------------------------------------
   Measured on v69.53: 550px on monthly, 573px on yearly. The saving line was in
   the layout flow, so toggling the billing switch grew and shrank the whole
   card. Its space is now always reserved and only its text comes and goes.
   min-height is the saving line's own measured height, so reserving it costs
   nothing on the yearly view where the line is present. */
.kkp-saving{min-height:19px;display:block!important;visibility:visible}
.kkp-saving[hidden]{display:block!important;visibility:hidden}

/* ---- anchors stop landing under the sticky header ------------------------
   The header is 78px and sticky, so a plain anchor put the target's top at y=0
   and its heading sat behind the header. 96px leaves 18px of air. */
.kkp-pkg,.kkp-contact{scroll-margin-top:96px}

/* ---- one way to start, not two ------------------------------------------- */
.kkp-start{border:1px solid var(--kkp-line);border-top:4px solid var(--kkp-bright);border-radius:14px;
  background:#fff;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.kkp-start h3{margin:0 0 8px;font-size:19px;font-weight:700}
.kkp-start p{margin:0;font-size:14.5px;line-height:1.55;color:var(--kkp-muted);max-width:52ch}
.kkp-start-actions{display:flex;gap:10px;flex-wrap:wrap}
.kkp-start-actions a{padding:13px 22px;border-radius:11px;font-size:14.5px;font-weight:700;
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center}
.kkp-start-actions .primary{background:var(--kkp-deep);color:#fff}
.kkp-start-actions .primary:hover{filter:brightness(1.12)}
.kkp-start-actions .ghost{background:var(--kkp-wash);color:var(--kkp-deep);border:1px solid var(--kkp-deep)}
.kkp-start-actions .ghost:hover{background:var(--kkp-deep);color:#fff}
@media(max-width:760px){
  .kkp-start{grid-template-columns:1fr;gap:18px}
  .kkp-start-actions a{flex:1 1 auto;justify-content:center}
}


/* ---- the two cards are one row, not two stacks ---------------------------
   Measured on v69.54 at 1440px: the white config card was 533px (SLP) and 552px
   (Runway) while the dark summary was 577px, so the summary hung 45px and 25px
   below it. align-items was flex-start, which only ever shares the top edge.
   Stretch makes the row as tall as its tallest child and both cards that height,
   so they stay flush whatever either one is holding. */
.kkp-buy{align-items:stretch}
.kkp-summary{display:flex;flex-direction:column}
/* The buttons sit at the foot of the dark card so the spare height lands as one
   gap above them rather than as dead space under them. */
.kkp-summary .kkp-cta{margin-top:auto}