/* Marketing Champion · the Line Card (js/aiplay.js): the AI play drawn on the coach's whiteboard.
   One look everywhere: the site, the PDF play card and the reels. It is built from things a hockey coach
   really has: a whiteboard in an aluminium frame, red and blue marker, round magnets for the players,
   cloth hockey tape with names written on it, and a rubber stamp for the call. No cards with coloured
   side bars (Ly, 16 Oct: that look is a generic AI design sheet). */
.lc { --wb: #F3F4F1; --ink: #1B1F24; --red: #D3243A; --blue: #1F5FBF; --violet: #6B4FB8; --amber: #B7791F; --soft: #5C6670; --hand: "Patrick Hand", "Comic Sans MS", cursive;
  position: relative; margin-top: 18px; color: var(--ink); container-type: inline-size;
  background: radial-gradient(ellipse 40% 30% at 22% 18%, rgba(0, 0, 0, .035), transparent 70%), radial-gradient(ellipse 35% 25% at 78% 70%, rgba(31, 95, 191, .04), transparent 70%), radial-gradient(ellipse 30% 22% at 60% 30%, rgba(211, 36, 58, .025), transparent 70%), var(--wb);
  border-radius: 10px; padding: clamp(18px, 3.4vw, 40px); border: 10px solid #A9B2BA; border-image: linear-gradient(135deg, #E3E8EC, #8C969F 40%, #D5DBE0 60%, #7E8891) 1;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 60px rgba(0, 0, 0, .05); }
.lc * { text-shadow: none !important; }
.lc .draft-flag { position: absolute; top: -34px; left: -10px; }

/* header: the playbook name, the coach's call on a strip of white tape, the play in marker */
.lc__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 60 2, 120 7, 200 4 S 330 2, 398 5' fill='none' stroke='%231B1F24' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 8px no-repeat; }
.lc__kicker { font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.lc__title { flex: 1 1 100%; order: 2; margin: 2px 0 0; font: 400 clamp(30px, 4.4vw, 52px)/1 var(--hand); color: var(--ink); }
.lc__line { order: 1; position: relative; font: 400 19px/1 var(--hand); color: var(--ink); padding: 7px 16px 6px; transform: rotate(-1.5deg);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px), #FBFBF8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18); clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 100% 0, 97% 12%, 100% 24%, 97% 38%, 100% 52%, 97% 66%, 100% 80%, 97% 92%, 100% 100%, 0 100%, 3% 88%, 0 74%, 3% 60%, 0 46%, 3% 32%, 0 20%); }
.lc__thesis { margin: 18px 0 8px; padding: 0; font: 400 clamp(21px, 2.5vw, 28px)/1.3 var(--hand); color: var(--ink); }
.lc__thesis p { margin: 0; }
.lc__thesis cite { display: block; margin-top: 6px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-style: normal; }
.lc__thesis cite::before { content: "~ "; }
.lc__grid { display: grid; gap: 22px; margin-top: 16px; }
@container (min-width: 760px) { .lc:not(.lc--print) .lc__grid { grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; } .lc:not(.lc--print) .lc__board { position: sticky; top: 150px; } }

/* the rink, in marker */
.lc__board { margin: 0; display: grid; gap: 12px; }
.lc__ice { position: relative; aspect-ratio: 6 / 10; max-height: 82vh; margin-inline: auto; width: 100%; max-width: 400px; }
.lc__rink, .lc__passes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc__rink * { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.m-black { stroke: var(--ink); stroke-width: 2.6; } .m-red { stroke: var(--red); stroke-width: 2; opacity: .8; } .m-blue { stroke: var(--blue); stroke-width: 2; opacity: .8; }
.m-thick { stroke-width: 4; } .m-dash { stroke-dasharray: 10 8; } .m-crease { fill: rgba(31, 95, 191, .18) !important; stroke: var(--red); stroke-width: 1.6; }
.m-dot { fill: var(--red) !important; stroke: none; } .m-dot-b { fill: var(--blue) !important; stroke: none; }
.lc__pass { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 0; opacity: .85; }
.lc__pass.is-ai { stroke: var(--blue); } .lc__pass.is-assist { stroke: var(--violet); } .lc__pass.is-you { stroke: var(--red); }
.lc:not(.is-drawn) .lc__pass { stroke-dasharray: 0 1; }
.lc.is-drawn .lc__pass { animation: lc-draw .7s ease-out calc(.25s + var(--i) * .12s) backwards; }
@keyframes lc-draw { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }

/* magnets: the players on the board (round, glossy, a little shadow, like a real magnetic tactics board) */
.magnet { --c: var(--blue); display: grid; place-items: center; border-radius: 50%; font: 400 20px/1 var(--hand); font-style: normal; color: #fff;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 50% 55%, var(--c), color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35), 0 1px 0 rgba(0, 0, 0, .25), inset 0 -2px 3px rgba(0, 0, 0, .25); }
.is-assist .magnet, .magnet.is-assist { --c: var(--violet); }
.is-you .magnet, .magnet.is-you { --c: var(--red); }
.is-captain .magnet { --c: #23272D; }
.lc__node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; text-decoration: none; color: var(--ink); z-index: 1; cursor: pointer; }
.lc__node .magnet { width: clamp(38px, 4.4vw, 48px); aspect-ratio: 1; font-size: clamp(18px, 2vw, 22px); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.lc__node.is-captain .magnet { width: clamp(52px, 6vw, 64px); font-size: clamp(26px, 3vw, 32px); }
.lc__node span { font: 400 clamp(14px, 1.5vw, 17px)/1 var(--hand); background: rgba(243, 244, 241, .85); padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.lc__node:hover .magnet, .lc__node:focus-visible .magnet { transform: scale(1.15) rotate(-6deg); }
.lc:not(.is-drawn) .lc__node { opacity: 0; }
.lc.is-drawn .lc__node { animation: lc-pop .55s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .1s) backwards; }
@keyframes lc-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
.lc__bench { font: 400 18px/1.25 var(--hand); color: var(--ink); text-align: center; }
.lc__bench b { color: var(--red); font-weight: 400; }
.lc__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font: 400 16px/1.2 var(--hand); color: var(--ink); }
.lc__legend li { display: flex; align-items: center; gap: 7px; }
.lc__legend .magnet { width: 18px; height: 18px; }

/* the positions: written straight on the board, no boxes. A magnet, the name in marker with a squiggle
   under it, a rubber stamp for the call, the job typed on, "your call" in red marker with an arrow,
   and the players signed to it on strips of black hockey tape */
.lc__roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lc-pos { position: relative; display: grid; gap: 10px; padding: 18px 4px 22px; scroll-margin-top: 150px; border-radius: 14px; transition: background .6s ease; }
.lc-pos + .lc-pos::before { content: ""; position: absolute; left: 8%; right: 8%; top: -2px; height: 6px; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3 C 50 1, 90 5, 140 3 S 240 1, 290 3 S 370 5, 398 2' fill='none' stroke='%235C6670' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='6 7'/%3E%3C/svg%3E") center / 100% 6px no-repeat; }
.lc-pos.is-flash { background: rgba(255, 214, 63, .22); }
.lc-pos.is-flash .lc-pos__head .magnet { animation: lc-ping .9s ease-out 2; }
@keyframes lc-ping { 0% { box-shadow: 0 0 0 0 rgba(211, 36, 58, .6), 0 3px 5px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 18px rgba(211, 36, 58, 0), 0 3px 5px rgba(0, 0, 0, .35); } }
.lc-pos__head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.lc-pos__head .magnet { width: 46px; height: 46px; }
.lc-pos.is-captain .lc-pos__head .magnet { width: 54px; height: 54px; font-size: 26px; }
.lc-pos__role { display: block; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.lc-pos__name { position: relative; display: inline-block; font: 400 28px/1.05 var(--hand); color: var(--ink); padding-bottom: 6px; }
.lc-pos__name::after { content: ""; position: absolute; left: -2px; right: -6px; bottom: 0; height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7' preserveAspectRatio='none'%3E%3Cpath d='M2 4 C 20 1, 34 6, 52 4 S 86 2, 104 4 S 116 5, 118 3' fill='none' stroke='%231F5FBF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.is-assist .lc-pos__name::after { filter: hue-rotate(40deg); } .is-you .lc-pos__name::after { filter: hue-rotate(150deg) saturate(1.6); }
/* the call: a rubber stamp, slightly crooked, ink a little patchy */
.stamp { --c: var(--blue); justify-self: end; font: 700 11px/1.15 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c); border: 2.5px solid var(--c); border-radius: 6px; padding: 6px 9px; transform: rotate(-6deg); text-align: center; max-width: 130px; opacity: .9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='80' height='40' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='80' height='40' filter='url(%23n)'/%3E%3C/svg%3E"); }
.is-assist .stamp { --c: var(--violet); transform: rotate(4deg); } .is-you .stamp { --c: var(--red); transform: rotate(-3deg); }
.lc-pos__job { margin: 0; font-size: 16px; line-height: 1.5; color: #2B3138; max-width: 62ch; }
.lc-pos__call { margin: 0; display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: start; font: 400 20px/1.25 var(--hand); color: var(--red); }
.lc-pos__call svg { width: 34px; height: 22px; margin-top: 2px; }
.lc-pos__call b { font-weight: 400; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* signed players: names written on strips of black cloth hockey tape */
.tapes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 16px; }
.tapes li { display: grid; gap: 5px; max-width: 230px; }
.tape { --r: -1.2deg; display: inline-flex; align-items: center; gap: 8px; justify-self: start; border: 0; cursor: pointer; padding: 8px 16px 7px 14px; color: #F4F5F2; font: 400 19px/1 var(--hand); transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #23262A, #131518);
  clip-path: polygon(0 10%, 2% 0, 4% 14%, 6% 2%, 8% 0, 100% 0, 98% 14%, 100% 28%, 98% 44%, 100% 58%, 98% 72%, 100% 86%, 98% 100%, 0 100%, 2% 86%, 0 72%, 2% 58%, 0 44%, 2% 30%); }
.tapes li:nth-child(2n) .tape { --r: .9deg; } .tapes li:nth-child(3n) .tape { --r: -.4deg; }
.tape:hover, .tape:focus-visible { transform: rotate(0deg) scale(1.06); outline: none; }
.tape img { width: 18px; height: 18px; object-fit: contain; filter: invert(1) brightness(1.1); }
.tape .tool__mono { width: 18px; height: 18px; border-radius: 50%; background: #F4F5F2; color: #131518; font: 700 7.5px/18px var(--mono); text-align: center; font-style: normal; }
.tape em { font: 700 9px/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #131518; background: #FFD23F; padding: 3px 5px; border-radius: 2px; }
.tapes small { font-size: 12.5px; line-height: 1.35; color: var(--soft); padding-left: 4px; }

.lc__foot { margin-top: 20px; padding-top: 16px; display: grid; gap: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3 C 70 1, 140 5, 200 3 S 330 1, 398 4' fill='none' stroke='%235C6670' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='8 8'/%3E%3C/svg%3E") top / 100% 6px no-repeat; }
.lc__foot p { margin: 0; font-size: 12.5px; color: var(--soft); }
.lc__dl { justify-self: start; }
@media (max-width: 520px) { .lc-pos__head { grid-template-columns: auto 1fr; } .stamp { grid-column: 1 / -1; justify-self: start; } .lc { border-width: 6px; } .lc-pos__name { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .lc .lc__pass, .lc .lc__node { animation: none !important; opacity: 1 !important; } }

/* the play pages: the AI play takes the full width, and its text is ink on the board, not the page grey */
#ai.p-sec, #coach.p-sec { grid-template-columns: 1fr; } #ai .p-sec__body, #coach .p-sec__body { max-width: none; } #ai .p-sec__label, #coach .p-sec__label { position: static; }
.p-sec .lc p { color: inherit; font-size: inherit; margin: 0; }
.p-sec .lc .lc-pos__job { color: #2B3138; font-size: 16px; line-height: 1.5; }
.p-sec .lc .lc-pos__call { color: var(--red); font-size: 20px; }
.p-sec .lc .lc__foot p { font-size: 12.5px; color: var(--soft); }

/* a tool's scouting report: opens on the page (no new window), close with the X, Esc or a tap outside */
.tool-dlg { border: 0; padding: 0; background: transparent; max-width: min(520px, calc(100vw - 32px)); width: 100%; overflow: visible; }
.tool-dlg::backdrop { background: rgba(5, 6, 7, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tool-dlg[open] { animation: dlg-in .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(30px) rotate(-2deg) scale(.95); } }
.tool-card { position: relative; background: #F3F4F1; border: 8px solid #A9B2BA; border-image: linear-gradient(135deg, #E3E8EC, #8C969F 40%, #D5DBE0 60%, #7E8891) 1; padding: 28px 26px 22px; display: grid; gap: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); font-family: "Be Vietnam Pro", system-ui, sans-serif; color: #1B1F24; text-shadow: none; }
.tool-card * { text-shadow: none !important; }
.tool-card__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1B1F24; color: #fff; font-size: 22px; line-height: 40px; cursor: pointer; transition: transform .25s; }
.tool-card__x:hover { transform: rotate(90deg); }
.tool-card__top { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.tool-card__logo { width: 56px; height: 56px; border-radius: 14px; background: #131518; display: grid; place-items: center; flex: none; }
.tool-card__logo img { width: 30px; height: 30px; filter: invert(1); }
.tool-card__logo i { font: 700 15px/1 "IBM Plex Mono", monospace; font-style: normal; color: #F4F5F2; }
.tool-card h3 { margin: 0; font: 400 32px/1 "Patrick Hand", cursive; color: #1B1F24; }
.tool-card__maker { font: 600 11px/1.2 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #5C6670; }
.tool-card__power { margin: 0; font: 400 22px/1.25 "Patrick Hand", cursive; color: #D3243A; }
.tool-card dl { margin: 0; display: grid; gap: 10px; }
.tool-card dt { font: 600 10.5px/1.2 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #5C6670; }
.tool-card dd { margin: 2px 0 0; font-size: 15.5px; line-height: 1.45; color: #2B3138; }
.tool-card__fa { font-size: 14px; color: #6B4A00; background: #FFE89A; padding: 10px 12px; border-radius: 6px; margin: 0; }
.tool-card__foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; font-size: 12px; color: #5C6670; }
.tool-card__foot a { color: #1F5FBF; font-weight: 600; }

/* print: the one-page play card (card.html) */
.lc--print { box-shadow: none; border: 0; border-radius: 0; padding: 0; background: var(--wb); }
.lc--print .lc__grid { grid-template-columns: 178px 1fr; gap: 12px; align-items: start; margin-top: 8px; }
.lc--print .lc__board { gap: 6px; }
.lc--print .lc__ice { max-width: 178px; }
.lc--print .lc__roster { grid-template-columns: 1fr 1fr; gap: 2px 14px; align-items: start; }
.lc--print .lc-pos { padding: 7px 2px 9px; gap: 3px; }
.lc--print .lc-pos + .lc-pos::before { display: none; }
.lc--print .lc-pos:nth-child(n+3)::after { content: ""; position: absolute; left: 4%; right: 4%; top: -1px; border-top: 1.2px dashed #B9C0C6; }
.lc--print .lc-pos__head { gap: 7px; } .lc--print .lc-pos__head .magnet, .lc--print .lc-pos.is-captain .lc-pos__head .magnet { width: 26px; height: 26px; font-size: 13px; }
.lc--print .lc-pos__role { font-size: 7px; } .lc--print .lc-pos__name { font-size: 16px; padding-bottom: 3px; }
.lc--print .stamp { font-size: 6.5px; padding: 2px 4px; border-width: 1.5px; max-width: 80px; }
.lc--print .lc-pos__job { font-size: 9.5px; line-height: 1.32; }
.lc--print .lc-pos__call { font-size: 12px; line-height: 1.15; grid-template-columns: 18px 1fr; gap: 3px; } .lc--print .lc-pos__call svg { width: 18px; height: 12px; }
.lc--print .tapes { gap: 3px 6px; margin-top: 2px; }
.lc--print .tapes li { max-width: none; gap: 1px; }
.lc--print .tape { font-size: 11px; padding: 3px 8px 3px 7px; gap: 4px; }
.lc--print .tape img, .lc--print .tape .tool__mono { width: 10px; height: 10px; line-height: 10px; font-size: 4.5px; }
.lc--print .tape em { font-size: 5.5px; padding: 1px 3px; }
.lc--print .tapes small { display: none; }
.lc--print .lc__thesis { font-size: 15px; line-height: 1.25; margin: 6px 0 0; } .lc--print .lc__title { font-size: 30px; }
.lc--print .lc__line { font-size: 13px; padding: 4px 10px; }
.lc--print .lc__head { padding-bottom: 8px; }
.lc--print .lc__node .magnet { width: 24px; font-size: 12px; } .lc--print .lc__node.is-captain .magnet { width: 32px; font-size: 16px; } .lc--print .lc__node span { font-size: 9.5px; }
.lc--print .lc__bench { font-size: 12px; } .lc--print .lc__legend { flex-direction: column; align-items: flex-start; font-size: 11px; }
.lc--print .lc__foot { margin-top: 6px; padding-top: 7px; gap: 3px; } .lc--print .lc__foot p { font-size: 7.5px; }
.lc--print [data-pop] { opacity: 1 !important; transform: none !important; }

.lc__stamp { justify-self: start; color: var(--goal, #E0102F); font-size: 12px; letter-spacing: .04em; }

/* print: Chrome's PDF printer turns a blurred box-shadow on a round badge into a gray square (Ly, 17 Oct). Flat ring instead. */
.lc--print .magnet { box-shadow: none; outline: 1px solid rgba(0, 0, 0, .18); outline-offset: -1px; }

/* Quick tip (Ly, 17 Oct): the card's own rubber stamp plus plain text. Never a side line or tinted box (Ly: "don't make it look like a Claude note") */
.lc__tip { margin: 12px 0 0; display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; }
.lc__tip .stamp { --c: var(--goal, #E0102F); flex: none; justify-self: auto; transform: rotate(-5deg); max-width: none; }
.lc--print .lc__tip { margin-top: 5px; gap: 8px; font-size: 9.5px; }
.lc--print .lc__tip .stamp { font-size: 8.5px; padding: 3px 6px; border-width: 1.5px; }

/* Plug it into your AI (Ly, 21 Oct): under the download button. Plain text and a hand-drawn rule, never a tinted box or a side line (Ly) */
.lc__plug { margin-top: 10px; padding-top: 14px; display: grid; gap: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3 C 70 1, 140 5, 200 3 S 330 1, 398 4' fill='none' stroke='%235C6670' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='8 8'/%3E%3C/svg%3E") top / 100% 6px no-repeat; }
.lc__plug-h { margin: 0; font: 400 26px/1.1 "Patrick Hand", var(--font); color: var(--goal, #E0102F); }
.lc__plug p { margin: 0; font-size: 15px; line-height: 1.5; }
.lc__plug .lc__prompt { font-size: 13.5px; line-height: 1.55; white-space: normal; text-transform: none; letter-spacing: 0; }
.lc__plug .lc__copy { justify-self: start; color: #1B1F24; border: 2px solid #1B1F24; background: transparent; }   /* the card is paper: dark ink, not the site's light-on-dark pill */
.lc__plug a { text-decoration: underline; text-underline-offset: 3px; }

/* optional sign-up under the play card (Ly, 21 Oct): paper ink, no box (Ly: never a tinted note box) */
.c-signup { margin-top: 14px; padding-top: 14px; display: grid; gap: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3 C 70 1, 140 5, 200 3 S 330 1, 398 4' fill='none' stroke='%235C6670' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='8 8'/%3E%3C/svg%3E") top / 100% 6px no-repeat; }
.c-signup__h { font: 400 26px/1.1 "Patrick Hand", var(--font); color: var(--goal, #E0102F); font-weight: 400; }
.c-signup p { margin: 0; font-size: 15px; line-height: 1.5; color: #1B1F24; }
.c-signup__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c-signup__form input { flex: 1 1 220px; min-width: 0; font: 500 16px/1.2 var(--font); padding: 12px 14px; border: 2px solid #1B1F24; border-radius: 999px; background: #fff; color: #1B1F24; }
.c-signup__form .pill { flex: none; }
.c-signup .mc-msg { color: #1B1F24; }