:root{
  --bg:#f6f1e8; --surface:#fffdf9; --surface-2:#fbf6ee;
  --ink:#171614; --muted:#6b645c; --muted-2:#8a8278;
  --border:rgba(23,22,20,.10); --border-2:rgba(23,22,20,.06);
  --shadow:0 18px 50px rgba(23,22,20,.08);
  --shadow-soft:0 10px 30px rgba(23,22,20,.06);
  --radius-lg:22px; --radius-md:16px; --radius-sm:12px;
  --accent:#3a3128; --accent-2:#51463b;
  --success:#3f5a4c; --danger:#6a3a33;
  --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px; --s6:32px; --s7:44px; --s8:60px; --s9:84px;
  --max:1120px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 50% -220px, rgba(58,49,40,.08), transparent 60%),
    radial-gradient(900px 540px at 0% 18%, rgba(81,70,59,.06), transparent 58%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
.wrap{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }
@media (min-width:720px){ .wrap{ width:min(var(--max), calc(100% - 72px)); } }
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(246,241,232,.78);
  border-bottom:1px solid var(--border-2);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:12px 0; }
.brand{ display:inline-flex; align-items:baseline; gap:10px; min-width:160px; }
.brand-logo{
  display:block;
  width:140px;
  height:auto;
  background:transparent;
  border:0;
  border-radius:0;
}
.brand .name{ font-weight:620; letter-spacing:-0.02em; font-size:15px; }
.brand .tag{ font-size:12px; color:var(--muted); letter-spacing:-0.01em; display:none; }
@media (min-width:860px){ .brand .tag{ display:inline; } }
.top-controls{ display:flex; align-items:center; gap:10px; min-width:0; }
.segmented{
  display:inline-flex; padding:4px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,253,249,.78);
  box-shadow:0 1px 0 rgba(23,22,20,.04);
}
.segmented button{
  border:0; background:transparent; color:var(--muted);
  padding:8px 10px; border-radius:999px;
  font-size:13px; letter-spacing:-0.01em;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.segmented button[aria-pressed="true"]{
  background:rgba(58,49,40,.10);
  color:var(--ink);
  box-shadow:0 6px 16px rgba(23,22,20,.08);
}
.segmented button:focus-visible{ outline:2px solid rgba(58,49,40,.28); outline-offset:2px; }
.select{
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,253,249,.78);
  padding:9px 12px;
  color:var(--ink);
  font-size:13px;
  letter-spacing:-0.01em;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(23,22,20,.04);
}
.navlinks{
  display:none; gap:14px; align-items:center;
  color:var(--muted); font-size:13px; letter-spacing:-0.01em; white-space:nowrap;
}
.navlinks a{ padding:8px 8px; border-radius:10px; transition:background .18s ease,color .18s ease; }
.navlinks a:hover{ background:rgba(58,49,40,.06); color:var(--ink); }
@media (min-width:980px){ .navlinks{ display:flex; } }
section{ padding:var(--s8) 0; }
.section-head{ display:grid; gap:var(--s2); margin-bottom:var(--s6); }
.eyebrow{ font-size:12px; color:var(--muted-2); letter-spacing:0.02em; }
h1,h2,h3{ margin:0; }
h2{ font-size:22px; letter-spacing:-0.03em; font-weight:650; }
@media (min-width:720px){ h2{ font-size:26px; } }
p{ margin:0; color:var(--muted); line-height:1.55; letter-spacing:-0.01em; }
.hero{ padding:var(--s9) 0 var(--s7); }
.hero-grid{ display:grid; gap:var(--s6); align-items:center; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:1.02fr .98fr; gap:var(--s7); } }
@media (min-width:980px){ .hero-grid{ grid-template-columns:.88fr 1.12fr; } }
.hero-title{ font-size:34px; line-height:1.05; letter-spacing:-0.05em; font-weight:680; }
@media (min-width:720px){ .hero-title{ font-size:46px; } }
@media (min-width:1100px){ .hero-title{ font-size:52px; } }
.hero-sub{
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 42ch;
}
@media (min-width:720px){ .hero-sub{ font-size:16px; } }
.cta-row{ margin-top:var(--s5); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,253,249,.82);
  color:var(--ink);
  font-size:14px;
  box-shadow:0 1px 0 rgba(23,22,20,.04), 0 12px 30px rgba(23,22,20,.06);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  letter-spacing:-0.01em;
  font-weight:600;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(23,22,20,.04), 0 18px 44px rgba(23,22,20,.08); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 0 rgba(23,22,20,.04), 0 10px 26px rgba(23,22,20,.06); }
