/* TeamMembersNow design system.
   Values transcribed from the client's colour guide (teammembersnow_color_guide.pdf).
   Guarded by tests/design_tokens_test.php — change them there too, deliberately. */

:root,
[data-font="a"] {
    --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

[data-font="b"] {
    --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
}

[data-font="c"] {
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

:root {
    --navy: #0A1F38;
    --navy-mid: #102A47;
    --navy-card: #13304F;
    --navy-footer: #051225;

    --cream: #FAFCFF;
    --beige: #90A5C2;
    --beige-soft: #7C93B4;

    --blue: #007AFF;
    --blue-cta: #0069DB;
    --blue-light: #4DA3FF;

    --notice-bg: #FFF4E5;
    --notice-border: #F0C36D;
    --notice-text: #7A5B00;

    --hairline: rgba(230,214,181,0.14);
    --footer-text: rgba(144,165,194,0.75);

    --wrap: 1180px;
    --radius: 16px;
    --step: clamp(56px, 8vw, 104px);
}

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

/* The browser's own `[hidden] { display: none }` lives in the user-agent sheet,
   so any author rule that sets display beats it — `.tmn-btn { display:
   inline-block }` was enough to keep a hidden search button on screen. Search on
   Our Network hides cards, groups and whole bands with the attribute, so it has
   to actually hide them. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--navy);
    color: var(--beige);
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-light); }

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

/* Layout ------------------------------------------------------------------ */

.tmn-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

.tmn-band { padding: var(--step) 0; }
.tmn-band--mid { background: var(--navy-mid); }

/* Utilities ----------------------------------------------------------------

   Structure a screen reader needs, where the client's design shows no visible
   heading. Not display:none — that would hide it from assistive tech too. */

.tmn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Type -------------------------------------------------------------------- */

.tmn-eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-light);
    margin: 0 0 20px;
}

.tmn-title {
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--cream);
    margin: 0 0 24px;
}

/* The highlight under the emphasised words in the mockups. */
.tmn-mark {
    background-image: linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-size: 100% 0.14em;
    background-position: 0 88%;
}

.tmn-lede {
    font-size: clamp(17px, 2vw, 21px);
    max-width: 62ch;
    margin: 0 0 32px;
}

/* Buttons ----------------------------------------------------------------- */

/* A rounded rectangle at 9px, which is what every button in the client's
   mockups is (.btn-primary, .btn-secondary, .btn-accent, .cf-submit). It used
   to be a 999px pill; on a short label that reads as a lozenge, and on one that
   wraps it reads as a circle, which is what they objected to. */
.tmn-btn {
    display: inline-block;
    padding: 15px 26px;
    border: 1px solid var(--blue-cta);
    border-radius: 9px;
    background: var(--blue-cta);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.tmn-btn:hover { background: #0057B8; border-color: #0057B8; }

/* The sign-in email step disables its submit while the request is in flight
   (an SMTP send, not instant) so a double click can't burn two codes against
   the throttle. Without this rule a disabled button looks identical to a
   live one and the visitor keeps clicking. */
.tmn-btn:disabled { opacity: .55; cursor: not-allowed; }

.tmn-btn--ghost {
    background: transparent;
    border-color: var(--hairline);
    color: var(--cream);
}

.tmn-btn--ghost:hover { background: var(--navy-card); border-color: var(--blue); }

.tmn-btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--blue-light);
    outline-offset: 3px;
}

/* Cards ------------------------------------------------------------------- */

.tmn-card {
    background: var(--navy-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 30px 32px 32px;
}

.tmn-card__num {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--blue-light);
    margin: 0 0 10px;
}

.tmn-card__title {
    font-size: 23px;
    font-weight: 700;
    color: var(--cream);
    margin: 0 0 10px;
}

.tmn-card__body { margin: 0; }

/* Equal-height cells. This is the client's "square 1 and 3" correction:
   cards 2 and 4 carry a third line of copy, and without stretch the 2x2
   grid renders ragged. Stretch holds however the copy changes. */
