@font-face{font-family:'Cabinet';src:url(/tour-assets/fonts/cab800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet';src:url(/tour-assets/fonts/cab500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'WorkS';src:url(/tour-assets/fonts/ws400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'WorkS';src:url(/tour-assets/fonts/ws500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'WorkS';src:url(/tour-assets/fonts/ws600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ground:#FBFAF5; --surface:#FFFFFF; --sunk:#F2F0E7;
  --ink:#16201A; --ink2:#5A6A5D; --line:#E3E0D4;
  --pine:#2C5530; --pine-ink:#2C5530; --pine-soft:#EAF0E7;
  --ember:#C2410C;
  --safe:#3F6B42; --safe-bg:#E7EFE0; --safe-line:#CBDCC2;
  --avoid:#9C3227; --avoid-bg:#FAE5E2; --avoid-line:#EFC9C3;
  --shadow:0 1px 2px rgba(22,32,26,.05), 0 12px 32px -18px rgba(22,32,26,.30);
  --frame:#DCD9CC;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0E140F; --surface:#161D17; --sunk:#1B231C;
    --ink:#ECEFE4; --ink2:#94A192; --line:#29332A;
    --pine:#8FBB89; --pine-ink:#8FBB89; --pine-soft:#1C2A1D;
    --ember:#E4763D;
    --safe:#9CC493; --safe-bg:#1B2A1C; --safe-line:#2E4430;
    --avoid:#E89184; --avoid-bg:#2B1B19; --avoid-line:#4A2A26;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -22px rgba(0,0,0,.8);
    --frame:#2A332B;
  }
}
:root[data-theme="light"]{
  --ground:#FBFAF5; --surface:#FFFFFF; --sunk:#F2F0E7;
  --ink:#16201A; --ink2:#5A6A5D; --line:#E3E0D4;
  --pine:#2C5530; --pine-ink:#2C5530; --pine-soft:#EAF0E7;
  --ember:#C2410C;
  --safe:#3F6B42; --safe-bg:#E7EFE0; --safe-line:#CBDCC2;
  --avoid:#9C3227; --avoid-bg:#FAE5E2; --avoid-line:#EFC9C3;
  --shadow:0 1px 2px rgba(22,32,26,.05), 0 12px 32px -18px rgba(22,32,26,.30);
  --frame:#DCD9CC;
}
:root[data-theme="dark"]{
  --ground:#0E140F; --surface:#161D17; --sunk:#1B231C;
  --ink:#ECEFE4; --ink2:#94A192; --line:#29332A;
  --pine:#8FBB89; --pine-ink:#8FBB89; --pine-soft:#1C2A1D;
  --ember:#E4763D;
  --safe:#9CC493; --safe-bg:#1B2A1C; --safe-line:#2E4430;
  --avoid:#E89184; --avoid-bg:#2B1B19; --avoid-line:#4A2A26;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -22px rgba(0,0,0,.8);
  --frame:#2A332B;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'WorkS',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px}
.prose{max-width:64ch}
h1,h2,h3{font-family:'Cabinet','WorkS',sans-serif; font-weight:800; text-wrap:balance; letter-spacing:-.015em; margin:0}
h1{font-size:clamp(2.1rem,1.2rem + 3.4vw,3.9rem); line-height:1.03}
h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem); line-height:1.1}
h3{font-size:1.16rem; line-height:1.35; letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
:where(a,button,input,summary):focus-visible{outline:2.5px solid var(--ember); outline-offset:3px; border-radius:4px}

.eyebrow{
  font-size:.735rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pine-ink); margin:0;
}
.eyebrow.ember{color:var(--ember)}
.lede{font-size:clamp(1.05rem,.95rem + .5vw,1.28rem); color:var(--ink2); line-height:1.55}

/* ---------- masthead ----------
   Deliberately single-theme: this is the site's own header bar (cream ground,
   #E5E0D5 hairline, the full Can I Dine? lockup at 72px), so it stays cream in
   dark mode too — the brand mark's wordmark is pine and vanishes on a dark
   ground. The page below it is fully theme-aware. */
.mast{border-bottom:1px solid #E5E0D5; background:#F9F6F0}
.mast .wrap{display:flex; align-items:center; gap:16.4px; min-height:136px}
.logo{display:flex; align-items:center; flex:none}
/* 10% larger than the first rendered header, backed by the 432px WebP source. */
.logo img{display:block; width:96.8px; height:auto; object-fit:contain}
@media (min-width:640px){ .logo img{width:127.6px} }
/* The page title, set beside the lockup and divided from it by a hairline —
   the way a section title sits in a masthead, not as a caption in the corner.
   Sized off the same display face and scale as the page's h2s. */
.mast small{
  display:block; font-family:'Cabinet','WorkS',sans-serif; font-weight:800; color:#1E3C22;
  font-size:2.8rem; line-height:1.02; letter-spacing:0;
  padding-left:22px; border-left:1px solid #D8D3C4; text-wrap:balance;
}
@media (max-width:640px){
  .mast .wrap{min-height:104px; gap:7.2px}
  .mast small{padding-left:16px; font-size:1.75rem}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,7vw,92px) clamp(36px,5vw,64px)}
