/* Behind the Sets · public home page (behindthesets.com). Uses the app's tokens from styles.css. */
.home { --wrap: 1180px; --hero: #1A1E21; --hero-ink: #F1F2EF; --hero-muted: #A9B0B2; --teal-l: #6FB3B8; font-size: 16px; }
.home h1, .home h2, .home h3 { font-family: var(--display); font-weight: 700; letter-spacing: .005em; line-height: 1.05; margin: 0; }
[dir="rtl"] .home h1, [dir="rtl"] .home h2, [dir="rtl"] .home h3 { line-height: 1.3; letter-spacing: 0; }
.home p { margin: 0; }
.hw { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: var(--radius); z-index: 50; }
.skip:focus { top: 12px; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px !important; }
[dir="rtl"] .eyebrow { font-family: var(--body); letter-spacing: 0; font-size: 14px; font-weight: 600; }
.btn.big { min-height: 52px; padding: 12px 24px; font-size: 16.5px; white-space: normal; text-align: center; }

/* nav */
.hnav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--hero) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.07); }
.hnav .hw { display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .02em; color: var(--hero-ink); text-decoration: none; text-transform: uppercase; }
[dir="rtl"] .wordmark { font-family: "Barlow Condensed", sans-serif; }
.wordmark .mark { width: 28px; height: 28px; background: url("/assets/favicon.svg") center / contain no-repeat; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); flex: none; }
.wordmark.small { font-size: 18px; color: var(--ink); }
.wordmark.small .mark { width: 22px; height: 22px; box-shadow: none; }
.hlinks { display: flex; gap: 22px; }
.hlinks a { color: var(--hero-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.hlinks a:hover { color: var(--hero-ink); }
.hact { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.hnav .btn.ghost { color: var(--hero-ink); border-color: rgba(255,255,255,.18); }
.hnav .btn.ghost:hover { border-color: rgba(255,255,255,.45); }
.hnav .btn.primary { background: var(--teal-l); border-color: var(--teal-l); color: #0E1416; }
#lang:lang(ar) { font-family: "IBM Plex Sans Arabic", sans-serif; }

/* hero */
.hero { background: var(--hero); color: var(--hero-ink); padding: 72px 0 0; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 85% 15%, rgba(111,179,184,.16), transparent 60%); pointer-events: none; }
.herogrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; position: relative; }
.herotext { padding-bottom: 88px; }
.hero .eyebrow { color: var(--teal-l); }
.hero h1 { font-size: clamp(42px, 5.4vw, 68px); text-transform: uppercase; }
[dir="rtl"] .hero h1 { text-transform: none; font-size: clamp(38px, 5vw, 60px); font-weight: 700; }
.herolead { font-size: 18.5px; line-height: 1.6; color: var(--hero-muted); margin-top: 22px !important; max-width: 34em; }
.heroact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .btn.primary { background: var(--teal-l); border-color: var(--teal-l); color: #0E1416; }
.hero .btn:not(.primary) { background: transparent; color: var(--hero-ink); border-color: rgba(255,255,255,.22); }
.heronote { margin-top: 16px !important; font-size: 14px; color: var(--hero-muted); }
.heroart { position: relative; padding-bottom: 0; min-height: 420px; }
.browser { margin: 0; background: #F1F2EF; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); width: 118%; }
[dir="rtl"] .browser { margin-inline-start: 0; }
.bbar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #E3E5E0; border-bottom: 1px solid #D3D6CF; direction: ltr; }
.bbar i { width: 10px; height: 10px; border-radius: 50%; background: #C5C9C2; }
.bbar span { margin: 0 auto; font: 12px var(--mono); color: #646B6E; background: #F7F8F5; padding: 3px 40px; border-radius: 5px; }
.browser img, .shot img, .phone img { display: block; width: 100%; height: auto; }
.heroart .phone { position: absolute; inset-inline-start: -46px; bottom: -40px; width: 34%; max-width: 230px; }
.phone { margin: 0; border-radius: 30px; padding: 8px; background: #0B0D0E; box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12); }
.phone img { border-radius: 23px; }

/* strip */
.strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.strip p { padding: 30px 0; font-size: 18px; color: var(--muted); max-width: 46em; }

/* features */
.feat { padding: 96px 0; }
.feat.alt { background: var(--sunk); border-block: 1px solid var(--line); }
.featgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.feat.alt .featgrid .feattext { order: 2; }
.feat h2, .safe h2, .plans h2 { font-size: clamp(32px, 4vw, 48px); max-width: 16em; }
[dir="rtl"] .feat h2, [dir="rtl"] .safe h2, [dir="rtl"] .plans h2 { font-size: clamp(28px, 3.2vw, 38px); }
.ticks2 { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; align-content: start; }
.ticks2 li { position: relative; padding-inline-start: 28px; line-height: 1.55; }
.ticks2 li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.shot { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(26,30,33,.12); background: var(--surface); }
.shot.doc { max-width: 520px; justify-self: center; transform: rotate(-1.2deg); }
[dir="rtl"] .shot.doc { transform: rotate(1.2deg); }
.phones { display: flex; gap: 28px; justify-content: center; align-items: flex-start; }
.phones .phone { width: 46%; max-width: 280px; }
.phones .phone.second { margin-top: 56px; }

/* small cards */
.cards3, .cards4 { display: grid; gap: 20px; }
.cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
.mini { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.mini h3 { font-size: 24px; margin-bottom: 10px; }
[dir="rtl"] .mini h3 { font-size: 20px; }
.mini p { color: var(--muted); line-height: 1.6; }

/* data */
.safe { padding: 96px 0; background: var(--hero); color: var(--hero-ink); }
.safe .eyebrow { color: var(--teal-l); }
.safe .mini { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.safe .mini p { color: var(--hero-muted); }
.safe .mini h3::before { content: ""; display: block; width: 26px; height: 3px; background: var(--teal-l); margin-bottom: 18px; border-radius: 2px; }

/* plans */
.plans { padding: 96px 0; }
.plansnote { margin-top: 14px !important; font-size: 16px; color: var(--muted); }
.plangrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan h3 { font-size: 30px; text-transform: uppercase; }
[dir="rtl"] .plan h3 { text-transform: none; font-size: 24px; }
.pfor { color: var(--muted); font-size: 14.5px; margin-top: 6px !important; min-height: 2.9em; }
.plan .ticks2 { margin: 18px 0 24px; gap: 10px; font-size: 15px; flex: 1; }
.soon { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); padding: 11px 0; border-top: 1px dashed var(--line); text-align: center; }
[dir="rtl"] .soon { font-family: var(--body); letter-spacing: 0; font-size: 14px; font-weight: 600; }

/* final + footer */
.final { background: var(--accent); color: #fff; text-align: center; padding: 88px 0; }
.final h2 { font-size: clamp(36px, 5vw, 60px); text-transform: uppercase; }
[dir="rtl"] .final h2 { text-transform: none; }
.final p { margin: 16px auto 30px !important; font-size: 18px; opacity: .88; max-width: 34em; }
.final .btn.primary { background: #fff; color: var(--accent); border-color: #fff; }
.hfoot { padding: 36px 0 44px; border-top: 1px solid var(--line); }
.hfoot .hw { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.hfoot p { color: var(--muted); font-size: 14px; }
.hfoot nav { margin-inline-start: auto; display: flex; gap: 18px; font-size: 14px; }
.hfoot .copy { width: 100%; font-size: 13px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home .final { background: #1E3133; }
  :root:not([data-theme="light"]) .home .final .btn.primary { color: #1E3133; }
  :root:not([data-theme="light"]) .home .shot { box-shadow: 0 20px 50px rgba(0,0,0,.4); }
}

/* responsive */
@media (max-width: 1020px) {
  .hlinks { display: none; }
  .herogrid, .featgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feat.alt .featgrid .feattext { order: 0; }
  .herotext { padding-bottom: 0; }
  .heroart { min-height: 0; padding-bottom: 0; margin-inline: 0; }
  .browser { width: 100%; }
  .heroart .phone { inset-inline-start: auto; inset-inline-end: 12px; bottom: 24px; width: 26%; }
  .cards4, .plangrid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hw { padding: 0 16px; }
  .hnav .hw { gap: 10px; height: 58px; }
  .wordmark { font-size: 18px; } .wordmark .mark { width: 24px; height: 24px; }
  .hsignin { display: none; }
  .hnav .hact .btn.primary { padding-inline: 10px; }
  .hero { padding-top: 44px; }
  .herolead { font-size: 17px; }
  .heroact .btn { width: 100%; }
  .heroart .phone { width: 34%; bottom: 16px; border-radius: 20px; padding: 5px; }
  .heroart .phone img { border-radius: 16px; }
  .feat, .safe, .plans { padding: 64px 0; }
  .cards3, .cards4, .plangrid4 { grid-template-columns: minmax(0, 1fr); }
  .phones { gap: 14px; }
  .phones .phone { border-radius: 22px; padding: 6px; }
  .phones .phone img { border-radius: 17px; }
  .pfor { min-height: 0; }
  .shot.doc { transform: none; }
  .final { padding: 64px 0; }
  .hfoot nav { margin-inline-start: 0; }
}
@media (max-width: 400px) { .hnav .hact .btn.primary { display: none; } }

/* privacy page */
.legal { max-width: 760px; padding-top: 64px; padding-bottom: 88px; }
.legal h1 { font-size: clamp(36px, 5vw, 54px); text-transform: uppercase; }
.legal .updated { color: var(--muted); font-size: 14px; margin-top: 10px !important; }
.legal .lead { font-size: 18.5px; line-height: 1.6; margin: 28px 0 8px !important; }
.legal h2 { font-size: 28px; margin: 44px 0 12px; }
.legal p, .legal li { line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.hfoot a.wordmark { text-decoration: none; }