/* The two help pages on the colour system from home.css (round 25, 6 November 2026), two colours each: yellow and
   teal. Put Noodle on a tablet draws the hand-over (a tablet with Noodle and a club code), then the three steps
   zigzag down teal on Noodle's yellow strand. The waiting list is a ticket for the queue: a teal stub with Noodle,
   a perforation, the form. The waiting list's other pages use the same ticket. */

/* ---------- Put Noodle on a tablet ---------- */
.dev-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 64px;align-items:center;padding-block:40px 24px}
.dev-hero-words{display:flex;flex-direction:column;gap:22px}
.dev-hero .h{font-size:clamp(44px,6.2vw,92px);line-height:.95;margin:0}
.dev-hero .lede{margin:0;max-width:34em;color:var(--ink-yellow)}
.dev-hero+.strand{background:var(--yellow)}

/* The hand-over, drawn: the parent's phone with a club code, a noodle strand across, the child's tablet with Noodle
   cheering, on a teal disc. Decoration only (aria-hidden) */
.dev-art{position:relative;width:min(100%,520px);aspect-ratio:5/4;justify-self:center}
.dev-disc{position:absolute;inset:6% 8% 2% 12%;border-radius:50%;background:var(--teal)}
.dev-arc{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.dev-phone{position:absolute;z-index:2;left:4%;bottom:8%;width:24%;aspect-ratio:9/17;background:var(--ink);border-radius:22px;padding:7px;box-shadow:6px 6px 0 var(--yellow-deep,#F5B800);transform:rotate(-9deg)}
.dev-phone-screen{height:100%;border-radius:16px;background:var(--paper);overflow:hidden;display:grid;grid-template-rows:auto 1fr;place-items:center}
.dev-phone-bar{width:100%;height:clamp(14px,2vw,22px);background:var(--teal)}
.dev-phone .dev-code-big{font-size:clamp(12px,1.6vw,19px);line-height:1.1;text-align:center;padding:8px 10px;transform:rotate(-3deg);white-space:normal}
.dev-tab{position:absolute;z-index:2;right:0;top:20%;width:62%;aspect-ratio:4/3.1;background:var(--ink);border-radius:26px;padding:11px;box-shadow:8px 8px 0 var(--yellow-deep,#F5B800);transform:rotate(6deg)}
.dev-tab-screen{height:100%;border-radius:16px;background:var(--paper);overflow:hidden;display:grid;place-items:end center}
.dev-tab-screen img{width:58%;height:auto;margin-bottom:-4%}
/* My Noodle on the tablet: Noodle dressed as a pirate captain, filling the screen */
.dev-tab-dress{place-items:center;background:linear-gradient(#cfe9f2 0 62%,#f3dcae 62%)}
.dev-tab-dress img{width:100%;height:100%;margin:0;object-fit:cover;object-position:center 40%}
@media(prefers-reduced-motion:no-preference){
  .dev-spark{transform-box:fill-box;transform-origin:center;animation:dev-twinkle 2.4s ease-in-out infinite}
  .dev-spark:nth-of-type(4){animation-delay:.8s}.dev-spark:nth-of-type(5){animation-delay:1.6s}
  @keyframes dev-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(20deg)}}
}

/* The steps on teal, zigzagging down the strand */
.dev-band{background:var(--teal);padding:24px 0 96px;color:var(--white)}
.dev-path{position:relative}
.dev-route{position:absolute;inset:40px 0 40px;width:100%;height:calc(100% - 80px);z-index:0}
.dev-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:72px}
.dev-step{position:relative;background:var(--white);color:var(--ink);border:var(--inked);box-shadow:var(--shadow);border-radius:24px;padding:60px 36px 32px;display:flex;flex-direction:column;gap:12px}
.dev-step-1{grid-column:1/span 7;transform:rotate(-1deg)}
.dev-step-2{grid-column:6/span 7;transform:rotate(1deg)}
.dev-step-3{grid-column:1/span 7;transform:rotate(-.5deg)}
.dev-n{position:absolute;top:-64px;left:-18px;font-family:var(--wordmark);font-size:120px;line-height:1;color:var(--yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.dev-step-2 .dev-n{left:auto;right:-10px}
.dev-step h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink)}
.dev-step p{margin:0;font-size:18px;line-height:1.55;color:var(--ink-2)}
.dev-step b{color:var(--ink)}
.dev-code{display:inline-block;margin-block:2px;background:var(--yellow);color:var(--ink);border:var(--inked);border-radius:12px;padding:3px 12px;font-family:var(--display);font-weight:800;letter-spacing:.04em;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.dev-os{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:4px}
.dev-os div{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:14px 16px;line-height:1.5;color:var(--ink-2)}
.dev-os b{display:block;font-family:var(--display);font-weight:800;margin-bottom:2px}
.dev-back{margin:64px 0 0;display:flex;flex-wrap:wrap;gap:12px 28px;font-weight:800;font-size:18px}
.dev-back a{color:var(--white);text-decoration-color:var(--yellow);text-underline-offset:4px}
@media(max-width:960px){
  .dev-hero{grid-template-columns:minmax(0,1fr);padding-block:24px 8px}
  .dev-art{width:min(100%,420px)}
  .dev-steps{grid-template-columns:minmax(0,1fr);row-gap:64px;padding-top:40px}
  .dev-step-1,.dev-step-2,.dev-step-3{grid-column:1;transform:none}
  .dev-step{padding:52px 22px 26px}
  .dev-n{font-size:92px;top:-46px;left:-6px}
  .dev-step-2 .dev-n{right:-6px}
  .dev-route{display:none}
  .dev-os{grid-template-columns:minmax(0,1fr)}
}

/* ---------- The waiting list: a ticket for the queue ---------- */
/* Yellow above, teal below, full width behind the ticket */
.waitlist{position:relative;isolation:isolate;padding-block:40px 96px}
.waitlist:before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:46%;bottom:0;background:var(--teal)}
.waitlist:has(.waitlist-art) .waitlist-card{
  --stub:clamp(220px,24vw,300px);
  max-width:980px;display:grid;grid-template-columns:var(--stub) minmax(0,1fr);column-gap:clamp(28px,4vw,52px);row-gap:18px;
  padding:44px clamp(24px,4vw,48px) 44px 0;position:relative;border:var(--inked);box-shadow:var(--shadow);border-radius:26px}
.waitlist:has(.waitlist-art) .waitlist-card>:not(.waitlist-art){grid-column:2}
/* The stub: Noodle on teal, torn off along a dashed line */
.waitlist-card .waitlist-art{max-width:none;grid-column:1;grid-row:1/span 3;align-self:stretch;box-sizing:border-box;width:100%;height:100%;min-height:260px;margin:-44px 0;height:calc(100% + 88px);object-fit:contain;object-position:center 70%;padding:36px 28px 28px;background:radial-gradient(circle closest-side at 50% 60%,var(--paper) 0 92%,#0000 93%) center 58%/min(86%,240px) auto no-repeat,var(--teal);background-size:auto;border-right:3px dashed var(--white);border-radius:23px 0 0 23px}
.waitlist:has(.waitlist-form) .waitlist-art{grid-row:1/span 4}
/* Two bites out of the ticket where the perforation meets its edges */
.waitlist:has(.waitlist-art) .waitlist-card:before,.waitlist:has(.waitlist-art) .waitlist-card:after{content:"";position:absolute;left:calc(var(--stub) - 17px);width:34px;height:34px;border-radius:50%;border:var(--inked);box-sizing:border-box;background:var(--yellow)}
.waitlist:has(.waitlist-art) .waitlist-card:before{top:-19px;clip-path:inset(50% 0 0 0)}
.waitlist:has(.waitlist-art) .waitlist-card:after{bottom:-19px;background:var(--teal);clip-path:inset(0 0 50% 0)}
.waitlist:has(.waitlist-art) .waitlist-card h1{font-size:clamp(44px,5.6vw,76px);line-height:.95}
/* The check page has no stub: the card on its own, inked */
.waitlist-card{border:var(--inked);box-shadow:var(--shadow)}
.waitlist:has(.waitlist-form) .waitlist-card .lede{max-width:32em}
@media(max-width:700px){
  .waitlist{padding-block:24px 64px}
  .waitlist:before{top:38%}
  .waitlist:has(.waitlist-art) .waitlist-card{--stub:200px;grid-template-columns:minmax(0,1fr);padding:0 20px 32px}
  .waitlist:has(.waitlist-art) .waitlist-card>:not(.waitlist-art){grid-column:1}
  .waitlist-card .waitlist-art,.waitlist:has(.waitlist-form) .waitlist-art{grid-row:auto;height:var(--stub);min-height:0;margin:0 -20px 10px;width:calc(100% + 40px);padding:24px 0 12px;border-right:0;border-bottom:3px dashed var(--white);border-radius:23px 23px 0 0}
  .waitlist:has(.waitlist-art) .waitlist-card:before,.waitlist:has(.waitlist-art) .waitlist-card:after{top:calc(var(--stub) - 17px);bottom:auto;background:var(--yellow)}
  .waitlist:has(.waitlist-art) .waitlist-card:before{left:-19px;clip-path:inset(0 0 0 50%)}
  .waitlist:has(.waitlist-art) .waitlist-card:after{left:auto;right:-19px;clip-path:inset(0 50% 0 0)}
}

/* ---------- Waiting list, pass 2 (Sam: "shit on mobile. Dull imagery and iconography lacking") ---------- */
/* The stub: Noodle on its paper disc, in a burst of light-teal rays, with sparkles */
.waitlist-card .waitlist-art{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.4L21 11l-6.4 2.6L12 20l-2.6-6.4L3 11l6.4-2.6z' fill='%23FFD54A' stroke='%231F2433' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14% 16%/34px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2 5.5L19.5 11 14 13l-2 5.5L10 13l-5.5-2L10 8.5z' fill='%23fff' stroke='%231F2433' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 88% 22%/24px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2 5.5L19.5 11 14 13l-2 5.5L10 13l-5.5-2L10 8.5z' fill='%23fff' stroke='%231F2433' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 84% 86%/20px no-repeat,
  radial-gradient(circle closest-side at 50% 60%,var(--paper) 0 92%,#0000 93%) center 58%/min(86%,240px) auto no-repeat,
  repeating-conic-gradient(from 0deg at 50% 60%,#ffffff1f 0 9deg,#0000 9deg 22.5deg),
  var(--teal)}
@media(max-width:700px){
  .waitlist-card .waitlist-art{background-size:30px,22px,18px,auto,auto,auto;background-position:12% 22%,90% 18%,82% 84%,center 60%,0 0,0 0}
  .waitlist:has(.waitlist-art) .waitlist-card{--stub:230px}
}

/* Three icon rows in place of the one long lede */
.wl-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.wl-points li{display:flex;gap:14px;align-items:flex-start;line-height:1.45}
.wl-i{flex:none;width:44px;height:44px;padding:9px;box-sizing:border-box;border-radius:50%;background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),2px 2px 0 var(--ink)}
.wl-points span{padding-top:9px}

/* The form: an icon on each label, a lock on the privacy line */
.waitlist-form label{display:flex;align-items:center;gap:10px}
.waitlist-form label:before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--teal) center/18px no-repeat}
.waitlist-form label[for=name]:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E")}
.waitlist-form label[for=email]:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E")}
.waitlist-form>.waitlist-small{position:relative;padding:12px 14px 12px 50px;border-radius:14px;background:var(--paper)}
.waitlist-form>.waitlist-small:before{content:"";position:absolute;left:14px;top:12px;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5C63' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}

/* The join page's stub is a marketing picture of the app's games (img/waitlist-games.webp, made from the real app screens in round 25's build/promo; Sam: not waving Noodle, then "make a marketing image up of the various games") */
/* The join page's ticket has its stub on top at every width, so the picture fills it edge to edge: a square picture
   stranded in a tall side stub looked broken on an iPad (Sam, 6 November 2026). The stub's height follows the
   ticket's width (container units), so the whole of Noodle shows, from hat to bowl, at any size */
.waitlist:has(.waitlist-art-photo) .waitlist-card{--pad:clamp(20px,5vw,56px);container-type:inline-size;max-width:700px;grid-template-columns:minmax(0,1fr);padding:0 var(--pad) 40px}
.waitlist:has(.waitlist-art-photo) .waitlist-card>:not(.waitlist-art){grid-column:1}
.waitlist-card .waitlist-art.waitlist-art-photo{grid-column:1;grid-row:auto;min-height:0;width:calc(100cqw + 2 * var(--pad));height:calc((100cqw + 2 * var(--pad)) * .643);margin:0 calc(-1 * var(--pad)) 12px;padding:0;object-fit:cover;object-position:center;border-right:0;border-bottom:3px dashed var(--white);border-radius:23px 23px 0 0;background:var(--teal)}
.waitlist:has(.waitlist-art-photo) .waitlist-card:before,.waitlist:has(.waitlist-art-photo) .waitlist-card:after{top:calc((100cqw + 2 * var(--pad)) * .643 - 17px);bottom:auto;background:var(--yellow)}
.waitlist:has(.waitlist-art-photo) .waitlist-card:before{left:-19px;clip-path:inset(0 0 0 50%)}
.waitlist:has(.waitlist-art-photo) .waitlist-card:after{left:auto;right:-19px;clip-path:inset(0 50% 0 0)}
.waitlist:has(.waitlist-art-photo):before{top:52%}

/* Round 26 crit: the strand into the footer, as on every page */
.dev-band+.strand{background:var(--teal)}
.waitlist+.strand{background:var(--teal)}
.waitlist-card:has(.waitlist-next) .waitlist-art{grid-row:1/span 4}
.waitlist-next{margin:0;font-weight:700}
.waitlist-next a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}