@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #0b0d0f;
  --board: #15191c;
  --panel: #1b2024;
  --panel-hi: #222a2f;
  --rule: #2a3238;
  --edge: #59636b;
  --chalk: #e9edef;
  --chalk-soft: #b9c1c7;
  --mill: #98a2a9;
  --datum: #ee8a1e;
  --datum-hi: #f59a35;
  --datum-ink: #1a0f02;
  --go: #56c273;
  --go-loud: #3ddc6c;
  --go-loud-hi: #62e88a;
  --go-ink: #04140a;
  --alarm-text: #ff9c86;
  --alarm-ground: #2a1612;

  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--ink);
  color: var(--chalk);
  font: 400 15px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  caret-color: var(--datum);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--datum); color: var(--datum-ink); }

* { scrollbar-color: var(--edge) var(--board); scrollbar-width: thin; }

:focus-visible { outline: 2px solid var(--datum); outline-offset: 2px; }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Top bar */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  height: 52px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}


/* The board: hairline grid between the control column and the work area */

.board {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1px;
  background: var(--rule);
  min-height: 0;
}

.controls,
.work { background: var(--board); }

.controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.field { margin: 0; padding: 0; border: 0; min-width: 0; }

.label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--chalk);
}

.optional {
  margin-left: 6px;
  font: 400 12px var(--mono);
  color: var(--mill);
}

/* Photo drop target */

.drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px 16px;
  border: 1px dashed var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--chalk-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.drop:hover,
.drop.is-over { border-color: var(--chalk-soft); background: var(--panel-hi); }
.drop:focus-within { outline: 2px solid var(--datum); outline-offset: 2px; }
.drop.has-file { border-style: solid; }

.drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drop-text {
  font-size: 14px;
  color: var(--chalk);
  overflow-wrap: anywhere;
}
.drop-text u { text-decoration-color: var(--edge); text-underline-offset: 3px; }

.drop-hint { font: 400 12px var(--mono); color: var(--mill); }

/* Style swatches: each style is shown by its materials */

.swatches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.swatch {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.swatch:hover { border-color: var(--edge); }
.swatch:has(input:checked) { border-color: var(--chalk-soft); background: var(--panel-hi); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--datum); outline-offset: 2px; }

.swatch input { position: absolute; opacity: 0; pointer-events: none; }

.chips { display: flex; gap: 3px; }
.chips i {
  width: 22px;
  height: 22px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.swatch-name { font-size: 13px; line-height: 1.3; color: var(--chalk-soft); }
.swatch:has(input:checked) .swatch-name { color: var(--chalk); font-weight: 600; }

.select {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c1c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color: var(--chalk);
  font: inherit;
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}
.select:hover { border-color: var(--edge); }
.select:focus-visible { outline: 2px solid var(--datum); outline-offset: 0; border-color: transparent; }
.select option { background: var(--panel); color: var(--chalk); }

.input,
textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--chalk);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.input { height: 42px; }
.input::placeholder,
textarea::placeholder { color: var(--mill); }
.input:hover,
textarea:hover { border-color: var(--edge); }
.input:focus-visible,
textarea:focus-visible { outline: 2px solid var(--datum); outline-offset: 0; border-color: transparent; }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -8px;
  font-size: 14px;
  color: var(--chalk-soft);
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--datum);
  cursor: pointer;
}

/* Actions: orange belongs only to things that can be pressed */

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--datum);
  color: var(--datum-ink);
  font: 600 15px var(--sans);
  cursor: pointer;
  transition: background-color 150ms, transform 100ms;
}
.btn-primary:hover:not(:disabled) { background: var(--datum-hi); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { background: var(--rule); color: var(--mill); cursor: not-allowed; }
.btn-primary.is-busy { cursor: progress; }

.rule-note {
  margin: -12px 0 0;
  font-size: 13px;
  color: var(--mill);
}

.alert {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgb(226 74 48 / 0.5);
  border-radius: var(--radius);
  background: var(--alarm-ground);
  color: var(--alarm-text);
  font-size: 14px;
}

.note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--chalk-soft);
  font-size: 14px;
}

