/* Home v4: warm paper, one accent, big calm type. Prefix n- keeps it apart from the other pages. */
body { background: #faf9f8; }
.n-wrap { width: min(1160px, 100% - 48px); margin: 0 auto; }
.n-sec { padding: 110px 0; }
.n-tint { background: #f2f1ef; }
.n-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.n-h2 { text-align: center; font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -.03em; margin-bottom: 56px; }

.n-hero { text-align: center; padding: 160px 24px 0; overflow: hidden; position: relative; }
.n-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #ece4d6; border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 500; }
.n-chip i { color: var(--red); }
.n-hero h1 { font-size: clamp(52px, 8.4vw, 120px); font-weight: 600; letter-spacing: -.05em; line-height: .98; margin: 26px auto 0; max-width: 1000px; }
.n-hero h1 em { font-style: normal; color: var(--red); display: block; }
.n-lead { max-width: 560px; margin: 28px auto 34px; font-size: 19px; color: #6b6965; }
.n-find { display: flex; align-items: center; gap: 12px; width: min(560px, 100%); margin: 0 auto; background: #fff; border: 1px solid #e6dccb; border-radius: 999px; padding: 8px 8px 8px 22px; color: #9c9a96; text-decoration: none; box-shadow: 0 10px 30px rgba(120,80,20,.08); }
.n-find i { font-size: 22px; color: var(--ink); } .n-find span { flex: 1; text-align: left; }
.n-find b { background: var(--ink); color: #fff; font-weight: 500; border-radius: 999px; padding: 14px 26px; }
.n-dishes { position: relative; height: 430px; margin-top: 30px; }
.n-dishes img { position: absolute; bottom: -90px; filter: drop-shadow(0 30px 34px rgba(80,40,0,.28)); }
.n-dishes .a { width: 380px; left: calc(50% - 600px); transform: rotate(-10deg); animation: bob 6s ease-in-out infinite; }
.n-dishes .b { width: 520px; left: calc(50% - 260px); bottom: -140px; z-index: 2; animation: bob 7s ease-in-out -2s infinite; }
.n-dishes .c { width: 430px; left: calc(50% + 230px); transform: rotate(9deg); animation: bob 6.5s ease-in-out -4s infinite; }
@keyframes bob { 50% { translate: 0 -12px; } }
@media (max-width: 980px) { .n-dishes { height: 300px; } .n-dishes .a { width: 210px; left: -40px; } .n-dishes .b { width: 300px; left: calc(50% - 150px); bottom: -90px; } .n-dishes .c { width: 230px; left: auto; right: -50px; } }

.n-ticker { background: var(--ink); color: #fff; overflow: hidden; padding: 20px 0; position: relative; z-index: 3; }
.n-ticker div { display: flex; gap: 44px; width: max-content; animation: tick 40s linear infinite; font-size: 20px; font-weight: 500; }
.n-ticker span::after { content: "✦"; color: var(--mustard); margin-left: 44px; }
@keyframes tick { to { transform: translateX(-50%); } }

.n-steps { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.n-sticky { position: sticky; top: 130px; }
.n-sticky h2 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; }
.n-sub { margin-top: 20px; font-size: 18px; color: #6b6965; max-width: 380px; }
.n-list { display: grid; gap: 22px; }
.n-list article { background: #fff; border: 1px solid #ece4d6; border-radius: 32px; padding: 34px 34px 0; display: grid; grid-template-columns: 1fr 190px; gap: 20px; align-items: end; overflow: hidden; position: relative; }
.n-num { position: absolute; top: 28px; left: 34px; width: 38px; height: 38px; border-radius: 50%; background: var(--mustard); display: grid; place-items: center; font-weight: 700; }
.n-list article > div:nth-child(2) { padding: 62px 0 34px; }
.n-list h3 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.n-list p { color: #6b6965; }
.n-ph { height: 250px; overflow: hidden; border: 6px solid var(--ink); border-bottom: 0; border-radius: 30px 30px 0 0; }
.n-ph img { width: 100%; display: block; }
@media (max-width: 900px) { .n-steps { grid-template-columns: 1fr; gap: 40px; } .n-sticky { position: static; } .n-list article { grid-template-columns: 1fr; } .n-ph { width: 190px; justify-self: center; } }

.n-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.n-feats div { background: #faf9f8; border-radius: 28px; padding: 30px 26px 34px; }
.n-feats i { font-size: 38px; color: var(--red); }
.n-feats h3 { font-size: 20px; font-weight: 600; margin: 18px 0 6px; } .n-feats p { color: #6b6965; font-size: 16px; }
@media (max-width: 900px) { .n-feats { grid-template-columns: 1fr 1fr; } }

.n-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.n-card { border-radius: 40px; padding: 48px; min-height: 480px; position: relative; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.n-card.y { background: var(--mustard); } .n-card.r { background: var(--red); color: #fff; }
.n-card.r .n-eyebrow { color: var(--mustard); }
.n-card.y .n-eyebrow { color: var(--ink); opacity: .6; }
.n-card h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; max-width: 380px; }
.n-card > p:not(.n-eyebrow) { margin-top: 16px; max-width: 340px; opacity: .85; }
.n-go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 999px; font-weight: 500; align-self: flex-start; position: relative; z-index: 2; }
.n-card img { position: absolute; right: -70px; bottom: -50px; width: 380px; filter: drop-shadow(0 24px 28px rgba(0,0,0,.28)); transform: rotate(-10deg); transition: transform .5s; }
.n-card:hover img { transform: rotate(-4deg) scale(1.06); }
@media (max-width: 900px) { .n-duo { grid-template-columns: 1fr; } .n-card { min-height: 420px; } }

.n-app { padding-top: 0; }
.n-appin { background: var(--ink); color: #fff; border-radius: 44px; padding: 70px 70px 0; display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: end; overflow: hidden; }
.n-appin h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 600; letter-spacing: -.03em; } .n-appin p { margin: 14px 0 30px; opacity: .75; font-size: 18px; }
.n-appin > div:first-child { padding-bottom: 70px; align-self: center; }
.n-phone { border: 8px solid #3a3835; border-bottom: 0; border-radius: 44px 44px 0 0; height: 380px; overflow: hidden; } .n-phone img { width: 100%; display: block; }
@media (max-width: 800px) { .n-appin { grid-template-columns: 1fr; padding: 44px 28px 0; } .n-phone { width: 240px; justify-self: center; } }

/* Tighter scale + Barlow Condensed on the big titles */
.n-sec { padding: 80px 0; }
.n-hero { padding-top: 140px; }
.n-hero h1, .n-sticky h2, .n-h2, .n-card h2, .n-appin h2, .n-page h1 { font-family: "Barlow Condensed", "Onest", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; line-height: .95; }
.n-hero h1 { font-size: clamp(48px, 7vw, 92px); max-width: 820px; margin-top: 22px; }
.n-lead { font-size: 17px; margin: 22px auto 28px; max-width: 520px; }
.n-find { width: min(500px, 100%); } .n-find b { padding: 12px 22px; }
.n-dishes { height: 340px; margin-top: 24px; }
.n-dishes .a { width: 290px; left: calc(50% - 470px); }
.n-dishes .b { width: 400px; left: calc(50% - 200px); bottom: -110px; }
.n-dishes .c { width: 330px; left: calc(50% + 180px); }
.n-h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 40px; }
.n-sticky h2 { font-size: clamp(36px, 4vw, 54px); }
.n-sub { font-size: 16px; }
.n-list { gap: 18px; } .n-list article { border-radius: 26px; padding: 26px 28px 0; grid-template-columns: 1fr 160px; }
.n-list article > div:nth-child(2) { padding: 56px 0 26px; } .n-list h3 { font-size: 22px; }
.n-ph { height: 210px; border-width: 5px; border-radius: 26px 26px 0 0; }
.n-feats div { padding: 24px 22px 26px; border-radius: 22px; } .n-feats i { font-size: 32px; } .n-feats h3 { font-size: 18px; }
.n-card { border-radius: 30px; padding: 36px; min-height: 380px; }
.n-card h2 { font-size: clamp(30px, 3vw, 42px); max-width: 360px; }
.n-card img { width: 290px; right: -50px; bottom: -40px; }
.n-appin { border-radius: 32px; padding: 52px 52px 0; grid-template-columns: 1fr 250px; }
.n-appin h2 { font-size: clamp(32px, 3.6vw, 48px); } .n-appin p { font-size: 16px; }
.n-phone { height: 300px; border-width: 7px; }
.n-ticker { padding: 14px 0; } .n-ticker div { font-size: 16px; gap: 32px; } .n-ticker span::after { margin-left: 32px; }

/* Text pages (contact, legal) */
.n-page { padding: 150px 0 80px; }
.n-narrow { max-width: 760px; }
.n-page h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 14px; }
.n-page .n-sub { margin: 0 0 40px; max-width: 620px; }
.n-doc { padding: 22px 0; border-top: 1px solid #e6dccb; }
.n-doc h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.n-doc p { color: #3d3b39; line-height: 1.65; font-size: 16px; }
.n-go.dark { margin-top: 26px; display: inline-flex; }

/* Registration */
.n-reg { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
.n-reg h1 { font-family: "Barlow Condensed", "Onest", sans-serif; font-weight: 700; text-transform: uppercase; line-height: .95; font-size: clamp(40px, 4.6vw, 62px); margin-bottom: 16px; }
.n-regtxt .n-sub { margin: 0 0 32px; }
.n-ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: s; }
.n-ol li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 0 14px; }
.n-ol li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--mustard); display: grid; place-items: center; font-weight: 700; }
.n-ol span { color: #6b6965; font-size: 15px; }
.n-form, .n-done { background: #fff; border: 1px solid #ece4d6; border-radius: 28px; padding: 34px; display: grid; gap: 16px; }
.n-form h2 { font-size: 18px; font-weight: 600; margin-top: 6px; }
.n-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.n-form small { color: #9c9a96; font-weight: 400; }
.n-form input:not([type=checkbox]), .n-form textarea { font: inherit; font-weight: 400; padding: 13px 14px; border: 1px solid #e0d6c4; border-radius: 12px; background: #faf9f8; width: 100%; }
.n-form input:focus, .n-form textarea:focus { outline: 2px solid var(--red); border-color: transparent; background: #fff; }
.n-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.n-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: #3d3b39; } .n-check input { margin-top: 4px; accent-color: var(--red); } .n-check a { color: var(--red); }
.n-submit { background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 16px 26px; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; justify-content: center; }
.n-submit:hover { filter: brightness(.95); }
.n-err { color: #c1220f; font-size: 14px; } .n-note { color: #9c9a96; font-size: 13px; text-align: center; }
.n-done { text-align: center; justify-items: center; } .n-done i { font-size: 56px; color: #1a9c55; } .n-done a { color: var(--red); }
@media (max-width: 900px) { .n-reg { grid-template-columns: 1fr; gap: 36px; } .n-row { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

/* Same language as the mobile app: neutral bun greys, ketchup, no borders, 16/20/24 radii */
:root { --red: #f04a1e; --bun: #f2f1ef; }
body { background: #faf9f8; }
.n-chip, .n-list article, .n-form, .n-done, .n-find { border: 0; }
.n-list article, .n-form, .n-done { box-shadow: none; background: #fff; border-radius: 24px; }
.n-feats div { background: #fff; border-radius: 24px; }
.n-doc { border-top-color: #e6e4e0; }
.n-find { border-radius: 20px; box-shadow: none; background: #f2f1ef; padding: 6px 6px 6px 18px; }
.n-find b, .n-submit, .n-go { border-radius: 16px; }
.n-submit { min-height: 56px; border-radius: 20px; }
.n-form input:not([type=checkbox]), .n-form textarea { background: #f2f1ef; border: 0; border-radius: 16px; padding: 16px; }
.n-form input:focus, .n-form textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px #1f1e1d; background: #f2f1ef; }
.n-form input::placeholder, .n-form textarea::placeholder { color: #6b6965; }
.n-card { border-radius: 32px; }
.n-ticker { background: #1f1e1d; }

/* ===== Premium pass: UI fragments instead of screenshots ===== */
.n-eyebrow.c { text-align: center; }
.n-list article { grid-template-columns: 1fr 250px; align-items: center; padding: 28px 28px; overflow: visible; }
.n-list article > div:nth-child(2) { padding: 0; }
.st-txt { position: relative; padding-top: 52px; }
.st-txt .n-num { top: 0; left: 0; }
.ui { background: #fff; border-radius: 24px; box-shadow: 0 18px 44px rgba(31,30,29,.14); font-size: 13px; overflow: hidden; }
.n-list article .ui { transform: rotate(2deg); transition: transform .4s; } .n-list article:hover .ui { transform: rotate(0); }
/* restaurant card */
.ui-resto { padding: 10px; }
.ui-resto-img { height: 120px; border-radius: 18px; background: linear-gradient(135deg, #ffd9a0, #ff9d3f); position: relative; display: grid; place-items: center; }
.ui-resto-img img { width: 130px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.ui-tag { position: absolute; left: 10px; top: 10px; background: var(--red); color: #fff; font-weight: 700; padding: 4px 9px; border-radius: 8px; font-size: 12px; }
.ui-resto-row { display: flex; justify-content: space-between; padding: 10px 6px 0; font-size: 14px; }
.ui-rate i { color: #ffb400; } .ui-resto-meta { padding: 2px 6px 6px; color: #6b6965; } .ui-resto-meta em { font-style: normal; color: var(--red); font-weight: 500; }
/* payment */
.ui-pay { padding: 14px; display: grid; gap: 8px; }
.ui-pay-title { font-weight: 600; font-size: 14px; padding: 2px 4px 4px; }
.ui-opt { display: flex; align-items: center; gap: 10px; background: #f2f1ef; border-radius: 14px; padding: 11px 12px; font-weight: 500; }
.ui-opt i { font-size: 18px; } .ui-opt span { flex: 1; } .ui-opt u { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c9c7c3; }
.ui-opt.on { box-shadow: inset 0 0 0 1.5px #1f1e1d; background: #fff; } .ui-opt.on u { border-color: var(--red); background: radial-gradient(var(--red) 45%, transparent 50%); }
.ui-cta { margin-top: 4px; background: var(--red); color: #fff; text-align: center; padding: 13px; border-radius: 16px; font-weight: 600; font-size: 14px; }
/* tracking */
.ui-track { padding: 0; }
.ui-map { height: 120px; position: relative; background: #eef1ee; background-image: linear-gradient(90deg, rgba(255,255,255,.9) 2px, transparent 2px), linear-gradient(0deg, rgba(255,255,255,.9) 2px, transparent 2px), linear-gradient(115deg, transparent 46%, #ffe49a 47%, #ffe49a 49%, transparent 50%); background-size: 38px 38px, 38px 38px, 100% 100%; }
.ui-map .pin { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: #1f1e1d; color: #fff; display: grid; place-items: center; font-size: 14px; }
.ui-map .a { left: 22%; top: 18%; } .ui-map .c { right: 18%; top: 30%; } .ui-map .b { left: 48%; top: 52%; background: var(--red); }
.ui-eta { padding: 12px 16px 4px; text-align: center; } .ui-eta b { display: block; font-size: 15px; } .ui-eta span { color: #6b6965; }
.ui-steps { display: flex; justify-content: space-between; padding: 8px 16px 14px; }
.ui-steps i { width: 34px; height: 34px; border-radius: 50%; background: #f2f1ef; display: grid; place-items: center; font-size: 16px; color: #8b8985; }
.ui-steps i.on { background: var(--mustard); color: #1f1e1d; box-shadow: 0 6px 14px rgba(255,200,0,.5); }
/* bento */
.n-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bt { background: #fff; border-radius: 32px; padding: 30px; display: flex; flex-direction: column; gap: 6px; min-height: 230px; overflow: hidden; position: relative; }
.bt.wide { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.bt > i, .bt.wide > div > i { font-size: 30px; color: var(--red); background: #ffe9e1; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 14px; }
.bt h3 { font-size: 20px; font-weight: 600; } .bt p { color: #6b6965; font-size: 15px; }
.ui-chips { box-shadow: none; background: transparent; display: grid; gap: 8px; } .ui-chips span { background: #f2f1ef; padding: 8px 16px; border-radius: 999px; font-weight: 500; white-space: nowrap; text-align: center; color: #8b8985; }
.ui-chips .on { background: #1f1e1d; color: #fff; } .ui-chips .live { background: var(--mustard); color: #1f1e1d; }
.ui-qr { box-shadow: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 66px; margin-top: auto; background: transparent; }
.ui-qr span { aspect-ratio: 1; background: #1f1e1d; border-radius: 3px; } .ui-qr span:nth-child(2n) { background: #d8d6d2; }
.ui-code { box-shadow: none; background: var(--mustard); padding: 16px 20px; border-radius: 22px; text-align: center; transform: rotate(-4deg); min-width: 170px; }
.ui-code small { display: block; font-weight: 600; letter-spacing: .08em; } .ui-code b { display: block; font-family: "Barlow Condensed"; font-size: 30px; border: 2px dashed #1f1e1d; border-radius: 12px; margin: 6px 0; padding: 2px 8px; } .ui-code span { font-weight: 600; }
@media (max-width: 900px) { .n-bento { grid-template-columns: 1fr 1fr; } .bt.wide { grid-column: span 2; flex-direction: column; align-items: flex-start; } }
/* pro */
.n-pro { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; margin-bottom: 22px; }
.n-pro-txt h2 { font-family: "Barlow Condensed"; text-transform: uppercase; font-weight: 700; line-height: .95; font-size: clamp(34px, 4vw, 52px); }
.n-pro-txt > p:not(.n-eyebrow) { margin-top: 16px; color: #6b6965; }
.ui-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; background: #f2f1ef; border-radius: 32px; box-shadow: 0 30px 60px rgba(31,30,29,.12); }
.bd-col h4 { font-size: 13px; font-weight: 600; padding: 6px 6px 10px; display: flex; align-items: center; gap: 6px; } .bd-col h4 b { margin-left: auto; background: #1f1e1d; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .d.r { background: var(--red); } .d.y { background: #f0b400; } .d.g { background: #1a9c55; }
.bd-card { background: #fff; border-radius: 18px; padding: 12px; margin-bottom: 10px; display: grid; gap: 3px; } .bd-card small { color: #8b8985; } .bd-card b { font-size: 14px; } .bd-card span { font-weight: 600; }
.bd-card u { text-decoration: none; margin-top: 6px; background: var(--red); color: #fff; text-align: center; border-radius: 12px; padding: 8px; font-weight: 600; } .bd-card u.ok { background: #1a9c55; } .bd-card.dim { opacity: .6; }
@media (max-width: 900px) { .n-pro { grid-template-columns: 1fr; } }
.n-duo2 { margin-top: 0; }
/* real mockup, only here */
.n-appin { grid-template-columns: 1fr 300px; overflow: hidden; padding-bottom: 0; align-items: end; }
.n-iphone { position: relative; width: 280px; margin-bottom: -60px; justify-self: center; aspect-ratio: 601 / 1219; }
.n-iphone .scr { position: absolute; left: 5.3%; top: 2.2%; width: 89.7%; height: 95.5%; object-fit: cover; object-position: top; border-radius: 9% / 4.5%; }
.n-iphone .frm { position: absolute; inset: 0; width: 100%; height: 100%; }
.n-phone { display: none; }
.bt.full { grid-column: span 4; } @media (max-width: 900px) { .bt.full { grid-column: span 2; } }
.n-pro { margin-bottom: 64px; }
#faq h2 { font-family: "Barlow Condensed", "Onest", sans-serif; text-transform: uppercase; font-weight: 700; font-size: clamp(34px, 4vw, 48px); }
/* Screen content starts under the dynamic island, never behind it */
.n-iphone .scr { top: 8.5%; height: 89.3%; background: #fff; border-radius: 0 0 9% 9% / 0 0 4.5% 4.5%; }
.n-iphone::before { content: ""; position: absolute; left: 5.3%; top: 2.2%; width: 89.7%; height: 95.5%; background: #fff; border-radius: 9% / 4.5%; }
.n-iphone .clock { position: absolute; z-index: 2; left: 13%; top: 3.8%; font-size: 11px; font-weight: 700; color: #1f1e1d; }
.n-iphone .frm { z-index: 3; }
.n-iphone .scr { z-index: 1; }