/* ============================================================
   /home — design port, 2026-08-20 handoff (Home.dc.html)
   Namespaced under .p-home so nothing leaks into the shell.
   Design tokens are mapped onto the marketing-shell tokens
   where they match; scoped to the wrapper, NOT :root.

   NOTE on --green: marketing-shell.css redefines --green as brand
   ORANGE for legacy template references. The design means literal
   green, so this file uses a local --ok token instead and never
   var(--green).
   ============================================================ */

/* Self-hosted JetBrains Mono subsets for the hero cube canvas. The canvas
   draws '500 10px "JetBrains Mono"' incl. 'Δ' (greek); canvas text never
   triggers Google Fonts' lazy subset loads, so these local faces guarantee
   the glyphs. Variable-font subsets: one face serves 400-700. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../fonts/jetbrains-mono-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

.p-home {
  /* design-file custom properties → shell tokens */
  --bg: var(--bg-0);
  --bg1: var(--bg-1);
  --bg2: var(--bg-2);
  --bg3: var(--bg-3);
  /* --line / --ink inherit from :root and already match the design */
  --line2: var(--line-2);
  --ink2: var(--ink-2);
  --ink3: var(--ink-3);
  --ink4: var(--ink-4);
  /* --accent already #ef5920 on :root */
  --accent2: var(--green-2);      /* deep orange #c4471a */
  --glow: var(--green-glow);
  --gold: #d9a23a;                /* design gold (guild brass) */
  /* Tokens the marketing shell does not carry. --on-brand is the brand
     spec's ink for anything sitting ON orange — never #fff. */
  --on-brand: #201009;
  --ok: #0a8754;                  /* literal green (see file header) */
  --ok-soft: rgba(10,135,84,.10);
  --danger: #d3381a;
  --amber: #c79100;
  --blue: #2c7be5;

  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(239,89,32,.10), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

/* ---- keyframes (da- prefixed, from the design helmet block) ---- */
@keyframes da-led    { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes da-scroll { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes da-pulse  { 0%,100% { box-shadow:inset 0 0 0 1px rgba(239,89,32,.5),0 0 16px rgba(239,89,32,.16) } 50% { box-shadow:inset 0 0 0 1px rgba(239,89,32,.9),0 0 26px rgba(239,89,32,.4) } }
@keyframes da-flame  { 0%,100% { transform:scale(1); opacity:.92 } 50% { transform:scale(1.18); opacity:1 } }
@keyframes da-up     { 0% { transform:translateY(2px); opacity:.5 } 100% { transform:translateY(0); opacity:1 } }
@keyframes da-blink  { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
@keyframes da-ping   { 0% { transform:scale(.6); opacity:.8 } 100% { transform:scale(2.6); opacity:0 } }
@keyframes da-kanban { 0%,12% { left:2% } 44%,56% { left:35% } 88%,100% { left:68% } }
@keyframes da-rise   { 0% { opacity:0; transform:translateY(7px) } 14%,100% { opacity:1; transform:translateY(0) } }
/* tab-tax + data-is-yours (2026-08-20 handoff) */
@keyframes da-badge    { 0%,100% { transform:scale(1) } 50% { transform:scale(1.22) } }
@keyframes da-redglow  { 0%,100% { opacity:1 } 50% { opacity:.45 } }
@keyframes da-btnflash { 0%,100% { background:#d3381a } 50% { background:#a82a12 } }
@keyframes da-spin     { to { transform:rotate(360deg) } }
@keyframes da-nudge    { 0%,100% { transform:rotate(var(--rot)) translateX(0) } 50% { transform:rotate(var(--rot)) translateX(2px) } }
@keyframes da-eq       { 0%,100% { transform:scaleY(.45) } 50% { transform:scaleY(1) } }
@keyframes da-scan     { 0% { transform:translateX(-100%) } 100% { transform:translateX(100%) } }

/* ---- shared section bones ---- */
.p-home .hm-eyebrow { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .08em; margin-bottom: 14px; }
.p-home .hm-h2 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.022em; margin: 0; text-wrap: balance; }

/* ---- hero ---- */
.p-home .hm-hero-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
@media (max-width: 1024px) { .p-home .hm-hero-grid { grid-template-columns: 1fr; } }
.p-home .hm-ticker { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line2); border-radius: 999px; padding: 6px 13px 6px 9px; font-family: var(--mono); font-size: 12px; color: var(--ink2); background: var(--bg1); margin-bottom: 24px; text-decoration: none; transition: border-color .15s, transform .15s; }
.p-home .hm-ticker:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.p-home .hm-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 6px; font-family: var(--mono); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s, color .15s; }
.p-home .hm-cta-primary { color: var(--on-brand); background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 14px var(--glow); }
.p-home .hm-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--glow); }
.p-home .hm-cta-outline { color: var(--ink); border: 1px solid var(--line2); }
.p-home .hm-cta-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ---- competitor marquee ---- */
.p-home .hm-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); overflow: hidden; padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.p-home .hm-mq-track { display: flex; gap: 52px; white-space: nowrap; width: max-content; animation: da-scroll 48s linear infinite; font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; }
.p-home .hm-mq-track:hover { animation-play-state: paused; }
.p-home .mq-item { color: var(--ink4); }
.p-home .mq-item.mq-us { color: var(--accent); }
.p-home .mq-tag { font-family: var(--mono); font-size: 13px; color: var(--accent2); }
.p-home .mq-us .mq-tag { color: inherit; }

