/* Platform landing pages (code/free-<platform>-tools/): the shared shell.
 *
 * Loaded by code/includes/platform-page.php on every "Free <Platform>
 * Tools" page, after tools.css and before the page's own
 * assets/css/tool.css (the skin). This file owns the centered column, the
 * section rhythm, the hero cap, the "browse all" line, and the tool-info
 * spacing. Everything that looks like the platform (profile header, cards,
 * mock-ups, buttons) lives in the skin, which overrides the --pp-* tokens
 * declared here. */

:root {
    --pp-col:   1100px;
    --pp-h1:    #962F2E;
    --pp-ink:   #1f2430;
    --pp-muted: #6b7280;
    --pp-link:  #1858a8;
}

/* Hero: capped to the page column on platform pages only (every other page
 * keeps the edge-to-edge hero), so the H1 lines up with the centered
 * content below. Skins recolor the H1 through --pp-h1 or their own rule. */
.page-hero > .container {
    max-width: var(--pp-col);
}
.page-hero h1 {
    color: var(--pp-h1);
}
.page-hero-description {
    color: var(--pp-muted);
}

.pp-section {
    padding: 0 0 44px;
}
.pp-section > .container {
    max-width: var(--pp-col);
}
.pp-profile-section {
    padding-top: 6px;
}
.pp-info-section {
    padding-bottom: 72px;
}
.pp-info-section .tool-info {
    margin-top: 0;
    padding-top: 28px;
}

.pp-all-tools {
    margin: 28px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--pp-muted);
}
.pp-all-tools a {
    font-weight: 600;
    color: var(--pp-link);
}

/* Default (skin-less) profile block: a plain white intro card. */
.pp-default-intro {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    font-size: 15px;
    line-height: 1.65;
    color: var(--pp-ink);
}
.pp-default-intro strong {
    font-weight: 600;
}

/* Interaction states used by the skins' scripts (platform-page.js): the
 * FAQ item a "questions" action jumps to flashes, and a pressed icon
 * button pops. */
.pp-main .faq-item.is-highlighted {
    background: var(--pp-faq-highlight, #fff7ed);
    box-shadow: inset 3px 0 0 var(--pp-link);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}
.is-pop svg {
    animation: pp-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pp-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.32); }
    100% { transform: scale(1); }
}

@media (max-width: 640px) {
    .pp-section { padding-bottom: 32px; }
    .pp-info-section { padding-bottom: 48px; }
    .pp-default-intro { padding: 18px; }
}