/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: inherited 1confirmed editorial
 * palette: locked portal OKLCH tokens · partner colour limited to supplied wordmarks
 * motion: staggered workflow entrance · reduced-motion resolves instantly
 * contrast: pass (40–41) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (34, 49, 50–57) · icons: pass (30)
 */

/* ═══════════════════════════════════════════════════════════════════════
   Client portal — Auth (sign in · two-factor · sign up · reset request)

   portal.css already dresses the auth panel: the surface, the title, the
   field, the label, the error line, the footer. This sheet adds the auth-only
   controls used by sign in, sign up, reset and verification. Every page keeps
   the same original centred panel layout.

   Every class is prefixed .cl-auth__ so this sheet, which only the four auth
   pages download, cannot collide with another section's.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panel-level notices ─────────────────────────────────────────────────
   The layout used to carry `style="margin-top: …"` on both alerts. Same
   gap, expressed once. */
.cl-auth__note {
    margin-top: var(--space-md);
}

/* ── The six-digit code ──────────────────────────────────────────────────
   The one field on any auth page that is read back character by character
   while a 30-second clock runs. It is set in the display face — which is
   the portal's tabular one — at a size where a transposed digit is visible,
   and centred, because a six-character value left-aligned in a 420px panel
   reads as an accident. */
.cl-auth__input--code {
    font-family: var(--font-display);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.32em;
    /* The tracking is applied to the right of every glyph including the
       last, which pushes the string off-centre by one step. */
    text-indent: 0.32em;
    text-align: center;
}

.cl-auth__input--code::placeholder {
    letter-spacing: 0.32em;
    color: var(--color-muted-soft);
}

/* ── Secondary actions that are writes ───────────────────────────────────
   "Sign in with a different account" clears the pending challenge, so it is
   a POST inside its own form. It still has to read as the quiet option next
   to the primary button, which is why it is text. */
.cl-auth__inline-form {
    margin-top: var(--space-md);
    text-align: center;
}

.cl-auth__plain {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--radius-xs);
}

.cl-auth__plain:hover {
    color: var(--color-ink);
}

.cl-auth__plain:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ── Phone ───────────────────────────────────────────────────────────────
   intl-tel-input lays its country picker over the left of the input and
   expects the input to make room. portal.css does that for `.cl-input`, the
   shape the rest of the portal's forms use; the auth panel has its own
   field shape, so it needs the same room measured for itself. */
.cl-auth__phone .iti {
    width: 100%;
}

.cl-auth__phone .iti input.cl-auth__input {
    padding-inline-start: 4.2rem;
}

/* The dropdown is a long scrolling list; on the auth panel it must not push
   the page wider than the viewport. */
.cl-auth__phone .iti__country-list {
    max-width: 100%;
}

/* ── Showing a password ──────────────────────────────────────────────────
   The same control settings.css gives the change-password panel
   (.cl-set__secret / .cl-set__reveal), measured for the auth field rather
   than for .cl-input, and written under this sheet's own prefix — the auth
   pages do not download settings.css, and a shared class between two sheets
   only one of which is present is a rule that silently is not there.

   The auth pages also render no icon sprite, so the eye is inlined in the
   markup rather than referenced with <use>. */
.cl-auth__secret {
    position: relative;
    display: flex;
    /* A flex item defaults to min-width:auto, which lets a long value push
       the field wider than its grid column. */
    min-width: 0;
}

/* Room for the button, so a revealed password does not run underneath it. */
.cl-auth__secret-input { padding-inline-end: 40px; }

.cl-auth__reveal {
    position: absolute;
    top: 50%;
    /* Logical, not `right`: the panel is mirrored whole in Arabic. */
    inset-inline-end: 4px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    color: var(--color-muted);
    background: transparent;
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: color var(--dur-short) var(--ease-out),
                background-color var(--dur-short) var(--ease-out);
}

.cl-auth__reveal svg { width: 16px; height: 16px; stroke-width: 1.75; }
.cl-auth__reveal:focus-visible { outline-color: var(--color-accent); }

/* Only where there is a pointer to hover with. A touch screen keeps :hover on
   whatever was last tapped, so after showing the password the eye sat in a
   grey square until something else on the page was touched. */
@media (hover: hover) {
    .cl-auth__reveal:hover { color: var(--color-ink); background: var(--color-paper-sunken); }
}

/* On a phone the eye is a 40px target rather than 32px: it is the control
   somebody reaches for with a thumb after mistyping on a phone keyboard. It
   still fits — the field is 48px tall, and the editorial skin leaves the input
   44px of room at its end (the 4px inset plus 40). */
@media (max-width: 40rem) {
    .cl-auth__reveal {
        width: 40px;
        height: 40px;
    }
}

/* ── Text controls ───────────────────────────────────────────────────────
   "Keep me signed in", "Forgot password?" and the footer's way to the other
   page ("Create an account", "Sign in", "Back to sign in") are single lines
   of 12.5–13px text, about 20px tall, and on a phone that line was the whole
   target. Each gets 10px more above and below from an empty pseudo-element,
   so everything lays out exactly as before while a thumb that lands a little
   high or low still hits it. Nothing else that can be pressed is that close:
   the password field and the security check sit further from the row, and
   the footer has its rule and the page edge around it. */
@media (max-width: 40rem) {
    .cl-auth__check,
    .cl-auth__row > .cl-link,
    .cl-auth__foot a {
        position: relative;
    }

    .cl-auth__check::after,
    .cl-auth__row > .cl-link::after,
    .cl-auth__foot a::after {
        content: "";
        position: absolute;
        inset: -10px -4px;
    }
}

/* The state is the icon: an open eye while the password is hidden, the same
   eye struck through while it is shown. settings.css tints its pressed
   control accent instead and keeps one icon; a colour swap on an otherwise
   identical glyph asks the reader to remember which colour meant which, and
   is invisible to anyone who cannot separate the two. The strike-through says
   it without a key. `aria-pressed` still carries the same fact to a screen
   reader, where there is no icon to look at. */

/* ── Security check ──────────────────────────────────────────────────────
   Cloudflare Turnstile renders a fixed-width iframe (300×65). Reserving the
   height stops the button jumping down the moment the widget appears, and
   the box scrolls its own overflow rather than widening the panel on a
   narrow phone. */
.cl-auth__challenge {
    display: grid;
    gap: var(--space-2xs);
}

.cl-auth__widget {
    min-height: 65px;
    max-width: 100%;
    overflow-x: auto;
}

/* ── Prose ───────────────────────────────────────────────────────────────
   One paragraph, on the page that has no form. */
.cl-auth__prose {
    margin-top: var(--space-lg);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

.cl-auth__prose + .cl-btn {
    margin-top: var(--space-lg);
}

/* ── Narrow ──────────────────────────────────────────────────────────────
   At 375px the panel is the viewport minus the page gutter. The code field
   loses a little of its tracking so six digits plus the caret still fit
   inside it rather than scrolling within the input. */
@media (max-width: 26.25rem) {
    .cl-auth__input--code {
        font-size: 19px;
        letter-spacing: 0.22em;
        text-indent: 0.22em;
    }

    .cl-auth__phone .iti input.cl-auth__input {
        padding-inline-start: 3.8rem;
    }
}


/* ── The one-time code, one box per digit ─────────────────────────────────
   A code is transcribed rather than typed — read off a WhatsApp notification a
   digit at a time and checked back against it — so each digit gets a place of
   its own to be looked at and corrected in. One wide field made that a
   counting exercise, and a transposed pair invisible until the server refused
   it, which costs one of three attempts.

   Six equal boxes on one line, sized to the touch target the rest of the
   portal uses rather than to the glyph: a 32px box is a smaller target than
   anything else on the page and this is the one control on it. */

.cl-auth__code {
    display: flex;
    gap: var(--space-2xs);
    /* A code runs left to right in every language: the first digit typed is
       the first digit of the code. Without this the boxes reverse under
       `dir="rtl"` and the code is entered backwards. */
    direction: ltr;
}

.cl-auth__code-box {
    /* Equal shares of the row rather than a fixed width, so six boxes fit the
       panel at 375px as well as they fit it at 420px. The min-width keeps them
       from collapsing below a comfortable target. */
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    height: 56px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The focus ring, drawn on the box's own edge rather than around it.

   .cl-auth__input's ring is `2px` at `outline-offset: 2px` — right on a field
   that is 400px wide and a wall on one that is 56px square: the gap plus the
   ring plus the accent border read as two concentric rounded squares with a
   white channel between them, and the box looked broken rather than focused.

   The offset is pulled inside the border instead, so the ring lands on the
   edge the box already has: one crisp accent line, and no border-width change
   — which is what would move the row by a pixel. */
.cl-auth__code-box:focus-visible {
    outline-offset: -1px;
}

/* The number spinner Chrome and Firefox add to a numeric field would sit
   inside a 48px box and cover the digit. `type` is text here for that reason,
   but the rule stays as a guard against the field type changing back. */
.cl-auth__code-box::-webkit-outer-spin-button,
.cl-auth__code-box::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* A filled box is worth telling apart from an empty one at a glance, which is
   what makes "I have typed four of six" answerable without counting.

   `:placeholder-shown` is what "empty" is expressed as, and it only ever
   matches an input that has a placeholder — which is why every box carries one
   of a single space. Without it the selector matches nothing and every box
   reads as filled. */
.cl-auth__code-box:not(:placeholder-shown) {
    border-color: var(--color-rule-track);
}

@media (max-width: 22rem) {
    .cl-auth__code { gap: 4px; }
    .cl-auth__code-box { height: 50px; font-size: 19px; }
}


/* ── The one-time code, as one field ──────────────────────────────────────
   Still the two-factor step on sign-in, which asks for an authenticator code
   rather than one we sent. Wide, spaced and set in the display face, for the
   same reason the boxes exist: six digits packed at body size cannot be
   checked at a glance. */

.cl-auth__input--code {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .4em;
    text-align: center;
    /* The letter-spacing adds a trailing gap after the last digit, which
       otherwise pushes the run visibly off-centre. */
    text-indent: .4em;
}

/* "Did not get it? Send another code" — a sentence with a control in it, not
   a second primary action competing with Verify. */
.cl-auth__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin-top: var(--space-sm);
    font-size: 12.5px;
    color: var(--color-muted);
}

.cl-auth__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.cl-auth__link:hover { color: var(--color-accent-hover); }
.cl-auth__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Something worked — distinct from .cl-auth__error, which is the same shape
   in the halt tone. */
.cl-auth__note--ok {
    border-color: var(--color-live-line);
    background: var(--color-live-wash);
    color: var(--color-live);
}


/* ── The mark at the top of every auth page ───────────────────────────────
   The rail's own animated logo, at the size a centred page wants. It is the
   same component and the same animation; only the scale differs, so nothing
   about the identity is restated here — .cl-rail__logo already carries the
   type, the colour and the engine's timing. */

.cl-auth__brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-md);
}

/* The rail sizes it to fill a 252px column. Here it sizes to its own content
   so it sits centred rather than stretched across the panel. */
.cl-auth__logo {
    --cl-logo-size: 44px;
    width: auto;
    height: 44px;
    font-size: 31px;
}

.cl-auth__logo .cl-logo__engine {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
}

.cl-auth__logo .cl-logo__word { font-size: 24px; }

@media (max-width: 26rem) {
    .cl-auth__logo { --cl-logo-size: 38px; height: 38px; font-size: 27px; }
    .cl-auth__logo .cl-logo__engine { flex-basis: 38px; width: 38px; height: 38px; }
    .cl-auth__logo .cl-logo__word { font-size: 21px; }
}


/* ── Registration: two columns ────────────────────────────────────────────
   Five fields in one column made a card 945px tall in a 900px viewport, so
   the page scrolled before a single character had been typed — and a sign-up
   form you have to scroll to see the end of reads as longer than it is.

   Paired by what belongs together rather than to fill the grid: the two
   identity fields on one line, the two password fields on another, and the
   phone across both because its country selector and hint need the room. */

