/* relayreef.com's own pages (views/*.ejs through layout.ejs): the home page, Product, Plans,
   Contact, and the sign-in pages. The classes are site- (the tenant websites RelayReef builds use
   rr-, in shared/site/render, and this stylesheet never loads there).

   The look is the portal's: RelayReef blue (#004799, the colour the emails and the tenant portal
   carry), the logo's navy for headings and a touch of its teal, white cards on a pale blue-grey
   with light lines, Roboto. Pages invoice, customer-invoice and contract-sign render without the
   layout and bring their own styles. */

:root {
    --site-ink: #0f1b3d;
    --site-ink-soft: #374151;
    --site-muted: #6b7280;
    --site-line: #e3e6ea;
    --site-field: #d4d4d4;
    --site-blue: #004799;
    --site-blue-dark: #003a7d;
    --site-blue-soft: #e8f0fa;
    --site-teal: #0b7285;
    --site-tint: #f5f8fc;
    --site-good: #047857;
    --site-bad: #b42318;
    --site-radius: 12px;
    --site-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.06);
    --site-ring: 0 0 0 3px rgba(0, 71, 153, 0.18);
}

/* Whatever says hidden stays hidden, whatever display a rule gives its kind of element: the admin
   sign-in's code form showed beside the password form because ".login form { display: flex }"
   outranked the attribute. */
[hidden] {
    display: none !important;
}

/* The footer at the bottom of the window on a short page (a sign-in), not halfway up it. */
body.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    color: var(--site-ink);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.site *,
.site *::before,
.site *::after {
    box-sizing: border-box;
}
:where(.site) img {
    max-width: 100%;
}
/* Bare elements at no weight (:where), so any class below sets its own margins over these. */
:where(.site) h1,
:where(.site) h2,
:where(.site) h3 {
    margin: 0;
    color: var(--site-ink);
    line-height: 1.2;
}
:where(.site) p {
    margin: 0;
}
.site-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}
.site-main {
    flex: 1 0 auto;
}

/* ---- Header and footer ----------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--site-line);
    backdrop-filter: saturate(1.4) blur(8px);
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
}
.site-brand {
    display: inline-flex;
    align-items: center;
}
.site-brand img {
    display: block;
    height: 38px;
    width: auto;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.site-nav-link {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--site-ink-soft);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.site-nav-link:hover {
    background: var(--site-tint);
    color: var(--site-blue);
}
.site-nav-link[aria-current="page"] {
    background: var(--site-blue-soft);
    color: var(--site-blue);
}
.site-nav .site-btn {
    margin-left: 8px;
}

.site-footer {
    border-top: 1px solid var(--site-line);
    background: #ffffff;
}
.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 28px;
    padding-bottom: 28px;
    color: var(--site-muted);
    font-size: 14px;
}
.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}
.site-footer-nav a {
    color: var(--site-ink-soft);
    text-decoration: none;
}
.site-footer-nav a:hover {
    color: var(--site-blue);
}

/* ---- Buttons and links ------------------------------------------------------------------------ */
.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--site-blue);
    border-radius: 8px;
    background: var(--site-blue);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.site-btn:hover {
    background: var(--site-blue-dark);
    border-color: var(--site-blue-dark);
}
.site-btn:focus-visible,
.site-nav-link:focus-visible,
.site-link:focus-visible {
    outline: none;
    box-shadow: var(--site-ring);
}
.site-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.site-btn--ghost {
    background: #ffffff;
    border-color: #cfd6df;
    color: var(--site-blue);
}
.site-btn--ghost:hover {
    background: var(--site-tint);
    border-color: #b9c3d0;
}
.site-btn--small {
    padding: 7px 14px;
    font-size: 14px;
}
.site-btn--block {
    width: 100%;
}
.site-link {
    color: var(--site-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    border-radius: 4px;
}
.site-link:hover {
    color: var(--site-blue-dark);
}

/* ---- Words ------------------------------------------------------------------------------------ */
.site-eyebrow {
    margin-bottom: 12px;
    color: var(--site-teal);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.site-title {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.site-lead {
    margin-top: 16px;
    max-width: 62ch;
    color: var(--site-ink-soft);
    font-size: 18px;
    line-height: 1.6;
}
.site-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* ---- Hero ------------------------------------------------------------------------------------- */
.site-hero {
    padding: 80px 0 64px;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(14, 159, 179, 0.10), transparent 70%),
        radial-gradient(50% 70% at 0% 100%, rgba(0, 71, 153, 0.07), transparent 70%),
        linear-gradient(180deg, var(--site-tint), #ffffff);
}
.site-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 48px;
}
.site-hero-inner > :only-child {
    grid-column: 1 / -1;
    max-width: 760px;
}
.site-hero-art {
    margin: 0;
}
.site-hero-art img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--site-line);
    border-radius: 16px;
    box-shadow: var(--site-shadow);
}

/* ---- Sections --------------------------------------------------------------------------------- */
.site-section {
    padding: 72px 0;
}
.site-section--tint {
    background: var(--site-tint);
    border-top: 1px solid var(--site-line);
    border-bottom: 1px solid var(--site-line);
}
.site-section-head {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
}
.site-section-head h1,
.site-section-head h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.site-section-head .site-lead {
    margin-left: auto;
    margin-right: auto;
}

/* Product: what RelayReef does, in cards. */
.site-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.site-feature {
    padding: 24px;
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius);
    background: #ffffff;
}
.site-feature h3 {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 600;
}
/* A card without an icon starts with its title. */
.site-feature h3:first-child {
    margin-top: 0;
}
.site-feature p {
    margin-top: 6px;
    color: #4b5563;
    font-size: 15px;
}
.site-feature-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--site-blue-soft);
    color: var(--site-blue);
}
.site-feature-icon svg {
    width: 22px;
    height: 22px;
}
/* Words beside a picture, and the next the other way round. */
.site-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}
.site-split + .site-split {
    margin-top: 64px;
}
.site-split--flip > :first-child {
    order: 2;
}
.site-split h2 {
    font-size: 28px;
    font-weight: 700;
}
.site-split img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--site-line);
    border-radius: 14px;
    box-shadow: var(--site-shadow);
}

/* ---- Plans ------------------------------------------------------------------------------------ */
.site-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
    gap: 20px;
}
.site-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    border: 1px solid var(--site-line);
    border-radius: 14px;
    background: #ffffff;
}
.site-plan.is-featured {
    border: 2px solid var(--site-blue);
    box-shadow: var(--site-shadow);
}
.site-plan-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--site-blue);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.site-plan-name {
    font-size: 18px;
    font-weight: 600;
}
.site-plan-price {
    margin-top: 10px;
    color: var(--site-muted);
    font-size: 15px;
}
.site-plan-price strong {
    color: var(--site-ink);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.site-plan-note {
    margin-top: 6px;
    color: var(--site-muted);
    font-size: 14px;
}
/* The second note is the list's own heading ("Everything in Basic, plus:"), so it reads as one and
   takes the list's dividing line above it -- every card then has the line in the same place. */
.site-plan-note + .site-plan-note {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--site-line);
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 600;
}
.site-plan-note + .site-plan-note + .site-plan-list {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
}
.site-plan-list {
    display: grid;
    gap: 10px;
    margin: 20px 0 24px;
    padding: 20px 0 0;
    border-top: 1px solid var(--site-line);
    list-style: none;
    font-size: 15px;
    color: var(--site-ink-soft);
}
/* Each line ticked, in the blue on its tint. A signup card's list is spans with a list's role (views/signup.ejs). */
.site-plan-list li,
.site-plan-list > [role="listitem"] {
    position: relative;
    padding-left: 28px;
}
.site-plan-list li::before,
.site-plan-list > [role="listitem"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--site-blue-soft);
}
.site-plan-list li::after,
.site-plan-list > [role="listitem"]::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 5px;
    height: 8px;
    border: solid var(--site-blue);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* What the plan allows -- team, storage, emails, texts, RelayAI points -- after what it includes, set off by
   a dashed line and quieter: dots, not ticks. */
.site-plan-list--limits {
    gap: 7px;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px dashed #d6dce4;
    color: var(--site-muted);
    font-size: 14px;
}
.site-plan-list:has(+ .site-plan-list--limits) {
    margin-bottom: 16px;
}
.site-plan-list--limits li {
    padding-left: 18px;
}
.site-plan-list--limits li::before {
    top: 8px;
    left: 4px;
    width: 6px;
    height: 6px;
    background: #b9c3d0;
}
.site-plan-list--limits li::after {
    content: none;
}
.site-plan > .site-btn {
    margin-top: auto;
}
.site-fineprint {
    margin-top: 24px;
    color: var(--site-muted);
    font-size: 13px;
    text-align: center;
}

/* The custom website (2026-10-23), after the plans: one card on a soft blue wash, the words, price and Talk to us
   beside what you get, ticked as a plan's list is; stacked on a tablet or phone. A link to #custom-website (Product's
   line) stops with the card just under the sticky header, not behind it. */
