/* Career Calling Resume: the job readiness kit (/kit/, /kit/interview/, /kit/new-to-australia/, /for-providers/, the home
   band and the /start/ kit strip). Light first, on the resume tokens. A provider's colour arrives from kit.js as --kit
   (decoration), --kit-deep (text and buttons, at least 4.6:1 on white), --kit-on, --kit-tint and --kit-line. */
:root { --kit: var(--navy); --kit-deep: var(--navy); --kit-on: #fff; --kit-tint: var(--navy-tint); --kit-line: var(--line-2); }

.eyebrow { font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mag-deep); margin: 0 0 14px; }
.kit-brand .is-kit .eyebrow, .kit-brand.is-kit .eyebrow { color: var(--kit-deep); }

/* ---------- kit hero ---------- */
.kit-hero { position: relative; padding: 40px 0 96px; overflow: hidden; border-bottom: 1px solid var(--line); }
.kit-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 70% at 80% 35%, rgba(204, 0, 144, .07), transparent 70%), radial-gradient(45% 55% at 96% 92%, rgba(1, 33, 110, .07), transparent 70%); }
.kit-brand .kit-hero::before { background: radial-gradient(55% 70% at 80% 35%, var(--kit-tint), transparent 70%); }
.kit-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.kit-hero h1 { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.01; letter-spacing: -.025em; max-width: 13ch; margin-bottom: 22px; }
.kit-hero .lead { margin-bottom: 30px; }

.kit-unlock { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px 18px; box-shadow: var(--shadow-card); max-width: 560px; }
.kit-unlock-h { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.kit-unlock-h .ico { color: var(--mag-deep); }
.kit-unlock-row { display: flex; gap: 10px; }
.kit-unlock-row .kit-code { flex: 1 1 auto; min-width: 0; font: 600 18px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.kit-unlock-row .btn { flex: none; }
.kit-unlock .hint { margin-top: 10px; }
.kit-unlock-sm { box-shadow: none; background: var(--paper); margin: 20px 0 16px; }

.kit-mast { display: flex; gap: 20px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--kit); border-radius: 18px; padding: 20px 24px; box-shadow: var(--shadow-card); max-width: 600px; }
.kit-mast[hidden] { display: none; }
.kit-mast-logo { flex: none; display: grid; place-items: center; width: 132px; height: 72px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.kit-mast-logo[hidden] { display: none; }
.kit-mast-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* a white or very light logo on a transparent background (kit.js checks the pixels) sits on the deep brand colour */
.kit-mast-logo.is-light, .kit-strip-logo.is-light { background: var(--kit-deep); border-color: var(--kit-deep); }
.kit-mast-txt { min-width: 0; }
.kit-from { margin: 0 0 4px; font-size: 15px; color: var(--ink-2); }
.kit-from b { display: block; font: 500 26px/1.15 var(--serif); color: var(--ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.kit-welcome { margin: 8px 0 6px; color: var(--ink-2); font-size: 16px; }
.kit-mast-act { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 14px; color: var(--muted); }
.kit-code-show b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink); letter-spacing: .04em; }
.kit-code-show[hidden] { display: none; }
.kit-mast-side { margin: 0 0 28px; padding: 16px 18px; box-shadow: none; gap: 14px; }
.kit-mast-side .kit-mast-logo { width: 96px; height: 54px; }
.kit-mast-side .kit-from b { font-size: 21px; }
.kit-mast-side .kit-welcome { display: none; }
.kit-mast-page { margin-top: 28px; }

/* the kit picture: three tiles on the brand loop */
.kit-art { position: relative; min-height: 460px; }
.loop-kit { inset: 6% 2% 0 6%; }
.kit-brand .loop-kit .lp-m, .kit-brand .loop-kit .lp-mh { stroke: var(--kit); }
.ka { position: absolute; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-sheet); padding: 20px 22px; }
.ka-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 14px var(--sans); color: var(--ink); }
.ka-h .ico { width: 20px; height: 20px; color: var(--mag-deep); }
.kit-brand .ka-h .ico { color: var(--kit-deep); }
.ka-resume { left: 14%; top: 4%; width: 46%; transform: rotate(-3deg); }
.ka-l { display: block; height: 7px; border-radius: 4px; background: var(--paper-2); margin: 0 0 9px; }
.ka-l.w1 { width: 62%; background: var(--navy-tint); height: 10px; }
.ka-l.w2 { width: 92%; } .ka-l.w3 { width: 76%; }
.ka-files { display: flex; gap: 8px; margin: 14px 0 0; }
.ka-files span { font: 600 12px var(--sans); padding: 3px 9px; border-radius: 999px; background: var(--mag-tint); color: var(--mag-deep); }
.kit-brand .ka-files span { background: var(--kit-tint); color: var(--kit-deep); }
.ka-iv { right: 2%; top: 30%; width: 58%; z-index: 2; }
.ka-q { font: 500 20px/1.25 var(--serif); color: var(--ink); margin: 0 0 14px; }
.ka-rub { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ka-rub li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.ka-rub .m { width: 92px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--kit-deep) var(--w), var(--paper-2) var(--w)); }
.ka-rub .m3 { --w: 60%; } .ka-rub .m4 { --w: 80%; } .ka-rub .m5 { --w: 100%; }
.ka-nta { left: 6%; bottom: 2%; width: 50%; transform: rotate(2deg); background: var(--navy); color: #fff; }
.ka-nta .ka-h, .ka-nta .ka-h .ico { color: #fff; }
.ka-s { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .86); }

/* ---------- tool cards ---------- */
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tool-a { display: flex; flex-direction: column; height: 100%; padding: 32px 30px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: box-shadow .35s var(--ease), border-color .2s; }
@media (prefers-reduced-motion: no-preference) { .tool-a { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; } .tool-a:hover { transform: translateY(-3px); } }
.tool-a:hover { border-color: var(--kit-line); color: var(--ink); box-shadow: 0 1px 0 rgba(14, 26, 58, .04), 0 26px 50px -28px rgba(14, 26, 58, .5); }
.tool-a h3 { font: 500 28px/1.12 var(--serif); letter-spacing: -.015em; margin: 18px 0 12px; }
.tool-a > p { color: var(--ink-2); font-size: 16px; }
.tool-a .tick-list { margin-bottom: 18px; font-size: 15px; }
.tool-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--mag-tint); color: var(--mag-deep); flex: none; }
.kit-brand .tool-ico { background: var(--kit-tint); color: var(--kit-deep); }
.tool-ico .ico { width: 26px; height: 26px; }
.tool-go { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); }
.kit-brand .tool-btn { color: var(--kit-deep); }
.tool-a:hover .arr { transform: translateX(3px); }
.tool-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tool-note .ico { width: 16px; height: 16px; }