.cl-auth__panel--wide { max-width: 36rem; }

.cl-auth__panel--wide .cl-auth__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-sm) var(--space-md);
    align-items: start;
}

/*
 * Full width is what a child gets by default; a field asks for half a row by
 * carrying `cl-auth__pair` — Full name | Work email, then Password | Confirm
 * password. Everything without it keeps both columns: the phone, because its
 * country selector and hint need the room, and the password rule, the security
 * check and the button, because they are not fields.
 *
 * Named rather than positional on purpose. The pairing used to be
 * `div:nth-of-type(4)`, which was the password field only because it happened
 * to be the fourth <div> in the form — so on the social sign-up, where both
 * password fields are omitted, the fourth <div> was the Turnstile block and it
 * was squeezed into half a row. A class pairs the fields that are actually
 * rendered, whichever variant of the form that is.
 */
.cl-auth__panel--wide .cl-auth__form > * { grid-column: 1 / -1; min-width: 0; }
.cl-auth__panel--wide .cl-auth__form > .cl-auth__pair { grid-column: span 1; }

/*
 * One column again once the pair no longer fits. 34rem rather than a phone
 * width: two 8rem inputs plus the gap stop being comfortable well before the
 * viewport gets small, and a cramped pair is worse than an honest stack.
 */
@media (max-width: 34rem) {
    .cl-auth__panel--wide .cl-auth__form { grid-template-columns: minmax(0, 1fr); }
}


/* ── A hint that is a verdict ─────────────────────────────────────────────
   The phone field's "we will send your code to +212…" line. Same size and
   position as the grey hint it replaces, so the field does not jump as one
   becomes the other; the live tone and the tick carry the difference. */
.cl-auth__hint--ok {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--color-live);
}

.cl-auth__hint--ok svg { flex: 0 0 auto; margin-top: 2px; }

/* The number itself is the part being confirmed, so it is set in the tabular
   face — the same treatment the review step gives a number. */
.cl-auth__hint--ok strong {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}


/* ── The password rule ────────────────────────────────────────────────────
   What the password has to contain, said once for both password fields and
   across the full width of the form.

   It is deliberately not .cl-auth__hint. A hint under one field reads as an
   aside you can skip; this rule spans both fields on a neutral inset band.
   The small warning glyph carries the condition without turning the whole
   instruction into an error state before anything has failed. */
.cl-auth__rule {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-sunken);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-ink-soft);
}

.cl-auth__rule svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-warn);
}

/* The punctuation set is the part people mistype, so it is set apart from the
   sentence rather than being read as part of it. */
.cl-auth__rule code {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}


/* ── The terms sentence ───────────────────────────────────────────────────
   Two documents named inside a line of small grey type. Underlined and set
   heavier than the sentence around them, because a link that is only a shade
   different from its surroundings is a link nobody presses — and these two
   are the ones someone may actually want to read before signing up. */

.cl-auth__sep a {
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
}

.cl-auth__sep a:hover { color: var(--color-accent-hover); }

.cl-auth__sep a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Hallmark · component: OAuth provider controls · genre: modern-minimal
 * theme: portal identity · states: default · hover · focus · active ·
 * disabled · loading · error · success · contrast: pass
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
/* ── Social sign-in ───────────────────────────────────────────────────── */
.cl-auth__social { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.cl-auth__social-divider { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: 12px; letter-spacing: .01em; }
.cl-auth__social-divider::before, .cl-auth__social-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }
.cl-auth__social-buttons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-xs);
}
.cl-auth__social-button {
    --social-button-ink: var(--color-ink-soft);
    --social-button-wash: var(--color-paper-raised);
    --social-button-line: var(--color-rule-control);
    display: inline-flex;
    align-items: center;
    grid-column: span 2;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--social-button-line);
    border-radius: var(--radius-sm);
    color: var(--social-button-ink);
    background: var(--social-button-wash);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.cl-auth__social-buttons > :nth-child(4) { grid-column: 2 / span 2; }
