@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Type rule for this deck: Plus Jakarta Sans is the entire voice.
   Monospace is DIEGETIC ONLY - it may appear inside .mock, because that is a
   depiction of software. It never speaks for us. No tracked-out uppercase
   micro-labels anywhere.

   LAYOUT SYSTEM (v7). Three treatments only. If a thing is not one of these,
   it is wrong:
     1. COLUMN   - a 2px rule on top, a small label under it, content below.
                   No box, no fill, no radius. Space separates columns.
     2. ROWS     - a list separated by 1px hairlines. No bullets, no fill.
     3. FRAME    - a 1px border with square corners. Reserved for depictions
                   of real objects: screenshots, the approval mock. This is
                   the ONLY place a border may enclose something, which is
                   what makes it read as deliberate.
   Radius is 0 everywhere except inside diegetic artefacts (chat bubbles, the
   approve button). Colour: orange = today / friction. Green = the payoff, and
   it is a rule or a mark, never a fill. */

:root{
  --paper:#FFFFFF;
  --bg:#FFFFFF;
  --bg-2:#F4F1EC;
  --ink:#16130F;
  --ink-2:#615A51;
  --ink-3:#98908A;
  --rule:#E0DAD0;

  /* solution / go */
  --go:#12724B;
  --go-l:#1C9463;
  --go-wash:#E8F3EC;
  --go-line:#BCDCC9;

  /* today / friction */
  --hot:#B4531A;
  --hot-wash:#FBF1E6;
  --hot-line:#E8CDAA;

  --stop:#A6342A;
  --stop-wash:#F9EDEB;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  width:1920px;height:1080px;overflow:hidden;
  background:var(--bg);
  font-family:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.slide{
  position:relative;width:1920px;height:1080px;
  padding:70px 100px 66px;
  display:flex;flex-direction:column;
  background:var(--bg);
}

/* ---- the one micro-label used across the deck ---- */
.tile .lab,.col h3,.half h3,.pf .who,.outcome .h,.strip div b,
.vd .hd,.dr .cell .h,.pipe .pstep .n,.step .k,.hot-label,.cool-label,
.vd .why em,.foot{
  font-family:'Plus Jakarta Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}

/* ---- header ---- */
.eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:21px;font-weight:600;letter-spacing:-.01em;
  color:var(--hot);margin-bottom:14px;display:flex;align-items:center;gap:14px;
}

h1{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:82px;font-weight:600;letter-spacing:-.032em;line-height:1.02;
  color:var(--ink);
}
.sub{
  margin-top:18px;font-size:31px;font-weight:400;line-height:1.28;
  color:var(--ink-2);max-width:1500px;letter-spacing:-.014em;
}
.sub strong{color:var(--ink);font-weight:600;}

/* full-bleed hairline: the header rule is part of the page grid, not a divider
   inside a content well, so it runs to the trim */
.rule{height:1px;background:var(--rule);margin:30px -100px 0;}

.body{flex:1;display:flex;margin-top:36px;min-height:0;}

/* ---- footer ---- */
.foot{
  position:absolute;left:0;right:0;bottom:34px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:15px;color:var(--ink-3);
  border-top:1px solid var(--rule);padding:16px 100px 0;
}
.foot b{color:var(--ink-2);font-weight:600;}
.pg{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600;letter-spacing:.06em;}

/* ---- compact interior ---- */
.slide.tight h1{font-size:62px;}
.slide.tight .sub{font-size:28px;margin-top:14px;}
.slide.tight .rule{margin-top:24px;}
.slide.tight .body{margin-top:28px;}
.slide.tight{padding-bottom:100px;}

/* ---- cover ---- */
.cover{justify-content:center;}
.cover h1{font-size:132px;line-height:.98;max-width:1560px;letter-spacing:-.042em;}
.cover .sub{font-size:38px;max-width:1280px;margin-top:38px;}
.cover .kicker{
  margin-top:60px;padding-top:30px;border-top:1px solid var(--rule);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hot);font-weight:600;max-width:1400px;line-height:1.9;
}

