/* Product introductions extend Qubiko's shared site styles. */
.product-hero{padding:calc(var(--nav-h) + 32px) 0 76px;background:#f7f9fe;color:#12234c;overflow:hidden}
.product-crumbs{display:flex;align-items:center;gap:9px;font-size:.78rem;color:#53617e;margin-bottom:44px}
.product-crumbs a{color:#2157ed}
.product-crumbs i{font-size:.65rem}
.product-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:56px}
.product-hero-copy h1{color:#12234c;font-size:clamp(2.6rem,4.2vw,4.5rem);line-height:1.04;letter-spacing:-.04em;max-width:12ch;margin:0 0 28px}
.product-blue{color:#2157ed}
.product-hero-copy p{font-size:1.0625rem;line-height:1.75;max-width:48ch;color:#455674;margin-bottom:18px}
.product-hero-copy strong{color:#12234c;font-weight:600}
.product-hero-copy .product-hero-secondary{font-size:.92rem;line-height:1.7;color:#53617e;max-width:48ch}
.product-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:30px}
.product-text-link{display:inline-flex;align-items:center;gap:12px;font-size:.91rem;font-weight:600;color:#2157ed;text-underline-offset:5px}
.product-text-link i{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.product-text-link:hover{text-decoration:underline}
.product-text-link:hover i{transform:translateX(3px)}
.product-core-figure{min-width:0;margin:0}
.product-core-image{overflow:hidden;border-radius:16px;background:#f6f6f6}
.product-core-image img{width:100%;height:auto;mix-blend-mode:multiply;animation:product-board-arrive 1.2s cubic-bezier(.16,1,.3,1) both}
.product-core-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0 18px;border-bottom:1px solid #d9e2f1}
.product-core-caption strong{font:700 1.6rem var(--font-display);letter-spacing:-.03em;color:#12234c}
.product-core-caption span{font-size:.8rem;color:#53617e;max-width:24ch;text-align:right}
.product-core-features{display:flex;align-items:center;gap:28px;padding-top:18px;font-size:.8rem;font-weight:600;color:#455674}
.product-core-features span{display:inline-flex;align-items:center;gap:8px}
.product-core-features i{color:#2157ed;font-size:1.15rem}
.product-projects{background:#12234c;padding:88px 0;color:#e2eafa}
.product-section-heading{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:80px;margin-bottom:42px}
.product-section-heading h2{font-size:clamp(2rem,3.1vw,3.2rem);line-height:1.08;color:#12234c;letter-spacing:-.035em}
.product-section-heading p{font-size:1rem;line-height:1.75;color:#53617e;max-width:48ch}
.product-projects .product-section-heading h2{color:#fff}
.product-projects .product-section-heading p{color:#c3d1ed}
.product-project-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:46px;align-items:start}
.product-project{border-top:1px solid #425476;min-width:0}
.product-project summary{display:flex;align-items:center;gap:18px;min-height:103px;cursor:pointer;list-style:none;padding:22px 0;color:#fff;transition:color .2s ease}
.product-project summary::-webkit-details-marker{display:none}
.product-project summary>i:first-child{font-size:1.8rem;color:#8cadff;width:36px;flex:none}
.product-project summary>span{font-size:1.15rem;font-weight:600;line-height:1.3;flex:1}
.product-project summary small{display:block;font-size:.77rem;font-weight:400;color:#b2c3e3;line-height:1.5;margin-top:6px}
.product-project summary:hover{color:#b4caff}
.product-detail-toggle{font-size:1rem;transition:transform .25s cubic-bezier(.16,1,.3,1);flex:none}
.product-project[open] .product-detail-toggle{transform:rotate(45deg)}
.product-project-body{padding:0 0 25px 54px;max-width:50ch}
.product-project-body p{font-size:.91rem;line-height:1.75;color:#e0e8f8;margin-bottom:12px}
.product-project-body>span{font-size:.76rem;color:#b2c3e3;display:block;line-height:1.65}
.product-project-note{font-size:.78rem;line-height:1.7;color:#b2c3e3;max-width:94ch;border-top:1px solid #425476;margin-top:16px;padding-top:23px}
.product-software-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52px}
.product-software-figure{min-width:0;margin:0;transform:rotate(-2deg);animation:product-screen-arrive 1s cubic-bezier(.16,1,.3,1) both;background:white;border-radius:16px;box-shadow:0 26px 48px -22px #19376538;overflow:hidden}
.product-window-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#edf2fd;font-size:.68rem;color:#455674}
.product-window-top>span:first-child{display:flex;gap:5px}
.product-window-top>span:first-child i{display:block;width:6px;height:6px;border-radius:50%;background:#9eb1d5}
.product-software-figure>img{width:100%;height:auto}
.product-software-figure>figcaption{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 22px;font-size:.77rem;color:#53617e}
.product-software-figure>figcaption strong{font-weight:600;font-size:.88rem;color:#12234c}
.product-software-figure>figcaption span{text-align:right;max-width:24ch}
.product-audiences{padding:72px 0 84px;border-bottom:1px solid #e5eaf3;background:#fff}
.product-audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px}
.product-audience{min-width:0}
.product-audience+ .product-audience{border-left:1px solid #d9e2f1;padding-left:58px}
.product-audience h2{color:#12234c;font-size:clamp(1.8rem,2.8vw,2.8rem);line-height:1.08;margin-bottom:24px;letter-spacing:-.03em}
.product-audience p{font-size:.98rem;line-height:1.8;color:#53617e;max-width:52ch}
.product-audience strong{color:#12234c;font-weight:600}
.product-capabilities{display:flex;flex-wrap:wrap;gap:8px 18px;margin:24px 0 26px}
.product-capabilities li{font-size:.76rem;color:#455674;display:flex;align-items:center;gap:7px}
.product-capabilities li::before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#2157ed;flex:none}
.product-learning-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0 0 48px;counter-reset:learning-step}
.product-learning-flow li{counter-increment:learning-step;border-top:1px solid #cbd9f3;padding-top:18px;position:relative}
.product-learning-flow li::before{content:counter(learning-step);display:block;color:#2459eb;font-size:.78rem;font-weight:600;margin-bottom:12px;font-variant-numeric:tabular-nums}
.product-learning-flow h3{font-size:1.2rem;line-height:1.3;color:#12234c;margin-bottom:12px}
.product-learning-flow p{font-size:.84rem;line-height:1.75;color:#53617e}
.product-software-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;background:#f5f8ff;border-radius:16px;padding:32px 36px;margin-top:42px}
.product-software-cta h3{color:#12234c;font-size:1.45rem;line-height:1.3;margin-bottom:10px}
.product-software-cta p{color:#53617e;font-size:.91rem;line-height:1.7;max-width:62ch}
.product-software-cta>.btn{flex-shrink:0;background:#2459eb}
@keyframes product-board-arrive{from{transform:translateY(20px) rotate(-3deg)}to{transform:translateY(0) rotate(0)}}
@keyframes product-screen-arrive{from{transform:translateY(20px) rotate(0)}to{transform:translateY(0) rotate(-2deg)}}
@media (max-width:1000px){
 .product-learning-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .product-software-cta{padding:28px;align-items:flex-start;flex-direction:column;gap:22px}
 .product-hero-grid,.product-software-grid{gap:30px}
 .product-hero-copy h1{font-size:clamp(2.5rem,4.7vw,3.5rem)}
 .product-hero-copy p{font-size:.97rem}
 .product-actions{gap:19px}
 .product-section-heading{gap:40px}
 .product-audience-grid{gap:40px}
 .product-audience+ .product-audience{padding-left:38px}
 .product-software-figure>figcaption{flex-direction:column;align-items:flex-start;gap:4px}
 .product-software-figure>figcaption span{text-align:left;max-width:none}
}
@media (max-width:760px){
 .product-learning-flow{gap:26px 20px;margin-bottom:34px}
 .product-learning-flow p{font-size:.82rem}
 .product-software-cta{padding:26px 22px}
 .product-hero{padding-top:calc(var(--nav-h) + 22px);padding-bottom:48px}
 .product-crumbs{margin-bottom:30px}
 .product-hero-grid,.product-software-grid{grid-template-columns:1fr;gap:36px}
 .product-hero-copy h1{font-size:clamp(2.65rem,8.5vw,4rem);max-width:14ch;margin-bottom:22px}
 .product-hero-copy p,.product-hero-copy .product-hero-secondary{max-width:60ch}
 .product-actions{margin-top:24px;gap:18px}
 .product-core-caption strong{font-size:1.4rem}
 .product-core-features{justify-content:space-between;gap:12px}
 .product-software-figure{transform:none;animation:none}
 .product-projects{padding:58px 0}
 .product-section-heading{grid-template-columns:1fr;gap:18px;margin-bottom:32px}
 .product-section-heading h2{font-size:2.25rem}
 .product-project-grid{grid-template-columns:1fr}
 .product-project summary{min-height:95px;gap:14px}
 .product-project-body{padding-left:50px;max-width:none}
 .product-audiences{padding:48px 0}
 .product-audience-grid{grid-template-columns:1fr;gap:36px}
 .product-audience+ .product-audience{border-left:0;border-top:1px solid #d9e2f1;padding:36px 0 0}
 .product-audience h2{font-size:2.15rem;margin-bottom:20px}
}
@media (max-width:420px){.product-learning-flow{grid-template-columns:1fr}.product-learning-flow li{padding-top:15px}.product-learning-flow li::before{float:left;margin:4px 13px 0 0}.product-learning-flow h3{margin-bottom:9px}.product-software-cta>.btn{width:100%}}
@media (prefers-reduced-motion:reduce){
 .product-core-image img,.product-software-figure{animation:none;transform:none}
 .product-detail-toggle,.product-text-link i{transition:none}
}