/* interactive.css: playable demos (#try-clockin, #missed-days, #try-pay, #try-wtd, #try-lang, #try-setup).
   Every class is prefixed play- or ix-. Reuses site.css tokens; transform/opacity motion only. */

.play, .ix-md, .ix-wtd {
  --p-bg: #fff; --p-ink: var(--ink); --p-muted: var(--muted); --p-line: var(--line); --p-field: #fff;
  --p-acc: var(--accent); --p-acc-soft: var(--accent-soft); --p-acc-ink: var(--accent-ink);
  --p-ok: var(--ok); --p-ok-bg: var(--ok-soft); --p-warn: var(--warn); --p-warn-bg: var(--warn-soft); --p-bad: var(--bad); --p-bad-bg: var(--bad-soft);
  --p-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1)); --p-dur: var(--dur-3, 360ms);
  --p-on-acc: #fff;
  min-width: 0;
}
.play [hidden], .ix-md [hidden], .ix-wtd [hidden], .ix-md-panel[hidden], .ix-wtd-panel[hidden] { display: none !important; }
.play .btn, .ix-md .btn { border: 0; }
.dark .play, .spotlight .ix-md {
  --p-on-acc: #0b0b13;
  --p-bg: rgba(255, 255, 255, .035); --p-ink: var(--dark-text); --p-muted: var(--dark-muted); --p-line: var(--dark-line); --p-field: rgba(255, 255, 255, .06);
  --p-acc: var(--accent-bright); --p-acc-soft: rgba(154, 150, 255, .14); --p-acc-ink: #d9d7ff;
  --p-ok: #5fd99a; --p-ok-bg: rgba(19, 128, 75, .22); --p-warn: #ffb37a; --p-warn-bg: rgba(181, 71, 11, .24); --p-bad: #ff8a80; --p-bad-bg: rgba(198, 42, 31, .24);
}

/* ---------- Card shell ---------- */
.play {
  margin-top: clamp(48px, 6vw, 80px); background: var(--p-bg); color: var(--p-ink);
  border: 1px solid var(--p-line); border-radius: var(--radius-lg, 28px);
  padding: clamp(18px, 3.2vw, 40px); box-shadow: 0 30px 70px -45px rgba(20, 16, 90, .35);
}
.dark .play { box-shadow: none; }
.play-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: clamp(16px, 2.4vw, 28px); }
.play-title { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.play-tag {
  display: inline-flex; align-items: center; flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; background: var(--p-acc-soft, var(--accent-soft)); color: var(--p-acc-ink, var(--accent-ink));
}
.play-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) { .play-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.play-cap { margin-top: 20px; font-size: 13px; color: var(--p-muted); line-height: 1.5; }
.ix-hint { font-size: 13px; color: var(--p-muted); line-height: 1.5; margin-top: 8px; }
.ix-sub { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--p-muted); margin-bottom: 10px; }
.ix-h4 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Form controls ---------- */
.ix-fs { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; display: grid; gap: 12px; }
.ix-fs > legend, .ix-wds > legend, .ix-seg > legend { font-size: 13px; font-weight: 700; color: var(--p-muted); padding: 0; margin-bottom: 10px; }
.ix-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-bottom: 14px; }
.ix-f { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--p-ink); min-width: 0; }
.ix-f small, .ix-range small { font-weight: 500; font-size: 12px; color: var(--p-muted); }
.ix-f input, .ix-f select {
  font: inherit; font-weight: 500; font-size: 16px; min-height: 44px; width: 100%; min-width: 0; padding: 8px 12px;
  border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-field); color: var(--p-ink);
}
.dark .ix-f select option { color: #111; }
.ix-range { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; }
.ix-range > span { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ix-range b { font-variant-numeric: tabular-nums; color: var(--p-acc); font-weight: 700; }
.ix-range input[type=range], .ix-range input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--p-acc); background: transparent; }
.ix-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 4px 12px; }
.ix-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.ix-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--p-acc); }
.ix-btn, .ix-disc, .ix-chip, .ix-wd {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--p-line); background: var(--p-field); color: var(--p-ink);
  transition: transform .2s var(--p-ease), background-color .2s, border-color .2s;
}
.ix-btn:hover, .ix-disc:hover, .ix-chip:hover, .ix-wd:hover { border-color: var(--p-acc); }
.ix-btn:active, .ix-chip:active, .ix-wd:active { transform: scale(.97); }
.ix-chip[aria-pressed=true], .ix-wd[aria-pressed=true], .ix-btn[aria-pressed=true], .ix-chip[aria-checked=true] {
  background: var(--p-acc); border-color: var(--p-acc); color: var(--p-on-acc);
}
.ix-disc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border-radius: 14px; text-align: left; margin-top: 10px; }
.ix-disc::after { content: "+"; font-size: 18px; transition: transform .25s var(--p-ease); }
.ix-disc[aria-expanded=true]::after { transform: rotate(45deg); }
.ix-wtd-toggle { width: auto; }
.ix-wtd-toggle::after { content: none; }
.play :focus-visible, .ix-md :focus-visible, .ix-wtd :focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.ix-seg { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 0; }
.ix-seg legend { width: 100%; }
.ix-seg label { position: relative; flex: 1 1 0; min-width: 0; }
.ix-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ix-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--p-line); font-weight: 600; font-size: 14.5px; background: var(--p-field); }
.ix-seg label:first-of-type span { border-radius: 12px 0 0 12px; }
.ix-seg label:last-of-type span { border-radius: 0 12px 12px 0; border-left: 0; }
.ix-seg input:checked + span { background: var(--p-acc); border-color: var(--p-acc); color: var(--p-on-acc); }
.ix-seg input:focus-visible + span { outline: 3px solid var(--accent-bright); outline-offset: 2px; }

