/* The homepage as a comic book (Nov 13, 2026): a cover, then pages of panels with gutters, caption boxes, speech balloons
   and a letters page. Loaded only by the homepage, after pop.css. Colors and type are the chalkthis. kit's.
   All lettering is real text in the page, never part of a picture. */

.comic { background-color: var(--pop-cream); background-image: radial-gradient(circle, rgba(15, 45, 77, .07) 1.2px, rgba(15, 45, 77, 0) 1.6px); background-size: 7px 7px; }
.comic .home-links { margin-left: auto; }
.comic .cm-nav-cta { flex: none; }

/* ---------- shared pieces ---------- */
.cm-chapter { display: inline-block; padding: 5px 12px; background: var(--pop-ink); color: var(--pop-mustard); margin-bottom: var(--space-3) !important; }
.cm-page { position: relative; padding: 88px 0; }
.cm-page h2 { max-width: 880px; }
.cm-intro { margin-top: var(--space-4) !important; max-width: 720px; color: var(--ink-muted); }
.cm-panel { position: relative; margin: 0; border: 4px solid var(--pop-ink); border-radius: 2px; background: var(--pop-paper); overflow: hidden; }
.cm-panel > img, .cm-panel figure > img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.cm-caption { background: var(--pop-paper); border: 3px solid var(--pop-ink); padding: 10px 14px; color: var(--pop-ink); font-size: 15px; line-height: 22px; }
.cm-caption-tag { display: block; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--pop-red-ink); }
figcaption.cm-caption { position: absolute; left: 14px; bottom: 14px; max-width: min(82%, 460px); box-shadow: 4px 4px 0 var(--pop-ink); }
.cm-balloon { position: absolute; right: 18px; top: 18px; max-width: 220px; margin: 0; padding: 14px 20px; background: #FFFFFF; border: 3px solid var(--pop-ink); border-radius: 50% / 46%; font-family: var(--font-sans); font-weight: 700; font-size: 15px; line-height: 20px; text-align: center; color: var(--pop-ink); }
.cm-balloon::after { content: ""; position: absolute; left: 34px; bottom: -19px; width: 22px; height: 20px; background: #FFFFFF; border-left: 3px solid var(--pop-ink); border-bottom: 3px solid var(--pop-ink); transform: skewX(-28deg) translateY(-1px); clip-path: polygon(0 0, 100% 0, 0 100%); border-bottom: 0; }
.cm-sfx { position: absolute; right: 14px; bottom: 10px; margin: 0; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 46px; line-height: 1; color: var(--pop-mustard); -webkit-text-stroke: 2px var(--pop-ink); text-shadow: 4px 4px 0 var(--pop-ink); transform: rotate(-8deg); }

/* ---------- the cover ---------- */
.cm-cover { position: relative; isolation: isolate; overflow: hidden; min-height: 780px; padding: 138px 0 64px; background: var(--pop-navy); border-bottom: 6px solid var(--pop-ink); }
/* The cover picture sits bottom-right at 86% of the width, so the couple stands to the right of the sign-up box
   and the shop sign stays in view; its top and left edges fade into the night sky. */
.cm-cover-art { position: absolute; right: 0; bottom: 0; width: 86%; aspect-ratio: 3 / 2; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%), linear-gradient(90deg, transparent 0, #000 22%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 20%), linear-gradient(90deg, transparent 0, #000 22%); mask-composite: intersect; }
.cm-cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; max-width: none; }
.cm-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15, 45, 77, .9) 0%, rgba(15, 45, 77, .7) 26%, rgba(15, 45, 77, .2) 42%, rgba(15, 45, 77, 0) 50%); }
.cm-cover-grid { position: relative; z-index: 3; }
.cm-cover-copy { display: flex; flex-direction: column; gap: var(--space-4); max-width: 500px; }
.cm-issue { color: var(--pop-mustard); }
.cm-cover h1 { color: var(--pop-cream); text-shadow: 5px 5px 0 var(--pop-ink); font-size: 84px; }
.cm-claim { max-width: none; background: var(--pop-cream); }
.home-snap-card.cm-claim::before { display: none; }
.cm-claim-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; color: var(--pop-ink); }
.cm-claim-price strong { font-family: var(--font-display); font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -0.02em; }
.cm-claim-price span { font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 21px; }
.cm-lead { box-shadow: 4px 4px 0 var(--pop-ink); font-size: 15.5px; line-height: 23px; }

