/* ==========================================================================
   Taqleedi (تقليدي) landing page
   Arabic-first. Every horizontal rule uses logical properties
   (inline-start / inline-end), so the layout mirrors itself when the
   document direction switches between rtl and ltr.
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */

:root {
  /* Brand */
  --plum: #7d5ea7;
  --orchid: #c26bae;
  --plum-deep: #6a4c96;      /* deeper pair used behind white text */
  --orchid-deep: #a84e92;
  --grad-brand: linear-gradient(135deg, var(--plum), var(--orchid));
  --grad-action: linear-gradient(135deg, var(--plum-deep), var(--orchid-deep));

  /* Surfaces */
  --white: #ffffff;
  --porcelain: #fbf8f5;      /* warm neutral */
  --paper: #fdf6f4;          /* base colour of the watermark image */
  --lavender: #f3eefa;
  --blush: #fcf0f6;
  --line: #e4daf0;
  --line-pink: #f1d9e8;

  /* Text */
  --ink: #2b1f3d;
  --ink-soft: #5a4e6e;

  /* Type */
  --font-display: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --leading: 1.9;
  --leading-tight: 1.35;
  --tracking-display: 0;

  /* Shape */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 30px;
  --shadow-soft: 0 20px 44px -28px rgba(77, 52, 115, 0.38);
  --shadow-lift: 0 34px 70px -34px rgba(77, 52, 115, 0.5);

  --gutter: 20px;
  --header-height: 68px;
}

/* Tajawal draws small for its point size, so Arabic runs slightly larger */
html[lang="ar"] {
  font-size: 106.25%;
}

html[lang="en"] {
  --font-display: "League Spartan", "Readex Pro", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Readex Pro", "Segoe UI", Helvetica, Arial, sans-serif;
  --leading: 1.7;
  --leading-tight: 1.12;
  --tracking-display: -0.015em;
}

/* 2. Base ----------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* Watermark: one fixed layer behind the whole site. The section backgrounds
   further down are translucent so it shows through everywhere. */
html {
  background-color: var(--paper);
}

body::before {
  content: "";
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background: var(--paper) url("images/watermark.webp") center / cover no-repeat;
  pointer-events: none;
}

html.i18n-pending body {
  visibility: hidden;
}

body {
  margin: 0;
  /* isolate + an explicit background keep the watermark layer (body::before)
     visible even when a host page gives <body> its own background */
  isolation: isolate;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h3 {
  font-size: 1.25rem;
}

p {
  color: var(--ink-soft);
}

a {
  color: inherit;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(100% - (var(--gutter) * 2), 1120px);
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - (var(--gutter) * 2), 780px);
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 16px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-s);
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: 12px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3. Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 30px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn--primary {
  background: var(--grad-action);
  color: var(--white);
  box-shadow: 0 14px 28px -14px rgba(125, 94, 167, 0.75);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -14px rgba(125, 94, 167, 0.85);
}

.btn--ghost {
  border-color: var(--line);
  background: var(--white);
  color: var(--plum-deep);
}

.btn--ghost:hover {
  border-color: var(--plum);
  background: var(--lavender);
}

.btn--light {
  background: var(--white);
  color: var(--plum-deep);
  box-shadow: 0 18px 36px -18px rgba(43, 31, 61, 0.6);
}

.btn--light:hover {
  transform: translateY(-2px);
}

.btn--small {
  min-height: 44px;
  padding: 8px 22px;
  font-size: 0.95rem;
}

/* 4. Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(251, 248, 245, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  border-block-end-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(77, 52, 115, 0.5);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--header-height);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: auto;
  text-decoration: none;
}

.logo__mark {
  display: block;
  width: 38px;
  height: 38px;
  flex: none;
}

.logo__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

html[lang="en"] .logo__name {
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-block-start: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* The waitlist button exists twice: .site-header__cta sits in the header on
   larger screens, .site-nav__cta sits inside the phone menu. Only one shows. */
.site-header__cta {
  flex: none;
  white-space: nowrap;
}

.site-nav__cta {
  display: none;
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav__list a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav__list a:hover {
  background: var(--lavender);
  color: var(--ink);
}

/* the tab of the section currently on screen */
.site-nav__list a[aria-current] {
  background: var(--lavender);
  color: var(--plum-deep);
}

.lang-toggle {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.lang-toggle button {
  min-height: 36px;
  padding: 4px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* each label stays in its own language's typeface */
.lang-toggle button[lang="ar"] {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

.lang-toggle button[lang="en"] {
  font-family: "Readex Pro", "Segoe UI", Helvetica, Arial, sans-serif;
}

.lang-toggle button:hover {
  color: var(--ink);
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--grad-action);
  color: var(--white);
}

.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav-toggle__bars::before {
  inset-block-start: -6px;
}

.nav-toggle__bars::after {
  inset-block-start: 6px;
}

.site-header.is-open .nav-toggle__bars {
  background: transparent;
}

.site-header.is-open .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Tablets and small laptops: the tabs get their own row under the logo */
@media (min-width: 660px) and (max-width: 1199px) {
  :root {
    --header-height: 126px;
  }

  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
    min-height: 0;
    padding-block-start: 10px;
  }

  .site-nav {
    order: 5;
    flex-basis: 100%;
    margin-block-start: 10px;
    border-block-start: 1px solid var(--line);
  }

  .site-nav__list {
    margin-inline: -10px;
    padding-block: 6px;
  }

  .site-nav__list a {
    padding-inline: 10px;
  }
}

/* Wide enough for one row, but only just: tighten the spacing */
@media (min-width: 1200px) and (max-width: 1339px) {
  .site-nav {
    gap: 14px;
  }

  .site-nav__list {
    gap: 0;
  }

  .site-nav__list a {
    padding-inline: 10px;
  }
}

/* Phones: the tabs fold into the menu button */
@media (max-width: 659px) {
  .nav-toggle {
    display: block;
  }

  .site-header__cta {
    display: none;
  }

  .site-nav__cta {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px var(--gutter) 24px;
    background: var(--porcelain);
    border-block-end: 1px solid var(--line);
    box-shadow: 0 30px 40px -30px rgba(77, 52, 115, 0.5);
  }

  .js .site-nav {
    display: none;
  }

  .js .site-header.is-open .site-nav {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .site-nav__list a {
    padding: 12px 14px;
    border-radius: var(--radius-s);
    font-size: 1.05rem;
  }

  /* without JavaScript the menu is simply part of the page */
  html:not(.js) .site-header {
    position: static;
  }

  html:not(.js) .site-nav {
    position: static;
    flex-basis: 100%;
    box-shadow: none;
  }

  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
  }

  html:not(.js) .nav-toggle {
    display: none;
  }
}

@media (max-width: 430px) {
  .site-header__inner {
    gap: 8px;
  }

  .logo {
    gap: 8px;
    min-width: 0;
  }

  .logo__mark {
    width: 34px;
    height: 34px;
  }

  .logo__name {
    font-size: 1.35rem;
  }

  html[lang="en"] .logo__name {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
  }

  .lang-toggle button {
    padding-inline: 9px;
    font-size: 0.8rem;
  }
}

/* very narrow phones: the mark alone carries the brand in the header */
@media (max-width: 345px) {
  html[lang="en"] .site-header .logo__name {
    display: none;
  }
}

/* 5. Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 112px);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero__copy > * + * {
  margin-block-start: 16px;
}

/* Headline in three steps: two short lines set very large, the longer
   closing clause at about half that size, then a tag for "not a dating app". */
.hero__title {
  color: var(--ink);
}

.hero__title span {
  display: block;
}

.hero__title-big {
  font-size: clamp(2rem, 9.4vw, 4.7rem);
  font-weight: 800;
  line-height: 1.3;
}

html[lang="en"] .hero__title-big {
  font-size: clamp(2.1rem, 9.2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
}

/* beside the phone (two columns) the headline sizes to its narrower column */
@media (min-width: 940px) {
  .hero__title-big {
    font-size: clamp(3rem, 5.6vw, 4.7rem);
  }

  html[lang="en"] .hero__title-big {
    font-size: clamp(2.8rem, 5.6vw, 4.4rem);
  }
}

.hero__title-accent {
  color: var(--plum-deep);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title-accent {
    width: fit-content;
    /* the padding keeps descenders inside the painted gradient */
    padding-block: 0.14em;
    margin-block: -0.14em;
    background: var(--grad-action);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero__title-rest {
  max-width: 24ch;
  margin-block-start: 0.5em;
  font-size: clamp(1.35rem, 3.6vw, 2.05rem);
  font-weight: 500;
  line-height: 1.55;
}

html[lang="en"] .hero__title-rest {
  max-width: 26ch;
  line-height: 1.2;
}

/* A plain statement with an icon: deliberately not shaped like a button */
.hero__copy > .hero__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 20px;
  color: var(--plum-deep);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
}

.hero__tag .icon {
  width: 1.2em;
  height: 1.2em;
  color: var(--orchid-deep);
  stroke-width: 2;
}

.hero__copy > .hero__lead {
  margin-block-start: 22px;
  font-size: clamp(1.15rem, 2.1vw, 1.3rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
}

html[lang="en"] .hero__lead {
  line-height: 1.5;
}

.hero__copy > p {
  max-width: 34rem;
}

.hero__slogan {
  font-weight: 600;
  color: var(--plum-deep);
}

.hero__copy > .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}

.hero__copy > .trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-block-start: 28px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trust-list .icon {
  color: var(--orchid-deep);
}

/* App screenshot in a simple phone frame */
.hero__visual {
  position: relative;
  width: min(100%, 340px);
  margin-block-start: 12px;
  margin-inline: auto;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: 24px -14px;
  border-radius: 48px;
  background: var(--grad-brand);
  opacity: 0.22;
  transform: rotate(5deg);
}

[dir="rtl"] .hero__visual::before {
  transform: rotate(-5deg);
}

.phone {
  position: relative;
  overflow: hidden;
  border: 8px solid var(--white);
  border-radius: 44px;
  background: var(--white);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--line);
}

/* The Explore screen inside the phone. Every size is in em, and the base
   size follows the phone's width, so the whole screen scales as one piece. */
.app {
  overflow: hidden;
  border-radius: 36px;
  container-type: inline-size;
}

.app__screen {
  position: relative;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  padding: 1.9em 1.5em 0;
  background: var(--paper) url("images/watermark.webp") center / cover no-repeat;
  color: var(--ink);
  font-size: 10.4px;
  font-size: 3.21cqw;
  line-height: 1.3;
  text-align: start;
}

.app__screen p,
.app__screen small,
.app__screen b {
  color: inherit;
  line-height: inherit;
}

.app__screen .icon {
  width: 1.5em;
  height: 1.5em;
}

.app__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1.2em;
}

.app__title {
  font-family: var(--font-display);
  font-size: 2.05em;
  font-weight: 700;
}

.app__bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0.6em 1.4em -0.7em rgba(77, 52, 115, 0.5);
}

.app__bell i {
  position: absolute;
  inset-block-start: -0.05em;
  inset-inline-end: 0;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #c2317a;
}

.app__tools {
  display: flex;
  gap: 0.8em;
  margin-block-end: 1.2em;
}

.app__select {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.8em;
  min-width: 0;
  padding: 0.75em 1em;
  border-radius: 1.3em;
  background: var(--white);
  box-shadow: 0 0.6em 1.4em -0.9em rgba(77, 52, 115, 0.4);
}

.app__select > .icon {
  width: 1.2em;
  height: 1.2em;
  color: var(--plum-deep);
}

.app__select-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 0.7em;
  background: var(--lavender);
  color: var(--plum-deep);
}

.app__select-text {
  display: grid;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.app__select-text small {
  overflow: hidden;
  font-size: 0.82em;
  color: var(--ink-soft);
}

.app__select-text b {
  font-size: 1.04em;
  font-weight: 600;
}

.app__filters {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.55em;
  padding-inline: 1.3em;
  border-radius: 1.15em;
  background: var(--grad-action);
  color: var(--white);
  font-size: 1.12em;
  font-weight: 600;
}

.app-card {
  margin-block-end: 1.25em;
  padding: 1.2em;
  border-radius: 1.6em;
  background: var(--white);
  box-shadow: 0 1em 2.2em -1.4em rgba(77, 52, 115, 0.45);
}

.app-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.9em;
}

.app-card__avatar {
  position: relative;
  flex: none;
  width: 4em;
  height: 4em;
}

/* a deliberately blurred portrait: photos stay hidden until both sides agree */
.app-card__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(0.2em);
}

.app-card__avatar--a::before {
  background:
    radial-gradient(circle at 50% 45%, #d3a591 0 24%, transparent 27%),
    radial-gradient(circle at 50% 28%, #7a5142 0 36%, transparent 40%),
    linear-gradient(#ecd6e6 55%, #d9a3c4);
}

.app-card__avatar--b::before {
  background:
    radial-gradient(circle at 50% 45%, #cfa58f 0 24%, transparent 27%),
    radial-gradient(circle at 50% 26%, #4a3a3c 0 36%, transparent 40%),
    linear-gradient(#e6dcec 55%, #a98ad0);
}

.app-card__avatar i {
  position: absolute;
  inset-block-end: -0.1em;
  inset-inline-end: -0.1em;
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border: 0.12em solid var(--white);
  border-radius: 50%;
  background: var(--plum-deep);
  color: var(--white);
}

.app-card__avatar i .icon {
  width: 0.8em;
  height: 0.8em;
  stroke-width: 3;
}

.app-card__who {
  flex: 1;
  min-width: 0;
}

.app-card__name {
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 700;
  white-space: nowrap;
}

.app-card__tag {
  display: inline-block;
  margin-block-start: 0.35em;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  background: var(--lavender);
  color: var(--plum-deep);
  font-size: 0.96em;
  font-weight: 600;
  white-space: nowrap;
}

.app-card__days {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3em;
  margin-block-start: 0.35em;
  color: var(--plum-deep);
  font-size: 0.96em;
  font-weight: 600;
  white-space: nowrap;
}

.app-card__days .icon {
  width: 1.1em;
  height: 1.1em;
}

.app-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
  margin-block: 1em 1.05em;
}

.app-card__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  background: #f6f3f9;
  font-size: 1.02em;
  white-space: nowrap;
}

.app-card__actions {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 0.7em;
}

.app-card__btn {
  display: grid;
  place-items: center;
  height: 2.95em;
  border: 0.1em solid var(--plum);
  border-radius: 0.85em;
  color: var(--plum-deep);
  font-size: 1.14em;
  font-weight: 600;
  white-space: nowrap;
}

.app-card__btn--fill {
  border-color: transparent;
  background: var(--grad-action);
  color: var(--white);
  box-shadow: 0 0.7em 1.2em -0.7em rgba(125, 94, 167, 0.9);
}

.app__nav {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  padding: 0.6em 1.1em 0.7em;
  border-radius: 2.2em 2.2em 0 0;
  background: var(--white);
}

.app__nav-item {
  display: grid;
  justify-items: center;
  gap: 0.2em;
  padding-block: 0.6em 0.5em;
  border-radius: 1.6em;
  font-size: 0.9em;
  white-space: nowrap;
}

.app__nav-item .icon {
  width: 1.75em;
  height: 1.75em;
}

.app__nav-item.is-active {
  background: var(--grad-action);
  color: var(--white);
}

@media (min-width: 940px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 64px;
  }

  .hero__visual {
    margin-inline: auto 0;
  }
}

/* 6. Sections ------------------------------------------------------------- */

.section {
  padding-block: clamp(64px, 9vw, 116px);
}

/* translucent, so the watermark carries through every section */
.section--white {
  background: rgba(255, 255, 255, 0.62);
}

.section--lavender {
  background: rgba(240, 232, 250, 0.6);
}

.section--blush {
  background: rgba(253, 236, 245, 0.45);
}

.section__head {
  max-width: 44rem;
  margin-block-end: clamp(32px, 5vw, 52px);
}

.section__title {
  font-size: clamp(1.8rem, 4.2vw, 2.75rem);
  color: var(--ink);
}

.section__title--narrow {
  max-width: 30ch;
  margin-block-end: clamp(32px, 5vw, 52px);
}

html[lang="en"] .section__title--narrow {
  max-width: 32ch;
}

.section__sub {
  margin-block-start: 12px;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--plum-deep);
}

.section__note {
  margin-block-start: 8px;
}

.icon-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--lavender);
  color: var(--plum-deep);
  font-size: 1.2rem;
}

