/* ============================================================
   Product page styles  ·  accent via body[style="--accent:…"]
   ============================================================ */
.php{position:relative;overflow:hidden;padding:64px 0 84px;}
.php .split{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:center;position:relative;z-index:1;}
.php .eyebrow{color:var(--accent,var(--primary-700));}
.php .eyebrow::before{background:var(--bulb);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,var(--primary)) 16%,transparent);}
.php .back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:20px;transition:color .15s;}
.php .back:hover{color:var(--accent,var(--primary-700));}
.php .back svg{width:16px;height:16px;}
.php h1{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.03em;}
.php .lede{margin-top:20px;}
.php .php-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px;}
.php .btn-accent{background:var(--accent,var(--primary));color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--accent,var(--primary)) 36%,transparent);}
.php .btn-accent:hover{filter:brightness(.94);transform:translateY(-1px);}
.php .icon-badge{width:64px;height:64px;border-radius:17px;box-shadow:var(--shadow);margin-bottom:22px;}

.php-visual{position:relative;max-width:380px;width:100%;margin-left:auto;}
.php-visual .appwin{border-radius:14px;}
.php-visual .appwin .bar{height:32px;}
.php-visual .appwin .screen img{width:100%;display:block;}
.php-visual .quiz-mock{
  background:linear-gradient(140deg,#efe9fe,#f6ecff 60%,#fdf2ff);
  border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:30px;position:relative;overflow:hidden;
}
.qm-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.qm-row .rad{width:20px;height:20px;border-radius:50%;border:2.4px solid #d6c8f5;flex:none;}
.qm-row.correct .rad{border:none;background:var(--green);display:grid;place-items:center;}
.qm-row.correct .rad::after{content:"";width:9px;height:5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg) translate(0,-1px);}
.qm-row .bar{height:9px;border-radius:5px;background:#e7e2f4;flex:1;}
.qm-row.correct .bar{background:#bfe6cd;}
.qm-q{font-weight:800;font-size:17px;margin-bottom:16px;color:#3a2b66;display:flex;align-items:center;gap:10px;}
.qm-spark{position:absolute;right:22px;top:20px;width:40px;height:40px;}

.uc-band{background:var(--bg-soft);border-radius:var(--r-2xl);padding:48px 44px;text-align:center;}
.uc-band .eyebrow{justify-content:center;color:var(--accent,var(--primary-700));}
.uc-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px;}
.uc-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-weight:700;font-size:14.5px;color:var(--ink-2);box-shadow:var(--shadow-sm);}

.feat.accent .fi{background:color-mix(in srgb,var(--accent,var(--primary)) 12%,#fff);}
.feat.accent .fi svg{stroke:var(--accent,var(--primary-700));}

/* feature explanation image (replaceable placeholder) */
.feat .feat-shot{
  display:block;width:100%;aspect-ratio:16/10;object-fit:contain;
  border-radius:14px;margin-bottom:20px;border:1px solid var(--line);
  background:var(--bg-soft);padding:10px;
}
.step.accent .num{background:var(--accent,var(--primary));box-shadow:0 6px 14px color-mix(in srgb,var(--accent,var(--primary)) 34%,transparent);}
.cta-accent{background:linear-gradient(135deg,var(--accent,var(--primary)),color-mix(in srgb,var(--accent,var(--primary)) 55%,#b08cf0)) !important;}

/* ============ Pricing ============ */
.sec-head .sec-sub{max-width:560px;margin:14px auto 0;color:var(--muted);font-size:16px;line-height:1.55;}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;margin-top:44px;}
.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px 30px 30px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative;
  transition:transform .18s,box-shadow .18s;
}
.price-card.featured{border:1.5px solid var(--accent,var(--primary));box-shadow:var(--shadow-lg);transform:translateY(-8px);}
.pc-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent,var(--primary));color:#fff;font-size:12px;font-weight:800;letter-spacing:.05em;padding:5px 15px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-sm);}
.pc-name{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,var(--primary-700));}
.pc-price{margin:16px 0 3px;display:flex;align-items:baseline;gap:7px;}
.pc-price .amt{font-size:46px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;}
.pc-price .per{font-size:15px;color:var(--muted);font-weight:600;}
.pc-note{font-size:13.5px;color:var(--muted);min-height:20px;margin-bottom:8px;}
.pc-feats{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 26px;padding:22px 0 2px;border-top:1px solid var(--line);flex:1;}
.pc-feats li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--ink-2);line-height:1.4;}
.pc-feats li svg{width:19px;height:19px;flex:none;color:var(--accent,var(--primary));margin-top:1px;}
.price-card .btn{width:100%;justify-content:center;}
.price-foot{text-align:center;color:var(--muted);font-size:13px;margin-top:26px;}

.soon-btn{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:14.5px;
  color:#8a6d1f;background:#fdf6e3;
  border:1.5px dashed #e6c873;
  border-radius:999px;padding:12px 22px;letter-spacing:.01em;cursor:default;
}
.soon-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bulb,#f5b800);box-shadow:0 0 0 4px rgba(245,184,0,.20);}
@media (max-width:900px){
  .price-grid{grid-template-columns:1fr;max-width:420px;margin:44px auto 0;}
  .price-card.featured{transform:none;}
}

@media (max-width:820px){
  .php .split{grid-template-columns:1fr;gap:36px;}
  .php-visual{order:-1;max-width:320px;margin:0;}
}

/* ============ Light Form Suite ============ */
.suite-badges{display:flex;gap:12px;margin-bottom:22px;}
.suite-badges img{width:58px;height:58px;border-radius:15px;box-shadow:var(--shadow);}

.suite-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.suite-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:30px 30px 26px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.suite-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent,var(--primary)) 40%,var(--line));}
.suite-card img{width:54px;height:54px;border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:18px;}
.suite-card .p-tag{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--accent,var(--primary-700));margin-bottom:7px;}
.suite-card h3{font-size:22px;letter-spacing:-.02em;margin-bottom:9px;}
.suite-card p{color:var(--muted);line-height:1.55;font-size:15px;}
.suite-card .suite-go{
  margin-top:18px;font-weight:800;font-size:14.5px;color:var(--accent,var(--primary-700));
  display:inline-flex;align-items:center;gap:7px;
}
.suite-card .suite-go::after{content:"→";transition:transform .18s;}
.suite-card:hover .suite-go::after{transform:translateX(4px);}

/* product detail lede block inside the suite */
.prod-lede{margin-bottom:48px;}
.prod-lede.split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;}
.prod-lede .icon-badge{width:60px;height:60px;border-radius:16px;box-shadow:var(--shadow);margin-bottom:18px;}
.prod-lede .eyebrow{color:var(--accent,var(--primary-700));}
.prod-lede .eyebrow::before{background:var(--bulb);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,var(--primary)) 16%,transparent);}
#form .h-sec, #ranger .h-sec{color:var(--ink);}

@media (max-width:980px){.suite-cards{grid-template-columns:1fr;}}
@media (max-width:820px){
  .prod-lede.split{grid-template-columns:1fr;gap:32px;}
  .prod-lede .php-visual{order:-1;max-width:320px;margin:0;}
}