/* Self-hosted Google Fonts (SIL Open Font License): Suez One, Assistant, Amatic SC, Barlow Condensed, Karantina */
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/amatic-sc-700-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/amatic-sc-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Assistant';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/assistant-400-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/assistant-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Assistant';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/assistant-600-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/assistant-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Assistant';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/assistant-800-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/assistant-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karantina';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/karantina-700-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Karantina';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/karantina-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Suez One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/suez-one-400-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Suez One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/suez-one-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* Mobile first. Asphalt lot at night: yellow plate = brand, fluorescent orange windshield sign = the deal. */
:root{color-scheme:dark;
 --asph:#1e2226;--asph2:#272c31;--line:#F1EFE6;--plate:#FFCD00;--sign:#FF6A1F;--ink:#111316;--paper:#FBFAF6;--ok:#3BD67A;--stop:#E2412E;
 --display:"Suez One",Georgia,serif;--body:Assistant,system-ui,sans-serif;--marker:"Amatic SC",cursive;--digits:"Barlow Condensed",Assistant,sans-serif;--plateFont:Karantina,"Barlow Condensed",sans-serif;--ilBlue:#0038B8}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{direction:rtl;background:var(--asph);color:var(--line);font-family:var(--body);overflow-x:clip;
 background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.5px),radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.5px);background-size:7px 7px,11px 11px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;justify-content:space-between;align-items:center;padding-block:12px;background:rgba(30,34,38,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.mini{display:flex;align-items:center;gap:8px;font:400 22px var(--display)}
.mp{display:inline-flex;direction:ltr;align-items:stretch;height:30px;border:2px solid #15171a;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#FFDA4D,#FFCD00 50%,#F2BE00)}
.mp i{width:14px;background:var(--ilBlue);display:grid;place-items:center}
.mp i svg{width:10px}
.mp b{direction:rtl;padding:0 8px;font:700 27px/30px var(--plateFont);color:#121212;letter-spacing:.05em}
.top .ham{display:flex;gap:18px;font:600 15px var(--body)}
.top .ham a:not(.dl){display:none}
.top .dl{background:var(--plate);color:var(--ink);padding:9px 16px;border-radius:999px;font:800 14px var(--body)}

/* hero */
.hero{position:relative;padding-block:26px 34px;text-align:center;overflow:hidden}
.bays-bg{position:absolute;inset:0;pointer-events:none;opacity:.16;background:
 linear-gradient(90deg,transparent calc(50% - 2px),var(--line) calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)) 0 0/100% 100% no-repeat,
 repeating-linear-gradient(0deg,transparent 0 120px,var(--line) 120px 124px)}
.plate{position:relative;direction:ltr;display:inline-flex;align-items:stretch;border:3px solid #15171a;border-radius:11px;background:linear-gradient(180deg,#FFDA4D,#FFCD00 48%,#F2BE00);color:#111;outline:2px solid rgba(0,0,0,.55);outline-offset:-9px;box-shadow:0 22px 44px rgba(0,0,0,.55);transform:rotate(-2deg);overflow:hidden;animation:drop .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes drop{from{transform:translateY(-40px) rotate(-8deg);opacity:0}}
.plate .side{width:clamp(34px,9vw,58px);background:var(--ilBlue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1vw,8px);padding:8px 0;border-radius:8px 0 0 8px}
.plate .side svg{width:68%;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.plate .side b{font:700 clamp(12px,3vw,20px)/1 Arial,Helvetica,sans-serif;letter-spacing:.06em}
.plate .word{direction:rtl;padding:.02em .32em 0;font:700 clamp(88px,28vw,210px)/1.02 var(--plateFont);letter-spacing:.05em;color:#121212;text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.28)}
.tagline{position:relative;font:400 clamp(26px,7.4vw,52px)/1.15 var(--display);margin-top:26px}
.tagline span{display:inline-block}
.tagline .y{color:var(--plate)}
.sub{position:relative;font:400 17px/1.6 var(--body);opacity:.8;margin:14px auto 0;max-width:30em}

/* the parked car with a windshield sign */
.parked{position:relative;margin:34px auto 0;max-width:560px}
.parked .slot{position:relative;border-inline:4px solid rgba(241,239,230,.8);padding:14px 12px 0}
.parked .slot::after{content:"";position:absolute;inset-inline:-4px;bottom:-4px;height:4px;background:rgba(241,239,230,.8)}
.parked .car{border-radius:14px;overflow:hidden;box-shadow:0 26px 40px rgba(0,0,0,.55)}
.parked .car img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sign{position:absolute;top:2px;inset-inline-start:6%;z-index:3;background:var(--sign);color:var(--ink);padding:8px 16px 10px;border-radius:5px;transform:rotate(-6deg);box-shadow:0 10px 22px rgba(0,0,0,.4);text-align:center;animation:stick .7s .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stick{from{transform:rotate(-20deg) scale(1.6);opacity:0}}
.sign::before,.sign::after{content:"";position:absolute;top:-7px;width:36px;height:15px;background:rgba(255,255,255,.55)}
.sign::before{right:8px;transform:rotate(-8deg)}.sign::after{left:8px;transform:rotate(10deg)}
.sign b{display:block;font:700 clamp(42px,12vw,64px)/.85 var(--marker)}
.sign span{font:700 clamp(22px,6vw,30px) var(--marker)}

/* odometer */
.odo{position:relative;display:flex;justify-content:center;gap:12px;margin-top:34px}
.od{text-align:center}
.dg{display:inline-flex;direction:ltr;background:#0c0e10;border:1px solid #3a3f45;border-radius:8px;padding:5px 7px;gap:2px}
.dg span{display:block;width:.62em;height:1.1em;overflow:hidden;font:800 clamp(30px,9vw,46px)/1.1 var(--digits);text-align:center}
.dg span b{display:flex;flex-direction:column;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.dg span b i{font-style:normal;height:1.1em;line-height:1.1em}
.od small{display:block;margin-top:6px;font:600 13px var(--body);opacity:.7}

/* section heads */
.h2{font:400 clamp(32px,9vw,64px)/1.08 var(--display)}
.h2 em{font-style:normal;color:var(--plate)}
.kicker{font:800 13px var(--body);letter-spacing:2px;color:var(--sign);margin-bottom:10px}

/* haggle */
.haggle{height:330vh;position:relative}
.hstick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-block:70px 90px}
.board{position:relative;align-self:center;background:var(--sign);color:var(--ink);padding:6px 22px 10px;border-radius:5px;transform:rotate(-3deg);text-align:center;box-shadow:0 12px 24px rgba(0,0,0,.4);min-width:230px}
.board::before{content:"";position:absolute;top:-7px;left:50%;width:40px;height:15px;background:rgba(255,255,255,.55);transform:translateX(-50%) rotate(-4deg)}
.board small{font:700 26px var(--marker);display:block;line-height:1}
.board .pr{font:700 clamp(48px,14vw,76px)/1 var(--marker);display:flex;gap:12px;justify-content:center;align-items:baseline}
.board s{font-size:.55em;opacity:.55;text-decoration-thickness:4px;text-decoration-color:var(--ink)}
.stamp{position:absolute;bottom:-26px;inset-inline-end:-14px;border:4px solid var(--stop);color:var(--stop);background:rgba(255,255,255,.85);font:700 32px var(--marker);padding:0 12px;border-radius:8px;transform:rotate(12deg) scale(2.2);opacity:0;transition:.35s cubic-bezier(.3,1.6,.5,1)}
.stamp.in{opacity:1;transform:rotate(12deg) scale(1)}
.thread{display:flex;flex-direction:column;gap:10px;max-width:560px;width:100%;margin:10px auto 0}
.msg{max-width:84%;padding:12px 16px;border-radius:18px;font:600 16px/1.45 var(--body);opacity:0;transform:translateY(16px) scale(.96);transition:.4s cubic-bezier(.2,.9,.3,1.2)}
.msg.in{opacity:1;transform:none}
.msg.him{align-self:flex-start;background:var(--asph2);border:1px solid #3a4047;border-bottom-right-radius:5px}
.msg.me{align-self:flex-end;background:var(--plate);color:var(--ink);border-bottom-left-radius:5px}
.msg small{display:block;font:600 11px var(--body);opacity:.6;margin-bottom:2px}

/* bays: horizontal drive */
.drive{height:300vh;position:relative}
.dstick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:18px}
.row{display:flex;padding-inline:8vw;will-change:transform}
.bay{flex:0 0 min(80vw,440px);border-inline-start:5px solid rgba(241,239,230,.85);position:relative;padding:20px 18px;display:flex;flex-direction:column;justify-content:flex-start}
.bay:last-child{border-inline-end:5px solid rgba(241,239,230,.85)}
.bay .no{position:absolute;top:10px;inset-inline-end:16px;font:800 clamp(64px,18vw,110px)/1 var(--digits);color:transparent;-webkit-text-stroke:2px rgba(241,239,230,.45)}
.bay .pic{position:relative;margin:58px 0 14px;border-radius:12px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 24px 40px rgba(0,0,0,.6);transform:translateY(var(--y,24px));opacity:var(--o,0);transition:transform .6s,opacity .6s}
.bay .pic img{width:100%;height:100%;object-fit:cover}
.bay .st{position:absolute;top:44px;inset-inline-start:20px;z-index:3;background:var(--sign);color:var(--ink);font:700 26px/1 var(--marker);padding:5px 12px 7px;border-radius:4px;transform:rotate(-5deg) scale(var(--s,.6));opacity:var(--o,0);transition:.5s .15s cubic-bezier(.3,1.6,.5,1)}
.bay h3{font:400 clamp(30px,8vw,42px) var(--display)}
.bay p{font:400 16px/1.55 var(--body);opacity:.82;margin-top:4px}
.progress{display:flex;gap:6px;justify-content:center}
.progress i{width:26px;height:5px;border-radius:3px;background:#3a3f45;transition:background .3s}
.progress i.on{background:var(--plate)}

/* tear-off ads */
.ads{padding-block:80px 30px}
.ads .grid{display:grid;gap:28px;margin-top:30px}
.ad.r1{--r:-1.5deg}.ad.r2{--r:1.2deg}.ad.r3{--r:-.8deg}
.ad{position:relative;background:var(--paper);color:var(--ink);border-radius:3px;padding:18px 18px 0;transform:rotate(var(--r,0deg));box-shadow:0 12px 26px rgba(0,0,0,.4)}
.ad::before{content:"";position:absolute;top:-9px;left:50%;width:58px;height:18px;background:rgba(255,205,0,.75);transform:translateX(-50%) rotate(3deg)}
.ad h3{font:700 44px/1 var(--marker)}
.ad p{font:400 16px/1.55 var(--body);opacity:.8;margin:6px 0 14px}
.ad .im{margin:0 -18px 14px;aspect-ratio:16/8;overflow:hidden}
.ad .im img{width:100%;height:100%;object-fit:cover}
.tabs{display:flex;border-top:2px dashed #bfc5cc;margin-inline:-18px}
.tabs button{flex:1;min-height:92px;border:0;border-inline-start:2px dashed #bfc5cc;background:none;color:var(--ink);font:700 21px var(--marker);writing-mode:vertical-rl;cursor:pointer;transform-origin:top center;transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .5s}
.tabs button:first-child{border-inline-start:0}
.tabs button.torn{transform:translateY(40px) rotate(-24deg);opacity:0}
.hint{font:600 13px var(--body);opacity:.6;margin-top:8px}

/* gate */
.gate{padding-block:90px 40px;text-align:center}
.barrier{position:relative;display:inline-flex;align-items:flex-end;margin-top:min(140px,30vw);padding-top:44px;max-width:100%}
.post{flex:0 0 30px;height:100px;background:#2b3036;border:2px solid #474d54;border-radius:6px 6px 2px 2px;position:relative;z-index:2}
.post::after{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--stop);transform:translateX(-50%);box-shadow:0 0 12px var(--stop);transition:.3s}
.gate.open .post::after{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.arm{position:absolute;top:10px;inset-inline-start:26px;width:calc(100% - 26px);height:14px;border-radius:7px;background:repeating-linear-gradient(90deg,var(--stop) 0 26px,#fff 26px 52px);transform-origin:right center;transition:transform .9s cubic-bezier(.3,1.4,.5,1);z-index:3}
.gate.open .arm{transform:rotate(42deg)}
.go{margin-inline-start:14px;padding:18px 26px;border-radius:12px;background:var(--plate);color:var(--ink);font:800 19px var(--body);white-space:nowrap}
.credit{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font:400 15px var(--body);padding:40px 16px calc(40px + env(safe-area-inset-bottom,0px))}
.mail{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:999px;border:2px dashed rgba(241,239,230,.45);font:700 17px var(--body);color:var(--plate);direction:ltr}
.mail:hover{border-color:var(--plate)}

/* sticky download bar (thumb zone) */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:60;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,rgba(20,23,26,.95) 35%);display:flex;justify-content:center;transform:translateY(110%);transition:transform .4s}
.dock.show{transform:none}
.dock a{flex:1;max-width:480px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:14px;background:var(--plate);color:var(--ink);font:800 18px var(--body);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.dock a .mp{height:26px}.dock a .mp b{font-size:23px;line-height:26px}
.note{font:400 13px/1.6 var(--body);opacity:.55;text-align:center;padding:0 16px 130px;max-width:640px;margin:auto}

/* tablet & desktop */
@media (min-width:820px){
 .top .ham a:not(.dl){display:inline}
 .hero{padding-block:36px 70px}
 .heroGrid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;text-align:right;max-width:1200px;margin:auto}
 .sub{margin-inline:0}
 .odo{justify-content:flex-start}
 .parked{margin-top:0}
 .hstick{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;max-width:1200px;margin:auto}
 .hstick .left{display:flex;flex-direction:column;gap:30px;align-items:flex-start}
 .board{align-self:flex-start}
 .ads .grid{grid-template-columns:repeat(3,1fr);align-items:start}
 .ads,.gate{max-width:1200px;margin-inline:auto}
 .dock{display:none}
}

/* loader: shows only if the page is slow (after 250ms), gone when the hero photo is ready */
#loader{position:fixed;inset:0;z-index:200;background:var(--asph);display:grid;place-items:center;transition:opacity .45s,visibility .45s;animation:ldin .2s .25s both}
@keyframes ldin{from{opacity:0}}
#loader.done{opacity:0;visibility:hidden}
#loader .lp{transform:none;animation:none;box-shadow:none}#loader .lp .word{font-size:64px}#loader .lp .side{width:28px}
#loader .road{width:190px;height:4px;margin:22px auto 0;background:repeating-linear-gradient(90deg,var(--line) 0 22px,transparent 22px 40px);opacity:.5;animation:road .6s linear infinite}
@keyframes road{to{background-position:-40px 0}}
#loader .tire{width:34px;height:34px;margin:-30px auto 0;border-radius:50%;border:7px solid #0c0d0f;background:radial-gradient(circle,#9aa0a6 0 5px,#2c3036 6px);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(-360deg)}}
#loader small{display:block;text-align:center;margin-top:14px;font:700 26px var(--marker);color:var(--sign)}

/* tear-off details sheet */
.tabs button{position:relative}
.tabs button::after{content:"";position:absolute;inset:6px 50% auto auto;width:0}
#sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none}
#sheet.open{visibility:visible;pointer-events:auto}
#sheet .bg{position:absolute;inset:0;background:rgba(8,9,11,.6);opacity:0;transition:opacity .3s}
#sheet.open .bg{opacity:1}
#sheet .slip{position:relative;width:min(100%,520px);max-height:86svh;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-radius:4px 4px 0 0;padding:26px max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));transform:translateY(105%) rotate(2deg);transition:transform .45s cubic-bezier(.2,1.2,.4,1);
 -webkit-mask:linear-gradient(#000,#000) 0 10px/100% 100% no-repeat,radial-gradient(circle at 8px 0,transparent 6px,#000 6.5px) 0 0/16px 10px repeat-x;mask:linear-gradient(#000,#000) 0 10px/100% 100% no-repeat,radial-gradient(circle at 8px 0,transparent 6px,#000 6.5px) 0 0/16px 10px repeat-x}
#sheet.open .slip{transform:none}
#sheet .lbl{display:inline-block;background:var(--sign);padding:2px 12px 4px;border-radius:4px;font:700 28px/1 var(--marker);transform:rotate(-3deg)}
#sheet h3{font:400 30px/1.15 var(--display);margin:12px 0 8px}
#sheet p{font:400 17px/1.65 var(--body)}
#sheet ul{margin:12px 0 0;padding:0 18px 0 0;font:600 16px/1.7 var(--body)}
#sheet .shot{margin:16px auto 0;width:min(62%,240px);border-radius:22px;border:6px solid #15171a;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.25)}
#sheet .shot img{width:100%}
#sheet .x{position:absolute;top:14px;left:14px;width:44px;height:44px;border-radius:50%;border:0;background:#ece9e1;color:var(--ink);font:800 20px var(--body);cursor:pointer}
@media (min-width:820px){#sheet{align-items:center}#sheet .slip{border-radius:4px}}

/* real screenshots gallery */
.shots{padding-block:70px 10px}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 16px 22px;margin-inline:-16px;scrollbar-width:none;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.ph{flex:0 0 min(62vw,250px);scroll-snap-align:center;text-align:center}
.ph .fr{border-radius:28px;border:7px solid #0d0f11;background:#0d0f11;overflow:hidden;box-shadow:0 0 0 2px #3a3f45,0 24px 40px rgba(0,0,0,.5);aspect-ratio:9/20}
.ph .fr img{width:100%;height:100%;object-fit:cover;object-position:top}
.ph span{display:inline-block;margin-top:12px;background:var(--sign);color:var(--ink);font:700 24px/1 var(--marker);padding:3px 12px 5px;border-radius:4px;transform:rotate(-2deg)}
.swipe{font:600 13px var(--body);opacity:.6;text-align:center}

.anim{position:relative}
.anim svg{position:absolute;inset:0;width:100%;height:100%}
/* tear-off strip: perforations, paper fibres, slight curl */
.tabs{border-top:0;position:relative;padding-top:6px;margin-top:4px}
.tabs::before{content:"";position:absolute;top:0;inset-inline:0;height:6px;background:radial-gradient(circle,rgba(30,34,38,.55) 1.6px,transparent 2.2px) 0 50%/9px 6px repeat-x}
.tabs button{border-inline-start:0;margin:0;min-height:104px;background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 18%,transparent 82%,rgba(0,0,0,.05)),var(--paper);box-shadow:0 2px 3px rgba(0,0,0,.12);transform:rotate(var(--tr,0deg));border-radius:0 0 3px 3px;font-size:22px}
.tabs button:nth-child(1){--tr:-1.4deg}.tabs button:nth-child(2){--tr:1deg}.tabs button:nth-child(3){--tr:-.6deg}.tabs button:nth-child(4){--tr:1.6deg}
.tabs button+button{box-shadow:inset 1px 0 0 transparent,0 2px 3px rgba(0,0,0,.12);background-image:radial-gradient(circle,rgba(30,34,38,.45) 1.4px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.05),transparent 18%,transparent 82%,rgba(0,0,0,.05));background-size:4px 9px,auto;background-repeat:repeat-y,no-repeat;background-position:right 0 top 2px,0 0}
.tabs button:hover{transform:rotate(-8deg) translateY(6px)}
.tabs button.torn{transform:translateY(60px) rotate(-28deg);opacity:0}
.tabs button.wiggle{animation:wig 1.2s ease-in-out 3}
@keyframes wig{0%,100%{transform:rotate(var(--tr,0deg))}15%{transform:rotate(-10deg) translateY(4px)}30%{transform:rotate(7deg) translateY(2px)}45%{transform:rotate(-6deg) translateY(3px)}60%{transform:rotate(3deg)}}
.tabs button.wiggle::after{content:"👆";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%) rotate(-12deg);writing-mode:horizontal-tb;font-size:22px;animation:pt 1.2s ease-in-out 3}
@keyframes pt{50%{transform:translateX(-50%) translateY(-8px) rotate(-12deg)}}
/* sheet extras */
#sheet .shot.wide{width:100%;border-radius:12px;border-width:0}
#sheet .shot .anim svg{position:absolute;inset:0;width:100%;height:100%}
.siren{display:none;height:16px;margin:-6px -20px 14px;background:linear-gradient(90deg,#E2412E 0 50%,#2F6BFF 50% 100%);animation:sir .5s steps(1) infinite;box-shadow:0 0 22px 6px rgba(226,65,46,.55)}
@keyframes sir{50%{background:linear-gradient(90deg,#2F6BFF 0 50%,#E2412E 50% 100%);box-shadow:0 0 22px 6px rgba(47,107,255,.55)}}
#sheet.police .siren{display:block}
#sheet.police .lbl{background:#2F6BFF;color:#fff}
.lg{background:#fff;border:1px solid #e3e1da;border-radius:14px;padding:12px;margin-top:16px;font:600 15px var(--body)}
.lg .row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px dashed #e3e1da}
.lg .row:last-child{border:0}
.lg .row b{width:28px;text-align:center;font:800 18px var(--digits)}
.lg .row span{flex:1}
.lg .row i{font-style:normal;font:700 15px var(--digits);direction:ltr}
.lg .me{background:#FFF3C4;border-radius:8px}
.lg small{display:block;text-align:center;opacity:.55;margin-top:6px;font-weight:400}

html{scroll-behavior:smooth}
section,.ad{scroll-margin-top:64px}
.ham{position:relative;align-items:center}
.ham a{position:relative;padding:6px 2px;transition:color .25s}
.ham a.on{color:var(--plate)}
.ind{position:absolute;bottom:-4px;height:3px;border-radius:2px;background:var(--plate);opacity:0;transition:left .35s cubic-bezier(.3,1.3,.5,1),width .35s,opacity .25s;pointer-events:none}
.ind.show{opacity:1}
.top .ham a:focus-visible{outline:2px solid var(--plate);outline-offset:4px;border-radius:4px}

.ver{margin-top:16px;font:600 15px var(--body);opacity:.8;font-variant-numeric:tabular-nums}
.how{margin-top:6px;font:600 14px var(--body)}
.how a{color:var(--plate);text-decoration:underline;text-underline-offset:3px}
.gate .barrier:focus-visible .go,.dock a:focus-visible,.mail:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* 404 */
.nf{min-height:100vh;min-height:100svh;display:grid;place-items:center}
.nfm{text-align:center;padding:40px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;align-items:center;gap:22px}
.nfm .plate{animation:none}
.nfb{background:var(--plate);color:var(--ink);padding:16px 28px;border-radius:12px;font:800 18px var(--body)}