/* Shared visual contract for the five public /create/* product pages.
 *
 * This file owns family geometry only: page width, hero rhythm, type scale and the shared
 * composer/chips/trust treatment. Product evidence (books, animation frames, music-video scenes
 * and model cards) stays in each page's prefixed stylesheet.
 *
 * Every selector is rooted at .lp-create-product so no legacy silo, tutorial or home page can
 * inherit the contract accidentally. */

.lp-create-product {
  --font-body: var(--rk-font-body);
  --font-display: var(--rk-font-display);
  --shadow-card: var(--rk-shadow-card);
  --shadow-object: var(--rk-shadow-object);
  --create-pad: clamp(36px, 3.6vw, 60px);
  --create-gutter: clamp(24px, 4vw, 72px);
  --create-max: 1560px;
  --create-panel-radius: clamp(18px, 1.8vw, 26px);
  --create-card-radius: clamp(14px, 1.2vw, 18px);
  --create-card-padding: clamp(20px, 2.4vw, 32px);
  --create-section-head-max: 760px;
  --create-faq-head-max: 720px;
  --create-hero-copy-max: 640px;
  --create-hero-visual-max: 760px;
  --create-hero-image-max-height: 66svh;
  --create-hero-stack-image-max-height: 42svh;
  color: var(--rk-ink);
  font-family: var(--rk-font-body);
}

.lp-create-product :where(h1, h2, h3, h4, p, ul, ol, li, figure, figcaption) {
  margin: 0;
  padding: 0;
}

.lp-create-product :where(ul, ol) { list-style: none; }
.lp-create-product :where(img, svg) { max-width: 100%; }

.lp-create-product .create-product-band {
  width: min(calc(100% - 2 * var(--create-gutter)), var(--create-max));
  margin-inline: auto;
  padding: var(--create-pad) 0;
}

.lp-create-product .create-product-band-tint {
  --create-inset: clamp(18px, 2.4vw, 44px);
  width: min(calc(100% - 2 * var(--create-gutter)), var(--create-max));
  margin-inline: auto;
  padding: var(--create-pad) var(--create-inset);
  border-radius: var(--create-panel-radius);
  background: var(--rk-paper-2);
}

.lp-create-product h2 {
  margin-top: 12px;
  font-family: var(--rk-font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lp-create-product h3 {
  color: var(--rk-ink);
  font: 700 clamp(17px, 1.2vw, 20px)/1.3 var(--rk-font-body);
}

.lp-create-product .create-product-section-head {
  max-width: var(--create-section-head-max);
  margin-bottom: clamp(26px, 3vw, 42px);
}

.lp-create-product .create-product-section-head + * { margin-top: 0; }

.lp-create-product #faq .create-product-section-head {
  max-width: var(--create-faq-head-max);
  margin-inline: auto;
  text-align: center;
}

.lp-create-product #faq .create-product-section-head .create-product-kicker {
  justify-content: center;
}

.lp-create-product .create-product-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(460px, 1.1fr);
  gap: clamp(28px, 3.2vw, 56px);
  align-items: center;
  min-height: 62svh;
  padding-block: clamp(34px, 4.5vh, 64px) clamp(20px, 2.5vh, 28px);
}

.lp-create-product .create-product-hero-copy {
  width: 100%;
  max-width: var(--create-hero-copy-max);
  min-width: 0;
  /* Anchor every product claim to the same top edge. The hero artwork may stay vertically centred,
     but centring each copy block by its own height makes shorter pages start visibly lower. */
  align-self: start;
}

.lp-create-product .create-product-hero-visual { min-width: 0; }

.lp-create-product .create-product-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 12.5px var(--rk-font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rk-emerald);
}

.lp-create-product .create-product-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: currentColor;
}

.lp-create-product .create-product-hero h1 {
  margin: 14px 0 0;
  font-family: var(--rk-font-display);
  font-size: clamp(36px, 3.3vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lp-create-product .create-product-lede {
  margin-top: 12px;
  max-width: 62ch;
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.6;
  color: var(--rk-ink-soft);
}

.lp-create-product .create-product-try {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(14px, 2vh, 24px);
}

.lp-create-product .create-product-try-label {
  font: 600 14px var(--rk-font-body);
  color: var(--rk-ink-muted);
}

/* The four pages render the same composer component. Keeping its final geometry here prevents a
 * page-specific sheet from turning the same control into four different sizes. */
.lp-create-product .composer {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 62px;
  margin-top: clamp(18px, 2.4vh, 30px);
  padding: 6px 6px 6px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-composer-border, var(--rk-line));
  border-radius: var(--rk-radius-lg);
  box-shadow: var(--rk-shadow-card);
  transition: box-shadow .3s, border-color .3s;
}

.lp-create-product .composer:focus-within {
  border-color: var(--rk-emerald);
  box-shadow: 0 0 0 4px var(--rk-focus-ring);
}

.lp-create-product .composer-idea-icon {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--rk-emerald);
  opacity: .72;
  pointer-events: none;
}

