/* Vicki Lee Vocal Studio — shared stylesheet for lesson pages. Design tokens and components mirror the existing site. */

@font-face{font-family:'Fraunces FB';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('Tinos');size-adjust:120.2%;ascent-override:81.4%;descent-override:21.2%;line-gap-override:0%}@font-face{font-family:'Fraunces FB2';src:local('DejaVu Serif'),local('Noto Serif');size-adjust:94.1%;ascent-override:103.9%;descent-override:27.1%;line-gap-override:0%}@font-face{font-family:'Inter FB';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo'),local('Helvetica');size-adjust:108.9%;ascent-override:89%;descent-override:22.2%;line-gap-override:0%}@font-face{font-family:'Inter FB2';src:local('DejaVu Sans'),local('Roboto'),local('Noto Sans');size-adjust:93.6%;ascent-override:103.5%;descent-override:25.8%;line-gap-override:0%}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/fraunces-v38-latin-300.woff2') format('woff2');}@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fraunces-v38-latin-regular.woff2') format('woff2');}@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/fraunces-v38-latin-500.woff2') format('woff2');}@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/fraunces-v38-latin-600.woff2') format('woff2');}@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/fraunces-v38-latin-500italic.woff2') format('woff2');}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-v20-latin-regular.woff2') format('woff2');}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-v20-latin-500.woff2') format('woff2');}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-v20-latin-600.woff2') format('woff2');}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-v20-latin-700.woff2') format('woff2');}

  :root{
    --bg: #0F0C09;
    --bg-panel: #17120C;
    --bg-panel-2: #1D170F;
    --gold: #E3A13D;
    --gold-soft: #F0C378;
    --rust: #C05B3B;
    --cream: #F3ECDE;
    --muted: #A99C87;
    --muted-dim: #958877;
    --line: rgba(243,236,222,0.12);
    --line-strong: rgba(243,236,222,0.22);
    --display: 'Fraunces','Fraunces FB','Fraunces FB2', serif;
    --body: 'Inter','Inter FB','Inter FB2', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 3px;
    --wrap: 1180px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--cream);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,h4{ font-family: var(--display); font-weight: 600; margin:0; color: var(--cream); }
  p{ margin:0; }
  .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 32px; width: 100%; }
  section{ position: relative; }
  ::selection{ background: var(--gold); color: #1a1206; }

  :focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  .grain{
    position: fixed; inset:0; pointer-events:none; z-index: 2; opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- Top Utility Bar ---------- */
  .util-bar{ background: #0A0805; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .util-bar .wrap{ display:flex; justify-content: space-between; align-items:center; height:40px; }
  .util-bar a{ color: var(--muted); transition: color .15s ease; }
  .util-bar a:hover{ color: var(--gold-soft); }
  .util-bar .util-links{ display:flex; gap:22px; }
  .util-bar .util-links span{ display:inline-flex; align-items:center; gap:7px; }
  .util-bar svg{ width:13px; height:13px; flex:none; }
  .util-bar .social{ display:flex; gap:14px; }
  .util-bar .social svg{ width:15px; height:15px; opacity:.75; transition:opacity .15s ease; }
  .util-bar .social a:hover svg{ opacity:1; }

  /* ---------- Header Navigation ---------- */
  header{ position: sticky; top:0; z-index: 40; border-bottom: 1px solid var(--line); }
  header::before{
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(15,12,9,0.88); backdrop-filter: blur(10px);
  }
  .nav-row{ display:flex; align-items:center; justify-content: space-between; height: 76px; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{ width:34px; height:34px; flex:none; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.15; }
  .brand-text strong{ font-family: var(--display); font-size: 19px; font-weight:600; letter-spacing:.2px; }
  .brand-text span{ font-size: 11.5px; color: var(--muted); }

  nav.primary-nav ul{ display:flex; align-items:center; gap: 6px; }
  .has-dropdown{ position: relative; }
  
  nav.primary-nav .nav-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size: 14.5px; color: var(--muted); position:relative; padding: 10px 12px;
    background:none; border:none; font-family: var(--body); cursor:pointer;
    border-radius: var(--radius); transition: color .15s ease;
  }
  nav.primary-nav .nav-link:hover, nav.primary-nav .has-dropdown:hover .nav-link { color: var(--cream); }
  .nav-icon{ width: 16px; height: 16px; stroke: var(--gold); opacity: 0.9; flex-shrink: 0; }
  .nav-caret{ width: 12px; height: 12px; transition: transform 0.2s ease; opacity: 0.7; }
  .has-dropdown:hover .nav-caret{ transform: rotate(180deg); }

  /* Mobile Toggle */
  .mobile-toggle { display: none; background: none; border: none; color: var(--cream); cursor: pointer; padding: 8px; }
  .mobile-toggle svg { width: 24px; height: 24px; }

  /* Dropdown Panels */
  .dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
  }
  .has-dropdown:hover .dropdown-panel,
  .has-dropdown.is-open .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .dropdown-panel--mega { width: 500px; left: -80px; }
  .dropdown-panel--list { width: 280px; }

  .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mega-link, .list-link {
    display: flex; gap: 12px; padding: 10px; border-radius: 4px;
    text-decoration: none; color: var(--cream); transition: background 0.2s ease;
    align-items: flex-start;
  }
  .mega-link:hover, .list-link:hover { background: rgba(227, 161, 61, 0.12); }
  .menu-icon-box {
    width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(227, 161, 61, 0.12); border-radius: 4px; border: 1px solid rgba(227, 161, 61, 0.25);
  }
  .menu-icon-box svg { width: 15px; height: 15px; stroke: var(--gold); }
  .mega-link strong, .list-link strong { display: block; font-size: 0.9rem; color: var(--cream); line-height: 1.2; }
  .mega-link span span, .list-link span span { font-size: 0.75rem; color: var(--muted); display: block; margin-top: 3px; }
  
  .panel-foot {
    border-top: 1px solid var(--line);
    margin-top: 10px; padding-top: 10px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; color: var(--muted);
  }
  .panel-foot a { color: var(--gold-soft); font-weight: bold; }

  /* ---------- Page hero ---------- */
  .page-hero{
    padding: 96px 0 80px; overflow: hidden;
    background:
      radial-gradient(ellipse 900px 500px at 82% -10%, rgba(227,161,61,0.14), transparent 60%),
      radial-gradient(ellipse 700px 500px at -10% 30%, rgba(192,91,59,0.10), transparent 60%);
  }
  .eyebrow{ display:inline-flex; align-items:center; gap:10px; color: var(--gold-soft); font-size: 14px; letter-spacing: .2px; margin-bottom: 22px; }
  .eyebrow::before{ content:''; width:26px; height:1px; background: var(--gold); }
  .page-hero-grid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items:center; }
  .page-hero h1{ font-size: clamp(38px, 4.6vw, 58px); line-height: 1.08; max-width: 680px; }
  .page-hero .lede{ margin-top: 22px; max-width: 560px; color: var(--muted); font-size: 17px; }
  .hero-actions{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }
  .hero-facts{ display:flex; flex-direction:column; gap: 22px; padding: 28px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
  .hero-facts .fact{ display:flex; gap: 16px; align-items:flex-start; }
  .hero-facts .fact svg{ width:20px; height:20px; color: var(--gold); flex:none; margin-top:2px; }
  .hero-facts .fact strong{ display:block; font-size: 14.5px; color: var(--cream); margin-bottom: 3px; }
  .hero-facts .fact span{ font-size: 13.5px; color: var(--muted); }

  .btn{ display:inline-flex; align-items:center; gap:10px; padding: 15px 28px; border-radius: var(--radius); font-size: 15px; font-weight:600; cursor:pointer; border:1px solid transparent; transition: all .2s ease; }
  .btn-primary{ background: var(--gold); color:#1B1206; }
  .btn-primary:hover{ background: var(--gold-soft); transform: translateY(-1px); }
  .btn-line{ border-color: var(--line-strong); color: var(--cream); background:transparent; }
  .btn-line:hover{ border-color: var(--gold); color: var(--gold-soft); }

  /* ---------- Section shell ---------- */
  .section{ padding: 100px 0; }
  .section-alt{ background: var(--bg-panel); }
  .section-alt + .section-alt{ padding-top: 0; }
  .section-head{ max-width: 640px; margin-bottom: 52px; }
  .section-head .eyebrow{ margin-bottom: 16px; }
  .section-head h2{ font-size: clamp(30px, 3.4vw, 42px); line-height:1.15; }
  .section-head p{ margin-top: 16px; color: var(--muted); font-size: 16.5px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-head.center .eyebrow::before{ display:none; }

  /* ---------- Benefit list (alternating rows) ---------- */
  .benefit-rows{ display:flex; flex-direction:column; }
  .benefit-row{
    display:grid; grid-template-columns: 90px 1fr; gap: 32px; padding: 38px 0; border-top: 1px solid var(--line);
    align-items: start; transition: padding-left .25s ease, border-color .25s ease;
  }
  .benefit-rows .benefit-row:last-child{ border-bottom: 1px solid var(--line); }
  .benefit-row:hover{ padding-left: 14px; border-top-color: var(--line-strong); }
  .benefit-row .mark{ font-family: var(--display); font-size: 40px; font-weight: 300; color: var(--gold-soft); line-height: 1; transition: color .25s ease; }
  .benefit-row:hover .mark{ color: var(--gold); }
  .benefit-row h3{ font-size: 21px; margin-bottom: 10px; }
  .benefit-row p{ color: var(--muted); font-size: 15.5px; max-width: 620px; }

  /* ---------- Mind/body split ---------- */
  .split-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .split-card{ background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; transition: border-color .2s ease, transform .2s ease; }
  .split-card:hover{ border-color: var(--gold); transform: translateY(-4px); }
  .split-card .icon{ width: 34px; height:34px; color: var(--gold); margin-bottom: 20px; }
  .split-card h3{ font-size: 22px; margin-bottom: 14px; }
  .split-card ul{ display:flex; flex-direction:column; gap: 13px; }
  .split-card li{ display:flex; gap:10px; font-size: 14.5px; color: var(--cream); align-items:flex-start; }
  .split-card li svg{ width:16px; height:16px; flex:none; margin-top:3px; color: var(--gold); }

  /* ---------- From benefit to habit (steps) ---------- */
  .steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .step{ background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: border-color .2s ease, transform .2s ease; }
  .step:hover{ border-color: var(--line-strong); transform: translateY(-3px); }
  .step .num{ font-family: var(--display); font-size: 34px; color: var(--gold-soft); font-weight: 300; margin-bottom: 18px; display:block; }
  .step h3{ font-size: 17px; margin-bottom: 10px; }
  .step p{ color: var(--muted); font-size: 14.5px; }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
  .faq-item{ border-bottom: 1px solid var(--line); }
  .faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding: 24px 4px; font-family: var(--display); font-size: 18px; font-weight:500; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .plus{ width:20px; height:20px; position:relative; flex:none; }
  .faq-item summary .plus::before, .faq-item summary .plus::after{ content:''; position:absolute; background: var(--gold); top:50%; left:50%; transform: translate(-50%,-50%); }
  .faq-item summary .plus::before{ width:14px; height:2px; }
  .faq-item summary .plus::after{ width:2px; height:14px; transition: transform .2s ease; }
  .faq-item[open] summary .plus::after{ transform: translate(-50%,-50%) rotate(90deg) scale(0); }
  .faq-item p{ padding: 0 4px 26px; color: var(--muted); font-size: 15px; max-width: 620px; }

  /* ---------- Footer ---------- */
  footer{ background: #0A0805; border-top:1px solid var(--line); padding: 50px 0 32px; margin-top: auto; }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
  .footer-brand p { font-size: 0.85rem; color: var(--muted); margin-top: 12px; }
  .footer-col h2 { font-size: 0.9rem; color: var(--cream); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
  .footer-col li { margin-bottom: 8px; }
  .footer-col a { color: var(--muted); font-size: 0.85rem; transition: color 0.2s ease; }
  .footer-col a:hover { color: var(--gold-soft); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size: 13px; color: var(--muted-dim); border-top: 1px solid var(--line); padding-top: 24px; }

  /* Mobile Responsive Styles */
  @media (max-width: 900px){
    .mobile-toggle { display: block; }
    nav.primary-nav {
      position: absolute; top: 76px; left: 0; right: 0;
      background: var(--bg-panel); border-bottom: 1px solid var(--line-strong);
      padding: 16px 24px; display: none;
    }
    nav.primary-nav.is-active { display: block; }
    nav.primary-nav ul { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dropdown-panel { position: static; width: 100% !important; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; background: rgba(0,0,0,0.2); }
    .has-dropdown.is-open .dropdown-panel { display: block; }
    .mega-grid { grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  }

  @media (max-width: 980px){
    .page-hero-grid{ grid-template-columns: 1fr; }
    .split-grid{ grid-template-columns: 1fr; }
    .steps{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 760px){
    .section{ padding: 72px 0; }
    .page-hero{ padding: 96px 0 64px; }
    .benefit-row{ grid-template-columns: 56px 1fr; gap: 18px; padding: 28px 0; }
    .benefit-row .mark{ font-size: 30px; }
    .steps{ grid-template-columns: 1fr; }
  }
.site-credit{white-space:nowrap}.site-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}.site-credit a:hover{color:var(--gold-soft,var(--gold-light))}

  .footer-brand .footer-nap{ margin-top: 14px; line-height: 1.7; }
  .footer-brand .footer-nap a{ color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   Landing-page components (search-targeted lesson pages)
   ========================================================= */

/* ---------- Long-form copy + sidebar ---------- */
.prose-grid{ display:grid; grid-template-columns: 1.35fr 0.65fr; gap: 64px; align-items:start; }
.prose h2{ font-size: clamp(28px, 3vw, 38px); line-height: 1.15; margin-bottom: 20px; }
.prose h3{ font-size: 21px; margin: 34px 0 12px; }
.prose p{ color: var(--muted); font-size: 16.5px; margin-bottom: 18px; max-width: 680px; }
.prose p strong{ color: var(--cream); font-weight: 600; }
.prose a{ color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover{ color: var(--gold); }
.prose .check-list{ display:flex; flex-direction:column; gap: 12px; margin: 6px 0 22px; }
.prose .check-list li{ display:flex; gap: 12px; font-size: 15.5px; color: var(--cream); align-items:flex-start; }
.prose .check-list li svg{ width:16px; height:16px; flex:none; margin-top:4px; color: var(--gold); }

.aside-card{ position: sticky; top: 104px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.aside-card h3{ font-size: 20px; margin-bottom: 18px; }
.aside-card dl{ margin: 0; display:flex; flex-direction:column; gap: 16px; }
.aside-card dt{ font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 3px; }
.aside-card dd{ margin: 0; font-size: 15px; color: var(--cream); }
.aside-card dd a{ text-decoration: underline; text-underline-offset: 3px; }
.aside-card .btn{ width: 100%; justify-content: center; margin-top: 26px; }
.aside-card .btn + .btn{ margin-top: 12px; }

/* ---------- Pull quote ---------- */
.pull-quote{ border-left: 2px solid var(--gold); padding: 6px 0 6px 26px; margin: 34px 0; max-width: 640px; }
.pull-quote p{ font-family: var(--display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--cream); margin: 0; }
.pull-quote cite{ display:block; margin-top: 12px; font-style: normal; font-size: 13.5px; color: var(--muted); }

/* ---------- Related lessons ---------- */
.related-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.related-card{ display:flex; flex-direction:column; gap: 10px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: border-color .2s ease, transform .2s ease; }
.related-card:hover{ border-color: var(--gold); transform: translateY(-4px); }
.related-card .label{ font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-soft); }
.related-card h3{ font-size: 19px; }
.related-card p{ color: var(--muted); font-size: 14.5px; }
.related-card .more{ margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--gold-soft); }

/* ---------- Closing CTA banner ---------- */
.cta-banner{
  background: linear-gradient(120deg, #C05B3B, #A8461F 60%, #8C3818);
  border-radius: var(--radius); padding: 56px; display:flex; align-items:center; justify-content:space-between; gap: 40px; flex-wrap: wrap;
}
.cta-banner h2{ color:#1B0F08; font-size: clamp(24px, 2.6vw, 32px); max-width: 520px; }
.cta-banner p{ color: rgba(27,15,8,0.78); margin-top: 12px; max-width: 460px; font-size: 15px; }
.cta-banner .cta-actions{ display:flex; gap: 14px; flex-wrap: wrap; }
.btn-dark{ background:#1B0F08; color: var(--gold-soft); }
.btn-dark:hover{ background:#2A170D; transform: translateY(-1px); }
.btn-ghost-dark{ border-color: rgba(27,15,8,0.45); color:#1B0F08; background: transparent; }
.btn-ghost-dark:hover{ border-color:#1B0F08; background: rgba(27,15,8,0.08); }
.section-cta{ padding: 0 0 100px; }
.section-alt + .section-cta, .section-cta.after-alt{ padding-top: 100px; }

/* ---------- Footer social ---------- */
.footer-bottom .social{ display:flex; gap:16px; }
.footer-bottom .social svg{ width:16px; height:16px; }
.footer-bottom .social a:hover{ color: var(--gold-soft); }

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible{ opacity: 1; transform: none; }

@media (max-width: 980px){
  .prose-grid{ grid-template-columns: 1fr; gap: 44px; }
  .aside-card{ position: static; }
  .related-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .related-grid{ grid-template-columns: 1fr; }
  .cta-banner{ flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .section-cta{ padding-bottom: 72px; }
  .section-alt + .section-cta, .section-cta.after-alt{ padding-top: 72px; }
  .pull-quote p{ font-size: 19px; }
}

/* ---------- Footer: five columns with "Lessons for" ---------- */
.footer-grid{ grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1080px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card{ position: relative; display:flex; flex-direction:column; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 32px 32px; transition: border-color .2s ease, transform .2s ease; }
.price-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.price-card.is-featured{ border-color: var(--gold); background: linear-gradient(180deg, rgba(227,161,61,0.10), rgba(227,161,61,0) 55%), var(--bg-panel-2); }
.price-card .badge{ position:absolute; top: -12px; left: 32px; background: var(--gold); color:#1B1206; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.price-card .tier{ font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; }
.price-card h3{ font-size: 23px; margin-bottom: 18px; }
.price-card .amount{ display:flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 500; font-size: 54px; line-height: 1; color: var(--cream); }
.price-card .amount small{ font-family: var(--body); font-size: 15px; color: var(--muted); font-weight: 400; }
.price-card .per{ margin-top: 10px; font-size: 14.5px; color: var(--gold-soft); }
.price-card .save{ display:inline-block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.price-card p.desc{ margin-top: 18px; color: var(--muted); font-size: 14.5px; }
.price-card ul{ display:flex; flex-direction:column; gap: 11px; margin: 22px 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.price-card li{ display:flex; gap: 10px; font-size: 14.5px; color: var(--cream); align-items:flex-start; }
.price-card li svg{ width:15px; height:15px; flex:none; margin-top:3px; color: var(--gold); }
.price-card .btn{ margin-top: auto; justify-content: center; }
.price-note{ margin-top: 26px; font-size: 14px; color: var(--muted); max-width: 760px; }
.price-note strong{ color: var(--cream); }

.table-wrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel-2); }
.price-table{ width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; }
.price-table caption{ text-align: left; padding: 0 0 14px; color: var(--muted); font-size: 14px; caption-side: bottom; }
.price-table th, .price-table td{ padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table thead th{ font-family: var(--body); font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-dim); font-weight: 600; background: rgba(0,0,0,0.18); }
.price-table tbody th{ font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--cream); }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td{ border-bottom: 0; }
.price-table td strong{ color: var(--cream); font-weight: 600; }
.price-table td span{ display:block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.price-table tbody tr{ transition: background .2s ease; }
.price-table tbody tr:hover{ background: rgba(227,161,61,0.05); }

.addon-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.addon-card{ background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; gap: 10px; }
.addon-card .icon{ width: 28px; height: 28px; color: var(--gold); margin-bottom: 6px; }
.addon-card h3{ font-size: 19px; }
.addon-card .addon-price{ font-family: var(--display); font-size: 30px; color: var(--gold-soft); font-weight: 500; line-height: 1.1; }
.addon-card p{ color: var(--muted); font-size: 14.5px; }
.addon-card a{ color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

.policy-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.policy-list li{ display:flex; gap: 14px; align-items:flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.policy-list li svg{ width: 18px; height: 18px; flex:none; margin-top: 3px; color: var(--gold); }
.policy-list strong{ display:block; font-size: 15.5px; color: var(--cream); margin-bottom: 4px; }
.policy-list span{ font-size: 14.5px; color: var(--muted); }
.policy-list a{ color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px){
  .price-grid{ grid-template-columns: 1fr; max-width: 520px; }
  .addon-grid{ grid-template-columns: 1fr; max-width: 520px; }
  .policy-list{ grid-template-columns: 1fr; }
}
.section-head p a, .faq-item p a{ color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.section-head p a:hover, .faq-item p a:hover{ color: var(--gold); }

/* ---------- Articles (Tips & Advice guides) ---------- */
.article-meta{ display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top: 26px; font-size: 14px; color: var(--muted); }
.article-meta span{ display:inline-flex; align-items:center; gap: 8px; }
.article-meta svg{ width:15px; height:15px; color: var(--gold); }
.article-body section{ scroll-margin-top: 110px; padding-top: 6px; }
.article-body section + section{ margin-top: 30px; }
.article-body h2{ font-size: clamp(25px, 2.6vw, 32px); margin-bottom: 16px; }
.article-body .check-list{ margin-top: 2px; }
.article-body ol.step-list{ list-style: none; padding-left: 0; counter-reset: step; display:flex; flex-direction:column; gap: 12px; margin: 6px 0 22px; max-width: 680px; }
.article-body ol.step-list li{ counter-increment: step; position: relative; padding-left: 44px; font-size: 15.5px; color: var(--cream); }
.article-body ol.step-list li::before{ content: counter(step, decimal-leading-zero); position:absolute; left:0; top:1px; font-family: var(--display); font-size: 15px; color: var(--gold); }
.article-body ol.step-list li strong{ color: var(--gold-soft); font-weight: 600; }
.tip-box{ margin: 8px 0 26px; max-width: 680px; padding: 24px 26px; border-radius: var(--radius); background: rgba(227,161,61,0.07); border: 1px solid rgba(227,161,61,0.28); }
.tip-box h3{ margin: 0 0 8px !important; font-size: 17px !important; color: var(--gold-soft); display:flex; align-items:center; gap: 10px; }
.tip-box h3 svg{ width: 18px; height: 18px; }
.tip-box p{ margin: 0 !important; color: var(--cream) !important; font-size: 15.5px !important; }

.toc{ list-style: none; display:flex; flex-direction:column; gap: 2px; margin: 0 0 6px; padding: 0; counter-reset: toc; }
.toc li a{ display:flex; gap: 12px; padding: 9px 0; font-size: 14.5px; color: var(--muted); border-bottom: 1px solid var(--line); transition: color .2s ease; }
.toc li:last-child a{ border-bottom: 0; }
.toc li a::before{ counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--display); color: var(--gold); font-size: 13px; padding-top: 1px; }
.toc li a:hover{ color: var(--cream); }

.mistake-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mistake-card{ background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.mistake-card .x{ display:inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items:center; justify-content:center; background: rgba(192,91,59,0.16); color: #E07A57; margin-bottom: 14px; }
.mistake-card .x svg{ width: 14px; height: 14px; }
.mistake-card h3{ font-size: 17px; margin-bottom: 8px; }
.mistake-card p{ font-size: 14.5px; color: var(--muted); }

.guide-links{ display:flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
.guide-link{ display:inline-flex; align-items:center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--gold-soft); }
.guide-link:hover{ color: var(--gold); }

@media (max-width: 1080px){ .mistake-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mistake-grid{ grid-template-columns: 1fr; } }
.page-hero .narrow{ max-width: 820px; }
.aside-card .aside-sub{ margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.aside-card .aside-sub p{ font-size: 14.5px; color: var(--muted); margin-bottom: 4px; }

/* ---------- Bottom CTA (matches Lesson Formats) ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center; max-width:880px; margin:0 auto; padding:64px 56px; border:1px solid var(--line-strong, rgba(243,236,222,0.22)); border-radius:var(--radius); background: radial-gradient(ellipse 520px 220px at 50% 0%, rgba(227,161,61,0.14), transparent 70%), var(--bg-panel-2, #1D170F); }
.cta-band .cta-eyebrow{ display:block; color:var(--gold-soft); font-size:14px; letter-spacing:.2px; margin-bottom:16px; }
.cta-band h2, .cta-band h3{ font-size:clamp(28px,3vw,40px); line-height:1.15; max-width:680px; margin:0 auto; text-wrap:balance; }
.cta-band p{ max-width:540px; margin:16px auto 0; color:var(--muted); font-size:16.5px; text-wrap:pretty; }
.cta-band .cta-actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:32px; }
@media (max-width:760px){ .cta-band{ padding:44px 24px; } .cta-band .cta-actions .btn{ width:100%; justify-content:center; } }