/* ==========================================================================
   TheJewelryLux V2 — Complete Design System
   Rebuilt from .dc.html handoff screens (2026-07-17)
   ========================================================================== */

/* ---- Design Tokens ---- */
:root {
  --ink:            oklch(0.24 0.02 75);
  --body:           oklch(0.38 0.015 75);
  --body-light:     oklch(0.5 0.015 75);
  --faint:          oklch(0.58 0.015 75);
  --faint2:         oklch(0.6 0.015 75);
  --meta:           oklch(0.55 0.015 75);
  --base:           oklch(0.965 0.008 80);
  --ivory:          oklch(0.995 0.004 80);
  --stage:          oklch(0.985 0.006 80);
  --panel:          oklch(0.945 0.008 75);
  --hairline:       oklch(0.88 0.01 75);
  --focus:          oklch(0.53 0.1 55);
  --focus-tint:     oklch(0.94 0.035 55);
  --calm:           oklch(0.5 0.07 165);
  --calm-tint:      oklch(0.94 0.028 165);

  --font-serif:     'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:      'Public Sans', Inter, system-ui, sans-serif;

  --radius-pill:    999px;
  --radius-card:    12px;
  --radius-frame:   20px;
  --radius-sm:      8px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--focus)}
body{
  font-family:var(--font-sans);
  font-size:14px;line-height:1.6;
  color:var(--body);background:var(--base);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:oklch(0.85 0.05 55);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:10000;
  background:oklch(0.995 0.004 80 / 0.96);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  max-width:1320px;margin-inline:auto;padding-inline:32px;
  display:flex;align-items:center;justify-content:space-between;
  height:86px;
}
.header-left{display:flex;align-items:center;gap:82px}
.header-logo{
  display:flex;align-items:center;gap:0;
  font-family:var(--font-serif);font-weight:500;font-size:19px;
  color:var(--ink);letter-spacing:0.01em;text-decoration:none;
}
.header-logo img{height:62px;width:auto}
.header-logo:hover{color:var(--ink);opacity:.82;transition:opacity .3s ease}
.header-nav{display:flex;align-items:center;gap:34px}
.header-nav a{
  font-size:14.5px;font-weight:500;color:var(--body);text-decoration:none;
  padding:7px 13px;border-radius:8px;
  transition:background .16s ease,color .16s ease;
}
.header-nav a:hover{color:var(--ink);background:var(--stage)}
.header-nav a.active{color:var(--ink);font-weight:550;border-bottom:2px solid var(--focus);border-radius:0;background:transparent;padding-bottom:3px}
.header-actions{display:flex;align-items:center;gap:18px}
.btn-search{
  display:flex;align-items:center;gap:8px;background:none;
  border:1px solid var(--hairline);border-radius:var(--radius-pill);
  padding:9px 16px;cursor:pointer;font-size:13px;color:var(--meta);
  min-height:38px;transition:border-color .16s ease,color .16s ease;
}
.btn-search:hover{border-color:var(--focus);color:var(--ink)}
.btn-search svg{width:14px;height:14px;flex-shrink:0}
.btn-cta{
  font-size:12.5px;font-weight:500;color:var(--ink);
  background:transparent;border:1.5px solid var(--hairline);border-radius:var(--radius-pill);
  padding:10px 18px;cursor:pointer;min-height:40px;
  transition:border-color .16s ease,color .16s ease;white-space:nowrap;
  letter-spacing:0.01em;
}
.btn-cta:hover{color:var(--focus);border-color:var(--focus);opacity:1}
.mobile-menu-btn{
  display:none;background:none;border:none;cursor:pointer;padding:10px;
  color:var(--ink);min-width:44px;min-height:44px;align-items:center;justify-content:center;
}
.mobile-menu-btn svg{width:22px;height:22px}
.desktop-only{display:block}
@media(max-width:899px){.desktop-only{display:none}}
.mobile-only{display:none}
@media(max-width:899px){.mobile-only{display:block}}

