/* Ortall - visual language lifted from loqore.com (tokens, type scale, nav/footer, cards).
   One stylesheet for every page and both languages; direction-sensitive spacing uses logical
   properties (inline-start/end) so the Hebrew RTL and English LTR pages share every rule. */
:root{--paper:#FFFFFF;--sunk:#F5F6F7;--ink:#0B0D0E;--ink2:#333A3E;--mute:#697279;--faint:#9AA3A9;
 --hair:#E2E7EA;--hair2:#EFF2F4;--y:#FFD43B;--y-wash:#FFF8DE;--on-y:#0B0D0E;--good:#2F6F4F;
 --bubble:#FFFFFF;--chat:#EFEAE2;--link:#1F7FCC;--r:4px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0A0C0D;--sunk:#14181A;
 --ink:#EDF2F4;--ink2:#C2CBD1;--mute:#8C959B;--faint:#646D73;--hair:#212A2E;--hair2:#182024;
 --y-wash:#2A2310;--good:#79C39B;--bubble:#1F2C33;--chat:#0B141A;--link:#53BDEB;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0A0C0D;--sunk:#14181A;--ink:#EDF2F4;--ink2:#C2CBD1;--mute:#8C959B;
 --faint:#646D73;--hair:#212A2E;--hair2:#182024;--y-wash:#2A2310;--good:#79C39B;
 --bubble:#1F2C33;--chat:#0B141A;--link:#53BDEB;color-scheme:dark}
*{box-sizing:border-box}
/* Latin glyphs come from loqore's faces; Hebrew glyphs fall through per-character to Heebo,
   since none of the Latin families cover Hebrew. */
body{margin:0;background:var(--paper);color:var(--ink);
 font:400 16px/1.6 "Public Sans","Heebo",system-ui,sans-serif;
 font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;text-wrap:balance}
h2,h3{font-family:"Archivo Narrow","Heebo",sans-serif;letter-spacing:-.02em}
:lang(he) h2,:lang(he) h3,:lang(he) .chk b{font-family:"Heebo",sans-serif;letter-spacing:0;font-weight:800}
a{color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 24px 80px}
@media (max-width:420px){.wrap{padding:0 16px 64px}}

/* ------------------------------------------------------------------ nav */
.nav{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--hair2)}
.nav .sp{flex:1}
.nav a{color:var(--mute);text-decoration:none;font-size:14.5px}
.nav a:hover{color:var(--ink)}
.nav .lang{font:500 12px/1 "JetBrains Mono","Heebo",monospace;letter-spacing:.04em;border:1px solid var(--hair);
 border-radius:999px;padding:7px 11px}
.nav .cta{border:1px solid var(--ink);border-radius:999px;padding:8px 16px;color:var(--ink);font-weight:500;white-space:nowrap}
.nav .cta:hover{background:var(--y);border-color:var(--y);color:var(--on-y)}
@media (max-width:660px){.nav .hide{display:none}.nav{gap:12px}}
@media (max-width:350px){.nav .cta{display:none}}
/* Wordmark: there is no image logo, so the name is set in the headline face with Ortal's
   portrait as the mark and a yellow dot carried over from loqore. */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)!important;flex:none}
.brand img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid var(--y)}
.brand span{font-family:Archivo,"Archivo Narrow",sans-serif;font-variation-settings:"wdth" 79;
 font-weight:900;font-size:22px;letter-spacing:-.02em;line-height:1}
.brand span i{font-style:normal;color:var(--y)}

