/* ---------- Take Two: the home page below the logo ----------
   Layout: a left-aligned column with a narrow lane on its left. One hand-drawn thread runs down that lane as you scroll,
   circling the promise, the four days of her week and the recommended package, and plugging into the camcorder at the end.
   Colour: ivory ground, maroon ink; accents from the Lotería de mis XV deck, each with one job:
   marigold = celebration and value, rosa = the guests' energy, teal = the deck itself, red dot = live. */
.after {
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --paper: #F2EBDC;        /* package cards, blank boxes */
  --ink: #75221B;          /* the maroon: every line and heading */
  --ink-deep: #5C1914;
  --ink-soft: #8E544C;     /* secondary text, 5.5 to 1 on ivory */
  --marigold: #EFA51C;     /* never as text on ivory: fills, and text on maroon or night */
  --rosa: #D1206F;         /* 4.95 to 1 on ivory */
  --teal: #0E6663;         /* ivory on it is 6.6 to 1 */
  --teal-2: #127D79;
  --cream: #F3E9D5;
  --night: #1E1612;
  --screen: #231714;
  --todo: #C62828;         /* descriptions of content still to come */
  --todo-dark: #FF8A7E;    /* the same, on dark screens */
  --lane: 26px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  position: relative; overflow-x: clip;
  background: var(--ivory); color: var(--ink); font-family: var(--body);
  font-size: 17px; line-height: 1.6;
}
@media (min-width: 900px) { .after { --lane: 76px; font-size: 18px; } }
.after .thread { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.after .thread path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.after .sec { position: relative; z-index: 1; padding-block: clamp(76px, 11vw, 150px) 0; }
.after .sec.first { padding-block-start: clamp(104px, 13vw, 160px); }
.after .sec.band { margin-top: clamp(76px, 11vw, 150px); padding-block: clamp(72px, 10vw, 130px); }
.after .sec.band + .sec:not(.band) { padding-block-start: clamp(76px, 11vw, 150px); }
.after .wrap { max-width: 1180px; margin: 0 auto; padding-left: calc(var(--gut-l) + var(--lane)); padding-right: var(--gut-r); }
.after h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.55rem, 1.45rem + 4.4vw, 5.1rem); line-height: 1.02; letter-spacing: -.012em; margin: 0; text-wrap: balance; max-width: 14ch; }
.after h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.1; }
.after p { margin: 0; max-width: 33em; }
.after .soft { color: var(--ink-soft); }
.after .stack-l { display: grid; gap: 24px; align-content: start; justify-items: start; min-width: 0; }
.after button { font-family: inherit; }
.after a:focus-visible, .after button:focus-visible, .after summary:focus-visible, .after input:focus-visible, .after select:focus-visible, .after label:focus-within > span { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.after .todo { color: var(--todo); font: 500 .92rem/1.42 var(--body); max-width: 30em; }
.after .todo.dk { color: var(--todo-dark); }
.after .lcd { font-family: var(--lcd); letter-spacing: .06em; }

/* buttons drawn by hand: a boiling blob of ink; a pen outline draws around it on hover and focus */
.after .cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 32px; border: 0; background: none; cursor: pointer; text-decoration: none; font: 600 1.06rem/1 var(--body); color: var(--ivory); -webkit-tap-highlight-color: transparent; transition: transform .12s ease; white-space: nowrap; }
.after .cta > svg { position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1; overflow: visible; pointer-events: none; }
.after .cta .fill { fill: var(--ink); }
.after .cta .pen { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s cubic-bezier(.3, .7, .2, 1); }
.after .cta:hover .pen, .after .cta:focus-visible .pen { stroke-dashoffset: 0; }
.after .cta:focus-visible { outline: none; }
.after .cta:active { transform: scale(.97); }
.after .cta.ghost { color: var(--ink); }
.after .cta.ghost .fill { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.after .cta.light { color: var(--ink); }
.after .cta.light .fill { fill: var(--ivory); }
.after .cta.light .pen { stroke: var(--ivory); }
.after .cta.onteal { color: var(--ivory); }
.after .cta.onteal .fill { fill: none; stroke: var(--ivory); stroke-width: 2.2; }
.after .cta.onteal .pen { stroke: var(--ivory); }
.after .cta.small { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.after .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.after .ul { position: relative; display: inline-block; padding: 12px 1px; color: var(--ink); font-weight: 600; text-decoration: none; }
.after .ul.onteal { color: var(--ivory); }
.after .ul svg { position: absolute; left: 0; bottom: 7px; width: 100%; height: 8px; overflow: visible; }
.after .ul path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; }
.after .ul:hover path, .after .ul:focus-visible path { animation: redraw .45s cubic-bezier(.3, .7, .2, 1); }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.after svg.frame path, .after svg.camframe path { fill: none; stroke: var(--ink); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.after svg.camframe .face { fill: #F9F5E8; }
.after svg.camframe .side { fill: #EBE1CB; }
.after svg.camframe .grille { stroke-width: 1.1; opacity: .75; }

/* 1. the promise: headline and lead, two stills that snap back and forth, then how it works.
   On a phone the stills sit between the headline and the explanation; on a wide screen they hold the right column. */
.after .promise { display: grid; gap: 34px; grid-template-areas: "head" "shots" "body"; }
.after .p-head { grid-area: head; min-width: 0; }
.after .p-body { grid-area: body; }
.after .promise h2 { font-size: clamp(2.3rem, 1.35rem + 3.3vw, 4.3rem); max-width: 15ch; }
.after .p-lead { margin-top: 18px; font: 400 clamp(1.3rem, 1.02rem + 1vw, 1.8rem)/1.28 var(--serif); max-width: 24em; text-wrap: pretty; }
@media (min-width: 900px) {
  .after .promise { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "head shots" "body shots"; column-gap: 72px; row-gap: 30px; }
  .after .p-head { align-self: end; }
  .after .p-body { align-self: start; }
}
.after .shots { grid-area: shots; position: relative; margin: 0; width: 100%; max-width: 400px; justify-self: start; box-sizing: border-box; padding: var(--pad); --pad: clamp(18px, 6.5vw, 30px); }
@media (min-width: 900px) { .after .shots { max-width: 440px; justify-self: center; align-self: center; } }
.after .shots .hatch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.after .shots .hatch path { fill: none; stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; }
.after .shots .hatch .hl { stroke-width: 1.45; }
.after .shots .hatch .hl.two { stroke-width: 1.25; stroke-opacity: .78; }
.after .shots .hatch .ol { stroke-width: 2.4; }
.after .shots .hatch .il { stroke-width: 2.2; }
.after .shots .ph { position: relative; z-index: 1; aspect-ratio: 1792 / 2400; border-radius: 6px; overflow: hidden; background: var(--night); }
.after .shots .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.after .shots .ph img.on { opacity: 1; }   /* a hard cut, no fade: it snaps */
.after .shots-pause { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1.5px solid rgba(253, 253, 245, .75); border-radius: 9px; background: rgba(30, 22, 18, .5); color: var(--ivory); cursor: pointer; opacity: .8; transition: opacity .2s ease; }
.after .shots-pause:hover, .after .shots-pause:focus-visible { opacity: 1; }
.after .shots-pause i { display: block; width: 12px; height: 14px; box-sizing: border-box; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.after .shots.paused .shots-pause i { width: 0; height: 0; border-left: 12px solid currentColor; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.after .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.after .promise .micro { font-size: .94rem; }
.after .private { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--ink-soft); max-width: 30em; }
.after .private svg { flex: none; width: 18px; height: 20px; margin-top: 2px; }
.after .slate { position: relative; width: 100%; max-width: 470px; justify-self: center; color: var(--ivory); }
.after .slate .clap { position: relative; height: 44px; margin: 0 6px; border-radius: 9px 9px 3px 3px; border: 2px solid var(--night); background: repeating-linear-gradient(-58deg, var(--night) 0 24px, var(--ivory) 24px 48px); transform-origin: 10px 100%; transform: rotate(-13deg); transition: transform .26s cubic-bezier(.6, 0, .2, 1.5); }
.after .slate .clap::after { content: ""; position: absolute; left: -2px; bottom: -9px; width: 14px; height: 14px; border-radius: 50%; background: var(--marigold); border: 2px solid var(--night); }
.after .slate.snap .clap { transform: rotate(0); }
.after .slate .board { position: relative; margin-top: 6px; background: var(--night); border-radius: 12px; padding: 18px 22px 20px; display: grid; gap: 14px; box-shadow: 0 2px 0 var(--ink-deep); }
.after .slate .meta { display: flex; justify-content: space-between; gap: 12px; font: 400 17px/1 var(--lcd); letter-spacing: .07em; color: rgba(253, 253, 245, .72); }
.after .slate .meta b { color: var(--marigold); font-weight: 400; }
.after .slate .fld { display: grid; gap: 2px; border-bottom: 1.5px dashed rgba(253, 253, 245, .35); padding-bottom: 6px; }
.after .slate label { font: 400 17px/1 var(--lcd); letter-spacing: .08em; color: rgba(253, 253, 245, .72); }
.after .slate input { width: 100%; box-sizing: border-box; min-height: 48px; border: 0; background: transparent; color: var(--ivory); font: italic 400 2rem/1.1 var(--serif); padding: 4px 0; color-scheme: dark; }
.after .slate input::placeholder { color: rgba(253, 253, 245, .38); }
.after .slate input:focus-visible { outline: none; }
.after .slate .fld:focus-within { border-bottom-color: var(--marigold); }
.after .slate .hint { font-size: .86rem; line-height: 1.45; color: rgba(253, 253, 245, .7); max-width: none; }
.after .slate .accion { position: absolute; right: 16px; top: -34px; font: italic 400 1.5rem/1 var(--serif); color: var(--night); background: var(--marigold); padding: 8px 14px 9px; border-radius: 999px; transform: rotate(5deg) scale(.4); opacity: 0; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease; pointer-events: none; }
.after .slate.snap .accion { transform: rotate(5deg) scale(1); opacity: 1; }

/* 2. the photographer's shot against the guests' shot */
.after .others { display: grid; gap: 34px; }
/* the slider and the prices sit one lane to the left, so the thread can run down their right side */
.after .snake { display: grid; gap: clamp(46px, 7vw, 88px); margin-top: 36px; margin-left: calc(var(--lane) * -1); margin-right: var(--lane); min-width: 0; }
.after .value { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .after .value { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; } }
.after .value-txt { display: grid; gap: 20px; min-width: 0; }
.after .value-txt p { max-width: 22em; }
.after .value .v1, .after .value .v2 { font: 400 clamp(1.7rem, 1.15rem + 1.9vw, 2.75rem)/1.14 var(--serif); letter-spacing: -.005em; text-wrap: pretty; }
.after .value .v3 { font: italic 400 clamp(1.3rem, 1.05rem + .9vw, 1.85rem)/1.25 var(--serif); color: var(--rosa); text-wrap: pretty; }
.after .value .strike { position: relative; white-space: nowrap; }
.after .value .strike::after { content: ""; position: absolute; left: -5%; right: -5%; top: 54%; height: .085em; border-radius: 1em; background: var(--rosa); transform: rotate(-5deg); }
.after .value .hi { white-space: nowrap; background: var(--marigold); color: var(--night); padding: 0 .2em; margin: 0 .04em; border-radius: 42% 58% 46% 54% / 58% 44% 56% 42%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.after .shots.rosa { grid-area: auto; max-width: 380px; justify-self: start; }
@media (min-width: 900px) { .after .shots.rosa { justify-self: end; align-self: center; } }
.after .shots.rosa .hatch path { stroke: var(--rosa); }
.after .compare .gvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--screen); }
.after .compare .guests .lbl, .after .compare .stamp { text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .45); }
.after .compare { --pos: 50%; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; user-select: none; -webkit-user-select: none; background: #E6E2DC; }
@media (max-width: 899px) { .after .compare { aspect-ratio: 4 / 5; } }
.after .compare .side { position: absolute; inset: 0; }
.after .compare .pro::before, .after .compare .pro::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: #141110; }
.after .compare .pro::before { top: 0; } .after .compare .pro::after { bottom: 0; }
.after .compare .guests { background: var(--screen); clip-path: inset(0 0 0 var(--pos)); }
.after .compare .lbl { position: absolute; top: calc(9% + 14px); font-size: .9rem; font-weight: 600; }
.after .compare .pro .lbl { left: 18px; color: #3B3330; }
.after .compare .guests .lbl { right: 18px; color: var(--ivory); display: flex; gap: 8px; align-items: center; font: 400 20px/1 var(--lcd); letter-spacing: .07em; font-weight: 400; }
.after .compare .guests .lbl i { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
.after .compare .todo { position: absolute; top: 50%; transform: translateY(-50%); width: 38%; }
@media (max-width: 899px) { .after .compare .todo { font-size: .8rem; width: 36%; } }
.after .compare .pro .todo { left: 5%; }
.after .compare .guests .todo { right: 5%; text-align: right; }
.after .compare .stamp { position: absolute; right: 18px; bottom: 16px; font: 400 18px/1 var(--lcd); letter-spacing: .06em; color: rgba(255, 255, 255, .85); }
.after .compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; }
.after .compare .handle svg { position: absolute; left: -12px; top: 0; width: 24px; height: 100%; overflow: visible; }
.after .compare .handle path { fill: none; stroke: var(--ivory); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.after .compare .handle path.under { stroke: var(--ink); stroke-width: 6; }
.after .compare .knob { position: absolute; left: -26px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 2px var(--ink); display: grid; place-items: center; color: var(--ink); }
.after .compare .knob svg { position: static; width: 30px; height: 16px; }
.after .compare .knob svg path { stroke: var(--ink); stroke-width: 2.2; }
.after .compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.after .compare:focus-within .knob { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--marigold); }

/* 3. her week, on camera */
.after .week-head { display: grid; gap: 18px; }
.after .week-sum { font-size: 1.1rem; max-width: 34em; }
.after .countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.after .countdown b { font: 400 clamp(34px, 6vw, 52px)/1 var(--lcd); letter-spacing: .04em; color: var(--rosa); font-weight: 400; }
.after .countdown span { color: var(--ink-soft); }
.after .countdown a { color: var(--ink); font-weight: 600; }
.after .week { display: grid; gap: 10px; margin-top: 34px; }
@media (min-width: 900px) { .after .week { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; margin-top: 10px; } .after .week .camcol { order: 2; } }
.after .camcol { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); align-self: start; z-index: 2; background: var(--ivory); padding-block: 10px 6px; }
@media (min-width: 900px) { .after .camcol { top: calc(50vh - 190px); background: transparent; padding: 0; } }
.after .cam2 { position: relative; width: 100%; aspect-ratio: 16 / 10.4; }
@media (max-width: 899px) { .after .cam2 { max-width: 430px; } }
.after .cam2 > svg.camframe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.after .scr { position: absolute; left: 7%; top: 9%; right: 13%; bottom: 21%; border-radius: 8px; background: var(--screen); overflow: hidden; color: #FFFFFF; }
.after .scr .hud { position: absolute; inset: 0; padding: 9px 11px; display: flex; flex-direction: column; justify-content: space-between; font: 400 clamp(12.5px, 3.3vw, 19px)/1 var(--lcd); letter-spacing: .06em; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); pointer-events: none; z-index: 3; }
.after .scr .hud .r { display: flex; justify-content: space-between; gap: 8px; align-items: center; white-space: nowrap; }
.after .scr .hud .r > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.after .scr .hud .r i { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--rec); margin-right: .4em; animation: blink 1s steps(1, end) infinite; }
.after .scr .clip { position: absolute; inset: 22% 10% 24%; display: grid; place-items: center; text-align: center; z-index: 1; }
.after .scr .clip .todo { font-size: clamp(.78rem, 1.6vw, .9rem); }
.after .scr .credits { position: absolute; inset: 0; z-index: 2; overflow: hidden; display: none; -webkit-mask-image: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%); mask-image: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%); }
.after .scr.end .credits { display: block; }
.after .scr.end .clip { inset: auto 8% 20% 8%; display: none; }
.after .scr .credits .roll { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 14px; text-align: center; padding: 0 10%; animation: crawl 11s linear infinite; }
.after .scr .credits h4 { margin: 0; font: italic 400 clamp(1.3rem, 3vw, 1.9rem)/1.05 var(--serif); color: var(--ivory); }
.after .scr .credits small { display: block; font: 400 clamp(12px, 1.8vw, 15px)/1.2 var(--lcd); letter-spacing: .1em; color: rgba(253, 253, 245, .7); }
.after .scr .credits span { font: 400 clamp(.85rem, 1.9vw, 1.05rem)/1.3 var(--serif); color: var(--ivory); }
@keyframes crawl { from { transform: translateY(0); } to { transform: translateY(calc(-100% - 380px)); } }
.after .scr.cut::after { content: ""; position: absolute; inset: 0; z-index: 4; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 2px, rgba(0, 0, 0, .25) 2px 5px); animation: cut .26s steps(3, end) 1 forwards; }
@keyframes cut { 0% { opacity: 1; transform: translateX(-3%); } 60% { opacity: .8; transform: translateX(2%); } 100% { opacity: 0; transform: none; } }
.after .wsteps { list-style: none; margin: 0; padding: 0; display: grid; }
.after .wstep { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; align-content: center; min-height: 54vh; padding-block: 14px; transition: opacity .35s ease; }
@media (min-width: 900px) { .after .wstep { min-height: 64vh; } }
.after .wstep:not(.on) { opacity: .55; }
.after .num { position: relative; isolation: isolate; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 400 1.75rem/1 var(--serif); transition: color .3s ease .08s; }
/* the ink rolls on from the middle when the thread reaches a number, and stays */
.after .num::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--ink); transform: scale(0) rotate(-40deg); transition: transform .5s cubic-bezier(.2, .9, .3, 1.25); }
.after .num.inked { color: var(--ivory); }
.after .num.inked::before { transform: scale(1) rotate(0); }
.after .wstep .private { margin-top: 14px; }
.after .wstep .stamp { font: 400 21px/1 var(--lcd); letter-spacing: .07em; color: var(--rosa); margin: 6px 0 8px; }
.after .wstep h3 { font-size: clamp(1.8rem, 1.35rem + 1.4vw, 2.5rem); margin-bottom: 8px; }