.cl-auth__social-buttons > :nth-child(5) { grid-column: 4 / span 2; }
.cl-auth__social-button:hover,
.cl-auth__social-button.is-hover {
    border-color: var(--social-button-ink);
    background: var(--color-paper-raised);
}
.cl-auth__social-button:focus-visible,
.cl-auth__social-button.is-focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cl-auth__social-button:active,
.cl-auth__social-button.is-active { transform: translateY(1px); }
.cl-auth__social-button[aria-disabled="true"],
.cl-auth__social-button.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.cl-auth__social-button[data-state="loading"] .cl-auth__social-mark { animation: cl-social-spin 900ms linear infinite; }
.cl-auth__social-button.is-error { border-color: var(--color-halt-line); color: var(--color-halt); }
.cl-auth__social-button.is-success { border-color: var(--color-live-line); color: var(--color-live); }
.cl-auth__social-mark { display: grid; place-items: center; width: 19px; height: 19px; }
.cl-auth__social-mark svg { width: 19px; height: 19px; fill: currentColor; }
.cl-auth__social-button--google,
.cl-auth__social-button--facebook,
.cl-auth__social-button--linkedin,
.cl-auth__social-button--github,
.cl-auth__social-button--x {
    --social-button-ink: var(--color-ink-soft);
    --social-button-wash: var(--color-paper-raised);
    --social-button-line: var(--color-rule-control);
}
.cl-auth__social-button--google .cl-auth__social-mark { color: var(--color-provider-google-blue); }
.cl-auth__social-button--facebook .cl-auth__social-mark { color: var(--color-provider-facebook); }
.cl-auth__social-button--linkedin .cl-auth__social-mark { color: var(--color-provider-linkedin); }
.cl-auth__social-button--github .cl-auth__social-mark { color: var(--color-provider-github); }
.cl-auth__social-button--x .cl-auth__social-mark { color: var(--color-provider-x); }
.cl-auth__social-button--google .cl-auth__social-mark path:nth-child(2) { fill: var(--color-provider-google-green); }
.cl-auth__social-button--google .cl-auth__social-mark path:nth-child(3) { fill: var(--color-provider-google-yellow); }
.cl-auth__social-button--google .cl-auth__social-mark path:nth-child(4) { fill: var(--color-provider-google-red); }
@media (max-width: 29rem) {
    .cl-auth__social-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-auth__social-button,
    .cl-auth__social-buttons > :nth-child(4),
    .cl-auth__social-buttons > :nth-child(5) { grid-column: auto; }
}
@keyframes cl-social-spin { to { transform: rotate(1turn); } }

/* ═══════════════════════════════════════════════════════════════════════
   THE AUTH WORKBENCH — task on paper, message operations beside it

   The form stays the primary task. The brand side now behaves like a compact
   product workbench: one promise, one connected route, then the
   integrations already present in the product. Nothing is carded merely to
   fill space, and every claim is grounded in the portal itself.

   Base rules are the stacked mobile layout. At the desktop content breakpoint
   the form and workbench become an exact 50/50 split.
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * portal.css locks the signed-in application shell to the viewport. Auth is a
 * document, not that shell: registration and the stacked marketing story must
 * be able to scroll. Both roots clip only the inline axis, preserving sticky
 * and focus behaviour while preventing accidental horizontal movement.
 */
html {
    height: auto;
    min-height: 100%;
    overflow-x: clip;
}

body.cl-auth-page {
    display: block;
    height: auto;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
}

.cl-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    padding: 0;
    place-items: stretch;
    background: var(--color-paper);
}

.cl-auth__pane {
    display: grid;
    min-width: 0;
    padding: clamp(var(--space-xl), 8vw, var(--space-2xl))
        clamp(var(--space-md), 6vw, var(--space-xl));
    place-items: center;
}

