/* Padam website — the app's "Leather & Tan" brand: brown #6B3E26 (header, main buttons, headings; white text only
   there), tan #D9893F as a FILL with dark text (never tan text on white), warm off-white #FAF6F1, text #2B1D14.
   Size-grid status colours as in the app: in stock #E3F1E4/#1B5E20, low #FFE9B3/#5C3D00, sold out #EEEEEE/#616161.
   Layout follows the Duttatech
   sites' template (sticky header, hero with app screens, trust band, cards, rows, steps, FAQ, CTA, footer).
   System fonts only (no web-font download on 4G): Android has Noto for every Indian script, Windows has Nirmala UI.
   Logical properties (margin-inline, inset-inline) so the Urdu pages mirror correctly in RTL. */
:root {
  --bg: #FAF6F1;
  --surface: #FFFFFF;
  --tint: #F3E9DC;
  --line: #E6D9C8;
  --text: #2B1D14;
  --text-2: #4A382D;
  --muted: #6F5E53;
  --brown: #6B3E26;
  --brown-2: #84502F;
  --tan: #D9893F;
  --tan-text: #7A4A12;
  --ok: #2E7D4F;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(58, 36, 22, .06), 0 14px 32px -18px rgba(58, 36, 22, .35);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Nirmala UI', 'Noto Sans Devanagari', 'Noto Sans Bengali',
    'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Gujarati', 'Noto Sans Gurmukhi',
    'Noto Sans Oriya', 'Noto Naskh Arabic', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; }
