/* ===========================================================================
   /teams, the public page about team stores (team stores D6b, 2026-10-12):
   public/teams_landing.html. The vintage system (vintage.css, --vh-*) in the
   language of the team store page (comp I, css/team_store.css): a hero with
   a little store (an ink band, the kit standing in a row on stone), the four
   promises, three steps, three example kits, merch stores on an ink band,
   the questions, then the application, which wears the Get a quote form's
   qf- kit from vintage.css (its own rules there are not touched: the few
   below are scoped under .tl-apply).

   Plain static CSS, NOT Tailwind (no build). Every rule is .tl- prefixed.
   Phone first; 1000px and up is the PC layout. Text 12px and up, taps 44px
   and up, focus always visible. No amber, no orange, no colored side bars.
   =========================================================================== */
.tl-hero, .tl-sect, .tl-merch, .tl-apply { --tl-stone: #EFEAE0; --tl-cream-on-ink: #F2EDE1; }
.tl-wrap { max-width: 118.4rem; margin: 0 auto; padding: 0 2rem; }
.tl-num { font-family: var(--vh-display); font-weight: 600; font-variant-numeric: lining-nums; }

/* ── type ──────────────────────────────────────────────────────────────── */
.tl-h1 { margin: 1.4rem 0 1.6rem; font-family: var(--vh-display); font-weight: 600; font-size: clamp(3.8rem, 10vw, 6.4rem);
  line-height: .98; letter-spacing: .01em; text-transform: uppercase; color: var(--vh-ink); text-wrap: balance; }
.tl-h2 { margin: 1.2rem 0 0; font-family: var(--vh-display); font-weight: 600; font-size: clamp(2.8rem, 7vw, 4.4rem);
  line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: var(--vh-ink); text-wrap: balance; }
.tl-lead { margin: 0; max-width: 44ch; font-family: var(--vh-body); font-size: 1.75rem; line-height: 1.5; color: var(--vh-muted);
  text-wrap: pretty; }
.tl-lead + .tl-lead { margin-top: .6rem; }
.tl-sub { margin: 1.2rem 0 0; max-width: 56ch; font-size: 1.6rem; line-height: 1.6; color: var(--vh-muted); }
.tl-eb { display: inline-flex; align-items: center; gap: .9rem; margin: 0; font-family: var(--vh-display); font-weight: 500;
  font-size: 1.2rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(253, 252, 247, .72); }
.tl-eb .vh-x { font-size: 1rem; color: var(--vh-white); }

/* ── buttons and links ─────────────────────────────────────────────────── */
.tl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 5.2rem; padding: 0 2.8rem;
  background: var(--vh-ink); color: var(--vh-white); border: 1.5px solid var(--vh-ink); border-radius: 0;
  font-family: var(--vh-display); font-weight: 600; font-size: 1.45rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: background .2s ease, color .2s ease; }
.tl-btn:hover { background: transparent; color: var(--vh-ink); }
.tl-btn--inv { background: var(--vh-white); color: var(--vh-ink); border-color: var(--vh-white); }
.tl-btn--inv:hover { background: transparent; color: var(--vh-white); }
.tl-more { display: inline-flex; align-items: center; min-height: 4.4rem; font-family: var(--vh-display); font-weight: 500;
  font-size: 1.35rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vh-ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; }
.tl-more:hover { text-decoration-color: var(--vh-line-strong); }
.tl-btn:focus-visible, .tl-more:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 3px; }
.tl-btn--inv:focus-visible { outline-color: var(--vh-white); }

/* ── the hero ──────────────────────────────────────────────────────────── */
.tl-hero { background: var(--vh-white); border-bottom: 1px solid var(--vh-line); }
.tl-hero__in { display: grid; gap: 3.2rem; padding-top: 3.2rem; padding-bottom: 4rem; }
.tl-hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; margin-top: 2.4rem; }
.tl-hero__note { margin: 1.8rem 0 0; max-width: 46ch; font-size: 1.4rem; line-height: 1.5; color: var(--vh-text-faint); }
@media (max-width: 639.98px) { .tl-hero__acts .tl-btn { flex: 1 1 100%; } }

/* the little store: an ink band with their logo, the kit on stone, one link */
.tl-shop { justify-self: center; width: 100%; max-width: 50rem; margin: 0; overflow: hidden; background: var(--vh-white);
  border: 1px solid var(--vh-line); border-radius: 6px; box-shadow: 0 10px 30px rgba(24, 21, 16, .07); }
.tl-shop__band { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; padding: 2.6rem 2rem 2.2rem;
  background: var(--vh-ink); color: var(--tl-cream-on-ink); text-align: center; }
.tl-shop__logo { display: inline-flex; align-items: center; justify-content: center; min-width: 17rem; padding: 1.2rem 2.2rem;
  border: 1.5px dashed rgba(242, 237, 225, .55); border-radius: 4px; font-family: var(--vh-display); font-weight: 600;
  font-size: 1.8rem; letter-spacing: .2em; text-transform: uppercase; }
.tl-shop__made { display: flex; align-items: center; gap: 1.2rem; }
.tl-shop__made::before, .tl-shop__made::after { content: ""; width: 3rem; height: 1px; background: rgba(242, 237, 225, .3); }
.tl-shop__made span { font-family: var(--vh-display); font-weight: 500; font-size: 1.2rem; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(242, 237, 225, .64); }
.tl-shop__line { font-size: 1.4rem; line-height: 1.4; color: rgba(242, 237, 225, .84); }
.tl-shop__lineup { display: flex; justify-content: center; align-items: flex-end; gap: 1.2rem; padding: 2.2rem 1.6rem 1.8rem;
  background: var(--tl-stone); }
.tl-shop__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1.6rem;
  margin: 0; padding: 1.3rem 1.8rem; border-top: 1px solid var(--vh-line); font-size: 1.35rem; color: var(--vh-muted); }
.tl-shop__url { display: inline-flex; align-items: center; gap: .7rem; font-weight: 500; color: var(--vh-ink); }
.tl-shop__url svg { width: 1.6rem; height: 1.6rem; flex: none; }

/* a garment standing on stone: the blank's own photo, its word under it */
.tl-pc { display: flex; flex-direction: column; align-items: center; flex: 0 1 13rem; min-width: 0; }
.tl-pc__ph { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; }
.tl-pc__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tl-pc--cap .tl-pc__ph { width: 82%; }
.tl-pc__ph .tl-pc__none { inset: 32%; width: 36%; height: 36%; opacity: .28; mix-blend-mode: normal; }
.tl-pc__name { margin-top: .8rem; font-family: var(--vh-display); font-weight: 500; font-size: 1.2rem; letter-spacing: .18em;
  text-transform: uppercase; text-align: center; color: var(--vh-ink); }

/* ── sections ──────────────────────────────────────────────────────────── */
.tl-sect { padding: 5.2rem 0 5.6rem; scroll-margin-top: 7rem; }
.tl-sect--cream { background: var(--vh-cream); }
.tl-sect--white { background: var(--vh-white); border-top: 1px solid var(--vh-line); border-bottom: 1px solid var(--vh-line); }

/* the four promises */
.tl-promises { display: grid; gap: 1.2rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.tl-promise { padding: 1.8rem 2rem 2rem; background: var(--vh-white); border: 1px solid var(--vh-line); border-radius: 6px; }
.tl-promise .tl-num { display: block; font-size: 1.5rem; letter-spacing: .08em; color: var(--vh-text-faint); }
.tl-promise h3, .tl-step h3 { margin: 1rem 0 .7rem; font-family: var(--vh-display); font-weight: 600; font-size: 1.95rem;
  line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; color: var(--vh-ink); }
.tl-promise p, .tl-step p { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--vh-muted); text-wrap: pretty; }

/* three steps */
.tl-steps { display: grid; gap: 2.4rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.tl-step { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1.4rem; align-items: start; align-content: start;
  padding-top: 1.8rem; border-top: 2px solid var(--vh-ink); }
.tl-step .tl-num { font-size: 4.4rem; line-height: .92; color: var(--vh-ink); }
.tl-step h3 { margin-top: .2rem; }

/* the example kits */
.tl-kits { display: grid; gap: 1.6rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.tl-kit { display: flex; flex-direction: column; overflow: hidden; background: var(--vh-white); border: 1px solid var(--vh-line);
  border-radius: 6px; }
.tl-kit__row { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; padding: 2.4rem 1.6rem 1.8rem;
  background: var(--tl-stone); border-bottom: 1px solid var(--vh-line); }
.tl-kit__body { display: flex; flex: 1; flex-direction: column; padding: 2rem 2.2rem 0; }
.tl-kit h3 { margin: 0; font-family: var(--vh-display); font-weight: 600; font-size: 2.2rem; line-height: 1.1; letter-spacing: .03em;
  text-transform: uppercase; color: var(--vh-ink); }
.tl-kit__line { margin: .8rem 0 0; font-size: 1.55rem; line-height: 1.5; color: var(--vh-ink); }
.tl-kit__for { margin: .4rem 0 1.8rem; font-size: 1.45rem; line-height: 1.5; color: var(--vh-muted); text-wrap: pretty; }
.tl-kit__lock { display: flex; align-items: center; gap: .8rem; margin: auto -2.2rem 0; padding: 1.3rem 2.2rem 1.4rem;
  border-top: 1px solid var(--vh-line); font-family: var(--vh-display); font-weight: 500; font-size: 1.2rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vh-ink); }
.tl-kit__lock svg { width: 1.5rem; height: 1.5rem; flex: none; }

/* merch stores: wave 3, so an ask, on an ink band */
.tl-merch { padding: 5.2rem 0 5.6rem; background: var(--vh-ink); color: var(--vh-white); }
.tl-merch__in { display: grid; gap: 1.8rem; }
.tl-merch .tl-h2 { color: var(--vh-white); }
.tl-merch p:not(.tl-eb) { margin: 0; max-width: 54ch; font-size: 1.65rem; line-height: 1.6; color: rgba(253, 252, 247, .84);
  text-wrap: pretty; }
.tl-merch .tl-btn { margin-top: 2.2rem; }

/* the questions */
.tl-faq { margin: 3rem 0 0; }
.tl-faq__row { padding: 2.1rem 0 2.2rem; border-bottom: 1px solid var(--vh-line); }
.tl-faq__row:first-child { border-top: 1px solid var(--vh-ink); }
.tl-faq dt { font-family: var(--vh-display); font-weight: 600; font-size: 1.7rem; line-height: 1.25; letter-spacing: .03em;
  text-transform: uppercase; color: var(--vh-ink); }
.tl-faq dd { margin: .9rem 0 0; max-width: 66ch; font-size: 1.55rem; line-height: 1.65; color: var(--vh-muted); text-wrap: pretty; }

/* ── the application: the quote form's kit, a few page rules ───────────── */
.tl-apply { scroll-margin-top: 6rem; }
.tl-apply .qf-page { padding-top: 0; }
/* the sent panel comes into view under the sticky masthead, not behind it */
.tl-apply .qf-unit--sent { scroll-margin-top: 9rem; }
.tl-apply .tl-field { margin-top: 2rem; }
.tl-apply .qf-lede { text-wrap: pretty; }
.tl-apply .tl-about { height: 9.6rem; min-height: 7.2rem; }
.tl-apply .tl-chipcol { min-width: 0; }
.tl-apply .qf-chips--4 .qf-chip { grid-column: span 3; }
.tl-apply .qf-chips--3 .qf-chip { grid-column: span 2; }
.tl-apply .qf-logo-body > .qf-help { margin-top: 1rem; }
.tl-apply .qf-contact .qf-f { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .tl-wrap { padding: 0 3.2rem; }
  .tl-promise { padding: 2.2rem 2.2rem 2.4rem; }
  .tl-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .tl-apply .qf-contact .qf-f, .tl-apply .qf-contact .qf-go { grid-column: auto; }
}

@media (min-width: 900px) {
  .tl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; }
  .tl-step { grid-template-columns: 1fr; gap: .8rem; padding-top: 2.2rem; }
  .tl-kits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .tl-merch__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6.4rem; align-items: center; }
}

@media (min-width: 1000px) {
  .tl-hero__in { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 6.4rem;
    padding-top: 6.4rem; padding-bottom: 6.8rem; }
  .tl-shop { justify-self: end; }
  .tl-sect { padding: 8rem 0 8.4rem; }
  .tl-merch { padding: 7.2rem 0; }
  .tl-apply .qf-page { padding-top: 6.4rem; }
  .tl-apply .qf-head { display: block; }
  .tl-apply .qf-head .qf-lede { margin-top: 1rem; }
  .tl-apply .qf-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .tl-promises { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tl-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5.6rem; }
  .tl-faq__row:nth-child(2) { border-top: 1px solid var(--vh-ink); }
}

@media (hover: hover) {
  .tl-kit { transition: border-color .2s ease; }
  .tl-kit:hover { border-color: var(--vh-line-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .tl-btn, .tl-kit { transition: none; }
}