/* ================================================================
   Cross Count product page.

   The design is the one from the app's own site
   (repos/cross-stitcher/online_content/website), which is the page Anna
   asked for here: "make the product page look super good, using the
   glitter jar page as an example" (19 Sep 2026) — and that page was ported
   the same way. The CHROME is not: the header, the footer, the marquee's
   behaviour, the floating notions, the fonts and the palette all come from
   main.css, which this file loads on top of.

   What is left here is what is particular to this page: the hero device
   with its cross-fading chart, the graph-paper stats band, the step cards
   with the little sum, the flow band, the work-screen "knobs", the skein
   shelf, the cloth chips in their three groups, the mode cards, the symbol
   tray, the export cards, the complaints, the promise cards, the FAQ and
   the final band.

   It is loaded SECOND, after main.css, and its class names are prefixed
   cc- wherever main.css already owns the plain name for different markup
   (cc-stats, cc-steps, cc-shot, cc-faq, cc-hero).
   ================================================================ */


/* Aliases for the tokens main.css defines under :root[data-app="crosscount"]
   — that palette was drawn FROM the app's page, so the two agree. The few
   shades the site has no name for (the app's sage ticks, its gold kicker on
   the alternate band, the done-green, the row band) are stated here. */
:root {
  --linen: var(--ground);
  --linen-2: var(--mint-soft);
  --card: var(--paper);
  --sunken: #fbf6ee;
  --plum: var(--mint-ink);
  --plum-2: #52192f;
  --rose: var(--mint);
  --rose-2: var(--apricot);
  --rose-pale: #ffe4ec;
  --rose-deep: #b95f7e;
  --emph: var(--mint-deep);
  --sage: #8ba888;
  --sage-deep: #5c7a5c;
  --sage-pale: #dfe8db;
  --gold: #b8842a;
  --done: #2e7d32;
  --rowmark: #29b6f6;
  --r: 20px;
}

/* the same reset glitterjar.css needed: this markup came from a page with a
   blanket margin reset, and main.css zeroes margins class by class */
main figure { margin: 0; }
main ul { margin: 0; padding: 0; max-width: none; }
main .wrap.narrow { max-width: 820px; }
main .wrap.narrow > * { max-width: none; }

/* ---------------- typography helpers ---------------- */

h1, h2, h3 { color: var(--plum-2); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.75rem); line-height: 1.14; margin-bottom: 14px; }
/* No stitch mark before the kicker: the app's page had one, and Anna does
   not like "the X's starting the subheaders" (19 Sep). */