.tmn-grid {
    display: grid;
    gap: 22px;
    align-items: stretch;
}

.tmn-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tmn-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Notice ------------------------------------------------------------------ */

.tmn-notice {
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    border-radius: 12px;
    color: var(--notice-text);
    padding: 18px 22px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Membership card ---------------------------------------------------------- */

/* Spacing and sizes follow the card the client sent on 2026-08-18. The ID-1
   aspect ratio is deliberately gone: forcing 1.586 while the content is short
   left a gap in the middle and pushed the logo away from the name, which is
   what they meant by the card not being tidy. Height now comes from the
   content and the explicit margins below. */
.tmn-mcard {
    background: var(--navy-card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 24px 22px;
    max-width: 420px;
}

.tmn-mcard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
}

.tmn-mcard__logo { height: 56px; width: auto; display: block; }

.tmn-mcard__name {
    font-size: 22px;
    font-weight: 700;
    color: var(--cream);
    line-height: 1.2;
    margin: 0 0 28px;
    overflow-wrap: anywhere;      /* long company names wrap, never overflow */
}

.tmn-mcard__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.tmn-mcard__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tmn-mcard__field--end { align-items: flex-end; text-align: right; }

.tmn-mcard__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    /* The delivered design uses --beige-soft here, but the card is --navy-card
       and that pairing measures 4.28:1. --beige is the same family at 5.34:1
       and keeps the label readable, which is the point of it. */
    color: var(--beige);
}

.tmn-mcard__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--cream);
    overflow-wrap: anywhere;
}

/* Header ------------------------------------------------------------------ */

.tmn-skip {
    position: absolute;
    left: -9999px;
}

.tmn-skip:focus {
    left: 16px;
    top: 16px;
    z-index: 10;
    background: var(--blue);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
}

.tmn-header { background: var(--navy); border-bottom: 1px solid var(--hairline); }

.tmn-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
}

.tmn-header__logo img { height: 46px; width: auto; display: block; }

.tmn-header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
}

.tmn-header__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cream);
}

.tmn-nav { display: flex; align-items: center; gap: 24px; }

.tmn-nav a:not(.tmn-nav__cta) {
    color: var(--cream);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.tmn-nav a:not(.tmn-nav__cta):hover { color: var(--blue-light); }
/* nowrap is the real fix for the two-line button in the header: nine nav items
   plus a CTA came to exactly the width available, so the label was the thing
   that gave. The 8px radius and tighter padding are the mockup's own. */
.tmn-nav a.tmn-nav__cta {
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
}

.tmn-nav a.tmn-nav__cta, .tmn-nav a.tmn-nav__cta:hover { color: #fff; }

@media (max-width: 1180px) {
    .tmn-header__toggle { display: flex; }

    .tmn-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 84px;
        z-index: 9;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 18px 24px 26px;
        background: var(--navy-mid);
        border-bottom: 1px solid var(--hairline);
    }

    .tmn-nav.is-open { display: flex; }
    .tmn-nav a:not(.tmn-nav__cta) { padding: 10px 0; }
    .tmn-nav__cta { margin-top: 10px; }
    .tmn-header__inner { position: relative; }
}

/* Footer ------------------------------------------------------------------ */

.tmn-footer { background: var(--navy-footer); padding: 46px 0 40px; }

.tmn-footer__nav { display: flex; flex-wrap: wrap; gap: 34px; }

.tmn-footer__nav a {
    color: var(--footer-text);
    text-decoration: none;
    font-size: 15px;
}

.tmn-footer__nav a:hover { color: var(--cream); }

.tmn-footer__tagline {
    margin: 30px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--footer-text);
}

/* Hero -------------------------------------------------------------------- */

.tmn-hero { padding-top: clamp(50px, 7vw, 88px); }

.tmn-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

@media (max-width: 900px) {
    .tmn-hero__inner { grid-template-columns: 1fr; gap: 44px; }
    .tmn-hero__card { justify-self: start; }
}

