/*
  UU funnel styles. Ported verbatim from the approved mock
  WORKING MD'S/redesign-2026-08/homepage-preview.html (2026-08-10).
  Two deliberate changes from the mock, both required for a shipped page:
    1. .uu-logo now points at a real media file, not a base64 data URI
    2. the preview-ribbon rules were removed, they were mock chrome
  Everything after the funnel-only additions block is the mock, unaltered.
*/
:root{
  /* pulled verbatim from uu-divi5-child/style.css v1.4.0 */
  --uu-bg:#0B1A26;
  --uu-fg:#F3EFE3;
  --uu-card:#12222f;
  --uu-border:rgba(255,255,255,.10);
  --uu-primary:#4282D8;
  --uu-primary-hover:#1E315A;
  --uu-secondary:#16311F;
  --uu-accent:#C1652E;
  --uu-muted:rgba(243,239,227,.72);
  --uu-font-display:"Bebas Neue","Oswald",sans-serif;
  --uu-font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --uu-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --wrap:1120px;
}
.uu-logo{display:block;background:url(https://uncommittedu.com/wp-content/uploads/2026/08/uu-logo-256.png) center/contain no-repeat}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;background:var(--uu-bg);color:var(--uu-fg);
  font-family:var(--uu-font-sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--uu-font-display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 14px;line-height:1.03;font-weight:400}
p{margin:0 0 1.1em}
a{color:var(--uu-primary)}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sec{padding:78px 0;border-top:1px solid var(--uu-border)}
.sec-alt{background:var(--uu-card)}
.eyebrow{
  font-family:var(--uu-font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--uu-primary);margin:0 0 14px;
}
.eyebrow.orange{color:var(--uu-accent)}
.lede{color:var(--uu-muted);font-size:1.075rem;max-width:62ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--uu-font-mono);font-size:.82rem;text-transform:uppercase;
  letter-spacing:.06em;padding:15px 26px;border-radius:8px;text-decoration:none;
  display:inline-block;border:1px solid transparent;cursor:pointer;
  transition:filter .15s ease,transform .15s ease,border-color .15s ease,background-color .15s ease;
  text-align:center;
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(.5px)}
.btn-free{background:var(--uu-accent);color:#fff}          /* the free path is always orange */
.btn-buy{background:var(--uu-primary);color:#fff}          /* the buy path is always blue  */
.btn-ghost{background:transparent;color:var(--uu-fg);border-color:var(--uu-border)}
.btn-ghost:hover{border-color:var(--uu-primary)}
.btn-lg{padding:18px 34px;font-size:.92rem}
.btn-sm{padding:10px 16px;font-size:.72rem}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.center .btn-row{justify-content:center}
.btn-note{font-family:var(--uu-font-mono);font-size:.74rem;color:var(--uu-muted);letter-spacing:.03em;margin-top:14px}

/* ---------- slim sticky header, Backlinko style dropdown panels ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(11,26,38,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--uu-border);
}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 22px;height:62px;display:flex;align-items:center;gap:16px;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--uu-fg);margin-right:auto}
.brand .uu-logo{width:44px;height:44px;flex:0 0 44px}
.brand .wordmark{font-family:var(--uu-font-display);font-size:1.2rem;letter-spacing:.03em;line-height:1;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:6px}
.nav-item{position:relative}
.nav-trigger,.nav-link{
  font-family:var(--uu-font-mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--uu-muted);text-decoration:none;cursor:pointer;
  background:transparent;border:0;padding:9px 12px;border-radius:8px;
  display:inline-flex;align-items:center;gap:7px;line-height:1;white-space:nowrap;
  transition:color .15s ease,background-color .15s ease;
}
.nav-trigger:hover,.nav-link:hover,.nav-item.open .nav-trigger{color:var(--uu-fg);background:rgba(255,255,255,.05)}
.nav-trigger .caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .18s ease;
}
.nav-item.open .nav-trigger .caret{transform:rotate(180deg)}
.nav-trigger:focus-visible,.nav-link:focus-visible,.burger:focus-visible{outline:2px solid var(--uu-primary);outline-offset:2px}

.panel{
  position:absolute;left:-10px;top:calc(100% + 14px);min-width:330px;
  background:var(--uu-card);border:1px solid var(--uu-border);border-radius:12px;
  padding:10px;box-shadow:0 26px 60px -28px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* Belt and braces only. It stops a future child that switches visibility
     back on without thinking about hit testing. It does NOT stop a child that
     sets pointer-events:auto itself, because both properties are overridable
     downward, which is exactly how the pill-pane bug below happened. */
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-item.open .panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
/* invisible bridge so the pointer can travel from the trigger into the panel */
.panel:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.panel-link{
  display:block;padding:11px 13px;border-radius:9px;text-decoration:none;
  transition:background-color .13s ease;
}
.panel-link:hover,.panel-link:focus-visible{background:rgba(66,130,216,.14);outline:none}
.pl-t{display:block;font-size:.95rem;color:var(--uu-fg);font-weight:600;line-height:1.25}
.pl-d{display:block;font-size:.8rem;color:var(--uu-muted);margin-top:3px;line-height:1.35}
.panel-link.accent .pl-t{color:var(--uu-accent)}
.panel-sep{height:1px;background:var(--uu-border);margin:8px 6px}

/* ----- two level panel: pillars on the left, that pillar's articles on the right ----- */
.nav-item.wide{position:static}
.panel-wide{
  left:auto;right:22px;top:calc(100% - 1px);
  width:min(760px,calc(100vw - 44px));min-width:0;padding:14px;
}
.lvl2{position:relative;min-height:322px}
.lvl2-left{width:250px}
.pill-row{display:flex;align-items:center;border-radius:9px;transition:background-color .13s ease}
.pill.active .pill-row,.pill-row:hover{background:rgba(66,130,216,.14)}
.pill-link{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px;text-decoration:none;color:var(--uu-fg);font-size:.97rem;font-weight:600;line-height:1.2;
}
.pill-link .chev{
  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:6px solid var(--uu-muted);flex:0 0 auto;transition:border-color .13s ease,transform .18s ease;
}
.pill.active .pill-link .chev{border-left-color:var(--uu-primary)}
.pill-count{display:none} /* Wayne 2026-08-10: counts read as clutter and the thin pillar undersold itself; spans kept in markup in case counts ever return */
.pill-toggle{display:none}

.pill-pane{
  position:absolute;left:266px;right:0;top:0;
  padding-left:22px;border-left:1px solid var(--uu-border);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease;
}
/* 🔴 The `.nav-item.open` prefix is load bearing, do not drop it back to
   `.pill.active .pill-pane`. Wayne, 2026-08-11: hovering the hero heading, or
   a link inside the Free Tools panel, popped the Guides menu open.

   The closed Guides panel is `visibility:hidden; opacity:0`, but visibility
   and pointer-events are both OVERRIDABLE BY A DESCENDANT, and this rule was
   overriding both. One pillar is always active, so its pane sat there
   permanently hit testable: a 464x316 box under a sticky header, invisible
   only because an ancestor carries opacity:0. The pane is a DOM child of the
   Guides item, so touching it fired that item's mouseenter and opened the
   menu, anywhere on the page, at any scroll depth.

   Hiding the CONTAINER harder cannot fix this, which is the part worth
   remembering. Measured on the live page with elementFromPoint: closed now
   hits the page content behind it, open still hits the article links. */
.nav-item.open .pill.active .pill-pane{opacity:1;visibility:visible;pointer-events:auto}
.pane-label{
  font-family:var(--uu-font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--uu-muted);padding:4px 10px 8px;
}
.art{
  display:block;padding:8px 10px;border-radius:8px;text-decoration:none;
  color:var(--uu-fg);font-size:.9rem;line-height:1.3;transition:background-color .12s ease;
}
.art:hover,.art:focus-visible{background:rgba(66,130,216,.14);outline:none}
.viewall{
  display:block;margin-top:8px;padding:10px;border-top:1px solid var(--uu-border);
  font-family:var(--uu-font-mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--uu-primary);text-decoration:none;
}
.viewall:hover{color:var(--uu-fg)}

.burger{
  display:none;background:transparent;border:1px solid var(--uu-border);border-radius:8px;
  width:40px;height:36px;cursor:pointer;padding:0;position:relative;
}
.burger span{
  display:block;position:absolute;left:10px;right:10px;height:2px;background:var(--uu-fg);
  transition:transform .2s ease,opacity .2s ease;
}
.burger span:nth-child(1){top:11px}
.burger span:nth-child(2){top:17px}
.burger span:nth-child(3){top:23px}
.hdr.mobile-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.mobile-open .burger span:nth-child(2){opacity:0}
.hdr.mobile-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* the wordmark goes before the menu does, so the full nav survives at 815px,
   which is the width Wayne actually judges at */
@media (max-width:1010px){ .brand .wordmark{display:none} }

@media (max-width:760px){
  .burger{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:62px;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--uu-bg);border-bottom:1px solid var(--uu-border);
    padding:12px 16px 20px;max-height:calc(100vh - 62px);overflow-y:auto;
  }
  .hdr.mobile-open .nav{display:flex}
  .nav-trigger,.nav-link{
    width:100%;justify-content:space-between;padding:14px 10px;font-size:.8rem;
    border-bottom:1px solid var(--uu-border);border-radius:0;
  }
  .nav-item{position:static}
  .panel{
    position:static;opacity:1;visibility:hidden;transform:none;min-width:0;
    box-shadow:none;border:0;background:transparent;padding:0 0 0 8px;
    height:0;overflow:hidden;transition:none;
  }
  .nav-item.open .panel{visibility:visible;height:auto;padding:6px 0 12px 8px}
  .panel:before{display:none}
  .nav-cta{width:100%;margin-top:14px}

  /* level two becomes nested accordions inside the hamburger sheet */
  .nav-item.wide{position:relative}
  .panel-wide{width:auto;padding:6px 0 12px 8px}
  .lvl2{min-height:0}
  .lvl2-left{width:auto}
  .pill{border-bottom:1px solid var(--uu-border)}
  .pill:last-child{border-bottom:0}
  .pill-row{border-radius:0}
  .pill.active .pill-row{background:transparent}
  .pill-link .chev{display:none}
  .pill-count{display:none}
  .pill-toggle{
    display:flex;align-items:center;justify-content:center;width:46px;align-self:stretch;
    background:transparent;border:0;border-left:1px solid var(--uu-border);cursor:pointer;padding:0;
  }
  .pill-toggle .chev2{
    width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid var(--uu-muted);transition:transform .18s ease;
  }
  .pill.active .pill-toggle .chev2{transform:rotate(180deg);border-top-color:var(--uu-primary)}
  .pill-pane{
    position:static;padding-left:10px;border-left:2px solid var(--uu-border);
    margin:0 0 10px 12px;height:0;overflow:hidden;opacity:1;visibility:hidden;transition:none;
  }
  .pill.active .pill-pane{height:auto;visibility:visible;pointer-events:auto}
  .art{padding:10px}
}

/* ---------- hero ---------- */
.hero{
  padding:86px 0 66px;text-align:center;
  background:
    radial-gradient(1200px 600px at 18% 0%,rgba(22,49,31,.55),transparent 60%),
    radial-gradient(900px 520px at 92% 100%,rgba(193,101,46,.24),transparent 55%);
}
.hero h1{font-size:clamp(2.7rem,7.4vw,5rem);margin-bottom:8px}
.hero h1 .swap{color:var(--uu-accent)}
.hero .kicker{
  font-family:var(--uu-font-display);text-transform:uppercase;
  font-size:clamp(1.15rem,2.7vw,1.7rem);color:var(--uu-primary);
  letter-spacing:.02em;margin:0 auto 20px;max-width:22ch;line-height:1.1;
}
.hero p.sub{color:var(--uu-muted);font-size:1.1rem;max-width:56ch;margin:0 auto 30px}
.statbar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--uu-border);
  border:1px solid var(--uu-border);border-radius:12px;overflow:hidden;margin-top:52px;
}
.statbar div{background:var(--uu-bg);padding:20px 10px}
.statbar .n{font-family:var(--uu-font-display);font-size:clamp(1.6rem,4vw,2.4rem);color:var(--uu-fg);line-height:1}
.statbar .l{font-family:var(--uu-font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--uu-muted);margin-top:8px}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--uu-card);border:1px solid var(--uu-border);border-radius:12px;padding:26px}
.sec-alt .card{background:var(--uu-bg)}
.card h3{margin-bottom:10px}
.card p{color:var(--uu-muted);font-size:.95rem;margin-bottom:0}
.num{font-family:var(--uu-font-display);font-size:2.4rem;color:var(--uu-primary);line-height:1;margin-bottom:10px}