.btn:focus-visible{ outline:2px solid rgba(58,49,40,.28); outline-offset:2px; }
.btn-primary{
  background:rgba(58,49,40,.96);
  color:#fffdf9;
  border-color:rgba(58,49,40,.55);
  box-shadow:0 1px 0 rgba(23,22,20,.06), 0 16px 40px rgba(58,49,40,.20);
}
.btn-primary:hover{ box-shadow:0 1px 0 rgba(23,22,20,.06), 0 22px 54px rgba(58,49,40,.26); }
.btn-secondary{ background:transparent; box-shadow:none; }
.mock{
  position:relative;
  overflow:hidden;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}
.mock::after{ content:none; }
/* old mock internals removed (image used instead) */

.hero-image{
  display:block;
  width: 100%;
  margin-inline: 0;
  height: min(62vh, 560px);
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(23,22,20,.10);
  box-shadow: 0 26px 70px rgba(23,22,20,.14);
}
@media (min-width:720px){
  .hero-image{
    width: 100%;
    margin-inline: 0;
    height: min(56vh, 620px);
  }
}
@media (min-width:980px){
  .hero-image{
    height: 600px;
  }
}
@media (min-width:1200px){
  .hero-image{
    height: 660px;
  }
}

/* Quiet section */
.quiet-grid{
  display:grid;
  gap: var(--s6);
  align-items:center;
}
@media (min-width:980px){
  .quiet-grid{
    grid-template-columns: 1.05fr .95fr;
    gap: var(--s7);
  }
}
.quiet-media{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,253,249,.78);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}
.quiet-image{
  display:block;
  width:100%;
  height:auto;
  border-radius: calc(var(--radius-lg) - 8px);
  border: 1px solid rgba(23,22,20,.10);
}
.quiet-copy{
  display:grid;
  gap: 10px;
}
.quiet-text{
  color: rgba(23,22,20,.72);
  max-width: 52ch;
  font-size: 15px;
}
@media (min-width:720px){
  .quiet-text{ font-size: 16px; }
}

/* Platform choice */
.platform-grid{ display:grid; gap:12px; }
@media (min-width:880px){ .platform-grid{ grid-template-columns:1fr 1fr; gap:16px; } }
.choice{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,253,249,.78);
  box-shadow:var(--shadow-soft);
  padding:16px;
  display:grid;
  gap:10px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.choice:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.choice[aria-selected="true"]{ border-color:rgba(58,49,40,.28); background:rgba(255,253,249,.90); }
.choice-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.choice-title{ font-size:16px; font-weight:650; letter-spacing:-0.02em; }
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  color:rgba(23,22,20,.70);
  background:rgba(255,253,249,.70);
  white-space:nowrap;
}
.badge-quiet{
  border-color:rgba(63,90,76,.22);
  color:rgba(63,90,76,.90);
  background:rgba(63,90,76,.08);
}

