/* 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. */
.site-plan-list li {
    position: relative;
    padding-left: 28px;
}
.site-plan-list li::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 {
    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, credits -- 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;
}

/* ---- 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;
}
.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-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;
    }
    .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;
    }
}