/* ---- the tab tax ---- */
.p-home .tx-wrap { max-width: 1180px; margin: 0 auto; }
.p-home .tx-grid { display: grid; grid-template-columns: 1.12fr minmax(320px, .88fr); gap: 20px; margin-top: 34px; align-items: start; }
@media (max-width: 1080px) { .p-home .tx-grid { grid-template-columns: 1fr; } }
.p-home .tx-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.p-home .tx-card { background: var(--bg1); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; min-width: 0; }
.p-home .tx-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink4); }

/* browser chrome mocks (eight tabs, then one) */
.p-home .tx-frame { position: relative; margin-top: 40px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); background: var(--bg1); box-shadow: 0 30px 70px -46px rgba(20,14,8,.5); }
.p-home .tx-frame.is-one { margin-top: 34px; box-shadow: 0 34px 80px -44px rgba(239,89,32,.55); }
.p-home .tx-tabbar { display: flex; align-items: flex-end; gap: 2px; padding: 9px 12px 0; background: var(--bg3); overflow-x: auto; scrollbar-width: none; }
.p-home .tx-tabbar::-webkit-scrollbar { display: none; }
.p-home .tx-dots { display: flex; gap: 6px; padding: 0 10px 11px 2px; flex: none; }
@media (max-width: 560px) { .p-home .tx-dots { display: none; } }
.p-home .tx-tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 9px; border-radius: 8px 8px 0 0; background: var(--bg2); border: 1px solid var(--line); border-bottom: none; }
.p-home .tx-tab.is-on { background: var(--bg1); }
@media (max-width: 560px) { .p-home .tx-tab { flex: 0 0 128px; } }
.p-home .tx-fav { position: relative; width: 12px; height: 12px; flex: none; border-radius: 3px; }
.p-home .tx-badge { position: absolute; top: -6px; left: -7px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-family: var(--mono); font-size: 9px; line-height: 15px; text-align: center; border: 1.5px solid var(--bg2); }
.p-home .tx-tabname { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-home .tx-tab.is-on .tx-tabname { color: var(--ink); }
.p-home .tx-urlbar { height: 44px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg1); }
.p-home .tx-url { flex: 1; min-width: 0; height: 26px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 10.5px; color: var(--ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-home .tx-body { padding: 26px 0; position: relative; background: repeating-linear-gradient(0deg, var(--bg2) 0 22px, var(--bg1) 22px 44px); display: grid; place-items: center; }
.p-home .tx-login { width: min(340px, 86%); background: var(--bg1); border: 1px solid var(--line2); border-radius: 12px; padding: 20px 22px; box-shadow: 0 20px 40px -30px rgba(20,14,8,.5); text-align: center; }

/* eight reps who need a check-in */
.p-home .tx-reps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
@media (max-width: 820px) { .p-home .tx-reps { grid-template-columns: 1fr; } }
.p-home .tx-rep { position: relative; display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px 9px 12px; min-width: 0; transform: rotate(var(--rot)); animation: da-nudge var(--dur) ease-in-out var(--delay) infinite; }
.p-home .tx-rep-av { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bg3); display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; color: var(--ink3); }
.p-home .tx-rep-unread { position: absolute; top: -3px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--danger); color: #fff; font-family: var(--mono); font-size: 8.5px; line-height: 14px; text-align: center; border: 1.5px solid var(--bg2); }
.p-home .tx-rep-q { display: block; font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-home .tx-rep-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; min-width: 0; }
.p-home .tx-rep-name { font-family: var(--mono); font-size: 9.5px; color: var(--ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-home .tx-touch { flex: none; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; background: var(--bg3); color: var(--ink4); }
.p-home .tx-touch.is-hot { background: rgba(211,56,26,.12); color: var(--danger); }

/* what it costs by year — the two cash piles */
.p-home .tx-piles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: end; }
@media (max-width: 1080px) { .p-home .tx-piles { grid-template-columns: minmax(0, 1fr); } }
.p-home .tx-pile { min-width: 0; }
.p-home .tx-pile img { width: 100%; max-width: 340px; height: auto; display: block; filter: drop-shadow(0 10px 16px rgba(20,14,8,.24)); }
.p-home .tx-pile-da { position: relative; width: 100%; max-width: 340px; }
/* The two stacked copies must track the container, not their intrinsic 340px:
   the width attribute would otherwise set the grid column's min-content. */
.p-home .tx-pile-da img { width: 100%; max-width: none; height: auto; display: block; }
.p-home .tx-pile-ghost { filter: grayscale(1) opacity(.22); }
.p-home .tx-pile-lit { position: absolute; inset: 0; clip-path: inset(0 58.6% 0 0); filter: grayscale(1) sepia(1) saturate(5.5) hue-rotate(-22deg) contrast(1.05) drop-shadow(0 10px 16px rgba(196,71,26,.3)); }
.p-home .tx-pile-rule { position: absolute; top: 0; bottom: 0; left: 41.4%; width: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(239,89,32,.6); }
.p-home .tx-pile-flag { position: absolute; top: 0; left: 41.4%; transform: translateX(-50%) translateY(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 4px 8px; border-radius: 6px; background: var(--accent); color: var(--on-brand); white-space: nowrap; }
.p-home .tx-yearlist { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.p-home .tx-yearrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--mono); }

/* the receipt */
.p-home .tx-receipt { position: relative; background: #faf6ee; color: #1a1714; border-radius: 5px; padding: 28px 26px; font-family: var(--mono); box-shadow: 0 40px 80px -34px rgba(13,16,14,.35); }
@media (max-width: 560px) { .p-home .tx-receipt { padding: 20px 16px; } }
.p-home .tx-bills { display: grid; grid-template-columns: 1fr auto auto; gap: 9px 14px; font-size: 12px; }
.p-home .tx-bills .h { color: #8a8073; font-size: 9.5px; letter-spacing: .1em; }
.p-home .tx-bills .r { text-align: right; }
.p-home .tx-bills .y1 { text-align: right; color: #5c554b; }
.p-home .tx-bills span { min-width: 0; overflow-wrap: anywhere; }
.p-home .tx-da { margin-top: 16px; background: #1a1714; color: #faf6ee; border-radius: 4px; padding: 14px 16px; }

/* one tab: the DealArena frame */
.p-home .tx-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; overflow: hidden; background: #1e1b18; border-right: 1px solid #2e2a25; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 0 12px; }
.p-home .tx-railslot { width: 26px; height: 26px; flex: none; border-radius: 7px; background: transparent; }
.p-home .tx-railslot.is-on { background: rgba(239,89,32,.14); }
.p-home .tx-inside { margin-left: 44px; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.p-home .tx-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 820px) { .p-home .tx-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-home .tx-mod { display: flex; align-items: center; gap: 8px; background: #1e1b18; border: 1px solid #2e2a25; border-radius: 9px; padding: 10px 11px; min-width: 0; }
.p-home .tx-mod span:last-child { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10.5px; color: #c6bfb2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-home .tx-ctas { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---- data is yours ---- */
.p-home .dy-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 20px; margin-top: 44px; align-items: stretch; }
@media (max-width: 1080px) { .p-home .dy-grid { grid-template-columns: 1fr; } }
.p-home .dy-never { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.p-home .dy-never > span:nth-child(2) { flex: 1; font-size: 15.5px; color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.p-home .dy-x { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: rgba(239,89,32,.10); color: var(--accent); font-family: var(--mono); font-size: 13px; }
.p-home .dy-switch { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 24px; color: #f1ede6; background: linear-gradient(168deg, #22201c, #12100e 62%); border: 1px solid #3c362f; box-shadow: 0 30px 70px -46px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
.p-home .dy-tape { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(180deg, #ef5920 0 10px, #201009 10px 20px); opacity: .5; }
.p-home .dy-eq { margin-left: auto; display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.p-home .dy-eq span { width: 3px; background: #27d97c; transform-origin: bottom; animation: da-eq 1.3s ease-in-out infinite; }
.p-home .dy-steps { margin: 18px 0 0 12px; position: relative; overflow: hidden; background: #0d0b09; border: 1px solid #2e2a25; border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.p-home .dy-step { display: flex; gap: 12px; align-items: flex-start; }
.p-home .dy-step > span:first-child { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #ef5920; padding-top: 2px; }
.p-home .dy-step > span:last-child { flex: 1; font-size: 13.5px; line-height: 1.55; color: #c6bfb2; }

/* ---- your workspace, mapped ---- */
.p-home .ws-card { position: relative; overflow: hidden; background: #171412; border: 1px solid #2e2a25; border-radius: 16px; padding: 24px 26px 26px; color: #f1ede6; }
.p-home .ws-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #ef5920, transparent); animation: da-scan 6.5s linear infinite; }
.p-home .ws-schema { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1080px) { .p-home .ws-schema { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .p-home .ws-schema { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-home .ws-tbl { background: #1e1b18; border: 1px solid #322d28; border-radius: 11px; padding: 13px 14px; min-width: 0; }
.p-home .ws-col { font-family: var(--mono); font-size: 10px; color: #5a544a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-home .ws-backups { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .p-home .ws-backups { grid-template-columns: 1fr; } }
.p-home .ws-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.p-home .ws-chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink3); background: var(--bg2); border: 1px solid var(--line); padding: 8px 12px; border-radius: 8px; }

/* ---- phone paddings (design: padX 18px, section 52px) ---- */
@media (max-width: 560px) {
  .p-home > section { padding-left: 18px !important; padding-right: 18px !important; }
  /* The tab-tax section is full-bleed (padding:82px 0) with its side inset on
     the inner .tx-wrap. The rule above now supplies that 18px on the section,
     so the wrap must drop its own 28px or the tab tax sits 36px in while every
     other section sits 18px in. Only the tab-tax wrap carries an inline style. */
  .p-home .tx-wrap[style] { padding-left: 0 !important; padding-right: 0 !important; }
  .p-home .tx-card, .p-home .ws-card, .p-home .dy-switch { padding-left: 18px; padding-right: 18px; }
  .p-home .pd-cta { padding: 22px 18px; }
}

/* ---- product feature cards ---- */
.p-home .pd-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
@media (max-width: 1080px) { .p-home .pd-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .p-home .pd-feats { grid-template-columns: 1fr; } }

/* ---- BDM Legion agent pills ---- */
.p-home .ag-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 6px; border-radius: 999px; background: #272320; border: 1px solid #3c362f; white-space: nowrap; }
.p-home .ag-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--on-brand); }
.p-home .ag-name { font-family: var(--mono); font-size: 11px; color: #f1ede6; }
.p-home .ag-role { font-family: var(--mono); font-size: 10px; }

/* ---- guild band ---- */
.p-home .g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
@media (max-width: 1024px) { .p-home .g-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .p-home .g-grid { grid-template-columns: 1fr; } }
.p-home .g-tile { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 13px; background: #1a1613; border: 1px solid #2c2620; text-decoration: none; transition: all .15s; }
.p-home .g-tile:hover { box-shadow: 0 10px 22px -10px rgba(239,89,32,.3); border-color: rgba(239,89,32,.4); transform: translateY(-2px); }
.p-home .g-slot { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line2); flex-shrink: 0; overflow: hidden; padding: 5px; }
.p-home .g-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.p-home .g-name { display: block; font-weight: 700; font-size: 14px; color: #f0ebe3; }
.p-home .g-verb { display: block; font-family: var(--mono); font-size: 9.5px; color: #8a8278; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.p-home .g-quest { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 13px; background: linear-gradient(150deg, var(--accent), var(--accent2)); border: 1px solid var(--accent); text-align: left; width: 100%; cursor: pointer; box-shadow: 0 10px 24px -10px var(--glow); transition: all .15s; font-family: inherit; }
.p-home .g-quest:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--glow); }
.p-home .g-quest .g-name { color: var(--on-brand); }
.p-home .g-quest .g-verb { color: rgba(32,16,9,.7); }

/* ---- The Ladder ---- */
.p-home .ladder-scroll { overflow-x: auto; }
.p-home .lad-cols, .p-home .lad-row { display: grid; grid-template-columns: 56px minmax(220px,1fr) 116px 182px 80px 110px 56px; gap: 14px; align-items: center; min-width: 820px; }
.p-home .lad-cols { padding: 12px 22px; border-bottom: 1px solid #2a1d10; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: #8a7860; }
.p-home .lad-row { padding: 15px 22px; border-bottom: 1px solid #1c130a; }
.p-home .lad-row:last-child { border-bottom: 0; }
.p-home .lad-row.lad-you { padding: 15px 18px; margin: 3px 10px; border-bottom: 0; border-radius: 12px; background: linear-gradient(90deg, rgba(239,89,32,.16), rgba(239,89,32,.02)); animation: da-pulse 2.6s ease-in-out infinite; }
.p-home .lad-rank { justify-self: center; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-family: var(--mono); font-size: 14px; font-weight: 800; }
.p-home .lad-rank.r-gold   { background: linear-gradient(150deg, #ffe588, #d9a426); color: #3a2a00; box-shadow: 0 0 18px rgba(255,210,63,.45); }
.p-home .lad-rank.r-silver { background: linear-gradient(150deg, #eef2f6, #aab4be); color: #23292f; }
.p-home .lad-rank.r-bronze { background: linear-gradient(150deg, #e6ad7c, #b9794a); color: #2a1607; }
.p-home .lad-rank.r-plain  { background: #1a130b; border: 1px solid #2f2113; color: #8a7860; font-size: 13px; }
.p-home .lad-hero { display: flex; align-items: center; gap: 11px; min-width: 0; }
.p-home .lad-av { width: 38px; height: 38px; border-radius: 9px; background: #15100a; border: 1px solid #3a2a17; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: #6b5a45; flex-shrink: 0; }
.p-home .lad-name { font-family: var(--display); font-weight: 700; font-size: 15px; color: #f3e9da; }
.p-home .lad-sub { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: #a08a6c; margin-top: 2px; white-space: nowrap; }
.p-home .lad-class { display: inline-flex; align-items: center; gap: 4px; color: #ef5920; }
.p-home .lad-tiercell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.p-home .lad-chip { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border-radius: 5px; }
.p-home .lad-chip.t-silver { color: #1a2129; background: linear-gradient(150deg, #eaf0f6, #9aa6b3); }
.p-home .lad-chip.t-bronze { color: #2a1607; background: linear-gradient(150deg, #e8a86a, #a3611f); }
.p-home .lad-lvl { font-family: var(--mono); font-size: 10px; color: #8a7860; }
.p-home .lad-lvl b { color: #f3e9da; }
.p-home .lad-prog-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: #a08a6c; margin-bottom: 5px; }
.p-home .lad-prog-head b { color: #f3e9da; }
.p-home .lad-bar { height: 6px; border-radius: 4px; background: #2a1d10; overflow: hidden; }
.p-home .lad-fill { height: 100%; background: linear-gradient(90deg, #ff6a24, #ffd23f); }
.p-home .lad-num { text-align: right; font-family: var(--mono); font-size: 15px; font-weight: 700; color: #f3e9da; }
.p-home .lad-num.dim { color: #cabba4; }
.p-home .lad-bounty { text-align: right; font-family: var(--mono); font-size: 15px; font-weight: 700; color: #ffd23f; }
.p-home .lad-streak { text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #6b5a45; }
.p-home .lad-streak.on { color: #ef5920; }
.p-home .lad-tab { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #8a7860; padding: 7px 14px; border-radius: 7px; user-select: none; }
.p-home .lad-tab.is-on { color: #160a03; background: linear-gradient(180deg, #ef5920, #c4471a); box-shadow: 0 4px 12px var(--glow); }

/* ---- console + closers coffee ---- */
.p-home .cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .p-home .cc-grid { grid-template-columns: 1fr; } }
.p-home .cc-thread { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.55); border: 1px solid #ece2d0; transition: all .15s; }
.p-home .cc-thread:hover { background: #fff; border-color: #d9a23a; transform: translateX(2px); }

/* ---- pricing ---- */
.p-home .pr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 1100px) { .p-home .pr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .p-home .pr-grid { grid-template-columns: 1fr; } }
.p-home .pr-card { background: var(--bg1); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; display: flex; flex-direction: column; position: relative; }
.p-home .pr-card.pr-feat { background: linear-gradient(180deg, rgba(239,89,32,.07), var(--bg1) 50%); border-color: var(--accent); box-shadow: 0 24px 48px -30px var(--glow); }
.p-home .pr-name { font-family: var(--mono); font-size: 13px; color: var(--ink3); text-transform: uppercase; letter-spacing: .1em; }
.p-home .pr-price { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -.04em; margin-top: 10px; line-height: 1; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.p-home .pr-price span { font-size: 13px; color: var(--ink3); font-weight: 500; letter-spacing: 0; }
.p-home .pr-price .strike { font-family: var(--mono); font-size: 14px; color: var(--ink4); text-decoration: line-through; font-weight: 500; }
.p-home .pr-list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--line2); display: flex; flex-direction: column; gap: 9px; flex: 1; font-size: 13px; color: var(--ink2); }
.p-home .pr-feat .pr-list { color: var(--ink); }
.p-home .pr-cta { margin-top: 16px; text-align: center; font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 11px; border-radius: 6px; text-decoration: none; display: block; transition: transform .15s, border-color .15s, color .15s, box-shadow .15s; }
.p-home .pr-cta.solid { color: var(--on-brand); background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 14px var(--glow); }
.p-home .pr-cta.solid:hover { transform: translateY(-1px); }
.p-home .pr-cta.line { color: var(--ink); border: 1px solid var(--line2); }
.p-home .pr-cta.line:hover { border-color: var(--accent); color: var(--accent); }

/* ---- founder ---- */
.p-home .fdr-card { max-width: 1240px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; padding: 48px; background: radial-gradient(600px 400px at 100% 0%, rgba(239,89,32,.06), transparent 70%), var(--bg1); display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; }
@media (max-width: 720px) { .p-home .fdr-card { grid-template-columns: 1fr; padding: 32px; } }