/* FulCharBo shared stylesheet - Scottrade-style plain/conservative theme */
:root { --navy:#002244; --blue:#01366b; --green:#69BE28; --greend:#4e9c1a; --ink:#333; --mut:#5b6670; --line:#d3d9df; --band:#f2f5f7; }
* { box-sizing:border-box; }
body { margin:0; background:#e6e9ec; color:var(--ink); font-family:Arial,Helvetica,"Liberation Sans",sans-serif; font-size:15px; line-height:1.5; }
.page { width:min(100% - 34px, 1400px); margin:10px auto; background:#fff; border:1px solid #b7bfc7; }
a { color:var(--greend); }
svg { flex:none; }
.zoomable { cursor:zoom-in; }
.lightbox { position:fixed; inset:0; background:rgba(0,20,40,.86); display:flex; align-items:flex-start; justify-content:center; z-index:1000; padding:24px; cursor:zoom-out; overflow:auto; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:min(94vw,820px); height:auto; background:#fff; padding:6px; box-shadow:0 20px 60px rgba(0,0,0,.55); }
.lightbox .lbclose { position:absolute; top:16px; right:22px; color:#fff; font-size:34px; line-height:1; font-family:Arial,sans-serif; cursor:pointer; }

.util { background:var(--navy); color:#c6d2de; font-size:11.5px; padding:5px 16px; display:flex; justify-content:space-between; align-items:center; }
.util .ul { color:#9fb0c1; }
.util a { color:#e6edf4; text-decoration:none; }
.util a:hover { text-decoration:underline; }

.mast { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; gap:14px; }
.mast .logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.mast .cube { height:38px; width:38px; object-fit:contain; display:block; flex:none; }
.mast .logotext { display:flex; flex-direction:column; line-height:1; }
.mast .name { font-size:29px; font-weight:bold; color:var(--navy); line-height:1; text-decoration:none; display:inline-block; }
.mast .name .c { color:var(--green); }
.mast .sub { font-size:10px; letter-spacing:.2em; color:var(--mut); margin-top:3px; }
.mast .right { display:flex; flex-direction:row; align-items:center; gap:14px; }
.mast .phlabel { font-size:11px; color:var(--mut); letter-spacing:.04em; text-transform:uppercase; }
.mast .ph { color:var(--navy); font-weight:bold; font-size:21px; white-space:nowrap; text-decoration:none; }
.mast .ph:hover { color:var(--greend); }
.mast .portalbtn { display:inline-block; font-size:12px; font-weight:bold; letter-spacing:.02em; color:#fff; background:var(--greend); border:1px solid var(--greend); padding:6px 14px; text-decoration:none; }
.mast .portalbtn:hover { background:var(--green); }
.util .ur { color:#9fb0c1; }
.btn { display:inline-block; background:var(--green); color:#fff; font-weight:bold; font-size:13px; text-decoration:none; padding:9px 15px; border:1px solid var(--greend); cursor:pointer; }
.btn:hover { background:var(--greend); }
.btn.big { font-size:15px; padding:12px 22px; }
.btn.ghost { background:#fff; color:var(--greend); }
.btn.ghost:hover { background:var(--band); }

.nav { background:var(--navy); border-top:3px solid var(--green); display:flex; flex-wrap:wrap; justify-content:space-between; }
.nav a { color:#e6edf4; text-decoration:none; font-size:12.5px; padding:9px 14px; }
.nav a:hover { background:var(--blue); }
.nav a.here { background:var(--blue); font-weight:bold; }

.crumb { border-bottom:1px solid var(--line); font-size:11.5px; color:var(--mut); padding:6px 16px; }
.crumb a { color:var(--greend); text-decoration:none; }
.crumb a:hover { text-decoration:underline; }
.wrap { padding:14px 16px 4px; }

/* ---- home hero ---- */
.hero { display:flex; gap:16px; align-items:stretch; }
.hero-main { flex:1 1 auto; border:1px solid var(--navy); background:var(--navy); color:#fff; padding:16px 18px; display:flex; gap:18px; align-items:stretch; position:relative; overflow:hidden; }
.hero-main::after { content:""; position:absolute; top:0; right:0; bottom:0; width:130px; background:linear-gradient(120deg, transparent 45%, rgba(105,190,40,.22) 45%); pointer-events:none; }
.hero-main .photo { flex:none; width:200px; border:1px solid #dfe4e8; padding:3px; background:#fff; align-self:stretch; position:relative; z-index:1; }
.hero-main .photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.hero-main .herotext { flex:1 1 auto; min-width:0; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; }
.hero-main .herokick { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8fd44e; font-weight:bold; margin:0 0 7px; }
.hero-main h1 { color:#fff; font-size:22px; margin:0 0 9px; }
.hero-main p { margin:0 0 10px; color:#d6dee7; }
.herocreds { margin-top:12px; }
.herocreds .badgerow { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.herocreds .badgerow img { height:50px; width:auto; }
.herocreds .credline { font-size:12.5px; color:#aeb9c4; margin-top:8px; }
.herocreds .credline b { color:#fff; }
.herocreds .credline a { font-weight:bold; text-decoration:none; white-space:nowrap; color:#bfe08c; }
.hero-side { flex:0 0 250px; align-self:stretch; border:1px solid var(--line); display:flex; flex-direction:column; background:#fff; position:relative; }
.box-seal { position:absolute; top:-18px; right:-16px; width:76px; height:auto; transform:rotate(9deg); filter:drop-shadow(0 5px 10px rgba(8,23,46,.4)); cursor:zoom-in; z-index:5; }
.hero-side .tabs { display:flex; }
.hero-side .tabs span { flex:1; text-align:center; font-size:11px; font-weight:bold; letter-spacing:.03em; padding:8px 4px; }
.hero-side .tabs .on { background:var(--navy); color:#fff; }
.hero-side .tabs .off { background:#e7ebef; color:var(--navy); }
.hero-side .sb { padding:14px 15px; flex:1; display:flex; flex-direction:column; justify-content:flex-start; }
.hero-side .sb h3 { color:var(--navy); font-size:17px; margin:0 0 8px; padding-right:34px; }
.hero-side .sb p { font-size:13px; margin:0 0 12px; }
.hero-side .sb .sbq { font-size:13px; color:var(--navy); font-weight:bold; margin:0 0 6px; }
.hero-side .sb .sbchecks { list-style:none; margin:0 0 10px; padding:0; }
.hero-side .sb .sbchecks li { font-size:13px; color:var(--ink); line-height:1.35; padding:3px 0 3px 17px; position:relative; }
.hero-side .sb .sbchecks li::before { content:"\203A"; position:absolute; left:2px; top:2px; color:var(--greend); font-weight:bold; }
.hero-side .sb .sbnote { font-size:12px; color:var(--mut); margin:0 0 12px; }
.hero-side .sb .btn { display:block; text-align:center; }
.hero-side .sb .score { display:block; text-align:center; font-size:12.5px; font-weight:bold; margin-top:10px; text-decoration:none; }

.feats { display:grid; grid-template-columns:repeat(4,1fr); margin:20px 0 6px; }
.feat { padding:4px 16px; border-left:1px solid var(--line); }
.feat:first-child { border-left:0; padding-left:0; }
.feat .fh { display:flex; align-items:center; gap:8px; color:var(--navy); font-weight:bold; font-size:15px; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:8px; }
.feat .fh svg { width:20px; height:20px; stroke:var(--greend); }
.feat p { font-size:13px; margin:0 0 10px; }
.feat a { font-size:11.5px; font-weight:bold; letter-spacing:.04em; text-decoration:none; }
.feat a:hover { text-decoration:underline; }

.sh { color:var(--navy); font-weight:bold; font-size:16px; border-bottom:2px solid var(--green); padding-bottom:5px; margin:22px 0 12px; }

.define { border:1px solid var(--line); background:var(--band); padding:12px 16px; }
.define .word { color:var(--navy); font-size:19px; font-weight:bold; }
.define .word .c { color:var(--green); }
.define .pron { font-size:12px; color:var(--mut); margin-left:6px; }
.define .pos { font-style:italic; color:var(--mut); margin-right:8px; }
.define .entry { margin:0 0 8px; } .define .entry b { color:var(--navy); }
.define .see { font-size:13px; color:var(--mut); } .define .see b { color:var(--navy); }

.aboutgrid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; }
.aboutgrid p { margin:0 0 12px; }
.aboutgrid .more { font-weight:bold; text-decoration:none; }
.badges { text-align:center; }
.badgerow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }
.badgerow img { height:62px; width:auto; }
.badgecap { font-size:12px; color:var(--mut); margin-top:8px; } .badgecap b { color:var(--navy); }
.badgecap a.verify { display:inline-block; margin-top:7px; color:var(--greend); font-weight:bold; text-decoration:none; font-size:12.5px; }
.badgecap a.verify:hover { text-decoration:underline; }

table.ladder { width:100%; border-collapse:collapse; margin:2px 0 6px; font-size:14.5px; }
table.ladder th { background:var(--navy); color:#fff; text-align:left; padding:7px 10px; font-size:12px; }
table.ladder td { border:1px solid var(--line); padding:7px 10px; vertical-align:top; }
table.ladder td.step { white-space:nowrap; width:140px; }
table.ladder td.step a { color:var(--blue); font-weight:bold; text-decoration:none; }
table.ladder td.step a:hover { text-decoration:underline; }
table.ladder td.pay { width:180px; font-weight:bold; color:var(--navy); }
table.ladder th.act, table.ladder td.act { text-align:right; white-space:nowrap; width:112px; }
table.ladder td.act a { color:var(--greend); font-weight:bold; text-decoration:none; }
table.ladder td.act a:hover { text-decoration:underline; }
table.ladder tr:nth-child(even) td { background:var(--band); }
table.ladder tr.on td { background:#eef6e3; }
table.ladder tr.on td.step a { color:var(--greend); }

.cstrip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:20px 0 4px; }
.cstrip div { padding:14px 10px; text-align:center; border-left:1px solid var(--line); font-size:13px; }
.cstrip div:first-child { border-left:0; }
.cstrip svg { width:22px; height:22px; stroke:var(--greend); display:block; margin:0 auto 6px; }
.cstrip b { color:var(--navy); }
.cstrip a { text-decoration:none; }

/* ---- inner-page content helpers ---- */
.pagehead { border:1px solid var(--navy); background:var(--navy); color:#fff; padding:18px 20px; margin:0 0 22px; position:relative; overflow:hidden; }
.pagehead::after { content:""; position:absolute; top:0; right:0; bottom:0; width:120px; background:linear-gradient(120deg, transparent 45%, rgba(105,190,40,.22) 45%); pointer-events:none; }
.pagehead h1 { margin:0 0 8px; font-size:24px; color:#fff; position:relative; z-index:1; }
.pagehead p { margin:0; color:#d6dee7; max-width:640px; position:relative; z-index:1; }
.pagehead .kick { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8fd44e; font-weight:bold; margin:0 0 6px; position:relative; z-index:1; }

.lead { font-size:15.5px; }
.calwrap { border:1px solid var(--line); background:#fff; padding:6px; margin:14px 0 4px; }
.ghlcal { width:100%; border:none; overflow:hidden; min-height:760px; display:block; }
.leadrow { display:grid; grid-template-columns:1fr 240px; gap:34px; align-items:center; margin:0 0 18px; padding:2px 2px 16px; border-bottom:1px solid var(--line); }
.leadrow .lead { margin:0; max-width:68ch; }
.leadart { text-align:center; }
.leadart img { width:100%; max-width:200px; max-height:150px; height:auto; object-fit:contain; display:inline-block; }
.leadart .leadcap { margin-top:6px; }
@media (max-width:640px){ .leadrow { grid-template-columns:1fr; padding:16px; text-align:center; } .leadart img { max-width:230px; margin-top:8px; } }
.prose p { margin:0 0 12px; }
.prose h3 { color:var(--navy); font-size:15px; margin:18px 0 8px; }

.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cols2.wide { grid-template-columns:1.4fr 1fr; }

.card { border:1px solid var(--line); background:#fff; padding:14px 16px; }
.card.band { background:var(--band); }
.card h3 { color:var(--navy); font-size:15px; margin:0 0 8px; }

ul.check { list-style:none; margin:0 0 12px; padding:0; }
ul.check li { position:relative; padding:5px 0 5px 24px; font-size:14px; border-bottom:1px solid var(--line); }
ul.check li:last-child { border-bottom:0; }
ul.check li::before { content:""; position:absolute; left:2px; top:9px; width:12px; height:12px; background:var(--green); border-radius:2px; }
ul.check li::after { content:""; position:absolute; left:5px; top:11px; width:3px; height:6px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(40deg); }

ul.plain { margin:0 0 12px; padding-left:20px; } ul.plain li { margin:4px 0; font-size:14px; }

.numsteps { counter-reset:st; margin:6px 0 12px; padding:0; list-style:none; }
.numsteps li { position:relative; padding:2px 0 12px 42px; margin:0; }
.numsteps li::before { counter-increment:st; content:counter(st); position:absolute; left:0; top:0; width:28px; height:28px; background:var(--navy); color:#fff; font-weight:bold; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; }
.numsteps li b { color:var(--navy); display:block; margin-bottom:2px; }
.numsteps li span { font-size:14px; color:var(--ink); }

.faq dt { font-weight:bold; color:var(--navy); margin:12px 0 3px; font-size:14.5px; }
.faq dd { margin:0 0 10px; font-size:14px; }

/* FAQ jump-to nav (grouped) */
.faqjump { background:var(--band); border:1px solid var(--line); border-left:4px solid var(--green); padding:11px 15px; font-size:13.5px; line-height:1.9; margin:8px 0 6px; }
.faqjump b { color:var(--navy); }
.faqjump a { color:var(--greend); text-decoration:none; font-weight:bold; white-space:nowrap; }
.faqjump a:hover { text-decoration:underline; }
.sh.faqgrp { scroll-margin-top:12px; margin-top:26px; }

/* Dedicated FAQ page: each Q&A a separate, always-visible, anchored block */
.qa { padding:16px 0; border-bottom:1px solid var(--line); scroll-margin-top:12px; }
.qa:first-of-type { border-top:1px solid var(--line); }
.qa h2 { font-size:16px; color:var(--navy); margin:0 0 7px; }
.qa p { margin:0; font-size:14.5px; }

.ctabar { background:var(--band); border:1px solid var(--line); border-left:4px solid var(--green); padding:16px 18px; margin:22px 0 6px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ctabar .cta-t { font-size:16px; color:var(--navy); font-weight:bold; }
.ctabar .cta-s { font-size:13px; color:var(--mut); margin-top:2px; }
.ctabar .cta-btns { display:flex; gap:10px; flex-wrap:wrap; }

.pricebox { border:1px solid var(--line); }
.pricebox .ph2 { background:var(--navy); color:#fff; padding:8px 12px; font-weight:bold; font-size:13px; }
.pricebox .pb { padding:12px 14px; font-size:14px; }
.pricebox .price { font-size:22px; color:var(--navy); font-weight:bold; }

.sample { display:flex; gap:22px; align-items:center; border:1px solid var(--line); background:var(--band); padding:18px 20px; }
.sample .thumb { flex:none; width:236px; height:300px; overflow:hidden; border:1px solid var(--line); background:#fff; display:block; box-shadow:0 3px 10px rgba(8,23,46,.16); cursor:zoom-in; position:relative; }
.sample .thumb img { width:100%; display:block; }
.sample .thumb .zhint { position:absolute; left:0; right:0; bottom:0; background:rgba(0,34,68,.86); color:#fff; font-size:11.5px; font-weight:bold; letter-spacing:.03em; text-align:center; padding:6px 4px; }
.sample .thumb:hover .zhint { background:var(--greend); }
.sample .stext { flex:1 1 auto; min-width:0; }
.sample .stext h3 { color:var(--navy); font-size:16px; margin:0 0 8px; }
.sample .stext p { font-size:14.5px; margin:0 0 14px; max-width:46ch; }
.sample .stext .btn { margin-right:10px; }
.sample .stext .hint { display:inline-block; font-size:12.5px; color:var(--mut); margin-top:10px; }
@media (max-width:640px){ .sample { flex-direction:column; align-items:center; text-align:center; } .sample .thumb { width:100%; max-width:280px; height:220px; margin:0 auto; } .sample .stext p { max-width:none; } }

/* Credentials trust strip (service pages) */
.tstrip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 8px; margin:20px 0 4px; }
.tstrip img { height:46px; width:auto; }
.tstrip .tcap { flex-basis:100%; text-align:center; font-size:12px; color:var(--mut); margin-top:2px; }
.tstrip .tcap b { color:var(--navy); }

/* Icon highlights (3-up) */
.ihl { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0 8px; }
.ih { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); background:#fff; padding:11px 13px; }
.ih svg { width:24px; height:24px; stroke:var(--greend); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ih b { display:block; color:var(--navy); font-size:13.5px; }
.ih span { font-size:12px; color:var(--mut); }
@media (max-width:600px){ .ihl { grid-template-columns:1fr; } }

.reslist { border:1px solid var(--line); }
.reslist a.res { display:block; padding:12px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.reslist a.res:last-child { border-bottom:0; }
.reslist a.res:hover { background:var(--band); }
.reslist a.res b { color:var(--navy); display:block; font-size:14.5px; }
.reslist a.res span { font-size:13px; color:var(--mut); }

/* footer */
.foot { background:var(--navy); color:#b9c6d4; font-size:12px; padding:13px 18px 9px; }
.foot .cols { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.4fr; gap:14px; }
.foot h5 { color:#fff; font-size:12px; letter-spacing:.06em; margin:0 0 5px; }
.foot a { color:#cdd8e4; text-decoration:none; }
.foot .col a { display:block; padding:1px 0; }
.foot a:hover { color:#fff; text-decoration:underline; }
.foot .addr { color:#b9c6d4; line-height:1.5; }
.foot .fmap .mapclip { position:relative; overflow:hidden; height:132px; border:1px solid #123b62; }
.foot .fmap .mapclip iframe { position:absolute; top:-52px; left:0; width:100%; height:184px; border:0; display:block; }
.fsocial { display:flex; justify-content:center; gap:14px; margin:11px 0 2px; }
.fsocial a { color:#cdd8e4; display:inline-flex; }
.fsocial svg { width:20px; height:20px; }
.fsocial a:hover { color:#fff; }
.foot .fcred { text-align:center; font-size:11.5px; color:#9fb3c6; margin-top:8px; }
.foot .fcred::before { content:"\2713  "; color:#8fd44e; font-weight:bold; }
.foot .fcred a { color:#bfe08c; font-weight:bold; text-decoration:none; white-space:nowrap; }
.foot .fcred a:hover { text-decoration:underline; }
.foot .legal { border-top:1px solid #123b62; margin-top:8px; padding-top:7px; font-size:11px; color:#8ea3b8; text-align:center; }
.foot .legal a { color:#a9b9c9; }

@media (max-width:720px){
  /* top bar + masthead: clean and centered */
  .util { justify-content:center; text-align:center; }
  .util .ur { display:none; }
  .mast { flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .mast .logo { justify-content:center; }
  .mast .right { flex-direction:row; align-items:center; justify-content:center; gap:14px; }
  .mast .portalbtn { margin-bottom:0; }
  .nav { justify-content:center; }
  /* center headings, banners, hero and feature blocks on phones */
  .pagehead { text-align:center; }
  .sh { text-align:center; }
  .feat { text-align:center; } .feat .fh { justify-content:center; }
  .hero { flex-direction:column; } .hero-side { flex:1 1 auto; }
  .hero-main { flex-direction:column; align-items:center; text-align:center; } .hero-main::after { display:none; }
  .hero-main .photo { align-self:center; width:100%; max-width:240px; } .hero-main .photo img { height:auto; }
  .hero-main h1 { margin-top:4px; }
  .hero-main .herocreds .badgerow { justify-content:center; }

  /* 4-up feature blocks stay a 2x2 card grid on phones (not a tall stack) */
  .feats { grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 6px; }
  .feat { border:1px solid var(--line); border-left:1px solid var(--line); padding:11px 12px; }
  .feat:first-child { padding-left:12px; }
  .feat .fh { font-size:14px; }
  .feat p { font-size:12.5px; }

  .aboutgrid, .cols2, .cols2.wide { grid-template-columns:1fr; }

  /* contact strip stays 2x2 */
  .cstrip { grid-template-columns:1fr 1fr; }
  .cstrip div { border-left:1px solid var(--line); }
  .cstrip div:nth-child(odd) { border-left:0; }
  .cstrip div:nth-child(n+3) { border-top:1px solid var(--line); }

  /* footer: 2x2 panels (map in the bottom-right panel), centered content */
  .foot .cols { grid-template-columns:1fr 1fr; text-align:center; gap:18px 14px; }
  .foot .addr { text-align:center; }
  .foot .fmap .mapclip { height:120px; }
  .foot .fmap .mapclip iframe { height:172px; }
}
@media (max-width:600px){
  table.ladder { font-size:13px; }
  table.ladder td, table.ladder th { padding:6px 7px; }
  table.ladder td.step { width:auto; }
  table.ladder td.pay { width:auto; }
  table.ladder .hidesm { display:none; }
  table.ladder th.act, table.ladder td.act { width:auto; }
}
@media (max-width:400px){
  .feats { gap:8px; } .feat { padding:9px 10px; }
  .feat .fh { font-size:13px; } .feat p { font-size:11.5px; }
  .cstrip div { padding:12px 6px; font-size:12px; }
}
@media (max-width:520px){
  /* keep the 5 credential badges in one clean row on phones */
  .badges .badgerow { gap:9px; } .badges .badgerow img { height:46px; }
  .herocreds .badgerow { gap:9px; } .herocreds .badgerow img { height:42px; }
}

/* ---- Phones: center content consistently so every section reads as deliberate ---- */
@media (max-width:640px){
  .wrap { text-align:center; }
  /* lists center as a block; their items stay left-aligned and readable */
  ul.check, ul.plain, .numsteps { display:inline-block; text-align:left; }
  .cols2, .cols2.wide, .aboutgrid { justify-items:center; }
  .card { text-align:center; }
  .reslist a.res { text-align:center; }
  .ctabar { justify-content:center; }
  .ctabar .cta-btns { justify-content:center; }
  .faq dt { text-align:center; }
  .qa h2 { text-align:center; }
  /* long-form text + data tables stay left-aligned for readability */
  table.ladder, table.ladder th, table.ladder td { text-align:left; }
  .define .entry, .prose p, .hero-side .sb, .faq dd, .qa p { text-align:left; }
}
