/* ============================================================
   PIKA PRODUCT INTELLIGENCE — PAGE-LOCAL EXTENSIONS
   Restored visual baseline; small semantic content helpers only.
   Global elements (hero, containers, typography, buttons,
   sections) are provided by pika-inner.css.
   ============================================================ */

.pi-formula-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #eef4e2;
    border: 1px solid #dae6c8;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 14px;
    font-weight: 500;
    color: #4e6d3a;
}

.pi-formula-op {
    font-weight: 700;
    color: #7a9845;
}

.pi-formula-result {
    font-weight: 600;
    color: #23413b;
    background: #ffffff;
    border: 1px solid #dce5d3;
    padding: 4px 10px;
    border-radius: 6px;
}

.pi-faq-details {
    background: #ffffff;
    border: 1px solid #dfe6d6;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.pi-faq-details[open] {
    border-color: #bad39f;
}

.pi-faq-summary {
    font-size: 15px;
    font-weight: 600;
    color: #23413b;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.pi-faq-summary::-webkit-details-marker {
    display: none;
}

.pi-faq-summary i {
    font-size: 18px;
    color: #7a9845;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.pi-faq-details[open] .pi-faq-summary i {
    transform: rotate(180deg);
}

.pi-faq-body {
    padding: 0 22px 18px;
    font-size: 14px;
    line-height: 1.8;
    color: #62746d;
    border-top: 1px solid #edf2e4;
    padding-top: 12px;
}

/* ── Professionalism Enhancements ── */
.product-editorial .inner-scene-window {
    animation: inner-subtle-float 8s ease-in-out infinite;
}

