/* ============================================================
   PERFORMANCE DATA: extension stylesheet
   Loaded after styles.css. styles.css is protected and never edited; this file only adds
   new classes or re-states existing selectors at equal or higher specificity, and never
   changes the custom properties in :root.
   ============================================================ */

/* ---------- reveal: visible by default, animated when JavaScript runs ---------- */
.reveal{opacity:1;transform:none;}
html.js .reveal:not(.in){opacity:0;transform:translateY(22px);}

/* ---------- header: eight items with dropdowns; collapse to the drawer below 1100px ---------- */
@media(max-width:1100px){
  .nav,.header-cta .btn{display:none;}
  .menu-toggle{display:inline-flex;}
  .header-cta{gap:0;}
}
/* 1101px to 1400px: tighten the eight-item nav so the header CTA stays on screen */
@media(min-width:1101px) and (max-width:1400px){
  .site-header{gap:14px;}
  .nav{gap:0;}
  .nav a{padding:9px 9px;font-size:.7rem;letter-spacing:.08em;}
  .nav a.active::after{left:9px;right:9px;}
  .nav .sub a{font-size:.9rem;letter-spacing:0;padding:8px 16px;}
  .header-cta .btn{padding:.85em 1.1em;}
}
.nav .nav-item{position:relative;display:flex;align-items:center;}
.nav .nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;}
.nav .sub{
  position:absolute;top:calc(100% + 10px);left:0;z-index:100;min-width:280px;
  display:none;flex-direction:column;padding:10px 0;
  background:rgba(13,16,23,.98);backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
}
.nav .nav-item:hover .sub,.nav .nav-item:focus-within .sub{display:flex;}
.nav .sub a{font-family:var(--sans);font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--muted);padding:8px 18px;border-radius:0;white-space:nowrap;}
.nav .sub a:hover,.nav .sub a:focus{color:var(--text);background:rgba(255,255,255,.04);}

/* no JavaScript below the collapse point: the drawer cannot open, so keep the nav visible
   on its own row (dropdown groups shown inline) and hide the menu button */
@media(max-width:1100px){
  html:not(.js) .site-header{position:static;flex-wrap:wrap;}
  html:not(.js) .nav{display:flex;flex-wrap:wrap;width:100%;justify-content:flex-start;gap:2px 0;}
  html:not(.js) .nav .nav-item{flex-wrap:wrap;}
  html:not(.js) .nav .sub{position:static;display:flex;flex-direction:row;flex-wrap:wrap;background:none;border:0;box-shadow:none;padding:0 0 0 6px;min-width:0;backdrop-filter:none;}
  html:not(.js) .menu-toggle{display:none;}
}

/* ---------- mobile drawer: numbered groups with sub-links ---------- */
.drawer nav{overflow-y:auto;}
.drawer .drawer-group{display:flex;flex-direction:column;}
.drawer nav .drawer-sub{display:flex;flex-wrap:wrap;gap:4px 18px;padding:8px 0 14px 46px;}
.drawer nav .drawer-sub a{font-family:var(--sans);font-size:.95rem;color:var(--muted);padding:4px 0;border-bottom:0;}
.drawer nav .drawer-sub a:hover{color:var(--text);}

/* ---------- footer: brand column plus six link columns ---------- */
.site-footer .footer-grid{grid-template-columns:1.4fr repeat(3,1fr);}
@media(max-width:1100px){.site-footer .footer-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.site-footer .footer-grid{grid-template-columns:1fr;}}

/* ---------- method page: security and growth columns under each step ---------- */
.method-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);}
.method-cols p{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text);max-width:48ch;line-height:1.5;margin:0;}
.method-cols .eyebrow{margin-bottom:.7rem;}
@media(max-width:900px){.method-cols{grid-template-columns:1fr;gap:18px;}}

/* ---------- plans ---------- */
.plan-from{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--text);margin:.2rem 0 .8rem;}

/* ---------- four-up card grid ---------- */
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-4{grid-template-columns:1fr;}}

/* ---------- linked list items and FAQ ---------- */
.svc-list li a:hover,.prose li a:hover{color:var(--accent);}
.faq h3{font-size:clamp(1.15rem,1.6vw,1.35rem);margin:1.4rem 0 .5rem;}
.faq h3:first-child{margin-top:0;}

/* ---------- service block: link to the full service page ---------- */
.svc-more{display:inline-flex;gap:.5em;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:1.2rem;}
.svc-more:hover{color:var(--text);}

