/* =============================================================================
   The last two ex-Elementor pages: /get-started/ and /media-appearance/.
   Values from the compiled post-169.css and post-598.css of the originals.
   ========================================================================== */

/* ---- /get-started/ (full screen, no header or footer) ------------------- */
/* The theme's stylesheets are off on this page, so its custom properties do
   not exist here: every var() below needs its own fallback, or the whole
   declaration is dropped. */
.fw-gs-page { margin: 0; background: var(--color-primary, #293A51); font-family: var(--font-body, Poppins), sans-serif; }
.fw-gs { position: relative; display: flex; min-height: 100vh; background: var(--color-primary, #293A51); }
.fw-gs__panel { width: 66.6666%; min-height: 600px; padding: 0 0 0 100px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.fw-gs__title { margin: 0; font-family: var(--font-heading, Montserrat), sans-serif; font-size: 65px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; color: #fff; }
.fw-gs__title br { display: none; }  /* the two lines were two widgets, 20px apart */
.fw-gs__title span { display: block; margin-top: 20px; }
.fw-gs__title span { color: var(--color-accent, #80C33D); }
.fw-gs__lede { margin: 70px 160px 0 0; font-family: "Roboto", var(--font-body, Poppins), sans-serif; font-size: 20px; font-weight: 500; line-height: 30px; color: #fff; }
.fw-gs__steps { list-style: none; margin: 134px 0 0; padding: 10px; width: 90%; min-height: 86px; display: grid; grid-template-columns: repeat(3, 1fr); }
.fw-gs__steps li { display: flex; align-items: start; gap: 15px; }
.fw-gs__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 6px; background: rgba(255, 255, 255, .11); color: rgba(255, 255, 255, .43); }
.fw-gs__icon svg { width: 30px; height: 30px; }
.fw-gs__step b { display: block; font-family: "Roboto", var(--font-body, Poppins), sans-serif; font-size: 20px; font-weight: 500; line-height: 24px; color: #fff; margin: 8px 0 6px; }
.fw-gs__step span { font-family: "Roboto", var(--font-body, Poppins), sans-serif; font-size: 16px; font-weight: 300; line-height: 24px; color: #fff; }
.fw-gs__art { width: 33.3333%; background: #fff var(--fw-gs-art) no-repeat center left / cover; }
/* The circle straddles the two panels: its centre is 76.56% across and 60px
   below the middle of the page, which is where Elementor put it. */
.fw-gs__cta { position: absolute; left: 76.5625%; top: calc(50% + 60px); transform: translate(-50%, -50%); display: flex; justify-content: center; }
.fw-gs__circle {
    display: flex; align-items: center; justify-content: center; width: 196px; height: 192px; border-radius: 50%;
    background: var(--color-accent, #80C33D); color: #fff; text-align: center;
    font-family: "Roboto", var(--font-body, Poppins), sans-serif; font-size: 25px; font-weight: 600; line-height: 25px;
    text-decoration: none; transition: background .15s, transform .15s;
}
a.fw-gs__circle:hover, a.fw-gs__circle:focus-visible {
    background: var(--color-accent-dk, #6aa92f); color: #fff; text-decoration: none; transform: scale(1.03);
}
a.fw-gs__circle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Phone: the original is one navy screen, exactly the viewport tall -- the
   white panel and the house are gone, and the circle sits between the copy
   and the three steps. Positions below are the original's, measured from the
   archived post-169.css. */
@media (max-width: 767px) {
    .fw-gs { display: block; min-height: 100vh; padding: 174px 0 0; text-align: center; }
    .fw-gs__panel { display: block; width: auto; min-height: 0; padding: 0; }
    .fw-gs__title { font-size: 30px; line-height: 30px; }
    .fw-gs__lede { margin: 20px 0 0; padding: 0 20px; font-size: 16px; line-height: 24px; }
    .fw-gs__art { display: none; }
    .fw-gs__cta { position: static; display: flex; justify-content: center; width: auto; margin-top: 80px; transform: none; }
    .fw-gs__circle { font-size: 25px; line-height: 25px; }
    .fw-gs__steps { display: grid; grid-template-columns: repeat(3, 100px); justify-content: center; gap: 0 20px; width: auto; min-height: 0; margin: 23px 0 0; padding: 10px 0 0; }
    .fw-gs__steps li { flex-direction: column; align-items: center; gap: 0; }
    .fw-gs__icon { width: 30px; height: 30px; border-radius: 4px; }
    .fw-gs__icon svg { width: 15px; height: 15px; }
    .fw-gs__step b { margin: 23px 0 0; font-size: 12px; line-height: 14.4px; font-weight: 500; }
    .fw-gs__step span { display: block; margin-top: 7px; font-size: 12px; line-height: 18px; }
}

/* ---- /media-appearance/ -------------------------------------------------- */
.fw-media { padding: 50px 0; }
.fw-media__in { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.fw-media--navy { background: var(--color-primary); }
.fw-media__in { text-align: center; }
.fw-media__title { margin: 0 0 20px; font-family: var(--font-heading); font-size: 45px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.15; color: #fff; }
.fw-media__title--green { font-size: 50px; color: var(--color-accent); }
.fw-media__title--navy { color: var(--color-primary); }
.fw-media__lede { max-width: 900px; margin: 0 auto 30px; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: inherit; }
.fw-media--navy .fw-media__lede { color: rgba(255, 255, 255, .85); }
.fw-media--intro .fw-media__lede { color: var(--color-text, #2c3540); }
.fw-media__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fw-media__video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0c1420; }
.fw-media__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fw-media__video img { width: 100%; height: 100%; object-fit: cover; }
/* The play button, same as the one on a post (that stylesheet is not loaded here). */
.fw-media__video .fw-post__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, .18); cursor: pointer; }
.fw-media__video .fw-post__play:hover { background: rgba(0, 0, 0, .05); }
.fw-media__video .fw-post__play i { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(255, 0, 0, .92); transition: transform .15s, background .15s; }
.fw-media__video .fw-post__play i::after { content: ""; position: absolute; left: 27px; top: 13px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.fw-media__video .fw-post__play:hover i, .fw-media__video .fw-post__play:focus-visible i { transform: translate(-50%, -50%) scale(1.07); background: #f00; }
.fw-media__grid--pods { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.fw-media__pod { width: 100%; max-width: 640px; height: 232px; border: 0; border-radius: 12px; }
.fw-media__podlink { margin: 12px 0 0; }
.fw-media__podlink a { color: var(--color-primary); font-weight: 600; }
.fw-media__all { margin: 24px 0 0; }
.fw-media__all a { font-family: var(--font-body); font-size: 22px; color: #fff; text-decoration: underline; }
.fw-media--navy .fw-mu-card__title { color: var(--color-primary); }
@media (max-width: 767px) {
    .fw-media__title { font-size: 40px; }
    .fw-media__title--green { font-size: 40px; }
    .fw-media__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- About page ----------------------------------------------------------
   Reuses the media page's bands. Three classes it did not have: the eyebrow,
   and the CTA. Every var() carries a fallback here, as everywhere in this
   file -- the theme stylesheet is dequeued on the canvas pages. */
.fw-media__eyebrow {
    margin: 0 0 10px; font-family: var(--font-body, "Poppins"), sans-serif;
    font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-accent-dk, #4A7324);
}
.fw-media--navy .fw-media__eyebrow { color: var(--color-accent, #80C33D); }
.fw-media__cta { margin: 26px 0 0; }
.fw-media__btn {
    display: inline-block; padding: 14px 30px; border-radius: 999px;
    background: var(--color-accent, #80C33D); color: #16240f;
    font-family: var(--font-body, "Poppins"), sans-serif; font-size: 16px; font-weight: 600;
    text-decoration: none; transition: background-color .18s;
}
.fw-media__btn:hover { background: #8fd44a; color: #16240f; text-decoration: none; }
.fw-media__btn:focus-visible { outline: 3px solid var(--color-primary, #293A51); outline-offset: 3px; }