.cc .kicker { color: var(--sage-deep); letter-spacing: 2.4px; }
.section-alt .kicker { color: var(--gold); }
.head { margin-bottom: 44px; }
.head .lead { max-width: 720px; }
.lead b { color: var(--ink); }
.fine { color: var(--muted); font-size: .85rem; }
.center { text-align: center; }
.tag-adv {
  display: inline-block; vertical-align: middle;
  font-size: .62rem; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff; background: var(--emph); border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.filechip {
  display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: .82em;
  color: var(--plum); background: rgba(111, 39, 66, .08); border-radius: 6px; padding: 1px 6px;
}
::selection { background: rgba(224, 122, 153, .32); }

/* THE BUTTONS ARE THE APP'S PINK. main.css paints .btn in --mint-ink, which
   on this palette is the wordmark's plum — "buttons need to be brighter
   pink, like the app itself, not deep purple" (Anna, 19 Sep). The app's own
   big buttons (Choose a picture, Stitch it) are its emphasis rose, #b23063,
   so that is the ground here, lit a little at the top. */
.cc .btn {
  background: linear-gradient(180deg, #d9497f, var(--emph));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(178, 48, 99, .32);
}
.cc .btn:hover { color: #fff; filter: brightness(1.08); }
.cc .btn.ghost { background: transparent; color: var(--emph); border-color: var(--emph); box-shadow: none; }
.cc .btn.ghost:hover { background: var(--rose-pale); filter: none; }
.cc .marquee-pause:hover { border-color: var(--emph); color: var(--emph); }

/* ---------------- hero ---------------- */

.cc-hero { position: relative; padding: 44px 0 30px; overflow: hidden; }
@media (max-width: 860px) { .cc-hero { padding-top: 24px; } }

/* main.css positions .hero-float img by nth-child for the other app pages;
   these are this hero's own places, in the gutters, never over the copy.
   Glitter Jar's charms run 34 to 58px, and the notions are the same size:
   at the app page's 96px they were "massive and way too big" (Anna, 19 Sep). */
.hero-float img { opacity: .55; filter: drop-shadow(0 8px 14px rgba(82, 25, 47, .18)); }
.hero-float img.fl-1 { top: 14%;  left: 1.5%;  width: 58px; animation-delay: -1s; }
.hero-float img.fl-2 { top: 68%;  left: 3%;    width: 46px; animation-delay: -5s; }
.hero-float img.fl-3 { top: 22%;  right: 1.5%; left: auto; width: 52px; animation-delay: -3s; }
.hero-float img.fl-4 { top: 66%;  right: 3%;   left: auto; width: 44px; animation-delay: -7s; }
.hero-float img.fl-5 { top: 44%;  left: 4%;    width: 36px; opacity: .35; animation-delay: -3s; }

.cc-hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px; align-items: center;
}
.cc-hero-grid > * { min-width: 0; }
@media (max-width: 1000px) { .cc-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* Colour, not a white pill on cream: Glitter Jar's eyebrow sits on its
   violet, so this one sits on the app's rose ("you're missing color, for
   example behind 'android first, coming soon'", Anna, 19 Sep). */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; font-size: .75rem;
  color: #fff;
  border: 1px solid var(--rose-deep);
  background: linear-gradient(180deg, var(--rose), var(--rose-deep));
  padding: 7px 15px; border-radius: 999px;
  margin: 0 0 22px;
  box-shadow: 0 6px 18px rgba(185, 95, 126, .35);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
@media (max-width: 480px) { .eyebrow { letter-spacing: 1.4px; font-size: .68rem; padding: 6px 12px; } }
@media (prefers-reduced-motion: no-preference) {
  .eyebrow .dot { animation: pulse 2.4s infinite; }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  }
  .cc-hero h1 { animation: logoIn 1.1s cubic-bezier(.2, .8, .25, 1) both; }
  @keyframes logoIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }
}
/* The app's icon inside the h1 (main.css's title-icon lockup), not the
   wordmark: "I want the cross count icon, it's better" (Anna, 19 Sep) — and
   a little bigger than the lockup's .9em. */
.cc-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4rem); color: var(--plum-2); margin-bottom: 4px; }
.cc-hero h1 .title-icon { width: 1.3em; height: 1.3em; vertical-align: -.22em; margin-right: .3em; border-radius: .26em; box-shadow: var(--shadow); }

.tagline { font-size: 1.14rem; color: var(--muted); max-width: 560px; margin: 20px 0 26px; }
.tagline em { color: var(--plum); font-style: normal; font-weight: 800; }
.tagline b { color: var(--ink); }

.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-note { font-size: .95rem; color: var(--muted); max-width: 250px; line-height: 1.45; margin: 0; }
.cta-note strong { color: var(--ink); display: block; }
.cta-note b { color: var(--emph); }

.trust { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin-top: 24px; }
.trust li {
  font-size: .82rem; font-weight: 800; color: var(--sage-deep);
  border: 1px solid var(--sage); border-radius: 999px; padding: 6px 13px 6px 10px;
  background: var(--sage-pale);
}
.trust li::before { content: '✓ '; color: var(--sage-deep); }

/* ---------------- hero device ---------------- */

/* The same footprint as Glitter Jar's device (340px wide, 9:16): the movie is
   1:2, so it is held a little narrower to land on the same height rather
   than run 60px taller ("the video is way too big", Anna, 19 Sep). */
.hero-device { justify-self: center; width: 100%; max-width: 300px; }
@media (max-width: 1000px) { .hero-device { max-width: 260px; } }

/* A phone body in the wordmark's plum, with a soft rose bloom breathing on
   the "table" behind it. The screen is 823:1847, the harness's own aspect. */
/* A 30px screen radius nibbled the top-right corner of every frame — the
   app's Settings button and Portfolio tab live there — and read as "the
   frame is cut off on the right side" (Anna, 19 Sep). The app draws to its
   edges, so the screen's corners stay nearly square. */
