/* ============================================
UBA Health — Shared Styles
============================================ */

:root {
/* Colors */
--navy-900: #0a1a33;
--navy-800: #0f2547;
--navy-700: #16305c;
--ink: #1a2436;
--slate: #5b6478;
--slate-light: #8892a3;
--border: #e2e6ed;
--bg-soft: #f6f7f9;
--white: #ffffff;
--silver: #c7cdd6;
--silver-dark: #9aa3b2;
--silver-darker: #7c8494;

/* Type */
--font-display: 'Century Gothic', CenturyGothic, 'Segoe UI', 'Questrial', Futura, sans-serif;
--font-body: 'Century Gothic', CenturyGothic, 'Segoe UI', 'Questrial', Futura, sans-serif;

--radius: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
overflow-x: hidden;
}

body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--white);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.15;
margin: 0 0 0.5em;
color: var(--navy-900);
}

h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; color: var(--slate); max-width: 62ch; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}

section { padding: 56px 0; }

@media (min-width: 1700px) {
.container { max-width: 1680px; }
}

/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 26px;
border-radius: var(--radius);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
white-space: nowrap;
}

.btn-primary {
background: linear-gradient(180deg, #d4d9e0, var(--silver-dark));
color: var(--navy-900);
border: 1px solid var(--silver-darker);
}
.btn-primary:hover {
background: linear-gradient(180deg, #c3c9d2, var(--silver-darker));
}

.btn-outline {
background: transparent;
border: 1px solid rgba(255,255,255,0.35);
color: var(--white);
}
.btn-outline:hover {
border-color: var(--white);
background: rgba(255,255,255,0.06);
}

.btn-dark-outline {
background: transparent;
border: 1px solid var(--navy-900);
color: var(--navy-900);
}
.btn-dark-outline:hover { background: var(--navy-900); color: var(--white); }

.btn-block { width: 100%; }

/* ---------- Header / Nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--white);
border-bottom: 1px solid var(--border);
}

.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
}

.logo {
display: flex;
flex-direction: column;
line-height: 1;
}
.logo-img {
height: 42px;
width: auto;
display: block;
}
.logo .mark {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
color: var(--navy-900);
letter-spacing: 0.02em;
}
.logo .tagline {
font-size: 0.75rem;
color: var(--slate-light);
letter-spacing: 0.04em;
margin-top: 4px;
text-align: center;
white-space: nowrap;
}

.nav-links {
display: flex;
align-items: center;
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}

.nav-links a {
font-size: 0.92rem;
font-weight: 500;
color: var(--ink);
}
.nav-links a:hover { color: var(--navy-800); }

.nav-right {
display: flex;
align-items: center;
gap: 18px;
}

.nav-phone {
font-size: 0.9rem;
color: var(--slate);
font-weight: 500;
}

.dropdown { position: relative; }
.dropdown-menu {
position: absolute;
top: 130%;
left: 0;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 12px 28px rgba(10,26,51,0.12);
min-width: 220px;
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: all 0.15s ease;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
display: block;
padding: 9px 12px;
border-radius: 4px;
font-size: 0.9rem;
}
.dropdown-menu a:hover { background: var(--bg-soft); }

/* ---------- Hero ---------- */
.hero {
background: var(--navy-900);
color: var(--white);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
justify-items: stretch;
gap: 40px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-inner { max-width: 560px; }
.hero h1 { color: var(--white); }
.hero p.lead { color: rgba(255,255,255,0.75); font-size: 1.08rem; max-width: 46ch; }
.hero-ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero-visual {
position: relative;
height: 100%;
min-height: 360px;
border-radius: 12px;
background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}

.hero-score-card {
background: var(--white);
border-radius: 14px;
padding: 32px 36px;
width: 100%;
max-width: 320px;
margin: 0 auto;
text-align: center;
transform-origin: center center;
box-shadow: 0 24px 48px rgba(0,0,0,0.28);
opacity: 0;
animation: heroCardIn 0.7s ease 0.15s forwards, heroCardFloat 4s ease-in-out 1s infinite;
}
@keyframes heroCardIn {
from { opacity: 0; transform: translateY(18px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroCardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.hsc-label {
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--slate-light);
margin: 0 0 10px;
font-weight: 600;
}
.hsc-org {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--navy-900);
margin: 0 0 18px;
}
.hsc-org span {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--slate-light);
}
.hsc-stat-label {
font-size: 0.75rem;
color: var(--slate-light);
margin: 0 0 4px;
font-weight: 600;
}
.hsc-score {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 700;
color: var(--navy-900);
margin: 0;
line-height: 1.15;
overflow-wrap: anywhere;
}
.hsc-amt { white-space: nowrap; }
.hsc-divider {
height: 1px;
background: var(--border);
margin: 18px 0 14px;
}
.hsc-oop {
font-size: 0.92rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 22px;
}
.hsc-content {
transition: opacity 0.6s ease;
}
.hsc-content.fading { opacity: 0; }

.hsc-pct {
font-size: 1.1rem;
font-weight: 500;
color: var(--slate-light);
}
.hsc-arrow { color: var(--navy-800); margin: 0 2px; }
.hsc-btn {
display: inline-block;
background: var(--navy-900);
color: var(--white);
font-size: 0.82rem;
font-weight: 600;
padding: 11px 18px;
border-radius: 6px;
text-decoration: none;
}

.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--border);
}
.hero-stat {
padding: 30px 32px;
border-right: 1px solid var(--border);
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border-right: none; padding-right: 0; }
.hero-stat h4 {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--navy-900);
}
.hero-stat p { font-size: 0.87rem; margin: 0; line-height: 1.5; }

