/* assets/css/components/assistant.css
 *
 * The site assistant.
 *
 * Shaped like a messaging app, because that is an interaction people already
 * know: a launcher in the corner, a panel that grows out of it, bubbles with
 * tails, a typing indicator while it thinks. Nothing here is novel on
 * purpose — novelty in a chat window costs comprehension and buys nothing.
 */

.lc-chat {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1200;
    font-family: var(--font-body);
}

/* --- Launcher ---------------------------------------------------------- */

.lc-chat-launcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-medium));
    box-shadow: 0 10px 30px rgba(2, 48, 71, .35);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, opacity .2s ease;
}

.lc-chat-launcher:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 38px rgba(2, 48, 71, .42);
}

.lc-chat-launcher svg {
    position: absolute;
    transition: opacity .2s ease, transform .25s ease;
}

.lc-chat-launcher .lc-ico-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

.lc-chat.is-open .lc-chat-launcher .lc-ico-chat {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}

.lc-chat.is-open .lc-chat-launcher .lc-ico-close {
    opacity: 1;
    transform: none;
}

/* --- Panel ------------------------------------------------------------- */

.lc-chat-panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: flex;
    flex-direction: column;
    width: min(475px, calc(100vw - 2.5rem));
    height: min(672px, calc(100vh - 7rem));
    border-radius: 18px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(2, 48, 71, .28);
    /* Grows out of the launcher rather than appearing, so the corner it came
       from is obvious. */
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}

.lc-chat.is-open .lc-chat-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.lc-chat-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: radial-gradient(120% 200% at 90% -40%, rgba(0, 180, 216, .35), transparent 60%), var(--brand-dark);
    color: #fff;
}

.lc-chat-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
}

.lc-chat-who {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.lc-chat-who strong {
    font-size: .95rem;
}

.lc-chat-who em {
    font-style: normal;
    font-size: .75rem;
    color: rgba(255, 255, 255, .62);
}

.lc-chat-min {
    margin-left: auto;
    display: flex;
    padding: .35rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.lc-chat-min:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* --- The log ----------------------------------------------------------- */

.lc-chat-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem .9rem .4rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    background: var(--bg-alt);
    /* The faint dot field the rest of the site uses, so the panel reads as
       part of this site rather than a widget dropped onto it. */
    background-image: radial-gradient(rgba(2, 48, 71, .055) 1px, transparent 1px);
    background-size: 18px 18px;
}

.lc-chat-log::-webkit-scrollbar {
    width: 8px;
}

.lc-chat-log::-webkit-scrollbar-thumb {
    background: rgba(2, 48, 71, .18);
    border-radius: 8px;
}

.lc-msg {
    position: relative;
    max-width: 84%;
    padding: .6rem .85rem;
    border-radius: 16px;
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    animation: lc-pop .22s cubic-bezier(.22, .61, .36, 1);
}

@keyframes lc-pop {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.lc-msg-bot {
    align-self: flex-start;
    background: var(--white);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
}

.lc-msg-me {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-medium));
    color: #fff;
    border-bottom-right-radius: 5px;
}

/* Consecutive bubbles from the same side tuck together, so one reply in two
   parts reads as one reply. */
.lc-msg-bot+.lc-msg-bot,
.lc-msg-me+.lc-msg-me {
    margin-top: -.2rem;
}

.lc-msg a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Typing ------------------------------------------------------------ */

.lc-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: .75rem .9rem;
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    background: var(--white);
    border: 1px solid var(--border);
}

.lc-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-light);
    animation: lc-blink 1.3s infinite ease-in-out;
}

.lc-typing i:nth-child(2) {
    animation-delay: .18s;
}

.lc-typing i:nth-child(3) {
    animation-delay: .36s;
}

@keyframes lc-blink {

    0%,
    60%,
    100% {
        opacity: .25;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* --- The confirmation card --------------------------------------------- */

.lc-card {
    align-self: stretch;
    margin: .35rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--brand-accent);
    box-shadow: 0 8px 24px rgba(0, 180, 216, .16);
    animation: lc-pop .25s cubic-bezier(.22, .61, .36, 1);
}

.lc-card-head {
    padding: .6rem .9rem;
    background: rgba(0, 180, 216, .1);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.lc-card dl {
    margin: 0;
    padding: .35rem .9rem .6rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .75rem;
    font-size: .82rem;
}

.lc-card dt {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-light);
    padding-top: .28rem;
}

.lc-card dd {
    margin: 0;
    padding-top: .2rem;
    color: var(--text-main);
    word-break: break-word;
}

.lc-card-actions {
    display: flex;
    gap: .5rem;
    padding: 0 .9rem .9rem;
}

.lc-card-send,
.lc-card-edit {
    flex: 1;
    padding: .55rem .75rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.lc-card-send {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-medium));
}

