:root { color-scheme:light; --ink:#213d32; --muted:#53645a; --paper:#f8f6ef; --line:#dcded2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:1.5rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 system-ui,sans-serif; }
a { color:inherit; text-underline-offset:.25em; }
a:focus-visible, summary:focus-visible { outline:3px solid #b36928; outline-offset:5px; }
.skip-link { position:absolute; left:1rem; top:-5rem; background:white; padding:.75rem; z-index:10; }
.skip-link:focus { top:1rem; }
.sj-front-header, main, .sj-front-footer { width:min(1120px, calc(100% - 3rem)); margin-inline:auto; }
.sj-front-header { display:flex; justify-content:space-between; align-items:center; min-height:88px; gap:1rem; }
.wordmark { font-size:1.45rem; font-weight:750; text-decoration:none; letter-spacing:-.05em; }
.wordmark span { color:#ac572f; }
nav { display:flex; gap:1.5rem; flex-wrap:wrap; }
nav a { font-size:.9rem; text-decoration:none; }
.sj-front-hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:5rem; padding:4rem 0 5rem; }
.eyebrow { font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; font-weight:650; color:var(--muted); }
h1,h2,h3 { line-height:1.15; letter-spacing:-.04em; }
h1 { font:500 clamp(2.75rem,5vw,4.5rem)/1.05 Georgia,serif; letter-spacing:-.04em; margin:1rem 0 1.5rem; max-width:9em; }
h2 { font-size:clamp(1.7rem,3vw,2.25rem); }
.sj-front-lead { font-size:1.1rem; max-width:32rem; margin-bottom:1.75rem; }
.sj-front-primary { display:inline-flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; border-radius:.5rem; padding:.85rem 1.3rem; font-weight:650; text-decoration:none; }
.sj-front-primary:hover { background:#315b49; }
.sj-front-auth { font-size:.8rem; color:var(--muted); margin:.75rem 0 1rem; }
.sj-front-secondary { font-size:.9rem; }
.sj-front-record { overflow:hidden; padding:2rem; background:#fffef9; border:1px solid var(--line); border-radius:1rem; box-shadow:0 16px 45px #213d3209; transform:rotate(1deg); }
.sj-front-record-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.8rem; }
.sj-front-record-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(8.5rem,.68fr); align-items:end; gap:.75rem; margin-top:1.35rem; }
.sj-front-record-copy { position:relative; z-index:1; min-width:0; }
.sj-demo-badge { display:inline-block; font-size:.7rem; font-weight:600; border:1px solid #cad5c7; border-radius:1rem; padding:.1rem .6rem; color:var(--muted); }
.sj-front-record h2 { font:500 2.5rem/1.1 Georgia,serif; margin:.8rem 0 1rem; }
.sj-front-record dl { font-size:.9rem; }
.sj-front-record dl div { display:grid; gap:.05rem; border-bottom:1px solid var(--line); padding:.6rem 0; }
.sj-front-record dd { margin:0; }
.sj-front-record p { font-size:.95rem; }
.sj-front-record small { color:var(--muted); }
.sj-front-seed { display:block; width:2rem; height:2.8rem; background:#648467; border-radius:80% 0 80% 0; }
.sj-front-record-art { display:block; align-self:end; justify-self:end; width:100%; max-width:10.5rem; height:auto; margin:-.75rem -.7rem -1.8rem 0; filter:drop-shadow(0 12px 13px #213d3217); transform:rotate(-2deg); }
.sj-front-example, .sj-front-tools { padding:3.5rem 0; border-top:1px solid var(--line); }
.sj-front-example-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.sj-front-example ul { padding-left:1.2rem; }
.sj-front-example li { padding:.5rem 0; }
.sj-front-example article { border-left:2px solid #a9bd9e; padding:0 0 0 1.5rem; }
.sj-front-example article h3 { font-size:1.25rem; }
.sj-front-proof { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:3.5rem 0; border-top:1px solid var(--line); }
.sj-front-proof img { width:100%; height:auto; aspect-ratio:1.7; object-fit:cover; border-radius:.75rem; }
.sj-front-tools nav { margin:1.5rem 0 2rem; }
.sj-front-tools nav a { border-bottom:1px solid var(--line); padding-bottom:.25rem; }
.sj-front-footer { border-top:1px solid var(--line); padding:2rem 0 3rem; font-size:.8rem; color:var(--muted); }
.sj-front-footer nav { margin-top:1rem; }
@media(max-width:700px) {
  .sj-front-header, main, .sj-front-footer { width:calc(100% - 2rem); }
  .sj-front-header { min-height:72px; flex-wrap:wrap; padding:.75rem 0; }
  nav { gap:1rem; }
  .sj-front-hero { grid-template-columns:1fr; gap:2.5rem; padding:1.5rem 0 3rem; }
  h1 { font-size:2.8rem; }
  .sj-front-primary { width:100%; }
  .sj-front-record { padding:1.5rem; transform:none; }
  .sj-front-record-body { grid-template-columns:minmax(0,1fr) minmax(6.5rem,.58fr); gap:.5rem; }
  .sj-front-record-art { margin:-.25rem -.4rem -1.3rem 0; }
  .sj-front-example-grid, .sj-front-proof { grid-template-columns:1fr; gap:1.5rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }