/* yrmenu.uz — brand system lifted from yrmenu.com (Manrope, #ee4136, #2c2e3c).
   One stylesheet, zero JS, no third-party requests. The look is deliberately
   restrained: this page's job is to make a cautious Uzbek restaurant owner
   trust a vendor they have never heard of, so the brand red is used as a
   precision accent, never as decoration. */
:root{
  --brand:#ee4136; --brand-d:#d5352b; --brand-t:rgba(238,65,54,.08);
  --ink:#2c2e3c; --ink-2:#4a4d5e; --muted:#797a85;
  --line:#e6e7ec; --bg:#fff; --bg-2:#f7f7f9; --dark:#1f212a;
  --tg:#229ED9;
  --wrap:1120px; --r:20px; --r-s:999px;
  /* Warm peach wash lifted from yrmenu.com's hero. A flat white hero was the
     single biggest reason this read as cheaper than the .com. */
  --wash-a:#fdeeec; --wash-b:#fbe9f0;
  --sh:0 1px 2px rgba(44,46,60,.05),0 8px 24px rgba(44,46,60,.06);
  --sh-h:0 2px 4px rgba(44,46,60,.06),0 16px 40px rgba(44,46,60,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16.5px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--brand);color:#fff}
a{color:var(--brand-d);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);
  outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.14;margin:0 0 .5em;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
h1{font-size:clamp(2rem,5.4vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.35rem)}
h3{font-size:1.14rem;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:12px 16px;z-index:20;border-radius:8px;box-shadow:var(--sh)}
.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px}

/* ── header ─────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-weight:800;font-size:1.1rem;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:30px;height:30px;border-radius:7px}
.brand span{color:var(--muted);font-weight:700}
.nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.93rem;font-weight:600;
  padding:9px 14px;border-radius:999px;transition:background .15s,color .15s;white-space:nowrap}
.lang-short{display:none}
@media (max-width:620px){
  /* Below this the full language name plus four links cannot share a 375px
     header, so the language collapses to its 2-letter code and Contact drops
     out — it is still in the footer and has its own page. Measured, not
     guessed: the nav wrapped to two lines and ate a fifth of the viewport. */
  .lang-long{display:none}
  .lang-short{display:inline}
  .nav-contact,.nav-demo{display:none}
}
@media (max-width:800px){
  .hdr-in{min-height:58px;gap:8px}
  .brand{font-size:.98rem;gap:8px}
  .brand img{width:26px;height:26px}
  .nav{gap:0}
  .nav a{font-size:.82rem;padding:7px 8px}
  .nav-login{padding:7px 11px}
}
.nav a:hover{background:var(--bg-2);color:var(--ink)}
.nav .lang{color:var(--brand-d)}
.nav-login{border:1px solid var(--line)}

