/* Find the Pivot -- the landing page.
 *
 * Tokens come from brand.css. The page has one job: a doctor who was sent a
 * link should understand what this is, believe it was made carefully, and
 * reach a case in one tap.
 */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem;
}

section { padding: 3.5rem 0; }
section + section { border-top: 1px solid var(--line); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--brand);
  margin: 0 0 0.6rem;
}
.section-lead {
  margin: 0 0 2rem;
  max-width: 62ch;
  color: var(--ink-soft);
}

/* ---------- hero ---------- */

.hero { padding: 3rem 0 3.5rem; }
.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; }
  .hero { padding: 4.5rem 0 4rem; }
}

.hero h1 {
  font-family: var(--font-display);
  /* clamp rather than a breakpoint: the headline has to survive 320px
     without hyphenating into soup. */
  font-size: clamp(1.95rem, 5.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin: 0 0 1rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-lead {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 1.75rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pivot-ink);
  background: var(--pivot-bg);
  border: 1px solid var(--pivot-line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.1rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.cta-row .btn { flex: 1 1 100%; }
@media (min-width: 560px) {
  .cta-row .btn { flex: 0 1 auto; }
}

.hero-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- the demo card ---------- */

/* A still of the real interface rather than a stock photograph: the whole
   pitch is the interaction, so the page shows it. Inert by design -- it is
   an illustration, and the working version is one tap away. */
.demo {
  /* Set dir="ltr" on the element too -- this only keeps the internal
     alignment honest if the flow direction is LTR as well. */
  text-align: start;
  /* The animated pointer is positioned against this box. */
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 1.25rem;
}
.demo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.demo-prompt {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-inline-start: 3px solid var(--accent);
  padding: 0.65rem 0.85rem;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 1rem;
}
.demo-stem {
  font-size: 1rem;
  line-height: 2.1;
  margin: 0 0 1rem;
}
.demo-stem mark {
  padding: 0.35rem 0.3rem;
  border-radius: 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: transparent;
  color: inherit;
}
.demo-stem mark.pivot { background: var(--pivot-bg); color: var(--pivot-ink); font-weight: 600; }
.demo-stem mark.contributory { background: var(--contrib-bg); color: var(--contrib-ink); }
.demo-stem mark.noise { background: var(--noise-bg); color: var(--noise-ink); }
.demo-feedback {
  background: var(--pivot-bg);
  color: var(--pivot-ink);
  border: 1px solid var(--pivot-line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  margin: 0;
}
.demo-feedback .tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.8;
  margin-inline-end: 0.4rem;
}
/* ---------- the demo panel, playing ----------
   The panel ships solved: all three marks, the pivot feedback. That is what a
   reader with JavaScript blocked sees, and it is the honest still of the
   product. src/landing.js then adds .is-animated and rewinds it, so the cycle
   is an enhancement on top of a correct page rather than something the markup
   depends on.

   Nothing here is exposed to assistive tech: the panel is role="img" with a
   fixed aria-label and its contents are aria-hidden, so a screen reader keeps
   getting one static description no matter which beat is on screen. */

.demo.is-animated .demo-stem mark {
  background: transparent;
  color: inherit;
  font-weight: inherit;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.demo.is-animated.show-noise .demo-stem mark.noise {
  background: var(--noise-bg); color: var(--noise-ink);
}
.demo.is-animated.show-contributory .demo-stem mark.contributory {
  background: var(--contrib-bg); color: var(--contrib-ink);
}
.demo.is-animated.show-pivot .demo-stem mark.pivot {
  background: var(--pivot-bg); color: var(--pivot-ink); font-weight: 600;
}

/* Only one line shows at a time, but all three are laid into the same grid
   cell, so the box is always as tall as the longest of them and the panel has
   exactly one height for its whole life.

   The stacking is unconditional, not something the animation switches on. When
   it was conditional the box grew the moment the cycle started -- on a desktop
   that is immediately after load, which is the worst possible time to move the
   page. The cost is a little empty space under the shortest line in the static
   panel, which is the cheaper of the two. */
.demo-feedback { display: grid; }
.demo-fb {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
}
.demo-fb[data-role="pivot"] { opacity: 1; visibility: visible; }

.demo.is-animated .demo-feedback { transition: background-color 0.35s ease, border-color 0.35s ease; }
.demo.is-animated .demo-fb { transition: opacity 0.3s ease; }
.demo.is-animated .demo-fb[data-role="pivot"] { opacity: 0; visibility: hidden; }
.demo.is-animated .demo-fb.is-shown { opacity: 1; visibility: visible; }

/* Before the first tap there is no feedback yet -- the box keeps its space so
   nothing moves, but shows neither colour nor border. */
.demo.is-animated .demo-feedback {
  background: transparent; color: var(--ink); border-color: transparent;
}
.demo.is-animated.fb-noise .demo-feedback {
  background: var(--noise-bg); color: var(--noise-ink); border-color: var(--noise-line);
}
.demo.is-animated.fb-contributory .demo-feedback {
  background: var(--contrib-bg); color: var(--contrib-ink); border-color: var(--contrib-line);
}
.demo.is-animated.fb-pivot .demo-feedback {
  background: var(--pivot-bg); color: var(--pivot-ink); border-color: var(--pivot-line);
}

/* ---------- the demo pointer ----------
   A panel that only recolours itself is easy to scroll past without noticing
   it is playing at all: the marks arrive with nothing visibly causing them.
   This is the cause -- a small pointer that travels to a finding and taps it,
   the same gesture the reader is being asked to make. It idles with a slow
   pulse from the first frame, so the panel reads as live even in the glance
   before the first move.

   src/landing.js creates it, so a page with the script blocked keeps the
   solved still and never shows a pointer with nothing to point at. Travel
   duration is set by the script through --demo-travel, so the two cannot
   drift apart. */

.demo-cursor {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 20px;
  height: 20px;
  /* Logical, to match inset-inline-start: the panel is pinned LTR today, and
     a physical margin here would put the pointer half its own width off its
     target the day anything about that changes. */
  margin-block-start: -10px;
  margin-inline-start: -10px;
  pointer-events: none;
  z-index: 2;
  transition: transform var(--demo-travel, 520ms) cubic-bezier(0.32, 0.06, 0.2, 1);
  will-change: transform;
}
/* The dot is the pseudo-element rather than the box itself: the box owns the
   travel transform, and a scale on the same property would fight it. */
.demo-cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 8px rgba(15, 29, 46, 0.25);
  transition: transform 0.14s ease;
}
.demo-cursor::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  transform: scale(0.6);
}
.demo-cursor.is-idle::before { animation: demo-cursor-idle 1.7s ease-in-out infinite; }
.demo-cursor.is-press::before { transform: scale(0.66); }
.demo-cursor.is-press::after { animation: demo-cursor-ripple 500ms ease-out; }

@keyframes demo-cursor-idle {
  50% { transform: scale(1.18); }
}
@keyframes demo-cursor-ripple {
  from { opacity: 0.8; transform: scale(0.6); }
  to   { opacity: 0;   transform: scale(2.1); }
}

.demo-caption {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
  margin: 0.75rem 0 0;
}

/* ---------- counted facts ---------- */

.facts-band {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.facts {
  display: grid;
  /* Five figures since Batch 03 opened. Two-up on a phone, with the odd one
     out spanning the row so it does not sit alone in a half-width cell; three
     across once there is room, and all five in a row on a wide screen. Five
     columns at 620px would put each number over a label wider than it. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 1.75rem 1rem;
  /* auto, not 0: .facts is also .wrap, and a bare 0 here overrode the
     wrap's centring, so the row sat against the left edge of a wide screen. */
  margin: 0 auto;
}
.facts > .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 620px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts > .fact:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(5, 1fr); }
}
.fact {
  text-align: center;
  padding: 0.5rem;
}
.fact dt {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 600;
  color: var(--brand);
  line-height: 1.1;
}
.fact dd {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- announcement ribbon ---------- */

/* A diagonal band across the top corner of the hero. The corner box clips the
   band to a triangle and ignores pointer events, so the page underneath stays
   tappable; only the band is the link, and it is at least 44px deep. The
   corner is logical (inset-inline-end), so the Arabic page carries it top
   left, where a right-to-left reader starts. Colours are the --accent /
   --on-accent pair .btn-primary uses, which the browser suite holds above
   4.5:1 in both schemes. */
.hero { position: relative; }
.ribbon-corner {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 170px;
  height: 170px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
/* The band is centred on the corner diagonal, 54px in from each edge. Its
   colours are fixed rather than tokens so it reads the same in both schemes:
   a magenta-to-orange run whose lightest stop (#c2410c) still holds white
   text above 5:1. */
.ribbon {
  pointer-events: auto;
  position: absolute;
  top: 25px;
  right: -76px;
  width: 260px;
  min-height: 58px;
  transform: rotate(45deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.35rem 0;
  background: linear-gradient(90deg, #9d174d 0%, #be185d 45%, #c2410c 100%);
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  border-top: 2px dashed rgba(255, 255, 255, 0.55);
  border-bottom: 2px dashed rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 16px rgba(157, 23, 77, 0.35);
}
[dir="rtl"] .ribbon {
  right: auto;
  left: -76px;
  transform: rotate(-45deg);
  background: linear-gradient(270deg, #9d174d 0%, #be185d 45%, #c2410c 100%);
}
.ribbon:hover { filter: brightness(1.08); }
.ribbon:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ribbon-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fde68a;
}
.ribbon-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .ribbon-corner { width: 230px; height: 230px; }
  /* centred 74px in from each edge */
  .ribbon { top: 36px; right: -96px; width: 340px; min-height: 76px; }
  [dir="rtl"] .ribbon { left: -96px; }
  .ribbon-kicker { font-size: 0.82rem; }
  .ribbon-title { font-size: 1.5rem; }
}

/* ---------- state cards ---------- */

.cards {
  display: grid;
  gap: 1rem;
}
@media (min-width: 760px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-2 { grid-template-columns: repeat(2, 1fr); }
}

.state-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.15rem 1.25rem;
  border-top: 4px solid var(--line);
}
.state-card.pivot { border-top-color: var(--pivot-line); }
.state-card.contributory { border-top-color: var(--contrib-line); }
.state-card.noise { border-top-color: var(--noise-line); }
.state-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.state-card.pivot h3 { color: var(--pivot-ink); }
.state-card.contributory h3 { color: var(--contrib-ink); }
.state-card.noise h3 { color: var(--noise-ink); }
.state-card p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- batch cards ---------- */

.batch {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.batch.featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}
.batch-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.batch-tag.muted { color: var(--ink-faint); }

/* "NEW" sits beside the batch tag rather than replacing it, so the card still
   says which batch it is. --accent/--on-accent is the same pairing .btn-primary
   uses, which the browser suite already holds above 4.5:1 in both schemes.
   Logical margin, so it lands on the correct side once ar.html mirrors the
   layout -- margin-left here would sit on the wrong side of the tag in RTL. */
.batch-tag .new {
  display: inline-block;
  margin-inline-start: 0.45rem;
  padding: 0.08em 0.5em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.92em;
}
.batch h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--brand);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.batch p { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; }
.batch ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.batch li { display: flex; gap: 0.55rem; align-items: flex-start; }
.batch li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--accent);
}
.batch .btn { margin-top: auto; }
.batch.upcoming { background: transparent; border-style: dashed; box-shadow: none; }
.batch.upcoming h3 { color: var(--ink-soft); }