.site-custom {
    padding-top: 56px;
    scroll-margin-top: 28px;
}
.site-custom-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
    padding: 36px;
    border: 1px solid var(--site-line);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--site-blue-soft), #ffffff 60%);
    box-shadow: var(--site-shadow);
}
.site-custom-text h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.site-custom-text .site-lead {
    margin-top: 12px;
}
.site-custom-price {
    margin: 18px 0 20px;
    color: var(--site-muted);
    font-size: 15px;
}
.site-custom-price strong {
    margin-right: 8px;
    color: var(--site-ink);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.site-custom-fine {
    margin-top: 14px;
    color: var(--site-muted);
    font-size: 14px;
}
.site-custom-list {
    padding: 24px;
    border: 1px solid var(--site-line);
    border-radius: 12px;
    background: #ffffff;
}
.site-custom-list h3 {
    font-size: 17px;
    font-weight: 600;
}
.site-custom-list .site-plan-list {
    margin: 14px 0 0;
    padding-top: 14px;
}
/* Product's line about it, under the feature cards. */
.site-features-note {
    margin-top: 32px;
    color: var(--site-ink-soft);
    font-size: 16px;
    text-align: center;
}

/* ---- Cards and forms -------------------------------------------------------------------------- */
.site-card {
    padding: 28px;
    border: 1px solid var(--site-line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--site-shadow);
}
.site-card-title {
    font-size: 20px;
    font-weight: 600;
}
.site-form {
    display: grid;
    gap: 16px;
}
.site-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.site-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.site-field > span {
    color: var(--site-ink-soft);
    font-size: 13px;
    font-weight: 500;
}
.site-field input,
.site-field textarea,
.site-field select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--site-field);
    border-radius: 8px;
    background: #ffffff;
    color: var(--site-ink);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.site-field textarea {
    min-height: 140px;
    resize: vertical;
}
.site-field input:focus,
.site-field textarea:focus,
.site-field select:focus {
    outline: none;
    border-color: var(--site-blue);
    box-shadow: var(--site-ring);
}
.site-hint,
.site-field > span.site-hint {
    color: var(--site-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}
/* A hint that is a paragraph of the form, not a caption under one field: what was emailed, what
   the page is for. */
.site-form > p.site-hint {
    color: var(--site-ink-soft);
    font-size: 14px;
}
/* The site's address on the signup form (2026-11-03): the name typed, then the domain it sits under,
   read as one address; and beneath, what the check as it is typed said of it. */
.site-field > span.site-address {
    display: flex;
    align-items: stretch;
    min-width: 0;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 400;
}
.site-address input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.site-address-domain {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--site-field);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: var(--site-tint);
    color: var(--site-ink-soft);
    white-space: nowrap;
}
.site-field > span.site-hint.is-good {
    color: var(--site-good);
}
.site-field > span.site-hint.is-bad {
    color: var(--site-bad);
}
.site-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.site-form-links {
    color: var(--site-muted);
    font-size: 14px;
    text-align: center;
}
.site-form-note {
    font-size: 14px;
    line-height: 1.45;
}
.site-form-note:empty {
    display: none;
}
.site-form-note.is-good {
    color: var(--site-good);
}
.site-form-note.is-bad {
    color: var(--site-bad);
}
.site-card > .site-form-note {
    margin-top: 16px;
}

/* ---- Contact ---------------------------------------------------------------------------------- */
.site-contact {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 48px;
}
.site-contact-aside h1,
.site-contact-aside h2 {
    font-size: 32px;
    font-weight: 700;
}
.site-contact-list {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: var(--site-ink-soft);
    font-size: 15px;
}

/* ---- Sign-in ----------------------------------------------------------------------------------
   One card. With a second step (the emailed code), both steps sit side by side in a track, and the
   card's data-step says which is in view; the track slides across to it. The step out of view is
   inert (the page's script sets it), so it cannot be tabbed into, and hidden once the slide ends.
   The gap between steps is the card's padding, so the next step waits just past the card's edge. */
