/* Interior rollout of the approved homepage's visual language.
   Loaded only on non-home routes. Existing markup, scripts, and shell are retained.
   Scope is deliberately explicit: never load homepage-draft.css on these pages. */
body[data-hh-page] {
  --hh-coral: #ff5a5f;
  --hh-teal: #006d77;
  --hh-yellow: #ffb703;
  --hh-cream: #fafaf9;
  --hh-ink: #1e293b;
  --hh-muted: #52616b;
  --hh-line: #dce2de;
  --hh-display: 'Outfit', sans-serif;
  --hh-body: 'DM Sans', sans-serif;
  background: var(--hh-cream);
  color: var(--hh-ink);
  font-family: var(--hh-body);
  line-height: 1.65;
}
body[data-hh-page] main { font-family: var(--hh-body); padding-top: 142px; padding-bottom: 80px; }
body[data-hh-page] main *, body[data-hh-page] main *::before, body[data-hh-page] main *::after { box-sizing: border-box; min-width: 0; }
body[data-hh-page] main [class*="font-"]:not(.material-symbols-outlined),
body[data-hh-page] .faq-content-inner, body[data-hh-page] .faq-notice,
body[data-hh-page] .legal-date, body[data-hh-page] .about-emphasis { font-family: var(--hh-body); }
body[data-hh-page] main :is(h1,h2,h3,h4), body[data-hh-page] .faq-trigger .faq-q {
  font-family: var(--hh-display) !important;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.18;
}
body[data-hh-page] main h1 { font-size: clamp(40px,4.6vw,62px); line-height: 1.06; letter-spacing: -.04em; }
body[data-hh-page] main h2 { font-size: clamp(28px,2.7vw,36px); }
body[data-hh-page] main h3 { font-size: 25px; }
body[data-hh-page] main :is(.text-ink,.text-on-surface,.text-navy,.text-navy-dark,.text-primary-container) { color: var(--hh-ink); }
body[data-hh-page] main :is(.text-muted,.text-on-surface-variant,.text-muted-purple) { color: var(--hh-muted); }
body[data-hh-page] main :is(.text-blue,.text-primary,.text-on-secondary-container) { color: var(--hh-teal); }
body[data-hh-page] main .text-coral { color: #a83a40; }
body[data-hh-page] main :is(.bg-mist,.bg-surface-low,.bg-surface-container-low,.bg-emerald-tint,.bg-surface-container-high) { background-color: #f2f5f0; }
body[data-hh-page] main :is(.bg-paper,.bg-surface-container-lowest) { background-color: #fff; }
body[data-hh-page] main :is(.bg-sky,.bg-secondary-container) { background-color: #d7eeea; }
body[data-hh-page] main :is(.bg-navy,.bg-primary-container,.bg-primary) { background-color: var(--hh-teal); }
body[data-hh-page] main :is([class~="bg-navy/90"]) { background-color: #00616b; }
body[data-hh-page] main :is([class*="border-line"],[class*="border-outline-variant"],.border-surface-dim,.border-lavender-neutral) { border-color: var(--hh-line); }
body[data-hh-page] main :is(.rounded-xl,.rounded-2xl) { border-radius: 16px; }
body[data-hh-page] main :is(.shadow-soft,.form-card-shadow,.shadow-2xl) { box-shadow: 0 12px 32px #173e340b; }
body[data-hh-page] main :is(.about-kicker,.blog-kicker,.faq-kicker,.legal-kicker,div.uppercase[style*="background"]) {
  background: #ffe4db !important;
  color: var(--hh-ink) !important;
  font: 700 11px/1.5 var(--hh-body) !important;
  letter-spacing: .12em !important;
  border-radius: 999px;
  padding: 8px 14px;
  max-width: 100%;
}
body[data-hh-page] main :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid var(--hh-teal); outline-offset: 4px;
}
body[data-hh-page] main :is(a,button) { -webkit-tap-highlight-color: transparent; }
body[data-hh-page] main a { text-underline-offset: 4px; }
body[data-hh-page] main a[href^="mailto:"] { overflow-wrap: anywhere; }
body[data-hh-page] main :is(a.bg-coral,button.bg-coral,a.bg-cta-accent,button[type="submit"],#start-btn,#next-btn) {
  background: var(--hh-yellow);
  color: var(--hh-ink);
  border-color: transparent;
  border-radius: 8px;
  min-height: 52px;
  font-family: var(--hh-body);
  font-weight: 700;
  box-shadow: none;
}
body[data-hh-page] main :is(a.bg-coral,button.bg-coral,a.bg-cta-accent,button[type="submit"],#start-btn,#next-btn):hover { background: #ffca45; }
body[data-hh-page] main :is(a.bg-coral,button.bg-coral,a.bg-cta-accent,button[type="submit"],#start-btn,#next-btn):focus-visible { outline-color: #a83a40; }
body[data-hh-page] main a.rounded-full { border-radius: 8px; }
body[data-hh-page] main :is(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),select,textarea) {
  font-family: var(--hh-body); font-size: 16px; line-height: 1.5;
  background-color: #fff; color: var(--hh-ink); border: 1px solid #bacac4; border-radius: 8px;
}
body[data-hh-page] main :is(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),select) { min-height: 52px; }
body[data-hh-page] main textarea { resize: vertical; }
body[data-hh-page] main input::placeholder, body[data-hh-page] main textarea::placeholder { color: #65736f; opacity: 1; }
body[data-hh-page] main [id] { scroll-margin-top: 104px; }
body[data-hh-page] main .material-symbols-outlined { flex-shrink: 0; }
/* Native page styling for the provider's injected list and article; no embed behavior changes. */
body[data-hh-page="blog"] .soro-blog { max-width: none; color: var(--hh-ink); font-family: var(--hh-body); }
body[data-hh-page="blog"] .soro-blog-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
body[data-hh-page="blog"] .soro-blog-card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; background: white; border: 1px solid var(--hh-line); border-radius: 14px; }
body[data-hh-page="blog"] .soro-blog-card:hover { border-color: #93b7ae; box-shadow: 0 12px 25px #183e3810; }
body[data-hh-page="blog"] .soro-blog-card-image { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 0; }
body[data-hh-page="blog"] .soro-blog-card-content { padding: 26px; }
body[data-hh-page="blog"] main h2.soro-blog-card-title { font-size: 27px; color: var(--hh-ink); line-height: 1.2; margin-bottom: 14px; }
body[data-hh-page="blog"] .soro-blog-card-excerpt { display: block; color: var(--hh-muted); font-size: 15px; line-height: 1.65; }
body[data-hh-page="blog"] .soro-blog-card-date { color: var(--hh-teal); font-size: 12px; }
body[data-hh-page="blog"] .soro-blog-article { max-width: 800px; margin-inline: auto; }
body[data-hh-page="blog"] main .soro-blog-article-title { font-size: clamp(32px,3.7vw,48px); color: var(--hh-ink); }
body[data-hh-page="blog"] .soro-blog-article-content { color: var(--hh-muted); font-size: 17px; line-height: 1.8; }
body[data-hh-page="blog"] .soro-blog-article-content :is(h2,h3) { color: var(--hh-ink); }
body[data-hh-page="blog"] .soro-blog-article-content a { color: var(--hh-teal); text-decoration: underline; }
body[data-hh-page="blog"] .soro-blog-back { background: #e9f0ed; color: var(--hh-teal); border: 0; border-radius: 8px; padding: 12px 18px; }
body[data-hh-page="blog"] .soro-blog-header { margin-bottom: 30px; }
body[data-hh-page="blog"] .soro-blog-article-image { border-radius: 16px; }
@media(max-width:700px) {
  body[data-hh-page="blog"] .soro-blog-list { grid-template-columns: minmax(0,1fr); gap: 20px; }
  body[data-hh-page="blog"] .soro-blog-card-content { padding: 24px; }
  body[data-hh-page="blog"] main h2.soro-blog-card-title { font-size: 27px !important; }
  body[data-hh-page="products"] main > section:first-child .absolute { inset: -5px; transform: rotate(-2deg); }
}
body[data-hh-page="optin"] #hardship-form:has(#step-1:not(.hidden)) .mt-12.flex.justify-between { margin-top: 0; padding-top: 0; border: 0; height: 0; overflow: hidden; }

/* Reading pages: comfortable measure, clear section rhythm, quiet cards. */
body[data-hh-page="about"] main > section { max-width: 1200px; padding-inline: 48px; }
body[data-hh-page="about"] main > section:first-child > div { max-width: 900px; }
body[data-hh-page="about"] main > section:first-child p { font-size: 18px; line-height: 1.7; }
body[data-hh-page="about"] main article { font-size: 17px; line-height: 1.75; padding: 40px; }
body[data-hh-page="about"] .about-emphasis { font-size: 20px; line-height: 1.6; font-style: normal; border-color: var(--hh-coral); color: var(--hh-ink); }
body[data-hh-page="about"] main article section > .grid > div { background: #f2f5f0; padding: 26px; }
body[data-hh-page="about"] main article section > .grid > div:nth-child(3n+2) { background: #f7eee7; }
body[data-hh-page="about"] main article section > .grid > div:nth-child(3n) { background: #f4ebd7; }
body[data-hh-page="about"] main aside > div:first-child { background: #e9f0ed; border: 0; box-shadow: none; }
body[data-hh-page="about"] main article .bg-navy h2 { color: white; }
body[data-hh-page="about"] main li .material-symbols-outlined { color: var(--hh-teal); flex-shrink: 0; }

body[data-hh-page="faq"] main > section, body[data-hh-page="blog"] main > section { max-width: 1060px; padding-inline: 48px; }
body[data-hh-page="faq"] main h1 { max-width: 850px; }
body[data-hh-page="faq"] .faq-item { border-color: var(--hh-line); border-radius: 14px; box-shadow: none; }
body[data-hh-page="faq"] .faq-trigger { padding: 25px 28px; }
body[data-hh-page="faq"] .faq-trigger:hover, body[data-hh-page="faq"] .faq-trigger[aria-expanded="true"] { background: #f2f5f0; }
body[data-hh-page="faq"] .faq-trigger .faq-q { font-size: 22px; color: var(--hh-ink); font-weight: 500; }
body[data-hh-page="faq"] .faq-icon { background: #e6eddf; color: var(--hh-teal); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
body[data-hh-page="faq"] .faq-trigger[aria-expanded="true"] .faq-icon { background: #ffe1d8; }
body[data-hh-page="faq"] .faq-content-inner { color: var(--hh-muted); font-size: 16px; padding: 20px 28px 26px; }
body[data-hh-page="faq"] .faq-content-inner a { color: var(--hh-teal); }
body[data-hh-page="faq"] .faq-notice { background: #f4ebd7; border: 0; color: var(--hh-muted); padding: 30px; }
body[data-hh-page="blog"] main h1 { margin-bottom: 36px; }
body[data-hh-page="blog"] #soro-blog { border-top: 1px solid var(--hh-line); padding-top: 36px; }

body[data-hh-page] .legal-wrap { max-width: 900px; }
body[data-hh-page] .legal-copy { border-color: var(--hh-line); border-radius: 18px; padding: clamp(24px,4vw,52px); color: var(--hh-muted); font-size: 17px; line-height: 1.8; }
body[data-hh-page] .legal-copy h2 { color: var(--hh-ink); font-size: 28px; margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--hh-line); }
body[data-hh-page] .legal-copy h2:first-child { border: 0; padding-top: 0; margin-top: 0; }
body[data-hh-page] .legal-copy a { color: var(--hh-teal); overflow-wrap: anywhere; }
body[data-hh-page] .legal-page h1 { color: var(--hh-ink); }
body[data-hh-page] .legal-date { color: var(--hh-muted); font-size: 14px; }
body[data-hh-page="privacy"] main { max-width: 1200px; padding-inline: 48px; }
body[data-hh-page="privacy"] main > header { margin-bottom: 42px; }
body[data-hh-page="privacy"] main > .grid { gap: 28px; }
body[data-hh-page="privacy"] .policy-section { margin-bottom: 44px; }
body[data-hh-page="privacy"] .policy-section h2 { margin-bottom: 24px; }
body[data-hh-page="privacy"] .policy-section h3, body[data-hh-page="privacy"] .policy-section h4 { font-size: 23px; }
body[data-hh-page="privacy"] .policy-section p.text-lg { font-size: 17px; line-height: 1.75; }
body[data-hh-page="privacy"] main .lg\:col-span-9 { padding: 40px; }
body[data-hh-page="privacy"] main aside > div { background: #e9f0ed; padding: 22px 12px; }
body[data-hh-page="privacy"] #usage .grid { grid-template-columns: 1fr; }
body[data-hh-page="privacy"] #usage .grid > div { padding: 24px; }
body[data-hh-page="privacy"] #choices .grid { grid-template-columns: 1fr; }
body[data-hh-page="privacy"] #choices .bg-secondary-container { background: #f4ebd7; }

/* Product storytelling keeps every section/image, using the homepage's bands and cards. */
body[data-hh-page="products"] main { padding-top: 78px; padding-bottom: 0; }
body[data-hh-page="products"] main > section > .max-w-6xl, body[data-hh-page="products"] main > section.max-w-6xl { max-width: 1200px; padding-inline: 48px; }
body[data-hh-page="products"] main > section:first-child { background: #e9f0ed; border: 0; }
body[data-hh-page="products"] main > section:first-child h1 { font-size: clamp(38px,3.5vw,50px); }
body[data-hh-page="products"] main > section:first-child h1 span { color: var(--hh-teal); }
body[data-hh-page="products"] main > section:first-child p { font-size: 16px; line-height: 1.7; }
body[data-hh-page="products"] main > section:first-child img { max-height: none; min-height: 0; object-fit: contain; }
body[data-hh-page="products"] main > section:nth-child(2) article { padding: 28px; background: #fff; }
body[data-hh-page="products"] main > section:nth-child(2) h2 { font-size: 25px; }
body[data-hh-page="products"] main > section:nth-child(2) article > .material-symbols-outlined { width: 48px; height: 48px; display: grid; place-items: center; background: #ffe1d8; border-radius: 12px; }
body[data-hh-page="products"] main > section:nth-child(2) article:nth-child(2) > .material-symbols-outlined { background: #fff0be; }
body[data-hh-page="products"] main > section:nth-child(2) article:nth-child(3) > .material-symbols-outlined { background: #d7eeea; }
body[data-hh-page="products"] main > section:nth-child(5) { background: #f7eee7; }
body[data-hh-page="products"] main .bg-navy { border-radius: 22px; }
body[data-hh-page="products"] main .check::before { background: #d7eeea; color: var(--hh-teal); }
body[data-hh-page="products"] #financial-reset-score > div { border: 1px solid #c9e5df; border-radius: 22px; }
body[data-hh-page="products"] #financial-reset-score h2 { font-size: clamp(30px,3vw,40px); }
body[data-hh-page="products"] main .text-sky { color: #d7eeea; }

/* Contact: calm form surface, contrasting support panel, readable photo treatment. */
body[data-hh-page="contact"] main > section { max-width: 1200px; padding-inline: 48px; }
body[data-hh-page="contact"] main > section:first-child { margin-bottom: 42px; }
body[data-hh-page="contact"] main > section:nth-child(2) .lg\:col-span-7 > div { background: #fff; padding: 36px; }
body[data-hh-page="contact"] main .lg\:col-span-5 > div:first-child { background: #e9f0ed; border: 0; }
body[data-hh-page="contact"] main .lg\:col-span-5 > div:last-child { background: #f4ebd7; border-color: var(--hh-coral); }
body[data-hh-page="contact"] main .bg-primary-container { background: var(--hh-teal); }
body[data-hh-page="contact"] main .bg-secondary-container\/50 { background: #f2f5f0; }
body[data-hh-page="contact"] main > section:last-child { padding-top: 48px; padding-bottom: 0; }
body[data-hh-page="contact"] main > section:last-child > div { border-radius: 22px; }
body[data-hh-page="contact"] main > section:last-child .absolute.inset-0 { background: linear-gradient(90deg,#073b3be6,#073b3b80 65%,transparent); }
body[data-hh-page="contact"] main > section:last-child h2 { font-size: 38px; }

/* Assessment: no step/display/validation rules are replaced. */
body[data-hh-page="optin"] main { max-width: 1100px; padding-inline: 40px; }
body[data-hh-page="optin"] #optin-intro { max-width: 790px; margin-bottom: 40px; }
body[data-hh-page="optin"] #optin-intro h1 { font-size: clamp(36px,4vw,52px); }
body[data-hh-page="optin"] #hardship-form h2 { font-size: 26px; }
body[data-hh-page="optin"] #hardship-form legend { font-family: var(--hh-display); font-size: 22px; line-height: 1.35; font-weight: 500; }
body[data-hh-page="optin"] #hardship-form > .bg-white { border-radius: 18px; padding: 36px; }
body[data-hh-page="optin"] #hardship-form label.relative { background: #fff; border: 1px solid #c7d4ce; border-radius: 10px; padding: 16px; }
body[data-hh-page="optin"] #hardship-form label.relative:hover { background: #f2f5f0; border-color: var(--hh-teal); }
body[data-hh-page="optin"] #hardship-form label.relative:has(input:checked) { background: var(--hh-teal); border-color: var(--hh-teal); color: white; }
body[data-hh-page="optin"] #hardship-form label.relative:has(input:checked) span { color: white; }
body[data-hh-page="optin"] #hardship-form label:has(input:focus-visible) { outline: 3px solid var(--hh-teal); outline-offset: 4px; }
body[data-hh-page="optin"] .did-you-know { background: #f4ebd7; border: 0; }
body[data-hh-page="optin"] #progress-bar { background: var(--hh-teal); }
body[data-hh-page="optin"] #hardship-form .bg-lavender-neutral { background: #e5ece6; }
body[data-hh-page="optin"] #optin-trust { opacity: 1; filter: none; margin-top: 36px; }
body[data-hh-page="optin"] input[type="checkbox"] { accent-color: var(--hh-teal); color: var(--hh-teal); }
body[data-hh-page="thank-you"] main { min-height: 800px; padding-top: 142px; }
body[data-hh-page="thank-you"] main > section { max-width: 760px; padding: 52px; border-radius: 22px; border-color: #bcded7; }
body[data-hh-page="thank-you"] main h1 { font-size: clamp(36px,3.6vw,48px); }

/* Match the homepage's compact shell at its intermediate desktop breakpoint. */
@media (min-width:1051px) and (max-width:1250px) {
  body[data-hh-page] .site-shell-nav { gap: 12px; padding-inline: 20px; }
  body[data-hh-page] .site-shell-links { gap: 10px; }
  body[data-hh-page] .site-shell-link { font-size: 12px; }
}
@media (max-width:1100px) {
  body[data-hh-page="products"] main { padding-top: 72px; }
}
@media (max-width:767px) {
  body[data-hh-page] main { padding-top: 112px !important; padding-bottom: 48px; }
  body[data-hh-page] main h1, body[data-hh-page="about"] main h1.about-hero-title { font-size: 40px !important; line-height: 1.08 !important; }
  body[data-hh-page] main h2, body[data-hh-page="about"] main h2.about-heading { font-size: 28px !important; line-height: 1.18 !important; }
  body[data-hh-page] main h3 { font-size: 24px; }
  body[data-hh-page="about"] main > section,
  body[data-hh-page="faq"] main > section, body[data-hh-page="blog"] main > section,
  body[data-hh-page="contact"] main > section { padding-inline: 20px !important; }
  body[data-hh-page="about"] main article { padding: 26px; font-size: 16px; }
  body[data-hh-page="about"] main > section:first-child p { font-size: 17px; }
  body[data-hh-page="about"] main > section:nth-child(2) { margin-top: 36px; }
  body[data-hh-page="about"] main article .bg-navy { padding: 28px 22px; }
  body[data-hh-page="about"] main article .bg-navy a { width: 100%; font-size: 13px; }
  body[data-hh-page="faq"] .faq-trigger { padding: 20px; gap: 14px; }
  body[data-hh-page="faq"] .faq-trigger .faq-q { font-size: 20px; }
  body[data-hh-page="faq"] .faq-content-inner { padding: 18px 20px 22px; }
  body[data-hh-page="faq"] .faq-notice { padding: 24px; }
  body[data-hh-page] .legal-page { padding-inline: 20px; }
  body[data-hh-page] .legal-copy { padding: 26px 22px; font-size: 16px; }
  body[data-hh-page] .legal-copy h2 { font-size: 25px !important; }
  body[data-hh-page] .legal-kicker { font-size: 10px !important; letter-spacing: .07em !important; }
  body[data-hh-page="privacy"] main { padding-inline: 20px; }
  body[data-hh-page="privacy"] main .lg\:col-span-9 { padding: 26px 22px !important; }
  body[data-hh-page="privacy"] .policy-section .p-10 { padding: 24px; }
  body[data-hh-page="privacy"] #sharing .flex { align-items: flex-start; flex-direction: column; gap: 16px; }
  body[data-hh-page="privacy"] #choices a { padding-inline: 20px; }
  body[data-hh-page="privacy"] #disclosures .pl-10 { padding-left: 20px; }
  body[data-hh-page="products"] main { padding-top: 72px !important; padding-bottom: 0; }
  body[data-hh-page="products"] main > section > .max-w-6xl,
  body[data-hh-page="products"] main > section.max-w-6xl { padding-inline: 20px; }
  body[data-hh-page="products"] main > section:first-child > div { padding-top: 40px; padding-bottom: 44px; gap: 36px; }
  body[data-hh-page="products"] main > section:first-child h1 { font-size: 38px !important; }
  body[data-hh-page="products"] main > section:nth-child(2) { padding-top: 36px; padding-bottom: 36px; }
  body[data-hh-page="products"] main > section:nth-child(2) h2 { font-size: 26px !important; }
  body[data-hh-page="products"] #financial-reset-score { padding-block: 48px; }
  body[data-hh-page="products"] #financial-reset-score > div { padding: 30px 24px; }
  body[data-hh-page="contact"] main > section:nth-child(2) .lg\:col-span-7 > div { padding: 24px; }
  body[data-hh-page="contact"] main > section:last-child > div { height: 380px; }
  body[data-hh-page="contact"] main > section:last-child .absolute.inset-0 { padding: 28px; background: linear-gradient(90deg,#073b3bef,#073b3b85); }
  body[data-hh-page="contact"] main > section:last-child img { object-position: 65% center; height: 100%; }
  body[data-hh-page="optin"] main { padding-inline: 20px !important; padding-bottom: 48px !important; }
  body[data-hh-page="optin"] #optin-intro h1 { font-size: 36px !important; }
  body[data-hh-page="optin"] #hardship-form > .bg-white { padding: 24px 20px !important; }
  body[data-hh-page="optin"] #hardship-form h2.font-headline-sm { font-size: 23px !important; line-height: 1.25 !important; }
  body[data-hh-page="optin"] #optin-trust { gap: 20px; }
  body[data-hh-page="thank-you"] main { min-height: 0; padding-bottom: 40px; }
  body[data-hh-page="thank-you"] main > section { padding: 36px 24px; }
  body[data-hh-page="thank-you"] main h1 { font-size: 36px !important; }
}
@media (prefers-reduced-motion:reduce) {
  body[data-hh-page] main *, body[data-hh-page] main *::before, body[data-hh-page] main *::after { transition: none !important; animation: none !important; }
}
