/* OptiWolf marketing-site — pillar pages (/ab-testing, /personalization, /popups).
   One stylesheet for all three (they share the skeleton in server/pages/pillars.js).
   Shared chrome in site.css; the animated renders in renders.css. */

/* hero */
.p-hero{position:relative;overflow:hidden;padding:76px 0 84px;background:
  radial-gradient(900px 460px at 80% 8%,rgba(47,217,194,.13),transparent 60%),
  radial-gradient(700px 480px at 4% 92%,rgba(27,79,120,.09),transparent 55%),var(--page);}
.p-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
@media(max-width:880px){.p-hero-grid{grid-template-columns:1fr;}}
.p-hero h1{font-size:clamp(2.2rem,4.4vw,3.1rem);margin-top:.5rem;}
.p-hero h1 em{display:block;font-size:.78em;font-style:italic;color:var(--navy-500);line-height:1.14;margin-top:.06em;}
.p-hero .lead{font-size:1.13rem;color:var(--ink-soft);margin:18px 0 28px;max-width:560px;}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero-points{list-style:none;padding:0;margin:30px 0 0;display:flex;gap:22px;flex-wrap:wrap;}
.hero-points li{position:relative;padding-left:24px;font-size:.93rem;color:var(--ink-soft);font-weight:500;}
.hero-points li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;border:2px solid var(--teal-600);border-top:0;border-right:0;transform:rotate(-45deg);}
.p-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:18px;}
.p-hero-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(440px 340px at 62% 42%,rgba(47,217,194,.20),transparent 66%);}
.p-hero-visual>*{position:relative;}

/* sections */
.sec{padding:80px 0;}
.sec-head{max-width:720px;margin:0 auto 46px;text-align:center;}
.caption{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--teal-700);}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin:.4rem 0 .6rem;}
.sec-head p{color:var(--muted);font-size:1.06rem;margin:0;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:1000px){.grid4{grid-template-columns:1fr 1fr;}}
@media(max-width:860px){.grid3{grid-template-columns:1fr;}}
@media(max-width:600px){.grid4{grid-template-columns:1fr;}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--sh-sm);transition:.2s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--navy-200);}
.card h4{font-size:1.16rem;margin-bottom:.5rem;}
.card p{color:var(--muted);margin:0;font-size:.96rem;}
.card p code{font-family:var(--ow-font-mono);font-size:.85em;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:.05em .3em;color:var(--navy-800);}
.step-n{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--teal-700);background:var(--navy-50);border:1px solid var(--border);width:38px;height:38px;border-radius:10px;display:grid;place-content:center;margin-bottom:14px;}
.card.faq h4{font-size:1.08rem;}

/* dark differentiator band */
.dark-band{background:var(--grad-navy);}
.dark-band .caption{color:var(--teal-400);}
.dark-band h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.3rem);margin:.45rem 0 .8rem;}
.dark-band p{color:var(--navy-200);font-size:1.04rem;margin:0 0 20px;}
.dark-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.dark-grid>*,.p-hero-grid>*{min-width:0;}
.dark-grid.solo{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center;}
.dark-grid.solo .ticks{display:inline-block;text-align:left;}
@media(max-width:880px){.dark-grid{grid-template-columns:1fr;gap:30px;}}
.ticks{list-style:none;padding:0;margin:0;}
.ticks li{position:relative;padding:5px 0 5px 26px;color:var(--ink-soft);font-size:.97rem;}
.ticks li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:7px;border:2px solid var(--teal-600);border-top:0;border-right:0;transform:rotate(-45deg);}
.ticks.light li{color:var(--navy-100);}
.ticks.light li::before{border-color:var(--teal-400);}
.render-panel.dark::before{background:radial-gradient(420px 300px at 55% 45%,rgba(47,217,194,.12),transparent 68%);}

/* cross-pillar cards */
.x-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto;}
@media(max-width:760px){.x-grid{grid-template-columns:1fr;}}
.x-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;box-shadow:var(--sh-sm);transition:.2s;}
.x-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--teal-500);}
.x-card h4{font-size:1.2rem;margin:.45rem 0 .4rem;}
.x-card p{color:var(--muted);margin:0 0 12px;font-size:.95rem;}
.pillar-k{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--teal-700);}
.arrow-link{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--navy-800);font-size:.95rem;}
.arrow-link::after{content:"\2192";transition:transform .18s;}
.x-card:hover .arrow-link{color:var(--teal-700);}
.x-card:hover .arrow-link::after{transform:translateX(4px);}

/* cta band */
.cta-band .box{background:var(--grad-navy);border-radius:24px;padding:56px;text-align:center;box-shadow:var(--sh-lg);position:relative;overflow:hidden;}
.cta-band .box::after{content:"";position:absolute;left:-60px;bottom:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(47,217,194,.22),transparent 65%);}
.cta-band h2{color:#fff;font-size:2.1rem;position:relative;}
.cta-band p{color:var(--navy-200);position:relative;max-width:560px;margin:12px auto 26px;}
.cta-band .row{position:relative;justify-content:center;}
.btn-ghost-cta{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3);}
.btn-ghost-cta:hover{background:rgba(255,255,255,.1);}