/* RLookup marketing page, immersive pass (2026-10-20, Chris: "match the Plank and Beam font, the thin
   and the bold; more immersive, better visuals, better hover and animations").
   Type: Montserrat for headlines, uppercase, a 300 thin line over an 800 heavy line (the Plank & Beam
   hero), Figtree body. Both self-hosted. Teal from the R mark. Real food and room photos from the
   example restaurant carry the page. Motion: one easing, reveal on scroll, nothing that moves without
   a reason, all of it off under prefers-reduced-motion. Separate from site.css: the /m/ pages use that. */
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
:root{
  --bg:#f6f6f6;--surface:#ffffff;--tint:#ededed;
  --ink:#111111;--ink-2:#333333;--muted:#555555;--line:#dddddd;--line-2:#c4c4c4;
  --brand:#111111;--brand-hi:#000000;--on-brand:#ffffff;
  --deep:#141414;--deeper:#0a0a0a;--on-deep:#f2f2f2;--deep-muted:#bdbdbd;--mint:#ffffff;
  --display:"Montserrat",system-ui,sans-serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:16px;--max:1380px;--r:3px;--ease:cubic-bezier(.22,1,.36,1);--hdr:72px;color-scheme:light}
@media (min-width:760px){:root{--gut:24px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1.5px;transition:color .3s var(--ease)}
a:hover{color:var(--brand)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
p{margin:0 0 1em}

/* Plank & Beam headline type: thin line, heavy line */
h1,h2{font-family:var(--display);text-transform:uppercase;margin:0;color:inherit}
h1 .t,h2 .t{font-weight:300;letter-spacing:.04em}
h1 .t{display:block}
h1 b,h2 b{font-weight:800;letter-spacing:.04em}
h1 b{display:block}
h1{font-size:clamp(1.8rem,1.1rem + 2.6vw,3.2rem);line-height:1.08;margin:0 0 22px}
h2{font-size:clamp(1.5rem,1.05rem + 1.7vw,2.6rem);line-height:1.12;margin:0 0 18px}
h3{font:700 1.2rem/1.3 var(--sans);letter-spacing:-.005em;margin:0 0 6px}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin:0 auto}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 14px;z-index:80}
.skip:focus{left:8px;top:8px}
.eyebrow{font:600 12px/1.3 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--brand);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow:before{content:"";width:28px;height:1.5px;background:currentColor;flex:0 0 auto}
section{padding:104px 0;position:relative}
.shead{max-width:none}

/* buttons: one shape, an arrow that slides in, a light sweep */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1.5px solid var(--brand);background:var(--brand);color:var(--on-brand);
  font:700 15px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:var(--r);cursor:pointer;text-align:center;isolation:isolate;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:after{content:"";width:0;height:2px;background:currentColor;transition:width .35s var(--ease);flex:0 0 auto}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s var(--ease)}
