/* Approved combined concept. Owner page only; no dependency on hydration attributes. */
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div{display:flex!important;flex-direction:column!important;gap:0!important;border:0!important;box-shadow:none!important;padding:0!important;background:radial-gradient(ellipse at top left,#fff0e5,transparent 65%)!important;border-radius:18px!important;overflow:hidden!important}
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>h1){order:0!important;width:100%!important;box-sizing:border-box!important;padding:12px 4px 16px!important;text-align:center!important;align-items:center!important}
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>img){order:1!important;width:100%!important;max-width:none!important;margin:0!important;border:0!important;box-shadow:none!important;border-radius:16px!important;overflow:hidden!important}
html body main:has(ul.grid.grid-cols-6) img[src*="owner-menu-qr-hero"]{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1.85!important;object-fit:cover!important;max-height:none!important}
html body main:has(ul.grid.grid-cols-6) h1{display:none!important}
html body main:has(ul.grid.grid-cols-6) h1+p{font-size:clamp(28px,8vw,46px)!important;font-weight:800!important;line-height:1.35!important;white-space:normal!important;text-align:center!important;margin:0 0 7px!important;color:#142031!important}
.four-owner-online-accent{color:#f47731}.four-owner-tagline{margin:0!important;font-size:12px;line-height:1.7;color:#757b85;text-align:center}
html body main ul.grid.grid-cols-6{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;list-style:none!important;margin:0!important;padding:0!important;direction:rtl;position:relative}
html[lang^="en"] body main ul.grid.grid-cols-6{direction:ltr}
html body main ul.grid.grid-cols-6:before{content:'';position:absolute;top:-13px;left:43%;width:14%;height:4px;border-radius:5px;background:#f47731}
html body main ul.grid.grid-cols-6>li{grid-column:1/-1!important;box-sizing:border-box!important;min-width:0!important;margin:0!important;padding:14px!important;box-shadow:none!important;color:#142031!important;text-align:start!important}
html body main ul.grid.grid-cols-6>li>p{margin:0!important;white-space:normal!important;overflow-wrap:break-word!important;min-width:0!important}
html body main ul.grid.grid-cols-6>li>p:first-of-type{font-size:15px!important;font-weight:700!important;line-height:1.55!important}
html body main ul.grid.grid-cols-6>li>p:last-of-type{font-size:12px!important;font-weight:400!important;line-height:1.75!important;color:#757b85!important}
html body main ul.grid.grid-cols-6>li>span{display:flex!important;justify-content:center!important;align-items:center!important;background:#fff0e5!important;color:#f47731!important;border-radius:11px!important;width:42px!important;height:46px!important;margin:0!important}
html body main ul.grid.grid-cols-6>li svg{width:29px!important;height:29px!important;stroke-width:1.7}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2){grid-column:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;min-height:176px!important;border:0!important;border-radius:16px!important;background:linear-gradient(120deg,#fff5ed,#ffeddf)!important;text-align:center!important;padding:16px 10px!important;position:relative}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>span{width:64px!important;height:64px!important;border-radius:50%!important;background:#ffe5ce!important;margin-bottom:2px!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2) svg{width:39px!important;height:39px!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:first-of-type{font-size:14px!important}
html body main ul.grid.grid-cols-6>li:first-child:after{content:'';position:absolute;left:-16px;top:60px;width:22px;height:4px;border-radius:4px;background:#f47731;z-index:2;box-shadow:-4px 0 0 -1px #fff,4px 0 0 -1px #fff}
html body main ul.grid.grid-cols-6>li:nth-child(n+3){display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;column-gap:10px!important;row-gap:2px!important;align-items:center!important}
html body main ul.grid.grid-cols-6>li:nth-child(n+3)>span{grid-column:1;grid-row:1/3}
html body main ul.grid.grid-cols-6>li:nth-child(n+3)>p{grid-column:2}
html body main ul.grid.grid-cols-6>li:nth-child(3){background:linear-gradient(110deg,#fff6ec,#ffecdb)!important;border:1px solid #f47731!important;border-inline-start:5px solid #f47731!important;border-radius:14px!important;min-height:92px!important;grid-template-columns:64px minmax(0,1fr)!important}
html body main ul.grid.grid-cols-6>li:nth-child(3)>span{background:#f47731!important;color:white!important;width:58px!important;height:62px!important;border-radius:50% 50% 45% 45%!important}
html body main ul.grid.grid-cols-6>li:nth-child(3)>p:first-of-type{font-size:17px!important}
html body main ul.grid.grid-cols-6>li:nth-child(n+4){background:var(--color-surface,#fff)!important;border:1px solid #e2e5e9!important;border-radius:0!important;min-height:84px!important}
html body main ul.grid.grid-cols-6>li:nth-child(4){border-radius:14px 14px 0 0!important;border-bottom:0!important}
html body main ul.grid.grid-cols-6>li:nth-child(5){margin-top:-10px!important;border-block:0!important;position:relative}
html body main ul.grid.grid-cols-6>li:nth-child(6){margin-top:-10px!important;border-top:0!important;border-radius:0 0 14px 14px!important}
html body main ul.grid.grid-cols-6>li:nth-child(n+5):before{content:'';position:absolute;top:0;inset-inline:12px;height:1px;background:#e9ebee}
html body main ul.grid.grid-cols-6>li:nth-child(6){position:relative}
@media(min-width:768px){html body main ul.grid.grid-cols-6>li>p:first-of-type{font-size:20px!important}html body main ul.grid.grid-cols-6>li>p:last-of-type{font-size:15px!important}html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:first-of-type{font-size:20px!important}html body main ul.grid.grid-cols-6>li:nth-child(3)>p:first-of-type{font-size:23px!important}.four-owner-tagline{font-size:16px}}
/* Reference icon scale and centered connector with two orange endpoints. */
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>span{width:72px!important;height:72px!important;background:#ffe4cd!important;border:0!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2) svg{width:44px!important;height:44px!important;stroke-width:2.4!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2){padding-top:18px!important;min-height:188px!important;gap:8px!important}
html body main ul.grid.grid-cols-6>li:first-child:after{content:''!important;width:30px!important;height:2px!important;left:-20px!important;top:63px!important;background:#f47731!important;box-shadow:none!important;border-radius:0!important;z-index:3!important}
html body main ul.grid.grid-cols-6>li:first-child:before{content:'';position:absolute;left:-24px;top:59px;width:8px;height:8px;background:#f47731;border-radius:50%;box-shadow:30px 0 0 #f47731;z-index:4}
html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child:after{left:auto!important;right:-20px!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child:before{left:auto;right:-24px;box-shadow:-30px 0 0 #f47731}
html body main ul.grid.grid-cols-6>li:nth-child(3)>span{position:relative;width:62px!important;height:66px!important;background:#f47731!important;color:white!important;box-shadow:0 0 0 5px #ffdfc4!important}
html body main ul.grid.grid-cols-6>li:nth-child(3)>span svg{width:37px!important;height:37px!important;stroke-width:1.8!important}
/* Keep the complete QR heading on one line, with no clipping. */
html body main ul.grid.grid-cols-6>li:first-child>p:first-of-type{white-space:normal!important;font-size:clamp(10px,2.7vw,17px)!important;letter-spacing:-.15px!important;overflow:visible!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2){border-radius:16px!important;background:linear-gradient(135deg,#fff4e9,#ffebda)!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>span{background:#ffe3c9!important}
html body main ul.grid.grid-cols-6>li:first-child:after{top:65px!important;height:2px!important;width:34px!important;left:-22px!important}
html body main ul.grid.grid-cols-6>li:first-child:before{top:61px!important;left:-26px!important;width:10px!important;height:10px!important;box-shadow:34px 0 0 #f47731!important;border:1px solid #fff1e6;box-sizing:border-box}
html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child:after{left:auto!important;right:-22px!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child:before{left:auto!important;right:-26px!important;box-shadow:-34px 0 0 #f47731!important}
/* Scale measured from the supplied mobile reference. */
html body main ul.grid.grid-cols-6>li:nth-child(-n+2){min-height:0!important;padding:9px 7px 10px!important;gap:4px!important;border-radius:13px!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>span{width:58px!important;height:58px!important;margin-bottom:0!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2) svg{width:35px!important;height:35px!important;stroke-width:1.8!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:first-of-type{font-size:clamp(11px,3.65vw,18px)!important;line-height:1.5!important;white-space:normal!important;letter-spacing:-.2px!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:last-of-type{font-size:clamp(10px,3.05vw,15px)!important;line-height:1.5!important;min-height:3em!important}
html body main ul.grid.grid-cols-6>li:first-child:after{top:43px!important;width:27px!important;left:-18.5px!important}
html body main ul.grid.grid-cols-6>li:first-child:before{top:40px!important;left:-22px!important;width:8px!important;height:8px!important;box-shadow:27px 0 0 #f47731!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child:after{right:-18.5px!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child:before{right:-22px!important;box-shadow:-27px 0 0 #f47731!important}
html body main ul.grid.grid-cols-6>li:nth-child(3){min-height:66px!important;padding:9px 10px!important;grid-template-columns:54px minmax(0,1fr)!important;border-inline-start-width:4px!important}
html body main ul.grid.grid-cols-6>li:nth-child(3)>span{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;color:#f47731!important;width:50px!important;height:50px!important}
html body main ul.grid.grid-cols-6>li:nth-child(3)>span svg{width:48px!important;height:48px!important;overflow:visible!important}
html body main ul.grid.grid-cols-6>li:nth-child(3)>p:first-of-type{font-size:16px!important}
html body main ul.grid.grid-cols-6>li:nth-child(n+4){min-height:65px!important;padding:9px 10px!important;grid-template-columns:40px minmax(0,1fr)!important;column-gap:8px!important}
html body main ul.grid.grid-cols-6>li:nth-child(n+4)>span{width:38px!important;height:40px!important}
html body main ul.grid.grid-cols-6>li:nth-child(n+4)>p:first-of-type{font-size:14px!important;line-height:1.5!important}
html body main ul.grid.grid-cols-6>li:nth-child(n+3)>p:last-of-type{font-size:11px!important;line-height:1.5!important}
html body main ul.grid.grid-cols-6>li .four-owner-feature-icon{display:block!important;object-fit:contain!important;width:29px!important;height:29px!important;max-width:none!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2) .four-owner-feature-icon{width:36px!important;height:36px!important}
html body main ul.grid.grid-cols-6>li:nth-child(3) .four-owner-feature-icon{width:50px!important;height:50px!important}
html body main ul.grid.grid-cols-6>li>p:first-of-type{font-weight:900!important;-webkit-text-stroke:.15px currentColor;letter-spacing:-.2px!important;color:#101e33!important}
html body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:first-of-type{font-size:clamp(11px,3.8vw,19px)!important;font-weight:900!important}
html body main ul.grid.grid-cols-6>li:nth-child(3)>p:first-of-type{font-size:17px!important;font-weight:900!important}
/* One SVG guarantees identical endpoints, exact alignment and equal fill. */
html body main ul.grid.grid-cols-6>li:first-child:before{display:none!important;content:none!important;box-shadow:none!important;border:0!important}
html body main ul.grid.grid-cols-6>li:first-child:after{display:block!important;content:''!important;width:36px!important;height:8px!important;top:40px!important;left:-23px!important;right:auto!important;background:transparent url('/images/owner-icons/connector.svg') center/36px 8px no-repeat!important;box-shadow:none!important;border:0!important;border-radius:0!important;transform:none!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child:after{left:auto!important;right:-23px!important}
/* Reference hero: heavier headline with a soft edge wash, white at the centre. */
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div{background:#fff!important;border-radius:0!important;overflow:visible!important}
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>h1){background:radial-gradient(ellipse at left center,#fff1e5 0%,#fff8f2 22%,transparent 52%),radial-gradient(ellipse at right center,#fff3e9 0%,transparent 49%),#fff!important;border-radius:0!important;padding:12px 4px 15px!important}
html body main:has(ul.grid.grid-cols-6) h1+p{font-size:clamp(30px,8.4vw,50px)!important;font-weight:900!important;letter-spacing:-.65px!important;line-height:1.4!important;-webkit-text-stroke:.3px currentColor;color:#061b32!important}
html body main:has(ul.grid.grid-cols-6) .four-owner-online-accent{color:#ff6818!important}
html body main:has(ul.grid.grid-cols-6) .four-owner-tagline{font-size:clamp(11px,3.1vw,16px)!important;font-weight:400!important;line-height:1.65!important;color:#68717b!important;margin-top:2px!important}

/* Full viewport edge wash, independent of the content inset. */
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>h1){position:relative!important;isolation:isolate;background:transparent!important;overflow:visible!important}
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>h1)::before{content:"";position:absolute;inset-block:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at left center,#ffecdc 0%,#fff5eb 23%,transparent 55%),radial-gradient(ellipse at right center,#fff0e3 0%,#fff8f1 22%,transparent 54%),#fff}
html[lang^="ar"] body main:has(ul.grid.grid-cols-6) h1+p{font-weight:900!important;letter-spacing:-.8px!important;-webkit-text-stroke:.45px currentColor;font-synthesis:none;text-rendering:optimizeLegibility}

/* Remove the owner hero's extra space immediately below the fixed header. */
html body main .browse-owner-register{padding-top:0!important;margin-top:0!important}
html body main .browse-owner-register>section:first-child{padding-top:0!important;margin-top:0!important}
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>h1){padding-top:2px!important}

/* Reference hero rhythm: small header gap, compact headline and subtitle. */
html body main .browse-owner-register{padding-top:10px!important}
html body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>h1){padding-top:4px!important;padding-bottom:12px!important;gap:0!important}
html[lang^="ar"] body main:has(ul.grid.grid-cols-6) h1+p{font-size:clamp(30px,8.6vw,51px)!important;line-height:1.2!important;letter-spacing:-.6px!important;font-weight:900!important;-webkit-text-stroke:.3px currentColor;margin:0!important}
html body main:has(ul.grid.grid-cols-6) .four-owner-tagline{margin-top:3px!important;line-height:1.5!important}

/* English uses the same owner composition, with room for longer labels. */
html[lang^="en"] body main .browse-owner-register{direction:ltr!important;overflow-wrap:break-word}
html[lang^="en"] body main:has(ul.grid.grid-cols-6) h1+p{font-size:clamp(25px,6.8vw,43px)!important;font-weight:900!important;line-height:1.15!important;letter-spacing:-1px!important;-webkit-text-stroke:0;margin:0!important;max-width:100%!important;text-wrap:balance}
html[lang^="en"] body main:has(ul.grid.grid-cols-6) .four-owner-tagline{font-size:clamp(11px,2.9vw,16px)!important;line-height:1.5!important;margin-top:5px!important;max-width:100%!important;text-wrap:balance}
html[lang^="en"] body main ul.grid.grid-cols-6{direction:ltr!important;align-items:stretch!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li{direction:ltr!important;min-width:0!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li>p{white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;-webkit-text-stroke:0;letter-spacing:normal!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:nth-child(-n+2){height:auto!important;justify-content:flex-start!important;padding:9px 8px 10px!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:first-of-type{font-size:clamp(12px,3.35vw,18px)!important;line-height:1.3!important;min-height:2.6em!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;text-wrap:balance}
html[lang^="en"] body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:last-of-type{font-size:clamp(10.5px,2.9vw,14px)!important;line-height:1.5!important;text-align:center!important;min-height:3em!important;text-wrap:balance}
html[lang^="en"] body main ul.grid.grid-cols-6>li:nth-child(n+3)>p:first-of-type{font-size:clamp(13px,3.45vw,19px)!important;line-height:1.35!important;text-align:left!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:nth-child(n+3)>p:last-of-type{font-size:clamp(11px,2.9vw,14px)!important;line-height:1.5!important;text-align:left!important}
html[lang^="en"] body main ul.grid.grid-cols-6>li:nth-child(3){grid-template-columns:50px minmax(0,1fr)!important;min-height:66px!important}
html[lang^="en"] body main .browse-owner-register form{min-width:0!important}
html[lang^="en"] body main .browse-owner-register form button{white-space:normal!important;height:auto!important;min-height:44px!important}

/* Keep English card copy bounded, including the more specific first-card rule. */
html[lang^="en"] body main ul.grid.grid-cols-6>li:nth-child(-n+2)>p:first-of-type,html[lang^="en"] body main ul.grid.grid-cols-6>li:first-child>p:first-of-type{display:block!important;white-space:normal!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow-wrap:break-word!important;font-size:clamp(11px,3.1vw,17px)!important;line-height:1.35!important;min-height:2.7em!important;text-align:center!important}
html[lang^="en"] body main:has(ul.grid.grid-cols-6) .four-owner-tagline{white-space:nowrap!important;font-size:clamp(8px,2.6vw,15px)!important;letter-spacing:-.15px!important;text-wrap:nowrap!important;width:100%!important;max-width:none!important}
/* Readable secondary features on dark surfaces; keep peach highlights navy. */
html.dark body main ul.grid.grid-cols-6>li:nth-child(n+4),html.dark body main ul.grid.grid-cols-6>li:nth-child(n+4)>p:first-of-type{color:#f0f3f8!important}
html.dark body main ul.grid.grid-cols-6>li:nth-child(n+4)>p:last-of-type{color:#b7bec9!important}
html.dark body main ul.grid.grid-cols-6>li:nth-child(n+5):before{background:#414956!important}
/* Keep the complete owner hero on one continuous background in dark mode. */
html.dark body main .browse-owner-register>section:first-child{position:relative!important;isolation:isolate;overflow:visible!important;background:#fff!important}
html.dark body main .browse-owner-register>section:first-child:before{content:'';position:absolute;inset-block:-10px 0;left:50%;width:100vw;transform:translateX(-50%);background:#fff;z-index:-1;pointer-events:none}
html.dark body main .browse-owner-register>section:first-child>div{background:#fff!important}
/* A dark hero with a restrained warm glow, in both languages. */
html.dark body main .browse-owner-register>section:first-child{background:var(--color-background,#101214)!important}
html.dark body main .browse-owner-register>section:first-child:before{background:var(--color-background,#101214)!important}
html.dark body main .browse-owner-register>section:first-child>div{background:transparent!important}
html.dark body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>h1)::before{background:radial-gradient(ellipse at left center,rgba(244,119,49,.12) 0%,rgba(244,119,49,.035) 32%,transparent 62%),radial-gradient(ellipse at right center,rgba(244,119,49,.1) 0%,transparent 58%),var(--color-background,#101214)!important}
html.dark body main:has(ul.grid.grid-cols-6) h1+p{color:#f1f4f8!important}
html.dark body main:has(ul.grid.grid-cols-6) h1+p .four-owner-online-accent{color:#ff822e!important}
html.dark body main:has(ul.grid.grid-cols-6) .four-owner-tagline{color:#bac2ce!important}
html.dark body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>img){background:transparent!important}
/* Clip the image's baked white corner pixels to its actual rounded outline. */
html.dark body main:has(ul.grid.grid-cols-6) img[src*="owner-menu-qr-hero"]{border-radius:5% / 9.25%!important;clip-path:inset(0 round 5% / 9.25%)!important;background:transparent!important}
html.dark body main:has(ul.grid.grid-cols-6) section:first-child:has(img[src*="owner-menu-qr-hero"])>div>div:has(>img){border-radius:0!important;background:transparent!important}