/* ---------- cost of doing nothing ---------- */
.cost{border-left:3px solid var(--uu-accent);padding-left:22px;margin-bottom:30px}
.cost h3{font-size:1.2rem;margin-bottom:6px}
.cost p{color:var(--uu-muted);margin-bottom:0}
.gutpunch{
  border:1px solid rgba(193,101,46,.45);background:rgba(193,101,46,.08);
  border-radius:12px;padding:26px 28px;margin-top:36px;
}
.gutpunch p{margin:0;font-size:1.12rem;line-height:1.5}
.gutpunch p.after{color:var(--uu-muted);font-size:.98rem;margin-top:12px}

/* ---------- assumption hook ---------- */
.assume{max-width:840px;margin:0 auto}
.assume ul{list-style:none;padding:0;margin:26px 0 0}
.assume li{
  padding:16px 0 16px 40px;border-bottom:1px solid var(--uu-border);
  position:relative;color:var(--uu-fg);font-size:1.03rem;
}
.assume li:before{
  content:"\2715";position:absolute;left:6px;top:16px;color:var(--uu-accent);
  font-family:var(--uu-font-mono);font-size:.95rem;
}
.assume .punch{margin-top:30px;font-size:1.14rem;font-weight:600;line-height:1.45}

/* ---------- mechanism ---------- */
.step-course{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--uu-border);
  font-family:var(--uu-font-mono);font-size:.74rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--uu-accent);
}

/* ---------- placeholders ---------- */
.shot{
  border:1px dashed rgba(255,255,255,.22);border-radius:10px;
  background:linear-gradient(135deg,rgba(22,49,31,.5),rgba(11,26,38,.6));
  min-height:150px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:22px;font-family:var(--uu-font-mono);font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--uu-muted);margin-bottom:16px;
}
.pending{
  border:1px dashed rgba(193,101,46,.6);border-radius:10px;background:rgba(193,101,46,.06);
  padding:26px;text-align:center;font-family:var(--uu-font-mono);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--uu-accent);
}
.tag-draft{
  display:inline-block;font-family:var(--uu-font-mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(193,101,46,.16);color:var(--uu-accent);
  border:1px solid rgba(193,101,46,.5);border-radius:99px;padding:4px 10px;margin-bottom:12px;
}

/* ---------- proof ---------- */
.proof-item{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;margin-bottom:34px}
.proof-item:nth-child(even) .proof-txt{order:2}
.proof-txt h3{font-size:1.3rem}
.proof-txt p{color:var(--uu-muted);margin-bottom:0}

/* ---------- offer stack ---------- */
.stack-item{
  background:var(--uu-card);border:1px solid var(--uu-border);border-left:4px solid var(--uu-primary);
  border-radius:12px;padding:30px 30px;margin-bottom:20px;
}
.stack-item.core{border-left-color:var(--uu-accent);background:linear-gradient(135deg,rgba(22,49,31,.55),var(--uu-card))}
.stack-label{
  font-family:var(--uu-font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--uu-primary);margin-bottom:10px;
}
.stack-item.core .stack-label{color:var(--uu-accent)}
.stack-item h3{font-size:clamp(1.35rem,2.8vw,1.9rem);margin-bottom:12px}
.stack-item .what{color:var(--uu-fg);margin-bottom:14px}
.stack-item .sothat{color:var(--uu-muted);font-size:.97rem;margin-bottom:14px}
.stack-item .anchor{
  font-family:var(--uu-font-mono);font-size:.76rem;letter-spacing:.04em;color:var(--uu-muted);
  border-top:1px solid var(--uu-border);padding-top:14px;margin-bottom:0;
}
.stack-total{
  text-align:center;border:1px solid rgba(66,130,216,.5);border-radius:12px;
  padding:30px;margin-top:30px;background:rgba(66,130,216,.07);
}
.stack-total .n{font-family:var(--uu-font-display);font-size:clamp(2rem,5vw,3rem);line-height:1.05}
.stack-total p{margin:10px 0 0;color:var(--uu-muted)}

/* ---------- price ---------- */
.plan-toggle{display:inline-flex;border:1px solid var(--uu-border);border-radius:10px;overflow:hidden;margin-bottom:34px}
.plan-toggle button{
  background:transparent;border:0;color:var(--uu-muted);font-family:var(--uu-font-mono);
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;padding:12px 22px;cursor:pointer;
}
.plan-toggle button[aria-pressed="true"]{background:var(--uu-primary);color:#fff}
.tiers{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:start}
.tier{background:var(--uu-card);border:1px solid var(--uu-border);border-radius:14px;padding:30px;position:relative}
.tier.target{border-color:var(--uu-primary);box-shadow:0 0 0 1px rgba(66,130,216,.35),0 24px 60px -34px rgba(66,130,216,.6)}
.tier .flag{
  position:absolute;top:-13px;left:30px;background:var(--uu-primary);color:#fff;
  font-family:var(--uu-font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;
}
.tier h3{font-size:1.7rem;margin-bottom:4px}
.tier .role{font-family:var(--uu-font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--uu-muted);margin-bottom:20px}
.price{font-family:var(--uu-font-display);font-size:clamp(2.6rem,7vw,3.8rem);line-height:1;margin-bottom:4px}
.price small{font-family:var(--uu-font-mono);font-size:.9rem;letter-spacing:.04em;color:var(--uu-muted);text-transform:none}
.price-note{font-size:.9rem;color:var(--uu-muted);margin-bottom:18px;min-height:44px}
.tier ul{list-style:none;padding:0;margin:0 0 22px}
.tier li{padding:9px 0 9px 26px;position:relative;font-size:.95rem;border-bottom:1px solid var(--uu-border)}
.tier li:before{content:"\2713";position:absolute;left:2px;color:var(--uu-primary);font-size:.9rem}
.tier.decoy li:before{color:var(--uu-muted)}
.samething{
  border:1px solid var(--uu-border);border-radius:12px;padding:22px 24px;margin-top:26px;
  background:rgba(255,255,255,.02);
}
.samething p{margin:0;color:var(--uu-muted);font-size:.95rem}
.samething p+p{margin-top:10px}
.cmp{width:100%;border-collapse:collapse;margin-top:26px;font-size:.94rem}
.cmp th,.cmp td{border:1px solid var(--uu-border);padding:13px 15px;text-align:left}
.cmp th{background:var(--uu-bg);font-family:var(--uu-font-mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.07em;color:var(--uu-muted)}
.cmp td.hi{background:rgba(66,130,216,.1);color:var(--uu-fg);font-weight:600}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- the feature split table (Wayne's tier rework, 2026-08-12) ----------
   Rides the existing .rv/.seen scroll-reveal: each row fades up on its own,
   then its mark pops. Checks are green, misses are red, exactly the red-X /
   green-check comparison Wayne asked for. Reduced-motion users get it static. */
.ftable td{text-align:center;vertical-align:middle}
.ftable th{font-size:.78rem}
.ftable tbody th{background:transparent;text-transform:none;font-family:inherit;letter-spacing:0;font-size:.92rem;color:var(--uu-fg);font-weight:500;text-align:left}
.ftable td small{display:block;margin-top:3px;font-size:.72rem;color:var(--uu-muted);font-weight:400}
.ftable .ck,.ftable .nx{display:inline-block;font-size:1.15rem;line-height:1;font-weight:700}
.ftable .ck{color:#2fbf71}
.ftable .nx{color:#e05252}
.ftable .ftable-price td{font-size:.88rem}
.js .ftable tr.rv{transition-delay:0s}
.js .ftable tr.rv:nth-child(2n){transition-delay:.06s}
.js .ftable tr.rv:nth-child(3n){transition-delay:.12s}
.js .ftable tr.rv .ck,.js .ftable tr.rv .nx{opacity:0;transform:scale(.4)}
.js .ftable tr.rv.seen .ck{opacity:1;transform:scale(1);transition:opacity .3s ease .25s,transform .45s cubic-bezier(.2,1.6,.4,1) .25s}
.js .ftable tr.rv.seen .nx{opacity:1;transform:scale(1);transition:opacity .3s ease .35s,transform .3s ease .35s}
@media (prefers-reduced-motion:reduce){
  .js .ftable tr.rv .ck,.js .ftable tr.rv .nx{opacity:1;transform:none;transition:none}
}

/* ---------- guarantee ---------- */
.guar{border:1px solid rgba(66,130,216,.45);border-radius:14px;padding:30px;background:rgba(66,130,216,.06)}
.guar h3{font-size:1.4rem}
.guar p:last-child{margin-bottom:0}
.guar .terms{font-size:.88rem;color:var(--uu-muted)}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--uu-border);padding:6px 0}
.faq summary{
  cursor:pointer;padding:18px 0;font-family:var(--uu-font-display);text-transform:uppercase;
  font-size:1.16rem;letter-spacing:.01em;list-style:none;display:flex;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--uu-primary);font-family:var(--uu-font-mono)}
.faq details[open] summary:after{content:"\2013"}
.faq .a{color:var(--uu-muted);padding:0 0 20px;max-width:74ch}
.faq .a p:last-child{margin-bottom:0}

/* ---------- not for ---------- */
.notfor li{padding:14px 0 14px 34px;position:relative;border-bottom:1px solid var(--uu-border);color:var(--uu-muted)}
.notfor li:before{content:"\2715";position:absolute;left:4px;top:14px;color:var(--uu-accent);font-family:var(--uu-font-mono);font-size:.9rem}
.notfor ul{list-style:none;padding:0;margin:0}

/* ---------- urgency ---------- */
.cal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.cal .card{padding:22px}
.cal .d{font-family:var(--uu-font-mono);font-size:.8rem;color:var(--uu-accent);letter-spacing:.05em;margin-bottom:8px}
.cal h4{font-size:1.05rem;margin-bottom:8px}
.cal p{font-size:.9rem;color:var(--uu-muted);margin:0}
.srcline{font-family:var(--uu-font-mono);font-size:.72rem;color:var(--uu-muted);margin-top:18px;letter-spacing:.03em}
.mathbox{border:1px solid var(--uu-border);border-radius:12px;padding:26px;margin-top:26px;background:var(--uu-card)}
.sec-alt .mathbox{background:var(--uu-bg)}
.mathbox p:last-child{margin-bottom:0}

/* ---------- recap ---------- */
.recap{background:linear-gradient(135deg,var(--uu-secondary),var(--uu-bg));border-radius:16px;padding:44px 34px;border:1px solid var(--uu-border)}
.recap ul{list-style:none;padding:0;margin:0 0 26px;max-width:640px}
.recap li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid var(--uu-border);font-size:.97rem}
.recap li:before{content:"\2713";position:absolute;left:2px;color:var(--uu-accent)}

/* ---------- off ramp ---------- */
.offramp{text-align:center;background:linear-gradient(135deg,rgba(193,101,46,.16),rgba(11,26,38,.2));padding:78px 0}

/* ---------- footer ---------- */
.ft{background:var(--uu-card);border-top:1px solid var(--uu-border);padding:56px 0 30px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ft h4{font-family:var(--uu-font-mono);font-size:.7rem;letter-spacing:.13em;color:var(--uu-muted);text-transform:uppercase;margin-bottom:14px}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin-bottom:9px}
.ft a{color:var(--uu-fg);text-decoration:none;font-size:.92rem}
.ft a:hover{color:var(--uu-primary)}
.ft-brand .uu-logo{width:56px;height:56px;margin-bottom:14px}
.ft-brand p{color:var(--uu-muted);font-size:.9rem;max-width:34ch}
.ft-bottom{border-top:1px solid var(--uu-border);margin-top:38px;padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.ft-bottom p{font-family:var(--uu-font-mono);font-size:.72rem;color:var(--uu-muted);margin:0;letter-spacing:.03em}
.social{display:flex;gap:16px}
.social a{font-family:var(--uu-font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--uu-muted);text-decoration:none}
.social a:hover{color:var(--uu-fg)}

/* ---------- sticky buy bar (appears only after the offer stack) ---------- */
.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(11,26,38,.97);
  border-top:1px solid var(--uu-border);padding:11px 16px;
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  transform:translateY(120%);transition:transform .25s ease;
  box-shadow:0 -18px 40px -26px rgba(0,0,0,.9);
}
.stickybuy.on{transform:translateY(0)}
.stickybuy .t{font-family:var(--uu-font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--uu-muted);line-height:1.35}
.stickybuy .t b{color:var(--uu-fg);display:block;font-size:.85rem}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .rv.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .proof-item{grid-template-columns:1fr}
  .proof-item:nth-child(even) .proof-txt{order:0}
  .cal{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:56px 0}
  .g2,.g4{grid-template-columns:1fr}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .hero{padding:60px 0 48px}
  .btn{display:block;width:100%}
  .btn-row{flex-direction:column}
  .stickybuy .btn{width:auto;display:inline-block}
  .ft-grid{grid-template-columns:1fr}
  .stack-item{padding:24px 20px}
  .hdr-in{gap:12px}
  body{padding-bottom:74px}
}

/* =========================================================================
   FUNNEL-ONLY ADDITIONS. Not in the mock, required to ship the page.
   Kept at the bottom so the block above stays a clean diff against the mock.
   ========================================================================= */

/* Divi, Bloom and Monarch are dequeued on these templates, so any chrome they
   still print into the footer would land unstyled. Hide it rather than edit
   functions.php, which stays untouched. */
body.uu-funnel-page .uu-footer-follow,
body.uu-funnel-page [class*="et_bloom"],
body.uu-funnel-page [class*="et_monarch"],
body.uu-funnel-page [class*="et_social"],
body.uu-funnel-page #et-boc,
body.uu-funnel-page #main-header,
body.uu-funnel-page #et-main-area{display:none !important}

/* the naked variant: brand bar only, no nav, minimal footer */
.hdr.hdr-naked .hdr-in{justify-content:center}
.hdr.hdr-naked .brand{margin-right:0}
.hdr.hdr-naked .brand .wordmark{display:inline-block}
.ft.ft-min{padding:40px 0 30px}
.ft.ft-min .ft-bottom{border-top:0;margin-top:0;padding-top:0;justify-content:center;text-align:center;flex-direction:column;gap:12px}
.ft.ft-min .ft-legal{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.ft.ft-min .ft-legal a{font-family:var(--uu-font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--uu-muted)}
.ft.ft-min .ft-legal a:hover{color:var(--uu-fg)}
.ft.ft-min .uu-logo{width:48px;height:48px;margin:0 auto 16px}

/* contact page */
.contact-wrap{max-width:660px;margin:0 auto}
.uu-form{margin-top:34px}
.uu-field{margin-bottom:20px}
.uu-field label{
  display:block;font-family:var(--uu-font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--uu-muted);margin-bottom:8px;
}
.uu-field input,.uu-field textarea{
  width:100%;background:var(--uu-bg);color:var(--uu-fg);font-family:var(--uu-font-sans);
  font-size:1rem;border:1px solid var(--uu-border);border-radius:9px;padding:13px 15px;
}
.sec-alt .uu-field input,.sec-alt .uu-field textarea{background:var(--uu-card)}
.uu-field input:focus,.uu-field textarea:focus{outline:2px solid var(--uu-primary);outline-offset:1px;border-color:var(--uu-primary)}
.uu-field textarea{min-height:170px;resize:vertical}
.uu-turnstile{margin:8px 0 22px;min-height:65px}
.uu-form-note{font-family:var(--uu-font-mono);font-size:.72rem;color:var(--uu-muted);letter-spacing:.03em;margin-top:16px}
.uu-form-msg{
  border-radius:10px;padding:16px 18px;margin-top:20px;font-size:.95rem;display:none;
  border:1px solid var(--uu-border);background:rgba(255,255,255,.03);
}
.uu-form-msg.show{display:block}
.uu-form-msg.ok{border-color:rgba(66,130,216,.5);background:rgba(66,130,216,.08)}
.uu-form-msg.bad{border-color:rgba(193,101,46,.5);background:rgba(193,101,46,.08)}
.uu-form button[type=submit]:disabled{opacity:.55;cursor:not-allowed}

/* the guarantee cards carry more copy than the mock's draft version */
.guar h3{margin-bottom:12px}
.guar p{margin-bottom:12px}
.guar a{color:var(--uu-fg);text-decoration:underline}

/* filled product screenshots (real UI, added 2026-08-10) ------------------ */
.shot-row{align-items:start}
.shot.shot-filled{
  display:block;padding:0;min-height:0;text-align:left;
  border-style:solid;border-color:var(--uu-border);background:var(--uu-card);
  overflow:hidden;margin:0 0 16px;
}
.sec-alt .shot.shot-filled{background:var(--uu-bg)}
.shot.shot-filled .shot-img{display:block;width:100%;height:auto;border-radius:0}
.shot-cap{
  font-family:var(--uu-font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--uu-muted);padding:10px 13px;border-top:1px solid var(--uu-border);line-height:1.35;
}
/* the proof rows put the frame beside the copy, so it should not stretch */
.proof-item .shot.shot-filled{align-self:start}

/* hero CTA pair, centred. Wayne, 2026-08-10 ------------------------------- */
/* The hero copy is centred but .btn-row is a plain flex row, so the two
   buttons sat hard left under centred text. Centre the pair as a group. The
   mono line under them already centres, it inherits .hero{text-align:center}.
   Scoped to .hero on purpose: the S12 recap block keeps its left aligned row. */
.hero .btn-row{justify-content:center}
@media (max-width:640px){
  /* the row becomes a column here and the buttons go full width, so the stack
     is centred by construction. Stated so nobody "fixes" it again later. */
  .hero .btn-row{align-items:center}
}