/* ---- demo clip: edge to edge, no padding and no page furniture ---- */
.slide.film{padding:0;background:#100D0A;}
.slide.film video{display:block;width:1920px;height:1080px;object-fit:contain;background:#100D0A;}
.slide.film .foot{display:none;}

/* ================= input wall (slide 3) ================= */
.wall{display:flex;gap:18px;width:100%;flex:0 0 auto;}
.tile{
  flex:1;background:none;border:0;border-radius:0;
  display:flex;flex-direction:column;
}
/* FRAME: this encloses a depiction of a real document, so it gets a border.
   Height is fixed to what the artefacts actually cover - taller and the
   frames reveal empty background under the scan. */
.tile .win{
  height:288px;position:relative;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--rule);
}
.tile .win img{position:absolute;display:block;}
.tile .lab{
  padding:14px 0 0;font-size:13px;color:var(--ink-3);
  border-top:0;display:flex;align-items:center;gap:10px;
}
.tile .lab::before{display:none;}

/* fake artefacts inside tiles */
.fake{position:absolute;inset:0;padding:16px;font-size:13px;color:var(--ink-2);}
.wa{background:#E9E3DB;display:flex;flex-direction:column;gap:9px;padding:18px;}
.wa .bub{
  background:#fff;border-radius:10px;padding:11px 14px;font-size:16px;line-height:1.3;
  max-width:86%;box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.wa .bub.me{background:#DCF6C6;align-self:flex-end;}
.em{background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:8px;}
.em .hd{font-size:14px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace;letter-spacing:.06em;}
.em .sj{font-size:18px;font-weight:600;letter-spacing:-.01em;}
.em .att{
  margin-top:auto;border:1px solid var(--rule);padding:9px 11px;font-size:14px;
  display:flex;align-items:center;gap:8px;color:var(--ink-2);
}
.em .att svg{width:17px;height:17px;}
.ph{background:#4A4640;display:flex;align-items:center;justify-content:center;}
.ph .sheetimg{
  width:150px;height:186px;background:#F7F4EE;transform:rotate(-3.5deg);
  box-shadow:0 8px 22px rgba(0,0,0,.35);padding:14px 12px;
  display:flex;flex-direction:column;gap:6px;
}
.ph .sheetimg span{display:block;height:5px;background:#D9D3C7;}
.ph .sheetimg span.t{height:9px;width:70%;background:#8E877B;}
.ph .sheetimg span.s{width:52%;}

/* COLUMN: the three-step pipeline */
.pipe{display:flex;align-items:flex-start;gap:56px;margin-top:40px;flex:0 0 auto;}
.pipe .pstep{
  flex:1;background:none;border:0;border-radius:0;
  border-top:2px solid var(--ink);
  padding:16px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.pipe .pstep .n{font-size:13px;color:var(--go);}
.pipe .pstep .t{font-size:27px;font-weight:500;letter-spacing:-.018em;line-height:1.2;color:var(--ink-2);}
.pipe .pstep .t b{font-weight:600;color:var(--ink);}
.pipe .par{display:none;}

/* ================= flow (slides 8/9) ================= */
.flow{display:flex;align-items:flex-start;gap:34px;width:100%;margin-top:40px;}
.step{
  background:none;border:0;border-radius:0;border-top:2px solid var(--ink);
  padding:15px 0 0;flex:1;display:flex;flex-direction:column;gap:9px;min-width:0;
}
.step .k{font-size:13px;color:var(--ink-3);}
.step .t{font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.018em;}
/* already automated: quieter rule, quieter text. No grey box needed to say it */
.step.auto{background:none;border-top-color:var(--rule);}
.step.auto .t{color:var(--ink-2);}
.arrow{display:none;}

/* the three-by-hand / three-by-agent groups: a coloured rule across the group,
   the label sitting above it. No wash panel, no floating tab. */
.hot,.cool{
  display:flex;gap:34px;padding:0;background:none;border:0;border-radius:0;
  position:relative;align-items:flex-start;
}
.hot .step{background:none;border-top-color:var(--hot);}
.hot .step .k{color:var(--hot);}
.hot-label,.cool-label{
  position:absolute;top:-32px;left:0;background:none;padding:0;
  font-size:13px;color:var(--hot);white-space:nowrap;
}
.cool .step{background:none;border-top-color:var(--go);}
.cool .step .k{color:var(--go);}
.cool-label{color:var(--go);}

/* ---- screenshots: FRAME ---- */
.shots{display:flex;gap:34px;margin-top:34px;flex:1;align-items:center;min-height:0;}
.shot{border:1px solid var(--rule);border-radius:0;overflow:hidden;background:#0F1113;position:relative;}
.shot img{position:absolute;display:block;}
.shotcap{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;color:var(--ink-3);margin-top:14px;letter-spacing:-.006em;
}

/* ---- COLUMN: generic ---- */
.col{
  flex:1;background:none;border:0;border-radius:0;padding:0;
  display:flex;flex-direction:column;
}
.col h3{
  font-size:13px;color:var(--ink-3);
  border-top:2px solid var(--ink);border-bottom:0;
  padding:15px 0 0;margin:0 0 6px;
}
/* ROWS */
.col li{
  list-style:none;font-size:25px;line-height:1.28;font-weight:400;color:var(--ink-2);
  padding:15px 0;position:relative;letter-spacing:-.014em;
  border-bottom:1px solid var(--rule);
}
.col li::before{display:none;}
.col li b{color:var(--ink);font-weight:600;}
.col .lead{
  font-size:29px;font-weight:500;line-height:1.24;letter-spacing:-.022em;color:var(--ink);
}

/* rows take the slack so the closing line is not stranded below a hole, and so
   three columns of uneven wrapping still end on one baseline */
.col.fill li{flex:1;display:flex;align-items:center;}

/* ---- department / comparison rows (slides 5, 6, 7) ---- */
.drows{
  display:flex;flex-direction:column;justify-content:stretch;gap:0;width:100%;
  flex:1;min-height:0;border-top:2px solid var(--ink);
}
.dr{
  display:grid;grid-template-columns:300px 1fr 1fr;flex:1;max-height:none;overflow:hidden;
  background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;
}
.dr .nm{
  display:flex;align-items:center;padding:0 34px 0 0;
  background:none;border-right:0;
}
.dr .nm .d{font-size:29px;font-weight:600;letter-spacing:-.028em;line-height:1.12;}
.dr .cell{padding:20px 40px 20px 0;display:flex;flex-direction:column;justify-content:center;gap:11px;}
.dr .cell .h{
  font-size:12px;color:var(--ink-3);
  display:flex;align-items:center;gap:9px;
}
.dr .cell .h::before{content:'';width:8px;height:8px;border-radius:50%;flex:0 0 8px;}
.dr .cell .p{font-size:22px;line-height:1.32;color:var(--ink-2);letter-spacing:-.016em;}
.dr .cell .p b{color:var(--ink);font-weight:600;}
.dr .now .h::before{background:var(--hot);}
.dr .aft{border-left:1px solid var(--rule);padding-left:40px;}
.dr .aft .h::before{background:var(--go-l);}
/* the payoff is emphasis, not colour - green stays a mark, not a fill */
.dr .aft .p b{color:var(--ink);font-weight:700;}

/* ---- paired problem/answer rows (slide 5) ---- */
.drows.pairs{gap:0;border-top:0;}
.drows.pairs .dr{align-items:stretch;}
.drows.pairs .dr .nm{padding:0 34px 0 0;}
.drows.pairs .dr .nm .d{font-size:26px;letter-spacing:-.026em;}
.drows.pairs .dr .cell{padding:0 40px 0 0;justify-content:center;gap:0;}
.drows.pairs .dr .aft{padding-left:40px;}
.drows.pairs .dr .cell .p{font-size:23px;line-height:1.26;letter-spacing:-.018em;}
.drows.pairs .dr .now .p{color:var(--ink-3);font-style:italic;}
.drows.pairs .dr .aft .p{color:var(--ink-2);}
.drows.pairs .dr.hd{
  flex:0 0 34px;background:transparent;border:0;border-bottom:2px solid var(--ink);
  border-radius:0;overflow:visible;
}
.drows.pairs .dr.hd .nm{background:transparent;border-right:0;}
.drows.pairs .dr.hd .cell{padding:0 40px 0 0;border-left:0;justify-content:flex-end;}
.drows.pairs .dr.hd .aft{padding-left:40px;}
.drows.pairs .dr.hd .cell .h{padding-bottom:8px;}
.dr.hd .now .h{color:var(--hot);}
.dr.hd .aft .h{color:var(--go);}

/* ---- COLUMN: the chatbot / agent split (slide 4) ---- */
.half{
  flex:1;background:none;border:0;border-radius:0;
  border-top:2px solid var(--rule);
  padding:15px 0 0;display:flex;flex-direction:column;
}
.half+.half{margin-left:66px;}
.half.now{border-top-color:var(--hot);}
.half.dark{border-top-color:var(--go);}
.half h3{
  font-size:13px;color:var(--ink-3);font-weight:600;
  padding-bottom:0;border-bottom:0;margin-bottom:4px;
}
.half.now h3{color:var(--hot);}
.half.dark h3{color:var(--go);}
.half .it{
  font-size:28px;line-height:1.18;letter-spacing:-.024em;font-weight:500;
  padding:14px 0;color:var(--ink);border-bottom:1px solid var(--rule);
  flex:1;display:flex;align-items:center;
}
.half .it:last-of-type{border-bottom:1px solid var(--rule);}

/* ---- FRAME: the approval mock. A depiction of software. ---- */
.mock{
  background:var(--paper);border:1px solid var(--ink);border-radius:0;
  overflow:hidden;display:flex;flex-direction:column;
}
.mock .bar{
  background:var(--ink);color:#fff;padding:17px 26px;font-size:20px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
.mock .bar span{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;}
.fld{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 26px;border-bottom:1px solid var(--rule);}
.fld .lb{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase;font-weight:500;}
.fld .vl{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.fld .cf{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--go-l);letter-spacing:.08em;}
.fld.flag{background:var(--hot-wash);}
.fld.flag .cf,.fld.flag .vl{color:var(--hot);}
.mock .act{
  margin-top:auto;padding:18px 26px;display:flex;gap:14px;align-items:center;
  background:none;border-top:1px solid var(--ink);
}
.actnote{
  margin-left:auto;text-align:right;max-width:270px;line-height:1.34;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:var(--ink-3);letter-spacing:-.004em;
}
/* the single green fill in the deck: it is a button, inside a picture of software */
.btn{border-radius:3px;background:var(--go);color:#fff;padding:13px 30px;font-size:19px;font-weight:600;display:flex;align-items:center;gap:10px;}
.btn svg{width:19px;height:19px;}
.btn.ghost{border-radius:3px;background:transparent;color:var(--ink-2);border:1px solid var(--rule);}

/* ---- COLUMN: verdicts ---- */
.verdicts{display:flex;gap:66px;width:100%;}
.vd{
  flex:1;background:none;border:0;border-radius:0;border-top:2px solid var(--rule);
  overflow:visible;display:flex;flex-direction:column;
}
.vd.stop{border-top-color:var(--stop);}
.vd.pass{border-top-color:var(--go);}
.vd .hd{
  padding:15px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  background:none;font-size:13px;
}
.vd .hd span{white-space:nowrap;}
.vd .hd span:last-child{color:var(--ink-3);}
.vd.stop .hd{color:var(--stop);}
.vd.pass .hd{color:var(--go);}
.vd .bd{padding:0;display:flex;flex-direction:column;gap:0;flex:1;}
/* the rows take the slack rather than leaving a hole above the footnote.
   Capped so they never out-space the eight-item checklist beside them. */
.vd .iss{display:flex;flex-direction:column;margin-top:10px;flex:1;min-height:0;}
.vd .iss div{
  font-size:22px;padding:15px 0 15px 34px;position:relative;color:var(--ink);
  border-bottom:1px solid var(--rule);letter-spacing:-.012em;line-height:1.28;
  flex:1;display:flex;align-items:center;
}
/* no closing hairline: it would bracket the white below into an empty row */
.vd .iss div:last-child{border-bottom:0;}
.vd .iss div::before{content:'\2715';position:absolute;left:0;top:50%;margin-top:-11px;font-size:15px;color:var(--stop);font-weight:700;}
.vd.pass .iss div::before{content:'\2713';color:var(--go-l);}
.vd .why{
  margin-top:auto;padding:20px 0 0;border-top:1px solid var(--rule);
  font-size:23px;line-height:1.3;letter-spacing:-.016em;background:none;color:var(--ink-2);
}
.vd.stop .why{background:none;color:var(--ink-2);}
.vd.pass .why{background:none;color:var(--ink-2);}
.vd .why em{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;font-style:normal;
  font-size:12px;opacity:1;margin-bottom:9px;color:var(--ink-3);}
.vd.stop .why em{color:var(--stop);}
.vd.pass .why em{color:var(--go);}

/* ---- ROWS: checklist ---- */
.checklist{display:flex;flex-direction:column;flex:1;margin-top:10px;}
.checklist div{
  font-size:22px;line-height:1.24;color:var(--ink-2);padding:0;position:relative;
  border-bottom:1px solid var(--rule);letter-spacing:-.012em;
  flex:1;display:flex;align-items:center;
}
.checklist div::before{display:none;}
.checks{padding:0;}

/* ---- COLUMN: proof numbers (slide 11) ---- */
/* The column is given a defined height rather than the full body, so the
   bullets can share one baseline WITHOUT opening a canyon under the number. */
.proof{display:flex;gap:76px;width:100%;height:auto;align-self:flex-start;}
.pf{
  flex:1;min-height:566px;background:none;border:0;border-radius:0;
  border-top:2px solid var(--ink);
  padding:15px 0 0;display:flex;flex-direction:column;
}
.pf .who{
  font-size:13px;color:var(--ink-3);
  padding-bottom:0;border-bottom:0;
}
/* the number is the point: it sits at the top of the column, not floating in
   the middle of a card */
.pf .big{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:144px;font-weight:600;letter-spacing:-.054em;line-height:.86;
  margin-top:30px;padding-top:0;color:var(--ink);font-variant-numeric:tabular-nums;
}
.pf .big small{font-size:56px;font-weight:600;letter-spacing:-.02em;}
.pf .cap{font-size:27px;line-height:1.3;margin-top:24px;letter-spacing:-.02em;font-weight:500;color:var(--ink-2);max-width:430px;}
.pf .more{margin-top:auto;padding-top:22px;border-top:1px solid var(--rule);}
.pf .more div{
  font-size:21px;line-height:1.3;color:var(--ink-2);padding:9px 0 9px 24px;position:relative;letter-spacing:-.012em;
}
.pf .more div::before{content:'';position:absolute;left:0;top:19px;width:10px;height:1px;background:var(--ink-3);}

/* ---- COLUMN: big questions (slide 12) ---- */
.qs{display:flex;flex-direction:column;justify-content:center;gap:58px;width:100%;height:100%;}
.q{
  background:none;border:0;border-radius:0;border-top:2px solid var(--hot);
  padding:24px 0 0;flex:0 0 auto;max-height:none;display:flex;align-items:flex-start;gap:44px;
}
.q .n{font-family:'Plus Jakarta Sans',sans-serif;font-size:38px;font-weight:700;color:var(--hot);line-height:1.15;flex:0 0 auto;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.q .t{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:44px;line-height:1.16;font-weight:500;letter-spacing:-.034em;
}
.q .t b{font-weight:700;}

/* ---- the closing statement band. One green rule, nothing else. ---- */
.outcome{
  background:none;color:var(--ink-2);border:0;border-radius:0;
  border-top:2px solid var(--go);
  padding:20px 0 0;display:flex;align-items:baseline;gap:36px;
}
.outcome .h{font-size:13px;color:var(--go);flex:0 0 auto;}
.outcome .t{font-size:28px;line-height:1.26;letter-spacing:-.018em;}
.outcome .t b{color:var(--ink);font-weight:700;}

/* ---- guardrail strip ---- */
.strip{
  display:flex;border:0;border-top:1px solid var(--ink);border-radius:0;
  background:none;margin-top:26px;
}
.strip div{
  flex:1;padding:16px 44px 0 0;font-size:19px;line-height:1.32;color:var(--ink-2);
  border-right:0;letter-spacing:-.012em;
}
.strip div:last-child{padding-right:0;}
.strip div b{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;
  color:var(--ink);font-weight:600;margin-bottom:8px;
}

/* ---- stacks ---- */
.body.stack{flex-direction:column;gap:34px;}
/* the closing statement anchors to the bottom of the page, so leftover space
   always pools in one place instead of trailing under the footer rule */
.body.stack>.outcome{margin-top:auto;}
.body.stack .top{flex:1;display:flex;gap:66px;min-height:0;}

/* ---- mock slide density ---- */
.slide.mockslide .col{padding:0;}
.slide.mockslide .col h3{margin-bottom:2px;}
/* rows take the slack so the closing line is not stranded below a hole */
.slide.mockslide .col li{
  font-size:22px;padding:11px 0;flex:1;max-height:92px;
  /* flex blockifies the inline <b> into its own item and eats the space before
     the middot; the gap puts that word space back explicitly. */
  display:flex;align-items:center;gap:.3em;
}
.slide.mockslide .lead{font-size:23px;line-height:1.3;}
.slide.mockslide .mock .bar{padding:13px 26px;}
/* the form rows absorb the frame's slack, otherwise the last hairline and the
   action bar bracket an empty band that reads as a sixth, blank field */
.slide.mockslide .fld{padding:9px 26px;flex:1;max-height:74px;}
.slide.mockslide .fld .vl{font-size:22px;}
.slide.mockslide .mock .act{padding:12px 26px;}
.slide.mockslide .btn{padding:10px 24px;font-size:18px;}
.slide.mockslide .step{padding-top:14px;gap:7px;}
.slide.mockslide .step .t{font-size:22px;}
.slide.mockslide .strip div{padding-top:14px;font-size:19px;}

/* ================= slide 2: one move, six disguises ================= */
/* the diagram is the slide, so it runs to the trim rather than sitting in a
   card in the middle of the page */
.repdia{
  display:flex;align-items:center;justify-content:center;gap:0;
  background:var(--bg-2);border-radius:0;padding:40px 100px;min-height:0;
  margin:0 -100px;flex:1;
}
.bn{display:flex;flex-direction:column;align-items:center;gap:22px;width:288px;flex:0 0 288px;}
.bn .bi{
  width:158px;height:158px;border-radius:0;background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
}
.bn .bi svg{width:72px;height:72px;}
.bn .bl{font-size:30px;font-weight:600;letter-spacing:-.02em;text-align:center;line-height:1.2;}

/* the retyping fan-out */
.fanout{flex:1;display:flex;flex-direction:column;justify-content:center;gap:40px;padding-left:8px;}
.fr{display:flex;align-items:flex-end;gap:0;}
.fa{
  flex:1;height:4px;background:var(--hot);border-radius:0;position:relative;
  margin-right:16px;margin-bottom:14px;
}
.fa:after{
  content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:11px solid var(--hot);border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.fa span{
  position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  font-size:20px;font-weight:600;color:var(--hot);white-space:nowrap;letter-spacing:-.01em;
}
/* destinations are labels on a baseline, not three more little cards */
.dst{
  flex:0 0 330px;display:flex;align-items:center;gap:18px;
  background:none;border:0;border-bottom:2px solid var(--ink);border-radius:0;
  padding:10px 2px 12px;color:var(--ink-2);
}
.dst svg{width:34px;height:34px;flex:0 0 34px;}
.dst div{font-size:27px;font-weight:600;color:var(--ink);letter-spacing:-.02em;}

/* the three costs: COLUMN */
.costs{display:flex;gap:66px;flex:0 0 auto;}
.cost{
  flex:1;background:none;border:0;border-radius:0;border-top:2px solid var(--hot);
  padding:15px 0 0;font-size:24px;color:var(--ink-2);letter-spacing:-.015em;line-height:1.3;
}
.cost b{
  display:block;color:var(--hot);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:9px;
}
.bn.hu .bi{background:var(--hot);color:#fff;}
.bn.hu .bl{color:var(--hot);}
.bar2{flex:1;height:4px;background:var(--hot);border-radius:0;position:relative;margin-bottom:52px;}
.bar2 span{
  position:absolute;left:50%;top:-44px;transform:translateX(-50%);
  font-size:21px;font-weight:500;color:var(--hot);white-space:nowrap;letter-spacing:-.01em;
}
/* six patterns: one line of text divided by hairlines, not six pills */
.chips{display:flex;align-items:stretch;gap:0;flex:0 0 auto;}
.chl{
  font-size:19px;font-weight:700;color:var(--ink);flex:0 0 auto;
  letter-spacing:-.02em;line-height:1.2;display:flex;align-items:center;padding-right:26px;
}
.chip{
  flex:1;background:none;border-radius:0;border-left:1px solid var(--rule);
  padding:8px 0 8px 22px;text-align:left;
  font-size:20px;font-weight:500;color:var(--ink-2);letter-spacing:-.015em;
  display:flex;align-items:center;
}
.chip:nth-child(2){border-left:1px solid var(--ink);}