/* The landing page. Colour does the explaining here: green for the retro,
   blue for poker, amber for awards — the same three colours the app uses. */
.page { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1.5rem 0; }
.top { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 3.5rem; }
.nav-link { color: var(--muted-foreground); font-weight: 500; font-size: 14px; }
.nav-link:hover { color: var(--foreground); }

/* ------------------------------------------------------------- hero */
.hero { text-align: center; padding-bottom: 1rem; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem;
  padding: .3rem .875rem; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--glass); border: 1px solid var(--border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--muted-foreground);
}
.pill-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-green); }
.hero h1 {
  font-size: clamp(34px, 6.2vw, 62px); line-height: 1.04; letter-spacing: -.04em;
  margin: 0 auto 1.25rem; max-width: 22ch; font-weight: 700;
}
.hero h1 em { font-style: normal; background-clip: text; -webkit-background-clip: text;
              color: transparent; }
.mark-green { background-image: linear-gradient(120deg, var(--c-green), var(--c-teal)); }
.mark-blue { background-image: linear-gradient(120deg, var(--c-blue), var(--c-purple)); }
.mark-amber { background-image: linear-gradient(120deg, #e8a900, var(--c-red)); }
.lede { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; color: var(--muted-foreground);
        max-width: 44rem; margin: 0 auto 2rem; }
.lede strong { color: var(--foreground); font-weight: 600; }
.cta { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.cta-button { width: min(17rem, 100%); }
.cta-note { font-size: 13px; }

/* The picture of a board. Plain elements, no screenshot to go stale. */
.shot {
  margin: 3rem auto 0; max-width: 58rem; text-align: start;
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 24px 60px rgb(9 30 66 / 14%);
}
.shot-bar { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem;
            border-bottom: 1px solid var(--border); background: var(--glass); }
.shot-dots { display: flex; gap: .3rem; }
.shot-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--secondary-hover); }
.shot-title { font-size: 13px; font-weight: 600; }
.shot-timer { margin-inline-start: auto; font-size: 12.5px; font-weight: 600;
              font-variant-numeric: tabular-nums; padding: .15rem .5rem; border-radius: 999px;
              background: var(--selected); color: var(--selected-text); }
.shot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: .875rem; }
.shot-col { --col: var(--c-blue); display: flex; flex-direction: column; gap: .5rem;
            padding: .625rem; border-radius: 10px;
            background: linear-gradient(180deg, color-mix(in oklab, var(--col) 15%, transparent),
                                        color-mix(in oklab, var(--col) 6%, transparent) 70%);
            border: 1px solid color-mix(in oklab, var(--col) 28%, var(--border));
            border-top: 3px solid color-mix(in oklab, var(--col) 70%, transparent); }
.shot-col.c-green { --col: var(--c-green); }
.shot-col.c-red { --col: var(--c-red); }
.shot-col.c-blue { --col: var(--c-blue); }
.shot-col-head { font-size: 12.5px; font-weight: 600;
                 color: color-mix(in oklab, var(--col) 45%, var(--foreground)); }
.shot-col-head b { font-weight: 600; opacity: .55; margin-inline-start: .25rem; }
.shot-card { position: relative; background: var(--card); border: 1px solid var(--border);
             border-inline-start: 3px solid var(--col); border-radius: 7px;
             padding: .5rem .625rem; font-size: 12.5px; line-height: 1.4;
             box-shadow: 0 1px 1px rgb(9 30 66 / 8%); }
.shot-card .v { position: absolute; right: .4rem; bottom: .35rem; font-style: normal;
                font-size: 11px; font-weight: 600; padding: .05rem .4rem; border-radius: 999px;
                background: var(--selected); color: var(--selected-text); }
.hidden-card { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .625rem; }
.hidden-card i { height: .5rem; border-radius: 4px; background: var(--secondary-hover); }
.hidden-card i:last-child { width: 55%; }

/* ---------------------------------------------------------- sections */
.section { padding: 4.5rem 0 0; }
.section-head { font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -.03em; text-align: center;
                margin: 0 0 .5rem; }
.section-sub { text-align: center; color: var(--muted-foreground); margin: 0 auto 2rem;
               max-width: 34rem; }

.tools { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.tool { --col: var(--c-blue); padding: 1.5rem 1.375rem; border-radius: var(--radius-lg);
        border: 1px solid color-mix(in oklab, var(--col) 30%, var(--border));
        background: linear-gradient(180deg, color-mix(in oklab, var(--col) 13%, transparent),
                                    color-mix(in oklab, var(--col) 4%, transparent) 60%), var(--glass);
        -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
        box-shadow: var(--glass-edge), var(--glass-shadow); }
.tool.t-green { --col: var(--c-green); }
.tool.t-blue { --col: var(--c-blue); }
.tool.t-amber { --col: #e8a900; }
.tool-icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center;
             background: color-mix(in oklab, var(--col) 18%, var(--card));
             color: color-mix(in oklab, var(--col) 70%, var(--foreground)); margin-bottom: .875rem; }
.tool-icon svg { width: 22px; height: 22px; }
.tool h3 { margin: 0 0 .25rem; font-size: 19px; letter-spacing: -.02em;
           color: color-mix(in oklab, var(--col) 42%, var(--foreground)); }
.tool > p { margin: 0 0 1rem; color: var(--muted-foreground); }
.tool ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.tool li { position: relative; padding-inline-start: 1.375rem; font-size: 13.5px; line-height: 1.5; }
.tool li::before { content: ""; position: absolute; left: 0; top: .45rem; width: .5rem; height: .5rem;
                   border-radius: 50%; background: color-mix(in oklab, var(--col) 60%, transparent); }
.tool li strong { font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
         grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); counter-reset: step; }
.step { padding: 1.375rem; border-radius: var(--radius-lg); background: var(--glass);
        border: 1px solid var(--border);
        -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.step-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
          font-weight: 700; font-size: 14px; margin-bottom: .75rem;
          background: var(--primary); color: var(--primary-foreground); }
.step h3 { margin: 0 0 .25rem; font-size: 16px; letter-spacing: -.015em; }
.step p { margin: 0; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; }

.trust { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.trust-item { padding: 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
              background: var(--glass);
              -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.trust-item h3 { margin: 0 0 .375rem; font-size: 15px; letter-spacing: -.01em; }
.trust-item p { margin: 0; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; }

.faq { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem; }
.faq details { border: 1px solid var(--border); border-radius: 10px; background: var(--glass);
               -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
               padding: .875rem 1rem; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex;
               align-items: center; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 18px; color: var(--muted-foreground); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .625rem 0 0; color: var(--muted-foreground); line-height: 1.6; }
.faq a { color: var(--primary); text-decoration: underline; }

.final { margin: 4.5rem 0 0; padding: 3rem 1.5rem; text-align: center; border-radius: 20px;
         background: linear-gradient(135deg, color-mix(in oklab, var(--c-green) 14%, transparent),
                                     color-mix(in oklab, var(--c-blue) 14%, transparent) 50%,
                                     color-mix(in oklab, #e8a900 14%, transparent));
         border: 1px solid var(--border); }
.final h2 { margin: 0 0 .375rem; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.03em; }
.final p { margin: 0 0 1.5rem; }
.final .cta-button { margin: 0 auto; }

@media (max-width: 720px) {
  .page { padding-inline: 1rem; }
  .top { margin-bottom: 2.5rem; }
  .shot-cols { grid-template-columns: 1fr; }
  .section { padding-top: 3.5rem; }
}