/* Word Nice site styles. The sea-otter palette from the app's WordNiceTheme:
   Cream ground, Blush and Cloud for soft surfaces, Sunset Pink and Sky Blue as
   the key colors, with a deepened blue for text-size accents. Same plain,
   compact bones as the Word Vice site, just softer. */

:root {
  --bg: #FFF9F1;       /* Cream */
  --blush: #FFE6EE;
  --cloud: #EAF6FF;
  --raised: #FFFDFA;
  --ink: #1F2D2E;
  --muted: #52636A;
  --accent: #3A7FB0;   /* Sky, deepened for text */
  --sunset: #F5B1C2;
  --sky: #A9D0F0;
  --happy: #DDEFFC;
  --line: #F1E4D6;
  --rounded: ui-rounded, "SF Pro Rounded", "Avenir Next", -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Blush at the top fading through Cloud to Cream, like the app's background. */
body {
  margin: 0;
  font-family: var(--rounded);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg) linear-gradient(var(--blush), var(--cloud) 420px, var(--bg) 900px) no-repeat;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 36px;
}

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

.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding-top: 40px;
}

/* A text wordmark for now, matching the app's two-tone title. */
.brand {
  margin: 0;
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.brand span { color: var(--accent); }

.kicker {
  margin: 12px 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.tagline { margin: 0; max-width: 30em; color: var(--muted); }

.cta {
  display: inline-block;
  max-width: 100%;
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* Apple's official badge artwork. Do not restyle or recolor it. */
.app-store-badge { display: inline-block; }
.app-store-badge img { width: 190px; }

/* Pre-launch: shown but not a link. When the app ships, drop .is-pending and
   wrap the badge in an <a href>. */
.app-store-badge.is-pending img { opacity: 0.45; filter: saturate(0.4); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.coming { margin: 14px 0 0; font-size: 14px; }
.meta { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- hero art: otter over a sample board ---------- */

.hero-art { margin: 0; width: 300px; }

.otter { width: 190px; margin: 0 auto -18px; position: relative; }

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  background: var(--raised);
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(31, 45, 46, 0.06), 0 18px 40px rgba(58, 127, 176, 0.14);
}

.board span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 28px;
  font-weight: 800;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.board .happy { background: var(--happy); border-color: var(--sky); }

figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ---------- sections ---------- */

section { padding: 56px 0 6px; }

h2 {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
}

.card .glyph { font-size: 24px; line-height: 1; margin-bottom: 8px; }
.card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- footer ---------- */

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.footer-mark { text-align: center; }

.footer-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.footer-badge:hover { text-decoration: none; }

/* The exported icon is a full square, so it takes the iOS corner here. */
.footer-badge img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(31, 45, 46, 0.14), 0 6px 14px rgba(58, 127, 176, 0.16);
}

.footer-badge span { font-size: 14px; }

.footer-links { text-align: right; }
.footer-links a { color: var(--muted); }

@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
  .hero-art { width: min(280px, 100%); margin: 0 auto; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .footer-links { text-align: center; }
}