/**
 * freeform-public.css — published freeform look (shared with editor)
 * Animations mirror page-editor pe-anim so editor === public.
 */

.ff-stack,
.cms-public-stack {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent;
  color: #0f172a;
  /* Match unused_demo: Syne display / DM Sans body / DM Mono labels */
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #f4f4f5;
  /* Professional page scroll only — never nest scroll regions */
  overflow-x: hidden;
  overflow-y: visible;
}
.ff-stack .font-display,
.ff-flow [style*="font-display"],
.cdr-mega,
.cdr-xl {
  font-family: "Syne", "Arial Black", system-ui, sans-serif;
}
.cdr-kicker,
.cdr-nav-desk a,
.font-mono {
  font-family: "DM Mono", ui-monospace, monospace;
}

.ff-section,
.cms-ff-section {
  position: relative;
  width: 100%;
  overflow: hidden; /* freeform absolute only */
  box-sizing: border-box;
}

/* Flow public: never absolute % geometry (Bot API page.v2 CTAs) */
.ff-flow {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
  box-sizing: border-box;
  color: #0f172a;
}
.ff-flow .ff-flow-block {
  position: static;
  width: 100%;
  max-width: 42rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}
.ff-flow .ff-flow-block h1,
.ff-flow .ff-flow-block h2 {
  margin: 0 0 0.4em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  color: #0f172a;
}
.ff-flow .ff-flow-block p { margin: 0 0 0.5em; color: #334155; }
.ff-flow .ff-flow-cta { margin: 0.25rem 0 0; }
.ff-flow .ff-flow-btn { position: static !important; }
.ff-flow > .ff-el,
.ff-flow .ff-el.pe-el-free {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 42rem;
  height: auto !important;
  min-height: 2.5rem;
  margin: 0.35rem 0;
  transform: none !important;
}

/* Flow modules: complete sections, content defines height, no inner scroll */
.ff-section.ff-flow,
.cms-ff-section.ff-flow,
.ff-flow {
  overflow: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.ff-flow * {
  /* Don't create scroll traps inside sections */
  max-height: none;
}
.ff-flow .cdr-sec {
  overflow: visible;
}
/* Fixed site header (matches unused_demo Navbar) */
.cms-public header.cdr-nav,
.cms-public .cdr-nav,
.cdr-public header.cdr-nav,
.ff-stack > .ff-flow header.cdr-nav,
.ff-stack header.cdr-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 200 !important;
  margin: 0 !important;
}
/* Space under fixed header so first content isn't covered */
html.cms-public,
html.cdr-public {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}
html.cms-public body,
html.cdr-public body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.cms-public #cs-stage,
.cdr-public #cs-stage {
  overflow: visible !important;
  padding-top: 0 !important;
}
/* Header module collapses height (nav is fixed) + spacer for content */
.ff-flow[data-mod-id="mod_hdr_nav"],
.ff-flow[data-mod-id="mod_hdr_tokens"],
.ff-flow[data-mod-id="mod_home_tokens"] {
  min-height: 0 !important;
}
.ff-flow[data-mod-id="mod_hdr_nav"] {
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: none;
}
.ff-flow[data-mod-id="mod_hdr_nav"] header,
.ff-flow[data-mod-id="mod_hdr_nav"] .cdr-nav {
  pointer-events: auto;
}
/* First content module: clear fixed header */
.ff-stack > .ff-flow[data-mod-id="mod_home_hero"],
.ff-stack > .ff-flow[data-mod-id="mod_home_tokens"] + .ff-flow {
  /* hero already has pt in design; ensure sticky offset */
}
.cms-public .ff-stack {
  padding-top: 0;
}

.ff-el,
.ff-el.pe-el-free {
  box-sizing: border-box;
  touch-action: manipulation;
}