/* ------------------------------------------------------------------ hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;padding:56px 0 0}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:34px;padding-top:36px}}
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font:500 12px/1.3 "JetBrains Mono",monospace;
 letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);background:var(--y-wash);
 border:1px solid var(--y);border-radius:999px;padding:6px 12px}
:lang(he) .kicker{letter-spacing:0;font:500 13px/1.3 "Heebo",sans-serif}
.kicker b{width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block;flex:none}
h1{font-family:Archivo,"Archivo Narrow","Heebo",sans-serif;font-variation-settings:"wdth" 79;
 font-size:clamp(34px,5.6vw,54px);font-weight:900;letter-spacing:-.022em;line-height:1.08;margin:0 0 18px}
:lang(he) h1{font-family:"Heebo",sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.15}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--y) 62%);padding:0 2px}
/* On dark paper the marker stripe under light text turns muddy; the words go yellow instead. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1 em{background:none;color:var(--y)}}
:root[data-theme="dark"] h1 em{background:none;color:var(--y)}
.sub{color:var(--ink2);font-size:18px;margin:0 0 26px;line-height:1.55;max-width:52ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:13px 22px;
 font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid var(--ink);transition:all .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn.wa{background:var(--ink);color:var(--paper)}
.btn.wa:hover{background:var(--y);border-color:var(--y);color:var(--on-y)}
.btn.ghost{color:var(--ink);background:transparent}
.btn.ghost:hover{background:var(--sunk)}
.fine{color:var(--mute);font-size:13.5px;margin:14px 0 0}
.cities{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;align-items:center}
.cities > span{font-size:13px;color:var(--mute)}
.pill{border:1px solid var(--hair);border-radius:999px;padding:5px 12px;font-size:13.5px;color:var(--ink2)}
.pill.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
 background:var(--good);margin-inline-end:7px;vertical-align:1px}

/* ------------------------------------------------------------------ phone mock */
/* An illustration of the daily message, not a screenshot - tagged "example" on the page and
   holding placeholder numbers, so nothing in it reads as a claim. */
.phone{position:relative;max-width:360px;width:100%;justify-self:center;border:1px solid var(--hair);
 border-radius:26px;background:var(--chat);overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.12)}
.phone .bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--paper);
 border-bottom:1px solid var(--hair2)}
.phone .bar img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.phone .bar b{display:block;font-size:15px;line-height:1.2}
.phone .bar small{display:block;color:var(--mute);font-size:12px}
.phone .msgs{padding:16px 12px 18px;display:flex;flex-direction:column;gap:8px}
.bub{background:var(--bubble);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.5;
 max-width:94%;box-shadow:0 1px 1px rgba(0,0,0,.06);color:var(--ink)}
.bub p{margin:0 0 6px}
.bub ul{margin:0;padding:0;list-style:none}
.bub li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-top:1px dashed var(--hair)}
.bub li:first-child{border-top:0}
.bub li b{font-family:"JetBrains Mono",monospace;font-weight:500}
.bub .link{display:block;margin-top:8px;text-align:center;border-top:1px solid var(--hair2);
 padding-top:8px;color:var(--link);font-weight:500}
.bub time{display:block;text-align:end;color:var(--faint);font-size:11px;margin-top:2px}
.phone .ex{position:absolute;top:24px;inset-inline-end:10px;font:500 10.5px/1 "JetBrains Mono","Heebo",monospace;
 letter-spacing:.04em;background:var(--y);color:var(--on-y);border-radius:999px;padding:4px 9px}

/* ------------------------------------------------------------------ sections */
.sec{padding:56px 0 0;border-top:1px solid var(--hair2);margin-top:64px}
.sec h2{font-size:clamp(24px,3.4vw,32px);font-weight:700;margin-bottom:10px}
.sec .intro{color:var(--ink2);font-size:16.5px;max-width:60ch;margin:0 0 26px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step h3{font-size:17px;font-weight:700;margin:10px 0 5px}
.step p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.55}
.step .n{font:500 11px/1 "JetBrains Mono",monospace;color:var(--on-y);background:var(--y);
 display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--hair);
 border-radius:9px;padding:16px 17px;background:var(--paper);transition:border-color .15s}
.chk:hover{border-color:var(--ink2)}
.chk .ci{flex:none;width:36px;height:36px;border-radius:9px;background:var(--y-wash);
 border:1px solid var(--y);display:grid;place-items:center;color:var(--ink)}
.chk .ci svg{width:19px;height:19px;display:block}
.chk b{display:block;font-family:"Archivo Narrow",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.01em}
.chk > div > span{display:block;color:var(--mute);font-size:14px;line-height:1.5;margin-top:3px}
@media (max-width:660px){.steps,.checks{grid-template-columns:1fr}}

/* Who Ortal is. The AI disclosure lives here in plain words, not in a footnote. */
.meet{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start}
.meet img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--y)}
.meet p{margin:0 0 12px;color:var(--ink2)}
.ai{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--hair);border-inline-start:3px solid var(--y);
 border-radius:var(--r);background:var(--sunk);padding:12px 14px;font-size:14.5px;color:var(--ink2);margin-top:6px}
.ai svg{flex:none;width:18px;height:18px;margin-top:3px}
@media (max-width:560px){.meet{grid-template-columns:1fr}.meet img{width:110px;height:110px}}

.faq details{border-bottom:1px solid var(--hair2);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mute);font:400 20px/1 "JetBrains Mono",monospace}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:10px 0 0;color:var(--ink2);font-size:15.5px}

.band{margin-top:64px;border:1px solid var(--y);border-radius:14px;padding:30px 28px;background:var(--y-wash);
 display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{font-size:clamp(22px,3vw,28px);font-weight:700}
.band p{margin:6px 0 0;color:var(--ink2)}

/* ------------------------------------------------------------------ prose pages */
.page{padding:44px 0 0;max-width:68ch}
.page h1{font-size:clamp(30px,4.6vw,44px)}
.page h2{font-size:20px;font-weight:700;margin:32px 0 8px}
.page p,.page li{color:var(--ink2);font-size:16px;line-height:1.65}
.page p{margin:0 0 14px}
.page ul{padding-inline-start:20px;margin:0 0 14px}
.page .intro{font-size:18px;color:var(--ink);margin-bottom:22px}
.page .note{margin-top:26px;padding:14px 16px;border-inline-start:3px solid var(--y);
 background:var(--sunk);font-size:15px;color:var(--mute)}

/* ------------------------------------------------------------------ footer */
.foot{margin-top:72px;border-top:1px solid var(--hair);padding:34px 0 0}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.fcols h4{font:600 12px/1 "JetBrains Mono","Heebo",monospace;letter-spacing:.08em;text-transform:uppercase;
 color:var(--faint);margin:0 0 12px}
.fcols a,.fcols p{display:block;color:var(--mute);font-size:14px;text-decoration:none;margin:0 0 8px}
.fcols a.brand{display:flex}
.fcols a:hover{color:var(--ink)}
.fcols .blurb{max-width:38ch;line-height:1.55;margin-top:12px}
.fbar{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px;padding:16px 0 0;
 border-top:1px solid var(--hair2);font-size:12.5px;color:var(--faint)}
@media (max-width:660px){.fcols{grid-template-columns:1fr}}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ------------------------------------------------------------------ example report */
/* Four mock "screens", one per main page of the real board (List / Map / Analysis / Ask).
   All data is invented and the section says so in .extag. */
.extag{display:inline-block;margin:-10px 0 18px;font:500 11px/1.3 "JetBrains Mono","Heebo",monospace;letter-spacing:.04em;
 background:var(--y);color:var(--on-y);border-radius:999px;padding:5px 11px}
.exgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.exgrid{grid-template-columns:1fr}}
.card{border:1px solid var(--hair);border-radius:12px;background:var(--paper);padding:14px 16px 16px;min-width:0;
 box-shadow:0 8px 24px rgba(0,0,0,.05)}
.ctab{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2);
 background:var(--sunk);border:1px solid var(--hair2);border-radius:999px;padding:4px 10px 4px 9px;margin-bottom:10px}
.ctab svg{width:14px;height:14px}
.ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ch b{font-size:15.5px}
.ch small{color:var(--mute);font-size:12.5px}
/* list */
.lsts{list-style:none;margin:0;padding:0}
.lst{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"kd lt pr" "kd lw lw";gap:2px 10px;
 padding:9px 0;border-top:1px solid var(--hair2);align-items:start}