.tmn-hero__rotator {
    margin-bottom: 10px;
    transition: opacity .28s ease, transform .28s ease;
}

/* The word lifts and dims rather than disappearing. It used to fade to zero,
   which meant that mid-transition the text sat at 1.37:1 against the band —
   an automated audit samples exactly that frame and it is genuinely
   unreadable. --blue-light on --navy measures 6.32:1 at full opacity and
   4.94:1 at 0.85, so the floor keeps every frame above the 4.5:1 minimum.
   Do not lower it: 0.8 is 4.56:1 and 0.75 is already 4.16:1. */
.tmn-hero__rotator.is-out { opacity: .85; transform: translateY(-6px); }

.tmn-hero__place {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--beige-soft);
    margin: 0 0 22px;
}

.tmn-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.tmn-title--sm { font-size: clamp(30px, 4vw, 44px); margin-bottom: 40px; }

/* The TeamMembersNow way --------------------------------------------------- */

.tmn-way {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tmn-way__item {
    font-size: clamp(17px, 2.2vw, 23px);
    font-weight: 600;
    color: var(--cream);
}

/* The initials spell TEAMMEMBERSNOW. Colouring them is the only thing that
   makes the acrostic visible; without it this reads as fourteen adjectives. */
.tmn-way__initial { color: var(--blue-light); }

/* Page hero — the compact header every interior page opens with ------------ */

.tmn-phero { padding: clamp(46px, 6vw, 76px) 0 clamp(30px, 4vw, 48px); }

.tmn-phero__title {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--cream);
    margin: 0 0 22px;
}

/* Prose — long-form copy, and the wrapper for Terms/Privacy whose HTML comes
   from the database and cannot be given classes of its own. */

.tmn-prose { max-width: 74ch; }
.tmn-prose > * + * { margin-top: 1.1em; }

.tmn-prose h2 {
    font-size: clamp(23px, 2.6vw, 30px);
    font-weight: 700;
    color: var(--cream);
    margin-top: 1.8em;
    line-height: 1.25;
}

.tmn-prose h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--cream);
    margin-top: 1.5em;
}

.tmn-prose p, .tmn-prose li { color: var(--beige); }
.tmn-prose strong { color: var(--cream); }
.tmn-prose a { color: var(--blue-light); }
.tmn-prose ul:not(.tmn-list), .tmn-prose ol:not(.tmn-list) { padding-left: 1.3em; }
.tmn-prose li + li { margin-top: .5em; }
.tmn-prose table { width: 100%; border-collapse: collapse; }
.tmn-prose td, .tmn-prose th { border: 1px solid var(--hairline); padding: 10px 12px; text-align: left; }

/* Bulleted rule lists (Code of Conduct) ------------------------------------ */

.tmn-list { list-style: none; margin: 0; padding: 0; }

.tmn-list__item {
    position: relative;
    padding-left: 26px;
    color: var(--beige);
}

.tmn-list__item + .tmn-list__item { margin-top: .7em; }

.tmn-list__item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue-light);
}

/* Forms -------------------------------------------------------------------- */

.tmn-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

/* --beige-soft measures 5.28:1 on the page band but only 4.28:1 on
   --navy-card — form fields (and this label) must stay on the band and
   never move inside a .tmn-card, or text contrast silently fails. */
.tmn-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--beige-soft);
}

.tmn-input, .tmn-textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--navy-card);
    border: 1px solid rgba(230,214,181,0.45);
    border-radius: 12px;
    color: var(--cream);
    font: inherit;
}

.tmn-input::placeholder, .tmn-textarea::placeholder { color: var(--beige); }
.tmn-input:focus, .tmn-textarea:focus { outline: 2px solid var(--blue-light); outline-offset: 2px; border-color: transparent; }
.tmn-textarea { min-height: 150px; resize: vertical; }
.tmn-form-note { font-size: 14px; color: var(--beige-soft); margin: 14px 0 0; }

