/* GENERATED by scripts/build-public-chrome-css.mjs from the @gp-public regions of css/styles.css
 * marked for "about". DO NOT EDIT: edit styles.css, run `npm run public-chrome`, commit both.
 * The "About Grease Pilot" section (the migrate plugin prints it on greasepilot.com's home page, from
 * greasepilot-platform/shared/organization.js) for a
 * host that cannot load styles.css. Every selector is scoped to section[data-gp-org-about], so
 * nothing here styles anything outside that element, and every rem is written out in px (16px to the
 * rem) so the host's root font size cannot resize it. Fonts (Quicksand, Oswald) are the host's to load; the icons are inline SVG in the markup. Regions: type, feature-card, org-about, org-follow, org-about-small. */

/* ── region: type ── */
/* Headings */
section[data-gp-org-about] h1,
section[data-gp-org-about] h2,
section[data-gp-org-about] h3,
section[data-gp-org-about] h4,
section[data-gp-org-about] h5,
section[data-gp-org-about] h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Links */
section[data-gp-org-about] a {
    color: #0170B9;
    transition: color 0.3s;
}

section[data-gp-org-about] a:hover {
    color: #00acff;
}

/* ── region: feature-card ── */
section[data-gp-org-about] .gp-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
section[data-gp-org-about] .gp-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
section[data-gp-org-about] .gp-feature-card {
    background: #fff;
    border: 1px solid var(--color-border-light, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 32px 28px;
    box-shadow: 0 6px 20px rgba(15, 42, 74, 0.10);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
section[data-gp-org-about] .gp-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(15, 42, 74, 0.16);
    border-color: var(--color-primary, #0170b9);
}
section[data-gp-org-about] .gp-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #eef5fb;
    color: var(--color-primary, #0170b9);
    display: flex;
    align-items: center;
    justify-content: center;
}
section[data-gp-org-about] .gp-feature-icon svg { width: 26px; height: 26px; }
section[data-gp-org-about] .gp-feature-card h3 {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: 18.4px;
    color: #1a1a1a;
    margin: 0 0 6.4px;
}
section[data-gp-org-about] .gp-feature-card p {
    font-size: 14.72px;
    color: var(--color-text-light, #666);
    margin: 0;
    line-height: 1.55;
}
@media (max-width: 768px) {
    section[data-gp-org-about] .gp-card-grid,
section[data-gp-org-about] .gp-card-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ── region: org-about ── */
section[data-gp-org-about].gp-org-about *,
section[data-gp-org-about].gp-org-about *::before,
section[data-gp-org-about].gp-org-about *::after { box-sizing: border-box; }
section[data-gp-org-about].gp-org-about {
    /* White, with no rule above it: it continues the home page instead of sitting on a band of its own
       (Michael 2026-09-25). The cards and follow links carry their own borders. */
    background: #fff;
    padding: 64px 20px;
    /* The design system's body type, stated here because a host page's body type is its own. */
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text, #3a3a3a);
}
section[data-gp-org-about] .gp-org-about-inner { max-width: 1100px; margin: 0 auto; }
section[data-gp-org-about].gp-org-about h2 {
    text-align: center;
    font-size: 32px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 16px;
}
section[data-gp-org-about] .gp-org-about-intro {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 16.8px;
    line-height: 1.7;
    color: var(--color-text-light, #666);
}
section[data-gp-org-about] .gp-org-about-cta {
    margin-top: auto;
    padding-top: 17.6px;
    display: inline-flex;
    align-items: center;
    gap: 5.6px;
    font-weight: 700;
    font-size: 15.2px;
    text-decoration: none;
}
section[data-gp-org-about] .gp-org-about-cta svg { width: 16px; height: 16px; }
section[data-gp-org-about] .gp-org-founder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 780px;
    margin: 48px auto 0;
}
section[data-gp-org-about] .gp-org-founder img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(15, 42, 74, 0.18);
}
section[data-gp-org-about] .gp-org-founder p { margin: 0; font-size: 16px; line-height: 1.55; }
section[data-gp-org-about] .gp-org-founder strong { color: #1a1a1a; }
section[data-gp-org-about] .gp-org-founder-link { font-weight: 700; text-decoration: none; }

/* ── region: org-follow ── */
section[data-gp-org-about] .gp-org-follow { margin: 36px 0 0; text-align: center; }
section[data-gp-org-about] .gp-org-follow h3 { font-size: 16px; color: #1a1a1a; margin: 0 0 12px; }
section[data-gp-org-about] .gp-org-follow ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9.6px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
section[data-gp-org-about] .gp-org-follow a {
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
    padding: 6.4px 15.2px;
    border: 1px solid var(--color-border-light, #e2e8f0);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text, #3a3a3a);
    font-weight: 600;
    font-size: 14.4px;
    text-decoration: none;
}
section[data-gp-org-about] .gp-org-follow a:hover { border-color: var(--color-primary, #0170b9); color: var(--color-primary, #0170b9); }
/* The network's own mark left of its name (brand-* icons from the one icon list). The colour is set on
   the mark's path, so the hover colour above changes the words and never the logo (their guidelines). */
section[data-gp-org-about] .gp-org-follow a svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── region: org-about-small ── */
@media (max-width: 600px) {
    section[data-gp-org-about].gp-org-about { padding: 48px 16px; }
    section[data-gp-org-about].gp-org-about h2 { font-size: 25.6px; }
    section[data-gp-org-about] .gp-org-founder { flex-direction: column; text-align: center; }
}