/* ------------------------------------------------------------------ Angus landing pages. Structure, spacing scale and component shapes ported from the Frank Miller build; palette B, Angus typefaces and Angus writing throughout. Frank's oxblood accent maps to Angus green. Frank's warm cream paper maps to Angus oatmeal. Type roles are kept (a display face for headings, a UI face uppercase and letterspaced for eyebrows, stats and buttons) but the families are Angus's, so the two channels do not read as one template. ------------------------------------------------------------------ */ :root{ /* Elias Yoder's structural system AND his palette, read off the computed styles at eliasyoder.com. paper / paper-warm / ink alternate down the page exactly as his do, and the green accent is now his oxblood. His declared values, for reference when something new needs a colour: paper #F2EBD4 paper-warm #ECE3C2 paper-deep #DCD0AA rule #C4B58A ink #15110B ink-soft #2B241A ink-mid #4A4131 ink-mute #786B53 oxblood #7A1F0E oxblood-dk #5A1308 gold #BA8C3E gold-soft #D4B070 sage #4A5A3D sage-dk #2F3B26 (his footer sits on #0F0C07) */ --paper:#F2EBD4; --paper-warm:#ECE3C2; --paper-deep:#DCD0AA; --tile:#ECE3C2; --ink:#15110B; /* One step below --ink, for the footer and the cards on the dark band. His colophon uses it. */ --ink-deep:#0F0C07; --ink-soft:#2B241A; --ink-mid:#4A4131; --ink-mute:#786B53; --line:#C4B58A; /* Container weight. --line is a separator between rows and stays hairline; --line-strong draws the boxes, which have to read as boxes. */ --line-strong:#786B53; --rule:#C4B58A; --accent:#7A1F0E; --accent-dark:#5A1308; /* His gold-soft. There is no light oxblood in his system, so the lift on dark backgrounds is gold, which is what he does too. */ --accent-lift:#D4B070; --gold:#BA8C3E; /* The buy colour, and also the FREE badge: the owner accepts that the two share it rather than splitting green across two tones. 5.3:1 against the paper, so the button label clears AA. */ --cta:#3A6B3C; --cta-dark:#2C5230; /* Hairline round the before/after photographs. Cool grey on purpose: the warm --line would tint the straw in both frames. */ --heather:#A9A49C; --steel:#786B53; /* Type ported from the Frank Miller build. Token names kept so every existing rule still resolves; only the faces change. The palette above is untouched -- this site keeps its own green. */ --serif:"Lora",Georgia,serif; --mono:"Oswald",Impact,sans-serif; --display:"Oswald",Impact,sans-serif; --ui:"Oswald",sans-serif; --body:"Atkinson Hyperlegible",Verdana,sans-serif; /* Masthead: --olive backs the pattern band before the tile decodes, --cream is the wordmark. */ --olive:#3B4429; --cream:#F2EBDC; /* One inline feTurbulence, used by the page grain. */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --container:1240px; --gutter:32px; } *{box-sizing:border-box} html{font-size:16px;scroll-behavior:smooth} section[id]{scroll-margin-top:1.5rem} #buy,#reviews{scroll-margin-top:1rem} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} body{margin:0;background-color:var(--paper);color:var(--ink-soft);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative} body::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);opacity:.035} h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)} .tag,.btn,.eyebrow,.brand,.stat b{font-family:var(--mono);text-transform:uppercase;font-weight:500} h1{font-size:57.6px;font-weight:600;line-height:1.05;letter-spacing:.02em;margin:0 0 20px} h2{font-size:44px;font-weight:600;line-height:1.04;letter-spacing:-1px;margin:0 0 12px} h3{font-size:30.4px;font-weight:600;line-height:1.04;letter-spacing:-.67px;margin:0 0 8px} h4{font-size:20px;font-weight:600;margin:0} p{margin:0 0 16px;max-width:62ch;color:var(--ink-soft)} a{color:var(--accent);text-underline-offset:.22em;text-decoration-thickness:.09em} a:hover{color:var(--accent-dark)} :focus-visible{outline:4px solid var(--steel);outline-offset:3px} img{max-width:100%;display:block} .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .narrow{width:100%;max-width:760px;margin-inline:auto;padding-inline:var(--gutter)} .skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:1rem} .skip:focus{left:1rem;top:1rem;z-index:99} /* ---------- brand banner: full bleed, solid moss ---------- Was a tiled chicken photograph. The tile cost 129KB on the critical path and the wordmark needed a blurred scrim behind it to stay readable. Solid moss carries the wordmark on its own at 6.96:1, so the scrim and the text shadow both come off with it. Same height as the tiled band. */ /* ---------- masthead ---------- A 8.48:1 strip cut from the 3840x1648 render, centred on the baked wordmark, then scaled to 2240x264. Band height is derived, not picked: 170px is exactly the strip's own height at a 1440px viewport, so at that width `cover` shows the full strip with no crop and the wordmark renders at ~41px. Wider viewports crop top and bottom only, and the wordmark is vertically centred, so it always survives. The mobile height is per-site: below the strip's natural width `cover` crops horizontally instead, so the band has to stay short enough that the wordmark's right edge is still on screen at 360px. That limit differs per render because each wordmark is a different length. Lettering is part of the artwork; the accessible name is the hidden span in the link. No radius, no shadow. */ .masthead{ position:relative; width:100%; height:170px; /* sampled from this strip's own ground, covering any remainder */ background-color:#35341A; background-image:url("images/masthead.jpg"); background-image:image-set(url("images/masthead.webp") type("image/webp"), url("images/masthead.jpg") type("image/jpeg")); background-repeat:no-repeat; background-size:cover; background-position:left center; } .masthead::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.25) 100%); } /* The band itself is the home link. */ .masthead-home{position:absolute;inset:0;z-index:1;display:block} .masthead-home:focus-visible{outline:3px solid #F2EBDC;outline-offset:-6px} .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0; } @media (max-width:767.98px){ .masthead{height:96px} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:74px;padding:1rem 2.2rem;font-size:1.25rem;letter-spacing:.02em;text-align:center;text-decoration:none;border-radius:4px;border:3px solid var(--cta);background:var(--cta);color:#fff;cursor:pointer;transition:background .25s,color .25s,transform .15s,box-shadow .25s} .btn:hover{background:var(--cta-dark);border-color:var(--cta-dark);color:var(--paper);transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(44,82,48,.5)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none} .btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(21,17,11,.45)} .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:2.53px;text-transform:uppercase;color:var(--ink-mute);margin-bottom:22px} .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)} .shot{position:relative;background:var(--paper-warm);overflow:hidden;border-radius:4px} .shot img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- hero ---------- */ .hero{padding:96px 0 80px} .hero-in{display:grid;grid-template-columns:58fr 42fr;grid-template-areas:"text img";column-gap:2.6rem;align-items:start} .hero-text{grid-area:text;display:flex;flex-direction:column;align-items:flex-start} .hero h1{margin-top:0} .hero h1.long{font-size:2.35rem;line-height:1.22;letter-spacing:-.005em} .best{font-family:var(--display);font-size:1.06rem;line-height:1.55;color:var(--ink-soft);max-width:42ch;margin:.8rem 0 1rem} .hero-media{grid-area:img;justify-self:center;width:100%;max-width:31rem} .hero-frame{background:var(--tile);border:1px solid var(--line);border-radius:4px;padding:.8rem} .hero-cover{width:100%;aspect-ratio:4/5} .hero-cover img{object-position:center 18%} .top-cta{margin-top:1rem} /* ---------- review pill, directly under the CTA ---------- Overlapping faces, five stars, one line of proof. The fill is a shade off the paper rather than a bordered box, so it reads as a badge sitting on the page and not as another panel. */ .proofpill{ display:inline-flex;align-items:center;gap:.85rem; background:var(--paper-warm); border-radius:999px; padding:.5rem 1.15rem .5rem .6rem; margin:1rem 0 0; max-width:100%; } .proof-faces{display:flex;flex:none;align-items:center} .proof-faces img{ width:2.45rem;height:2.45rem;border-radius:50%; object-fit:cover;background:var(--paper-deep); border:2px solid var(--paper-warm); margin-right:-.72rem; } .proof-faces img:last-child{margin-right:0} .proof-text{display:flex;flex-direction:column;gap:.1rem;min-width:0} .proof-stars{color:var(--gold);font-size:1.02rem;letter-spacing:.06em;line-height:1} .proof-line{font-family:var(--mono);font-size:11.5px;letter-spacing:1.1px;color:var(--ink-mid);line-height:1.35} .proof-line b{font-weight:500;color:var(--ink)} @media (max-width:820px){ /* the hero centres on a phone, so the pill has to centre with it */ .proofpill{align-self:center} } @media (max-width:400px){ .proofpill{gap:.6rem;padding:.45rem .85rem .45rem .5rem} .proof-faces img{width:2.1rem;height:2.1rem} .proof-line{font-size:10.5px;letter-spacing:.9px} } /* ---------- stats bar, tight under the hero ---------- */ .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%} .hs{padding-right:1rem;text-align:left} .hs + .hs{border-left:1px solid var(--line);padding-left:1.2rem} .hs b{display:block;font-family:var(--display);font-size:1.8rem;line-height:1;color:var(--accent)} .hs span{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-size:.58rem;color:var(--steel);margin-top:.35rem} .statsbar{padding:0 0 1rem} .statsbar .hero-stats{max-width:none;margin:0;padding:.7rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .statsbar .hs{padding:0 1rem;text-align:center} .statsbar .hs + .hs{border-left:1px solid var(--line);padding-left:1rem} .statsbar .hs b{font-size:1.55rem} .statsbar .hs span{font-size:.55rem;margin-top:.25rem} /* ---------- bands ---------- */ .band{padding:110px 0} .band.tile{background:var(--paper-warm)} .band.ink{background:var(--ink);color:var(--paper)} .band.ink h2,.band.ink h3,.band.ink h4{color:var(--paper)} .band.ink p{color:var(--rule)} .band.ink .eyebrow{color:var(--accent-lift)} .band.ink .eyebrow::after{background:var(--ink-soft)} .section-head{margin-bottom:1.6rem;max-width:50ch} /* ---------- guarantee, as one line under every buy button ---------- Was a bordered block with a seal in the offer and a pill badge in the aside. Both are gone: the promise now travels with the button it applies to, so it is read at the moment of clicking rather than as its own section somewhere else on the page. */ .guar-line{ display:flex;align-items:center;justify-content:flex-start;gap:.5rem; font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em; font-size:.62rem;line-height:1.4;color:var(--steel); margin:.7rem 0 0;max-width:none; } .guar-line svg{width:1rem;height:1rem;flex:none;fill:var(--cta)} .guar-line svg .tick{stroke:var(--paper)} /* Centred wherever its button is centred. */ .inside-cta .guar-line,.closing-cta .guar-line,.buy-panel .guar-line{justify-content:center} .band.ink .guar-line{color:var(--rule)} .band.ink .guar-line svg .tick{stroke:var(--ink)} /* ---------- offer block ---------- No longer its own section: these rules now style the offer that sits at the top of the #buy left column. */ .offer-top{display:flex;gap:2rem;align-items:flex-start;margin-bottom:1.8rem} .offer-h{font-size:3rem;line-height:1.05;margin-bottom:1rem} .offer-lede{font-size:1.05rem;color:var(--ink-soft);max-width:44ch} /* The whole offer sits in one frame: name, books, total, guarantee, button and button. Inner boxes carry the same border weight so the block reads as one package with parts, not as a pile of separate cards. */ .offer-detail h3{font-size:1.9rem;margin-bottom:.6rem} .offer-detail > p{font-size:1rem;color:var(--ink-soft)} .price-row{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.7rem 0;margin:.9rem 0} .p-now{font-family:var(--ui);font-size:2.8rem;line-height:1;color:var(--accent)} .p-was{font-size:1.05rem;color:var(--ink-mute);text-decoration:line-through} .stack li em{font-style:normal;font-family:var(--ui);color:var(--ink-mute);white-space:nowrap} .stack li b{font-weight:700} .stack li.total{border-bottom:none;border-top:2px solid var(--ink);margin-top:.2rem;padding-top:.65rem;padding-left:0;font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em} .stack li.total::before,.stack li.total::after{content:none} .stack li.total em{color:var(--ink)} .p-note{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--steel)} .stack-head{font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:600;color:var(--accent);margin-bottom:.5rem} /* One hairline box around all three books so they read as a single package rather than three separate line items. The lead card keeps its own tint inside it; the last row drops its rule so it does not double up with the box edge. */ .stack{list-style:none;padding:0;margin:0} .stack li:last-child{border-bottom:0} .stack li{position:relative;display:flex;justify-content:space-between;gap:1.5rem;padding:.42rem 0 .42rem 1.85rem;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.35} /* Every book row carries the same tick as the hero list, the lead card included, so the block reads as three things you get rather than one book with two labels hanging off it. The tick sits in a filled green disc: ::before is the disc, ::after is the tick drawn on top of it. */ .stack li .lead-tag{display:inline-block;background:var(--cta);color:var(--paper);font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;padding:.14rem .45rem;border-radius:2px;margin-right:.5rem;vertical-align:.1em} .paybar{text-align:center;font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;color:var(--steel);margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);max-width:none} /* ---------- aside hero ---------- */ .aside-in{display:flex;flex-direction:column;align-items:flex-start} .promise{font-family:var(--display);font-size:1.3rem;line-height:1.4;color:var(--ink);max-width:40ch;margin:2.2rem 0 .6rem;padding-top:1.8rem;border-top:1px solid var(--line)} .aside-hero .promise{margin-top:0;padding-top:0;border-top:0} p.lede{font-size:1.18rem;color:var(--ink-soft);max-width:42ch} /* honesty block standing where Frank's review bar sits */ .nostars{background:var(--ink);color:var(--rule);border-left:4px solid var(--accent);border-radius:4px;padding:1.6rem 1.7rem .9rem;max-width:52ch} .nostars strong{display:block;font-family:var(--display);font-size:1.3rem;font-weight:400;color:var(--paper);margin-bottom:.7rem} .nostars p{color:var(--rule);font-size:.95rem;max-width:none} /* ---------- positioning strip ---------- */ .strip{background:var(--ink);color:var(--paper);padding:1.6rem 0} .strip-in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap} .strip p{margin:0;font-size:1.15rem;color:var(--paper);font-family:var(--display);max-width:none} .strip span{color:#786B53;font-family:var(--ui);font-size:1rem} /* ---------- books ---------- */ .books{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem} .bk{background:var(--tile);border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:6px;padding:1.7rem;box-shadow:0 1px 2px rgba(21,17,11,.05),0 6px 18px -12px rgba(21,17,11,.35);transition:transform .18s ease,box-shadow .18s ease} .bk:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,17,11,.06),0 14px 26px -14px rgba(21,17,11,.45)} .bk h3{font-size:1.15rem;margin-bottom:.25rem} .bk-sub{font-family:var(--ui);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--steel);margin-bottom:.9rem} .bk p{font-size:.95rem;color:var(--ink-soft);margin:0} /* ---------- what you get ---------- */ .getlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.5rem;margin-top:2.2rem} .gi{display:flex;gap:1rem;align-items:baseline;padding:.95rem .6rem;border-bottom:1px solid var(--line);border-radius:4px;transition:background .15s ease} .gi:hover{background:var(--tile)} .gi b{font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;font-weight:600;color:var(--accent);flex:none;width:9.5rem} .gi span{font-size:.98rem;color:var(--ink-soft)} /* ---------- what is inside ---------- */ .inside{background:linear-gradient(180deg,#0F0C07 0%,var(--ink) 55%)} .inside-head{max-width:46ch;margin-bottom:2rem} .inside-head h2{font-size:2.3rem;line-height:1.08} .tally{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2B241A;border-bottom:1px solid #2B241A;margin-bottom:2.4rem} .ty{padding:1.1rem 1rem;text-align:center} .ty + .ty{border-left:1px solid #2B241A} .ty b{display:block;font-family:var(--display);font-size:2rem;line-height:1;color:var(--accent-lift)} .ty span{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;color:#786B53;margin-top:.4rem} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} .card{position:relative;overflow:hidden;background:#0F0C07;border:1px solid #2B241A;border-radius:6px;padding:1.4rem;transition:transform .18s ease,border-color .18s ease,background .18s ease} .card:hover{transform:translateY(-4px);border-color:var(--accent);background:#15110B} .card-no{position:absolute;top:.2rem;right:.7rem;font-family:var(--display);font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px #4A4131;transition:-webkit-text-stroke-color .18s ease} .card:hover .card-no{-webkit-text-stroke-color:var(--accent)} .card h3{color:var(--paper);font-size:1.05rem;margin:0 3rem .5rem 0;line-height:1.2} .chip{display:inline-block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.12em;font-size:.56rem;color:var(--accent-lift);border:1px solid #4A4131;border-radius:999px;padding:.22rem .6rem;margin-bottom:.7rem} .card p{font-size:.88rem;color:var(--rule);margin:0;max-width:none} .inside-cta{margin-top:2.4rem;padding-top:2rem;border-top:1px solid #2B241A;text-align:center} .inside-cta p{font-size:.86rem;color:#786B53;margin:1rem auto 0} .inside-cta .btn{margin-inline:auto} /* ---------- about ---------- */ .about{max-width:52ch} .pull{border-left:6px solid var(--accent);padding:.2rem 0 .2rem 1.5rem;margin:1.8rem 0;font-family:var(--display);font-size:1.24rem;line-height:1.4} /* ---------- faq ---------- */ .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 2.5rem} .faq h3{margin-bottom:.3rem} .faq p{font-size:1rem;margin:0} /* ---------- closing ---------- */ .closing-cta{text-align:center} .closing-cta h2{margin-bottom:.2rem} .closing-cta .btn-row{justify-content:center} .foot{background:#0F0C07;color:#786B53;padding:2.5rem 0;font-size:.95rem} .foot a{color:var(--rule)} .foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center} /* ---------- exit intent ---------- */ .xi{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(21,17,11,.72)} .xi.open{display:flex} .xi-box{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:6px;max-width:34rem;width:100%;padding:1.9rem 1.8rem 1.7rem;box-shadow:0 24px 60px -18px rgba(0,0,0,.55);display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start} .xi-cover{width:8.4rem;flex:none;border:1px solid var(--line);border-radius:3px;background:var(--tile);padding:.4rem} /* The cover carries width/height attributes for CLS, so it needs height:auto or the browser lays it out at the literal attribute height and the modal stretches to 800px tall. */ .xi-cover img{width:100%;height:auto} .xi h2{font-size:1.42rem;line-height:1.25;margin:0 0 .55rem} .xi p{font-size:.96rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .5rem;max-width:none} .xi .btn{margin-top:0;width:100%} .xi-close{position:absolute;top:.4rem;right:.5rem;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--steel);cursor:pointer;padding:.35rem .55rem;min-width:44px;min-height:44px} .xi-close:hover{color:var(--accent)} @media (max-width:900px){ .offer-top{flex-direction:column;gap:1rem;margin-bottom:2rem} .offer-h{font-size:2rem} .offer-detail{padding:1.15rem} .p-now{font-size:2.2rem} .stack li{flex-direction:column;gap:.1rem;padding:.45rem 0 .45rem 1.85rem} .cards{grid-template-columns:repeat(2,1fr)} .inside-head h2{font-size:1.8rem} } @media (max-width:820px){ /* Frank's mobile hero: photo first, everything centred. */ .hero-in{grid-template-columns:1fr;grid-template-areas:"img" "text";row-gap:1.6rem;text-align:center} .hero-media{max-width:none} .hero-text{align-items:center} /* Angus's photo is portrait 896x1200, so the frame matches it and the whole picture shows. Frank's is landscape, hence his 4/3. */ .hero-cover{aspect-ratio:3/4} .hero-cover img{object-position:center center} .hero-media{width:100%;max-width:none} .hero-frame{padding:.55rem} .best,.offer-lede,p.lede,.promise{margin-inline:auto} .btn-row{justify-content:center} .hero-stats{max-width:none} .hs{text-align:center} } @media (max-width:960px){ html{font-size:20px} h1{font-size:2.5rem} .faq{grid-template-columns:1fr;gap:2.2rem} .books,.getlist{grid-template-columns:1fr;gap:1.6rem} .gi{flex-direction:column;gap:.25rem} .gi b{width:auto} .hero h1.long{font-size:1.85rem} .band,.hero{padding:2.8rem 0} } @media (max-width:640px){ .xi-box{grid-template-columns:1fr;text-align:center;padding:1.6rem 1.2rem 1.3rem;gap:1rem} .xi-cover{width:6.6rem;margin:0 auto} } @media (max-width:620px){ .cards{grid-template-columns:1fr} .tally{grid-template-columns:1fr} .ty + .ty{border-left:none;border-top:1px solid #2B241A} } @media (max-width:560px){ html{font-size:19px} .statsbar .hs{padding:0 .35rem} .statsbar .hs + .hs{padding-left:.35rem} .statsbar .hs b{font-size:1.25rem} .statsbar .hs span{font-size:.5rem;letter-spacing:.06em} } /* savings page: the qualified claim under the headline */ .figure{color:var(--accent)} /* banner tile scales down on small screens so birds stay whole */ @media (max-width:820px){ } /* ---------- reviews ---------- */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem} .review{background:var(--tile);border:1px solid var(--line);border-radius:6px;padding:1.5rem; box-shadow:0 1px 2px rgba(21,17,11,.05),0 6px 18px -12px rgba(21,17,11,.35); transition:transform .18s ease,box-shadow .18s ease} .review:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,17,11,.06),0 14px 26px -14px rgba(21,17,11,.45)} .review-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem} .face{width:3.2rem;height:3.2rem;border-radius:50%;overflow:hidden;flex:none;border:3px solid var(--paper);background:#DCD0AA} .face img{width:100%;height:100%;object-fit:cover} .stars{color:#BA8C3E;font-size:1.05rem;letter-spacing:.12em;margin-bottom:.1rem} .review b{display:block;font-family:var(--ui);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft)} .review p{font-size:.95rem;margin:0;color:var(--ink-soft)} @media (max-width:960px){ .reviews{grid-template-columns:1fr;gap:1.4rem} } /* ---------- payment marks ---------- */ .paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem; border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2.2rem} .paybar .lockline{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em; font-size:.62rem;color:var(--steel);margin:0} .pays{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center} .pay{display:inline-flex;align-items:center;justify-content:center;height:2.1rem;min-width:3.2rem; padding:0 .55rem;background:#fff;border:1px solid var(--line);border-radius:4px} .pay svg{height:1.05rem;width:auto;display:block} /* All six marks are greyscale. Brand colours here pulled the eye away from the one coloured control that matters, which is the green button. */ .pay-label{font-family:var(--ui);font-weight:700;font-size:.68rem;letter-spacing:.04em;color:#4A4A4A} .pay-label.mc{color:#4A4A4A} .pay-label.ap{color:#333;display:flex;align-items:center;gap:.15rem} .pay-label.ap svg path{fill:#333} /* ---------- egg burst ---------- */ .egg-bit{position:fixed;z-index:999;pointer-events:none;width:26px;height:26px} .btn{position:relative;overflow:visible} .egg-pop{position:absolute;top:-1.1rem;right:-.9rem;width:2.4rem;height:2.4rem;pointer-events:none; transform:scale(.2) rotate(-28deg);opacity:0; transition:transform .22s cubic-bezier(.2,1.5,.5,1),opacity .18s ease; filter:drop-shadow(0 3px 5px rgba(0,0,0,.22))} .egg-pop svg{width:100%;height:100%;display:block} .btn:hover .egg-pop,.btn:focus-visible .egg-pop{transform:scale(1) rotate(-12deg);opacity:1} @media (prefers-reduced-motion:reduce){.egg-pop{transition:none}} /* ---------- hero benefit points ---------- */ .hero-points{list-style:none;margin:.2rem 0 1.3rem;padding:0;max-width:36ch} .hero-points li{ position:relative;padding:.42rem 0 .42rem 2rem; font-family:var(--display);font-size:1.06rem;line-height:1.4;color:var(--ink); } /* Same disc-and-tick as the book rows. */ .hero-points li::before{ content:"";position:absolute;left:0;top:.5rem; width:1.2rem;height:1.2rem;border-radius:50%;background:var(--cta); } .hero-points li::after{ content:"";position:absolute;left:.35rem;top:.85rem; width:.48rem;height:.25rem; border-left:2px solid var(--paper);border-bottom:2px solid var(--paper); transform:rotate(-45deg); } @media (max-width:820px){ .hero-points{margin-inline:auto;text-align:left;max-width:22rem} } /* The supporting books and the audiobook come with the set, so their badge is solid rather than the outlined "Included" that read as a caveat. It carries the same green as the buy button by explicit decision: green is not exclusive to CTAs on this page, and the collision is accepted. */ .free-tag{ display:inline-block;background:var(--cta);color:var(--paper); border:1px solid var(--cta);border-radius:2px; font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-weight:600; font-size:.54rem;padding:.12rem .45rem;margin-right:.5rem;vertical-align:.12em; } /* The audiobook row. It carries the same tick and the same solid FREE badge as the two supporting books, so it reads as part of the set, then an outlined headphone chip beside it so nobody takes it for a fourth PDF. Outlined rather than solid keeps FREE as the loudest thing on the row. */ .audio-tag{ display:inline-flex;align-items:center;gap:.35em; background:transparent;color:var(--accent); border:1px solid var(--accent);border-radius:2px; font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-weight:600; font-size:.54rem;padding:.12rem .45rem;margin-right:.5rem;vertical-align:.12em; } .audio-tag svg{width:.95em;height:.95em;flex:none} /* Closing summary, not a fourth item: no tick, no rule, pushed clear of the list and set lighter so it reads as a note about the three above it. */ .stack li.plain{ margin-top:1.05rem;padding:0;border-bottom:0; color:var(--ink-mute);font-size:.85rem;line-height:1.45; } .stack li.plain::before{content:none} /* ---------- Elias-derived detail, Angus palette ---------- */ .offer-h{font-size:44px;font-weight:600;line-height:1.04;letter-spacing:-1px;margin-bottom:16px} .hero h1.long{ font-family:"Libre Baskerville",Georgia,serif;font-weight:700; text-transform:none;font-size:2.35rem;line-height:1.22;letter-spacing:-.005em; } /* The figure inside the headline, picked out in the buy colour. Same job as the .money span in the Frank build. */ .money{color:var(--cta)} .best{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:52ch;margin:18px 0 22px} p.lede{font-size:20px;color:var(--ink-mid);max-width:52ch} .promise{font-family:var(--serif);font-size:24px;line-height:1.35;color:var(--ink);max-width:44ch; margin:36px 0 10px;padding-top:30px;border-top:1px solid var(--rule)} .section-head{margin-bottom:34px;max-width:56ch} .hero-points li{font-family:var(--serif);font-size:19px;line-height:1.45} .stack-head,.paybar,.p-note,.hs span,.ty span,.chip,.col-head,.cover-note,.chart-note,.bk-sub, .lead-tag,.free-tag,.review b,.dl-hint{font-family:var(--mono)} .hs b,.ty b,.p-now,.brand{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:3.4px} .strip p{font-family:var(--serif);font-size:22px} .strip span{font-family:var(--mono);font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent-lift)} .card,.bk,.review{border-radius:0} .foot{background:var(--ink);color:var(--ink-mute);font-family:var(--mono);font-size:12px;letter-spacing:1.4px} .foot a{color:var(--paper)} @media (max-width:980px){ h1,.hero h1.long{font-size:40px;letter-spacing:-.8px} h2,.offer-h{font-size:33px;letter-spacing:-.6px} h3{font-size:24px} .band{padding:72px 0} .hero{padding:56px 0 44px} } @media (max-width:640px){ :root{--gutter:20px} h1,.hero h1.long{font-size:34px} h2,.offer-h{font-size:28px} .band{padding:56px 0} } /* Item 6: every CTA is full width on a phone, so the tap target is the whole column and no two buttons can sit side by side. */ @media (max-width:768px){ .btn{width:100%} } /* ---------- what-you-get rows ---------- The rows carried a 2D cover between the tick and the badge; the covers are gone and the row is text only. It still has to stay a row: the ≤900px rule turns .stack li into a column, which would drop the badge above the title on a phone. Declared after that media query so it wins, and gap is zeroed so nothing is held open where the cover used to sit. */ .stack li{flex-direction:row;align-items:flex-start;gap:0} .stack li > span{flex:1 1 auto;min-width:0} /* Without the 72px cover setting the row height, the rows close up to their own text. A little more padding than the old .42rem keeps them from touching the hairline rules. */ .stack li{padding-top:.5rem;padding-bottom:.5rem} .stack li.lead{padding-top:.85rem;padding-bottom:.85rem} /* The tick sat level with the top of the cover; it now sits with the first line of text. */ .stack li::before{top:.68rem} .stack li::after{top:1.01rem} .stack li.lead::before{top:1.01rem} .stack li.lead::after{top:1.34rem} @media (max-width:560px){ .stack li{padding-left:1.4rem} .stack li.lead{padding-left:2rem} } /* The hero CTA scrolls here rather than leaving for checkout, so the block needs a little clearance or the eyebrow sits against the viewport edge. */ #offer{scroll-margin-top:2rem} /* ---------- value stack: price column, struck through, green FREE ---------- Same structure as the Frank build (per item price, then a total value row, then You pay today) in Angus's green rather than Frank's oxblood. The price cell is .price and not a bare , because .stack li.lead em is already the lead card's description line and would swallow it. */ .stack li .price{ flex:0 0 auto;align-self:flex-start; display:flex;align-items:baseline;justify-content:flex-end;gap:.45rem; font-style:normal;font-family:var(--ui);font-size:.85rem; color:var(--ink-soft);white-space:nowrap; } /* Beats .stack li.lead em{display:block}, which would stack the $49 under the description and stretch it across the card. */ .stack li.lead .price{display:flex;font-size:.85rem;margin:0} .stack li .price s{color:var(--ink-mute)} /* The FREE badge is the same green chip as .free-tag, kept in step with it. */ .stack li .price i{ font-style:normal;background:var(--cta);color:var(--paper); border:1px solid var(--cta);border-radius:2px; font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-weight:600; font-size:.54rem;padding:.12rem .45rem; } /* Total value is a summary of the rows above, not a fourth thing you get, so it drops the tick and its indent and takes a heavier rule instead. */ .stack li.total{ border-bottom:0;border-top:2px solid var(--line-strong); margin-top:.4rem;padding:.65rem 0 .1rem; font-family:var(--ui);text-transform:uppercase;letter-spacing:.08em; font-size:.78rem;color:var(--ink); } .stack li.total::before,.stack li.total::after{content:none} .stack li.total .price{font-family:var(--serif);font-size:1.05rem;color:var(--ink);letter-spacing:0} /* Struck through: the total is what the set is worth, not what is paid. Muted so the live figure in You pay today stays the loudest number in the block. */ .stack li.total .price s{color:var(--ink-mute);text-decoration:line-through} /* The ≤900px rule turns rows into columns; the price must stay on the row so it lands to the right of the title the way it does on desktop. */ @media (max-width:900px){ .stack li{flex-direction:row} .stack li .price{align-self:flex-start} } @media (max-width:560px){ .stack li.total{padding-left:0} } /* ---------- sticky CTA, phones only ---------- Hidden until the hero has scrolled out, so it never covers the hero's own button. A shadow rather than a border keeps it off the page as a line. The [hidden] attribute is the no-JS state: if the observer never runs, the bar never appears and the page is exactly as it was. */ .stickybar{ display:none; position:fixed;left:0;right:0;bottom:0;z-index:60; align-items:center;justify-content:space-between;gap:1rem; background:var(--paper); padding:.6rem var(--gutter); padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px)); box-shadow:0 -3px 14px -4px rgba(21,17,11,.34); transform:translateY(110%); transition:transform .24s ease; } .stickybar.on{transform:none} /* One control, edge to edge, 56px of it. The price is in the label so the bar does not need a second element beside the button. */ .stickybar .btn{width:100%;min-height:56px;padding:0 18px} @media (max-width:768px){ .stickybar:not([hidden]){display:flex} /* clear the bar so the footer links are still reachable */ .foot{padding-bottom:5.4rem} } /* ================================================================== Hero identity, collapsed chapters, embedded checkout. Declared last so they win over the earlier breakpoint blocks. ================================================================== */ /* ---------- item 1: the quiet second option under the one button ---------- A text link, not a button. Two buttons of equal weight made the reader choose; this one just gets out of the way. */ .seelink{font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;margin:.65rem 0 0} .seelink a{color:var(--ink-mute);text-decoration:underline;text-underline-offset:.3em} .seelink a:hover{color:var(--cta)} /* ---------- item 3: the star strip has to clear a 390x844 screen ---------- It only does that if the hero above it is short, so on a phone the photograph becomes a small square author portrait rather than a full width 3/4 plate, and the vertical rhythm tightens throughout. Nothing is hidden: every line of hero copy is still there. */ @media (max-width:820px){ .hero{padding:.7rem 0 1.6rem} .hero-in{row-gap:.55rem} .hero-media{width:auto;max-width:11.5rem;margin-inline:auto} .hero-frame{padding:.3rem} .hero-cover{aspect-ratio:1/1} .hero-cover img{object-position:center 12%} .hero h1.long{margin-bottom:.25rem} .best{font-size:.9rem;line-height:1.4;margin:.35rem auto .3rem} .hero-points{margin:.05rem auto .4rem} .hero-points li{padding-top:.1rem;padding-bottom:.1rem;font-size:.92rem;line-height:1.28} .top-cta{margin-top:.45rem} .seelink{margin-top:.4rem} .proofpill{margin-top:.45rem} } /* ---------- item 5: the twelve chapter cards fold away ---------- Closed by default. The summary is a full width control on the dark band, sized like a button so it is obviously pressable. */ .chapters{border:0;margin:0} .chapters summary{ list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:1rem; min-height:52px;padding:.9rem 1.2rem; background:#0F0C07;border:1px solid #2B241A;border-radius:0; font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em; font-size:.68rem;color:var(--accent-lift); transition:border-color .18s ease,background .18s ease; } .chapters summary::-webkit-details-marker{display:none} .chapters summary::after{content:"+";font-size:1.1rem;line-height:1;color:var(--accent-lift)} .chapters[open] summary::after{content:"\2013"} .chapters summary:hover{border-color:var(--accent-lift);background:var(--ink)} .chapters[open] summary{margin-bottom:1.1rem} /* ---------- item 9: the Whop embed, in the page ---------- Same plan as checkout.html, which stays where it is as a fallback for anyone the embed fails for. The panel is capped so the iframe does not stretch across the full container on a desktop. */ .buy-panel{background:var(--paper);border:2px solid var(--line-strong);padding:1.3rem} /* Reserve the embed's height before it hydrates, so the page below it does not jump once Whop paints. */ #plan-base{min-height:460px} .buy-panel .whop-checkout-wrapper iframe{width:100%;border:0} @media (max-width:560px){ #plan-base{min-height:560px} .buy-panel{padding:.9rem} } /* ---------- before / after: the same hen, two mornings ---------- Equal columns, square corners, one hairline, no shadow. The photographs carry themselves; a drop shadow would make them read as cards rather than as evidence. */ /* The sources are square, so two full width columns would put a 1150px block of photograph in the middle of the page. Capped so the pair reads at the same scale as the body copy beside it. */ .compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;max-width:46rem} .cmp{margin:0} .cmp img{ width:100%;height:auto;display:block; border:1px solid var(--heather);border-radius:0;box-shadow:none; } .cmp figcaption{ font-family:var(--ui);text-transform:uppercase;letter-spacing:.12em; font-size:.62rem;line-height:1.5;color:var(--steel);margin-top:.65rem; } .compare-q{font-family:var(--display);font-size:1.05rem;line-height:1.4; color:var(--ink-mute);margin:.35rem 0 0;max-width:44ch} .compare-note{font-size:1.02rem;color:var(--ink-soft);max-width:52ch;margin:1.5rem 0 0} .compare-link{margin-top:.6rem} @media (max-width:900px){ .compare-pair{grid-template-columns:1fr;gap:1.3rem} } /* ================================================================== #buy: one section, two columns. Left is the case for the $27, right is the form that takes it. ================================================================== */ /* Named areas rather than source order, so the same reading order holds at both breakpoints: headline, the books, the set panel and its button, the guarantee, then the proof. The DOM is already in that order, so the phone needs no rules at all. */ .buy-grid{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,460px); grid-template-areas: "head head" "shot panel" "proof panel"; column-gap:3.2rem; row-gap:2rem; justify-content:center; } .buy-topline{grid-area:head} .buy-shot{grid-area:shot;max-width:560px;min-width:0} .buy-right{grid-area:panel} .buy-left{grid-area:proof} /* The books photograph, now its own grid item rather than a one-cell grid. */ .buy-shot .shot{aspect-ratio:auto;background:transparent;border:0;padding:0; overflow:visible;border-radius:0} .buy-shot .shot img{width:100%;height:auto;object-fit:contain; } /* The books mockup is now a cut-out PNG with real transparency. The old drop-shadow was tuned for the previous image, which carried its own opaque rectangular background -- against a cut-out it traces the books and reads as a dark haze, so it is gone. */ /* Capped so the review paragraphs do not run to a full container width. */ .buy-left{max-width:560px;min-width:0} /* The right column is the "what you get" panel and the button that buys it: the set, the ticks, the price and the CTA in one place, at the height the reader is already looking. The books photograph stays on the left. It hugs the top rather than stretching. The .buy-sticky and .buy-panel rules below are deliberately left in place so the in-page embed can be restored in one edit. */ .buy-right{min-width:0;align-self:start} .buy-right .btn{width:100%} .buy-right .guar-block{margin-top:1.1rem} /* The column is a full height grid item, so the panel can travel the whole left stack and comes to rest at the end of the section on its own. The max-height is a safety, not a style. The Whop form runs to about 1020px with every payment method listed, which is taller than a laptop viewport; pinned at top:24px that would park the submit button off the bottom of the screen for the entire length of the left stack. Capping the panel to the viewport lets the form scroll inside itself instead, so nothing is ever unreachable. On a tall screen the cap never engages and the panel behaves exactly as a plain top:24px sticky. */ .buy-sticky{ position:sticky;top:24px; max-height:calc(100vh - 48px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } /* The blocks down the left column: one rule between each, no boxes. */ .buy-block{margin-top:2.6rem;padding-top:2.4rem;border-top:1px solid var(--line)} .buy-block > .section-head{margin-bottom:1.3rem} .buy-block h2{font-size:1.9rem;line-height:1.1} /* The offer was built for a full width two column grid. In a 560px column it is one column, at a smaller heading size, and it keeps a paper ground so the tinted lead row and the price bar still read against it. */ .buy-left .offer-top{display:block;margin-bottom:1.4rem} .buy-left .offer-h{font-size:2.05rem;line-height:1.08;margin-bottom:.7rem} .buy-left .offer-lede{font-size:.98rem;max-width:none} .buy-left .offer-detail h3{font-size:1.6rem} /* One card per row: three across a 560px column would be unreadable. */ .buy-left .reviews{grid-template-columns:1fr;gap:1.1rem} .buy-left .review{background:var(--paper)} .buy-left .compare-pair{max-width:none} /* ---------- the closing promise, once, at the foot of the column ---------- */ .guar-block{ display:flex;gap:.85rem;align-items:flex-start; background:var(--paper);border:2px solid var(--line-strong); border-left:4px solid var(--cta);border-radius:0;padding:1rem 1.1rem; } .guar-block svg{width:1.6rem;height:1.6rem;flex:none;fill:var(--cta);margin-top:.1rem} .guar-block svg .tick{stroke:var(--paper)} .guar-block h3{font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em; font-size:.72rem;color:var(--cta);margin:0 0 .3rem} .guar-block p{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin:0;max-width:none} /* Replaced the uppercase trust row: it repeated what the checkout page already tells you. Body text, muted, no icons, no rules. */ .paynote{font-size:.88rem;line-height:1.6;color:var(--ink-mute); max-width:52ch;margin:1.1rem 0 0} .paynote a{color:var(--ink-mute);text-underline-offset:.2em} .paynote a:hover{color:var(--cta)} .buy-close .paybar{margin-top:1.1rem;padding-top:1.1rem} /* ---------- the live line, directly above the embed ---------- Same size and weight as the trust row. The number is written in by landing.js from ANGUS_LIVE_COUNT; nothing here animates it. */ .liveline{ display:flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em; font-size:.64rem;line-height:1.4;color:var(--steel); margin:0 0 .8rem;max-width:none; } .liveline[hidden]{display:none} .live-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--cta);flex:none; position:relative;animation:live-pulse 2s ease-out infinite} /* A ring that expands and fades out of the dot. Purely decorative, and it stops entirely for anyone who has asked for reduced motion. */ .live-dot::after{ content:"";position:absolute;inset:0;border-radius:50%; box-shadow:0 0 0 0 var(--cta);animation:live-ring 2s ease-out infinite; } @keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.55}} @keyframes live-ring{ 0%{box-shadow:0 0 0 0 rgba(58,107,60,.55)} 70%{box-shadow:0 0 0 .5rem rgba(58,107,60,0)} 100%{box-shadow:0 0 0 0 rgba(58,107,60,0)} } @media (prefers-reduced-motion:reduce){ .live-dot,.live-dot::after{animation:none} } .live-tag{color:var(--cta);font-weight:600} .live-count b{color:var(--ink);font-weight:600} /* The section headline is a full width row of the grid, so it lines up with the left column track exactly rather than being centred by hand. The copy inside it stays at the left column measure. */ .buy-topline .offer-top{max-width:560px;margin-bottom:0} @media (max-width:900px){ /* One column. The set panel and its button come straight after the headline rather than after the whole proof stack, which is where the source order would otherwise put them. */ .buy-grid{grid-template-columns:1fr;grid-template-areas:none;gap:2.4rem} /* Clearing grid-template-areas is not enough: the children still carry grid-area names, and unresolved names collide in one cell. Reset them so the phone falls back to plain source order, which is already the order we want. */ .buy-topline,.buy-shot,.buy-right,.buy-left{grid-area:auto} .buy-topline .offer-top{max-width:none} .buy-shot{max-width:none} .buy-left{max-width:none} .buy-sticky{position:static} .buy-block{margin-top:2.2rem;padding-top:2rem} .buy-left .offer-h{font-size:1.9rem} } /* ---------- ledger ---------- */ .math{border:1px solid var(--line);background:var(--paper-warm);padding:1.1rem 1.3rem;margin:1.4rem 0 0} .math ul{list-style:none;margin:0;padding:0} .math li{display:flex;justify-content:space-between;gap:1.5rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.35} .math li em{display:block;font-style:normal;font-size:.82rem;color:var(--ink-mute)} .math li b{font-family:var(--ui);white-space:nowrap} .math li.saved{border-top:2px solid var(--ink);border-bottom:0;margin-top:.2rem;padding-top:.65rem;font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em} .math li.total{border-bottom:0;padding-top:.2rem;font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)} .math-note{font-size:.86rem;line-height:1.5;color:var(--ink-mute);margin:.9rem 0 0;max-width:none} /* ---------- order-block ticks, structural ---------- The tick used to be an absolutely positioned ::before with the space held open by padding-left. Every mobile rule that set `padding` as a shorthand silently reset that padding-left to 0, so the disc landed on top of the first characters. It is now a real grid column: it reserves its own width and cannot overlap text at any viewport. col 1 = tick, col 2 = text, col 3 = price. No absolute positioning, no negative margins, no text-indent. The disc carries the check as a background image so the whole mark is one grid item. */ .stack li{ display:grid; grid-template-columns:1.1rem minmax(0,1fr) auto; column-gap:.75rem;row-gap:.15rem; align-items:start; padding:.42rem 0; border-bottom:1px solid var(--line); font-size:.95rem;line-height:1.35; } .stack li::before{ content:""; grid-column:1;grid-row:1;position:static; width:1.1rem;height:1.1rem;border-radius:50%; background-color:var(--cta); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:.72rem .72rem; margin-top:.16rem; /* optical: level with the first text line */ } .stack li::after{content:none} /* the old separate check mark */ .stack li > span{grid-column:2;grid-row:1;min-width:0} .stack li > em{grid-column:3;grid-row:1;justify-self:end} /* The total is not an item: no tick, text and figure only. */ .stack li.total{grid-template-columns:minmax(0,1fr) auto;padding-left:0} .stack li.total::before{content:none} .stack li.total > span{grid-column:1} .stack li.total > em{grid-column:2} /* Narrow: the price drops under the text for EVERY row, aligned to the text column so the tick column stays clear. Consistent across all rows. */ @media (max-width:560px){ .stack li{grid-template-columns:1.1rem minmax(0,1fr);} .stack li > em{grid-column:2;grid-row:2;justify-self:end} .stack li.total{grid-template-columns:minmax(0,1fr)} .stack li.total > em{grid-column:1;grid-row:2;justify-self:end} } /* ---------- hero sizing, matched to the Frank build ---------- The photo is a deliberate 4:3 crop, so the frame is 4:3 too and object-fit has nothing left to decide. On mobile the cap is removed so the photo fills the column the way Frank's does, instead of being held at 11.5rem. */ .hero-cover{aspect-ratio:4/3} @media (max-width:820px){ .hero-media{width:100%;max-width:none;margin-inline:0} .hero-cover{aspect-ratio:4/3} .hero-frame{padding:.8rem} } /* ---------- per-review star ratings ---------- Partial fills via a gradient clipped to the glyphs, so a rating between whole stars renders honestly. letter-spacing is zeroed on these so each star is exactly one fifth of the width and --pct maps 1:1 to the rating (4.5 -> 90%, 4.9 -> 98%). Aggregate pills elsewhere are untouched. */ .review .stars{ letter-spacing:0; background-image:linear-gradient(90deg,var(--gold) var(--pct,100%),#CDBE99 var(--pct,100%)); -webkit-background-clip:text;background-clip:text; color:transparent; } /* ---------- drop-downs: FAQ and contents ---------- */ .drop{border-top:1px solid var(--line);margin:0} .drop:last-of-type{border-bottom:1px solid var(--line)} .drop > summary{ list-style:none;cursor:pointer;padding:.9rem 2rem .9rem 0;position:relative; font-family:var(--ui);text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;color:var(--ink); } .drop > summary::-webkit-details-marker{display:none} .drop > summary::after{ content:"";position:absolute;right:.35rem;top:1.2rem;width:.6rem;height:.6rem; border-right:2px solid var(--cta);border-bottom:2px solid var(--cta); transform:rotate(45deg);transition:transform .18s ease; } .drop[open] > summary::after{transform:rotate(-135deg)} .drop-body{padding:0 0 1rem} .drop-body p{font-size:.95rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .7rem;max-width:none} .drop-body h3{font-size:1rem;margin:.9rem 0 .25rem} .tag-main,.tag-free{font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-size:.56rem; padding:.14rem .45rem;border-radius:2px;margin-left:.4rem;vertical-align:.15em;color:#fff} .tag-main{background:var(--accent)} .tag-free{background:var(--cta)} .origin-strip{padding:2rem 0 0} .origin-strip p{font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .5rem;max-width:52ch} @media (prefers-reduced-motion:reduce){.drop > summary::after{transition:none}} /* ---------- guarantee seal ---------- An insignia, not a caption: solid shield, heavy border, no gradient, no glow, no shine. Same mark and same position on all three sites. */ .seal-badge{ display:inline-flex;align-items:center;gap:.85rem; border:3px solid var(--accent);background:var(--tile); padding:.75rem 1.15rem;border-radius:2px;max-width:31rem; } .seal-shield{width:2.5rem;height:3rem;flex:none;fill:var(--accent)} .seal-shield .tick{stroke:var(--tile)} .seal-text b{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em; font-size:.95rem;line-height:1.1;color:var(--accent)} .seal-text > span{display:block;font-size:.82rem;line-height:1.35;color:var(--ink-soft);margin-top:.22rem} @media (max-width:560px){ .seal-badge{gap:.65rem;padding:.6rem .8rem} .seal-shield{width:2rem;height:2.4rem} .seal-text b{font-size:.85rem} .seal-text > span{font-size:.76rem} } /* ---------- review rating: 4.5 stars plus the number ---------- */ .rating{display:inline-flex;align-items:center;gap:.42rem} .rating .stars{display:inline-block;letter-spacing:0; background-image:linear-gradient(90deg,#C9971B var(--pct,90%),#D9D0B6 var(--pct,90%)); -webkit-background-clip:text;background-clip:text;color:transparent} .rating-num{font-family:var(--ui);font-size:.82rem;letter-spacing:.04em;color:var(--ink)} /* ---------- payment marks (shared treatment) ---------- */ .lockline{font-family:var(--ui);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem; color:var(--ink-mute);text-align:center;margin:1rem 0 .5rem} .pays{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:center} .pay-mark{display:inline-flex;align-items:center;justify-content:center;min-width:2.9rem;height:1.7rem; padding:0 .4rem;background:#fff;border:1px solid var(--line);border-radius:3px} .pay-mark svg{height:1.05rem;width:auto;display:block} .pay-label{font-family:var(--ui);font-weight:700;font-size:.66rem;letter-spacing:.06em;color:#1A1F6B} .pay-label.ap{display:inline-flex;align-items:center;gap:.12rem;color:#111;letter-spacing:0} /* ---------- guarantee seal, tightened ---------- */ .seal-badge{gap:.6rem;padding:.5rem .8rem;max-width:26rem;border-width:2px} .seal-shield{width:1.7rem;height:2rem} .seal-text b{font-size:.78rem;letter-spacing:.05em} .seal-text > span{font-size:.74rem;line-height:1.3;margin-top:.15rem} @media (max-width:560px){ .seal-badge{gap:.5rem;padding:.45rem .65rem} .seal-shield{width:1.45rem;height:1.75rem} .seal-text b{font-size:.72rem} .seal-text > span{font-size:.7rem} } /* order-block guarantee panels, tightened to match */ .guarantee-inline,.guar-block{padding:.55rem .7rem;gap:.6rem} .guarantee-inline h3,.guar-block h3{font-size:.82rem} .guarantee-inline p,.guar-block p{font-size:.75rem;line-height:1.3} /* ---------- offer grid, after the proof column moved out ---------- Reviews and the before/after pair are their own sections now, so the grid is head + shot + panel with no empty third row. */ .buy-grid{grid-template-areas:"head head" "shot panel"} @media (max-width:900px){ .buy-grid{grid-template-areas:"head" "panel" "shot"} } /* ================================================================== Round four corrections. Appended last so these win the cascade. ================================================================== */ /* 1. Decorative rules removed. The hairline that ran out to the right of every eyebrow label, and the divider rules between blocks, carried no information. White space separates the sections instead. */ .eyebrow::after,.band.ink .eyebrow::after{content:none;display:none} .eyebrow{gap:0} .buy-block{border-top:0;padding-top:0} .paybar{border-top:0} /* 2. Proof pill reduced to a compact badge: smaller faces, tighter padding, less height. Same size on all three sites. */ .proof,.proofpill{gap:.5rem;padding:.3rem .75rem .3rem .4rem;border-radius:999px} .face,.proofpill .face,.proof-faces img,.proof .face{width:1.75rem;height:1.75rem;border-width:2px} .face.lg{width:1.95rem;height:1.95rem;margin-right:0} .proof-faces img,.proofpill .face,.proof .face{margin-right:-.5rem} .proof-faces img:last-child,.proofpill .face:last-child,.proof .face:last-child{margin-right:0} .proof-stars,.proof-text .stars,.proofpill .rating .stars,.proof .rating .stars{font-size:.85rem} .proof-line,.proof-text span,.proof-text .proof-line{font-size:.75rem;line-height:1.25} .rating-num{font-size:.75rem} /* 3. The lock line and the card marks are one row, on one baseline, rather than two centred blocks at different heights. */ .paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.5rem .8rem;margin-top:1.6rem;padding-top:1.1rem;text-align:center} .paybar .lockline,.lockline{margin:0;max-width:none;display:inline-flex;align-items:center;gap:.3rem} .paybar .pays,.pays{margin:0;align-items:center} /* 4. The guarantee seal sits clear of the hero buttons at every width. It was flush against them, so a wrapped button clipped it. */ .hero .btn-row.top-cta{margin-bottom:0} .assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1.15rem;position:static;clear:both} .seal-badge{position:static;float:none;transform:none;margin:0} @media (max-width:768px){ .hero .btn-row.top-cta{margin-top:1.2rem} .assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem} } /* ------------------------------------------------------------------ Review card details, made unconditional. The partial-fill stars were drawn with background-clip:text over a gradient and color:transparent. When the clip does not take effect the glyphs stay transparent and the card loses its stars entirely, which is what happened. The solid colour is now the base state and the gradient only replaces it where the clip is actually supported. ------------------------------------------------------------------ */ .rating{display:inline-flex;align-items:center;gap:.42rem;visibility:visible} .rating .stars,.review .stars,.proof-text .stars{ display:inline-block;letter-spacing:0; color:var(--star-gold,#BA8C3E); background-image:none;-webkit-text-fill-color:currentColor} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .rating .stars,.review .stars{ background-image:linear-gradient(90deg,var(--star-gold,#BA8C3E) var(--pct,95%),var(--star-dim,#CDBE99) var(--pct,95%)); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} } .rating-num{font-size:.78rem;color:var(--ink);opacity:1;white-space:nowrap} .review .rating-num{color:var(--ink)} .review .review-head{display:flex;align-items:center;gap:.85rem} .review .review-head > div{min-width:0;display:flex;flex-direction:column;gap:.12rem} .review b{display:block;white-space:normal} /* ================================================================== One spacing scale for every section break, every page, all three sites. Sections were running 130-266px of dead space between them: band padding stacked on top of the previous block's own bottom margin, plus body/footer padding still reserving room for a sticky bar that no longer exists. ================================================================== */ :root{--sec:2.2rem;--sec-in:1.15rem} @media (max-width:768px){:root{--sec:1.4rem;--sec-in:.85rem}} /* Every section break is the same value, top and bottom. */ .band{padding-top:var(--sec);padding-bottom:var(--sec)} /* Stacked margins: the section padding is the gap, so the first and last child inside a section do not add their own on top of it. */ .band > .wrap > *:last-child,.band > *:last-child, .band > .wrap > *:last-child > *:last-child{margin-bottom:0} .band > .wrap > *:first-child,.band > *:first-child{margin-top:0} /* Inside sections: heading to body, block to block. */ .section-head{margin-bottom:var(--sec-in)} .band h2{margin-bottom:.5rem} .band .eyebrow{margin-bottom:.6rem} .offer-top{margin-bottom:var(--sec-in)} .paybar{margin-top:var(--sec-in);padding-top:var(--sec-in)} .inside-cta{margin-top:var(--sec-in)} .tally{margin-bottom:var(--sec-in)} .buy-block{margin-top:var(--sec-in);padding-top:var(--sec-in)} .assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem} /* Room reserved for sticky bars that are no longer on the page. */ body{padding-bottom:0} .foot{padding:1.6rem 0} /* The legal and thank-you pages do not use .band; they wrap content in main / .doc / .sec. Same scale applied there so every page on the site breaks its sections at the same distance. */ .doc,.sec,.sec-downloads{padding-top:var(--sec);padding-bottom:var(--sec)} body > main{padding-top:var(--sec);padding-bottom:var(--sec)} .doc h2,.sec h2,main > .wrap > h2{margin-top:var(--sec-in);margin-bottom:.4rem} .doc > *:first-child,.sec > *:first-child,main > .wrap > *:first-child{margin-top:0} .doc > *:last-child,.sec > *:last-child,main > .wrap > *:last-child{margin-bottom:0} .updated{margin-top:var(--sec-in)} .card{margin-bottom:var(--sec-in)} /* ------------------------------------------------------------------ The pill had no container at all: no display, no border, no fill, no radius, so the faces, stars and count sat loose on the paper. Frank's component, in Angus's palette. ------------------------------------------------------------------ */ .proofpill{ display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center; gap:.5rem;padding:.3rem .75rem .3rem .4rem; border:2px solid var(--line);border-radius:999px; background:var(--tile,var(--paper-warm));align-self:flex-start;max-width:100%} .proofpill .faces{display:flex;flex:none;align-items:center} .proofpill .face{ width:1.75rem;height:1.75rem;border-radius:50%;overflow:hidden;display:block;flex:none; margin-right:-.5rem;border:2px solid var(--paper);background:#DCD0AA} .proofpill .face:last-child{margin-right:0} .proofpill .face img{width:100%;height:100%;display:block;object-fit:cover} /* ================================================================== Narrow-phone fit. Nothing crosses a container edge at 430, 390 or 360: long titles wrap instead of running into the price, the card marks wrap instead of pushing off the right edge, and the three-column stats bar steps down rather than clipping. ================================================================== */ @media (max-width:480px){ .card,.quote,.bump-wrap,.seal-badge,.paybar,.pay-head, .review,.proof,.proofpill,.hs,.stack li{min-width:0} .card *,.quote *,.bump-wrap *,.seal-badge *,.review *,.stack li *{overflow-wrap:anywhere} /* Product box: title wraps, price and save chip keep their own line. */ .sum-row{flex-wrap:wrap;align-items:flex-start;gap:.45rem} .sum-name{min-width:0;flex:1 1 55%} .sum-right{flex:0 0 auto;margin-left:auto;text-align:right;white-space:nowrap} /* One time offer: text stays inside the dashed border. */ .bump-wrap{overflow:hidden} .bump-wrap p,.bump-wrap h3,.bump-wrap b{max-width:100%} /* Card marks wrap onto a second row rather than off the edge. */ .paybar{flex-wrap:wrap} .pays{flex-wrap:wrap;max-width:100%;justify-content:center} /* One compact reassurance row. */ .pay-head{flex-wrap:wrap;justify-content:center;text-align:center; gap:.2rem .55rem;font-size:.7rem} /* Front page: stats bar, order rows, pill, review cards. */ .statsbar .hs{padding:0 .3rem} .statsbar .hs b{font-size:1.15rem} .statsbar .hs span{font-size:.5rem;letter-spacing:.05em} .stack li{grid-template-columns:1rem minmax(0,1fr)} .stack li > em{grid-column:2;grid-row:2;justify-self:end} .proof,.proofpill{max-width:100%;flex-wrap:nowrap} .proof-text,.q-meta{min-width:0} .review,.review p,.review b{max-width:100%} } @media (max-width:380px){ .statsbar .hs b{font-size:1rem} .statsbar .hs span{font-size:.46rem} .pay-head{font-size:.66rem;gap:.18rem .45rem} .paybar .lockline{font-size:.52rem} .pay-label{font-size:.52rem} .pay-mark svg{height:.72rem} .pay-mark{padding:.08rem .24rem} .quote .q-head .face{width:1.35rem;height:1.35rem;margin-right:-.38rem} } /* ================================================================== Stats bar on a phone. The three columns were `1fr`, which floors at the min-content width of the longest value ("5 generations", "53 years"), so the third stat ran outside its cell and off the card. minmax(0,1fr) lets the cells shrink and the value wrap. ================================================================== */ @media (max-width:560px){ .statsbar .hero-stats,.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))} .hs{min-width:0;padding:0 .3rem;text-align:center} .hs b{font-size:1.05rem;line-height:1.1;overflow-wrap:break-word;hyphens:none;display:block} .hs span{font-size:.48rem;letter-spacing:.04em;line-height:1.25;display:block;overflow-wrap:break-word} } @media (max-width:400px){ .hs b{font-size:.95rem} .hs span{font-size:.44rem} .hs{padding:0 .22rem} } /* The value now fits its cell instead of being hyphen-free broken mid-word ("generati / ons"): words stay whole and the type steps down at each width. */ @media (max-width:560px){ .hs b{font-size:.92rem;overflow-wrap:normal;word-break:normal;line-height:1.15} .hs span{overflow-wrap:normal;word-break:normal} } @media (max-width:400px){ .hs b{font-size:.82rem} .hs span{font-size:.42rem} } /* ================================================================== The hero guarantee goes back to a pill. It had grown into a full bordered block with a heading and a paragraph; this is the compact rounded badge it was before, sitting the same way the proof pill below it does. It is now the only guarantee on the page. ================================================================== */ .seal-badge{ display:inline-flex;align-items:center;gap:.55rem; padding:.34rem .95rem .34rem .55rem; border:1px solid var(--line);border-radius:999px; background:var(--tile);box-shadow:none;max-width:100%; align-self:flex-start} .seal-badge .seal-shield{width:1.1rem;height:1.35rem;flex:none} .seal-badge .seal-text{ display:flex;flex-wrap:wrap;align-items:baseline;gap:.05rem .4rem;min-width:0} .seal-badge b{ font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.3} .seal-badge .seal-text > span{ display:inline;font-size:.8rem;line-height:1.35;margin:0} @media (max-width:560px){ .seal-badge{padding:.3rem .8rem .3rem .5rem;gap:.45rem} .seal-badge b{font-size:.66rem} .seal-badge .seal-text > span{font-size:.76rem} } /* The offer-block guarantee is the same pill as the hero one, sitting under "Pay once - Yours forever" and above the proof pill, centred with the rest of that column. */ .offer-seal{margin:.7rem auto 0;align-self:center} .offer-detail .offer-seal,.buy-left .offer-seal{align-self:center} @media (max-width:560px){.offer-seal{margin-top:.55rem}} /* ================================================================== Before / after pair. Two photographs on their own read as a quiz; labelled, with the ten minutes called out between them, they read as a sequence. The arrow column collapses on a phone so the pair stacks in order rather than side by side. ================================================================== */ .compare-pair{grid-template-columns:1fr auto 1fr;align-items:start;gap:1.1rem} .cmp{position:relative;margin:0} .cmp img{display:block;width:100%;height:auto;border-radius:3px} .cmp-tag{ position:absolute;top:.6rem;left:.6rem;z-index:2; font-family:var(--ui);text-transform:uppercase;letter-spacing:.12em; font-size:.62rem;font-weight:700;color:#fff; padding:.28rem .6rem;border-radius:2px} .cmp-tag.before{background:#8C2B22} .cmp-tag.after{background:#3A6B3C} .cmp figcaption{font-size:.92rem;line-height:1.45;color:var(--ink-soft);margin-top:.6rem} .cmp-arrow{ align-self:center;display:flex;flex-direction:column;align-items:center;gap:.3rem; color:var(--ink-mute);padding-top:2.5rem} .cmp-arrow svg{width:2.6rem;height:1.3rem;display:block} .cmp-arrow span{ font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em; font-size:.58rem;white-space:nowrap;color:var(--ink-mute)} @media (max-width:760px){ .compare-pair{grid-template-columns:1fr;gap:.9rem} .cmp-arrow{padding-top:0;flex-direction:row;gap:.5rem} .cmp-arrow svg{transform:rotate(90deg);width:1.6rem;height:1.6rem} } /* A touch more type across the site: the body was 18px against a 19-20px root and this audience reads it on a phone in a henhouse. */ body{font-size:19px} body p{font-size:1rem;line-height:1.55} .stack li,.faq p,.drop-body p{font-size:1rem} .compare-note{font-size:1.06rem} @media (max-width:560px){ body{font-size:18px} body p{font-size:.98rem} } /* The captions are sentences, not labels: the section's uppercase treatment was making them a wall of capitals. */ .cmp figcaption{ text-transform:none;letter-spacing:0;font-family:var(--body); font-size:.94rem;line-height:1.45;font-weight:400} /* ================================================================== Offer block, brought into line with the Frank build. Angus carried no .trustline rule at all, so "Pay once - Yours forever" fell back to body copy: 16px, sentence case, left aligned. Frank sets it as a small uppercase caption, centred under the button. The two pills also disagreed on width (460 against 273) and both sat left, so the column read as ragged rather than stacked. ================================================================== */ .trustline{ font-family:var(--ui,"Oswald",sans-serif); text-transform:uppercase;letter-spacing:.16em; font-size:.64rem;color:var(--ink-mute,var(--steel)); text-align:center;margin:.65rem auto 0;display:block;width:100%} /* One column, everything centred on the same axis, the two pills the same width as the button above them. */ .offer-detail .btn-row,.buy-panel .btn-row{justify-content:center} .offer-detail .offer-seal,.offer-detail .proofpill, .buy-panel .offer-seal,.buy-panel .proofpill{ display:flex;width:100%;max-width:100%; margin-left:auto;margin-right:auto;justify-content:flex-start; box-sizing:border-box} .offer-detail .proofpill,.buy-panel .proofpill{margin-top:.55rem} .offer-detail .offer-seal,.buy-panel .offer-seal{margin-top:.7rem} /* The two pills sit in the same column as the button, so they take the same width. Scoped by the buy section rather than by a wrapper the markup does not actually have. */ #buy .proofpill,#buy .offer-seal,#buy .seal-badge{ display:flex;width:100%;max-width:100%;box-sizing:border-box; margin-left:auto;margin-right:auto;justify-content:flex-start;align-self:stretch} #buy .proofpill{margin-top:.55rem} #buy .offer-seal{margin-top:.7rem} /* ------------------------------------------------------------------ The audiobook row. It is not part of the $27 like the three books, it is the $9 add-on offered at checkout, so it takes a dashed rule and its price reads "$9 at checkout" rather than a struck price and a Free tag. The tick is hollow for the same reason: this one is available, not already included. ------------------------------------------------------------------ */ .stack li.addon-item{border-bottom-style:dashed} .stack li.addon-item::before{ background-color:transparent; border:2px solid var(--free-green,#3A6B3C); background-image:none} .stack li.addon-item b{color:var(--ink)} .price.addon{ display:inline-flex;align-items:baseline;gap:.3rem;white-space:nowrap; color:var(--ink-soft)} .price.addon i{ font-style:normal;font-family:var(--ui,inherit); text-transform:uppercase;letter-spacing:.08em; font-size:.55rem;opacity:.8} @media (max-width:560px){ .price.addon i{font-size:.5rem} } /* ------------------------------------------------------------------ The package shot: the three books, a plus, then the audiobook on a phone. Stacked in the left column so the reader sees the whole thing they are buying before they reach the price. ------------------------------------------------------------------ */ .buy-shot{display:flex;flex-direction:column;align-items:center;gap:.2rem} .buy-shot .shot{margin:0;width:100%} .pack-plus{ font-family:var(--ui,"Oswald",sans-serif);font-weight:700; font-size:1.9rem;line-height:1;color:var(--free-green,#3A6B3C); opacity:.85;margin:.1rem 0} .shot-audio{max-width:12rem;margin-inline:auto} .shot-audio img{ width:100%;height:auto;display:block; filter:drop-shadow(0 4px 14px rgba(21,17,11,.28))} .pack-note{ margin:.55rem 0 0;text-align:center;max-width:26ch; font-size:.86rem;line-height:1.35;color:var(--ink-soft)} .pack-note b{color:var(--ink)} @media (max-width:900px){ .shot-audio{max-width:9.5rem} .pack-plus{font-size:1.6rem} } @media (max-width:560px){ .shot-audio{max-width:8rem} .pack-plus{font-size:1.4rem;margin:.05rem 0} .pack-note{font-size:.82rem} } /* ---------- guarantee seal: larger, with a soft glow ---------- This overrides the original "no glow, no shine" insignia above, at the owner's request. The halo is the seal's own accent rather than a generic white shine, so it reads as emphasis and not decoration. It breathes slowly instead of flashing, and it holds still for anyone whose system asks for reduced motion. max-width is capped against the container so the larger badge can never overflow the narrow checkout column. */ .seal-badge{ gap:1rem;padding:1rem 1.35rem; max-width:min(34rem,100%); border-radius:4px; animation:sealGlow 3.4s ease-in-out infinite; } .seal-shield{width:2.9rem;height:3.5rem} .seal-text b{font-size:1.06rem} .seal-text > span{font-size:.88rem;margin-top:.3rem} @keyframes sealGlow{ 0%,100%{box-shadow:0 0 7px rgba(122,31,14,.20)} 50% {box-shadow:0 0 20px rgba(122,31,14,.44),0 0 36px rgba(122,31,14,.14)} } @media (prefers-reduced-motion:reduce){ .seal-badge{animation:none;box-shadow:0 0 14px rgba(122,31,14,.30)} } @media (max-width:560px){ .seal-badge{gap:.75rem;padding:.8rem 1rem} .seal-shield{width:2.35rem;height:2.85rem} .seal-text b{font-size:.95rem} .seal-text > span{font-size:.8rem} }