/* Guided setup */
.setup-shell{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,253,249,.86);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.setup-top{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(180deg, rgba(255,253,249,.92), rgba(255,253,249,.70));
}
@media (min-width:720px){ .setup-top{ padding:18px 20px 14px; } }
.setup-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.setup-meta{ display:grid; gap:6px; min-width:0; }
.setup-step{ font-size:12px; color:var(--muted-2); letter-spacing:0.02em; }
.setup-title{ font-size:18px; font-weight:670; letter-spacing:-0.03em; }
.setup-progress{ min-width:160px; width:260px; max-width:320px; }
.progress{
  height:9px; border-radius:999px;
  background:rgba(23,22,20,.07);
  overflow:hidden;
  border:1px solid rgba(23,22,20,.06);
}
.progress > div{
  height:100%; width:0%;
  background:linear-gradient(90deg, rgba(58,49,40,.82), rgba(58,49,40,.52));
  border-radius:999px;
  transition:width .35s ease;
}
.setup-body{ padding:16px; display:grid; gap:12px; }
@media (min-width:720px){ .setup-body{ padding:18px 20px; } }
.setup-copy{ color:rgba(23,22,20,.72); line-height:1.55; letter-spacing:-0.01em; }
.setup-callout{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(246,241,232,.55);
  color:rgba(23,22,20,.70);
  font-size:13px;
}
.setup-callout .mini{
  width:10px; height:10px; border-radius:99px; margin-top:4px;
  background:rgba(58,49,40,.45);
  box-shadow:0 0 0 3px rgba(58,49,40,.10);
  flex:0 0 auto;
}
.setup-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.setup-templates-note{
  color: rgba(23,22,20,.72);
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-size: 16px;
  margin-top: 4px;
}
.setup-video{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,253,249,.72);
  overflow: hidden;
}
.setup-media{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,253,249,.72);
  overflow: hidden;
}
.setup-video video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: rgba(0,0,0,.04);
}
.setup-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit: contain;
  background: rgba(0,0,0,.04);
}

/* Step 1/3: place media next to text */
.setup-body.has-media{
  display:grid;
  --setup-media-width: 215px;
  grid-template-columns: 1fr var(--setup-media-width);
  align-items:start;
  gap: 14px;
}
.setup-body.has-media .setup-copy{
  grid-column: 1;
}
.setup-body.has-media #setupTopActions{
  grid-column: 1;
}
.setup-body.has-media .setup-video,
.setup-body.has-media .setup-media{
  grid-column: 2;
}
.setup-body.step-open #setupTopActions{
  grid-row: 1;
}
.setup-body.step-open #setupImage{
  grid-row: 1;
  align-self: start;
}
.setup-body.step-open .setup-copy{
  grid-row: 2;
}

/* Step 3: keep actions directly below text */
.setup-body.step-nfc #setupBody{
  grid-column: 1;
  grid-row: 1;
}
.setup-body.step-nfc #setupInlineActions{
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}
.setup-body.step-nfc #setupVideo{
  grid-column: 2;
  grid-row: 1 / span 3;
}
.setup-body.template-split #setupTemplates{
  grid-column: 1;
}
.setup-body.template-split #setupImage{
  grid-column: 2;
}
@media (max-width:720px){
  .setup-body.has-media{
    grid-template-columns: 1fr;
  }
  .setup-body.has-media .setup-video,
  .setup-body.has-media .setup-media{
    grid-column: 1;
  }
}
.mini-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,253,249,.84);
  color:rgba(23,22,20,.88);
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 0 rgba(23,22,20,.04);
}
.mini-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(23,22,20,.08); }
.mini-btn:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(23,22,20,.06); }
.mini-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.mini-btn.primary{
  background:rgba(58,49,40,.96);
  border-color:rgba(58,49,40,.55);
  color:#fffdf9;
  box-shadow:0 12px 34px rgba(58,49,40,.18);
}
.mini-btn.ghost{ background:transparent; box-shadow:none; }
.jump{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width:520px){
  .setup-row{ flex-direction:column; align-items:stretch; }
  .setup-progress{ width:100%; max-width:none; min-width:0; }
  .jump{ margin-top:10px; }
}
.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,253,249,.78);
  font-size:13px;
  letter-spacing:-0.01em;
  color:rgba(23,22,20,.76);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.chip:hover{ transform:translateY(-1px); background:rgba(58,49,40,.06); }
.chip[aria-current="step"]{ border-color:rgba(58,49,40,.24); background:rgba(58,49,40,.10); color:rgba(23,22,20,.88); }
.setup-footer{
  padding:14px 16px 16px;
  border-top:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:rgba(255,253,249,.78);
}
@media (min-width:720px){ .setup-footer{ padding:14px 20px 18px; } }
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,253,249,.78);
  color:rgba(23,22,20,.70);
  font-size:13px;
}
.status-dot{ width:9px; height:9px; border-radius:99px; background:rgba(23,22,20,.22); }
.status-pill.done{
  border-color:rgba(63,90,76,.24);
  background:rgba(63,90,76,.08);
  color:rgba(63,90,76,.92);
}
.status-pill.done .status-dot{ background:rgba(63,90,76,.82); box-shadow:0 0 0 3px rgba(63,90,76,.12); }

