:root{
  --bg:#f6f1e8; --bg2:#ece5d8; --ink:#1b1713; --muted:#6b6258; --line:#d9cfbf;
  --card:#fffdf8; --amber:#c9801a; --amber-ink:#fff; --teal:#17756d;
  --paper:#fffef9; --r:16px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14110f; --bg2:#1c1814; --ink:#f3ece0; --muted:#a49a8c; --line:#2f2922;
    --card:#1b1713; --amber:#e8a33d; --amber-ink:#14110f; --teal:#4fc3b6;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:9}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(16px,4vw,48px);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav nav{display:flex;gap:20px;align-items:center}
.nav nav a{text-decoration:none;font-size:15px;color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;text-decoration:none;font-size:18px}
.mark{width:22px;height:22px;border-radius:6px;background:var(--amber);position:relative}
.mark::after{content:"";position:absolute;inset:6px 4px auto;height:2px;background:var(--amber-ink);box-shadow:0 5px 0 var(--amber-ink),0 10px 0 -0px transparent}

.btn{display:inline-block;background:var(--amber);color:var(--amber-ink)!important;font-weight:600;
  padding:12px 22px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:600}
.btn:hover{filter:brightness(1.07)}
.btn-sm{padding:7px 16px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink)!important;border-color:var(--line)}
.nav nav .btn{color:var(--amber-ink)}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center;
  padding:clamp(40px,8vw,110px) clamp(16px,4vw,48px);max-width:1200px;margin:0 auto}
.eyebrow{font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--amber);margin:0 0 14px}
h1{font:700 clamp(44px,7vw,92px)/.98 var(--serif);letter-spacing:-.035em;margin:0 0 22px}
h1 em{font-style:italic;color:var(--amber)}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:52ch;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

.stage{position:relative;perspective:1200px;display:flex;flex-direction:column;align-items:center}
#fx{width:min(100%,380px);height:520px;display:block;touch-action:manipulation}
.stage-note{font:12px var(--mono);color:var(--muted);margin:10px 0 0}

/* receipt card — also the no-canvas fallback */
.receipt{width:100%;background:var(--paper);color:#201b16;border-radius:6px;padding:22px 22px 20px;
  font-family:var(--mono);font-size:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.05);
  transition:transform .15s ease-out;transform:rotate(-1.5deg)}
.receipt header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.chip{background:#201b16;color:#fffef9;border-radius:999px;padding:2px 10px;font-size:12px}
.status{font-size:12px;color:#8a7d6c}
.receipt h3{margin:4px 0 2px;font:700 20px var(--mono);letter-spacing:-.02em}
.meta{margin:0 0 14px;font-size:11px;color:#8a7d6c}
.receipt table{width:100%;border-collapse:collapse}
.receipt td{padding:5px 0;border-bottom:1px dashed #d9cfbf}
.receipt td:last-child{text-align:right}
.receipt .sub td{color:#6b6258}
.receipt .tot td{font-weight:700;border-bottom:0;padding-top:10px;font-size:16px}
.check{color:#17756d;margin:12px 0;font-weight:600}
.receipt .btn{color:#fff!important}
.receipt.faded{filter:contrast(.45) brightness(1.15) sepia(.4)}
.no-canvas #fx{height:auto}
.no-canvas .receipt{transform:rotate(-1.5deg)}

.section{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(16px,4vw,48px)}
.section-head{margin-bottom:32px}
h2{font:700 clamp(30px,4vw,48px)/1.08 var(--serif);letter-spacing:-.025em;margin:0}
.sub{color:var(--muted);margin:10px 0 0}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;
  transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--muted)}
.card h3{font:700 26px var(--serif);margin:6px 0 10px;letter-spacing:-.02em}
.card p{color:var(--muted);margin:0 0 14px}
.card ul{margin:0 0 18px;padding-left:18px}
.card li{margin:4px 0}
.card.feature{grid-row:span 1}
.card.feature[data-tone="amber"]{border-top:4px solid var(--amber)}
.card.feature[data-tone="teal"]{border-top:4px solid var(--teal)}
.tag{display:inline-block;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin:0!important}
.tag.dim{color:var(--muted)}
.link{font-weight:600;text-decoration:none;color:var(--amber)}
.link:hover{text-decoration:underline}

.lab{background:var(--bg2);max-width:none}
.lab>*{max-width:1104px;margin-inline:auto}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{border:1px dashed var(--muted);border-radius:999px;padding:8px 18px;color:var(--muted)}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.trio h3{font:700 20px var(--serif);margin:0 0 8px}
.trio p{color:var(--muted);margin:0}

.contact{text-align:center}
.contact p{color:var(--muted);margin:12px 0 24px}
footer{display:flex;justify-content:space-between;padding:28px clamp(16px,4vw,48px);border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer a{text-decoration:none}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .grid,.trio{grid-template-columns:1fr}
  .nav nav a:not(.btn){display:none}
  #fx{height:500px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}