/* ============================================================
   PJC DESIGN REFRESH — additive refinement layer
   Loaded after each page's inline styles. To revert any change,
   delete the rule here (or remove the <link> to this file).
   Nothing in the original pages was deleted.
   ------------------------------------------------------------
   What this layer does:
   1. Border discipline — quiet hairlines on containers; green is
      reserved for actions, the featured plan, and key accents.
   2. Button hierarchy — one solid green primary per area;
      secondary buttons become quiet outlines.
   3. Typography rhythm — eyebrows/labels return to label size,
      card headings stay white, secondary text gets more contrast.
   4. Layout fixes — offers grid stacks on mobile, anchor targets
      clear the sticky header, long headings scale down on phones.
   ============================================================ */

:root{
  --line: rgba(244,247,250,.14);
  --line-strong: rgba(244,247,250,.24);
  --ink-soft:#A9C6E3;              /* slightly brighter secondary text */
  --card-line:#C9D9E8;             /* hairline on white "document" panels */
  --green-hover:#379457;           /* darker green for button hover */
}

/* ---------- 5 · Logo ---------- */
/* Bigger brand mark in the header and footer. Sizes also apply to a
   custom logo image swapped in via site-config.js (media.logo). */
.wordmark svg,.wordmark img.wm-logo{width:46px;height:46px;flex:none}
.wordmark img.wm-logo{display:block;object-fit:contain}
.wordmark .wm-name{font-size:.98rem}
.wordmark .wm-sub{font-size:.64rem}
@media(min-width:1200px){
  .wordmark svg,.wordmark img.wm-logo{width:54px;height:54px}
  .wordmark .wm-name{font-size:1.12rem}
  .wordmark .wm-sub{font-size:.68rem}
}
@media(max-width:760px){
  .wordmark svg,.wordmark img.wm-logo{width:38px;height:38px}
}
.f-mark,.f-mark svg,.f-mark img{width:78px;height:78px}
.f-mark img{display:block;object-fit:contain}

/* ---------- 6 · Intake form ---------- */
/* Header bar: light blue with white text. */
.ticket-bar{background:#6E9CC7;color:#fff;border-bottom:1px solid rgba(255,255,255,.28);font-weight:700;gap:12px;letter-spacing:.05em;flex-wrap:wrap;row-gap:4px;font-size:.78rem;padding-top:14px;padding-bottom:14px}
.ticket-bar > span:first-child{flex-wrap:wrap!important;row-gap:3px}
.ticket-bar > span:first-child img{height:17px!important;width:17px!important}
.ticket-bar > span:last-child{font-size:.68rem;font-weight:600;opacity:.9;align-self:center;margin-left:auto}
.ticket-bar .dot{background:#E5484D}
/* Fields: white backgrounds (overrides the widget's inline styles). */
#tt-form input:not([type=checkbox]),#tt-form select{
  background:#fff!important;color:#14324F!important;border:1px solid var(--card-line)!important
}
#tt-form input::placeholder{color:#6E89A6}
#tt-form input:not([type=checkbox]):focus,#tt-form select:focus{
  border-color:var(--green)!important;box-shadow:0 0 0 2px rgba(63,165,100,.35);outline:none
}
#tt-form input[type=checkbox]{accent-color:var(--green)}

/* ---------- 7 · Readability pass (from full-site contrast audit) ---------- */
/* --green-light was defined identical to --green, so "light" green text
   rendered dark (3.0:1 on panels). Actual lighter green for text: */
:root{
  --green-light:#6FCE96;   /* text green on navy: ~6–8:1 */
  --ink-soft:#B7CFE7;      /* secondary text, one step brighter (~6:1) */
}
/* Green text elements that were bound to the dark accent green: */
.plan .tier,.stage .num,.feat .form,td.amt-cell,.fee-table th,
.strip b,.num,.tp-step .num,.rm-note b{color:var(--green-light)}
.plan .mono,span.ok,span.when{color:var(--green-light)!important}
/* Inline links on dark backgrounds (never buttons): */
.cta-band a:not(.btn),.cta-band p a:not(.btn),.svc-copy a:not(.btn),
.svc-copy p b,.svc-copy b,.tr-copy a:not(.btn),.tr-copy p a:not(.btn),
p a:not(.btn),.ticket-foot a{color:var(--green-light)}
.btn-green,a.btn-green,button.btn-green{color:#fff}
/* Inside white "document" panels, green needs to go darker, not lighter: */
.terminal.light .flag,.terminal.light a,.terminal.light .num,
.cmp-wrap .us,.cmp-wrap a,.cmp-wrap .yes{color:#1F7A45}
.terminal.light b{color:#1F7A45!important}
th.us{color:#1F7A45!important}
/* Any text inside the light-blue header bars is white: */
.ticket-bar span{color:#fff!important}
/* Small print that was translucent or dim: */
.hero-note{color:#BFD5EA}
.cta-band p{color:#DDE9F4}

/* ---------- 1 · Border discipline ---------- */
/* Containers get quiet hairlines. Green borders now mean something:
   the featured plan, the final node of a flow, focus states. */
.feat-grid,.flow-grid{background:var(--line-strong);border:1px solid var(--line-strong)}
.plan{border:1px solid var(--line-strong)}
.plan.featured{border:2px solid var(--green)}
.terminal{border:1px solid var(--line-strong)}
.terminal.light{border:1px solid var(--card-line)}
.svc-side{border:1px solid var(--line-strong)}
.faq details{border:1px solid var(--line-strong)}
.cred-list{border:1px solid var(--line-strong)}
.fee-table{border:1px solid var(--line-strong)}
.cmp-wrap{border:1px solid var(--card-line)}
.video-slot{border:1px solid var(--line-strong)}
.video-coming{border-top:1px solid var(--line)}
.rm-node{border-color:var(--card-line)}
.rm-node.final{border-color:var(--green)}   /* the outcome node keeps green */
.nl-input,.q-text{border-color:var(--card-line)}
.nl-input:focus,.q-text:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(63,165,100,.35)}

/* Form-number chips: quiet outline instead of solid white blocks */
.feat .form{background:transparent;color:var(--green-light);border:1px solid rgba(63,165,100,.55);font-weight:600}

/* ---------- 2 · Button hierarchy ---------- */
/* Primary: solid green, darkens on hover (no navy swap, no navy ring). */
.btn-green{border:2px solid transparent}
.btn-green:hover,.btn-green:active{background:var(--green-hover);border-color:transparent;color:#fff}
.nav-cta{border:2px solid transparent!important}
.nav-cta:hover,.nav-cta:active{background:var(--green-hover)!important;border-color:transparent!important;filter:none}

/* Secondary: quiet outline that answers with green on hover. */
.btn-ghost{background:transparent;border:2px solid rgba(244,247,250,.35);color:var(--paper)}
.btn-ghost:hover,.btn-ghost:active{background:rgba(63,165,100,.14);border-color:var(--green);color:#fff;filter:none}
.btn.btn-navy,.plan .btn.btn-navy,.plan:not(.featured) .btn.btn-navy{background:transparent;color:var(--paper);border:1px solid rgba(244,247,250,.35)}
.btn.btn-navy:hover,.plan .btn.btn-navy:hover,.btn.btn-navy:active{background:rgba(63,165,100,.14);border-color:var(--green);color:#fff}
.plan:not(.featured) .btn:not(.btn-green):not(.btn-flag){background:transparent;color:var(--paper);border:1px solid rgba(244,247,250,.35)}
.plan:not(.featured) .btn:not(.btn-green):not(.btn-flag):hover{background:rgba(63,165,100,.14);border-color:var(--green);color:#fff}
.plan.featured .btn:not(.btn-green):not(.btn-flag){background:transparent;color:var(--paper);border:1px solid rgba(244,247,250,.35)}
.plan.featured .btn:not(.btn-green):not(.btn-flag):hover{background:rgba(63,165,100,.14);border-color:var(--green);color:#fff}
.plan .btn:not(.btn-green):hover,.plan .btn:not(.btn-green):active{background:rgba(63,165,100,.14);border-color:var(--green);color:#fff}

/* ---------- 3 · Typography rhythm ---------- */
/* Eyebrows: all section labels match the largest one ("A Modern Practice"). */
.eyebrow,p.eyebrow,.tr-copy p.eyebrow,.sec-head .eyebrow,.eval-label{font-size:.98rem;font-weight:600;letter-spacing:.16em}
/* "Start Here" (.eval-label) matches the other section labels exactly, incl. the green dash. */
.eval-label{display:flex;align-items:center;gap:14px;color:var(--green-light);text-transform:uppercase;margin-bottom:26px}
.eval-label::before{content:"";display:block;width:36px;height:1px;background:var(--green)}
/* Light blue text on all section labels (the green dash stays green). */
.eyebrow,p.eyebrow,.sec-head .eyebrow,.eval-label,.eyebrow.eyebrow-lt{color:#9DBEDD}
/* White "document" panels (Practice Stack, Get In Touch, sample reports):
   top row light blue with white text, matching the header bar. */
.terminal.light .bar{background:#6E9CC7;color:#fff;border-bottom:1px solid rgba(255,255,255,.28);font-weight:700;letter-spacing:.08em}

/* Card headings in white; the mono stage number stays green. */
.stage h3{color:var(--paper)}
.stage .num{font-size:.95rem;font-weight:700}
.rm-col h3{color:var(--paper)}
.terminal .bar{font-weight:500}
.strip b{font-weight:600}
/* Long display amounts scale down instead of wrapping huge on phones. */
.plan .amt{font-size:clamp(1.6rem,4vw,2.3rem)}
/* Tier label and amount always stack (fixes inline run-on in row-flex promos). */
.plan .tier{display:block}
.plan .amt{display:block}
@media(max-width:720px){.strip span{font-size:.66rem;letter-spacing:.08em}}
/* Offers headline: white like every other section head; green stays in the cards. */
[data-offers-title]{color:var(--paper)!important;font-size:clamp(1.8rem,3.2vw,2.4rem)!important;line-height:1.2!important}
/* CTA band: second line matches the first line in size and color. */
.cta-band h2 span{display:block;margin-top:10px;font-size:1em!important;font-weight:800;color:var(--paper);line-height:1.15}
/* Footer disclaimer: readable, but no longer brighter than the content above it. */
.disclaimer{color:#fff}
/* Footer navigation: white links, light blue when hovered/selected. */
.foot a,.site-footer a,footer a{color:#fff}
/* Footer navigation links: brand green, brighter green on hover */
.foot a,.site-footer a,footer a{color:#3FA564}
.foot a:hover,.foot a:focus-visible,.foot a:active,
.site-footer a:hover,footer a:hover,footer a:focus-visible,footer a:active{color:#6FCE96}
/* Trust-strip links: quiet green underline instead of default underline. */
.strip a{text-decoration:none!important;border-bottom:1px solid rgba(63,165,100,.55);padding-bottom:1px}
.strip a:hover{border-bottom-color:var(--green);color:#fff}

/* ---------- 4 · Layout & interaction fixes ---------- */
/* Anchor targets clear the sticky header. */
[id]{scroll-margin-top:88px}
/* Fee schedule: row highlight for scanning a long table. */
.fee-table tr:not(.group):hover td{background:var(--panel-hover)}
/* Offers grid: hardcoded 2-col inline style must stack on small screens. */
@media(max-width:980px){
  [data-offers-cards]{grid-template-columns:1fr!important}
}
/* Featured hover lift stays subtle. */
.feat{transition:background .15s ease}
/* Mobile rhythm */
@media(max-width:720px){
  .hero-inner{padding:64px 0 56px}
  .hero .btn{min-width:0;flex:1 1 100%}
  .strip-inner{gap:8px 28px}
  .cta-band h2{font-size:1.55rem}
}
@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
  .btn,.feat,.nav-links a{transition:none}
}


/* ---- Readability: much darker, bold text on white surfaces ---- */
/* Comparison tables (white card): "them" column + headers were pale slate */
.cmp-table th:first-child,.cmp-table th.them,.cmp-table td.them{color:#1E3A55;font-weight:700}
.cmp-table td.us{font-weight:700}
/* Light "terminal" timeline card: bar, row labels, and footnote were pale slate */
.terminal.light .bar,.terminal.light td:first-child,.terminal.light .foot{color:#1E3A55;font-weight:700}
.terminal.light td{font-weight:600}
/* White form fields: darker, bolder typed text and clearly visible placeholders */
.nl-input,.q-text{color:#0F2740;font-weight:600}
.nl-input::placeholder,.q-text::placeholder{color:#44607C;opacity:1;font-weight:600}
#irs-interest-mount input{color:#0F2740;font-weight:600}
#irs-interest-mount input::placeholder{color:#44607C;opacity:1;font-weight:600}
/* White roadmap boxes (Process page) */
.rm-node{font-weight:600}


/* ---- Resolution Roadmaps (Process page): uniform box size ---- */
/* Every numbered step box gets the same height; the step number sits
   centered at the top of the box with the text below it, so the three
   columns line up row by row. */
.rm-node{min-height:136px;display:flex;flex-direction:column;justify-content:center;padding-top:11px}
.rm-node b{display:block;flex:none;align-self:center;margin:0 0 6px;letter-spacing:.12em}