/* ---------- the story pages: each chapter is a comic page, a sheet of paper with panels and gutters ----------
   The pictures are full-color panels. The sheet, the lettering and the captions stay in the chalkthis. kit. */
.cm-sheet { position: relative; background: #FBF7EC; border: 4px solid var(--pop-ink); box-shadow: 12px 12px 0 var(--pop-ink); padding: 34px 30px 46px; }
.cm-sheet-head { margin-bottom: 24px; }
.cm-sheet-head .cm-intro { margin-top: var(--space-3) !important; }
.comic .cm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cm-art { position: absolute; inset: 0; }
.cm-art img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.cm-pageno { position: absolute; right: 30px; bottom: 14px; margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-muted); }
.cm-pageno::before { content: "page "; }

/* A slanted gutter between two panels: the left one leans right, the right one tucks under it. The panel is an ink
   shape and the picture sits 4px inside it, so the slanted edge keeps its outline. */
.cm-slant-r, .cm-slant-l { border: 0; background: var(--pop-ink); }
.cm-slant-r { clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%); }
.cm-slant-r > .cm-art { inset: 4px; clip-path: polygon(0 0, calc(100% - 5px) 0, calc(100% - 68px) 100%, 0 100%); }
.cm-slant-l { clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%); margin-left: -50px; }
.cm-slant-l > .cm-art { inset: 4px; clip-path: polygon(68px 0, 100% 0, 100% 100%, 5px 100%); }

/* chapter one */
.cm-p-job { grid-column: 1 / -1; height: 380px; }
.cm-p-drawer { grid-column: span 5; height: 440px; }
.cm-p-list { grid-column: span 7; height: 440px; }
.cm-p-reminder { grid-column: span 7; height: 420px; }
.cm-p-job .cm-balloon { right: 28px; top: 22px; }
.cm-p-drawer figcaption.cm-caption { max-width: calc(100% - 96px); }
.cm-p-list figcaption.cm-caption { left: auto; right: 14px; }
/* The first panel's caption sits along the bottom, clear of both faces and the speech balloon (Joe, Nov 13, 2026). */
.cm-p-job figcaption.cm-caption { max-width: min(46%, 430px); }
.cm-punch { grid-column: span 5; display: grid; place-items: center; margin: 0; padding: 28px 24px; background-color: var(--pop-ink); background-image: var(--pop-dots-light); background-size: 9px 9px; color: var(--pop-cream); text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }

/* chapter two: how it works, from the back of the leave-behind */
.cm-step-num { position: absolute; left: 14px; top: 14px; width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--pop-mustard); border: 3px solid var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-ink); font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--pop-ink); z-index: 1; }
.cm-h-past { grid-column: span 7; height: 460px; }
.cm-h-past figcaption.cm-caption { max-width: min(88%, 470px); }
.cm-h-past figcaption h3 { margin: 0 0 4px; }
.cm-h-past figcaption p { margin: 0; font-size: 14.5px; line-height: 21px; }
.cm-h-examples { grid-column: span 5; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; background-color: var(--pop-mustard); background-image: var(--pop-dots); background-size: 9px 9px; }
/* Dark words on the dotted yellow get a white outline behind them so they read cleanly (Joe, Nov 13, 2026). */
.cm-h-examples .cm-caption-tag, .cm-back-item:last-child h4, .cm-back-item:last-child p, .cm-price-setup .label, .cm-price-setup .body-s {
  text-shadow: 1.5px 0 0 #FFF, -1.5px 0 0 #FFF, 0 1.5px 0 #FFF, 0 -1.5px 0 #FFF, 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF, 0 0 4px #FFF, 0 0 4px #FFF; }
.cm-h-examples .cm-caption-tag, .cm-back-item:last-child p, .cm-price-setup .body-s { font-weight: 600; }
.cm-h-examples .cm-caption-tag { color: var(--pop-ink); margin: 0; }
.cm-h-examples dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cm-h-examples dl > div { background: #FFFFFF; border: 3px solid var(--pop-ink); border-radius: 14px 14px 14px 2px; padding: 10px 14px; box-shadow: 3px 3px 0 var(--pop-ink); }
.cm-h-examples dt { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--pop-red-ink); }
.cm-h-examples dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; line-height: 21px; color: var(--pop-ink); }
.cm-h-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.cm-h-head .cm-step-num { position: static; }
.cm-h-head h3 { margin: 0; }
.cm-h-head p { margin: 2px 0 0; color: var(--ink-muted); }
.comic .cm-groups { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cm-group { height: 450px; }
.cm-group .cm-balloon { left: 12px; right: 12px; top: 12px; max-width: none; padding: 10px 14px 12px; border-radius: 22px; font-size: 16px; line-height: 21px; }
.cm-group .cm-balloon::after { left: 30px; }
.cm-said { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--pop-red-ink); }
.cm-balloon--quiet { border-style: dashed; font-style: italic; }
.cm-group .cm-caption { position: absolute; left: 10px; right: 10px; bottom: 10px; box-shadow: 4px 4px 0 var(--pop-ink); }
.cm-group .cm-caption h4 { margin: 0 0 4px; font-size: 19px; }
.cm-group .cm-caption p { margin: 0; font-size: 14px; line-height: 20px; }
.cm-group .cm-caption-tag { display: inline; margin-right: 4px; }
.comic .cm-back { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cm-back-item { padding: 20px 22px; background-color: var(--pop-ink); background-image: var(--pop-dots-light); background-size: 9px 9px; color: var(--pop-cream); }
.cm-back-item h4 { margin: 0 0 6px; color: var(--pop-cream); }
.cm-back-item p { margin: 0; font-size: 15px; line-height: 22px; color: var(--mist-muted); }
.cm-back-item:last-child { background-color: var(--pop-mustard); background-image: var(--pop-dots); color: var(--pop-ink); }
.cm-back-item:last-child h4, .cm-back-item:last-child p { color: var(--pop-ink); }
.comic .cm-promises { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-weight: 700; color: var(--pop-ink); }
.cm-promises li { display: flex; align-items: center; gap: 8px; }
.cm-promises li::before { content: ""; width: 9px; height: 9px; background: var(--pop-mustard); border: 2px solid var(--pop-ink); transform: rotate(45deg); flex: none; }

/* the cover's second line, from the leave-behind */
.cm-tagline { margin: -4px 0 0 !important; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--pop-mustard); text-shadow: 2px 2px 0 var(--pop-ink); }

/* ---------- chapter three: the rules, as narration boxes on a night page ---------- */
.cm-page--ink { background-color: var(--pop-navy); background-image: var(--pop-dots-light); background-size: 9px 9px; border-top: 6px solid var(--pop-ink); border-bottom: 6px solid var(--pop-ink); }
.cm-page--ink h2 { color: var(--pop-cream); }
.cm-page--ink .cm-intro { color: var(--mist-muted); }
.cm-page--ink .cm-chapter { background: var(--pop-mustard); color: var(--pop-ink); }
.cm-control { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: center; }
.cm-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cm-rules li { font-size: 17px; line-height: 25px; font-weight: 500; box-shadow: 5px 5px 0 var(--pop-mustard); }
.cm-rules li:nth-child(even) { margin-left: 34px; }
.cm-rules li:nth-child(odd) { margin-right: 34px; }

