/*
 * Photo Express theme.
 *
 * The site is the document the instrument belongs to: editorial, calm, closer to
 * a well-set government form than to a SaaS landing page.
 *
 * Tokens duplicate the values in
 * photoexpress-engine/assets/app/styles/tool.css deliberately. The two agree by
 * shared values, not by dependency: the tool must keep working under any theme,
 * and this theme must keep working with the plugin disabled. Change one, change
 * the other.
 *
 * The critical subset — tokens, typography, header — is in critical.css and is
 * inlined in the head. This file carries everything else.
 */

/* ---------- layout ---------- */

/*
 * No leading space of its own. Every template that follows opens with an
 * element that already carries its own top padding — .pex-hero on the document
 * pages, .pex-page on a written page, the full-bleed hero on the front page —
 * so a shared 32px on top of that only showed up as a strip of paper-grey
 * between the topbar and a white hero.
 */
.pex-main {
    padding-block: 0 calc(var(--pex-step) * 4);
}

.pex-section {
    padding-block: calc(var(--pex-step) * 5);
    border-top: 1px solid var(--pex-rule);
}

.pex-section:first-child {
    border-top: 0;
}

.pex-prose {
    max-width: var(--pex-measure);
}

.pex-prose p,
.pex-prose ul,
.pex-prose ol {
    margin-block: 0 1em;
}

.pex-lede {
    font-size: 1.25rem;
    color: var(--pex-ink-soft);
    max-width: var(--pex-measure);
}

/* ---------- the datasheet ---------- */

/*
 * The idea the whole site turns on. Competitors open a country page with a stock
 * photograph of a stranger; this opens with the requirements themselves, set as
 * a technical document, each figure cited to its source.
 */

.pex-datasheet {
    border: 1px solid var(--pex-ink);
    background: #fff;
}

.pex-datasheet__head {
    display: flex;
    justify-content: space-between;
    gap: var(--pex-step);
    padding: calc(var(--pex-step) * 2);
    border-bottom: 1px solid var(--pex-ink);
    font-family: var(--pex-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pex-ink-soft);
}

.pex-datasheet__grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .pex-datasheet__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.pex-spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pex-step);
    padding: calc(var(--pex-step) * 1.75) calc(var(--pex-step) * 2);
    border-bottom: 1px solid var(--pex-rule);
}

@media (min-width: 40rem) {
    .pex-spec:nth-child(odd) {
        border-right: 1px solid var(--pex-rule);
    }
}

.pex-spec__label {
    font-size: 0.9375rem;
    color: var(--pex-ink-soft);
}

/* Figures in mono: they are measurements, and they should look measured. */
.pex-spec__value {
    font-family: var(--pex-mono);
    font-size: 0.9375rem;
    text-align: right;
    white-space: nowrap;
}

.pex-swatch {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;
    border: 1px solid var(--pex-rule);
    vertical-align: -0.05em;
}

/* ---------- provenance ---------- */

/*
 * Shown to the visitor, not hidden in an admin field. The spec model exists so
 * that every figure is traceable; a site that has that and does not say so has
 * wasted it.
 */
.pex-source {
    margin-top: calc(var(--pex-step) * 2);
    font-size: 0.875rem;
    color: var(--pex-ink-soft);
}

.pex-source__date {
    font-family: var(--pex-mono);
}

/* ---------- rules checklist ---------- */

.pex-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pex-rule);
}

.pex-rules li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--pex-step);
    padding: calc(var(--pex-step) * 1.5) 0;
    border-bottom: 1px solid var(--pex-rule);
    font-size: 0.9375rem;
}

.pex-rules svg {
    width: 1.25rem;
    height: 1.25rem;
}

/*
 * A neutral rule marker, not a tick or a cross.
 *
 * The tool's checklist uses a cross for "your photo failed this". Reusing it
 * here for "this is not permitted" would give one symbol two meanings on the
 * same site, and a red cross beside "No glasses" reads as an error rather than
 * a requirement. The wording carries the meaning; the marker only anchors it.
 */
.pex-rules svg {
    color: var(--pex-ink-soft);
}

/* ---------- trust ---------- */

