/* Study checkout — scoped .ck-
   Same skin as the rest of the platform: PP Telegraf, #3a8518 as the single
   accent, cool-gray neutrals, light ground. No new palette, no new type.

   The page shell, card grammar and order summary are the previous checkout
   build's, unchanged. What is new is the slider, the segmented control and
   the audience list — the parts that turn this page from a receipt you read
   into a decision you make.

   One viewport. Nothing is meant to scroll at 1440x900, so every block is
   budgeted; the page keeps overflow:auto only as a safety valve for short
   windows, never as a layout the design leans on. */

.ck-page{position:fixed;inset:0;z-index:90;background:#f6fafd;overflow:auto;
  font-family:'PP Telegraf',sans-serif;color:#050301;animation:ckpage .3s cubic-bezier(.2,.9,.25,1) both}
@keyframes ckpage{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- top bar ---- */
.ck-bar{position:sticky;top:0;z-index:5;height:56px;display:flex;align-items:center;gap:14px;
  padding:0 24px;background:#fff;border-bottom:1px solid #e5ebf1}
.ck-bar__logo{font-size:13px;font-weight:700;letter-spacing:.02em}
.ck-bar__logo b{color:#3a8518}
.ck-bar__k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9aa4af;
  padding-left:14px;border-left:1px solid #e5ebf1}
/* The study name lost its page header to the one-viewport rule, so it rides
   in the bar rather than disappearing altogether. */
.ck-bar__nm{font-size:12.5px;font-weight:600;color:#636c79;padding-left:14px;border-left:1px solid #e5ebf1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40ch}
.ck-bar__sp{flex:1}
.ck-bar__x{width:32px;height:32px;border-radius:900px;border:1px solid #e5ebf1;background:#fff;
  color:#636c79;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s}
.ck-bar__x:hover:not(:disabled){background:#eef2f6;color:#050301}

/* ---- shell ---- */
.ck-wrap{max-width:1140px;margin:0 auto;padding:18px 28px 16px;
  display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:24px;align-items:start}
@media (max-width:1080px){.ck-wrap{grid-template-columns:minmax(0,1fr)}}
.ck-main{min-width:0;display:flex;flex-direction:column;gap:14px}

/* ---- cards ---- */
.ck-card{background:#fff;border:1px solid #e5ebf1;border-radius:16px;padding:20px 24px 22px}
.ck-card__hd{display:flex;align-items:baseline;gap:12px;margin-bottom:5px}
.ck-card__hd h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.024em;line-height:1.3}
.ck-card__n{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#b3bec9}
.ck-card__lede{margin:0;font-size:13px;line-height:1.6;color:#636c79;max-width:64ch;text-wrap:pretty}

.ck-warn{display:flex;gap:11px;align-items:flex-start;background:#fcf5e6;border:1px solid #fce3b0;
  border-radius:12px;padding:11px 14px;font-size:12.5px;line-height:1.5;color:#735d32;text-wrap:pretty}
.ck-warn i{color:#d69d2b;font-size:16px;flex:none;margin-top:-1px}
.ck-warn b{color:#453413;font-weight:700}
.ck-warn a{color:#7a4d00;font-weight:700;cursor:pointer;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}

/* ---- the sliders ----
   A thin track, a small precise handle, and the value living in the label row
   rather than in a bubble on the thumb. The native range is stretched over the
   track at zero opacity, so pointer drag, click-to-jump, arrow keys and the
   slider role belong to the browser; every pixel you can see is ours. */
.ck-sls{display:flex;flex-direction:column;margin-top:18px}
.ck-sl{padding:19px 0;border-top:1px solid #f1f5f9}
.ck-sl:first-child{border-top:none;padding-top:4px}

/* Control (label, track, ends) on the left, where a thumb wants room to
   travel; the consequence (value, hint, the say-line) on the right,
   where a sentence wants room to breathe. min() keeps the control column
   from ballooning on very wide windows — a slider does not need 500px to
   express 3-8 stops. */
/* Label reads as its own full-width line (below), so both columns start
   their content at the same y - the track and the value text line up
   directly instead of the value sitting a label-height above the track.
   The row is fit-content, not 1fr-stretched: at 3-8 stops and a
   one-sentence say-line, neither column needs the card's full ~770px,
   and letting the grid fill it anyway just leaves dead space past the
   text. minmax keeps the info column free to wrap the longer say-lines. */
.ck-sl__k{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.012em;color:#7e8da0;margin-bottom:14px}
.ck-sl__row{display:grid;grid-template-columns:minmax(160px,220px) minmax(280px,460px);
  gap:28px;align-items:start;width:fit-content;max-width:100%}
@media (max-width:720px){.ck-sl__row{grid-template-columns:minmax(0,1fr);width:auto;gap:12px}}
.ck-sl__info{min-width:0}
.ck-sl__v{display:block;font-size:16px;font-weight:700;letter-spacing:-.022em;color:#2b6418;white-space:nowrap}
.ck-sl__v em{font-style:normal;font-weight:500;font-size:12px;color:#9aa4af;margin-left:8px;letter-spacing:0;white-space:normal}

.ck-sl__t{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.ck-sl__bed{position:absolute;left:0;right:0;height:5px;border-radius:900px;background:#eef2f6}
/* The stops the current rigor or mix has ruled out. Hatched rather than
   hidden, so the merchant can see the range they have instead of finding
   its edge by pushing the thumb into it. */
.ck-sl__dead{position:absolute;height:5px;border-radius:900px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,#e2e8ef 0 3px,#eef2f6 3px 6px)}
.ck-sl__fill{position:absolute;left:0;height:5px;border-radius:900px;background:#3a8518;
  transition:width .16s cubic-bezier(.2,.9,.25,1)}
.ck-sl__h{position:absolute;width:17px;height:17px;border-radius:900px;background:#fff;
  transform:translateX(-8.5px);pointer-events:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(4,12,21,.10),0 2px 5px rgba(4,12,21,.14);
  transition:left .16s cubic-bezier(.2,.9,.25,1),box-shadow .14s}
.ck-sl__h::after{content:"";width:7px;height:7px;border-radius:900px;background:#3a8518}
.ck-sl__t:hover .ck-sl__h{box-shadow:0 0 0 1px rgba(4,12,21,.10),0 2px 5px rgba(4,12,21,.14),0 0 0 6px rgba(58,133,24,.12)}
.ck-sl__t:active .ck-sl__h{box-shadow:0 0 0 1px rgba(4,12,21,.10),0 2px 5px rgba(4,12,21,.14),0 0 0 8px rgba(58,133,24,.16)}
.ck-sl__r{position:absolute;left:-9px;right:-9px;top:0;height:18px;width:calc(100% + 18px);margin:0;
  opacity:0;cursor:grab;-webkit-appearance:none;appearance:none;background:none}
.ck-sl__r:active{cursor:grabbing}
.ck-sl__r:focus-visible~.ck-sl__h{box-shadow:0 0 0 1px rgba(4,12,21,.10),0 0 0 4px rgba(58,133,24,.28)}

.ck-sl__ends{display:flex;margin-top:10px;font-size:11px;color:#b3bec9}
.ck-sl__ends span:last-child{margin-left:auto}
.ck-sl__say{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:#7e8da0;text-wrap:pretty}
.ck-sl__say b{color:#050301;font-weight:700}
.ck-sl__say a{color:#2b6418;font-weight:700;cursor:pointer;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.ck-sl__say.is-warn{color:#8c5800}
.ck-sl__say.is-warn a{color:#7a4d00}

/* ---- what lands on your desk ---- */
.ck-get{margin-top:18px;padding-top:16px;border-top:1px solid #eef2f6}
.ck-get__k{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#9aa4af;margin-bottom:10px}
.ck-get ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 22px}
@media (max-width:720px){.ck-get ul{grid-template-columns:minmax(0,1fr)}}
.ck-get li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;text-wrap:pretty;
  animation:ckget .24s cubic-bezier(.2,.9,.25,1) both}
@keyframes ckget{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.ck-get li i{color:#3a8518;font-size:14px;flex:none;margin-top:1px}

/* ---- order summary ---- */
.ck-side{position:sticky;top:80px}
@media (max-width:1080px){.ck-side{position:static}}
.ck-sum{background:#fff;border:1px solid #e5ebf1;border-radius:16px;padding:24px 26px;
  box-shadow:0 10px 30px rgba(4,12,21,.05)}
.ck-sum__k{display:flex;align-items:baseline;margin:20px 0 10px;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#9aa4af}
.ck-sum__k em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;color:#636c79;
  letter-spacing:0;text-transform:none}

/* the segmented control — who does the answering */
.ck-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;background:#eef2f6;border-radius:900px}
.ck-seg button{border:none;background:none;cursor:pointer;padding:9px 2px;border-radius:900px;font:inherit;
  font-size:11.5px;font-weight:600;color:#636c79;white-space:nowrap;transition:background .14s,color .14s}
.ck-seg button.is-on{background:#fff;color:#050301;box-shadow:0 1px 3px rgba(4,12,21,.12)}
/* Reserved height so switching tabs doesn't shunt the whole rail up and down,
   but only as much as the longest of the three lines actually needs. */
.ck-segline{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:#7e8da0;min-height:35px;text-wrap:pretty}

/* The groups. No mark and no per-group bar: the only per-group fact that
   changes anything is the headcount, and a swatch beside it was decoration
   dressed up as a key. */
.ck-grps{display:flex;flex-direction:column;gap:2px}
.ck-grp{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #f1f5f9;transition:opacity .16s}
.ck-grp:first-child{border-top:none;padding-top:3px}
.ck-grp.is-off{opacity:.4}
.ck-grp__nm{flex:1;min-width:0;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-grp__n{font-size:12px;color:#7e8da0;font-variant-numeric:tabular-nums}
.ck-grp__x{width:26px;height:26px;flex:none;border:none;background:none;cursor:pointer;color:#c5ced7;
  font-size:15px;line-height:1;border-radius:900px;padding:0;display:flex;align-items:center;
  justify-content:center;transition:background .14s,color .14s}
.ck-grp__x:hover{background:#eef2f6;color:#050301}

/* The Digital Twins / recruited split is drawn with explore-intake's own
   .i4-split, hatch and legend — same fact, same picture, one definition. */
.ck-split{margin-top:16px;padding-top:16px;border-top:1px solid #eef2f6}

.ck-sum__rows{margin-top:16px;padding-top:16px;border-top:1px solid #eef2f6;
  display:flex;flex-direction:column;gap:10px}
.ck-sum__r{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:#636c79}
.ck-sum__r b{margin-left:auto;font-weight:600;color:#050301;font-size:13px;font-variant-numeric:tabular-nums}
.ck-sum__tot{display:flex;align-items:baseline;margin-top:13px;padding-top:14px;border-top:1px solid #e5ebf1}
.ck-sum__tot span{font-size:12.5px;font-weight:600;color:#050301}
.ck-sum__tot b{margin-left:auto;font-size:25px;font-weight:700;letter-spacing:-.032em;line-height:1;
  font-variant-numeric:tabular-nums}
.ck-sum__tot.is-over b{color:#bf3826}
.ck-sum__left{margin-top:6px;font-size:11.5px;color:#9aa4af;text-align:right}
.ck-sum__flag{margin-top:15px;padding:11px 14px;font-size:11.5px;gap:9px}
.ck-sum__flag i{font-size:15px}

.ck-go{width:100%;height:44px;margin-top:16px;border:none;border-radius:900px;background:#3a8518;color:#fff;
  font:inherit;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;transition:background .14s,transform .14s;box-shadow:0 6px 16px rgba(58,133,24,.24)}
.ck-go:hover:not(:disabled){background:#2b6418;transform:translateY(-1px)}
.ck-go i{transition:transform .16s}
.ck-go:hover:not(:disabled) i{transform:translateX(3px)}
.ck-go:disabled{cursor:not-allowed;background:#eef2f6;color:#b3bec9;box-shadow:none;transform:none}
.ck-back{width:100%;height:34px;margin-top:6px;border:none;border-radius:900px;background:none;
  font:inherit;font-size:12.5px;font-weight:600;color:#636c79;cursor:pointer;transition:background .14s,color .14s}
.ck-back:hover:not(:disabled){background:#eef2f6;color:#050301}
.ck-sum__fine{margin-top:12px;font-size:11px;line-height:1.5;color:#b3bec9;text-align:center;text-wrap:pretty}

/* ---- short windows ----
   The rail is the taller of the two columns and it needs 825px, which a
   1440x900 Mac has and a 1280x800 laptop does not. Rather than let the
   Launch button fall below the fold on the smaller machine, the whole rail
   tightens: paddings come in, the legend goes to one row, and the market
   list drops — the only line here whose information is already on screen,
   in the group names directly above it. */
@media (max-height:830px){
  .ck-wrap{padding:12px 28px 10px}
  .ck-sl{padding:12px 0 11px}
  .ck-get{margin-top:14px;padding-top:13px}
  .ck-sum{padding:12px 18px}
  .ck-seg button{padding:6px 2px}
  .ck-segline{margin-top:7px;min-height:33px}
  .ck-sum__k{margin:9px 0 5px}
  .ck-grp{padding:3px 0}
  .ck-split{margin-top:8px;padding-top:8px}
  .ck-mk{display:none}
  .i4-legend{flex-direction:row;gap:14px}
  .i4-legend span{flex:1;min-width:0;white-space:nowrap}
  .ck-sum__rows{margin-top:8px;padding-top:9px}
  .ck-sum__tot{margin-top:7px;padding-top:8px}
  .ck-sum__tot b{font-size:22px}
  .ck-sum__flag{margin-top:9px;padding:8px 11px}
  .ck-go{height:40px;margin-top:10px}
  .ck-back{height:30px}
  .ck-sum__fine{margin-top:7px}
}