@font-face{font-family:Instrument Serif;font-style:normal;font-display:block;font-weight:400;src:url(/assets/landing/instrument-serif-400-v1.woff2)format("woff2")}
@font-face{font-family:Manrope Variable;font-style:normal;font-display:block;font-weight:200 800;src:url(/assets/landing/manrope-variable-v1.woff2)format("woff2-variations")}
#s-landing .pa-approved-landing{--ink:#030b15;--midnight:#061321;--midnight-soft:#0a1c2d;--navy:#10263a;--navy-light:#17354d;--paper:#f3ecdf;--paper-muted:#c7c8c6;--gold:#d9b867;--gold-deep:#a9792e;--blue:#9cc7e0;--line:#e2e8e826}
#s-landing .pa-approved-landing *{box-sizing:border-box}
#s-landing .pa-approved-landing{background:var(--ink);color:var(--paper);scroll-behavior:smooth}
#s-landing .pa-approved-landing{background:var(--ink);color:var(--paper);text-rendering:optimizelegibility;margin:0;font-family:Manrope Variable,Inter,ui-sans-serif,system-ui,sans-serif;overflow-x:hidden}
#s-landing .pa-approved-landing a{color:inherit;text-decoration:none}
#s-landing .pa-approved-landing button,#s-landing .pa-approved-landing a,#s-landing .pa-approved-landing summary{-webkit-tap-highlight-color:transparent}
#s-landing .pa-approved-landing button{color:inherit;font:inherit}
#s-landing .pa-approved-landing .hero-scene{isolation:isolate;background:#0b1c2d;width:100%;height:100svh;min-height:760px;position:relative;overflow:hidden;container-type:size}
#s-landing .pa-approved-landing .hero-resting-film,#s-landing .pa-approved-landing .hero-film,#s-landing .pa-approved-landing .hotel-lighting-layer,#s-landing .pa-approved-landing .hero-shade{width:100%;height:100%;position:absolute;inset:0}
#s-landing .pa-approved-landing .hero-resting-film{z-index:2;object-fit:cover;object-position:center;opacity:0;pointer-events:none;transition:opacity .14s;display:block}
#s-landing .pa-approved-landing .resting-playing .hero-resting-film{opacity:1}
#s-landing .pa-approved-landing .hero-film{z-index:3;opacity:1;object-fit:cover;object-position:center;transition:opacity .14s,visibility linear;display:block}
#s-landing .pa-approved-landing .is-landed .hero-film{opacity:0;visibility:hidden;transition:opacity .14s,visibility 0s linear .14s}
#s-landing .pa-approved-landing .hotel-lighting-layer{z-index:4;pointer-events:none}
#s-landing .pa-approved-landing .hotel-lighting{visibility:hidden;pointer-events:none}
#s-landing .pa-approved-landing .is-landed .hotel-lighting{visibility:visible}
#s-landing .pa-approved-landing .window-light{fill:#f4cf7b;opacity:0;transition:opacity .38s}
#s-landing .pa-approved-landing .hotel-first-active .first-hotel-lighting .window-light,#s-landing .pa-approved-landing .hotel-wider-active .wider-hotel-lighting .window-light{opacity:.68}
#s-landing .pa-approved-landing .hotel-first-active .window-light.delay-1,#s-landing .pa-approved-landing .hotel-wider-active .window-light.delay-1{transition-delay:20ms}
#s-landing .pa-approved-landing .hotel-first-active .window-light.delay-2,#s-landing .pa-approved-landing .hotel-wider-active .window-light.delay-2{transition-delay:75ms}
#s-landing .pa-approved-landing .hotel-first-active .window-light.delay-3,#s-landing .pa-approved-landing .hotel-wider-active .window-light.delay-3{transition-delay:.13s}
#s-landing .pa-approved-landing .hotel-first-active .window-light.delay-4,#s-landing .pa-approved-landing .hotel-wider-active .window-light.delay-4{transition-delay:.185s}
#s-landing .pa-approved-landing .hotel-first-active .window-light.delay-5,#s-landing .pa-approved-landing .hotel-wider-active .window-light.delay-5{transition-delay:.24s}
#s-landing .pa-approved-landing .hotel-first-active .window-light.delay-6,#s-landing .pa-approved-landing .hotel-wider-active .window-light.delay-6{transition-delay:.295s}
#s-landing .pa-approved-landing .hero-shade{z-index:5;pointer-events:none;background:linear-gradient(90deg,#02080ffa 0%,#030b14e6 20%,#040e1996 36%,#040e192e 49%,#0000 62%),linear-gradient(#02080f80 0%,#0000 21% 72%,#02080f85 100%)}
@keyframes scene-line-in{0%{opacity:0}
to{opacity:1}
}
#s-landing .pa-approved-landing .brand{color:#f4f0e8;letter-spacing:-.025em;flex:none;align-items:center;gap:10px;width:auto;font-family:Manrope Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(22px,1.2vw,24px);font-weight:800;line-height:1;display:inline-flex}
#s-landing .pa-approved-landing .brand img{width:clamp(40px,2.15vw,42px);height:auto;display:block}
#s-landing .pa-approved-landing .brand span{white-space:nowrap}
#s-landing .pa-approved-landing .brand b,#s-landing .pa-approved-landing .brand em{font:inherit}
#s-landing .pa-approved-landing .brand b{color:#f4f0e8}
#s-landing .pa-approved-landing .brand em{color:var(--gold)}
#s-landing .pa-approved-landing .hero-brand{z-index:30;position:absolute;top:clamp(18px,2.1vw,30px);left:max(clamp(28px,4.1vw,78px),50vw - 896px)}
#s-landing .pa-approved-landing .hero-brand,#s-landing .pa-approved-landing .hero-copy{opacity:0;pointer-events:none}
#s-landing .pa-approved-landing .fonts-ready .hero-brand,#s-landing .pa-approved-landing .fonts-ready .hero-copy{opacity:1;pointer-events:auto;transition:opacity .18s ease-out}
#s-landing .pa-approved-landing .hero-copy{z-index:15;width:min(38vw,620px);position:absolute;top:50%;left:max(clamp(34px,4.1vw,78px),50vw - 896px);transform:translateY(-44%)}
#s-landing .pa-approved-landing .hero-copy h1,#s-landing .pa-approved-landing .evidence-heading h2,#s-landing .pa-approved-landing .origin-story h2,#s-landing .pa-approved-landing .scene-lens h2{font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;font-weight:400}
#s-landing .pa-approved-landing .hero-copy h1{color:#f6efe4;letter-spacing:-.045em;text-wrap:balance;margin:0;font-size:clamp(56px,3.65vw,76px);line-height:.94}
#s-landing .pa-approved-landing .scene-lens h2 span{opacity:0;white-space:nowrap;display:block}
#s-landing .pa-approved-landing .benefit-stack{color:var(--gold);flex-direction:column;margin-top:28px;font-family:Instrument Serif,Iowan Old Style,Georgia,serif;font-size:clamp(25px,1.46vw,30px);line-height:1.07;display:flex}
#s-landing .pa-approved-landing .hero-actions{align-items:center;gap:16px;margin-top:31px;display:flex}
#s-landing .pa-approved-landing .primary-action,#s-landing .pa-approved-landing .secondary-action{letter-spacing:-.01em;border-radius:18px;justify-content:center;align-items:center;min-height:54px;font-size:clamp(15px,.84vw,16px);font-weight:750;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:inline-flex}
#s-landing .pa-approved-landing .primary-action{color:#16200f;background:linear-gradient(135deg,#e5c986,#d6b261);padding:0 27px;box-shadow:0 14px 34px #01080f42}
#s-landing .pa-approved-landing .secondary-action{color:#dde9f1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f253bad;border:1px solid #a3cbe47a;padding:0 26px}
#s-landing .pa-approved-landing .primary-action:hover,#s-landing .pa-approved-landing .primary-action:focus-visible,#s-landing .pa-approved-landing .secondary-action:hover,#s-landing .pa-approved-landing .secondary-action:focus-visible{outline:none;transform:translateY(-2px)}
#s-landing .pa-approved-landing .primary-action:hover,#s-landing .pa-approved-landing .primary-action:focus-visible{box-shadow:0 18px 40px #01080f57}
#s-landing .pa-approved-landing .secondary-action:hover,#s-landing .pa-approved-landing .secondary-action:focus-visible{background:#15314cd6;border-color:#b4daf0d6}
#s-landing .pa-approved-landing .transaction-line,#s-landing .pa-approved-landing .independence-line{color:#dfe2dfbd;margin:0;line-height:1.48}
#s-landing .pa-approved-landing .transaction-line{color:#e7e9e6d6;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:16px;font-size:clamp(16px,.9vw,18px);display:flex}
#s-landing .pa-approved-landing .transaction-line strong{color:#ead28f;letter-spacing:-.02em;font-size:clamp(22px,1.2vw,24px);font-weight:800}
#s-landing .pa-approved-landing .independence-line{color:#cfd8dcc9;margin-top:8px;font-size:clamp(15px,.82vw,17px)}
#s-landing .pa-approved-landing .hotel-interface{--caption-safe:clamp(24px, 2.1cqw, 36px);z-index:21;visibility:hidden;opacity:0;pointer-events:none;width:max(100cqw,177.778cqh);height:max(100cqh,56.25cqw);position:absolute;top:50%;left:50%;overflow:visible;transform:translate(-50%,-50%)}
#s-landing .pa-approved-landing .is-landed .hotel-interface{visibility:visible;opacity:1;transition:opacity .5s .16s}
#s-landing .pa-approved-landing .hotel-target{cursor:pointer;pointer-events:auto;background:0 0;border:0;outline:none;margin:0;padding:0;position:absolute}
#s-landing .pa-approved-landing .target-first{width:23.96%;height:31.3%;top:36.48%;left:48.44%}
#s-landing .pa-approved-landing .target-wider{width:26.04%;height:34.35%;top:58.33%;left:70.31%}
#s-landing .pa-approved-landing .hotel-caption{color:#f8f1e5db;letter-spacing:-.015em;pointer-events:none;text-shadow:0 2px 12px #01070d8c;flex-direction:column;width:max-content;max-width:100%;font-family:Instrument Serif,Georgia,serif;font-size:clamp(18px,1.04vw,21px);line-height:1.18;transition:color .18s;display:flex;position:absolute;top:-3%;left:25%}
#s-landing .pa-approved-landing .hotel-caption span:after{background:linear-gradient(90deg, var(--blue), #9cc7e000);content:"";width:42px;height:2px;margin-top:7px;transition:width .32s cubic-bezier(.22,1,.36,1);display:block}
#s-landing .pa-approved-landing .hotel-caption-wide{text-align:right;align-items:flex-end;left:auto;right:11%}
#s-landing .pa-approved-landing .hotel-caption-wide span:after{background:linear-gradient(270deg, var(--blue), #9cc7e000);margin-left:auto}
#s-landing .pa-approved-landing .hotel-target:hover .hotel-caption,#s-landing .pa-approved-landing .hotel-target:focus-visible .hotel-caption,#s-landing .pa-approved-landing .hotel-target.is-active .hotel-caption{color:#fff8ea}
#s-landing .pa-approved-landing .hotel-target:focus-visible .hotel-caption{outline-offset:8px;outline:1px solid #9cc7e0b8}
#s-landing .pa-approved-landing .hotel-target:hover .hotel-caption span:after,#s-landing .pa-approved-landing .hotel-target:focus-visible .hotel-caption span:after,#s-landing .pa-approved-landing .hotel-target.is-active .hotel-caption span:after{width:100%}
#s-landing .pa-approved-landing .scene-lens{z-index:23;visibility:hidden;opacity:1;pointer-events:none;width:clamp(260px,27vw,470px);max-width:calc(50vw - 48px);position:absolute;top:calc(50cqh - max(25cqh,14.0625cqw));right:max(clamp(28px,4.1vw,78px),50vw - 896px)}
#s-landing .pa-approved-landing .is-landed .scene-lens{visibility:visible;opacity:1;transition:none}
#s-landing .pa-approved-landing .is-landed .scene-lens h2 span:first-child{animation:1.6s cubic-bezier(.22,.72,.2,1) 1.9s both scene-line-in}
#s-landing .pa-approved-landing .is-landed .scene-lens h2 span:last-child{animation:1.6s cubic-bezier(.22,.72,.2,1) 2.8s both scene-line-in}
#s-landing .pa-approved-landing .scene-lens h2{color:#f9f1e5eb;letter-spacing:-.035em;text-wrap:balance;margin:0;font-size:clamp(25px,1.72vw,36px);line-height:1.1}
#s-landing .pa-approved-landing .film-control{z-index:28;color:#ece7dcab;cursor:pointer;letter-spacing:.05em;text-transform:uppercase;background:0 0;border:0;border-bottom:1px solid #ebe7dc40;align-items:center;gap:8px;min-height:38px;padding:5px 8px;font-size:13px;font-weight:680;transition:border-color .18s,color .18s;display:inline-flex;position:absolute;bottom:clamp(24px,2.7vw,48px);right:max(clamp(26px,3.2vw,60px),50vw - 906px)}
#s-landing .pa-approved-landing .film-control:hover,#s-landing .pa-approved-landing .film-control:focus-visible{color:#fff7e8;border-bottom-color:#ece7dccc;outline:none}
#s-landing .pa-approved-landing .evidence-section,#s-landing .pa-approved-landing .how-section,#s-landing .pa-approved-landing .why-section,#s-landing .pa-approved-landing .faq-section{padding-inline:max(clamp(34px,6vw,118px),50vw - 868px);position:relative}
#s-landing .pa-approved-landing .evidence-section{background:radial-gradient(circle at 77% 37%,#44799c24,#0000 31%),linear-gradient(#071522,#091b2a 53%,#06131f);padding-top:clamp(66px,5.6vh,82px);padding-bottom:clamp(70px,5.9vh,88px);overflow:hidden}
#s-landing .pa-approved-landing .evidence-section:before,#s-landing .pa-approved-landing .how-section:before,#s-landing .pa-approved-landing .why-section:before,#s-landing .pa-approved-landing .faq-section:before{background:var(--line);content:"";height:1px;position:absolute;top:0;left:0;right:0}
#s-landing .pa-approved-landing .evidence-layout{width:min(100%,1380px);margin:0 auto}
#s-landing .pa-approved-landing .evidence-heading>p,#s-landing .pa-approved-landing .origin-story>p{color:var(--blue);letter-spacing:.18em;text-transform:uppercase;margin:8px 0 0;font-size:12px;font-weight:780}
#s-landing .pa-approved-landing .evidence-heading h2{color:#efe8dd;letter-spacing:-.006em;word-spacing:.035em;text-wrap:balance;max-width:13em;margin:14px 0 0;font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;font-size:clamp(39px,2.55vw,50px);font-weight:400;line-height:1.12}
#s-landing .pa-approved-landing .finding-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px;display:grid}
#s-landing .pa-approved-landing .finding-card{background:linear-gradient(145deg, #13283bf0, #081523fa), var(--navy);border:1px solid #a1c2d63d;border-radius:16px;flex-direction:column;min-width:0;min-height:238px;padding:23px 24px 22px;display:flex;position:relative;overflow:hidden;box-shadow:0 18px 50px #00060c33,inset 0 1px #ffffff06}
#s-landing .pa-approved-landing .finding-card:before{background:linear-gradient(90deg, var(--gold), #d9b86700);content:"";height:2px;position:absolute;top:-1px;left:0;right:42%}
#s-landing .pa-approved-landing .finding-card>span{color:#dcc17b;letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:780;display:block}
#s-landing .pa-approved-landing .finding-card h3{color:#f2eadf;letter-spacing:.005em;text-wrap:balance;word-spacing:.04em;width:100%;max-width:none;margin:15px 0 0;font-family:Instrument Serif,Georgia,serif;font-size:clamp(23px,1.25vw,25px);font-weight:400;line-height:1.2}
#s-landing .pa-approved-landing .finding-card>p{color:#dee4e7d1;margin:auto 0 0;padding-top:16px;font-size:14px;line-height:1.35}
#s-landing .pa-approved-landing .finding-visual{height:48px;margin-top:16px}
#s-landing .pa-approved-landing .closure-visual{align-items:flex-end;gap:3px;display:flex}
#s-landing .pa-approved-landing .closure-visual i{background:#7b99b56b;width:19px;height:10px;display:block}
#s-landing .pa-approved-landing .closure-visual i.is-closed{background:#c96f4e;height:38px;box-shadow:inset 0 1px #ffffff1f}
#s-landing .pa-approved-landing .room-noise-visual{align-items:center;gap:4px;display:flex}
#s-landing .pa-approved-landing .room-noise-visual i{background:linear-gradient(#e3c878,#91bbd4);border-radius:3px;width:3px;display:block}
#s-landing .pa-approved-landing .club-access-visual{grid-template-rows:repeat(2,16px);gap:7px;width:min(100%,280px);padding-right:0;display:grid;position:relative}
#s-landing .pa-approved-landing .lounger-row{gap:7px;display:flex}
#s-landing .pa-approved-landing .lounger-row i{background:#7999b56e;border-radius:2px 2px 6px 6px;width:28px;height:11px;display:block}
#s-landing .pa-approved-landing .lounger-row-front i{background:linear-gradient(#e4cd8d,#b89143)}
#s-landing .pa-approved-landing .no-beach-visual{fill:none;stroke:#94bed7ad;stroke-linecap:round;stroke-width:2px;width:min(100%,290px);display:block;overflow:visible}
#s-landing .pa-approved-landing .no-beach-visual .seawall{fill:#7992a852;stroke:#d9b867b3;stroke-linejoin:round}
#s-landing .pa-approved-landing .review-pattern-visual{flex-direction:column;justify-content:center;gap:6px;width:min(100%,300px);display:flex}
#s-landing .pa-approved-landing .review-pattern-visual i{background:#84a2bcb8;border-radius:5px;height:5px;display:block;position:relative}
#s-landing .pa-approved-landing .review-pattern-visual i:first-child{width:93%}
#s-landing .pa-approved-landing .review-pattern-visual i:nth-child(2){width:78%}
#s-landing .pa-approved-landing .review-pattern-visual i:nth-child(3){width:87%}
#s-landing .pa-approved-landing .review-pattern-visual span{background:var(--gold);border:2px solid #071320eb;border-radius:50%;width:11px;height:11px;position:absolute;top:-3px;right:-3px;box-shadow:0 0 0 2px #d9b8672e}
#s-landing .pa-approved-landing .beach-crowds-visual{align-items:flex-end;gap:5px;width:min(100%,310px);display:flex}
#s-landing .pa-approved-landing .beach-crowds-visual i{background:linear-gradient(#a9c5da,#536f8a);width:28px;min-height:8px;display:block}
#s-landing .pa-approved-landing .how-section{background:radial-gradient(circle at 14% 22%,#3f709124,#0000 30%),linear-gradient(112deg,#0000 0 63%,#16344c24 63% 64%,#0000 64%),#071522;padding-top:clamp(70px,6vh,86px);padding-bottom:clamp(72px,6.2vh,90px)}
#s-landing .pa-approved-landing .how-layout{grid-template-columns:minmax(230px,.38fr) minmax(680px,1.62fr);align-items:start;gap:clamp(68px,7vw,96px);width:min(100%,1280px);margin:0 auto;display:grid}
#s-landing .pa-approved-landing .how-heading h2{color:#efe8dd;letter-spacing:-.044em;text-wrap:balance;max-width:330px;margin:0;font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;font-size:clamp(44px,2.8vw,52px);font-weight:400;line-height:.98}
#s-landing .pa-approved-landing .process-ledger{min-width:0}
#s-landing .pa-approved-landing .steps{border-top:1px solid #a3c2d533;margin:0;padding:0;list-style:none;display:block;position:relative}
#s-landing .pa-approved-landing .steps li{border-bottom:1px solid #a3c2d526;grid-template-columns:64px minmax(180px,.72fr) minmax(250px,1fr) 104px;align-items:center;gap:22px;min-height:112px;padding:15px 0;display:grid;position:relative}
#s-landing .pa-approved-landing .step-route{justify-content:flex-start;align-items:center;height:100%;display:flex;position:relative}
#s-landing .pa-approved-landing .step-route:before,#s-landing .pa-approved-landing .step-route:after{content:"";background:#709ebc57;width:1px;position:absolute;left:20px}
#s-landing .pa-approved-landing .step-route:before{top:-16px;bottom:50%}
#s-landing .pa-approved-landing .step-route:after{top:50%;bottom:-16px}
#s-landing .pa-approved-landing .steps li:first-child .step-route:before,#s-landing .pa-approved-landing .steps li:last-child .step-route:after{display:none}
#s-landing .pa-approved-landing .step-route span{z-index:2;width:41px;height:41px;color:var(--blue);letter-spacing:.12em;background:#0a1d2e;border:1px solid #9cc7e066;border-radius:50%;justify-content:center;align-items:center;font-size:10px;font-weight:800;display:inline-flex;position:relative}
#s-landing .pa-approved-landing .steps li:last-child .step-route span{color:var(--gold);border-color:#d9b867b8;box-shadow:0 0 26px #d9b8671a}
#s-landing .pa-approved-landing .step-route i{background:linear-gradient(90deg,#9cc7e05c,#0000);height:1px;position:absolute;top:calc(50% - 1px);left:42px;right:-17px}
#s-landing .pa-approved-landing .steps h3{color:#eee7dc;letter-spacing:-.03em;max-width:250px;margin:0;font-family:Instrument Serif,Georgia,serif;font-size:clamp(26px,1.6vw,30px);font-weight:400;line-height:1.04}
#s-landing .pa-approved-landing .steps p{color:#e0e4e3c7;max-width:390px;margin:0;font-size:clamp(15px,.88vw,16.5px);line-height:1.58}
#s-landing .pa-approved-landing .step-symbol{width:86px;height:58px;color:var(--blue);justify-content:center;justify-self:end;align-items:center;display:flex;position:relative}
#s-landing .pa-approved-landing .step-symbol-1{flex-direction:column;gap:9px}
#s-landing .pa-approved-landing .step-symbol-1 i{background:#9cc7e052;width:78px;height:1px;display:block;position:relative}
#s-landing .pa-approved-landing .step-symbol-1 i:after{border:1px solid var(--gold);content:"";background:#0b1d2e;border-radius:50%;width:7px;height:7px;position:absolute;top:-3px}
#s-landing .pa-approved-landing .step-symbol-1 i:first-child:after{left:18%}
#s-landing .pa-approved-landing .step-symbol-1 i:nth-child(2):after{left:58%}
#s-landing .pa-approved-landing .step-symbol-1 i:nth-child(3):after{left:38%}
#s-landing .pa-approved-landing .step-symbol-2 i{background:#0d2234cc;border:1px solid #9cc7e047;width:58px;height:32px;display:block;position:absolute}
#s-landing .pa-approved-landing .step-symbol-2 i:first-child{transform:translate(-10px,-8px)rotate(-4deg)}
#s-landing .pa-approved-landing .step-symbol-2 i:nth-child(2){transform:translate(9px,-2px)rotate(3deg)}
#s-landing .pa-approved-landing .step-symbol-2 i:nth-child(3){border-color:#d9b8677a;transform:translateY(8px)}
#s-landing .pa-approved-landing .step-symbol-3:before,#s-landing .pa-approved-landing .step-symbol-3:after{content:"";background:linear-gradient(90deg,#0000,#d9b867b3);width:22px;height:1px;position:absolute;top:50%}
#s-landing .pa-approved-landing .step-symbol-3:before{left:2px}
#s-landing .pa-approved-landing .step-symbol-3:after{right:2px;transform:rotate(180deg)}
#s-landing .pa-approved-landing .step-symbol-3 img{filter:drop-shadow(0 8px 14px #00000057);width:32px;height:auto}
#s-landing .pa-approved-landing .why-section{background:radial-gradient(circle at 78% 31%,#406f8f29,#0000 30%),linear-gradient(150deg,#0b1d2c,#050f1a 67%);grid-template-columns:minmax(430px,.93fr) minmax(420px,.72fr);gap:clamp(68px,8vw,124px);padding-top:clamp(88px,7vh,108px);padding-bottom:clamp(92px,7.5vh,114px);display:grid}
#s-landing .pa-approved-landing .origin-story h2{color:#f0e8dc;letter-spacing:-.046em;max-width:800px;margin:28px 0 0;font-size:clamp(46px,2.95vw,57px);line-height:.98}
#s-landing .pa-approved-landing .origin-story h2 .story-line{margin:.12em 0;display:block}
#s-landing .pa-approved-landing .origin-story h2 .story-line-one{color:#f0e8dc}
#s-landing .pa-approved-landing .origin-story h2 .story-line-two{color:var(--blue)}
#s-landing .pa-approved-landing .origin-story h2 .story-line-three{color:var(--gold)}
#s-landing .pa-approved-landing .why-copy{border-left:1px solid #d9b8674d;align-self:center;max-width:670px;padding:18px 0 18px 32px}
#s-landing .pa-approved-landing .why-copy>p{color:#e3e4dfc2;margin:0 0 26px;font-size:clamp(16px,.95vw,18px);line-height:1.7}
#s-landing .pa-approved-landing .why-dropcap:first-letter{float:left;color:var(--gold);padding:7px 11px 0 0;font-family:Instrument Serif,Georgia,serif;font-size:68px;line-height:.72}
#s-landing .pa-approved-landing .why-copy b{color:inherit;font-weight:650}
#s-landing .pa-approved-landing .why-copy blockquote{color:#f0e8dc;letter-spacing:-.032em;border-left:2px solid #d9b867b8;margin:34px 0 30px;padding:0 0 0 26px;font-family:Instrument Serif,Georgia,serif;font-size:clamp(28px,1.85vw,35px);font-style:italic;line-height:1.05}
#s-landing .pa-approved-landing .why-copy .paid-by-you{color:var(--blue);letter-spacing:.11em;text-transform:uppercase;margin:0;font-size:12px;font-weight:760}
#s-landing .pa-approved-landing .faq-section{background:radial-gradient(circle at 78% 32%,#36618024,#0000 31%),#06131f;grid-template-columns:minmax(220px,.55fr) minmax(540px,760px);align-items:start;gap:clamp(52px,7vw,108px);padding-top:clamp(82px,6.5vh,100px);padding-bottom:clamp(88px,7vh,108px);display:grid}
#s-landing .pa-approved-landing .faq-heading h2{color:#efe8dd;letter-spacing:-.04em;margin:0;font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;font-size:clamp(42px,2.8vw,54px);font-weight:400;line-height:1}
#s-landing .pa-approved-landing .faq-list{background:linear-gradient(145deg,#0b1d2ef5,#05111de8);border:1px solid #99b8cc33;border-radius:15px;width:100%;max-width:760px;margin:0 0 0 auto;padding:0 28px 8px;position:relative;overflow:hidden;box-shadow:0 26px 70px #0003,inset 0 1px #ffffff06}
#s-landing .pa-approved-landing .faq-list:before{content:"";opacity:.26;pointer-events:none;background-image:linear-gradient(#05111dd1,#05111da3),url(/assets/landing/hero-landing-v1.webp);background-position:100% 100%;background-size:auto 100%;position:absolute;inset:0}
#s-landing .pa-approved-landing .faq-item{z-index:1;border-bottom:1px solid #e3e5e024;position:relative}
#s-landing .pa-approved-landing .faq-item:last-child{border-bottom:0}
#s-landing .pa-approved-landing .faq-item h3{margin:0}
#s-landing .pa-approved-landing .faq-item button{cursor:pointer;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:40px;width:100%;min-height:76px;padding:0;display:flex}
#s-landing .pa-approved-landing .faq-item button span{color:#ede7dc;letter-spacing:0;text-rendering:auto;font-family:Manrope Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(18px,1.08vw,20px);font-weight:700;line-height:1.3}
#s-landing .pa-approved-landing .faq-item.is-open button span{color:#dbc084}
#s-landing .pa-approved-landing .faq-item button i{flex:none;width:26px;height:26px;position:relative}
#s-landing .pa-approved-landing .faq-item button i:before,#s-landing .pa-approved-landing .faq-item button i:after{background:var(--blue);content:"";width:20px;height:1px;transition:transform .22s;position:absolute;top:12px;left:3px}
#s-landing .pa-approved-landing .faq-item button i:after{transform:rotate(90deg)}
#s-landing .pa-approved-landing .faq-item.is-open button i:after{transform:rotate(0)}
#s-landing .pa-approved-landing .faq-item button:hover span,#s-landing .pa-approved-landing .faq-item button:focus-visible span{color:#fff9ee}
#s-landing .pa-approved-landing .faq-item.is-open button:hover span,#s-landing .pa-approved-landing .faq-item.is-open button:focus-visible span{color:#dbc084}
#s-landing .pa-approved-landing .faq-item button:focus-visible{outline-offset:8px;outline:1px solid #9cc7e080}
#s-landing .pa-approved-landing .faq-answer p{color:#c8d0da;text-rendering:auto;max-width:68ch;margin:0;padding:0 0 14px;font-family:Manrope Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(16px,.92vw,17px);line-height:1.65}
#s-landing .pa-approved-landing .faq-answer p:last-child{padding-bottom:30px}
#s-landing .pa-approved-landing .plot-score-ring{flex:none;width:112px;height:112px;position:relative}
#s-landing .pa-approved-landing .plot-score-ring svg{width:112px;height:112px;display:block;transform:rotate(-90deg)}
#s-landing .pa-approved-landing .plot-score-ring>div{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}
#s-landing .pa-approved-landing .plot-score-ring strong{color:var(--gold);font-family:Georgia,Times New Roman,serif;font-size:31px;font-weight:400;line-height:1}
#s-landing .pa-approved-landing .plot-score-ring small{color:#8fa3bb;letter-spacing:1.5px;text-transform:uppercase;margin-top:3px;font-size:8px;font-weight:700}
#s-landing .pa-approved-landing .score-explanation{max-width:68ch}
#s-landing .pa-approved-landing .site-footer{background:#030b15;border-top:1px solid #e3e5e024;padding:17px max(clamp(34px,3vw,52px),50vw - 912px)}
#s-landing .pa-approved-landing .site-footer p{color:#d3d9d7a3;flex-wrap:wrap;gap:4px 8px;margin:0;font-size:clamp(13px,.73vw,14px);line-height:1.5;display:flex}
#s-landing .pa-approved-landing .site-footer a{color:#8fb8d3;transition:color .16s}
#s-landing .pa-approved-landing .site-footer a:hover,#s-landing .pa-approved-landing .site-footer a:focus-visible{color:#c8e4f3;text-underline-offset:3px;outline:none;text-decoration:underline}
@media (width<=1450px){#s-landing .pa-approved-landing .hero-copy{width:min(42vw,580px)}
#s-landing .pa-approved-landing .hero-copy h1{font-size:clamp(58px,4.45vw,64px)}
#s-landing .pa-approved-landing .scene-lens{width:min(28vw,400px)}
}
@media (width<=1280px) and (width>=761px){#s-landing .pa-approved-landing .finding-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (width>=1024px) and (aspect-ratio<=16/9){#s-landing .pa-approved-landing .hotel-caption-wide{right:max(11%, calc(82.4cqh - 50cqw + var(--caption-safe)));white-space:normal;max-width:min(260px,100cqw - 48px)}
}
@media (height<=840px) and (width>=1024px){#s-landing .pa-approved-landing .hero-scene{min-height:700px}
#s-landing .pa-approved-landing .hero-copy{top:50%;transform:translateY(-43%)}
#s-landing .pa-approved-landing .hero-copy h1{font-size:clamp(51px,4vw,65px)}
#s-landing .pa-approved-landing .benefit-stack{margin-top:17px;font-size:clamp(22px,1.55vw,28px)}
#s-landing .pa-approved-landing .hero-actions{margin-top:21px}
#s-landing .pa-approved-landing .primary-action,#s-landing .pa-approved-landing .secondary-action{border-radius:15px;min-height:47px}
#s-landing .pa-approved-landing .transaction-line{margin-top:12px}
}
@media (width<=1023px){#s-landing .pa-approved-landing .hero-scene{background:#071522;height:auto;min-height:900px}
#s-landing .pa-approved-landing .hero-film,#s-landing .pa-approved-landing .hero-resting-film,#s-landing .pa-approved-landing .hotel-lighting-layer,#s-landing .pa-approved-landing .hotel-interface,#s-landing .pa-approved-landing .scene-lens,#s-landing .pa-approved-landing .film-control{display:none}
#s-landing .pa-approved-landing .hero-shade{background:linear-gradient(#030a110a,#071522 51% 100%),linear-gradient(90deg,#030a11b3,#0000 72%)}
#s-landing .pa-approved-landing .hero-brand{top:15px;left:22px}
#s-landing .pa-approved-landing .hero-copy{width:calc(100% - 48px);max-width:650px;top:310px;left:24px;transform:none}
#s-landing .pa-approved-landing .hero-copy h1{font-size:clamp(53px,12.8vw,75px)}
#s-landing .pa-approved-landing .hero-actions{flex-direction:column;align-items:flex-start}
#s-landing .pa-approved-landing .primary-action,#s-landing .pa-approved-landing .secondary-action{width:min(100%,330px)}
#s-landing .pa-approved-landing .evidence-layout{display:block}
#s-landing .pa-approved-landing .evidence-heading h2{max-width:8.2em;font-size:clamp(43px,10vw,58px)}
#s-landing .pa-approved-landing .evidence-section{min-height:auto;padding:76px 24px 82px}
#s-landing .pa-approved-landing .finding-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px}
#s-landing .pa-approved-landing .finding-card{min-height:238px}
#s-landing .pa-approved-landing .how-section,#s-landing .pa-approved-landing .why-section,#s-landing .pa-approved-landing .faq-section{padding:92px 24px 110px}
#s-landing .pa-approved-landing .how-layout{grid-template-columns:1fr;gap:52px}
#s-landing .pa-approved-landing .how-heading h2{max-width:620px;font-size:clamp(44px,10.5vw,62px)}
#s-landing .pa-approved-landing .steps{margin-top:0}
#s-landing .pa-approved-landing .steps li{grid-template-columns:54px minmax(0,1fr);gap:8px 18px;min-height:0;padding:24px 0 27px}
#s-landing .pa-approved-landing .step-route{grid-row:1/3}
#s-landing .pa-approved-landing .steps h3{grid-column:2;max-width:none;margin:0}
#s-landing .pa-approved-landing .steps p{grid-column:2;max-width:620px}
#s-landing .pa-approved-landing .step-symbol{display:none}
#s-landing .pa-approved-landing .why-section{grid-template-columns:1fr;gap:70px}
#s-landing .pa-approved-landing .origin-story h2{font-size:clamp(44px,10vw,62px)}
#s-landing .pa-approved-landing .faq-list{max-width:none;margin-top:0}
#s-landing .pa-approved-landing .faq-section{grid-template-columns:1fr;gap:46px}
#s-landing .pa-approved-landing .faq-item button span{font-size:18px}
#s-landing .pa-approved-landing .faq-answer p{font-size:16px}
#s-landing .pa-approved-landing .site-footer{padding:18px 24px}
}
@media (width<=760px){#s-landing .pa-approved-landing .finding-grid{grid-template-columns:1fr}
#s-landing .pa-approved-landing .finding-card{min-height:232px}
}
@media (prefers-reduced-motion:reduce){#s-landing .pa-approved-landing{scroll-behavior:auto}
#s-landing .pa-approved-landing .hero-film,#s-landing .pa-approved-landing .hero-resting-film{display:none}
#s-landing .pa-approved-landing .scene-lens h2 span,#s-landing .pa-approved-landing .is-landed .scene-lens h2 span{opacity:1}
#s-landing .pa-approved-landing *,#s-landing .pa-approved-landing :before,#s-landing .pa-approved-landing :after{scroll-behavior:auto!important;transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
}

#s-landing .pa-approved-landing button.primary-action{border:0;font-family:"Manrope Variable",Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
#s-landing .pa-approved-landing .primary-action:focus-visible,#s-landing .pa-approved-landing .secondary-action:focus-visible{outline:2px solid #f6efe4;outline-offset:4px}
#s-landing .pa-approved-landing .hero-static{z-index:1;display:block;object-fit:cover;object-position:center}
#s-landing .pa-approved-landing .hero-resting-film,#s-landing .pa-approved-landing .hero-film,#s-landing .pa-approved-landing .hotel-lighting-layer,#s-landing .pa-approved-landing .hero-shade,#s-landing .pa-approved-landing .hero-static{position:absolute;inset:0;width:100%;height:100%}
#s-landing .pa-approved-landing .film-control.is-resting{bottom:clamp(20px,2.2vw,38px)}
body[data-screen="s-landing"] .foot{display:none!important}
#s-landing .pa-approved-landing .site-footer{display:block}
@media(max-width:1023px){#s-landing .pa-approved-landing .hero-static{height:54%;opacity:.74}
#s-landing .pa-approved-landing .site-footer{display:block}
}
@media(prefers-reduced-motion:reduce){#s-landing .pa-approved-landing .hero-brand,#s-landing .pa-approved-landing .hero-copy{opacity:1;pointer-events:auto}
}


#s-landing .pa-approved-landing .hero-static>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#s-landing .pa-approved-landing .film-control[hidden]{display:none}

#s-landing .pa-approved-landing .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1)}
#s-landing .pa-approved-landing .faq-answer-inner{min-height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-5px);transition:opacity .26s ease,transform .34s cubic-bezier(.22,.61,.36,1),visibility 0s linear .42s}
#s-landing .pa-approved-landing .faq-item.is-open .faq-answer{grid-template-rows:1fr}
#s-landing .pa-approved-landing .faq-item.is-open .faq-answer-inner{visibility:visible;opacity:1;transform:none;transition:opacity .34s ease .1s,transform .42s cubic-bezier(.22,.61,.36,1) .06s,visibility 0s linear 0s}
@media(prefers-reduced-motion:reduce){#s-landing .pa-approved-landing .faq-answer,#s-landing .pa-approved-landing .faq-answer-inner,#s-landing .pa-approved-landing .faq-item.is-open .faq-answer-inner{transition:none}
}

/* v3: the approved portrait hero is a separate, one-shot mobile cinematic.
   Desktop keeps the v1 intro/resting state machine and every v1 layout rule. */
#s-landing .pa-approved-landing .hero-mobile-film,
#s-landing .pa-approved-landing .mobile-price,
#s-landing .pa-approved-landing .mobile-proof,
#s-landing .pa-approved-landing .mobile-hotel-labels{display:none}

@media (width<=1023px){
  #s-landing .pa-approved-landing .hero-scene{
    --mobile-stage-w:min(100vw,480px);
    --mobile-stage-h:min(230.769vw,1107.692px);
    --mobile-stage-left:calc((100vw - var(--mobile-stage-w))/2);
    --mobile-pad:clamp(20px,6.154vw,29.5px);
    --mobile-safe-bottom:max(20px,env(safe-area-inset-bottom,0px));
    --mobile-stage-overflow:max(0px,calc(var(--mobile-stage-h) - 100svh));
    --mobile-copy-bottom:max(clamp(112px,28vw,134px),calc(min(208px,var(--mobile-stage-overflow)) + var(--mobile-safe-bottom)));
    --mobile-cta-h:clamp(50px,12.621vw,60.5px);
    background:#061321;
    height:var(--mobile-stage-h);
    min-height:0
  }
  #s-landing .pa-approved-landing .hero-static,
  #s-landing .pa-approved-landing .hero-mobile-film{
    width:var(--mobile-stage-w);
    height:100%;
    left:var(--mobile-stage-left);
    right:auto;
    object-fit:cover;
    object-position:center
  }
  #s-landing .pa-approved-landing .hero-static{opacity:1}
  #s-landing .pa-approved-landing .hero-static>img{object-fit:cover;object-position:center}
  #s-landing .pa-approved-landing .hero-mobile-film{
    z-index:3;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    position:absolute;
    top:0;
    bottom:0;
    display:block;
    transition:opacity .12s ease-out,visibility 0s linear .12s
  }
  #s-landing .pa-approved-landing .is-mobile-preparing .hero-mobile-film,
  #s-landing .pa-approved-landing .is-mobile-playing .hero-mobile-film{
    opacity:1;
    visibility:visible;
    transition:opacity .12s ease-out,visibility 0s
  }
  #s-landing .pa-approved-landing .is-mobile-landed .hero-mobile-film{
    opacity:0;
    visibility:hidden;
    display:none;
    transition:none
  }
  #s-landing .pa-approved-landing .hero-shade{display:none}
  #s-landing .pa-approved-landing .mobile-hotel-labels{
    z-index:12;
    display:block;
    visibility:hidden;
    pointer-events:none;
    position:absolute;
    top:0;
    left:var(--mobile-stage-left);
    width:var(--mobile-stage-w);
    height:100%
  }
  #s-landing .pa-approved-landing .mobile-hotel-label{
    color:#f8f1e5eb;
    white-space:nowrap;
    text-align:right;
    text-shadow:0 2px 10px #01070dbd;
    width:36%;
    font:400 clamp(15px,4.103vw,19.5px)/1.1 "Instrument Serif",Georgia,serif;
    opacity:0;
    position:absolute;
    transform:translateY(3px);
    transition:opacity .32s ease,transform .32s ease
  }
  #s-landing .pa-approved-landing .mobile-hotel-label:after{
    content:"";
    width:clamp(22px,6.154vw,29.5px);
    height:7px;
    margin:5px 0 0 100%;
    display:block;
    transform-origin:0 50%;
    background:linear-gradient(90deg,#d9b86754,#d9b867e8) 0 50%/calc(100% - 5px) 1px no-repeat,radial-gradient(circle at center,#0000 0 1px,#d9b867ed 1.2px 2px,#0000 2.2px) 100% 50%/5px 5px no-repeat
  }
  #s-landing .pa-approved-landing .mobile-hotel-label-found{top:20.3%;left:12.5%}
  #s-landing .pa-approved-landing .mobile-hotel-label-found:after{transform:rotate(25deg)}
  #s-landing .pa-approved-landing .mobile-hotel-label-missed{top:30.5%;left:30%;width:34%}
  #s-landing .pa-approved-landing .mobile-hotel-label-missed:after{transform:rotate(27deg)}
  #s-landing .pa-approved-landing .is-mobile-landed .mobile-hotel-labels{visibility:visible}
  #s-landing .pa-approved-landing .is-mobile-landed .mobile-hotel-label{opacity:1;transform:none}
  #s-landing .pa-approved-landing .is-mobile-landed .mobile-hotel-label-found{transition-delay:.1s}
  #s-landing .pa-approved-landing .is-mobile-landed .mobile-hotel-label-missed{transition-delay:.28s}
  #s-landing .pa-approved-landing .hero-brand{
    top:max(clamp(54px,15.385vw,74px),env(safe-area-inset-top,0px));
    left:calc(var(--mobile-stage-left) + var(--mobile-pad));
    font-size:clamp(22px,6.154vw,29.5px)
  }
  #s-landing .pa-approved-landing .brand img{width:clamp(37px,10.256vw,49px)}
  #s-landing .pa-approved-landing .hero-copy{
    width:calc(var(--mobile-stage-w) - var(--mobile-pad) - var(--mobile-pad));
    max-width:none;
    top:auto;
    bottom:var(--mobile-copy-bottom);
    left:calc(var(--mobile-stage-left) + var(--mobile-pad));
    transform:none
  }
  #s-landing .pa-approved-landing .hero-copy h1{
    letter-spacing:-.045em;
    font-size:clamp(44px,12.381vw,59.5px);
    line-height:.94
  }
  #s-landing .pa-approved-landing .benefit-stack{
    margin-top:8px;
    font-size:clamp(19px,5.22vw,25px);
    line-height:1.14
  }
  #s-landing .pa-approved-landing .hero-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-top:18px
  }
  #s-landing .pa-approved-landing .primary-action,
  #s-landing .pa-approved-landing .secondary-action{
    width:100%;
    min-height:var(--mobile-cta-h);
    border-radius:16px;
    font-size:clamp(15px,4.103vw,19.5px)
  }
  #s-landing .pa-approved-landing .mobile-price{
    color:#f3ecdf;
    min-height:18px;
    margin:4px 0 6px;
    font-size:clamp(14px,3.641vw,17.5px);
    line-height:18px;
    text-align:center;
    display:block
  }
  #s-landing .pa-approved-landing .mobile-price strong{color:#ead28f;font-weight:800}
  #s-landing .pa-approved-landing .mobile-price span{color:#dfe2dfd1;font-weight:600}
  #s-landing .pa-approved-landing .transaction-line,
  #s-landing .pa-approved-landing .independence-line{display:none}
  #s-landing .pa-approved-landing .mobile-proof{
    color:#d8dde0cf;
    margin-top:16px;
    font-size:clamp(12.5px,3.155vw,15px);
    line-height:1.45;
    text-align:left;
    display:block
  }
  #s-landing .pa-approved-landing .mobile-proof p{margin:0}
  #s-landing .pa-approved-landing .mobile-proof p:first-child{margin-bottom:4px}
  #s-landing .pa-approved-landing .is-mobile-playing .film-control:not([hidden]){
    color:#f4f0e8;
    background:#071522b8;
    border:1px solid #f4f0e852;
    border-radius:50%;
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    display:inline-flex;
    justify-content:center;
    top:max(clamp(57px,15.9vw,76px),env(safe-area-inset-top,0px));
    right:calc(var(--mobile-stage-left) + var(--mobile-pad));
    bottom:auto;
    font-size:12px
  }
}

@media (prefers-reduced-motion:reduce){
  #s-landing .pa-approved-landing .hero-mobile-film{display:none}
  #s-landing .pa-approved-landing .mobile-hotel-label{transition:none}
}

/* ============================================================================
   v26: CHAPTER 00 IS A BOOK.

   The section used to play a fixed film: the stamp landed at a set second, the
   question at another, the gold line at another. That timing was retuned twice
   against how fast somebody actually reads, which is the tell that no single
   number is right for both a skimmer and a reader. The reader turns the page
   now, and the guess is gone.

   It is a DARK volume. A cream page field was built for this section once and
   pulled for reading as a wall of light in the middle of a dark page on a phone
   in the hand, and the phone block below still asserts one shared dark surface.
   Navy boards with gold tooling is the fairytale book this palette already owns.

   THE MARKUP ABOVE IS THE FALLBACK, NOT A LEFTOVER. Reduced motion, no
   JavaScript and viewports too short to hold a book all get the section exactly
   as it read before this file, and the book is cloned from that markup at
   runtime, so the plain version cannot rot without the book breaking first.
   Every rule here is therefore additive: nothing above is overridden until the
   script adds .pa-book-on to the section.
   ============================================================================ */

/* the track is what the reader spends to read the chapter; --bk-turns drives
   its height, so the pacing of the whole thing is one number */
#s-landing .pa-approved-landing .bk-track{position:relative;z-index:1}
#s-landing .pa-approved-landing .bk-stage{
  position:sticky;top:0;height:100svh;min-height:560px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(20px,3vh,40px) 0 clamp(46px,6vh,68px);
}
/* tap mode and the fallback both release the pin */
#s-landing .pa-approved-landing .why-section:not(.pa-book-on) .bk-stage{
  position:static;height:auto;min-height:0;padding:0;display:block;
}

/* ---- the volume ---- */
#s-landing .pa-approved-landing .bk-book{
  --bk-spread:min(620px,92vw);
  --bk-h:min(658px,74svh);
  position:relative;width:var(--bk-spread);height:var(--bk-h);
  perspective:5200px;perspective-origin:50% 50%;
}
/* the boards: dark cloth over stiff board, a little larger than the text block
   so the pages sit inside a cover the way they do in the hand */
#s-landing .pa-approved-landing .bk-book::before{
  content:"";position:absolute;inset:-14px -18px -16px;border-radius:5px 9px 9px 5px;
  background:linear-gradient(152deg,#1c3d57,#122b40 34%,#0a1c2c 74%,#061321);
  box-shadow:0 54px 110px -34px #000000d1,0 14px 34px -14px #0000008c,inset 0 0 0 1px #ffffff14;
}
/* the gold tooling line on the boards */
#s-landing .pa-approved-landing .bk-book::after{
  content:"";position:absolute;inset:-7px -11px -9px;border-radius:3px 6px 6px 3px;
  pointer-events:none;border:1px solid #d9b8674d;
}
#s-landing .pa-approved-landing .bk-inner{position:absolute;inset:0;transform-style:preserve-3d}

/* ---- page slots ---- */
#s-landing .pa-approved-landing .bk-slot{position:absolute;top:0;height:100%;width:50%;overflow:hidden}
#s-landing .pa-approved-landing .bk-slot.bk-recto{left:0;width:100%;border-radius:4px}

/* the page field lifts off the section ground and falls away into the gutter.
   #12273a is the section's own navy, not paper: this stays a dark book. */
#s-landing .pa-approved-landing .bk-pg{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vh,66px) clamp(34px,4.6vw,60px) clamp(56px,7vh,78px);
  background:#12273a;color:#eceee9;overflow:hidden;
}
#s-landing .pa-approved-landing .bk-pg>*{max-width:none}
#s-landing .pa-approved-landing .bk-pg.bk-left{background:linear-gradient(90deg,#173350,#12273a 30%,#0a1b28)}
/* lit from above the way a page under a lamp is, falling off at the edges.
   Flat fill was the other half of why this read as a slide. */
#s-landing .pa-approved-landing .bk-pg.bk-right{
  background:
    radial-gradient(ellipse 84% 44% at 50% -8%,#6b9cc022,#0000 68%),
    radial-gradient(ellipse 124% 80% at 50% 52%,#0000 50%,#03090f52 100%),
    linear-gradient(270deg,#173350,#12273a 30%,#0a1b28);
}
/* the lit outer edge of a page under a lamp: a hairline, not a border */
#s-landing .pa-approved-landing .bk-pg.bk-left::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;
  background:linear-gradient(#ffffff00,#ffffff26 22%,#ffffff26 78%,#ffffff00)}
#s-landing .pa-approved-landing .bk-pg.bk-right::before{content:"";position:absolute;inset:0 0 0 auto;width:1px;
  background:linear-gradient(#ffffff00,#ffffff26 22%,#ffffff26 78%,#ffffff00)}
/* the tooth of the paper, at a level you feel rather than see */
#s-landing .pa-approved-landing .bk-pg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#ffffff09 .5px,#0000 .5px);background-size:3px 3px}
#s-landing .pa-approved-landing .bk-folio{
  position:absolute;bottom:clamp(16px,2.4vh,26px);left:0;right:0;text-align:center;
  font:italic 400 13px/1 Instrument Serif,Iowan Old Style,Georgia,serif;
  color:#d9b8677a;letter-spacing:.06em;
}

/* ---- the sheets that turn ---- */
#s-landing .pa-approved-landing .bk-sheet{
  position:absolute;top:0;left:0;width:100%;height:100%;
  transform-style:preserve-3d;transform-origin:left center;
  transform:rotateY(calc(var(--bk-t,0) * -180deg));will-change:transform,opacity;
  opacity:calc((.86 - var(--bk-t,0)) * 4);
}
#s-landing .pa-approved-landing .bk-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
#s-landing .pa-approved-landing .bk-face.bk-back{transform:rotateY(180deg)}
#s-landing .pa-approved-landing .bk-face.bk-back .bk-pg>*{display:none}
#s-landing .pa-approved-landing .bk-face.bk-back .bk-pg{background:linear-gradient(270deg,#173350,#122b41 46%,#0c1e2e)}
/* ink fades before the sheet reaches an angle that would smear it, and the
   incoming ink waits until it is nearly flat again. Nothing is ever read at a
   steep angle, which is what keeps the type crisp through a turn. */
#s-landing .pa-approved-landing .bk-face.bk-front .bk-pg>*{opacity:calc((.34 - var(--bk-t,0)) * 4.4)}
#s-landing .pa-approved-landing .bk-face.bk-back .bk-pg>*{opacity:calc((var(--bk-t,0) - .66) * 4.4)}
/* the cover holds its title longer: it is the thing the reader watches leave */
#s-landing .pa-approved-landing .bk-face.bk-front .bk-pg.bk-cover>*,
#s-landing .pa-approved-landing .bk-face.bk-front .bk-pg.bk-cover::before{opacity:calc((.52 - var(--bk-t,0)) * 3.2)}
/* the light rolling off a lifting page */
#s-landing .pa-approved-landing .bk-shade{position:absolute;inset:0;pointer-events:none}
#s-landing .pa-approved-landing .bk-front .bk-shade{
  background:linear-gradient(275deg,#000000d9,#00000038 42%,#0000 72%);opacity:calc(var(--bk-t,0) * 1.5)}
#s-landing .pa-approved-landing .bk-back .bk-shade{
  background:linear-gradient(85deg,#000000e6,#0000004d 40%,#0000 70%);opacity:calc((1 - var(--bk-t,0)) * 1.5)}
/* the shadow the lifting sheet throws onto the page it uncovers */

/* ---- the gutter and the gilt ---- */
/* gilt edges. Their thickness is the progress bar: the stack on the left grows
   as the reader advances and the stack on the right thins out. */
#s-landing .pa-approved-landing .bk-gilt{position:absolute;top:2.5%;height:95%;pointer-events:none}
#s-landing .pa-approved-landing .bk-gilt i{position:absolute;top:0;bottom:0;width:100%;display:block;border-radius:1px;
  background:repeating-linear-gradient(0deg,#d9b86799 0 1px,#0b1a2900 1px 2px);box-shadow:inset 0 0 9px #00000082}
#s-landing .pa-approved-landing .bk-gilt.bk-l{left:0;width:var(--bk-stackl,4px);transform:translateX(-100%)}
#s-landing .pa-approved-landing .bk-gilt.bk-r{right:0;width:var(--bk-stackr,4px);transform:translateX(100%)}

/* ---- the controls. Named, not a corner to discover: a labelled next, a
   previous, a position and an announcement, which is what a paged reader owes
   a keyboard and a screen reader. They stay typographic so they read as part
   of the binding rather than as a widget bolted underneath it. ---- */
#s-landing .pa-approved-landing .bk-bar{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,26px);margin-top:clamp(14px,2vh,22px);
}
#s-landing .pa-approved-landing .bk-bar button{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;cursor:pointer;color:var(--gold);
  background:none;border:1px solid #d9b86740;border-radius:50%;
  transition:color .2s,border-color .2s,background .2s,opacity .2s;
}
#s-landing .pa-approved-landing .bk-bar button svg{width:19px;height:19px;display:block}
#s-landing .pa-approved-landing .bk-bar button:hover:not(:disabled){color:#f0dda6;border-color:#d9b867a8;background:#d9b8670f}
#s-landing .pa-approved-landing .bk-bar button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#s-landing .pa-approved-landing .bk-bar button:disabled{opacity:.26;cursor:default;border-color:#d9b8671f}
#s-landing .pa-approved-landing .bk-bar .bk-count{
  font:italic 400 14px/1 Instrument Serif,Iowan Old Style,Georgia,serif;
  color:#9fb4c4;letter-spacing:.05em;font-variant-numeric:tabular-nums;min-width:7ch;text-align:center;font-size:15px;
}
#s-landing .pa-approved-landing .bk-bar .bk-onward{color:var(--blue);border-color:#9cc7e04d}
#s-landing .pa-approved-landing .bk-bar .bk-onward:hover:not(:disabled){color:#cfe6f5;border-color:#9cc7e0a8;background:#9cc7e00f}
#s-landing .pa-approved-landing .bk-dots{display:flex;align-items:center;gap:9px;margin-top:clamp(12px,1.6vh,18px)}
#s-landing .pa-approved-landing .bk-dots i{width:5px;height:5px;border-radius:50%;background:#9cc7e038;display:block;
  transition:background .3s,transform .3s}
#s-landing .pa-approved-landing .bk-dots i.bk-on{background:var(--gold);transform:scale(1.35)}

/* ---- each half of the leaf is a control: invisible, full height, and a real
   button so it keeps a name, the tab order and a focus ring. The corner curl
   is the only thing drawn, and only when a pointer is over the forward half. */
#s-landing .pa-approved-landing .bk-side{
  position:absolute;top:0;bottom:0;width:50%;z-index:70;
  border:0;background:none;padding:0;margin:0;cursor:pointer;color:var(--gold);
  -webkit-tap-highlight-color:transparent;
}
#s-landing .pa-approved-landing .bk-side.bk-prev{left:0}
#s-landing .pa-approved-landing .bk-side.bk-next{right:0}
#s-landing .pa-approved-landing .bk-side[disabled]{cursor:default;pointer-events:none}
#s-landing .pa-approved-landing .bk-side:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:4px}
/* the hint: a lifted corner on the forward half, a soft edge on the back half */
#s-landing .pa-approved-landing .bk-side .bk-corner{
  position:absolute;right:0;bottom:0;width:clamp(56px,5.4vw,76px);height:clamp(56px,5.4vw,76px);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(225deg,#2c5178c4 0%,#16304a7a 42%,#0000 46.5%);
  box-shadow:-2px -2px 11px #0000005c;border-bottom-right-radius:4px;
  opacity:0;transform:translate(6px,6px);
  transition:opacity .26s,transform .26s cubic-bezier(.16,1,.3,1);
}
#s-landing .pa-approved-landing .bk-side.bk-prev .bk-corner{
  right:auto;left:0;clip-path:polygon(0 0,0 100%,100% 100%);
  background:linear-gradient(135deg,#2c5178c4 0%,#16304a7a 42%,#0000 46.5%);
  box-shadow:2px -2px 11px #0000005c;border-radius:0 0 0 4px;
  transform:translate(-6px,6px);
}
#s-landing .pa-approved-landing .bk-side:hover .bk-corner,
#s-landing .pa-approved-landing .bk-side:focus-visible .bk-corner{opacity:1;transform:none}
@media (hover:none){
  /* nothing to hover on a phone, so the forward corner sits lifted at rest and
     says the leaf can be lifted */
  #s-landing .pa-approved-landing .bk-side.bk-next .bk-corner{opacity:.75;transform:none}
}

/* ---- the front board. Cloth, not paper: deeper and more saturated than any
   page, so when it swings open the reader sees a cover leave and a page
   arrive rather than one page replacing another. ---- */
#s-landing .pa-approved-landing .bk-pg.bk-cover{
  justify-content:center;align-items:center;text-align:center;
  background:
    repeating-linear-gradient(90deg,#ffffff08 0 1px,#0000 1px 3px),
    repeating-linear-gradient(0deg,#00000012 0 1px,#0000 1px 3px),
    radial-gradient(ellipse 84% 62% at 52% 36%,#25507326,#0000 66%),
    linear-gradient(157deg,#1b3f5e,#122b41 34%,#0a1c2e 76%,#06131f);
  box-shadow:inset 0 0 100px #01070d80,inset 14px 0 26px -12px #01060cc4;
}
#s-landing .pa-approved-landing .bk-pg.bk-cover::before{
  content:"";position:absolute;inset:clamp(20px,2.6vh,30px) clamp(22px,2.4vw,34px);
  border:1px solid #d9b86747;border-radius:2px;width:auto;background:none;
}
#s-landing .pa-approved-landing .bk-cover .bk-rule2{
  position:absolute;inset:clamp(26px,3.3vh,38px) clamp(28px,3.1vw,43px);
  border:1px solid #d9b8672b;border-radius:1px;pointer-events:none;
}
#s-landing .pa-approved-landing .bk-cover .bk-mark{width:clamp(44px,3.4vw,54px);margin:0 0 clamp(20px,2.6vh,30px);opacity:.95}
#s-landing .pa-approved-landing .bk-cover .bk-mark img{width:100%;height:auto;display:block}
#s-landing .pa-approved-landing .bk-cover .bk-chapno{margin:0;color:var(--gold);letter-spacing:.05em;
  font:italic 400 clamp(19px,1.5vw,23px)/1 Instrument Serif,Iowan Old Style,Georgia,serif}
#s-landing .pa-approved-landing .bk-cover .bk-title{margin:15px 0 0;color:#f3ecdf;letter-spacing:-.035em;
  font:400 clamp(36px,3.4vw,54px)/1 Instrument Serif,Iowan Old Style,Georgia,serif}
#s-landing .pa-approved-landing .bk-cover .bk-folio{display:none}
/* the endpaper facing it: a bound book's first opening is quiet */
#s-landing .pa-approved-landing .bk-pg.bk-endpaper{
  background:radial-gradient(ellipse 74% 54% at 40% 42%,#1d3a55,#0000 70%),
    linear-gradient(90deg,#1a344c,#122a3f 42%,#0c1e2e);
}
#s-landing .pa-approved-landing .bk-endpaper .bk-blind{margin:auto;width:78px;opacity:.09;filter:grayscale(1) brightness(2.4)}
#s-landing .pa-approved-landing .bk-endpaper .bk-blind img{width:100%;height:auto;display:block}

/* ---- what the copy does once it is on a leaf. The section's own type scale,
   re-fitted to a 500px page instead of a 1100px column. ---- */
#s-landing .pa-approved-landing .bk-pg .why-setup,
#s-landing .pa-approved-landing .bk-pg .why-average{
  margin:0;max-width:34ch;color:#f1ece2;
  font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;font-weight:400;
  font-size:clamp(22px,1.85vw,27px);line-height:1.48;letter-spacing:.004em;text-wrap:pretty}

#s-landing .pa-approved-landing .bk-pg .why-deletion{margin:0}
#s-landing .pa-approved-landing .bk-pg .why-deletion strong{
  max-width:none;font-size:clamp(34px,3.4vw,50px);line-height:.99;letter-spacing:-.042em}
#s-landing .pa-approved-landing .bk-pg .why-deletion span{margin-top:16px;font-size:clamp(16px,1.2vw,19px)}
#s-landing .pa-approved-landing .bk-pg.bk-question{justify-content:center;text-align:center;align-items:center}
#s-landing .pa-approved-landing .bk-pg .why-question{
  margin:0;max-width:28ch;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:#dfe4e3c4;text-align:center}
#s-landing .pa-approved-landing .bk-pg .why-question em{
  margin:16px auto 0;max-width:14ch;color:#f4efe5;font-size:clamp(34px,3.3vw,48px);line-height:1.04;letter-spacing:-.035em}
/* these four are styled above as descendants of .why-copy, and on a leaf they
   have no .why-copy ancestor any more, so the voice has to be restated or the
   commissions pair falls back to sans and the payoff stops being gold */
#s-landing .pa-approved-landing .bk-pg .why-commission,
#s-landing .pa-approved-landing .bk-pg .why-pull{
  margin:0;color:#f4efe5;
  font-family:Instrument Serif,Iowan Old Style,Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.2vw,33px);line-height:1.2;letter-spacing:-.005em;text-wrap:balance}
#s-landing .pa-approved-landing .bk-pg .why-commission{margin-bottom:4px}
#s-landing .pa-approved-landing .bk-pg .why-average{color:#eceee9}
#s-landing .pa-approved-landing .bk-pg.bk-finale{justify-content:center;align-items:center;text-align:center}
#s-landing .pa-approved-landing .bk-pg .why-finale{
  max-width:15ch;margin:0 auto;color:var(--gold);
  font-family:Instrument Serif,Iowan Old Style,Georgia,serif;font-weight:400;
  font-size:clamp(34px,3.5vw,52px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
#s-landing .pa-approved-landing .bk-pg .why-finale::before{margin-bottom:18px}
/* align-self:start and the grid placement come from the editorial layout the
   fallback still uses; on a leaf the card is the whole subject and fills it */
#s-landing .pa-approved-landing .bk-pg .pa-review{
  margin:0 0 32px;max-width:none;width:auto;align-self:stretch;grid-column:auto;grid-row:auto;
  padding:19px 21px 20px}
/* and the header stops short of the stamp instead of running under it */
#s-landing .pa-approved-landing .bk-pg .pa-review .rhead{padding-right:112px}
#s-landing .pa-approved-landing .bk-pg .pa-review .rstars{font-size:15px}
#s-landing .pa-approved-landing .bk-pg .pa-review .rname{font-size:14px;white-space:nowrap}
#s-landing .pa-approved-landing .bk-pg .pa-review{filter:none;rotate:0deg}
#s-landing .pa-approved-landing .bk-pg .pa-review::after{
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:#081420;opacity:0}
#s-landing .pa-approved-landing .bk-pg .pa-review .rline{
  height:7px;margin-top:12px;border-radius:5px;position:relative;overflow:hidden;
  background:#7b99b52e}
#s-landing .pa-approved-landing .bk-pg .pa-review .rline::after{
  content:"";position:absolute;inset:0;border-radius:5px;background:#84a2bcb8;
  transform:scaleX(1);transform-origin:left}
#s-landing .pa-approved-landing .bk-pg .pa-review .rphotos{gap:8px;margin-top:15px}
#s-landing .pa-approved-landing .bk-pg .pa-review .rphotos i{width:46px;height:35px;border-radius:5px}
#s-landing .pa-approved-landing .bk-pg .pa-review .pa-stamp{font-size:14px;padding:4px 10px 3px}
#s-landing .pa-approved-landing .bk-pg .pa-dcap{
  float:left;display:flex;align-items:center;justify-content:center;
  width:clamp(58px,5.6vw,78px);height:clamp(58px,5.6vw,78px);
  margin:.16em .66em .04em 0;padding:0;
  color:var(--gold);text-shadow:0 2px 12px #d9b86747;
  font-size:clamp(34px,3.3vw,46px);line-height:1;
  background:linear-gradient(150deg,#1e3d58,#0f2336);
  border:1px solid #d9b8677a;border-radius:2px;
  box-shadow:inset 0 0 0 3px #0c1e2f,inset 0 0 0 4px #d9b86733,0 5px 18px #00000059;
}
#s-landing .pa-approved-landing .bk-pg.bk-setup .why-setup{
  font-size:clamp(23px,1.95vw,29px);line-height:1.46}


/* ---- THE EVIDENCE. Every beat shows the thing it claims, in the vocabulary
   this section already owns: hairline bars, the coral stamp, gold for what was
   bought, blue for what is true. No photographs, no new colours, and no numbers
   invented about a real hotel. ---- */
#s-landing .pa-approved-landing .pa-viz{margin-top:clamp(18px,2.6vh,28px);width:100%;max-width:none}
/* the warnings that never arrived. It fades out rather than counting, because
   the honest answer to the question above it is that nobody knows. */
#s-landing .pa-approved-landing .pa-viz-warnings .pv-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  -webkit-mask-image:linear-gradient(#000 0 34%,#0009 62%,#0000 100%);
          mask-image:linear-gradient(#000 0 34%,#0009 62%,#0000 100%);
}
#s-landing .pa-approved-landing .pa-viz-warnings .pv-grid i{
  display:block;height:25px;border-radius:4px;border:1px solid #a1c2d63d;
  background:linear-gradient(#84a2bc8c,#84a2bc8c) 4px 5px/60% 2px no-repeat,
    linear-gradient(#84a2bc5c,#84a2bc5c) 4px 10px/78% 2px no-repeat,
    linear-gradient(150deg,#13283b,#0a1a29);
}
#s-landing .pa-approved-landing .pa-viz-warnings .pv-grid i.pv-gone{
  border-style:dashed;border-color:#c96f4e6b;background:#0a1a2966;position:relative}
#s-landing .pa-approved-landing .pa-viz-warnings .pv-grid i.pv-gone::after{
  content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:#c96f4ec4;transform:rotate(-9deg)}
/* rank order and quality, disagreeing in public */
#s-landing .pa-approved-landing .pa-viz-rank{display:grid;gap:9px}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px}
#s-landing .pa-approved-landing .pa-viz-rank .pv-rk{text-align:right;color:#9fb4c4;font-variant-numeric:tabular-nums;
  font:italic 400 14px/1 Instrument Serif,Iowan Old Style,Georgia,serif}
#s-landing .pa-approved-landing .pa-viz-rank .pv-bar,
#s-landing .pa-approved-landing .pa-viz-avg .pv-bar{display:block;height:8px;border-radius:5px;background:#1b3348;position:relative;overflow:hidden}
#s-landing .pa-approved-landing .pa-viz-rank .pv-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,50%);
  border-radius:5px;background:linear-gradient(90deg,#5c7f9e,#7ba7d6)}
#s-landing .pa-approved-landing .pa-viz-rank .pv-chip{
  font:800 9.5px/1 Manrope Variable,Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:#e0c079;border:1px solid #d9b8676b;border-radius:3px;padding:3px 6px 2px;white-space:nowrap}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-paid .pv-bar::after{background:linear-gradient(90deg,#8a6f36,#d9b867)}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-win .pv-bar::after{background:linear-gradient(90deg,#b8933f,#e5cd8d)}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-win .pv-bar{box-shadow:0 0 0 1px #d9b8674d}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-win .pv-rk{display:flex;justify-content:flex-end}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-win .pv-rk img{width:15px;height:auto;display:block}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-struck{opacity:.5}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-struck .pv-chip{color:#c96f4e;border-color:#c96f4e6b;position:relative}
#s-landing .pa-approved-landing .pa-viz-rank .pv-row.pv-struck .pv-chip::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:#c96f4e}
#s-landing .pa-approved-landing .pa-viz-sorted{margin-top:clamp(20px,2.8vh,30px);max-width:290px;margin-inline:auto}
/* one number, three different trips */
#s-landing .pa-approved-landing .pa-viz-avg{display:grid;gap:clamp(14px,2vh,20px)}
#s-landing .pa-approved-landing .pa-viz-avg .pv-head{display:flex;align-items:center;gap:16px}
#s-landing .pa-approved-landing .pa-viz-avg .pv-num{color:var(--blue);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  font:400 clamp(46px,4.4vw,70px)/.82 Instrument Serif,Iowan Old Style,Georgia,serif}
#s-landing .pa-approved-landing .pa-viz-avg .pv-side{display:flex;flex-direction:column;gap:8px;min-width:0}
#s-landing .pa-approved-landing .pa-viz-avg .pv-stars{color:var(--gold);font-size:14px;letter-spacing:.2em;line-height:1}
#s-landing .pa-approved-landing .pa-viz-avg .pv-cap{color:#9fb4c4;letter-spacing:.16em;text-transform:uppercase;
  font:800 10.5px/1.3 Manrope Variable,Inter,sans-serif}
#s-landing .pa-approved-landing .pa-viz-avg .pv-split{display:grid;gap:10px;padding-top:clamp(12px,1.8vh,18px);border-top:1px solid #d9b8672e}
#s-landing .pa-approved-landing .pa-viz-avg .pv-who{display:grid;gap:6px}
#s-landing .pa-approved-landing .pa-viz-avg .pv-who b{color:#cfd8dcd9;letter-spacing:-.005em;
  font:600 12.5px/1.3 Manrope Variable,Inter,sans-serif}
#s-landing .pa-approved-landing .pa-viz-avg .pv-bar{height:7px}
#s-landing .pa-approved-landing .pa-viz-avg .pv-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,50%);
  border-radius:5px;background:linear-gradient(90deg,#4d6f8d,#9cc7e0)}
#s-landing .pa-approved-landing .bk-pg .pa-viz+.why-average,
#s-landing .pa-approved-landing .bk-pg .why-pull+.pa-viz{margin-top:clamp(20px,2.8vh,30px)}

/* ---- the beats arrive with the page they belong to, once. Keyed to the PAGE
   rather than to the sheet, because the last leaf is not a sheet at all: it
   sits in the static slot, so under the old selectors the closing ranking was
   simply drawn already by the time anyone reached it. Same principle as the
   section's own film either way: an element that will make an entrance must
   not be visible first and blink out to begin it. ---- */
@media (prefers-reduced-motion:no-preference){
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .pa-review .rline::after{transform:scaleX(0)}
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .pa-review .rphotos i,
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .pa-review .pa-stamp,
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .why-deletion strong,
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .why-deletion span,
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .pa-viz-avg .pv-head,
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .pa-viz-rank .pv-chip{opacity:0}
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .pa-viz .pv-bar::after{width:0}

  /* the card writes, is stamped and dies. A reader who turned a page to get
     here is already looking at it, so it moves at the pace of somebody who
     has arrived rather than somebody being introduced. */
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review{animation:pv-tilt .2s .45s ease-out both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review::after{animation:pv-dim .2s .45s ease-out both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rline::after{animation:pv-write .18s both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rline:nth-of-type(1)::after{animation-delay:.03s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rline:nth-of-type(2)::after{animation-delay:.09s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rline:nth-of-type(3)::after{animation-delay:.15s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rline:nth-of-type(4)::after{animation-delay:.21s}
  @keyframes pv-write{to{transform:scaleX(1)}}
  @keyframes pv-tilt{to{rotate:-1.2deg;translate:0 3px}}
  @keyframes pv-dim{to{opacity:.45}}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rphotos i{animation:paw-rise .14s both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rphotos i:nth-child(1){animation-delay:.25s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rphotos i:nth-child(2){animation-delay:.29s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .rphotos i:nth-child(3){animation-delay:.33s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-review .pa-stamp{animation:paw-slam .13s .4s cubic-bezier(.3,1.2,.5,1) both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .why-deletion strong{animation:paw-rise .26s .52s cubic-bezier(.16,1,.3,1) both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .why-deletion span{animation:paw-rise .22s .64s ease both}

  /* the drawings come in after the words they belong to, not with them */
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz .pv-bar::after{transition:width 1.05s cubic-bezier(.16,1,.3,1) .5s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-sorted .pv-bar::after{transition-delay:1.05s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-avg .pv-head{animation:paw-rise .8s .18s cubic-bezier(.16,1,.3,1) both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-rank .pv-chip{animation:paw-rise .6s both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-rank .pv-row:nth-child(1) .pv-chip{animation-delay:1.2s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-rank .pv-row:nth-child(2) .pv-chip{animation-delay:1.36s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-sorted .pv-row:nth-child(3) .pv-chip{animation-delay:1.85s}

  /* THE WARNINGS GO OUT ONE AT A TIME. They arrive as ordinary reviews, all of
     them alive, and are crossed off one by one while the reader watches. That
     is the sentence above them happening rather than being illustrated. */
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .pa-viz-warnings .pv-grid i{opacity:0}
  #s-landing .pa-approved-landing .bk-pg .pa-viz-warnings .pv-grid i.pv-gone{
    border-style:solid;border-color:#a1c2d63d;background:linear-gradient(150deg,#13283b,#0a1a29)}
  #s-landing .pa-approved-landing .bk-pg .pa-viz-warnings .pv-grid i.pv-gone::before,
  #s-landing .pa-approved-landing .bk-pg .pa-viz-warnings .pv-grid i.pv-gone::after{
    content:"";position:absolute;left:6px;right:6px;top:50%;height:1.6px;border-radius:1px;
    background:#d9705099;opacity:0;transform:scaleX(.2) rotate(-11deg);transform-origin:center}
  #s-landing .pa-approved-landing .bk-pg .pa-viz-warnings .pv-grid i.pv-gone::before{--r:-11deg}
  #s-landing .pa-approved-landing .bk-pg .pa-viz-warnings .pv-grid i.pv-gone::after{--r:11deg;transform:scaleX(.2) rotate(11deg)}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i{animation:paw-rise .4s both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i:nth-child(7n+1){animation-delay:.16s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i:nth-child(7n+2){animation-delay:.22s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i:nth-child(7n+3){animation-delay:.28s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i:nth-child(7n+4){animation-delay:.34s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i:nth-child(7n+5){animation-delay:.40s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i:nth-child(7n+6){animation-delay:.46s}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i:nth-child(7n+7){animation-delay:.52s}
  /* each strike carries its own --d, written on the element, because the ones
     that go are scattered through the grid rather than falling on a nth-child */
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i.pv-gone{
    animation:paw-rise .4s both,pv-fade .5s var(--d,1s) ease-out both}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i.pv-gone::before,
  #s-landing .pa-approved-landing .bk-pg.bk-shown .pa-viz-warnings .pv-grid i.pv-gone::after{
    animation:pv-strike .34s var(--d,1s) cubic-bezier(.3,1.1,.5,1) both}
  @keyframes pv-strike{from{opacity:0;transform:scaleX(.2) rotate(var(--r,-11deg))}
    to{opacity:1;transform:scaleX(1) rotate(var(--r,-11deg))}}
  @keyframes pv-fade{to{border-style:dashed;border-color:#c96f4e6b;background:#0a1a2966}}

  /* the closing line arrives before the ranking that proves it */
  #s-landing .pa-approved-landing .bk-pg:not(.bk-shown) .why-finale{opacity:0}
  #s-landing .pa-approved-landing .bk-pg.bk-shown .why-finale{animation:paw-rise .9s .15s cubic-bezier(.16,1,.3,1) both}
}

/* ---- a book in one hand is one page wide, which is what a real book does ---- */
@media (width<=860px){
  /* the sticky Start My Report bar sits over the bottom of every phone screen,
     so the stage owes it the same clearance the section used to give it */
  #s-landing .pa-approved-landing .bk-stage{
    padding-top:clamp(30px,5.5vh,56px);
    padding-bottom:calc(84px + clamp(18px,2.4vh,26px) + env(safe-area-inset-bottom,0px));
  }
  #s-landing .pa-approved-landing .bk-stage .pa-folio{margin-bottom:clamp(16px,2.4vh,24px)}
  #s-landing .pa-approved-landing .bk-book{--bk-spread:min(460px,100vw - 82px);--bk-h:min(536px,58svh)}
  #s-landing .pa-approved-landing .bk-pg{padding:clamp(26px,3.4vh,36px) clamp(22px,6vw,32px) clamp(46px,5.4vh,60px)}
  #s-landing .pa-approved-landing .bk-side .bk-corner{width:52px;height:52px}
  #s-landing .pa-approved-landing .bk-pg.bk-setup,
  #s-landing .pa-approved-landing .bk-pg.bk-average,
  #s-landing .pa-approved-landing .bk-pg.bk-review,
  #s-landing .pa-approved-landing .bk-pg.bk-commissions{
    justify-content:center;padding-top:clamp(26px,3.4vh,36px)}
  #s-landing .pa-approved-landing .pa-viz-warnings .pv-grid{grid-template-columns:repeat(6,1fr);gap:6px}
  #s-landing .pa-approved-landing .pa-viz-warnings .pv-grid i{height:17px}
  #s-landing .pa-approved-landing .pa-viz-avg .pv-num{font-size:clamp(42px,13vw,58px)}
  #s-landing .pa-approved-landing .pa-viz-sorted{max-width:none}
}

/* the smallest handsets: the 4.5 breakdown and a seven line paragraph do not
   both fit a 480px leaf at reading size, so the leaf keeps the reading size and
   the drawing gives up the room */
@media (width<=400px){
  #s-landing .pa-approved-landing .bk-pg{padding:24px 20px 42px}
  #s-landing .pa-approved-landing .bk-pg .why-setup,
  #s-landing .pa-approved-landing .bk-pg .why-average,
  #s-landing .pa-approved-landing .bk-pg.bk-setup .why-setup{font-size:20px;line-height:1.44}
  /* the card and the line it earns both give room back on the smallest leaf */
  #s-landing .pa-approved-landing .bk-pg .pa-review{margin-bottom:20px;padding:14px 15px 15px}
  #s-landing .pa-approved-landing .bk-pg .pa-review .rhead{padding-right:84px;gap:8px}
  #s-landing .pa-approved-landing .bk-pg .pa-review .rname{font-size:12px;white-space:nowrap}
  #s-landing .pa-approved-landing .bk-pg .pa-review .rstars{font-size:13px;letter-spacing:.14em}
  #s-landing .pa-approved-landing .bk-pg .pa-review .rline{height:6px;margin-top:9px}
  #s-landing .pa-approved-landing .bk-pg .pa-review .rphotos{margin-top:12px}
  #s-landing .pa-approved-landing .bk-pg .pa-review .rphotos i{width:38px;height:29px}
  #s-landing .pa-approved-landing .bk-pg .pa-review .pa-stamp{font-size:12px;padding:3px 8px 2px}
  #s-landing .pa-approved-landing .bk-pg .why-deletion strong{font-size:31px}
  #s-landing .pa-approved-landing .bk-pg .why-deletion span{margin-top:12px;font-size:16px}
  #s-landing .pa-approved-landing .bk-pg .pa-dcap{width:54px;height:54px;font-size:32px;margin:.14em .56em .04em 0}
  #s-landing .pa-approved-landing .pa-viz{margin-top:14px}
  #s-landing .pa-approved-landing .pa-viz-avg{gap:11px}
  #s-landing .pa-approved-landing .pa-viz-avg .pv-num{font-size:44px}
  #s-landing .pa-approved-landing .pa-viz-avg .pv-split{gap:7px;padding-top:11px}
  #s-landing .pa-approved-landing .pa-viz-avg .pv-who{gap:4px}
  #s-landing .pa-approved-landing .bk-pg .pa-viz+.why-average{margin-top:16px}
}

/* ---- the fallback keeps the evidence, it simply sits in the flow ---- */
#s-landing .pa-approved-landing .why-section:not(.pa-book-on) .pa-viz{max-width:430px;margin-top:22px}
#s-landing .pa-approved-landing .why-section:not(.pa-book-on) .pa-viz-sorted{margin-inline:0}
#s-landing .pa-approved-landing .why-section:not(.pa-book-on) .bk-coversrc{display:none}

/* ---- the section itself. Everything above lays #why-plot-armor out as a two
   column editorial grid with its own inline padding, which is exactly right
   for the fallback and exactly wrong for a book: the track became a grid item
   and the volume was squeezed into a column. When the book is on the section
   is a plain block and the stage does the centring. ---- */
#s-landing .pa-approved-landing .why-section.pa-book-on{
  display:block;grid-template-columns:none;gap:0;
  padding-inline:0;padding-top:0;padding-bottom:0;
}
#s-landing .pa-approved-landing .bk-stage .pa-folio{
  flex:none;width:min(1040px,92vw);margin:0 auto clamp(14px,2vh,22px);
}
@media (width<=860px){
  #s-landing .pa-approved-landing .bk-stage .pa-folio{width:min(460px,100vw - 82px)}
}
/* the running head is the book's, so the fallback's copy of it never doubles */
#s-landing .pa-approved-landing .why-section.pa-book-on .origin-story[hidden],
#s-landing .pa-approved-landing .why-section.pa-book-on .why-copy[hidden]{display:none}

/* ---- and the reason the book would not pin. .pa-approved-landing carries
   overflow-x:hidden to stop sideways scroll, and overflow-x:hidden computes
   overflow-y to auto, which makes the element a scroll container. A sticky
   descendant then sticks to THAT container rather than to the viewport, and
   since it never scrolls, the sticky never engages. overflow-x:clip does the
   same clipping without becoming a scroll container, which is why body and
   html on this page already use it. ---- */
#s-landing .pa-approved-landing{overflow-x:clip}


/* ---- fireflies on the hero CTA ---- */
/* THE SHADE IS THE REASON FOR z-index 6. It is a 98%-opaque wash at the left
   edge fading out by 62%, and the near plane of the field lives under its
   strongest part, because that is where the planting is and where the button
   is. Under the shade those six would be dimmed to nothing. Above it they are
   full-strength sparks on ground measured at 8-32 of 255, which is exactly the
   contrast a firefly wants. Still below the copy at 15, the captions at 16 and
   the lens at 23, so no spark ever crosses a word. */
.hs-flybox{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
/* the plate restates object-fit:cover: a 16/9 box, at least as wide and at
   least as tall as the hero, centred. So the field's coordinates are
   coordinates on the PAINTING, and the crop can move without taking the
   fireflies off the bushes. */
.hs-flyplate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;aspect-ratio:16/9}
.hs-flies{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
/* TWO ELEMENTS, BECAUSE THERE ARE TWO MOTIONS. The dot's own wander is a
   keyframe animation on transform, and the lean toward the button is a
   transition on transform, and one element cannot hold both -- the animation
   would simply overwrite the transition every frame. The wrapper carries the
   lean, the dot inside carries the wander, and the browser composes them, so a
   firefly on its way over is still wobbling like a firefly. */
/* NO TRANSITION ON THE WRAPPER. A transition can only draw a straight line
   between two points, and a firefly does not fly in straight lines. The route
   is a generated path played by the script instead; the wrapper just holds
   whatever transform that path is currently at. */
/* the wrapper carries the waking. Nothing is on screen until the button is
   hovered, and then they do not all arrive at once: each one fades up on its
   own schedule, a couple first and the rest filling in behind them. Once a fly
   has woken it stays awake -- it has shown itself, and going back to nothing
   would undo what the hover just taught you about the bank. */
.hs-flies i{position:absolute;display:block;width:0;height:0;
  opacity:0;transition:opacity 1s ease}
.hs-flies b{position:absolute;display:block;
  width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
  border-radius:50%;background:#FFE9A8;
  box-shadow:0 0 var(--g) var(--sp) rgba(255,222,140,.75);opacity:0;
  animation:hfDrift var(--dur) ease-in-out var(--del) infinite,
            hfPulse calc(var(--dur)/2.6) ease-in-out var(--del) infinite;
  animation-play-state:paused}
/* THE LEAN. Not a swarm and not an arrival: about a third of the way over,
   capped, so they read as having noticed rather than as being summoned. The
   ones nearest the button notice first -- the stagger is proportional to
   distance -- which is what makes it look like attention spreading through a
   field rather than a group animation firing at once. --lx/--ly are written by
   the script from the button's real position, once per layout. */

/* only once the scene has landed: the hero opens on a five-second lighting
   film, and a firefly during the reveal would be answering nothing.

   SEEN IS A LATCH. Before the first hover the planting is dark and the field
   is a surprise. After it, the flies stay: they fly back to the leaves and go
   on glowing there, because that is where this species actually lives -- the
   females never fly at all, they perch in low planting and glow slowly. A
   fade to nothing on mouseleave would be the one ending the animal does not
   have, and it also throws away the thing the hover just taught you, which is
   that the bank on the left is inhabited. */
.hero-scene.is-landed.ff-lit .hs-flies,
.hero-scene.is-landed.ff-seen .hs-flies{opacity:1;transition:opacity 1.1s ease .22s}
.hero-scene.is-landed.ff-lit .hs-flies b,
.hero-scene.is-landed.ff-seen .hs-flies b{animation-play-state:running}
.hero-scene[data-ff="off"] .hs-flies{display:none}
@keyframes hfDrift{0%{transform:translate(0,0)}30%{transform:translate(var(--x1),var(--y1))}
  60%{transform:translate(var(--x2),var(--y2))}100%{transform:translate(0,0)}}
/* A REAL FLASH IS MOSTLY DARKNESS. This used to floor at 16% of peak so the
   field never thinned out, which is a compromise a photograph of a hedge does
   not make: Photinus flashes for well under a second and is then simply gone
   for seconds at a time. So the cycle is dark for its first 56%, gives the
   two-flash pulse the species is named for, and goes out again. At the periods
   below that is roughly a second and a half of nothing per fly, which is what
   makes the field read as insects rather than as lights. */
@keyframes hfPulse{0%,36%{opacity:0}44%{opacity:var(--pk)}
  52%{opacity:calc(var(--pk)*.26)}62%{opacity:calc(var(--pk)*.95)}
  72%,100%{opacity:0}}
/* CLOSER IN, THEY FLASH MORE. The resting cycle above is the honest one: a
   fly in the planting is dark about three quarters of the time, which is what
   a hedge looks like and is why the field reads as insects. Held at that rate
   the whole way across, though, the ones crossing to the button spend most of
   the journey invisible, and the gathering it is supposed to show never quite
   assembles on screen. So the answer is not to raise the floor -- there is no
   floor any more, they go out properly -- it is to flash MORE OFTEN while they
   are interested, which is also what the animal does: the flash dialogue
   quickens as a male closes on a signal that is answering him. Same two-flash
   shape, same full darkness between, roughly half the dark. This applies only
   while the button is being hovered, so it covers the crossing and the hover
   around the button and nothing else. The trip home is at the resting rate.
   Each fly keeps its own negative delay, so swapping the name mid-flight
   restarts them at eighteen different phases rather than in unison. */
@keyframes hfNear{0%,8%{opacity:0}20%{opacity:var(--pk)}
  32%{opacity:calc(var(--pk)*.28)}50%{opacity:calc(var(--pk)*.95)}
  66%,100%{opacity:0}}
.hero-scene.ff-lit .hs-flies b{animation-name:hfDrift,hfNear}
/* THE LANTERN. This started as a glow that answered the fireflies -- it faded
   up over four and a half seconds so that it arrived when they did. Wrong way
   round, and Chris caught it: a light that appears because insects turned up
   is an effect, and what the moment wants is a cause. You touch the button,
   it lights, and THEN they come. So the trigger is :hover rather than the
   class the firefly script sets, which also means it works with the script
   asleep, below the 1024px cutoff where there is no field at all, and under
   reduced motion. The fireflies are one reading of why the lantern matters;
   the lantern does not depend on them.

   Three parts, and only the first is instant:
     - the bloom arrives in 140ms, quicker than the button's own 180ms lift, so
       the light leads the movement rather than trailing it;
     - the face warms about eight percent, which is what stops it reading as a
       sticker of a glow pasted behind an unchanged button;
     - and then it breathes, four seconds a cycle, the halo swelling five and a
       half percent and settling back. That is the whole fairytale of it. A
       steady light is a UI state; a light that moves a little is a lamp with
       something burning in it, and it costs one keyframe.
   The breath is on transform rather than opacity, which matters more than it
   sounds: an animation on a property wins over a transition on it, so
   breathing on opacity meant that losing the hover dropped the animation and
   the glow SNAPPED off instead of fading -- measured at zero 120ms after
   leaving, with a 340ms fade sitting right there in the stylesheet doing
   nothing. Scale swells the halo and leaves opacity free to fade.
   Leaving puts it out in 340ms, faster than it came, the way blowing a candle
   out is quicker than lighting one. */
#s-landing .pa-approved-landing .hero-scene .primary-action{position:relative}
#s-landing .pa-approved-landing .hero-scene .primary-action::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 18px 2px rgba(255,226,160,.50),0 0 52px 12px rgba(226,186,108,.34);
  opacity:0;transition:opacity .34s ease}
#s-landing .pa-approved-landing .hero-scene .primary-action:hover::after,#s-landing .pa-approved-landing .hero-scene .primary-action:focus-visible::after{
  opacity:1;transition:opacity .14s ease;
  animation:ctaBreathe 4s ease-in-out .5s infinite}
#s-landing .pa-approved-landing .hero-scene .primary-action:hover,#s-landing .pa-approved-landing .hero-scene .primary-action:focus-visible{
  background:linear-gradient(135deg,#f2dca6,#e3c273)}
@keyframes ctaBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@media (prefers-reduced-motion:reduce){
  #s-landing .pa-approved-landing .hero-scene .primary-action:hover::after,#s-landing .pa-approved-landing .hero-scene .primary-action:focus-visible::after{animation:none}
  .hs-flies b{animation:none;opacity:.55}
  .hs-flies,.hero-scene.is-landed.ff-lit .hs-flies,
  .hero-scene.is-landed.ff-seen .hs-flies{transition:opacity .01ms}
  /* leaning is motion too: they stay where they live */
  .hs-flies i{transform:none}
}
/* THE LIVE HERO SWAPS PAINTINGS UNDER 1024px, where the planted coordinates
   mean nothing. The field is desktop-only, deliberately -- but the lantern
   above is not gated, because it is the button lighting up and has nothing
   to do with whether anything answers it. */
@media (max-width:1023px){.hs-flybox{display:none}}


/* ============================================================================
   v4: THE MOBILE PAGE BELOW THE HERO.

   v3 shipped the approved portrait hero. Everything under it was still the
   desktop page with its grids collapsed -- same 92/110 section padding, same
   43-44px display headings, same card design -- which measured 5,411px at
   390x844 against a 3,498px desktop page. These rules are the phone layout for
   the five blocks below the hero.

   ONE BREAKPOINT, AT 760px. That is where .finding-grid already collapses to
   one column, and it is the phone layout the brief measured.

   The sticky bar and the closing ask started at <=1023px, on the reasoning
   that a tablet has the same "no way to buy between the hero and the footer"
   problem a phone has. Measured, that reasoning cost 524px: at 768px the
   additive blocks landed but none of the compaction did, taking that page
   from 4,546px to 5,070px. So 761-1023px is left exactly as it was. Whether
   a tablet should get the bar is a real question, but it is a separate one,
   and answering it here made that width worse rather than better.
   ========================================================================== */

/* The bar is mobile furniture. Desktop must not grow a fixed bar; its own page
   ends the way it already did. */
#s-landing .pa-approved-landing .pa-sticky-cta{display:none}

@media (width<=760px){
  /* ---- 2.6a Sticky action bar ------------------------------------------
     Revealed by IntersectionObserver once .hero-actions leaves the viewport
     (see the landing script), never by a scroll handler. Starts translated
     out rather than display:none so the reveal can be a transition and so the
     bar is never a tab stop while it is off screen. */
  #s-landing .pa-approved-landing .pa-sticky-cta{
    position:fixed;
    inset:auto 0 0;
    z-index:80;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 24px calc(10px + env(safe-area-inset-bottom,0px));
    background:#061321f2;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-top:1px solid #a1c2d63d;
    transform:translateY(101%);
    visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s linear .28s
  }
  #s-landing .pa-approved-landing .pa-sticky-cta[data-visible="true"]{
    transform:none;
    visibility:visible;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s
  }
  #s-landing .pa-approved-landing .pa-sticky-cta .primary-action{
    flex:1 1 auto;
    min-height:50px;
    border-radius:14px;
    font-size:16px
  }
  #s-landing .pa-approved-landing .sticky-price{
    flex:0 0 auto;
    margin:0;
    color:#dfe2dfd1;
    font-size:14px;
    line-height:1.2;
    white-space:nowrap
  }
  #s-landing .pa-approved-landing .sticky-price strong{color:#ead28f;font-weight:800}

  /* The bar sits over the end of the document, so the legal links need room
     to clear it. 74px is the bar at its tallest plus the safe area. */
  #s-landing .pa-approved-landing .site-footer{
    padding-bottom:calc(18px + 74px + env(safe-area-inset-bottom,0px))
  }

  /* NO CLOSING CTA BLOCK. There was one here, and it was wrong: with the
     sticky bar already on screen it put three buttons in view at once, two of
     them the same button. One primary action is visible at any moment -- the
     hero's, and the bar once the hero's has scrolled away. */
}

@media (width<=760px) and (prefers-reduced-motion:reduce){
  #s-landing .pa-approved-landing .pa-sticky-cta{transition:none}
  #s-landing .pa-approved-landing .pa-sticky-cta[data-visible="true"]{transition:none}
}

@media (width<=760px){
  /* ---- 2.2 ONE LEFT RAIL ------------------------------------------------
     The hero has exactly one left edge, at 24px, and that is most of why it
     looks composed while nothing below it does. Below it there were five:
     headings at 24, card content at 49, FAQ rows at 53, Why prose at 57, and
     step copy at 96. Everything that is page content -- as opposed to content
     inside an object -- now starts at 24px. The .finding-card keeps its own
     24px internal padding: that is an object, not the page. */

  /* #how-it-works: the .step-route gutter ate 72px of a 390px screen, leaving
     step copy 261px, which is why "Know which hotel actually wins" ran into
     the edge. The number becomes a label above the heading instead of a
     medallion beside it, and the connectors that drew the vertical route go
     with it -- a one-column list does not need a route drawn down its side. */
  #s-landing .pa-approved-landing .steps li{
    display:block;
    grid-template-columns:none;
    padding:20px 0 22px;
    min-height:0
  }
  #s-landing .pa-approved-landing .step-route{
    display:block;
    position:static;
    height:auto
  }
  #s-landing .pa-approved-landing .step-route:before,
  #s-landing .pa-approved-landing .step-route:after,
  #s-landing .pa-approved-landing .step-route i{display:none}
  #s-landing .pa-approved-landing .step-route span,
  #s-landing .pa-approved-landing .steps li:last-child .step-route span{
    display:block;
    width:auto;
    height:auto;
    color:var(--gold);
    background:0 0;
    border:0;
    border-radius:0;
    box-shadow:none;
    font-size:11px;
    font-weight:780;
    letter-spacing:.18em
  }
  #s-landing .pa-approved-landing .steps h3{
    grid-column:auto;
    max-width:none;
    margin:9px 0 0
  }
  #s-landing .pa-approved-landing .steps p{
    grid-column:auto;
    max-width:none;
    margin:7px 0 0
  }

  /* #why-plot-armor carried two nested left rules: a section rule at ~33px and
     the blockquote's gold rule at ~78px. Only the blockquote's says anything,
     so only the blockquote's survives. */
  #s-landing .pa-approved-landing .why-copy{
    border-left:0;
    max-width:none;
    padding:0
  }
  #s-landing .pa-approved-landing .why-copy blockquote{padding-left:22px}

  /* #common-questions: the .faq-list box is a card drawn around page content,
     and its padding is what pushed the rows to 53px. Rows become
     hairline-divided and start on the rail. */
  #s-landing .pa-approved-landing .faq-list{
    background:0 0;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none
  }
  #s-landing .pa-approved-landing .faq-list:before{display:none}
  #s-landing .pa-approved-landing .faq-item{border-bottom:1px solid #a3c2d52e}
  #s-landing .pa-approved-landing .faq-item:last-child{border-bottom:0}
}

/* The rail indicator is a phone affordance; on desktop .finding-grid is still a
   grid and a "1 of 6" would be meaningless. Declared before the breakpoint that
   turns it on, because a media query adds no specificity and a later base rule
   would win. */
#s-landing .pa-approved-landing .rail-dots{display:none}

@media (width<=760px){
  /* ---- 2.1 EVIDENCE BECOMES A SWIPE RAIL --------------------------------
     Six .finding-cards stacked at a forced 232px each was 1,466px of cards --
     #evidence alone measured 1,839px against a 1,044px desktop section. The
     reader learns the pattern by card three and stops reading, and the forced
     equal height put a visible hole in every card with a one-line headline.

     As a rail the equal heights stop being a liability and become the thing
     that makes it look clean, so flex stretch does the job the fixed height
     was doing badly. */
  #s-landing .pa-approved-landing .finding-grid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;   /* never hijack the iOS swipe-back gesture */
    scroll-padding-inline-start:24px;
    margin-inline:-24px;             /* full-bleed past the 24px rail */
    padding-inline:24px;
    padding-block:4px 10px;          /* room for the card shadow and focus ring */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  #s-landing .pa-approved-landing .finding-grid::-webkit-scrollbar{display:none}
  #s-landing .pa-approved-landing .finding-grid:focus-visible{
    outline:2px solid #f6efe4;
    outline-offset:2px
  }
  /* 78% is deliberate: a card that fills the viewport reads as static content
     and nobody swipes it. This leaves ~50px of the next card showing at 390px. */
  #s-landing .pa-approved-landing .finding-card{
    flex:0 0 78%;
    max-width:300px;
    min-height:0;
    height:auto;
    padding:20px 22px;
    scroll-snap-align:start;
    scroll-snap-stop:always            /* a fling advances one card, not three */
  }
  /* The bars, waveform, wave lines and loungers STAY. They were dropped here
     on the argument that they encode nothing, and that was the wrong call:
     they are what makes six text cards read as six different findings instead
     of six paragraphs, and without them the rail is a list of headlines. The
     rail is what bought the height back, not deleting these -- #evidence went
     from 1,840px to 500px with the visual still in every card.

     Slightly shorter than desktop's 48px, because the rail card is narrower
     and the headline should still be the first thing read. */
  #s-landing .pa-approved-landing .finding-visual{height:40px;margin-top:14px}
  /* The footer line was pinned to the bottom of the card (margin-top:auto),
     which is what put a visible hole under every one-line headline once the
     cards were forced to equal heights. In the rail they are equal by flex
     stretch, so the copy runs top-down and the slack falls at the bottom of
     the card where nobody reads it. */
  #s-landing .pa-approved-landing .finding-card>p{margin-top:0;padding-top:12px}

  /* Affordance. A rail with no indicator is a rail nobody scrolls. */
  #s-landing .pa-approved-landing .rail-dots{
    display:flex;
    justify-content:flex-start;
    gap:7px;
    margin:14px 0 0;
    padding:0
  }
  #s-landing .pa-approved-landing .rail-dots i{
    display:block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#7b99b566;
    transition:background .2s,transform .2s
  }
  #s-landing .pa-approved-landing .rail-dots i.is-current{
    background:var(--gold);
    transform:scale(1.25)
  }
}

@media (prefers-reduced-motion:reduce){
  #s-landing .pa-approved-landing .finding-grid{scroll-behavior:auto}
  #s-landing .pa-approved-landing .rail-dots i{transition:none}
}

@media (width<=760px){
  /* ---- 2.3 A TWO-TIER SPACING SCALE -------------------------------------
     Every section was 92px top / 110px bottom (evidence 76/82), which is
     ~800px of padding -- 15% of the page -- all weighted identically. When
     every gap is the same size, none of them says anything, and the reader
     gets no signal about which section matters or where one chapter ends.

     So: one normal gap, and exactly one bigger one. The act break is spent at
     #why-plot-armor, where the page stops presenting evidence and starts
     making an argument. */
  #s-landing .pa-approved-landing{
    --sec-pad-y:32px;      /* normal section top/bottom -- cut near-half at
                              Chris's read: the equal 56s made the page feel
                              padded rather than paced */
    --act-break:52px;      /* still the ONE bigger gap, same ratio to normal */
    --head-to-body:32px;   /* h2 to first content */
    --row-gap:14px         /* between steps and FAQ rows */
  }
  #s-landing .pa-approved-landing .evidence-section,
  #s-landing .pa-approved-landing .how-section,
  #s-landing .pa-approved-landing .faq-section{
    padding:var(--sec-pad-y) 24px
  }
  /* THE SPACE UNDER THE HERO -- and the only part of it that is mine to take.

     The hero stage is locked to the artwork's portrait aspect, so it runs a
     little past the bottom of the screen and the copy sits ~112px above its
     end. That trailing strip is the PLATE, not padding: on a phone the film
     and the still both fill the stage, and the picture is meant to run to the
     bottom edge of the screen. Three separate attempts to reclaim it all
     failed the same way -- by deleting artwork:

       - a gradient over the bottom of the stage washed the plate out;
       - a lower copy-bottom floor pushed the copy into the washed band;
       - a negative margin here, pulling this section up to 100svh, cut the
         plate outright. That one is the subtlest: svh is the SMALLEST
         viewport, the height with every retractable browser bar showing, so
         aligning a section edge to it guarantees a visible cut on any phone
         whose chrome is currently retracted -- which is most of them, most of
         the time. It measured clean in a fixed-height headless viewport and
         was plainly broken on a real handset.

     So the hero keeps its strip. The only emptiness that was actually mine is
     this section's own top padding, which was 56px plus 8px on the kicker
     stacked directly under the hero's. 28px, and no hairline: the plate's own
     edge is the boundary, and a rule drawn across it was what made the whole
     run read as a gap with a line in it. */
  #s-landing .pa-approved-landing .evidence-section{padding-top:28px}
  #s-landing .pa-approved-landing .evidence-section:before{display:none}
  #s-landing .pa-approved-landing .evidence-heading>p{margin-top:0}
  #s-landing .pa-approved-landing .why-section{padding:var(--act-break) 24px}

  #s-landing .pa-approved-landing .finding-grid{margin-top:var(--head-to-body)}
  #s-landing .pa-approved-landing .how-layout,
  #s-landing .pa-approved-landing .why-section,
  #s-landing .pa-approved-landing .faq-section{gap:var(--head-to-body)}
  #s-landing .pa-approved-landing .steps li{padding:var(--row-gap) 0 calc(var(--row-gap) + 4px)}
  #s-landing .pa-approved-landing .faq-item button{
    min-height:0;
    padding:var(--row-gap) 0;
    gap:20px
  }
  #s-landing .pa-approved-landing .faq-answer p:last-child{padding-bottom:20px}
}

@media (width<=760px){
  /* ---- 2.4 GIVE THE TYPE PEAKS -----------------------------------------
     Measured at 390px the hero h1 was 48px and the four section h2s were 43,
     44, 44 and 42 -- four consecutive display headings at 90% of the hero and
     within 2px of each other. Nothing was the biggest thing on its screen
     except by accident.

     The three section headings drop to 32px. The story lines in
     #why-plot-armor stay where they are: they are the page's second peak and
     the only type that should compete with the h1. */
  #s-landing .pa-approved-landing .evidence-heading h2,
  #s-landing .pa-approved-landing .how-heading h2,
  #s-landing .pa-approved-landing .faq-heading h2{
    max-width:none;
    font-size:32px;
    line-height:1.08;
    letter-spacing:-.03em
  }
  #s-landing .pa-approved-landing .origin-story h2{
    margin-top:22px;
    font-size:clamp(36px,10.8vw,44px)
  }

  /* The rail card is narrower than the grid card was, and the step heading no
     longer shares its line with a 72px gutter. */
  #s-landing .pa-approved-landing .finding-card h3{font-size:21px}
  #s-landing .pa-approved-landing .steps h3{font-size:22px;line-height:1.1}

  /* Body copy contrast. #dee4e7d1 and #e0e4e3c7 are dim grey-blue on
     near-black; the Why prose in particular is the most important reading on
     the page and was the faintest text on it. */
  #s-landing .pa-approved-landing .finding-card>p{color:#e6ebedeb;font-size:14.5px}
  #s-landing .pa-approved-landing .steps p{color:#e2e7e6ed;font-size:16px}
  #s-landing .pa-approved-landing .why-copy>p{color:#e7e8e3ed;font-size:17px}
  #s-landing .pa-approved-landing .faq-answer p{color:#d5dde5}
}

@media (width<=760px){
  /* ---- ONE DARK SURFACE, AND NO LIGHT BAND -----------------------------
     #why-plot-armor was inverted to cream paper here. It read as a wall of
     light in the middle of a dark page and clashed hard on a phone in the
     hand -- the landing is dark, and it should stay dark the whole way down.
     Reverted; the story keeps its white / blue / gold trio on the dark
     ground it was designed for.

     What survives from that pass is the part that was right: the bands
     underneath -- #061321, #071522, #06131F -- are within two or three
     values of each other, so on a phone they cost the page four transitions
     and buy nothing you can see. Every section below the hero is now the
     same surface, divided by the hairline rules that were already there. */
  #s-landing .pa-approved-landing .evidence-section,
  #s-landing .pa-approved-landing .how-section,
  #s-landing .pa-approved-landing .why-section,
  #s-landing .pa-approved-landing .faq-section{background:#071522}
}

/* THE HERO IS NOT TOUCHED. There is nothing here for .hero-scene on purpose.

   A "hero seam" fade used to live at this point in the file: a 150px (later
   120px) gradient over the bottom of the stage, on the brief's diagnosis that
   "the artwork ends on a hard horizontal crop with ~280px of flat dark before
   the first kicker". That diagnosis did not hold. On a phone .hero-static is
   height:100% with object-fit:cover, so the plate already fills the stage all
   the way down -- there was no flat dark to fade into.

   What the fade did instead was wash the bottom 120-150px of the artwork out
   to a flat colour, which is precisely the "giant empty space" it was supposed
   to remove: the plate stopped reaching the bottom of the proof line, and the
   picture under the copy turned into a void. Dropping the copy-bottom floor to
   88px then made it worse by moving the copy further into the washed band.

   The hero is back to exactly what it shipped as. The only real emptiness
   under it is the evidence section's own top padding, which is handled there.
   Do not put a gradient over the bottom of this stage again. */

@media (width<=760px){
  /* ---- 2.8 WRAP POINTS --------------------------------------------------
     On a 333px column these cannot be left to chance. Balance is what stops
     "day." sitting alone on its own line in the story headline. */
  #s-landing .pa-approved-landing h2,
  #s-landing .pa-approved-landing h3,
  #s-landing .pa-approved-landing .story-line{text-wrap:balance}

  /* Two of the three FAQ questions wrap to two lines, which left the +
     floating beside line one instead of sitting with it. */
  #s-landing .pa-approved-landing .faq-item button{align-items:flex-start}
  #s-landing .pa-approved-landing .faq-item button i{margin-top:1px}

  /* The drop cap hangs its indent, so the first three lines of the page's most
     important paragraph had a ragged left edge that reads as a bug -- and it
     is the one thing in the Why section that would not sit on the 24px rail.
     Dropped on phones rather than made flush: at this measure it costs three
     lines of raggedness to buy one decorative letter. */
  #s-landing .pa-approved-landing .why-dropcap:first-letter{
    float:none;
    padding:0;
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit
  }

  /* The sharpest sentence in the section was buried mid-paragraph. */
  #s-landing .pa-approved-landing .why-copy .why-pull{
    margin:0 0 26px;
    color:#f4efe5;
    font-size:19px;
    line-height:1.4;
    font-weight:650
  }
}



@media (width<=760px){
  /* ---- Measured corrections, from rendering it at 390x844 ----------------
     Everything below is a number that was wrong when the page was actually
     drawn rather than reasoned about. */

  /* The rail is full-bleed, so 78% of the flex container was 78% of the
     PADDED column (342px), not of the screen: cards came out 267px with an
     87px peek -- a narrow card and a wasted strip. Sized off the viewport
     instead, a card is ~296px at 390 and the next one peeks ~58px, which is
     the intended "there is obviously more to the right" and no more. */
  #s-landing .pa-approved-landing .finding-card{flex:0 0 76vw}

  /* The act break is the gap BEFORE the section where the argument turns.
     Paying it on the way out as well spent it twice. */
  #s-landing .pa-approved-landing .why-section{
    padding-top:var(--act-break);
    padding-bottom:var(--sec-pad-y)
  }
  #s-landing .pa-approved-landing .origin-story h2{margin-top:16px}
  /* 17px/1.7 measured 1,178px for this section against a 1,000px target. The
     same copy carries at 16px/1.6, which is still comfortable for the longest
     read on the page -- raising the contrast is what made it legible, not
     raising the size. */
  #s-landing .pa-approved-landing .why-copy>p{
    margin:0 0 20px;
    font-size:16px;
    line-height:1.6
  }
  #s-landing .pa-approved-landing .why-copy .why-pull{
    margin:0 0 20px;
    font-size:18px;
    line-height:1.4
  }
  #s-landing .pa-approved-landing .why-copy blockquote{
    margin:22px 0 20px;
    font-size:26px;
    line-height:1.12
  }

  /* #how-it-works was 627px against 560. */
  #s-landing .pa-approved-landing .steps li{padding:12px 0 16px}
  #s-landing .pa-approved-landing .steps h3{margin-top:7px}
  #s-landing .pa-approved-landing .steps p{
    margin-top:6px;
    font-size:15.5px;
    line-height:1.5
  }
}

/* ============================================================================
   v6: THE PHONE PLATE FILLS THE PHONE.

   The mobile artwork is 780x1800 and the stage is locked to exactly that
   aspect (230.769vw), so object-fit:cover fits it with no crop at all. The
   trouble is inside the picture: measured on the file itself, detail stops at
   about 61% of its height and everything below is a smooth ramp into flat
   rgb(1,13,29). It was composed that way -- a dark plate for the copy to sit
   on -- but on a phone that dark plate is the bottom quarter of the SCREEN, so
   the picture appears to stop somewhere around the proof line and the rest
   reads as the video having been cut off.

   Nothing about how the image is fitted can move that: with the aspects equal,
   the scale is pinned by the width. The only way to carry picture further down
   is to enlarge it and lose the edges. So the plate is zoomed on phones, and
   the label layer is zoomed with it, from the same origin -- that is what keeps
   "The hotel you found" pointing at the hotel it names, without recomputing a
   single one of the approved percentages.

   Phones only (<=480px), where the stage is full-bleed. From 481px up the
   stage is a centred 480px column with its own composition, and it is left
   alone. */
@media (width<=480px){
  #s-landing .pa-approved-landing .hero-scene{--mobile-plate-zoom:1.15}
  #s-landing .pa-approved-landing .hero-static,
  #s-landing .pa-approved-landing .hero-mobile-film,
  #s-landing .pa-approved-landing .mobile-hotel-labels{
    transform:scale(var(--mobile-plate-zoom));
    transform-origin:50% 0
  }
}


/* ==== THE ORIGIN STORY, MADE READABLE ON A PHONE =========================
   Everything in this block is at the END of the sheet on purpose. A media
   query carries no extra specificity, so these have to be declared after the
   ~760px rules above to beat them at equal weight.

   The section had two separate problems on a handset.

   ONE: the headline was smushed. It ran at line-height .98 -- below even the
   tight end of the 1.0-1.2 range display type wants -- in Instrument Serif,
   which has long descenders. The "y" of "stay." and the "p" of "report" were
   landing in the cap-height of the line beneath them.

   TWO, and worse: at 390px each of the three sentences wraps to two lines, so
   the leading INSIDE a sentence and the gap BETWEEN sentences were the same
   ~5px. The three beats of the story -- what happened, what they did, what we
   built -- collapsed into one eight-line wall, and the colour changes were
   left doing all the grouping work by themselves. The fix is not one number:
   it is opening the leading a little AND opening the gap between beats a lot,
   so the jump from "line" to "new sentence" is unmistakable. */
@media (width<=760px){
  #s-landing .pa-approved-landing .origin-story h2{
    font-size:clamp(34px,9.9vw,41px);
    line-height:1.07;
    letter-spacing:-.032em
  }
  /* 0 top / .34em bottom, not .12em both ways: the beats are separated by the
     space AFTER each one, which keeps the headline's first line tight to the
     "WHY PLOT ARMOR" kicker instead of drifting away from it. At 39px that is
     ~13px between sentences against ~2.7px of extra leading within one --
     a jump you read as structure rather than as a wider line. */
  #s-landing .pa-approved-landing .origin-story h2 .story-line{
    margin:0 0 .34em
  }
  #s-landing .pa-approved-landing .origin-story h2 .story-line:last-child{
    margin-bottom:0
  }

  /* ---- THE PROSE ------------------------------------------------------
     16px/1.6 was set to buy vertical height back, and it took it out of the
     longest read on the page. 16px is the FLOOR for mobile body copy, not the
     target; 16-18px is where sustained reading lives. 17px/1.65 costs about
     40px across the section and is the difference between skimming this and
     reading it. The height comes back out of the headline above.

     text-wrap:pretty re-flows only the last few lines, so there is no visible
     rebalancing of the paragraph -- it just stops leaving one word alone on a
     line. Safe on body copy in a way text-wrap:balance is not. */
  #s-landing .pa-approved-landing .why-copy>p{
    font-size:17px;
    line-height:1.65;
    margin:0 0 22px;
    color:#eceee9;
    text-wrap:pretty
  }

  /* ---- THE DROP CAP, BACK ---------------------------------------------
     It was dropped on phones because float:left hung its indent and left the
     first three lines with a ragged edge that read as a bug. initial-letter is
     the property that actually solves that: the browser sinks the cap against
     a stated number of baselines instead of guessing from a float, so the cap
     sits ON the rail and the lines beside it stay flush.

     Guarded, because Firefox still does not implement it -- there the
     paragraph simply opens without a cap, which is the same thing it does
     today and costs nothing. */
  @supports (initial-letter:2){
    #s-landing .pa-approved-landing .why-dropcap:first-letter{
      initial-letter:2 2;
      float:none;
      color:var(--gold);
      font-family:Instrument Serif,Georgia,serif;
      font-size:inherit;
      line-height:inherit;
      padding:0;
      margin-right:8px
    }
  }

  /* ---- THE PULL LINE --------------------------------------------------
     It was bold body copy at 18px, which on a dark ground reads as emphasis
     inside the paragraph rather than as a line lifted out of it. In the serif,
     at display size, with air on both sides, it becomes what it is: the
     sentence the whole section is built around.

     Deliberately NOT ruled. The blockquote below it is ruled, and two ruled
     serif blocks four hundred pixels apart in one short section read as the
     same element printed twice. The pull hangs flush at the full measure and
     the rule stays the quote's alone. */
  #s-landing .pa-approved-landing .why-copy .why-pull{
    margin:26px 0 26px;
    padding:0;
    border:0;
    color:#f4efe5;
    font-family:Instrument Serif,Georgia,serif;
    font-weight:400;
    font-size:26px;
    line-height:1.16;
    letter-spacing:-.02em;
    text-wrap:balance
  }

  /* The closing blockquote and the pull line were competing at 26px and 18px
     bold. The blockquote is the louder of the two and keeps the size. */
  #s-landing .pa-approved-landing .why-copy blockquote{
    margin:28px 0 22px;
    padding-left:18px;
    font-size:28px;
    line-height:1.14;
    text-wrap:balance
  }

  /* ---- THE SIGN-OFF ---------------------------------------------------
     A 12px uppercase line in blue was the quietest thing in the section, and
     it is the promise the whole story exists to make. Gold, over its own rule,
     under the shield -- the story closes on the mark it is a story about. */
  #s-landing .pa-approved-landing .why-copy .paid-by-you{
    display:flex;
    align-items:center;
    gap:11px;
    margin:0;
    padding-top:18px;
    border-top:1px solid #d9b8674d;
    color:var(--gold);
    font-size:12.5px;
    line-height:1.45;
    letter-spacing:.13em
  }
  #s-landing .pa-approved-landing .why-mark{
    flex:0 0 auto;
    width:23px;
    height:27px;
    display:block
  }
}

/* The mark is a phone-only flourish. Above 760px the Why column is a two-up
   composition that was approved without it, and the sign-off there is a blue
   kicker rather than a gold sign-off -- a shield beside it would be a second
   focal point in a column that already has one. */
@media (width>760px){
  #s-landing .pa-approved-landing .why-mark{display:none}
}


/* ==== PHONE, ROUND TWO: the crowd at the top and the hole in the middle ====
   Declared last so these beat the equal-specificity rules above them. */
@media (width<=760px){
  /* ---- 1. THE STORY IS SET TOO LARGE ---------------------------------
     The three-beat headline reads correctly now but it fills the screen on
     its own. Down about 10%, and the pull and quote with it so the section
     keeps its internal ladder rather than flattening at the top.
     The prose stays at 17px: that was the readability fix, not the problem. */
  #s-landing .pa-approved-landing .origin-story h2{
    font-size:clamp(30px,8.9vw,37px)
  }
  #s-landing .pa-approved-landing .why-copy .why-pull{font-size:23px}
  #s-landing .pa-approved-landing .why-copy blockquote{font-size:25px}

  /* WHY PLOT ARMOR is a label on a section whose own headline says what it is
     in three sentences. On a phone it is the first thing above the fold of
     that section and it earns none of that room. Kept above 760px, where it is
     the left column's only anchor in the approved two-up composition. */
  #s-landing .pa-approved-landing .origin-story>p{display:none}
  #s-landing .pa-approved-landing .origin-story h2{margin-top:0}
}

@media (width<=760px){
  /* ---- 2. THE HOLE BETWEEN THE HERO AND THE FIRST SECTION -------------
     Measured at 390x844: the copy ends at 788, the stage ends at 900, the
     first kicker sits at 928. That is 140px of nothing -- 112px of trailing
     plate plus 28px of section padding -- and it reads as the page having
     finished.

     Halved to 70px, and NOT by cutting the artwork, which is how the three
     previous attempts failed. The stage keeps its full height and the plate
     keeps its crop, so the labels still land on the buildings they name;
     the next section simply begins 58px earlier and covers the tail of the
     picture, which at this zoom is dark water and foliage. A fixed pixel
     overlap, never a viewport unit: svh/lvh are what made the last attempt
     measure clean headless and cut the plate on a real handset. */
  #s-landing .pa-approved-landing .evidence-section{
    margin-top:-58px;
    padding-top:16px
  }

  /* ---- 3. THE SECOND CAPTION WAS CROWDING THE HEADLINE ----------------
     Reclaiming the hero's height brought "Skip days of hotel research" up
     under "The hotel you missed", and the caption's node used to float in
     the air ABOVE the villa rather than touching it -- so the crowding and
     the imprecision had the same fix. The caption moves up and right into
     the clear band over the headland, and its leader lengthens and steepens
     to reach the villa's facade. Measured from the rendered node, not from
     the percentages: the layer is scaled by --mobile-plate-zoom, so a
     caption at top:27.5% actually draws at 27.5% x 900 x zoom. */
  #s-landing .pa-approved-landing .mobile-hotel-label-missed{
    top:27.5%;
    left:33%
  }
  #s-landing .pa-approved-landing .mobile-hotel-label-missed:after{
    width:79px;
    transform:rotate(47deg)
  }
}

/* ---- 4. A SHADE LESS ZOOM ---------------------------------------------
   1.15 was chosen to carry the picture to the bottom of the screen when the
   stage was the only thing that could fill it. With the section above now
   starting 58px earlier there is less tail to cover, and 1.15 was cropping
   more of the composition than it was buying. 1.10 keeps the plate full-bleed
   and gives the mountains and the far shore back.

   Both selectors stay in ONE rule. Splitting them unpins the captions from
   the plate: they are scaled by the same factor from the same origin, and
   that is the whole reason a caption still points at its building. */
@media (width<=480px){
  #s-landing .pa-approved-landing .hero-scene{--mobile-plate-zoom:1.10}
}


/* ==== THE TWO CAPTIONS READ AS TWO CAPTIONS ==============================
   POSITION. "The hotel you missed" sat almost directly under "The hotel you
   found" and under the palazzo that first caption names -- so the eye read a
   stack: one building, two labels. It moves right, out from under the palazzo
   and over the darker hillside, and its leader re-aims at the villa's facade.
   The pair now sit on a diagonal, which is what says they name two different
   places. Full clearance is not available at this measure -- the words are
   146px wide and the palazzo is 100px from the right edge of the screen -- so
   the right edge lands on the page's own 24px rail and the overlap left is a
   tail, not a stack.

   TIMING. The reveal was .10s and .28s: 180ms apart, against a .32s fade. The
   second caption started before the first had finished arriving, so both read
   as one event and the sentence they make together -- found, then missed --
   was never actually staged. 1.5s gives the first one time to be READ, not
   merely displayed, before the second interrupts.

   Reduced motion still gets both at once: the block above kills the transition
   entirely, and a delay on no transition is nothing. */
@media (width<=760px){
  #s-landing .pa-approved-landing .mobile-hotel-label-missed{
    top:27.5%;
    left:54%
  }
  #s-landing .pa-approved-landing .mobile-hotel-label-missed:after{
    width:58px;
    transform:rotate(75deg)
  }
  #s-landing .pa-approved-landing .is-mobile-landed .mobile-hotel-label-missed{
    transition-delay:1.5s
  }
}


/* ==== THE SECOND LEADER LEAVES FROM THE MIDDLE OF THE SENTENCE ===========
   It was anchored at margin-left:100% -- the label's right edge -- so a line
   that travels 90px across the frame set off from the corner of the words
   rather than from the words. Desktop has always dropped its leaders from the
   middle of the caption (margin:auto there) and leaned them at the building;
   this is the same idea in the mobile geometry, where the rule is a horizontal
   bar pivoting on its left end rather than a vertical one pivoting on its top.

   57%, not 50%: the caption is text-align:right inside a 34%-wide box, so the
   glyph run is 21px narrower than the box it sits in and the BOX centre is not
   the TEXT centre. Measured at 390px -- box 212-358, text 233-358 -- the middle
   of the words is 295, which is 57% of the box, not half of it.

   The angle and length are re-derived from that new origin so the node still
   lands on the villa's facade: 82px at 57 degrees puts it at (344,378), inside
   the lit front of the building.

   "The hotel you found" keeps its corner anchor deliberately. Its target sits
   immediately below and to the RIGHT of the caption, so a leader from the
   middle of those words would have to run nearly horizontally back across the
   caption's own second half to reach it. The two leaders differ because the two
   relationships differ: one names the building beside it, the other names one
   most of a screen away. */
@media (width<=760px){
  #s-landing .pa-approved-landing .mobile-hotel-label-missed:after{
    margin:5px 0 0 57%;
    width:82px;
    transform:rotate(57deg)
  }
}


/* ==== THE TWO LEADERS ARE THE SAME OBJECT, SO THEY ARE THE SAME LENGTH ====
   Measured before this: "found" ran 26px from the right CORNER of its words and
   "missed" ran 90px from the middle of its own. Three and a half times the
   length and two different anchors, on two captions doing the identical job --
   which reads as two unrelated marks rather than one convention applied twice.

   Both now leave from inside their words and run about the same distance: 44px
   and 50px. The remaining 6px is the honest difference between the two
   subjects -- the palazzo sits right under its caption, the villa a little
   further off -- and the leader stops at the building's edge rather than
   burying its node in the middle of the facade. */
@media (width<=760px){
  #s-landing .pa-approved-landing .mobile-hotel-label-found:after{
    margin-left:83%;
    width:44px;
    transform:rotate(25deg)
  }
  #s-landing .pa-approved-landing .mobile-hotel-label-missed:after{
    width:50px
  }
}

/* v12: one decisive close for non-phone layouts. The <=760px sticky remains
   the only mobile conversion control once the hero leaves the viewport. */
#s-landing .pa-approved-landing .closing-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(64px,5.4vw,88px) max(clamp(34px,6vw,118px),50vw - 868px);
  border-top:1px solid var(--line);
  background:radial-gradient(circle at 76% 28%,#3f70912e,#0000 34%),#071522
}
#s-landing .pa-approved-landing .closing-cta-inner{
  position:relative;
  overflow:hidden;
  width:min(100%,1280px);
  margin:0 auto;
  padding:clamp(34px,3vw,48px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,330px);
  align-items:center;
  gap:clamp(42px,6vw,92px);
  border:1px solid #99b8cc3d;
  border-radius:18px;
  background:linear-gradient(145deg,#10273bf5,#071421f5);
  box-shadow:0 26px 70px #0003,inset 0 1px #ffffff08
}
#s-landing .pa-approved-landing .closing-cta-inner:before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:44%;
  height:2px;
  background:linear-gradient(90deg,var(--gold),#d9b86700)
}
#s-landing .pa-approved-landing .closing-cta-copy h2{
  margin:0;
  color:#f0e8dc;
  font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;
  font-size:clamp(42px,3vw,58px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.04em;
  text-wrap:balance
}
#s-landing .pa-approved-landing .closing-cta-copy>p{
  max-width:44ch;
  margin:14px 0 0;
  color:#d7dee1;
  font-size:clamp(16px,.94vw,18px);
  line-height:1.55
}
#s-landing .pa-approved-landing .closing-cta-action{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px
}
#s-landing .pa-approved-landing .closing-cta-action .primary-action{
  width:100%;
  min-height:56px
}
#s-landing .pa-approved-landing .closing-proof{
  margin:0;
  color:#dfe2dfbd;
  text-align:center;
  font-size:13.5px;
  line-height:1.45
}
#s-landing .pa-approved-landing .closing-proof strong{
  color:#ead28f;
  font-weight:800
}
@media (width<=1023px) and (width>760px){
  #s-landing .pa-approved-landing .closing-cta{padding:56px 24px}
  #s-landing .pa-approved-landing .closing-cta-inner{
    grid-template-columns:minmax(0,1fr) minmax(220px,260px);
    gap:28px;
    padding:32px
  }
  #s-landing .pa-approved-landing .closing-cta-copy h2{font-size:38px}
}
@media (width<=760px){
  #s-landing .pa-approved-landing .closing-cta{display:none}
}

/* ============================================================================
   v13: THE ORIGIN STORY EARNS ITS ENDING.

   The old display headline told the entire story, then the prose immediately
   told it again. This version removes that spoiler and lets scale, type and
   colour mark the turns inside the story itself. There are no cards, badges or
   process graphics here: it should read like an editorial page, not a SaaS
   feature list. Gold is held back for the final sentence. */
/* v22: the scene groups. Setup, card and deletion line are one beat and sit
   close enough to read as one object changing state; the question is a chapter
   turn and takes its space from its own margin, not from a gap every element
   pays for. */
#s-landing .pa-approved-landing .why-beats{
  display:grid;
  gap:clamp(16px,1.7vw,24px);
  margin-top:28px
}
#s-landing .pa-approved-landing .why-setup,
#s-landing .pa-approved-landing .why-deletion,
#s-landing .pa-approved-landing .why-question{
  max-width:42ch;
  margin:0;
  color:#eceee9;
  font-size:clamp(17px,1.02vw,20px);
  line-height:1.68;
  text-wrap:pretty
}
#s-landing .pa-approved-landing .why-deletion strong{
  display:block;
  max-width:10.5ch;
  color:var(--blue);
  font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;
  font-size:clamp(42px,3.45vw,58px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.042em;
  text-wrap:balance
}
#s-landing .pa-approved-landing .why-deletion span{
  display:block;
  margin-top:15px;
  color:#dfe4e3d4;
  font-size:clamp(16px,.96vw,18px)
}
#s-landing .pa-approved-landing .why-question{
  margin-top:clamp(56px,11vw,160px);
  margin-inline:auto;
  text-align:center
}
#s-landing .pa-approved-landing .why-question em{
  display:block;
  max-width:16ch;
  margin:10px auto 0;
  color:#f4efe5;
  font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;
  font-size:clamp(34px,2.8vw,48px);
  font-weight:400;
  font-style:normal;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance
}
#s-landing .pa-approved-landing .why-copy{
  align-self:start;
  max-width:none;
  padding-top:0
}
#s-landing .pa-approved-landing .why-copy>p{
  text-wrap:pretty
}
/* v25: THE COMMISSIONS BEAT IS ONE STATEMENT, NOT A SETUP AND A PAYOFF.
   "Hotels pay commissions." was blue sans above a cream serif line, which made
   a reader take two sentences that say one thing as two separate moves. It now
   matches .why-pull exactly and sits four pixels above it, so the pair reads as
   one paragraph in one voice. The blue has not left the section: the deletion
   line still carries it, which is where this section wants that colour spent. */
#s-landing .pa-approved-landing .why-copy .why-commission{
  margin:0 0 4px;
  color:#f4efe5;
  font-family:Instrument Serif,Iowan Old Style,Georgia,serif;
  font-size:clamp(22px,1.45vw,27px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.005em;
  text-wrap:balance
}
#s-landing .pa-approved-landing .why-copy .why-pull{
  margin:0 0 20px;
  color:#f4efe5;
  font-family:Manrope Variable,Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(22px,1.45vw,27px);
  font-weight:760;
  line-height:1.28;
  letter-spacing:-.025em;
  text-wrap:balance
}
#s-landing .pa-approved-landing .why-copy .why-average{
  margin:0;
  color:#eceee9;
  font-size:clamp(17px,1vw,19px);
  line-height:1.68
}
#s-landing .pa-approved-landing .why-copy .why-finale{
  max-width:15ch;
  margin:clamp(62px,7vw,110px) auto 0;
  text-align:center;
  color:var(--gold);
  font-family:Instrument Serif,Iowan Old Style,Baskerville,Georgia,serif;
  font-size:clamp(52px,4.8vw,78px);
  font-weight:400;
  line-height:.99;
  letter-spacing:-.04em;
  text-wrap:balance
}
#s-landing .pa-approved-landing .why-finale:before{
  content:"";
  display:block;
  width:68px;
  height:1px;
  margin:0 auto 22px;
  background:linear-gradient(90deg,#d9b86700,var(--gold),#d9b86700)
}

