/* ------------------------------------------------------------------
   Agentic Solar — founders, markets map and FAQ.
   Static sections injected into the Framer tree; they own their own
   layout so nothing here depends on the template's grid.
   ------------------------------------------------------------------ */

.as-team,
.as-map,
.as-pricing,
.as-faq {
    --as-bg: #0b2242;
    --as-ink: #10305a;
    --as-accent: #4a86d0;
    --as-tint: #edf2f9;
    --as-page: #f5f8fc;
    --as-line: rgba(11, 34, 66, 0.12);

    position: relative;
    width: 100%;
    font-family: Inter, "Inter Placeholder", sans-serif;
    color: var(--as-bg);
}

.as-team__inner,
.as-map__inner,
.as-pricing__inner,
.as-faq__inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 112px 64px;
}

.as-eyebrow--dark {
    color: rgba(11, 34, 66, 0.55);
}

/* ================= founders ================= */

.as-team {
    background: #fff;
}

.as-team__head {
    max-width: 760px;
    margin-bottom: 64px;
}

.as-team__title {
    margin: 0 0 16px;
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-variation-settings: "opsz" 56, "wght" 350, "SOFT" 100, "WONK" 1;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.07;
    letter-spacing: -0.04em;
    font-weight: 400;
}

.as-team__lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(11, 34, 66, 0.66);
}

.as-founder {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    margin-bottom: 32px;
    padding: 44px;
    background: #fafbfc;
    border: 1px solid var(--as-line);
    border-radius: 28px;
}

.as-founder--flip {
    /* order:2 below moves the photo into the second grid cell, so that
       cell must be the fixed-width one too, or the flipped card's photo
       inherits the flexible track and renders wider than the other card */
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
}

.as-founder--flip .as-founder__photo {
    order: 2;
}

.as-founder__photo {
    border-radius: 20px;
    overflow: hidden;
    /* fixed pixel width AND height, not fr/aspect-ratio off the column's
       own width, so the two cards can never render at different sizes
       even when one is flipped to the opposite side */
    width: 420px;
    height: 460px;
    background: #f2f4f7;
}

.as-founder__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.as-founder__label {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(11, 34, 66, 0.5);
}

.as-founder__quote {
    margin: 0 0 28px;
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-variation-settings: "opsz" 32, "wght" 350, "SOFT" 100, "WONK" 1;
    font-size: clamp(19px, 1.7vw, 25px);
    line-height: 1.42;
    letter-spacing: -0.02em;
}

.as-founder__sign {
    margin: 0 0 4px;
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-style: italic;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.as-founder__role {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(11, 34, 66, 0.5);
}

.as-founder__links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    font-size: 14px;
}

.as-founder__links a {
    color: var(--as-bg);
    text-decoration: none;
    border-bottom: 1px solid rgba(11, 34, 66, 0.25);
}

.as-founder__links a:hover {
    border-bottom-color: var(--as-accent);
}

.as-team__backing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
    margin-top: 24px;
    padding: 40px;
    background: var(--as-bg);
    border-radius: 28px;
    color: #fff;
}

.as-team__stat strong {
    display: block;
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-size: 48px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.as-team__stat span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
}

.as-team__note {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    max-width: 68ch;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/* ================= pricing ================= */

.as-pricing {
    background: var(--as-page);
}

.as-pricing__head {
    max-width: 780px;
    margin-bottom: 56px;
}

.as-pricing__title {
    margin: 0 0 16px;
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-variation-settings: "opsz" 56, "wght" 350, "SOFT" 100, "WONK" 1;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.07;
    letter-spacing: -0.04em;
    font-weight: 400;
}

.as-pricing__lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(11, 34, 66, 0.66);
}

.as-pricing__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    max-width: 1040px;
}

.as-pricing .as-card-panel {
    display: flex;
    flex-direction: column;
}

.as-pricing__plan {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.as-pricing__desc {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(11, 34, 66, 0.6);
}

.as-pricing__features {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    flex: 1;
}

.as-pricing__features li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(11, 34, 66, 0.75);
}

.as-pricing__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background: var(--as-accent);
}

.as-pricing__price {
    margin: 0 0 20px;
    padding-top: 20px;
    border-top: 1px solid var(--as-line);
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-size: 30px;
    letter-spacing: -0.03em;
}

