/* ============================================================
   Guides, the Insights hub and the editorial standards page
   guides/*.html, insights/index.html, insights/search-quality-manifesto.html
   Loaded after refresh.css. Every rule is scoped to body.page-guide or
   body.page-insights. Buttons, tables, callouts and the entrance
   animations come from refresh.css and the bundles.
   ============================================================ */

.page-guide,
.page-insights {
    --guide-line: rgba(255, 255, 255, 0.08);
    --guide-panel: rgba(255, 255, 255, 0.025);
    --guide-tint: rgba(200, 42, 239, 0.14);
}
[data-theme="light"] .page-guide,
[data-theme="light"] .page-insights {
    --guide-line: rgba(0, 0, 0, 0.09);
    --guide-panel: #F7F6FA;
    --guide-tint: rgba(176, 30, 212, 0.08);
}

/* ---------- 1. Hero: title, one-line summary, byline, breadcrumb ---------- */
.page-guide .guide-hero {
    gap: var(--space-4);
}
.page-guide .guide-hero .title-heading {
    max-width: 920px;
    margin: 0 auto;
}
.page-guide .guide-dek {
    max-width: 680px;
    margin: 0 auto;
    color: var(--text-color);
    font-size: var(--fs-md);
    line-height: 1.6;
}
.page-guide .guide-byline {
    margin: 0;
    color: var(--text-color);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.page-guide .guide-byline a {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
}
.page-guide .guide-byline a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-guide .guide-hero .breadcrumb {
    justify-content: center;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
}
.page-guide .guide-hero .breadcrumb :is(a, p, span) {
    font-size: var(--fs-sm);
}
@media (max-width: 767.98px) {
    .page-guide .guide-dek {
        font-size: var(--fs-base);
    }
}

/* ---------- 2. Layout: summary, then contents beside the article ---------- */
.page-guide .guide-body {
    padding-top: var(--space-7);
}
.page-guide .guide-summary,
.page-guide .guide-layout {
    max-width: 1064px;
    margin-left: auto;
    margin-right: auto;
}
.page-guide .guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}
.page-guide .guide-layout--single {
    max-width: 760px;
}
@media (min-width: 1200px) {
    .page-guide .guide-layout:not(.guide-layout--single) {
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 64px;
        align-items: start;
    }
}

/* ---------- 3. "The short version" ---------- */
.page-guide .guide-summary {
    margin-bottom: var(--space-7);
    padding: var(--card-pad);
    border: 1px solid var(--accent-color-6);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 160% at 0% 0%, var(--guide-tint) 0%, transparent 55%),
        var(--accent-color-4);
}
.page-guide .guide-summary-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-2);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.page-guide .guide-summary h2 {
    margin: 0 0 var(--space-4);
    color: var(--text-color-2);
    font-size: var(--fs-h4);
    line-height: 1.3;
}
.page-guide .guide-summary .guide-list {
    display: grid;
    gap: var(--space-3) var(--space-6);
    margin: 0;
}
.page-guide .guide-summary .guide-list > li {
    margin: 0;
    color: var(--text-color-2);
}
@media (min-width: 992px) {
    .page-guide .guide-summary .guide-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- 4. "On this page" ---------- */
.page-guide .guide-toc {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--guide-line);
    border-radius: var(--radius-md);
    background: var(--guide-panel);
}
.page-guide .guide-toc-title {
    margin: 0 0 var(--space-1);
    color: var(--text-color-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.page-guide .guide-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}
.page-guide .guide-toc li {
    counter-increment: toc;
    break-inside: avoid;
}
.page-guide .guide-toc a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 44px;
    padding: 11px 0;
    color: var(--text-color);
    font-size: var(--fs-sm);
    line-height: 1.45;
    text-decoration: none;
    border-bottom: 1px solid var(--guide-line);
}
.page-guide .guide-toc li:last-child a {
    border-bottom: 0;
}
.page-guide .guide-toc a::before {
    content: counter(toc, decimal-leading-zero);
    flex: 0 0 auto;
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.page-guide .guide-toc a:hover {
    color: var(--text-color-2);
}
@media (min-width: 576px) and (max-width: 1199.98px) {
    .page-guide .guide-toc ol {
        columns: 2;
        column-gap: var(--space-6);
    }
    .page-guide .guide-toc li:nth-last-child(2) a {
        border-bottom: 0;
    }
}
@media (min-width: 1200px) {
    .page-guide .guide-toc {
        position: sticky;
        top: calc(var(--header-h) + 24px);
        max-height: calc(100vh - var(--header-h) - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: transparent;
    }
    .page-guide .guide-toc a {
        min-height: 0;
        padding: 9px 0;
    }
}

/* ---------- 5. Article typography ---------- */
.page-guide .guide-article {
    min-width: 0;
    max-width: 760px;
}
.page-guide .guide-section + .guide-section,
.page-guide .guide-article > .callout + .guide-section {
    margin-top: var(--space-8);
}
.page-guide .guide-article > .callout:first-child {
    margin: 0 0 var(--space-7);
}
.page-guide .guide-section > h2 {
    margin: 0 0 var(--space-4);
    color: var(--text-color-2);
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.page-guide .guide-section h3 {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--text-color-2);
    font-size: clamp(19px, 1.7vw, 22px);
    line-height: 1.3;
}
.page-guide .guide-section p,
.page-guide .guide-section li {
    color: var(--text-color);
}
/* list items read at the same size and weight as the paragraphs around them */
.page-guide :is(.guide-section, .guide-summary) :is(.guide-list, .guide-steps) > li {
    font-size: var(--fs-md);
    font-weight: 500;
}
@media (max-width: 767.98px) {
    .page-guide :is(.guide-section, .guide-summary) :is(.guide-list, .guide-steps) > li {
        font-size: var(--fs-base);
    }
}
.page-guide .guide-section p {
    margin: 0 0 var(--space-4);
}
.page-guide .guide-section strong {
    color: var(--text-color-2);
}
.page-guide :is(.guide-section, .guide-summary, .guide-author, .callout) :is(p, li, td) a {
    color: var(--accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.page-guide :is(.guide-section, .guide-summary, .guide-author, .callout) :is(p, li, td) a:hover {
    text-decoration-thickness: 2px;
}

/* bullet list */
.page-guide .guide-list {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}
.page-guide .guide-list > li {
    position: relative;
    margin-bottom: var(--space-3);
    padding-left: 22px;
    line-height: var(--lh-body);
}
.page-guide .guide-list > li::before {
    content: '';
    position: absolute;
    top: 0.72em;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
}

/* numbered steps with a connecting line */
.page-guide .guide-steps {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.page-guide .guide-steps > li {
    position: relative;
    padding: 0 0 var(--space-5) 52px;
    counter-increment: step;
    line-height: var(--lh-body);
}
.page-guide .guide-steps > li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--accent-color-6);
    border-radius: 50%;
    background: var(--accent-color-4);
    color: var(--accent-text);
    font-size: var(--fs-sm);
    font-weight: 700;
}
.page-guide .guide-steps > li::after {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 6px;
    left: 17px;
    width: 1px;
    background: var(--guide-line);
}
.page-guide .guide-steps > li:last-child {
    padding-bottom: 0;
}
.page-guide .guide-steps > li:last-child::after {
    display: none;
}
.page-guide .guide-steps > li > strong:first-child {
    display: block;
    margin-bottom: 2px;
}

/* side-by-side lists ("build when" / "buy when") */
.page-guide .guide-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.page-guide .guide-split > div {
    padding: var(--card-pad);
    border: 1px solid var(--guide-line);
    border-radius: var(--radius-md);
    background: var(--guide-panel);
}
.page-guide .guide-split h3 {
    margin-top: 0;
    font-size: var(--fs-h5);
}
.page-guide .guide-split .guide-list {
    margin-bottom: 0;
}

/* tables (wrapped in .table-scroll, see refresh.css 15.4) */
.page-guide .guide-section .table-scroll {
    margin: var(--space-5) 0;
    border: 1px solid var(--guide-line);
    border-radius: var(--radius-md);
}
.page-guide .guide-table {
    min-width: 540px;
    margin: 0;
    font-size: var(--fs-sm);
}
.page-guide .guide-table caption {
    caption-side: top;
    padding: 12px 16px;
    color: var(--text-color);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.page-guide .guide-table :is(th, td) {
    padding: 12px 16px;
    line-height: 1.5;
    vertical-align: top;
}
.page-guide .guide-table tbody th {
    color: var(--text-color-2);
    font-weight: 600;
}
[data-theme="light"] .page-guide .guide-table thead th {
    background: #F6F3FA;
    color: #1A1A1A;
}
.page-guide .guide-table tr:last-child > * {
    border-bottom: 0;
}
.page-guide .guide-table .num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
    .page-guide .guide-table {
        font-size: var(--fs-base);
    }
}
/* phones: let cells wrap so the whole table fits; .table-scroll stays as
   the fallback if a word is still too long */
@media (max-width: 575.98px) {
    .page-guide .guide-table {
        min-width: 0;
    }
    .page-guide .guide-table :is(th, td) {
        padding: 10px 12px;
    }
    .page-guide .guide-table .num {
        white-space: normal;
    }
}

/* callouts sit in the reading column */
.page-guide .guide-article .callout {
    margin: var(--space-5) 0;
}

/* ---------- 6. Service cards inside an article ---------- */
.page-guide .guide-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
}
.page-guide .guide-cards .card-service {
    gap: var(--space-4);
    padding: var(--card-pad);
}
.page-guide .guide-cards .card-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.page-guide .guide-cards .service-icon-wrapper {
    flex: 0 0 64px;
    width: 64px;
    min-height: 64px;
    border-radius: 20px;
}
.page-guide .guide-cards .service-icon {
    width: 48px;
    min-height: 48px;
}
.page-guide .guide-cards .service-icon i {
    color: var(--accent-color);
    font-size: 22px;
}
.page-guide .guide-cards .card-service h3 {
    margin: 0;
    color: var(--text-color-2);
    font-size: var(--fs-h5);
    line-height: 1.3;
    transition: transform 0.3s ease, color 0.3s ease;
}
/* the title slides right and takes the accent colour on hover, as the
   .service-title h4 did in the cards these replaced */
.page-guide .guide-cards .card-service:hover h3 {
    color: var(--accent-color);
    transform: translateX(5px);
}
/* #C82AEF on white is 4.2:1, short of AA for the 17px titles on phones */
[data-theme="light"] .page-guide .guide-cards .card-service:hover h3 {
    color: var(--accent-text);
}
@media (prefers-reduced-motion: reduce) {
    .page-guide .guide-cards .card-service h3 {
        transition: none;
    }
    .page-guide .guide-cards .card-service:hover h3 {
        transform: none;
    }
}
.page-guide .guide-cards .card-service p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.page-guide .guide-cards .link-wrapper {
    margin-top: auto;
}

/* ---------- 7. Questions ---------- */
.page-guide .guide-faq {
    display: grid;
    gap: var(--space-3);
}
.page-guide .guide-faq-item {
    padding: var(--space-5);
    border: 1px solid var(--guide-line);
    border-radius: var(--radius-md);
    background: var(--guide-panel);
}
.page-guide .guide-faq-item h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-h5);
}
.page-guide .guide-faq-item p {
    margin: 0;
}

/* ---------- 8. Call to action and author ---------- */
.page-guide .guide-cta {
    margin-top: var(--space-8);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--accent-color-6);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(204, 36, 112, 0.16) 0%, transparent 60%),
        radial-gradient(90% 120% at 0% 100%, var(--guide-tint) 0%, transparent 60%),
        var(--accent-color-4);
}
.page-guide .guide-cta h2 {
    margin: 0 0 var(--space-3);
    color: var(--text-color-2);
    font-size: var(--fs-h3);
}
.page-guide .guide-cta > p {
    max-width: 56ch;
    margin: 0 0 var(--space-5);
    color: var(--text-color);
}
.page-guide .guide-cta .guide-cta-note {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-sm);
}
.page-guide .guide-cta .guide-cta-note a {
    color: var(--accent-text);
}
.page-guide .guide-author {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--guide-line);
}
.page-guide .guide-author-mark {
    display: grid;
    flex: 0 0 52px;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--btn-grad);
    color: #FFFFFF;
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.page-guide .guide-author p {
    margin: 0 0 var(--space-2);
    color: var(--text-color);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.page-guide .guide-author .guide-author-name {
    margin-bottom: 2px;
    color: var(--text-color-2);
    font-size: var(--fs-base);
    font-weight: 700;
}
.page-guide .guide-author .guide-author-name a {
    color: inherit;
    text-decoration: none;
}

/* ---------- 9. Insights hub ---------- */
.page-insights .insights-intro {
    max-width: 700px;
    margin: 0 auto var(--space-5);
    padding: 0 var(--space-5);
    text-align: center;
}
.page-insights .insights-intro p {
    color: var(--text-color);
}
.page-insights .insights-intro a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-insights .insights-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto var(--space-7);
    padding: 0 var(--space-5);
}
.page-insights .insight-cluster {
    max-width: 1100px;
    margin: 0 auto var(--space-8);
    padding: 0 var(--space-5);
}
.page-insights .insight-cluster:last-child {
    margin-bottom: 0;
}
.page-insights .cluster-head h2 {
    margin-bottom: 6px;
    color: var(--text-color-2);
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -0.02em;
}
.page-insights .cluster-head p {
    margin-bottom: 22px;
    color: var(--text-color);
}
.page-insights .insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 18px;
}
.page-insights .insight-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--guide-line);
    border-radius: var(--global-border-radius);
    background: var(--accent-color-3);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
[data-theme="light"] .page-insights .insight-item {
    background: #FFFFFF;
}
.page-insights .insight-item:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 42, 239, 0.45);
}
.page-insights .insight-item h3 {
    margin: 0;
    color: var(--text-color-2);
    font-size: var(--fs-md);
    line-height: 1.35;
}
.page-insights .insight-item p {
    margin: 0;
    color: var(--text-color);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.page-insights .insight-meta {
    color: var(--text-color);
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
}
.page-insights .insight-item .read-more {
    margin-top: auto;
    padding-top: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.page-insights .insight-item--guide {
    border-color: var(--accent-color-6);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--guide-tint) 0%, transparent 60%),
        var(--accent-color-3);
}
[data-theme="light"] .page-insights .insight-item--guide {
    background:
        radial-gradient(120% 140% at 0% 0%, var(--guide-tint) 0%, transparent 60%),
        #FFFFFF;
}
.page-insights .insight-kicker {
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media (max-width: 575.98px) {
    .page-insights .insight-cluster,
    .page-insights .insights-intro,
    .page-insights .insights-pills {
        padding: 0;
    }
    .page-insights .insight-item {
        padding: 18px;
    }
}