/* Log in, Request access and Reset password: the form on the left, a dark panel on the right with what the
   module looks like and the dragon rising out of its foot. Below iPad width the panel goes and the form has
   the screen. */
:root { --ink: #141518; --muted: #4A5060; --line: #E4E4E8; --blue: #0267E3; --blue2: #1A7DF2; --cream: #F7F4EA; }
* { box-sizing: border-box; }
html, body { overflow-x: clip; overscroll-behavior-x: none; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #FFFFFF; color: var(--ink); font: 16px/1.5 'DM Sans', system-ui, sans-serif; }
a { color: var(--blue); }

.a-main { min-height: 100svh; display: flex; flex-direction: column; padding: 20px clamp(16px, 4vw, 48px); }
.a-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.a-top .logo { font: 900 21px 'Poppins', sans-serif; color: var(--ink); text-decoration: none; }
.a-top span { font-size: 15px; color: var(--muted); }
.a-top span a { font-weight: 700; text-decoration: none; }
.a-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(40px, 8vh, 80px) 0; }
.a-step { width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; animation: a-in 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.a-step[hidden] { display: none; }
@keyframes a-in { from { opacity: 0; transform: translateY(14px); } }
.crumb { margin: 0; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
h1 { margin: 0; font: 900 clamp(2.1rem, 1.5rem + 2.2vw, 2.9rem)/1.02 'Poppins', sans-serif; letter-spacing: -0.04em; }
.lede { margin: -6px 0 0; color: var(--muted); }
.lede b { color: var(--ink); }

.a-mods { display: flex; flex-direction: column; gap: 10px; }
.a-mod { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 52px 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.25s ease, translate 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.a-mod strong { font-size: 17px; }
.a-mod span { font-size: 14.5px; color: var(--muted); }
.a-mod svg { position: absolute; right: 18px; top: 50%; margin-top: -8px; color: var(--muted); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s ease; }
.a-mod:hover, .a-mod:focus-visible { border-color: rgba(2, 103, 227, 0.45); box-shadow: 0 10px 30px rgba(11, 15, 22, 0.08); translate: 0 -1px; outline: none; }
.a-mod:hover svg, .a-mod:focus-visible svg { transform: translateX(4px); color: var(--blue); }

.a-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--muted); font: 500 15px 'DM Sans', sans-serif; cursor: pointer; }
.a-back:hover { color: var(--ink); }
.a-field { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 700; }
.a-field small { font-weight: 500; color: var(--muted); }
.a-field input, .a-pw { width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: #FFFFFF; font: 500 16px 'DM Sans', sans-serif; color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.a-field input { padding: 0 16px; outline: none; }
.a-field textarea { width: 100%; min-height: 128px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #FFFFFF; font: 500 16px/1.5 'DM Sans', sans-serif; color: var(--ink); resize: vertical; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.a-field input:focus, .a-field textarea:focus, .a-pw:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(2, 103, 227, 0.12); }
.a-field input:user-invalid { border-color: #E5484D; }
.a-pw { display: flex; align-items: center; padding-right: 6px; }
.a-pw input { flex: 1; height: 100%; border: 0; background: none; box-shadow: none !important; }
.a-eye { height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 700 14px 'DM Sans', sans-serif; cursor: pointer; }
.a-eye:hover { background: #F5F5F3; color: var(--ink); }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.a-row a { font-weight: 700; text-decoration: none; }
.a-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #2A2F3A; cursor: pointer; }
.a-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.a-check small { color: var(--muted); }
.a-checks { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #F5F5F3; }
.a-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.a-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; font: 500 15px 'DM Sans', sans-serif; color: var(--ink); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.a-chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
/* The modules the answers chose: shown, not clicked. */
.a-fit .a-mod { padding-right: 18px; cursor: default; }
.a-fit .a-mod:hover { border-color: var(--line); box-shadow: none; translate: none; }
.a-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .a-two { grid-template-columns: 1fr; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 700 16px 'DM Sans', sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; transition: filter 0.25s ease, opacity 0.2s ease, scale 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.btn.blue { width: 100%; border: 1px solid rgba(0, 40, 110, 0.25); background: linear-gradient(180deg, var(--blue2), var(--blue)); color: #FFFDF6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(2, 103, 227, 0.3), 0 8px 24px rgba(2, 103, 227, 0.28); }
.btn.blue:hover:not(:disabled) { filter: brightness(0.93); }
.btn:active:not(:disabled) { scale: 0.97; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.roll-t { display: inline-block; text-shadow: 0 2.6em 0 currentColor; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.btn:hover:not(:disabled) .roll-t { transform: translateY(-2.6em); }
.a-or { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.a-or::before, .a-or::after { content: ''; flex: 1; height: 1px; background: #ECECEF; }
.a-sso { display: flex; flex-direction: column; gap: 10px; }
.a-alt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); font: 700 16px 'DM Sans', sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(11, 15, 22, 0.06); transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, scale 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.a-alt svg { flex: none; }
.a-alt:hover:not(:disabled) { background: #F7F7F8; border-color: #D5D5DA; }
.a-alt:active:not(:disabled) { scale: 0.97; }
.a-alt:disabled { opacity: 0.45; cursor: not-allowed; }
.a-pic { overflow: hidden; border-radius: 16px; background: #F0F0F2; }
.a-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a-open { height: 220px; border: 1px solid var(--line); }
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; border-radius: 16px; background: #F0F0F2 repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.12) 0 1px, transparent 1px 11px); outline: 1px dashed rgba(128, 128, 128, 0.4); outline-offset: -6px; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: 0.04em; color: var(--muted); }
.a-note { margin: 0; font-size: 15px; color: var(--muted); }
.a-note a { font-weight: 700; text-decoration: none; }
.a-status { margin: 0; font-size: 14.5px; color: #1F8F4E; min-height: 1.5em; }
.a-status.bad { color: #B4232A; }
form[data-step="create"] .a-status:empty, form[data-step="ask"] .a-status:empty, form[data-step="new"] .a-status:empty, [data-step="demo"] .a-status:empty { display: none; }
/* Request access's demo step: the booking page's calendar, month above the times, in a wider column. */
.a-step.a-wide { width: min(560px, 100%); }
.a-step .cal { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px; }
.a-step .cal-side { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.a-tick { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #E3F5EA; color: #1F8F4E; font-size: 26px; font-weight: 700; }
.a-fit-h { margin: 0; font-weight: 700; }
.a-fit:empty, .a-fit-h:has(+ .a-fit:empty) { display: none; }
.a-status a { color: inherit; font-weight: 700; }
.a-field input.a-code { height: 60px; font: 700 26px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.3em; text-align: center; }
.a-mail { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(2, 103, 227, 0.08); color: var(--blue); }

.a-foot { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13.5px; color: #8A8F9C; }
.a-foot a, .a-foot button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.a-foot a:hover, .a-foot button:hover { color: var(--ink); }

.a-side { position: sticky; top: 0; height: 100svh; overflow: hidden; margin: 12px 12px 12px 0; height: calc(100svh - 24px); border-radius: 28px; background: #141518; color: #F5F5F3; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(32px, 5vw, 64px); }
.a-side .crumb { color: #B8BCC6; }
.a-side h2 { margin: 0; max-width: 13em; font: 900 clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem)/1.06 'Poppins', sans-serif; letter-spacing: -0.04em; }
.a-side .ph { height: clamp(200px, 30vh, 320px); background-color: #2A2D31; color: #B8BCC6; transition: opacity 0.25s ease; }
.a-side .a-pic { height: clamp(200px, 30vh, 320px); background: #2A2D31; transition: opacity 0.25s ease; }
/* No customers yet: where a customer's words would go, an invitation to be the first. */
.a-story { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.a-story strong { font: 900 clamp(1.25rem, 1rem + 0.8vw, 1.6rem)/1.1 'Poppins', sans-serif; letter-spacing: -0.03em; }
.a-story span { color: #B8BCC6; }
.a-side ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: #D5D8DF; }
.a-side li { display: flex; gap: 10px; align-items: baseline; }
.a-side li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #6FB0FF; translate: 0 -2px; }
.a-dragon { position: absolute; right: -6%; bottom: -18%; width: min(46%, 340px); height: auto; scale: -1 1; opacity: 0.95; pointer-events: none; animation: a-rise 1.4s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both; }
@keyframes a-rise { from { transform: translateY(40%); } }
.a-side > :not(.a-dragon) { position: relative; z-index: 1; }

@media (max-width: 960px) {
  body { grid-template-columns: 1fr; }
  .a-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .a-step, .a-dragon { animation: none; }
  .roll-t { transition: none; text-shadow: none; }
  .btn:hover .roll-t { transform: none; }
}