/* Keep the product page's dark surfaces readable over shared legacy rules. */
.pika-inner.product-editorial .pika-context-module:has(> span.small) :is(.ph-muted, .text-muted) { color:#c2d4cf!important; }
.pika-inner.product-editorial .pika-context-module a { color:#426425!important; }
.pika-inner.product-editorial .ph-section-dark .ph-muted { color:#c2d4cf!important; }
.pika-inner.product-editorial .ph-section-dark .ph-btn-outline { color:#f5f8f1!important; border-color:#8fa8a2; }
.pika-inner.product-editorial .ph-section-dark .ph-btn-outline:is(:hover,:focus-visible) { background:#ffffff14; color:#fff!important; }
.pika-inner.product-editorial .pi-formula-bar { padding:22px; border-radius:14px; gap:14px; }
.pika-inner.product-editorial .pi-faq-details { border-radius:14px; }

.pi-story { --story-progress:0; position:relative; padding:80px 24px; background:radial-gradient(ellipse at 85% 20%,#e3ecd4,transparent 55%),#f2f5ed; color:#163735; }
.pi-story-sticky { max-width:1180px; margin:auto; }
.pi-story-heading { margin-bottom:28px; }
.pi-story-eyebrow,.pi-story-kicker { display:block; color:#4e6d3a; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.pika-inner.product-editorial .pi-story h2 { color:#163735; font-size:clamp(28px,3vw,43px); line-height:1.15; letter-spacing:-.045em; max-width:850px; margin:12px 0; }
.pi-story-heading > p { color:#254c42; font-size:18px; margin:0; }
.pi-story-heading > p > span { color:#586f64; font-size:13px; margin-left:14px; }
.pi-story-shell { border:1px solid #cfdcca; border-radius:22px; background:#fff; box-shadow:0 24px 70px #1637350c; overflow:hidden; }
.pi-story-topline { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; border-bottom:1px solid #e4eadf; font-size:12px; gap:12px; }
.pi-story-topline > strong { font-size:18px; letter-spacing:-.05em; }
.pi-story-topline strong span { color:#799761; margin:0 8px; }
.pi-story-topline > span { color:#597063; }
.pi-story-nav { display:grid; grid-template-columns:repeat(5,1fr); background:#f8faf5; border-bottom:1px solid #dce5d5; }
.pi-story-nav a { color:#52664c; font-size:13px; padding:17px 20px; text-align:center; border-bottom:3px solid transparent; text-decoration:none; }
.pi-story-nav a span { font-size:10px; margin-right:5px; color:#617655; }
.pi-story-nav a[aria-current] { background:#eaf3dd; border-color:#709641; color:#203d28; font-weight:700; }
.pi-story-nav a:focus-visible,.pi-story-footer a:focus-visible { outline:3px solid #527b29; outline-offset:-4px; }
.pi-story-frame { display:grid; grid-template-columns:1fr 1.05fr; gap:44px; padding:36px; align-items:center; scroll-margin-top:140px; }
.pi-story-frame + .pi-story-frame { border-top:1px solid #dce5d5; }
.pika-inner.product-editorial .pi-story h3 { font-size:clamp(25px,2.6vw,35px); line-height:1.16; letter-spacing:-.04em; color:#163735; margin:18px 0; }
.pi-story-copy > p { font-size:15px; line-height:1.85; color:#51675c; margin-bottom:22px; }
.pi-story-note { display:block; padding-left:14px; border-left:3px solid #b5db82; color:#49673c; font-size:12px; line-height:1.7; }
.pi-story-visual { min-width:0; border-radius:16px; background:#edf3e5; padding:24px; display:flex; flex-direction:column; gap:18px; justify-content:center; min-height:300px; }
.pi-story-person { display:flex; align-items:center; gap:12px; }
.pi-story-avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#173a35; color:#e4f4cd; font-size:20px; flex-shrink:0; }
.pi-story-person strong { display:block; font-size:22px; }
.pi-story-person small { color:#57704b; font-size:12px; }
.pi-story-person svg { width:78px; height:70px; margin-left:auto; }
.pi-story-data { display:flex; gap:16px; background:#fff; border:1px solid #dce6d4; padding:20px; border-radius:12px; }
.pi-story-data > i { font-size:30px; color:#52763b; }
.pi-story-data small,.pi-story-product small { display:block; font-size:10px; letter-spacing:.08em; color:#557149; }
.pi-story-data strong,.pi-story-product strong { display:block; font-size:17px; color:#193b32; margin:5px 0; }
.pi-story-data div > span,.pi-story-product div > span { font-size:12px; color:#59714e; }
.pi-story-metrics { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pi-story-metrics > div { border-left:2px solid #b4ce95; padding-left:14px; }
.pi-story-metrics strong { font-size:29px; font-weight:500; display:block; }
.pi-story-metrics small { font-size:12px; }
.pi-story-metrics span { font-size:11px; color:#52674a; }
.pi-story-cycle { width:132px; height:132px; margin:auto; position:relative; }
.pi-story-cycle > span { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:38px; letter-spacing:-.06em; }
.pi-story-cycle small { font-size:12px; letter-spacing:0; }
.pi-story-cycle svg { width:100%; height:100%; transform:rotate(-90deg); }
.pi-story-cycle circle { fill:none; stroke:#d4e1c4; stroke-width:6; }
.pi-story-cycle .pi-story-cycle-fill { stroke:#587f36; stroke-dasharray:427; stroke-dashoffset:31; stroke-linecap:round; }
.pi-story-product { display:flex; gap:18px; align-items:center; }
.pi-story-pack { display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 9px; background:#173a35; color:#e8f3d8; border-top:6px solid #bfdc95; border-radius:5px 5px 10px 10px; min-width:84px; transform:rotate(-5deg); font-size:13px; letter-spacing:.1em; box-shadow:5px 7px 0 #cfddbe; }
.pi-story-pack small { color:#d6e6c4; font-size:7px; }
.pi-story-pack i { font-size:23px; }
.pi-story-pack b { font-size:10px; font-weight:400; }
.pi-story-checks { display:grid; gap:9px; }
.pi-story-checks > div { display:flex; justify-content:space-between; gap:12px; background:#fff; padding:12px 16px; border-radius:8px; font-size:13px; }
.pi-story-checks b { color:#476e2a; }
.pi-story-verdict { padding:17px 20px; border-radius:10px; background:#183b35; color:#f0f8e4; display:flex; align-items:center; gap:12px; font-size:15px; }
.pi-story-verdict > i { color:#c5e993; font-size:25px; }
.pi-story-channels { display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; }
.pi-story-channels > * { padding:8px 12px; border:1px solid #ccd9c0; border-radius:7px; color:#536849; }
.pi-story-channels > strong { background:#193c34; color:#edf7e3; border-color:#193c34; }
.pi-story-phone { max-width:330px; width:100%; margin:auto; background:#e1e9d8; border:5px solid #23473c; border-bottom-width:10px; border-radius:22px; overflow:hidden; box-shadow:0 10px 20px #173a3510; }
.pi-story-phone-header { display:flex; align-items:center; gap:8px; background:#fff; padding:12px; font-size:12px; flex-wrap:wrap; }
.pi-story-phone-header .pi-story-avatar { width:25px; height:25px; font-size:17px; }
.pi-story-phone-header > small { margin-left:auto; color:#5c7165; font-size:9px; }
.pi-story-message { background:#fff; margin:16px; padding:14px; border-radius:0 10px 10px; font-size:13px; line-height:1.65; }
.pi-story-message > div { display:flex; gap:10px; background:#f0f4e9; border-radius:6px; padding:12px 8px; margin-top:12px; font-size:11px; }
.pi-story-message > small { display:block; text-align:right; color:#5b7560; font-size:9px; }
.pi-story-loop { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pi-story-loop > span { display:flex; align-items:center; flex-direction:column; gap:12px; font-size:12px; text-align:center; }
.pi-story-loop i { display:grid; place-items:center; border-radius:16px; background:#fff; width:64px; height:64px; font-size:27px; color:#4f733b; }
.pi-story-loop > b { color:#7a9663; }
.pi-story-learning > svg { width:100%; height:60px; stroke:#6e9150; stroke-width:2; fill:none; }
.pi-story-learning .pi-story-verdict { flex-direction:column; text-align:center; gap:6px; }
.pi-story-verdict > span { font-size:12px; color:#c7dac3; }
.pi-story-footer { padding:15px 28px; display:flex; justify-content:space-between; gap:18px; border-top:1px solid #e1e7d9; color:#63725c; font-size:10px; }
.pi-story-footer a { color:#3e6229; font-size:11px; font-weight:600; }

@media(min-width:1000px) and (min-height:760px) {
    .pi-story.is-enhanced { height:360vh; padding-top:0; padding-bottom:0; }
    .pi-story.is-enhanced .pi-story-sticky { position:sticky; top:124px; padding-top:14px; }
    .pi-story.is-enhanced .pi-story-stage { position:relative; height:374px; }
    .pi-story.is-enhanced .pi-story-frame { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .4s ease,transform .5s ease,visibility .4s; border:0; }
    .pi-story.is-enhanced .pi-story-frame.is-active { opacity:1; visibility:visible; transform:none; }
    .pi-story.is-enhanced .pi-story-shell::after { content:""; display:block; height:3px; background:#7ca34d; transform:scaleX(var(--story-progress)); transform-origin:left; }
    .pi-story.is-enhanced .is-active .pi-story-checks > div { animation:pi-story-arrive .5s both; }
    .pi-story.is-enhanced .is-active .pi-story-checks > div:nth-child(2) { animation-delay:.08s; }
    .pi-story.is-enhanced .is-active .pi-story-checks > div:nth-child(3) { animation-delay:.16s; }
    .pi-story.is-enhanced .is-active .pi-story-checks > div:nth-child(4) { animation-delay:.24s; }
}
@keyframes pi-story-arrive { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
@media(min-width:1000px) and (min-height:760px) and (max-height:850px) {
    .pi-story.is-enhanced .pi-story-sticky { top:105px; padding-top:8px; }
    .pi-story.is-enhanced .pi-story-heading { margin-bottom:16px; }
    .pika-inner.product-editorial .pi-story.is-enhanced h2 { font-size:32px; margin:8px 0; }
    .pi-story.is-enhanced .pi-story-stage { height:330px; }
    .pi-story.is-enhanced .pi-story-frame { padding:20px 28px; gap:30px; }
    .pi-story.is-enhanced .pi-story-visual { min-height:270px; padding:16px; gap:12px; }
    .pika-inner.product-editorial .pi-story.is-enhanced h3 { font-size:29px; margin:12px 0; }
    .pi-story.is-enhanced .pi-story-copy > p { font-size:14px; line-height:1.7; margin-bottom:14px; }
}
@media(max-width:999px) {
    .pi-story { padding:52px 18px; }
    .pi-story-frame { gap:24px; padding:28px; }
    .pi-story-heading > p > span { display:block; margin:8px 0 0; }
}
@media(max-width:640px) {
    .pi-story-frame { grid-template-columns:1fr; padding:24px 18px; gap:22px; }
    .pi-story-topline { padding:15px; flex-wrap:wrap; }
    .pi-story-topline > span { font-size:10px; }
    .pi-story-nav a { padding:12px 3px; font-size:10px; }
    .pi-story-nav a span { display:block; margin:0 0 5px; }
    .pi-story-visual { padding:18px; min-height:0; }
    .pi-story-footer { flex-direction:column; padding:16px 18px; gap:8px; }
    .pi-story-copy > p { font-size:14px; margin-bottom:14px; }
    .pi-story-channels > * { padding:8px; }
}
@media(prefers-reduced-motion:reduce) {
    .product-editorial .inner-scene-window,.pi-story * { animation:none!important; transition:none!important; }
}