of /privacy + /accessibility only, never the waitlist) gives these long documents a proper reading layout: a wider column on desktop, comfortable dense-text prose, and a sub-head clearly larger than the body. */ .wl.wl--legal{ max-width:760px; } /* .wl.wl--legal beats the later .wl{max-width:560px} */ .wl--legal .legal p, .wl--legal .legal__list li{ font-size:18px; line-height:1.7; } .wl--legal .legal__h{ font-size:22px; line-height:1.25; margin-block:var(--space-4) var(--space-2); } .wl--legal .wl__title{ font-size:clamp(28px, 4.5vw, 38px); line-height:1.1; } .wl--legal .wl__sub{ font-size:19px; line-height:1.6; } @media (min-width:768px){ .wl.wl--legal{ padding-block:var(--space-6); } .wl--legal .wl__card{ padding:var(--space-6) var(--space-6); } } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.05; margin:0; } p{ margin:0 0 var(--space-2); } strong{ font-weight:700; } /* ---------- layout ---------- */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-3); } .narrow{ max-width:var(--container-narrow); } .section{ padding-block:var(--section-pad-y); } .section--paper{ background:var(--paper); } .section--warm{ background:var(--paper-warm); } .section--ink{ background:var(--ink); color:var(--paper); } .section--ink .muted{ color:var(--mist); } .center{ text-align:center; } .eyebrow{ font-size:var(--t-tiny); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--space-2); } /* on dark sections the #333 muted fails contrast; use the light mist instead */ .section--ink .eyebrow{ color:var(--mist); } .muted{ color:var(--muted); } .lead{ font-size:var(--t-lead); line-height:1.5; color:var(--ink-soft); } .hr{ height:1px; background:var(--hairline); border:0; margin-block:var(--space-5); } /* ---------- buttons ---------- */ .btn{ display:inline-block; background:var(--ink); color:var(--paper); font-family:var(--font-body); font-size:var(--t-small); font-weight:500; letter-spacing:.02em; padding:15px 30px; border:1px solid var(--ink); border-radius:var(--radius-btn); cursor:pointer; transition:background .15s ease,color .15s ease; text-align:center; } .btn:hover{ background:var(--paper); color:var(--ink); } .btn--lg{ font-size:18px; padding:18px 44px; } .section--ink .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); } .section--ink .btn:hover{ background:transparent; color:var(--paper); } /* the footer is espresso (dark) but not a .section--ink, so its newsletter submit would render as the espresso-filled base .btn on an espresso background and not read as a button. Give it the same dark-section treatment (paper fill). */ .footer .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); } .footer .btn:hover{ background:transparent; color:var(--paper); } .btn-note{ display:block; margin-top:var(--space-2); font-size:var(--t-small); color:var(--muted); } /* ---------- top nav (sticky, site-wide) ---------- */ /* DESKTOP/TABLET (>=768px): a clean bar with the brand on the right, the links inline, and the buy CTA at the far (left) side. Solid paper surface; a hairline border plus a soft shadow that fades in once the page is scrolled (.nav--scrolled, set in JS). */ .nav{ position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--hairline); transition:box-shadow .2s ease; } .nav--scrolled{ box-shadow:0 2px 14px var(--shadow-07); } .nav__inner{ display:flex; align-items:center; gap:var(--space-3); min-height:62px; } .nav__brand{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.01em; color:var(--ink); unicode-bidi:isolate; flex:0 0 auto; } .nav__links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; flex:1 1 auto; } .nav__link{ display:inline-flex; align-items:center; font-size:var(--t-small); font-weight:600; color:var(--ink-soft); padding:8px 14px; border-radius:8px; transition:color .15s ease, background-color .15s ease; } .nav__link:hover{ color:var(--ink); background:color-mix(in srgb,var(--ochre) 12%,transparent); } .nav__actions{ display:flex; align-items:center; gap:var(--space-2); flex:0 0 auto; } .nav__cta{ font-size:var(--t-small); } .nav__cta.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; line-height:1; white-space:nowrap; background:var(--cta); color:var(--cta-ink); border-color:var(--cta); } .nav__cta.btn:hover{ background:var(--cta-hover); border-color:var(--cta-hover); color:var(--cta-ink); } .nav__toggle{ display:none; } /* desktop: links are inline, no hamburger */ .nav__scrim{ display:none; } /* Desktop: the drawer wrapper is transparent (the ul renders inline in the bar) and the drawer-only chrome (branded header, group labels, bottom CTA block) is hidden. */ .nav__drawer{ display:contents; } .nav__drawer-head, .nav__drawer-cta, .nav__group{ display:none; } /* Guides submenu: the 3 pillar hubs hang off the מדריכים item. Desktop = a dropdown that opens on hover AND keyboard focus-within (so Tab reveals it); the מדריכים link itself still navigates to /blog. Mobile rules below make it an in-flow indented group. */ .nav__item--sub{ position:relative; } /* Desktop: the parent wrapper is transparent (the מדריכים link renders inline exactly as before) and the mobile accordion chevron is hidden, so the desktop hover/ focus-within dropdown is completely unchanged. */ .nav__parent{ display:contents; } .nav__subtoggle{ display:none; } .nav__submenu{ list-style:none; margin:0; padding:6px; position:absolute; top:100%; inset-inline-start:0; min-width:210px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:0 14px 30px var(--shadow-14); display:flex; flex-direction:column; gap:2px; z-index:61; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease, visibility .15s ease; } .nav__item--sub:hover .nav__submenu, .nav__item--sub:focus-within .nav__submenu{ opacity:1; visibility:visible; transform:translateY(0); } .nav__sublink{ display:block; padding:8px 14px; border-radius:8px; font-size:var(--t-small); font-weight:600; color:var(--ink-soft); white-space:nowrap; } .nav__sublink:hover, .nav__sublink:focus-visible{ color:var(--ink); background:color-mix(in srgb,var(--ochre) 12%,transparent); } /* MOBILE (<768px): a hamburger opens a full-height branded slide-in DRAWER from the inline-start (RIGHT in he/rtl): espresso brand header, grouped links, the guides accordion (starts collapsed), and a bottom conversion block. While open, page scroll is locked (html.nav-open) so it behaves like a modern app drawer. */ @media (max-width:767px){ html.nav-open{ overflow:hidden; } .nav__inner{ gap:var(--space-2); min-height:56px; } .nav__brand{ font-size:20px; } /* On LTR markets the brand is the row's only shrinkable item: a long market wordmark ("KI für Späteinsteiger") must ellipsize rather than push the CTA past the viewport edge (the 320/360 sideways-scroll bug). Scoped to html[dir=ltr] so the IL row keeps its exact historical rendering at every width (adversarially caught: unscoped, the pre-existing 11px IL overflow at 320 made the Hebrew brand the shrink victim). */ html[dir=ltr] .nav__brand{ min-inline-size:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:1px solid var(--hairline); background:var(--paper); border-radius:10px; color:var(--ink); cursor:pointer; flex:0 0 auto; } .nav__toggle[aria-expanded="true"]{ background:color-mix(in srgb,var(--ochre) 14%,transparent); border-color:var(--ochre); } .nav__bars, .nav__bars::before, .nav__bars::after{ content:""; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .nav__bars{ position:relative; } .nav__bars::before{ position:absolute; left:0; top:-6px; } .nav__bars::after{ position:absolute; left:0; top:6px; } .nav-open .nav__bars{ background:transparent; } /* X when open */ .nav-open .nav__bars::before{ transform:translateY(6px) rotate(45deg); } .nav-open .nav__bars::after{ transform:translateY(-6px) rotate(-45deg); } /* RTL header order: hamburger at the inline-start (RIGHT), then brand; push the CTA to the inline-end (LEFT) so the bar reads as a balanced RTL row. */ .nav__actions{ margin-inline-start:auto; } /* compact CTA so brand + CTA + hamburger never overflow at 360px */ .nav__cta.btn{ padding:9px 14px; font-size:var(--t-tiny); } /* The drawer: fixed full-height panel at the RIGHT edge, slides in from off-screen. It lives inside the sticky .nav (its stacking context, z:60), while the scrim is a SIBLING at z:55 — so the drawer paints above the dimmed page. Off-screen state uses translateX(110%) (physically rightward = off the RTL start edge) + visibility so it is untabbable while closed. */ .nav__drawer{ display:flex; flex-direction:column; position:fixed; inset-block:0; inset-inline-start:0; inline-size:min(84vw,340px); background:var(--bg); box-shadow:0 0 46px var(--shadow-22); transform:translateX(110%); visibility:hidden; transition:transform .28s ease, visibility .28s; } .nav-open .nav__drawer{ transform:none; visibility:visible; } /* The LTR pair (DE + future Latin-script markets): the drawer sits at the inline-start = LEFT edge, so off-screen is physically LEFTWARD. The open rule repeats html[dir=ltr] so it out-ranks the hide rule (specificity). */ html[dir=ltr] .nav__drawer{ transform:translateX(-110%); } html[dir=ltr].nav-open .nav__drawer{ transform:none; } @media (prefers-reduced-motion: reduce){ .nav__drawer{ transition:none; } } /* branded drawer header: espresso band with the wordmark + a real close button */ .nav__drawer-head{ display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; padding-block:12px; padding-inline:12px var(--space-3); background:var(--footer-bg); color:var(--footer-ink); } .nav__drawer-brand{ font-family:var(--font-display); font-weight:700; font-size:20px; unicode-bidi:isolate; } .nav__close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--radius-btn); background:transparent; color:var(--footer-ink); cursor:pointer; } .nav__close:focus-visible{ outline:2px solid var(--cta); outline-offset:2px; } /* the scrollable link list */ .nav__links{ display:flex; flex-direction:column; align-items:stretch; gap:0; flex:1 1 auto; overflow-y:auto; padding-block:2px var(--space-2); } .nav__group{ display:block; padding:16px var(--space-3) 6px; font-size:var(--t-tiny); font-weight:800; letter-spacing:.14em; color:var(--brand-strong); } .nav__link{ min-height:50px; display:flex; align-items:center; padding:0 var(--space-3); font-size:var(--t-body); font-weight:600; color:var(--ink); border-radius:0; border-bottom:1px solid color-mix(in srgb,var(--hairline) 45%,transparent); } .nav__link:hover, .nav__link:active{ color:var(--ink); background:color-mix(in srgb,var(--ochre) 10%,transparent); } /* Mobile accordion: מדריכים is the PARENT row (its link still goes to /blog), with a chevron button that expands/collapses the submenu. It STARTS COLLAPSED (the owner finding): the markup ships aria-expanded="false" and the :has() rule below keeps the submenu hidden until toggled. The 3 hubs are visually SUBORDINATE: indented, smaller + lighter type, a tinted group background, and a start-side connector bar. */ .nav__parent{ display:flex; align-items:stretch; border-bottom:1px solid color-mix(in srgb,var(--hairline) 45%,transparent); } .nav__parent .nav__link{ flex:1 1 auto; border-bottom:none; } .nav__subtoggle{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; inline-size:56px; min-height:50px; padding:0; border:none; background:transparent; color:var(--muted); cursor:pointer; } /* chevron glyph: physical borders so the rotation is direction-stable in RTL. Collapsed = points DOWN ("more below, tap to expand"); expanded = points UP. */ .nav__chev{ display:block; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(225deg); margin-top:3px; transition:transform .2s ease; } .nav__subtoggle[aria-expanded="false"] .nav__chev{ transform:rotate(45deg); margin-top:-3px; } .nav__item--sub:has(.nav__subtoggle[aria-expanded="false"]) .nav__submenu{ display:none; } .nav__submenu{ position:static; opacity:1; visibility:visible; transform:none; display:flex; box-shadow:none; border:none; border-radius:0; padding:0; min-width:0; inline-size:auto; background:color-mix(in srgb,var(--ochre) 7%,transparent); } .nav__sublink{ min-height:48px; display:flex; align-items:center; white-space:normal; padding-inline-start:var(--space-6); padding-inline-end:var(--space-3); border-radius:0; font-size:var(--t-small); font-weight:500; color:var(--muted); border-inline-start:3px solid color-mix(in srgb,var(--ochre) 40%,transparent); border-bottom:1px solid color-mix(in srgb,var(--hairline) 45%,transparent); } .nav__sublink:last-child{ border-bottom:none; } .nav__sublink:hover, .nav__sublink:active{ color:var(--ink); background:color-mix(in srgb,var(--ochre) 13%,transparent); } /* bottom conversion block: the drawer always ends on the two funnel actions */ .nav__drawer-cta{ display:grid; gap:10px; flex:0 0 auto; padding:var(--space-3); border-top:1px solid var(--line); background:var(--surface); } .nav__drawer-cta .btn{ display:block; text-align:center; } /* scrim: dims the page behind the drawer + closes on tap (fade in/out) */ .nav__scrim{ position:fixed; inset:0; z-index:55; background:var(--scrim); display:block; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; } .nav-open .nav__scrim{ opacity:1; visibility:visible; } } /* ---------- hero ---------- */ .hero{ padding-block:var(--space-7) var(--space-6); text-align:center; } .hero__title{ font-size:var(--t-hero); font-weight:700; margin-bottom:var(--space-2); } .hero__subtitle{ font-size:var(--t-h2); font-weight:400; color:var(--ink-soft); margin-bottom:var(--space-3); } .hero__promise{ font-size:var(--t-lead); line-height:1.55; max-width:620px; margin:0 auto var(--space-4); color:var(--ink-soft); } .hero__cover{ max-width:300px; margin:var(--space-5) auto 0; } .hero__caption{ font-size:var(--t-small); color:var(--muted); margin-top:var(--space-2); } /* DE cover placeholder (Deliverable F): reserves the book-cover space at the same 2:3 aspect until a German cover asset lands under /static/img/de/ — no baked Hebrew shown to a German visitor, no layout shift at any width. */ .cover-ph{ aspect-ratio:848/1272; width:240px; max-width:100%; margin:var(--space-5) auto 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; padding:1.4rem; border-radius:var(--radius-card); background:var(--bg-tint); border:1px solid var(--line); color:var(--ink); text-align:center; box-shadow:0 12px 30px var(--shadow-warm-13); } .cover-ph__brand{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.2; } .cover-ph__sub{ color:var(--muted); font-size:.95rem; } .cover-ph--sm{ width:150px; margin:0 auto; padding:1rem; } .checkout-interim{ margin:var(--space-4) 0; text-align:center; } .checkout-interim__note{ color:var(--mist); margin-bottom:var(--space-3); } @media (max-width:768px){ .cover-ph{ width:150px; } } /* ---------- pull quote ---------- */ .quote{ text-align:center; } .quote__text{ font-family:var(--font-display); font-weight:400; font-size:var(--t-h1); line-height:1.25; } .quote__attrib{ display:block; margin-top:var(--space-3); font-family:var(--font-body); font-size:var(--t-small); color:var(--mist); letter-spacing:.12em; text-transform:uppercase; } /* ---------- section heading ---------- */ .s-head{ text-align:center; margin-bottom:var(--space-5); } .s-head__title{ font-size:var(--t-h1); font-weight:500; margin-bottom:var(--space-2); } .s-head__intro{ font-size:var(--t-lead); color:var(--ink-soft); max-width:600px; margin-inline:auto; } /* ---------- wins ---------- */ .wins{ display:grid; gap:var(--space-5); max-width:var(--container-narrow); margin-inline:auto; } .win{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:start; } .win__num{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:500; color:var(--mist); line-height:1; } .win__title{ font-size:24px; font-weight:500; margin-bottom:var(--space-1); } .win__body{ color:var(--ink-soft); margin-bottom:var(--space-2); } .win__example{ border-inline-start:2px solid var(--ink); padding-inline-start:var(--space-2); font-size:var(--t-small); color:var(--ink-soft); background:var(--paper); padding-block:var(--space-1); } /* ---------- choose your path (book / courses / free taste) ---------- */ .paths{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--space-3); max-width:var(--container); margin-inline:auto; } .path{ display:flex; flex-direction:column; gap:var(--space-1); border:1px solid var(--hairline); background:var(--paper); padding:var(--space-4); } .path--book{ border-color:var(--ochre); box-shadow:0 1px 0 var(--ochre) inset; } .path__badge{ align-self:flex-start; font-size:var(--t-tiny); font-weight:700; color:var(--badge-ink); background:var(--badge-bg); border-radius:999px; padding:3px 12px; margin-bottom:var(--space-1); } .path__badge--alt{ color:var(--ochre-dark); background:var(--badge-bg); border:1px solid var(--brand-wash-30); } .path__badge--free{ color:var(--ink); background:var(--paper-warm); border:1px solid var(--hairline); } .path__title{ font-family:var(--font-display); font-size:24px; font-weight:500; margin:0; } .path__text{ color:var(--ink-soft); line-height:1.6; margin:0; } .path__price{ font-size:var(--t-small); color:var(--ink-soft); margin:var(--space-1) 0 var(--space-2); } .path__cta{ display:block; width:100%; margin-top:auto; } /* ---------- inside the book ---------- */ .inside{ max-width:760px; margin-inline:auto; } .inside__cover{ max-width:320px; margin-inline:auto; } .chapters{ list-style:none; margin:0; padding:0; } .chapters li{ padding-block:var(--space-2); border-bottom:1px solid var(--hairline); display:flex; gap:var(--space-2); } .chapters li:last-child{ border-bottom:0; } .chapters .num{ color:var(--mist); font-family:var(--font-display); min-width:1.6em; } /* ---------- praise ---------- */ .praise{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); } .praise__card{ border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-4); background:var(--paper); } .praise__quote{ font-family:var(--font-display); font-size:var(--t-lead); line-height:1.35; margin-bottom:var(--space-3); } .praise__by{ font-size:var(--t-small); color:var(--muted); } /* ---------- author ---------- */ .author{ max-width:var(--container-narrow); margin-inline:auto; text-align:center; } .author__body{ font-size:var(--t-lead); line-height:1.6; color:var(--ink-soft); } .author__sign{ font-family:var(--font-display); font-size:var(--t-h2); margin-top:var(--space-3); } /* ---------- buy ---------- */ .buy{ text-align:center; max-width:var(--container-narrow); margin-inline:auto; } .buy__price{ font-family:var(--font-display); font-size:var(--t-hero); font-weight:700; margin-block:var(--space-2); } .buy__includes{ list-style:none; padding:0; margin:var(--space-4) auto; display:inline-grid; gap:var(--space-1); text-align:start; } .buy__includes li::before{ content:"✓"; margin-inline-end:var(--space-1); } #paypal-buttons{ max-width:360px; margin:var(--space-4) auto 0; } .buy__trust{ font-size:var(--t-small); color:var(--mist); margin-top:var(--space-3); } /* ---------- footer + newsletter ---------- */ .footer{ background:var(--footer-bg); color:var(--footer-ink); padding-block:var(--space-6); } .footer .muted{ color:var(--mist); } .newsletter{ max-width:480px; margin-inline:auto; text-align:center; } .newsletter__form{ display:flex; gap:var(--space-1); margin-top:var(--space-3); } .newsletter__form input{ flex:1; min-width:0; padding:14px 16px; border:1px solid var(--mist); background:transparent; color:var(--paper); font-family:var(--font-body); font-size:16px; border-radius:var(--radius-input); } .newsletter__form input::placeholder{ color:var(--mist); } .newsletter__msg{ min-height:1.2em; margin-top:var(--space-2); font-size:var(--t-small); color:var(--mist); } .footer__rights{ text-align:center; margin-top:var(--space-5); font-size:var(--t-tiny); color:var(--mist); } /* ---------- image placeholder (empty slots) ---------- */ .ph{ display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; background:var(--paper); border:1px solid var(--hairline); color:var(--mist); font-size:var(--t-small); } /* ---------- checkout modal (site-controlled close over PayPal) ---------- */ .checkout-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--space-3); } .checkout-modal[hidden]{ display:none; } .checkout-modal__backdrop{ position:absolute; inset:0; background:var(--scrim-strong); } .checkout-modal__panel{ position:relative; z-index:1; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; background:var(--paper); color:var(--ink); border-radius:var(--radius-card); padding:22px 22px 20px; box-shadow:0 24px 70px var(--shadow-40); text-align:center; } .checkout-modal__close{ position:absolute; top:12px; inset-inline-end:12px; inset-inline-start:auto; width:40px; height:40px; padding:0; border:none; border-radius:50%; background:var(--paper-warm); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .checkout-modal__close:hover{ background:var(--hairline); } .checkout-modal__title{ font-family:var(--font-display); font-size:var(--t-lead); margin:0 0 4px; } .checkout-modal__price{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:700; margin-bottom:14px; } .checkout-modal__trust{ margin-top:var(--space-3); font-size:var(--t-small); color:var(--muted); } body.modal-open{ overflow:hidden; } /* ---------- card-first checkout (Branch B), tuned for older users ---------- */ .co{ text-align:start; } .co .checkout-modal__title, .co .checkout-modal__price{ text-align:center; } .co__label{ display:block; font-weight:700; font-size:var(--t-small); margin-bottom:6px; } .co__input{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:18px; padding:16px 14px; min-height:56px; border:1.5px solid var(--hairline); border-radius:var(--radius-input); background:var(--paper); color:var(--ink); } .co__input:focus{ outline:none; border-color:var(--ochre); box-shadow:0 0 0 3px var(--ring); } .co__note{ font-size:var(--t-tiny); color:var(--muted); margin:6px 0 14px; } .co__lead{ text-align:center; font-family:var(--font-display); font-weight:700; font-size:var(--t-lead); margin:0 0 6px; } .co__help{ text-align:center; font-size:var(--t-small); color:var(--ink-soft); margin:0 0 10px; } .co__help--card{ font-weight:600; color:var(--ink); } .co__btnwrap{ min-height:50px; margin-bottom:12px; } .co__or{ display:flex; align-items:center; gap:12px; color:var(--mist); font-size:var(--t-small); margin:var(--space-2) 0; } .co__or::before, .co__or::after{ content:""; height:1px; background:var(--hairline); flex:1; } .co__msg{ color:var(--error); font-size:var(--t-small); min-height:1.2em; margin:8px 0 0; text-align:center; } .co__msg:empty{ min-height:0; margin:0; } /* reclaim the reserved error space when there is no message */ .co__trust{ margin-top:10px; border-top:1px solid var(--hairline); padding-top:10px; } .co__trust-line{ font-size:var(--t-small); color:var(--ink-soft); margin:0 0 8px; text-align:center; } /* Phase B: security badge + refund guarantee, encapsulated AT the pay button. */ .co__secure{ font-size:var(--t-small); color:var(--ink); font-weight:600; margin:0 0 6px; text-align:center; } .co__guarantee{ display:flex; align-items:flex-start; gap:6px; justify-content:center; text-align:center; font-size:var(--t-small); color:var(--ink-soft); background:var(--paper-warm); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:7px 10px; margin:0 0 8px; } .co__guarantee-ic{ flex:none; font-weight:700; color:var(--success); } /* Human trust: a real author stands behind the book, routing questions to /contact (never a phone number). Voice is the storefront's singular. */ .co__author{ font-size:var(--t-small); color:var(--ink-soft); margin:0 0 8px; text-align:center; line-height:1.5; } .co__author-link{ color:var(--brand); font-weight:600; text-decoration:underline; } /* Card-brand acceptance marks (decorative trust cues, self-hosted SVG, not buttons). */ .co__cards{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; } .co__card{ height:24px; width:auto; display:block; } /* Optional checkout order bump: a clearly separated, opt-in box shown before the pay button. Large tap target + brand outline so it reads as an add-on. */ .co-bump{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:0 0 12px; background:var(--paper-warm); border:2px solid var(--ochre); border-radius:var(--radius-card); padding:12px 14px; text-align:start; } .co-bump__check{ flex:none; width:22px; height:22px; margin-top:2px; accent-color:var(--ochre); cursor:pointer; } .co-bump__title{ display:block; font-weight:700; color:var(--ink); font-size:var(--t-small); line-height:1.4; } .co-bump__price{ color:var(--ochre); white-space:nowrap; font-weight:800; } .co-bump__benefit{ display:block; color:var(--ink-soft); font-size:var(--t-tiny); margin-top:3px; } /* Post-purchase one-time upsell page (offers the paid course at a first-buyer discount, before the thank-you). Reuses the .dl card + .co checkout chrome. */ .up{ text-align:center; } .up__eyebrow{ color:var(--ochre); font-weight:700; margin:14px 0 4px; font-size:var(--t-small); } .up__course{ font-size:var(--t-h2); margin:0 0 4px; color:var(--ink); } .up__sub{ color:var(--ink-soft); margin:0 0 10px; } .up__pitch{ color:var(--ink); margin:0 0 14px; line-height:1.6; } .up__price{ margin:0 0 16px; font-size:var(--t-h3); } .up__was{ color:var(--ink-soft); font-weight:600; } .up__now{ color:var(--ochre); font-weight:800; } .up__once{ display:inline-block; font-size:var(--t-tiny); color:var(--ink-soft); font-weight:600; } .up__decline{ display:inline-block; margin:14px 0 6px; color:var(--ink-soft); text-decoration:underline; font-size:var(--t-small); } .up__trust{ color:var(--ink-soft); font-size:var(--t-tiny); margin:6px 0 0; } /* FBAV redirect button (Phase C): the single pay button shown inside in-app webviews. */ .co__paybtn{ width:100%; margin-top:4px; } .co__privacy, .co__contact{ text-align:center; font-size:var(--t-tiny); color:var(--muted); margin:var(--space-2) 0 0; } .co__privacy a, .co__contact a{ text-decoration:underline; } .co__contact{ font-size:var(--t-small); } .co__processing{ position:absolute; inset:0; z-index:5; background:var(--overlay-93); border-radius:var(--radius-card); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; font-size:var(--t-lead); color:var(--ink); } .co__processing[hidden]{ display:none; } .co__spinner{ width:44px; height:44px; border:4px solid var(--hairline); border-top-color:var(--ochre); border-radius:50%; animation:co-spin .9s linear infinite; } @keyframes co-spin{ to{ transform:rotate(360deg); } } /* ---------- download / unboxing page ---------- */ .dl{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-4) var(--space-3); background:linear-gradient(180deg,var(--paper-warm),var(--grad-2)); } .dl__card{ width:100%; max-width:560px; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-6) var(--space-4) var(--space-5); box-shadow:0 30px 80px var(--shadow-warm-13); text-align:center; } .dl__badge{ width:66px; height:66px; margin:0 auto var(--space-3); border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:32px; line-height:1; } .dl__badge--soft{ background:var(--paper-warm); color:var(--ink); border:1px solid var(--hairline); } .dl__title{ font-family:var(--font-display); font-size:var(--t-h1); line-height:1.12; margin:0 0 var(--space-2); } .dl__lead{ font-size:var(--t-lead); line-height:1.55; color:var(--ink-soft); max-width:44ch; margin:0 auto var(--space-5); } .dl__items{ display:grid; gap:var(--space-2); text-align:start; } .dl__item{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--hairline); border-radius:var(--radius-card); background:var(--paper-warm); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .dl__item:hover{ border-color:var(--ink); transform:translateY(-1px); box-shadow:0 10px 24px var(--shadow-warm-10); } .dl__meta{ flex:1; min-width:0; } .dl__label{ display:block; font-weight:700; font-size:var(--t-body); margin-bottom:2px; } .dl__desc{ display:block; font-size:var(--t-small); color:var(--ink-soft); } .dl__go{ flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:22px; } .dl__note{ margin:var(--space-5) auto 0; font-size:var(--t-small); color:var(--ink-soft); max-width:46ch; } .dl__tip{ margin:var(--space-2) auto 0; font-size:var(--t-small); color:var(--mist); max-width:46ch; } .dl__help{ margin-top:var(--space-4); font-size:var(--t-small); color:var(--ink-soft); } .dl__home{ display:inline-block; margin-top:var(--space-4); font-size:var(--t-small); color:var(--mist); } /* thank-you order bump: a free-course card BELOW the download card (peak intent), never above the buyer's files. Reuses the .site-theme surface + radius tokens. */ .dl__next{ width:100%; max-width:560px; margin:var(--space-4) auto 0; box-sizing:border-box; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--space-5) var(--space-4); text-align:center; } .dl__next-eyebrow{ font-size:var(--t-small); font-weight:700; color:var(--brand-strong); margin:0 0 var(--space-1); } .dl__next-h{ font-family:var(--font-display); font-size:var(--t-lead); color:var(--ink); margin:0 0 var(--space-2); } .dl__next-pitch{ color:var(--muted); line-height:1.6; margin:0 0 var(--space-3); } .dl__next-all{ margin:var(--space-3) 0 0; font-size:var(--t-small); } .dl__next-all a{ color:var(--brand-strong); text-decoration:underline; } /* tablet + desktop: a wider, roomier card with the two downloads as side-by-side tiles (arrow on top, label, description), so it reads as an intentional desktop layout rather than a phone card floating on a big screen. */ @media (min-width:769px){ .dl{ padding:var(--space-6); } .dl__card{ max-width:640px; padding:var(--space-7) var(--space-6) var(--space-6); border-radius:var(--radius-card); } .dl__badge{ width:74px; height:74px; font-size:36px; } .dl__items{ grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-2); } .dl__item{ flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); padding:var(--space-4) var(--space-3); } .dl__go{ order:-1; } .dl__note{ margin-top:var(--space-6); } } /* ---------- responsive ---------- */ @media (max-width:768px){ .praise{ grid-template-columns:1fr; } .hero{ padding-block:var(--space-4) var(--space-5); } .btn{ display:block; width:100%; } /* (sticky-nav mobile rules live in their own @media (max-width:767px) block by the nav styles, so >=768px gets the inline desktop nav.) */ .newsletter__form{ flex-direction:column; } /* Top-align on mobile so the priority content (price, email, button, security, guarantee, card logos) sits at the TOP of the screen and is visible without scrolling, including inside the Facebook in-app browser. A bottom sheet pinned the trust cues to the screen bottom (below the FBAV fold). */ .checkout-modal{ padding:8px 8px 0; align-items:flex-start; } .checkout-modal__panel{ max-width:none; border-radius:var(--radius-card); max-height:96vh; } .dl__card{ padding:var(--space-5) var(--space-3) var(--space-4); border-radius:var(--radius-card); } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } } /* ============ CRO sections (conversion landing) ============ */ /* hero strong headline */ .hero__headline{ font-size:var(--t-h1); line-height:1.12; max-width:18ch; margin-inline:auto; } /* CTA fill uses --ochre-dark so white label text clears WCAG AA 4.5:1 (plain --ochre was 3.49:1). Hover goes one shade darker. */ .btn--accent{ background:var(--cta); color:var(--cta-ink); border-color:var(--cta); } .btn--accent:hover{ background:var(--cta-hover); color:var(--cta-ink); border-color:var(--cta-hover); } .section--ink .btn--accent{ background:var(--cta); color:var(--cta-ink); border-color:var(--cta); } .section--ink .btn--accent:hover{ background:var(--cta-hover); color:var(--cta-ink); } /* pain / empathy */ .pain__text{ font-family:var(--font-display); font-size:var(--t-h2); line-height:1.4; text-align:center; color:var(--ink); } /* how it works (3 steps) */ .steps{ text-align:center; } .steps__list{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); } .step{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); color:var(--paper); } .step__num{ width:54px; height:54px; border-radius:50%; border:2px solid var(--ochre); color:var(--ochre); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:700; } .step__text{ font-size:var(--t-lead); } /* ============ reviews component (.rvw): compact, zero-JS, shared ============ One source for the landing, /book, /buybook and the course landing: the strongest reviews open near the price/CTA, the rest behind a native

disclosure. Mobile: stacked, scannable; desktop: 3-up grid. */ .reviews__star{ color:var(--star); } .rvw{ max-width:1040px; margin-inline:auto; } .rvw-wrap{ margin-top:var(--space-5); } .rvw-avg{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin:0 0 var(--space-3); font-size:var(--t-lead); color:var(--ink); } .rvw-avg__num{ font-family:var(--font-display); font-size:var(--t-h2); } .rvw-grid{ display:grid; gap:var(--space-2); grid-template-columns:1fr; } .review{ background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-3) var(--space-4); text-align:start; box-shadow:0 2px 8px var(--shadow-07); } .review__stars{ letter-spacing:2px; margin-bottom:var(--space-1); font-size:18px; color:var(--star); } .review__body{ font-size:var(--t-body); line-height:1.6; color:var(--ink); margin:0 0 var(--space-2); } .review__meta{ font-size:var(--t-small); color:var(--ink-soft); margin:0; } .review__name{ font-weight:700; } .rvw-more{ margin-top:var(--space-3); text-align:center; } .rvw-more__btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; box-sizing:border-box; padding:10px 22px; cursor:pointer; list-style:none; border:1.5px solid var(--brand); border-radius:var(--radius-btn); background:var(--brand-wash-08); color:var(--brand-strong); font-weight:700; font-size:var(--t-body); } .rvw-more__btn::-webkit-details-marker{ display:none; } .rvw-more__btn:hover{ background:var(--brand-wash-16); } .rvw-more__chev{ transition:transform .2s ease; } .rvw-more[open] .rvw-more__chev{ transform:rotate(180deg); } .rvw-more .rvw-grid--more{ margin-top:var(--space-3); text-align:start; } @media (min-width:768px){ .rvw-grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-3); } /* low-count grids center instead of pinning 1-2 cards to the inline-start */ .rvw-grid--n1{ grid-template-columns:minmax(0,520px); justify-content:center; } .rvw-grid--n2{ grid-template-columns:repeat(2,minmax(0,440px)); justify-content:center; } } @media (prefers-reduced-motion:reduce){ .rvw-more__chev{ transition:none; } } /* review_carousel: zero-JS CSS scroll-snap, works mobile + desktop, FBAV-safe. One card per snap on a phone, three across on desktop. No JS = the deleted site.js carousel is NOT reintroduced. */ .rvw-carousel{ display:flex; gap:var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-2); scrollbar-width:thin; } .rvw-carousel__item{ flex:0 0 86%; max-width:340px; scroll-snap-align:center; } .rvw-carousel__item .review{ height:100%; } .rvw-carousel__hint{ text-align:center; color:var(--muted); font-size:var(--t-small); margin-top:var(--space-2); } @media (min-width:768px){ .rvw-carousel__item{ flex-basis:calc((100% - 2 * var(--space-3)) / 3); max-width:none; } .rvw-carousel__hint{ display:none; } } @media (prefers-reduced-motion:reduce){ .rvw-carousel{ scroll-behavior:auto; } } /* gift */ .gift{ text-align:center; } /* FAQ accordion */ .faq{ max-width:640px; margin-inline:auto; } .faq__item{ border-bottom:1px solid var(--hairline); padding:var(--space-2) 0; } .faq__q{ font-family:var(--font-display); font-size:var(--t-lead); cursor:pointer; list-style:none; } .faq__q::-webkit-details-marker{ display:none; } .faq__q::after{ content:"+"; float:inline-end; color:var(--ochre); font-weight:700; } .faq__item[open] .faq__q::after{ content:"\2212"; } .faq__a{ margin:var(--space-2) 0 0; color:var(--ink-soft); line-height:1.55; } /* buy urgency + consent */ /* On light sections the urgency note uses brand-strong (6.9:1 on ivory). The buy section is .section--ink (espresso) where brand text would only hit 3.25:1, so flip to honey there (7.4:1 on espresso) keeping the warm accent and clearing WCAG AA. */ .buy__urgency{ font-size:var(--t-small); color:var(--brand-strong); font-weight:700; margin-bottom:var(--space-3); } .section--ink .buy__urgency{ color:var(--cta); } .consent{ display:flex; align-items:flex-start; gap:10px; font-size:var(--t-small); color:var(--mist); max-width:46ch; margin:var(--space-2) auto 0; text-align:start; line-height:1.45; } .consent input[type="checkbox"]{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; } .consent span{ flex:1 1 auto; min-width:0; } /* the waitlist consent fills the form width and reads right-to-left */ .wl__form .consent{ max-width:none; margin-top:0; color:var(--ink-soft); } .footer__links{ margin-top:var(--space-3); } .footer__links a{ color:var(--mist); } /* waitlist page */ .wl{ min-height:60vh; max-width:560px; margin-inline:auto; padding:var(--space-5) var(--space-3); } .wl__card{ background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-5) var(--space-4); margin-bottom:var(--space-4); box-shadow:0 14px 40px var(--shadow-warm-08); } .wl__title{ font-family:var(--font-display); font-size:var(--t-h1); margin:0 0 var(--space-2); } .wl__title2{ font-family:var(--font-display); font-size:var(--t-h2); margin:0 0 var(--space-3); } .wl__sub{ font-size:var(--t-lead); color:var(--ink-soft); } .wl__teaser{ color:var(--ink-soft); } .wl__form{ display:grid; gap:var(--space-2); margin-top:var(--space-3); } .wl__form input:not([type="checkbox"]), .wl__form textarea{ width:100%; box-sizing:border-box; padding:13px 14px; border:1px solid var(--hairline); border-radius:var(--radius-input); font:inherit; font-size:16px; background:var(--paper-warm); } .wl__msg{ min-height:1.2em; font-size:var(--t-small); color:var(--ochre-dark); } .wl__back{ text-align:center; } .wl__back a{ color:var(--mist); font-size:var(--t-small); } .rating{ display:flex; gap:6px; font-size:30px; } .rating__star{ background:none; border:none; padding:0 2px; cursor:pointer; color:var(--star-empty); line-height:1; min-width:34px; min-height:34px; } .rating__star.on{ color:var(--star); } @media (max-width:768px){ .hero__headline{ font-size:var(--t-h2); } .steps__list{ grid-template-columns:1fr; gap:var(--space-3); } } .dl__version{ margin-top:var(--space-2); font-size:var(--t-tiny); color:var(--mist); } /* ============ organized site footer (RTL, multi-column) ============ */ .footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.6fr; gap:var(--space-5) var(--space-4); align-items:start; } .footer__name{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--paper); margin-bottom:var(--space-1); } .footer__tagline{ color:var(--mist); font-size:var(--t-small); line-height:1.5; margin:0 0 var(--space-2); max-width:34ch; } .footer__secure{ color:var(--mist); font-size:var(--t-tiny); margin:0; } .footer__col{ display:flex; flex-direction:column; } .footer__h{ font-family:var(--font-body); font-weight:700; font-size:var(--t-small); letter-spacing:.04em; color:var(--paper); margin:0 0 var(--space-2); } .footer__link{ color:var(--mist); font-size:var(--t-small); padding-block:6px; transition:color .15s ease; } .footer__link:hover{ color:var(--cta); text-decoration:underline; } .footer__news{ max-width:none; } .footer__news .newsletter__form{ margin-top:0; } .footer__news .consent{ color:var(--mist); margin-top:var(--space-2); max-width:none; } .footer__news .footer__note{ color:var(--mist); font-size:var(--t-small); margin-bottom:var(--space-2); } .footer .footer__rights{ border-top:1px solid var(--footer-line); padding-top:var(--space-3); margin-top:var(--space-5); } @media (max-width:768px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-3); } .footer__brand{ grid-column:1 / -1; } .footer__news{ grid-column:1 / -1; } } @media (max-width:430px){ .footer__grid{ grid-template-columns:1fr; } } /* ============ Facebook follow (footer social row + inline nudge) ============ */ .footer__social{ margin-top:var(--space-2); } .footer__social-link{ display:inline-flex; align-items:center; gap:8px; color:var(--mist); font-size:var(--t-small); padding-block:6px; transition:color .15s ease; } .footer__social-link:hover{ color:var(--cta); text-decoration:underline; } .fb-follow{ margin-top:var(--space-3); font-size:var(--t-small); color:var(--ink-soft); } .fb-follow__link{ display:inline-flex; align-items:center; gap:6px; color:var(--brand-strong); font-weight:700; text-decoration:underline; } .fb-follow__link:hover{ color:var(--brand); } .fb-icon{ flex:0 0 auto; vertical-align:middle; } /* ============ about / author page ============ */ .about{ text-align:center; } .about__avatar{ display:block; width:96px; height:96px; margin:0 auto var(--space-2); border-radius:50%; border:1px solid var(--line); background:var(--surface); } .about__byline{ font-size:var(--t-small); font-weight:700; color:var(--brand-strong); margin:0 0 var(--space-3); } .about__title{ font-family:var(--font-display); font-size:var(--t-h1); margin:0 0 var(--space-3); } .about__exp{ font-size:var(--t-lead); line-height:1.7; color:var(--ink); max-width:52ch; margin:0 auto var(--space-4); } .about__lead{ font-size:var(--t-lead); line-height:1.6; color:var(--ink-soft); max-width:46ch; margin-inline:auto; } .about__body{ font-size:var(--t-body); line-height:1.7; } .about__body p{ margin-bottom:var(--space-3); } .about__vh{ font-family:var(--font-display); font-size:var(--t-h2); margin:var(--space-5) 0 var(--space-2); } .about__values{ list-style:none; padding:0; margin:0 0 var(--space-4); display:grid; gap:var(--space-2); } .about__values li{ position:relative; padding-inline-start:30px; line-height:1.55; } .about__values li::before{ content:"✓"; position:absolute; inset-inline-start:0; top:0; color:var(--ochre); font-weight:700; } .about__sign{ font-family:var(--font-display); font-size:var(--t-lead); color:var(--ink); margin-top:var(--space-4); } .about__cta{ text-align:center; } .about__price{ font-family:var(--font-display); font-size:var(--t-hero); font-weight:700; margin-block:var(--space-2); color:var(--paper); } .about__ctanote{ font-size:var(--t-small); color:var(--mist); margin-top:var(--space-3); } /* ============ funnel sections (rebuild) ============ */ /* anchor offset so the sticky nav never covers a section start */ [id]{ scroll-margin-top:80px; } /* pain / agitation */ .pain__list{ list-style:none; padding:0; margin:var(--space-4) auto 0; max-width:46ch; display:grid; gap:var(--space-2); } .pain__list li{ position:relative; padding-inline-start:26px; line-height:1.55; color:var(--ink-soft); } .pain__list li::before{ content:"•"; position:absolute; inset-inline-start:4px; top:-2px; color:var(--ochre); font-size:22px; } /* solution */ .solution__points{ list-style:none; padding:0; margin:var(--space-4) auto 0; max-width:560px; display:grid; gap:var(--space-2); } .solution__points li{ position:relative; padding-inline-start:30px; line-height:1.55; font-size:var(--t-lead); } .solution__points li::before{ content:"✓"; position:absolute; inset-inline-start:0; top:0; color:var(--ochre); font-weight:700; } /* capability strip (extra outcomes) */ .caps{ margin-top:var(--space-5); border-top:1px solid var(--hairline); padding-top:var(--space-4); } .caps__heading{ text-align:center; font-family:var(--font-display); font-size:var(--t-h2); margin:0 0 var(--space-3); } .caps__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2); max-width:var(--container-narrow); margin-inline:auto; } .caps__item{ display:flex; align-items:center; gap:10px; background:var(--paper-warm); border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; font-weight:600; } .caps__item::before{ content:"✦"; color:var(--ochre); } /* reviews neutral state (toggle OFF) */ .social-soon{ max-width:var(--container-narrow); } .social-soon .lead{ margin-bottom:var(--space-4); } /* author "read more" link */ .author__more{ margin-top:var(--space-3); } .author__more a{ color:var(--ochre-dark); font-weight:700; text-decoration:underline; } /* final close */ .final .lead{ max-width:50ch; margin-inline:auto; margin-bottom:var(--space-4); } @media (max-width:430px){ .caps__grid{ grid-template-columns:1fr; } } /* ============ download page (premium) additions ============ */ .dl__brand{ font-family:var(--font-display); font-weight:700; font-size:var(--t-small); letter-spacing:.04em; color:var(--ochre-dark); margin:0 0 var(--space-3); } .dl__sent{ display:inline-flex; align-items:center; gap:8px; margin:var(--space-3) auto 0; font-size:var(--t-small); color:var(--ink-soft); background:var(--paper-warm); border:1px solid var(--hairline); border-radius:999px; padding:8px 16px; } .dl__sent span{ color:var(--ochre-dark); } .dl__first{ margin:var(--space-5) auto 0; max-width:46ch; text-align:start; background:var(--paper-warm); border:1px solid var(--hairline); border-inline-start:4px solid var(--ochre); border-radius:var(--radius-card); padding:var(--space-3) var(--space-4); } .dl__first-h{ display:block; font-family:var(--font-display); font-weight:700; font-size:var(--t-lead); margin-bottom:6px; } .dl__first p{ margin:0; color:var(--ink-soft); line-height:1.55; } .dl__help a, .dl__home:hover{ text-decoration:underline; } .dl__help a{ color:var(--ochre-dark); font-weight:700; } /* ============ trust row (under hero + buy CTAs) ============ */ /* Understated, premium: one calm row of line icons + payment wordmarks in a muted greyscale. Adapts color to light (hero) vs ink (buy) sections. */ .trustrow{ margin-top:var(--space-3); display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--muted); } .section--ink .trustrow{ color:var(--mist); } .trustrow__items{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; } .trustrow__item{ display:inline-flex; align-items:center; gap:7px; font-size:var(--t-tiny); letter-spacing:.04em; color:inherit; line-height:1.3; } .trustrow__ic{ width:16px; height:16px; min-width:16px; max-width:16px; max-height:16px; flex:0 0 16px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; opacity:.85; } .trustrow__pay{ display:flex; align-items:center; gap:16px; } /* opacity removed (was .6, which dragged the wordmarks to ~1.9:1); the inherited var(--muted) grey + grayscale keeps them understated while clearing WCAG AA. */ .trustrow__logo{ height:24px; width:auto; display:block; } /* real payment-brand logos (same assets as the checkout) */ @media (max-width:480px){ .trustrow__items{ gap:6px 14px; } .trustrow__item{ font-size:11px; } .trustrow__pay{ gap:13px; } } /* ============ CRO v2: ATF hero, digital product, anchored price, value comparison, outcome bullets, repeated CTA. Mobile-first; overrides earlier .hero__cover sizing so the product + price + CTA sit above an FB-sized fold. */ .hero__product{ position:relative; display:block; width:fit-content; margin:var(--space-3) auto var(--space-4); } /* The hero is a responsive