.device {
  position: relative;
  padding: 12px;
  border-radius: 24px;
  background: linear-gradient(160deg, #8a3a58, #52192f 55%, #3a1120);
  box-shadow:
    0 28px 60px rgba(82, 25, 47, .32),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.device::before {
  content: '';
  position: absolute; inset: 12% 4% -8%;
  z-index: -1;
  background: radial-gradient(circle, rgba(224, 122, 153, .45), rgba(255, 215, 186, .25) 55%, transparent 72%);
  filter: blur(42px);
}
.device::after {
  content: '';
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
/* The video: the frame is the movie's own (640 by 1280, a 2:1 phone), never
   cropped, since the app's own bars sit at the top and bottom of every
   frame. height:auto matters as it does on an img. */
.device .screens {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 2;
  border-radius: 12px; overflow: hidden; background: var(--linen);
  object-fit: contain;
}
/* Three captures of the same chart at one zoom, cross-fading: colours with
   symbols, the symbols alone, and colours with the grid off. All the motion
   the hero needs, and every frame is the real app. The first is visible at
   rest, so the still page and a thumbnail both show a chart. */
.stack {
  position: relative; aspect-ratio: 823 / 1847; width: 100%;
  border-radius: 12px; overflow: hidden; background: var(--linen);
}
.stack img, .stack picture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.stack picture { opacity: 0; }
.stack picture:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stack picture { animation: xfade 15s ease-in-out infinite; }
  .stack picture:nth-child(1) { animation-delay: 0s; }
  .stack picture:nth-child(2) { animation-delay: 5s; }
  .stack picture:nth-child(3) { animation-delay: 10s; }
  @keyframes xfade {
    0%   { opacity: 0; }
    6%   { opacity: 1; }
    33%  { opacity: 1; }
    40%  { opacity: 0; }
    100% { opacity: 0; }
  }
  .device::before { animation: breathe 7s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(.94); opacity: .75; }
    50%      { transform: scale(1.06); opacity: 1; }
  }
}
.stack-legend { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.stack-legend span {
  font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--plum); background: var(--rose-pale); border: 1px solid var(--rose-2);
  border-radius: 999px; padding: 4px 11px;
}
.device-cap { text-align: center; color: var(--muted); font-size: .86rem; margin: 14px 0 0; }
.device-cap b { color: var(--plum); }

/* ---------------- stats: a strip of graph paper ---------------- */

.cc-stats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px 14px; margin-top: 56px; padding: 24px 14px;
  border-radius: var(--r);
  background:
    repeating-linear-gradient(90deg, rgba(111, 39, 66, .10) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg,  rgba(111, 39, 66, .10) 0 1px, transparent 1px 22px),
    var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.cc-stat { text-align: center; }
.cc-stat b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.45rem, 3vw, 2.05rem); color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.cc-stat span { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cc-stat.zero b { color: var(--sage-deep); }
@media (max-width: 900px) { .cc-stats { grid-template-columns: repeat(3, 1fr); row-gap: 20px; } }
@media (max-width: 460px) { .cc-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- sections ---------------- */

.cc .section { padding: 96px 0; position: relative; }
@media (max-width: 720px) { .cc .section { padding: 64px 0; } }
.section-alt {
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(224, 122, 153, .16), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(139, 168, 136, .18), transparent 60%),
    var(--linen-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* a running-stitch rule, for section seams */
.stitch-rule {
  height: 2px; margin: 0; border: 0;
  background: repeating-linear-gradient(90deg, var(--rose) 0 9px, transparent 9px 17px);
  opacity: .55;
}

/* ---------------- split ---------------- */

.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.split > * { min-width: 0; }
@media (max-width: 940px) {
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); }
  .split.flip .cc-shot { order: -1; }
}
.split-copy p { margin-bottom: 14px; color: var(--muted); }
.split-copy p b { color: var(--plum); }

/* a screenshot in main.css's phone frame, on a breathing rose bloom */
.cc-shot { position: relative; text-align: center; }
.cc-shot::before {
  content: '';
  position: absolute; inset: 4% 6%;
  background: radial-gradient(circle, rgba(224, 122, 153, .38), rgba(255, 215, 186, .2) 55%, transparent 72%);
  filter: blur(34px);
}
@media (prefers-reduced-motion: no-preference) { .cc-shot::before { animation: breathe 6s ease-in-out infinite; } }
.cc-shot .phone { position: relative; }
.cc-shot figcaption { position: relative; color: var(--muted); font-size: .86rem; margin-top: 16px; }
.cc-shot figcaption b { color: var(--plum); }

/* ---------------- steps ---------------- */

.cc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1020px) { .cc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cc-steps { grid-template-columns: 1fr; } }
.cc-step {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 22px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cc-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.cc-step img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 14px; }
.cc-step h3 { font-size: 1.1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.cc-step h3 span {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, var(--rose), var(--rose-deep)); color: #fff; font-size: .84rem;
}
.cc-step p { color: var(--muted); font-size: .95rem; margin: 0; }
.cc-step p b { color: var(--ink); }

