/* ==========================================================================
   LP03 · UNIT 4 · NO ERP? YOU CAN STILL GET STARTED — platform window
   --------------------------------------------------------------------------
   Copy at inline-start; at inline-end a desk photo with a small Fatorly
   platform window resting over its edge. The window has two tabs taken
   from the copy's two verbs — enter · upload:
     • Enter  → invoice fields fill in as if typed
     • Upload → a file drops into the zone and invoice rows fill in
   noerp.js plays the two demos in turn while on screen; the tabs are real
   (keyboard + click) and stop the autoplay. Without JS / motion both panels
   are shown stacked, fully filled.
   ========================================================================== */

.noerp {
  background:
    linear-gradient(160deg, #EEF6F8 0%, var(--c-white) 55%, #F4F7F9 100%);
}

.noerp__decor {
  background:
    radial-gradient(ellipse 50% 55% at 95% 50%, rgba(0, 169, 182, 0.1), transparent 70%);
}

/* soft arc behind the photo */
.noerp__arc {
  position: absolute;
  inset-block-start: 12%;
  inset-inline-end: -12rem;
  inline-size: 38rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 169, 182, 0.18);
  box-shadow: inset 0 0 0 3.5rem rgba(0, 169, 182, 0.04);
}

[dir="rtl"] .noerp__decor {
  scale: -1 1;
}

.noerp__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .noerp__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }
}

/* ---------------------------------------------------------------------------
   Copy
   --------------------------------------------------------------------------- */
.noerp__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

.noerp__copy h2 {
  max-inline-size: 16ch;
}

.noerp__copy .t-body {
  max-inline-size: 32rem;
}

@media (min-width: 48rem) {
  .noerp__copy {
    justify-items: start;
    text-align: start;
  }
}

/* "No ERP" mark: a crossed server beside a light laptop — no big install */
.noerp__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.noerp__mark span {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 14px;
}

.noerp__mark span:first-child {
  border: 1px dashed var(--c-ink-a20);
  color: var(--c-mist);
}

.noerp__mark span:last-child {
  background-color: var(--c-navy);
  color: var(--c-teal);
  box-shadow: var(--shadow-md);
}

.noerp__mark > svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--c-teal);
}

.noerp__mark span svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Visual: photo + platform window
   --------------------------------------------------------------------------- */
.noerp__visual {
  position: relative;
  display: grid;
  justify-items: end;
  padding-block-end: 2rem;
}

.noerp__photo {
  margin: 0;
  inline-size: min(100%, 34rem);
}

.noerp__photo img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 40% center;
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-lg);
}

/* Platform window */
.noerp__win {
  position: relative;
  inline-size: min(92%, 22rem);
  margin-block-start: -6rem;
  justify-self: center;
  border-radius: var(--r-card);
  background-color: var(--c-white);
  box-shadow: 0 30px 70px -18px rgba(2, 17, 58, 0.35), 0 0 0 1px var(--c-ink-a10);
  overflow: hidden;
  direction: ltr;                  /* product UI mock reads left → right */
}

@media (min-width: 48rem) {
  .noerp__win {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: -2rem;
    margin-block-start: 0;
  }
}

@media (min-width: 64rem) {
  .noerp__win {
    inset-inline-start: -3.5rem;
  }
}

.noerp__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.6rem;
  padding-inline: 0.875rem;
  background-color: var(--c-cloud);
  border-block-end: 1px solid var(--c-ink-a10);
}

.noerp__bar i {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--c-ink-a20);
}

.noerp__bar img {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: auto;
}

/* Tabs (only active with JS) */
.noerp__tabs {
  display: none;
  gap: 0.25rem;
  margin: 0.75rem;
  margin-block-end: 0;
  padding: 0.25rem;
  border-radius: 12px;
  background-color: var(--c-cloud);
}

.noerp.is-live .noerp__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.noerp__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-slate);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}

.noerp__tab svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.noerp__tab[aria-selected="true"] {
  background-color: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}

.noerp__tab[aria-selected="true"] svg {
  color: var(--c-teal);
}

.noerp__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 169, 182, 0.35);
}

/* Panels */
.noerp__panel {
  display: grid;
  gap: 0.6rem;
  padding: 0.875rem;
}

.noerp__panel + .noerp__panel {
  border-block-start: 1px solid var(--c-ink-a10);
}

.noerp.is-live .noerp__panel + .noerp__panel {
  border-block-start: 0;
}

.noerp.is-live .noerp__panel {
  min-block-size: 12.5rem;
  align-content: start;
}

/* ---- Enter: typed fields ------------------------------------------------- */
.noerp__field {
  display: grid;
  gap: 0.3rem;
}

.noerp__label {
  display: block;
  inline-size: 34%;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a20);
}

.noerp__input {
  position: relative;
  display: flex;
  align-items: center;
  block-size: 2rem;
  padding-inline: 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--c-ink-a10);
  background-color: var(--c-white);
}

.noerp__input.is-focus {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0, 169, 182, 0.18);
}

.noerp__fill {
  display: block;
  inline-size: var(--w, 70%);
  block-size: 0.4rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink);
  opacity: 0.7;
  transform-origin: 0% 50%;
}

.noerp__caret {
  inline-size: 1.5px;
  block-size: 0.9rem;
  margin-inline-start: 2px;
  background-color: var(--c-teal);
  opacity: 0;
}

.noerp__input.is-focus .noerp__caret {
  opacity: 1;
  animation: noerp-blink 0.9s steps(1) infinite;
}

@keyframes noerp-blink {
  50% { opacity: 0; }
}

/* Saved pill (both panels) */
.noerp__saved {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  padding-block: 0.3rem;
  padding-inline: 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background-color: rgba(0, 169, 182, 0.12);
  color: var(--c-deep-teal);
}

.noerp__saved svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  color: var(--c-teal);
}

.noerp__saved i {
  display: block;
  inline-size: 3rem;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: rgba(1, 62, 106, 0.35);
}

/* ---- Upload: drop zone + rows -------------------------------------------- */
.noerp__zone {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 5.25rem;
  border-radius: 12px;
  border: 1.5px dashed rgba(0, 169, 182, 0.45);
  background-color: rgba(0, 169, 182, 0.04);
  color: var(--c-teal);
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.noerp__zone.is-over {
  border-color: var(--c-teal);
  background-color: rgba(0, 169, 182, 0.12);
}

.noerp__zone > svg {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

/* the dropped file */
.noerp__file {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  inline-size: fit-content;
  margin-inline: auto;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem;
  padding-inline-end: 0.6rem;
  border-radius: 8px;
  background-color: var(--c-white);
  box-shadow: var(--shadow-md);
}

.noerp__file b {
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 5px;
  background-color: #12A150;
  color: var(--c-white);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.noerp__file i {
  display: block;
  inline-size: 3.25rem;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a20);
}

.noerp:not(.is-live) .noerp__file {
  display: none;
}

.noerp__row {
  display: grid;
  grid-template-columns: 0.9rem 1fr 0.7fr;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.3rem;
  border-block-end: 1px solid var(--c-ink-a10);
}

.noerp__row svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  color: var(--c-teal);
}

.noerp__row i {
  display: block;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a20);
}

.noerp__row i:last-child {
  background-color: rgba(0, 169, 182, 0.4);
}

/* Decorative wrapper inside each panel: its children join the panel grid */
.noerp__mock {
  display: contents;
}

/* ---------------------------------------------------------------------------
   Section CTA (→ hero form)
   --------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .noerp__cta {
    justify-content: flex-start;    /* follows the start-aligned copy */
  }
}