/* ---------- the price: the one-time setup, then two ways to pay for the subscription ---------- */
.cm-price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; margin-top: var(--space-12); align-items: stretch; }
.cm-price-setup { display: flex; flex-direction: column; justify-content: center; padding: var(--space-8); background-color: var(--pop-mustard); background-image: var(--pop-dots); background-size: 9px 9px; }
.cm-price-tag { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--pop-ink); }
.cm-price-tag strong { font-family: var(--font-display); font-weight: 900; font-size: 96px; line-height: .95; letter-spacing: -0.03em; color: var(--pop-cream); -webkit-text-stroke: 2px var(--pop-ink); text-shadow: 5px 5px 0 var(--pop-ink); }
.cm-price-tag .label { text-transform: uppercase; letter-spacing: .08em; margin-top: 10px; }
.cm-price-tag .body-s { max-width: 320px; }
.cm-price-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; }
.cm-price-plans > h3 { grid-column: 1 / -1; margin: 0; }
.cm-plan { display: flex; flex-direction: column; gap: 6px; padding: var(--space-6); }
.cm-plan > p { margin: 0; }
.cm-plan .eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--pop-red-ink); min-height: 28px; }
.cm-plan-tag { font-family: var(--font-sans); font-size: 11px; line-height: 16px; transform: rotate(-2deg); white-space: nowrap; }
.cm-price-tag--plan { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cm-price-tag--plan strong { font-size: 64px; color: var(--pop-ink); -webkit-text-stroke: 0; text-shadow: none; }
.cm-price-tag--plan .label { margin-top: 0; }
.cm-plan--yearly { background-color: var(--pop-teal); color: var(--pop-cream); box-shadow: 6px 6px 0 var(--pop-mustard); }
.cm-plan--yearly .eyebrow { color: var(--pop-mustard); }
.cm-plan--yearly .cm-price-tag--plan, .cm-plan--yearly .cm-price-tag--plan strong { color: var(--pop-cream); }
.cm-plan--yearly .body-s { color: var(--pop-cream); }
.cm-plan-note { grid-column: 1 / -1; margin: 0 !important; color: var(--ink-muted); }
.cm-price-box { grid-column: 1 / -1; padding: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.cm-price-box h3 { margin: 0; }
.cm-price-box .home-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); }
.cm-price-not { color: var(--ink-muted); padding-top: var(--space-4); border-top: 2px solid var(--pop-ink); }
.cm-price-box .ck-btn { justify-self: start; }

