/* ==========================================================================
   pokerrangecalculator.com, "Chip's world" (direction B, Oct 2026).

   The home page (index.html) and the /u/<name> share page (worker.js
   profileShell) wear this file. The blog, legal pages, methodology and
   /promocode still wear style.css for their body copy, plus site-chrome.css,
   a copy of this file's nav and footer under site-* class names. Change the
   header or footer here, then there; this file does not touch those pages.

   Light only, on purpose. The design is the app's store screenshots grown
   into a site: saturated colour panels on a white page. Those panels are the
   same colour in a dark room, so a dark variant would only change the white
   gutters around them. `color-scheme: light` keeps form controls and
   scrollbars consistent with that.

   Contrast: white text sits only on the darker panel shades (green #0E9A6F,
   blue #1C9BE6, orange #D35F22) and only at "large" sizes (>= 18.66px bold),
   where 3:1 is the bar. Anything smaller on a panel (the eyebrows) is a white
   pill with the panel's deep shade as text, which clears 4.5:1.
   ========================================================================== */

:root {
  color-scheme: light;
  --green: #0E9A6F;
  --green-deep: #0B6E50;
  --blue: #1C9BE6;
  --blue-deep: #0F6FA8;
  --orange: #D35F22;
  --orange-deep: #A84A17;
  --gold: #FFC800;
  --gold-deep: #B07A00;
  --ink: #1C1C1E;
  --muted: #6E6E73;
  --line: #F2F2F7;
  --line-2: #E5E5EA;
  --page: #FFFFFF;
  --mint: #D6F2E6;
  /* Buttons: one step darker than the brand green so 15-17px white text clears 4.5:1. */
  --btn: #0B8560;
  --btn-edge: #08694D;
  --font: Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 16px;
  background: var(--btn); box-shadow: 0 4px 0 var(--btn-edge);
  color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
  white-space: nowrap; transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--line-2); border: 2px solid var(--line-2); }
.btn-white:active { box-shadow: 0 1px 0 var(--line-2); }
.btn-lg { height: 52px; font-size: 16px; }

/* ---------- store badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badges.center { justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 56px; padding: 0 20px 0 16px; border-radius: 13px;
  background: #000; border: 1.5px solid #000; color: #fff;
  font-family: -apple-system, system-ui, sans-serif;
}
.badge svg { width: 28px; height: 28px; flex: none; }
.badge span { display: flex; flex-direction: column; line-height: 1.05; }
.badge small { font-size: 12px; font-weight: 500; }
.badge b { font-size: 21px; font-weight: 600; letter-spacing: -.3px; }
.badge-play small { text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }
.badges.sm .badge { height: 46px; padding: 0 16px 0 13px; border-radius: 11px; }
.badges.sm .badge svg { width: 23px; height: 23px; }
.badges.sm .badge small { font-size: 10px; }
.badges.sm .badge b { font-size: 17.5px; }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: 44px; height: 44px; }
.logo span { font-size: 20px; font-weight: 900; line-height: 1.05; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { font-size: 16px; font-weight: 800; color: var(--muted); }
.nav-links a:not(.btn):hover { color: var(--ink); }

/* ---------- panels ---------- */
.band { padding-bottom: 24px; }
.panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 40px; padding: 64px; min-height: 560px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
  color: #fff;
}
.panel.rev { flex-direction: row-reverse; }
.panel.green { background: var(--green); }
.panel.blue { background: var(--blue); }
.panel.orange { background: var(--orange); }
.panel.ink { background: var(--ink); }
.panel.gold { background: var(--gold); color: var(--ink); }
.panel.paper { background: var(--line); color: var(--ink); }
.panel > * { position: relative; }
.panel .txt { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.panel .vis { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }

.dot { position: absolute !important; border-radius: 50%; background: #fff; pointer-events: none; z-index: -1; }

.eyebrow {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: #fff; font-size: 13px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
}
.green .eyebrow { color: var(--green-deep); }
.blue .eyebrow { color: var(--blue-deep); }
.orange .eyebrow { color: var(--orange-deep); }
.ink .eyebrow { color: var(--ink); }
.gold .eyebrow { background: var(--ink); color: #fff; }
.paper .eyebrow { background: var(--ink); color: #fff; }

.h2 { font-size: 56px; line-height: 1.02; font-weight: 900; letter-spacing: -1px; }
.lede { font-size: 20px; line-height: 1.45; font-weight: 800; max-width: 30em; }

/* ---------- hero ---------- */
.hero { padding-top: 8px; }
.hero .panel { padding: 72px 64px 0; gap: 48px; min-height: 0; }
.hero .txt { flex: 1 1 460px; gap: 22px; padding-bottom: 72px; }
.hero h1 { font-size: 84px; line-height: .98; font-weight: 900; letter-spacing: -2px; }
.hero .lede { font-size: 22px; max-width: 26em; }
.hero .note { font-size: 19px; font-weight: 800; }
.hero .web-link { font-size: 19px; font-weight: 900; color: #fff; border-bottom: 3px solid rgba(255,255,255,.55); padding-bottom: 1px; }
.hero .web-link:hover { border-bottom-color: #fff; }
.hero .vis { flex: 1 1 380px; align-self: flex-end; height: 600px; overflow: hidden; }
.stage { position: relative; padding-top: 20px; }
.hero .chip-peek { position: absolute; left: -90px; bottom: 90px; width: 230px; height: 230px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); }

/* ---------- a phone holding a real screenshot ---------- */
.phone {
  width: 300px; aspect-ratio: 300 / 651; flex-shrink: 0; padding: 7px; border-radius: 45px;
  background: #0E0E10; box-shadow: 0 24px 60px rgba(0,0,0,.30); transform: rotate(-3deg);
}
.phone.tilt-r { transform: rotate(3deg); }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 38px; }

/* ---------- white cards inside panels ---------- */
.card {
  background: #fff; color: var(--ink); border-radius: 28px; padding: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px;
}
.rot-l { transform: rotate(-3deg); }
.rot-l2 { transform: rotate(-2deg); }
.rot-r { transform: rotate(3deg); }
.rot-r2 { transform: rotate(2deg); }

/* live range chart */
.chart-card { width: 100%; max-width: 520px; }
.seats { display: flex; flex-wrap: wrap; gap: 6px; }
.seat {
  font-family: inherit; border: none; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 900;
  background: var(--line); color: var(--muted);
}
.seat[aria-pressed="true"] { background: var(--blue-deep); color: #fff; box-shadow: 0 3px 0 #0A5480; }
.grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; }
.cell {
  aspect-ratio: 1; border-radius: 3px; background: #EDEDF0; color: var(--muted);
  font-size: 9px; font-weight: 800; letter-spacing: -.2px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cell.on { background: var(--green); color: #fff; }
.chart-note { font-size: 14px; font-weight: 800; color: var(--muted); }
.chart-note b { color: var(--ink); }

/* trainer question */
.quiz { padding: 24px; gap: 16px; }
.bar { height: 16px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar i { display: block; width: 62%; height: 100%; border-radius: 999px; background: #12B886; }
.quiz-q { font-size: 22px; line-height: 1.2; font-weight: 900; }
.hole { display: flex; justify-content: center; gap: 10px; }
.pcard {
  width: 84px; height: 118px; flex-shrink: 0; border-radius: 12px; background: #fff;
  border: 2px solid var(--line-2); box-shadow: 0 4px 0 #C7C7CC; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pcard b { position: absolute; left: 8px; top: 5px; font-size: 25px; font-weight: 900; line-height: 1; }
.pcard svg { width: 39px; height: 39px; }
.pcard.red b { color: #E5484D; }
.pcard:first-child { transform: rotate(-4deg); }
.pcard:last-child { transform: rotate(4deg); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice {
  height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; letter-spacing: .4px;
  background: #fff; border: 2px solid var(--line-2); box-shadow: 0 4px 0 var(--line-2); color: var(--muted);
}
.choice.picked { background: var(--mint); border-color: #12B886; box-shadow: 0 4px 0 #12B886; color: var(--green-deep); }
.verdict { border-radius: 18px; background: var(--mint); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--green-deep); }
.verdict strong { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; }
.verdict p { font-size: 15px; font-weight: 700; line-height: 1.4; }

/* solved spot */
.solved { padding: 24px; gap: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.solved-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.solved-head strong { font-size: 17px; font-weight: 900; }
.solved-head span { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .6px; }
.srow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 70px; align-items: center; gap: 12px; }
.srow > b { font-size: 18px; font-weight: 900; }
.freq { display: flex; flex-direction: column; gap: 4px; }
.freq i { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.freq i::before { content: ""; width: var(--raise); background: #12B886; }
.freq small { font-size: 12px; font-weight: 800; color: var(--muted); }
.ev { text-align: right; font-size: 15px; font-weight: 900; color: var(--green); }
.ev.zero { color: var(--muted); }

/* Ask Chip */
.chat { padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.chat-head img { width: 36px; height: 36px; }
.chat-head span { font-size: 17px; font-weight: 900; }
.msg { max-width: 88%; padding: 12px 16px; font-size: 16px; line-height: 1.4; font-weight: 700; border-radius: 18px 18px 18px 4px; background: var(--line); }
.msg.me { align-self: flex-end; max-width: 84%; border-radius: 18px 18px 4px 18px; background: var(--blue-deep); color: #fff; font-weight: 800; }

/* corner Chips */
.peek { position: absolute; filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); pointer-events: none; }
.holder { position: relative; width: 100%; }
.trainer-chip { right: -74px; top: -96px; width: 170px; height: 170px; }
.coach-chip { right: -40px; top: -84px; width: 150px; height: 150px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.2)); }
.web-chip { right: -34px; top: -96px; width: 140px; height: 140px; }

/* ---------- in your browser ---------- */
.browser {
  width: 100%; max-width: 540px; background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.16); border: 2px solid var(--line-2); transform: rotate(-2deg);
}
.browser-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #F7F7F9; border-bottom: 2px solid var(--line-2); }
.lights { display: flex; gap: 6px; flex: none; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.address {
  flex: 1; min-width: 0; height: 32px; border-radius: 10px; background: #fff; border: 2px solid var(--line-2);
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  font-size: 14px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.address svg { flex: none; }
.browser-tabs { display: flex; gap: 22px; padding: 14px 20px 0; border-bottom: 2px solid var(--line); }
.browser-tabs span { padding-bottom: 10px; font-size: 15px; font-weight: 900; color: var(--muted); }
.browser-tabs span.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--green); }
.browser-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.web-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  border: 2px solid var(--line-2); box-shadow: 0 4px 0 var(--line-2); background: #fff;
  transition: transform .08s ease, box-shadow .08s ease;
}
.web-row:hover { border-color: #12B886; box-shadow: 0 4px 0 #12B886; }
.web-row:active { transform: translateY(3px); box-shadow: 0 1px 0 #12B886; }
.web-icon { width: 48px; height: 48px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; }
.web-icon.g { background: var(--green); }
.web-icon.o { background: var(--orange); }
.web-row span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.web-row strong { font-size: 18px; font-weight: 900; }
.web-row small { font-size: 14px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.web-row > svg { flex: none; color: var(--muted); }
.browser-foot { font-size: 14px; font-weight: 800; color: var(--muted); padding: 0 4px 2px; }
.web-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ---------- friends ---------- */
.friends .panel { padding: 64px 64px 0; }
.friends .txt { padding-bottom: 64px; }
.friends .vis { align-self: flex-end; height: 560px; overflow: hidden; padding-top: 24px; }
.crew { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.faces { display: flex; }
.face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 4px solid var(--green); flex: none; }
.face + .face { margin-left: -14px; }
.face svg { width: 100%; height: 100%; display: block; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #8A5F00; font-size: 17px; font-weight: 900; }

/* ---------- FAQ ---------- */
.faq { padding-top: 64px; padding-bottom: 8px; }
.faq h2 { font-size: 44px; line-height: 1.05; font-weight: 900; letter-spacing: -.8px; margin-bottom: 24px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.faq details { border: 2px solid var(--line-2); border-radius: 20px; background: #fff; box-shadow: 0 4px 0 var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 18px; font-weight: 900; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: var(--muted);
}
.faq details[open] summary::after { content: "\2212"; background: var(--mint); color: var(--green-deep); }
.faq details p { padding: 0 20px 20px; font-size: 16px; line-height: 1.55; font-weight: 700; color: #3A3A3F; }

/* ---------- closing CTA ---------- */
.get { padding-top: 72px; padding-bottom: 88px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.get img { width: 260px; height: auto; }
.get .h2 { color: var(--ink); }
.get p { font-size: 20px; font-weight: 800; color: var(--muted); }
.get .alt { font-size: 17px; font-weight: 800; color: var(--muted); }
.get .alt a { color: var(--green-deep); border-bottom: 2px solid currentColor; }

/* ---------- footer ---------- */
.footer { border-top: 2px solid var(--line); }
.footer .wrap { padding-top: 28px; padding-bottom: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer a, .footer span { font-size: 15px; font-weight: 800; color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer .fine { font-size: 14px; font-weight: 700; }

/* ---------- share page (/u/<name>) ---------- */
.u-page { min-height: 100vh; display: flex; flex-direction: column; }
.u-band {
  position: relative; overflow: hidden; isolation: isolate; background: var(--green); color: #fff;
  border-radius: 0 0 36px 36px; padding: 16px 16px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.u-band > * { position: relative; }
.u-brand { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; }
.u-brand img { width: 32px; height: 32px; }
.u-avatar {
  margin-top: 14px; width: 164px; height: 164px; border-radius: 50%; overflow: hidden;
  border: 6px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.15);
}
.u-avatar svg { width: 100%; height: 100%; display: block; }
.u-name { font-size: 34px; line-height: 1.1; font-weight: 900; margin-top: 4px; overflow-wrap: anywhere; max-width: 100%; }
.u-handle { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.u-band .u-chip { position: absolute; right: -24px; bottom: -18px; width: 110px; height: 110px; }
.u-main { width: 100%; max-width: 440px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 22px; }
.tiles { display: flex; gap: 10px; }
.tile { flex: 1; min-width: 0; border: 2px solid; border-radius: 16px; overflow: hidden; }
.tile > span { display: block; color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .8px; text-align: center; padding: 4px 2px; }
.tile > b { display: flex; align-items: center; justify-content: center; gap: 6px; height: 56px; padding: 0 4px; font-size: 22px; font-weight: 900; white-space: nowrap; }
.tile > b svg { flex: none; }
.tile.streak { border-color: #F27A3D; }
.tile.streak > span { background: #B9531D; }
.tile.streak > b { color: var(--orange); }
.tile.league { border-color: #D99A00; }
.tile.league > span { background: var(--gold); color: var(--ink); }
.tile.league > b { color: #8A5F00; }
.tile.xp { border-color: #1CB0F6; }
.tile.xp > span { background: var(--blue-deep); }
.tile.xp > b { color: #1577B0; }
.u-pitch { font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--muted); text-align: center; }
.u-open { display: flex; height: 52px; font-size: 17px; }
.u-store { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.u-store p { font-size: 14px; font-weight: 800; color: var(--muted); }
.u-home { margin-top: auto; padding: 0 16px 28px; text-align: center; font-size: 14px; font-weight: 800; color: var(--muted); }
.u-lost .u-band { padding-bottom: 40px; }
.u-lost .u-lost-chip { margin-top: 12px; width: 150px; height: 150px; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .nav-links .nav-hide { display: none; }
  .hero h1 { font-size: 68px; }
  .h2 { font-size: 46px; }
  .panel { padding: 52px 44px; }
  .hero .panel { padding: 56px 44px 0; }
  .friends .panel { padding: 52px 44px 0; }
  .trainer-chip { right: -40px; top: -84px; width: 140px; height: 140px; }
}

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .band { padding-bottom: 12px; }
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .logo img { width: 38px; height: 38px; }
  .logo span { font-size: 17px; }
  .logo .br { display: block; }
  .nav-links { gap: 0; }
  .nav-links .btn { height: 42px; padding: 0 16px; font-size: 14px; }

  .panel, .panel.rev {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    border-radius: 32px; padding: 36px 22px 40px; gap: 32px; min-height: 0;
  }
  .panel .txt, .panel .vis { flex: none; }
  .panel .txt { gap: 14px; }
  .h2 { font-size: 36px; line-height: 1.04; letter-spacing: -.5px; }
  .lede { font-size: 19px; line-height: 1.4; }

  .hero { padding-top: 0; }
  .hero .panel { padding: 36px 22px 0; gap: 18px; }
  .hero .txt { padding-bottom: 0; gap: 18px; }
  .hero h1 { font-size: 52px; letter-spacing: -1.5px; }
  .hero .lede { font-size: 19px; }
  .hero .vis { align-self: stretch; height: 380px; padding-top: 0; }
  .hero .phone { width: 230px; border-radius: 35px; padding: 6px; }
  .hero .phone img { border-radius: 29px; }
  .hero .chip-peek { left: -36px; bottom: 6px; width: 140px; height: 140px; }

  .badges { gap: 10px; }
  .badges .badge { height: 46px; padding: 0 14px 0 12px; gap: 8px; border-radius: 11px; }
  .badges .badge svg { width: 23px; height: 23px; }
  .badges .badge small { font-size: 10px; }
  .badges .badge b { font-size: 17.5px; }

  .card { padding: 12px; border-radius: 24px; }
  .chart-card { transform: rotate(-2deg); }
  .cell { font-size: 6.5px; border-radius: 2px; }
  .grid { gap: 1.5px; }
  .seat { padding: 6px 10px; }
  .quiz, .solved, .chat { padding: 18px; }
  .quiz-q { font-size: 19px; }
  .pcard { width: 70px; height: 98px; }
  .pcard b { font-size: 21px; }
  .pcard svg { width: 32px; height: 32px; }
  .msg { font-size: 15px; }
  .trainer-chip { right: -14px; top: -70px; width: 100px; height: 100px; }
  .coach-chip { right: -14px; top: -64px; width: 100px; height: 100px; }
  .web-chip { top: auto; right: -12px; bottom: -34px; width: 92px; height: 92px; }
  .browser-foot { padding-right: 64px; }
  .rot-r { transform: rotate(2deg); }
  .rot-l2 { transform: rotate(-1.5deg); }
  .browser { transform: rotate(-1.5deg); border-radius: 18px; }
  .browser-tabs { gap: 16px; padding: 12px 14px 0; }
  .browser-body { padding: 14px; }
  .web-row { padding: 12px; gap: 12px; }
  .web-icon { width: 42px; height: 42px; }
  .web-actions .btn { flex: 1 1 auto; }

  .friends .panel { padding: 36px 22px 0; gap: 14px; }
  .friends .txt { padding-bottom: 0; }
  .friends .vis { align-self: stretch; height: 360px; padding-top: 20px; }
  .friends .phone { width: 230px; border-radius: 35px; padding: 6px; }
  .friends .phone img { border-radius: 29px; }

  .faq { padding-top: 40px; }
  .faq h2 { font-size: 34px; }
  .faq-list { grid-template-columns: 1fr; }
  .faq summary { font-size: 17px; padding: 16px; }
  .faq details p { padding: 0 16px 16px; }

  .get { padding-top: 48px; padding-bottom: 56px; gap: 16px; }
  .get img { width: 200px; }
  .get p { font-size: 18px; }

  .footer .wrap { flex-direction: column; align-items: flex-start; padding-top: 24px; padding-bottom: 40px; gap: 14px; }
  .footer nav { gap: 10px 20px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 46px; }
  .logo span { font-size: 16px; }
  .tile > b { font-size: 19px; }
}