/* ==========================================================================
   Flipick — Page-Specific Components
   components.css: CSS for components unique to each page
   ========================================================================== */

/* =========================================================================
   HOME PAGE COMPONENTS
   ========================================================================= */

/* Spine (Create / Distribute / Prove three-panel layout) */
.spine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; }
.spine .s { padding: 30px; border-right: 1px solid var(--line); }
.spine .s:last-child { border-right: none; }
.spine .k { font: 800 13px var(--disp); color: var(--brand); letter-spacing: .02em; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.spine .k i { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; }
.spine h3 { font: 700 18px var(--disp); margin-bottom: 7px; }
.spine p { font: 400 13.5px var(--body); color: var(--ink-soft); line-height: 1.55; }

/* How-it-works Feature Strips */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; padding: 54px 0; border-bottom: 1px solid var(--line); }
.feat:last-of-type { border-bottom: none; }
.feat.rev { direction: rtl; }
.feat.rev > * { direction: ltr; }
.feat .flagtag { font: 700 11px var(--body); letter-spacing: .16em; color: var(--brand); background: var(--brand-soft); padding: 7px 12px; border-radius: 999px; display: inline-block; margin-bottom: 16px; }
.feat h3 { font: 700 clamp(22px, 2.5vw, 28px) var(--disp); margin-bottom: 12px; }
.feat .leadp { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 18px; }
.feat ul.bul { list-style: none; margin: 0; padding: 0; }
.feat ul.bul li { font: 500 14px var(--body); color: var(--ink-soft); padding: 7px 0 7px 26px; position: relative; }
.feat ul.bul li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.feat-copy { max-width: 480px; }
.feat-copy h3 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; margin: 14px 0 16px; }
.feat-copy p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.feat-copy .list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.feat-copy .list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; color: var(--ink-soft); }
.feat-copy .list li::before { content: "✓"; font-weight: 800; color: var(--teal); font-size: 13px; margin-top: 3px; flex-shrink: 0; }

/* Flagship Flags Grid */
.flags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flag { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.flag .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font: 800 15px var(--disp); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.flag b { display: block; font: 700 15.5px var(--disp); margin-bottom: 6px; }
.flag span { font: 400 12.5px var(--body); color: var(--ink-soft); line-height: 1.5; }

/* Use Case Cards (home page 3-col) */
.ucards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ucard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: all .22s; }
.ucard:hover { border-color: var(--brand-mid); box-shadow: 0 12px 36px rgba(68,76,236,.10); transform: translateY(-3px); }
.ucard .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.ucard h4 { font: 700 16px var(--disp); margin-bottom: 8px; }
.ucard p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.ucd { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; transition: transform .2s, box-shadow .2s; }
.ucd:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,18,43,.1); }
.ucd .tg { font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.ucd h4 { font: 700 17px var(--disp); margin-bottom: 8px; }
.ucd p { font: 400 13px var(--body); color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.ucd a { font: 700 13px var(--body); color: var(--brand); }
.ucd a:hover { text-decoration: underline; }

/* Proof Stats Grid (inside slim-band on home page) */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; overflow: hidden; }
.proof .st { padding: 28px; text-align: center; border-right: 1px solid rgba(255,255,255,.14); }
.proof .st:last-child { border-right: none; }
.proof .st b { display: block; font: 800 30px var(--disp); color: #fff; margin-bottom: 5px; }
.proof .st b em { font-style: normal; color: var(--brand-mid); }
.proof .st span { font: 600 12px var(--body); color: #C8C9E2; }

/* Slim Band (dark — home page distribute & prove) */
.slim-band { background: var(--night); border-radius: 28px; padding: 50px; position: relative; overflow: hidden; }
.slim-band::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(68,76,236,.3), transparent 60%); top: -240px; right: -160px; pointer-events: none; }
.slim-head { position: relative; text-align: center; margin-bottom: 28px; }
.slim-head h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin-top: 10px; }

/* Pricing Teaser (home page — centered single column) */
.pteaser { text-align: center; max-width: 680px; margin: 0 auto; }
.pteaser h2 { font-size: clamp(26px, 3.4vw, 40px); margin-top: 10px; }
.pteaser .credit { display: inline-flex; align-items: center; gap: 10px; background: var(--brand-soft); border: 1px solid var(--brand-mid); border-radius: 14px; padding: 12px 20px; margin: 14px 0 22px; }
.pteaser .credit b { font: 800 22px var(--disp); color: var(--brand); }
.pteaser .credit span { font: 600 13px var(--body); color: var(--ink-soft); }
.pteaser p { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }
.pteaser-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Credit pricing summary rows */
.credit-rows { display: flex; flex-direction: column; gap: 10px; }
.credit-row { display: flex; align-items: center; gap: 12px; font: 500 14px var(--body); }
.credit-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

/* =========================================================================
   HOW IT WORKS PAGE COMPONENTS
   ========================================================================= */

/* Horizontal 9-stage pipeline rail */
.rail { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; position: relative; margin-top: 8px; }
.rstage { text-align: center; padding: 0 4px; position: relative; }
.rstage .n { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1.5px solid var(--brand); color: var(--brand); font: 800 14px var(--disp); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; position: relative; z-index: 2; }
.rstage b { font: 700 12px var(--disp); color: var(--ink); display: block; line-height: 1.2; }
.railline { position: absolute; top: 21px; left: 6%; right: 6%; height: 1.5px; background: var(--brand); opacity: .32; z-index: 1; }

/* Product label pill */
.plabel { font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 6px 14px; border-radius: 999px; display: inline-block; margin-bottom: 14px; }

/* Deep Dive Navigation */
.ddnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ddnav a { font: 700 12.5px var(--body); color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-mid); border-radius: 999px; padding: 8px 15px; transition: all .2s; }
.ddnav a:hover { background: var(--brand); color: #fff; }

/* Product screenshot images */
.feat-img { width: 100%; display: block; border-radius: 16px; box-shadow: 0 20px 54px rgba(17,18,43,.13); }

/* Screenshot frame */
.shot { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 54px rgba(17,18,43,.13); }
.shot .chrome { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #F1F1F5; border-bottom: 1px solid var(--line); }
.shot .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #D2D2DA; display: block; }
.shot .chrome i.r { background: #E5736B; }
.shot .chrome i.y { background: #E7B14C; }
.shot .chrome i.g { background: #5BBE99; }
.shot .chrome .ttl { font: 600 11.5px var(--body); color: var(--ink-soft); margin-left: 8px; }
.shot > .canvas { padding: 15px; background: linear-gradient(180deg, #FCFCFE, #F4F5F9); min-height: 236px; }
.shotcap { font: 500 11px var(--body); color: var(--ink-soft); font-style: italic; text-align: center; margin-top: 10px; }

/* Panels inside shot canvas */
.shot .pnl { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.shot .ph { font: 700 9.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px; }

/* Screenplay Builder 2-col canvas */
.canvas.sb { display: grid; grid-template-columns: 1fr 1.05fr; gap: 12px; }

/* Chat bubbles inside shot (override base .bub pill style) */
.shot .bub { display: block; width: fit-content; max-width: 92%; font: 500 11px var(--body); border-radius: 9px; padding: 8px 10px; margin-bottom: 7px; line-height: 1.35; border: none; cursor: default; gap: 0; }
.shot .bub.ai { background: #EEF0FF; color: #2B2F7A; }
.shot .bub.ai:hover { background: #EEF0FF; color: #2B2F7A; transform: none; }
.shot .bub.me { background: #0B0C20; color: #EDEDF6; margin-left: auto; }
.shot .bub.me:hover { background: #0B0C20; color: #EDEDF6; transform: none; }

/* Tag chips inside shot canvas */
.shot .tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shot .tagrow span { font: 700 9.5px var(--body); color: var(--brand); background: var(--brand-soft); border-radius: 6px; padding: 4px 8px; }

/* Scene cards inside shot */
.shot .scn { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 7px; }
.shot .scn b { font: 700 11px var(--disp); color: var(--ink); display: block; }

/* Shot chips (small labels on scene cards) */
.shotchips { display: flex; gap: 5px; margin-top: 6px; }
.shotchips span { font: 700 9px var(--body); color: var(--ink-soft); background: #F1F1F6; border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; }

/* Beats row inside shot */
.shot .beats { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.shot .beats .grid9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 62px; flex-shrink: 0; }
.shot .beats .grid9 i { display: block; aspect-ratio: 1; background: linear-gradient(135deg, #9CA1F6, #444CEC); border-radius: 2px; }
.shot .beats .grid9 i.reg { background: linear-gradient(135deg, #F5A623, #C2571B); }
.shot .beats .bl { font: 700 10px var(--body); color: var(--ink); }
.shot .beats .bl span { display: block; font: 500 9.5px var(--body); color: var(--ink-soft); }

/* Video Builder 2-col canvas */
.canvas.vb { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vbstrip { display: flex; gap: 5px; margin-bottom: 10px; }
.vbstrip .vf { flex: 1; height: 34px; border-radius: 4px; background: linear-gradient(140deg, #5A60EE, #2A2F9E); opacity: .5; }
.vbstrip .vf.on { opacity: 1; outline: 2px solid var(--brand); outline-offset: 1px; }
.votrack { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.votrack span { font: 700 9px var(--body); color: var(--ink-soft); }
.votrack i { flex: 1; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #9CA1F6 0 2px, transparent 2px 5px); opacity: .6; }

/* Asset Library small cards (in shot canvas) */
.shot-alib { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.acard-s { background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.acard-s .th { aspect-ratio: 4/3; background: linear-gradient(140deg, #5A60EE, #2A2F9E); }
.acard-s.p .th { background: linear-gradient(140deg, #F5A623, #C2571B); }
.acard-s.c .th { background: linear-gradient(140deg, #19B68C, #0C6B52); }
.acard-s.l .th { background: linear-gradient(140deg, #7A5BE0, #3A2E7E); }
.acard-s .ac { padding: 7px 8px; }
.acard-s .ac b { font: 700 10px var(--disp); color: var(--ink); display: block; }
.acard-s .ac span { font: 600 8.5px var(--body); color: var(--brand); }

/* Ingredients 2-col canvas */
.canvas.ingr-canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ichips-s { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ichip-s { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.ichip-s .sw { width: 18px; height: 18px; border-radius: 4px; background: var(--brand-soft); flex: none; }
.ichip-s.bg .sw { background: linear-gradient(135deg, #9CA1F6, #444CEC); }
.ichip-s.pr .sw { background: linear-gradient(135deg, #F5A623, #C2571B); }
.ichip-s.hd .sw { background: #0B0C20; }
.ichip-s span { font: 600 9.5px var(--body); color: var(--ink); }
.slots-s { display: flex; flex-direction: column; gap: 6px; }
.slot-s { display: flex; justify-content: space-between; align-items: center; border: 1px dashed var(--brand-mid); border-radius: 7px; padding: 7px 9px; background: var(--brand-soft); }
.slot-s b { font: 700 9.5px var(--body); color: var(--ink); }
.slot-s span { font: 600 9px var(--body); color: var(--brand); }

/* Overlays asymmetric canvas */
.canvas.ovl-canvas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.ovl-frame { position: relative; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: linear-gradient(150deg, #3a2f6e, #0c0a1f); }
.ovl-frame .lg { position: absolute; top: 8px; right: 8px; width: 30px; height: 18px; background: #fff; border-radius: 4px; opacity: .95; }
.ovl-frame .pricetag { position: absolute; top: 8px; left: 8px; background: var(--amber); color: #2B1B00; font: 800 11px var(--body); padding: 5px 9px; border-radius: 6px; }
.ovl-frame .ctap { position: absolute; left: 8px; bottom: 8px; background: var(--brand); color: #fff; font: 700 9.5px var(--body); padding: 5px 9px; border-radius: 6px; }
.ovl-panel { position: absolute; right: 8px; bottom: 8px; width: 42%; height: 30%; background: rgba(255,255,255,.86); border-radius: 6px; }
.ovl-frame .cap { position: absolute; left: 50%; bottom: 38%; transform: translateX(-50%); font: 700 8px var(--body); letter-spacing: .1em; color: #fff; opacity: .8; white-space: nowrap; }
.ovl-fmt { display: flex; gap: 6px; margin-top: 8px; }
.ovl-fmt span { font: 700 9px var(--body); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.ovl-fmt span.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.vars-list { margin-top: 8px; }
.vars-list span { display: inline-block; font: 700 9px var(--body); color: #155277; background: #E4F3F8; border: 1px solid #BFE3ED; border-radius: 5px; padding: 3px 7px; margin: 0 5px 5px 0; }
.xls { margin-top: 8px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.xls .xr { display: grid; grid-template-columns: 1fr 1fr 1fr; font: 600 8.5px var(--body); }
.xls .xr.h { background: #0B0C20; color: #fff; }
.xls .xr div { padding: 5px 7px; border-right: 1px solid var(--line); }
.xls .xr div:last-child { border-right: none; }
.xls .xr.h div { border-color: rgba(255,255,255,.2); }
.xls .xr:not(.h):nth-child(odd) { background: #FAFAFC; }

/* Analytics tiles in shot */
.an-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.antile-s { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.antile-s b { font: 800 22px var(--disp); color: var(--brand); display: block; }
.antile-s b em { font-style: normal; color: var(--ink); font-size: 14px; }
.antile-s span { font: 600 9.5px var(--body); color: var(--ink-soft); }
.anbars-s { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; height: 70px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.anbars-s i { flex: 1; background: linear-gradient(180deg, #9CA1F6, #444CEC); border-radius: 3px 3px 0 0; display: block; }

/* Small footnote text */
.note { font: 500 12px var(--body); color: var(--ink-soft); font-style: italic; text-align: center; margin-top: 18px; }

/* =========================================================================
   PRICING PAGE COMPONENTS
   ========================================================================= */

/* Breadcrumb (sits on dark hero) */
.crumb { font: 600 12px var(--body); letter-spacing: .06em; color: #A9AACB; margin-bottom: 18px; position: relative; }
.crumb b { color: var(--brand-mid); font-weight: 700; }

/* Credit model definition */
.credit-def { display: inline-flex; align-items: baseline; gap: 10px; background: var(--brand-soft); border: 1px solid var(--brand-mid); border-radius: 14px; padding: 12px 20px; margin-top: 6px; }
.credit-def b { font: 800 22px var(--disp); color: var(--brand); }
.credit-def span { font: 600 13px var(--body); color: var(--ink-soft); }
.credit-def small { font: 500 11px var(--body); color: var(--ink-soft); }

/* Product split */
.prods { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.pcard .tag { font: 700 11px var(--body); letter-spacing: .12em; color: var(--brand); background: var(--brand-soft); padding: 6px 12px; border-radius: 999px; display: inline-block; margin-bottom: 14px; }
.pcard h3 { font: 700 22px var(--disp); margin-bottom: 6px; }
.pcard .unit { font: 600 13px var(--body); color: var(--ink-soft); margin-bottom: 18px; }
.pcard .base { background: #FAFAF8; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font: 500 13px var(--body); color: var(--ink-soft); display: flex; justify-content: space-between; }
.pcard .base b { color: var(--ink); font-weight: 700; white-space: nowrap; flex-shrink: 0; margin-left: 8px; }
.pcard-note { font: 500 12.5px var(--body); color: var(--ink-soft); margin-top: 14px; font-style: italic; }

/* Table rows */
.trow { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--line); font: 500 14px var(--body); color: var(--ink-soft); }
.trow:last-of-type { border-bottom: none; }
.trow b { font: 700 14px var(--body); color: var(--ink); }
.trow.hot { color: var(--ink); }
.trow.hot .pill { font: 700 10px var(--body); letter-spacing: .06em; color: var(--brand); background: var(--brand-soft); padding: 3px 8px; border-radius: 999px; margin-left: 8px; text-transform: uppercase; }

/* Calculator */
.calc-wrap { background: var(--night); border-radius: 28px; padding: 48px; position: relative; overflow: hidden; }
.calc-wrap::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(68,76,236,.32), transparent 62%); top: -260px; right: -180px; }
.calc-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; position: relative; }
.ctrl { margin-bottom: 24px; }
.ctrl .clab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ctrl .clab span { font: 700 13px var(--body); color: #fff; }
.ctrl .clab b { font: 800 16px var(--disp); color: var(--brand-mid); }
.ctrl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 99px; background: rgba(255,255,255,.18); outline: none; cursor: pointer; }
.ctrl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.ctrl input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); cursor: pointer; }
.ctrl .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.ctrl .seg button { font: 600 12px var(--body); color: #C8C9E2; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 13px; cursor: pointer; transition: all .15s; }
.ctrl .seg button:hover { border-color: var(--brand-mid); }
.ctrl .seg button.on, .ctrl .seg button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.result { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 28px; backdrop-filter: blur(6px); }
.result .rrow { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.16); font: 500 14px var(--body); color: #C8C9E2; }
.result .rrow b { font: 700 14px var(--body); color: #fff; }
.result .rtotal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; }
.result .rtotal span { font: 700 12px var(--body); letter-spacing: .1em; color: var(--brand-mid); text-transform: uppercase; }
.result .rtotal b { font: 800 34px var(--disp); color: #fff; }
.result .rupee { text-align: right; font: 600 13px var(--body); color: var(--brand-mid); margin-top: 4px; }
.result .rnote { font: 500 11px var(--body); color: #8A8BB0; margin-top: 14px; font-style: italic; }

/* Enterprise */
.ent { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 40px; }
.ent h3 { font: 700 26px var(--disp); margin-bottom: 12px; }
.ent p { font: 400 15px var(--body); color: var(--ink-soft); margin-bottom: 18px; }
.ent ul { list-style: none; margin: 0 0 22px; padding: 0; }
.ent li { font: 500 14px var(--body); color: var(--ink-soft); padding: 6px 0 6px 26px; position: relative; }
.ent li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.ent .big { text-align: center; border-left: 1px solid var(--line); padding-left: 40px; }
.ent .big b { display: block; font: 800 36px var(--disp); color: var(--brand); margin-bottom: 8px; }
.ent .big span { font: 500 15px var(--body); color: var(--ink-soft); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { font: 700 16px var(--disp); color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 22px var(--body); color: var(--brand); transition: transform .2s; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p, .faq .faq-body { font: 400 14.5px var(--body); color: var(--ink-soft); margin-top: 12px; line-height: 1.55; }

/* =========================================================================
   SOLUTIONS PAGE COMPONENTS
   ========================================================================= */

/* Quick Ways nav (in-page anchor nav — sits on dark hero background) */
.ways { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ways a { font: 600 13px var(--body); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 9px 16px; transition: all .2s; }
.ways a:hover { background: rgba(255,255,255,.16); }

/* Team Grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; transition: transform .2s, box-shadow .2s; }
.team:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,18,43,.1); }
.team .role { font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.team h4 { font: 700 18px var(--disp); margin-bottom: 8px; line-height: 1.2; }
.team p { font: 400 13px var(--body); color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.team .makes { font: 600 11.5px var(--body); color: var(--ink-soft); }

/* Content Type Grid */
.ct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ct { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; transition: all .22s; }
.ct:hover { border-color: var(--brand-mid); transform: translateY(-4px); box-shadow: 0 14px 40px rgba(68,76,236,.10); }
.ct .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font: 800 15px var(--disp); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ct b { display: block; font: 700 16px var(--disp); margin-bottom: 6px; }
.ct span { font: 400 12.5px var(--body); color: var(--ink-soft); line-height: 1.5; }

/* Industry List */
.ind-list { border-top: 1px solid var(--line); }
.ind { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 20px; padding: 20px 6px; border-bottom: 1px solid var(--line); }
.ind .nm { display: flex; align-items: center; gap: 14px; }
.ind .nm .dot { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font: 800 12px var(--disp); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ind .nm b { font: 700 16.5px var(--disp); color: var(--ink); }
.ind p { font: 400 13.5px var(--body); color: var(--ink-soft); }

/* Note connector between hero and product cards */
.sol-connector { padding: 20px 0 10px; }
.sol-connector-note { font: 400 14.5px/1.7 var(--body); color: var(--ink-soft); max-width: 820px; border-left: 3px solid var(--line); padding-left: 16px; }
.sol-connector-note strong { color: var(--ink); font-weight: 700; }

/* Solution split card layout (text + image side-by-side) */
.fcard.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; padding: 30px 32px; }
.fcard.split .fcard-txt h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin: 8px 0 10px; letter-spacing: -.02em; }
.fcard.split .fcard-txt > p { font: 400 15px var(--body); color: var(--ink-soft); line-height: 1.65; margin: 0 0 14px; }
.fcard.split .fcard-txt ul { margin: 0 0 18px; padding-left: 18px; }
.fcard.split .fcard-txt li { font: 400 14.5px var(--body); color: var(--ink-soft); line-height: 1.65; margin-bottom: 8px; }
.fcard.split.rev .fcard-txt { grid-column: 2; grid-row: 1; }
.fcard.split.rev .fcard-media { grid-column: 1; grid-row: 1; }

/* Solution card image wrapper — matches .lp-feat-img / .feat-img pattern on other pages */
.sol-img-wrap { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 54px rgba(17,18,43,.13); border: 1px solid var(--line); line-height: 0; background: linear-gradient(150deg, var(--brand-soft) 0%, #e8eaff 100%); }
.sol-img-wrap img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* Solution page white card — wraps both the 2-col grid and the logostrip */
.sol-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px; box-shadow: 0 10px 30px rgba(20,20,60,.05); }
.sol-card > .fcard.split { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }
.sol-card > .logostrip { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; margin-bottom: 0; }

/* Logo strip beneath product CTAs */
.logostrip { margin-top: 22px; margin-bottom: 22px;}
.logostrip .lbl { display: block; font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.logorow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.logoslot { height: 56px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.logoslot img { max-height: 44px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.logohint { font: italic 400 11px var(--body); color: var(--ink-soft); margin-top: 9px; }

/* Logo strip — large variant (hero strips on product pages) */
.logostrip-lg .logorow { grid-template-columns: repeat(5, 1fr); }
.logostrip-lg .logoslot { height: 60px; }
.logostrip-lg .logoslot img { max-height: 42px; }

/* Logo strip — 5-column variant (solutions page PPT strip) */
.logorow-5 { grid-template-columns: repeat(5, 1fr); }

/* =========================================================================
   COMPANY PAGE COMPONENTS
   ========================================================================= */

/* Lede (body paragraphs container) */
.lede { max-width: 820px; margin-bottom: 10px; }
.lede p { font: 400 17px/1.6 var(--body); color: var(--ink-soft); margin-bottom: 16px; }
.lede p b { color: var(--ink); font-weight: 700; }
.story-meta { font: 500 13.5px var(--body); color: var(--ink-soft); margin-top: 18px; line-height: 1.7; }
.story-meta b { color: var(--ink); }

/* Create → Distribute → Prove thread */
.thread { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: 6px; }
.thread .node { display: flex; align-items: center; gap: 12px; }
.thread .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--brand); display: block; }
.thread .lbl { font: 700 16px var(--disp); color: var(--ink); }
.thread .seg { width: 48px; height: 2px; background: var(--brand-mid); margin: 0 12px; opacity: .5; display: block; }

/* Milestone timeline */
.tl-head { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 18px; }
.timeline { max-width: 760px; margin-top: 6px; }
.tl { display: grid; grid-template-columns: 92px 1fr; gap: 0; }
.tl .yr { text-align: right; padding-right: 24px; font: 800 15px var(--disp); color: var(--brand); padding-top: 0; margin-top: -2px;}
.tl .bd { position: relative; padding: 0 0 26px 30px; border-left: 2px solid var(--line); }
.tl:last-child .bd { padding-bottom: 0; }
.tl .bd::before { content: ""; position: absolute; left: -8px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.tl.now .bd::before { border-color: var(--teal); }
.tl.now .yr { color: var(--teal); }
.tl .bd h4 { font: 700 15.5px var(--disp); color: var(--ink); margin-bottom: 4px; }
.tl .bd p { font: 400 13px var(--body); color: var(--ink-soft); line-height: 1.5; }

/* Values */
.vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.val { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.val .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font: 800 16px var(--disp); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.val h3 { font: 700 17px var(--disp); margin-bottom: 8px; }
.val p { font: 400 13.5px var(--body); color: var(--ink-soft); line-height: 1.55; }

/* Placeholder note */
.placeholder-note { font: 500 12px var(--body); color: var(--ink-soft); font-style: italic; margin-top: 30px; }

/* Contact Grid */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }

/* Contact Form */
.cform { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 32px; }
.cform h3 { font: 700 20px var(--disp); margin-bottom: 6px; }
.cform .fsub { font: 400 14px var(--body); color: var(--ink-soft); margin-bottom: 20px; }
.field { margin-bottom: 15px; }
.field label { display: block; font: 700 12px var(--body); color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; font: 500 14px var(--body); padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: #FCFCFB; color: var(--ink); outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-mid); }
.field textarea { min-height: 110px; resize: vertical; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.field.two > div { margin-bottom: 15px; }
.cform .send { width: 100%; justify-content: center; margin-top: 4px; }
.cform .ok { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 10px; min-height: 380px; }
.cform .ok .tick { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font: 800 28px var(--body); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.cform .ok h3 { margin-bottom: 10px; }
.cform .ok p { font: 400 14px var(--body); color: var(--ink-soft); }
@keyframes ok-fadein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Contact Channels */
.channels { display: flex; flex-direction: column; gap: 14px; }
.chan { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.chan .ck { font: 700 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 5px; }
.chan b { font: 700 15px var(--disp); color: var(--ink); display: block; margin-bottom: 3px; }
.chan p { font: 400 12.5px var(--body); color: var(--ink-soft); line-height: 1.45; margin-bottom: 6px; }
.chan a { font: 700 13px var(--body); color: var(--brand); }
.chan a:hover { text-decoration: underline; }

/* =========================================================================
   CONTACT FORM — Validation & Button States
   ========================================================================= */

/* Error message under each field — hidden by default, slides down on .show */
.field-error {
  font: 500 12px var(--body);
  color: #C53030;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}
.field-error.show {
  max-height: 36px;
  opacity: 1;
  margin-top: 5px;
}
.field-error::before {
  content: "✕ ";
  font-size: 10px;
  font-weight: 700;
}

/* Field border states */
.field input.f-invalid,
.field select.f-invalid,
.field textarea.f-invalid {
  border-color: #E53E3E !important;
  background: #FFF8F8 !important;
}
.field input.f-valid,
.field select.f-valid,
.field textarea.f-valid {
  border-color: #38A169 !important;
}

/* Send button: disabled */
#cSend:disabled {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Spinner inside button */
.btn-spinner {
  display: none;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .65s linear infinite;
  vertical-align: middle;
  margin-right: 7px;
  flex-shrink: 0;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Loading state */
#cSend.btn-loading { pointer-events: none; }
#cSend.btn-loading .btn-spinner { display: inline-block; }
#cSend.btn-loading .btn-tri { display: none; }

/* Success state */
#cSend.btn-success {
  background: #38A169 !important;
  border-color: #38A169 !important;
  pointer-events: none;
}
#cSend.btn-success .btn-tri { display: none; }

/* Server error box below the button — slides down on .show */
.form-server-error {
  font: 500 13px var(--body);
  color: #C53030;
  background: #FFF5F5;
  border: 1px solid #FEB2B2;
  border-radius: 8px;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height .25s ease, opacity .25s ease, margin-top .25s ease, padding .25s ease;
}
.form-server-error.show {
  max-height: 60px;
  opacity: 1;
  margin-top: 10px;
  padding: 10px 14px;
}

/* LMS Band (dark card inside channels) */
.lms-band { background: var(--night); border-radius: 16px; padding: 22px; position: relative; overflow: hidden; }
.lms-band::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(68,76,236,.28), transparent 62%); top: -150px; right: -110px; }
.lms-band .ck { font: 700 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 6px; position: relative; }
.lms-band b { font: 700 16px var(--disp); color: #fff; display: block; margin-bottom: 10px; position: relative; }

/* =========================================================================
   LMS PAGE COMPONENTS
   ========================================================================= */

/* Slightly narrower wrapper for LMS page */
.lwrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* Grid layouts */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Feature card */
.fcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 20px; box-shadow: 0 10px 30px rgba(20,20,60,.05); }
.fcard .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font: 800 15px var(--body); margin-bottom: 13px; }
.fcard h3 { font: 700 16px var(--disp); color: var(--ink); margin: 0 0 6px; }
.fcard p { font: 400 13px var(--body); color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; }
.fcard ul { margin: 0; padding-left: 17px; }
.fcard li { font: 400 12.5px var(--body); color: var(--ink-soft); line-height: 1.5; margin-bottom: 4px; }

/* Dark band CTA */
.darkband { background: var(--night); border-radius: 20px; padding: 40px 48px; position: relative; overflow: hidden; }
.darkband::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(68,76,236,.28), transparent 62%); top: -220px; right: -140px; pointer-events: none; }

/* =========================================================================
   SHARED PAGE UTILITIES
   ========================================================================= */

.rv-delayed { animation-delay: .2s; }
.divider { border: none; border-top: 1px solid var(--line); max-width: 1180px; margin: 0 auto; }
.ctas-center { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.eyebrow-tight { margin-bottom: 3px; }

/* Pill badge */
.pill { display: inline-block; background: var(--brand-soft); color: var(--brand); font: 600 12px var(--body); padding: 6px 12px; border-radius: 20px; margin: 3px 6px 3px 0; }
.pill-dark { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.text-brand     { color: var(--brand); }
.text-brand-mid { color: var(--brand-mid); }
.text-amber     { color: var(--amber); }

/* Centered sec-head variants */
.sec-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head--xs  { max-width: 500px; }
.sec-head--sm  { max-width: 600px; }
.sec-head--md  { max-width: 700px; }
.sec-head--mb-sm { margin-bottom: 20px; }

/* Common hero overrides */
.hero-sub-sm { font-size: 17px; margin-bottom: 0; }
.hero-h1-fluid { font-size: clamp(34px, 4.8vw, 54px); margin: 18px 0 16px; }
.hero-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1100px; }

/* =========================================================================
   LP HR-LD PAGE COMPONENTS
   ========================================================================= */

/* Hero section padding */
.lp-hero { padding-top: 64px; padding-bottom: 60px; }
.lp-hero-grid { grid-template-columns: 1fr 1.15fr; max-width: none; gap: 64px; }

/* Hero visual card */
.lp-hero-vis { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 24px; }
.lp-vis-eyebrow { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 16px; }
.lp-feat-items { display: flex; flex-direction: column; gap: 12px; }
.lp-feat-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border-radius: 12px; padding: 14px 16px; }
.lp-feat-item-icon { font-size: 24px; flex-shrink: 0; }
.lp-feat-item b { display: block; font: 700 14px var(--body); color: #fff; margin-bottom: 2px; }
.lp-feat-item span { font: 400 12px var(--body); color: rgba(255,255,255,.5); }

/* Hero check list */
.lp-check-list { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0 32px; }
.lp-check { display: flex; align-items: center; gap: 8px; font: 600 14px var(--body); color: #C8C9E2; }
.lp-check::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Sample video section */
.lp-videos-section { background: #fff; border-top: 1px solid var(--line); padding: 80px 0; }
.lp-videos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.lp-video-card { border-radius: 20px; overflow: hidden; border: 1px solid rgba(68,76,236,.2); background: linear-gradient(160deg, #1a1d4a, #0b0c20); }
.lp-video-label { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-mid); padding: 14px 18px 0; }
.lp-video-wrap { padding: 12px 18px 18px; }

/* Free offer section */
.lp-offer-section { padding: 80px 0 60px; }
.lp-offer { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 40px; }
.lp-offer h3 { font: 700 clamp(22px, 2.8vw, 30px) var(--disp); letter-spacing: -.02em; margin-bottom: 12px; }
.lp-offer > div > p { font: 400 15px var(--body); color: var(--ink-soft); line-height: 1.7; margin-bottom: 6px; }
.lp-why-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.lp-why { display: flex; align-items: flex-start; gap: 12px; }
.lp-why-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.lp-why-text b { display: block; font: 700 15px var(--body); color: var(--ink); margin-bottom: 2px; }
.lp-why-text span { font: 400 13px var(--body); color: var(--ink-soft); line-height: 1.5; }
.lp-offer-img { background: linear-gradient(160deg, var(--brand-soft), #e8eaff); border-radius: 16px; overflow: hidden; min-height: 260px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 20px 54px rgba(17,18,43,.13); }
.lp-offer-img-mock { text-align: center; padding: 24px; }
.lp-offer-img-mock .big-icon { font-size: 60px; display: block; margin-bottom: 12px; }
.lp-offer-img-mock p { font: 700 16px var(--disp); color: var(--brand); line-height: 1.4; }
.lp-offer-cta { margin-top: 28px; }
.lp-offer-file-list { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.lp-offer-file-item { background: rgba(68,76,236,.08); border: 1px solid var(--brand-mid); border-radius: 8px; padding: 10px 14px; font: 600 13px var(--body); color: var(--brand); display: flex; align-items: center; gap: 8px; }

/* Platform features */
.lp-features-section { padding: 80px 0 40px; }
.lp-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; padding: 60px 0; border-bottom: 1px solid var(--line); }
.lp-feat:last-of-type { border-bottom: none; }
.lp-feat.rev { direction: rtl; }
.lp-feat.rev > * { direction: ltr; }
.lp-feat .flagtag { font: 700 11px var(--body); letter-spacing: .16em; color: var(--brand); background: var(--brand-soft); padding: 7px 12px; border-radius: 999px; display: inline-block; margin-bottom: 16px; }
.lp-feat .leadp { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 18px; }
.lp-feat ul.bul { list-style: none; margin: 0; padding: 0; }
.lp-feat ul.bul li { font: 500 14px var(--body); color: var(--ink-soft); padding: 7px 0 7px 26px; position: relative; line-height: 1.5; }
.lp-feat ul.bul li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.lp-feat-vis { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.lp-feat-vis-header { padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.lp-feat-vis-dot { width: 10px; height: 10px; border-radius: 50%; }
.lp-dot-red { background: #e5736b; }
.lp-dot-yellow { background: #e7b14c; }
.lp-dot-green { background: #5bbe99; }
.lp-feat-vis-title { font: 600 12px var(--body); color: var(--ink-soft); margin-left: 4px; }
.lp-feat-vis-body { padding: 20px; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.lp-vis-body-col { flex-direction: column; align-items: stretch; padding: 16px; }
.lp-vis-sublabel { font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.lp-vis-sublabel-lg { font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.lp-feature-h3 { font: 700 clamp(22px, 2.8vw, 30px) var(--disp); margin-bottom: 12px; letter-spacing: -.02em; }

/* AI Personalization mockup */
.lp-persona-mock { width: 100%; }
.lp-persona-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; margin-bottom: 8px; }
.lp-persona-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 14px var(--disp); color: #fff; flex-shrink: 0; }
.lp-av-brand { background: #444CEC; }
.lp-av-teal  { background: #19B68C; }
.lp-av-amber { background: #F5A623; }
.lp-persona-info { flex: 1; }
.lp-persona-name { font: 700 13px var(--body); color: var(--ink); }
.lp-persona-role { font: 400 11px var(--body); color: var(--ink-soft); }
.lp-persona-video { font: 700 11px var(--body); color: var(--brand); background: var(--brand-soft); padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.lp-crm-note { margin-top: 10px; font: 600 11px var(--body); color: var(--teal); display: flex; align-items: center; gap: 5px; }

/* Voice / Language mockup */
.lp-lang-mock { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.lp-lang-row { display: flex; align-items: center; gap: 10px; }
.lp-lang-flag { width: 32px; height: 24px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.lp-lang-bar-wrap { flex: 1; }
.lp-lang-name { font: 600 12px var(--body); color: var(--ink); margin-bottom: 4px; }
.lp-lang-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lp-lang-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-mid)); }
.lp-lang-pct { font: 700 12px var(--body); color: var(--brand); flex-shrink: 0; }

/* Analytics mockup */
.lp-analytics-mock { width: 100%; }
.lp-analytics-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.lp-analytics-stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; }
.lp-analytics-stat b { display: block; font: 800 22px var(--disp); color: var(--brand); letter-spacing: -.02em; }
.lp-analytics-stat span { font: 500 11px var(--body); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.lp-analytics-chart-label { font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.lp-analytics-chart { height: 60px; display: flex; align-items: flex-end; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.lp-analytics-bar { border-radius: 3px 3px 0 0; flex: 1; }
.lp-bar-solid { background: var(--brand); }
.lp-bar-soft  { background: var(--brand-soft); border: 1px solid var(--brand-mid); }
.stat-unit { font-size: 14px; }

/* Assessments mockup */
.lp-assess-mock { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.lp-assess-q { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.lp-assess-q-text { font: 600 13px var(--body); color: var(--ink); margin-bottom: 10px; line-height: 1.4; }
.lp-assess-opts { display: flex; flex-direction: column; gap: 6px; }
.lp-assess-opt { font: 400 12px var(--body); color: var(--ink-soft); padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.lp-assess-opt.correct { background: rgba(25,182,140,.06); border-color: rgba(25,182,140,.3); color: var(--teal); font-weight: 600; }
.lp-assess-dot       { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); display: inline-block; flex-shrink: 0; }
.lp-assess-dot-empty { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-block; flex-shrink: 0; }
.lp-assess-cert { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--brand-soft), #e0e3ff); border-radius: 10px; padding: 12px 16px; }
.lp-assess-cert-icon { font-size: 28px; }
.lp-assess-cert b { font: 700 13px var(--body); color: var(--brand); display: block; }
.lp-assess-cert span { font: 400 11px var(--body); color: var(--ink-soft); }

/* Customers section */
.lp-customers { background: var(--paper); border-top: 1px solid var(--line); padding: 56px 0; }
.lp-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.lp-logo-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; text-align: center; display: flex; align-items: center; justify-content: center; }
.lp-logo-card span { font: 800 18px var(--disp); color: var(--ink); letter-spacing: -.01em; opacity: .65; }
.lp-customers-note { text-align: center; font: 400 14px var(--body); color: var(--ink-soft); margin-top: 20px; }

/* LP HR-LD — real image sections */
.lp-hero-img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 20px 54px rgba(17,18,43,.13); }
.lp-feat-img { border-radius: 16px; overflow: hidden; line-height: 0; box-shadow: 0 20px 54px rgba(17,18,43,.13); }
.lp-feat-img img { width: 100%; height: auto; display: block; }
.lp-offer-img-real { width: 100%; display: block; }

/* Customer logo marquee */
.lp-logo-marquee { overflow: hidden; margin-top: 36px; user-select: none; }
.lp-lm-track { display: flex; align-items: center; gap: 20px; width: max-content; animation: lp-marquee 22s linear infinite; }
.lp-lm-track:hover { animation-play-state: paused; }
.lp-lm-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 240px; height: 130px; }
.lp-lm-card img { height: 90px; width: auto; max-width: 210px; object-fit: contain; filter: grayscale(20%); opacity: 0.85; transition: filter .25s, opacity .25s; }
.lp-lm-card:hover img { filter: grayscale(0); opacity: 1; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================================
   PPT-TO-SCORM PAGE COMPONENTS
   ========================================================================= */

/* Hero */
.ps-hero { padding-top: 60px; padding-bottom: 48px; }
.ps-hero-proof { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0 36px; }
.ps-hp { display: flex; align-items: center; gap: 8px; font: 600 14px var(--body); color: #C8C9E2; }
.ps-hp::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Section padding (standard 80px 0) */
.ps-section { padding: 80px 0; }
.ps-section-top { padding: 80px 0 60px; }

/* Transform visual */
.ps-transform { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; overflow: hidden; }
.ps-tv-label { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 11px 18px; display: flex; align-items: center; gap: 8px; }
.ps-tv-label.before { background: rgba(255,255,255,.04); color: rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.08); }
.ps-tv-label.after { background: rgba(68,76,236,.12); color: var(--brand-mid); border-bottom: 1px solid rgba(68,76,236,.18); border-top: 1px solid rgba(68,76,236,.18); }
.ps-tv-label span { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ps-tv-label.before span { background: rgba(255,255,255,.3); }
.ps-tv-label.after span { background: var(--brand-mid); }
.ps-ppt-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ps-file-row { display: flex; align-items: center; gap: 10px; }
.ps-file-icon { width: 36px; height: 36px; background: #c45911; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 800 9px var(--body); color: #fff; letter-spacing: .04em; flex-shrink: 0; }
.ps-file-name { font: 700 13px var(--body); color: #fff; }
.ps-file-sub { font: 400 11px var(--body); color: rgba(255,255,255,.4); margin-top: 2px; }
.ps-thumbs { display: flex; gap: 7px; align-items: center; }
.ps-thumb { width: 52px; height: 34px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); flex-shrink: 0; position: relative; overflow: hidden; }
.ps-thumb::before { content: ""; position: absolute; top: 6px; left: 6px; right: 6px; height: 4px; border-radius: 2px; background: var(--brand-mid); opacity: .5; }
.ps-thumb:nth-child(2)::before { background: var(--amber); }
.ps-thumb:nth-child(3)::before { background: var(--teal); }
.ps-thumb-more { font: 700 11px var(--body); color: rgba(255,255,255,.3); white-space: nowrap; }
.ps-slide-label { font: 400 12px var(--body); color: rgba(255,255,255,.45); line-height: 1.5; }
.ps-slide-label strong { color: rgba(255,255,255,.75); }
.ps-arrow { display: flex; flex-direction: column; align-items: center; padding: 6px 0; background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.ps-arrow-pip { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(68,76,236,.4); }
.ps-arrow-pip svg { width: 14px; height: 14px; }
.ps-arrow-lbl { font: 700 9px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-mid); margin-top: 4px; }
.ps-scorm-body { background: var(--night); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ps-scorm-screen { background: linear-gradient(160deg, #13152c, #0b0d1c); border-radius: 10px; overflow: hidden; }
.ps-scorm-topbar { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 6px; }
.ps-scorm-chapter { font: 700 9px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-mid); }
.ps-scorm-content { padding: 12px; }
.ps-scorm-title { font: 800 13px var(--disp); color: #fff; margin-bottom: 8px; line-height: 1.3; }
.ps-scorm-bullets { display: flex; flex-direction: column; gap: 5px; }
.ps-sb { display: flex; align-items: center; gap: 6px; }
.ps-sb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-mid); flex-shrink: 0; }
.ps-sb-line { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); }
.ps-scorm-bar { padding: 8px 12px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.02); }
.ps-scorm-play { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-scorm-prog { flex: 1; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; }
.ps-scorm-fill { width: 38%; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-mid)); border-radius: 2px; }
.ps-scorm-time { font: 500 10px var(--body); color: rgba(255,255,255,.3); font-variant-numeric: tabular-nums; }
.ps-scorm-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-stag { font: 700 10px var(--body); padding: 4px 9px; border-radius: 6px; letter-spacing: .06em; text-transform: uppercase; }
.ps-stag.blue  { background: rgba(68,76,236,.15); color: var(--brand-mid); }
.ps-stag.green { background: rgba(25,182,140,.12); color: var(--teal); }
.ps-stag.amber { background: rgba(245,166,35,.12); color: var(--amber); }

/* World Bank banner */
.ps-wb-banner { background: linear-gradient(135deg, #0a3d62, #14163a); border-top: 1px solid rgba(68,76,236,.2); border-bottom: 1px solid rgba(68,76,236,.2); }
.ps-wb-inner { max-width: 1180px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ps-wb-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(68,76,236,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-wb-icon svg { width: 22px; height: 22px; }
.ps-wb-text { flex: 1; min-width: 220px; }
.ps-wb-label { font: 700 10px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 3px; }
.ps-wb-desc { font: 400 14px var(--body); color: rgba(255,255,255,.7); line-height: 1.5; }
.ps-wb-desc strong { color: #fff; }
.ps-wb-tag { font: 700 11px var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 6px; background: rgba(68,76,236,.2); color: var(--brand-mid); white-space: nowrap; flex-shrink: 0; }

/* Trust stats */
.ps-trust { background: var(--night); padding: 44px 0; }
.ps-trust-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.ps-trust-label { font: 700 11px var(--body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); white-space: nowrap; flex-shrink: 0; }
.ps-trust-stats { display: flex; gap: 0; flex: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; min-width: 280px; }
.ps-ts { padding: 22px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); flex: 1; }
.ps-ts:last-child { border-right: none; }
.ps-ts b { display: block; font: 800 28px var(--disp); color: #fff; letter-spacing: -.02em; line-height: 1; }
.ps-ts b em { font-style: normal; color: var(--brand-mid); }
.ps-ts span { font: 600 11px var(--body); color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; margin-top: 5px; display: block; }

/* Process steps */
.ps-proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.ps-pc { padding: 28px 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 16px rgba(0,0,0,.07); display: flex; flex-direction: column; }
.ps-pc-n { width: 48px; height: 48px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font: 800 15px var(--disp); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; }
.ps-pc h3 { font: 700 16px var(--disp); margin-bottom: 8px; }
.ps-pc p { font: 400 13px var(--body); color: var(--ink-soft); line-height: 1.55; margin-bottom: 10px; }
.ps-pc-detail { font: 700 12px var(--body); color: var(--brand); display: flex; align-items: center; gap: 6px; }
.ps-pc-detail::before { content: "✓"; font-size: 10px; }
.ps-note { background: var(--brand-soft); border: 1px solid var(--brand-mid); border-radius: 12px; padding: 18px 22px; margin-top: 24px; font: 400 14px var(--body); color: var(--ink); line-height: 1.6; }
.ps-note strong { color: var(--brand); }

/* Before / After */
.ps-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.ps-ba-card { border-radius: 18px; padding: 32px; border: 1px solid var(--line); }
.ps-ba-card.before { background: var(--paper); }
.ps-ba-card.after { background: var(--night); color: #fff; border-color: rgba(68,76,236,.3); }
.ps-ba-head { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.ps-ba-card.before .ps-ba-head { color: rgba(74,75,102,.5); }
.ps-ba-card.after  .ps-ba-head { color: var(--brand-mid); }
.ps-ba-card h3 { font: 700 22px var(--disp); margin-bottom: 18px; letter-spacing: -.015em; }
.ps-ba-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ps-ba-card li { font: 400 14px var(--body); padding-left: 18px; position: relative; line-height: 1.55; }
.ps-ba-card.before li { color: var(--ink-soft); }
.ps-ba-card.after  li { color: rgba(255,255,255,.6); }
.ps-ba-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; }
.ps-ba-card.before li::before { background: rgba(74,75,102,.35); }
.ps-ba-card.after  li::before { background: var(--brand-mid); }
.ps-ba-stat { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-ba-stat-item { text-align: center; }
.ps-ba-stat-n { font: 800 28px var(--disp); color: var(--brand-mid); letter-spacing: -.03em; line-height: 1; }
.ps-ba-stat-l { font: 500 11px var(--body); color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.ps-days-suffix { font-size: 18px; }

/* Intelligence cards */
.ps-intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.ps-intel-card { border-radius: 18px; border: 1px solid var(--line); padding: 28px; position: relative; overflow: hidden; transition: border-color .25s, box-shadow .25s; background: #fff; }
.ps-intel-card:hover { border-color: var(--brand-mid); box-shadow: 0 8px 32px rgba(68,76,236,.1); }
.ps-intel-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 18px 18px 0 0; }
.ps-intel-card.scenario::before { background: linear-gradient(90deg, var(--amber), #ea580c); }
.ps-intel-card.qbank::before   { background: linear-gradient(90deg, var(--brand), var(--brand-mid)); }
.ps-intel-card.adaptive::before { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.ps-intel-card.onboard::before  { background: linear-gradient(90deg, var(--teal), #34d399); }
.ps-intel-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 22px; }
.ps-intel-card.scenario .ps-intel-icon { background: rgba(245,166,35,.1); }
.ps-intel-card.qbank    .ps-intel-icon { background: var(--brand-soft); }
.ps-intel-card.adaptive .ps-intel-icon { background: rgba(124,58,237,.08); }
.ps-intel-card.onboard  .ps-intel-icon { background: rgba(25,182,140,.08); }
.ps-intel-card h3 { font: 700 18px var(--disp); margin-bottom: 8px; letter-spacing: -.015em; }
.ps-intel-card p { font: 400 14px var(--body); color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; }
.ps-intel-bullets { display: flex; flex-direction: column; gap: 7px; }
.ps-ib { display: flex; align-items: flex-start; gap: 9px; font: 500 13px var(--body); color: var(--ink-soft); }
.ps-ib-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: .38em; flex-shrink: 0; }
.ps-intel-card.scenario .ps-ib-dot { background: var(--amber); }
.ps-intel-card.qbank    .ps-ib-dot { background: var(--brand); }
.ps-intel-card.adaptive .ps-ib-dot { background: #7c3aed; }
.ps-intel-card.onboard  .ps-ib-dot { background: var(--teal); }

/* Scenario mockup */
.ps-scenario-mock { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.ps-mock-label { font: 700 10px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.ps-mock-q { font: 700 13px var(--body); color: var(--ink); line-height: 1.4; margin-bottom: 10px; }
.ps-mock-opts { display: flex; flex-direction: column; gap: 5px; }
.ps-mock-opt { display: flex; align-items: center; gap: 8px; font: 400 12px var(--body); color: var(--ink-soft); padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); background: #fff; }
.ps-mock-opt.correct { background: rgba(25,182,140,.06); border-color: rgba(25,182,140,.3); color: var(--teal); font-weight: 600; }
.ps-mock-opt.wrong { background: rgba(220,38,38,.04); border-color: rgba(220,38,38,.2); color: #dc2626; }
.ps-radio { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; }
.ps-mock-opt.correct .ps-radio { background: var(--teal); border-color: var(--teal); }

/* Q-bank mockup */
.ps-qbank-mock { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.ps-qm-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.ps-qm-table td { font: 400 11px var(--body); padding: 5px 8px; border: 1px solid var(--line); text-align: center; color: var(--ink-soft); }
.ps-qm-table td.head { background: var(--night); color: #fff; font-weight: 700; font-size: 10px; }
.ps-qm-table td.blue { color: var(--brand); font-weight: 600; }
.ps-source-row { margin-top: 8px; }
.ps-source-badge { display: inline-flex; align-items: center; gap: 5px; font: 700 10px var(--body); background: var(--brand-soft); color: var(--brand); padding: 4px 9px; border-radius: 6px; }
.ps-source-note { font: 400 11px var(--body); color: var(--ink-soft); }

/* Adaptive mockup */
.ps-adaptive-mock { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.ps-am-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-bottom: 6px; }
.ps-am-bar { border-radius: 4px 4px 0 0; flex: 1; }
.ps-am-axis { display: flex; justify-content: space-between; font: 500 10px var(--body); color: rgba(124,58,237,.5); margin-bottom: 6px; }
.ps-am-note { font: 400 11px var(--body); color: var(--ink-soft); line-height: 1.4; }
.ps-am-note strong { color: #7c3aed; }

/* Onboarding path mockup */
.ps-path-mock { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.ps-pm-steps { display: flex; flex-direction: column; gap: 6px; }
.ps-pm-step { display: flex; align-items: center; gap: 9px; font: 500 12px var(--body); padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: #fff; }
.ps-pm-step.done   { background: rgba(25,182,140,.05); border-color: rgba(25,182,140,.25); }
.ps-pm-step.skip   { background: rgba(156,163,175,.05); border-color: rgba(156,163,175,.2); opacity: .5; }
.ps-pm-step.active { background: rgba(25,182,140,.08); border-color: var(--teal); }
.ps-pm-step.queued { background: #fff; border-color: var(--line); }
.ps-pm-num { width: 20px; height: 20px; border-radius: 50%; font: 800 10px var(--body); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-pm-step.done   .ps-pm-num { background: var(--teal); color: #fff; }
.ps-pm-step.skip   .ps-pm-num { background: var(--line); color: var(--ink-soft); }
.ps-pm-step.active .ps-pm-num { background: var(--teal); color: #fff; }
.ps-pm-step.queued .ps-pm-num { background: var(--line); color: var(--ink-soft); }
.ps-pm-name { flex: 1; color: var(--ink); }
.ps-pm-step.skip   .ps-pm-name { color: var(--ink-soft); }
.ps-pm-step.queued .ps-pm-name { color: var(--ink-soft); }
.ps-pm-badge { font: 700 9px var(--body); padding: 3px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
.ps-pm-step.done   .ps-pm-badge { background: rgba(25,182,140,.12); color: var(--teal); }
.ps-pm-step.skip   .ps-pm-badge { background: rgba(156,163,175,.15); color: var(--ink-soft); }
.ps-pm-step.active .ps-pm-badge { background: rgba(25,182,140,.15); color: var(--teal); }
.ps-pm-step.queued .ps-pm-badge { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }

/* Content integrity */
.ps-integrity { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-radius: 22px; padding: 50px; margin-top: 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; color: #fff; position: relative; overflow: hidden; }
.ps-integrity::after { content: ""; position: absolute; top: -40%; right: -15%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 65%); pointer-events: none; }
.ps-integrity h3 { font: 700 clamp(22px, 3vw, 30px) var(--disp); margin-bottom: 12px; letter-spacing: -.02em; line-height: 1.2; }
.ps-integrity > div > p { font: 400 15px var(--body); color: rgba(255,255,255,.72); line-height: 1.7; }
.ps-tps { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.ps-tp { display: flex; gap: 12px; align-items: flex-start; }
.ps-tp-i { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ps-tp-i svg { width: 12px; height: 12px; }
.ps-tp h4 { font: 700 14px var(--body); margin-bottom: 2px; }
.ps-tp p  { font: 400 13px var(--body); color: rgba(255,255,255,.6); line-height: 1.5; }

/* Case studies */
.ps-case { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 20px; }
.ps-case-head { background: var(--paper); padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
.ps-case-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-case-icon svg { width: 18px; height: 18px; color: var(--brand); }
.ps-case-title { font: 800 16px var(--disp); color: var(--ink); letter-spacing: -.01em; }
.ps-case-body { padding: 22px 24px; }
.ps-case-body > p { font: 400 14px var(--body); color: var(--ink-soft); line-height: 1.65; margin-bottom: 20px; }
.ps-case-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ps-cs { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; }
.ps-cs-lbl { font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(74,75,102,.6); margin-bottom: 4px; }
.ps-cs-old { font: 500 12px var(--body); color: rgba(74,75,102,.4); text-decoration: line-through; margin-bottom: 2px; min-height: 16px; }
.ps-cs-val { font: 800 20px var(--disp); color: var(--brand); letter-spacing: -.02em; }
.ps-cs-val.green { color: var(--teal); }

/* Pricing */
.ps-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.ps-pri { border: 1.5px solid var(--line); border-radius: 18px; padding: 28px; background: #fff; }
.ps-pri.featured { border-color: var(--brand); box-shadow: 0 8px 32px rgba(68,76,236,.14); }
.ps-pri-tag { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.ps-pri h3 { font: 700 20px var(--disp); margin-bottom: 6px; letter-spacing: -.015em; }
.ps-pri-amt { font: 400 14px var(--body); color: var(--ink-soft); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ps-pri ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ps-pri li { font: 400 14px var(--body); color: var(--ink-soft); padding-left: 18px; position: relative; line-height: 1.5; }
.ps-pri li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 800; font-size: 12px; }

/* Agency / GCC block */
.ps-agency { background: var(--night); border-radius: 22px; padding: 40px; margin-top: 20px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; position: relative; overflow: hidden; }
.ps-agency::after { content: ""; position: absolute; top: -50%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(68,76,236,.15), transparent 65%); pointer-events: none; }
.ps-agency-label { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 8px; }
.ps-agency h3 { font: 700 clamp(20px, 2.4vw, 26px) var(--disp); color: #fff; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; }
.ps-agency > div > p { font: 400 14px var(--body); color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 18px; }
.ps-agency-content { position: relative; z-index: 1; }
.ps-agency-items { display: flex; flex-wrap: wrap; gap: 12px; }
.ps-agency-item { display: flex; align-items: center; gap: 7px; font: 600 13px var(--body); color: rgba(255,255,255,.7); }
.ps-agency-item::before { content: "✓"; font-size: 11px; color: var(--brand-mid); }
.ps-agency-cards { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.ps-agency-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px 20px; }
.ps-agency-card.featured { background: rgba(68,76,236,.12); border-color: rgba(68,76,236,.3); }
.ps-agency-card-tag { font: 700 10px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 5px; }
.ps-agency-card b { display: block; font: 700 15px var(--body); color: #fff; margin-bottom: 4px; }
.ps-agency-card p { font: 400 13px var(--body); color: rgba(255,255,255,.4); line-height: 1.5; }
.ps-agency-cta { text-align: center; justify-content: center; }

/* Verticals */
.ps-verts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.ps-v { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: #fff; }
.ps-v h3 { font: 700 17px var(--disp); margin-bottom: 8px; letter-spacing: -.01em; }
.ps-v p { font: 400 14px var(--body); color: var(--ink-soft); line-height: 1.6; }
.ps-v-proof { font: 600 12px var(--body); color: var(--brand); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* About & Security */
.ps-about { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.ps-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ps-about-col h3 { font: 700 22px var(--disp); margin-bottom: 12px; letter-spacing: -.015em; }
.ps-about-col p { font: 400 15px var(--body); color: var(--ink-soft); line-height: 1.65; }
.ps-security-items { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ps-sec-item { display: flex; align-items: center; gap: 10px; font: 500 14px var(--body); color: var(--ink-soft); }
.ps-sec-check { width: 20px; height: 20px; border-radius: 5px; background: rgba(25,182,140,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-sec-check svg { width: 11px; height: 11px; color: var(--teal); }