/* Daau invite-link site: one stylesheet for the landing pages (d8), the home page and the policy
   pages. Sizes are the mockups' points (390 wide); the column centres on wider screens. */

@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
/* Only for रू: the browser fetches it when a page has Devanagari on it. */
@font-face { font-family: "Mukta"; src: url("/assets/fonts/mukta-600.ttf") format("truetype"); font-weight: 600; font-display: swap; unicode-range: U+0900-097F; }

:root {
  color-scheme: dark;
  --cream: #FFF6EC;
  --bright: #FFF8F0;
  --muted: rgba(255, 246, 236, 0.66);
  --faint: rgba(255, 246, 236, 0.45);
  --peach: rgba(255, 214, 178, 0.9);
  --saffron: #FFB347;
  --saffron-light: #FFC567;
  --ink: #2A1405;
  --night: #120D22;
  --glass: rgba(255, 246, 236, 0.07);
  --rim: inset 0 0 0 1px rgba(255, 236, 214, 0.16), inset 0 1px 0 rgba(255, 244, 228, 0.22);
}

* { box-sizing: border-box; }

html { background: var(--night); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Sora", "Mukta", system-ui, sans-serif;
  font-weight: 500;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The home screen's backdrop: light spilling from three windows over plum lacquer. */
  background:
    radial-gradient(max(235px, 32vw) 150px at 50% 54px, rgba(255, 170, 96, 0.22), rgba(255, 170, 96, 0)),
    radial-gradient(max(255px, 40vw) 100px at 50% 264px, rgba(232, 96, 140, 0.16), rgba(232, 96, 140, 0)),
    radial-gradient(max(255px, 40vw) 100px at 50% 394px, rgba(96, 136, 240, 0.16), rgba(96, 136, 240, 0)),
    linear-gradient(180deg, #1A1236 0px, #150E2C 380px, #0F0A20 760px, #0F0A20 100%);
  background-color: #0F0A20;
  background-repeat: no-repeat;
}

a { color: inherit; }

.rs { font-family: "Mukta", sans-serif; font-weight: 600; font-size: 0.95em; opacity: 0.8; margin-right: 0.05em; }

/* ----------------------------------------------------------------------------- the column */

.column {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 16px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* The brand: the app icon, Daau and the line under it. */
.brand { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.brand img { width: 64px; height: 64px; display: block; filter: drop-shadow(0 10px 18px rgba(6, 3, 16, 0.55)); }
.brand .name {
  margin: 8px 0 0;
  font: 700 34px/40px "Fraunces", Georgia, serif;
  letter-spacing: -0.01em;
  color: #FFFAF2;
  text-shadow: 0 1px 4px rgba(10, 6, 24, 0.6);
}
.brand p { margin: 0; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------------------ the invite card */

.invite {
  position: relative;
  margin-top: 26px;
  padding: 16px 8px 22px;
  border-radius: 22px;
  background: var(--glass);
  box-shadow: var(--rim), 0 14px 24px -14px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.face {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #1E1636, 0 0 0 5px var(--saffron), 0 0 18px 4px rgba(255, 179, 71, 0.4);
}
.face img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.face.crest { box-shadow: none; filter: drop-shadow(0 12px 16px rgba(8, 5, 20, 0.6)); }
.face.crest svg { display: block; width: 88px; height: 97px; margin-top: -6px; }
.face.icon { box-shadow: none; }
.face.icon img { border-radius: 23%; filter: drop-shadow(0 10px 18px rgba(6, 3, 16, 0.55)); }
.face.empty { box-shadow: none; border: 2px dashed rgba(255, 236, 214, 0.38); background: rgba(255, 246, 236, 0.04); }

.invite .heading {
  margin: 10px 0 0;
  font: 700 20px/26px "Fraunces", Georgia, serif;
  color: var(--bright);
  text-wrap: pretty;
}
.invite .line {
  margin: 4px 6px 0;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--muted);
  text-wrap: balance;
}

/* The code to type after installing: big enough to read across a table. */
.code {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--saffron-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.code .label { font-weight: 800; font-size: 11px; line-height: 14px; letter-spacing: 0.14em; color: var(--peach); }
.code .value {
  margin-top: 6px;
  padding: 8px 18px 8px 22px;
  border-radius: 14px;
  background: rgba(22, 15, 48, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 103, 0.35), inset 0 1px 0 rgba(255, 236, 214, 0.12);
  font-weight: 800;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.code.handle .value { letter-spacing: 0.02em; font-size: 22px; padding: 8px 20px; }
.code .tip { margin-top: 6px; font-weight: 600; font-size: 11px; line-height: 14px; color: var(--faint); transition: color 0.2s; }
.code.copied .tip { color: #6FE3B4; }

/* ------------------------------------------------------------------------------- buttons */

.primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-top: 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, #FFDA8E 0%, #FFB347 50%, #F0921E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 232, 0.8), inset 0 -2px 0 rgba(140, 70, 0, 0.2), 0 4px 0 #A65A0C,
    0 10px 18px -8px rgba(255, 170, 70, 0.7);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.primary:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 250, 232, 0.8), inset 0 -2px 0 rgba(140, 70, 0, 0.2), 0 1px 0 #A65A0C; }

.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.store {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 10px 0 16px;
  border-radius: 14px;
  background: #000;
  box-shadow: inset 0 0 0 1px #6A6A70;
  color: #FFF;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.store svg { flex: none; width: 26px; height: 26px; }
.store span { display: flex; flex-direction: column; min-width: 0; }
.store small { font-weight: 500; font-size: 10.5px; line-height: 13px; }
.store b { font-weight: 700; font-size: 17px; line-height: 22px; letter-spacing: -0.01em; }
.store.soon { opacity: 0.55; cursor: default; }

.hint { margin: 20px 8px 0; font-weight: 500; font-size: 12px; line-height: 15px; color: var(--faint); text-align: center; }
.hint.nudge { color: var(--peach); }

/* ------------------------------------------------------------------------------ home page */

.hero { margin-top: 26px; border-radius: 22px; background: var(--glass); box-shadow: var(--rim), 0 14px 24px -14px rgba(0, 0, 0, 0.8); overflow: hidden; text-align: center; }
.hero img { display: block; width: 100%; height: auto; aspect-ratio: 358 / 214; }
.hero h2 { margin: 14px 16px 0; font: 700 20px/26px "Fraunces", Georgia, serif; color: var(--bright); }
.hero p { margin: 6px 18px 20px; font-size: 12.5px; line-height: 19px; color: var(--muted); text-wrap: balance; }

/* --------------------------------------------------------------------------------- footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 12px;
}
.footer a { color: var(--faint); text-decoration: none; }
.footer a:hover { color: var(--muted); }

/* ------------------------------------------------------------------------- policy pages */

.doc .column { max-width: 680px; padding-top: 20px; }
.doc .top { display: flex; align-items: center; gap: 10px; text-decoration: none; align-self: flex-start; }
.doc .top img { width: 36px; height: 36px; }
.doc .top span { font: 700 22px/1 "Fraunces", Georgia, serif; color: #FFFAF2; }
.doc article {
  margin-top: 20px;
  padding: 26px 22px 30px;
  border-radius: 22px;
  background: rgba(22, 15, 48, 0.55);
  box-shadow: var(--rim), 0 14px 24px -14px rgba(0, 0, 0, 0.8);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 246, 236, 0.84);
}
.doc h1 { margin: 0; font: 700 30px/1.15 "Fraunces", Georgia, serif; color: var(--bright); letter-spacing: -0.01em; }
.doc .meta { margin: 8px 0 0; font-size: 12.5px; color: var(--faint); }
.doc h2 { margin: 30px 0 6px; font: 700 19px/1.3 "Fraunces", Georgia, serif; color: var(--bright); }
.doc h3 { margin: 20px 0 4px; font-weight: 800; font-size: 14.5px; color: var(--cream); }
.doc p, .doc ul { margin: 8px 0 0; }
.doc ul { padding-left: 20px; }
.doc li { margin-top: 4px; }
.doc li::marker { color: var(--saffron); }
.doc strong { color: var(--cream); font-weight: 700; }
.doc article a { color: var(--saffron-light); }
.doc .lede { font-size: 15.5px; color: var(--cream); }
.doc table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.doc th, .doc td { padding: 8px 8px 8px 0; border-top: 1px solid rgba(255, 236, 214, 0.12); text-align: left; vertical-align: top; }
.doc th { color: var(--peach); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

.doc .rules { list-style: none; padding: 0; margin: 18px 0 0; }
.rules li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin-top: 16px; }
.rules .well {
  width: 40px; height: 40px; margin: 2px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(255, 197, 103, 0.3), rgba(255, 179, 71, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 197, 103, 0.35);
}
.rules .well svg { width: 22px; height: 22px; stroke: var(--saffron-light); }
.rules b { display: block; font-weight: 800; font-size: 15px; color: var(--bright); }
.rules span { display: block; margin-top: 2px; }

/* A value the owner still has to give (design/SETUP-social.md §9): only local previews show these. */
.todo { padding: 0 4px; border-radius: 4px; background: rgba(255, 106, 128, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 106, 128, 0.6); color: #FFD0D8; }

@media (min-width: 720px) {
  .column { padding-top: 56px; }
  .doc article { padding: 36px 40px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary, .code .tip { transition: none; }
}