/* Crease — landing.
 *
 * The same palette as the game: warm paper, dark ink, one vermilion accent.
 * Deliberately not the dark treatment the other Officeball product pages use.
 * Crease's whole art direction is paper, the store screenshots are all warm
 * off-white, and a dark page would be the one surface in the product that
 * argues with them. The accent rule from the game holds here too: vermilion
 * marks a goal or a result, and nothing else. */

:root {
  --paper: #F4EFE6;
  --paper-2: #EDE7DC;
  --shade: #E6DFD2;
  --ink: #1C1A17;
  --soft: #6E675C;
  --faint: #A79E90;
  --accent: #D1462F;
  --accent-soft: #E8A798;
  --crease: #C9C0B0;
  --line: #DCD4C6;
  --radius: 14px;
  --maxw: 60rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.62 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
        "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ───────────────────────────────── nav ───────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem max(1.25rem, calc((100vw - var(--maxw)) / 2));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.brand {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.brand-mark {
  position: relative; display: block; width: 26px; height: 20px;
  border: 1px solid var(--crease); border-radius: 3px;
  background: linear-gradient(to bottom, var(--shade) 0 49%, var(--paper) 51% 100%);
}
.brand-mark i {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: linear-gradient(to bottom, #A63722 0 50%, var(--accent) 50% 100%);
}
.nav-links { display: flex; gap: 1.15rem; }
.nav-links a { color: var(--soft); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

/* ──────────────────────────────── layout ─────────────────────────────── */

main { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

.section { padding: 5.5rem 0; border-top: 1px solid var(--line); }

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--accent);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
}

h1 {
  margin: 1.1rem 0 0;
  font-size: clamp(2.6rem, 8vw, 4.1rem);
  line-height: 1.04; font-weight: 700; letter-spacing: -0.028em;
}
h1 .accent { color: var(--accent); }

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  line-height: 1.16; font-weight: 650; letter-spacing: -0.02em;
}

h3 { margin: 0 0 0.5rem; font-size: 1.06rem; font-weight: 650; }

p { margin: 0 0 1rem; }

.hero { padding: 4.5rem 0 2.75rem; text-align: center; }
.badge {
  display: inline-block; padding: 0.34rem 0.85rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--soft); font-size: 0.83rem;
}
.lede {
  max-width: 34rem; margin: 1.5rem auto 0;
  color: var(--soft); font-size: 1.1rem;
}
.section-lede { max-width: 36rem; color: var(--soft); }

/* ───────────────────────────────── demo ──────────────────────────────── */

.demo-section { padding-bottom: 4.5rem; }

.demo {
  display: flex; flex-direction: column; align-items: center;
  padding: 2.2rem 1.25rem 1.6rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 22px;
}

.device {
  position: relative;
  /* Sized by viewport height as well as width: two 6x7 halves stacked are
     taller than they are wide, and a device sized only by width pushes its own
     controls off the bottom of a laptop screen — which hides the thing the
     demo is demonstrating. */
  width: min(270px, 72vw, 37vh);
  perspective: 950px;
  perspective-origin: 50% 62%;
  touch-action: none;
  cursor: grab;
  outline: none;
  user-select: none; -webkit-user-select: none;
}
.device.dragging { cursor: grabbing; }
.device:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 10px; }