/* Work area: two pinned frames */

.work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 32px;
  padding: 40px 32px 32px;
}

.frame {
  position: relative;
  margin: 0;
  min-width: 0;
}

/* The pin heads that hold each print to the board */
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  top: -5px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chalk-soft);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.6);
}
.frame::before { left: 14px; }
.frame::after { right: 14px; }

.frame-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.7);
}

.frame-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.frame-empty {
  margin: 0;
  padding: 24px;
  color: var(--mill);
  font-size: 14px;
  text-align: center;
}

.tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 40px;
  padding-top: 10px;
  font: 500 12px/1.4 var(--mono);
  color: var(--chalk-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tag-meta { color: var(--mill); font-weight: 400; }

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--datum);
  border-radius: var(--radius);
  color: var(--datum);
  font: 600 14px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.btn-download:hover { background: var(--datum); color: var(--datum-ink); }

.notice {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 13px;
  color: var(--chalk-soft);
}

.bar-status {
  font: 400 12px/1.4 var(--mono);
  color: var(--mill);
}

.tag-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.tag-actions .btn-download { margin-left: 0; }

.btn-quiet {
  padding: 8px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: transparent;
  color: var(--chalk);
  font: 600 14px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.btn-quiet:hover { border-color: var(--chalk-soft); background: var(--panel-hi); }

.bar-right { display: flex; align-items: center; gap: 16px; }
.inline-form { margin: 0; }
.btn-small { padding: 6px 12px; font-size: 13px; }

.offer .btn-primary { width: 100%; }

.versions { display: inline-flex; border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.version {
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--chalk-soft);
  font: 500 12px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.version + .version { border-left: 1px solid var(--edge); }
.version[aria-pressed="true"] { background: var(--panel-hi); color: var(--chalk); cursor: default; }
.version[aria-pressed="false"]:hover { background: var(--panel-hi); color: var(--chalk); }

/* Premium upsell on Basic listings: pinned to the board like a sample card,
   led by the six style swatches Premium unlocks */

.upsell {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--chalk-soft);
  border-radius: var(--radius);
  background: var(--panel-hi);
  box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.75);
}
.upsell::before,
.upsell::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chalk-soft);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.6);
}
.upsell::before { left: 14px; }
.upsell::after { right: 14px; }

.upsell-styles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.upsell-style { display: flex; height: 22px; }
.upsell-style i { flex: 1; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.upsell-style i:first-child { border-radius: 1px 0 0 1px; }
.upsell-style i:last-child { border-radius: 0 1px 1px 0; }

.upsell-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.upsell-head { margin: 0; font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: -0.02em; color: var(--chalk); }
.upsell-price { margin: 0; font-size: 14px; color: var(--chalk-soft); white-space: nowrap; }
.upsell-price strong { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--chalk); margin: 0 1px; }
.upsell-button { width: 100%; }
.upsell-fine { margin: -4px 0 0; font-size: 12px; color: var(--mill); text-align: center; }

.upsell-details {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.upsell-group {
  margin: 2px 0 0;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mill);
}
.upsell-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--chalk-soft); }
.upsell-list li { position: relative; padding-left: 20px; text-wrap: pretty; }
.upsell-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.35em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--mill);
  border-bottom: 1.6px solid var(--mill);
  transform: rotate(-45deg);
}
.upsell-added li { color: var(--chalk); }
.upsell-added li::before { border-color: var(--chalk); }

/* Trust signals: rbsn.ai's green, only for promises the product keeps */

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--go);
}
.trust li { position: relative; padding-left: 15px; white-space: nowrap; }
.trust li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.38em;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--go);
  border-bottom: 1.6px solid var(--go);
  transform: rotate(-45deg);
}
.package .trust { justify-content: flex-start; margin-top: -4px; }

.guarantee {
  grid-column: 1 / -1;
  max-width: 600px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--chalk-soft);
}
details.guarantee summary {
  width: fit-content;
  font-weight: 600;
  color: var(--chalk);
  cursor: pointer;
  text-underline-offset: 3px;
}
details.guarantee summary:hover { text-decoration: underline; }
details.guarantee summary::marker { color: var(--datum); }
.guarantee-form { display: grid; gap: 10px; margin-top: 12px; }
.guarantee-ask { display: block; }
.guarantee-sent { margin: 0; color: var(--go); }
.guarantee-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.guarantee-actions .btn-primary { height: 38px; padding: 0 22px; font-size: 14px; }
.btn-refund {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: transparent;
  color: var(--alarm-text);
  font: 600 14px var(--sans);
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.btn-refund:hover { border-color: var(--alarm-text); background: var(--alarm-ground); }
.btn-refund:focus-visible { outline: 2px solid var(--datum); outline-offset: 2px; }
.guarantee-terms { margin: 0; font: 400 12px/1.5 var(--mono); color: var(--mill); }
.terms { max-width: 680px; }
.terms h2 { margin: 28px 0 8px; font: 600 16px var(--sans); color: var(--chalk); }
.terms p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--chalk-soft); }
.terms a, .fine a { color: inherit; text-underline-offset: 3px; }

.qc-card-wide { grid-template-columns: 1fr; }

/* Directions and finishing a listing */

