/*
 * Privecstasy theme: Poppins, pink-red #ff1f4d, near-black #1c1c25 on an off-white page, as on the WordPress site.
 * Dark mode follows the visitor's system setting, as the WordPress site did by default.
 */

:root {
    --red: #ff1f4d;
    --red-dark: #ba1638;
    --ink: #1c1c25;
    --grey: #757575;
    --text: #1c1c25;
    --heading: #1c1c25;
    --bg: #f8fafb;
    --card: #fff;
    --line: #e6e8ea;
    --table-line: #ddd;
    --shadow: 5px 5px 10px #e9ebec, -5px -5px 10px #fff;
    --link-hover: #000;
}

/* WordPress's dark theme (its "dark-theme" body class, which its script set from the system setting). */
@media (prefers-color-scheme: dark) {
    :root {
        --text: #eee;
        --heading: #eee;
        --bg: #14151c;
        --card: #2c2c3a;
        --line: #353546;
        --table-line: #353546;
        --shadow: 10px 10px 20px #111218, -10px -10px 20px #171820;
        --link-hover: #eee;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--heading); line-height: 1.5; margin: 0 0 .5em; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; border-radius: 15px; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* The theme's red pill button; also the shop buttons that stand on their own in a post (site.yaml legacy.boxes "button"). */
.button-primary, .content .button a {
    display: inline-block;
    padding: 10px 50px;
    border-radius: 30px;
    background: var(--red);
    box-shadow: 1px 1px 2px #d91a41, -1px -1px 2px #ff2459;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    transition: background-color .15s;
}
.button-primary:hover, .content .button a:hover { background: var(--red-dark); color: #fff; }
/* WordPress gave the button no space of its own: the text around it keeps its usual 18px. */
.content .button > p { margin: 0; }

/* Header and menu */

.site-header { position: relative; z-index: 20; }
.header-row {
    display: grid;
    grid-template-columns: 175px 1fr 175px;
    align-items: center;
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 0;
}
.logo { display: block; height: 75px; }
.logo img { height: 75px; width: auto; border-radius: 0; display: block; }

.main-nav { display: flex; justify-content: center; gap: 21px; }
/* Each menu button opens its panel centred under itself, with a small point towards the button, as on WordPress. */
.menu { position: relative; }
.menu > summary {
    list-style: none;
    cursor: pointer;
    padding: 0 25px;
    font-size: 20px;
    font-weight: 800;
    color: var(--heading);
    transition: opacity .25s;
}
.menu > summary::-webkit-details-marker, .mobile-menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { opacity: .75; }
.menu .menu-panel {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
}
.menu .menu-panel::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 3px; background: #1c1c25; transform: rotate(45deg); }

.menu-panel {
    background: #1c1c25;
    border-radius: 15px;
    box-shadow: 4px 5px 15px rgba(0, 0, 0, .25);
    color: #f8f9fe;
}
.menu-panel-vpn { width: 820px; }
.menu-panel-privacy { width: 565px; }
.menu-panel-company { width: 265px; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 20px; }
.menu-panel-privacy .menu-grid { grid-template-columns: repeat(2, 1fr); }
.menu-panel-company .menu-grid { grid-template-columns: 1fr; padding-bottom: 0; }
.menu-col-title { margin: 16px 0 16px 15px; color: #b7b7b7; font-size: 16px; font-weight: 600; text-transform: uppercase; line-height: 1.7; }
.menu-col ul { list-style: none; margin: 0 0 25px; padding: 0; }
.menu-col li { display: flex; align-items: center; margin: 0 0 10px; padding: 5px 15px; border-radius: 30px; line-height: 1.7; }
.menu-col li:hover { background: #2d2d38; }
.menu-col li a { margin-left: 12.5px; color: #f8f9fe; font-size: 16px; font-weight: 500; white-space: nowrap; }
.menu-col li:hover a { color: var(--red); }
.nav-icon {
    flex: none;
    width: 24px;
    height: 24px;
    background-color: #f8f9fe;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.menu-col li:hover .nav-icon { background-color: var(--red); }
.menu-shortlink { display: block; color: #b7b7b7; font-size: 16px; font-weight: 500; line-height: 24px; white-space: nowrap; margin-left: 12.5px; }
.menu-shortlink::after { content: '>'; display: inline-block; padding-left: 5px; transition: padding .25s; }
.menu-shortlink:hover { color: #b7b7b7; opacity: .75; }
.menu-shortlink:hover::after { padding-left: 10px; }
.menu-footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; border-radius: 0 0 15px 15px; background: #16161d; }
.menu-footer .menu-shortlink { margin: 10px 0 12px; font-size: 14px; font-weight: 600; }
.menu-footer .nav-icon { display: inline-block; width: 22px; height: 22px; margin-right: 5px; vertical-align: -5px; background-color: #b7b7b7; }
.menu-panel-company .menu-footer { flex-direction: column; align-items: flex-start; }

/* Phones: a burger button opens one dark panel with every menu. It covers the header, with a close button at the top. */
.mobile-menu { display: none; justify-self: end; }
.mobile-menu > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 80px;
    height: 35px;
    padding: 8px 30px;
    border-radius: 30px;
    background: #1c1c25;
}
.mobile-menu > summary span { display: block; height: 3px; border-radius: 15px; background: #f8f9fe; }
.mobile-menu-panel {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 2.5%;
    right: 2.5%;
    background: #1c1c25;
    border-radius: 15px;
    box-shadow: 4px 5px 15px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.mobile-menu-top { display: flex; justify-content: flex-end; align-items: center; height: 70px; padding: 0 35px; }
.mobile-menu-close { width: 25px; height: 25px; padding: 0; border: 0; cursor: pointer; background: #b7b7b7; -webkit-mask: url(/assets/icons/times-circle.svg) center / contain no-repeat; mask: url(/assets/icons/times-circle.svg) center / contain no-repeat; }
.mobile-menu-close:hover { background: #f8f9fe; }
.mobile-menu-panel .menu-panel { width: auto; box-shadow: none; border-radius: 0; }
.mobile-menu-panel .menu-panel::before { content: none; }
.mobile-menu-panel .menu-grid { grid-template-columns: 1fr 1fr; padding: 0 20px 20px; }
.mobile-menu-panel .menu-col-title { margin: 12px 0 12px 15px; }
.mobile-menu-panel .menu-footer { display: none; }
.mobile-menu-panel .menu-panel-company { background: #16161d; padding: 20px 0; }
.mobile-menu-panel .menu-panel-company .menu-grid { padding-bottom: 0; }

@media (max-width: 1000px) {
    .header-row { grid-template-columns: 1fr auto; }
    .main-nav { display: none; }
    .mobile-menu { display: block; }
}
@media (max-width: 576px) {
    .menu-col-title { font-size: 12px; }
    .menu-col li a { font-size: 14px; }
    .mobile-menu-panel .menu-grid { grid-template-columns: 1fr; }
}

/* Post */

.post-hero { text-align: center; padding: 10px 0; }
.post-categories { margin: 0; padding-bottom: 16px; font-size: 16px; color: var(--red); }
.post-hero h1 { margin: 0; padding: 0 120px 16px; font-size: 48px; line-height: 1.2; text-transform: capitalize; }
.post-author { display: block; font-size: 16px; font-weight: 600; margin-bottom: 1px; }
.post-updated { margin: 0; padding-bottom: 16px; font-size: 16px; color: var(--grey); }
.post-hero .featured { display: block; margin: 0 auto; border-radius: 30px; object-fit: cover; }
.featured-caption { margin: 0; padding-top: 5px; color: var(--grey); font-size: 12px; font-style: italic; }

.post-body { padding: 25px 16px 50px; }
/* WordPress kept 25px under the photo for the "Artwork by" caption, also when there was none: a caption takes that space. */
@media (min-width: 1121px) {
    .post-hero:has(.featured-caption) + .post-body { padding-top: 0; }
}
.post-columns { display: flex; justify-content: center; max-width: 968px; margin: 0 auto; }
.post-content { width: 70%; min-width: 0; padding-bottom: 10px; }
.toc { width: 25%; padding-left: 20px; }
.toc-box { position: sticky; top: 20px; margin-top: 20px; font-size: 16px; }
/* Spacing as tocbot's on WordPress: 10px above and below each entry (5px for an h3), the grey line 6px in, the text 10px
   right of it, and an h3 10px further in. */
.toc-box h2 { font-size: 20px; line-height: 1; margin: 0; padding: 5px 0; }
.toc-box h2::before { content: ''; display: inline-block; width: 18px; height: 3px; margin: 0 7px 5px 0; background: var(--heading); vertical-align: middle; }
.toc-box ol { list-style: none; margin: 0 0 0 6px; padding: 0; border-left: 2px solid var(--line); }
.toc-box li { margin: 0; padding-left: 8px; line-height: 1.4; }
.toc-box a { position: relative; display: block; padding: 10px 0; color: var(--heading); }
.toc-box a:hover { color: var(--red); }
/* The section being read: bold, with a red bar over the grey line. */
.toc-box a.is-active { font-weight: 700; }
.toc-box a.is-active::before { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; width: 2px; background: var(--red); }
/* The h3s of a section, shown while it is being read. */
.toc-box ol ol { display: none; margin: 0; padding-left: 10px; border-left: 0; }
.toc-box li.is-open > ol { display: block; }
.toc-box ol ol li { padding-left: 0; }
.toc-box ol ol a { padding: 5px 0; }
.toc-box ol ol a.is-active::before { left: -20px; }

.further-reading { text-align: center; padding: 0 0 50px; }
.further-reading .container { padding-left: 20px; padding-right: 20px; }
.author-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 50px;
    padding: 30px;
    border-radius: 30px;
    box-shadow: var(--shadow);
}
.author-box img { width: 144px; height: 144px; border-radius: 100px; margin-bottom: 15px; object-fit: cover; }
.author-box h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.3; color: var(--red); }
.author-box p { margin: 0; font-size: 16px; text-align: left; }
.further-title { font-size: 48px; line-height: 1; margin: 0 0 30px; }
.further-grid { display: flex; flex-wrap: wrap; }
.further-card { position: relative; width: 50%; padding: 20px 20px 50px; text-align: left; }
.further-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 20px; display: block; }
.further-card h3 { font-size: 20px; line-height: 1.3; margin: 0 0 30px; text-transform: capitalize; }
.further-card a h3:hover { color: var(--red); }
.read-story { position: absolute; bottom: 20px; font-size: 18px; font-weight: 600; text-decoration: underline; color: var(--heading); }
.read-story:hover { color: var(--red); }

@media (max-width: 1120px) {
    .post-hero h1 { padding: 0 40px 16px; }
    /* WordPress hid the caption here, and the 25px it kept for it under the photo. */
    .featured-caption { display: none; }
    .post-body { padding-top: 0; }
    /* WordPress kept 19px free right of the text here (wider screens and phones not). */
    .post-content { padding-right: 19px; }
}
@media (max-width: 991px) {
    .post-hero { padding-bottom: 0; }
    .post-hero h1 { font-size: 36px; }
    .post-hero .container { padding: 0; }
    .post-hero .featured { width: 100%; height: 40vh; border-radius: 0; margin-bottom: -50px; }
    .post-body { position: relative; margin-top: 0; padding-top: 30px; border-radius: 30px 30px 0 0; background: var(--bg); box-shadow: 0 -24px 43px -28px rgba(36, 36, 36, .6); }
    .post-columns { flex-direction: column; }
    .post-content, .toc { width: 100%; padding: 0; }
    .toc { display: none; }
}
@media (max-width: 767px) {
    .post-hero h1 { padding: 0 10px 10px; font-size: 30px; }
    .further-card { width: 100%; padding: 20px 0 50px; }
    .author-box h2 { font-size: 20px; }
}
@media (max-width: 479px) {
    .post-hero h1 { font-size: 24px; }
    .further-title { font-size: 36px; }
}

/* Article text */

.content { overflow-wrap: break-word; }
/* Spacing as on WordPress: 18px above and below text and lists, none around headings, which keep the body's line height. */
.content p, .content ul, .content ol { margin: 1em 0; }
.content :is(h2, h3, h4) { margin: 0; line-height: 1.7; }
.content ul, .content ol { padding-left: 40px; }
.content hr { border: 0; border-top: 1px solid var(--line); margin: 9px 0; }
.content figure { margin: 1em 0; }
.content .wp-block-image { margin: 1em 0; }
.content .wp-block-image figure { margin: 0; }
/* A centred picture is as wide as its image, and its caption wraps under it, 8px above and 16px below, as on WordPress. */
.content figure.aligncenter { display: table; margin: 0 auto; text-align: center; }
.content .aligncenter > figcaption { display: table-caption; caption-side: bottom; }
/* A picture WordPress left unaligned (site.yaml legacy.boxes "picture"): the browser's figure margin kept it 40px in
   from each side of the text. The space under its caption merges with that margin, as on WordPress.
   WordPress's theme stretched its image to that width, also where the editor had made it smaller. */
.content .picture { margin: 1em 40px; }
.content .picture > p, .content .picture figure { margin: 0; }
.content .picture img { width: 100%; }
/* A picture aligned left (site.yaml legacy.boxes "alignleft"): the text next to it wraps around it, as on WordPress. */
.content .alignleft { float: left; margin: .5em 1em .5em 0; }
.content .alignleft > p { margin: 0; }
/* A picture alone in its paragraph (an image block without caption; Markdown keeps no alignment): centred, as
   WordPress's aligncenter showed them, and inline, so the 10px of line under it stays, as on WordPress. */
.content > p:has(> img:only-child) { text-align: center; }
.content figcaption { font-size: 16px; text-align: center; font-style: italic; color: var(--grey); margin: .5em 0 1em; }
.content blockquote {
    max-width: 670px;
    margin: 20px auto;
    padding-left: 15px;
    border-left: 8px solid var(--red);
    font-size: 20px;
    font-style: italic;
}
.content iframe { max-width: 100%; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 15px; }

/* Tables (TablePress on WordPress): red header, light and white rows. On phones wide tables scroll in their own frame. */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 16px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.content th, .content td { padding: 8px; border-top: 1px solid var(--table-line); text-align: left; vertical-align: top; background: var(--bg); font-size: 14px; }
.content tbody tr:first-child td { border-top: 0; }
/* TablePress's stripes: the first, third, ... row light, the others white, except the first cell (the row's label). */
.content tbody tr:nth-child(even) td:not(:first-child) { background: var(--card); }
.content th { color: var(--red); font-size: 18px; border-top: 0; }
.content tr > :nth-child(2) { padding-left: 25px; }
.content td:first-child { min-width: 175px; }
/* Section rows of the comparison tables ("Streaming", "Security"): a label with an empty value. */
.content td:first-child:has(+ td:empty) { color: var(--red); font-weight: 700; }
/* Wide screens: a provider's name in the header stays on one line ("Private Internet Access"), as on WordPress. */
@media (min-width: 992px) {
    .content th { white-space: nowrap; }
}
@media (max-width: 991px) {
    /* Smaller table text, so a comparison of two providers fits a phone. WordPress went down to 10px; 12px stays readable. */
    .content th { font-size: 14px; }
    .content td { font-size: 12px; }
}
@media (max-width: 767px) {
    /* A comparison of two providers fits a phone; a wider table scrolls in its own frame. */
    .content table { display: block; overflow-x: auto; }
    .content td:first-child { min-width: 100px; }
    .content tr > :nth-child(2) { padding-left: 8px; }
}

/* The boxes of the WordPress theme (site.yaml legacy.boxes): a raised card. */
.content :is(.callout, .winner, .provider, .alternative, .award, .product) { margin: 1.5em 0; padding: 20px; border-radius: 20px; box-shadow: var(--shadow); }
.content :is(.callout, .winner, .provider, .alternative, .award, .product) > :first-child { margin-top: 0; }
.content :is(.callout, .winner, .provider, .alternative, .award, .product) > :last-child { margin-bottom: 0; }
.content :is(.provider, .alternative, .award) img { display: block; max-width: 240px; max-height: 240px; width: auto; margin: 0 0 1em; }
.content :is(.callout, .product) h2, .content .callout h3 { margin-top: 0; }
/* A callout opens with an info icon, a winner box ("Winner: X" after each round of a comparison) with a check. */
.content :is(.callout, .winner)::before { content: ''; display: block; width: 50px; height: 50px; margin-bottom: 10px; background: var(--heading); -webkit-mask: var(--box-icon) center / contain no-repeat; mask: var(--box-icon) center / contain no-repeat; }
.content .callout { --box-icon: url(/assets/icons/info-circle.svg); }
.content .winner { --box-icon: url(/assets/icons/check-circle.svg); }
/* The two providers side by side at the top of a comparison; their last link is the "Visit X" button. */
.content .providers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.5em 0; }
.content .providers .provider { margin: 0; }
.content :is(.provider, .alternative, .award) p:has(> a:only-child) > a, .content .provider p > img + a { display: inline-block; padding: 10px 50px; border-radius: 30px; background: var(--red); box-shadow: 1px 1px 2px #d91a41, -1px -1px 2px #ff2459; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.7; text-align: center; transition: background-color .15s; }
.content :is(.provider, .alternative, .award) p:has(> a:only-child) > a:hover, .content .provider p > img + a:hover { background: var(--red-dark); color: #fff; }
/* An alternative's second link ("Read review") stays a plain link under the button. */
.content .alternative p:last-child > a:only-child { padding: 0; background: none; box-shadow: none; color: var(--red); font-size: inherit; font-weight: 400; }
.content .alternative p:last-child > a:only-child:hover { color: var(--link-hover); }
.content .alternative p:has(> a:only-child) { margin-bottom: .5em; }

/* Pros and cons side by side: "Positives" in green under a plus, "Negatives" in grey under a minus. */
.content .proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.5em 0; }
.content :is(.pros, .cons) h4 { margin: 0 0 .5em; color: var(--grey); font-size: 20px; font-weight: 500; }
.content .pros h4 { color: #16df81; }
.content :is(.pros, .cons) h4::before { content: ''; display: block; width: 22px; height: 28px; margin-bottom: 10px; background: var(--heading); -webkit-mask: var(--box-icon) center / contain no-repeat; mask: var(--box-icon) center / contain no-repeat; }
.content .pros { --box-icon: url(/assets/icons/plus.svg); --item-icon: url(/assets/icons/check-circle-solid.svg); --item-color: #16df81; }
.content .cons { --box-icon: url(/assets/icons/minus.svg); --item-icon: url(/assets/icons/times-circle.svg); --item-color: #757575; }
.content :is(.pros, .cons) ul { padding-left: 0; list-style: none; }
.content :is(.pros, .cons) li { position: relative; padding: 0 0 10px 25px; }
.content :is(.pros, .cons) li::before { content: ''; position: absolute; left: 0; top: .35em; width: 1em; height: 1em; background: var(--item-color); -webkit-mask: var(--item-icon) center / contain no-repeat; mask: var(--item-icon) center / contain no-repeat; }

/* The review summary box ("Short on time? Here's what matters most."). */
/* The provider's logo at its own size, never wider than the box, as on WordPress. */
.content .product img { display: block; width: auto; margin: 0 0 1em; }
.content .product .button-primary { margin: .5em 10px 0 0; }
.product-score { font-size: 18px; }
.score-bar { width: 100%; height: 12px; border-radius: 30px; background: #eee; box-shadow: inset 3px 3px 5px #cacaca, inset -3px -3px 5px #fff; margin: 0 0 1em; overflow: hidden; }
.score-bar span { display: block; height: 100%; border-radius: 30px; background: #16df81; }
.product-more { display: block; margin-top: .5em; }

@media (max-width: 767px) {
    .content .providers, .content .proscons { grid-template-columns: 1fr; }
}

/* Archives: category and author pages */

.archive { padding-top: 50px; padding-bottom: 50px; }
.archive-title { text-align: center; color: var(--red); font-size: 60px; font-weight: 800; line-height: 1; margin: 0 0 38px; }
.archive-intro { text-align: center; font-size: 18px; margin-bottom: 50px; }
.archive-intro p { margin: 0; }
.post-list { display: flex; flex-direction: column; }
.post-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid #cbcbcb; }
.post-row img { display: block; width: 222px; height: 125px; object-fit: cover; flex: none; }
.post-row h3 { font-size: 20px; line-height: 1; margin: 0 0 10px; }
.post-row a h3:hover { color: var(--red); }
.post-row-meta { margin: 0; font-size: 18px; color: var(--heading); }
.author-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.author-hero img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.author-hero h1 { margin: 0; font-size: 36px; line-height: 1.3; }
.author-role { margin: 0; font-size: 18px; font-weight: 600; color: var(--heading); }
.author-bio p { margin: 0 0 30px; }
.listing-title { margin: 50px 0 30px; }
/* Page links (unused while every category fits on one page, as on WordPress). */
.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.pagination [aria-current] { color: var(--red); font-weight: 700; }
.pagination .dots { color: var(--grey); }

@media (max-width: 767px) {
    .archive-title { font-size: 40px; }
    /* Phones: the photo above the text, 200px high; centred on category pages, on the left on the author page.
       As on WordPress, the photo keeps its own shape plus 20px of width (its 20px right margin counted in its width
       there), never wider than the column, cropped to fit: the link is as wide as the photo's shape plus 20px of
       padding, and the photo covers the padding too. */
    .post-row { flex-direction: column; align-items: stretch; }
    .post-row > a:first-child { align-self: flex-start; max-width: 100%; padding-right: 20px; }
    .archive-title ~ .post-list .post-row > a:first-child { align-self: center; }
    .post-row img { width: calc(100% + 20px); max-width: none; height: 200px; }
}

/* Pages */

.page-main { padding-top: 50px; padding-bottom: 50px; }
.page-main h1 { color: var(--red); font-size: 60px; font-weight: 800; line-height: 1; margin: 0 0 40px; }
.page-logo { display: block; width: 200px; height: auto; border-radius: 0; margin-bottom: 10px; }
.page-what-is-my-ip .page-main, .page-browser-fingerprinting-test .page-main, .page-contact .page-main { text-align: center; }
.page-what-is-my-ip .page-main h1, .page-browser-fingerprinting-test .page-main h1 { color: var(--heading); font-size: 48px; font-weight: 700; margin-bottom: 20px; }
.page-photos .page-main h1 { color: var(--heading); font-size: 68px; font-weight: 700; line-height: 1.7; margin-bottom: 0; }
.page-contact .page-main h1 { margin-bottom: 20px; }
.page-brand-resources .page-main h1 { margin-bottom: 15px; }
/* The disclaimer and the policies had plainer headings on WordPress. */
.page-disclaimer .page-main h1 { color: var(--heading); font-size: 48px; font-weight: 700; margin-bottom: 38px; }
/* WordPress kept no space under the disclaimer text, except 400px on wide screens, so the footer sits lower there. */
.page-disclaimer .content > p:last-child { margin-bottom: 0; }
@media (min-width: 992px) {
    .page-disclaimer .content > p:last-child { margin-bottom: 400px; }
}
.page-cookie-policy .page-logo, .page-privacy-policy .page-logo { margin-bottom: 0; }
.page-cookie-policy .page-main h1, .page-privacy-policy .page-main h1 { color: var(--heading); font-size: 36px; font-weight: 700; line-height: 1.7; margin-bottom: 20px; }

/* The tool boxes (what is my IP, browser fingerprint). */
.page-main .pe-box-shadow { margin: 40px 0; padding: 40px; border-radius: 30px; box-shadow: var(--shadow); text-align: left; }
.page-what-is-my-ip .pe-box-shadow h2 { color: var(--red); text-align: center; }
.page-what-is-my-ip .pe-ip-property { margin: 0; font-weight: 700; }
.page-what-is-my-ip .pe-ip-property + p { margin: 0 0 4px; color: var(--red); }
.page-browser-fingerprinting-test .pe-box-shadow h2 { font-size: 30px; }
/* "Fingerprinting" at 48px is 354px wide, more than the text column of a 360px phone. WordPress let the centred heading
   spill out evenly on both sides; the heading uses the full screen width instead, which puts the word in the same place. */
@media (max-width: 479px) {
    .page-browser-fingerprinting-test .page-main h1 { margin-inline: -16px; }
}
.page-browser-fingerprinting-test .pe-box-shadow span { overflow-wrap: anywhere; }
/* The canvas fingerprint is a very long data URL: one line, cut off at the box edge, as on WordPress. */
.page-browser-fingerprinting-test #fingerprint_canvas { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }

/* Photos: two columns of pictures, each linking to Flickr. */
/* Each picture 330px high with 20px around it, as on WordPress. */
.page-photos .content { display: grid; grid-template-columns: 1fr 1fr; }
.page-photos .content > p:not(:has(img)) { grid-column: 1 / -1; margin: 0; }
.page-photos .content > p { margin: 0; }
.page-photos .content > p:first-child { margin-bottom: 22px; }
.page-photos .content > p:has(img) { padding: 20px; }
.page-photos .content img { display: block; width: 100%; height: 330px; object-fit: cover; }
.page-photos .button-row { text-align: center; }
.page-photos .content > .button-row { margin-bottom: 30px; }

/* Contact: three cards. */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 40px; text-align: left; }
.contact-card { padding: 30px; border-radius: 30px; box-shadow: var(--shadow); }
.contact-icon svg { width: 55px; height: 55px; fill: var(--red); }
.contact-card h2 { margin: 10px 0 0; font-size: 36px; line-height: 1.2; }
.contact-card h2 a { color: var(--heading); }
.contact-card p { margin: 0 0 40px; }
.contact-card p a { color: var(--grey); }
.contact-link { text-decoration: underline; }

/* Brand resources: logo rows. */
/* Two columns with 20px around their content, text and logo at the top, as on WordPress. The first row starts as far
   under the intro as WordPress's next section did (its 50px padding below the intro and 50px above the rows). */
.logo-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.content + .logo-row { margin-top: 118px; }
.logo-row + .logo-row { margin-top: 20px; }
.logo-row > div { padding: 20px; }
.logo-row-reverse > div { order: 2; }
.logo-row h2 { font-size: 48px; line-height: 1; margin: 0; }
.logo-row p { margin: 18px 0 30px; }
.logo-row img { max-width: 300px; margin: 20px 0; justify-self: center; border-radius: 0; }

/* About: the mission text, the team on a dark band, then a contact block. */
.page-about .content p { margin: 0; font-size: 20px; }
.team { background: #1c1c25; color: #fff; padding: 50px 0; }
.team-kicker { margin: 36px 0 0; color: var(--red); font-size: 36px; font-weight: 700; line-height: 1; }
.team h2 { color: #fff; font-size: 60px; font-weight: 800; line-height: 1; margin: 0 0 10px; }
.team-intro { color: #afafaf; margin: 0 0 60px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.team-member { padding: 20px 20px 60px; }
.team-member img { display: block; width: 200px; height: auto; border-radius: 100px; margin-bottom: 24px; }
.team-member h4 { color: #fff; margin: 0 0 6px; font-weight: 900; letter-spacing: 1px; line-height: 1.1; }
.team-member .team-role { color: var(--red); margin: 0 0 6px; font-size: 16px; line-height: 1.7; }
.team-member p { font-size: 18px; line-height: 1.5; }
.contact-cta { display: grid; grid-template-columns: 3fr 2fr; align-items: center; padding-top: 50px; padding-bottom: 50px; }
.contact-cta > div { padding: 20px 20px 20px 0; }
.contact-cta-icon { display: block; width: 55px; height: 55px; margin-bottom: 12px; fill: var(--red); }
.contact-cta h2 { font-size: 30px; line-height: 1.7; margin: 0 0 8px; }
.contact-cta p { max-width: 440px; margin: 0 0 16px; }
.contact-cta img { justify-self: center; max-width: min(350px, 80%); border-radius: 0; }

@media (max-width: 991px) {
    .contact-cards { grid-template-columns: 1fr; gap: 30px; }
    .contact-cta, .logo-row { grid-template-columns: 1fr; }
    .logo-row-reverse > div { order: 0; }
    /* Tablets and phones: team members two, then one, per row, photo, name and role centred; the contact block centred. */
    .team { padding: 60px 0 20px; }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .team-member { display: flex; flex-direction: column; align-items: center; }
    .contact-cta { text-align: center; }
    .contact-cta > div { display: flex; flex-direction: column; align-items: center; padding: 20px 20px 30px 0; }
}
@media (max-width: 767px) {
    .page-about .page-main h1 { margin-bottom: 30px; }
    .page-about .content p { font-size: 18px; }
    .team { padding-top: 40px; }
    .team-grid { grid-template-columns: 1fr; }
    .page-photos .page-main h1 { font-size: 48px; }
    .page-disclaimer .page-main h1 { font-size: 36px; }
    .page-main .pe-box-shadow { padding: 20px; }
    .page-photos .content { grid-template-columns: 1fr; }
    .logo-row > div { text-align: center; }
}
@media (max-width: 479px) {
    .page-about .page-main h1, .team h2 { font-size: 48px; }
    .page-about .page-main h1 { margin-bottom: 20px; }
    .page-disclaimer .page-main { padding-bottom: 0; }
    .page-disclaimer .page-main h1 { font-size: 30px; margin-bottom: 20px; }
    .page-disclaimer .content > p:first-child { margin-top: 0; }
    .team-kicker { margin-top: 24px; font-size: 24px; }
}

/* 404 */
.page-404 { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 50px; padding-bottom: 50px; }
.page-404 img { width: 50%; border-radius: 0; }
.page-404 h1 { font-size: 36px; line-height: 1; margin: 0; }
.page-404 p { font-size: 20px; margin: 0 0 46px; }

/* Home */

.home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 102px 40px 50px; }
.home-hero h1 { font-size: 58px; line-height: 1.7; margin: 0 0 8px; }
.home-hero h1 span { display: inline-block; color: var(--red); }
.home-hero p { max-width: 600px; margin: 8px 0 5px; color: #a8a8b9; font-size: 18px; line-height: 1.5; }
.home-hero a { font-size: 16px; text-decoration: underline; margin: 7px 0; }
.home-band-dark { background: #1c1c25; }
.home-band-dark .home-section h2 { color: #fff; }
/* 50px above and below each band of colour; a section that continues the band above it starts right under its cards. */
.home-section { padding-top: 50px; padding-bottom: 50px; }
.home-band:not(.home-band-dark) + .home-band:not(.home-band-dark) .home-section, .home-band-dark + .home-band-dark .home-section { padding-top: 0; }
.home-section-centered { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-heading { display: flex; align-items: center; gap: 10px; font-size: 30px; line-height: 1.7; margin: 0 0 20px; }
.home-heading svg { flex: none; width: 40px; height: 40px; fill: var(--red); }
.home-pill { display: inline-block; padding: 0 15px; border-radius: 30px; background: var(--red); color: #fff; font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
.home-section-centered h2 { font-size: 48px; line-height: 1; margin: 0 0 10px; }
.home-intro { margin: 0 0 25px; color: #a8a8b9; font-size: 18px; }
/* Cards 10px in from the column edges, 20px apart, as on WordPress. The long list of the last section ("Articles") has
   narrower cards (30% of the column), centred, with 20px under each. */
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; padding: 0 10px; text-align: left; }
.home-cards-2 { grid-template-columns: repeat(2, 1fr); }
.home-cards-list { grid-template-columns: repeat(3, 30%); justify-content: center; padding: 0 0 20px; }
.home-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 370px;
    padding: 20px;
    border-radius: 10px;
    /* The picture fills the card from its top left corner, as on WordPress. */
    background: linear-gradient(rgba(0, 0, 0, 0), #000), var(--image) 0 0 / cover, #000;
    transition: transform .05s, box-shadow .05s, filter .05s;
}
.home-card:hover { transform: translateY(3px); filter: brightness(115%); box-shadow: 8px 8px var(--red); }
.home-card-category { color: var(--red); font-size: 16px; line-height: 1.7; }
.home-card h3 { color: #fff; font-size: 24px; line-height: 1.7; margin: 0; }

@media (max-width: 991px) {
    .home-hero { padding-left: 16px; padding-right: 16px; }
    /* Two cards per row; WordPress then kept 20px under the cards of the three-card sections. */
    .home-cards { grid-template-columns: repeat(2, 1fr); }
    .home-cards-3 { padding-bottom: 20px; }
    .home-cards-list { grid-template-columns: repeat(2, 47%); }
}
@media (max-width: 767px) {
    .home-hero p { margin: 10px 0; }
    .home-cards, .home-cards-2, .home-cards-list { grid-template-columns: 1fr; padding: 0 10px 20px; }
    .home-section:has(> .home-cards-list) h2 { margin-bottom: 0; }
}
@media (max-width: 479px) {
    .home-heading { font-size: 22px; }
    .home-heading svg { width: 30px; height: 30px; }
}

/* Footer */

.site-footer { background: #1c1c25; color: #cbcbcb; padding: 100px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 20px 20px 50px; }
.footer-grid > .footer-about { padding-left: 0; }
.footer-grid > div:last-child { padding-right: 0; }
.footer-grid h4 { color: #fff; font-size: 18px; line-height: 1.7; margin: 0 0 19px; }
.footer-about h4 { font-size: 30px; line-height: 1; margin-bottom: 5px; }
.footer-about p { font-size: 14px; margin: 14px 0; }
.footer-grid a { color: #cbcbcb; font-size: 14px; padding-bottom: 3px; }
.footer-grid .footer-about > a { padding-bottom: 0; }
.footer-grid a:hover { color: var(--red); }
.socials { display: flex; gap: 14px; margin-top: 20px; }
.socials a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; padding: 0; }
.socials a:hover { background: var(--red); }
.socials svg { width: 15px; height: 15px; fill: #1c1c25; }
.socials a:hover svg { fill: #fff; }
.copyright { margin-top: 0; margin-bottom: 0; color: #cbcbcb; font-size: 14px; }

@media (max-width: 991px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid > div { padding-left: 0; }
}

/* Dark mode: the burger button stays visible. */
@media (prefers-color-scheme: dark) {
    .mobile-menu > summary { background: #f8f9fe; }
    .mobile-menu > summary span { background: #1c1c25; }
}