/* ---------------------------------------------------------------------------
   The app's design system, translated to the web.

   Every value here comes from the ACTIVE system in
   src/core/theme/designSystems.ts, which is `bits` (DEFAULT_DESIGN_SYSTEM,
   Itay's choice on 2026-09-06): navy text, electric blue blocks, one loud
   yellow, a cool white page, and no shadows at all. The retired Figma language
   (cream, forest green, coral) is still in the code and must not appear here.

   Two rules carry the whole feeling and are easy to break by accident:
   depth comes from flat coloured blocks, never from elevation, and yellow is a
   fill colour, never an ink colour. On yellow, always navy.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=Noto+Sans+Hebrew:wght@400;500;600;700&display=swap');

:root {
  /* Colours, named for their role exactly as the app names them. */
  --background: #f2f5fa;
  --surface: #fff;
  /* The contrast block is electric blue, not a dark grey. */
  --surface-contrast: #0f0fff;
  --on-surface-contrast: #fff;
  --accent: #f9fd11;
  /* Yellow this loud only works with near-black text on it. */
  --on-accent: #001743;
  --accent-deep: #e3e70a;
  --text-primary: #001743;
  --text-secondary: #5a6b8c;
  --secondary: #001743;
  --on-secondary: #fff;
  --tint: #e7ecfa;
  --outline: #dce0ea;
  --success: #3ab515;
  --error: #db2e2e;
  --warning: #f0a202;
  /* Navy on navy would make a link invisible, so links take the electric blue
     the blocks are made of. */
  --link: #0f0fff;

  /* radii */
  --r-input: 18px;
  --r-card: 28px;
  --r-card-lg: 36px;
  --r-pill: 999px;

  /* spacing */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;

  /* motion. Every functional animation is 300ms or less (UI/UX §5). */
  --t-press: 140ms;
  --t-base: 200ms;
  --t-entrance: 260ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --touch: 48px;
  --button-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #00102e;
    --surface: #04173c;
    --text-primary: #eaf0ff;
    --text-secondary: #8fa3c8;
    --secondary: #5b7bff;
    --on-secondary: #00102e;
    --tint: #0a1f4a;
    --outline: #173059;
    --error: #ff6b6b;
    --link: #5b7bff;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family:
    Inter,
    'Noto Sans Hebrew',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  /* body: 15/22. Tracking is left alone throughout: this language leans on
     weight, not on spacing. */
  font-size: 15px;
  line-height: 22px;
}

:lang(he) body,
[dir='rtl'] body {
  font-family:
    'Noto Sans Hebrew',
    Inter,
    -apple-system,
    system-ui,
    sans-serif;
}

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--s-lg) var(--s-md) var(--s-xxl);
}

/* ------------------------------------------------------------------ header */
.masthead {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin-bottom: var(--s-xl);
  text-decoration: none;
  color: inherit;
}

.masthead svg {
  height: 32px;
  width: auto;
  display: block;
}

.masthead .wordmark {
  font-weight: 800;
  font-size: 22px;
}

/* The mark carries two fills, exactly as LogoMark.tsx does: the brand navy and
   the yellow accent, which sits on the navy body and so never becomes ink on a
   light ground. They are set here so no page has to know a hex value. */
.mark-primary {
  fill: var(--text-primary);
}

.mark-accent {
  fill: var(--accent);
}

/* -------------------------------------------------------------- typography */
h1,
.display {
  /* display: 32/38, extra bold */
  font-size: 32px;
  line-height: 38px;
  font-weight: 800;
  margin: 0 0 var(--s-md);
}

h2,
.title {
  /* title: 21/27, bold */
  font-size: 21px;
  line-height: 27px;
  font-weight: 700;
  margin: 0 0 var(--s-sm);
}

h3 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin: var(--s-lg) 0 var(--s-xs);
}

p {
  margin: 0 0 var(--s-md);
}

.lead {
  font-size: 17px;
  line-height: 26px;
  color: var(--text-secondary);
}

.caption {
  /* caption: 12/17, medium */
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  color: var(--text-secondary);
}

