/* Aquoral Canada: free dry mouth assessment (assessment.html only).
   One question per screen on a liquid-glass card. Large pill inputs, tap tiles and Yes/No picks.
   Uses design-system tokens only; light and dark schemes come from the tokens. */

.assess-page { background: var(--surface-sunken); }
.qa { position: relative; isolation: isolate; overflow: hidden; overflow: clip; min-height: 100svh;
  padding: calc(var(--nav-h) + 28px) 0 clamp(48px, 8vw, 96px); }
.qa-wrap { position: relative; max-width: calc(780px + 2 * var(--gutter)); }
.qa .crumbs { margin-bottom: 14px; padding-left: 6px; }

/* Living background: soft colour blobs from the packaging + the carton swirl */
.qa-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.qa-bg::after { content: ""; position: absolute; inset: 0; background: url(../img/swirl-light.svg) center top / 1500px auto repeat; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.qa-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: qa-drift 26s var(--ease-wave) infinite alternate; }
.qa-blob.b1 { width: 520px; height: 520px; left: -140px; top: 60px; background: var(--sky-300); }
.qa-blob.b2 { width: 460px; height: 460px; right: -160px; top: 220px; background: var(--orchid-300); opacity: .38; animation-duration: 32s; animation-delay: -8s; }
.qa-blob.b3 { width: 380px; height: 380px; left: 35%; bottom: -160px; background: var(--tide-300); opacity: .3; animation-duration: 38s; animation-delay: -14s; }
@keyframes qa-drift { to { transform: translate3d(60px, -40px, 0) scale(1.12); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa-bg::after { background-image: url(../img/swirl-dark.svg); opacity: .25; } :root:not([data-theme="light"]) .qa-blob { opacity: .22; } }
:root[data-theme="dark"] .qa-bg::after { background-image: url(../img/swirl-dark.svg); opacity: .25; }
:root[data-theme="dark"] .qa-blob { opacity: .22; }

/* The glass card */
.qa-card { position: relative; display: flex; flex-direction: column; min-height: min(660px, calc(100svh - var(--nav-h) - 110px));
  padding: clamp(22px, 5vw, 52px); border-radius: clamp(28px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%), var(--glass-tint);
  border: 1px solid var(--glass-line); border-top-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--glass-shadow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa-card { background: var(--glass-tint); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 30px 80px -30px rgba(0,0,0,.7); } }
:root[data-theme="dark"] .qa-card { background: var(--glass-tint); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 30px 80px -30px rgba(0,0,0,.7); }

/* Steps: one visible at a time once JS runs */
.js .qa-step { display: none; }
.qa-step { flex: 1; flex-direction: column; }
.qa-step.is-current { display: flex; animation: qa-in 460ms var(--ease-liquid) both; }
.qa-card[data-dir="back"] .qa-step.is-current { animation-name: qa-in-back; }
@keyframes qa-in { from { opacity: 0; transform: translate3d(28px, 0, 0); } }
@keyframes qa-in-back { from { opacity: 0; transform: translate3d(-28px, 0, 0); } }
.no-js .qa-step { display: flex; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }

/* Progress row */
.qa-top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; margin-bottom: clamp(24px, 4vw, 40px); }
.qa-top[hidden] { display: none; }
.qa-back { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; cursor: pointer; color: var(--ink);
  background: var(--surface-raised); border: 1px solid var(--line); transition: transform 180ms var(--ease-surface), border-color 180ms; }
.qa-back:hover { transform: translateX(-2px); border-color: var(--line-strong); }
.qa-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qa-progress { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.qa-progress i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; transition: width 600ms var(--ease-liquid);
  background: linear-gradient(90deg, var(--sky-400), var(--tide-500) 25%, var(--orchid-500) 50%, var(--tide-500) 75%, var(--sky-400)); background-size: 200% 100%; animation: qa-flow 4s linear infinite; }
.qa-progress i::after { content: ""; position: absolute; inset: 2px 6px auto; height: 3px; border-radius: 999px; background: rgba(255,255,255,.55); }
@keyframes qa-flow { to { background-position: -200% 0; } }
.qa-count { font: 600 13px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); min-width: 3.5em; text-align: right; }

