:root {
  --paper:#FBF6EC;
  --paper-deep:#F2E5D3;
  --ink:#3A2A1E;
  --accent:#C2703D;
  --accent-deep:#A65328;
  --soft:rgba(58,42,30,0.66);
  --line:rgba(58,42,30,0.14);
  --card:rgba(255,255,255,0.52);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height:1.6;
}
a { color:var(--accent-deep); }
img { max-width:100%; }
.shell { width:min(1160px, calc(100% - 40px)); margin:0 auto; }
.article-shell { width:min(860px, calc(100% - 40px)); margin:0 auto; }
.site-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.brand { color:var(--ink); text-decoration:none; font-size:22px; font-weight:800; }
.brand span { color:var(--soft); font-weight:500; }
.nav-links { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:650; }
.nav-links a { color:var(--accent-deep); text-decoration:none; }
.eyebrow {
  margin:0 0 10px;
  color:var(--accent-deep);
  font-size:13px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
h1, .display {
  margin:0;
  font-family:"New York", Georgia, serif;
  font-weight:600;
  letter-spacing:-.035em;
}
.display { max-width:860px; font-size:clamp(48px, 7vw, 88px); line-height:.98; }
.intro { max-width:760px; margin:22px 0 0; color:var(--soft); font-size:20px; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 19px;
  border-radius:12px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-weight:700;
}
.button.secondary { background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.home-hero {
  display:grid;
  grid-template-columns:132px minmax(0, 1fr);
  gap:34px;
  align-items:center;
  padding:78px 0 68px;
}
.app-icon { width:132px; height:132px; border-radius:29px; box-shadow:0 18px 42px rgba(58,42,30,.16); }
.fact-row {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin-bottom:86px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
}
.fact { padding:21px 24px; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; }
.fact strong { display:block; font-size:17px; }
.fact span { display:block; margin-top:3px; color:var(--soft); font-size:14px; }
.site-section { padding:76px 0; border-top:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:50px; }
.section-head h2, .article-section h2 { margin:0; font-size:26px; line-height:1.2; }
.section-lead { max-width:780px; margin:0; font-size:21px; line-height:1.55; }
.feature-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:15px; margin-top:30px; }
.feature-card { padding:23px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.feature-card strong { display:block; margin-bottom:5px; font-size:17px; }
.feature-card p { margin:0; color:var(--soft); font-size:15px; }
.product-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:38px; }
.product-shot { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--paper-deep); box-shadow:0 12px 30px rgba(58,42,30,.09); }
.product-shot img { display:block; width:100%; height:auto; }
.dark-callout { padding:34px; border-radius:20px; background:var(--ink); color:var(--paper); }
.dark-callout h2 { margin:0 0 12px; font-size:28px; }
.dark-callout p { max-width:820px; margin:0; color:rgba(251,246,236,.78); font-size:17px; }
.dark-callout a { color:var(--paper); }
.page-hero { padding:74px 0 58px; }
.page-hero h1 { max-width:760px; font-size:clamp(46px, 7vw, 72px); line-height:1.02; }
.page-meta { margin-top:18px; color:var(--soft); font-size:14px; }
.article-lead { margin:0 0 34px; padding:27px 29px; border:1px solid var(--line); border-radius:18px; background:var(--card); font-size:19px; }
.article-section { padding:31px 0; border-top:1px solid var(--line); }
.article-section h2 { margin-bottom:11px; }
.article-section p, .article-section li { font-size:16px; }
.article-section p { margin:0 0 13px; }
.article-section ul { margin:0; padding-left:22px; }
.article-section li { margin-bottom:13px; }
.support-card { padding:30px; border-radius:20px; background:var(--ink); color:var(--paper); }
.support-card p { margin:0; color:rgba(251,246,236,.78); font-size:18px; }
.support-card a { color:var(--paper); }
.faq-list { display:grid; gap:14px; padding:40px 0 12px; }
.faq { padding:24px 26px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.faq h2 { margin:0 0 7px; font-size:18px; }
.faq p { margin:0; color:var(--soft); font-size:16px; }
.site-footer { display:flex; justify-content:space-between; gap:22px; padding:36px 0 52px; border-top:1px solid var(--line); color:var(--soft); font-size:14px; }
.site-footer a { color:var(--accent-deep); text-decoration:none; }
@media (max-width:800px) {
  .home-hero { grid-template-columns:88px minmax(0, 1fr); gap:20px; padding-top:56px; }
  .app-icon { width:88px; height:88px; border-radius:20px; }
  .fact-row { margin-bottom:62px; }
  .section-head { grid-template-columns:1fr; gap:20px; }
  .product-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px) {
  .shell, .article-shell { width:min(100% - 28px, 1160px); }
  .site-nav { align-items:flex-start; }
  .nav-links { gap:14px; }
  .nav-links .optional { display:none; }
  .home-hero { grid-template-columns:1fr; padding-bottom:54px; }
  .fact-row, .feature-grid, .product-grid { grid-template-columns:1fr; }
  .fact { border-right:0; border-bottom:1px solid var(--line); }
  .fact:last-child { border-bottom:0; }
  .site-section { padding:58px 0; }
  .page-hero { padding:56px 0 44px; }
  .article-lead, .support-card { padding:23px; }
  .site-footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }