/* ============================================================
   BYC 2026 - INDICATOR detail / sales page (subscription).
   Hand-authored from design-prototypes/indicator-harmonic-v3.html
   (V3 "elevated dock"). Loads ON TOP of byc-product.css (which
   carries the tokens, fonts, .frame, .faq, .lightbox, .crumbs,
   .badge, .prose atoms) + byc-chrome.css (nav/footer/masthead).
   Activated for is_page('harmonic-rotations') in functions.php.
   Edit here directly; no build script for this page.
   ============================================================ */

/* ---- PDP layout ------------------------------------------------
   grid-areas give the right reading order on every screen:
     desktop  -> shot top-left, buy top-right (spans + sticky),
                 content under the shot on the left.
     mobile   -> shot, then buy card, then content
                 (see-it / price / details = best-practice order).
   ---------------------------------------------------------------- */
/* top/bottom only - must NOT reset .wrap's horizontal padding (0 24px),
   or content goes flush to the screen edges on mobile */
.pdp{padding-top:8px;padding-bottom:40px}
.pdp .crumbs{padding-top:24px}
.pdp-head{margin:24px 0 30px;max-width:760px}
.pdp-head .eyebrow{margin-bottom:16px}
.pdp-head h1{font-size:clamp(34px,5vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.pdp-head .tagline{color:var(--text-muted);font-size:clamp(15px,1.4vw,18px);line-height:1.55;
  margin-top:16px;max-width:60ch}

.pdp-grid{display:grid;column-gap:48px;align-items:start;
  grid-template-columns:minmax(0,1fr) 388px;
  grid-template-areas:"shot buy" "content buy"}
.pdp-hero{grid-area:shot;min-width:0}
.pdp-main{grid-area:content;min-width:0;margin-top:36px}
.pdp-rail{grid-area:buy;position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.pdp-main > .pdp-sec:first-child{border-top:0;margin-top:0;padding-top:0}

@media(max-width:1020px){
  .pdp-grid{grid-template-columns:1fr;grid-template-areas:"shot" "buy" "content";column-gap:0}
  .pdp-hero{margin-bottom:6px}
  .pdp-rail{position:static;margin:6px 0 8px}
  .pdp-main{margin-top:36px}
}

.pdp-cap{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);display:flex;justify-content:space-between;gap:14px;margin-top:14px}

/* ---- content sections ---- */
.pdp-sec{padding:40px 0 0;border-top:1px solid var(--line);margin-top:44px}
.pdp-sec .eyebrow{margin-bottom:16px}
.pdp-sec h2.sec-h{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.pdp-sec .sec-intro{color:var(--text-muted);font-size:16px;line-height:1.7;max-width:62ch;margin-bottom:8px}

/* method cards (rounded like the FAQ, per owner) */
.method{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:24px;margin-bottom:14px}
.method .mh{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.method .mn{font-family:var(--mono);font-size:12px;color:var(--accent-dim);font-weight:700;letter-spacing:.04em}
.method .mt{font-size:17px;font-weight:700;letter-spacing:-.01em}
.method p{color:var(--text-muted);font-size:16px;line-height:1.65}
.method ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:16px 0 0}
.method li{position:relative;padding-left:18px;color:var(--text-muted);font-size:16px;line-height:1.6}
.method li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.method li strong,.method li b{color:var(--text);font-weight:600}

/* plain feature list - red dot bullets (matches .method / .wheredef) */
.flist{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0}
.flist li{position:relative;padding-left:18px;color:var(--text-muted);font-size:16px;line-height:1.6}
.flist li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.flist li b{color:var(--text);font-weight:600}

/* formula block + where-list (volatility page; reusable on any indicator).
   Single-line formula scrolls inside its own box on narrow screens - it never
   widens the page. */
.formula{font-family:var(--mono);background:var(--inset);border:1px solid var(--line);border-radius:6px;
  padding:16px 18px;color:var(--text);font-size:12px;line-height:1.6;margin:0 0 18px;
  overflow-x:auto;white-space:nowrap}
.wheredef{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 14px}
.wheredef li{position:relative;padding-left:18px;color:var(--text-muted);font-size:16px;line-height:1.6}
.wheredef li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.wheredef b{color:var(--text);font-weight:600;font-family:var(--mono);font-size:13px}

/* ============================================================
   BUY RAIL - "ELEVATED DOCK" (accent glow + inline tab switch),
   with a slim Lifetime strip docked beneath. Rounded 6px corners.
   ============================================================ */
.dock{position:relative;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:6px;padding:24px 24px 22px;overflow:hidden}
.dock-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.dock-name{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}
.dock-trial{font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:none;
  color:var(--accent-dim);border:1px solid rgba(242,32,46,.4);border-radius:6px;padding:4px 9px;
  display:inline-flex;align-items:center;gap:7px}
.dock-trial::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

/* underline tab switch */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);background:none;border:0;padding:0 0 12px;cursor:pointer;transition:.16s;
  display:inline-flex;align-items:center;gap:7px;line-height:1}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.tabs button.on::after{transform:scaleX(1)}
.tabs .sv{font-size:11px;letter-spacing:.06em;color:var(--accent-dim)}

.dock-price{display:flex;align-items:baseline;gap:8px}
.dock-amt{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1}
.dock-per{font-family:var(--mono);font-size:13px;color:var(--text-muted)}
.dock-bill{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--text-muted);letter-spacing:.03em}
.dock-bill .save{color:var(--accent-dim);border:1px solid rgba(242,32,46,.35);padding:2px 7px;font-size:11px;letter-spacing:.12em}

