/* CleanScan site — v7 "Atelier" palette, shared across index/privacy/terms */

:root{
  --paper:#F1EFEB;
  --paper-2:#E7E4DD;
  --paper-3:#F8F7F4;
  --card:#FFFFFF;
  --ink:#16151A;
  --ink-2:#4B4A54;
  --ink-3:#6E6C78;
  --ink-4:#9A98A3;
  --blue:#3A6EA8;
  --blue-hi:#5D94D8;
  --blue-lo:#1F4471;
  --blue-wash:rgb(58 110 168 / .07);
  --blue-line:rgb(58 110 168 / .22);
  --line:rgb(30 26 22 / .085);
  --line-2:rgb(30 26 22 / .05);
  --line-3:rgb(30 26 22 / .15);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw:1120px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; gap:28px;
  height:64px;
}
.mark{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:650; letter-spacing:-.01em }
.mark .mark-icon{ width:28px; height:28px; border-radius:22.5%; box-shadow:0 1px 2px rgb(10 23 48 / .18) }
.head-nav{ display:flex; gap:22px; margin-left:auto; align-items:center }
.head-nav a{ text-decoration:none; font-size:14.5px; color:var(--ink-2); white-space:nowrap }
.head-nav a:hover{ color:var(--ink) }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:600; letter-spacing:.01em;
  padding:9px 18px; border-radius:999px;
  white-space:nowrap;
  border:1px solid var(--blue-lo);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(10 23 48 / .18);
  transition:transform .18s cubic-bezier(.16,1,.3,1), background .18s;
}
.btn:hover{ background:var(--blue-lo) }
.btn:active{ transform:translateY(1px) scale(.99) }
.btn.ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line-3); box-shadow:none;
}
.btn.ghost:hover{ background:var(--card) }

@media (max-width:600px){
  .site-head .wrap{ gap:14px }
  .head-nav{ gap:14px }
  .btn{ padding:8px 14px; font-size:13.5px }
  .mark{ font-size:15px }
}

/* ---------- typography ---------- */
.overline{
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue);
}
h1.display{
  font-family:var(--serif);
  font-weight:520;
  font-size:clamp(2.6rem, 6vw, 4.4rem);
  line-height:1.03;
  letter-spacing:-.015em;
}
h2.section{
  font-family:var(--serif);
  font-weight:540;
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing:-.01em;
  line-height:1.12;
}
.lede{ font-size:18px; color:var(--ink-2); max-width:52ch }

/* ---------- reveal cascade ---------- */
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.rise{ opacity:0; animation:rise .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i, 0) * 90ms) }
@media (prefers-reduced-motion: reduce){
  .rise{ animation:none; opacity:1 }
  .phone{ animation:none !important }
  html{ scroll-behavior:auto }
}

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line); margin-top:96px; background:var(--paper-2) }
.site-foot .wrap{
  padding:44px 24px 52px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;
}
.site-foot h4{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:14px }
.site-foot a{ display:block; text-decoration:none; font-size:14.5px; color:var(--ink-2); padding:3px 0 }
.site-foot a:hover{ color:var(--ink) }
.foot-note{ font-size:13px; color:var(--ink-4); margin-top:18px }
@media (max-width:760px){ .site-foot .wrap{ grid-template-columns:1fr; gap:28px } }

/* ---------- legal pages ---------- */
.legal{ padding:72px 24px 40px; max-width:760px; margin:0 auto }
.legal .overline{ margin-bottom:14px }
.legal h1{
  font-family:var(--serif); font-weight:540;
  font-size:clamp(2.1rem, 4.6vw, 3rem); letter-spacing:-.012em; line-height:1.08;
}
.legal .dateline{ margin-top:14px; font-size:14px; color:var(--ink-3) }
.legal .summary{
  margin:36px 0 0; padding:22px 26px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  font-size:15.5px; color:var(--ink-2);
  box-shadow:0 14px 30px -18px rgb(10 23 48 / .10);
}
.legal-body{ max-width:760px; margin:0 auto; padding:8px 24px 40px }
.legal-body section{ border-top:1px solid var(--line); padding:34px 0 6px }
.legal-body section:first-child{ border-top:0 }
.legal-body h2{
  font-family:var(--serif); font-weight:560; font-size:1.35rem; letter-spacing:-.008em;
  margin-bottom:12px;
}
.legal-body p, .legal-body li{ font-size:15.5px; color:var(--ink-2); max-width:65ch }
.legal-body p + p{ margin-top:12px }
.legal-body ul{ margin:12px 0 12px 20px }
.legal-body li{ margin:6px 0 }
.legal-body strong{ color:var(--ink); font-weight:600 }
.legal-body a{ color:var(--blue); text-decoration:none }
.legal-body a:hover{ text-decoration:underline }