/* B385 (P1) · the product pages: one system for every CultureAI product page. Phone first; CultureAI blue the only accent. */
.pp{--pp-ink:#0a1633;--pp-body:#2b3550;--pp-slate:#425170;--pp-mute:#566074;--pp-line:#e3e8f2;--pp-mist:#f5f7fc;--pp-blue:#1559f5;--pp-blue-ink:#0f46c9;--pp-wash:#e9eefb;--pp-gut:clamp(16px,5vw,56px);color:var(--pp-body);font-family:var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp *{box-sizing:border-box}
.pp-in{max-width:1180px;margin:0 auto;padding:0 var(--pp-gut)}
.pp h1,.pp h2,.pp h3{color:var(--pp-ink);font-family:inherit;text-wrap:balance}
.pp p{text-wrap:pretty}
.pp a{color:var(--pp-blue-ink)}
.pp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font:500 13px/1.2 var(--px-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--pp-blue-ink)}
.pp-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--pp-blue)}
.pp-eyebrow a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;color:inherit;text-decoration:none}
.pp-eyebrow a:hover{text-decoration:underline}

/* hero */
.pp-hero{position:relative;padding:clamp(40px,7vw,96px) 0 clamp(40px,6vw,80px);background:linear-gradient(180deg,#f3f6fd 0,#fff 78%);overflow:hidden}
.pp-hero-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,64px);align-items:center}
.pp-hero h1{margin:0;font:600 clamp(34px,3.7vw,52px)/1.05 var(--px-sans,"Rubik",system-ui,sans-serif);letter-spacing:-.032em}
.pp-for{margin:18px 0 0;font:500 15px/1.4 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-ink)}
.pp-for b{font-weight:500;color:var(--pp-blue-ink)}
.pp-dek{margin:14px 0 0;max-width:540px;font:400 clamp(17px,1.4vw,19px)/1.6 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}
.pp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--pp-ink);color:#fff!important;font:500 16px/1 var(--px-sans,"Rubik",system-ui,sans-serif);text-decoration:none;transition:background .2s}
.pp-btn:hover{background:var(--pp-blue)}
.pp-btn.ghost{background:#fff;color:var(--pp-ink)!important;box-shadow:inset 0 0 0 1px rgba(10,22,51,.16)}
.pp-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--pp-blue)}
.pp-btn:focus-visible,.pp a:focus-visible,.pp summary:focus-visible{outline:3px solid var(--pp-blue);outline-offset:3px}
.pp-status{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;max-width:540px;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--pp-line);font:400 14.5px/1.5 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-body)}
.pp-status b{flex:none;font:600 12px/1.6 var(--px-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--pp-ink)}

/* a real screen, framed */
.pp-frame{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -28px rgba(11,21,48,.34),0 0 0 1px rgba(11,21,48,.08)}
.pp-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f3f5fa;border-bottom:1px solid var(--pp-line)}
.pp-bar i{width:9px;height:9px;border-radius:50%;background:#d6dbe6}
.pp-bar span{margin:0 auto;font:400 12px/1 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-mute);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:70%}
.pp-frame img{display:block;width:100%;height:auto}
.pp-phone{margin:0 auto;max-width:260px;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -24px rgba(11,21,48,.4),0 0 0 8px #0a1633}
.pp-phone img{display:block;width:100%;height:auto}
.pp-cap{margin:12px 2px 0;font:400 13.5px/1.5 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-mute)}
.pp-cap b{font-weight:500;color:var(--pp-ink)}

