/* VIKSYA — /approach — SHARED BASE CSS (matches product page system) */
:root{
  --ink:#10172A; --ink-soft:#1A2238;
  --parchment:#F7F4ED; --parchment-dim:#EDE8DB;
  --brass:#B8862E; --brass-bright:#D6A14A;
  --green:#3F7D5C; --amber:#C8932F; --red:#B4543D;
  --slate:#5B6478; --slate-light:#8B91A3;
  --line:rgba(16,23,42,0.10); --line-dark:rgba(247,244,237,0.12);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
}
#vp-root{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);width:100vw;overflow-x:hidden;}
#vp-root *{box-sizing:border-box;}
#vp-root a{color:inherit;text-decoration:none;}
.vp-wrap{max-width:1100px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.vp-wrap{padding:0 20px;}}
.vp-rag{display:flex;width:100%;height:5px;}
.vp-rag span{flex:1;}
.vp-rag .g{background:var(--green);}
.vp-rag .a{background:var(--amber);}
.vp-rag .r{background:var(--red);}
.vp-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.vp-dot.g{background:var(--green);}
.vp-dot.a{background:var(--amber);}
.vp-dot.r{background:var(--red);}

/* HERO */
.vp-hero{background:var(--ink);color:var(--parchment);padding:72px 0 64px;position:relative;overflow:hidden;}
.vp-hero::before{content:"";position:absolute;top:-180px;right:-180px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(184,134,46,0.14),transparent 70%);pointer-events:none;}
.vp-hero-inner{display:flex;gap:56px;align-items:flex-start;}
.vp-hero-left{flex:1.2 1 380px;min-width:280px;}
.vp-hero-right{flex:1 1 280px;min-width:240px;}
@media(max-width:860px){.vp-hero-inner{flex-direction:column;gap:32px;}}
.vp-breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-light);margin-bottom:16px;display:block;}
.vp-breadcrumb a{color:var(--brass-bright);}
.vp-h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.5vw,52px);line-height:1.08;letter-spacing:-0.01em;margin:0 0 16px;}
.vp-hero-question{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;color:var(--parchment);margin:0 0 14px;line-height:1.4;max-width:520px;}
.vp-hero-outcome{font-size:16px;color:var(--slate-light);line-height:1.6;margin:0 0 28px;max-width:500px;}
.vp-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.vp-badge{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;padding:5px 10px;border:1px solid var(--line-dark);color:var(--slate-light);}
.vp-badge.hi{border-color:var(--brass);color:var(--brass-bright);}

/* DISCIPLINE PANEL (hero right — replaces buy box on non-product pages) */
.vp-disc-panel{background:var(--ink-soft);border:1px solid var(--brass);padding:26px 24px;}
.vp-disc-panel .dp-label{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-light);margin-bottom:18px;display:block;}
.vp-disc-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-dark);}
.vp-disc-row:last-child{border-bottom:none;}
.vp-disc-row .dr-n{font-family:var(--mono);font-size:11px;color:var(--brass-bright);width:20px;flex-shrink:0;margin-top:2px;}
.vp-disc-row .dr-t{font-family:var(--sans);font-size:14px;color:var(--parchment);font-weight:600;}
.vp-disc-row .dr-t small{display:block;font-size:11.5px;color:var(--slate-light);font-weight:400;margin-top:2px;line-height:1.4;}

/* SECTION */
.vp-section{padding:72px 0;}
.vp-section.dark{background:var(--ink);color:var(--parchment);}
.vp-section.dim{background:var(--parchment-dim);}
.vp-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--brass);margin-bottom:12px;display:block;}
.vp-section.dark .vp-eyebrow{color:var(--brass-bright);}
.vp-h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-0.01em;margin:0 0 12px;}
.vp-lead{font-size:16px;color:var(--slate);line-height:1.65;margin:0 0 40px;max-width:620px;}
.vp-section.dark .vp-lead{color:var(--slate-light);}

/* PROBLEM */
.vp-problem-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);}
.vp-problem-card{flex:1 1 200px;background:var(--parchment);padding:24px 22px;}
.vp-problem-card .pc-icon{font-size:22px;margin-bottom:12px;}
.vp-problem-card .pc-text{font-size:14px;color:var(--slate);line-height:1.55;}
.vp-problem-card .pc-text strong{color:var(--ink);display:block;margin-bottom:4px;font-size:15px;}

/* DISCIPLINE STEPS (dark section, dimension-style list) */
.vp-dims{display:flex;flex-direction:column;gap:0;}
.vp-dim{display:flex;align-items:flex-start;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-dark);}
.vp-dim:first-child{border-top:1px solid var(--line-dark);}
.vp-dim .dn{font-family:var(--mono);font-size:11px;color:var(--brass-bright);width:24px;flex-shrink:0;margin-top:2px;}
.vp-dim .dt{flex:1;}
.vp-dim .dt strong{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--parchment);display:block;margin-bottom:4px;}
.vp-dim .dt span{font-size:13.5px;color:var(--slate-light);line-height:1.55;}

