/* DishRoute website: hero, home sections and the mini UI widgets inside bento cards.
   Widgets are small real-domain illustrations built in HTML/CSS/SVG (sample data, labelled as such). */

/* Sky: the atmospheric background behind the hero, inner page heads and the final CTA band.
   Layers: sun haze, soft clouds, a cool red gradient and a faint grain. Ours, no photos. */
.q-sky { position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(55% 40% at 50% -4%, rgb(255 255 255 / 0.95), transparent 72%),
        radial-gradient(22% 12% at 9% 26%, rgb(255 255 255 / 0.85), transparent 70%),
        radial-gradient(18% 9% at 22% 20%, rgb(255 255 255 / 0.7), transparent 70%),
        radial-gradient(24% 11% at 88% 18%, rgb(255 255 255 / 0.8), transparent 70%),
        radial-gradient(30% 14% at 76% 34%, rgb(255 255 255 / 0.5), transparent 70%),
        radial-gradient(40% 18% at 18% 52%, rgb(255 255 255 / 0.45), transparent 70%),
        linear-gradient(180deg, #f7cfca 0%, #f9ddda 24%, #fbe9e7 46%, #fcf2f1 66%, var(--bg) 92%);
}
.q-sky::after { content: ''; position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.q-sky-short { background:
        radial-gradient(45% 60% at 50% -10%, rgb(255 255 255 / 0.9), transparent 70%),
        radial-gradient(20% 22% at 10% 30%, rgb(255 255 255 / 0.7), transparent 70%),
        radial-gradient(22% 20% at 90% 26%, rgb(255 255 255 / 0.7), transparent 70%),
        linear-gradient(180deg, #f8d5d1 0%, #fbe7e5 48%, var(--bg) 100%); }
.q-scene { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: auto; color: #fff; opacity: 0.9; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .q-sky { background:
        radial-gradient(55% 40% at 50% -4%, rgb(240 120 120 / 0.35), transparent 72%),
        radial-gradient(24% 11% at 88% 18%, rgb(245 150 150 / 0.14), transparent 70%),
        radial-gradient(22% 12% at 9% 26%, rgb(245 150 150 / 0.14), transparent 70%),
        linear-gradient(180deg, #3a1114 0%, #2a0d10 35%, #170b0c 65%, var(--bg) 92%); }
    :root:not([data-theme='light']) .q-sky-short { background: radial-gradient(45% 60% at 50% -10%, rgb(240 120 120 / 0.3), transparent 70%), linear-gradient(180deg, #3a1114 0%, var(--bg) 100%); }
    :root:not([data-theme='light']) .q-scene { color: #f8a1a1; opacity: 0.35; }
}

/* Hero */
.q-hero { position: relative; padding-top: 128px; overflow: hidden; }
@media (min-width: 900px) { .q-hero { padding-top: 156px; } }
.q-hero-copy { position: relative; z-index: 2; text-align: center; max-width: 900px; margin-inline: auto; }
.q-hero-copy .q-h1 { margin-top: 24px; }
.q-hero-copy .q-lead { margin: 22px auto 0; color: var(--ink-2); max-width: 46ch; font-size: 1.1875rem; }
.q-hero-copy .q-btns { margin-top: 34px; justify-content: center; }
.q-chip .q-chip-ur { font-family: var(--font-urdu); font-size: 13px; line-height: 1; padding-inline-start: 8px; border-inline-start: 1px solid var(--line-2); }
.q-stage { position: relative; z-index: 1; margin: 56px auto 0; max-width: 1180px; }
@media (min-width: 900px) { .q-stage { margin-top: 72px; } }
.q-stage-main { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.q-stage-main .q-frame-crop { --crop: 1440 / 820; }
.q-stage .q-phone { position: absolute; z-index: 2; inset-inline-end: 3%; bottom: 6%; width: 22%; min-width: 120px; max-width: 230px; }
.q-stage .q-tag-a { inset-inline-start: 4%; top: 30%; }
.q-stage .q-tag-b { inset-inline-end: 27%; top: 9%; }
.q-stage .q-tag-c { inset-inline-start: 22%; bottom: 22%; }
.q-stage .q-tag-d { inset-inline-end: 1%; top: 38%; }
.q-stage .q-cursor-a { inset-inline-start: calc(4% + 168px); top: calc(30% + 30px); }
.q-stage .q-cursor-b { inset-inline-end: calc(27% - 14px); top: calc(9% + 34px); }
@media (max-width: 760px) {
    .q-stage .q-tag-c, .q-stage .q-tag-d, .q-stage .q-cursor-b { display: none; }
    .q-stage .q-tag-a { top: auto; bottom: 30%; inset-inline-start: 2%; font-size: 12.5px; }
    .q-stage .q-tag-b { inset-inline-end: 4%; top: -18px; font-size: 12.5px; }
    .q-stage .q-cursor-a { inset-inline-start: calc(2% + 140px); top: auto; bottom: calc(30% - 18px); }
    .q-stage .q-phone { bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .q-hero-copy > * { animation: q-rise 0.9s var(--ease) both; }
    .q-hero-copy > :nth-child(2) { animation-delay: 0.06s; }
    .q-hero-copy > :nth-child(3) { animation-delay: 0.12s; }
    .q-hero-copy > :nth-child(4) { animation-delay: 0.18s; }
    .q-stage { animation: q-rise 1.1s var(--ease) 0.25s both; }
}
@keyframes q-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Fact strip under the hero (facts, not customer claims) */
.q-facts { position: relative; z-index: 2; margin-top: -8px; }
.q-facts ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.q-facts li { display: flex; align-items: center; gap: 12px; padding: 18px; background: var(--card); font-size: 14.5px; font-weight: 450; color: var(--ink-2); line-height: 1.35; }
.q-facts li:last-child { grid-column: 1 / -1; }
.q-facts .q-i { width: 22px; height: 22px; color: var(--accent-text); }
@media (min-width: 1000px) { .q-facts ul { grid-template-columns: repeat(5, 1fr); } .q-facts li:last-child { grid-column: auto; } }

/* About split: image card, copy with facts, aside with a second image card */
.q-about { display: grid; gap: 20px; }
.q-about-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 380px; background: radial-gradient(80% 60% at 30% 10%, #f07a72, transparent 70%), linear-gradient(160deg, #dc2626, #45110f); display: flex; align-items: flex-end; justify-content: center; padding-top: 40px; }
.q-about-photo img.q-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q-about-photo .q-phone { width: 62%; max-width: 230px; margin-bottom: -60px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5); }
.q-about-photo .q-tag { top: 22px; inset-inline-start: 18px; }
.q-about-copy .q-h2 { margin-top: 18px; }
.q-stats { margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.q-stat b { display: block; font-size: 2.5rem; line-height: 1; font-weight: 400; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.q-stat span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--mute); max-width: 22ch; }
.q-about-side { display: flex; flex-direction: column; gap: 24px; }
.q-about-side .q-lead { font-size: 1rem; }
.q-about-shot { margin-top: auto; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(150deg, #fce6e4, #f4c7c3); padding: 22px 0 0 22px; }
html[dir='rtl'] .q-about-shot { padding: 22px 22px 0 0; }
.q-about-shot img { width: 100%; height: 210px; object-fit: cover; object-position: top left; border-top-left-radius: 12px; box-shadow: var(--shadow-lg); }
html[dir='rtl'] .q-about-shot img { border-top-left-radius: 0; border-top-right-radius: 12px; }
@media (min-width: 1000px) { .q-about { grid-template-columns: 0.9fr 1.2fr 0.9fr; gap: 40px; align-items: stretch; } .q-about-copy { padding-top: 8px; } }

/* Bento grids */
.q-bento { margin-top: 48px; display: grid; gap: 16px; }
@media (min-width: 880px) { .q-bento { grid-template-columns: repeat(12, 1fr); } .q-span-6 { grid-column: span 6; } .q-span-7 { grid-column: span 7; } .q-span-5 { grid-column: span 5; } }
.q-bcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); padding: 28px; overflow: hidden; min-height: 420px; }
.q-bcard > p { margin-top: 8px; font-size: 15px; color: var(--mute); max-width: 46ch; }
.q-bcard-foot .q-h3 { margin-top: 0; }
.q-bcard-foot p { margin-top: 8px; font-size: 15px; color: var(--mute); max-width: 46ch; }
.q-w { flex: 1; display: flex; align-items: center; justify-content: center; margin-top: 24px; position: relative; min-height: 240px; }
.q-w-panel { width: 100%; border-radius: 18px; background: var(--bg); padding: 24px; position: relative; }
.q-bcard-tint { background: linear-gradient(165deg, var(--card) 40%, var(--red-50)); }
.q-sample { position: absolute; inset-inline-end: 0; bottom: -2px; font-size: 11.5px; color: var(--mute); }

/* Widget: fee collection bars by month */
.q-chart { width: 100%; }
.q-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.q-chart-head b { font-size: 1.75rem; font-weight: 400; letter-spacing: -0.04em; }
.q-chart-head span { font-size: 13px; color: var(--mute); }
.q-trend { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--red-50); color: var(--accent-text); font-size: 12.5px; font-weight: 500; }
.q-trend .q-i { width: 14px; height: 14px; }
.q-plot { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 8px; height: 200px; }
.q-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--mute); text-align: end; padding-bottom: 22px; }
.q-axis span { transform: translateY(-50%); }
.q-axis span:last-child { transform: translateY(50%); }
.q-groups { position: relative; display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 6px; padding-bottom: 22px; background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 25%); background-size: 100% calc(100% - 22px); background-repeat: no-repeat; }
.q-group { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.q-group i { width: 4px; border-radius: 4px 4px 1px 1px; height: calc(var(--h) * 1%); background: linear-gradient(180deg, var(--red) 0%, var(--red-300) 100%); transform-origin: bottom; }
.q-group:nth-child(odd) i:nth-child(even) { background: linear-gradient(180deg, var(--red-500), var(--red-200)); }
.q-group em { position: absolute; bottom: -22px; font-style: normal; font-size: 11.5px; color: var(--mute); }
.q-group.is-now i { background: linear-gradient(180deg, var(--ink), var(--red-500)); }
@media (prefers-reduced-motion: no-preference) {
    html.q-js .q-reveal .q-group i { transform: scaleY(0); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 40ms + 200ms); }
    html.q-js .q-reveal.is-in .q-group i { transform: none; }
}

/* Widget: flow diagram Table QR -> Order -> Kitchen -> Waiter -> Invoice */
.q-flow { position: relative; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: start; padding-top: 70px; }
.q-flow-root { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 0 0 8px color-mix(in srgb, var(--card) 70%, transparent), var(--shadow-sm); }
.q-flow-root span { width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }
.q-flow-root .q-i { width: 16px; height: 16px; }
.q-flow::before { content: ''; position: absolute; top: 52px; left: 50%; width: 1px; height: 18px; background: var(--line-2); }
.q-flow::after { content: ''; position: absolute; top: 70px; left: 10%; right: 10%; height: 1px; background: var(--line-2); }
.q-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 22px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.q-node::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; background: var(--line-2); }
.q-node span { width: 50px; height: 50px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-text); box-shadow: var(--shadow-sm); }
.q-node.is-hot span { background: var(--red); border-color: var(--red); color: #fff; }
.q-node .q-i { width: 22px; height: 22px; }
.q-pulse { position: absolute; top: 67px; left: 10%; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-100); }
@media (prefers-reduced-motion: no-preference) { .q-pulse { animation: q-run 4.5s ease-in-out infinite; } }
@keyframes q-run { 0% { left: 10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(90% - 7px); opacity: 0; } }
html[dir='rtl'] .q-pulse { animation-direction: reverse; }
.q-flow-note { position: absolute; bottom: -6px; inset-inline-end: 6%; }

/* Widget: attendance donut */
.q-donut-card { width: 100%; display: grid; gap: 22px; align-items: center; }
.q-donut-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.q-select-mini { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 12.5px; color: var(--ink-2); }
.q-select-mini .q-i { width: 12px; height: 12px; }
.q-donut-body { display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 22px; align-items: center; }
.q-donut { position: relative; width: 100%; aspect-ratio: 1; }
.q-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.q-donut circle { fill: none; stroke-width: 15; }
.q-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.q-donut-c b { font-size: 1.75rem; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.q-donut-c span { font-size: 12px; color: var(--mute); margin-top: 4px; }
.q-legend { display: grid; gap: 12px; font-size: 13.5px; }
.q-legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; color: var(--ink-2); }
.q-legend i { width: 10px; height: 10px; border-radius: 50%; }
.q-legend b { font-weight: 500; font-variant-numeric: tabular-nums; }
.q-donut-flag { position: absolute; bottom: 6%; inset-inline-start: -4%; padding: 4px 10px; border-radius: 6px; background: var(--red); color: #fff; font-size: 12px; font-weight: 500; }
@media (max-width: 420px) { .q-donut-body { grid-template-columns: 1fr; } .q-donut { max-width: 190px; margin-inline: auto; } }

/* Widget: three kitchen station tickets (monochrome like the real printout) */
.q-mini-ticket { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; color: #111; border: 1px solid #c9ced8; border-radius: 6px; font-size: 8.5px; line-height: 1.35; box-shadow: var(--shadow-sm); overflow: hidden; direction: ltr; }
.q-mini-ticket > div { padding: 9px; border-inline-start: 1px dashed #9aa1ae; }
.q-mini-ticket > div:first-child { border-inline-start: 0; }
.q-mini-ticket small { display: block; text-align: center; font-weight: 700; font-size: 7.5px; letter-spacing: 0.04em; }
.q-mini-ticket strong { display: block; text-align: center; font-size: 8.5px; border-bottom: 1.5px solid #111; padding-bottom: 3px; margin: 3px 0 5px; }
.q-mini-ticket p { display: flex; justify-content: space-between; gap: 4px; border: 1px solid #777; border-top: 0; padding: 1px 3px; }
.q-mini-ticket p:first-of-type { border-top: 1px solid #777; }
.q-mini-ticket p.t { font-weight: 700; background: #ececec; }
.q-mini-ticket .bar { margin-top: 6px; height: 14px; background: repeating-linear-gradient(90deg, #111 0 1px, transparent 1px 3px, #111 3px 5px, transparent 5px 6px); opacity: 0.8; }
.q-w .q-tag { position: absolute; }
.q-w .q-tag-1 { top: -14px; inset-inline-end: 4%; }
.q-w .q-tag-2 { bottom: -14px; inset-inline-start: 6%; }
.q-w .q-cursor-1 { top: 10px; inset-inline-end: 2%; }

/* Widget: SMS / WhatsApp / notice stack */
.q-stack { position: relative; width: 100%; max-width: 420px; margin-inline: auto; display: grid; gap: 10px; }
.q-msg { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 13.5px; }
.q-msg:nth-child(2) { margin-inline: 14px -14px; opacity: 0.95; }
.q-msg:nth-child(3) { margin-inline: 28px -28px; opacity: 0.9; }
.q-msg > span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--red-50); color: var(--accent-text); }
.q-msg > span .q-i { width: 19px; height: 19px; }
.q-msg b { display: block; font-weight: 500; font-size: 13.5px; }
.q-msg p { color: var(--mute); margin-top: 2px; line-height: 1.45; }
.q-msg time { font-size: 11.5px; color: var(--mute); }
.q-stack-root { display: flex; justify-content: center; margin-bottom: 8px; }
.q-stack-root span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); box-shadow: 0 0 0 8px color-mix(in srgb, var(--card) 60%, transparent); color: var(--accent-text); }

/* Widget: exam result card */
.q-result { width: 100%; max-width: 420px; margin-inline: auto; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 18px; font-size: 13.5px; position: relative; }
.q-result-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.q-result-head b { display: block; font-weight: 500; font-size: 14.5px; }
.q-result-head span { color: var(--mute); font-size: 12.5px; }
.q-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--red-50); color: var(--accent-text); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.q-result table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.q-result td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.q-result td:nth-child(2) { width: 38%; }
.q-result td:last-child { text-align: end; width: 44px; }
.q-result tr:last-child td { border-bottom: 0; }
.q-meter { display: block; height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--red-300), var(--red)); width: calc(var(--v) * 1%); }
.q-grade { display: inline-block; min-width: 32px; padding: 2px 6px; border-radius: 6px; background: var(--red-50); color: var(--accent-text); font-size: 12px; font-weight: 600; text-align: center; }
.q-result-foot { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.q-result-foot b { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.03em; }

/* Widget: timetable snippet */
.q-tt { width: 100%; display: grid; grid-template-columns: 44px repeat(5, 1fr); gap: 5px; font-size: 12px; }
.q-tt > span { padding: 4px 2px; color: var(--mute); text-align: center; font-size: 11.5px; }
.q-tt > i { font-style: normal; display: grid; place-items: center; min-height: 44px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-weight: 500; color: var(--ink-2); padding: 4px; text-align: center; line-height: 1.2; }
.q-tt > i.a { background: var(--red-50); border-color: var(--red-100); color: var(--accent-text); }
.q-tt > i.b { background: var(--red); border-color: var(--red); color: #fff; }
.q-tt > i.z { background: var(--red); border-color: var(--red); color: #fff; }
.q-tt > i.br { background: transparent; border-style: dashed; color: var(--mute); font-weight: 400; }

/* Widget: parent portal phone on a soft field */
.q-w-phone { background: radial-gradient(60% 70% at 50% 40%, var(--red-100), transparent 70%); min-height: 300px; align-items: flex-end; margin-bottom: -28px; }
.q-w-phone .q-phone { width: 200px; margin-bottom: -90px; }
.q-w-phone .q-tag-1 { top: 18%; bottom: auto; inset-inline-start: 2%; inset-inline-end: auto; }
.q-w-phone .q-tag-2 { top: 44%; inset-inline-end: 0; bottom: auto; inset-inline-start: auto; }

/* Process: four steps with a vertical timeline */
.q-process { margin-top: 48px; display: grid; gap: 16px; }
.q-steps-rail { display: flex; gap: 10px; justify-content: center; }
.q-step-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; display: grid; place-items: center; font-variant-numeric: tabular-nums; transition: background-color 0.25s, color 0.25s, border-color 0.25s; position: relative; z-index: 1; }
.q-step-btn[aria-selected='true'], .q-step-btn.is-done { background: var(--red); border-color: var(--red); color: #fff; }
.q-step-card { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); }
.q-step-media { position: relative; border-radius: 24px; overflow: hidden; min-height: 300px; background: radial-gradient(70% 70% at 80% 10%, #f8a1a1, transparent 70%), linear-gradient(160deg, #dc2626, #7f1d1d); padding: 34px 0 0 34px; }
html[dir='rtl'] .q-step-media { padding: 34px 34px 0 0; }
.q-step-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: top left; border-top-left-radius: 14px; }
html[dir='rtl'] .q-step-media img { border-top-left-radius: 0; border-top-right-radius: 14px; }
.q-glass { position: absolute; inset-inline: 22px; bottom: 22px; padding: 16px 18px; border-radius: 18px; background: rgb(17 17 19 / 0.5); border: 1px solid rgb(255 255 255 / 0.25); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.q-glass small { display: block; font-size: 12.5px; opacity: 0.85; }
.q-glass b { display: block; font-size: 1.125rem; overflow-wrap: anywhere; font-weight: 400; letter-spacing: -0.02em; }
.q-glass svg { width: 34%; max-width: 180px; height: 40px; color: #fff; flex: none; }
@media (max-width: 1180px) { .q-glass svg { display: none; } }
.q-step-body { padding: 18px 16px 22px; display: flex; flex-direction: column; justify-content: center; }
.q-step-body .q-h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); }
.q-step-body > p { margin-top: 12px; color: var(--mute); max-width: 46ch; }
.q-step-points { margin-top: 26px; display: grid; gap: 18px; }
.q-step-points b { display: block; font-weight: 500; font-size: 1.0625rem; }
.q-step-points span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--mute); }
.q-step-panel[hidden], .q-steps-rail[hidden] { display: none; }
@media (min-width: 900px) {
    .q-process { grid-template-columns: 1fr 48px; gap: 24px; align-items: start; }
    .q-steps-rail { order: 2; flex-direction: column; justify-content: space-between; align-self: stretch; padding-block: 10px; position: relative; }
    .q-steps-rail::before { content: ''; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 1px; background: var(--line-2); }
    .q-step-card { grid-template-columns: 1.15fr 1fr; gap: 24px; min-height: 460px; }
    .q-step-body { padding: 24px 32px 24px 8px; }
    html[dir='rtl'] .q-step-body { padding: 24px 8px 24px 32px; }
}
@media (prefers-reduced-motion: no-preference) { .q-step-panel:not([hidden]) { animation: q-fade 0.6s var(--ease) both; } }
@keyframes q-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Notes line under a centred heading */
.q-notes { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 15px; color: var(--ink-2); font-style: italic; }
.q-notes li { display: inline-flex; align-items: center; gap: 8px; }
.q-notes li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red-300); }

/* Deep dives: copy beside a screen cropped inside a tinted panel */
.q-dive { display: grid; gap: 36px; align-items: center; }
.q-dive + .q-dive { margin-top: 96px; }
.q-dive-copy .q-h2 { margin-top: 18px; }
.q-dive-copy .q-lead { margin-top: 16px; }
.q-dive-copy .q-link { margin-top: 28px; }
.q-panel { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: 40px 0 0 40px; background: radial-gradient(60% 60% at 90% 0%, rgb(255 255 255 / 0.7), transparent 70%), linear-gradient(150deg, #fbe3e1, #f3c3bf); }
html[dir='rtl'] .q-panel { padding: 40px 40px 0 0; }
.q-panel-deep { background: radial-gradient(70% 70% at 85% 0%, #f07a72, transparent 70%), linear-gradient(160deg, #dc2626, #7f1d1d); }
.q-panel > img { width: 100%; height: 420px; object-fit: cover; object-position: top left; border-top-left-radius: 16px; box-shadow: var(--shadow-lg); display: block; }
html[dir='rtl'] .q-panel > img { border-top-left-radius: 0; border-top-right-radius: 16px; object-position: top left; }
.q-panel .q-tag { bottom: 26px; inset-inline-start: 26px; }
.q-panel .q-tag.q-top { top: 16px; bottom: auto; inset-inline-start: auto; inset-inline-end: 22px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .q-panel:not(.q-panel-deep) { background: linear-gradient(150deg, #2a1416, #1d0e10); } :root:not([data-theme='light']) .q-about-shot { background: linear-gradient(150deg, #2a1416, #1d0e10); } }
@media (min-width: 960px) {
    .q-dive { grid-template-columns: 0.85fr 1.15fr; gap: 72px; }
    .q-dive.is-flip { grid-template-columns: 1.15fr 0.85fr; }
    .q-dive.is-flip .q-dive-copy { order: 2; }
}
.q-paper-float { position: absolute; z-index: 2; inset-inline-end: 22px; bottom: 22px; width: 46%; max-width: 270px; background: #fff; color: #111; border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow-lg); font-size: 9.5px; line-height: 1.45; direction: ltr; }
.q-paper-float strong { display: block; text-align: center; font-size: 10.5px; border-bottom: 1.5px solid #111; padding-bottom: 4px; margin-bottom: 6px; }
.q-paper-float ol { list-style: decimal; padding-left: 16px; display: grid; gap: 5px; }
.q-paper-float .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; color: #333; }

/* Portals: full-width row of phones */
.q-portals { margin-top: 48px; position: relative; border-radius: var(--r-xl); overflow: hidden; padding: 56px 16px 0; background: radial-gradient(50% 60% at 50% 0%, rgb(255 255 255 / 0.8), transparent 70%), linear-gradient(170deg, #fad3cf, #f5b1ab); }
.q-portals-row { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.q-portals-row figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.q-portals-row figcaption { order: -1; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); font-size: 14px; font-weight: 500; color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.q-portals-row .q-phone { width: 230px; margin-bottom: -110px; }
.q-portals-row figure:nth-child(2) .q-phone { margin-bottom: -60px; }
.q-portals-row figure:not(:nth-child(2)) { display: none; }
@media (min-width: 760px) { .q-portals-row { gap: 40px; } .q-portals-row figure:not(:nth-child(2)) { display: flex; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .q-portals { background: linear-gradient(170deg, #2a1416, #160b0c); } }

/* Who it is for: benefit cards + one tall image card */
.q-who { margin-top: 48px; display: grid; gap: 16px; }
.q-who-card { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); min-height: 220px; }
.q-who-card p { margin-top: 8px; font-size: 14.5px; color: var(--mute); }
.q-who-tall { position: relative; min-height: 440px; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(80% 60% at 70% 0%, #f07a72, transparent 70%), linear-gradient(165deg, #dc2626, #3b0d10); color: #fff; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; }
.q-who-tall img.q-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q-who-script { position: relative; font-family: var(--font-urdu); font-size: clamp(3rem, 6vw, 4.4rem); line-height: 2.1; padding-top: 10px; opacity: 0.95; text-align: center; margin-top: 20px; }
.q-who-script small { display: block; font-family: var(--font); font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1; opacity: 0.75; }
.q-who-tall .q-glass { position: relative; inset: auto; }
@media (min-width: 720px) { .q-who { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
    .q-who { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; }
    .q-who .q-who-tall { grid-column: 4; grid-row: 1 / span 2; }
    .q-who-card.wide { grid-column: span 2; }
}

/* Final CTA band */
.q-cta { padding: 24px 12px 0; }
.q-cta-card { position: relative; max-width: 1240px; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; padding: 88px 20px 0; text-align: center; border: 1px solid var(--line); }
.q-cta-card .q-sky { height: 100%; background:
        radial-gradient(50% 50% at 50% 0%, rgb(255 255 255 / 0.9), transparent 70%),
        radial-gradient(24% 20% at 12% 40%, rgb(255 255 255 / 0.6), transparent 70%),
        radial-gradient(22% 18% at 88% 30%, rgb(255 255 255 / 0.6), transparent 70%),
        linear-gradient(180deg, #f6a8a2, #fbd9d5 60%, #fdf0ef); }
.q-cta-inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; padding-bottom: 180px; }
.q-cta-inner .q-h2 { margin-top: 18px; }
.q-cta-inner p { margin: 16px auto 0; color: var(--ink-2); max-width: 52ch; font-size: 1.0625rem; }
.q-cta-inner .q-btns { margin-top: 30px; justify-content: center; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .q-cta-card .q-sky { background: radial-gradient(50% 50% at 50% 0%, rgb(240 120 120 / 0.3), transparent 70%), linear-gradient(180deg, #3a1114, #170b0c); } }

/* Small-screen and Urdu adjustments */
@media (max-width: 719px) { .q-who-card { min-height: 0; gap: 20px; } }
html[lang='ur'] .q-notes { font-style: normal; }
html[lang='ur'] .q-stat b, html[lang='ur'] .q-price b { font-family: var(--font); }

/* Full-size printout illustration, monochrome like the real printout */
.q-paper { background: #fff; color: #111; border: 1px solid #c9ced8; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 11px; line-height: 1.35; overflow: hidden; }
.q-paper-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.q-paper-col { padding: 14px; border-inline-start: 1px dashed #9aa1ae; }
.q-paper-col:first-child { border-inline-start: 0; }
.q-paper h4 { font-size: 11px; font-weight: 700; text-align: center; border-bottom: 2px solid #111; padding-bottom: 4px; margin-bottom: 6px; }
.q-paper table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.q-paper td { border: 1px solid #555; padding: 2px 4px; }
.q-paper td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.q-paper tr.t td { font-weight: 700; background: #ececec; }
.q-paper small { display: block; text-align: center; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.02em; }
@media (max-width: 640px) { .q-paper-grid { grid-template-columns: 1fr; } .q-paper-col { border-inline-start: 0; border-top: 1px dashed #9aa1ae; } .q-paper-col:first-child { border-top: 0; } }

/* DishRoute: floating chips only over empty or low-importance areas of the real screens, never over key UI.
   Hero (take-order screen): chips and the phone sit in the empty lower half of the dish grid; hidden below 1100 px. */
.q-stage .q-phone { inset-inline-end: auto; inset-inline-start: 52%; bottom: 3%; width: 15%; min-width: 96px; max-width: 190px; }
.q-stage .q-tag-a { inset-inline-start: 5%; top: 50%; }
.q-stage .q-tag-c { inset-inline-start: 5%; top: auto; bottom: 22%; }
.q-stage .q-tag-b { inset-inline-end: auto; inset-inline-start: 24%; top: 61%; }
.q-stage .q-tag-d { inset-inline-end: auto; inset-inline-start: 27%; top: auto; bottom: 8%; }
.q-stage .q-cursor-a { inset-inline-start: calc(5% + 160px); top: calc(50% + 28px); }
.q-stage .q-cursor-b { inset-inline-end: auto; inset-inline-start: calc(24% + 196px); top: calc(61% + 28px); }
@media (max-width: 1099px) {
    .q-stage .q-tag, .q-stage .q-cursor { display: none !important; }
    .q-stage .q-phone { inset-inline-start: 50%; inset-inline-end: auto; bottom: 0; width: 19%; min-width: 84px; }
}
/* How it works: the glass note sits under the screen instead of on top of it. */
.q-step-media { display: flex; flex-direction: column; }
.q-step-media img { flex: 1; min-height: 260px; }
.q-step-media .q-glass { position: relative; inset: auto; margin: 16px 22px 22px 0; }
html[dir='rtl'] .q-step-media .q-glass { margin: 16px 0 22px 22px; }
/* Dives: the top chip sits in the panel's empty top strip; the bottom chip only on wide screens. */
.q-panel .q-tag.q-top { top: 6px; }
@media (max-width: 1099px) {
    .q-panel .q-tag:not(.q-top), .q-w-phone .q-tag { display: none; }
}

/* Product tour (home/tour): tabs over real screens. Without JS the panels form a scroll-snap row. */
.q-tour { margin-top: 40px; }
.q-tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.q-tour-tabs button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.q-tour-tabs button:hover { border-color: var(--red-300); }
.q-tour-tabs button[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.q-tour-panels { display: grid; grid-auto-flow: column; grid-auto-columns: 92%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.q-tour-panel { scroll-snap-align: start; display: grid; gap: 16px; align-items: start; padding: 22px; border-radius: var(--r-xl); background: radial-gradient(60% 60% at 90% 0%, rgb(255 255 255 / 0.7), transparent 70%), linear-gradient(150deg, var(--red-50), var(--red-100)); border: 1px solid var(--line); }
.q-tour-label { font-weight: 600; color: var(--accent-text); }
.q-tour-panel figure { margin: 0; display: grid; gap: 10px; }
.q-tour-panel figcaption { font-size: 14px; color: var(--mute); }
.q-tour-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 220px)); justify-content: center; gap: 20px; }
.q-tour-phones .q-phone { margin-inline: auto; width: 100%; max-width: 220px; }
.q-tour.is-tabs .q-tour-panels { display: block; overflow: visible; }
.q-tour.is-tabs .q-tour-panel[hidden] { display: none; }
.q-tour.is-tabs .q-tour-label { display: none; }
@media (min-width: 1000px) {
    .q-tour-panel { padding: 28px; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
    .q-tour-panel .q-tour-label { grid-column: 1 / -1; }
    .q-tour-panel .q-tour-main { grid-column: 1; }
    .q-tour-panel .q-tour-side, .q-tour-panel .q-tour-phones:not(.is-only) { grid-column: 2; align-self: start; }
    .q-tour-panel .q-tour-phones:not(.is-only) { grid-template-columns: 1fr; }
    .q-tour-panel .q-tour-phones.is-only { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 240px)); }
}

/* Step cards: the glass note sits under the screenshot, never on top of the product screen. */
.q-step-media .q-glass { position: static; margin-top: 12px; inset: auto; background: rgb(17 17 19 / 0.9); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* "From <plan>" badges inside tiles are sized to their text (a flex column would stretch them to the card width). */
.q-tile > .q-soon { align-self: flex-start; }

/* Home growth modules: ten tiles in an even grid (one column on phones, two from 720 px, so no orphan in the last
   row). Icon at the inline start, title centred on it, tagline under the title and the plan badge at the bottom. */
.q-mod-grid { gap: 14px; margin-top: 48px; }
@media (min-width: 1040px) { .q-mod-grid { grid-template-columns: repeat(2, 1fr); } }
.q-mod-grid .q-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 4px; padding: 22px; }
.q-mod-grid .q-tile > .q-ico { grid-row: 1; grid-column: 1; }
.q-mod-grid .q-tile > .q-h3 { margin: 0; min-height: 44px; display: flex; align-items: center; font-size: 1.1875rem; }
.q-mod-grid .q-tile > p { grid-column: 2; margin: 0; }
.q-mod-grid .q-tile > .q-soon { grid-column: 2; align-self: end; justify-self: start; margin-top: 10px; }