.hero .lede{margin-top:22px}
.hero-note{margin-top:26px; display:flex; gap:10px; align-items:baseline; color:var(--ink2); font-size:.93rem}
.hero-note b{color:var(--ink); font-weight:600}

/* ---------- demo ---------- */
.demo{
  margin-top:clamp(34px,4vw,52px); background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden;
}
.demo-head{padding:20px 22px 0}
.demo-head p{color:var(--ink2); font-size:.92rem; margin-top:6px}
.demo-label{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:999px;background:#f0ebe1;color:#4a5d23;font:700 .65rem/1 system-ui;letter-spacing:.08em;vertical-align:middle}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:16px 22px 20px}
.chip{
  font:inherit; font-size:.9rem; font-weight:500; cursor:pointer;
  background:var(--ground); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; transition:background .16s, color .16s, border-color .16s;
}
.chip:hover{border-color:var(--ink2)}
.chip[aria-pressed="true"]{background:var(--avoid-bg); border-color:var(--avoid-line); color:var(--avoid); font-weight:600}
.demo-body{border-top:1px solid var(--line); background:var(--sunk); padding:20px 22px 24px}
.group-label{display:flex; align-items:center; gap:9px; margin:0 0 12px}
.group-label span{font-family:'Cabinet',sans-serif; font-weight:800; font-size:1.05rem}
.count{font-family:'WorkS'; font-weight:500; font-size:.85rem; color:var(--ink2); font-variant-numeric:tabular-nums}
.group + .group{margin-top:22px}
.dishes{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.dish{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:var(--surface);
}
.group.safe .dish{background:var(--safe-bg); border-color:var(--safe-line)}
.group.avoid .dish{background:var(--avoid-bg); border-color:var(--avoid-line)}
.dish-name{font-weight:600; font-size:.98rem}
.dish-why{display:block; font-weight:400; font-size:.82rem; color:var(--avoid); margin-top:3px}
.group.safe .dish-why{color:var(--safe)}
.price{font-size:.92rem; color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap}
.empty{font-size:.9rem; color:var(--ink2); padding:2px 2px 0}
.demo-foot{padding:0 22px 22px; font-size:.85rem; color:var(--ink2)}

/* ---------- acts ---------- */
.act{padding-block:clamp(56px,7vw,96px); border-top:1px solid var(--line)}
.act-head{display:grid; gap:16px}
.act-head .lede{margin-top:2px}

.panel{padding-block:clamp(30px,3.5vw,48px)}
.panel + .panel{border-top:1px dashed var(--line)}
.panel-head{display:grid; gap:8px; max-width:62ch}
.panel-head .marker{
  font-family:'WorkS'; font-weight:600; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2);
}
.panel-head p{color:var(--ink2); font-size:.98rem}

figure{margin:24px 0 0}
figcaption{margin-top:12px; font-size:.85rem; color:var(--ink2)}

/* browser frame */
.browser{border:1px solid var(--frame); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
.browser-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--sunk); border-bottom:1px solid var(--frame)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--line); flex:none}
.url{
  margin-left:6px; font-size:.76rem; color:var(--ink2); background:var(--ground);
  border:1px solid var(--line); border-radius:999px; padding:3px 12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.browser img{display:block; width:100%; height:auto}

/* phones */
.phones{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,3vw,40px); margin:28px 0 0; align-items:start}
.phones figure{margin:0}
.phone{
  border:9px solid var(--frame); border-radius:34px; overflow:hidden; background:var(--surface);
  box-shadow:var(--shadow); max-width:330px; margin-inline:auto;
}
.phone img{display:block; width:100%; height:auto}

/* ---------- ledger ---------- */
.ledger{margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.ledger div{
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:6px 32px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.ledger dt{font-family:'Cabinet',sans-serif; font-weight:800; font-size:1.02rem}
.ledger dd{margin:0; color:var(--ink2); font-size:.97rem}
@media (max-width:600px){ .ledger div{grid-template-columns:1fr} }

/* ---------- cta ---------- */
.cta{
  margin-block:clamp(56px,7vw,96px); background:var(--pine-soft); border:1px solid var(--safe-line);
  border-radius:20px; padding:clamp(28px,4vw,48px);
}
.cta h2{max-width:20ch}
.cta p{margin-top:14px; color:var(--ink2); max-width:56ch}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:28px}
.btn{
  display:inline-block; background:var(--pine); color:var(--ground); text-decoration:none;
  font-weight:600; font-size:1rem; padding:14px 26px; border-radius:11px;
  transition:transform .14s ease, filter .14s ease;
}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem; letter-spacing:.04em;
  background:var(--surface); border:1px dashed var(--safe-line); border-radius:9px; padding:11px 15px;
}
.fine{margin-top:20px; font-size:.85rem; color:var(--ink2)}

footer{border-top:1px solid var(--line); padding-block:32px 56px; color:var(--ink2); font-size:.85rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}