.note {
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

/* Wider screens get a larger display, not a wider column: a legal document at
   1200px wide is unreadable, and the app's rhythm is a phone's. */
@media (min-width: 700px) {
  h1,
  .display {
    font-size: 44px;
    line-height: 50px;
  }
  .wrap {
    padding-inline: var(--s-lg);
  }
}

/* ----------------------------------------------------------------- blocks */
/* ADR-0012 rule 1: screens are composed of coloured blocks, and every main
   screen carries exactly one loud contrast card. Flat, never raised: there is
   not a single shadow in this file, which is the point of the language. */
.statement {
  background: var(--surface-contrast);
  color: var(--on-surface-contrast);
  border-radius: var(--r-card-lg);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}

.statement h2,
.statement h3 {
  color: inherit;
  margin-top: 0;
}

.statement .note,
.statement .caption {
  color: #c8ceff;
}

.statement a {
  color: #fff;
}

/* A button inside the contrast card is still a button: yellow with navy on it.
   The link colour above would otherwise win on specificity and paint it
   white, which on yellow is unreadable. */
.statement a.btn {
  color: var(--on-accent);
}

.statement a.btn.ghost {
  color: var(--on-surface-contrast);
  border-color: rgb(255 255 255 / 40%);
}

.tile {
  background: var(--tint);
  border-radius: var(--r-card-lg);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}

.tile > :last-child,
.card > :last-child,
.statement > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- rows */
/* The settings row: icon, label, hairline. Same grammar as the app. */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rows li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--outline);
}

.tile .rows li {
  border-bottom-color: rgb(0 23 67 / 12%);
}

.statement .rows li {
  border-bottom-color: rgb(255 255 255 / 22%);
}

.rows li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rows li:first-child {
  padding-top: 0;
}

/* A paragraph after the list is a closing remark, not another row. */
.rows + p {
  margin-top: var(--s-md);
}

.rows .ico {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--text-primary);
}

.statement .rows .ico {
  color: var(--accent);
}

.rows .rowtext strong {
  display: block;
  font-weight: 700;
}

.rows .rowtext span {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

.statement .rows .rowtext span {
  color: #c8ceff;
}

/* ---------------------------------------------------------------- controls */
label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--s-sm);
}

input[type='email'] {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--s-md);
  border: 1px solid var(--outline);
  border-radius: var(--r-input);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
  transition: border-color var(--t-base) var(--ease-out);
}

input[type='email']:focus-visible {
  outline: none;
  border-color: var(--link);
  /* A focus ring, not elevation: the one box-shadow in the file, and it is
     flat, hard and on brand. */
  box-shadow: 0 0 0 3px rgb(15 15 255 / 25%);
}

/* The app's button: a fully round pill, 56pt tall, that sinks to 0.97 on
   press. Yellow fill, navy ink, no shadow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  width: 100%;
  min-height: var(--button-h);
  padding: 0 var(--s-lg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--t-press) var(--ease-out),
    background-color var(--t-press) var(--ease-out);
}

.btn:hover {
  background: var(--accent-deep);
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn.ghost {
  background: transparent;
  border-color: var(--outline);
  color: var(--text-primary);
}

.btn.ghost:hover {
  background: var(--tint);
}

.btn.contrast {
  background: var(--surface-contrast);
  color: var(--on-surface-contrast);
}

.btn .ico {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

.btn-row .btn {
  width: auto;
  flex: 1 1 200px;
}

/* Segmented pills, the app's language picker. */
.segment {
  display: inline-flex;
  gap: var(--s-xs);
  padding: var(--s-xs);
  background: var(--tint);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-lg);
}

.segment button {
  min-height: 36px;
  padding: 0 var(--s-md);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}

.segment button[aria-pressed='true'] {
  background: var(--surface-contrast);
  color: var(--on-surface-contrast);
}

/* ---------------------------------------------------------------- feedback */
.status {
  display: none;
  margin-top: var(--s-md);
  padding: var(--s-md);
  border-radius: var(--r-input);
  font-size: 14px;
  line-height: 21px;
}

.status.show {
  display: block;
  animation: rise var(--t-entrance) var(--ease-out) both;
}

.status.ok {
  background: color-mix(in srgb, var(--success) 14%, var(--background));
  color: var(--success);
}

.status.err {
  background: color-mix(in srgb, var(--error) 14%, var(--background));
  color: var(--error);
}

/* --------------------------------------------------------------- entrances */
/* Motion has to say something (ADR-0012 rule 3). Here it says "this page has
   an order to it": blocks arrive top down, 50ms apart, once. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.enter {
  animation: rise var(--t-entrance) var(--ease-out) both;
}

/* nth-child, not nth-of-type: the blocks are a mix of h1, p and div, and
   nth-of-type would restart the count for each tag and stagger nothing. */
