/* Clean Page Press, Elementor build (BOOK-62). Generated by _build/convert.py: part 1 is bookdesk/site/styles.css (the approved BOOK-61 design) scoped to body.cpp, part 2 is _build/bridge.css (Elementor wrappers and resets). Edit those, then rebuild. */ @font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 400 800; font-stretch: 90% 100%; font-style: normal; font-display: swap; } :root body.cpp { --paper: #ffffff; --ink: #1b1f24; --ink-2: #262b32; --ink-soft: #555b63; --dark-soft: #b9bec5; --green: #1f6b43; --green-deep: #174f32; --green-on-ink: #6fb58f; --on-green-soft: #ffffff; --green-tint: #e5ede7; --hl: #ffd43b; --hl-deep: #f2c200; --rule: #d9dde1; --field-stroke: #8a929d; --error: #a3261b; --focus: #1f5f8b; --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans: var(--font); --fs-display: clamp(2.75rem, 6.5vw, 6rem); --fs-h2: clamp(2.25rem, 4.5vw, 4rem); --fs-big: clamp(3rem, 7vw, 7.5rem); --fs-lede: clamp(1.25rem, 1.05rem + .55vw, 1.625rem); --fs-body: 1.1875rem; --fs-label: .9375rem; --wrap: 78rem; --radius: 14px; --radius-card: 8px; --ease: cubic-bezier(.16, 1, .3, 1); --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--ink-soft); --line: var(--rule); --link: var(--green); --pil: var(--green); color-scheme: light; } :root body.cpp *, :root body.cpp *::before, :root body.cpp *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: 5.5rem; } :root body.cpp { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; font-optical-sizing: auto; text-rendering: optimizeLegibility; caret-color: var(--green); } :root body.cpp ::selection { background: var(--hl); color: var(--ink); } :root body.cpp img, :root body.cpp svg { max-width: 100%; height: auto; display: block; } :root body.cpp .w-h1, :root body.cpp .w-h2, :root body.cpp .w-h3, :root body.cpp .w-h4 { font-weight: 800; font-stretch: 90%; margin: 0 0 .5em; text-wrap: balance; color: var(--fg); } :root body.cpp .w-h1 { font-size: var(--fs-display); line-height: 1; letter-spacing: -.028em; } :root body.cpp .w-h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.024em; } :root body.cpp .w-h3 { font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); line-height: 1.12; letter-spacing: -.012em; } :root body.cpp p { margin: 0 0 1em; text-wrap: pretty; } :root body.cpp p, :root body.cpp li, :root body.cpp td, :root body.cpp th, :root body.cpp dd { overflow-wrap: break-word; } :root body.cpp .note a, :root body.cpp .kdp-ref a { overflow-wrap: anywhere; } :root body.cpp .qblock > *, :root body.cpp .checks-list > *, :root body.cpp .cols2 > *, :root body.cpp .ba-wrap > *, :root body.cpp .form-wrap > *, :root body.cpp .faq-split > *, :root body.cpp .band-price > *, :root body.cpp .rule-band > *, :root body.cpp .need-grid > *, :root body.cpp .who-grid > *, :root body.cpp .guar-grid > *, :root body.cpp .hero-grid > *, :root body.cpp .svc-cards > *, :root body.cpp .price-cards > * { min-width: 0; } :root body.cpp a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1.5px; } :root body.cpp a:hover { color: var(--link); text-decoration-thickness: 3px; } :root body.cpp :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; } :root body.cpp .f-ink :focus-visible, :root body.cpp .f-green :focus-visible, :root body.cpp .site-header :focus-visible, :root body.cpp .site-footer :focus-visible, :root body.cpp .cta-bar :focus-visible { outline-color: var(--hl); } :root body.cpp .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; } :root body.cpp .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :root body.cpp .skip { position: absolute; left: -999px; top: .5rem; background: var(--hl); color: var(--ink); padding: .6rem 1rem; z-index: 60; font-weight: 700; } :root body.cpp .skip:focus { left: .5rem; } :root body.cpp .nowrap { white-space: nowrap; } :root body.cpp .fig { font-variant-numeric: tabular-nums lining-nums; } :root body.cpp .muted { color: var(--fg-soft); } :root body.cpp .pil { display: inline-block; width: .42em; height: .52em; margin-left: .06em; vertical-align: -.02em; background: var(--pil); -webkit-mask: url("img/pilcrow.svg") center / contain no-repeat; mask: url("img/pilcrow.svg") center / contain no-repeat; } :root body.cpp mark.hl { color: var(--ink); background-color: var(--hl); padding: 0 .08em; margin: 0 -.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } :root body.cpp main p { max-width: 68ch; } :root body.cpp .fld { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--bg); color: var(--fg); } :root body.cpp .f-white { --bg: var(--paper); } :root body.cpp .f-ink { --bg: var(--ink); --fg: #ffffff; --fg-soft: var(--dark-soft); --line: #3a4049; --link: #ffffff; --pil: var(--green-on-ink); } :root body.cpp .f-green { --bg: var(--green); --fg: #ffffff; --fg-soft: var(--on-green-soft); --line: #4a8c69; --link: #ffffff; --pil: var(--hl); } :root body.cpp .f-ink a, :root body.cpp .f-green a { text-decoration-color: var(--hl); } :root body.cpp .f-white + .f-white, :root body.cpp .w-f-white + .f-white { padding-top: 0; } :root body.cpp .sec-head { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } :root body.cpp .sec-head .w-h2 { margin-bottom: .35em; } :root body.cpp .sec-head p, :root body.cpp .lede { font-size: var(--fs-lede); line-height: 1.38; color: var(--fg); max-width: 34em; } :root body.cpp .sec-head p:last-child { margin-bottom: 0; } :root body.cpp .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; padding: .85rem 1.6rem; font-family: var(--font); font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-decoration: none; border: 0; border-radius: var(--radius); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), color .18s var(--ease); } :root body.cpp .btn-primary { background: var(--hl); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); } :root body.cpp .btn-primary:hover { background: var(--hl-deep); color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 -4px 0 var(--ink); } :root body.cpp .btn-primary:active { transform: none; box-shadow: inset 0 -1px 0 var(--ink); } :root body.cpp .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; } :root body.cpp .btn-ghost:hover { background: var(--fg); color: var(--bg); } :root body.cpp .btn-sm { min-height: 44px; padding: .5rem 1.05rem; font-size: 1rem; border-radius: 12px; } :root body.cpp .t-sm { display: none; } :root body.cpp .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; margin-top: 1.75rem; } :root body.cpp .tlink { font-weight: 700; color: var(--fg); } :root body.cpp .tlink-p { margin: 0; } :root body.cpp .tlink-p a { font-weight: 700; color: var(--fg); } :root body.cpp .cta-note { font-size: var(--fs-label); color: var(--fg-soft); margin: .9rem 0 0; max-width: 36em; } :root body.cpp .offer-line { margin: 1rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--fg-soft); max-width: 34em; } :root body.cpp .offer-line strong { color: var(--fg); } :root body.cpp .site-header { position: sticky; top: 0; z-index: 40; background: var(--ink); color: #fff; border-bottom: 1px solid #2e333a; } :root body.cpp .head-row { display: flex; align-items: center; gap: .6rem; min-height: 64px; } :root body.cpp .brand { display: flex; align-items: center; flex: none; padding: .25rem 0; margin-right: auto; } :root body.cpp .brand img { height: 22px; width: auto; } :root body.cpp .nav-desk { display: none; } :root body.cpp .nav-desk > ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; } :root body.cpp .nav-desk > ul > li > a, :root body.cpp .nav-drop > summary { display: flex; align-items: center; min-height: 44px; padding: .45rem .75rem; color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: 8px; cursor: pointer; } :root body.cpp .nav-desk > ul > li > a:hover, :root body.cpp .nav-drop > summary:hover { background: var(--ink-2); color: #fff; } :root body.cpp .nav-desk a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hl); text-decoration-thickness: 3px; text-underline-offset: .45em; } :root body.cpp .nav-drop { position: relative; } :root body.cpp .nav-drop > summary, :root body.cpp .nav-phone > summary { list-style: none; } :root body.cpp .nav-drop > summary::-webkit-details-marker, :root body.cpp .nav-phone > summary::-webkit-details-marker { display: none; } :root body.cpp .nav-drop > summary::after { content: ""; width: .42em; height: .42em; margin-left: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); } :root body.cpp .nav-drop[open] > summary::after { transform: translateY(.1em) rotate(-135deg); } :root body.cpp .drop-list { list-style: none; margin: 0; padding: 0; } :root body.cpp .drop-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; min-height: 44px; padding: .6rem .8rem; color: var(--ink); text-decoration: none; border-radius: 8px; } :root body.cpp .drop-list a:hover { background: var(--green-tint); color: var(--ink); } :root body.cpp .drop-list a[aria-current="page"] span:first-child { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: .25em; } :root body.cpp .nav-price { color: var(--ink-soft); font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; } :root body.cpp .nav-drop .drop-panel { position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(calc(-50% + var(--panel-shift, 0px))); display: grid; grid-template-columns: repeat(3, max-content); gap: .75rem 1.25rem; padding: 1rem .75rem; background: #fff; border-radius: var(--radius-card); box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); z-index: 50; } @media (max-width: 1199px) { :root body.cpp .nav-drop .drop-panel { grid-template-columns: repeat(2, max-content); } } :root body.cpp .drop-h { margin: 0 .8rem .25rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rule); font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--green-deep); } :root body.cpp .nav-drop:not([open]) .drop-panel, :root body.cpp .nav-phone:not([open]) .phone-panel { display: none; } :root body.cpp .head-cta { flex: none; } :root body.cpp .nav-phone > summary { display: flex; align-items: center; min-height: 44px; padding: .45rem .8rem; box-shadow: inset 0 0 0 2px #fff; border-radius: 12px; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; } :root body.cpp .nav-phone[open] > summary { background: #fff; color: var(--ink); } :root body.cpp .phone-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 64px); overflow: auto; padding: .75rem 1rem 1.5rem; background: #fff; color: var(--ink); box-shadow: 0 24px 40px -16px rgba(0,0,0,.5); z-index: 50; } :root body.cpp .phone-label { font-weight: 700; margin: .25rem 0 .25rem .8rem; } :root body.cpp .phone-top { list-style: none; padding: .75rem 0 0; margin: .75rem 0 0; border-top: 1px solid var(--rule); } :root body.cpp .phone-top a { display: flex; align-items: center; min-height: 44px; padding: .4rem .8rem; font-weight: 600; color: var(--ink); text-decoration: none; } :root body.cpp .stage-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: .4rem .8rem; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } :root body.cpp .stage-btn::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .2s var(--ease); } :root body.cpp .stage-btn[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); } :root body.cpp .stage-btn:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; } :root body.cpp .phone-groups .drop-list { padding: .25rem 0 .5rem; } :root body.cpp .phone-groups .drop-list[hidden] { display: none; } :root body.cpp .nav-phone .m-open, :root body.cpp .nav-phone[open] .m-closed { display: none; } :root body.cpp .nav-phone[open] .m-open { display: inline; } :root body.cpp .phone-panel .drop-list a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: .45rem .8rem; } :root body.cpp .phone-panel .nav-price { font-size: .875rem; white-space: normal; } @media (max-width: 479px) { :root body.cpp .t-lg { display: none; } :root body.cpp .t-sm { display: inline; } :root body.cpp .head-row { gap: .45rem; } :root body.cpp .brand img { height: 16px; } :root body.cpp .head-cta.btn-sm, :root body.cpp .site-header .btn-sm { padding: .45rem .7rem; font-size: .95rem; } :root body.cpp .nav-phone > summary { padding: .45rem .65rem; font-size: .95rem; } } @media (min-width: 1100px) { :root body.cpp .nav-desk { display: block; } :root body.cpp .nav-phone { display: none; } :root body.cpp .head-row { min-height: 76px; gap: 1rem; } :root body.cpp .brand img { height: 26px; } } :root body.cpp .hero { padding: 1.25rem 0 2.75rem; overflow: hidden; } :root body.cpp .hero-grid { display: flex; flex-direction: column; gap: 1.1rem; } :root body.cpp .w-hero-h1 { order: 1; margin: 0; max-width: 15em; } :root body.cpp .hero-top { order: 2; } :root body.cpp .hero-art { order: 3; } :root body.cpp .hero-act { order: 4; } :root body.cpp .art-first > .hero-art { order: 2; } :root body.cpp .art-first > .hero-top { order: 3; } :root body.cpp .hero-top .cta-row { margin-top: 1rem; } :root body.cpp .hero-lede { font-size: var(--fs-lede); line-height: 1.35; margin: 0; max-width: 30em; color: var(--fg); } :root body.cpp .facts4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; font-size: .95rem; line-height: 1.35; color: var(--fg); max-width: 40rem; } :root body.cpp .facts4 li { display: flex; gap: .55rem; align-items: baseline; } :root body.cpp .facts4 li::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: #fff; transform: translateY(-.08em); } :root body.cpp .chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 0; margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--fg-soft); } :root body.cpp .chip-big { margin-right: .9rem; font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800; font-stretch: 90%; line-height: 1.05; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums lining-nums; } :root body.cpp .chip { display: inline-flex; align-items: baseline; } :root body.cpp .chip + .chip::before, :root body.cpp .w-chip + .chip::before { content: ""; width: .32rem; height: .32rem; margin: 0 .6rem; border-radius: 50%; background: var(--fg-soft); transform: translateY(-.2em); } @media (min-width: 960px) { :root body.cpp .hero { padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 6rem); } :root body.cpp .hero-grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: auto auto 1fr; grid-template-areas: "h1 h1" "top art" "act art"; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: 0; } :root body.cpp .w-hero-h1 { grid-area: h1; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); } :root body.cpp .hero-top { grid-area: top; align-self: start; } :root body.cpp .hero-art { grid-area: art; align-self: start; margin-right: calc(-1 * max(2rem, (100vw - var(--wrap)) / 2 + 2rem)); } :root body.cpp .hero-act { grid-area: act; align-self: start; } :root body.cpp .hero-formpage .hero-art { margin-right: 0; } :root body.cpp .facts4 { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); gap: .9rem 2rem; font-size: 1rem; } } :root body.cpp .hero-art { position: relative; } :root body.cpp .art-stage { position: relative; aspect-ratio: 16 / 10; width: 100%; max-width: 420px; margin: 0 auto; } :root body.cpp .art-book { position: absolute; left: 3%; top: 8%; width: 84%; transform: perspective(1600px) rotateX(26deg) rotateY(-6deg) rotateZ(-8deg); transform-origin: 50% 60%; filter: drop-shadow(0 30px 26px rgba(0,0,0,.6)); } :root body.cpp .art-book img { width: 100%; border-radius: 3px; background: #fbfaf6; } :root body.cpp .art-book::after { content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.14) 48.5%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.12) 51.6%, rgba(0,0,0,0) 60%); } :root body.cpp .art-phone { position: absolute; right: 1%; bottom: 0; width: 22%; transform: rotate(7deg); filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); } :root body.cpp .art-phone img { width: 100%; border: 5px solid #0b0d10; border-radius: 16px; background: #fff; } :root body.cpp .art-render img { width: 100%; height: auto; } :root body.cpp .art-phone-lg { right: auto; left: 22%; bottom: 3%; width: 31%; transform: rotate(-5deg); z-index: 2; } :root body.cpp .art-phone-back { right: auto; left: 52%; bottom: 10%; width: 26%; transform: rotate(8deg); filter: drop-shadow(0 14px 14px rgba(0,0,0,.45)) saturate(.85); } :root body.cpp .art-cover { top: 16%; left: 2%; width: 94%; transform: perspective(1800px) rotateX(20deg) rotateZ(-5deg); } :root body.cpp .art-cover::after { display: none; } :root body.cpp .mini-sheet { border-radius: 0; width: 82%; align-self: flex-end; font-size: .85rem; border-radius: 4px 4px 0 0; padding-bottom: .5rem; } :root body.cpp .mini-sheet p { margin: 0 0 .5rem; } :root body.cpp .art-tag { margin: 1.25rem 0 0; max-width: 34em; font-size: .85rem; line-height: 1.35; color: var(--fg-soft); text-align: center; } :root body.cpp .seal-sm { position: absolute; left: 0; bottom: 0; width: 26%; max-width: 150px; transform: rotate(-10deg); border-radius: 50%; box-shadow: 0 10px 14px rgba(0,0,0,.4); } @media (min-width: 600px) { :root body.cpp .art-stage { max-width: 560px; } } @media (min-width: 960px) { :root body.cpp .art-stage { max-width: none; aspect-ratio: 16 / 11; } :root body.cpp .art-tag { text-align: left; padding-left: 4%; } :root body.cpp .seal-sm { bottom: auto; top: 0; left: -2%; width: 22%; } } :root body.cpp .seal { display: block; width: 100%; height: auto; overflow: visible; } :root body.cpp .seal text { font-family: var(--font); font-weight: 700; fill: var(--ink); } :root body.cpp .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; margin: 0; } :root body.cpp .nums > div { display: flex; flex-direction: column; border-top: 3px solid var(--ink); padding-top: .9rem; container-type: inline-size; } :root body.cpp .nums dd { margin: 0; white-space: nowrap; font-size: var(--fs-big); font-size: clamp(2rem, 31cqi, var(--fs-big)); font-weight: 800; font-stretch: 90%; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; } :root body.cpp .nums dt { order: 2; margin-top: .55rem; font-size: 1.05rem; line-height: 1.35; color: var(--fg-soft); max-width: 16em; } :root body.cpp .nums dd small { font-size: .4em; letter-spacing: -.01em; } @media (min-width: 960px) { :root body.cpp .nums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; } } :root body.cpp .cols2 { display: grid; gap: 1rem 3rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); } :root body.cpp .cols2 .w-h2 { margin: 0; } :root body.cpp .cols2 p { max-width: 34em; } @media (min-width: 960px) { :root body.cpp .cols2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } } :root body.cpp .ba-wrap { display: grid; gap: 2rem; } @media (min-width: 960px) { :root body.cpp .ba-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; } } :root body.cpp .ba-copy .w-h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); } :root body.cpp .ba-copy p { max-width: 30em; } :root body.cpp .ba-copy .cta-row { margin-top: 1.5rem; } :root body.cpp .ba { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-card); overflow: hidden; background: #e7e7ea; --pos: 50%; user-select: none; -webkit-user-select: none; box-shadow: 0 30px 50px -24px rgba(0,0,0,.55); } :root body.cpp .ba-before, :root body.cpp .ba-after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 11% 6% 5%; } :root body.cpp .ba-before { background: #e7e7ea; } :root body.cpp .ba-after { background: #f4f0e7; clip-path: inset(0 0 0 var(--pos)); } :root body.cpp .ba-before img { height: 100%; width: auto; max-width: none; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); } :root body.cpp .ba-after .spread { height: 100%; margin: 0; } :root body.cpp .ba-after .spread img { height: 100%; width: auto; max-width: none; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); } :root body.cpp .ba-ui { position: absolute; inset: 0; } :root body.cpp .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; } :root body.cpp .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; } :root body.cpp .ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--hl); box-shadow: 0 0 0 1px rgba(27,31,36,.35); } :root body.cpp .ba-handle::after { content: ""; position: absolute; top: 50%; left: 0; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--hl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1f24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: 0 0 0 2px var(--ink), 0 8px 16px rgba(0,0,0,.35); } :root body.cpp .ba-range:focus-visible + .ba-handle::after { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px #fff, 0 0 0 9px var(--focus); } :root body.cpp .ba-tag { position: absolute; top: .85rem; padding: .3rem .6rem; border-radius: 6px; font-size: .85rem; font-weight: 700; line-height: 1.2; pointer-events: none; } :root body.cpp .ba-tag-l { left: .85rem; background: #fff; color: var(--ink); } :root body.cpp .ba-tag-r { right: .85rem; background: var(--ink); color: #fff; } :root body.cpp .ba-cap { margin: 1rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--fg-soft); max-width: 44em; } :root body.cpp .ba-cap strong { color: var(--fg); font-weight: 700; } :root body.cpp .spread { position: relative; margin-top: 2rem; } :root body.cpp .spread-img { width: 100%; height: auto; background: #fff; } :root body.cpp .dim { position: absolute; bottom: calc(100% + 5px); left: var(--x); width: var(--w); height: 7px; border: 1.5px solid var(--c, var(--green)); border-bottom: 0; } :root body.cpp .dim > span { position: absolute; bottom: calc(100% + 4px); left: -2px; white-space: nowrap; font-size: .78rem; font-weight: 700; line-height: 1; color: var(--c, var(--green)); } :root body.cpp .dim-end > span { left: auto; right: -2px; } :root body.cpp .dim-mid > span { left: 50%; transform: translateX(-50%); } :root body.cpp .guide { position: absolute; top: 0; bottom: 0; left: var(--x); } :root body.cpp .guide::before, :root body.cpp .guide::after { content: ""; position: absolute; left: 0; height: 4.2%; border-left: 1.5px solid var(--c, var(--green)); } :root body.cpp .guide::before { top: 0; } :root body.cpp .guide::after { bottom: 0; } :root body.cpp .hguide { position: absolute; left: 0; right: 0; top: var(--y); } :root body.cpp .hguide::before, :root body.cpp .hguide::after { content: ""; position: absolute; top: 0; width: 4.2%; border-top: 1.5px solid var(--green); } :root body.cpp .hguide::before { left: 0; } :root body.cpp .hguide::after { right: 0; } :root body.cpp .hguide > span { position: absolute; right: .35rem; padding: 0 .2rem; background: #fff; font-size: .72rem; font-weight: 700; line-height: 1.35; white-space: nowrap; color: var(--green); } :root body.cpp .hguide-top > span { bottom: 2px; } :root body.cpp .hguide-foot > span { top: 2px; } :root body.cpp .barcode { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: grid; place-items: center; border: 1.5px dashed var(--green); background: #fff; } :root body.cpp .barcode > span { padding: 0 .3rem; font-size: .72rem; font-weight: 700; line-height: 1.35; text-align: center; color: var(--green); } :root body.cpp .f-ink .spread, :root body.cpp .f-green .spread { --c: var(--hl); } :root body.cpp .ba .spread { --c: var(--green); } @media (max-width: 599px) { :root body.cpp .dim > span { font-size: .68rem; } :root body.cpp .hguide > span, :root body.cpp .barcode > span { display: none; } } :root body.cpp .stage-strip { margin-top: clamp(2.5rem, 5vw, 3.5rem); } :root body.cpp .strip-title { margin: 0 0 1.25rem; } :root body.cpp .strip-cols { list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 0; display: grid; gap: 0; } :root body.cpp .strip-col { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 0 1.1rem; border-top: 2px solid var(--ink); min-width: 0; } :root body.cpp .strip-col p { margin: 0; } :root body.cpp .strip-h { font-size: 1.25rem; font-weight: 800; line-height: 1.15; color: var(--green); } :root body.cpp .strip-line { color: var(--ink-soft); line-height: 1.4; } :root body.cpp .strip-price { font-weight: 700; color: var(--ink); } :root body.cpp .strip-link a { display: inline-flex; align-items: center; min-height: 44px; } @media (min-width: 960px) { :root body.cpp .strip-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; } :root body.cpp .strip-line { flex: 1; } } :root body.cpp .hero-also { margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--fg-soft); max-width: 40rem; } :root body.cpp .hero-also a { padding-block: .8rem; white-space: nowrap; } :root body.cpp .crumb { margin: 0 0 .75rem; font-size: .92rem; line-height: 1.4; color: var(--fg-soft); } :root body.cpp .stage-group + .stage-group, :root body.cpp .w-stage-group + .stage-group { margin-top: 2.75rem; } :root body.cpp .stage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: 1.25rem; padding-top: .75rem; border-top: 2px solid var(--ink); } :root body.cpp .w-stage-h { margin: 0; font-size: 1.5rem; line-height: 1.15; color: var(--ink); } :root body.cpp .stage-head p { margin: 0; color: var(--ink-soft); } @media (min-width: 760px) { :root body.cpp .svc-cards > .svc-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } :root body.cpp .svc-card:only-child .svc-pic { aspect-ratio: auto; height: 19rem; margin: 2px 0 2px 2px; clip-path: inset(0 round 6px 0 0 6px); } :root body.cpp .svc-card:only-child .svc-body { justify-content: center; padding: 1.75rem 2rem; } } :root body.cpp .svc-cards { display: grid; gap: 1.25rem; } @media (min-width: 760px) { :root body.cpp .svc-cards { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } :root body.cpp .svc-card { position: relative; display: flex; flex-direction: column; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--radius-card); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } :root body.cpp .svc-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--ink), 0 18px 30px -18px rgba(27,31,36,.55); } :root body.cpp .svc-pic { background: var(--green-tint); aspect-ratio: 4 / 3; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding: 1.5rem 1.5rem 0; margin: 2px 2px 0; clip-path: inset(0 round 6px 6px 0 0); } :root body.cpp .svc-pic img { width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: bottom; box-shadow: 0 12px 24px -12px rgba(0,0,0,.45); } :root body.cpp .svc-pic-sheet { align-items: center; padding: 1.5rem; } :root body.cpp .svc-pic-sheet > .mini-sheet { align-self: center; } @media (max-width: 759px) { :root body.cpp .svc-pic-sheet { aspect-ratio: auto; } } :root body.cpp .svc-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } :root body.cpp .w-card-h { font-size: 1.45rem; line-height: 1.15; margin: 0; } :root body.cpp .svc-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; } :root body.cpp .svc-price { font-size: 2.1rem; font-weight: 800; font-stretch: 90%; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; } :root body.cpp .svc-days { font-size: 1rem; color: var(--ink-soft); } :root body.cpp .svc-line { margin: 0; color: var(--ink-soft); font-size: 1.05rem; } :root body.cpp .svc-link { margin-top: auto; } :root body.cpp .svc-link p { margin: .5rem 0 0; } :root body.cpp .svc-link a { font-weight: 700; color: var(--ink); } :root body.cpp .svc-link a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); } :root body.cpp .proposed { display: inline-block; margin-left: .35rem; padding: .1rem .45rem; border-radius: 6px; background: var(--green-tint); color: var(--green-deep); font-size: .8rem; font-weight: 700; letter-spacing: 0; vertical-align: .3em; line-height: 1.4; } :root body.cpp .f-ink .proposed, :root body.cpp .f-green .proposed { background: rgba(255,255,255,.16); color: #fff; } :root body.cpp .svc-more { margin-top: 1.75rem; display: grid; gap: .5rem; } :root body.cpp .svc-more p { margin: 0; } :root body.cpp .demo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; } @media (min-width: 960px) { :root body.cpp .demo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } :root body.cpp .demo p { margin: 0; } :root body.cpp .demo-img { display: block; width: 100%; height: auto; border-radius: 6px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } :root body.cpp .demo:hover .demo-img { transform: translateY(-6px); box-shadow: 0 26px 32px -16px rgba(0,0,0,.85); } :root body.cpp .demo-label { margin-top: .8rem !important; font-size: .9rem; line-height: 1.35; color: var(--fg-soft); } :root body.cpp .demo-label strong { display: block; color: var(--fg); font-weight: 700; font-size: 1rem; } :root body.cpp .wall-note { margin: 2.5rem 0 0; font-size: .95rem; color: var(--fg-soft); max-width: 40em; } :root body.cpp .steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: s; } :root body.cpp .steps li { counter-increment: s; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0 1rem; padding: 1.4rem 0; border-top: 3px solid var(--fg); } :root body.cpp .steps li::before { content: counter(s); grid-row: 1 / span 3; font-size: 3.75rem; font-weight: 800; font-stretch: 90%; line-height: .9; letter-spacing: -.03em; color: var(--green); font-variant-numeric: tabular-nums lining-nums; } :root body.cpp .steps .st-h { margin: 0; font-size: 1.3rem; font-weight: 800; font-stretch: 90%; line-height: 1.2; } :root body.cpp .steps .st-d { margin: .35rem 0 0; font-size: 1.05rem; color: var(--fg-soft); max-width: 30em; } :root body.cpp .steps .st-t { margin: .7rem 0 0; justify-self: start; padding: .15rem .55rem; border-radius: 6px; background: var(--hl); color: var(--ink); font-size: .9rem; font-weight: 700; } @media (min-width: 960px) { :root body.cpp .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } :root body.cpp .steps li { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding: 1.25rem 0 0; } :root body.cpp .steps li::before { grid-row: auto; font-size: 5.5rem; margin-bottom: .75rem; } :root body.cpp .steps .st-t { align-self: end; } } :root body.cpp .checks-list { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: 1.25rem 4rem; } :root body.cpp .checks-list .w-h3 { margin: 0; } @media (min-width: 960px) { :root body.cpp .checks-list { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } } :root body.cpp .numbered { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: 0 2.5rem; } @media (min-width: 760px) { :root body.cpp .numbered.two { grid-template-columns: 1fr 1fr; } } :root body.cpp .numbered li { counter-increment: n; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 .6rem; padding: .75rem 0; border-top: 1px solid var(--line); } :root body.cpp .numbered li::before { content: counter(n); font-size: 1.25rem; font-weight: 800; color: var(--green); line-height: 1.3; font-variant-numeric: tabular-nums; } :root body.cpp .f-ink .numbered li::before, :root body.cpp .f-green .numbered li::before { color: #fff; } :root body.cpp .numbered p { margin: 0; } :root body.cpp .note { font-size: .92rem; color: var(--fg-soft); max-width: 44em; } :root body.cpp .wc { display: grid; gap: .75rem 2rem; align-items: center; margin: 0 0 2.5rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-card); background: var(--ink); color: #fff; } :root body.cpp .wc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; } :root body.cpp .wc label { font-weight: 700; font-size: 1.1rem; } :root body.cpp .wc output { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; font-stretch: 90%; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: #fff; } :root body.cpp .wc input[type=range] { width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; } :root body.cpp .wc input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--hl) var(--fill, 33%), #4a515b var(--fill, 33%)); } :root body.cpp .wc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--hl); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); } :root body.cpp .wc input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: #4a515b; } :root body.cpp .wc input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--hl); } :root body.cpp .wc input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--hl); border: 3px solid #fff; } :root body.cpp .wc input[type=range]:focus-visible { outline: 3px solid var(--hl); outline-offset: 4px; } :root body.cpp .wc-note { grid-column: 1 / -1; margin: 0; font-size: .95rem; color: var(--dark-soft); max-width: 52em; } @media (min-width: 760px) { :root body.cpp .wc { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 1.5rem 1.75rem; } :root body.cpp .wc-head { display: grid; } } :root body.cpp .price-cards { display: grid; gap: 1.25rem; align-items: stretch; } @media (min-width: 960px) { :root body.cpp .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } :root body.cpp .pcard { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--rule); border-radius: var(--radius-card); padding: 1.6rem 1.5rem 1.5rem; transition: box-shadow .2s var(--ease), transform .2s var(--ease); --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--ink-soft); --line: var(--rule); --link: var(--green); } :root body.cpp .pcard:hover { box-shadow: inset 0 0 0 2px var(--ink); } :root body.cpp .pcard-pick { background: var(--green); color: #fff; box-shadow: none; --bg: var(--green); --fg: #fff; --fg-soft: var(--on-green-soft); --line: #4a8c69; --link: #fff; } :root body.cpp .pcard-pick:hover { box-shadow: inset 0 0 0 3px var(--hl); } @media (min-width: 960px) { :root body.cpp .pcard-pick { transform: translateY(-14px); } } :root body.cpp .pcard-pickline { margin: 0 0 .6rem; } :root body.cpp .pcard-pickline span { display: inline-block; padding: .15rem .55rem; border-radius: 6px; background: var(--hl); color: var(--ink); font-size: .9rem; font-weight: 700; } :root body.cpp .w-pcard-name { font-size: 1.6rem; margin: 0 0 .25rem; color: var(--fg); } :root body.cpp .pcard-price { margin: 0 0 .25rem; white-space: nowrap; font-size: clamp(3.25rem, 5vw, 4.5rem); font-weight: 800; font-stretch: 90%; line-height: 1; letter-spacing: -.03em; color: var(--fg); } :root body.cpp .pcard-was { margin: 0 0 .5rem; font-size: 1rem; color: var(--fg-soft); } :root body.cpp .pcard-was s { text-decoration-thickness: 2px; } :root body.cpp .pcard-for { color: var(--fg-soft); margin: 0 0 1rem; font-size: 1.05rem; } :root body.cpp .pcard-terms { margin: 0 0 1rem; display: grid; gap: .3rem; } :root body.cpp .pcard-terms div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; } :root body.cpp .pcard-terms dt { font-size: .95rem; font-weight: 600; color: var(--fg-soft); } :root body.cpp .pcard-terms dd { margin: 0; font-weight: 700; line-height: 1.4; } :root body.cpp .pcard-list { list-style: none; padding: 0; margin: 0 0 1.25rem; border-top: 1px solid var(--line); } :root body.cpp .pcard-list li { padding: .5rem 0 .5rem 1.5rem; border-bottom: 1px solid var(--line); line-height: 1.45; font-size: 1rem; position: relative; } :root body.cpp .pcard-list li::before { content: ""; position: absolute; left: .15rem; top: .95em; width: .7rem; height: .38rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .8; } :root body.cpp .pcard-small { font-size: .9rem; color: var(--fg-soft); line-height: 1.5; margin: 0 0 1.25rem; } :root body.cpp .pcard-small div + div { margin-top: .4rem; } :root body.cpp .pcard-small dt { display: inline; font-weight: 700; color: var(--fg); } :root body.cpp .pcard-small dd { display: inline; margin: 0; } :root body.cpp .pcard-body { flex: 1; display: flex; flex-direction: column; } :root body.cpp .pcard-btn { margin-top: auto; } :root body.cpp .pcard .btn { width: 100%; } :root body.cpp .prices-after { margin-top: 2.25rem; display: grid; gap: .9rem; max-width: 54rem; } :root body.cpp .prices-after p { margin: 0; font-size: 1rem; color: var(--fg-soft); } :root body.cpp .prices-after p.offer { color: var(--ink); font-size: 1.05rem; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--hl); } :root body.cpp .prices-after .offer strong { font-weight: 800; } :root body.cpp .addons { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 3rem; } @media (min-width: 760px) { :root body.cpp .addons { grid-template-columns: 1fr 1fr; } } :root body.cpp .addons li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); } :root body.cpp .addons .a-name { font-size: 1.05rem; line-height: 1.35; } :root body.cpp .addons .a-price { flex: none; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 800; font-stretch: 90%; line-height: 1; font-variant-numeric: tabular-nums lining-nums; text-align: right; } :root body.cpp .addons .a-price small { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 600; color: var(--fg-soft); letter-spacing: 0; } :root body.cpp .guar-grid { display: grid; gap: 2rem; align-items: center; } :root body.cpp .seal-big { width: min(64vw, 280px); margin: 0 auto; transform: rotate(-8deg); border-radius: 50%; box-shadow: 0 22px 26px rgba(0,0,0,.35); } @media (min-width: 960px) { :root body.cpp .guar-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5rem; } :root body.cpp .seal-big { width: min(30vw, 380px); } } :root body.cpp .guar-copy p { max-width: 32em; } :root body.cpp .guar-copy .cta-row { margin-top: 1.5rem; } :root body.cpp .who-grid { display: grid; gap: 2rem 4rem; } @media (min-width: 960px) { :root body.cpp .who-grid { grid-template-columns: 1fr 1fr; align-items: start; } } :root body.cpp .who-grid .w-h2 { font-size: clamp(2rem, 3.4vw, 3rem); } :root body.cpp .who-card { padding: 1.75rem 1.6rem; border-radius: var(--radius-card); background: var(--green-tint); } :root body.cpp .who-card p:last-child { margin-bottom: 0; } :root body.cpp .who-name { font-size: 1.5rem; font-weight: 800; font-stretch: 90%; line-height: 1.15; margin-bottom: .35rem !important; } :root body.cpp .ticks { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .85rem; } :root body.cpp .ticks li { padding-left: 2rem; position: relative; } :root body.cpp .ticks li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .9rem; height: .5rem; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); } :root body.cpp .f-green .ticks li::before, :root body.cpp .f-ink .ticks li::before { border-color: var(--hl); } :root body.cpp .faq-split { display: grid; gap: 2.5rem; } @media (min-width: 960px) { :root body.cpp .faq-split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 4rem; align-items: start; } :root body.cpp .cta-card { position: sticky; top: 7rem; } } :root body.cpp .faq details { border-bottom: 1px solid var(--line); } :root body.cpp .faq details:first-child { border-top: 3px solid var(--fg); } :root body.cpp .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-weight: 700; font-size: 1.2rem; line-height: 1.35; min-height: 48px; } :root body.cpp .faq summary::-webkit-details-marker { display: none; } :root body.cpp .faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.4rem; width: .7rem; height: .7rem; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(45deg); transition: transform .2s var(--ease); } :root body.cpp .faq details[open] summary::after { transform: translateY(.3rem) rotate(-135deg); } :root body.cpp .faq details p { margin: 0 0 1.25rem; color: var(--fg-soft); max-width: 36em; } :root body.cpp .faq-more { margin: 1.5rem 0 0; font-weight: 700; } :root body.cpp .cta-card { background: var(--ink); color: #fff; border-radius: var(--radius-card); padding: 1.75rem 1.6rem; --bg: var(--ink); --fg: #fff; --fg-soft: var(--dark-soft); --link: #fff; } :root body.cpp .cta-card .w-card-h { color: #fff; margin-bottom: .6rem; } :root body.cpp .cta-card p { color: var(--dark-soft); font-size: 1.05rem; } :root body.cpp .cta-card .btn { width: 100%; margin-top: .5rem; } :root body.cpp .cta-card .cta-note { text-align: center; margin-bottom: 0; } :root body.cpp .qa-index { margin: 0 0 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } :root body.cpp .qa-index ol { margin: 0; padding-left: 2.4rem; display: grid; gap: .2rem; } :root body.cpp .qa-index li::marker { color: var(--green); font-weight: 800; } :root body.cpp .qa-index a { display: inline-block; padding: .3rem 0; color: var(--ink); text-decoration-color: var(--rule); } :root body.cpp .qa { padding: 2rem 0; border-bottom: 1px solid var(--rule); } :root body.cpp .qa .w-h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; margin-bottom: .75rem; } :root body.cpp .qa .w-h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.15; margin-bottom: .75rem; } :root body.cpp .qa-group { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 3rem 0 0; color: var(--green); } :root body.cpp .qa-jump p { margin: 0; font-weight: 700; } :root body.cpp .qa-jump a { padding: .7rem .15rem; } :root body.cpp .qa p, :root body.cpp .qa ul { max-width: 36em; } :root body.cpp .qa-cta { padding: 2rem 0; border-bottom: 1px solid var(--rule); } :root body.cpp .qa-cta p { margin: 0 0 1rem; font-size: 1.1rem; max-width: 34em; } :root body.cpp .qblock { display: grid; gap: .75rem 4rem; padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-top: 3px solid var(--fg); } :root body.cpp .qblock:first-child { border-top: 0; padding-top: 0; } :root body.cpp .qblock .w-h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.05; margin: 0; } :root body.cpp .qbody > :last-child { margin-bottom: 0; } :root body.cpp .qbody p, :root body.cpp .qbody ul { max-width: 36em; } @media (min-width: 960px) { :root body.cpp .qblock { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } :root body.cpp .qblock > .qh { position: sticky; top: 7rem; align-self: start; } } :root body.cpp .kit-band { padding: 0 0 clamp(1.75rem, 3vw, 2.75rem); } :root body.cpp .kit-cap { margin: 0 0 1rem; max-width: 36em; font-weight: 600; text-wrap: balance; } :root body.cpp .kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; margin: 0; padding: 0; list-style: none; } :root body.cpp .kit-grid li { margin: 0; min-width: 0; } :root body.cpp .kit-grid li.wide { grid-column: 1 / -1; } :root body.cpp .kit-grid .is-figure { margin: 0; } :root body.cpp .kit-img { display: block; width: 100%; height: auto; border-radius: 6px; } :root body.cpp .kit-grid .figcap { margin-top: .4rem; font-size: .85rem; line-height: 1.35; color: var(--fg-soft); } @media (min-width: 760px) { :root body.cpp .kit-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } :root body.cpp .kit-grid li.wide { grid-column: span 2; } :root body.cpp .kit-grid li.wide.last { grid-column: span 3; } } @media (min-width: 1024px) { :root body.cpp .kit-grid { gap: 24px; align-items: start; } } :root body.cpp .pband-copy > p { max-width: 36em; } :root body.cpp .dashes { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .55rem; } :root body.cpp .dashes li { padding-left: 1.6rem; position: relative; } :root body.cpp .dashes li::before { content: ""; position: absolute; left: 0; top: .78em; width: .8rem; border-top: 3px solid var(--green); } :root body.cpp .f-ink .dashes li::before, :root body.cpp .f-green .dashes li::before { border-color: var(--hl); } :root body.cpp .kdp-ref { font-size: 1rem; color: var(--fg-soft); margin: 1.25rem 0 0; max-width: 40em; } :root body.cpp .band-price { display: grid; gap: 1.5rem 4rem; align-items: center; } @media (min-width: 960px) { :root body.cpp .band-price { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } } :root body.cpp .big { margin: 0; font-size: var(--fs-big); font-weight: 800; font-stretch: 90%; line-height: .92; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; color: var(--fg); } :root body.cpp .big-sub { margin: .75rem 0 0; font-size: var(--fs-lede); line-height: 1.35; color: var(--fg); max-width: 22em; } :root body.cpp .band-price .cta-row { margin-top: 0; } :root body.cpp .band-price .ptable-wrap { margin: 0; } :root body.cpp .rule-band { display: grid; gap: 1rem 4rem; } @media (min-width: 960px) { :root body.cpp .rule-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } } :root body.cpp .rule-band .w-h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.25rem); } :root body.cpp .rule-quote { margin: 0 0 1rem; font-size: var(--fs-lede); line-height: 1.4; max-width: 30em; } :root body.cpp .proof { margin: 0; } :root body.cpp .proof img { width: 100%; height: auto; background: #fff; } :root body.cpp .pair { display: grid; gap: 1.25rem; } @media (min-width: 720px) { :root body.cpp .pair { grid-template-columns: minmax(0, .35fr) minmax(0, 1fr); align-items: start; } :root body.cpp .pair-even { grid-template-columns: 1fr 1fr; } } :root body.cpp .pair-label { font-size: .9rem; font-weight: 700; line-height: 1.35; color: var(--fg-soft); margin: 0 0 .5rem; } :root body.cpp .proof .figcap { font-size: .92rem; line-height: 1.45; color: var(--fg-soft); margin: 1rem 0 0; max-width: 40em; } :root body.cpp .legend { display: block; font-weight: 700; color: var(--fg); margin-bottom: .2rem; } :root body.cpp .screens { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 30rem; } :root body.cpp .screen-img { border: 6px solid #0b0d10; border-radius: 18px; background: #fff; } :root body.cpp .sheets { display: grid; gap: 1.25rem; } @media (min-width: 720px) { :root body.cpp .sheets { grid-template-columns: 1fr 1fr; align-items: start; } } :root body.cpp .sheet { padding: 1.3rem 1.2rem 1rem; background: #fff; color: var(--ink); border-radius: 4px; font-size: .92rem; line-height: 1.45; box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); } :root body.cpp .sheet p { margin: 0 0 .75rem; } :root body.cpp .gp-title { font-size: 1.2rem; font-weight: 800; font-stretch: 90%; line-height: 1.15; } :root body.cpp .gp-sub { color: var(--ink-soft); font-size: .88rem; } :root body.cpp .gp-h { font-weight: 800; margin-top: 1.1rem !important; } :root body.cpp .gp-foot { font-size: .82rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: .6rem; margin-top: 1.25rem !important; } :root body.cpp .chk { margin: .5rem 0 0; } :root body.cpp .chk div { padding: .55rem 0; border-top: 1px solid var(--rule); } :root body.cpp .chk dt { font-weight: 800; font-size: .88rem; } :root body.cpp .chk dd { margin: 0; } :root body.cpp .word-img, :root body.cpp .after-img { border-radius: 3px; box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); } :root body.cpp .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: t; } @media (min-width: 760px) { :root body.cpp .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } } :root body.cpp .timeline li { counter-increment: t; padding: 1.1rem 1rem 1rem; border-radius: var(--radius-card); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); } :root body.cpp .timeline li::before { content: counter(t); display: block; font-size: 2.5rem; font-weight: 800; line-height: 1; color: #fff; margin-bottom: .4rem; } :root body.cpp .timeline strong { display: block; font-size: 1.15rem; margin-bottom: .25rem; } :root body.cpp .timeline p { margin: 0; font-size: .98rem; color: var(--fg-soft); } :root body.cpp .field-list { columns: 2 14rem; column-gap: 2rem; } :root body.cpp .ptable-wrap { margin: 1.25rem 0 1rem; } :root body.cpp .ptable { width: 100%; border-collapse: collapse; font-size: 1.02rem; line-height: 1.45; } :root body.cpp .ptable th, :root body.cpp .ptable td { text-align: left; vertical-align: top; padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--line); } :root body.cpp .ptable th:last-child, :root body.cpp .ptable td:last-child { padding-right: 0; } :root body.cpp .ptable thead th { font-size: .88rem; font-weight: 700; color: var(--fg-soft); vertical-align: bottom; border-bottom: 2px solid var(--fg); } :root body.cpp .ptable tbody th { font-weight: 600; } :root body.cpp .ptable .num { text-align: right; font-variant-numeric: tabular-nums; } :root body.cpp .ptable th.num, :root body.cpp .ptable td[data-label="Price"] { white-space: nowrap; } :root body.cpp .ptable-price td[data-label="Price"] { font-weight: 800; font-size: 1.15rem; } @media (max-width: 719px) { :root body.cpp .ptable-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } :root body.cpp .ptable-stack, :root body.cpp .ptable-stack tbody, :root body.cpp .ptable-stack tr, :root body.cpp .ptable-stack th, :root body.cpp .ptable-stack td { display: block; } :root body.cpp .ptable-stack tr { padding: .8rem 0; border-bottom: 1px solid var(--line); } :root body.cpp .ptable-stack tbody th, :root body.cpp .ptable-stack td { border: 0; padding: 0; } :root body.cpp .ptable-stack tbody th { margin-bottom: .35rem; } :root body.cpp .ptable-stack td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; } :root body.cpp .ptable-stack td::before { content: attr(data-label); color: var(--fg-soft); font-size: .92rem; text-align: left; } } :root body.cpp .cmp { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; } :root body.cpp .cmp th, :root body.cpp .cmp td { text-align: left; vertical-align: top; padding: .9rem; border-bottom: 1px solid var(--line); } :root body.cpp .cmp thead th { font-size: .92rem; font-weight: 700; color: var(--fg-soft); vertical-align: bottom; border-bottom: 2px solid var(--fg); } :root body.cpp .cmp thead th.us { color: var(--ink); background: var(--hl); } :root body.cpp .cmp tbody th { font-weight: 700; } :root body.cpp .cmp .us { background: #fff6d1; color: var(--ink); } :root body.cpp .cmp-after { max-width: 44em; margin-top: 1.5rem; } @media (max-width: 959px) { :root body.cpp .cmp, :root body.cpp .cmp tbody, :root body.cpp .cmp tr, :root body.cpp .cmp th, :root body.cpp .cmp td, :root body.cpp .cmp thead, :root body.cpp .cmp thead tr { display: block; } :root body.cpp .cmp { position: relative; } :root body.cpp .cmp thead { position: absolute; top: 0; left: 0; width: 100%; clip-path: inset(50%); pointer-events: none; } :root body.cpp .cmp tbody tr { border-top: 3px solid var(--fg); padding-top: .85rem; margin-bottom: .75rem; } :root body.cpp .cmp tbody th { padding: 0 0 .4rem; border: 0; } :root body.cpp .cmp tbody td { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem .5rem; border: 0; max-width: 40rem; } :root body.cpp .cmp tbody td::before { content: attr(data-label); font-size: .9rem; color: var(--fg-soft); } :root body.cpp .cmp tbody td.us::before { color: var(--ink); } :root body.cpp .cmp tbody td.us { border-radius: 6px; } } @media (min-width: 960px) { :root body.cpp .cmp { table-layout: fixed; } :root body.cpp .cmp thead td { width: 22%; } } :root body.cpp .form-wrap { display: grid; gap: 2rem; } @media (min-width: 960px) { :root body.cpp .form-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; } } :root body.cpp .form-copy p { max-width: 30em; } :root body.cpp .form-card { background: var(--paper); color: var(--ink); border-radius: var(--radius-card); padding: 1.5rem 1.25rem; box-shadow: 0 30px 50px -28px rgba(0,0,0,.7); --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--ink-soft); --link: var(--green); } @media (min-width: 720px) { :root body.cpp .form-card { padding: 2rem; } } :root body.cpp .form-h { font-size: 1.5rem; font-weight: 800; font-stretch: 90%; line-height: 1.15; margin: 0 0 .4rem; color: var(--ink); } :root body.cpp .form-sub { font-size: 1rem; color: var(--ink-soft); margin: 0 0 1.25rem; } :root body.cpp .field { margin-bottom: 1.1rem; } :root body.cpp .field label, :root body.cpp fieldset legend { display: block; font-weight: 700; font-size: 1rem; margin-bottom: .35rem; } :root body.cpp .hint { display: block; font-size: .88rem; color: var(--ink-soft); margin-top: .3rem; } :root body.cpp .req { color: var(--green); } :root body.cpp .form-card .muted { color: var(--ink-soft); font-weight: 500; } :root body.cpp input[type=text], :root body.cpp input[type=email], :root body.cpp input[type=number], :root body.cpp input[type=url], :root body.cpp select, :root body.cpp textarea { width: 100%; min-height: 52px; padding: .7rem .85rem; font: inherit; font-size: 1.05rem; color: var(--ink); background: #fff; border: 2px solid var(--field-stroke); border-radius: 10px; } :root body.cpp input[type=file] { display: block; width: 100%; font: inherit; font-size: .95rem; padding: .35rem 0; color: var(--ink-soft); } :root body.cpp input[type=file]::file-selector-button { margin-right: .75rem; min-height: 44px; padding: .45rem .95rem; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font: inherit; font-weight: 700; cursor: pointer; } :root body.cpp input[type=file]::file-selector-button:hover { background: var(--ink); color: #fff; } :root body.cpp textarea { min-height: 7rem; resize: vertical; } :root body.cpp input:hover, :root body.cpp textarea:hover, :root body.cpp select:hover { border-color: var(--ink); } :root body.cpp [aria-invalid="true"] { border-color: var(--error); background: #fff8f7; } :root body.cpp input:focus-visible, :root body.cpp select:focus-visible, :root body.cpp textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } :root body.cpp fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; } :root body.cpp .checks { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem; } :root body.cpp .check { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-size: 1rem; } :root body.cpp .check input { width: 1.3rem; height: 1.3rem; accent-color: var(--green); flex: none; margin: 0; } :root body.cpp .consent { align-items: flex-start; font-size: .95rem; } :root body.cpp .consent input { margin-top: .2rem; } :root body.cpp .gate-form { flex: 1 1 15rem; min-width: 0; } :root body.cpp .gate-form .field { margin-bottom: .5rem; } :root body.cpp .gate-form .consent { margin-bottom: .5rem; } :root body.cpp details.more { margin: 0 0 1rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } :root body.cpp details.more > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .6rem 0; font-weight: 700; cursor: pointer; list-style: none; color: var(--ink); } :root body.cpp details.more > summary::-webkit-details-marker { display: none; } :root body.cpp details.more > summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(45deg) translateY(-.15rem); } :root body.cpp details.more[open] > summary::after { transform: rotate(-135deg); } :root body.cpp details.more[open] > summary { margin-bottom: .75rem; } :root body.cpp .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } :root body.cpp .form-card .btn { width: 100%; margin-top: .5rem; } :root body.cpp .form-under { font-size: .9rem; color: var(--ink-soft); margin: .9rem 0 0; } :root body.cpp .form-status { margin-top: 1rem; font-weight: 600; } :root body.cpp .form-status.ok { color: var(--green-deep); } :root body.cpp .form-status.err { color: var(--error); } :root body.cpp .big-days { display: flex; align-items: baseline; gap: .75rem 1rem; flex-wrap: wrap; margin: 0 0 1rem; } :root body.cpp .big-days .big { color: var(--green); } :root body.cpp .big-days span:last-child { font-size: var(--fs-lede); font-weight: 700; } :root body.cpp .need-grid { display: grid; gap: 2rem 4rem; } @media (min-width: 960px) { :root body.cpp .need-grid { grid-template-columns: 1fr 1fr; align-items: start; } } :root body.cpp .need-grid .w-h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); } :root body.cpp .free-card { margin-top: 1.5rem; padding: 1.5rem 1.4rem; border-radius: var(--radius-card); box-shadow: inset 0 0 0 2px var(--ink); } :root body.cpp .free-card .w-h3 { margin-bottom: .4rem; } :root body.cpp .free-card ul { padding-left: 1.2rem; margin: 0 0 1rem; } :root body.cpp .card-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; } :root body.cpp .card-thumb { width: 110px; height: auto; border-radius: 4px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); } :root body.cpp .w-price-line { font-weight: 700; margin-bottom: 1rem; } :root body.cpp .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 64px; padding: 0 .75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--ink); border-top: 1px solid #3a4049; color: #fff; transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; } :root body.cpp .cta-bar.is-on { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; } :root body.cpp .cta-bar .btn { min-height: 48px; padding: .5rem 1.1rem; font-size: 1.05rem; } :root body.cpp .cta-bar p { margin: 0; } :root body.cpp .cta-bar .tlink-p a { color: #fff; font-weight: 700; text-decoration-color: var(--hl); white-space: nowrap; } @media (min-width: 1024px) { :root body.cpp .cta-bar { display: none; } } :root body.cpp .site-footer { background: var(--ink); color: var(--dark-soft); border-top: 1px solid #3a4049; padding: 3rem 0 6rem; font-size: 1rem; } :root body.cpp .foot-cols { display: grid; gap: 2rem; } :root body.cpp .foot-logo { height: 24px; width: auto; margin-bottom: 1rem; } :root body.cpp .foot-h { font-weight: 800; color: #fff; margin-bottom: .5rem; } :root body.cpp .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; } :root body.cpp .site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; } :root body.cpp .site-footer a { color: #fff; text-decoration-color: #6a717b; } :root body.cpp .site-footer a:hover { color: #fff; text-decoration-color: var(--hl); } :root body.cpp .site-footer p { max-width: 34em; } :root body.cpp .foot-legal { border-top: 1px solid #3a4049; margin: 2rem 0 0; padding-top: 1.25rem; font-size: .9rem; } :root body.cpp .foot-stages { display: grid; gap: .75rem 2rem; } :root body.cpp .foot-stage { margin: 0 0 .1rem; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--dark-soft); } @media (min-width: 720px) { :root body.cpp .foot-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } } @media (min-width: 1024px) { :root body.cpp .foot-cols { grid-template-columns: 1.2fr 2fr .9fr; } :root body.cpp .foot-stages { display: block; columns: 2; column-gap: 2rem; } :root body.cpp .foot-stages > div { break-inside: avoid; margin-bottom: .75rem; } } @media (min-width: 1024px) { :root body.cpp .site-footer { padding-bottom: 3rem; } } :root body.cpp .legal { padding: 3rem 0 4rem; } :root body.cpp .legal .w-h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); } :root body.cpp .legal .w-h2 { font-size: 1.5rem; margin-top: 2.25rem; } :root body.cpp .legal p, :root body.cpp .legal ul { max-width: 38em; } :root body.cpp .legal .notice { background: var(--green-tint); border-radius: var(--radius-card); padding: 1rem 1.15rem; font-size: 1rem; margin-bottom: 1.5rem; } :root body.cpp .thanks-thumb { width: 200px; height: auto; margin-top: 1.5rem; border-radius: 6px; } @media (min-width: 960px) { :root body.cpp .hero-svc .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; grid-template-areas: "h1 art" "top art" "act art"; } :root body.cpp .hero-svc .w-hero-h1 { font-size: clamp(2.75rem, 5.4vw, 5rem); margin-bottom: 1.5rem; } :root body.cpp .hero-svc .hero-art { align-self: start; } :root body.cpp .hero-svc .art-render .render-img { max-height: 34rem; width: auto; max-width: 100%; margin: 0 auto; } } :root body.cpp .pcard-price .pcard-strike { margin-left: .35em; font-size: .38em; font-weight: 700; letter-spacing: 0; color: var(--fg-soft); text-decoration-thickness: 2px; vertical-align: .55em; } :root body.cpp .f-ink .who-card { background: var(--ink-2); color: #fff; } :root body.cpp .f-ink .who-card a { color: #fff; } :root body.cpp details.fold { margin: 1rem 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } :root body.cpp details.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .75rem 0; font-weight: 700; cursor: pointer; list-style: none; } :root body.cpp details.fold > summary::-webkit-details-marker { display: none; } :root body.cpp details.fold > summary::after { content: ""; flex: none; width: .65rem; height: .65rem; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(45deg) translateY(-.15rem); } :root body.cpp details.fold[open] > summary::after { transform: rotate(-135deg); } :root body.cpp details.fold:not([open]) > :not(summary) { display: none; } :root body.cpp .f-ink details.fold > summary::after { border-color: #fff; } :root body.cpp .review-only { display: none !important; } :root body.cpp .hero-top .offer-line { margin-top: .9rem; } :root body.cpp .f-ink .dim > span, :root body.cpp .f-green .dim > span { color: #fff; } @media (max-width: 959px) { :root body.cpp .fld { padding: 2.75rem 0; } :root body.cpp .seal-big { width: min(48vw, 190px); } :root body.cpp .faq-split > .cta-card { display: none; } :root body.cpp .art-hide-phone { display: none; } :root body.cpp .pcard { padding: 1.35rem 1.2rem 1.25rem; } :root body.cpp .pcard-list li { padding-top: .4rem; padding-bottom: .4rem; } } @media (min-width: 960px) { :root body.cpp .prices { padding-top: clamp(3rem, 4.5vw, 4.5rem); } } :root body.cpp .band-price .ptable td[data-label="Price"] { white-space: normal; min-width: 6.5rem; } :root body.cpp .band-price .ptable { table-layout: auto; } :root body.cpp .qbody-wide { max-width: none; } :root body.cpp .qbody-wide > p { max-width: 36em; } @media (max-width: 719px) { :root body.cpp .ptable-stack thead { position: static; width: auto; height: 0; overflow: visible; clip-path: none; } :root body.cpp .ptable-stack thead tr { padding: 0; border: 0; } :root body.cpp .ptable-stack thead th { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } @media (min-width: 960px) and (max-width: 1199px) { :root body.cpp .band-price .ptable-stack thead { position: static; width: auto; height: 0; overflow: visible; clip-path: none; } :root body.cpp .band-price .ptable-stack thead tr { padding: 0; border: 0; } :root body.cpp .band-price .ptable-stack thead th { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :root body.cpp .band-price .ptable-stack, :root body.cpp .band-price .ptable-stack tbody, :root body.cpp .band-price .ptable-stack tr, :root body.cpp .band-price .ptable-stack th, :root body.cpp .band-price .ptable-stack td { display: block; } :root body.cpp .band-price .ptable-stack tr { padding: .8rem 0; border-bottom: 1px solid var(--line); } :root body.cpp .band-price .ptable-stack tbody th, :root body.cpp .band-price .ptable-stack td { border: 0; padding: 0; } :root body.cpp .band-price .ptable-stack tbody th { margin-bottom: .35rem; } :root body.cpp .band-price .ptable-stack td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; } :root body.cpp .band-price .ptable-stack td::before { content: attr(data-label); flex: none; white-space: nowrap; color: var(--fg-soft); font-size: .92rem; text-align: left; } } :root body.cpp .art-render .art-stage { aspect-ratio: auto; max-width: none; } :root body.cpp .art-render .render-img { display: block; width: 100%; height: auto; } :root body.cpp .art-render .art-stage > .seal-sm { position: absolute; left: 2%; top: 4%; bottom: auto; width: clamp(112px, 15%, 150px); max-width: none; transform: rotate(-10deg); box-shadow: 0 10px 18px rgba(0,0,0,.45); border-radius: 50%; } :root body.cpp .seal-img { display: block; width: 100%; height: auto; } @media (max-width: 959px) { :root body.cpp .art-render.art-k-spread .render-img, :root body.cpp .art-render.art-k-paperback .render-img { height: 280px; width: 100%; object-fit: cover; object-position: left bottom; } :root body.cpp .art-render.art-k-ebook .render-img, :root body.cpp .art-render.art-k-standing .render-img, :root body.cpp .art-render.art-k-cover .render-img { height: 280px; width: auto; margin: 0 auto; } } @media (min-width: 960px) { :root body.cpp .art-render.art-k-ebook .art-stage, :root body.cpp .art-render.art-k-standing .art-stage, :root body.cpp .art-render.art-k-cover .art-stage { max-width: 30rem; } } :root body.cpp .seal-big .seal-img { width: 100%; } :root body.cpp .facts-line { margin: .75rem 0 0; font-size: .95rem; color: var(--fg-soft); } :root body.cpp .cta-mid { margin-top: 2rem; } :root body.cpp .demo-label { display: grid; gap: .1rem; } :root body.cpp .demo-chip { justify-self: start; margin-top: .35rem; padding: .1rem .45rem; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; font-weight: 700; color: var(--fg-soft); } :root body.cpp .ba-frames { --pos: 46%; aspect-ratio: 4 / 5; max-width: 34rem; margin-left: auto; margin-right: auto; background: var(--green); } :root body.cpp .ba-frames .ba-before, :root body.cpp .ba-frames .ba-after { padding: 0; background: transparent; display: block; } :root body.cpp .ba-frames .ba-before img, :root body.cpp .ba-frames .ba-after img { width: 100%; height: 100%; max-width: none; object-fit: cover; box-shadow: none; } :root body.cpp .ba-page { position: absolute; left: 17.375%; top: 14.5%; width: 65.25%; height: 78.3%; pointer-events: none; --c: var(--hl); } :root body.cpp .ba-page .dim > span { color: #fff; } @media (max-width: 599px) { :root body.cpp .ba-page .dim > span { font-size: .62rem; } } :root body.cpp .js .rv { opacity: 0; transform: translateY(16px); transition: opacity .3s var(--ease), transform .3s var(--ease); } :root body.cpp .js .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } :root body.cpp *, :root body.cpp *::before, :root body.cpp *::after { transition: none !important; animation: none !important; } :root body.cpp .js .rv { opacity: 1; transform: none; } :root body.cpp .svc-card:hover, :root body.cpp .demo:hover .demo-img, :root body.cpp .btn-primary:hover, :root body.cpp .pcard-pick { transform: none; } } @media (min-width: 720px) { :root body.cpp .wrap { padding: 0 1.5rem; } } @media (min-width: 1280px) { :root body.cpp .wrap { padding: 0 2rem; } } :root body.cpp .hero-404 { min-height: min(72vh, 680px); display: flex; align-items: center; } :root body.cpp .hero-404 > .wrap { width: 100%; } :root body.cpp .hero-404 .w-hero-h1 { max-width: 13em; margin-bottom: .35em; } :root body.cpp .hero-long .w-hero-h1 { font-size: clamp(2.25rem, 3.6vw, 3.4rem); } :root body.cpp .price-jump { padding-block: clamp(2.5rem, 5vw, 4rem); } :root body.cpp .price-jump .lede { margin: 0 0 1.25rem; } :root body.cpp .t-min { display: block; font-size: .85em; color: var(--fg-soft, inherit); } /* ---------- bridge ---------- */ /* Elementor bridge (BOOK-62, redesigned for BOOK-63). Part 1 of cpp.css is the static stylesheet; these rules let it land on Elementor's markup: containers act like the static divs, widget wrappers take the grid and flex placement the static elements had, and Elementor's own button and accordion styles give way to the site's. */ /* ---------- tokens follow Elementor's global colours (Site Settings > Global Colors) ---------- */ :root body.cpp { --paper: var(--e-global-color-paper, #ffffff); --ink: var(--e-global-color-text, #1b1f24); --ink-soft: var(--e-global-color-inksoft, #555b63); --dark-soft: var(--e-global-color-darksoft, #b9bec5); --green: var(--e-global-color-primary, #1f6b43); --green-deep: var(--e-global-color-secondary, #174f32); --green-tint: var(--e-global-color-accent, #e5ede7); --green-on-ink: var(--e-global-color-greenonink, #6fb58f); --hl: var(--e-global-color-highlighter, #ffd43b); --field-stroke: var(--e-global-color-fieldstroke, #8a929d); --error: var(--e-global-color-error, #a3261b); --focus: var(--e-global-color-focus, #1f5f8b); /* names the BOOK-62 form rules below still use */ --accent: var(--green); --accent-dark: var(--green-deep); } /* ---------- containers: block boxes unless styles.css gives them a grid or flex layout ---------- */ :root body.cpp :where(.e-con) { display: block; padding: 0; margin: 0; gap: 0; width: auto; min-width: 0; transition: none; } :root body.cpp .e-con { --flex-direction: row; --flex-wrap: nowrap; --flex-wrap-mobile: nowrap; --align-items: normal; --align-content: normal; --justify-content: normal; --row-gap: 0px; --column-gap: 0px; --width: auto; --position: static; } :root body.cpp :where(.e-con).cpp-ld, :root body.cpp :where(.e-con).cpp-scripts { display: none; } /* the header and footer templates' own wrapper steps aside, so the header can stick to the page */ :root body.cpp > .elementor[data-elementor-type="section"], :root body.cpp > .elementor[data-elementor-type="header"], :root body.cpp > .elementor[data-elementor-type="footer"] { display: contents; } /* Header bug (owner's screenshot, BOOK-63): the header drawn about 600 px down with blank page above it at 1920 px. It shows up in a capture taken while a smooth scroll is still running: the sticky header is painted at an in-between offset and the tiles above it are not painted yet. Jumps are instant, and the header sticks at 0. */ html { scroll-behavior: auto !important; } :root body.cpp .site-header { position: sticky; top: 0; } /* sections that place children themselves keep Elementor's position: relative off; these need it */ :root body.cpp .hero-art, :root body.cpp .art-stage, :root body.cpp .ba, :root body.cpp .svc-card, :root body.cpp .spread { position: relative; } :root body.cpp .art-stage > .e-con { position: absolute; } /* an HTML widget kept whole (x-html) steps aside for positioning: the seal sits on the art stage, not on a 0 px wrapper */ :root body.cpp .elementor-widget-html.w-x-html { position: static; } :root body.cpp .cta-bar { position: fixed; } /* BOOK-73: the nowrap prices link keeps its width; the button wraps instead of pushing it off a 320 px screen */ :root body.cpp .cta-bar .w-tlink-p { flex: none; } /* Elementor's ".elementor a { text-decoration: none }" would hide the underlines the site keeps. */ :root body.cpp a { text-decoration: underline; } :root body.cpp a.btn, :root body.cpp .elementor-button, :root body.cpp .drop-list a, :root body.cpp .phone-top a, :root body.cpp .nav-desk a { text-decoration: none; } /* ---------- headings: the wrapper carries the type, the h tag inherits it ---------- */ :root body.cpp .elementor-heading-title { font: inherit; letter-spacing: inherit; text-wrap: inherit; color: inherit; margin: 0; padding: 0; } :root body.cpp .elementor-widget-heading.w-h1, :root body.cpp .elementor-widget-heading.w-h2, :root body.cpp .elementor-widget-heading.w-h3 { color: var(--fg); } /* ---------- text widgets ---------- */ :root body.cpp p { text-wrap: pretty; } :root body.cpp .elementor-widget-text-editor > :last-child { margin-bottom: 0; } :root body.cpp .qbody > .elementor-widget-text-editor > :last-child, :root body.cpp .qbody > :last-child { margin-bottom: 0; } @media (max-width: 959px) { :root body.cpp .cmp tbody td { max-width: 40rem; } } @media (max-width: 719px) { :root body.cpp .ptable-stack thead { position: static; width: auto; height: 0; overflow: visible; clip-path: none; } :root body.cpp .ptable-stack thead tr { padding: 0; border: 0; } :root body.cpp .ptable-stack thead th { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* ---------- images: a widget wrapper never shrinks its picture in a flex row ---------- */ :root body.cpp .elementor-widget-image { flex: none; text-align: left; } :root body.cpp .elementor-widget-image img { display: block; } :root body.cpp .svc-pic > .elementor-widget-image { height: 100%; display: flex; justify-content: center; align-items: flex-end; } :root body.cpp .svc-pic > .elementor-widget-image img { height: 100%; width: auto; max-width: 100%; object-fit: contain; } :root body.cpp .art-book > .elementor-widget-image img, :root body.cpp .art-phone > .elementor-widget-image img { width: 100%; } :root body.cpp .ba-before > .elementor-widget-image { height: 100%; display: flex; justify-content: center; } :root body.cpp .ba-before > .elementor-widget-image img { height: 100%; width: auto; max-width: none; } :root body.cpp .ba-after > .spread { height: 100%; } :root body.cpp .ba-after > .spread > .elementor-widget-image { height: 100%; } :root body.cpp .ba-after > .spread > .elementor-widget-image img { height: 100%; width: auto; max-width: none; } :root body.cpp .spread > .w-marks { position: static; } :root body.cpp .ba-ui.elementor-widget-html, :root body.cpp .w-ba-ui { position: absolute; inset: 0; } /* ---------- buttons: Elementor's Button widget in the site's button styles ---------- */ :root body.cpp .w-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; padding: .85rem 1.6rem; border: 0; border-radius: var(--radius); font-family: var(--font); font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), color .18s var(--ease); } :root body.cpp .w-btn .elementor-button-content-wrapper, :root body.cpp .w-btn .elementor-button-text { display: contents; } :root body.cpp .w-btn-primary .elementor-button { background: var(--hl); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); } :root body.cpp .w-btn-primary .elementor-button:hover { background: var(--hl-deep); color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 -4px 0 var(--ink); } :root body.cpp .w-btn-ghost .elementor-button { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; } :root body.cpp .w-btn-ghost .elementor-button:hover { background: var(--fg); color: var(--bg); } :root body.cpp .w-btn-sm .elementor-button { min-height: 44px; padding: .5rem 1.05rem; font-size: 1rem; border-radius: 12px; } :root body.cpp .w-btn .elementor-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } :root body.cpp .f-ink .w-btn .elementor-button:focus-visible, :root body.cpp .f-green .w-btn .elementor-button:focus-visible, :root body.cpp .site-header .w-btn .elementor-button:focus-visible, :root body.cpp .cta-bar .w-btn .elementor-button:focus-visible, :root body.cpp .cta-card .w-btn .elementor-button:focus-visible { outline-color: var(--hl); } :root body.cpp .pcard .w-btn, :root body.cpp .pcard .w-btn .elementor-button, :root body.cpp .cta-card .w-btn .elementor-button, :root body.cpp .form-card .btn { width: 100%; } :root body.cpp .pcard > .w-pcard-btn { margin-top: auto; } :root body.cpp .cta-bar .w-btn .elementor-button { min-height: 48px; padding: .5rem 1.1rem; font-size: 1.05rem; } /* BOOK-81-2: at 320 px the bar had 142 px for a button whose label needs 178, so "Get a free sample" wrapped to two lines (56 px). Under 360 px the bar's side padding and gap step down and the button's padding and type size follow (151 px wide, one line, still 48 px tall). 360 px and wider are untouched. BOOK-84: the 7 service pages with a longer button ("Tell us about your books", "Order a cover wrap, $99") still took two lines at 320, 360 and 390. Under 420 px the link and the button share one type size (.95rem), so the bar's two labels match, and the button's side padding is .75rem. Under 360 px both step down to .875rem. */ @media (max-width: 419px) { :root body.cpp .cta-bar .tlink-p a { font-size: .95rem; } :root body.cpp .cta-bar .w-btn .elementor-button { padding: .5rem .75rem; font-size: .95rem; } } @media (max-width: 359px) { :root body.cpp .cta-bar { padding: 0 .5rem; gap: .5rem; } :root body.cpp .cta-bar .tlink-p a { font-size: .875rem; } :root body.cpp .cta-bar .w-btn .elementor-button { padding: .5rem .625rem; font-size: .875rem; } } @media (prefers-reduced-motion: reduce) { :root body.cpp .w-btn-primary .elementor-button:hover { transform: none; } } /* ---------- header: logo left, nav, the Highlighter button, the phone menu ---------- */ :root body.cpp .site-header .e-con:not(.site-header), :root body.cpp .site-header .elementor-widget { position: static; } :root body.cpp .head-row > .elementor-widget-image { margin-right: auto; } :root body.cpp .head-row > .elementor-widget-image a { display: flex; align-items: center; padding: .25rem 0; } :root body.cpp .head-row > .elementor-widget-image img { height: 22px; width: auto; } :root body.cpp .nav-drop .drop-list, :root body.cpp .phone-panel { z-index: 50; } :root body.cpp .w-nav-desk { display: none; } :root body.cpp .w-head-cta, :root body.cpp .w-nav-phone { flex: none; } @media (max-width: 479px) { :root body.cpp .head-row > .elementor-widget-image img { height: 16px; } :root body.cpp .w-head-cta .elementor-button { padding: .45rem .7rem; font-size: .95rem; } } /* BOOK-73: the logo, Free sample and Menu need 331 px, so the row needs a 363 px screen. Squeezed at 320, the Menu button's label spilled 17 px past the edge; now Menu keeps its width and under 370 px the logo and both buttons step down (283 px). */ @media (max-width: 369px) { :root body.cpp .head-row { gap: .35rem; } :root body.cpp .head-row > .elementor-widget-image img { height: 13px; } :root body.cpp .w-head-cta .elementor-button, :root body.cpp .nav-phone > summary { padding: .45rem .5rem; font-size: .875rem; } } @media (min-width: 1100px) { :root body.cpp .w-nav-desk { display: block; } :root body.cpp .w-nav-phone { display: none; } :root body.cpp .head-row > .elementor-widget-image img { height: 26px; } } /* ---------- footer ---------- */ :root body.cpp .site-footer .elementor-widget-image img { height: 24px; width: auto; margin-bottom: 1rem; } /* ---------- widths: Elementor caps widgets at max-width 100% with ".elementor.elementor .e-con > .elementor-widget" ---------- */ :root body.cpp .elementor.elementor .e-con > .w-hero-h1 { max-width: 15em; } :root body.cpp .elementor.elementor .e-con > .w-faq { max-width: none; } /* ---------- FAQ blocks: Elementor's nested Accordion in the site's look ---------- */ :root body.cpp .w-faq { --n-accordion-border-width: 0px; --n-accordion-padding: 1.15rem 2.5rem 1.15rem 0; --n-accordion-title-font-size: 1.2rem; --n-accordion-title-normal-color: var(--fg); --n-accordion-title-hover-color: var(--fg); --n-accordion-title-active-color: var(--fg); --n-accordion-icon-gap: 0; width: auto; } :root body.cpp .w-faq .e-n-accordion-item { display: block; border-bottom: 1px solid var(--line); } :root body.cpp .w-faq .e-n-accordion-item:first-child { border-top: 3px solid var(--fg); } :root body.cpp .w-faq .e-n-accordion-item-title { display: block; position: relative; } :root body.cpp .w-faq .e-n-accordion-item-title::after { content: ""; position: absolute; right: .4rem; top: 1.4rem; width: .7rem; height: .7rem; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(45deg); } :root body.cpp .w-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: translateY(.3rem) rotate(-135deg); } :root body.cpp .w-faq .e-n-accordion-item-title-header { display: inline; } :root body.cpp .w-faq .e-n-accordion-item-title-text { font-weight: 700; font-size: 1.2rem; line-height: 1.35; } :root body.cpp .w-faq .e-n-accordion-item-title-icon { display: none; } :root body.cpp .w-faq .e-n-accordion-item > .e-con { border: 0; } :root body.cpp .w-faq .faq-a p { margin: 0 0 1.25rem; color: var(--fg-soft); max-width: 36em; } :root body.cpp .w-faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } /* ---------- Contact Form 7 inside the white form card (BOOK-63 redesign) ---------- */ :root body.cpp .form-card .wpcf7 input[type=submit] { width: 100%; margin-top: .5rem; } :root body.cpp .form-card .req { color: var(--green); } /* ---------- forms: Contact Form 7 markup in the approved form look (BOOK-63) ---------- */ :root body.cpp .wpcf7-form-control-wrap { display: block; } :root body.cpp .wpcf7 .hidden-fields-container { display: none; } :root body.cpp .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root body.cpp .checks .wpcf7-form-control-wrap, :root body.cpp .checks .wpcf7-checkbox, :root body.cpp .checks .wpcf7-list-item { display: contents; } :root body.cpp .wpcf7-list-item { display: block; margin: 0; } :root body.cpp .wpcf7-list-item label { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-family: var(--font-sans); font-size: .98rem; } :root body.cpp .wpcf7-list-item input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); flex: none; margin: 0; } :root body.cpp .consent .wpcf7-list-item label { align-items: flex-start; } :root body.cpp .consent .wpcf7-list-item input { margin-top: .2rem; } :root body.cpp .consent { margin-bottom: .5rem; } :root body.cpp .wpcf7-not-valid-tip { display: block; font-family: var(--font-sans); font-size: .85rem; color: var(--error); margin-top: .3rem; } :root body.cpp .wpcf7-response-output { font-family: var(--font-sans); margin: 1rem 0 0; } :root body.cpp .wpcf7-form.invalid .wpcf7-response-output, :root body.cpp .wpcf7-form.failed .wpcf7-response-output, :root body.cpp .wpcf7-form.spam .wpcf7-response-output, :root body.cpp .wpcf7-form.aborted .wpcf7-response-output { color: var(--error); } :root body.cpp .wpcf7-form.sent .wpcf7-response-output { color: var(--accent-dark); } :root body.cpp .wpcf7-form.submitting input[type=submit] { opacity: .6; cursor: progress; } :root body.cpp .wpcf7-spinner { display: none; } :root body.cpp .gate-form input[type=submit] { width: auto; } /* a paragraph widget drops its bottom margin, so a subheading after it gets the space back (home, "Is your book still yours?") */ :root body.cpp .elementor-widget-text-editor + .elementor-widget-heading.w-h3 { margin-top: 2rem; } /* ---------- BOOK-63 gate pass ---------- */ /* Measure: Bricolage's 0 is 0.65em wide, so 68ch came to 44em and detect read it as 86 to 104 characters a line. 60ch is 39em, about 62 real characters a line in this face. */ :root body.cpp :is(.ba-cap, .wc-note, .prices-after p, .cmp-after, .note, .section-head p) { max-width: 60ch; } /* One card layer: the service card keeps its ink outline; the page mock in its picture panel (the proofreading card) drops its own shadow and rounded corners and sits flat on the green panel. */ :root body.cpp .svc-card .mini-sheet { box-shadow: none; border-radius: 0; } /* The small seal carries its yellow as a CSS backing too, so its text never reads against the book photo behind it. */ :root body.cpp .seal-sm { background: var(--hl); color: var(--ink); } /* Home H1 is 68 characters: at laptop widths it stops at 72 px so it does not fill a third of the first screen. From 1400 px it may grow to 80 px, not the 94 px display size, which filled 31% of a 900 px screen (BOOK-76). */ @media (min-width: 960px) and (max-width: 1399px) { :root body.cpp.home .w-hero-h1 .elementor-heading-title { font-size: min(var(--fs-display), 4.5rem); } } @media (min-width: 1400px) { :root body.cpp.home .w-hero-h1 .elementor-heading-title { font-size: min(var(--fs-display), 5rem); } } /* ---------- BOOK-63 fix round 2 (QA 13517, art director 13520/13521) ---------- */ /* Demo wall: the eight renders of our two demo books, each tile an Image widget, lifted on hover. */ :root body.cpp .demo > .elementor-widget-image img { display: block; width: 100%; height: auto; border-radius: 6px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } :root body.cpp .demo:hover > .elementor-widget-image img { transform: translateY(-6px); box-shadow: 0 26px 32px -16px rgba(0,0,0,.85); } @media (prefers-reduced-motion: reduce) { :root body.cpp .demo:hover > .elementor-widget-image img { transform: none; } } /* Yellow stays on buttons, one headline word and the seal: step times turn green text, the launch offer an ink rule. */ :root body.cpp .steps .st-t { background: transparent; color: var(--green); padding: 0; } :root body.cpp .prices-after p.offer { background: transparent; border-left: 4px solid var(--ink); border-radius: 0; } /* Price cards: one baseline for the three order buttons. */ :root body.cpp .w-pcard-for { margin-bottom: 1rem !important; } :root body.cpp .pcard-body { display: flex; flex-direction: column; } :root body.cpp .w-pcard-btn { margin-top: auto; } /* the picked card is lifted 14 px; it runs 14 px longer so its button still lands on the shared baseline */ @media (min-width: 960px) { :root body.cpp .pcard-pick { margin-bottom: -14px; } } /* Hero caption sits under the art stage, clear of the art at every width. */ :root body.cpp .art-tag, :root body.cpp .w-art-tag { position: static; margin-top: .75rem; text-align: right; padding-left: 0; } /* the tilted phone and book run 24 to 60 px past the stage's box, so the caption drops below them */ :root body.cpp .art-tag, :root body.cpp .w-art-tag { margin-top: 3.6vw; } @media (max-width: 959px) { :root body.cpp .art-tag, :root body.cpp .w-art-tag { margin-top: 4.5rem; } } :root body.cpp .cta-mid { margin-top: 2rem; } :root body.cpp .prices-after > .cta-mid, :root body.cpp .prices-after .w-cta-mid { margin-top: .5rem; } /* ---------- BOOK-63 renders and conversion slots ---------- */ /* Hero render: an Image widget, full width of the art stage; the small seal sits on it as an image too. */ :root body.cpp .art-render .art-stage > .elementor-widget-image img { display: block; width: 100%; height: auto; } :root body.cpp .art-render .art-stage > .seal-sm .elementor-widget-image img { width: 100%; height: auto; } @media (max-width: 959px) { :root body.cpp .art-render.art-k-spread .art-stage > .elementor-widget-image img, :root body.cpp .art-render.art-k-paperback .art-stage > .elementor-widget-image img { height: 280px; object-fit: cover; object-position: left bottom; } :root body.cpp .art-render.art-k-ebook .art-stage > .elementor-widget-image img, :root body.cpp .art-render.art-k-standing .art-stage > .elementor-widget-image img, :root body.cpp .art-render.art-k-cover .art-stage > .elementor-widget-image img { height: 280px; width: auto; margin: 0 auto; } } :root body.cpp .art-render .art-tag, :root body.cpp .art-render .w-art-tag { margin-top: .75rem; } /* Framed slider: each frame is an Image widget filling the 4:5 box; the marks overlay is an HTML widget. */ :root body.cpp .ba-frames .ba-before > .elementor-widget-image, :root body.cpp .ba-frames .ba-after > .elementor-widget-image { height: 100%; display: block; } :root body.cpp .ba-frames .elementor-widget-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; } :root body.cpp .ba-frames .ba-after > .w-ba-page { position: absolute; left: 17.375%; top: 14.5%; width: 65.25%; height: 78.3%; } :root body.cpp .ba-frames .ba-after > .w-ba-page .ba-page { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; } /* Guarantee seal as an image. */ :root body.cpp .seal-big > .elementor-widget-image img { width: 100%; height: auto; } /* HubSpot chat (owner decision, loaded after the first interaction): on phones it rides above the sticky bar. */ @media (max-width: 1023px) { :root body.cpp.bar-on #hubspot-messages-iframe-container { transform: translateY(-64px) !important; } } /* The hero render's top edge runs a few shades lighter than the Ink field; fade the top and left edges into it. */ :root body.cpp .art-render.art-k-spread .art-stage > .elementor-widget-image img, :root body.cpp .art-render.art-k-paperback .art-stage > .elementor-widget-image img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%), linear-gradient(to right, transparent 0, #000 4%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 16%), linear-gradient(to right, transparent 0, #000 4%); mask-composite: intersect; } /* Phone first screen: H1, the book, the button and the whole fact strip inside 844 px. */ @media (max-width: 959px) { :root body.cpp .art-render.art-k-spread .art-stage > .elementor-widget-image img { height: 236px; } :root body.cpp .hero-top .cta-row { margin-top: .75rem; } :root body.cpp .hero .hero-grid { gap: .9rem; } } /* light renders carry their own soft shadow */ :root body.cpp .svc-pic img[src*="renders/"] { box-shadow: none; } /* detect 390: the hero art box stays inside the 16 px gutter on phones */ @media (max-width: 959px) { :root body.cpp .hero-grid > .hero-art { margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; } } /* detect 800: a stacked price card keeps its list under 80 characters a line */ @media (max-width: 959px) { :root body.cpp .price-cards > .pcard { max-width: 36rem; } } /* detect 800: the stacked form card and its note keep a reading measure */ @media (max-width: 959px) { :root body.cpp .form-wrap > .form-card { max-width: 40rem; } } :root body.cpp .form-under { max-width: 60ch; } /* ---------- forms: Elementor Pro Form widgets (BOOK-63). The theme puts "field" on each field group and the Button widget's w-btn classes on the submit group, so the rules above apply; these fit the rest of Pro's markup ---------- */ :root body.cpp .w-pro-form .elementor-form-fields-wrapper { display: block; margin: 0; } :root body.cpp .w-pro-form .elementor-field-group { padding: 0; } :root body.cpp .w-pro-form .e-form__buttons { display: block; } :root body.cpp .w-pro-form .e-form__buttons .elementor-button { width: 100%; } :root body.cpp .w-pro-form.gate-form .e-form__buttons .elementor-button { width: auto; } :root body.cpp .w-pro-form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: .55rem; min-height: 44px; font-size: .95rem; } :root body.cpp .w-pro-form .elementor-field-type-acceptance label { font-weight: 400; font-size: inherit; margin: 0; } :root body.cpp .w-pro-form .elementor-field-type-acceptance input { width: 1.3rem; height: 1.3rem; accent-color: var(--green); flex: none; margin: .2rem 0 0; } :root body.cpp .w-pro-form details.more { width: 100%; } :root body.cpp .w-pro-form .elementor-message { font-family: var(--font-sans); margin: 1rem 0 0; } :root body.cpp .w-pro-form .elementor-message::before { display: none; } :root body.cpp .w-pro-form .elementor-message-danger, :root body.cpp .w-pro-form .elementor-error .elementor-message { color: var(--error); } :root body.cpp .w-pro-form .elementor-error .elementor-field { border-color: var(--error); border-width: 2px; } /* Pro writes default button colours for each form element at the same weight as the rules above; the [type] keeps ours ahead */ :root body.cpp .w-pro-form .w-btn-primary .elementor-button[type="submit"] { background: var(--hl); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); } :root body.cpp .w-pro-form .w-btn-primary .elementor-button[type="submit"]:hover { background: var(--hl-deep); color: var(--ink); box-shadow: inset 0 -4px 0 var(--ink); } :root body.cpp .w-pro-form .w-btn-ghost .elementor-button[type="submit"] { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; } :root body.cpp .w-pro-form .w-btn-ghost .elementor-button[type="submit"]:hover { background: var(--fg); color: var(--bg); } /* a closed fold hides its fields outright: Chrome still lays out a closed details element's content (as with the menus) */ :root body.cpp details.more:not([open]) > :not(summary) { display: none; } /* ---------- art-director fixes (BOOK-63 review) ---------- */ /* sticky phone bar: Ink text on the Highlighter button (11.6:1), the prices link stays white */ :root body.cpp .cta-bar .w-btn-primary .elementor-button, :root body.cpp .cta-bar .w-btn-primary .elementor-button:hover { color: var(--ink); } /* service heroes: the render image widget keeps the column's height limit */ @media (min-width: 960px) { :root body.cpp .hero-svc .art-render .art-stage > .elementor-widget-image img { max-height: 34rem; width: auto; max-width: 100%; margin: 0 auto; } } /* review mode (?review=1, set by the theme): the proposals waiting on OWN-117 show again */ :root body.cpp.cpp-review .review-only { display: revert !important; } :root body.cpp.cpp-review section.review-only, :root body.cpp.cpp-review .e-con.review-only { display: block !important; } /* the five service renders (4:5) keep the phone hero at 280 px tall, centred */ @media (max-width: 959px) { :root body.cpp .art-render[class*="art-k-svc"] .art-stage > .elementor-widget-image img { height: 280px; width: auto; margin: 0 auto; } } /* phones: H1, book, lede and button, the fact strip, then the launch offer line, so the strip stays in the first screen */ @media (max-width: 959px) { :root body.cpp .hero .hero-top { display: contents; } :root body.cpp .hero .hero-top > * { order: 3; } :root body.cpp .hero .hero-top > .w-offer-line { order: 5; margin-top: .25rem; } :root body.cpp .hero .hero-act { order: 4; } } @media (max-width: 959px) { :root body.cpp .hero .hero-top > .cta-row { margin-top: 0; } :root body.cpp .art-render.art-k-spread .art-stage > .elementor-widget-image img { height: 212px; } } @media (max-width: 959px) { :root body.cpp .fld { padding-top: 2.5rem; padding-bottom: 2.5rem; } } /* ---------- sections that change colour to keep neighbours apart (QA round, BOOK-63) ---------- */ :root body.cpp .f-ink .steps .st-t, :root body.cpp .f-green .steps .st-t { color: #fff; } :root body.cpp .f-ink .steps li::before { color: var(--green-on-ink); } :root body.cpp .f-green .steps li::before { color: #fff; } :root body.cpp .f-ink .cta-card { background: var(--ink-2); box-shadow: inset 0 0 0 1px #3a4049; } :root body.cpp .f-green .w-faq .e-n-accordion-item-title::after, :root body.cpp .f-green .faq summary::after { border-color: #fff; } :root body.cpp .f-ink .w-faq .e-n-accordion-item-title::after, :root body.cpp .f-ink .faq summary::after { border-color: var(--green-on-ink); } :root body.cpp .f-green details.fold > summary::after, :root body.cpp .f-ink details.fold > summary::after { border-color: #fff; } :root body.cpp .f-green .faq-more a, :root body.cpp .f-ink .faq-more a { color: #fff; } /* the review layer's public line: hidden in review mode, where the proposed figures show */ :root body.cpp.cpp-review .public-only { display: none; } /* ---------- art-director fixes (BOOK-75 review, comment 14105): the new service pages ---------- */ /* 1. the intro lede keeps a clear gap above the first question's 3 px rule */ :root body.cpp .qsec .sec-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } /* 2. the Green proof band: the service render large, with numbered callouts beside it */ :root body.cpp .pband { display: grid; gap: 2rem; align-items: center; } :root body.cpp .pband-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.05; margin: 0 0 1.5rem; } :root body.cpp .callouts { list-style: none; counter-reset: callout; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 30rem; } :root body.cpp .callouts li { counter-increment: callout; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1.1rem; border-top: 1px solid var(--line); margin: 0; } :root body.cpp .callouts li::before { content: counter(callout); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--hl); color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; } :root body.cpp .callouts p { margin: 0; font-size: 1.1rem; line-height: 1.45; color: #fff; } :root body.cpp .pband-art img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 28px 56px rgba(0, 0, 0, .3); } @media (min-width: 960px) { :root body.cpp .pband { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } :root body.cpp .pband-art img { width: auto; max-width: 100%; max-height: min(48rem, calc(100vh - 6rem)); margin-left: auto; } } /* 3. the price band stacks: heading and number on top, the table the full width below, each price on one line */ :root body.cpp .band-price.band-stack { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2rem; } :root body.cpp .band-price.band-stack .ptable { table-layout: auto; } :root body.cpp .band-price.band-stack .ptable td[data-label="Price"], :root body.cpp .band-price.band-stack .ptable td[data-label="Minimum"] { white-space: nowrap; min-width: 0; } /* 4. the hero render takes 55% of the row, runs off the right edge and sits centred on the H1 column */ @media (min-width: 960px) { :root body.cpp .hero-wide .hero-grid { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". art" "h1 art" "top art" "act art" ". art"; } :root body.cpp .hero-wide .w-hero-h1, :root body.cpp .hero-wide .hero-h1 { font-size: clamp(2.5rem, 3.4vw, 3.25rem); } :root body.cpp .hero-wide .hero-grid > .hero-art { align-self: center; margin-right: calc(-1 * max(2rem, (100vw - var(--wrap)) / 2 + 2rem)); } :root body.cpp .hero-wide .art-render .art-stage > .elementor-widget-image img, :root body.cpp .hero-wide .art-render .render-img { width: 100%; max-width: 47.5rem; height: auto; max-height: calc(100vh - 6rem); object-fit: contain; object-position: left center; margin: 0; } } /* detect 1280: the stacked price band's notes under the full-width table keep a reading measure */ :root body.cpp .band-price.band-stack .qbody p, :root body.cpp .band-price.band-stack .qbody li { max-width: 38em; } /* detect 1280: the full-width table keeps its text column to a reading measure; the spare width goes to price and days */ @media (min-width: 960px) { :root body.cpp .band-price.band-stack .ptable td[data-label="What you get"] { width: 32em; } :root body.cpp .band-price.band-stack .ptable:not(:has(td[data-label="What you get"])) tbody th { width: 32em; } } /* BOOK-85 QA 14974: the card link's stretched ::after must cover the whole card, so the Elementor widget that holds the link stays unpositioned and the card is the containing block (home cards and the next-stage card) */ :root body.cpp .svc-card .elementor-element:has(> .svc-link), :root body.cpp .svc-card .elementor-element:has(.svc-link a), :root body.cpp .svc-card .elementor-widget-container:has(.svc-link a) { position: static; } :root body.cpp .svc-card .svc-link a::after { z-index: 1; } /* BOOK-85 card 9: the FAQ stage-group heading is a heading widget, so the class sits on the widget (w-qa-group) */ :root body.cpp .w-qa-group { margin-top: 3rem; } :root body.cpp .w-qa-group .elementor-heading-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--green); } :root body.cpp .hero-long .w-hero-h1, :root body.cpp .hero-long .hero-h1, :root body.cpp .hero-long .w-hero-h1 .elementor-heading-title { font-size: clamp(2.25rem, 3.6vw, 3.4rem); } /* BOOK-85 card 8, art director 15019 (Elementor build) */ :root body.cpp .price-jump, :root body.cpp .w-price-jump { padding-block: clamp(2.5rem, 5vw, 4rem); } :root body.cpp .price-jump .lede, :root body.cpp .price-jump .w-lede, :root body.cpp .price-jump .w-lede p { margin: 0 0 1.25rem; } :root body.cpp .t-min { display: block; font-size: .85em; } /* BOOK-87, art director 15352: the price band's big price line sits apart from the note above it and the buttons below */ :root body.cpp .band-price .w-text.w-p:not(.w-big) + .w-big { margin-top: 1.5rem; } :root body.cpp .band-price .w-big + .cta-row { margin-top: 1rem; } @media (max-width: 959px) { :root body.cpp .band-price .w-text.w-p:not(.w-big) + .w-big { margin-top: 1.25rem; } } /* BOOK-87, art director 15419 fix 4: the before/after H2 next to the slider stays at 3 lines or fewer at 1440 */ :root body.cpp .ba-copy h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); } /* BOOK-103 h103-5, art director 18678: the "In brief" answer block after the hero. Existing tokens only: one 2px ink rule (the stage-head mark), a green label set as a p, the question one step under the section H2s, the answer at lede size. The strip after it loses its top padding (.f-white + .f-white), so this field keeps a bottom padding one step under .fld (the .prices step). */ :root body.cpp .fld.inbrief-fld { padding-bottom: clamp(3rem, 4.5vw, 4.5rem); } :root body.cpp .inbrief { border-top: 2px solid var(--ink); padding-top: .75rem; } :root body.cpp .inbrief .inbrief-label { margin: 0 0 .6rem; font-size: var(--fs-label); font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--green); } :root body.cpp .inbrief .w-inbrief-h, :root body.cpp .inbrief .w-inbrief-h .elementor-heading-title { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.05; color: var(--ink); } :root body.cpp .inbrief .w-inbrief-h { margin: 0 0 1rem; max-width: 22em; } :root body.cpp .inbrief .w-inbrief-p p { margin: 0; max-width: 40em; font-size: var(--fs-lede); line-height: 1.45; color: var(--ink); } /* BOOK-103, impeccable line-length: the family lines (h103-6 to h103-19 made them full paragraphs) and the In brief answer stay under ~80 characters a line at 1440 */ :root body.cpp .stage-head p, :root body.cpp .inbrief .w-inbrief-p p { max-width: 38em; } /* BOOK-103, impeccable on the pages the ops edit (live had both before): paragraphs in the dark price band stay under ~80 characters a line at 1440 and 1280, and the 71-character ebook H1 takes the hero-long size (the .hero-long rule, set by page id because the live class list holds hero-svc, not hero-long) */ :root body.cpp .band-price .w-text p { max-width: 34em; } :root body.cpp.page-id-48 .hero-svc .w-hero-h1, :root body.cpp.page-id-48 .hero-svc .w-hero-h1 .elementor-heading-title { font-size: clamp(2.75rem, 3.6vw, 3.4rem); }