/* a little inert sum, drawn in CSS, mirroring the cloth page */
.sum {
  margin: 12px 0 14px; padding: 12px 14px;
  background: var(--sunken); border: 1px dashed var(--line-strong); border-radius: 14px;
  font-size: .84rem; color: var(--muted);
}
.sum div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.sum div b { color: var(--plum); font-weight: 800; }
.sum .is { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; color: var(--ink); font-weight: 800; }
.sum .is b { color: var(--sage-deep); }

/* ---------------- flow band: design → stitch it → work → finished ---------------- */

.flow-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 300px at 50% 50%, rgba(224, 122, 153, .16), transparent 70%),
    var(--linen-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.flow-in { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; justify-content: center; }
.flow-steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.flow-steps figure { text-align: center; width: 104px; }
.flow-steps img {
  width: 54px; margin: 0 auto;
  filter: drop-shadow(0 8px 14px rgba(82, 25, 47, .2));
  transition: transform .25s ease;
}
.flow-steps figure:hover img { transform: scale(1.12) rotate(4deg); }
.flow-steps figcaption {
  font-weight: 900; font-size: .68rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--plum); margin-top: 10px;
}
.flow-steps .n { display: block; font-size: .66rem; letter-spacing: .4px; color: var(--muted); text-transform: none; font-weight: 700; }
.flow-steps .go { color: var(--rose-deep); padding: 0 2px 26px; display: inline-flex; }
.flow-copy { max-width: 360px; color: var(--muted); font-size: 1.02rem; margin: 0; }
.flow-copy b { color: var(--plum); }

/* ---------------- knobs (the work screen) ---------------- */

/* Flex, not grid, because there are five cards and three columns: a grid
   leaves the last row short with a band of empty tint beside it, which is
   the thing Anna objected to on the symbol tray. Wrapping flex with a
   centred last row fills what it can and centres what is left over. */