.lp-create-product .composer-idea-icon svg { width: 20px; height: 20px; }

.lp-create-product .composer-fallback {
  position: absolute;
  z-index: 1;
  inset-inline: 50px 200px;
  top: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--rk-ink-muted);
  font: 400 16px var(--rk-font-body);
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .16s ease;
}

.lp-create-product .composer:has(#hero-input[placeholder=""]):not(:focus-within) .composer-fallback { opacity: .72; }

.lp-create-product .composer input {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--rk-ink);
  font: 600 16px var(--rk-font-body);
}

.lp-create-product .composer input::placeholder {
  color: var(--rk-ink-muted);
  font-weight: 400;
}

.lp-create-product .composer button {
  flex: 0 0 auto;
  /* Desktop labels vary substantially by locale. Keep the shared height/padding while allowing
     the control to grow to its translated label instead of clipping it into a fixed width. */
  min-width: max-content;
  height: 50px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--rk-emerald);
  color: #fff;
  font: 700 15px var(--rk-font-body);
  transition: background .18s, transform .18s;
}

.lp-create-product .composer button:hover {
  background: var(--rk-emerald-hover);
  transform: translateY(-1px);
}

.lp-create-product .composer button svg {
  flex: none;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2);
}

.lp-create-product .composer button:hover svg { transform: translateX(4px); }

.lp-create-product .chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.lp-create-product .chips .idea-chip {
  appearance: none;
  margin: 0;
  min-height: 36px;
  padding: 6px 14px;
  text-align: left;
  color: var(--rk-ink-soft);
  font: 600 13.5px var(--rk-font-body);
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  background: var(--rk-surface);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}

.lp-create-product .chips .idea-chip:hover,
.lp-create-product .chips .idea-chip.is-selected {
  border-color: var(--rk-emerald);
  color: var(--rk-emerald);
  background: var(--rk-emerald-soft);
  transform: translateY(-2px);
}

.lp-create-product .trust {
  display: flex;
  gap: 10px 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  color: var(--rk-ink-soft);
  font: 600 13.5px var(--rk-font-body);
}

.lp-create-product .trust span {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Icons already separate the three proofs. Borders become dangling strokes when translated or
 * tool-specific claims wrap, so the family treatment uses spacing only at every desktop tier. */
.lp-create-product .trust span + span {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.lp-create-product .trust svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--rk-emerald);
  fill: none;
}

/* At the narrow desktop tier the copy column is still beside the product visual. Removing the
 * wide-tier separators reclaims enough width for ordinary three-item trust rows without turning
 * one item into a visually detached second line. Longer tool-page claims may still wrap naturally. */
@media (max-width: 1100px) and (min-width: 901px) {
  .lp-create-product .trust {
    gap: 10px 8px;
    font-size: 13px;
  }

}

/* Product art remains page-owned, but it obeys one viewport envelope. */
.lp-create-product .create-product-hero-visual {
  width: 100%;
  max-width: var(--create-hero-visual-max);
  justify-self: end;
}

.lp-create-product .create-product-hero-visual img {
  max-height: var(--create-hero-image-max-height);
  object-fit: contain;
}

@media (max-width: 900px) {
  .lp-create-product .create-product-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(26px, 4vw, 40px);
  }

  .lp-create-product .create-product-hero-copy { max-width: none; }

  .lp-create-product .create-product-hero-visual {
    max-width: 720px;
    justify-self: center;
  }

  .lp-create-product .create-product-hero-visual img {
    max-height: var(--create-hero-stack-image-max-height);
  }
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .lp-create-product .chips .idea-chip { min-height: 44px; }
}

@media (max-width: 640px) {
  .lp-create-product .create-product-band {
    width: min(calc(100% - 36px), var(--create-max));
  }

  .lp-create-product .create-product-band-tint {
    width: min(calc(100% - 36px), var(--create-max));
    padding-inline: 18px;
  }

  .lp-create-product .composer {
    height: auto;
    flex-direction: var(--create-composer-mobile-direction, column);
    align-items: var(--create-composer-mobile-align, stretch);
    gap: 10px;
    padding: 12px;
  }

  .lp-create-product .composer input { height: 44px; }

  .lp-create-product .composer button {
    width: var(--create-composer-mobile-button-width, 100%);
    min-width: 0;
  }

  .lp-create-product .composer-fallback,
  .lp-create-product .composer-idea-icon { display: none; }

  .lp-create-product .create-product-hero-visual img { max-height: none; }
}

/* "Watch all our films" — the one exit from a product page's sample films into /videos
   (2026-08-23). Underline + inline arrow rather than the closing CTA's flex row: the label wraps
   in long languages, and a flex row with a bottom border turns into a stray rule when it does. */
.lp-create-product .create-product-all-films {
  display: inline-block;
  margin-block-start: 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rk-ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.lp-create-product .create-product-all-films:hover { color: var(--rk-emerald); }
[dir="rtl"] .lp-create-product .create-product-all-films span { display: inline-block; transform: scaleX(-1); }