/* Arclo shared stylesheet: design tokens, typography, buttons, section rhythm, footer.
   Homepage (index.html) keeps its own inline styles for now (no regression risk to what's
   already shipped) but should migrate to this file next time it's touched. Every new
   page under /guides/ and /blog/ uses this as its base. */

:root{
  --ink:#111827;
  --blue:#316BFF;
  --blue-soft:#EAF0FF;
  --cloud:#F5F7FA;
  --slate:#64748B;
  --line:#DCE2EA;
  --white:#FFFFFF;
  --max:640px;
  --max-article:680px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
}
h1,h2,h3,.wordmark{
  font-family:'Manrope',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}
p{margin:0;}
a{color:var(--blue);}
img{display:block;max-width:100%;}

.section{padding:64px 24px;}
.section-inner{max-width:var(--max);margin:0 auto;}
.bg-cloud{background:var(--cloud);}
.bg-white{background:var(--white);}
.bg-ink{background:var(--ink);}
.divider{height:1px;background:var(--line);max-width:var(--max);margin:0 auto;}

.btn{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  padding:14px 24px;
  border-radius:8px;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--blue);color:var(--white);}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink);}

@media (prefers-reduced-motion:no-preference){
  .btn-primary{transition:transform .12s ease;}
  .btn-primary:active{transform:translateY(1px);}
}

/* ---- Site header (guides/blog only; the homepage has its own minimal hero) ---- */
.site-header{
  padding:28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-article);
  margin:0 auto;
}
.site-header .logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;}
.site-header .logo-mark{width:26px;height:26px;}
.site-header .logo-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-0.02em;}
.site-header nav a{font-size:14.5px;font-weight:600;color:var(--slate);text-decoration:none;margin-left:22px;}
.site-header nav a:hover{color:var(--ink);}

/* ---- Article layout (guides + blog posts) ---- */
.breadcrumb{
  max-width:var(--max-article);
  margin:0 auto;
  padding:0 24px;
  font-size:13.5px;
  color:var(--slate);
}
.breadcrumb a{color:var(--slate);text-decoration:underline;}
.article-hero{padding:20px 24px 8px;}
.article-hero .section-inner{max-width:var(--max-article);}
.kicker{font-size:13.5px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;}
.article-hero h1{
  margin-top:14px;
  font-size:32px;
  line-height:1.15;
  max-width:20ch;
}
.byline{margin-top:18px;font-size:14.5px;color:var(--slate);}
.dek{margin-top:18px;font-size:19px;color:var(--slate);max-width:52ch;line-height:1.5;}
/* Standfirst under a blog h1. Same job as .dek, slightly tighter, and named
   for what it is on an essay rather than on a product page. */
.subtitle{margin-top:16px;font-size:1.15em;color:var(--slate);max-width:54ch;line-height:1.5;}

.prose{max-width:var(--max-article);margin:0 auto;padding:8px 24px 0;}
.prose h2{font-size:24px;margin-top:48px;margin-bottom:16px;line-height:1.25;}
.prose h3{font-size:19px;margin-top:32px;margin-bottom:12px;font-weight:700;letter-spacing:0;}
.prose p{margin-top:18px;font-size:17px;line-height:1.7;max-width:60ch;}
.prose ul,.prose ol{margin-top:18px;padding-left:22px;max-width:60ch;}
.prose li{margin-top:8px;font-size:17px;line-height:1.6;}
.prose a{text-decoration:underline;}
.prose strong{font-weight:700;}
.prose .lead{font-size:19px;color:var(--ink);}

/* FAQ and source list, used by the guide pages. A dl and a ul are the right
   markup here, and check.py reads the dt/dd pairs back to compare them against
   the FAQPage JSON-LD, so the structure is load-bearing and not just styling. */
.prose dl.faq{margin-top:24px;max-width:60ch;}
.prose dl.faq dt{margin-top:28px;font-weight:700;font-size:17px;line-height:1.5;}
.prose dl.faq dd{margin:8px 0 0;font-size:17px;line-height:1.7;color:var(--slate);}
/* Chart captions and the law-tracker table, both on /research/ pages. Both sit
   at the source-list scale, so a chart's provenance line, a statute row and a
   citation all read as the same kind of supporting text. */
.prose .chart-note{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--slate);max-width:60ch;}
.prose svg{display:block;margin-top:22px;max-width:100%;height:auto;}
/* The fifty-state law tracker: six columns, too wide for a phone. The wrapper
   scrolls horizontally and bleeds to the edges of the prose column so the
   scrollable area is obvious rather than clipped mid-sentence. The table itself
   is not display:block, so it stays a table for assistive technology. */
.prose .tracker-scroll{margin-top:22px;overflow-x:auto;}
/* Six columns and fifty rows do not fit the 680px reading column, where the
   table clips and every cell wraps to four lines. On a viewport wide enough
   to hold it, the wrapper breaks out of the column and centres on the page.
   Narrower than that, it stays in the column and scrolls. */
@media (min-width:1120px){
  .prose .tracker-scroll{position:relative;left:50%;transform:translateX(-50%);width:1024px;}
}
.prose table.tracker-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;}
.prose table.tracker-table th,.prose table.tracker-table td{padding:10px 16px 10px 0;text-align:left;vertical-align:top;border-top:1px solid var(--line);}
.prose table.tracker-table thead th{border-top:0;border-bottom:1px solid var(--ink);font-weight:700;color:var(--ink);white-space:nowrap;}
.prose table.tracker-table td{color:var(--slate);}
.prose table.tracker-table td:first-child{white-space:nowrap;font-weight:600;}
.prose table.tracker-table td:first-child a{color:var(--ink);text-decoration:none;}
.prose table.tracker-table td:first-child a:hover{color:var(--blue);}
@media (max-width:700px){
  .prose .tracker-scroll{margin-left:-24px;margin-right:-24px;padding:0 24px;}
  .prose table.tracker-table{min-width:760px;}
}