.knob-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.knob-grid > * { flex: 1 1 280px; max-width: calc((100% - 36px) / 3); }
@media (max-width: 1020px) { .knob-grid > * { max-width: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .knob-grid > * { max-width: 100%; } }
.knob {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.knob:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.knob h3 {
  font-size: .82rem; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--rose-deep); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.knob h3 img { width: 24px; height: 24px; object-fit: contain; }
.knob p { color: var(--muted); font-size: .93rem; margin: 0; }
.knob p b { color: var(--ink); }

/* inert controls drawn in CSS, mirroring the app's own */
.knob .rail { position: relative; height: 6px; border-radius: 999px; background: rgba(111, 39, 66, .14); margin: 14px 0 6px; }
.knob .rail::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v, 60%);
  border-radius: 999px; background: linear-gradient(90deg, var(--sage), var(--sage-deep));
}
.knob .rail::after {
  content: ''; position: absolute; top: 50%; left: var(--v, 60%);
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--rose);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(82, 25, 47, .35);
}
.knob .seg { display: flex; gap: 4px; margin: 14px 0 6px; background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.knob .seg i {
  flex: 1; text-align: center; font-style: normal; font-size: .72rem; font-weight: 800;
  color: var(--muted); padding: 5px 0; border-radius: 999px;
}
.knob .seg i.on { background: var(--rose); color: #fff; }
.knob .toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 0 6px; padding: 8px 12px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 14px;
  font-size: .8rem; font-weight: 800; color: var(--ink);
}
.knob .toggle i { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--sage-deep); position: relative; }
.knob .toggle i::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.knob .bar {
  margin: 14px 0 6px; padding: 10px 12px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 14px;
  font-size: .8rem; font-weight: 800; color: var(--ink);
}
.knob .bar i { display: block; height: 8px; border-radius: 999px; background: rgba(111, 39, 66, .12); margin-top: 7px; overflow: hidden; }
.knob .bar i::before { content: ''; display: block; height: 100%; width: var(--v, 40%); background: linear-gradient(90deg, var(--done), #5aa85e); border-radius: 999px; }
.knob .photos { display: flex; gap: 6px; margin: 14px 0 6px; }
.knob .photos i {
  flex: 1; aspect-ratio: 4 / 3; border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--linen-2), var(--rose-pale));
  border: 1px solid var(--line);
}
.knob .photos i:nth-child(2) { background: linear-gradient(135deg, var(--rose-pale), var(--rose-2)); }
.knob .photos i:nth-child(3) { background: linear-gradient(135deg, var(--rose-2), var(--rose)); }
.knob .photos i::after {
  content: attr(data-d); position: absolute; left: 6px; bottom: 4px;
  font-style: normal; font-size: .58rem; font-weight: 900; letter-spacing: .5px; color: var(--plum);
}
/* a corner of chart: the squares you have ticked off, dimmed green with a tick */
.knob .grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin: 14px 0 6px;
  padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.knob .grid i { aspect-ratio: 1; border-radius: 2px; background: var(--c, #c9c2d6); position: relative; border: 1px solid rgba(0, 0, 0, .18); }
.knob .grid i.d { background: color-mix(in srgb, var(--c, #c9c2d6) 45%, #e4f0e4); }
.knob .grid i.d::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  font-style: normal; font-size: .6rem; font-weight: 900; color: var(--done); line-height: 1;
}
.knob .grid i.r { box-shadow: inset 0 0 0 2px var(--rowmark); }
/* a real crop of the app instead of a drawing of it */
.knob .real { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); margin: 14px 0 6px; }

/* ---------------- cards ---------------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1020px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 12px; }
.card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: .93rem; margin: 0; }
.card p b { color: var(--ink); }

/* ---------------- the skein shelf: main.css's marquee, carrying skeins ---------------- */

/* a skein: a rounded block of the floss colour with a paper band, the DMC
   number on the band the way the real thing carries it */
.marquee.floss .track { gap: 14px; align-items: flex-end; padding: 22px 12px 10px; }
.marquee.floss .track figure { flex: none; width: 74px; text-align: center; }
.marquee.floss .track figure::before {
  content: ''; display: block; height: 58px; margin: 0 8px;
  border-radius: 9px;
  background:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, transparent 0 34%, rgba(255, 253, 248, .96) 34% 62%, transparent 62%),
    var(--c);
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, .3), 0 8px 16px rgba(82, 25, 47, .16);
}
.marquee.floss figcaption { font-size: .66rem; font-weight: 900; color: var(--plum); margin-top: 8px; letter-spacing: .2px; line-height: 1.2; }
.marquee.floss figcaption span { display: block; font-weight: 700; color: var(--muted); font-size: .6rem; letter-spacing: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .marquee.floss .track figure { animation: bob 7s ease-in-out infinite; }
  .marquee.floss .track figure:nth-child(2n) { animation-delay: -2.5s; }
  .marquee.floss .track figure:nth-child(3n) { animation-delay: -4.5s; }
  .marquee.floss:hover .track figure,
  .marquee.floss.paused .track figure { animation-play-state: paused; }
}

/* ---------------- cloth chips, in the app's three groups ---------------- */

.cloth-groups { display: grid; gap: 14px; margin: 18px 0 8px; }
.cloth-group h4 {
  margin: 0 0 6px; font-family: var(--body); font-size: .72rem; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--sage-deep);
}
.fabrics { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.fabrics li {
  font-size: .82rem; font-weight: 700; color: var(--plum);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px;
}
/* No tick on the Basic five: a tick read as "on", and five cloths cannot all
   be on (Anna, 19 Sep). The paragraph names them instead. */
.cloths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; list-style: none; }
.cloths li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 5px;
}
.cloths li i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .18); }
.legend-note { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.legend-note b { color: var(--sage-deep); }

/* ---------------- modes (Basic / Advanced) ---------------- */

.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .modes { grid-template-columns: 1fr; } }
.mode {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 26px;
  padding: 30px 28px 28px;
  box-shadow: var(--shadow);
}
.mode-basic { background: linear-gradient(180deg, #fffdf8, #f7efe4); }
/* Light, like everything else on the page. The app's own page set Advanced
   on a near-black plum, and Anna "still doesn't like the super dark purple
   backgrounds on some cards" (19 Sep): the two modes are the same app, so
   the two cards are the same cream, and Advanced is told apart by its rose. */
.mode-adv   { background: linear-gradient(180deg, #fff3f7, #fbe4ec); border-color: var(--rose-2); }
.mode .kicker { margin-bottom: 8px; }
.mode-adv .kicker { color: var(--emph); }
.mode h3 { font-size: 1.5rem; margin-bottom: 8px; }
.mode > p { font-size: .96rem; margin-bottom: 18px; color: var(--muted); }
.mode ul { list-style: none; display: grid; gap: 7px; }
.mode li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--ink); }
.mode li::before { content: '✓'; position: absolute; left: 3px; top: 0; color: var(--sage-deep); font-weight: 900; }
.mode-adv li::before { content: '+'; color: var(--emph); }
.mode-switch {
  margin-top: 22px; grid-column: 1 / -1;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(224, 122, 153, .18), rgba(139, 168, 136, .16));
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 22px 26px;
}
.mode-switch .sw { flex: none; display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.mode-switch .sw i {
  font-style: normal; font-size: .76rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px; color: var(--muted);
}
.mode-switch .sw i.on { background: var(--emph); color: #fff; }
.mode-switch p { flex: 1; min-width: 260px; color: var(--muted); font-size: .96rem; margin: 0; }
.mode-switch b { color: var(--plum); }

/* ---------------- the symbol tray ---------------- */

.cc-tray-head {
  display: flex; align-items: baseline; gap: 12px; margin: 44px 0 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; flex-wrap: wrap;
}
.cc-tray-head h3 { font-size: 1.02rem; color: var(--plum); letter-spacing: 1.6px; text-transform: uppercase; }
.cc-tray-head span { font-size: .8rem; color: var(--muted); font-weight: 700; }
/* Sixty-seven is prime, so no row count divides it: auto-fill put 21 a row
   and left a last row of four with a band of empty tint beside it ("so
   much blank purple", Anna, 19 Sep). The counts below leave the last row
   nearly full at every width: 17 a row is 17+17+17+16, 14 is four rows and
   eleven, 10 is six rows and seven. */
/* on the app's pale rose, as Anna asked (19 Sep): white cells on pink */
.cc-tray {
  display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 6px;
  padding: 12px; border-radius: var(--r);
  background: linear-gradient(180deg, #ffe9f0, var(--rose-pale));
  border: 1px solid var(--rose-2);
}
@media (max-width: 900px) { .cc-tray { grid-template-columns: repeat(14, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cc-tray { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; padding: 8px; } }
.cc-tray i {
  aspect-ratio: 1; display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: clamp(.8rem, 1.6vw, 1.05rem); color: var(--ink);
  background: #fff; border: 1px solid rgba(111, 39, 66, .28); border-radius: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-tray i:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 18px rgba(82, 25, 47, .2); }
.cc-tray-note { font-size: .84rem; color: var(--muted); margin-top: 12px; }

/* ---------------- export ---------------- */

.export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1020px) { .export-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .export-grid { grid-template-columns: 1fr; } }
/* a stack of tiled sheets, drawn in CSS */
.sheets { position: relative; height: 92px; margin: 4px 0 18px; }
.sheets i {
  position: absolute; width: 58px; height: 74px; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(111, 39, 66, .14) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg,  rgba(111, 39, 66, .14) 0 1px, transparent 1px 7px),
    #fff;
  border: 1px solid var(--line-strong); box-shadow: 0 6px 14px rgba(82, 25, 47, .16);
}
.sheets i:nth-child(1) { left: 0; top: 14px; transform: rotate(-8deg); }
.sheets i:nth-child(2) { left: 34px; top: 6px; transform: rotate(-2deg); }
.sheets i:nth-child(3) { left: 68px; top: 0; transform: rotate(5deg); }
.sheets i:nth-child(3)::after {
  content: 'PDF'; position: absolute; right: -10px; bottom: -8px;
  font-style: normal; font-size: .58rem; font-weight: 900; letter-spacing: 1px;
  background: var(--plum); color: #fff; border-radius: 999px; padding: 2px 7px;
}

/* ---------------- the complaints (the pitch) ---------------- */

.gripes { display: grid; gap: 14px; }
.gripe {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.05fr);
  align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.gripe:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.gripe p { margin: 0; max-width: none; }
.gripe .said { color: var(--muted); font-size: .96rem; font-style: italic; padding-left: 16px; border-left: 3px solid var(--rose-2); }
.gripe .arrow { justify-self: center; color: var(--sage-deep); display: inline-flex; }
.gripe .ours { font-size: .98rem; }
.gripe .ours b { color: var(--plum); }
@media (max-width: 820px) {
  .gripe { grid-template-columns: 1fr; gap: 12px; }
  .gripe .arrow { justify-self: start; transform: rotate(90deg); }
}

/* ---------------- the promise ---------------- */

.promise { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: stretch; }
@media (max-width: 880px) { .promise { grid-template-columns: 1fr; } }
.promise-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 24px;
  padding: 30px 28px; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.promise-card.headline {
  border: 2px solid var(--line-strong);
  background:
    radial-gradient(500px 320px at 80% -10%, rgba(224, 122, 153, .18), transparent 62%),
    var(--card);
  box-shadow: var(--shadow-lift);
}
.promise-card header { margin-bottom: 18px; }
.promise-card h3 { font-size: 1.35rem; }
.promise-card header p { margin: 6px 0 0; }
.promise-card ul { list-style: none; margin-bottom: 26px; flex: 1; }
.promise-card li {
  padding: 9px 0 9px 30px; position: relative;
  color: var(--muted); font-size: .97rem;
  border-bottom: 1px dashed var(--line);
}
.promise-card li:last-child { border-bottom: 0; }
.promise-card li b { color: var(--ink); }
.promise-card li::before { content: '✓'; position: absolute; left: 4px; top: 8px; color: var(--sage-deep); font-weight: 900; }
.promise-card.nots li::before { content: '✕'; color: var(--rose-deep); }
.ribbon {
  position: absolute; top: -14px; right: 26px;
  font-size: .72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(180deg, var(--rose), var(--rose-deep));
  color: #fff; padding: 7px 16px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(185, 95, 126, .35);
}
.promise-card .btn { justify-content: center; }

/* ---------------- FAQ ---------------- */

.cc-faq details {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card);
  margin-bottom: 12px; overflow: hidden;
  box-shadow: var(--shadow);
}
.cc-faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--plum-2);
  padding: 17px 52px 17px 20px; position: relative; min-height: 44px;
}
.cc-faq summary::-webkit-details-marker { display: none; }
.cc-faq summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--rose-deep);
  transition: transform .25s ease;
}
.cc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.cc-faq details p { padding: 0 20px 18px; color: var(--muted); font-size: .96rem; margin: 0; max-width: none; }
.cc-faq details p + p { padding-top: 0; }
.cc-faq details p b { color: var(--ink); }