/* 4. the game, in the deck's own colours */
.after .band.teal { background: var(--teal); color: var(--ivory); }
.after .band.teal h2 { color: var(--ivory); }
.after .band.teal .soft { color: rgba(253, 253, 245, .8); }
.after .game { display: grid; gap: 38px; grid-template-areas: "intro" "cards" "instructions"; }
.after .game-intro{grid-area:intro}.after .game-instructions{grid-area:instructions}.after .game .card-browser{grid-area:cards}
@media (min-width: 900px) { .after .game { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "cards intro" "cards instructions"; gap: 28px 80px; align-items: start; } .after .game .table { align-self:center; } }
.after .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.after .g-kick { font: 400 19px/1 var(--lcd); letter-spacing: .1em; text-transform: uppercase; color: #F6D79A; }
.after .g-how { font: italic 400 1.7rem/1 var(--serif); color: var(--ivory); margin-top: 6px; }
.after .howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: how; max-width: 33em; }
.after .howto li { counter-increment: how; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.after .howto li::before { content: counter(how); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--marigold); color: var(--night); font: 400 1.25rem/1 var(--serif); }
.after .g-special { font-size: .95rem; max-width: 33em; }
.after .rules li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.after .rules li::before { content: ""; width: 22px; height: 12px; margin-top: .45em; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 7 C4 1 6 1 8 6 S12 11 14 6 S18 1 21 5' fill='none' stroke='%23EFA51C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.after .table { display: grid; justify-items: center; gap: 24px; }
.after .card-browser,.after .card-browser *{box-sizing:border-box}
.after .card-browser{gap:18px;min-width:0;width:100%;max-width:440px;justify-self:center}
.after .deckwrap{position:relative;width:min(100%,368px);padding:8px 9px 6px}
.after .mission-deck{position:relative;width:100%;aspect-ratio:5/7;perspective:1500px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.after .printed-under{position:absolute;inset:0;background:var(--ivory);border:1px solid #75221B44;border-radius:16px;box-shadow:0 5px 15px #15272533}
.after .printed-under:nth-child(1){transform:rotate(-4deg) translate(-5px,4px)}
.after .printed-under:nth-child(2){transform:rotate(3deg) translate(4px,2px)}
.after .card-motion{position:absolute;inset:0;z-index:2;transform-origin:50% 85%;transform-style:preserve-3d;will-change:transform,opacity}
.after .card-reveal{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:16px;background:var(--ivory);box-shadow:0 5px 18px #10242133;transform-origin:50% 85%;transform:translateY(calc(9px * (1 - var(--reveal,0)))) rotate(calc(2deg * (1 - var(--reveal,0)))) scale(calc(.95 + .05 * var(--reveal,0)))}
.after .printed-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.after .printed-card.is-flipped{transform:rotateY(180deg)}
.after .print-front,.after .print-back{position:absolute;inset:0;overflow:hidden;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--ivory);box-shadow:0 8px 24px #10242144}
.after .print-back{transform:rotateY(180deg)}
.after .printed-card iframe,.after .card-reveal iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.after .card-more{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:10% 12%;background:var(--ivory);color:var(--ink);text-align:center;border:9px solid var(--marigold);border-radius:16px;container-type:inline-size;outline:2px solid var(--ink);outline-offset:-15px}
.after .card-more[hidden],.after .card-browser iframe[hidden]{display:none!important}
.after .more-kicker{font:italic 400 clamp(16px,8cqw,25px)/1.1 var(--serif)}
.after .more-number{font:400 clamp(76px,56cqw,164px)/.8 var(--serif);letter-spacing:-.05em;color:var(--rosa)}
.after .more-title{font:400 clamp(23px,13cqw,40px)/1.02 var(--serif);text-wrap:balance}
.after .card-more svg{width:45%;height:20px;flex:none;overflow:visible;fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round}
.after .more-note{font:500 clamp(11px,5.2cqw,16px)/1.4 var(--body);max-width:16em}
.after .card-flip-hit{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;border-radius:16px;background:transparent;cursor:grab;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.after .card-flip-hit:active{cursor:grabbing}
.after .card-flip-hit:focus-visible{outline:3px solid var(--marigold);outline-offset:7px}
.after .card-meta{display:flex;justify-content:space-between;gap:18px;width:min(100%,332px);font:18px/1.25 var(--lcd);letter-spacing:.04em;color:var(--ivory)}
.after .card-meta>span:last-child{text-align:right}
.after .card-actions{display:flex;align-items:center;justify-content:center;gap:19px;width:100%}
.after .card-arrow{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1.5px solid #FDFDF5A0;border-radius:46% 51% 47% 49%;background:transparent;color:var(--ivory);font:26px/1 var(--body);cursor:pointer}
.after .card-arrow:hover{background:#FDFDF51A}
.after .card-actions .cta{min-width:165px;min-height:52px;font-size:15px;padding:0 19px}
.after .mission{width:100%;max-width:25em;text-align:center;display:grid;gap:9px;min-height:7em;align-content:start}
.after .mission b{font-weight:600;color:var(--marigold)}
.after .mission .txt{font:400 1.35rem/1.35 var(--serif)}
.after .mission .say{font-size:15px;color:#FDFDF5C9}
.after .swipehint{font-size:12px;text-align:center;color:#FDFDF5C9}
@media(max-width:899px){.after .game{gap:42px}.after .game .stack-l{gap:18px}}
@media(max-width:380px){.after .card-actions{gap:12px}.after .card-actions .cta{font-size:13px;min-width:135px;padding-inline:12px}.after .card-arrow{width:44px;height:44px}.after .card-meta{font-size:16px}}
@media(prefers-reduced-motion:reduce){.after .printed-card,.after .mission-deck{transition:none}}

/* 5. what's in the box */
.after .kit { display: grid; gap: 26px; }
@media (min-width: 900px) { .after .kit { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 56px; align-items: center; } }
.after .kitart { position: relative; width: 100%; aspect-ratio: 1000 / 700; }
.after .kitart > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.after .kitart svg path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.after .kitart svg .fl { stroke: none; }
.after .kitart svg text { fill: var(--ink); stroke: none; font-family: var(--serif); }
.after .kitart g.it { transform-box: view-box; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .4s ease; }
.after .kitart.packed g.it { transform: translate(var(--dx), var(--dy)) scale(.35); opacity: 0; }
.after .kitart g.it.sel { transform: translateY(-16px); }
.after .kitart g.it.sel path:not(.fl) { stroke: var(--rosa); }
.after .kitart .hit { position: absolute; border: 0; background: none; cursor: pointer; border-radius: 16px; padding: 0; }
.after .kitart .hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.after .kitcap { display: grid; gap: 10px; min-height: 9em; align-content: start; }
.after .kitcap .k { font: 400 17px/1 var(--lcd); letter-spacing: .08em; color: var(--rosa); }
.after .kitcap h3 { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); font-style: italic; }
.after .kitdots { display: flex; flex-wrap: wrap; gap: 8px; }
.after .kitdots button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(117, 34, 27, .35); background: none; color: var(--ink); font-size: .9rem; cursor: pointer; }
.after .kitdots button[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* 6. packages, and splitting them with the padrinos */
.after .tiers { display: grid; gap: 34px; margin-top: 44px; }
@media (min-width: 900px) { .after .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px; align-items: stretch; margin-top: 78px; } }
@media (max-width: 899px) { .after .tier.fav { order: -1; } }
.after .tier { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 18px; padding: 30px 26px; border-radius: 22px; background: var(--paper); }
.after .tier h3 { font-size: 2rem; font-style: italic; }
.after .tier .price { font: 400 3.6rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.after .tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.after .tier li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; line-height: 1.45; }
.after .tier li::before { content: ""; width: 18px; height: 10px; margin-top: .45em; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 7 C4 1 6 1 8 6 S12 11 14 6 S18 1 21 5' fill='none' stroke='%2375221B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.after .tier.fav { background: var(--ink); color: var(--ivory); }
.after .tier.fav li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 7 C4 1 6 1 8 6 S12 11 14 6 S18 1 21 5' fill='none' stroke='%23EFA51C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.after .tier.fav .price { color: var(--marigold); }
.after .tier .badge { position: absolute; right: 18px; top: -18px; background: var(--marigold); color: var(--night); font: italic 400 1.2rem/1 var(--serif); padding: 11px 16px 12px; border-radius: 999px; transform: rotate(5deg); }
.after .tier h3 { grid-row: 1; }
.after .tier .price { grid-row: 2; }
.after .tier .founding-price { grid-row: 3; }
.after .tier ul { grid-row: 4; }
.after .tier .cta { grid-row: 5; justify-self: start; align-self: end; min-height: 54px; }
.after .founding { margin-top: 34px; display: grid; grid-template-columns: 58px minmax(0, 1fr); border-radius: 16px; overflow: hidden; background: var(--paper); max-width: 46em; }
.after .founding .stub { background: var(--marigold); display: grid; place-items: center; border-right: 2px dashed var(--night); }
.after .founding .stub i { width: 22px; height: 22px; background: var(--night); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.after .founding .body { display: grid; gap: 4px; padding: 16px 20px; }
.after .founding s { color: var(--ink-soft); }
.after .split { margin-top: 30px; background: var(--ink); color: var(--ivory); border-radius: 22px; padding: 28px 24px; display: grid; gap: 22px; }
@media (min-width: 900px) { .after .split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 34px 40px; gap: 40px; } }
.after .split h3 { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); }
.after .split .ctrl { display: grid; gap: 16px; }
.after .seg { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.after .seg legend, .after .stepper .lab { font-size: .9rem; color: rgba(253, 253, 245, .78); margin-bottom: 8px; padding: 0; }
.after .seg label { position: relative; }
.after .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.after .seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(253, 253, 245, .5); cursor: pointer; font-weight: 600; font-size: .95rem; }
.after .seg input:checked + span { background: var(--marigold); color: var(--night); border-color: var(--marigold); }
.after .stepper { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.after .stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(253, 253, 245, .6); background: none; color: var(--ivory); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.after .stepper button:disabled { opacity: .35; cursor: default; }
.after .stepper output { font: 400 2rem/1 var(--serif); min-width: 1.2em; text-align: center; }
.after .split .out { display: grid; gap: 6px; justify-items: start; }
@media (min-width: 900px) { .after .split .out { justify-items: end; text-align: right; } }
.after .split .each { font: 400 clamp(3.2rem, 2.2rem + 3vw, 5rem)/1 var(--serif); color: var(--marigold); font-variant-numeric: tabular-nums; }
.after .split .soft { color: rgba(253, 253, 245, .78); }
.after .note { margin-top: 22px; font-size: .94rem; }

/* 7. the credits: proof from the pilot, still to come */
.after .band.night { background: var(--night); color: var(--ivory); }
.after .band.night h2 { color: var(--ivory); }
.after .creditroll { position: relative; height: clamp(420px, 62vh, 560px); overflow: hidden; margin-top: 30px; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.after .creditroll .roll { display: grid; gap: 40px; justify-items: center; text-align: center; padding-block: 80px; animation: rollup 34s linear infinite; }
.after .creditroll:hover .roll, .after .creditroll:focus-within .roll { animation-play-state: paused; }
@keyframes rollup { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.after .credit { display: grid; gap: 8px; justify-items: center; max-width: 30em; }
.after .credit small { font: 400 17px/1 var(--lcd); letter-spacing: .14em; color: var(--marigold); }
.after .credit .todo { text-align: center; font-size: 1rem; }

/* 8. questions */
.after .faq { display: grid; gap: 34px; }
@media (min-width: 900px) { .after .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; } }
.after details { border-bottom: 1.5px solid rgba(117, 34, 27, .22); }
.after summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 20px 0; font: 400 clamp(1.45rem, 1.3rem + .4vw, 1.7rem)/1.2 var(--serif); }
.after summary::-webkit-details-marker { display: none; }
.after summary::after { content: ""; width: 20px; height: 20px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5 C9.6 7 10.4 13 10 17.5 M2.5 10.2 C7 9.7 13 10.5 17.5 9.8' fill='none' stroke='%2375221B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform .25s ease; }
.after details[open] summary::after { transform: rotate(45deg); }
.after details p { padding: 0 0 22px; color: var(--ink-soft); }

/* 9. the last word, on the camcorder again */
.after .finale { display: grid; justify-items: center; gap: 26px; padding-block-end: clamp(96px, 13vw, 160px); text-align: center; }
.after .fcam { position: relative; width: min(100%, 780px); aspect-ratio: 16 / 10.6; margin-bottom: 118px; }
@media (max-width: 699px) { .after .fcam { aspect-ratio: 10 / 15.6; width: min(100%, 420px); } }
.after .fcam > svg.camframe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.after .fcam .scr { left: 6%; top: 8%; right: 6%; bottom: 17%; display: grid; place-items: center; }
@media (max-width: 699px) { .after .fcam .scr { left: 8%; right: 8%; top: 6%; bottom: 13%; } }
.after .fcam .inner { position: relative; z-index: 3; display: grid; justify-items: center; gap: 20px; padding: 40px 18px 46px; }
.after .fcam h2 { color: var(--ivory); max-width: 12ch; font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.4rem); }
@media (min-width: 700px) { .after .fcam h2 { max-width: 17ch; font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.5rem); } .after .fcam .inner { padding: 30px 24px 40px; gap: 16px; } }
.after .fcam .rewbtn { background: none; border: 0; color: rgba(253, 253, 245, .85); font: 400 20px/1 var(--lcd); letter-spacing: .08em; padding: 12px 6px; cursor: pointer; }
.after .fcam .rewbtn:hover { color: var(--marigold); }
.after .plug { position: absolute; left: 50%; bottom: -44px; width: 2px; height: 2px; }

.after footer { position: relative; z-index: 1; border-top: 1.5px solid rgba(117, 34, 27, .18); }
.after footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; justify-content: space-between; padding-block: 34px calc(34px + 72px); }
@media (min-width: 900px) { .after footer .wrap { padding-block: 34px; } }
.after .mark { font: 400 1.7rem/1 var(--serif); color: var(--ink); text-decoration: none; }
.after .mark em { font-style: italic; }
.after .links { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; font-size: .94rem; }
.after .links a, .after .links button { color: var(--ink); background: none; border: 0; font: inherit; padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* bars that follow you once you are past the logo */
.after .topbar { position: fixed; z-index: 20; left: 0; right: 0; top: env(safe-area-inset-top, 0px); background: var(--ivory); box-shadow: 0 1.5px 0 rgba(117, 34, 27, .12); transform: translateY(-120%); transition: transform .3s ease; }
.after .topbar.on { transform: none; }
.after .topbar .in { max-width: 1180px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.after .topbar .right { display: flex; align-items: center; gap: 16px; }
.after .topbar .pkgs { display: flex; align-items: center; gap: 12px; }
.after .topbar .pkgs .lbl { font: 400 17px/1 var(--lcd); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.after .topbar .pkgs a { color: var(--ink); font: 600 .95rem/1 var(--body); text-decoration: underline; text-underline-offset: 4px; padding: 10px 2px; white-space: nowrap; }
@media (max-width: 899px) { .after .topbar .pkgs .lbl { display: none; } .after .topbar .pkgs { gap: 10px; } .after .topbar .right { gap: 12px; } }
.after .langbtn { background: none; border: 0; padding: 10px 2px; color: var(--ink); font: 600 .95rem/1 var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.after .topbar .cta { display: inline-flex; }
@media (max-width: 599px) { .after .topbar .cta { min-height: 44px; padding: 0 16px; font-size: .9rem; } .after .topbar .right { gap: 6px; } }
.after .bottombar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px var(--gut-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gut-l); background: var(--ivory); box-shadow: 0 -1.5px 0 rgba(117, 34, 27, .12); transform: translateY(120%); transition: transform .3s ease; }
.after .bottombar.on { transform: none; }
.after .bottombar > span { font-size: .95rem; color: var(--ink-soft); min-width: 0; }
@media (min-width: 900px) { .after .bottombar { display: none; } }
.after .rewbadge { position: fixed; z-index: 30; left: calc(18px + env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); font: 400 26px/1 var(--lcd); letter-spacing: .06em; color: var(--ink); background: var(--ivory); padding: 6px 10px; border-radius: 6px; opacity: 0; pointer-events: none; }
html.rewinding .after .rewbadge { opacity: 1; animation: rewblink .5s steps(1, end) infinite; }

/* save your date: the clapperboard pops up over the logo, claps, and cuts to the bookings page */
.after dialog.slatedlg { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); border: 0; padding: 0; background: transparent; color: var(--ivory); overflow: visible; }
.after dialog.slatedlg::backdrop { background: rgba(30, 10, 8, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.after dialog.slatedlg[open] { animation: dlgin .42s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes dlgin { from { transform: translateY(40px) rotate(-3deg) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.after .slate.big { max-width: none; padding-top: 92px; }
.after .slate.big .clap { transform: rotate(-9deg); }
.after .slate.big.snap .clap { transform: rotate(0); }
.after .slate.big .dlg-h { position: absolute; left: 6px; top: 0; font: italic 400 1.7rem/1 var(--serif); color: var(--ivory); }
.after .slate.big .accion { top: 36px; right: 10px; }
.after .slate.big .board { padding: 20px 22px 22px; }
.after .slate.big input { font-size: 2.3rem; }
.after .slate .hint.err { color: var(--marigold); }
.after .slate .who { border: 0; margin: 0; padding: 0 0 12px; min-width: 0; }
.after .slate .who legend { padding: 0; font: 400 17px/1 var(--lcd); letter-spacing: .08em; color: rgba(253, 253, 245, .72); }
.after .slate .whos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.after .slate .whos button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(253, 253, 245, .45); background: transparent; color: var(--ivory); font: 600 .95rem/1.1 var(--body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.after .slate .whos button[aria-pressed="true"] { background: var(--marigold); border-color: var(--marigold); color: var(--night); }
.after .dlg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.after .plain { background: none; border: 0; color: var(--ink); font: 600 1rem/1 var(--body); padding: 12px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.after .plain.onnight { color: rgba(253, 253, 245, .85); }
.after .cutout { position: fixed; inset: 0; z-index: 60; background: var(--night); opacity: 0; pointer-events: none; display: grid; place-items: center; transition: opacity .32s ease; }
.after .cutout.on { opacity: 1; pointer-events: auto; }
.after .cutout .lcdline { font: 400 26px/1 var(--lcd); letter-spacing: .1em; color: rgba(253, 253, 245, .8); }

@media (prefers-reduced-motion: reduce) {
  .after .card, .after .topbar, .after .bottombar, .after .cta .pen, .after .slate .clap, .after .bubble, .after .kitart g.it, .after .wstep, .after .num, .after .num::before { transition: none; }
  .after .ul:hover path, .after .scr .hud .r i { animation: none; }
  .after .creditroll .roll { animation: none; }
  .after .creditroll { height: auto; -webkit-mask-image: none; mask-image: none; }
  .after .scr .credits .roll { animation: none; top: 18%; }
}

/* narrow phones: the brand, Save your date, the language switch and the menu all fit on one line */
.after .topbar .mark { white-space: nowrap; }
@media (max-width: 400px) {
  .after .topbar .in { gap: 10px; }
  .after .topbar .mark { font-size: 1.3rem; }
  .after .topbar .cta { padding: 0 12px; font-size: .84rem; white-space: nowrap; }
}

/* Purchase clarity, preserving the established hand-drawn system. */
.after .quick {padding-block:40px 54px; background:#F4EEE1;}
.after .quick h2 {font-size:clamp(2rem,4vw,3.1rem);}
.after .quicksteps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px;}
.after .quicksteps b {font:24px var(--lcd);color:var(--rosa);}
.after .quicksteps h3 {margin:10px 0;font-size:1.6rem;}
.after .quicksteps p {font-size:1rem;line-height:1.5;}
.after .founding-price {font-size:.92rem;margin:8px 0 16px;}
.after .split-option {margin-top:26px;border-block:1.5px dashed var(--ink);padding:18px 0;}
.after .split-option>summary {font-weight:600;cursor:pointer;min-height:44px;align-content:center;}
.after .split-option .split {margin-top:12px;}
.after .split-responsibility {font-size:.92rem;line-height:1.5;margin-top:14px;max-width:65ch;}
.after #week .wstep {min-height:0;opacity:1;align-content:start;padding-block:22px;}
.after #week .week {align-items:start;}
@media(max-width:650px){.after .quicksteps{grid-template-columns:1fr;gap:22px}.after .quicksteps article{display:grid;grid-template-columns:35px 1fr;gap:0 10px}.after .quicksteps article p{grid-column:2}.after .quicksteps h3{margin:0 0 8px}.after #week .camcol{display:none}.after #week .week{display:block}}