/* Sits where the button sits on an open batch, so the two cards still line
   up along the bottom -- and reads as a state, not as something to press. */
.batch .batch-status {
  margin: auto 0 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.15rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---------- steps ---------- */

.steps {
  display: grid;
  gap: 1.5rem;
  counter-reset: step;
}
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .steps-4 { grid-template-columns: repeat(2, 1fr); }
  /* Five does not divide into four, so the Arabic page takes a 3+2 at the
     widest rather than stranding its fifth step alone under a row of four. */
  .steps-5 { grid-template-columns: repeat(2, 1fr); }
}
.step { counter-increment: step; }
.step h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  color: var(--brand);
}
.step h3::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 700;
}
.step p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- feedback band ---------- */

.band {
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
}
.band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin: 0 0 0.6rem;
  color: var(--on-brand);
}
.band p {
  margin: 0 auto 1.5rem;
  max-width: 52ch;
  color: color-mix(in srgb, var(--on-brand) 82%, var(--brand));
}
.band .btn-secondary {
  background: transparent;
  color: var(--on-brand);
  border-color: color-mix(in srgb, var(--on-brand) 45%, var(--brand));
}
.band .btn-secondary:hover { border-color: var(--on-brand); }
.band .btn:focus-visible { outline-color: var(--on-brand); }

@media (min-width: 1000px) {
  .steps-4 { grid-template-columns: repeat(4, 1fr); }
  .steps-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- inline note ---------- */

/* Not a callout with a coloured bar: this is a fact the reader has to take
   in, so it reads as a paragraph on a quieter surface. */
.note {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
  max-width: 68ch;
}
.note strong { color: var(--ink); }