.icon-badge--solid {
  background: var(--grad-action);
  color: var(--white);
}

.statement {
  max-width: 30ch;
  margin-block-start: clamp(36px, 5vw, 56px);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}

html[lang="en"] .statement {
  max-width: 34ch;
  line-height: 1.22;
}

.statement--gradient {
  max-width: none;
  text-align: center;
  color: var(--plum-deep);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .statement--gradient {
    background: var(--grad-action);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* 7. The problem ---------------------------------------------------------- */

.problem-grid {
  display: grid;
  gap: 20px;
}

.problem-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--porcelain);
}

.problem-card h3 {
  margin-block: 20px 10px;
}

.problem-card__answer {
  margin-block-start: 18px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--orchid);
  color: var(--ink);
  font-weight: 500;
}

@media (min-width: 860px) {
  .problem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 8. Women-only community ------------------------------------------------- */

.path-grid {
  display: grid;
  gap: 20px;
}

.path-card {
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.path-card h3 {
  margin-block: 22px 8px;
  font-size: 1.55rem;
}

@media (min-width: 760px) {
  .path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 9. How it works --------------------------------------------------------- */

.how {
  display: grid;
  gap: clamp(32px, 5vw, 52px);
}

.steps {
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  padding-block-end: 36px;
}

.step:last-child {
  padding-block-end: 0;
}

/* connecting line between the numbered steps */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: 58px 6px;
  inset-inline-start: 25px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--line), var(--line-pink));
}

.step__number {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-action);
  color: var(--white);
  font-family: "League Spartan", "Readex Pro", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  padding-block-start: 3px;
}

.step__body h3 {
  margin-block: 10px 8px;
  font-size: 1.4rem;
}

.step__body p + p {
  margin-block-start: 8px;
}

.step__body .step__note {
  margin-block-start: 16px;
  padding: 12px 18px;
  border-radius: var(--radius-s);
  background: var(--lavender);
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 940px) {
  .how {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .how__head {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 40px);
  }
}

/* 10. Compatibility ------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chips li {
  padding: 9px 20px;
  border: 1px solid var(--line-pink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.6;
}

.chips li:nth-child(3n + 1) {
  border-color: var(--line);
  background: var(--lavender);
}

/* 11. Privacy / reveal ---------------------------------------------------- */

.consent {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  margin-block-end: 20px;
  border-radius: var(--radius-m);
  background: var(--lavender);
}

.consent__title {
  font-weight: 600;
  color: var(--ink);
}

.consent__switches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 18px 8px 10px;
  padding-inline: 10px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 500;
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.switch:hover,
.switch[aria-checked="true"] {
  border-color: var(--plum);
}