.guide {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 14px;
  color: var(--chalk-soft);
}
.guide p { margin: 0 0 10px; max-width: 75ch; }
.guide p:last-child { margin-bottom: 0; }
.guide strong { color: var(--chalk); }
.guide-head { color: var(--chalk); font-weight: 600; font-size: 15px; }
.guide-finished { border-color: var(--edge); }
.guide-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.guide-link output {
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
  font: 400 13px var(--mono);
  color: var(--chalk);
  overflow-wrap: anywhere;
}
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.guide-actions .btn-download { margin-left: 0; }
.finish { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.finish-hint { font-size: 13px; color: var(--mill); }

/* Rooms in a listing */

.rooms { grid-column: 1 / -1; }
.rooms-head { margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.rooms-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rooms-list:empty::before {
  grid-column: 1 / -1;
  content: "Rooms you stage appear here.";
  color: var(--mill);
  font-size: 13px;
}
.room {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 6px 6px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--chalk);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms;
}
.room:hover { border-color: var(--edge); }
.room[aria-current="true"] { border-color: var(--chalk-soft); background: var(--panel-hi); }
.room img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.room-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-status { font: 400 11px var(--mono); color: var(--mill); }

/* Package page and owner admin */

.page {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.page h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; }
/* Package page headline: the promise, a size up, on its own line */
.home-head span { display: block; font-size: 1.2em; }
.page .lede { margin: 0 0 32px; max-width: 60ch; color: var(--chalk-soft); font-size: 16px; }
/* Free first room */

.try-link { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: -16px 0 28px; font-size: 13px; color: var(--mill); }
.try-link .btn-quiet { text-decoration: none; }
.try-form { display: grid; gap: 16px; max-width: 520px; }
/* The free try's result: the clean photo, Download beside it as an orange outline, and the
   buy button, Get it now, under it as the one filled green block on the page, so it reads as
   the next step even with the page blurred. Weight, not just hue, separates the two. */
.result-head { margin: 0 0 20px; font: 700 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "media side" "ready .";
  gap: 22px 32px;
  align-items: start;
}
.result-media { grid-area: media; margin: 0; }
.result-media .compare-media { aspect-ratio: 16 / 9; }
.result-side { grid-area: side; display: grid; gap: 14px; }
.btn-strong.result-download { gap: 10px; height: 56px; font-size: 17px; }
.btn-strong.result-download .icon { width: 20px; height: 20px; }
.result-note { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--chalk-soft); }
.result-note a { color: var(--chalk); text-underline-offset: 3px; }
.result-ready { grid-area: ready; display: grid; justify-items: center; gap: 10px; }
.result-pitch { margin: 0; font-size: 18px; color: var(--chalk); }
.btn-ready {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  height: 76px;
  border-radius: var(--radius);
  background: var(--go-loud);
  color: var(--go-ink);
  font: 800 26px var(--sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 0 2px var(--go-ink), 0 0 0 4px var(--go-loud), 0 16px 40px -10px rgba(61, 220, 108, 0.55);
  transition: background-color 150ms, transform 100ms, box-shadow 150ms;
}
.btn-ready span { font-size: 30px; line-height: 1; transition: transform 150ms var(--ease-out); }
.btn-ready:hover { background: var(--go-loud-hi); box-shadow: 0 0 0 2px var(--go-ink), 0 0 0 4px var(--go-loud-hi), 0 20px 48px -10px rgba(98, 232, 138, 0.7); }
.btn-ready:hover span { transform: translateX(4px); }
.btn-ready:active { transform: translateY(1px); }
.btn-ready:focus-visible { outline: 2px solid var(--chalk); outline-offset: 6px; }
@media (max-width: 900px) {
  .result { grid-template-columns: 1fr; grid-template-areas: "media" "side" "ready"; gap: 14px; }
  .result-head { margin-bottom: 12px; }
  .result-note { max-width: none; font-size: 14px; }
  .result-pitch { font-size: 16px; }
  .btn-ready { height: 68px; font-size: 22px; }
}

/* Free-trial landing page, after rbsn.ai. Two columns, both above the fold:
   left sells (ending in Get it now), right is the free try (ending in Try it out). */

.landing {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 24px 72px;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  column-gap: 64px;
  align-items: stretch;
}
.hero-sell { display: flex; flex-direction: column; }
.kicker {
  margin: 0 0 12px;
  font: 700 15px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--datum);
}
.shout {
  margin: 0 0 18px;
  font: 700 clamp(36px, 4.6vw, 56px)/1.02 var(--sans);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--chalk);
}
.hero-pain { margin: 0 0 18px; font-size: 18px; line-height: 1.45; color: var(--chalk); }
.hero-turn { color: var(--datum); }
.pains { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 16px; color: var(--chalk-soft); }
.pains li { position: relative; padding-left: 22px; }
.pains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: var(--datum);
}
.hero-value { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--chalk); }
/* Sits at the bottom of the column, level with Try it out */
.buy { display: grid; gap: 10px; justify-items: start; margin-top: auto; padding-top: 24px; }
/* The one call to action: the brightest, biggest thing on the page, even blurred */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  height: 68px;
  border-radius: var(--radius);
  background: var(--datum);
  color: var(--datum-ink);
  font: 700 22px var(--sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--datum-hi), 0 10px 36px -6px rgba(238, 138, 30, 0.55);
  transition: background-color 150ms, transform 100ms, box-shadow 150ms;
}
.btn-cta span { font-size: 26px; line-height: 1; transition: transform 150ms var(--ease-out); }
.btn-cta:hover { background: var(--datum-hi); box-shadow: 0 0 0 1px var(--datum-hi), 0 14px 44px -6px rgba(238, 138, 30, 0.7); }
.btn-cta:hover span { transform: translateX(4px); }
.btn-cta:active { transform: translateY(1px); }
.btn-cta:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
.buy .trust { justify-content: flex-start; }

