/* ---------------------------------------------------------------------------
   KC Home Offers - shared styles for generated article pages.

   The token names and values match the landing page exactly, so an article
   looks like part of the same site. Theming hangs off data-kcho (not
   data-theme) for the same reason it does there: some hosts stamp data-theme
   on the root element and would override the page's own choice.

   LIGHT IS THE DEFAULT. Dark only applies with an explicit data-kcho="dark".
--------------------------------------------------------------------------- */

:root{
  --ground:#F1F5FA;
  --surface:#FFFFFF;
  --surface-2:#E7EEF7;
  --ink:#071F38;
  --ink-soft:#2A4260;
  --muted:#526986;
  --line:#D3DEEC;
  --line-strong:#B6C7DB;
  --brand:#004D9F;
  --brand-hover:#003C7D;
  --bright:#0678BE;
  --bright-soft:#E3EFFA;
  --electric:#0FA5F5;
  --deep:#FFFFFF;
  --deep-2:#E9F2FC;
  --deep-ink:#0B2842;
  --deep-muted:#546B88;
  --dk-rgb:7,31,56;
  --dk-strong:#071F38;
  --dk-bar:#E9F2FC;
  --dk-accent:#0A72B8;
  --dk-btn:#004D9F;
  --dk-btn-ink:#FFFFFF;
  --dk-btn-hover:#003C7D;
  --dk-head-shadow:0 1px 0 rgba(7,31,56,.05),0 16px 32px -28px rgba(7,31,56,.6);
  --mark:url(/assets/logo-navy.png);
  --shadow:0 1px 2px rgba(7,31,56,.05),0 14px 34px -18px rgba(7,31,56,.30);
  --shadow-lift:0 2px 4px rgba(7,31,56,.06),0 26px 56px -24px rgba(7,31,56,.45);
  --radius:5px;
}
:root[data-kcho="dark"]{
  --ground:#06121F;
  --surface:#0C1D2E;
  --surface-2:#12283E;
  --ink:#E7EFF9;
  --ink-soft:#C2D4E7;
  --muted:#90A6BF;
  --line:#1B3148;
  --line-strong:#294662;
  --brand:#1472CE;
  --brand-hover:#2D87DE;
  --bright:#57B4F2;
  --bright-soft:#0F2839;
  --electric:#47B6F7;
  --deep:#030C16;
  --deep-2:#08192B;
  --deep-ink:#E4EEFA;
  --deep-muted:#93AAC2;
  --dk-rgb:255,255,255;
  --dk-strong:#FFFFFF;
  --dk-bar:#030C16;
  --dk-accent:#47B6F7;
  --dk-btn:#FFFFFF;
  --dk-btn-ink:#051D33;
  --dk-btn-hover:#E3EFFA;
  --dk-head-shadow:none;
  --mark:url(/assets/logo-white.png);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 18px 40px -22px rgba(0,0,0,.85);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 30px 60px -26px rgba(0,0,0,.95);
}

