/* Salon Space Planner landing. "Ice and cocoa": ice-blue surfaces, cocoa ink and plan lines,
   azure for actions, paprika only for conflicts, leaf for "fine". No script, no external files. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ice: #e3eff5;
  --ice-soft: #f1f7fa;
  --white: #ffffff;
  --floor: #fffdf8;
  --cocoa: #33221a;
  --cocoa-soft: #6a564b;
  --line: #c5d9e4;
  --azure: #1672b0;
  --azure-dark: #0f5788;
  --azure-soft: #d2e7f3;
  --azure-light: #7cc4f0;
  --paprika: #c2331c;
  --leaf: #2c7a4b;
  --leaf-soft: #d9efdf;
  --bed: #f3ddbf;
  --zone-storage: #9a6b1f;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --text: "Figtree", "Segoe UI", system-ui, sans-serif;

  --gutter: 24px;
  --section: clamp(64px, 9vw, 120px);
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--cocoa);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

a {
  color: var(--azure-dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cocoa);
}

:focus-visible {
  outline: 3px solid var(--azure);
  outline-offset: 3px;
  border-radius: 4px;
}

.nw {
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(1180px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--cocoa);
  color: var(--white);
  border-radius: var(--r-s);
}

.skip-link:focus {
  top: 12px;
  color: var(--white);
}

/* Small label in the shape of the app's distance plate */
.plate {
  display: inline-block;
  padding: 5px 10px 4px;
  background: var(--azure);
  color: var(--white);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plate--light {
  background: var(--azure-light);
  color: var(--cocoa);
}

.plate + h2,
.plate + h1 {
  margin-top: 18px;
}

.lead {
  margin-top: 18px;
  max-width: 58ch;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--cocoa-soft);
}

.aside-note {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 3px solid var(--line);
  max-width: 62ch;
  font-size: 0.95rem;
  color: var(--cocoa-soft);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--cocoa);
}

.textlink--light {
  margin-top: 22px;
  color: var(--ice);
}

.textlink--light:hover {
  color: var(--white);
}

.ticks {
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 26px;
}

/* A plan tick: short dimension mark */
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 14px;
  height: 2px;
  background: var(--azure);
}

.ticks li::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.78em - 4px);
  width: 2px;
  height: 10px;
  background: var(--azure);
}

/* Header */
.top {
  background: var(--ice);
  border-bottom: 1px solid var(--line);
}

.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  flex-wrap: wrap;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--cocoa);
  text-decoration: none;
}

.brand__name {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand__icon {
  flex: none;
  border-radius: 9px;
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin-inline: -10px;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--cocoa);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-s);
}

.menu a:hover {
  background: var(--azure-soft);
}

.menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--azure);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Google Play button */
.play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px;
  background: var(--azure);
  color: var(--white);
  border: 2px solid var(--azure);
  border-radius: var(--r-m);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.play:hover {
  background: var(--azure-dark);
  border-color: var(--azure-dark);
  color: var(--white);
}

.play--soon,
.play--soon:hover {
  background: var(--white);
  color: var(--cocoa);
  border: 2px dashed var(--cocoa);
  cursor: default;
}

.play--big {
  min-height: 60px;
  padding-inline: 28px;
  font-size: 1.1rem;
}

.play svg {
  flex: none;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 22px;
  background: var(--azure);
  color: var(--white);
  border-radius: var(--r-m);
  font-weight: 600;
  text-decoration: none;
}

.button:hover {
  background: var(--azure-dark);
  color: var(--white);
}

/* App captures: no phone frame, a plan-line outline */
.screen {
  overflow: hidden;
  background: var(--ice);
  border: 2px solid var(--cocoa);
  border-radius: var(--r-l);
}

.screen--onDark {
  border-color: var(--ice);
}

.screen__img {
  width: 100%;
}

/* The editor's grid as a page ground */
.hero,
.pagehead,
.get,
.missing {
  background-color: var(--ice);
  background-image: linear-gradient(rgba(22, 114, 176, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 114, 176, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(22, 114, 176, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 114, 176, 0.06) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

/* Hero */
.hero {
  padding-block: clamp(40px, 6vw, 76px) clamp(56px, 7vw, 96px);
}

.hero__title {
  margin-top: 22px;
  font-size: clamp(2.5rem, 0.9rem + 6.6vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: wrap;
}

.hero__title span {
  display: block;
}

.hero__title-accent {
  color: var(--azure);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px minmax(0, 296px);
  gap: 48px;
  align-items: start;
  margin-top: clamp(32px, 5vw, 60px);
}

.hero__lead {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.5;
  max-width: 34ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}

.hero__note {
  margin-top: 14px;
  max-width: 40ch;
  font-size: 0.92rem;
  color: var(--cocoa-soft);
}

.readout {
  padding: 22px 22px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}

.readout__title {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.readout__name {
  margin-top: 4px;
  font-size: 0.95rem;
  color: var(--cocoa-soft);
}

.readout__list {
  margin-top: 14px;
}

.readout__list > div {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.readout__list dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

.readout__list dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 2px;
}

.readout__list strong {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.readout__list span {
  font-size: 0.95rem;
  color: var(--cocoa-soft);
}

.readout__foot {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--cocoa-soft);
}

/* Measuring tape with the four plain facts */
.tape {
  background: var(--floor) url("/assets/brand/tape-cocoa.svg") repeat-x left top;
  border-block: 2px solid var(--cocoa);
  padding-block: 34px 24px;
}

.tape__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 32px;
}

.tape__list li {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tape__mark {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--azure-dark);
}

/* Three steps */
.steps {
  padding-block: var(--section);
}

.steps .wrap {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 32px 48px;
  align-items: start;
}

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps__list li {
  padding: 0 28px 4px;
  border-left: 1px solid var(--line);
}

.steps__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(3.6rem, 2rem + 5vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px var(--cocoa);
}

.steps__list h3 {
  margin-top: 18px;
  font-size: 1.3rem;
}

.steps__list p {
  margin-top: 8px;
  color: var(--cocoa-soft);
}

/* Room */
.room {
  padding-block: var(--section);
  background: var(--ice);
}

.room__grid,
.compare__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px 72px;
  align-items: center;
}

.spec {
  margin-top: 32px;
  border-bottom: 1px solid var(--cocoa);
}

.spec > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--cocoa);
}

.spec dt {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
}

.spec dd {
  color: var(--cocoa-soft);
}

/* Editor */
.editor {
  padding-block: var(--section);
}

.editor__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px 56px;
  align-items: start;
  margin-top: 40px;
}

.fragment__crop {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ice);
  border: 2px solid var(--cocoa);
  border-radius: var(--r-l);
}

.fragment__crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 47%;
}

.fragment figcaption {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--cocoa-soft);
  max-width: 62ch;
}

.editor__side h3 {
  font-size: 1.3rem;
}

.editor__side h3:not(:first-child) {
  margin-top: 36px;
}

.editor__side .ticks,
.legend {
  margin-top: 16px;
}

.legend {
  display: grid;
  gap: 12px;
}

.legend__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.legend__swatch {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 6px;
}

.legend__item--paprika .legend__swatch {
  background: repeating-linear-gradient(45deg, var(--paprika) 0 2px, #f9ddd6 2px 6px);
  border: 2px solid var(--paprika);
}

.legend__item--azure .legend__swatch {
  background: var(--azure-soft);
  border: 2px dashed var(--azure);
}

.legend__item--leaf .legend__swatch {
  background: var(--leaf-soft);
  border: 2px solid var(--leaf);
}

.editor__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 2px solid var(--cocoa);
}

.editor__cols p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--cocoa-soft);
}

/* Zones, export, photos: the cocoa poster ground of the store graphics */
.extras,
.own,
.reach {
  background: var(--cocoa) url("/assets/brand/tape-ice.svg") repeat-x left top;
  color: var(--ice);
}

.extras :focus-visible,
.own :focus-visible,
.reach :focus-visible {
  outline-color: var(--azure-light);
}

.extras {
  padding-block: var(--section);
}

.extras__grid {
  display: grid;
  grid-template-columns: 300px 300px minmax(0, 1fr);
  gap: 48px 56px;
  align-items: start;
  margin-top: 44px;
}

.extras__item h3,
.extras__more h3 {
  font-size: 1.4rem;
  color: var(--white);
}

.extras__item h3 {
  margin-top: 22px;
  text-wrap: wrap;
}

.extras__item p,
.extras__more p {
  margin-top: 10px;
  color: #d5e3ea;
}

.extras__item .extras__label {
  margin-top: 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azure-light);
}

