/* The landing page: the app cards, the mailing list block and the social row.
   Loads after base.css and only adds to it. */

  .hero{padding-bottom:6px}
  .hero h1{font-size:clamp(30px,6vw,50px); margin:6px 0}
  .hero p{margin:0 auto; max-width:46ch; color:var(--ink-soft); font-size:15px}

  /* ---------- what you can do here ---------- */
  .apps{margin-top:34px}
  .section-head{text-align:center; margin-bottom:18px}
  .section-head h2{font-size:clamp(22px,3.6vw,30px)}
  .section-head p{margin:6px auto 0; max-width:52ch; color:var(--ink-soft); font-size:14.5px}
  .app-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:16px; align-items:stretch}

  .app-card{display:flex; flex-direction:column; text-decoration:none; color:inherit;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden; transition:.18s ease}
  a.app-card:hover{transform:translateY(-3px); border-color:var(--accent)}
  a.app-card:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .app-art{aspect-ratio:16/10; display:grid; place-items:center; position:relative;
    background:linear-gradient(150deg, var(--board) 0%, var(--board-deep) 100%)}
  .app-art svg{width:56%; height:auto; display:block}
  /* A photo fills the whole panel instead of sitting on the gradient. `cover`
     because the art panel is 16/10 and og.jpg is a 1200x630 banner — letting it
     letterbox would show the gradient as two bars. */
  .app-art img.app-photo{position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block}
  .app-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:7px; flex:1}
  .app-body h3{margin:0; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px; line-height:1.2}
  .app-body p{margin:0; font-size:14px; color:var(--ink-soft); flex:1}
  .app-go{margin-top:4px; font-size:13.5px; font-weight:800; color:var(--accent-dark)}
  a.app-card:hover .app-go{color:var(--accent)}

  /* the placeholder cards for apps that do not exist yet */
  .app-card.soon{border-style:dashed; box-shadow:none; background:transparent}
  .app-card.soon .app-art{background:repeating-linear-gradient(135deg,
      var(--paper-2) 0 12px, #EFE6DA 12px 24px); color:var(--ink-soft)}
  .app-card.soon .app-art .soon-mark{font-family:'Baloo 2',sans-serif; font-weight:800;
    font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:#B8AA98}
  .app-card.soon h3{color:var(--ink-soft)}

  /* ---------- mailing list ---------- */
  .signup{margin-top:40px; background:var(--ink); color:#F7F2EA; border-radius:var(--radius);
    padding:26px 22px; box-shadow:var(--shadow); text-align:center}
  .signup h2{color:#fff; font-size:clamp(21px,3.4vw,27px)}
  .signup p{margin:8px auto 0; max-width:46ch; font-size:14.5px; color:rgba(247,242,234,.66)}
  .signup form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px auto 0; max-width:520px}
  .signup input[type="email"]{flex:1 1 240px; min-width:0; width:0;
    font-family:'Nunito',sans-serif; font-size:15.5px; color:#F7F2EA;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
    border-radius:999px; padding:13px 18px}
  .signup input[type="email"]::placeholder{color:rgba(247,242,234,.42)}
  .signup input[type="email"]:focus{outline:none; border-color:var(--accent); background:rgba(255,255,255,.11)}
  .signup .btn-primary{flex:0 0 auto}
  .signup-note{margin-top:11px; font-size:12.5px; min-height:18px; color:rgba(247,242,234,.55)}
  .signup-note.ok{color:#9BE8C6; font-weight:700}
  .signup-note.bad{color:#F0A8BD; font-weight:700}

  /* ---------- social ---------- */
  .social{margin-top:30px; text-align:center}
  .social h2{font-size:19px}
  .social-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px}
  .social-link{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
    background:var(--paper); border:1px solid var(--line); border-radius:999px;
    padding:10px 18px 10px 14px; font-weight:800; font-size:14px; color:var(--ink); transition:.15s ease}
  .social-link:hover{border-color:var(--accent); color:var(--accent-dark); transform:translateY(-1px)}
  .social-link:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .social-link svg{width:19px; height:19px; display:block}