/* Kravie: the same burgundy, gold dot, ink glass and round shapes as the apps. */
@font-face { font-family: Alexandria; src: url(/fonts/alexandria-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Alexandria; src: url(/fonts/alexandria-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Alexandria; src: url(/fonts/alexandria-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: Urbanist; src: url(/fonts/urbanist-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Urbanist; src: url(/fonts/urbanist-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Urbanist; src: url(/fonts/urbanist-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --brand: #a3262c; --deep: #8c1e25; --wine: #6e161c; --gold: #e5c95e;
  --ink: #121316; --muted: #5f646d; --cloud: #f4f5f7; --line: #edeef1; --white: #fff;
  --edge: rgba(229, 201, 94, .45);
  --side: clamp(20px, 5vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--ink); background: var(--cloud); font: 400 17px/1.75 Alexandria, Tahoma, sans-serif; }
html[lang="en"] body { font-family: Urbanist, "Helvetica Neue", Arial, sans-serif; font-size: 18px; line-height: 1.65; }
[dir="ltr"] h1, h1[dir="ltr"] { font-family: Urbanist, Arial, sans-serif; }
h1, h2, h3, p, ol, ul { margin: 0; }
a { color: var(--brand); }
img { display: block; }
i { color: var(--gold); font-style: normal; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; z-index: 30; padding: 8px 16px; border-radius: 20px; background: var(--white); }
.skip:focus { inset-inline-start: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* the floating bar: the apps' tab bar glass */
.bar {
  position: sticky; top: 12px; z-index: 20; margin: 12px auto 0; width: calc(100% - 24px); max-width: 1120px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 18px;
  background: rgba(18, 19, 22, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 32px; color: var(--white); box-shadow: 0 12px 30px rgba(60, 8, 14, .25);
}
[dir="rtl"] .bar { padding: 8px 18px 8px 10px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 800; font-size: 20px; text-decoration: none; }
.mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--white); }
.bar nav { display: flex; align-items: center; gap: 2px; font-size: 15px; }
.bar nav a { padding: 8px 12px; min-height: 40px; display: flex; align-items: center; border-radius: 20px; color: rgba(255, 255, 255, .84); text-decoration: none; }
.bar nav a:hover { background: rgba(255, 255, 255, .09); color: var(--white); }
.bar nav .lang { margin-inline-start: 4px; background: rgba(255, 255, 255, .12); color: var(--white); font-weight: 600; }

.disc { position: absolute; border-radius: 50%; pointer-events: none; }
.d1 { width: 520px; height: 520px; inset-inline-start: -180px; top: -240px; border: 1px solid rgba(255, 255, 255, .14); }
.d2 { width: 360px; height: 360px; inset-inline-end: -130px; bottom: -150px; background: var(--deep); }
.d3 { width: 180px; height: 180px; inset-inline-start: 38%; bottom: -70px; border: 1px solid rgba(255, 255, 255, .1); }

/* hero */
.hero { position: relative; overflow: hidden; margin-top: -76px; padding: 140px var(--side) 72px; background: var(--brand); color: var(--white); border-radius: 0 0 44px 44px; }
.hero-in { position: relative; max-width: 1120px; margin: auto; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; }
.kicker { font-weight: 600; font-size: 16px; color: rgba(255, 255, 255, .78); }
.hero h1 { margin: 10px 0 18px; font-size: clamp(48px, 8.2vw, 92px); line-height: 1.02; letter-spacing: -.02em; font-weight: 300; text-align: start; }
.hero h1 span, .hero h1 b { display: block; }
.hero h1 b { font-weight: 800; }
[dir="rtl"] .hero h1 { text-align: right; }
.lead { max-width: 30em; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.6; color: rgba(255, 255, 255, .92); }
.soon { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 18px; border-radius: 24px; background: var(--wine); border: 1px solid var(--edge); color: var(--gold); font-weight: 600; font-size: 15px; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

/* the phone: drawn from the home screen, a picture of the design rather than real restaurants */
.phone { justify-self: center; width: min(300px, 78vw); padding: 10px; background: var(--ink); border-radius: 44px; box-shadow: 0 34px 60px rgba(60, 8, 14, .5); rotate: 3deg; }
[dir="rtl"] .phone { rotate: -3deg; }
.screen { overflow: hidden; height: 560px; background: var(--cloud); border-radius: 35px; color: var(--ink); }
.s-head { padding: 26px 14px 16px; background: var(--brand); border-radius: 0 0 26px 26px; color: var(--white); }
.s-row { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.35; }
.s-row > div { flex: 1; min-width: 0; }
.s-row small { display: block; font-size: 10px; opacity: .72; }
.s-av, .s-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.s-av { background: var(--deep); border: 1px solid rgba(255, 255, 255, .2); }
.s-ic { position: relative; display: grid; place-items: center; background: var(--white); }
.s-ic svg { width: 17px; height: 17px; }
.s-ic.dot::after { content: ""; position: absolute; top: 5px; inset-inline-end: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--brand); }
.s-title { margin-top: 16px; font-size: 21px; line-height: 1.25; font-weight: 300; }
.s-title b { display: block; font-weight: 800; }
.s-search { display: flex; align-items: center; height: 40px; margin-top: 12px; padding-inline: 14px; border-radius: 20px; background: var(--white); color: #8a8f98; font-size: 12px; }
.s-card { position: relative; margin: 12px 12px 0; padding: 8px 8px 12px; border-radius: 24px; background: var(--white); border: 1px solid var(--edge); font-size: 14px; }
.s-card.ghost { border-color: transparent; }
.s-cover { position: relative; height: 104px; margin-bottom: 8px; border-radius: 18px; background: linear-gradient(135deg, #e9d3c0, #c98a5e); }
.ghost .s-cover { background: var(--line); }
.s-card b { padding-inline: 6px; }
.ribbon { position: relative; overflow: hidden; margin-top: 7px; padding: 5px 12px; border-radius: 14px; text-align: center; background: var(--wine); border: 1px solid var(--edge); color: var(--gold); font-size: 12px; font-weight: 600; }
.ribbon::after { content: ""; position: absolute; inset: -4px auto -4px 0; width: 26px; background: rgba(229, 201, 94, .22); transform: translateX(-60px) skewX(-22deg); animation: sheen 4.4s ease-in-out infinite; }
@keyframes sheen { 70% { transform: translateX(-60px) skewX(-22deg); } 100% { transform: translateX(300px) skewX(-22deg); } }
.seal { position: absolute; top: 8px; inset-inline-end: 8px; width: 68px; height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold); line-height: 1.1; filter: drop-shadow(0 4px 8px rgba(110, 22, 28, .45)); }
.seal svg { position: absolute; inset: 0; }
.seal b, .seal small { position: relative; padding: 0; }
.seal b { font-size: 16px; font-weight: 800; }
.seal small { font-size: 9px; font-weight: 600; }

/* sections */
.band { max-width: 1120px; margin: auto; padding: clamp(56px, 8vw, 96px) var(--side) 0; }
.band.ink { max-width: none; margin-top: clamp(56px, 8vw, 96px); padding: clamp(56px, 8vw, 88px) max(var(--side), calc((100% - 1008px) / 2)); background: var(--ink); color: var(--white); border-radius: 44px; }
.title { margin-bottom: 32px; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; font-weight: 300; }
.title span, .title b { display: block; }
.title b { font-weight: 800; }
h3 { font-size: 20px; line-height: 1.35; font-weight: 800; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps li, .apps article { padding: 26px; background: var(--white); border-radius: 30px; }
.n { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%; background: var(--brand); color: var(--white); font-weight: 800; }
.steps p, .apps p { margin-top: 6px; color: var(--muted); font-size: 16px; }
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feats article { padding: 26px; border-radius: 30px; background: rgba(255, 255, 255, .08); }
.feats article:first-child { background: var(--wine); border: 1px solid var(--edge); }
.feats article:first-child h3 { color: var(--gold); }
.feats p { margin-top: 6px; color: rgba(255, 255, 255, .72); font-size: 16px; }
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.apps .mark { margin-bottom: 18px; background: var(--cloud); width: 56px; height: 56px; }
.join { position: relative; overflow: hidden; max-width: 1008px; margin: clamp(56px, 8vw, 96px) auto 0; width: calc(100% - 2 * var(--side)); padding: clamp(36px, 6vw, 64px); background: var(--brand); color: var(--white); border-radius: 40px; }
.join h2 { position: relative; font-size: clamp(26px, 4vw, 38px); line-height: 1.25; font-weight: 800; }
.join p { position: relative; margin-top: 8px; color: rgba(255, 255, 255, .85); }
.cta { position: relative; display: inline-block; margin-top: 22px; padding: 14px 28px; border-radius: 28px; background: var(--white); color: var(--ink); font-weight: 800; text-decoration: none; transition: transform .16s ease; }
.cta:hover { transform: translateY(-2px); }

/* legal pages */
.legal-head { position: relative; overflow: hidden; margin-top: -76px; padding: 136px var(--side) 56px; background: var(--brand); color: var(--white); border-radius: 0 0 40px 40px; }
.legal-in { position: relative; max-width: 1008px; margin: auto; }
.legal-head h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.15; font-weight: 800; }
.date { margin-top: 8px; color: rgba(255, 255, 255, .78); font-size: 15px; }
.date a { color: var(--white); }
.legal { max-width: 1120px; margin: 28px auto 0; padding: 0 var(--side); display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.legal aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; padding: 18px; background: var(--white); border-radius: 26px; font-size: 15px; line-height: 1.4; }
.legal aside h2 { margin-bottom: 8px; padding-inline: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.legal aside a { padding: 8px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.legal aside a:hover { background: var(--cloud); color: var(--brand); }
.legal article { padding: clamp(24px, 4vw, 44px); background: var(--white); border-radius: 32px; }
.intro { font-size: 19px; font-weight: 600; }
.legal section { margin-top: 32px; }
.legal section h2 { margin-bottom: 8px; font-size: 22px; line-height: 1.35; font-weight: 800; }
.legal ul, .legal ol { padding-inline-start: 22px; margin-bottom: 10px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--brand); font-weight: 800; }

footer { margin-top: clamp(56px, 8vw, 96px); padding: 48px var(--side) 28px; background: var(--ink); color: rgba(255, 255, 255, .72); border-radius: 44px 44px 0 0; font-size: 15px; }
.foot { max-width: 1008px; margin: auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.foot-brand p { margin-top: 12px; max-width: 24em; }
.foot h2 { margin-bottom: 8px; color: var(--white); font-size: 15px; font-weight: 800; }
.foot a { display: block; padding: 4px 0; color: rgba(255, 255, 255, .72); text-decoration: none; }
.foot a:hover { color: var(--gold); }
[dir="rtl"] .foot a[dir="ltr"] { text-align: right; }
.rights { max-width: 1008px; margin: 32px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }

@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; gap: 44px; }
  .steps, .apps { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; }
  .legal aside { position: static; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .bar nav a:not(.lang):not(:nth-last-child(2)) { display: none; }
  .feats { grid-template-columns: 1fr; }
  .hero { border-radius: 0 0 32px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse, .ribbon::after { animation: none; }
  .cta { transition: none; }
}