.zones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.zones__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--floor);
  color: var(--cocoa);
  border-radius: var(--r-s);
  font-size: 0.95rem;
  font-weight: 600;
}

.zones__chip span {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--azure);
}

.zones__chip--storage span {
  background: var(--zone-storage);
}

.zones__chip--waiting span {
  background: var(--leaf);
}

.extras__more {
  display: grid;
  gap: 28px;
}

.extras__more article {
  padding-top: 22px;
  border-top: 1px solid rgba(227, 239, 245, 0.35);
}

/* Compare */
.compare {
  padding-block: var(--section);
  background: var(--ice);
}

.ab {
  width: 100%;
  max-width: 640px;
  margin-top: 10px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
}

.ab__label {
  margin-top: 32px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

.ab th,
.ab td {
  padding: 12px 14px;
  text-align: center;
  border-top: 1px solid var(--line);
}

.ab thead th,
.ab thead td {
  border-top: 0;
}

.ab tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--cocoa-soft);
}

.ab tbody td {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  white-space: nowrap;
}

.ab__col {
  font-family: var(--display);
  font-weight: 600;
  color: var(--white);
}

.ab__col--a {
  background: var(--cocoa);
}

.ab__col--b {
  background: var(--azure-dark);
}

.ab__best {
  display: inline-block;
  padding: 2px 12px;
  background: var(--leaf-soft);
  color: var(--leaf);
  border-radius: var(--r-s);
}

/* Budget */
.budget {
  padding-block: var(--section);
}

.budget__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 40px 72px;
  align-items: center;
}

.sum {
  max-width: 640px;
  margin-top: 30px;
  padding: 24px;
  background: var(--ice-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}

.sum__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

.sum__planned {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 20px;
  margin-top: 8px;
}

.sum__planned span {
  font-weight: 500;
}

.sum__planned strong {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}

.sum__bar {
  height: 10px;
  margin-top: 14px;
  background: var(--line);
  border-radius: 5px;
  overflow: hidden;
}

/* 189 000 Ft of 650 690 Ft is already bought: 29 % */
.sum__bar span {
  display: block;
  width: 29%;
  height: 100%;
  background: var(--leaf);
}

.sum__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 16px;
}

.sum__rows > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.sum__rows dd {
  font-weight: 600;
  white-space: nowrap;
}

.sum__rows .is-leaf dd {
  color: var(--leaf);
}

.budget__copy .ticks {
  margin-top: 26px;
}

/* Limits */
.limits {
  padding-block: var(--section);
  background: var(--ice-soft);
  border-top: 1px solid var(--line);
}

.limits__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px 72px;
  align-items: start;
}

.limits__list > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--cocoa);
}

.limits__list > div:last-child {
  border-bottom: 1px solid var(--cocoa);
}

.limits__list dt {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
}

/* Privacy summary */
.own {
  padding-block: var(--section);
}

.own h2,
.extras h2,
.reach h2 {
  color: var(--white);
}

.own .lead,
.reach .lead {
  color: #d5e3ea;
}

.own__grid,
.reach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px 72px;
  align-items: center;
}

.own__points li {
  position: relative;
  padding: 18px 0 18px 40px;
  border-top: 1px solid rgba(227, 239, 245, 0.35);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}

.own__points li:last-child {
  border-bottom: 1px solid rgba(227, 239, 245, 0.35);
}

.own__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  width: 16px;
  height: 9px;
  border-left: 3px solid var(--azure-light);
  border-bottom: 3px solid var(--azure-light);
  transform: rotate(-45deg);
}

/* Download */
.get {
  padding-block: var(--section);
}

.get__in {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px 36px;
  align-items: start;
}

.get__in > * {
  grid-column: 2;
}

.get__icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  border-radius: 20px;
}

.get__actions {
  margin-top: 16px;
}

.get__note {
  max-width: 48ch;
  font-size: 0.92rem;
  color: var(--cocoa-soft);
}

.get__contact {
  margin-top: 10px;
}

/* Footer */
.foot {
  background: var(--white);
  border-top: 2px solid var(--cocoa);
  font-size: 0.98rem;
}

.foot__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 32px 48px;
  padding-block: 48px 36px;
}

.foot__brand p {
  margin-top: 8px;
  max-width: 34ch;
  color: var(--cocoa-soft);
}

.foot__nav a,
.foot__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--cocoa);
}

.foot__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
  min-height: 28px;
}

.foot__contact a {
  overflow-wrap: anywhere;
}

.foot__meta {
  color: var(--cocoa-soft);
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 18px 28px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--cocoa-soft);
}

/* Inner pages */
.pagehead {
  padding-block: clamp(40px, 6vw, 72px);
  border-bottom: 2px solid var(--cocoa);
}

.pagehead h1 {
  font-size: clamp(2.2rem, 1.3rem + 3.8vw, 4rem);
  letter-spacing: -0.03em;
}

.pagehead__lead {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 1.14rem;
  color: var(--cocoa-soft);
}

.pagehead__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.pagehead__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--cocoa);
  border-radius: var(--r-m);
  color: var(--cocoa);
  font-weight: 600;
  text-decoration: none;
}

.pagehead__jump a:hover {
  background: var(--azure-soft);
}

/* Privacy policy */
.doc {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 40px 72px;
  align-items: start;
  padding-block: clamp(40px, 6vw, 80px) var(--section);
}

.doc__toc {
  position: sticky;
  top: 24px;
  padding: 20px 22px;
  background: var(--ice-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  font-size: 0.96rem;
}

.doc__toc-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}

.doc__toc ol {
  margin-top: 8px;
  counter-reset: toc;
}

.doc__toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
}

.doc__toc li::before {
  content: counter(toc) ".";
  color: var(--cocoa-soft);
}

.doc__toc a {
  display: block;
  padding: 6px 0;
  color: var(--cocoa);
  text-decoration: none;
}

.doc__toc a:hover {
  text-decoration: underline;
}

.prose {
  max-width: 74ch;
}

.prose > section + section {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.prose h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
  letter-spacing: -0.015em;
}

.prose p,
.prose ul,
.prose__table {
  margin-top: 14px;
}

.prose ul {
  display: grid;
  gap: 8px;
}

.prose li {
  position: relative;
  padding-left: 22px;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--azure);
  border-radius: 2px;
}

.prose__summary {
  padding: 20px 22px;
  background: var(--ice-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  font-weight: 500;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.prose th,
.prose td {
  padding: 12px 14px 12px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}

.prose thead th {
  border-top: 0;
  border-bottom: 2px solid var(--cocoa);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

.prose tbody th {
  width: 46%;
  font-weight: 600;
}

.prose__mail a {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.7rem + 1.6vw, 1.5rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Support */
.guide {
  padding-block: var(--section);
}

.guide__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 2px solid var(--cocoa);
  border-left: 1px solid var(--line);
}

.guide__list li {
  padding: 26px 28px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.guide__num {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--azure-dark);
}

.guide__list h3 {
  margin-top: 8px;
  font-size: 1.3rem;
}

.guide__list p {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--cocoa-soft);
}

.faq {
  padding-block: var(--section);
  background: var(--ice);
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 28px 64px;
  align-items: start;
}

.faq__grid h2 {
  position: sticky;
  top: 24px;
}

.faq__list > div {
  padding: 22px 0;
  border-top: 1px solid var(--cocoa);
}

.faq__list > div:last-child {
  border-bottom: 1px solid var(--cocoa);
}

.faq__list dt {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.faq__list dd {
  margin-top: 8px;
  max-width: 68ch;
  color: var(--cocoa-soft);
}

.reach {
  padding-block: var(--section);
}

.reach__card {
  padding: 28px;
  background: var(--floor);
  color: var(--cocoa);
  border-radius: var(--r-l);
}

.reach__mail {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.02rem, 0.6rem + 1.5vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.reach__card p {
  margin-top: 12px;
  color: var(--cocoa-soft);
}

.reach__card .reach__meta {
  font-size: 0.92rem;
}

.reach__card :focus-visible {
  outline-color: var(--azure);
}

/* Changelog */
.log {
  padding-block: clamp(40px, 6vw, 80px) var(--section);
}

.log__grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 40px 72px;
  align-items: start;
}

.log__now {
  padding: 24px;
  background: var(--ice-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}

.log__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

.log__version {
  font-family: var(--display);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.log__status {
  margin-bottom: 18px;
  font-weight: 600;
}

.log__status--live {
  color: var(--leaf);
}

.log__now .play {
  width: 100%;
  justify-content: center;
  padding-inline: 12px;
  font-size: 0.95rem;
}

.log__list > li {
  padding-top: 22px;
  border-top: 2px solid var(--cocoa);
}

.log__tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--cocoa);
  color: var(--ice);
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 600;
}

.log__list h2 {
  margin-top: 14px;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
}

.log__list .ticks {
  margin-top: 18px;
}

/* 404 */
.missing {
  padding-block: clamp(56px, 10vw, 140px);
}

.missing__code {
  font-family: var(--display);
  font-size: clamp(5rem, 2rem + 16vw, 13rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--cocoa);
}

.missing h1 {
  margin-top: 20px;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
}

.missing .button {
  margin-top: 28px;
}

/* Medium widths */
@media (max-width: 1080px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
  }

  .readout {
    grid-column: 1 / -1;
  }

  .readout__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 24px;
  }

  .extras__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extras__item .screen {
    max-width: 300px;
  }

  .extras__more {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 56px;
  }

  .editor__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room__grid,
  .compare__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px 48px;
  }

  .budget__grid {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px 48px;
  }
}

