/* SIZES AS THE MOCKUP (v0.3.1311, hers: "Everything on the sales page is a bit smaller than the mockup still"). The mockup is
   17px text zoomed 1.18 on a computer -- her 20px body -- and the first build had turned each of its px sizes into px / 20,
   so all of them were 17/20 of the mockup. Each size measured against the page text is now px / 17; a size measured against
   a parent that has its own size keeps its ratio.
   The membership sales page (v0.3.1295) -- its own pair, loaded only on a page that carries a sales block (her sitewide
   rule). Drawn from the approved mockup, docs/planned/membership/sales-page.mockup.html. The theme's font, em sizes
   (never rem), no rounded corners, her 2026 palette named once here. */
.jcp-sp, .jcp-sp-joinbar {
    --sp-ink: var(--jcp-text, #2e2e30);
    --sp-text: #555557;
    --sp-muted: #8a8a8d;
    --sp-sage: #daede9;
    --sp-mint: #bad7d2;
    --sp-offwhite: #f6fafa;
    --sp-coral: #ff8d69;
    --sp-softcoral: #ffb197;
    --sp-peach: #fec9b0;
    --sp-peachbg: #fff4ef;
    --sp-yellow: #f8e38d;
    --sp-line: #dededf;
}
.jcp-sp { color: var(--sp-text); line-height: 1.6; padding-block: 2.6em; }
/* FULL WIDTH, as the mockup (v0.3.1298, hers: "Its not full width"): each section's colour runs edge to edge even inside
   the theme's content column, and only its words keep a readable width. */
.jcp-sp { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
body:has(.jcp-sp) { overflow-x: clip; }
/* The theme's own heading and list styles, kept out (it capitalised every word and drew dots and lines). */
.jcp-sp h1, .jcp-sp h2, .jcp-sp h3 { text-transform: none !important; letter-spacing: normal; }
.jcp-sp *, .jcp-sp *::before, .jcp-sp *::after { box-sizing: border-box; }
.jcp-sp-in { max-width: 65em; margin: 0 auto; padding-inline: 16px; }
.jcp-sp h2, .jcp-sp h3, .jcp-sp h1 { color: var(--sp-ink); text-wrap: balance; margin: 0; }
.jcp-sp .jcp-sp-h { color: var(--sp-coral); font-size: 2.24em; line-height: 1.15; text-align: center; margin: 0 0 0.3em; }
.jcp-sp .jcp-sp-h--img img { display: block; max-width: min(100%, 26em); height: auto; margin: 0 auto; }
.jcp-sp .jcp-sp-h--img img[style*="--jcp-h"] { max-width: 100%; }
/* SIZED BY THE CANVAS (v0.3.1327): the file's canvas height (--jcp-h, from PHP) times one scale, so every heading's lettering
   comes out the same size whatever the canvas. 0.44 on a computer (v0.3.1328, hers: "all of them look quite small" -- the
   pattern pages' 0.28 was too quiet for a sales page); on a phone 0.24, each heading shrinking further only if its own width
   needs it (one scale for all made the short ones tiny, shrunk to fit the longest). */
.jcp-sp .jcp-sp-h--img img[style*="--jcp-h"] { width: auto; max-width: 100%; max-height: calc(var(--jcp-h, 200) * 0.44 * 1px); }
@media (max-width: 760px) {
    .jcp-sp .jcp-sp-h--img img[style*="--jcp-h"] { max-height: calc(var(--jcp-h, 200) * 0.24 * 1px); }
}
.jcp-sp-sub { text-align: center; max-width: 36em; margin: 0 auto 1.3em; }
.jcp-sp-center { text-align: center; }
.jcp-sp-small { font-size: 0.94em; color: var(--sp-muted); }
.jcp-sp-small a { color: inherit; }
.jcp-sp a.jcp-sp-btn, .jcp-sp-joinbar a.jcp-sp-btn {
    display: inline-block; background: var(--sp-softcoral); color: #000; font-weight: bold; text-decoration: none;
    padding: 0.88em 1.65em; border: 0; border-radius: 0; line-height: 1.2;
}
.jcp-sp a.jcp-sp-btn--big { padding: 1em 1.9em; font-size: 1.05em; }
.jcp-sp a.jcp-sp-btn--alt { background: var(--sp-mint); }
.jcp-sp a.jcp-sp-btn:hover, .jcp-sp a.jcp-sp-btn:focus-visible { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06); }

/* top */
.jcp-sp-hero { background: var(--sp-sage); padding-block: 0 2em; text-align: center; }
.jcp-sp-hero-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.jcp-sp-hero-pics img { width: 100%; aspect-ratio: 4 / 3; max-height: 12em; object-fit: cover; display: block; }
.jcp-sp-hero .jcp-sp-in { padding-top: 1.3em; }
.jcp-sp-eyebrow { color: var(--sp-coral); font-weight: bold; font-size: 1.53em; margin: 0; }
.jcp-sp .jcp-sp-h1 { font-weight: bold; font-size: 2.35em; line-height: 1.2; margin: 0.2em auto 0.5em; max-width: 22ch; }
.jcp-sp-lead { max-width: 34em; margin: 0 auto 1em; }
.jcp-sp-from { margin: 0.6em 0 0; font-size: 0.94em; }
.jcp-sp-proof { margin: 0.6em 0 0; font-size: 0.94em; }
.jcp-sp-proof b { background: var(--sp-yellow); color: var(--sp-ink); padding: 0 0.2em; }

/* numbers */
.jcp-sp-numbers { background: var(--sp-offwhite); border-bottom: 1px solid var(--sp-line); padding-block: 1.3em; }
.jcp-sp-numgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em 0.5em; text-align: center; }
.jcp-sp-numgrid b { display: block; font-size: 1.76em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.jcp-sp-numgrid span { font-size: 0.82em; }

/* without the ads */
.jcp-sp-adfree { background: var(--sp-peach); }
.jcp-sp-adfree .jcp-sp-h { color: var(--sp-ink); text-align: left; }
.jcp-sp-adfree p { color: var(--sp-ink); }
.jcp-sp-adgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3em; align-items: center; }
.jcp-sp-phones { display: flex; gap: 0.7em; justify-content: center; }
.jcp-sp-phone { width: 7.6em; height: 14em; background: #fff; border: 6px solid #111; border-radius: 18px; padding: 8px 7px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; box-sizing: border-box; }
.jcp-sp-phone i { display: block; height: 6px; background: #d9d9db; }
.jcp-sp-phone i.s { width: 70%; }
.jcp-sp-phone .ad { background: #e9e2f7; color: #6c5a96; font: bold 9px/1 sans-serif; display: flex; align-items: center; justify-content: center; letter-spacing: 0.08em; flex: 0 0 auto; }
.jcp-sp-phone i { flex: 0 0 6px; }
/* Shares of the phone's height, as the mockup's 34/46/30 px of a 208 px screen: an em here is the ad's own 9 px label. */
.jcp-sp-phone .ad.a1 { flex-basis: 16%; }
.jcp-sp-phone .ad.a2 { flex-basis: 22%; }
.jcp-sp-phone .ad.a3 { flex-basis: 15%; }
.jcp-sp-phone .ph { background: var(--sp-peach); flex: 0 0 25%; }
.jcp-sp-cap { text-align: center; font-size: 0.76em; margin-top: 0.3em; }

/* comparison */
.jcp-sp-tablewrap { overflow-x: auto; max-width: 46em; margin: 0 auto; }
.jcp-sp table.jcp-sp-compare { width: 100% !important; border-collapse: collapse; font-size: 0.94em !important; background: #fff; margin: 0; }
.jcp-sp-compare th, .jcp-sp-compare td { padding: 0.7em 0.6em; border-bottom: 1px solid var(--sp-line); text-align: center; }
.jcp-sp-compare th:first-child, .jcp-sp-compare td:first-child { text-align: left; }
.jcp-sp-compare thead th { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sp-muted); }
.jcp-sp-compare .us { background: var(--sp-peachbg); font-weight: bold; color: var(--sp-ink); }
.jcp-sp-compare .yes { color: #2f7a53; font-weight: bold; }
.jcp-sp-compare .no { color: #b9b9bc; }

/* levels and prices */
.jcp-sp-plans { background: var(--sp-sage); padding-bottom: 0; }
.jcp-sp-toggle { display: flex; justify-content: center; margin: 0 auto 0.6em; width: max-content; max-width: 100%; border: 2px solid var(--sp-ink); }
.jcp-sp .jcp-sp-toggle button, .jcp-sp .jcp-sp-toggle button:hover, .jcp-sp .jcp-sp-toggle button:focus {
    font-family: inherit !important; font-size: 0.88em !important; font-weight: bold !important; line-height: 1.3 !important;
    padding: 0.55em 1.1em !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; min-height: 0 !important;
    background: #fff !important; color: var(--sp-ink) !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; cursor: pointer;
}
.jcp-sp .jcp-sp-toggle button[aria-pressed="true"] { background: var(--sp-ink) !important; color: #fff !important; }
.jcp-sp-yearly { text-align: center; color: var(--sp-coral); font-weight: bold; font-size: 0.88em; margin: 0 0 1.2em; }
.jcp-sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; align-items: start; }
.jcp-sp-plancard { background: #fff; border: 2px solid var(--sp-line); padding: 1.2em 1em 1.1em; position: relative; min-width: 0; }
.jcp-sp-plancard.is-pick { border: 3px solid var(--sp-coral); }
.jcp-sp-badge { position: absolute; top: -0.9em; left: 50%; transform: translateX(-50%); background: var(--sp-coral); color: #fff; font-size: 0.76em; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25em 0.7em; white-space: nowrap; }
.jcp-sp .jcp-sp-plancard h3 { font-size: 1.24em; text-align: center; }
.jcp-sp-for { text-align: center; font-size: 0.82em; color: var(--sp-muted); margin: 0.2em 0 0.7em; }
.jcp-sp-plan, .jcp-sp-join { display: none; }
.jcp-sp-plans[data-plan="m"] [data-plan="m"], .jcp-sp-plans[data-plan="h"] [data-plan="h"], .jcp-sp-plans[data-plan="y"] [data-plan="y"] { display: block; }
.jcp-sp-plans .jcp-sp-toggle [data-plan] { display: inline-block; }
.jcp-sp-price { text-align: center; color: var(--sp-ink); }
.jcp-sp-price b { font-size: 2.35em; font-variant-numeric: tabular-nums; }
.jcp-sp-price span { font-size: 0.88em; }
.jcp-sp-billed { display: block; color: var(--sp-muted); }
.jcp-sp-billed b.jcp-sp-save { font-size: 1em; color: var(--sp-coral); }
.jcp-sp-first { text-align: center; background: var(--sp-peachbg); font-size: 0.82em; padding: 0.4em 0.5em; margin: 0.5em 0 0; }
.jcp-sp-today { text-align: center; font-size: 0.82em; color: var(--sp-ink); margin: 0.4em 0 0; }
.jcp-sp ul.jcp-sp-ticks { list-style: none !important; padding: 0 !important; margin: 0.8em 0 1em !important; font-size: 0.88em; }
.jcp-sp ul.jcp-sp-ticks > li { list-style: none !important; padding: 0.3em 0 0.3em 1.6em !important; position: relative; border: 0 !important; margin: 0 !important; background: none !important; }
.jcp-sp ul.jcp-sp-ticks > li::marker { content: none; }
.jcp-sp ul.jcp-sp-ticks > li::before {
    content: "\2713" !important; position: absolute !important; left: 0.25em !important; top: 0.3em !important;
    width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; color: var(--sp-coral) !important; font-weight: bold; font-size: 1em !important; line-height: inherit !important; transform: none !important;
}
.jcp-sp ul.jcp-sp-ticks > li.off { color: #b0b0b3; }
.jcp-sp ul.jcp-sp-ticks > li.off::before { content: "\2013" !important; color: #c8c8cb !important; }
.jcp-sp a.jcp-sp-join { text-align: center; }
.jcp-sp-plans[data-plan] a.jcp-sp-join[data-plan] { display: none; }
.jcp-sp-plans[data-plan="m"] a.jcp-sp-join[data-plan="m"], .jcp-sp-plans[data-plan="h"] a.jcp-sp-join[data-plan="h"], .jcp-sp-plans[data-plan="y"] a.jcp-sp-join[data-plan="y"] { display: block; }
.jcp-sp-chosen { display: block; text-align: center; font-size: 0.71em; color: var(--sp-muted); margin-top: 0.3em; }
.jcp-sp-lock { text-align: center; margin: 1.1em 0 0.4em; font-size: 0.88em; }
.jcp-sp-trust { background: #fff; border-block: 1px solid var(--sp-line); padding-block: 0.9em; margin-top: 1.6em; }
.jcp-sp-trustrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5em; text-align: center; font-size: 0.82em; font-weight: bold; color: var(--sp-ink); }
.jcp-sp-trustrow span { display: block; font-size: 1.5em; color: var(--sp-coral); }

/* pattern cards: favorites, newest */
.jcp-sp-show { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7em; }
.jcp-sp a.jcp-sp-card { display: block; background: #fff; text-decoration: none; color: var(--sp-ink); min-width: 0; }
.jcp-sp a.jcp-sp-card img { width: 100%; height: auto; aspect-ratio: 1200 / 628; object-fit: cover; display: block; }
.jcp-sp-card-t { display: block; padding: 0.4em 0.5em 0.5em; font-size: 0.88em; font-weight: bold; }
.jcp-sp-tag { display: block; width: max-content; background: var(--sp-coral); color: #fff; font-size: 0.75em; padding: 0.1em 0.4em; margin-bottom: 0.2em; letter-spacing: 0.04em; text-transform: uppercase; }
.jcp-sp-fresh { background: var(--sp-peachbg); }
.jcp-sp-freshgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8em; }
.jcp-sp-fcol { min-width: 0; display: grid; gap: 0.6em; align-content: start; }
.jcp-sp .jcp-sp-fcol h3 { font-size: 1.06em; text-align: center; border-bottom: 2px solid var(--sp-peach); padding-bottom: 0.3em; }

/* testimonials */
.jcp-sp-testimonials { background: var(--sp-offwhite); }
.jcp-sp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; }
.jcp-sp-q { background: var(--sp-sage); padding: 0.9em; margin: 0; min-width: 0; }
.jcp-sp-q img { width: 3.7em; height: 3.7em; object-fit: cover; float: left; margin: 0 0.6em 0.3em 0; }
.jcp-sp-q blockquote { margin: 0 0 0.4em; padding: 0; border: 0; font-size: 0.88em; font-style: normal; }
.jcp-sp-q figcaption { color: var(--sp-ink); font-weight: bold; font-size: 0.82em; }

/* from your screen */
.jcp-sp-screen { background: var(--sp-sage); }
.jcp-sp-scr { display: grid; grid-template-columns: 16em minmax(0, 1fr); gap: 1.7em; align-items: center; }
.jcp-sp-scr .jcp-sp-phonebig { order: -1; }
.jcp-sp-phonebig { width: 15em; max-width: 100%; border: 10px solid #1d1d1f; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.jcp-sp-phonebig img, .jcp-sp-phonebig video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; background: #fff; }
.jcp-sp-way .jcp-sp-phonebig { width: 13em; margin: 0.9em auto 0.5em; }
.jcp-sp-lead2 { font-size: 1.12em; color: var(--sp-ink); margin: 0.3em 0 0.6em; }
.jcp-sp-rare { background: #fff; border-left: 4px solid var(--sp-coral); padding: 0.6em 0.8em; margin: 0 0 0.7em; color: var(--sp-ink); font-size: 0.94em; }
.jcp-sp-rare b { display: block; font-size: 1.12em; margin-bottom: 0.2em; }

/* two ways */
.jcp-sp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; }
.jcp-sp-way { background: #fff; border: 2px solid var(--sp-line); padding: 1.1em; min-width: 0; }
.jcp-sp .jcp-sp-way h3 { font-size: 1.18em; }
.jcp-sp-who { font-size: 0.82em; color: var(--sp-muted); margin: 0.2em 0 0.4em; }

/* categories */
.jcp-sp-categories { background: var(--sp-offwhite); }
.jcp-sp-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.7em; }
.jcp-sp-type { position: relative; min-width: 0; }
.jcp-sp-type img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.jcp-sp-type p { margin: 0; position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.92); padding: 0.4em 0.5em; color: var(--sp-ink); font-weight: bold; font-size: 0.88em; }
.jcp-sp-type p span { display: block; font-weight: normal; font-size: 0.85em; color: var(--sp-text); }

/* look inside, how it works, about */
.jcp-sp-lookphone { display: flex; justify-content: center; }
.jcp-sp-lookphone[hidden] { display: none; }
.jcp-sp-looktabs { margin-bottom: 1.2em; }
.jcp-sp-lookphone .jcp-sp-phonebig { width: 15em; max-width: 100%; }
.jcp-sp-how { background: var(--sp-offwhite); }
.jcp-sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; }
.jcp-sp-steps div { background: #fff; border: 2px solid var(--sp-line); padding: 0.9em; min-width: 0; font-size: 0.94em; }
.jcp-sp-num { display: block; font-weight: bold; font-size: 1.8em; line-height: 1; color: var(--sp-coral); margin-bottom: 0.2em; }
.jcp-sp-steps b { color: var(--sp-ink); display: block; margin-bottom: 0.2em; }
/* The section and the box inside it share the name: the layout is the inner box's only (v0.3.1327, hers: the bio came out one
   letter wide, because the outer section took the 13em photo column too). */
.jcp-sp-in > .jcp-sp-janne { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 1.3em; align-items: center; max-width: 43em; margin: 0 auto; }
.jcp-sp-in > .jcp-sp-janne > img { width: 100%; height: auto; display: block; }
.jcp-sp-janne .jcp-sp-h { text-align: left; }
.jcp-sp-in > .jcp-sp-janne.jcp-sp-janne--nophoto { grid-template-columns: minmax(0, 1fr); }

/* worth it */
.jcp-sp-worth { background: var(--sp-sage); }
.jcp-sp-worthgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.8em; max-width: 41em; margin: 0 auto; }
.jcp-sp-worth-us { background: var(--sp-peachbg); border: 3px solid var(--sp-coral); padding: 1em; }
.jcp-sp-wl { display: flex; justify-content: space-between; gap: 0.5em; padding: 0.4em 0; border-bottom: 1px solid var(--sp-peach); color: var(--sp-ink); font-size: 1em; }
.jcp-sp-wl b { font-size: 1.3em; }
.jcp-sp-wsub { font-size: 0.82em; margin-top: 0.4em; }
.jcp-sp-worth-them { display: grid; gap: 0.5em; align-content: start; }
.jcp-sp-worth-them div { background: #fff; border: 2px solid var(--sp-line); padding: 0.6em 0.8em; display: flex; justify-content: space-between; gap: 0.5em; font-size: 0.94em; }
.jcp-sp-worth-them b { color: var(--sp-ink); white-space: nowrap; }

/* questions, last call, not ready */
.jcp-sp-faq { background: var(--sp-sage); }
.jcp-sp-faqlist { max-width: 38em; margin: 0 auto; }
.jcp-sp details { border-bottom: 1px solid var(--sp-line); padding: 0.7em 0.2em; }
.jcp-sp summary { cursor: pointer; font-weight: bold; color: var(--sp-ink); }
.jcp-sp details p { margin: 0.5em 0 0; }
.jcp-sp-final { background: var(--sp-peachbg); text-align: center; }
.jcp-sp-recap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; max-width: 43em; margin: 0 auto 1em; }
.jcp-sp .jcp-sp-recap a { background: #fff; border: 2px solid var(--sp-line); padding: 0.7em; text-decoration: none; color: var(--sp-text); text-align: center; font-size: 0.94em; }
.jcp-sp .jcp-sp-recap a.is-pick { border-color: var(--sp-coral); }
.jcp-sp-recap b { display: block; color: var(--sp-ink); font-size: 1.1em; }
.jcp-sp-notready { background: var(--sp-offwhite); border-top: 1px solid var(--sp-line); }
.jcp-sp-nr { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; align-items: center; }
.jcp-sp-nr .jcp-sp-h { text-align: left; }
/* THE SIGN-UP AS THE MOCKUP DRAWS IT (v0.3.1299): the section carries the heading and words, so the form's own card,
   heading, words and picture step aside and leave two fields and a full-width button. Still the one inline form. */
.jcp-sp-nr .jcp-signup, .jcp-sp-nr .jcp-signup .jcp-signup-box { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; max-width: none !important; width: 100% !important; }
.jcp-sp-nr .jcp-signup .jcp-signup-heading, .jcp-sp-nr .jcp-signup .jcp-signup-blurb, .jcp-sp-nr .jcp-signup .jcp-signup-sub, .jcp-sp-nr .jcp-signup .jcp-signup-image { display: none !important; }
.jcp-sp-nr .jcp-signup form.jcp-signup-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.5em !important; margin: 0 !important; }
.jcp-sp-nr .jcp-signup input.jcp-signup-input { width: 100% !important; box-sizing: border-box; font: inherit !important; font-size: 0.8em !important; padding: 0.8em 0.75em !important; border: 1px solid var(--sp-peach) !important; border-radius: 0 !important; background: #fff !important; margin: 0 !important; }
.jcp-sp-nr .jcp-signup button.jcp-signup-button { width: 100% !important; font-family: inherit !important; font-size: 1em !important; font-weight: bold !important; padding: 0.75em 1.4em !important; border: 0 !important; border-radius: 0 !important; background: var(--sp-softcoral) !important; color: #000 !important; text-transform: none !important; margin: 0 !important; }
.jcp-sp-nr .jcp-signup .jcp-signup-consent { font-size: 0.65em !important; margin: 0 !important; text-align: left; }
/* THE GUEST PASS FORM (v0.3.1356): the same look; its trap field hidden here, because inline-forms.css is not on this page. */
.jcp-guest-pass .jcp-signup-website { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.jcp-guest-pass .jcp-gp-msg { font-size: 0.75em; margin: 0; text-align: left; }
.jcp-guest-pass .jcp-gp-msg.is-bad { color: #b3261e; }
.jcp-guest-pass .jcp-gp-small { font-size: 0.65em; margin: 0; color: var(--sp-muted); text-align: left; }
.jcp-guest-pass .jcp-gp-done { margin: 0; padding: 1em; background: #fff; border: 1px solid var(--sp-peach); font-weight: bold; text-align: left; }

/* the join bar on a phone */
.jcp-sp-joinbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: #fff; border-top: 1px solid var(--sp-line); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.5em 16px calc(0.5em + env(safe-area-inset-bottom, 0px)); font-size: 0.8em; color: var(--sp-muted); text-align: left; }
.jcp-sp-joinbar b { color: var(--sp-ink); font-size: 1.1em; }
.jcp-sp-joinbar[hidden] { display: none; }

/* launch week (v0.3.1365): the banner, the struck regular price, the greyed Everyday Bliss */
.jcp-sp-launchspot { min-height: 2.6em; }
.jcp-sp-launchbar { --sp-coral: #ff8d69; background: var(--sp-coral); color: #fff; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35em 1.1em; padding: 0.55em 16px; font-size: 0.85em; line-height: 1.3; text-align: center; z-index: 9989; }
.jcp-sp-launchbar.is-stuck { position: fixed; left: 0; right: 0; top: var(--jcp-sp-launch-top, 0px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.jcp-sp-launchbar[hidden], .jcp-sp-launchspot[hidden] { display: none; }
.jcp-sp-lb-count { font-variant-numeric: tabular-nums; font-weight: bold; white-space: nowrap; }
.jcp-sp-launchbar a.jcp-sp-lb-go { color: #fff; font-weight: bold; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.jcp-sp-cards[hidden] { display: none; }
.jcp-sp-was { color: var(--sp-muted); font-size: 0.85em; margin-right: 0.15em; }
.jcp-sp-launchnote { font-size: 0.85em; font-weight: bold; color: var(--sp-ink); margin: 0.3em 0 0.6em; }
.jcp-sp-plancard.is-same > :not(.jcp-sp-same) { opacity: 0.5; }
.jcp-sp-plancard.is-same { background: var(--sp-offwhite); }
.jcp-sp a.jcp-sp-same { display: block; text-align: center; }
@media (max-width: 760px) {
    .jcp-sp-lb-long, .jcp-sp-launchbar a.jcp-sp-lb-go { display: none; }
    .jcp-sp-launchbar { flex-wrap: nowrap; gap: 0.7em; font-size: 0.72em; padding-inline: 10px; }
    .jcp-sp-lb-text { white-space: nowrap; }
    .jcp-sp-launchspot { min-height: 2.4em; }
}

@media (max-width: 760px) {
    .jcp-sp-numgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jcp-sp-adgrid, .jcp-sp-ways, .jcp-sp-nr, .jcp-sp-worthgrid, .jcp-sp-in > .jcp-sp-janne, .jcp-sp-quotes, .jcp-sp-recap { grid-template-columns: minmax(0, 1fr); }
    .jcp-sp-cards { grid-template-columns: minmax(0, 1fr); max-width: 24em; margin: 0 auto; }
    .jcp-sp-plancard.is-pick { order: -1; }
    .jcp-sp-scr { grid-template-columns: minmax(0, 1fr); }
    .jcp-sp-scr .jcp-sp-phonebig { order: 2; margin: 0 auto; }
    .jcp-sp-scr .jcp-sp-h { text-align: center; }
    .jcp-sp-show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jcp-sp-freshgrid { grid-template-columns: minmax(0, 1fr); }
    .jcp-sp-fcol { grid-template-columns: 1fr 1fr; }
    .jcp-sp .jcp-sp-fcol h3 { grid-column: 1 / -1; }
    .jcp-sp-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jcp-sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jcp-sp-trustrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jcp-sp-in > .jcp-sp-janne > img { max-width: 13em; margin: 0 auto; }
    /* Buttons and the words over them centred on a phone (hers, v0.3.1299). */
    .jcp-sp a.jcp-sp-btn:not(.jcp-sp-join) { display: table; margin-left: auto; margin-right: auto; }
    .jcp-sp-adgrid, .jcp-sp-nr, .jcp-sp-in > .jcp-sp-janne { text-align: center; }
    .jcp-sp-adgrid .jcp-sp-h, .jcp-sp-nr .jcp-sp-h, .jcp-sp-janne .jcp-sp-h { text-align: center; }
}
/* ON A COMPUTER THE BAR IS AT THE TOP (v0.3.1310, hers: "I think it should be a top bar on desktop"), under whatever already
   sticks there -- her theme's menu, the admin bar, a top bar -- which sales-page.js measures into --jcp-sp-bar-top. The
   name and the line sit on one line beside the button. */
@media (min-width: 761px) {
    /* A heading picture where the heading was left-aligned text starts at the text's edge (v0.3.1327). */
    .jcp-sp-adfree .jcp-sp-h--img img, .jcp-sp-janne .jcp-sp-h--img img { margin-left: 0; }
    .jcp-sp-joinbar { top: var(--jcp-sp-bar-top, 0px); bottom: auto; border-top: 0; border-bottom: 1px solid var(--sp-line);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); justify-content: center; gap: 1.5em; padding: 0.55em 16px; }
    .jcp-sp-joinbar br { display: none; }
    .jcp-sp-joinbar b { margin-right: 0.5em; }
}

/* ── THE PICKING PAGE (v0.3.1307): her picks at the top, then every membership pattern, a chip per group and a search. ── */
.jcp-pk .jcp-pk-heading { color: var(--sp-coral); font-size: 1.9em; line-height: 1.15; text-align: center; margin: 0 0 0.3em; }
.jcp-pk-lead, .jcp-pk-note { text-align: center; max-width: 36em; margin: 0 auto 1.2em; }
.jcp-pk .jcp-pk-btn { display: inline-block; background: var(--sp-softcoral); color: #000; font: inherit; font-weight: bold; text-decoration: none; padding: 0.7em 1.3em; border: 0; border-radius: 0; cursor: pointer; }
.jcp-pk > .jcp-sp-in > a.jcp-pk-btn { display: table; margin: 0 auto; }
.jcp-pk .jcp-pk-btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--sp-mint); margin-left: 0.5em; }
.jcp-pk-mine { background: var(--sp-sage); padding: 1em; margin: 0 0 1.4em; }
.jcp-pk-status { text-align: center; font-weight: bold; color: var(--sp-ink); margin: 0 0 0.8em; display: flex; justify-content: center; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.jcp-pk .jcp-member-dots { display: inline-flex; gap: 0.4em; }
.jcp-pk .jcp-member-dots i { display: block; width: 0.7em; height: 0.7em; border-radius: 50%; border: 2px solid var(--sp-coral); }
.jcp-pk .jcp-member-dots i.on { background: var(--sp-coral); }
.jcp-pk-tools { display: flex; flex-wrap: wrap; gap: 0.8em; align-items: center; justify-content: space-between; margin: 0 0 1em; }
.jcp-pk-chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.jcp-pk .jcp-pk-chip { font: inherit; font-size: 0.85em; padding: 0.4em 0.9em; border: 0; border-radius: 0; background: var(--sp-offwhite); box-shadow: inset 0 0 0 1px var(--sp-mint); color: var(--sp-text); cursor: pointer; }
.jcp-pk .jcp-pk-chip.is-on { background: var(--sp-mint); color: var(--sp-ink); font-weight: bold; }
.jcp-pk-search input { font: inherit; font-size: 0.9em; padding: 0.45em 0.7em; border: 1px solid var(--sp-mint); border-radius: 0; min-width: 14em; max-width: 100%; }
.jcp-pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9em; }
@media (min-width: 700px) { .jcp-pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jcp-pk-grid--mine { max-width: 26em; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* One card alone (a guest pass, or one pick so far) stands in the middle at the same size (v0.3.1357, hers: "should be centered"). */
.jcp-pk-grid--mine > :only-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.45em); }
.jcp-pk-card { min-width: 0; display: flex; flex-direction: column; gap: 0.35em; background: #fff; padding: 0.5em; }
.jcp-pk-card[hidden] { display: none; }
/* Cropped to the featured images' own shape, 1200 x 628 (hers: "crop them to the featured images shape"), so an odd one
   still lines up with the rest. */
.jcp-pk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jcp-pk-photo { display: block; background: var(--sp-offwhite); aspect-ratio: 1200 / 628; }
.jcp-pk .jcp-pk-name { color: var(--sp-ink); font-size: 0.85em; line-height: 1.3; text-decoration: none; flex: 1; }
.jcp-pk .jcp-pk-pick { font: inherit; font-size: 0.85em; font-weight: bold; background: var(--sp-softcoral); color: #000; border: 0; border-radius: 0; padding: 0.45em; cursor: pointer; }
.jcp-pk .jcp-pk-pick[disabled] { background: var(--sp-line); color: var(--sp-muted); cursor: default; }
.jcp-pk-state { font-size: 0.85em; font-weight: bold; color: var(--sp-ink); text-align: center; padding: 0.45em; background: var(--sp-offwhite); }
.jcp-pk-state--picked { background: var(--sp-sage); }
/* NEWEST PATTERNS AND PAGES (v0.3.1346): the newest two above the filters, with the sales page's NEW tag; page numbers
   under the grid, 24 cards a page. */
.jcp-pk-new { margin: 0 0 1.6em; }
.jcp-pk .jcp-pk-new-h { color: var(--sp-coral); font-size: 1.3em; text-align: center; margin: 0 0 0.6em; }
.jcp-pk-grid--new { max-width: 34em; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.jcp-pk-card .jcp-pk-tag { margin: 0.1em 0 0; }
.jcp-pk-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35em; margin: 1.4em 0 0; }
.jcp-pk-pages[hidden] { display: none; }
.jcp-pk .jcp-pk-pg { font: inherit; font-size: 0.9em; min-width: 2.4em; padding: 0.45em 0.6em; border: 0; border-radius: 0; background: var(--sp-offwhite); box-shadow: inset 0 0 0 1px var(--sp-mint); color: var(--sp-text); cursor: pointer; }
.jcp-pk .jcp-pk-pg.is-on { background: var(--sp-mint); color: var(--sp-ink); font-weight: bold; }
.jcp-pk .jcp-pk-pg[disabled] { opacity: 0.4; cursor: default; }
.jcp-pk-pg-gap { padding: 0 0.2em; color: var(--sp-muted); }
.jcp-pk-empty { text-align: center; }
.jcp-pk-empty[hidden], .jcp-pk-confirm[hidden] { display: none; }
.jcp-pk-confirm { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.jcp-pk-confirm-card { background: #fff; max-width: 26em; width: 100%; padding: 1.3em; text-align: center; }
.jcp-pk-confirm-h { font-weight: bold; color: var(--sp-ink); font-size: 1.15em; margin: 0 0 0.4em; }
.jcp-pk-confirm-name { font-weight: bold; margin: 0 0 0.6em; }
.jcp-pk-msg:empty { display: none; }
.jcp-pk-msg { font-weight: bold; color: var(--sp-ink); }

/* THE ACCOUNT PAGE (v0.3.1323), in the picking page's look: the same section, cards and buttons, and these few parts of
   its own. Drawn as https://claude.ai/artifact/Vpo63ns8vvwdNGQBYx52V2. */
.jcp-ac-sec { margin: 0 0 1.8em; }
.jcp-ac .jcp-ac-h { color: var(--sp-coral); font-size: 1.3em; text-align: center; margin: 0 0 0.6em; }
.jcp-ac-sub { font-size: 0.85em; color: var(--sp-muted); text-align: center; margin: -0.4em auto 0.8em; max-width: 36em; }
.jcp-ac-small { font-size: 0.85em; text-align: center; }
.jcp-ac-small a, .jcp-ac-rows a, .jcp-ac-link { color: var(--sp-ink); text-decoration: underline; text-decoration-color: #4f857b; text-underline-offset: 3px; }
.jcp-ac-box { max-width: 28em; margin: 0 auto; }
.jcp-ac-box .jcp-ac-small { margin: 0.6em 0 0; }
.jcp-ac-panel { background: var(--sp-sage); padding: 1.1em; margin: 0 0 1.6em; }
.jcp-ac-level { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1em; align-items: center; }
@media (max-width: 640px) { .jcp-ac-level { grid-template-columns: minmax(0, 1fr); } }
.jcp-ac .jcp-ac-name { font-size: 1.25em; font-weight: bold; color: var(--sp-ink); margin: 0; }
.jcp-ac .jcp-ac-when { font-size: 0.85em; margin: 0.1em 0 0.5em; }
.jcp-ac .jcp-ac-chip { display: inline-block; vertical-align: middle; margin-left: 0.5em; padding: 0.15em 0.6em; font-size: 0.65em; font-weight: bold; color: var(--sp-ink); background: var(--sp-softcoral); }
.jcp-ac .jcp-ac-level ul { margin: 0; padding-left: 1.1em; font-size: 0.9em; }
.jcp-ac .jcp-ac-level li { margin: 0.15em 0; list-style: disc; }
/* Her theme dots every list item in a post; this list has its own. */
.jcp-ac .jcp-ac-level ul li::before { content: none !important; display: none !important; }
.jcp-ac-acts { display: flex; flex-direction: column; gap: 0.5em; }
.jcp-ac-acts .jcp-pk-btn { text-align: center; }
.jcp-ac .jcp-ac-acts .jcp-pk-btn--ghost, .jcp-ac .jcp-ac-bbtns .jcp-pk-btn--ghost { margin-left: 0; }
.jcp-ac-meta { font-size: 0.72em; color: var(--sp-muted); text-align: center; }
.jcp-ac .jcp-ac-open { text-align: center; padding: 0.45em; font-size: 0.85em; }
.jcp-ac .jcp-ac-empty { display: flex; align-items: center; justify-content: center; background: var(--sp-offwhite); box-shadow: inset 0 0 0 2px var(--sp-mint); text-decoration: none; }
.jcp-ac .jcp-ac-empty span { color: var(--sp-coral); font-size: 2em; font-weight: bold; line-height: 1; }
.jcp-ac-grid { background: var(--sp-offwhite); padding: 1em; }
.jcp-ac-bundle { background: var(--sp-offwhite); padding: 1em; margin: 0 0 1em; }
.jcp-ac-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 0.8em; }
.jcp-ac-strip img { display: block; width: 100%; aspect-ratio: 1200 / 628; object-fit: cover; }
.jcp-ac-bhead { display: flex; flex-wrap: wrap; gap: 0.8em; align-items: center; justify-content: space-between; }
.jcp-ac-bhead b { color: var(--sp-ink); font-size: 1.05em; }
.jcp-ac-bhead small { display: block; font-size: 0.75em; color: var(--sp-muted); }
.jcp-ac-bbtns { display: flex; flex-wrap: wrap; gap: 0.5em; }
.jcp-ac-bbtns .jcp-pk-btn { font-size: 0.85em; text-align: center; }
@media (max-width: 640px) { .jcp-ac-bbtns { width: 100%; flex-direction: column; } }
.jcp-ac-bgrid { margin: 0.8em 0 0; }
.jcp-ac-bgrid[hidden] { display: none; }
.jcp-ac-join { background: var(--sp-peachbg); padding: 1em; text-align: center; margin: 0 0 1.6em; }
.jcp-ac-join p { margin: 0 0 0.7em; }
.jcp-ac-rows { background: #fff; max-width: 30em; margin: 0 auto; }
.jcp-ac-rows > div, .jcp-ac-pw > summary { display: flex; justify-content: space-between; gap: 1em; padding: 0.65em 1em; border-bottom: 1px solid var(--sp-line); font-size: 0.9em; }
.jcp-ac-rows > div:last-child { border-bottom: 0; }
.jcp-ac-rows b { color: var(--sp-ink); overflow-wrap: anywhere; }
.jcp-ac .jcp-ac-pw { margin: 0; padding: 0; border: 0; background: none; }
.jcp-ac .jcp-ac-pw > summary { cursor: pointer; list-style: none; font-weight: normal; margin: 0; padding: 0.65em 1em; }
.jcp-ac-pw > summary::-webkit-details-marker { display: none; }
.jcp-ac-pwbox { padding: 0.8em 1em; border-bottom: 1px solid var(--sp-line); }

/* JOMC ACCESS'S FORMS IN THIS PAGE'S LOOK (v0.3.1324, hers: "those shortcodes from him doesn't look right"). His login,
   change-password and Etsy / Ravelry boxes arrive with his own colours (a green button, grey boxed fields, hints beside the
   field); inside .jcp-ac-form they take the picking page's: a sage card, full-width fields with a mint edge, the hint under
   the field, the soft coral button. Two classes deep and !important where her theme styles buttons and inputs directly. */
.jcp-ac .jcp-ac-form h2, .jcp-ac .jcp-ac-form h3 { color: var(--sp-ink); font-size: 1.05em; line-height: 1.3; margin: 0 0 0.3em; font-weight: bold; }
.jcp-ac .jcp-ac-pwbox h3 { display: none; }
.jcp-ac .jcp-ac-form p { margin: 0 0 0.7em; font-size: 0.9em; }
.jcp-ac .jcp-ac-form .jomc-login, .jcp-ac .jcp-ac-form .jomc-change-password { max-width: none; color: inherit; }
.jcp-ac .jcp-ac-form form p { margin: 0.7em 0 0; font-size: 1em; display: block; }
.jcp-ac .jcp-ac-form label { display: block; font-size: 0.8em; font-weight: bold; color: var(--sp-ink); margin: 0 0 0.25em; }
.jcp-ac .jcp-ac-form input[type="text"], .jcp-ac .jcp-ac-form input[type="email"], .jcp-ac .jcp-ac-form input[type="password"] {
    display: block; width: 100% !important; max-width: none; box-sizing: border-box; font: inherit; font-size: 0.9em; color: var(--sp-ink);
    background: #fff !important; border: 1px solid var(--sp-mint) !important; border-radius: 0 !important; padding: 0.55em 0.7em !important; margin: 0; box-shadow: none !important;
}
.jcp-ac .jcp-ac-form input:focus-visible { outline: 2px solid var(--sp-coral); outline-offset: 1px; }
.jcp-ac .jcp-ac-form [class$="-hint"] { display: block; font-size: 0.75em; color: var(--sp-muted); margin: 0.3em 0 0; line-height: 1.4; }
.jcp-ac .jcp-ac-form button[type="submit"], .jcp-ac .jcp-ac-form input[type="submit"] {
    display: block; width: 100%; font: inherit !important; font-size: 0.9em !important; font-weight: bold !important; color: #000 !important;
    background: var(--sp-softcoral) !important; border: 0 !important; border-radius: 0 !important; padding: 0.7em 1em !important; margin: 0.4em 0 0; cursor: pointer;
}
.jcp-ac .jcp-ac-form button[type="submit"]:hover, .jcp-ac .jcp-ac-form button[type="submit"]:focus-visible { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06) !important; }
.jcp-ac .jcp-ac-form a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: #4f857b; text-underline-offset: 3px; }
.jcp-ac .jcp-ac-form .jomc-login-forgot { font-size: 0.85em; text-align: center; }
.jcp-ac .jcp-ac-form .jomc-login-error { color: #b32d2e; }
.jcp-ac .jcp-ac-pwbox { background: var(--sp-offwhite); }

/* THE CLAIM BOXES AS TABS (v0.3.1325, hers): no edge round anything -- the fields carry their own -- the tabs three soft
   blocks, the chosen one the lightest orange with a coral line under it. His heading inside each form is left out: the tab
   names it. */
.jcp-ac-claimbox { max-width: 30em; margin: 0 auto; }
.jcp-ac-tabs { display: flex; gap: 4px; }
.jcp-ac .jcp-ac-tab { flex: 1; font: inherit !important; font-size: 0.85em !important; font-weight: bold !important; color: var(--sp-text) !important; background: var(--sp-offwhite) !important;
    border: 0 !important; border-radius: 0 !important; padding: 0.7em 0.5em !important; margin: 0; cursor: pointer; box-shadow: none; }
.jcp-ac .jcp-ac-tab.is-on { background: var(--sp-peachbg) !important; color: var(--sp-ink) !important; box-shadow: inset 0 -3px 0 var(--sp-coral); }
.jcp-ac .jcp-ac-tab:focus-visible { outline: 2px solid var(--sp-coral); outline-offset: -2px; }
.jcp-ac-pane { padding: 0.9em 0 0; }
.jcp-ac-pane[hidden] { display: none; }
.jcp-ac-claimbox--one .jcp-ac-pane { padding-top: 0; }
.jcp-ac .jcp-ac-pane h2 { display: none; }
.jcp-ac .jcp-ac-pane > div > p:first-of-type { font-size: 0.85em; }

/* THE PICKING PAGE'S CATEGORIES AND THE PDF BUTTON (v0.3.1330). The search on its own row, centred; the main groups; a
   chosen group's own categories on a light orange row under them; "Download PDF" under "Open Pattern". */
.jcp-pk .jcp-pk-search { display: flex; align-items: center; gap: 0.5em; max-width: 30em; margin: 0 auto 1em; padding: 0 0.7em; background: #fff; border: 1px solid var(--sp-mint); color: var(--sp-muted); }
.jcp-pk .jcp-pk-search input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; padding: 0.55em 0 !important; font: inherit; font-size: 0.9em; background: transparent; }
.jcp-pk .jcp-pk-search svg { flex: none; }
.jcp-pk .jcp-pk-chips { margin: 0 0 0.6em; }
.jcp-pk .jcp-pk-chip small { color: var(--sp-muted); font-weight: normal; margin-left: 0.2em; }
.jcp-pk-subs { display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0 0 1em; padding: 0.5em 0.6em; background: var(--sp-peachbg); }
.jcp-pk-subs[hidden] { display: none; }
.jcp-pk .jcp-pk-subs .jcp-pk-chip { background: #fff; box-shadow: inset 0 0 0 1px var(--sp-peach); font-size: 0.8em; }
.jcp-pk .jcp-pk-subs .jcp-pk-chip.is-on { background: var(--sp-peach); color: var(--sp-ink); font-weight: bold; }
.jcp-pk .jcp-pk-open { display: block; text-align: center; font-size: 0.85em; padding: 0.45em; }
.jcp-pk .jcp-pk-see { display: block; text-align: center; font-size: 0.85em; padding: 0.45em; margin: 0; }
.jcp-pk .jcp-pdf-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; font-size: 0.85em; padding: 0.45em; margin: 0.35em 0 0; text-align: center; }

/* TEXT MODE ON THE ACCOUNT AND PICKING PAGES (v0.3.1349, hers: "Do these two as well: the account, picking"). The reader's
   choice from a pattern page is followed here (sales-page.js sets the class on these two pages only, never on the sales
   page); there is no button of their own. Black and white as on a pattern: the palette's colors turned black or white,
   boxes outlined in black, filled buttons black with white words. */
body.jcp-text-mode .jcp-sp.jcp-pk {
    --sp-coral: #1a1a1a; --sp-softcoral: #1a1a1a; --sp-mint: #1a1a1a; --sp-peach: #1a1a1a;
    --sp-sage: #ffffff; --sp-offwhite: #ffffff; --sp-peachbg: #ffffff; --sp-yellow: #ffffff;
    --sp-ink: #1a1a1a; --sp-text: #1a1a1a;
}
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-btn:not(.jcp-pk-btn--ghost),
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-pick:not([disabled]),
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-chip.is-on,
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-pg.is-on { color: #ffffff !important; }
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-chip.is-on small { color: #ffffff; }
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-mine,
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-ac-panel,
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-ac-join,
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-ac-grid,
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-ac-bundle,
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-subs { border: 2px solid #1a1a1a; }
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-pk-card { border: 1px solid #1a1a1a; }
body.jcp-text-mode .jcp-sp.jcp-pk .jcp-sp-tag { background: #1a1a1a; color: #ffffff; }
body.jcp-text-mode .jcp-sp.jcp-pk a { text-decoration-color: #1a1a1a !important; }

/* THE PAGE AFTER A SIGN-UP (v0.3.1407): the thank-you first, one offer, the steps and six patterns from the sales page's own
   pieces, and All Access as one quiet line. The mockup she approved: https://claude.ai/artifact/C5UVM1n72QhfJxmshdR4nN. */
.jcp-sp.jcp-sp-tripwire { padding-top: 0; text-align: center; }
.jcp-sp-tw-thanks { background: var(--sp-peachbg); border-bottom: 1px solid var(--sp-peach); padding: 1.6em 16px 1.3em; }
.jcp-sp-tw-thanks p { margin: 0 auto; max-width: 30em; }
.jcp-sp .jcp-sp-tw-thanks-h { font-size: 2em; font-weight: bold; line-height: 1.2; color: var(--sp-ink); margin-bottom: 0.3em; }
.jcp-sp-tw-wait { margin: 1.6em 0 0.2em; font-weight: bold; color: var(--sp-coral); font-size: 1.05em; text-wrap: balance; }
.jcp-sp-tripwire .jcp-sp-h1 { margin-top: 0.1em; }
.jcp-sp-tw-offer { background: var(--sp-offwhite); border: 1px solid var(--sp-mint); padding: 1.3em 1.4em 1.2em; max-width: 26em; margin: 0.6em auto 0; text-align: left; }
.jcp-sp .jcp-sp-tw-offer h2 { margin: 0; font-size: 1.1em; color: var(--sp-ink); }
.jcp-sp-tw-price { margin: 0.15em 0 0.4em; line-height: 1.2; }
.jcp-sp-tw-price b { font-size: 1.9em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.jcp-sp .jcp-sp-tw-offer a.jcp-sp-tw-btn { display: block; width: 100%; text-align: center; }
.jcp-sp-tw-fine { margin: 0.7em 0 0; font-size: 0.72em; color: var(--sp-muted); text-align: center; line-height: 1.5; }
.jcp-sp-tw-fine a { color: inherit; }
.jcp-sp .jcp-sp-tw-h { text-align: center; font-size: 1.2em; margin: 2.2em 0 0.9em; color: var(--sp-ink); }
.jcp-sp-tw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; max-width: 38em; margin: 0 auto; }
.jcp-sp-tw-steps div { background: var(--sp-peachbg); border: 0; }
.jcp-sp-tripwire .jcp-sp-show { max-width: 38em; margin: 0 auto; text-align: left; }
.jcp-sp-tw-other { margin: 2.2em auto 0; padding-top: 1em; border-top: 1px solid var(--sp-line); max-width: 34em; font-size: 0.8em; color: var(--sp-text); }
.jcp-sp-tw-other b { color: var(--sp-ink); }
.jcp-sp-tw-other a { white-space: nowrap; color: var(--sp-ink); text-decoration: underline; text-decoration-color: #4f857b; text-underline-offset: 3px; }
@media (max-width: 760px) {
    .jcp-sp-tw-steps { grid-template-columns: minmax(0, 1fr); }
}