/* Founding 100 (WEBSITE-TYASI-F100-002), tyasiapp.app only: the offer section under
   the trailer with its price table,
   and on the joined page the signup's founding status, share card and Discord
   invite. Its own file so the other front-door Workers' copy of site.css is unchanged. */
.fine { font-size: 13px; color: var(--faint); }
.founding {
  margin-top: clamp(56px, 9vw, 104px); padding: 26px clamp(18px, 4vw, 30px); border: 1px solid rgba(var(--violet-rgb), .32); border-radius: 16px;
  background: linear-gradient(160deg, rgba(var(--violet-rgb), .12), rgba(var(--violet-rgb), .02));
}
.founding h2 { margin-top: 0; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; }
.founding .fine { margin: 10px 0 0; }
.founding-count { margin: 16px 0 0; color: var(--foreground); font-weight: 650; }
.price-table { width: 100%; margin: 18px 0 6px; border-collapse: collapse; }
.price-table th, .price-table td { padding: 11px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 16px; text-align: left; }
.price-table th:first-child, .price-table td:first-child { padding-left: 0; }
.price-table thead th { color: var(--faint); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.price-table tbody th { color: var(--foreground); font-weight: 650; }
.price-table tbody td:last-child { color: var(--violet-bright); font-weight: 700; }
.data-link { margin: 14px 0 0; }
.founding-status { margin-top: 28px; padding: 20px 22px; border: 1px solid rgba(var(--violet-rgb), .35); border-radius: 14px; background: rgba(var(--violet-rgb), .08); }
.founding-status h2 { margin-top: 0; }
.founding-status p:last-child { margin-bottom: 0; }
.share-card {
  display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; margin-top: 20px; padding: 26px;
  border: 1px solid rgba(var(--violet-rgb), .35); border-radius: 18px;
  background: radial-gradient(22rem 22rem at 100% 0%, rgba(36, 60, 157, .5), transparent 70%), radial-gradient(20rem 20rem at 0% 80%, rgba(76, 12, 133, .5), transparent 70%), #090510;
}
.share-card-kicker { margin-top: auto; color: var(--violet); font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; }
.share-card-big { color: #fff; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; }
.share-card-line { color: var(--muted); font-size: 14px; line-height: 1.4; }
.share-card-footer { margin-top: auto; color: var(--violet-bright); font-size: 13px; font-weight: 650; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.share-buttons[hidden] { display: none; }
.share-buttons button {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(var(--violet-rgb), .45); border-radius: 999px; cursor: pointer;
  background: rgba(var(--violet-rgb), .1); color: var(--foreground); font: 650 14px/1 var(--font-sans);
}
.share-buttons button:first-child { border-color: transparent; background: var(--violet-bright); color: #14082a; }
.share-buttons button:hover { background: rgba(var(--violet-rgb), .2); }
.share-buttons button:first-child:hover { background: #ddd6fe; }
.share-status:empty { display: none; }

/* Page v2 (WEBSITE-TYASI-SF-002): the who-line, the three offer lines with the form
   directly under them and one trust row, so a 390 px phone's first screen shows the
   who-line, the offers and the form; then the Listing Speedrun on phones only (9:16,
   muted), and the price table folded under "What it costs after the beta". */
.landing .hero h1 { margin-bottom: 14px; }
.who-line { margin: 0 auto; max-width: 560px; color: var(--foreground); font-size: 17px; font-weight: 620; }
.offer-lines { display: grid; gap: 8px; margin: 18px auto 0; padding: 0; max-width: 520px; list-style: none; text-align: left; }
.offer-lines li { position: relative; padding-left: 24px; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.offer-lines li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 10px rgba(var(--violet-rgb), .6); }
.offer-lines .offer-founding { color: var(--violet-bright); font-weight: 650; }
.landing .hero .waitlist { max-width: 520px; margin: 20px auto 0; text-align: left; }
.trust-row { margin: 18px auto 0; max-width: 560px; color: var(--faint); font-size: 13.5px; }
.landing .hero .lede { margin-top: clamp(28px, 5vw, 44px); }
.shot--speedrun { display: none; }
.shot--speedrun video { max-width: 320px; margin: 0 auto; aspect-ratio: 9 / 16; }
.price-fold { margin-top: 16px; }
.price-fold summary { cursor: pointer; color: var(--violet-bright); font-weight: 650; }
.price-fold .price-table { margin-top: 12px; }
@media (max-width: 699px) {
  main.landing { padding-top: 24px; }
  .landing .hero h1 { font-size: 30px; }
  .landing .hero .badge { margin-bottom: 12px; }
  .who-line { font-size: 16px; }
  .offer-lines { margin-top: 14px; gap: 6px; }
  .offer-lines li { font-size: 15px; }
  .landing .hero .waitlist { gap: 12px; margin-top: 16px; }
  .shot--speedrun { display: block; }
}
.offer-note { color: var(--violet-bright); font-weight: 650; }

/* The full walkthrough on /features (WEBSITE-TYASI-WAITLIST-031): a click-to-load
   poster drawn in CSS, swapped for the youtube-nocookie.com player on press. */
.yt-poster, .yt-frame {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--violet-rgb), .08);
}
.yt-poster {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--foreground);
  background: radial-gradient(40rem 22rem at 80% 0%, rgba(36, 60, 157, .45), transparent 70%), radial-gradient(34rem 20rem at 10% 90%, rgba(76, 12, 133, .5), transparent 70%), #06030b;
}
.yt-poster:hover { text-decoration: none; }
.yt-play { width: 72px; height: 72px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 40px rgba(var(--violet-rgb), .55); position: relative; }
.yt-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #14082a; }
.yt-poster:hover .yt-play, .yt-poster:focus-visible .yt-play { background: #ddd6fe; }
.yt-title { font-size: clamp(20px, 3vw, 30px); font-weight: 700; letter-spacing: -.01em; }
.yt-meta { color: var(--muted); font-size: 14px; }
.yt-frame { border: 0; background: #000; }
/* A feature's clips in one carousel on /features (WEBSITE-TYASI-SF-017): a
   scroll-snap row that swipes on touch; the buttons come with the script. */
.feature .carousel { margin-top: 24px; min-width: 0; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: 14px; }
.carousel--js .carousel-track { scrollbar-width: none; }
.carousel--js .carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline-offset: 4px; }
.carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.carousel-slide .shot, .feature .carousel-slide .shot { margin: 0; }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; }
.carousel-nav[hidden] { display: none; }
.carousel-nav button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--violet-bright); cursor: pointer; position: relative; }
.carousel-nav button:focus-visible { outline: 2px solid var(--violet); outline-offset: 0; }
.carousel-nav button:disabled { opacity: .35; cursor: default; }
.carousel-prev::before, .carousel-next::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; }
.carousel-prev::before { transform: translate(-35%, -50%) rotate(135deg); }
.carousel-next::before { transform: translate(-65%, -50%) rotate(-45deg); }
.carousel-nav .carousel-dot { width: 28px; }
.carousel-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transform: translate(-50%, -50%); }
.carousel-dot[aria-current="true"]::before { background: var(--violet-bright); width: 10px; height: 10px; }
@media (min-width: 900px) { .feature .carousel { margin-top: 0; } }
@media (prefers-reduced-motion: no-preference) { .carousel-track { scroll-behavior: smooth; } }

/* Colton 2026-10-20 (WEBSITE-TYASI-SF-017): the staggered sections keep every clip
   at the wide column's size; a flipped section mirrors the columns instead of
   putting its clip in the narrow one. */
@media (min-width: 900px) {
  .feature--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
}

/* Send Us Your Find (WEBSITE-TYASI-SF-014): the photo picker and the consent box. */
.waitlist input[type="file"] { padding: 10px; font-size: 14px; }
.waitlist label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.45; }
.waitlist label.check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--violet); }