/* New look (Hormozi / website look) for the Plugin Builder guide page (/install/, body.guide-page) and the
   builder app (/app/, body.app-page). Dre, 2026-10-23: "restyle that, rebuild them to the new look."
   Same tokens as newlook.css (sales + partner pages). Loaded LAST on both pages. Layout, words, forms and
   data hooks are unchanged; this only swaps the look: Inter 900 caps headlines, JetBrains Mono labels and
   numbers, flat gold buttons, grid + glow background. */

:is(body.guide-page,body.app-page){
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --nl-ivory:#f1ece0;--nl-gold:#d9a93f;--nl-lg:#f3d58a;--nl-muted:#c9c2b4;--nl-line:#38332a;--nl-panel:#15110a;
  background:
    linear-gradient(#ffffff08 1px,transparent 1px) 0 0/72px 72px fixed,
    linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/72px 72px fixed,
    radial-gradient(60% 40% at 80% 6%,#3a2a12 0%,#1c150b 40%,#0d0b07 75%) fixed,#0d0b07;
  font-family:var(--body)}

/* ---------- shared: headlines, labels, buttons, code ---------- */
:is(body.guide-page,body.app-page) :is(h1,h2){font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.04em;color:var(--nl-ivory);background:none;-webkit-text-fill-color:currentColor}
:is(body.guide-page,body.app-page) :is(h1,h2) em{font-style:normal;color:var(--nl-gold);-webkit-text-fill-color:currentColor}
:is(body.guide-page,body.app-page) :is(h1,h2) .ln{display:block;white-space:nowrap}
:is(body.guide-page,body.app-page) :is(code,kbd,pre){font-family:var(--mono)}
:is(body.guide-page,body.app-page) :is(.btn,button.btn):not(.ghost):not(.danger){background:var(--nl-gold);border-color:var(--nl-gold);border-radius:0;color:#0d0b07;
  font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:none;background-image:none}
:is(body.guide-page,body.app-page) :is(.btn,button.btn):not(.ghost):not(.danger):hover{background:var(--nl-lg);color:#0d0b07;transform:none;box-shadow:none}
:is(body.guide-page,body.app-page) :is(.btn.ghost,.btn.danger){border-radius:0;font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
:is(body.guide-page,body.app-page) .btn:disabled{background:transparent;color:var(--nl-muted);border-color:var(--nl-line)}

/* ---------- guide page ---------- */
body.guide-page .brand span{font:700 14px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--nl-ivory)}
body.guide-page .top nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
body.guide-page .cover{background:transparent}
body.guide-page .cover .k{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.16em}
body.guide-page .cover .k::before,body.guide-page .toc h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--nl-gold);box-shadow:0 0 12px var(--nl-gold);margin-right:10px;vertical-align:1px}
/* each line stays whole; sized to its own column ("YOUR FIRST PLUGIN." is ~9.6em wide) */
body.guide-page .cover h1{line-height:.92;font-size:clamp(28px,calc((min(100vw - 96px,1064px) - 32px) * .525 / 9.8),64px)}
@media(max-width:800px){body.guide-page .cover h1{font-size:clamp(22px,calc((100vw - 48px) / 9.8),56px)}}
body.guide-page .pill{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:0}
body.guide-page .toc{background:var(--nl-panel);border-color:var(--nl-line);border-radius:4px}
body.guide-page .toc h2{font:700 13px/1.4 var(--mono);letter-spacing:.16em;color:var(--nl-gold)}
body.guide-page .toc a b{font-family:var(--mono);font-weight:700;color:var(--nl-gold)}
body.guide-page h2.sec{font-size:clamp(24px,4.4vw,42px);line-height:1;letter-spacing:-.045em;color:var(--nl-ivory)}
body.guide-page h2.sec .n{font:700 14px/1 var(--mono);letter-spacing:.12em;color:var(--nl-gold)}
body.guide-page h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;text-transform:uppercase;color:var(--nl-ivory)}
body.guide-page .card h3{color:var(--nl-gold)}
body.guide-page .tip{border-radius:4px;background:var(--nl-panel)}
body.guide-page .tip .t{font-family:var(--mono);font-weight:700;letter-spacing:.16em}
body.guide-page .card{border-radius:4px;background:var(--nl-panel)}
body.guide-page .stop{border-radius:4px}
body.guide-page .stop-sign{font-family:var(--display);font-weight:900;letter-spacing:.02em}
body.guide-page .stop h2{font-size:clamp(24px,3.4vw,34px);line-height:1.05;color:#ff9b8d}
body.guide-page ol.steps li::marker,body.guide-page ol.steps > li::before{font-family:var(--mono)}
body.guide-page footer :is(b,strong){font-family:var(--mono);letter-spacing:.12em}

/* ---------- builder app ---------- */
body.app-page .brand span{font-family:var(--mono);font-weight:700;letter-spacing:.16em;color:var(--nl-ivory)}
body.app-page .app-title b{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;color:var(--nl-ivory)}
body.app-page .app-title small,body.app-page .workspace-top,body.app-page .k,body.app-page .tag,body.app-page .lock,body.app-page .pill-saved,
body.app-page .pv-label,body.app-page .pv-stats small,body.app-page .prog{font-family:var(--mono);letter-spacing:.12em}
body.app-page .steps li .n{font-family:var(--mono);font-weight:700;border-radius:0}
body.app-page .main h1{font-weight:900;font-size:clamp(30px,4.2vw,52px);line-height:.95;letter-spacing:-.045em;text-wrap:balance}
body.app-page .card h2{font-size:21px;letter-spacing:-.03em;color:var(--nl-ivory)}
body.app-page .card h2 small{font-family:var(--mono);letter-spacing:.12em;color:var(--nl-gold)}
body.app-page :is(.out h3,.upsell h3,.item-head h3){font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;color:var(--nl-ivory)}
body.app-page .door b{font-family:var(--display);font-weight:900;letter-spacing:-.03em} /* colour left to the door's own state (dark title on the light hover card) */
body.app-page .asks div > span{font-family:var(--mono);font-weight:700;color:var(--nl-gold)}
body.app-page :is(.pv-head b,.pv-pkg b){font-family:var(--mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nl-ivory)}
body.app-page .pv-id b{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--nl-ivory)}
body.app-page .pv-id .ini{font-family:var(--display);font-weight:900}
body.app-page .pv-stats b{font-family:var(--display);font-weight:900;letter-spacing:-.04em;color:var(--nl-gold)}
body.app-page :is(.card,.out,.upsell,.item,.door,.pv-card){border-radius:4px}