/* kit coloured actions once a provider's code is open; the focus ring follows the brand (deep shade, at least 4.5:1) */
.kit-brand :focus-visible { outline-color: var(--kit-deep); }
.kit-brand .is-kit .btn-primary, .kit-brand.is-kit .btn-primary { background: var(--kit-deep); color: #fff; box-shadow: 0 10px 24px -14px rgba(14, 26, 58, .6); }
.kit-brand.is-kit .btn-primary:hover { background: var(--ink); }
.kit-brand.is-kit .phead h1 em, .kit-brand.is-kit .kit-hero h1 em { color: var(--kit-deep); }

/* ---------- home band ---------- */
.kit-band { background: linear-gradient(180deg, var(--paper), var(--paper-2)); border-top: 1px solid var(--line); }
.kit-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.kit-band h2 { margin-bottom: 20px; max-width: 15ch; }
.kit-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kit-mini li { display: flex; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow-card); }
.kit-mini b { display: block; font: 500 22px/1.2 var(--serif); }
.kit-mini span:not(.tool-ico) { color: var(--ink-2); font-size: 15px; }

/* ---------- /start/ kit strip ---------- */
.kit-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: var(--kit-tint); border: 1px solid var(--kit-line); }
.kit-strip[hidden] { display: none; }
.kit-strip p { margin: 0; flex: 1 1 240px; font-size: 15px; color: var(--ink); }
.kit-strip-logo { display: grid; place-items: center; width: 84px; height: 40px; background: #fff; border-radius: 8px; padding: 4px; }
.kit-strip-logo[hidden] { display: none; }
.kit-strip-logo img { max-height: 100%; width: auto; object-fit: contain; }

/* ---------- interview practice ---------- */
.iv { padding: 48px 0 112px; }
.iv-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
.iv-side { position: sticky; top: 104px; }
.iv-side h1 { font-size: clamp(38px, 3.6vw, 52px); line-height: 1.02; margin-bottom: 12px; }
.iv-side .lead { font-size: 17px; margin-bottom: 26px; }
.iv-rubric { border-top: 1px solid var(--line-2); padding-top: 18px; margin-bottom: 22px; }
.iv-rubric .h4 { margin-bottom: 10px; }
.rub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rub-list li { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.rub-list b { display: block; color: var(--ink); font-size: 15px; }
.iv-main { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 44px 48px 40px; box-shadow: var(--shadow-card); min-width: 0; }
.iv-view { animation: stepin .5s var(--ease) both; }
.iv-h { font: 500 clamp(30px, 3vw, 40px)/1.08 var(--serif); letter-spacing: -.02em; margin: 0 0 12px; outline: none; }
.iv-intro { color: var(--ink-2); max-width: 60ch; margin-bottom: 28px; }
.iv-sen .opt-card { padding: 14px 12px 14px 40px; }
.iv-sen .opt-card input { left: 13px; top: 16px; }
.iv-sen .oc-s { font-size: 13px; color: var(--muted); }
.iv-resume { margin-top: 18px; }

.iv-wait { text-align: center; padding: 36px 0 24px; }
.iv-wait .iv-h { margin-top: 24px; }
.iv-wait-msg { color: var(--ink-2); max-width: 46ch; margin: 0 auto 10px; }
.iv-wait-art { display: grid; gap: 10px; width: min(360px, 100%); margin: 0 auto; }
.iv-wait-art i { display: block; height: 54px; border-radius: 14px; background: linear-gradient(90deg, var(--paper-2) 0, var(--paper) 40%, var(--paper-2) 80%) 0 0 / 300% 100%; border: 1px solid var(--line); }
.iv-wait-art i:nth-child(2) { width: 86%; } .iv-wait-art i:nth-child(3) { width: 70%; }
@media (prefers-reduced-motion: no-preference) { .iv-wait-art i { animation: shimmer 1.6s linear infinite; } .iv-wait-art i:nth-child(2) { animation-delay: .2s; } .iv-wait-art i:nth-child(3) { animation-delay: .4s; } }
@keyframes shimmer { to { background-position: -300% 0; } }

.iv-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 26px; }
.iv-count { margin: 0; font: 600 14px var(--sans); color: var(--mag-deep); }
.iv-done { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-2); font-weight: 500; color: var(--muted); }
.iv-bar { flex: 1 0 100%; height: 4px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.iv-bar i { display: block; height: 100%; width: 0; background: var(--kit-deep); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) { .iv-bar i { transition: width .4s var(--ease); } }
.kit-brand .iv-count { color: var(--kit-deep); }
.iv-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.iv-dot { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; font: 600 14px var(--sans); color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; }
.iv-dot.is-done { border-color: var(--kit-deep); color: var(--kit-deep); background: var(--kit-tint); }
.iv-dot.is-cur { background: var(--kit-deep); border-color: var(--kit-deep); color: #fff; box-shadow: 0 0 0 4px var(--kit-tint); }
.iv-kind { display: inline-block; font-size: 13.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin: 0 0 14px; background: var(--navy-tint); color: var(--navy); }
.iv-kind-role { background: var(--mag-tint); color: var(--mag-deep); }
.iv-qt { font: 500 clamp(26px, 2.6vw, 34px)/1.18 var(--serif); letter-spacing: -.015em; margin: 0 0 16px; outline: none; max-width: 34ch; }
.iv-tip { margin: 0 0 24px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.iv-tip summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 15px; color: var(--navy); }
.iv-tip p { margin: 0 16px 12px; color: var(--ink-2); }
.iv-fld textarea { min-height: 220px; font-size: 17px; line-height: 1.6; }
.iv-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.iv-mic .ico { width: 18px; height: 18px; }
.iv-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.iv-voice[hidden], .iv-voice [hidden] { display: none; }
.iv-voice .btn-link { display: inline-flex; align-items: center; gap: 6px; }
.iv-voice .btn-link .ico { width: 16px; height: 16px; }
.kit-brand .iv-voice .btn-link { color: var(--kit-deep); }
.iv-voice-notice { margin: 14px 0 4px; padding: 18px 20px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-2); }
.iv-voice-notice[hidden] { display: none; }
.iv-voice-notice h3 { font: 600 16px var(--sans); margin: 0 0 8px; outline: none; }
.iv-voice-notice p { font-size: 15px; color: var(--ink-2); margin: 0 0 10px; max-width: 62ch; }
.iv-voice-notice .btns { margin-top: 12px; }
.iv-mic.is-on { border-color: var(--err); color: var(--err); background: #FDF1F0; }
.iv-mic.is-on .ico { animation: none; }
@media (prefers-reduced-motion: no-preference) { .iv-mic.is-on .ico { animation: mic 1.2s ease-in-out infinite; } }
@keyframes mic { 50% { transform: scale(1.18); } }
.iv-wc { margin: 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.iv-wc.is-in { color: var(--ok); font-weight: 600; }
.iv-wc.is-over { color: var(--err); }
.iv-mic-note { margin: 8px 0 0; }
.iv-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.iv-nav [data-prev][hidden] + * { margin-left: auto; }
.iv-nav .btn[data-next], .iv-nav .btn[data-finish] { margin-left: auto; }
.iv-saved { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; }
.iv-saved .ico { width: 16px; height: 16px; color: var(--ok); }

/* results */
.iv-res-head { margin-bottom: 22px; }
.iv-res-role { color: var(--ink-2); margin-bottom: 6px; }
.iv-overall { list-style: none; margin: 0 0 22px; padding: 18px 20px; display: grid; gap: 10px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.iv-overall li, .iv-scores li { display: grid; grid-template-columns: minmax(84px, 120px) auto 1fr; gap: 14px; align-items: center; font-size: 15px; }
.iv-ov-k { font-weight: 600; }
.iv-ov-v, .iv-scores b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.meter { display: inline-flex; gap: 4px; }
.meter i { display: block; width: 26px; height: 9px; border-radius: 5px; background: var(--paper-2); border: 1px solid var(--line-2); }
.meter i.on { background: var(--kit-deep); border-color: var(--kit-deep); }
.iv-summary { margin-bottom: 8px; }
.iv-summary h4, .iv-good h4, .iv-fix h4, .iv-stronger h4, .iv-mine h4 { font: 600 15px var(--sans); margin: 0 0 8px; color: var(--ink); }
.iv-list { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); }
.iv-list li { margin-bottom: 6px; }
.iv-res-acts { margin: 6px 0 28px; }
.iv-item { border-top: 1px solid var(--line-2); }
.iv-item:last-of-type { border-bottom: 1px solid var(--line-2); }
.iv-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding: 20px 4px; }
.iv-item summary::-webkit-details-marker { display: none; }
.iv-item-n { font: 600 13px var(--sans); color: var(--mag-deep); white-space: nowrap; }
.kit-brand .iv-item-n { color: var(--kit-deep); }
.iv-item-q { font-weight: 600; color: var(--ink); }
.iv-item-avg { font: 600 14px var(--sans); padding: 3px 10px; border-radius: 999px; background: var(--kit-tint); color: var(--kit-deep); white-space: nowrap; }
.iv-item-avg.is-none { background: var(--paper-2); color: var(--muted); }
.iv-item summary:hover .iv-item-q { text-decoration: underline; text-underline-offset: 3px; }
.iv-item-b { padding: 0 4px 24px; }
.iv-mine p { white-space: pre-line; background: var(--paper); border-radius: 12px; padding: 14px 16px; color: var(--ink-2); font-size: 15.5px; }
.iv-mine p.is-none { font-style: italic; }
.iv-scores { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.iv-stronger { border-radius: 16px; padding: 18px 20px 6px; background: var(--kit-tint); border: 1px solid var(--kit-line); }
.iv-stronger-t { white-space: pre-line; color: var(--ink); font-size: 16px; }
.iv-next { margin-top: 28px; }
.iv-problem .btns { margin-top: 18px; }

/* ---------- New to Australia guide ---------- */
.nta-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nta-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.nta-card h3 { font: 500 25px/1.15 var(--serif); letter-spacing: -.01em; margin-bottom: 10px; }
.nta-card p { color: var(--ink-2); font-size: 16px; }
.nta-card a { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.nta-card a:hover .arr { transform: translateX(3px); }
.kit-brand .nta-card a { color: var(--kit-deep); }
.nta-notice { margin: 32px 0 0; }
.nta-btns { margin-top: 0; }

/* ---------- for providers ---------- */
/* hero picture: the same kit card in three sample colours, the front one upright */
.is-providers .phead-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pv-art { height: 440px; position: relative; }
.pv-c2 > *, .pv-c3 > * { visibility: hidden; }
.pv-card { position: absolute; width: min(400px, 92%); right: 0; background: var(--card); border-radius: 20px; box-shadow: var(--shadow-sheet); padding: 18px 20px 20px; border-top: 6px solid var(--s); }
.pv-c1 { top: 62px; right: 7%; z-index: 3; }
.pv-c2 { top: 30px; right: 3%; z-index: 2; transform: rotate(3deg); opacity: .96; }
.pv-c3 { top: 0; right: 0; z-index: 1; transform: rotate(6deg); opacity: .9; }
.pv-mast { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pv-logo { display: grid; place-items: center; width: 74px; height: 44px; border-radius: 10px; border: 1.5px dashed var(--line-2); font-size: 12px; color: var(--muted); flex: none; }
.pv-name { font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.pv-name b { display: block; font: 500 19px/1.2 var(--serif); color: var(--ink); }
.pv-tl { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pv-tl li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--s) 10%, #fff); font-size: 14px; font-weight: 600; color: var(--ink); }
.pv-tl .ico { width: 18px; height: 18px; color: var(--sd); }
.pv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--sd); color: #fff; font: 600 14px var(--sans); }
.pv-btn .arr { width: 16px; height: 16px; }
.pv-cap { position: absolute; left: 0; bottom: 0; right: 0; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.pv-cap i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--s); box-shadow: inset 0 0 0 1px rgba(14, 26, 58, .12); }
.pv-cap i:last-of-type { margin-right: 6px; }
.pv-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pv-who li { border-top: 2px solid var(--navy); padding-top: 18px; }
.pv-who h3 { font: 500 24px/1.15 var(--serif); margin-bottom: 8px; }
.pv-who p { color: var(--ink-2); margin: 0; font-size: 16px; }
.pv-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pv-tools li { display: flex; gap: 18px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.pv-tools h3 { margin-bottom: 6px; }
.pv-tools p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.panel h3 .ico { vertical-align: -4px; margin-right: 6px; color: var(--mag-deep); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tools { grid-template-columns: 1fr; max-width: 720px; }
  .pv-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .is-providers .phead-in { grid-template-columns: 1fr; }
  .is-providers .pv-art { display: block; height: 420px; max-width: 460px; }
  .kit-hero-grid, .kit-band-grid, .iv-grid { grid-template-columns: 1fr; gap: 36px; }
  .kit-art { min-height: 400px; max-width: 560px; }
  .iv-side { position: static; }
  .iv-rubric { display: none; }
  .nta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kit-hero { padding: 24px 0 64px; }
  .kit-unlock { padding: 20px 18px 14px; }
  .kit-unlock-row { flex-direction: column; }
  .kit-unlock-row .btn { width: 100%; }
  .kit-mast { flex-direction: column; align-items: flex-start; padding: 18px; }
  .kit-mast-side { flex-direction: row; align-items: center; }
  .kit-art { min-height: 340px; }
  .ka { padding: 14px 16px; }
  .ka-resume { width: 58%; left: 0; }
  .ka-iv { width: 74%; top: 26%; }
  .ka-q { font-size: 17px; }
  .ka-nta { width: 62%; left: 2%; }
  .tool-a { padding: 26px 22px 22px; }
  .tool-a h3 { font-size: 25px; }
  .iv-main { padding: 26px 20px 24px; border-radius: 20px; }
  .iv-dot { width: 34px; height: 34px; }
  .iv-overall, .iv-scores { padding-left: 0; padding-right: 0; }
  .iv-overall { padding: 14px; }
  .iv-overall li, .iv-scores li { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .iv-overall li .meter, .iv-scores li .meter { grid-row: 2; }
  .iv-ov-v, .iv-scores b { grid-row: 2; text-align: right; }
  .meter i { width: 20px; }
  .iv-item summary { grid-template-columns: 1fr auto; }
  .iv-item-q { grid-column: 1 / -1; grid-row: 2; }
  .iv-nav { flex-wrap: wrap; }
  .pv-who { grid-template-columns: 1fr; }
  .kit-mini li { padding: 16px; }
}

@media print {
  .iv-side, .iv-res-acts, .iv-next, .site-h, #cqbar, footer, .skip { display: none !important; }
  .iv-main { box-shadow: none; border: 0; padding: 0; }
  .iv-item { break-inside: avoid; }
  .iv-item > .iv-item-b { display: block !important; }
}

/* phones: once a learner is answering or reading feedback, the page intro steps aside so the question leads */
@media (max-width: 900px) {
  .iv-grid:has(.iv-main[data-state="answer"]) .iv-side .lead, .iv-grid:has(.iv-main[data-state="results"]) .iv-side .lead,
  .iv-grid:has(.iv-main[data-state="answer"]) .iv-side .side-note, .iv-grid:has(.iv-main[data-state="results"]) .iv-side .side-note { display: none; }
  .iv-grid:has(.iv-main[data-state="answer"]) .kit-mast-side .kit-mast-act { display: none; }
  .iv-grid:has(.iv-main[data-state="answer"]) { gap: 20px; }
}