/* ---------- Generic section helpers ---------- */
.section-head {
max-width: 900px;
margin: 0 auto 44px;
text-align: center;
}
.section-head p {
margin: 0 auto;
max-width: 72ch;
font-size: 1.08rem;
}

.eyebrow-plain {
font-size: 0.85rem;
color: var(--slate-light);
margin-bottom: 10px;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 26px;
}

.icon-badge {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--bg-soft);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--navy-800);
}
.icon-badge svg { display: block; }

.bg-soft { background: var(--bg-soft); }
.bg-navy { background: var(--navy-900); color: var(--white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }
.bg-navy p { color: rgba(255,255,255,0.7); }

.cta-band {
background: var(--navy-900);
color: var(--white);
text-align: center;
padding: 56px 24px;
border-radius: 10px;
}
.cta-band h3 { color: var(--white); margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,0.7); margin: 0 auto 24px; }

/* ---------- Forms ---------- */
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 5px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
width: 100%;
padding: 10px 13px;
border: 1px solid var(--border);
border-radius: 5px;
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--ink);
background: var(--white);
margin-bottom: 12px;
}
textarea { resize: vertical; min-height: 100px; }
input:focus, select:focus, textarea:focus {
outline: 2px solid var(--navy-700);
outline-offset: 1px;
}

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) {
.form-grid-2 { grid-template-columns: 1fr; }
}

.upload-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 0.88rem;
}
.upload-btn {
border: 1px solid var(--border);
background: var(--bg-soft);
padding: 6px 12px;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
}

.doc-check {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.doc-check input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--navy-800);
flex-shrink: 0;
cursor: pointer;
}
.doc-check-body { display: flex; flex-direction: column; gap: 2px; }
.doc-check-body strong { font-size: 0.9rem; color: var(--ink); }
.doc-check-body span { font-size: 0.8rem; color: var(--slate); }

.rate-input-wrap {
position: relative;
margin-bottom: 12px;
}
.rate-input-wrap span {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--slate-light);
font-size: 0.92rem;
pointer-events: none;
}
.rate-input-wrap input {
padding-left: 26px !important;
margin-bottom: 0 !important;
}
/* remove native number spinners */
.rate-input-wrap input[type="number"]::-webkit-outer-spin-button,
.rate-input-wrap input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.rate-input-wrap input[type="number"] {
-moz-appearance: textfield;
}

