/* teenytail.com — one shell for every app. Warm-neutral paper, near-black ink,
   Bricolage Grotesque for headings and Figtree for reading, both served from
   this site (no font service sees the visitor). Each app brings its own colour
   to its own pages and nowhere else. Designed on the Claude Design canvas. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-800.woff2) format('woff2');
}
@font-face {
  font-family: Figtree;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-400.woff2) format('woff2');
}
@font-face {
  font-family: Figtree;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-600.woff2) format('woff2');
}
@font-face {
  font-family: Figtree;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/figtree-700.woff2) format('woff2');
}

:root {
  --paper: #f4f3ef;
  --surface: #ffffff;
  --ink: #16161a;
  --ink-soft: #3a3a42;
  --muted: #5d5d66;
  --line: #e2e0d9;
  /* Waymark: its own red on its own dark ground (the app is dark by default). */
  --waymark: #ec3013;
  --waymark-ink: #ae1800;
  --waymark-pale: #fff2ef;
  --waymark-night: #17161b;
  --waymark-card: #242329;
  /* TeenyTail: the design system's coral (src/design/tokens.css). White text
     sits on coral-deep, which clears 4.5:1; coral itself does not. */
  --teenytail: #f2703a;
  --teenytail-deep: #be4919;
  --teenytail-ink: #a83f10;
  --teenytail-pale: #fff1ea;
  --meter: #0f4f4a;
  --meter-pale: #e3f1ef;
  --lit: #ffb020;
  --r: 22px;
  --display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --text: Figtree, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
}
a {
  color: var(--ink);
  text-underline-offset: 3px;
}
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}
img {
  max-width: 100%;
}
h1,
h2,
h3 {
  font-family: var(--display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.04;
}
h2 {
  font-size: clamp(26px, 3.2vw, 38px);
}
h3 {
  font-size: 22px;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: 12px;
  z-index: 10;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-block: 22px;
}
.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
}
/* Text only for now: the user asked for no logo mark (7 Oct 2026). */
.menu {
  display: flex;
  gap: 6px;
}
.menu a {
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.menu a:hover {
  color: var(--ink);
}
.menu a[aria-current] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead,
.lede {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0;
}
.note {
  margin: 0;
  color: var(--ink-soft);
}
.small {
  font-size: 15px;
  color: var(--muted);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 80px;
}
.rule {
  border-top: 1px solid var(--line);
  padding-top: 48px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
a.card {
  transition: box-shadow 0.15s;
}
a.card:hover {
  box-shadow:
    0 0 0 1px var(--line),
    0 14px 30px rgba(22, 22, 26, 0.07);
}
.card p {
  margin: 0;
  color: var(--ink-soft);
}
.pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #ededf1;
  color: var(--ink-soft);
}
.pill.waymark {
  background: var(--waymark-pale);
  color: var(--waymark-ink);
}
.pill.teenytail {
  background: var(--teenytail-pale);
  color: var(--teenytail-ink);
}
.pill.meter {
  background: var(--meter-pale);
  color: var(--meter);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 0;
}
.btn.dark {
  background: var(--ink);
  color: #ffffff;
}
.btn.line {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn.light {
  background: #ffffff;
  color: var(--ink);
}
.btn.soon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* ── App icons ────────────────────────────────────────────────────────────── */
.appicon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  flex: none;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.appicon img {
  width: 100%;
  height: 100%;
  display: block;
}
.appicon.waymark {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.appicon.teenytail {
  background: var(--teenytail);
}
.appicon.teenytail img {
  width: auto;
  height: 66%;
  margin-left: 6%;
}
.appicon.meter {
  background: var(--meter);
}
.appicon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.appicon.meter svg {
  width: 100%;
  height: 100%;
}
.appicon.lg {
  width: 72px;
  height: 72px;
  border-radius: 20px;
}

/* The apartment app: a building whose arched roof is a meter dial; one
   window is yours, lit. Where it is "live", the needle reads and lights come on. */
.lit .w {
  fill: var(--meter);
}
.lit .w.on {
  fill: var(--lit);
}
.lit.live .needle {
  animation: needle-read 3.2s ease-in-out infinite;
  transform-origin: 24px 22px;
}
.lit.live .w:not(.on) {
  animation: window-on 6s infinite;
}
.lit.live .w:nth-of-type(3) {
  animation-delay: 1.4s;
}
.lit.live .w:nth-of-type(4) {
  animation-delay: 2.9s;
}
@keyframes needle-read {
  0%,
  100% {
    transform: rotate(-70deg);
  }
  45%,
  70% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(-8deg);
  }
}
@keyframes window-on {
  0%,
  30%,
  100% {
    fill: var(--meter);
  }
  40%,
  62% {
    fill: #ffd27a;
  }
}

/* ── Luffy ────────────────────────────────────────────────────────────────── */
/* Made with ChatGPT from the real dog's photos and cut into layers (site/luffy):
   tail behind, body, head, and the collar on top hiding the head's seam. */
.luffy {
  position: relative;
  aspect-ratio: 1175 / 1338;
  width: 100%;
}
.luffy .bob {
  position: absolute;
  inset: 0;
  transform-origin: 50% 95%;
  animation: l-breathe 3s ease-in-out infinite;
}
.luffy img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.luffy .tail {
  transform-origin: 25.5% 92.7%;
  animation: l-wag 0.42s ease-in-out infinite alternate;
}
.luffy .head {
  transform-origin: 51.1% 44.8%;
  animation: l-tilt 6s ease-in-out infinite;
}
.pet:hover .luffy .bob {
  animation: l-hop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
.pet:hover .luffy .tail {
  animation-duration: 0.18s;
}
@keyframes l-breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.008, 0.992);
  }
}
/* The tail's root is hidden behind the back leg in the picture, so it only
   sways inward from where it was drawn, skewing from the floor so its base
   never lifts; turning it would show the cut or the floor. */
