/* ==========================================================================
   CVforGulf – shared page styles for updated pages (mobile first)
   File: /assets/css/cvfg-pages.css
   Used by: /tools (and every page we update from now on).
   Rules of thumb:
   - Wrap each page's <main> in .cv-page. Everything below is scoped to it.
   - Colors are set explicitly on text inside components so site-wide
     h1/h2/p/a rules cannot wash them out.
   - Brand blue is used for every button. Gold is only an accent for Gold tags.
   ========================================================================== */

.cv-page{
  --cv-blue:#1D5FBF;
  --cv-blue-dark:#174B96;
  --cv-blue-soft:#EAF1FF;
  --cv-navy:#0B2540;
  --cv-ink:#14263A;
  --cv-muted:#4F6073;
  --cv-line:#E1E7F0;
  --cv-bg:#F5F7FB;
  --cv-card:#FFFFFF;
  --cv-gold:#C9963E;
  --cv-gold-soft:#FFF6E5;
  --cv-gold-ink:#7A561B;
  --cv-green:#0D6B47;
  --cv-green-soft:#E6F6EE;
  --cv-radius:16px;
  --cv-shadow:0 8px 24px rgba(11,37,64,.08);
  background:var(--cv-bg);
  color:var(--cv-ink);
  font-size:16px;
  line-height:1.6;
}
.cv-page *,.cv-page *::before,.cv-page *::after{box-sizing:border-box}
.cv-page h1,.cv-page h2,.cv-page h3,.cv-page h4{color:var(--cv-navy);line-height:1.2;margin:0}
.cv-page p{color:var(--cv-ink);margin:0}
.cv-page a{color:var(--cv-blue)}
.cv-page img{max-width:100%;height:auto}

/* ---------- Layout ---------- */
.cv-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.cv-wrap--narrow{max-width:820px}
.cv-section{padding:34px 0 6px}
.cv-section h2{font-size:clamp(1.3rem,4.8vw,1.85rem);font-weight:800}
.cv-section .cv-sub{color:var(--cv-muted);margin:8px 0 18px;max-width:46em}

