/*
Theme Name: PGIM Landing Editable
Description: Gutenberg-editable PGIM landing theme with starter patterns/pages.
Version: 1.0.0
Author: Agency Management System
Text Domain: pgim-landing-editable
Requires at least: 6.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* AUTO-GENERATED by build-pgim-landing-editable-zip.sh */

:root {
        --navy-900: #002d62;
        --navy-800: #003b7a;
        --navy-700: #0a4b92;
        --text: #1f2933;
        --muted: #5b6770;
        --bg: #ffffff;
        --line: #e5e7eb;
        --teal-500: #2db6b2;
        --teal-600: #1fa39f;
        --green-200: #c8f0c0;
        --black: #0b0b0b;
        --white: #ffffff;
        --max: 1120px;
        --radius: 10px;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        color: var(--text);
        background: var(--bg);
        line-height: 1.45;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .container {
        width: min(100% - 40px, var(--max));
        margin: 0 auto;
      }

      .eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        margin: 0 0 10px 0;
      }

      h1,
      h2,
      h3 {
        line-height: 1.15;
        margin: 0 0 10px 0;
      }

      p {
        margin: 0 0 12px 0;
        color: var(--muted);
      }

      .section {
        padding: 56px 0;
      }

      .section--tight {
        padding: 32px 0;
      }

      .divider {
        height: 1px;
        background: var(--line);
        margin: 0;
      }

      .btn {
        display: inline-block;
        border-radius: 6px;
        padding: 10px 16px;
        font-weight: 600;
        border: 1px solid transparent;
        cursor: default;
        user-select: none;
      }

      .btn--white {
        background: #ffffff;
        color: #0a4b92;
        border-color: #ffffff;
      }

      .btn--blue {
        background: #0a4b92;
        color: #ffffff;
        border-color: #0a4b92;
      }

      .btn--blue-outline {
        background: #ffffff;
        color: #0a4b92;
        border-color: #0a4b92;
      }

      .link {
        color: #0a4b92;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .muted {
        color: var(--muted);
      }

      .center {
        text-align: center;
      }

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

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

      @media (max-width: 960px) {
        .grid-4 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .grid-3 {
          grid-template-columns: 1fr;
        }
        .split {
          grid-template-columns: 1fr !important;
        }
      }

      @media (max-width: 640px) {
        .grid-4 {
          grid-template-columns: 1fr;
        }
      }

      .split {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 28px;
        align-items: start;
      }

      .card {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .card__head {
        background: #0a4b92;
        color: #fff;
        padding: 10px 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
      }

      .card__body {
        padding: 16px 16px 14px 16px;
      }

      .kicker {
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.12em;
        color: #0a4b92;
        font-weight: 800;
        margin: 0 0 8px 0;
      }

      .title-xl {
        font-size: 44px;
        color: #0b1f2a;
        font-weight: 900;
      }

      .title-lg {
        font-size: 28px;
        color: #0b1f2a;
        font-weight: 900;
        text-align: center;
      }

      .title-md {
        font-size: 20px;
        color: #0b1f2a;
        font-weight: 900;
        margin-bottom: 8px;
      }

      /* Top bar */
      .topbar {
        background: #04234b;
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .topbar__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 0;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.01em;
      }

      .logo__mark {
        width: 34px;
        height: 34px;
        border-radius: 6px;
        background: linear-gradient(135deg, #7aa6ff, #0b3f7a);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
      }

      .nav {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 16px;
        justify-content: flex-end;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 600;
      }

      .nav a {
        opacity: 0.95;
        border-bottom: 1px solid transparent;
      }

      .nav a:hover {
        border-color: rgba(255, 255, 255, 0.35);
      }

      /* Hero */
      .hero {
        background: radial-gradient(1000px 500px at 15% 20%, rgba(80, 140, 255, 0.2), transparent 60%),
          radial-gradient(800px 450px at 80% 30%, rgba(0, 0, 0, 0.45), transparent 60%),
          linear-gradient(180deg, #04356f 0%, #031f47 100%);
        color: #fff;
        padding: 56px 0 72px 0;
        position: relative;
        overflow: hidden;
      }

      .hero::after {
        content: "";
        position: absolute;
        right: -120px;
        top: 10%;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        transform: rotate(8deg);
        pointer-events: none;
        opacity: 0.75;
      }

      .hero__grid {
        position: relative;
        z-index: 1;
        max-width: 640px;
      }

      .hero h1 {
        color: #fff;
        font-size: 46px;
        font-weight: 900;
        margin: 0 0 14px 0;
      }

      .hero p {
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        max-width: 56ch;
      }

      .band-grey {
        background: #f3f4f6;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: 18px 0;
        text-align: center;
        font-weight: 900;
        color: #0b1f2a;
      }

      .placeholder {
        border: 1px dashed #cbd5e1;
        background: #f8fafc;
        border-radius: 12px;
        min-height: 240px;
        display: grid;
        place-items: center;
        color: #64748b;
        font-weight: 700;
        text-align: center;
        padding: 18px;
      }

      .placeholder--tall {
        min-height: 320px;
      }

      .placeholder--video {
        position: relative;
        padding: 0;
        overflow: hidden;
        border: 1px solid #cbd5e1;
        background: #0b1f2a;
      }

      .placeholder--video::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(600px 240px at 30% 30%, rgba(120, 180, 255, 0.25), transparent 60%),
          radial-gradient(500px 240px at 80% 40%, rgba(0, 0, 0, 0.45), transparent 55%),
          linear-gradient(120deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.55));
        opacity: 0.9;
      }

      .play {
        position: absolute;
        z-index: 2;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.4);
        display: grid;
        place-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        font-weight: 800;
        text-indent: 3px;
      }

      .video-cap {
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(32, 178, 170, 0.92);
        color: #fff;
        font-weight: 900;
        letter-spacing: 0.1em;
        text-align: center;
        padding: 10px 10px;
        font-size: 12px;
      }

      .diagram {
        min-height: 300px;
        display: grid;
        place-items: center;
        background: #eef2f7;
        border: 1px solid #d7dde6;
        border-radius: 12px;
        padding: 16px;
      }

      .venn {
        position: relative;
        width: min(100%, 420px);
        height: 220px;
      }

      .circle {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-weight: 900;
        color: #0a4b92;
        border: 2px solid rgba(10, 75, 146, 0.25);
        background: rgba(255, 255, 255, 0.75);
        top: 20px;
      }

      .circle--a {
        left: 20px;
      }

      .circle--b {
        right: 20px;
      }

      .join {
        position: absolute;
        left: 50%;
        top: 44px;
        transform: translateX(-50%);
        width: 34px;
        height: 34px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        background: #ffffff;
        border: 1px solid #c7d2e0;
        font-weight: 900;
        color: #0a4b92;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        z-index: 2;
      }

      .outcome {
        position: absolute;
        left: 50%;
        bottom: 6px;
        transform: translateX(-50%);
        width: min(100% - 40px, 300px);
        background: #0a4b92;
        color: #fff;
        border-radius: 10px;
        padding: 10px 12px;
        text-align: center;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(10, 75, 146, 0.25);
      }

      .teal-tiles .tile {
        background: var(--teal-500);
        color: #fff;
        border-radius: 12px;
        padding: 18px 16px 16px 16px;
        min-height: 170px;
        box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
      }

      .tile h3 {
        color: #fff;
        font-size: 16px;
        margin-bottom: 8px;
      }

      .tile p {
        color: rgba(255, 255, 255, 0.92);
        font-size: 14px;
      }

      .icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.35);
        margin-bottom: 10px;
        font-size: 20px;
      }

      .resource {
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 220px;
      }

      .resource__body {
        padding: 16px 16px 8px 16px;
        flex: 1;
      }

      .resource__foot {
        background: #0a4b92;
        color: #fff;
        padding: 12px 16px;
        text-align: right;
        font-weight: 800;
      }

      .stats {
        background: var(--teal-600);
        color: #fff;
        text-align: center;
      }

      .stats h2 {
        color: #fff;
        font-size: 30px;
        font-weight: 900;
        margin: 0 0 8px 0;
      }

      .stats p {
        color: rgba(255, 255, 255, 0.9);
        max-width: 80ch;
        margin: 0 auto 18px auto;
      }

      .stat-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 18px 0 0 0;
      }

      .stat {
        padding: 12px 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-weight: 900;
        font-size: 18px;
      }

      .actions-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
      }

      .btn--ghost {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.6);
      }

      .contact {
        background: linear-gradient(180deg, #bff2b2 0%, #a2e6a0 100%);
        position: relative;
        overflow: hidden;
      }

      .contact::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 30px),
          repeating-linear-gradient(60deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 34px);
        mix-blend-mode: multiply;
        opacity: 0.35;
        pointer-events: none;
      }

      .contact__grid {
        position: relative;
        z-index: 1;
        text-align: center;
      }

      .contact__intro {
        max-width: 72ch;
        margin: 0 auto 18px auto;
      }

      .contact__intro h2 {
        margin: 0 0 10px 0;
      }

      .contact__intro p {
        margin: 0 auto;
      }

      .form {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        padding: 16px;
        box-shadow: var(--shadow);
        max-width: 560px;
        margin: 0 auto;
        text-align: left;
      }

      .field {
        display: grid;
        gap: 6px;
        margin-bottom: 10px;
      }

      .field label {
        font-size: 12px;
        font-weight: 800;
        color: #0b1f2a;
      }

      .field input,
      .field textarea {
        width: 100%;
        border: 1px solid #d7dde6;
        border-radius: 8px;
        padding: 10px 10px;
        font: inherit;
        background: #fbfcfe;
      }

      .field textarea {
        min-height: 120px;
        resize: vertical;
      }

      .form__actions {
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }

      .btn--submit-white {
        background: #ffffff;
        color: #0b1f2a;
        border-color: rgba(11, 31, 42, 0.18);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
      }

      .footer {
        background: #0b0b0b;
        color: rgba(255, 255, 255, 0.78);
        padding: 28px 0 22px 0;
        font-size: 12px;
      }

      .footer__social {
        display: flex;
        justify-content: center;
        gap: 12px;
        align-items: center;
        margin: 2px 0 14px 0;
      }

      .social {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .icon-btn {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
        font-weight: 800;
        font-size: 12px;
      }

      .legal {
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.55;
        margin: 0 0 12px 0;
      }

      .footer__links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        justify-content: center;
        color: rgba(255, 255, 255, 0.78);
        font-weight: 700;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 12px;
      }

      .footer__links a {
        text-decoration: underline;
        text-underline-offset: 3px;
        opacity: 0.9;
      }

      .sep {
        color: rgba(255, 255, 255, 0.35);
      }