/* /glow-system below-the-fold styles. Loaded async via slot (preload as=style swap). Above-fold/critical CSS stays inline in glow-system.astro. ZERO visual change vs the inlined original. */ /* Problem */ .problem{background:var(--cream)} .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,68px); align-items:center} .problem img{border-radius:var(--radius); box-shadow:var(--shadow)} .problem h2{font-size:clamp(1.9rem,4.4vw,2.8rem); margin-bottom:18px} .pain{list-style:none; margin-top:26px; display:grid; gap:14px} .pain li{display:flex; gap:13px; align-items:flex-start; font-size:1.02rem; color:var(--ink-2)} .pain li i{font-style:normal; color:var(--rose); font-weight:900; font-size:1.1rem; line-height:1.5} /* Shift band */ .shift{background:linear-gradient(135deg,var(--rose),var(--rose-deep)); color:#fff; text-align:center} .shift h2{color:#fff; font-size:clamp(1.9rem,4.6vw,3rem); max-width:18ch; margin:0 auto} .shift h2 em{color:#ffe0ee} .shift p{color:rgba(255,255,255,.92); max-width:46ch; margin:20px auto 0; font-size:1.12rem} /* Products */ .products{background:var(--cream-2)} .prod>div{min-width:0} .prod{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,70px); align-items:center; margin-bottom:clamp(56px,8vw,104px)} .prod:last-child{margin-bottom:0} .prod.flip .prod-media{order:2} .prod-tag{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:900; color:var(--rose); margin-bottom:12px} .prod h3{font-size:clamp(1.5rem,3.4vw,2.15rem); margin-bottom:14px} .checks{list-style:none; margin-top:20px; display:grid; gap:11px} .checks li{display:flex; gap:12px; align-items:flex-start; font-weight:600; color:var(--ink-2); font-size:1rem} .checks li i{font-style:normal; color:#fff; background:var(--rose); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; flex:none; margin-top:3px} .prod-media{display:flex; justify-content:center; align-items:flex-start; gap:18px; position:relative} /* width shrinks on narrow desktops so the two tilted phones + rotation bleed never clip the viewport (fixed 230px overflowed ~861-1150px) */ /* full-bleed screen: 3px hairline frame (keeps the phone silhouette against the light page) instead of an 8px bezel */ .phone{position:relative; width:clamp(168px,19vw,230px); max-width:46vw; border-radius:34px; padding:3px; background:linear-gradient(155deg,#6a545e,#43343b); box-shadow:var(--shadow); flex:none} .phone img{display:block; border-radius:31px; width:100%; aspect-ratio:9/19; object-fit:cover; object-position:top center} .phone.tilt{transform:rotate(-4deg)} .phone.tilt2{transform:rotate(4deg); margin-top:34px} .ebook-shot{width:300px; max-width:70vw; border-radius:8px; box-shadow:0 30px 60px -20px rgba(120,40,70,.45), 0 4px 0 #e7d3da; transform:perspective(1200px) rotateY(-14deg)} /* Transformation */ .transform{background:var(--cream-2)} .ba{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px} .ba-card{border-radius:var(--radius); overflow:hidden; position:relative; box-shadow:var(--shadow-sm)} .ba-card img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5} .ba-card .tag{position:absolute; left:16px; top:16px; background:rgba(44,32,36,.78); color:#fff; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:900; padding:7px 14px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)} .ba-card.after .tag{background:var(--rose)} .ba-card .cap{position:absolute; left:0; right:0; bottom:0; padding:24px 18px 18px; color:#fff; font-family:var(--serif); font-size:1.15rem; background:linear-gradient(transparent,rgba(30,20,24,.82))} /* Honesty */ .honesty{background:var(--ink); color:#f3e9ee} .honesty h2{color:#fff; font-size:clamp(1.9rem,4.4vw,2.7rem)} .honesty .lead{color:rgba(243,233,238,.8)} .believe{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:42px auto} .believe div{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-sm); padding:28px 22px; text-align:center; display:flex; flex-direction:column; justify-content:center} .believe i{font-style:normal; font-size:1.5rem; display:block; margin-bottom:10px} .believe b{font-family:var(--serif); font-size:1.15rem; color:#fff; display:block; margin-bottom:6px; font-weight:600} .believe p{font-size:.94rem; color:rgba(243,233,238,.72)} .dont{display:flex; flex-wrap:wrap; gap:12px 22px; justify-content:center; margin-top:8px} .dont span{font-size:.92rem; font-weight:700; color:var(--rose-soft)} .dont span i{font-style:normal; color:#e88; margin-right:6px} .founder{display:flex; gap:20px; align-items:center; justify-content:center; margin-top:46px; max-width:660px; margin-left:auto; margin-right:auto; text-align:left; background:rgba(255,255,255,.05); border-radius:var(--radius); padding:26px 28px} .founder .av{width:54px; height:54px; border-radius:50%; flex:none; background:var(--rose)} .founder q{font-family:var(--serif); font-style:italic; font-size:1.08rem; color:#fff; display:block} .founder cite{font-style:normal; font-size:.84rem; color:var(--rose-soft); font-weight:700; display:block; margin-top:8px} /* Compare */ .compare{background:var(--cream-2)} .vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:940px; margin:48px auto 0; position:relative; align-items:stretch} .vs-card{background:#fff; border-radius:var(--radius); padding:32px 30px; box-shadow:var(--shadow-sm); border:1px solid var(--line)} .vs-card.glow{box-shadow:var(--shadow); border:1px solid var(--rose-soft); position:relative; overflow:hidden} .vs-card.glow::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--rose-soft),var(--rose),var(--rose-deep))} .vs-head{font-family:var(--serif); font-size:1.45rem; color:var(--ink); margin-bottom:3px} .vs-sub{font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; font-weight:900; color:var(--grey-2); margin-bottom:22px} .vs-card.glow .vs-sub{color:var(--rose)} .vs-list{list-style:none; display:grid; gap:14px} .vs-list li{display:flex; gap:12px; align-items:flex-start; font-size:.98rem; line-height:1.45} .vs-list li i{flex:none; font-style:normal; margin-top:1px} .gpt .vs-list li{color:var(--grey)} .gpt .vs-list li i{color:var(--grey-2); font-weight:800; width:20px; text-align:center} .glow .vs-list li{color:var(--ink-2); font-weight:600} .glow .vs-list li i{color:#fff; background:var(--rose); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.66rem} .vs-chip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; background:var(--ink); color:#fff; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:.85rem; box-shadow:0 8px 20px -6px rgba(0,0,0,.4); border:3px solid var(--cream-2)} .compare-close{text-align:center; max-width:660px; margin:38px auto 0; font-family:var(--serif); font-size:clamp(1.15rem,2.7vw,1.55rem); color:var(--ink); line-height:1.35} .compare-close b{color:var(--rose-deep)} /* Offer */ .offer{background:var(--cream)} .offer-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); max-width:620px; margin:46px auto 0; padding:clamp(28px,4vw,46px); position:relative; overflow:hidden} .offer-card::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--rose-soft),var(--rose),var(--rose-deep))} .stack{list-style:none; display:grid; gap:2px} .stack li{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 4px; border-bottom:1px solid var(--line); font-weight:600; color:var(--ink-2)} .stack li .v{font-weight:700; color:var(--grey); white-space:nowrap} .stack li small{display:block; font-weight:400; color:var(--grey-2); font-size:.85rem} .stack .total{border-bottom:none; padding-top:18px; font-weight:900; color:var(--ink); font-size:1.05rem} .stack .total s{color:var(--grey-2); font-weight:700} .price-final{text-align:center; margin:24px 0 6px} .price-final .big{font-family:var(--serif); font-size:clamp(3rem,9vw,4.4rem); color:var(--ink); line-height:1} .price-final .cur{font-size:.5em; vertical-align:top; color:var(--rose-deep)} .price-final .sub{font-size:.9rem; color:var(--grey-2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:12px} .offer-card .cta{width:100%; justify-content:center; margin-top:18px} /* Guarantee */ .guarantee{background:var(--cream-2)} .guar-card{display:flex; gap:26px; align-items:center; max-width:760px; margin:0 auto; background:#fff; border:2px dashed var(--rose-soft); border-radius:var(--radius); padding:34px} .seal{width:106px; height:106px; flex:none; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle,#fff,var(--tint)); border:3px solid var(--rose); color:var(--rose-deep)} .seal b{font-family:var(--serif); font-weight:700; font-size:2rem; line-height:1; display:block} .seal span{font-family:var(--sans); font-weight:800; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.25; margin-top:3px} .guar-card h3{font-size:1.4rem; margin-bottom:6px} /* FAQ — native details */ .faq{background:var(--cream)} .faq-list{max-width:760px; margin:44px auto 0; display:grid; gap:14px} .q{background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); overflow:hidden} .q summary{list-style:none; cursor:pointer; padding:22px 24px; font-family:var(--serif); font-size:1.12rem; color:var(--ink); font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background .2s ease} .q summary::-webkit-details-marker{display:none} @media(hover:hover){ .q summary:hover{background:var(--cream-2)} } .q .chev{flex:none; color:var(--rose); transition:transform .2s ease-out; font-size:1.4rem; line-height:1} .q[open] .chev{transform:rotate(45deg)} .q .a p{padding:0 24px 22px; color:var(--grey); font-size:.98rem; max-width:64ch} /* Final */ .final{background:radial-gradient(120% 100% at 50% 0%,var(--tint),var(--cream)); text-align:center} .final h2{font-size:clamp(2rem,5vw,3.2rem); max-width:16ch; margin:0 auto 14px} .final .recap{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:24px 0 30px} .final .recap span{font-weight:700; color:var(--ink-2)} .final .recap span i{font-style:normal; color:var(--rose); margin-right:7px} /* Footer */ footer{background:var(--ink); color:rgba(255,255,255,.6); padding:48px 24px 36px; text-align:center} footer .brand{justify-content:center; color:#fff; margin-bottom:14px} footer .tag{font-family:var(--serif); font-style:italic; color:var(--rose-soft); margin-bottom:20px} footer .links{display:flex; flex-wrap:wrap; gap:2px 14px; justify-content:center; font-size:.88rem; margin-bottom:18px} footer .links a{display:inline-block; padding:11px 8px} footer .links a:hover{color:#fff} footer .fine{font-size:.78rem; color:rgba(255,255,255,.4)}