@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --terracotta:#C4553A; --terracotta-dark:#A3432C;
  --safran:#E9A23B; --menthe:#2E8B6B; --menthe-deep:#1F5E49;
  --creme:#FBF5EC; --sable:#F1E6D4; --ligne:#E2D4BE;
  --encre:#221C18; --encre-2:#5A4E45;
  --font:"Inter","Plex Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:72rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--encre);font:400 1.0625rem/1.6 var(--font)}
html[dir=rtl] body{font-family:"Plex Arabic","Inter",system-ui,sans-serif;line-height:1.75}
img,svg{max-width:100%;display:block}
a{color:var(--terracotta-dark)}
a:hover{color:var(--encre)}
:focus-visible{outline:3px solid var(--menthe);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:1.25rem}
.skip{position:absolute;inset-inline-start:-999px;top:0}
.skip:focus{inset-inline-start:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:10}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.25rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--encre);font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.brand img{width:2.25rem;height:2.25rem}
.langs{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.langs a{display:inline-block;padding:.4rem .7rem;border-radius:999px;text-decoration:none;color:var(--encre-2);font-size:.95rem;min-height:44px;line-height:1.8}
.langs a[aria-current=page]{background:var(--encre);color:var(--creme)}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding-block:2.5rem 4.5rem}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.1rem);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin:0 0 1.25rem;max-width:14ch}
html[dir=rtl] .hero h1{letter-spacing:0;line-height:1.25;max-width:16ch}
.hero .lead{font-size:1.2rem;color:var(--encre-2);max-width:36ch;margin:0 0 2rem}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.6rem;border-radius:14px;background:var(--terracotta);color:#fff;font-weight:600;text-decoration:none;font-size:1.05rem;box-shadow:0 1px 0 var(--terracotta-dark)}
.cta:hover{background:var(--terracotta-dark);color:#fff}
.note{margin:1rem 0 0;color:var(--encre-2);font-size:.95rem}

/* The plate: the one memorable thing */
.visual{position:relative;margin:0;max-width:32rem;width:100%;margin-inline:auto;padding-bottom:3.5rem}
.plate{position:relative;aspect-ratio:1;width:88%}
.plate .mida{position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(circle at 50% 50%,var(--sable) 0 58%,transparent 58.4%),
  repeating-conic-gradient(from 22.5deg,#ead9bf 0 22.5deg,#f3e7d3 22.5deg 45deg);border:10px solid #d9c4a3}
.plate .dish{position:absolute;inset:16%}
.plate .scan{position:absolute;inset:10%;pointer-events:none}
.plate .scan path{fill:none;stroke:var(--encre);stroke-width:3;stroke-linecap:round}
.result{position:absolute;inset-inline-end:0;bottom:0;width:min(17rem,60%);background:#fff;border-radius:18px;padding:1rem 1.1rem 1.1rem;box-shadow:0 18px 40px -18px rgba(34,28,24,.45);border:1px solid var(--ligne)}
.result .name{font-weight:600;margin:0;font-size:1rem;line-height:1.3}
.result .kcal{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin:.15rem 0 .5rem;color:var(--terracotta-dark)}
html[dir=rtl] .result .kcal{letter-spacing:0}
.result ul{list-style:none;margin:0;padding:0;font-size:.92rem}
.result li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-top:1px solid #f0e6d6}
.result li span:last-child{color:var(--encre-2);font-variant-numeric:tabular-nums}
.result .demo{margin:.6rem 0 0;font-size:.78rem;color:var(--encre-2)}
@media (prefers-reduced-motion:no-preference){
  .plate .scan{animation:breathe 3.2s ease-in-out 1 both}
  @keyframes breathe{0%{opacity:0;transform:scale(1.08)}60%{opacity:1;transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
}

/* Sections */
section{padding-block:4.5rem}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.025em;font-weight:800;margin:0 0 1rem;max-width:22ch}
html[dir=rtl] h2{letter-spacing:0;line-height:1.35}
h3{font-size:1.2rem;margin:0 0 .4rem;font-weight:600}
.prose{max-width:62ch;color:var(--encre-2)}
.problem{background:var(--sable)}
.dishes{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:2rem 0 0}
.dishes li{background:var(--creme);border:1px solid var(--ligne);border-radius:999px;padding:.45rem 1rem;font-weight:600}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;list-style:none;padding:0;margin:2.5rem 0 0;counter-reset:s}
.steps li{counter-increment:s;padding-top:1rem;border-top:3px solid var(--encre)}
.steps li::before{content:counter(s);display:block;font-weight:800;font-size:2.4rem;line-height:1;color:var(--terracotta);margin-bottom:.75rem}
.steps p{margin:0;color:var(--encre-2)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.pair p{color:var(--encre-2);margin:0}
.quote{margin-top:1rem!important;font-weight:600;color:var(--encre)!important;font-size:1.1rem}

.privacy{background:var(--menthe-deep);color:#F3EFE6}
.privacy h2{color:#fff}
.privacy .prose{color:#D9E6DF}
.privacy a{color:#fff}

.faq details{border-bottom:1px solid var(--ligne);padding-block:1.1rem;max-width:52rem}
.faq summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style-position:outside}
.faq details p{margin:.6rem 0 0;color:var(--encre-2);max-width:62ch}

.final{text-align:center}
.final h2{margin-inline:auto}
.final p{margin-inline:auto}

/* Footer */
footer{border-top:1px solid var(--ligne);padding-block:2.5rem;font-size:.95rem;color:var(--encre-2)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
footer a{color:var(--encre-2)}
footer a:hover{color:var(--encre)}
footer p{margin:0}

/* Legal pages */
.legal{max-width:46rem;padding-block:2rem 4rem}
.legal h1{font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.03em;line-height:1.1;margin:0 0 .5rem}
.legal h2{font-size:1.35rem;letter-spacing:-.01em;margin:2.25rem 0 .5rem;max-width:none}
.legal p,.legal li{color:var(--encre-2)}
.legal .updated{font-size:.9rem}

/* Chooser */
.chooser{min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem 1.25rem}
.chooser img{width:5rem;height:5rem;margin:0 auto 1rem}
.chooser h1{font-size:2.75rem;letter-spacing:-.03em;margin:0}
.chooser p{color:var(--encre-2);margin:.5rem 0 2rem}
.chooser ul{list-style:none;padding:0;margin:0;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.chooser a{display:inline-flex;min-height:52px;align-items:center;padding:.8rem 1.5rem;border-radius:14px;border:1.5px solid var(--encre);text-decoration:none;color:var(--encre);font-weight:600}
.chooser a:hover{background:var(--encre);color:var(--creme)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:3.5rem;padding-top:1rem}
  .visual{max-width:26rem;padding-bottom:0}
  .plate{width:80%}
  .result{position:relative;width:78%;margin:-5.5rem 0 0 auto;inset:auto}
  html[dir=rtl] .result{margin:-5.5rem auto 0 0}
  .steps,.pair{grid-template-columns:1fr}
  section{padding-block:3.25rem}
}