.switch__track {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: #8a7f9f;
  transition: background-color 0.2s ease;
}

.switch__thumb {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 5px rgba(43, 31, 61, 0.3);
  transition: inset-inline-start 0.2s ease;
}

.switch[aria-checked="true"] .switch__track {
  background: var(--plum-deep);
}

.switch[aria-checked="true"] .switch__thumb {
  inset-inline-start: 23px;
}

.consent__status {
  min-height: 1.9em;
  color: var(--ink);
  font-weight: 500;
}

[data-unlocked="true"] .consent__status {
  color: var(--plum-deep);
  font-weight: 600;
}

.reveal-grid {
  display: grid;
  gap: 20px;
}

.reveal-card {
  padding: clamp(24px, 3.4vw, 36px);
  border: 2px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--porcelain);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.reveal-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-block-end: 18px;
}

.reveal-card h3 {
  font-size: 1.4rem;
}

.reveal-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 11px;
  border-block-start: 1px solid var(--line);
  color: var(--ink);
}

.reveal-card li .icon {
  margin-block-start: 0.35em;
  color: var(--plum);
}

.reveal-card--after {
  border-style: dashed;
}

.reveal-card__badge {
  margin-inline-start: auto;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--lavender);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.7;
}

[data-unlocked="true"] .reveal-card--after {
  border-style: solid;
  border-color: var(--orchid);
  background: var(--white);
  box-shadow: var(--shadow-lift);
}

[data-unlocked="true"] .reveal-card__badge {
  background: var(--grad-action);
  color: var(--white);
}

[data-unlocked="true"] .reveal-card--after .icon-badge {
  background: var(--grad-action);
  color: var(--white);
}

@media (min-width: 760px) {
  .reveal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 12. Built around women -------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--line);
}

.feature {
  padding: 26px 24px 28px;
  background: var(--white);
}

.feature__icon {
  width: 30px;
  height: 30px;
  color: var(--orchid-deep);
}

.feature h3 {
  margin-block: 14px 6px;
  font-size: 1.2rem;
}

.feature p {
  font-size: 0.98rem;
}

@media (min-width: 600px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 13. Split sections (verification, 14-day conversation) ------------------ */

.split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.split__copy > p {
  margin-block-start: 14px;
}

.split__copy > .section__sub {
  margin-block-start: 12px;
}

.with-icon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink);
  font-weight: 500;
}

.with-icon .icon {
  margin-block-start: 0.35em;
  color: var(--orchid-deep);
}

/* Verification illustration: a selfie in a camera frame with a check mark,
   surrounded by other verified members. Portraits are blurred on purpose. */
.verify-art {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  min-height: 340px;
  padding: 40px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: linear-gradient(155deg, var(--lavender), var(--blush));
}

.verify-art__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 40px;
  background: var(--white);
  box-shadow: var(--shadow-lift);
}

.verify-art__brackets {
  position: absolute;
  inset: -20px;
  width: 190px;
  height: 190px;
  fill: none;
  stroke: var(--plum);
  stroke-width: 4;
  stroke-linecap: round;
}

.verify-art__portrait,
.verify-art__member::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #d3a591 0 24%, transparent 27%),
    radial-gradient(circle at 50% 28%, #7a5142 0 36%, transparent 40%),
    linear-gradient(#ecd6e6 55%, #d9a3c4);
}

.verify-art__portrait {
  width: 104px;
  height: 104px;
  filter: blur(5px);
}

.verify-art__check {
  position: absolute;
  inset-block-end: -14px;
  inset-inline-end: -14px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: var(--grad-action);
  color: var(--white);
  box-shadow: 0 12px 20px -10px rgba(77, 52, 115, 0.8);
}

.verify-art__check .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.8;
}

.verify-art__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--white);
  color: var(--plum-deep);
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 14px 26px -18px rgba(77, 52, 115, 0.8);
}

.verify-art__member {
  --size: clamp(34px, 10vw, 62px);
  position: absolute;
  width: var(--size);
  height: var(--size);
}

.verify-art__member::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(3px);
}

