/* The market landings: graphite and steel. Near-black paper with a grain, steel light in
   the hero, one amber accent for what we want pressed, the three verticals in their own
   colours. Unbounded carries the voice (it is the CRM's display face too), Golos Text
   reads the rest. */

:root {
  --bg: #0b0c0e;
  --bg-2: #0f1115;
  --surface: #15181d;
  --raised: #1b1f26;
  --line: rgb(255 255 255 / 9%);
  --line-2: rgb(255 255 255 / 16%);
  --ink: #eef0f3;
  --ink-2: #c3c7cf;
  --muted: #8a9099;
  --amber: #f2a93b;
  --amber-2: #ffbd57;
  --on-amber: #121212;
  --barbershop: #3ccf8a;
  --beauty: #ee7fa0;
  --dental: #5aa6ff;
  --c: var(--amber); /* the vertical's colour where a block is about one vertical */
  --display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 20px;
  --radius: 14px;
  --steel: linear-gradient(135deg, #262a31 0%, #15171b 55%, #1d2026 100%);
}

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

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* the grain: a touch of noise over everything, so the dark is paper and not a void */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
}

main,
header,
footer {
  position: relative;
  z-index: 1;
}

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

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

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

h1 {
  font: 700 clamp(2.2rem, 5vw, 3.9rem) / 1.04 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font: 700 clamp(1.7rem, 3.4vw, 2.6rem) / 1.1 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h3 {
  font: 500 1.125rem / 1.3 var(--display);
}

.lead {
  max-width: 34em;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 1.125rem;
}

.note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    transform 0.15s;
}

.btn:hover {
  background: var(--raised);
  border-color: rgb(255 255 255 / 28%);
}

.btn:active {
  transform: translateY(1px);
}

.btn-amber {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--on-amber);
  box-shadow: 0 10px 30px -12px rgb(242 169 59 / 55%);
}

.btn-amber:hover {
  border-color: var(--amber-2);
  background: var(--amber-2);
}

.btn-vertical {
  border-color: var(--c);
  background: var(--c);
  color: var(--bg);
}

.btn-vertical:hover {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 85%, white);
}

/* --- the mark --------------------------------------------------------------- */

.mark {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font: 700 1.45rem/1 var(--display);
  letter-spacing: -0.04em;
  text-decoration: none;
}

.mark i {
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.14em;
  border-radius: 0.08em;
  background: var(--amber);
}

.mark--foot {
  font-size: 1.25rem;
}

/* --- header and footer ----------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--line);
  background: rgb(11 12 14 / 72%);
  backdrop-filter: blur(12px);
}

.top__row {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 68px;
}

.menu {
  display: none;
  gap: 22px;
  margin-right: auto;
}

.menu a {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover,
.menu a[aria-current] {
  color: var(--ink);
}

.langs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.langs a {
  padding: 5px 9px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.langs a[aria-current] {
  background: var(--raised);
  color: var(--ink);
}

.top__cta {
  display: none;
}

@media (min-width: 860px) {
  .menu {
    display: flex;
  }

  .langs {
    margin-left: 0;
  }

  .top__cta {
    display: inline-flex;
    min-height: 42px;
    padding: 8px 18px;
    margin-left: auto;
  }

  .menu + .langs + .top__cta,
  .menu + .top__cta {
    margin-left: 0;
  }
}

.foot {
  margin-top: 96px;
  padding: 40px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}

.foot__row {
  display: grid;
  gap: 24px;
}

.foot__line {
  margin-top: 10px;
}

.foot__contacts {
  display: grid;
  gap: 8px;
}

.foot__contacts a {
  width: max-content;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}

.foot__contacts a:hover {
  color: var(--ink);
  border-color: var(--amber);
}

.foot .langs {
  margin: 0;
}

.foot__copy {
  color: var(--muted);
}

@media (min-width: 760px) {
  .foot__row {
    grid-template-columns: 1.4fr 1fr auto;
    align-items: start;
  }

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

/* --- hero: the words and the product --------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 24px;
  background: var(--bg);
}

/* the three crafts under one amber light: the photo sits behind a vignette, so the words
   stay on dark and the light stays on the right */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 45%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 12 14 / 94%) 0%, rgb(11 12 14 / 78%) 45%, rgb(11 12 14 / 40%) 100%),
    linear-gradient(180deg, rgb(11 12 14 / 35%) 0%, rgb(11 12 14 / 10%) 50%, var(--bg) 100%);
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
}

.hero .lead {
  font-size: 1.2rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 34px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.hero__facts li {
  padding-left: 12px;
  border-left: 2px solid var(--amber);
  line-height: 1.3;
}

/* the product in two frames: the journal on a laptop, the site on a phone over its corner */
.devices {
  position: relative;
  padding: 0 0 56px 24px;
}

.laptop {
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--steel);
  box-shadow:
    0 50px 90px -40px rgb(0 0 0 / 85%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
}

.laptop img {
  border-radius: 10px;
}

.phone {
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(140px, 30%, 210px);
  border: 6px solid #2a2e36;
  border-radius: 30px;
  background: #000;
  box-shadow:
    0 40px 70px -30px rgb(0 0 0 / 90%),
    0 0 0 1px rgb(0 0 0 / 60%);
  transform: rotate(-2deg);
}

.phone img {
  border-radius: 24px;
}

@media (min-width: 960px) {
  .hero {
    padding: 88px 0 48px;
  }

  .hero__grid {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 56px;
  }

  .devices {
    padding: 0 0 48px 36px;
  }
}

/* one page-load reveal, nothing scattered later */
@media (prefers-reduced-motion: no-preference) {
  .hero__text > * {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero__text > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero__text > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero__text > :nth-child(4) {
    animation-delay: 0.24s;
  }

  .devices {
    animation: rise 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- what an owner gets ---------------------------------------------------- */

.why {
  padding-top: 88px;
}

.why__grid {
  display: grid;
  gap: 40px;
}

.why__list {
  display: grid;
  margin-top: 28px;
  border-top: 1px solid var(--line-2);
}

.why__list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.why__list h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ic {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why__list p {
  margin-top: 8px;
  color: var(--ink-2);
}

.why__photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
}

.why__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

.why__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(11 12 14 / 0%) 40%, rgb(11 12 14 / 75%) 100%);
}

@media (min-width: 760px) {
  .why__list {
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }
}

@media (min-width: 960px) {
  .why__grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
    gap: 64px;
  }

  .why__photo {
    position: sticky;
    top: 92px;
  }
}

/* --- the three verticals --------------------------------------------------- */

.doors {
  padding-top: 96px;
}

.door {
  margin-top: 40px;
}

.door__grid {
  position: relative;
  display: grid;
  gap: 24px;
}

.door__n {
  position: absolute;
  top: -0.35em;
  right: var(--gutter);
  z-index: 1;
  color: color-mix(in srgb, var(--c) 55%, transparent);
  font: 700 clamp(3rem, 8vw, 6rem) / 1 var(--display);
  letter-spacing: -0.04em;
  pointer-events: none;
}

.door__photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
}

.door__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}

.door__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgb(11 12 14 / 60%));
}

.door__text::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  margin-bottom: 18px;
  border-radius: 3px;
  background: var(--c);
}

.door h3 {
  font: 700 clamp(1.5rem, 2.6vw, 2rem) / 1.15 var(--display);
}

.door h3 a {
  color: var(--ink);
  text-decoration: none;
}

.door h3 a:hover {
  color: var(--c);
}

.door__text p {
  max-width: 34em;
  margin-top: 14px;
  color: var(--ink-2);
}

.door__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.more {
  display: inline-block;
  margin-top: 16px;
  color: var(--c);
  font-weight: 600;
}

@media (min-width: 860px) {
  .door {
    margin-top: 56px;
  }

  .door__grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 48px;
  }

  .door:nth-of-type(even) .door__photo {
    order: 2;
  }
}

/* --- how it starts --------------------------------------------------------- */

.steps {
  padding-top: 96px;
}

.steps ol {
  display: grid;
  gap: 24px;
  margin-top: 28px;
}

.steps li {
  position: relative;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}

.steps span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--amber);
  border-radius: 50%;
  background: var(--bg);
  color: var(--amber);
  font: 700 1.1rem/1 var(--display);
}

.steps p {
  max-width: 30em;
  margin-top: 12px;
  color: var(--ink-2);
}

