/* ─────────────────────────────────────────────────────────────────────────
   Otra — the public pages
   The landing page, the shop chooser, and the privacy policy.

   The landing page has two audiences and about four seconds to serve both: a
   customer who wants their shop's booking page, and a barber deciding whether
   this is worth ten minutes. Everything here is arranged so neither has to
   read the other's half.
   ───────────────────────────────────────────────────────────────────────── */

.public-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
/* The logo (.brand-mark, .brand-dots, .brand-word) now lives in main.css, so
   every page can use it — partials/brand_mark.html. */
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  text-align: center;
}
.hero-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--purple-text);
  margin-bottom: var(--sp-4);
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 16ch;
  margin: 0 auto var(--sp-4);
}
.hero h1 em { font-style: normal; color: var(--purple-text); }

/* Headline and orb side by side, the pair centred as one unit. The headline
   reads left-aligned beside the orb; on a phone the orb sits above it. */
.hero-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-7, 2.5rem);
  margin-bottom: var(--sp-4);
}
.hero-head h1 { margin: 0; text-align: left; }
.hero-orb { flex: none; width: 170px; height: 170px; }
@media (max-width: 720px) {
  .hero-head { flex-direction: column-reverse; gap: var(--sp-3); }
  .hero-head h1 { text-align: center; }
  .hero-orb { width: 120px; height: 120px; }
}
.hero-sub {
  max-width: 48ch;
  margin: 0 auto var(--sp-6);
  font-size: var(--fs-md);
  line-height: 1.7;
}

/* ── The two doors ───────────────────────────────────────────────────────────
   One for customers, one for shops. Side by side and equally weighted, so
   nobody has to work out which half of the page is theirs. */
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 720px) { .doors { grid-template-columns: 1fr; } }

.door {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.door.for-shops { border-color: color-mix(in srgb, var(--act) 40%, var(--line)); }
.door h2 {
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.door p { font-size: var(--fs-sm); margin: 0; }
.door .spacer { flex: 1; }

.shop-search { display: flex; gap: var(--sp-2); }
.shop-search input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-min);
  padding: .7rem 1rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
}
.shop-search input:focus { outline: none; border-color: var(--act-hot); }
.shop-search input::placeholder { color: var(--ink-faint); }
.search-hint { font-size: var(--fs-xs); color: var(--ink-faint); }

/* ── Features ────────────────────────────────────────────────────────────── */
.features {
  display: grid;
  /* 180px, not 210: at the 880px container four cards fit exactly, and a
     wider minimum drops the fourth onto a row of its own. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  max-width: 880px;
  margin: var(--sp-8) auto 0;
  padding: 0 var(--sp-5);
  text-align: left;
}
.feature {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.feature-icon { font-size: 1.4rem; margin-bottom: var(--sp-2); }
.feature h3 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: .3rem;
}
.feature p { font-size: var(--fs-sm); line-height: 1.6; }

.proof {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.public-footer {
  margin-top: auto;
  padding: var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.public-footer a { color: var(--ink-faint); }
.public-footer a:hover { color: var(--orange-text); }

/* ── Shop chooser ────────────────────────────────────────────────────────── */
.choose-page { max-width: 620px; margin: 0 auto; padding: var(--sp-7) var(--sp-4) var(--sp-8); }
.choose-head { text-align: center; margin-bottom: var(--sp-5); }
.choose-head h1 { font-size: var(--fs-xl); margin-bottom: .4rem; }
.choose-head p { font-size: var(--fs-sm); }
.choose-head .q { color: var(--purple-text); font-weight: 600; }

.shop-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.shop-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--act);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.shop-card:hover { background: var(--raised); border-left-color: var(--act-hot); }
.shop-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--act-wash);
  border: 1px solid var(--act);
  font-size: 1.2rem;
}
.shop-info { flex: 1; min-width: 0; }
.shop-info .name { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.shop-info .addr {
  margin-top: .2rem;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-go { flex-shrink: 0; color: var(--purple-text); font-size: 1.1rem; }

.back-link-centred {
  display: block;
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}
.back-link-centred:hover { color: var(--orange-text); }

/* ── Legal pages ─────────────────────────────────────────────────────────── */
.legal-page { max-width: 68ch; margin: 0 auto; padding: var(--sp-7) var(--sp-4) var(--sp-8); }
.legal-page h1 { font-size: var(--fs-2xl); margin-bottom: .4rem; }
.legal-updated { margin-bottom: var(--sp-6); font-size: var(--fs-sm); color: var(--ink-faint); }
.legal-page h2 {
  font-size: var(--fs-lg);
  color: var(--purple-text);
  margin: var(--sp-6) 0 var(--sp-2);
}
.legal-page p, .legal-page li { font-size: var(--fs-base); line-height: 1.8; color: var(--ink-muted); }
.legal-page ul { padding-left: 1.2rem; margin: var(--sp-2) 0 var(--sp-4); }
.legal-page li { margin-bottom: .35rem; }
/* Tables in the Terms (prices, grace periods). Scroll sideways on a phone
   rather than squeezing the columns unreadable. */
.legal-table {
  display: block; overflow-x: auto; width: 100%;
  border-collapse: collapse; margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top;
  padding: .45rem .7rem; border-bottom: 1px solid var(--line);
}
.legal-table thead th { color: var(--ink); font-weight: 600; }
.legal-back { display: inline-block; margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-faint); }
.legal-back:hover { color: var(--orange-text); }

@media (max-width: 600px) {
  .public-nav { padding: var(--sp-3) var(--sp-4); }
  .hero { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .features { margin-top: var(--sp-6); }
}