/* packages/marketing-site/src/assets/guide.css
   The club welcome page: one member's first month, in chapters. Extends pages.css;
   chat rows from components.css; product screenshots frame themselves (guide-figure--phone
   below). Mobile first. */

.guide {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pg-s4) var(--pg-s12);
}

/* ── hero ── */
.guide-hero {
  position: relative;
  padding: var(--pg-s6) 0 var(--pg-s8);
  text-align: left;
}
.guide-hero__crest {
  width: 72px;
  height: 72px;
  border-radius: var(--pg-radius-l);
  background: var(--pg-surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--pg-e2);
  margin-bottom: var(--pg-s4);
}
.guide-hero__crest img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-hero__crest[hidden] {
  display: none;
}
.guide-hero__club {
  font-family: var(--pg-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pg-gold);
  margin: 0 0 var(--pg-s2);
}
.guide-hero__title {
  font-family: var(--pg-font-display);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 0.95;
  margin: 0 0 var(--pg-s4);
  color: var(--pg-text-strong);
}
.guide-hero__motto {
  color: var(--pg-text-muted);
  font-style: italic;
  margin: 0 0 var(--pg-s4);
}
.guide-hero__motto[hidden] {
  display: none;
}
.guide-cta {
  display: grid;
  gap: var(--pg-s3);
}
@media (min-width: 480px) {
  .guide-cta {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    align-items: center;
  }
}
.guide-cta__primary,
.guide-cta__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--pg-s5);
  border-radius: var(--pg-radius-pill);
  font-weight: 700;
  text-decoration: none;
}
.guide-cta__primary {
  background: var(--pg-cta-gradient);
  color: var(--pg-cta-text);
  box-shadow: var(--pg-e2);
}
.guide-cta__secondary {
  border: 1px solid var(--pg-surface-3);
  color: var(--pg-text);
}
.guide-cta__link {
  color: var(--pg-odds);
  align-self: center;
}

/* ── chapters ── */
.guide-chapter {
  padding: var(--pg-s8) 0 var(--pg-s6);
  border-top: 1px solid rgba(226, 188, 99, 0.18);
}
#ch-8 {
  padding-bottom: var(--pg-s10);
}
.guide-chapter__no {
  font-family: var(--pg-font-mono);
  color: var(--pg-gold-deep);
  letter-spacing: 0.08em;
}
.guide-chapter__no,
.guide-figure__cap {
  font-size: 0.8rem;
}
.guide-chapter__title {
  font-family: var(--pg-font-display);
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  line-height: 1;
  margin: var(--pg-s2) 0 var(--pg-s4);
  color: var(--pg-text-strong);
}
.guide-chapter p,
.guide-hero .guide-story p {
  line-height: 1.55;
  margin: 0 0 var(--pg-s3);
  color: var(--pg-text);
}
.guide-story p:first-child {
  color: var(--pg-gold-bright);
  font-weight: 600;
}
.guide-figure {
  margin: var(--pg-s5) 0;
  border-radius: var(--pg-radius-l);
  overflow: hidden;
  box-shadow: var(--pg-e3);
}
.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
/* NOTE the `guide-style-tag` name: `guide-tag` was already taken by the "Right now"
   badge in chapter 2, which is `hidden` until the page knows it is your turn. Styling it
   by accident absolutely-positioned a badge nobody could see me break.

   The hero photograph, with the styles the club would have read off these four. The tags
   are positioned in per cent so they track the photo at every width, and they sit clear of
   faces rather than on them. Below 560px the photo is too small to carry four of them, so
   they stack into a row under it and stop pretending to point at anyone. */
.guide-figure--photo {
  position: relative;
}
.guide-style-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.guide-style-tag {
  position: absolute;
  white-space: nowrap;
  font-family: var(--pg-font-body);
  font-size: clamp(9px, 1.5vw, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pg-text-strong, #fff);
  background: rgba(9, 18, 33, 0.72);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: var(--pg-radius-pill);
  padding: 0.35em 0.7em;
  backdrop-filter: blur(3px);
}
.guide-style-tag::before {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--pg-amber);
  vertical-align: middle;
}
.guide-style-tag--a {
  left: 3%;
  top: 70%;
}
.guide-style-tag--b {
  left: 24%;
  top: 12%;
}
.guide-style-tag--c {
  left: 56%;
  top: 66%;
}
.guide-style-tag--d {
  right: 3%;
  top: 14%;
}
.guide-figure__cap--photo {
  font-family: var(--pg-font-body);
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 560px) {
  .guide-style-tags {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--pg-s3) var(--pg-s4) 0;
  }
  .guide-style-tag {
    position: static;
    font-size: 10px;
    padding: 0.3em 0.6em;
    letter-spacing: 0;
  }
}