@media(max-width:899px){
  .header-inner{height:72px;padding-inline:20px}
  .header-left{gap:24px}
  .header-logo img{height:42px;width:auto}
  .header-nav{display:none}
  .header-actions{gap:6px}
  .header-actions .btn-search span{display:none}
  .header-actions .btn-cta{display:none}
  .mobile-menu-btn{display:flex}
  .header-nav.open{
    display:flex;flex-direction:column;position:fixed;top:72px;left:0;right:0;bottom:0;
    background:var(--ivory);padding:32px;gap:0;z-index:9999;
    overflow-y:auto;border-top:1px solid var(--hairline);
  }
  .header-nav.open a{
    display:block;font-size:17px;font-weight:500;color:var(--ink);
    padding:16px 0;text-decoration:none;border-bottom:1px solid var(--hairline);
    text-align:left;transition:color .16s ease;
  }
  .header-nav.open a:hover{color:var(--focus);background:transparent}
  .header-nav.open .mobile-separator{height:1px;background:var(--hairline);margin:24px 0}
  .header-nav.open .mobile-cta{
    display:block;text-align:center;font-size:14.5px;font-weight:600;
    color:var(--ivory);background:var(--ink);border:none;border-radius:var(--radius-pill);
    padding:15px 28px;cursor:pointer;min-height:48px;width:100%;
    text-decoration:none;margin-top:8px;transition:opacity .16s ease;
  }
  .header-nav.open .mobile-cta:hover{opacity:.88}

  body.menu-open{overflow:hidden}
}

/* ---- Footer ---- */
.site-footer{
  background:var(--ink);color:var(--ivory);
  padding:120px 48px 64px;margin-top:160px;
  position:relative;
}
.site-footer::before{
  content:'';display:block;position:absolute;top:0;left:48px;right:48px;
  height:1px;background:oklch(0.35 0.02 75);
}
.footer-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:72px;
}
.footer-grid h4{
  font-size:11px;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:oklch(0.62 0.02 75);margin-bottom:22px;
}
.footer-grid a{
  display:block;font-size:13.5px;color:oklch(0.68 0.02 75);
  text-decoration:none;padding:5px 0;transition:color .3s ease;
}
.footer-grid a:hover{color:var(--ivory)}
.footer-logo-img{height:auto;max-width:320px;margin-bottom:20px}
.footer-bottom{
  max-width:1200px;margin:56px auto 0;padding-top:32px;
  border-top:1px solid oklch(0.32 0.02 75);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;color:oklch(0.48 0.02 75);letter-spacing:0.02em;
}
@media(max-width:899px){
  .site-footer{padding:80px 24px 48px;margin-top:100px}
  .site-footer::before{left:24px;right:24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer-logo-img{max-width:220px}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center;margin-top:40px}
}

/* ---- Breadcrumb ---- */
.breadcrumb{
  max-width:1080px;margin:0 auto;padding:32px 40px 0;
  font-size:11.5px;color:var(--faint2);letter-spacing:0.02em;
}
.breadcrumb a{color:var(--faint2);text-decoration:none;transition:color .2s ease}
.breadcrumb a:hover{color:var(--focus)}
.breadcrumb .sep{margin:0 8px;color:var(--hairline)}
.breadcrumb .current{color:var(--meta)}

/* ---- Page Shell ---- */
.page-container{max-width:1080px;margin:0 auto;padding:0 40px}
.section-label{
  font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;
}
.section-kicker{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;margin-top:32px;
}
.section-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--focus);flex-shrink:0}
.section-kicker .label{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta);font-weight:600}

/* ---- Decision Page Hero ---- */
.decision-hero{
  max-width:1080px;margin:0 auto;padding:40px 40px 0;
  display:grid;grid-template-columns:1fr 260px;gap:64px;align-items:start;
}
.decision-hero h1{
  font-family:var(--font-serif);font-weight:500;font-size:44px;
  line-height:1.15;color:var(--ink);margin:0 0 20px;
  max-width:640px;letter-spacing:-0.015em;
}
.decision-hero .desc{
  font-size:15.5px;line-height:1.65;color:var(--body-light);max-width:480px;
}
.decision-hero .short-answer{
  padding:20px 0 0 28px;border-left:1px solid var(--hairline);
}
.decision-hero .short-answer .label{
  font-size:10px;font-weight:600;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px;
}
.decision-hero .short-answer .text{
  font-family:var(--font-serif);font-style:italic;font-size:15px;
  color:var(--ink);line-height:1.55;max-width:200px;
}

