@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Marketing profile studio ─────────────────────────────────────────── */

.marketing-profile {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Everything below sizes itself against the column it actually sits in, not the
   viewport: the sidebar (18rem) and the preview rail (20–24rem) eat enough width
   that a `sm:`/`xl:` breakpoint fires while the content box is still tiny. */
.marketing-canvas { container: mkt-canvas / inline-size; }
.marketing-form { container: mkt-form / inline-size; }

.marketing-hero {
  display: flex;
  min-height: 8rem;
  align-items: center;
  border: 1px solid #e9ddf5;
  border-radius: 1.25rem;
  background: linear-gradient(110deg, rgba(244, 114, 182, 0.025) 0%, rgba(168, 85, 247, 0.02) 48%, rgba(99, 102, 241, 0.03) 100%), #fff;
  padding: 1.25rem;
  box-shadow: 0 18px 45px rgba(63, 42, 102, 0.07);
}

.marketing-hero__copy { min-width: 0; }

.marketing-hero h1 {
  max-width: 38rem;
  color: #1f1533;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.75rem, 5cqw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.marketing-hero p {
  margin-top: 1rem;
  max-width: 52rem;
  color: #6b6476;
  font-size: 0.95rem;
  line-height: 1.65;
}

.marketing-mobile-preview {
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid #e9ddf5;
  border-radius: 1rem;
  background: #fff;
}

.marketing-mobile-preview summary {
  display: flex;
  min-height: 3.5rem;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  color: #1f1533;
  font-size: 0.875rem;
  font-weight: 700;
  touch-action: manipulation;
}

.marketing-mobile-preview summary::-webkit-details-marker { display: none; }
.marketing-mobile-preview summary:focus-visible { outline: 2px solid #6d47a3; outline-offset: -3px; }
.marketing-mobile-preview[open] .marketing-mobile-preview__chevron { transform: rotate(180deg); }
.marketing-mobile-preview__chevron { transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }

/* The collapsed preview spans the whole form column, and the card is designed
   for a ~400px rail — without a cap it balloons on tablets. */
.marketing-mobile-preview__panel {
  max-width: 27rem; /* 25rem of card + the panel's own horizontal padding */
  margin-inline: auto;
}

.marketing-section {
  container: mkt-section / inline-size;
  border: 1px solid #e7e2ec;
  border-radius: 1.25rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(31, 21, 51, 0.04);
}

.marketing-section--publication {
  border-color: #e2d1f3;
  background: #fff;
}

.marketing-section__heading {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.marketing-section__heading h2 {
  color: #1f1533;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.marketing-section__heading p {
  margin-top: 0.15rem;
  color: #787080;
  font-size: 0.875rem;
  line-height: 1.5;
}

.marketing-publication {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid #eee7f5;
  padding-top: 1.25rem;
}

.marketing-publication__status,
.marketing-proof__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.marketing-publication__status[data-state="private"],
.marketing-proof__status[data-state="private"] { background: #f3f4f6; color: #4b5563; }
.marketing-publication__status[data-state="pending"],
.marketing-proof__status[data-state="pending"] { background: #fef3c7; color: #92400e; } /* amber-100 / amber-800 */
.marketing-publication__status[data-state="approved"],
.marketing-proof__status[data-state="approved"] { background: #ede9fe; color: #5b21b6; }
.marketing-publication__status[data-state="published"],
.marketing-proof__status[data-state="published"] { background: #dcfce7; color: #166534; }

.marketing-proof__status-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
}

.marketing-subject {
  cursor: pointer;
  touch-action: manipulation;
}

.marketing-subject > span {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: #fff;
  padding: 0.4rem 0.8rem;
  color: #625b69;
  font-size: 0.8rem;
  font-weight: 600;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease-out;
}

.marketing-subject input:checked + span {
  border-color: #8b63bf;
  background: #f5f0fb;
  color: #553a8b;
}

.marketing-subject input:focus-visible + span { outline: 2px solid #6d47a3; outline-offset: 2px; }
.marketing-subject:active > span { transform: scale(0.97); }

.marketing-review__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  border-bottom: 1px solid #eee7f5;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
}

/* Scroll-snap rail: swipes natively on touch, and the arrows scroll it by one
   viewport on desktop. Card width is what decides how many fit per view. */
.marketing-reviews {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.marketing-reviews::-webkit-scrollbar { display: none; }
.marketing-reviews:focus-visible { outline: 2px solid #6d47a3; outline-offset: 4px; border-radius: 0.5rem; }

.marketing-review {
  display: flex;
  flex: 0 0 86%;
  min-width: 0;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid #eee7f5;
  border-radius: 1rem;
  background: #fdfcfe;
  padding: 1rem;
}

.marketing-review__avatar {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f0e9f9;
  color: #553a8b;
  font-size: 0.875rem;
  font-weight: 700;
}

.marketing-review__body {
  margin-top: 0.75rem;
  color: #4b4553;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.marketing-review__arrow {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  color: #553a8b;
  box-shadow: inset 0 0 0 1px #e7e2ec;
  transition: background-color 160ms ease, color 160ms ease;
}

.marketing-review__arrow:hover:not(:disabled) { background: #f5f0fb; }
.marketing-review__arrow:focus-visible { outline: 2px solid #6d47a3; outline-offset: 2px; }
.marketing-review__arrow:disabled { color: #c8c2d0; cursor: default; }

/* Hairline column at the end of the rail: it only has to become visible for the
   observer to fetch the next batch, never to be seen. */
.marketing-reviews__sentinel {
  flex: 0 0 1px;
  overflow: hidden;
}

/* Cards per view come from the section's own width. On viewport queries a
   1280px screen showed three cards inside a 496px column — ~140px each. */
@container mkt-section (min-width: 30rem) {
  .marketing-review { flex-basis: calc((100% - 0.75rem) / 2); }
}

@container mkt-section (min-width: 46rem) {
  .marketing-review { flex-basis: calc((100% - 1.5rem) / 3); }
}

.marketing-save-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 10;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.625rem;
  border: 1px solid rgba(226, 209, 243, 0.85);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 28px rgba(31, 21, 51, 0.06);
  backdrop-filter: blur(12px);
}

.marketing-save-button {
  width: 100%;
  min-height: 2.75rem;
  cursor: pointer;
  border: 0;
  border-radius: 0.8rem;
  background: #553a8b; /* brand-600 — matches primary actions across the app */
  padding: 0.65rem 1.1rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 7px 18px rgba(31, 21, 51, 0.18);
  transition: background-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease;
  touch-action: manipulation;
}

.marketing-save-button:hover { background: #3e2a66; } /* brand-700 */

.marketing-profile input[type="range"] { accent-color: #6d47a3; } /* brand-500 */
.marketing-save-button:disabled { cursor: wait; opacity: 0.7; }
.marketing-save-button:active { transform: scale(0.97); box-shadow: 0 3px 9px rgba(31, 21, 51, 0.16); }
.marketing-save-button:focus-visible { outline: 2px solid #6d47a3; outline-offset: 3px; }

.marketing-proof {
  container: mkt-proof / inline-size;
  position: relative;
  overflow: hidden;
  border: 1px solid #dfd7e7;
  border-radius: 1.5rem;
  background: #fff;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  /* Kept within the preview rail's px-2 / pb-4: the rail scrolls (overflow-y-auto),
     so a larger shadow gets clipped into a hard grey block behind the card. */
  box-shadow: 0 2px 8px rgba(31, 21, 51, 0.08);
}

/* Same 400 × 365 crop the public directory card uses, so what a teacher sees
   here is what visitors see there: the bottom 35px of the upload come off,
   anchored to the top so faces stay untouched. */
.marketing-proof__photo {
  position: relative;
  aspect-ratio: 400 / 365;
  overflow: hidden;
  background: #f5f0fb;
}

.marketing-proof__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.marketing-proof__fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 25% 20%, #fff 0, #f5f0fb 38%, #e2d1f3 100%);
  color: #6d47a3;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 800;
}

.marketing-proof__fallback.hidden { display: none; }

.marketing-proof__fallback-note {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  color: #76658d;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
}

.marketing-proof__status {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  box-shadow: 0 3px 10px rgba(31, 21, 51, 0.08);
}

.marketing-proof__body { padding: 1.1rem; }
.marketing-proof__eyebrow { color: #8b63bf; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.marketing-proof__name { margin-top: 0.2rem; overflow-wrap: anywhere; color: #1f1533; font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.3rem, 7cqw, 1.65rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.marketing-proof__modality { margin-top: 0.25rem; color: #6d47a3; font-size: 0.8rem; font-weight: 700; }
.marketing-proof__bio { min-height: 4.5rem; margin-top: 1.1rem; overflow-wrap: anywhere; color: #504957; font-size: 0.85rem; line-height: 1.6; }
.marketing-proof__bio.is-placeholder { color: #9991a1; font-style: italic; }
.marketing-proof__section-label { color: #8b8490; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.marketing-proof__subjects { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.marketing-proof__subject { display: inline-flex; border-radius: 9999px; background: #f5f0fb; padding: 0.3rem 0.55rem; color: #553a8b; font-size: 0.68rem; font-weight: 700; }
.marketing-proof__empty { margin-top: 0.35rem; color: #a29aa9; font-size: 0.72rem; }
.marketing-proof__offer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.85rem; margin-top: 1.2rem; border-top: 1px solid #eeeaf1; border-bottom: 1px solid #eeeaf1; padding: 0.9rem 0; }
.marketing-proof__offer-divider { width: 1px; height: 2.4rem; background: #eeeaf1; }
.marketing-proof__offer-value { margin-top: 0.2rem; color: #1f1533; font-size: 0.9rem; font-weight: 800; }
.marketing-proof__contact { display: flex; width: 100%; cursor: pointer; align-items: center; gap: 0.7rem; margin-top: 1rem; border: 1px solid #ccebd7; border-radius: 0.9rem; background: #eaf8ef; padding: 0.75rem; text-align: left; transition: border-color 160ms ease, background-color 160ms ease, transform 140ms ease; }
.marketing-proof__contact:hover { border-color: #9ed4af; background: #dff4e6; }
.marketing-proof__contact:active { transform: scale(0.99); }
.marketing-proof__contact:focus-visible { outline: 2px solid #1f9d55; outline-offset: 2px; }
.marketing-proof__contact:disabled { cursor: default; opacity: 0.62; }
.marketing-proof__contact-icon { display: inline-flex; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 0.75rem; background: #fff; color: #1f9d55; box-shadow: 0 2px 8px rgba(31, 157, 85, 0.12); }

/* Preview card internals — measured against the card, which is ~400px in the
   rail but full-width inside the collapsible panel on small screens. */
@container mkt-proof (min-width: 20rem) {
  .marketing-proof__body { padding: 1.35rem; }
}

@container mkt-proof (max-width: 17rem) {
  .marketing-proof__offer { grid-template-columns: 1fr; gap: 0.75rem; }
  .marketing-proof__offer-divider { display: none; }
}

/* Hero sizing follows the content canvas (viewport minus the 18rem sidebar). */
@container mkt-canvas (min-width: 34rem) {
  .marketing-hero { min-height: 10rem; border-radius: 1.5rem; padding: 2rem; }
}

@container mkt-canvas (min-width: 60rem) {
  .marketing-hero { min-height: 12rem; padding: 2.5rem; }
}

@container mkt-section (min-width: 26rem) {
  .marketing-publication {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 1.25rem;
  }
}

@container mkt-form (min-width: 34rem) {
  .marketing-section { padding: 1.5rem; }
  .marketing-save-bar {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  }
  .marketing-save-button { width: auto; }
}

@media (hover: hover) and (pointer: fine) {
  .marketing-subject:hover > span { border-color: #c9ade7; background: #fbf8ff; }
  .marketing-save-button:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-mobile-preview__chevron,
  .marketing-subject > span,
  .marketing-save-button { transition-duration: 0.01ms; }

  .marketing-save-button:hover,
  .marketing-save-button:active { transform: none; }
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */

/* Shared base */
.sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 18rem;
  z-index: 50;
  background: white;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Prevent transition flash on page load */
html.sidebar-no-transition .sidebar-drawer,
html.sidebar-no-transition .lg\:pl-72 { transition: none !important; }

/* ── Impersonation banner (h-10 = 2.5rem) pushes fixed/sticky chrome down ── */
body.has-impersonation-banner .sidebar-drawer {
  top: 2.5rem;
  height: calc(100% - 2.5rem);
}

body.has-impersonation-banner .sticky.top-0:not(.impersonation-banner) {
  top: 2.5rem;
}

/* ── Mobile: overlay with backdrop ── */
@media (max-width: 1023px) {
  html.sidebar-open .sidebar-drawer {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.1);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(17, 24, 39, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  }

  html.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Desktop: layout element, slide animation, no backdrop ── */
@media (min-width: 1024px) {
  .sidebar-backdrop { display: none; }

  .lg\:pl-72 { transition: padding-left 0.26s cubic-bezier(0.4, 0, 0.2, 1); }

  /* Expanded (default) */
  html:not(.sidebar-collapsed) .sidebar-drawer { transform: translateX(0); }

  /* Collapsed */
  html.sidebar-collapsed .sidebar-drawer { transform: translateX(-100%); }
  html.sidebar-collapsed .lg\:pl-72 { padding-left: 0 !important; }

  /* Hide hamburger when sidebar is visible on desktop */
  html:not(.sidebar-collapsed) .sidebar-hamburger { display: none; }
}

/* Modal transition animations — GPU-composited */
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modal-panel-slide-up {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes modal-panel-slide-down {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
}

@keyframes modal-panel-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-panel-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.animate-modal-backdrop {
  animation: modal-backdrop-in 350ms ease-out forwards;
  will-change: opacity;
  backface-visibility: hidden;
}

.animate-modal-backdrop-out {
  animation: modal-backdrop-out 200ms ease-in forwards;
  will-change: opacity;
  backface-visibility: hidden;
}

.animate-modal-panel {
  animation: modal-panel-slide-up 350ms ease-out forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.animate-modal-panel-out {
  animation: modal-panel-slide-down 200ms ease-in forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@media (min-width: 640px) {
  .animate-modal-panel {
    animation: modal-panel-scale-in 350ms ease-out forwards;
  }

  .animate-modal-panel-out {
    animation: modal-panel-scale-out 200ms ease-in forwards;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }
}

/* ── Shimmer animation (CTA buttons, AI pill) ────────────────────────────── */

@keyframes shimmer-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  animation: shimmer-slide 3s ease-in-out infinite;
  pointer-events: none;
}

/* ── Plan cards ─────────────────────────────────────────────────────────── */

.glass-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(99, 102, 241, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pricing-highlight {
  background: white;
  border: 2px solid rgba(99, 102, 241, 0.3);
  transition: border-color 0.3s ease;
}
.pricing-highlight:hover {
  border-color: rgba(99, 102, 241, 0.5);
}

/* ── Toast Notifications ────────────────────────────────────────────────── */

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

.toast-progress {
  animation: toast-progress 10000ms linear forwards;
  will-change: width;
}

/* ── Trial Banner ───────────────────────────────────────────────────────── */

@keyframes trial-shimmer {
  0% { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(350%) skewX(-20deg); }
}

@keyframes trial-clock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.9); }
}

.trial-banner-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: trial-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.trial-clock-pulse {
  animation: trial-clock-pulse 2.5s ease-in-out infinite;
}

.trial-clock-pulse-urgent {
  animation: trial-clock-pulse 1.4s ease-in-out infinite;
}

/* ── FIM Trial Banner ───────────────────────────────────────────────────────── */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  border: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #553A8B;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #553A8B;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(85, 58, 139, 0.3);
}

input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(85, 58, 139, 0.3);
}

/* ── ROI calculator sliders (dark hero card on landing) ──────────────────── */

input[type="range"].roi-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  outline: none;
}

input[type="range"].roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  border: 3px solid #c4b5fd;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

input[type="range"].roi-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: white;
  border: 3px solid #c4b5fd;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

input[type="range"].roi-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(196, 181, 253, 0.35);
}

input[type="range"].roi-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(196, 181, 253, 0.35);
}

/* Help Center — accordion open animation */
@keyframes accordion-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-accordion-open {
  animation: accordion-open 0.18s ease-out;
}

/* ── AI lesson generation loading (lessons/self_correctable_options) ──
   Compact "working" state for the generation moment: one rotating status
   phrase beside a spinner and an indeterminate sweep bar — the frame swap is
   the real "done". */
@keyframes ai-load-phrase-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ai-load-indeterminate {
  0%   { left: -35%; width: 35%; }
  60%  { left: 55%;  width: 45%; }
  100% { left: 100%; width: 35%; }
}

.ai-load-phrase {
  animation: ai-load-phrase-in 420ms cubic-bezier(0, 0, 0.2, 1) both;
}

.ai-load-bar {
  animation: ai-load-indeterminate 1.6s cubic-bezier(0.2, 0, 0, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ai-load-phrase,
  .ai-load-bar {
    animation: none;
  }
}

/* ── Canva import wait (presentation_canva/preparing) ──
   The Canva mark holds still while the import runs around it: a conic sweep in
   Canva's own teal-to-violet, over a breathing aura of the same two colours.
   The ring is the screen's one loud element — the copy and card stay quiet. */
@keyframes canva-import-spin {
  to { transform: rotate(360deg); }
}

@keyframes canva-import-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}

.canva-import-ring {
  background: conic-gradient(from 0deg,
    rgba(0, 196, 204, 0) 0deg,
    #00c4cc 110deg,
    #7d2ae7 250deg,
    rgba(125, 42, 231, 0) 360deg);
  /* Masked into a ring: a filled conic gradient would read as a pie chart. */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: canva-import-spin 2.6s linear infinite;
}

.canva-import-aura {
  background:
    radial-gradient(circle at 32% 30%, rgba(0, 196, 204, 0.55), transparent 68%),
    radial-gradient(circle at 68% 72%, rgba(125, 42, 231, 0.55), transparent 68%);
  animation: canva-import-breathe 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .canva-import-ring,
  .canva-import-aura {
    animation: none;
  }
}

/* Flashcards — 3D flip cards and entry animation */
@keyframes flashcard-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.flashcard-fade-up {
  animation: flashcard-fade-up 400ms cubic-bezier(0, 0, 0.2, 1) both;
}

.flashcard-scene {
  perspective: 1400px;
}

.flashcard-3d {
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(0.25, 0.85, 0.3, 1);
}

.flashcard-3d.flashcard-flipped {
  transform: rotateY(180deg);
}

.flashcard-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flashcard-face-back {
  transform: rotateY(180deg);
}
/* Fix input field width to match other fields */
.iti {
  width: 100% !important;
  display: block !important;
  /* Override intl-tel-input image paths */
  --iti-path-flags-1x: url(/assets/intl-tel-input/flags-16a4d3dc5ee10c33c1c1fa895d17b773aee210454284e0054fa1db1c6194eefc.webp);
  --iti-path-flags-2x: url(/assets/intl-tel-input/flags@2x-2c031cfc543cf84f329366dc57d41d34391ab873a49b14af118064f7d5b76fa4.webp);
  --iti-path-globe-1x: url(/assets/intl-tel-input/globe-3babfb67f57c08a1226aab2269032aff13bba2514b838091f2c50ff2c9e51f2f.webp);
  --iti-path-globe-2x: url(/assets/intl-tel-input/globe@2x-e3b29d4b5f11924af258d78e77d539d51c18ee0f99a38b18236fec49b159c9c4.webp);
}

.iti__tel-input {
  width: 100% !important;
}
:root{--iti-hover-color:rgba(0, 0, 0, 0.05);--iti-border-color:#ccc;--iti-dialcode-color:#999;--iti-dropdown-bg:white;--iti-search-icon-color:#999;--iti-spacer-horizontal:8px;--iti-flag-height:12px;--iti-flag-width:16px;--iti-border-width:1px;--iti-arrow-height:4px;--iti-arrow-width:6px;--iti-triangle-border:calc(var(--iti-arrow-width) / 2);--iti-arrow-padding:6px;--iti-arrow-color:#555;--iti-path-flags-1x:url(/../img/flags.webp);--iti-path-flags-2x:url(/../img/flags@2x.webp);--iti-path-globe-1x:url(/../img/globe.webp);--iti-path-globe-2x:url(/../img/globe@2x.webp);--iti-flag-sprite-width:3904px;--iti-flag-sprite-height:12px;--iti-mobile-popup-margin:30px}.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti input.iti__tel-input,.iti input.iti__tel-input[type=tel],.iti input.iti__tel-input[type=text]{position:relative;z-index:0;margin:0!important}.iti__country-container{position:absolute;top:0;bottom:0;left:0;padding:var(--iti-border-width)}.iti__selected-country{z-index:1;position:relative;display:flex;align-items:center;height:100%;background:0 0;border:0;margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;font-weight:inherit;line-height:inherit;text-decoration:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.iti__arrow{margin-left:var(--iti-arrow-padding);width:0;height:0;border-left:var(--iti-triangle-border) solid transparent;border-right:var(--iti-triangle-border) solid transparent;border-top:var(--iti-arrow-height) solid var(--iti-arrow-color)}.iti__arrow--up{border-top:none;border-bottom:var(--iti-arrow-height) solid var(--iti-arrow-color)}.iti__dropdown-content{border-radius:3px;background-color:var(--iti-dropdown-bg)}.iti--inline-dropdown .iti__dropdown-content{position:absolute;z-index:2;margin-top:3px;margin-left:calc(var(--iti-border-width) * -1);border:var(--iti-border-width) solid var(--iti-border-color);box-shadow:1px 1px 4px rgba(0,0,0,.2)}.iti__search-input{width:100%;border-width:0;border-radius:3px;padding-left:30px;padding-right:28px}[dir=rtl] .iti__search-input{padding-left:inherit;padding-right:30px;background-position:right 8px center}.iti__search-input+.iti__country-list{border-top:1px solid var(--iti-border-color)}.iti__search-input::-webkit-search-cancel-button{appearance:none}.iti__search-input-wrapper{position:relative;display:flex;align-items:center}.iti__search-icon{position:absolute;left:8px;display:flex;pointer-events:none}[dir=rtl] .iti__search-icon{left:auto;right:8px}.iti__search-icon-svg{stroke:var(--iti-search-icon-color);fill:none;stroke-width:3}.iti__search-clear{position:absolute;right:4px;background:0 0;border:0;border-radius:3px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease;width:24px;height:24px}.iti__search-clear .iti__search-clear-x{stroke-width:2}.iti__search-clear .iti__search-clear-bg{fill:var(--iti-search-icon-color)}[dir=rtl] .iti__search-clear{right:auto;left:4px}.iti__search-clear:focus-visible,.iti__search-clear:hover{background:var(--iti-hover-color);outline:0}.iti__no-results{text-align:center;padding:30px 0}.iti__country-list{list-style:none;padding:0;margin:0;cursor:pointer;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti--inline-dropdown .iti__country-list{max-height:185px}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}@media (max-width:500px){.iti--flexible-dropdown-width .iti__country-list{white-space:normal}}.iti__country{display:flex;align-items:center;padding:8px var(--iti-spacer-horizontal);outline:0}.iti__dial-code{color:var(--iti-dialcode-color)}.iti__country.iti__highlight{background-color:var(--iti-hover-color)}.iti__country-list .iti__flag,.iti__country-name{margin-right:var(--iti-spacer-horizontal)}[dir=rtl] .iti__country-list .iti__flag,[dir=rtl] .iti__country-name{margin-right:0;margin-left:var(--iti-spacer-horizontal)}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) button.iti__selected-country{cursor:pointer}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary{background-color:var(--iti-hover-color)}.iti .iti__selected-dial-code{margin-left:4px}.iti--container{position:fixed;top:-1000px;left:-1000px;z-index:1060;padding:var(--iti-border-width)}.iti--container:hover{cursor:pointer}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti--fullscreen-popup.iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:var(--iti-mobile-popup-margin);display:flex;flex-direction:column;justify-content:flex-start}.iti--fullscreen-popup .iti__dropdown-content{display:flex;flex-direction:column;max-height:100%;position:relative}.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{--iti-flag-offset:100px;height:var(--iti-flag-height);width:var(--iti-flag-width);border-radius:1px;box-shadow:0 0 1px 0 #888;background-image:var(--iti-path-flags-1x);background-repeat:no-repeat;background-position:var(--iti-flag-offset) 0;background-size:var(--iti-flag-sprite-width) var(--iti-flag-sprite-height)}.iti__ac{--iti-flag-offset:0px}.iti__ad{--iti-flag-offset:-16px}.iti__ae{--iti-flag-offset:-32px}.iti__af{--iti-flag-offset:-48px}.iti__ag{--iti-flag-offset:-64px}.iti__ai{--iti-flag-offset:-80px}.iti__al{--iti-flag-offset:-96px}.iti__am{--iti-flag-offset:-112px}.iti__ao{--iti-flag-offset:-128px}.iti__ar{--iti-flag-offset:-144px}.iti__as{--iti-flag-offset:-160px}.iti__at{--iti-flag-offset:-176px}.iti__au{--iti-flag-offset:-192px}.iti__aw{--iti-flag-offset:-208px}.iti__ax{--iti-flag-offset:-224px}.iti__az{--iti-flag-offset:-240px}.iti__ba{--iti-flag-offset:-256px}.iti__bb{--iti-flag-offset:-272px}.iti__bd{--iti-flag-offset:-288px}.iti__be{--iti-flag-offset:-304px}.iti__bf{--iti-flag-offset:-320px}.iti__bg{--iti-flag-offset:-336px}.iti__bh{--iti-flag-offset:-352px}.iti__bi{--iti-flag-offset:-368px}.iti__bj{--iti-flag-offset:-384px}.iti__bl{--iti-flag-offset:-400px}.iti__bm{--iti-flag-offset:-416px}.iti__bn{--iti-flag-offset:-432px}.iti__bo{--iti-flag-offset:-448px}.iti__bq{--iti-flag-offset:-464px}.iti__br{--iti-flag-offset:-480px}.iti__bs{--iti-flag-offset:-496px}.iti__bt{--iti-flag-offset:-512px}.iti__bw{--iti-flag-offset:-528px}.iti__by{--iti-flag-offset:-544px}.iti__bz{--iti-flag-offset:-560px}.iti__ca{--iti-flag-offset:-576px}.iti__cc{--iti-flag-offset:-592px}.iti__cd{--iti-flag-offset:-608px}.iti__cf{--iti-flag-offset:-624px}.iti__cg{--iti-flag-offset:-640px}.iti__ch{--iti-flag-offset:-656px}.iti__ci{--iti-flag-offset:-672px}.iti__ck{--iti-flag-offset:-688px}.iti__cl{--iti-flag-offset:-704px}.iti__cm{--iti-flag-offset:-720px}.iti__cn{--iti-flag-offset:-736px}.iti__co{--iti-flag-offset:-752px}.iti__cr{--iti-flag-offset:-768px}.iti__cu{--iti-flag-offset:-784px}.iti__cv{--iti-flag-offset:-800px}.iti__cw{--iti-flag-offset:-816px}.iti__cx{--iti-flag-offset:-832px}.iti__cy{--iti-flag-offset:-848px}.iti__cz{--iti-flag-offset:-864px}.iti__de{--iti-flag-offset:-880px}.iti__dj{--iti-flag-offset:-896px}.iti__dk{--iti-flag-offset:-912px}.iti__dm{--iti-flag-offset:-928px}.iti__do{--iti-flag-offset:-944px}.iti__dz{--iti-flag-offset:-960px}.iti__ec{--iti-flag-offset:-976px}.iti__ee{--iti-flag-offset:-992px}.iti__eg{--iti-flag-offset:-1008px}.iti__eh{--iti-flag-offset:-1024px}.iti__er{--iti-flag-offset:-1040px}.iti__es{--iti-flag-offset:-1056px}.iti__et{--iti-flag-offset:-1072px}.iti__fi{--iti-flag-offset:-1088px}.iti__fj{--iti-flag-offset:-1104px}.iti__fk{--iti-flag-offset:-1120px}.iti__fm{--iti-flag-offset:-1136px}.iti__fo{--iti-flag-offset:-1152px}.iti__fr{--iti-flag-offset:-1168px}.iti__ga{--iti-flag-offset:-1184px}.iti__gb{--iti-flag-offset:-1200px}.iti__gd{--iti-flag-offset:-1216px}.iti__ge{--iti-flag-offset:-1232px}.iti__gf{--iti-flag-offset:-1248px}.iti__gg{--iti-flag-offset:-1264px}.iti__gh{--iti-flag-offset:-1280px}.iti__gi{--iti-flag-offset:-1296px}.iti__gl{--iti-flag-offset:-1312px}.iti__gm{--iti-flag-offset:-1328px}.iti__gn{--iti-flag-offset:-1344px}.iti__gp{--iti-flag-offset:-1360px}.iti__gq{--iti-flag-offset:-1376px}.iti__gr{--iti-flag-offset:-1392px}.iti__gt{--iti-flag-offset:-1408px}.iti__gu{--iti-flag-offset:-1424px}.iti__gw{--iti-flag-offset:-1440px}.iti__gy{--iti-flag-offset:-1456px}.iti__hk{--iti-flag-offset:-1472px}.iti__hn{--iti-flag-offset:-1488px}.iti__hr{--iti-flag-offset:-1504px}.iti__ht{--iti-flag-offset:-1520px}.iti__hu{--iti-flag-offset:-1536px}.iti__id{--iti-flag-offset:-1552px}.iti__ie{--iti-flag-offset:-1568px}.iti__il{--iti-flag-offset:-1584px}.iti__im{--iti-flag-offset:-1600px}.iti__in{--iti-flag-offset:-1616px}.iti__io{--iti-flag-offset:-1632px}.iti__iq{--iti-flag-offset:-1648px}.iti__ir{--iti-flag-offset:-1664px}.iti__is{--iti-flag-offset:-1680px}.iti__it{--iti-flag-offset:-1696px}.iti__je{--iti-flag-offset:-1712px}.iti__jm{--iti-flag-offset:-1728px}.iti__jo{--iti-flag-offset:-1744px}.iti__jp{--iti-flag-offset:-1760px}.iti__ke{--iti-flag-offset:-1776px}.iti__kg{--iti-flag-offset:-1792px}.iti__kh{--iti-flag-offset:-1808px}.iti__ki{--iti-flag-offset:-1824px}.iti__km{--iti-flag-offset:-1840px}.iti__kn{--iti-flag-offset:-1856px}.iti__kp{--iti-flag-offset:-1872px}.iti__kr{--iti-flag-offset:-1888px}.iti__kw{--iti-flag-offset:-1904px}.iti__ky{--iti-flag-offset:-1920px}.iti__kz{--iti-flag-offset:-1936px}.iti__la{--iti-flag-offset:-1952px}.iti__lb{--iti-flag-offset:-1968px}.iti__lc{--iti-flag-offset:-1984px}.iti__li{--iti-flag-offset:-2000px}.iti__lk{--iti-flag-offset:-2016px}.iti__lr{--iti-flag-offset:-2032px}.iti__ls{--iti-flag-offset:-2048px}.iti__lt{--iti-flag-offset:-2064px}.iti__lu{--iti-flag-offset:-2080px}.iti__lv{--iti-flag-offset:-2096px}.iti__ly{--iti-flag-offset:-2112px}.iti__ma{--iti-flag-offset:-2128px}.iti__mc{--iti-flag-offset:-2144px}.iti__md{--iti-flag-offset:-2160px}.iti__me{--iti-flag-offset:-2176px}.iti__mf{--iti-flag-offset:-2192px}.iti__mg{--iti-flag-offset:-2208px}.iti__mh{--iti-flag-offset:-2224px}.iti__mk{--iti-flag-offset:-2240px}.iti__ml{--iti-flag-offset:-2256px}.iti__mm{--iti-flag-offset:-2272px}.iti__mn{--iti-flag-offset:-2288px}.iti__mo{--iti-flag-offset:-2304px}.iti__mp{--iti-flag-offset:-2320px}.iti__mq{--iti-flag-offset:-2336px}.iti__mr{--iti-flag-offset:-2352px}.iti__ms{--iti-flag-offset:-2368px}.iti__mt{--iti-flag-offset:-2384px}.iti__mu{--iti-flag-offset:-2400px}.iti__mv{--iti-flag-offset:-2416px}.iti__mw{--iti-flag-offset:-2432px}.iti__mx{--iti-flag-offset:-2448px}.iti__my{--iti-flag-offset:-2464px}.iti__mz{--iti-flag-offset:-2480px}.iti__na{--iti-flag-offset:-2496px}.iti__nc{--iti-flag-offset:-2512px}.iti__ne{--iti-flag-offset:-2528px}.iti__nf{--iti-flag-offset:-2544px}.iti__ng{--iti-flag-offset:-2560px}.iti__ni{--iti-flag-offset:-2576px}.iti__nl{--iti-flag-offset:-2592px}.iti__no{--iti-flag-offset:-2608px}.iti__np{--iti-flag-offset:-2624px}.iti__nr{--iti-flag-offset:-2640px}.iti__nu{--iti-flag-offset:-2656px}.iti__nz{--iti-flag-offset:-2672px}.iti__om{--iti-flag-offset:-2688px}.iti__pa{--iti-flag-offset:-2704px}.iti__pe{--iti-flag-offset:-2720px}.iti__pf{--iti-flag-offset:-2736px}.iti__pg{--iti-flag-offset:-2752px}.iti__ph{--iti-flag-offset:-2768px}.iti__pk{--iti-flag-offset:-2784px}.iti__pl{--iti-flag-offset:-2800px}.iti__pm{--iti-flag-offset:-2816px}.iti__pr{--iti-flag-offset:-2832px}.iti__ps{--iti-flag-offset:-2848px}.iti__pt{--iti-flag-offset:-2864px}.iti__pw{--iti-flag-offset:-2880px}.iti__py{--iti-flag-offset:-2896px}.iti__qa{--iti-flag-offset:-2912px}.iti__re{--iti-flag-offset:-2928px}.iti__ro{--iti-flag-offset:-2944px}.iti__rs{--iti-flag-offset:-2960px}.iti__ru{--iti-flag-offset:-2976px}.iti__rw{--iti-flag-offset:-2992px}.iti__sa{--iti-flag-offset:-3008px}.iti__sb{--iti-flag-offset:-3024px}.iti__sc{--iti-flag-offset:-3040px}.iti__sd{--iti-flag-offset:-3056px}.iti__se{--iti-flag-offset:-3072px}.iti__sg{--iti-flag-offset:-3088px}.iti__sh{--iti-flag-offset:-3104px}.iti__si{--iti-flag-offset:-3120px}.iti__sj{--iti-flag-offset:-3136px}.iti__sk{--iti-flag-offset:-3152px}.iti__sl{--iti-flag-offset:-3168px}.iti__sm{--iti-flag-offset:-3184px}.iti__sn{--iti-flag-offset:-3200px}.iti__so{--iti-flag-offset:-3216px}.iti__sr{--iti-flag-offset:-3232px}.iti__ss{--iti-flag-offset:-3248px}.iti__st{--iti-flag-offset:-3264px}.iti__sv{--iti-flag-offset:-3280px}.iti__sx{--iti-flag-offset:-3296px}.iti__sy{--iti-flag-offset:-3312px}.iti__sz{--iti-flag-offset:-3328px}.iti__tc{--iti-flag-offset:-3344px}.iti__td{--iti-flag-offset:-3360px}.iti__tg{--iti-flag-offset:-3376px}.iti__th{--iti-flag-offset:-3392px}.iti__tj{--iti-flag-offset:-3408px}.iti__tk{--iti-flag-offset:-3424px}.iti__tl{--iti-flag-offset:-3440px}.iti__tm{--iti-flag-offset:-3456px}.iti__tn{--iti-flag-offset:-3472px}.iti__to{--iti-flag-offset:-3488px}.iti__tr{--iti-flag-offset:-3504px}.iti__tt{--iti-flag-offset:-3520px}.iti__tv{--iti-flag-offset:-3536px}.iti__tw{--iti-flag-offset:-3552px}.iti__tz{--iti-flag-offset:-3568px}.iti__ua{--iti-flag-offset:-3584px}.iti__ug{--iti-flag-offset:-3600px}.iti__us{--iti-flag-offset:-3616px}.iti__uy{--iti-flag-offset:-3632px}.iti__uz{--iti-flag-offset:-3648px}.iti__va{--iti-flag-offset:-3664px}.iti__vc{--iti-flag-offset:-3680px}.iti__ve{--iti-flag-offset:-3696px}.iti__vg{--iti-flag-offset:-3712px}.iti__vi{--iti-flag-offset:-3728px}.iti__vn{--iti-flag-offset:-3744px}.iti__vu{--iti-flag-offset:-3760px}.iti__wf{--iti-flag-offset:-3776px}.iti__ws{--iti-flag-offset:-3792px}.iti__xk{--iti-flag-offset:-3808px}.iti__ye{--iti-flag-offset:-3824px}.iti__yt{--iti-flag-offset:-3840px}.iti__za{--iti-flag-offset:-3856px}.iti__zm{--iti-flag-offset:-3872px}.iti__zw{--iti-flag-offset:-3888px}.iti__globe{background-image:var(--iti-path-globe-1x);background-size:contain;background-position:right;box-shadow:none;height:19px}@media (min-resolution:2x){.iti__flag{background-image:var(--iti-path-flags-2x)}.iti__globe{background-image:var(--iti-path-globe-2x)}}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.mobile-text { display: none; }

@media (max-width: 1200px) {
  .mobile-text { display: inline-block !important; }
  ul.mobile-text { display: grid !important; }
  .desktop-text { display: none !important; }
}

body {
  color: var(--foreground);
}

.ml4 {
  position: relative;
}

.ml4 .letters {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  opacity: 0; 
}

li::marker {
  color: #6D47A3;
}


.steps {
  width: 100%;
  
  top: 0;
  left: 0;
}

.animated_logo {
  max-width: 5s;
  top: 0;
  left: 0;
  object-fit: cover;
  animation: birdFly 3s ease-in-out infinite;
}

@keyframes birdFly {
  0%, 100% {
    transform: translateY(0); /* Começa e termina na posição original */
  }
  50% {
    transform: translateY(-10px); /* Move para cima */
  }
}

.wave {
  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) } 
  100% { transform: rotate( 0.0deg) }
}

.selected {
  background-color: #f0f0f0; /* Light gray background */
  color: #000; /* Black text */
  font-weight: bold; /* Bold text */
  border-radius: 4px; /* Rounded corners */
}

/*Signup step3*/
.day-off-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.day-off-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid #4F46E5; /* brand color */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  user-select: none;
  outline: none;
  color: #4F46E5;
  transition: background-color 0.3s, color 0.3s;
}

input[type="checkbox"]:checked + .day-off-circle {
  background-color: #4F46E5; /* brand color */
  color: white;
}
/*FIM Signup step3*/

@media (min-width: 1024px) {
  .app-news-dialog {
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 3rem);
    width: min(1120px, calc(100vw - 3rem), calc((100vh - 3rem) * 16 / 9));
  }
}

@keyframes app-news-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes app-news-rainbow-sweep {
  0% {
    background-position: 140% 50%;
  }

  100% {
    background-position: -140% 50%;
  }
}

.app-news-rainbow-title {
  position: relative;
  display: inline-block;
}

.app-news-rainbow-title::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, #f5f0fb 47%, #e2d1f3 53%, #a882d4 59%, transparent 66%, transparent 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  animation: app-news-rainbow-sweep 3.8s ease-in-out infinite;
}

.app-news-slide-in {
  animation: app-news-slide-in 320ms ease-out both;
}

/* Rainbow dot rail: each release is a spectrum-ordered dot (color comes from a
   Tailwind bg-* class); inactive dots are dimmed, the active one grows into a pill. */
.app-news-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  opacity: 0.35;
  cursor: pointer;
  transition: width 0.25s ease, opacity 0.25s ease;
}

.app-news-dot:hover {
  opacity: 0.7;
}

.app-news-dot--active {
  width: 1.5rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .app-news-rainbow-title::after {
    animation: none;
    content: none;
  }

  .app-news-slide-in {
    animation: none;
  }

  .app-news-dot {
    transition: none;
  }
}