/* Riceball public site: the landing page and the legal and support pages.
   Built from the Riceball design system (DESIGN.md): Fredoka 700 for
   headlines, the system font for body copy, Sunshine Yellow for the one
   primary action and the logo, warm paper grounds carrying the doodle
   pattern, tint cards instead of borders, 12px radii, flat surfaces, and
   depth only on the primary button's solid bottom edge. Every colour has a
   light and a dark value and the page follows the device setting. */

:root {
  color-scheme: light dark;

  /* Fixed in both themes */
  --sunshine: #ffc700;
  --sunshine-deep: #e0a800;
  --on-sunshine: #3c3c3c;
  --grape: #a570ff;
  --bird-green: #58cc02;
  --sky-blue: #1cb0f6;
  --bubblegum: #cc348d;
  --on-bubblegum: #ffffff;

  /* Light */
  --ink: #3c3c3c;
  --ink-soft: #4b4b4b;
  --ink-muted: #6f6f6f;
  --surface: #ffffff;
  --paper: #fffdf6;
  --hairline: #e5e5e5;
  --outline: #ededed;
  --charcoal: #3c3c3c;
  --illo-panel: #ffffff;
  --grape-tint: #f1e8ff;
  --grape-highlight: #d6c2ff;
  --grape-deep: #6a2fd6;
  --green-tint: #e9f9dc;
  --green-highlight: #c3ef9f;
  --green-deep: #2f7300;
  --sky-tint: #ddf4ff;
  --sky-highlight: #c4ecff;
  --sky-deep: #075d88;
  --link-hover: #0b77ad;
  --bubblegum-tint: #fbe1ef;
  --sunshine-tint: #fff3c4;
  --doodle: url("/assets/doodle-tile.svg");
  --badge-soon-opacity: 0.35;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Codes the reader has to type: a 5 that can't pass for an S, a 0 that
     can't pass for an O. */
  --font-code: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-primary: 0 4px 0 var(--sunshine-deep);
  --column: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f6f2ea;
    --ink-soft: #dcd6cb;
    --ink-muted: #a9a296;
    --surface: #262320;
    --paper: #1c1a17;
    --hairline: #3a3631;
    --outline: #4a453e;
    --charcoal: #55504a;
    --illo-panel: #efe9de;
    --grape-tint: #2d2440;
    --grape-highlight: #4b3a73;
    --grape-deep: #c7a6ff;
    --green-tint: #1f2c17;
    --green-highlight: #3b5f22;
    --green-deep: #93dd57;
    --sky-tint: #142f3d;
    --sky-highlight: #1d4b63;
    --sky-deep: #7fcff6;
    --link-hover: #6fc8f6;
    --bubblegum-tint: #3d1f30;
    --sunshine-tint: #3a3212;
    --doodle: url("/assets/doodle-tile-dark.svg");
    --badge-soon-opacity: 0.45;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: var(--radius-sm); }

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

p { margin: 12px 0; }
p, li { color: var(--ink-soft); }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
strong { color: var(--ink); }

img { max-width: 100%; }

/* The doodle wallpaper: paper ground with the pattern tiled at 200px. */
.doodle-ground {
  position: relative;
  background-color: var(--paper);
  background-image: var(--doodle);
  background-size: 200px 200px;
}

.column {
  max-width: var(--column);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Card promo: the free-access code for visitors from the printed card.
   Sticky rather than fixed, so at the top of the page it takes its own row
   and pushes the header down instead of covering the logo and nav. It wears
   the Tag's bubblegum and on-bubblegum, the loudest pairing the system
   allows behind text (sunshine is never a background), and like the Tag it
   is the same in both themes. */

.promo {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  background: var(--bubblegum);
}
.promo p {
  max-width: var(--column);
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-bubblegum);
}
.promo-code {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-code);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: slashed-zero;
  /* One tap selects the whole code for copying. */
  -webkit-user-select: all;
  user-select: all;
}

/* Header */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--column);
  margin: 0 auto;
  padding: 20px 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--sunshine-deep);
}
.wordmark:hover { color: var(--sunshine-deep); }
.wordmark img { width: 36px; height: auto; }

.site-nav {
  display: flex;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}
.site-nav a:hover { color: var(--link-hover); }
/* On a white page the pills take a tint so they still read as pills. */
.plain .site-nav a { background: var(--sky-tint); }

/* Primary button: sunshine face, on-sunshine label, solid 4px bottom edge.
   Pressed, the face sinks onto the edge. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 18px 32px;
  border-radius: var(--radius-lg);
  background: var(--sunshine);
  color: var(--on-sunshine);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-primary);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
.cta:hover { color: var(--on-sunshine); }
.cta:active { transform: translateY(4px); box-shadow: none; }

.cta-note { font-size: 14px; color: var(--ink-muted); margin: 14px 0 0; }

/* Highlighter stroke behind one word of a heading. */
.hl { position: relative; display: inline-block; white-space: nowrap; z-index: 0; }
.hl::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: 4px;
  height: 34%;
  border-radius: var(--radius-md);
  transform: rotate(-1deg);
  z-index: -1;
  background: var(--green-tint);
}
.hl-sky::after { left: -10px; right: -10px; bottom: 6px; height: 38%; border-radius: var(--radius-lg); transform: rotate(-1.5deg); background: var(--sky-highlight); }
.hl-grape::after { background: var(--grape-highlight); }

/* Hero */

.hero {
  position: relative;
  max-width: var(--column);
  margin: 0 auto;
  padding: 40px 24px 104px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}

.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

.hero h1 {
  font-size: clamp(48px, 6.5vw, 80px);
  line-height: 1.05;
}

.hero .lede {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 28px 0 32px;
  max-width: 30ch;
  text-wrap: pretty;
}

/* Feature list: icon chips on tints, labels, in a surface panel. */
.features {
  list-style: none;
  padding: 16px;
  margin: 36px 0 0;
  display: grid;
  gap: 12px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.features li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.chip {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  flex: none;
}
.chip svg { stroke: currentColor; }
.chip-grape { background: var(--grape-tint); color: var(--grape-deep); }
.chip-green { background: var(--green-tint); color: var(--green-deep); }
.chip-sky { background: var(--sky-tint); color: var(--sky-deep); }

/* Rai on a sunshine halo with the cast on accent discs. */
.hero-art { display: flex; justify-content: center; }
.cluster { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1 / 1; }
.cluster .halo { position: absolute; inset: 8%; border-radius: 50%; background: var(--sunshine-tint); }
.cluster .halo-inner { position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; border-radius: 50%; background: var(--sunshine); transform: translate(-50%, -50%); }
.cluster .rai { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); }
.disc {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.disc img { width: 70%; height: auto; transform: translateY(4%); }
.disc-sky { background: var(--sky-blue); }
.disc-pink { background: var(--bubblegum); }
.disc-green { background: var(--bird-green); }
.disc-grape { background: var(--grape); }
.disc-ink { background: var(--charcoal); }
.disc-white { background: var(--surface); }

/* How it works */

.how {
  max-width: var(--column);
  margin: 0 auto;
  padding: 88px 24px 104px;
}
.how h2 {
  font-size: clamp(32px, 4vw, 44px);
  margin: 0 0 36px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.step {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 28px 28px 150px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.step .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
}
.step h3 { font-size: 22px; line-height: 1.25; margin: 4px 0 0; }
.step p { margin: 0; font-size: 15.5px; color: var(--ink); }
.step-grape { background: var(--grape-tint); } .step-grape .n { color: var(--grape-deep); }
.step-green { background: var(--green-tint); } .step-green .n { color: var(--green-deep); }
.step-sky { background: var(--sky-tint); } .step-sky .n { color: var(--sky-deep); }
.step .art { position: absolute; width: 220px; height: 140px; }
.step .cast { position: absolute; height: auto; }

/* Spot illustration fills, so the art reads the same in both themes. */
.i-panel { fill: var(--illo-panel); }
.i-grape { fill: var(--grape); }
.i-grape-hl { fill: var(--grape-highlight); }
.i-green { fill: var(--bird-green); }
.i-sky { fill: var(--sky-blue); }
.i-pink { fill: var(--bubblegum); }
.i-pink-tint { fill: var(--bubblegum-tint); }
.i-ink { fill: var(--charcoal); }
.s-panel { stroke: var(--illo-panel); }
.s-grape { stroke: var(--grape); }
.s-grape-hl { stroke: var(--grape-highlight); }
.s-green { stroke: var(--bird-green); }
.s-sky { stroke: var(--sky-blue); }
.s-pink { stroke: var(--bubblegum); }

/* Download panel */

.download {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 24px 104px;
}
.download-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--grape-tint);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 40px;
  align-items: center;
}
.download-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.download h2 {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.1;
  text-wrap: balance;
}
.download p { margin: 0; font-size: 19px; color: var(--ink); max-width: 32ch; }

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
.badge { display: flex; }
.badge img { display: block; height: 60px; width: auto; }
.badge-soon { position: relative; display: flex; }
.badge-soon > span:first-child { display: flex; opacity: var(--badge-soon-opacity); cursor: not-allowed; }
.tag {
  position: absolute;
  top: -14px;
  right: -14px;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  background: var(--bubblegum);
  color: var(--on-bubblegum);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(5deg);
}

.download-art { display: flex; justify-content: center; }
.crowd { position: relative; width: 100%; max-width: 440px; aspect-ratio: 11 / 7; }

/* Footer */

.site-footer {
  position: relative;
  max-width: var(--column);
  margin: 0 auto;
  padding: 32px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.site-footer .mark { display: flex; align-items: center; gap: 10px; }
.site-footer .mark img { width: 28px; height: auto; }
.site-footer nav { display: flex; gap: 24px; font-weight: 600; }

/* Legal and support pages */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}
.doc h1 { font-size: clamp(36px, 5vw, 48px); }
.doc h2 { font-size: 28px; margin-top: 40px; }
.doc h3 { font-size: 20px; margin-top: 28px; }
.doc a { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--ink); }
.doc .meta { color: var(--ink-muted); font-size: 15px; margin: 8px 0 32px; }
.doc .summary {
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--sky-tint);
  margin: 24px 0 8px;
}
.doc .summary p { margin: 6px 0; color: var(--ink); }
.doc table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--hairline); }
.doc th { color: var(--ink); font-weight: 700; }

/* Phones: display styles step down one, grids stack, the art leads. */
@media (max-width: 820px) {
  .site-header { padding: 16px; }
  .wordmark { font-size: 22px; }
  .wordmark img { width: 32px; }
  .hero { padding: 8px 16px 72px; gap: 28px; }
  .hero-art { order: -1; }
  .cluster { max-width: 360px; }
  .hero .lede { font-size: 19px; margin: 20px 0 28px; max-width: none; }
  .features { margin-top: 28px; width: 100%; }
  .how { padding: 64px 16px 72px; }
  .how h2 { margin-bottom: 24px; }
  .download { padding: 0 16px 72px; }
  .download-panel { padding: 40px 24px; }
  .download p { font-size: 17px; }
  .site-footer { padding: 28px 16px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}