/*
  Circles landing page, Blacktop design.
  Dark only by design: every surface paints its own background and colour,
  so the page never borrows a light theme from the browser or a host frame.
  Sizes follow the design canvas (Circles Blacktop.dc.html, landing desktop
  lines 110-175 at 1200px, mobile lines 177-204 at 402px).
*/

:root {
  color-scheme: dark;

  --bg: #0e0f11;
  --card: #17191c;
  --line: #24272b;
  --raised: #22262a;
  --tile: #2a2e33;
  --avatar-ring: #2e3339;
  --text: #f2f3f4;
  --soft: #c9cdd1;
  --muted: #8e949b;
  --dim: #3a3f45;
  --lime: #6fdb55;
  --lime-10: rgba(111, 219, 85, 0.1);
  --on-lime: #0e0f11;
  --danger: #e5484d;
  /* Dark text on the danger fill: 4.9:1. White on it is only 3.9:1. */
  --on-danger: #0e0f11;
  --hatch: repeating-linear-gradient(135deg, #12141780 0 14px, #0e0f11 14px 28px);

  --font-display: "Oswald", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;

  --gutter: 48px;
  --phone-scale: 0.7;
}

@supports (color: oklch(0.8 0.2 140)) {
  :root { --lime: oklch(0.8 0.2 140); --lime-10: oklch(0.8 0.2 140 / 0.1); }
}

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

html {
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  /* The design never sets a base line-height, so text uses the font's own (normal). */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
/* Lists lose their markers by design. WebKit also drops the list role when a
   list has none, so every list in index.html carries role="list" to keep it;
   the legal pages get real markers back further down and need nothing. */
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

/* ---------- Utilities ---------- */

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

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

.show-sm { display: none; }

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--on-lime);
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.cta-band :focus-visible { outline-color: var(--on-lime); }
/* <main tabindex="-1"> exists so the skip link moves focus in WebKit. It is not
   a control, so it takes no focus ring; the landmark it jumps to is the cue. */
#main:focus, #main:focus-visible { outline: none; }

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: 8px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
}

.check { color: inherit; margin-right: 0.35em; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
a.btn { cursor: pointer; }
.btn--lime { background: var(--lime); color: var(--on-lime); }
.btn--ghost { border: 1px solid var(--dim); color: var(--soft); font-weight: 600; }
.btn--dark { background: var(--bg); color: var(--text); }
.btn--lg { padding: 16px 24px; font-size: 16px; }

@media (prefers-reduced-motion: no-preference) {
  a.btn { transition: filter 0.15s ease, transform 0.15s ease; }
  a.btn:hover { filter: brightness(1.08); }
  a.btn:active { transform: translateY(1px); }
  .nav-list a, .footer-links a, .lang-switch a { transition: color 0.15s ease; }
}

/* ---------- Coming soon ---------- */

/* Nothing on the site can be installed yet, so every call to action is a
   <span> saying so. A span is not focusable and cannot be pressed, and until
   these looked like buttons the page offered four things that invited a click
   and answered none of them. They are information, so they are drawn the way
   the rest of the site draws information: the lime mark that states the
   current state of a thing, as on 会場確保済み in a listing or 参加 on a
   roster row. No radius, no frame, no button padding, no button weight —
   a marked line of text, at the size of the text around it.

   Launch day swaps each one back for the anchor its data-replace-before-launch
   names, which brings .btn and its positioning class with it; .nav-cta,
   .plan-cta and .cta-btn below are kept for exactly that. */

.soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--soft);
}

/* The mark. 6px reads as a status dot rather than a list bullet. flex: none
   because a fixed-size flex item still collapses on a tight row otherwise —
   the header at 360px is exactly that row. */
.soon::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 22px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--on-lime);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--soft);
}
.nav-list { display: flex; gap: 28px; }
.nav-list a:hover { color: var(--text); }

.nav-cta { padding: 10px 16px; border-radius: 8px; font-size: 14px; }

/* The header status takes the nav row's own size and never wraps: it shares
   that row with the language switch, and at 402px the two of them plus the
   brand are the whole width. */
.nav-right .soon { font-size: inherit; white-space: nowrap; }

.lang-switch { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.lang-switch a { color: var(--muted); white-space: nowrap; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="true"] { color: var(--text); font-weight: 600; }
.lang-sep { color: var(--dim); }

/* ---------- Hero ---------- */

.hero-bg { background: var(--hatch); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 56px;
}

.hero-copy { min-width: 0; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 88px;
  line-height: 0.92;
  text-transform: uppercase;
  margin-top: 16px;
}

.hero-lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--soft);
  margin-top: 24px;
  max-width: 520px;
}

/* Row gap 12px as in the design; the column gap is wider so the two statuses
   inside read as two statements rather than as a pair of chips. */
.hero-actions { display: flex; gap: 12px 28px; margin-top: 32px; flex-wrap: wrap; }
.hero-actions .soon { font-size: 16px; }

.hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 40px;
  font-size: 13px;
  color: var(--muted);
}

.hero-art {
  position: relative;
  height: calc(600px * var(--phone-scale) / 0.7);
}

.hero-games { display: none; }

/* ---------- Phone mockups (decorative) ---------- */

.phone {
  position: absolute;
  width: calc(402px * var(--phone-scale));
  height: calc(874px * var(--phone-scale));
  border-radius: calc(48px * var(--phone-scale));
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  background: var(--bg);
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.phone--home { left: 0; top: calc(40px * var(--phone-scale) / 0.7); }
.phone--find { right: 0; top: 0; }

.phone-screen {
  position: relative;
  width: 402px;
  height: 874px;
  transform: scale(var(--phone-scale));
  transform-origin: top left;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
}

.phone-status {
  position: absolute;
  inset: 0 0 auto 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 34px 0 48px;
  font-size: 17px;
  font-weight: 600;
  z-index: 1;
}
.phone-island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 124px;
  height: 36px;
  margin-left: -62px;
  border-radius: 18px;
  background: #000;
}
.phone-icons { display: flex; align-items: center; gap: 6px; }
.phone-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 140px;
  height: 5px;
  margin-left: -70px;
  border-radius: 3px;
  background: var(--text);
  opacity: 0.85;
}

.phone-body {
  height: 100%;
  padding: 62px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.phone-body--find { gap: 14px; }

.p-team {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-team-tile {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.game {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
}
.game-date { text-align: center; border-right: 1px solid var(--line); padding-right: 10px; }
.game-dow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); }
.game-day { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; }
.game-main { min-width: 0; }
.game-opp { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-time { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--lime); }

.p-members {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 6px;
}
.p-member { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.p-member-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--avatar-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--soft);
}
.p-member-name { font-size: 11px; color: var(--soft); }

.p-screen-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.p-segment {
  display: flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.p-segment span {
  flex: 1;
  text-align: center;
  padding: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  border-radius: 6px;
}
.p-segment .is-active { background: var(--lime); color: var(--on-lime); }

.p-count { font-size: 13px; color: var(--muted); }
.p-count b { color: var(--text); font-weight: 600; }

.listing {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.listing-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.listing-date {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.listing-time { color: var(--lime); }
.listing-venue {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.listing-venue.is-booked { color: var(--lime); }
.listing-team { display: flex; align-items: center; gap: 8px; }
.team-tile-sm {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--tile);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  flex-shrink: 0;
}
.listing-team-name { font-size: 14px; font-weight: 600; }
.listing-area { font-size: 12px; color: var(--muted); }
.chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--raised);
  color: var(--soft);
}

/* ---------- How it works ---------- */

.how { border-top: 1px solid var(--line); }
.how .wrap { padding-block: 56px; }

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

.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.how-card { border-radius: 14px; padding: 28px; }
.how-step {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.how-card-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 10px;
}
.how-body { font-size: 15px; color: var(--soft); line-height: 1.55; margin-top: 12px; }

/* ---------- Inside the app ---------- */

.inside .wrap {
  padding-top: 24px;
  padding-bottom: 72px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.inside-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.inside-side { font-size: 15px; color: var(--muted); max-width: 360px; line-height: 1.5; }

.feat-row { display: grid; gap: 20px; }
.feat-row--3 { grid-template-columns: 1.2fr 1fr 1fr; }
.feat-row--2 { grid-template-columns: 1fr 1fr; }

.feat {
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.feat-head { display: block; font-weight: inherit; }
.feat-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.feat-title {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 6px;
}
.feat-body { font-size: 14px; color: var(--soft); line-height: 1.5; margin-top: 10px; }
.feat-demo { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.feat--split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }

.panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.scoreboard {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
  font-family: var(--font-display);
}
.score-team { font-size: 13px; text-transform: uppercase; color: var(--muted); }
.score-num { font-size: 72px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.score-num--home { color: var(--lime); }
/* No line-height here: the design leaves Q3 and the clock at Oswald's normal spacing. */
.score-mid { font-size: 22px; font-weight: 600; color: var(--muted); }
.score-clock { font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }

.score-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.score-btns span { padding: 12px; border-radius: 8px; border: 1px solid var(--line); }
.score-btns .is-primary { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }

.roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.roster-row:last-child, .rank-row:last-child, .stand-row:last-child { border-bottom: 0; }
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--raised);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  flex-shrink: 0;
  white-space: nowrap;
}
.roster-name { flex: 1; font-size: 13px; font-weight: 500; min-width: 0; }
.rsvp { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rsvp--going { color: var(--lime); }
.rsvp--no { color: var(--danger); }

.rank-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  padding: 10px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.rank-row.is-me, .stand-row.is-me { background: var(--lime-10); }
.rank-pos { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--muted); }
.rank-team { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rank-pts { font-family: var(--font-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.chat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chat-row { display: flex; gap: 8px; align-items: flex-start; }
.chat-row .avatar { width: 24px; height: 24px; font-size: 9px; }
.bubble {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
}

.stand-head, .stand-row {
  display: grid;
  grid-template-columns: 20px 1fr 28px 28px;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.stand-head { padding: 6px 12px; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); }
.stand-row { padding: 7px 12px; }
.stand-pos { font-family: var(--font-display); font-size: 13px; color: var(--muted); }
.stand-team { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stand-num { text-align: center; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.stand-num--w { color: var(--lime); }
.stand-head .c { text-align: center; }

/* ---------- Pricing ---------- */

.pricing { border-top: 1px solid var(--line); }
.pricing .wrap {
  padding-block: 72px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pricing-head { text-align: center; }
.pricing-sub { font-size: 16px; color: var(--muted); margin-top: 12px; }

/* One plan. A single card is centred and capped rather than left in a third of
   the row, and splits its own contents into two columns from 601px up. */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }

.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.plan--featured { border: 2px solid var(--lime); }

.plan-name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--soft);
}
.plan--featured .plan-name { color: var(--text); }

.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.plan-amount {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan--featured .plan-amount { color: var(--lime); }
.plan-unit { font-size: 14px; color: var(--muted); }

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}
.plan--featured .plan-features { color: var(--soft); }

.plan-cta {
  margin-top: auto;
  display: block;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

/* The plan's status belongs to the price above it, not to the foot of the
   card, so it stays at its own width instead of stretching across the column
   the way the button it replaces did. */
.plan .soon { align-self: flex-start; }

/* From 601px up the single plan lays its own contents out in two columns: name
   and price with the button under it on the left, the feature list on the
   right. Subgrid is gone with the other two cards — there is nothing to line up
   against any more. */
@media (min-width: 601px) {
  .plan--featured {
    width: min(100%, 880px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 20px;
  }
  .plan--featured .plan-top { grid-column: 1; grid-row: 1; }
  .plan--featured .plan-features { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .plan--featured .plan-cta { grid-column: 1; grid-row: 2; align-self: end; }
  /* Same cell as the button, but at the top of it: this is a note on the price
     in row 1, not something to reach for at the bottom of the card. */
  .plan--featured .soon { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; }
}

/* ---------- CTA band ---------- */

.cta-band { background: var(--lime); color: var(--on-lime); }
.cta-inner {
  padding-block: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* No column gap, as in the design: at 1200px the headline needs all but 8px of the row.
     When it wraps, balanced lines keep it well clear of the button. */
  gap: 24px 0;
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  line-height: 1;
  text-wrap: balance;
}
.cta-sub { font-size: 16px; margin-top: 10px; opacity: 0.8; }
.cta-btn { padding: 18px 28px; font-size: 16px; flex-shrink: 0; }

/* Every "coming soon" status on the site is drawn in grey with a lime mark,
   for the dark page. On the lime band the grey is unreadable and the mark
   disappears into the background, so both borrow the band's own ink instead.
   Nothing else in here sits on lime. */
.cta-band .soon { flex: none; font-size: 16px; color: var(--on-lime); }
.cta-band .soon::before { background: var(--on-lime); }

/* ---------- Notify me at launch ---------- */

/* The first controls on the site: until this form there was nothing to focus
   on index.html but links. Everything here is a real <label>, a real <input>
   and a real <button>, and both controls keep the site's own focus ring
   (:focus-visible, lime, 3px offset) exactly as it is.

   On index.html the block gets a band of its own after the lime one — quiet
   and dark, in the footer's register rather than the poster's, because it is
   the practical ask and not another headline. On the invite page it sits in
   the narrow column and takes the same rule the steps below it use to
   separate themselves. */

.notify-band { border-top: 1px solid var(--line); background: var(--bg); }
.notify-band .wrap { padding-block: 56px 64px; }
.notify-band .notify { max-width: 620px; margin-inline: auto; }

.notify--invite { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }

/* The user agent's own [hidden] rule is the weakest thing in the cascade, and
   .notify-form's display: flex walks straight over it — the same trap the
   invite page documents a few sections down. Say it again, and louder: once
   the address is in, notify.js takes the form away by setting hidden, and it
   has to actually go. */
.notify [hidden] { display: none !important; }

.notify-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  text-transform: uppercase;
}

.notify-sub { font-size: 15px; line-height: 1.65; color: var(--soft); margin-top: 12px; }

/* Field and button on one row while there is room for both, stacked when
   there is not. align-items: flex-end lines the button up with the input
   rather than with the label above it. */
.notify-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 22px;
}
.notify-field { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.notify-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 16px is not a style choice: iOS Safari zooms the whole page when a field
   smaller than that takes focus, and there is no way back out of the zoom. */
.notify-input {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--dim);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}
.notify-input:hover { border-color: var(--muted); }
.notify-input[aria-invalid="true"] { border-color: var(--danger); }
.notify-input:disabled { opacity: 0.6; }

/* A real <button>, which arrives with a user-agent border, font and cursor of
   its own; .btn and .btn--lime do the rest. The hover and press rules further
   up the file are scoped to a.btn, so this needs its own. */
.notify-submit {
  flex: none;
  border: 0;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.notify-submit:disabled { cursor: default; opacity: 0.65; }

@media (prefers-reduced-motion: no-preference) {
  .notify-submit { transition: filter 0.15s ease, transform 0.15s ease; }
  .notify-submit:hover:not(:disabled) { filter: brightness(1.08); }
  .notify-submit:active:not(:disabled) { transform: translateY(1px); }
}

.notify-legal { font-size: 13px; line-height: 1.7; color: var(--muted); margin-top: 14px; }

/* Links are stripped of colour and underline site-wide, and these two sit in a
   paragraph of grey text where nothing else would mark them out. */
.notify-link { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.notify-link:hover { color: var(--text); }

/* Whatever the form has to say, in one line, in one place. The sentence is the
   signal — 「登録しました」 against 「送信できませんでした」 — and the colour
   and the weight are on top of it, never instead of it; a reader who cannot
   tell lime from red still reads which happened. Empty until there is
   something to say, and then not taking a gap in the layout. */
.notify-status { font-size: 14px; line-height: 1.6; color: var(--soft); margin-top: 12px; }
.notify-status:empty { display: none; }
/* tabindex="-1" so focus can be moved here when the form is taken away and
   the control that had focus goes with it. Like #main, it is not a control,
   so it takes no focus ring: the message appearing where the form was is the
   cue, and a box drawn round one sentence is not. */
.notify-status:focus, .notify-status:focus-visible { outline: none; }
.notify-status.is-ok { color: var(--lime); font-weight: 600; }
.notify-status.is-error { color: #f6a6a9; font-weight: 600; }

/* Shown exactly when the form cannot work: assets/noscript.css reveals it with
   scripting off, and notify.js adds .notify--fallback on a browser with no
   fetch. Both take the form away first, so the reader is never offered two
   ways to do one thing. */
.notify-nojs { display: none; font-size: 13px; line-height: 1.7; color: var(--muted); margin-top: 14px; }
.notify--fallback .notify-nojs { display: block; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--bg); }
.footer-inner {
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12px;
  color: var(--muted);
}
/* The language switch is the last item of the footer list, so on narrow screens
   it wraps along with the links instead of taking a row of its own. */
.footer-right { display: flex; justify-content: flex-end; min-width: 0; }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a:hover { color: var(--text); }

/* ---------- Legal pages ---------- */

.legal-main .wrap { max-width: 880px; padding-block: 56px 72px; }

/* The .draft-banner / .draft-tag / .ph rules that used to live here went with
   the bilingual DRAFT banner and the [制定日] placeholders when the two legal
   pages took effect on 2026-09-19. They styled nothing else on the site. Do
   not bring them back to mark a page as provisional: a document people are
   asked to agree to is either in force or it is not published. */

.legal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: 36px;
}
.legal-dates { margin-top: 12px; color: var(--muted); font-size: 13px; }

.legal-body { margin-top: 32px; color: var(--soft); font-size: 15px; line-height: 1.8; }
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--text);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 20px; }
.legal-body p, .legal-body ul, .legal-body ol, .legal-body dl, .legal-body .table-scroll { margin-top: 12px; }
.legal-body ul { list-style: disc; padding-left: 1.4em; }
.legal-body ol { list-style: decimal; padding-left: 1.6em; }
.legal-body li + li { margin-top: 4px; }
/* overflow-wrap: the 総務省 source URL is wider than a 320px phone. */
.legal-body a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.legal-body dt { color: var(--muted); }
.legal-body dd { margin: 0; }
.table-scroll { overflow-x: auto; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--line); }
.legal-body th { color: var(--text); background: var(--card); font-weight: 600; }
.legal-note { font-size: 13px; color: var(--muted); }

/* ---------- Invite landing page (i/index.html) ---------- */

/* Served for every /i/<CODE> address, so it has no sections to scroll through
   and no phone art: one narrow column holding the code and the two ways
   forward from it. */

.invite-bg { background: var(--hatch); }

.invite {
  max-width: 620px;
  margin-inline: auto;
  padding-block: 64px 80px;
}

/* Everything assets/invite.js decides — the code, the open button, the note
   that matches the platform — starts hidden. The user agent's own [hidden]
   rule is the weakest thing in the cascade and .btn's display: inline-flex
   walks straight over it, so say it again here and louder. */
.invite [hidden] { display: none !important; }

.invite-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: 10px;
}

.invite-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--soft);
  margin-top: 16px;
}

.invite-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  margin-top: 32px;
  text-align: center;
}