.verify-art__member--2::before,
.verify-art__member--3::before {
  background:
    radial-gradient(circle at 50% 45%, #cfa58f 0 24%, transparent 27%),
    radial-gradient(circle at 50% 26%, #4a3a3c 0 36%, transparent 40%),
    linear-gradient(#e6dcec 55%, #a98ad0);
}

.verify-art__member i {
  position: absolute;
  inset-block-end: -3px;
  inset-inline-end: -3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--plum-deep);
  color: var(--white);
}

.verify-art__member i .icon {
  width: 11px;
  height: 11px;
  stroke-width: 3.2;
}

.verify-art__member--1 {
  inset-block-start: 10%;
  inset-inline-start: 5%;
}

.verify-art__member--2 {
  inset-block-end: 9%;
  inset-inline-start: 9%;
  --size: clamp(28px, 8.4vw, 50px);
}

.verify-art__member--3 {
  inset-block-start: 16%;
  inset-inline-end: 6%;
  --size: clamp(28px, 8.4vw, 50px);
}

.verify-art__member--4 {
  inset-block-end: 6%;
  inset-inline-end: 4%;
}

/* very narrow phones: smaller members, tucked into the corners */
@media (max-width: 345px) {
  .verify-art__member {
    --size: 30px;
    inset-inline-start: 2%;
  }

  .verify-art__member--3,
  .verify-art__member--4 {
    inset-inline: auto 2%;
  }

  .verify-art__member--2,
  .verify-art__member--3 {
    --size: 24px;
  }
}

.split + .principle {
  margin-block-start: clamp(32px, 5vw, 56px);
  text-align: center;
}

.split + .principle p {
  max-width: 44rem;
  margin-inline: auto;
}

.principle {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-l);
  background: var(--grad-action);
  box-shadow: var(--shadow-lift);
}

.principle p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--white);
}

html[lang="en"] .principle p {
  line-height: 1.35;
}

.fortnight {
  padding: clamp(24px, 3.4vw, 36px);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.fortnight__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.fortnight__title .icon {
  width: 1.25em;
  height: 1.25em;
  color: var(--orchid-deep);
}

.fortnight__track {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: clamp(3px, 0.8vw, 7px);
}

.fortnight__track span {
  height: 44px;
  border-radius: 8px;
  background: var(--plum);
}

/* the fourteen days shade from plum to orchid */
.fortnight__track span:nth-child(n + 4) { background: #8f61a9; }
.fortnight__track span:nth-child(n + 7) { background: #a265ab; }
.fortnight__track span:nth-child(n + 10) { background: #b468ad; }
.fortnight__track span:nth-child(n + 13) { background: var(--orchid); }

.fortnight__labels {
  display: flex;
  justify-content: space-between;
  margin-block-start: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.fortnight__outcomes {
  margin-block-start: 20px;
}

.fortnight__outcomes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 12px;
  border-block-start: 1px solid var(--line);
  color: var(--ink);
}

.fortnight__outcomes .icon {
  margin-block-start: 0.35em;
  color: var(--orchid-deep);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 14. Who is Taqleedi for ------------------------------------------------- */

.contact {
  display: grid;
  gap: 28px;
  align-items: center;
}

.contact__email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 16px 30px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--plum-deep);
  font-family: "Readex Pro", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.contact__email:hover {
  border-color: var(--plum);
  transform: translateY(-2px);
}

.contact__email .icon {
  color: var(--orchid-deep);
}

@media (min-width: 760px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}

.who {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
}

.who__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 15px;
  border-block-end: 1px solid var(--line);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
}

.who__list li:first-child {
  border-block-start: 1px solid var(--line);
}

.who__list .icon {
  margin-block-start: 0.35em;
  color: var(--orchid-deep);
}

@media (min-width: 900px) {
  .who {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

/* 15. Why Taqleedi -------------------------------------------------------- */

.why-grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
}

.why-no li {
  padding-block: 18px;
  border-block-end: 1px solid #d8cbe8;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

html[lang="en"] .why-no li {
  line-height: 1.2;
}

.why-no li:first-child {
  padding-block-start: 0;
}

.why-yes {
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-l);
  background: var(--grad-action);
  color: var(--white);
  box-shadow: var(--shadow-lift);
}

.why-yes__lead {
  margin-block-end: 12px;
  color: var(--white);
  font-weight: 500;
}

.why-yes li {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--tracking-display);
}

html[lang="en"] .why-yes li {
  line-height: 1.3;
}

.why-yes li + li {
  margin-block-start: 8px;
}

@media (min-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 64px);
  }
}

/* 16. FAQ ----------------------------------------------------------------- */

.faq__item {
  border-block-end: 1px solid var(--line);
}

.faq__item:first-child {
  border-block-start: 1px solid var(--line);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 4px;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.faq__question:hover {
  color: var(--plum-deep);
}

.faq__sign {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lavender);
  transition: background-color 0.2s ease;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 10px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--plum-deep);
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item.is-open .faq__sign {
  background: var(--plum-deep);
}

.faq__item.is-open .faq__sign::before,
.faq__item.is-open .faq__sign::after {
  background: var(--white);
}

.faq__item.is-open .faq__sign::after {
  transform: rotate(0deg);
}

.faq__answer {
  padding: 0 4px 22px;
  max-width: 62ch;
}

.faq__answer p + p {
  margin-block-start: 8px;
}

/* collapsed only when JavaScript is running; otherwise every answer shows */
.js .faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.js .faq__panel > .faq__answer {
  min-height: 0;
  overflow: hidden;
  padding-block-end: 0;
}

.js .faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s;
}

.js .faq__item.is-open .faq__panel > .faq__answer {
  padding-block-end: 22px;
}

