/* Create Socially Brand Usage Guide v1.0, page 7.
   Core colors stay exact; pale blue surfaces are white/brand-blue blends.
   Framework names, numbers and geometry supplement color throughout. */
:root{
  --brand-navy:#07134F;
  --brand-blue:#2489F5;
  --brand-ink:#121A35;
  --brand-gray:#F4F6F8;
  --brand-border:#D9DEE5;
  --brand-white:#FFFFFF;
  --blue-wash:color-mix(in srgb,var(--brand-blue) 8%,var(--brand-white));
  --blue-surface:color-mix(in srgb,var(--brand-blue) 16%,var(--brand-white));
  --muted:color-mix(in srgb,var(--brand-ink) 76%,var(--brand-white));
  /* Existing component aliases use the approved palette. */
  --ink:var(--brand-navy);
  --cream:var(--brand-white);
  --paper:var(--brand-gray);
  --coral:var(--brand-blue);
  --gold:var(--brand-blue);
  --sage:var(--brand-gray);
  --line:var(--brand-border);
}
body{background:var(--brand-white);color:var(--brand-ink)}
h1,h2,h3,h4,h5{color:var(--brand-navy)}
header,#site-menu.is-open,.hero{background:var(--brand-white)}
header{border-bottom-color:var(--brand-border)}
.menu-toggle,.menu-toggle:hover,.menu-toggle:focus{background:var(--brand-navy)}
.menu-toggle:focus-visible{outline-color:var(--brand-blue)}
.eyebrow,.number{color:var(--brand-navy)}
.eyebrow::before{content:"";display:inline-block;width:24px;height:3px;margin-right:10px;vertical-align:middle;background:var(--brand-blue)}
.lead,.path-context,.path-description,.dag-node .dag-description,.quiz-brand-selected #quiz-tagline{color:var(--brand-ink)}
.hero-secondary,.path-link,.path-heading-hint,.quiz-hint{color:var(--brand-navy);text-decoration-color:var(--brand-blue)}
.path-heading:hover .path-heading-hint,.quiz-word:hover .quiz-hint{color:var(--brand-navy);text-decoration-thickness:2px}
.process h2#dag-title em{color:var(--brand-navy)}
.growth-bridge{background:var(--brand-gray);border-block:1px solid var(--brand-border)}
.growth-bridge .number{color:var(--brand-navy)}
.process{background:var(--brand-white)}
/* Distinct pathway surfaces, repeated in hero tiles and quiz headers. */
.path-card.discover{background:var(--brand-gray);border-color:var(--brand-border);border-left:5px solid var(--brand-navy)}
.path-card.align{background:var(--brand-white);border:2px solid var(--brand-navy)}
.path-card.grow{background:var(--blue-surface);border-color:var(--brand-blue);border-top:5px solid var(--brand-blue)}
.path-copy h3,.path-brand small,.quiz-brand-selected p{color:var(--brand-ink)}
.dag-node.discover::after{background:var(--brand-gray)}
.dag-node.align::before{background:var(--brand-white);border-color:var(--brand-navy)}
.dag-node.align::after{border-color:var(--brand-blue)}
.dag-node.grow::before{background:var(--blue-surface)}
.dag-node.grow::after{background:var(--brand-blue)}
.dag-node .dag-hint{border-color:var(--brand-border)}
.dag-node.is-selected .dag-hint{border-color:var(--brand-blue)}
.no-solution{background:var(--blue-wash);border-top:1px solid var(--brand-border)}
.no-solution .solution-list{color:var(--brand-navy)}
.better{background:var(--brand-navy);color:var(--brand-white)}
.better :is(h2,h3,.eyebrow){color:var(--brand-white)}
.better div:last-child>p:not(.quote),.owner-questions li{color:var(--brand-gray)}
.better a{color:var(--brand-white);text-decoration-color:var(--brand-blue)}
.better .quote{border-left:3px solid var(--brand-blue);padding-left:18px}
.intake{background:var(--brand-gray);border-block:1px solid var(--brand-border)}
.panel{background:var(--brand-white);box-shadow:0 13px 30px rgb(18 26 53 / .08)}
.value-promise{background:var(--blue-wash);border-color:var(--brand-blue);padding-right:16px}
.quiz-brand.discover{background-color:var(--brand-gray)}
.quiz-brand.align{background:var(--brand-white);border-color:var(--brand-navy)}
.quiz-brand.align::after{border-color:var(--brand-blue)}
.quiz-brand.grow{background:var(--blue-surface);border-color:var(--brand-blue)}
.quiz-area-nav button{background:var(--brand-gray);color:var(--brand-ink)}
.quiz-area-nav button[aria-pressed="true"]{background:var(--brand-navy);color:var(--brand-white);border-color:var(--brand-blue);box-shadow:inset 0 -3px var(--brand-blue)}
.progress b{background:var(--brand-border)}
.progress i{background:var(--brand-blue)}
.choices label{color:var(--brand-ink);background:var(--brand-white)}
.choices label:has(input:checked){background:var(--blue-wash);border-color:var(--brand-blue);box-shadow:inset 3px 0 var(--brand-blue)}
.choices label:focus-within{outline-color:var(--brand-navy)}
.choices input{accent-color:var(--brand-navy)}
.answer-feedback{background:var(--blue-wash);border-color:var(--brand-blue);color:var(--brand-ink)}
#feedback-action{border-top:1px solid var(--brand-border);padding-top:12px}
#quiz-result{border-top:4px solid var(--brand-navy);padding-top:22px}
#result-copy{background:var(--blue-wash);color:var(--brand-ink);padding:16px}
.insight-card{background:var(--brand-white);border:1px solid var(--brand-border);border-left:4px solid var(--brand-blue)}
.notice{background:var(--brand-gray);color:var(--brand-ink);border-left:3px solid var(--brand-border)}
#keep-insights{background:var(--brand-gray);padding:22px;border-top:3px solid var(--brand-blue)}
.advisor-option{border-color:var(--brand-navy)}
/* Bright blue is an accent, never small blue text on white. */
.button,button{background:var(--brand-navy);border-color:var(--brand-navy);color:var(--brand-white)}