.lc-card-send:disabled {
    opacity: .55;
    cursor: default;
}

.lc-card-edit {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-muted);
}

.lc-card-edit:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.lc-card-done {
    padding: .6rem .9rem .9rem;
    font-size: .82rem;
    color: #0f7a4a;
}

/* --- Suggestions ------------------------------------------------------- */

.lc-chat-suggest {
    display: flex;
    gap: .4rem;
    padding: .6rem .9rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--white);
    border-top: 1px solid var(--border);
}

.lc-chat-suggest::-webkit-scrollbar {
    display: none;
}

.lc-chat-suggest button {
    flex: none;
    padding: .4rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: .78rem;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.lc-chat-suggest button:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: var(--white);
}

.lc-chat-suggest.is-gone {
    display: none;
}

/* --- Composer ---------------------------------------------------------- */

.lc-chat-form {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .7rem .9rem;
    background: var(--white);
    border-top: 1px solid var(--border);
}

.lc-chat-input {
    flex: 1;
    max-height: 120px;
    padding: .6rem .85rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text-main);
    resize: none;
    transition: border-color .2s ease, background .2s ease;
}

.lc-chat-input:focus {
    outline: none;
    border-color: var(--brand-accent);
    background: var(--white);
}

.lc-chat-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-medium));
    transition: opacity .2s ease, transform .2s ease;
}

.lc-chat-send:disabled {
    opacity: .4;
    cursor: default;
}

.lc-chat-send:not(:disabled):hover {
    transform: scale(1.06);
}

.lc-chat-foot {
    margin: 0;
    padding: .5rem;
    text-align: center;
    font-size: .68rem;
    color: var(--text-light);
    background: var(--white);
    border-top: 1px solid var(--border);
}

/* --- Phone ------------------------------------------------------------- */

@media (max-width: 560px) {
    .lc-chat {
        right: 1rem;
        bottom: 1rem;
    }

    /* A full-height sheet, like a messaging app, rather than a floating card
       squeezed into a phone. */
    .lc-chat-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform-origin: center bottom;
    }

    .lc-chat.is-open .lc-chat-launcher {
        /* The panel owns the screen; a launcher floating on top of it is a
           second close button in a place nobody looks. */
        opacity: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lc-chat-panel,
    .lc-chat-launcher,
    .lc-msg,
    .lc-card {
        transition: none;
        animation: none;
    }

    .lc-typing i {
        animation: none;
        opacity: .5;
    }
}

/* --- Send, and stop ------------------------------------------------------
 *
 * One button with two jobs, as ChatGPT and Claude do it: send while idle,
 * stop while a reply is on its way. Two separate buttons would leave one of
 * them permanently dead, and a dead button in the corner of a composer is
 * the one people click.
 */
.lc-chat-send {
    position: relative;
}

.lc-chat-send svg {
    position: absolute;
    transition: opacity .18s ease, transform .18s ease;
}

.lc-chat-send .lc-ico-stop {
    opacity: 0;
    transform: scale(.5);
}

.lc-chat.is-busy .lc-chat-send .lc-ico-send {
    opacity: 0;
    transform: scale(.5);
}

.lc-chat.is-busy .lc-chat-send .lc-ico-stop {
    opacity: 1;
    transform: none;
}

/* Never dimmed while busy — it is live, and pressing it stops the reply. */
.lc-chat.is-busy .lc-chat-send {
    opacity: 1;
    cursor: pointer;
    background: linear-gradient(135deg, #334e5c, #1f3a47);
}

/* A ring while the answer is on its way, so the state is legible from the
   button itself rather than only from the typing dots up in the log. */
.lc-chat.is-busy .lc-chat-send::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--brand-accent);
    animation: lc-spin .8s linear infinite;
}

@keyframes lc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The visitor stopped it themselves. Quiet — it is not an error. */
.lc-stopped {
    align-self: center;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: rgba(2, 48, 71, .06);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light);
}

@media (prefers-reduced-motion: reduce) {
    .lc-chat.is-busy .lc-chat-send::after {
        animation: none;
    }
}

/* --- The enquiry form ----------------------------------------------------
 *
 * Replaces asking for five things one at a time, which is tedious to sit
 * through and easy to abandon halfway. One short form, filled in one go, with
 * a real slot picker rather than typing a date into a chat box.
 */
.lc-form {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: .4rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--brand-accent);
    box-shadow: 0 10px 28px rgba(0, 180, 216, .16);
    animation: lc-pop .25s cubic-bezier(.22, .61, .36, 1);
}

.lc-form-head {
    padding: .65rem .95rem;
    background: rgba(0, 180, 216, .1);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.lc-form-body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem .95rem .6rem;
    /* The form is a flex item in a column log; without this it refuses to
       shrink and pushes the panel wider than it is. */
    min-width: 0;
}

.lc-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.lc-field {
    min-width: 0;
}

.lc-field label {
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.lc-field input,
.lc-field select {
    width: 100%;
    padding: .5rem .6rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    font-family: inherit;
    font-size: .85rem;
    color: var(--text-main);
    transition: border-color .2s ease, background .2s ease;
}

.lc-field input:focus,
.lc-field select:focus {
    outline: none;
    border-color: var(--brand-accent);
    background: var(--white);
}

.lc-field.has-error input,
.lc-field.has-error select {
    border-color: #dc2626;
    background: #fef2f2;
}

.lc-field small {
    font-size: .68rem;
    color: #dc2626;
    min-height: 0;
}

/* Slots as pickable chips rather than a dropdown — a visitor should see what
   is available, not go hunting for it. */
.lc-slots {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .4rem;
}

.lc-slot-row {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .1rem;
}

.lc-slot-row::-webkit-scrollbar {
    display: none;
}

.lc-slot {
    flex: none;
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.lc-slot:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.lc-slot.is-on {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-medium));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.lc-form-actions {
    display: flex;
    gap: .5rem;
    padding: .3rem .95rem .95rem;
}

.lc-form-send {
    flex: 1;
    padding: .6rem .75rem;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-medium));
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.lc-form-send:disabled {
    opacity: .55;
    cursor: default;
}

.lc-form-done {
    padding: .7rem .95rem .95rem;
    font-size: .84rem;
    color: #0f7a4a;
}

/* The day label is a heading for its row, not a chip you can press. */
.lc-slot-day {
    flex: none;
    align-self: center;
    padding-right: .15rem;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-dark);
    white-space: nowrap;
    min-width: 74px;
}

.lc-slot-row {
    align-items: center;
}

/* Dialling code beside the number, as the booking schema stores them. */
.lc-phone {
    display: flex;
    gap: .4rem;
    min-width: 0;
}

.lc-phone select {
    flex: none;
    width: 7.5rem;
}

.lc-phone input {
    flex: 1;
    min-width: 0;
}

.lc-slots-label {
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.lc-form-err {
    margin: 0;
    padding: 0 .95rem .2rem;
    font-size: .76rem;
    color: #dc2626;
}

/* --- Why the form could not be scrolled ---------------------------------
 *
 * The log is a fixed-height flex column, and a flex child defaults to
 * flex-shrink: 1. So a tall form was COMPRESSED to fit the space rather than
 * overflowing it — which meant the log never had anything to scroll, and the
 * lower fields were crushed to nothing and could not be reached or typed in.
 *
 * flex: none on the children makes them keep their natural height, which is
 * what finally gives the log something to scroll.
 */
.lc-chat-log>* {
    flex: none;
}

/* The panel's own furniture must not be squeezed either — the log is the
   only part that should flex. */
.lc-chat-head,
.lc-chat-suggest,
.lc-chat-form,
.lc-chat-foot {
    flex: none;
}

.lc-chat-log {
    /* Momentum scrolling on iOS, and a scrollbar that does not overlay the
       last field. */
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 1rem;
}

/* --- The form, properly dressed ---------------------------------------- */

.lc-form {
    border-color: rgba(0, 180, 216, .55);
    box-shadow: 0 10px 30px rgba(2, 48, 71, .12);
}

.lc-form-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, rgba(0, 180, 216, .16), rgba(0, 119, 182, .1));
    color: var(--brand-dark);
    letter-spacing: .1em;
}

.lc-form-head::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, .2);
}

.lc-field label {
    color: var(--text-muted);
    letter-spacing: .08em;
}

.lc-field input,
.lc-field select {
    padding: .58rem .7rem;
    font-size: .88rem;
    background: var(--white);
    border-color: #d9e2e8;
}

.lc-field input:hover,
.lc-field select:hover {
    border-color: #b9c8d2;
}

.lc-field select {
    /* A native arrow on a white select is inconsistent across platforms; this
       is one chevron, drawn, everywhere. */
    appearance: none;
    -webkit-appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23557' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 11px;
    padding-right: 1.9rem;
}

.lc-slots {
    padding-top: .35rem;
    border-top: 1px dashed var(--border);
}