.dock-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;height:52px;
  margin:20px 0 6px;background:#fff;color:#000;border:1px solid #fff;border-radius:6px;font-family:var(--mono);font-size:13.5px;
  letter-spacing:.04em;font-weight:600;cursor:pointer;transition:.18s}
.dock-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 30px var(--accent-glow)}
.dock-sub{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--text-faint);text-align:center}

.dock-checks{list-style:none;display:flex;flex-direction:column;gap:10px;margin:18px 0 0;
  border-top:1px solid var(--line);padding-top:18px}
.dock-checks li{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;
  letter-spacing:.02em;color:var(--text-muted)}
.dock-checks .ck{flex:none;width:16px;height:16px;display:grid;place-items:center;color:var(--accent-dim)}
.dock-checks .ck svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* access card: replaces the price/tabs block when the rail is
   "included with X" rather than a paid subscription (e.g. liquidity page). */
.incl{display:flex;flex-direction:column;gap:6px;padding-bottom:2px}
.incl-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.incl-title{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--text)}
.incl-note{color:var(--text-muted);font-size:14px;line-height:1.55;margin-top:6px}

/* slim lifetime strip docked under the card */
.liferow{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:16px 18px;transition:.16s}
.liferow:hover{border-color:var(--line-strong)}
.liferow .lt{display:flex;flex-direction:column;gap:3px;min-width:0}
.liferow .lt-h{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.liferow .lt-s{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--text-faint)}
.liferow .lt-p{font-family:var(--mono);font-size:18px;font-weight:700;margin-left:auto;white-space:nowrap}
.liferow a.lt-go{flex:none;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:6px;display:grid;place-items:center;
  color:var(--text);transition:.16s}
.liferow a.lt-go:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow)}
.liferow a.lt-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* small-screen polish */
@media(max-width:560px){
  .pdp-sec{padding-top:32px;margin-top:32px}
  .method{padding:20px}
  .dock{padding:22px 20px 20px}
}

/* ============================================================
   FAQ body sizing (16px) now lives in the shared product atoms
   (.faq-item summary / .a in byc-product.css), so indicator pages and
   the WooCommerce single-product page match with no .pdp override here.
   ============================================================ */