/* Shared styling for the guide pages, matching the home page palette. */
:root {
    --blue: #006CBF;
    --blue-hover: #0080E0;
    --dark: #1A1A2E;
    --muted: #595968;
    --light-bg: #F5F7FA;
    --card-bg: #FFFFFF;
    --accent-bg: #EEF6FF;
    --hair: #E0E4EC;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--dark);
    background: var(--light-bg);
    line-height: 1.7;
}

.container { max-width: 760px; margin: 0 auto; padding: 0 24px; }

header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--hair);
    padding: 16px 0;
}

.header-inner { display: flex; align-items: center; gap: 12px; }
.header-inner img { width: 32px; height: 32px; }
.header-inner a { color: var(--dark); text-decoration: none; font-size: 20px; font-weight: 600; }

article {
    background: var(--card-bg);
    margin: 32px auto;
    padding: 40px;
    border: 1px solid var(--hair);
    border-radius: 12px;
    max-width: 760px;
}

@media (max-width: 700px) {
    article { margin: 16px; padding: 24px; }
}

article h1 { font-size: 32px; line-height: 1.25; margin-bottom: 8px; }
article h2 { font-size: 22px; margin: 32px 0 10px; }
article h3 { font-size: 18px; margin: 24px 0 8px; }
article p, article li { font-size: 17px; margin-bottom: 14px; }
article ul, article ol { padding-left: 24px; margin-bottom: 14px; }
article a { color: var(--blue); }

.standfirst { font-size: 19px; color: var(--muted); margin-bottom: 24px; }
.updated { font-size: 14px; color: var(--muted); margin-bottom: 28px; }

.note {
    background: var(--accent-bg);
    border-left: 4px solid var(--blue);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
}
.note p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { background: var(--light-bg); font-weight: 600; }

.btn {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 8px;
}
.btn:hover { background: var(--blue-hover); }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 22px; }
.swatch { width: 86px; height: 56px; border-radius: 8px; border: 1px solid var(--hair); }

footer {
    border-top: 1px solid var(--hair);
    padding: 24px 0 40px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}
footer a { color: var(--blue); }