/* For creators page (/creators.html). Loaded after styles.css + pages.css.
   Sections: hero stage, perks bento, how it works, shoot types, city explorer, standards, apply form, FAQ, CTA. */

/* The hidden attribute must win over the display rules below */
.cr-page [hidden] { display: none; }

/* Keep hyphenated words together; avoid one-word last lines in supporting copy */
.cr-nowrap { white-space: nowrap; }
.cr-page .shead .lead, .cr-cta .lead { text-wrap: balance; }
.cr-page .lead, .cr-type p { text-wrap: pretty; }

/* ---------- 1. Hero: the camera (ramp.design money gun style) ----------
   Full-height section with big type. The camera sits bottom left and turns to aim at the pointer; shots fire
   instant prints (absolutely placed, moved by /js/creators.js) from the lens, over the copy, clipped to the section. */
/* Fills the screen below the 72px header; even top/bottom padding so the copy sits in the true visual centre */
.cr-shoot { position: relative; min-height: max(640px, calc(100vh - 72px)); display: grid; place-items: center; padding: 64px 16px; overflow: hidden; isolation: isolate; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.cr-shoot-copy { position: relative; z-index: 1; text-align: center; max-width: 1040px; }
.cr-shoot-copy .eyebrow { display: inline-block; margin-bottom: 18px; }
.cr-shoot-copy h1 { font-size: 96px; line-height: 92px; font-weight: 800; letter-spacing: -0.05em; text-wrap: balance; }
.cr-shoot-copy .lead { max-width: 600px; margin: 24px auto 0; text-wrap: balance; }
.cr-shoot-copy .hero-actions { justify-content: center; margin-top: 32px; }

/* Camera, prints and flash burst: /css/camera.css */

/* ---------- 2. Perks bento ---------- */
/* Perk list + portal preview: text rows on the left, one big flat grey stage on the right */
.cr-perks { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.cr-perk-list { list-style: none; display: flex; flex-direction: column; }
/* Dividers sit under each row (none above the first); the progress line fills along the active row's divider */
.cr-perk-list button { position: relative; width: 100%; text-align: left; padding: 22px 0; border-bottom: 1px solid var(--border); background: none; }
.cr-perk-list li:first-child button { padding-top: 0; }
.cr-perk-list strong { display: block; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--label); transition: color .25s; }
.cr-perk-list button:hover strong, .cr-perk-list [aria-selected="true"] strong { color: var(--black); }
/* Description opens with a smooth height change (grid rows 0fr to 1fr), never clipped */
.cr-perk-d { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--ease), opacity .35s ease, margin-top .55s var(--ease); }
.cr-perk-d > span { min-height: 0; overflow: hidden; max-width: 460px; font-size: 16px; line-height: 24px; color: var(--body); text-wrap: pretty; }
.cr-perk-list [aria-selected="true"] .cr-perk-d { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; transition-delay: 0s, .12s, 0s; }
.cr-perk-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.cr-perk-bar i { display: block; height: 100%; width: 0; background: var(--purple); }
.cr-perk-list [aria-selected="true"] .cr-perk-bar i { animation: crBar var(--perk-ms, 5200ms) linear forwards; }
.cr-perks.manual .cr-perk-bar { display: none; }
.cr-perks.paused .cr-perk-bar i { animation-play-state: paused; }
@keyframes crBar { to { width: 100%; } }
.cr-perk-stage { position: relative; min-height: 460px; border-radius: var(--r-panel); background: var(--grey); display: grid; place-items: center; padding: 48px; }
/* All previews share one grid cell and crossfade, so the panel never jumps between cards */
.cr-perk-view { grid-area: 1 / 1; width: 100%; max-width: 420px; opacity: 0; transform: translateY(12px) scale(.98); visibility: hidden;
  transition: opacity .45s ease, transform .6s var(--ease), visibility 0s .6s; }
