/* Swaad — shared stylesheet for localized pages (Mise en Place design system).
   Latin/English originals keep their inline CSS; localized pages link this file and
   override only --serif/--sans inline (with the script's Noto font). Page-type rules
   are scoped by a body class (p-home / p-pricing / p-contact / p-legal / p-doc /
   p-languages) so selectors like .item and .row never collide. See DESIGN.md. */

:root{
  /* Default Latin font stack; localized pages override --serif/--sans inline. */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --paper:#F7F1E6; --surface:#FBF7EF; --ink:#221A14; --muted:#6B5D4F; --hairline:#DCD2BF;
  --chili:#B8472A; --tamarind:#8C2F18; --amber:#D98A3D; --curry:#4E6B3C; --red:#A8341F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased}
.wrap{max-width:760px; margin:0 auto; padding:40px 28px 80px}
@media (min-width:900px){ .wrap{padding-left:84px} }
.p-home .wrap{max-width:820px; padding-bottom:88px}
a{color:var(--chili); text-decoration:none}
a:hover{text-decoration:underline}

/* header / brand / nav / language switcher — shared by all page types */
header.site{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--hairline); padding-bottom:18px}
.brand{font-family:var(--serif); font-weight:700; font-size:21px; letter-spacing:-0.01em}
.brand .by{font-family:var(--mono); font-weight:400; color:var(--muted); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; margin-left:10px}
nav.site a{font-family:var(--sans); color:var(--muted); margin-left:16px; font-size:14px}
nav.site a:first-child{margin-left:0}
nav.site a:hover{color:var(--chili)}
.langpicker{position:relative; font-family:var(--mono); font-size:12px; margin-left:16px}
.langpicker summary{list-style:none; cursor:pointer; color:var(--muted); letter-spacing:0.05em}
.langpicker summary::-webkit-details-marker{display:none}
.langpicker summary:hover{color:var(--chili)}
.langpicker .langmenu{position:absolute; right:0; top:150%; background:var(--surface); border:1px solid var(--hairline); border-radius:8px; padding:6px; min-width:180px; box-shadow:0 8px 24px rgba(34,26,20,0.10); z-index:20}
.langpicker .langmenu a{display:block; padding:7px 10px; border-radius:6px; color:var(--ink); white-space:nowrap}
.langpicker .langmenu a:hover{background:var(--paper); text-decoration:none}
.langpicker .langmenu a[aria-current="true"]{color:var(--chili); font-weight:700}

/* shared inline-content bits */
.eyebrow{display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--chili); font-weight:600; margin:40px 0 16px}
.lede{font-size:20px; color:var(--muted); margin:0 0 8px; max-width:62ch}
.cta{display:inline-block; font-family:var(--sans); border:1px solid var(--chili); color:var(--chili); border-radius:8px; padding:10px 18px; font-size:15px; font-weight:600}
.cta:hover{background:var(--chili); color:#fff; text-decoration:none}
.callout{background:var(--surface); border:1px solid var(--hairline); border-left:3px solid var(--chili); border-radius:8px; padding:18px 20px; margin:20px 0}
.callout h2{margin-top:0}
.pill{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid var(--curry); color:var(--curry); background:color-mix(in srgb, var(--curry) 12%, transparent)}

footer.site{border-top:1px solid var(--hairline); margin-top:56px; padding-top:20px; display:flex; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--chili)}
footer.site .copy{font-family:var(--mono)}

/* ---- p-home ---- */
.p-home .hero{margin:52px 0 8px}
.p-home .hero h1{font-family:var(--serif); font-size:clamp(34px,6.4vw,56px); line-height:1.18; letter-spacing:-0.01em; font-weight:700; margin:0 0 18px}
.p-home .hero .lede{margin:0 0 8px}
.p-home section{margin:52px 0}
.p-home h2{font-family:var(--serif); font-size:30px; letter-spacing:-0.005em; line-height:1.3; margin:0 0 8px; font-weight:700}
.p-home .sec-note{color:var(--muted); margin:0 0 22px; max-width:64ch}
.p-home .menu{margin-top:6px}
.p-home .item{padding:16px 0; border-top:1px solid var(--hairline)}
.p-home .item:last-child{border-bottom:1px solid var(--hairline)}
.p-home .item .head{display:flex; align-items:baseline; gap:0.7rem}
.p-home .item .nm{font-family:var(--serif); font-size:22px; letter-spacing:-0.005em}
.p-home .item .dots{flex:1; border-bottom:2px dotted var(--hairline); transform:translateY(-0.28em); min-width:24px}
.p-home .item .idx{font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--chili); white-space:nowrap}
.p-home .item p{margin:8px 0 0; color:var(--muted); font-size:15px; max-width:64ch}
.artifact{background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:24px 26px; max-width:560px; margin-top:6px}
.artifact .alabel{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.artifact .ahead{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:10px}
.artifact .atitle{font-family:var(--serif); font-size:22px; letter-spacing:-0.005em; font-weight:700}
.artifact .acode{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--muted); text-transform:uppercase; text-align:right}
.artifact .asub{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 2px}
.arow{display:flex; align-items:baseline; gap:0.6rem; padding:6px 0}
.arow .nm{font-family:var(--serif); font-size:16px}
.arow .dots{flex:1; border-bottom:1px dotted var(--hairline); transform:translateY(-0.28em); min-width:18px}
.arow .qt{font-family:var(--mono); font-size:13.5px; color:var(--ink)}
.artifact .afoot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--hairline); font-family:var(--mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em}
.artifact-link{margin:14px 0 0; max-width:560px; font-size:14.5px}
.p-home .soon{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:28px 0}
.p-home .soon h2{margin-top:0}
.p-home .soon p{color:var(--muted); margin:0 0 16px; max-width:64ch}
.p-home .contact p{color:var(--muted)}

/* ---- p-pricing ---- */
.p-pricing h1{font-family:var(--serif); font-size:clamp(34px,6vw,52px); line-height:1.12; letter-spacing:-0.02em; margin:0 0 14px; font-weight:700}
.p-pricing h2{font-family:var(--serif); font-size:24px; letter-spacing:-0.01em; margin:40px 0 10px; font-weight:700}
.p-pricing p,.p-pricing li{color:var(--ink); font-size:15.5px}
.p-pricing p{margin:0 0 12px}
.p-pricing ul{margin:0 0 12px; padding-left:22px}
.p-pricing li{margin:0 0 6px}
.plan{background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:26px 28px; margin:28px 0; max-width:560px}
.plan .pname{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.plan .price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--hairline); padding-bottom:16px; margin-bottom:16px}
.plan .amt{font-family:var(--mono); font-size:40px; letter-spacing:-0.02em; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
.plan .per{font-family:var(--mono); font-size:13.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted)}
.plan .tax{font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--curry); margin:0 0 14px; text-transform:uppercase}
.trial{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid var(--amber); color:#9a5a16; background:color-mix(in srgb, var(--amber) 14%, transparent)}
.p-pricing .menu{margin:8px 0 0; max-width:560px}
.p-pricing .item{padding:12px 0; border-top:1px solid var(--hairline); display:flex; align-items:baseline; gap:0.7rem}
.p-pricing .item:last-child{border-bottom:1px solid var(--hairline)}
.p-pricing .item .nm{font-family:var(--serif); font-size:18px; letter-spacing:-0.005em}
.p-pricing .item .dots{flex:1; border-bottom:2px dotted var(--hairline); transform:translateY(-0.28em); min-width:24px}
.p-pricing .item .idx{font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--chili); white-space:nowrap}

/* ---- p-contact ---- */
.p-contact h1{font-family:var(--serif); font-size:clamp(34px,6vw,48px); line-height:1.1; letter-spacing:-0.02em; margin:0 0 14px; font-weight:700}
.p-contact h2{font-family:var(--serif); font-size:22px; letter-spacing:-0.01em; margin:38px 0 10px; font-weight:700}
.p-contact p{color:var(--ink); font-size:15.5px; margin:0 0 12px}
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:26px 28px; margin:24px 0; max-width:560px}
.p-contact .row{display:grid; grid-template-columns:120px 1fr; gap:8px 18px; padding:12px 0; border-top:1px solid var(--hairline)}
.p-contact .row:first-child{border-top:none; padding-top:0}
.p-contact .row .k{font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.p-contact .row .v{font-size:16px}
.p-contact .row .v .biz{font-family:var(--serif); font-size:19px; letter-spacing:-0.005em}
.p-contact .row .v address{font-style:normal; color:var(--ink)}
.hours{font-family:var(--mono); font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---- p-legal ---- */
.p-legal h1{font-family:var(--serif); font-size:36px; letter-spacing:-0.02em; margin:44px 0 4px; font-weight:700}
.p-legal .updated{font-family:var(--mono); color:var(--muted); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; margin:0 0 8px}
.p-legal h2{font-family:var(--serif); font-size:21px; letter-spacing:-0.01em; margin:36px 0 10px; font-weight:700}
.p-legal h3{font-family:var(--serif); font-size:16.5px; margin:22px 0 6px; font-weight:700}
.p-legal p,.p-legal li{color:var(--ink); font-size:15.5px}
.p-legal p{margin:0 0 12px}
.p-legal ul{margin:0 0 12px; padding-left:22px}
.p-legal li{margin:0 0 6px}
.p-legal code{font-family:var(--mono); font-size:13px; background:var(--surface); border:1px solid var(--hairline); border-radius:4px; padding:0.5px 5px}

/* ---- p-doc (BEO printable) ---- */
.p-doc{background:var(--paper)}
.p-doc .bar{max-width:820px; margin:0 auto; padding:18px 28px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.p-doc .bar .back{font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted)}
.p-doc .bar .note{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:0.03em}
.print-btn{font-family:var(--sans); font-weight:600; font-size:14px; border:1px solid var(--chili); color:#fff; background:var(--chili); border-radius:8px; padding:9px 16px; cursor:pointer}
.print-btn:hover{background:var(--tamarind); border-color:var(--tamarind)}
.sheet{background:var(--surface); color:var(--ink); max-width:820px; margin:0 auto 60px; padding:46px 52px 40px; border:1px solid var(--hairline); border-radius:10px}
.letterhead{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; border-bottom:2px solid var(--ink); padding-bottom:16px}
.lh-brand{font-family:var(--serif); font-size:26px; font-weight:700; letter-spacing:-0.01em}
.lh-brand .by{font-family:var(--mono); font-weight:400; color:var(--muted); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; display:block; margin-top:3px}
.lh-doc{text-align:right}
.lh-doc .kind{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--chili); font-weight:600}
.lh-doc .code{font-family:var(--serif); font-size:24px; font-weight:700; letter-spacing:-0.005em; margin-top:2px}
.lh-doc .stamp{font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.meta{display:grid; grid-template-columns:repeat(3,1fr); gap:14px 22px; margin:22px 0 8px}
.meta .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:0 0 2px}
.meta .v{font-family:var(--serif); font-size:16px; line-height:1.3}
.meta .v.mono{font-family:var(--mono); font-size:13.5px; letter-spacing:0.02em}
.p-doc h2{font-family:var(--serif); font-size:17px; margin:30px 0 4px; font-weight:700; border-bottom:1px solid var(--hairline); padding-bottom:6px}
.p-doc .sub{font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 2px}
.p-doc .row{display:flex; align-items:baseline; gap:0.6rem; padding:6px 0; border-bottom:1px solid color-mix(in srgb, var(--hairline) 55%, transparent)}
.p-doc .row .nm{font-family:var(--serif); font-size:15.5px}
.p-doc .row .nm .det{display:block; font-family:var(--sans); font-size:12px; color:var(--muted); line-height:1.3; margin-top:1px}
.p-doc .row .dots{flex:1; border-bottom:1px dotted var(--hairline); transform:translateY(-0.28em); min-width:18px}
.p-doc .row .qt{font-family:var(--mono); font-size:13.5px; color:var(--ink); white-space:nowrap; text-align:right}
.p-doc .timeline .row .qt{color:var(--muted)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.notes{background:var(--paper); border:1px solid var(--hairline); border-left:3px solid var(--amber); border-radius:8px; padding:14px 16px; margin-top:14px}
.notes p{margin:0 0 6px; font-size:14px}
.notes p:last-child{margin:0}
.notes strong{font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--tamarind)}
.docfoot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; margin-top:30px; padding-top:14px; border-top:2px solid var(--ink); font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em}
.sample-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); text-align:center; margin:20px auto 0; max-width:820px; padding:0 28px}
@media (max-width:620px){ .two{grid-template-columns:1fr} .meta{grid-template-columns:1fr 1fr} }

/* ---- p-languages (index hub) ---- */
.p-languages h1{font-family:var(--serif); font-size:clamp(32px,6vw,46px); letter-spacing:-0.02em; margin:40px 0 6px; font-weight:700}
.p-languages .grid{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.p-languages .grid a{display:flex; align-items:baseline; gap:10px; padding:14px 16px; border:1px solid var(--hairline); border-radius:10px; background:var(--surface); color:var(--ink)}
.p-languages .grid a:hover{border-color:var(--chili); text-decoration:none}
.p-languages .grid .nat{font-family:var(--serif); font-size:19px}
.p-languages .grid .en{font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted)}

/* ---- RTL (Urdu / Kashmiri / Sindhi) ---- */
[dir="rtl"] .callout{border-left:none; border-right:3px solid var(--chili)}
[dir="rtl"] .langpicker .langmenu{right:auto; left:0}
[dir="rtl"] nav.site a{margin-left:0; margin-right:16px}
[dir="rtl"] nav.site a:first-child{margin-right:0}
[dir="rtl"] .langpicker{margin-left:0; margin-right:16px}
[dir="rtl"] .p-legal ul,[dir="rtl"] .p-pricing ul{padding-left:0; padding-right:22px}

/* shared responsive */
@media (max-width:560px){
  .wrap{padding:32px 18px}
  .p-home .hero{margin-top:36px}
  .p-home .hero .lede{font-size:17px}
  .p-home h2{font-size:25px}
  .p-home .item .nm{font-size:19px}
  .p-legal h1,.p-pricing h1,.p-contact h1{font-size:28px}
  .sheet{padding:30px 22px}
}

/* print — only the BEO doc prints to a clean sheet */
@media print{
  @page{ size:A4; margin:14mm }
  body{background:#fff}
  .p-doc .bar, .p-doc .sample-tag{display:none}
  .p-doc .sheet{max-width:none; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:#fff; color:#000}
  .p-doc a{color:#000}
  .p-doc h2{break-after:avoid}
  .p-doc .row{break-inside:avoid}
}