/* Per-state sources use native details/summary. No script, so the only thing
   needed here is to make the summary look like a control and sit at the same
   scale as the source list it opens. */
.prose details{margin-top:14px;}
.prose summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--slate);}
.prose summary:hover{color:var(--ink);}
.prose details[open] summary{margin-bottom:2px;}
.prose ul.sources{margin-top:18px;padding-left:20px;max-width:60ch;}
.prose ul.sources li{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--slate);}

.pull-quote{
  margin:36px 0;
  padding-left:20px;
  border-left:3px solid var(--blue);
}
.pull-quote p{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:22px;
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
  max-width:40ch;
}
.pull-quote cite{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-size:13.5px;
  font-weight:600;
  color:var(--slate);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.callout{
  margin:32px 0;
  padding:22px 24px;
  background:var(--blue-soft);
  border-radius:10px;
  max-width:60ch;
}
.callout p{margin-top:0;font-size:16px;color:var(--ink);}
.callout p + p{margin-top:10px;}

/* ---- Independence box (/providers/ fact sheets) ----
   Fixed text, first block in the prose and so above the article lede, on every
   provider fact sheet: who Arclo is not affiliated with, and what the sheet
   leaves out by policy. Boxed rather than run in with the body copy because a
   reader who reads one paragraph of a page about a named company's credit
   product should read this one. Quiet styling, not a warning colour: it states
   a standing position, it does not flag a problem with the provider. */
.prose .independence{
  margin-top:0;
  margin-bottom:8px;
  padding:18px 20px;
  background:var(--cloud);
  border:1px solid var(--line);
  border-radius:10px;
  max-width:60ch;
  font-size:15.5px;
  line-height:1.6;
  color:var(--slate);
}

.source-note{
  margin-top:14px;
  font-size:13px;
  font-style:italic;
  color:var(--slate);
}

.cta-band{
  margin-top:56px;
  padding:36px;
  background:var(--ink);
  border-radius:14px;
  max-width:var(--max-article);
  margin-left:auto;
  margin-right:auto;
}
.cta-band h3{color:var(--white);font-size:22px;margin-bottom:10px;}
.cta-band p{color:#C9D2DC;font-size:16px;max-width:48ch;}
.cta-band .btn{margin-top:20px;}

.related{max-width:var(--max-article);margin:56px auto 0;padding:0 24px;}
.related h3{font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;}
.related-list{margin-top:16px;display:flex;flex-direction:column;gap:14px;}
.related-list a{font-size:16px;font-weight:600;text-decoration:none;color:var(--ink);}
.related-list a:hover{color:var(--blue);}

/* ---- Hub lists (/guides, /research, /blog) ----
   blog/index.html still carries its own inline copy of the .hub-* rules; it is
   left alone by the foundation ticket. These are identical, so the two agree. */
/* Intro above a hub list, so a hub reads as a page and not a menu. Shares
   the hub-list column so the paragraph and the entries line up. */
.hub-intro{max-width:var(--max-article);margin:0 auto;padding:8px 24px 0;}
.hub-intro p{font-size:17px;line-height:1.7;color:var(--slate);max-width:60ch;}
.hub-list{max-width:var(--max-article);margin:0 auto;padding:8px 24px 64px;}
.hub-item{padding:28px 0;border-top:1px solid var(--line);}
.hub-item:last-child{padding-bottom:0;}
.hub-tag{font-size:12.5px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;}
.hub-item h2{font-size:21px;margin-top:8px;}
.hub-item h2 a{color:var(--ink);text-decoration:none;}
.hub-item h2 a:hover{color:var(--blue);}
.hub-item p{margin-top:8px;color:var(--slate);font-size:15.5px;max-width:56ch;}
.hub-date{font-size:13.5px;}
.hub-empty{max-width:var(--max-article);margin:0 auto;padding:8px 24px 64px;color:var(--slate);font-size:16px;}

/* ---- Footer (shared across every page) ---- */
/* A deliberately short page, the /research/ empty state above all, would
   otherwise end with white space below the dark footer. Column flex on body
   pins the footer to the bottom of the viewport. index.html has its own
   stylesheet and is unaffected.
   The width:100% is load-bearing. Most blocks here centre themselves with
   max-width plus margin:0 auto, and an auto margin on the cross axis switches
   off a flex item's default stretch, which collapses each one to its content
   width. Restoring the width puts them back to the block behaviour they were
   written for, and max-width plus auto margins still centre them. */
body{min-height:100vh;display:flex;flex-direction:column;}
body > *{width:100%;}
.footer{color:#C4CDD6;margin-top:auto;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.footer-icon{width:26px;height:26px;border-radius:6px;}
.footer-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--white);letter-spacing:-0.02em;}
.footer p{font-size:14px;line-height:1.6;color:#9AA7B2;max-width:52ch;}
.footer .meta{margin-top:20px;font-size:14px;color:#9AA7B2;}
.footer .meta a{color:#C4CDD6;text-decoration:underline;}
.footer .copyright{margin-top:24px;font-size:13px;color:#77828C;}

@media (min-width:640px){
  .section{padding:96px 32px;}
  .article-hero h1{font-size:44px;}
  .prose h2{font-size:28px;}
}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}