/* Naemn · naemn.app. One stylesheet for every page. Mobile first; Arabic (rtl) is the default. */

:root {
  --ink: #161412;
  --ink-2: #1d1a17;
  --ink-3: #26221e;
  --cream: #fbf5e4;
  --sand: #d9a15e;
  --copper: #7a4319;
  --copper-2: #6a3a15;
  --brick: #e2403a;

  --on-ink-muted: rgba(251, 245, 228, 0.68);
  --on-ink-rule: rgba(251, 245, 228, 0.14);
  --on-cream-muted: rgba(22, 20, 18, 0.68);
  --on-cream-rule: rgba(22, 20, 18, 0.16);
  --on-copper-muted: rgba(251, 245, 228, 0.8);
  --on-copper-rule: rgba(251, 245, 228, 0.24);

  --font: 'Outfit', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Outfit', 'Reem Kufi', 'Noto Sans Arabic', system-ui, sans-serif;
  --kufi: 'Reem Kufi', 'Noto Sans Arabic', system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1360px;
  --band-y: clamp(88px, 12vw, 176px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 17px/1.6 var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

:lang(ar) body,
body:lang(ar) {
  font-size: 17px;
  line-height: 1.75;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
  border-radius: 4px;
}

.band--cream :focus-visible,
.faq :focus-visible {
  outline-color: var(--copper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- Labels, rules, links ---------- */

.label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--on-ink-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.label .num {
  flex: none;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.label .num::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-inline-start: 12px;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.6;
}

:lang(en) .label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.band--cream .label {
  color: var(--on-cream-muted);
}

.band--copper .label {
  color: var(--on-copper-muted);
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

[dir='rtl'] .icon--flip {
  transform: scaleX(-1);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.link-arrow .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}

.link-arrow:hover .icon {
  transform: translateX(4px);
}

[dir='rtl'] .link-arrow:hover .icon {
  transform: scaleX(-1) translateX(4px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.btn--sand {
  background: var(--sand);
  color: var(--ink);
}

.btn--sand:hover {
  background: var(--cream);
}

.btn--cream {
  background: var(--cream);
  color: var(--ink);
}

.btn--cream:hover {
  background: var(--sand);
}

.btn--line {
  border-color: currentColor;
}

.btn--line:hover {
  background: var(--cream);
  color: var(--copper);
  border-color: var(--cream);
}

/* Store badges: the apps aren't in the stores yet, so these are labels, not links */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 148px;
  min-height: 52px;
  padding: 8px 18px;
  border: 1px solid var(--on-ink-rule);
  border-radius: 14px;
  line-height: 1.25;
}

.store small {
  color: var(--on-ink-muted);
  font-size: 12px;
}

.store b {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.band--copper .store {
  border-color: var(--on-copper-rule);
}

.band--copper .store small {
  color: var(--on-copper-muted);
}

/* ---------- Header ---------- */

.top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
}

.top__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}

.brand svg {
  width: 30px;
  height: auto;
  color: var(--sand);
}

.brand__word {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.top__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top__links {
  display: none;
}

.top__links a,
.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--on-ink-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.top__links a:hover,
.lang:hover {
  color: var(--cream);
}

.top__links .num {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.lang {
  border: 1px solid var(--on-ink-rule);
  border-radius: 999px;
  padding-inline: 16px;
  color: var(--cream);
}

.lang:hover {
  border-color: var(--sand);
}

@media (min-width: 1040px) {
  .top__links {
    display: flex;
    gap: 4px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.hero__scene {
  position: relative;
  min-height: max(520px, 64svh);
}

.hero__lamp {
  position: absolute;
  top: 0;
  left: 50%;
  width: 84px;
  translate: -50% 0;
  z-index: 4;
}

.hero__lamp svg {
  width: 100%;
  height: auto;
}

/* The light cone: a soft trapezoid under the shade. The wrapper blurs, the child clips. */
.hero__cone {
  position: absolute;
  top: 132px;
  left: 50%;
  width: min(1100px, 150vw);
  height: calc(100% - 60px);
  translate: -50% 0;
  filter: blur(22px);
  z-index: 2;
  pointer-events: none;
}

.hero__cone span {
  position: absolute;
  inset: 0;
  clip-path: polygon(47% 0, 53% 0, 74% 100%, 26% 100%);
  background: linear-gradient(
    to bottom,
    rgba(255, 227, 189, 0.34),
    rgba(255, 227, 189, 0.14) 38%,
    rgba(217, 161, 94, 0.06) 70%,
    rgba(217, 161, 94, 0)
  );
}

.hero__word {
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  margin: 0;
  font-family: var(--kufi);
  font-size: clamp(180px, 47vw, 820px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #211d19;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Same word on top, lit only inside the lamp's cone: the gradient fades with distance, the conic mask is the cone */
.hero__word--lit {
  color: transparent;
  background: radial-gradient(
    ellipse 34% 70% at 50% 24%,
    rgba(217, 161, 94, 0.3) 0%,
    rgba(217, 161, 94, 0.22) 28%,
    rgba(122, 67, 25, 0.2) 56%,
    rgba(122, 67, 25, 0.08) 78%,
    rgba(33, 29, 25, 0) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-mask-image: conic-gradient(from 180deg at 50% -6%, #000 0deg, #000 13deg, transparent 24deg, transparent 336deg, #000 347deg);
  mask-image: conic-gradient(from 180deg at 50% -6%, #000 0deg, #000 13deg, transparent 24deg, transparent 336deg, #000 347deg);
  z-index: 1;
}

/* The floor: the lower part of the word fades into the dark under the lamp */
.hero__scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22, 20, 18, 0) 58%, rgba(22, 20, 18, 0.92) 84%, var(--ink) 96%);
  z-index: 1;
  pointer-events: none;
}

.hero__pool {
  position: absolute;
  left: 50%;
  top: 80%;
  width: min(640px, 120vw);
  height: 110px;
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 227, 189, 0.16), rgba(255, 227, 189, 0) 70%);
  z-index: 2;
  pointer-events: none;
}

.hero__stage {
  position: absolute;
  left: 50%;
  top: 66%;
  width: clamp(260px, 28vw, 460px);
  aspect-ratio: 5 / 4;
  translate: -50% -50%;
  z-index: 3;
}

.hero__stage picture,
.hero__stage img,
.hero__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__stage canvas {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hero__stage.is-live canvas {
  opacity: 1;
}

.hero__stage.is-live picture {
  opacity: 0;
  transition: opacity 0.7s ease 0.1s;
}

.hero__grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 28px;
}

.hero__cell {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--on-ink-rule);
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero h1 .dots {
  color: var(--sand);
}

:lang(en) .hero h1 {
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.hero__lede {
  max-width: 34ch;
  color: var(--on-ink-muted);
}

.hero__cell .link-arrow {
  justify-self: start;
  color: var(--cream);
}

@media (min-width: 760px) {
  .hero__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }

  .hero__cell--title {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .hero__grid {
    grid-template-columns: 6fr 3.4fr 2.6fr 2.2fr;
    column-gap: 0;
    padding-bottom: 36px;
  }

  .hero__cell {
    padding: 28px 28px 0;
  }

  .hero__cell + .hero__cell {
    border-inline-start: 1px solid var(--on-ink-rule);
  }

  .hero__cell:first-child {
    padding-inline-start: 0;
  }

  .hero__cell--title {
    grid-column: auto;
  }
}

@media (max-width: 759px) {
  .hero__scene {
    min-height: max(440px, 58svh);
  }

  .hero__lamp {
    width: 64px;
  }

  .hero__cone {
    top: 102px;
  }

  .hero__word {
    top: 41%;
    font-size: 53vw;
  }

  .hero__stage {
    top: 68%;
    width: min(66vw, 300px);
  }

  .hero__pool {
    top: 82%;
    height: 70px;
  }
}

/* Load motion: the cone and the lit word fade in, the seat rises, the diamond drops in and settles (under 1.2 s) */
@media (prefers-reduced-motion: no-preference) {
  .hero__cone,
  .hero__word--lit,
  .hero__pool {
    animation: lamp-on 1.1s ease-out both;
  }

  .seat--base {
    animation: seat-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
  }

  .seat--diamond {
    animation: diamond-drop 0.72s cubic-bezier(0.33, 0, 0.2, 1) 0.42s both;
  }
}

@keyframes lamp-on {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes seat-rise {
  from {
    opacity: 0;
    transform: translateY(16%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes diamond-drop {
  0% {
    opacity: 0;
    transform: translateY(-34%);
  }
  35% {
    opacity: 1;
  }
  62% {
    transform: translateY(2.2%);
  }
  82% {
    transform: translateY(-0.8%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Bands ---------- */

.band {
  position: relative;
  padding-block: var(--band-y);
}

.band--ink {
  background: var(--ink);
  color: var(--cream);
}

.band--cream {
  background: var(--cream);
  color: var(--ink);
  color-scheme: light;
}

.band--copper {
  background: var(--copper);
  color: var(--cream);
}

.band__head {
  display: grid;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--on-ink-rule);
  margin-bottom: clamp(48px, 7vw, 104px);
}

.band--cream .band__head {
  border-color: var(--on-cream-rule);
}

.band--copper .band__head {
  border-color: var(--on-copper-rule);
}

.band__title {
  font-family: var(--display);
  font-size: clamp(40px, 6.4vw, 104px);
  font-weight: 700;
  line-height: 1.15;
  max-width: 14ch;
  text-wrap: balance;
}

:lang(en) .band__title {
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.band__intro {
  max-width: 46ch;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--on-ink-muted);
}

.band--cream .band__intro {
  color: var(--on-cream-muted);
}

.band--copper .band__intro {
  color: var(--on-copper-muted);
}

@media (min-width: 900px) {
  .band__head {
    grid-template-columns: 3fr 9fr;
    column-gap: 32px;
  }

  .band__head > .label {
    align-self: start;
    padding-top: 8px;
  }

  .band__head > .band__body {
    display: grid;
    gap: 28px;
  }
}

.band__body {
  display: grid;
  gap: 24px;
}

/* ---------- 01 Story ---------- */

.story__poster {
  display: grid;
  gap: clamp(8px, 2vw, 24px);
  margin-block: clamp(8px, 3vw, 40px) clamp(48px, 7vw, 96px);
}

.story__line {
  display: grid;
  gap: 6px;
}

.story__line q {
  justify-self: start;
  quotes: none;
  font-family: var(--kufi);
  font-size: clamp(64px, 13.5vw, 232px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.story__line--reply {
  justify-items: end;
  text-align: end;
}

.story__line--reply q {
  justify-self: end;
  color: var(--copper);
  font-size: clamp(40px, 8.4vw, 144px);
}

.story__who {
  color: var(--on-cream-muted);
  font-size: 14px;
}

.story__text {
  display: grid;
  gap: 18px;
  max-width: 52ch;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.7;
}

:lang(en) .story__text {
  line-height: 1.55;
}

@media (min-width: 900px) {
  .story__cols {
    display: grid;
    grid-template-columns: 3fr 9fr;
    column-gap: 32px;
  }

  .story__cols > * {
    grid-column: 2;
  }
}

/* ---------- 02 How it works ---------- */

.how {
  display: grid;
  gap: clamp(56px, 8vw, 96px);
}

.steps {
  counter-reset: step;
  border-bottom: 1px solid var(--on-ink-rule);
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  row-gap: 10px;
  padding-block: 28px;
  border-top: 1px solid var(--on-ink-rule);
}

.step__glyph {
  grid-row: span 2;
  width: 56px;
  height: auto;
  color: var(--sand);
  margin-top: 6px;
}

.step__glyph .ghost {
  opacity: 0.18;
}

.step h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.3;
}

:lang(en) .step h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.step h3 .num {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--on-ink-muted);
}

.step p {
  color: var(--on-ink-muted);
  max-width: 44ch;
}

.phones {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 12px 24px;
}

/* The pair is as wide as the front phone plus the step; the back phone hangs off its end edge */
.phones__pair {
  position: relative;
  padding-inline-end: 128px;
}

.phones .phone--front {
  --pw: 300px;
  position: relative;
  z-index: 1;
}

.phones .phone--back {
  --pw: 252px;
  position: absolute;
  top: 64px;
  inset-inline-end: 0;
}

@media (max-width: 520px) {
  .phones__pair {
    padding-inline-end: 88px;
  }

  .phones .phone--front {
    --pw: 236px;
  }

  .phones .phone--back {
    --pw: 196px;
    top: 48px;
  }
}

@media (min-width: 1000px) {
  .how {
    grid-template-columns: 6fr 5fr;
    column-gap: clamp(40px, 6vw, 112px);
    align-items: start;
  }

  .how .steps {
    order: 0;
  }
}

/* Big true numbers */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(64px, 9vw, 128px);
  border-top: 1px solid var(--on-ink-rule);
}

.stat {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-block: 28px 32px;
  border-bottom: 1px solid var(--on-ink-rule);
}

.stat dt {
  order: 2;
  max-width: 34ch;
  color: var(--on-ink-muted);
  font-size: 16px;
}

.stat dd {
  order: 1;
  font-family: var(--display);
  font-size: clamp(72px, 10vw, 152px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat dd small {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
  margin-inline-start: 0.12em;
}

.stat dd.stat__word--long {
  font-size: clamp(44px, 5vw, 80px);
  line-height: 1.2;
}

.stat dd.stat__word {
  font-family: var(--kufi);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

:lang(en) .stat dd.stat__word--long {
  font-size: clamp(44px, 5vw, 80px);
  line-height: 1.2;
}

.stat dd.stat__word {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.band--cream .stats,
.band--cream .stat {
  border-color: var(--on-cream-rule);
}

.band--cream .stat dt {
  color: var(--on-cream-muted);
}

.band--copper .stats,
.band--copper .stat {
  border-color: var(--on-copper-rule);
}

.band--copper .stat dt {
  color: var(--on-copper-muted);
}

@media (min-width: 760px) {
  .stats {
    grid-template-columns: repeat(var(--cols, 2), 1fr);
    border-bottom: 1px solid var(--on-ink-rule);
  }

  .band--cream .stats {
    border-bottom-color: var(--on-cream-rule);
  }

  .band--copper .stats {
    border-bottom-color: var(--on-copper-rule);
  }

  .stat {
    padding: 32px 32px 40px;
    border-bottom: 0;
  }

  .stat:first-child {
    padding-inline-start: 0;
  }

  .stat + .stat {
    border-inline-start: 1px solid var(--on-ink-rule);
  }

  .band--cream .stat + .stat {
    border-inline-start-color: var(--on-cream-rule);
  }

  .band--copper .stat + .stat {
    border-inline-start-color: var(--on-copper-rule);
  }
}

/* ---------- 03 Home visits ---------- */

.visits {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
}

.visits__phone {
  display: flex;
  justify-content: center;
}

.visits__phone .phone {
  --pw: 300px;
}

.points {
  border-bottom: 1px solid var(--on-cream-rule);
}

.points li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding-block: 22px;
  border-top: 1px solid var(--on-cream-rule);
  font-size: 18px;
}

.points .num {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--on-cream-muted);
  padding-top: 5px;
}

.points b {
  display: block;
  font-weight: 600;
}

.points p span {
  color: var(--on-cream-muted);
}

.visits .stats {
  margin-top: 40px;
}

@media (min-width: 1000px) {
  .visits {
    grid-template-columns: 5fr 6fr;
    column-gap: clamp(40px, 6vw, 112px);
    align-items: center;
  }
}

/* ---------- 04 Salons ---------- */

.sub {
  display: grid;
  gap: 24px;
  margin-top: clamp(80px, 11vw, 160px);
  padding-top: 22px;
  border-top: 1px solid var(--on-copper-rule);
}

.sub__title {
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 64px);
  font-weight: 700;
  line-height: 1.2;
  max-width: 18ch;
  text-wrap: balance;
}

:lang(en) .sub__title {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

@media (min-width: 900px) {
  .sub {
    grid-template-columns: 3fr 9fr;
    column-gap: 32px;
  }

  .sub > .label {
    padding-top: 10px;
  }

  .sub > :not(.label) {
    grid-column: 2;
  }
}

.tools {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--on-copper-rule);
}

.tool {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  padding-block: 22px 26px;
  border-bottom: 1px solid var(--on-copper-rule);
}

.tool .num {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--on-copper-muted);
  padding-top: 6px;
}

.tool h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.tool p {
  grid-column: 2;
  color: var(--on-copper-muted);
  font-size: 16px;
}

@media (min-width: 760px) {
  .tools {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
}

/* Pricing */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.plan {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px 24px 30px;
  border-radius: 22px;
  background: var(--ink);
  color: var(--cream);
}

.plan__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 30px;
  font-size: 18px;
  font-weight: 600;
}

.plan__tag {
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--on-ink-rule);
  border-radius: 999px;
  color: var(--on-ink-muted);
  font-size: 12px;
  font-weight: 500;
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--on-ink-rule);
}

.plan__price b {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(44px, 4.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sand);
}

.plan__price span {
  color: var(--on-ink-muted);
  font-size: 14px;
  white-space: nowrap;
}

.plan__list {
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.plan__list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: baseline;
}

.plan__list li::before {
  content: '';
  width: 7px;
  height: 7px;
  translate: 0 -2px;
  rotate: 45deg;
  background: var(--sand);
}

.plan__list li.is-off {
  color: var(--on-ink-muted);
}

.plan__list li.is-off::before {
  background: transparent;
  outline: 1px solid var(--on-ink-muted);
  outline-offset: -1px;
}

.plan__list strong {
  font-weight: 600;
  color: var(--cream);
}

@media (min-width: 700px) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .plans {
    grid-template-columns: repeat(4, 1fr);
  }
}

.notes {
  display: grid;
  gap: 10px;
  max-width: 70ch;
  color: var(--on-copper-muted);
  font-size: 15px;
}

.notes li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
}

.notes li::before {
  content: '—';
}

/* The window sticker */
.sticker-row {
  display: grid;
  gap: 40px;
  align-items: center;
}

.window {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-height: 560px;
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(251, 245, 228, 0.07) 0 18%, transparent 18% 34%, rgba(251, 245, 228, 0.05) 34% 40%, transparent 40%),
    var(--ink);
  overflow: hidden;
}

.window::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid var(--on-ink-rule);
  border-radius: 12px;
  pointer-events: none;
}

.sticker {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(62%, 280px);
  padding: 22px 20px 18px;
  border-radius: 18px;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  rotate: -3deg;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.sticker__mark {
  width: 40px;
  color: var(--ink);
}

.sticker__line {
  text-wrap: balance;
  font-family: var(--kufi);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.35;
}

.sticker__qr {
  position: relative;
  width: 68%;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
}

.sticker__qr svg {
  width: 100%;
  height: auto;
  color: var(--ink);
}

.sticker__qr .sticker__qr-mark {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18%;
  translate: -50% -50%;
  color: var(--copper);
}

.sticker__url {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sticker-row__text p {
  max-width: 44ch;
  color: var(--on-copper-muted);
  font-size: 18px;
}

.sticker-row__text h3 {
  margin-bottom: 14px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 900px) {
  .sticker-row {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

/* Join */
.join-steps {
  display: grid;
  border-top: 1px solid var(--on-copper-rule);
}

.join-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--on-copper-rule);
  font-size: 18px;
}

.join-steps .num {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--on-copper-muted);
  padding-top: 5px;
}

.join-steps small {
  display: block;
  margin-top: 4px;
  color: var(--on-copper-muted);
  font-size: 15px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 12px;
}

.cta .link-arrow {
  color: var(--cream);
}

/* ---------- 05 FAQ ---------- */

.faq__list {
  border-bottom: 1px solid var(--on-cream-rule);
}

.faq__item {
  border-top: 1px solid var(--on-cream-rule);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding-block: 26px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.35;
}

:lang(en) .faq__item summary {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary .num {
  flex: none;
  width: 40px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--on-cream-muted);
}

.faq__q {
  flex: 1;
}

.faq__toggle {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--on-cream-rule);
  border-radius: 50%;
  transition:
    background-color 0.3s ease,
    rotate 0.4s var(--ease);
}

.faq__toggle::before,
.faq__toggle::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 14px;
  height: 1.5px;
  translate: -50% -50%;
  background: currentColor;
}

.faq__toggle::after {
  rotate: 90deg;
  transition: opacity 0.3s ease;
}

.faq__item[open] .faq__toggle {
  rotate: 180deg;
  background: var(--ink);
  color: var(--cream);
}

.faq__item[open] .faq__toggle::after {
  opacity: 0;
}

.faq__item summary:hover .faq__toggle {
  border-color: var(--ink);
}

.faq__a {
  max-width: 62ch;
  padding: 0 0 30px;
  padding-inline-start: 64px;
  color: var(--on-cream-muted);
  font-size: 17px;
}

@media (max-width: 600px) {
  .faq__a {
    padding-inline-start: 0;
  }

  .faq__item summary .num {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 0.45s var(--ease),
      content-visibility 0.45s allow-discrete;
  }

  .faq__item[open]::details-content {
    block-size: auto;
  }

  .faq__item[open] .faq__a {
    animation: rise-in 0.45s var(--ease) both;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Footer ---------- */

.foot {
  padding-top: clamp(72px, 10vw, 140px);
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}

.foot__top {
  display: grid;
  gap: 32px;
  padding-bottom: 40px;
}

.foot__lead {
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.3;
}

:lang(en) .foot__lead {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.foot__cols h2 {
  margin-bottom: 10px;
  color: var(--on-ink-muted);
  font-size: 13px;
  font-weight: 500;
}

:lang(en) .foot__cols h2 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.foot__cols a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
}

.foot__cols a:hover {
  color: var(--sand);
}

@media (min-width: 900px) {
  .foot__top {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .foot__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.foot__mark {
  display: flex;
  align-items: flex-end;
  gap: 0.05em;
  padding-block: clamp(32px, 4vw, 56px) clamp(20px, 2.4vw, 36px);
  border-top: 1px solid var(--on-ink-rule);
  direction: ltr;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(96px, 24.5vw, 400px);
  line-height: 0.8;
}

.foot__word {
  font-weight: 600;
  letter-spacing: -0.045em;
}

.foot__seat {
  width: 0.2em;
  flex: none;
  color: var(--sand);
  margin-bottom: 0.03em;
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px 28px;
  border-top: 1px solid var(--on-ink-rule);
  color: var(--on-ink-muted);
  font-size: 14px;
}

/* ---------- Reveal on scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.8s ease,
      transform 0.8s var(--ease);
  }

  .js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Phone frames (drawn from the customer app's Home and booking screens) ---------- */

.phone {
  --pw: 280px;
  --u-ink: #0d0d10;
  --u-2: #17171b;
  --u-3: #232329;
  --u-line: #2c2c33;
  --u-text: #f5f5f7;
  --u-muted: #92929e;
  position: relative;
  flex: none;
  width: var(--pw);
  aspect-ratio: 393 / 852;
  padding: 0.5em;
  border-radius: 3.3em;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(251, 245, 228, 0.16),
    0 2.5em 5em -1.5em rgba(0, 0, 0, 0.55);
  font-size: calc(var(--pw) / 393 * 16);
  line-height: 1.3;
  direction: inherit;
}

.band--cream .phone {
  box-shadow:
    0 0 0 1px rgba(22, 20, 18, 0.2),
    0 3em 6em -2em rgba(22, 20, 18, 0.45);
}

.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.85em;
  background: var(--u-ink);
  color: var(--u-text);
}

.phone__island {
  position: absolute;
  top: 0.65em;
  left: 50%;
  width: 6.4em;
  height: 1.85em;
  translate: -50% 0;
  border-radius: 1em;
  background: #000;
  z-index: 5;
}

.ui-map {
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
}

.ui-map svg {
  width: 100%;
  height: 100%;
}

.ui-top {
  position: absolute;
  top: 3.4em;
  inset-inline: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}

.ui-circle {
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: var(--u-ink);
  color: var(--sand);
}

.ui-circle svg {
  width: 1.3em;
  height: auto;
}

.ui-circle--bell {
  position: relative;
  color: var(--u-text);
}

.ui-circle--bell::after {
  content: '';
  position: absolute;
  top: 0.62em;
  inset-inline-end: 0.66em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--brick);
}

.ui-seg {
  display: flex;
  gap: 0.2em;
  padding: 0.25em;
  border-radius: 2em;
  background: var(--u-ink);
  font-size: 0.82em;
}

.ui-seg span {
  padding: 0.5em 0.95em;
  border-radius: 2em;
  color: var(--u-muted);
  white-space: nowrap;
}

.ui-seg .is-on {
  background: var(--u-text);
  color: #0d0d10;
  font-weight: 600;
}

.ui-loc {
  position: absolute;
  top: 40%;
  inset-inline: 1em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em;
  border-radius: 2em;
  background: rgba(13, 13, 16, 0.94);
  z-index: 3;
}

.ui-loc__pin {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--u-3);
}

.ui-loc__pin i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  border: 0.18em solid var(--u-text);
}

[dir='rtl'] .ui-loc__pin i {
  rotate: -45deg;
}

.ui-loc__text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.ui-loc__text small {
  color: var(--u-muted);
  font-size: 0.72em;
}

.ui-loc__text b {
  font-size: 0.86em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-loc__go {
  flex: none;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--u-text);
  box-shadow: inset 0 0 0 0.7em var(--u-text), inset 0 0 0 0.85em #0d0d10;
}

.ui-sheet {
  position: absolute;
  inset: 50% 0 0;
  padding: 0.8em 1em 0;
  border-radius: 1.6em 1.6em 0 0;
  background: var(--u-ink);
  box-shadow: 0 -0.5em 1.5em rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.ui-handle {
  width: 3em;
  height: 0.25em;
  margin: 0 auto 0.9em;
  border-radius: 1em;
  background: var(--u-3);
}

.ui-search {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.9em;
  padding-inline: 1em;
  border-radius: 2em;
  background: var(--u-2);
  color: var(--u-muted);
  font-size: 0.9em;
}

.ui-search i {
  width: 0.95em;
  height: 0.95em;
  border: 0.14em solid currentColor;
  border-radius: 50%;
}

.ui-chips {
  display: flex;
  gap: 0.45em;
  margin-block: 0.7em;
  overflow: hidden;
  font-size: 0.78em;
}

.ui-chips span {
  flex: none;
  padding: 0.55em 0.95em;
  border: 1px solid var(--u-line);
  border-radius: 2em;
  color: var(--u-text);
  white-space: nowrap;
}

.ui-chips .is-on {
  border-color: var(--sand);
  color: var(--sand);
}

.ui-card {
  display: grid;
  gap: 0.75em;
  padding: 0.8em;
  border: 1px solid var(--u-line);
  border-radius: 1.2em;
}

.ui-card__row {
  display: flex;
  gap: 0.75em;
}

.ui-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.6em;
  height: 4.6em;
  border-radius: 0.8em;
  background: var(--copper);
  color: var(--cream);
}

.ui-thumb svg {
  width: 2.3em;
  height: auto;
}

.ui-thumb--avatar {
  border-radius: 50%;
  background: var(--u-3);
  color: var(--sand);
  font-weight: 600;
  font-size: 1em;
}

.ui-card__info {
  display: grid;
  align-content: start;
  gap: 0.3em;
  min-width: 0;
}

.ui-card__name {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 600;
  font-size: 0.98em;
}

.ui-check {
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--sand);
}

.ui-check::after {
  content: '';
  width: 0.42em;
  height: 0.24em;
  margin-top: -0.1em;
  border-left: 0.12em solid #0d0d10;
  border-bottom: 0.12em solid #0d0d10;
  rotate: -45deg;
}

.ui-card__meta {
  color: var(--u-muted);
  font-size: 0.76em;
  white-space: nowrap;
}

.ui-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border-radius: 2em;
  background: rgba(52, 161, 95, 0.2);
  color: #7ddba0;
  font-size: 0.72em;
}

.ui-pill::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #4fc17b;
}

.ui-btn {
  display: grid;
  place-items: center;
  height: 2.9em;
  border-radius: 2em;
  background: var(--u-2);
  font-weight: 600;
  font-size: 0.92em;
}

.ui-tabs {
  position: absolute;
  bottom: 1.2em;
  left: 50%;
  display: flex;
  gap: 0.4em;
  padding: 0.35em;
  translate: -50% 0;
  border-radius: 2em;
  background: rgba(13, 13, 16, 0.92);
  box-shadow: 0 0 0 1px var(--u-line);
  z-index: 4;
}

.ui-tabs span {
  width: 2.7em;
  height: 2.7em;
  border-radius: 50%;
  background: var(--u-2);
}

.ui-tabs .is-on {
  background: radial-gradient(circle, #2a2620 55%, var(--sand) 57% 63%, #2a2620 65%);
}

/* Booking screen */
.ui-book {
  position: absolute;
  inset: 0;
  padding: 3.6em 1.1em 0;
  background: var(--u-ink);
}

.ui-book__title {
  text-align: center;
  font-weight: 600;
  font-size: 1em;
  margin-bottom: 1.2em;
}

.ui-book__h {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
}

.ui-book__sub {
  margin: 0.2em 0 0.9em;
  color: var(--u-muted);
  font-size: 0.76em;
}

.ui-box {
  padding: 0.8em;
  border: 1px solid var(--u-line);
  border-radius: 1.2em;
  margin-bottom: 0.8em;
}

.ui-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7em;
  font-size: 0.86em;
  font-weight: 600;
}

.ui-month i {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--u-2);
}

.ui-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3em;
  text-align: center;
  font-size: 0.7em;
}

.ui-days span {
  color: var(--u-muted);
}

.ui-days b {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--u-line);
  border-radius: 50%;
  font-weight: 500;
}

.ui-days b.is-off {
  color: #55555f;
  border-style: dashed;
}

.ui-days b.is-on {
  background: var(--u-text);
  color: #0d0d10;
  font-weight: 700;
}

.ui-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45em;
  font-size: 0.78em;
}

.ui-slots span {
  display: grid;
  place-items: center;
  height: 2.9em;
  border: 1px solid var(--u-line);
  border-radius: 0.8em;
  white-space: nowrap;
}

.ui-slots .is-off {
  color: #55555f;
  border-style: dashed;
}

.ui-slots .is-on {
  background: var(--u-text);
  color: #0d0d10;
  font-weight: 600;
}

.ui-actions {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.6em;
  padding: 1em 1.1em 1.8em;
  border-top: 1px solid var(--u-line);
  background: var(--u-ink);
  font-size: 0.9em;
  font-weight: 600;
}

.ui-actions span {
  display: grid;
  place-items: center;
  height: 3em;
  border-radius: 2em;
  background: var(--u-2);
  white-space: nowrap;
}

.ui-actions .is-main {
  background: var(--u-text);
  color: #0d0d10;
}

/* ---------- Small pages: share and invite links, legal placeholders, 404 ---------- */

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

.page .top {
  position: static;
}

.page__main {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 22px;
  padding-block: 48px 72px;
}

.page__seat {
  width: 88px;
  color: var(--sand);
  margin-bottom: 8px;
}

.page__title {
  max-width: 18ch;
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.2;
}

:lang(en) .page__title,
.page__title:lang(en) {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.page__en {
  color: var(--on-ink-muted);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
}

.page__text {
  max-width: 52ch;
  color: var(--on-ink-muted);
}

.page__rule {
  width: 100%;
  max-width: 640px;
  height: 1px;
  margin-block: 8px;
  border: 0;
  background: var(--on-ink-rule);
}

.page__steps {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  counter-reset: s;
}

.page__steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--on-ink-rule);
}

.page__steps li::before {
  counter-increment: s;
  content: '0' counter(s);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--on-ink-muted);
  padding-top: 4px;
}

.en-line {
  display: block;
  unicode-bidi: isolate;
}

[dir='rtl'] .en-line {
  text-align: right;
}

.page__text .en-line {
  margin-top: 4px;
}

.page__steps .en-line {
  color: var(--on-ink-muted);
  font-size: 15px;
}

.btn .sep {
  opacity: 0.5;
}

.page .foot__bottom {
  border-top: 1px solid var(--on-ink-rule);
}