.pex-trust {
    display: grid;
    gap: calc(var(--pex-step) * 3);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .pex-trust {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pex-trust h3 {
    font-family: var(--pex-ui);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.pex-trust p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--pex-ink-soft);
}

/* ---------- prices ---------- */

.pex-prices {
    display: grid;
    gap: calc(var(--pex-step) * 2);
    grid-template-columns: 1fr;
    max-width: 44rem;
}

@media (min-width: 40rem) {
    .pex-prices {
        grid-template-columns: 1fr 1fr;
    }
}

.pex-price {
    padding: calc(var(--pex-step) * 3);
    border: 1px solid var(--pex-rule);
    background: #fff;
}

.pex-price__amount {
    font-family: var(--pex-mono);
    font-size: 2rem;
}

/* ---------- buttons ---------- */

.pex-btn,
.pex-button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: calc(var(--pex-step) * 1.75) calc(var(--pex-step) * 3.5);
    border: 1px solid var(--pex-accent);
    border-radius: 999px;
    background: var(--pex-accent);
    color: var(--pex-on-accent);
    text-decoration: none;
    cursor: pointer;
}

.pex-btn:hover {
    background: var(--pex-accent-lit);
    border-color: var(--pex-accent-lit);
}

.pex-btn--ghost {
    background: transparent;
    border-color: var(--pex-rule);
    color: var(--pex-accent-deep);
}

.pex-btn--ghost:hover {
    background: var(--pex-accent-wash);
    border-color: var(--pex-accent-deep);
}

/* ---------- document index ---------- */

.pex-docs {
    display: grid;
    gap: calc(var(--pex-step) * 2);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.pex-doc {
    padding: calc(var(--pex-step) * 2);
    border: 1px solid var(--pex-rule);
    background: #fff;
}

.pex-doc a {
    text-decoration: none;
    font-weight: 600;
    color: var(--pex-ink);
}

.pex-doc a:hover {
    text-decoration: underline;
}

.pex-doc__meta {
    margin: 0.35rem 0 0;
    font-family: var(--pex-mono);
    font-size: 0.8125rem;
    color: var(--pex-ink-soft);
}

/* ---------- standalone pages ---------- */

/*
 * The legal set and anything else written in the editor.
 *
 * A centred measure, not the shell's full width: these are read straight
 * through, and a line longer than about 70 characters loses the reader on the
 * return sweep. Headings step down hard from the landing page's display sizes —
 * an h2 at 2.4rem inside a policy is shouting section labels at someone trying
 * to find one clause.
 */

.pex-page {
    width: min(100% - 2.5rem, 46rem);
    margin-inline: auto;
    padding-block: calc(var(--pex-step) * 7) calc(var(--pex-step) * 10);
}

.pex-page__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 2.75rem);
}

/*
 * The "Last updated" line, which each page opens with. Styling it by position
 * rather than by class keeps the page content plain HTML that survives being
 * edited in WordPress.
 */
.pex-page__body > p:first-child em {
    display: inline-block;
    margin-bottom: calc(var(--pex-step) * 2);
    color: var(--pex-ink-soft);
    font-size: 0.9375rem;
    font-style: normal;
}

.pex-page__body h2 {
    margin: calc(var(--pex-step) * 6) 0 calc(var(--pex-step) * 1.5);
    font-size: 1.375rem;
    letter-spacing: -0.012em;
}

.pex-page__body h3 {
    margin: calc(var(--pex-step) * 4) 0 var(--pex-step);
    font-size: 1.0625rem;
}

.pex-page__body p,
.pex-page__body li {
    line-height: 1.65;
}

.pex-page__body p {
    margin: 0 0 calc(var(--pex-step) * 2);
}

.pex-page__body ul,
.pex-page__body ol {
    margin: 0 0 calc(var(--pex-step) * 2);
    padding-left: calc(var(--pex-step) * 3);
}

.pex-page__body li {
    margin-bottom: calc(var(--pex-step) * 1.25);
}

.pex-page__body li::marker {
    color: var(--pex-accent-deep);
}

.pex-page__body a {
    color: var(--pex-accent-deep);
}

.pex-page__body img {
    max-width: 100%;
    height: auto;
}

