/* askdoorman.com, built from the Doorman handoffs: design_handoff_signin (page, glow, controls) and
   design_handoff_doorman_conversations (white panel on the warm canvas, tinted icon tiles). */
:root {
  --page: #fbfaf8;
  --canvas: #f4f2ee;
  --ink: #1d1c1a;
  --ink-hover: #33312d;
  --muted: #6a675f;
  --subtle: #8d897f;
  --placeholder: #9a968f;
  --secondary: #efede9;
  --secondary-hover: #e6e3de;
  --input-border: #e3e0da;
  --divider: #e6e3dd;
  --panel-border: #e8e4dc;
  --glow: radial-gradient(ellipse 60% 55% at 50% 112%, oklch(0.8 0.11 70) 0%, oklch(0.88 0.07 75 / 0.7) 35%, oklch(0.96 0.02 80 / 0) 75%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.55 Figtree, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(1040px, 100% - 48px); margin-inline: auto; }

/* top */
.top { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.top img { height: 30px; width: auto; }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.top nav a:not(.pill) { text-decoration: none; color: var(--muted); }
.top nav a:not(.pill):hover { color: var(--ink); }

/* buttons: pills, as on sign-in */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  font: 600 15px/1 Figtree, sans-serif; text-decoration: none; cursor: pointer;
  background: var(--ink); color: #fff;
}
.pill:hover { background: var(--ink-hover); }
.pill.soft { background: var(--secondary); color: var(--ink); }
.pill.soft:hover { background: var(--secondary-hover); }
.pill.small { height: 36px; padding: 0 16px; font-size: 14px; }
.pill:disabled { opacity: .55; cursor: default; }
.pill:focus-visible, .top a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* hero: the sign-in column, wider, with its glow */
.hero { padding: 104px 24px 88px; text-align: center; }
.hero h1 { margin: 0 auto; max-width: 720px; font-size: clamp(36px, 5.4vw, 56px); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; }
.hero p { margin: 22px auto 0; max-width: 560px; font-size: 18px; color: var(--muted); }
.hero .actions { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* the app's white panel on the warm canvas */
.panel-band { background: linear-gradient(to bottom, var(--page), var(--canvas) 120px, var(--canvas) calc(100% - 120px), var(--page)); padding: 40px 0 96px; }
.panel { background: #fff; border: 1px solid var(--panel-border); border-radius: 18px; padding: 44px; }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 72px 52px; }
.points.four { grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 64px 48px; }
.points.four .say { font-size: 17px; }
.label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.say { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 30ch; }

/* early access: the sign-in form, glow and all */
.closing { position: relative; overflow: hidden; }
/* one glow rising from the bottom of the page, as on sign-in */
.closing::before { content: ''; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.closing > * { position: relative; }
.access { padding: 56px 24px 112px; text-align: center; }
.access h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); }
.access .sub { margin: 10px auto 0; max-width: 380px; color: var(--subtle); font-size: 15px; }
.form { margin: 36px auto 0; max-width: 380px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.form input {
  height: 46px; padding: 0 16px; border: 1px solid var(--input-border); border-radius: 12px; background: #fff;
  font: 400 15px Figtree, sans-serif; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.form input::placeholder { color: var(--placeholder); }
.form input:focus { outline: none; border-color: var(--ink); }
.form .pill { width: 100%; margin-top: 4px; }
.note { margin: 2px 0 0; min-height: 20px; font-size: 13px; color: var(--muted); text-align: center; }
.fine { margin: 0; font-size: 13px; color: var(--subtle); text-align: center; }
.or { display: flex; align-items: center; gap: 16px; margin: 10px 0; color: var(--subtle); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.foot { display: flex; justify-content: space-between; padding: 26px 0 34px; font-size: 13px; color: var(--subtle); }
.foot a { color: var(--subtle); text-decoration: none; margin-left: 18px; }
.foot a:hover { color: var(--ink); }

/* legal pages */
.legal { max-width: 680px; padding: 40px 0 72px; }
.legal h1 { margin: 0 0 8px; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.legal h2 { margin: 34px 0 8px; font-size: 17px; font-weight: 600; }
.legal p { margin: 0 0 12px; color: var(--muted); }
.legal .updated { color: var(--subtle); font-size: 14px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .points.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .points, .points.four { grid-template-columns: 1fr; gap: 32px; padding: 36px 26px; }
  .panel { padding: 28px 24px; }
  .hero { padding: 64px 20px 96px; }
  .top nav a:not(.pill) { display: none; }
}