/* Service pages, creative layer. Loads after home-v5.css on a discipline page
   and works on its existing markup (cover, .rates, .index/.entry, .strip), plus
   the browser mock-up that tools/service_x.py puts in the cover. */

/* ---------------- cover ---------------- */
main .cover-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
@media (max-width: 900px) { main .cover-top { grid-template-columns: 1fr; } }

/* the browser that builds a site while you read */
.wd { position: relative; aspect-ratio: 5 / 4; max-width: 560px; width: 100%; justify-self: end; --t: 6.5s; }
.wd-win { position: absolute; inset: 0 12% 8% 0; background: #F4F1E9; border-radius: 12px; box-shadow: 0 30px 70px rgba(19, 18, 23, 0.16); overflow: hidden; display: flex; flex-direction: column; }
.wd-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #E4E0D6; }
.wd-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #C9C4B8; }
.wd-bar > i:first-child { background: #E0625A; } .wd-bar > i:nth-child(2) { background: #E3B341; } .wd-bar > i:nth-child(3) { background: #5BB974; }
.wd-url { margin-left: 10px; flex: 1; background: #F4F1E9; border-radius: 6px; padding: 5px 10px; font-family: var(--mono); font-size: clamp(0.58rem, 0.8vw, 0.72rem); color: #56535C; white-space: nowrap; overflow: hidden; }
.wd-url b { font-weight: 400; color: #9A968C; }
.wd-type { display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; animation: wd-type var(--t) steps(15) infinite; }
.wd-page { flex: 1; padding: 6% 7%; display: flex; flex-direction: column; gap: 7%; }
.wd-nav { display: flex; align-items: center; gap: 6%; }
.wd-nav span { width: 16%; height: 9px; border-radius: 3px; background: #131217; }
.wd-nav em { width: 9%; height: 5px; border-radius: 3px; background: #BDB8AC; }
.wd-nav em:first-of-type { margin-left: auto; }
.wd-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7%; align-items: center; }
.wd-hero p { height: 12px; border-radius: 3px; background: #131217; margin-bottom: 8px; }
.wd-hero p.s { width: 60%; height: 6px; background: #9A968C; }
.wd-btn { display: block; width: 44%; height: 16px; border-radius: 99px; background: #BDB8AC; margin-top: 12px; animation: wd-btn var(--t) infinite; }
.wd-img { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(135deg, #C9A227, #C8102E); animation: wd-img var(--t) infinite; }
.wd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.wd-cards > div { aspect-ratio: 1 / 0.8; border-radius: 6px; background: #E4E0D6; padding: 8%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; position: relative; }
.wd-cards > div::before { content: ""; height: 5px; width: 70%; border-radius: 3px; background: #9A968C; }
.wd-price { position: relative; font-family: var(--serif); font-weight: 600; font-size: clamp(0.7rem, 1.1vw, 0.95rem); color: #131217; height: 1.2em; }
.wd-price b, .wd-price s { position: absolute; left: 0; top: 0; font-weight: 600; }
.wd-price s { text-decoration-color: #C8102E; animation: wd-old var(--t) infinite; }
.wd-price b { color: #C8102E; opacity: 0; animation: wd-new var(--t) infinite; }
/* blocks draw themselves in */
.wd-page > * > *, .wd-hero > div > * { transform-origin: left; animation: wd-draw var(--t) infinite; }
.wd-hero > div > :nth-child(2) { animation-delay: 0.12s; } .wd-hero > div > :nth-child(3) { animation-delay: 0.24s; }
.wd-cards > :nth-child(2) { animation-delay: 0.15s; } .wd-cards > :nth-child(3) { animation-delay: 0.3s; }
/* the pointer that changes a price */
.wd-cursor { position: absolute; width: 18px; height: 18px; left: 60%; top: 60%; animation: wd-cursor var(--t) infinite; z-index: 3; filter: drop-shadow(0 2px 3px rgba(19, 18, 23, 0.16)); }
.wd-cursor::before { content: ""; position: absolute; inset: 0; background: #131217; clip-path: polygon(0 0, 0 100%, 30% 72%, 52% 100%, 64% 94%, 44% 66%, 80% 66%); }
/* the phone: same site, one column */
.wd-phone { position: absolute; right: 0; bottom: 0; width: 26%; aspect-ratio: 9 / 18; background: #131217; border-radius: 16px; padding: 5px; box-shadow: 0 24px 50px rgba(19, 18, 23, 0.16); animation: wd-phone var(--t) infinite; }
.wd-phone .wd-page { height: 100%; background: #F4F1E9; border-radius: 12px; padding: 14% 12%; gap: 6%; }
.wd-phone .wd-hero { grid-template-columns: 1fr; gap: 10%; }
.wd-phone .wd-cards { grid-template-columns: 1fr; gap: 8%; }
.wd-phone .wd-cards > div { aspect-ratio: 3 / 1; }
.wd-phone .wd-cards > div:nth-child(n + 3) { display: none; }
.wd-phone .wd-nav em { display: none; }
.wd-phone .wd-price { display: none; }

@keyframes wd-type { 0%, 3% { width: 0; } 14%, 100% { width: 9.4em; } }
@keyframes wd-draw { 0%, 12% { transform: scaleX(0); opacity: 0; } 22%, 96% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes wd-img { 0%, 26% { filter: grayscale(1) brightness(1.6); } 38%, 100% { filter: none; } }
@keyframes wd-btn { 0%, 34% { background: #BDB8AC; } 42%, 100% { background: #C9A227; } }
@keyframes wd-cursor { 0%, 44% { left: 88%; top: 30%; opacity: 0; } 48% { opacity: 1; } 56%, 60% { left: 10%; top: 73%; } 61% { transform: scale(0.8); } 62% { transform: scale(1); } 72% { left: 30%; top: 95%; opacity: 1; } 76%, 100% { opacity: 0; left: 30%; top: 95%; } }
@keyframes wd-old { 0%, 60% { opacity: 1; text-decoration-line: none; } 62%, 66% { opacity: 1; text-decoration-line: line-through; } 70%, 100% { opacity: 0; } }
@keyframes wd-new { 0%, 66% { opacity: 0; transform: translateY(6px); } 70%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wd-phone { 0%, 70% { transform: translate(30%, 10%) rotate(8deg); opacity: 0; } 78%, 95% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wd *, .wd { animation: none !important; }
  .wd-type { width: 9.4em; } .wd-price s { opacity: 0; } .wd-price b { opacity: 1; } .wd-cursor { display: none; }
  .wd-btn { background: #C9A227; }
}
@media (max-width: 900px) { .wd { justify-self: stretch; max-width: 520px; margin-top: 1rem; } }

/* the platform strip: bigger, italic, the logo's X between words */
main .strip-track { font-style: italic; font-size: clamp(1.4rem, 3vw, 2.6rem); color: var(--ink-2); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
main .strip-track span.dot { font-size: 0; width: clamp(1.1rem, 2.2vw, 1.9rem); height: clamp(0.9rem, 1.8vw, 1.5rem); background: url("assets/x-mark.svg") center / contain no-repeat; flex: none; }

/* the three columns: the problem gets crossed out, the answers underlined in gold */
main .columns .col-lead h3 { position: relative; display: inline; background: linear-gradient(var(--red), var(--red)) left 55% / 0% 0.09em no-repeat; transition: background-size 0.9s cubic-bezier(.7, 0, .2, 1) 0.3s; }
main .columns .col-lead.in h3 { background-size: 100% 0.09em; }
main .columns .col:not(.col-lead):not(.aside) h3 { background: linear-gradient(var(--gold), var(--gold)) left 100% / 0% 2px no-repeat; transition: background-size 0.9s cubic-bezier(.7, 0, .2, 1) 0.4s; display: inline; }
main .columns .col.in:not(.col-lead):not(.aside) h3 { background-size: 100% 2px; }
/* "at a glance" as a receipt */
main .columns .aside .insert { background: #FBF9F3; color: #131217; border: 0; transform: rotate(1.4deg); box-shadow: 0 22px 50px rgba(19, 18, 23, 0.16); --ink: #131217; --ink-2: #3F3C45; --ink-3: #56535C; --rule: rgba(19, 18, 23, 0.18); }
main .columns .aside .insert .insert-flag { color: #8A6A21; }
main .columns .aside .insert .facts li b { font-family: var(--serif); font-weight: 600; font-size: 0.95rem; }

/* ---------------- packages as scope sheets ---------------- */
main #packages .rates { border-top: 0; gap: clamp(1rem, 2.4vw, 2rem); align-items: start; padding-block: 1rem 1.6rem; }
main #packages .pack { background: #FBF9F3; border: 1px solid rgba(19, 18, 23, 0.16); box-shadow: 0 20px 44px rgba(19, 18, 23, 0.12); padding: clamp(1.3rem, 2.4vw, 2rem); transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.45s; }
main #packages .pack:nth-child(1) { transform: rotate(-1.4deg); }
main #packages .pack:nth-child(2) { transform: translateY(-14px); box-shadow: 0 34px 60px rgba(19, 18, 23, 0.2); border-top: 4px solid var(--red); }
main #packages .pack:nth-child(3) { transform: rotate(1.4deg); }
main #packages .pack:hover { transform: translateY(-20px) rotate(0); box-shadow: 0 40px 70px rgba(19, 18, 23, 0.22); z-index: 2; }
main #packages .pack .rate-fig { font-size: clamp(2.6rem, 4.6vw, 3.8rem); }
main #packages .pack-list li::before { content: "✓"; color: #8A6A21; }
@media (max-width: 900px) { main #packages .pack:nth-child(n) { transform: none; } }

/* ---------------- process as a timeline ---------------- */
main #process .index { border-top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); position: relative; padding-top: 3.4rem; }
main #process .index::before, main #process .index::after { content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 2px; background: var(--rule-2); }
main #process .index::after { background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); }
main #process .entry { display: flex; flex-direction: column; gap: 0.6rem; padding: 0; border: 0; position: relative; }
main #process .entry::before { content: ""; position: absolute; top: -2.95rem; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--stock); border: 2px solid var(--rule-2); opacity: 1; inset-inline: auto; transition: background 0.3s, border-color 0.3s; }
main #process .entry.lit::before { background: var(--gold); border-color: var(--gold); }
main #process .entry-price { order: -1; text-align: left; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
main #process .entry-price b { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; }
@media (max-width: 820px) {
  main #process .index { grid-template-columns: 1fr 1fr; padding-top: 0; }
  main #process .index::before, main #process .index::after, main #process .entry::before { display: none; }
}
@media (max-width: 520px) { main #process .index { grid-template-columns: 1fr; } }

/* ---------------- add-ons and price lists as tickets: stub, perforation, price ----------------
   Tickets grow to fill each row (3 + 2, 3 + 3 + 2 …), so no row is left with a gap or a lone card. */
main :is(#addons, #prices) .index { border-top: 0; display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 1.8vw, 1.4rem); }
main :is(#addons, #prices) .entry { flex: 1 1 380px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 0; row-gap: 0.4rem; align-items: start; position: relative; padding: 0; border: 0; border-radius: 14px; background: #FBF9F3; box-shadow: 0 1px 0 rgba(19, 18, 23, 0.08), 0 14px 30px rgba(19, 18, 23, 0.07); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s; }
main :is(#addons, #prices) .entry::before { display: none; }
main :is(#addons, #prices) .entry:nth-child(odd):hover { transform: translateY(-5px) rotate(-0.6deg); }
main :is(#addons, #prices) .entry:nth-child(even):hover { transform: translateY(-5px) rotate(0.6deg); }
main :is(#addons, #prices) .entry:hover { box-shadow: 0 1px 0 rgba(19, 18, 23, 0.08), 0 26px 50px rgba(19, 18, 23, 0.16); }
main :is(#addons, #prices) .entry-no, main :is(#addons, #prices) .entry-title, main :is(#addons, #prices) .entry-dek { grid-column: 1; padding-inline: clamp(1.2rem, 2vw, 1.7rem); }
main :is(#addons, #prices) .entry-no { padding-top: clamp(1.1rem, 2vw, 1.5rem); }
main :is(#addons, #prices) .entry-title { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
main :is(#addons, #prices) .entry-dek { padding-bottom: clamp(1.1rem, 2vw, 1.5rem); max-width: 58ch; }
/* the stub: sized to its price, torn along a perforation, half-moon notches top and bottom */
main :is(#addons, #prices) .entry-price { grid-column: 2; grid-row: 1 / -1; align-self: stretch; min-width: 7.5rem; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.15rem; text-align: center; padding: 1.2rem clamp(1rem, 1.6vw, 1.4rem); border-left: 2px dashed rgba(19, 18, 23, 0.25); background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(201, 162, 39, 0.07) 9px 10px); white-space: nowrap; }
main :is(#addons, #prices) .entry-price::before, main :is(#addons, #prices) .entry-price::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--cream); }
main :is(#addons, #prices) .entry-price::before { top: -11px; } main :is(#addons, #prices) .entry-price::after { bottom: -11px; }
main :is(#addons, #prices) .entry-price b { display: flex; flex-direction: column; align-items: center; font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: -0.03em; line-height: 1; margin-top: 0.25rem; }
main :is(#addons, #prices) .entry-price .unit { font-family: var(--mono); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: #56535C; margin-top: 0.35rem; }
main :is(#addons, #prices) .entry-price .price-tag { margin-top: 0.55rem; }
main :is(#addons, #prices) .entry:hover .entry-price { border-left-color: var(--red); }
/* the lone wide ticket: title on the left, description in the middle, stub on the right */
main :is(#addons, #prices) .entry.wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; grid-template-rows: auto 1fr; column-gap: clamp(1rem, 3vw, 3rem); }
main :is(#addons, #prices) .entry.wide .entry-no { grid-column: 1; grid-row: 1; }
main :is(#addons, #prices) .entry.wide .entry-title { grid-column: 1; grid-row: 2; padding-bottom: clamp(1.1rem, 2vw, 1.5rem); font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
main :is(#addons, #prices) .entry.wide .entry-dek { grid-column: 2; grid-row: 1 / -1; align-self: center; padding: clamp(1.1rem, 2vw, 1.5rem) 0; }
main :is(#addons, #prices) .entry.wide .entry-price { grid-column: 3; min-width: 11rem; }
@media (max-width: 520px) { main :is(#addons, #prices) .entry { flex-basis: 100%; } main :is(#addons, #prices) .entry-price { min-width: 6.4rem; } }

/* ---------------- work: a magazine spread, sites shown in browser frames ---------------- */
main #work .stories { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; align-items: start; counter-reset: st; row-gap: clamp(1.4rem, 3vw, 2.4rem); }
main #work .story { grid-column: 8 / -1; counter-increment: st; position: relative; }
main #work .story:first-child { grid-column: 1 / 8; grid-row: span 2; }
main #work .story:first-child .story-fig img { aspect-ratio: 16 / 10; }
main #work .story:first-child h4 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
main #work .story-fig { position: relative; border: 0; border-radius: 12px; padding-top: 26px; background: radial-gradient(circle 4px at 16px 13px, #E0625A 98%, transparent) no-repeat, #1C1B22; box-shadow: 0 24px 50px rgba(19, 18, 23, 0.16); transition: transform 0.5s cubic-bezier(.2, .8, .2, 1); }
main #work .story-fig::before { content: ""; position: absolute; top: 9px; left: 26px; width: 22px; height: 8px; background: radial-gradient(circle 4px at 4px 4px, #E3B341 98%, transparent), radial-gradient(circle 4px at 18px 4px, #5BB974 98%, transparent); }
main #work .story-fig img { border-radius: 0 0 12px 12px; }
main #work .story:hover .story-fig { transform: translateY(-6px) rotate(-0.6deg); }
main #work .story::after { content: counter(st, decimal-leading-zero); position: absolute; top: -0.35em; right: 0.2em; z-index: 2; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--gold); pointer-events: none; }
/* the open slot: where the next project goes */
main #work .story-next .story-fig { background: transparent; box-shadow: none; border: 2px dashed var(--rule-2); padding-top: 0; aspect-ratio: 2 / 1; display: grid; place-items: center; }
main #work .story-next .story-fig::before { display: none; }
main #work .story-next .story-fig img { width: 26%; height: auto; aspect-ratio: auto; border-radius: 0; transition: transform 0.6s cubic-bezier(.2, 1.4, .4, 1); }
main #work .story-next:hover .story-fig img { transform: rotate(90deg) scale(1.08); }
main #work .story-next:hover .story-fig { border-color: var(--gold); transform: none; }
main #work .story-next::after { -webkit-text-stroke-color: var(--red); }
main #work .story-next h4 { color: var(--gold); }
@media (max-width: 820px) {
  main #work .story, main #work .story:first-child { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------------- care plans with a heartbeat ---------------- */
main #care .rate { position: relative; overflow: hidden; padding-bottom: 3.6rem; }
main #care .rate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.9rem; height: 28px; opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28'%3E%3Cpath d='M0 14h60l6-10 8 20 8-26 7 22 5-6h106' fill='none' stroke='%235FD08A' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 200px 28px repeat-x;
  animation: care-beat 3.2s linear infinite; }
main #care .rate:hover::after { opacity: 1; }
@keyframes care-beat { to { background-position: 200px 0; } }
@media (prefers-reduced-motion: reduce) { main #care .rate::after { animation: none; } }

/* ---------------- why: four big numbered panels ---------------- */
main #why .index { border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
main #why .entry { display: flex; flex-direction: column; gap: 0.6rem; background: var(--stock); padding: clamp(1.4rem, 3vw, 2.6rem); border: 0; }
main #why .entry::before { display: none; }
main #why .entry-no { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(3rem, 6vw, 5rem); line-height: 0.8; letter-spacing: -0.04em; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--gold); }
@media (max-width: 700px) { main #why .index { grid-template-columns: 1fr; } }

/* ---------------- fit: yes, yes — and the X for "look elsewhere" ---------------- */
main #fit .index { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); }
main #fit .entry { display: flex; flex-direction: column; gap: 0.7rem; border: 1px solid rgba(19, 18, 23, 0.18); border-radius: 14px; padding: clamp(1.3rem, 2.4vw, 2rem); padding-top: 4.2rem; position: relative; }
main #fit .entry::before { content: ""; position: absolute; top: 1.3rem; left: clamp(1.3rem, 2.4vw, 2rem); width: 2.1rem; height: 2.1rem; border-radius: 50%; opacity: 1; inset-inline: auto; background: #2E7D4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat; }
main #fit .entry:last-child { background: #131217; color: #F2EFE7; border-color: #131217; --ink: #F2EFE7; --ink-2: rgba(242, 239, 231, 0.75); }
main #fit .entry:last-child::before { border-radius: 0; background: url("assets/x-mark.svg") center / contain no-repeat; width: 2.6rem; }
main #fit .entry-price { display: none; }
@media (max-width: 820px) { main #fit .index { grid-template-columns: 1fr; } }
main .columns .col h3 + p { margin-top: 1rem; }
main .columns .col h3 { line-height: 1.3; }
main #packages .pack .rate-fig sup::after { content: "\00a0€"; }
main #process .entry-price b { text-transform: none; }

/* =====================================================================
   Content & Community: a post that earns a question, a reply, and a citation
   ===================================================================== */
.cx { position: relative; aspect-ratio: 10 / 11; max-width: 520px; width: 100%; justify-self: end; --t: 9s; }
.cx-phone { position: absolute; left: 4%; top: 0; width: 50%; aspect-ratio: 9 / 18.6; background: #131217; border-radius: 30px; padding: 7px; box-shadow: 0 30px 70px rgba(19, 18, 23, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cx-post { height: 100%; background: #FBF9F3; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; color: #131217; font-size: clamp(0.5rem, 0.8vw, 0.66rem); }
.cx-head { display: flex; align-items: center; gap: 6px; padding: 12% 8% 5%; }
.cx-head b, .cx-mini b { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }
.cx-head i { margin-left: auto; font-style: normal; color: #9A968C; letter-spacing: 1px; }
.cx-av, .cx-av2 { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: conic-gradient(from 200deg, #C9A227, #C8102E, #C9A227); box-shadow: 0 0 0 2px #FBF9F3, 0 0 0 3px #C8102E; }
.cx-av2 { background: #BDB8AC; box-shadow: none; }
.cx-img { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 35%, #EDE3CF, #D6C6A6); }
.cx-coat { position: absolute; inset: 14% 20% 6%; background: linear-gradient(160deg, #3F7A5A, #2A5541); clip-path: polygon(36% 0, 64% 0, 82% 7%, 100% 34%, 91% 42%, 82% 30%, 84% 100%, 16% 100%, 18% 30%, 9% 42%, 0 34%, 18% 7%); }
.cx-coat::before { content: ""; position: absolute; left: 36%; right: 36%; top: 0; height: 34%; background: #EDE3CF; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cx-coat::after { content: ""; position: absolute; left: 49%; top: 40%; width: 4%; aspect-ratio: 1; border-radius: 50%; background: #C9A227; box-shadow: 0 1.6em 0 #C9A227, 0 3.2em 0 #C9A227; }
.cx-acts { display: flex; align-items: center; gap: 9px; padding: 5% 8% 2%; }
.cx-acts svg { width: 1.7em; height: 1.7em; display: block; }
.cx-heart svg { fill: none; stroke: #131217; stroke-width: 2; animation: cx-heart var(--t) infinite; transform-origin: center; }
.cx-bub { color: #131217; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.cx-likes { margin-left: auto; font-family: var(--mono); font-weight: 500; counter-reset: n var(--n); animation: cx-likes var(--t) infinite; }
.cx-likes::after { content: counter(n) " ♥"; }
.cx-cap { padding: 1% 8% 4%; }
.cx-cap p { height: 0.55em; border-radius: 3px; background: #BDB8AC; margin-bottom: 0.45em; }
.cx-cap p.s { width: 55%; }
.cx-c { display: flex; align-items: flex-start; gap: 6px; margin: 0 6% 5%; padding: 6px 8px; border-radius: 12px; background: #EFEBE1; opacity: 0; transform: translateY(8px); }
.cx-c p { line-height: 1.35; }
.cx-c .cx-av, .cx-c .cx-av2 { width: 1.5em; height: 1.5em; }
.cx-ask { animation: cx-ask var(--t) infinite; }
.cx-reply { margin-left: 14%; background: #F3E6BC; animation: cx-reply var(--t) infinite; }
.cx-ai { position: absolute; right: 0; bottom: 10%; width: 52%; padding: 14px 16px; border-radius: 14px; background: #1C1B22; border: 1px solid rgba(201, 162, 39, 0.6); box-shadow: 0 24px 50px rgba(19, 18, 23, 0.16); color: #F2EFE7; font-size: clamp(0.66rem, 0.95vw, 0.8rem); line-height: 1.45; opacity: 0; transform: translate(12px, 10px); animation: cx-ai var(--t) infinite; }
.cx-ai-l { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 0.85em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.cx-ai b { font-weight: 600; color: var(--gold); border-bottom: 1px solid currentColor; }
@keyframes cx-heart { 0%, 14% { fill: none; stroke: #131217; transform: scale(1); } 17% { fill: #C8102E; stroke: #C8102E; transform: scale(1.35); } 21%, 96% { fill: #C8102E; stroke: #C8102E; transform: scale(1); } 100% { fill: none; stroke: #131217; } }
@keyframes cx-likes { 0%, 14% { --n: 0; } 50%, 96% { --n: 248; } 100% { --n: 0; } }
@keyframes cx-ask { 0%, 36% { opacity: 0; transform: translateY(8px); } 42%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cx-reply { 0%, 52% { opacity: 0; transform: translateY(8px); } 58%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cx-ai { 0%, 66% { opacity: 0; transform: translate(12px, 10px); } 73%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cx *, .cx { animation: none !important; }
  .cx-c, .cx-ai { opacity: 1; transform: none; }
  .cx-likes { --n: 248; } .cx-heart svg { fill: #C8102E; stroke: #C8102E; }
}
@media (max-width: 900px) { .cx { justify-self: stretch; max-width: 460px; margin-top: 1rem; } }

/* ---------------- proof: the same product, two captions ---------------- */
.cx-proof { padding-block: clamp(3.5rem, 8vw, 6.5rem); border-top: 1px solid var(--rule); }
.cx-kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.cx-h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 0.98; letter-spacing: -0.035em; word-spacing: 0.06em; }
.cx-h2 em { font-style: italic; color: var(--gold); }
.cx-dek { margin-top: 1.1rem; max-width: 56ch; color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.cx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: stretch; }
.cx-card { position: relative; margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 18px; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.cx-card figcaption { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cx-mini { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.cx-mini .cx-av { width: 1.6rem; height: 1.6rem; }
.cx-text { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.55; }
.cx-card ul { list-style: none; padding: 1rem 0 0; margin: auto 0 0; display: grid; gap: 0.5rem; border-top: 1px solid currentColor; border-top-color: rgba(128, 128, 128, 0.3); }
.cx-card li { display: flex; gap: 0.6rem; font-size: 0.9rem; }
.cx-card li.no::before { content: "✕"; color: #E8546B; font-weight: 700; }
.cx-card li.yes::before { content: "✓"; color: #2E7D4F; font-weight: 700; }
.cx-before { background: #17161C; border: 1px solid var(--rule-2); color: var(--ink-2); }
.cx-before figcaption { color: var(--ink-3); }
.cx-before .cx-av { filter: grayscale(1); opacity: 0.6; }
.cx-before .cx-text { transition: opacity 0.6s; }
.cx-before.in .cx-text { opacity: 0.45; }
.cx-x { position: absolute; width: 36%; left: 50%; top: 33%; translate: -50% -50%; opacity: 0; transform: scale(1.8) rotate(-24deg); transition: opacity 0.25s, transform 0.55s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
.cx-before.in .cx-x { opacity: 0.92; transform: scale(1) rotate(-8deg); }
.cx-after { background: #FBF9F3; color: #131217; box-shadow: 0 30px 60px rgba(19, 18, 23, 0.16); border-top: 4px solid var(--gold); }
.cx-after figcaption { color: #8A6A21; }
.cx-after .cx-text { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; letter-spacing: -0.01em; }
.cx-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid var(--rule-2); }
.cx-t { padding: 1.4rem 1.4rem 0 0; }
.cx-t + .cx-t { padding-left: 1.4rem; border-left: 1px solid var(--rule); }
.cx-t b { font-family: var(--mono); font-weight: 400; font-size: 0.66rem; color: var(--gold); }
.cx-t h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -0.015em; margin: 0.5rem 0 0.4rem; }
.cx-t p { font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
  .cx-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-t:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) { .cx-duo { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cx-trust { grid-template-columns: 1fr; } .cx-t + .cx-t { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }
@media (prefers-reduced-motion: reduce) { .cx-x { transition: none; } }
.cx-trust.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .cx-trust.n3 { grid-template-columns: 1fr; } .cx-trust.n3 .cx-t + .cx-t { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

/* shared frame for the four newer cover mock-ups */
.mx, .ax, .sx, .gx { position: relative; aspect-ratio: 10 / 11; max-width: 500px; width: 100%; justify-self: end; --t: 8s; }
@media (max-width: 900px) { .mx, .ax, .sx, .gx { justify-self: stretch; max-width: 460px; margin-top: 1rem; } }
@media (prefers-reduced-motion: reduce) { .mx *, .ax *, .sx *, .gx * { animation: none !important; } }

/* ---------- Marketplace: your listing climbs from #4 to #1 ---------- */
.mx-win { position: absolute; inset: 4% 0; background: #FBF9F3; border-radius: 16px; padding: 7% 6%; display: flex; flex-direction: column; gap: 6%; color: #131217; box-shadow: 0 30px 70px rgba(19, 18, 23, 0.16); }
.mx-search { display: flex; align-items: center; gap: 10px; border: 2px solid #131217; border-radius: 99px; padding: 3% 5%; font-family: var(--mono); font-size: clamp(0.72rem, 1.1vw, 0.9rem); }
.mx-mag { font-size: 1.2em; line-height: 1; }
.mx-q { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; animation: mx-type var(--t) steps(17) infinite; }
.mx-list { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; animation: mx-fade var(--t) infinite; }
.mx-row { position: absolute; left: 0; right: 0; top: 0; height: 21%; display: grid; grid-template-columns: 17% 1fr auto; gap: 5%; align-items: center; padding: 0 4%; border-radius: 12px; background: #F1EDE3; transform: translateY(calc(var(--i) * 118%)); animation: mx-down var(--t) infinite; }
.mx-th { aspect-ratio: 1; border-radius: 8px; background: #D6C6A6; }
.mx-row p { height: 7px; border-radius: 3px; background: #BDB8AC; margin-bottom: 5px; }
.mx-row p.s { width: 55%; }
.mx-st { font-size: clamp(0.55rem, 0.8vw, 0.66rem); color: #C9A227; letter-spacing: 1px; }
.mx-row > b { font-family: var(--serif); font-weight: 600; font-size: clamp(0.9rem, 1.3vw, 1.1rem); }
.mx-you { background: #fff; box-shadow: 0 0 0 2px #C9A227, 0 14px 30px rgba(19, 18, 23, 0.16); z-index: 2; animation-name: mx-up; }
.mx-you .mx-th { background: linear-gradient(135deg, #3F7A5A, #2A5541); }
.mx-you .mx-st { color: #8A6A21; font-weight: 600; }
.mx-rank { position: absolute; top: -9px; right: 12px; display: grid; font-style: normal; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; }
.mx-rank s, .mx-rank b { grid-area: 1 / 1; padding: 2px 7px; border-radius: 99px; text-decoration: none; }
.mx-rank s { background: #BDB8AC; color: #131217; animation: mx-old var(--t) infinite; }
.mx-rank b { background: #2E7D4F; color: #fff; animation: mx-new var(--t) infinite; }
@keyframes mx-type { 0%, 3% { width: 0; } 16%, 100% { width: 11.5em; } }
@keyframes mx-fade { 0% { opacity: 0; } 4%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes mx-down { 0%, 38% { transform: translateY(calc(var(--i) * 118%)); } 56%, 100% { transform: translateY(calc((var(--i) + 1) * 118%)); } }
@keyframes mx-up { 0%, 38% { transform: translateY(354%); } 56%, 100% { transform: translateY(0); } }
@keyframes mx-old { 0%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes mx-new { 0%, 50% { opacity: 0; transform: scale(0.6); } 58% { opacity: 1; transform: scale(1.2); } 62%, 100% { opacity: 1; transform: scale(1); } }

/* ---------- AI: the assistant handles it; the workflow lights up behind ---------- */
.ax-chat { position: absolute; left: 0; top: 0; width: 80%; bottom: 16%; background: #FBF9F3; border-radius: 18px; box-shadow: 0 30px 70px rgba(19, 18, 23, 0.16); display: flex; flex-direction: column; gap: 4%; overflow: hidden; color: #131217; font-size: clamp(0.72rem, 1vw, 0.88rem); }
.ax-head { display: flex; align-items: center; gap: 8px; padding: 4.5% 6%; background: #131217; color: #F2EFE7; }
.ax-head b { font-weight: 600; }
.ax-head i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 0.8em; color: #9C9AAE; }
.ax-dot { width: 8px; height: 8px; border-radius: 50%; background: #5FD08A; }
.ax-msg { max-width: 78%; padding: 3.5% 5%; border-radius: 16px; line-height: 1.45; opacity: 0; transform: translateY(8px); }
.ax-user { align-self: flex-end; margin: 4% 5% 0 0; background: #131217; color: #F2EFE7; border-bottom-right-radius: 4px; animation: ax-user var(--t) infinite; }
.ax-reply { display: grid; margin-left: 5%; }
.ax-reply > * { grid-area: 1 / 1; align-self: start; }
.ax-typing { display: flex; gap: 5px; width: max-content; background: #EFEBE1; animation: ax-typing var(--t) infinite; }
.ax-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9A968C; animation: ax-dots 0.9s ease-in-out infinite; }
.ax-typing i:nth-child(2) { animation-delay: 0.15s; } .ax-typing i:nth-child(3) { animation-delay: 0.3s; }
.ax-bot { background: #EFEBE1; border-bottom-left-radius: 4px; animation: ax-bot var(--t) infinite; }
.ax-input { margin: auto 5% 0; height: 2.4em; border-radius: 99px; border: 1px solid #D6D1C6; }
.ax-flow { position: absolute; right: 0; bottom: 0; width: 58%; padding: 14px 16px; border-radius: 14px; background: #1C1B22; border: 1px solid rgba(201, 162, 39, 0.5); box-shadow: 0 24px 50px rgba(19, 18, 23, 0.16); display: grid; gap: 9px; font-family: var(--mono); font-size: clamp(0.62rem, 0.9vw, 0.74rem); color: #9C9AAE; }
.ax-flow span { display: flex; align-items: center; gap: 9px; }
.ax-flow span::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #56535C; }
.ax-s1 { animation: ax-s1 var(--t) infinite; } .ax-s2 { animation: ax-s2 var(--t) infinite; } .ax-s3 { animation: ax-s3 var(--t) infinite; }
.ax-s1::before { animation: ax-c1 var(--t) infinite; } .ax-s2::before { animation: ax-c2 var(--t) infinite; } .ax-s3::before { animation: ax-c3 var(--t) infinite; }
@keyframes ax-user { 0%, 6% { opacity: 0; transform: translateY(8px); } 11%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ax-typing { 0%, 16% { opacity: 0; } 20%, 38% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes ax-bot { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ax-dots { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ax-s1 { 0%, 24% { color: #9C9AAE; } 28%, 95% { color: #F2EFE7; } 100% { color: #9C9AAE; } }
@keyframes ax-s2 { 0%, 31% { color: #9C9AAE; } 35%, 95% { color: #F2EFE7; } 100% { color: #9C9AAE; } }
@keyframes ax-s3 { 0%, 42% { color: #9C9AAE; } 46%, 95% { color: #F2EFE7; } 100% { color: #9C9AAE; } }
@keyframes ax-c1 { 0%, 24% { background: transparent; border-color: #56535C; } 28%, 95% { background: #5FD08A; border-color: #5FD08A; } 100% { background: transparent; } }
@keyframes ax-c2 { 0%, 31% { background: transparent; border-color: #56535C; } 35%, 95% { background: #5FD08A; border-color: #5FD08A; } 100% { background: transparent; } }
@keyframes ax-c3 { 0%, 42% { background: transparent; border-color: #56535C; } 46%, 95% { background: #5FD08A; border-color: #5FD08A; } 100% { background: transparent; } }

/* ---------- Sound: a jingle, playing ---------- */
.sx-card { position: absolute; inset: 12% 2% 12% 0; background: #FBF9F3; color: #131217; border-radius: 20px; padding: 7%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 70px rgba(19, 18, 23, 0.16); }
.sx-top { display: flex; align-items: center; gap: 5%; }
.sx-art { flex: none; width: 22%; aspect-ratio: 1; border-radius: 12px; background: conic-gradient(from 220deg, #C8102E, #C9A227, #C8102E); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.15); }
.sx-top b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: -0.01em; }
.sx-top small { font-family: var(--mono); font-size: clamp(0.6rem, 0.85vw, 0.72rem); color: #56535C; }
.sx-wave { display: flex; align-items: center; gap: 2.2%; height: 34%; }
.sx-wave i { flex: 1; height: calc(var(--h) * 1%); border-radius: 3px; background: #131217; transform-origin: center; animation: sx-bar 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -0.13s); }
.sx-wave i:nth-child(-n + 12) { background: #C8102E; }
.sx-bar { height: 4px; border-radius: 99px; background: #D6D1C6; overflow: hidden; }
.sx-bar span { display: block; height: 100%; width: 100%; background: #C9A227; transform-origin: left; animation: sx-prog 12s linear infinite; }
.sx-ctrl { display: flex; align-items: center; justify-content: space-between; }
.sx-play { width: clamp(2.4rem, 4vw, 3rem); aspect-ratio: 1; border-radius: 50%; background: #131217; position: relative; animation: sx-pulse 1.6s ease-out infinite; }
.sx-play::before, .sx-play::after { content: ""; position: absolute; top: 32%; width: 10%; height: 36%; background: #F2EFE7; border-radius: 2px; left: 38%; }
.sx-play::after { left: 52%; }
.sx-time { font-family: var(--mono); font-size: 0.8rem; color: #56535C; }
.sx-note { position: absolute; font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--gold); opacity: 0; animation: sx-float 4.5s ease-in infinite; }
.sx-note.n1 { right: 6%; top: 8%; } .sx-note.n2 { right: 20%; top: 2%; animation-delay: 1.5s; color: #E8546B; } .sx-note.n3 { right: 2%; top: 22%; animation-delay: 3s; }
@keyframes sx-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes sx-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sx-pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(200, 16, 46, 0); } }
@keyframes sx-float { 0% { opacity: 0; transform: translateY(20px) rotate(-10deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) rotate(12deg); } }

/* ---------- Strategy: out of the crowd, into open space ---------- */
.gx-map { position: absolute; inset: 4% 0 8% 8%; border-left: 1.5px solid rgba(242, 239, 231, 0.35); border-bottom: 1.5px solid rgba(242, 239, 231, 0.35);
  background: linear-gradient(rgba(242, 239, 231, 0.08), rgba(242, 239, 231, 0.08)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(242, 239, 231, 0.08), rgba(242, 239, 231, 0.08)) 0 50% / 100% 1px no-repeat; }
.gx-l { position: absolute; font-family: var(--mono); font-size: clamp(0.58rem, 0.85vw, 0.7rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.gx-lo { left: 0; bottom: -1.9em; } .gx-hi { right: 0; bottom: -1.9em; }
.gx-gen { left: -0.6em; bottom: 0; transform: rotate(-90deg); transform-origin: left bottom; translate: 0 0; }
.gx-spec { left: -0.6em; top: 0; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
.gx-d { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(242, 239, 231, 0.32); }
.gx-you { position: absolute; left: 38%; top: 62%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.2); animation: gx-move var(--t) infinite; z-index: 2; }
.gx-you b { position: absolute; left: 150%; top: 50%; translate: 0 -50%; font-family: var(--serif); font-weight: 600; font-size: clamp(0.9rem, 1.4vw, 1.15rem); color: var(--gold); white-space: nowrap; }
.gx-open { position: absolute; left: 80%; top: 20%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(201, 162, 39, 0.8); opacity: 0; animation: gx-open var(--t) infinite; }
.gx-open em { position: absolute; left: 50%; top: 104%; translate: -50% 0; font-style: italic; font-family: var(--serif); font-size: clamp(0.78rem, 1.1vw, 0.95rem); color: var(--ink-2); white-space: nowrap; }
@keyframes gx-move { 0%, 22% { left: 38%; top: 62%; } 55%, 92% { left: 80%; top: 20%; } 100% { left: 38%; top: 62%; } }
@keyframes gx-open { 0%, 30% { opacity: 0; transform: scale(0.6); } 48%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }