/* v108 — Switzer is self-hosted. The Fontshare API returned
   "Access to the Fontshare API has been temporarily restricted." on 1 Sep 2026,
   which silently dropped the body typeface to the device default (Roboto on
   Android) and changed every line break on the page. The four weights now ship
   with the site, so the body font no longer depends on a third party. */
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .35vw, 1rem);--text-base: clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);--text-2xl: clamp(2.1rem, 1.2rem + 2.5vw, 3.5rem);--text-3xl: clamp(2.6rem, 1rem + 4vw, 5rem);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: 1rem;--radius-full: 9999px;--transition-interactive: .2s cubic-bezier(.16,1,.3,1);--content: 33rem;--font-display: "Instrument Serif", Georgia, serif;--font-body: "Switzer", "Inter", system-ui, sans-serif}:root,[data-theme=dark]{--color-bg: #080a14;--color-surface: #0d1020;--color-surface-2: #141829;--color-border: #272c42;--color-border-soft: #1a1e2e;--color-text: #f7efe3;--color-text-muted: #a7a397;--color-text-faint: #74716a;--color-accent: #c8452f;--color-accent-soft: #f0a173;--color-coral: #d9663f;--color-wine: #1b1c38;--color-on-accent: #fff3ea;--scrim-1: rgba(8,10,20,.1);--scrim-2: rgba(8,10,20,.96);--glow: rgba(200,69,47,.26);--glow-rose: rgba(240,161,115,.14);--img-bright: 1.02;--grain-opacity: .055;--grain-blend: overlay}[data-theme=light]{--color-bg: #f8f1e6;--color-surface: #fffbf4;--color-surface-2: #f2e8d9;--color-border: #ddcfba;--color-border-soft: #e9dcc9;--color-text: #1d1710;--color-text-muted: #6f6353;--color-text-faint: #9b8f7d;--color-accent: #a25a10;--color-accent-soft: #8a4a0c;--color-coral: #b93f28;--color-wine: #7a2a22;--color-on-accent: #fff8ee;--glow-rose: rgba(185,63,40,.1);--grain-opacity: .035;--grain-blend: multiply;--scrim-1: rgba(248,241,230,0);--scrim-2: rgba(248,241,230,.97);--glow: rgba(162,90,16,.1);--img-bright: .95}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:var(--space-20)}body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);overflow-x:hidden}.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");animation:grainshift 7s steps(6) infinite}@keyframes grainshift{0%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.grain{animation:none}}img,svg,video{display:block;max-width:100%;height:auto}ul[role=list],ol[role=list]{list-style:none}input,button{font:inherit;color:inherit}button{cursor:pointer;background:none;border:none}h1,h2,h3{text-wrap:balance;line-height:1.05;font-weight:400}p{text-wrap:pretty}a{color:inherit}::selection{background:var(--color-accent);color:var(--color-on-accent)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}h1{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:-.025em;line-height:.96}h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.022em;line-height:.98}h1 em,h2 em{letter-spacing:-.01em}h1 em,h2 em,.closer em{font-style:italic;color:var(--color-accent)}h3{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em}.eyebrow,.kicker,.flabel,.col-title{font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted)}.kicker{margin-bottom:var(--space-5);color:var(--color-accent-soft)}.lede{font-size:var(--text-lg);color:var(--color-text);opacity:.92;margin-top:var(--space-5);max-width:30ch}.body{font-size:var(--text-base);color:var(--color-text-muted);margin-top:var(--space-5);max-width:46ch}.body em{font-family:var(--font-display);font-style:italic;font-size:1.12em;color:var(--color-text)}.body.dim{color:var(--color-text-faint)}.lede-2{font-size:var(--text-sm);color:var(--color-text-dim);margin-top:var(--space-3);max-width:32ch;line-height:1.55}.fineprint{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-4);letter-spacing:.01em}.link{color:var(--color-accent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--color-accent) 45%,transparent)}.link:hover{border-bottom-color:var(--color-accent)}.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--space-5);position:relative;z-index:2}.section{padding-block:clamp(var(--space-16),14vw,var(--space-24));position:relative;overflow:hidden}.site-header{position:fixed;inset-inline:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);transition:background var(--transition-interactive),backdrop-filter var(--transition-interactive),border-color var(--transition-interactive);border-bottom:1px solid transparent}.site-header{will-change:transform;transition:background var(--transition-interactive),backdrop-filter var(--transition-interactive),border-color var(--transition-interactive),transform .34s cubic-bezier(.16,1,.3,1)}.site-header.is-away{transform:translateY(-115%)}.site-header.is-away .menu-panel{transform:none}/* v215 - the hero headline is the largest type on the site. Section headlines step down below it, and the closer is the same size on every page it appears on. */h2.closer{font-size:38px!important;line-height:40.3px!important}h2.closer em{font-size:35px!important}.site-header.is-stuck{background:color-mix(in oklab,var(--color-bg) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--color-border-soft)}.brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text);text-shadow:0 1px 3px rgba(6,4,10,.92),0 2px 16px rgba(6,4,10,.75)}.brand-mark{width:26px;height:26px;color:var(--color-accent);flex:none}.brand-word{font-family:var(--font-display);font-size:1.4rem;letter-spacing:-.01em;line-height:1}.brand-word-thin{font-style:italic;color:var(--color-accent);margin-left:.06em}.header-actions{display:flex;align-items:center;gap:var(--space-2)}.theme-toggle{width:38px;height:38px;border-radius:var(--radius-full);display:grid;place-items:center;color:var(--color-text-muted);border:1px solid var(--color-border-soft)}.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-border)}.site-header.is-solid{background:color-mix(in oklab,var(--color-bg) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--color-border-soft)}.menu-btn{width:38px;height:38px;border-radius:var(--radius-full);display:grid;place-items:center;color:var(--color-text-muted);border:1px solid var(--color-border-soft)}.menu-btn svg{width:18px;height:18px}.menu-btn:hover,.menu-btn[aria-expanded=true]{color:var(--color-accent);border-color:var(--color-border)}.menu-panel{position:absolute;top:calc(100% - var(--space-2));right:var(--space-5);min-width:13rem;display:flex;flex-direction:column;padding:var(--space-2);background:color-mix(in oklab,var(--color-surface) 97%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);box-shadow:0 24px 70px -20px #0009;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .22s ease,transform .22s ease}.menu-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.menu-panel a{padding:.42rem var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color .2s ease,background .2s ease}.menu-panel a:hover{color:var(--color-text);background:color-mix(in oklab,var(--color-accent) 12%,transparent)}.menu-panel a[aria-current=page]{color:var(--color-accent)}.menu-panel .menu-cta{margin-top:var(--space-1, .25rem);padding-top:var(--space-3);border-top:1px solid var(--color-border-soft);border-radius:0;color:var(--color-accent);font-family:var(--font-display);font-size:1.05rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none;font-size:var(--text-sm);font-weight:500;letter-spacing:.01em;padding:var(--space-4) var(--space-6);border-radius:var(--radius-full);border:1px solid transparent;transition:transform var(--transition-interactive),background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive)}.btn-sm{padding:var(--space-2) var(--space-4)}.btn-primary{background:var(--color-accent);color:var(--color-on-accent);box-shadow:0 10px 40px var(--glow),0 2px #ffffff2e inset}.btn-primary:hover{background:#a5341f;transform:translateY(-2px);box-shadow:0 16px 54px var(--glow)}.btn-ghost{border-color:var(--color-border);color:var(--color-text);background:color-mix(in oklab,var(--color-surface) 55%,transparent)}.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}.cta-row{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-8)}@media(min-width:30rem){.cta-row{flex-direction:row}.cta-row .btn{flex:1}}.cta-row-quiet{flex-direction:row;align-items:center;gap:var(--space-5);margin-top:var(--space-6);flex-wrap:wrap}.cta-row-quiet .btn{flex:none}.cta-row-quiet .btn-sm{padding:.6rem 1.15rem;font-size:var(--text-xs);letter-spacing:.04em;box-shadow:0 6px 26px #c8452f42}.cta-row-quiet .btn-sm:hover{transform:translateY(-1px);box-shadow:0 10px 32px #c8452f57}.link-quiet{font-size:var(--text-xs);letter-spacing:.04em;color:#f6efe4c7;text-decoration:none;border-bottom:1px solid rgba(246,239,228,.32);padding-bottom:2px;transition:color .25s ease,border-color .25s ease}.link-quiet:hover{color:var(--color-accent-soft);border-color:var(--color-accent-soft)}.cta-stack{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-6)}.hero-code{display:grid;justify-items:start;gap:var(--space-2)}.hero-code input{width:9.25rem;padding:.12rem var(--space-3);background:#0a081075;border:1px solid rgba(246,239,228,.34);border-radius:.5rem;color:#f6efe4;font-size:.8125rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;text-align:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:border-color var(--transition-interactive),background var(--transition-interactive)}.hero-code input::placeholder{color:#f6efe46b;letter-spacing:.14em}.hero-code input:focus{outline:none;border-color:var(--color-accent-soft);background:#0a0810a8}.hero-code-label{width:9.25rem;text-align:center;font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#f6efe4cc;text-shadow:0 1px 16px rgba(20,2,8,.9)}.hero-code-msg{font-size:var(--text-xs);min-height:1.1em;color:var(--color-accent-soft);max-width:26ch}.hero-code-msg.is-err{color:#ffb4a2}.btn-tiny{padding:.48rem .95rem;font-size:.72rem;font-weight:500;letter-spacing:.045em;text-transform:uppercase;box-shadow:0 6px 24px #c8452f47}.btn-tiny:hover{transform:translateY(-1px);box-shadow:0 10px 30px #c8452f5c}.link-arrow{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--space-8);font-family:var(--font-display);font-size:1.35rem;color:var(--color-accent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--color-accent) 40%,transparent);padding-bottom:3px;transition:gap .25s ease,border-color .25s ease}.link-arrow:hover{gap:.85rem;border-color:var(--color-accent)}.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(5.5rem,13vh,7.5rem);isolation:isolate}.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}.hero-media picture{display:block;width:100%;height:100%}.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(var(--img-bright)) saturate(1.06) contrast(1.02)}.kenburns{animation:kenburns 40s ease-in-out infinite alternate;transform-origin:50% 46%}@keyframes kenburns{0%{transform:scale(1.002)}to{transform:scale(1.022)}}@media(prefers-reduced-motion:reduce){.kenburns{animation:none}}.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(80% 40% at 50% 20%,rgba(226,116,42,.26) 0%,transparent 72%),radial-gradient(70% 40% at 24% 74%,rgba(196,74,44,.2) 0%,transparent 70%);mix-blend-mode:screen}[data-theme=light] .hero:before{mix-blend-mode:normal;opacity:.5}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#080a1494,#080a1438 15%,#0a080e33 27%,#0a080e4d 40%,#0a0a1442 56%,#090d1c33,#080b1852 84%,#080a146b)}[data-theme=light] .hero-media:after{background:linear-gradient(to bottom,#f8f1e6c2,#f8f1e608 14%,#0a03061a 32%,#09030552 48%,#0702047a 60%,#06020494,#0602048f 88%,#080a14a3)}@media(min-aspect-ratio:3/5)and (max-aspect-ratio:1/1){.hero{justify-content:center;padding-top:6rem;padding-bottom:clamp(4rem,12vh,7rem)}}@media(min-aspect-ratio:1/1){.hero{padding-bottom:clamp(6rem,14vh,9rem)}.hero-media img{object-position:50% 50%}.hero .hero-body{margin-inline:clamp(2.5rem,7vw,7rem) auto;max-width:30rem}.hero-media:after{background:linear-gradient(to right,#0c050275,#0c05025e 30%,#1007032e 48%,#1208030d 64%,#12080300 76%),linear-gradient(to bottom,#0e06024d,#0e060200 26%,#0a040200 70%,#0805064d)}[data-theme=light] .hero-media:after{background:linear-gradient(to right,#0c0502e0,#0c0502bd 26%,#1007036b 46%,#1208031f 62%,#12080300 74%),linear-gradient(to bottom,#f8f1e685,#f8f1e600 22%,#0a040200 70%,#08050670)}}.hero .eyebrow,.hero h1,.hero .fineprint{color:#f6efe4}.hero .lede-2{color:#f6efe4b8;text-shadow:0 1px 16px rgba(8,10,20,.8)}.hero h1 em,[data-theme=light] .hero h1 em{color:#ffbb90}.hero .eyebrow{color:#fbf3e7;font-weight:600;font-size:clamp(.8125rem,.78rem + .22vw,.9375rem);letter-spacing:.2em;text-shadow:0 1px 3px rgba(6,4,10,.92),0 2px 18px rgba(6,4,10,.78)}.hero .fineprint{color:#f6efe4a8}[data-theme=light] .hero .btn-ghost{border-color:#f6efe466;color:#f6efe4;background:#0a080647}[data-theme=light] .hero .btn-ghost:hover{border-color:#f0bd78;color:#f0bd78}.hero-body{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--space-5)}.hero h1{margin-top:1.75rem;font-size:clamp(2.85rem,1.1rem + 4.4vw,5.5rem);text-shadow:0 2px 40px rgba(8,10,20,.6)}.hero .lede{font-family:var(--font-body);font-size:clamp(.875rem,.85rem + .28vw,1rem);color:#f6efe4cc;line-height:1.5;letter-spacing:.004em;max-width:27ch;opacity:.93;text-shadow:0 1px 22px rgba(20,2,8,.9)}.hero h1{text-shadow:0 2px 44px rgba(20,2,8,.72)}.hero .lede-sub{margin-top:var(--space-3);font-family:var(--font-body);font-size:clamp(.875rem,.85rem + .28vw,1rem);line-height:1.5;letter-spacing:.004em;max-width:27ch;color:#f6efe4cc;text-shadow:0 1px 22px rgba(20,2,8,.9)}[data-theme=light] .hero .lede-2{color:#f6efe4b8}.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2)}.pulse{width:7px;height:7px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 0 var(--color-accent);animation:pulse 2.4s infinite;flex:none}@keyframes pulse{0%{box-shadow:0 0 color-mix(in oklab,var(--color-accent) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}to{box-shadow:0 0 0 0 transparent}}.scroll-cue{position:absolute;bottom:var(--space-5);left:50%;translate:-50% 0;display:grid;place-items:center;width:4.5rem;height:2.5rem;color:var(--color-accent-soft);opacity:.9;transition:opacity .25s ease,color .25s ease}@media(max-width:47.99rem){.hero .cta-stack{margin-top:4.5rem;gap:var(--space-2)}}@media(max-width:47.99rem)and (min-aspect-ratio:1/1){.hero .cta-stack{max-width:30rem}}.scroll-cue svg{width:3.5rem;height:auto;filter:drop-shadow(0 2px 10px rgba(20,2,6,.75));animation:cue 2.4s cubic-bezier(.45,0,.55,1) infinite}.scroll-cue:hover{opacity:1;color:var(--color-accent)}@keyframes cue{0%,to{transform:translateY(-3px)}50%{transform:translateY(5px)}}@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}.marquee{border-block:1px solid var(--color-border-soft);overflow:hidden;padding-block:var(--space-4);background:linear-gradient(90deg,var(--color-surface) 0%,color-mix(in oklab,var(--color-wine) 55%,var(--color-surface)) 50%,var(--color-surface) 100%)}.marquee-track{display:flex;align-items:center;gap:var(--space-4);width:max-content;animation:slide 34s linear infinite}.marquee-track span{font-family:var(--font-display);font-style:italic;font-size:1.4rem;white-space:nowrap;color:color-mix(in oklab,var(--color-text) 78%,transparent)}.marquee-track i{color:var(--color-accent);font-style:normal}@keyframes slide{to{transform:translate(-50%)}}.section-bg{position:absolute;inset:0;z-index:0}.section-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.1) contrast(1.05)}[data-theme=light] .section-bg img{filter:brightness(1.05) saturate(.7) opacity(.35)}.section-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 55%,var(--glow) 0%,transparent 72%),linear-gradient(to bottom,var(--color-bg) 0%,color-mix(in oklab,var(--color-bg) 55%,transparent) 42%,var(--color-bg) 100%)}.section-bg-open img{filter:brightness(1.02) saturate(1.06) contrast(1.02)}[data-theme=light] .section-bg-open img{filter:brightness(.95) saturate(1.08) contrast(1.03)}.section-bg-open:after{background:radial-gradient(70% 50% at 50% 60%,rgba(196,74,44,.1) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.42) 22%,rgba(8,10,20,.52) 60%,var(--color-bg) 100%)}.section-bg-dusk img{filter:brightness(.8) saturate(1.14) contrast(1.03)}[data-theme=light] .section-bg-dusk img{filter:brightness(.95) saturate(1.1) contrast(1.03)}.section-bg-dusk:after{background:radial-gradient(70% 50% at 50% 60%,rgba(196,74,44,.06) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.46) 20%,rgba(8,10,20,.5) 62%,var(--color-bg) 100%)}.section-bg-faint img{filter:brightness(.3) saturate(.9)}[data-theme=light] .section-bg-faint img{filter:brightness(1.1) saturate(.6) opacity(.18)}.break{position:relative;height:74svh;min-height:22rem;overflow:hidden;display:grid;place-items:end center;isolation:isolate;background:#080a14}.break-tall{height:56svh;min-height:17rem}.break-tall .break-img{object-position:50% 34%}.break-img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2;filter:brightness(.9) saturate(1.1) contrast(1.03);will-change:transform}[data-theme=light] .break-img{filter:brightness(.82) saturate(1.14) contrast(1.06)}.break:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(65% 45% at 50% 78%,rgba(196,74,44,.22) 0%,transparent 70%),linear-gradient(to bottom,#080a14 0%,transparent 26%,rgba(8,10,20,.55) 62%,rgba(8,10,20,.96) 100%)}.break-plain .break-img{filter:brightness(1.04) saturate(1.06) contrast(1.01)}[data-theme=light] .break-plain .break-img{filter:brightness(.96) saturate(1.1) contrast(1.03)}.break-plain:after{background:radial-gradient(65% 45% at 50% 78%,rgba(196,74,44,.1) 0%,transparent 70%),linear-gradient(to bottom,#080a14 0%,transparent 20%,transparent 74%,rgba(8,10,20,.82) 100%)}.break-quote{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.02;letter-spacing:-.022em;color:#f7efe3;text-align:center;text-wrap:balance;padding:0 var(--space-6) clamp(var(--space-10),9vw,var(--space-20));max-width:26ch;text-shadow:0 2px 36px rgba(8,10,20,.7);opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}.break.is-in .break-quote{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.break-quote{opacity:1;transform:none}}.break-quote em{font-style:italic;color:var(--color-accent-soft)}.break-lead:before{content:"";position:absolute;inset:-85% -14%;z-index:-1;-webkit-mask-image:radial-gradient(ellipse at center,#000 26%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.14) 66%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 26%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.14) 66%,transparent 80%)}@supports (backdrop-filter: brightness(.4)){.break-lead:before{-webkit-backdrop-filter:brightness(.3) saturate(.82);backdrop-filter:brightness(.3) saturate(.82)}}@supports not (backdrop-filter: brightness(.4)){.break-lead:before{background:#060810b8}}.break-lead{position:absolute;top:11%;left:0;right:0;z-index:1;font-size:var(--text-sm);line-height:1.6;text-align:center;text-wrap:balance;max-width:34ch;margin-inline:auto;color:#f7efe3eb;padding:0 var(--space-6);text-shadow:0 1px 3px rgba(8,10,20,.95),0 2px 26px rgba(8,10,20,.9);opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}.break.is-in .break-lead{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.break-lead{opacity:1;transform:none}}[data-theme=light] .break-quote{color:#fdf6ea}[data-theme=light] .break-quote em{color:#f0a173}.pull{font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;color:var(--color-text);margin-top:var(--space-10);padding-left:var(--space-5);border-left:2px solid var(--color-accent);max-width:26ch}.ticks{margin-top:var(--space-8);display:grid;gap:var(--space-3)}.ticks li{position:relative;padding-left:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}.ticks li:before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--color-accent)}.section-rules{background:var(--color-surface)}.section-rules:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 100% 0%,var(--glow-rose) 0%,transparent 65%)}.cols{display:grid;gap:var(--space-10);margin-top:var(--space-10)}.col-title{display:block;padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-soft);margin-bottom:var(--space-4)}.col ul{display:grid;gap:var(--space-3)}.col li{font-size:var(--text-sm);line-height:1.45}.col-out .col-title{color:var(--color-text-faint)}.col-out li{color:var(--color-text-faint);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--color-coral) 70%,transparent);text-decoration-thickness:1px}.col-kept .col-title{color:var(--color-accent)}.col-kept li{color:var(--color-text);position:relative;padding-left:var(--space-5)}.col-kept li:before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;border:1px solid var(--color-accent);background:color-mix(in oklab,var(--color-accent) 25%,transparent)}.section-rules .body{margin-top:var(--space-10)}@media(min-width:40rem){.cols{grid-template-columns:1fr 1fr;gap:var(--space-8)}}.filter-card{margin-top:var(--space-8);padding:var(--space-6) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);display:grid;gap:var(--space-5)}.fgroup{display:grid;gap:var(--space-3)}.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.chip{font-size:var(--text-xs);letter-spacing:.04em;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);white-space:nowrap;transition:all var(--transition-interactive)}.chip:hover{color:var(--color-text);border-color:var(--color-text-faint)}.chip.is-on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);font-weight:500}.filter-out{display:flex;align-items:center;gap:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-border-soft)}.sentence{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.sentence b{color:var(--color-text);font-weight:500}.radar{position:relative;width:54px;height:54px;flex:none;display:grid;place-items:center}.radar .dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent)}.radar .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--color-accent);opacity:0;animation:radar 3s ease-out infinite}.radar .r2{animation-delay:1s}.radar .r3{animation-delay:2s}@keyframes radar{0%{transform:scale(.15);opacity:.7}to{transform:scale(1);opacity:0}}.section-steps{background:var(--color-surface)}.steps{display:grid;gap:var(--space-8);margin-top:var(--space-10);counter-reset:s}.steps li{display:grid;gap:var(--space-2);padding-top:var(--space-5);border-top:1px solid var(--color-border-soft)}.steps .num{font-family:var(--font-display);font-size:1.5rem;color:var(--color-accent);line-height:1}.steps p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:44ch}.section-price{background:linear-gradient(180deg,var(--color-bg) 0%,color-mix(in oklab,var(--color-wine) 32%,var(--color-bg)) 100%)}.price-card{margin-top:var(--space-8);padding:var(--space-8) var(--space-6);border:1px solid color-mix(in oklab,var(--color-accent) 26%,var(--color-border));border-radius:var(--radius-lg);background:radial-gradient(120% 80% at 50% 0%,var(--glow) 0%,transparent 70%),var(--color-surface);box-shadow:0 30px 90px -40px var(--glow);display:grid;gap:var(--space-6)}.price-head{display:flex;align-items:baseline;gap:var(--space-4)}.price-three{display:grid;gap:var(--space-5)}.price-opt{display:flex;align-items:baseline;gap:var(--space-4)}.price-or{display:flex;align-items:center;gap:var(--space-4)}.price-or:before,.price-or:after{content:"";height:1px;flex:1;background:var(--color-border)}.price-or span{font-family:var(--font-display);font-style:italic;font-size:var(--text-base);color:var(--color-accent-soft)}.price{font-family:var(--font-display);font-size:clamp(2.5rem,11vw,3.6rem);line-height:.9;color:var(--color-text)}.price-unit{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);line-height:1.5}.price-card ul{display:grid;gap:var(--space-3)}.price-card li{position:relative;padding-left:var(--space-6);font-size:var(--text-sm);color:var(--color-text)}.price-card li:before{content:"";position:absolute;left:0;top:.45em;width:10px;height:6px;border-left:1.5px solid var(--color-accent);border-bottom:1.5px solid var(--color-accent);transform:rotate(-45deg)}.price-note{font-size:var(--text-xs);color:var(--color-text-faint);padding-top:var(--space-4);border-top:1px solid var(--color-border-soft)}.fig{margin-top:var(--space-8);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border-soft)}.fig img{width:100%;filter:brightness(.92) saturate(1.12)}.renew-demo{margin-top:var(--space-8);padding:var(--space-5);border:1px dashed var(--color-border);border-radius:var(--radius-lg);display:grid;gap:var(--space-4);justify-items:start;background:color-mix(in oklab,var(--color-surface) 60%,transparent)}.renew-label{font-size:var(--text-sm);color:var(--color-text-muted)}.renew-label b{color:var(--color-coral);font-weight:500}.renew-demo.is-done .renew-label b{color:var(--color-accent)}.section-safety{background:var(--color-surface)}.section-enter:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 45% at 50% 100%,var(--glow) 0%,transparent 70%);mix-blend-mode:screen}[data-theme=light] .section-enter:before{mix-blend-mode:normal;opacity:.45}.ticks.two li{font-size:var(--text-sm)}.section-enter{padding-top:clamp(.375rem,1.5vw,1.25rem);padding-bottom:clamp(3rem,6vw,5rem)}.closer{font-size:var(--text-3xl)}.enter-form{margin-top:8.5rem;display:grid;gap:var(--space-3)}.enter-form .field-row{max-width:17.5rem}.enter-form .field-row input{padding:.5rem .875rem;font-size:var(--text-xs)}.enter-form .field-row .btn{padding:.5rem 1.05rem;font-size:var(--text-xs)}.enter-form label{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted)}.field-row{display:flex;gap:var(--space-2)}.field-row input{flex:1;min-width:0;padding:var(--space-4) var(--space-5);background:color-mix(in oklab,var(--color-surface) 80%,transparent);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;transition:border-color var(--transition-interactive),background var(--transition-interactive)}.field-row input::placeholder{color:var(--color-text-faint);letter-spacing:.12em}.field-row input:focus{border-color:var(--color-accent);background:var(--color-surface)}.form-msg{font-size:var(--text-xs);min-height:1.2em;color:var(--color-accent)}.form-msg.is-err{color:var(--color-coral)}.section-enter .body{margin-top:var(--space-8)}.enter-note{text-align:center;color:#f7efe3;font-weight:500;text-shadow:0 1px 3px rgba(8,6,10,.92),0 2px 22px rgba(8,6,10,.85)}.wa-link{display:grid;justify-items:center;gap:var(--space-3);margin:var(--space-6) auto 0;width:max-content;text-decoration:none;color:var(--color-text)}.wa-badge{display:grid;place-items:center;width:3.25rem;height:3.25rem;aspect-ratio:1;flex:none;border-radius:999px;background:#c25c1c;box-shadow:0 6px 22px #c25c1c52;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive)}.wa-badge svg{width:2.05rem;height:2.05rem}.wa-link:hover .wa-badge{transform:translateY(-2px);box-shadow:0 10px 28px #c25c1c75}.wa-words{font-size:var(--text-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim);text-align:center}.wa-link:hover .wa-words{color:var(--color-text)}.site-footer{padding:var(--space-16) var(--space-5) 4.5rem;text-align:center;border-top:1px solid var(--color-border-soft);background:var(--color-bg)}.footer-mark{width:30px;height:30px;margin-inline:auto;color:var(--color-accent)}.footer-word{font-family:var(--font-display);font-size:var(--text-xl);margin-top:var(--space-4);letter-spacing:-.01em}.footer-line{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2);letter-spacing:.06em}.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-top:var(--space-8)}.footer-nav a{font-size:var(--text-xs);color:var(--color-text-muted);text-decoration:none;letter-spacing:.06em}.footer-nav a:hover{color:var(--color-accent)}.footer-fine{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-8)}.dock{position:fixed;inset-inline:0;bottom:0;z-index:40;display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:color-mix(in oklab,var(--color-bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--color-border-soft);transform:translateY(120%);transition:transform .32s cubic-bezier(.16,1,.3,1)}.dock.is-up{transform:translateY(0)}.btn-dock{flex:1;padding:var(--space-3) var(--space-2);white-space:nowrap;font-size:var(--text-xs);letter-spacing:.03em}.reveal>*{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}.reveal.is-in>*{opacity:1;transform:none}.reveal.is-in>*:nth-child(2){transition-delay:80ms}.reveal.is-in>*:nth-child(3){transition-delay:.15s}.reveal.is-in>*:nth-child(4){transition-delay:.21s}.reveal.is-in>*:nth-child(5){transition-delay:.26s}.reveal.is-in>*:nth-child(6){transition-delay:.3s}@media(prefers-reduced-motion:reduce){.reveal>*{opacity:1;transform:none}}.page-head{padding:calc(var(--space-24) + 2rem) 0 var(--space-12);position:relative;overflow:hidden}.page-head:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 50% 0%,var(--glow) 0%,transparent 70%);mix-blend-mode:screen}[data-theme=light] .page-head:before{mix-blend-mode:normal;opacity:.5}.page-title{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.02;letter-spacing:-.02em;margin-top:var(--space-4)}.page-title em{color:var(--color-accent)}.page-head .lede{margin-top:var(--space-5)}.jump{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}.jump a{font-size:var(--text-xs);letter-spacing:.04em;text-decoration:none;padding:.4rem .8rem;border-radius:var(--radius-full);border:1px solid var(--color-border-soft);color:var(--color-text-muted);transition:color .2s ease,border-color .2s ease}.jump a:hover{color:var(--color-accent);border-color:var(--color-accent)}.section-short{background:var(--color-surface)}.four{display:grid;gap:var(--space-6);margin-top:var(--space-8)}.four li{display:grid;gap:var(--space-2);padding-left:var(--space-5);border-left:1px solid var(--color-border)}.four-k{font-family:var(--font-display);font-size:1.4rem;line-height:1.15;color:var(--color-text)}.four-v{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65}.perks{display:grid;gap:0;margin-top:clamp(var(--space-10),8vw,var(--space-12))}.perks li{display:grid;gap:var(--space-1);padding-block:.625rem;border-top:1px solid var(--color-border-soft)}.perks li:last-child{border-bottom:1px solid var(--color-border-soft)}.perk-k{font-family:var(--font-display);font-size:1.125rem;line-height:1.2;color:var(--color-text)}.perk-v{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.45;max-width:44ch}@media(min-width:34rem){.perks li{grid-template-columns:10rem 1fr;gap:var(--space-5);align-items:baseline}}.rule-gold{display:grid;place-items:center;margin-block:clamp(1rem,4.6vw,1.65rem)}.rule-gold .flourish{width:min(20rem,82%);height:auto;overflow:visible;filter:drop-shadow(0 0 8px rgba(214,172,96,.2))}.section-invite{padding-bottom:clamp(var(--space-10),7vw,var(--space-12))}.section-diff{padding-block:clamp(var(--space-8),6vw,var(--space-10))}.section-short{padding-top:clamp(var(--space-10),7vw,var(--space-12))}.break-bare .break-img{filter:brightness(.78) saturate(1.04)}[data-theme=light] .break-bare .break-img{filter:brightness(.84) saturate(1.04)}.break-bare:after{display:none}.break-bare .break-img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%)}@media(min-width:60rem){.dock{display:none}.four{grid-template-columns:1fr 1fr;gap:var(--space-8) var(--space-6)}.site-footer{padding-bottom:var(--space-16)}}.page-hiw .section:not(.section-enter){padding-block:clamp(var(--space-8),7vw,var(--space-12))}.page-hiw .page-head{padding:calc(var(--space-16) + 1.5rem) 0 var(--space-8)}.page-hiw .jump,.page-hiw .ticks,.page-hiw .pull{margin-top:var(--space-6)}.page-hiw .cols{margin-top:var(--space-6);gap:var(--space-6)}.page-hiw .section-rules .body,.page-hiw .filter-card{margin-top:var(--space-6)}.page-hiw .steps{margin-top:var(--space-6);gap:var(--space-6)}.page-hiw .renew-demo,.page-hiw .price-card{margin-top:var(--space-6)}.hero .eyebrow{color:#ff9a58;font-weight:600;font-size:clamp(.6875rem,.62rem + .3vw,.875rem);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 3px rgba(6,4,10,.9),0 2px 18px rgba(6,4,10,.7)}.hero h1{margin-top:1.05rem;font-size:clamp(2.5rem,.9rem + 4.15vw,4.65rem);line-height:.93;letter-spacing:-.022em;color:#ededed;text-wrap:nowrap;text-shadow:0 2px 40px rgba(12,4,6,.7)}.hero h1 em{color:#f09050;font-style:italic}.hero .lede{margin-top:1.45rem;font-family:var(--font-body);font-size:clamp(.9375rem,.9rem + .28vw,1.125rem);line-height:1.55;letter-spacing:0;color:#ffffffde;opacity:1;max-width:46ch;text-shadow:0 1px 20px rgba(14,2,6,.85)}.hero-rule{width:min(25.5rem,100%);height:0;border:0;border-top:1px solid rgba(255,255,255,.2);margin-top:1.85rem}.hero-trust{display:flex;align-items:flex-start;gap:clamp(.9rem,2.6vw,1.75rem);margin-top:1.35rem}.hero-trust .trust-item{display:flex;align-items:flex-start;gap:.7rem;font-size:clamp(.8125rem,.78rem + .2vw,.9375rem);line-height:1.42;color:#ffffffe6;max-width:20ch;text-shadow:0 1px 18px rgba(14,2,6,.85)}.hero-trust .trust-item+.trust-item{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(.9rem,2.6vw,1.75rem)}.hero-trust .trust-icon{width:26px;height:26px;flex:none;margin-top:.05rem;color:#f0894a;filter:drop-shadow(0 1px 10px rgba(14,2,6,.7))}.hero .cta-stack{margin-top:2.1rem}.scroll-cue{color:#f0894a}@media(min-aspect-ratio:1/1){.hero{justify-content:flex-start;padding-top:clamp(3.5rem,18vh,13rem);padding-bottom:1.5rem}.hero .hero-body{margin-inline:clamp(.75rem,1.6vw,1.5rem) auto;max-width:34rem}.hero-media img{object-position:50% 50%}.hero-media:after{background:linear-gradient(to right,#060408c2,#06040899 20%,#08050857 38%,#0a06081f 55%,#0a060800 70%),linear-gradient(to bottom,#08050857,#08050800 22% 74%,#06040857)}}@media(max-aspect-ratio:1/1){.hero{justify-content:center;padding-top:5rem;padding-bottom:clamp(3rem,8vh,5.5rem)}.hero-media img{object-position:60% 50%}.hero-media:after{background:linear-gradient(to bottom,#06060e85,#06060e1a,#08060c29 32%,#08060c66,#07050a99 68%,#06040ab3),linear-gradient(to right,#04040880,#04040838 34%,#04040800 64%)}.hero .cta-stack{margin-top:2.1rem;align-items:stretch}.hero .hero-code{justify-items:center}.hero .hero-body{margin-top:clamp(0px,15vh,150px)}}@media(min-aspect-ratio:1/1){.hero .hero-code input,.hero .hero-code-label{width:11rem}}@media(min-aspect-ratio:1/1)and (max-height:800px){.hero{padding-top:clamp(3rem,12vh,7rem)}.hero h1{font-size:clamp(2.2rem,.8rem + 3.4vw,3.9rem)}.hero .lede{margin-top:1.1rem}.hero-rule{margin-top:1.35rem}.hero-trust{margin-top:1rem}.hero .cta-stack{margin-top:1.5rem}}@media(max-aspect-ratio:1/1){.hero .eyebrow{display:block;line-height:1.55}.hero .eyebrow .eyebrow-dot{display:none}.hero .eyebrow .eyebrow-l2{display:block}}.section-bg-hands img{filter:brightness(.72) saturate(1.08) contrast(1.02);object-position:50% 40%}[data-theme=light] .section-bg-hands img{filter:brightness(.86) saturate(1.04)}.section-bg-hands:after{background:radial-gradient(70% 50% at 50% 55%,rgba(196,74,44,.07) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.42) 18%,rgba(8,10,20,.48) 58%,var(--color-bg) 100%)}.section-enter .break-lead{position:relative;top:auto;left:auto;right:auto;margin:var(--space-5) auto 0;padding:0;max-width:34ch}.section-enter .break-quote{margin:var(--space-6) auto 0;padding:0;max-width:22ch;font-size:var(--text-3xl)}.section-enter .wrap.is-in .break-lead,.section-enter .wrap.is-in .break-quote{opacity:1;transform:none}.section-enter .enter-form{margin-top:clamp(2.25rem,6vw,3.5rem)}@media(max-aspect-ratio:1/1){.hero h1{font-size:clamp(2.25rem,1.2rem + 2.8vw,3.6rem)}}.section-bg-hands img{filter:brightness(.84) saturate(1.05) contrast(1.06);object-position:50% 44%}.section-bg-hands:after{background:radial-gradient(70% 50% at 50% 55%,rgba(196,74,44,.06) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.34) 18%,rgba(8,10,20,.38) 58%,var(--color-bg) 100%)}@media(max-aspect-ratio:1/1){.hero .hero-body{margin-top:clamp(0px,8vh,80px)}}.hero .lede-2{margin-top:.85rem}.hero .hero-rule{margin-top:1.6rem}.hero .hero-media img{filter:brightness(1.12) saturate(1.07) contrast(1.01)}@media(min-aspect-ratio:1/1){.hero .hero-media:after{background:linear-gradient(to right,#060408bd,#0604088f 20%,#08050842 38%,#0a06080f 55%,#0a060800 68%),linear-gradient(to bottom,#08050842,#08050800 22% 76%,#06040842)}}@media(max-aspect-ratio:1/1){.hero .hero-media:after{background:linear-gradient(to bottom,#06060e70,#06060e0f,#08060c1a 32%,#08060c47,#07050a75 68%,#06040a94),linear-gradient(to right,#04040870,#0404082e 34%,#04040800 62%)}}.hero .hero-code input{border-color:#fffcf6b8}.hero .hero-code input::placeholder{color:#faf5ee9e}.section-bg-open img{filter:brightness(1.24) saturate(1.08) contrast(1.04)}.section-bg-open:after{background:radial-gradient(70% 50% at 50% 60%,rgba(196,74,44,.08) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.26) 22%,rgba(8,10,20,.34) 60%,var(--color-bg) 100%)}.section-enter .enter-form{margin-top:clamp(4.5rem,12vw,7rem)}.site-footer{padding:var(--space-8) var(--space-5) var(--space-8)}.site-footer .footer-mark{width:22px;height:22px}.site-footer .footer-word{font-size:var(--text-lg);margin-top:var(--space-2)}.site-footer .footer-line{margin-top:.35rem}.site-footer .footer-nav{margin-top:var(--space-4);gap:var(--space-3)}.site-footer .footer-fine{margin-top:var(--space-3)}@media(max-width:600px){.site-footer{padding:var(--space-6) var(--space-4)}}.section-diff .diff-lede{margin-top:var(--space-4);max-width:40ch;font-size:var(--text-base);line-height:1.6;color:var(--color-text-soft)}@media(min-aspect-ratio:1/1){.hero h1{font-size:clamp(2.4rem,.85rem + 3.4vw,3.9rem)}.hero .lede{max-width:21ch}.hero-media:after{background:linear-gradient(to right,#040306e6,#040306cc,#06040885,#08050833,#0a060800 72%),linear-gradient(to bottom,#0805084d,#08050800 24% 76%,#06040852)}}@media(max-aspect-ratio:1/1){.hero-media img{object-position:58% 42%}}.section-invite .body{color:#fffffff0;text-shadow:0 1px 18px rgba(10,6,8,.9)}.hero .lede,.hero .lede-sub{max-width:21ch}.hero h1{font-size:clamp(2.65rem,1.05rem + 4vw,4.25rem)}.hero .lede{font-size:clamp(.875rem,.85rem + .2vw,.9375rem)}.hero .lede-sub{font-size:clamp(.8125rem,.8rem + .14vw,.875rem)}.hero .lede-sub{margin-top:.5rem}.hero .lede-verified{letter-spacing:.06em;text-transform:uppercase;font-size:clamp(.6875rem,.67rem + .12vw,.75rem);color:var(--color-accent-soft)}.hero .lede-extra{max-width:26ch}.hero .lede-verified{max-width:none;white-space:nowrap}.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to bottom,transparent 0%,rgba(8,10,20,.26) 36%,rgba(8,10,20,.72) 70%,var(--color-bg) 100%);pointer-events:none;z-index:-1}.section-bg-open:after{background:radial-gradient(70% 50% at 50% 60%,rgba(196,74,44,.08) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.86) 9%,rgba(8,10,20,.34) 26%,rgba(8,10,20,.36) 56%,rgba(8,10,20,.88) 90%,var(--color-bg) 100%)}.section-bg-hands:after{background:radial-gradient(70% 50% at 50% 55%,rgba(196,74,44,.06) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.84) 8%,rgba(8,10,20,.34) 24%,rgba(8,10,20,.4) 60%,rgba(8,10,20,.88) 92%,var(--color-bg) 100%)}.section{padding-block:clamp(2.25rem,5.5vw,3.5rem)}.section-invite{padding-block:clamp(2.5rem,6vw,4rem)}.section-diff{padding-block:clamp(2.25rem,5vw,3.25rem)}.section-enter{padding-top:clamp(2rem,5vw,3rem);padding-bottom:clamp(2.5rem,5.5vw,4rem)}.section-bg-hands img{object-position:50% 22%}.section-enter .enter-form{margin-top:clamp(9rem,26vw,14rem)}.section-enter .section-bg{inset:0 0 auto;height:58%}.section-bg-hands img{object-position:50% 30%}.section-bg-hands:after{background:linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.8) 8%,rgba(8,10,20,.3) 26%,rgba(8,10,20,.42) 62%,rgba(8,10,20,.92) 88%,var(--color-bg) 100%)}.section-enter .enter-form{margin-top:clamp(6rem,17vw,9rem)}.section-bg-hands:after{background:linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.8) 8%,rgba(8,10,20,.3) 26%,rgba(8,10,20,.46) 58%,rgba(8,10,20,.86) 78%,var(--color-bg) 96%)}.hero:after{height:26%;background:linear-gradient(to bottom,transparent 0%,rgba(8,10,20,.1) 46%,rgba(8,10,20,.42) 76%,var(--color-bg) 100%)}.section-enter .hands-band{position:relative;inset:auto;width:100vw;margin-left:50%;transform:translate(-50%);height:clamp(260px,40vw,460px);margin-top:clamp(1.75rem,4vw,2.75rem);overflow:hidden}.section-enter .hands-band img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:brightness(1.04) saturate(1.06) contrast(1.03)}.section-enter .hands-band:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.3) 16%,transparent 40%,transparent 62%,rgba(8,10,20,.34) 84%,var(--color-bg) 100%)}[data-theme=light] .section-enter .hands-band img{filter:brightness(1) saturate(1.02)}.section-enter:before{display:none}.section-enter .enter-form{margin-top:clamp(2rem,5vw,3rem)}.section-enter .enter-form{justify-items:center;text-align:center}.section-enter .enter-form label{text-align:center}.section-enter .enter-form .field-row{margin-inline:auto}.section-enter .enter-note{text-align:center;margin-inline:auto}.section-enter .wa-link{margin-inline:auto}.section-enter .hands-band:after{background:linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.55) 10%,rgba(8,10,20,.12) 26%,transparent 42%,transparent 58%,rgba(8,10,20,.14) 74%,rgba(8,10,20,.58) 90%,var(--color-bg) 100%)}.site-footer{background:#2a0d16;border-top-color:#ffd6c424}[data-theme=light] .site-footer{background:#f4e7e6}.swaps{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:0}.swaps li{display:grid;gap:.3rem;padding-block:.95rem;border-top:1px solid var(--color-border-soft)}.swaps li:last-child{border-bottom:1px solid var(--color-border-soft)}.swaps .sw-out{font-size:var(--text-sm);line-height:1.45;color:#f7efe36b;text-decoration:line-through;text-decoration-color:#f7efe347;text-decoration-thickness:1px}.swaps .sw-in{font-size:var(--text-base);line-height:1.5;color:var(--color-text)}.swaps .sw-in:before{content:"→";margin-right:.5rem;color:var(--color-accent-soft);font-size:.9em}.menu-btn{width:42px;height:42px;color:var(--color-text);background:color-mix(in oklab,var(--color-surface) 82%,transparent);border-color:#ffd6c44d;box-shadow:0 2px 14px -6px #0000008c;transition:color .2s ease,border-color .2s ease,background .2s ease}.menu-btn svg{width:20px;height:20px}.menu-btn:hover,.menu-btn:focus-visible,.menu-btn[aria-expanded=true]{color:var(--color-accent-soft);border-color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 14%,var(--color-surface))}.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--radius-full);background:color-mix(in oklab,var(--color-surface) 82%,transparent);border:1px solid rgba(255,214,196,.3);box-shadow:0 2px 14px -6px #0000008c}.lang-switch button{font-family:var(--font-body);font-size:.68rem;font-weight:500;letter-spacing:.09em;line-height:1;padding:.5rem .52rem;border-radius:var(--radius-full);color:var(--color-text-muted);background:none;border:0;cursor:pointer;transition:color .2s ease,background .2s ease}.lang-switch button:hover{color:var(--color-text)}.lang-switch button.is-on{color:var(--color-bg);background:var(--color-accent-soft)}.header-actions{display:flex;align-items:center;gap:var(--space-3)}@media(max-width:24rem){.lang-switch button{padding:.45rem .4rem;font-size:.64rem}.header-actions{gap:var(--space-2)}}.lang-pick{position:absolute;top:calc(100% + .3rem);right:var(--space-5);z-index:2}.site-header:has(.menu-panel.is-open) .lang-pick{opacity:0;pointer-events:none}.lang-pick{transition:opacity .2s ease}.lang-toggle{width:42px;height:42px;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;gap:2px;color:var(--color-text);background:color-mix(in oklab,var(--color-surface) 82%,transparent);border:1px solid rgba(255,214,196,.3);box-shadow:0 2px 14px -6px #0000008c;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}.lang-toggle .lang-code{font-family:var(--font-body);font-size:.625rem;font-weight:500;letter-spacing:.08em;line-height:1}.lang-toggle svg{width:8px;height:5px;flex:none;opacity:.8;transition:transform .2s ease}.lang-toggle:hover,.lang-toggle:focus-visible,.lang-toggle[aria-expanded=true]{color:var(--color-accent-soft);border-color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 14%,var(--color-surface))}.lang-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.lang-menu{position:absolute;top:calc(100% + .4rem);right:0;min-width:9.5rem;display:flex;flex-direction:column;padding:var(--space-2);background:color-mix(in oklab,var(--color-surface) 97%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);box-shadow:0 24px 70px -20px #0009;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}.lang-menu.is-open{opacity:1;transform:translateY(0)}.lang-menu button{text-align:left;padding:.42rem var(--space-3);border:0;border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-muted);transition:color .2s ease,background .2s ease}.lang-menu button:hover{color:var(--color-text);background:color-mix(in oklab,var(--color-accent) 12%,transparent)}.lang-menu button.is-on{color:var(--color-accent)}@media(min-width:48rem){.hero .hero-body{margin-inline:clamp(3rem,5.5vw,6rem) auto;max-width:44rem}.hero .lede{max-width:38ch}.hero .lede-sub{max-width:34ch}.hero-rule{max-width:30rem}}@media(min-width:48rem){.site-header{padding-left:calc(clamp(3rem,5.5vw,6rem) + var(--space-5))}}@media(min-width:48rem){.section-enter .break-quote{font-size:var(--text-2xl)}}@media(min-width:48rem){.hero .hero-rule{display:none}.hero .enter-form,.hero form{margin-top:2.4rem}.site-footer .footer-fine{color:var(--color-text-muted)}}.hero .hero-rule{display:none}.hero .enter-form,.hero form{margin-top:2.4rem}.section-enter .break-quote{font-size:var(--text-2xl)}.site-footer .footer-fine{color:var(--color-text-muted)}.section-bg-open img{filter:brightness(1.42) saturate(1.1) contrast(1.04)}.section-bg-open:after{background:radial-gradient(70% 50% at 50% 60%,rgba(196,74,44,.08) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.84) 9%,rgba(8,10,20,.24) 26%,rgba(8,10,20,.26) 56%,rgba(8,10,20,.86) 90%,var(--color-bg) 100%)}.section-bg-open{isolation:isolate}.section-bg-open:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(46% 40% at 88% 26%,rgba(255,226,196,.3) 0%,rgba(255,214,180,.16) 42%,transparent 78%),radial-gradient(22% 16% at 90% 50%,rgba(255,232,206,.2) 0%,transparent 74%)}.section-invite .body{text-shadow:0 1px 3px rgba(8,6,10,.88)}.section-bg-open:after{background:linear-gradient(to right,rgba(6,5,9,.66) 0%,rgba(6,5,9,.58) 38%,rgba(6,5,9,.2) 62%,transparent 78%),radial-gradient(70% 50% at 50% 60%,rgba(196,74,44,.08) 0%,transparent 74%),linear-gradient(to bottom,var(--color-bg) 0%,rgba(8,10,20,.84) 9%,rgba(8,10,20,.24) 26%,rgba(8,10,20,.26) 56%,rgba(8,10,20,.86) 90%,var(--color-bg) 100%)}@media(max-width:47.99rem){.hero .enter-form,.hero form,.hero .cta-stack{margin-top:1.1rem}}@media(max-width:47.99rem){.hero .scroll-cue{bottom:calc(var(--space-5) + 1.4rem)}}.lang-row.lang-pick{display:block}.lang-menu .lang-btn{width:100%}
/* ── User adjustments v2 (Aug 31 2026) ──────────────────────────────
   1. Hero copy block pushed lower on desktop (unchanged).
   2. Section-invite (dance.jpg — man/woman dancing, warm wine tones):
      previous darkening was too aggressive; restore a warm, romantic look.
   3. Section-door / hands-band (table-hands.jpg — hands + two glasses):
      this was the over-saturated one; darken and soften it. */
@media (min-width: 900px){
  .hero .hero-body{margin-top:clamp(90px, 12vh, 150px) !important;}
}

/* Hero sizing pass (v34):
   — leave "Rio de Janeiro" position + font unchanged (same tracked caps)
   — make "Dating by invitation only" a larger second line, same font as
     the rest of the eyebrow (tracked sans caps), warm gold color for contrast
   — grow "Who's in Rio tonight?" one visual step */
.hero .eyebrow .eyebrow-l2{
  display: block;
  margin-top: .5rem;
  font-size: clamp(.95rem, .85rem + .55vw, 1.35rem);
  letter-spacing: .18em;
  color: #ffb56b;
}
.hero h1{
  font-size: clamp(3rem, 1.1rem + 5.4vw, 6.25rem) !important;
  margin-top: 1.15rem !important;
}
@media (max-width: 720px){
  .hero h1{
    font-size: clamp(2.75rem, 1rem + 6.2vw, 4rem) !important;
  }
}
/* By-invitation is now a flat dark section (no photo behind text) */
.section-invite--flat .section-bg,
.section-invite--flat .section-bg-open{ display:none !important; }

/* Warm dance photo as a horizontal separator band between By-invitation
   and What's-different. Full-bleed edge-to-edge, dimmed & filtered so the
   image reads as brand-mood, not raw photography. */
.photo-band{
  position: relative;
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(280px, 42vw, 520px);
  overflow: hidden;
  isolation: isolate;
}
.photo-band img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: brightness(.68) saturate(.86) contrast(1.05) sepia(.08);
}
.photo-band:after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 55%, rgba(196,74,44,.06) 0%, transparent 74%),
              linear-gradient(to bottom,
                var(--color-bg) 0%,
                rgba(8,10,20,.72) 12%,
                rgba(8,10,20,.42) 35%,
                rgba(8,10,20,.42) 60%,
                rgba(8,10,20,.72) 88%,
                var(--color-bg) 100%);
}
/* Cheers-band photo: apply a darker moodier filter so it doesn't read as
   raw photography — pushes it toward the brand's moody editorial mood. */
.hands-band img{
  filter: brightness(.62) saturate(.82) contrast(1.05) sepia(.10) !important;
}

/* Enter section sunset background: shift the crop upward so the tops of the
   mountains and more of the skyline are visible on wide viewports. Applies
   to both homepage and how-it-works page (they share this markup). */
.section-enter .section-bg-dusk img{
  object-position: 50% 22% !important;
}

/* Footer: make the crimson/gold band roughly half its previous width —
   centered, rounded, with the surrounding page background showing beside it
   — instead of stretching edge to edge. Also shorten vertically. */
.site-footer{
  max-width: 44rem;
  margin-inline: auto;
  margin-block: var(--space-8);
  padding: var(--space-6) var(--space-6) !important;
  border-radius: var(--radius-lg);
  border-top: 0 !important;
}
@media (max-width: 720px){
  .site-footer{
    max-width: none;
    margin-inline: var(--space-4);
    padding: var(--space-5) var(--space-5) !important;
  }
}

/* Mobile-only: make the sunset door section fade into deep black at the
   bottom so the visible crimson footer is just a small sliver, per user
   feedback (looks better on mobile than a big sunset-to-crimson meeting). */
@media (max-width: 720px){
  .section-enter .section-bg-dusk:after{
    background: radial-gradient(70% 40% at 50% 45%, rgba(196,74,44,.06) 0%, transparent 74%),
                linear-gradient(to bottom,
                  var(--color-bg) 0%,
                  rgba(8,10,20,.35) 22%,
                  rgba(8,10,20,.55) 55%,
                  rgba(8,10,20,.88) 78%,
                  var(--color-bg) 96%) !important;
  }
}
.hands-band:after{
  background: linear-gradient(to bottom,
                var(--color-bg) 0%,
                rgba(8,10,20,.65) 10%,
                rgba(8,10,20,.30) 30%,
                rgba(8,10,20,.30) 60%,
                rgba(8,10,20,.65) 88%,
                var(--color-bg) 100%) !important;
}


/* v35 — compact full-bleed footer + desktop eyebrow stack */
.site-footer{
  padding:1.35rem var(--space-5) 1.45rem!important;
  background:linear-gradient(100deg,#25050d 0%,#3a0b16 50%,#24050d 100%)!important;
  border-top:1px solid rgba(240,161,115,.22)!important;
}
.footer-mark{width:23px!important;height:23px!important}
.footer-word{font-size:1.65rem!important;margin-top:.28rem!important}
.footer-line{margin-top:.18rem!important}
.footer-nav{gap:1rem!important;margin-top:.7rem!important}
.footer-fine{margin-top:.65rem!important}
@media (min-width:721px){
  .hero .eyebrow{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:.45rem!important}
  .hero .eyebrow .eyebrow-dot{display:none!important}
  .hero .eyebrow .eyebrow-l2{display:block!important;margin-top:0!important}
}


/* ============================================================
   v36 — approved edits
   1. Desktop: "Who's in Rio tonight?" one step smaller.
   2. Desktop + mobile: "Dating by invitation only" smaller,
      kept directly beneath "Rio de Janeiro" in warm gold.
   3. Crimson footer: full bleed edge-to-edge (no card, no side
      margins, no rounded corners) and materially shorter.
   Mobile h1 size is intentionally left unchanged.
   ============================================================ */

/* --- Footer: true full bleed, unrounded, compact --- */
.site-footer{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  margin-inline:0!important;
  margin-block:0!important;
  border-radius:0!important;
  padding:1rem var(--space-5) 1.05rem!important;
  border-top:1px solid rgba(240,161,115,.22)!important;
  background:linear-gradient(100deg,#25050d 0%,#3a0b16 50%,#24050d 100%)!important;
}
.site-footer .footer-mark{width:20px!important;height:20px!important;margin-inline:auto!important}
.site-footer .footer-word{font-size:1.4rem!important;margin-top:.16rem!important;line-height:1.1!important}
.site-footer .footer-line{margin-top:.1rem!important}
.site-footer .footer-nav{gap:.85rem!important;margin-top:.5rem!important}
.site-footer .footer-fine{margin-top:.4rem!important}

@media (max-width:720px){
  .site-footer{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    margin-inline:0!important;
    border-radius:0!important;
    padding:.9rem var(--space-4) .95rem!important;
  }
  .site-footer .footer-word{font-size:1.28rem!important}
  .site-footer .footer-nav{gap:.7rem!important;margin-top:.45rem!important}
}

/* --- "Dating by invitation only": smaller on desktop and mobile --- */
.hero .eyebrow .eyebrow-l2{
  font-size:.82em!important;
  letter-spacing:.16em!important;
}

/* --- Desktop only: two-line eyebrow stack + smaller headline --- */
@media (min-width:721px){
  .hero .eyebrow{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:.3rem!important;
  }
  .hero .eyebrow .eyebrow-dot{display:none!important}
  .hero .eyebrow .eyebrow-l2{display:block!important;margin-top:0!important}
  .hero h1{
    font-size:clamp(2.7rem,1rem + 4.5vw,5.2rem)!important;
    margin-top:1.05rem!important;
  }
}


/* ============================================================
   v37 — approved refinements
   1. "Dating by invitation only" sized two steps LARGER than
      "Rio de Janeiro", desktop and mobile (same font, same gold).
   2. Footer: more air between "Rio Now" and the location line.
   3. More black between "Message us on WhatsApp" and the footer
      (about an inch), on mobile especially, desktop too.
   4. Mobile only: hero lede lines very slightly tighter.
   ============================================================ */

/* 1 — invitation line larger than "Rio de Janeiro" */
.hero .eyebrow .eyebrow-l2{
  font-size:1.24em!important;
  letter-spacing:.13em!important;
  line-height:1.25!important;
}
@media (min-width:721px){
  .hero .eyebrow{gap:.34rem!important}
  .hero .eyebrow .eyebrow-l2{font-size:1.24em!important}
}

/* 2 — footer: separate "Rio Now" from the location line */
.site-footer .footer-word{margin-top:.14rem!important}
.site-footer .footer-line{margin-top:.5rem!important}
@media (max-width:720px){
  .site-footer .footer-line{margin-top:.46rem!important}
}

/* 3 — more black above the footer */
.section-enter{
  padding-bottom:clamp(6.75rem,7vw + 3rem,9.5rem)!important;
}
@media (max-width:720px){
  .section-enter{padding-bottom:9rem!important}
}

/* 4 — mobile only: tighten the hero lede leading a touch */
@media (max-width:720px){
  .hero .lede{line-height:1.44!important}
}


/* ============================================================
   v38 — centre the "No code yet" + WhatsApp block in the black
   band above the footer, desktop and mobile. The block moves
   down; the black above and below it is balanced.
   ============================================================ */
.section-enter .enter-note{
  margin-top:clamp(4.25rem,3vw + 3rem,5.6rem)!important;
}
.section-enter{
  padding-bottom:clamp(4rem,4vw + 1.4rem,5.4rem)!important;
}
@media (max-width:720px){
  .section-enter .enter-note{margin-top:5rem!important}
  .section-enter{padding-bottom:4.25rem!important}
}


/* ============================================================
   v39 — in the "door" section, push ONLY the invitation-code
   group (label, field, Enter) down so more of the sunset photo
   is visible. The "No code yet" line and the WhatsApp link keep
   their exact v38 position: whatever is added to the form's top
   margin is removed from the note's top margin.
   ============================================================ */
@media (min-width:721px){
  .section-enter .enter-form{margin-top:7rem!important}
  .section-enter .enter-note{margin-top:1.6rem!important}
}
@media (max-width:720px){
  .section-enter .enter-form{margin-top:5.5rem!important}
  .section-enter .enter-note{margin-top:1rem!important}
}


/* ============================================================
   v40 — make the invitation-code field in the "door" section as
   bright as the hero's "Enter your code" field: same near-white
   border, same light type and placeholder, same dark blurred
   pane behind it so it reads over the sunset photo.
   ============================================================ */
.section-enter .enter-form label{
  color:#f6efe4e6!important;
  text-shadow:0 1px 16px rgba(20,2,8,.9)!important;
}
.section-enter .enter-form .field-row input{
  background:#0a081075!important;
  border:1px solid #fffcf6b8!important;
  color:#f6efe4!important;
  -webkit-backdrop-filter:blur(3px)!important;
  backdrop-filter:blur(3px)!important;
}
.section-enter .enter-form .field-row input::placeholder{
  color:#faf5ee9e!important;
}
.section-enter .enter-form .field-row input:focus{
  border-color:var(--color-accent-soft)!important;
  background:#0a0810a8!important;
}


/* ============================================================
   v41 — the door is the end of the page.
   1. Drop the two smallest footer lines everywhere, so the
      footer is just the mark, "Rio Now" and the nav row.
   2. On mobile, make the door section tall enough that it plus
      the shortened footer fill exactly one screen. The extra
      height lands as black under "Message us on WhatsApp", and
      there is nothing left to scroll past.
   3. Gentle scroll snap so the door settles at the top.
   ============================================================ */
.site-footer .footer-line,
.site-footer .footer-fine{display:none!important}

.site-footer{
  padding-top:clamp(1.5rem,2vw + .6rem,2.1rem)!important;
  padding-bottom:clamp(1.5rem,2vw + .6rem,2.1rem)!important;
}
.site-footer .footer-nav{margin-top:.85rem!important}

@media (max-width:720px){
  .site-footer{
    padding-top:1.35rem!important;
    padding-bottom:1.5rem!important;
  }
  .site-footer .footer-nav{margin-top:.75rem!important}

  /* One screen: door section + footer. min-height, never fixed, so
     a very small phone can still grow instead of clipping. */
  .section-enter{
    box-sizing:border-box!important;
    /* clear the fixed top bar so "The door" is readable on this last screen */
    padding-top:5rem!important;
    min-height:calc(100vh - 125px)!important;   /* fallback for older engines */
    min-height:calc(100svh - 125px)!important;  /* modern: excludes browser chrome */
  }

}

/* ============================================================
   v42 — remove the v41 scroll snap. The sizing above already
   makes the door the last screen, and the snap was dragging the
   page back to the door whenever you tried to reach the footer.
   ============================================================ */
html{scroll-snap-type:none!important}
.section-enter{scroll-snap-align:none!important}


/* ============================================================
   v43 — lock the door as the last screen (mobile).
   v41/v42 used min-height with a hardcoded 125px footer, so on a
   real phone the door could still be TALLER than the space left
   and you could scroll its heading off the top. v43 instead:
     1. Makes the mobile footer genuinely small (~80px).
     2. Gives the door an EXACT height (JS writes the real number
        from innerHeight - footer height; the calc below is the
        no-JS fallback) and centres its content, so the surplus
        lands as black under "Message us on WhatsApp".
     3. overflow:hidden so nothing can ever push the page past it.
   ============================================================ */
@media (max-width:720px){
  .site-footer{
    padding-top:.8rem!important;
    padding-bottom:.9rem!important;
  }
  .site-footer .footer-mark{width:17px!important;height:17px!important;margin-bottom:.15rem!important}
  .site-footer .footer-word{font-size:.92rem!important;margin:0!important;line-height:1.15!important}
  .site-footer .footer-nav{
    margin-top:.42rem!important;
    gap:.55rem .85rem!important;
    font-size:.72rem!important;
    line-height:1.1!important;
  }

  .section-enter{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding-top:6rem!important;
    padding-bottom:1rem!important;
    /* exact, not min-: nothing may exist below this screen */
    min-height:0!important;
    height:calc(100vh - 84px)!important;   /* fallback engines */
    height:calc(100svh - 84px)!important;  /* excludes browser chrome */
    overflow:hidden!important;
  }
  .section-enter > .wrap{width:100%!important}

  /* the v39 offset now shrinks on short phones instead of overflowing */
  .section-enter .enter-form{margin-top:clamp(1.1rem,6.5vh,5.5rem)!important}
}

/* v43b — very short phones (<=640px tall): tighten so the whole door,
   including the WhatsApp badge, fits inside the locked screen. */
@media (max-width:720px) and (max-height:640px){
  .section-enter{padding-top:4.9rem!important;padding-bottom:.6rem!important}
  .section-enter .kicker{margin-bottom:.35rem!important}
  .section-enter .closer{font-size:2rem!important;line-height:1.12!important}
  .section-enter .enter-form{margin-top:.9rem!important}
  .section-enter .enter-note{margin-top:.7rem!important;font-size:.95rem!important}
  .section-enter .wa-link{margin-top:.7rem!important}
}

/* ============================================================
   v52 — desktop homepage alignment (>=1024px, home page only).
   Before, at 1440: hero copy started at x=99 while "By invitation"
   and "What's different" sat centred at x=476 — three different
   left edges down one page. Now all three share one axis, and the
   "What's different" column is wide enough that its sentences stop
   breaking two words early ("...when your / trip ends").
   The door stays centred on purpose.
   ============================================================ */
@media (min-width:1024px){
  body[data-page="home"]{
    /* one shared left edge for hero copy, By invitation, What's different */
    --axis: clamp(6rem, 22vw, 20rem);
  }
  /* hero copy moves right — past the middle, but well short of where
     "By invitation" used to sit */
  body[data-page="home"] .hero-body{
    margin-inline:calc(var(--axis) - var(--space-5)) auto !important;
    max-width:46rem;
  }
  /* v115: the header rides the same axis, with matching air on the right,
     so the logo lines up with the hero copy and the language pills and
     menu sit the same distance in from the right edge. */
  body[data-page="home"] .site-header{
    padding-left: var(--axis);
    padding-right: var(--axis);
  }
  /* "By invitation" comes left to meet it */
  body[data-page="home"] .section-invite > .wrap{
    margin-inline:calc(var(--axis) - var(--space-5)) auto;
  }
  /* "What's different" lines up with both, and gets room to breathe */
  body[data-page="home"] .section-diff > .wrap{
    margin-inline:calc(var(--axis) - var(--space-5)) auto;
    max-width:47rem;
  }
  body[data-page="home"] .diff-lede{ max-width:54ch; }
  body[data-page="home"] .perks li{ grid-template-columns:11rem 1fr; }
  body[data-page="home"] .perk-v{ max-width:62ch; }

  /* The hero scrim used to fade to nothing by 62% of the width, which was
     fine when the copy hugged the left edge. With the copy further right it
     would have sat on the bright part of the sunset, so the wash now carries
     further across. */
  body[data-page="home"] .hero .hero-media:after{
    background:
      linear-gradient(to bottom,#06060e78,#06060e14,#08060c26 32%,#08060c4d,#07050a7a 68%,#06040a96),
      linear-gradient(to right,#0404087a,#04040866 42%,#0404084a 66%,#0404081f 82%,#04040800 94%);
  }
}

/* v59 — the hero had a code box and the word "Enter your code" under it, and
   nothing to press: on a phone you had to know to hit the keyboard's return
   key. The field and a Go button now sit on one row. The label stays, but it
   now describes the field rather than pretending to be the action. */
.hero-code-row{display:flex;align-items:stretch;gap:.4rem;justify-content:center}
.hero-code .hero-code-row input{width:9.25rem}
.hero-code-go{
  padding:.12rem .95rem;border-radius:.5rem;cursor:pointer;
  background:var(--color-accent);border:1px solid var(--color-accent);
  color:#fff;font-family:inherit;font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.5;
  transition:filter var(--transition-interactive),transform var(--transition-interactive);
}
.hero-code-go:hover{filter:brightness(1.1)}
.hero-code-go:active{transform:translateY(1px)}
.hero-code-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-code-label{width:auto}


/* v65 — Terms fine print. Genuinely fine print: smaller, dimmer, and set
   apart from the body copy around it, but selectable, indexable and legible
   at arm's length. Article 49 is disclosed here rather than beside the pay
   button; the right applies either way, and hiding it would neither remove it
   nor survive a look from anyone enforcing it. */
.fine-h{
  margin:1.6rem 0 .35rem;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.62;
}
.body.fine{
  font-size:.82rem;
  line-height:1.65;
  opacity:.62;
  max-width:46ch;
}
@media (max-width:640px){.hero .lede,.hero .lede-sub{max-width:29ch}}

/* ── v70 ── readability on the phone ──────────────────────────────────────
   Both hero lines were being drawn at #f6efe4cc — 80% alpha — and the first
   one then had opacity:.93 layered on top of that, so it was landing at about
   74% over a photograph. That is why "built for adults" and the line about
   straight or gay read as grey rather than white. Full strength now, shadow
   kept because the words still sit on an image.
   Desktop already set the first line to #ffffffde; this brings the second one
   up to match instead of leaving it dimmer than the line above it. */
.hero .lede{ color:#fffdf9; opacity:1; }
.hero .lede-sub{ color:#fdf8f0; opacity:1; }

/* The dance photograph below "You were invited for a reason" was filtered down
   to brightness(.68), which on a phone screen in daylight is close to a dark
   rectangle. Lifted, with a little of the sepia taken out so skin tones stay
   warm rather than muddy. The gradient fade into the page background is
   untouched, so it still blends at top and bottom. */
.photo-band img{ filter:brightness(1.30) saturate(.92) contrast(1.03) sepia(.04); }

/* ── v73 ── hero spacing on phones, at the right scale ────────────────────
   v72 anchored the layout correctly but the movement was far too small to see.
   On a 672px-tall S22 screen it lifted the text 33px and moved the code box
   one pixel. Two errors behind that:

   1. Scale. An S22 shows 360 CSS px across roughly 2.8 inches of glass, so an
      inch is about 129 CSS px and half an inch is ~64px. I had been treating
      33px as half an inch. It is a quarter.
   2. The anchor works against the lift. .cta-stack{margin-top:auto} pins the
      code box to the end of the hero body, so lifting the text only grows the
      empty middle — the code box does not follow. Moving it down needs the
      hero's own bottom padding reduced, which is a separate lever.

   Space audit at 360×672 showed where the room was: 47px of dead air between
   the header and the eyebrow, 33px between the code label and the arrow, and
   25px beneath the arrow. This spends it.

   Portrait only. Landscape and desktop keep their own rules. */
@media (max-aspect-ratio: 1/1){
  .hero{
    /* v73 used 2.6rem, which lifted the text 60px on a 672px screen — slightly
       too far. 4.6rem gives 32px of that back, a quarter inch at this screen's
       ~129 CSS px per inch, for a net lift of 28px from v70.

       This is the only lever touched in v74. The code box and arrow are
       positioned from the BOTTOM of the hero (padding-bottom, plus the
       margin-top:auto anchor), so padding at the top cannot reach them — it
       spends the slack in the middle instead. Verified rather than assumed:
       both land on the identical pixel at every height from 620 to 915. */
    padding-top: 4.6rem;
    /* Was clamp(4.75rem, 9vh, 6rem) = 76px here. This is the lever that moves
       the code box down: the hero body's content box ends higher, so the
       anchored code box follows it down. */
    padding-bottom: 3rem;
  }
  .hero-body{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Was clamp(0px, 2vh, 20px). Zeroed — the remaining 13px of lift. */
    margin-top: 0;
  }
  /* The anchor, unchanged from v72 and the reason the geometry is identical on
     every phone height. */
  .hero-body .cta-stack{ margin-top: auto; }
  /* Arrow lower again. 14px of clearance is enough that Android's gesture bar
     does not sit on the chevron, and the chevron is drawn in the middle of a
     4.5x2.5rem box so the visible gap is larger than the number. */
  .hero .scroll-cue{ bottom: .875rem; }
}

/* ── v75 ── a darker left side behind the hero text, homepage only ────────
   The eyebrow lines sit at y≈127 on a 672px screen, which is 19% down — and
   19% is exactly where the existing top-to-bottom scrim is at its weakest
   (rgba(6,6,14,.44) at the very top, falling to .06 by the second stop). So
   "RIO DE JANEIRO" and "DATING BY INVITATION ONLY", both warm orange, were
   landing on undimmed orange sky. Worst possible pairing.

   Three layers. The vertical one is copied unchanged from the rule this
   overrides — it is only restated because the shorthand replaces all layers at
   once. The horizontal scrim is strengthened, and a soft pool is added over the
   upper left, aimed at the two eyebrow lines specifically.

   Scoped tightly on purpose:
     body[data-page="home"]  — homepage only, and .hero exists only in
                               index.html anyway, so this is belt and braces
     max-aspect-ratio: 1/1   — portrait phones only
   Desktop keeps its own left scrim from the min-width:1024px rule, untouched.
   Specificity here is 0,3,2, which clears the 0,2,2 rule it replaces. */
@media (max-aspect-ratio: 1/1){
  body[data-page="home"] .hero .hero-media:after{
    background:
      /* vertical, unchanged */
      linear-gradient(to bottom,#06060e70,#06060e0f,#08060c1a 32%,#08060c47,#07050a75 68%,#06040a94),
      /* left scrim: was 70/2e/00 at 0/34/62%. Deeper, and reaching a little
         further across so the paragraph gets some of the benefit too. */
      linear-gradient(to right,#040408a8,#04040866 30%,#0404082b 48%,#04040800 68%),
      /* the pool behind the eyebrow, anchored to the upper left corner */
      radial-gradient(125% 48% at 0% 15%,#04040857,#04040800 72%);
  }
}

/* ---- v78: hero head, as approved ---------------------------------------
   Built on v75 (the version live on staging). Three things, all homepage.

   1. "Rio de Janeiro" removed in index.html, not hidden in CSS, so the
      i18n walker has no orphan string to translate and nothing renders at
      zero size. The <span class="eyebrow-l2"> survives untouched, keeping
      its own 1.24em size at every breakpoint -- which a font-size:0 trick
      on the parent would have destroyed.
   2. margin-top:8px on that span removed, so "Dating by invitation only"
      lands on the exact pixel "Rio de Janeiro" used to occupy (y=127 at
      360x672). Not near it -- on it.
   3. Space opened between that line and the headline.

   Headline: still Instrument Serif. line-height .93 -> 1.06 and the "?"
   given room after the italic "t" (it was at 0px, italics lean right).
   .18em/.26em compensation on margin-top is how the added leading is paid
   for; the +19px on top is the requested gap. em units so the clamp()
   font-size is tracked at every breakpoint automatically.

   Specificity: body[data-page="home"] .hero X == 0,3,1, clearing the
   0,2,1 !important chain earlier in this minified file. Verified by
   computed style at ten viewports, not assumed.
   ---------------------------------------------------------------------- */
body[data-page="home"] .hero .eyebrow .eyebrow-l2{
  margin-top: 0 !important;
}
body[data-page="home"] .hero h1{
  line-height: 1.06 !important;
  letter-spacing: -.004em !important;
  margin-top: calc(1.05rem - .26em + 34px) !important;
}
@media (max-width: 720px){
  body[data-page="home"] .hero h1{
    margin-top: calc(1.15rem - .26em + 19px) !important;
  }
}
body[data-page="home"] .hero h1 em{
  margin-right: .08em !important;
}

/* v81: the brand name inside the invite paragraph, in the accent red, so it
   reads as a name and not as the phrase "rio now".
   SUPERSEDED v157: the name is now the logo's warm orange everywhere it
   appears in prose, so this was the one place still reading red -- it is the
   only hand-written .brand span left in body copy, and it sits on the busiest
   page. Same colour as .rn-tint, which handles every other paragraph. */
body[data-page="home"] .section-invite .body .brand{
  color: var(--color-accent-soft);
  font-weight: 500;
}

/* v82: "After all…" stands on its own now. Half the normal paragraph gap --
   it is an aside to the sentence above, not a second thought. */
body[data-page="home"] .hero .lede-after{
  margin-top: .55rem;
}

/* The bar photograph under "Who's behind this" reads darker than the
   invitation sunset even at matched average luminance, because it has no
   bright sky to carry the eye. Given its own lift, and the top/bottom
   vignette pulled back so the faces are not swallowed. */
body[data-page="home"] .photo-band.photo-band-bar img{
  filter: brightness(2.05) saturate(.94) contrast(1.0) sepia(.03);
}
body[data-page="home"] .photo-band.photo-band-bar:after{
  opacity: 1;
}


/* More black between the hero arrow and "By invitation only". Added as
   padding on the invitation section so the scroll arrow itself does not move. */


/* v90 — the invitation code has left the hero so the page gets read before it
   asks for anything. Three consequences:
   1. The chevron rises into roughly the space the code box occupied.
   2. It fades the moment the reader starts scrolling.
   3. Less black under it before "By invitation only", since the code box is
      no longer there to fill the gap. */
@media (max-width: 47.99rem){
  .hero .scroll-cue{ bottom: 4rem; }
}
@media (min-width: 48rem){
  .hero .scroll-cue{ bottom: 6.5rem; }
}
body.cue-gone .scroll-cue{
  opacity: 0;
  translate: -50% 10px;
  pointer-events: none;
}
body[data-page="home"] .section-invite#invite{ padding-top: 16px; }
@media (min-width: 900px){
  body[data-page="home"] .section-invite#invite{ padding-top: 32px; }
}

/* v91 — a little more air between the eyebrow and the headline, and the
   chevron up another notch. The eyebrow must not move; only what follows it. */
/* Matches the v78 formula exactly (+34px desktop / +19px mobile) with 20px
   and 18px added, so the eyebrow stays put and only the headline moves down. */
body[data-page="home"] .hero h1{
  margin-top: calc(1.05rem - .26em + 54px) !important;
}
@media (max-width: 720px){
  body[data-page="home"] .hero h1{
    margin-top: calc(1.15rem - .26em + 37px) !important;
  }
}
@media (max-width: 47.99rem){
  .hero .scroll-cue{ bottom: 5.25rem; }
}
@media (min-width: 48rem){
  .hero .scroll-cue{ bottom: 7.75rem; }
}

/* v104 — the section headlines were still at the original line-height:.98
   while the hero was raised to 1.06 in v89. On a two-line headline that read
   as cramped: 13.4px of air between capitals against the hero's 26.4px, only
   35% of cap height against the hero's 49%. Every section headline now uses
   the hero's 1.06 exactly, on all four marketing pages. */
h2, h2.closer, .section h2, .section-diff h2, .section-invite h2, .section-enter h2{
  line-height: 1.06;
}
h3{ line-height: 1.06; }

/* v105 ─────────────────────────────────────────────────────────────────────
   1. The phone menu. The panel carried min-width:13rem, so on a 360px screen
      it opened as a wide slab with "Home" and "How it works" hugging its left
      edge and a hand's width of empty surface to their right. It now shrinks
      to its own content and the labels sit against the right edge, under the
      button that opened them.
   2. The hero paragraph. It was 14.3px on a phone while the body copy under
      "By invitation only" was 16.1px — same typeface, two different sizes.
      The hero now uses the same --text-base and the same 1.6 leading as the
      section body, so the two read as one voice. Width is unchanged: the hero
      column still wraps at 29ch so it clears the photo. */
.menu-panel{
  min-width:0;
  width:max-content;
  max-width:min(78vw,20rem);
  align-items:stretch;
}
.menu-panel a{ text-align:right; }
.menu-panel .menu-cta{ text-align:right; }

.hero .lede,
.hero .lede-sub{
  font-size:var(--text-base);
  line-height:1.6!important;
  letter-spacing:0;
}

/* v106 — the hero paragraph column narrows from 29ch (267px on an S22) to
   28.5ch (262px). That is the widest setting that still breaks the first line
   after "want": "Built for adults who simply want" / "to go out and have a
   good time." Anything past 262px pulls "to" back up onto line one. */
.hero .lede,
.hero .lede-sub{ max-width:26ch; }

/* v108 — retuned to 26ch (234px) now that the real Switzer is loading. Every
   width chosen in v104-v107 was measured against a fallback typeface, because
   the Fontshare API had stopped serving the font. In genuine Switzer at 16.1px
   the line "Built for adults who simply want" is 224px and the same line plus
   "to" is 243px, so the break after "want" holds anywhere from 224px to 242px.
   26ch sits in the middle of that band with ~10px of clearance on each side,
   and the ch unit carries the same proportion up to the 18px desktop size. */

/* v107 — the scroll cue. The old chevron spanned 56px with a 2.2 stroke and
   read as a graphic in its own right. It is now a 24px mark with a 1.8 stroke:
   the same shape, a third of the width. The pulse animation, the tap target
   and the fade-out after the first scroll are unchanged. */
.scroll-cue svg{ width:1.5rem; }

/* v115 — the scroll cue on desktop only. It sat 124px off the bottom of a
   860px-tall hero with nothing under it, and at 24px it read as a speck on a
   1330px screen. On screens 1024px and wider it drops to 44px off the bottom
   and grows to 40px wide. Phones and tablets are untouched. */
@media (min-width:1024px){
  .hero .scroll-cue{ bottom: 2.75rem; width: 5rem; height: 3rem; }
  .hero .scroll-cue svg{ width: 2.5rem; }
}

/* ============================================================
   v116 — four desktop corrections and one that applies to both.
   ============================================================ */
@media (min-width:1024px){
  /* 1. The logo was 26px mark + 22.4px word on a 1330px screen — the same
        size it is on a phone. Scaled up for the desktop header only. */
  .site-header .brand-mark{ width:34px; height:34px; }
  .site-header .brand-word{ font-size:1.85rem; }

  /* 2. The EN / PT / ES pills were 10.9px type in an 8px pill. Bigger type,
        more padding, on desktop only. */
  .site-header .lang-switch{ gap:3px; padding:4px; }
  .site-header .lang-switch button{
    font-size:.8rem;
    letter-spacing:.1em;
    padding:.6rem .78rem;
  }

  /* 3. The hero headline was 76px at 1330 and 83px at 1600 — too big for the
        column it sits in. Down a decisive step: 62px at 1330, 72px ceiling. */
  .hero h1{ font-size:clamp(2.85rem, .9rem + 3.6vw, 4.5rem) !important; }

  /* 4. The bar photograph was cropped so tightly that only the backs of four
        heads were visible — no table, no drinks, no candle. The band is taller
        and the crop drops to 52%, which brings the table and the glasses into
        frame. The top and bottom fades are untouched. */
  body[data-page="home"] .photo-band-bar{ height:clamp(540px, 47vw, 660px); }
  body[data-page="home"] .photo-band-bar img{ object-position:50% 52%; }
}

/* 5. The door. The code box sat on the mountain rather than in the water
      below it. It now drops clear of the sunset into the black, on desktop
      and on the phone. The photograph itself has not moved: it still anchors
      at the top of the section with the ridge line in the same place. */

@media (min-width:1024px){

}

/* The sunset band now ends further up the section, so its lower edge is in
   view instead of hidden behind the code box. The bottom fade is deepened so
   the beach dissolves into the page black instead of stopping at a line.
   The top of the band is untouched — the ridge still anchors where it did. */
body[data-page="home"] .section-enter .section-bg-dusk:after{
  background:
    radial-gradient(70% 40% at 50% 42%, rgba(196,74,44,.06) 0%, transparent 74%),
    linear-gradient(to bottom,
      var(--color-bg) 0%,
      rgba(8,10,20,.34) 20%,
      rgba(8,10,20,.40) 56%,
      rgba(8,10,20,.72) 80%,
      rgba(8,10,20,.94) 93%,
      var(--color-bg) 100%) !important;
}

/* ============================================================
   v117 — the mobile logo, one size up, everywhere it appears.
   Marketing pages only need the base (phone) values raised; the
   desktop block above already sets its own larger pair.
   ============================================================ */
.brand-mark{ width:30px; height:30px; }
.brand-word{ font-size:1.6rem; }

/* ============================================================
   v117 — the door as the last screen, on desktop too, with the
   headline down on the water instead of up on the mountain.
   ============================================================ */
@media (min-width:1024px){
  .site-header{ padding-top:2.4rem; }

  .section-enter{
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    /* door + footer = one screen; the page cannot scroll past it */
    min-height:calc(100svh - 151px);
    padding-top:clamp(6rem, 21.5vh, 15rem) !important;
    padding-bottom:1.5rem !important;
  }
  .section-enter .enter-form{ margin-top:2.25rem !important; }
}

@media (max-width:720px){
  /* the whole block moves down onto the dark water, and the gap under the
     headline shrinks so the WhatsApp line still lands inside the screen */
  .section-enter{ padding-top:9.5rem !important; }
  .section-enter .enter-form{ margin-top:1.6rem !important; }
  body[data-page="home"] .section-enter .section-bg{ height:52% !important; }
  body[data-page="home"] .section-enter .section-bg-dusk img{ object-position:50% 15% !important; }
}

/* ============================================================
   v118 — the sunset is a photo band again, not a backdrop.
   It runs down past the mountain so the ocean and the beach
   stay visible, and the headline sits on the dark water below
   the ridge instead of up on the peaks.
   ============================================================ */
body[data-page="home"] .section-enter .section-bg{ height:76% !important; }
body[data-page="home"] .section-enter .section-bg-dusk img{
  object-position:50% 16% !important;
  filter:brightness(.94) saturate(1.14) contrast(1.03) !important;
}
body[data-page="home"] .section-enter .section-bg-dusk:after{
  background:
    linear-gradient(to bottom,
      var(--color-bg) 0%,
      rgba(8,10,20,.30) 12%,
      rgba(8,10,20,.22) 40%,
      rgba(8,10,20,.46) 66%,
      rgba(8,10,20,.80) 84%,
      rgba(8,10,20,.96) 94%,
      var(--color-bg) 100%) !important;
}

@media (max-width:720px){
  body[data-page="home"] .section-enter .section-bg{ height:70% !important; }
  body[data-page="home"] .section-enter .section-bg-dusk img{ object-position:50% 12% !important; }
}

/* ============================================================
   v118b — the door composed like every other photo band:
   the whole sunset first (sky, ridge, beach, ocean), then the
   text on the dark water at the foot of it. The one-screen lock
   is released here; the scene needs more height than the text
   was leaving it.
   ============================================================ */
.section-enter{
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  display:block !important;
}
body[data-page="home"] .section-enter .section-bg{
  height:clamp(360px, 46vw, 660px) !important;
}
body[data-page="home"] .section-enter .section-bg-dusk img{
  object-position:50% 34% !important;
  filter:brightness(1.0) saturate(1.14) contrast(1.03) !important;
}
body[data-page="home"] .section-enter .section-bg-dusk:after{
  background:
    linear-gradient(to bottom,
      var(--color-bg) 0%,
      rgba(8,10,20,.26) 10%,
      rgba(8,10,20,.16) 34%,
      rgba(8,10,20,.42) 52%,
      rgba(8,10,20,.80) 74%,
      rgba(8,10,20,.95) 88%,
      var(--color-bg) 100%) !important;
}
@media (min-width:1024px){
  .section-enter{
    padding-top:clamp(20rem, 34vw, 30rem) !important;
    padding-bottom:4rem !important;
  }
  .section-enter .enter-form{ margin-top:2.25rem !important; }
}
@media (max-width:720px){
  .section-enter{
    padding-top:15rem !important;
    padding-bottom:2.5rem !important;
  }
  .section-enter .enter-form{ margin-top:1.6rem !important; }
}

/* ============================================================
   v119 — the hero paragraph is three paragraphs now, so the
   block is retuned to fit above the scroll cue on both sizes:
   the copy starts a little higher, the gaps between paragraphs
   close, and the leading tightens a hair. Type size unchanged.
   ============================================================ */
body[data-page="home"] .hero .hero-body{ margin-top:clamp(38px, 6.5vh, 96px) !important; }
body[data-page="home"] .hero .lede{ margin-top:1.05rem !important; line-height:1.5 !important; }
body[data-page="home"] .hero .lede-after{ margin-top:.9rem !important; }
@media (min-width:1024px){
  body[data-page="home"] .hero .hero-body{ margin-top:clamp(30px, 5vh, 80px) !important; }
  body[data-page="home"] .hero .lede{ margin-top:1.1rem !important; line-height:1.52 !important; }
}

/* v119b — the column widens instead of the type shrinking: 28.5ch was tuned
   for a two-paragraph hero and left 12 lines on the phone. */
body[data-page="home"] .hero .lede{ max-width:33ch !important; line-height:1.55 !important; }
@media (min-width:1024px){
  body[data-page="home"] .hero .lede{ max-width:52ch !important; line-height:1.55 !important; }
}

/* ============================================================
   v120 — phone only. The hero paragraph drops one step in the
   type scale (16.1px -> 14.6px), the headline lifts, and the
   eyebrow stays exactly where v119 put it.
   ============================================================ */
@media (max-width:1023px){
  body[data-page="home"] .hero .lede{ font-size:14.6px !important; line-height:1.58 !important; max-width:34ch !important; }
  body[data-page="home"] .hero h1{ margin-top:.85rem !important; }
  body[data-page="home"] .hero .lede:first-of-type{ margin-top:1.35rem !important; }
}

/* ============================================================
   v122 — desktop only.
   (a) The door: the kicker and headline stay on the text axis;
       everything under them (code label, field, note, WhatsApp)
       is centred on the headline instead of on the page.
   (b) Phone: the hero paragraph narrows so line one ends at
       "alike" -- 220px, between the 204px that phrase measures
       and the 236px it would take to pull "who" up. Desktop
       hero untouched.
   ============================================================ */
@media (min-width:1024px){
  body[data-page="home"] .section-enter .enter-form,
  body[data-page="home"] .section-enter .enter-note,
  body[data-page="home"] .section-enter .wa-link{
    width:21.25rem !important; max-width:21.25rem !important;
    margin-left:0 !important; margin-right:auto !important;
    text-align:center !important;
  }
  body[data-page="home"] .section-enter .enter-form label{ display:block; text-align:center !important; }
  body[data-page="home"] .section-enter .enter-form .field-row{ justify-content:center !important; }
  body[data-page="home"] .section-enter .wa-link{ display:flex !important; flex-direction:column; align-items:center; }
}
@media (max-width:1023px){
  body[data-page="home"] .hero .lede{ max-width:220px !important; }
}

/* ============================================================
   v123
   (a) Phone: the eyebrow stays put; the headline and everything
       under it drop 20px, opening the gap under
       "DATING BY INVITATION ONLY".
   (b) Desktop: the whole door column is centred on the page, on
       the same axis as "Rio Now" in the footer -- kicker,
       headline, code field, note and WhatsApp all share it.
   ============================================================ */
@media (max-width:1023px){
  body[data-page="home"] .hero h1{ margin-top:2.1rem !important; }
}
@media (min-width:1024px){
  body[data-page="home"] .section-enter .wrap{
    margin-inline:auto !important;
    max-width:46rem !important;
    text-align:center !important;
  }
  body[data-page="home"] .section-enter .kicker,
  body[data-page="home"] .section-enter .closer{ text-align:center !important; }
  body[data-page="home"] .section-enter .enter-form,
  body[data-page="home"] .section-enter .enter-note,
  body[data-page="home"] .section-enter .wa-link{
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* ============================================================
   v124
   (a) Desktop hero: line one ends at "who simply" -- 365px sits
       between the 347px that phrase measures and the 393px it
       would take to pull "want" up. Phone untouched.
   (b) How it works, desktop only: every section centred on the
       same page axis as the homepage door and the footer.
   ============================================================ */
@media (min-width:1024px){
  body[data-page="home"] .hero .lede{ max-width:365px !important; }

  body[data-page="hiw"] .page-head .wrap,
  body[data-page="hiw"] .section .wrap{ text-align:center !important; }
  body[data-page="hiw"] .kicker,
  body[data-page="hiw"] h1, body[data-page="hiw"] h2, body[data-page="hiw"] h3,
  body[data-page="hiw"] .lede, body[data-page="hiw"] .body,
  body[data-page="hiw"] .pull, body[data-page="hiw"] .fineprint,
  body[data-page="hiw"] .price-note, body[data-page="hiw"] .steps li p{
    text-align:center !important;
  }
  body[data-page="hiw"] .lede, body[data-page="hiw"] .body,
  body[data-page="hiw"] .pull, body[data-page="hiw"] .steps li p{
    margin-left:auto !important; margin-right:auto !important;
  }
  /* lists: the block is centred, the lines inside stay left-aligned so
     the ticks and the text keep their relationship */
  body[data-page="hiw"] .ticks, body[data-page="hiw"] .swaps,
  body[data-page="hiw"] .steps{
    width:fit-content !important; max-width:100% !important;
    margin-left:auto !important; margin-right:auto !important;
    text-align:left !important;
  }
  body[data-page="hiw"] .ticks li, body[data-page="hiw"] .swaps li,
  body[data-page="hiw"] .steps li{ text-align:left !important; }
  body[data-page="hiw"] .ticks.two{ display:block !important; }
  /* the price card keeps its own internal alignment; only the card
     as a block sits on the centre axis */
  body[data-page="hiw"] .price-card,
  body[data-page="hiw"] .price-card ul,
  body[data-page="hiw"] .price-card li,
  body[data-page="hiw"] .price-unit{ text-align:left !important; }
  body[data-page="hiw"] .price-card ul{
    width:fit-content !important; margin-left:auto !important; margin-right:auto !important;
  }
  body[data-page="hiw"] .price-note{ text-align:center !important; }
}

/* v132 — the "Continue" link a signed-in member sees in the header. */
.member-return{
  align-self:center;
  font-family:var(--font-body);
  font-size:.82rem; letter-spacing:.02em; text-decoration:none;
  color:var(--color-text);
  padding:.42rem .85rem; margin-right:.15rem;
  border:1px solid rgba(247,239,227,.28); border-radius:999px;
  white-space:nowrap; transition:border-color .18s ease, background .18s ease;
}
.member-return:hover,.member-return:focus-visible{
  border-color:rgba(247,239,227,.6); background:rgba(247,239,227,.08);
}
.member-return .mr-word{ display:none; }
.member-return .mr-arrow{ display:block; font-size:1rem; line-height:1; }
@media (min-width:640px){
  .member-return .mr-word{ display:block; }
  .member-return .mr-arrow{ display:none; }
}
@media (min-width:900px){ .member-return{ font-size:.92rem; padding:.5rem 1.05rem; } }

/* v146 — the same logo treatment as the member app: bright soft-accent mark
   and italic, one shadow, so the lockup reads the same on every page. */
.brand-mark{color:var(--color-accent-soft);filter:drop-shadow(0 1px 3px rgba(6,4,10,.9))}
.brand-word-thin{color:var(--color-accent-soft)}
.brand{text-shadow:0 1px 3px rgba(6,4,10,.92),0 2px 16px rgba(6,4,10,.75)}

/* ── v157 · the name, in the logo's orange, wherever it appears in prose ──
   Applied by the tint pass appended to the page bundle. .rn-tail is only a
   carrier for the rest of the sentence and must inherit everything. */
.rn-tint{ color:var(--color-accent-soft); font-weight:500; }
.rn-tail{ color:inherit; font:inherit; letter-spacing:inherit; }

/* ══ v167 — desktop layout, and the mobile-only tail on the door line ══════
   Six things he called out from a 1512px window on 3 Sep 2026. Everything
   here is scoped to the desktop breakpoint so the phone layout he signed
   off at 360x672 is untouched. */
@media (min-width:1024px){

  /* 1. The hero has to own the whole screen. v166 already put 100dvh on it,
        which on a laptop is identical to 100vh — this restates it in plain
        vh so nothing below the fold can ever creep up into it. The html
        prefix is only there to outrank the inline block in index.html. */
  html body[data-page="home"] .hero{ min-height:100vh !important; }

  /* 2. Wider columns. The hero paragraph was running in a 320px ribbon —
        a phone column parked on a 1512px page — and "By invitation only"
        in 460px. Both now use the room. */
  /* v168 — desktop keeps the full 16.1px. The one-point reduction he asked
     for is a phone change only; the inline rule in index.html applies to
     every width, so it is put back here. */
  html body[data-page="home"] .hero .lede{ max-width:560px !important; font-size:var(--text-base) !important; line-height:1.6 !important; }
  body[data-page="home"] .hero-body{ max-width:52rem !important; }
  body[data-page="home"] .section-invite > .wrap{ max-width:40rem; }
  body[data-page="home"] .section-invite .body{ max-width:600px !important; }
  body[data-page="home"] .section-diff > .wrap{ max-width:52rem; }
  body[data-page="home"] .diff-lede{ max-width:66ch; }

  /* 3. The door. The copy was sitting in the bright part of the sunset,
        two thirds of the way up the mountain. It drops to where the
        picture has already gone dark, the way it does on the phone. */
  html body[data-page="home"] #enter{ padding-top:520px !important; }

  /* 4. The menu panel was pinned 20px off the right edge of the window
        while the button it belongs to sits a full axis in. It now hangs
        off the button. */
  body[data-page="home"] .menu-panel{ right:var(--axis); }

  /* 5. Six jump chips were falling 4 then 2. Three and three. */
  body[data-page="hiw"] .jump{
    display:grid;
    grid-template-columns:repeat(3,max-content);
    justify-content:center;
    gap:var(--space-2);
  }

  /* 6. "RIO NOW" was landing 9px under a 97px fixed header. */
  body[data-page="hiw"] .page-head,
  body[data-page="terms"] .page-head,
  body[data-page="about"] .page-head,
  body[data-page="privacy"] .page-head{
    padding-top:calc(var(--space-16) + 6rem) !important;
  }
}
/* Anchor jumps must clear the fixed header on every screen. */
html{ scroll-padding-top:7rem; }

/* The door line reads as one and a half lines on a 360px screen, leaving a
   block of black beside "Carioca lifestyle". The tail closes it to two full
   lines on the phone and is hidden on desktop, where one line is correct. */
@media (min-width:768px){
  .door-line-tail{ display:none; }
}

/* v195 — the v168 nudge is removed. It pushed the desktop hero block 27px
   lower to centre it in the band between the header and the arrow, and the
   result was 118px of dead air between the bottom of the header and the
   kicker. He asked for it to come up. Back to 147.24px, which is 91px of air
   above the kicker. Tightened again to 120px, which is 64px of air — the block
   visibly lifts and the lede still clears the arrow. The arrow is anchored
   to the bottom of the section and does not move either way. */
@media (min-width:1024px) and (min-height:780px){
  body[data-page="home"] .hero{ padding-top: 120px !important; }
}
/* Short laptop viewports keep the original position — pushing the block down
   there would crowd the arrow instead of centring anything. */

/* ============================================================
   v180 — the hero is three paragraphs again (his copy, turn 390),
   and it did not fit. Measured at 360x672, his Samsung S22:
   English ended exactly on the pixel where the scroll arrow
   begins — zero slack — Spanish collided with the arrow, and
   Portuguese ran 6px off the bottom of the screen, so the last
   line was simply not there. This buys about 31px back without
   touching type size, which is what v119 tuned and I am not
   undoing: the block starts a little higher and the gaps between
   paragraphs close a further 9px. Appended last so it wins over
   the 1.25rem gap that was overriding v119's .9rem.
   ============================================================ */
body[data-page="home"] .hero .hero-body{ margin-top:clamp(30px, 5vh, 96px) !important; }
body[data-page="home"] .hero .lede{ margin-top:.85rem !important; }
body[data-page="home"] .hero .lede-after{ margin-top:.7rem !important; }
@media (min-width:1024px){
  body[data-page="home"] .hero .lede{ margin-top:1.1rem !important; }
  body[data-page="home"] .hero .lede-after{ margin-top:.95rem !important; }
}

/* ─── Anchor landing, added v186 ───────────────────────────────────────────
   Tapping Safety in the footer was landing part-way into the section on a
   real Android phone: the browser scrolls, and while it is scrolling the
   address bar slides away, which makes the window ~100px taller and leaves
   the heading above the top of the screen. Two things fix it and neither is
   a tuned number. First, every section that can be linked to reserves the
   height of the fixed header plus a little air, so the browser's own landing
   point is already correct. Second, the script at the foot of how-it-works
   re-asserts the position once the window has stopped changing size.        */
.section[id]{ scroll-margin-top: 6.5rem; }

/* ─── v191 — the hero block lifts, the kicker does not ─────────────────────
   His instruction, turn 425: "leave hyperlocal by invitation only at exactly
   where it [is] on the page, just very slightly move what happens in Rio and
   the rest of the text up, just slightly."

   The kicker is the first child of .hero-body, so anything applied to the
   block itself would move the kicker too. The only element that can lift the
   headline and everything below it while leaving the kicker untouched is the
   gap between them, which is the h1's own top margin. Phone only; the
   desktop rules above are not in this media query and are unaffected.
   Was 2.1rem (33.6px) from the v119 block; now 1.2rem (19.2px), a 14px lift. */
@media (max-width:1023px){
  body[data-page="home"] .hero h1{ margin-top:1.2rem !important; }
}


/* ============================================================
   v192 — the price card, phone and desktop.
   .price-opt was display:flex with align-items:baseline, so the
   small-caps label's FIRST LINE sat on the baseline of a 3rem
   "US$25" — which put the top of the label far below the top of
   the amount and left a wedge of empty space beside it. His
   words: "there's sort of a weird gap where every conversation
   you have ... is lower than the top of US25, which kind of
   looks strange." Stacking removes the problem instead of
   nudging it: the amount sits on its own line, the explanation
   sits under it, left edges flush.
   ============================================================ */
body[data-page="hiw"] .price-card .price-opt{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:.55rem !important;
}
body[data-page="hiw"] .price-card .price-unit{
  /* v193 — this stopped being a label and became a sentence. Uppercase with
     .14em tracking made his 60-character line wrap to four ragged lines with
     "DAYS" alone at the bottom. Sentence case, normal tracking, one step up in
     size: it now reads as the explanation it is, in two lines. */
  text-transform:none !important;
  letter-spacing:.005em !important;
  font-size:.86rem !important;
  max-width:30ch !important;
  line-height:1.55 !important;
}

/* ── v235 — the door with the language switcher back ───────────────────────
   The header is position:fixed and transparent, so the EN/PT/ES switcher sat
   directly over the couple's faces. The header now has its own solid band and
   the photo starts underneath it at 63px instead of behind it at 0.

   Everything below is measured at 360x672, his Samsung S22. The address bar
   eats the bottom of that window, so nothing that matters is allowed near the
   edge: the Enter button finishes at 569px, the chevron at 611px, and there is
   61px of clear space under the chevron.

   "No code yet?" starts at 703px — past the bottom of the window on purpose.
   He asked for the first screen to end at the arrow, so the note keeps a 92px
   gap below the chevron and cannot creep back into view. */
@media(max-width:47.99rem){
  body[data-page="home"] .site-header{
    background:#0b0d16 !important;
    border-bottom:1px solid rgba(255,214,196,.10) !important;
  }
  body[data-page="home"] #enter.section-enter{ padding-top:15.9375rem !important; }
  body[data-page="home"] #enter .section-bg-dusk,
  body[data-page="home"] #enter .section-bg-dusk img{ height:15.75rem !important; }
  body[data-page="home"] #enter .section-bg-dusk{ top:3.9375rem !important; }
  body[data-page="home"] #enter .kicker{ margin-bottom:.75rem !important; }
  /* one size down, which also takes the paragraph from five lines to four */
  body[data-page="home"] #enter .door-line{ font-size:.9375rem !important; line-height:1.5rem !important; }
  body[data-page="home"] #enter .enter-form{ margin-top:1.125rem !important; }
  body[data-page="home"] #enter .door-cue{ margin-top:.625rem !important; }
  body[data-page="home"] #enter .enter-note{ margin-top:6rem !important; }
  /* the status line is empty until a code is typed; it was holding 20px open */
  body[data-page="home"] #enter .form-msg:empty{ min-height:0 !important; height:0 !important; margin:0 !important; overflow:hidden; }
}
/* The chevron under the button. Red, because the only other red on this screen
   is the Enter button and "already warm" — it reads as part of that family
   rather than a stray mark. It fades the moment the reader scrolls; the cue
   script toggles body.cue-gone at 24px of movement. */
.door-cue{
  display:flex; justify-content:center; align-items:center;
  width:100%; margin-top:1rem; line-height:0;
  color:#e05a2b; opacity:1;
  transition:opacity .28s ease;
}
.door-cue svg{ display:block; }
body.cue-gone .door-cue{ opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce){ .door-cue{ transition:none; } }

/* ── v236 — a smaller arrow that moves, and a label in plain words ─────────
   The chevron was 28x16 and still. It is 21x12 now and rides up and down on a
   slow two-second loop, far enough to catch the eye (5px, upward only, so it never
   drifts closer to the bottom edge) and slow enough not to nag. The fade on scroll still wins: once body.cue-gone is set the whole
   thing goes to zero opacity, animation and all.

   The label above the box was small-caps with wide tracking, which turned
   three words into a sign. It is a sentence now — "Enter your code", set in
   normal case at 15px, no tracking. */
body[data-page="home"] #enter .enter-form label{
  text-transform:none !important;
  letter-spacing:normal !important;
  font-size:.9375rem !important;
  font-weight:500 !important;
}
@keyframes doorCueBob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}
.door-cue svg{ animation:doorCueBob 2s ease-in-out infinite; }
body.cue-gone .door-cue svg{ animation:none; }
@media(prefers-reduced-motion:reduce){ .door-cue svg{ animation:none; } }

/* ── v237 — a smaller Enter, and a label that sits over the box ────────────
   The button was .5rem/1.05rem at --text-xs. It comes down to .4rem/.85rem at
   13px, which is smaller without being a target you have to aim at.
   The label's horizontal padding is set in index.html, measured from the real
   button, so it works in every language. */
body[data-page="home"] #enter .enter-form .field-row .btn{
  padding:.4rem .85rem !important;
  font-size:.8125rem !important;
}

/* v239 — rule 19: "Rio Now" in running text is always orange, in every
   language. .brand is the header logo link and is deliberately untouched. */
.rn{color:#f09050!important;font-style:normal;white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════════════════
   v240 — the door on a desktop screen.

   He opened meetrionow.com on a Mac for the first time since the homepage
   became a single screen and said it looked "super zoomed". It did, and the
   reason is that every number on this page was tuned for a 360px phone while
   two old desktop rules were still describing a page that no longer exists.

   Measured at 1330x860 before this block:
     • #enter carried padding-top:520px. That number was set in v166, when the
       door was the FOURTH section of a long homepage and the copy had to fall
       past the bright part of the sunset. The door is now the only section and
       starts at the top of the document, so 520px simply shoved everything
       down and the page scrolled to 1289px for one screen of content.
     • .section-bg-dusk was 612px tall across a 1330px window. The source file
       is 1200x810, so cover scaled it 1.11x and then showed only the top 612px
       of it — a phone crop stretched across a laptop. That is the zoom.
     • The code box was 208px wide with a 63px button at 13px type, and the word
       "Enter" wrapped inside it to "Ent / er".
     • 6rem sat above "No code yet?", leaving a band of dead black between the
       WhatsApp button and the footer.

   Everything below is inside min-width:768px and cannot reach his Samsung.
   The phone is measured again after this block and is unchanged to the pixel.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:768px){

  /* The photograph becomes the whole screen instead of a band across the top.
     Same file, same 1.11x scale — but 860px of it is visible instead of 612px,
     so you see the mountain, the sky and both of them rather than one face
     filling the window. That is what stops it reading as zoomed. */
  html body[data-page="home"] #enter{
    position:relative;
    min-height:100vh !important;
    padding-top:max(7rem, calc(100vh - 35.625rem)) !important;
    padding-bottom:3rem !important;
  }
  html body[data-page="home"] #enter .section-bg-dusk,
  html body[data-page="home"] #enter .section-bg-dusk img{
    top:0 !important; height:100% !important; inset:0 !important;
  }
  /* v241 — the desktop photograph is a different file.
     enter-sunset-v246.jpg is 900x1352, a portrait picture made for a phone.
     On a 1330x720 laptop window `cover` has to scale it 1.48x and then throw
     away nearly two thirds of its height, which cut the peak off Sugarloaf,
     cut the tops of their heads off, and filled the screen with the one part
     of the frame that is pure orange sky. No crop of a portrait photograph
     survives a 16:9 window. The desktop gets its own landscape frame of the
     same scene — both of them whole, the mountain whole, and graded down to a
     late dusk instead of a saturated sunset. The phone keeps v233 untouched. */
  html body[data-page="home"] #enter .section-bg-dusk{
    background-image:url("../assets/hero-noc-sunset-wide-v252.jpg") !important;
    background-size:cover !important;
    background-position:50% 55% !important;
    background-repeat:no-repeat !important;
    background-color:#080a14 !important;
  }
  html body[data-page="home"] #enter .section-bg-dusk img{ display:none !important; }

  /* The picture dissolves into black under the headline, the way it does on the
     phone, so the copy is never sitting on the bright half of the sunset. */
  html body[data-page="home"] #enter .section-bg-dusk:after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(to bottom,
      rgba(8,10,20,.78) 0%,
      rgba(8,10,20,.44) 11%,
      rgba(8,10,20,.16) 21%,
      rgba(8,10,20,.24) 32%,
      rgba(8,10,20,.52) 46%,
      rgba(8,10,20,.78) 62%,
      rgba(8,10,20,.93) 78%,
      rgba(8,10,20,.97) 100%) !important;
  }
  html body[data-page="home"] #enter > .wrap{ position:relative; z-index:2; }

  /* Desktop type. The phone sizes were running at full width on a laptop. */
  html body[data-page="home"] #enter h2.closer{
    font-size:54px !important; line-height:1.06 !important;
  }
  html body[data-page="home"] #enter .door-line{
    font-size:1.125rem !important; line-height:1.65 !important;
    max-width:48rem !important; margin-left:auto !important; margin-right:auto !important;
    text-wrap:balance;
  }

  /* The code row at a size you can actually hit, and "Enter" on one line. */
  html body[data-page="home"] #enter .enter-form{ margin-top:1.5rem !important; }
  html body[data-page="home"] #enter .enter-form .field-row{
    max-width:24rem !important; width:100% !important;
  }
  html body[data-page="home"] #enter .enter-form .field-row input#code{
    flex:1 1 auto !important; width:auto !important;
    padding:.72rem 1rem !important; font-size:1rem !important;
  }
  html body[data-page="home"] #enter .enter-form .field-row .btn.btn-primary{
    white-space:nowrap !important; font-size:.9rem !important; flex:0 0 auto !important;
    padding:.72rem 1.4rem !important; font-size:.875rem !important;
  }

  /* The dead band above "No code yet?" — 6rem was a phone number. */
  html body[data-page="home"] #enter .door-cue{ margin-top:1rem !important; }
  html body[data-page="home"] #enter .enter-note{
    margin-top:2rem !important;
    width:38rem !important; max-width:38rem !important;
    margin-left:auto !important; margin-right:auto !important;
  }

  /* The badge and the words sit side by side on a wide screen instead of
     stacking, which is 46px of height back and reads as one button. */
  html body[data-page="home"] .section-enter .wa-link{
    display:flex !important; flex-direction:row !important; align-items:center !important;
    gap:.85rem !important; width:max-content !important; max-width:none !important;
    margin:1.5rem auto 0 !important;
  }
  html body[data-page="home"] .section-enter .wa-badge{
    width:2.5rem !important; height:2.5rem !important;
  }
  html body[data-page="home"] .section-enter .wa-badge svg{ width:1.55rem !important; height:1.55rem !important; }

  /* v242 — the arrow is a scroll cue. On desktop the whole door already fits in
     the window, so it pointed at nothing. It stays on the phone, where there is
     more page underneath it. */
  html body[data-page="home"] #enter .door-cue{ display:none !important; }

  /* v245 — the sky behind the header is bright orange now, and the logo was
     disappearing into it. A soft dark halo under the mark and the wordmark,
     which does not touch the mark's own colour. */
  html body[data-page="home"] #siteHeader .brand{
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 3px 8px rgba(0,0,0,.9)) drop-shadow(0 10px 30px rgba(0,0,0,.8)) !important;
  }
  html body[data-page="home"] #enter .kicker{
    text-shadow:0 1px 3px rgba(0,0,0,.8), 0 8px 26px rgba(0,0,0,.55) !important;
  }
}

/* ── v246 — the space under the box closes once you scroll ─────────────────
   On the phone the arrow sits in a gap under the code box, and when it fades
   out on scroll its space stayed behind: a black hole between the box and
   "No code yet". Now the arrow's space collapses with it, and the note and
   everything under it ride up to a normal distance from the box. */
@media (max-width:767px){
  .door-cue{ overflow:hidden; transition:opacity .28s ease, height .34s ease, margin .34s ease; }
  body[data-page="home"] #enter .enter-note{ transition:margin-top .34s ease; }
  body.cue-gone .door-cue{ height:0 !important; margin-top:0 !important; margin-bottom:0 !important; }
  html body.cue-gone[data-page="home"] #enter .enter-note{ margin-top:2.25rem !important; }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .door-cue{ transition:none; }
  body[data-page="home"] #enter .enter-note{ transition:none; }
}

/* ── v246 — the footer is on the first screen on desktop ───────────────────
   The door section was exactly 100vh, so the footer sat one screen down with
   no arrow to say so and it read as missing. On desktop the section gives the
   footer its band back, and the footer itself is compact: the mark and the
   address line go, the rest sits on two tight lines. The phone is untouched. */
@media (min-width:768px){
  html body[data-page="home"] #enter{
    min-height:calc(100vh - 5.9375rem) !important;
    padding-top:max(7rem, calc(100vh - 40.5rem)) !important;
    padding-bottom:2.75rem !important;
  }
  html body[data-page="home"] .site-footer{
    padding:.6rem 0 .75rem !important;
    min-height:0 !important;
  }
  html body[data-page="home"] .site-footer .footer-mark{ width:1.35rem !important; height:1.35rem !important; margin:0 auto .1rem !important; }
  html body[data-page="home"] .site-footer .footer-word{ font-size:1rem !important; margin:0 0 .15rem !important; line-height:1.1 !important; }
  html body[data-page="home"] .site-footer .footer-line{ font-size:.75rem !important; margin:0 0 .35rem !important; }
  html body[data-page="home"] .site-footer .footer-nav{ margin:0 0 .35rem !important; }
  html body[data-page="home"] .site-footer .footer-fine{ margin:0 !important; font-size:.75rem !important; }
}