.cl-auth__panel {
    width: 100%;
    max-width: 27rem;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cl-auth__panel--wide {
    max-width: 36rem;
}

/*
 * The real animated wordmark leads the task column. Its own LTR direction is
 * retained by brand.css; logical alignment moves the component correctly in
 * Arabic without reversing the identity.
 */
.cl-auth__brand {
    justify-content: flex-start;
    margin-bottom: var(--space-xl);
}

.cl-auth__brand .cl-rail__logo {
    width: auto;
    height: 40px;
    justify-content: flex-start;
}

/* ── Brand workbench ─────────────────────────────────────────────────── */

.cl-aside {
    position: relative;
    isolation: isolate;
    display: grid;
    min-width: 0;
    padding: clamp(var(--space-xl), 8vw, var(--space-2xl))
        clamp(var(--space-md), 6vw, var(--space-xl));
    overflow: clip;
    align-items: start;
    border-block-start: 1px solid var(--color-rule);
    background: var(--color-paper-sunken);
    color: var(--color-ink);
}

.cl-aside__inner {
    display: grid;
    width: 100%;
    max-width: 40rem;
    min-width: 0;
    margin-inline: auto;
}

.cl-aside__head {
    display: grid;
    gap: var(--space-lg);
}

.cl-aside__title {
    max-width: 18ch;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.65rem + 1vw, 2.75rem);
    font-style: normal;
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.cl-aside__lede {
    max-width: 58ch;
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
    line-height: 1.65;
    letter-spacing: -0.015em;
}

/* ── One connected route ─────────────────────────────────────────────── */

.cl-aside__workflow {
    min-width: 0;
    margin: var(--space-xl) 0 0;
}

.cl-aside__workflow-label {
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cl-aside__points {
    position: relative;
    display: grid;
    margin-top: var(--space-sm);
    border-block-start: 1px solid var(--color-rule);
}

/*
 * The short stagger is the only new motion. The route itself stays still and
 * readable while each step settles into place once; nothing reacts to scroll.
 */
.cl-aside__point {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    grid-template-columns: calc(var(--space-xl) + var(--space-xs)) minmax(0, 1fr);
    gap: var(--space-md);
    min-width: 0;
    padding-block: var(--space-md);
    opacity: 0;
    transform: translateY(var(--space-xs));
    animation: cl-aside-step-in calc(var(--dur-mid) * 1.5) var(--ease-out)
        forwards;
}

/*
 * Two circle-to-circle connectors replace one list-height stem. Each segment
 * begins at its own mark centre and ends at the next one, so wrapped copy can
 * never create a tail above the first mark or below the final one.
 */
.cl-aside__point:not(:last-child)::before {
    position: absolute;
    z-index: var(--z-base);
    inset-block-start: var(--space-xl);
    inset-block-end: calc(var(--space-xl) * -1);
    inset-inline-start: calc(var(--space-lg) - 0.5px);
    width: 1px;
    background: var(--color-rule-control);
    content: "";
}

.cl-aside__point:nth-child(1) {
    animation-delay: calc(var(--dur-tick) * 1);
}

.cl-aside__point:nth-child(2) {
    animation-delay: calc(var(--dur-tick) * 2);
}

.cl-aside__point:nth-child(3) {
    animation-delay: calc(var(--dur-tick) * 3);
}

.cl-aside__point:nth-child(4) {
    animation-delay: calc(var(--dur-tick) * 4);
}

.cl-aside__mark {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    width: calc(var(--space-xl) + var(--space-xs));
    height: calc(var(--space-xl) + var(--space-xs));
    margin: 0;
    border: 1px solid var(--color-rule-control);
    border-radius: var(--radius-pill);
    background: var(--color-paper-sunken);
    place-items: center;
}

.cl-aside__step {
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

.cl-aside__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--color-ink-soft);
    stroke-width: 1.6;
}

.cl-aside__point--accent .cl-aside__mark {
    border-color: var(--color-accent-line);
}

.cl-aside__point--accent .cl-aside__step,
.cl-aside__point--accent .cl-aside__icon {
    color: var(--color-accent);
    stroke-width: 1.75;
}

.cl-aside__point--warm .cl-aside__mark {
    border-color: var(--color-warm-line);
}

.cl-aside__point--warm .cl-aside__step,
.cl-aside__point--warm .cl-aside__icon {
    color: var(--color-warm-ink);
    stroke-width: 1.75;
}

.cl-aside__point-copy {
    position: relative;
    z-index: var(--z-raised);
    min-width: 0;
    padding-top: var(--space-2xs);
}

.cl-aside__point-heading {
    display: flex;
    gap: var(--space-xs);
    min-width: 0;
    align-items: center;
}

.cl-aside__point-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1rem + 0.18vw, 1.1875rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.cl-aside__point-note {
    max-width: 56ch;
    margin-top: var(--space-xs);
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.84375rem;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* ── Integration rail ────────────────────────────────────────────────── */

.cl-aside__partners {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-block-start: 1px solid var(--color-rule);
}

.cl-aside__stack-lead {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cl-aside__stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-sm);
    margin-top: var(--space-md);
    direction: ltr;
}

.cl-aside__partner {
    display: flex;
    min-width: 0;
    min-height: var(--space-xl);
    align-items: center;
    justify-content: center;
}

.cl-aside__partner-logo {
    display: block;
    width: min(80%, 6.8rem);
    height: auto;
    object-fit: contain;
}

@keyframes cl-aside-step-in {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Responsive composition ──────────────────────────────────────────── */

/* On a phone the aside's headings wrap, and a greedy wrap left one word on
   the last line — "Build your messaging / operation", "Reset access, not
   your / setup", "Bring your own WhatsApp / number". Balanced they break into
   lines of even length. */
@media (max-width: 40rem) {
    .cl-aside__title,
    .cl-aside__point-name {
        text-wrap: balance;
    }
}

@media (min-width: 40rem) {
    .cl-auth__pane,
    .cl-aside {
        padding-inline: clamp(var(--space-xl), 7vw, var(--space-2xl));
    }

    .cl-aside__stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md);
    }

}

