/* Free tools for restaurant owners: shared layout on top of /flow.css (same nav as the landing and pricing pages). */
html, body { overflow-x: clip; max-width: 100%; }
body { background: var(--bg); }
.nav { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30; width: min(1180px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--shadow); }
.nav .logo { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--red), var(--red-2)); display: grid; place-items: center; overflow: hidden; box-shadow: var(--glow); flex: none; }
.nav .logo img { width: 100%; height: 100%; display: block; }
.nav b { font: 900 22px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.nav a.home { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.nav .sp { flex: 1; }
.nav .icon-btn { border-color: var(--line); color: var(--ink); }
.nav .links { display: flex; gap: 4px; }
.nav .links a { text-decoration: none; font-weight: 700; font-size: 14px; color: var(--grey); padding: 8px 12px; border-radius: 10px; }
.nav .links a:hover, .nav .links a.on { color: var(--ink); background: var(--cream); }
.nav .lang { min-width: 44px; height: 40px; border-radius: 12px; border: 1px solid var(--line); font: 800 13px var(--sans); letter-spacing: .06em; color: var(--ink); background: var(--surface); }
@media (max-width: 760px) { .nav .links { display: none; } .nav .cta-sm { display: none; } }

main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 110px 0 20px; }
main h1 { font-size: clamp(38px, 6vw, 72px); text-transform: uppercase; line-height: .95; margin: 10px 0 14px; }
main h1 em { font-style: normal; color: var(--red); }
.lead { color: var(--grey); font-size: 18px; line-height: 1.5; max-width: 680px; }
.badge { display: inline-block; background: var(--red); color: #fff; font-weight: 800; padding: 4px 12px; border-radius: 99px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* tool = form on the left, live result on the right */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 30px; align-items: start; }
.tool > .card { padding: 22px; border-radius: 22px; margin: 0; }
.tool h2 { font-size: 22px; text-transform: uppercase; margin-bottom: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field small { display: block; color: var(--grey); font-size: 12.5px; margin-top: 5px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatches button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.swatches button.on { box-shadow: 0 0 0 2px var(--red); }
.swatches input[type=color] { width: 48px; height: 40px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.actions .btn { flex: 1 1 160px; }
.preview { display: grid; place-items: center; background: var(--cream); border-radius: 16px; padding: 18px; }
.preview canvas { width: min(100%, 340px); height: auto; border-radius: 8px; box-shadow: var(--shadow-lg); background: #fff; }
.note { color: var(--grey); font-size: 13px; margin-top: 12px; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }
@media (max-width: 860px) { .tool { grid-template-columns: 1fr; } }

/* soft call to action: Flow does this for you */
.cta { position: relative; overflow: hidden; margin: 34px 0 0; border-radius: 26px; background: #0F0E0D; color: #F7F3EB; padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.cta h3 { font-size: clamp(26px, 3.4vw, 38px); text-transform: uppercase; line-height: 1; position: relative; z-index: 1; }
.cta p { color: rgba(247, 243, 235, .7); margin-top: 8px; font-size: 16px; line-height: 1.5; position: relative; z-index: 1; max-width: 640px; }
.cta .btn { position: relative; z-index: 1; min-height: 54px; padding: 0 24px; border-radius: 16px; font-size: 16px; }
@media (max-width: 700px) { .cta { grid-template-columns: 1fr; padding: 24px 20px; } }

.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.tcard { position: relative; display: block; text-decoration: none; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: transform .4s var(--spring), box-shadow .4s; }
.tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tcard .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--soft-red); color: var(--red); margin-bottom: 16px; }
.tcard .ic .i { width: 26px; height: 26px; }
.tcard h3 { font-size: 24px; text-transform: uppercase; margin-bottom: 6px; }
.tcard p { color: var(--grey); line-height: 1.5; }
.tcard .go { display: inline-block; margin-top: 14px; color: var(--red); font-weight: 800; }
@media (max-width: 860px) { .more { grid-template-columns: 1fr; } }
h2.sec { font-size: clamp(26px, 3.4vw, 36px); text-transform: uppercase; margin: 48px 0 0; }
footer { text-align: center; color: var(--grey); padding: 40px 16px 50px; font-size: 13px; }

/* print: only the A6 card, edge to edge (named page, so printing the calculator stays a normal page) */
#printCard { display: none; page: card; }
@page card { size: 105mm 148mm; margin: 0; }
@media print {
  body:has(#printCard) > *:not(#printCard) { display: none !important; }
  body:has(#printCard) { background: #fff !important; }
  body::after { display: none !important; }
  #printCard { display: block !important; width: 105mm; height: 148mm; }
  .nav, #cta, #more, footer, .tool .actions { display: none !important; }
  main { padding-top: 0; }
}