/* ---------------- final band ---------------- */

.final {
  position: relative; padding: 106px 0 116px; text-align: center;
  background: radial-gradient(700px 420px at 50% 20%, rgba(224, 122, 153, .18), transparent 66%);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.final-in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.final-icon { width: 128px; height: 128px; border-radius: 28px; box-shadow: var(--shadow-lift); }
.final h2 { margin: 0; }
.final p { font-size: 1.22rem; color: var(--muted); margin: 0; max-width: 60ch; }
.final .fine { font-size: .88rem; }
.contact-line { font-size: 1rem; }
.contact-line a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.solo-dev { margin-top: 20px; color: var(--muted); font-size: .96rem; font-style: italic; }
.solo-dev .x, .solo-dev .heart { display: inline-block; color: var(--rose-deep); font-style: normal; font-weight: 900; }
@media (prefers-reduced-motion: no-preference) {
  .solo-dev .x, .solo-dev .heart { animation: heartbeat 1.9s ease-in-out infinite; }
  @keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.24); }
    24% { transform: scale(1); }
    36% { transform: scale(1.17); }
    48% { transform: scale(1); }
  }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stack picture { opacity: 0; }
  .stack picture:first-child { opacity: 1; }
}

/* The photograph example is one figure now, not a two-column side: its title
   and its numbers sit under the picture with the other three (Anna, 19 Sep). */
.photo-one { max-width: 560px; margin: 48px auto 0; }

/* The price, decided 19 Sep 2026: one payment, no subscription. */
.promise-card .price {
  margin: 6px 0 2px;
  font-family: var(--display); font-weight: 700; font-size: 2.1rem;
  line-height: 1.05; color: var(--emph);
}
.promise-card .price span {
  display: block;
  font-family: var(--body); font-weight: 700; font-size: .78rem;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  margin-top: 4px;
}

/* The trademark note, moved off the site footer and onto the page. */
.trademarks { padding: 0 0 40px; }
.trademarks p { max-width: none; font-size: .78rem; line-height: 1.65; color: var(--muted); margin: 0; }