.panel {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  aspect-ratio: var(--cols) / var(--rows);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.panel.far {
  background: var(--shade);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.panel.near { position: relative; }

/* The crease: a hairline with a shadow that deepens as the device closes. */
.crease-line {
  height: 14px; margin: 0 -6px;
  background:
    linear-gradient(to bottom,
      rgba(28,26,23,calc(0.06 + 0.30 * var(--fold, 0))) 0%,
      rgba(28,26,23,0) 78%);
  border-top: 1px solid var(--crease);
}

.cell {
  position: relative;
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0;
  background: transparent;
  border: 0.5px solid rgba(110,103,92,0.17);
  cursor: pointer;
}
.cell::before, .cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* Static cells. Every type is a distinct SHAPE, never a colour alone, so the
   board reads with colour removed. */
.k-slot::before {
  inset: 18%; border: 1px dashed rgba(110,103,92,0.7); border-radius: 3px;
}
.k-anchor::before {
  inset: 18%; border: 1px dashed rgba(110,103,92,0.7); border-radius: 50%;
}
.k-target::before {
  inset: 17%; border: 2.5px solid var(--accent); border-radius: 50%;
}
.k-source::before {
  inset: 22%; background: var(--accent); border-radius: 50%;
}
.k-wall::before {
  inset: 7%;
  background:
    repeating-linear-gradient(45deg,
      var(--ink) 0 1.2px, transparent 1.2px 5px),
    rgba(28,26,23,0.10);
}

/* Pieces. */
.cell.piece::after {
  inset: 16%; background: var(--ink); border-radius: 12%;
}
.cell.piece.held::after { box-shadow: 0 0 0 2px var(--accent); }
/* A locked piece is hollow with a heavy edge: in a level that locks on commit,
   which pieces are still yours to move is the most important thing on the board,
   and shape survives in greyscale where a colour change would not. */
.cell.piece.carried::after {
  background: var(--paper);
  box-shadow: inset 0 0 0 3px var(--ink);
}

/* What the fold brings over, at an opacity that ramps with the notch. */
.cell.ghost-piece::after {
  inset: 16%; border-radius: 12%;
  background: rgba(28,26,23, calc(0.24 + 0.58 * var(--ghost, 0)));
}
.cell.ghost-wall::before {
  inset: 7%;
  background:
    repeating-linear-gradient(45deg,
      rgba(28,26,23, calc(0.3 + 0.6 * var(--ghost,0))) 0 1.2px, transparent 1.2px 5px),
    rgba(28,26,23, calc(0.05 + 0.08 * var(--ghost,0)));
}
.cell.ghost-slot::before {
  inset: 18%; border: 1px dashed rgba(110,103,92, calc(0.25 + 0.5 * var(--ghost,0)));
  border-radius: 3px;
}
.cell.ghost-target::before {
  inset: 17%; border: 2.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 50%;
}
.cell.ghost-source::before {
  inset: 22%; background: color-mix(in srgb, var(--accent) 75%, transparent); border-radius: 50%;
}

/* A delivery a wall is refusing: the fold tried, the wall said no. Three levels
   turn on this and 34 of the 60 can produce it, and it used to look identical to
   an empty square. Drawn over a paper backing so it reads against the wall's
   hatching rather than disappearing into it. Ink, not vermilion — the accent
   marks goals only. */
.cell.refused::after {
  inset: 14%;
  border: 2.5px solid rgba(28,26,23,0.85);
  border-radius: 12%;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1.4px),
      rgba(28,26,23,0.85) calc(50% - 1.4px), rgba(28,26,23,0.85) calc(50% + 1.4px),
      transparent calc(50% + 1.4px)),
    var(--paper);
}

/* The beam, and a target it has already marked. */
.cell.lit::after {
  inset: 34%; background: var(--accent-soft); border-radius: 50%;
}
.cell.marked::after {
  inset: 24%; background: var(--accent); border-radius: 50%;
}

/* The board and the handle that folds it. The handle is a real button rather
   than decoration: on a first visit nothing on a static board says "this is
   draggable", and a visitor who does not discover the drag never sees the one
   thing the page exists to show. */
.device-wrap { position: relative; display: flex; align-items: center; }

.grip {
  position: absolute; right: -54px; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 46px; padding: 7px 0 5px; margin-top: -24px;
  font: inherit; color: var(--accent);
  background: var(--paper);
  border: 1px solid var(--accent-soft);
  border-radius: 12px;
  cursor: grab; touch-action: none;
}
.grip:active { cursor: grabbing; }
.grip-label { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.grip.calling { animation: call 2.1s ease-in-out infinite; }
@keyframes call {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 transparent; }
  45% { transform: translateY(-5px); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-soft) 30%, transparent); }
  70% { transform: translateY(0); }
}

/* The board tells you when the angle you are at would actually do something. */
.device.ready .panel.near { box-shadow: 0 0 0 2px var(--accent-soft); }

.device.nudge { animation: nudge 0.26s ease; }
@keyframes nudge {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.device.solved .panel.near { animation: settle 0.9s ease; }
@keyframes settle {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  40% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-soft) 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.goal {
  margin: 0 0 1.2rem; max-width: 26rem;
  font-size: 1.04rem; font-weight: 600; text-align: center;
}

.coach {
  min-height: 2.9em;
  margin: 1.4rem 0 0.2rem; max-width: 27rem;
  color: var(--soft); font-size: 0.99rem; text-align: center;
}
.coach b { color: var(--ink); }
.coach.done b { color: var(--accent); }

.steps {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: center;
  max-width: 44rem;
  margin: 0.5rem 0 0.2rem; padding: 0;
  list-style: none;
  color: var(--soft); font-size: 0.83rem;
}
.steps li { display: flex; align-items: center; gap: 0.45rem; }
.steps em { font-style: normal; font-weight: 600; color: var(--ink); }
.steps b {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  background: var(--accent); color: var(--paper);
  border-radius: 50%; font-size: 0.71rem; font-weight: 700;
}

.demo-sub {
  margin: 0.2rem 0 0; max-width: 29rem;
  color: var(--soft); font-size: 0.85rem; text-align: center;
}

.demo-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.4rem; }
.solid-btn {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 0.42rem 1.1rem; cursor: pointer;
}
.solid-btn:disabled { opacity: 0.5; cursor: default; }

.notches { display: flex; gap: 6px; margin: 1.15rem 0 0.55rem; }
.notch {
  width: 33px; height: 40px;
  font: inherit; font-size: 0.83rem; font-weight: 500;
  color: var(--soft);
  background: rgba(110,103,92,0.10);
  border: 0; border-radius: 6px; cursor: pointer;
}
.notch.on { background: var(--ink); color: var(--paper); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 1.5rem 0 0; }
.tab-group {
  flex-basis: 100%;
  margin: 0.7rem 0 0.1rem;
  color: var(--accent); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-align: center;
}
.tab {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 0.5rem 0.9rem;
  font: inherit; text-align: left;
  background: transparent;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.tab .tab-n { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.tab .tab-d { font-size: 0.78rem; color: var(--soft); }
.tab.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tab.on .tab-n { color: var(--accent); }

.ghost-btn {
  font: inherit; font-size: 0.86rem; color: var(--soft);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.33rem 0.9rem; cursor: pointer;
}
.ghost-btn:hover { color: var(--ink); border-color: var(--crease); }
.demo-hint {
  margin: 1.2rem 0 0; padding-top: 1rem; width: 100%;
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: 0.85rem; text-align: center;
}

.demo-note {
  max-width: 34rem; margin: 1.8rem auto 0;
  color: var(--soft); font-size: 0.95rem; text-align: center;
}

/* ──────────────────────────────── hinge ──────────────────────────────── */

.postures {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem;
  margin: 2rem 0 2.2rem;
}
.postures figure {
  margin: 0; padding: 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2);
}
.postures figure.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.posture-art { color: var(--faint); }
.postures figure.on .posture-art { color: var(--soft); }
.posture-art svg { width: 100%; height: auto; display: block; }
.postures figcaption { margin-top: 0.6rem; font-size: 0.88rem; }
.postures figcaption b { display: block; }
.postures figure.on figcaption b { color: var(--accent); }
.postures figcaption span { color: var(--soft); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 2rem; }
.two-col p { margin: 0; color: var(--soft); }
.two-col b { color: var(--ink); }

.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.compare > div {
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.compare > div.on { border-color: var(--accent); }
.compare b { display: block; }
.compare .who { display: block; margin-bottom: 0.45rem; color: var(--faint); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
.compare p { margin: 0; color: var(--soft); font-size: 0.93rem; }
.compare > div.on b { color: var(--accent); }

.aside {
  margin: 1.8rem 0 0; padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-2); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--soft); font-size: 0.95rem;
}

/* ──────────────────────────────── verbs ──────────────────────────────── */

.verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 1.8rem; }
.verbs article {
  padding: 1.05rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2);
}
.verbs article.quiet { background: transparent; border-style: dashed; }
.verbs .n { display: block; margin-bottom: 0.35rem; font-weight: 650; color: var(--accent); }
.verbs article.quiet .n { color: var(--soft); }
.verbs p { margin: 0; color: var(--soft); font-size: 0.93rem; }

/* ──────────────────────────────── plainly ────────────────────────────── */

.plain { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.8rem; }
.plain article { padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); }
.plain p { color: var(--soft); font-size: 0.96rem; }
.plain p:last-child { margin-bottom: 0; }
.plain b { color: var(--ink); }
.plain .small { font-size: 0.87rem; color: var(--faint); }

.price {
  margin-top: 1.4rem; padding: 1.4rem 1.5rem;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-2);
}
.price-head { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.price p:last-child { margin-bottom: 0; color: var(--soft); }

/* ──────────────────────────────── close ──────────────────────────────── */

.close { padding: 5.5rem 0 4rem; border-top: 1px solid var(--line); text-align: center; }
.close p { color: var(--soft); }
.close .muted { font-size: 0.9rem; color: var(--faint); }

.foot {
  display: flex; justify-content: space-between; gap: 1rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.3rem 1.25rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: 0.86rem;
}
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ────────────────────────── support / privacy ────────────────────────── */

.doc { max-width: 38rem; margin: 0 auto; padding: 3.5rem 0 4rem; }
.back { display: inline-block; margin-bottom: 1.6rem; color: var(--soft); text-decoration: none; }
.back:hover { color: var(--ink); }
.doc h1 { font-size: clamp(2rem, 6vw, 2.7rem); margin: 0 0 0.4rem; }
.doc h2 { font-size: 1.05rem; margin: 2rem 0 0.4rem; }
.doc p { color: var(--soft); }
.doc .lede { margin: 0 0 1.4rem; text-align: left; }
dt { margin-top: 1.15rem; font-weight: 600; }
dd { margin: 0.2rem 0 0; color: var(--soft); }

/* ─────────────────────────────── responsive ──────────────────────────── */

@media (max-width: 760px) {
  .nav-links { display: none; }
  .postures, .compare, .verbs, .two-col, .plain { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 0; }
  .hero { padding: 3rem 0 2rem; }
  .notch { width: 30px; height: 38px; }
  .grip { right: -48px; width: 40px; }
  .steps { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .device.nudge, .device.solved .panel.near { animation: none; }
}