.lc-slot-row {
    gap: .3rem;
}

.lc-form-send {
    min-height: 44px;
    box-shadow: 0 6px 18px rgba(0, 119, 182, .28);
}

.lc-form-done {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--brand-dark);
    font-family: var(--font-mono);
    font-size: .76rem;
}

.lc-form-done::before {
    content: '✓';
    color: #0f7a4a;
    font-size: .9rem;
}

/* Day and time side by side — one choice each, rather than twelve chips to
   read before picking one. */
.lc-when {
    display: flex;
    gap: .4rem;
    min-width: 0;
}

.lc-when>div {
    flex: 1;
    min-width: 0;
}

.lc-when select {
    width: 100%;
}

/* The office hours, stated where the choice is made rather than discovered
   afterwards. */
.lc-hours {
    margin: .35rem 0 0;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .04em;
    color: var(--text-light);
}

/* Out-of-hours is allowed — the pipeline supports it — so this warns rather
   than blocks. Amber, not red: it is a caveat, not an error. */
.lc-warn:empty {
    display: none;
}

.lc-warn {
    display: block;
    margin: .4rem 0 0;
    padding: .45rem .6rem;
    border-radius: 6px;
    background: #fff8e6;
    border: 1px solid #f0d089;
    font-size: .74rem;
    line-height: 1.45;
    color: #7a5a12;
}

.lc-when input[type="date"] {
    font-family: inherit;
}

/* --- What was actually sent ---------------------------------------------
 *
 * The old confirmation showed three of eight fields, which defeats the point
 * of showing any: a visitor cannot check what they sent. All of it now, as a
 * receipt they can read back.
 */
.lc-sent {
    padding: .85rem .95rem 1rem;
}

.lc-sent dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .9rem;
    margin: 0;
    font-size: .82rem;
}

.lc-sent dt {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light);
    padding-top: .18rem;
    white-space: nowrap;
}

.lc-sent dd {
    margin: 0;
    color: var(--brand-dark);
    font-weight: 500;
    word-break: break-word;
}

.lc-sent-stamp {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .9rem 0 0;
    padding-top: .7rem;
    border-top: 1px dashed var(--border);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0f7a4a;
}

.lc-sent-stamp::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0f7a4a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* --- Polish ------------------------------------------------------------- */

.lc-form-body {
    gap: .7rem;
}

.lc-field label {
    font-weight: 700;
    color: #6b7c88;
}

.lc-field input:focus,
.lc-field select:focus {
    box-shadow: 0 0 0 3px rgba(0, 180, 216, .15);
}

.lc-form-send {
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .18s ease;
}

.lc-form-send:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 119, 182, .34);
}

/* =========================================================================
 * THE MEETING REQUEST CARD
 *
 * Designed FOR a chat panel, not borrowed from the page. A panel is narrow
 * and vertical, so one long form will always fight it — eight fields meant
 * scrolling inside a scroller, which is what made the first attempt
 * unusable. Two short steps fit without scrolling at all.
 *
 * It reads as a message in the thread: same left alignment as the assistant's
 * bubbles, same tail, arriving with the same motion. Not a dialog dropped on
 * top of the conversation.
 * ====================================================================== */

.lc-req {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    margin: .35rem 0;
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 8px 26px rgba(2, 48, 71, .10);
    animation: lc-pop .24s cubic-bezier(.22, .61, .36, 1);
}

.lc-req-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .95rem;
    background: linear-gradient(135deg, rgba(0, 119, 182, .09), rgba(0, 180, 216, .07));
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

/* Two dots rather than "Step 1 of 2" — the panel is narrow and the shape
   says it faster than the words. */
.lc-req-dots {
    display: flex;
    gap: .3rem;
}

.lc-req-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(2, 48, 71, .18);
    transition: background .2s ease, transform .2s ease;
}

.lc-req-dots i.is-on {
    background: var(--brand-primary);
    transform: scale(1.2);
}

.lc-req-body {
    padding: .95rem .95rem .35rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.lc-req-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.lc-req-field label {
    font-size: .74rem;
    font-weight: 600;
    color: #64757f;
}

.lc-req-field input,
.lc-req-field select {
    width: 100%;
    min-width: 0;
    padding: .62rem .75rem;
    border-radius: 10px;
    border: 1px solid #dbe4ea;
    background: var(--white);
    font-family: inherit;
    font-size: .9rem;
    color: var(--text-main);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.lc-req-field input::placeholder {
    color: #a7b5be;
}

.lc-req-field input:focus,
.lc-req-field select:focus {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, .16);
}

.lc-req-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7c88' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 11px;
    padding-right: 2rem;
}

.lc-req-phone,
.lc-req-when {
    display: flex;
    gap: .45rem;
    min-width: 0;
}

.lc-req-phone select {
    flex: none;
    width: 6.6rem;
}

.lc-req-phone input {
    flex: 1;
    min-width: 0;
}

.lc-req-when input,
.lc-req-when select {
    flex: 1;
    min-width: 0;
}

.lc-req-hint {
    margin: 0;
    font-size: .7rem;
    color: var(--text-light);
}

.lc-req-warn:empty {
    display: none;
}

.lc-req-warn {
    margin: .15rem 0 0;
    padding: .45rem .6rem;
    border-radius: 8px;
    background: #fff8e6;
    border: 1px solid #f0d089;
    font-size: .73rem;
    line-height: 1.45;
    color: #7a5a12;
}

.lc-req-err:empty {
    display: none;
}

.lc-req-err {
    margin: 0;
    font-size: .76rem;
    color: #dc2626;
}

.lc-req-foot {
    display: flex;
    gap: .5rem;
    padding: .35rem .95rem .95rem;
}

.lc-req-back {
    padding: .6rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.lc-req-back:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.lc-req-next {
    flex: 1;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-medium));
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 119, 182, .26);
    transition: transform .18s ease, box-shadow .18s ease;
}

.lc-req-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 119, 182, .32);
}

/* --- Sent ---------------------------------------------------------------
 * The card becomes its own receipt: every field, so the visitor can check
 * what actually went. */
.lc-req.is-sent {
    border-color: rgba(15, 122, 74, .35);
    background: #f7fbf9;
}

.lc-req.is-sent dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .9rem;
    margin: 0;
    padding: .9rem .95rem .1rem;
    font-size: .82rem;
}

.lc-req.is-sent dt {
    font-family: var(--font-mono);
    font-size: .63rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light);
    padding-top: .18rem;
    white-space: nowrap;
}

.lc-req.is-sent dd {
    margin: 0;
    color: var(--brand-dark);
    font-weight: 500;
    word-break: break-word;
}

.lc-req-stamp {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .8rem 0 0;
    padding: .6rem .95rem .9rem;
    border-top: 1px dashed rgba(15, 122, 74, .25);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0f7a4a;
}

.lc-req-stamp::before {
    content: '✓';
    font-size: .85rem;
}

@media (max-width: 400px) {
    .lc-req-when {
        flex-direction: column;
    }
}

/* =========================================================================
 * MEETING REQUEST — restyled to the site's own language
 *
 * The first pass was generic: tall white boxes, grey sentence-case labels,
 * airy spacing. It could have belonged to any website, which on a site that
 * uses mono micro-labels, navy grounds and cyan accents everywhere else is
 * the one thing it must not be.
 *
 * What this fixes:
 *  - Labels become mono uppercase micro-type, as on the leadership roles,
 *    the office regions and the band kickers.
 *  - Fields become FILLED, not outlined. A row of heavy rounded outlines in
 *    a 475px panel is mostly border; a tinted fill with one accent line on
 *    focus reads as an instrument rather than a web form.
 *  - The header takes the panel's own navy, so the card reads as the
 *    assistant asking rather than a white box someone dropped in.
 *  - Roughly a third of the vertical space comes back, which is what lets
 *    both steps sit comfortably without scrolling.
 * ====================================================================== */

.lc-req {
    border-color: rgba(2, 48, 71, .1);
    box-shadow: 0 10px 30px rgba(2, 48, 71, .13);
}

/* Navy, like the panel header — this is the assistant speaking. */
.lc-req-head {
    padding: .6rem .9rem;
    background:
        radial-gradient(120% 240% at 92% -60%, rgba(0, 180, 216, .38), transparent 62%),
        var(--brand-dark);
    border-bottom: 0;
    color: rgba(255, 255, 255, .95);
    font-size: .64rem;
    letter-spacing: .16em;
}

.lc-req-dots i {
    background: rgba(255, 255, 255, .28);
}

.lc-req-dots i.is-on {
    background: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, .2);
}

.lc-req-body {
    padding: .9rem .9rem .5rem;
    gap: .6rem;
}

/* Micro-type, as everywhere else on this site. */
.lc-req-field label {
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #8a99a4;
}

/* Filled, with a single accent line that lights on focus. A row of heavy
   outlines in a narrow panel is mostly border. */
.lc-req-field input,
.lc-req-field select {
    padding: .52rem .7rem;
    border: 1px solid transparent;
    border-bottom: 2px solid #dbe4ea;
    border-radius: 8px 8px 4px 4px;
    background: #f2f6f9;
    font-size: .875rem;
    font-weight: 500;
    color: var(--brand-dark);
    box-shadow: none;
}

.lc-req-field input::placeholder {
    color: #9fb0bb;
    font-weight: 400;
}

.lc-req-field input:hover,
.lc-req-field select:hover {
    background: #eaf1f6;
    border-bottom-color: #b9ccd8;
}

.lc-req-field input:focus,
.lc-req-field select:focus {
    background: var(--white);
    border-color: transparent;
    border-bottom-color: var(--brand-accent);
    box-shadow: 0 2px 10px rgba(0, 180, 216, .16);
}

.lc-req-field select {
    background-position: right .6rem center;
    padding-right: 1.8rem;
}

.lc-req-phone select {
    width: 5.9rem;
    font-family: var(--font-mono);
    font-size: .8rem;
}

.lc-req-when input[type="date"] {
    font-family: var(--font-mono);
    font-size: .82rem;
}

.lc-req-hint {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .04em;
    color: #9aa8b2;
}

.lc-req-foot {
    padding: .25rem .9rem .9rem;
    gap: .45rem;
}

/* Not a slab. Sized to the words, with the arrow doing the pointing. */
.lc-req-next {
    min-height: 40px;
    border-radius: 9px;
    font-size: .84rem;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(0, 119, 182, .24);
}

.lc-req-next::after {
    content: ' →';
    opacity: .75;
}

.lc-req-back {
    padding: .55rem .85rem;
    border-radius: 9px;
    font-size: .8rem;
    background: #f2f6f9;
    border-color: transparent;
}

.lc-req-warn,
.lc-req-err {
    font-size: .71rem;
}

/* The receipt keeps the same instrument feel rather than turning green and
   shouting. */
.lc-req.is-sent {
    background: var(--white);
    border-color: rgba(15, 122, 74, .25);
}

.lc-req.is-sent dl {
    padding: .85rem .9rem .1rem;
    gap: .28rem .8rem;
    font-size: .8rem;
}

.lc-req-stamp {
    padding: .55rem .9rem .85rem;
    background: rgba(15, 122, 74, .05);
}

/* "+91  India" was clipping to "+91 Ind" at 5.9rem. The code is the part that
   matters and the country name is confirmation, so the box is sized to hold
   both rather than half of one. */
.lc-req-phone select {
    width: 7.4rem;
    font-size: .76rem;
    letter-spacing: -.01em;
}

@media (max-width: 420px) {

    /* On a phone the country name is the first thing to go — the code alone
       is unambiguous once chosen. */
    .lc-req-phone select {
        width: 5.4rem;
    }
}

/* =========================================================================
 * LIQUID GLASS
 *
 * The card read as a form on a page. It should read as a pane of frosted
 * glass laid over the conversation — which is a real material, not a colour:
 * it blurs and saturates what is behind it, catches a highlight along its top
 * edge, and casts a soft shadow rather than sitting flat.
 *
 * The dot field in the chat log is what makes it legible as glass. There is
 * something behind it to blur, so the blur has visible work to do.
 * ====================================================================== */

.lc-req {
    position: relative;
    isolation: isolate;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .7);
    /* Translucent, not white. Opacity is what lets the backdrop blur show. */
    background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(244, 249, 252, .68));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        /* the highlight along the top edge, as on real glass */
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -1px 0 rgba(2, 48, 71, .05),
        0 1px 2px rgba(2, 48, 71, .06),
        0 14px 40px rgba(2, 48, 71, .16),
        0 32px 60px -24px rgba(2, 48, 71, .22);
    animation: lc-glass .55s cubic-bezier(.16, 1.02, .3, 1) both;
}

/* A specular sheen across the top third — the thing that reads as "glass"
   rather than "translucent rectangle". */
.lc-req::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    z-index: -1;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
    pointer-events: none;
}

/* Arrives like a bubble: small, soft and slightly behind, then settles
   forward. The overshoot in the easing is what makes it feel physical
   instead of merely animated. */
@keyframes lc-glass {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.94);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

.lc-req-head {
    background:
        linear-gradient(135deg, rgba(0, 119, 182, .92), rgba(0, 150, 199, .88));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 19px 19px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    color: #fff;
}

.lc-req-dots {
    display: none;
}

.lc-req-body {
    padding: 1rem .95rem .55rem;
    gap: .7rem;
}

/* Fields are glass too — recessed panes rather than boxes drawn on top. */
.lc-req-field input,
.lc-req-field select {
    padding: .62rem .8rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 12px;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 2px rgba(2, 48, 71, .06),
        0 1px 0 rgba(255, 255, 255, .6);
    font-size: .9rem;
    transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.lc-req-field input:hover,
.lc-req-field select:hover {
    background: rgba(255, 255, 255, .78);
}

.lc-req-field input:focus,
.lc-req-field select:focus {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(0, 180, 216, .55);
    box-shadow:
        inset 0 1px 2px rgba(2, 48, 71, .04),
        0 0 0 4px rgba(0, 180, 216, .14);
}

.lc-req-field label {
    color: #7b8b96;
}

/* A proper button, not a strip. Full width, tall enough to mean it, with a
   sheen of its own. */
.lc-req-foot {
    padding: .45rem .95rem 1rem;
}

.lc-req-next {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .005em;
    background: linear-gradient(135deg, #0077B6, #00A0CC);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 8px 22px rgba(0, 119, 182, .34);
    transition: transform .2s cubic-bezier(.16, 1.02, .3, 1), box-shadow .2s ease;
}

.lc-req-next::before {
    content: '';
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent);
    pointer-events: none;
}

.lc-req-next:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 14px 30px rgba(0, 119, 182, .4);
}

.lc-req-next:active {
    transform: translateY(0) scale(.99);
}

.lc-req-hint {
    color: #8fa0ab;
}

.lc-req.is-sent {
    background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(240, 250, 246, .72));
    border-color: rgba(15, 122, 74, .3);
}

@media (prefers-reduced-motion: reduce) {
    .lc-req {
        animation: none;
    }
}

/* Safari and Chrome do this; anywhere without backdrop-filter falls back to a
   solid card rather than an unreadable transparent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .lc-req,
    .lc-req-field input,
    .lc-req-field select {
        background: var(--white);
    }
}

/* =========================================================================
 * LIQUID GLASS — properly this time
 *
 * The previous attempt failed for two reasons, and the first one is the
 * interesting one:
 *
 * 1. GLASS OVER WHITE IS JUST WHITE. A blur can only reveal what sits behind
 *    it, and behind this card was a near-white log with faint grey dots.
 *    There was nothing to refract, so no amount of blur could read as glass.
 *    The card now casts its own coloured aura underneath itself — so there
 *    IS something back there, and the blur finally has work to do.
 *
 * 2. 0.82 alpha is not translucent, it is paint. Real glass sits far lower
 *    and leans on heavy blur and saturation to stay legible.
 * ====================================================================== */

.lc-req {
    /* The card is the stacking context; the aura lives behind it. */
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .12));
    -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.06);
    backdrop-filter: blur(30px) saturate(190%) brightness(1.06);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .85),
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        0 2px 6px rgba(2, 48, 71, .07),
        0 18px 48px rgba(2, 48, 71, .18);
}

/* The colour the glass refracts. Without this the card is transparent over
   nothing and reads as flat. Sits BEHIND the card, blurred by it. */
.lc-req::after {
    content: '';
    position: absolute;
    inset: -14% -10%;
    z-index: -2;
    border-radius: 40px;
    background:
        radial-gradient(42% 46% at 18% 8%, rgba(0, 180, 216, .55), transparent 70%),
        radial-gradient(46% 44% at 88% 22%, rgba(0, 119, 182, .45), transparent 72%),
        radial-gradient(50% 50% at 62% 96%, rgba(127, 231, 255, .5), transparent 70%);
    filter: blur(26px);
    opacity: .85;
    pointer-events: none;
    animation: lc-aura 14s ease-in-out infinite alternate;
}

/* The aura drifts, so light appears to move across the pane. */
@keyframes lc-aura {
    to {
        transform: translate3d(6%, -4%, 0) scale(1.08);
    }
}

/* The specular edge — a bright rim along the top that fades away, which is
   what the eye reads as a lit edge of glass. */
.lc-req::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .1) 38%, transparent 62%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    height: auto;
    pointer-events: none;
}

/* The header is glass too, tinted rather than filled — a solid navy bar on a
   glass card is a lid, not part of the pane. */
.lc-req-head {
    background: linear-gradient(135deg, rgba(0, 119, 182, .55), rgba(0, 180, 216, .38));
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-radius: 21px 21px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(2, 48, 71, .35);
}

/* Fields: frosted, not filled. Low alpha with their own blur so the aura
   glows faintly through them. */
.lc-req-field input,
.lc-req-field select {
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 13px;
    background: rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .7),
        inset 0 -1px 2px rgba(2, 48, 71, .05);
    color: #06304a;
}