/* ── v247 — desktop only: a readable eyebrow, a bigger headline, the whole
   footer on the screen, a smaller note and a larger WhatsApp button ────── */
@media (min-width:768px){
  html body[data-page="home"] #enter .kicker{
    font-size:.875rem !important; letter-spacing:.26em !important;
    color:#ffe6cf !important; font-weight:600 !important;
    text-shadow:0 1px 3px rgba(0,0,0,.9), 0 4px 14px rgba(0,0,0,.75) !important;
    margin-bottom:.85rem !important;
  }
  html body[data-page="home"] #enter .closer{ font-size:3.5rem !important; line-height:1.06 !important; }
  html body[data-page="home"] #enter .enter-note{ font-size:.8125rem !important; }
  html body[data-page="home"] .section-enter .wa-badge{ width:3.1rem !important; height:3.1rem !important; }
  html body[data-page="home"] .section-enter .wa-badge svg{ width:1.85rem !important; height:1.85rem !important; }
  html body[data-page="home"] .section-enter .wa-link{ font-size:.8125rem !important; }
}

@media (min-width:768px){
  /* v247 — the room for a bigger headline comes out of the gaps, not the type. */
  html body[data-page="home"] #enter .kicker{ margin-bottom:.6rem !important; }
  html body[data-page="home"] #enter .door-line{ margin-bottom:1.125rem !important; }
  html body[data-page="home"] #enter .enter-note{ margin-top:1.125rem !important; }
}

