/* ══════════════════════════════════════════════════════════════════════════
   SYNDEO — inner pages. Loaded AFTER home.css; reuses its tokens + home.js.
   Editorial-kinetic language: page hero, drawn underline, product frames,
   feature splits, capability chips, pricing, comparison, FAQ, compliance.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── page hero ──────────────────────────────────────────────────────────── */
.phero{padding:clamp(124px,17vh,196px) 0 clamp(46px,7vh,84px);position:relative}
.phero .crumb{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding-bottom:24px;margin-bottom:clamp(30px,4.5vh,58px);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);opacity:0;animation:heroFade .8s var(--out) .05s both}
.phero .crumb b{color:var(--ink);font-weight:500}
.phero .crumb .sp{color:var(--ac)}
.phero .crumb .rt{margin-left:auto;color:var(--ink-3)}
.phero h1{font-family:var(--disp);font-weight:600;letter-spacing:-0.04em;line-height:0.95;font-size:clamp(46px,8.7vw,124px);max-width:15ch;
  opacity:0;transform:translateY(20px);animation:heroFade 1s var(--out) .12s both}
.phero .lead{max-width:56ch;font-size:clamp(18px,1.9vw,23px);line-height:1.5;color:var(--ink-2);margin-top:clamp(22px,3vh,34px);
  opacity:0;animation:heroFade .95s var(--out) .34s both}
.phero .pcta{margin-top:clamp(28px,4vh,42px);display:flex;gap:12px;align-items:center;flex-wrap:wrap;opacity:0;animation:heroFade .95s var(--out) .5s both}

/* drawn underline — reusable, draws on load */
.udraw{position:relative;white-space:nowrap}
.udraw svg{position:absolute;left:-1%;right:-1%;bottom:-.14em;width:102%;height:.3em;overflow:visible}
.udraw svg path{fill:none;stroke:var(--ac);stroke-width:5;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;animation:heroDraw 1.15s var(--out) .55s both}
@media (prefers-reduced-motion:reduce){
  .phero .crumb,.phero h1,.phero .lead,.phero .pcta{opacity:1!important;transform:none!important;animation:none!important}
  .udraw svg path{stroke-dashoffset:0!important;animation:none!important}
}