/* ---------- editorial ---------- */

.pex-entry__meta {
    font-family: var(--pex-mono);
    font-size: 0.8125rem;
    color: var(--pex-ink-soft);
}

.pex-entry img,
.pex-prose img {
    max-width: 100%;
    height: auto;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- home: hero band ---------- */

/*
 * The reference uses a tinted band behind the hero and again behind the steps,
 * which gives the page a rhythm without any imagery. Reproduced with the brand
 * wash rather than a photograph — there is no model release to worry about and
 * nothing to load.
 */
.pex-hero-band {
    background: var(--pex-accent-wash);
    border-bottom: 1px solid var(--pex-rule);
}

.pex-hero-band__inner {
    display: grid;
    gap: calc(var(--pex-step) * 4);
    align-items: center;
    padding-block: calc(var(--pex-step) * 8);
}

@media (min-width: 860px) {
    .pex-hero-band__inner {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.pex-hero-band__title {
    margin: 0 0 var(--pex-step);
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
}

.pex-hero-band__actions {
    margin: calc(var(--pex-step) * 3) 0 0;
}

.pex-btn--lg {
    padding: calc(var(--pex-step) * 2) calc(var(--pex-step) * 4);
    font-size: 1.0625rem;
}

/* The assurances that stand in for a review score. */
.pex-assure {
    margin: calc(var(--pex-step) * 3) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: calc(var(--pex-step) * 1.25);
    font-size: 0.9375rem;
}

.pex-assure li {
    display: flex;
    gap: var(--pex-step);
    align-items: baseline;
}

.pex-assure li::before {
    content: '';
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: var(--pex-accent);
}

/* ---------- home: the specification figure ---------- */

.pex-specfig {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-inline: auto;
    display: block;
}

.pex-specfig__frame {
    fill: #fff;
    stroke: var(--pex-accent-deep);
    stroke-width: 2;
}

.pex-specfig__guide,
.pex-specfig__dim {
    stroke: var(--pex-accent-deep);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.pex-specfig__eye {
    stroke: var(--pex-fail);
    stroke-width: 1;
}

.pex-specfig__head,
.pex-specfig__shoulders {
    fill: none;
    stroke: var(--pex-ink-soft);
    stroke-width: 1.5;
}

.pex-specfig__dim {
    stroke-dasharray: none;
}

.pex-specfig__label {
    fill: var(--pex-ink-soft);
    font-family: var(--pex-mono);
    font-size: 13px;
}

/* ---------- home: steps ---------- */

.pex-steps-band {
    padding-block: calc(var(--pex-step) * 8);
    border-bottom: 1px solid var(--pex-rule);
}

.pex-steps-band__title {
    margin: 0 0 calc(var(--pex-step) * 4);
}

/*
 * The numbered how-to on a document page. Numbering is a CSS counter rather
 * than markup, so the steps can be reordered or made conditional in PHP without
 * anyone renumbering anything by hand.
 */
.pex-howto {
    display: grid;
    gap: calc(var(--pex-step) * 2);
    margin: calc(var(--pex-step) * 3) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: pex-howto;
}

@media (min-width: 46rem) {
    .pex-howto { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 72rem) {
    .pex-howto { grid-template-columns: repeat(3, 1fr); }
}

.pex-howto__step {
    counter-increment: pex-howto;
    padding: calc(var(--pex-step) * 3);
    background: #fff;
    border-radius: var(--pex-r);
    box-shadow: var(--pex-shadow);
}

/* The number wears the brand tile: rounded, top-right corner cut away. */
.pex-howto__step::before {
    content: counter(pex-howto);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: calc(var(--pex-step) * 2);
    background: var(--pex-accent);
    color: var(--pex-on-accent);
    font-family: var(--pex-display);
    font-weight: 800;
    font-size: 1rem;
    border-radius: 10px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.pex-howto__step h3 {
    margin: 0 0 0.35rem;
    font-family: var(--pex-ui);
    font-weight: 600;
    font-size: 1rem;
}

.pex-howto__step p {
    margin: 0;
    color: var(--pex-ink-soft);
    font-size: 0.9375rem;
}

/* ---------- home: feedback ---------- */

.pex-feedback {
    padding: calc(var(--pex-step) * 4);
    background: var(--pex-accent-wash);
    border: 1px solid var(--pex-rule);
}

.pex-feedback h2 {
    margin-top: 0;
}

.pex-feedback p {
    max-width: var(--pex-measure);
}

/* ---------- home: editorial headings ---------- */

/*
 * The display face is set at 1.1 line-height and no size of its own for h3, so
 * these were rendering smaller than the paragraphs beneath them — a heading that
 * reads as less important than its own body text is not doing its job.
 */
.pex-editorial h3 {
    margin-top: calc(var(--pex-step) * 5);
    margin-bottom: var(--pex-step);
    font-size: 1.5rem;
}

.pex-editorial p {
    max-width: var(--pex-measure);
}

/* ================= homepage sections 3-11 ================= */

/* ---------- 3. assurance strip ---------- */

.pex-strip {
    padding-block: calc(var(--pex-step) * 4);
    border-bottom: 1px solid var(--pex-rule);
}

.pex-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--pex-step) * 2) calc(var(--pex-step) * 5);
}

.pex-strip__label {
    margin: 0;
    font-family: var(--pex-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pex-ink-soft);
}

.pex-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pex-step) * 4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pex-strip__item a {
    display: grid;
    padding: calc(var(--pex-step) * 1.25) calc(var(--pex-step) * 2.5);
    background: #fff;
    border: 1px solid var(--pex-rule);
    border-radius: 999px;
    color: var(--pex-ink);
    font-weight: 600;
    text-decoration: none;
}

.pex-strip__item a:hover { color: var(--pex-accent-deep); }

.pex-strip__item span {
    font-family: var(--pex-mono);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--pex-ink-soft);
}

.pex-strip__none { color: var(--pex-ink-soft); }

/* ---------- white surface: steps through to the footer ---------- */

/*
 * display: flow-root, because the closing card's 64px bottom margin was
 * collapsing straight out of this wrapper: the white surface ended at the
 * card's edge and 64px of paper showed between it and the footer wave.
 * Measured, not guessed - the surface and the card had the same bottom.
 */
.pex-surface-white {
    background: #fff;
    display: flow-root;
}

/*
 * The homepage ends on that full-bleed white surface, so main's own bottom
 * padding would paint a strip of paper under it. Every other template ends on
 * ordinary content inside .pex-wrap and still wants the breathing room.
 */
.home .pex-main {
    padding-bottom: 0;
}

/* ---------- 4. three steps ---------- */

.pex-band {
    padding-block: calc(var(--pex-step) * 9);
    background: #fff;
}

.pex-band__title {
    margin: 0 0 calc(var(--pex-step) * 6);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.pex-steps {
    display: grid;
    gap: calc(var(--pex-step) * 5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 820px) {
    .pex-steps { grid-template-columns: repeat(3, 1fr); }
}

.pex-step__icon {
    width: 44px;
    height: 44px;
    margin-bottom: calc(var(--pex-step) * 2);
    fill: none;
    stroke: var(--pex-accent-deep);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pex-step h3 {
    margin: 0 0 var(--pex-step);
    font-size: 1.375rem;
}

.pex-step p {
    margin: 0;
    color: var(--pex-ink-soft);
}

/* ---------- 5/6/9. editorial ---------- */

.pex-article {
    padding-block: calc(var(--pex-step) * 8);
    border-bottom: 1px solid var(--pex-rule);
}

.pex-article > h2 {
    margin: 0 0 calc(var(--pex-step) * 3);
    font-size: clamp(1.75rem, 3.5vw, 2.375rem);
}

.pex-article p { max-width: var(--pex-measure); }

/*
 * Two columns from 960px: the heading owns the left, everything else flows in
 * the right. Before this, every editorial section was a ~68ch column with the
 * entire right half of a 1200px shell empty — the page read as a document.
 * The heading spans a generous row count; implicit rows without content are
 * zero-height, so the over-span costs nothing.
 */
@media (min-width: 960px) {
    .pex-article {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) minmax(0, 2.1fr);
        column-gap: calc(var(--pex-step) * 8);
    }

    .pex-article > * { grid-column: 2; }

    /* Only the first heading owns the left column. A second h2 in the same
       article flows with the content — two of them pinned to the same cell
       rendered printed over each other. */
    .pex-article > h2:first-of-type {
        grid-column: 1;
        grid-row: 1 / span 40;
        align-self: start;
        position: sticky;
        top: 110px;
    }

    .pex-article p { max-width: none; }
}

.pex-reasons,
.pex-howto-list {
    max-width: var(--pex-measure);
    display: grid;
    gap: calc(var(--pex-step) * 2.5);
    padding-left: 1.25rem;
}

.pex-reasons { list-style: none; padding-left: 0; }

.pex-reasons li {
    padding: calc(var(--pex-step) * 3.5);
    background: #fff;
    border: 1px solid var(--pex-rule);
    border-radius: var(--pex-r);
    box-shadow: var(--pex-shadow);
}

@media (min-width: 700px) {
    .pex-reasons { grid-template-columns: repeat(2, 1fr); }
    .pex-reasons li:last-child { grid-column: 1 / -1; }
}

.pex-howto-list li::marker {
    font-family: var(--pex-mono);
    color: var(--pex-accent-deep);
}

/* ---------- 7. in numbers ---------- */

.pex-figures {
    display: grid;
    gap: calc(var(--pex-step) * 4);
    margin: 0 0 calc(var(--pex-step) * 4);
}

@media (min-width: 720px) {
    .pex-figures { grid-template-columns: repeat(4, 1fr); }
}

.pex-figure {
    padding: calc(var(--pex-step) * 3.5);
    background: #fff;
    border: 1px solid var(--pex-rule);
    border-radius: var(--pex-r);
    box-shadow: var(--pex-shadow);
}

.pex-figure dt {
    font-family: var(--pex-display);
    font-weight: 800;
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--pex-accent-deep);
}

.pex-figure dt span {
    font-family: var(--pex-mono);
    font-size: 1rem;
    margin-left: 0.15em;
}

.pex-figure dd {
    margin: var(--pex-step) 0 0;
    font-size: 0.9375rem;
    color: var(--pex-ink-soft);
}

.pex-note {
    padding: calc(var(--pex-step) * 2.5) calc(var(--pex-step) * 3);
    border-radius: var(--pex-r-sm);
    background: var(--pex-accent-wash);
    font-size: 0.9375rem;
    color: var(--pex-ink-soft);
}

/* ---------- 8. reviews ---------- */

.pex-empty-reviews {
    max-width: var(--pex-measure);
    padding: calc(var(--pex-step) * 4);
    background: #fff;
    border: 1px solid var(--pex-rule);
    border-left: 4px solid var(--pex-accent);
    border-radius: var(--pex-r);
}

.pex-empty-reviews__lead {
    margin-top: 0;
    font-family: var(--pex-display);
    font-size: 1.5rem;
    color: var(--pex-ink);
}

.pex-empty-reviews p:last-child { margin-bottom: 0; }

/* ---------- 10. questions ---------- */

.pex-qa {
    max-width: var(--pex-measure);
    display: grid;
    gap: calc(var(--pex-step) * 1.5);
}

.pex-qa details {
    background: #fff;
    border: 1px solid var(--pex-rule);
    border-radius: var(--pex-r);
}

.pex-qa details[open] { border-color: var(--pex-accent-deep); }

.pex-qa summary {
    padding: calc(var(--pex-step) * 2.5) calc(var(--pex-step) * 3);
    font-weight: 600;
    cursor: pointer;
}

.pex-qa summary:focus-visible {
    outline: 3px solid var(--pex-accent-deep);
    outline-offset: 2px;
}

.pex-qa details[open] summary { color: var(--pex-accent-deep); }

.pex-qa p {
    margin-top: 0;
    padding: 0 calc(var(--pex-step) * 3) calc(var(--pex-step) * 2.5);
    color: var(--pex-ink-soft);
}

/* ---------- closing card ---------- */

.pex-cta-card {
    margin-block: calc(var(--pex-step) * 8);
    padding: calc(var(--pex-step) * 7) calc(var(--pex-step) * 6);
    text-align: center;
    background: var(--pex-accent);
    border-radius: var(--pex-r-lg);
    color: var(--pex-on-accent);
}

.pex-cta-card h2 {
    margin: 0 0 var(--pex-step);
    color: var(--pex-on-accent);
    font-size: clamp(1.75rem, 3.5vw, 2.375rem);
}

.pex-cta-card p {
    max-width: none;
    margin: 0 0 calc(var(--pex-step) * 3.5);
    color: rgba(20, 24, 31, 0.82);
}

.pex-cta-card .pex-btn {
    display: inline-block;
    padding: calc(var(--pex-step) * 1.75) calc(var(--pex-step) * 3.5);
    background: var(--pex-ink);
    border-color: var(--pex-ink);
    color: #fff;
    font-family: var(--pex-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.pex-cta-card .pex-btn:hover { background: #2b3140; border-color: #2b3140; }

/* Motion, kept to the two properties that read as responsiveness. */
.pex-btn { transition: background-color .15s ease, transform .15s ease; }
.pex-btn:hover { transform: translateY(-1px); }
.pex-btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .pex-btn { transition: none; }
    .pex-btn:hover { transform: none; }
}

/* ---------- 11. footer ---------- */

/*
 * Dark, deliberately. The page above is paper; ending it on ink gives the
 * footer real presence instead of trailing off, and the accent card reads
 * far stronger against it. Same tokens, inverted.
 */
.pex-footer {
    background: var(--pex-ink);
    color: #c9cdd6;
}

.pex-footer__top {
    display: grid;
    gap: calc(var(--pex-step) * 6);
    padding-block: calc(var(--pex-step) * 9) calc(var(--pex-step) * 7);
}

@media (min-width: 900px) {
    /* The brand column is a fixed length, not 1.4fr: repeat(auto-fit) is only
       valid alongside definite track sizes, and mixing it with fr made the
       whole declaration invalid — the footer rendered as a single column. */
    .pex-footer__top {
        grid-template-columns: minmax(200px, 300px) repeat(auto-fit, minmax(140px, 1fr));
        column-gap: calc(var(--pex-step) * 5);
    }
}

.pex-footer .pex-brand { color: var(--pex-accent); }
.pex-footer .pex-brand__text { color: #fff; }

.pex-footer__blurb {
    max-width: 30ch;
    margin: calc(var(--pex-step) * 2) 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #9aa1ad;
}

.pex-footer__heading {
    margin: 0 0 calc(var(--pex-step) * 2.5);
    font-family: var(--pex-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa1ad;
}

.pex-footer__col ul {
    display: grid;
    gap: calc(var(--pex-step) * 1.75);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pex-footer__col a {
    font-size: 0.9375rem;
    color: #e4e6eb;
    text-decoration: none;
}

.pex-footer__col a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pex-footer__card {
    align-self: start;
    padding: calc(var(--pex-step) * 3.5);
    background: var(--pex-accent);
    border-radius: var(--pex-r);
    color: var(--pex-on-accent);
}

.pex-footer__card h2 {
    margin: 0 0 var(--pex-step);
    font-size: 1.375rem;
    color: var(--pex-on-accent);
}

.pex-footer__card p {
    margin: 0 0 calc(var(--pex-step) * 2.5);
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(20, 24, 31, 0.82);
}

/* Inverted button, so it does not vanish into the card it sits on. */
.pex-footer__card .pex-btn {
    background: #fff;
    color: var(--pex-accent-deep);
}

.pex-footer__card .pex-btn:hover {
    background: var(--pex-accent-wash);
}

.pex-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pex-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--pex-step) * 2) calc(var(--pex-step) * 4);
    padding-block: calc(var(--pex-step) * 4);
    font-size: 0.8125rem;
    color: #9aa1ad;
}

.pex-footer__legal-inner ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pex-step) * 3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pex-footer__legal-inner a { color: #c9cdd6; }
.pex-footer__legal-inner a:hover { color: #fff; }

.pex-footer__copy,
.pex-footer__note { margin: 0; }

.pex-footer__note { flex-basis: 100%; }

/* Back to top, pinned to the legal row's right edge. An anchor, not a script:
   #top is the header, and smooth-scroll is one CSS property. */
.pex-footer__toplink {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #e4e6eb;
    text-decoration: none;
}

.pex-footer__toplink:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}


/* ---------- document index ---------- */

/*
 * Built for a directory that grows. Everything here holds its shape from one
 * document to two hundred: an A-Z rail, a filter, and a card grid that reflows
 * rather than a table that scrolls.
 */

.pex-dirhead {
    padding-block: calc(var(--pex-step) * 7) calc(var(--pex-step) * 4);
    max-width: 46rem;
}

.pex-dirhead__count {
    margin: calc(var(--pex-step) * 2) 0 0;
    font-family: var(--pex-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pex-ink-soft);
}

/* The A-Z rail. Letters without a document stay in place, greyed. */
.pex-atoz {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-block: calc(var(--pex-step) * 2);
    border-top: 1px solid var(--pex-rule);
    border-bottom: 1px solid var(--pex-rule);
}

.pex-atoz a,
.pex-atoz span {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.pex-atoz a {
    color: var(--pex-ink);
    background: var(--pex-accent-wash);
}

.pex-atoz a:hover {
    background: var(--pex-accent);
    color: var(--pex-on-accent);
}

.pex-atoz span {
    color: #b9b2a8;
}

/* ---------- the filter ---------- */

.pex-docfilter {
    display: grid;
    gap: calc(var(--pex-step) * 0.75);
    max-width: 26rem;
    padding-block: calc(var(--pex-step) * 4) 0;
}

.pex-docfilter__label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.pex-docfilter__input {
    width: 100%;
    padding: calc(var(--pex-step) * 1.5) calc(var(--pex-step) * 2.5);
    font: inherit;
    color: var(--pex-ink);
    background: #fff;
    border: 1px solid var(--pex-rule);
    border-radius: 999px;
}

.pex-docfilter__input:focus-visible {
    outline: 3px solid var(--pex-accent-deep);
    outline-offset: 1px;
    border-color: var(--pex-accent-deep);
}

.pex-docfilter__status {
    margin: 0;
    min-height: 1.4em;
    font-size: 0.875rem;
    color: var(--pex-ink-soft);
}

/* ---------- groups and cards ---------- */

.pex-dirlist {
    padding-block: calc(var(--pex-step) * 2) calc(var(--pex-step) * 8);
}

.pex-dirgroup {
    padding-block: calc(var(--pex-step) * 4);
}

.pex-dirgroup__letter {
    margin: 0 0 calc(var(--pex-step) * 2);
    font-size: 1.125rem;
    color: var(--pex-accent-deep);
}

.pex-doccards {
    display: grid;
    gap: calc(var(--pex-step) * 2);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * The card silhouette: rounded, with the top-right corner cut away. It is the
 * brand's SIM-card outline, and the small orange triangle sits just inside the
 * cut so the corner reads as deliberate rather than clipped.
 *
 * border-radius rounds the painted box; clip-path then removes the corner from
 * what was painted. The two compose, so the other three corners stay round. The
 * card carries a shadow rather than a border, because a border would be cut
 * along the diagonal and leave the chamfer unlined.
 */
.pex-doccard {
    position: relative;
    padding: calc(var(--pex-step) * 3);
    background: #fff;
    border-radius: var(--pex-r);
    box-shadow: var(--pex-shadow);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.pex-doccard::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    background: var(--pex-accent);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.pex-doccard__link::after {
    /* The whole card is the hit area; the anchor stays the accessible name. */
    content: '';
    position: absolute;
    inset: 0;
}

.pex-doccard__link {
    text-decoration: none;
}

.pex-doccard__name {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pex-ink);
    padding-right: calc(var(--pex-step) * 2);
}

.pex-doccard:hover .pex-doccard__name {
    color: var(--pex-accent-deep);
}

.pex-doccard__figures {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pex-step) * 2.5);
    margin: calc(var(--pex-step) * 2) 0 0;
}

.pex-doccard__figures dt {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pex-ink-soft);
}

.pex-doccard__figures dd {
    margin: 0.15rem 0 0;
    font-family: var(--pex-mono);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.pex-doccard__checked {
    margin: calc(var(--pex-step) * 2) 0 0;
    font-size: 0.75rem;
    color: var(--pex-ink-soft);
}

.pex-dirlist__none,
.pex-empty {
    max-width: 40rem;
    margin-block: calc(var(--pex-step) * 4) calc(var(--pex-step) * 10);
    padding: calc(var(--pex-step) * 4);
    background: #fff;
    border-radius: var(--pex-r);
    box-shadow: var(--pex-shadow);
}

.pex-empty h2 {
    margin-top: 0;
    font-size: 1.25rem;
}

.pex-empty p,
.pex-dirlist__none {
    color: var(--pex-ink-soft);
}

/* ---------- the wave ---------- */

/*
 * Two bands riding the same curve, orange under teal, where the page meets the
 * dark footer. It is the one piece of pure decoration on the site and it earns
 * its place by being the brand's own mark rather than a generic flourish.
 *
 * Sits flush: no gap above it, and the footer begins exactly where it ends.
 */
.pex-wave {
    display: block;
    width: 100%;
    height: clamp(40px, 6vw, 78px);
    margin-bottom: -1px;
    background: var(--pex-paper);
}

.pex-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pex-wave--on-white {
    background: #fff;
}


/* ---------- document page: what passes, what does not ---------- */

.pex-examples {
    display: grid;
    gap: calc(var(--pex-step) * 2);
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin: calc(var(--pex-step) * 3) 0 0;
    padding: 0;
    list-style: none;
}

.pex-example {
    padding: calc(var(--pex-step) * 2.5);
    background: #fff;
    border: 1px solid var(--pex-rule);
    border-radius: var(--pex-r);
}

.pex-example__title {
    margin: calc(var(--pex-step) * 2) 0 0.25rem;
    font-family: var(--pex-ui);
    font-weight: 600;
    font-size: 0.9375rem;
}

.pex-example__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--pex-ink-soft);
}

/*
 * The crop window. The photograph inside it is deliberately larger than the
 * window and positioned by inline percentages computed from the specification;
 * this rule only supplies the window and the clipping.
 */
.pex-example__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--pex-r-sm);
    background: var(--pex-rule);
}

.pex-example__img {
    position: absolute;
    height: auto;
    transform-origin: 50% 50%;
}

.pex-example__guides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pex-example__band {
    stroke: #fff;
    stroke-width: 1.2;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.pex-example__eye {
    stroke: var(--pex-accent);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

/* A quiet verdict: the frame is the message, the border only confirms it. */
.pex-example--ok .pex-example__frame { outline: 3px solid var(--pex-pass); }
.pex-example--no .pex-example__frame { outline: 3px solid var(--pex-fail); }

.pex-example__title::before {
    content: '';
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: 0.45em;
    border-radius: 50%;
    vertical-align: 0.02em;
}

.pex-example--ok .pex-example__title::before { background: var(--pex-pass); }
.pex-example--no .pex-example__title::before { background: var(--pex-fail); }

.pex-related__all { margin: calc(var(--pex-step) * 3) 0 0; }


/* ---------- document page: where to get one ---------- */

.pex-routes {
    display: grid;
    gap: calc(var(--pex-step) * 2);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: calc(var(--pex-step) * 3) 0 0;
    padding: 0;
    list-style: none;
}

.pex-route {
    display: flex;
    flex-direction: column;
    padding: calc(var(--pex-step) * 3);
    background: #fff;
    border-radius: var(--pex-r);
    box-shadow: var(--pex-shadow);
}

.pex-route__title {
    margin: 0;
    font-family: var(--pex-ui);
    font-weight: 600;
    font-size: 1rem;
}

/* The cost line is a figure, so it is set like the other figures on the page. */
.pex-route__cost {
    margin: 0.35rem 0 calc(var(--pex-step) * 1.5);
    font-family: var(--pex-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pex-accent-deep);
}

.pex-route__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--pex-ink-soft);
}

/* Pushed to the bottom so the "best when" lines align across cards of
   different text lengths. */
.pex-route__when {
    margin: calc(var(--pex-step) * 2) 0 0;
    padding-top: calc(var(--pex-step) * 1.5);
    border-top: 1px solid var(--pex-rule);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: auto;
}