/* Sunnyside: content pages in the home page's design.
   Loaded after styles.css (content components) and css/styles.css (home design
   system), so the shared header, menu, footer, buttons and type come from the
   home page and the older content components pick up the same look. */

body.inner { background: var(--navy-950); }
body.inner main { background: var(--paper); color: var(--ink); }
.inner .container { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ---- section rhythm + backgrounds */
.inner .section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; background: var(--paper); }
.inner .section-mist, .inner .section-sand { background: var(--mist); }
.inner .section-navy { background: var(--navy-950); color: #fff; overflow: hidden; isolation: isolate; }
.inner .section-navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 60% at 90% 0%, rgba(20,69,107,.55), rgba(20,69,107,0) 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(245,179,30,.10), rgba(245,179,30,0) 70%);
}

/* ---- page hero: first navy section gets the home hero treatment */
.inner main > .section-navy:first-child,
.inner main > .hero:first-child,
.inner main > .hero-lead:first-child { padding-top: clamp(9rem, 15vw, 12rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.inner main > .section-navy:first-child .waves { opacity: .9; }
.inner .page-title, .inner main > .section-navy:first-child h1, .inner .hero h1, .inner .hero-lead h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 800; letter-spacing: -.05em; line-height: .98; margin: 1.2rem 0 1.4rem; max-width: 18ch;
}
.inner .page-title em, .inner .hero h1 em, .inner .hero-lead h1 em { color: var(--sun); font-style: normal; }
.inner .section-navy .lede, .inner .hero-lede, .inner .hero-lead-lede { color: var(--on-dark-2); font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 40rem; }
.inner main > .section-navy:first-child .btn { margin-top: .6rem; }

/* services image hero: keep the photo, use the home hero proportions */
.inner .hero { min-height: auto; display: block; align-items: initial; padding: 0; }
.inner .hero .hero-inner { padding-top: clamp(10rem, 16vw, 13rem); }
.inner .hero-scrim { background: linear-gradient(90deg, rgba(7,23,38,.92) 0%, rgba(7,23,38,.55) 60%, rgba(7,23,38,.3) 100%), linear-gradient(0deg, rgba(7,23,38,.9), rgba(7,23,38,0) 45%); }

/* ---- eyebrows (converted from .kicker) */
.inner .eyebrow { margin-bottom: 0; }
.inner .section-navy .eyebrow, .inner .final-cta .eyebrow, .inner .hero .eyebrow, .inner .hero-lead .eyebrow { color: var(--sun); }
.inner .eyebrow + h1, .inner .eyebrow + h2 { margin-top: 1rem; }

/* ---- headings + text */
.inner main h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.045em; line-height: 1; }
.inner main h3 { letter-spacing: -.03em; line-height: 1.15; }
.inner .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.inner .section-head h2 { margin-bottom: 1rem; }
.inner .lede { color: var(--ink-2); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; }
.inner .split { gap: clamp(2rem, 5vw, 5rem); }
.inner .split h2 { margin-bottom: 1.2rem; }

/* ---- cards + panels */
.inner .card { border-radius: 22px; border: 1px solid var(--line); background: var(--paper); padding: 1.6rem; box-shadow: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.inner .card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(7,23,38,.35); border-color: transparent; }
.inner .card h3 { font-size: 1.25rem; }
.inner .card-icon { border-radius: 14px; background: var(--navy-900); }
.inner .panel { border-radius: 26px; background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); box-shadow: inset 0 0 0 1px var(--glass-line), 0 40px 80px -40px rgba(7,23,38,.6); color: #fff; }
.inner .review-feature { border-radius: 26px; background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); }

/* ---- proof bar: same glass strip as the home hero */
.inner .proof-bar { background: var(--navy-950); padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-top: -1px; }
.inner .proof-bar .proof { margin-top: 0; }
.inner main > .section-navy.has-proof-card:first-child { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---- process steps (converted to the home .steps markup) */
.inner .steps .step h3 { margin-bottom: .7rem; }

/* ---- FAQ: home-style rows */
.inner .faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 1.3rem 0; box-shadow: none; }
.inner .faq-item summary { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -.02em; }
.inner .faq-item p { color: var(--ink-2); margin-top: .8rem; }

/* ---- closing CTA: the home finale */
.inner .final-cta { background: var(--navy-950); color: #fff; text-align: center; padding-block: clamp(5rem, 11vw, 9rem); position: relative; overflow: hidden; isolation: isolate; }
.inner .final-cta::before { content: ""; position: absolute; left: 50%; top: 100%; width: 140vw; height: 120vw; transform: translate(-50%, -38%); z-index: -1; background: radial-gradient(closest-side, rgba(245,179,30,.22), rgba(245,179,30,0)); }
.inner .final-cta h2 { font-size: clamp(2.6rem, 7.5vw, 6.5rem); letter-spacing: -.06em; line-height: .92; max-width: 16ch; margin-inline: auto; }
.inner .final-cta h2 em { color: var(--sun); font-style: normal; }
.inner .final-cta p { color: var(--on-dark-2); max-width: 36rem; margin: 1.6rem auto 0; font-size: 1.12rem; }
.inner .final-cta .btn { margin-top: 2.2rem; }
.inner .final-cta .final-cta-note { font-size: .92rem; color: var(--on-dark-3); margin-top: 1.4rem; }
.inner .final-cta a:not(.btn) { color: #fff; }

/* ---- links inside copy */
.inner main p a:not(.btn), .inner main li a:not(.btn) { color: inherit; text-decoration-color: var(--sun); text-underline-offset: 3px; }

/* the older .eyebrow pill (styles.css) reset to the home eyebrow */
.inner .eyebrow { background: none; border: 0; padding: 0; border-radius: 0; font-family: var(--sans); box-shadow: none; }
.inner .proof-bar { color: #fff; }
@media (min-width: 760px) { .inner .proof-bar .proof { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* onboarding-journey: its own page hero sits under the fixed site header */
.inner main > .header:first-child { padding-top: clamp(9rem, 15vw, 12rem); padding-bottom: clamp(3rem, 6vw, 5rem); background: var(--navy-950); text-align: left; }
.inner main > .header:first-child h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); letter-spacing: -.05em; line-height: .98; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.inner main > .header:first-child p { color: var(--on-dark-2); max-width: var(--wrap); margin: 1rem auto 0; padding-inline: var(--pad); }
.inner main > .footer:last-child { display: none; } /* replaced by the site footer */