@media (min-width: 760px) {
  .steps ol {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .steps li {
    border-top: 0;
    padding-top: 0;
  }

  .steps li::before {
    content: "";
    position: absolute;
    top: 22px;
    right: -32px;
    left: 44px;
    border-top: 1px dashed var(--line-2);
  }

  .steps li:last-child::before {
    display: none;
  }
}

/* --- pricing ---------------------------------------------------------------- */

.pricing {
  padding-top: 96px;
}

.plans {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.plan {
  padding: 30px 28px 32px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
}

.plan--design {
  border-top: 3px solid var(--amber);
  background: var(--steel);
}

.plan h3 {
  font-size: 1.05rem;
  color: var(--ink-2);
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
}

.plan__price strong {
  font: 700 clamp(2.2rem, 4vw, 2.8rem) / 1 var(--display);
  letter-spacing: -0.02em;
}

.plan__price span {
  color: var(--muted);
}

.plan__price em {
  width: 100%;
  color: var(--ink-2);
  font-style: normal;
  font-size: 0.9375rem;
}

.plan ul {
  display: grid;
  gap: 12px;
  margin: 24px 0 28px;
}

.plan li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
}

.plan li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

@media (min-width: 760px) {
  .plans {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* --- questions -------------------------------------------------------------- */

.faq {
  padding-top: 96px;
}

.faq__grid {
  display: grid;
  gap: 24px;
}

.faq__list {
  border-top: 1px solid var(--line-2);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font: 500 1.05rem/1.35 var(--display);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--amber);
  font: 500 1.4rem/1 var(--display);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  max-width: 40em;
  padding-bottom: 20px;
  color: var(--ink-2);
}

@media (min-width: 860px) {
  .faq__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 48px;
  }
}

/* --- the request form ------------------------------------------------------ */

.ask {
  position: relative;
  overflow: hidden;
  margin-top: 96px;
  padding: 72px 0;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.ask__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}

.ask::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(15 17 21 / 90%) 0%, rgb(15 17 21 / 60%) 50%, rgb(15 17 21 / 35%)),
    linear-gradient(180deg, var(--bg) 0%, transparent 25%, transparent 75%, var(--bg) 100%);
}

.ask__grid {
  position: relative;
  z-index: 1;
}

.ask__card {
  padding: 26px 24px 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: rgb(11 12 14 / 78%);
  backdrop-filter: blur(10px);
}

.ask__grid {
  display: grid;
  gap: 32px;
}

.ask__mail {
  margin-top: 20px;
}

.ask__mail a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
}

.ask form {
  display: grid;
  gap: 16px;
}

.ask label {
  display: grid;
  gap: 7px;
  font-weight: 600;
}

.ask small {
  color: var(--muted);
  font-weight: 400;
}

.ask input,
.ask select,
.ask textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #0d0f12;
  color: var(--ink);
  font: inherit;
}

.ask input:focus,
.ask select:focus,
.ask textarea:focus {
  border-color: var(--amber);
  outline: none;
}

.ask textarea {
  resize: vertical;
}

.ask button {
  justify-self: start;
  margin-top: 6px;
}

.ask__ok {
  align-self: start;
  padding: 18px 22px;
  border-left: 3px solid var(--amber);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  font-weight: 600;
}

.ask__error {
  color: #ff8a80;
  font-weight: 600;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (min-width: 860px) {
  .ask__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start;
  }
}

/* --- a vertical's page ----------------------------------------------------- */

.vhero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
}

.vhero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8);
}

.vhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 12 14 / 92%) 0%, rgb(11 12 14 / 70%) 50%, rgb(11 12 14 / 35%)),
    linear-gradient(180deg, rgb(11 12 14 / 20%), rgb(11 12 14 / 95%));
}

.vhero__text {
  position: relative;
  z-index: 1;
}

.crumbs {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.crumbs a {
  color: var(--muted);
}

.vhero h1 {
  max-width: 14em;
}

.vhero h1::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  margin-bottom: 20px;
  border-radius: 3px;
  background: var(--c);
}

.shots {
  padding-top: 64px;
}

.devices--page {
  max-width: 880px;
  margin: 0 auto;
}

.shots .note {
  max-width: 34em;
  margin: 8px auto 0;
  text-align: center;
}

.features {
  padding-top: 80px;
}

.features__grid {
  display: grid;
  gap: 40px;
}

.features h2 {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--c);
  font-size: 1.25rem;
}

.features ul {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.features li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
}

.features li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
}

@media (min-width: 760px) {
  .features__grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

/* --- the three looks in browser frames -------------------------------------- */

.themes {
  padding-top: 88px;
}

.themes__row {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.browser {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition:
    transform 0.2s,
    border-color 0.2s;
}

.browser:hover {
  border-color: var(--c);
  transform: translateY(-3px);
}

.browser__bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--raised);
}

.browser__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-2);
}

.browser__bar i:first-child {
  background: var(--c);
}

.browser img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.browser__name {
  display: block;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: 500 0.95rem/1.2 var(--display);
}

.browser__name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--c);
}

@media (min-width: 760px) {
  .themes__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- sections fade in as they arrive (apps/sites/static/sites/reveal.js) ------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.6s ease-out,
    translate 0.6s ease-out;
}

.js [data-reveal].in {
  opacity: 1;
  translate: none;
}