/* ── product shot frame ─────────────────────────────────────────────────── */
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:-9% -6%;z-index:0;background:radial-gradient(46% 54% at 52% 40%,rgba(79,70,229,.20),transparent 68%);filter:blur(22px);pointer-events:none}
.glow>.shot{position:relative;z-index:1}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 34px 82px -42px rgba(21,19,15,.5)}
.shot .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:var(--paper-3)}
.shot .bar .u{margin-left:12px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.shot img{width:100%;display:block}
.shot.dk{border-color:var(--blk-line);background:var(--blk-2);box-shadow:0 44px 110px -44px rgba(0,0,0,.75)}
.shot.dk .bar{background:#101015;border-color:var(--blk-line)}
.shot.dk .bar i{background:#2b2b33}
.shot.dk .bar .u{color:var(--blk-tx2)}

/* ── feature split ──────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(40px,6vw,90px);align-items:center}
.split.rev .scopy{order:2}
.scopy .label{margin-bottom:16px}
.scopy h2{font-family:var(--disp);font-weight:600;letter-spacing:-0.035em;line-height:1.02;font-size:clamp(30px,4.4vw,54px)}
.scopy>.lead{margin-top:18px;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--ink-2);max-width:46ch}

/* ── feature bullets ────────────────────────────────────────────────────── */
.flist{list-style:none;display:flex;flex-direction:column;margin-top:clamp(24px,3vh,34px)}
.flist li{display:flex;gap:15px;padding:18px 0;border-top:1px solid var(--line-2)}
.flist li:first-child{border-top:0;padding-top:0}
.flist .fi{width:34px;height:34px;border-radius:9px;background:var(--ac-soft);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.flist .fi svg{width:18px;height:18px;stroke-width:1.7;fill:none;stroke:currentColor}
.flist h4{font-family:var(--disp);font-weight:500;font-size:18px;letter-spacing:-0.02em}
.flist p{color:var(--ink-2);font-size:14.5px;line-height:1.5;margin-top:3px}
.act-blk .flist li{border-color:var(--blk-line)}
.act-blk .flist .fi{background:rgba(148,151,255,.14);color:var(--blk-ac)}
.act-blk .flist h4{color:#fff}
.act-blk .flist p{color:var(--blk-tx2)}
.act-blk .scopy>.lead{color:var(--blk-tx2)}

/* ── capability chips ───────────────────────────────────────────────────── */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cap{display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14px;font-weight:500;transition:border-color .25s,transform .3s var(--out)}
.cap:hover{border-color:var(--ac);transform:translateY(-3px)}
.cap .ci{width:30px;height:30px;border-radius:8px;background:var(--ac-soft);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cap .ci svg{width:17px;height:17px;stroke-width:1.7;fill:none;stroke:currentColor}

/* ── section head ───────────────────────────────────────────────────────── */
.shead{max-width:62ch}
.shead.center{margin:0 auto;text-align:center}
.shead h2{font-family:var(--disp);font-weight:600;letter-spacing:-0.035em;line-height:1.02;font-size:clamp(30px,5vw,58px)}
.shead>.lead{margin-top:16px;font-size:17px;line-height:1.55;color:var(--ink-2)}

/* ── pricing plans ──────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{border:1px solid var(--line);border-radius:16px;padding:clamp(26px,3vw,34px);background:#fff;display:flex;flex-direction:column;position:relative}
.plan.feat{border-color:var(--ac);box-shadow:0 34px 76px -44px rgba(79,70,229,.55)}
.plan .tag{position:absolute;top:-11px;left:clamp(26px,3vw,34px);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--ac);color:#fff;padding:4px 11px;border-radius:20px}
.plan .pname{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.plan .pprice{font-family:var(--disp);font-weight:600;letter-spacing:-0.04em;font-size:clamp(38px,4.4vw,54px);margin-top:14px;line-height:1}
.plan .pu{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-top:8px;min-height:1em}
.plan .pdesc{color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:16px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.plan ul{list-style:none;margin:20px 0 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.plan ul li{display:flex;gap:10px;font-size:14px;color:var(--ink);line-height:1.4}
.plan ul li svg{width:16px;height:16px;color:var(--ac);flex-shrink:0;margin-top:1px;stroke-width:2.4;fill:none;stroke:currentColor}
.plan .btn{width:100%;justify-content:center}
.plan.feat .btn{background:var(--ac);border-color:var(--ac);color:#fff}
.plan.feat .btn:hover{background:var(--ink);border-color:var(--ink)}

/* ── comparison table ───────────────────────────────────────────────────── */
.cmp-wrap{border-top:1px solid var(--line)}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp thead th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:500;text-align:center;padding:18px 14px;border-bottom:1px solid var(--line);vertical-align:bottom}
.cmp thead th:first-child{text-align:left}
.cmp thead th b{display:block;font-family:var(--disp);font-size:17px;color:var(--ink);letter-spacing:-0.02em;text-transform:none;margin-bottom:2px}
.cmp thead th.hl b{color:var(--ac)}
.cmp tbody th{text-align:left;font-weight:500;color:var(--ink);padding:14px 14px;border-bottom:1px solid var(--line-2)}
.cmp tbody td{text-align:center;padding:14px 14px;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-family:var(--mono);font-size:12.5px}
.cmp tbody td svg{width:17px;height:17px;color:var(--ac);margin:0 auto;stroke-width:2.4;fill:none;stroke:currentColor}
.cmp tbody td.hl{background:rgba(79,70,229,.045)}
.cmp thead th.hl{background:rgba(79,70,229,.045)}
.cmp tr.grp td{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:28px 14px 10px;border:0;text-align:left}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font-family:var(--disp);font-weight:500;font-size:clamp(18px,2.2vw,24px);letter-spacing:-0.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:22px;height:22px;flex-shrink:0;position:relative}
.faq summary .ic::before,.faq summary .ic::after{content:"";position:absolute;background:var(--ac);border-radius:2px;transition:transform .3s var(--out)}
.faq summary .ic::before{top:10px;left:1px;right:1px;height:2px}
.faq summary .ic::after{left:10px;top:1px;bottom:1px;width:2px}
.faq details[open] summary .ic::after{transform:scaleY(0)}
.faq .fa{padding:0 44px 26px 0;max-width:74ch;color:var(--ink-2);font-size:15.5px;line-height:1.6}

/* ── compliance badges ──────────────────────────────────────────────────── */
.comp{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.comp .cb{border:1px solid var(--line);border-radius:14px;padding:28px 22px;background:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px}
.comp .cb .ci{width:46px;height:46px;border-radius:12px;background:var(--ac-soft);color:var(--ac);display:flex;align-items:center;justify-content:center}
.comp .cb .ci svg{width:24px;height:24px;stroke-width:1.6;fill:none;stroke:currentColor}
.comp .cb h4{font-family:var(--disp);font-weight:600;font-size:16px}
.comp .cb p{font-size:12.5px;color:var(--ink-2);line-height:1.45}

/* ── misc helpers ───────────────────────────────────────────────────────── */
.mx-auto{margin-left:auto;margin-right:auto}
.center{text-align:center}
.divider{border:0;border-top:1px solid var(--line)}
.act-blk .divider{border-color:var(--blk-line)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:1fr;gap:40px}
  .split.rev .scopy{order:0}
  .caps{grid-template-columns:repeat(3,1fr)}
  .plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .comp{grid-template-columns:repeat(2,1fr)}
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp{min-width:640px}
}
@media (max-width:560px){
  .caps{grid-template-columns:1fr 1fr}
  .comp{grid-template-columns:1fr}
}