:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f7f8;
  --surface-3:#f1f1f3;

  --text:#111111;
  --muted:#2f2f2f;

  --border:#c9c9c9;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);

  /* Orange accent (dark enough to read on white) */
  --accent:#b34700;
  --accent-2:#8a3600;

  --max:72rem;
  --radius:0.75rem;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
}

/* Links */
a{ color:var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:visited{ color:var(--accent); }
a:hover{ text-decoration: underline; }

/* Focus */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  padding:0.75rem 1rem;
  background:var(--surface);
  border:2px solid var(--accent);
  border-radius:0.5rem;
  z-index:9999;
}

/* Layout */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:1rem;
}

header{
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:0.75rem 0 0.5rem 0;
}

.brand .name{
  margin:0;
  font-weight:800;
  letter-spacing:0.2px;
  font-size:1.05rem;
}

.brand .tag{
  margin:0.25rem 0 0 0;
  color:var(--muted);
  font-size:0.95rem;
}

.badges{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-top:0.25rem;
}

.badge{
  display:inline-block;
  padding:0.25rem 0.5rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  font-size:0.85rem;
  color:var(--muted);
}

/* Nav */
.nav{
  list-style:none;
  padding:0;
  margin:0.5rem 0 1rem 0;
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}

.nav a{
  display:inline-block;
  padding:0.55rem 0.85rem;
  border:1px solid var(--border);
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  background:var(--surface);
  min-height:44px;            /* WCAG 2.2 target size-friendly */
  line-height: 1.1;
}

.nav a[aria-current="page"]{
  border-color:var(--accent);
  box-shadow: 0 0 0 2px rgba(179,71,0,0.18);
}

main{ padding:1.5rem 0 2.5rem 0; }

/* Hero */
.hero{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(1200px 260px at 0% 0%, rgba(179,71,0,0.12), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  padding:1.5rem;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:1.25rem;
  align-items:start;
}

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
}

.hero h1{
  margin:0 0 0.5rem 0;
  font-size:2.25rem;
  line-height:1.15;
  letter-spacing:-0.3px;
}

.lead{
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
  max-width:52rem;
}

.hero-actions{
  margin-top:1rem;
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}

.button{
  display:inline-block;
  padding:0.65rem 1rem;
  border:2px solid var(--accent);
  border-radius:0.75rem;
  background:var(--surface);
  color:var(--text);
  font-weight:800;
  text-decoration:none;
  min-height:44px;
}

.button:hover{ text-decoration:none; }

.button.secondary{
  border-color:var(--border);
  font-weight:700;
}

.hero-panel{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:1rem;
}

.hero-panel h2{
  margin:0 0 0.5rem 0;
  font-size:1rem;
}

.kv{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:0.5rem;
}

.kv li{
  display:flex;
  gap:0.5rem;
  align-items:baseline;
  padding:0.5rem;
  border-radius:0.5rem;
  background: var(--surface-2);
}

.kv b{ min-width: 7.5rem; }

/* Sections */
.section{
  margin-top:1.75rem;
}

.section h2{
  margin:0 0 0.75rem 0;
  font-size:1.35rem;
  letter-spacing:-0.2px;
}

/* Cards grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.card h3{
  margin:0 0 0.5rem 0;
  font-size:1.1rem;
}

.card p{
  margin:0;
  color:var(--muted);
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.step{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
  padding:1rem;
}

.step .num{
  display:inline-block;
  border:2px solid var(--accent);
  color:var(--text);
  background:var(--surface);
  border-radius:999px;
  padding:0.25rem 0.6rem;
  font-weight:800;
  margin-bottom:0.5rem;
}

/* Details/FAQ (accessible by default) */
details{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:0.75rem 1rem;
}

details + details{ margin-top:0.75rem; }

summary{
  cursor:pointer;
  font-weight:800;
}

summary:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px;
  border-radius:0.5rem;
}

/* Footer */
footer{
  border-top:1px solid var(--border);
  background: linear-gradient(0deg, var(--surface-2), var(--surface));
  padding:1.5rem 0;
  color:var(--muted);
  font-size:0.95rem;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0.75rem 0 0 0;
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}