/* Type */
.qa-h1 { font: 700 clamp(34px, 3.4vw + 1rem, 56px)/1.02 var(--font-display); letter-spacing: -.04em; margin: 0 0 16px; text-wrap: balance; }
.qa-h2 { font: 650 clamp(26px, 1.6vw + 1rem, 40px)/1.12 var(--font-display); letter-spacing: -.03em; margin: 0 0 12px; text-wrap: balance; }
.qa-h3 { font: 650 20px/1.25 var(--font-display); letter-spacing: -.02em; margin: 0 0 14px; }
.qa-h1:focus, .qa-h2:focus { outline: none; }
.qa-lead { font-size: clamp(18px, .4vw + 16px, 21px); line-height: 1.5; color: var(--ink-muted); margin: 0 0 28px; max-width: 34rem; }
.qa-sub { color: var(--ink-muted); margin: 0 0 24px; font-size: 18px; line-height: 1.5; }
.qa-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 13px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.qa-kicker .icon { width: 18px; height: 18px; }
.qa-fine { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 18px 0 0; }
.qa .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Intro */
.qa-intro { justify-content: center; position: relative; }
.qa-intro-art { position: absolute; right: 0; top: 0; width: clamp(84px, 14vw, 150px); }
.qa-drop { width: 100%; height: auto; filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--tide-600) 35%, transparent)); animation: qa-bob 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes qa-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-10px) scale(.98, 1.02); } }
.qa-intro .qa-h1 { max-width: 13ch; }
.qa-perks { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.qa-perks li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font: 600 15px/1 var(--font-display);
  background: var(--surface-raised); border: 1px solid var(--line); }
.qa-perks li .icon { width: 18px; height: 18px; color: var(--brand); }
.qa-perks li:last-child { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.qa-perks li:last-child .icon { color: var(--accent); }
.qa-cta { align-self: flex-start; min-height: 60px; padding-inline: 30px; font-size: 18px; }

/* Yes / No picks */
.qa-yn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 18px); margin-top: auto; padding-top: 28px; }
.qa-pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: clamp(128px, 18vw, 168px);
  border-radius: 28px; cursor: pointer; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  background: var(--surface-raised); border: 1.5px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform 220ms var(--ease-surface), border-color 180ms, box-shadow 220ms, color 220ms; }
.qa-pick input, .qa-tile input { position: absolute; opacity: 0; pointer-events: none; }
.qa-pick:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.qa-pick:active { transform: scale(.97); }
.qa-pick-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; transition: background 220ms, color 220ms, transform 300ms var(--ease-surface); }
.qa-pick-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qa-pick.yes .qa-pick-ic { background: var(--accent-soft); color: var(--accent); }
.qa-pick.no .qa-pick-ic { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.qa-pick-t { font: 650 24px/1 var(--font-display); letter-spacing: -.02em; }
.qa-pick kbd { position: absolute; top: 14px; right: 16px; font: 600 12px/1 var(--font-mono); padding: 6px 8px; border-radius: 8px; color: var(--ink-muted); border: 1px solid var(--line); }
@media (hover: none) { .qa-pick kbd { display: none; } }
/* Liquid fill that blooms from the tap point */
.qa-pick::before, .qa-tile::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); transition: transform 520ms var(--ease-liquid); }
.qa-pick.yes::before { background: linear-gradient(135deg, color-mix(in srgb, var(--orchid-500) 85%, #fff), var(--orchid-600)); }
.qa-pick.no::before { background: linear-gradient(135deg, var(--tide-500), var(--tide-700)); }
.qa-pick:has(input:checked) { color: #fff; border-color: transparent; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--orchid-600) 70%, transparent); }
.qa-pick.no:has(input:checked) { box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--tide-700) 70%, transparent); }
.qa-pick:has(input:checked)::before { transform: translate(-50%, -50%) scale(90); }
.qa-pick:has(input:checked) .qa-pick-ic { background: rgba(255,255,255,.22); color: #fff; transform: scale(1.08); }
.qa-pick:has(input:checked) kbd { color: #fff; border-color: rgba(255,255,255,.4); }
.qa-pick:has(input:focus-visible), .qa-tile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Cause tiles */
.qa-tiles { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qa-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 124px; padding: 16px; border-radius: 22px; cursor: pointer;
  overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; background: var(--surface-raised); border: 1.5px solid var(--line);
  transition: transform 220ms var(--ease-surface), border-color 180ms, box-shadow 220ms; animation: qa-tile-in 520ms var(--ease-liquid) both; }
.qa-tile:nth-child(2) { animation-delay: 40ms; } .qa-tile:nth-child(3) { animation-delay: 80ms; } .qa-tile:nth-child(4) { animation-delay: 120ms; }
.qa-tile:nth-child(5) { animation-delay: 160ms; } .qa-tile:nth-child(6) { animation-delay: 200ms; } .qa-tile:nth-child(7) { animation-delay: 240ms; } .qa-tile:nth-child(8) { animation-delay: 280ms; }
@keyframes qa-tile-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.qa-tile:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.qa-tile:active { transform: scale(.97); }
.qa-tile-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); transition: background 220ms, color 220ms; }
.qa-tile-ic .icon { width: 22px; height: 22px; }
.qa-tile-t { font: 600 16px/1.25 var(--font-display); letter-spacing: -.01em; }
.qa-tile::before { background: var(--accent-soft); }
.qa-tile::after { content: ""; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat;
  transform: scale(0); transition: transform 320ms var(--ease-surface); }
.qa-tile:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 16px 36px -20px color-mix(in srgb, var(--accent) 80%, transparent); }
.qa-tile:has(input:checked)::before { transform: translate(-50%, -50%) scale(60); }
.qa-tile:has(input:checked)::after { transform: scale(1); }
.qa-tile:has(input:checked) .qa-tile-ic { background: var(--accent); color: #fff; }
.qa-tiles.is-error .qa-tile { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

/* Pill fields */
.qa-label { display: flex; align-items: baseline; gap: 10px; font: 600 16px/1.3 var(--font-display); margin: 0 0 8px 22px; }
.qa-opt { font: 500 13px/1 var(--font-sans); color: var(--ink-muted); }
.qa-input, .qa-select select { width: 100%; min-height: 62px; padding: 0 26px; border-radius: 999px; font: 400 19px/1.2 var(--font-sans); color: var(--ink);
  background: var(--surface-raised); border: 1.5px solid var(--line-strong); box-shadow: inset 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent);
  transition: border-color 160ms, box-shadow 200ms, background 200ms; -webkit-appearance: none; appearance: none; }
.qa-input::placeholder { color: color-mix(in srgb, var(--ink-muted) 75%, transparent); }
.qa-input:hover, .qa-select select:hover { border-color: color-mix(in srgb, var(--brand) 60%, var(--line-strong)); }
.qa-input:focus, .qa-select select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 22%, transparent); }
.qa-input.is-invalid { border-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface-raised)); }
.qa-input.is-invalid:focus { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 20%, transparent); }
.qa-select { position: relative; }
.qa-select::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.qa-select select { padding-right: 56px; cursor: pointer; }
.qa-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.qa-span { grid-column: 1 / -1; }
.qa-err { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 22px; font-size: 15px; color: var(--danger); }
.qa-err::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--danger); color: #fff; font: 700 12px/1 var(--font-display); }
.qa-err[hidden] { display: none; }
.qa-other, .qa-listview { margin-top: 18px; animation: qa-in 360ms var(--ease-liquid); }
.qa-listview + .qa-other { margin-top: 18px; }

