/* K&Co coming-soon page. Tokens live in tokens.css (copied from the client's Design-System folder).
   One centred column: logo, headline, one line, then the signup. The signup sits above the fold on every screen. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kc-block);
  color: var(--kc-text);
  font-family: var(--kc-font-sans);
  font-size: var(--kc-body-md);
  line-height: var(--kc-leading-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Hero: blurred photo, soft dark wash, ivory type ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--kc-space-lg) var(--kc-margin);
  padding-top: max(var(--kc-space-lg), env(safe-area-inset-top));
  padding-bottom: 3.5rem; /* room for the preview label; drop to --kc-space-lg when the label goes */
  color: var(--kc-ivory);
  text-align: center;
  overflow: hidden;
}

.hero__photo,
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__photo {
  z-index: -3;
  /* "Exhale" pace: one slow settle on load, then still */
  animation: settle 2400ms var(--kc-ease-out) both;
}

.hero__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(120% 90% at 50% 45%, rgba(61, 44, 36, 0.38) 0%, rgba(61, 44, 36, 0.62) 100%);
}

.hero__placeholder-tag {
  position: absolute;
  bottom: var(--kc-space-sm);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: var(--kc-space-3xs) var(--kc-space-xs);
  border: 1px dashed rgba(252, 252, 250, 0.6);
  border-radius: var(--kc-radius-control);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(252, 252, 250, 0.85);
}

.hero__inner {
  width: 100%;
  max-width: 48rem;
  display: grid;
  justify-items: center;
}

/* ---------- Logo ---------- */

.wordmark { display: block; line-height: 0; margin-bottom: clamp(1.75rem, 1rem + 3vh, 3.5rem); }
.wordmark__logo { width: clamp(8rem, 6.5rem + 4vw, 11rem); height: auto; }

/* ---------- Copy ---------- */

.hero__kicker {
  margin: 0 0 var(--kc-space-sm);
  font-size: var(--kc-label);
  font-weight: 500;
  letter-spacing: var(--kc-track-caps);
  text-transform: uppercase;
  color: rgba(252, 252, 250, 0.85);
}

.hero__title {
  margin: 0;
  max-width: 40rem;
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: var(--kc-track-display);
  text-wrap: balance;
}

.hero__lede {
  max-width: 30rem;
  margin: var(--kc-space-sm) 0 0;
  font-size: var(--kc-body-md);
  line-height: 1.6;
  color: rgba(252, 252, 250, 0.9);
  text-wrap: balance;
}

/* ---------- Form ---------- */

.signup { width: 100%; max-width: 34rem; margin-top: clamp(1.5rem, 1rem + 2vh, 2.5rem); }
.signup__form { display: grid; gap: var(--kc-space-xs); }

.signup__row { display: grid; gap: var(--kc-space-2xs); }
@media (min-width: 30rem) {
  .signup__row { grid-template-columns: 2fr 3fr; }
}

.field__input {
  height: var(--kc-control-h);
  width: 100%;
  padding: 0 var(--kc-space-sm);
  border: 1px solid transparent;
  border-radius: var(--kc-radius-control);
  background: var(--kc-ivory);
  color: var(--kc-text);
  font: inherit;
  font-size: var(--kc-body-md); /* 16px stops iOS zooming on focus */
  transition: box-shadow var(--kc-dur-hover) var(--kc-ease-out);
}
.field__input::placeholder { color: var(--kc-taupe-deep); }
.field__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--kc-block), 0 0 0 4px var(--kc-ivory);
}
.field__input[aria-invalid="true"] {
  border-color: var(--kc-error);
  box-shadow: inset 0 0 0 1px var(--kc-error);
}

.field__error {
  margin: calc(var(--kc-space-xs) * -1) 0 0;
  font-size: var(--kc-body-sm);
  color: var(--kc-error-on-dark);
  text-align: left;
}

/* Colour question: four compact chips in one row on every screen */
.colours { margin: 0; padding: 0; border: 0; min-width: 0; }
.colours__legend {
  width: 100%;
  margin-bottom: var(--kc-space-2xs);
  padding: 0;
  font-size: var(--kc-label);
  font-weight: 500;
  letter-spacing: var(--kc-track-caps);
  text-transform: uppercase;
}
.field__optional {
  margin-left: 0.4em;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(252, 252, 250, 0.72);
}
.colours__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kc-space-2xs); }

.swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc-space-2xs);
  min-height: var(--kc-pill-h);
  padding: 0 var(--kc-space-2xs);
  border: 1px solid rgba(252, 252, 250, 0.45);
  border-radius: var(--kc-radius-control);
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--kc-dur-hover) var(--kc-ease-out),
    border-color var(--kc-dur-hover) var(--kc-ease-out),
    color var(--kc-dur-hover) var(--kc-ease-out),
    transform var(--kc-dur-press) var(--kc-ease-out);
}
/* Narrow phones: dot above the name so all four fit */
@media (max-width: 29.99rem) {
  .swatch { flex-direction: column; gap: 0.3rem; padding: var(--kc-space-2xs) 0; }
}
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch__dot {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--kc-radius-full);
  background: var(--dot);
  box-shadow: 0 0 0 1px rgba(252, 252, 250, 0.6);
}
.swatch:active { transform: scale(var(--kc-press-scale)); }
.swatch:has(input:checked) { background: var(--kc-ivory); border-color: var(--kc-ivory); color: var(--kc-text); }
.swatch:has(input:checked) .swatch__dot { box-shadow: 0 0 0 1px var(--kc-taupe); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--kc-ivory); outline-offset: 3px; }

.swatch input[value="black"] + .swatch__dot { --dot: var(--kc-swatch-black); }
.swatch input[value="taupe"] + .swatch__dot { --dot: var(--kc-taupe); }
.swatch input[value="oat"] + .swatch__dot { --dot: var(--kc-oat); }
.swatch input[value="chocolate"] + .swatch__dot { --dot: var(--kc-chocolate); }

/* Spam trap */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Button: ivory on the dark wash, chocolate label */
.button {
  position: relative;
  height: var(--kc-control-h);
  padding: 0 var(--kc-space-lg);
  border: 0;
  border-radius: var(--kc-radius-control);
  background: var(--kc-chocolate);
  color: var(--kc-ivory);
  font: inherit;
  font-size: var(--kc-label);
  font-weight: 500;
  letter-spacing: var(--kc-track-caps);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--kc-dur-hover) var(--kc-ease-out), transform var(--kc-dur-press) var(--kc-ease-out);
}
.button:active { transform: scale(var(--kc-press-scale)); }
.button:focus-visible { outline: 2px solid var(--kc-ivory); outline-offset: 3px; }
.button__label { transition: opacity var(--kc-dur-ui) var(--kc-ease-out); }
.button__dots {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  opacity: 0;
  transition: opacity var(--kc-dur-ui) var(--kc-ease-out);
}
.button__dots i {
  width: 5px; height: 5px;
  border-radius: var(--kc-radius-full);
  background: currentColor;
  animation: pulse 1100ms var(--kc-ease-in-out) infinite;
}
.button__dots i:nth-child(2) { animation-delay: 150ms; }
.button__dots i:nth-child(3) { animation-delay: 300ms; }
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"] .button__label { opacity: 0; }
.button[aria-busy="true"] .button__dots { opacity: 1; }

.signup__fineprint { margin: 0; font-size: var(--kc-body-sm); color: rgba(252, 252, 250, 0.8); }
.signup__error { margin: 0; font-size: var(--kc-body-sm); color: var(--kc-error-on-dark); }

/* Success */
.signup__done { outline: none; }
.signup__done:not([hidden]) { animation: rise var(--kc-dur-reveal) var(--kc-ease-out) both; }
.signup__done-title {
  margin: 0;
  font-family: var(--kc-font-display);
  font-size: var(--kc-headline-md);
  line-height: var(--kc-leading-headline);
}
.signup__done-body { margin: var(--kc-space-2xs) 0 0; color: rgba(252, 252, 250, 0.86); }

/* ---------- Footer: deep chocolate block ---------- */

.footer {
  display: grid;
  gap: var(--kc-space-md);
  justify-items: center;
  padding: var(--kc-space-2xl) var(--kc-margin);
  padding-bottom: max(var(--kc-space-2xl), env(safe-area-inset-bottom));
  background: var(--kc-block);
  color: var(--kc-ivory);
  text-align: center;
}
.footer__line { margin: 0; font-family: var(--kc-font-display); font-size: var(--kc-headline-sm); line-height: 1.25; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kc-space-2xs) var(--kc-space-lg); }
.footer__links a {
  font-size: var(--kc-body-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: var(--kc-space-2xs) 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--kc-dur-hover) var(--kc-ease-out);
}
.footer__legal { margin: 0; font-size: var(--kc-label); color: var(--kc-taupe); letter-spacing: 0.04em; }