@media (min-width: 64rem) {
    .cl-auth {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cl-auth__pane {
        padding: clamp(var(--space-xl), 4vw, var(--space-2xl));
    }

    .cl-aside {
        min-height: 100dvh;
        padding: clamp(var(--space-2xl), 5vw, var(--space-3xl))
            clamp(var(--space-xl), 4vw, var(--space-2xl));
        align-items: center;
        border-block-start: 0;
        border-inline-start: 1px solid var(--color-rule);
    }

    .cl-aside__inner {
        max-width: 42rem;
    }
}

@media (min-width: 84rem) {
    .cl-aside__stack {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 90rem) {
    .cl-aside__inner {
        max-width: 46rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-aside__point {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* Password completion is a single task: centre the form without an aside.
   The extra scope keeps the editorial skin's later rules from reducing
   these controls back to the compact split-page sizes. */
.cl-auth.cl-auth--focused {
    grid-template-columns: minmax(0, 1fr);
}

.cl-auth--focused .cl-auth__panel {
    max-width: 32rem;
}

.cl-auth--focused .cl-auth__brand {
    justify-content: center;
}

[data-skin="editorial"] .cl-auth--focused .cl-auth__title {
    font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem);
    text-align: center;
    overflow-wrap: anywhere;
}

[data-skin="editorial"] .cl-auth--focused .cl-auth__lede {
    margin-top: var(--space-sm);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.cl-auth--focused .cl-auth__form {
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

[data-skin="editorial"] .cl-auth--focused .cl-auth__label {
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

[data-skin="editorial"] .cl-auth--focused .cl-auth__input {
    min-height: 3.5rem;
    font-size: 1rem;
}

.cl-auth--focused .cl-auth__reveal {
    width: 2.75rem;
    height: 2.75rem;
}

[data-skin="editorial"] .cl-auth--focused .cl-auth__secret-input {
    padding-inline-end: 3.25rem;
}

[data-skin="editorial"] .cl-auth--focused .cl-auth__submit {
    min-height: 3.5rem;
    font-size: 0.875rem;
}

.cl-auth--focused .cl-auth__hint,
.cl-auth--focused .cl-auth__error,
.cl-auth--focused .cl-auth__foot {
    font-size: 0.875rem;
    line-height: 1.6;
}