/*
Theme Name: Sportspeople Community
Theme URI: https://sportspeople.community
Author: Sportspeople Community
Description: One-page presentation of the Sportspeople community in Zurich - sports and social groups, and the Sportspeople app.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: sportspeople-community
*/

  :root {
    color-scheme: light;
    --indigo:#3B2D96; --indigo-deep:#2B2070; --pink:#E8446E; --blue:#42B4EA;
    --yellow:#F4BE4D; --lavender:#9B7FD9; --mint:#5CD3A0;
    /* Light only. The page is white; depth comes from borders and shadows,
       not from a darker page colour. */
    --ink:#171338; --muted:#595676; --paper:#FFFFFF; --card:#FFFFFF;
    --border:#E2DFEE; --tint:#F7F6FB;
    --wa:#25D366; --fb:#1461C9;
    --shadow:0 2px 4px rgba(23,19,56,.04), 0 12px 28px rgba(23,19,56,.07);
    --shadow-lift:0 6px 12px rgba(23,19,56,.06), 0 22px 46px rgba(23,19,56,.12);
  }
  * { margin:0; padding:0; box-sizing:border-box }
  html { scroll-behavior:smooth }
  body { background:var(--paper); color:var(--ink); font:400 17px/1.6 -apple-system,BlinkMacSystemFont,
         "Avenir Next","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased }
  .wrap { max-width:1120px; margin:0 auto; padding:0 24px }
  a { color:inherit }

  /* ---------- header ---------- */
  header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88);
            backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border) }
  .nav { display:flex; align-items:center; gap:28px; height:76px }
  .nav img { height:34px; display:block }
  .nav nav { margin-left:auto; display:flex; gap:26px; align-items:center }
  .nav nav a { text-decoration:none; font-weight:600; font-size:15px; color:var(--muted) }
  .nav nav a:hover { color:var(--indigo) }
  .cta-sm { background:var(--indigo); color:#fff!important; padding:11px 20px; border-radius:999px;
             font-size:15px; white-space:nowrap }
  @media (max-width:820px) { .nav nav a:not(.cta-sm) { display:none } }

  /* ---------- hero ---------- */
  .hero { position:relative; overflow:hidden; background:var(--indigo); color:#fff;
           padding:104px 0 112px; text-align:center }
  .hero h1 { font-size:clamp(40px,7vw,78px); line-height:1.02; letter-spacing:-.035em; font-weight:800;
              max-width:17ch; margin:0 auto }
  .hero .lead { font-size:clamp(18px,2.2vw,23px); color:#D9D4F5; max-width:62ch; margin:26px auto 0 }
  .hero-logo { height:112px; margin-bottom:34px }
  .hero-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px }
  .big { display:inline-flex; align-items:center; gap:10px; padding:17px 32px; border-radius:999px;
          font-weight:700; font-size:17px; text-decoration:none; transition:transform .15s }
  .big:hover { transform:translateY(-2px) }
  .big-y { background:var(--yellow); color:var(--indigo-deep) }
  .big-o { border:2px solid rgba(255,255,255,.45); color:#fff }
  .confetti { position:absolute; inset:0; pointer-events:none; opacity:.9 }

  /* ---------- stats ---------- */
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:-56px auto 0; position:relative; z-index:5 }
  .stat { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:28px 22px;
           text-align:center; box-shadow:var(--shadow-lift) }
  .stat b { display:block; font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.03em; color:var(--indigo) }
  .stat span { font-size:14px; color:var(--muted); font-weight:600 }
  @media (max-width:720px) { .stats { grid-template-columns:repeat(2,1fr) } }

  /* ---------- sections ---------- */
  section { padding:92px 0 }
  .kicker { font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
             color:var(--indigo); margin-bottom:14px }
  h2 { font-size:clamp(30px,4.6vw,50px); line-height:1.05; letter-spacing:-.03em; font-weight:800; max-width:20ch }
  .sub { color:var(--muted); font-size:19px; max-width:68ch; margin-top:20px }
  .prose p { color:var(--muted); font-size:18px; margin-top:18px; max-width:72ch }
  .prose strong { color:var(--ink) }

  /* ---------- app ---------- */
  .app { background:linear-gradient(160deg,var(--indigo),var(--indigo-deep)); color:#fff; border-radius:34px;
          padding:64px; position:relative; overflow:hidden }
  .app h2 { color:#fff }
  .app .sub { color:#D9D4F5 }
  .app-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center }
  @media (max-width:900px) { .app { padding:40px 28px } .app-grid { grid-template-columns:1fr } }
  .feat { list-style:none; margin-top:30px; display:grid; gap:14px }
  .feat li { display:flex; gap:13px; align-items:flex-start; color:#E6E2FA; font-size:17px }
  .feat b { color:#fff }
  .tick { color:var(--mint); font-weight:800; flex:none }
  .appbox { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:24px;
             padding:34px; text-align:center }
  .appbox .url { font-size:clamp(23px,3vw,31px); font-weight:800; color:var(--yellow); letter-spacing:-.02em;
                  text-decoration:none; display:block; word-break:break-word }
  .appbox small { display:block; color:#C9C2EE; margin-top:12px; font-size:14px; line-height:1.5 }

  /* ---------- group grids ---------- */
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:18px; margin-top:42px }
  .card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:22px 20px 20px;
           display:flex; flex-direction:column; gap:12px; transition:transform .15s, box-shadow .15s;
           border-top:4px solid var(--accent); box-shadow:var(--shadow) }
  .card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift) }
  .card-emoji { font-size:32px; line-height:1 }
  .card h3 { font-size:17.5px; font-weight:800; letter-spacing:-.01em; line-height:1.25 }
  .card-actions { margin-top:auto; display:flex; gap:8px; flex-wrap:wrap }
  .btn { font-size:13.5px; font-weight:700; padding:9px 15px; border-radius:999px; text-decoration:none }
  .btn-wa { background:var(--wa); color:#04341a }
  .btn-fb { background:var(--fb); color:#fff }

  /* ---------- steps ---------- */
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px }
  @media (max-width:860px) { .steps { grid-template-columns:1fr } }
  .step { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:30px;
           box-shadow:var(--shadow) }
  .step b { display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
             background:var(--indigo); color:#fff; font-size:18px; margin-bottom:16px }
  .step h3 { font-size:21px; font-weight:800; letter-spacing:-.02em }
  .step p { color:var(--muted); margin-top:10px; font-size:16px }

  /* ---------- footer ---------- */
  footer { background:var(--indigo-deep); color:#CFC8F2; padding:62px 0 44px; margin-top:20px }
  footer img { height:40px; margin-bottom:22px }
  .fgrid { display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start }
  footer a { color:#fff; text-decoration:none; font-weight:600 }
  footer a:hover { text-decoration:underline }
  .fcol h4 { color:#fff; font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px }
  .fcol p, .fcol li { font-size:15px; line-height:2; list-style:none }
  .legal { border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:22px; font-size:14px;
            display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between }

  /* ---------- beta page ---------- */
  [hidden] { display:none!important }
  .beta { padding:0 0 150px }
  .beta-top { display:flex; align-items:center; gap:24px; padding:40px 0 10px }
  .beta-top .kicker { margin:0 }
  .beta-progress { list-style:none; margin-left:auto; display:flex; gap:7px }
  .beta-progress li { width:34px; height:5px; border-radius:999px; background:var(--border);
                      transition:background .25s }
  .beta-progress li.on { background:var(--indigo) }

  .slide { padding:26px 0 0; outline:none }
  .slide h1, .slide h2 { font-size:clamp(34px,6.2vw,62px); line-height:1.04; letter-spacing:-.035em;
                          font-weight:800; max-width:19ch }
  .slide h1 span, .slide h2 span { color:var(--indigo); display:block }
  .beta-lead { color:var(--muted); font-size:clamp(17px,2vw,20px); max-width:60ch; margin-top:22px }
  .beta-aside { color:var(--muted); font-size:15px; margin-top:34px; max-width:72ch }
  .beta-aside a, .linky { color:var(--indigo); font-weight:700 }
  .linky { background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline }
  .eyebrow { font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
              color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:9px }

  /* pick your phone */
  .pick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:42px;
           max-width:760px }
  @media (max-width:680px) { .pick { grid-template-columns:1fr } }
  .pick-card { text-align:left; background:var(--card); border:1px solid var(--border); border-radius:22px;
                padding:28px 26px 26px; box-shadow:var(--shadow); cursor:pointer; font:inherit; color:inherit;
                display:flex; flex-direction:column; gap:7px; transition:transform .15s, box-shadow .15s,
                border-color .15s }
  .pick-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:#CFC9E6 }
  .pick-card:focus-visible { outline:3px solid var(--indigo); outline-offset:3px }
  .pick-ico { color:var(--ink); margin-bottom:10px }
  .pick-ico-green { color:#2E9E52 }
  .pick-h { font-size:24px; font-weight:800; letter-spacing:-.02em }
  .pick-p { font-size:15px; color:var(--muted) }

  /* numbered steps */
  .stepcards { list-style:none; margin-top:40px; display:grid; gap:16px; max-width:860px }
  .stepcards li { display:flex; gap:20px; background:var(--card); border:1px solid var(--border);
                   border-radius:20px; padding:24px 26px; box-shadow:var(--shadow) }
  .stepcards b { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
                  background:var(--indigo); color:#fff; font-size:15px; font-weight:800 }
  .stepcards h3 { font-size:19px; font-weight:800; letter-spacing:-.02em }
  .stepcards p { color:var(--muted); font-size:16px; margin-top:7px }
  .stepcards em { font-style:normal; font-weight:700; color:var(--ink) }
  .sbtn { display:inline-block; margin-top:15px; background:var(--tint); border:1px solid var(--border);
           color:var(--indigo); font-weight:700; font-size:14.5px; padding:10px 18px; border-radius:999px;
           text-decoration:none }
  .sbtn:hover { background:#EFECF9 }

  /* what to try / feedback grids */
  .trygrid, .fbgrid { display:grid; gap:18px; margin-top:42px;
                       grid-template-columns:repeat(auto-fit,minmax(265px,1fr)) }
  .trygrid article, .fbgrid article { background:var(--card); border:1px solid var(--border);
                                       border-radius:20px; padding:24px; box-shadow:var(--shadow) }
  .trygrid h3, .fbgrid h3 { font-size:18px; font-weight:800; letter-spacing:-.02em }
  .trygrid p, .fbgrid p { color:var(--muted); font-size:15.5px; margin-top:9px }
  .fbcta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:38px }
  .fbcta span { color:var(--muted); font-size:15.5px }
  .big-i { background:var(--indigo); color:#fff }

  /* bottom nav */
  .beta-nav { position:sticky; bottom:0; display:flex; align-items:center; gap:16px; padding:42px 0 26px;
               margin-top:46px;
               /* Solid behind the buttons, fading above, so nothing reads through them. */
               background:linear-gradient(to top,var(--paper) 0,var(--paper) 80%,rgba(255,255,255,0) 100%) }
  .beta-nav button, .beta-nav a { font:inherit; font-weight:700; font-size:16px; cursor:pointer;
                                   border-radius:999px; text-decoration:none }
  .nav-back { background:none; border:0; color:var(--muted); padding:13px 10px }
  .nav-back:hover { color:var(--ink) }
  .nav-next, .nav-done { background:var(--indigo); color:#fff; border:0; padding:13px 34px }
  .nav-next:hover, .nav-done:hover { background:var(--indigo-deep) }
  .beta-nav .nav-next, .beta-nav .nav-done { margin-left:0 }
  .nav-back + .nav-next, .nav-back + .nav-done { margin-left:0 }

  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto }
    .pick-card, .card, .trygrid article { transition:none }
  }

  @media (max-width:520px) {
    /* The kicker and the progress dots share one line; give them room. */
    .beta-top { padding-top:28px; gap:14px }
    .beta-top .kicker { letter-spacing:.12em; font-size:11.5px }
    .beta-progress li { width:24px }
    .stepcards li { padding:22px 20px; gap:15px }
    .beta { padding-bottom:120px }
  }

  /* A standing request to testers, not an aside — give it weight. */
  .beta-note { margin-top:30px; max-width:72ch; font-size:15.5px; color:var(--ink);
               background:var(--tint); border:1px solid var(--border); border-left:4px solid var(--yellow);
               border-radius:14px; padding:18px 20px }