/* Select — same fill/border/focus as .tmn-input, plus a dropdown affordance.
   Native <select>; the arrow is drawn with --beige (#90A5C2) so it reads
   against --navy-card without a second colour. */
.tmn-select {
    width: 100%;
    padding: 14px 40px 14px 16px;
    background-color: var(--navy-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2390A5C2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    border: 1px solid rgba(230,214,181,0.45);
    border-radius: 12px;
    color: var(--cream);
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.tmn-select:focus { outline: 2px solid var(--blue-light); outline-offset: 2px; border-color: transparent; }

/* Checkbox row — border matches .tmn-input's contrast-checked value; the
   input itself is sized to a 24px hit target rather than relying on the
   label to carry it. */
.tmn-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 24px;
}

.tmn-check__input {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 1px solid rgba(230,214,181,0.45);
    border-radius: 6px;
    background: var(--navy-card);
    accent-color: var(--blue-light);
}

.tmn-check__input:focus { outline: 2px solid var(--blue-light); outline-offset: 2px; }

.tmn-check__label { color: var(--beige); font-size: 15px; line-height: 1.5; }

/* Fieldset — a purely structural grouping, styled like the other
   non-interactive containers in this file (.tmn-card, .tmn-alert): a
   --hairline border, not the higher-contrast control border. */
.tmn-fieldset {
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 24px;
    margin: 0 0 28px;
    min-width: 0;
}

.tmn-legend {
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream);
}

/* Dropzone target. This is a control a visitor clicks and drops onto, so its
   boundary uses the contrast-checked control border, not --hairline. */
.tmn-drop {
    border: 1px dashed rgba(230,214,181,0.45);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    background: transparent;
}

.tmn-drop:hover,
.tmn-drop.dz-drag-hover { border-color: var(--blue-light); }

.tmn-drop__hint { margin: 0; color: var(--beige-soft); font-size: 14px; }

/* Dropzone (public/css_moderation/libs/dropzone.css) also matches on the bare
   .dropzone class it needs for its own JS hooks, and loads after this
   stylesheet — so without the extra specificity here its off-palette purple
   (#7e37d8, nowhere in the colour guide) wins over .tmn-drop every time.
   Values below repeat .tmn-drop's own, they don't invent new ones. */
.tmn-drop.dropzone {
    border: 1px dashed rgba(230,214,181,0.45);
    border-radius: 12px;
    padding: 32px 20px;
    background: transparent;
}

.tmn-drop.dropzone:hover,
.tmn-drop.dropzone.dz-drag-hover { border-color: var(--blue-light); }

/* The queued file, in Dropzone's previewTemplate but our own class names —
   see signup.twig. The previews container sits directly before .dz-message in
   the markup, so the message steps aside as soon as a file lands. */
.tmn-drop.dropzone .dropzone-previews:not(:empty) { margin-bottom: 16px; }
.tmn-drop.dropzone .dropzone-previews:not(:empty) + .dz-message { display: none; }

.tmn-drop__file {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 16px;
    background: var(--navy-card);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    color: var(--cream);
    text-align: center;
}

.tmn-drop__thumb {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--hairline);
    background: var(--navy);
}

.tmn-drop__filename {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* On --navy-card, like the other two: --beige-soft would be 4.28:1 here. */
.tmn-drop__filesize { color: var(--beige); }

/* Only ever filled by Dropzone's own rejections — too large, wrong type. */
.tmn-drop__error {
    margin: 0;
    font-size: 13px;
    color: var(--notice-text);
}

.tmn-drop__error:not(:empty) {
    padding: 8px 10px;
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    border-radius: 8px;
}

.tmn-drop__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue-light);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* Alerts ------------------------------------------------------------------- */

.tmn-alert {
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 22px;
}

.tmn-alert--error { background: var(--notice-bg); border-color: var(--notice-border); color: var(--notice-text); }
.tmn-alert--ok { background: var(--navy-card); border-color: var(--blue); color: var(--cream); }

/* About page — two-column split ------------------------------------------- */

.tmn-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: start;
}

