@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} } /* ============================================================================ 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 } #s-landing .pa-approved-landing .why-copy .why-commission{ margin:0 0 12px; color:var(--blue); font-size:clamp(17px,1vw,19px); font-weight:720; line-height:1.45 } #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} #s-landing .pa-approved-landing .why-copy .why-pull{grid-column:1/span 8;grid-row:2;margin: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:12px; font-size:17px } #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:var(--gold);font-size:13px;letter-spacing:.18em} #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 .85s 4.4s 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 1.05s 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.9s} #s-landing .pa-approved-landing .why-section.play .pa-review .rline:nth-of-type(2){animation-delay:2.25s} #s-landing .pa-approved-landing .why-section.play .pa-review .rline:nth-of-type(3){animation-delay:2.6s} #s-landing .pa-approved-landing .why-section.play .pa-review .rline:nth-of-type(4){animation-delay:2.95s} @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 .68s both} #s-landing .pa-approved-landing .why-section.play .pa-review .rphotos i:nth-child(1){animation-delay:3.1s} #s-landing .pa-approved-landing .why-section.play .pa-review .rphotos i:nth-child(2){animation-delay:3.32s} #s-landing .pa-approved-landing .why-section.play .pa-review .rphotos i:nth-child(3){animation-delay:3.54s} #s-landing .pa-approved-landing .why-section.play .pa-review .pa-stamp{ animation:paw-slam .46s 4.15s 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)}} #s-landing .pa-approved-landing .why-section.play .why-deletion strong{animation:paw-rise 1.05s 4.75s cubic-bezier(.16,1,.3,1) both} #s-landing .pa-approved-landing .why-section.play .why-deletion span{animation:paw-rise .95s 5.5s 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 6.75s cubic-bezier(.16,1,.3,1) both} #s-landing .pa-approved-landing .why-section.play .why-commission{animation:paw-rise 1.05s 8.15s ease both} #s-landing .pa-approved-landing .why-section.play .why-pull{animation:paw-rise 1.2s 8.6s cubic-bezier(.16,1,.3,1) both} #s-landing .pa-approved-landing .why-section.play .why-average{animation:paw-rise 1.2s 9.1s ease both} #s-landing .pa-approved-landing .why-section.play .why-finale{animation:paw-rise 1.35s 9.85s 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}}