/* ============================================================
   PFC'26 — "WHY ATTEND" section restyle for Backstage
      Paste this into Backstage → Custom CSS.
         Everything is scoped to this one section via its stable
            data-section-id, so it will NOT affect the rest of the site.

               IDs used (all stable, taken from your DevTools):
                    section  -> data-section-id="231380000000080025"
                         eyebrow  -> data-element-id="231380000000080026"  (top label)
                              title    -> data-element-id="231380000000080028"  (heading + intro)
                                   list     -> data-element-id="231380000000080030"  (the 4 cards)
                                        cards    -> li-item  data-id 080031 / 080038 / 080045 / 080052
                                           NOTE: do NOT use #ember64, #ember66 ... — those are
                                              Ember-generated and change on every page load.
                                                 ============================================================ */

/* Font to match the design. If your CSS field strips @import,
                                                    load it with the small JS snippet instead (see notes). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ---- 1. SECTION SHELL: dark theme + text-color variables ---- */
section[data-section-id="231380000000080025"] {
    /* Backstage reads these to colour title / body / secondary text */
    --section-title-text-color: #FFFFFF;
    --section-text-color: #9AA7CC;
    --section-secondary-text-color: #9AA7CC;
    --section-link-color: #46C9FF;
    background-color: #070A18 !important;
}

section[data-section-id="231380000000080025"],
section[data-section-id="231380000000080025"] * {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* dark gradient background (overrides the light background-layer) */
section[data-section-id="231380000000080025"] .background-layer {
    background:
        radial-gradient(70% 60% at 50% -8%, rgba(44, 83, 255, .20), transparent 60%),
        radial-gradient(55% 50% at 92% 112%, rgba(122, 63, 230, .16), transparent 60%),
        #070A18 !important;
}

/* a little vertical breathing room (tune to taste) */
section[data-section-id="231380000000080025"] .foreground-layer {
    padding-top: 96px;
    padding-bottom: 104px;
}

/* ---- 2. EYEBROW: "WHY ATTEND" -> gradient label with dash ---- */
section[data-section-id="231380000000080025"] [data-element-id="231380000000080026"] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

section[data-section-id="231380000000080025"] [data-element-id="231380000000080026"],
section[data-section-id="231380000000080025"] [data-element-id="231380000000080026"] * {
    background: linear-gradient(100deg, #2C53FF 0%, #7A3FE6 55%, #C23BD0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

section[data-section-id="231380000000080025"] [data-element-id="231380000000080026"]::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    margin-right: 11px;
    vertical-align: middle;
    border-radius: 2px;
    background: linear-gradient(100deg, #2C53FF, #7A3FE6, #C23BD0);
}

/* ---- 3. TITLE + INTRO ---- */
section[data-section-id="231380000000080025"] [data-element-id="231380000000080028"] h1,
section[data-section-id="231380000000080025"] [data-element-id="231380000000080028"] h2,
section[data-section-id="231380000000080025"] [data-element-id="231380000000080028"] h3 {
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
}

/* push the cards down from the intro */
section[data-section-id="231380000000080025"] [data-element-id="231380000000080030"] {
    margin-top: 44px;
}

/* ---- 4. CARD GRID ---- */
section[data-section-id="231380000000080025"] .bs-mtList-wgt.grb-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
}

/* ---- 5. CARD CHROME (.li-item) ---- */
section[data-section-id="231380000000080025"] .li-item {
    position: relative;
    border-radius: 16px;
    padding: 96px 34px 34px !important;
    /* top room for the icon */
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
    border: 1px solid rgba(120, 150, 255, .16);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

section[data-section-id="231380000000080025"] .li-item:hover {
    transform: translateY(-6px);
    border-color: rgba(122, 63, 230, .5);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(122, 63, 230, .22);
}

/* belt-and-suspenders text colours inside cards */
section[data-section-id="231380000000080025"] .li-item h1,
section[data-section-id="231380000000080025"] .li-item h2,
section[data-section-id="231380000000080025"] .li-item h3,
section[data-section-id="231380000000080025"] .li-item h4,
section[data-section-id="231380000000080025"] .li-item .li-title {
    color: #FFFFFF !important;
    font-weight: 700;
}

section[data-section-id="231380000000080025"] .li-item p,
section[data-section-id="231380000000080025"] .li-item .li-desc,
section[data-section-id="231380000000080025"] .li-item .li-description {
    color: #9AA7CC !important;
}

/* ---- 6. ICONS injected per card (cards are "no-media") ---- */
section[data-section-id="231380000000080025"] .li-item::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 34px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(120, 150, 255, .18);
    background-color: rgba(44, 83, 255, .16);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* Card 1 — Where fiber meets AI infrastructure  (signal/activity) */
section[data-section-id="231380000000080025"] .li-item[data-id="231380000000080031"]::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346C9FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h6l2-5 4 10 2-5h4'/></svg>");
}

/* Card 2 — High-level regional networking  (people) */
section[data-section-id="231380000000080025"] .li-item[data-id="231380000000080038"]::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346C9FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='8' r='3'/><circle cx='17' cy='8' r='3'/><path d='M2 20c0-3 2.5-5 5-5s5 2 5 5'/><path d='M12 20c0-3 2.5-5 5-5s5 2 5 5'/></svg>");
}

/* Card 3 — Pacific-focused, globally connected  (globe) */
section[data-section-id="231380000000080025"] .li-item[data-id="231380000000080045"]::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346C9FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3c2.5 2.7 2.5 15.3 0 18'/><path d='M12 3c-2.5 2.7-2.5 15.3 0 18'/></svg>");
}

