/* Glow UI — design tokens and components measured from the original design.
   Tokens mirror framework/tokens.json. Components are flow-layout and responsive;
   the landing page positions them 1:1 on desktop with its own layout rules. */

@font-face { font-family: "Glow Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/GlowDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Glow Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/GlowDisplay-Italic.woff2") format("woff2"); }

:root {
  --gl-ink: #111111;
  --gl-ink-strong: #0b0b0b;
  --gl-text: #1e1e1e;
  --gl-text-muted: #555555;
  --gl-text-subtle: #6a6a6a;
  --gl-text-faint: #8a8a8a;
  --gl-eyebrow: #3a3a3a;
  --gl-line: #e8e8e8;
  --gl-line-soft: #efefef;
  --gl-divider: #dddddd;
  --gl-surface: #ffffff;
  --gl-canvas-top: #eeeeee;
  --gl-canvas: #f6f6f6;
  --gl-strip: #fbfbfb;
  --gl-tile: #efedeb;
  --gl-on-dark: #ffffff;
  /* measured surface colours (median of clean patches in the original) */
  --gl-btn-primary: #000001;   /* Sign Up */
  --gl-btn-search: #111214;    /* Search */
  --gl-btn-app: #060606;       /* Book */
  --gl-field: #fefefe;         /* search bar, app field, badge */
  --gl-surface-soft: #f7f7f7;  /* location pill, phone screen */
  --gl-screen: #f7f7f7;
  --gl-ring-fill: #fbfbfb;
  --gl-card: #fcfcfb;

  --gl-font-display: "Glow Display", "Libre Caslon Display", "Bodoni 72", Georgia, serif;
  --gl-font-display-italic: "Glow Display", "Libre Caslon Text", Georgia, serif;
  --gl-font-sans: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gl-radius-pill: 999px;
  --gl-radius-xl: 26px;
  --gl-radius-l: 18px;
  --gl-radius-m: 10px;
  --gl-radius-s: 8px;

  --gl-control: 48px;
  --gl-control-lg: 72px;
  --gl-ring: 66px;

  --gl-shadow-card: 0 2px 8px rgba(0, 0, 0, .04);
  --gl-shadow-badge: 0 6px 20px rgba(0, 0, 0, .06);
  --gl-shadow-device: 0 24px 50px rgba(0, 0, 0, .22);

  --gl-canvas-gradient: linear-gradient(var(--gl-canvas-top) 0, #f2f2f2 90px, #f4f4f4 300px, var(--gl-canvas) 450px);
}

/* ---------- type ---------- */
.gl-display-xl { font: 400 clamp(38px, 10.4vw, 73.4px)/1.01 var(--gl-font-display); color: var(--gl-ink); }
.gl-display-xl em { font-family: var(--gl-font-display-italic); font-style: italic; }
.gl-display-l { font: 400 64px/1 var(--gl-font-display); }
.gl-display-m { font: 400 25px/1.1 var(--gl-font-display); }
.gl-display-s { font: 400 21px/1.15 var(--gl-font-display); }
.gl-body-l { font: 400 18.5px/30px var(--gl-font-sans); color: var(--gl-text-muted); }
.gl-title { font: 500 17px/22px var(--gl-font-sans); color: var(--gl-ink); }
.gl-body { font: 400 16px/22px var(--gl-font-sans); }
.gl-label { font: 400 14px/22px var(--gl-font-sans); color: var(--gl-text-subtle); }
.gl-eyebrow { font: 400 13px/14px var(--gl-font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gl-eyebrow); }

/* ---------- icons (traced from the design; see framework/icons.svg) ---------- */
.gl-icon { display: inline-block; width: 20px; height: 20px; fill: currentColor; flex: none; vertical-align: middle; }
.gl-icon--sm { width: 16px; height: 16px; }
.gl-icon--lg { width: 30px; height: 30px; }

/* ---------- buttons & pills ---------- */
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--gl-control);
  padding: 0 26px; border: 0; border-radius: var(--gl-radius-pill); background: var(--gl-ink-strong); color: var(--gl-on-dark);
  font: 500 16px/1 var(--gl-font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.gl-btn:hover { background: #262626; }
.gl-btn:focus-visible, .gl-pill:focus-visible { outline: 2px solid var(--gl-ink); outline-offset: 3px; }
.gl-btn--square { border-radius: var(--gl-radius-l); }
.gl-btn--sm { height: 23px; padding: 0 14px; font-size: 9.5px; border-radius: 12px; }
.gl-pill { display: inline-flex; align-items: center; gap: 8px; height: var(--gl-control); padding: 0 16px 0 18px;
  border: 1px solid var(--gl-line); border-radius: var(--gl-radius-pill); background: var(--gl-surface); color: var(--gl-ink);
  font: 400 15px/1 var(--gl-font-sans); cursor: pointer; }

/* ---------- search bar ---------- */
.gl-search { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px; background: var(--gl-surface);
  border: 1px solid var(--gl-line); border-radius: 22px; }
.gl-search__field { display: flex; align-items: center; gap: 12px; height: var(--gl-control); padding: 0 12px; font: 400 15.5px var(--gl-font-sans); color: var(--gl-text); }
.gl-search__field input, .gl-search__field select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; appearance: none; }
.gl-search__field input::placeholder { color: var(--gl-text-faint); }
@media (min-width: 640px) {
  .gl-search { grid-template-columns: 1fr auto auto; align-items: center; min-height: var(--gl-control-lg); padding: 0 12px 0 8px; border-radius: var(--gl-radius-xl); }
  .gl-search__field + .gl-search__field { border-left: 1px solid var(--gl-line); }
}

/* ---------- feature item ---------- */
.gl-feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.gl-ring { display: grid; place-items: center; width: var(--gl-ring); height: var(--gl-ring); margin-bottom: 16px;
  border-radius: 50%; border: 1px solid var(--gl-line); background: var(--gl-surface); color: var(--gl-ink); }
.gl-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 8px; }
@media (min-width: 640px) {
  .gl-features { grid-template-columns: repeat(4, 1fr); }
  .gl-features > * + * { border-left: 1px solid var(--gl-divider); }
}

