:root {
  --coral: #e07058;
  --coral-deep: #c4543d;
  --teal: #4f8f88;
  --teal-deep: #2f6560;
  --cream: #fbf5ea;
  --paper: #ffffff;
  --ink: #21201d;
  --ink-soft: #55534e;
  --ink-faint: #86837c;
  --line: #e7e0d3;
  --acorn: #a2703c;
  --radius: 18px;
  --max: 960px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: var(--teal-deep); }

/* ---------- header ---------- */
header.site {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
header.site .wrap { display: flex; align-items: center; gap: 14px; }
header.site img { width: 40px; height: 40px; border-radius: 11px; display: block; }
header.site .name { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
header.site nav { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
header.site nav a { color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 76px 0 64px; text-align: center; }
.hero img.icon {
  width: 108px; height: 108px; border-radius: 26px; margin-bottom: 26px;
  box-shadow: 0 14px 40px rgba(47,101,96,.22);
}
.hero h1 {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  font-weight: 800;
}
.hero p.lede {
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 34px;
}
.badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.badge {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
}
.badge.ghost { background: transparent; color: var(--teal-deep); border: 1.5px solid var(--line); }
.badge.soon { background: #ded6c6; color: var(--ink-faint); cursor: default; }

/* ---------- chat demo ---------- */
.demo {
  max-width: 520px; margin: 54px auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  text-align: left;
  box-shadow: 0 6px 28px rgba(33,32,29,.05);
}
.bubble { padding: 12px 16px; border-radius: 16px; margin-bottom: 12px; font-size: 16px; max-width: 88%; }
.bubble.you { background: var(--teal); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.bubble.stash { background: var(--cream); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble:last-child { margin-bottom: 0; }

/* ---------- sections ---------- */
section { padding: 62px 0; }
section.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(25px, 3.6vw, 32px); letter-spacing: -0.02em; margin: 0 0 10px; font-weight: 750; }
section > .wrap > p.sub { color: var(--ink-soft); margin: 0 0 34px; max-width: 620px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
section.alt .card { background: var(--cream); }
.card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.card .dot {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(224,112,88,.13);
}

/* ---------- legal / doc pages ---------- */
.doc { padding: 54px 0 76px; }
.doc h1 { font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.025em; margin: 0 0 6px; }
.doc .updated { color: var(--ink-faint); font-size: 15px; margin: 0 0 38px; }
.doc h2 { font-size: 21px; margin: 38px 0 10px; }
.doc h3 { font-size: 17px; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 650; }
.doc td { color: var(--ink-soft); }
.callout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 22px 0;
}
.callout p { margin: 0; }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--line);
  padding: 34px 0 54px;
  font-size: 15px;
  color: var(--ink-faint);
}
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
footer.site nav a { color: var(--ink-soft); text-decoration: none; }
footer.site nav a:hover { color: var(--ink); }

@media (max-width: 560px) {
  header.site nav { gap: 15px; font-size: 14px; }
  .hero { padding: 52px 0 44px; }
}

/* ============================================================
   The pantry door intro (index only)

   Runs once per browser session, and never for anyone who has asked their OS for reduced
   motion. Two hard rules shaped how this is built:

   1. It must be impossible for this to hide the page. Every reveal is a pure CSS animation
      with `both` fill, so once the class is on <html> the content appears on schedule even if
      no further JS ever runs. JS only writes the sessionStorage flag.
   2. With JS off, `.play-intro` is never added, the door stays `display:none`, and the page
      renders normally. Crawlers and Play's reviewers see plain HTML.
   ============================================================ */

#doorway { display: none; }

.play-intro #doorway {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 62% 50%;
  /* The room you are stepping into: near-black, green-shifted. */
  background:
    radial-gradient(120% 90% at 50% 45%, #10281f 0%, #0a1712 45%, #040a08 100%);
  animation: doorway-exit .7s cubic-bezier(.4, 0, .2, 1) 2.2s both;
}

/* The camera pushes through the opening. */
.play-intro .doorway-scene {
  position: absolute;
  inset: 0;
  transform-origin: 60% 50%;
  animation: doorway-push 2.35s cubic-bezier(.42, 0, .2, 1) both;
}

/* Warm light spilling around the door's edges before it opens. */
.play-intro .jamb {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px 26px rgba(0, 0, 0, .92);
  background: linear-gradient(90deg, #f6dfae 0%, #caa876 3%, transparent 12%);
}

.play-intro .door {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* Wood: a warm base, then fine vertical grain, then a soft sheen down the middle. */
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .07) 0%, transparent 34%, rgba(0, 0, 0, .16) 100%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .028) 0px, rgba(255, 255, 255, .028) 1px,
      transparent 1px, transparent 4px,
      rgba(0, 0, 0, .045) 4px, rgba(0, 0, 0, .045) 6px,
      transparent 6px, transparent 13px),
    linear-gradient(178deg, #7d5330 0%, #6a4326 40%, #5b3820 72%, #4d2e1a 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 22px 0 70px rgba(0, 0, 0, .55);
  animation: door-swing 1.45s cubic-bezier(.62, .02, .22, 1) .25s both;
}

/* The face darkens as it turns away from the light. Cheap, and sells the 3D more than the
   rotation alone does. */
.play-intro .door::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .1) 55%, transparent 100%);
  opacity: 0;
  animation: door-shade 1.45s cubic-bezier(.62, .02, .22, 1) .25s both;
}

/* Recessed shaker panel. */
.play-intro .door-panel {
  position: absolute;
  inset: 7% 9%;
  border-radius: 3px;
  background: linear-gradient(178deg, rgba(0, 0, 0, .17), rgba(0, 0, 0, .05));
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .5),
    inset 0 -2px 4px rgba(255, 255, 255, .07),
    0 1px 0 rgba(255, 255, 255, .06);
}

/* Brass knob, on the swinging edge. */
.play-intro .door-knob {
  position: absolute;
  right: 5.5%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffeab4 0%, #e0b25c 34%, #a9762c 72%, #6d4718 100%);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .55), inset 0 -1px 3px rgba(0, 0, 0, .4);
}

/* The greeting waiting inside. */
.play-intro .greet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  animation: greet-in 1.3s cubic-bezier(.2, .7, .2, 1) .9s both;
}
.play-intro .greet img {
  width: 92px;
  height: 92px;
  border-radius: 23px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.play-intro .greet h1 {
  margin: 8px 0 0;
  font-size: clamp(40px, 9vw, 68px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #f6f1e4;
}
.play-intro .greet p {
  margin: 0;
  font-size: clamp(13px, 2.6vw, 15px);
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em; /* letter-spacing pads the right side only; nudge back to centre */
  text-transform: uppercase;
  color: #7fb9a2;
}

/* Page content waits behind the door, then rises. Pure CSS, no JS dependency. */
.play-intro .site-content { animation: content-in .75s cubic-bezier(.2, .7, .2, 1) 2.6s both; }

@keyframes door-swing {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-116deg); }
}
@keyframes door-shade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes doorway-push {
  from { transform: scale(1); }
  to   { transform: scale(1.16); }
}
@keyframes greet-in {
  from { opacity: 0; transform: translateY(22px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes doorway-exit {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
@keyframes content-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Belt and braces: even if something adds .play-intro on a reduced-motion machine, nothing
   moves and nothing is ever hidden. */
@media (prefers-reduced-motion: reduce) {
  .play-intro #doorway { display: none; }
  .play-intro .site-content { animation: none; }
}