@media (max-width: 860px) {
  .steps .wrap,
  .editor__grid,
  .limits__grid,
  .own__grid,
  .reach__grid,
  .faq__grid,
  .doc,
  .log__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq__grid h2,
  .doc__toc {
    position: static;
  }

  .guide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot__in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot__brand {
    grid-column: 1 / -1;
  }
}

/* Phones */
@media (max-width: 700px) {
  :root {
    --gutter: 16px;
  }

  body {
    font-size: 1rem;
  }

  .top__in {
    padding-block: 8px 4px;
  }

  .menu {
    width: 100%;
  }

  .menu ul {
    justify-content: space-between;
    margin-inline: -8px;
  }

  .menu a {
    padding: 0 8px;
    font-size: 0.97rem;
  }

  .hero__grid,
  .room__grid,
  .compare__grid,
  .budget__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .hero__lead {
    max-width: none;
  }

  .hero__screen,
  .room__screen,
  .compare__screen,
  .budget__screen {
    width: min(82vw, 330px);
    margin-inline: auto;
  }

  .readout__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
  }

  .tape__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }

  .tape__list li {
    font-size: 1.02rem;
  }

  .steps__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .steps__list li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0;
    border-left: 0;
  }

  .steps__num {
    grid-row: 1 / span 2;
    font-size: 4.2rem;
  }

  .steps__list h3 {
    margin-top: 2px;
  }

  .spec > div,
  .limits__list > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor__grid {
    margin-top: 28px;
  }

  .editor__cols {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .extras__grid,
  .extras__more {
    grid-template-columns: minmax(0, 1fr);
  }

  .extras__item .screen {
    width: min(82vw, 330px);
    max-width: none;
    margin-inline: auto;
  }

  /* The budget copy comes first on a phone, the capture after it */
  .budget__screen {
    order: 2;
  }

  .ab th,
  .ab td {
    padding: 11px 8px;
  }

  .ab tbody th {
    padding-left: 14px;
    font-size: 0.95rem;
  }

  .ab tbody td {
    font-size: 1.05rem;
  }

  .sum {
    padding: 20px 18px;
  }

  .sum__rows {
    grid-template-columns: minmax(0, 1fr);
  }

  .own__points li {
    font-size: 1.1rem;
  }

  .get__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .get__in > *,
  .get__icon {
    grid-column: 1;
    grid-row: auto;
  }

  .get__icon {
    width: 72px;
    margin-bottom: 8px;
  }

  .play {
    padding-inline: 18px;
  }

  .foot__in {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 36px 28px;
  }

  .guide__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide__list li {
    padding: 22px 18px 24px;
  }

  .reach__card {
    padding: 22px 18px;
  }

  /* The data table becomes one block per row */
  .prose table,
  .prose tbody,
  .prose tr,
  .prose th,
  .prose td {
    display: block;
    width: auto;
  }

  .prose thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .prose tbody tr {
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }

  .prose tbody th,
  .prose tbody td {
    width: 100%;
    padding: 0;
    border: 0;
  }

  .prose tbody td {
    margin-top: 4px;
    color: var(--cocoa-soft);
  }

  .prose tbody td::before {
    content: attr(data-label) " ";
    font-weight: 600;
    color: var(--cocoa);
  }
}

@media print {
  .top,
  .foot,
  .doc__toc,
  .skip-link {
    display: none;
  }

  .doc {
    display: block;
    padding: 0;
  }
}