.ff-text,
.ff-text.pe-text {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ff-text p,
.ff-text h1,
.ff-text h2,
.ff-text h3,
.ff-text h4 {
  margin: 0 0 0.35em;
}
.ff-text p:last-child,
.ff-text h1:last-child,
.ff-text h2:last-child {
  margin-bottom: 0;
}
.ff-text[data-align="center"] { text-align: center; }
.ff-text[data-align="right"] { text-align: right; }
.ff-text[data-align="left"] { text-align: left; }
.ff-text[data-align="justify"] { text-align: justify; }

.ff-btn {
  cursor: pointer;
}

/* —— Animations (same names as page-editor) —— */
.pe-anim,
.ff-anim {
  animation-duration: 0.65s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-anim--fade-in, .ff-anim--fade-in { animation-name: peFadeIn; }
.pe-anim--fade-up, .ff-anim--fade-up { animation-name: peFadeUp; }
.pe-anim--fade-down, .ff-anim--fade-down { animation-name: peFadeDown; }
.pe-anim--fade-left, .ff-anim--fade-left { animation-name: peFadeLeft; }
.pe-anim--fade-right, .ff-anim--fade-right { animation-name: peFadeRight; }
.pe-anim--zoom-in, .ff-anim--zoom-in { animation-name: peZoomIn; }
.pe-anim--zoom-out, .ff-anim--zoom-out { animation-name: peZoomOut; }
.pe-anim--slide-up, .ff-anim--slide-up { animation-name: peSlideUp; }
.pe-anim--slide-down, .ff-anim--slide-down { animation-name: peSlideDown; }
.pe-anim--bounce-in, .ff-anim--bounce-in { animation-name: peBounceIn; animation-duration: 0.85s; }
.pe-anim--pulse, .ff-anim--pulse { animation-name: pePulse; animation-iteration-count: infinite; animation-duration: 1.4s; }
.pe-anim--float, .ff-anim--float { animation-name: peFloat; animation-iteration-count: infinite; animation-duration: 2.4s; }
.pe-anim--spin-in, .ff-anim--spin-in { animation-name: peSpinIn; }
.pe-anim--blur-in, .ff-anim--blur-in { animation-name: peBlurIn; }
.pe-anim--ken-burns, .ff-anim--ken-burns { animation-name: peKenBurns; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.pe-anim--reveal, .ff-anim--reveal { animation-name: peReveal; }
.pe-anim--type-hint, .ff-anim--type-hint { animation-name: peTypeHint; animation-duration: 0.5s; }

@keyframes peFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes peFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes peFadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes peFadeLeft { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes peFadeRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes peZoomIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes peZoomOut { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes peSlideUp { from { transform: translateY(28px); opacity: 0.2; } to { transform: translateY(0); opacity: 1; } }
@keyframes peSlideDown { from { transform: translateY(-28px); opacity: 0.2; } to { transform: translateY(0); opacity: 1; } }
@keyframes peBounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes peFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes peSpinIn { from { opacity: 0; transform: rotate(-12deg) scale(0.9); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes peBlurIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes peKenBurns {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes peReveal { from { clip-path: inset(0 100% 0 0); opacity: 0.5; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes peTypeHint { 0% { opacity: 0.4; } 100% { opacity: 1; } }

/* Editor WYSIWYG: chrome doesn't change published geometry */
.pe-editor.pe-wysiwyg .pe-canvas {
  background: #0b0b0c;
}
.pe-editor.pe-wysiwyg .pe-el-tag,
.pe-editor.pe-wysiwyg .pe-handles,
.pe-editor.pe-wysiwyg .pe-media-bar,
.pe-editor.pe-wysiwyg .pe-el-hide-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.pe-editor.pe-wysiwyg .pe-el:hover > .pe-el-tag,
.pe-editor.pe-wysiwyg .pe-el.is-selected > .pe-el-tag,
.pe-editor.pe-wysiwyg .pe-el:hover > .pe-handles,
.pe-editor.pe-wysiwyg .pe-el.is-selected > .pe-handles,
.pe-editor.pe-wysiwyg .pe-el:hover > .pe-media-bar,
.pe-editor.pe-wysiwyg .pe-el.is-selected > .pe-media-bar,
.pe-editor.pe-wysiwyg .pe-el:hover > .pe-el-tag .pe-el-hide-btn,
.pe-editor.pe-wysiwyg .pe-el.is-selected .pe-el-hide-btn {
  opacity: 1;
  pointer-events: auto;
}
.pe-editor.pe-wysiwyg .pe-el-free:not(:hover):not(.is-selected) {
  border-color: transparent !important;
  box-shadow: none !important;
}
.pe-editor.pe-wysiwyg .pe-mod:not(.is-selected):not(:hover) {
  outline: none;
}
.pe-editor.pe-wysiwyg .pe-mod-bar {
  opacity: 0.35;
}
.pe-editor.pe-wysiwyg .pe-mod:hover .pe-mod-bar,
.pe-editor.pe-wysiwyg .pe-mod.is-selected .pe-mod-bar {
  opacity: 1;
}
/* Device frame: published canvas tone */
.pe-editor.pe-wysiwyg .pe-device-frame {
  background: #0b0b0c;
}
.pe-editor.pe-wysiwyg.pe-device-mobile .pe-device-frame {
  background: #0b0b0c;
}
.pe-editor.pe-wysiwyg .pe-text,
.pe-editor.pe-wysiwyg .pe-el-body {
  /* match public: no editor-only text chrome */
  outline: none;
}


.ff-flow-shell {
  width: min(28rem, 100%);
  margin: 1.25rem auto;
  min-height: 12rem;
  padding: 1.15rem 1.1rem 1.25rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(226, 232, 240, 0.18);
  box-sizing: border-box;
}
.ff-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-shell-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 650;
  color: #334155;
}
.ff-form input,
.ff-form textarea {
  display: block;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}
.ff-form button {
  min-height: 2.35rem;
  border: 0;
  border-radius: 8px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 750;
}
.ff-form.ff-auth {
  container-type: inline-size;
  height: auto;
  min-height: 100%;
  overflow: auto;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}
.ff-auth input,
.ff-auth select,
.ff-auth button[type="submit"] {
  min-height: 44px;
  font: inherit;
}
.ff-auth button[type="submit"] {
  width: 100%;
  background: #111;
  color: #f7f6f2;
  font-weight: 700;
}
.ff-auth button[type="submit"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ff-pw {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ff-pw input { flex: 1 1 auto; }
.ff-pw button[data-md-eye] {
  flex: 0 0 auto;
  min-width: 4.75rem;
  min-height: 44px;
  background: #111;
  color: #f7f6f2;
  font-weight: 700;
}
.ff-dob {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@container (max-width: 420px) {
  .ff-dob { grid-template-columns: 1fr; }
}
.ff-age {
  margin: 0;
  font-weight: 700;
}
.ff-age.is-bad { color: #ff1a1a; }
.ff-age.is-ok { color: #00b34a; }
.ff-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ff-meter[hidden] { display: none !important; }
.ff-meter__track {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.ff-meter__track span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #d9d4cc;
}
.ff-meter__label {
  margin: 0;
  min-width: 4.2rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.ff-meter.is-weak { color: #ff1a1a; }
.ff-meter.is-weak .ff-meter__track span.on { background: #ff1a1a; }
.ff-meter.is-fair { color: #ff6a00; }
.ff-meter.is-fair .ff-meter__track span.on { background: #ff6a00; }
.ff-meter.is-good { color: #1a6dff; }
.ff-meter.is-good .ff-meter__track span.on { background: #1a6dff; }
.ff-meter.is-strong { color: #00b34a; }
.ff-meter.is-strong .ff-meter__track span.on { background: #00b34a; }
.ff-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: 0.82rem;
}
.ff-rules li.is-met { color: #00b34a; font-weight: 700; }
.ff-accept {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 44px;
  font-size: 0.92rem;
  line-height: 1.35;
}
.ff-accept input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.ff-accept a { color: inherit; }
.ff-turnstile { min-height: 65px; display: flex; align-items: center; }
.ff-auth-msg { margin: 0; font-weight: 700; }
.ff-auth-msg.is-bad { color: #ff1a1a; }
.ff-auth-msg.is-ok { color: #00b34a; }

/* CS public home (x-md-home: cms-coming-soon) — full-bleed cinematic ≡ backup
 * Shell sets html.cms-cs-home. Pricing/contact keep light #f4f4f5 (no this class).
 * CORRECCIÓN B_live d57e98b: beat html.cms-public body{overflow-y:auto}; hide scrollbar; 100dvh beats inline px.
 */
html.cms-public.cms-cs-home,
html.cms-cs-home,
html.cms-public.cms-cs-home body,
html.cms-cs-home body {
  /* CORR-1048 ×3 / owner t2754u: iOS Safari fill under status/URL — 100vh→100dvh→100lvh→-webkit-fill-available.
   * 0 invented safe-area on root. Headless CDP ≠ real iPhone chrome. */
  height: 100%;
  height: -webkit-fill-available;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  background: #050508 !important;
  color: #f4f4f5;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html.cms-public.cms-cs-home::-webkit-scrollbar,
html.cms-cs-home::-webkit-scrollbar,
html.cms-public.cms-cs-home body::-webkit-scrollbar,
html.cms-cs-home body::-webkit-scrollbar,
html.cms-cs-home *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html.cms-cs-home #cms-root {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  height: 100%;
  height: -webkit-fill-available;
  /* CORR-1048 ×3: DROP max-height:100dvh — clips paint under large/layout viewport */
  max-height: none;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #050508;
  scrollbar-width: none;
}
html.cms-cs-home .ff-stack,
html.cms-cs-home .cms-public-stack {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100lvh !important;
  min-height: -webkit-fill-available !important;
  height: 100% !important;
  height: -webkit-fill-available !important;
  /* CORR-1048 ×3: DROP max-height:100dvh — clips under chrome */
  max-height: none !important;
  background: #050508 !important;
  color: #f4f4f5;
  overflow: hidden !important;
  overflow-y: hidden !important;
}
html.cms-cs-home .ff-section,
html.cms-cs-home .cms-ff-section,
html.cms-cs-home .pe-mod-stage--free {
  /* Override KV/module minHeight px so stage fills viewport (paint tip; no KV put).
   * CORR-1048 ×3: DROP max-height:100dvh; extend with 100lvh + -webkit-fill-available (iOS Safari). */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100lvh !important;
  min-height: -webkit-fill-available !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: 100lvh !important;
  height: -webkit-fill-available !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
html.cms-cs-home .ff-page-bg,
html.cms-cs-home .cms-page-bg {
  background: #050508;
}
/* CORR t2721u / owner-CS-perfecto: 0 inner scroll on overlays/modules (beat inline overflow:auto) */
html.cms-cs-home .ff-el,
html.cms-cs-home .ff-el.pe-el-free,
html.cms-cs-home .ff-text,
html.cms-cs-home .ff-html,
html.cms-cs-home .pe-text {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* CORR-1048 ×3 / owner t2754u: KEEP fixed inset 0 (a960350) + ADD min-height 100lvh/-webkit-fill-available
 * so paint fills layout viewport under iPhone Safari status/URL. Gold last-good-1021 #bg.
 * No max-width/max-height. Safe-area NEVER on root/shell/video. Headless CDP ≠ owner phone. */
html.cms-cs-home .ff-page-bg,
html.cms-cs-home .cms-page-bg,
html.cms-cs-home .ff-mod-video,
html.cms-cs-home video.ff-mod-video,
html.cms-cs-home .ff-section > video,
html.cms-cs-home .cms-ff-section > video {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100lvh !important;
  min-height: -webkit-fill-available !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  z-index: 0 !important;
}
html.cms-cs-home .ff-stack,
html.cms-cs-home .cms-public-stack,
html.cms-cs-home .ff-section,
html.cms-cs-home .cms-ff-section {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* CORR mobile-bad + gold MQ: wordmark one-line @390, «dark» #00c8ff */
html.cms-cs-home .ff-el[data-type="text"] h1.md-cs-name,
html.cms-cs-home h1.md-cs-name,
html.cms-cs-home .md-cs-name {
  margin: 0;
  padding: 0;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  font-size: clamp(3.75rem, 18vw, 7.5rem);
  color: #ffffff;
}
html.cms-cs-home h1.md-cs-name .md-d,
html.cms-cs-home .md-cs-name .md-d,
html.cms-cs-home h1.md-cs-name span[style*="color:#00c8ff"],
html.cms-cs-home h1.md-cs-name span[style*="color: #00c8ff"] {
  color: #00c8ff !important;
}
html.cms-cs-home .ff-el[data-type="text"] .ff-text,
html.cms-cs-home .ff-el[data-type="text"] .pe-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* tagline / soon clamps ≡ gold last-good-1021 */
html.cms-cs-home .ff-el[data-role="tagline"] .ff-text,
html.cms-cs-home .ff-el.md-cs-tag .ff-text {
  font-size: clamp(0.99rem, 4.2vw, 1.21rem);
  line-height: 1.35;
  white-space: normal;
}
html.cms-cs-home .ff-el[data-role="soon"] .ff-text,
html.cms-cs-home .ff-el.md-cs-soon .ff-text {
  font-size: clamp(0.68rem, 2.75vw, 0.825rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 380px) {
  html.cms-cs-home h1.md-cs-name,
  html.cms-cs-home .md-cs-name {
    font-size: 3.2rem !important;
  }
  html.cms-cs-home .ff-el[data-role="tagline"] .ff-text,
  html.cms-cs-home .ff-el.md-cs-tag .ff-text {
    font-size: 0.97rem !important;
  }
}
@media (max-height: 420px) and (orientation: landscape) {
  html.cms-cs-home h1.md-cs-name,
  html.cms-cs-home .md-cs-name {
    font-size: clamp(2.4rem, 12vw, 3.8rem) !important;
  }
}
@media (min-width: 900px), (min-width: 700px) and (min-height: 480px) and (orientation: landscape) {
  html.cms-cs-home h1.md-cs-name,
  html.cms-cs-home .md-cs-name {
    font-size: clamp(7.5rem, min(12vw, 18vh), 13rem) !important;
  }
  html.cms-cs-home .ff-el[data-role="tagline"] .ff-text,
  html.cms-cs-home .ff-el.md-cs-tag .ff-text {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  }
}