/* ==========================================================================
   Platform & Specialty Service Pages (Build 35.9)
   ONE shared stylesheet for all six pages:
     Platform pages   - Storable SEO, Storable Review, Tenant Inc SEO, CCStorage Review
     Specialty pages  - Multi-Location SEO, Google Business Profile Management

   Differences are handled by body modifier classes only
   (.platform-page--storable-seo / --storable-review / --tenant /
    --ccstorage / --multi-location / --gbp).

   Reuses without duplication: Internal Hero System, buttons, faq, cta,
   trust-bar, timeline, pricing + pricing-detail components, blog-card, and
   the sp-* primitives from standard-pages.css. The SEO Services stylesheet
   was NOT copied. No shared component rule is overridden here.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero - shared geometry from Internal Hero System v1.0, restrained
   per-page accent only.
   -------------------------------------------------------------------- */
.internal-hero--platform{
    --internal-hero-bg-image:
        repeating-linear-gradient(90deg, rgba(111,217,224,.07) 0, rgba(111,217,224,.07) 1px, transparent 1px, transparent 52px),
        repeating-linear-gradient(0deg, rgba(111,217,224,.05) 0, rgba(111,217,224,.05) 1px, transparent 1px, transparent 52px),
        linear-gradient(135deg, rgba(19,167,179,.15) 0%, transparent 50%);
}
.internal-hero--platform .internal-hero__bg{background-size:52px 52px,52px 52px,100% 100%;background-position:center;}
.internal-hero--platform .internal-hero__overlay{
    background:
        radial-gradient(circle at 74% 40%,rgba(19,167,179,.10),transparent 36%),
        linear-gradient(90deg,rgba(0,31,49,.93) 0%,rgba(0,31,49,.83) 54%,rgba(0,31,49,.62) 100%);
}
/* Specialty variants get a slightly different accent, same geometry */
.platform-page--multi-location .internal-hero--platform .internal-hero__overlay,
.platform-page--gbp .internal-hero--platform .internal-hero__overlay{
    background:
        radial-gradient(circle at 72% 42%,rgba(245,141,29,.10),transparent 38%),
        linear-gradient(90deg,rgba(0,31,49,.93) 0%,rgba(0,31,49,.83) 54%,rgba(0,31,49,.62) 100%);
}

/* Platform eyebrow strip (e.g. "Storable - SiteLink - StorEdge - Storable Easy") */
.pf-platforms{
    display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
    color:var(--teal-300);font-size:.78rem;font-weight:600;
    letter-spacing:.4px;margin-bottom:12px;
}
.pf-platforms span{opacity:.55;}

/* --------------------------------------------------------------------
   Hero object: ONE reusable platform-interface panel. Abstract and
   aria-hidden - it does not imitate any vendor's real interface and
   carries no numbers. Per-page labels are passed in as text.
   -------------------------------------------------------------------- */
.pf-stack{max-width:380px;margin-left:auto;display:grid;gap:12px;}
.pf-layer{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
    border-radius:12px;padding:14px 16px;backdrop-filter:blur(3px);
    display:flex;align-items:center;gap:12px;
    box-shadow:0 14px 32px rgba(0,10,18,.26);
}
.pf-layer__icon{
    width:32px;height:32px;border-radius:9px;flex-shrink:0;
    background:rgba(19,167,179,.18);border:1px solid rgba(111,217,224,.3);
    display:flex;align-items:center;justify-content:center;color:var(--teal-300);
}
.pf-layer__label{
    flex:1;min-width:0;color:rgba(255,255,255,.82);
    font-size:.82rem;font-weight:600;line-height:1.3;
}
.pf-layer__label small{display:block;color:rgba(255,255,255,.45);font-size:.72rem;font-weight:400;margin-top:2px;}
.pf-layer--accent{background:rgba(19,167,179,.12);border-color:rgba(111,217,224,.32);}
/* Connector between layers - pure CSS, no numbers, no fake data */
.pf-stack__link{
    width:2px;height:12px;margin:0 auto;
    background:linear-gradient(180deg,rgba(111,217,224,.45),rgba(111,217,224,.12));
    justify-self:center;
}
/* Health pips - indicator dots with NO numeric values */
.pf-layer__pips{display:flex;gap:4px;flex-shrink:0;}
.pf-layer__pips i{width:6px;height:6px;border-radius:50%;background:rgba(111,217,224,.5);display:block;}
.pf-layer__pips i:last-child{background:rgba(255,255,255,.18);}

/* --------------------------------------------------------------------
   Two-column comparison (platform built-in vs StorageRankers)
   -------------------------------------------------------------------- */