/* ---------- journey pages: /go/, /checkout/, /thanks/, /upgrade/, /lock/ (Dre, 2026-10-23: finish the redesign) ---------- */
body.shortcut-page,body.checkout-page,body.receipt-page,body.packs-page,body.access-page{
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --nl-ivory:#f1ece0;--nl-gold:#d9a93f;--nl-lg:#f3d58a;--nl-muted:#c9c2b4;--nl-line:#38332a;--nl-panel:#15110a;
  --metal:#d9a93f;
  background:
    linear-gradient(#ffffff08 1px,transparent 1px) 0 0/72px 72px fixed,
    linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/72px 72px fixed,
    radial-gradient(60% 40% at 80% 6%,#3a2a12 0%,#1c150b 40%,#0d0b07 75%) fixed,#0d0b07;
  font-family:var(--body)}
.nl-journey :is(h1,h2){font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;
  color:var(--nl-ivory);background:none;-webkit-text-fill-color:currentColor;-webkit-background-clip:initial;background-clip:initial}
.nl-journey :is(h1,h2) em{font-style:normal;color:var(--nl-gold);-webkit-text-fill-color:currentColor}
.nl-journey h1{line-height:.95;letter-spacing:-.045em}
.nl-journey .gold-ink{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--nl-ivory);-webkit-text-fill-color:currentColor}
.nl-journey :is(.eyebrow,.kicker,.k,.ribbon,.tag,.st){font-family:var(--mono)!important;font-weight:700!important;letter-spacing:.14em}
.nl-journey :is(.eyebrow,.kicker)::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--nl-gold);box-shadow:0 0 12px var(--nl-gold);margin-right:10px;vertical-align:1px}
.nl-journey .journey-header .brand span{font:700 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nl-ivory)}
.nl-journey .journey-header nav a,.nl-journey header nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.nl-journey :is(.cta,.btn):not(.ghost){background:var(--nl-gold);border-color:var(--nl-gold);border-radius:0;color:#0d0b07;
  font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:none;background-image:none}
.nl-journey :is(.cta,.btn):not(.ghost):hover{background:var(--nl-lg);color:#0d0b07;transform:none;box-shadow:none}
.nl-journey .btn.ghost{border-radius:0;font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.nl-journey :is(code,.code,kbd,pre){font-family:var(--mono)}
.nl-journey :is(.price,.was,.now,.option-price,.pr > span,.checkout-total b,.spots b){font-family:var(--display);font-weight:900;letter-spacing:-.03em}
.nl-journey .pr small{font-family:var(--mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.nl-journey .pack.best h2{color:#0d0b07}
.nl-journey .brand span{font:700 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nl-ivory)}
/* headline lines stay whole (break only at a comma or period); each piece sized to its own column */
.nl-journey :has(> h1.nl-fit){container-type:inline-size}
.nl-journey h1.nl-fit .ln{display:block;white-space:nowrap}
.nl-journey h1.nl-fit{font-size:clamp(24px,calc(100cqi / var(--nlw,8.6)),76px)}
.nl-journey :is(.card,.pack,.checkout-option,.access-panel,.short-detail,.proof-file){border-radius:4px}
.nl-journey.access-page form button[type=submit]{background:var(--nl-gold);border-color:var(--nl-gold);border-radius:0;color:#0d0b07;
  font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:none;background-image:none}
.nl-journey.access-page form button[type=submit]:hover{background:var(--nl-lg)}
.nl-journey :is(.checkout-refresh,[data-pause-updates],[data-refresh-updates],[data-proof-view]){border-radius:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- legal pages (/terms/, /privacy/) + owner stats board (/stats/) — Dre, 2026-10-23: finish every page ---------- */
body.legal-page,body.stats-page{
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --nl-ivory:#f1ece0;--nl-gold:#d9a93f;--nl-lg:#f3d58a;
  background:
    linear-gradient(#ffffff08 1px,transparent 1px) 0 0/72px 72px fixed,
    linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/72px 72px fixed,
    radial-gradient(60% 40% at 80% 6%,#3a2a12 0%,#1c150b 40%,#0d0b07 75%) fixed,#0d0b07;
  font-family:var(--body)}
body.legal-page :is(h1,h2,.sec){font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;color:var(--nl-ivory);background:none;-webkit-text-fill-color:currentColor}
body.legal-page h1{line-height:.95;letter-spacing:-.045em}
body.legal-page :is(.k,.n,.meta b){font-family:var(--mono);font-weight:700;letter-spacing:.06em}
body.legal-page .top .brand span,body.legal-page .brand span{font:700 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nl-ivory)}
body.legal-page .top nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
body.legal-page :is(.btn,.cta):not(.ghost){background:var(--nl-gold);border-radius:0;color:#0d0b07;font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;background-image:none;box-shadow:none}
body.stats-page{font:500 16px/1.55 var(--body)}
body.stats-page :is(.gold,.big){font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;background:none;-webkit-text-fill-color:currentColor;color:var(--nl-ivory)}
body.stats-page .big{color:var(--nl-gold)}
body.stats-page h2{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em}
body.stats-page :is(.kicker,.ph,.seg){font-family:var(--mono);letter-spacing:.12em}
body.stats-page .kpi .n{font-family:var(--display);font-weight:900;letter-spacing:-.03em;color:var(--nl-gold)}
body.stats-page :is(.search input,.sortsel select){font-family:var(--body)}
body.stats-page .chart .empty{font-family:var(--body)}
/* App rail (desktop): keep "Prompts & tests" / "Files & branding" and their NOW badge on one line (Dre, 2026-10-23) */
@media(min-width:861px){body.app-page .steps li .st{white-space:nowrap;flex:none;letter-spacing:0}body.app-page .steps li button{gap:8px;padding:0 6px}}
/* Launch ladder on /go/: prices in the new look (Cinzel isn't loaded there), and the live row keeps normal text.
   Phones: the Claude plugin button label stays centred when it wraps. (2026-10-23 mobile alignment pass) */
.nl-journey .ld .p{font-family:var(--display);font-weight:900;letter-spacing:-.03em}
.nl-journey .ld li.now{font-family:inherit;font-weight:inherit;letter-spacing:normal}
.nl-journey.packs-page .pack .cta{justify-content:center;text-align:center}
@media(max-width:380px){.nl-journey.packs-page .pack .cta{font-size:12.5px;letter-spacing:.02em;padding-inline:10px}}
@media(max-width:380px){.nl-journey .ribbon{letter-spacing:.04em}}
@media(max-width:360px){.nl-journey [data-proof-view]{min-width:0;padding-inline:10px;letter-spacing:.02em;white-space:nowrap}}