/* ============================================================
   GROWTH MIX — interactive channel planner
   Extends the incumbent world rather than inventing one: midnight
   ground, hairlines instead of cards, cobalt as a pointer, every
   rule in logical properties so RTL is structural.
   Selected state is carried by :has(input:checked) — the controls
   are real checkboxes and a real radio group, so the platform
   supplies keyboard handling and semantics and the stylesheet only
   has to show state.
   ============================================================ */

/* the header is fixed, so an anchor jump must clear it */
#growthmix{ scroll-margin-block-start:96px }

.mix{ margin-block-start:clamp(28px,4vw,44px) }
.mix-layout{
  display:grid; gap:clamp(24px,3.4vw,52px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1040px){
  .mix-layout{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr) }
}

/* ---------- steps ---------- */
.mix-steps{ display:grid; gap:clamp(26px,3vw,40px) }
.mix-step{ border:0; padding:0; margin:0; min-inline-size:0 }
.mix-step legend{
  display:flex; align-items:center; gap:11px; padding:0; margin-block-end:8px;
  font-family:var(--display); font-variation-settings:'wdth' 112; font-weight:700;
  font-size:clamp(17px,1.9vw,21px); line-height:1.2; color:var(--ink-inv);
}
.mix-n{
  flex:none; inline-size:26px; block-size:26px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--blue); color:var(--blue-lift);
  font-size:12px; font-weight:700; font-variation-settings:'wdth' 100;
  font-variant-numeric:tabular-nums;
}
.mix-hint{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:14.5px; color:var(--ink-inv-2); margin:0 0 16px; max-inline-size:52ch;
}
.mix-clear{
  margin-inline-start:auto; background:none; border:0; padding:4px 2px; cursor:pointer;
  font-family:var(--body); font-size:13.5px; color:var(--blue-lift);
  text-decoration:underline; text-underline-offset:3px;
}
.mix-clear:hover{ color:var(--ink-inv) }

/* ---------- options ---------- */
.mix-opts{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(166px,1fr));
}
.mix-opts-wide{ grid-template-columns:repeat(auto-fill,minmax(232px,1fr)) }
@media (max-width:420px){
  .mix-opts,.mix-opts-wide{ grid-template-columns:minmax(0,1fr) }
}

.mix-opt{
  position:relative; display:flex; align-items:center; gap:11px;
  min-block-size:54px; padding:13px 14px; cursor:pointer;
  border:1px solid var(--line-dark); background:rgba(242,239,233,.025);
  color:var(--ink-inv-2); font-size:15px; line-height:1.25;
  transition:border-color .18s cubic-bezier(.2,.7,.3,1),
             background-color .18s cubic-bezier(.2,.7,.3,1),
             color .18s cubic-bezier(.2,.7,.3,1);
}
/* the control stays in the tab order; only its paint is removed */
.mix-opt input{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  margin:0; opacity:0; cursor:pointer; appearance:none;
}
.mix-opt-t{ flex:1; min-inline-size:0 }
.mix-opt-note{ text-transform:none; letter-spacing:0; color:var(--ink-inv-2); opacity:.72 }

.mix-ic{
  flex:none; inline-size:21px; block-size:21px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--ink-inv-2); transition:color .18s;
}
.mix-tick{
  flex:none; inline-size:17px; block-size:17px;
  fill:none; stroke:var(--blue-lift); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.6); transition:opacity .16s, transform .16s cubic-bezier(.2,.9,.3,1);
}

