/* LBS website styles. Colours and fonts come from the app's style file (fustan/src/lib/theme.tsx, the Editorial
   look): change them there first, then here. Layout copied from the approved mockups (agents/designer/work/lbs-web). */
:root{--bg:#F7F2E9;--bg2:#FFFFFF;--ink:#1A1714;--muted:#6B6358;--line:#E2D8C6;--field:#EFE8DA;--gold:#C9A96E;--gold-soft:#E3CFA3;--gold-text:#7A5C2C;--on-ink:#F7F2E9;--band:#1A1714;--band-text:#F7F2E9;
--serif:'Cormorant Garamond','Noto Naskh Arabic',Georgia,serif;--sans:'Manrope','IBM Plex Sans Arabic',system-ui,sans-serif;--maxw:1200px;--gut:24px;--hero-bg:var(--bg);--frame:#1A1714;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0D0C0A;--bg2:#0D0C0A;--ink:#F5F0E6;--muted:#A9A194;--line:#332E26;--field:#17150F;--gold-text:#E3CFA3;--on-ink:#0D0C0A;--band:#17150F;--band-text:#F5F0E6;--frame:#3A342A}}
/* the gold top section: one setting in build.mjs (HERO), not used unless Fawaz asks */
@media (prefers-color-scheme:light){[data-hero=gold]{--hero-bg:var(--gold-soft)}}
[dir=rtl]{--serif:'Noto Naskh Arabic','Cormorant Garamond',serif;--sans:'IBM Plex Sans Arabic','Manrope',system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans)}
img{display:block;max-width:100%}a{color:inherit}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;transition:none}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:20;background:var(--ink);color:var(--on-ink);padding:12px 16px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;overflow-wrap:break-word;min-width:0;line-height:1.08}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{line-height:1.35;font-weight:600}
h1{font-size:min(44px,11.4vw)}h2{font-size:32px}h3{font-size:24px}
.muted{color:var(--muted)}
/* top bar */
.nav{height:72px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:10}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{font:500 28px/1 var(--serif);letter-spacing:.14em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}[dir=rtl] .logo{letter-spacing:0;font-size:30px;font-weight:600}
.links{display:none;gap:32px;align-items:center;font-size:15px}
.links a{text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}.links a:hover,.links a[aria-current]{border-color:var(--gold)}
.lang{font-size:15px;text-decoration:none;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.menu{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 15px/1 var(--sans);color:var(--ink);background:none;border:0;padding:0 2px;cursor:pointer}
.menu i{display:block;width:22px;height:9px;border-block:1.5px solid var(--ink);transition:transform .2s}
.menu[aria-expanded=true] i{height:0;border-bottom:0;transform:rotate(45deg)}
.navr{display:flex;align-items:center;gap:20px}
.mnav{position:absolute;top:72px;inset-inline:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:9}
.mnav[hidden]{display:none}
.mnav ul{list-style:none;margin:0;padding:8px var(--gut) 24px}
.mnav a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);text-decoration:none;font:500 26px/1.2 var(--serif)}
.mnav a[aria-current]{color:var(--gold-text)}
/* buttons */
.btn{white-space:nowrap;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;min-height:52px;padding:0 28px;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);font:600 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,opacity .15s}
.btn:active{transform:scale(.96)}.btn:hover{opacity:.88}
.btn.alt{background:transparent;color:var(--ink)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1A1714}
.btn small{font:400 12px/1.2 var(--sans);opacity:.75;margin-top:2px}
.btn[aria-disabled]{cursor:default}.btn[aria-disabled]:hover{opacity:1}.btn[aria-disabled]:active{transform:none}
.row{display:flex;flex-wrap:wrap;gap:12px}
/* top section */
.hero{background:var(--hero-bg);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-block:40px 0}
.hero .copy{display:flex;flex-direction:column;gap:20px;justify-content:center;padding-bottom:8px}
.hero p.lead{font-size:18px;margin:0;max-width:34ch}
.hero .pic{aspect-ratio:4/5;overflow:hidden;background:var(--field)}.hero .pic img{width:100%;height:100%;object-fit:cover}
.sec{padding-block:64px}.sec+.sec{border-top:1px solid var(--line)}
/* real app screens: a plain flat frame, no gloss, no shadow */
.phone{margin:0;width:100%;max-width:260px;border:6px solid var(--frame);border-radius:34px;overflow:hidden;background:var(--field);aspect-ratio:560/1344}
.phone picture,.phone img{display:block;width:100%;height:100%}.phone img{object-fit:cover;object-position:top}
.hero .pic.shot{aspect-ratio:auto;background:none;display:flex;justify-content:center;align-items:flex-start;overflow:visible;padding-bottom:0}
.hero .pic.shot .phone{border-bottom:0;border-radius:34px 34px 0 0;margin-top:8px}
.hero .pic.shot .phone{aspect-ratio:560/1100}
.how h2{margin-bottom:36px}
.how .rail{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;justify-items:center}
.how figure.step{margin:0;width:100%;max-width:260px;display:flex;flex-direction:column;gap:16px;align-items:center}
.how .phone{max-width:none}
.how figcaption{font:500 24px/1.2 var(--serif);text-wrap:balance;text-align:center}[dir=rtl] .how figcaption{font-weight:600;line-height:1.4}
.how figcaption b{display:block;font:500 15px/1 var(--sans);color:var(--gold-text);margin-bottom:8px}
/* statements */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.split .pic{aspect-ratio:4/5;overflow:hidden;background:var(--field)}.split .pic img{width:100%;height:100%;object-fit:cover}
.facts{display:flex;flex-direction:column}
.facts div{padding-block:22px;border-top:1px solid var(--line)}.facts div:last-child{border-bottom:1px solid var(--line)}
.facts h3{font-size:26px;margin-bottom:6px}.facts p{margin:0;color:var(--muted)}
/* occasion strip */
.occ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.occ figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--field)}.occ img{width:100%;height:100%;object-fit:cover}
.occ figcaption{position:absolute;inset-inline:0;bottom:0;padding:14px 16px;background:#1A1714;color:#F7F2E9;font:500 22px/1.2 var(--serif)}
/* dark bands */
.band{background:var(--band);color:var(--band-text)}
.band .wrap{display:flex;flex-direction:column;gap:20px;padding-block:56px;align-items:flex-start}
.band p{margin:0;opacity:.8}
.band :focus-visible{outline-color:var(--gold)}
.ig{border-top:1px solid var(--line)}.ig .wrap{padding-block:56px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
/* fees table */
.tbl{width:100%;border-collapse:collapse;margin-top:24px}
.tbl th{font:500 14px/1.3 var(--sans);color:var(--muted);text-align:start;padding:10px 6px 10px 0;border-bottom:1px solid var(--ink)}[dir=rtl] .tbl th{padding:10px 0 10px 6px}
.tbl td{padding:16px 6px 16px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}[dir=rtl] .tbl td{padding:16px 0 16px 6px}
/* phone: rank names and amounts shrink a little so "Uncommon" + "KWD 1,001.000–5,000.999" + "LBS keeps" fit 327 wide (was 384) */
.tbl td:first-child{font:500 clamp(18px,5vw,22px)/1.2 var(--serif)}.tbl td:nth-child(2){font-size:clamp(13px,3.6vw,16px)}.tbl td:last-child,.tbl th:last-child{text-align:end;padding-inline-end:0}.tbl td:last-child{font-weight:600}
.need{list-style:none;padding:0;margin:24px 0 0}.need li{padding:14px 0;border-top:1px solid var(--line)}.need li:last-child{border-bottom:1px solid var(--line)}
/* how to open a shop: numbered steps */
.steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:step}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding-block:22px;border-top:1px solid var(--line);counter-increment:step}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step);font:500 30px/1 var(--serif);color:var(--gold-text)}
.steps h3{font-size:26px;margin-bottom:6px}.steps p{margin:0;color:var(--muted)}
#questions .faq{margin-top:24px}
/* "Become a seller" band: the button, and the store buttons for people without the app */
.act{display:flex;flex-direction:column;gap:14px;align-items:flex-start;width:100%;max-width:460px}
.band .fine{color:inherit;opacity:.7;margin:0}
.getapp{width:100%;border:1px solid var(--gold);padding:20px;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.getapp[hidden]{display:none}.getapp:focus{outline:0}
.getapp h3{font-size:26px}
.band .btn.alt{color:var(--band-text);border-color:var(--band-text)}
/* legal + help */
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:40px 80px}
.tabs{display:flex;gap:24px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs a{text-decoration:none;padding:12px 0;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted)}
.tabs a[aria-current]{color:var(--ink);border-color:var(--gold)}
.note{border:1px solid var(--gold);padding:14px 16px;font-size:15px;max-width:68ch}
.prose{max-width:68ch}.prose h2{font-size:28px;margin:40px 0 10px}.prose p,.prose li{margin:0 0 12px}.prose ul,.prose ol{padding-inline-start:22px;margin:0 0 12px}
.tbd{background:var(--field);padding:0 4px;border-bottom:1px solid var(--gold)}
.pagehead{padding-block:48px 8px}.pagehead h1{margin-bottom:12px}
.search{display:flex;align-items:center;height:56px;border:1px solid var(--line);background:var(--bg);margin:24px 0 20px;max-width:560px}
.search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);padding-inline:16px;font:400 16px var(--sans);border-radius:0;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--muted);opacity:1}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search:focus-within{outline:2px solid var(--gold-text);outline-offset:2px}.search input:focus-visible{outline:0}
.chips{display:flex;flex-wrap:wrap;gap:0 24px;margin-bottom:12px}
.chips button{font:inherit;background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;min-height:44px;color:var(--muted);cursor:pointer}
.chips button[aria-pressed=true]{color:var(--ink);border-color:var(--gold)}
.faq{max-width:760px}.faq details{border-top:1px solid var(--line)}.faq details.last{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:16px;font:500 22px/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';font:300 26px/1 var(--sans);color:var(--gold-text)}.faq details[open] summary::after{content:'–'}
.faq .a{padding:0 0 22px;color:var(--muted);max-width:62ch}
.none{padding:20px 0;color:var(--muted);border-top:1px solid var(--line);margin:0}
.still{border-top:1px solid var(--line);margin-top:56px;padding-top:36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
/* footer */
.foot{border-top:1px solid var(--line);background:var(--bg)}
.foot .wrap{padding-block:48px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.foot .logo{display:inline-flex;margin-bottom:14px;min-height:0}.logo picture,.logo img{display:block}.logo img{height:auto}.foot ul{align-content:start;list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.fine{font-size:14px;color:var(--muted)}
@media (min-width:900px){
 :root{--gut:48px}h1{font-size:68px}h2{font-size:44px}
 .links{display:flex}.menu,.mnav{display:none}
 .hero .wrap{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;padding-block:56px;align-items:center}
 .hero .copy{padding-block:0}.hero .pic{aspect-ratio:auto;height:620px}.hero .wrap:has(.shot){padding-bottom:0;align-items:end}.hero .wrap:has(.shot) .copy{padding-bottom:72px}.hero .pic.shot{height:auto;margin-top:56px}.hero .pic.shot .phone{max-width:300px}
 .how .rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}.how figure.step{max-width:300px}
 .hero p.lead{font-size:20px}
 .sec{padding-block:112px}
 .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px;align-items:center}
 .split .pic{aspect-ratio:4/5}
 .occ{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
 .band .wrap{flex-direction:row;justify-content:space-between;align-items:center;padding-block:72px}
 .band h2{max-width:18ch}
 .ig .wrap{flex-direction:row;justify-content:space-between;align-items:center}
 .tbl td:first-child{font-size:26px}.tbl td,.tbl th{padding-block:20px}
 .fees{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:96px}.fees .tbl{margin-top:0}
 .doc{grid-template-columns:240px minmax(0,1fr);gap:96px;padding-block:72px 120px}
 .tabs{flex-direction:column;gap:0;border-bottom:0;border-inline-start:1px solid var(--line);align-self:start;position:sticky;top:24px}
 .tabs a{padding:12px 20px;margin:0;border-bottom:0;border-inline-start:2px solid transparent;margin-inline-start:-1px}.tabs a[aria-current]{border-color:var(--gold)}
 .foot .wrap{grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr);gap:64px}
 .pagehead{padding-block:96px 16px}
 .faq summary{font-size:26px}
 .form-band .wrap{align-items:flex-start}
 .need-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:96px}.need-grid .need,.need-grid .steps,#questions .faq{margin-top:0}
 .act{align-items:stretch}.act .btn{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){.btn,.menu i{transition:none}}
/* email confirmation page (f-email-confirm) */
.confirm{max-width:560px;padding-block:72px 120px;text-align:center}.confirm h1{margin-bottom:14px}.confirm .lead{margin-inline:auto}.confirm .btn{margin-top:8px}
.reset [hidden]{display:none!important}
.textbtn{background:none;border:0;padding:8px 4px;font:inherit;color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.pwform{text-align:start;display:flex;flex-direction:column;gap:10px;margin-top:8px}.pwform .lead{text-align:center;margin-bottom:8px}
.pwform label{font-weight:500;font-size:15px}
.pwrow{display:flex;align-items:center;border:1px solid var(--line);background:var(--field);padding-inline:14px 6px}.pwrow:focus-within{border-color:var(--gold-text)}
.pwrow input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:14px 0;outline:0;direction:ltr;text-align:left}[dir=rtl] .pwrow input{text-align:right}
.rules{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.rules li{display:flex;align-items:center;gap:10px;transition:color .2s}
.rules .tick{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);flex:none;display:grid;place-items:center;transition:background .2s,border-color .2s}
.rules .ok{color:var(--ink)}.rules .ok .tick{background:var(--gold);border-color:var(--gold)}.rules .ok .tick::after{content:"";width:7px;height:4px;border:solid #1A1714;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.rules .miss{color:#B3261E}.rules .miss .tick{border-color:currentColor}.rules .miss .tick::after{content:"\00D7";font-size:14px;line-height:1;color:currentColor;transform:translateY(-1px)}
@media (prefers-color-scheme:dark){.rules .miss{color:#E5786F}.rules .miss .tick{border-color:#E5786F}.err{color:#E5786F!important}}
.err{color:#B3261E;font-weight:500;font-size:14px;margin:4px 0 0;text-align:center}
.pwform .btn{width:100%;justify-content:center}.pwform .btn[disabled]{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:reduce){.rules li,.rules .tick{transition:none}}

/* home hero: looping gold silk video behind the title (Fawaz picked B, 2026-11-04) */
.hv{position:relative;overflow:hidden;color:#FBF6EA;background:#2a1a08 url(/poster.jpg) center/cover;border-bottom:0}
.hvv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,10,.55),rgba(13,12,10,.62))}
.hv .wrap{position:relative;z-index:1}
.hv h1,.hv .lead{color:#FBF6EA;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hv .btn.alt{background:rgba(251,246,234,.14);color:#FBF6EA;border-color:rgba(251,246,234,.55)}
.hv .btn.alt small{color:inherit}
@media(prefers-reduced-motion:reduce){.hvv{display:none}}