.guide-figure--phone {
  margin: var(--pg-s8) 0;
  border-radius: var(--pg-radius-l);
  overflow: hidden;
  box-shadow: var(--pg-e3);
  border: 1px solid var(--pg-surface-3);
}
/* The shot is cropped at capture time (capture-guide-shots.pw.ts), so the page
   shows all of it: a `cover` crop here cut every screenshot off mid-sentence.
   The width cap keeps a phone screenshot phone-sized on a wide screen. */
.guide-figure--phone {
  max-width: 380px;
  margin-inline: auto;
}
.guide-figure--phone img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
}
.guide-figure__cap {
  font-family: var(--pg-font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pg-text-muted);
  padding: var(--pg-s2) var(--pg-s4);
  background: var(--pg-surface);
}
.guide-tag {
  display: inline-block;
  background: rgba(245, 158, 11, 0.16);
  color: var(--pg-amber);
  border-radius: var(--pg-radius-pill);
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: var(--pg-s2);
  vertical-align: middle;
}
.guide-tag[hidden] {
  display: none;
}

/* ── Telegram + terminal mocks ── */
.guide-chat {
  display: grid;
  gap: var(--pg-s2);
  margin: var(--pg-s5) 0;
}
.guide-chat .pg-chat {
  max-width: 340px;
}
.guide-chat__me {
  justify-self: end;
  background: var(--pg-surface-3);
}
.guide-chat__photo {
  padding: 6px;
}
.guide-chat__strong {
  color: var(--pg-text-strong);
  font-weight: 700;
}
/* The slip mock: a light receipt on the dark page, styled like a bookie app's own slip
   photo, never naming a bookmaker (PRODUCT.md forbids real bookmaker chrome). */
.guide-slip {
  background: #f6f7f9;
  color: #14213d;
  border-radius: 10px;
  padding: 12px 14px;
  width: 220px;
  transform: rotate(-2deg);
  font-family: var(--pg-font-body);
  box-shadow: var(--pg-e2);
}
.guide-slip__head {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 700;
}
.guide-slip__sel {
  font-weight: 800;
  margin-top: 8px;
}
.guide-slip__meta {
  color: #6b7280;
  margin-bottom: 8px;
}
.guide-slip__row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-top: 1px solid #e5e7eb;
}
.guide-slip__row--total b {
  color: #0f766e;
}
.guide-chat__keyboard {
  display: block;
  text-align: center;
  border: 1px solid var(--pg-odds);
  color: var(--pg-odds);
  border-radius: var(--pg-radius-s);
  padding: 10px;
  max-width: 340px;
}
.guide-term {
  background: var(--pg-shell);
  border-radius: var(--pg-radius-m);
  padding: var(--pg-s4);
  font-family: var(--pg-font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-x: auto;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: var(--pg-e2);
}
.guide-term__you {
  color: var(--pg-gold);
}
.guide-term__bot {
  color: var(--pg-text);
}

/* ── the three things ── */
.guide-todo {
  list-style: none;
  padding: 0;
  margin: var(--pg-s4) 0;
  counter-reset: todo;
}
.guide-todo li {
  counter-increment: todo;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--pg-s3);
  padding: var(--pg-s3) 0;
  border-top: 1px solid var(--pg-surface-2);
}
.guide-todo li::before {
  content: counter(todo);
  font-family: var(--pg-font-display);
  font-size: 1.4rem;
  color: var(--pg-gold);
}
.guide-todo a {
  color: var(--pg-odds);
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
.guide-todo__cta {
  /* A direct grid-item sibling of the item's <span>, not nested inside it, so without an
     explicit column it auto-flows into the 36px counter column instead of under the text. */
  grid-column: 2;
  margin-top: var(--pg-s3);
}
/* .guide-todo a's blue link colour would otherwise win over .guide-cta__primary's dark
   pill text (equal specificity, this rule declared later): the reminders pill keeps the
   same dark-on-gold pill text as every other primary CTA. */
.guide-todo a.guide-todo__cta {
  color: var(--pg-cta-text);
}
.guide-straight {
  margin-top: var(--pg-s8);
  padding: var(--pg-s4);
  border-radius: var(--pg-radius-m);
  background: var(--pg-surface);
  color: var(--pg-text-muted);
  font-size: 0.9rem;
}
.guide-straight a {
  color: var(--pg-odds);
}

/* ── P.S. (bring your own AI) ── */
.guide-ps {
  margin-top: var(--pg-s8);
  padding-top: var(--pg-s6);
  border-top: 1px dashed rgba(226, 188, 99, 0.3);
}
.guide-ps__title {
  font-size: clamp(1.3rem, 5vw, 1.8rem);
}

/* ── states ── */
.guide-state {
  padding: var(--pg-s10) 0;
}
.guide-state[hidden] {
  display: none;
}