.mix-opt:hover{ border-color:#3A4557; color:var(--ink-inv); background:rgba(242,239,233,.05) }
.mix-opt:hover .mix-ic{ color:var(--ink-inv) }

.mix-opt:has(input:checked){
  border-color:var(--blue); background:rgba(46,107,255,.15); color:var(--ink-inv);
}
.mix-opt:has(input:checked) .mix-ic{ color:var(--blue-lift) }
.mix-opt:has(input:checked) .mix-tick{ opacity:1; transform:scale(1) }

.mix-opt:has(input:focus-visible){
  outline:2px solid var(--blue-lift); outline-offset:3px;
}

/* ---------- result panel ---------- */
.mix-panel{
  /* elevation is declared once, as a border — no shadow underneath it */
  background:var(--midnight-2); border:1px solid var(--line-dark);
  padding:clamp(20px,2.4vw,30px);
}
.mix-out{ min-block-size:132px }

.mix-empty{ display:grid; gap:9px; padding-block:6px }
.mix-empty-h{
  font-family:var(--display); font-variation-settings:'wdth' 112; font-weight:700;
  font-size:19px; color:var(--ink-inv); margin:0;
}
.mix-empty p{ margin:0; font-size:14.5px; color:var(--ink-inv-2); max-inline-size:46ch }
.mix-todo{ display:grid; gap:7px; margin:4px 0 0; padding:0; list-style:none }
.mix-todo li{
  display:flex; align-items:center; gap:9px;
  font-size:14px; color:var(--ink-inv-2);
}
.mix-todo li::before{
  content:''; flex:none; inline-size:7px; block-size:7px; border-radius:50%;
  border:1px solid #3A4557;
}
.mix-todo li[data-done]{ color:var(--ink-inv) }
.mix-todo li[data-done]::before{ background:var(--blue); border-color:var(--blue) }

.mix-out-label{
  font-family:var(--display); font-weight:650; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-lift); margin:0 0 14px;
}
/* sequences read as hairline rows in this system, not as cards */
.mix-tier{ border-block-start:1px solid var(--line-dark); padding-block:15px }
.mix-tier:first-of-type{ border-block-start:0; padding-block-start:0 }
.mix-tier-h{
  font-family:var(--display); font-weight:650; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-inv-2); margin:0 0 10px;
}
.mix-item{ display:flex; align-items:flex-start; gap:11px; margin-block-start:11px }
.mix-item:first-of-type{ margin-block-start:0 }
.mix-item .mix-ic{ color:var(--blue-lift); margin-block-start:2px }
.mix-item-b{ min-inline-size:0 }
.mix-item-t{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-weight:600; color:var(--ink-inv); font-size:15px;
}
.mix-item-d{ margin:3px 0 0; font-size:14px; line-height:1.5; color:var(--ink-inv-2); max-inline-size:44ch }
/* sits inline after the channel name, so it needs its own gap */
.mix-flag{
  margin-inline-start:9px;
  font-family:var(--display); font-size:10.5px; font-weight:650; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue-lift);
  border:1px solid rgba(91,140,255,.45); padding:2px 7px; white-space:nowrap;
}
.mix-note{
  margin:16px 0 0; padding-block-start:14px; border-block-start:1px solid var(--line-dark);
  font-size:13px; color:var(--ink-inv-2);
}

/* ---------- contact ---------- */
.mix-contact{ margin-block-start:26px; padding-block-start:24px; border-block-start:1px solid var(--line-dark) }
.mix-contact-h{
  font-family:var(--display); font-variation-settings:'wdth' 112; font-weight:700;
  font-size:18px; color:var(--ink-inv); margin:0 0 16px;
}
.mix-fields{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr) }
@media (min-width:540px){
  .mix-fields{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mix-fields .field[data-field="email"]{ grid-column:1 / -1 }
}
.mix .field label{ display:flex; gap:6px; align-items:baseline }
.mix .field input{ border-radius:0 }
/* the default placeholder is too dim on this ground to clear 4.5:1 */
.mix .field input::placeholder{ color:#7E8A9C; opacity:1 }
.mix .field .err{ display:block; margin-block-start:6px; font-size:13px; color:#FF8A8A; min-block-size:1em }
.mix .field.invalid input{ border-color:#FF8A8A }

.mix-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:20px }
.mix-actions .btn{ cursor:pointer }
.mix-actions .btn-primary[disabled]{ opacity:.45; cursor:not-allowed }
.mix-privacy{ margin:14px 0 0; font-size:13px; color:var(--ink-inv-2) }

.mix .form-error{
  display:none; margin-block-start:16px; padding:12px 14px;
  border:1px solid rgba(255,138,138,.5); background:rgba(255,138,138,.08);
  color:#FFC9C9; font-size:14px;
}
.mix .form-error.show{ display:block }
.mix .form-success{ display:none }
.mix .form-success.show{ display:block }
.mix .form-success h3{
  font-family:var(--display); font-variation-settings:'wdth' 112; font-weight:700;
  font-size:21px; color:var(--ink-inv); margin:0 0 8px;
}
.mix .form-success p{ margin:0; font-size:15px; color:var(--ink-inv-2) }
/* when the request is away, the planner has done its job */
.mix.is-sent .mix-contact,.mix.is-sent .mix-out{ display:none }

/* ---------- motion ----------
   One authored moment: the mix settles in when it changes. Everything
   else is a state change, not an entrance. */
@keyframes mix-settle{
  from{ opacity:0; transform:translateY(7px) }
  to{ opacity:1; transform:none }
}
.mix-tier{ animation:mix-settle .42s cubic-bezier(.16,1,.3,1) backwards }
.mix-tier:nth-of-type(2){ animation-delay:.05s }
.mix-tier:nth-of-type(3){ animation-delay:.1s }

@media (prefers-reduced-motion:reduce){
  .mix-opt,.mix-ic,.mix-tick{ transition:none }
  .mix-tier{ animation:none }
  .mix-tick{ transform:none }
}