/* Tillo website. The look of a Pakistani bazaar: deep green signboards with haldi (turmeric) lettering, bunting over
   the shop fronts, and the colours of the goods on the shelves. */

@font-face { font-family: "Heros"; src: url("../fonts/heros-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heros"; src: url("../fonts/heros-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Heros Cn"; src: url("../fonts/heros-cn-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tillo Nastaliq"; src: url("../fonts/nastaliq.woff") format("woff"); font-weight: 400 700; font-display: swap; }

:root {
    --ink: #12211a;
    --ink-2: #2f3f36;
    --muted: #57675e;
    --line: #d6e0d9;
    --paper: #ffffff;

    --board: #0d3a23;
    --board-2: #13532f;
    --deep: #0a2a19;
    --on-board: #fffbef;
    --on-board-2: rgba(255, 251, 239, .78);

    --green: #15803d;
    --green-600: #0f6a31;
    --green-bright: #22c55e;
    --mint: #e7f4eb;

    --haldi: #f5b416;
    --haldi-600: #d99800;
    --haldi-ink: #3a2700;
    --haldi-tint: #fff3d1;

    --chilli: #d4432c;
    --chilli-tint: #fde7e2;
    --sky: #1f78dc;
    --sky-tint: #e2eefc;
    --violet: #7c3aed;
    --violet-tint: #eee7fd;
    --amber: #c76a06;
    --amber-tint: #fdeed8;
    --pink: #df4f86;

    --text: "Heros", "Helvetica Neue", Arial, sans-serif;
    --display: "Heros Cn", "Arial Narrow", "Helvetica Neue", sans-serif;
    --urdu: "Tillo Nastaliq", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;

    --wrap: 1200px;
    --gutter: 16px;
    --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-600); text-underline-offset: .18em; }
a:hover { color: var(--green); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
svg.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: currentColor; }
:focus-visible { outline: 3px solid var(--haldi); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
@media (min-width: 720px) { :root { --gutter: 28px; } }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 6px; }
.skip:focus { left: 8px; }
.nowrap { white-space: nowrap; }
.urdu { font-family: var(--urdu); direction: rtl; unicode-bidi: isolate; line-height: 2.1; font-weight: 400; }
/* Urdu lines under English headings start on the same side as the English. */
.section-head .urdu, .help .urdu, .hero .tagline-ur, .cta .urdu, .page-hero .urdu { text-align: left; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 48px; padding: .7em 1.2em;
    border: 2px solid transparent; border-radius: 10px;
    font: 700 16px/1.2 var(--text); text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-600); color: #fff; }
.btn-haldi { background: var(--haldi); color: var(--haldi-ink); box-shadow: 0 3px 0 var(--haldi-600); }
.btn-haldi:hover { background: #ffc22e; color: var(--haldi-ink); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: rgba(18, 33, 26, .06); color: var(--ink); }
.btn-light { border-color: rgba(255, 251, 239, .6); color: var(--on-board); background: transparent; }
.btn-light:hover { background: rgba(255, 251, 239, .1); color: #fff; }
.btn-lg { min-height: 56px; padding: .8em 1.5em; font-size: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Header: a strip of shop colours, then the menu. */
.site-header { background: var(--paper); position: relative; z-index: 10; border-bottom: 1px solid var(--line); }
.site-header::before {
    content: ""; display: block; height: 5px;
    background: linear-gradient(90deg, var(--green) 0 20%, var(--haldi) 20% 40%, var(--chilli) 40% 60%, var(--sky) 60% 80%, var(--pink) 80% 100%);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand svg { width: 36px; height: 36px; }
.brand-name { font: 700 30px/1 var(--display); letter-spacing: -.01em; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a { padding: 10px 12px; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 16px; border-radius: 8px; }
.site-nav a:hover { color: var(--ink); background: var(--mint); }
.site-nav a[aria-current="page"] { color: var(--green-600); background: var(--mint); }
.site-nav .btn { margin-left: 12px; color: #fff; padding-inline: 1.1em; }
.site-nav .btn:hover { color: #fff; }
.menu-toggle { display: none; }
@media (max-width: 899.98px) {
    .site-header .wrap { min-height: 62px; }
    .menu-toggle {
        display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
        min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px;
        background: var(--paper); color: var(--ink); font: 700 16px var(--text); cursor: pointer;
    }
    .site-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px;
        background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(18, 33, 26, .1);
    }
    .site-nav.open { display: flex; }
    .site-nav a { padding: 14px 8px; border-radius: 0; border-bottom: 1px solid var(--line); }
    .site-nav a[aria-current="page"] { background: transparent; box-shadow: inset 4px 0 0 var(--green); padding-left: 16px; }
    .site-nav .btn { margin: 14px 0 0; border-bottom: 0; border-radius: 10px; }
}

/* Bunting: the little flags strung across a bazaar. */
.bunting {
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='38' viewBox='0 0 180 38'%3E%3Cpath d='M0 3 Q45 12 90 3 T180 3' fill='none' stroke='%23fffbef' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M6 5.2 L30 8.2 L16 31Z' fill='%23f5b416'/%3E%3Cpath d='M36 8.5 L60 9.6 L46 34Z' fill='%23d4432c'/%3E%3Cpath d='M66 8 L88 3.6 L79 30Z' fill='%2322c55e'/%3E%3Cpath d='M96 4 L120 8.2 L106 31Z' fill='%23df4f86'/%3E%3Cpath d='M126 8.6 L150 9.4 L136 34Z' fill='%231f78dc'/%3E%3Cpath d='M156 7.8 L178 3.4 L169 30Z' fill='%23fffbef'/%3E%3C/svg%3E") repeat-x 0 0 / 230px 46px;
}

/* Green signboard sections */
.board-band {
    position: relative;
    color: var(--on-board);
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 251, 239, .07) 1px, transparent 1.5px) 0 0 / 22px 22px,
        radial-gradient(120% 90% at 85% 10%, var(--board-2), var(--board) 60%);
}
.board-band a:not(.btn) { color: var(--haldi); }

.hero { padding: 26px 0 0; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 30px 0 72px; }
.sign {
    display: inline-flex; align-items: baseline; gap: 18px;
    padding: 12px 22px 6px;
    color: var(--on-board);
    background: var(--board);
    border-radius: 6px;
    box-shadow: inset 0 0 0 5px var(--board), inset 0 0 0 6.5px rgba(255, 251, 239, .35);
}
.board-band .sign { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 1.5px rgba(255, 251, 239, .35); }
.sign strong { font: 700 24px/1.2 var(--display); }
.sign .urdu { font-size: 21px; line-height: 1.8; color: var(--haldi); }
.hero h1 { margin-top: 24px; font: 700 clamp(42px, 5.4vw, 74px)/.97 var(--display); letter-spacing: -.012em; color: #fff; }
.hero .tagline-ur { display: block; margin-top: 10px; font-size: clamp(22px, 2.1vw, 29px); line-height: 2; color: var(--haldi); }
.hero .lead { margin: 14px 0 26px; font-size: 19px; color: var(--on-board-2); max-width: 52ch; }
.get { display: grid; gap: 12px; justify-items: start; }
.release-line { font-size: 15px; color: var(--on-board-2); margin: 0; }
.hero-price { font-size: 18px; color: var(--on-board); margin: 0 0 6px; }
.hero-price strong { color: var(--haldi); }
.hero-ur .hero-price { font-size: 20px; line-height: 2; }
.shot-stack { position: relative; }
.shot-stack::before {
    content: ""; position: absolute; inset: 26px -26px -26px 26px; border-radius: 14px; background: var(--haldi);
}
.shot-stack .shot { position: relative; border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.shot-stack .sticker { position: absolute; left: -26px; bottom: -18px; z-index: 2; }
@media (min-width: 1280px) { .hero .shot-stack { margin-right: calc((100vw - var(--wrap)) / -2 + 40px); } }
@media (max-width: 959.98px) {
    .hero .wrap { grid-template-columns: 1fr; padding-bottom: 64px; }
    .shot-stack { margin-right: 26px; }
    .shot-stack .sticker { left: auto; right: -14px; bottom: -22px; }
}

.shot { border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(18, 33, 26, .14), 0 2px 6px rgba(18, 33, 26, .06); background: #f4f6f5; }

/* Price sticker: the turmeric label on goods. */
.sticker {
    display: inline-grid; justify-items: center; align-content: center;
    min-width: 122px; padding: 12px 16px 6px;
    background: var(--chilli); color: #fff;
    border-radius: 50% 50% 46% 54% / 52% 46% 54% 48%;
    transform: rotate(-8deg);
    box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
    text-align: center;
}
.sticker strong { font: 700 30px/1 var(--display); }
.sticker span { font-size: 14px; font-weight: 700; }

/* Shown on phones and other computers: the program runs on Windows. */
.not-windows {
    display: grid; gap: 10px; margin-top: 4px; padding: 14px 16px;
    border: 1.5px dashed rgba(255, 251, 239, .4); border-radius: 10px;
    font-size: 15px; color: var(--on-board-2); max-width: 520px;
}
.not-windows[hidden] { display: none; }
.not-windows .btn { min-height: 40px; padding: .45em .9em; font-size: 15px; }
.light-area .not-windows { border-color: var(--line); color: var(--ink-2); background: var(--paper); }
.light-area .not-windows .btn-light { border-color: var(--ink); color: var(--ink); }

/* Sections */
.section { padding: 88px 0; }
.section-tight { padding: 60px 0; }
.section-mint { background: var(--mint); }
.section-rule { border-top: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: 38px; }
.section-head h2 { font: 700 clamp(32px, 4vw, 50px)/1.03 var(--display); letter-spacing: -.01em; }
.section-head .urdu { display: block; margin-top: 4px; font-size: 26px; color: var(--green-600); }
.board-band .section-head .urdu { color: var(--haldi); }
.section-head p { margin-top: 12px; color: var(--muted); font-size: 18px; }
.board-band .section-head p { color: var(--on-board-2); }
@media (max-width: 719.98px) { .section { padding: 60px 0; } }

/* Highlights on green: what every shop asks about. */
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.highlight { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.highlight .dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--haldi)); color: var(--dot-ink, var(--haldi-ink)); }
.highlight .dot svg { width: 24px; height: 24px; }
.highlight h3 { font-size: 19px; margin: 4px 0 6px; color: #fff; }
.highlight p { margin: 0; color: var(--on-board-2); font-size: 16px; }
@media (max-width: 959.98px) { .highlights { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599.98px) { .highlights { grid-template-columns: 1fr; gap: 28px; } }

/* Screens: a peek on the home page, the whole set on the Tillo Retail page. */
.peek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.peek a { display: block; text-decoration: none; color: var(--ink); }
.peek img { border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(18, 33, 26, .1); transition: transform .2s; }
.peek a:hover img { transform: translateY(-3px); }
.peek span { display: block; margin-top: 10px; font-weight: 700; }
.peek .peek-big { grid-column: span 2; grid-row: span 2; }
.peek-foot { margin-top: 30px; }
@media (max-width: 799.98px) { .peek { grid-template-columns: 1fr 1fr; } .peek .peek-big { grid-column: 1 / -1; grid-row: auto; } .peek a:last-child { display: none; } }

.screen-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.screen-filter button {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper);
    font: 700 15px var(--text); color: var(--ink-2); cursor: pointer;
}
.screen-filter button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink)); }
.screen-filter button:hover { border-color: var(--c, var(--ink)); }
.screen-filter button[aria-pressed="true"] { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: #fff; }
.screen-filter button[aria-pressed="true"]::before { background: #fff; }
.screen-filter .count { font-weight: 400; opacity: .75; }
.screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px 22px; }
.screen { margin: 0; }
.screen[hidden] { display: none; }
.screen a { display: block; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(18, 33, 26, .08); background: #f4f6f5; }
.screen a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.screen a:hover { box-shadow: 0 14px 30px rgba(18, 33, 26, .16); }
.screen img { transition: transform .25s; }
.screen a:hover img { transform: scale(1.02); }
.screen figcaption { padding: 12px 2px 0; }
.screen figcaption strong { display: block; font-size: 17px; }
.screen figcaption span { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.g-selling { --c: var(--green); --t: var(--mint); }
.g-khata { --c: var(--amber); --t: var(--amber-tint); }
.g-stock { --c: var(--sky); --t: var(--sky-tint); }
.g-reports { --c: var(--violet); --t: var(--violet-tint); }
.g-shop { --c: var(--chilli); --t: var(--chilli-tint); }

/* Screen viewer */
.viewer { width: min(1240px, 96vw); max-width: none; max-height: 96vh; padding: 0; border: 0; border-radius: 14px; background: var(--deep); color: var(--on-board); overflow: hidden; }
.viewer::backdrop { background: rgba(6, 20, 12, .82); }
.viewer-body { display: grid; grid-template-rows: auto 1fr; max-height: 96vh; }
.viewer-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid rgba(255, 251, 239, .14); }
.viewer-top h2 { font: 700 22px/1.2 var(--display); }
.viewer-top p { margin: 0; color: var(--on-board-2); font-size: 15px; }
.viewer-top .spacer { flex: 1; }
.viewer-btn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid rgba(255, 251, 239, .35); background: transparent; color: var(--on-board); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.viewer-btn:hover { background: rgba(255, 251, 239, .1); }
.viewer-btn svg { width: 20px; height: 20px; fill: currentColor; }
.viewer img { width: 100%; height: auto; max-height: calc(96vh - 76px); object-fit: contain; background: #f4f6f5; }
@media (max-width: 599.98px) { .viewer-top p { display: none; } }

/* Programs: shop fronts. */
.street { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; }
.shop { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.shop-board {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 20px 24px 14px;
    color: var(--on-board);
    background: var(--shop, var(--board));
    box-shadow: inset 0 0 0 6px var(--shop, var(--board)), inset 0 0 0 7.5px rgba(255, 251, 239, .32);
}
.shop-board h3 { font: 700 30px/1.05 var(--display); }
.shop-board .urdu { font-size: 23px; line-height: 1.9; color: var(--haldi); margin-left: auto; }
.shop-next { --shop: #3a4840; }
.awning {
    height: 24px;
    background: repeating-linear-gradient(90deg, var(--green) 0 26px, #f6fbf7 26px 52px);
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 12px no-repeat, radial-gradient(circle at 13px 0, #000 12px, transparent 12.5px) 0 12px / 26px 12px repeat-x;
    mask: linear-gradient(#000 0 0) 0 0 / 100% 12px no-repeat, radial-gradient(circle at 13px 0, #000 12px, transparent 12.5px) 0 12px / 26px 12px repeat-x;
}
.shop-window { padding: 14px 18px 0; margin-top: -12px; background: var(--mint); }
.shop-window img { border-radius: 8px 8px 0 0; border: 1px solid var(--line); border-bottom: 0; }
.shutter {
    position: relative; flex: 1; min-height: 220px;
    display: grid; place-items: center; padding: 28px 18px 44px;
    background: linear-gradient(180deg, rgba(18, 33, 26, .12), transparent 18px), repeating-linear-gradient(180deg, #e2e9e5 0 11px, #c6d1cb 11px 13px, #f2f5f3 13px 15px);
}
.shutter::after { content: ""; position: absolute; left: 50%; bottom: 16px; width: 64px; height: 10px; margin-left: -32px; border-radius: 3px; background: #7a8780; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.shutter-plate { display: grid; justify-items: center; padding: 12px 20px 8px; background: var(--haldi); color: var(--haldi-ink); border-radius: 4px; text-align: center; transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(18, 33, 26, .15); }
.shutter-plate strong { font: 700 22px/1.1 var(--display); }
.shutter-plate .urdu { font-size: 19px; line-height: 2; }
.shop-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; flex: 1; }
.shop-body p { margin: 0; color: var(--ink-2); }
.shop-body .btn-row { margin-top: auto; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--green-600); }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.status-soon { color: var(--muted); }
.status-soon::before { background: #9aa7a0; box-shadow: none; }
@media (max-width: 799.98px) { .street { grid-template-columns: 1fr; } }

/* Numbered steps (a real sequence). */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: 66px; }
.steps li::before {
    content: counter(step); position: absolute; top: 0; left: 0;
    width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%;
    background: var(--c, var(--haldi)); color: var(--dot-ink, var(--haldi-ink)); font: 700 25px/1 var(--display);
}
.steps li:nth-child(2) { --c: var(--chilli); --dot-ink: #fff; }
.steps li:nth-child(3) { --c: var(--green); --dot-ink: #fff; }
.steps h3 { font-size: 19px; margin-bottom: 8px; }
.steps p { margin: 0; color: var(--muted); font-size: 16px; }
.board-band .steps p { color: var(--on-board-2); }
.steps-vertical { grid-template-columns: 1fr; gap: 26px; }
.steps-vertical li { padding: 0 0 0 68px; min-height: 50px; }
@media (max-width: 799.98px) { .steps { grid-template-columns: 1fr; gap: 26px; } .steps li { padding: 0 0 0 68px; min-height: 50px; } }

/* Help: a haldi signboard. */
.help-band { background: var(--haldi); color: var(--haldi-ink); }
.help { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: 64px 0; }
.help h2 { font: 700 clamp(28px, 3.4vw, 42px)/1.06 var(--display); }
.help .urdu { display: block; font-size: 25px; }
.help .number { font: 700 clamp(40px, 5.6vw, 72px)/1 var(--display); color: var(--ink); text-decoration: none; display: inline-block; margin-top: 8px; letter-spacing: .01em; }
.help .number:hover { color: var(--board); }
.help .btn-line { border-color: var(--haldi-ink); color: var(--haldi-ink); }
.help .btn-line:hover { background: rgba(58, 39, 0, .08); }
@media (max-width: 799.98px) { .help { grid-template-columns: 1fr; } .help .urdu { font-size: 21px; } }

/* Footer */
.site-footer { background: var(--deep); color: var(--on-board-2); padding: 56px 0 40px; font-size: 15px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 1099.98px) { .site-footer .wrap { grid-template-columns: repeat(4, 1fr); } .site-footer .about { grid-column: 1 / -1; } }
.site-footer h2 { font-size: 15px; color: #fff; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--on-board); text-decoration: none; }
.site-footer a:hover { color: var(--haldi); text-decoration: underline; }
.site-footer .brand, .site-footer .brand:hover { color: #fff; text-decoration: none; }
.site-footer .brand-name { font-size: 28px; }
.site-footer .fine { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 251, 239, .14); font-size: 14px; }
@media (max-width: 799.98px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .about { grid-column: 1 / -1; } }

/* Feature lists */
.feature-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.feature-group { background: var(--paper); border-radius: var(--radius); padding: 24px 24px 26px; border-top: 5px solid var(--c); }
.feature-group h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; margin-bottom: 16px; }
.feature-group h3 .ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--t); color: var(--c); }
.feature-group h3 svg { width: 22px; height: 22px; }
.feature-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feature-group li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 16px; }
.feature-group li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
@media (max-width: 959.98px) { .feature-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599.98px) { .feature-groups { grid-template-columns: 1fr; } }

/* Price */
.price-band { background: var(--haldi-tint); }
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.price-big { font: 700 clamp(42px, 5vw, 66px)/1 var(--display); letter-spacing: -.01em; }
.price-big span { display: block; }
.price .note { margin-top: 20px; color: var(--ink-2); font-size: 16px; max-width: 46ch; }
.price-tag {
    display: inline-flex; align-items: baseline; gap: 10px; margin-top: 18px; padding: 10px 18px 10px 28px;
    background: var(--haldi); color: var(--haldi-ink); font: 700 30px/1 var(--display);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
    border-radius: 0 8px 8px 0;
}
.price-tag small { font: 700 15px var(--text); }
@media (max-width: 899.98px) { .price { grid-template-columns: 1fr; gap: 36px; } }

/* Requirements */
.needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--ink); }
.needs div { padding: 18px 20px 4px 0; }
.needs dt { font-weight: 700; margin-bottom: 4px; }
.needs dd { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 899.98px) { .needs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519.98px) { .needs { grid-template-columns: 1fr; } }

/* Questions */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; font-weight: 700; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--green-600); font: 700 22px/1 var(--display); }
.faq details[open] summary::after { content: "−"; background: var(--green); color: #fff; }
.faq details p { margin: -4px 0 22px; color: var(--ink-2); max-width: 70ch; }

/* Closing call */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center; padding: 64px 0; }
.cta h2 { font: 700 clamp(30px, 3.6vw, 48px)/1.04 var(--display); color: #fff; }
.cta .urdu { display: block; font-size: 25px; color: var(--haldi); line-height: 2; }
@media (max-width: 899.98px) { .cta { grid-template-columns: 1fr; } }

/* Download page */
.page-hero .wrap { padding: 40px 0 56px; }
.page-hero h1 { font: 700 clamp(40px, 5vw, 66px)/1 var(--display); letter-spacing: -.01em; color: #fff; }
.page-hero .urdu { display: block; font-size: clamp(24px, 2.6vw, 32px); color: var(--haldi); }
.dl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: 0 20px 50px rgba(18, 33, 26, .12); margin-top: -40px; position: relative; }
.dl-card .shop-board { grid-column: 1 / -1; }
.dl-info { padding: 28px; }
.dl-info dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.dl-info dt { color: var(--muted); }
.dl-info dd { margin: 0; font-weight: 700; }
.dl-get { padding: 28px; background: var(--mint); display: grid; gap: 14px; align-content: start; }
.dl-get p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 799.98px) { .dl-card { grid-template-columns: 1fr; } }
.aside-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.aside-notes h3 { font-size: 18px; margin-bottom: 6px; }
.aside-notes p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 799.98px) { .aside-notes { grid-template-columns: 1fr; gap: 22px; } }
.kbd { display: inline-block; padding: 0 .4em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--paper); font-size: .92em; font-weight: 700; white-space: nowrap; color: var(--ink); }

/* Topic pages: short cards, running text, links between pages. */
.topic-cards .feature-group h3 { margin-bottom: 10px; }
.feature-group p { margin: 0; color: var(--ink-2); font-size: 16px; }
.prose { max-width: 74ch; }
.prose p { margin: 0 0 16px; font-size: 18px; color: var(--ink-2); }
.prose ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 12px; }
.prose li { position: relative; padding-left: 22px; font-size: 18px; color: var(--ink-2); }
.prose li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.price-line { margin: 30px 0 0; font-size: 17px; color: var(--ink-2); max-width: 74ch; }
.topic-links { margin: 30px 0 0; font-size: 17px; color: var(--ink-2); }
.board-band .topic-links { color: var(--on-board-2); }
.topic-links [lang="ur"] { font-family: var(--urdu); margin-left: 6px; }

/* The language link in the menu. */
.lang-link[lang="ur"] { font-family: var(--urdu); font-size: 19px; line-height: 1; }

/* The Urdu page: right to left, in Nastaliq. */
[dir="rtl"] body { font-family: var(--urdu); line-height: 2.1; }
[dir="rtl"] .hero h1, [dir="rtl"] .section-head h2, [dir="rtl"] .price-big, [dir="rtl"] .help h2, [dir="rtl"] h3, [dir="rtl"] .faq summary {
    font-family: var(--urdu); font-weight: 700; letter-spacing: 0;
}
[dir="rtl"] .hero h1 { font-size: clamp(34px, 4vw, 54px); line-height: 1.75; }
[dir="rtl"] .section-head h2 { line-height: 1.8; font-size: clamp(28px, 3.2vw, 40px); }
[dir="rtl"] .price-big { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.8; }
[dir="rtl"] .help h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.9; }
[dir="rtl"] h3 { line-height: 1.9; }
[dir="rtl"] .hero .lead, [dir="rtl"] .feature-group p, [dir="rtl"] .steps p, [dir="rtl"] .faq details p, [dir="rtl"] .price .note { line-height: 2.1; }
[dir="rtl"] .sign strong { font-family: var(--urdu); font-size: 24px; line-height: 1.8; }
[dir="rtl"] .sign span[lang="en"] { font: 700 18px/1.2 var(--display); color: var(--haldi); }
[dir="rtl"] .site-nav a:not(.btn):not(.lang-link), [dir="rtl"] .btn, [dir="rtl"] .menu-toggle { font-family: var(--urdu); }
[dir="rtl"] .lang-link, [dir="rtl"] .help .number, [dir="rtl"] .price-tag, [dir="rtl"] .sticker strong { font-family: var(--display); }
[dir="rtl"] .price-tag small, [dir="rtl"] .sticker span { font-family: var(--urdu); }
[dir="rtl"] .shot-stack::before { inset: 26px 26px -26px -26px; }
[dir="rtl"] .shot-stack .sticker { left: auto; right: -26px; }
[dir="rtl"] .steps li::before { left: auto; right: 0; }
[dir="rtl"] .steps-vertical li { padding: 0 68px 0 0; }
[dir="rtl"] .price-tag { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding: 10px 28px 10px 18px; }
@media (min-width: 1280px) { [dir="rtl"] .hero .shot-stack { margin-right: 0; margin-left: calc((100vw - var(--wrap)) / -2 + 40px); } }
@media (max-width: 959.98px) { [dir="rtl"] .shot-stack { margin-right: 0; margin-left: 26px; } [dir="rtl"] .shot-stack .sticker { right: auto; left: -14px; } }
@media (max-width: 799.98px) { [dir="rtl"] .steps li { padding: 0 68px 0 0; } }
[dir="rtl"] .skip { left: auto; right: -9999px; }
[dir="rtl"] .skip:focus { right: 8px; }
/* The footer stays English and left to right on the Urdu page. */
[dir="rtl"] .site-footer { direction: ltr; font-family: var(--text); line-height: 1.6; }
.site-footer [lang="ur"] { font-family: var(--urdu); }
.nowrap-ur { white-space: nowrap; }