/* ---------- snow on the cover: three layers of flakes falling at different speeds (still for reduced motion) ---------- */
.cm-snow { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.cm-snow span { position: absolute; left: -10%; right: -10%; top: -600px; bottom: 0; background-repeat: repeat; will-change: transform; animation: cm-snow linear infinite; }
.cm-snow span:nth-child(1) { background-image: radial-gradient(circle at 20px 30px, #F9F6F2 0 3.5px, transparent 4px), radial-gradient(circle at 150px 120px, #F9F6F2 0 4.5px, transparent 5px), radial-gradient(circle at 250px 60px, #F9F6F2 0 3px, transparent 3.5px), radial-gradient(circle at 90px 240px, #F9F6F2 0 4px, transparent 4.5px); background-size: 300px 300px; animation-duration: 9s; --fall: 300px; --drift: 300px; opacity: .95; }
.cm-snow span:nth-child(2) { background-image: radial-gradient(circle at 40px 80px, #F9F6F2 0 2.5px, transparent 3px), radial-gradient(circle at 120px 20px, #F9F6F2 0 2px, transparent 2.5px), radial-gradient(circle at 170px 150px, #F9F6F2 0 2.5px, transparent 3px), radial-gradient(circle at 70px 180px, #F9F6F2 0 2px, transparent 2.5px); background-size: 200px 200px; animation-duration: 14s; --fall: 200px; --drift: 200px; opacity: .8; }
.cm-snow span:nth-child(3) { background-image: radial-gradient(circle at 30px 40px, #F9F6F2 0 1.5px, transparent 2px), radial-gradient(circle at 90px 100px, #F9F6F2 0 1.5px, transparent 2px), radial-gradient(circle at 60px 10px, #F9F6F2 0 1.2px, transparent 1.7px); background-size: 120px 120px; animation-duration: 22s; --fall: 240px; --drift: 120px; opacity: .65; }
@keyframes cm-snow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--drift) * -1), calc(var(--fall) * 2), 0); } }
@media (prefers-reduced-motion: reduce) { .cm-snow span { animation: none; } }

/* ---------- letters page (FAQ) and the last panel ---------- */
#faq .wf-faq { margin-top: var(--space-8); }
#faq .wf-byline { margin-top: var(--space-8); }
.cm-finale { background-color: var(--pop-teal); background-image: var(--pop-dots); background-size: 9px 9px; border-top: 6px solid var(--pop-ink); }
.cm-finale .home-wrap { display: grid; gap: var(--space-8); }
.cm-finale-panel { height: 440px; }
.cm-finale-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cm-finale h2 { color: var(--pop-cream); text-shadow: 4px 4px 0 var(--pop-ink); }
.cm-finale-copy > p { color: var(--pop-cream); margin: 0; }
.cm-finale-price { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--pop-mustard) !important; }
.cm-finale .ck-btn--ghost { color: var(--pop-cream); text-decoration-color: var(--pop-mustard); margin-left: calc(var(--space-2) * -1); white-space: normal; text-align: left; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .cm-cover h1 { font-size: 64px; }
  .cm-control, .cm-price { grid-template-columns: minmax(0, 1fr); }
  .cm-control { gap: var(--space-8); }
  .cm-punch { font-size: 30px; }
  .cm-p-drawer, .cm-p-list, .cm-p-reminder, .cm-punch, .cm-h-past, .cm-h-examples { grid-column: 1 / -1; }
  .comic .cm-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-slant-r, .cm-slant-l { clip-path: none; margin-left: 0; border: 4px solid var(--pop-ink); background: var(--pop-paper); }
  .cm-slant-r > .cm-art, .cm-slant-l > .cm-art { inset: 0; clip-path: none; }
  .cm-p-drawer figcaption.cm-caption { max-width: min(82%, 460px); }
}

/* ---------- phone: the price, all four fields and the button are on the first screen ---------- */
@media (max-width: 720px) {
  .comic .cm-nav-cta { display: none; }
  /* Phone: the sign-up comes first; the picture is a full-width scene under it. */
  .cm-cover { min-height: 0; padding: 74px 0 calc(75vw - 6px); }
  .cm-cover-art { width: 100%; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .cm-cover::after { bottom: 75vw; background: var(--pop-dots); background-size: 9px 9px; }
  .cm-cover-copy { gap: 8px; max-width: none; }
  .cm-issue { font-size: 10px; line-height: 14px; letter-spacing: .12em; }
  .cm-cover h1.display-xl { font-size: 36px; line-height: 1; text-shadow: 3px 3px 0 var(--pop-ink); }
  .cm-claim-price strong { font-size: 32px; }
  .cm-claim-price span { font-size: 13.5px; line-height: 18px; }
  .cm-lead { margin-top: 14px !important; }
  .cm-page { padding: 56px 0; }
  .cm-sheet { padding: 18px 12px 38px; box-shadow: 6px 6px 0 var(--pop-ink); }
  .comic .cm-grid { gap: 10px; }
  /* Phone: frame the tradesman and the furnace, balloon over the furnace, caption along the bottom. */
  .cm-p-job { height: 360px; }
  .cm-p-job .cm-art img { object-position: 88% 50%; }
  .cm-p-job .cm-balloon { right: 8px; top: 10px; max-width: 150px; padding: 8px 10px; }
  .cm-p-job figcaption.cm-caption { max-width: none; right: 14px; }
  .cm-p-drawer, .cm-p-list, .cm-p-reminder { height: 420px; }
  .cm-h-past { height: 440px; }
  .comic .cm-groups, .comic .cm-back { grid-template-columns: minmax(0, 1fr); }
  .cm-group { height: 420px; }
  .cm-tagline { font-size: 14px; line-height: 18px; margin-top: -2px !important; text-shadow: 1px 1px 0 var(--pop-ink); }
  .cm-pageno { right: 14px; bottom: 10px; }
  .cm-balloon { max-width: 170px; font-size: 14px; padding: 10px 14px; }
  .cm-punch { font-size: 26px; padding: 28px 18px; }
  .cm-rules li:nth-child(even) { margin-left: 16px; }
  .cm-rules li:nth-child(odd) { margin-right: 16px; }
  .cm-price-setup, .cm-price-box, .cm-plan { padding: var(--space-6) var(--space-4); }
  .cm-price-tag strong { font-size: 68px; }
  .cm-price-tag--plan strong { font-size: 52px; }
  .cm-price-plans, .cm-price-box .home-list { grid-template-columns: minmax(0, 1fr); }
  .cm-finale-panel { height: 280px; }
  .cm-sfx { font-size: 36px; }
}
.cm-nw { white-space: nowrap; }