@keyframes l-wag {
  from {
    transform: skewX(0);
  }
  to {
    transform: skewX(-9deg);
  }
}
@keyframes l-tilt {
  0%,
  40%,
  100% {
    transform: rotate(0);
  }
  50%,
  70% {
    transform: rotate(-4deg);
  }
  80%,
  90% {
    transform: rotate(2deg);
  }
}
@keyframes l-hop {
  0%,
  100% {
    transform: translateY(0) scale(1.03, 0.97);
  }
  45% {
    transform: translateY(-9%) scale(0.98, 1.02);
  }
  70% {
    transform: translateY(-2%);
  }
}
.bubble {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--line),
    0 10px 24px rgba(22, 22, 26, 0.08);
  border-radius: 18px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  animation: bubble-in 5s ease-in-out infinite;
}
@keyframes bubble-in {
  0%,
  8% {
    opacity: 0;
    transform: translateY(6px);
  }
  14%,
  78% {
    opacity: 1;
    transform: none;
  }
  86%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ── Home ─────────────────────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-end;
  padding: 64px 0 80px;
}
.hero > .stack {
  flex: 999 1 520px;
  min-width: 0;
  gap: 24px;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  max-width: 14ch;
}
.pet {
  flex: 1 1 300px;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pet .luffy {
  width: 62%;
  margin-bottom: -18px;
  z-index: 1;
}
.shelf {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 26px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--line),
    0 18px 40px rgba(22, 22, 26, 0.08);
}
.shelf .appicon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
}
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.promises h3 {
  margin-bottom: 6px;
}
.promises p {
  margin: 0;
  color: var(--ink-soft);
}
.band {
  margin: 24px 0 88px;
  padding: 44px;
  border-radius: 28px;
  background: var(--ink);
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.band > div {
  flex: 1 1 420px;
  min-width: 0;
}
.band h2 {
  color: #ffffff;
  font-size: clamp(26px, 3vw, 34px);
}
.band p {
  margin: 10px 0 0;
  color: #cfcfd6;
}

/* ── An app's page ────────────────────────────────────────────────────────── */
.apphero {
  margin: 24px 0 72px;
  padding: 56px;
  border-radius: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}
.apphero > .stack {
  flex: 999 1 460px;
  min-width: 0;
}
.apphero h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
}
.apphero .lead {
  max-width: 38ch;
}
.apphero > .art {
  flex: 1 1 260px;
  display: flex;
  justify-content: center;
}
.apphero.teenytail {
  background: var(--teenytail-deep);
  color: #ffffff;
}
.apphero.teenytail .kicker,
.apphero.teenytail .lead {
  color: rgba(255, 255, 255, 0.9);
}
.apphero.waymark {
  background: var(--waymark-night);
  color: #f4f3f2;
}
.apphero.waymark .kicker {
  color: #ff9783;
}
.apphero.waymark .lead {
  color: #c9c6cc;
}
.apphero.waymark .pill.waymark {
  background: rgba(255, 255, 255, 0.1);
  color: #f4f3f2;
}
.apphero.waymark .phone {
  background: var(--waymark-card);
  color: #f4f3f2;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.apphero.waymark .phone .s {
  color: #8b8891;
}
.apphero.waymark .phone .lb.me {
  background: rgba(236, 48, 19, 0.2);
}
.apphero.meter {
  background: var(--meter);
  color: #ffffff;
}
.apphero.meter .kicker,
.apphero.meter .lead {
  color: rgba(255, 255, 255, 0.88);
}
.brandmark {
  height: 64px;
  width: auto;
  align-self: flex-start;
}
.phone {
  width: 240px;
  height: 440px;
  border-radius: 40px;
  background: #ffffff;
  color: var(--ink);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 30px 60px rgba(22, 22, 26, 0.18);
}
.phone strong.t {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
}
.phone .s {
  font-size: 12px;
  color: var(--muted);
}
.phone .media {
  flex: none;
  height: 150px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone .lb {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.phone .lb.me {
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  background: var(--waymark-pale);
}
.reading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reading > div {
  padding: 18px 20px;
  border-radius: 20px;
}
.reading .num {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 48px 0 88px;
  border-top: 1px solid var(--line);
}
.split > :first-child {
  flex: 1 1 320px;
  min-width: 0;
}
.split > :last-child {
  flex: 2 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ask {
  margin: 0 0 88px;
  padding: 36px 40px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.ask > div {
  flex: 1 1 420px;
  min-width: 0;
}

/* ── Documents: privacy, terms, help, deleting an account ─────────────────── */
.doc {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  padding: 48px 0 88px;
}
.doc aside {
  flex: 0 1 220px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}
.doc aside a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 15px;
}
.doc aside a:hover {
  color: var(--ink);
}
.prose {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 72ch;
}
.prose h1 {
  margin-bottom: 14px;
}
.prose h2 {
  font-size: 26px;
  margin: 40px 0 10px;
  scroll-margin-top: 24px;
}
.prose h3 {
  margin: 28px 0 8px;
  font-size: 20px;
}
.prose p,
.prose li {
  color: var(--ink-soft);
}
.prose ul {
  padding-left: 22px;
}
.prose li {
  margin: 6px 0;
}
.prose .card {
  margin: 18px 0;
}
.short {
  margin: 24px 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.short strong {
  font-family: var(--display);
  font-size: 18px;
}
.short ul {
  margin: 10px 0 0;
}
.steps {
  gap: 18px;
}
.step {
  display: flex;
  gap: 14px;
  align-items: center;
}
.step b {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
details {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line);
  padding: 18px 22px;
}
summary {
  font-weight: 700;
  cursor: pointer;
}
details p {
  margin: 10px 0 0;
  color: var(--ink-soft);
}
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── About and support ────────────────────────────────────────────────────── */
.about {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  padding: 56px 0 88px;
  align-items: flex-start;
}
.about figure {
  flex: 0 1 300px;
  min-width: 220px;
  margin: 0;
}
.about figure .luffy {
  width: 100%;
  margin: 0;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: 0 0 0 1px var(--line);
}
.about figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.give {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding-bottom: 56px;
}
.qr {
  background: #ffffff;
  padding: 10px;
  border-radius: 14px;
  line-height: 0;
  box-shadow: 0 0 0 1px var(--line);
}
.costs {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line);
  padding: 8px 24px;
}
.costs div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.costs div:last-child {
  border-bottom: 0;
}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 32px 0 96px;
}
.lost {
  max-width: none;
}
.lost .luffy {
  width: 200px;
  margin: 0;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 40px 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  justify-content: space-between;
  font-size: 15px;
  color: var(--muted);
}
.foot > div:first-child {
  max-width: 320px;
}
.foot h2 {
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: 0;
}
.foot a {
  display: block;
  text-decoration: none;
  color: var(--muted);
  padding: 3px 0;
}
.foot a:hover {
  color: var(--ink);
}
.foot p {
  margin: 12px 0 0;
}
.foot .attrib {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}

/* ── Phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .wrap {
    padding: 0 16px;
  }
  .top {
    padding-block: 14px;
  }
  /* An app's five links scroll sideways rather than wrap; the main four fit. */
  .menu {
    width: calc(100% + 32px);
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 12px;
    gap: 2px;
  }
  .menu a {
    padding: 8px 10px;
    font-size: 14px;
  }
  .menu::-webkit-scrollbar {
    display: none;
  }
  .hero {
    padding: 24px 0 48px;
    gap: 32px;
  }
  .pet {
    max-width: 300px;
  }
  .apphero {
    padding: 28px 22px;
    border-radius: 24px;
    margin-bottom: 48px;
  }
  .band,
  .ask {
    padding: 28px 22px;
    border-radius: 24px;
  }
  .section,
  .doc,
  .about {
    padding-bottom: 56px;
  }
  .doc {
    padding-top: 16px;
    gap: 24px;
  }
  .doc aside {
    position: static;
  }
  /* On a phone the contents list would push the text a screen down. */
  .doc aside .kicker,
  .doc aside a {
    display: none;
  }
  .card {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luffy .bob,
  .luffy img,
  .bubble,
  .lit.live .w,
  .lit.live .needle {
    animation: none !important;
  }
}