/* ---------- Result states (icon + text, never colour alone) ---------- */
.ix-state { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid transparent; animation: ix-pop var(--p-dur) var(--p-ease); }
.ix-state > svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ix-state b { display: block; font-size: 16px; letter-spacing: -.01em; }
.ix-state p { font-size: 14px; line-height: 1.5; margin-top: 4px; color: var(--p-ink); }
.ix-ok { background: var(--p-ok-bg); color: var(--p-ok); }
.ix-warn { background: var(--p-warn-bg); color: var(--p-warn); }
.ix-no { background: var(--p-bad-bg); color: var(--p-bad); }
.ix-code { display: inline-block; margin-top: 6px; font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .85; }
@keyframes ix-pop { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Clock-in simulator ---------- */
.ix-map { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; touch-action: none; cursor: crosshair; user-select: none; }
.ix-m-bg { fill: #e9e8f3; }
.ix-m-blocks rect { fill: #fff; }
.ix-m-blocks .ix-m-park { fill: #dff0e5; }
.ix-fence { fill: rgba(74, 67, 217, .1); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }
.ix-pin path { fill: var(--accent-ink); }
.ix-pin .ix-pin-dot { fill: #fff; }
.ix-scale path { stroke: var(--ink-2); stroke-width: 2; fill: none; }
.ix-scale text { font: 600 12px var(--font); fill: var(--ink-2); }
.ix-me { cursor: grab; outline: none; }
.ix-me:focus-visible .ix-dot { stroke: var(--accent-bright); stroke-width: 5; }
.ix-dot { fill: #1f6feb; stroke: #fff; stroke-width: 3; }
.ix-halo { fill: rgba(31, 111, 235, .2); stroke: rgba(31, 111, 235, .5); stroke-width: 1; }
.ix-halo-pulse { fill: none; stroke: rgba(31, 111, 235, .45); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ix-pulse 2.4s var(--p-ease) infinite; }
@keyframes ix-pulse { 0% { opacity: .9; transform: scale(.4); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
#try-clockin[data-state=outside] .ix-fence, #try-clockin[data-state=uncertain] .ix-fence { stroke: var(--warn); }
.ix-ci-btn { width: 100%; margin-top: 4px; }
.ix-ci-result { display: block; margin-top: 16px; min-height: 128px; }
.ix-ci-queue { margin-top: 14px; padding: 14px; border: 1px dashed var(--p-line); border-radius: 14px; }
.ix-q-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.ix-q-head svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.ix-ci-qlist { display: grid; gap: 6px; margin-top: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ix-ci-qlist li { display: flex; align-items: center; gap: 8px; transition: transform .32s var(--p-ease), opacity .32s; }
.ix-ci-qlist li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ix-q-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.ix-ci-qlist li.ix-fly { transform: translateX(40px); opacity: 0; }
.ix-ci-qlist li.ix-sent { animation: ix-pop var(--p-dur) var(--p-ease); }

/* ---------- Missed-day decision ---------- */
.ix-md { display: grid; gap: 14px; min-width: 0; color: var(--p-ink); }
.ix-md-card { position: relative; margin: 0; }
.ix-sample { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.ix-md-card .play-tag { background: var(--accent-soft); color: var(--accent-ink); }
.ix-md-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.ix-md-choices .q { margin-top: 16px; }
.ix-md-choices .choice { cursor: pointer; min-height: 48px; position: relative; transition: border-color .2s, box-shadow .2s; }
.ix-md-choices .choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 67, 217, .14); }
.ix-md-choices .choice:has(input:checked) .radio { border: 5px solid var(--accent); }
.ix-md-choices .choice:not(:has(input:checked)) .radio { border: 2px solid var(--line-2); }
.ix-md-choices .choice:has(input:focus-visible) { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.ix-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ix-md-choices:disabled .choice { cursor: default; opacity: .75; }
.ix-md-act { display: inline-flex; align-items: center; gap: 8px; }
.ix-md .foot { flex-wrap: wrap; }
.ix-md-decide { white-space: normal; text-align: center; min-height: 44px; height: auto; }
.ix-md-check { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .3s var(--p-ease), transform .3s var(--p-ease); }
.ix-md-check.ix-on { opacity: 1; transform: none; }
.ix-md-card.ix-dimmed > :not(.ix-md-dim):not(.ix-sample) { opacity: .28; transition: opacity .3s; }
.ix-md-dim { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); background: var(--ink); color: #fff; padding: 14px 16px; border-radius: 14px; font-weight: 600; font-size: 14.5px; line-height: 1.45; text-align: center; animation: ix-pop var(--p-dur) var(--p-ease); }
.ix-md-out { display: grid; gap: 6px; min-height: 76px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--dark-line); font-size: 14.5px; color: var(--dark-text); }
.ix-md-gross b { font-variant-numeric: tabular-nums; font-size: 17px; }
.ix-md-verdict { font-weight: 600; }
.ix-md-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ix-md-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-bright); }
.ix-md-panel { padding: 14px 2px 4px; display: grid; gap: 8px; animation: ix-pop var(--p-dur) var(--p-ease); }
.ix-wds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ix-wds legend { width: 100%; }
.ix-wd { padding: 0 10px; min-width: 44px; }
.ix-md-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 360px; }
.ix-md-cal > * { display: grid; place-items: center; min-height: 40px; font-size: 13px; font-variant-numeric: tabular-nums; border-radius: 10px; }
.ix-cal-h { font-weight: 700; color: var(--p-muted); min-height: 24px !important; }
.ix-cal-off { color: var(--p-muted); opacity: .55; }
.ix-cal-d { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--p-line); background: var(--p-field); color: var(--p-ink); cursor: pointer; padding: 0; min-width: 0; }
.ix-cal-d[aria-pressed=true] { background: var(--p-warn-bg); color: var(--p-warn); text-decoration: line-through; }
.ix-cal-d.ix-cal-miss { box-shadow: inset 0 0 0 2px var(--p-acc); }
.ix-md-days { font-size: 14px; line-height: 1.6; }

/* payroll row flash (opacity only) */
@keyframes ix-flash { 0%, 100% { opacity: 1; } 30% { opacity: .35; } 60% { opacity: 1; } 80% { opacity: .6; } }
tr.ix-flash { animation: ix-flash 1.1s ease; }

/* ---------- Pay calculator ---------- */
.ix-pay-form .ix-only-h { display: none; }
.ix-pay-form.ix-hourly .ix-only-h { display: grid; }
.ix-pay-form.ix-hourly .ix-only-m { display: none; }
.ix-pay-side { display: grid; gap: 14px; position: sticky; top: 96px; }
.ix-phonecard { background: #fff; color: var(--ink); border-radius: 24px; padding: 20px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.ix-phonecard > small { color: #8a8a96; font-size: 13px; }
.ix-pay-gross { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 2px 0 14px; }
.ix-phonecard .ix-sub { color: #8a8a96; }
.ix-pay-out { display: block; min-height: 190px; }
.ix-receipt { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ix-receipt li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; font-weight: 600; font-size: 14.5px; }
.ix-receipt li + li { border-top: 1px solid var(--line); }
.ix-receipt small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.ix-num { font-variant-numeric: tabular-nums; text-align: right; }
.ix-neg { color: var(--bad); }
.ix-warnline { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; font-weight: 600; }
.ix-details { font-size: 14px; color: var(--p-muted); }
.ix-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--p-ink); }
.ix-details p { font-variant-numeric: tabular-nums; line-height: 1.6; }
.ix-pay-copy { justify-self: start; }

/* ---------- Working-time check ---------- */
.ix-wtd { grid-column: 1 / -1; display: grid; gap: 10px; min-width: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.ix-wtd-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.ix-wtd-panel { display: grid; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(14px, 2.4vw, 28px); animation: ix-pop var(--p-dur) var(--p-ease); }
.ix-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-wtd-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .ix-wtd-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.ix-wtd-a, .ix-wtd-b { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ix-bars { position: relative; display: flex; align-items: stretch; gap: 3px; height: 170px; padding-bottom: 18px; margin-top: 6px; touch-action: none; }
.ix-bar { position: relative; flex: 1 1 0; min-width: 12px; border-radius: 6px 6px 3px 3px; background: var(--bg-soft); cursor: ns-resize; outline: none; }
.ix-bar:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 1px; }
.ix-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: inherit; background: var(--accent); transform-origin: bottom; transform: scaleY(.5714); transition: transform .2s var(--p-ease); }
.ix-bar.ix-over .ix-bar-fill { background: var(--warn); }
.ix-bar.ix-leave .ix-bar-fill { background: transparent; }
.ix-bar.ix-leave { background: repeating-linear-gradient(135deg, var(--bg-soft) 0 4px, var(--line-2) 4px 6px); }
.ix-bar.ix-sel { box-shadow: 0 0 0 2px var(--accent-ink); }
.ix-bar-n { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ix-capline { --cap: .6857; position: absolute; left: 0; right: 0; bottom: calc(18px + (100% - 18px) * var(--cap)); border-top: 2px dashed var(--ink-2); z-index: 2; pointer-events: none; }
.ix-capline span { position: absolute; right: 0; top: -20px; font-size: 11px; font-weight: 700; background: #fff; padding: 0 4px; border-radius: 4px; }
.ix-wk-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ix-wk-name { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 9em; }
.ix-wk-ctl .ix-btn[data-step] { min-width: 44px; padding: 0; font-size: 18px; }
.ix-wtd-avg, .ix-wtd-rest { display: block; min-height: 52px; font-size: 15px; line-height: 1.5; }
.ix-t-ok { color: var(--ok); font-weight: 600; }
.ix-t-warn { color: var(--warn); font-weight: 600; }

/* ---------- Language previewer ---------- */
.ix-lang-side { display: grid; gap: 12px; min-width: 0; }
.ix-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; padding: 4px; }
.ix-chips .ix-chip { min-height: 40px; padding: 0 12px; font-size: 14px; }
@media (pointer: coarse) { .ix-chips .ix-chip { min-height: 44px; } }
.ix-chip[hidden] { display: none; }
.ix-phone { justify-self: center; width: min(100%, 270px); aspect-ratio: 9 / 18.5; border-radius: 40px; padding: 10px; background: #1b1b24; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.ix-ph-screen { height: 100%; border-radius: 31px; background: #f4f4f8; color: #111; display: flex; flex-direction: column; padding: 34px 16px 12px; gap: 10px; transition: opacity .15s linear; overflow: hidden; }
.ix-ph-screen.ix-fade { opacity: 0; }
.ix-ph-title { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.ix-ph-state { min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--ok); }
.ix-ph-timer { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ix-ph-main { margin-top: auto; font: inherit; font-size: 16px; font-weight: 700; min-height: 48px; border: 0; border-radius: 16px; background: var(--accent); color: #fff; cursor: pointer; padding: 6px 12px; transition: transform .2s var(--p-ease); }
.ix-ph-main:active { transform: scale(.97); }
.ix-ph-breaks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ix-ph-breaks span { background: #fff; border-radius: 12px; padding: 8px 6px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ix-ph-tabs { display: flex; justify-content: space-around; gap: 4px; border-top: 1px solid #e3e3ea; padding-top: 8px; font-size: 11px; color: #8a8a96; }
.ix-ph-tabs span { text-align: center; overflow-wrap: anywhere; }
.ix-ph-tabs .on { color: var(--accent); font-weight: 700; }

/* ---------- Starting setup ---------- */
.ix-step > legend { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--p-ink); }
.ix-k { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.ix-step { padding: 16px; border: 1px solid var(--p-line); border-radius: 18px; animation: ix-slide var(--p-dur) var(--p-ease) both; }
.ix-step:nth-child(2) { animation-delay: 60ms; }
.ix-step:nth-child(3) { animation-delay: 120ms; }
@keyframes ix-slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.ix-setup-side { display: grid; gap: 12px; align-content: start; }
.ix-setup-out { display: block; min-height: 380px; }
.ix-kvs { display: grid; border: 1px solid var(--p-line); border-radius: 16px; overflow: hidden; margin: 0; }
.ix-kv { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 10px 14px; font-size: 14px; }
.ix-kv + .ix-kv { border-top: 1px solid var(--p-line); }
.ix-kv dt { color: var(--p-muted); font-weight: 600; }
.ix-kv dd { margin: 0; font-weight: 600; }
.ix-free { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ok-soft); color: #0f6e40; font-size: 15px; }
#try-setup .btn-store { justify-self: start; }
@media (max-width: 480px) { .ix-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Gallery pay mock caption line */
.ix-illus { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

@media (max-width: 640px) {
  .play { border-radius: 22px; }
  .play-head { flex-direction: column; }
  .ix-pay-side { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .play *, .ix-md *, .ix-wtd *, tr.ix-flash { animation: none !important; transition: none !important; }
  .ix-halo-pulse { display: none; }
}

/* Two-column field grids where labels differ in length */
.ix-pay-form .ix-fields, .ix-md-panel .ix-fields, .ix-wtd-b .ix-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ix-f { grid-template-rows: minmax(1.4em, auto) auto; align-content: start; }
.ix-wtd-toggle { justify-self: start; width: auto; }
@media (max-width: 480px) {
  .ix-wtd-panel { padding: 12px 8px; border-radius: 18px; }
  .ix-bars { gap: 2px; }
  .ix-bar { min-width: 8px; }
  .ix-bar-n { font-size: 8.5px; }
  .ix-wtd .ix-fields { grid-template-columns: minmax(0, 1fr); }
}
.ix-wtd-panel, .ix-wtd-cols, .ix-wtd-a { min-width: 0; max-width: 100%; }
.ix-sub2 { margin-top: 14px; }
@media (max-width: 480px) { .ix-wk-name { min-width: 0; flex-basis: 100%; } }
.ix-map { touch-action: pan-y; }
.ix-me { touch-action: none; }
/* contrast fixes */
.ix-state b { color: var(--p-ink); }
.ix-phonecard > small, .ix-phonecard .ix-sub { color: var(--muted); }
.ix-ph-tabs { color: #55556b; }