.lc-req-field input:hover,
.lc-req-field select:hover {
    background: rgba(255, 255, 255, .48);
}

.lc-req-field input:focus,
.lc-req-field select:focus {
    background: rgba(255, 255, 255, .68);
    border-color: rgba(255, 255, 255, .95);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .9),
        0 0 0 4px rgba(0, 180, 216, .22);
}

.lc-req-field label {
    color: #4d6472;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.lc-req-hint {
    color: #5d7381;
}

/* The button stays solid — it is the one thing that should feel pressable
   rather than see-through. */
.lc-req-next {
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(0, 119, 182, .96), rgba(0, 168, 214, .94));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -2px 6px rgba(2, 48, 71, .18),
        0 10px 26px rgba(0, 119, 182, .38);
}

.lc-req.is-sent {
    background: linear-gradient(150deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16));
}

.lc-req.is-sent::after {
    background: radial-gradient(60% 60% at 50% 40%, rgba(16, 185, 129, .42), transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
    .lc-req::after {
        animation: none;
    }
}

/* =========================================================================
 * GLASS — colour stripped
 *
 * The cyan aura and the blue header were me compensating: I could not get
 * the material to read, so I added colour until something showed. That is
 * the opposite of glass. Real glass has no colour of its own — it is clear,
 * and everything you see in it is edge, shadow and what lies behind.
 *
 * So: no tint, no aura, no gradient header. What is left is the material —
 * a bright rim where light catches, a dark rim where it does not, a soft
 * shadow beneath, and heavy blur. Neutral throughout.
 * ====================================================================== */

.lc-req {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .65);
    /* Almost nothing. The blur does the work, not the fill. */
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(40px) saturate(125%);
    backdrop-filter: blur(40px) saturate(125%);
    box-shadow:
        /* lit top edge */
        inset 0 1px 1px rgba(255, 255, 255, .9),
        /* shaded bottom edge — glass is not lit from below */
        inset 0 -1px 1px rgba(20, 35, 45, .07),
        /* contact shadow, then the soft one it floats on */
        0 1px 2px rgba(20, 35, 45, .06),
        0 20px 50px -12px rgba(20, 35, 45, .22);
}

/* No aura. Glass does not glow. */
.lc-req::after {
    display: none;
}

.lc-req::before {
    border-radius: 24px;
    background: linear-gradient(155deg,
            rgba(255, 255, 255, .95),
            rgba(255, 255, 255, .25) 26%,
            transparent 48%,
            rgba(255, 255, 255, .22) 88%);
}

/* Clear, not blue. Just a slightly denser pane with a hairline under it. */
.lc-req-head {
    background: rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    border-radius: 23px 23px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    color: #3d5361;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* Recessed panes — the inner shadow at the top is what makes them read as
   pressed into the glass rather than sitting on it. */
.lc-req-field input,
.lc-req-field select {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    background: rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
    box-shadow:
        inset 0 1.5px 3px rgba(20, 35, 45, .07),
        inset 0 -1px 0 rgba(255, 255, 255, .65);
    color: #1d333f;
}

.lc-req-field input::placeholder {
    color: rgba(29, 51, 63, .38);
}

.lc-req-field input:hover,
.lc-req-field select:hover {
    background: rgba(255, 255, 255, .4);
}

.lc-req-field input:focus,
.lc-req-field select:focus {
    background: rgba(255, 255, 255, .62);
    border-color: rgba(255, 255, 255, .95);
    box-shadow:
        inset 0 1.5px 3px rgba(20, 35, 45, .05),
        0 0 0 4px rgba(120, 145, 160, .16);
}

.lc-req-field label {
    color: #63798a;
}

.lc-req-hint {
    color: rgba(29, 51, 63, .45);
}

/* Graphite, not brand blue. The one solid object on the pane, so it reads as
   the thing you press — without reintroducing colour. */
.lc-req-next {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(52, 71, 84, .96), rgba(28, 44, 55, .97));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 -2px 5px rgba(0, 0, 0, .22),
        0 8px 22px rgba(20, 35, 45, .3);
}

.lc-req-next:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 5px rgba(0, 0, 0, .22),
        0 14px 30px rgba(20, 35, 45, .34);
}

.lc-req-back {
    background: rgba(255, 255, 255, .3);
    border: 1px solid rgba(255, 255, 255, .6);
    color: #4d6272;
}

.lc-req.is-sent {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .6);
}

.lc-req.is-sent::after {
    display: none;
}

.lc-req-stamp {
    background: rgba(255, 255, 255, .18);
    color: #3f6a55;
}