/* Pet Life website. Colours and type come from the game: hot pink, royal blue, cyan, gold, plum outlines, Lilita One. */
@font-face { font-family: "Lilita One"; src: url("/assets/fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  --pink: #fa57a8; --pink-deep: #db2e85; --blue: #4599f7; --cyan: #38ccd6; --gold: #fcc426;
  --plum: #75195a; --ink: #4d1a42; --paper: #fff5f9; --blush: #ffdeed; --white: #fff;
  --display: "Lilita One", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 66ch;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 1.0625rem/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: 0.01em; }
p { margin: 0 0 1em; }
.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }

/* the candy lettering the game uses for its titles: white, plum outline, a hard drop underneath */
.candy { color: var(--white); -webkit-text-stroke: 0.14em var(--plum); paint-order: stroke fill; text-shadow: 0 0.09em 0 var(--plum); }
.candy.pink { color: var(--pink); -webkit-text-stroke-color: var(--white); text-shadow: 0 0.08em 0 var(--plum), 0 0 0 var(--plum); filter: drop-shadow(0 0 0 var(--plum)); }

/* a slab: white card, plum outline, a thick lip at its foot */
.slab { background: linear-gradient(#fff, var(--paper)); border: 3px solid var(--plum); border-bottom-width: 8px; border-radius: 26px; padding: 22px; }
.btn { display: inline-block; font: 400 1.25rem/1 var(--display); color: #fff; text-decoration: none; background: linear-gradient(#ff7dbf, var(--pink));
  border: 3px solid var(--plum); border-bottom-width: 7px; border-radius: 999px; padding: 14px 26px 12px; -webkit-text-stroke: 0.1em var(--plum); paint-order: stroke fill; }
.btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(3px); border-bottom-width: 4px; }
.btn.quiet { background: #fff; color: var(--ink); -webkit-text-stroke: 0; }
.btn[aria-disabled="true"] { background: linear-gradient(#fff, var(--blush)); color: var(--ink); -webkit-text-stroke: 0; cursor: default; }

/* top bar */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.35rem/1 var(--display); }
.brand img { width: 40px; height: 40px; border-radius: 11px; border: 2px solid var(--plum); }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { font-weight: 800; font-size: 0.95rem; color: var(--ink); text-decoration: none; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.75); border: 2px solid var(--plum); }
.top nav a[aria-current="page"] { background: var(--pink); color: #fff; }

/* the hero is the game's title screen: sky, rainbow, meadow */
.hero { position: relative; overflow: hidden; padding: 120px 0 0; background: linear-gradient(#7fd6f4 0%, #c9f0fb 46%, #fde6f1 70%); }
.rainbow { position: absolute; left: 50%; bottom: 90px; width: min(1500px, 190vw); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 750px 750px 0 0; opacity: .8;
  background: radial-gradient(circle at 50% 100%, transparent 0 51%, #c9a5f5 51% 54%, #8fc4ff 54% 57%, #9be7c0 57% 60%, #fff0a3 60% 63%, #ffc79a 63% 66%, #ff9fc6 66% 69%, transparent 69%); }
.meadow { position: absolute; inset: auto 0 0 0; height: 150px; background: linear-gradient(#8ee66a, #5fd24a); border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: end; }
.hero h1 { font-size: clamp(3.6rem, 11vw, 7.5rem); }
.hero .tag { font: 400 clamp(1.2rem, 3vw, 1.7rem)/1.2 var(--display); margin: 10px 0 22px; }
.hero .lede { max-width: 34ch; font-size: 1.15rem; font-weight: 600; }
.hero .pitch { padding-bottom: 70px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.cta small { font-weight: 700; opacity: .75; flex-basis: 100%; }
.phone { width: min(310px, 78vw); margin-inline: auto; border: 4px solid var(--plum); border-bottom: 0; border-radius: 44px 44px 0 0; overflow: hidden; background: #000; box-shadow: 0 0 0 8px #fff; max-height: 600px; }
.phone img { width: 100%; }

section { padding: 72px 0; }
section > .wrap > h2 { font-size: clamp(2rem, 5vw, 3rem); color: var(--pink); margin-bottom: 10px; }
section > .wrap > .sub { max-width: var(--measure); margin-bottom: 30px; font-weight: 600; }

/* one real day: a clock strip, because the sequence is the point */
.day { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 3px solid var(--plum); border-bottom-width: 8px; border-radius: 26px; overflow: hidden; }
.day li { padding: 22px 20px 24px; border-left: 3px solid var(--plum); }
.day li:first-child { border-left: 0; }
.day li:nth-child(1) { background: #fff3c4; } .day li:nth-child(2) { background: #d9f3ff; } .day li:nth-child(3) { background: #ffe1ef; } .day li:nth-child(4) { background: #3c2a6b; color: #f4ecff; }
.day time { font: 400 1.9rem/1 var(--display); display: block; margin-bottom: 8px; }
.day p { margin: 0; font-size: 1rem; }

.shots { display: grid; grid-auto-flow: column; grid-auto-columns: min(240px, 62vw); gap: 18px; overflow-x: auto; padding: 8px 20px 18px; scroll-snap-type: x mandatory; scroll-padding: 20px; }
.shots figure { margin: 0; scroll-snap-align: start; }
.shots img { border: 3px solid var(--plum); border-bottom-width: 7px; border-radius: 26px; }
.shots figcaption { font-weight: 700; font-size: .95rem; padding: 10px 4px 0; }
.band { background: var(--blush); }

.price { width: 100%; border-collapse: separate; border-spacing: 0; }
.price th, .price td { text-align: left; padding: 14px 12px; border-bottom: 2px dashed rgba(117,25,90,.25); vertical-align: top; }
.price tr:last-child th, .price tr:last-child td { border-bottom: 0; }
.price th { font: 400 1.2rem/1.2 var(--display); width: 34%; }
.price td:last-child { font: 400 1.2rem/1.2 var(--display); white-space: nowrap; text-align: right; color: var(--pink-deep); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.two h3 { font-size: 1.45rem; margin-bottom: 8px; color: var(--blue); }
.two p:last-child { margin-bottom: 0; }

footer { background: var(--ink); color: #ffe6f2; padding: 40px 0 46px; font-size: .98rem; }
footer .wrap { display: flex; gap: 24px 40px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: #fff; font-weight: 700; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 20px; flex-wrap: wrap; }
footer p { margin: 0; max-width: 46ch; }

/* document pages (support, privacy, terms) */
.doc-head { background: linear-gradient(#7fd6f4, #c9f0fb); padding: 120px 0 44px; border-bottom: 3px solid var(--plum); }
.doc-head h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
.doc-head p { margin: 12px 0 0; font-weight: 700; }
.doc { padding: 44px 0 72px; }
.doc .wrap { max-width: 760px; }
.doc h2 { font-size: 1.6rem; color: var(--pink-deep); margin: 2em 0 .5em; }
.doc h3 { font-size: 1.2rem; margin: 1.4em 0 .4em; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1em; } .doc li { margin-bottom: .4em; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .98rem; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border: 2px solid rgba(117,25,90,.25); vertical-align: top; }
.doc th { background: var(--blush); }
.note { background: #fff3c4; border: 3px solid var(--plum); border-radius: 18px; padding: 14px 18px; font-weight: 600; }
details { border: 3px solid var(--plum); border-bottom-width: 6px; border-radius: 20px; background: #fff; margin-bottom: 12px; }
summary { cursor: pointer; padding: 14px 18px; font: 400 1.15rem/1.3 var(--display); list-style-position: inside; }
details > div { padding: 0 18px 14px; } details > div p:last-child { margin-bottom: 0; }
code, .paste { font: 600 .95em ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; border: 2px solid rgba(117,25,90,.25); border-radius: 8px; padding: 1px 6px; overflow-wrap: anywhere; }
pre.paste { padding: 12px 14px; white-space: pre-wrap; font-weight: 500; }

@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; } .hero .pitch { padding-bottom: 10px; text-align: center; } .hero .lede { margin-inline: auto; } .cta { justify-content: center; }
  .day { grid-template-columns: 1fr 1fr; } .day li:nth-child(3) { border-left: 0; } .day li:nth-child(n+3) { border-top: 3px solid var(--plum); }
  .two { grid-template-columns: 1fr; } .top nav a { padding: 6px 10px; font-size: .88rem; }
  .price th { width: auto; } .price td:nth-child(2) { display: none; }
}
@media (max-width: 460px) { .brand span { display: none; } .day { grid-template-columns: 1fr; } .day li { border-left: 0; } .day li:nth-child(n+2) { border-top: 3px solid var(--plum); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the price list on a phone: name and price on one line, what it is underneath */
@media (max-width: 640px) {
  .price, .price tbody { display: block; }
  .price tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 0; border-bottom: 2px dashed rgba(117,25,90,.25); }
  .price tr:last-child { border-bottom: 0; }
  .price th, .price td { padding: 0; border: 0; width: auto; }
  .price td:nth-child(2) { display: block; grid-column: 1 / -1; grid-row: 2; padding-top: 6px; font-size: .97rem; }
}