/* COMPARISON TABLE (GEO-friendly) */
.vp-compare{width:100%;border-collapse:collapse;background:var(--parchment);border:1px solid var(--line);}
.vp-compare th,.vp-compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;}
.vp-compare thead th{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate-light);background:var(--parchment-dim);}
.vp-compare tbody th{font-family:var(--sans);font-weight:600;color:var(--ink);white-space:nowrap;}
.vp-compare td{color:var(--slate);}
.vp-compare td.hi{color:var(--ink);font-weight:500;}
.vp-compare tbody tr:last-child th,.vp-compare tbody tr:last-child td{border-bottom:none;}
.vp-compare-wrap{overflow-x:auto;}

/* TRACKS */
.vp-tracks{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);}
.vp-track-card{flex:1 1 260px;background:var(--parchment);padding:26px 24px;}
.vp-track-card .tk-label{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass);margin-bottom:10px;display:block;}
.vp-track-card h3{font-family:var(--serif);font-weight:600;font-size:17px;margin:0 0 8px;}
.vp-track-card p{font-size:13.5px;color:var(--slate);line-height:1.6;margin:0 0 14px;}
.vp-track-card a.tk-link{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--brass);}

/* KEY TERM DEFINITION (GEO) */
.vp-terms{margin-top:48px;border-top:1px solid var(--line-dark);padding-top:32px;}
.vp-terms-label{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-light);margin-bottom:16px;display:block;}
.vp-terms-grid{display:flex;flex-wrap:wrap;gap:28px;}
.vp-term{flex:1 1 260px;min-width:220px;}
.vp-term dt{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--parchment);margin-bottom:6px;}
.vp-term dd{font-family:var(--sans);font-size:13.5px;color:var(--slate-light);line-height:1.65;margin:0;}

/* FAQ */
.vp-faq{max-width:760px;}
.vp-faq-item{border-bottom:1px solid var(--line-dark);padding:22px 0;}
.vp-faq-item:first-child{border-top:1px solid var(--line-dark);}
.vp-faq-item h3{font-family:var(--serif);font-weight:600;font-size:16.5px;color:var(--ink);margin:0 0 8px;}
.vp-faq-item p{font-size:14px;color:var(--slate);line-height:1.65;margin:0;}

/* BOTTOM CTA */
.vp-bottom-cta{background:var(--ink);color:var(--parchment);padding:64px 0;}
.vp-bottom-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.vp-bottom-cta h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,34px);margin:0 0 10px;max-width:520px;}
.vp-bottom-cta p{font-size:15px;color:var(--slate-light);margin:0;max-width:480px;}
.vp-btn-buy{display:inline-block;text-align:center;background:var(--brass-bright);color:var(--ink);font-family:var(--sans);font-weight:700;font-size:15px;padding:16px 32px;border-radius:2px;}
.vp-btn-back{display:inline-block;border:1px solid var(--line-dark);color:var(--slate-light);font-family:var(--sans);font-weight:500;font-size:13px;padding:10px 20px;border-radius:2px;margin-left:12px;}
.vp-mini-btn{border:1px solid var(--brass-bright);color:var(--brass-bright);font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 18px;border-radius:2px;white-space:nowrap;display:inline-block;}

.vl-wrap{max-width:860px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.vl-wrap{padding:0 20px;}}
.vl-footer-nav{background:var(--ink);padding:32px 0;}
.vl-footer-nav .vl-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.vl-footer-nav p{font-family:var(--mono);font-size:11px;color:var(--slate-light);margin:0;}
.vl-footer-nav .vl-links{display:flex;gap:24px;flex-wrap:wrap;}
.vl-footer-nav .vl-links a{font-family:var(--mono);font-size:11px;color:var(--slate-light);letter-spacing:0.04em;}
.vl-footer-nav .vl-links a:hover{color:var(--brass-bright);text-decoration:none;}
::selection{background:var(--brass);color:var(--ink);}

/* -- HEADING COLOUR FIX (Payhip dark-background override) -------
   Payhip's template applies its own color rule directly to real
   h1-h6 tags with higher specificity than a plain class selector,
   so an unscoped rule (e.g. ".vp-bottom-cta h2{color:...}") gets
   silently overridden even though it's present in this stylesheet.
   Any heading sitting on a dark-background block must be re-forced
   with a rule scoped to the #vp-root wrapper ID and marked
   !important, or Payhip's own heading color wins. If a heading here
   ever gains a nested <a>, add explicit a / a:visited / a:hover
   selectors too, since color does not reliably cascade through an
   anchor tag in this context. Headings on light backgrounds are
   unaffected because Payhip's default heading color already matches
   what's needed there, so no fix is applied to those. */
#vp-root .vp-hero .vp-h1{
  color: var(--parchment) !important;
}
#vp-root .vp-section.dark .vp-h2{
  color: var(--parchment) !important;
}
#vp-root .vp-bottom-cta h2{
  color: var(--parchment) !important;
}