@media (width>1023px){
  #s-landing .pa-approved-landing .why-section{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(18px,2vw,30px);
    row-gap:clamp(48px,5vw,76px);
    align-items:start
  }
  /* v23: A COLUMN, NOT THE WHOLE PAGE. The three anchors were right and still
     read as scattered, because they were spread over 1268px of section: the
     left rail and the review scene ended up a third of a screen apart, and the
     argument below finished 700px short of the right edge. Everything in this
     story now lives in one 1100px column, centered, so left, right-of-center
     and center are near enough each other to read as one composition. */
  #s-landing .pa-approved-landing .origin-story,
  #s-landing .pa-approved-landing .why-copy{
    width:100%;
    max-width:1100px;
    margin-inline:auto
  }
  #s-landing .pa-approved-landing .origin-story{
    grid-column:1/-1;
    min-width:0
  }
  #s-landing .pa-approved-landing .why-beats{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(18px,2vw,30px);
    row-gap:clamp(16px,1.7vw,24px)
  }
  /* v22: THREE horizontal anchors for the whole section, not one per element.
     Left rail (col 1) carries the narration, the review scene sits just right
     of center (col 5) and completes the paragraph it belongs to, and the two
     chapter turns -- the question and the conclusion -- are centered. Every
     element used to start at its own column, which is what made the reader
     hunt for the next sentence. */
  /* The opening is ONE scene on one band: the paragraph on the left, the review
     it produced beside it on the right, and what happened to that review
     directly under the card. Stacking them left a third of a screen of empty
     page between a three-line paragraph and the card that completes it, which
     is the diagonal the eye was being asked to jump. */
  #s-landing .pa-approved-landing .why-setup{grid-column:1/span 6;grid-row:1;align-self:start}
  #s-landing .pa-approved-landing .why-deletion{grid-column:7/span 6;grid-row:2}
  #s-landing .pa-approved-landing .why-question{grid-column:2/span 10;grid-row:3}
  #s-landing .pa-approved-landing .why-copy{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(18px,2vw,30px);
    row-gap:clamp(15px,1.6vw,22px);
    width:100%;
    border-left:0;
    padding:0
  }
  /* the argument reads straight down the left rail: setup line, the statement
     it sets up (indented one column, the only step in the whole passage), then
     the explanation. The conclusion leaves the rail and centers. */
  /* Every line of the argument starts on the rail. The paid-placement line was
     indented a column, and at display size on a wide screen an indent does not
     read as an indent -- it reads as centered, badly. */
  #s-landing .pa-approved-landing .why-copy .why-commission{grid-column:1/span 6;grid-row:1;margin:0}
  /* v25: the two lines are one statement in one voice now, so the row gap
     between them is cancelled back to the 4px the phone already uses. Every
     other gap in this grid is untouched: the negative margin is spent on the
     pull alone rather than on the grid's row-gap, which the beats below still
     want. */
  #s-landing .pa-approved-landing .why-copy .why-pull{grid-column:1/span 8;grid-row:2;
    margin:calc(4px - clamp(15px,1.6vw,22px)) 0 0}
  #s-landing .pa-approved-landing .why-copy .why-average{grid-column:1/span 8;grid-row:3}
  #s-landing .pa-approved-landing .why-copy .why-finale{grid-column:2/span 10;grid-row:4}
}

@media (width<=1023px){
  #s-landing .pa-approved-landing .why-section{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(44px,6vw,64px)
  }
  #s-landing .pa-approved-landing .why-copy{
    width:min(100%,720px);
    max-width:720px;
    border-left:0;
    padding:0
  }
}

@media (width<=760px){
  #s-landing .pa-approved-landing .why-section{
    gap:42px;
    padding-top:var(--act-break);
    padding-bottom:calc(var(--sec-pad-y) + 84px + env(safe-area-inset-bottom,0px))
  }
  /* The kicker no longer repeats a display headline, so it earns its place. */
  #s-landing .pa-approved-landing .origin-story>p{
    display:block;
    margin:0
  }
  #s-landing .pa-approved-landing .why-beats{
    gap:18px;
    margin-top:20px
  }
  #s-landing .pa-approved-landing .why-setup,
  #s-landing .pa-approved-landing .why-deletion,
  #s-landing .pa-approved-landing .why-question{
    max-width:34ch;
    font-size:17px;
    line-height:1.65
  }
  #s-landing .pa-approved-landing .why-deletion strong{
    max-width:10ch;
    font-size:clamp(36px,10.4vw,44px);
    line-height:1;
    text-wrap:balance
  }
  #s-landing .pa-approved-landing .why-deletion span{
    margin-top:12px;
    font-size:16px
  }
  /* the scene above groups at 18px; the turn buys its own separation, and more
     of it than the flat 34px gap used to give every pair in the stack */
  #s-landing .pa-approved-landing .why-question{
    margin-top:56px
  }
  #s-landing .pa-approved-landing .why-question em{
    max-width:15ch;
    margin-top:8px;
    font-size:clamp(29px,8.5vw,36px);
    line-height:1.06
  }
  #s-landing .pa-approved-landing .why-copy .why-commission{
    margin-bottom:4px;
    font-size:22px
  }
  #s-landing .pa-approved-landing .why-copy .why-pull{
    margin:0 0 18px;
    font-size:22px;
    line-height:1.28
  }
  #s-landing .pa-approved-landing .why-copy .why-average{
    margin:0;
    font-size:17px;
    line-height:1.65
  }
  #s-landing .pa-approved-landing .why-copy .why-finale{
    max-width:14ch;
    margin-top:64px;
    color:var(--gold);
    font-size:clamp(42px,12vw,52px);
    line-height:1;
    text-wrap:balance
  }
}

/* ============================================================
   v15 -- the six "Overlooked details" finding cards perform their
   findings. The script arms `.pa-anim` on the evidence section only
   when motion is allowed; the entry reveals then run as a RELAY (one
   card at a time, driven by .play/.done), hover brings a detail to
   life, and click replays it (the room card blares instead). Without
   .pa-anim -- no JS, no IntersectionObserver, or reduced motion -- the
   cards render exactly as v13 drew them, plus the beach-access verdict
   below, which is information and therefore not gated on animation.
   ============================================================ */

/* the beach-access verdict ✕ inside the seawall: statically drawn; the
   armed state hides it and strokes it in on the card's turn */
#s-landing .pa-approved-landing .no-beach-visual .nox{stroke:#c96f4e;stroke-width:2.6px;fill:none}

/* the beach-reality sun (hidden until its hover story runs) */
#s-landing .pa-approved-landing .beach-crowds-visual{position:relative}
#s-landing .pa-approved-landing .beach-crowds-visual i{position:relative;z-index:1}
#s-landing .pa-approved-landing .beach-crowds-visual .sun{position:absolute;z-index:0;left:56%;top:-17px;
  width:13px;height:13px;margin-left:-7px;border-radius:50%;pointer-events:none;opacity:0;display:block;
  background:radial-gradient(circle at 38% 35%,#f0dfa4,#d9b867 68%);box-shadow:0 0 10px 2px #d9b8673d}

/* -------- armed pre-states (only under .pa-anim) -------- */
#s-landing .pa-approved-landing .pa-anim .closure-visual i.is-closed{transform-origin:bottom;transform:scaleY(.263)}
#s-landing .pa-approved-landing .pa-anim .lounger-row i{position:relative}
#s-landing .pa-approved-landing .pa-anim .lounger-row i::after{content:"";position:absolute;inset:0;
  border-radius:inherit;background:linear-gradient(#d07c5a,#a85436);opacity:0}
#s-landing .pa-approved-landing .pa-anim .no-beach-visual .nox{stroke-dasharray:39;stroke-dashoffset:39}
#s-landing .pa-approved-landing .pa-anim .review-pattern-visual i{
  background:linear-gradient(#84a2bcb8,#84a2bcb8) left/100% 100% no-repeat}

/* -------- 1 · renovation: the closure stamps itself in (on its turn) ----- */
#s-landing .pa-approved-landing .pa-anim .finding-card.play .closure-visual i.is-closed{
  animation:pa-stamp .55s cubic-bezier(.16,1,.3,1) forwards}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .closure-visual i.is-closed:nth-of-type(6){animation-delay:.1s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .closure-visual i.is-closed:nth-of-type(7){animation-delay:.28s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .closure-visual i.is-closed:nth-of-type(8){animation-delay:.46s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .closure-visual i.is-closed:nth-of-type(9){animation-delay:.64s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .closure-visual i.is-closed:nth-of-type(10){animation-delay:.82s}
@keyframes pa-stamp{from{transform:scaleY(.263);background:#7b99b56b}to{transform:scaleY(1);background:#c96f4e}}

/* -------- 2 · room location: sound-check on its turn, live on hover,
             blare on click ------------------------------------------------ */
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .room-noise-visual i{
  animation:pa-vox .55s ease-in-out infinite alternate}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .room-noise-visual i:nth-child(2n){animation-duration:.46s;animation-delay:-.2s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .room-noise-visual i:nth-child(3n){animation-duration:.66s;animation-delay:-.36s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .room-noise-visual i:nth-child(4n){animation-duration:.42s;animation-delay:-.1s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .room-noise-visual i:nth-child(5n){animation-duration:.6s;animation-delay:-.28s}
@keyframes pa-vox{from{transform:scaleY(.4)}to{transform:scaleY(1.12)}}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .room-noise-visual i,
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .room-noise-visual i{
  animation:pa-vox .34s ease-in-out infinite alternate}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .room-noise-visual i:nth-child(2n),
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .room-noise-visual i:nth-child(2n){animation-duration:.28s;animation-delay:-.12s}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .room-noise-visual i:nth-child(3n),
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .room-noise-visual i:nth-child(3n){animation-duration:.4s;animation-delay:-.22s}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .room-noise-visual i:nth-child(4n),
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .room-noise-visual i:nth-child(4n){animation-duration:.26s;animation-delay:-.06s}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .room-noise-visual i:nth-child(5n),
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .room-noise-visual i:nth-child(5n){animation-duration:.37s;animation-delay:-.18s}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .room-noise-visual i:nth-child(7n),
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .room-noise-visual i:nth-child(7n){animation-duration:.31s;animation-delay:-.27s}
#s-landing .pa-approved-landing .pa-anim .finding-card.shout .room-noise-visual i{
  animation:pa-yell .11s ease-in-out infinite alternate}
#s-landing .pa-approved-landing .pa-anim .finding-card.shout .room-noise-visual i:nth-child(2n){animation-delay:-.04s}
#s-landing .pa-approved-landing .pa-anim .finding-card.shout .room-noise-visual i:nth-child(3n){animation-delay:-.07s}
@keyframes pa-yell{from{transform:scaleY(.9)}to{transform:scaleY(1.8)}}

/* -------- 3 · club access: each chair SNAPS coral on its turn; the hover
             gag keeps claiming rows until the copy is pushed out ---------- */
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i::after{animation:pa-claim 1ms linear forwards}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i{animation:pa-press .3s ease-out}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(2),
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(2)::after{animation-delay:.28s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(3),
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(3)::after{animation-delay:.56s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(4),
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(4)::after{animation-delay:.84s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(5),
#s-landing .pa-approved-landing .pa-anim .finding-card.play .lounger-row-front i:nth-child(5)::after{animation-delay:1.12s}
@keyframes pa-claim{from{opacity:0}to{opacity:1}}
@keyframes pa-press{35%{transform:translateY(1.5px)}}
#s-landing .pa-approved-landing .pa-anim .club-access-visual{grid-auto-rows:16px}
#s-landing .pa-approved-landing .pa-anim .finding-card-club-access .finding-visual{height:auto;min-height:48px}
#s-landing .pa-approved-landing .pa-anim .finding-card-club-access>*{flex-shrink:0}
#s-landing .pa-approved-landing .pa-anim .lounger-row.entering{animation:pa-rowin .5s cubic-bezier(.16,1,.3,1) backwards}
@keyframes pa-rowin{from{transform:translateX(-60px);opacity:0}to{transform:translateX(0);opacity:1}}
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i::after{animation:pa-claim 1ms linear forwards}
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i{animation:pa-press .3s ease-out}
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(2),
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(2)::after{animation-delay:.2s}
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(3),
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(3)::after{animation-delay:.4s}
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(4),
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(4)::after{animation-delay:.6s}
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(5),
#s-landing .pa-approved-landing .pa-anim .lounger-row.claimed i:nth-child(5)::after{animation-delay:.8s}

/* -------- 4 · beach access: the ✕ strokes itself on its turn; the water
             comes alive under the pointer --------------------------------- */
#s-landing .pa-approved-landing .pa-anim .finding-card.play .no-beach-visual .nox{
  animation:pa-drawx .22s cubic-bezier(.4,0,.6,1) forwards}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .no-beach-visual .nox:first-of-type{animation-delay:.7s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play .no-beach-visual .nox:last-of-type{animation-delay:.94s}
@keyframes pa-drawx{to{stroke-dashoffset:0}}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .no-beach-visual .wave,
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .no-beach-visual .wave{
  animation:pa-swell 2.6s ease-in-out infinite}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .no-beach-visual .wave:nth-of-type(2),
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .no-beach-visual .wave:nth-of-type(2){animation-delay:-.85s;animation-duration:2.9s}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .no-beach-visual .wave:nth-of-type(3),
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .no-beach-visual .wave:nth-of-type(3){animation-delay:-1.7s;animation-duration:2.4s}
@keyframes pa-swell{0%,100%{transform:translate(0,0)}25%{transform:translate(-4.5px,1.2px)}75%{transform:translate(4.5px,-1.2px)}}

/* -------- 5 · review pattern: lines ink in with their flags riding the
             leading edge; the flags buzz like flies under the pointer ----- */
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .review-pattern-visual i{
  animation:pa-inkline .95s cubic-bezier(.16,1,.3,1) backwards}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .review-pattern-visual span{
  animation:pa-flyin .95s cubic-bezier(.16,1,.3,1) backwards}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .review-pattern-visual i:nth-child(2),
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .review-pattern-visual i:nth-child(2) span{animation-delay:.2s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .review-pattern-visual i:nth-child(3),
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .review-pattern-visual i:nth-child(3) span{animation-delay:.4s}
@keyframes pa-inkline{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes pa-flyin{from{right:calc(100% - 8px)}to{right:-3px}}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .review-pattern-visual span,
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .review-pattern-visual span{
  animation:pa-buzz 3.1s linear infinite}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .review-pattern-visual i:nth-child(2) span,
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .review-pattern-visual i:nth-child(2) span{animation-duration:3.7s;animation-delay:-1.4s;animation-direction:reverse}
#s-landing .pa-approved-landing .pa-anim .finding-card:hover .review-pattern-visual i:nth-child(3) span,
#s-landing .pa-approved-landing .pa-anim .finding-card.touchlife .review-pattern-visual i:nth-child(3) span{animation-duration:2.8s;animation-delay:-.7s}
@keyframes pa-buzz{
  0%{transform:translate(0,0)}8%{transform:translate(5px,-9px)}16%{transform:translate(-9px,-3px)}
  24%{transform:translate(1px,-13px)}33%{transform:translate(-13px,-6px)}41%{transform:translate(8px,2px)}
  52%{transform:translate(3px,-11px)}60%{transform:translate(-6px,-1px)}68%{transform:translate(7px,-7px)}
  76%{transform:translate(-2px,3px)}84%{transform:translate(4px,-3px)}92%,100%{transform:translate(0,0)}}

/* -------- 6 · beach reality: the day-trippers arrive on its turn; on hover
             the sun glides to high noon, holds, and sets when you leave;
             the crowd bobs beneath it -------------------------------------- */
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i{
  animation:pa-arrive .55s cubic-bezier(.16,1,.3,1) backwards;transform-origin:bottom}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(3){animation-delay:.07s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(4){animation-delay:.14s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(5){animation-delay:.21s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(6){animation-delay:.28s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(7){animation-delay:.35s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(8){animation-delay:.42s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(9){animation-delay:.49s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(10){animation-delay:.56s}
#s-landing .pa-approved-landing .pa-anim .finding-card.play:not(.done) .beach-crowds-visual i:nth-child(11){animation-delay:.63s}
@keyframes pa-arrive{from{transform:scaleY(.14)}to{transform:scaleY(1)}}
#s-landing .pa-approved-landing .pa-anim .finding-card.done:hover .beach-crowds-visual i,
#s-landing .pa-approved-landing .pa-anim .finding-card.done.touchlife .beach-crowds-visual i{
  animation:pa-bob 1.5s ease-in-out infinite}
#s-landing .pa-approved-landing .pa-anim .finding-card.done:hover .beach-crowds-visual i:nth-child(2n),
#s-landing .pa-approved-landing .pa-anim .finding-card.done.touchlife .beach-crowds-visual i:nth-child(2n){animation-delay:-.25s}
#s-landing .pa-approved-landing .pa-anim .finding-card.done:hover .beach-crowds-visual i:nth-child(3n),
#s-landing .pa-approved-landing .pa-anim .finding-card.done.touchlife .beach-crowds-visual i:nth-child(3n){animation-delay:-.5s}
#s-landing .pa-approved-landing .pa-anim .finding-card.done:hover .beach-crowds-visual i:nth-child(4n),
#s-landing .pa-approved-landing .pa-anim .finding-card.done.touchlife .beach-crowds-visual i:nth-child(4n){animation-delay:-.75s}
#s-landing .pa-approved-landing .pa-anim .finding-card.done:hover .beach-crowds-visual i:nth-child(5n),
#s-landing .pa-approved-landing .pa-anim .finding-card.done.touchlife .beach-crowds-visual i:nth-child(5n){animation-delay:-1s}
@keyframes pa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
/* one continuous glide to noon (deceleration lives in the waypoint spacing,
   linear clock -- no per-segment easing pulse), a true rest, then a smoothly
   accelerating set when the pointer leaves */
#s-landing .pa-approved-landing .pa-anim .sun.sun-in{animation:pa-sunrise 2s linear forwards}
@keyframes pa-sunrise{
  0%{transform:translate(-160px,44px);opacity:0}
  10%{transform:translate(-132px,30px);opacity:1}
  25%{transform:translate(-96px,16px);opacity:1}
  40%{transform:translate(-64px,7px);opacity:1}
  55%{transform:translate(-38px,2.5px);opacity:1}
  70%{transform:translate(-19px,.6px);opacity:1}
  85%{transform:translate(-6px,.1px);opacity:1}
  100%{transform:translate(0,0);opacity:1}}
#s-landing .pa-approved-landing .pa-anim .sun.sun-out{animation:pa-sunset 1.2s linear forwards}
@keyframes pa-sunset{
  0%{transform:translate(0,0);opacity:1}
  20%{transform:translate(7px,.1px);opacity:1}
  40%{transform:translate(24px,1px);opacity:1}
  60%{transform:translate(56px,5.4px);opacity:1}
  78%{transform:translate(96px,16px);opacity:1}
  90%{transform:translate(126px,27px);opacity:1}
  100%{transform:translate(160px,44px);opacity:0}}

/* -------- gates -------- */
/* the landing's pause-motion control freezes these alongside the hero films */
#s-landing .pa-approved-landing .pa-anim.pa-cards-paused .finding-card *,
#s-landing .pa-approved-landing .pa-anim.pa-cards-paused .finding-card *::after{animation-play-state:paused!important}
/* reduced motion: never armed by the script, and belt-and-braces here */
@media (prefers-reduced-motion:reduce){
  #s-landing .pa-approved-landing .finding-card *,
  #s-landing .pa-approved-landing .finding-card *::before,
  #s-landing .pa-approved-landing .finding-card *::after{animation:none!important}
  #s-landing .pa-approved-landing .pa-anim .closure-visual i.is-closed{transform:none}
  #s-landing .pa-approved-landing .pa-anim .no-beach-visual .nox{stroke-dashoffset:0}
}

/* ============================================================
   v18 -- THE STORY SECTIONS PERFORM (v17 retimed and re-propped).
   Chapter 00 for the origin story: folio, drop cap, and the review
   that vanished -- assembled, stamped REMOVED, mourned by three
   ghost outlines. How It Works as three ticket stubs: priorities
   fill in the factor colours, the finalists get CROSSED OFF a list
   until the winner turns gold, and the verdict is sealed with the
   mark. Copy untouched. The script arms `.paw-armed` (pre-states)
   and adds `.play` per section on first scroll-in; without either
   -- no JS, reduced motion -- every element rests in its FINISHED
   state. v17's pacing read as a blink-and-rush: everything here
   runs ~40% slower, and the armed pre-states exist because a
   visible element must never blink out to start its own entrance.
   ============================================================ */

/* ---- Chapter 00 folio (the kicker keeps its .origin-story>p identity) ---- */
#s-landing .pa-approved-landing .pa-folio{display:flex;align-items:center;gap:14px}
#s-landing .pa-approved-landing .pa-folio .fno{font:italic 400 16px/1 Instrument Serif,Georgia,serif;
  color:var(--gold);letter-spacing:.04em;text-transform:none}
#s-landing .pa-approved-landing .pa-folio .frule{flex:1;height:1px;display:block;
  background:linear-gradient(90deg,#d9b86780,#d9b86700);transform-origin:left}
#s-landing .pa-approved-landing .why-setup .pa-dcap{float:left;
  font:400 54px/.78 Instrument Serif,Georgia,serif;color:var(--gold);padding:7px 9px 0 0}

/* ---- the review that vanished ---- */
#s-landing .pa-approved-landing .pa-review{position:relative;margin:6px 0 0;padding:15px 17px 16px;
  border:1px solid #a1c2d63d;border-radius:10px;background:linear-gradient(145deg,#13283bf0,#081523fa);
  max-width:430px}
#s-landing .pa-approved-landing .pa-review .rhead{display:flex;align-items:center;gap:10px}
#s-landing .pa-approved-landing .pa-review .rstars{color:#5c7186;font-size:13px;letter-spacing:.18em}
#s-landing .pa-approved-landing .pa-review .rstars b{color:var(--gold);font-weight:400}
#s-landing .pa-approved-landing .pa-review .rname{color:#dee4e7d1;font-size:12px;font-weight:600}
#s-landing .pa-approved-landing .pa-review .rline{display:block;height:5px;border-radius:4px;margin-top:9px;
  background:linear-gradient(#84a2bcb8,#84a2bcb8) left/100% 100% no-repeat}
#s-landing .pa-approved-landing .pa-review .rphotos{display:flex;gap:6px;margin-top:11px}
#s-landing .pa-approved-landing .pa-review .rphotos i{width:34px;height:26px;border-radius:4px;background:#7b99b56b;display:block}
#s-landing .pa-approved-landing .pa-review .pa-stamp{position:absolute;right:11px;top:9px;color:#c96f4e;
  border:2px solid #c96f4e;border-radius:4px;padding:3px 9px 2px;font:780 13px/1 Manrope Variable,Inter,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;transform:rotate(-7deg);box-shadow:inset 0 0 0 1px #c96f4e2b}
/* dead = filter + rotate only, so entry (opacity/translate) never fights it */
#s-landing .pa-approved-landing .pa-review.dead{filter:brightness(.62) saturate(.5);rotate:-1.2deg}

/* v22: the three ghost review outlines that used to sit under the deletion
   line are gone. They were a second drawing of the object already on screen,
   and a reader met them as one more thing to interpret between the deletion
   and the question. The one card carries the whole beat now: it is written,
   it is stamped REMOVED, it dies, and the line beneath it says so. */

/* ---- the font pass: the argument's sharpest line speaks in the serif ---- */
#s-landing .pa-approved-landing .why-copy .why-pull{
  font-family:Instrument Serif,Iowan Old Style,Georgia,serif;font-weight:400;
  letter-spacing:-.005em;line-height:1.22}

/* ---- desktop: the new props take their own rows in the editorial grid ---- */
@media (width>1023px){
  /* One scene: the paragraph, the card that completes it, and the line that
     says what happened to the card, all on the same left edge one under the
     other. The card used to sit at col 2 with the deletion line at col 4 and a
     second ghost graphic between them, so the eye crossed the page twice
     inside a single beat. */
  #s-landing .pa-approved-landing .pa-review{grid-column:7/span 6;grid-row:1;align-self:start;margin-top:0}
  #s-landing .pa-approved-landing .why-beats .why-deletion{grid-column:7/span 6;grid-row:2}
  #s-landing .pa-approved-landing .why-beats .why-question{grid-column:2/span 10;grid-row:3}
}
@media (width<=760px){
  #s-landing .pa-approved-landing .pa-review{margin-top:10px}
}

/* ---- armed pre-states: once the script is live, everything that will
   enter starts hidden, so nothing visible ever blinks out to begin its own
   entrance. Wrapped in no-preference so a reduced-motion visitor can never
   be left with hidden content even if arming raced their setting. ---- */
@media (prefers-reduced-motion:no-preference){
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .pa-folio .frule,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-setup,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .pa-review,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-deletion strong,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-deletion span,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-question,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-commission,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-pull,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-average,
#s-landing .pa-approved-landing .why-section.paw-armed:not(.play) .why-finale,
#s-landing .pa-approved-landing .how-section.paw-armed:not(.play) .steps li{opacity:0}
}

/* ---- WHY choreography: assemble -> STAMP -> the question -> the argument.
   A reading pace: the reader should finish each beat as the next arrives. -- */
/* v23: SLOWER, at Chris's read. The beats were paced to arrive as the reader
   finished the one before; measured against actually reading the paragraphs
   they were landing early, so every entrance is longer and every delay is
   later. The shape is unchanged, it is the same film at about two thirds
   speed. */
#s-landing .pa-approved-landing .why-section.play .pa-folio .frule{
  animation:paw-rule 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes paw-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#s-landing .pa-approved-landing .why-section.play .why-setup{
  animation:paw-rise 1.2s .3s cubic-bezier(.16,1,.3,1) both}
@keyframes paw-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#s-landing .pa-approved-landing .why-section.play .pa-review.dead{
  animation:paw-cardrise 1.1s 1.3s cubic-bezier(.16,1,.3,1) both,paw-die .7s 3.25s ease-out both}
@keyframes paw-cardrise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes paw-die{from{filter:none;rotate:0deg;translate:0 0}
  to{filter:brightness(.62) saturate(.5);rotate:-1.2deg;translate:0 4px}}
#s-landing .pa-approved-landing .why-section.play .pa-review .rline{
  animation:paw-ink .75s cubic-bezier(.16,1,.3,1) both}
#s-landing .pa-approved-landing .why-section.play .pa-review .rline:nth-of-type(1){animation-delay:1.65s}
#s-landing .pa-approved-landing .why-section.play .pa-review .rline:nth-of-type(2){animation-delay:1.88s}
#s-landing .pa-approved-landing .why-section.play .pa-review .rline:nth-of-type(3){animation-delay:2.11s}
#s-landing .pa-approved-landing .why-section.play .pa-review .rline:nth-of-type(4){animation-delay:2.34s}
@keyframes paw-ink{from{background-size:0% 100%}to{background-size:100% 100%}}
#s-landing .pa-approved-landing .why-section.play .pa-review .rphotos i{animation:paw-rise .5s both}
#s-landing .pa-approved-landing .why-section.play .pa-review .rphotos i:nth-child(1){animation-delay:2.46s}
#s-landing .pa-approved-landing .why-section.play .pa-review .rphotos i:nth-child(2){animation-delay:2.61s}
#s-landing .pa-approved-landing .why-section.play .pa-review .rphotos i:nth-child(3){animation-delay:2.76s}
#s-landing .pa-approved-landing .why-section.play .pa-review .pa-stamp{
  animation:paw-slam .4s 3.05s cubic-bezier(.3,1.2,.5,1) both}
@keyframes paw-slam{from{opacity:0;transform:rotate(-7deg) scale(1.9)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
/* v25: the card writes and dies about a third quicker, at Chris's read. Every
   interval BETWEEN the reading beats below is untouched, because those were
   paced against how fast somebody actually reads and that has not changed.
   Only the graphic got shorter, so the whole tail slides up by the 1.55s the
   card gave back rather than leaving a hole after the deletion. */
#s-landing .pa-approved-landing .why-section.play .why-deletion strong{animation:paw-rise 1.05s 3.5s cubic-bezier(.16,1,.3,1) both}
#s-landing .pa-approved-landing .why-section.play .why-deletion span{animation:paw-rise .95s 3.95s ease both}
/* the question waits half a second longer than the beat before it: it is the
   hinge between what happened to us and what happens to everyone, and it now
   has the page's whole width to arrive into */
#s-landing .pa-approved-landing .why-section.play .why-question{animation:paw-rise 1.3s 5.2s cubic-bezier(.16,1,.3,1) both}
#s-landing .pa-approved-landing .why-section.play .why-commission{animation:paw-rise 1.05s 6.6s ease both}
#s-landing .pa-approved-landing .why-section.play .why-pull{animation:paw-rise 1.2s 7.05s cubic-bezier(.16,1,.3,1) both}
#s-landing .pa-approved-landing .why-section.play .why-average{animation:paw-rise 1.2s 7.55s ease both}
#s-landing .pa-approved-landing .why-section.play .why-finale{animation:paw-rise 1.35s 9.45s cubic-bezier(.16,1,.3,1) both}

/* ---- HOW: three tickets, one journey ---- */
#s-landing .pa-approved-landing .steps li{grid-template-columns:112px minmax(0,1fr);gap:24px;
  min-height:0;padding:19px 0;align-items:center}
#s-landing .pa-approved-landing .pa-stub{position:relative;width:112px;height:86px;
  border:1px solid #d9b867a6;border-radius:8px;padding:10px 10px 10px 18px;
  background:linear-gradient(160deg,#16293c,#0b1a29);
  display:flex;flex-direction:column;justify-content:space-between}
#s-landing .pa-approved-landing .pa-stub::before{content:"";position:absolute;top:6px;bottom:6px;left:7px;
  width:1px;background:repeating-linear-gradient(#d9b86773 0 3px,#0000 3px 8px)}
#s-landing .pa-approved-landing .pa-stub .sno{font:italic 400 15px/1 Instrument Serif,Georgia,serif;
  color:#dcc17b;letter-spacing:.05em}
/* Nº 01: the priorities fill, each in its own factor colour */
#s-landing .pa-approved-landing .pa-stub .ticks{display:flex;flex-direction:column;gap:4px}
#s-landing .pa-approved-landing .pa-stub .ticks i{height:5px;border-radius:4px;display:block;
  background:linear-gradient(var(--tc),var(--tc)) left/100% 100% no-repeat #23384c}
#s-landing .pa-approved-landing .pa-stub .ticks i:nth-child(1){--tc:#7BA7D6;width:78%}
#s-landing .pa-approved-landing .pa-stub .ticks i:nth-child(2){--tc:#CE9260;width:52%}
#s-landing .pa-approved-landing .pa-stub .ticks i:nth-child(3){--tc:#BCA2D8;width:88%}
#s-landing .pa-approved-landing .pa-stub .ticks i:nth-child(4){--tc:#74C4C9;width:64%}
/* Nº 02: THE MAGNIFIER SWEEP -- six finalists sit like pins on a board; a
   gold magnifying glass glides across all of them and leaves the verdicts in
   its wake: two coral crosses, one gold ring. The static end state is the
   marked board. */
#s-landing .pa-approved-landing .pa-stub .sweep{position:relative;height:44px;display:block}
#s-landing .pa-approved-landing .pa-stub .sweep .cand{position:absolute;width:8px;height:8px;
  border-radius:50%;background:#7899BC;display:block}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.c1{left:4px;top:5px}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.c2{left:34px;top:2px}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.c3{left:64px;top:6px}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.c4{left:9px;top:27px}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.c5{left:38px;top:29px}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.c6{left:67px;top:26px}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.no{background:#54677b}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.no::after{content:"\2715";position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);color:#c96f4e;
  font:780 10px/1 Manrope Variable,Inter,sans-serif}
#s-landing .pa-approved-landing .pa-stub .sweep .cand.yes{
  background:linear-gradient(135deg,#e4cd8d,#b89143);
  box-shadow:0 0 0 2px #0b1a29,0 0 0 3.2px #d9b867b3}
#s-landing .pa-approved-landing .pa-stub .sweep .glass{position:absolute;width:19px;height:19px;
  border:2px solid #d9b867;border-radius:50%;left:0;top:0;opacity:0;background:#9cc7e00f;display:block}
#s-landing .pa-approved-landing .pa-stub .sweep .glass::after{content:"";position:absolute;
  width:8px;height:2px;background:#d9b867;bottom:-3.5px;right:-5px;transform:rotate(45deg);border-radius:2px}
/* Nº 03: the verdict is sealed with the mark itself */
#s-landing .pa-approved-landing .pa-sealbox{position:relative;display:flex;align-items:center;
  justify-content:center;height:46px}
#s-landing .pa-approved-landing .pa-sealbox img{width:24px;height:auto;filter:drop-shadow(0 6px 10px #00000057)}
#s-landing .pa-approved-landing .pa-sealbox .pressring{position:absolute;width:42px;height:42px;
  border:1.5px solid #d9b867b3;border-radius:50%;display:block}
#s-landing .pa-approved-landing .pa-scopy p{margin-top:8px}
@media (width<=760px){
  #s-landing .pa-approved-landing .pa-stub{margin:0 0 14px}
}

/* ---- HOW choreography: one stub finishes its story before the next ---- */
#s-landing .pa-approved-landing .how-section.play .steps li{
  animation:paw-stubin .7s cubic-bezier(.16,1,.3,1) both}
#s-landing .pa-approved-landing .how-section.play .steps li:nth-child(2){animation-delay:1.4s}
#s-landing .pa-approved-landing .how-section.play .steps li:nth-child(3){animation-delay:3.4s}
@keyframes paw-stubin{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
#s-landing .pa-approved-landing .how-section.play .ticks i{animation:paw-ink .8s both}
#s-landing .pa-approved-landing .how-section.play .ticks i:nth-child(1){animation-delay:.65s}
#s-landing .pa-approved-landing .how-section.play .ticks i:nth-child(2){animation-delay:.85s}
#s-landing .pa-approved-landing .how-section.play .ticks i:nth-child(3){animation-delay:1.05s}
#s-landing .pa-approved-landing .how-section.play .ticks i:nth-child(4){animation-delay:1.25s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand{animation:paw-candin .4s both}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.c1{animation-delay:1.75s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.c2{animation-delay:1.8s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.c3{animation-delay:1.85s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.c4{animation-delay:1.9s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.c5{animation-delay:1.95s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.c6{animation-delay:2s}
@keyframes paw-candin{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
#s-landing .pa-approved-landing .how-section.play .sweep .glass{
  animation:paw-glide 2.2s cubic-bezier(.45,.05,.55,.95) 1.95s both}
@keyframes paw-glide{
  0%{opacity:0;transform:translate(-4px,1px)}
  8%{opacity:1}
  30%{transform:translate(31px,-2px)}
  50%{transform:translate(60px,2px)}
  64%{transform:translate(62px,24px)}
  82%{transform:translate(34px,26px)}
  95%{opacity:1}
  100%{opacity:0;transform:translate(2px,24px)}}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.no::after{
  animation:paw-markx .3s cubic-bezier(.3,1.2,.5,1) both}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.no.c2::after{animation-delay:2.75s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.no.c6::after{animation-delay:3.5s}
@keyframes paw-markx{from{opacity:0;transform:translate(-50%,-50%) scale(1.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.no{animation:paw-candin .4s both,paw-dimc .3s ease both}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.no.c2{animation-delay:1.8s,2.75s}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.no.c6{animation-delay:2s,3.5s}
@keyframes paw-dimc{from{background:#7899BC}to{background:#54677b}}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.yes{animation:paw-candin .4s both,paw-goldc .45s ease both}
#s-landing .pa-approved-landing .how-section.play .sweep .cand.yes.c5{animation-delay:1.95s,3.9s}
@keyframes paw-goldc{
  from{background:#7899BC;box-shadow:0 0 0 2px #0b1a2900,0 0 0 3.2px #d9b86700}
  to{background:linear-gradient(135deg,#e4cd8d,#b89143);box-shadow:0 0 0 2px #0b1a29,0 0 0 3.2px #d9b867b3}}
#s-landing .pa-approved-landing .how-section.play .pa-sealbox img{animation:paw-markin .5s 4.1s ease both}
@keyframes paw-markin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
#s-landing .pa-approved-landing .how-section.play .pa-sealbox .pressring{
  animation:paw-press .55s 4.45s cubic-bezier(.34,1.3,.4,1) both}
@keyframes paw-press{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:scale(1)}}

/* ---- gates ---- */
#s-landing .pa-approved-landing .why-section.pa-cards-paused *,
#s-landing .pa-approved-landing .why-section.pa-cards-paused *::before,
#s-landing .pa-approved-landing .why-section.pa-cards-paused *::after,
#s-landing .pa-approved-landing .how-section.pa-cards-paused *,
#s-landing .pa-approved-landing .how-section.pa-cards-paused *::before,
#s-landing .pa-approved-landing .how-section.pa-cards-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  #s-landing .pa-approved-landing .why-section *,
  #s-landing .pa-approved-landing .why-section *::before,
  #s-landing .pa-approved-landing .why-section *::after,
  #s-landing .pa-approved-landing .how-section *,
  #s-landing .pa-approved-landing .how-section *::before,
  #s-landing .pa-approved-landing .how-section *::after{animation:none!important}
}

/* ---- the Plot Score anatomy: paper strips + narrated beats (FAQ answer 1) ---- */
#s-landing .pa-approved-landing .score-demo{display:flex;gap:clamp(18px,3vw,30px);align-items:center;margin:10px 0 22px}
#s-landing .pa-approved-landing .score-anatomy{flex:1;min-width:0}
#s-landing .pa-approved-landing .score-sumline{color:#8fa3bb;letter-spacing:1.6px;text-transform:uppercase;font-size:10.5px;font-weight:800;display:block;margin-bottom:10px}
#s-landing .pa-approved-landing .score-paper{position:relative;height:50px;margin-right:6px}
#s-landing .pa-approved-landing .sps{position:absolute;top:5px;height:40px;left:calc(var(--x)*1%);width:calc(var(--c)*1% + 8px);
  cursor:pointer;transform:rotate(var(--r));transform-origin:20% 80%;transition:left .55s cubic-bezier(.22,.61,.36,1),width .55s cubic-bezier(.22,.61,.36,1)}
#s-landing .pa-approved-landing .sps>b{position:absolute;inset:0;display:block;background:
  repeating-linear-gradient(105deg,#ffffff0d 0 2px,#0000 2px 5px),
  linear-gradient(178deg,color-mix(in srgb,var(--fc) 88%,#F4EDDD),color-mix(in srgb,var(--fc) 78%,#20303F) 90%);
  clip-path:polygon(0 3%,97% 0,100% 22%,98% 47%,100% 74%,97.4% 100%,1% 98%,0 60%);
  /* v23: A DRAWN EDGE, not a glow. v22 tried to separate the colors with a
     brighter rim and a soft groove, and at a glance the blues and the purples
     still ran together -- a blur is not a line. The strips are clipped to torn
     paper, so a CSS border cannot follow them; four hard, zero-blur drop-shadows
     in the page's own navy do, and they read as a 1px cut between one color and
     the next (the strips overlap right over left, so the upper strip's outline
     falls exactly on the seam). The light rim stays, one notch up, to hold the
     outer edge against the background. */
  filter:drop-shadow(1px 0 0 #071120) drop-shadow(-1px 0 0 #071120)
    drop-shadow(0 1px 0 #071120) drop-shadow(0 -1px 0 #071120)
    drop-shadow(0 0 .9px rgba(244,237,221,.85)) drop-shadow(0 5px 7px rgba(2,6,16,.6));
  transition:translate .25s cubic-bezier(.34,1.4,.4,1),filter .25s,opacity .35s}
#s-landing .pa-approved-landing .sps.lift>b,#s-landing .pa-approved-landing .score-paper:not(.focus) .sps:hover>b{translate:0 -5px;
  filter:drop-shadow(1px 0 0 #071120) drop-shadow(-1px 0 0 #071120)
    drop-shadow(0 1px 0 #071120) drop-shadow(0 -1px 0 #071120)
    drop-shadow(0 0 .9px rgba(244,237,221,.95)) drop-shadow(0 11px 14px rgba(2,6,16,.85))}
#s-landing .pa-approved-landing .sps.armed{opacity:0;transform:rotate(var(--r)) translateY(-15px)}
#s-landing .pa-approved-landing .sps.laid{opacity:1;transform:rotate(var(--r)) translateY(0);
  transition:opacity .18s ease,transform .5s cubic-bezier(.28,1.35,.4,1),left .55s cubic-bezier(.22,.61,.36,1),width .55s cubic-bezier(.22,.61,.36,1)}
#s-landing .pa-approved-landing .score-paper.focus .sps:not(.hot)>b{opacity:.34;
  filter:saturate(.45) drop-shadow(1px 0 0 #071120) drop-shadow(-1px 0 0 #071120)
    drop-shadow(0 0 .9px rgba(244,237,221,.5))}
#s-landing .pa-approved-landing .score-paper.focus .sps.hot>b{translate:0 -5px;
  filter:drop-shadow(1px 0 0 #071120) drop-shadow(-1px 0 0 #071120)
    drop-shadow(0 1px 0 #071120) drop-shadow(0 -1px 0 #071120)
    drop-shadow(0 0 .9px rgba(244,237,221,.95)) drop-shadow(0 11px 14px rgba(2,6,16,.85))}
#s-landing .pa-approved-landing .score-beat{color:#c8d0da;font-size:13.5px;font-weight:700;line-height:1.5;min-height:4em;max-width:56ch;margin:8px 0 0;transition:opacity .3s}
#s-landing .pa-approved-landing .score-beat.swap{opacity:0}
#s-landing .pa-approved-landing .score-beat b{color:#ede7dc}
#s-landing .pa-approved-landing .score-beat em{font-style:normal;color:#dbc084;font-weight:800;font-variant-numeric:tabular-nums}
#s-landing .pa-approved-landing .score-dots{display:flex;gap:6px;margin-top:8px}
#s-landing .pa-approved-landing .score-dots i{width:6px;height:6px;border-radius:99px;background:#7899bc40;transition:background .3s}
#s-landing .pa-approved-landing .score-dots i.on{background:#dbc084}
@media(max-width:560px){#s-landing .pa-approved-landing .score-demo{flex-direction:column;align-items:stretch}
#s-landing .pa-approved-landing .plot-score-ring{margin:0 auto}}
@media(prefers-reduced-motion:reduce){#s-landing .pa-approved-landing .sps,#s-landing .pa-approved-landing .sps>b,#s-landing .pa-approved-landing .score-beat{transition:none}}


/* ---- one leaf per flick going down, and out in one going back up.
   The snap exists so a hard flick cannot skip the story. Coming back up there
   is no story left to skip: the reader has read it and wants out, and being
   stopped at every leaf on the way is the same fault in reverse. So the stops
   only apply while the reader is going forward. ---- */
html.pa-book-snap{scroll-snap-type:y proximity}
html.pa-book-snap.pa-book-up{scroll-snap-type:none}
#s-landing .pa-approved-landing .bk-snap{
  position:absolute;left:0;width:1px;height:1px;pointer-events:none;
  scroll-snap-align:start;scroll-snap-stop:always;
}
@media (prefers-reduced-motion:reduce){
  html.pa-book-snap{scroll-snap-type:none}
}