:root {
  --pb-bg: var(--color-bg, #f4f7f4);
  --pb-card: var(--color-surface-raised, #fffdfa);
  --pb-ink: var(--color-text, #17352f);
  --pb-muted: var(--color-text-muted, #60736b);
  --pb-line: var(--color-border, #dce7df);
  --pb-primary: var(--color-primary, #1f6655);
  --pb-on-primary: #fff;
  --pb-selected: var(--color-primary-soft, #e4f1e8);
  --pb-focus: var(--color-focus, #a85d38);
}
[data-theme=dark] {
  --pb-bg: var(--color-bg, #101d1a);
  --pb-card: var(--color-surface-raised, #182a25);
  --pb-primary: var(--color-primary, #8bd3b4);
  --pb-on-primary: #10211b;
  --pb-selected: var(--color-primary-soft, #24493b);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--pb-bg); color: var(--pb-ink); }
main { max-width: 1080px; margin: auto; padding: 36px 24px 64px; }
main h1 { font-size: 24px; margin: 0 0 18px; }
main h2 { font-size: 23px; }
main h3 { font-size: 18px; }
main p, main li { overflow-wrap: anywhere; }
main section, main .card {
  background: var(--pb-card); border: 1px solid var(--pb-line);
  border-radius: 20px; padding: 28px; margin: 24px 0;
}
main label { display: block; margin: 16px 0; }
main input, main textarea, main select, main button, dialog button { font: inherit; }
main input:not([type=checkbox]):not([type=radio]), main textarea, main select {
  display: block; width: 100%; min-width: 0; margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--pb-line); border-radius: 10px; background: var(--pb-bg); color: var(--pb-ink);
}
main textarea { min-height: 100px; resize: vertical; }
main input[type=tel] { direction: ltr; text-align: start; }
main input[type=checkbox], main input[type=radio], dialog input[type=checkbox] {
  inline-size: 20px; block-size: 20px; flex: 0 0 20px; accent-color: var(--pb-primary);
  vertical-align: middle; margin-inline: 0 10px;
}
main button, dialog button {
  border: 1px solid var(--pb-primary); border-radius: 12px; padding: 13px 22px;
  min-height: 48px; background: var(--pb-primary); color: var(--pb-on-primary);
  cursor: pointer; line-height: 1.8; white-space: normal;
}
main button:hover, dialog button:hover { filter: brightness(.94); }
main button.secondary, main button[data-action=previous], main button[data-action=home], main button[data-action=later] {
  background: transparent; color: var(--pb-ink); border-color: var(--pb-line);
}
main button:disabled, dialog button:disabled { opacity: .6; cursor: not-allowed; }
main a { color: var(--pb-primary); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 0; }
.actions > * { flex: 1; }
.actions button[type=submit] { flex: 2; font-weight: 700; }
main small, main .muted, main .stage-description, #save-state { color: var(--pb-muted); }
main small { display: block; font-size: 14px; }
main .notice { padding: 16px; background: var(--pb-selected); border-inline-start: 3px solid var(--pb-primary); }
main .grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
main .card { margin: 0; min-width: 0; }
main progress { width: 100%; height: 12px; border: 0; border-radius: 20px; accent-color: var(--pb-primary); overflow: hidden; }
main progress::-webkit-progress-bar { background: var(--pb-bg); }
main progress::-webkit-progress-value { background: var(--pb-primary); border-radius: 20px; }
main progress::-moz-progress-bar { background: var(--pb-primary); border-radius: 20px; }
main details { margin: 20px 0; }
main summary { cursor: pointer; min-height: 48px; padding-block: 10px; }
main .question-card {
  padding: 22px; border-radius: 16px; border: 1px solid var(--pb-line);
  margin: 28px 0; background: var(--pb-bg); min-width: 0;
}
.question-card legend { font-weight: 600; padding-inline: 8px; max-width: 100%; line-height: 2; }
main .choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
main .choice {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px;
  border: 1px solid var(--pb-line); border-radius: 12px; min-height: 56px;
  cursor: pointer; background: var(--pb-card); color: var(--pb-ink);
}
.choice:has(input:checked) { background: var(--pb-selected); border-color: var(--pb-primary); box-shadow: inset 0 0 0 1px var(--pb-primary); }
.choice:has(input:focus-visible) { outline: 3px solid var(--pb-focus); outline-offset: 3px; }
.choice input { margin-inline-end: 0; }
.likert { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.likert .choice { flex-direction: column; text-align: center; font-size: 14px; padding: 14px 7px; }
main .assessment-intro { padding: 44px; background: radial-gradient(ellipse at top right,var(--pb-selected),var(--pb-card) 75%); }
.assessment-intro h2 { font-size: clamp(26px,4vw,38px); max-width: 680px; line-height: 1.7; }
.assessment-intro p { max-width: 680px; }
.eyebrow { color: var(--pb-primary); font-size: 14px; }
.intro-metrics { display: flex; gap: 10px; flex-wrap: wrap; margin-block: 24px; }
.intro-metrics span { border: 1px solid var(--pb-line); border-radius: 30px; padding: 7px 14px; background: var(--pb-card); font-size: 14px; }
.stage-progress { padding: 18px 0; }
.stage-progress > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.step-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 13px; }
.step-navigation span { padding: 7px 12px; border: 1px solid var(--pb-line); border-radius: 24px; color: var(--pb-muted); }
.step-navigation [aria-current=step] { background: var(--pb-primary); color: var(--pb-on-primary); border-color: var(--pb-primary); }
main .result-hero { padding: 36px; border-inline-start: 5px solid var(--pb-primary); background: var(--pb-selected); }
.result-hero h2 { font-size: clamp(24px,4vw,34px); }
main .lead-card { border: 2px solid var(--pb-primary); }
.lead-card form { max-width: 520px; }
.lead-card button { margin-top: 12px; }
.consent { font-size: 14px; }
main .instagram-card { border-style: dashed; }
.form-error { color: #a12f21; font-size: 14px; margin: 8px 0; }
[data-theme=dark] .form-error { color: #ffb9a9; }
#feedback { white-space: pre-wrap; min-height: 0; color: var(--pb-muted); }
#feedback:empty { margin: 0; }
#save-state { font-size: 14px; }
.skeleton { height: 120px; border-radius: 20px; background: var(--pb-selected); }
.analysis-tabs { display: flex; gap: 12px; flex-wrap: wrap; }
.scroll { overflow: auto; }
main table { width: 100%; border-collapse: collapse; }
main th, main td { text-align: start; padding: 12px; border-bottom: 1px solid var(--pb-line); }
main dl { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
main dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
main pre { white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; background: var(--pb-bg); padding: 14px; }
dialog { max-width: 520px; width: 90%; padding: 28px; border: 1px solid var(--pb-line); border-radius: 20px; background: var(--pb-card); color: var(--pb-ink); }
dialog::backdrop { background: #10211b99; }
:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 4px; }
@media(max-width:680px) {
  main { padding: 24px 14px 44px; }
  main h1 { font-size: 21px; }
  main section, main .assessment-intro, main .result-hero { padding: 22px 18px; }
  main .grid, main .choice-grid, .likert { grid-template-columns: minmax(0,1fr); }
  main .question-card { padding: 18px 12px; }
  .likert .choice { flex-direction: row; text-align: start; font-size: 15px; }
  main dl { grid-template-columns: 1fr; }
  .actions > * { min-width: 110px; }
  .step-navigation { gap: 6px; }
  .step-navigation span { padding: 5px 9px; font-size: 12px; }
}
.brandiyar-invite{background:linear-gradient(135deg,#edf7ef,#fff);border:1px solid #cfe3d5!important}.brandiyar-invite h2{font-size:22px!important;margin:8px 0}.brandiyar-invite p{color:var(--pb-muted)}
.report-next{border-top:3px solid var(--pb-primary)}
.report-next form{max-width:600px;margin-top:24px;padding-top:24px;border-top:1px solid var(--pb-line)}
.report-next .text-link{display:inline-flex;align-items:center;min-height:44px;margin-inline-start:16px;color:var(--pb-primary)}
.full-report>header{margin-block:28px}
.full-report-nav{display:flex;flex-wrap:wrap;gap:8px;padding-block:12px;border-block:1px solid var(--pb-line)}
.full-report-nav button{background:var(--pb-card);color:var(--pb-ink);border:1px solid var(--pb-line);font-size:13px}
.full-report section{scroll-margin-top:110px}
.report-dimension{border-bottom:1px solid var(--pb-line);padding-block:24px}
.report-dimension:last-child{border-bottom:0}
.report-dimension h4{color:var(--pb-primary);margin-block:20px 8px;font-size:15px}
.full-report dt{font-weight:700;color:var(--pb-ink)}
.full-report dd{color:var(--pb-muted);margin-inline-start:0;padding-bottom:12px}
.full-report li{padding-block:8px}
.full-report .report-product-offer{border-top:3px solid var(--pb-primary);margin-top:36px}
@media(max-width:600px){.report-next .text-link{margin-inline-start:0;display:flex}.full-report-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.full-report dl{display:block}.full-report-nav button{font-size:12px;padding:10px}}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }