/* THE NEW LANDING (10-15) — additions on top of ib-base.css: the headline under the wordmark, two buttons, the candle card on a dark panel,
   the comparison table, the three "misses" columns, and the key-candle fold on the example cards. Same tokens, same type. */
.l2-head{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.12;color:var(--cream);margin:16px 0 10px;max-width:22ch;text-wrap:balance}
.l2-subline{margin:0 0 28px;max-width:46ch;color:rgba(239,231,220,.82);font-size:clamp(.95rem,1.6vw,1.1rem);line-height:1.6}
.l2-ctas{display:flex;flex-wrap:wrap;gap:12px}
.l2-ctas .cta{min-width:min(100%,300px)}
.l2-cta2{background:transparent;color:var(--cream);border:1px solid rgba(239,231,220,.45)}
.l2-cta2:hover{background:rgba(239,231,220,.08)}

/* the candle card, as on the member chart, on the dark panel */
.l2-cardpic{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,56px)}
.l2-cardwrap{width:min(380px,100%)}
.l2-cc{background:rgba(220,224,240,.94);border:1px solid rgba(58,50,44,.18);border-radius:10px;padding:14px 16px;color:var(--ink);font-size:.86rem;line-height:1.6;
  font-variant-numeric:tabular-nums;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.l2-cc .h{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid rgba(58,50,44,.18);padding-bottom:5px;margin-bottom:6px}
.l2-cc .t{font-weight:700;letter-spacing:.06em;color:var(--navy)}
.l2-cc .ohlc{display:flex;flex-wrap:wrap;gap:0 12px}
.l2-cc .k{color:var(--ink-soft)}
.l2-cc .up{color:#2c5a92} .l2-cc .dn{color:#c4501f}
.l2-cc .w{margin-top:4px;color:var(--ink-soft);font-size:.8rem}
.l2-cc-sm{box-shadow:none;font-size:.8rem;margin-top:8px}

/* why not just chart indicators */
.l2-why{background:var(--dots),linear-gradient(180deg,var(--lav-1),var(--lav-2));padding:clamp(48px,7vw,110px) clamp(16px,4vw,56px)}
.l2-tablewrap{overflow-x:auto;border-top:1px solid var(--rule)}
.l2-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
.l2-table th,.l2-table td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-bottom:1px solid var(--rule)}
.l2-table thead th{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.l2-table thead th:last-child{color:var(--navy)}
.l2-table tbody th{font-weight:400;color:var(--ink-soft);width:22%}
.l2-table td:nth-child(2){color:var(--ink-soft);width:34%}
.l2-table td:last-child{color:var(--ink)}

/* we show our misses */
.l2-misses{background:var(--dots),linear-gradient(180deg,var(--sand-1),var(--sand-2));padding:clamp(48px,7vw,110px) clamp(16px,4vw,56px)}
.l2-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.l2-three > div{padding:28px 26px 30px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.l2-three > div + div{padding-left:26px;border-left:1px solid var(--rule)}
.l2-three h3{margin:0;font-weight:400;font-size:1.45rem;color:var(--navy)}
.l2-three p{margin:0}
.l2-three b{color:var(--navy)}
@media (max-width:820px){.l2-three{grid-template-columns:1fr}.l2-three > div + div{padding-left:0;border-left:0}}

/* example cards: alive / died and the key candle */
.card .move.gone{color:var(--ink-soft)}
.l2-key{grid-column:1/-1;margin-top:6px}
.l2-key summary{cursor:pointer;font-size:.82rem;color:var(--navy);letter-spacing:.04em}
.l2-key summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* phones: each comparison row becomes one block, both columns visible */
@media (max-width:700px){
  .l2-table{min-width:0}
  .l2-table thead{display:none}
  .l2-table,.l2-table tbody,.l2-table tr,.l2-table th,.l2-table td{display:block;width:auto}
  .l2-table tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .l2-table th,.l2-table td{border:0;padding:3px 0}
  .l2-table tbody th{width:auto;color:var(--navy);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
  .l2-table td::before{content:attr(data-label) ": ";color:var(--ink-soft);font-size:.8rem}
  .l2-table td:nth-child(2){width:auto}
  .l2-tablewrap{overflow:visible}
}

/* the zone card on the "how a zone works" chart (10-15) */
.l2-zonecard{position:absolute;right:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,28px);width:min(330px,calc(100% - 24px));z-index:2}
.l2-cc .t.dem{color:rgb(46,125,79);text-transform:uppercase;letter-spacing:.08em} .l2-cc .t.sup{color:rgb(184,50,42);text-transform:uppercase;letter-spacing:.08em}
.l2-cc .b{font-variant-numeric:tabular-nums}
/* phones: the card goes under the chart so it never covers the zone */
@media (max-width:820px){
  .pic[data-pic="how"]{min-height:0;display:flex;flex-direction:column;padding:56px 0 16px}
  .pic[data-pic="how"] svg{position:relative;inset:auto;height:340px}
  .l2-zonecard{position:relative;right:auto;bottom:auto;margin:8px 12px 0;width:auto}
}