/* Buying: the same size as Try it out, outlined in the same orange */
.btn-strong {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 2px solid var(--datum);
  border-radius: var(--radius);
  color: var(--datum);
  font: 600 16px var(--sans);
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.btn-strong:hover { background: var(--datum); color: var(--datum-ink); }
.btn-strong:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

.try-col { display: grid; gap: 12px; align-content: start; }
.col-head {
  margin: 0 0 4px;
  font: 700 28px/1.1 var(--sans);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--chalk);
  scroll-margin-top: 16px;
}
.try-col .alert { margin: 0; }
.try-col .label { margin-bottom: 6px; }
.try-who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.required { color: var(--datum); }
.try-what { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }
.drop-row {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  text-align: left;
}
.drop-row .drop-text { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.try-window .compare-media { aspect-ratio: 2 / 1; }
.try-window { position: relative; }
.try-preview { position: absolute; inset: 0; background: var(--panel); }
.try-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.try-go { width: 100%; height: 52px; background: transparent; font-size: 16px; cursor: pointer; }
.try-go:disabled { border-color: var(--rule); color: var(--mill); background: transparent; cursor: progress; }
.try-fine { margin: -2px 0 0; font-size: 12px; color: var(--mill); text-align: center; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 72px auto 16px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--chalk-soft);
}
.steps strong { display: block; margin-bottom: 4px; color: var(--chalk); }
.step-num { display: block; margin-bottom: 8px; font: 700 28px var(--sans); color: var(--datum); }
.try-credit { margin: 0; font-size: 12px; color: var(--mill); text-align: center; }

@media (max-width: 900px) {
  .landing { padding: 16px 16px 56px; }
  .hero { grid-template-columns: 1fr; row-gap: 14px; }
  /* Phones: the free try comes straight after the headline; the selling points and Get it now follow. */
  .hero-sell { display: contents; }
  .kicker { order: 1; margin-bottom: 6px; font-size: 12px; }
  .shout { order: 2; margin: 0; font-size: 32px; }
  .hero-pain { order: 3; margin: 0; font-size: 16px; }
  .try-col { order: 4; }
  .buy { order: 5; padding-top: 0; justify-items: stretch; }
  .btn-cta { max-width: none; height: 60px; font-size: 20px; }
  .pains { order: 6; margin: 8px 0 0; }
  .hero-value { order: 7; }
  .col-head { font-size: 22px; }
  .try-col { gap: 10px; }
  .try-what { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 18px; margin-top: 48px; }
}

a.wordmark { color: inherit; text-decoration: none; }

/* Before and after examples: drag to compare */

.examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 0 0 32px;
}
.compare { margin: 0; }
.compare-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.7);
}
.compare-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare-media::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: var(--chalk);
  box-shadow: 0 0 6px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
.compare-tag {
  position: absolute;
  top: 10px;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: rgb(11 13 15 / 0.7);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk);
  pointer-events: none;
}
.compare-tag-before { left: 10px; }
.compare-tag-after { right: 10px; }
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare-range:focus-visible + * , .compare:focus-within .compare-media { outline: 2px solid var(--datum); outline-offset: 2px; }
.compare figcaption { margin-top: 8px; font-size: 12px; color: var(--mill); }

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.package {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--board);
}
.package h2 { margin: 0; font-size: 20px; }
.package-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge {
  padding: 3px 8px;
  border: 1px solid var(--chalk-soft);
  border-radius: var(--radius);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk);
}
.package-featured { background: var(--panel-hi); }
.per-room { margin: -8px 0 0; font-size: 13px; color: var(--mill); }
.price { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.price small { font-size: 14px; font-weight: 400; color: var(--mill); }
.package ul { margin: 0; padding-left: 18px; color: var(--chalk-soft); font-size: 14px; display: grid; gap: 6px; }
.package form { margin-top: auto; }
.package .btn-primary { width: 100%; }
/* Package page: the call to action under the examples and after the demo */
.home { padding-top: 32px; }
.home .examples { margin-bottom: 16px; }
.home-cta { display: grid; justify-items: center; gap: 10px; margin: 0 0 40px; }
.home-cta .btn-cta { max-width: 420px; }
.home-cta-pitch { margin: 0; font-size: 18px; color: var(--chalk); }
/* Phones: the examples stack, so Get it now comes up above them to stay in the first screen */
@media (max-width: 700px) {
  .home { display: flex; flex-direction: column; }
  .home > * { order: 5; }
  .home > .home-head { order: 1; }
  .home > .lede { order: 2; }
  .home > .try-link { order: 3; margin-top: 0; }
  .home > .home-cta { order: 4; margin: 4px 0 28px; }
  .home .home-cta .btn-cta { width: 100%; }
}

/* Package cards lift on hover; their buttons answer louder */
.package { position: relative; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms; }
.package:hover, .package:focus-within {
  z-index: 1;
  transform: translateY(-8px);
  background: var(--panel-hi);
  box-shadow: 0 0 0 1px var(--datum), 0 22px 44px -14px rgb(0 0 0 / 0.85);
}
.package .btn-primary {
  height: 52px;
  font-size: 16px;
  transition: background-color 150ms, transform 150ms var(--ease-out), box-shadow 150ms;
}
.package .btn-primary:hover:not(:disabled), .package .btn-primary:focus-visible {
  background: var(--datum-hi);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 2px var(--chalk), 0 12px 30px -6px rgba(238, 138, 30, 0.75);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .package:hover, .package:focus-within, .package .btn-primary:hover:not(:disabled) { transform: none; }
}

/* The workspace demo: the real page at desktop width, scaled into a frame */
.demo { margin: 64px 0 0; }
.demo-head { margin: 0 0 8px; font: 700 28px/1.1 var(--sans); letter-spacing: -0.01em; text-transform: uppercase; }
.demo-lede { margin: 0 0 20px; max-width: 62ch; color: var(--chalk-soft); }
.demo-frame {
  --demo-scale: 1;
  position: relative;
  height: calc(860px * var(--demo-scale));
  margin: 0 0 40px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--board);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.8);
}
.demo-frame iframe {
  display: block;
  width: 1366px;
  height: 860px;
  border: 0;
  transform: scale(var(--demo-scale));
  transform-origin: 0 0;
  pointer-events: none;
}
.demo-tag { top: auto; bottom: 12px; right: 12px; z-index: 1; }
@media (max-width: 639px) {
  .demo-frame { height: 720px; }
  .demo-frame iframe { width: 100%; height: 720px; transform: none; }
}
.fine { margin: 24px 0 0; font-size: 13px; color: var(--mill); max-width: 70ch; }