/* ---------- Hero (navy). Text colors are forced so site-wide rules cannot dim them ---------- */
.cv-hero{
  background:linear-gradient(160deg,#0B2540 0%,#133B66 100%);
  padding:26px 0 56px;
}
.cv-page .cv-hero h1{font-size:clamp(1.65rem,6.5vw,2.6rem);font-weight:800;max-width:19em;color:#fff}
.cv-page .cv-hero .cv-lead{font-size:1.04rem;color:#E4ECF8;margin-top:12px;max-width:40em}
.cv-crumb{font-size:13px;margin:0 0 14px}
.cv-page .cv-hero .cv-crumb,.cv-page .cv-hero .cv-crumb a{color:#C9D8EE}
.cv-page .cv-hero .cv-crumb a{text-decoration:underline}
.cv-eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);padding:5px 11px;border-radius:999px;margin-bottom:12px;
}
.cv-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.cv-page .cv-hero .cv-trust,.cv-page .cv-hero .cv-trust li{color:#E4ECF8}
.cv-trust li::before{content:"✓ ";color:#7EE2A8;font-weight:800}

/* ---------- Buttons (always blue) ---------- */
.cv-cta-row{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.cv-page a.cv-btn,.cv-page button.cv-btn{
  display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;
  border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;text-align:center;
  border:2px solid var(--cv-blue);cursor:pointer;
}
.cv-page a.cv-btn-primary,.cv-page button.cv-btn-primary{background:var(--cv-blue);color:#fff}
.cv-page a.cv-btn-primary:hover,.cv-page a.cv-btn-primary:focus-visible{background:var(--cv-blue-dark);border-color:var(--cv-blue-dark);color:#fff}
.cv-page a.cv-btn-ghost,.cv-page button.cv-btn-ghost{background:#fff;color:var(--cv-blue)}
.cv-page a.cv-btn-ghost:hover,.cv-page a.cv-btn-ghost:focus-visible{background:var(--cv-blue-soft)}
.cv-page .cv-hero a.cv-btn-primary,.cv-page .cv-band-box a.cv-btn-primary{background:#2A73D9;border-color:#8DB8F5;color:#fff}
.cv-page .cv-hero a.cv-btn-primary:hover,.cv-page .cv-hero a.cv-btn-primary:focus-visible,.cv-page .cv-band-box a.cv-btn-primary:hover,.cv-page .cv-band-box a.cv-btn-primary:focus-visible{background:#3B84EA;border-color:#B9D4FA;color:#fff}
.cv-page .cv-hero a.cv-btn-ghost,.cv-page .cv-band-box a.cv-btn-ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.cv-page .cv-hero a.cv-btn-ghost:hover,.cv-page .cv-hero a.cv-btn-ghost:focus-visible,.cv-page .cv-band-box a.cv-btn-ghost:hover,.cv-page .cv-band-box a.cv-btn-ghost:focus-visible{background:rgba(255,255,255,.14);color:#fff}
.cv-page .cv-btn:focus-visible,.cv-page .cv-chips a:focus-visible,.cv-page summary:focus-visible{outline:3px solid #9CC0F5;outline-offset:2px}

/* ---------- Quick chooser (chips) ---------- */
.cv-quick{margin:-24px 0 0;position:relative;z-index:1}
.cv-quick-box{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);box-shadow:var(--cv-shadow);padding:14px}
.cv-quick h2{font-size:.95rem;margin-bottom:10px;color:var(--cv-muted);font-weight:700}
.cv-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.cv-page .cv-chips a{
  flex:0 0 auto;scroll-snap-align:start;min-height:44px;display:flex;align-items:center;padding:0 16px;
  border-radius:999px;background:var(--cv-blue-soft);color:var(--cv-navy);font-weight:700;font-size:.92rem;
  text-decoration:none;border:1px solid #CFE0FA;white-space:nowrap;
}

/* ---------- Cards ---------- */
.cv-grid{display:grid;grid-template-columns:1fr;gap:14px}
.cv-card{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:18px;display:flex;flex-direction:column;scroll-margin-top:80px}
.cv-card--gold{border-color:var(--cv-gold);box-shadow:0 0 0 1px rgba(201,150,62,.25)}
.cv-card-top{display:flex;align-items:flex-start;gap:12px}
.cv-ic{flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:var(--cv-blue-soft);color:var(--cv-blue);display:grid;place-items:center}
.cv-card--gold .cv-ic{background:var(--cv-gold-soft);color:var(--cv-gold-ink)}
.cv-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-card h3{font-size:1.08rem}
.cv-tag{display:inline-block;margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:var(--cv-green-soft);color:var(--cv-green)}
.cv-card--gold .cv-tag{background:var(--cv-gold-soft);color:var(--cv-gold-ink)}
.cv-card p{margin-top:12px;font-size:.95rem}
.cv-card .cv-best{color:var(--cv-muted);font-size:.9rem}
.cv-card ul{margin:12px 0 0;padding:0 0 0 1.1rem;color:var(--cv-muted);font-size:.9rem}
.cv-card .cv-spacer{flex:1;min-height:14px}
.cv-card .cv-btn{margin-top:4px}

/* ---------- Steps ---------- */
.cv-steps{counter-reset:cvs;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cv-steps li{counter-increment:cvs;background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:16px 16px 16px 62px;position:relative}
.cv-steps li::before{content:counter(cvs);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--cv-blue);color:#fff;font-weight:800;display:grid;place-items:center}
.cv-steps strong{display:block;color:var(--cv-navy)}

/* ---------- Tables ---------- */
.cv-table-wrap{overflow-x:auto;background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);-webkit-overflow-scrolling:touch}
.cv-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.93rem}
.cv-table th,.cv-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--cv-line);vertical-align:top;color:var(--cv-ink)}
.cv-table thead th{background:#EFF4FB;color:var(--cv-navy);font-size:.85rem}
.cv-table tbody tr:last-child td{border-bottom:0}
.cv-table td:first-child{font-weight:700;color:var(--cv-navy)}
.cv-yes{color:var(--cv-green)!important;font-weight:700}
.cv-no{color:#7B8794!important}
.cv-gold-t{color:var(--cv-gold-ink)!important;font-weight:700}
.cv-note{font-size:.85rem;color:var(--cv-muted)!important;margin:10px 2px 0}

/* ---------- Info cards (markets etc.) ---------- */
.cv-info{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:18px}
.cv-info h3{font-size:1.05rem}
.cv-info p{margin:8px 0 10px;color:var(--cv-muted);font-size:.93rem}
.cv-links{display:flex;flex-wrap:wrap;gap:8px}
.cv-page .cv-links a{font-size:.88rem;font-weight:700;text-decoration:none;padding:8px 12px;border-radius:10px;background:var(--cv-blue-soft);min-height:40px;display:inline-flex;align-items:center}

/* ---------- FAQ ---------- */
.cv-faq details{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:12px;margin-bottom:8px}
.cv-faq summary{cursor:pointer;font-weight:700;color:var(--cv-navy);padding:14px 16px;min-height:48px;display:flex;align-items:center;list-style:none}
.cv-faq summary::-webkit-details-marker{display:none}
.cv-faq summary::after{content:"+";margin-left:auto;padding-left:12px;font-size:1.3rem;color:var(--cv-muted)}
.cv-faq details[open] summary::after{content:"–"}
.cv-faq details p{padding:0 16px 16px;color:var(--cv-muted);margin:0}

/* ---------- Closing CTA band (navy) ---------- */
.cv-band{margin:34px 0 0;padding:0 0 8px}
.cv-band-box{background:linear-gradient(160deg,#0B2540 0%,#133B66 100%);border-radius:var(--cv-radius);padding:26px 18px}
.cv-page .cv-band-box h2{font-size:clamp(1.3rem,5vw,1.8rem);color:#fff}
.cv-page .cv-band-box p{color:#E4ECF8;margin-top:8px;max-width:38em}
.cv-page .cv-band-box p a{color:#fff;text-decoration:underline}
.cv-updated{font-size:.82rem;color:var(--cv-muted)!important;padding:18px 0 28px}

/* ---------- Reusable blocks for article-style pages ---------- */
.cv-answer{background:var(--cv-card);border:1px solid var(--cv-line);border-left:4px solid var(--cv-blue);border-radius:12px;padding:16px 18px;margin:0 0 22px}
.cv-prose h2{font-size:1.3rem;margin:28px 0 10px}
.cv-prose h3{font-size:1.1rem;margin:20px 0 8px}
.cv-prose p,.cv-prose li{color:var(--cv-ink)}
.cv-prose ul,.cv-prose ol{margin:0 0 16px 1.2rem}
.cv-sample{background:#F3F6FB;border:1px solid var(--cv-line);border-radius:12px;padding:16px;overflow-x:auto;font-size:.9rem;line-height:1.55;white-space:pre-wrap}

/* ---------- Larger screens ---------- */
@media (min-width:640px){
  .cv-cta-row{flex-direction:row}
  .cv-page a.cv-btn{min-width:210px}
  .cv-grid{grid-template-columns:repeat(2,1fr)}
  .cv-steps{grid-template-columns:repeat(2,1fr)}
  .cv-hero{padding:44px 0 68px}
  .cv-chips{flex-wrap:wrap;overflow:visible}
  .cv-band-box{padding:32px 28px}
}
@media (min-width:980px){
  .cv-wrap{padding:0 24px}
  .cv-grid--3{grid-template-columns:repeat(3,1fr)}
  .cv-grid--4{grid-template-columns:repeat(4,1fr)}
  .cv-steps{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .cv-card,.cv-chips a,.cv-btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
  .cv-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,37,64,.1)}
}

/* ---------- Template gallery (/templates) ---------- */
.cv-page .cv-chips a[aria-current="page"]{background:var(--cv-blue);border-color:var(--cv-blue);color:#fff}
.cv-tpl-grid{display:grid;grid-template-columns:1fr;gap:14px}
.cv-tpl-card{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);overflow:hidden;display:flex;flex-direction:column}
.cv-tpl-thumb{display:block;background:#EEF2F7;aspect-ratio:3/4;overflow:hidden;position:relative}
.cv-page .cv-tpl-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cv-tpl-thumb .no-prev{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-size:13px;font-weight:600;color:#5B6B7C}
.cv-tpl-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.cv-tpl-badge{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--cv-green-soft);color:var(--cv-green)}
.cv-tpl-badge--gold{background:var(--cv-gold-soft);color:var(--cv-gold-ink)}
.cv-page .cv-tpl-card h3{font-size:1.05rem}
.cv-page .cv-tpl-card h3 a{color:var(--cv-navy);text-decoration:none}
.cv-page .cv-tpl-card .cv-tpl-desc{font-size:.9rem;color:var(--cv-muted);margin:0;flex:1}
.cv-tpl-actions{display:flex;gap:8px;margin-top:4px}
.cv-page .cv-tpl-card a.cv-btn{min-width:0;flex:1;min-height:44px;padding:8px 10px;font-size:.92rem}
.cv-tpl-empty{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:32px 18px;text-align:center}
@media (min-width:640px){.cv-tpl-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.cv-tpl-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Card button rows (two buttons inside a card) ---------- */
.cv-page .cv-card .cv-cta-row{flex-direction:row;flex-wrap:wrap;margin-top:8px}
.cv-page .cv-card .cv-cta-row a.cv-btn{min-width:0;flex:1 1 120px;min-height:46px;padding:10px 12px;font-size:.95rem}

/* ---------- Pricing blocks ---------- */
.cv-page .cv-alert{border-radius:12px;padding:12px 14px;font-size:.92rem;margin:0 0 12px;border:1px solid #CFE0FA;background:var(--cv-blue-soft);color:var(--cv-navy)}
.cv-page .cv-alert--warn{background:#FFF6E5;border-color:#E8D4A8;color:#5C4A1F}
.cv-page .cv-alert--err{background:#FDE8E8;border-color:#F5C2C2;color:#8B1E1E}
.cv-page .cv-alert a{font-weight:700;text-decoration:underline;color:inherit}
.cv-page .cv-price{font-size:1.9rem;font-weight:800;color:var(--cv-navy);margin:10px 0 2px;line-height:1.1}
.cv-page .cv-price small{font-size:.8rem;font-weight:600;color:var(--cv-muted)}
.cv-page .cv-strike{text-decoration:line-through;color:#6B7886;font-size:1rem;font-weight:600;margin-left:6px}
.cv-page .cv-offer{font-size:.85rem;font-weight:700;color:var(--cv-gold-ink);margin:0 0 4px}
.cv-page .cv-card ul.cv-list{list-style:none;margin:12px 0 14px;padding:0;flex:1}
.cv-page .cv-list li{position:relative;padding:7px 0 7px 24px;border-bottom:1px solid #EEF2F7;font-size:.9rem;color:var(--cv-ink)}
.cv-page .cv-list li::before{content:"✓";position:absolute;left:0;color:var(--cv-green);font-weight:800}
.cv-page .cv-list li.no{color:var(--cv-muted)}
.cv-page .cv-list li.no::before{content:"–";color:#8A97A6}
.cv-page .cv-card .cv-note{margin:8px 0 0}
.cv-table--wide{min-width:780px}
.cv-page .cv-table .cv-sec td{background:#EEF3FA;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--cv-navy)}
.cv-sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.14);vertical-align:-2px;margin-right:6px}
.cv-tpl-badge--guest{background:#E8EDF3;color:#334155}
.cv-tpl-badge--prem{background:#0B2540;color:#F3C96B}
.cv-page .cv-table td a{font-weight:700}

/* ---------- Overflow guards: nothing inside .cv-page may widen the page ---------- */
.cv-page{overflow-x:clip}
.cv-grid>*,.cv-tpl-grid>*,.cv-steps>*{min-width:0}
.cv-page img,.cv-page svg{max-width:100%}
.cv-page .cv-table-wrap{max-width:100%}

/* ---------- Service detail layout (/expert-services/{slug}) ---------- */
.cv-layout{display:block;padding-bottom:6px}
.cv-main{min-width:0}
.cv-page .cv-h2{font-size:clamp(1.25rem,4.6vw,1.6rem);font-weight:800;margin:32px 0 12px}
.cv-page .cv-info ul.cv-list{list-style:none;margin:10px 0 0;padding:0}
.cv-page .cv-answer{line-height:1.6}
.cv-page .cv-prose h2{font-size:clamp(1.2rem,4.4vw,1.5rem);font-weight:800}
.cv-page pre.cv-sample{font-family:inherit}
.cv-aside{display:none}
@media (min-width:980px){
  .cv-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
  .cv-aside{display:block;position:sticky;top:90px;margin-top:26px}
}
.cv-page .cv-prose p{margin:0 0 14px}

/* ---------- Compact page strip (used above app-style pages such as /builder/) ---------- */
.cv-strip{background:linear-gradient(160deg,#0B2540 0%,#133B66 100%);padding:10px 16px}
.cv-strip .cv-strip-in{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px}
.cv-strip .cv-strip-in h1{margin:0;font-size:1.05rem;line-height:1.25;font-weight:800;color:#fff}
.cv-strip .cv-strip-in p{margin:2px 0 0;font-size:.8rem;line-height:1.35;color:#D6E2F3}
.cv-strip nav{display:none}
.cv-strip nav a{color:#fff;font-size:.85rem;font-weight:700;text-decoration:underline;margin-left:16px}
@media (min-width:700px){.cv-strip .cv-strip-in h1{font-size:1.25rem}.cv-strip nav{display:block}}
.cv-below{padding-bottom:6px}

/* ---------- Guide / pillar pages (rail + prose) ---------- */
.cv-rail{margin-top:26px;min-width:0}
@media (min-width:980px){.cv-rail{position:sticky;top:90px}}
.cv-page .cv-rail .cv-rail-h{font-size:1rem;font-weight:800;margin:0 0 6px}
.cv-alist{list-style:none;margin:6px 0 12px;padding:0}
.cv-alist li{margin:0}
.cv-alist a{display:block;padding:8px 0;border-top:1px solid var(--cv-line);font-weight:600;font-size:.92rem;line-height:1.35;text-decoration:none}
.cv-alist li:first-child a{border-top:0}
.cv-alist a:hover{text-decoration:underline}
.cv-alist a.is-current{color:var(--cv-ink);font-weight:800}
.cv-prose .cv-table-wrap{margin:0 0 18px}
.cv-prose pre.cv-sample{margin:0 0 18px}
.cv-prose code{background:#F3F6FB;padding:1px 5px;border-radius:5px;font-size:.9em}
.cv-prose .cv-answer{margin:0 0 22px}
.cv-page .cv-hero .cv-lead strong{color:#fff}