/* Card 4 — Actionable conversations  (check) */
section[data-section-id="231380000000080025"] .li-item[data-id="231380000000080052"]::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346C9FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13l4 4L20 5'/><path d='M4 19h16'/></svg>");
}

/* ---- 7. RESPONSIVE: stack cards on small screens ---- */
@media (max-width:768px) {
    section[data-section-id="231380000000080025"] .bs-mtList-wgt.grb-list {
        grid-template-columns: 1fr !important;
    }

    section[data-section-id="231380000000080025"] .foreground-layer {
        padding-top: 72px;
        padding-bottom: 80px;
    }
}



/* ============================================================
   PFC'26 — "CONNECT DIRECTLY WITH" section restyle for Backstage
      Paste into Backstage → Custom CSS (can sit in the same field
         as the Why-Attend CSS).

            Stable IDs (from your DevTools):
                 section  -> data-section-id="231380000000080127"
                      eyebrow  -> data-element-id="231380000000080128"
                           title    -> data-element-id="231380000000080130"
                                list     -> data-element-id="231380000000080132"
                                     pills    -> li-item data-id 080133 / 080140 / 080147 /
                                                      080154 / 080177 / 080184 / 080194

                                                         IMPORTANT: this section has the class "alternative-background",
                                                            so Backstage colours it through the *alternate* variables
                                                               (--alternate-section-title-text-color, etc.) — those are the
                                                                  ones overridden below.
                                                                     Do NOT target #ember86 / #ember88 ... (Ember IDs change on reload).
                                                                        ============================================================ */

/* font — omit this line if you already added it in the Why-Attend CSS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ---- 1. SECTION SHELL: dark theme + ALTERNATE text variables ---- */
section[data-section-id="231380000000080127"] {
    --alternate-section-title-text-color: #FFFFFF;
    --alternate-section-text-color: #FFFFFF;
    --alternate-section-secondary-text-color: #9AA7CC;
    --alternate-section-link-color: #46C9FF;
    background-color: #070A18 !important;
}

