/* TAVOLA — Home pubblica. Modificabile direttamente via FTP, senza compilazione. */
:root {
  --ink: #213B3D; --muted: #667779; --orange: #B74C32; --orange-hover: #9D3E29; --line: #E5E8E4; --bg: #F5F5F0; --radius: 18px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Geist', 'DM Sans', system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-ink: 0 1px 2px #163e420d, 0 8px 24px -8px #163e421f, 0 32px 64px -24px #163e4226;
  --z-grain: 1; --z-nav: 20; --z-skip: 30;
  interpolate-size: allow-keywords;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: 'Manrope', sans-serif; text-wrap: balance; }
p { text-wrap: pretty; }
h2 { font-size: 18px; font-weight: 750; letter-spacing: -.35px; }
h3 { font-size: 16px; font-weight: 700; }
small { font-size: 13px; color: var(--muted); }
a:focus-visible, summary:focus-visible { outline: 2px solid #b74c32; outline-offset: 4px; border-radius: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 550; white-space: nowrap; transition: transform .25s var(--ease-out), background-color .2s, box-shadow .25s var(--ease-out), border-color .2s; }
.btn svg { transition: transform .25s var(--ease-out); }
.btn:active { transform: translateY(1px) scale(.98) !important; }
.primary { background: var(--orange); color: white; box-shadow: inset 0 1px 0 #ffffff2e, 0 1px 2px #9d3e2933, 0 10px 24px -10px #b74c3299; }
.primary:hover { background: var(--orange-hover); box-shadow: inset 0 1px 0 #ffffff2e, 0 2px 4px #9d3e2933, 0 16px 32px -12px #b74c32b3; }
.secondary { border: 1px solid #dfe2e9; background: white; color: #424758; }
.secondary:hover { background: #f6f7fa; border-color: #cfd4dc; }
.brand { display: flex; align-items: center; font-size: 32px; letter-spacing: -1.4px; font-family: 'Manrope', sans-serif; font-weight: 800; width: max-content; line-height: 1; }
.brand-period { color: var(--orange); }
.brand-icon { width: 42px; height: 42px; margin-right: 11px; flex-shrink: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; color: var(--landing-muted, var(--muted)); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: var(--z-skip); padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; transition: top .2s; }
.skip-link:focus { top: 16px; }
@media (max-width: 600px) { .brand-icon { width: 36px; height: 36px; } }

/* Grana leggera per togliere la piattezza del digitale */
.tavola-landing::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain); opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .24 0 0 0 0 .26 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tavola-landing {
  --landing-ink:#163e42;
  --landing-muted:#627570;
  --landing-paper:#faf8f2;
  position:relative;
  background:var(--landing-paper);
  color:var(--landing-ink);
  overflow-x:clip
}
.tavola-landing .brand { color:var(--landing-ink) }

/* Navigazione: barra flottante in vetro */
.landing-nav {
  position:sticky;
  top:14px;
  z-index:var(--z-nav);
  max-width:1180px;
  margin:14px auto 0;
  width:calc(100% - 60px);
  padding:10px 10px 10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-radius:20px;
  border:1px solid transparent;
  transition:background-color .35s, border-color .35s, box-shadow .35s var(--ease-out), padding .35s var(--ease-out)
}
.landing-nav.is-scrolled {
  background:#faf8f2c7;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-color:#163e4214;
  box-shadow:inset 0 1px 0 #ffffffb3, 0 12px 32px -16px #163e4238
}
.landing-nav .brand { font-size:28px }
.landing-nav .brand-icon { width:38px; height:38px }
.landing-nav nav { display:flex; gap:6px; align-items:center; font-size:14px }
.landing-nav nav>a:not(.btn) {
  color:var(--landing-ink);
  padding:10px 14px;
  border-radius:10px;
  transition:background-color .2s
}
.landing-nav nav>a:not(.btn):hover { background:#163e420d }
.landing-nav nav .btn { margin-left:8px }

.tavola-landing main {
  position:relative;
  max-width:1180px;
  margin:auto;
  padding:0 30px
}

/* Hero */
.landing-hero {
  position:relative;
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:80px;
  align-items:center;
  padding:88px 0 140px
}
.landing-hero::before {
  content:"";
  position:absolute;
  inset:-120px -30vw 0 auto;
  width:min(900px,80vw);
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 62% 42%,#e8eee4 0%,#e8eee400 100%),
    radial-gradient(closest-side at 80% 70%,#f2e1d3cc 0%,#f2e1d300 100%)
}
.landing-hero h1 {
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:380;
  line-height:.98;
  font-size:clamp(52px,7vw,96px);
  letter-spacing:-.045em;
  margin:26px 0 30px
}
.landing-hero h1 em,.landing-end em {
  color:#a5593e;
  font-style:italic;
  font-weight:340
}
.landing-hero p {
  font-size:18px;
  line-height:1.7;
  max-width:31em;
  color:var(--landing-muted)
}
.landing-actions {
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
  margin:38px 0 22px
}
.landing-actions .btn { padding:15px 24px; font-size:15px }
.landing-text-link {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--landing-ink);
  font-size:14px;
  font-weight:500;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  padding-bottom:2px;
  transition:background-size .35s var(--ease-out)
}
.landing-text-link:hover { background-size:100% 1px }
.landing-text-link svg { transition:transform .25s var(--ease-out) }
.landing-hero small { font-size:12px; color:var(--landing-muted) }

/* Scena illustrativa */
.landing-scene {
  position:relative;
  transform:rotate(-2deg);
  border-radius:28px;
  background:#fff;
  padding:24px;
  box-shadow:0 0 0 1px #d5dfd4, inset 0 1px 0 #fff, 0 2px 4px #163e420a, 0 24px 48px -12px #163e4224, 0 64px 96px -32px #163e4233;
  transition:transform .8s var(--ease-out)
}
.landing-scene-top {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12.5px;
  border-bottom:1px solid #e0e6df;
  padding-bottom:17px
}
.landing-scene-top strong { font-weight:600 }
.landing-scene-top small {
  font-size:9px;
  margin-left:auto;
  letter-spacing:1.2px;
  padding:4px 7px;
  border-radius:5px;
  background:#f5f6ef
}
.landing-live-dot {
  position:relative;
  width:7px;
  height:7px;
  border-radius:100%;
  background:#7faa8c
}
.landing-live-dot::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:inherit;
  animation:pulse 2.4s var(--ease-out) 3
}
@keyframes pulse { 0% { transform:scale(1); opacity:.7 } 100% { transform:scale(3.2); opacity:0 } }
.landing-room {
  border-radius:18px;
  background:#f5f6ef;
  padding:22px;
  margin:20px 0;
  background-image:radial-gradient(#d7ded4 1px,transparent 1px);
  background-size:16px 16px;
  box-shadow:inset 0 1px 3px #163e420d
}
.landing-room-label {
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:20px;
  font-size:13px;
  font-weight:500
}
.landing-room-label small { margin-left:auto; font-size:10px; font-weight:400 }
.landing-table-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 22px;
  padding:0 8px
}
/* Posto = tavolo + sedie viste dall'alto. Il colore delle sedie segue lo stato. */
.landing-spot {
  --chair:#d9e2db;
  --d:88px;
  --seat:radial-gradient(closest-side,var(--chair) 92%,#0000);
  position:relative;
  display:grid;
  padding:12px 0;
  transition:transform .4s var(--ease-out)
}
.landing-spot::before {
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat
}
.landing-spot:has(.reserved) { --chair:#ead9a9 }
.landing-spot:has(.arrived) { --chair:#c6d6e8 }
.landing-spot:has(.seated) { --chair:#b3d1bd }
.spot-rect::before {
  background-image:var(--seat),var(--seat),var(--seat),var(--seat);
  background-size:26px 10px;
  background-position:30% 0,70% 0,30% 100%,70% 100%
}
.spot-long::before {
  background-image:var(--seat),var(--seat),var(--seat),var(--seat),var(--seat),var(--seat);
  background-size:26px 10px;
  background-position:18% 0,50% 0,82% 0,18% 100%,50% 100%,82% 100%
}
.spot-round::before {
  background-image:var(--seat),var(--seat),var(--seat),var(--seat);
  background-size:26px 10px,26px 10px,10px 26px,10px 26px;
  background-position:50% 0,50% 100%,calc(50% - var(--d) / 2 - 7px) 50%,calc(50% + var(--d) / 2 + 7px) 50%
}
.spot-round .landing-table {
  justify-self:center;
  width:var(--d);
  height:var(--d);
  min-height:0;
  border-radius:50%
}
.spot-round .landing-table::before { top:9px; right:auto; left:50%; margin-left:-3px }
.landing-table {
  --dot:#a7b8ad;
  position:relative;
  z-index:1;
  border:1px solid #ceddd2;
  border-radius:14px;
  background:#fff;
  display:grid;
  place-content:center;
  gap:4px;
  text-align:center;
  min-height:88px;
  box-shadow:0 1px 0 #ffffff inset, 0 6px 14px -6px #163e421f;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .4s var(--ease-out), border-color .4s var(--ease-out)
}
.landing-table::before {
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--dot)
}
.landing-table strong { font-size:20px; font-family:var(--serif); font-weight:500; letter-spacing:-.02em }
.landing-table span { font-size:11px; color:#5f756a; transition:opacity .12s ease-out }
.landing-table.is-swapping span { opacity:0 }
.landing-table.just-changed::before { animation:dot-in .2s var(--ease-out) }
@keyframes dot-in { from { transform:scale(.6) } }
.landing-table.reserved { --dot:#c9a24a; background:#fff3d5; border-color:#dfc480 }
.landing-table.arrived { --dot:#7f9fc2; background:#e4eef8; border-color:#afc6df }
.landing-table.seated { --dot:#6f9f82; background:#dceee3; border-color:#a3c7b1 }
.landing-production {
  display:flex;
  gap:13px;
  align-items:center;
  padding:4px 4px 0
}
.landing-production>div { flex:1; display:grid; gap:4px; font-size:12.5px }
.landing-production strong { font-weight:600 }
.landing-production small { font-size:11px }
.landing-production>svg { color:#6f9f82 }
.js-reveal .landing-production>svg path { stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .35s var(--ease-out) }
.js-reveal .landing-production.is-done>svg path { stroke-dashoffset:0 }
.landing-mini-icon {
  display:inline-flex;
  padding:10px;
  border-radius:12px;
  background:#f2e1d3;
  color:#9d5d40
}
.landing-customer-note {
  position:absolute;
  bottom:-38px;
  right:-28px;
  display:flex;
  gap:12px;
  align-items:center;
  background:#163e42;
  color:white;
  border-radius:16px;
  padding:18px 24px;
  font-size:12px;
  line-height:1.45;
  box-shadow:inset 0 1px 0 #ffffff1f, 0 18px 36px -12px #163e4266;
  transform:rotate(2deg)
}
.js-reveal .landing-scene .landing-customer-note { opacity:0 }
.js-reveal .landing-scene.is-in .landing-customer-note { opacity:1; animation:note-in .55s var(--ease-out) 1.9s both }
@keyframes note-in { from { opacity:0; transform:rotate(2deg) translateY(14px) } to { opacity:1; transform:rotate(2deg) } }
.landing-customer-note svg { color:#E9AD8D; flex-shrink:0 }
.landing-customer-note strong { display:block; margin-top:3px; font-weight:600 }

/* Titoli di sezione */
.landing-intro h2,.landing-steps h2,.landing-end h2,.landing-faq h2 {
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:380;
  font-size:clamp(36px,4.6vw,60px);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:22px 0
}

/* Intro: allineata a sinistra, testo a destra */
.landing-intro {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  column-gap:80px;
  align-items:end;
  padding:40px 0 64px;
  border-top:1px solid #dce2d7
}
.landing-intro .eyebrow { grid-column:1 / -1; margin-top:44px }
.landing-intro h2 { margin-bottom:0 }
.landing-intro p {
  max-width:30em;
  color:var(--landing-muted);
  line-height:1.7;
  font-size:17px;
  padding-bottom:8px
}

/* Funzioni: griglia sfalsata 2×2 */
.landing-features {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:0 0 160px
}
.landing-features article {
  --tint:#e5eee5;
  --tint-ink:#386b5c;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:40px 40px 36px;
  border-radius:28px;
  background:#ffffffb3;
  box-shadow:0 0 0 1px #163e420f, 0 1px 2px #163e420a;
  isolation:isolate;
  overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)
}
.landing-features article::before {
  content:"";
  position:absolute;
  inset:auto -20% -60% auto;
  width:70%;
  aspect-ratio:1;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--tint),transparent);
  opacity:.7;
  transition:opacity .5s, transform .8s var(--ease-out)
}
.landing-features article:nth-child(even) { margin-top:72px; margin-bottom:-72px }
.landing-features article:nth-child(2) { --tint:#f3e3cf; --tint-ink:#a46e37 }
.landing-features article:nth-child(3) { --tint:#efdeda; --tint-ink:#a55e4d }
.landing-features article:nth-child(4) { --tint:#e3e9ed; --tint-ink:#527281 }
.landing-feature-icon {
  display:inline-flex;
  align-self:flex-start;
  padding:14px;
  border-radius:16px;
  background:var(--tint);
  color:var(--tint-ink)
}
.landing-features h3 {
  font-family:var(--serif);
  font-weight:420;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:36px 0 14px
}
.landing-features p {
  font-size:15px;
  line-height:1.7;
  max-width:34em;
  color:var(--landing-muted)
}
.landing-features article>a,.landing-features article>span:last-child {
  font-size:13px;
  font-weight:500;
  color:var(--tint-ink);
  display:flex;
  gap:6px;
  align-items:center;
  margin-top:auto;
  padding-top:28px
}
.landing-features article>span:last-child { color:#547568; font-weight:400 }
.landing-features article>a { align-self:flex-start }
.landing-features article>a svg { transition:transform .25s var(--ease-out) }
.landing-features article>a::after { content:""; position:absolute; inset:0 }

/* Passi */
.landing-steps {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:80px;
  padding:80px;
  border-radius:36px;
  background:#e8eee4;
  margin:0 0 140px;
  overflow:clip;
  isolation:isolate
}
.landing-steps::before {
  content:"";
  position:absolute;
  inset:-40% auto auto -15%;
  width:60%;
  aspect-ratio:1;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side,#f5f6ef,transparent)
}
.landing-steps>div { align-self:start; position:sticky; top:120px }
.landing-steps .btn { margin-top:14px }
.landing-steps ol {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:0;
  counter-reset:none
}
.landing-steps li {
  display:grid;
  grid-template-columns:72px 1fr;
  gap:12px;
  border-top:1px solid #cbd7c8;
  padding:30px 0
}
.landing-steps li:first-child { border-top:0; padding-top:4px }
.landing-steps li:last-child { padding-bottom:0 }
.landing-steps li>span {
  font-family:var(--serif);
  font-style:italic;
  font-size:34px;
  line-height:1;
  color:#689074;
  letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums
}
.landing-steps h3 { font-size:19px; font-weight:650; letter-spacing:-.01em; margin:4px 0 8px }
.landing-steps p { font-size:15px; line-height:1.65; margin:0; max-width:32em; color:var(--landing-muted) }

/* FAQ: titolo a sinistra, domande a destra */
.landing-faq {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  column-gap:80px;
  align-items:start;
  margin:0 0 140px
}
.landing-faq h2 { grid-row:1 / span 8; margin:0; position:sticky; top:120px }
.landing-faq details { border-bottom:1px solid #dce2d7 }
.landing-faq details:first-of-type { border-top:1px solid #dce2d7 }
.landing-faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0;
  font-size:17px;
  font-weight:550;
  letter-spacing:-.01em;
  cursor:pointer;
  list-style:none;
  transition:color .2s
}
.landing-faq summary::-webkit-details-marker { display:none }
.landing-faq summary::after {
  content:"";
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:10px;
  background:
    linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat,
    #163e420d;
  transition:transform .35s var(--ease-out), background-color .2s
}
.landing-faq summary:hover { color:#a5593e }
.landing-faq details[open] summary::after { transform:rotate(45deg) }
.landing-faq p {
  font-size:15px;
  line-height:1.7;
  max-width:36em;
  padding:0 54px 26px 0;
  color:var(--landing-muted)
}
.landing-faq details[open] p { animation:faq-in .45s var(--ease-out) }
@keyframes faq-in { from { opacity:0; transform:translateY(-6px) } }
@supports selector(::details-content) {
  .landing-faq details::details-content { height:0; overflow:clip; transition:height .28s var(--ease-out), content-visibility .28s allow-discrete }
  .landing-faq details[open]::details-content { height:auto }
}

/* Chiusura */
.landing-end {
  position:relative;
  text-align:center;
  padding:110px 30px 130px;
  margin-bottom:60px;
  border-radius:36px;
  background:#fff;
  box-shadow:0 0 0 1px #163e420f;
  overflow:hidden;
  isolation:isolate
}
.landing-end::before {
  content:"";
  position:absolute;
  inset:auto 0 -55% 0;
  margin:auto;
  width:min(900px,120%);
  aspect-ratio:1;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side,#f2e1d3,#e8eee480 55%,transparent)
}
.landing-end h2 { font-size:clamp(40px,6vw,80px); line-height:1; margin:26px auto 34px }
.landing-end .btn { padding:16px 26px; font-size:15px }

.landing-footer {
  max-width:1180px;
  margin:auto;
  padding:32px 30px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:13px;
  color:var(--landing-muted)
}
.landing-footer .brand { font-size:24px }
.landing-footer .brand-icon { width:32px; height:32px }
.landing-footer span a,.landing-footer>a:last-child {
  color:var(--landing-ink);
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .3s var(--ease-out)
}
.landing-footer span a:hover,.landing-footer>a:last-child:hover { background-size:100% 1px }

/* Ingresso allo scroll (solo con JS attivo) */
.js-reveal [data-reveal] {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms)
}
.js-reveal [data-reveal].is-in { opacity:1; transform:none }
.js-reveal .landing-features article[data-reveal].is-in { transition:opacity .9s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out); transition-delay:0s }
.js-reveal .landing-scene[data-reveal] { transform:rotate(-2deg) translateY(32px) }
.js-reveal .landing-scene[data-reveal].is-in { transform:rotate(-2deg) }

/* Passi: ingresso scaglionato */
.js-reveal .landing-steps li { opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay:calc(var(--i,0) * 60ms + 150ms) }
.js-reveal .landing-steps li:nth-child(2) { --i:1 }
.js-reveal .landing-steps li:nth-child(3) { --i:2 }
.js-reveal .landing-steps.is-in li { opacity:1; transform:none }

/* Schede cliccabili: riscontro alla pressione */
.tavola-landing .landing-features article:has(>a):active { transform:scale(.985); transition-duration:.14s }

/* Effetti hover solo con mouse vero (niente hover "incollati" su touch) */
@media (hover:hover) and (pointer:fine) {
  .btn:hover svg { transform:translateX(3px) }
  .tavola-landing .btn:hover { transform:translateY(-2px) }
  .landing-text-link:hover svg { transform:translate(2px,-2px) }
  .landing-scene:hover, .js-reveal .landing-scene[data-reveal].is-in:hover { transform:rotate(-1deg) translateY(-4px) }
  .landing-spot:hover { transform:translateY(-3px) }
  .landing-spot:hover .landing-table { box-shadow:0 1px 0 #fff inset, 0 14px 22px -10px #163e4233 }
  .landing-features article:hover { transform:translateY(-4px); box-shadow:0 0 0 1px #163e4214, 0 24px 48px -20px #163e4233 }
  .tavola-landing .landing-features article:has(>a):hover:active { transform:translateY(-4px) scale(.985) }
  .landing-features article:hover::before { opacity:1; transform:scale(1.15) }
  .landing-features article>a:hover svg { transform:translate(2px,-2px) }
}

@media(max-width:900px) {
  .landing-nav { width:calc(100% - 40px) }
  .landing-hero { grid-template-columns:1fr; gap:70px; padding:56px 0 110px }
  .landing-hero h1 { font-size:clamp(52px,11vw,80px) }
  .landing-scene { max-width:560px; margin-right:30px }
  .landing-intro { grid-template-columns:1fr; row-gap:0 }
  .landing-intro p { margin-top:22px }
  .landing-features { padding-bottom:110px }
  .landing-features article { padding:32px 28px 30px }
  .landing-steps { grid-template-columns:1fr; padding:48px; gap:40px; margin-bottom:100px }
  .landing-steps>div { position:static }
  .landing-faq { grid-template-columns:1fr; margin-bottom:100px }
  .landing-faq h2 { position:static; grid-row:auto; margin-bottom:28px }
  .landing-customer-note { right:-10px }
  .landing-room-label small { display:none }
}

@media(max-width:600px) {
  html { scroll-padding-top:90px }
  .landing-nav { top:10px; margin-top:10px; width:calc(100% - 24px); padding:8px 8px 8px 12px; gap:10px }
  .landing-nav nav { gap:2px }
  .landing-nav nav>a:first-child { display:none }
  .landing-nav nav>a:not(.btn) { padding:10px }
  .landing-nav nav .btn { margin-left:2px; padding:10px 14px }
  .landing-nav .brand { font-size:22px }
  .landing-nav .brand-icon { width:32px; height:32px; margin-right:8px }
  .tavola-landing main { padding:0 16px }
  .landing-hero { gap:60px; padding:40px 0 90px }
  .landing-hero h1 { font-size:clamp(46px,14vw,60px); letter-spacing:-.04em }
  .landing-hero p { font-size:16px }
  .landing-hero .eyebrow { font-size:10px }
  .landing-actions { gap:20px; margin-top:30px }
  .landing-text-link { font-size:13px }
  .landing-scene { padding:16px; transform:rotate(-1deg); margin:0 10px 0 4px }
  .js-reveal .landing-scene[data-reveal], .js-reveal .landing-scene[data-reveal].is-in { transform:rotate(-1deg) }
  .landing-table-grid { gap:14px 12px; padding:0 2px }
  .landing-table { min-height:76px }
  .landing-spot { --d:76px }
  .landing-production { padding-bottom:30px }
  .landing-customer-note { right:-8px; bottom:-42px; font-size:11px; padding:14px 18px }
  .landing-intro { padding:24px 0 40px }
  .landing-intro .eyebrow { font-size:10px; margin-top:24px }
  .landing-intro p { font-size:16px }
  .landing-features { grid-template-columns:1fr; gap:16px; padding-bottom:80px }
  .landing-features article { padding:28px 24px 26px; border-radius:24px }
  .landing-features article:nth-child(even) { margin:0 }
  .landing-features h3 { margin-top:28px }
  .landing-features p { font-size:14px }
  .landing-steps { padding:32px 22px; border-radius:28px; margin-bottom:80px; gap:28px }
  .landing-steps li { grid-template-columns:52px 1fr; padding:24px 0 }
  .landing-steps li>span { font-size:28px }
  .landing-faq { margin-bottom:80px }
  .landing-faq summary { font-size:16px; padding:20px 0 }
  .landing-faq p { padding-right:0; font-size:14px }
  .landing-end { padding:72px 20px 84px; border-radius:28px; margin-bottom:32px }
  .landing-footer { flex-wrap:wrap; gap:16px 24px; padding:24px 16px 32px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after { animation:none !important; transition-property:opacity, color, background-color, border-color, box-shadow !important }
  .js-reveal [data-reveal], .js-reveal .landing-steps li { transform:none !important }
  .js-reveal .landing-scene[data-reveal] { transform:rotate(-2deg) !important }
}