/* ── scratch mockup — phone, black, everything on one screen ─────────────── */
@media (max-width:767px){
  html body[data-page="home"] #enter .section-bg-dusk{ display:none !important; }
  html body[data-page="home"] #enter{ background:#000 !important; }
  html body[data-page="home"]{ background:#000 !important; }
  html body[data-page="home"] #enter.section-enter{
    padding-top:3.75rem !important; padding-bottom:1.25rem !important; min-height:0 !important;
  }
  html body[data-page="home"] #enter .kicker{ margin-bottom:.5rem !important; }
  html body[data-page="home"] #enter .door-line{ margin-top:.5rem !important; margin-bottom:1rem !important; }
  html body[data-page="home"] #enter .enter-form{ margin-top:.75rem !important; }
  html body[data-page="home"] #enter .door-cue{ display:none !important; }
  html body[data-page="home"] #enter .enter-note{ margin-top:1.25rem !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-top:1rem !important; }
  html body[data-page="home"] .site-footer{ padding:.7rem 0 .8rem !important; }
  html body[data-page="home"] .site-footer .footer-mark{ width:1.25rem !important; height:1.25rem !important; margin:0 auto .1rem !important; }
  html body[data-page="home"] .site-footer .footer-word{ font-size:.95rem !important; margin:0 0 .2rem !important; }
  html body[data-page="home"] .site-footer .footer-nav{ margin:0 !important; }
}
@media (max-width:767px){
  html body[data-page="home"] #siteHeader{ background:#000 !important; border-bottom-color:rgba(255,255,255,.06) !important; }
  html body[data-page="home"] .site-footer{ background:#000 !important; border-top:1px solid rgba(255,255,255,.08) !important; }
}
@media (max-width:767px){
  /* footer nailed to the bottom of the screen, whatever the content does */
  html body[data-page="home"]{ min-height:100vh !important; display:flex !important; flex-direction:column !important; }
  html body[data-page="home"] main{ flex:1 0 auto !important; }
  html body[data-page="home"] .site-footer{ margin-top:auto !important; }
  /* everything a size down, and the air goes back between the blocks */
  html body[data-page="home"] #enter.section-enter{ padding-top:4.9rem !important; padding-bottom:1.5rem !important; }
  html body[data-page="home"] #enter .closer{ font-size:2.35rem !important; line-height:1.12 !important; }
  html body[data-page="home"] #enter .door-line{ font-size:.9375rem !important; line-height:1.5rem !important; margin-top:.9rem !important; margin-bottom:1.4rem !important; }
  html body[data-page="home"] #enter .enter-form label{ font-size:.875rem !important; }
  html body[data-page="home"] #enter .enter-note{ font-size:.9375rem !important; margin-top:2.25rem !important; width:auto !important; max-width:20rem !important; white-space:nowrap !important; font-size:.9rem !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-top:2.15rem !important; font-size:.6875rem !important; }
  html body[data-page="home"] .section-enter .wa-badge{ width:2.4rem !important; height:2.4rem !important; }
  html body[data-page="home"] .section-enter .wa-badge svg{ width:1.35rem !important; height:1.35rem !important; }
}
@media (max-width:767px){
  /* the code cluster is one tight group, pushed down to the footer;
     all the freed air goes to the words at the top */
  html body[data-page="home"] #enter.section-enter{
    display:flex !important; flex-direction:column !important;
    padding-bottom:1.25rem !important;
  }
  html body[data-page="home"] #enter .wrap{ display:flex !important; flex-direction:column !important; flex:1 0 auto !important; }
  html body[data-page="home"] #enter .door-line{ margin-bottom:0 !important; }
  html body[data-page="home"] #enter .enter-form{ margin-top:auto !important; }
  html body[data-page="home"] #enter .enter-note{ margin-top:1.05rem !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-top:.9rem !important; }
}
@media (max-width:767px){
  html body[data-page="home"] main{ display:flex !important; flex-direction:column !important; }
  html body[data-page="home"] #enter.section-enter{ flex:1 0 auto !important; }
}
@media (max-width:767px){
  /* a slightly shallower box and button, and the words start a little lower */
  html body[data-page="home"] #enter .field-row input{ padding-top:.5rem !important; padding-bottom:.5rem !important; min-height:0 !important; }
  html body[data-page="home"] #enter .field-row button{ padding-top:.42rem !important; padding-bottom:.42rem !important; }
  html body[data-page="home"] #enter.section-enter{ padding-top:6.4rem !important; }
}
@media (max-width:767px){
  html body[data-page="home"] #enter .field-row input#code{ height:2.05rem !important; line-height:1.2 !important; }
  html body[data-page="home"] #enter .field-row button{ height:2.05rem !important; line-height:1 !important; }
}
@media (max-width:767px){
  html body[data-page="home"] #enter .enter-form label{ font-size:.8125rem !important; }
  html body[data-page="home"] #enter .enter-note{ font-size:.8125rem !important; }
  html body[data-page="home"] .section-enter .wa-link{ font-size:.625rem !important; }
  /* the mark sits beside the wordmark, so the footer is one band shorter */
  html body[data-page="home"] .site-footer{
    display:flex !important; flex-wrap:wrap !important; align-items:center !important;
    justify-content:center !important; column-gap:.5rem !important; row-gap:.35rem !important;
    padding-top:.6rem !important; padding-bottom:.6rem !important;
  }
  html body[data-page="home"] .site-footer .footer-mark{ width:1.15rem !important; height:1.15rem !important; margin:0 !important; }
  html body[data-page="home"] .site-footer .footer-word{ margin:0 !important; font-size:1rem !important; }
  html body[data-page="home"] .site-footer .footer-nav{ flex:0 0 100% !important; margin:0 !important; }
}

@media (max-width:767px){ html body[data-page="home"] .site-footer .footer-mark{ position:relative !important; top:-2px !important; } }

@media (max-width:767px){ html body[data-page="home"] #enter .field-row input#code{ height:1.8rem !important; } html body[data-page="home"] #enter .field-row button{ height:1.8rem !important; } }
@media (max-width:767px){
  html body[data-page="home"] .section-enter .wa-link .wa-words{ display:none !important; }
  html body[data-page="home"] .section-enter .wa-badge{ width:2.9rem !important; height:2.9rem !important; }
  html body[data-page="home"] .section-enter .wa-badge svg{ width:1.65rem !important; height:1.65rem !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-top:1rem !important; gap:0 !important; }
  html body[data-page="home"] #enter.section-enter{ padding-bottom:.85rem !important; }
}

@media (max-width:767px){
 html body[data-page="home"] #enter .enter-form label{ margin-bottom:.3rem !important; }
 html body[data-page="home"] #enter .enter-note{ margin-top:.6rem !important; }
}

@media (max-width:767px){ html body[data-page="home"] #enter .enter-form label{ margin-bottom:0 !important; } html body[data-page="home"] #enter .field-row{ margin-top:.25rem !important; } }

@media (max-width:767px){ html body[data-page="home"] #enterForm{ gap:0 !important; } html body[data-page="home"] #enter .field-row{ margin-top:.4rem !important; } }

@media (max-width:767px){ html body[data-page="home"] .section-enter .wa-badge{ background:#c8452f !important; box-shadow:0 6px 22px rgba(200,69,47,.32), inset 0 2px 0 rgba(255,255,255,.18) !important; color:#fff3ea !important; } }
@media (max-width:767px){
  /* footer logo = header logo: orange mark, cream Rio, orange Now */
  html body[data-page="home"] .site-footer .footer-mark{ color:#f0a173 !important; }
  html body[data-page="home"] .site-footer .footer-word{ color:#f7efe3 !important; }
  html body[data-page="home"] .site-footer .footer-word .footer-now{ color:#f0a173 !important; margin-left:.22em !important; }
  /* header, one step down */
  html body[data-page="home"] #siteHeader{ padding-top:.55rem !important; padding-bottom:.55rem !important; }
  html body[data-page="home"] #siteHeader .brand-word{ font-size:1.375rem !important; }
  html body[data-page="home"] #siteHeader .brand-mark{ width:1.6rem !important; height:1.6rem !important; }
  html body[data-page="home"] .lang-switch{ transform:scale(.86) !important; transform-origin:right center !important; }
}
@media (max-width:767px){
  html body[data-page="home"] .section-enter .wa-badge svg{ width:1.85rem !important; height:1.85rem !important; }
}

@media (max-width:767px){ html body[data-page="home"] .section-enter .wa-badge{ width:46px !important; height:46px !important; border-radius:50% !important; box-shadow:0 0 20px rgba(200,69,47,.30) !important; } }

@media (max-width:767px){ html body[data-page="home"] .section-enter .wa-badge svg{ transform:translate(2.28px,-1.9px) !important; } }

@media (max-width:767px){ html body[data-page="home"] .section-enter .wa-badge svg{ transform:none !important; width:1.6rem !important; height:1.6rem !important; } }

@media (max-width:767px){ html body[data-page="home"] .section-enter .wa-badge svg{ width:1.6rem !important; height:1.6rem !important; transform:translate(1.98px,-1.65px) !important; } }

@media (max-width:767px){ html body[data-page="home"] .section-enter .wa-badge svg{ width:1.6rem !important; height:1.6rem !important; transform:none !important; } }

@media (max-width:767px){
 html body[data-page="home"] #enter .section-bg-dusk{ display:block !important; }
 html body[data-page="home"] #enter .section-bg-dusk img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:50% 30% !important; filter:brightness(.72) saturate(1.08) !important; }
 html body[data-page="home"] #enter .section-bg-dusk:after{ background:linear-gradient(to bottom, rgba(8,10,20,.30) 0%, rgba(8,10,20,.55) 45%, rgba(8,10,20,.92) 100%) !important; }
}

@media (max-width:767px){
 html body[data-page="home"] #enter .section-bg-dusk{ height:100% !important; inset:0 !important; }
 html body[data-page="home"] #enter .section-bg-dusk img{ object-position:50% 38% !important; }
 html body[data-page="home"] #enter .section-bg-dusk:after{ background:linear-gradient(to bottom, rgba(8,10,20,.34) 0%, rgba(8,10,20,.42) 30%, rgba(8,10,20,.72) 46%, rgba(8,10,20,.95) 58%, #000 68%, #000 100%) !important; }
}

@media (max-width:767px){
 html body[data-page="home"] #enter .section-bg-dusk{ height:62% !important; inset:0 0 auto !important; }
 html body[data-page="home"] #enter .section-bg-dusk img{ object-position:50% 100% !important; }
 html body[data-page="home"] #enter .section-bg-dusk:after{ background:linear-gradient(to bottom, rgba(8,10,20,.30) 0%, rgba(8,10,20,.26) 30%, rgba(8,10,20,.48) 58%, rgba(8,10,20,.86) 82%, #000 100%) !important; }
}

@media (max-width:767px){
 html body[data-page="home"] #enter.section-enter{ padding-top:214px !important; }
 html body[data-page="home"] #enter .section-bg-dusk{ height:78% !important; }
}

@media (max-width:767px){
  html body[data-page="home"] #enter.section-enter{ padding-top:158px !important; }
  html body[data-page="home"] #enter .section-bg-dusk{ height:82% !important; inset:0 0 auto !important; }
  html body[data-page="home"] #enter .section-bg-dusk img{ filter:brightness(1.10) saturate(1.12) contrast(1.02) !important; object-position:50% 100% !important; }
  html body[data-page="home"] #enter .section-bg-dusk:after{
    background:linear-gradient(to right, rgba(4,5,10,.88) 0%, rgba(4,5,10,.70) 34%, rgba(4,5,10,.24) 64%, rgba(4,5,10,0) 100%),
               linear-gradient(to bottom, rgba(8,10,20,.16) 0%, rgba(8,10,20,.06) 42%, rgba(8,10,20,.34) 74%, rgba(8,10,20,.86) 92%, #000 100%) !important;
  }
}

@media (max-width:767px){
  html body[data-page="home"] #enter.section-enter{ padding-top:105px !important; }
  html body[data-page="home"] #enter .door-line{ max-width:14rem !important; }
}

@media (max-width:767px){
  html body[data-page="home"] #enter .closer{ font-size:2.6rem !important; line-height:1.1 !important; }
  html body[data-page="home"] #enter .kicker{ font-size:.6875rem !important; }
  html body[data-page="home"] #enter .section-bg-dusk:after{
    background:linear-gradient(to bottom, rgba(4,5,10,0) 28%, rgba(4,5,10,.34) 44%, rgba(4,5,10,.34) 68%, rgba(4,5,10,0) 84%),
               linear-gradient(to right, rgba(4,5,10,.88) 0%, rgba(4,5,10,.70) 34%, rgba(4,5,10,.24) 64%, rgba(4,5,10,0) 100%),
               linear-gradient(to bottom, rgba(8,10,20,.16) 0%, rgba(8,10,20,.06) 42%, rgba(8,10,20,.34) 74%, rgba(8,10,20,.86) 92%, #000 100%) !important;
  }
}

@media (max-width:767px){
  html body[data-page="home"] #enter .closer{ font-size:2.85rem !important; line-height:1.08 !important; }
  html body[data-page="home"] #enter .kicker{ font-size:.625rem !important; }
  html body[data-page="home"] #enter .section-bg-dusk:after{
    background:linear-gradient(to bottom, rgba(4,5,10,0) 26%, rgba(4,5,10,.52) 42%, rgba(4,5,10,.52) 68%, rgba(4,5,10,0) 84%),
               linear-gradient(to right, rgba(4,5,10,.88) 0%, rgba(4,5,10,.70) 34%, rgba(4,5,10,.24) 64%, rgba(4,5,10,0) 100%),
               linear-gradient(to bottom, rgba(8,10,20,.16) 0%, rgba(8,10,20,.06) 42%, rgba(8,10,20,.34) 74%, rgba(8,10,20,.86) 92%, #000 100%) !important;
  }
  html body[data-page="home"] .site-footer{ background:#1b1c38 !important; border-top:1px solid rgba(247,239,227,.08) !important; }
}

@media (max-width:767px){
  html body[data-page="home"] .site-footer{ background:#2a0d16 !important; }
  html body[data-page="home"] #enter .section-bg-dusk img{ filter:brightness(1.0) saturate(1.06) contrast(1.02) !important; }
  html body[data-page="home"] #enter .section-bg-dusk:after{
    background:linear-gradient(to bottom, rgba(4,5,10,0) 26%, rgba(4,5,10,.30) 42%, rgba(4,5,10,.30) 68%, rgba(4,5,10,0) 84%),
               linear-gradient(to right, rgba(4,5,10,.55) 0%, rgba(4,5,10,.34) 34%, rgba(4,5,10,.08) 64%, rgba(4,5,10,0) 100%),
               linear-gradient(to bottom, rgba(8,10,20,.14) 0%, rgba(8,10,20,.04) 42%, rgba(8,10,20,.32) 74%, rgba(8,10,20,.86) 92%, #000 100%) !important;
  }
}

@media (max-width:767px){
  html body[data-page="home"] #enter .door-line{ max-width:17.5rem !important; font-size:.9375rem !important; line-height:1.55 !important; }
  html body[data-page="home"] #enter .door-line-2{ margin-top:.85rem !important; }
}

@media (max-width:767px){
  html body[data-page="home"] #enter .door-line{ line-height:1.5 !important; }
  html body[data-page="home"] #enter .door-line-2{ margin-top:.7rem !important; }
  html body[data-page="home"] #enter.section-enter{ padding-top:98px !important; }
}

@media (max-width:767px){
  html body[data-page="home"] #enter .closer{ line-height:.95 !important; }
  html body[data-page="home"] #enter .door-line{ font-size:.875rem !important; }
}

@media (max-width:767px){
  html body[data-page="home"] #enter .door-line{ max-width:14.5rem !important; }
}

@media (max-width:767px){
  html body[data-page="home"] .wa-badge{ width:40px !important; height:40px !important; box-shadow:0 0 17px rgba(200,69,47,.30) !important; }
  html body[data-page="home"] .wa-badge svg{ width:1.4rem !important; height:1.4rem !important; }
  html body[data-page="home"] #enterForm label[for="code"]{ color:#e0553c !important; }
  html body[data-page="home"] #enterForm{ margin-top:auto !important; padding-top:1.25rem !important; }
}

@media (max-width:767px){
  html body[data-page="home"] .section-enter .wa-badge{ width:38px !important; height:38px !important; box-shadow:0 0 16px rgba(200,69,47,.30) !important; }
  html body[data-page="home"] .section-enter .wa-badge svg{ width:1.325rem !important; height:1.325rem !important; transform:none !important; }
}

/* v249 — fit on every phone, not just a 672-tall one.
   Real Chrome on Android reports 100vh as the LARGE viewport — the height the
   page would have if the address bar were hidden. It is not the height he can
   see. On his S22 the visible height with the address bar showing is about 641,
   so a page built to 100vh pushed the footer off the bottom. svh is the small
   viewport: the height that is always visible, whatever the browser chrome is
   doing. Everything vertical is now capped against svh as well as pixels, so
   the whole door fits on a short phone and simply breathes on a tall one. */
@media (max-width:767px){
  html body[data-page="home"]{ min-height:100svh !important; }
  html body[data-page="home"] #enter.section-enter{
    padding-top:min(72px, 9svh) !important; padding-bottom:0 !important; }
  html body[data-page="home"] #enter .wrap{ justify-content:center !important; }
  html body[data-page="home"] #enter .closer{ font-size:min(2.85rem, 7svh) !important; }
  html body[data-page="home"] #enter .door-line{ margin-top:min(.9rem, 2.2svh) !important; }
  html body[data-page="home"] #enter .door-line-2{ margin-top:min(.7rem, 1.8svh) !important; }
  html body[data-page="home"] #enter .enter-form{ margin-top:min(1.15rem, 2.8svh) !important; padding-top:0 !important; }
  html body[data-page="home"] #enter .wa-wrap,
  html body[data-page="home"] #enter .wa-line,
  html body[data-page="home"] #enter .wa-cta{ margin-top:min(1.6rem, 3.6svh) !important; }
}

/* v250 — About us reads as one column of one size. The lede was 1.25rem and sat
   in its own section, which put a full section's padding between it and the rest. */
body[data-page="about"] .page-head .body{ font-size:1rem !important; line-height:1.6 !important; color:var(--color-text) !important; }
body[data-page="about"] .page-head .body + .body{ margin-top:1.1rem !important; }
body[data-page="about"] .page-head .body:first-of-type{ margin-top:1.4rem !important; }


/* ── v251 — the desktop gets the same picture and the same shape as the phone ─
   Desktop was still on enter-sunset-wide-v245.jpg (the couple) with the copy
   centred across the whole window. It is now the same photograph as the phone —
   Dois Irmãos over Ipanema — graded the same way at 1800x1013: left side down
   60%, right side up 26% and warmer, cross-faded on a smoothstep, and a soft
   oval taking 34% of the light out where the copy sits. The copy moves to the
   dark left side and left-aligns in one narrow column, exactly like the phone,
   instead of running centred across the bright half of the sky. */
@media (min-width:768px){
  html body[data-page="home"] #enter > .wrap{
    max-width:none !important; width:100% !important;
    padding-left:clamp(2.5rem, 7vw, 7rem) !important; padding-right:2rem !important;
    text-align:left !important; align-items:flex-start !important;
  }
  html body[data-page="home"] #enter .kicker,
  html body[data-page="home"] #enter h2.closer,
  html body[data-page="home"] #enter .door-line,
  html body[data-page="home"] #enter .enter-note{
    text-align:left !important; margin-left:0 !important; margin-right:0 !important;
  }
  html body[data-page="home"] #enter .door-line{
    font-size:1.0625rem !important; line-height:1.6 !important;
    max-width:27rem !important; text-wrap:initial !important;
  }
  html body[data-page="home"] #enter .enter-note{
    width:auto !important; max-width:27rem !important; margin-top:1.5rem !important;
  }
  html body[data-page="home"] #enter .enter-form{ width:100% !important; align-items:flex-start !important; }
  html body[data-page="home"] #enter .enter-form label[for="code"]{ text-align:left !important; display:block !important; }
  html body[data-page="home"] #enter .enter-form .field-row{ margin-left:0 !important; margin-right:0 !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-left:0 !important; margin-right:0 !important; }
  /* The photograph carries its own fade now, so the flat black wash over it
     comes back to a light vignette instead of a second, doubled gradient. */
  html body[data-page="home"] #enter .section-bg-dusk:after{
    background:linear-gradient(to bottom,
      rgba(8,10,20,.55) 0%,
      rgba(8,10,20,.20) 14%,
      rgba(8,10,20,.06) 30%,
      rgba(8,10,20,.10) 48%,
      rgba(8,10,20,.34) 68%,
      rgba(8,10,20,.72) 88%,
      rgba(8,10,20,.92) 100%) !important;
  }
}

/* v251b — the desktop door fits the window again.
   Moving the copy into a 27rem column on the left made it taller than the
   centred full-width version, so the page had grown a scrollbar. The section is
   now sized against svh like the phone, the block is centred between header and
   footer, and every vertical gap is capped against the window height. */
@media (min-width:768px){
  html body[data-page="home"] #enter{
    min-height:calc(100svh - 5.9375rem) !important;
    display:flex !important; align-items:center !important;
    padding-top:max(6.25rem, min(8rem, 11svh)) !important; padding-bottom:min(2rem, 3svh) !important;
  }
  html body[data-page="home"] #enter > .wrap{ width:100% !important; }
  html body[data-page="home"] #enter h2.closer{ font-size:min(54px, 6.6svh) !important; }
  html body[data-page="home"] #enter .door-line{ margin-top:min(1.1rem, 2svh) !important; font-size:1rem !important; line-height:1.45 !important; }
  html body[data-page="home"] #enter .door-line-2{ margin-top:min(.7rem, 1.6svh) !important; }
  html body[data-page="home"] #enter .enter-form{
    margin-top:min(1.5rem, 2.6svh) !important; margin-left:0 !important; margin-right:auto !important;
    justify-items:start !important; text-align:left !important; max-width:27rem !important; width:100% !important;
  }
  html body[data-page="home"] #enter .enter-note{ margin-top:min(1.25rem, 2.2svh) !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-top:min(1.25rem, 2.2svh) !important; }
}

/* Only a window tall enough to hold the door gets pinned to it. A short laptop
   window keeps the door at its natural height and scrolls, which is better than
   the WhatsApp button sliding under the footer. */
@media (min-width:768px) and (min-height:700px){
  html body[data-page="home"] #enter{ height:calc(100svh - 5.9375rem) !important; }
}
@media (min-width:768px){
  html body[data-page="home"] #enterForm label[for="code"]{ color:#e0553c !important; }
}

/* ── v252 — the desktop door, centred, and "The door" back in its own colour ──
   Three things he called out on the Mac: the copy was jammed against the left
   edge, the kicker had been left the pale cream v247 gave it for a bright sky
   (the phone's is orange), and the code box, the invitation line and the
   WhatsApp button were hanging off the left instead of sitting on the centre
   line. The block is now centred on the page and the logo lines up with it. */
@media (min-width:768px){
  html body[data-page="home"] #enter .kicker{ color:#f0a173 !important; }

  html body[data-page="home"] #enter > .wrap{
    padding-left:0 !important; padding-right:0 !important;
  }
  html body[data-page="home"] #enter .kicker,
  html body[data-page="home"] #enter h2.closer,
  html body[data-page="home"] #enter .door-line{
    width:27rem !important; max-width:27rem !important;
    margin-left:auto !important; margin-right:auto !important;
    text-align:left !important;
  }
  /* The code label, the box, the invitation line and the WhatsApp button sit on
     the centre line of the page. */
  html body[data-page="home"] #enter .enter-form{
    width:27rem !important; max-width:27rem !important;
    margin-left:auto !important; margin-right:auto !important;
    justify-items:center !important; text-align:center !important;
  }
  html body[data-page="home"] #enter .enter-form label[for="code"]{ text-align:center !important; }
  html body[data-page="home"] #enter .enter-form .field-row{ margin-left:auto !important; margin-right:auto !important; }
  html body[data-page="home"] #enter .enter-note{
    width:27rem !important; max-width:27rem !important;
    margin-left:auto !important; margin-right:auto !important; text-align:center !important;
  }
  html body[data-page="home"] .section-enter .wa-link{
    margin-left:auto !important; margin-right:auto !important;
  }

  /* The wordmark lines up with the left edge of the copy instead of floating
     somewhere between the edge of the window and the headline. */
  html body[data-page="home"] #siteHeader .brand{
    position:absolute !important; left:calc(50% - 13.5rem) !important;
    top:50% !important; transform:translateY(-50%) !important; margin:0 !important;
  }
}
@media (min-width:768px){
  /* The wordmark is absolutely placed now, so the language buttons need to be
     told to stay on the right. */
  html body[data-page="home"] #siteHeader{ justify-content:flex-end !important; }
}


/* ── v253 — two things off the Mac screenshot ────────────────────────────────
   1. "WHO'S BEHIND THIS" was landing 9px under the 97px fixed header, the same
      fault the other three pages had fixed in the 1024px block. About us was
      built later and never got added to that list. It is in it now.
   2. The browser tab read "meta.about.title" — the translation dictionary had
      no meta keys for the About page, so the raw key was printed. Added in all
      three languages.
   3. The WhatsApp button on the phone is the round badge on its own — the words
      have been hidden there since v236. Badge 38px to 44px, glyph 1.325rem to
      1.55rem. Nothing else moved, and the page still ends exactly at the bottom
      of the screen at 600, 641 and 672. */
@media (max-width:767px){
  html body[data-page="home"] .section-enter .wa-link .wa-badge{
    width:44px !important; height:44px !important;
  }
  html body[data-page="home"] .section-enter .wa-link .wa-badge svg{
    width:1.55rem !important; height:1.55rem !important;
  }
  html body[data-page="home"] .section-enter .wa-link{
    font-size:.875rem !important; gap:.7rem !important;
    letter-spacing:.09em !important;
  }
}

/* ── v254 — the longer sentence, and the spacing it forced ───────────────────
   "Rio Now is an invitation only platform..." adds a line on the phone in
   Portuguese and a line on desktop. On desktop that pushed the WhatsApp button
   15px under the footer, so the space below the copy is redistributed: the
   gaps between the label, the box, the invitation line and the button were
   19 / 36 / 44 / 16 and are now even. On the phone the section starts higher
   and the code block gets more air above it, which is what he asked for. */
@media (min-width:768px){
  html body[data-page="home"] #enter .enter-form{ margin-top:min(2.1rem, 4svh) !important; }
  html body[data-page="home"] #enter .enter-form label[for="code"]{ margin-bottom:min(.55rem, 1.2svh) !important; }
  html body[data-page="home"] #enter .enter-form .field-row{ margin-top:0 !important; }
  html body[data-page="home"] #enter .enter-note{ margin-top:min(1.35rem, 2.8svh) !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-top:min(1.2rem, 2.4svh) !important; }

  /* The wordmark comes off the copy axis and sits out to the left. */
  html body[data-page="home"] #siteHeader .brand{
    left:max(2.5rem, calc(50% - 25.5rem)) !important;
  }
}
@media (max-width:767px){
  html body[data-page="home"] #enter.section-enter{ padding-top:min(58px, 7.4svh) !important; }
  html body[data-page="home"] #enter .enter-form{ margin-top:min(1.85rem, 4.1svh) !important; }
}
/* Phones shorter than his S22: the fifth Portuguese line has to come from
   somewhere, so the two paragraphs run a little tighter there and nowhere else. */
@media (max-width:767px) and (max-height:620px){
  html body[data-page="home"] #enter .door-line{ line-height:1.3 !important; }
}
@media (min-width:768px){
  /* The empty status line under the box was holding 29px of nothing. It only
     takes room when it has something to say. */
  html body[data-page="home"] #enter .enter-form .form-msg:empty{ display:none !important; }
  html body[data-page="home"] #enter .enter-form{ margin-top:min(1.6rem, 3.2svh) !important; }
  html body[data-page="home"] #enter .enter-form label[for="code"]{ margin-bottom:min(.35rem, .9svh) !important; }
  html body[data-page="home"] #enter .enter-note{ margin-top:min(1rem, 2.2svh) !important; }
  html body[data-page="home"] .section-enter .wa-link{ margin-top:min(.9rem, 2svh) !important; }
}

/* ── v255 — the copy lines up with the wordmark ──────────────────────────────
   His screenshot: the wordmark sits out to the left and the copy still starts
   in the middle of the window, so nothing lines up with anything. The whole
   door — kicker, headline, both paragraphs, the code block and the WhatsApp
   button — now starts on exactly the same vertical line as the wordmark, and
   the code block and button are centred inside that column instead of on the
   centre line of the page, which is what pulled the button off-axis. */
@media (min-width:768px){
  html body[data-page="home"] #enter .kicker,
  html body[data-page="home"] #enter h2.closer,
  html body[data-page="home"] #enter .door-line,
  html body[data-page="home"] #enter .enter-form,
  html body[data-page="home"] #enter .enter-note{
    margin-left:max(2.5rem, calc(50% - 25.5rem)) !important;
    margin-right:auto !important;
  }
  html body[data-page="home"] .section-enter .wa-link{
    margin-left:calc(max(2.5rem, 50% - 25.5rem) + 13.5rem) !important;
    margin-right:0 !important;
    transform:translateX(-50%) !important;
  }
}

/* ── v256 — the door, arranged ───────────────────────────────────────────────
   His words, on a desktop screenshot: "pull down the door text slightly, move
   the enter your code over to the right a little bit ... the WhatsApp button
   should be centered on the box where you enter your code ... the space between
   'The night is' and 'already warm' on desktop is too much." And on the phone:
   "you've moved the text up too high ... it has to come down a little bit. I
   don't like all this text crunched up on the top."

   PHONE — the top block comes down. Nothing else on the phone moves: the code
   cluster is anchored to the bottom of the section by margin-top:auto, so the
   only thing this changes is how much air sits above "The door". */
html body[data-page="home"] #enter.section-enter{
  padding-top:min(70px, 9.2svh) !important;
}
/* The room for that comes out of the WhatsApp mark and the air above it, as he
   offered: "you may need to make the WhatsApp button a little bit smaller
   again". 44px to 40px, and a slightly shorter gap above it. Portuguese is the
   longest of the three languages and had only 9px of slack at 641; without
   these two the page would have started to scroll. */
html body[data-page="home"] .section-enter .wa-link .wa-badge{
  width:40px !important; height:40px !important;
}
html body[data-page="home"] .section-enter .wa-link .wa-badge svg{
  width:1.4rem !important; height:1.4rem !important;
}
html body[data-page="home"] .section-enter .wa-link{
  margin-top:min(.75rem, 1.7svh) !important;
}

@media (min-width:768px){
  /* The whole block sits in the middle of the screen instead of at the top of
     it. `.wrap` was set to flex:1 0 auto for the phone, which made it stretch
     to the full height of the section and left every spare pixel pooling under
     the WhatsApp button — 101px of dead black at 1330x813 against 23px above
     the eyebrow. It no longer stretches on a wide screen, so the section's own
     align-items:center can do its job and the spare height splits evenly above
     and below. On a short window there is no spare height and nothing moves. */
  html body[data-page="home"] #enter,
  html body[data-page="home"] #enter.section-enter{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    /* the phone's padding-top rule is written as #enter.section-enter, which
       outranks a plain #enter — this has to match it to be able to win */
    padding-top:min(11rem, 12svh) !important;
  }
  html body[data-page="home"] #enter > .wrap{
    flex:0 1 auto !important;
    justify-content:center !important;
  }
  /* "The night is" and "already warm" close up. 1.06 was set for a headline
     that ran on one line. */
  html body[data-page="home"] #enter h2.closer{ line-height:.98 !important; }

  /* The code group moves right of the copy. The copy stays exactly where it is,
     on the wordmark's line. */
  html body[data-page="home"] #enter .enter-form,
  html body[data-page="home"] #enter .enter-note{
    margin-left:calc(max(2.5rem, 50% - 25.5rem) + 3rem) !important;
    margin-right:auto !important;
  }
  /* The WhatsApp mark itself — the circle, not the circle plus the words — now
     sits on the centre line of the code box, which is what he is looking at.
     The badge is 44px, so the row starts 22px left of that line. The words get
     more room so they stop crowding the mark. */
  html body[data-page="home"] .section-enter .wa-link{
    margin-left:calc(max(2.5rem, 50% - 25.5rem) + 16.5rem - 22px) !important;
    margin-right:0 !important;
    transform:none !important;
    gap:1.1rem !important;
  }
}

@media (min-width:768px){
  /* The mark stays 44px on a laptop; the 40px above is a phone measurement. */
  html body[data-page="home"] .section-enter .wa-link .wa-badge{
    width:44px !important; height:44px !important;
  }
  html body[data-page="home"] .section-enter .wa-link .wa-badge svg{
    width:1.55rem !important; height:1.55rem !important;
  }
}

/* ── v257 · the WhatsApp line on a laptop ──────────────────────────────────
   "message just on WhatsApp should go below the WhatsApp button, and it also
   needs to be smaller." On a laptop the mark and the words sat side by side,
   so the words ran off to the right of the centre line and the pair read as
   one wide object rather than one button. The words go under the mark and
   come down in size. The block is a fixed 16rem wide and the mark is centred
   in it, so the mark stays on the same centre line as the code box and the
   label above it — the line he asked for, unchanged. Phones are untouched:
   this is inside the 768px rule. */
@media (min-width:768px){
  html body[data-page="home"] .section-enter .wa-link{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.55rem !important;
    width:16rem !important;
    text-align:center !important;
    margin-left:calc(max(2.5rem, 50% - 25.5rem) + 16.5rem - 8rem) !important;
    margin-right:0 !important;
    transform:none !important;
  }
  html body[data-page="home"] .section-enter .wa-link .wa-words{
    font-size:.84rem !important;
    letter-spacing:.015em !important;
    line-height:1.2 !important;
  }
}