/* ---------- Form Wizard ---------- */
.progress-wrap { margin-bottom: 20px; }
.progress-bar-track {
width: 100%;
height: 6px;
background: var(--border);
border-radius: 999px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(--navy-800);
border-radius: 999px;
transition: width 0.3s ease;
}
.progress-label {
font-size: 0.8rem;
color: var(--slate-light);
margin: 8px 0 0;
text-align: right;
}

.confidential-note {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--slate);
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 18px;
}

.wizard-card { min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
.wizard-step { display: none; }
.wizard-step:not(#introStep):not(#interstitialStep):not(#docsStep) {
max-width: 480px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.wizard-step.active { display: block; animation: wizardFadeIn 0.25s ease; }
.wizard-step.active + .wizard-step.active { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
@keyframes wizardFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.wizard-step label:first-child { font-size: 1rem; margin-bottom: 12px; }
.wizard-step input, .wizard-step select { font-size: 1rem; padding: 13px 14px; }

.wizard-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}

.intro-checklist li {
opacity: 0;
transform: translateY(10px);
animation: checkItemIn 0.3s ease forwards;
}
.intro-checklist li:nth-child(1) { animation-delay: 0.2s; }
.intro-checklist li:nth-child(2) { animation-delay: 0.7s; }
.intro-checklist li:nth-child(3) { animation-delay: 1.2s; }

.intro-checklist .check-icon {
display: inline-flex;
transform: scale(0);
animation: checkPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.intro-checklist li:nth-child(1) .check-icon { animation-delay: 0.45s; }
.intro-checklist li:nth-child(2) .check-icon { animation-delay: 0.95s; }
.intro-checklist li:nth-child(3) .check-icon { animation-delay: 1.45s; }

@keyframes checkItemIn {
to { opacity: 1; transform: translateY(0); }
}
@keyframes checkPop {
to { transform: scale(1); }
}

/* ---------- Footer ---------- */
.site-footer {
background: var(--navy-900);
color: rgba(255,255,255,0.65);
padding: 48px 0 24px;
font-size: 0.88rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 32px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid h4 {
color: var(--white);
font-family: var(--font-body);
font-size: 0.9rem;
margin-bottom: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-bottom {
display: flex;
justify-content: space-between;
padding-top: 20px;
font-size: 0.8rem;
}

/* ---------- FAQ ---------- */
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-q {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 20px 4px;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
color: var(--ink);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
padding: 0 4px;
}
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 18px; }
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform 0.2s ease; font-size: 1.3rem; color: var(--slate); }

/* ---------- Priority Ranking Tiles ---------- */
.rank-tiles {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
touch-action: none;
}
.rank-tile {
display: flex;
align-items: center;
gap: 12px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 14px;
user-select: none;
-webkit-user-select: none;
position: relative;
cursor: grab;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.rank-tile.dragging {
box-shadow: 0 10px 24px rgba(10,26,51,0.18);
border-color: var(--silver-darker);
z-index: 5;
cursor: grabbing;
}
.rank-num {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--navy-900);
color: var(--white);
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.rank-text {
flex: 1;
font-size: 0.9rem;
color: var(--ink);
line-height: 1.35;
}
.rank-arrows {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
.rank-arrow-btn {
width: 26px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
color: var(--slate);
padding: 0;
}
.rank-arrow-btn:hover { background: var(--border); color: var(--ink); }
.rank-arrow-btn:disabled { opacity: 0.3; cursor: default; }
.rank-arrow-btn:disabled:hover { background: var(--bg-soft); color: var(--slate); }
.rank-handle {
flex-shrink: 0;
width: 32px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--slate-light);
cursor: grab;
touch-action: none;
}
.rank-handle:active { cursor: grabbing; }
.rank-hint {
font-size: 0.8rem;
color: var(--slate-light);
margin: 10px 0 0;
}
.rank-tiles-wrap {
background: var(--navy-900);
border-radius: 10px;
padding: 18px 16px;
margin-top: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-2 { grid-template-columns: 1fr; }
.hero-stats { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-grid {
display: flex;
flex-direction: column;
align-items: stretch;
}
.hero-inner { width: 100%; max-width: 100%; }
.hero-visual { min-height: 220px; order: -1; width: 100%; margin: 0 auto; }

.nav-toggle { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
border-bottom: 1px solid var(--border);
box-shadow: 0 12px 20px rgba(10,26,51,0.08);
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 10px 24px 18px;
}
.nav-links.mobile-open { display: flex; }
.nav-links > li { width: 100%; }
.nav-links > li > a { display: block; padding: 10px 0; }
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
min-width: auto;
padding: 0 0 4px 14px;
display: none;
}
.dropdown.mobile-expanded .dropdown-menu { display: block; }
}
@media (max-width: 560px) {
.grid-3, .grid-4 { grid-template-columns: 1fr; }
.hero-stats { grid-template-columns: 1fr; }
.hero-stat {
border-right: none;
border-bottom: 1px solid var(--border);
text-align: center;
padding: 26px 24px;
}
.hero-stat:first-child { padding-left: 24px; }
.hero-stat:last-child { padding-right: 24px; }
.footer-grid { grid-template-columns: 1fr; }
}

/* The header logo image is a wide wordmark (not a square icon), so at its
desktop height it is far too wide to sit next to the mobile menu button
and the "Get Free Analysis" button without overflowing small screens.
Shrink it, drop the tagline, and hide the header CTA (the hero section
below already repeats it) so the header never forces horizontal scroll. */
@media (max-width: 640px) {
.nav-wrap {
padding: 12px 16px;
gap: 10px;
}
.logo-img {
height: 26px;
}
.logo .tagline {
display: block;
white-space: normal;
font-size: 0.62rem;
line-height: 1.25;
max-width: 190px;
letter-spacing: 0.02em;
margin-top: 3px;
}
.nav-right {
display: none;
}
.hero-score-card {
padding: 28px 22px;
}
.hsc-score {
font-size: 1.5rem;
}
.hsc-pct {
font-size: 0.95rem;
}
}

.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.nav-toggle span {
display: block;
height: 2px;
width: 100%;
background: var(--navy-900);
border-radius: 2px;
}

/* Fix: mobile overflow on Strengthen Your Analysis tier cards -
   the CTA buttons' white-space:nowrap forced the card wider than
   the mobile grid column, pushing content off-screen. */
#docsStep .card,
#docsStep .grid-2 {
min-width: 0;
}
#docsStep .card .btn-block {
white-space: normal;
text-align: center;
}


/* Resource card image placeholder - graph-paper background with
   a twinkling sparkle badge, used until real article art is added. */
@keyframes iconTwinklePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.15); }
}
@keyframes iconTwinkleGlow {
0%, 100% { filter: drop-shadow(0 0 0px rgba(154,163,178,0)); }
50% { filter: drop-shadow(0 0 6px rgba(154,163,178,0.7)); }
}
.resource-thumb {
background-color: var(--bg-soft);
background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 18px 18px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.resource-thumb .icon-badge-dark {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--navy-900);
display: flex;
align-items: center;
justify-content: center;
}
.resource-thumb .icon-badge-dark svg {
animation: iconTwinklePulse 2.4s ease-in-out infinite, iconTwinkleGlow 2.4s ease-in-out infinite;
}

/* footer-bottom-mobile: stack copyright and legal links so "Terms of Service" does not break */
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; gap: 6px; }
  .footer-bottom > span:last-child { white-space: nowrap; }
}

/* grid2-mobile-fix: let grid columns shrink to the phone width so cards do not push content off-screen */
@media (max-width: 900px) {
  .grid-2 > * { min-width: 0; }
  .approach-visual > div { padding: 28px 12px !important; }
}