/* 17. Waitlist (final call to action) ------------------------------------- */

.final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 128px);
  background: var(--grad-action);
  color: var(--white);
  text-align: center;
}

.final__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.final__title {
  max-width: 22ch;
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  font-weight: 700;
  color: var(--white);
}

.final__text {
  max-width: 34rem;
  font-size: 1.15rem;
  color: var(--white);
}

.final :focus-visible {
  outline-color: var(--white);
}

.waitlist {
  width: min(100%, 660px);
  margin-block-start: 16px;
}

/* Sign-up card: email or phone, then who it is for */
.signup-card {
  width: min(100%, 560px);
  margin-block-start: 20px;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
  background: var(--white);
  color: var(--ink);
  text-align: start;
  box-shadow: 0 34px 60px -30px rgba(43, 31, 61, 0.75);
}

.signup-card__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.signup-card__sub {
  margin-block-start: 4px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-align: center;
}

.signup-card .waitlist {
  width: 100%;
  margin: 0;
}

.signup-field {
  margin-block-start: 22px;
}

.signup-field__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-block-end: 8px;
}

.signup-label {
  color: var(--ink);
  font-weight: 700;
}

.signup-field__switch {
  padding: 0;
  border: 0;
  background: none;
  color: var(--plum-deep);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.signup-card :focus-visible {
  outline-color: var(--plum);
}

.signup-input {
  position: relative;
}

.signup-input > span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 16px;
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  pointer-events: none;
}

.signup-input > span[hidden] {
  display: none;
}

.signup-input .waitlist__input {
  min-height: 54px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--porcelain);
}

[dir="rtl"] .signup-input .waitlist__input {
  padding-right: 48px;
  padding-left: 16px;
}

[dir="ltr"] .signup-input .waitlist__input {
  padding-right: 16px;
  padding-left: 48px;
}

.signup-input .waitlist__input:focus-visible {
  border-color: var(--plum);
  background: var(--white);
}

.signup-card .waitlist.is-invalid .waitlist__input {
  border-color: #b3261e;
}

.signup-group {
  min-width: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.signup-group legend {
  margin-block-end: 10px;
  padding: 0;
}

/* two large choices: for myself / for someone else */
.signup-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.who-tile,
.rel-chip {
  position: relative;
  cursor: pointer;
}

.who-tile input,
.rel-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.who-tile > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.35;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.who-tile .icon {
  width: 1.5em;
  height: 1.5em;
  color: var(--plum);
}

.rel-chip span {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.who-tile:hover > span,
.rel-chip:hover span {
  border-color: var(--plum);
}

.who-tile input:checked + span,
.rel-chip input:checked + span {
  border-color: var(--plum);
  background: #f4ecfa;
  color: var(--plum-deep);
  box-shadow: inset 0 0 0 1px var(--plum);
}

.rel-chip input:checked + span {
  font-weight: 700;
}

.who-tile input:focus-visible + span,
.rel-chip input:focus-visible + span {
  outline: 3px solid var(--plum);
  outline-offset: 2px;
}

.signup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signup-card .waitlist__message {
  min-height: 0;
  margin-block-start: 8px;
  color: #b3261e;
  font-size: 0.92rem;
  font-weight: 600;
}

.signup-card .waitlist__message:empty {
  margin-block-start: 0;
}

.signup-card .waitlist__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-block-start: 24px;
  border-radius: 16px;
  white-space: normal;
}

[dir="rtl"] .signup-card .waitlist__button .icon {
  transform: scaleX(-1);
}

.signup-card .waitlist__success {
  width: 100%;
  margin-block-start: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #f4ecfa;
  box-shadow: none;
  text-align: center;
}

html[lang="ar"] .who-tile > span,
html[lang="ar"] .rel-chip span {
  padding-block-start: 12px;
}

html[lang="ar"] .who-tile .icon {
  transform: translateY(-0.12em);
}

/* phones: icon above the words, and slimmer chips */
@media (max-width: 480px) {
  .who-tile > span {
    flex-direction: column;
    gap: 4px;
    min-height: 74px;
    padding: 10px 8px;
    text-align: center;
  }

  .signup-chips {
    gap: 6px;
  }

  .rel-chip span {
    padding-inline: 12px;
    font-size: 0.94rem;
  }
}

/* a white card holding the field and the button: stacked on phones */
.waitlist__row {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 34px 60px -30px rgba(43, 31, 61, 0.75);
}

.waitlist__input {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 22px;
  background: var(--lavender);
  color: var(--ink);
  font: inherit;
  text-align: start;
}

.waitlist__input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

/* a typed email address always reads left to right, even on the Arabic page */
.waitlist__input:not(:placeholder-shown) {
  direction: ltr;
}

[dir="rtl"] .waitlist__input:not(:placeholder-shown) {
  text-align: right;
}

.waitlist__input:focus-visible {
  outline: none;
  border-color: var(--plum);
}

.waitlist.is-invalid .waitlist__input {
  border-color: #b3261e;
}

.waitlist__button {
  min-height: 54px;
  padding: 12px 26px;
  border: 0;
  border-radius: 22px;
  background: var(--grad-action);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.waitlist__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -14px rgba(125, 94, 167, 0.9);
}

.waitlist__button:focus-visible {
  outline-color: var(--plum);
}

.waitlist__button:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.waitlist__message {
  min-height: 1.9em;
  margin-block-start: 12px;
  color: var(--white);
  font-weight: 600;
}

.waitlist__success {
  width: min(100%, 660px);
  margin-block-start: 16px;
  padding: 22px 28px;
  border-radius: 30px;
  background: var(--white);
  color: var(--plum-deep);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.6;
  box-shadow: 0 34px 60px -30px rgba(43, 31, 61, 0.75);
}

/* focus is moved here after sending so screen readers announce it */
.waitlist__success:focus {
  outline: none;
}

.waitlist__note {
  font-size: 0.95rem;
  color: var(--white);
}

/* field and button share one row from tablet width up */
@media (min-width: 640px) {
  .waitlist__row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px;
    border-radius: 999px;
  }

  .waitlist__input {
    border-radius: 999px;
    background: transparent;
  }

  .waitlist__button {
    border-radius: 999px;
    white-space: nowrap;
  }
}

