/* Smile Savers — reusable homepage hero + existing contact component.
   Only #ss-home-hero-layout and its descendants are affected.
   Page markup and the existing .fly-* card entrance animations are untouched.
   The full-width breakout avoids changing the main navigation layout. */

#ss-home-hero-layout {
    --ss-hc-text: #263747;
    --ss-hc-muted: #4c6171;
    --ss-hc-accent: linear-gradient(90deg,#15bfd1 0%,#3684e8 20%,#8765cf 39%,#ee82b4 59%,#fd614b 76%,#ffb400 100%);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(0, 1.82fr) minmax(350px, 1fr);
    align-items: start;
    gap: clamp(16px, 1.8vw, 26px);
    width: min(1220px, calc(100vw - 44px));
    max-width: none;
    margin: 12px 0 36px;
    text-align: left;
    isolation: isolate;
}
#ss-home-hero-layout,
#ss-home-hero-layout *,
#ss-home-hero-layout *::before,
#ss-home-hero-layout *::after { box-sizing: border-box; }
#ss-home-hero-layout > * { min-width: 0; }

/* Preserve the original hero's contents but allow it to shrink to its column. */
#ss-home-hero-layout .ss-hero-contact__intro,
#ss-home-hero-layout .implant-hero,
#ss-home-hero-layout .hero-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}
#ss-home-hero-layout .hero-card-inner {
    padding: clamp(22px, 2.5vw, 38px) !important;
}
#ss-home-hero-layout .hero-heading { line-height: 1.12; }
#ss-home-hero-layout .hero-copy { max-width: 100%; }
#ss-home-hero-layout .benefits-row { max-width: 100%; }
#ss-home-hero-layout .benefits-row .col { min-width: 0; }
#ss-home-hero-layout .benefit-card { height: 100%; }

/* ContactForm view component in a light, legible self-contained panel. */
#ss-home-hero-layout .ss-hero-contact__panel {
    width: 100%;
    min-width: 0;
    overflow: visible;
    scroll-margin-top: 24px;
}
#ss-home-hero-layout .ss-contact {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(19px, 2vw, 28px);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(203,215,224,.8);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(25,50,70,.13);
    color: var(--ss-hc-text);
    text-align: left;
    overflow: hidden;
}
#ss-home-hero-layout .ss-contact::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ss-hc-accent);
}
#ss-home-hero-layout .ss-contact__intro { margin: 0 0 14px; text-align: left; }
#ss-home-hero-layout .ss-contact__intro h2 {
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.2;
    margin: 4px 0 8px;
}
#ss-home-hero-layout .ss-contact__intro > p:not(.ss-contact__eyebrow) {
    color: var(--ss-hc-muted);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}
#ss-home-hero-layout .ss-contact__eyebrow {
    font-size: 10px;
    letter-spacing: .09em;
    margin: 0;
}
#ss-home-hero-layout .ss-contact__required { font-size: 12px; margin: 0 0 10px; }
#ss-home-hero-layout .ss-contact__form { width: 100%; max-width: none; }
#ss-home-hero-layout .ss-contact__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px 12px;
    margin-bottom: 10px;
}
#ss-home-hero-layout .ss-contact__grid > .ss-contact__field:nth-child(n + 3) {
    grid-column: 1 / -1;
}
#ss-home-hero-layout .ss-contact__field { min-width: 0; margin: 0 0 10px; }
#ss-home-hero-layout .ss-contact__grid .ss-contact__field { margin: 0; }
#ss-home-hero-layout .ss-contact__field label,
#ss-home-hero-layout .ss-contact__methods legend { font-size: 12px; line-height: 1.4; }
#ss-home-hero-layout .ss-contact__field input:not([type=checkbox]),
#ss-home-hero-layout .ss-contact__field select,
#ss-home-hero-layout .ss-contact__field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 39px;
    font-size: 14px;
    padding: 8px 10px;
    margin: 5px 0 0;
    border-radius: 7px;
}
#ss-home-hero-layout .ss-contact__field textarea { min-height: 90px; resize: vertical; }
#ss-home-hero-layout .ss-contact__field small { display: block; font-size: 11px; line-height: 1.4; margin-top: 4px; }
#ss-home-hero-layout .ss-contact__methods { margin: 8px 0 12px; padding: 0; min-width: 0; }
#ss-home-hero-layout .ss-contact__methods > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#ss-home-hero-layout .ss-contact__method { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; }
#ss-home-hero-layout .ss-contact__terms { display: flex; gap: 9px; align-items: flex-start; margin: 13px 0; font-size: 12px; line-height: 1.5; }
#ss-home-hero-layout .ss-contact__terms input { flex: 0 0 auto; margin-top: 3px; }
#ss-home-hero-layout .ss-contact__send { margin-top: 14px; }
#ss-home-hero-layout .ss-contact__send button { width: 100%; min-height: 43px; }
#ss-home-hero-layout .ss-contact__send p { font-size: 11px; line-height: 1.5; margin: 9px 0 0; }
#ss-home-hero-layout .ss-contact__errors:not(:empty) { margin-bottom: 12px; }
#ss-home-hero-layout :is(input,select,textarea,button,a):focus-visible { outline: 3px solid #227eb9; outline-offset: 2px; }