/* ---- Two-Column Section ---- */
.two-col{
  max-width:1080px;margin:0 auto;padding:56px 40px 0;
  display:grid;grid-template-columns:220px 1fr;gap:56px;
}
.two-col .col-label{
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding-top:6px;
}
.two-col h2{
  font-family:var(--font-serif);font-weight:500;font-size:22px;
  color:var(--ink);margin:0 0 14px;max-width:600px;line-height:1.4;
}

/* ---- Evidence Pills ---- */
.evidence-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.evidence-pill{
  display:flex;align-items:center;gap:9px;
  border:1px solid var(--hairline);border-radius:var(--radius-pill);
  padding:10px 16px;font-size:13px;color:var(--ink);
}
.evidence-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--calm);flex-shrink:0}
.evidence-note{font-size:12px;color:var(--faint2)}

/* ---- Evidence Cards (expandable) ---- */
.evidence-card-list{display:flex;flex-direction:column;gap:8px}
.evidence-card-btn{
  font-family:var(--font-sans);font-size:13px;font-weight:600;
  color:var(--ink);background:var(--panel);
  border:1px solid transparent;border-radius:var(--radius-pill);
  padding:10px 16px;min-height:40px;cursor:pointer;text-align:left;
  width:fit-content;max-width:100%;transition:all .2s ease;
}
.evidence-card-btn:hover{border-color:var(--focus)}
.evidence-card-btn[aria-expanded="true"]{background:var(--focus-tint);border-color:var(--focus)}
.evidence-reveal{
  background:var(--stage);border-radius:var(--radius-sm);
  padding:12px 14px;margin-top:4px;
}
.evidence-reveal[hidden]{display:none}
.evidence-reveal-line{
  font-size:12.5px;color:var(--body);line-height:1.55;margin-bottom:6px;
}
.evidence-reveal-line:last-child{margin-bottom:0}
.evidence-tag-calm{color:var(--calm);font-weight:600}
.evidence-tag-faint{color:var(--faint);font-weight:600}
.evidence-tag-focus{color:var(--focus);font-weight:600}

/* ---- Decision Switch ---- */
.decision-switch{
  display:flex;gap:6px;background:var(--panel);border-radius:var(--radius-pill);
  padding:4px;width:fit-content;
}
.decision-switch[hidden]{display:none}
.seg-btn{
  font-size:11.5px;font-weight:600;padding:7px 14px;min-height:36px;
  border-radius:var(--radius-pill);border:none;cursor:pointer;
  background:transparent;color:var(--faint);text-align:center;
  transition:all .25s ease;white-space:nowrap;
}
.seg-btn.active,.seg-btn[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
.seg-btn:hover:not(.active):not([aria-pressed="true"]){color:var(--ink)}

/* ---- Relevance Field ---- */
.relevance-section{
  background:var(--stage);border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);padding:100px 40px;
  display:flex;flex-direction:column;align-items:center;
  margin-top:64px;
}
.relevance-axis{position:relative;width:100%;max-width:760px;height:240px}
.axis-line{position:absolute;right:36px;top:0;bottom:0;width:2px;background:var(--hairline)}
.axis-label-v{
  position:absolute;right:12px;top:2px;font-size:9.5px;color:var(--ink);
  writing-mode:vertical-rl;letter-spacing:0.04em;
}
.relevance-chip-wrap{
  position:absolute;top:50%;transform:translateY(-50%);width:170px;
  transition:left .42s cubic-bezier(0.4,0,0.2,1);
}
.relevance-chip{
  font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--panel);border-radius:var(--radius-pill);
  padding:9px 15px;display:inline-block;margin-bottom:7px;
  border:1px solid var(--hairline);transition:all .3s ease;
}
.relevance-chip.boundary{border:1.5px solid var(--focus);background:var(--focus-tint)}
.relevance-caption{font-size:11px;color:var(--faint);line-height:1.4;transition:color .3s ease}
.relevance-caption.boundary{color:var(--focus)}