/* ---------- data tables and prose lists for long-form pages ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1.2rem;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);}
.tbl th{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500;}
.tbl td{color:var(--muted);}
.tbl td:first-child{color:var(--text);}
.prose ul{list-style:none;margin:0 0 1.2rem;padding:0;}
.prose li{padding:10px 0 10px 22px;position:relative;color:var(--muted);border-bottom:1px solid var(--line);}
.prose li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:2px;background:var(--accent);}
.prose li a{color:var(--text);}
.prose li a:hover{color:var(--accent);}
.prose h2.h{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .9rem;}
.prose p{color:var(--muted);max-width:62ch;}
.prose p.lead{color:var(--text);}
.prose strong{color:var(--text);font-weight:500;}
.sub-count{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--faint);margin-top:1rem;}
.draft-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--bar-orange);border:1px solid var(--bar-orange);padding:.7em 1em;border-radius:var(--radius);margin:0 0 2rem;}

/* ---------- Phase 4: glossary hub letter navigation ---------- */
.letter-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 2.4rem;}
.letter-nav a{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;min-width:2.2rem;padding:8px 10px;text-align:center;border:1px solid var(--line);color:var(--muted);text-decoration:none;}
.letter-nav a:hover,.letter-nav a:focus-visible{color:var(--text);border-color:var(--accent);}
.letter-group{margin:0 0 2.6rem;scroll-margin-top:96px;}
.letter-head{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);}
.term-list{margin:0;}
.term-row{display:grid;grid-template-columns:minmax(14ch,22ch) 1fr;gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--line);}
.term-row dt a{color:var(--text);text-decoration:none;}
.term-row dt a:hover{color:var(--accent);}
.term-row dd{margin:0;color:var(--muted);max-width:62ch;}
@media(max-width:700px){.term-row{grid-template-columns:1fr;}}

/* ---------- Phase 4: checklists (step table and print) ---------- */
.tbl.steps td:first-child{font-family:var(--mono);font-size:.8rem;color:var(--faint);width:3.2em;}
.tbl.steps td:nth-child(2){color:var(--text);}
.print-bar{display:flex;gap:12px;align-items:center;margin:0 0 1.4rem;}
@media print{
  .site-header,.drawer,.site-footer,footer,.cta-band,.no-print,.menu-toggle,.print-bar,.bars-deco{display:none !important;}
  body{background:#fff;color:#111;}
  .page-hero{padding:0 0 1rem;}
  .wrap{max-width:none;padding:0;}
  .section,.section--tight{padding:1rem 0;border:0 !important;background:#fff !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  .eyebrow,.kicker{color:#555;}
  h1,h2,h3,p,td,th,li,dt,dd{color:#111 !important;}
  .tbl th,.tbl td{border-bottom:1px solid #999;padding:6px 10px 6px 0;font-size:11pt;}
  .tbl{page-break-inside:auto;}
  .tbl tr{page-break-inside:avoid;}
  a{color:#111;text-decoration:none;}
  .prose li{border-bottom:1px solid #ccc;}
}
.print-bar .btn{cursor:pointer;font:inherit;}
html:not(.js) .print-bar{display:none;}

/* ---------- Phase 5: field notes ---------- */
.answer p{color:var(--text);font-size:1.05rem;line-height:1.7;border-left:2px solid var(--accent);padding-left:18px;margin:0;}
.note-body h2.h{margin-top:2.2rem;}
.note-body h2.h:first-child{margin-top:0;}
.sources{margin:0;padding-left:1.4em;color:var(--muted);}
.sources li{padding:8px 0;border-bottom:1px solid var(--line);}
.sources li a{color:var(--text);word-break:break-word;}
.sources li a:hover{color:var(--accent);}

/* ---------- Phase 6: accessibility audit fixes (footer heading level and contrast) ---------- */
/* footer column headings are h2 (sequential after the page h1); same look as the former h4, lighter color for 4.5:1 */
.footer-col h2.footer-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 18px;line-height:1.4;}
.footer-bottom p{color:var(--muted);}

/* ---------- visuals: inline data charts and the method strip ---------- */
.chart{margin:0;max-width:72ch;}
.chart-svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);}
.chart figcaption{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);margin-top:.8rem;max-width:72ch;}
.method-strip{margin:0;max-width:720px;}
.method-strip svg{display:block;width:100%;height:auto;}
@media print{.chart-svg{border-color:#999;}}