/* Checkbox */
.qa-check { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; margin-top: 22px; cursor: pointer; font-size: 16px; line-height: 1.45; }
.qa-check input { position: absolute; opacity: 0; }
.qa-box { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); background: var(--surface-raised); transition: background 180ms, border-color 180ms; }
.qa-box svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 320ms var(--ease-liquid); }
.qa-check input:checked + .qa-box { background: var(--accent); border-color: var(--accent); }
.qa-check input:checked + .qa-box svg { stroke-dashoffset: 0; }
.qa-check input:focus-visible + .qa-box { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Actions */
.qa-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 28px; }
.qa-actions .btn-primary { min-height: 58px; padding-inline: 28px; font-size: 17px; margin-left: auto; }
.qa-switch, .qa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--ink-muted); font: 600 15px/1 var(--font-display); cursor: pointer; transition: color 160ms, border-color 160ms; }
.qa-switch .icon { width: 18px; height: 18px; }
.qa-switch:hover, .qa-link:hover { color: var(--ink); border-color: var(--line-strong); }
.qa-link { border-color: transparent; padding-inline: 4px; text-decoration: underline; text-underline-offset: .25em; }

/* Result */
.qa-result { --qa-c1: var(--sky-300); --qa-c2: var(--sky-400); --qa-tone: var(--brand); }
.qa-result[data-level="1"] { --qa-c1: var(--sky-400); --qa-c2: var(--tide-500); }
.qa-result[data-level="2"] { --qa-c1: var(--tide-500); --qa-c2: var(--tide-700); }
.qa-result[data-level="3"] { --qa-c1: var(--orchid-500); --qa-c2: var(--orchid-600); --qa-tone: var(--accent); }
.qa-res-head { display: grid; grid-template-columns: clamp(104px, 16vw, 148px) 1fr; gap: clamp(18px, 3vw, 32px); align-items: center; margin-bottom: 26px; }
.qa-res-head .qa-h1 { font-size: clamp(32px, 2.6vw + 1rem, 50px); margin-bottom: 10px; }
.qa-res-head .qa-sub { margin: 0; }
.qa-gauge { position: relative; }
.qa-gauge svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 26px color-mix(in srgb, var(--qa-c2) 35%, transparent)); }
.qa-gauge-bg { fill: color-mix(in srgb, var(--qa-c1) 14%, var(--surface-raised)); }
.qa-gauge-rim { fill: none; stroke: color-mix(in srgb, var(--qa-c2) 40%, transparent); stroke-width: 1.5; }
.qa-level { transform: translateY(150px); transition: transform 1600ms var(--ease-liquid) 200ms; }
.qa-wave { fill: url(#qa-fill); animation: qa-wave 3.2s linear infinite; }
.qa-wave.w2 { opacity: .45; animation-duration: 5s; animation-direction: reverse; }
@keyframes qa-wave { to { transform: translateX(60px); } }
.qa-score { position: absolute; left: 0; right: 0; top: 56%; display: grid; justify-items: center; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.qa-score b { font: 750 clamp(30px, 4vw, 42px)/1 var(--font-display); letter-spacing: -.04em; }
.qa-score small { font: 600 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.qa-result[data-level="0"] .qa-score { color: var(--ink); text-shadow: none; }
.qa-scale { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.qa-scale li { position: relative; padding-top: 18px; text-align: center; font: 600 13px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.qa-scale li::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.qa-scale li:first-child::before { border-radius: 999px 4px 4px 999px; } .qa-scale li:last-child::before { border-radius: 4px 999px 999px 4px; }
.qa-scale li.is-on { color: var(--ink); }
.qa-scale li.is-on::before { background: linear-gradient(90deg, var(--qa-c1), var(--qa-c2)); box-shadow: 0 6px 16px -6px var(--qa-c2); }
.qa-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.qa-res-card { padding: 22px; border-radius: 24px; background: var(--surface-raised); border: 1px solid var(--line); }
.qa-res-card h3 { font: 650 18px/1.3 var(--font-display); margin: 12px 0 6px; }
.qa-res-card p { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
.qa-res-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--qa-tone); background: color-mix(in srgb, var(--qa-c1) 18%, transparent); }
.qa-res-ic .icon { width: 22px; height: 22px; }
.qa-tips { padding: 22px; border-radius: 24px; background: var(--surface-raised); border: 1px solid var(--line); margin-bottom: 14px; }
.qa-tips ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.qa-tips li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.qa-tips li .qa-res-ic { color: var(--accent); background: var(--accent-soft); }
.qa-tips b { display: block; font: 650 16px/1.3 var(--font-display); margin-bottom: 2px; }
.qa-tips p { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.5; }
.qa-tips a { font-weight: 600; }
.qa-code { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 22px 22px 24px; border-radius: 24px; overflow: hidden;
  color: #fff; background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), transparent 50%), linear-gradient(120deg, var(--orchid-600), var(--orchid-500) 50%, var(--tide-600)); }
.qa-code[hidden] { display: none; }
.qa-code .qa-kicker { color: #fff; opacity: .9; margin-bottom: 6px; }
.qa-code h3 { font: 700 22px/1.2 var(--font-display); margin: 0 0 4px; letter-spacing: -.02em; }
.qa-code p { margin: 0; font-size: 15px; opacity: .92; }
.qa-code .verify { color: #fff; }
.qa-code-btn { flex: none; display: grid; justify-items: center; gap: 4px; padding: 14px 20px; border-radius: 18px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.14); border: 1.5px dashed rgba(255,255,255,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 180ms, transform 180ms var(--ease-surface); }
.qa-code-btn:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.qa-code-btn span { font: 700 22px/1 var(--font-mono); letter-spacing: .14em; }
.qa-code-btn em { font: 600 12px/1 var(--font-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.qa-code-locked { color: var(--ink); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.qa-code-locked .btn { flex: none; }
.qa-res-actions .btn-glass { min-height: 58px; }
.qa-res-actions .btn-glass .icon, .qa-code-locked .btn .icon { width: 20px; height: 20px; }
.qa-res-actions { justify-content: flex-start; }
.qa-res-actions .btn-primary { margin-left: 0; }
.qa-proto { font-style: italic; }

/* Phones */
@media (max-width: 720px) {
  .qa-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qa-tile { min-height: 104px; padding: 14px; border-radius: 20px; }
  .qa-tile-t { font-size: 15px; }
}
@media (max-width: 560px) {
  .qa { padding-top: calc(var(--nav-h) + 14px); }
  .qa .crumbs { display: none; }
  .qa-card { min-height: min(620px, calc(100svh - var(--nav-h) - 40px)); }
  .qa-h2 { font-size: 30px; }
  .qa-fields { grid-template-columns: 1fr; gap: 16px; }
  .qa-intro-art { position: static; width: 84px; margin-bottom: 18px; }
  .qa-cta { align-self: stretch; }
  .qa-actions { flex-direction: column-reverse; align-items: stretch; }
  .qa-actions .btn-primary, .qa-actions .btn-glass { width: 100%; margin-left: 0; }
  .qa-switch, .qa-link { justify-content: center; }
  .qa-res-grid { grid-template-columns: 1fr; }
  .qa-code { flex-direction: column; align-items: stretch; text-align: left; }
  .qa-code-btn { grid-auto-flow: column; justify-content: center; gap: 12px; align-items: center; }
  .qa-res-actions { flex-direction: column; }
  .qa-scale li { font-size: 11px; letter-spacing: .03em; }
  .qa-perks li { font-size: 14px; padding: 9px 14px; }
}
.qa-tiles[hidden], .qa-listview[hidden], .qa-other[hidden] { display: none; }
@media (max-width: 560px) { .qa-card { min-height: min(580px, calc(100svh - var(--nav-h) - 40px)); } }

/* ================= Round 2 (Dapo 2026-11-11): glass picks, centred questions, transitions, results reveal ================= */

/* Screen-to-screen: the old screen dissolves, the new one rises in part by part */
.qa-step.is-current { animation: none; }
.qa-step.is-leaving { animation: qa-out 230ms cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
.qa-card[data-dir="back"] .qa-step.is-leaving { animation-name: qa-out-back; }
@keyframes qa-out { to { opacity: 0; transform: translate3d(-26px, -6px, 0) scale(.985); filter: blur(6px); } }
@keyframes qa-out-back { to { opacity: 0; transform: translate3d(26px, -6px, 0) scale(.985); filter: blur(6px); } }
.qa-step.is-current:not(.qa-result) > * { animation: qa-rise 680ms var(--ease-liquid) both; animation-delay: calc(var(--i, 0) * 60ms + 30ms); }
.qa-card[data-dir="back"] .qa-step.is-current > * { --dx: -26px; }
@keyframes qa-rise { from { opacity: 0; transform: translate3d(var(--dx, 26px), 14px, 0); filter: blur(8px); } }
/* Background blobs drift a little further with every step */
.qa-blob { transition: translate 1400ms var(--ease-liquid); }
.qa-blob.b1 { translate: calc(var(--step, 0) * 18px) calc(var(--step, 0) * -8px); }
.qa-blob.b2 { translate: calc(var(--step, 0) * -16px) calc(var(--step, 0) * 12px); }
.qa-blob.b3 { translate: calc(var(--step, 0) * -10px) calc(var(--step, 0) * -14px); }
/* Card breathes slightly as screens change */
.qa-card { transition: box-shadow 400ms; }

/* Questions: centred in the card, answers close to the question */
.qa-step[data-question] { justify-content: center; text-align: center; align-items: center; }
.qa-step[data-question] .qa-h2 { max-width: 22ch; font-size: clamp(28px, 1.8vw + 1rem, 42px); }
.qa-step[data-question] .qa-sub { margin-bottom: 0; }
.qa-step[data-question] .qa-yn { width: 100%; max-width: 560px; margin-top: clamp(28px, 5vh, 48px); padding-top: 0; }

/* Liquid-glass Yes / No */
.qa-pick { min-height: clamp(150px, 19vw, 188px); border-radius: 32px; gap: 14px;
  background: linear-gradient(155deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 48%, rgba(220,238,250,.62) 100%);
  border: 1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -22px 36px -22px rgba(37,76,158,.28), inset 0 0 0 1px rgba(37,76,158,.07),
    0 1px 2px rgba(18,38,80,.06), 0 24px 48px -24px rgba(18,38,80,.38); }
.qa-pick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(110% 55% at 22% -5%, rgba(255,255,255,.95), transparent 60%), linear-gradient(180deg, transparent 70%, rgba(255,255,255,.35)); opacity: .8; }
.qa-pick > * { position: relative; z-index: 2; }
.qa-pick.yes { --c: var(--orchid-500); --c2: var(--orchid-600); }
.qa-pick.no { --c: var(--tide-500); --c2: var(--tide-700); }
.qa-pick-ic, .qa-pick.yes .qa-pick-ic, .qa-pick.no .qa-pick-ic { width: 66px; height: 66px; color: #fff;
  background: radial-gradient(circle at 32% 26%, #fff 0 7%, color-mix(in srgb, var(--c) 45%, #fff) 26%, var(--c) 66%, var(--c2) 100%);
  box-shadow: inset 0 -8px 14px rgba(0,0,0,.18), inset 0 5px 10px rgba(255,255,255,.55), 0 12px 24px -10px var(--c); }
.qa-pick-ic svg { width: 30px; height: 30px; stroke-width: 2.6; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.qa-pick-t { font-size: 26px; }
.qa-pick:hover { transform: translateY(-4px); border-color: #fff; box-shadow: inset 0 1px 0 #fff, inset 0 -22px 36px -22px rgba(37,76,158,.3), inset 0 0 0 1px rgba(37,76,158,.09), 0 30px 60px -26px rgba(18,38,80,.45); }
.qa-pick:hover .qa-pick-ic { transform: scale(1.07) rotate(-4deg); }
.qa-pick::before { background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 45%, var(--c2)); }
.qa-pick:has(input:checked) { border-color: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -20px 40px -20px rgba(0,0,0,.25), 0 26px 50px -22px var(--c); }
.qa-pick:has(input:checked)::after { opacity: .55; }
.qa-pick:has(input:checked) .qa-pick-ic { color: var(--c2); background: radial-gradient(circle at 32% 26%, #fff, rgba(255,255,255,.85) 55%, rgba(255,255,255,.6));
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.08), 0 10px 22px -10px rgba(0,0,0,.4); animation: qa-pop 520ms var(--ease-surface); }
.qa-pick:has(input:checked) .qa-pick-ic svg { filter: none; }
@keyframes qa-pop { 40% { transform: scale(1.22); } }
.qa-pick kbd { background: rgba(255,255,255,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa-pick { background: linear-gradient(155deg, rgba(60,90,150,.5), rgba(18,38,80,.55) 55%, rgba(11,24,51,.6)); border-color: rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -22px 36px -22px rgba(111,194,236,.25), 0 24px 48px -24px rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .qa-pick::after { opacity: .18; } :root:not([data-theme="light"]) .qa-pick kbd { background: transparent; } }
:root[data-theme="dark"] .qa-pick { background: linear-gradient(155deg, rgba(60,90,150,.5), rgba(18,38,80,.55) 55%, rgba(11,24,51,.6)); border-color: rgba(255,255,255,.16); }

/* Glass tiles to match */
.qa-tile { background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.62) 60%, rgba(230,244,252,.6));
  border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, inset 0 -16px 28px -20px rgba(37,76,158,.25), inset 0 0 0 1px rgba(37,76,158,.07), 0 16px 32px -24px rgba(18,38,80,.35);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
.qa-tile-ic { background: radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--brand) 14%, #fff) 70%); box-shadow: inset 0 -3px 6px rgba(37,76,158,.12), 0 6px 12px -8px rgba(37,76,158,.5); }
.qa-tile:has(input:checked) .qa-tile-ic { background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--orchid-500) 40%, #fff), var(--orchid-500) 60%, var(--orchid-600)); box-shadow: inset 0 -4px 8px rgba(0,0,0,.15), 0 8px 16px -8px var(--orchid-500); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa-tile { background: linear-gradient(160deg, rgba(60,90,150,.45), rgba(18,38,80,.55)); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 32px -24px rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .qa-tile-ic { background: rgba(255,255,255,.1); box-shadow: none; } }
:root[data-theme="dark"] .qa-tile { background: linear-gradient(160deg, rgba(60,90,150,.45), rgba(18,38,80,.55)); border-color: rgba(255,255,255,.14); }

/* Hidden honeypot */
.qa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Results reveal: drop falls into the big droplet, it fills and counts, then glides into the header */
.qa-gauge { z-index: 3; transform-origin: 50% 50%; will-change: transform; }
.qa-fall { position: absolute; z-index: 4; left: 50%; top: 0; width: 14px; height: 19px; opacity: 0; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 30%, #fff, var(--sky-300) 50%, var(--tide-500));
  box-shadow: 0 0 12px rgba(163,218,244,.8); transform: translate(-50%, -150px); }
.qa-result.is-drop .qa-fall { animation: qa-fall 680ms cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes qa-fall { 0% { opacity: 0; transform: translate(-50%, -150px) scale(.8, 1.25); } 12% { opacity: 1; }
  88% { opacity: 1; transform: translate(-50%, 52px) scale(.85, 1.2); } 100% { opacity: 0; transform: translate(-50%, 64px) scale(1.4, .4); } }
.qa-ring { position: absolute; z-index: 4; left: 50%; top: 55%; width: 70%; aspect-ratio: 3 / 1; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.15); }
.qa-result.is-drop .qa-ring { animation: qa-splash 1100ms var(--ease-liquid) 640ms forwards; }
.qa-result.is-drop .qa-ring.r2 { animation-delay: 820ms; }
@keyframes qa-splash { 0% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
.qa-mist { position: absolute; z-index: 1; left: 50%; top: 58%; width: 0; height: 0; pointer-events: none; }
.qa-mist i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 30%, #fff, var(--qa-c1) 60%, var(--qa-c2)); }
.qa-mist i:nth-child(1) { --a: 0deg; } .qa-mist i:nth-child(2) { --a: 45deg; --d: 84px; } .qa-mist i:nth-child(3) { --a: 90deg; } .qa-mist i:nth-child(4) { --a: 135deg; --d: 78px; }
.qa-mist i:nth-child(5) { --a: 180deg; } .qa-mist i:nth-child(6) { --a: 225deg; --d: 88px; } .qa-mist i:nth-child(7) { --a: 270deg; } .qa-mist i:nth-child(8) { --a: 315deg; --d: 74px; }
.qa-result.is-burst .qa-mist i { animation: qa-mist 1000ms var(--ease-liquid) forwards; }
.qa-result.is-burst .qa-mist i:nth-child(even) { animation-delay: 70ms; width: 6px; height: 6px; }
@keyframes qa-mist { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-20px) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d, 96px))) scale(1); } }
.qa-reading { position: absolute; left: 50%; top: 100%; margin-top: 8px; translate: -50% 0; white-space: nowrap; font: 600 7.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); opacity: 0; transition: opacity 400ms; }
.qa-result.is-intro .qa-reading { opacity: 1; }
.qa-result.is-burst .qa-reading { opacity: 0; transition-duration: 200ms; }
.qa-result.is-intro > :not(.qa-res-head), .qa-result.is-intro .qa-res-head > div:last-child { opacity: 0; transform: translateY(20px); filter: blur(6px); }
.qa-result.is-in > :not(.qa-res-head), .qa-result.is-in .qa-res-head > div:last-child { opacity: 1; transform: none; filter: none;
  transition: opacity 600ms ease, transform 800ms var(--ease-liquid), filter 600ms ease; transition-delay: calc(var(--i, 0) * 90ms); }
.qa-result.is-in .qa-scale li.is-on::before { animation: qa-seg 900ms var(--ease-liquid) 300ms both; transform-origin: left; }
@keyframes qa-seg { from { transform: scaleX(0); } }
.qa-result.is-in .qa-code::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-100%); animation: qa-shine 1400ms ease 900ms forwards; pointer-events: none; }
@keyframes qa-shine { to { transform: translateX(100%); } }
.qa-score { transition: color 400ms, text-shadow 400ms; }
.qa-result.is-intro:not(.is-filled) .qa-score { color: var(--qa-c2); text-shadow: none; }

/* ================= Round 3 (Dapo 2026-11-11): results with depth, 3D droplet ================= */

/* 3D droplet: glass shell, shaded liquid with a lit meniscus, specular highlights, coloured floor glow */
.qa-gauge .qa-gauge-rim { fill: none; stroke: url(#qa-rimg); stroke-width: 1.6; }
.qa-gauge svg { filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--qa-c2) 45%, transparent)) drop-shadow(0 4px 6px rgba(6,16,42,.25)); }
.qa-drop3d { animation: qa-float 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes qa-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
.qa-floor { animation: qa-floor 6s ease-in-out infinite; transform-origin: 60px 150px; transform-box: view-box; }
@keyframes qa-floor { 50% { transform: scale(.86); opacity: .7; } }
.qa-wave.w1 { stroke: rgba(255,255,255,.75); stroke-width: 1.4; }
.qa-wave.w2 { opacity: .5; }
.qa-score { top: 50%; }
.qa-score b { text-shadow: 0 2px 8px rgba(6,16,42,.45), 0 0 1px rgba(6,16,42,.4); }
.qa-res-head { grid-template-columns: clamp(118px, 17vw, 168px) 1fr; }

/* Result surfaces lift off the card: layered glass, light edge, deep soft shadow, level-coloured glow */
.qa-res-card, .qa-tips, .qa-code-locked { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--sky-50) 70%, #fff) 100%);
  border: 1px solid rgba(255,255,255,.95); border-radius: 26px;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(37,76,158,.06), 0 2px 4px rgba(18,38,80,.06), 0 28px 56px -28px rgba(18,38,80,.42);
  transition: transform 300ms var(--ease-surface), box-shadow 300ms; }
.qa-res-card:hover, .qa-tips:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(37,76,158,.08), 0 4px 8px rgba(18,38,80,.06), 0 36px 64px -28px rgba(18,38,80,.5); }
.qa-res-card::before, .qa-tips::before { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; left: -70px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone, var(--qa-c1)) 30%, transparent), transparent 70%); }
.qa-res-card::after, .qa-tips::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--tone, var(--qa-c1)), transparent); opacity: .9; }
.qa-res-card.is-like { --tone: var(--qa-c2); }
.qa-res-card.is-helps { --tone: var(--sky-400); }
.qa-tips { --tone: var(--orchid-500); padding: 24px; }
.qa-res-card { padding: 24px; }
.qa-res-card h3 { font-size: 19px; }
/* Glossy orb icons, like the answer buttons */
.qa-res-ic, .qa-tips li .qa-res-ic { width: 44px; height: 44px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--tone, var(--qa-c1)) 40%, #fff) 0 18%, var(--tone, var(--qa-c1)) 62%, color-mix(in srgb, var(--tone, var(--qa-c1)) 70%, #000) 100%);
  box-shadow: inset 0 -5px 10px rgba(0,0,0,.2), inset 0 3px 6px rgba(255,255,255,.5), 0 10px 20px -10px var(--tone, var(--qa-c1)); }