section[data-section-id="231380000000080127"],
section[data-section-id="231380000000080127"] * {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

section[data-section-id="231380000000080127"] .background-layer {
    background:
        radial-gradient(60% 60% at 50% -10%, rgba(44, 83, 255, .16), transparent 60%),
        radial-gradient(50% 50% at 50% 120%, rgba(122, 63, 230, .14), transparent 60%),
        #070A18 !important;
}

section[data-section-id="231380000000080127"] .foreground-layer {
    padding-top: 90px;
    padding-bottom: 110px;
}

/* ---- 2. EYEBROW: "CONNECT DIRECTLY WITH" -> centered gradient + dash ---- */
section[data-section-id="231380000000080127"] [data-element-id="231380000000080128"] {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

section[data-section-id="231380000000080127"] [data-element-id="231380000000080128"],
section[data-section-id="231380000000080127"] [data-element-id="231380000000080128"] * {
    background: linear-gradient(100deg, #2C53FF 0%, #7A3FE6 55%, #C23BD0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

section[data-section-id="231380000000080127"] [data-element-id="231380000000080128"]::before {
    content: " ";
    display: inline-block;
    width: 26px;
    height: 2px;
    margin-right: 11px;
    vertical-align: middle;
    border-radius: 2px;
    background: linear-gradient(100deg, #2C53FF, #7A3FE6, #C23BD0);
}

/* ---- 3. TITLE ---- */
section[data-section-id="231380000000080127"] [data-element-id="231380000000080130"] h1,
section[data-section-id="231380000000080127"] [data-element-id="231380000000080130"] h2,
section[data-section-id="231380000000080127"] [data-element-id="231380000000080130"] h3 {
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
    text-align: center;
}

/* push pills down from the title */
section[data-section-id="231380000000080127"] [data-element-id="231380000000080132"] {
    margin-top: 48px;
}

/* ---- 4. PILL ROW (the list is already flex-wrap + centered) ---- */
section[data-section-id="231380000000080127"] .bs-mtList-wgt.grb-list {
    gap: 13px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ---- 5. EACH PILL (.li-item) ---- */
section[data-section-id="231380000000080127"] .li-item {
    display: inline-flex !important;
    align-items: center;
    gap: 11px;
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: max-content;
    padding: 14px 24px !important;
    border-radius: 40px;
    border: 1px solid rgba(120, 150, 255, .16);
    background: rgba(255, 255, 255, .03);
    white-space: nowrap;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

section[data-section-id="231380000000080127"] .li-item:hover {
    transform: translateY(-3px);
    border-color: #3D6BFF;
    background: rgba(44, 83, 255, .13);
}

/* gradient dot before each label */
section[data-section-id="231380000000080127"] .li-item::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(120deg, #2C53FF, #7A3FE6, #C23BD0);
    box-shadow: 0 0 10px rgba(122, 63, 230, .7);
}

/* label text -> white, no stray margins */
section[data-section-id="231380000000080127"] .li-item,
section[data-section-id="231380000000080127"] .li-item h1,
section[data-section-id="231380000000080127"] .li-item h2,
section[data-section-id="231380000000080127"] .li-item h3,
section[data-section-id="231380000000080127"] .li-item h4,
section[data-section-id="231380000000080127"] .li-item p,
section[data-section-id="231380000000080127"] .li-item .li-title {
    color: #FFFFFF !important;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 !important;
}

section[data-section-id="231380000000080127"] .grb-list .no-media.li-item {
    gap: 11px !important;
}

/* ---- 6. RESPONSIVE ---- */
@media (max-width:768px) {
    section[data-section-id="231380000000080127"] .foreground-layer {
        padding-top: 64px;
        padding-bottom: 72px;
    }

    section[data-section-id="231380000000080127"] .li-item {
        padding: 12px 18px !important;
    }
}




/* ============================================================
   PFC'26 — "HOT TOPICS" section restyle for Backstage
      Paste into Backstage → Custom CSS (same field is fine).

         Stable IDs (from your DevTools):
              section  -> data-section-id="231380000000080225"
                   eyebrow  -> data-element-id="231380000000080226"
                        title    -> data-element-id="231380000000080228"
                             list     -> data-element-id="231380000000080230"
                                  cards    -> li-item data-id (in visual order 01..11):
                                         080231 080238 080245 080252 080270 080277
                                                080284 080291 080298 080305 080312

                                                   This section is "highlight-button" (NOT alternative-background),
                                                      so it uses the regular --section-* variables.
                                                         Do NOT target #ember110 / #ember112 ... (Ember IDs change).
                                                            ============================================================ */

/* font — omit if already added in another section's CSS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ---- 1. SECTION SHELL ---- */
section[data-section-id="231380000000080225"] {
    --section-title-text-color: #FFFFFF;
    --section-text-color: #9AA7CC;
    --section-secondary-text-color: #9AA7CC;
    --section-link-color: #46C9FF;
    background-color: #070A18 !important;
}

section[data-section-id="231380000000080225"],
section[data-section-id="231380000000080225"] * {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

section[data-section-id="231380000000080225"] .background-layer {
    background:
        radial-gradient(55% 65% at 100% 0%, rgba(122, 63, 230, .20), transparent 55%),
        radial-gradient(45% 55% at 0% 100%, rgba(44, 83, 255, .12), transparent 60%),
        #070A18 !important;
}

section[data-section-id="231380000000080225"] .foreground-layer {
    padding-top: 96px;
    padding-bottom: 104px;
}

/* ---- 2. EYEBROW: "HOT TOPICS AT PFC'26" -> gradient + dash ---- */
section[data-section-id="231380000000080225"] [data-element-id="231380000000080226"] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

section[data-section-id="231380000000080225"] [data-element-id="231380000000080226"],
section[data-section-id="231380000000080225"] [data-element-id="231380000000080226"] * {
    background: linear-gradient(100deg, #2C53FF 0%, #7A3FE6 55%, #C23BD0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

section[data-section-id="231380000000080225"] [data-element-id="231380000000080226"]::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    margin-right: 11px;
    vertical-align: middle;
    border-radius: 2px;
    background: linear-gradient(100deg, #2C53FF, #7A3FE6, #C23BD0);
}

/* ---- 3. TITLE ---- */
section[data-section-id="231380000000080225"] [data-element-id="231380000000080228"] h1,
section[data-section-id="231380000000080225"] [data-element-id="231380000000080228"] h2,
section[data-section-id="231380000000080225"] [data-element-id="231380000000080228"] h3 {
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
}

section[data-section-id="231380000000080225"] [data-element-id="231380000000080230"] {
    margin-top: 48px;
}

/* ---- 4. CARD GRID (3 columns) ---- */
section[data-section-id="231380000000080225"] .bs-mtList-wgt.grb-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* ---- 5. CARD (.li-item): number top-left, title bottom ---- */
section[data-section-id="231380000000080225"] .li-item {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    /* title sits at the bottom */
    min-height: 172px;
    padding: 30px 28px 28px !important;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
    border: 1px solid rgba(120, 150, 255, .14);
    transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

section[data-section-id="231380000000080225"] .li-item:hover {
    transform: translateY(-5px);
    border-color: rgba(122, 63, 230, .5);
    background: linear-gradient(160deg, rgba(44, 83, 255, .16), rgba(122, 63, 230, .07));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

/* card title -> white */
section[data-section-id="231380000000080225"] .li-item h1,
section[data-section-id="231380000000080225"] .li-item h2,
section[data-section-id="231380000000080225"] .li-item h3,
section[data-section-id="231380000000080225"] .li-item h4,
section[data-section-id="231380000000080225"] .li-item .li-title {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 1.16rem;
    line-height: 1.3;
    margin: 0 !important;
}

/* ---- 6. INDEX NUMBERS injected per card ---- */
section[data-section-id="231380000000080225"] .li-item::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 28px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .06em;
    background: linear-gradient(120deg, #4D6BFF, #7A3FE6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080231"]::before {
    content: "01";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080238"]::before {
    content: "02";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080245"]::before {
    content: "03";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080252"]::before {
    content: "04";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080270"]::before {
    content: "05";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080277"]::before {
    content: "06";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080284"]::before {
    content: "07";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080291"]::before {
    content: "08";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080298"]::before {
    content: "09";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080305"]::before {
    content: "10";
}

section[data-section-id="231380000000080225"] .li-item[data-id="231380000000080312"]::before {
    content: "11";
}

/* ---- 7. RESPONSIVE ---- */
@media (max-width:960px) {
    section[data-section-id="231380000000080225"] .bs-mtList-wgt.grb-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width:600px) {
    section[data-section-id="231380000000080225"] .bs-mtList-wgt.grb-list {
        grid-template-columns: 1fr !important;
    }

    section[data-section-id="231380000000080225"] .foreground-layer {
        padding-top: 72px;
        padding-bottom: 80px;
    }
}


section[data-section-id="231380000000080388"] [data-element-id="231380000000080389"] * {
    background: linear-gradient(100deg, #2C53FF 0%, #7A3FE6 55%, #C23BD0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
section[data-section-id="231380000000080388"] .background-layer {
    background: radial-gradient(60% 60% at 50% -10%, rgba(44, 83, 255, .16), transparent 60%), radial-gradient(50% 50% at 50% 120%, rgba(122, 63, 230, .14), transparent 60%), #070A18 !important;
}