/* Comp only, v2 after the carson-critic pass. Patterns referenced (not copied) from 21st.dev:
   Comparison Section 26826, Processing Timeline 29371, CTA Section With Floating Gallery 29769.
   Two colours: ink greyscale plus the hero's indigo, used only where something needs to win. */
:root{
  --tu-indigo:#243B7A;
  --tu-indigo-soft:rgba(36,59,122,.07);
  --tu-hair:rgba(15,17,19,.07);
  --tu-shadow:0 0 0 1px rgba(15,17,19,.05),0 1px 2px rgba(36,59,122,.05),0 12px 32px -12px rgba(36,59,122,.14);
  --tu-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
.tu-label{font-family:var(--tu-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);font-weight:500}
.tu-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.tu-sec{padding-block:clamp(72px,9vw,120px)}
.tu-sec.tu-wash{background:var(--wash)}
.tu-head h2{margin:14px 0 14px;font-size:clamp(34px,4.4vw,56px);line-height:1.04}
.tu-head p{margin:0;font-size:18px;line-height:1.6;color:var(--ink-70);max-width:56ch}

/* ---------- 1. The real problem: paired rows + one hero number ---------- */
.tu-prob-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,4vw,52px)}
.tu-big{text-align:right}
.tu-big em{display:block;font-style:normal;font-family:var(--tu-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);margin-bottom:6px}
.tu-big b{display:block;font-size:clamp(96px,11vw,148px);line-height:.85;font-weight:300;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.tu-big span{display:block;margin:14px 0 0 auto;max-width:30ch;font-size:15px;line-height:1.45;color:var(--ink-70);text-wrap:balance}
.tu-pairs{background:#fff;border-radius:18px;box-shadow:var(--tu-shadow);overflow:hidden}
.tu-pairs-head,.tu-pair{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center}
.tu-pairs-head{padding:16px clamp(20px,3vw,32px);border-bottom:1px solid var(--tu-hair)}
.tu-pairs-head .tu-ours{color:var(--tu-indigo)}
.tu-pair{padding:20px clamp(20px,3vw,32px)}
.tu-pair + .tu-pair{border-top:1px solid var(--tu-hair)}
.tu-was{color:var(--ink-70);font-size:16px;line-height:1.45}
.tu-was s{text-decoration:none;position:relative;background:linear-gradient(currentColor,currentColor) 0 55%/100% 1.5px no-repeat;transition:background-size .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.tu-armed-p .tu-was s{background-size:0% 1.5px}
.tu-arrow{display:grid;place-items:center;color:rgba(15,17,19,.4)}
.tu-arrow svg{width:16px;height:16px}
.tu-now{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.45;color:var(--ink);font-weight:500}
.tu-now small{display:block;font-weight:400;color:var(--ink-45);font-size:14px;margin-top:2px}
.tu-tick{width:22px;height:22px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;margin-top:1px}
.tu-tick svg{width:12px;height:12px}
.tu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:26px;align-items:baseline}
.tu-closer{margin:0;font-size:20px;color:var(--ink)}
.tu-closer b{color:var(--tu-indigo);font-weight:600}
.tu-facts{font-size:14px;color:var(--ink-45)}
.tu-facts b{color:var(--ink);font-weight:600}

/* ---------- 2. What we don't do: one panel, one weighted card ---------- */
.tu-nots{background:#fff;border-radius:18px;box-shadow:var(--tu-shadow);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,3vw,40px)}
.tu-not{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:26px clamp(20px,3vw,32px)}
.tu-not:nth-child(odd){border-right:1px solid var(--tu-hair)}
.tu-not:nth-child(n+3){border-top:1px solid var(--tu-hair)}
.tu-x{width:28px;height:28px;border-radius:8px;background:rgba(15,17,19,.05);color:var(--ink-45);display:grid;place-items:center}
.tu-x svg{width:12px;height:12px}
.tu-not h3{margin:3px 0 5px;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.tu-not p{margin:0;color:var(--ink-45);font-size:15px;line-height:1.55}
.tu-promise{margin-top:14px;background:var(--ink);color:#fff;border-radius:18px;padding:clamp(26px,3vw,34px) clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.tu-promise h3{margin:0 0 8px;font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;color:#fff}
.tu-promise p{margin:0;color:rgba(255,255,255,.74);font-size:16px;line-height:1.55;max-width:62ch}
.tu-promise a{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;padding:12px 18px;border-radius:999px;white-space:nowrap}
.tu-promise a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 3. Money: terms on the left, one live timeline on the right ---------- */
.tu-money{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.tu-terms{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.tu-term{display:grid;gap:10px;align-content:start}
.tu-term b{font-size:64px;line-height:.9;font-weight:300;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.tu-term b sup{font-size:.34em;font-weight:500;vertical-align:1.25em;margin-left:0;letter-spacing:0}
.tu-term span{font-size:16px;line-height:1.45;color:var(--ink-70)}
.tu-term span strong{color:var(--ink);font-weight:600;display:block}
.tu-panel{background:#fff;border-radius:18px;box-shadow:var(--tu-shadow);overflow:hidden}
.tu-panel-top{display:flex;gap:14px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--tu-hair)}
.tu-ico{width:38px;height:38px;border-radius:11px;background:var(--tu-indigo-soft);color:var(--tu-indigo);display:grid;place-items:center;flex:none}
.tu-ico svg{width:18px;height:18px}
.tu-panel-top .tt{font-weight:600;font-size:15px;color:var(--ink)}
.tu-panel-top .mm{margin-top:2px;font-size:12.5px;color:var(--ink-45);font-variant-numeric:tabular-nums}
.tu-bar{height:6px;border-radius:99px;background:rgba(15,17,19,.07);overflow:hidden;margin-top:10px}
.tu-bar i{display:block;height:100%;border-radius:inherit;background:var(--tu-indigo);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tu-stages{list-style:none;margin:0;padding:10px 12px 12px}
.tu-stage{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;position:relative;padding:12px 10px;border-radius:12px}
.tu-stage.now{background:var(--tu-indigo-soft)}
.tu-rail{position:absolute;left:21px;top:40px;bottom:-12px;width:2px;border-radius:2px;background:rgba(15,17,19,.08);overflow:hidden}
.tu-rail i{position:absolute;inset:0;background:var(--tu-indigo);transform-origin:top;transition:transform .5s ease}
.tu-stage:last-child .tu-rail{display:none}
.tu-stage:not(.done) .tu-rail i{transform:scaleY(0)}
.tu-node{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(15,17,19,.14);background:#fff;color:var(--ink-45);position:relative;z-index:1;transition:background .3s ease,border-color .3s ease,color .3s ease}
.tu-node svg{width:11px;height:11px}
.done .tu-node{background:var(--tu-indigo);border-color:var(--tu-indigo);color:#fff}
.now .tu-node{border-color:var(--tu-indigo);color:var(--tu-indigo);box-shadow:0 0 0 4px rgba(36,59,122,.12)}
.tu-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tu-idx{font-family:var(--tu-mono);font-size:11px;color:var(--ink-45)}
.tu-name{font-weight:600;font-size:15px;color:var(--ink)}
.tu-chip{margin-left:auto;font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:99px;border:1px solid rgba(15,17,19,.12);color:var(--ink-45);white-space:nowrap}
.done .tu-chip{border-color:transparent;background:var(--tu-indigo-soft);color:var(--tu-indigo)}
.now .tu-chip{border-color:transparent;background:var(--tu-indigo);color:#fff}
.tu-desc{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-45)}
.tu-panel-foot{padding:12px 22px 16px;font-size:12.5px;color:var(--ink-45);border-top:1px solid var(--tu-hair)}
/* Motion: the resting state is the finished state. Only when JS runs and motion is welcome do we
   rewind to empty and play the fill as the panel scrolls in. */
.tu-armed .tu-bar i{transform:scaleX(0)}
.tu-armed .tu-rail i{transform:scaleY(0)}
.tu-armed .tu-stage.done .tu-node,.tu-armed .tu-stage.now .tu-node{background:#fff;border-color:rgba(15,17,19,.14);color:var(--ink-45);box-shadow:none}
.tu-armed .tu-stage .tu-chip{opacity:.35}
.tu-node,.tu-rail i,.tu-chip{transition-delay:var(--d,0ms)}
.tu-chip{transition:opacity .3s ease var(--d,0ms),background .3s ease var(--d,0ms),color .3s ease var(--d,0ms)}

/* ---------- 4. Closing band: two real screens, flat so the text stays sharp ---------- */
.tu-close.tu-close{background:#0C1A33;color:#fff;overflow:hidden}
.tu-close-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center;padding-block:clamp(80px,9vw,128px)}
.tu-close h2{margin:14px 0 16px;font-size:clamp(38px,4.2vw,56px);line-height:1.03;color:#fff;text-wrap:balance}
.tu-close .tu-label{color:rgba(255,255,255,.6)}
.tu-close p{margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.78);max-width:44ch}
.tu-btn{display:inline-flex;align-items:center;gap:10px;margin-top:30px;background:#fff;color:#0C1A33;font-weight:600;font-size:15px;padding:15px 24px;border-radius:999px;text-decoration:none;white-space:nowrap}
.tu-btn svg{width:16px;height:16px;transition:transform .2s ease}
.tu-btn:hover svg{transform:translateX(3px)}
.tu-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tu-reply{display:block;margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.62)}
.tu-screens{position:relative}
.tu-shot{margin:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.tu-shot img{display:block;width:100%;height:auto}
.tu-shot.a img{aspect-ratio:16/7.6;object-fit:cover;object-position:top}
.tu-shot.a{width:88%}
.tu-shot.b{width:60%;margin:-12% 0 0 auto;position:relative}
.tu-screens .tu-shot{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tu-armed-c .tu-shot.a{transform:translateY(18px)}
.tu-armed-c .tu-shot.b{transform:translateY(34px)}
.tu-close .tu-cap{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72);max-width:60ch}
.tu-cap b{color:#fff;font-weight:600}

@media (max-width:860px){
  .tu-prob-top,.tu-money,.tu-close-in{grid-template-columns:minmax(0,1fr)}
  .tu-big{text-align:left}
  .tu-big span{margin-left:0}
  .tu-pairs-head{display:none}
  .tu-pair{grid-template-columns:minmax(0,1fr);gap:8px}
  .tu-arrow{display:none}
  .tu-was{font-size:14px}
  .tu-nots{grid-template-columns:minmax(0,1fr)}
  .tu-not:nth-child(odd){border-right:0}
  .tu-not:nth-child(n+2){border-top:1px solid var(--tu-hair)}
  .tu-promise{grid-template-columns:minmax(0,1fr)}
  .tu-term b{font-size:52px}
  .tu-shot.a,.tu-shot.b{width:100%;margin:0}
  .tu-shot.b{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){ .tu-was s,.tu-screens .tu-shot,.tu-btn svg,.tu-bar i,.tu-rail i,.tu-node{transition:none} }

/* Match the comp while retaining the homepage section hooks. */
.tu-sec.tu-sec{padding-block:clamp(72px,9vw,120px)}
.tu-close.tu-close.tu-close{padding-block:0;min-height:0;text-align:start}
.tu-sec .tu-head h2,.tu-close.tu-close h2{font-weight:700;letter-spacing:normal;max-width:none}
.tu-sec .tu-head h2{margin:14px 0;font-size:clamp(34px,4.4vw,56px);line-height:1.04}
.tu-close.tu-close h2{margin:14px 0 16px;font-size:clamp(38px,4.2vw,56px);line-height:1.03}
.tu-sec .tu-not h3{letter-spacing:-.01em}
.tu-sec .tu-not p,.tu-sec .tu-promise p{line-height:1.55}
.tu-sec .tu-desc{line-height:1.5}
.tu-close .tu-cap{line-height:1.5}
.tu-panel-meta{flex:1;min-width:0}

.tu-sec .tu-closer,.tu-sec .tu-stage{line-height:1.5}
.tu-sec.tu-sec{border-block:0 solid currentColor}

/* Big numerals share the heading face (Satoshi 300). */
.tu-big b,.tu-term b{font-family:var(--font-heading)}