.page-logged-in-content {
    margin: 2.5rem 5rem 3rem;
    /* The +15px matches the Bootstrap column gutter inside the title banner, so the body
       text starts on the same line as the heading above it. */
    padding: 0 calc(2rem + 15px);
}

/* Signed out there is no sidebar to set the body in from, so the gutters are the wrapper's own.
   They stay narrower than the signed-in ones: with the full window to work in, a long policy
   page set in as far as the dashboard's would leave a column of text down the middle. */
.page-body {
    margin: 2rem auto 3rem;
    padding: 0 2rem;
}

@media (min-width: 992px) {
    .page-body {
        padding: 0 4rem;
    }
}

@media (max-width: 575.98px) {
    .page-body {
        margin: 1.25rem auto 2rem;
        padding: 0 1.25rem;
    }
}

/* The tint stops at the banner. Taken across the whole page it stopped reading as a heading area
   at all - the terms below sat on the same colour, so nothing marked where the title ended and
   the document began. #f3efff is the tint the group test pages already use (gtc-section-tint), so
   the terms a candidate opens from a group test still read as part of the same product. */
.page-title--test-rules {
    background: #f3efff;
}

/* Body copy uses the same gutters as the page title, so the heading and the text it
   introduces start on one line instead of stepping in and out on a wide screen. */
/* Same column as "About Group Tests" on the category page (gtc-container-narrow): 780px centred
   with 20px gutters. */
.page-body--test-rules {
    max-width: 780px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 991.98px) {
    .page-body--test-rules {
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Lined up with the body copy below, which starts further in than the old 5rem margin -
   a heading that sits left of its own text reads as belonging to something else. */
.page-title--test-rules .page-title__container--test-rules {
    max-width: 780px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 767.98px) {
    .page-logged-in-content {
        margin: 1.5rem 1.5rem 2rem;
        padding: 0 calc(0.75rem + 15px);
    }

    .page-title--test-rules .page-title__container--test-rules {
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*
 * Title and the language switch share the top row; the breadcrumb drops underneath. Sitting
 * level with the heading is what makes the switch read as a control for this page rather
 * than a stray pair of links above the content.
 */
.breadcrumbs-wrap--with-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.breadcrumbs-wrap--with-lang .breadcrumb-title {
    order: 1;
    flex: 1 1 auto;
    margin-bottom: 0;
}

.breadcrumbs-wrap--with-lang .page-lang-switch {
    order: 2;
}

.breadcrumbs-wrap--with-lang > nav[aria-label="breadcrumb "] {
    order: 3;
    flex: 1 1 100%;
}

.page-lang-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* Pills, matching the sidebar's Home button - a language choice is an action, and links
   styled as text read as navigation away from the page. */
.page-lang-switch__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 0.45rem 1.15rem;
    border: 1px solid #d9c9ff;
    border-radius: 999px;
    background: #fff;
    color: #702dff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-lang-switch__link:hover {
    background: #f3ecff;
    border-color: #702dff;
    color: #5a1fd4;
    text-decoration: none;
}

/* The page you are already on - filled, and not clickable. */
.page-lang-switch__link.is-active {
    background: #702dff;
    border-color: #702dff;
    color: #fff;
    pointer-events: none;
}

/* The divider only made sense between two text links. */
.page-lang-switch__sep {
    display: none;
}

@media (max-width: 575.98px) {
    .breadcrumbs-wrap--with-lang {
        justify-content: flex-start;
    }

    .breadcrumbs-wrap--with-lang .breadcrumb-title {
        flex: 1 1 100%;
    }

    .page-lang-switch__link {
        min-width: 0;
        padding: 0.4rem 0.95rem;
        font-size: 0.85rem;
    }
}