/* ---------- Hover, mouse only ---------- */

@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover { background-size: 100% 1px; }
  .swatch:not(:has(input:checked)):hover { border-color: var(--kc-ivory); background: rgba(252, 252, 250, 0.08); }
  .button:hover { background: var(--kc-chocolate-deep); }
}

/* ---------- Entrance: one staggered fade-up, then still ---------- */

.js .reveal { animation: rise var(--kc-dur-reveal) var(--kc-ease-out) both; }
.js .hero__kicker.reveal { animation-delay: 200ms; }
.js .hero__title.reveal { animation-delay: 250ms; }
.js .hero__lede.reveal { animation-delay: calc(250ms + var(--kc-stagger) * 2); }
.js .signup.reveal { animation-delay: calc(250ms + var(--kc-stagger) * 4); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero__photo { animation: none; }
  .js .reveal, .signup__done:not([hidden]) { animation-name: fade; }
  .button__dots i { animation: none; opacity: 0.7; }
}

@media (prefers-contrast: more) {
  .hero__wash { background: rgba(61, 44, 36, 0.8); }
  .swatch { border-color: var(--kc-ivory); }
}

@media (max-height: 700px) { .hero__placeholder-tag { display: none; } }

/* Short phones (iPhone SE and similar): tighten so the button stays above the fold */
@media (max-height: 700px) {
  .hero { padding-top: var(--kc-space-md); padding-bottom: var(--kc-space-md); }
  .wordmark { margin-bottom: var(--kc-space-md); }
  .wordmark__logo { width: 7rem; }
  .hero__kicker { margin-bottom: var(--kc-space-2xs); }
  .hero__title { font-size: 1.75rem; }
  .hero__lede { margin-top: var(--kc-space-2xs); font-size: var(--kc-body-sm); }
  .signup { margin-top: var(--kc-space-md); }
}

/* ---------- Stone theme: no photo, her travertine and chocolate type (like her Instagram tiles) ---------- */
.theme-stone { background: var(--kc-stone); }
.theme-stone .hero { color: var(--kc-chocolate); }
.theme-stone .hero__photo { display: none; }
.theme-stone .hero__wash {
  background:
    radial-gradient(80% 70% at 78% 12%, rgba(252, 252, 250, 0.75) 0%, rgba(252, 252, 250, 0) 60%),
    radial-gradient(90% 80% at 10% 100%, rgba(167, 155, 142, 0.35) 0%, rgba(167, 155, 142, 0) 60%),
    url("/images/stone-tile-soft.jpg") center / 900px auto repeat;
  background-color: var(--kc-stone);
}
.theme-stone .hero__wash::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(236, 230, 220, 0.82); /* mutes the texture right back so the type reads easily */
}
.theme-stone .hero__kicker,
.theme-stone .hero__lede,
.theme-stone .signup__fineprint,
.theme-stone .signup__done-body { color: var(--kc-chocolate); }
.theme-stone .hero__kicker, .theme-stone .signup__fineprint { color: var(--kc-taupe-deep); }
.theme-stone .field__optional { color: var(--kc-taupe-deep); }
.theme-stone .field__input { border-color: rgba(107, 95, 85, 0.35); }
.theme-stone .field__input:focus-visible { box-shadow: 0 0 0 2px var(--kc-stone), 0 0 0 4px var(--kc-chocolate); }
.theme-stone .field__error, .theme-stone .signup__error { color: var(--kc-error); }
.theme-stone .swatch { border-color: rgba(107, 95, 85, 0.45); }
.theme-stone .swatch__dot { box-shadow: 0 0 0 1px rgba(107, 95, 85, 0.4); }
.theme-stone .swatch:has(input:checked) { background: var(--kc-chocolate); border-color: var(--kc-chocolate); color: var(--kc-ivory); }
.theme-stone .swatch:has(input:checked) .swatch__dot { box-shadow: 0 0 0 1px var(--kc-ivory); }
.theme-stone .swatch:has(input:focus-visible), .theme-stone .button:focus-visible { outline-color: var(--kc-chocolate); }
.theme-stone .hero__placeholder-tag { display: none; }
@media (hover: hover) and (pointer: fine) {
  .theme-stone .swatch:not(:has(input:checked)):hover { border-color: var(--kc-chocolate); background: rgba(75, 46, 32, 0.05); }
}
.wordmark__logo--choc { display: none; }
.theme-stone .wordmark__logo--ivory { display: none; }
.theme-stone .wordmark__logo--choc { display: block; }