/* 18. Footer -------------------------------------------------------------- */

.site-footer {
  padding-block: 36px;
  background: rgba(251, 248, 245, 0.7);
  font-size: 0.95rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.site-footer .logo {
  margin-inline-end: 0;
}

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-weight: 500;
  color: var(--ink);
}

.footer-trust li:not(:last-child)::after {
  content: "·";
  margin-inline: 10px;
  color: var(--orchid-deep);
}

.footer-social {
  display: flex;
  gap: 18px;
  margin-inline-start: auto;
  flex-wrap: wrap;
  row-gap: 6px;
}

.footer-social a {
  color: var(--plum-deep);
  font-weight: 500;
  text-underline-offset: 4px;
}

.footer-social a:hover {
  color: var(--ink);
}

.site-footer__settings {
  padding: 0;
  border: 0;
  background: none;
  color: var(--plum-deep);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.site-footer__settings:hover {
  color: var(--ink);
}

/* Advertising consent banner */
.ad-consent {
  position: fixed;
  inset-block-end: 16px;
  inset-inline: 16px;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(100% - 32px, 680px);
  margin-inline: auto;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--white);
  box-shadow: 0 24px 60px -24px rgba(43, 31, 61, 0.55);
}

.ad-consent__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
}

.ad-consent__text {
  font-size: 0.95rem;
  line-height: 1.7;
}

.ad-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 6px;
}

/* both choices are the same size and equally easy to pick */
.ad-consent__btn {
  flex: 1 1 140px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  background: var(--white);
  color: var(--plum-deep);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.ad-consent__btn--accept {
  border-color: transparent;
  background: var(--grad-action);
  color: var(--white);
}

html[lang="ar"] .ad-consent__btn {
  padding-block: 13px 7px;
}

.site-footer__rights {
  flex-basis: 100%;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
  font-size: 0.88rem;
}

@media (max-width: 700px) {
  .footer-social {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
}

/* 19. Tajawal optical alignment --------------------------------------------
   Tajawal sits high in its line box. In Arabic, pills and buttons get a
   little more space above the text, and inline icons move up to meet it. */

html[lang="ar"] .btn {
  padding-block: 15px 9px;
}

html[lang="ar"] .btn--small {
  padding-block: 11px 5px;
}

html[lang="ar"] .waitlist__button {
  padding-block: 15px 9px;
}

html[lang="ar"] .waitlist__input:placeholder-shown {
  padding-block: 13px 7px;
}

html[lang="ar"] .hero__tag .icon,
html[lang="ar"] .fortnight__title .icon {
  transform: translateY(-0.14em);
}

html[lang="ar"] .verify-art__label {
  padding-block: 10px 6px;
}

html[lang="ar"] .verify-art__label .icon {
  transform: translateY(-0.15em);
}

html[lang="ar"] .chips li {
  padding-block: 11px 7px;
}

html[lang="ar"] .reveal-card__badge {
  padding-block: 5px 1px;
}

.lang-toggle button[lang="ar"] {
  padding-block: 6px 2px;
}

html[lang="ar"] :is(.trust-list, .reveal-card, .with-icon, .fortnight__outcomes, .who__list) li .icon,
html[lang="ar"] .with-icon .icon {
  transform: translateY(-0.2em);
}

/* 20. Scroll-in animation -------------------------------------------------
   Elements are only hidden when JavaScript is running, so the page is
   fully readable without it. */

.js [data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .js [data-animate] {
    opacity: 1;
    transform: none;
  }
}