@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme:light;
  --paper:#fbfaf7;
  --card:#ffffff;
  --ink:#1b1b21;
  --muted:#5f5f6a;
  --ghost:#8c8c97;
  --line:rgba(20,20,30,.10);
  --line-strong:rgba(20,20,30,.18);
  --red:#dc2626;
  --red-dark:#b91c1c;
  --red-soft:rgba(220,38,38,.08);
  --serif:'Crimson Pro',Georgia,'Times New Roman',serif;
  --sans:'Crimson Pro','Fraunces',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{
  margin:0;background:
    radial-gradient(900px 460px at 82% -140px,rgba(220,38,38,.08),transparent 62%),
    var(--paper);
  color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,textarea,select{font:inherit}
a{color:inherit}
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.top{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav{min-height:62px;display:flex;align-items:center;gap:22px}
.brand{font:800 1.18rem/1 var(--serif);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand em{font-style:normal;color:var(--red)}
.links{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.82rem;font-weight:750;color:var(--muted)}
.links a{text-decoration:none}
.links a:hover{color:var(--red)}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:34px;align-items:center;padding:72px 0 56px}
.eyebrow{margin:0 0 14px;font:700 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.02em;color:var(--ink)}
h1{max-width:760px;margin:0 0 18px;font-size:clamp(2.55rem,6vw,4.9rem);line-height:.98;font-weight:800}
h2{margin:0 0 16px;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.08;font-weight:700}
h3{margin:0 0 10px;font-size:1.2rem;line-height:1.2;font-weight:700}
p{font-size:1.04rem;color:var(--muted)}
.hero p{max-width:680px;font-size:clamp(1.08rem,2vw,1.28rem)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border-radius:10px;background:var(--red);color:#fff;text-decoration:none;font-weight:800;border:1px solid var(--red);box-shadow:0 12px 26px -18px rgba(185,28,28,.8)}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn.secondary:hover{border-color:rgba(220,38,38,.36);color:var(--red)}
.panel,.card,.step,.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(20,20,30,.04),0 18px 42px -30px rgba(20,20,30,.28)}
.panel{padding:24px}
.score{display:grid;gap:12px}
.score div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.score div:last-child{border-bottom:0}
.score strong{font:800 1.4rem/1 var(--serif);color:var(--red)}
.score span{color:var(--muted);font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px auto 52px}
.two.grid{grid-template-columns:1fr 1fr}
.card{display:block;padding:22px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:rgba(220,38,38,.38);transform:translateY(-1px)}
.card b{display:block;margin-bottom:7px;font:700 1.05rem/1.25 var(--serif)}
.card span{display:block;color:var(--muted);font-size:.93rem;line-height:1.5}
.steps{display:grid;gap:10px}
.step{padding:16px 18px;color:var(--muted)}
.mini-tool textarea,.mini-tool input[type="range"]{width:100%}
.mini-tool textarea{resize:vertical;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:12px;line-height:1.5}
.mini-tool label{display:block;margin-bottom:8px;font:700 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.mini-tool button{width:100%;margin:10px 0 0;border:0;border-radius:10px;background:var(--ink);color:#fff;padding:11px 14px;font-weight:800;cursor:pointer}
.output{margin-top:12px;border-left:3px solid var(--red);background:var(--red-soft);padding:12px 14px;color:var(--ink);font-size:.94rem;line-height:1.5}
.faq{padding-bottom:52px}
.faq details{padding:16px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:800;color:var(--ink)}
.faq p{font-size:.96rem;margin-bottom:0}
.footer{padding:26px 0 54px;border-top:1px solid var(--line);color:var(--ghost);font-size:.9rem}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--red)}
@media(max-width:820px){
  .hero,.grid,.two.grid{grid-template-columns:1fr}
  .links{gap:10px;font-size:.78rem}
  .hero{padding:52px 0 42px}
}
@media(max-width:580px){
  .wrap{width:min(100% - 28px,1120px)}
  .nav{align-items:flex-start;flex-direction:column;padding:14px 0}
  .links{margin-left:0}
}