/* Shortcut library */
.library-shell{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,253,249,.86);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.library-top{
  padding:16px;
  border-bottom:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(255,253,249,.92), rgba(255,253,249,.72));
}
@media (min-width:720px){ .library-top{ padding:18px 20px; } }
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cards{ padding:16px; display:grid; gap:12px; }
@media (min-width:720px){ .cards{ padding:18px 20px; grid-template-columns:repeat(2, 1fr); gap:14px; } }
@media (min-width:1060px){ .cards{ grid-template-columns:repeat(3, 1fr); } }
.card{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:rgba(255,253,249,.88);
  box-shadow:0 10px 26px rgba(23,22,20,.06);
  padding:14px;
  display:grid;
  gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height:160px;
}
.card:hover{ transform:translateY(-1px); box-shadow:0 16px 40px rgba(23,22,20,.08); }
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-icon{
  width:36px; height:36px; border-radius:12px;
  border:1px solid rgba(58,49,40,.18);
  background:linear-gradient(180deg, rgba(58,49,40,.10), rgba(58,49,40,.04));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:-0.02em;
  color:rgba(58,49,40,.82);
  font-weight:700;
  flex:0 0 auto;
}
.card-title{ font-weight:670; letter-spacing:-0.02em; font-size:15px; color:rgba(23,22,20,.92); }
.card-desc{ color:rgba(23,22,20,.70); font-size:13px; line-height:1.45; }
.card-badges{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.badge-reco{ border-color:rgba(63,90,76,.22); color:rgba(63,90,76,.92); background:rgba(63,90,76,.08); }
.badge-placeholder{ border-color:rgba(106,58,51,.18); color:rgba(106,58,51,.88); background:rgba(106,58,51,.06); }
.card-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.note{ padding:12px 16px 16px; border-top:1px solid var(--border-2); color:rgba(23,22,20,.62); font-size:13px; line-height:1.5; }
@media (min-width:720px){ .note{ padding:12px 20px 18px; } }

/* Panels + FAQ + footer */
.subtle-shell{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,253,249,.78);
  box-shadow:0 10px 30px rgba(23,22,20,.06);
  padding:16px;
}
@media (min-width:720px){ .subtle-shell{ padding:18px 20px; } }
.why-grid{ display:grid; gap:12px; }
@media (min-width:900px){ .why-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; } }
.panel{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,253,249,.86);
  box-shadow:0 10px 26px rgba(23,22,20,.06);
  padding:16px;
  display:grid;
  gap:10px;
}
.panel h3{ font-size:16px; font-weight:670; letter-spacing:-0.02em; }
.panel p{ color:rgba(23,22,20,.68); font-size:13px; line-height:1.5; }
.faq{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,253,249,.86);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-item{ border-top:1px solid var(--border-2); }
.faq-item:first-child{ border-top:0; }
.faq-q{
  width:100%;
  text-align:left;
  padding:14px 16px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:650;
  letter-spacing:-0.02em;
  color:rgba(23,22,20,.90);
}
@media (min-width:720px){ .faq-q{ padding:16px 20px; } }
.faq-a{
  padding:0 16px 14px;
  color:rgba(23,22,20,.70);
  font-size:13px;
  line-height:1.55;
  display:none;
}
@media (min-width:720px){ .faq-a{ padding:0 20px 16px; } }
.faq-item[aria-expanded="true"] .faq-a{ display:block; }
.chev{
  width:26px; height:26px;
  border-radius:999px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  color:rgba(23,22,20,.64);
  background:rgba(255,253,249,.72);
  transition:transform .22s ease, background .18s ease;
}
.faq-item[aria-expanded="true"] .chev{ transform:rotate(180deg); background:rgba(58,49,40,.06); }
footer{
  padding:var(--s7) 0 var(--s7);
  border-top:1px solid var(--border-2);
  background:rgba(246,241,232,.55);
}
.footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.footnote{ font-size:13px; color:rgba(23,22,20,.62); line-height:1.45; }

.reveal{ opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .mini-btn, .choice, .card{ transition:none; }
}
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.muted{ color:var(--muted); }
.divider{ height:1px; background:var(--border-2); margin:var(--s7) 0; }