/* ============================================================
   CSS Custom Properties — dark-first; light values via media query.
   Default (no OS preference, or OS dark mode) → dark palette.
   ============================================================ */

:root {
    /* backgrounds */
    --bg:               #111111;
    --bg-surface:       #1a1a1a;
    --bg-surface-alt:   #141414;
    --bg-table-header:  #1f1f1f;
    --bg-code:          #1f1f1f;
    --bg-footer:        #0a0a0a;
    /* The nav is the raised surface in BOTH themes, so in dark mode it is
       deliberately *lighter* than --bg (#111111). Sampled from SMM's
       dark-mode-example.png. The previous #0d1117 was darker than the page,
       which inverted that relationship against the console. */
    --bg-nav:           #191919;

    /* borders */
    --border:           #2a2a2a;
    --border-subtle:    #222222;

    /* text */
    --text:             #d1d1d1;
    --text-muted:       #888888;
    --text-heading:     #f0f0f0;
    --nav-text:         #eeeeee;

    /* brand / interactive */
    --brand:            #108db8;
    --brand-tint:       rgba(16, 141, 184, 0.18);
    --link:             #4db8d9;
    --link-hover:       #77cde5;

    /* featured installer card */
    --featured-bg:      linear-gradient(135deg, rgba(16, 141, 184, 0.12) 0%, rgba(16, 141, 184, 0.06) 100%);

    /* status accents — completed stepper phases, warning callouts (SSP-035),
       the iOS flow's success banner (SSP-036) */
    --success:          #3fb950;
    --success-bg:       rgba(63, 185, 80, 0.10);
    --success-line:     rgba(63, 185, 80, 0.30);
    --success-text:     #56d364;
    --warning:          #d29922;
    --warning-bg:       rgba(210, 153, 34, 0.10);

    /* shadows */
    --shadow-nav:       0 4px 24px 0 rgba(0, 0, 0, 0.45);
    --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
    :root {
        /* Sampled from SMM's light-mode-example.png: a white nav and footer
           raised over a very slightly grey page, which is what makes
           --bg-surface cards read as raised rather than flat. */
        --bg:               #f7f7f7;
        --bg-surface:       #ffffff;
        --bg-surface-alt:   #fafbfc;
        --bg-table-header:  #f2f2f2;
        --bg-code:          #f5f5f5;
        --bg-footer:        #ffffff;
        --bg-nav:           #ffffff;

        --border:           #cccccc;
        --border-subtle:    #dde3e8;

        --text:             #212529;
        --text-muted:       #555555;
        --text-heading:     #1a1a2e;
        --nav-text:         #3c3e42;

        --brand:            #108db8;
        /* The mockup's --blue-tint (#eef5f9) is a literal for its own blue; this
           is the same idea against the portal's teal. Not --bg-surface-alt:
           #fafbfc on a #ffffff card is invisible. */
        --brand-tint:       rgba(16, 141, 184, 0.10);
        --link:             #108db8;
        --link-hover:       #0a6d91;

        --featured-bg:      linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);

        --success:          #2f9e63;
        --success-bg:       #eefaf3;
        --success-line:     #bfe6d0;
        --success-text:     #1e6b43;
        --warning:          #b07f24;
        --warning-bg:       #fff7ea;

        --shadow-nav:       0 4px 24px 0 rgba(34, 41, 47, 0.1);
        --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.08);
    }
}

/* ============================================================
   Base
   ============================================================ */

* {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    /* 400, not the 300 this carried under Lato: Inter's 300 is materially
       thinner at the same 16px, and SMM's body copy is not hairline. */
    font-weight: 400;
    font-size: 16px;
    margin: 0;
    /* The footer is position: fixed, so page content slides underneath it
       unless the document reserves room. This was previously patched per page
       with trailing <br/> tags, which meant any page that forgot them (or was
       rewritten) lost its clearance. Reserving it here covers every page at
       every breakpoint — note both media queries below replace `.content`'s
       `padding` wholesale, so putting it there would be dropped on mobile. */
    padding: 0 0 5rem;
    background-color: var(--bg);
    color: var(--text);
}

a {
    text-decoration: none;
    color: var(--link);
    font-weight: bold;
}

a:hover {
    color: var(--link-hover);
}

img {
    max-width: 100%;
}

/* ============================================================
   Nav
   ============================================================ */

nav {
    width: 100%;
    background: var(--bg-nav);
}

nav a {
    color: var(--nav-text);
    padding: 1rem;
    display: inline-block;
}

.d-flex {
    display: flex;
}

.content {
    padding: 1rem;
}

.navbar {
    display: flex;
    align-items: center;
    padding: 0 2rem;
}

.navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.header-navbar {
    z-index: 999 !important;
    line-height: 1;
    padding: 0;
    min-height: 4.45rem;
    transition: 300ms ease all, background 0s;
    box-shadow: var(--shadow-nav);
    background-color: var(--bg-nav);
}

.navbar-brand {
    padding: 0 1rem;
}

/* An explicit height is required, not cosmetic: the two theme variants have
   different intrinsic sizes (gradient_logo_dark is 275x54, gradient_logo_white
   254x48), so without it the logo visibly resizes when the viewer switches
   theme. 32px matches SMM's proportion (~31px in its ~67px bar; this bar is
   min-height 4.45rem). */
.navbar-brand__logo {
    height: 32px;
    width: auto;
    display: block;
}

.btn-secondary {
    background-color: #D98148 !important;
}

/* ============================================================
   Containers
   ============================================================ */

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.step-container {
    border: 1px solid var(--border);
    border-radius: 2em;
    position: relative;
    padding: 2%;
    margin: 2% 0;
    background-color: var(--bg-surface);
}

.step-number {
    font-size: 2em;
    position: absolute;
    top: -10%;
    background: var(--bg);
    padding: 0 1%;
    color: var(--text-muted);
}

.step-description {
    padding-left: 2%;
}

.step-image {
    width: 30%;
    display: flex;
    justify-content: center;
    align-content: center;
    height: auto;
}

/* ============================================================
   Download table
   ============================================================ */

.download-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1%;
}

.download-table th,
.download-table td {
    padding: 1%;
    border: 1px solid var(--border);
}

.download-table th {
    background-color: var(--bg-table-header);
    color: var(--text);
    text-align: left;
}

/* ============================================================
   Button
   ============================================================ */

.button-link {
    display: inline-block;
    padding: 1% 2%;
    background: linear-gradient(to right, #f07533, #e65410);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button-link:hover {
    background: linear-gradient(to right, #f58634, #e76420);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: white;
    transform: translateY(-2px);
}

.button-link:active {
    background: linear-gradient(to right, #e65410, #c54310);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
}

/* ============================================================
   Images
   ============================================================ */

.apple-desktop {
    width: 50%;
    height: auto;
}

/* ============================================================
   Footer
   ============================================================ */

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: right;
    background-color: var(--bg-footer);
    border-top: 1px solid var(--border);
    padding: 1%;
    box-sizing: border-box;
}

.footer-content {
    font-size: 0.8em;
    margin-right: 2%;
    color: var(--text-muted);
}

/* ============================================================
   Responsive — tablet and up
   ============================================================ */

@media (min-width: 768px) {
    .content {
        padding: 2% 6%;
    }

    .step-container {
        padding: 2%;
        margin: 2% 0;
    }

    .step-header {
        font-size: 2.5em;
        top: -20%;
        padding: 0 1%;
    }

    .download-table th,
    .download-table td {
        padding: 1%;
    }

    .step-number {
        font-size: 2.5em;
        padding-right: 2%;
    }

    .button-link {
        padding: 1% 2%;
        font-size: 1.2em;
    }

    footer {
        padding: 1%;
    }

    .footer-content {
        font-size: 1em;
        margin-right: 2%;
    }
}

/* ============================================================
   Responsive — mobile
   ============================================================ */

@media (max-width: 767px) {
    /* The footer's copyright line wraps to two or three lines on a phone, so it
       is taller here than on desktop despite the smaller type. Extra clearance
       on top of body's base 5rem. */
    body {
        padding-bottom: 7.5rem;
    }

    .content {
        padding: 5% 10%;
    }

    .step-container {
        padding: 4%;
        margin: 4% 0;
    }

    .step-header {
        font-size: 1.5em;
        padding: 0 4%;
    }

    .button-link {
        padding: 3% 6%;
        font-size: 1em;
    }

    footer {
        padding: 2%;
    }

    .footer-content {
        font-size: 0.8em;
        margin-right: 4%;
    }

    .step-image {
        width: 75%;
        display: flex;
        justify-content: center;
        max-width: 100%;
        height: auto;
    }

    ol {
        padding-left: 20px;
    }

    li {
        margin-left: 0;
        padding-left: 0;
    }
}

/* ============================================================
   SSP-007: Sign-in landing page
   ============================================================ */

.signin-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    /* widened from 480px for SSP-035: the page now carries a three-phase
       stepper and a three-card step preview, which crowd at the old width */
    max-width: 640px;
    margin: 4rem auto;
}

/* shared page-intro paragraph on the sign-in and download pages */
.lede {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.signin-container h4 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-heading);
}

.signin-container p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ============================================================
   SSP-004: Installer card / tile layout
   ============================================================ */

.installer-cards {
    width: 100%;
    padding: 0.5rem 0;
}

/* Featured card — shown when platform is detected */
.installer-card--featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--featured-bg);
    border: 2px solid var(--brand);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
}

.installer-card__badge {
    position: absolute;
    top: -12px;
    background: var(--brand);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.installer-card__icon {
    font-size: 2.5rem;
    color: var(--brand);
    margin: 0.75rem 0 0.5rem;
}

.installer-card--featured .installer-card__icon {
    font-size: 3rem;
}

.installer-card__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 1rem;
}

/* filename · size · minimum OS, under the featured card's platform name.
   Absent entirely when no segment has a value, so it never renders empty. */
.installer-card__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    /* pull up into the 1rem left by __name so the meta reads as its subtitle */
    margin-top: -0.75rem;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.installer-card__cta {
    margin-top: 0.25rem;
}

/* Secondary / equal grid — all other platforms */
.installer-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.installer-card--secondary,
.installer-card--equal {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1.25rem 0.75rem;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.installer-card--secondary:hover,
.installer-card--equal:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 8px rgba(16, 141, 184, 0.18);
}

.installer-card__link {
    font-size: 0.85rem;
    color: var(--link);
    font-weight: 600;
    margin-top: 0.5rem;
}

.installer-card__link:hover {
    color: var(--link-hover);
}

/* ============================================================
   iOS enrollment flow (SSP-036)

   Product's v3 mockup: three numbered cards with a "then" connector between
   each, replacing the prose walkthrough. Built from the shared tokens, not the
   mockup's light-only literals.
   ============================================================ */

.ios-page {
    /* three cards side by side need more room than the default content width,
       but not the full viewport on a desktop */
    max-width: 1100px;
    margin: 0 auto;
}

.ios-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0.75rem;
    align-items: stretch;
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
}

.ios-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 1em;
    box-shadow: var(--shadow-card);
    /* top padding leaves room for the number badge straddling the border */
    padding: 1.75rem 1.375rem 1.5rem;
}

.ios-card__num {
    position: absolute;
    top: -0.9375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-heading);
    margin: 0.5rem 0 0.875rem;
}

.ios-card__title small {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* The register card has no CTA — association happens inside the app — so this
   tinted glyph is what keeps it from reading as an empty card next to two that
   each carry a button. */
.ios-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--brand-tint);
    color: var(--brand);
    font-size: 1.6rem;
    margin-bottom: 0.125rem;
}

/* .button-link supplies the orange gradient; this only adds the icon layout */
.ios-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.ios-card__after {
    margin: 1.25rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
}

.ios-card__mini {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.ios-card__shot {
    margin-top: 1rem;
    width: 200px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 0.75em;
    display: block;
}

/* Chips: sub-steps that happen outside the browser, where there is nothing to
   link to. */
.ios-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.625rem 0 0;
}

.ios-chip {
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    white-space: nowrap;
}

.ios-chips__arrow {
    color: var(--text-muted);
    font-weight: 700;
}

.ios-conn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
}

.ios-conn__word {
    font-size: 0.7rem;
    font-weight: 700;
    font-style: italic;
    color: var(--text-muted);
}

.ios-conn__arrow {
    font-size: 1.25rem;
    color: var(--text-muted);
}

/* horizontal between side-by-side cards, vertical once they stack */
.ios-conn__arrow--v {
    display: none;
}

.done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background-color: var(--success-bg);
    border: 1px solid var(--success-line);
    border-radius: 0.75em;
    padding: 0.875rem 1.125rem;
    max-width: 560px;
    margin: 0 auto;
}

.done__icon {
    flex: none;
    font-size: 1.25rem;
    color: var(--success);
}

.done__text {
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--success-text);
    margin: 0;
}

/* ============================================================
   SSP-016: Safari gate
   ============================================================ */

.safari-gate {
    text-align: center;
}

.safari-gate__icon {
    font-size: 2.5rem;
    color: #e07b00;
    display: block;
    margin-bottom: 1rem;
}

.safari-gate__url {
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-all;
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin: 1rem 0;
    text-align: left;
}

.safari-gate__copy-btn {
    display: inline-block;
    margin: 0.25rem auto 0.5rem;
}

.safari-gate__hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* ============================================================
   SSP-035: enrollment stepper, notice, step preview, then-timeline

   All colours come from the tokens above rather than the mockups' literals:
   the mockups are light-only, this stylesheet is dark-first with a light
   override, so hardcoding their hex would hand dark-mode users a white slab.
   ============================================================ */