.tmn-split h2 {
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 700;
    color: var(--cream);
    margin: 0 0 14px;
}

.tmn-split p { margin: 0; }

/* Partners directory -------------------------------------------------------- */

.tmn-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.tmn-partner__logo {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.tmn-partner__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--blue-light);
    font-family: var(--font-mono);
    font-size: 22px;
}

.tmn-partner__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--cream);
    margin: 0;
    overflow-wrap: anywhere;      /* long company names wrap, never overflow */
}

.tmn-partner__name a {
    color: inherit;
    text-decoration: none;
}

.tmn-partner__name a:hover { color: var(--blue-light); }

.tmn-partner__badge {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: transparent;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 600;
}

/* Searching Our Network -----------------------------------------------------
   Sits in the page hero, under the lede. Borrows .tmn-input's fill, border and
   focus so it reads as part of the same system as the sign-up form. */
.tmn-search { margin: 30px 0 0; max-width: 560px; }

/* The placeholder says what to type; the label is for anyone who cannot see it. */
.tmn-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.tmn-search__row { display: flex; gap: 10px; }

.tmn-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px;
    background: var(--navy-card);
    border: 1px solid rgba(230,214,181,0.45);
    border-radius: 12px;
    color: var(--cream);
    font: inherit;
}

.tmn-search__input::placeholder { color: var(--beige); }

.tmn-search__input:focus {
    outline: 2px solid var(--blue-light);
    outline-offset: 2px;
    border-color: transparent;
}

/* Safari draws its own clear button in a colour of its choosing; this one
   matches the rest of the field. */
.tmn-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' fill='none' stroke='%2390A5C2' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}

.tmn-search__submit { flex: 0 0 auto; padding-top: 14px; padding-bottom: 14px; }

.tmn-search__count {
    margin: 14px 0 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--beige-soft);
}

/* Partner's own words for what they sell, straight off the sign-up form. It is
   what most searches are actually aimed at, so it sits above the description
   rather than under it. */
.tmn-partner__goods {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue-light);
}

/* Subcategory heading inside a category on Our Network. It has to read a level
   below the category above it, so it borrows the eyebrow's tracking rather than
   competing with it at heading size. */
.tmn-subtitle {
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-light);
    margin: 0 0 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
}

/* A second subcategory follows a grid of cards, and needs the air that keeps it
   from reading as a caption on the row above. Written against the group wrapper
   rather than the grid, because search hides whole groups: the rule has to fall
   away with the group it spaced, and :not([hidden]) is what makes it do that. */
[data-subcategory-group]:not([hidden]) ~ [data-subcategory-group] .tmn-subtitle {
    margin-top: 48px;
}

.tmn-partner-empty {
    margin: 0;
    text-align: center;
    font-size: clamp(17px, 2vw, 21px);
}

/* Sign in — one narrow, centred panel, not a content page ------------------ */

.tmn-auth {
    max-width: 420px;
    margin: 0 auto;
}

/* Account page — wallet buttons and required-field marker ------------------ */

.tmn-wallet-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 22px 0 0;
}

/* The theme sets img { height: auto }, which beats the height attribute — so
   the badges have to be sized here or each renders at its own natural size.
   This is Apple's and Google's own artwork: never recoloured, redrawn, or
   resized beyond this height. */
.tmn-wallet-buttons img { display: block; height: 46px; width: auto; max-width: none; }

/* Required-field marker. Paired with a "Fields marked * are required" note
   near the top of each form, so required-ness never rests on colour alone —
   the character itself, not just its colour, carries the meaning. */
.tmn-required { color: var(--blue-light); margin-left: 3px; }

/* Sign-up — membership type toggle ------------------------------------------ */

.tmn-toggle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0 0 32px;
}

/* Field hint — the line under an input that explains a limit or a format.
   --beige-soft measures 5.28:1 on the page band, which is where forms live. */
.tmn-field__hint {
    margin: 0;
    font-size: 14px;
    color: var(--beige-soft);
}

.tmn-field__hint--over { color: var(--notice-border); }

