/* The quiz is a single-column experience, independently sized from the public offer. */
body[data-surface="quiz"] {
  --q-paper:#f8f1e8;
  --q-ink:#2a211d;
  --q-muted:#5f5149;
  --q-forest:#2d5c45;
  --q-stroke:#dfd9cb;
  --q-card:#fffcf5;
  --q-width:320px;
  --q-gutter:32px;
  margin:0;
  color:var(--q-ink);
  background:var(--q-paper);
  font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size:16px;
  font-weight:400;
  line-height:1.5;
}
body[data-quiz-step="age"],body[data-quiz-step="breed"],body[data-quiz-step="profile"] {--q-width:384px}
body[data-surface="quiz"] #app {min-height:100svh}
.q-main,.q-mast {
  box-sizing:border-box;
  width:min(calc(100% - var(--q-gutter)),var(--q-width));
  margin-inline:auto;
}
.q-main {flex:1; padding:0 0 106px; outline:none}
.q-mast {position:sticky;top:0;z-index:3;padding:48px 0 0;background:var(--q-paper)}
.q-mast-clean {position:relative;padding-top:32px}
.q-mast-row {position:relative;display:flex;align-items:center;justify-content:center;height:24px}
.q-brand {display:inline-flex;align-items:center;gap:7px;color:#161914;text-decoration:none;font-size:18px;font-weight:750;letter-spacing:-.025em;line-height:24px}
.q-brand img {width:24px;height:24px;border-radius:8px}
.q-back {position:absolute;inset-inline-start:-10px;top:50%;transform:translateY(-50%);width:40px;height:42px;background:transparent;color:var(--q-muted);display:grid;place-items:center;padding:0}
.q-back svg {width:18px;height:18px}
.q-progress,.q-tasks progress {width:100%;display:block;height:6px;appearance:none;border:0;border-radius:12px;overflow:hidden;background:#e2d9c9;color:var(--q-forest)}
.q-progress {margin:24px 0}
.q-progress::-webkit-progress-bar,.q-tasks progress::-webkit-progress-bar {background:#e2d9c9}
.q-progress::-webkit-progress-value,.q-tasks progress::-webkit-progress-value {background:var(--q-forest);border-radius:12px}
.q-progress::-moz-progress-bar,.q-tasks progress::-moz-progress-bar {background:var(--q-forest);border-radius:12px}
.q-title,.q-age h2,.q-note-card h2,.q-prepare-dialog h2 {
  font-family:inherit;font-weight:700;letter-spacing:normal;line-height:1.33;text-align:center;text-wrap:initial;color:var(--q-ink);margin:0;
}
.q-title {font-size:24px}
.q-question,.q-stage,.q-note,.q-age {width:100%;margin:0 auto}
.q-mast-clean+.q-main {padding-top:24px}
.q-art {display:block;width:100%;height:auto;object-fit:cover}
.q-mast-clean+.q-main:has(.q-age) {padding-top:16px;padding-bottom:24px;display:flex;flex-direction:column}
body[data-quiz-step="age"] .q-mast {padding-top:16px}
.q-age {flex:1;display:flex;flex-direction:column;text-align:center}
.q-age h1,.q-subtitle {text-transform:uppercase}
.q-subtitle {margin:8px 0 0;color:var(--q-muted);font-size:16px;line-height:24px}
.q-age h2 {font-size:18px;line-height:28px;margin-top:20px}
.q-age-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.q-age-card,.q-senior {background:none;padding:0;position:relative;color:var(--q-ink);border:0;cursor:pointer}
.q-age-card {display:grid;grid-template-rows:auto 1fr;min-width:0;container-type:inline-size}
.q-age-picture {display:block;position:relative;height:192px;isolation:isolate}
.q-age-picture:before {content:"";position:absolute;z-index:-1;inset:25% 2.5% -3px;background:#ece6dc;border-radius:30px 30px 6px 6px}
.q-age-picture img {width:100%;height:100%;object-fit:contain;object-position:bottom}
.q-age-label {display:flex;position:relative;justify-content:space-between;align-items:center;gap:5px;text-align:left}
.q-age-card .q-age-label {min-height:52px;padding:9px 16px;background:var(--q-forest);color:#fff;font-size:16px;font-weight:700;border-radius:16px;margin-top:-12px}
.q-age-label i {flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--q-forest)}
.q-age-label svg {width:15px;height:15px}
/* Give longer localized age ranges room before wrapping. The badge stays aligned
   and the grid shares the footer height when larger text needs a second line. */
html:is(:lang(hu),:lang(pl),:lang(sk),:lang(sl)) .q-age-card .q-age-label {
  gap:4px;
  padding:6px clamp(6px,4.5cqw,10px);
  font-size:clamp(13px,9.2cqw,16px);
  line-height:1.2;
}
html:is(:lang(hu),:lang(pl),:lang(sk),:lang(sl)) .q-age-card .q-age-label i {
  --age-badge:clamp(20px,15cqw,28px);
  width:var(--age-badge);height:var(--age-badge);flex-basis:var(--age-badge);
}

.q-age-card:hover .q-age-label {background:#224731}
.q-senior {grid-column:1/-1;justify-self:center;border-radius:40px;background:rgba(0,0,0,.05)}
.q-senior .q-age-label {min-height:48px;padding:8px 10px 8px 24px;font-weight:650;gap:10px}
.q-consent {text-align:center;font-size:12px;line-height:16px;color:var(--q-muted);margin:auto 0 0;padding-top:24px}
.q-consent a {color:inherit}
.q-options {display:grid;gap:8px;margin-top:24px}
.q-option,.q-sex button {width:100%;display:flex;align-items:center;gap:12px;text-align:left;min-height:46px;padding:11px 12px;background:var(--q-card);border:1px solid var(--q-stroke);border-radius:12px;color:var(--q-ink);box-shadow:0 1px 2px #3d301111;font-family:inherit;font-size:14px;font-weight:500;line-height:20px}
.q-option.has-emoji {min-height:58px}
.q-option:hover,.q-sex button:hover,.q-option[aria-pressed="true"],.q-sex button[aria-pressed="true"] {border-color:#8aa192;background:#f2f6ed}
.q-emoji {width:24px;flex:0 0 24px;font-size:22px;line-height:24px;text-align:center}
body[data-quiz-step="primaryGoal"] .q-emoji {width:auto;flex:0 0 auto;font-size:24px;line-height:32px}
@media (min-width:768px) {
  body[data-quiz-step="primaryGoal"] .q-option {padding:16px}
  body[data-quiz-step="primaryGoal"] .q-emoji {font-size:30px;line-height:36px}
}
.q-select {flex:0 0 24px;margin-left:auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #d8d5d0;background:white}
.q-select svg {width:14px;height:14px;visibility:hidden}
.q-option[aria-pressed="true"] .q-select {background:var(--q-forest);border-color:var(--q-forest);color:white}
.q-option[aria-pressed="true"] .q-select svg {visibility:visible}
.q-instruction {color:var(--q-muted);font-size:14px;line-height:20px;text-align:center;margin:8px 0 0}
.q-sex {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.q-sex button {min-height:128px;display:flex;flex-direction:column;justify-content:center;text-align:center;border-width:2px;font-size:16px;gap:7px}
.q-sex button>span {font-family:Arial,sans-serif;line-height:40px;font-size:38px;font-weight:400}
.q-question-image {margin-top:24px;aspect-ratio:1.55;object-fit:cover;border-radius:12px}
body[data-quiz-step="ignores"] .q-question-image,body[data-quiz-step="newPlace"] .q-question-image {object-fit:contain}
.q-chips {margin:24px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.q-chip {border:1px solid #e6e4df;background:#f3f4f6;border-radius:50px;min-height:38px;font-size:14px;line-height:20px;padding:8px 16px;font-weight:500}
.q-chip:hover,.q-chip[aria-pressed="true"] {background:#dcfce7;color:#166534;border-color:#a5dab4}
.q-custom-breed {display:block;margin-bottom:8px;color:var(--q-muted);font-size:14px}
.q-search {display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dfdbd4;padding:0 12px;border-radius:12px}
.q-search svg {flex:none;color:var(--q-muted)}
.q-search input {border:0;background:none;width:100%;min-height:47px;font-size:14px;color:var(--q-ink)}
.q-search input:focus-visible {outline:0}
.q-search:focus-within {outline:2px solid var(--q-forest);outline-offset:2px}
.q-breed-matches {list-style:none;margin:8px 0 0;padding:0;max-height:min(300px,40dvh);overflow-y:auto;scroll-padding:3px;border:1px solid #dfe2e6;border-radius:12px;background:#fff;color:var(--q-ink);text-align:left}
.q-breed-matches[hidden] {display:none}
.q-breed-matches [role="option"] {padding:12px 16px;font:inherit;font-size:14px;line-height:20px;cursor:pointer;overflow-wrap:anywhere}
.q-breed-matches li+li {border-top:1px solid #f0efec}
.q-breed-matches [aria-selected="true"],.q-breed-matches [role="option"]:hover {background:#eff3ee}

.q-text {display:block;width:100%;min-height:50px;border:1px solid var(--q-stroke);background:#fff;color:var(--q-ink);border-radius:12px;padding:12px 16px;font-size:16px}
.q-question form>.q-text {margin-top:24px}
.q-scale-prompt {font-size:14px;color:var(--q-forest);font-weight:650;text-align:center;margin:0 0 8px}
.q-scale {display:grid;grid-template-columns:repeat(5,1fr);margin-top:32px;background:#eae9e9;border-radius:16px;overflow:hidden}
.q-scale button {border:0;border-radius:0;border-right:1px solid #d5d4d2;min-height:64px;background:transparent}
.q-scale button:last-child {border-right:none}
.q-scale button:hover,.q-scale button[aria-pressed="true"] {background:#d9e3d3}
.q-scale button>span {font-size:28px}.q-scale button:nth-child(2)>span,.q-scale button:nth-child(4)>span {font-size:22px}
.q-scale-labels {display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:16px;margin:10px 0 0}
.q-scale-labels span:last-child {text-align:right}
.q-dock {position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;padding:32px 16px max(16px,env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(42,33,29,.57),rgba(42,33,29,.23) 48%,transparent);pointer-events:none}
.q-next {display:block;width:min(358px,calc(100% - 36px));border:0;border-radius:40px;min-height:44px;padding:10px 18px;background:var(--q-forest);color:white;font-family:inherit;font-size:16px;font-weight:650;line-height:24px;text-transform:uppercase;pointer-events:auto}
.q-next:hover:enabled {background:#214833}
body[data-surface="quiz"] .q-next:disabled {background:#e5e7eb;color:#9ca3af;opacity:.68}
.q-note,.q-stage {text-align:center}
.q-note-0 .q-title,.q-note-2 .q-title,.q-note-3 .q-title {color:var(--q-forest)}
.q-body-copy {margin:12px 0 0;font-size:16px;line-height:24px}
.q-caption {margin:24px 0 0;color:var(--q-muted);font-size:14px;line-height:20px;text-align:center}
.q-note-0 .q-body-copy {margin:8px 0 0;font-size:16px;line-height:24px}
.q-note-0 .q-world {display:block;width:100%;aspect-ratio:1;object-fit:contain;margin:24px auto 0}
.q-proof {display:grid;grid-template-columns:minmax(86px,116px) minmax(0,1fr);align-items:center;gap:12px;margin:24px 0 0}
.q-proof-seal {text-align:center;color:var(--q-ink)}
.q-proof-seal strong {display:block;font-size:44px;line-height:44px;font-style:italic;font-weight:800}
.q-proof-seal em {display:block;margin-top:5px;font-size:11px;font-style:italic;font-weight:700;line-height:1.25}
.q-proof-seal img {display:block;width:min(100%,104px);height:auto;margin:3px auto 0}
.q-proof p {margin:0;text-align:left;font-size:13px;font-weight:600;line-height:1.375}
.q-proof-source {display:block;margin-top:4px;font-size:12px;line-height:1.4;font-weight:400;color:var(--q-muted)}
.q-note-0 .q-dock {background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.3),transparent)}
.q-note-0 .q-dock .q-next {width:min(358.4px,80%)}
@media(max-width:767px) {
  body[data-quiz-step="note-0"] .q-mast-clean {padding-top:32px}
  .q-note-0 .q-title {font-size:20px;line-height:28px}
}
@media(min-width:768px) {
  body[data-quiz-step="note-0"] .q-mast-clean {padding-top:64px}
  .q-note-0 .q-body-copy {font-size:18px;line-height:28px}
}
.q-goal-image {margin:24px 0 0;aspect-ratio:1.4;border-radius:15px}
.q-note-2 .q-body-copy {margin-top:24px}
.q-quote {text-align:left;background:#eaf2f4;border-radius:12px;padding:16px 20px;margin:24px 0 0;color:#355067}
.q-quote blockquote {margin:0}
.q-quote p {font-size:16px;line-height:24px;font-weight:600}
.q-quote figcaption {margin-top:16px;font-size:16px;color:var(--q-ink)}
.q-quote figcaption strong {color:var(--q-forest)}
.q-cycle {isolation:isolate;position:relative;width:100%;aspect-ratio:320/220;margin:24px auto 0}
.q-cycle-arrows {position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.q-cycle img {position:absolute;left:27%;top:27%;width:46%;height:60%;object-fit:contain;border-radius:43% 58% 47% 52%;background:#c0dce3}
.q-practice-calendar {display:block;width:100%;height:auto;margin:24px 0 28px}
.q-note-card {background:#e8e6da;border-radius:14px;overflow:hidden;text-align:left}
.q-note-card h2 {background:var(--q-forest);color:white;font-size:16px;padding:12px}
.q-note-card>div {display:flex;align-items:center;gap:12px;padding:16px}
.q-note-card .q-vet-team {width:38%;height:auto;aspect-ratio:3/4;flex:0 0 38%;object-fit:cover;object-position:center;border-radius:10px}
.q-note-card p {font-size:14px;line-height:20px}
.q-spectrum {margin-top:20px;text-align:left}
.q-spectrum>div:first-child {display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.q-spectrum>div:first-child span {font-size:12px;padding:4px 10px;border:1px solid var(--q-stroke);border-radius:30px}
.q-spectrum-track {position:relative;height:8px;border-radius:5px;background:linear-gradient(90deg,#d77c5a,#e7b951,#90b58d,#5aa7b2);margin:24px 0 8px}
.q-spectrum-track i {display:block;position:absolute;top:50%;left:50%;width:14px;height:14px;border:2px solid white;border-radius:50%;background:var(--q-forest);transform:translate(-50%,-50%)}
.q-spectrum-track .q-position-0 {left:6%}.q-spectrum-track .q-position-2 {left:94%}.q-spectrum-track .q-position--1 {display:none}
.q-spectrum-labels {display:flex;justify-content:space-between;gap:8px;color:var(--q-muted);text-transform:uppercase}
.q-spectrum-labels small {font-size:10px}
.q-profile-info {display:flex;align-items:flex-start;gap:12px;text-align:left;background:#f6ede6;border:1px solid #e8dcd4;border-radius:10px;margin:20px 0;padding:15px;font-size:14px;line-height:20px}
.q-profile-info b {color:#9f6c54}
.q-traits {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);align-items:end;gap:4px;text-align:left}
.q-traits dl {display:grid;gap:10px;margin:0}
.q-traits dl>div {display:grid;grid-template-columns:40px 1fr;gap:0 9px;align-items:center}
.q-traits dl i {grid-row:span 2;background:#eef2f1;font-style:normal;width:40px;height:40px;display:grid;place-items:center;border-radius:8px}
.q-traits dt {font-size:12px;color:var(--q-muted)}.q-traits dd {margin:0;font-size:14px;line-height:20px;font-weight:650}.q-traits img {object-fit:contain;max-height:160px}
.q-chart {margin:24px 0 0}
.q-chart>div {display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.q-chart-column {height:176px;background:#eae4da;border-radius:12px;display:flex;align-items:flex-end;overflow:hidden}
.q-chart-column i {width:100%;display:block;height:var(--chart-h);background:var(--chart-color);border-radius:10px;animation:q-rise .65s both;animation-delay:var(--delay);transform-origin:bottom}
.q-column-0 {--chart-h:16%;--chart-color:#db896e;--delay:0s}.q-column-1 {--chart-h:30%;--chart-color:#dfa15f;--delay:.12s}.q-column-2 {--chart-h:44%;--chart-color:#d9b369;--delay:.24s}.q-column-3 {--chart-h:60%;--chart-color:#b5bb74;--delay:.36s}.q-column-4 {--chart-h:78%;--chart-color:#91ae7a;--delay:.48s}.q-column-5 {--chart-h:100%;--chart-color:#6c9c81;--delay:.60s}
@keyframes q-rise {from {transform:scaleY(0)}to {transform:scaleY(1)}}
.q-chart figcaption {display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-size:12px;color:var(--q-muted)}
.q-chart figcaption span:first-child {text-align:start}.q-chart figcaption span:last-child {text-align:end}
.q-tasks {list-style:none;text-align:left;padding:0;display:grid;gap:14px;margin:32px 0}
.q-tasks li>div {display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:14px}
.q-tasks output {color:var(--q-forest);font-variant-numeric:tabular-nums}.q-tasks progress {height:8px}
.q-prep-note {text-align:left;background:var(--q-card);border:1px solid var(--q-stroke);border-radius:16px;padding:20px}
.q-note-paws {display:block;font-size:24px;color:var(--q-forest);margin-bottom:10px}.q-prep-note p {font-size:14px;line-height:20px}.q-prep-note strong {display:block;margin-top:12px;font-size:14px}
.q-prepare-dialog {width:min(320px,calc(100% - 40px));padding:24px;background:var(--q-card);border:0;border-radius:16px;color:var(--q-ink)}
.q-prepare-dialog::backdrop {background:#1a1714a1}
.q-prepare-dialog h2 {font-size:20px;line-height:28px}.q-prepare-dialog>div {display:flex;gap:10px;justify-content:center;margin-top:20px}.q-prepare-dialog button {min-height:44px;flex:1;border-radius:40px;border:1px solid var(--q-forest);background:var(--q-forest);color:white;font-weight:600}
.q-prepare-dialog button+button {background:white;color:var(--q-forest)}
.q-email .q-art {width:200px;height:200px;object-fit:contain;margin:24px auto}
.q-safe {display:flex;text-align:left;gap:12px;margin:24px 0;color:#797d80;font-size:12px;line-height:20px}
.q-safe>span:first-child {font-size:16px}
.q-email .q-next {width:100%;text-transform:none}
@media(max-width:700px) {
  .q-mast {padding-top:24px}.q-mast-clean {padding-top:32px}
  .q-progress {margin:16px 0 24px}
  .q-title {font-size:20px;line-height:28px}
  body[data-quiz-step="age"] .q-mast,body[data-quiz-step="email"] .q-mast {padding-top:24px}
  .q-age .q-title {font-size:24px;line-height:32px}
  .q-subtitle {font-size:14px;line-height:20px}.q-age h2 {margin-top:24px}
  .q-age-picture {height:176px}
  .q-dock .q-next {width:min(286px,calc(100% - 36px))}
}
@media(max-width:340px) {
  .q-age-picture {height:145px}.q-age-card .q-age-label {padding-inline:9px;font-size:14px}.q-age-label i {flex-basis:23px;width:23px;height:23px}
}
@media(prefers-reduced-motion:reduce) {
  .q-chart-column i {animation:none}
}
.q-age-picture {display:grid;place-items:end center}
.q-age-picture img {width:83%;height:80%;margin-bottom:15px}
.q-age-card:first-child .q-age-picture img {width:72%;height:66%;margin-bottom:22px}
.q-age-card:nth-child(2) .q-age-picture img {width:80%;height:77%}
.q-title {line-height:32px}.q-age h2 {margin-top:24px}
body[data-quiz-step="name"] .q-text {min-height:46px;border-radius:30px;text-align:center}
body[data-quiz-step="ignores"] .q-question-image,
body[data-quiz-step="feeding"] .q-question-image,
body[data-quiz-step="rewardUse"] .q-question-image {
  aspect-ratio:5/3;
  object-fit:cover;
  mask-image:radial-gradient(ellipse 25% 26% at 32% 36%,#000 98%,transparent),radial-gradient(ellipse 22% 30% at 55% 31%,#000 98%,transparent),radial-gradient(ellipse 24% 27% at 70% 44%,#000 98%,transparent),radial-gradient(ellipse 25% 25% at 65% 68%,#000 98%,transparent),radial-gradient(ellipse 25% 27% at 41% 67%,#000 98%,transparent),radial-gradient(ellipse 22% 23% at 26% 57%,#000 98%,transparent);
}
body[data-quiz-step="newPlace"] .q-question-image {aspect-ratio:1.69;object-fit:cover;mask-image:radial-gradient(ellipse 49% 49% at 50% 50%,#000 72%,transparent 99%)}
.q-cycle-label {position:absolute;display:block;min-width:62px;max-width:44%;text-align:center;border:1px solid #c9e4ed;border-radius:20px;padding:4px 8px;background:#e2f1f7;color:var(--q-ink);line-height:14px;font-size:11px;font-weight:650;overflow-wrap:anywhere;z-index:2}
.q-label-0 {left:0;top:21%}.q-label-1 {right:0;top:21%}.q-label-2 {left:50%;bottom:0;transform:translateX(-50%)}
@media(max-width:700px){.q-title{line-height:28px}.q-age .q-title{line-height:32px}}