.site-signin {
    padding: 72px 0 88px;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(14, 159, 179, 0.10), transparent 70%),
        linear-gradient(180deg, var(--site-tint), #ffffff);
}
.site-signin-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: center;
    gap: 56px;
}
.site-signin-intro .site-title {
    font-size: 38px;
}
.signin-card {
    width: 100%;
    overflow: hidden;
}
.signin-track {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.signin-step {
    flex: 0 0 100%;
    min-width: 0;
    visibility: visible;
    transition: visibility 0s;
}
.signin-step[inert] {
    visibility: hidden;
    transition: visibility 0s 0.35s;
}
.signin-card[data-step="code"] .signin-track {
    transform: translateX(calc(-100% - 28px));
}
@media (prefers-reduced-motion: reduce) {
    .signin-track,
    .signin-step,
    .signin-step[inert] {
        transition: none;
    }
}
/* The one-time code: large, spaced, and in figures. */
.signin-step input[autocomplete="one-time-code"] {
    font-size: 22px;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---- Tablets and phones ----------------------------------------------------------------------- */
@media (max-width: 960px) {
    .site-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-hero-inner,
    .site-split,
    .site-contact,
    .site-signin-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .site-custom-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .site-split--flip > :first-child {
        order: 0;
    }
    .site-signin-inner {
        max-width: 480px;
    }
}
@media (max-width: 640px) {
    .site-wrap {
        padding: 0 16px;
    }
    /* The header in two rows: the logo, then the links and Sign in across the screen. */
    .site-header-inner {
        flex-wrap: wrap;
        gap: 0;
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 6px;
    }
    .site-brand img {
        height: 30px;
    }
    .site-nav {
        flex: 1 1 100%;
        margin-top: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar {
        display: none;
    }
    .site-nav-link {
        flex: none;
        padding: 7px 10px;
        font-size: 14px;
    }
    .site-nav .site-btn {
        flex: none;
        margin-left: auto;
    }
    .site-title {
        font-size: 32px;
    }
    .site-signin-intro .site-title {
        font-size: 28px;
    }
    .site-lead {
        font-size: 16px;
    }
    .site-hero {
        padding: 44px 0 40px;
    }
    .site-section {
        padding: 48px 0;
    }
    .site-section-head {
        margin-bottom: 28px;
    }
    .site-section-head h1,
    .site-section-head h2,
    .site-contact-aside h1,
    .site-contact-aside h2 {
        font-size: 26px;
    }
    .site-features,
    .site-form-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .site-actions .site-btn {
        flex: 1 1 auto;
    }
    .site-card {
        padding: 20px;
    }
    /* The header is two rows here, about 90px. */
    .site-custom {
        scroll-margin-top: 60px;
    }
    .site-custom-card {
        padding: 24px 20px;
    }
    .site-custom-text h2 {
        font-size: 24px;
    }
    .site-custom-list {
        padding: 20px;
    }
    .signin-track {
        gap: 20px;
    }
    .signin-card[data-step="code"] .signin-track {
        transform: translateX(calc(-100% - 20px));
    }
    .site-signin {
        padding: 36px 0 56px;
    }
    /* 16px stops a phone zooming into a field when it is tapped. */
    .site-field input,
    .site-field textarea,
    .site-field select {
        font-size: 16px;
    }
}


/* ---- A one-time invoice's page (views/custom-invoice.ejs): the sign-in page's layout and the custom website's price. A long name
   or a long word in what it's for wraps rather than widening a phone's page. ---- */
.site-invoice-text { color: var(--site-ink-soft); font-size: 15px; margin-bottom: 20px; }
.site-invoice-line { margin-bottom: 20px; font-size: 16px; }
.site-invoice .site-title, .site-invoice .site-lead { overflow-wrap: anywhere; }
.site-invoice .site-card .site-custom-price { margin-top: 0; }

/* ---- Signing up: pickable plan cards (views/signup.ejs) ---- */
.site-plans--pick { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.site-plan--pick { cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 2px solid rgba(0, 0, 0, 0.12); border-radius: 12px; }
.site-plan--pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site-plan--pick.is-picked, .site-plan--pick:has(input:checked) { border-color: var(--site-blue); box-shadow: 0 0 0 3px rgba(0, 71, 153, 0.15); }
.site-plan--pick:focus-within { outline: 2px solid var(--site-blue); outline-offset: 2px; }
/* What the plan includes (2026-10-24), as on the Plans page but closer set, to fit a card beside the form. */
.site-plan--pick .site-plan-list { gap: 8px; margin: 14px 0 0; padding-top: 14px; font-size: 14px; }
.site-plan--pick .site-plan-note + .site-plan-note { margin-top: 14px; padding-top: 14px; }
.site-plan--pick .site-plan-note + .site-plan-note + .site-plan-list { margin-top: 6px; }
.site-field select { font: inherit; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; background: #fff; }
fieldset.site-field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.site-field legend { padding: 0; }
/* By invitation (2026-10-15) the address is the invitation's: shown in the tint, so it reads as given rather than to fill in. */
.site-field input[readonly] { background: var(--site-tint); color: var(--site-ink-soft); }

/* The Terms of Service and Privacy Policy (views/terms.ejs, views/privacy.ejs; 2026-11-02): one column of reading, at the
 * width a line reads well, with headings that break it into parts. */
.site-legal { max-width: 760px; }
.site-legal .site-title { margin-bottom: 20px; }
.site-legal h2 { font-size: 22px; font-weight: 700; margin: 36px 0 10px; color: var(--site-ink); }
.site-legal p, .site-legal li { color: var(--site-ink-soft); line-height: 1.65; }
.site-legal p + p { margin-top: 12px; }
.site-legal ul { margin: 10px 0 0; padding-left: 22px; }
.site-legal li + li { margin-top: 8px; }
.site-legal a { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .site-legal .site-title { font-size: 34px; }
    .site-legal h2 { font-size: 20px; margin-top: 28px; }
}
/* The line above Continue to payment saying what pressing it agrees to. */
.site-agree { margin-top: 4px; }