/* Partner description on Our Network. Capped at SIGNUP_ABOUT_MAX characters by
   the signup form and trimmed again by pages/partners.php, so the cards in the
   grid stay close to the same height. */
.tmn-partner__about {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--beige);
}

/* Membership plans ---------------------------------------------------------

   The price sits between the plan name and its list of benefits, so it reads
   as the answer to "what does this cost" before the reasons why. */

.tmn-plan__price {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--cream);
    margin: 0 0 22px;
}

.tmn-plan__period {
    display: block;
    font-size: 15px;
    font-weight: 400;
    /* --beige, not --beige-soft: this sits on --navy-card, where beige-soft
       measures 4.28:1 and misses the 4.5:1 minimum. On the page band it would
       have been fine at 5.28:1. */
    color: var(--beige);
    margin-top: 6px;
}

/* The two plans differ in length by five bullets; stretch keeps their buttons
   from floating at different heights. */
.tmn-plan { display: flex; flex-direction: column; }
.tmn-plan .tmn-list { flex: 1 1 auto; }

/* FAQ ----------------------------------------------------------------------

   <details>/<summary>: the browser handles opening, closing and announcing the
   state, so there is no script to fail and nothing is hidden from a visitor
   without JavaScript. */

.tmn-faq__group { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 28px; }

.tmn-faq {
    border-bottom: 1px solid var(--hairline);
    padding: 4px 0;
}

.tmn-faq__q {
    list-style: none;               /* the default triangle, replaced below */
    cursor: pointer;
    padding: 18px 44px 18px 0;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: var(--cream);
}

.tmn-faq__q::-webkit-details-marker { display: none; }

.tmn-faq__q:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }

/* A plus that becomes a minus. Drawn from the border so it needs no glyph and
   no icon font. */
.tmn-faq__q::after,
.tmn-faq__q::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--blue-light);
    transition: transform .18s ease;
}

.tmn-faq__q::before { transform: translateY(-50%) rotate(90deg); }
.tmn-faq__q::after { transform: translateY(-50%); }
.tmn-faq[open] .tmn-faq__q::before { transform: translateY(-50%) rotate(0deg); }

.tmn-faq__a { padding: 0 44px 22px 0; }
.tmn-faq__a > *:first-child { margin-top: 0; }
.tmn-faq__a > *:last-child { margin-bottom: 0; }

/* Live member counter -------------------------------------------------------

   A <dl>: each number is the value and its caption is the term, which is what
   a screen reader needs to read them as pairs rather than as loose digits. The
   number comes first visually, so the markup puts <dd> before <dt> and the
   flex order below keeps the reading order honest. */

.tmn-stats { padding-top: calc(var(--step) * .6); padding-bottom: calc(var(--step) * .6); }

.tmn-stats__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 22px;
    margin: 0;
}

.tmn-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 24px;
    background: var(--navy-card);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    text-align: center;
}

.tmn-stat__n {
    margin: 0;
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 800;
    line-height: 1;
    color: var(--cream);
    font-variant-numeric: tabular-nums;   /* digits keep their width while counting */
}

.tmn-stat__label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* --beige, not --beige-soft: this sits on --navy-card, where beige-soft is
       4.28:1 and misses AA. */
    color: var(--beige);
}

.tmn-stats__note { margin: 22px 0 0; font-size: 15px; color: var(--beige); }

/* Payment details on the account page --------------------------------------

   A <dl> so a screen reader reads "IBAN, CY17 ..." as a pair. The value uses
   the mono face and can be selected: a member is going to copy it into a
   banking app, and proportional digits invite transcription errors. */

.tmn-paydetails { margin: 0 0 22px; max-width: 620px; }

.tmn-paydetails__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
}

.tmn-paydetails__label {
    flex: 0 0 150px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--beige);
    padding-top: 3px;
}

.tmn-paydetails__value {
    flex: 1 1 260px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--cream);
    overflow-wrap: anywhere;
    user-select: all;                 /* one click selects the whole number */
}