/* Public website styles for restorable.cloud. One stylesheet, no framework, no build
   step (ADR 0032). Design tokens first, then layout, then components, then the prose
   styles the legal pages use, then the responsive rules. Keep this file small. */

/* ---------- Tokens ---------- */
:root {
  --ink: #14161a;
  --ink-2: #33383f;
  --muted: #565b62;
  --line: #e2e6ec;
  --line-2: #edf0f5;
  --bg: #fff;
  --panel: #f6f8fb;
  --brand: #2f5bea;
  --brand-deep: #1f3fb0;
  --brand-tint: #eaeffe;
  --good: #0e6f4c;
  --warn: #8a5300;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 8px 24px -16px rgba(20, 22, 26, .18);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.6 var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.018em; margin: 0 0 12px; font-weight: 650; }
h1 { font-size: clamp(27px, 3.6vw, 37px); }
h2 { font-size: clamp(21px, 2.5vw, 28px); }
h3 { font-size: 17px; letter-spacing: -0.008em; }
p { margin: 0 0 14px; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); }
code { font: 0.875em/1.4 var(--mono); background: var(--panel); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; }
img, svg { max-width: 100%; }
/* Grid items default to min-width:auto, which lets an SVG's intrinsic width force a
   track wider than the viewport. Every grid child here is allowed to shrink instead. */
.cols > *, .split > *, .grid > *, .steps > li, .feats > li, .tiers > * { min-width: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--brand); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none; font-weight: 600;
  transition: top .12s;
}
.skip:focus { top: 0; color: #fff; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* ---------- Header and nav ---------- */
header.top { border-bottom: 1px solid var(--line); background: var(--bg); }
header.top .bar { display: flex; align-items: center; gap: 16px; min-height: 66px; }
.logo {
  display: inline-flex; align-items: center; gap: 9px; margin-right: auto;
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.logo svg { display: block; }
nav.site { display: flex; align-items: center; gap: 4px; }
nav.site a {
  color: var(--ink-2); text-decoration: none; font-size: 15px;
  padding: 8px 11px; border-radius: var(--r-sm);
}
nav.site a:hover { color: var(--ink); background: var(--panel); }
nav.site a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; }
nav.site a.btn { margin-left: 6px; }
.navtoggle {
  display: none; align-items: center; gap: 8px;
  font: 600 15px/1 var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; cursor: pointer;
}
.navtoggle:hover { background: var(--panel); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  padding: 12px 20px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600; font-size: 16px;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--brand-deep); border-color: #c3d0f7; }
.btn.ghost:hover { background: var(--brand-tint); color: var(--brand-deep); }
nav.site .btn { padding: 9px 15px; font-size: 15px; }

/* ---------- Sections ---------- */
main > section { padding: 52px 0; border-top: 1px solid var(--line-2); }
main > section:first-child { border-top: 0; }
section.alt { background: var(--panel); border-top-color: var(--line); }
.sechead { max-width: 660px; margin-bottom: 28px; }
.sechead p { color: var(--muted); margin: 0; font-size: 17px; }
.eyebrow {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-deep); margin-bottom: 10px;
}

/* ---------- Hero ---------- */
.hero { padding: 60px 0 56px; }
.hero .cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(30px, 4.3vw, 46px); letter-spacing: -0.026em; margin-bottom: 16px; }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); margin-bottom: 26px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.herofig { margin: 0; }
.herofig svg { display: block; width: 100%; height: auto; }

/* ---------- Cards and grids ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card p + p { margin-top: 10px; }
.ico { color: var(--brand); margin-bottom: 12px; display: block; }
.ico svg { display: block; }

/* Numbered steps */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.steps li::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-bottom: 12px;
  background: var(--brand-tint); color: var(--brand-deep);
  border-radius: 50%; font-size: 14px; font-weight: 700;
}
.steps h3 { margin: 0 0 6px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Tiers ---------- */
.tiers { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tier { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: var(--bg); box-shadow: var(--shadow); }
.tier .runs { color: var(--brand-deep); font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.tier ul { padding-left: 20px; margin: 0; color: var(--muted); font-size: 15px; }
.tier li + li { margin-top: 6px; }

/* ---------- Feature list with inline icons ---------- */
.feats { display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); list-style: none; padding: 0; margin: 0; }
.feats li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; }
.feats .ico { margin: 2px 0 0; }
.feats h3 { margin: 0 0 4px; }
.feats p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Layout utilities ---------- */
.split { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.stack { display: grid; gap: 18px; grid-template-columns: 1fr; }
.mt { margin-top: 24px; }
.lead-sm { font-size: 18px; color: var(--muted); max-width: 640px; }

/* ---------- Callouts ---------- */
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  background: var(--panel); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 18px; margin: 0 0 20px;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }
.draft { border-left-color: var(--warn); background: #fdf8ef; border-color: #f0e2c8; }
.draft h2 { font-size: 17px; margin-bottom: 8px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 16px 40px 16px 0; position: relative;
  font-weight: 600; font-size: 17px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 23px;
  width: 9px; height: 9px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--brand-deep); }
.faq .a { padding: 0 40px 16px 0; color: var(--muted); }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- Prose (legal and reference pages) ---------- */
.pagehead { padding: 44px 0 8px; }
.pagehead + section { border-top: 0; padding-top: 22px; }
.pagehead p.lead { font-size: 18px; color: var(--ink-2); max-width: 720px; margin: 0; }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.crumbs a { color: var(--muted); }
.prose { max-width: 760px; padding-bottom: 56px; }
.prose h2 { margin: 34px 0 10px; font-size: 22px; }
.prose h3 { margin: 22px 0 8px; font-size: 17px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li + li { margin-top: 6px; }
.prose li > ul, .prose li > ol { margin-top: 6px; }
.prose dt { font-weight: 650; margin-top: 14px; }
.prose dd { margin: 4px 0 0; color: var(--muted); }
.prose .ph { background: #fdf3e0; border-bottom: 1px dashed #c99a3c; padding: 0 3px; font-style: normal; }
.tablewrap { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 480px; }
caption { text-align: left; font-size: 14px; color: var(--muted); padding-bottom: 8px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 650; background: var(--panel); }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--line); background: var(--panel); padding: 40px 0 32px; font-size: 14px; }
footer.site .cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
footer.site h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li + li { margin-top: 7px; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--brand-deep); text-decoration: underline; }
footer.site .fine { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
footer.site .fine p { margin: 0 0 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero .cols { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 44px 0 40px; }
  .herofig { order: 2; width: 100%; max-width: 460px; }
}
@media (max-width: 720px) {
  .navtoggle { display: inline-flex; }
  nav.site {
    display: none; position: absolute; left: 0; right: 0; top: 66px; z-index: 10;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px 16px 16px; box-shadow: var(--shadow);
  }
  nav.site.open { display: flex; }
  header.top { position: relative; }
  nav.site a { padding: 12px 10px; font-size: 16px; }
  nav.site a.btn { margin: 8px 0 0; }
  main > section { padding: 40px 0; }
  .cta .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}