/* The front door (Phase 17, plan 07). Layout on DESIGN.md tokens (app.css), matching
   docs/design/redesign/front-door.html at 1440 and 390. Paper page, Shallows-tinted bands between sections.
   Every rule sits under .front-page. Stick No Bills is for the H1 and H2s only. */
.front-page { background: var(--paper); color: var(--ink); color-scheme: light; }
.front-page h1,
.front-page h2,
.front-page h3,
.front-page p,
.front-page ul,
.front-page ol,
.front-page figure { margin: 0; }
.front-page ul,
.front-page ol { padding: 0; list-style: none; }

.front-page .front-wrap { max-width: 76rem; margin: 0 auto; padding: 0 var(--space-xl); }
.front-page .front-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.front-page .front-band { padding: 4rem 0; border-bottom: 1px solid var(--line); }
.front-page .front-band--tint { background: var(--page); }
.front-page .front-band--hero { padding: 4.5rem 0 4rem; }

.front-page .front-eyebrow { font: 500 .9375rem/1.3 var(--font-mono); color: var(--subtle); }
.front-page h1 { font: 700 clamp(2.5rem, 8vw, 3.75rem)/1 var(--font-display); letter-spacing: .01em; margin: 1rem 0 1.25rem; text-wrap: balance; }
.front-page h2 { font: 600 2.5rem/1.05 var(--font-display); letter-spacing: .01em; }
.front-page h3 { font: 600 1.25rem/1.3 var(--font-sans); }

/* hero */
.front-page .front-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.front-page .front-lead { font-size: 1.25rem; line-height: 1.5; color: var(--muted); max-width: 32rem; }
.front-page .front-lead b { color: var(--ink); font-weight: 500; }
.front-page .front-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.front-page .front-cta { min-height: 3.25rem; padding: 0 1.375rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; }
.front-page .front-feeline { margin-top: .75rem; font-size: 1rem; color: var(--muted); }
.front-page .front-feeline .front-mono { color: var(--ink); font-weight: 600; }
.front-page .front-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--accent); }

.front-page .front-mock { background: var(--page); border: 1px solid var(--line); border-radius: 1.25rem; padding: 1rem; }
.front-page .front-live-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: inset 0 3px 0 var(--accent); padding: 1.125rem 1.25rem 1rem; }
.front-page .front-live-event { font: 600 1.125rem/1.3 var(--font-sans); margin-bottom: .5rem; }
.front-page .front-example { display: inline-block; font: 600 .875rem/1 var(--font-mono); color: var(--ink); background: var(--tint); border-radius: .375rem; padding: .375rem .5rem; margin-bottom: .5rem; }
.front-page .front-live-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .875rem; font-size: 1rem; color: var(--muted); }
.front-page .front-live-foot b { font: 600 1rem var(--font-mono); color: var(--ink); }
.front-page .front-live-foot a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.front-page figcaption { margin-top: .75rem; font: 500 .875rem/1.4 var(--font-mono); color: var(--subtle); }

/* happening now */
.front-page .front-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.front-page .front-sechead p { font-size: 1.0625rem; color: var(--muted); }
.front-page .front-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: .75rem; }
.front-page .front-more { margin-top: 1.5rem; }
.front-page .front-waitlist { display: inline-flex; align-items: center; gap: .375rem; }
.front-page .front-waitlist svg { width: 1rem; height: 1rem; flex: none; }
.front-page .front-colh { font: 600 1.0625rem/1.3 var(--font-sans); margin: 0 0 .75rem; }
.front-page .front-count { font: 500 .9375rem var(--font-mono); color: var(--muted); }
.front-page .front-cards { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.front-page .front-ecard { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.125rem 1.25rem; color: var(--ink); text-decoration: none; min-height: 2.75rem; }
.front-page .front-ecard:hover { border-color: var(--control); }
.front-page .front-etop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.front-page .front-ename { font: 600 1.25rem/1.3 var(--font-sans); }
.front-page .front-ewhere { display: flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: 1rem; color: var(--muted); }
.front-page .front-ewhere svg { width: 1rem; height: 1rem; flex: none; }
.front-page .front-tag { display: inline-flex; align-items: center; min-height: 1.875rem; padding: 0 .625rem; border-radius: .375rem; background: var(--tint); color: var(--ink); font: 600 .875rem/1 var(--font-mono); white-space: nowrap; }
.front-page .front-estats { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--line); font-size: 1rem; color: var(--muted); }
.front-page .front-estats b { font: 600 1.0625rem var(--font-mono); color: var(--ink); }
.front-page .front-enote { margin-top: .625rem; font-size: 1rem; color: var(--muted); }
.front-page .front-elig { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--tint); font-size: 1rem; line-height: 1.35; }
.front-page .front-elig svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--accent); }
.front-page .front-elig b { font-weight: 600; }

/* how event day works */
.front-page .front-lede { max-width: 40rem; font-size: 1.125rem; color: var(--muted); margin-top: .75rem; }
.front-page .front-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2.25rem; }
.front-page .front-step { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem; background: var(--paper); min-width: 0; }
.front-page .front-num { font: 600 .9375rem var(--font-mono); color: var(--accent); }
.front-page .front-step h3 { margin: .375rem 0 .5rem; }
.front-page .front-step p { font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.front-page .front-slice { margin-top: auto; padding-top: 1.25rem; min-width: 0; }
.front-page .front-slice-in { border: 1px solid var(--line); border-radius: .75rem; background: var(--page); padding: .75rem; font-size: .9375rem; overflow-wrap: anywhere; }
.front-page .front-dv { font-weight: 600; color: var(--ink); }
.front-page .front-dvsub { font-size: .875rem; color: var(--muted); margin-top: .125rem; line-height: 1.4; }
.front-page .front-choices { display: grid; gap: .375rem; margin-top: .5rem; }
.front-page .front-sms { background: var(--paper); border: 1px solid var(--line); border-radius: .875rem .875rem .875rem .25rem; padding: .625rem .75rem; line-height: 1.45; margin-top: .5rem; }
.front-page .front-sms-meta { font: 500 .875rem var(--font-mono); color: var(--subtle); margin-bottom: .375rem; }
.front-page .front-demo { margin-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem 1.75rem; border-radius: var(--r-card); background: var(--tint); }
.front-page .front-demo p { font-size: 1.0625rem; color: var(--muted); margin-top: .25rem; }

.front-page .front-bar { display: block; width: 100%; height: .5rem; margin-top: .625rem; border: 0; border-radius: .25rem; background: var(--line); appearance: none; overflow: hidden; }
.front-page .front-bar::-webkit-progress-bar { background: var(--line); }
.front-page .front-bar::-webkit-progress-value { background: var(--accent); border-radius: .25rem; }
.front-page .front-bar::-moz-progress-bar { background: var(--accent); border-radius: .25rem; }
.front-page .front-next { margin-top: .75rem; font-size: .9375rem; color: var(--ink); line-height: 1.4; }
.front-page .front-ecard { overflow-wrap: anywhere; }
.front-page .front-etop { flex-wrap: nowrap; }
.front-page .front-etop .front-tag { flex: none; min-width: auto; }
.front-page .front-etop > * { min-width: 0; }
.front-page .front-cards, .front-page .front-live-grid > * { min-width: 0; }

/* the fee */
.front-page .front-feegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.front-page .front-feegrid .front-eyebrow { margin-bottom: .5rem; }
.front-page .front-bigfee { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1.25rem; }
.front-page .front-bigfee b { font: 600 4.5rem/1 var(--font-mono); letter-spacing: -.02em; }
.front-page .front-bigfee span { font-size: 1.25rem; color: var(--muted); }
.front-page .front-feelist { display: grid; gap: .625rem; max-width: 32rem; }
.front-page .front-feelist li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; font-size: 1.0625rem; line-height: 1.5; }
.front-page .front-feelist svg { width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--accent); }
.front-page .front-receipt { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem 1.75rem; }
.front-page .front-receipt h3 { font-size: 1.125rem; }
.front-page .front-sub { font-size: 1rem; color: var(--muted); margin-top: .125rem; }
.front-page .front-lines { margin-top: 1.25rem; display: grid; }
.front-page .front-ln { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-top: 1px solid var(--line); font-size: 1.0625rem; }
.front-page .front-tot { border-top: 2px solid var(--ink); font-weight: 600; font-size: 1.1875rem; }

/* footer */
.front-page .front-foot { padding: 2.5rem 0 3rem; }
.front-page .front-foot .front-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.front-page .front-foot nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.front-page .front-foot nav a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 .625rem; color: var(--ink); text-decoration: none; }
.front-page .front-legal { margin-left: auto; font-size: .9375rem; color: var(--subtle); }

@media (min-width: 48rem) {
  .front-page .front-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; }
  .front-page .front-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-page .front-feegrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

@media (min-width: 72rem) {
  .front-page .front-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  .front-page .front-wrap { padding: 0 var(--space-md); }
  .front-page .front-band { padding: 2.5rem 0; }
  .front-page h2 { font-size: 2rem; }
  .front-page .front-bigfee b { font-size: 3.5rem; }
  .front-page .front-legal { margin-left: 0; }
  .front-page .front-ctas { flex-direction: column; }
  .front-page .front-cta { width: 100%; }
}