/* CTA links share the approved compact rounded treatment; ordinary controls
   retain their own component styling. */
a.button{border-radius:6px}
header a.direct-cta,.help-jump>a.button{border-radius:6px!important}
.secondary,.outline{background:var(--brand-white);color:var(--brand-navy)}
.button:hover,button:hover,.button:focus,button:focus{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--brand-navy)}
.dag-node:hover,.dag-node:focus{color:var(--brand-navy)}
.panel button:focus-visible,.panel summary:focus-visible,.path-heading:focus-visible,.quiz-word:focus-visible{outline-color:var(--brand-navy)}
.hero-actions a:focus-visible,.better a:focus-visible{outline-color:var(--brand-blue)}
.error{color:var(--brand-navy);text-decoration:underline;text-decoration-thickness:2px}
.discovery{background:var(--brand-white);color:var(--brand-ink)}
.discovery .eyebrow{color:var(--brand-navy)}
.discovery div:last-child p{color:var(--brand-ink)}
#discovery-invitation{background:var(--brand-navy);padding:24px;border-top:4px solid var(--brand-blue)}
#discovery-invitation h3,#discovery-invitation p{color:var(--brand-white)}
#discovery-invitation button{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--brand-navy)}
#discovery-invitation button:hover,#discovery-invitation button:focus{background:var(--brand-white);border-color:var(--brand-white)}
footer{background:var(--brand-navy);color:var(--brand-gray)}
@media(max-width:767px){
  .mobile-result-invitation{background:var(--brand-white);border-top:3px solid var(--brand-blue);color:var(--brand-ink);box-shadow:0 -4px 16px rgb(18 26 53 / .1)}
  .mobile-result-invitation button{background:var(--brand-white);border-color:var(--brand-navy);color:var(--brand-navy)}
  .mobile-result-invitation button:hover,.mobile-result-invitation button:focus{background:var(--blue-wash)}
}