/* Mahjong scheduler.
   The whole visual system: a felt table, tiles laid on it, and the circles
   suit used as the player counter. Colours are taken from a real tile set --
   bamboo green, red dragon red, brass -- which is what keeps it from reading
   as generic holiday decoration. */

:root {
  --felt: #1b4332;
  --felt-deep: #14301f;
  --bone: #f6f1e4;
  --bone-edge: #d8d1bc;
  --bone-shadow: #c3bba4;
  --ink: #24211a;
  --ink-soft: #6d675a;
  --bamboo: #2d6a4f;
  --dragon: #b3261e;
  --brass: #a47e3b;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 0 4rem;
  min-height: 100vh;
  background: var(--felt);
  background-image: radial-gradient(ellipse at 50% 0%, #235741 0%, var(--felt) 45%, var(--felt-deep) 100%);
  background-attachment: fixed;
  color: var(--bone);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}

a { color: inherit; }

/* ------------------------------------------------------------ masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0 1.1rem;
}

.mark {
  width: 2.1rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--bone);
  color: var(--dragon);
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--bone-shadow), 0 4px 8px rgba(0, 0, 0, 0.35);
}

.masthead h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead .who {
  margin-left: auto;
  font-size: 0.8rem;
  color: rgba(246, 241, 228, 0.75);
  text-decoration: none;
  text-align: right;
}

.masthead .who b { display: block; font-weight: 600; color: rgba(246, 241, 228, 0.9); }

/* ------------------------------------------------------------ tiles */

.tile {
  display: block;
  position: relative;
  background: var(--bone);
  color: var(--ink);
  border-radius: 12px;
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.85rem;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 #fffdf6,
    0 4px 0 var(--bone-edge),
    0 4px 0 1px var(--bone-shadow),
    0 11px 20px rgba(0, 0, 0, 0.34);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Pressing a tile pushes it into the felt. */
a.tile:active,
button.tile:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 #fffdf6,
    0 1px 0 var(--bone-edge),
    0 1px 0 1px var(--bone-shadow),
    0 5px 10px rgba(0, 0, 0, 0.3);
}

.tile.flat { box-shadow: inset 0 1px 0 #fffdf6, 0 3px 0 var(--bone-edge), 0 8px 16px rgba(0, 0, 0, 0.3); }

.tile-row { display: flex; align-items: center; gap: 0.9rem; }
.tile-row .grow { flex: 1; min-width: 0; }

.when { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; }
.where { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.1rem; }
.where .time { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ the circles suit */

/* Four circles per tile, filled as people answer yes. Reading the count is
   the whole job of the home page, so it happens without any digits. */
.dots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  flex: none;
  padding: 5px;
  border-radius: 7px;
  border: 1px solid rgba(164, 126, 59, 0.35);
}

.dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(109, 103, 90, 0.35);
}

.dot.on {
  background: radial-gradient(circle at 50% 50%, var(--bone) 0 22%, var(--bamboo) 24% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.dots.full { border-color: var(--bamboo); background: rgba(45, 106, 79, 0.09); }

/* ------------------------------------------------------------ event page */

.headline {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.sub { color: var(--ink-soft); margin-top: 0.35rem; }

.calendar {
  display: inline-block;
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.note {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(164, 126, 59, 0.4);
  color: var(--ink);
}

.tally {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(164, 126, 59, 0.4);
  font-weight: 600;
}

.tally .n { font-size: 1.05rem; }
.tally.full { color: var(--bamboo); }

.group { margin: 0 0 0.75rem; }
.group h3 {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(246, 241, 228, 0.72);
  font-weight: 600;
}
.group ul { list-style: none; margin: 0; padding: 0; }
.group li {
  padding: 0.36rem 0;
  border-bottom: 1px solid rgba(246, 241, 228, 0.09);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.group li:last-child { border-bottom: 0; }
.group.pending li { color: rgba(246, 241, 228, 0.62); }

.pip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pip.in { background: #6fce9f; }
/* The "in" green, hollow. A tentative is that answer without the commitment,
   and saying so in the same colour is quicker to read than a new one would be
   -- and brass is already spoken for by guests. */
.pip.tentative { box-shadow: inset 0 0 0 2.5px #6fce9f; }
.pip.out { background: #e2685f; }
.pip.none { box-shadow: inset 0 0 0 1.5px rgba(246, 241, 228, 0.35); }

.me-tag {
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid rgba(164, 126, 59, 0.6);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}

/* ------------------------------------------------------------ buttons */

/* Wraps so Tentative takes the line under the other two. Three across leaves
   "Can't make it" about a hundred pixels on a phone, which wraps the label. */
.answer { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.1rem 0 1.6rem; }

.btn {
  flex: 1;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 0.95rem 1rem;
  font: inherit;
  font-weight: 650;
  color: var(--bone);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 9px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }

.btn-in { background: var(--bamboo); }
/* Outlined like Tentative rather than a solid red slab -- "can't make it" is
   an honest answer, not an alarm, and "I'm in" should be the one hero button.
   It fills red only once it is the answer you actually gave. */
.btn-out {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(226, 104, 95, 0.6);
  color: rgba(246, 241, 228, 0.92);
}
.btn-out:active { box-shadow: inset 0 0 0 2px rgba(226, 104, 95, 0.6); }
/* Outlined rather than filled, and on its own full-width row. It has to be an
   easy tap -- a tentative yes is worth more than a silence -- without carrying
   the same weight as the two answers the table is counted from. */
.btn-tentative {
  flex: 1 1 100%;
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(111, 206, 159, 0.55);
  color: rgba(246, 241, 228, 0.9);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.btn-tentative:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(111, 206, 159, 0.55); }
.btn-quiet { background: rgba(246, 241, 228, 0.12); box-shadow: none; font-weight: 600; }
.btn-quiet:active { transform: none; }

/* The answer you already gave sits flat and dimmed; the others stand up. */
.btn.chosen { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); transform: translateY(3px); }
.btn.unchosen { opacity: 0.55; }
/* After .btn.chosen, not before it -- same specificity, so the later rule is
   the one that lands, and the shared white ring would otherwise erase the
   green that tells this button apart from the two above it. */
.btn-tentative.chosen { box-shadow: inset 0 0 0 2px #6fce9f; background: rgba(111, 206, 159, 0.14); }
.btn-out.chosen { background: var(--dragon); }

/* ------------------------------------------------------------ forms */

label { display: block; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.25rem; font-weight: 600; }

input[type="text"], input[type="date"], input[type="password"], input[type="email"], textarea {
  width: 100%;
  border: 1px solid rgba(109, 103, 90, 0.3);
  border-radius: 8px;
  padding: 0.7rem 0.65rem;
  font: inherit;
  color: var(--ink);
  background: #fffdf6;
  margin-bottom: 0.9rem;
}

input:focus, textarea:focus { outline: 2px solid var(--bamboo); outline-offset: 1px; }

textarea { min-height: 4.5rem; resize: vertical; }

.namegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.namegrid button {
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  border: 0;
  text-align: center;
  padding: 1.15rem 0.5rem;
}

/* ------------------------------------------------------------ misc */

.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(246, 241, 228, 0.68);
  margin: 1.6rem 0 0.6rem;
  font-weight: 600;
}

.empty { color: rgba(246, 241, 228, 0.75); text-align: center; padding: 2rem 1rem; }

.back { display: inline-block; margin-bottom: 0.9rem; font-size: 0.85rem; color: rgba(246, 241, 228, 0.78); text-decoration: none; }

.footer-links { margin-top: 2rem; text-align: center; font-size: 0.82rem; }
.footer-links a { color: rgba(246, 241, 228, 0.68); text-decoration: none; margin: 0 0.55rem; }

.retire { background: none; border: 0; color: var(--dragon); font: inherit; font-size: 0.8rem; cursor: pointer; padding: 0; }

.wrong { color: var(--dragon); font-size: 0.88rem; margin: -0.4rem 0 0.6rem; font-weight: 600; }

/* One group of circles per table. Five people show as a full group beside a
   group holding one, which is how the page says "there is room" without a
   sentence. */
.dotwrap { display: flex; align-items: center; gap: 0.35rem; flex: none; }

/* Shown only once a table is made, which is exactly when someone might
   wrongly assume the game is closed to them. */
.welcome {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  color: rgba(246, 241, 228, 0.62);
}

/* ------------------------------------------------------------ cancelled */

/* A cancelled game stays on the board. Disappearing would leave people
   wondering whether they missed it. */
.banner {
  background: var(--dragon);
  color: var(--bone);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.85rem;
  font-weight: 650;
  text-align: center;
  letter-spacing: 0.01em;
}

.tile.cancelled { opacity: 0.6; }
.tile.cancelled .when { text-decoration: line-through; text-decoration-thickness: 2px; }
.tile.cancelled .headline { text-decoration: line-through; text-decoration-thickness: 3px; }

.stamp {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dragon);
  border: 1.5px solid var(--dragon);
  border-radius: 4px;
  padding: 0.08rem 0.35rem;
}

.cancel-row { margin: 2rem 0 0; text-align: center; }

.linkish {
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.85rem;
  color: rgba(246, 241, 228, 0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.4rem;
}

.linkish.danger { color: rgba(226, 104, 95, 0.75); }

/* ------------------------------------------------------------ guests
   A guest is somebody's plus-one, not a roster member, so the row reads as a
   quieter version of an "in" row: brass rather than green, and carrying the
   name of whoever brought them. */
.pip.guest { background: var(--brass); }

.guest-tag {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0.85;
}

.guest-drop { margin-left: auto; }

/* One row shape for "a box and a button": the note under the answers and the
   guest line below it. The field takes the room and the button keeps its
   label. .btn is width:100% for the stacked answers above, which a flex basis
   of auto would inherit -- that is what made Add (and, for a day, Save note)
   the width of the page. The basis is wide enough that a phone drops the
   button onto its own line rather than squeezing the placeholder. */
.inline-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.inline-add input {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
}
.btn-add {
  flex: 0 0 auto;
  width: auto;
  min-width: 9rem;        /* wider than "Save note" needs, so both clamp to it */
  padding-left: 1.4rem;
  padding-right: 1.4rem;
  background: var(--brass);
}
/* The note row sits inside the answer form (flex, wrapping) and needs the
   whole row to itself. */
.answer .note-row { flex-basis: 100%; margin-top: 0.1rem; }
/* The guest block is its own idea: a little air above it separates it from
   the note row, and the welcome line hugs the box it explains. */
.guest-block { margin: 0 0 1.6rem; }
/* Narrower than this the two cannot share a line without eating the
   placeholder, so the button takes the next line whole. A small button
   left-adrift under a full-width field reads like a mistake; a full-width one
   reads like the buttons above it, and is an easier thing to hit. */
@media (max-width: 26rem) {
  .inline-add .btn-add { flex: 1 1 100%; width: 100%; }
}

/* ------------------------------------------------------------ share
   The site lives on a Home Screen, which has no address bar, so without this
   there is no way to get a link to a game out of the app. Folded shut: every
   member opens this page to answer, and only whoever posted the game shares
   it, so it must be findable without taking room from the answers. */

.share { margin: 0 0 1.5rem; }

.share summary {
  cursor: pointer;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: rgba(246, 241, 228, 0.7);
}

.share .btn { margin: 0.55rem 0 0.6rem; }

/* Selectable as one piece: a long press on a phone takes the whole URL rather
   than the word it landed on, which is the fallback if a browser ever declines
   the sms: link. */
.share-url {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(246, 241, 228, 0.45);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

/* Delete sits under Un-cancel when both are there, so it does not get the full
   2rem gap a lone row wants. On a past game the cancel row is gone and this is
   the only row, which is why the tightening is on the pairing and not the row. */
.cancel-row + .delete-row { margin-top: 0.2rem; }

/* -------------------------------------------------- add-to-home-screen hint */

.install-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(92vw, 26rem);
  padding: 0.7rem 0.9rem;
  background: var(--bone);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  line-height: 1.35;
}
.install-hint button {
  border: 0;
  background: var(--bamboo);
  color: var(--bone);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.install-hint .close {
  background: none;
  color: var(--ink-soft);
  font-size: 1.25rem;
  padding: 0 0.2rem;
}

/* Your own answer, echoed on the home tile so the landing page answers
   "am I in?" without a tap. Pip colors re-tuned for the bone card. */
.youline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.tile .pip.in { background: var(--bamboo); }
.tile .pip.out { background: var(--dragon); }
.tile .pip.tentative { box-shadow: inset 0 0 0 2.5px var(--bamboo); }
.tile .pip.none { box-shadow: inset 0 0 0 1.5px rgba(109, 103, 90, 0.55); }

.note-tag { display: block; margin-left: 1.55rem; font-size: 0.85rem; opacity: 0.75; font-style: italic; }

/* -------------------------------------------------------- site: landing */

.hero { text-align: center; padding: 1.5rem 0; }

.cta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.btn-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--bone-edge);
  color: var(--bone);
}
.btn-ghost:active { box-shadow: inset 0 0 0 2px var(--bone-edge); }

.fine { font-size: 0.85rem; color: var(--bone-edge); }
.tile .fine { color: var(--ink-soft); }

.sample-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem; }
.sample-head .date { font-weight: 700; }
.sample-head .place { color: var(--ink-soft); }
.count { color: var(--bamboo); font-weight: 600; }
.need { font-style: italic; color: var(--ink-soft); }

.points { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.point h3 { font-size: 1.05rem; margin: 0; }

.faq dt { font-weight: 600; margin-top: 0.8rem; }
.faq dd { margin: 0; color: var(--ink-soft); }

.site-foot { text-align: center; font-size: 0.85rem; margin-top: 1.5rem; }
.site-foot a { color: var(--bone); }

/* -------------------------------------------------------- site: start form */

.field { margin-top: 1rem; }

/* Sentence-case labels and quieter helper text on the buy form only: the
   board's own forms keep the small-caps labels that match its tiles. */
form.start label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
form.start .fine { margin: -0.45rem 0 0; }
form.start .btn { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.26), 0 6px 12px rgba(0, 0, 0, 0.22); }

/* The prefix and the box are ONE control: the input keeps no border or margin
   of its own, so "mahjong.rsvp/" and the word sit on the same baseline inside
   one outline. (A bare flex row centred the prefix against the input plus its
   bottom margin, which is why the two never lined up.) */
.addr {
  display: flex;
  align-items: center;
  border: 1px solid rgba(109, 103, 90, 0.3);
  border-radius: 8px;
  background: #fffdf6;
  margin-bottom: 0.9rem;
  padding-left: 0.65rem;
}
.addr span { color: var(--ink-soft); white-space: nowrap; }
.addr input { flex: 1; min-width: 0; border: 0; margin: 0; padding-left: 0.15rem; background: transparent; }
.addr:focus-within { outline: 2px solid var(--bamboo); outline-offset: 1px; }
.addr input:focus { outline: none; }

/* -------------------------------------------------------- site: landing page
   Full-width marketing page (the only page not inside .wrap). Every mockup on
   it is built from the board's own tile/dots/pip classes, so it can't go stale
   the way a screenshot would. Layout from the 2026-09-11 design canvas. */

.lp { padding: 0; }
.lp .lp-head, .lp section, .lp .lp-foot { max-width: 84rem; margin-left: auto; margin-right: auto; padding-left: 4.5rem; padding-right: 4.5rem; }
.lp-head { display: flex; align-items: center; gap: 0.7rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.lp-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.lp-word { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.lp-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.lp-nav a { text-decoration: none; font-weight: 600; color: rgba(246, 241, 228, 0.85); white-space: nowrap; }
.lp .btn { display: inline-flex; width: auto; align-items: center; justify-content: center; }
.lp-btn-sm { padding: 0.7rem 1.2rem; }
.lp-btn-lg { font-size: 1.1rem; padding: 1.05rem 1.6rem; white-space: nowrap; }
.lp-eyebrow { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(246, 241, 228, 0.68); font-weight: 600; }
.lp-h1 { font-size: clamp(2.6rem, 5.3vw, 4.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
.lp-h2 { font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0; }
.lp-mint { color: #6fce9f; }
.lp-lede { color: rgba(246, 241, 228, 0.82); font-size: 1.25rem; line-height: 1.45; margin: 0; text-wrap: pretty; }
.lp-lede b { color: var(--bone); }
.lp-cta { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; }
.lp-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: 0.9rem; color: rgba(246, 241, 228, 0.72); }
.lp-facts li, .lp-points li { display: flex; align-items: center; gap: 0.45rem; }
.lp svg { width: 18px; height: 18px; flex: none; stroke: #6fce9f; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lp-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; align-items: center; padding-top: 2.5rem; padding-bottom: 5rem; }
.lp-hero-copy, .lp-split-copy { display: flex; flex-direction: column; gap: 1.6rem; }
.lp-phone-wrap { display: flex; justify-content: center; }
.lp-phone {
  width: 390px; max-width: 100%;
  background: var(--felt);
  background-image: radial-gradient(ellipse at 50% 0%, #235741 0%, var(--felt) 55%, var(--felt-deep) 100%);
  border-radius: 44px; padding: 26px 18px 30px;
  box-shadow: inset 0 0 0 10px #0f1f16, inset 0 0 0 12px #2a2f2c, 0 30px 60px rgba(0, 0, 0, 0.5);
  font-size: 16px;
}
/* Real phone proportions (390×844 outer), so the mockups don't read as a
   stubby card. The chat thread sits at the bottom the way Messages does, and
   keeps clear of the bezel: the frame's inset shadow is 12px, so anything
   under ~26px of side padding puts bubbles on the "glass" edge. */
.lp-phone { min-height: 780px; display: flex; flex-direction: column; }
.lp-imsg { padding: 44px 26px 36px; }
.lp-imsg .lp-thread { margin-top: auto; }
.lp-demo-tip { margin: 0; font-size: 0.95rem; color: rgba(246, 241, 228, 0.78); max-width: 34rem; }
.lp-demo-tip b { color: var(--bone); font-weight: 700; }
.lp .guest-block { margin: 0 0 1.1rem; }
.lp .welcome { font-size: 0.82rem; }
.lp-fake-input { flex: 1 1 10rem; min-width: 0; border: 1px solid rgba(109, 103, 90, 0.3); border-radius: 8px; padding: 0.7rem 0.65rem; background: #fffdf6; color: rgba(109, 103, 90, 0.7); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp .btn-add { min-width: 0; padding: 0.7rem 1.1rem; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.26); }
.lp-phone .tile { margin-bottom: 0.85rem; }
.lp-phone .tile:last-of-type { margin-bottom: 0; }
.lp-board-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0 1rem; }
.lp-you { margin-left: auto; font-size: 0.8rem; color: rgba(246, 241, 228, 0.75); text-align: right; }
.lp-you b { display: block; color: rgba(246, 241, 228, 0.9); }
.lp-board-foot { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.2rem; font-size: 0.85rem; color: rgba(246, 241, 228, 0.7); }
.lp-dots { display: flex; gap: 6px; flex: none; }
.lp .dots { flex: none; }
.lp .dot { display: block; }
.lp .youline { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; font-size: 0.88rem; color: var(--ink-soft); }
.lp .pip.lp-guest { background: var(--brass); }

.lp-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.lp-imsg { background: #0c0c0e; background-image: none; }
.lp-imsg-title { text-align: center; font-size: 0.8rem; color: #8e8e93; margin-bottom: 14px; }
.lp-thread { display: flex; flex-direction: column; gap: 7px; font-size: 0.95rem; }
.lp-bubble { margin: 0; max-width: 78%; padding: 0.55rem 0.8rem; border-radius: 18px; line-height: 1.35; }
.lp-bubble.them { background: #26252a; color: var(--bone); border-bottom-left-radius: 5px; align-self: flex-start; }
.lp-bubble.me { background: #2f7cf6; color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.lp-preview { margin: 6px 0 0 auto; width: 86%; padding: 0.8rem 0.9rem; }
.lp-preview .when { font-size: 1rem; }
.lp-preview .count { margin: 0.2rem 0 0; font-size: 0.9rem; }
.lp-game-card .lp-when-lg { font-size: 1.35rem; }
.lp-game-card .note { font-size: 0.95rem; }
.lp-answer { margin: 0.2rem 0 1.1rem; }
.lp-answer .btn { display: block; width: auto; padding: 0.8rem; }
.lp-answer .btn-tentative { padding: 0.6rem; }
.lp-note-tag { margin-left: auto; font-size: 0.8rem; color: rgba(246, 241, 228, 0.6); font-style: italic; }
.lp-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.lp-points li { align-items: flex-start; gap: 1rem; }
.lp-points svg { width: 24px; height: 24px; margin-top: 3px; }
.lp-points b { display: block; font-size: 1.15rem; }
.lp-points span { color: rgba(246, 241, 228, 0.78); }

/* The two boxed sections keep the page gutters: their own padding overrides the
   section padding, so the inset has to come from max-width instead. */
.lp-band, .lp-price { max-width: min(75rem, calc(100% - 9rem)) !important; }
.lp-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin: 3.5rem auto 0; padding: 3rem 3.5rem; border-radius: 18px; }
.lp-band > div { display: flex; flex-direction: column; gap: 0.5rem; }
.lp-band p { margin: 0; color: var(--ink-soft); }
.lp-big { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--bamboo); line-height: 1; }
.lp-proof { padding-top: 5.5rem; padding-bottom: 2.5rem; grid-template-columns: minmax(0, 1fr); max-width: 60rem !important; text-align: center; }
.lp-proof .lp-split-copy { align-items: center; }

.lp-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin: 4rem auto 0; padding: 3.5rem; background: rgba(0, 0, 0, 0.18); border-radius: 22px; }
.lp-price-copy { display: flex; flex-direction: column; gap: 1rem; }
.lp-price-line { display: flex; align-items: baseline; gap: 0.75rem; font-size: 1.25rem; color: rgba(246, 241, 228, 0.8); }
.lp-amount { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--bone); }
.lp-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.5rem; }
.lp-included li { display: flex; gap: 0.6rem; align-items: center; }

.lp-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 3rem; padding-bottom: 2.5rem; font-size: 0.9rem; color: rgba(246, 241, 228, 0.7); }
.lp-foot nav { display: flex; gap: 1.4rem; }
.mark-sm { width: 1.6rem; height: 2rem; font-size: 1rem; }

@media (max-width: 60rem) {
  .lp .lp-head, .lp section, .lp .lp-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
  .lp-hero, .lp-split, .lp-price, .lp-band { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .lp-hero { padding-top: 1rem; padding-bottom: 2.5rem; }
  .lp-game-section .lp-phone-wrap { order: 2; }
  .lp-band, .lp-price { max-width: calc(100% - 2.2rem) !important; }
  .lp-band { margin: 2rem auto 0; padding: 2rem 1.5rem; }
  .lp-price { margin: 2.5rem auto 0; padding: 1.8rem 1.5rem; }
  .lp-btn-lg { white-space: normal; }
  .lp-included { grid-template-columns: minmax(0, 1fr); }
  .lp-cta .btn { flex: 1 1 100%; width: 100%; }  /* the base .btn sets flex-basis 0, which lets two fit one line */
  .lp-btn-sm { padding: 0.55rem 0.9rem; font-size: 0.9rem; }
  .lp-nav a:first-child { display: none; }
  .lp-phone { border-radius: 32px; padding: 20px 16px 24px; }
  .lp-imsg { padding: 34px 22px 30px; }  /* bubbles clear of the bezel on phones too */
}