/* Bankable — page components shared by the homepage and subpages (tiers, matrix, FAQ, audience cards) */

/* Sub-page hero (light) */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-12), 6vw, var(--space-20)); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #fff, var(--canvas)); }
.page-hero .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; }
.page-hero h1 { font-size: var(--text-3xl); font-weight: 900; color: var(--navy); letter-spacing: -0.035em; line-height: 1; }
.page-hero h1 span { color: var(--navy-2); }
.page-hero .copy { display: grid; gap: var(--space-5); }
.page-hero p.lede { font-size: var(--text-lg); line-height: 1.45; max-width: 42ch; }
.page-hero .cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.page-hero .fine { font-size: var(--text-xs); color: var(--faint); }
.page-hero .visual { display: flex; justify-content: center; }
.crumbs { display: flex; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--faint); }
.crumbs a:hover { color: var(--navy); }
.crumbs b { color: var(--navy-2); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* Audience cards */
.audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.aud { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-5); padding: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); overflow: hidden; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.aud:hover { transform: translateY(-3px); border-color: var(--navy-2); box-shadow: 0 24px 60px rgba(13,31,71,.12); }
.aud.dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.aud.dark:hover { border-color: var(--gold); }
.aud h3 { font-size: var(--text-xl); color: var(--navy); letter-spacing: -0.03em; }
.aud.dark h3 { color: #fff; }
.aud p { color: var(--muted); font-size: var(--text-base); max-width: 44ch; }
.aud.dark p { color: rgba(255,255,255,.72); }
.aud ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.aud.dark ul { color: rgba(255,255,255,.8); }
.aud li { display: flex; gap: var(--space-2); align-items: flex-start; }
.aud li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--gold); }
.aud .tiers-line { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aud .chip { font-size: var(--text-xs); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--border); color: var(--navy-2); }
.aud.dark .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: var(--gold); }
.aud .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.aud .from { font-size: var(--text-sm); color: var(--muted); }
.aud .from b { color: var(--navy); font-size: var(--text-lg); font-weight: 900; letter-spacing: -0.02em; }
.aud.dark .from { color: rgba(255,255,255,.6); }
.aud.dark .from b { color: #fff; }
.aud::after { content: ""; position: absolute; right: -8%; bottom: -22%; width: 46%; aspect-ratio: 1; background: url("assets/brand/bankable-mark-knockout.svg") center/contain no-repeat; opacity: .06; pointer-events: none; }
.aud.dark::after { opacity: .08; }
@media (max-width: 860px) { .audience { grid-template-columns: 1fr; } }

/* Billing toggle */
.billing { display: inline-flex; align-items: center; gap: var(--space-3); padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); }
.billing button { min-height: 38px; padding: 0 var(--space-4); border-radius: 999px; border: 0; background: transparent; font-size: var(--text-sm); font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: var(--space-2); transition: background .25s var(--ease), color .25s var(--ease); }
.billing button.on { background: var(--navy); color: #fff; }
.billing .save { font-size: var(--text-xs); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); border: 1px solid var(--gold-border); padding: 2px 8px; border-radius: 999px; }
.billing button.on .save { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.dark-section .billing { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.dark-section .billing button { color: rgba(255,255,255,.7); }
.dark-section .billing button.on { background: var(--gold); color: var(--ink); }
.dark-section .billing button.on .save { background: var(--navy); color: var(--gold); border-color: var(--navy); }

/* Tier cards */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.tier { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.tier.featured { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 30px 60px rgba(13,31,71,.25); }
.tier .name { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tier .name h3 { font-size: var(--text-lg); color: var(--navy); }
.tier.featured .name h3 { color: #fff; }
.tier .who { font-size: var(--text-xs); color: var(--muted); min-height: 2.6em; }
.tier.featured .who { color: rgba(255,255,255,.65); }
.tier .price { display: grid; gap: 2px; }
.tier .price .amt { font-size: var(--text-xl); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.tier.featured .price .amt { color: #fff; }
.tier .price .per { font-size: var(--text-xs); color: var(--muted); font-weight: 700; min-height: 1.4em; }
.tier.featured .price .per { color: rgba(255,255,255,.6); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); align-content: start; }
.tier.featured ul { color: rgba(255,255,255,.82); }
.tier li { display: flex; gap: var(--space-2); align-items: flex-start; }
.tier li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tier li.plus { font-weight: 700; color: var(--navy-2); }
.tier.featured li.plus { color: var(--gold); }
.tier li.plus::before { background: transparent; }
.tier .badge { font-size: 0.65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--gold); color: var(--ink); white-space: nowrap; }
.tier .badge.soft { background: var(--gold-tint); color: var(--gold-deep); border: 1px solid var(--gold-border); }
.tier .fine { font-size: var(--text-xs); color: var(--faint); }
.tier.featured .fine { color: rgba(255,255,255,.5); }
.tier .btn { width: 100%; }
.dark-section .tier { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #fff; }
.dark-section .tier .name h3, .dark-section .tier .price .amt { color: #fff; }
.dark-section .tier .who, .dark-section .tier ul, .dark-section .tier .price .per { color: rgba(255,255,255,.7); }
.dark-section .tier .fine { color: rgba(255,255,255,.45); }
.dark-section .tier.featured { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.dark-section .tier.featured .name h3, .dark-section .tier.featured .price .amt { color: var(--ink); }
.dark-section .tier.featured .who, .dark-section .tier.featured ul, .dark-section .tier.featured .price .per, .dark-section .tier.featured .fine { color: rgba(20,22,26,.72); }
.dark-section .tier.featured li::before { background: var(--navy); }
.dark-section .tier.featured li.plus { color: var(--navy); }
.dark-section .tier.featured .badge { background: var(--navy); color: var(--gold); }
.tiers.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.tiers.five .tier { padding: var(--space-5); }
.tiers.five .tier .price .amt { font-size: var(--text-lg); }
@media (max-width: 1280px) { .tiers.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiers.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiers, .tiers.five { grid-template-columns: 1fr; } }

/* Feature matrix */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.matrix { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 760px; }
.matrix th, .matrix td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); text-align: center; vertical-align: middle; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix thead th { background: var(--card); font-size: var(--text-xs); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--navy); z-index: 1; }
.matrix thead th.hi { color: var(--navy); }
.matrix tbody th { font-weight: 700; color: var(--ink); }
.matrix tbody th small { display: block; font-weight: 500; color: var(--faint); font-size: var(--text-xs); }
.matrix td { color: var(--muted); }
.matrix td.yes::before { content: ""; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--navy-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; vertical-align: middle; }
.matrix td.no { color: var(--border); }
.matrix td.no::before { content: "—"; }
.matrix td b { color: var(--ink); font-weight: 700; }
.matrix td small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--faint); }
.matrix tr.group th { background: var(--canvas); font-size: var(--text-xs); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-2); padding-top: var(--space-4); }
.matrix tr:last-child td, .matrix tr:last-child th { border-bottom: 0; }
/* The header row sticks under the nav only once the table fits without a horizontal scroller: a sticky cell inside an
   overflow container anchors to that container, not the page, and would sit 68px too low over the first group row. */
/* 7 Oct 2026 (audit): the wrapper only drops its own scroller once the whole table fits. The French matrix needs about
   1,180 px, so between 840 and 1,279 px it overflowed the page sideways; it now scrolls inside its frame there. */
@media (min-width: 1280px) { .matrix-wrap { overflow: visible; } .matrix thead th { position: sticky; top: 68px; z-index: 1; } }
.matrix-wrap.mx-scroll { overflow-x: auto; }
.matrix-wrap.mx-scroll .matrix thead th { position: static; }

/* Feature rows (alternating) */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; padding-block: clamp(var(--space-8), 5vw, var(--space-12)); }
.feat + .feat { border-top: 1px solid var(--border); }
.feat:nth-child(even) .feat-copy { order: 2; }
.feat-copy { display: grid; gap: var(--space-4); }
.feat-copy h3 { font-size: var(--text-xl); color: var(--navy); letter-spacing: -0.03em; }
.feat-copy p { color: var(--muted); }
.feat-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.feat-copy li { display: flex; gap: var(--space-2); }
.feat-copy li::before { content: "—"; color: var(--gold-deep); font-weight: 900; }
.feat-visual { display: flex; justify-content: center; }
.feat-visual .phone { max-width: 280px; }
.feat-visual .panel-mock { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-3); box-shadow: 0 30px 60px rgba(13,31,71,.12); }
.panel-mock .row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); }
.panel-mock .row:last-child { border-bottom: 0; }
.panel-mock .row b { color: var(--navy); }
.panel-mock .row span { color: var(--muted); }
.panel-mock .tag { font-size: var(--text-xs); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--gold-tint); border: 1px solid var(--gold-border); color: var(--gold-deep); }
.panel-mock .tag.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.panel-mock .tag.green { background: #E8F3EE; border-color: #CFE5DA; color: var(--green); }
.panel-mock .tag { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) { .panel-mock .tag { letter-spacing: .04em; padding: 3px 6px; } }
.panel-mock .bar { height: 8px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.panel-mock .bar i { display: block; height: 100%; background: var(--navy-2); }
.panel-mock .head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-3); border-bottom: 2px solid var(--navy); }
.panel-mock .head .kicker { font-size: 0.65rem; }
.panel-mock .head img { height: 20px; width: auto; }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } .feat:nth-child(even) .feat-copy { order: 0; } }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stat { padding: var(--space-5); border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); display: grid; gap: var(--space-1); }
.stat b { font-size: var(--text-xl); font-weight: 900; color: var(--navy); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--text-xs); color: var(--muted); font-weight: 700; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ */
.faq { display: grid; gap: var(--space-2); max-width: 820px; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); font-weight: 700; color: var(--navy); font-size: var(--text-base); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); color: var(--navy-2); font-weight: 900; transition: transform .3s var(--ease), background .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--gold); color: var(--ink); border-color: var(--gold); }
.faq details p { padding: 0 var(--space-5) var(--space-5); color: var(--muted); font-size: var(--text-sm); max-width: 70ch; }

/* Contact / lead panel */
.lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); padding: clamp(var(--space-8), 5vw, var(--space-12)); border-radius: var(--radius-lg); background: var(--navy); color: #fff; }
.lead h2 { font-size: var(--text-xl); }
.lead p { color: rgba(255,255,255,.72); margin-top: var(--space-3); max-width: 46ch; }
.lead form { display: grid; gap: var(--space-3); }
.lead label { display: grid; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: rgba(255,255,255,.7); }
.lead input, .lead select, .lead textarea { width: 100%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: var(--radius-sm); color: #fff; padding: 0 var(--space-3); height: 46px; font: 700 var(--text-sm)/1 var(--font); outline: none; }
.lead textarea { height: auto; padding: var(--space-3); line-height: 1.4; resize: vertical; }
.lead select option { color: var(--ink); }
.lead input:focus, .lead select:focus, .lead textarea:focus { border-color: var(--gold); }
.lead .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lead .ok { padding: var(--space-4); border-radius: var(--radius-sm); background: rgba(226,175,68,.14); border: 1px solid rgba(226,175,68,.35); color: var(--gold); font-weight: 700; font-size: var(--text-sm); }
.lead .fine { font-size: var(--text-xs); color: rgba(255,255,255,.45); }
@media (max-width: 860px) { .lead { grid-template-columns: 1fr; } .lead .two { grid-template-columns: 1fr; } }

/* Section themes */
.light-section { background: var(--canvas); color: var(--ink); }
.white-section { background: var(--card); color: var(--ink); }
.dark-section { background: var(--navy); color: #fff; }
.dark-section .section-head h2 { color: #fff; }
.dark-section .lede { color: rgba(255,255,255,.7); }
.center { text-align: center; justify-items: center; }
.center .lede { margin-inline: auto; }
.inline-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* v2 pricing: founding-member note and coming-soon pill */
.founding{max-width:640px;margin:14px auto 0;text-align:center;font-size:.9rem;line-height:1.5;color:var(--muted,#5B6270)}.founding code{font-size:.85em;padding:1px 6px;background:rgba(226,175,68,.18);border:1px solid rgba(226,175,68,.5)}
.soon{display:inline-block;margin-left:6px;padding:2px 7px;font-size:.66em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#173A7A;background:#E8ECF4;border:1px solid #D3D7DF;vertical-align:middle}

/* Model grid — fifteen deal models in three groups (shared EN/FR, home + features) */
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.model-grid .mg { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid rgba(13,31,71,.12); border-radius: var(--radius-sm); background: var(--card); }
.model-grid .mg > header { display: grid; gap: 6px; }
.model-grid .mg h3 { font-size: var(--text-lg); font-weight: 900; letter-spacing: -0.02em; color: var(--navy); }
.model-grid .mg .mg-note { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.model-grid .mg ul { list-style: none; margin: 0; padding: 0; display: grid; }
.model-grid .mg li { padding: var(--space-3) 0; border-top: 1px solid rgba(13,31,71,.1); font-size: var(--text-sm); }
.model-grid .mg li b { display: block; font-size: var(--text-sm); font-weight: 900; color: var(--navy); }
.model-grid .mg li span { display: block; margin-top: 2px; color: var(--muted); font-weight: 500; line-height: 1.45; }
.model-grid .mg .count { font-variant-numeric: tabular-nums; color: var(--gold-deep); font-weight: 900; font-size: var(--text-xs); letter-spacing: .1em; }

/* Dark home page (body.a) */
.a .model-grid .mg { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.a .model-grid .mg h3, .a .model-grid .mg li b { color: #fff; }
.a .model-grid .mg .mg-note { color: rgba(255,255,255,.55); }
.a .model-grid .mg li { border-top-color: rgba(255,255,255,.12); }
.a .model-grid .mg li span { color: rgba(255,255,255,.6); }
.a .model-grid .mg .count { color: var(--gold); }

@media (max-width: 960px) { .model-grid { grid-template-columns: 1fr; } }

/* Narrow phones (checked at 320–430 px, EN + FR): keep grids and chip rows inside the viewport */
@media (max-width: 560px) {
  .pricing-head, .section-head, .examples, .ex, .two-tiers, .tier, .pricing-hero .container { grid-template-columns: minmax(0, 1fr); }
  .billing, .ex .k { flex-wrap: wrap; }
  .hero-grid > *, .hero-copy > *, .grid > *, .split > * { min-width: 0; }
  .btn-lg { white-space: normal; text-align: center; line-height: 1.25; padding-block: var(--space-3); }
}
@media (max-width: 380px) {
  .tier .btn, .audience-links a { white-space: normal; text-align: center; }
}

/* iPhone / iPad — coming soon */
.matrix td.cs { font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep);  white-space: nowrap; }
@media (max-width: 820px) { .matrix td.cs { white-space: normal; font-size: 0.62rem; letter-spacing: .04em; line-height: 1.25; } }