.qa-res-ic .icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
/* Tips: each its own inset row */
.qa-tips ul { gap: 10px; }
.qa-tips li { padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--sky-50) 60%, transparent); border: 1px solid rgba(37,76,158,.07); grid-template-columns: 44px 1fr; }
.qa-tips li:nth-child(2) { --tone: var(--tide-500); } .qa-tips li:nth-child(3) { --tone: var(--sky-400); } .qa-tips li:nth-child(4) { --tone: var(--tide-600); }
/* Severity scale: thicker, glowing active segment with a marker */
.qa-scale li::before { height: 10px; }
.qa-scale li.is-on::before { box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 6px 18px -4px var(--qa-c2), 0 0 22px -6px var(--qa-c1); }
.qa-scale li.is-on::after { content: ""; position: absolute; left: 50%; top: -5px; width: 20px; height: 20px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--qa-c1) 55%, var(--qa-c2)); box-shadow: 0 4px 10px -2px var(--qa-c2), 0 0 0 3px rgba(255,255,255,.7); }
.qa-scale li.is-on { font-weight: 700; }
/* Code cards */
.qa-code { border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 60px -26px color-mix(in srgb, var(--orchid-600) 75%, transparent); }
.qa-code-locked { --tone: var(--orchid-500); color: var(--ink); }
.qa-code-locked::before { content: ""; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--orchid-500) 30%, transparent), transparent 70%); }
.qa-code-locked h3 { color: var(--accent); }
.qa-code-locked .btn { background: linear-gradient(180deg, color-mix(in srgb, var(--orchid-500) 88%, #fff), var(--orchid-600)); color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -12px var(--orchid-600); }

/* Dark scheme: same depth with deep glass */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.qa-res-card, .qa-tips, .qa-code-locked) {
    background: linear-gradient(165deg, rgba(58,92,160,.42) 0%, rgba(20,40,86,.72) 55%, rgba(12,26,60,.85) 100%);
    border-color: rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,0,0,.25), 0 30px 60px -24px rgba(0,0,0,.75); }
  :root:not([data-theme="light"]) .qa-tips li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .qa-code-locked h3 { color: var(--orchid-300); }
  :root:not([data-theme="light"]) .qa-scale li.is-on::after { box-shadow: 0 4px 10px -2px var(--qa-c2), 0 0 0 3px rgba(11,24,51,.9); } }
:root[data-theme="dark"] :is(.qa-res-card, .qa-tips, .qa-code-locked) { background: linear-gradient(165deg, rgba(58,92,160,.42) 0%, rgba(20,40,86,.72) 55%, rgba(12,26,60,.85) 100%);
  border-color: rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 60px -24px rgba(0,0,0,.75); }
:root[data-theme="dark"] .qa-tips li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
/* Dark: brighter level colours so the drop glows against navy */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa-result[data-level="1"] { --qa-c1: var(--sky-300); --qa-c2: var(--sky-400); }
  :root:not([data-theme="light"]) .qa-result[data-level="2"] { --qa-c1: var(--sky-400); --qa-c2: var(--tide-500); } }
/* Score stays readable over glass, rising liquid and every level colour */
.qa-result.is-intro:not(.is-filled) .qa-score, .qa-result[data-level="0"] .qa-score { color: #fff; }
.qa-score b, .qa-score small { text-shadow: 0 0 14px rgba(6,16,42,.55), 0 2px 6px rgba(6,16,42,.45); }