/* EraCam storefront — one stylesheet.
   Tokens mirror EraCamDesign / DESIGN.md §2–§3. The site is the loud zone. */

:root {
  --blue:   #1B36E8;
  --red:    #E5231B;
  --yellow: #F7D308;
  --cream:  #FDF8E7;
  --ink:    #0A0A0A;

  --display: "Archivo Black", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Space Mono", "SFMono-Regular", Menlo, monospace;

  --grain-opacity: 0.07;
}

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---- Print grit: fine grain over everything (DESIGN.md §5) ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---- Page frame: header / hero / footer, like the reference ---- */
.page {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 24px;
}

.wordmark {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.top .tag {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 24px 32px;
}

/* Headline: the icon and the wordmark, the biggest thing on the screen.
   Icon is a sticker cut-out (cream keyline, off-axis); wordmark is ink Archivo Black
   with the 2px red misregistration ghost from DESIGN.md §5. */
h1.brand {
  --size: clamp(40px, 5.4vw, 80px);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.18em 0.22em;
  font-size: var(--size);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.sticker {
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.28em;
  border: 0.06em solid var(--cream);
  transform: rotate(-6deg);
  display: block;
  flex: none;
}

.wordmark-hero {
  display: block;
  text-shadow: 0.015em 0.015em 0 var(--red);
}

/* Subline. Blue on yellow measures 5.2:1, AA at any size; DESIGN.md §2 keeps blue to
   short emphasis on light grounds and this is one line at 24px, per Jacob's call. */
.sub {
  margin: 28px 0 0;
  max-width: 44ch;
  color: var(--blue);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.2;
  text-wrap: balance;
}

/* Mono readout line (policy mastheads). Values only, never a sentence. */
.spec {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Call to action ---- */
.cta {
  position: relative;
  margin-top: 30px;
  display: inline-block;
}

/* Stand-in for Apple's badge. Swap in the official artwork from
   developer.apple.com/app-store/marketing/guidelines once the listing exists. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px 0 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  line-height: 1;
  white-space: nowrap;
}

.badge[aria-disabled="true"] { cursor: default; }

.badge svg { width: 26px; height: 26px; fill: #fff; flex: none; }

.badge small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}

.badge strong {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* "Coming soon" sticker on the badge. Yellow on ink is 14.3:1, so it can be this small;
   cream on red would fail at this size (large/bold only, DESIGN.md §2). */
.soon {
  position: absolute;
  top: -14px;
  right: -22px;
  transform: rotate(6deg);
  padding: 5px 9px;
  background: var(--ink);
  color: var(--yellow);
  border: 3px solid var(--cream);
  font-family: var(--display);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---- Social row: blue discs, cream glyphs (cream on blue, 7.1:1) ---- */
.social {
  display: flex;
  gap: 16px;
  margin-top: 26px;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--cream);
  transition: transform 120ms ease;
}

.social a:hover, .social a:focus-visible { transform: rotate(-8deg) scale(1.06); outline: none; }

.social svg { width: 22px; height: 22px; fill: currentColor; }

/* ---- Footer ---- */
.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  align-items: center;
  padding: 18px 24px 24px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .sep { opacity: 0.5; }

/* ---- Graphic kit: red stars and sparkles, off-axis, some cropped by the edge ---- */
.kit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.kit svg {
  position: absolute;
  fill: var(--red);
  width: calc(var(--s) * var(--k, 1));
  height: calc(var(--s) * var(--k, 1));
  transform: rotate(var(--r, 0deg));
}

.kit .twinkle { animation: twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }

@keyframes twinkle {
  0%, 100% { transform: rotate(var(--r, 0deg)) scale(1); }
  50%      { transform: rotate(calc(var(--r, 0deg) + 12deg)) scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .kit .twinkle { animation: none; }
  .social a { transition: none; }
}

@media (max-width: 640px) {
  /* Phones: scale the kit down and drop the pieces that sit inside the text column. */
  .kit { --k: 0.62; }
  .kit .mid { display: none; }
  .sub { margin-top: 20px; }
  .soon { right: -10px; }
}

/* =====================================================================
   Policy pages. Same zone, but a document: yellow masthead, cream body.
   ===================================================================== */

.doc-head {
  position: relative;
  z-index: 2;
  padding: 40px 24px 36px;
  max-width: 760px;
  margin: 0 auto;
}

.doc-head h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 8vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 0 var(--red);
}

.doc-head .spec { margin-top: 14px; }

.doc-body {
  position: relative;
  z-index: 2;
  background: var(--cream);
}

.doc-body .inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}

.doc-body h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 30px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}

.doc-body h2:first-child { margin-top: 0; }

.doc-body p, .doc-body li { margin: 0 0 14px; }
.doc-body ul { padding-left: 22px; }
.doc-body .note {
  font-size: 14px;
  line-height: 20px;
  padding: 14px 16px;
  border: 3px solid var(--ink);
  margin: 0 0 24px;
}

.doc-body .lead { font-size: 20px; line-height: 28px; }

.doc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 15px;
  line-height: 21px;
}

.doc-body th, .doc-body td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-bottom: 2px solid var(--ink);
}

.doc-body th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-body code {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.doc-body .table-wrap { overflow-x: auto; }

.doc-foot { background: var(--yellow); }