.btn:hover{background:var(--brand-hi);border-color:var(--brand-hi);color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(0,0,0,.65)}
.btn:hover:after{width:16px}
.btn:hover:before{transform:translateX(110%)}
.btn.sm{min-height:44px;padding:0 18px;font-size:13px;white-space:nowrap}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand);color:#fff}
.tlink{font-weight:700;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
.tlink:hover{text-decoration-thickness:3px}

/* header: clear over the hero photo, solid once you scroll */
.hdr{position:fixed;left:0;right:0;top:0;z-index:40;background:rgba(10,10,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
.hdr .wrap{display:flex;align-items:center;gap:28px;min-height:var(--hdr)}
.lang{font:700 13px/1 var(--display);letter-spacing:.12em;color:#fff;text-decoration:none;padding:12px 6px;border-bottom:1.5px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lang:hover{color:var(--mint);border-bottom-color:currentColor}
.hdr.solid .lang{color:var(--ink)}
.logo{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.logo img{height:40px;width:auto}
.lg-l img{filter:brightness(0)}
.hdr .lg-l{display:none}.hdr .lg-d{display:inline-flex}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{position:relative;font:600 12.5px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:12px 0;color:#fff}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover{color:var(--mint)}
.nav a:hover:after{transform:scaleX(1);transform-origin:left}
.hdr.solid{background:rgba(246,246,246,.92);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)}
.hdr.solid .lg-l{display:inline-flex}.hdr.solid .lg-d{display:none}
.hdr.solid .nav a{color:var(--ink)}
.hdr.solid .nav a:hover{color:var(--brand)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:0 10px;cursor:pointer;border-radius:var(--r)}
.burger i{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.hdr.solid .burger i,.hdr.open .burger i{background:var(--ink)}
.hdr.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}.hdr.open .burger i:nth-child(2){opacity:0}.hdr.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1000px){
  .burger{display:flex}.lang{margin-left:auto}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:8px var(--gut) 18px;background:#f6f6f6;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,0,0,.45);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .nav a{color:var(--ink);font-size:14px;padding:16px 0;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .hdr.open{background:#f6f6f6;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr.open .lg-l{display:inline-flex}.hdr.open .lg-d{display:none}.hdr.open .lang{color:var(--ink)}
  .hdr.open .nav{opacity:1;transform:none;visibility:visible;transition:opacity .3s var(--ease),transform .3s var(--ease)}
}
.nlang{display:none!important}
@media (max-width:1000px){.nav .nlang{display:block!important}}
@media (max-width:480px){.hdr .lang{display:none}.hdr .btn.sm{margin-left:auto}}
@media (max-width:400px){.logo img{height:34px}.hdr .btn{padding:0 12px;font-size:12px;letter-spacing:.04em}.hdr .wrap{gap:10px}}

/* hero: the food photo full bleed, slow push in, copy and the form over it */
.hero{background:var(--deeper);color:var(--on-deep);padding:calc(var(--hdr) + 72px) 0 88px;overflow:hidden;min-height:min(100svh,920px);display:flex;align-items:center}
.hbg{position:absolute;inset:0;overflow:hidden}
.hbg img{width:100%;height:115%;object-fit:cover;object-position:center 60%;filter:saturate(1.15) brightness(1.08);transform:translate3d(0,var(--py,0px),0) scale(1.08);animation:push 18s var(--ease) both;will-change:transform}
.hbg:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.62) 40%,rgba(10,10,10,.25) 72%,rgba(10,10,10,.4) 100%),linear-gradient(0deg,rgba(10,10,10,.7),transparent 35%)}
@keyframes push{from{transform:translate3d(0,var(--py,0px),0) scale(1.18)}to{transform:translate3d(0,var(--py,0px),0) scale(1.08)}}
.hglow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--gx,30%) var(--gy,40%),rgba(138,219,214,.14),transparent 60%);transition:background .2s}
.hero .wrap{position:relative;z-index:1}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"copy form" "more form";column-gap:64px;align-items:end;width:min(100% - 2*var(--gut),var(--max))}
.hcopy{grid-area:copy}.hform{grid-area:form;align-self:center}.hmore{grid-area:more;align-self:start}
.hero .eyebrow{color:var(--mint)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero .lede,.ticks li{text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero h1 b{color:#fff}
.lede{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.6;color:#dcefed;margin:0 0 26px;max-width:640px}
.ticks{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:10px 28px}
.ticks li{display:flex;align-items:center;gap:10px;font-weight:600}
.ticks li:before{content:"";width:16px;height:9px;border-left:2.5px solid var(--mint);border-bottom:2.5px solid var(--mint);transform:rotate(-45deg) translateY(-3px);flex:0 0 auto}
.hero .tlink{color:#fff}
.hero .tlink:hover{color:var(--mint)}
/* the hero comes in line by line */
.js .ri{opacity:0;transform:translateY(26px);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--d) * 120ms + 150ms)}
@keyframes rise{to{opacity:1;transform:none}}
@media (max-width:900px){.hgrid{grid-template-columns:1fr;grid-template-areas:"copy" "form" "more";row-gap:24px}.hero{padding:calc(var(--hdr) + 28px) 0 44px;min-height:0}.ticks{flex-direction:column}.lede{margin:0}.hero h1{margin-bottom:14px}}

/* the form: frosted over the photo */
.pform{background:rgba(255,255,255,.97);color:var(--ink);border:1px solid rgba(255,255,255,.6);border-radius:var(--r);padding:30px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.ftitle{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;line-height:1.15;margin:0 0 18px}
.ftitle{white-space:nowrap}.ftitle .t{font-weight:300;letter-spacing:.04em}.ftitle b{font-weight:800;letter-spacing:.04em}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:18px}
.fld label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.fld input{width:100%;min-height:50px;border:1px solid var(--line-2);border-radius:var(--r);padding:0 14px;background:#fff;font-size:16px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.fld input:hover{border-color:var(--muted)}
.fld input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.fld input[aria-invalid="true"]{border-color:#b3261e}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{margin:12px 0 0;font-weight:700;min-height:0}
.fmsg:empty{display:none}
.fmsg.err{color:#b3261e}
.fmsg.ok{color:var(--brand)}
.fnote{margin:10px 0 0;font-size:15px;color:var(--muted)}
.pform.done .fgrid,.pform.done button,.pform.done .fnote{display:none}
.pform.done .fmsg{font-size:1.1rem;color:var(--ink)}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.pform{padding:20px}}

/* a moving strip of the example restaurant's dishes */
.strip{background:var(--deeper);padding:18px 0;overflow:hidden;position:relative}
.track{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite}
.strip:hover .track{animation-play-state:paused}
.dish{margin:0;width:clamp(180px,22vw,280px);aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);flex:0 0 auto}
.dish img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .8s var(--ease);filter:saturate(.92)}
.dish:hover img{transform:scale(1.1);filter:saturate(1.15)}
@keyframes slide{to{transform:translateX(calc(-50% - 7px))}}

/* three looks: a three panel reel. The section pins and scrolling down slides Night, Daylight and
   Classic across the screen, each in its own colours. Without JS (or with reduced motion) the panels stack. */
.intro{font-size:1.1rem;color:var(--ink-2);margin:0 0 40px}
.looks-sec{padding-bottom:0}
.lhead{display:grid;grid-template-columns:1fr minmax(280px,.62fr);gap:56px;align-items:center;margin-bottom:40px}
.lhead .intro{margin:0}
.lpic{margin:0;overflow:hidden;border-radius:var(--r);box-shadow:0 34px 60px -36px rgba(0,0,0,.55)}
.lpic img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}
.lpic:hover img{transform:scale(1.05)}
@media (max-width:900px){.lhead{grid-template-columns:1fr;gap:24px}}
.reel{position:relative;margin-top:8px}
.rtrack{display:flex;flex-direction:column}
.panel{position:relative;overflow:hidden;padding:72px 0;color:var(--pi);background:var(--pb);
  --pb:#120d0a;--pi:#f6eee6;--pm:#d9c8b8;--pa:#e6a46a;--pt:#120d0a}
.p-daylight{--pb:#f7f1e6;--pi:#1e1a15;--pm:#4d4439;--pa:#a8461a;--pt:#ffffff}
.p-classic{--pb:#efe7d7;--pi:#24201b;--pm:#4f463b;--pa:#7b2a20;--pt:#ffffff}
.pwash{position:absolute;inset:-60px;background-size:cover;background-position:center top;filter:blur(36px) saturate(1.2);opacity:.3;transform:scale(1.1)}
.p-daylight .pwash,.p-classic .pwash{opacity:.18}
.pin{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,.42fr) 1fr;gap:56px;align-items:center;height:100%}
.pkick{font:300 clamp(1rem,.8rem + .6vw,1.4rem)/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--pm);margin:0 0 6px}
.pname{font:800 clamp(2.4rem,1rem + 3.9vw,4.6rem)/.95 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:0 0 20px;color:var(--pi)}
.pline{font-size:clamp(1.05rem,1rem + .35vw,1.3rem);line-height:1.55;color:var(--pm);margin:0 0 28px}
.plink{background:var(--pa);border-color:var(--pa);color:var(--pt)}
.plink:hover{background:var(--pi);border-color:var(--pi);color:var(--pb);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.pdev{position:relative;padding:0 9% 9% 0}
.laptop{background:#0d1416;border-radius:12px;padding:10px 10px 12px;box-shadow:0 50px 90px -40px rgba(0,0,0,.65)}
.lbarr{display:flex;gap:6px;padding:2px 4px 9px}
.lbarr i{width:9px;height:9px;border-radius:50%;background:#3a4a4d}
.lview{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#1a2326}
.lview img,.hview img{width:100%;height:100%;object-fit:cover;object-position:top}
.hview{aspect-ratio:520/1125;overflow:hidden;border-radius:18px;background:#1a2326}
.handset{position:absolute;right:0;bottom:0;width:26%;background:#0d1416;border-radius:24px;padding:7px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.rdots{display:none}
.cmp{margin:24px 0 0;padding-bottom:24px}
.why{padding-top:56px}
@media (max-width:900px){.pin{grid-template-columns:1fr;gap:28px}.pdev{order:2}}

/* the three looks: a carousel of its own (Chris 2026-10-20: "scroll independently of the page").
   Swipe, the arrows or the names move it; the page scrolls straight past. */
.reel.on .rstick{position:relative;overflow:hidden}
.reel.on .rtrack{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.reel.on .rtrack::-webkit-scrollbar{display:none}
.reel.on .panel{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;min-height:min(84svh,840px);padding:72px 0 104px;display:flex;align-items:center}
.reel.on .pin{width:min(100% - 2*var(--gut),var(--max));height:auto;align-content:center}
.reel.on .ptext{transform:translate3d(calc(var(--p,0) * 120px),0,0);opacity:calc(1 - var(--a,0) * .7)}
.reel.on .laptop{transform:translate3d(calc(var(--p,0) * -60px),0,0) scale(calc(1 - var(--a,0) * .06))}
.reel.on .handset{transform:translate3d(calc(var(--p,0) * -160px),calc(var(--a,0) * 30px),0)}
@media (max-width:900px){.reel.on .panel{padding:40px 0 96px;min-height:0}.reel.on .pdev{max-width:520px}}
.rsel,.rarr{display:none}
.reel.on .rsel{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:6px;z-index:3;padding:5px;border-radius:999px;background:rgba(10,10,10,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rsel button{border:0;background:transparent;color:#fff;font:700 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:12px 16px;border-radius:999px;cursor:pointer}
.rsel button:hover{color:#fff;background:rgba(255,255,255,.14)}
.rsel button.on{background:#fff;color:var(--ink)}
.reel.on .rarr{display:grid;place-items:center;position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,10,10,.62);color:#fff;font-size:22px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s var(--ease),opacity .3s,transform .3s var(--ease)}
.rarr:hover{background:rgba(10,10,10,.85);transform:scale(1.06)}
.rarr.prev{left:14px}.rarr.next{right:14px}
.rarr[disabled]{opacity:0;pointer-events:none}
@media (max-width:900px){.reel.on .rarr{top:auto;bottom:18px;margin:0;width:44px;height:44px}.rsel button{padding:12px 10px;font-size:13px;letter-spacing:.04em}}
@media (max-width:900px){.reel.on .panel{padding:calc(var(--hdr) + 12px) 0 56px}.reel.on .pname{margin-bottom:10px}.reel.on .pline{margin-bottom:16px}
  .reel.on .pdev{max-width:520px}}
@media (max-width:900px) and (max-height:760px){.reel.on .pline{display:none}}

/* why: six reasons, they rise in as you reach them */
.why{background:var(--surface)}
.whys{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1060px){.whys{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.whys{grid-template-columns:1fr}}
.whys li{padding:28px 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.whys li:hover{transform:translateY(-6px);border-color:var(--line-2);background:#fff;box-shadow:0 26px 50px -30px rgba(0,0,0,.45)}
.whys li{position:relative;overflow:hidden}
.wic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--tint);color:var(--brand);margin:0 0 20px;transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease)}
.whys li:hover .wic{background:var(--brand);color:#fff;transform:rotate(-8deg) scale(1.06)}
.whys .wht{min-height:2.5em;font:800 clamp(1.05rem,.95rem + .35vw,1.25rem)/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0 0 10px;transition:color .3s var(--ease)}
.whys li:hover h3{color:var(--brand)}
.whys p{margin:0;color:var(--ink-2)}
.whys .proof{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--brand-hi);font-weight:600}
.whys .proof a{color:inherit}

/* what every site includes: the phone stays, the list moves past it */
.igrid{display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:72px;align-items:start}
.iphone{position:sticky;top:110px;display:flex;justify-content:center}
.device{background:#0d1416;border-radius:30px;padding:8px;box-shadow:0 40px 70px -34px rgba(0,0,0,.6);max-width:330px;width:100%}
.device img{width:100%;height:auto;border-radius:22px}
.feats{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feats li{display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.feats li.wide{grid-column:1/-1}
.feats li:hover{border-color:var(--line-2);box-shadow:0 22px 44px -30px rgba(0,0,0,.45)}
.feats li:hover{transform:translateY(-5px)}
.feats li:hover .wic{background:var(--brand);color:#fff}
.feats .wic{width:48px;height:48px;margin-bottom:16px}
.feats .wht{font:800 clamp(1rem,.92rem + .3vw,1.15rem)/1.3 var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px;color:var(--ink)}
.feats p{margin:0;color:var(--ink-2)}
.feats .src{margin-top:auto;padding-top:14px;font-size:15px;color:var(--muted);border-top:1px solid var(--line);margin-top:16px}
@media (min-width:641px){.feats .wht{min-height:2.6em;display:flex;align-items:flex-end}.feats li.wide .wht{min-height:0}}
@media (max-width:640px){.feats{grid-template-columns:1fr}}
@media (max-width:900px){.igrid{grid-template-columns:1fr;gap:28px}.iphone{position:static}.device{max-width:240px}}

/* ordering: the dining room behind it */
.keep{background:var(--deep);color:var(--on-deep);overflow:hidden}
.kbg{position:absolute;inset:0;overflow:hidden}
.kbg img{width:100%;height:120%;object-fit:cover;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.kbg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.88) 50%,rgba(10,10,10,.6) 100%)}
.keep .wrap{position:relative;z-index:1}
.keep .eyebrow{color:var(--mint)}
.kgrid{display:grid;grid-template-columns:1fr minmax(200px,.38fr);gap:72px;align-items:center}
.kcopy p:not(.eyebrow){color:#dcefed;font-size:1.08rem}
.kcopy .btn{margin-top:10px}
.kshot{display:flex;justify-content:flex-end}
.kshot .device{max-width:300px}
@media (max-width:900px){.kgrid{grid-template-columns:1fr;gap:32px}.kshot{justify-content:flex-start}.kshot .device{max-width:240px}}

.works{position:relative;z-index:1;margin-top:72px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.wh{font:800 clamp(1.2rem,1rem + .8vw,1.7rem)/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 8px}
.wp{color:#dcefed;margin:0 0 26px}
.wrows{display:flex;flex-direction:column;gap:12px}
.wrow{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px}
.wcat{font:600 12px/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.wtrack{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wmove{display:flex;gap:10px;width:max-content;animation:slide 38s linear infinite}
.wrow:nth-child(2n) .wmove{animation-direction:reverse;animation-duration:30s}
.wrow:hover .wmove{animation-play-state:paused}
.wchip{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);background:rgba(255,255,255,.06);color:#fff;font-weight:700;white-space:nowrap;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.wchip:hover{background:var(--mint);border-color:var(--mint);color:var(--deeper)}
@media (max-width:640px){.wrow{grid-template-columns:1fr;gap:8px}}

/* gentle float on the phones */
.float{animation:float 7s ease-in-out infinite}
.float.slow{animation-duration:9s;animation-delay:-3s}
@keyframes float{50%{transform:translateY(-12px)}}

/* how it works: a line draws across as the steps arrive */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:20px;padding-top:30px}
.steps:before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line)}
.steps:after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.steps.in:after{transform:scaleX(1)}
.dot{position:absolute;top:-30px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--brand);transition:background .4s var(--ease) .6s}
.steps.in .dot{background:var(--brand)}
.step{position:relative}
.step p{color:var(--ink-2);margin:0}
@media (max-width:760px){.steps{grid-template-columns:1fr;padding:0 0 0 30px;gap:28px}.steps:before,.steps:after{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}.steps:after{transform:scaleY(0);transform-origin:top}.steps.in:after{transform:scaleY(1)}.dot{top:4px;left:-30px}}

/* pricing */
.pricing{background:var(--surface)}
.plans{display:flex;flex-wrap:wrap;gap:24px;margin-top:8px}
.plan{flex:1 1 320px;border:1px solid var(--line);border-radius:var(--r);padding:32px;background:var(--bg);display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.plan:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:0 30px 60px -36px rgba(0,0,0,.5)}
.plan.easy{border:1.5px solid var(--brand);background:var(--surface)}
.plan h3{font:800 1.4rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase}
.plan.easy{position:relative}
.rec{position:absolute;top:22px;right:22px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--brand);background:var(--tint);cursor:help;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.rec:hover,.rec:focus-visible{transform:rotate(-12deg) scale(1.08);background:var(--brand);color:#fff}
.rtip{position:absolute;right:0;top:calc(100% + 10px);width:max-content;max-width:240px;background:var(--ink);color:#fff;font:600 14px/1.35 var(--sans);padding:9px 12px;border-radius:var(--r);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.rec:hover .rtip,.rec:focus-visible .rtip{opacity:1;transform:none}
.price b.pq{font-size:2.2rem}
.price .was{font:300 1.6rem/1 var(--display);color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#b3261e}
.promo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 22px;padding:16px 20px;border:1.5px solid var(--brand);border-radius:var(--r);background:var(--tint);color:var(--ink)}
.promo b{font-weight:800}
.pdot{width:10px;height:10px;border-radius:50%;background:#b3261e;flex:0 0 auto;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.5}}

.pricing.ended .promo,.pricing.ended .now{display:none}
.pricing.ended .was{text-decoration:none;font:300 3rem/1 var(--display);color:var(--ink)}

.pbtn{margin-top:auto;align-self:flex-start}
.plan ul{margin-bottom:20px}
.plan .tag{font:600 12px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin:0 0 10px}
.price{font-size:1.05rem;color:var(--ink-2);margin:8px 0 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.price b{font:300 3rem/1 var(--display);color:var(--ink);letter-spacing:.01em}
.draft{font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#7a4b00;border:1px solid #c9a253;background:#fff6e0;border-radius:var(--r);padding:5px 7px}
.plan>p{color:var(--ink-2)}
.plan ul{list-style:none;margin:4px 0 0;padding:0}
.plan li{padding:10px 0 10px 26px;border-top:1px solid var(--line);position:relative}
.plan li:before{content:"";position:absolute;left:3px;top:16px;width:12px;height:7px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}

/* questions: they open smoothly */
.fgrid2{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faside{position:sticky;top:110px}
.fpic{position:relative;margin:28px 0 0;overflow:hidden;border-radius:var(--r);box-shadow:0 36px 64px -38px rgba(0,0,0,.6)}
.fpic img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s var(--ease)}
.fpic:hover img{transform:scale(1.06)}
.fpic figcaption{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);background:rgba(10,10,10,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:600;line-height:1.45}
.fbub{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--mint);color:var(--deeper);animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(-6deg)}}
@media (max-width:900px){.faside{position:static}.fpic{display:none}}
@media (max-width:900px){.fgrid2{grid-template-columns:1fr;gap:16px}}
.qs{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;min-height:44px;font:700 1.1rem/1.35 var(--sans);transition:color .3s var(--ease),padding .3s var(--ease)}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:300 1.8rem/1 var(--display);color:var(--brand);flex:0 0 auto;transition:transform .4s var(--ease)}
details[open] summary:after{transform:rotate(45deg)}
summary:hover{color:var(--brand);padding-left:8px}
.ans{overflow:hidden}
.ans p{margin:0 0 20px;color:var(--ink-2)}

/* closing ask: the table behind it */
.close{background:var(--deep);color:var(--on-deep);overflow:hidden}
.cbg{position:absolute;inset:0;overflow:hidden}
.cbg img{width:100%;height:120%;object-fit:cover;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.cbg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.94),rgba(10,10,10,.8))}
.close .wrap{position:relative;z-index:1}
.close .eyebrow{color:var(--mint)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ccopy p:not(.eyebrow){color:#dcefed;font-size:1.08rem;margin:0}
@media (max-width:900px){.cgrid{grid-template-columns:1fr;gap:24px}}

/* footer */
.foot{background:var(--deeper);color:var(--on-deep);padding:48px 0}
.foot .wrap{display:flex;flex-wrap:wrap;gap:22px 48px;align-items:center;justify-content:space-between}
.fbot{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.fcol{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.fcol p{margin:0;color:var(--deep-muted)}
.fcol .made a{color:var(--on-deep);font-weight:700}
.fcol .made a:hover{color:var(--mint)}
.foot .logo img{height:36px}
.fnav{display:flex;flex-wrap:wrap;gap:4px 22px}
.fnav a{color:var(--on-deep);text-decoration:none;font-weight:600;padding:10px 0;display:inline-block}
.fnav a:hover{color:var(--mint);text-decoration:underline}
.copy{margin:0;color:var(--deep-muted);font-size:15px}
.pby{display:inline-flex;align-items:center;gap:10px;color:var(--deep-muted);text-decoration:none;font-size:14px;font-weight:600;transition:color .3s var(--ease),opacity .3s}
.pby img{height:18px;width:auto;opacity:.9;transition:opacity .3s}
.pby:hover{color:#fff}.pby:hover img{opacity:1}

/* phone dock: the one action, shown once the hero form has scrolled away */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(246,246,246,.96);border-top:1px solid var(--line);display:none;transform:translateY(100%);transition:transform .4s var(--ease)}
@media (max-width:900px){.dock{display:block}.dock.on{transform:none}.foot{padding-bottom:100px}}

/* reveal on scroll (only when JS is running, so nothing is hidden without it) */
.js .rv-up{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--sd,0ms)}
.js .rv-up.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .fbub{animation:none}
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js .ri,.js .rv-up{opacity:1;transform:none}
  .hbg img{transform:none}
  .track{flex-wrap:wrap;width:auto;justify-content:center}
}
p,li,summary{text-wrap:pretty}
.faside h2{font-size:clamp(1.4rem,1rem + 1.1vw,2.1rem)}

.fcol .fcontact{flex:1 0 100%;font-size:15px}
.fcol .fcontact a{color:var(--on-deep);text-decoration:none;font-weight:700}
.fcol .fcontact a:hover{color:var(--mint);text-decoration:underline}
.ccall{margin-top:14px!important;font-weight:600}
.ccall a{color:var(--mint);font-weight:800}
/* carousel arrows sit beside the look names at the bottom, never over the panel's words */
@media (min-width:901px){.reel.on .rarr{top:auto;bottom:18px;margin:0}.rarr.prev{left:calc(50% - 250px)}.rarr.next{right:calc(50% - 250px)}}

/* countdown: days, hours, minutes, seconds, each with its word under it */
[data-cd]{display:inline-flex;gap:6px;align-items:stretch}
[data-cd] .u{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 6px 5px;border-radius:var(--r);background:var(--ink);color:#fff}
[data-cd] i{font:800 22px/1 var(--display);font-style:normal;font-variant-numeric:tabular-nums}
[data-cd] i:before{content:attr(data-v)}
[data-cd] small{font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-top:4px}
.pends{font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-hi)}
/* top countdown bar, like /plank: part of the fixed header, gone when the offer ends */
.topbar{background:#b3261e;color:#fff;font-size:15px}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;min-height:40px;padding:0;flex-wrap:nowrap;white-space:nowrap}
.topbar [data-cd]{gap:8px}
.topbar [data-cd] .u{flex-direction:row;align-items:baseline;gap:3px;background:none;min-width:0;padding:0}
.topbar [data-cd] i{font-size:16px}
.topbar .sh{display:none}
.topbar [data-cd] small{font-size:13px;margin:0;opacity:.9;text-transform:none;letter-spacing:0}
.tlk{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.tlk:hover{color:#ffe1dc}
.hdr .topbar{display:none}
.has-top .hdr .topbar{display:block}
.has-top .hero{padding-top:calc(var(--hdr) + var(--tb,46px) + 72px)}
html.has-top{scroll-padding-top:136px}
@media (max-width:900px){.has-top .hero{padding-top:calc(var(--hdr) + var(--tb,40px) + 28px)}.topbar .tlk{display:none}}
@media (max-width:640px){.topbar .lf{display:none}.topbar .sh{display:inline}.topbar .wrap{gap:10px;font-size:14px}.topbar [data-cd]{gap:5px}}
/* the tagline that explains the name */
.tagline{background:var(--deeper);color:#fff;padding:34px 0 8px;text-align:center}
.tagline p{margin:0;font:300 clamp(1.25rem,1rem + 1.2vw,2.1rem)/1.3 var(--display);letter-spacing:.03em;text-transform:uppercase}
.tagline b{font-weight:800;color:var(--mint)}
/* form: what do you need */
.kind{border:0;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kind legend{font-weight:700;font-size:15px;margin-bottom:8px;padding:0}
.kind label{flex:1 1 200px;cursor:pointer}
.kind input{position:absolute;opacity:0;width:1px;height:1px}
.kind span{display:flex;align-items:center;min-height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);font-weight:600;font-size:15px;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.kind input:checked+span{border-color:var(--brand);background:var(--brand);color:#fff}
.kind input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.fld[hidden]{display:none}
/* footer: logo and line centred on each other */
.fcol{align-items:center}
.fcol .logo{display:flex;align-items:center}
.fcol>p:not(.fcontact){display:flex;align-items:center;min-height:36px}
.foot .fcol{flex:1 1 0;min-width:280px}
@media (min-width:901px){.foot .fnav{justify-content:flex-end}}

/* a real person, start to finish */
.human{background:var(--surface)}
.hgrid2{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hcopy2 p:not(.eyebrow){color:var(--ink-2);font-size:1.08rem}
.promise{list-style:none;margin:22px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.promise li{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.promise li:hover{transform:translateY(-3px);border-color:var(--ink)}
.promise b{display:block;font:800 15px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.promise span{color:var(--ink-2);font-size:15.5px}
.ccall2{font-weight:700}.ccall2 a{font-weight:800}
.chat{background:var(--deeper);color:#fff;border-radius:22px;padding:26px 22px;box-shadow:0 40px 70px -40px rgba(0,0,0,.6);max-width:460px;justify-self:center;width:100%}
.chat-h{font:600 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#bdbdbd;margin:0 0 18px}
.chat .b{max-width:84%;padding:12px 16px;border-radius:18px;margin:0 0 10px;font-size:15.5px;line-height:1.45}
.chat .me{background:#2b2b2b;border-bottom-left-radius:4px}
.chat .us{background:#fff;color:#111;margin-left:auto;border-bottom-right-radius:4px}
.chat-f{margin:14px 0 0;font-size:15px;color:#bdbdbd}
.js .chat .b{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .chat.in .b{opacity:1;transform:none}
.js .chat.in .b:nth-of-type(2){transition-delay:.5s}.js .chat.in .b:nth-of-type(3){transition-delay:1s}.js .chat.in .b:nth-of-type(4){transition-delay:1.5s}
@media (max-width:900px){.hgrid2{grid-template-columns:1fr;gap:32px}.promise{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.js .chat .b{opacity:1;transform:none}}

/* footer: the line sits on the logo's baseline (Chris 2026-10-20: bottom justify) */
.foot .fcol{align-items:flex-end}
.foot .fcol>p:not(.fcontact){min-height:0;line-height:1.2;padding-bottom:3px}
@media (max-width:1180px){.hdr .nav a[href="#ordering"]{display:none}}
@media (max-width:1380px){.hdr .nav a[href="#people"]{display:none}}

/* "What do you need?": two clear choices, one of them visibly picked (Chris 2026-10-20) */
.kind legend span{font-weight:600;color:var(--muted);margin-left:6px}
.kind span{position:relative;padding:0 14px 0 44px;background:#fff;border:1.5px solid var(--line-2)}
.kind span:before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px solid var(--muted);background:#fff;box-sizing:border-box}
.kind input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.kind input:checked+span:before{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 4px var(--ink)}
.kind label:hover span{border-color:var(--ink)}
.kind legend>span{position:static;padding:0;border:0;background:none;display:inline;min-height:0}
.kind legend>span:before{display:none}
.hdr:not(.solid):not(.open) .btn.sm{background:#fff;border-color:#fff;color:#111}
.hdr:not(.solid):not(.open) .btn.sm:hover{background:#e9e9e9;border-color:#e9e9e9;color:#111}

/* tighter join between the updates section and pricing */
.human{padding-bottom:56px}
.human+.pricing{padding-top:56px}

/* header: the R mark and "Putting your restaurant first" */
.hlogo{display:flex;align-items:center;gap:10px}
.hlogo .mk{height:38px;width:38px;object-fit:contain}
.hdr .hlogo .lg-l{display:none}.hdr .hlogo .lg-d{display:block}
.hdr.solid .hlogo .lg-l,.hdr.open .hlogo .lg-l{display:block}.hdr.solid .hlogo .lg-d,.hdr.open .hlogo .lg-d{display:none}
.mkt{font:800 12.5px/1.15 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;max-width:150px}
.hdr.solid .mkt,.hdr.open .mkt{color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:420px){.mkt{font-size:11px;max-width:110px}}
/* footer: logo and line on one baseline (Chris 2026-10-20) */
.fbrand{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.fbrand .logo img{display:block;height:36px}
.fbrand p{margin:0;line-height:1;padding-bottom:3px;color:var(--deep-muted)}
/* buttons look like buttons: a white inner border inside the dark edge, barely rounded (Chris 2026-10-20) */
.btn:not(.ghost){border:2px solid var(--brand);box-shadow:inset 0 0 0 2px #fff;border-radius:3px}
.btn:not(.ghost):hover{box-shadow:inset 0 0 0 2px #fff,0 12px 28px -12px rgba(0,0,0,.55)}
.hdr:not(.solid):not(.open) .btn.sm{box-shadow:inset 0 0 0 2px #111}
.btn.ghost{border-width:2px}
@media (max-width:480px){.mkt{display:none}}

/* language: labelled, both choices visible, the current one marked (Chris 2026-10-20) */
.lang{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0}
.lang .lsl{font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.lso{display:flex;border:1.5px solid currentColor;border-radius:3px;overflow:hidden}
.lso b,.lso a{font:800 12px/1 var(--display);letter-spacing:.08em;padding:6px 9px;text-decoration:none;color:inherit}
.lso b{background:#fff;color:#111}
.hdr.solid .lso b,.hdr.open .lso b{background:var(--ink);color:#fff}
.lso a:hover{background:rgba(255,255,255,.18)}
.hdr.solid .lso a:hover{background:var(--tint)}
.lang:hover{border:0}

.hdr .wrap{gap:18px}
.nav{gap:16px}
.hero h1{font-size:clamp(1.3rem,.85rem + 2.4vw,3rem)}
html[lang="en"] .hero h1 .t{white-space:nowrap}

/* the looks carousel: real device edges, visible on dark and light panels (Chris 2026-10-20) */
.panel .laptop{background:#1b1b1b;border:1px solid rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 50px 90px -40px rgba(0,0,0,.65);position:relative;border-radius:14px 14px 6px 6px}
.panel .laptop:after{content:"";position:absolute;left:-7%;right:-7%;bottom:-16px;height:16px;border-radius:0 0 14px 14px;background:linear-gradient(#cfcfcf,#9a9a9a);box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.panel .handset{background:#111;border:2px solid #bdbdbd;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 60px -24px rgba(0,0,0,.6);border-radius:26px}
.panel .handset:before{content:"";position:absolute;top:9px;left:50%;width:26%;height:5px;margin-left:-13%;border-radius:4px;background:#2a2a2a;z-index:2}
.panel .pdev{padding-bottom:12%}