.stepper {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    width: 100%;
}

.step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    max-width: 9.5rem;
    min-width: 0;
}

.step__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    /* above the connector line drawn by ::after */
    position: relative;
    z-index: 1;
}

.step__label {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    /* long directory names must not force the stepper wider than its column */
    overflow-wrap: break-word;
    min-width: 0;
}

.step--active .step__dot {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

.step--active .step__label {
    color: var(--text-heading);
}

.step--done .step__dot {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

/* connector between adjacent dots; sits behind them via z-index above */
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.875rem;
    left: calc(50% + 0.9375rem);
    width: calc(100% - 1.875rem);
    height: 2px;
    background: var(--border);
}

.step--done:not(:last-child)::after {
    background: var(--success);
}

/* The portal's single warning-callout idiom — a left accent bar on a raised
   surface — shared by the sign-in page's default-browser notice and the iOS
   page's Safari notice via the parameterised `notice` component. It replaced
   the old .ios-summary banner, which SSP-036 removed. */
.notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: 0.5em;
    background-color: var(--warning-bg);
    padding: 0.875rem 1.125rem;
    margin: 0 0 1.75rem 0;
}

.notice__icon {
    flex: none;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--warning);
}

.notice__body {
    /* .signin-container p sets a 2rem bottom margin that would double the
       callout's own spacing */
    margin-bottom: 0 !important;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

.notice__body strong {
    color: var(--text-heading);
}

.preview-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    width: 100%;
}

.preview-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.125rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75em;
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

.preview-step__icon {
    font-size: 1.5rem;
    color: var(--brand);
}

.preview-step__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.preview-step__ordinal {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.preview-step__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
}

.preview-step__detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow-wrap: break-word;
}

/* Collapsed alternate-platform list on the download page */
.other-platforms {
    margin-top: 1.25rem;
}

.other-platforms__summary {
    cursor: pointer;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--link);
    padding: 0.375rem;
    list-style: none;
}

.other-platforms__summary::-webkit-details-marker {
    display: none;
}

.other-platforms__summary::after {
    content: " \25BE";
}

.other-platforms[open] .other-platforms__summary::after {
    content: " \25B4";
}

.other-platforms__summary:hover {
    color: var(--link-hover);
}

.then {
    border: 1px solid var(--border);
    border-radius: 0.75em;
    background-color: var(--bg-surface);
    padding: 1.25rem 1.375rem;
    margin: 2% 0;
}

.then__heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

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

.then__list li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.4rem 0;
}

.then__icon {
    flex: none;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--brand);
}

.then__text {
    font-size: 0.925rem;
    line-height: 1.45;
}

.then__text strong {
    color: var(--text-heading);
}

.then__text small {
    display: block;
    color: var(--text-muted);
    font-size: 0.825rem;
}

.register-fallback p {
    margin-bottom: 0;
}

/* ============================================================
   Responsive — small screens

   These blocks MUST stay below the component rules above. Both override
   properties the base rules also set, at the same specificity, so a media query
   placed earlier in the file loses the cascade and silently does nothing — which
   is exactly what happened when the iOS rules below were first tried inside the
   767px block up at the top of the file.
   ============================================================ */

/* Stack the iOS cards and rotate the connectors. This is the common case, not
   the edge case — the iOS page is only ever served to phones.

   Separate from the 600px block, and wider than it, because three cards now
   share the row rather than two: between 601px and 767px each lands around
   230px wide, and .ios-chip's `white-space: nowrap` pushes "Profile Downloaded"
   out of its card. Ordered before the 600px block so the max-widths descend. */
@media (max-width: 767px) {
    .ios-flow {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .ios-conn {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.125rem 0;
    }

    .ios-conn__arrow--h {
        display: none;
    }

    .ios-conn__arrow--v {
        display: block;
    }

    .ios-card {
        padding: 1.75rem 1.125rem 1.25rem;
    }

    .ios-card__cta {
        width: 100%;
    }

    .ios-card__shot {
        width: 210px;
    }
}

@media (max-width: 600px) {
    .installer-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .signin-container {
        margin: 2rem auto;
        padding: 2rem 1rem;
    }

    /* Stack the step preview rather than squeezing three cards into a phone
       width; the stepper itself stays horizontal but loses its fixed column
       width so three labels still fit. */
    .preview-steps {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .preview-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.875rem;
        padding: 0.8rem 1rem;
    }

    .preview-step__ordinal {
        display: none;
    }

    .step {
        max-width: none;
    }

    .step__label {
        font-size: 0.72rem;
    }

    .then {
        padding: 1rem;
    }
}