/* ── hero ───────────────────────────────────────────────── */
.hero{padding:60px 0 56px;position:relative;overflow:hidden;background:
  radial-gradient(1100px 620px at 82% -14%,var(--wash-b),transparent 62%),
  radial-gradient(900px 520px at 4% 0%,var(--wash-a),transparent 58%),
  linear-gradient(180deg,#fff6f4,var(--bg))}
/* Decorative arc, echoing the curved line on the .com hero. Pure CSS, no asset. */
.hero::after{content:"";position:absolute;top:-28%;right:-18%;width:74%;aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(238,65,54,.13);pointer-events:none}
.hero-grid{display:grid;gap:38px;align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 em{font-style:normal;color:var(--brand)}
.lead{font-size:1.16rem;color:var(--ink-2);max-width:54ch;margin-bottom:1em}
.price-line{font-weight:700;color:var(--ink);font-size:1rem;position:relative;z-index:1;
  display:inline-block;background:#fff;border:1px solid var(--line);
  padding:9px 16px;border-radius:999px;box-shadow:var(--sh)}
.hero-media{position:relative;z-index:1;display:flex;justify-content:center}
/* The hero art is PORTRAIT (539x948). Sizing it by width would make it tower
   over the copy column on desktop and swallow the fold on mobile, so it is
   capped by height and centred instead. width:auto keeps the aspect ratio, and
   the explicit width/height attributes on the <img> still reserve layout space
   so there is no CLS. */
.hero-media img{width:auto;max-width:100%;max-height:min(560px,58vh);
  filter:drop-shadow(0 30px 60px rgba(44,46,60,.18))}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.btn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:16px 30px;border-radius:999px;text-decoration:none;font-weight:700;
  border:1px solid transparent;line-height:1.35;transition:transform .15s,box-shadow .15s,background .15s}
.btn span{font-weight:500;font-size:.83rem;opacity:.92}
.btn-tg{background:var(--tg);color:#fff;box-shadow:var(--sh)}
.btn-pri{background:var(--brand);color:#fff;box-shadow:var(--sh)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2);border-color:#d7d9e0}
@media (hover:hover) and (pointer:fine){
  .btn-tg:hover,.btn-pri:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
}
.btn:active{transform:translateY(0)}

/* ── trust strip ────────────────────────────────────────── */
.trust{border-block:1px solid var(--line);background:#fff;padding:22px 0}
.trust ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin:0;padding:0;
  font-size:.9rem;color:var(--ink-2);font-weight:600}
.trust li{position:relative;padding-left:20px}
.trust li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;
  border-radius:2px;background:var(--brand);transform:rotate(45deg)}
.trust-pay{margin-top:16px;max-width:230px;opacity:.9}

/* ── sections ───────────────────────────────────────────── */
section{padding:66px 0}
.grid3{display:grid;gap:22px;grid-template-columns:1fr}
.card{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:#fff;
  transition:box-shadow .2s,border-color .2s}
@media (hover:hover) and (pointer:fine){.card:hover{box-shadow:var(--sh);border-color:#d7d9e0}}
.card p{margin:0;color:var(--ink-2);font-size:.97rem}
/* "Yana nimalar bor" bento (2026-10-12, Apple-style, mirrors yrmenu.com/features). */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:8px}
.bt{display:flex;flex-direction:column;min-height:280px;background:#f5f5f7;border-radius:26px;overflow:hidden}
.bt-s4{grid-column:span 4}.bt-s8{grid-column:span 8}.bt-s12{grid-column:span 12}
.bt-tx{padding:28px 28px 0}.bt h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.01em;margin:0 0 8px}
.bt p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.55;max-width:46ch}
.bt-pic{flex:1;margin-top:22px;min-height:200px;max-height:320px;overflow:hidden}
.bt-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bt-k-side{flex-direction:row;min-height:360px}.bt-k-side .bt-tx{flex:0 0 46%;padding:44px;display:flex;flex-direction:column;justify-content:center}
.bt-k-side h3{font-size:1.7rem;letter-spacing:-.02em}.bt-k-side .bt-pic{margin:0;max-height:none}
.bt-ic{display:block;margin:28px 28px auto;color:var(--brand)}
.bt-k-dark .bt-tx,.bt-k-red .bt-tx,.bt-k-light .bt-tx{padding:20px 28px 28px}
.bt-k-dark{background:var(--dark)}.bt-k-dark h3{color:#fff}.bt-k-dark p{color:#b3b5c0}.bt-k-dark .bt-ic{color:#ff7a70}
.bt-k-red{background:#c8322a}.bt-k-red h3,.bt-k-red p,.bt-k-red .bt-ic{color:#fff}
@media (hover:hover) and (pointer:fine){.bt:hover .bt-pic img{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.bt-pic img{transition:none}}
@media (max-width:991px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bt{grid-column:span 1}.bt-k-side,.bt-s12,.bt-t2{grid-column:span 2}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr);gap:14px}.bt,.bt-k-side,.bt-s12,.bt-t2{grid-column:auto}
  .bt{min-height:0;border-radius:22px}.bt-k-side{flex-direction:column}.bt-k-side .bt-tx{padding:26px 26px 0}.bt-k-side h3{font-size:1.4rem}
  .bt-pic{flex:none;aspect-ratio:4/3;max-height:none}.bt-k-side .bt-pic{margin-top:22px}.bt-ic{width:44px;height:44px;margin:26px 26px 0}
  .bt-k-dark .bt-tx,.bt-k-red .bt-tx,.bt-k-light .bt-tx{padding:14px 26px 26px}}
.card-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--brand-t);color:var(--brand);font-weight:800;margin-bottom:14px}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:16px}
.steps li{counter-increment:s;padding-left:50px;position:relative;color:var(--ink-2);font-weight:500}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:34px;height:34px;
  border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.92rem}
.tourist{background:var(--bg-2);border-block:1px solid var(--line)}
.tourist p{max-width:60ch;color:var(--ink-2)}
.tourist .btn{margin-top:6px}

