/* sentinel-lander-pubfig.css — WS13.13: lander CSS palette-mapped onto Sentinel tokens. */

  /* WS12.309 — galaxy-palette polish: cyan/indigo/violet brand throughout,
     pill CTAs (no clip-path chamfer), backdrop-filter blur on cards over
     textures, fewer textures overall. */
  body { background: #0a0a0b; color: var(--gw-c-text-primary); font-family: 'Inter', system-ui, sans-serif; }
  .pf-page { max-width: 980px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }

  .pf-hero {
    text-align: center; padding: 3.25rem 1rem 2.75rem; position: relative;
  }
  /* Red ::before glow removed — gw-bg-aurora + gw-bg-hero already lights
     the hero with brand colors; the old red overlay clashed. */
  .pf-eyebrow {
    display:inline-block; padding:.4rem 1rem;
    border:1px solid rgba(132,204,22,0.42); border-radius:999px;
    color:#bef264; background: rgba(132,204,22,0.08);
    font-size:.7rem; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.5rem;
  }
  .pf-hero h1 {
    font-family:'Playfair Display','Georgia',serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
    color: #fafafa; margin: 0 0 1.4rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }
  .pf-hero h1 em {
    background: linear-gradient(135deg, #84cc16, #65a30d, #84cc16);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style:italic; font-weight:700;
  }
  .pf-hero p.lede {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: #a1a1aa; max-width: 720px; margin: 0 auto 1.6rem;
    line-height: 1.65;
  }
  .pf-cta-row { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top:1.75rem; }

  /* Pill CTAs — match site-wide WS12.155 pivot. No clip-path. */
  .pf-cta {
    display:inline-flex; align-items:center; gap:.5rem;
    padding: .85rem 1.65rem; font-weight:700; font-size:.92rem;
    text-decoration:none; border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    letter-spacing: .01em;
  }
  .pf-cta-primary {
    background: linear-gradient(135deg, #84cc16 0%, #65a30d 60%, #84cc16 100%);
    color: #0a0a0b;
    box-shadow: 0 6px 22px rgba(132,204,22,0.36), 0 1px 0 rgba(255,255,255,0.15) inset;
  }
  .pf-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(132,204,22,0.42), 0 1px 0 rgba(255,255,255,0.18) inset;
  }
  .pf-cta-ghost {
    background: rgba(20,20,23,0.62);
    color: #e4e4e7;
    border:1px solid rgba(132,204,22,0.32);
    backdrop-filter: blur(6px);
  }
  .pf-cta-ghost:hover {
    border-color: rgba(132,204,22,0.7);
    background: rgba(20,20,23,0.82);
    color:#fff;
  }

  .pf-section { margin: 4rem 0; }
  .pf-section h2 {
    font-family:'Playfair Display',serif; font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight:700; color:#fafafa; margin: 0 0 1.4rem; letter-spacing:-0.01em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }
  .pf-section h2 em {
    background: linear-gradient(135deg, #84cc16, #65a30d, #84cc16);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style:italic;
  }
  .pf-section p { color:#a1a1aa; line-height:1.7; font-size:1rem; }

  /* Threat cards — alarm tone now expressed via cyan-violet intensity, not red. */
  .pf-threat-grid {
    display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.1rem; margin-top: 1.7rem;
  }
  .pf-threat {
    padding:1.25rem 1.35rem;
    background: rgba(20,20,23,0.85);
    border:1px solid rgba(132,204,22,0.22);
    border-left: 3px solid #84cc16;
    border-radius: 14px;
    backdrop-filter: blur(8px) saturate(1.18);
    -webkit-backdrop-filter: blur(8px) saturate(1.18);
    box-shadow: 0 6px 20px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .pf-threat:hover {
    border-color: rgba(132,204,22,0.45);
    border-left-color: #bef264;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .pf-threat h4 {
    color:#bef264; font-size:.78rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; margin:0 0 .55rem;
  }
  .pf-threat p { color:#a1a1aa; font-size:.92rem; margin:0; line-height:1.55; }

  /* Chain panel — was warning-yellow; now brand cyan/violet. */
  .pf-chain {
    margin: 2rem 0;
    padding: 2rem 2.1rem;
    background: linear-gradient(135deg, rgba(20,20,23,0.85), rgba(27,27,31,0.55));
    border: 1px solid rgba(132,204,22,0.22);
    border-radius: 18px;
    backdrop-filter: blur(8px) saturate(1.18);
    -webkit-backdrop-filter: blur(8px) saturate(1.18);
    box-shadow: 0 8px 28px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .pf-chain h3 {
    font-family:'Playfair Display',serif;
    font-size:1.4rem; color:#fafafa; margin:0 0 .85rem;
  }
  .pf-chain h3 em {
    background: linear-gradient(135deg, #84cc16, #65a30d, #84cc16);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style:italic; font-weight:700;
  }
  .pf-chain-arrows {
    display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
    gap: 1rem; margin: 1.4rem 0; font-size:.9rem;
  }
  .pf-chain-side {
    padding:1.05rem 1.1rem;
    background:rgba(10,10,11,0.6);
    border-radius:12px;
    border:1px solid rgba(132,204,22,0.22);
  }
  .pf-chain-side strong { display:block; color:#fafafa; margin-bottom:.4rem; font-size:.85rem; }
  .pf-chain-side span { color:#a1a1aa; font-size:.82rem; line-height:1.55; display:block; }
  .pf-chain-mid {
    font-size: 1.7rem; text-align:center;
    background: linear-gradient(135deg, #84cc16, #84cc16);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
  }

  /* Paths — same card legibility treatment as threat cards. */
  .pf-paths {
    display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem; margin-top: 2rem;
  }
  .pf-path {
    padding: 1.7rem 1.7rem 1.5rem;
    border-radius: 18px;
    background: rgba(20,20,23,0.85);
    border: 1px solid rgba(132,204,22,0.22);
    backdrop-filter: blur(8px) saturate(1.18);
    -webkit-backdrop-filter: blur(8px) saturate(1.18);
    box-shadow: 0 6px 22px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
    display:flex; flex-direction:column;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .pf-path:hover {
    border-color: rgba(132,204,22,0.4);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .pf-path .pf-path-label {
    font-size:.7rem; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:#bef264; margin-bottom:.65rem;
  }
  .pf-path h4 {
    font-family:'Playfair Display',serif; font-size:1.32rem;
    color:#fafafa; margin: 0 0 .85rem;
  }
  .pf-path p { color:#a1a1aa; font-size:.92rem; line-height:1.62; flex-grow:1; }
  .pf-path-cta { margin-top:1.1rem; }

  /* Closing "Why us" panel — was yellow accent; now violet. */
  .pf-founder {
    margin: 4rem 0 0;
    padding: 1.8rem 2rem;
    background: rgba(20,20,23,0.78);
    border-left: 3px solid #84cc16;
    border-radius: 14px;
    backdrop-filter: blur(8px) saturate(1.18);
    -webkit-backdrop-filter: blur(8px) saturate(1.18);
    box-shadow: 0 6px 22px rgba(0,0,0,0.34);
  }
  .pf-founder p { color:#a1a1aa; font-size:.97rem; margin:0; line-height:1.68; }
  .pf-founder strong {
    color:#bef264; font-weight:700;
  }

  /* Hero figure — single image directly under the hero rather than one
     repeated per section. */
  .pf-hero-figure {
    max-width: 760px; margin: 1.75rem auto 0;
    border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(132,204,22,0.22);
    background:#0a0a0b;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  }
  .pf-hero-figure img { width:100%; height:auto; display:block; }

  /* Section figure — used sparingly. */
  .pf-figure {
    max-width: 720px; margin: 1.6rem auto 1.8rem;
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(132,204,22,0.18);
    background:#0a0a0b;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  }
  .pf-figure img { width:100%; height:auto; display:block; }

  @media (max-width: 600px) {
    .pf-page { padding: 2.5rem 1rem 4rem; }
    .pf-hero { padding: 2rem 0 2rem; }
    .pf-chain-arrows { grid-template-columns: 1fr; gap: .5rem; }
    .pf-chain-mid { transform: rotate(90deg); padding: .25rem 0; font-size: 1.3rem; }
    .pf-cta { width:100%; justify-content:center; }
  }