.cr-perk-view.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .45s ease .1s, transform .6s var(--ease) .1s, visibility 0s; }
.cr-perk-view .sreel-ui { box-shadow: var(--shadow-ui); border-radius: 20px; padding: 24px 26px; font-size: 16px; }
.cr-perk-view .sreel-ui-h strong { font-size: 20px; }
.cr-feat-faces { display: flex; padding: 2px 0 10px; }
.cr-feat-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); margin-left: -8px; }
.cr-feat-faces img:first-child { margin-left: 0; }
.cr-feat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.cr-feat-actions span { display: grid; place-items: center; height: 36px; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--grey); }
.cr-feat-actions .on { background: var(--purple); color: var(--white); }

/* ---------- 3. How it works: shared step carousel (/css/steps.css) ---------- */
@keyframes crViewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 4. Shoot types ---------- */
.cr-split-lead { max-width: 380px; }
.cr-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cr-type { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--black); color: var(--white); }
.cr-type img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cr-type::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,27,27,0) 40%, rgba(27,27,27,.78) 100%); }
.cr-type:hover img { transform: scale(1.05); }
.cr-type-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 24px; }
.cr-type h3 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.cr-type p { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .85); margin-top: 4px; }
.cr-tags { display: flex; gap: 6px; margin-top: 12px; }
.cr-tags em { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- 5. City explorer ---------- */
.cr-cities-sec { background: linear-gradient(180deg, var(--white) 0%, #FAF9FE 50%, var(--white) 100%); }
.cr-explorer { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: stretch; }
.cr-map { position: relative; border-radius: var(--r-card); overflow: hidden; background: #F7F5F8; aspect-ratio: 1120 / 630; align-self: start; }
.cr-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; }
.cr-pin i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px rgba(120, 82, 212, .18); transition: transform .3s var(--ease), background-color .3s; }
.cr-pin i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: rgba(120, 82, 212, .3); animation: crPulse 2.4s ease-out infinite; }
.cr-pin:nth-of-type(2n) i::after { animation-delay: -1.2s; }
@keyframes crPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.cr-pin span { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; background: var(--black); color: var(--white); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.cr-pin:hover span, .cr-pin:focus-visible span, .cr-pin.on span { opacity: 1; transform: translateX(-50%); }
.cr-pin.on i { transform: scale(1.3); background: var(--purple-deep); }
.cr-pin.dim i { background: #B9A8E8; }

.cr-finder { background: var(--white); border: 1px solid #EEF0F3; border-radius: var(--r-card); padding: 20px; box-shadow: 0 12px 32px -18px rgba(27, 27, 27, .14); display: flex; flex-direction: column; min-height: 0; contain: size; } /* contain: size lets the map set the row height; the list scrolls inside */
.cr-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.cr-search:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--lavender); }
.cr-search svg { width: 18px; height: 18px; color: var(--label); flex: none; }
.cr-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; background: transparent; }
.cr-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cr-regions button { font-size: 13px; font-weight: 600; padding: 0 14px; height: 36px; border-radius: 999px; background: var(--grey); color: var(--body); transition: background-color .2s, color .2s; }
.cr-regions button:hover { background: var(--lavender); color: var(--purple); }
.cr-regions button[aria-pressed="true"] { background: var(--purple); color: var(--white); }
.cr-count { font-size: 13px; color: var(--label); margin: 14px 0 8px; }
.cr-city-list { list-style: none; overflow-y: auto; flex: 1; min-height: 120px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 2px 12px; padding: 0 4px 16px 0; scrollbar-width: none; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.cr-city-list li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 10px; animation: faqIn .3s var(--ease); }
.cr-city-list li:hover { background: var(--grey); }
.cr-city-list b { font-size: 14px; font-weight: 600; line-height: 19px; }
.cr-city-list small { font-size: 12px; color: var(--label); }
.cr-city-list mark { background: var(--lavender); color: var(--purple); border-radius: 3px; }
.cr-nomatch { font-size: 14px; color: var(--body); background: var(--grey); border-radius: 12px; padding: 12px 14px; }
.cr-nomatch a { color: var(--purple); font-weight: 600; }

/* ---------- 6. Standards ---------- */
/* Four requirements in a row: hairline on top, purple check, title and one line. No card surface. */
.cr-look { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cr-look li { border-top: 1px solid var(--border); padding-top: 24px; }
.cr-look .cr-tick { display: block; width: 22px; height: 22px; color: var(--purple); stroke-width: 2.5; margin-bottom: 16px; }
.cr-look b { display: block; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.cr-look span { display: block; margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--body); text-wrap: pretty; }

/* ---------- 7. Apply ---------- */
.cr-apply-sec { margin: 0 16px; border-radius: var(--r-panel); background: var(--grad-secondary); }
.cr-apply { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.cr-apply-intro .eyebrow { display: inline-block; margin-bottom: 14px; }
.cr-apply-intro .lead { margin-top: 16px; max-width: 460px; }
.cr-apply-points { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.cr-apply-points li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.cr-apply-points svg { width: 18px; height: 18px; color: var(--purple); }
.cr-apply-illus { width: 180px; margin-top: 32px; background: var(--white); border-radius: 24px; padding: 18px; }

.cr-form-card { background: var(--white); border-radius: var(--r-card); padding: 32px; box-shadow: 0 24px 60px -24px rgba(27, 27, 27, .22); display: flex; flex-direction: column; }
/* JS locks min-height to the tallest step; the button row sits on the bottom edge and the success message centres */
.cr-form-card form { flex: 1; display: flex; flex-direction: column; }
.cr-form-card .cr-form-nav { margin-top: auto; }
.cr-form-card.is-done { justify-content: center; }
/* Honeypot field: off-screen for people, still in the form for bots */
.cr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cr-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.cr-progress span { height: 4px; border-radius: 4px; background: var(--grey); position: relative; overflow: hidden; }
.cr-progress span::after { content: ""; position: absolute; inset: 0; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.cr-progress span.on::after { transform: scaleX(1); }
.cr-step-of { font-size: 13px; color: var(--label); margin: 12px 0 4px; }
.cr-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; animation: crViewIn .4s var(--ease); }
.cr-fs legend { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; padding: 0; }
.cr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cr-inp { display: flex; flex-direction: column; gap: 6px; }
.cr-inp > span { font-size: 13px; font-weight: 600; }
.cr-inp em { font-style: normal; font-weight: 500; color: var(--label); }
.cr-inp input, .cr-inp textarea { font: inherit; font-size: 15px; height: 46px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; background: var(--white); transition: border-color .2s, box-shadow .2s; width: 100%; }
.cr-inp textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 22px; }
.cr-inp input:focus, .cr-inp textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--lavender); }
.cr-inp .invalid, .cr-pills.invalid { border-color: #D64545; }
.cr-pills.invalid label span { border-color: #D64545; }
.cr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-pills label { position: relative; }
.cr-pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cr-pills span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.cr-pills span:hover { border-color: #C3C7CE; }
.cr-pills input:checked + span { background: var(--lavender); color: var(--purple); border-color: transparent; }
.cr-pills input:focus-visible + span { box-shadow: 0 0 0 3px var(--lavender); border-color: var(--purple); }
.cr-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--body); }
.cr-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--purple); flex: none; }
.cr-check a, .faq-a a:not(.btn) { color: var(--purple); font-weight: 600; }
.cr-err { color: #C23B3B; font-size: 14px; min-height: 20px; margin-top: 12px; }
.cr-form-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.cr-success { text-align: center; padding: 24px 0 8px; animation: crViewIn .5s var(--ease); outline: none; }
.cr-success-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lavender); color: var(--purple); }
.cr-success-ico svg { width: 30px; height: 30px; }
.cr-success h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 16px; }
.cr-success p { color: var(--body); margin: 8px auto 20px; max-width: 360px; line-height: 24px; }