.invite-code-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The code alphabet leaves out I, L, O, 0 and 1, so a condensed display face is
   safe for something a reader may have to copy by eye or read down a phone. */
.invite-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: 0.14em;
  /* Tracking is added to the right of every glyph, the last one included.
     Take it back so eight characters still sit centred in the card. */
  margin: 8px -0.14em 0 0;
  color: var(--lime);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

/* A real <button>, so it brings a user-agent background, border, font and text
   colour with it. Styling it outright is shorter than resetting those and
   then winning .btn--ghost back through the cascade. */
.invite-copy {
  margin-top: 16px;
  padding: 9px 16px;
  border: 1px solid var(--dim);
  border-radius: 10px;
  background: none;
  color: var(--soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.invite-copy:hover { color: var(--text); border-color: var(--muted); }

.invite-card--bad {
  border-color: #5a2226;
  background: #2a1416;
  color: #f6a6a9;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

/* Same shape as .hero-actions: buttons at their natural width in a row that
   wraps, stacked and full width on a phone. On every platform but Android one
   of the two is taken away, and a lone button should not stretch to fill the
   column just because it is alone. */
.invite-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Before launch this row holds the status alone — the open button needs the
   store href that does not exist yet. It sits at the size of the steps below
   it and, like them, starts at the left edge of the column rather than under
   the centred code card. */
.invite-actions .soon { font-size: 15px; }

.invite-note { font-size: 13px; line-height: 1.7; color: var(--muted); margin-top: 16px; }

/* Shown exactly when scripting is off, by assets/noscript.css. Without
   JavaScript the code cannot be read out of the URL at all, so the page says
   where the reader can find it themselves instead of showing an empty card. */
.invite-nojs { display: none; }

.invite-steps-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  text-transform: uppercase;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Markers come back for these, as they do on the legal pages: the order of the
   three steps is the point, and WebKit keeps the list role once a list has
   markers again. */
.invite-steps {
  list-style: decimal;
  padding-left: 1.4em;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--soft);
}
.invite-steps li + li { margin-top: 6px; }
.invite-steps li::marker { color: var(--lime); font-weight: 700; }

.invite-why { font-size: 13px; line-height: 1.8; color: var(--muted); margin-top: 28px; }

/* ---------- Japanese typography ---------- */
/* Oswald has no kana or kanji, so Japanese display text falls back to Noto Sans JP,
   which is much wider and needs room between lines. */

html[lang="ja"] .hero-title,
html[lang="ja"] .section-title,
html[lang="ja"] .how-card-title,
html[lang="ja"] .feat-title,
html[lang="ja"] .cta-title,
html[lang="ja"] .legal-title,
html[lang="ja"] .invite-title,
html[lang="ja"] .invite-steps-title,
html[lang="ja"] .notify-title,
html[lang="ja"] .p-screen-title {
  line-height: 1.2;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
html[lang="ja"] .hero-title { font-size: 72px; line-height: 1.14; letter-spacing: 0.01em; }
html[lang="ja"] .section-title { font-size: 44px; }
html[lang="ja"] .how-card-title { font-size: 26px; }
html[lang="ja"] .feat-title { font-size: 22px; }
html[lang="ja"] .cta-title { font-size: 40px; }
html[lang="ja"] .legal-title { font-size: 40px; }
html[lang="ja"] .invite-title { font-size: 40px; }
html[lang="ja"] .invite-steps-title { font-size: 19px; }
html[lang="ja"] .notify-title { font-size: 24px; }
html[lang="ja"] .how-step,
html[lang="ja"] .feat-kicker,
html[lang="ja"] .notify-label,
html[lang="ja"] .p-label { letter-spacing: 0.08em; }
html[lang="ja"] .hero-lead,
html[lang="ja"] .hero-checks,
html[lang="ja"] .how-body,
html[lang="ja"] .feat-body,
html[lang="ja"] .inside-side,
html[lang="ja"] .pricing-sub,
html[lang="ja"] .plan-unit,
html[lang="ja"] .plan-features,
html[lang="ja"] .plan-cta,
html[lang="ja"] .soon,
html[lang="ja"] .cta-sub,
html[lang="ja"] .invite-lead,
html[lang="ja"] .invite-note,
html[lang="ja"] .invite-steps,
html[lang="ja"] .invite-why,
html[lang="ja"] .invite-card--bad,
html[lang="ja"] .notify-sub,
html[lang="ja"] .notify-legal,
html[lang="ja"] .notify-status,
html[lang="ja"] .notify-nojs,
html[lang="ja"] .bubble { line-break: strict; word-break: auto-phrase; }

/* ---------- Narrow desktop (1024-1179) ---------- */

@media (max-width: 1179px) {
  :root { --phone-scale: 0.62; }
  .hero-title { font-size: clamp(64px, 7.4vw, 88px); }
  html[lang="ja"] .hero-title { font-size: clamp(56px, 6.2vw, 72px); }
  .inside-head .section-title { font-size: 44px; }
  html[lang="ja"] .inside-head .section-title { font-size: 36px; }

  /* Side-by-side text and demo leave the standings too narrow for team names
     below about 1140px, so stack them like the cards in the row above. */
  .feat--split { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }

  /* The design's zero gap only works at 1200px; below it keep the headline off the button. */
  .cta-inner { column-gap: 24px; }
}

/* ---------- Tablet (601-1023) ---------- */

@media (max-width: 1023px) {
  :root { --gutter: 32px; --phone-scale: 0.7; }

  .nav-right, .nav-list { gap: 22px; }

  .hero-grid { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; padding-bottom: 64px; }
  .hero-title { font-size: 76px; }
  html[lang="ja"] .hero-title { font-size: 64px; }
  .hero-lead { max-width: 600px; }
  .hero-art { width: 480px; max-width: 100%; margin-inline: auto; }

  .how .wrap { padding-block: 48px; }
  .how-grid { gap: 16px; }
  .how-card { padding: 22px; }
  .how-card-title { font-size: 24px; }
  html[lang="ja"] .how-card-title { font-size: 20px; }
  .how-body { font-size: 14px; }

  .inside-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .inside-side { max-width: 560px; }
  .section-title { font-size: 44px; }
  html[lang="ja"] .section-title { font-size: 36px; }

  .feat-row--3 { grid-template-columns: 1fr 1fr; }
  .feat--score { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; }
  .feat-row--2 { grid-template-columns: 1fr; }
  .feat--split { grid-template-columns: 1fr 1fr; align-items: center; }

  .plan--featured { column-gap: 32px; }

  .cta-inner { flex-wrap: wrap; padding-block: 48px; }
  .cta-title { font-size: 40px; }
  html[lang="ja"] .cta-title { font-size: 34px; }
}

@media (max-width: 759px) {
  /* Hide the whole landmark, not just its list, so screen readers get no empty "Main" nav. */
  .nav-main { display: none; }
  .hero-title { font-size: 64px; }
  html[lang="ja"] .hero-title { font-size: 56px; }
  .how-grid { grid-template-columns: 1fr; }
  .feat-row--3 { grid-template-columns: 1fr; }
  .feat--score { display: flex; align-items: stretch; }
}

/* ---------- Mobile (<= 600), design lines 177-204 ---------- */

@media (max-width: 600px) {
  :root { --gutter: 20px; }

  .hide-sm { display: none !important; }
  .show-sm { display: revert; }
  .br-lg { display: none; }

  .nav { padding-block: 14px; gap: 10px; }
  .brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
  .brand-name { font-size: 18px; }
  .nav-right { gap: 10px; font-size: 12px; color: var(--muted); }
  .nav-cta { padding: 8px 12px; border-radius: 7px; font-size: 12px; }
  .lang-switch { gap: 4px; }

  .hero-grid { display: block; padding-top: 40px; padding-bottom: 36px; }
  .hero-art { display: none; }
  .kicker { font-size: 11px; }
  .hero-title { font-size: 56px; line-height: 0.92; margin-top: 12px; }
  html[lang="ja"] .hero-title { font-size: min(44px, 12.2vw); line-height: 1.16; }
  .hero-lead { font-size: 15px; margin-top: 16px; }
  .hero-actions { flex-direction: column; gap: 8px; margin-top: 22px; }
  .hero-actions .btn { padding: 15px; font-size: 15px; width: 100%; }
  /* Stacked, each still only as wide as its own words: a full-width status
     would be reading as a button again. */
  .hero-actions .soon { align-self: flex-start; font-size: 15px; }
  .hero-checks { gap: 6px 14px; margin-top: 18px; font-size: 12px; }

  .hero-games { display: block; }
  .games-card {
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .games-card .p-label { font-size: 11px; }
  .games-card .game {
    background: var(--bg);
    padding: 10px 12px;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
  }
  .games-card .game-date { padding-right: 8px; }
  .games-card .game-dow { font-size: 9px; }
  .games-card .game-day { font-size: 22px; }
  .games-card .game-opp { font-size: 14px; }
  .games-card .game-meta { font-size: 11px; }
  .games-card .game-time { font-size: 16px; }

  .how { border-top: 0; }
  .how .wrap { padding-top: 48px; padding-bottom: 0; display: flex; flex-direction: column; gap: 12px; }
  .how-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
  }
  .how-grid { display: flex; flex-direction: column; gap: 12px; }
  .how-card { border-radius: 12px; padding: 18px; }
  .how-step { font-size: 12px; color: var(--muted); }
  .how-card-title { font-size: 24px; margin-top: 6px; }
  html[lang="ja"] .how-card-title { font-size: 22px; }
  .how-body { font-size: 14px; line-height: 1.5; margin-top: 8px; }

  .inside .wrap { padding-top: 48px; padding-bottom: 0; gap: 12px; }
  .inside .kicker, .pricing .kicker {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  .inside-head { display: block; }
  .section-title,
  .inside-head .section-title { font-size: 36px; line-height: 0.95; margin-top: 12px; }
  html[lang="ja"] .section-title,
  html[lang="ja"] .inside-head .section-title { font-size: 28px; line-height: 1.25; }
  .inside-head .br-lg { display: none; }

  .feat-row--3 { display: flex; flex-direction: column; gap: 12px; }
  .feat-row--2 { display: none; }
  .feat, .feat--score { display: flex; flex-direction: column; align-items: stretch; border-radius: 12px; padding: 18px; gap: 12px; }
  .feat-kicker,
  html[lang="ja"] .feat-kicker { font-size: 20px; letter-spacing: 0; color: var(--text); line-height: 1; }
  .feat-title { display: none; }
  .panel { border-radius: 10px; }
  .scoreboard { padding: 14px; }
  .score-team { font-size: 11px; }
  .score-num { font-size: 56px; }
  .score-mid { font-size: 14px; font-weight: 500; }
  .score-clock { font-size: 18px; }
  .score-btns { display: none; }
  .roster-row { padding: 9px 12px; }
  .roster-row .avatar { width: 24px; height: 24px; font-size: 9px; }
  .roster-name { font-weight: 400; }
  .rank-row { grid-template-columns: 22px 1fr auto; padding: 9px 12px; }
  .rank-pos { font-size: 14px; }
  .rank-pts { font-size: 14px; }

  .pricing { border-top: 0; }
  .pricing .wrap { padding-top: 48px; padding-bottom: 0; gap: 12px; }
  .pricing-head { text-align: left; }
  .pricing-sub { font-size: 13px; margin-top: 8px; }

  .plans { display: flex; flex-direction: column; gap: 12px; }
  .plan--featured {
    display: flex;
    border-radius: 14px;
    padding: 22px;
    gap: 14px;
    margin-top: 8px;
    margin-bottom: 0;
  }
  .plan--featured .plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .plan--featured .plan-name { font-size: 26px; line-height: 1.2; }
  .plan--featured .plan-price { margin-top: 0; gap: 6px; flex-wrap: nowrap; }
  .plan--featured .plan-amount { font-size: 40px; }
  .plan--featured .plan-unit { font-size: 12px; font-weight: 500; }
  .plan--featured .plan-features { gap: 8px; font-size: 13px; }
  .plan--featured .plan-features,
  .plan--featured .plan-cta { align-self: stretch; }
  .plan--featured .plan-cta { margin-top: 0; }

  .cta-band { margin-top: 48px; }
  .cta-inner { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 36px; }
  .cta-title { font-size: 36px; line-height: 0.95; text-wrap: wrap; }
  html[lang="ja"] .cta-title { font-size: 28px; line-height: 1.25; }
  .cta-btn { padding: 15px; font-size: 15px; }
  /* The band's column stretches its children; the status keeps its own width. */
  .cta-inner .soon { align-self: flex-start; font-size: 15px; }

  /* Sign-up: field and button stack and fill the 402px column. The input keeps
     its 16px, which is the one size iOS Safari will not zoom the page for. */
  .notify-band .wrap { padding-block: 40px 44px; }
  .notify-title { font-size: 24px; }
  html[lang="ja"] .notify-title { font-size: 20px; }
  .notify-sub { font-size: 14px; }
  /* flex-basis is the main axis, and the main axis is now vertical: the 260px
     that is a minimum width on a wide screen would be a 260px-tall field here.
     Back to auto, and let the field be as tall as a field. */
  .notify-form { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 18px; }
  .notify-field { flex: 0 0 auto; }
  .notify-submit { width: 100%; padding: 15px; }
  .notify--invite { margin-top: 32px; padding-top: 20px; }

  /* Footer: © on the left, links on the right as in the design. When the links
     do not fit on one row (Japanese labels, narrow phones) they wrap and stay
     right-aligned. Links get 5px of vertical padding so each tap target is 24px
     tall; the footer padding shrinks by the same amount to keep the text in place. */
  .site-footer { border-top: 0; }
  .footer-inner { padding-block: 15px 27px; font-size: 11px; gap: 0 14px; flex-wrap: nowrap; align-items: baseline; }
  .footer-inner > p { flex-shrink: 0; }
  .footer-right { flex: 1 1 auto; }
  .footer-links { justify-content: flex-end; gap: 0 14px; }
  .footer-links a { display: inline-block; padding-block: 5px; }

  /* Invite page: the code card and the two buttons fill the 402px column, and
     the code drops a size so eight tracked characters still fit on one line. */
  .invite { padding-block: 36px 48px; }
  .invite-title { font-size: 40px; }
  html[lang="ja"] .invite-title { font-size: 30px; }
  .invite-lead { font-size: 15px; }
  .invite-card { padding: 20px 16px; margin-top: 24px; }
  .invite-code { font-size: 34px; letter-spacing: 0.1em; margin-right: -0.1em; }
  .invite-actions { flex-direction: column; gap: 8px; }
  .invite-actions .btn { padding: 15px; font-size: 15px; width: 100%; }
  .invite-actions .soon { align-self: flex-start; }
  .invite-steps-title { font-size: 19px; margin-top: 32px; padding-top: 20px; }
  html[lang="ja"] .invite-steps-title { font-size: 17px; }
  .invite-steps { font-size: 14px; }

  .legal-main .wrap { padding-block: 32px 48px; }
  .legal-title { font-size: 40px; margin-top: 28px; }
  html[lang="ja"] .legal-title { font-size: 30px; }
  .legal-body { font-size: 14px; }
  .legal-body h2 { font-size: 19px; margin-top: 32px; padding-top: 20px; }
  .legal-body dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-body dd + dt { margin-top: 10px; }
}

/* Below 360px the header cannot fit both language names next to the button, so
   it shows only the language you can switch to. The footer keeps both. */
@media (max-width: 359px) {
  .site-header .lang-switch [aria-current="true"],
  .site-header .lang-switch .lang-sep { display: none; }
}

/* The one inline style the page used to carry. It lives here so the
   Content-Security-Policy can refuse style attributes outright. */
.p-label--spaced {
  margin-top: 6px;
}