.enter:nth-child(2) {
  animation-delay: 50ms;
}
.enter:nth-child(3) {
  animation-delay: 100ms;
}
.enter:nth-child(4) {
  animation-delay: 150ms;
}
.enter:nth-child(5) {
  animation-delay: 200ms;
}
/* Anything below the fold arrives together: a footer that waits half a second
   for its turn is a page that feels slow, not a page that feels composed. */
.enter:nth-child(n + 6) {
  animation-delay: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active {
    transform: none;
  }
}

/* ----------------------------------------------------------------- footer */
footer {
  margin-top: var(--s-xxl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--outline);
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-md);
}

footer a {
  color: var(--text-secondary);
}

footer a:hover {
  color: var(--link);
}

/* ------------------------------------------------------------------- home */
/* The landing page, from Itay's Figma (file pj076Q9Q3Y8vfrad7HmBxg, node
   2:2662). The artboard is a 637px mock, so the values below are its
   PROPORTIONS rather than its pixels: transcribing a mock literally gives a
   hero with 29px type on a 1200px screen. */
/* The landing page is not a column at all. A legal document is capped so a
   line stays readable; a hero is a picture, and capping it leaves a banner
   marooned in the middle of a wide screen. So it takes the whole viewport
   less a gutter, which is the margin the mock leaves around the card. */
.page {
  padding: clamp(16px, 2.2vw, 40px);
}

/* Visible to a screen reader, to nobody else. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero {
  position: relative;
  margin: var(--s-lg) 0 0;
  /* The badge is centred on the card's bottom edge, so the hero reserves
     exactly half of it underneath and the card itself never clips. */
  padding-bottom: clamp(42px, 6vw, 74px);
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: clamp(24px, 3.4vw, 44px);
  background: var(--surface-contrast);
  color: var(--on-surface-contrast);
  /* 587 x 426 in the mock. The ratio alone is a trap on a wide screen: at
     1700px the card would stand 1230px tall and the copy, which does not grow
     with it, leaves a column of empty blue. So the ratio sets the shape and a
     cap stops the growth, which also keeps the whole hero above the fold. */
  /* The explicit width matters: with `aspect-ratio` and `max-height` and an
     auto width, the browser keeps the ratio by SHRINKING the card instead,
     and the hero pulls away from the column it belongs to. A definite width
     makes the ratio compute the height, and the cap then clamps that alone. */
  width: 100%;
  aspect-ratio: 587 / 426;
  max-height: min(82vh, 760px);
  display: flex;
  align-items: center;
}

.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  /* An absolutely positioned <img> with top and bottom both set does NOT
     stretch the way a div does: a replaced element keeps its intrinsic height
     and the box is left over-constrained. The height has to be explicit. */
  height: 100%;
  /* 268 of 587 visible in the mock. Wider than this and the headline's middle
     line runs onto the photograph. */
  /* 268 of the 299 the photograph is laid out at in the mock, so about a
     tenth comes off the right and the pocket stays whole. */
  width: 50%;
  object-fit: cover;
  /* Anchored to the image's own left edge, as in the design: the card is
     narrower than the photograph, and everything it cannot fit comes off the
     right. Centring the crop instead eats into the pocket from both sides. */
  object-position: 0% 50%;
}

/* The nav sits UNDER the photo, as designed: the mark stays visible on the
   blue, and the pill's far cap reappears in the corner the photo rounds off. */
.navpill {
  position: absolute;
  z-index: 0;
  top: 3.4%;
  left: 3%;
  right: 3%;
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 10px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-primary);
  text-decoration: none;
}

.navpill svg,
.navpill img {
  height: clamp(26px, 2.4vw, 44px);
  width: auto;
  display: block;
}

.navpill .wordmark {
  font-size: clamp(15px, 1.5vw, 26px);
  font-weight: 800;
}

.navpill .tagline {
  font-size: clamp(10px, 0.9vw, 16px);
  color: var(--secondary);
  white-space: nowrap;
}

.hero-copy {
  position: relative;
  z-index: 1;
  /* 331 of 587 in the mock. Narrower than this and the middle line breaks,
     which turns a three line headline into four. */
  width: 50%;
  padding: 0 0 0 7%;
}

/* The headline arrives a line at a time. Three lines, three beats, and then
   it stops: the motion says "read this in order", which is the only thing it
   is allowed to say (ADR-0012 rule 3). */
.hero-copy h1 .line {
  display: block;
  animation: rise var(--t-entrance) var(--ease-out) both;
}

.hero-copy h1 .line:nth-child(1) {
  animation-delay: 120ms;
}
.hero-copy h1 .line:nth-child(2) {
  animation-delay: 180ms;
}
.hero-copy h1 .line:nth-child(3) {
  animation-delay: 240ms;
}

.hero-copy .lead {
  animation: rise var(--t-entrance) var(--ease-out) 300ms both;
}

.stores {
  animation: rise var(--t-entrance) var(--ease-out) 360ms both;
}

.navpill {
  animation: rise var(--t-entrance) var(--ease-out) 60ms both;
}

/* The photograph settles rather than arrives: a slow release from a slight
   push-in, which reads as the page coming to rest. */
.hero-photo {
  animation: settle 900ms var(--ease-out) both;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.badge {
  animation: pop var(--t-entrance) var(--ease-out) 480ms both;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.hero-copy h1 {
  /* 4.3vw is the mock's 4.95% of the card, less the gutter. Uncapped it
      would run away on an ultrawide, so it stops at 84px. */
  font-size: clamp(24px, 4.3vw, 84px);
  line-height: 0.93;
  letter-spacing: -0.015em;
  /* Bold, not the display token's extra bold: the mock is set in Inter Bold,
     and the heavier cut runs about five percent wider, which is the difference
     between the headline stopping at the photograph and running into it. */
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

.hero-copy .lead {
  font-size: clamp(14px, 1.7vw, 30px);
  line-height: 1.2;
  color: var(--on-surface-contrast);
  opacity: 0.92;
  margin-bottom: 1.4em;
}

/* Store buttons, the mock's Eerie black pills. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(12px, 1.4vw, 18px);
  min-height: clamp(40px, 4vw, 68px);
  border-radius: 12px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  transition:
    transform var(--t-press) var(--ease-out),
    background-color var(--t-press) var(--ease-out);
}

.store:hover {
  background: #2a2a2a;
}

.store:active {
  transform: scale(0.97);
}

.store svg {
  width: clamp(16px, 1.8vw, 22px);
  height: auto;
  flex: none;
}

.store span {
  display: block;
  line-height: 1.25;
}

.store .kicker {
  font-size: clamp(7px, 0.7vw, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.store .name {
  font-size: clamp(11px, 1.15vw, 19px);
  font-weight: 600;
}

/* The yellow badge, sitting in a notch at the bottom edge of the card. The
   notch is a page-coloured ring rather than a cut shape: one circle, no mask,
   and it stays right when the card's radius or the page colour changes. */
.badge {
  position: absolute;
  z-index: 2;
  left: 49%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(84px, 12.1%, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  box-shadow: 0 0 0 clamp(6px, 0.9vw, 11px) var(--background);
  transition: transform var(--t-base) var(--ease-out);
}

.badge:hover {
  transform: translateX(-50%) scale(1.06);
}

.badge:active {
  transform: translateX(-50%) scale(0.98);
}

/* Text on a circle, drawn rather than exported, so it stays sharp and can turn. */
.badge .ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: turn 18s linear infinite;
}

.badge .ring text {
  /* The label is fitted to the path with textLength rather than by guessing a
     size: the circle is 2 pi r = 239 units around, and a font whose metrics
     differ by a few percent is the difference between a ring and a ring that
     laps itself. */
  font-size: 7.5px;
  font-weight: 600;
  text-transform: uppercase;
  fill: currentColor;
}

.badge .play {
  width: 26%;
  height: auto;
  fill: currentColor;
}

@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}

/* Under 820px the hero stops being a two-column card: the copy takes the full
   width and the photograph becomes a band beneath it, which keeps the cards in
   the pocket readable instead of squeezing them into a sliver. */
@media (max-width: 820px) {
  .hero-card {
    aspect-ratio: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .navpill {
    position: static;
    margin: 3.5% 3.5% 0;
  }
  .hero-copy {
    width: 100%;
    padding: 8% 7% 9%;
    /* Source order puts the photograph first, because on the wide layout it is
       positioned rather than flowed. Stacked, the headline has to come first:
       a landing page that opens on a photograph has buried its own sentence. */
    order: 1;
  }
  .hero-photo {
    order: 2;
    position: static;
    width: 100%;
    height: clamp(220px, 52vw, 340px);
    object-position: 42% 40%;
  }
  .badge {
    left: auto;
    right: 7%;
    transform: none;
    animation-name: pop-plain;
  }
  @keyframes pop-plain {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .badge:hover {
    transform: scale(1.06);
  }
  .badge:active {
    transform: scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge .ring {
    animation: none;
  }
}