/* ================================================================
   Personality Pundit — Home Page Styles
   Palette: indigo #3B1F8C · amber #F59E0B · off-white #F8F7FF
   ================================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --pp-indigo:      #3B1F8C;
    --pp-indigo-dark: #2A1568;
    --pp-indigo-mid:  #4C2BAD;
    --pp-amber:       #F59E0B;
    --pp-amber-light: #FCD34D;
    --pp-white:       #ffffff;
    --pp-off-white:   #F8F7FF;
    --pp-text:        #1E1340;
    --pp-muted:       #6B5FA0;
    --pp-border:      #E5E0F5;

    --pp-radius:  12px;
    --pp-radius-lg: 20px;
    --pp-shadow:  0 4px 24px rgba(59,31,140,.10);
    --pp-shadow-lg: 0 8px 40px rgba(59,31,140,.16);
    --pp-transition: 0.2s ease;
}

/* ── Reset scoped to our page sections ─────────────────────── */
.pp-hero *, .pp-section * {
    box-sizing: border-box;
}

/* ── Layout helpers ─────────────────────────────────────────── */
.pp-container {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.pp-container--narrow {
    max-width: 760px;
}

/* ── Shared typography ──────────────────────────────────────── */
.pp-label {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-amber);
    margin-bottom: .75rem;
}
.pp-label--center { text-align: center; }
.pp-label--light  { color: var(--pp-amber-light); }

.pp-section__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--pp-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}
.pp-section__title--center { text-align: center; }
.pp-section__title--light  { color: var(--pp-white); }

.pp-section__lead {
    font-size: 1.0625rem;
    color: var(--pp-muted);
    line-height: 1.7;
    max-width: 56ch;
    margin: 0 0 2rem;
}
.pp-section__lead--center {
    text-align: center;
    margin-inline: auto;
}

/* ── Buttons ────────────────────────────────────────────────── */
.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--pp-transition), box-shadow var(--pp-transition), background var(--pp-transition);
    border: 2px solid transparent;
    line-height: 1.2;
}
.pp-btn:hover { transform: translateY(-2px); }

.pp-btn--primary {
    background: var(--pp-amber);
    color: var(--pp-indigo-dark);
    box-shadow: 0 4px 16px rgba(245,158,11,.35);
}
.pp-btn--primary:hover {
    background: var(--pp-amber-light);
    box-shadow: 0 6px 24px rgba(245,158,11,.45);
}

.pp-btn--ghost {
    background: transparent;
    color: var(--pp-white);
    border-color: rgba(255,255,255,.5);
}
.pp-btn--ghost:hover {
    background: rgba(255,255,255,.1);
    border-color: var(--pp-white);
}

.pp-btn--secondary {
    background: transparent;
    color: var(--pp-indigo);
    border-color: var(--pp-indigo);
}
.pp-btn--secondary:hover {
    background: var(--pp-indigo);
    color: var(--pp-white);
}

.pp-btn--amber {
    background: var(--pp-amber);
    color: var(--pp-indigo-dark);
    font-weight: 800;
    box-shadow: 0 4px 20px rgba(245,158,11,.4);
}
.pp-btn--amber:hover {
    background: var(--pp-amber-light);
    box-shadow: 0 6px 28px rgba(245,158,11,.5);
}

.pp-btn--large {
    padding: 1rem 2.25rem;
    font-size: 1.0625rem;
}

/* ── Nav CTA override ───────────────────────────────────────── */
.pp-nav-cta > a {
    background: var(--pp-amber) !important;
    color: var(--pp-indigo-dark) !important;
    border-radius: 999px;
    padding: .35rem 1.1rem !important;
    font-weight: 700;
    transition: background var(--pp-transition);
}
.pp-nav-cta > a:hover {
    background: var(--pp-amber-light) !important;
}

/* ── Section spacing ─────────────────────────────────────────── */
.pp-section {
    padding-block: clamp(4rem, 8vw, 7rem);
}
.pp-section--alt {
    background: var(--pp-off-white);
}
.pp-section--dark {
    background: linear-gradient(135deg, var(--pp-indigo-dark) 0%, var(--pp-indigo-mid) 100%);
}

/* ════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════ */
.pp-hero {
    position: relative;
    background: linear-gradient(135deg, var(--pp-indigo-dark) 0%, #5B3BC4 60%, #7B55D4 100%);
    padding-top: clamp(5rem, 12vw, 10rem);
    padding-bottom: clamp(6rem, 13vw, 11rem);
    overflow: hidden;
}

/* Subtle radial glow */
.pp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 70% 40%, rgba(245,158,11,.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 20% 80%, rgba(91,59,196,.4) 0%, transparent 70%);
    pointer-events: none;
}

.pp-hero__inner {
    position: relative;
    max-width: 720px;
}

.pp-hero__eyebrow {
    display: inline-block;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-amber-light);
    margin-bottom: 1.25rem;
    padding: .35rem .9rem;
    border: 1px solid rgba(245,158,11,.4);
    border-radius: 999px;
    background: rgba(245,158,11,.1);
}

.pp-hero__headline {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: var(--pp-white);
    line-height: 1.1;
    margin: 0 0 1.5rem;
    letter-spacing: -.02em;
}

.pp-hero__sub {
    font-size: clamp(1rem, 2vw, 1.1875rem);
    color: rgba(255,255,255,.85);
    line-height: 1.75;
    max-width: 52ch;
    margin: 0 0 2.5rem;
}

.pp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Wave divider */
.pp-hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
}
.pp-hero__wave svg {
    width: 100%;
    height: 80px;
    fill: var(--pp-white);
    display: block;
}

/* ════════════════════════════════════════════════════════════════
   3 PILLARS
════════════════════════════════════════════════════════════════ */
.pp-pillars {
    background: var(--pp-white);
}

.pp-pillars__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.pp-pillar {
    padding: 2.25rem 2rem;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-white);
    box-shadow: var(--pp-shadow);
    transition: transform var(--pp-transition), box-shadow var(--pp-transition);
}
.pp-pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--pp-shadow-lg);
}

.pp-pillar__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--pp-indigo) 0%, var(--pp-indigo-mid) 100%);
    border-radius: var(--pp-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    padding: 13px;
}
.pp-pillar__icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--pp-white);
}

.pp-pillar__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 .75rem;
}

.pp-pillar__text {
    font-size: .9375rem;
    color: var(--pp-muted);
    line-height: 1.7;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   WHY DIFFERENT
════════════════════════════════════════════════════════════════ */
.pp-different__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
@media (max-width: 820px) {
    .pp-different__layout { grid-template-columns: 1fr; }
    .pp-different__visual { order: -1; }
}

.pp-different__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pp-different__list li {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    font-size: .9375rem;
    color: var(--pp-text);
    line-height: 1.6;
}
.pp-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--pp-indigo);
    color: var(--pp-white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 900;
    margin-top: .15rem;
}

/* Stat cards */
.pp-different__visual {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pp-stat-card {
    background: var(--pp-white);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow);
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.pp-stat-card--accent {
    background: linear-gradient(135deg, var(--pp-indigo) 0%, var(--pp-indigo-mid) 100%);
    border-color: transparent;
}
.pp-stat-card--accent .pp-stat-card__number,
.pp-stat-card--accent .pp-stat-card__label {
    color: var(--pp-white);
}

.pp-stat-card__number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--pp-indigo);
    line-height: 1;
    letter-spacing: -.03em;
}
.pp-stat-card__label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ════════════════════════════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════════════════════════════ */
.pp-how {
    background: var(--pp-white);
}

.pp-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 3.5rem 0 3rem;
    flex-wrap: wrap;
}

.pp-step {
    flex: 1;
    min-width: 220px;
    max-width: 300px;
    text-align: center;
    padding: 0 1.5rem;
}

.pp-step__number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pp-indigo) 0%, var(--pp-indigo-mid) 100%);
    color: var(--pp-white);
    font-size: 1.375rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 16px rgba(59,31,140,.3);
}

.pp-step__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 .6rem;
}

.pp-step__text {
    font-size: .9rem;
    color: var(--pp-muted);
    line-height: 1.65;
    margin: 0;
}

.pp-step__connector {
    flex: 0 0 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--pp-indigo) 0%, var(--pp-amber) 100%);
    margin-top: 27px;
    border-radius: 999px;
    opacity: .35;
    min-width: 40px;
}
@media (max-width: 700px) {
    .pp-step__connector { display: none; }
    .pp-steps { flex-direction: column; align-items: center; gap: 2rem; }
    .pp-step { max-width: 100%; }
}

.pp-how__cta {
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   COMMUNITY
════════════════════════════════════════════════════════════════ */
.pp-community__inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.pp-community__text {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.85);
    line-height: 1.75;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════════════════════════ */
.pp-contact .pp-section__title { margin-bottom: .5rem; }

.pp-contact__form {
    background: var(--pp-white);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow);
    padding: clamp(1.5rem, 4vw, 3rem);
    margin-top: 2.5rem;
}

/* Ninja Forms field overrides */
.pp-contact__form .nf-form-content label {
    font-weight: 600;
    color: var(--pp-text);
    font-size: .9375rem;
}
.pp-contact__form .nf-form-content input,
.pp-contact__form .nf-form-content textarea,
.pp-contact__form .nf-form-content select {
    border: 1.5px solid var(--pp-border) !important;
    border-radius: var(--pp-radius) !important;
    padding: .75rem 1rem !important;
    font-size: .9375rem !important;
    color: var(--pp-text) !important;
    transition: border-color var(--pp-transition) !important;
    width: 100% !important;
}
.pp-contact__form .nf-form-content input:focus,
.pp-contact__form .nf-form-content textarea:focus {
    border-color: var(--pp-indigo) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59,31,140,.1) !important;
}
.pp-contact__form .nf-form-content .submit-container input[type=button],
.pp-contact__form .nf-form-content .submit-container input[type=submit] {
    background: var(--pp-indigo) !important;
    color: var(--pp-white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: .875rem 2.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background var(--pp-transition), transform var(--pp-transition) !important;
    box-shadow: 0 4px 16px rgba(59,31,140,.3) !important;
    width: auto !important;
}
.pp-contact__form .nf-form-content .submit-container input:hover {
    background: var(--pp-indigo-mid) !important;
    transform: translateY(-2px) !important;
}

/* ── Blocksy page-title strip: hide on front page ──────────── */
body.home .entry-header,
body.home .ct-page-title-bar {
    display: none !important;
}