/* ---------- 9. CTA ---------- */
.cr-cta { background: var(--white); padding-top: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cr-regions button { height: 40px; }
  .cr-apply-sec { margin: 0 8px; border-radius: 24px; }
  .cr-perks { grid-template-columns: 1fr; gap: 28px; }
  .cr-perk-stage { order: -1; min-height: 340px; padding: 28px 16px; border-radius: 24px; }
  .cr-perk-list strong { font-size: 19px; line-height: 25px; }
  .cr-types { grid-template-columns: 1fr; }
  .cr-type { aspect-ratio: 4 / 3; }
  /* Stronger scrim on phones: the copy covers more of the photo, so it needs a darker base to stay legible */
  .cr-type::after { background: linear-gradient(180deg, rgba(27,27,27,0) 25%, rgba(27,27,27,.72) 62%, rgba(27,27,27,.9) 100%); }
  .cr-type-body { padding: 18px; }
  .cr-type h3 { font-size: 20px; line-height: 26px; }
  .cr-type p { font-size: 14px; line-height: 20px; }
  .cr-explorer { grid-template-columns: 1fr; }
  .cr-finder { contain: none; max-height: 440px; }
  .cr-look { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .cr-apply { grid-template-columns: 1fr; gap: 32px; }
  .cr-apply-illus { display: none; }
  .cr-form-card { padding: 24px 20px; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .cr-types { grid-template-columns: 1fr 1fr; }
}
/* Tablets and phones: smaller heading, and room under the copy where the camera rests (js/camera.js home()) */
@media (max-width: 960px) {
  .cr-shoot { min-height: 0; padding: 48px 16px 220px; }
  .cr-shoot-copy h1 { font-size: 48px; line-height: 50px; }
}
@media (max-width: 480px) {
  .cr-row { grid-template-columns: 1fr; }
  .cr-look { grid-template-columns: 1fr; }
  .cr-city-list { grid-template-columns: 1fr; }
  .cr-pin i { width: 10px; height: 10px; box-shadow: 0 0 0 3px rgba(120, 82, 212, .18); }
  .cr-pin span { display: none; }
  .cr-form-nav .btn { flex: 1; min-width: 0; }
  }

/* Reduced motion: the global rule in styles.css stops animations; the camera stays still and prints just appear */
@media (prefers-reduced-motion: reduce) {
  .cr-type:hover img { transform: none; }
}

/* FAQ polish: balanced question wraps; keep the ask input full height when the shared form stacks on mobile */
.cr-page .faq-item summary { text-wrap: balance; }
@media (max-width: 960px) {
  .cr-page .faq-ask input { flex: none; }
  .cr-page .faq-chips button { min-height: 36px; }
}

/* ---------- QA polish pass (Oct 2026) ---------- */
p { text-wrap: pretty; }
.lead { text-wrap: balance; }
/* Apply illustration: no white tile (its off-white backdrop showed as a square); multiply it onto the lavender panel */
.cr-apply-illus { display: block; background: none; padding: 0; border-radius: 0; mix-blend-mode: multiply; width: 170px; height: auto; }
@media (max-width: 960px) {
  .faq-chips button { min-height: 40px; }
}
.faq-answer a:not(.btn) { color: var(--purple); font-weight: 600; }
.cr-page .cr-apply-intro .lead { text-wrap: balance; max-width: 500px; }
.cr-city-list::-webkit-scrollbar { display: none; }

/* Customer logo carousel under the hero (same as the solutions pages) */
.sl-logos { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 24px 0 8px; overflow-x: clip; }
.sl-logos .micro { font-weight: 600; color: var(--black); margin-bottom: 8px; }
.sl-logos .logo-marquee { max-width: 1180px; }
.sl-logos .marquee-track.back { margin-left: -60px; }
@media (max-width: 960px) { .sl-logos { gap: 20px; } }