/* ==========================================================
   Sign in. Two panels on a desktop, one on a phone, and the
   brand colour comes from the same --brand as everywhere else.
   ========================================================== */
.g-body { background: var(--canvas); }
.g-wrap { display: flex; min-height: 100vh; min-height: 100dvh; align-items: stretch; }

.g-card {
    flex: 1; max-width: 480px;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s7) var(--s6);
    background: var(--paper);
}
.g-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s7); }
.g-brand > .g-mark { margin-right: var(--s3); }
.g-mark {
    width: 38px; height: 38px; flex: none; border-radius: var(--r2);
    background: var(--brand); color: var(--on-brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
}
.g-brand b { font-size: 15px; font-weight: 680; letter-spacing: -.015em; }

.g-card h1 { font-size: 26px; letter-spacing: -.03em; }
.g-lede { margin: var(--s2) 0 var(--s6); color: var(--ink-2); font-size: 14px; }
.g-foot { margin: var(--s5) 0 0; font-size: 13px; }
.g-foot a { color: var(--brand-ink); font-weight: 600; }

/* The second panel carries the brand colour, which is why the sign-in
   screen reads as part of the product rather than a stray form. */
.g-side {
    flex: 1.2; display: flex; align-items: center;
    padding: var(--s7);
    background: var(--brand-10);
    border-left: 1px solid var(--line);
}
.g-side blockquote { margin: 0; max-width: 460px; }
.g-side p {
    margin: 0 0 var(--s5);
    font-size: 24px; line-height: 1.4; font-weight: 620;
    letter-spacing: -.025em; color: var(--brand-ink);
}
.g-side ul { margin: 0; padding-left: var(--s4); color: var(--ink-2); font-size: 14px; line-height: 2; }

@media (max-width: 900px) {
    .g-side { display: none; }
    .g-card { max-width: none; padding: var(--s6) var(--s5); background: var(--canvas); }
}
@media (max-width: 480px) {
    .g-card { padding: var(--s5) var(--s4); }
    .g-card h1 { font-size: 22px; }
    .g-brand { margin-bottom: var(--s6); }
}

/* ---------- Sign-in fields ----------
   A tall box with the label inside it. The label stays readable while
   typing, unlike a placeholder that vanishes on the first keystroke —
   which on a long form means clearing a box to remember what it asked
   for. Sized for a thumb on a phone, since that is where these are used. */
.a-field {
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: var(--r2);
    padding: 10px 14px 8px;
    margin-bottom: var(--s3);
    background: var(--paper);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.a-field:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}
.a-field > label {
    display: block; margin: 0 0 2px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    pointer-events: none;
}
.a-req { color: var(--harm); margin-left: 3px; }
.a-field > input {
    display: block; width: 100%;
    border: 0; padding: 0; background: none; outline: none;
    font: inherit; font-size: 16px; /* 16px or iOS zooms the page on focus */
    color: var(--ink); line-height: 1.5;
}
.a-field--pass > input { padding-right: 56px; }
.a-show {
    position: absolute; top: 10px; right: 12px;
    border: 0; background: none; padding: 2px 0;
    font: inherit; font-size: 12.5px; color: var(--ink-2);
    text-decoration: underline; cursor: pointer;
}
.a-show:hover { color: var(--ink); }
.a-hint { margin: -6px 0 var(--s3); font-size: 12px; color: var(--ink-3); }

/* The action, and the room around it. */
.g-card form > .u-btn--block { margin-top: var(--s4); padding: 15px; font-size: 15px; }

/* The phone field inside a sign-in box: the country picker and the number
   share the one tall box, rather than becoming a second field with its own
   border and label. */
.a-field--phone .u-phone { gap: 8px; }
.a-field--phone .phone-cc-select {
    border: 0; background-position: right 0 center; padding: 0 18px 0 0;
    font-size: 16px; min-width: 78px; color: var(--ink);
}
.a-field--phone .a-in {
    border: 0; padding: 0; background: none; outline: none;
    font: inherit; font-size: 16px; color: var(--ink); width: 100%;
}

/* The legal line under a sign-in form: present, quiet, not a call to action. */
.g-foot--legal { font-size: 11.5px; color: var(--ink-3); margin-top: var(--s4); }
.g-foot--legal a { color: var(--ink-3); }