/* Shared section patterns, the "unboxed" system (Cole, 10-09-2026, concept A).
   One rule: a box means you can tap it. Reading content sits on the canvas, split
   by space and 1px hairlines. Boxes stay only on clickable things (buttons, venue
   tiles, the video, the quiz, FAQ rows, forms), and foxfire-glass.css frosts those.
   Linked AFTER _brand.generated.css and _shell.css, BEFORE foxfire-glass.css.
   Pages never restate these. Colors come from the token variables only. */

/* Logos: a bare strip, no tiles. */
.logo-strip{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:2.25rem 2rem;margin-top:1rem}
@media (min-width:900px){.logo-strip{grid-template-columns:repeat(8,1fr)}}
.logo-strip img{height:52px;width:100%;object-fit:contain;opacity:.88}
.trusted{padding-block:3.5rem 1rem}
.trusted .logo-strip{margin-top:0;gap:2.5rem 2.75rem}
.trusted .logo-strip img{height:76px}
.trusted .tagline{margin-top:2.25rem}
@media (max-width:720px){
  .trusted{padding-block:2.5rem .5rem}
  .trusted .logo-strip{gap:1.75rem 1.25rem}
  .trusted .logo-strip img{height:58px}
}

/* Flow: numbered steps. Subgrid keeps number, heading and copy on the same y in every column. */
.flow{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3.5rem;text-align:left}
.flow-step{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;padding-inline:clamp(1rem,2vw,1.75rem)}
.flow-step+.flow-step{border-left:1px solid var(--border)}
.flow-step:first-child{padding-left:0}
.flow-step:last-child{padding-right:0}
.flow-n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,5vw,3.75rem);line-height:1;margin-bottom:1.1rem}
.flow-step:nth-child(1) .flow-n{color:var(--secondary)}
.flow-step:nth-child(2) .flow-n{color:var(--primary)}
.flow-step:nth-child(3) .flow-n{color:var(--money)}
.flow-step h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:.6rem}
.flow-step p{color:rgba(250,250,250,.78);line-height:1.7}
@media (max-width:900px){
  .flow{grid-template-columns:1fr;margin-top:2rem}
  .flow-step,.flow-step:first-child,.flow-step:last-child{grid-row:auto;grid-template-rows:none;grid-template-columns:3.5rem 1fr;column-gap:.5rem;padding:1.25rem 0}
  .flow-step+.flow-step{border-left:0;border-top:1px solid var(--border)}
  .flow-n{font-size:2.25rem;grid-row:1/3;margin:0}
  .flow-step h3{font-size:1.15rem}
  .flow-step p{grid-column:2;font-size:1rem;line-height:1.55}
}

/* Trio and duo: open columns split by hairlines. Write each column as a heading plus
   a body; subgrid lines the two parts up across columns. */
.trio,.duo{display:grid;margin-top:3rem;text-align:left}
.trio{grid-template-columns:repeat(3,1fr)}
.duo{grid-template-columns:repeat(2,1fr)}
.trio>*,.duo>*{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:.6rem;padding-inline:clamp(1rem,2.5vw,2.5rem);align-content:start}
.trio>*+*,.duo>*+*{border-left:1px solid var(--border)}
.trio>:first-child,.duo>:first-child{padding-left:0}
.trio>:last-child,.duo>:last-child{padding-right:0}
.trio h3,.duo h3{font-family:var(--font-display);font-size:1.35rem;font-weight:700;line-height:1.25}
.trio p,.duo p{color:rgba(250,250,250,.78);line-height:1.7}
@media (max-width:860px){
  .trio,.duo{grid-template-columns:1fr}
  .trio>*,.duo>*{grid-row:auto;grid-template-rows:none;padding:1.5rem 0}
  .trio>*+*,.duo>*+*{border-left:0;border-top:1px solid var(--border)}
}

/* Stat row: big numbers on the canvas, label under each, hairline between. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-top:3rem;text-align:center}
.stat-row>*{padding:.5rem 1.25rem}
.stat-row>*+*{border-left:1px solid var(--border)}
.stat-row .n{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.1;letter-spacing:-.02em}
.stat-row .l{display:block;margin-top:.5rem;color:var(--muted-fg);font-size:1rem}
@media (max-width:720px){
  .stat-row{grid-template-columns:1fr 1fr;gap:1.5rem 0}
  .stat-row>*:nth-child(odd){border-left:0}
}

/* Open list: ruled rows, no markers. Use .checks when each row means "included". */
.open-list{list-style:none;margin:3rem 0 0;text-align:left}
.open-list li{padding:1.05rem 0;border-bottom:1px solid var(--border);color:rgba(250,250,250,.85);font-size:1.1rem;line-height:1.6}
.open-list li:first-child{border-top:1px solid var(--border)}
.open-list b{color:var(--fg)}

/* Credentials, open: a row of facts with a hairline on top of each. */
.cred-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem 3rem;margin-top:3rem;text-align:left}
.cred-open>*{border-top:1px solid var(--border);padding-top:1.1rem}
.cred-open b{display:block;color:var(--fg);font-size:1.1rem;line-height:1.4;margin-bottom:.35rem}
.cred-open p,.cred-open span{color:rgba(250,250,250,.78);line-height:1.65}

/* Gallery: rounded photos, caption under each, no frame. */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:3rem}
@media (max-width:860px){.shots{grid-template-columns:repeat(2,1fr)}}
.shots figure{text-align:left}
.shots img{aspect-ratio:9/16;object-fit:cover;object-position:top;width:100%;border-radius:var(--radius)}
.shots figcaption{margin-top:.8rem;font-size:.95rem;font-weight:600;color:rgba(250,250,250,.85)}

/* Voices: two testimonials. Subgrid lines up the money line, each quote and the name row. */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:3.5rem auto 0;text-align:left;max-width:72rem}
.voice{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding:0 clamp(1.5rem,4vw,3.5rem)}
.voice:first-child{padding-left:0}
.voice+.voice{border-left:1px solid var(--border)}
.voice-stat{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.02em}
.voice blockquote{font-size:1.15rem;line-height:1.6;font-style:italic;margin-top:1.4rem;color:var(--fg)}
.voice blockquote+blockquote{margin-top:1rem;color:rgba(250,250,250,.78);font-size:1.0625rem}
.voice-who{display:flex;gap:1rem;align-items:center;align-self:start;padding-top:2rem}
.voice-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid}
.voice-who b{display:block;font-family:var(--font-display);font-size:1.05rem}
.voice-who span{font-size:.9rem;color:var(--muted-fg)}
.voice .stars{color:var(--warning,#FFC107);letter-spacing:.2em;font-size:.85rem}
@media (max-width:720px){
  .voices{grid-template-columns:1fr}
  .voice,.voice:first-child{grid-row:auto;grid-template-rows:none;padding:2rem 0}
  .voice+.voice{border-left:0;border-top:1px solid var(--border)}
}

/* Proofs: open blocks, hairline on top, a line icon that names the point. */
.proofs{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem 3.5rem;margin-top:3.25rem;text-align:left;list-style:none}
.proofs li{border-top:1px solid var(--border);padding-top:1.25rem;color:rgba(250,250,250,.78);line-height:1.7}
.proofs li b{display:block;color:var(--fg);font-size:1.15rem;line-height:1.4;margin-bottom:.4rem}
.proofs .ico{display:block;color:var(--secondary);margin-bottom:.85rem}
@media (max-width:720px){.proofs{grid-template-columns:1fr;gap:1.75rem}}

/* Checks: a green tick means "included". */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:0 3.5rem;list-style:none;margin:3rem 0 0;text-align:left}
.checks li{display:flex;align-items:center;gap:.9rem;padding:1.05rem 0;border-bottom:1px solid var(--border);font-size:1.1rem;color:rgba(250,250,250,.88)}
.checks .tick{flex-shrink:0;color:var(--money)}
.checks-foot{margin-top:2rem;color:var(--muted-fg);font-size:1rem}
@media (max-width:720px){.checks{grid-template-columns:1fr}}

/* FAQ: two columns at full content width, one column under 860px. */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem;margin-top:3rem;text-align:left;align-items:start}
.faq-cols .faq-list{max-width:none;margin:0}
@media (max-width:860px){.faq-cols{grid-template-columns:1fr}}

/* Closing section: headline, one sentence, green button, the price line. No image. */
.cta-final{text-align:center;border-top:1px solid var(--border);position:relative}
.cta-final .wrap{position:relative;z-index:1}
.cta-final h2{font-size:clamp(2.3rem,5.5vw,4rem);max-width:22ch;margin-inline:auto;text-wrap:balance}
.cta-final .desc{font-size:clamp(1.1rem,1.5vw,1.3rem);color:rgba(250,250,250,.82);max-width:40rem;margin:1.25rem auto 0}
.cta-act{margin-top:2.25rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.cta-facts{color:var(--muted-fg);font-size:1rem}