*{box-sizing:border-box}
/* The hidden attribute must beat any display rule. Without this a card with
   display:flex stays visible when JS hides it, and pagination does nothing. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);margin:0;
  font-family:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:Archivo,Helvetica,Arial,sans-serif;font-weight:800;
  letter-spacing:-.022em;line-height:1.15;margin:0;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{width:min(1180px,calc(100% - 44px));margin-inline:auto}

/* ---------- masthead ---------- */
.topbar{background:var(--dk-bar);color:var(--deep-muted);font-size:12.5px;border-bottom:1px solid rgba(var(--dk-rgb),.07)}
.topbar__in{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;padding-block:9px}
.topbar a{color:var(--deep-muted)}
.topbar a:hover{color:var(--dk-strong)}
.topbar__spacer{flex:1}
.topbar__tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.topbar__soc{display:flex;gap:13px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em}
.head{position:sticky;top:0;z-index:60;background:var(--deep);box-shadow:var(--dk-head-shadow);border-bottom:1px solid rgba(var(--dk-rgb),.09)}
.head__in{display:flex;align-items:center;gap:26px;height:76px}
.logo{display:flex;align-items:center;gap:11px;flex:none;color:var(--dk-strong)}
.logo:hover{text-decoration:none}
.logo__mark{display:block;width:46px;height:40px;flex:none;background:var(--mark) no-repeat left center/contain}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__kc{font-family:Archivo,Helvetica,Arial,sans-serif;font-stretch:120%;font-weight:800;font-size:21px;letter-spacing:.005em}
.logo__sub{font-family:"IBM Plex Mono",monospace;font-size:8.5px;font-weight:600;letter-spacing:.22em;color:var(--dk-accent);margin-top:4px}
.nav{display:flex;align-items:center;gap:1px;margin-left:auto}
.nav a{color:var(--deep-ink);font-size:13px;font-weight:500;padding:9px;border-radius:var(--radius);opacity:.82;white-space:nowrap}
.nav a:hover{opacity:1;background:rgba(var(--dk-rgb),.08);text-decoration:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14.5px;font-weight:600;padding:13px 22px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:var(--brand);color:#FFFFFF}
.btn--primary:hover{background:var(--brand-hover);box-shadow:0 10px 22px -12px rgba(0,77,159,.8)}
.btn--electric{background:var(--electric);color:#04121F}
.btn--electric:hover{background:#43BAFF;box-shadow:0 10px 26px -10px rgba(15,165,245,.6)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--onDeepGhost{background:transparent;color:var(--dk-strong);border-color:rgba(var(--dk-rgb),.35)}
.btn--onDeepGhost:hover{border-color:var(--dk-strong);background:rgba(var(--dk-rgb),.07)}
.btn--onDeep{background:var(--dk-btn);color:var(--dk-btn-ink)}
.btn--onDeep:hover{background:var(--dk-btn-hover)}
.btn--sm{padding:10px 16px;font-size:13.5px}
.btn--wide{width:100%}
.tgl{
  flex:none;display:inline-grid;place-items:center;width:40px;height:40px;
  padding:0;border-radius:50%;cursor:pointer;background:transparent;
  color:var(--dk-strong);border:1px solid rgba(var(--dk-rgb),.24);
  transition:background .18s ease,border-color .18s ease;
}
.tgl:hover{background:rgba(var(--dk-rgb),.08);border-color:rgba(var(--dk-rgb),.45)}
.tgl__ic{display:block;width:18px;height:18px;position:relative}
.tgl__ic svg{width:18px;height:18px;position:absolute;inset:0;transition:opacity .25s ease,transform .4s ease}
.tgl__sun{opacity:0;transform:rotate(-70deg) scale(.4)}
.tgl__moon{opacity:1;transform:none}
:root[data-kcho="dark"] .tgl__sun{opacity:1;transform:none}
:root[data-kcho="dark"] .tgl__moon{opacity:0;transform:rotate(70deg) scale(.4)}

/* ---------- article ---------- */
.art{background:var(--surface);border-bottom:1px solid var(--line)}
.art__in{width:min(760px,calc(100% - 44px));margin-inline:auto;padding-block:54px 72px}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bright);margin-bottom:18px}
.crumb a{color:inherit}
.art h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:18px}
.art__meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--muted);padding-bottom:26px;border-bottom:1px solid var(--line)}
.art__hero{margin:30px 0 8px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.art__hero img{display:block;width:100%;height:auto}
.art__lede{font-size:18.5px;color:var(--ink-soft);margin:26px 0 0}

/* the article body itself */
.prose{font-size:17px;line-height:1.75;color:var(--ink-soft)}
.prose h2{font-size:clamp(23px,2.7vw,31px);margin:44px 0 14px;color:var(--ink)}
.prose h3{font-size:20.5px;margin:32px 0 10px;color:var(--ink)}
.prose h4{font-size:17.5px;margin:26px 0 8px;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px}
.prose li{margin-bottom:9px}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose img{border-radius:8px;margin:22px 0;box-shadow:var(--shadow)}
.prose figure{margin:26px 0}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
.prose blockquote{
  margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--electric);
  color:var(--ink);font-size:18px;
}
.prose code{
  font-family:"IBM Plex Mono",monospace;font-size:.88em;
  background:var(--surface-2);padding:2px 6px;border-radius:4px;
}
.prose pre{background:var(--surface-2);padding:16px 18px;border-radius:8px;overflow-x:auto;margin:0 0 20px}
.prose pre code{background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.prose th{background:var(--surface-2);font-weight:600;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.tablewrap{overflow-x:auto}

/* ---------- faq ---------- */
.faq{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.faq h2{font-size:26px;margin-bottom:20px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--bright);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:12px 0 0;color:var(--muted);font-size:15.5px}

/* ---------- cta + index ---------- */
.cta{background:var(--deep-2);border-radius:10px;padding:32px;margin-top:52px;text-align:center}
.cta h2{font-size:24px;margin-bottom:10px}
.cta p{color:var(--muted);margin:0 0 20px;font-size:15px}

.hero{background:var(--deep);color:var(--deep-ink);border-bottom:1px solid var(--line)}
.hero__in{padding-block:60px 50px}
.hero h1{font-size:clamp(32px,4.6vw,52px);color:var(--dk-strong);margin-bottom:16px}
.hero p{color:var(--deep-muted);font-size:17.5px;max-width:56ch;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;padding-block:52px}
.card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-strong);text-decoration:none}
.card__img{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:19px 20px 22px;display:flex;flex-direction:column;flex:1}
.card__t{font-family:Archivo,Helvetica,Arial,sans-serif;font-weight:700;font-size:17.5px;line-height:1.3;color:var(--ink);margin-bottom:9px}
.card__d{font-size:14px;color:var(--muted);margin:0 0 16px;flex:1}
.card__m{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bright)}
.empty{padding:70px 0;text-align:center;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--line)}
.foot__in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;padding-block:34px}
.foot__c{font-size:13px;color:var(--muted);margin-left:auto}
.foot .logo{color:var(--ink)}

