/*
  Aalixer Screen Select & Share — aalixer.com/screencapture/
  Shared by index.html, privacy-policy.html and terms.html.

  The palette is the app's own: the near-navy the main screen is painted in, the raised
  card colour above it, and the one blue everything interactive uses. The page and the
  store listing should read as the same object.

  The one ornament is the marching-ants rule: a dashed line, which is what a selection
  looks like. It does all the section dividing, and nothing else does any.
*/

:root {
  --ink:       #12121f;
  --surface:   #1a1a2e;
  --surface-2: #16213e;
  --blue:      #4a90d9;
  --blue-hi:   #7cb4ec;
  --blue-dim:  #2c4a6e;
  --paper:     #e8ecf2;
  --muted:     #8b95a7;

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

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

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  line-height: 1.7;
  margin: 0;
}

/* ── Type ───────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-hi); }

:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
}

/* An eyebrow is a label, so it is set like one: letterspaced caps, never a heading. */
.eyebrow {
  color: var(--blue);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

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

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

.band { padding-block: clamp(3.5rem, 8vw, 6rem); }

/*
  The marching-ants rule — a selection marquee flattened into a divider. Two dashed
  gradients offset from each other so the dashes read as a moving edge rather than a
  hyphen row.
*/
.rule {
  background-image:
    repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--blue-dim) 8px 16px);
  background-position: 0 4px, 0 8px;
  background-repeat: repeat-x, repeat-x;
  background-size: 100% 2px, 100% 2px;
  border: 0;
  height: 12px;
  margin: 0;
  opacity: 0.7;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }

.hero img {
  border: 1px solid var(--blue-dim);
  display: block;
  height: auto;
  width: 100%;
}

.hero-copy { padding-block: clamp(2.5rem, 6vw, 4rem); }

.hero-copy h1 {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
  margin-bottom: 1.25rem;
  max-width: 18ch;
}

.lede {
  color: var(--paper);
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.3rem);
  margin: 0 0 2rem;
  max-width: 54ch;
}

.cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.badge {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--ink);
  display: inline-block;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
}

.badge:hover { background: var(--blue-hi); border-color: var(--blue-hi); color: var(--ink); }

.cta-note { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ── Section lede ───────────────────────────────────────────────────────── */

.section-lede {
  color: var(--paper);
  font-size: 1.05rem;
  margin: 0;
  max-width: 56ch;
}

/* ── Steps ──────────────────────────────────────────────────────────────── */

.steps {
  counter-reset: step;
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.steps li { counter-increment: step; }

/* Crop corner: two rules meeting, the mark you drag from. */
.steps li::before {
  border-left: 2px solid var(--blue);
  border-top: 2px solid var(--blue);
  content: "";
  display: block;
  height: 14px;
  margin-bottom: 0.9rem;
  width: 14px;
}

.steps h3 {
  color: var(--blue-hi);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.steps p { color: var(--muted); margin: 0; }

/* ── Feature list ───────────────────────────────────────────────────────── */

.features {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.features li { border-top: 1px solid var(--blue-dim); padding-top: 0.9rem; }

.features strong {
  color: var(--blue-hi);
  display: block;
  font-weight: 700;
}

.features span { color: var(--muted); font-size: 0.94rem; }

/* ── Privacy pledge ─────────────────────────────────────────────────────── */

.pledge { background: var(--surface); }

.pledge h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); margin-bottom: 1.25rem; }

.pledge p { color: var(--paper); margin: 0 0 1rem; max-width: 58ch; }

/* ── Permission notice ──────────────────────────────────────────────────── */

/*
  The accessibility permission is the app's biggest ask and the thing a cautious buyer
  will want answered before they pay, so it gets a panel of its own rather than a line in
  a list. It says the same thing as the Privacy Policy section of the same name.
*/
.notice {
  background: var(--surface-2);
  border-left: 3px solid var(--blue);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.notice h2 { font-size: 1.35rem; margin-bottom: 1rem; }

.notice p { margin: 0 0 1rem; }

.notice p:last-child { margin-bottom: 0; }

/* ── Legal pages ────────────────────────────────────────────────────────── */

.legal { padding-block: clamp(3rem, 7vw, 5rem); }

.legal h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); margin-bottom: 0.4rem; }

.legal h2 {
  color: var(--blue-hi);
  font-size: 1.15rem;
  margin: 2.5rem 0 0.6rem;
}

.legal p { margin: 0 0 1rem; }

.meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 2.5rem; }

.back {
  color: var(--muted);
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer { padding-block: 2.5rem 3.5rem; }

.foot-inner {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}

.foot-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }

footer small { color: var(--muted); }

/* ── Motion ─────────────────────────────────────────────────────────────── */

.rise {
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 22%;
}

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

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}