@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');

:root{color-scheme:light;--brand:#E55C1A;--ink:#071023;--muted:#526071;--line:#e2e8f0}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff 0%,#fff8f2 54%,#fff 100%)}a{color:inherit;text-decoration:none}.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.logo{height:38px;width:auto}.nav-links{display:flex;gap:22px;font-size:14px;font-weight:700;color:#475569}.hero{padding:70px 0 58px}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:56px;align-items:center}.eyebrow{display:inline-flex;color:var(--brand);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.hero h1{margin:22px 0 0;font-size:clamp(2.6rem,6vw,4.9rem);line-height:1.02;letter-spacing:-.055em}.intro{margin:24px 0 0;max-width:720px;color:var(--muted);font-size:18px;line-height:1.8}.visual{border:1px solid var(--line);border-radius:24px;background:#fff;padding:12px;box-shadow:0 30px 90px rgba(15,23,42,.12)}.visual img{display:block;width:100%;height:auto;border-radius:16px}.checks{display:grid;gap:12px;margin:30px 0 0;padding:0;list-style:none}.checks li{display:flex;gap:10px;color:#334155;font-weight:700}.checks li:before{content:"✓";display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px}.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:15px 22px;font-weight:800}.primary{background:var(--brand);color:#fff}.secondary{border:1px solid var(--line);background:#fff}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:46px 0}.cards article,.faq article,.detail-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:24px;box-shadow:0 20px 56px rgba(15,23,42,.055)}h2{font-size:27px;line-height:1.15;letter-spacing:-.035em;margin:0 0 12px}.cards p,.faq p,.detail-card p{color:var(--muted);line-height:1.75;margin:0}.details{display:grid;gap:18px;padding:32px 0}.detail-card{display:grid;grid-template-columns:.82fr 1.18fr;gap:42px;padding:36px}.detail-card ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}.detail-card li{border-radius:12px;background:#f8fafc;padding:14px 16px;font-weight:700;line-height:1.55;color:#334155}.detail-card li:before{content:"✓";color:var(--brand);font-weight:900;margin-right:10px}.faq-section{padding:44px 0}.faq-head{max-width:680px}.faq-grid{display:grid;gap:14px;margin-top:24px}.faq h3{margin:0 0 10px;font-size:18px}.related{padding:46px 0 72px}.related-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.related a{border:1px solid var(--line);border-radius:999px;background:#fff;padding:11px 16px;font-weight:800;color:#334155}.footer{border-top:1px solid var(--line);background:#fff;padding:30px 0;color:#64748b;font-size:14px}@media(max-width:860px){.hero-grid,.cards,.detail-card{grid-template-columns:1fr}.nav-links{display:none}.hero{padding-top:44px}.wrap{width:min(100% - 28px,1120px)}}
@media(max-width:860px){.nav{flex-wrap:wrap}.nav-links{display:flex;width:100%;flex-wrap:wrap;gap:12px}}


:root {
  --brand: #e55c1a;
  --ink: #111827;
  --muted: #526071;
  --line: #dfe4e9;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--ink);
  font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.wrap { width: min(1500px, calc(100% - 72px)); }

.nav {
  min-height: 88px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.logo { height: 36px; }
.nav-links { align-items: center; gap: 32px; color: #394455; font-weight: 600; }
.nav-links a:hover { color: var(--brand); }

.hero { padding: 86px 0 82px; }
.hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(42px, 6vw, 88px);
}
.eyebrow {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
}
.hero h1 {
  max-width: 650px;
  margin-top: 22px;
  font-size: clamp(2.9rem, 4.7vw, 4.3rem);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.intro {
  max-width: 620px;
  margin-top: 26px;
  color: #475569;
  font-size: 18px;
  line-height: 1.68;
}
.checks {
  max-width: 600px;
  gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.checks li {
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: #334155;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.checks li::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--brand);
  color: transparent;
  content: "";
}
.cta { align-items: center; gap: 26px; margin-top: 32px; }
.button {
  min-height: 50px;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
}
.button.primary { background: var(--brand); }
.button.primary:hover { background: #c94d13; }
.button.secondary {
  min-height: auto;
  border: 0;
  background: transparent;
  padding: 10px 0;
  color: var(--ink);
}
.button.secondary::after { content: " ↗"; color: var(--brand); }
.button.secondary:hover { color: var(--brand); }
.visual {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  box-shadow: none;
}
.visual img { border-radius: 5px; }

.cards {
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cards + .cards { margin-top: 64px; }
.cards article {
  min-height: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 31px 28px 35px;
  box-shadow: none;
}
.cards article:first-child { padding-left: 0; }
.cards article:last-child { border-right: 0; padding-right: 0; }
.cards h2 {
  max-width: 320px;
  margin-bottom: 13px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.cards p, .detail-card p, .faq p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.details { gap: 0; padding: 78px 0 20px; }
.detail-card, .detail-card:first-child {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 37px 0 45px;
  box-shadow: none;
}
.detail-card h2 { margin: 15px 0 16px; font-size: clamp(26px, 2.8vw, 35px); }
.detail-card:first-child p { color: var(--muted); }
.detail-card:first-child .eyebrow { color: var(--brand); }
.detail-card li, .detail-card:first-child li {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #334155;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
}
.detail-card li:first-child { border-top: 1px solid var(--line); }
.detail-card li::before {
  margin-right: 12px;
  color: var(--brand);
  content: "—";
}

.faq-section { padding: 72px 0 76px; border-top: 1px solid var(--line); }
.faq-head { max-width: 100%; }
.faq-head h2 { margin-top: 15px; font-size: clamp(30px, 3vw, 40px); }
.faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 52px; }
.faq article {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 23px 0 25px;
  box-shadow: none;
}
.faq h3 { margin-bottom: 8px; font-size: 17px; line-height: 1.45; }
.faq p a { color: #a54114; text-decoration: underline; text-underline-offset: 3px; }

.related { padding: 50px 0 84px; border-top: 1px solid var(--line); }
.related-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 52px;
  margin-top: 22px;
}
.related a {
  display: flex;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 17px 0;
  color: var(--ink);
  font-weight: 600;
}
.related a::after { content: "↗"; color: var(--brand); }
.related a:hover { color: var(--brand); }
.footer { padding: 28px 0; background: #f8fafc; line-height: 1.7; }
.footer a:hover { color: var(--brand); }

@media (max-width: 900px) {
  .hero-grid, .detail-card, .detail-card:first-child { grid-template-columns: 1fr; }
  .hero-grid { gap: 42px; }
  .visual { max-width: 700px; }
  .cards { grid-template-columns: 1fr; }
  .cards article, .cards article:first-child, .cards article:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 25px 0;
  }
  .cards article:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .wrap { width: min(100% - 36px, 1500px); }
  .nav { min-height: 72px; padding: 14px 0; }
  .logo { height: 32px; }
  .nav-links {
    width: 100%;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    padding-top: 10px;
    white-space: nowrap;
    font-size: 13px;
  }
  .hero { padding: 56px 0 62px; }
  .hero h1 { font-size: clamp(2.15rem, 8.4vw, 2.8rem); }
  .intro { font-size: 16px; }
  .cta { gap: 16px; }
  .faq-grid, .related-links { grid-template-columns: 1fr; }
  .details { padding-top: 60px; }
  .faq-section { padding: 60px 0; }
  .related { padding: 45px 0 65px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.practical { padding: 55px 0 70px; }
.practical > .cards { margin-top: 22px; }
.references { margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.references a { color: #a54114; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.footer a { margin-left: 12px; text-decoration: underline; }

@media (min-width: 901px) {
  .cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}