.pf-versus{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:32px;}
.pf-versus__col{
    background:var(--white);border:1px solid var(--gray-300);border-radius:14px;padding:26px 24px;
}
.pf-versus__col--theirs{border-top:4px solid var(--gray-300);}
.pf-versus__col--ours{border-top:4px solid var(--teal-500);}
.pf-versus__col h3{color:var(--navy-950);font-size:1.02rem;font-weight:700;margin-bottom:14px;}
.pf-versus__col ul{list-style:none;display:grid;gap:11px;margin:0;padding:0;}
.pf-versus__col li{color:var(--gray-700);font-size:.92rem;line-height:1.55;display:flex;gap:9px;align-items:flex-start;}
.pf-versus__col--theirs li::before{content:'\2022';color:var(--gray-700);opacity:.5;font-weight:700;flex-shrink:0;}
.pf-versus__col--ours li::before{content:'\2713';color:var(--teal-500);font-weight:700;flex-shrink:0;}
/* Cross / check variants used where the live page uses explicit marks */
.pf-versus__col--cross li::before{content:'\2717';color:var(--cta-500);font-weight:700;}

/* Feature/service blocks with a "why it matters" note */
.pf-service{
    background:var(--white);border:1px solid var(--gray-300);border-radius:12px;
    padding:24px 24px;box-shadow:0 4px 14px rgba(0,31,49,.05);
}
.pf-service h3{color:var(--navy-950);font-size:1.05rem;font-weight:700;margin-bottom:10px;}
.pf-service p{color:var(--gray-700);font-size:.93rem;line-height:1.6;margin:0 0 10px;}
.pf-service__why{
    margin:0;padding:12px 14px;background:var(--gray-100);border-radius:8px;
    color:var(--gray-700);font-size:.88rem;line-height:1.55;
}
.pf-service__why strong{color:var(--navy-950);}

/* Product/tier breakdown cards (Storable product family, portfolio sizes) */
.pf-products{display:grid;gap:20px;margin-top:32px;}
.pf-product{
    background:var(--white);border:1px solid var(--gray-300);border-radius:12px;padding:24px 26px;
    border-left:4px solid var(--teal-500);
}
.pf-product h3{color:var(--navy-950);font-size:1.05rem;font-weight:700;margin-bottom:10px;}
.pf-product p{color:var(--gray-700);font-size:.94rem;line-height:1.65;margin:0 0 10px;}
.pf-product p:last-child{margin-bottom:0;}
.pf-product dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:12px 0 0;}
.pf-product dt{color:var(--navy-950);font-size:.88rem;font-weight:600;}
.pf-product dd{color:var(--gray-700);font-size:.88rem;margin:0;}

/* Stat/metric row - values migrated verbatim, never generated */
.pf-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px;}
.pf-metric{
    text-align:center;background:var(--white);border:1px solid var(--gray-300);
    border-radius:14px;padding:26px 18px;box-shadow:0 6px 18px rgba(0,31,49,.06);
}
.pf-metric__val{font-size:1.85rem;font-weight:800;color:var(--teal-500);line-height:1.1;margin-bottom:8px;}
.pf-metric__label{font-size:.85rem;color:var(--gray-700);line-height:1.45;}
.pf-metric__label strong{display:block;color:var(--navy-950);margin-bottom:4px;}

/* Figure / screenshot */
.pf-figure{max-width:860px;margin:30px auto 0;}
.pf-figure img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--gray-300);}
.pf-figure figcaption{text-align:center;color:var(--gray-700);font-size:.85rem;margin-top:10px;}

/* Quote */
.pf-quote{
    background:var(--gray-100);border-left:4px solid var(--teal-500);border-radius:0 12px 12px 0;
    padding:26px 28px;margin:28px auto 0;max-width:860px;
}
.pf-quote p{color:var(--gray-700);font-size:1rem;line-height:1.75;font-style:italic;margin:0 0 12px;}
.pf-quote cite{color:var(--navy-950);font-size:.9rem;font-weight:700;font-style:normal;}

/* --------------------------------------------------------------------
   AFFILIATION / INDEPENDENT-REVIEW DISCLAIMER
   Deliberately prominent: full-width card, normal body text size, on a
   tinted background with a solid left rule. Never small print, never
   pushed into the footer. Wording is migrated verbatim per page.
   -------------------------------------------------------------------- */
.pf-disclaimer{
    max-width:860px;margin:36px auto 0;
    background:#FFF8F0;border:1px solid rgba(245,141,29,.4);
    border-left:5px solid var(--amber-500);border-radius:0 12px 12px 0;
    padding:24px 26px;
}
.pf-disclaimer h3{
    color:var(--navy-950);font-size:1rem;font-weight:700;margin-bottom:10px;
    display:flex;gap:9px;align-items:center;
}
.pf-disclaimer h3 svg{color:var(--amber-500);flex-shrink:0;}
.pf-disclaimer p{color:var(--gray-700);font-size:.94rem;line-height:1.65;margin:0 0 10px;}
.pf-disclaimer p:last-child{margin-bottom:0;}
.pf-disclaimer strong{color:var(--navy-950);}
.pf-disclaimer a{color:var(--cta-600);}

/* --------------------------------------------------------------------
   Option / path blocks (Storable Easy three SEO options)
   -------------------------------------------------------------------- */
.pf-options{display:grid;gap:20px;margin-top:32px;}
.pf-option{
    background:var(--white);border:1px solid var(--gray-300);border-radius:12px;padding:24px 26px;
}
.pf-option--no{border-left:4px solid var(--gray-300);}
.pf-option--mid{border-left:4px solid var(--amber-500);}
.pf-option--yes{border-left:4px solid var(--teal-500);}
.pf-option h3{color:var(--navy-950);font-size:1.02rem;font-weight:700;margin-bottom:12px;}
.pf-option ul{list-style:none;display:grid;gap:8px;margin:0;padding:0;}
.pf-option li{color:var(--gray-700);font-size:.92rem;line-height:1.55;display:flex;gap:9px;align-items:flex-start;}
.pf-option li::before{content:'\2022';color:var(--gray-700);opacity:.5;flex-shrink:0;font-weight:700;}
.pf-option li.pf-option__result{margin-top:6px;padding-top:10px;border-top:1px solid var(--gray-300);color:var(--navy-950);font-weight:600;}
.pf-option li.pf-option__result::before{content:'';}

/* Head-to-head rows (StorageRankers vs vendor packages) */
.pf-h2h{display:grid;gap:16px;max-width:880px;margin:32px auto 0;}
.pf-h2h__row{background:var(--white);border:1px solid var(--gray-300);border-radius:12px;padding:22px 24px;}
.pf-h2h__row h3{color:var(--navy-950);font-size:1rem;font-weight:700;margin-bottom:12px;}
.pf-h2h__row p{color:var(--gray-700);font-size:.92rem;line-height:1.6;margin:0 0 8px;}
.pf-h2h__row p:last-child{margin-bottom:0;}
.pf-h2h__row strong{color:var(--navy-950);}

/* --------------------------------------------------------------------
   Responsive comparison table (shared with pricing-detail conventions:
   scroll contained to the wrapper, no columns hidden on mobile)
   -------------------------------------------------------------------- */
.pf-table-wrap{
    max-width:960px;margin:32px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--gray-300);border-radius:12px;background:var(--white);
    box-shadow:0 6px 18px rgba(0,31,49,.06);
}
.pf-table{border-collapse:collapse;width:100%;min-width:600px;font-size:.9rem;}
.pf-table caption{caption-side:top;text-align:left;padding:16px 18px 0;color:var(--gray-700);font-size:.86rem;}
.pf-table th,.pf-table td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--gray-300);vertical-align:middle;}
.pf-table thead th{background:var(--navy-950);color:var(--white);font-size:.86rem;font-weight:700;border-bottom:none;line-height:1.35;}
.pf-table th[scope="row"]{text-align:left;color:var(--navy-950);font-weight:600;background:var(--gray-100);position:sticky;left:0;z-index:1;min-width:170px;}
.pf-table tbody tr:last-child th,.pf-table tbody tr:last-child td{border-bottom:none;}
.pf-table__yes{color:var(--teal-500);font-weight:700;}
.pf-table__no{color:var(--gray-300);}
.pf-table-hint{display:none;text-align:center;color:var(--gray-700);font-size:.83rem;margin-top:10px;}


/* Related insights: two columns on larger screens, one readable card per row on mobile. */
.pf-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin:32px auto 0;}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width:1024px){
    .pf-versus{grid-template-columns:1fr;}
    .pf-metrics{grid-template-columns:repeat(2,1fr);}
    .pf-stack{max-width:100%;}
}
@media (max-width:768px){
    .pf-table-hint{display:block;}
    .pf-related-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
    .pf-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    .pf-metric{padding:18px 10px;}
    .pf-metric__val{font-size:1.45rem;}
    .pf-metric__label{font-size:.78rem;}
    .pf-versus__col,.pf-product,.pf-option,.pf-h2h__row,.pf-service{padding:18px 18px;}
    .pf-disclaimer{padding:18px 18px;}
    .pf-quote{padding:20px 18px;}
    .pf-product dl{grid-template-columns:1fr;gap:4px;}
    .pf-product dt{margin-top:8px;}
    .pf-table{min-width:540px;font-size:.85rem;}
    .pf-table th,.pf-table td{padding:11px 12px;}
    .pf-table th[scope="row"]{min-width:140px;}
    .pf-platforms{font-size:.72rem;gap:6px 10px;}
}
@media (max-width:390px){
    .pf-table{min-width:500px;}
    .pf-table th[scope="row"]{min-width:126px;font-size:.82rem;}
}