/* ---------- listing card (app) ---------- */
.gl-card { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 8px; background: var(--gl-surface);
  border: 1px solid var(--gl-line-soft); border-radius: var(--gl-radius-m); box-shadow: var(--gl-shadow-card); font-family: var(--gl-font-sans); }
.gl-card__thumb { width: 80px; height: 96px; object-fit: cover; border-radius: var(--gl-radius-s); }
.gl-card__title { font: 500 11.5px/1.3 var(--gl-font-sans); margin: 3px 0 6px; }
.gl-card__meta { font-size: 8.3px; color: #7a7a7a; }
.gl-card__svc { font-size: 9px; color: #333; margin-top: 9px; }
.gl-card__price { font: 700 11px var(--gl-font-sans); margin-top: 16px; }
.gl-card__save { position: absolute; top: 10px; right: 10px; width: 12px; height: 14px; color: #666; }
.gl-card .gl-btn--sm { position: absolute; right: 8px; bottom: 10px; }

/* ---------- service tile (app) ---------- */
.gl-tile { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 48px; height: 77px; padding-top: 14px;
  background: var(--gl-tile); border-radius: var(--gl-radius-m); font: 400 8.5px var(--gl-font-sans); color: #333; }

/* ---------- tab bar (app) ---------- */
.gl-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 4px; border-top: 1px solid #f0f0f0; background: var(--gl-surface); }
.gl-tabbar > * { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 400 7.8px var(--gl-font-sans); color: var(--gl-text-faint); }
.gl-tabbar > [aria-current] { color: var(--gl-ink); font-weight: 500; }

/* ---------- seal badge ---------- */
.gl-badge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 140px; height: 140px;
  border-radius: 50%; border: 1px solid #e4e4e4; background: var(--gl-surface); box-shadow: var(--gl-shadow-badge); }
.gl-badge strong { font: 400 25px/1 var(--gl-font-display); margin-top: 10px; }
.gl-badge span { font: 400 10.5px var(--gl-font-sans); letter-spacing: .12em; margin-top: 8px; }

/* ---------- device frame ---------- */
.gl-device { width: 323px; height: 698px; padding: 12px; border-radius: 52px; background: var(--gl-ink-strong);
  box-shadow: inset 0 0 0 2.2px #a4a4a7, inset 0 0 0 5px #2b2b2d, var(--gl-shadow-device); }
.gl-device__screen { position: relative; height: 100%; overflow: hidden; border-radius: 42px; background: var(--gl-surface); }

/* ---------- brand logos row ---------- */
.gl-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 48px; padding: 0; margin: 0; list-style: none; }
.gl-logos img { height: auto; max-height: 40px; width: auto; }