/* ---- Boundary Line ---- */
.boundary-group{transition:opacity .3s ease}
.boundary-group[hidden]{display:none}
.boundary-line-v{
  position:absolute;right:60px;top:0;bottom:0;width:2px;background:var(--ink);
}
.boundary-label-v{
  position:absolute;right:70px;top:2px;font-size:9px;color:var(--ink);
  writing-mode:vertical-rl;letter-spacing:0.04em;
}

/* ---- Narrower Question + Next Step ---- */
.narrower-box{
  background:var(--focus-tint);border-radius:var(--radius-card);
  padding:18px 22px;margin-top:20px;
}
.narrower-box .micro-label{
  font-size:10.5px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;
}
.narrower-text{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:15.5px;color:var(--ink);line-height:1.4;
}
.nextstep-box{
  background:var(--calm-tint);border-radius:var(--radius-card);
  padding:18px 22px;margin-top:12px;
}
.nextstep-box .micro-label{
  font-size:10.5px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;
}
.nextstep-text{font-size:13.5px;color:var(--ink);line-height:1.55}

/* ---- FAQ ---- */
.faq-section{padding:72px 40px 0;max-width:1080px;margin:0 auto}
.faq-list{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.faq-item{border:1px solid var(--hairline);border-radius:var(--radius-card);overflow:hidden}
.faq-q{
  width:100%;text-align:left;font-size:14px;font-weight:500;color:var(--ink);
  background:var(--stage);border:none;padding:18px 22px;min-height:52px;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  transition:background .18s ease;letter-spacing:0.01em;
}
.faq-q:hover{background:var(--panel)}
.faq-q[aria-expanded="true"]{background:var(--focus-tint);font-weight:550}
.faq-q::after{
  content:'+';font-size:20px;color:var(--faint);font-weight:300;
  transition:transform .22s ease,color .18s ease;line-height:1;
}
.faq-q:hover::after{color:var(--focus)}
.faq-q[aria-expanded="true"]::after{transform:rotate(45deg);color:var(--focus)}
.faq-a{padding:0 22px 18px;font-size:13.5px;color:var(--body);line-height:1.65}
.faq-a[hidden]{display:none}

/* ---- Decision Cards ---- */
.decision-card-link{
  display:block;text-align:left;background:var(--stage);
  border:1.5px solid var(--hairline);border-radius:var(--radius-card);
  padding:22px 26px;cursor:pointer;text-decoration:none;
  transition:border-color .2s ease;color:inherit;
}
.decision-card-link:hover,.home-card:hover{border-color:var(--focus)}
.decision-card-link .title{
  font-family:var(--font-serif);font-size:17px;font-weight:500;
  color:var(--ink);margin-bottom:4px;
}
.decision-card-link .sub{font-size:12.5px;color:var(--faint)}

/* ---- Companion / Related Decisions ---- */
.related-section{padding:64px 40px 0;max-width:1080px;margin:0 auto}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:16px}
.related-link{
  display:block;padding:14px 18px;border:1px solid var(--hairline);
  border-radius:var(--radius-card);text-decoration:none;
  transition:border-color .2s ease;
}
.related-link:hover{border-color:var(--focus)}
.related-link .rel{font-size:10.5px;color:var(--faint);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.04em}
.related-link .text{font-size:13.5px;color:var(--ink)}