@media (max-width: 1010px) {
    #ss-home-hero-layout {
        grid-template-columns: minmax(0,1fr) minmax(320px,.9fr);
        width: min(1000px, calc(100vw - 36px));
        gap: 16px;
    }
    #ss-home-hero-layout .hero-card-inner { padding: 24px !important; }
}
@media (max-width: 820px) {
    #ss-home-hero-layout {
        display: flex;
        flex-direction: column;
        width: min(660px, calc(100vw - 28px));
        gap: 18px;
        margin-top: 8px;
    }
    #ss-home-hero-layout .ss-hero-contact__intro,
    #ss-home-hero-layout .ss-hero-contact__panel { width: 100%; }
}
@media (max-width: 420px) {
    #ss-home-hero-layout { width: calc(100vw - 20px); }
    #ss-home-hero-layout .hero-card-inner { padding: 18px !important; }
    #ss-home-hero-layout .ss-contact { padding: 20px 16px; }
    #ss-home-hero-layout .ss-contact__grid { gap: 9px; }
    #ss-home-hero-layout .ss-contact__grid > .ss-contact__field:nth-child(-n + 2) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    #ss-home-hero-layout { scroll-behavior: auto; }
    /* Existing hero animation stylesheet owns reduced-motion handling. */
}

/* ================================================================
   Homepage hero refinements (22 October 2026)
   The hero's own top spacing is preserved. On desktop, move only
   the contact panel down to align both card tops (34px in the
   supplied screenshot). On stacked layouts remove the offset.
   Existing form controls, tokens, scripts and animation are untouched.
   ================================================================ */
@media (min-width: 821px) {
    #ss-home-hero-layout > .ss-hero-contact__panel {
        margin-block-start: 34px;
    }
}
@media (max-width: 820px) {
    #ss-home-hero-layout > .ss-hero-contact__panel {
        margin-block-start: 0;
    }
}

/* Match the left hero's restrained, mixed-case typography.
   The ViewComponent already contains sentence-case text: no markup
   change or second form is needed. */
#ss-home-hero-layout .ss-contact__intro {
    text-align: left !important;
}
#ss-home-hero-layout .ss-contact__intro h2,
#ss-home-hero-layout .ss-contact__intro h2 span {
    text-transform: none !important;
    font-variant: normal;
    letter-spacing: -0.025em;
}
#ss-home-hero-layout .ss-contact__intro h2 {
    margin: 6px 0 13px;
    font-family: inherit;
    font-size: clamp(25px, 2.3vw, 31px);
    font-weight: 500;
    line-height: 1.16;
    color: var(--ss-hc-text);
    text-align: left !important;
}
#ss-home-hero-layout .ss-contact__intro h2 span {
    display: block;
    width: fit-content;
    max-width: 100%;
    font: inherit;
    font-weight: inherit;
    background-image: var(--ss-hc-accent);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
#ss-home-hero-layout .ss-contact__intro > p {
    text-align: left !important;
}