details{border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  margin-bottom:10px;background:#fff}
details[open]{border-color:#d7d9e0;box-shadow:var(--sh)}
summary{cursor:pointer;font-weight:700;list-style:none;position:relative;padding-right:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:1.35rem;
  font-weight:400;color:var(--brand);line-height:1}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--ink-2)}

.final{background:var(--dark);color:#fff;text-align:center}
.final h2{color:#fff}
.final p{color:rgba(255,255,255,.72);max-width:48ch;margin-inline:auto}
.final .ctas{justify-content:center}

/* ── pricing ────────────────────────────────────────────── */
.page{padding-top:52px}
.plans{display:grid;gap:20px;grid-template-columns:1fr;margin:32px 0 26px}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:#fff;
  display:flex;flex-direction:column}
.plan-hi{border-color:var(--brand);box-shadow:0 10px 34px rgba(238,65,54,.12);position:relative}
.plan-hi::before{content:"";position:absolute;inset:-1px -1px auto;height:4px;
  border-radius:var(--r) var(--r) 0 0;background:var(--brand)}
.plan h2{font-size:1.05rem;font-weight:700;letter-spacing:.01em;color:var(--muted);
  text-transform:uppercase}
.amt{font-size:1.85rem;font-weight:800;margin:.1em 0 .5em;letter-spacing:-.03em}
.cur{font-size:.82rem;font-weight:600;color:var(--muted);margin-left:7px;letter-spacing:0}
.plan ul{margin:0 0 20px;padding:0;list-style:none;color:var(--ink-2);font-size:.95rem;flex:1}
.plan li{padding:5px 0 5px 22px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:.95em;width:9px;height:5px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.cinfo{display:grid;grid-template-columns:1fr;gap:2px 24px;margin-top:32px}
.cinfo dt{font-weight:700;font-size:.86rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cinfo dd{margin:0 0 18px;color:var(--ink-2)}

/* ── footer ─────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line);background:var(--bg-2);padding:38px 0;
  font-size:.92rem;color:var(--ink-2)}
.ftr-co{font-weight:700;color:var(--ink)}
.ftr p{margin:0 0 7px}
.ftr-sm{color:var(--muted);margin-top:16px!important;font-size:.86rem}
.ftr a{color:var(--ink-2)}

@media (min-width:800px){
  .hero{padding:96px 0 84px}
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:52px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .cinfo{grid-template-columns:190px 1fr}
  .cinfo dt{text-align:right;padding-top:2px}
}
@media (min-width:1040px){.plans{grid-template-columns:repeat(4,1fr)}}
@media (max-width:799px){
  /* Headline FIRST. The image is supporting evidence, not the pitch — an
     image-first hero pushed the H1 entirely below the fold on a 375px screen. */
  .hero{padding:34px 0 40px}
  .hero-grid{gap:26px}
  .hero-media img{max-height:42vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── feature rows: real product screenshots, alternating ─────────── */
.feats{background:#fff}
.feat{display:grid;gap:26px;align-items:center;padding:34px 0}
.feat + .feat{border-top:1px solid var(--line)}
.feat-media{border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);box-shadow:var(--sh)}
.feat-media img{width:100%;display:block}
.feat h3{font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:800;letter-spacing:-.02em}
.feat p{color:var(--ink-2);margin:0;max-width:46ch}
@media (min-width:860px){
  .feat{grid-template-columns:1fr 1fr;gap:56px;padding:56px 0}
  .feat:nth-child(even) .feat-media{order:2}
}

/* ── template showcase ──────────────────────────────────────────── */
.tpls{background:var(--bg-2);border-block:1px solid var(--line)}
.tpl-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
  gap:16px;overflow-x:auto;padding:6px 22px 18px;margin:26px -22px 0;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tpl-strip::-webkit-scrollbar{display:none}
.tpl-strip img{border-radius:14px;border:1px solid var(--line);background:#fff;
  box-shadow:var(--sh);scroll-snap-align:start;aspect-ratio:9/16;object-fit:cover;object-position:top}
@media (min-width:860px){
  .tpl-strip{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);overflow:visible;
    margin-inline:0;padding-inline:0}
}

/* ── floating Telegram launcher (mirrors the .com contact float) ─── */
.float-tg{position:fixed;right:16px;bottom:16px;z-index:8;width:60px;height:60px;
  border-radius:50%;background:var(--tg);display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(34,158,217,.4);transition:transform .15s,box-shadow .15s}
.float-tg svg{width:30px;height:30px;fill:#fff}
@media (hover:hover) and (pointer:fine){
  .float-tg:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(34,158,217,.5)}
}
@media (min-width:800px){.float-tg{right:26px;bottom:26px;width:64px;height:64px}}

.demo-link{margin:18px 0 0;position:relative;z-index:1}
.demo-link a{font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--brand);padding-bottom:2px}
.demo-link a:hover{color:var(--brand)}
/* 2026-09-30 links to the yrmenu.com city landing pages (city_links()) */
.cities-h{margin:26px 0 10px;font-size:1.05rem}
.cities{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cities a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:.92rem}
@media (hover:hover) and (pointer:fine){.cities a:hover{border-color:var(--ink-2)}}
.ftr-cities{font-size:.9rem;margin-bottom:12px!important}

/* Plans guide on the pricing page (2026-10-05) */
.pg{margin:64px 0}
.pg h2{letter-spacing:-.02em;margin:0 0 10px}
.pg-eye{color:var(--brand);font-weight:700;font-size:.95rem;margin:0 0 8px}
.pg-lead{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:0 0 26px}
.pg-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pg-tile{background:var(--bg-2);border-radius:var(--r);padding:22px}
.pg-tile h3{font-size:1.02rem;margin:0 0 6px;color:var(--ink)}
.pg-tile p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.pg-from{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:700;color:var(--brand)}
.pg-n{display:block;font-size:1.8rem;color:var(--brand);line-height:1;margin-bottom:10px}
.pg-grp{font-size:1.15rem;margin:30px 0 14px}
.pg-note{color:var(--muted);font-size:.9rem;margin:14px 0 0}
.pg-tw{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pg-t{width:100%;min-width:600px;border-collapse:collapse;font-size:.95rem}
.pg-t th,.pg-t td{padding:12px 14px;border-top:1px solid var(--line);text-align:center}
.pg-t thead th{border-top:0;font-weight:800;color:var(--ink)}
.pg-t th:first-child,.pg-t td:first-child{text-align:left;position:sticky;left:0;background:#fff;min-width:190px;color:var(--ink-2)}
.pg-t tr.g td{background:var(--bg-2);font-weight:800;color:var(--ink);border-top:0}
.pg-t .hi{background:var(--brand-t)}
.pg-t thead .hi{color:var(--brand)}
.pg-t .v{font-weight:700;color:var(--ink);white-space:nowrap}
.pg-t .y{font-size:1.1rem;color:var(--ink)}.pg-t .hi .y{color:var(--brand)}
.pg-t .n{color:#c7c9d1}
.pg-choose{border-top:1px solid var(--line);max-width:760px}
.pg-choose div{display:flex;gap:16px;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line)}
.pg-choose b{margin-left:auto;white-space:nowrap}.pg-choose b.hi{color:var(--brand)}
@media (max-width:620px){.pg{margin:44px 0}}

/* Hero slider (2026-10-12, mirrors yrmenu.com). Slide 1 = the original hero (static, sizes the section); slides 2-5
   are absolute layers that cross-fade, vertically centred in the same box. */
.yrs{touch-action:pan-y}
/* Slider controls sit at the TOP of the hero (owner 2026-10-12: at the bottom they were below the fold on laptops and
   phones). The hero's own top padding holds them on desktop; below 800px it grows by the bar's height. */
/* Slides 2-5 start where slide 1 starts (same top padding, top-aligned): centring them in the hero, which takes slide 1's
   taller height, left a 110-225 px empty band above them (owner screenshot 10-12). */
.hero.yrs .yrs-extra{align-items:flex-start}
@media (max-width:799px){.hero.yrs{padding-top:68px}.yrs-extra{padding-top:68px}}
@media (min-width:800px){.yrs-extra{padding-top:96px}}
.yrs-first{position:relative;transition:opacity .6s ease,visibility .6s}
.yrs-first:not(.is-on){opacity:0;visibility:hidden}
.yrs-extra{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s;z-index:2}
.yrs-extra>.wrap{width:100%}
.yrs-extra.is-on{opacity:1;visibility:visible}
.yrs-title{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.08;margin:0 0 .45em;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
@media (min-width:800px){.yrs-extra .yrs-media img{aspect-ratio:1/1;max-width:500px}}
.yrs-media{display:flex;justify-content:center}
.yrs-media img{display:block;width:100%;max-width:520px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:26px;box-shadow:0 2px 6px rgba(44,46,60,.08),0 24px 60px rgba(44,46,60,.16);background:rgba(255,255,255,.4)}
.yrs-extra.is-on .yrs-media img{animation:yrs-in .9s cubic-bezier(.2,.7,.2,1) both}
.yrs-extra.is-on .yrs-copy>*{animation:yrs-up .7s cubic-bezier(.2,.7,.2,1) both}
.yrs-extra.is-on .yrs-copy>:nth-child(2){animation-delay:.06s}.yrs-extra.is-on .yrs-copy>:nth-child(3){animation-delay:.12s}.yrs-extra.is-on .yrs-copy>:nth-child(4){animation-delay:.18s}
@keyframes yrs-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes yrs-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.yrs-ctrl{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 16px rgba(44,46,60,.08)}
.yrs-arrow{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.yrs-dot{width:22px;height:34px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;padding:0}
.yrs-dot span{display:block;width:8px;height:8px;border-radius:8px;background:rgba(44,46,60,.28);transition:width .3s,background-color .3s}
.yrs-dot[aria-current="true"]{width:38px}.yrs-dot[aria-current="true"] span{width:26px;background:var(--brand)}
.yrs-arrow:focus-visible,.yrs-dot:focus-visible{outline:3px solid var(--brand);outline-offset:1px}
@media (hover:hover) and (pointer:fine){.yrs-arrow:hover{background:rgba(44,46,60,.06)}}
@media (prefers-reduced-motion:reduce){.yrs-first,.yrs-extra,.yrs-dot span{transition:none}.yrs-extra.is-on .yrs-media img,.yrs-extra.is-on .yrs-copy>*{animation:none}}
@media (max-width:799px){.yrs-ctrl{top:12px}.yrs-extra{padding-bottom:40px}.yrs-extra .hero-grid{gap:22px}.yrs-media{order:-1}.yrs-media img{max-width:440px}}
/* Tashkent menu study page (2026-10-14) */
.study h2{font-size:clamp(1.3rem,3vw,1.75rem);margin:44px 0 14px}
.st-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:30px 0 8px}
.st-tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.st-tile p{margin:0}
.st-n{font-size:clamp(2rem,5vw,2.8rem);font-weight:800;letter-spacing:-.03em;color:var(--brand-d);line-height:1.05}
.st-l{font-weight:600;color:var(--ink);margin-top:8px !important;line-height:1.35}
.st-ci{font-size:.85rem;color:var(--ink-2);margin-top:6px !important}
@media (max-width:860px){.st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.st-tiles{grid-template-columns:minmax(0,1fr)}}
.st-list{padding-left:20px;max-width:72ch;color:var(--ink-2)}
.st-list li{margin:8px 0}
.st-tbl{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-tbl table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.st-tbl th,.st-tbl td{border-bottom:1px solid var(--line);padding:11px 10px;text-align:left;vertical-align:middle}
.st-tbl th{font-size:.82rem;color:var(--ink-2);font-weight:700}
.st-tbl td:nth-child(2){white-space:nowrap}
.st-bar{display:inline-block;width:70px;height:8px;border-radius:99px;background:var(--line);margin-right:10px;vertical-align:middle;overflow:hidden}
.st-bar span{display:block;height:100%;background:var(--brand-d)}
.st-note{font-size:.88rem;color:var(--ink-2);margin-top:10px}
.st-cite{margin:0 0 14px;padding:16px 18px;border-left:4px solid var(--brand-d);background:var(--bg-2);border-radius:0 12px 12px 0;color:var(--ink);font-size:.95rem;overflow-wrap:anywhere}
.st-cta{margin:48px 0 60px;padding:30px;border-radius:var(--r);background:var(--dark);color:#fff}
.st-cta h2{color:#fff;margin-top:0}
.st-cta p{color:rgba(255,255,255,.78);max-width:56ch}
.ftr-study a{font-weight:700}
@media (max-width:600px){
  .st-tbl table,.st-tbl tbody{display:block;min-width:0}
  .st-tbl thead{display:none}
  .st-tbl tr{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .st-tbl td{border:0;padding:0}
  .st-tbl td:first-child{grid-column:1/-1;font-weight:600;color:var(--ink)}
  .st-tbl td:nth-child(3),.st-tbl td:nth-child(4){font-size:.85rem;color:var(--ink-2)}
  .st-tbl td:nth-child(4){grid-column:1/-1}
  .st-tbl td[data-label]::before{content:attr(data-label) ": "}
}