/* ---- Homepage ---- */
.home-hero{
  max-width:1200px;margin:0 auto;padding:120px 40px 100px;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;
}
.home-hero h1{
  font-family:var(--font-serif);font-weight:500;font-size:56px;
  line-height:1.12;color:var(--ink);margin:0 0 26px;letter-spacing:-0.01em;
}
.home-hero .desc{font-size:17.5px;line-height:1.6;color:var(--body);max-width:460px;margin:0 0 40px}
.home-hero .actions{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.home-hero .hero-visual{
  position:relative;height:380px;background:var(--stage);
  border:1px solid var(--hairline);border-radius:var(--radius-frame);padding:32px;
}
.home-showcase{border-top:1px solid var(--hairline)}
.showcase-section{
  max-width:1200px;margin:0 auto;padding:90px 40px;
  display:grid;grid-template-columns:0.8fr 1.2fr;gap:72px;align-items:center;
}
.showcase-section .step-num{
  font-family:var(--font-serif);font-style:italic;color:var(--meta);font-size:14px;margin-bottom:10px;
}
.showcase-section h3{
  font-family:var(--font-serif);font-weight:500;font-size:26px;
  color:var(--ink);line-height:1.3;
}

/* ---- Hub Pages ---- */
.hub-hero{max-width:1080px;margin:0 auto;padding:72px 40px 0}
.hub-hero h1{
  font-family:var(--font-serif);font-weight:500;font-size:44px;
  line-height:1.15;color:var(--ink);margin:0 0 20px;max-width:680px;
}
.hub-hero .desc{font-size:15.5px;line-height:1.6;color:var(--body-light);max-width:480px}
.hub-grid{max-width:1080px;margin:0 auto;padding:48px 40px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}

/* ---- Guide Page ---- */
.guide-content{max-width:780px;margin:0 auto;padding:40px 40px 0}
.guide-content h2{
  font-family:var(--font-serif);font-weight:500;font-size:26px;
  color:var(--ink);margin:48px 0 14px;
}
.guide-content h3{font-size:18px;color:var(--ink);margin:32px 0 10px}
.guide-content p{font-size:15px;line-height:1.7;color:var(--body);margin-bottom:16px}
.guide-bridge{
  background:var(--focus-tint);border-radius:var(--radius-card);
  padding:22px 28px;margin-top:32px;
}
.guide-bridge p{font-size:14px;color:var(--ink);margin-bottom:10px}
.guide-bridge a{font-weight:600}

/* ---- Reference Cards ---- */
.ref-card{
  background:var(--stage);border:1px solid var(--hairline);
  border-radius:var(--radius-card);padding:22px 26px;
}
.ref-card .title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}
.ref-card .desc{font-size:12px;color:var(--meta)}

/* ---- Static Pages ---- */
.static-content{max-width:680px;margin:0 auto;padding:72px 40px 0}
.static-content h1{
  font-family:var(--font-serif);font-weight:500;font-size:44px;
  color:var(--ink);margin:0 0 24px;
}
.static-content p{font-size:15px;line-height:1.7;color:var(--body);margin-bottom:18px}
.static-content h2{
  font-family:var(--font-serif);font-weight:500;font-size:24px;
  color:var(--ink);margin:40px 0 14px;
}

/* ---- 404 ---- */
.error-page{text-align:center;padding:120px 40px}
.error-page h1{font-family:var(--font-serif);font-weight:500;font-size:56px;color:var(--ink);margin-bottom:16px}
.error-page p{font-size:16px;color:var(--body);margin-bottom:32px}

/* ---- Responsive ---- */
@media(max-width:899px){
  .page-container,.breadcrumb,.decision-hero,.two-col,
  .faq-section,.related-section,.hub-hero,.hub-grid,
  .guide-content,.static-content{padding-left:24px;padding-right:24px}
  .decision-hero{grid-template-columns:1fr;gap:24px;padding-top:48px}
  .decision-hero h1{font-size:32px}
  .decision-hero .short-answer{border-left:none;border-top:1px solid var(--hairline);padding-left:0;padding-top:16px}
  .two-col{grid-template-columns:1fr;gap:16px;padding-top:40px}
  .home-hero{grid-template-columns:1fr;padding:64px 24px 48px}
  .home-stats{grid-template-columns:repeat(2,1fr)!important;gap:24px!important}
  .home-hero h1{font-size:36px}
  .home-hero .desc{font-size:15px}
  .showcase-section{grid-template-columns:1fr;gap:32px;padding:48px 24px}
  .relevance-section{padding:48px 24px}
  .related-grid{grid-template-columns:1fr}
  .hub-grid{grid-template-columns:1fr}
  .hub-hero h1{font-size:32px}
  .static-content h1{font-size:32px}
  .error-page h1{font-size:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
}