.as-pricing__price span {
    font-family: Inter, "Inter Placeholder", sans-serif;
    font-size: 13px;
    letter-spacing: normal;
    color: rgba(11, 34, 66, 0.55);
}

.as-pricing__note {
    margin: 20px 0 0;
    font-size: 13px;
    color: rgba(11, 34, 66, 0.5);
}

/* ================= markets map ================= */

.as-map {
    background: #fff;
}

.as-map__head {
    max-width: 780px;
    margin-bottom: 56px;
}

.as-map__title {
    margin: 0 0 16px;
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-variation-settings: "opsz" 56, "wght" 350, "SOFT" 100, "WONK" 1;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.07;
    letter-spacing: -0.04em;
    font-weight: 400;
}

.as-map__lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(11, 34, 66, 0.66);
}

.as-map__layout {
    display: grid;
    grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
}

.as-map__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.as-map__filters button {
    padding: 9px 16px;
    border: 1px solid var(--as-line);
    border-radius: 100px;
    background: #fff;
    color: rgba(11, 34, 66, 0.7);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.as-map__filters button:hover {
    border-color: var(--as-accent);
}

.as-map__filters button.is-on {
    background: var(--as-bg);
    border-color: var(--as-bg);
    color: #fff;
}

.as-map__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.as-map__list li {
    display: grid;
    background: #fff;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    padding: 16px 18px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.as-map__list li:hover,
.as-map__list li.is-active {
    border-color: var(--as-accent);
    transform: translateX(3px);
}

.as-map__list li.is-dim {
    opacity: 0.35;
}

.as-map__flag {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef1f5;
    color: var(--as-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.as-map__list li[data-status="live"] .as-map__flag {
    background: var(--as-bg);
    color: #fff;
}

.as-map__name {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.as-map__meta {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(11, 34, 66, 0.58);
}

.as-map__foot {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(11, 34, 66, 0.55);
}

.as-map__foot a {
    color: var(--as-ink);
}

.as-map__figure {
    position: relative;
    margin: 0;
    padding: 24px;
    background: #fafbfc;
    border: 1px solid var(--as-line);
    border-radius: 28px;
    overflow: hidden;
}

.as-map__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.as-map__country {
    fill: #e3e7ec;
    stroke: #fafbfc;
    stroke-width: 1.2;
    transition: fill 220ms ease, opacity 220ms ease;
}

.as-map__country.is-market {
    fill: #9fbde2;
    cursor: pointer;
}

.as-map__country[data-status="live"] {
    fill: #1a4a85;
}

.as-map__country[data-status="past"] {
    fill: #8fb0d8;
}

.as-map__country.is-hot {
    fill: #4a86d0;
}

.as-map__country.is-dim {
    opacity: 0.35;
}

/* the countries draw themselves in when the section arrives */
.as-map__svg .as-map__country {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 600ms ease, transform 600ms ease, fill 220ms ease;
}

.as-map.is-in .as-map__svg .as-map__country {
    opacity: 1;
    transform: none;
}

.as-map__pins {
    position: absolute;
    inset: 24px;
    pointer-events: none;
}

.as-map__pin {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100px;
    background: #4a86d0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transition: opacity 500ms ease;
}

.as-map.is-in .as-map__pin {
    opacity: 1;
}

.as-map__pin.is-past {
    background: #8fb0d8;
}

.as-map__pin.is-live::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 100px;
    border: 2px solid rgba(74, 134, 208, 0.55);
    animation: as-ping 2.6s ease-out infinite;
}

.as-map__pin:nth-of-type(2)::after {
    animation-delay: 0.4s;
}

.as-map__pin:nth-of-type(3)::after {
    animation-delay: 0.8s;
}

.as-map__pin:nth-of-type(4)::after {
    animation-delay: 1.2s;
}

.as-map__pin:nth-of-type(5)::after {
    animation-delay: 1.6s;
}

@keyframes as-ping {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }

    70% {
        transform: scale(2.1);
        opacity: 0;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

.as-map__tip {
    position: absolute;
    z-index: 3;
    min-width: 180px;
    max-width: 260px;
    padding: 12px 14px;
    background: var(--as-bg);
    color: #fff;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    box-shadow: 0 16px 40px rgba(3, 12, 26, 0.28);
}

.as-map__tip strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}

.as-map__tip span {
    color: rgba(255, 255, 255, 0.7);
}

.as-map__legend {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    font-size: 13px;
    color: rgba(11, 34, 66, 0.6);
}

.as-map__legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.as-map__legend i {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: #1a4a85;
}

.as-map__legend i.is-past {
    background: #8fb0d8;
}

/* ================= FAQ ================= */

.as-faq {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.as-faq__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}

.as-faq__head {
    position: sticky;
    top: 120px;
}

.as-faq__title {
    margin: 0 0 16px;
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-variation-settings: "opsz" 56, "wght" 350, "SOFT" 100, "WONK" 1;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.07;
    letter-spacing: -0.04em;
    font-weight: 400;
}

.as-faq__lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(11, 34, 66, 0.62);
}

.as-faq__list {
    counter-reset: faq;
    border-top: 1px solid var(--as-line);
}

.as-faq__item {
    position: relative;
    margin-bottom: 0;
    padding: 0 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--as-line);
    border-radius: 0;
    counter-increment: faq;
    transition: background 200ms ease;
}

.as-faq__item:hover {
    background: rgba(74, 134, 208, 0.05);
}

.as-faq__item[open] {
    background: rgba(74, 134, 208, 0.05);
}

.as-faq__item summary {
    display: grid;
    grid-template-columns: 34px 1fr 36px;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
}

.as-faq__item summary::-webkit-details-marker {
    display: none;
}

.as-faq__item summary::before {
    content: counter(faq, decimal-leading-zero);
    font-family: "Fraunces Variable", "Fraunces", serif;
    font-variation-settings: "opsz" 32, "wght" 350;
    font-size: 18px;
    color: rgba(11, 34, 66, 0.3);
    font-variant-numeric: tabular-nums;
}

.as-faq__item summary::after {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--as-line);
    background:
        linear-gradient(var(--as-ink), var(--as-ink)) center / 12px 1.5px no-repeat,
        linear-gradient(var(--as-ink), var(--as-ink)) center / 1.5px 12px no-repeat;
    transition: transform 240ms ease, border-color 200ms ease, background 200ms ease;
}

.as-faq__item[open] summary::after {
    border-color: var(--as-accent);
    background: linear-gradient(var(--as-accent), var(--as-accent)) center / 12px 1.5px no-repeat;
}

.as-faq__answer {
    padding: 0 0 26px 54px;
    max-width: 62ch;
}

.as-faq__answer p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(11, 34, 66, 0.72);
}

.as-faq__answer p:last-child {
    margin-bottom: 0;
}

.as-faq__answer a {
    color: var(--as-ink);
}

/* ================= responsive ================= */

@media (max-width: 1199px) {
    .as-team__inner,
    .as-map__inner,
    .as-pricing__inner,
    .as-faq__inner {
        padding: 88px 40px;
    }

    .as-founder,
    .as-founder--flip,
    .as-map__layout,
    .as-faq__inner,
    .as-pricing__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .as-founder--flip .as-founder__photo {
        order: 0;
    }

    .as-founder__photo {
        width: 100%;
        height: 380px;
    }

    .as-faq__head {
        position: static;
    }
}

@media (max-width: 809px) {
    .as-team__inner,
    .as-map__inner,
    .as-pricing__inner,
    .as-faq__inner {
        padding: 72px 24px;
    }

    .as-founder,
    .as-team__backing {
        padding: 24px;
        border-radius: 22px;
    }

    .as-team__backing {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .as-founder__photo {
        width: 100%;
        height: 300px;
    }

    .as-team__stat strong {
        font-size: 32px;
    }

    .as-faq__item summary {
        grid-template-columns: 24px 1fr 30px;
        gap: 12px;
        padding: 20px 0;
        font-size: 15px;
    }

    .as-faq__item summary::before {
        font-size: 15px;
    }

    .as-faq__item summary::after {
        width: 28px;
        height: 28px;
    }

    .as-faq__answer {
        padding-left: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .as-map__pin.is-live::after {
        animation: none;
    }

    .as-map__svg .as-map__country,
    .as-map__pin {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* the eyebrow reads as a pill on the FAQ, matching the reference */
.as-faq .as-eyebrow {
    padding: 7px 16px 7px 12px;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 100px;
}

.as-faq__item {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}