.lang-ur body, body.lang-ur { line-height: 1.9; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brown); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brown-2); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; color: var(--text); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 860px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--brown); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { inset-inline-start: 8px; }
:focus-visible { outline: 3px solid var(--tan); outline-offset: 2px; border-radius: 6px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-lg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; text-align: center; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 15px; }
.btn-primary { background: var(--brown); color: #fff; box-shadow: 0 8px 20px -10px rgba(107, 62, 38, .8); }
.btn-primary:hover { background: var(--brown-2); color: #fff; }
.btn-ghost { background: #fff; color: var(--brown); border: 1px solid rgba(107, 62, 38, .35); }
.btn-ghost:hover { background: #FBF3EA; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(107, 62, 38, .97); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 21px; }
.brand:hover { color: #fff; }
.brand img { border-radius: 9px; }
.site-footer .brand { color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.nav-links a:hover { color: #fff; }
.nav-links .nav-cta { background: var(--tan); color: var(--text); box-shadow: none; }
.nav-links .nav-cta:hover { background: #E39A55; color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 6px; }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: #fff; font-weight: 600; font-size: 15px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { list-style: none; position: absolute; inset-inline-end: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 170px; max-height: 70vh; overflow: auto; z-index: 60; }
.lang li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.lang li a:hover, .lang li a[aria-current] { background: var(--tint); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* Hero */
.hero { padding: 56px 0 40px; background: radial-gradient(900px 480px at 90% 0%, rgba(217, 137, 63, .16), transparent 60%), linear-gradient(180deg, #FFFBF6, var(--bg)); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--tan-text); }
.hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; margin-top: 18px; color: var(--brown); }
.lead { margin-top: 18px; font-size: 19px; color: var(--text-2); }
.fine { margin-top: 12px; font-size: 14px; color: var(--muted); }
.hero-points { list-style: none; display: grid; gap: 8px; margin-top: 22px; }
.hero-points li, .ticks li { display: flex; gap: 10px; align-items: flex-start; }
.hero-points .ic, .ticks .ic { color: var(--ok); margin-top: 4px; }
.hero-art.devices img { border: 0; border-radius: 0; box-shadow: none; background: none; width: 112%; max-width: none; margin-left: -4%; }
.showcase img { display: block; width: 100%; max-width: 1000px; margin: 8px auto 0; }
.hero-art img { width: 100%; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(58, 36, 22, .5); border: 1px solid var(--line); background: #fff; }

/* Bands and sections */
.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 22px 0; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); font-weight: 600; }
.trust .ic { color: var(--tan-text); width: 22px; height: 22px; }
.section { padding: 76px 0; }
.page-top { padding-top: 36px; }
.section-tint { background: var(--tint); }
.section-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 800; color: var(--brown); }
.section-head p:not(.kicker) { margin-top: 14px; color: var(--muted); font-size: 18px; }
.kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tan-text); margin-bottom: 10px; }
.page-head { padding: 40px 0 8px; background: linear-gradient(180deg, #FFFBF6, var(--bg)); }
.page-head h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--brown); margin-top: 10px; }
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.notice { margin: 18px auto 0; padding: 12px 16px; border-radius: 12px; background: #FFF3D6; border: 1px solid #F0D58A; color: #5A4610; font-size: 15px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card .ic-lg { color: var(--brown); background: #F6ECE3; border-radius: 12px; padding: 7px; width: 44px; height: 44px; }
.card h3 { font-size: 19px; margin-top: 14px; }
.card p { margin-top: 8px; color: var(--text-2); font-size: 16px; }
.card .more { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Rows */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 56px; }
.row:first-of-type { margin-top: 0; }
.row-rev .row-text { order: 2; }
.row-text h3 { font-size: clamp(22px, 2.6vw, 30px); color: var(--brown); }
.row-text p { margin-top: 12px; color: var(--text-2); }
.ticks { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.row-art img { width: 100%; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.steps .num { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; background: var(--brown); color: #fff; font-weight: 800; }
.steps h3 { margin-top: 12px; font-size: 19px; }
.steps p { margin-top: 6px; color: var(--text-2); font-size: 16px; }

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: inline-end; color: var(--tan-text); font-weight: 800; }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 18px 16px; color: var(--text-2); }

/* CTA */
.cta-band { background: linear-gradient(135deg, var(--brown), #47281A); }
.cta { text-align: center; color: #fff; }
.cta h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); }
.cta p { margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 18px; }
.cta .cta-row { justify-content: center; }
.cta .btn-primary { background: var(--tan); color: var(--text); }
.cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* Prose (guides, legal) */
.prose { font-size: 17.5px; color: var(--text-2); }
.prose h2 { font-size: 26px; color: var(--brown); margin: 36px 0 12px; }
.prose h3 { font-size: 20px; margin: 24px 0 8px; }
.prose p, .prose ul, .prose ol, .prose table { margin: 12px 0; }
.prose ul, .prose ol { padding-inline-start: 24px; }
.prose li { margin: 6px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; vertical-align: top; }
.prose th { background: var(--tint); }
.prose .box { background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--tan); border-radius: 10px; padding: 14px 16px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan { min-width: 0; position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.plan-hot { border: 2px solid var(--tan); }
.badge { position: absolute; top: -13px; inset-inline-start: 22px; background: var(--tan); color: var(--text); font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.plan h3 { font-size: 22px; color: var(--brown); }
.plan-for { color: var(--muted); font-size: 15px; margin-top: 4px; }
.price { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.price b { font-size: 36px; color: var(--text); }
.price span { color: var(--muted); }
.plan .ticks { margin: 18px 0 22px; font-size: 15.5px; }
.plan .btn { width: 100%; }
.addons { margin-top: 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.addons ul { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.addons li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }

/* Links list, contact */
.link-list { list-style: none; display: grid; gap: 10px; }
.link-list li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.link-list a { font-weight: 700; text-decoration: none; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.contact-card { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.contact-card .ic-lg { color: var(--brown); }
.contact-card span { color: var(--muted); font-size: 15px; }

/* Calculators */
.calc-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: start; }
.calc-intro { color: var(--text-2); }
.calc-intro h2 { color: var(--brown); font-size: 24px; margin: 20px 0 8px; }
.calc-intro p, .calc-intro ul { margin: 10px 0; }
.calc-intro ul { padding-inline-start: 22px; }
.calc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); position: sticky; top: 84px; }
.calc .field { display: grid; gap: 4px; margin-bottom: 14px; }
.calc label { font-weight: 700; font-size: 15px; }
.calc .hint { font-size: 13px; color: var(--muted); }
.calc input, .calc select { width: 100%; padding: 11px 12px; font: inherit; font-size: 17px; border: 1px solid #D9C9B4; border-radius: 10px; background: #FFFDF9; color: var(--text); }
.calc input:focus, .calc select:focus { outline: 2px solid var(--tan); border-color: var(--tan); }
.calc .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc .result { margin-top: 6px; border-top: 2px solid var(--line); padding-top: 14px; }
.calc .result dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.calc .result dt { color: var(--text-2); }
.calc .result dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.calc .result .total dt, .calc .result .total dd { font-size: 21px; color: var(--brown); font-weight: 800; border-top: 1px dashed var(--line); padding-top: 8px; }
.calc .actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.calc .actions .btn { flex: 1; min-width: 140px; }

/* Footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 52px 0 28px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.foot-brand p { margin-top: 12px; }
.site-footer h4 { font-size: 15px; color: var(--brown); }
.site-footer ul { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.site-footer ul a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.foot-langs a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.copy { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* Responsive */
@media (max-width: 1140px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 14px; }
}
@media (max-width: 1040px) {
  .hero-art.devices img { width: 100%; margin-left: 0; }
  .nav-links { display: none; position: absolute; top: 64px; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--brown); padding: 8px 20px 18px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .nav-links .nav-cta { margin-top: 12px; border: 0; }
  .nav-toggle { display: block; }
  .hero-grid, .row, .calc-wrap { grid-template-columns: 1fr; gap: 28px; }
  .row-rev .row-text { order: 0; }
  .cards, .steps, .plans { grid-template-columns: 1fr 1fr; }
  .trust { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .calc { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .section { padding: 52px 0; }
  .hero { padding-top: 32px; }
  .cards, .steps, .plans, .contact-grid { grid-template-columns: 1fr; }
  .lang summary span { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .calc .two { grid-template-columns: 1fr; }
}

/* Size chart, set-ratio and result tables inside calculators and guides */
.calc .result table, .calc-intro table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 10px 0; background: #fff; }
.calc .result table { display: block; overflow-x: auto; }
.calc .result th, .calc .result td, .calc-intro th, .calc-intro td { border: 1px solid var(--line); padding: 7px 9px; text-align: center; font-variant-numeric: tabular-nums; }
.calc .result th, .calc-intro th { background: var(--tint); }
.calc .result tr.hit td { background: #E3F1E4; color: #1B5E20; font-weight: 800; }
.calc .result .msg { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.calc .result .msg-ok { background: #E3F1E4; color: #1B5E20; }
.calc .result .msg-warn { background: #FFE9B3; color: #5C3D00; }
.calc .result .msg-alert { background: #FBE9E5; color: #8A2E1F; }
.calc-intro .box, .prose .ok { background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--tan); border-radius: 10px; padding: 12px 14px; }
.prose td.num, .prose th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-ok, .chip-low, .chip-out { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 700; font-size: .92em; }
.chip-ok { background: #E3F1E4; color: #1B5E20; } .chip-low { background: #FFE9B3; color: #5C3D00; } .chip-out { background: #EEEEEE; color: #616161; }
.plan .limits { list-style: none; display: grid; gap: 4px; margin: 14px 0 0; padding: 10px 12px; background: var(--tint); border-radius: 10px; font-size: 15px; }
/* Wide scripts: grid children may shrink, long words wrap instead of pushing the page sideways */
.hero-grid > *, .row > *, .calc-wrap > *, .cards > *, .steps > *, .foot-grid > * { min-width: 0; }
body { overflow-wrap: break-word; }
.calc-intro, .calc label, .card h3, .plan h3 { overflow-wrap: anywhere; }