@media (max-width:760px){
  .head__in{gap:12px;height:66px}
  .logo__kc{font-size:18px}
  .art__in{padding-block:34px 52px}
  .prose{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card,.tgl,.tgl__ic svg{transition:none}
}

/* ---------- nav bits used by the guides pages ---------- */
.nav__div{width:1px;height:20px;background:rgba(var(--dk-rgb),.16);margin-inline:7px;flex:none}
.nav .ext{font-size:10px;opacity:.6;margin-left:4px}
.nav a[aria-current="page"]{opacity:1;color:var(--dk-accent)}

/* ---------- mobile menu (mirrors the landing page masthead) ---------- */
.burger{display:none;margin-left:auto;background:transparent;border:1px solid rgba(var(--dk-rgb),.24);border-radius:var(--radius);padding:9px 11px;cursor:pointer;color:var(--dk-strong)}
.mob{display:none;background:var(--deep-2);border-bottom:1px solid rgba(var(--dk-rgb),.09)}
.mob.is-open{display:block}
.mob__in{display:flex;flex-direction:column;padding-block:8px 22px}
.mob a{color:var(--dk-strong);padding:13px 2px;font-size:15px;font-weight:500;border-bottom:1px solid rgba(var(--dk-rgb),.1)}
.mob .btn{margin-top:18px}

/* Same breakpoint the landing page uses. The full nav is eleven items wide and
   stops fitting here; below it the burger takes over. */
@media (max-width:1280px){
  .nav{display:none}
  .burger{display:block;margin-left:0}
  .tgl{margin-left:auto}
  .head__in{gap:12px}
}

/* the topbar tag and socials are the first things to go on a phone */
@media (max-width:700px){
  .topbar__tag,.topbar__soc{display:none}
}