/* The one-sheet at /run-a-league: the home page's clothes (site.css) on a wider table.
   Kept as its own file so a change made in the browser's inspector can land here.
   The home page wears it too, since its hero, screens and price are the one-sheet's. */
.sheet { max-width: 960px; margin: 0 auto; padding: 0 16px 60px; }
/* The hero: one statement, three lines, one ask, beside the game day screen
   of an invented league, tilted, wearing the page's one shadow. */
.lede { display: grid; grid-template-columns: 1fr minmax(400px, 480px); gap: 20px 40px; align-items: center; padding: 26px 4px 0; }
.lede h1 { font: 500 36px/1.12 var(--serif); letter-spacing: -.01em; position: relative; z-index: 0; }
/* One word gets a marker swipe in the coral: a stroked path stretched to the
   word and drawn over the letters, so it crosses the p's tail the way a pen
   stroke would, rather than the tail being drawn across it. */
.swipe { position: relative; z-index: 0; white-space: nowrap; }
.swipe::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -.1em; height: .32em; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 40 8, 90 5, 196 10' fill='none' stroke='%23FF6B5A' stroke-width='9' stroke-linecap='round' opacity='1'/%3E%3Cpath d='M8 18 C 60 13, 130 12, 190 16' fill='none' stroke='%23FF6B5A' stroke-width='5' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }

.lede .lines { font: 400 19px/1.5 var(--serif); margin-top: 16px; }
.lede .go { margin-top: 22px; }
.lede .tease { font: italic 400 16px/1.35 var(--serif); color: var(--dim); margin-top: 12px; }
/* "Free." leads the line under the buttons in the ink, upright and heavier, so the price reads at a glance. */
.lede .tease b { font-style: normal; font-weight: 600; color: var(--ink, #161616); }
.hero { margin: 0; }
/* The tilt and the shadow are in the picture itself (scripts/screens.mjs says
   why), so it is shown flat: no transform here, or it goes soft again. */
/* Every Cascade picture is shown at exactly the width it was rendered for
   (scripts/screens.mjs), 2x or 3x by srcset, so its pixels land one-to-one on
   the screen's and nothing is resampled. Change a width here and the script
   has to render for the new one. A hairline is a box-shadow, not a border, so
   it takes nothing off that width. */
.hero img { display: block; width: 480px; max-width: 100%; height: auto; }
.sheet .hdr { margin-top: 22px; }

/* Three across, one down. */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.three > * { min-width: 0; }
.intro { font: 400 18px/1.45 var(--serif); max-width: 660px; padding: 6px 4px 16px; }
/* The three points: plain columns, upright headings, no boxes. */
.points { gap: 30px; padding: 4px 4px 0; }
.point h3 { font: 500 21px/1.25 var(--serif); margin-bottom: 8px; }
.point p { font: 400 16px/1.5 var(--serif); color: var(--dim); }
/* The points each wear a real screen, all three one size. */
.point .shot { display: block; width: 280px; max-width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(22,22,22,.12); margin-bottom: 16px; }
.shots .point { max-width: 280px; }
.keep { font: 400 19px/1.5 var(--serif); max-width: 720px; padding: 26px 4px 0; }
/* The reassurance leads with one sentence set large on its own line, so it
   reads as the point of the section rather than a bolder word or two. */
.keep b { display: block; font: 500 26px/1.2 var(--serif); letter-spacing: -.01em; margin-bottom: 8px; }

/* The phones. On a phone they scroll sideways, so the section is one screen
   tall instead of three. */
.phones figure { margin: 0; min-width: 0; max-width: 280px; }
.phone { width: fit-content; max-width: 100%; border-radius: 30px; overflow: hidden; box-shadow: 0 0 0 1px rgba(22,22,22,.14); background: #fff; }
.phone img { display: block; width: 280px; max-width: 100%; height: auto; }
figcaption { font: 400 15px/1.4 var(--serif); color: var(--dim); padding: 12px 6px 0; }
figcaption b { font-weight: 500; color: var(--ink); }

/* Three leagues, one screen each, drawn. Each card is its league's paper,
   ink and accent; the anatomy underneath is the same. */
.brands .mini { border-radius: 14px; padding: 16px 14px 14px; background: var(--p); color: var(--k); }
.mini .mtop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
.mini .mpill { font: 700 10px/1 var(--sans); letter-spacing: .12em; padding: 7px 9px; border-radius: 999px; background: var(--pill); color: var(--pillk); white-space: nowrap; }
.mini .meye { font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 5px; }
.mini .mday { font: 700 21px/1.1 var(--disp); letter-spacing: -.01em; margin-bottom: 11px; }
.mini .mcard { display: flex; border-radius: 12px; overflow: hidden; background: var(--c); color: var(--ck); }
.mini .mslot { width: 64px; flex: none; background: var(--slot); color: var(--slotk); display: grid; place-content: center; text-align: center; font: 700 13.5px/1.2 var(--num); }
.mini .mslot span { display: block; font: 600 8.5px/1.6 var(--sans); letter-spacing: .12em; }
.mini .mbody { flex: 1; padding: 10px 12px 11px; min-width: 0; }
.mini .mrow { display: flex; justify-content: space-between; font: 700 9.5px/1 var(--sans); letter-spacing: .12em; margin-bottom: 9px; }
.mini .mrow span:first-child { opacity: .7; }
.mini .mrow .acc { color: var(--acc); }
.mini .mteam { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 400 15px/1.55 var(--sans); }
.mini .mteam > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .mteam b { font-weight: 700; }
.mini .msc { display: flex; gap: 12px; font: 400 14px/1.55 var(--num); flex: none; }
.mini .msc i { font-style: normal; opacity: .55; }
.mini .mmark { display: inline-flex; flex-direction: column; line-height: 1; }
.mini .mmark small { font: 700 7px/1 var(--sans); letter-spacing: .16em; margin-top: 3px; }
.brands figcaption { padding-top: 10px; }
/* In a narrow column (a tablet, a split screen) the card slims its type and
   its slot rather than cutting team names short. */
.brands figure { container-type: inline-size; }
@container (max-width: 280px) {
  .mini .mday { font-size: 18px; }
  .mini .mslot { width: 54px; font-size: 12.5px; }
  .mini .mbody { padding: 9px 10px 10px; }
  .mini .mteam { font-size: 13px; }
  .mini .msc { font-size: 12px; gap: 8px; }
  .mini .mtop { margin-bottom: 12px; }
}

.mini.uvc { --p: #D5D5FF; --k: #181A42; --c: #fff; --ck: #181A42; --slot: #1F7FC4; --slotk: #fff; --acc: #FF2E88; --pill: #fff; --pillk: #181A42;
  --disp: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; --num: "SF Mono", ui-monospace, Menlo, monospace; }
.mini.uvc .mmark { font: 800 13px/1 var(--disp); letter-spacing: .1em; color: #181A42; padding: 5px 8px; border-radius: 9px; border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #4FB3E8, #6742C9, #FF2E88) border-box; }
.mini.rush { --p: #1E3527; --k: #F4F1E4; --c: #284434; --ck: #F4F1E4; --slot: #F6B31A; --slotk: #233A1E; --acc: #F6B31A; --pill: #2F4E3C; --pillk: #F6B31A;
  --disp: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; --num: "SF Mono", ui-monospace, Menlo, monospace; }
.mini.rush .mmark { font: italic 900 23px/1 var(--disp); letter-spacing: .01em; color: #F6B31A; text-transform: uppercase; }
.mini.rush .mmark small { color: #F6B31A; }
.mini.alki { --p: #F6C445; --k: #161616; --c: #fff; --ck: #161616; --slot: #161616; --slotk: #F6C445; --acc: #B8121B; --pill: #161616; --pillk: #F6C445;
  --disp: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; --num: "SF Mono", ui-monospace, Menlo, monospace; }
.mini.alki .mmark { font: 900 14px/1 var(--sans); letter-spacing: .06em; color: #F6C445; background: #161616; padding: 6px 9px; border-radius: 8px; }

/* Pricing: the number on the left, what it buys on the right. */
.price { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px 40px; align-items: start; padding-top: 6px; }
.price .big { font: 500 76px/1 var(--serif); letter-spacing: -.02em; }
.price .big small { display: block; font: italic 400 21px/1.3 var(--serif); color: var(--dim); margin-top: 8px; letter-spacing: 0; }
.price .terms { font: 400 18px/1.45 var(--serif); margin-top: 18px; }
.price .terms + .terms { margin-top: 8px; color: var(--dim); }
/* The one button on the page: coral, since it is the thing. It opens a mail
   with the subject and a short template filled in. */
.price .go { margin-top: 22px; }
/* Buttons wear the mark's face, Rubik Mono One in caps (2026-09-28): the
   serif read soft on the coral. Get started is the coral one; Book a call
   beside it is the same shape in outline, the second choice. */
.go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* A space in a monospace face is as wide as a letter, so words close up a
   little or "Get started" reads as two buttons. */
.btn { display: inline-block; font: 400 13.5px/1 "Rubik Mono One", ui-monospace, monospace; letter-spacing: .04em; word-spacing: -.3em; text-transform: uppercase; color: var(--ink); background: var(--coral); padding: 16px 20px 15px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #F25B4A; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:hover { background: rgba(22,22,22,.06); }

/* The FAQ folds: each question is a row with a coral plus, and opening one
   closes the others. The plus turns into a cross when its answer is open. */
.answers { padding-top: 2px; }
.qa + .qa { border-top: 1px solid rgba(22,22,22,.12); }
.qa summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 4px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 500 21px/1.25 var(--serif); margin: 0; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 7px;
  background: linear-gradient(var(--coral), var(--coral)) center / 100% 2px no-repeat, linear-gradient(var(--coral), var(--coral)) center / 2px 100% no-repeat;
  transition: transform .2s ease; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.qa p { font: 400 17px/1.5 var(--serif); color: var(--dim); max-width: 680px; padding: 0 44px 22px 4px; margin-top: -4px; }
.qa[open] p { animation: qa-in .2s ease-out; }
@keyframes qa-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } .qa[open] p { animation: none; } }
.price h3 { font: italic 500 17px/1.3 var(--serif); color: var(--dim); margin-bottom: 4px; }
/* What the price includes, as a checklist: a grey box with a coral check laid
   over it in the swipe's marker stroke, bigger than the box the way a hand
   check is, one thick stroke and a thinner echo. */
.price ul { list-style: none; padding: 0; }
.price li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 0 14px; align-items: start; padding: 8px 0; font: 400 17px/1.4 var(--serif); }
.price li::before { content: ""; box-sizing: border-box; width: 22px; height: 22px; margin-top: 1px; border-radius: 5px; background: #ECEAE4; border: 1.5px solid #D6D3CB; }
.price li::after { content: ""; position: absolute; left: -3px; top: 3px; width: 32px; height: 28px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M5 15 C 8 17, 10 20, 12.5 23 C 15 15, 21 7, 29 3' fill='none' stroke='%23FF6B5A' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' opacity='.92'/%3E%3Cpath d='M14.5 20 C 17.5 13, 22 8, 28.5 5' fill='none' stroke='%23FF6B5A' stroke-width='2.2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat center / contain; }
.price li small { grid-column: 2; display: block; font: 400 15px/1.4 var(--serif); color: var(--dim); }

.sheet .go + .foot { padding-top: 16px; }
.sheet .foot { padding-top: 10px; font-size: 21px; }
.sheet .foot a { white-space: nowrap; }

@media (max-width: 720px) {
  .lede { grid-template-columns: 1fr; gap: 8px; }
  .lede h1 { font-size: 30px; }
  .hero { margin: 6px 0 0; }
  .hero img { width: 340px; margin: 0 auto; }
  .three { grid-template-columns: 1fr; }
  .phones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; gap: 12px; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
  .phones figure { flex: 0 0 280px; scroll-snap-align: start; }
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; gap: 12px; margin: 0 -16px; padding: 4px 16px 0; scrollbar-width: none; }
  .shots::-webkit-scrollbar { display: none; }
  .shots .point { flex: 0 0 280px; scroll-snap-align: start; }
  .price { grid-template-columns: 1fr; gap: 6px; }
  .price > div + div { margin-top: 18px; }
  .price .big { font-size: 64px; }
  .keep b { font-size: 22px; }
  .qa summary h3 { font-size: 19px; }
  .qa summary::after { margin-top: 5px; }
  .btn { padding-left: 17px; padding-right: 17px; }
}