/* sections */
.pp-sec{padding:clamp(56px,8vw,112px) 0 0}
.pp-sec.pp-tint{margin-top:clamp(56px,8vw,112px);padding:clamp(48px,7vw,96px) 0;background:var(--pp-mist)}
.pp-sec.pp-tint+.pp-sec{padding-top:clamp(48px,7vw,96px)}
.pp-head{max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.pp-head h2{margin:0;font:600 clamp(28px,3.4vw,44px)/1.08 var(--px-sans,"Rubik",system-ui,sans-serif);letter-spacing:-.028em}
.pp-head p{margin:14px 0 0;font:400 17.5px/1.6 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}

/* the problem and what it does */
.pp-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)}
.pp-pair>div{padding:clamp(22px,3vw,32px);border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--pp-line)}
.pp-pair>div+div{background:var(--pp-ink);box-shadow:none;color:#dfe6f6}
.pp-pair h3{margin:0 0 10px;font:600 13px/1.3 var(--px-mono,monospace);letter-spacing:.07em;text-transform:uppercase;color:var(--pp-mute)}
.pp-pair>div+div h3{color:#9db8ff}
.pp-pair p{margin:0;font:400 18px/1.6 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-pair>div+div p{color:#fff}

/* how it works: a diagram drawn inline */
.pp-flow{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;counter-reset:pp}
.pp-node{position:relative;display:flex;flex-direction:column;padding:0 10px}
.pp-node:first-child{padding-left:0}.pp-node:last-child{padding-right:0}
.pp-box{position:relative;flex:1;padding:18px 16px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--pp-line),0 10px 24px -18px rgba(11,21,48,.35)}
.pp-node.core .pp-box{box-shadow:inset 0 0 0 1.5px var(--pp-blue),0 10px 24px -18px rgba(21,89,245,.45)}
.pp-lane{display:inline-block;margin:0 0 10px;padding:4px 9px;border-radius:999px;background:var(--pp-mist);font:500 11.5px/1.2 var(--px-mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--pp-slate)}
.pp-node.core .pp-lane{background:var(--pp-wash);color:var(--pp-blue-ink)}
.pp-box h3{margin:0;font:600 17px/1.3 var(--px-sans,"Rubik",system-ui,sans-serif);letter-spacing:-.01em}
.pp-box h3:before{counter-increment:pp;content:counter(pp) ". ";color:var(--pp-blue-ink)}
.pp-box p{margin:8px 0 0;font:400 14.5px/1.55 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}
.pp-arrow{position:absolute;z-index:1;top:50%;right:-13px;width:26px;height:26px;margin-top:-13px;color:var(--pp-blue)}
.pp-arrow svg{display:block;width:26px;height:26px}
.pp-node:last-child .pp-arrow{display:none}
.pp-legend{margin:18px 0 0;font:400 14px/1.5 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-mute)}

/* screens */
.pp-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,36px);align-items:start}
.pp-shots figure{margin:0}
.pp-shots .pp-wide{grid-column:1/-1}
.pp-shots .pp-tall{display:grid;place-items:center;padding:28px 0;border-radius:18px;background:var(--pp-mist)}
.pp-note{margin:20px 0 0;padding:14px 16px;border-radius:12px;background:var(--pp-mist);font:400 14.5px/1.55 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}

/* features */
.pp-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:18px;overflow:hidden;background:var(--pp-line);box-shadow:0 0 0 1px var(--pp-line)}
.pp-feats li{padding:24px 22px;background:#fff}
.pp-feats h3{margin:0;font:600 17px/1.3 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-feats p{margin:8px 0 0;font:400 15px/1.6 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}

/* trust */
.pp-trust{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.pp-trust ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pp-trust li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--pp-line);font:400 15.5px/1.55 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-trust li svg{width:24px;height:24px;color:var(--pp-blue);margin-top:1px}
.pp-trust li b{display:block;color:var(--pp-ink);font-weight:500}
.pp-trust .pp-head{margin:0}

/* the platform under it */
.pp-core{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pp-core li{padding:16px;border-radius:14px;background:var(--pp-mist);box-shadow:inset 0 0 0 1px var(--pp-line)}
.pp-core li:not(.on) b{color:var(--pp-slate);font-weight:400}
.pp-core li.on{background:#fff;box-shadow:inset 0 0 0 1.5px var(--pp-blue)}
.pp-core b{display:block;color:var(--pp-ink);font:500 15px/1.3 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-core span{display:block;margin-top:6px;font:500 11.5px/1.2 var(--px-mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--pp-mute)}
.pp-core li.on span{color:var(--pp-blue-ink)}
.pp-core p{margin:6px 0 0;font:400 13.5px/1.5 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}
.pp-conn{margin:20px 0 0;font:400 15.5px/1.6 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}
.pp-conn b{color:var(--pp-ink);font-weight:500}

/* how to get it */
.pp-get{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,4vw,48px);border-radius:24px;background:var(--pp-ink);color:#dfe6f6}
.pp-get h2{margin:0;color:#fff;font:600 clamp(26px,3vw,38px)/1.1 var(--px-sans,"Rubik",system-ui,sans-serif);letter-spacing:-.025em}
.pp-get p{margin:14px 0 0;font:400 17px/1.6 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-get ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:g}
.pp-get ol li{position:relative;padding:14px 16px 14px 52px;border-radius:12px;background:rgba(255,255,255,.06);font:400 15.5px/1.5 var(--px-sans,"Rubik",system-ui,sans-serif);color:#fff}
.pp-get ol li:before{counter-increment:g;content:counter(g);position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--pp-blue);color:#fff;display:grid;place-items:center;font:600 13px/1 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-get .pp-btn{background:#fff;color:var(--pp-ink)!important;margin-top:22px}
.pp-get .pp-btn:hover{background:#dfe8ff}

/* FAQ */
.pp-faq{max-width:860px;border-top:1px solid var(--pp-line)}
.pp-faq details{border-bottom:1px solid var(--pp-line)}
.pp-faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:14px 0;cursor:pointer;list-style:none;font:500 17.5px/1.4 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-ink)}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary:after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--pp-blue);border-bottom:2px solid var(--pp-blue);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.pp-faq details[open] summary:after{transform:rotate(225deg) translate(-3px,-3px)}
.pp-faq details>div{padding:0 0 20px;font:400 16px/1.65 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate);max-width:720px}
.pp-faq details>div p{margin:0}

/* related */
.pp-rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pp-rel a{display:flex;flex-direction:column;height:100%;min-height:44px;padding:20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--pp-line);text-decoration:none;color:var(--pp-body);transition:box-shadow .2s,transform .2s}
.pp-rel a:hover{box-shadow:inset 0 0 0 1.5px var(--pp-blue);transform:translateY(-2px)}
.pp-rel small{font:500 11.5px/1.2 var(--px-mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--pp-blue-ink)}
.pp-rel b{display:block;margin-top:8px;color:var(--pp-ink);font:600 18px/1.25 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-rel span{display:block;margin-top:6px;font:400 14.5px/1.5 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}
.pp-rel em{margin-top:auto;padding-top:14px;font:500 14.5px/1 var(--px-sans,"Rubik",system-ui,sans-serif);font-style:normal;color:var(--pp-blue-ink)}
.pp-end{height:clamp(56px,8vw,112px)}

/* the products hub */
.pp-all{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pp-all a{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;min-height:44px;padding:22px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--pp-line);text-decoration:none;color:var(--pp-body);transition:box-shadow .2s,transform .2s}
.pp-all a:hover{box-shadow:inset 0 0 0 1.5px var(--pp-blue);transform:translateY(-2px)}
.pp-all .pp-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--pp-wash);color:var(--pp-blue-ink)}
.pp-all .pp-ic svg{width:26px;height:26px}
.pp-all small{font:500 11.5px/1.2 var(--px-mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--pp-mute)}
.pp-all b{display:block;margin-top:6px;color:var(--pp-ink);font:600 19px/1.25 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-all span{display:block;margin-top:6px;font:400 15px/1.55 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-slate)}
.pp-stack{display:grid;gap:12px}
.pp-layer{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--pp-line)}
.pp-layer.core{box-shadow:inset 0 0 0 1.5px var(--pp-blue)}
.pp-layer>b{font:500 12px/1.3 var(--px-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--pp-blue-ink)}
.pp-layer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pp-layer li{padding:7px 12px;border-radius:999px;background:var(--pp-mist);font:400 14px/1.3 var(--px-sans,"Rubik",system-ui,sans-serif);color:var(--pp-ink)}
.pp-layer li a{color:inherit;text-decoration:none}
.pp-layer li a:hover{text-decoration:underline}

/* laptop and down */
@media (max-width:1000px){.pp-flow{grid-auto-flow:row;grid-auto-columns:auto;gap:14px}.pp-node{padding:0}.pp-arrow{top:auto;bottom:-20px;right:auto;left:50%;margin:0 0 0 -13px;transform:rotate(90deg)}.pp-core{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .pp-hero{padding:24px 0 36px;background:linear-gradient(180deg,#f3f6fd 0,#fff 60%)}
  .pp-hero-g,.pp-pair,.pp-trust,.pp-get,.pp-shots,.pp-all{grid-template-columns:minmax(0,1fr)}
  .pp-hero h1{font-size:clamp(30px,8.6vw,38px)}
  .pp-ctas .pp-btn{flex:1 1 100%}
  .pp-feats{grid-template-columns:minmax(0,1fr)}
  .pp-core{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .pp-core li{padding:12px}
  .pp-core p{display:none}
  .pp-layer{grid-template-columns:minmax(0,1fr);gap:10px}
  .pp-pair p{font-size:16.5px}
  .pp-frame{border-radius:10px}
  .pp-bar{height:24px}
  .pp-phone{max-width:220px;border-radius:24px;box-shadow:0 24px 48px -20px rgba(11,21,48,.4),0 0 0 6px #0a1633}
}
@media (prefers-reduced-motion:reduce){.pp *{transition:none!important}.pp-rel a:hover,.pp-all a:hover{transform:none}}
.pp-hero-v{margin:0;min-width:0}
.pp-spec{padding:clamp(20px,3vw,28px);border-radius:18px;background:#fff;box-shadow:0 40px 80px -28px rgba(11,21,48,.3),0 0 0 1px rgba(11,21,48,.08)}
.pp-spec-h{margin:0 0 14px;font:500 12px/1.3 var(--px-mono,monospace);letter-spacing:.07em;text-transform:uppercase;color:var(--pp-blue-ink)}
.pp-spec ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pp-spec li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:12px 0;border-top:1px solid var(--pp-line);font:400 15px/1.5 var(--px-sans,"Rubik",system-ui,sans-serif)}
.pp-spec li b{color:var(--pp-ink);font-weight:500}
@media (max-width:760px){.pp-spec li{grid-template-columns:minmax(0,1fr);gap:2px}}
.pp .pp-get h2{color:#fff}
.pp .pp-get p{color:#dfe6f6}
.pp-rel em span{display:inline;margin:0;font:inherit;color:inherit}