/* The landing page (landing/index.html). Its own stylesheet, not the app's: the app's style.css
   fixes the body to the viewport (height 100dvh, overflow hidden) for the lobby, and the page must
   scroll and be indexable as a plain document. The colours are the lobby's (style.css :root): the
   teal gradient of the title bar and the board's tan and orange as accents. No web font: the
   system stack the app uses, so nothing is loaded before the text shows. */

:root {
  --teal: #2d9da8;
  --teal-dark: #1e7a85;
  --teal-deep: #145b63;
  --ink: #1f2d33;
  --ink-soft: #4f5f66;
  --muted: #76868c;
  --line: #e2e8ea;
  --surface: #f5f8f8;
  --surface-2: #eaf4f5;
  --tan: #c4a17c;
  --orange: #ff9966;
  --stamp-red: #d93025;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(20, 60, 70, 0.16);
  --shadow-sm: 0 6px 20px rgba(20, 60, 70, 0.12);
  --radius: 14px;
  --container: 1160px;
}

* { box-sizing: border-box; }

/* No scroll-behavior: smooth on html: in Chrome and Safari it also animates mouse wheel ticks,
   which made wheel scrolling feel stuck and then jump. The section links glide by script instead
   (landing.html, at the end of the body), which also honours prefers-reduced-motion. */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-dark); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }

.container { width: min(var(--container), 100% - 2 * clamp(16px, 4vw, 40px)); margin: 0 auto; }
.container.narrow { max-width: 780px; }

.skip {
  position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--ink);
  padding: 8px 12px; border-radius: 6px; z-index: 100;
}
.skip:focus { left: 8px; }

/* Buttons: the lobby's rounded buttons, the primary on the teal */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none;
  border: 2px solid transparent; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-lg { padding: 14px 26px; font-size: 1.05rem; border-radius: 10px; }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-ghost { color: var(--white); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.btn-outline { color: var(--teal-dark); border-color: var(--teal); background: var(--white); }
.btn-outline:hover { background: var(--surface-2); }
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700;
  color: var(--teal-dark); margin-bottom: 0.8em;
}
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 36em; }
.fine { font-size: 0.92rem; color: var(--muted); }

/* Header: the lobby's teal title bar */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.header-row { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.25rem; }
.brand img { width: 36px; height: 36px; border-radius: 50%; background: var(--white); object-fit: cover; }
.brand.small { font-size: 1rem; color: var(--ink); }
.brand.small img { width: 28px; height: 28px; }
.site-nav { display: flex; gap: 20px; margin-left: 12px; }
.site-nav a { color: rgba(255, 255, 255, 0.92); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.site-nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.header-actions { margin-left: auto; display: flex; gap: 8px; }

/* Hero: text left, the app in a window frame right with a phone in front of it */
.hero {
  background: radial-gradient(1200px 500px at 85% -10%, var(--surface-2) 0%, transparent 60%), var(--white);
  padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.cta-row.center { justify-content: center; margin-top: 36px; }
.hero-visual { position: relative; padding-bottom: 14%; padding-right: 10%; }
.frame {
  margin: 0; background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.frame-bar { height: 26px; background: #e9eef0; display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9d2d6; }
.frame-phone {
  position: absolute; right: 0; bottom: 0; width: 24%; min-width: 120px;
  border-radius: 22px; border: 6px solid #1f2d33; box-shadow: var(--shadow);
}

/* Players online now (the lobby fills the number in, or leaves the line out) */
.online { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 600; color: var(--teal-dark); }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25); }

/* Learn's sub-blocks under its grid: the quizzes (a second grid) and the tutorials' chapters
   (from the toc) as cards that are links */
.learn-lessons, .learn-tutorials { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.learn-tutorials > h3 { font-size: 1.35rem; margin-bottom: 6px; }
.learn-tutorials .lead { max-width: 46em; }
.card-link { display: block; color: inherit; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
.card-link:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-link h3 { color: var(--teal-dark); }

/* The facts strip */
.facts { background: var(--teal-deep); color: var(--white); }
.facts-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
/* Each fact is a link to its section, but reads as text (white, no underline): the whole block
   lights up on hover instead. The negative margin keeps the text where it was without the padding. */
.facts-row { padding: 14px 0; }
.fact {
  display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; line-height: 1.3;
  color: var(--white); text-decoration: none; padding: 8px 10px; margin: 0 -10px; border-radius: 8px;
  transition: background 0.15s;
}
.fact strong { font-size: 1.05rem; }
.fact span { color: rgba(255, 255, 255, 0.78); }
.fact:hover { background: rgba(255, 255, 255, 0.1); }

/* Feature sections: text and image side by side, alternating sides */
.feature { padding: clamp(48px, 7vw, 96px) 0; }
.feature-alt { background: var(--surface); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
/* The picture on the left: it keeps the wider column */
.feature-grid.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-grid.reverse .feature-text { order: 2; }
.feature-grid.reverse .feature-visual { order: 1; }
.feature-text p { color: var(--ink-soft); }
.checks { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l2.8 2.8L12.5 5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.attribution { font-size: 0.9rem; color: var(--muted); }
.feature-visual { position: relative; }
.card-shot { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--white); }
/* A second, smaller card over the main one's corner (the chouette roles, the match found dialog) */
.card-shot-small { position: absolute; width: 52%; right: -4%; bottom: -14%; box-shadow: var(--shadow); }
.card-shot-dialog { width: 42%; right: 2%; bottom: -30%; }
.feature-visual:has(.card-shot-small) { margin-bottom: 12%; }
.feature-visual:has(.card-shot-dialog) { margin-bottom: 9%; }

/* The chouette's rules: a line of cards (as the community's) under the chouette section's grid */
.rules { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.rules > h3 { font-size: 1.35rem; margin-bottom: 0; }
.rules .cards { margin-top: 20px; margin-bottom: 22px; }

/* The name: a band on the deep teal, as the facts strip, so it stands out between two sections */
.story { background: var(--teal-deep); color: var(--white); padding: clamp(36px, 5vw, 64px) 0; }
.story .eyebrow { color: var(--orange); }
.story-row { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.story-row img { width: 96px; height: 96px; border-radius: 50%; flex: none; background: var(--white); box-shadow: var(--shadow-sm); }
.story-row p:last-child { margin-bottom: 0; color: rgba(255, 255, 255, 0.82); max-width: 46em; }

/* Community cards */
.community { padding: clamp(48px, 7vw, 96px) 0; background: var(--surface); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.card p { color: var(--ink-soft); margin: 0; }

/* A "coming soon" tag in a list item (the apps) */
.soon {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--teal-dark); font-size: 0.78rem; font-weight: 600; vertical-align: 2px;
}

/* Pricing: the plans as cards, the Free one first */
.pricing { padding: clamp(48px, 7vw, 96px) 0; }
.pricing .lead { max-width: 46em; }
.plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 32px; align-items: stretch; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan h3 { margin-bottom: 4px; }
.plan-price { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.plan-price span { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-left: 2px; }
.plan-tokens { color: var(--ink-soft); font-size: 0.92rem; margin: 6px 0 14px; min-height: 2.8em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.plan li { position: relative; padding-left: 22px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.plan-featured { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal), var(--shadow-sm); }
.pricing-note { margin-top: 22px; max-width: 60em; }
/* Early access (landing.html): a red line corner to corner through the plans (a gradient, so it
   fits any shape of the grid: 5 wide, 2 wide, or a column on phones) and a stamp over them. On
   phones the stamp sits above the column instead, so it is seen before scrolling five cards. */
.plans-crossed { position: relative; margin-top: 32px; }
.plans-crossed .plans { margin-top: 0; position: relative; }
/* On the grid, not the wrapper: on phones the stamp is in the wrapper's flow, above the grid */
.plans-crossed .plans::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: var(--radius);
  background: linear-gradient(to top right, transparent calc(50% - 4px), var(--stamp-red) calc(50% - 4px), var(--stamp-red) calc(50% + 4px), transparent calc(50% + 4px));
  opacity: 0.85;
}
.stamp {
  --stamp-red: #d93025;
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  margin: 0; padding: 12px 26px; max-width: 92%; text-align: center;
  border: 4px solid var(--stamp-red); border-radius: 10px; color: var(--stamp-red);
  background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-sm);
  font-size: clamp(1.05rem, 2.4vw, 1.7rem); font-weight: 800; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.stamp sup { font-size: 0.6em; margin-left: 2px; }
.pricing-footnote { margin-top: 14px; }
.pricing-footnote + .pricing-note { margin-top: 8px; }

/* The team: cards with a portrait (team-*.jpg), or an initials disc where there is none */
.team { padding: clamp(48px, 7vw, 96px) 0; background: var(--surface); }
.person { display: flex; flex-direction: column; }
.person-avatar, .person-photo {
  width: 88px; height: 88px; border-radius: 50%; margin-bottom: 16px; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); color: var(--white);
  font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em;
}
.person h3 { margin-bottom: 2px; }
/* Two classes: .card p (above) sets every paragraph's colour and margin at one class and a tag */
.person .person-role { color: var(--teal-dark); font-weight: 600; font-size: 0.92rem; margin: 0 0 12px; }
.person .person-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 14px; font-size: 0.92rem; }
.person-links a { font-weight: 600; text-decoration: none; }
.person-links a:hover { text-decoration: underline; }

/* Three steps */
.steps { padding: clamp(48px, 7vw, 96px) 0; text-align: center; }
.step-list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: left; counter-reset: step; }
.step-list li { position: relative; padding: 0 8px; }
.step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange); color: var(--ink); font-weight: 800; font-size: 1.1rem; margin-bottom: 14px;
}
.step-list p { color: var(--ink-soft); margin: 0; }

/* FAQ: native details, styled as rows */
.faq { padding: clamp(48px, 7vw, 96px) 0; background: var(--surface); }
.faq h2 { text-align: center; margin-bottom: 28px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0 20px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 650; padding: 16px 0; list-style: none; position: relative; padding-right: 32px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.4rem; color: var(--teal-dark); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); margin: 0 0 18px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: 0.92rem; color: var(--muted); }
.footer-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-row nav { display: flex; gap: 18px; margin-left: auto; }
.footer-row nav a { color: var(--ink-soft); text-decoration: none; }
.footer-row nav a:hover { text-decoration: underline; }
.copyright { margin: 0; }

/* Tablets */
@media (max-width: 1000px) {
  .site-nav { display: none; }
  .hero-grid, .feature-grid, .feature-grid.reverse { grid-template-columns: 1fr; }
  .feature-grid.reverse .feature-text { order: 1; }
  .feature-grid.reverse .feature-visual { order: 2; }
  .feature-visual { max-width: 720px; }
  .facts-row { grid-template-columns: repeat(3, 1fr); }
  .cards, .step-list { grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .hero-visual { padding-right: 6%; }
}

/* Phones */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .header-row { gap: 12px; }
  .btn-ghost { display: none; }
  .facts-row { grid-template-columns: 1fr 1fr; }
  .fact:last-child { grid-column: 1 / -1; }
  .cta-row .btn-lg { width: 100%; }
  .card-shot-small { width: 60%; right: 0; }
  .card-shot-dialog { width: 56%; }
  .plans { grid-template-columns: 1fr; }
  .plans-crossed { display: flex; flex-direction: column; gap: 18px; }
  .stamp { position: static; order: -1; transform: rotate(-3deg); align-self: center; max-width: 100%; }
  .story-row { flex-direction: column; align-items: flex-start; }
  .story-row img { width: 64px; height: 64px; }
  .footer-row nav { margin-left: 0; width: 100%; }
}