.lst:first-child{border-top:0}
.kd{grid-area:kd;font-size:11px;font-weight:600;border-radius:6px;padding:3px 7px;margin-top:2px;
 background:var(--sunk);color:var(--ink2);border:1px solid var(--hair)}
.lst.sale .kd{background:var(--y-wash);border-color:var(--y)}
.lst.down .kd{color:var(--mute)}
.lst.down .lt b,.lst.down .pr{color:var(--mute);text-decoration:line-through}
.lt{grid-area:lt;min-width:0}
.lt b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.lt small,.lw small{color:var(--mute);font-size:12px}
.lw{grid-area:lw;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.who{font-size:12px;color:var(--ink2)}
.who.pv{font-weight:600;color:var(--good)}
.pr{grid-area:pr;font:500 13.5px/1.35 "JetBrains Mono",monospace;white-space:nowrap}
/* map */
/* The map fills whatever height its row gives it (the list card next to it sets the row), never less than 10:9;
   the drawing is 10:9 too, so "slice" only trims a sliver when the row runs taller. */
.card{display:flex;flex-direction:column}
.mapbox{position:relative;flex:1;aspect-ratio:10/9;border:1px solid var(--hair);border-radius:9px;overflow:hidden;line-height:0}
.mapsvg{position:absolute;inset:0;display:block;width:100%;height:100%}
.mapsvg .land{fill:#F4F1EB}.mapsvg .sea{fill:#BFD5E3}.mapsvg .park{fill:#DCE5D2}
.mapsvg .rmaj{fill:none;stroke:#FFFFFF;stroke-width:7}.mapsvg .rmin{fill:none;stroke:#FBF9F5;stroke-width:3}
.mapsvg .nl{font:600 10.5px "Heebo","Public Sans",sans-serif;fill:#697279}
.mapsvg .sl{font:italic 500 11px "Heebo","Public Sans",sans-serif;fill:#5E7E93;text-anchor:middle}
.pin{stroke-width:1.8}
.pin.pv{fill:var(--y);stroke:#0B0D0E}
.pin.sa{fill:#0B0D0E;stroke:#FFFFFF}
.pin.rt{fill:#FFFFFF;stroke:#0B0D0E}
.pin.sel{fill:none;stroke:#0B0D0E;stroke-width:2;opacity:.6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mapsvg .land{fill:#0F1518}
 :root:not([data-theme="light"]) .mapsvg .sea{fill:#1A3647}:root:not([data-theme="light"]) .mapsvg .park{fill:#16221B}
 :root:not([data-theme="light"]) .mapsvg .rmaj{stroke:#42505A}:root:not([data-theme="light"]) .mapsvg .rmin{stroke:#2C363C}
 :root:not([data-theme="light"]) .mapsvg .nl{fill:#8C959B}:root:not([data-theme="light"]) .pin.sa{fill:#EDF2F4;stroke:#0A0C0D}
 :root:not([data-theme="light"]) .pin.rt{fill:#0A0C0D;stroke:#EDF2F4}:root:not([data-theme="light"]) .pin.sel{stroke:#EDF2F4}}
.mpop{position:absolute;top:10px;right:10px;line-height:1.35;background:var(--paper);border:1px solid var(--hair);
 border-radius:8px;padding:7px 10px;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.mpop b{display:block;font-size:13px}.mpop small{color:var(--mute);font-size:11.5px}
.lg .d{border-radius:50%;border:1.6px solid var(--ink)}
.lg .d.pv{background:var(--y)}.lg .d.sa{background:var(--ink)}.lg .d.rt{background:var(--paper)}
/* analysis */
.tots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.tots div{background:var(--sunk);border-radius:8px;padding:9px 10px}
.tots b{display:block;font:700 22px/1.1 "Archivo Narrow","Heebo",sans-serif}
.tots span{font-size:11.5px;color:var(--mute);line-height:1.3;display:block}
.bars{list-style:none;margin:0;padding:0}
.bars li{display:grid;grid-template-columns:minmax(0,9.5em) 1fr 2em;gap:10px;align-items:center;padding:5px 0;font-size:13px}
.an{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.bt{display:flex;height:10px;border-radius:3px;overflow:hidden;background:var(--hair2)}
.bt i.s{background:var(--y)}.bt i.r{background:var(--ink2)}
.bars b{font:500 13px "JetBrains Mono",monospace;text-align:end}
.lg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;font-size:12px;color:var(--mute)}
.lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-start:8px}
.lg i:first-child{margin-inline-start:0}
.lg i.s{background:var(--y)}.lg i.r{background:var(--ink2)}
/* chat */
.chat{display:flex;flex-direction:column;gap:8px}
.cm{font-size:13.5px;line-height:1.5;border-radius:12px;padding:8px 11px;max-width:88%}
.cm.me{align-self:flex-end;background:var(--y-wash);border:1px solid var(--y)}
.cm.or{align-self:flex-start;display:flex;gap:8px;align-items:flex-start;background:var(--sunk);border:1px solid var(--hair2)}
.cm.or img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.ask{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;border:1.5px solid var(--hair);
 border-radius:12px;padding:9px 9px 9px 12px;color:var(--faint);font-size:13.5px}
.ask i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);flex:none}
.ask i svg{width:15px;height:15px}
:dir(rtl) .ask i svg{transform:scaleX(-1)}

/* ------------------------------------------------------------------ sources -> one board */
.srcwrap{display:grid;grid-template-columns:1.1fr 56px 1fr;gap:0;align-items:center}
@media (max-width:760px){.srcwrap{grid-template-columns:1fr}}
.srcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.srcs li{display:flex;gap:12px;align-items:center;border:1px solid var(--hair);border-radius:10px;padding:10px 12px;background:var(--paper)}
.srcs img{width:34px;height:34px;border-radius:8px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--hair2)}
.srcs b{display:block;font-size:15px}
.srcs span{display:block;color:var(--mute);font-size:13.5px;line-height:1.45}
/* Connector: a line with a chevron pointing at the board - "toward the end" in either direction. */
.flow{position:relative;height:100%;min-height:40px}
.flow::before{content:"";position:absolute;top:50%;left:8px;right:8px;border-top:2px dashed var(--y)}
.flow span{position:absolute;top:50%;inset-inline-end:6px;width:12px;height:12px;border-top:2px solid var(--ink);
 border-inline-end:2px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
:dir(rtl) .flow span{transform:translateY(-50%) rotate(-45deg)}
@media (max-width:760px){.flow{height:44px}
 .flow::before{top:6px;bottom:6px;left:50%;right:auto;border-top:0;border-left:2px dashed var(--y)}
 .flow span,:dir(rtl) .flow span{top:auto;bottom:6px;inset-inline-end:auto;left:calc(50% - 6px);transform:rotate(135deg)}}
.out{border-color:var(--y);background:var(--y-wash)}
.outh{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.outh img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--y)}
.outh b{display:block;font-size:16px}.outh small{color:var(--mute);font-size:12.5px}
.stack{display:flex;margin-bottom:12px}
.stack img{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--paper);object-fit:contain;margin-inline-start:-6px}
.stack img:first-child{margin-inline-start:0}

/* ------------------------------------------------------------------ four board features */
/* Text beside its mock, sides alternating on desktop; on a phone, text always above its mock. */
.feat{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;margin-top:52px}
.feat.flip .ft{order:2}
.ft{min-width:0}.fm{min-width:0}
.fn{font:500 12px/1 "JetBrains Mono",monospace;color:var(--on-y);background:var(--y);border-radius:999px;padding:5px 9px;display:inline-block}
.ft h3{font-size:clamp(22px,2.8vw,30px);font-weight:700;margin:12px 0 8px;line-height:1.2}
:lang(he) .ft h3{font-weight:800}
.ft p{margin:0 0 14px;color:var(--ink2);font-size:16px;line-height:1.6}
.fl{list-style:none;margin:0;padding:0}
.fl li{position:relative;padding:4px 0;padding-inline-start:24px;font-size:15px;color:var(--ink2)}
.fl li::before{content:"";position:absolute;inset-inline-start:3px;top:11px;width:10px;height:5px;
 border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
@media (max-width:820px){.feat{grid-template-columns:1fr;gap:20px;margin-top:40px}.feat.flip .ft{order:0}}
/* market: closed deal */
.deal{display:flex;gap:10px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--sunk)}
.deal img{width:22px;height:22px;border-radius:5px;flex:none}
.deal small{display:block;color:var(--mute);font-size:11.5px}.deal b{font-size:14px}
/* map interactivity */
.pg{cursor:pointer;outline:none}
.pg .hit{fill:transparent}
.pg:hover .pin,.pg:focus-visible .pin{stroke-width:3}
.ring{fill:none;stroke:#0B0D0E;stroke-width:2;opacity:.65;pointer-events:none;transition:cx .2s,cy .2s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ring{stroke:#EDF2F4}}
:root[data-theme="dark"] .ring{stroke:#EDF2F4}
.lg .hint{flex-basis:100%;color:var(--faint);font-size:11.5px}

/* ------------------------------------------------------------------ sample listing card (sources section) */
.lcard{border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--paper);
 box-shadow:0 6px 18px rgba(0,0,0,.08)}
.lph{position:relative;aspect-ratio:16/9;background:var(--sunk)}
.lph img{width:100%;height:100%;object-fit:cover;display:block}
.ltag,.lex,.lcnt{position:absolute;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px;line-height:1.4}
.ltag{top:8px;inset-inline-start:8px;background:var(--y);color:var(--on-y)}
.lex{top:8px;inset-inline-end:8px;background:rgba(11,13,14,.72);color:#fff;font:500 10.5px/1.5 "JetBrains Mono","Heebo",monospace}
.lcnt{bottom:8px;inset-inline-end:8px;background:rgba(11,13,14,.72);color:#fff}
.lcnt::before{content:"";display:inline-block;width:9px;height:7px;border:1.5px solid #fff;border-radius:2px;
 margin-inline-end:5px;vertical-align:0}
.lbody{padding:10px 12px 12px}
.lprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lprice b{font:700 22px/1.1 "Archivo Narrow","Heebo",sans-serif;letter-spacing:-.01em}
.lprice s{color:var(--faint);font-size:12.5px}
.lprice em{font-style:normal;font-size:12px;font-weight:600;color:var(--good);background:var(--sunk);border-radius:999px;padding:1px 7px}
.lcard h4{margin:4px 0 6px;font-size:15px;font-weight:600}
.lspecs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--mute)}
.lspecs span+span::before{content:"·";margin-inline-end:10px;color:var(--faint)}
.lfoot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--hair2)}
.llogos{display:flex;flex:none}
.llogos img{width:22px;height:22px;border-radius:6px;border:2px solid var(--paper);margin-inline-start:-5px;background:#fff}
.llogos img:first-child{margin-inline-start:0}
.lsrc{font-size:12.5px;color:var(--ink2)}
.lmeta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--mute)}

/* ------------------------------------------------------------------ listing feed (section 1) */
/* Mirrors the real board card: photo | price, status, age, facts | address, sources, contact.
   On narrow cards the right column drops under the text as one row. */
.feat.wide{grid-template-columns:.72fr 1.6fr}
@media (max-width:820px){.feat.wide{grid-template-columns:1fr}}
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.fc{font-size:12px;border:1px solid var(--hair);border-radius:999px;padding:3px 10px;color:var(--mute)}
.fc.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.feed{display:flex;flex-direction:column;gap:8px;container-type:inline-size}
.frow{display:grid;grid-template-columns:118px minmax(0,1fr) 150px;gap:12px;border:1px solid var(--hair);
 border-radius:10px;padding:8px;background:var(--paper)}
.frow.removed{opacity:.62}
.fph{position:relative;border-radius:7px;overflow:hidden;background:var(--sunk);aspect-ratio:4/3;align-self:start}
.fph > img{width:100%;height:100%;object-fit:cover;display:block}
.fph .pc{position:absolute;bottom:5px;inset-inline-end:5px;background:rgba(11,13,14,.72);color:#fff;font-size:10.5px;
 border-radius:999px;padding:1px 7px}
.fbph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
 text-align:center;font-size:10.5px;color:var(--mute);padding:6px;line-height:1.25}
.fbph img{width:22px;height:22px;border-radius:5px}
.fmid{min-width:0}
.fpr{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.fst{font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 6px;align-self:center}
.fst.new{background:var(--y);color:var(--on-y)}
.fst.drop{background:var(--good);color:#fff}
.fst.removed{background:var(--hair);color:var(--ink2)}
.fpr b{font:700 17px/1.2 "Archivo Narrow","Heebo",sans-serif}
.fpr small{color:var(--mute);font-size:11.5px}
.fpr s{color:var(--faint);font-size:11.5px}
.frow.removed .fpr b{text-decoration:line-through}
.fago{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--good);font-weight:600}
.fago svg{width:13px;height:13px;flex:none}
.frow.removed .fago{color:var(--mute)}
.fkind{font-size:13px;font-weight:600;margin-top:2px}
.fmeta{font-size:12px;color:var(--mute)}
.ffeat{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ffeat span{font-size:11px;background:var(--sunk);border:1px solid var(--hair2);border-radius:5px;padding:1px 6px;color:var(--ink2)}
.fline{margin-top:5px;font-size:11.5px;color:var(--ink2);border-inline-start:2px solid var(--y);padding-inline-start:7px;line-height:1.4}
.frt{display:flex;flex-direction:column;gap:6px;min-width:0;border-inline-start:1px solid var(--hair2);padding-inline-start:10px}
.faddr b{display:block;font-size:12.5px;line-height:1.3}.faddr small{font-size:11px;color:var(--mute)}
.fsrc{display:flex;gap:3px}
.fsrc img{width:18px;height:18px;border-radius:4px}
.fwho{display:flex;gap:7px;align-items:center;min-width:0}
.fwho > div{min-width:0}
.fwho b{display:block;font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwho small{font-size:10.5px;color:var(--mute)}
.fav{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;
 background:var(--sunk);border:1px solid var(--hair);color:var(--ink2)}
.fav.pv{background:var(--y-wash);border-color:var(--y)}
.fact{display:flex;gap:5px;align-items:center}
.fbtn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border:1px solid var(--hair);
 border-radius:999px;padding:3px 9px;white-space:nowrap}
.fbtn svg{width:12px;height:12px}
.fwa{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#25D366;color:#fff;flex:none}
.fwa svg{width:14px;height:14px}
/* Narrow card (phone, or tablet column): right column becomes a strip under photo + text. */
@container (max-width:520px){
 .frow{grid-template-columns:96px minmax(0,1fr)}
 .frt{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;border-inline-start:0;
  padding-inline-start:0;border-top:1px solid var(--hair2);padding-top:7px}
 .faddr{display:none}
}

/* listing card inside Ortal's answer: one large photo + two stacked, then header and sub */
.cmcard{align-self:flex-start;width:min(calc(100% - 34px),330px);margin-inline-start:34px;border:1px solid var(--hair);border-radius:12px;
 overflow:hidden;background:var(--paper);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.cmph{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:62px 62px;gap:2px;background:var(--hair2)}
.cmph img{width:100%;height:100%;object-fit:cover;display:block}
.cmph img:first-child{grid-row:1 / 3}
.cmph .pc{position:absolute;bottom:6px;inset-inline-end:6px;background:rgba(11,13,14,.72);color:#fff;font-size:10.5px;
 border-radius:999px;padding:1px 7px}
.cmb{padding:8px 11px 10px;position:relative}
.cmb b{display:block;font-size:14px;line-height:1.35;padding-inline-end:22px}
.cmb small{display:block;color:var(--mute);font-size:12px;line-height:1.4;margin-top:2px}
.cmsrc{position:absolute;top:9px;inset-inline-end:10px;display:flex;gap:3px}
.cmsrc img{width:16px;height:16px;border-radius:4px}