.admin-section { margin-bottom: 40px; }
.admin-section h2 { margin: 0 0 12px; font-size: 18px; }
.qc-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 12px;
}
.qc-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.qc-card p { margin: 0 0 8px; font-size: 14px; }
.qc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qc-actions form { margin: 0; }
.draft {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
  color: var(--chalk-soft);
  font: 400 13px/1.5 var(--mono);
}
table.listings { width: 100%; border-collapse: collapse; font-size: 13px; }
table.listings th, table.listings td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
table.listings th { color: var(--mill); font-weight: 500; }
table.listings a { color: var(--chalk); text-underline-offset: 3px; }

@media (max-width: 760px) {
  .qc-card { grid-template-columns: 1fr; }
}

/* Staging in progress */

.working {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-hi) 50%, var(--panel) 70%) 0 0 / 300% 100%;
  animation: sweep 1.8s linear infinite;
}
.working-text { font-weight: 600; font-size: 16px; }
.working-hint { font-size: 13px; color: var(--mill); }

@keyframes sweep { to { background-position: -150% 0; } }

/* The one authored moment: the staged print is revealed left to right */
.frame-media img.is-revealed { animation: reveal 700ms var(--ease-out); }
@keyframes reveal {
  from { clip-path: inset(0 100% 0 0); filter: brightness(1.4); }
  to { clip-path: inset(0 0 0 0); filter: none; }
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .working { animation: none; }
  .frame-media img.is-revealed { animation: none; }
}

/* Short laptop screens: tighten the left column so Get Premium stays above the fold. */
@media (min-width: 761px) and (max-height: 720px) {
  .controls { gap: 14px; padding-top: 16px; }
  .drop { padding: 14px 16px; }
  .rule-note { margin-top: -6px; }
}

@media (max-width: 1100px) {
  .work { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  .board { grid-template-columns: 1fr; }
  /* The upsell card carries the upgrade on phones; the header stays uncluttered. */
  .bar-right .inline-form { display: none; }
  .controls { padding: 20px 16px; }
  .work { padding: 32px 16px 24px; }
  .bar { padding: 0 16px; }
}